From 3bb40d3772d1cde5fb6e5f852d7213ef7d90d062 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Fri, 24 Jan 2025 07:56:55 +0900
Subject: [PATCH 01/18] =?UTF-8?q?chore:=20decorators=E3=81=AE=E3=83=87?=
 =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=AB=E3=83=88=E6=96=87=E5=AD=97=E5=88=97?=
 =?UTF-8?q?=E3=81=AE=E6=8C=81=E3=81=A1=E6=96=B9=E3=82=92=E8=AA=BF=E6=95=B4?=
 =?UTF-8?q?=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Textarea/Textarea.tsx      | 42 +++++++++----------
 .../Textarea/stories/VRTTextarea.stories.tsx  | 24 +++++++++++
 2 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index d1317aa5e0..37635c15df 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -38,13 +38,7 @@ type Props = {
   /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */
   maxLetters?: number
   /** コンポーネント内の文言を変更するための関数を設定 */
-  decorators?: DecoratorsType<
-    | 'beforeMaxLettersCount'
-    | 'afterMaxLettersCount'
-    | 'afterMaxLettersCountExceeded'
-    | 'beforeScreenReaderMaxLettersDescription'
-    | 'afterScreenReaderMaxLettersDescription'
-  >
+  decorators?: DecoratorsType<keyof typeof DECORATOR_DEFAULT_TEXTS>
   /**
    * @deprecated placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。
    */
@@ -65,12 +59,13 @@ const getStringLength = (value: string | number | readonly string[]) => {
   return formattedValue.length - (formattedValue.match(surrogatePairs) || []).length
 }
 
-const TEXT_BEFORE_MAXLETTERS_COUNT = 'あと'
-const TEXT_AFTER_MAXLETTERS_COUNT = '文字'
-const TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED = 'オーバー'
-
-const SCREEN_READER_BEFORE_MAXLETTERS_DESCRIPTION = '最大'
-const SCREEN_READER_AFTER_MAXLETTERS_DESCRIPTION = '文字入力できます'
+const DECORATOR_DEFAULT_TEXTS = {
+  beforeMaxLettersCount: 'あと',
+  afterMaxLettersCount: '文字',
+  afterMaxLettersCountExceeded: 'オーバー',
+  beforeScreenReaderMaxLettersDescription: '最大',
+  afterScreenReaderMaxLettersDescription: '文字入力できます',
+}
 
 const textarea = tv({
   slots: {
@@ -135,22 +130,23 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
     } = useMemo(
       () => ({
         beforeMaxLettersCount:
-          decorators?.beforeMaxLettersCount?.(TEXT_BEFORE_MAXLETTERS_COUNT) ||
-          TEXT_BEFORE_MAXLETTERS_COUNT,
+          decorators?.beforeMaxLettersCount?.(DECORATOR_DEFAULT_TEXTS.beforeMaxLettersCount) ||
+          DECORATOR_DEFAULT_TEXTS.beforeMaxLettersCount,
         afterMaxLettersCount:
-          decorators?.afterMaxLettersCount?.(TEXT_AFTER_MAXLETTERS_COUNT) ||
-          TEXT_AFTER_MAXLETTERS_COUNT,
+          decorators?.afterMaxLettersCount?.(DECORATOR_DEFAULT_TEXTS.afterMaxLettersCount) ||
+          DECORATOR_DEFAULT_TEXTS.afterMaxLettersCount,
         maxLettersCountExceeded:
-          decorators?.afterMaxLettersCountExceeded?.(TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED) ||
-          TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED,
+          decorators?.afterMaxLettersCountExceeded?.(
+            DECORATOR_DEFAULT_TEXTS.afterMaxLettersCountExceeded,
+          ) || DECORATOR_DEFAULT_TEXTS.afterMaxLettersCountExceeded,
         beforeScreenReaderMaxLettersDescription:
           decorators?.beforeScreenReaderMaxLettersDescription?.(
-            SCREEN_READER_BEFORE_MAXLETTERS_DESCRIPTION,
-          ) || SCREEN_READER_BEFORE_MAXLETTERS_DESCRIPTION,
+            DECORATOR_DEFAULT_TEXTS.beforeScreenReaderMaxLettersDescription,
+          ) || DECORATOR_DEFAULT_TEXTS.beforeScreenReaderMaxLettersDescription,
         afterScreenReaderMaxLettersDescription:
           decorators?.afterScreenReaderMaxLettersDescription?.(
-            SCREEN_READER_AFTER_MAXLETTERS_DESCRIPTION,
-          ) || SCREEN_READER_AFTER_MAXLETTERS_DESCRIPTION,
+            DECORATOR_DEFAULT_TEXTS.afterScreenReaderMaxLettersDescription,
+          ) || DECORATOR_DEFAULT_TEXTS.afterScreenReaderMaxLettersDescription,
       }),
       [decorators],
     )
diff --git a/packages/smarthr-ui/src/components/Textarea/stories/VRTTextarea.stories.tsx b/packages/smarthr-ui/src/components/Textarea/stories/VRTTextarea.stories.tsx
index cfb0ee5f25..8cd308c7e0 100644
--- a/packages/smarthr-ui/src/components/Textarea/stories/VRTTextarea.stories.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/stories/VRTTextarea.stories.tsx
@@ -21,6 +21,30 @@ export default {
           <Textarea {...args} maxLetters={5} value="テキスト" />
           <Textarea {...args} maxLetters={5} value="テキストエ" />
           <Textarea {...args} maxLetters={5} value="テキストエリア" />
+          <Textarea
+            {...args}
+            maxLetters={5}
+            value="テキストエ"
+            decorators={{
+              beforeMaxLettersCount: (org) => `(${org})`,
+              afterMaxLettersCount: (org) => `(${org})`,
+              afterMaxLettersCountExceeded: (org) => `(${org})`,
+              beforeScreenReaderMaxLettersDescription: (org) => `(${org})`,
+              afterScreenReaderMaxLettersDescription: (org) => `(${org})`,
+            }}
+          />
+          <Textarea
+            {...args}
+            maxLetters={5}
+            value="テキストエリア"
+            decorators={{
+              beforeMaxLettersCount: (org) => `(${org})`,
+              afterMaxLettersCount: (org) => `(${org})`,
+              afterMaxLettersCountExceeded: (org) => `(${org})`,
+              beforeScreenReaderMaxLettersDescription: (org) => `(${org})`,
+              afterScreenReaderMaxLettersDescription: (org) => `(${org})`,
+            }}
+          />
           <Textarea {...args} placeholder="テキストエリア" />
         </Stack>
       ))}

From 5ef9eda7495e410b17a89824f80f1c42fbc2872d Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Fri, 24 Jan 2025 08:15:12 +0900
Subject: [PATCH 02/18] =?UTF-8?q?chore:=20DecoratorsType=E3=81=AE=E8=A8=AD?=
 =?UTF-8?q?=E7=BD=AE=E5=A0=B4=E6=89=80=E3=82=92=E7=A7=BB=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/smarthr-ui/src/components/Browser/Browser.tsx         | 2 +-
 packages/smarthr-ui/src/components/Button/Button.tsx           | 2 +-
 .../src/components/ComboBox/MultiComboBox/MultiComboBox.tsx    | 2 +-
 .../src/components/ComboBox/SingleComboBox/SingleComboBox.tsx  | 2 +-
 packages/smarthr-ui/src/components/ComboBox/useListBox.tsx     | 3 +--
 .../Dialog/ActionDialog/ActionDialogContentInner.tsx           | 3 ++-
 .../components/Dialog/FormDialog/FormDialogContentInner.tsx    | 3 ++-
 .../Dialog/MessageDialog/MessageDialogContentInner.tsx         | 3 +--
 packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx   | 3 +--
 packages/smarthr-ui/src/components/DropZone/DropZone.tsx       | 3 +--
 .../src/components/Dropdown/FilterDropdown/FilterDropdown.tsx  | 3 ++-
 .../src/components/Dropdown/SortDropdown/SortDropdown.tsx      | 3 +--
 .../src/components/Header/AppLauncher/AppLauncher.tsx          | 3 +--
 .../components/Header/LanguageSwitcher/LanguageSwitcher.tsx    | 3 ++-
 .../src/components/InformationPanel/InformationPanel.tsx       | 3 +--
 .../src/components/Input/SearchInput/SearchInput.tsx           | 3 +--
 packages/smarthr-ui/src/components/InputFile/InputFile.tsx     | 3 +--
 packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx | 3 +--
 packages/smarthr-ui/src/components/Select/Select.tsx           | 3 +--
 packages/smarthr-ui/src/components/Table/ThCheckbox.tsx        | 3 +--
 packages/smarthr-ui/src/components/Text/RangeSeparator.tsx     | 3 +--
 packages/smarthr-ui/src/components/Textarea/Textarea.tsx       | 3 +--
 .../smarthr-ui/src/{types/Decorator.ts => libs/decorator.ts}   | 0
 packages/smarthr-ui/src/types/index.ts                         | 1 -
 24 files changed, 26 insertions(+), 37 deletions(-)
 rename packages/smarthr-ui/src/{types/Decorator.ts => libs/decorator.ts} (100%)

diff --git a/packages/smarthr-ui/src/components/Browser/Browser.tsx b/packages/smarthr-ui/src/components/Browser/Browser.tsx
index 3f6596696e..8cf618808e 100644
--- a/packages/smarthr-ui/src/components/Browser/Browser.tsx
+++ b/packages/smarthr-ui/src/components/Browser/Browser.tsx
@@ -1,7 +1,7 @@
 import React, { FC, KeyboardEventHandler, useCallback, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { DecoratorsType } from '../../types'
+import { type DecoratorsType } from '../../libs/decorator'
 import { Text } from '../Text'
 
 import { BrowserColumn } from './BrowserColumn'
diff --git a/packages/smarthr-ui/src/components/Button/Button.tsx b/packages/smarthr-ui/src/components/Button/Button.tsx
index 921537ba43..23d04a49c2 100644
--- a/packages/smarthr-ui/src/components/Button/Button.tsx
+++ b/packages/smarthr-ui/src/components/Button/Button.tsx
@@ -4,7 +4,7 @@ import React, { ButtonHTMLAttributes, forwardRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { usePortal } from '../../hooks/usePortal'
-import { DecoratorsType } from '../../types'
+import { type DecoratorsType } from '../../libs/decorator'
 import { Loader } from '../Loader'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
 
diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
index e304b25962..004645300e 100644
--- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
@@ -15,6 +15,7 @@ import { useId } from 'react'
 import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../../libs/decorator'
 import { useOuterClick } from '../../../hooks/useOuterClick'
 import { genericsForwardRef } from '../../../libs/util'
 import { textColor } from '../../../themes'
@@ -26,7 +27,6 @@ import { useOptions } from '../useOptions'
 import { MultiSelectedItem } from './MultiSelectedItem'
 import { hasParentElementByClassName } from './multiComboBoxHelper'
 
-import type { DecoratorsType } from '../../../types'
 import type { BaseProps, ComboBoxItem } from '../types'
 
 type Props<T> = BaseProps<T> & {
diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
index 8898d4dfed..d773edcf0c 100644
--- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
@@ -16,6 +16,7 @@ import React, {
 import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../../libs/decorator'
 import { useClick } from '../../../hooks/useClick'
 import { genericsForwardRef } from '../../../libs/util'
 import { textColor } from '../../../themes'
@@ -25,7 +26,6 @@ import { Input } from '../../Input'
 import { useListBox } from '../useListBox'
 import { useOptions } from '../useOptions'
 
-import type { DecoratorsType } from '../../../types'
 import type { BaseProps, ComboBoxItem } from '../types'
 
 type Props<T> = BaseProps<T> & {
diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index eca85e675b..4aba6f1099 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -11,6 +11,7 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../libs/decorator'
 import { useEnhancedEffect } from '../../hooks/useEnhancedEffect'
 import { usePortal } from '../../hooks/usePortal'
 import { spacing } from '../../themes'
@@ -23,8 +24,6 @@ import { ComboBoxItem, ComboBoxOption } from './types'
 import { useActiveOption } from './useActiveOption'
 import { usePartialRendering } from './usePartialRendering'
 
-import type { DecoratorsType } from '../../types'
-
 type Props<T> = {
   options: Array<ComboBoxOption<T>>
   dropdownHelpMessage?: ReactNode
diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
index 4d83d9a9bf..7f2832e588 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
@@ -2,6 +2,7 @@
 
 import React, { type FC, type PropsWithChildren, type ReactNode, useCallback } from 'react'
 
+import { type DecoratorsType } from '../../../libs/decorator'
 import { Button } from '../../Button'
 import { Cluster, Stack } from '../../Layout'
 import { ResponseMessage } from '../../ResponseMessage'
@@ -9,7 +10,7 @@ import { DialogBody, type Props as DialogBodyProps } from '../DialogBody'
 import { DialogHeader, type Props as DialogHeaderProps } from '../DialogHeader'
 import { dialogContentInner } from '../dialogInnerStyle'
 
-import type { DecoratorsType, ResponseMessageType } from '../../../types'
+import type { ResponseMessageType } from '../../../types'
 
 export type BaseProps = PropsWithChildren<
   DialogHeaderProps &
diff --git a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx
index 026820f29c..a4d514fab9 100644
--- a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx
@@ -7,6 +7,7 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../../libs/decorator'
 import { Button } from '../../Button'
 import { Cluster, Stack } from '../../Layout'
 import { ResponseMessage } from '../../ResponseMessage'
@@ -15,7 +16,7 @@ import { DialogBody, Props as DialogBodyProps } from '../DialogBody'
 import { DialogHeader, type Props as DialogHeaderProps } from '../DialogHeader'
 import { dialogContentInner } from '../dialogInnerStyle'
 
-import type { DecoratorsType, ResponseMessageType } from '../../../types'
+import type { ResponseMessageType } from '../../../types'
 
 export type BaseProps = PropsWithChildren<
   DialogHeaderProps &
diff --git a/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx
index 4b99580ac0..ced0d4811e 100644
--- a/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx
@@ -1,13 +1,12 @@
 import React, { type FC } from 'react'
 
+import { type DecoratorsType } from '../../../libs/decorator'
 import { Button } from '../../Button'
 import { Cluster, Stack } from '../../Layout'
 import { DialogBody, Props as DialogBodyProps } from '../DialogBody'
 import { DialogHeader, Props as DialogHeaderProps } from '../DialogHeader'
 import { dialogContentInner } from '../dialogInnerStyle'
 
-import type { DecoratorsType } from '../../../types'
-
 export type BaseProps = DialogHeaderProps &
   DialogBodyProps & {
     /** ダイアログの説明 */
diff --git a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
index accdb8c481..a96a012cfb 100644
--- a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
@@ -17,6 +17,7 @@ import React, {
 import Draggable from 'react-draggable'
 import { VariantProps, tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../libs/decorator'
 import { useHandleEscape } from '../../hooks/useHandleEscape'
 import { spacing } from '../../themes'
 import { Base, BaseElementProps } from '../Base'
@@ -27,8 +28,6 @@ import { DialogBody, type Props as DialogBodyProps } from './DialogBody'
 import { DialogOverlap } from './DialogOverlap'
 import { useDialogPortal } from './useDialogPortal'
 
-import type { DecoratorsType } from '../../types'
-
 type Props = PropsWithChildren<{
   /**
    * ダイアログのヘッダ部分の内容
diff --git a/packages/smarthr-ui/src/components/DropZone/DropZone.tsx b/packages/smarthr-ui/src/components/DropZone/DropZone.tsx
index ead14d1e92..de2579b855 100644
--- a/packages/smarthr-ui/src/components/DropZone/DropZone.tsx
+++ b/packages/smarthr-ui/src/components/DropZone/DropZone.tsx
@@ -14,11 +14,10 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../libs/decorator'
 import { Button } from '../Button'
 import { FaFolderOpenIcon } from '../Icon'
 
-import type { DecoratorsType } from '../../types'
-
 const dropZone = tv({
   slots: {
     wrapper: [
diff --git a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
index 2f4bb4dad5..2f46f9a6d5 100644
--- a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
@@ -4,6 +4,7 @@ import React, { ComponentProps, FC, ReactNode, useMemo } from 'react'
 import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorType, type DecoratorsType } from '../../../libs/decorator'
 import { Button, BaseProps as ButtonProps } from '../../Button'
 import { FaCircleCheckIcon, FaFilterIcon, FaRotateLeftIcon } from '../../Icon'
 import { Cluster, Stack } from '../../Layout'
@@ -13,7 +14,7 @@ import { DropdownCloser } from '../DropdownCloser'
 import { DropdownContent } from '../DropdownContent'
 import { DropdownTrigger } from '../DropdownTrigger'
 
-import type { DecoratorType, DecoratorsType, ResponseMessageType } from '../../../types'
+import type { ResponseMessageType } from '../../../types'
 
 type Props = {
   isFiltered?: boolean
diff --git a/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx
index 56f4dfceb0..6f7c71ee70 100644
--- a/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx
@@ -3,6 +3,7 @@
 import React, { ComponentPropsWithRef } from 'react'
 import { type FC, type MouseEventHandler } from 'react'
 
+import { type DecoratorsType } from '../../../libs/decorator'
 import { Button } from '../../Button'
 import { Fieldset } from '../../Fieldset'
 import { FormControl } from '../../FormControl'
@@ -16,8 +17,6 @@ import { DropdownTrigger } from '../DropdownTrigger'
 
 import { useSortDropdown } from './useSortDropdown'
 
-import type { DecoratorsType } from '../../../types'
-
 type SortFieldType = {
   value: string
 } & Omit<React.OptionHTMLAttributes<HTMLOptionElement>, 'value'>
diff --git a/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx b/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx
index 12b702552b..ed2d463bf1 100644
--- a/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx
+++ b/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx
@@ -1,6 +1,7 @@
 import React, { HTMLAttributes, ReactNode, useMemo } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../../libs/decorator'
 import { Button } from '../../Button'
 import { Dropdown, DropdownContent, DropdownTrigger } from '../../Dropdown'
 import { Heading } from '../../Heading'
@@ -9,8 +10,6 @@ import { Cluster, Stack } from '../../Layout'
 import { Section } from '../../SectioningContent'
 import { TextLink } from '../../TextLink'
 
-import type { DecoratorsType } from '../../../types'
-
 type Category = {
   type?: string
   heading: ReactNode
diff --git a/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx b/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
index 5a54ba387d..85e1dc0277 100644
--- a/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
+++ b/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
@@ -4,11 +4,12 @@ import React, { HTMLAttributes, useMemo } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
 import { tabbable } from '../../../libs/tabbable'
+import { type DecoratorsType } from '../../../libs/decorator'
 import { Button } from '../../Button'
 import { Dropdown, DropdownContent, DropdownTrigger } from '../../Dropdown'
 import { FaCaretDownIcon, FaCheckIcon, FaGlobeIcon, LanguageIcon } from '../../Icon'
 
-import type { DecoratorsType, LocaleMap } from '../../../types'
+import type { LocaleMap } from '../../../types'
 
 export type Props = {
   narrow?: boolean
diff --git a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx
index df3708d612..9c8fda9842 100644
--- a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx
+++ b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx
@@ -11,6 +11,7 @@ import React, {
 } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../libs/decorator'
 import { Base, BaseElementProps } from '../Base'
 import { Button } from '../Button'
 import { Heading, HeadingTagTypes } from '../Heading'
@@ -18,8 +19,6 @@ import { FaCaretDownIcon, FaCaretUpIcon } from '../Icon'
 import { Cluster } from '../Layout'
 import { ResponseMessage } from '../ResponseMessage'
 
-import type { DecoratorsType } from '../../types'
-
 type AbstractProps = PropsWithChildren<{
   /** パネルのタイトル */
   title: React.ReactNode
diff --git a/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx b/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx
index b680d91f76..9768953ea9 100644
--- a/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx
+++ b/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx
@@ -1,11 +1,10 @@
 import React, { ComponentProps, forwardRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../../libs/decorator'
 import { FaMagnifyingGlassIcon } from '../../Icon'
 import { InputWithTooltip } from '../InputWithTooltip'
 
-import type { DecoratorsType } from '../../../types'
-
 type Props = Omit<ComponentProps<typeof InputWithTooltip>, 'tooltipMessage' | 'prefix'> & {
   /** 入力欄の説明を紐付けるツールチップに表示するメッセージ */
   tooltipMessage: React.ReactNode
diff --git a/packages/smarthr-ui/src/components/InputFile/InputFile.tsx b/packages/smarthr-ui/src/components/InputFile/InputFile.tsx
index fed78b2c04..ead1f3bd67 100644
--- a/packages/smarthr-ui/src/components/InputFile/InputFile.tsx
+++ b/packages/smarthr-ui/src/components/InputFile/InputFile.tsx
@@ -12,13 +12,12 @@ import React, {
 } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../libs/decorator'
 import { BaseColumn } from '../Base'
 import { Button } from '../Button'
 import { FaFolderOpenIcon, FaTrashCanIcon } from '../Icon'
 import { Stack } from '../Layout'
 
-import type { DecoratorsType } from '../../types'
-
 const inputFile = tv({
   slots: {
     wrapper: 'smarthr-ui-InputFile shr-block',
diff --git a/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx b/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx
index b49355ec5f..2f5c902242 100644
--- a/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx
+++ b/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx
@@ -1,11 +1,10 @@
 import React, { ComponentPropsWithoutRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorType, type DecoratorsType } from '../../libs/decorator'
 import { Cluster } from '../Layout'
 import { RangeSeparator, Text } from '../Text'
 
-import type { DecoratorType, DecoratorsType } from '../../types'
-
 type Props = {
   start: number
   end: number
diff --git a/packages/smarthr-ui/src/components/Select/Select.tsx b/packages/smarthr-ui/src/components/Select/Select.tsx
index e581883fef..e0f8e06ccc 100644
--- a/packages/smarthr-ui/src/components/Select/Select.tsx
+++ b/packages/smarthr-ui/src/components/Select/Select.tsx
@@ -9,12 +9,11 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorType, type DecoratorsType } from '../../libs/decorator'
 import { isIOS, isMobileSafari } from '../../libs/ua'
 import { genericsForwardRef } from '../../libs/util'
 import { FaSortIcon } from '../Icon'
 
-import type { DecoratorType, DecoratorsType } from '../../types'
-
 type Option<T extends string> = {
   value: T
 } & Omit<React.OptionHTMLAttributes<HTMLOptionElement>, 'value'>
diff --git a/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx b/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx
index cc17c4fbdc..7e454701a1 100644
--- a/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx
+++ b/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx
@@ -1,13 +1,12 @@
 import React, { ComponentProps, forwardRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../libs/decorator'
 import { Balloon } from '../Balloon'
 import { CheckBox, Props as CheckBoxProps } from '../CheckBox'
 
 import { Th } from './Th'
 
-import type { DecoratorsType } from '../../types'
-
 type Props = {
   decorators?: DecoratorsType<'checkAllInvisibleLabel'> & {
     checkColumnName?: (text: string) => string
diff --git a/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx b/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx
index 5356e5163c..6ed34df238 100644
--- a/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx
+++ b/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx
@@ -1,9 +1,8 @@
 import React, { useMemo } from 'react'
 
+import { type DecoratorType, type DecoratorsType } from '../../libs/decorator'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
 
-import type { DecoratorType, DecoratorsType } from '../../types'
-
 type Props = {
   decorators?: DecoratorsType<'text' | 'visuallyHiddenText'>
 }
diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index 37635c15df..7f5299a72f 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -15,13 +15,12 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../libs/decorator'
 import { debounce } from '../../libs/debounce'
 import { lineHeight } from '../../themes'
 import { defaultHtmlFontSize } from '../../themes/createFontSize'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
 
-import type { DecoratorsType } from '../../types'
-
 type Props = {
   /** 入力値にエラーがあるかどうか */
   error?: boolean
diff --git a/packages/smarthr-ui/src/types/Decorator.ts b/packages/smarthr-ui/src/libs/decorator.ts
similarity index 100%
rename from packages/smarthr-ui/src/types/Decorator.ts
rename to packages/smarthr-ui/src/libs/decorator.ts
diff --git a/packages/smarthr-ui/src/types/index.ts b/packages/smarthr-ui/src/types/index.ts
index 34b138e3c0..cad56cd123 100644
--- a/packages/smarthr-ui/src/types/index.ts
+++ b/packages/smarthr-ui/src/types/index.ts
@@ -1,5 +1,4 @@
 export type { Gap, SeparateGap } from './Gap'
-export type { DecoratorsType, DecoratorType } from './Decorator'
 export type { ResponseMessageType } from './ResponseMessage'
 export type { LocaleMap } from './Locale'
 export type { ElementRef, ElementRefProps } from './ComponentTypes'

From 0d284e1cde8d89be7aeeaa4184ceab186d591278 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Fri, 24 Jan 2025 08:42:57 +0900
Subject: [PATCH 03/18] =?UTF-8?q?chore:=20useDecorators=E3=82=92=E5=AE=9A?=
 =?UTF-8?q?=E7=BE=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ComboBox/MultiComboBox/MultiComboBox.tsx  |  2 +-
 .../SingleComboBox/SingleComboBox.tsx         |  2 +-
 .../src/components/ComboBox/useListBox.tsx    |  2 +-
 .../src/components/Dialog/ModelessDialog.tsx  |  2 +-
 .../LanguageSwitcher/LanguageSwitcher.tsx     |  2 +-
 .../src/components/Textarea/Textarea.tsx      | 52 ++++++-------------
 packages/smarthr-ui/src/libs/decorator.ts     | 22 +++++++-
 7 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
index 004645300e..92ad5805c5 100644
--- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
@@ -15,8 +15,8 @@ import { useId } from 'react'
 import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
-import { type DecoratorsType } from '../../../libs/decorator'
 import { useOuterClick } from '../../../hooks/useOuterClick'
+import { type DecoratorsType } from '../../../libs/decorator'
 import { genericsForwardRef } from '../../../libs/util'
 import { textColor } from '../../../themes'
 import { FaCaretDownIcon } from '../../Icon'
diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
index d773edcf0c..34fef5ce35 100644
--- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
@@ -16,8 +16,8 @@ import React, {
 import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
-import { type DecoratorsType } from '../../../libs/decorator'
 import { useClick } from '../../../hooks/useClick'
+import { type DecoratorsType } from '../../../libs/decorator'
 import { genericsForwardRef } from '../../../libs/util'
 import { textColor } from '../../../themes'
 import { UnstyledButton } from '../../Button'
diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index 4aba6f1099..38d33a0bc2 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -11,9 +11,9 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { type DecoratorsType } from '../../libs/decorator'
 import { useEnhancedEffect } from '../../hooks/useEnhancedEffect'
 import { usePortal } from '../../hooks/usePortal'
+import { type DecoratorsType } from '../../libs/decorator'
 import { spacing } from '../../themes'
 import { FaInfoCircleIcon } from '../Icon'
 import { Loader } from '../Loader'
diff --git a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
index a96a012cfb..d1e18df794 100644
--- a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
@@ -17,8 +17,8 @@ import React, {
 import Draggable from 'react-draggable'
 import { VariantProps, tv } from 'tailwind-variants'
 
-import { type DecoratorsType } from '../../libs/decorator'
 import { useHandleEscape } from '../../hooks/useHandleEscape'
+import { type DecoratorsType } from '../../libs/decorator'
 import { spacing } from '../../themes'
 import { Base, BaseElementProps } from '../Base'
 import { Button } from '../Button'
diff --git a/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx b/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
index 85e1dc0277..10325ca2b4 100644
--- a/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
+++ b/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
@@ -3,8 +3,8 @@
 import React, { HTMLAttributes, useMemo } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
-import { tabbable } from '../../../libs/tabbable'
 import { type DecoratorsType } from '../../../libs/decorator'
+import { tabbable } from '../../../libs/tabbable'
 import { Button } from '../../Button'
 import { Dropdown, DropdownContent, DropdownTrigger } from '../../Dropdown'
 import { FaCaretDownIcon, FaCheckIcon, FaGlobeIcon, LanguageIcon } from '../../Icon'
diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index 7f5299a72f..3cff713243 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -15,8 +15,8 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { type DecoratorsType } from '../../libs/decorator'
 import { debounce } from '../../libs/debounce'
+import { type DecoratorsType, useDecorators } from '../../libs/decorator'
 import { lineHeight } from '../../themes'
 import { defaultHtmlFontSize } from '../../themes/createFontSize'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
@@ -120,34 +120,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
     const [count, setCount] = useState(currentValue ? getStringLength(currentValue) : 0)
     const [srCounterMessage, setSrCounterMessage] = useState<ReactNode>('')
 
-    const {
-      afterMaxLettersCount,
-      beforeMaxLettersCount,
-      maxLettersCountExceeded,
-      beforeScreenReaderMaxLettersDescription,
-      afterScreenReaderMaxLettersDescription,
-    } = useMemo(
-      () => ({
-        beforeMaxLettersCount:
-          decorators?.beforeMaxLettersCount?.(DECORATOR_DEFAULT_TEXTS.beforeMaxLettersCount) ||
-          DECORATOR_DEFAULT_TEXTS.beforeMaxLettersCount,
-        afterMaxLettersCount:
-          decorators?.afterMaxLettersCount?.(DECORATOR_DEFAULT_TEXTS.afterMaxLettersCount) ||
-          DECORATOR_DEFAULT_TEXTS.afterMaxLettersCount,
-        maxLettersCountExceeded:
-          decorators?.afterMaxLettersCountExceeded?.(
-            DECORATOR_DEFAULT_TEXTS.afterMaxLettersCountExceeded,
-          ) || DECORATOR_DEFAULT_TEXTS.afterMaxLettersCountExceeded,
-        beforeScreenReaderMaxLettersDescription:
-          decorators?.beforeScreenReaderMaxLettersDescription?.(
-            DECORATOR_DEFAULT_TEXTS.beforeScreenReaderMaxLettersDescription,
-          ) || DECORATOR_DEFAULT_TEXTS.beforeScreenReaderMaxLettersDescription,
-        afterScreenReaderMaxLettersDescription:
-          decorators?.afterScreenReaderMaxLettersDescription?.(
-            DECORATOR_DEFAULT_TEXTS.afterScreenReaderMaxLettersDescription,
-          ) || DECORATOR_DEFAULT_TEXTS.afterScreenReaderMaxLettersDescription,
-      }),
-      [decorators],
+    const decorated = useDecorators<keyof typeof DECORATOR_DEFAULT_TEXTS>(
+      DECORATOR_DEFAULT_TEXTS,
+      decorators,
     )
 
     const getCounterMessage = useCallback(
@@ -159,8 +134,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
           return (
             <>
               {counterValue - maxLetters}
-              {afterMaxLettersCount}
-              {maxLettersCountExceeded}
+              {decorated.afterMaxLettersCount}
+              {decorated.afterMaxLettersCountExceeded}
             </>
           )
         }
@@ -168,13 +143,18 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
         // あと{count}文字
         return (
           <>
-            {beforeMaxLettersCount}
+            {decorated.beforeMaxLettersCount}
             {maxLetters - counterValue}
-            {afterMaxLettersCount}
+            {decorated.afterMaxLettersCount}
           </>
         )
       },
-      [maxLetters, maxLettersCountExceeded, afterMaxLettersCount, beforeMaxLettersCount],
+      [
+        maxLetters,
+        decorated.afterMaxLettersCountExceeded,
+        decorated.afterMaxLettersCount,
+        decorated.beforeMaxLettersCount,
+      ],
     )
 
     const counterVisualMessage = useMemo(() => getCounterMessage(count), [count, getCounterMessage])
@@ -300,9 +280,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
         </span>
         <VisuallyHiddenText aria-live="polite">{srCounterMessage}</VisuallyHiddenText>
         <VisuallyHiddenText id={maxLettersNoticeId}>
-          {beforeScreenReaderMaxLettersDescription}
+          {decorated.beforeScreenReaderMaxLettersDescription}
           {maxLetters}
-          {afterScreenReaderMaxLettersDescription}
+          {decorated.afterScreenReaderMaxLettersDescription}
         </VisuallyHiddenText>
       </span>
     ) : (
diff --git a/packages/smarthr-ui/src/libs/decorator.ts b/packages/smarthr-ui/src/libs/decorator.ts
index 88ac3b5760..ffc5532bee 100644
--- a/packages/smarthr-ui/src/libs/decorator.ts
+++ b/packages/smarthr-ui/src/libs/decorator.ts
@@ -1,7 +1,27 @@
-import { ReactNode } from 'react'
+import { ReactNode, useMemo } from 'react'
 
 export type DecoratorsType<T extends string> = {
   [K in T]?: DecoratorType
 }
 
 export type DecoratorType = (text: string) => ReactNode
+
+export const useDecorators = <T extends string>(
+  defaultTexts: { [K in T]: string },
+  decorators: DecoratorsType<T> | undefined,
+) =>
+  useMemo(() => {
+    if (!decorators) {
+      return defaultTexts
+    }
+
+    const decorated = {} as { [K in T]: ReactNode }
+
+    for (const key in defaultTexts) {
+      const value = defaultTexts[key]
+
+      decorated[key] = decorators[key]?.(value) || value
+    }
+
+    return decorated
+  }, [decorators, defaultTexts])

From 7f052778b2a99b4526e1a7dc9098471ed14e6aee Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Sat, 25 Jan 2025 08:18:36 +0900
Subject: [PATCH 04/18] =?UTF-8?q?chore:=20useDecorators=E3=81=AB=E3=82=8F?=
 =?UTF-8?q?=E3=81=9F=E3=81=99generics=E3=82=92=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../smarthr-ui/src/components/Textarea/Textarea.tsx    | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index 3cff713243..bec5f01bac 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -37,7 +37,7 @@ type Props = {
   /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */
   maxLetters?: number
   /** コンポーネント内の文言を変更するための関数を設定 */
-  decorators?: DecoratorsType<keyof typeof DECORATOR_DEFAULT_TEXTS>
+  decorators?: DecoratorsType<DecoratorKeyTypes>
   /**
    * @deprecated placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。
    */
@@ -64,7 +64,8 @@ const DECORATOR_DEFAULT_TEXTS = {
   afterMaxLettersCountExceeded: 'オーバー',
   beforeScreenReaderMaxLettersDescription: '最大',
   afterScreenReaderMaxLettersDescription: '文字入力できます',
-}
+} as const
+type DecoratorKeyTypes = keyof typeof DECORATOR_DEFAULT_TEXTS
 
 const textarea = tv({
   slots: {
@@ -120,10 +121,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
     const [count, setCount] = useState(currentValue ? getStringLength(currentValue) : 0)
     const [srCounterMessage, setSrCounterMessage] = useState<ReactNode>('')
 
-    const decorated = useDecorators<keyof typeof DECORATOR_DEFAULT_TEXTS>(
-      DECORATOR_DEFAULT_TEXTS,
-      decorators,
-    )
+    const decorated = useDecorators<DecoratorKeyTypes>(DECORATOR_DEFAULT_TEXTS, decorators)
 
     const getCounterMessage = useCallback(
       (counterValue: number) => {

From 10baf9dc009d656cf04126f857c69f62ea4ed0ae Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Sat, 25 Jan 2025 08:25:30 +0900
Subject: [PATCH 05/18] =?UTF-8?q?chore:=20libs/decorator=20=E3=82=92=20hoo?=
 =?UTF-8?q?ks/useDecorators=20=E3=81=AB=E7=A7=BB=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/smarthr-ui/src/components/Browser/Browser.tsx          | 2 +-
 packages/smarthr-ui/src/components/Button/Button.tsx            | 2 +-
 .../src/components/ComboBox/MultiComboBox/MultiComboBox.tsx     | 2 +-
 .../src/components/ComboBox/SingleComboBox/SingleComboBox.tsx   | 2 +-
 packages/smarthr-ui/src/components/ComboBox/useListBox.tsx      | 2 +-
 .../components/Dialog/ActionDialog/ActionDialogContentInner.tsx | 2 +-
 .../src/components/Dialog/FormDialog/FormDialogContentInner.tsx | 2 +-
 .../Dialog/MessageDialog/MessageDialogContentInner.tsx          | 2 +-
 packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx    | 2 +-
 packages/smarthr-ui/src/components/DropZone/DropZone.tsx        | 2 +-
 .../src/components/Dropdown/FilterDropdown/FilterDropdown.tsx   | 2 +-
 .../src/components/Dropdown/SortDropdown/SortDropdown.tsx       | 2 +-
 .../src/components/Header/AppLauncher/AppLauncher.tsx           | 2 +-
 .../src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx | 2 +-
 .../src/components/InformationPanel/InformationPanel.tsx        | 2 +-
 .../smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx | 2 +-
 packages/smarthr-ui/src/components/InputFile/InputFile.tsx      | 2 +-
 packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx  | 2 +-
 packages/smarthr-ui/src/components/Select/Select.tsx            | 2 +-
 packages/smarthr-ui/src/components/Table/ThCheckbox.tsx         | 2 +-
 packages/smarthr-ui/src/components/Text/RangeSeparator.tsx      | 2 +-
 packages/smarthr-ui/src/components/Textarea/Textarea.tsx        | 2 +-
 .../src/{libs/decorator.ts => hooks/useDecorators.ts}           | 0
 23 files changed, 22 insertions(+), 22 deletions(-)
 rename packages/smarthr-ui/src/{libs/decorator.ts => hooks/useDecorators.ts} (100%)

diff --git a/packages/smarthr-ui/src/components/Browser/Browser.tsx b/packages/smarthr-ui/src/components/Browser/Browser.tsx
index 8cf618808e..b8828a8c64 100644
--- a/packages/smarthr-ui/src/components/Browser/Browser.tsx
+++ b/packages/smarthr-ui/src/components/Browser/Browser.tsx
@@ -1,7 +1,7 @@
 import React, { FC, KeyboardEventHandler, useCallback, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { type DecoratorsType } from '../../libs/decorator'
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { Text } from '../Text'
 
 import { BrowserColumn } from './BrowserColumn'
diff --git a/packages/smarthr-ui/src/components/Button/Button.tsx b/packages/smarthr-ui/src/components/Button/Button.tsx
index 23d04a49c2..27c1355683 100644
--- a/packages/smarthr-ui/src/components/Button/Button.tsx
+++ b/packages/smarthr-ui/src/components/Button/Button.tsx
@@ -3,8 +3,8 @@
 import React, { ButtonHTMLAttributes, forwardRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { usePortal } from '../../hooks/usePortal'
-import { type DecoratorsType } from '../../libs/decorator'
 import { Loader } from '../Loader'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
 
diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
index 92ad5805c5..2b70e06909 100644
--- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
@@ -15,8 +15,8 @@ import { useId } from 'react'
 import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { useOuterClick } from '../../../hooks/useOuterClick'
-import { type DecoratorsType } from '../../../libs/decorator'
 import { genericsForwardRef } from '../../../libs/util'
 import { textColor } from '../../../themes'
 import { FaCaretDownIcon } from '../../Icon'
diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
index 34fef5ce35..053af77e0b 100644
--- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
@@ -17,7 +17,7 @@ import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
 import { useClick } from '../../../hooks/useClick'
-import { type DecoratorsType } from '../../../libs/decorator'
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { genericsForwardRef } from '../../../libs/util'
 import { textColor } from '../../../themes'
 import { UnstyledButton } from '../../Button'
diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index 38d33a0bc2..bbe874e38c 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -11,9 +11,9 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { useEnhancedEffect } from '../../hooks/useEnhancedEffect'
 import { usePortal } from '../../hooks/usePortal'
-import { type DecoratorsType } from '../../libs/decorator'
 import { spacing } from '../../themes'
 import { FaInfoCircleIcon } from '../Icon'
 import { Loader } from '../Loader'
diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
index 7f2832e588..4492d8cc7e 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
@@ -2,7 +2,7 @@
 
 import React, { type FC, type PropsWithChildren, type ReactNode, useCallback } from 'react'
 
-import { type DecoratorsType } from '../../../libs/decorator'
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button } from '../../Button'
 import { Cluster, Stack } from '../../Layout'
 import { ResponseMessage } from '../../ResponseMessage'
diff --git a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx
index a4d514fab9..e56fbe6623 100644
--- a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx
@@ -7,7 +7,7 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { type DecoratorsType } from '../../../libs/decorator'
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button } from '../../Button'
 import { Cluster, Stack } from '../../Layout'
 import { ResponseMessage } from '../../ResponseMessage'
diff --git a/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx
index ced0d4811e..e1e84c0fb0 100644
--- a/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx
@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 
-import { type DecoratorsType } from '../../../libs/decorator'
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button } from '../../Button'
 import { Cluster, Stack } from '../../Layout'
 import { DialogBody, Props as DialogBodyProps } from '../DialogBody'
diff --git a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
index d1e18df794..a503ecead1 100644
--- a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
@@ -17,8 +17,8 @@ import React, {
 import Draggable from 'react-draggable'
 import { VariantProps, tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { useHandleEscape } from '../../hooks/useHandleEscape'
-import { type DecoratorsType } from '../../libs/decorator'
 import { spacing } from '../../themes'
 import { Base, BaseElementProps } from '../Base'
 import { Button } from '../Button'
diff --git a/packages/smarthr-ui/src/components/DropZone/DropZone.tsx b/packages/smarthr-ui/src/components/DropZone/DropZone.tsx
index de2579b855..46f2211fb5 100644
--- a/packages/smarthr-ui/src/components/DropZone/DropZone.tsx
+++ b/packages/smarthr-ui/src/components/DropZone/DropZone.tsx
@@ -14,7 +14,7 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { type DecoratorsType } from '../../libs/decorator'
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { Button } from '../Button'
 import { FaFolderOpenIcon } from '../Icon'
 
diff --git a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
index 2f46f9a6d5..3cd7f724f5 100644
--- a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
@@ -4,7 +4,7 @@ import React, { ComponentProps, FC, ReactNode, useMemo } from 'react'
 import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
-import { type DecoratorType, type DecoratorsType } from '../../../libs/decorator'
+import { type DecoratorType, type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button, BaseProps as ButtonProps } from '../../Button'
 import { FaCircleCheckIcon, FaFilterIcon, FaRotateLeftIcon } from '../../Icon'
 import { Cluster, Stack } from '../../Layout'
diff --git a/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx
index 6f7c71ee70..f5427ec3c2 100644
--- a/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx
@@ -3,7 +3,7 @@
 import React, { ComponentPropsWithRef } from 'react'
 import { type FC, type MouseEventHandler } from 'react'
 
-import { type DecoratorsType } from '../../../libs/decorator'
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button } from '../../Button'
 import { Fieldset } from '../../Fieldset'
 import { FormControl } from '../../FormControl'
diff --git a/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx b/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx
index ed2d463bf1..c3f5c8433d 100644
--- a/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx
+++ b/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx
@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, ReactNode, useMemo } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
-import { type DecoratorsType } from '../../../libs/decorator'
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button } from '../../Button'
 import { Dropdown, DropdownContent, DropdownTrigger } from '../../Dropdown'
 import { Heading } from '../../Heading'
diff --git a/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx b/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
index 10325ca2b4..1ffa259ef3 100644
--- a/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
+++ b/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
@@ -3,7 +3,7 @@
 import React, { HTMLAttributes, useMemo } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
-import { type DecoratorsType } from '../../../libs/decorator'
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { tabbable } from '../../../libs/tabbable'
 import { Button } from '../../Button'
 import { Dropdown, DropdownContent, DropdownTrigger } from '../../Dropdown'
diff --git a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx
index 9c8fda9842..2628c11239 100644
--- a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx
+++ b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx
@@ -11,7 +11,7 @@ import React, {
 } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
-import { type DecoratorsType } from '../../libs/decorator'
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { Base, BaseElementProps } from '../Base'
 import { Button } from '../Button'
 import { Heading, HeadingTagTypes } from '../Heading'
diff --git a/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx b/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx
index 9768953ea9..fabcf131b1 100644
--- a/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx
+++ b/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx
@@ -1,7 +1,7 @@
 import React, { ComponentProps, forwardRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { type DecoratorsType } from '../../../libs/decorator'
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { FaMagnifyingGlassIcon } from '../../Icon'
 import { InputWithTooltip } from '../InputWithTooltip'
 
diff --git a/packages/smarthr-ui/src/components/InputFile/InputFile.tsx b/packages/smarthr-ui/src/components/InputFile/InputFile.tsx
index ead1f3bd67..44b5b5065d 100644
--- a/packages/smarthr-ui/src/components/InputFile/InputFile.tsx
+++ b/packages/smarthr-ui/src/components/InputFile/InputFile.tsx
@@ -12,7 +12,7 @@ import React, {
 } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
-import { type DecoratorsType } from '../../libs/decorator'
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { BaseColumn } from '../Base'
 import { Button } from '../Button'
 import { FaFolderOpenIcon, FaTrashCanIcon } from '../Icon'
diff --git a/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx b/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx
index 2f5c902242..08155b824a 100644
--- a/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx
+++ b/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx
@@ -1,7 +1,7 @@
 import React, { ComponentPropsWithoutRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { type DecoratorType, type DecoratorsType } from '../../libs/decorator'
+import { type DecoratorType, type DecoratorsType } from '../../hooks/useDecorators'
 import { Cluster } from '../Layout'
 import { RangeSeparator, Text } from '../Text'
 
diff --git a/packages/smarthr-ui/src/components/Select/Select.tsx b/packages/smarthr-ui/src/components/Select/Select.tsx
index e0f8e06ccc..78743469ab 100644
--- a/packages/smarthr-ui/src/components/Select/Select.tsx
+++ b/packages/smarthr-ui/src/components/Select/Select.tsx
@@ -9,7 +9,7 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { type DecoratorType, type DecoratorsType } from '../../libs/decorator'
+import { type DecoratorType, type DecoratorsType } from '../../hooks/useDecorators'
 import { isIOS, isMobileSafari } from '../../libs/ua'
 import { genericsForwardRef } from '../../libs/util'
 import { FaSortIcon } from '../Icon'
diff --git a/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx b/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx
index 7e454701a1..06e6da8539 100644
--- a/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx
+++ b/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx
@@ -1,7 +1,7 @@
 import React, { ComponentProps, forwardRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { type DecoratorsType } from '../../libs/decorator'
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { Balloon } from '../Balloon'
 import { CheckBox, Props as CheckBoxProps } from '../CheckBox'
 
diff --git a/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx b/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx
index 6ed34df238..bca1828f4c 100644
--- a/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx
+++ b/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 
-import { type DecoratorType, type DecoratorsType } from '../../libs/decorator'
+import { type DecoratorType, type DecoratorsType } from '../../hooks/useDecorators'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
 
 type Props = {
diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index bec5f01bac..16fbe82646 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -15,8 +15,8 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType, useDecorators } from '../../hooks/useDecorators'
 import { debounce } from '../../libs/debounce'
-import { type DecoratorsType, useDecorators } from '../../libs/decorator'
 import { lineHeight } from '../../themes'
 import { defaultHtmlFontSize } from '../../themes/createFontSize'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
diff --git a/packages/smarthr-ui/src/libs/decorator.ts b/packages/smarthr-ui/src/hooks/useDecorators.ts
similarity index 100%
rename from packages/smarthr-ui/src/libs/decorator.ts
rename to packages/smarthr-ui/src/hooks/useDecorators.ts

From 660292c1d43f5a15ba73852c69b2466a4697e10d Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Sat, 25 Jan 2025 08:33:31 +0900
Subject: [PATCH 06/18] chore: fix stories

---
 .../Textarea/stories/VRTTextarea.stories.tsx  | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Textarea/stories/VRTTextarea.stories.tsx b/packages/smarthr-ui/src/components/Textarea/stories/VRTTextarea.stories.tsx
index 8cd308c7e0..795e7526fb 100644
--- a/packages/smarthr-ui/src/components/Textarea/stories/VRTTextarea.stories.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/stories/VRTTextarea.stories.tsx
@@ -26,11 +26,13 @@ export default {
             maxLetters={5}
             value="テキストエ"
             decorators={{
-              beforeMaxLettersCount: (org) => `(${org})`,
-              afterMaxLettersCount: (org) => `(${org})`,
-              afterMaxLettersCountExceeded: (org) => `(${org})`,
-              beforeScreenReaderMaxLettersDescription: (org) => `(${org})`,
-              afterScreenReaderMaxLettersDescription: (org) => `(${org})`,
+              beforeMaxLettersCount: (org) => `beforeMaxLettersCount(${org})`,
+              afterMaxLettersCount: (org) => `afterMaxLettersCount(${org})`,
+              afterMaxLettersCountExceeded: (org) => `afterMaxLettersCountExceeded(${org})`,
+              beforeScreenReaderMaxLettersDescription: (org) =>
+                `beforeScreenReaderMaxLettersDescription(${org})`,
+              afterScreenReaderMaxLettersDescription: (org) =>
+                `afterScreenReaderMaxLettersDescription(${org})`,
             }}
           />
           <Textarea
@@ -38,11 +40,13 @@ export default {
             maxLetters={5}
             value="テキストエリア"
             decorators={{
-              beforeMaxLettersCount: (org) => `(${org})`,
-              afterMaxLettersCount: (org) => `(${org})`,
-              afterMaxLettersCountExceeded: (org) => `(${org})`,
-              beforeScreenReaderMaxLettersDescription: (org) => `(${org})`,
-              afterScreenReaderMaxLettersDescription: (org) => `(${org})`,
+              beforeMaxLettersCount: (org) => `beforeMaxLettersCount(${org})`,
+              afterMaxLettersCount: (org) => `afterMaxLettersCount(${org})`,
+              afterMaxLettersCountExceeded: (org) => `afterMaxLettersCountExceeded(${org})`,
+              beforeScreenReaderMaxLettersDescription: (org) =>
+                `beforeScreenReaderMaxLettersDescription(${org})`,
+              afterScreenReaderMaxLettersDescription: (org) =>
+                `afterScreenReaderMaxLettersDescription(${org})`,
             }}
           />
           <Textarea {...args} placeholder="テキストエリア" />

From d32fe6210e4193e6168aed556129cb463158b730 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Mon, 27 Jan 2025 07:29:47 +0900
Subject: [PATCH 07/18] =?UTF-8?q?chore:=20ComboBox=E3=81=AEuseListBox?=
 =?UTF-8?q?=E5=86=85=E3=81=A7setTriggerWidth(0)=E3=81=AE=E5=88=9D=E6=9C=9F?=
 =?UTF-8?q?=E5=8C=96=E5=87=A6=E7=90=86=E3=81=AF=E5=AE=9F=E6=96=BD=E6=B8=88?=
 =?UTF-8?q?=E3=81=BF=E3=81=AE=E3=81=9F=E3=82=81=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/smarthr-ui/src/components/ComboBox/useListBox.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index eca85e675b..bed766a998 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -96,7 +96,6 @@ export const useListBox = <T,>({
 
   useEffect(() => {
     if (!triggerRef.current) {
-      setTriggerWidth(0)
       return
     }
 

From db14a34caf32f3930a1d6a981eb2cb5dab480b58 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Mon, 27 Jan 2025 07:48:51 +0900
Subject: [PATCH 08/18] =?UTF-8?q?chore:=20ComboBox=E3=81=AEuseListBox?=
 =?UTF-8?q?=E5=86=85=E3=81=A7isActiveTopOutside,isActiveBottomOutside?=
 =?UTF-8?q?=E3=81=AE=E8=A8=88=E7=AE=97=E3=82=92=E5=BF=85=E8=A6=81=E3=81=AA?=
 =?UTF-8?q?=E5=80=8D=E3=81=AE=E3=81=BF=E8=A1=8C=E3=81=86=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ComboBox/useListBox.tsx         | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index bed766a998..9d526fe7af 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -149,22 +149,20 @@ export const useListBox = <T,>({
   useEffect(() => {
     // actionOption の要素が表示される位置までリストボックス内をスクロールさせる
     if (
-      navigationType !== 'key' ||
-      activeOption === null ||
       !activeRef.current ||
-      !listBoxRef.current
+      !listBoxRef.current ||
+      activeOption === null ||
+      navigationType !== 'key'
     ) {
       return
     }
+
     const activeRect = activeRef.current.getBoundingClientRect()
     const containerRect = listBoxRef.current.getBoundingClientRect()
 
-    const isActiveTopOutside = activeRect.top < containerRect.top
-    const isActiveBottomOutside = activeRect.bottom > containerRect.bottom
-
-    if (isActiveTopOutside) {
+    if (activeRect.top < containerRect.top) {
       listBoxRef.current.scrollTop -= containerRect.top - activeRect.top
-    } else if (isActiveBottomOutside) {
+    } else if (activeRect.bottom > containerRect.bottom) {
       listBoxRef.current.scrollTop += activeRect.bottom - containerRect.bottom
     }
   }, [activeOption, listBoxRef, navigationType])

From 70ca015cbaa33cae9295ed3d910412122647e736 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Mon, 27 Jan 2025 07:55:31 +0900
Subject: [PATCH 09/18] =?UTF-8?q?chore:=20ComboBox=E3=81=AEuseListBox?=
 =?UTF-8?q?=E3=81=A7handleKeyDown=E3=81=AE=E6=9D=A1=E4=BB=B6=E5=88=86?=
 =?UTF-8?q?=E5=B2=90=E3=82=92=E6=9C=80=E9=81=A9=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ComboBox/useListBox.tsx           | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index 9d526fe7af..dc8964689d 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -178,21 +178,23 @@ export const useListBox = <T,>({
     (e: KeyboardEvent<HTMLElement>) => {
       setNavigationType('key')
 
-      if (e.key === 'Down' || e.key === 'ArrowDown') {
+      if (/^(Arrow)?Down$/.test(e.key)) {
         e.stopPropagation()
         moveActivePositionDown()
-      } else if (e.key === 'Up' || e.key === 'ArrowUp') {
+      } else if (/^(Arrow)?Up/.test(e.key)) {
         e.stopPropagation()
         moveActivePositionUp()
       } else if (e.key === 'Enter') {
         if (activeOption === null) {
           return
         }
+
         e.stopPropagation()
-        if (activeOption.isNew) {
-          if (onAdd) onAdd(activeOption.item.value)
-        } else {
+
+        if (!activeOption.isNew) {
           onSelect(activeOption.item)
+        } else if (onAdd) {
+          onAdd(activeOption.item.value)
         }
       } else {
         setActiveOption(null)

From b262f5da610bb21686f9fb2e06c5cf71846e47ce Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Mon, 27 Jan 2025 08:01:30 +0900
Subject: [PATCH 10/18] =?UTF-8?q?chore:=20ComboBox=E3=81=AEuseListBox?=
 =?UTF-8?q?=E3=81=A7handleAdd=E3=81=AEmemo=E3=82=92=E6=9C=80=E9=81=A9?=
 =?UTF-8?q?=E5=8C=96=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ComboBox/ListBoxItemButton.tsx | 12 ++++++++---
 .../src/components/ComboBox/useListBox.tsx    | 20 ++++++++++---------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/smarthr-ui/src/components/ComboBox/ListBoxItemButton.tsx b/packages/smarthr-ui/src/components/ComboBox/ListBoxItemButton.tsx
index f134cf85d8..220fc37c8c 100644
--- a/packages/smarthr-ui/src/components/ComboBox/ListBoxItemButton.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/ListBoxItemButton.tsx
@@ -44,9 +44,15 @@ const ListBoxItemButton = <T,>({
   const { item, selected, isNew } = option
   const { label, disabled } = item
 
-  const handleAdd = useCallback(() => {
-    onAdd(option)
-  }, [onAdd, option])
+  const handleAdd = useMemo(
+    () =>
+      onAdd
+        ? () => {
+            onAdd(option)
+          }
+        : undefined,
+    [option, onAdd],
+  )
 
   const handleSelect = useCallback(() => {
     onSelect(option)
diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index dc8964689d..5693bf9350 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -213,14 +213,17 @@ export const useListBox = <T,>({
     ),
   })
 
-  const handleAdd = useCallback(
-    (option: ComboBoxOption<T>) => {
-      // HINT: Dropdown系コンポーネント内でComboBoxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう
-      // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする
-      requestAnimationFrame(() => {
-        if (onAdd) onAdd(option.item.value)
-      })
-    },
+  const handleAdd = useMemo(
+    () =>
+      onAdd
+        ? (option: ComboBoxOption<T>) => {
+            // HINT: Dropdown系コンポーネント内でComboBoxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう
+            // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする
+            requestAnimationFrame(() => {
+              onAdd(option.item.value)
+            })
+          }
+        : undefined,
     [onAdd],
   )
   const handleSelect = useCallback(
@@ -349,7 +352,6 @@ export const useListBox = <T,>({
       renderIntersection,
       activeOption?.id,
       statusText,
-      handleAdd,
       handleSelect,
       handleHoverOption,
     ],

From 1f30d3a91021397c963de6da9a83ca704ff150de Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Mon, 27 Jan 2025 08:18:21 +0900
Subject: [PATCH 11/18] =?UTF-8?q?chore:=20ComboBox=E3=81=AEuseListBox?=
 =?UTF-8?q?=E3=81=A7style,=20className=E3=81=AEmemo=E5=8C=96=E3=82=92?=
 =?UTF-8?q?=E5=88=86=E9=9B=A2=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ComboBox/useListBox.tsx    | 74 ++++++++-----------
 1 file changed, 32 insertions(+), 42 deletions(-)

diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index 5693bf9350..2e2a92db4c 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -240,48 +240,37 @@ export const useListBox = <T,>({
     [setActiveOption],
   )
 
-  const { wrapper, dropdownList, helpMessage, loaderWrapper, noItems } = listbox()
-  const {
-    wrapperStyleProps,
-    dropdownListStyleProps,
-    helpMessageStyle,
-    loaderWrapperStyle,
-    noItemsStyle,
-  } = useMemo(() => {
+  const wrapperStyleAttr = useMemo(() => {
     const { top, left, height } = listBoxRect
+
+    return {
+      top: `${top}px`,
+      left: `${left}px`,
+      width: `${triggerWidth}px`,
+    }
+  }, [listBoxRect, triggerWidth])
+  const dropdownListStyleAttr = useMemo(() => {
+    const { left, height } = listBoxRect
     const dropdownListWidth = dropdownWidth || triggerWidth
+
     return {
-      wrapperStyleProps: {
-        className: wrapper(),
-        style: {
-          top: `${top}px`,
-          left: `${left}px`,
-          width: `${triggerWidth}px`,
-        },
-      },
-      dropdownListStyleProps: {
-        className: dropdownList(),
-        style: {
-          width:
-            typeof dropdownListWidth === 'string' ? dropdownListWidth : `${dropdownListWidth}px`,
-          maxWidth: `calc(100vw - ${left}px - ${spacing[0.5]})`,
-          height: height ? `${height}px` : undefined,
-        },
-      },
-      helpMessageStyle: helpMessage(),
-      loaderWrapperStyle: loaderWrapper(),
-      noItemsStyle: noItems(),
+      width: typeof dropdownListWidth === 'string' ? dropdownListWidth : `${dropdownListWidth}px`,
+      maxWidth: `calc(100vw - ${left}px - ${spacing[0.5]})`,
+      height: height ? `${height}px` : undefined,
     }
-  }, [
-    dropdownList,
-    dropdownWidth,
-    helpMessage,
-    listBoxRect,
-    triggerWidth,
-    loaderWrapper,
-    noItems,
-    wrapper,
-  ])
+  }, [listBoxRect, triggerWidth, dropdownWidth])
+
+  const { wrapper, dropdownList, helpMessage, loaderWrapper, noItems } = listbox()
+  const { wrapperStyle, dropdownListStyle, helpMessageStyle, loaderWrapperStyle, noItemsStyle } =
+    useMemo(() => {
+      return {
+        wrapperStyle: wrapper(),
+        dropdownListStyle: dropdownList(),
+        helpMessageStyle: helpMessage(),
+        loaderWrapperStyle: loaderWrapper(),
+        noItemsStyle: noItems(),
+      }
+    }, [dropdownList, helpMessage, loaderWrapper, noItems, wrapper])
 
   const statusText = useMemo(() => {
     const loadingText = decorators?.loadingText?.(LOADING_TEXT) ?? LOADING_TEXT
@@ -294,13 +283,14 @@ export const useListBox = <T,>({
         <>
           <VisuallyHiddenText role="status">{statusText}</VisuallyHiddenText>
 
-          <div {...wrapperStyleProps}>
+          <div className={wrapperStyle} style={wrapperStyleAttr}>
             <div
-              {...dropdownListStyleProps}
               id={listBoxId}
               ref={listBoxRef}
               role="listbox"
               aria-hidden={!isExpanded}
+              className={dropdownListStyle}
+              style={dropdownListStyleAttr}
             >
               {dropdownHelpMessage && (
                 <p className={helpMessageStyle}>
@@ -337,8 +327,8 @@ export const useListBox = <T,>({
       ),
     [
       createPortal,
-      wrapperStyleProps,
-      dropdownListStyleProps,
+      wrapperStyle,
+      dropdownListStyle,
       listBoxId,
       isExpanded,
       dropdownHelpMessage,

From b818a9d6b4b91a4e8dbb32f435141e8c37f672c7 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Mon, 27 Jan 2025 08:24:07 +0900
Subject: [PATCH 12/18] =?UTF-8?q?chore:=20ComboBox=E3=81=AEuseListBox?=
 =?UTF-8?q?=E3=81=A7style=E3=81=AE=E7=94=9F=E6=88=90=E3=82=92=E5=AE=8C?=
 =?UTF-8?q?=E5=85=A8=E3=81=ABmemo=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ComboBox/useListBox.tsx    | 56 +++++++++----------
 1 file changed, 26 insertions(+), 30 deletions(-)

diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index 2e2a92db4c..0ad93ddd2b 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -260,17 +260,17 @@ export const useListBox = <T,>({
     }
   }, [listBoxRect, triggerWidth, dropdownWidth])
 
-  const { wrapper, dropdownList, helpMessage, loaderWrapper, noItems } = listbox()
-  const { wrapperStyle, dropdownListStyle, helpMessageStyle, loaderWrapperStyle, noItemsStyle } =
-    useMemo(() => {
-      return {
-        wrapperStyle: wrapper(),
-        dropdownListStyle: dropdownList(),
-        helpMessageStyle: helpMessage(),
-        loaderWrapperStyle: loaderWrapper(),
-        noItemsStyle: noItems(),
-      }
-    }, [dropdownList, helpMessage, loaderWrapper, noItems, wrapper])
+  const styles = useMemo(() => {
+    const { wrapper, dropdownList, helpMessage, loaderWrapper, noItems } = listbox()
+
+    return {
+      wrapper: wrapper(),
+      dropdownList: dropdownList(),
+      helpMessage: helpMessage(),
+      loaderWrapper: loaderWrapper(),
+      noItems: noItems(),
+    }
+  }, [])
 
   const statusText = useMemo(() => {
     const loadingText = decorators?.loadingText?.(LOADING_TEXT) ?? LOADING_TEXT
@@ -283,26 +283,26 @@ export const useListBox = <T,>({
         <>
           <VisuallyHiddenText role="status">{statusText}</VisuallyHiddenText>
 
-          <div className={wrapperStyle} style={wrapperStyleAttr}>
+          <div className={styles.wrapper} style={wrapperStyleAttr}>
             <div
               id={listBoxId}
               ref={listBoxRef}
               role="listbox"
               aria-hidden={!isExpanded}
-              className={dropdownListStyle}
+              className={styles.dropdownList}
               style={dropdownListStyleAttr}
             >
               {dropdownHelpMessage && (
-                <p className={helpMessageStyle}>
+                <p className={styles.helpMessage}>
                   <FaInfoCircleIcon color="TEXT_GREY" text={dropdownHelpMessage} iconGap={0.25} />
                 </p>
               )}
               {!isExpanded ? null : isLoading ? (
-                <div className={loaderWrapperStyle}>
+                <div className={styles.loaderWrapper}>
                   <Loader aria-hidden />
                 </div>
               ) : options.length === 0 ? (
-                <p role="alert" aria-live="polite" className={noItemsStyle}>
+                <p role="alert" aria-live="polite" className={styles.noItems}>
                   {decorators?.noResultText
                     ? decorators.noResultText(NO_RESULT_TEXT)
                     : NO_RESULT_TEXT}
@@ -326,24 +326,20 @@ export const useListBox = <T,>({
         </>,
       ),
     [
-      createPortal,
-      wrapperStyle,
-      dropdownListStyle,
-      listBoxId,
-      isExpanded,
-      dropdownHelpMessage,
-      helpMessageStyle,
-      isLoading,
-      loaderWrapperStyle,
-      options.length,
-      noItemsStyle,
       decorators,
-      partialOptions,
-      renderIntersection,
       activeOption?.id,
+      renderIntersection,
+      partialOptions,
+      options.length,
+      isExpanded,
+      isLoading,
       statusText,
-      handleSelect,
+      dropdownHelpMessage,
+      listBoxId,
       handleHoverOption,
+      handleSelect,
+      styles,
+      createPortal,
     ],
   )
 

From d1a6ead89da98c1198822671158eb518c23ea412 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Mon, 27 Jan 2025 08:35:36 +0900
Subject: [PATCH 13/18] =?UTF-8?q?chore:=20ComboBox=E3=81=AEuseListBox?=
 =?UTF-8?q?=E3=81=A7decorators=E3=82=92memo=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ComboBox/useListBox.tsx    | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index be6f0812d4..e290709912 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -11,7 +11,7 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { type DecoratorsType } from '../../hooks/useDecorators'
+import { type DecoratorsType, useDecorators } from '../../hooks/useDecorators'
 import { useEnhancedEffect } from '../../hooks/useEnhancedEffect'
 import { usePortal } from '../../hooks/usePortal'
 import { spacing } from '../../themes'
@@ -33,7 +33,7 @@ type Props<T> = {
   isExpanded: boolean
   isLoading?: boolean
   triggerRef: RefObject<HTMLElement>
-  decorators?: DecoratorsType<'noResultText' | 'loadingText'>
+  decorators?: DecoratorsType<DecoratorKeyTypes>
 }
 
 type Rect = {
@@ -42,8 +42,11 @@ type Rect = {
   height?: number
 }
 
-const NO_RESULT_TEXT = '一致する選択肢がありません'
-const LOADING_TEXT = '処理中'
+const DECORATOR_DEFAULT_TEXTS = {
+  noResultText: '一致する選択肢がありません',
+  loadingText: '処理中',
+} as const
+type DecoratorKeyTypes = keyof typeof DECORATOR_DEFAULT_TEXTS
 
 const listbox = tv({
   slots: {
@@ -271,16 +274,15 @@ export const useListBox = <T,>({
     }
   }, [])
 
-  const statusText = useMemo(() => {
-    const loadingText = decorators?.loadingText?.(LOADING_TEXT) ?? LOADING_TEXT
-    return isExpanded && isLoading ? loadingText : ''
-  }, [decorators, isExpanded, isLoading])
+  const decorated = useDecorators<DecoratorKeyTypes>(DECORATOR_DEFAULT_TEXTS, decorators)
 
   const renderListBox = useCallback(
     () =>
       createPortal(
         <>
-          <VisuallyHiddenText role="status">{statusText}</VisuallyHiddenText>
+          <VisuallyHiddenText role="status">
+            {isExpanded && isLoading ? decorated.loadingText : ''}
+          </VisuallyHiddenText>
 
           <div className={styles.wrapper} style={wrapperStyleAttr}>
             <div
@@ -302,9 +304,7 @@ export const useListBox = <T,>({
                 </div>
               ) : options.length === 0 ? (
                 <p role="alert" aria-live="polite" className={styles.noItems}>
-                  {decorators?.noResultText
-                    ? decorators.noResultText(NO_RESULT_TEXT)
-                    : NO_RESULT_TEXT}
+                  {decorated.noResultText}
                 </p>
               ) : (
                 partialOptions.map((option) => (
@@ -325,16 +325,16 @@ export const useListBox = <T,>({
         </>,
       ),
     [
-      decorators,
       activeOption?.id,
       renderIntersection,
       partialOptions,
       options.length,
       isExpanded,
       isLoading,
-      statusText,
       dropdownHelpMessage,
       listBoxId,
+      statusText,
+      decorated,
       handleHoverOption,
       handleSelect,
       styles,

From 45437c2874d56b777eac8d1a9cdcd83b6bac01fe Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Mon, 27 Jan 2025 08:44:37 +0900
Subject: [PATCH 14/18] =?UTF-8?q?chore:=20ComboBox=E3=81=AEuseListBox?=
 =?UTF-8?q?=E3=81=A7loadingText=E3=81=AE=E8=A1=A8=E7=A4=BA=E3=83=AD?=
 =?UTF-8?q?=E3=82=B8=E3=83=83=E3=82=AF=E3=82=92=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ComboBox/useListBox.tsx    | 47 +++++++++----------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index e290709912..fe31aae37b 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -279,26 +279,25 @@ export const useListBox = <T,>({
   const renderListBox = useCallback(
     () =>
       createPortal(
-        <>
-          <VisuallyHiddenText role="status">
-            {isExpanded && isLoading ? decorated.loadingText : ''}
-          </VisuallyHiddenText>
-
-          <div className={styles.wrapper} style={wrapperStyleAttr}>
-            <div
-              id={listBoxId}
-              ref={listBoxRef}
-              role="listbox"
-              aria-hidden={!isExpanded}
-              className={styles.dropdownList}
-              style={dropdownListStyleAttr}
-            >
-              {dropdownHelpMessage && (
-                <p className={styles.helpMessage}>
-                  <FaInfoCircleIcon color="TEXT_GREY" text={dropdownHelpMessage} iconGap={0.25} />
-                </p>
-              )}
-              {!isExpanded ? null : isLoading ? (
+        <div className={styles.wrapper} style={wrapperStyleAttr}>
+          {isExpanded && isLoading && (
+            <VisuallyHiddenText role="status">{decorated.loadingText}</VisuallyHiddenText>
+          )}
+          <div
+            id={listBoxId}
+            ref={listBoxRef}
+            role="listbox"
+            aria-hidden={!isExpanded}
+            className={styles.dropdownList}
+            style={dropdownListStyleAttr}
+          >
+            {dropdownHelpMessage && (
+              <p className={styles.helpMessage}>
+                <FaInfoCircleIcon color="TEXT_GREY" text={dropdownHelpMessage} iconGap={0.25} />
+              </p>
+            )}
+            {isExpanded ? (
+              isLoading ? (
                 <div className={styles.loaderWrapper}>
                   <Loader aria-hidden />
                 </div>
@@ -318,11 +317,11 @@ export const useListBox = <T,>({
                     activeRef={activeRef}
                   />
                 ))
-              )}
-              {renderIntersection()}
-            </div>
+              )
+            ) : null}
+            {renderIntersection()}
           </div>
-        </>,
+        </div>,
       ),
     [
       activeOption?.id,

From de097ed39e21d6af217fdd2dcf939bcd6002b092 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Mon, 27 Jan 2025 09:45:11 +0900
Subject: [PATCH 15/18] chore: fix ci

---
 .../smarthr-ui/src/components/ComboBox/ListBoxItemButton.tsx   | 2 +-
 packages/smarthr-ui/src/components/ComboBox/useListBox.tsx     | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/smarthr-ui/src/components/ComboBox/ListBoxItemButton.tsx b/packages/smarthr-ui/src/components/ComboBox/ListBoxItemButton.tsx
index 220fc37c8c..e2db276b58 100644
--- a/packages/smarthr-ui/src/components/ComboBox/ListBoxItemButton.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/ListBoxItemButton.tsx
@@ -9,7 +9,7 @@ import { ComboBoxOption } from './types'
 type Props<T> = {
   option: ComboBoxOption<T>
   isActive: boolean
-  onAdd: (option: ComboBoxOption<T>) => void
+  onAdd?: (option: ComboBoxOption<T>) => void
   onSelect: (option: ComboBoxOption<T>) => void
   onMouseOver: (option: ComboBoxOption<T>) => void
   activeRef: RefObject<HTMLButtonElement>
diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index fe31aae37b..86ed2d110a 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -243,7 +243,7 @@ export const useListBox = <T,>({
   )
 
   const wrapperStyleAttr = useMemo(() => {
-    const { top, left, height } = listBoxRect
+    const { top, left } = listBoxRect
 
     return {
       top: `${top}px`,
@@ -332,7 +332,6 @@ export const useListBox = <T,>({
       isLoading,
       dropdownHelpMessage,
       listBoxId,
-      statusText,
       decorated,
       handleHoverOption,
       handleSelect,

From 0969d9736229c5d356d293ed78fef317827a3588 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Mon, 27 Jan 2025 09:55:37 +0900
Subject: [PATCH 16/18] =?UTF-8?q?chore:=20ComboBox/useLitBox=E3=81=AEkey?=
 =?UTF-8?q?=E3=81=AE=E5=88=A4=E5=AE=9A=E3=82=92=E6=AD=A3=E8=A6=8F=E8=A1=A8?=
 =?UTF-8?q?=E7=8F=BE=E3=81=AB=E8=A1=8C=E3=81=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/smarthr-ui/src/components/ComboBox/useListBox.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index 86ed2d110a..f85eecb52d 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -48,6 +48,9 @@ const DECORATOR_DEFAULT_TEXTS = {
 } as const
 type DecoratorKeyTypes = keyof typeof DECORATOR_DEFAULT_TEXTS
 
+const KEY_DOWN_REGEX = /^(Arrow)?Down$/
+const KEY_UP_REGEX = /^(Arrow)?Up/
+
 const listbox = tv({
   slots: {
     wrapper: 'shr-absolute',
@@ -180,10 +183,10 @@ export const useListBox = <T,>({
     (e: KeyboardEvent<HTMLElement>) => {
       setNavigationType('key')
 
-      if (/^(Arrow)?Down$/.test(e.key)) {
+      if (KEY_DOWN_REGEX.test(e.key)) {
         e.stopPropagation()
         moveActivePositionDown()
-      } else if (/^(Arrow)?Up/.test(e.key)) {
+      } else if (KEY_UP_REGEX.test(e.key)) {
         e.stopPropagation()
         moveActivePositionUp()
       } else if (e.key === 'Enter') {

From b8d522d37bc963ecdc2f4ff80cb860a13d34155f Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Mon, 27 Jan 2025 09:59:49 +0900
Subject: [PATCH 17/18] =?UTF-8?q?chore:=20ComboBox/useLitBox=E3=81=AEhook?=
 =?UTF-8?q?=E3=81=AE=E4=BE=9D=E5=AD=98=E9=96=A2=E4=BF=82=E3=82=92=E6=95=B4?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/smarthr-ui/src/components/ComboBox/useListBox.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index f85eecb52d..2f944344db 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -336,9 +336,12 @@ export const useListBox = <T,>({
       dropdownHelpMessage,
       listBoxId,
       decorated,
+      handleAdd,
       handleHoverOption,
       handleSelect,
       styles,
+      dropdownListStyleAttr,
+      wrapperStyleAttr,
       createPortal,
     ],
   )

From 772b7e3d040e5656a1973b5ac3477a9a54391821 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 6 Feb 2025 13:26:27 +0900
Subject: [PATCH 18/18] chore: style -> className

---
 .../components/ComboBox/ListBoxItemButton.tsx |  6 ++---
 .../src/components/ComboBox/useListBox.tsx    | 24 +++++++++----------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/smarthr-ui/src/components/ComboBox/ListBoxItemButton.tsx b/packages/smarthr-ui/src/components/ComboBox/ListBoxItemButton.tsx
index e2db276b58..7e6e9bd1a2 100644
--- a/packages/smarthr-ui/src/components/ComboBox/ListBoxItemButton.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/ListBoxItemButton.tsx
@@ -62,7 +62,7 @@ const ListBoxItemButton = <T,>({
     onMouseOver(option)
   }, [onMouseOver, option])
 
-  const buttonStyle = useMemo(
+  const className = useMemo(
     () =>
       button({
         active: !!isActive,
@@ -79,7 +79,7 @@ const ListBoxItemButton = <T,>({
       onMouseOver={handleMouseOver}
       id={option.id}
       role="option"
-      className={buttonStyle}
+      className={className}
       ref={isActive ? activeRef : undefined}
     >
       <FaPlusCircleIcon color="TEXT_LINK" text={<Text color="TEXT_LINK">「{label}」を追加</Text>} />
@@ -93,7 +93,7 @@ const ListBoxItemButton = <T,>({
       onMouseOver={handleMouseOver}
       id={option.id}
       role="option"
-      className={buttonStyle}
+      className={className}
       aria-selected={selected}
       ref={isActive ? activeRef : undefined}
     >
diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index 2f944344db..6ae288dc6d 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -245,7 +245,7 @@ export const useListBox = <T,>({
     [setActiveOption],
   )
 
-  const wrapperStyleAttr = useMemo(() => {
+  const wrapperStyle = useMemo(() => {
     const { top, left } = listBoxRect
 
     return {
@@ -254,7 +254,7 @@ export const useListBox = <T,>({
       width: `${triggerWidth}px`,
     }
   }, [listBoxRect, triggerWidth])
-  const dropdownListStyleAttr = useMemo(() => {
+  const dropdownListStyle = useMemo(() => {
     const { left, height } = listBoxRect
     const dropdownListWidth = dropdownWidth || triggerWidth
 
@@ -265,7 +265,7 @@ export const useListBox = <T,>({
     }
   }, [listBoxRect, triggerWidth, dropdownWidth])
 
-  const styles = useMemo(() => {
+  const classNames = useMemo(() => {
     const { wrapper, dropdownList, helpMessage, loaderWrapper, noItems } = listbox()
 
     return {
@@ -282,7 +282,7 @@ export const useListBox = <T,>({
   const renderListBox = useCallback(
     () =>
       createPortal(
-        <div className={styles.wrapper} style={wrapperStyleAttr}>
+        <div className={classNames.wrapper} style={wrapperStyle}>
           {isExpanded && isLoading && (
             <VisuallyHiddenText role="status">{decorated.loadingText}</VisuallyHiddenText>
           )}
@@ -291,21 +291,21 @@ export const useListBox = <T,>({
             ref={listBoxRef}
             role="listbox"
             aria-hidden={!isExpanded}
-            className={styles.dropdownList}
-            style={dropdownListStyleAttr}
+            className={classNames.dropdownList}
+            style={dropdownListStyle}
           >
             {dropdownHelpMessage && (
-              <p className={styles.helpMessage}>
+              <p className={classNames.helpMessage}>
                 <FaInfoCircleIcon color="TEXT_GREY" text={dropdownHelpMessage} iconGap={0.25} />
               </p>
             )}
             {isExpanded ? (
               isLoading ? (
-                <div className={styles.loaderWrapper}>
+                <div className={classNames.loaderWrapper}>
                   <Loader aria-hidden />
                 </div>
               ) : options.length === 0 ? (
-                <p role="alert" aria-live="polite" className={styles.noItems}>
+                <p role="alert" aria-live="polite" className={classNames.noItems}>
                   {decorated.noResultText}
                 </p>
               ) : (
@@ -339,9 +339,9 @@ export const useListBox = <T,>({
       handleAdd,
       handleHoverOption,
       handleSelect,
-      styles,
-      dropdownListStyleAttr,
-      wrapperStyleAttr,
+      classNames,
+      dropdownListStyle,
+      wrapperStyle,
       createPortal,
     ],
   )