smarthr-ui 99.3.2 → 99.4.0

package/lib/components/Combobox/MultiCombobox/MultiCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiCombobox.js","sources":["../../../../src/components/Combobox/MultiCombobox/MultiCombobox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../../hooks/useLatest'\nimport { useOuterClick } from '../../../hooks/useOuterClick'\nimport { useTheme } from '../../../hooks/useTheme'\nimport { useLocalize } from '../../../intl'\nimport { findDelegateTarget } from '../../../libs/delegate'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { FaCaretDownIcon } from '../../Icon'\nimport { Scroller } from '../../Scroller'\nimport { areItemsEqual } from '../helper'\nimport { ListBox, useListbox } from '../useListbox'\nimport { useMultiOptions } from '../useOptions'\n\nimport { DELETE_BUTTON_SELECTOR, MultiSelectedItem } from './MultiSelectedItem'\n\nimport type { ComboboxItem, BaseProps as ComboboxProps } from '../types'\n\ntype BaseProps<T> = ComboboxProps<T> & {\n  /**\n   * 選択されているアイテムのリスト\n   */\n  selectedItems: Array<ComboboxItem<T> & { deletable?: boolean }>\n  /**\n   * 選択されているアイテムのラベルを省略表示するかどうか\n   */\n  selectedItemEllipsis?: boolean\n  /**\n   * テキストボックスの `value` 属性の値。\n   * `onChangeInput` と併せて設定することで、テキストボックスの挙動が制御可能になる。\n   */\n  inputValue?: string\n  /**\n   * 選択されているアイテムの削除ボタンがクリックされた時に発火するコールバック関数\n   */\n  onDelete?: (item: ComboboxItem<T>) => void\n  /**\n   * 選択されているアイテムのリストが変わった時に発火するコールバック関数\n   */\n  onChangeSelected?: (selectedItems: Array<ComboboxItem<T>>) => void\n  /**\n   * コンポーネントがフォーカスされたときに発火するコールバック関数\n   */\n  onFocus?: () => void\n  /**\n   * コンポーネントからフォーカスが外れた時に発火するコールバック関数\n   */\n  onBlur?: () => void\n  /**\n   * アイテムが選択されたときに選択済みかどうかを判定するコールバック関数/\n   */\n  isItemSelected?: (targetItem: ComboboxItem<T>, selectedItems: Array<ComboboxItem<T>>) => boolean\n  /**\n   * 検索結果が0件の時に表示するコンテンツ\n   */\n  noResultText?: ReactNode\n}\ntype Props<T> = BaseProps<T> & Omit<ComponentPropsWithoutRef<'input'>, keyof BaseProps<unknown>>\n\nconst NOOP = () => undefined\n\nconst preventDefaultWithPressEnter = (e: KeyboardEvent<HTMLInputElement>) => {\n  if (e.key === 'Enter') {\n    e.preventDefault()\n  }\n}\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_LEFT_KEY_REGEX = /^(Arrow)?Left$/\nconst ARROW_RIGHT_KEY_REGEX = /^(Arrow)?Right/\nconst ARROW_UP_AND_DOWN_KEY_REGEX = /^(Arrow)?(Up|Down)$/\n\nconst EMPTY_INPUT_CHANGE_EVENT = {\n  currentTarget: { value: '' },\n  target: { value: '' },\n} as ChangeEvent<HTMLInputElement>\n\nconst DELETE_BUTTON_CLASSNAME = `.${DELETE_BUTTON_SELECTOR}`\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-MultiCombobox',\n      'shr-box-border shr-inline-flex shr-min-w-[15em] shr-rounded-m shr-border shr-border-solid shr-px-0.5 shr-py-0.25 shr-align-bottom',\n      'contrast-more:shr-border-high-contrast',\n      'has-[[role=combobox][aria-expanded=true]]:shr-focus-indicator',\n      'shr-cursor-text shr-border-default shr-bg-white',\n      'has-[[role=combobox]:disabled]:shr-cursor-not-allowed',\n      'has-[[role=combobox]:disabled]:shr-border-default/50',\n      'has-[[role=combobox]:disabled]:shr-bg-white-darken',\n      'has-[[role=combobox]:disabled]:shr-text-disabled',\n      // HINT: disabled と詳細度が同じ [0,2,0] のため、CSS ソース順でこちらを後に置くことで error 時の border 色を優先させる\n      'has-[[role=combobox][aria-invalid]]:shr-border-danger',\n    ],\n    inputArea: 'shr-flex shr-flex-1 shr-flex-wrap shr-gap-0.5',\n    selectedList:\n      'smarthr-ui-MultiCombobox-selectedList shr-contents shr-list-none [&_li]:shr-min-w-0',\n    inputWrapper: [\n      'shr-flex shr-flex-1 shr-items-center',\n      'has-[[role=combobox][aria-expanded=false]]:shr-pointer-events-none',\n      'has-[[role=combobox][aria-expanded=false]]:shr-absolute',\n      'has-[[role=combobox][aria-expanded=false]]:shr-opacity-0',\n    ],\n    input: [\n      'smarthr-ui-MultiCombobox-input',\n      'shr-w-full shr-min-w-[5em] shr-border-none shr-text-base shr-text-black shr-outline-none shr-outline-0',\n      'disabled:shr-hidden',\n    ],\n    placeholderEl: 'smarthr-ui-MultiCombobox-placeholder shr-my-0 shr-self-center',\n    suffixWrapper: [\n      'shr-relative -shr-me-0.5 shr-ms-0.5 shr-p-0.5',\n      'before:shr-absolute before:shr-inset-x-0 before:shr-inset-y-0.25 before:shr-w-0 before:shr-border-0 before:shr-border-l before:shr-border-solid before:shr-border-default before:shr-content-[\"\"]',\n    ],\n    suffixIcon: 'shr-block',\n  },\n})\n\nconst ActualMultiCombobox = <T,>(\n  {\n    items,\n    selectedItems,\n    name,\n    disabled = false,\n    required = false,\n    error = false,\n    creatable = false,\n    placeholder = '',\n    autoComplete,\n    dropdownHelpMessage,\n    isLoading,\n    selectedItemEllipsis,\n    width,\n    dropdownWidth = 'auto',\n    inputValue: controlledInputValue,\n    className,\n    onChange,\n    onChangeInput,\n    onAdd,\n    onDelete,\n    onSelect,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    isItemSelected,\n    noResultText,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLInputElement>,\n) => {\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [highlighted, setHighlighted] = useState(false)\n  const [uncontrolledInputValue, setUncontrolledInputValue] = useState('')\n  const [isComposing, setIsComposing] = useState(false)\n\n  const selectedListId = useId()\n\n  const isInputControlled = controlledInputValue !== undefined\n  const inputValue = isInputControlled ? controlledInputValue : uncontrolledInputValue\n  const setInputValueIfUncontrolled = isInputControlled ? NOOP : setUncontrolledInputValue\n  const isInputEmpty = !inputValue\n\n  const { options } = useMultiOptions({\n    items,\n    selected: selectedItems,\n    creatable,\n    inputValue,\n    isItemSelected,\n  })\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  // eslint-disable-next-line local-rules/best-practice-for-use-latest\n  const latestForListBox = useLatest({\n    onDelete,\n    onChangeSelected,\n    onSelect,\n    onChangeInput,\n    selectedItems,\n  })\n\n  const listBoxFunctions = useMemo(() => {\n    const handleDelete = (item: ComboboxItem<T>) => {\n      const handlers: Array<(deletingItem: ComboboxItem<T>) => void> = []\n\n      if (latestForListBox.onDelete) {\n        handlers.push((deletingItem: ComboboxItem<T>) => latestForListBox.onDelete!(deletingItem))\n      }\n      if (latestForListBox.onChangeSelected) {\n        handlers.push((deletingItem: ComboboxItem<T>) =>\n          latestForListBox.onChangeSelected!(\n            latestForListBox.selectedItems.filter(\n              (selected) => !areItemsEqual(selected, deletingItem),\n            ),\n          ),\n        )\n      }\n\n      if (handlers.length > 0) {\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          handlers.forEach((h) => h(item))\n        })\n      }\n    }\n\n    return {\n      handleDelete,\n      handleSelect: (selected: ComboboxItem<T>) => {\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          const matchedSelectedItem = latestForListBox.selectedItems.find((item) =>\n            areItemsEqual(item, selected),\n          )\n\n          if (matchedSelectedItem === undefined) {\n            latestForListBox.onSelect?.(selected)\n            latestForListBox.onChangeSelected?.(latestForListBox.selectedItems.concat(selected))\n\n            // 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する\n            latestForListBox.onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n          } else if (matchedSelectedItem.deletable !== false) {\n            handleDelete(selected)\n          }\n        })\n      },\n    }\n  }, [latestForListBox])\n\n  const { listBoxProps, activeOption, handleKeyDownListBox, listBoxId, listBoxRef } = useListbox({\n    options,\n    dropdownHelpMessage,\n    dropdownWidth,\n    onAdd,\n    onSelect: listBoxFunctions.handleSelect,\n    isExpanded,\n    isLoading,\n    triggerRef,\n    noResultText,\n  })\n\n  const latest = useLatest({\n    onChange,\n    onChangeInput,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    disabled,\n    isExpanded,\n    highlighted,\n    isComposing,\n    isInputEmpty,\n    selectedItems,\n    setInputValueIfUncontrolled,\n    handleKeyDownListBox,\n  })\n\n  const functions = useMemo(() => {\n    const handleDelete = listBoxFunctions.handleDelete\n\n    const getDeletionButtons = () => {\n      if (triggerRef.current) {\n        const buttons =\n          triggerRef.current.querySelectorAll<HTMLButtonElement>(DELETE_BUTTON_CLASSNAME)\n\n        if (buttons.length > 0) {\n          const actualButtons = Array.from(buttons)\n\n          return {\n            buttons: actualButtons,\n            currentIndex: actualButtons.indexOf(document.activeElement as HTMLButtonElement),\n          }\n        }\n      }\n\n      return null\n    }\n\n    const focusPrevDeletionButton = () => {\n      const result = getDeletionButtons()\n\n      if (!result) return\n\n      const { buttons, currentIndex } = result\n\n      if (currentIndex !== -1) {\n        buttons[Math.max(currentIndex - 1, 0)].focus()\n      } else if (inputRef.current?.selectionStart === 0) {\n        buttons[buttons.length - 1].focus()\n      }\n    }\n\n    const focusNextDeletionButton = () => {\n      const result = getDeletionButtons()\n\n      if (!result) return\n\n      const { buttons, currentIndex } = result\n\n      if (currentIndex === -1) return\n\n      const nextIndex = currentIndex + 1\n\n      if (nextIndex < buttons.length) {\n        buttons[nextIndex].focus()\n      } else {\n        // キー入力が input に影響しないようにフォーカスタイミングを遅らせる\n        setTimeout(() => {\n          inputRef.current?.focus()\n        })\n      }\n    }\n\n    const focus = () => {\n      latest.onFocus?.()\n      setIsExpanded(true)\n    }\n\n    const blur = () => {\n      if (latest.isExpanded) {\n        latest.onBlur?.()\n        setIsExpanded(false)\n      }\n    }\n\n    return {\n      handleDelete,\n      blur,\n      handleDelegateKeyDown: (e: KeyboardEvent<HTMLDivElement>) => {\n        if (latest.isComposing) return\n\n        if (ESCAPE_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          blur()\n        } else if (e.key === 'Tab') {\n          if (latest.isExpanded) {\n            // フォーカスがコンポーネントを抜けるように先に input をフォーカスしておく\n            inputRef.current?.focus()\n          }\n\n          blur()\n        } else if (ARROW_LEFT_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          focusPrevDeletionButton()\n        } else if (ARROW_RIGHT_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          focusNextDeletionButton()\n        } else if (\n          e.key === 'Backspace' &&\n          latest.isInputEmpty &&\n          latest.selectedItems.length > 0 &&\n          latest.selectedItems[latest.selectedItems.length - 1].deletable !== false\n        ) {\n          e.preventDefault()\n          e.stopPropagation()\n\n          const lastItem = latest.selectedItems[latest.selectedItems.length - 1]\n\n          handleDelete(lastItem)\n          setHighlighted(true)\n          latest.setInputValueIfUncontrolled(innerText(lastItem.label))\n        } else {\n          e.stopPropagation()\n          inputRef.current?.focus()\n        }\n\n        latest.handleKeyDownListBox(e)\n      },\n      handleDelegateClick: (e: MouseEvent<HTMLElement>) => {\n        if (\n          !latest.disabled &&\n          !latest.isExpanded &&\n          !findDelegateTarget(e, DELETE_BUTTON_CLASSNAME)\n        ) {\n          focus()\n        }\n      },\n      handleChangeInput: (e: ChangeEvent<HTMLInputElement>) => {\n        const handlers = [latest.onChange, latest.onChangeInput].filter((h) => !!h)\n\n        handlers.forEach((h) => h(e))\n        latest.setInputValueIfUncontrolled(e.currentTarget.value)\n      },\n      handleFocusInput: () => {\n        if (!latest.isExpanded) {\n          focus()\n        }\n      },\n      handleCompositionStart: () => setIsComposing(true),\n      handleCompositionEnd: () => setIsComposing(false),\n      handleKeyDownInput: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (ARROW_UP_AND_DOWN_KEY_REGEX.test(e.key)) {\n          // 上下キー入力はリストボックスの activeDescendant の移動に用いるため、input 内では作用させない\n          e.preventDefault()\n        }\n      },\n      // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n      // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n      // submitイベントが発生し、formが送信される場合がある\n      handleDelegateKeyPress: (e: KeyboardEvent<HTMLInputElement>) => {\n        preventDefaultWithPressEnter(e)\n        latest.onKeyPress?.(e)\n      },\n    }\n  }, [listBoxFunctions, latest])\n\n  useOuterClick([triggerRef, listBoxRef], functions.blur)\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n    ref,\n    () => inputRef.current,\n    [],\n  )\n\n  useEffect(() => {\n    if (latest.highlighted) {\n      setHighlighted(false)\n      inputRef.current?.select()\n    } else {\n      setInputValueIfUncontrolled('')\n    }\n  }, [selectedItems, setInputValueIfUncontrolled, inputRef, latest])\n\n  useEffect(() => {\n    if (isExpanded) {\n      inputRef.current?.focus()\n    }\n  }, [isExpanded, selectedItems, isInputControlled, inputRef])\n\n  const classNames = useMemo(() => {\n    const {\n      wrapper,\n      inputArea,\n      selectedList,\n      inputWrapper,\n      input,\n      placeholderEl,\n      suffixWrapper,\n      suffixIcon,\n    } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      inputArea: inputArea(),\n      selectedList: selectedList(),\n      inputWrapper: inputWrapper(),\n      input: input(),\n      placeholder: placeholderEl(),\n      suffixWrapper: suffixWrapper(),\n      suffixIcon: suffixIcon(),\n    }\n  }, [className])\n\n  const localized = useLocalize({\n    selectedListAriaLabel: {\n      id: 'smarthr-ui/MultiCombobox/selectedListAriaLabel',\n      defaultText: '選択済みアイテム',\n    },\n  })\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <div\n      ref={triggerRef}\n      role=\"group\"\n      onClick={functions.handleDelegateClick}\n      onKeyDown={functions.handleDelegateKeyDown}\n      onKeyPress={functions.handleDelegateKeyPress}\n      className={classNames.wrapper}\n      style={{\n        ...style,\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n    >\n      <Scroller className={classNames.inputArea}>\n        <ul\n          id={selectedListId}\n          aria-label={localized.selectedListAriaLabel}\n          className={classNames.selectedList}\n        >\n          {selectedItems.map((selectedItem) => (\n            <li key={`${selectedItem.label}-${innerText(selectedItem.value)}`}>\n              <MultiSelectedItem\n                item={selectedItem}\n                disabled={disabled}\n                handleDelete={functions.handleDelete}\n                enableEllipsis={selectedItemEllipsis}\n              />\n            </li>\n          ))}\n        </ul>\n\n        <div className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            data-smarthr-ui-input=\"true\"\n            type=\"text\"\n            name={name}\n            value={inputValue}\n            disabled={disabled}\n            required={required && selectedItems.length === 0}\n            ref={inputRef}\n            onChange={functions.handleChangeInput}\n            onFocus={functions.handleFocusInput}\n            onCompositionStart={functions.handleCompositionStart}\n            onCompositionEnd={functions.handleCompositionEnd}\n            onKeyDown={functions.handleKeyDownInput}\n            autoComplete={autoComplete ?? 'off'}\n            tabIndex={0}\n            role=\"combobox\"\n            aria-activedescendant={activeOption?.id}\n            aria-controls={`${listBoxId} ${selectedListId}`}\n            aria-haspopup=\"listbox\"\n            aria-expanded={isExpanded}\n            aria-invalid={error || undefined}\n            aria-disabled={disabled}\n            aria-autocomplete=\"list\"\n            className={classNames.input}\n          />\n        </div>\n\n        {selectedItems.length === 0 && placeholder && !isExpanded && (\n          <p className={classNames.placeholder}>{placeholder}</p>\n        )}\n      </Scroller>\n\n      <MemoizedCaretDown disabled={disabled} isExpanded={isExpanded} classNames={classNames} />\n\n      <ListBox {...listBoxProps} />\n    </div>\n  )\n}\n\nexport const MultiCombobox = genericsForwardRef(ActualMultiCombobox)\n\nconst MemoizedCaretDown = memo<{\n  disabled: boolean\n  isExpanded: boolean\n  classNames: {\n    suffixWrapper: string\n    suffixIcon: string\n  }\n}>(({ disabled, isExpanded, classNames }) => {\n  const theme = useTheme()\n  const caretIconColor = isExpanded\n    ? theme.textColor.black\n    : disabled\n      ? theme.textColor.disabled\n      : theme.textColor.grey\n\n  return (\n    <div className={classNames.suffixWrapper}>\n      <FaCaretDownIcon color={caretIconColor} className={classNames.suffixIcon} />\n    </div>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6EA;AAEA;AACE;;;AAGF;AAEA;AACA;AACA;AACA;AAEA;AACE;AACA;;AAGF;AAEA;AACE;AACE;;;;;;;;;;;;AAYC;AACD;AACA;AAEA;;;;;AAKC;AACD;;;;AAIC;AACD;AACA;;;AAGC;AACD;AACD;AACF;AAED;AAkCE;;;;;AAMA;AAEA;;;AAGA;AAEA;;AAEE;;;;AAID;AACD;;;;;;;;AASC;AAED;AACE;;AAGE;AACE;;AAEF;AACE;;AASF;;;;AAII;AACF;;AAEJ;;;AAIE;;;;;AAQI;AACE;AACA;;AAGA;;AACK;;;AAGT;;;AAGN;AAEA;;;;;;;;;;AAUC;;;;;;;;;;;;;;;AAgBA;AAED;AACE;;AAGE;;AAIE;;;AAII;;;;;AAMN;AACF;;AAGE;AAEA;;AAEA;AAEA;AACE;;;;;AAIJ;;AAGE;AAEA;;AAEA;;;AAIA;AAEA;AACE;;;;;AAIE;AACF;;AAEJ;;AAGE;;AAEF;;AAGE;AACE;;;AAGJ;;;;AAKE;;;;;AAKI;;AACK;AACL;;AAEE;;AAGF;;;;AAGA;;;;AAGA;;AACK;AAEL;AACA;AACA;;;AAKA;;;;;;;AAOA;;AAGF;;AAEF;;;AAII;AAEA;;;AAGJ;;AAGE;;;;AAIA;AACE;;;AAGJ;AACA;AACA;;;;;;;;;AASA;;AAEE;;;AAGN;;AAIA;;AAOE;;AAEE;;;;;;;;AAQA;;;AAIJ;;;AAaI;;;;;;;;;AASJ;;AAGE;AACE;AACA;AACD;AACF;;;AAIC;AAQI;AACA;;AA4DR;;AAIA;AAQE;;AAEE;AACA;AACE;AACA;;AAON;;"}
+{"version":3,"file":"MultiCombobox.js","sources":["../../../../src/components/Combobox/MultiCombobox/MultiCombobox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useAnimationFrame } from '../../../hooks/useAnimationFrame'\nimport { useLatest } from '../../../hooks/useLatest'\nimport { useOuterClick } from '../../../hooks/useOuterClick'\nimport { useTheme } from '../../../hooks/useTheme'\nimport { useLocalize } from '../../../intl'\nimport { findDelegateTarget } from '../../../libs/delegate'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { FaCaretDownIcon } from '../../Icon'\nimport { Scroller } from '../../Scroller'\nimport { areItemsEqual } from '../helper'\nimport { ListBox, useListbox } from '../useListbox'\nimport { useMultiOptions } from '../useOptions'\n\nimport { DELETE_BUTTON_SELECTOR, MultiSelectedItem } from './MultiSelectedItem'\n\nimport type { ComboboxItem, BaseProps as ComboboxProps } from '../types'\n\ntype BaseProps<T> = ComboboxProps<T> & {\n  /**\n   * 選択されているアイテムのリスト\n   */\n  selectedItems: Array<ComboboxItem<T> & { deletable?: boolean }>\n  /**\n   * 選択されているアイテムのラベルを省略表示するかどうか\n   */\n  selectedItemEllipsis?: boolean\n  /**\n   * テキストボックスの `value` 属性の値。\n   * `onChangeInput` と併せて設定することで、テキストボックスの挙動が制御可能になる。\n   */\n  inputValue?: string\n  /**\n   * 選択されているアイテムの削除ボタンがクリックされた時に発火するコールバック関数\n   */\n  onDelete?: (item: ComboboxItem<T>) => void\n  /**\n   * 選択されているアイテムのリストが変わった時に発火するコールバック関数\n   */\n  onChangeSelected?: (selectedItems: Array<ComboboxItem<T>>) => void\n  /**\n   * コンポーネントがフォーカスされたときに発火するコールバック関数\n   */\n  onFocus?: () => void\n  /**\n   * コンポーネントからフォーカスが外れた時に発火するコールバック関数\n   */\n  onBlur?: () => void\n  /**\n   * アイテムが選択されたときに選択済みかどうかを判定するコールバック関数/\n   */\n  isItemSelected?: (targetItem: ComboboxItem<T>, selectedItems: Array<ComboboxItem<T>>) => boolean\n  /**\n   * 検索結果が0件の時に表示するコンテンツ\n   */\n  noResultText?: ReactNode\n}\ntype Props<T> = BaseProps<T> & Omit<ComponentPropsWithoutRef<'input'>, keyof BaseProps<unknown>>\n\nconst NOOP = () => undefined\n\nconst preventDefaultWithPressEnter = (e: KeyboardEvent<HTMLInputElement>) => {\n  if (e.key === 'Enter') {\n    e.preventDefault()\n  }\n}\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_LEFT_KEY_REGEX = /^(Arrow)?Left$/\nconst ARROW_RIGHT_KEY_REGEX = /^(Arrow)?Right/\nconst ARROW_UP_AND_DOWN_KEY_REGEX = /^(Arrow)?(Up|Down)$/\n\nconst EMPTY_INPUT_CHANGE_EVENT = {\n  currentTarget: { value: '' },\n  target: { value: '' },\n} as ChangeEvent<HTMLInputElement>\n\nconst DELETE_BUTTON_CLASSNAME = `.${DELETE_BUTTON_SELECTOR}`\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-MultiCombobox',\n      'shr-box-border shr-inline-flex shr-min-w-[15em] shr-rounded-m shr-border shr-border-solid shr-px-0.5 shr-py-0.25 shr-align-bottom',\n      'contrast-more:shr-border-high-contrast',\n      'has-[[role=combobox][aria-expanded=true]]:shr-focus-indicator',\n      'shr-cursor-text shr-border-default shr-bg-white',\n      'has-[[role=combobox]:disabled]:shr-cursor-not-allowed',\n      'has-[[role=combobox]:disabled]:shr-border-default/50',\n      'has-[[role=combobox]:disabled]:shr-bg-white-darken',\n      'has-[[role=combobox]:disabled]:shr-text-disabled',\n      // HINT: disabled と詳細度が同じ [0,2,0] のため、CSS ソース順でこちらを後に置くことで error 時の border 色を優先させる\n      'has-[[role=combobox][aria-invalid]]:shr-border-danger',\n    ],\n    inputArea: 'shr-flex shr-flex-1 shr-flex-wrap shr-gap-0.5',\n    selectedList:\n      'smarthr-ui-MultiCombobox-selectedList shr-contents shr-list-none [&_li]:shr-min-w-0',\n    inputWrapper: [\n      'shr-flex shr-flex-1 shr-items-center',\n      'has-[[role=combobox][aria-expanded=false]]:shr-pointer-events-none',\n      'has-[[role=combobox][aria-expanded=false]]:shr-absolute',\n      'has-[[role=combobox][aria-expanded=false]]:shr-opacity-0',\n    ],\n    input: [\n      'smarthr-ui-MultiCombobox-input',\n      'shr-w-full shr-min-w-[5em] shr-border-none shr-text-base shr-text-black shr-outline-none shr-outline-0',\n      'disabled:shr-hidden',\n    ],\n    placeholderEl: 'smarthr-ui-MultiCombobox-placeholder shr-my-0 shr-self-center',\n    suffixWrapper: [\n      'shr-relative -shr-me-0.5 shr-ms-0.5 shr-p-0.5',\n      'before:shr-absolute before:shr-inset-x-0 before:shr-inset-y-0.25 before:shr-w-0 before:shr-border-0 before:shr-border-l before:shr-border-solid before:shr-border-default before:shr-content-[\"\"]',\n    ],\n    suffixIcon: 'shr-block',\n  },\n})\n\nconst ActualMultiCombobox = <T,>(\n  {\n    items,\n    selectedItems,\n    name,\n    disabled = false,\n    required = false,\n    error = false,\n    creatable = false,\n    placeholder = '',\n    autoComplete,\n    dropdownHelpMessage,\n    isLoading,\n    selectedItemEllipsis,\n    width,\n    dropdownWidth = 'auto',\n    inputValue: controlledInputValue,\n    className,\n    onChange,\n    onChangeInput,\n    onAdd,\n    onDelete,\n    onSelect,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    isItemSelected,\n    noResultText,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLInputElement>,\n) => {\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [highlighted, setHighlighted] = useState(false)\n  const [uncontrolledInputValue, setUncontrolledInputValue] = useState('')\n  const [isComposing, setIsComposing] = useState(false)\n\n  const selectedListId = useId()\n\n  const isInputControlled = controlledInputValue !== undefined\n  const inputValue = isInputControlled ? controlledInputValue : uncontrolledInputValue\n  const setInputValueIfUncontrolled = isInputControlled ? NOOP : setUncontrolledInputValue\n  const isInputEmpty = !inputValue\n\n  const { options } = useMultiOptions({\n    items,\n    selected: selectedItems,\n    creatable,\n    inputValue,\n    isItemSelected,\n  })\n  const inputRef = useRef<HTMLInputElement>(null)\n  const deleteFrame = useAnimationFrame()\n  const selectFrame = useAnimationFrame()\n\n  // eslint-disable-next-line local-rules/best-practice-for-use-latest\n  const latestForListBox = useLatest({\n    onDelete,\n    onChangeSelected,\n    onSelect,\n    onChangeInput,\n    selectedItems,\n    deleteFrame,\n    selectFrame,\n  })\n\n  const listBoxFunctions = useMemo(() => {\n    const handleDelete = (item: ComboboxItem<T>) => {\n      const handlers: Array<(deletingItem: ComboboxItem<T>) => void> = []\n\n      if (latestForListBox.onDelete) {\n        handlers.push((deletingItem: ComboboxItem<T>) => latestForListBox.onDelete!(deletingItem))\n      }\n      if (latestForListBox.onChangeSelected) {\n        handlers.push((deletingItem: ComboboxItem<T>) =>\n          latestForListBox.onChangeSelected!(\n            latestForListBox.selectedItems.filter(\n              (selected) => !areItemsEqual(selected, deletingItem),\n            ),\n          ),\n        )\n      }\n\n      if (handlers.length > 0) {\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // 処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        latestForListBox.deleteFrame.request(() => {\n          handlers.forEach((h) => h(item))\n        })\n      }\n    }\n\n    return {\n      handleDelete,\n      handleSelect: (selected: ComboboxItem<T>) => {\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // 処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        latestForListBox.selectFrame.request(() => {\n          const matchedSelectedItem = latestForListBox.selectedItems.find((item) =>\n            areItemsEqual(item, selected),\n          )\n\n          if (matchedSelectedItem === undefined) {\n            latestForListBox.onSelect?.(selected)\n            latestForListBox.onChangeSelected?.(latestForListBox.selectedItems.concat(selected))\n\n            // 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する\n            latestForListBox.onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n          } else if (matchedSelectedItem.deletable !== false) {\n            handleDelete(selected)\n          }\n        })\n      },\n    }\n  }, [latestForListBox])\n\n  // TODO: callbackRefにまとめたい\n  useEffect(\n    () => () => {\n      latestForListBox.deleteFrame.cancel()\n      latestForListBox.selectFrame.cancel()\n    },\n    [latestForListBox],\n  )\n\n  const { listBoxProps, activeOption, handleKeyDownListBox, listBoxId, listBoxRef } = useListbox({\n    options,\n    dropdownHelpMessage,\n    dropdownWidth,\n    onAdd,\n    onSelect: listBoxFunctions.handleSelect,\n    isExpanded,\n    isLoading,\n    triggerRef,\n    noResultText,\n  })\n\n  const latest = useLatest({\n    onChange,\n    onChangeInput,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    disabled,\n    isExpanded,\n    highlighted,\n    isComposing,\n    isInputEmpty,\n    selectedItems,\n    setInputValueIfUncontrolled,\n    handleKeyDownListBox,\n  })\n\n  const functions = useMemo(() => {\n    const handleDelete = listBoxFunctions.handleDelete\n\n    const getDeletionButtons = () => {\n      if (triggerRef.current) {\n        const buttons =\n          triggerRef.current.querySelectorAll<HTMLButtonElement>(DELETE_BUTTON_CLASSNAME)\n\n        if (buttons.length > 0) {\n          const actualButtons = Array.from(buttons)\n\n          return {\n            buttons: actualButtons,\n            currentIndex: actualButtons.indexOf(document.activeElement as HTMLButtonElement),\n          }\n        }\n      }\n\n      return null\n    }\n\n    const focusPrevDeletionButton = () => {\n      const result = getDeletionButtons()\n\n      if (!result) return\n\n      const { buttons, currentIndex } = result\n\n      if (currentIndex !== -1) {\n        buttons[Math.max(currentIndex - 1, 0)].focus()\n      } else if (inputRef.current?.selectionStart === 0) {\n        buttons[buttons.length - 1].focus()\n      }\n    }\n\n    const focusNextDeletionButton = () => {\n      const result = getDeletionButtons()\n\n      if (!result) return\n\n      const { buttons, currentIndex } = result\n\n      if (currentIndex === -1) return\n\n      const nextIndex = currentIndex + 1\n\n      if (nextIndex < buttons.length) {\n        buttons[nextIndex].focus()\n      } else {\n        // キー入力が input に影響しないようにフォーカスタイミングを遅らせる\n        setTimeout(() => {\n          inputRef.current?.focus()\n        })\n      }\n    }\n\n    const focus = () => {\n      latest.onFocus?.()\n      setIsExpanded(true)\n    }\n\n    const blur = () => {\n      if (latest.isExpanded) {\n        latest.onBlur?.()\n        setIsExpanded(false)\n      }\n    }\n\n    return {\n      handleDelete,\n      blur,\n      handleDelegateKeyDown: (e: KeyboardEvent<HTMLDivElement>) => {\n        if (latest.isComposing) return\n\n        if (ESCAPE_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          blur()\n        } else if (e.key === 'Tab') {\n          if (latest.isExpanded) {\n            // フォーカスがコンポーネントを抜けるように先に input をフォーカスしておく\n            inputRef.current?.focus()\n          }\n\n          blur()\n        } else if (ARROW_LEFT_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          focusPrevDeletionButton()\n        } else if (ARROW_RIGHT_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          focusNextDeletionButton()\n        } else if (\n          e.key === 'Backspace' &&\n          latest.isInputEmpty &&\n          latest.selectedItems.length > 0 &&\n          latest.selectedItems[latest.selectedItems.length - 1].deletable !== false\n        ) {\n          e.preventDefault()\n          e.stopPropagation()\n\n          const lastItem = latest.selectedItems[latest.selectedItems.length - 1]\n\n          handleDelete(lastItem)\n          setHighlighted(true)\n          latest.setInputValueIfUncontrolled(innerText(lastItem.label))\n        } else {\n          e.stopPropagation()\n          inputRef.current?.focus()\n        }\n\n        latest.handleKeyDownListBox(e)\n      },\n      handleDelegateClick: (e: MouseEvent<HTMLElement>) => {\n        if (\n          !latest.disabled &&\n          !latest.isExpanded &&\n          !findDelegateTarget(e, DELETE_BUTTON_CLASSNAME)\n        ) {\n          focus()\n        }\n      },\n      handleChangeInput: (e: ChangeEvent<HTMLInputElement>) => {\n        const handlers = [latest.onChange, latest.onChangeInput].filter((h) => !!h)\n\n        handlers.forEach((h) => h(e))\n        latest.setInputValueIfUncontrolled(e.currentTarget.value)\n      },\n      handleFocusInput: () => {\n        if (!latest.isExpanded) {\n          focus()\n        }\n      },\n      handleCompositionStart: () => setIsComposing(true),\n      handleCompositionEnd: () => setIsComposing(false),\n      handleKeyDownInput: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (ARROW_UP_AND_DOWN_KEY_REGEX.test(e.key)) {\n          // 上下キー入力はリストボックスの activeDescendant の移動に用いるため、input 内では作用させない\n          e.preventDefault()\n        }\n      },\n      // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n      // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n      // submitイベントが発生し、formが送信される場合がある\n      handleDelegateKeyPress: (e: KeyboardEvent<HTMLInputElement>) => {\n        preventDefaultWithPressEnter(e)\n        latest.onKeyPress?.(e)\n      },\n    }\n  }, [listBoxFunctions, latest])\n\n  useOuterClick([triggerRef, listBoxRef], functions.blur)\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n    ref,\n    () => inputRef.current,\n    [],\n  )\n\n  useEffect(() => {\n    if (latest.highlighted) {\n      setHighlighted(false)\n      inputRef.current?.select()\n    } else {\n      setInputValueIfUncontrolled('')\n    }\n  }, [selectedItems, setInputValueIfUncontrolled, inputRef, latest])\n\n  useEffect(() => {\n    if (isExpanded) {\n      inputRef.current?.focus()\n    }\n  }, [isExpanded, selectedItems, isInputControlled, inputRef])\n\n  const classNames = useMemo(() => {\n    const {\n      wrapper,\n      inputArea,\n      selectedList,\n      inputWrapper,\n      input,\n      placeholderEl,\n      suffixWrapper,\n      suffixIcon,\n    } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      inputArea: inputArea(),\n      selectedList: selectedList(),\n      inputWrapper: inputWrapper(),\n      input: input(),\n      placeholder: placeholderEl(),\n      suffixWrapper: suffixWrapper(),\n      suffixIcon: suffixIcon(),\n    }\n  }, [className])\n\n  const localized = useLocalize({\n    selectedListAriaLabel: {\n      id: 'smarthr-ui/MultiCombobox/selectedListAriaLabel',\n      defaultText: '選択済みアイテム',\n    },\n  })\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <div\n      ref={triggerRef}\n      role=\"group\"\n      onClick={functions.handleDelegateClick}\n      onKeyDown={functions.handleDelegateKeyDown}\n      onKeyPress={functions.handleDelegateKeyPress}\n      className={classNames.wrapper}\n      style={{\n        ...style,\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n    >\n      <Scroller className={classNames.inputArea}>\n        <ul\n          id={selectedListId}\n          aria-label={localized.selectedListAriaLabel}\n          className={classNames.selectedList}\n        >\n          {selectedItems.map((selectedItem) => (\n            <li key={`${selectedItem.label}-${innerText(selectedItem.value)}`}>\n              <MultiSelectedItem\n                item={selectedItem}\n                disabled={disabled}\n                handleDelete={functions.handleDelete}\n                enableEllipsis={selectedItemEllipsis}\n              />\n            </li>\n          ))}\n        </ul>\n\n        <div className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            data-smarthr-ui-input=\"true\"\n            type=\"text\"\n            name={name}\n            value={inputValue}\n            disabled={disabled}\n            required={required && selectedItems.length === 0}\n            ref={inputRef}\n            onChange={functions.handleChangeInput}\n            onFocus={functions.handleFocusInput}\n            onCompositionStart={functions.handleCompositionStart}\n            onCompositionEnd={functions.handleCompositionEnd}\n            onKeyDown={functions.handleKeyDownInput}\n            autoComplete={autoComplete ?? 'off'}\n            tabIndex={0}\n            role=\"combobox\"\n            aria-activedescendant={activeOption?.id}\n            aria-controls={`${listBoxId} ${selectedListId}`}\n            aria-haspopup=\"listbox\"\n            aria-expanded={isExpanded}\n            aria-invalid={error || undefined}\n            aria-disabled={disabled}\n            aria-autocomplete=\"list\"\n            className={classNames.input}\n          />\n        </div>\n\n        {selectedItems.length === 0 && placeholder && !isExpanded && (\n          <p className={classNames.placeholder}>{placeholder}</p>\n        )}\n      </Scroller>\n\n      <MemoizedCaretDown disabled={disabled} isExpanded={isExpanded} classNames={classNames} />\n\n      <ListBox {...listBoxProps} />\n    </div>\n  )\n}\n\nexport const MultiCombobox = genericsForwardRef(ActualMultiCombobox)\n\nconst MemoizedCaretDown = memo<{\n  disabled: boolean\n  isExpanded: boolean\n  classNames: {\n    suffixWrapper: string\n    suffixIcon: string\n  }\n}>(({ disabled, isExpanded, classNames }) => {\n  const theme = useTheme()\n  const caretIconColor = isExpanded\n    ? theme.textColor.black\n    : disabled\n      ? theme.textColor.disabled\n      : theme.textColor.grey\n\n  return (\n    <div className={classNames.suffixWrapper}>\n      <FaCaretDownIcon color={caretIconColor} className={classNames.suffixIcon} />\n    </div>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA8EA;AAEA;AACE;;;AAGF;AAEA;AACA;AACA;AACA;AAEA;AACE;AACA;;AAGF;AAEA;AACE;AACE;;;;;;;;;;;;AAYC;AACD;AACA;AAEA;;;;;AAKC;AACD;;;;AAIC;AACD;AACA;;;AAGC;AACD;AACD;AACF;AAED;AAkCE;;;;;AAMA;AAEA;;;AAGA;AAEA;;AAEE;;;;AAID;AACD;AACA;AACA;;;;;;;;;;AAWC;AAED;AACE;;AAGE;AACE;;AAEF;AACE;;AASF;;;AAGE;AACE;AACF;;AAEJ;;;AAIE;;;AAGE;;AAKE;AACE;AACA;;AAGA;;AACK;;;AAGT;;;AAGN;;AAGA;AAEI;AACA;AACF;AAIF;;;;;;;;;;AAUC;;;;;;;;;;;;;;;AAgBA;AAED;AACE;;AAGE;;AAIE;;;AAII;;;;;AAMN;AACF;;AAGE;AAEA;;AAEA;AAEA;AACE;;;;;AAIJ;;AAGE;AAEA;;AAEA;;;AAIA;AAEA;AACE;;;;;AAIE;AACF;;AAEJ;;AAGE;;AAEF;;AAGE;AACE;;;AAGJ;;;;AAKE;;;;;AAKI;;AACK;AACL;;AAEE;;AAGF;;;;AAGA;;;;AAGA;;AACK;AAEL;AACA;AACA;;;AAKA;;;;;;;AAOA;;AAGF;;AAEF;;;AAII;AAEA;;;AAGJ;;AAGE;;;;AAIA;AACE;;;AAGJ;AACA;AACA;;;;;;;;;AASA;;AAEE;;;AAGN;;AAIA;;AAOE;;AAEE;;;;;;;;AAQA;;;AAIJ;;;AAaI;;;;;;;;;AASJ;;AAGE;AACE;AACA;AACD;AACF;;;AAIC;AAQI;AACA;;AA4DR;;AAIA;AAQE;;AAEE;AACA;AACE;AACA;;AAON;;"}

package/lib/components/Combobox/MultiCombobox/MultiSelectedItem.cjs

@@ -2,7 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.cjs');
 var hooks_useLatest = require('../../../hooks/useLatest.cjs');
 require('../../../intl/IntlProvider.cjs');
 require('react-intl');

package/lib/components/Combobox/MultiCombobox/MultiSelectedItem.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, useState, useRef, useEffect, useId, useMemo } from 'react';
-import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
+import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import { useLatest } from '../../../hooks/useLatest.js';
 import '../../../intl/IntlProvider.js';
 import 'react-intl';

package/lib/components/Combobox/SingleCombobox/SingleCombobox.cjs

@@ -4,7 +4,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index$1 = require('../../../_virtual/index3.cjs');
-var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.cjs');
+var hooks_useAnimationFrame = require('../../../hooks/useAnimationFrame.cjs');
 var hooks_useClick = require('../../../hooks/useClick.cjs');
 var hooks_useLatest = require('../../../hooks/useLatest.cjs');
 var hooks_useTheme = require('../../../hooks/useTheme.cjs');
@@ -75,6 +76,7 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
         inputValue,
         isFilteringDisabled: !isEditing,
     });
+    const selectFrame = hooks_useAnimationFrame.useAnimationFrame();
     const { listBoxProps, activeOption, handleKeyDownListBox, listBoxId, listBoxRef } = components_Combobox_useListbox.useListbox({
         options,
         dropdownHelpMessage,
@@ -85,8 +87,8 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
             onSelect?.(selected);
             onChangeSelected?.(selected);
             // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう
-            // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする
-            requestAnimationFrame(() => {
+            // 処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする
+            selectFrame.request(() => {
                 setIsExpanded(false);
                 // HINT:
                 // - 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する
@@ -103,6 +105,8 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
         triggerRef,
         noResultText,
     });
+    // TODO: callbackRefにまとめ直したい
+    React.useEffect(() => selectFrame.cancel, [selectFrame.cancel]);
     const latest = hooks_useLatest.useLatest({
         onChange,
         onChangeInput,

package/lib/components/Combobox/SingleCombobox/SingleCombobox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SingleCombobox.cjs","sources":["../../../../src/components/Combobox/SingleCombobox/SingleCombobox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useClick } from '../../../hooks/useClick'\nimport { useLatest } from '../../../hooks/useLatest'\nimport { useTheme } from '../../../hooks/useTheme'\nimport { Localizer } from '../../../intl'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { UnstyledButton } from '../../Button'\nimport { FaCaretDownIcon, FaCircleXmarkIcon } from '../../Icon'\nimport { Input } from '../../Input'\nimport { ListBox, useListbox } from '../useListbox'\nimport { useSingleOptions } from '../useOptions'\n\nimport type { ComboboxItem, BaseProps as ComboboxProps } from '../types'\n\ntype BaseProps<T> = ComboboxProps<T> & {\n  /**\n   * 選択されているアイテム\n   */\n  selectedItem: ComboboxItem<T> | null\n  /**\n   * デフォルトで選択されるアイテム\n   */\n  defaultItem?: ComboboxItem<T>\n  /**\n   * コンポーネント内の先頭に表示する内容\n   */\n  prefix?: ReactNode\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   */\n  onClear?: () => void\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   * 指定している場合、クリア時にonClickを実行せずにonClearClickのみ実行する\n   */\n  onClearClick?: (e: MouseEvent) => void\n  /**\n   * 選択されているアイテムのリストが変わった時に発火するコールバック関数\n   */\n  onChangeSelected?: (selectedItem: ComboboxItem<T> | null) => void\n  /**\n   * コンポーネントがフォーカスされたときに発火するコールバック関数\n   */\n  onFocus?: () => void\n  /**\n   * コンポーネントからフォーカスが外れた時に発火するコールバック関数\n   */\n  onBlur?: () => void\n  /**\n   * 検索結果が0件の時に表示するコンテンツ\n   */\n  noResultText?: ReactNode\n}\ntype Props<T> = BaseProps<T> & Omit<ComponentPropsWithoutRef<'input'>, keyof BaseProps<unknown>>\n\nconst NOOP = () => undefined\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_UP_DOWN_REGEX = /^(Arrow)?(Up|Down)$/\n\nconst EMPTY_INPUT_CHANGE_EVENT = {\n  currentTarget: { value: '' },\n  target: { value: '' },\n} as ChangeEvent<HTMLInputElement>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper:\n      'smarthr-ui-SingleCombobox shr-inline-block [&:has(.smarthr-ui-Input-input:disabled)]:shr-cursor-not-allowed',\n    input: 'smarthr-ui-SingleCombobox-input shr-w-full',\n    caretDownLayout: [\n      'shr-relative -shr-me-0.5 shr-p-0.5',\n      'before:shr-border-0',\n      'before:shr-absolute before:shr-inset-x-0 before:shr-inset-y-0.25 before:shr-w-0 before:shr-border-l before:shr-border-solid before:shr-border-default before:shr-content-[\"\"]',\n    ],\n    caretDownIcon: 'shr-block',\n    clearButton: [\n      'smarthr-ui-SingleCombobox-clearButton',\n      'shr-group/clearButton',\n      'shr-me-0.5',\n      'focus-visible:shr-shadow-none',\n      '[[data-clear-button-hidden=true]_&]:shr-hidden',\n    ],\n    clearButtonIcon: [\n      'shr-block',\n      'group-focus-visible/clearButton:shr-focus-indicator group-focus-visible/clearButton:shr-rounded-full',\n    ],\n  },\n})\n\ntype SuffixButtonsProps = {\n  clearButtonRef: RefObject<HTMLButtonElement>\n  caretIconColor: string\n  handleClickClear: (e: MouseEvent) => void\n  handleClickIcon: (e: MouseEvent) => void\n  classNames: {\n    clearButton: string\n    clearButtonIcon: string\n    caretDownLayout: string\n    caretDownIcon: string\n  }\n}\n\nconst SuffixButtons = memo<SuffixButtonsProps>(\n  ({\n    clearButtonRef,\n    caretIconColor,\n    handleClickClear,\n    handleClickIcon: handleDelegateClickIcon,\n    classNames,\n  }) => (\n    <>\n      <UnstyledButton\n        onClick={handleClickClear}\n        ref={clearButtonRef}\n        className={classNames.clearButton}\n      >\n        <FaCircleXmarkIcon\n          color=\"TEXT_BLACK\"\n          alt={\n            <Localizer id=\"smarthr-ui/SingleCombobox/destroyButtonIconAlt\" defaultText=\"クリア\" />\n          }\n          className={classNames.clearButtonIcon}\n        />\n      </UnstyledButton>\n      <span\n        role=\"presentation\"\n        onClick={handleDelegateClickIcon}\n        className={classNames.caretDownLayout}\n      >\n        <FaCaretDownIcon color={caretIconColor} className={classNames.caretDownIcon} />\n      </span>\n    </>\n  ),\n)\n\nconst ActualSingleCombobox = <T,>(\n  {\n    items,\n    selectedItem,\n    defaultItem,\n    name,\n    disabled,\n    readOnly,\n    required,\n    prefix,\n    error,\n    creatable,\n    placeholder,\n    autoComplete,\n    dropdownHelpMessage,\n    isLoading,\n    width,\n    dropdownWidth = 'auto',\n    className,\n    onChange,\n    onChangeInput,\n    onAdd,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    noResultText,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLInputElement>,\n) => {\n  const theme = useTheme()\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const clearButtonRef = useRef<HTMLButtonElement>(null)\n  const [isFocused, setIsFocused] = useState(false)\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [inputValue, setInputValue] = useState('')\n  const [isComposing, setIsComposing] = useState(false)\n  const [isEditing, setIsEditing] = useState(false)\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n    ref,\n    () => inputRef.current,\n    [],\n  )\n\n  const { options } = useSingleOptions({\n    items,\n    selected: selectedItem,\n    creatable,\n    inputValue,\n    isFilteringDisabled: !isEditing,\n  })\n\n  const { listBoxProps, activeOption, handleKeyDownListBox, listBoxId, listBoxRef } = useListbox<T>(\n    {\n      options,\n      dropdownHelpMessage,\n      dropdownWidth,\n      onAdd,\n      // HINT: memo化していないが、内部でuseLatestでstableにしているため最適化としてそのまま渡している\n      onSelect: (selected: ComboboxItem<T>) => {\n        onSelect?.(selected)\n        onChangeSelected?.(selected)\n\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          setIsExpanded(false)\n          // HINT:\n          // - 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する\n          // - 対応するdropdownを閉じて以降にonChangeInputを発火する必要がある\n          //   - 先にclearしてしまうと意図せずこの要素のドロップダウンを閉じる前に他要素の再レンダリングを引き起こす可能性がある\n          //   - 例えばFilterDropdownなどで当comboboxを使っている場合、レイアウト上comboboxのdropdown以下の要素がクリックされた扱いになってしまい\n          //     FilterDropdownを意図せず閉じてしまうなどの挙動のバグを引き起こす可能性がある\n          onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n        })\n\n        setIsEditing(false)\n      },\n      isExpanded,\n      isLoading,\n      triggerRef,\n      noResultText,\n    },\n  )\n\n  const latest = useLatest({\n    onChange,\n    onChangeInput,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    handleKeyDownListBox,\n    defaultItem,\n    selectedItem,\n    isFocused,\n    isExpanded,\n    isComposing,\n    isEditing,\n    disabled,\n    readOnly,\n  })\n\n  const functions = useMemo(() => {\n    const selectDefaultItem = () => {\n      if (latest.onSelect && latest.defaultItem) {\n        latest.onSelect(latest.defaultItem)\n      }\n    }\n    const unfocus = () => {\n      if (!latest.isFocused) return\n\n      latest.onBlur?.()\n\n      setIsFocused(false)\n      setIsExpanded(false)\n      setIsEditing(false)\n\n      if (latest.selectedItem) {\n        setInputValue(innerText(latest.selectedItem.label))\n      } else {\n        selectDefaultItem()\n      }\n    }\n\n    return {\n      selectDefaultItem,\n      unfocus,\n      handleFocus: () => {\n        latest.onFocus?.()\n        inputRef.current?.focus()\n        setIsFocused(true)\n\n        if (!latest.isFocused) {\n          setIsExpanded(true)\n        }\n      },\n      handleClickClear: (e: MouseEvent) => {\n        e.stopPropagation()\n\n        let isExecutedPreventDefault = false\n\n        latest.onClearClick?.({\n          ...e,\n          preventDefault: () => {\n            e.preventDefault()\n            isExecutedPreventDefault = true\n          },\n        })\n\n        if (!isExecutedPreventDefault) {\n          latest.onClear?.()\n          latest.onChangeSelected?.(null)\n\n          inputRef.current?.focus()\n\n          setIsFocused(true)\n          setIsExpanded(true)\n        }\n      },\n      handleClickInput: (e: MouseEvent) => {\n        if (latest.disabled || latest.readOnly) {\n          e.stopPropagation()\n\n          return\n        }\n\n        inputRef.current?.focus()\n\n        if (!latest.isExpanded) {\n          setIsExpanded(true)\n        }\n      },\n      handleChangeInput: (e: ChangeEvent<HTMLInputElement>) => {\n        latest.onChange?.(e)\n        latest.onChangeInput?.(e)\n\n        if (!latest.isEditing) setIsEditing(true)\n\n        const { value } = e.currentTarget\n\n        setInputValue(value)\n\n        if (value === '') {\n          latest.onClear?.()\n          latest.onChangeSelected?.(null)\n        }\n      },\n      handleCompositionStart: () => setIsComposing(true),\n      handleCompositionEnd: () => setIsComposing(false),\n      // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n      // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n      // submitイベントが発生し、formが送信される場合がある\n      handleKeyPress: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter') e.preventDefault()\n\n        latest.onKeyPress?.(e)\n      },\n      handleKeyDownInput: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (latest.isComposing) {\n          return\n        }\n\n        if (ESCAPE_KEY_REGEX.test(e.key)) {\n          if (latest.isExpanded) {\n            e.stopPropagation()\n            setIsExpanded(false)\n          }\n        } else if (e.key === 'Tab') {\n          unfocus()\n        } else {\n          if (ARROW_UP_DOWN_REGEX.test(e.key)) {\n            e.preventDefault()\n          }\n\n          inputRef.current?.focus()\n\n          if (!latest.isExpanded) {\n            setIsExpanded(true)\n          }\n        }\n\n        latest.handleKeyDownListBox(e)\n      },\n    }\n  }, [latest])\n\n  const caretIconColor = isFocused\n    ? theme.textColor.black\n    : disabled || readOnly\n      ? theme.textColor.disabled\n      : theme.textColor.grey\n\n  useClick(\n    [triggerRef, listBoxRef, clearButtonRef],\n    isFocused || selectedItem ? NOOP : functions.selectDefaultItem,\n    functions.unfocus,\n  )\n\n  // selectedItem.label はプリミティブ値でないデータ型の可能性があり、そのまま useEffect の依存配列に入れると意図せぬエフェクトの実行を引き起こしてしまう可能性があるので、プリミティブ値である string 型に変換したものを依存配列に入れています。\n  const selectedItemLabelText = innerText(selectedItem?.label)\n  useEffect(() => {\n    setInputValue(selectedItemLabelText)\n  }, [selectedItemLabelText])\n\n  const classNames = useMemo(() => {\n    const { wrapper, input, caretDownLayout, caretDownIcon, clearButton, clearButtonIcon } =\n      classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      input: input(),\n      caretDownLayout: caretDownLayout(),\n      caretDownIcon: caretDownIcon(),\n      clearButton: clearButton(),\n      clearButtonIcon: clearButtonIcon(),\n    }\n  }, [className])\n\n  return (\n    <div\n      ref={triggerRef}\n      role=\"group\"\n      className={classNames.wrapper}\n      style={{\n        ...style,\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n      data-clear-button-hidden={(selectedItem === null || disabled || readOnly || false).toString()}\n    >\n      <Input\n        {...rest}\n        ref={inputRef}\n        type=\"text\"\n        role=\"combobox\"\n        name={name}\n        value={inputValue}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        autoComplete={autoComplete ?? 'off'}\n        aria-haspopup=\"listbox\"\n        aria-controls={listBoxId}\n        aria-expanded={isFocused}\n        aria-activedescendant={activeOption?.id}\n        aria-autocomplete=\"list\"\n        /* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */\n        placeholder={placeholder}\n        onClick={functions.handleClickInput}\n        onChange={functions.handleChangeInput}\n        onFocus={isFocused ? undefined : functions.handleFocus}\n        onCompositionStart={functions.handleCompositionStart}\n        onCompositionEnd={functions.handleCompositionEnd}\n        onKeyDown={functions.handleKeyDownInput}\n        onKeyPress={functions.handleKeyPress}\n        error={error}\n        prefix={prefix}\n        suffix={\n          <SuffixButtons\n            clearButtonRef={clearButtonRef}\n            caretIconColor={caretIconColor}\n            handleClickClear={functions.handleClickClear}\n            handleClickIcon={functions.handleClickInput}\n            classNames={classNames}\n          />\n        }\n        className={classNames.input}\n        data-smarthr-ui-input=\"true\"\n      />\n      {!readOnly && <ListBox {...listBoxProps} />}\n    </div>\n  )\n}\n\nexport const SingleCombobox = genericsForwardRef(ActualSingleCombobox)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA;AAEA;AACA;AAEA;AACE;AACA;;AAGF;AACE;AACE;AAEA;AACA;;;;AAIC;AACD;AACA;;;;;;AAMC;AACD;;;AAGC;AACF;AACF;AAeD;AAiCA;AAmCE;AACA;AACA;AACA;;;;;;AAOA;AAMA;;AAEE;;;;AAID;AAED;;;;;;AAOI;AACE;AACA;;;;;;;;;;;AAYE;AACF;;;;;;;AAQH;;;;;;;;;;;;;;;;;;;;AAsBF;AAED;;;AAGM;;AAEJ;;;;AAIE;;;;AAMA;;;;AAGE;;AAEJ;;;;;AAMI;AACA;;AAGA;;;;AAIF;;;;AAMI;;;;;AAKD;;AAGC;AACA;AAEA;;;;;AAMJ;;;;;AAOE;AAEA;;;;AAIF;AACE;AACA;;;AAIA;;AAIA;AACE;AACA;;;AAGJ;AACA;;;;AAIA;AACE;;AAEA;;AAEF;AACE;;;;AAKE;;;;;AAIK;AACL;;;;;;AAMA;AAEA;;;;AAKF;;;AAGN;;AAGE;;AAEE;AACA;;;;;;AAYJ;AAEA;AACE;;AAIE;;;;;;;AAOJ;AAEA;AAMM;AACA;AACD;;;AA6CP;;;"}
+{"version":3,"file":"SingleCombobox.cjs","sources":["../../../../src/components/Combobox/SingleCombobox/SingleCombobox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useAnimationFrame } from '../../../hooks/useAnimationFrame'\nimport { useClick } from '../../../hooks/useClick'\nimport { useLatest } from '../../../hooks/useLatest'\nimport { useTheme } from '../../../hooks/useTheme'\nimport { Localizer } from '../../../intl'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { UnstyledButton } from '../../Button'\nimport { FaCaretDownIcon, FaCircleXmarkIcon } from '../../Icon'\nimport { Input } from '../../Input'\nimport { ListBox, useListbox } from '../useListbox'\nimport { useSingleOptions } from '../useOptions'\n\nimport type { ComboboxItem, BaseProps as ComboboxProps } from '../types'\n\ntype BaseProps<T> = ComboboxProps<T> & {\n  /**\n   * 選択されているアイテム\n   */\n  selectedItem: ComboboxItem<T> | null\n  /**\n   * デフォルトで選択されるアイテム\n   */\n  defaultItem?: ComboboxItem<T>\n  /**\n   * コンポーネント内の先頭に表示する内容\n   */\n  prefix?: ReactNode\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   */\n  onClear?: () => void\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   * 指定している場合、クリア時にonClickを実行せずにonClearClickのみ実行する\n   */\n  onClearClick?: (e: MouseEvent) => void\n  /**\n   * 選択されているアイテムのリストが変わった時に発火するコールバック関数\n   */\n  onChangeSelected?: (selectedItem: ComboboxItem<T> | null) => void\n  /**\n   * コンポーネントがフォーカスされたときに発火するコールバック関数\n   */\n  onFocus?: () => void\n  /**\n   * コンポーネントからフォーカスが外れた時に発火するコールバック関数\n   */\n  onBlur?: () => void\n  /**\n   * 検索結果が0件の時に表示するコンテンツ\n   */\n  noResultText?: ReactNode\n}\ntype Props<T> = BaseProps<T> & Omit<ComponentPropsWithoutRef<'input'>, keyof BaseProps<unknown>>\n\nconst NOOP = () => undefined\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_UP_DOWN_REGEX = /^(Arrow)?(Up|Down)$/\n\nconst EMPTY_INPUT_CHANGE_EVENT = {\n  currentTarget: { value: '' },\n  target: { value: '' },\n} as ChangeEvent<HTMLInputElement>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper:\n      'smarthr-ui-SingleCombobox shr-inline-block [&:has(.smarthr-ui-Input-input:disabled)]:shr-cursor-not-allowed',\n    input: 'smarthr-ui-SingleCombobox-input shr-w-full',\n    caretDownLayout: [\n      'shr-relative -shr-me-0.5 shr-p-0.5',\n      'before:shr-border-0',\n      'before:shr-absolute before:shr-inset-x-0 before:shr-inset-y-0.25 before:shr-w-0 before:shr-border-l before:shr-border-solid before:shr-border-default before:shr-content-[\"\"]',\n    ],\n    caretDownIcon: 'shr-block',\n    clearButton: [\n      'smarthr-ui-SingleCombobox-clearButton',\n      'shr-group/clearButton',\n      'shr-me-0.5',\n      'focus-visible:shr-shadow-none',\n      '[[data-clear-button-hidden=true]_&]:shr-hidden',\n    ],\n    clearButtonIcon: [\n      'shr-block',\n      'group-focus-visible/clearButton:shr-focus-indicator group-focus-visible/clearButton:shr-rounded-full',\n    ],\n  },\n})\n\ntype SuffixButtonsProps = {\n  clearButtonRef: RefObject<HTMLButtonElement>\n  caretIconColor: string\n  handleClickClear: (e: MouseEvent) => void\n  handleClickIcon: (e: MouseEvent) => void\n  classNames: {\n    clearButton: string\n    clearButtonIcon: string\n    caretDownLayout: string\n    caretDownIcon: string\n  }\n}\n\nconst SuffixButtons = memo<SuffixButtonsProps>(\n  ({\n    clearButtonRef,\n    caretIconColor,\n    handleClickClear,\n    handleClickIcon: handleDelegateClickIcon,\n    classNames,\n  }) => (\n    <>\n      <UnstyledButton\n        onClick={handleClickClear}\n        ref={clearButtonRef}\n        className={classNames.clearButton}\n      >\n        <FaCircleXmarkIcon\n          color=\"TEXT_BLACK\"\n          alt={\n            <Localizer id=\"smarthr-ui/SingleCombobox/destroyButtonIconAlt\" defaultText=\"クリア\" />\n          }\n          className={classNames.clearButtonIcon}\n        />\n      </UnstyledButton>\n      <span\n        role=\"presentation\"\n        onClick={handleDelegateClickIcon}\n        className={classNames.caretDownLayout}\n      >\n        <FaCaretDownIcon color={caretIconColor} className={classNames.caretDownIcon} />\n      </span>\n    </>\n  ),\n)\n\nconst ActualSingleCombobox = <T,>(\n  {\n    items,\n    selectedItem,\n    defaultItem,\n    name,\n    disabled,\n    readOnly,\n    required,\n    prefix,\n    error,\n    creatable,\n    placeholder,\n    autoComplete,\n    dropdownHelpMessage,\n    isLoading,\n    width,\n    dropdownWidth = 'auto',\n    className,\n    onChange,\n    onChangeInput,\n    onAdd,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    noResultText,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLInputElement>,\n) => {\n  const theme = useTheme()\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const clearButtonRef = useRef<HTMLButtonElement>(null)\n  const [isFocused, setIsFocused] = useState(false)\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [inputValue, setInputValue] = useState('')\n  const [isComposing, setIsComposing] = useState(false)\n  const [isEditing, setIsEditing] = useState(false)\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n    ref,\n    () => inputRef.current,\n    [],\n  )\n\n  const { options } = useSingleOptions({\n    items,\n    selected: selectedItem,\n    creatable,\n    inputValue,\n    isFilteringDisabled: !isEditing,\n  })\n\n  const selectFrame = useAnimationFrame()\n\n  const { listBoxProps, activeOption, handleKeyDownListBox, listBoxId, listBoxRef } = useListbox<T>(\n    {\n      options,\n      dropdownHelpMessage,\n      dropdownWidth,\n      onAdd,\n      // HINT: memo化していないが、内部でuseLatestでstableにしているため最適化としてそのまま渡している\n      onSelect: (selected: ComboboxItem<T>) => {\n        onSelect?.(selected)\n        onChangeSelected?.(selected)\n\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // 処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        selectFrame.request(() => {\n          setIsExpanded(false)\n          // HINT:\n          // - 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する\n          // - 対応するdropdownを閉じて以降にonChangeInputを発火する必要がある\n          //   - 先にclearしてしまうと意図せずこの要素のドロップダウンを閉じる前に他要素の再レンダリングを引き起こす可能性がある\n          //   - 例えばFilterDropdownなどで当comboboxを使っている場合、レイアウト上comboboxのdropdown以下の要素がクリックされた扱いになってしまい\n          //     FilterDropdownを意図せず閉じてしまうなどの挙動のバグを引き起こす可能性がある\n          onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n        })\n\n        setIsEditing(false)\n      },\n      isExpanded,\n      isLoading,\n      triggerRef,\n      noResultText,\n    },\n  )\n\n  // TODO: callbackRefにまとめ直したい\n  useEffect(() => selectFrame.cancel, [selectFrame.cancel])\n\n  const latest = useLatest({\n    onChange,\n    onChangeInput,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    handleKeyDownListBox,\n    defaultItem,\n    selectedItem,\n    isFocused,\n    isExpanded,\n    isComposing,\n    isEditing,\n    disabled,\n    readOnly,\n  })\n\n  const functions = useMemo(() => {\n    const selectDefaultItem = () => {\n      if (latest.onSelect && latest.defaultItem) {\n        latest.onSelect(latest.defaultItem)\n      }\n    }\n    const unfocus = () => {\n      if (!latest.isFocused) return\n\n      latest.onBlur?.()\n\n      setIsFocused(false)\n      setIsExpanded(false)\n      setIsEditing(false)\n\n      if (latest.selectedItem) {\n        setInputValue(innerText(latest.selectedItem.label))\n      } else {\n        selectDefaultItem()\n      }\n    }\n\n    return {\n      selectDefaultItem,\n      unfocus,\n      handleFocus: () => {\n        latest.onFocus?.()\n        inputRef.current?.focus()\n        setIsFocused(true)\n\n        if (!latest.isFocused) {\n          setIsExpanded(true)\n        }\n      },\n      handleClickClear: (e: MouseEvent) => {\n        e.stopPropagation()\n\n        let isExecutedPreventDefault = false\n\n        latest.onClearClick?.({\n          ...e,\n          preventDefault: () => {\n            e.preventDefault()\n            isExecutedPreventDefault = true\n          },\n        })\n\n        if (!isExecutedPreventDefault) {\n          latest.onClear?.()\n          latest.onChangeSelected?.(null)\n\n          inputRef.current?.focus()\n\n          setIsFocused(true)\n          setIsExpanded(true)\n        }\n      },\n      handleClickInput: (e: MouseEvent) => {\n        if (latest.disabled || latest.readOnly) {\n          e.stopPropagation()\n\n          return\n        }\n\n        inputRef.current?.focus()\n\n        if (!latest.isExpanded) {\n          setIsExpanded(true)\n        }\n      },\n      handleChangeInput: (e: ChangeEvent<HTMLInputElement>) => {\n        latest.onChange?.(e)\n        latest.onChangeInput?.(e)\n\n        if (!latest.isEditing) setIsEditing(true)\n\n        const { value } = e.currentTarget\n\n        setInputValue(value)\n\n        if (value === '') {\n          latest.onClear?.()\n          latest.onChangeSelected?.(null)\n        }\n      },\n      handleCompositionStart: () => setIsComposing(true),\n      handleCompositionEnd: () => setIsComposing(false),\n      // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n      // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n      // submitイベントが発生し、formが送信される場合がある\n      handleKeyPress: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter') e.preventDefault()\n\n        latest.onKeyPress?.(e)\n      },\n      handleKeyDownInput: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (latest.isComposing) {\n          return\n        }\n\n        if (ESCAPE_KEY_REGEX.test(e.key)) {\n          if (latest.isExpanded) {\n            e.stopPropagation()\n            setIsExpanded(false)\n          }\n        } else if (e.key === 'Tab') {\n          unfocus()\n        } else {\n          if (ARROW_UP_DOWN_REGEX.test(e.key)) {\n            e.preventDefault()\n          }\n\n          inputRef.current?.focus()\n\n          if (!latest.isExpanded) {\n            setIsExpanded(true)\n          }\n        }\n\n        latest.handleKeyDownListBox(e)\n      },\n    }\n  }, [latest])\n\n  const caretIconColor = isFocused\n    ? theme.textColor.black\n    : disabled || readOnly\n      ? theme.textColor.disabled\n      : theme.textColor.grey\n\n  useClick(\n    [triggerRef, listBoxRef, clearButtonRef],\n    isFocused || selectedItem ? NOOP : functions.selectDefaultItem,\n    functions.unfocus,\n  )\n\n  // selectedItem.label はプリミティブ値でないデータ型の可能性があり、そのまま useEffect の依存配列に入れると意図せぬエフェクトの実行を引き起こしてしまう可能性があるので、プリミティブ値である string 型に変換したものを依存配列に入れています。\n  const selectedItemLabelText = innerText(selectedItem?.label)\n  useEffect(() => {\n    setInputValue(selectedItemLabelText)\n  }, [selectedItemLabelText])\n\n  const classNames = useMemo(() => {\n    const { wrapper, input, caretDownLayout, caretDownIcon, clearButton, clearButtonIcon } =\n      classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      input: input(),\n      caretDownLayout: caretDownLayout(),\n      caretDownIcon: caretDownIcon(),\n      clearButton: clearButton(),\n      clearButtonIcon: clearButtonIcon(),\n    }\n  }, [className])\n\n  return (\n    <div\n      ref={triggerRef}\n      role=\"group\"\n      className={classNames.wrapper}\n      style={{\n        ...style,\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n      data-clear-button-hidden={(selectedItem === null || disabled || readOnly || false).toString()}\n    >\n      <Input\n        {...rest}\n        ref={inputRef}\n        type=\"text\"\n        role=\"combobox\"\n        name={name}\n        value={inputValue}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        autoComplete={autoComplete ?? 'off'}\n        aria-haspopup=\"listbox\"\n        aria-controls={listBoxId}\n        aria-expanded={isFocused}\n        aria-activedescendant={activeOption?.id}\n        aria-autocomplete=\"list\"\n        /* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */\n        placeholder={placeholder}\n        onClick={functions.handleClickInput}\n        onChange={functions.handleChangeInput}\n        onFocus={isFocused ? undefined : functions.handleFocus}\n        onCompositionStart={functions.handleCompositionStart}\n        onCompositionEnd={functions.handleCompositionEnd}\n        onKeyDown={functions.handleKeyDownInput}\n        onKeyPress={functions.handleKeyPress}\n        error={error}\n        prefix={prefix}\n        suffix={\n          <SuffixButtons\n            clearButtonRef={clearButtonRef}\n            caretIconColor={caretIconColor}\n            handleClickClear={functions.handleClickClear}\n            handleClickIcon={functions.handleClickInput}\n            classNames={classNames}\n          />\n        }\n        className={classNames.input}\n        data-smarthr-ui-input=\"true\"\n      />\n      {!readOnly && <ListBox {...listBoxProps} />}\n    </div>\n  )\n}\n\nexport const SingleCombobox = genericsForwardRef(ActualSingleCombobox)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA;AAEA;AACA;AAEA;AACE;AACA;;AAGF;AACE;AACE;AAEA;AACA;;;;AAIC;AACD;AACA;;;;;;AAMC;AACD;;;AAGC;AACF;AACF;AAeD;AAiCA;AAmCE;AACA;AACA;AACA;;;;;;AAOA;AAMA;;AAEE;;;;AAID;AAED;AAEA;;;;;;AAOI;AACE;AACA;;;AAIA;;;;;;;;AAQE;AACF;;;;;;;AAQH;;AAIH;;;;;;;;;;;;;;;;;;;;AAqBC;AAED;;;AAGM;;AAEJ;;;;AAIE;;;;AAMA;;;;AAGE;;AAEJ;;;;;AAMI;AACA;;AAGA;;;;AAIF;;;;AAMI;;;;;AAKD;;AAGC;AACA;AAEA;;;;;AAMJ;;;;;AAOE;AAEA;;;;AAIF;AACE;AACA;;;AAIA;;AAIA;AACE;AACA;;;AAGJ;AACA;;;;AAIA;AACE;;AAEA;;AAEF;AACE;;;;AAKE;;;;;AAIK;AACL;;;;;;AAMA;AAEA;;;;AAKF;;;AAGN;;AAGE;;AAEE;AACA;;;;;;AAYJ;AAEA;AACE;;AAIE;;;;;;;AAOJ;AAEA;AAMM;AACA;AACD;;;AA6CP;;;"}

package/lib/components/Combobox/SingleCombobox/SingleCombobox.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { memo, useRef, useState, useImperativeHandle, useMemo, useEffect } from 'react';
+import { memo, useRef, useState, useImperativeHandle, useEffect, useMemo } from 'react';
 import innerText from '../../../_virtual/index3.js';
-import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
+import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
+import { useAnimationFrame } from '../../../hooks/useAnimationFrame.js';
 import { useClick } from '../../../hooks/useClick.js';
 import { useLatest } from '../../../hooks/useLatest.js';
 import { useTheme } from '../../../hooks/useTheme.js';
@@ -73,6 +74,7 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
         inputValue,
         isFilteringDisabled: !isEditing,
     });
+    const selectFrame = useAnimationFrame();
     const { listBoxProps, activeOption, handleKeyDownListBox, listBoxId, listBoxRef } = useListbox({
         options,
         dropdownHelpMessage,
@@ -83,8 +85,8 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
             onSelect?.(selected);
             onChangeSelected?.(selected);
             // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう
-            // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする
-            requestAnimationFrame(() => {
+            // 処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする
+            selectFrame.request(() => {
                 setIsExpanded(false);
                 // HINT:
                 // - 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する
@@ -101,6 +103,8 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
         triggerRef,
         noResultText,
     });
+    // TODO: callbackRefにまとめ直したい
+    useEffect(() => selectFrame.cancel, [selectFrame.cancel]);
     const latest = useLatest({
         onChange,
         onChangeInput,

package/lib/components/Combobox/SingleCombobox/SingleCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleCombobox.js","sources":["../../../../src/components/Combobox/SingleCombobox/SingleCombobox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useClick } from '../../../hooks/useClick'\nimport { useLatest } from '../../../hooks/useLatest'\nimport { useTheme } from '../../../hooks/useTheme'\nimport { Localizer } from '../../../intl'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { UnstyledButton } from '../../Button'\nimport { FaCaretDownIcon, FaCircleXmarkIcon } from '../../Icon'\nimport { Input } from '../../Input'\nimport { ListBox, useListbox } from '../useListbox'\nimport { useSingleOptions } from '../useOptions'\n\nimport type { ComboboxItem, BaseProps as ComboboxProps } from '../types'\n\ntype BaseProps<T> = ComboboxProps<T> & {\n  /**\n   * 選択されているアイテム\n   */\n  selectedItem: ComboboxItem<T> | null\n  /**\n   * デフォルトで選択されるアイテム\n   */\n  defaultItem?: ComboboxItem<T>\n  /**\n   * コンポーネント内の先頭に表示する内容\n   */\n  prefix?: ReactNode\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   */\n  onClear?: () => void\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   * 指定している場合、クリア時にonClickを実行せずにonClearClickのみ実行する\n   */\n  onClearClick?: (e: MouseEvent) => void\n  /**\n   * 選択されているアイテムのリストが変わった時に発火するコールバック関数\n   */\n  onChangeSelected?: (selectedItem: ComboboxItem<T> | null) => void\n  /**\n   * コンポーネントがフォーカスされたときに発火するコールバック関数\n   */\n  onFocus?: () => void\n  /**\n   * コンポーネントからフォーカスが外れた時に発火するコールバック関数\n   */\n  onBlur?: () => void\n  /**\n   * 検索結果が0件の時に表示するコンテンツ\n   */\n  noResultText?: ReactNode\n}\ntype Props<T> = BaseProps<T> & Omit<ComponentPropsWithoutRef<'input'>, keyof BaseProps<unknown>>\n\nconst NOOP = () => undefined\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_UP_DOWN_REGEX = /^(Arrow)?(Up|Down)$/\n\nconst EMPTY_INPUT_CHANGE_EVENT = {\n  currentTarget: { value: '' },\n  target: { value: '' },\n} as ChangeEvent<HTMLInputElement>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper:\n      'smarthr-ui-SingleCombobox shr-inline-block [&:has(.smarthr-ui-Input-input:disabled)]:shr-cursor-not-allowed',\n    input: 'smarthr-ui-SingleCombobox-input shr-w-full',\n    caretDownLayout: [\n      'shr-relative -shr-me-0.5 shr-p-0.5',\n      'before:shr-border-0',\n      'before:shr-absolute before:shr-inset-x-0 before:shr-inset-y-0.25 before:shr-w-0 before:shr-border-l before:shr-border-solid before:shr-border-default before:shr-content-[\"\"]',\n    ],\n    caretDownIcon: 'shr-block',\n    clearButton: [\n      'smarthr-ui-SingleCombobox-clearButton',\n      'shr-group/clearButton',\n      'shr-me-0.5',\n      'focus-visible:shr-shadow-none',\n      '[[data-clear-button-hidden=true]_&]:shr-hidden',\n    ],\n    clearButtonIcon: [\n      'shr-block',\n      'group-focus-visible/clearButton:shr-focus-indicator group-focus-visible/clearButton:shr-rounded-full',\n    ],\n  },\n})\n\ntype SuffixButtonsProps = {\n  clearButtonRef: RefObject<HTMLButtonElement>\n  caretIconColor: string\n  handleClickClear: (e: MouseEvent) => void\n  handleClickIcon: (e: MouseEvent) => void\n  classNames: {\n    clearButton: string\n    clearButtonIcon: string\n    caretDownLayout: string\n    caretDownIcon: string\n  }\n}\n\nconst SuffixButtons = memo<SuffixButtonsProps>(\n  ({\n    clearButtonRef,\n    caretIconColor,\n    handleClickClear,\n    handleClickIcon: handleDelegateClickIcon,\n    classNames,\n  }) => (\n    <>\n      <UnstyledButton\n        onClick={handleClickClear}\n        ref={clearButtonRef}\n        className={classNames.clearButton}\n      >\n        <FaCircleXmarkIcon\n          color=\"TEXT_BLACK\"\n          alt={\n            <Localizer id=\"smarthr-ui/SingleCombobox/destroyButtonIconAlt\" defaultText=\"クリア\" />\n          }\n          className={classNames.clearButtonIcon}\n        />\n      </UnstyledButton>\n      <span\n        role=\"presentation\"\n        onClick={handleDelegateClickIcon}\n        className={classNames.caretDownLayout}\n      >\n        <FaCaretDownIcon color={caretIconColor} className={classNames.caretDownIcon} />\n      </span>\n    </>\n  ),\n)\n\nconst ActualSingleCombobox = <T,>(\n  {\n    items,\n    selectedItem,\n    defaultItem,\n    name,\n    disabled,\n    readOnly,\n    required,\n    prefix,\n    error,\n    creatable,\n    placeholder,\n    autoComplete,\n    dropdownHelpMessage,\n    isLoading,\n    width,\n    dropdownWidth = 'auto',\n    className,\n    onChange,\n    onChangeInput,\n    onAdd,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    noResultText,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLInputElement>,\n) => {\n  const theme = useTheme()\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const clearButtonRef = useRef<HTMLButtonElement>(null)\n  const [isFocused, setIsFocused] = useState(false)\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [inputValue, setInputValue] = useState('')\n  const [isComposing, setIsComposing] = useState(false)\n  const [isEditing, setIsEditing] = useState(false)\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n    ref,\n    () => inputRef.current,\n    [],\n  )\n\n  const { options } = useSingleOptions({\n    items,\n    selected: selectedItem,\n    creatable,\n    inputValue,\n    isFilteringDisabled: !isEditing,\n  })\n\n  const { listBoxProps, activeOption, handleKeyDownListBox, listBoxId, listBoxRef } = useListbox<T>(\n    {\n      options,\n      dropdownHelpMessage,\n      dropdownWidth,\n      onAdd,\n      // HINT: memo化していないが、内部でuseLatestでstableにしているため最適化としてそのまま渡している\n      onSelect: (selected: ComboboxItem<T>) => {\n        onSelect?.(selected)\n        onChangeSelected?.(selected)\n\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          setIsExpanded(false)\n          // HINT:\n          // - 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する\n          // - 対応するdropdownを閉じて以降にonChangeInputを発火する必要がある\n          //   - 先にclearしてしまうと意図せずこの要素のドロップダウンを閉じる前に他要素の再レンダリングを引き起こす可能性がある\n          //   - 例えばFilterDropdownなどで当comboboxを使っている場合、レイアウト上comboboxのdropdown以下の要素がクリックされた扱いになってしまい\n          //     FilterDropdownを意図せず閉じてしまうなどの挙動のバグを引き起こす可能性がある\n          onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n        })\n\n        setIsEditing(false)\n      },\n      isExpanded,\n      isLoading,\n      triggerRef,\n      noResultText,\n    },\n  )\n\n  const latest = useLatest({\n    onChange,\n    onChangeInput,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    handleKeyDownListBox,\n    defaultItem,\n    selectedItem,\n    isFocused,\n    isExpanded,\n    isComposing,\n    isEditing,\n    disabled,\n    readOnly,\n  })\n\n  const functions = useMemo(() => {\n    const selectDefaultItem = () => {\n      if (latest.onSelect && latest.defaultItem) {\n        latest.onSelect(latest.defaultItem)\n      }\n    }\n    const unfocus = () => {\n      if (!latest.isFocused) return\n\n      latest.onBlur?.()\n\n      setIsFocused(false)\n      setIsExpanded(false)\n      setIsEditing(false)\n\n      if (latest.selectedItem) {\n        setInputValue(innerText(latest.selectedItem.label))\n      } else {\n        selectDefaultItem()\n      }\n    }\n\n    return {\n      selectDefaultItem,\n      unfocus,\n      handleFocus: () => {\n        latest.onFocus?.()\n        inputRef.current?.focus()\n        setIsFocused(true)\n\n        if (!latest.isFocused) {\n          setIsExpanded(true)\n        }\n      },\n      handleClickClear: (e: MouseEvent) => {\n        e.stopPropagation()\n\n        let isExecutedPreventDefault = false\n\n        latest.onClearClick?.({\n          ...e,\n          preventDefault: () => {\n            e.preventDefault()\n            isExecutedPreventDefault = true\n          },\n        })\n\n        if (!isExecutedPreventDefault) {\n          latest.onClear?.()\n          latest.onChangeSelected?.(null)\n\n          inputRef.current?.focus()\n\n          setIsFocused(true)\n          setIsExpanded(true)\n        }\n      },\n      handleClickInput: (e: MouseEvent) => {\n        if (latest.disabled || latest.readOnly) {\n          e.stopPropagation()\n\n          return\n        }\n\n        inputRef.current?.focus()\n\n        if (!latest.isExpanded) {\n          setIsExpanded(true)\n        }\n      },\n      handleChangeInput: (e: ChangeEvent<HTMLInputElement>) => {\n        latest.onChange?.(e)\n        latest.onChangeInput?.(e)\n\n        if (!latest.isEditing) setIsEditing(true)\n\n        const { value } = e.currentTarget\n\n        setInputValue(value)\n\n        if (value === '') {\n          latest.onClear?.()\n          latest.onChangeSelected?.(null)\n        }\n      },\n      handleCompositionStart: () => setIsComposing(true),\n      handleCompositionEnd: () => setIsComposing(false),\n      // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n      // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n      // submitイベントが発生し、formが送信される場合がある\n      handleKeyPress: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter') e.preventDefault()\n\n        latest.onKeyPress?.(e)\n      },\n      handleKeyDownInput: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (latest.isComposing) {\n          return\n        }\n\n        if (ESCAPE_KEY_REGEX.test(e.key)) {\n          if (latest.isExpanded) {\n            e.stopPropagation()\n            setIsExpanded(false)\n          }\n        } else if (e.key === 'Tab') {\n          unfocus()\n        } else {\n          if (ARROW_UP_DOWN_REGEX.test(e.key)) {\n            e.preventDefault()\n          }\n\n          inputRef.current?.focus()\n\n          if (!latest.isExpanded) {\n            setIsExpanded(true)\n          }\n        }\n\n        latest.handleKeyDownListBox(e)\n      },\n    }\n  }, [latest])\n\n  const caretIconColor = isFocused\n    ? theme.textColor.black\n    : disabled || readOnly\n      ? theme.textColor.disabled\n      : theme.textColor.grey\n\n  useClick(\n    [triggerRef, listBoxRef, clearButtonRef],\n    isFocused || selectedItem ? NOOP : functions.selectDefaultItem,\n    functions.unfocus,\n  )\n\n  // selectedItem.label はプリミティブ値でないデータ型の可能性があり、そのまま useEffect の依存配列に入れると意図せぬエフェクトの実行を引き起こしてしまう可能性があるので、プリミティブ値である string 型に変換したものを依存配列に入れています。\n  const selectedItemLabelText = innerText(selectedItem?.label)\n  useEffect(() => {\n    setInputValue(selectedItemLabelText)\n  }, [selectedItemLabelText])\n\n  const classNames = useMemo(() => {\n    const { wrapper, input, caretDownLayout, caretDownIcon, clearButton, clearButtonIcon } =\n      classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      input: input(),\n      caretDownLayout: caretDownLayout(),\n      caretDownIcon: caretDownIcon(),\n      clearButton: clearButton(),\n      clearButtonIcon: clearButtonIcon(),\n    }\n  }, [className])\n\n  return (\n    <div\n      ref={triggerRef}\n      role=\"group\"\n      className={classNames.wrapper}\n      style={{\n        ...style,\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n      data-clear-button-hidden={(selectedItem === null || disabled || readOnly || false).toString()}\n    >\n      <Input\n        {...rest}\n        ref={inputRef}\n        type=\"text\"\n        role=\"combobox\"\n        name={name}\n        value={inputValue}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        autoComplete={autoComplete ?? 'off'}\n        aria-haspopup=\"listbox\"\n        aria-controls={listBoxId}\n        aria-expanded={isFocused}\n        aria-activedescendant={activeOption?.id}\n        aria-autocomplete=\"list\"\n        /* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */\n        placeholder={placeholder}\n        onClick={functions.handleClickInput}\n        onChange={functions.handleChangeInput}\n        onFocus={isFocused ? undefined : functions.handleFocus}\n        onCompositionStart={functions.handleCompositionStart}\n        onCompositionEnd={functions.handleCompositionEnd}\n        onKeyDown={functions.handleKeyDownInput}\n        onKeyPress={functions.handleKeyPress}\n        error={error}\n        prefix={prefix}\n        suffix={\n          <SuffixButtons\n            clearButtonRef={clearButtonRef}\n            caretIconColor={caretIconColor}\n            handleClickClear={functions.handleClickClear}\n            handleClickIcon={functions.handleClickInput}\n            classNames={classNames}\n          />\n        }\n        className={classNames.input}\n        data-smarthr-ui-input=\"true\"\n      />\n      {!readOnly && <ListBox {...listBoxProps} />}\n    </div>\n  )\n}\n\nexport const SingleCombobox = genericsForwardRef(ActualSingleCombobox)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA;AAEA;AACA;AAEA;AACE;AACA;;AAGF;AACE;AACE;AAEA;AACA;;;;AAIC;AACD;AACA;;;;;;AAMC;AACD;;;AAGC;AACF;AACF;AAeD;AAiCA;AAmCE;AACA;AACA;AACA;;;;;;AAOA;AAMA;;AAEE;;;;AAID;AAED;;;;;;AAOI;AACE;AACA;;;;;;;;;;;AAYE;AACF;;;;;;;AAQH;;;;;;;;;;;;;;;;;;;;AAsBF;AAED;;;AAGM;;AAEJ;;;;AAIE;;;;AAMA;;;;AAGE;;AAEJ;;;;;AAMI;AACA;;AAGA;;;;AAIF;;;;AAMI;;;;;AAKD;;AAGC;AACA;AAEA;;;;;AAMJ;;;;;AAOE;AAEA;;;;AAIF;AACE;AACA;;;AAIA;;AAIA;AACE;AACA;;;AAGJ;AACA;;;;AAIA;AACE;;AAEA;;AAEF;AACE;;;;AAKE;;;;;AAIK;AACL;;;;;;AAMA;AAEA;;;;AAKF;;;AAGN;;AAGE;;AAEE;AACA;;;;;;AAYJ;AAEA;AACE;;AAIE;;;;;;;AAOJ;AAEA;AAMM;AACA;AACD;;;AA6CP;;;"}
+{"version":3,"file":"SingleCombobox.js","sources":["../../../../src/components/Combobox/SingleCombobox/SingleCombobox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useAnimationFrame } from '../../../hooks/useAnimationFrame'\nimport { useClick } from '../../../hooks/useClick'\nimport { useLatest } from '../../../hooks/useLatest'\nimport { useTheme } from '../../../hooks/useTheme'\nimport { Localizer } from '../../../intl'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { UnstyledButton } from '../../Button'\nimport { FaCaretDownIcon, FaCircleXmarkIcon } from '../../Icon'\nimport { Input } from '../../Input'\nimport { ListBox, useListbox } from '../useListbox'\nimport { useSingleOptions } from '../useOptions'\n\nimport type { ComboboxItem, BaseProps as ComboboxProps } from '../types'\n\ntype BaseProps<T> = ComboboxProps<T> & {\n  /**\n   * 選択されているアイテム\n   */\n  selectedItem: ComboboxItem<T> | null\n  /**\n   * デフォルトで選択されるアイテム\n   */\n  defaultItem?: ComboboxItem<T>\n  /**\n   * コンポーネント内の先頭に表示する内容\n   */\n  prefix?: ReactNode\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   */\n  onClear?: () => void\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   * 指定している場合、クリア時にonClickを実行せずにonClearClickのみ実行する\n   */\n  onClearClick?: (e: MouseEvent) => void\n  /**\n   * 選択されているアイテムのリストが変わった時に発火するコールバック関数\n   */\n  onChangeSelected?: (selectedItem: ComboboxItem<T> | null) => void\n  /**\n   * コンポーネントがフォーカスされたときに発火するコールバック関数\n   */\n  onFocus?: () => void\n  /**\n   * コンポーネントからフォーカスが外れた時に発火するコールバック関数\n   */\n  onBlur?: () => void\n  /**\n   * 検索結果が0件の時に表示するコンテンツ\n   */\n  noResultText?: ReactNode\n}\ntype Props<T> = BaseProps<T> & Omit<ComponentPropsWithoutRef<'input'>, keyof BaseProps<unknown>>\n\nconst NOOP = () => undefined\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_UP_DOWN_REGEX = /^(Arrow)?(Up|Down)$/\n\nconst EMPTY_INPUT_CHANGE_EVENT = {\n  currentTarget: { value: '' },\n  target: { value: '' },\n} as ChangeEvent<HTMLInputElement>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper:\n      'smarthr-ui-SingleCombobox shr-inline-block [&:has(.smarthr-ui-Input-input:disabled)]:shr-cursor-not-allowed',\n    input: 'smarthr-ui-SingleCombobox-input shr-w-full',\n    caretDownLayout: [\n      'shr-relative -shr-me-0.5 shr-p-0.5',\n      'before:shr-border-0',\n      'before:shr-absolute before:shr-inset-x-0 before:shr-inset-y-0.25 before:shr-w-0 before:shr-border-l before:shr-border-solid before:shr-border-default before:shr-content-[\"\"]',\n    ],\n    caretDownIcon: 'shr-block',\n    clearButton: [\n      'smarthr-ui-SingleCombobox-clearButton',\n      'shr-group/clearButton',\n      'shr-me-0.5',\n      'focus-visible:shr-shadow-none',\n      '[[data-clear-button-hidden=true]_&]:shr-hidden',\n    ],\n    clearButtonIcon: [\n      'shr-block',\n      'group-focus-visible/clearButton:shr-focus-indicator group-focus-visible/clearButton:shr-rounded-full',\n    ],\n  },\n})\n\ntype SuffixButtonsProps = {\n  clearButtonRef: RefObject<HTMLButtonElement>\n  caretIconColor: string\n  handleClickClear: (e: MouseEvent) => void\n  handleClickIcon: (e: MouseEvent) => void\n  classNames: {\n    clearButton: string\n    clearButtonIcon: string\n    caretDownLayout: string\n    caretDownIcon: string\n  }\n}\n\nconst SuffixButtons = memo<SuffixButtonsProps>(\n  ({\n    clearButtonRef,\n    caretIconColor,\n    handleClickClear,\n    handleClickIcon: handleDelegateClickIcon,\n    classNames,\n  }) => (\n    <>\n      <UnstyledButton\n        onClick={handleClickClear}\n        ref={clearButtonRef}\n        className={classNames.clearButton}\n      >\n        <FaCircleXmarkIcon\n          color=\"TEXT_BLACK\"\n          alt={\n            <Localizer id=\"smarthr-ui/SingleCombobox/destroyButtonIconAlt\" defaultText=\"クリア\" />\n          }\n          className={classNames.clearButtonIcon}\n        />\n      </UnstyledButton>\n      <span\n        role=\"presentation\"\n        onClick={handleDelegateClickIcon}\n        className={classNames.caretDownLayout}\n      >\n        <FaCaretDownIcon color={caretIconColor} className={classNames.caretDownIcon} />\n      </span>\n    </>\n  ),\n)\n\nconst ActualSingleCombobox = <T,>(\n  {\n    items,\n    selectedItem,\n    defaultItem,\n    name,\n    disabled,\n    readOnly,\n    required,\n    prefix,\n    error,\n    creatable,\n    placeholder,\n    autoComplete,\n    dropdownHelpMessage,\n    isLoading,\n    width,\n    dropdownWidth = 'auto',\n    className,\n    onChange,\n    onChangeInput,\n    onAdd,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    noResultText,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLInputElement>,\n) => {\n  const theme = useTheme()\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const clearButtonRef = useRef<HTMLButtonElement>(null)\n  const [isFocused, setIsFocused] = useState(false)\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [inputValue, setInputValue] = useState('')\n  const [isComposing, setIsComposing] = useState(false)\n  const [isEditing, setIsEditing] = useState(false)\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n    ref,\n    () => inputRef.current,\n    [],\n  )\n\n  const { options } = useSingleOptions({\n    items,\n    selected: selectedItem,\n    creatable,\n    inputValue,\n    isFilteringDisabled: !isEditing,\n  })\n\n  const selectFrame = useAnimationFrame()\n\n  const { listBoxProps, activeOption, handleKeyDownListBox, listBoxId, listBoxRef } = useListbox<T>(\n    {\n      options,\n      dropdownHelpMessage,\n      dropdownWidth,\n      onAdd,\n      // HINT: memo化していないが、内部でuseLatestでstableにしているため最適化としてそのまま渡している\n      onSelect: (selected: ComboboxItem<T>) => {\n        onSelect?.(selected)\n        onChangeSelected?.(selected)\n\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // 処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        selectFrame.request(() => {\n          setIsExpanded(false)\n          // HINT:\n          // - 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する\n          // - 対応するdropdownを閉じて以降にonChangeInputを発火する必要がある\n          //   - 先にclearしてしまうと意図せずこの要素のドロップダウンを閉じる前に他要素の再レンダリングを引き起こす可能性がある\n          //   - 例えばFilterDropdownなどで当comboboxを使っている場合、レイアウト上comboboxのdropdown以下の要素がクリックされた扱いになってしまい\n          //     FilterDropdownを意図せず閉じてしまうなどの挙動のバグを引き起こす可能性がある\n          onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n        })\n\n        setIsEditing(false)\n      },\n      isExpanded,\n      isLoading,\n      triggerRef,\n      noResultText,\n    },\n  )\n\n  // TODO: callbackRefにまとめ直したい\n  useEffect(() => selectFrame.cancel, [selectFrame.cancel])\n\n  const latest = useLatest({\n    onChange,\n    onChangeInput,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    handleKeyDownListBox,\n    defaultItem,\n    selectedItem,\n    isFocused,\n    isExpanded,\n    isComposing,\n    isEditing,\n    disabled,\n    readOnly,\n  })\n\n  const functions = useMemo(() => {\n    const selectDefaultItem = () => {\n      if (latest.onSelect && latest.defaultItem) {\n        latest.onSelect(latest.defaultItem)\n      }\n    }\n    const unfocus = () => {\n      if (!latest.isFocused) return\n\n      latest.onBlur?.()\n\n      setIsFocused(false)\n      setIsExpanded(false)\n      setIsEditing(false)\n\n      if (latest.selectedItem) {\n        setInputValue(innerText(latest.selectedItem.label))\n      } else {\n        selectDefaultItem()\n      }\n    }\n\n    return {\n      selectDefaultItem,\n      unfocus,\n      handleFocus: () => {\n        latest.onFocus?.()\n        inputRef.current?.focus()\n        setIsFocused(true)\n\n        if (!latest.isFocused) {\n          setIsExpanded(true)\n        }\n      },\n      handleClickClear: (e: MouseEvent) => {\n        e.stopPropagation()\n\n        let isExecutedPreventDefault = false\n\n        latest.onClearClick?.({\n          ...e,\n          preventDefault: () => {\n            e.preventDefault()\n            isExecutedPreventDefault = true\n          },\n        })\n\n        if (!isExecutedPreventDefault) {\n          latest.onClear?.()\n          latest.onChangeSelected?.(null)\n\n          inputRef.current?.focus()\n\n          setIsFocused(true)\n          setIsExpanded(true)\n        }\n      },\n      handleClickInput: (e: MouseEvent) => {\n        if (latest.disabled || latest.readOnly) {\n          e.stopPropagation()\n\n          return\n        }\n\n        inputRef.current?.focus()\n\n        if (!latest.isExpanded) {\n          setIsExpanded(true)\n        }\n      },\n      handleChangeInput: (e: ChangeEvent<HTMLInputElement>) => {\n        latest.onChange?.(e)\n        latest.onChangeInput?.(e)\n\n        if (!latest.isEditing) setIsEditing(true)\n\n        const { value } = e.currentTarget\n\n        setInputValue(value)\n\n        if (value === '') {\n          latest.onClear?.()\n          latest.onChangeSelected?.(null)\n        }\n      },\n      handleCompositionStart: () => setIsComposing(true),\n      handleCompositionEnd: () => setIsComposing(false),\n      // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n      // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n      // submitイベントが発生し、formが送信される場合がある\n      handleKeyPress: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter') e.preventDefault()\n\n        latest.onKeyPress?.(e)\n      },\n      handleKeyDownInput: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (latest.isComposing) {\n          return\n        }\n\n        if (ESCAPE_KEY_REGEX.test(e.key)) {\n          if (latest.isExpanded) {\n            e.stopPropagation()\n            setIsExpanded(false)\n          }\n        } else if (e.key === 'Tab') {\n          unfocus()\n        } else {\n          if (ARROW_UP_DOWN_REGEX.test(e.key)) {\n            e.preventDefault()\n          }\n\n          inputRef.current?.focus()\n\n          if (!latest.isExpanded) {\n            setIsExpanded(true)\n          }\n        }\n\n        latest.handleKeyDownListBox(e)\n      },\n    }\n  }, [latest])\n\n  const caretIconColor = isFocused\n    ? theme.textColor.black\n    : disabled || readOnly\n      ? theme.textColor.disabled\n      : theme.textColor.grey\n\n  useClick(\n    [triggerRef, listBoxRef, clearButtonRef],\n    isFocused || selectedItem ? NOOP : functions.selectDefaultItem,\n    functions.unfocus,\n  )\n\n  // selectedItem.label はプリミティブ値でないデータ型の可能性があり、そのまま useEffect の依存配列に入れると意図せぬエフェクトの実行を引き起こしてしまう可能性があるので、プリミティブ値である string 型に変換したものを依存配列に入れています。\n  const selectedItemLabelText = innerText(selectedItem?.label)\n  useEffect(() => {\n    setInputValue(selectedItemLabelText)\n  }, [selectedItemLabelText])\n\n  const classNames = useMemo(() => {\n    const { wrapper, input, caretDownLayout, caretDownIcon, clearButton, clearButtonIcon } =\n      classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      input: input(),\n      caretDownLayout: caretDownLayout(),\n      caretDownIcon: caretDownIcon(),\n      clearButton: clearButton(),\n      clearButtonIcon: clearButtonIcon(),\n    }\n  }, [className])\n\n  return (\n    <div\n      ref={triggerRef}\n      role=\"group\"\n      className={classNames.wrapper}\n      style={{\n        ...style,\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n      data-clear-button-hidden={(selectedItem === null || disabled || readOnly || false).toString()}\n    >\n      <Input\n        {...rest}\n        ref={inputRef}\n        type=\"text\"\n        role=\"combobox\"\n        name={name}\n        value={inputValue}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        autoComplete={autoComplete ?? 'off'}\n        aria-haspopup=\"listbox\"\n        aria-controls={listBoxId}\n        aria-expanded={isFocused}\n        aria-activedescendant={activeOption?.id}\n        aria-autocomplete=\"list\"\n        /* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */\n        placeholder={placeholder}\n        onClick={functions.handleClickInput}\n        onChange={functions.handleChangeInput}\n        onFocus={isFocused ? undefined : functions.handleFocus}\n        onCompositionStart={functions.handleCompositionStart}\n        onCompositionEnd={functions.handleCompositionEnd}\n        onKeyDown={functions.handleKeyDownInput}\n        onKeyPress={functions.handleKeyPress}\n        error={error}\n        prefix={prefix}\n        suffix={\n          <SuffixButtons\n            clearButtonRef={clearButtonRef}\n            caretIconColor={caretIconColor}\n            handleClickClear={functions.handleClickClear}\n            handleClickIcon={functions.handleClickInput}\n            classNames={classNames}\n          />\n        }\n        className={classNames.input}\n        data-smarthr-ui-input=\"true\"\n      />\n      {!readOnly && <ListBox {...listBoxProps} />}\n    </div>\n  )\n}\n\nexport const SingleCombobox = genericsForwardRef(ActualSingleCombobox)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA;AAEA;AACA;AAEA;AACE;AACA;;AAGF;AACE;AACE;AAEA;AACA;;;;AAIC;AACD;AACA;;;;;;AAMC;AACD;;;AAGC;AACF;AACF;AAeD;AAiCA;AAmCE;AACA;AACA;AACA;;;;;;AAOA;AAMA;;AAEE;;;;AAID;AAED;AAEA;;;;;;AAOI;AACE;AACA;;;AAIA;;;;;;;;AAQE;AACF;;;;;;;AAQH;;AAIH;;;;;;;;;;;;;;;;;;;;AAqBC;AAED;;;AAGM;;AAEJ;;;;AAIE;;;;AAMA;;;;AAGE;;AAEJ;;;;;AAMI;AACA;;AAGA;;;;AAIF;;;;AAMI;;;;;AAKD;;AAGC;AACA;AAEA;;;;;AAMJ;;;;;AAOE;AAEA;;;;AAIF;AACE;AACA;;;AAIA;;AAIA;AACE;AACA;;;AAGJ;AACA;;;;AAIA;AACE;;AAEA;;AAEF;AACE;;;;AAKE;;;;;AAIK;AACL;;;;;;AAMA;AAEA;;;;AAKF;;;AAGN;;AAGE;;AAEE;AACA;;;;;;AAYJ;AAEA;AACE;;AAIE;;;;;;;AAOJ;AAEA;AAMM;AACA;AACD;;;AA6CP;;;"}

package/lib/components/Combobox/useListbox.cjs

@@ -3,7 +3,8 @@
 
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.cjs');
+var hooks_useAnimationFrame = require('../../hooks/useAnimationFrame.cjs');
 var hooks_useEnhancedEffect = require('../../hooks/useEnhancedEffect.cjs');
 var hooks_useLatest = require('../../hooks/useLatest.cjs');
 var hooks_usePortal = require('../../hooks/usePortal.cjs');
@@ -65,7 +66,8 @@ const useListbox = ({ options, dropdownHelpMessage, dropdownWidth, onAdd, onSele
     const listBoxRef = React.useRef(null);
     const activeRef = React.useRef(null);
     const theme = hooks_useTheme.useTheme();
-    const latest = hooks_useLatest.useLatest({ onAdd, onSelect, activeOption, options, triggerRef, theme });
+    const addFrame = hooks_useAnimationFrame.useAnimationFrame();
+    const latest = hooks_useLatest.useLatest({ onAdd, onSelect, activeOption, options, triggerRef, theme, addFrame });
     const hasOnAdd = !!onAdd;
     const functions = React.useMemo(() => {
         const moveActiveOptionIndex = (currentActive, delta) => {
@@ -176,8 +178,8 @@ const useListbox = ({ options, dropdownHelpMessage, dropdownWidth, onAdd, onSele
             handleAdd: hasOnAdd
                 ? (option) => {
                     // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう
-                    // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする
-                    requestAnimationFrame(() => {
+                    // 処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする
+                    latest.addFrame.request(() => {
                         latest.onAdd(option.item.value);
                     });
                 }
@@ -191,6 +193,8 @@ const useListbox = ({ options, dropdownHelpMessage, dropdownWidth, onAdd, onSele
             },
         };
     }, [hasOnAdd, latest]);
+    // TODO: callbackRefにまとめ直したい
+    React.useEffect(() => addFrame.cancel, [addFrame.cancel]);
     React.useEffect(() => {
         // props の変更によって activeOption の状態が変わりうるので、実態を反映する
         setActiveOption((current) => {

package/lib/components/Combobox/useListbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useListbox.cjs","sources":["../../../src/components/Combobox/useListbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type RefObject,\n  memo,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useEnhancedEffect } from '../../hooks/useEnhancedEffect'\nimport { useLatest } from '../../hooks/useLatest'\nimport { usePortal } from '../../hooks/usePortal'\nimport { useTheme } from '../../hooks/useTheme'\nimport { Localizer } from '../../intl'\nimport { findDelegateTarget } from '../../libs/delegate'\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Loader } from '../Loader'\nimport { Scroller } from '../Scroller'\nimport { Text } from '../Text'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport { ItemButton } from './ItemButton'\n\nimport type { ComboboxItem, ComboboxOption } from './types'\n\ntype Props<T> = {\n  options: Array<ComboboxOption<T>>\n  dropdownHelpMessage?: ReactNode\n  dropdownWidth?: string | number\n  onAdd?: (label: string) => void\n  onSelect: (item: ComboboxItem<T>) => void\n  isExpanded: boolean\n  isLoading?: boolean\n  triggerRef: RefObject<HTMLElement>\n  /** 検索結果が0件の時に表示するコンテンツ */\n  noResultText?: ReactNode\n}\n\ntype Rect = {\n  top: number\n  left: number\n  height?: number\n}\n\nconst KEY_DOWN_REGEX = /^(Arrow)?Down$/\nconst KEY_UP_REGEX = /^(Arrow)?Up/\n\nconst OPTION_INCREMENT_AMOUNT = 100\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'shr-absolute',\n    dropdownList: [\n      'smarthr-ui-Combobox-dropdownList',\n      'shr-absolute shr-z-overlap shr-box-border shr-min-w-full shr-rounded-m shr-bg-white shr-py-0.5 shr-shadow-layer-3 forced-colors:shr-outline forced-colors:shr-outline-1',\n      /* 縦スクロールに気づきやすくするために8個目のアイテムが半分見切れるように max-height を算出\n      = (アイテムのフォントサイズ + アイテムの上下padding) * 7.5 + コンテナの上padding */\n      'shr-max-h-[calc((theme(fontSize.base)_+_theme(spacing[0.5])_*_2)_*_7.5_+_theme(spacing[0.5]))]',\n      'aria-hidden:shr-hidden',\n    ],\n    helpMessage:\n      'shr-whitespace-[initial] shr-border-b-shorthand shr-mx-0.5 shr-mb-0.5 shr-mt-0 shr-px-0.5 shr-pb-0.5 shr-pt-0 shr-text-sm',\n    loaderWrapper: 'shr-flex shr-items-center shr-justify-center shr-p-1',\n    noItems: 'smarthr-ui-Combobox-noItems shr-my-0 shr-bg-white shr-px-1 shr-py-0.5 shr-text-base',\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { wrapper, dropdownList, helpMessage, loaderWrapper, noItems } = classNameGenerator()\n\n  return {\n    wrapper: wrapper(),\n    dropdownList: dropdownList(),\n    helpMessage: helpMessage(),\n    loaderWrapper: loaderWrapper(),\n    noItems: noItems(),\n  }\n})()\n\nexport const useListbox = <T,>({\n  options,\n  dropdownHelpMessage,\n  dropdownWidth,\n  onAdd,\n  onSelect,\n  isExpanded,\n  isLoading,\n  triggerRef,\n  noResultText,\n}: Props<T>) => {\n  const listBoxId = useId()\n\n  const [navigationType, setNavigationType] = useState<'pointer' | 'key'>('pointer')\n  const [activeOption, setActiveOption] = useState<ComboboxOption<T> | null>(null)\n  const [listBoxRect, setListBoxRect] = useState<Rect>({\n    top: 0,\n    left: 0,\n  })\n  // HINT: calculateRectで同時に計算するとwidthの幅が変更されるタイミングの問題でlistBoxHeightが変化する場合がある\n  const [triggerWidth, setTriggerWidth] = useState(0)\n\n  const listBoxRef = useRef<HTMLDivElement>(null)\n  const activeRef = useRef<HTMLButtonElement>(null)\n\n  const theme = useTheme()\n\n  const latest = useLatest({ onAdd, onSelect, activeOption, options, triggerRef, theme })\n  const hasOnAdd = !!onAdd\n\n  const functions = useMemo(() => {\n    const moveActiveOptionIndex = (currentActive: ComboboxOption<T> | null, delta: -1 | 1) => {\n      if (latest.options.every((option) => option.item.disabled)) {\n        return\n      }\n\n      const currentActiveIndex =\n        currentActive === null\n          ? -1\n          : latest.options.findIndex((option) => option.id === currentActive.id)\n      let nextIndex = 0\n\n      if (currentActiveIndex !== -1) {\n        nextIndex = (currentActiveIndex + delta + latest.options.length) % latest.options.length\n      } else if (delta !== 1) {\n        nextIndex = latest.options.length - 1\n      }\n\n      const nextActive = latest.options[nextIndex]\n\n      if (nextActive) {\n        if (nextActive.item.disabled) {\n          moveActiveOptionIndex(nextActive, delta)\n        } else {\n          setActiveOption(nextActive)\n        }\n      }\n    }\n\n    return {\n      calculateRect: () => {\n        if (!listBoxRef.current || !latest.triggerRef.current) {\n          return\n        }\n        const rect = latest.triggerRef.current.getBoundingClientRect()\n        const bottomSpace = window.innerHeight - rect.bottom\n        const topSpace = rect.top\n        const listBoxHeight = Math.min(\n          listBoxRef.current.scrollHeight,\n          parseInt(getComputedStyle(listBoxRef.current).maxHeight, 10),\n        )\n        const offset = 2\n\n        let top = 0\n        let height: number | undefined = undefined\n\n        if (bottomSpace >= listBoxHeight) {\n          // 下側に十分なスペースがある場合は下側に通常表示\n          top = rect.top + rect.height - offset + window.pageYOffset\n        } else if (topSpace >= listBoxHeight) {\n          // 上側に十分なスペースがある場合は上側に通常表示\n          top = rect.top - listBoxHeight + offset + window.pageYOffset\n        } else if (topSpace > bottomSpace) {\n          // 上下に十分なスペースがなく、上側の方がスペースが大きい場合は上側に縮めて表示\n          top = rect.top - topSpace + offset + window.pageYOffset\n          height = topSpace\n        } else {\n          // 下側に縮めて表示\n          top = rect.top + rect.height - offset + window.pageYOffset\n          height = bottomSpace\n        }\n\n        // HINT: dropdownWidth は 'auto' や '%' などの CSS 値を取りうるため、算出済みの幅を実測して判定する\n        const listBoxWidth = listBoxRef.current.getBoundingClientRect().width\n        // ドロップダウンの幅は maxWidth でビューポート右端から余白分を残すよう制限しているため、位置の判定にも同じ余白を使う\n        const viewportMargin = parseInt(latest.theme.spacingByChar(0.5), 10)\n        // 入力欄の左端を起点に右方向へ表示する場合に使える幅\n        const rightSpace = window.innerWidth - rect.left - viewportMargin\n        // 入力欄の右端を起点に左方向へ表示する場合に使える幅\n        const leftSpace = rect.right\n\n        // ビューポートの左端を基準に計算\n        let left = window.pageXOffset\n\n        if (listBoxWidth <= rightSpace) {\n          // 右側に十分なスペースがある場合は入力欄の左端に揃えて通常表示\n          left += rect.left\n        } else if (listBoxWidth <= leftSpace) {\n          // 左側に収まる場合は入力欄の右端に揃えて表示\n          left += rect.right - listBoxWidth\n        }\n\n        setListBoxRect({\n          top,\n          left,\n          height,\n        })\n        setTriggerWidth(rect.width)\n      },\n      handleKeyDownListBox: (e: KeyboardEvent<HTMLElement>) => {\n        setNavigationType('key')\n\n        if (KEY_DOWN_REGEX.test(e.key)) {\n          e.stopPropagation()\n          moveActiveOptionIndex(latest.activeOption, 1)\n        } else if (KEY_UP_REGEX.test(e.key)) {\n          e.stopPropagation()\n          moveActiveOptionIndex(latest.activeOption, -1)\n        } else if (e.key === 'Enter') {\n          if (latest.activeOption === null) {\n            return\n          }\n\n          e.stopPropagation()\n\n          if (!latest.activeOption.isNew) {\n            latest.onSelect(latest.activeOption.item)\n          } else if (latest.onAdd) {\n            latest.onAdd(latest.activeOption.item.value)\n          }\n        } else {\n          setActiveOption(null)\n        }\n      },\n      handleAdd: hasOnAdd\n        ? (option: ComboboxOption<T>) => {\n            // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n            // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n            requestAnimationFrame(() => {\n              latest.onAdd!(option.item.value)\n            })\n          }\n        : undefined,\n      handleSelect: (option: ComboboxOption<T>) => {\n        latest.onSelect(option.item)\n      },\n      handleHoverOption: (option: ComboboxOption<T>) => {\n        setNavigationType('pointer')\n        setActiveOption(option)\n      },\n    }\n  }, [hasOnAdd, latest])\n\n  useEffect(() => {\n    // props の変更によって activeOption の状態が変わりうるので、実態を反映する\n    setActiveOption((current) => {\n      if (current === null) {\n        return null\n      }\n\n      return options.find((option) => current.id === option.id) ?? null\n    })\n  }, [options])\n\n  useEffect(() => {\n    // actionOption の要素が表示される位置までリストボックス内をスクロールさせる\n    if (\n      !activeRef.current ||\n      !listBoxRef.current ||\n      activeOption === null ||\n      navigationType !== 'key'\n    ) {\n      return\n    }\n\n    const activeRect = activeRef.current.getBoundingClientRect()\n    const containerRect = listBoxRef.current.getBoundingClientRect()\n\n    if (activeRect.top < containerRect.top) {\n      listBoxRef.current.scrollTop -= containerRect.top - activeRect.top\n    } else if (activeRect.bottom > containerRect.bottom) {\n      listBoxRef.current.scrollTop += activeRect.bottom - containerRect.bottom\n    }\n  }, [activeOption, navigationType])\n\n  useEnhancedEffect(() => {\n    // 閉じたときに activeOption を初期化\n    if (!isExpanded) {\n      return setActiveOption(null)\n    }\n\n    functions.calculateRect()\n\n    const scrollOption = { capture: true, passive: true }\n    window.addEventListener('scroll', functions.calculateRect, scrollOption)\n    window.addEventListener('resize', functions.calculateRect, { passive: true })\n\n    return () => {\n      window.removeEventListener('scroll', functions.calculateRect, scrollOption)\n      window.removeEventListener('resize', functions.calculateRect)\n    }\n    // HINT: optionsが変わる場合メニューのサイズが変わる可能性がある\n  }, [isExpanded, options, functions])\n\n  return {\n    listBoxProps: {\n      activeOptionId: activeOption?.id,\n      options,\n      isExpanded,\n      isLoading,\n      dropdownHelpMessage,\n      noResultText,\n      listBoxId,\n      listBoxRef,\n      handleAdd: functions.handleAdd,\n      handleHoverOption: functions.handleHoverOption,\n      handleSelect: functions.handleSelect,\n      activeRef,\n      listBoxRect,\n      triggerWidth,\n      dropdownWidth,\n    },\n    activeOption,\n    handleKeyDownListBox: functions.handleKeyDownListBox,\n    listBoxId,\n    listBoxRef,\n  }\n}\n\ntype ListBoxProps<T> = {\n  activeOptionId: string | undefined\n  options: Array<ComboboxOption<T>>\n  isExpanded: boolean\n  isLoading?: boolean\n  noResultText?: ReactNode\n  dropdownHelpMessage?: ReactNode\n  listBoxId: string\n  listBoxRef: RefObject<HTMLDivElement>\n  handleAdd: ((option: ComboboxOption<T>) => void) | undefined\n  handleHoverOption: (option: ComboboxOption<T>) => void\n  handleSelect: (option: ComboboxOption<T>) => void\n  activeRef: RefObject<HTMLButtonElement>\n  listBoxRect: { top: number; left: number; height?: number }\n  triggerWidth: number\n  dropdownWidth?: string | number\n}\n\nexport const ListBox = memo(\n  <T,>({\n    activeOptionId,\n    options,\n    isExpanded,\n    isLoading,\n    noResultText,\n    dropdownHelpMessage,\n    listBoxId,\n    listBoxRef,\n    handleAdd,\n    handleHoverOption,\n    handleSelect,\n    activeRef,\n    listBoxRect,\n    triggerWidth,\n    dropdownWidth,\n  }: ListBoxProps<T>) => {\n    const { createPortal } = usePortal()\n    const theme = useTheme()\n\n    const minLength = useMemo(\n      () =>\n        (activeOptionId === undefined ? 0 : options.findIndex((o) => o.id === activeOptionId)) + 1,\n      [activeOptionId, options],\n    )\n    const [currentItemLength, setCurrentItemLength] = useState(() =>\n      Math.max(OPTION_INCREMENT_AMOUNT, minLength),\n    )\n    const items = useMemo(() => options.slice(0, currentItemLength), [currentItemLength, options])\n\n    const styles = useMemo(() => {\n      const { top, left, height } = listBoxRect\n      const dropdownListWidth = dropdownWidth || triggerWidth\n\n      return {\n        wrapper: {\n          top: `${top}px`,\n          left: `${left}px`,\n          width: `${triggerWidth}px`,\n        },\n        dropdownList: {\n          width:\n            typeof dropdownListWidth === 'string' ? dropdownListWidth : `${dropdownListWidth}px`,\n          /* HINT: left に依存させると、算出した幅がさらに maxWidth を縮めて再計算の度に幅が縮んでいくため、\n          ビューポート幅のみから算出する */\n          maxWidth: `calc(100vw - ${theme.spacingByChar(0.5)})`,\n          height: height ? `${height}px` : undefined,\n        },\n      }\n    }, [listBoxRect, triggerWidth, dropdownWidth, theme])\n\n    const latest = useLatest({ handleAdd, handleHoverOption, handleSelect, options, minLength })\n\n    const functions = useMemo(() => {\n      const resolveOption = (e: MouseEvent) => {\n        const el = findDelegateTarget<HTMLButtonElement>(e, 'button[role=\"option\"]')\n        if (!el || el.disabled) return null\n        return latest.options.find((o) => o.id === el.id) ?? null\n      }\n\n      return {\n        handleDelegateClick: (e: MouseEvent) => {\n          const option = resolveOption(e)\n          if (option) {\n            if (option.isNew) {\n              latest.handleAdd?.(option)\n            } else {\n              latest.handleSelect(option)\n            }\n          }\n        },\n        handleDelegateMouseOver: (e: MouseEvent) => {\n          const option = resolveOption(e)\n          if (option) {\n            latest.handleHoverOption(option)\n          }\n        },\n        handleIntersect: () => {\n          setCurrentItemLength((current) =>\n            Math.max(current + OPTION_INCREMENT_AMOUNT, latest.minLength),\n          )\n        },\n      }\n    }, [latest])\n\n    useEffect(() => {\n      setCurrentItemLength((current) => Math.max(current, minLength))\n    }, [minLength])\n\n    return createPortal(\n      <div className={CLASS_NAMES.wrapper} style={styles.wrapper}>\n        {isExpanded && isLoading && (\n          <VisuallyHiddenText role=\"status\">\n            <Localizer id=\"smarthr-ui/Combobox/loadingText\" defaultText=\"処理中\" />\n          </VisuallyHiddenText>\n        )}\n        <Scroller\n          id={listBoxId}\n          ref={listBoxRef}\n          role=\"listbox\"\n          aria-hidden={!isExpanded}\n          className={CLASS_NAMES.dropdownList}\n          style={styles.dropdownList}\n          onMouseOver={functions.handleDelegateMouseOver}\n          onClick={functions.handleDelegateClick}\n        >\n          {dropdownHelpMessage && (\n            <Text\n              className={CLASS_NAMES.helpMessage}\n              icon={<FaCircleInfoIcon color=\"TEXT_GREY\" />}\n              as=\"p\"\n            >\n              {dropdownHelpMessage}\n            </Text>\n          )}\n          {isExpanded ? (\n            isLoading ? (\n              <div className={CLASS_NAMES.loaderWrapper}>\n                <Loader aria-hidden />\n              </div>\n            ) : options.length === 0 ? (\n              <p role=\"alert\" aria-live=\"polite\" className={CLASS_NAMES.noItems}>\n                {noResultText ?? (\n                  <Localizer\n                    id=\"smarthr-ui/Combobox/noResultsText\"\n                    defaultText=\"一致する選択肢がありません。\"\n                  />\n                )}\n              </p>\n            ) : (\n              items.map(({ item: { label, disabled }, id, ...optionRest }) => (\n                <ItemButton\n                  {...optionRest}\n                  label={label}\n                  disabled={disabled}\n                  key={id}\n                  id={id}\n                  activeRef={id === activeOptionId ? activeRef : undefined}\n                />\n              ))\n            )\n          ) : null}\n          {currentItemLength < options.length && (\n            <Intersection handleIntersect={functions.handleIntersect} />\n          )}\n        </Scroller>\n      </div>,\n    )\n  },\n) as <T>(props: ListBoxProps<T>) => ReactNode\n\nconst Intersection = memo<{ handleIntersect: () => void }>(({ handleIntersect }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const target = ref.current\n\n    if (target === null) {\n      return\n    }\n\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        handleIntersect()\n      }\n    })\n\n    observer.observe(target)\n\n    return () => observer.disconnect()\n  }, [handleIntersect])\n\n  return <div ref={ref} />\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmDA;AACA;AAEA;AAEA;AACE;AACE;AACA;;;AAGE;AAC0D;;;AAG3D;AACD;AAEA;AACA;AACD;AACF;AAED;AACE;;;;;;;;AASF;AAEO;AAWL;;;AAIA;AACE;AACA;AACD;;;AAID;AACA;AAEA;AAEA;AACA;AAEA;AACE;AACE;;;AAIA;;;;AAMA;AACE;;AACK;;;;;AAOL;AACE;;;;;;AAKN;;;AAII;;;;;AAKA;;;;;AAUA;;AAEE;;AACK;;AAEL;;AACK;;AAEL;;;;;AAIA;;;;;;AAOF;;;;AAIA;;AAGA;AAEA;;AAEE;;AACK;;AAEL;;AAGF;;;;AAIC;AACD;;AAEF;;;;AAKI;;;;;;AAIK;AACL;;;;AAMA;;;AAEO;;;;;;;;AAOX;AACE;;;;;AAKI;;AAEJ;AACF;AACE;;AAEF;;;;;AAKJ;;;AAIE;AACE;AACE;;AAGF;AACF;AACF;;;;;AAOI;;;;;;;AAUA;;;AAEA;;AAEJ;;;;AAKI;;;;;AAOF;AAEA;;;AAGA;;;;AAKA;;;;;;;;;;;;;;;;AAgBC;;;;;;AAML;AAoBO;AAkBH;AACA;AAEA;;;AAUA;;AAEE;;AAGE;;;;AAIC;AACD;AACE;AAEA;AACkB;;;AAGnB;;;AAIL;AAEA;AACE;;AAEE;AAAwB;;AAE1B;;AAGE;AACE;;AAEE;AACE;;;AAEA;;;;AAIN;AACE;;AAEE;;;;AAIF;;;AAKN;;AAGE;AACF;AAEA;AA2DF;AAGF;AACE;;AAGE;AAEA;;;;AAKE;AACE;;AAEJ;AAEA;AAEA;AACF;AAEA;AACF;;;"}
+{"version":3,"file":"useListbox.cjs","sources":["../../../src/components/Combobox/useListbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type RefObject,\n  memo,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useAnimationFrame } from '../../hooks/useAnimationFrame'\nimport { useEnhancedEffect } from '../../hooks/useEnhancedEffect'\nimport { useLatest } from '../../hooks/useLatest'\nimport { usePortal } from '../../hooks/usePortal'\nimport { useTheme } from '../../hooks/useTheme'\nimport { Localizer } from '../../intl'\nimport { findDelegateTarget } from '../../libs/delegate'\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Loader } from '../Loader'\nimport { Scroller } from '../Scroller'\nimport { Text } from '../Text'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport { ItemButton } from './ItemButton'\n\nimport type { ComboboxItem, ComboboxOption } from './types'\n\ntype Props<T> = {\n  options: Array<ComboboxOption<T>>\n  dropdownHelpMessage?: ReactNode\n  dropdownWidth?: string | number\n  onAdd?: (label: string) => void\n  onSelect: (item: ComboboxItem<T>) => void\n  isExpanded: boolean\n  isLoading?: boolean\n  triggerRef: RefObject<HTMLElement>\n  /** 検索結果が0件の時に表示するコンテンツ */\n  noResultText?: ReactNode\n}\n\ntype Rect = {\n  top: number\n  left: number\n  height?: number\n}\n\nconst KEY_DOWN_REGEX = /^(Arrow)?Down$/\nconst KEY_UP_REGEX = /^(Arrow)?Up/\n\nconst OPTION_INCREMENT_AMOUNT = 100\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'shr-absolute',\n    dropdownList: [\n      'smarthr-ui-Combobox-dropdownList',\n      'shr-absolute shr-z-overlap shr-box-border shr-min-w-full shr-rounded-m shr-bg-white shr-py-0.5 shr-shadow-layer-3 forced-colors:shr-outline forced-colors:shr-outline-1',\n      /* 縦スクロールに気づきやすくするために8個目のアイテムが半分見切れるように max-height を算出\n      = (アイテムのフォントサイズ + アイテムの上下padding) * 7.5 + コンテナの上padding */\n      'shr-max-h-[calc((theme(fontSize.base)_+_theme(spacing[0.5])_*_2)_*_7.5_+_theme(spacing[0.5]))]',\n      'aria-hidden:shr-hidden',\n    ],\n    helpMessage:\n      'shr-whitespace-[initial] shr-border-b-shorthand shr-mx-0.5 shr-mb-0.5 shr-mt-0 shr-px-0.5 shr-pb-0.5 shr-pt-0 shr-text-sm',\n    loaderWrapper: 'shr-flex shr-items-center shr-justify-center shr-p-1',\n    noItems: 'smarthr-ui-Combobox-noItems shr-my-0 shr-bg-white shr-px-1 shr-py-0.5 shr-text-base',\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { wrapper, dropdownList, helpMessage, loaderWrapper, noItems } = classNameGenerator()\n\n  return {\n    wrapper: wrapper(),\n    dropdownList: dropdownList(),\n    helpMessage: helpMessage(),\n    loaderWrapper: loaderWrapper(),\n    noItems: noItems(),\n  }\n})()\n\nexport const useListbox = <T,>({\n  options,\n  dropdownHelpMessage,\n  dropdownWidth,\n  onAdd,\n  onSelect,\n  isExpanded,\n  isLoading,\n  triggerRef,\n  noResultText,\n}: Props<T>) => {\n  const listBoxId = useId()\n\n  const [navigationType, setNavigationType] = useState<'pointer' | 'key'>('pointer')\n  const [activeOption, setActiveOption] = useState<ComboboxOption<T> | null>(null)\n  const [listBoxRect, setListBoxRect] = useState<Rect>({\n    top: 0,\n    left: 0,\n  })\n  // HINT: calculateRectで同時に計算するとwidthの幅が変更されるタイミングの問題でlistBoxHeightが変化する場合がある\n  const [triggerWidth, setTriggerWidth] = useState(0)\n\n  const listBoxRef = useRef<HTMLDivElement>(null)\n  const activeRef = useRef<HTMLButtonElement>(null)\n\n  const theme = useTheme()\n\n  const addFrame = useAnimationFrame()\n\n  const latest = useLatest({ onAdd, onSelect, activeOption, options, triggerRef, theme, addFrame })\n  const hasOnAdd = !!onAdd\n\n  const functions = useMemo(() => {\n    const moveActiveOptionIndex = (currentActive: ComboboxOption<T> | null, delta: -1 | 1) => {\n      if (latest.options.every((option) => option.item.disabled)) {\n        return\n      }\n\n      const currentActiveIndex =\n        currentActive === null\n          ? -1\n          : latest.options.findIndex((option) => option.id === currentActive.id)\n      let nextIndex = 0\n\n      if (currentActiveIndex !== -1) {\n        nextIndex = (currentActiveIndex + delta + latest.options.length) % latest.options.length\n      } else if (delta !== 1) {\n        nextIndex = latest.options.length - 1\n      }\n\n      const nextActive = latest.options[nextIndex]\n\n      if (nextActive) {\n        if (nextActive.item.disabled) {\n          moveActiveOptionIndex(nextActive, delta)\n        } else {\n          setActiveOption(nextActive)\n        }\n      }\n    }\n\n    return {\n      calculateRect: () => {\n        if (!listBoxRef.current || !latest.triggerRef.current) {\n          return\n        }\n        const rect = latest.triggerRef.current.getBoundingClientRect()\n        const bottomSpace = window.innerHeight - rect.bottom\n        const topSpace = rect.top\n        const listBoxHeight = Math.min(\n          listBoxRef.current.scrollHeight,\n          parseInt(getComputedStyle(listBoxRef.current).maxHeight, 10),\n        )\n        const offset = 2\n\n        let top = 0\n        let height: number | undefined = undefined\n\n        if (bottomSpace >= listBoxHeight) {\n          // 下側に十分なスペースがある場合は下側に通常表示\n          top = rect.top + rect.height - offset + window.pageYOffset\n        } else if (topSpace >= listBoxHeight) {\n          // 上側に十分なスペースがある場合は上側に通常表示\n          top = rect.top - listBoxHeight + offset + window.pageYOffset\n        } else if (topSpace > bottomSpace) {\n          // 上下に十分なスペースがなく、上側の方がスペースが大きい場合は上側に縮めて表示\n          top = rect.top - topSpace + offset + window.pageYOffset\n          height = topSpace\n        } else {\n          // 下側に縮めて表示\n          top = rect.top + rect.height - offset + window.pageYOffset\n          height = bottomSpace\n        }\n\n        // HINT: dropdownWidth は 'auto' や '%' などの CSS 値を取りうるため、算出済みの幅を実測して判定する\n        const listBoxWidth = listBoxRef.current.getBoundingClientRect().width\n        // ドロップダウンの幅は maxWidth でビューポート右端から余白分を残すよう制限しているため、位置の判定にも同じ余白を使う\n        const viewportMargin = parseInt(latest.theme.spacingByChar(0.5), 10)\n        // 入力欄の左端を起点に右方向へ表示する場合に使える幅\n        const rightSpace = window.innerWidth - rect.left - viewportMargin\n        // 入力欄の右端を起点に左方向へ表示する場合に使える幅\n        const leftSpace = rect.right\n\n        // ビューポートの左端を基準に計算\n        let left = window.pageXOffset\n\n        if (listBoxWidth <= rightSpace) {\n          // 右側に十分なスペースがある場合は入力欄の左端に揃えて通常表示\n          left += rect.left\n        } else if (listBoxWidth <= leftSpace) {\n          // 左側に収まる場合は入力欄の右端に揃えて表示\n          left += rect.right - listBoxWidth\n        }\n\n        setListBoxRect({\n          top,\n          left,\n          height,\n        })\n        setTriggerWidth(rect.width)\n      },\n      handleKeyDownListBox: (e: KeyboardEvent<HTMLElement>) => {\n        setNavigationType('key')\n\n        if (KEY_DOWN_REGEX.test(e.key)) {\n          e.stopPropagation()\n          moveActiveOptionIndex(latest.activeOption, 1)\n        } else if (KEY_UP_REGEX.test(e.key)) {\n          e.stopPropagation()\n          moveActiveOptionIndex(latest.activeOption, -1)\n        } else if (e.key === 'Enter') {\n          if (latest.activeOption === null) {\n            return\n          }\n\n          e.stopPropagation()\n\n          if (!latest.activeOption.isNew) {\n            latest.onSelect(latest.activeOption.item)\n          } else if (latest.onAdd) {\n            latest.onAdd(latest.activeOption.item.value)\n          }\n        } else {\n          setActiveOption(null)\n        }\n      },\n      handleAdd: hasOnAdd\n        ? (option: ComboboxOption<T>) => {\n            // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n            // 処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n            latest.addFrame.request(() => {\n              latest.onAdd!(option.item.value)\n            })\n          }\n        : undefined,\n      handleSelect: (option: ComboboxOption<T>) => {\n        latest.onSelect(option.item)\n      },\n      handleHoverOption: (option: ComboboxOption<T>) => {\n        setNavigationType('pointer')\n        setActiveOption(option)\n      },\n    }\n  }, [hasOnAdd, latest])\n\n  // TODO: callbackRefにまとめ直したい\n  useEffect(() => addFrame.cancel, [addFrame.cancel])\n\n  useEffect(() => {\n    // props の変更によって activeOption の状態が変わりうるので、実態を反映する\n    setActiveOption((current) => {\n      if (current === null) {\n        return null\n      }\n\n      return options.find((option) => current.id === option.id) ?? null\n    })\n  }, [options])\n\n  useEffect(() => {\n    // actionOption の要素が表示される位置までリストボックス内をスクロールさせる\n    if (\n      !activeRef.current ||\n      !listBoxRef.current ||\n      activeOption === null ||\n      navigationType !== 'key'\n    ) {\n      return\n    }\n\n    const activeRect = activeRef.current.getBoundingClientRect()\n    const containerRect = listBoxRef.current.getBoundingClientRect()\n\n    if (activeRect.top < containerRect.top) {\n      listBoxRef.current.scrollTop -= containerRect.top - activeRect.top\n    } else if (activeRect.bottom > containerRect.bottom) {\n      listBoxRef.current.scrollTop += activeRect.bottom - containerRect.bottom\n    }\n  }, [activeOption, navigationType])\n\n  useEnhancedEffect(() => {\n    // 閉じたときに activeOption を初期化\n    if (!isExpanded) {\n      return setActiveOption(null)\n    }\n\n    functions.calculateRect()\n\n    const scrollOption = { capture: true, passive: true }\n    window.addEventListener('scroll', functions.calculateRect, scrollOption)\n    window.addEventListener('resize', functions.calculateRect, { passive: true })\n\n    return () => {\n      window.removeEventListener('scroll', functions.calculateRect, scrollOption)\n      window.removeEventListener('resize', functions.calculateRect)\n    }\n    // HINT: optionsが変わる場合メニューのサイズが変わる可能性がある\n  }, [isExpanded, options, functions])\n\n  return {\n    listBoxProps: {\n      activeOptionId: activeOption?.id,\n      options,\n      isExpanded,\n      isLoading,\n      dropdownHelpMessage,\n      noResultText,\n      listBoxId,\n      listBoxRef,\n      handleAdd: functions.handleAdd,\n      handleHoverOption: functions.handleHoverOption,\n      handleSelect: functions.handleSelect,\n      activeRef,\n      listBoxRect,\n      triggerWidth,\n      dropdownWidth,\n    },\n    activeOption,\n    handleKeyDownListBox: functions.handleKeyDownListBox,\n    listBoxId,\n    listBoxRef,\n  }\n}\n\ntype ListBoxProps<T> = {\n  activeOptionId: string | undefined\n  options: Array<ComboboxOption<T>>\n  isExpanded: boolean\n  isLoading?: boolean\n  noResultText?: ReactNode\n  dropdownHelpMessage?: ReactNode\n  listBoxId: string\n  listBoxRef: RefObject<HTMLDivElement>\n  handleAdd: ((option: ComboboxOption<T>) => void) | undefined\n  handleHoverOption: (option: ComboboxOption<T>) => void\n  handleSelect: (option: ComboboxOption<T>) => void\n  activeRef: RefObject<HTMLButtonElement>\n  listBoxRect: { top: number; left: number; height?: number }\n  triggerWidth: number\n  dropdownWidth?: string | number\n}\n\nexport const ListBox = memo(\n  <T,>({\n    activeOptionId,\n    options,\n    isExpanded,\n    isLoading,\n    noResultText,\n    dropdownHelpMessage,\n    listBoxId,\n    listBoxRef,\n    handleAdd,\n    handleHoverOption,\n    handleSelect,\n    activeRef,\n    listBoxRect,\n    triggerWidth,\n    dropdownWidth,\n  }: ListBoxProps<T>) => {\n    const { createPortal } = usePortal()\n    const theme = useTheme()\n\n    const minLength = useMemo(\n      () =>\n        (activeOptionId === undefined ? 0 : options.findIndex((o) => o.id === activeOptionId)) + 1,\n      [activeOptionId, options],\n    )\n    const [currentItemLength, setCurrentItemLength] = useState(() =>\n      Math.max(OPTION_INCREMENT_AMOUNT, minLength),\n    )\n    const items = useMemo(() => options.slice(0, currentItemLength), [currentItemLength, options])\n\n    const styles = useMemo(() => {\n      const { top, left, height } = listBoxRect\n      const dropdownListWidth = dropdownWidth || triggerWidth\n\n      return {\n        wrapper: {\n          top: `${top}px`,\n          left: `${left}px`,\n          width: `${triggerWidth}px`,\n        },\n        dropdownList: {\n          width:\n            typeof dropdownListWidth === 'string' ? dropdownListWidth : `${dropdownListWidth}px`,\n          /* HINT: left に依存させると、算出した幅がさらに maxWidth を縮めて再計算の度に幅が縮んでいくため、\n          ビューポート幅のみから算出する */\n          maxWidth: `calc(100vw - ${theme.spacingByChar(0.5)})`,\n          height: height ? `${height}px` : undefined,\n        },\n      }\n    }, [listBoxRect, triggerWidth, dropdownWidth, theme])\n\n    const latest = useLatest({ handleAdd, handleHoverOption, handleSelect, options, minLength })\n\n    const functions = useMemo(() => {\n      const resolveOption = (e: MouseEvent) => {\n        const el = findDelegateTarget<HTMLButtonElement>(e, 'button[role=\"option\"]')\n        if (!el || el.disabled) return null\n        return latest.options.find((o) => o.id === el.id) ?? null\n      }\n\n      return {\n        handleDelegateClick: (e: MouseEvent) => {\n          const option = resolveOption(e)\n          if (option) {\n            if (option.isNew) {\n              latest.handleAdd?.(option)\n            } else {\n              latest.handleSelect(option)\n            }\n          }\n        },\n        handleDelegateMouseOver: (e: MouseEvent) => {\n          const option = resolveOption(e)\n          if (option) {\n            latest.handleHoverOption(option)\n          }\n        },\n        handleIntersect: () => {\n          setCurrentItemLength((current) =>\n            Math.max(current + OPTION_INCREMENT_AMOUNT, latest.minLength),\n          )\n        },\n      }\n    }, [latest])\n\n    useEffect(() => {\n      setCurrentItemLength((current) => Math.max(current, minLength))\n    }, [minLength])\n\n    return createPortal(\n      <div className={CLASS_NAMES.wrapper} style={styles.wrapper}>\n        {isExpanded && isLoading && (\n          <VisuallyHiddenText role=\"status\">\n            <Localizer id=\"smarthr-ui/Combobox/loadingText\" defaultText=\"処理中\" />\n          </VisuallyHiddenText>\n        )}\n        <Scroller\n          id={listBoxId}\n          ref={listBoxRef}\n          role=\"listbox\"\n          aria-hidden={!isExpanded}\n          className={CLASS_NAMES.dropdownList}\n          style={styles.dropdownList}\n          onMouseOver={functions.handleDelegateMouseOver}\n          onClick={functions.handleDelegateClick}\n        >\n          {dropdownHelpMessage && (\n            <Text\n              className={CLASS_NAMES.helpMessage}\n              icon={<FaCircleInfoIcon color=\"TEXT_GREY\" />}\n              as=\"p\"\n            >\n              {dropdownHelpMessage}\n            </Text>\n          )}\n          {isExpanded ? (\n            isLoading ? (\n              <div className={CLASS_NAMES.loaderWrapper}>\n                <Loader aria-hidden />\n              </div>\n            ) : options.length === 0 ? (\n              <p role=\"alert\" aria-live=\"polite\" className={CLASS_NAMES.noItems}>\n                {noResultText ?? (\n                  <Localizer\n                    id=\"smarthr-ui/Combobox/noResultsText\"\n                    defaultText=\"一致する選択肢がありません。\"\n                  />\n                )}\n              </p>\n            ) : (\n              items.map(({ item: { label, disabled }, id, ...optionRest }) => (\n                <ItemButton\n                  {...optionRest}\n                  label={label}\n                  disabled={disabled}\n                  key={id}\n                  id={id}\n                  activeRef={id === activeOptionId ? activeRef : undefined}\n                />\n              ))\n            )\n          ) : null}\n          {currentItemLength < options.length && (\n            <Intersection handleIntersect={functions.handleIntersect} />\n          )}\n        </Scroller>\n      </div>,\n    )\n  },\n) as <T>(props: ListBoxProps<T>) => ReactNode\n\nconst Intersection = memo<{ handleIntersect: () => void }>(({ handleIntersect }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const target = ref.current\n\n    if (target === null) {\n      return\n    }\n\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        handleIntersect()\n      }\n    })\n\n    observer.observe(target)\n\n    return () => observer.disconnect()\n  }, [handleIntersect])\n\n  return <div ref={ref} />\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA;AACA;AAEA;AAEA;AACE;AACE;AACA;;;AAGE;AAC0D;;;AAG3D;AACD;AAEA;AACA;AACD;AACF;AAED;AACE;;;;;;;;AASF;AAEO;AAWL;;;AAIA;AACE;AACA;AACD;;;AAID;AACA;AAEA;AAEA;;AAGA;AAEA;AACE;AACE;;;AAIA;;;;AAMA;AACE;;AACK;;;;;AAOL;AACE;;;;;;AAKN;;;AAII;;;;;AAKA;;;;;AAUA;;AAEE;;AACK;;AAEL;;AACK;;AAEL;;;;;AAIA;;;;;;AAOF;;;;AAIA;;AAGA;AAEA;;AAEE;;AACK;;AAEL;;AAGF;;;;AAIC;AACD;;AAEF;;;;AAKI;;;;;;AAIK;AACL;;;;AAMA;;;AAEO;;;;;;;;AAOX;AACE;;;AAGI;;AAEA;;AAEJ;AACF;AACE;;AAEF;;;;;AAKJ;;AAGA;;;AAIE;AACE;AACE;;AAGF;AACF;AACF;;;;;AAOI;;;;;;;AAUA;;;AAEA;;AAEJ;;;;AAKI;;;;;AAOF;AAEA;;;AAGA;;;;AAKA;;;;;;;;;;;;;;;;AAgBC;;;;;;AAML;AAoBO;AAkBH;AACA;AAEA;;;AAUA;;AAEE;;AAGE;;;;AAIC;AACD;AACE;AAEA;AACkB;;;AAGnB;;;AAIL;AAEA;AACE;;AAEE;AAAwB;;AAE1B;;AAGE;AACE;;AAEE;AACE;;;AAEA;;;;AAIN;AACE;;AAEE;;;;AAIF;;;AAKN;;AAGE;AACF;AAEA;AA2DF;AAGF;AACE;;AAGE;AAEA;;;;AAKE;AACE;;AAEJ;AAEA;AAEA;AACF;AAEA;AACF;;;"}

package/lib/components/Combobox/useListbox.js

@@ -1,7 +1,8 @@
 "use client";
 import { memo, useMemo, useState, useEffect, createElement, useRef, useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
+import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
+import { useAnimationFrame } from '../../hooks/useAnimationFrame.js';
 import { useEnhancedEffect } from '../../hooks/useEnhancedEffect.js';
 import { useLatest } from '../../hooks/useLatest.js';
 import { usePortal } from '../../hooks/usePortal.js';
@@ -63,7 +64,8 @@ const useListbox = ({ options, dropdownHelpMessage, dropdownWidth, onAdd, onSele
     const listBoxRef = useRef(null);
     const activeRef = useRef(null);
     const theme = useTheme();
-    const latest = useLatest({ onAdd, onSelect, activeOption, options, triggerRef, theme });
+    const addFrame = useAnimationFrame();
+    const latest = useLatest({ onAdd, onSelect, activeOption, options, triggerRef, theme, addFrame });
     const hasOnAdd = !!onAdd;
     const functions = useMemo(() => {
         const moveActiveOptionIndex = (currentActive, delta) => {
@@ -174,8 +176,8 @@ const useListbox = ({ options, dropdownHelpMessage, dropdownWidth, onAdd, onSele
             handleAdd: hasOnAdd
                 ? (option) => {
                     // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう
-                    // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする
-                    requestAnimationFrame(() => {
+                    // 処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする
+                    latest.addFrame.request(() => {
                         latest.onAdd(option.item.value);
                     });
                 }
@@ -189,6 +191,8 @@ const useListbox = ({ options, dropdownHelpMessage, dropdownWidth, onAdd, onSele
             },
         };
     }, [hasOnAdd, latest]);
+    // TODO: callbackRefにまとめ直したい
+    useEffect(() => addFrame.cancel, [addFrame.cancel]);
     useEffect(() => {
         // props の変更によって activeOption の状態が変わりうるので、実態を反映する
         setActiveOption((current) => {