chore: ComboBoxのuseOptionsのロジックを整理する

packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx

@@ -23,7 +23,7 @@ import { FaCaretDownIcon } from '../../Icon'
 import { areComboBoxItemsEqual } from '../comboBoxHelper'
 import { useFocusControl } from '../useFocusControl'
 import { useListBox } from '../useListBox'
-import { useOptions } from '../useOptions'
+import { useMultiOptions } from '../useOptions'
 
 import { MultiSelectedItem } from './MultiSelectedItem'
 import { hasParentElementByClassName } from './multiComboBoxHelper'
@@ -176,7 +176,7 @@ const ActualMultiComboBox = <T,>(
   const [uncontrolledInputValue, setUncontrolledInputValue] = useState('')
   const inputValue = isInputControlled ? controlledInputValue : uncontrolledInputValue
   const [isComposing, setIsComposing] = useState(false)
-  const { options } = useOptions({
+  const { options } = useMultiOptions({
     items,
     selected: selectedItems,
     creatable,

packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx

@@ -24,7 +24,7 @@ import { UnstyledButton } from '../../Button'
 import { FaCaretDownIcon, FaCircleXmarkIcon } from '../../Icon'
 import { Input } from '../../Input'
 import { useListBox } from '../useListBox'
-import { useOptions } from '../useOptions'
+import { useSingleOptions } from '../useOptions'
 
 import type { BaseProps, ComboBoxItem } from '../types'
 
@@ -154,7 +154,7 @@ const ActualSingleComboBox = <T,>(
 
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => inputRef.current)
 
-  const { options } = useOptions({
+  const { options } = useSingleOptions({
     items,
     selected: selectedItem,
     creatable,

packages/smarthr-ui/src/components/ComboBox/__tests__/useOptions.test.tsx

@@ -1,9 +1,9 @@
 import { renderHook } from '@testing-library/react'
 import React from 'react'
 
-import { useOptions } from '../useOptions'
+import { useMultiOptions } from '../useOptions'
 
-describe('useOptions', () => {
+describe('useMultiOptions', () => {
   describe('options', () => {
     it('options が取得できること', () => {
       const initialProps = {
@@ -15,7 +15,7 @@ describe('useOptions', () => {
         selected: [{ label: 'label2', value: 'value2' }],
         creatable: false,
       }
-      const { result } = renderHook((props) => useOptions(props), { initialProps })
+      const { result } = renderHook((props) => useMultiOptions(props), { initialProps })
       const options = result.current.options
 
       expect(options.length).toBe(3)
@@ -43,7 +43,7 @@ describe('useOptions', () => {
         creatable: false,
         inputValue: '2',
       }
-      const { result } = renderHook((props) => useOptions(props), { initialProps })
+      const { result } = renderHook((props) => useMultiOptions(props), { initialProps })
       const options = result.current.options
 
       expect(options.length).toBe(1)
@@ -57,7 +57,7 @@ describe('useOptions', () => {
         creatable: true,
         inputValue: 'input_data',
       }
-      const { result, rerender } = renderHook((props) => useOptions(props), { initialProps })
+      const { result, rerender } = renderHook((props) => useMultiOptions(props), { initialProps })
 
       const options1 = result.current.options
       expect(options1.length).toBe(1)
@@ -96,7 +96,7 @@ describe('useOptions', () => {
           creatable: false,
           isItemSelected,
         }
-        renderHook((props) => useOptions(props), { initialProps })
+        renderHook((props) => useMultiOptions(props), { initialProps })
         expect(isItemSelected).toHaveBeenNthCalledWith(
           1,
           { label: 'label1', value: 'value1' },
@@ -132,7 +132,7 @@ describe('useOptions', () => {
           selected: [{ label: element, value: 'value3' }],
           creatable: false,
         }
-        const { result } = renderHook((props) => useOptions(props), { initialProps })
+        const { result } = renderHook((props) => useMultiOptions(props), { initialProps })
         const options = result.current.options
 
         expect(options.length).toBe(3)
@@ -165,7 +165,7 @@ describe('useOptions', () => {
           creatable: false,
           inputValue: 'label3',
         }
-        const { result } = renderHook((props) => useOptions(props), { initialProps })
+        const { result } = renderHook((props) => useMultiOptions(props), { initialProps })
         const options = result.current.options
 
         expect(options.length).toBe(1)
@@ -199,7 +199,7 @@ describe('useOptions', () => {
           selected: [{ label: labelElement3, value: 'value3' }],
           creatable: false,
         }
-        const { result } = renderHook((props) => useOptions(props), { initialProps })
+        const { result } = renderHook((props) => useMultiOptions(props), { initialProps })
         const options = result.current.options
 
         expect(options.length).toBe(3)
@@ -227,7 +227,7 @@ describe('useOptions', () => {
           creatable: false,
           inputValue: 'label3',
         }
-        const { result } = renderHook((props) => useOptions(props), { initialProps })
+        const { result } = renderHook((props) => useMultiOptions(props), { initialProps })
         const options = result.current.options
 
         expect(options.length).toBe(1)
@@ -245,7 +245,7 @@ describe('useOptions', () => {
           selected: [{ label: newLabelElement1, value: 'value1' }],
           creatable: false,
         }
-        const { result } = renderHook((props) => useOptions(props), { initialProps })
+        const { result } = renderHook((props) => useMultiOptions(props), { initialProps })
         const options = result.current.options
 
         expect(options.length).toBe(1)

packages/smarthr-ui/src/components/ComboBox/useOptions.ts

@@ -9,71 +9,86 @@ const defaultIsItemSelected = <T>(
   selectedItems: Array<ComboBoxItem<T>>,
 ) => selectedItems.some((item) => areComboBoxItemsEqual(item, targetItem))
 
-export function useOptions<T>({
-  items,
-  selected,
-  creatable,
-  inputValue = '',
-  isFilteringDisabled = false,
-  isItemSelected = defaultIsItemSelected,
-}: {
+type BaseUseOptionsProps<T> = {
   items: Array<ComboBoxItem<T>>
-  selected: (ComboBoxItem<T> | null) | Array<ComboBoxItem<T>>
   creatable: boolean
   inputValue?: string
   isFilteringDisabled?: boolean
+}
+
+export const useSingleOptions = <T>({
+  selected,
+  ...rest
+}: BaseUseOptionsProps<T> & {
+  selected: ComboBoxItem<T> | null
+}) => {
+  const isSelected = useCallback(
+    (item: ComboBoxItem<T>) => selected !== null && areComboBoxItemsEqual(selected, item),
+    [selected],
+  )
+
+  return useOptions<T>(rest, isSelected)
+}
+
+export const useMultiOptions = <T>({
+  selected,
+  isItemSelected = defaultIsItemSelected,
+  ...rest
+}: BaseUseOptionsProps<T> & {
+  selected: Array<ComboBoxItem<T>>
   isItemSelected?: (targetItem: ComboBoxItem<T>, selectedItems: Array<ComboBoxItem<T>>) => boolean
-}) {
-  const isInputValueAddable = useMemo(
-    () => creatable && inputValue !== '' && !items.some((item) => item.label === inputValue),
-    [creatable, inputValue, items],
+}) => {
+  const isSelected = useCallback(
+    (item: ComboBoxItem<T>) => isItemSelected(item, selected),
+    [selected, isItemSelected],
   )
 
+  return useOptions<T>(rest, isSelected)
+}
+
+function useOptions<T>(
+  { items, creatable, inputValue = '', isFilteringDisabled = false }: BaseUseOptionsProps<T>,
+  isSelected: (item: ComboBoxItem<T>) => boolean,
+) {
   const newItemId = useId()
   const optionIdPrefix = useId()
-  const getOptionId = useCallback(
-    (optionIndex: number) => `${optionIdPrefix}-${optionIndex}`,
-    [optionIdPrefix],
-  )
 
-  const isSelected = useCallback(
-    (item: ComboBoxItem<T>) => {
-      if (Array.isArray(selected)) {
-        return isItemSelected(item, selected)
-      } else {
-        return selected !== null && areComboBoxItemsEqual(selected, item)
-      }
-    },
-    [isItemSelected, selected],
+  const existedOptions: Array<ComboBoxOption<T>> = useMemo(
+    () =>
+      items.map((item, i) => ({
+        id: `${optionIdPrefix}-${i}`,
+        selected: isSelected(item),
+        isNew: false,
+        item,
+      })),
+    [isSelected, items, optionIdPrefix],
+  )
+  const addingOption: ComboBoxOption<T> | null = useMemo(
+    () =>
+      creatable && inputValue && items.every((item) => item.label !== inputValue)
+        ? {
+            id: newItemId,
+            isNew: true,
+            selected: false,
+            item: { label: inputValue, value: inputValue },
+          }
+        : null,
+    [inputValue, items, creatable, newItemId],
   )
 
-  const allOptions: Array<ComboBoxOption<T>> = useMemo(() => {
-    const _options = items.map((item, i) => ({
-      id: getOptionId(i),
-      selected: isSelected(item),
-      isNew: false,
-      item,
-    }))
-    if (isInputValueAddable) {
-      const addingOption = {
-        id: newItemId,
-        isNew: true,
-        selected: false,
-        item: { label: inputValue, value: inputValue },
-      }
-      return [addingOption, ..._options]
-    }
-    return _options
-  }, [getOptionId, inputValue, isInputValueAddable, isSelected, items, newItemId])
+  const allOptions: Array<ComboBoxOption<T>> = useMemo(
+    () => (addingOption ? [addingOption, ...existedOptions] : existedOptions),
+    [existedOptions, addingOption],
+  )
 
   const options = useMemo(() => {
-    if (isFilteringDisabled) {
+    if (isFilteringDisabled || !inputValue) {
       return allOptions
     }
-    return allOptions.filter(({ item: { label } }) => {
-      if (!inputValue) return true
-      return convertMatchableString(innerText(label)).includes(convertMatchableString(inputValue))
-    })
+
+    return allOptions.filter(({ item: { label } }) =>
+      convertMatchableString(innerText(label)).includes(convertMatchableString(inputValue)),
+    )
   }, [allOptions, inputValue, isFilteringDisabled])
 
   return {