chore: AppNavi, BottomFixedArea, MultiComboboxの内部処理を整理する

packages/smarthr-ui/src/components/AppNavi/AppNaviAnchor.tsx

@@ -14,7 +14,7 @@ import { tv } from 'tailwind-variants'
 import { ElementRef, ElementRefProps } from '../../types'
 import { ComponentProps as IconProps } from '../Icon'
 
-import { appNaviItemStyle } from './style'
+import { itemClassNameGenerator } from './itemClassNameGenerator'
 
 type ElementProps<T extends ElementType> = Omit<
   ComponentPropsWithoutRef<T>,
@@ -37,7 +37,7 @@ type AppNaviAnchorComponent = <T extends ElementType = 'a'>(
 ) => ReturnType<FC>
 
 const classNameGenerator = tv({
-  extend: appNaviItemStyle,
+  extend: itemClassNameGenerator,
   slots: {
     wrapper: ['smarthr-ui-AppNavi-anchor', 'forced-colors:shr-underline'],
   },

packages/smarthr-ui/src/components/AppNavi/AppNaviButton.tsx

@@ -4,7 +4,7 @@ import { tv } from 'tailwind-variants'
 import { UnstyledButton } from '../Button'
 import { ComponentProps as IconProps } from '../Icon'
 
-import { appNaviItemStyle } from './style'
+import { itemClassNameGenerator } from './itemClassNameGenerator'
 
 export type AppNaviButtonProps = PropsWithChildren<{
   /** 表示するアイコンタイプ */
@@ -16,7 +16,7 @@ export type AppNaviButtonProps = PropsWithChildren<{
 }>
 
 const classNameGenerator = tv({
-  extend: appNaviItemStyle,
+  extend: itemClassNameGenerator,
   slots: {
     wrapper: 'smarthr-ui-AppNavi-button',
   },

packages/smarthr-ui/src/components/AppNavi/AppNaviCustomTag.tsx

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants'
 
 import { ComponentProps as IconProps } from '../Icon'
 
-import { appNaviItemStyle } from './style'
+import { itemClassNameGenerator } from './itemClassNameGenerator'
 
 export type AppNaviCustomTagProps = PropsWithChildren<{
   /** このボタンのカスタムタグ */
@@ -15,7 +15,7 @@ export type AppNaviCustomTagProps = PropsWithChildren<{
 }> & { [key: string]: any }
 
 const classNameGenerator = tv({
-  extend: appNaviItemStyle,
+  extend: itemClassNameGenerator,
   slots: {
     wrapper: 'smarthr-ui-AppNavi-customTag',
   },

packages/smarthr-ui/src/components/AppNavi/AppNaviDropdown.tsx

@@ -5,7 +5,7 @@ import { UnstyledButton } from '../Button'
 import { Dropdown, DropdownContent, DropdownTrigger } from '../Dropdown'
 import { FaCaretDownIcon, ComponentProps as IconProps } from '../Icon'
 
-import { appNaviItemStyle } from './style'
+import { itemClassNameGenerator } from './itemClassNameGenerator'
 
 export type AppNaviDropdownProps = PropsWithChildren<{
   /** ドロップダウンのコンテンツ */
@@ -18,7 +18,7 @@ export type AppNaviDropdownProps = PropsWithChildren<{
 }>
 
 const classNameGenerator = tv({
-  extend: appNaviItemStyle,
+  extend: itemClassNameGenerator,
   variants: {
     displayCaret: {
       true: {

packages/smarthr-ui/src/components/AppNavi/style.ts → packages/smarthr-ui/src/components/AppNavi/itemClassNameGenerator.ts

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants'
 
-export const appNaviItemStyle = tv({
+export const itemClassNameGenerator = tv({
   slots: {
     wrapper: [
       'shr-box-border shr-inline-flex shr-cursor-pointer shr-items-center shr-gap-0.5 shr-whitespace-nowrap shr-px-0.5 shr-py-0.75 shr-text-base shr-font-bold shr-leading-none shr-no-underline shr-text-grey',

packages/smarthr-ui/src/components/BottomFixedArea/BottomFixedArea.tsx

@@ -1,21 +1,23 @@
 'use client'
 
 import React, {
-  ComponentProps,
-  ComponentPropsWithRef,
-  ComponentType,
-  FC,
-  FunctionComponentElement,
-  MouseEventHandler,
-  ReactNode,
+  type ComponentProps,
+  type ComponentPropsWithRef,
+  type ComponentType,
+  type FC,
+  type FunctionComponentElement,
+  type MouseEventHandler,
+  type PropsWithChildren,
+  type ReactNode,
+  memo,
   useEffect,
   useMemo,
 } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { Base } from '../Base'
 import { AnchorButton, Button } from '../Button'
-import { ComponentProps as IconProps } from '../Icon'
+import { type ComponentProps as IconProps } from '../Icon'
 import { Cluster, Stack } from '../Layout'
 
 import { validateElement } from './bottomFixedAreaHelper'
@@ -50,7 +52,7 @@ type Props = {
   zIndex?: number
 }
 
-const bottomFixedArea = tv({
+const classNameGenerator = tv({
   slots: {
     wrapper: [
       'smarthr-ui-BottomFixedArea',
@@ -78,22 +80,24 @@ export const BottomFixedArea: FC<Props & ElementProps> = ({
   className,
   ...props
 }) => {
-  const { wrapperStyleProps, tertiaryButtonStyle } = useMemo(() => {
-    const { wrapper, tertiaryButton } = bottomFixedArea()
+  const classNames = useMemo(() => {
+    const { wrapper, tertiaryButton } = classNameGenerator()
+
     return {
-      wrapperStyleProps: { className: wrapper({ className }), style: { zIndex } },
-      tertiaryButtonStyle: tertiaryButton(),
+      wrapper: wrapper({ className }),
+      tertiaryButton: tertiaryButton(),
     }
-  }, [className, zIndex])
+  }, [className])
+  const style = useMemo(() => ({ zIndex }), [zIndex])
 
   useEffect(() => {
     validateElement(primaryButton, secondaryButton)
   }, [primaryButton, secondaryButton])
 
   return (
-    <Base {...props} {...wrapperStyleProps}>
+    <Base {...props} className={classNames.wrapper} style={style}>
       <Stack>
-        {description && <p className="smarthr-ui-BottomFixedArea-description">{description}</p>}
+        <Description>{description}</Description>
         <Stack gap={0.25}>
           {(secondaryButton || primaryButton) && (
             <Cluster as="ul" justify="center" gap={{ row: 0.5, column: 1 }}>
@@ -107,14 +111,13 @@ export const BottomFixedArea: FC<Props & ElementProps> = ({
           )}
           {tertiaryLinks && tertiaryLinks.length > 0 && (
             <Cluster as="ul" justify="center" gap={{ row: 0.5, column: 0 }}>
-              {tertiaryLinks.map(({ text, icon: Icon, onClick, ...tertiaryProps }, index) => (
+              {tertiaryLinks.map(({ text, icon: Icon, ...tertiaryRest }, index) => (
                 <li key={index} className="smarthr-ui-BottomFixedArea-tertiaryListItem">
                   <Button
-                    {...tertiaryProps}
+                    {...tertiaryRest}
                     variant="text"
                     prefix={Icon && <Icon />}
-                    onClick={onClick}
-                    className={tertiaryButtonStyle}
+                    className={classNames.tertiaryButton}
                   >
                     {text}
                   </Button>
@@ -127,3 +130,8 @@ export const BottomFixedArea: FC<Props & ElementProps> = ({
     </Base>
   )
 }
+
+const Description = memo<PropsWithChildren>(
+  ({ children }) =>
+    children && <p className="smarthr-ui-BottomFixedArea-description">{children}</p>,
+)