smarthr-ui 99.7.1 → 99.7.2

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

@@ -75,6 +75,8 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
     if (selectedItemLabelText !== prevSelectedItemLabelText) {
         setPrevSelectedItemLabelText(selectedItemLabelText);
         setInputValue(selectedItemLabelText);
+        // inputValueを選択中アイテムのラベルで上書きした場合、それは手入力値ではないため絞り込みには使わない
+        setIsEditing(false);
     }
     const { options } = components_Combobox_useOptions.useSingleOptions({
         items,
@@ -146,11 +148,14 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
             latest.onBlur?.();
             setIsFocused(false);
             setIsExpanded(false);
-            setIsEditing(false);
             if (latest.selectedItem) {
+                // inputValueを選択中アイテムのラベルへ戻すため、手入力による絞り込みも解除する
+                setIsEditing(false);
                 setInputValue(index$1(latest.selectedItem.label));
             }
             else {
+                // HINT: 未選択の場合はinputValueに手入力値が残るため、isEditingは解除しない
+                // 解除してしまうと「入力値が表示されているのに絞り込みが効いていない」状態になる
                 selectDefaultItem();
             }
         };

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  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useAnimationFrame } from '../../../hooks/client/useAnimationFrame'\nimport { useAreaClickCallbackRef } from '../../../hooks/client/useAreaClickCallbackRef'\nimport { useMergeRefs } from '../../../hooks/client/useMergeRefs'\nimport { useTheme } from '../../../hooks/client/useTheme'\nimport { useLatest } from '../../../hooks/useLatest'\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 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        ref={clearButtonRef}\n        className={classNames.clearButton}\n        onClick={handleClickClear}\n      >\n        <FaCircleXmarkIcon\n          alt={\n            <Localizer id=\"smarthr-ui/SingleCombobox/destroyButtonIconAlt\" defaultText=\"クリア\" />\n          }\n          color=\"TEXT_BLACK\"\n          className={classNames.clearButtonIcon}\n        />\n      </UnstyledButton>\n      <span\n        role=\"presentation\"\n        className={classNames.caretDownLayout}\n        onClick={handleDelegateClickIcon}\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 [isComposing, setIsComposing] = useState(false)\n  const [isEditing, setIsEditing] = useState(false)\n\n  const [inputValue, setInputValue] = useState('')\n  // inputValueはユーザーの手入力値も兼ねるため、prevSelectedItemLabelTextの代わりにinputValueと比較すると、\n  // 手入力中に selectedItemLabelText（不変）との不一致を検知して選択中アイテムのラベルへ強制的に戻ってしまう\n  const [prevSelectedItemLabelText, setPrevSelectedItemLabelText] = useState('')\n\n  const selectedItemLabelText = selectedItem ? innerText(selectedItem.label) : ''\n\n  if (selectedItemLabelText !== prevSelectedItemLabelText) {\n    setPrevSelectedItemLabelText(selectedItemLabelText)\n    setInputValue(selectedItemLabelText)\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, cleanupAddFrame, handleKeyDownListBox, listBoxId } =\n    useListbox<T>({\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  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    cleanupAddFrame,\n    selectFrame,\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      cleanupCallbackRef: () => () => {\n        latest.cleanupAddFrame()\n        latest.selectFrame.cancel()\n      },\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  const listBoxCallbackRef = useAreaClickCallbackRef(\n    isFocused ? [triggerRef, clearButtonRef] : null,\n    functions.unfocus,\n    isFocused || selectedItem ? undefined : functions.selectDefaultItem,\n  )\n\n  // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n  // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n  const mergedRef = useMergeRefs(inputRef, functions.cleanupCallbackRef, ref)\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={mergedRef}\n        role=\"combobox\"\n        type=\"text\"\n        name={name}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        value={inputValue}\n        autoComplete={autoComplete ?? 'off'}\n        /* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */\n        placeholder={placeholder}\n        error={error}\n        className={classNames.input}\n        aria-haspopup=\"listbox\"\n        aria-controls={listBoxId}\n        aria-expanded={isFocused}\n        aria-activedescendant={activeOption?.id}\n        aria-autocomplete=\"list\"\n        data-smarthr-ui-input=\"true\"\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        prefix={prefix}\n        suffix={\n          <SuffixButtons\n            clearButtonRef={clearButtonRef}\n            caretIconColor={caretIconColor}\n            classNames={classNames}\n            handleClickClear={functions.handleClickClear}\n            handleClickIcon={functions.handleClickInput}\n          />\n        }\n      />\n      {!readOnly && <ListBox {...listBoxProps} callbackRef={listBoxCallbackRef} />}\n    </div>\n  )\n}\n\nexport const SingleCombobox = genericsForwardRef(ActualSingleCombobox)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA;AACA;AAEA;AACE;AACA;;AAGF;AACE;AACE;AAEA;AACA;;;;AAIC;AACD;AACA;;;;;;AAMC;AACD;;;AAGC;AACF;AACF;AAeD;AAiCA;AAmCE;AACA;AACA;AACA;;;;;;;;;AAWA;AAEA;;;;AAKA;;AAEE;;;;AAID;AAED;AAEA;;;;;;AAOI;AACE;AACA;;;AAIA;;;;;;;;AAQE;AACF;;;;;;;AAQH;;;;;;;;;;;;;;;;;;;;;;AAuBF;AAED;;;AAGM;;AAEJ;;;;AAIE;;;;AAMA;;;;AAGE;;AAEJ;;;;AAKE;;AAEE;;;AAGA;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;AAEJ;;;AAQA;AAEA;AACE;;AAIE;;;;;;;AAOJ;AAEA;AAMM;AACA;;;AAgBA;AA8BR;;;"}
+{"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  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useAnimationFrame } from '../../../hooks/client/useAnimationFrame'\nimport { useAreaClickCallbackRef } from '../../../hooks/client/useAreaClickCallbackRef'\nimport { useMergeRefs } from '../../../hooks/client/useMergeRefs'\nimport { useTheme } from '../../../hooks/client/useTheme'\nimport { useLatest } from '../../../hooks/useLatest'\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 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        ref={clearButtonRef}\n        className={classNames.clearButton}\n        onClick={handleClickClear}\n      >\n        <FaCircleXmarkIcon\n          alt={\n            <Localizer id=\"smarthr-ui/SingleCombobox/destroyButtonIconAlt\" defaultText=\"クリア\" />\n          }\n          color=\"TEXT_BLACK\"\n          className={classNames.clearButtonIcon}\n        />\n      </UnstyledButton>\n      <span\n        role=\"presentation\"\n        className={classNames.caretDownLayout}\n        onClick={handleDelegateClickIcon}\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 [isComposing, setIsComposing] = useState(false)\n  const [isEditing, setIsEditing] = useState(false)\n\n  const [inputValue, setInputValue] = useState('')\n  // inputValueはユーザーの手入力値も兼ねるため、prevSelectedItemLabelTextの代わりにinputValueと比較すると、\n  // 手入力中に selectedItemLabelText（不変）との不一致を検知して選択中アイテムのラベルへ強制的に戻ってしまう\n  const [prevSelectedItemLabelText, setPrevSelectedItemLabelText] = useState('')\n\n  const selectedItemLabelText = selectedItem ? innerText(selectedItem.label) : ''\n\n  if (selectedItemLabelText !== prevSelectedItemLabelText) {\n    setPrevSelectedItemLabelText(selectedItemLabelText)\n    setInputValue(selectedItemLabelText)\n    // inputValueを選択中アイテムのラベルで上書きした場合、それは手入力値ではないため絞り込みには使わない\n    setIsEditing(false)\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, cleanupAddFrame, handleKeyDownListBox, listBoxId } =\n    useListbox<T>({\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  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    cleanupAddFrame,\n    selectFrame,\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\n      if (latest.selectedItem) {\n        // inputValueを選択中アイテムのラベルへ戻すため、手入力による絞り込みも解除する\n        setIsEditing(false)\n        setInputValue(innerText(latest.selectedItem.label))\n      } else {\n        // HINT: 未選択の場合はinputValueに手入力値が残るため、isEditingは解除しない\n        // 解除してしまうと「入力値が表示されているのに絞り込みが効いていない」状態になる\n        selectDefaultItem()\n      }\n    }\n\n    return {\n      selectDefaultItem,\n      unfocus,\n      cleanupCallbackRef: () => () => {\n        latest.cleanupAddFrame()\n        latest.selectFrame.cancel()\n      },\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  const listBoxCallbackRef = useAreaClickCallbackRef(\n    isFocused ? [triggerRef, clearButtonRef] : null,\n    functions.unfocus,\n    isFocused || selectedItem ? undefined : functions.selectDefaultItem,\n  )\n\n  // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n  // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n  const mergedRef = useMergeRefs(inputRef, functions.cleanupCallbackRef, ref)\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={mergedRef}\n        role=\"combobox\"\n        type=\"text\"\n        name={name}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        value={inputValue}\n        autoComplete={autoComplete ?? 'off'}\n        /* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */\n        placeholder={placeholder}\n        error={error}\n        className={classNames.input}\n        aria-haspopup=\"listbox\"\n        aria-controls={listBoxId}\n        aria-expanded={isFocused}\n        aria-activedescendant={activeOption?.id}\n        aria-autocomplete=\"list\"\n        data-smarthr-ui-input=\"true\"\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        prefix={prefix}\n        suffix={\n          <SuffixButtons\n            clearButtonRef={clearButtonRef}\n            caretIconColor={caretIconColor}\n            classNames={classNames}\n            handleClickClear={functions.handleClickClear}\n            handleClickIcon={functions.handleClickInput}\n          />\n        }\n      />\n      {!readOnly && <ListBox {...listBoxProps} callbackRef={listBoxCallbackRef} />}\n    </div>\n  )\n}\n\nexport const SingleCombobox = genericsForwardRef(ActualSingleCombobox)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA;AACA;AAEA;AACE;AACA;;AAGF;AACE;AACE;AAEA;AACA;;;;AAIC;AACD;AACA;;;;;;AAMC;AACD;;;AAGC;AACF;AACF;AAeD;AAiCA;AAmCE;AACA;AACA;AACA;;;;;;;;;AAWA;AAEA;;;;;;AAOA;;AAEE;;;;AAID;AAED;AAEA;;;;;;AAOI;AACE;AACA;;;AAIA;;;;;;;;AAQE;AACF;;;;;;;AAQH;;;;;;;;;;;;;;;;;;;;;;AAuBF;AAED;;;AAGM;;AAEJ;;;;AAIE;;;AAKA;;;;;;;;AAOE;;AAEJ;;;;AAKE;;AAEE;;;AAGA;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;AAEJ;;;AAQA;AAEA;AACE;;AAIE;;;;;;;AAOJ;AAEA;AAMM;AACA;;;AAgBA;AA8BR;;;"}

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

@@ -73,6 +73,8 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
     if (selectedItemLabelText !== prevSelectedItemLabelText) {
         setPrevSelectedItemLabelText(selectedItemLabelText);
         setInputValue(selectedItemLabelText);
+        // inputValueを選択中アイテムのラベルで上書きした場合、それは手入力値ではないため絞り込みには使わない
+        setIsEditing(false);
     }
     const { options } = useSingleOptions({
         items,
@@ -144,11 +146,14 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
             latest.onBlur?.();
             setIsFocused(false);
             setIsExpanded(false);
-            setIsEditing(false);
             if (latest.selectedItem) {
+                // inputValueを選択中アイテムのラベルへ戻すため、手入力による絞り込みも解除する
+                setIsEditing(false);
                 setInputValue(innerText(latest.selectedItem.label));
             }
             else {
+                // HINT: 未選択の場合はinputValueに手入力値が残るため、isEditingは解除しない
+                // 解除してしまうと「入力値が表示されているのに絞り込みが効いていない」状態になる
                 selectDefaultItem();
             }
         };

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  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useAnimationFrame } from '../../../hooks/client/useAnimationFrame'\nimport { useAreaClickCallbackRef } from '../../../hooks/client/useAreaClickCallbackRef'\nimport { useMergeRefs } from '../../../hooks/client/useMergeRefs'\nimport { useTheme } from '../../../hooks/client/useTheme'\nimport { useLatest } from '../../../hooks/useLatest'\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 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        ref={clearButtonRef}\n        className={classNames.clearButton}\n        onClick={handleClickClear}\n      >\n        <FaCircleXmarkIcon\n          alt={\n            <Localizer id=\"smarthr-ui/SingleCombobox/destroyButtonIconAlt\" defaultText=\"クリア\" />\n          }\n          color=\"TEXT_BLACK\"\n          className={classNames.clearButtonIcon}\n        />\n      </UnstyledButton>\n      <span\n        role=\"presentation\"\n        className={classNames.caretDownLayout}\n        onClick={handleDelegateClickIcon}\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 [isComposing, setIsComposing] = useState(false)\n  const [isEditing, setIsEditing] = useState(false)\n\n  const [inputValue, setInputValue] = useState('')\n  // inputValueはユーザーの手入力値も兼ねるため、prevSelectedItemLabelTextの代わりにinputValueと比較すると、\n  // 手入力中に selectedItemLabelText（不変）との不一致を検知して選択中アイテムのラベルへ強制的に戻ってしまう\n  const [prevSelectedItemLabelText, setPrevSelectedItemLabelText] = useState('')\n\n  const selectedItemLabelText = selectedItem ? innerText(selectedItem.label) : ''\n\n  if (selectedItemLabelText !== prevSelectedItemLabelText) {\n    setPrevSelectedItemLabelText(selectedItemLabelText)\n    setInputValue(selectedItemLabelText)\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, cleanupAddFrame, handleKeyDownListBox, listBoxId } =\n    useListbox<T>({\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  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    cleanupAddFrame,\n    selectFrame,\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      cleanupCallbackRef: () => () => {\n        latest.cleanupAddFrame()\n        latest.selectFrame.cancel()\n      },\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  const listBoxCallbackRef = useAreaClickCallbackRef(\n    isFocused ? [triggerRef, clearButtonRef] : null,\n    functions.unfocus,\n    isFocused || selectedItem ? undefined : functions.selectDefaultItem,\n  )\n\n  // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n  // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n  const mergedRef = useMergeRefs(inputRef, functions.cleanupCallbackRef, ref)\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={mergedRef}\n        role=\"combobox\"\n        type=\"text\"\n        name={name}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        value={inputValue}\n        autoComplete={autoComplete ?? 'off'}\n        /* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */\n        placeholder={placeholder}\n        error={error}\n        className={classNames.input}\n        aria-haspopup=\"listbox\"\n        aria-controls={listBoxId}\n        aria-expanded={isFocused}\n        aria-activedescendant={activeOption?.id}\n        aria-autocomplete=\"list\"\n        data-smarthr-ui-input=\"true\"\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        prefix={prefix}\n        suffix={\n          <SuffixButtons\n            clearButtonRef={clearButtonRef}\n            caretIconColor={caretIconColor}\n            classNames={classNames}\n            handleClickClear={functions.handleClickClear}\n            handleClickIcon={functions.handleClickInput}\n          />\n        }\n      />\n      {!readOnly && <ListBox {...listBoxProps} callbackRef={listBoxCallbackRef} />}\n    </div>\n  )\n}\n\nexport const SingleCombobox = genericsForwardRef(ActualSingleCombobox)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA;AACA;AAEA;AACE;AACA;;AAGF;AACE;AACE;AAEA;AACA;;;;AAIC;AACD;AACA;;;;;;AAMC;AACD;;;AAGC;AACF;AACF;AAeD;AAiCA;AAmCE;AACA;AACA;AACA;;;;;;;;;AAWA;AAEA;;;;AAKA;;AAEE;;;;AAID;AAED;AAEA;;;;;;AAOI;AACE;AACA;;;AAIA;;;;;;;;AAQE;AACF;;;;;;;AAQH;;;;;;;;;;;;;;;;;;;;;;AAuBF;AAED;;;AAGM;;AAEJ;;;;AAIE;;;;AAMA;;;;AAGE;;AAEJ;;;;AAKE;;AAEE;;;AAGA;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;AAEJ;;;AAQA;AAEA;AACE;;AAIE;;;;;;;AAOJ;AAEA;AAMM;AACA;;;AAgBA;AA8BR;;;"}
+{"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  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useAnimationFrame } from '../../../hooks/client/useAnimationFrame'\nimport { useAreaClickCallbackRef } from '../../../hooks/client/useAreaClickCallbackRef'\nimport { useMergeRefs } from '../../../hooks/client/useMergeRefs'\nimport { useTheme } from '../../../hooks/client/useTheme'\nimport { useLatest } from '../../../hooks/useLatest'\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 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        ref={clearButtonRef}\n        className={classNames.clearButton}\n        onClick={handleClickClear}\n      >\n        <FaCircleXmarkIcon\n          alt={\n            <Localizer id=\"smarthr-ui/SingleCombobox/destroyButtonIconAlt\" defaultText=\"クリア\" />\n          }\n          color=\"TEXT_BLACK\"\n          className={classNames.clearButtonIcon}\n        />\n      </UnstyledButton>\n      <span\n        role=\"presentation\"\n        className={classNames.caretDownLayout}\n        onClick={handleDelegateClickIcon}\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 [isComposing, setIsComposing] = useState(false)\n  const [isEditing, setIsEditing] = useState(false)\n\n  const [inputValue, setInputValue] = useState('')\n  // inputValueはユーザーの手入力値も兼ねるため、prevSelectedItemLabelTextの代わりにinputValueと比較すると、\n  // 手入力中に selectedItemLabelText（不変）との不一致を検知して選択中アイテムのラベルへ強制的に戻ってしまう\n  const [prevSelectedItemLabelText, setPrevSelectedItemLabelText] = useState('')\n\n  const selectedItemLabelText = selectedItem ? innerText(selectedItem.label) : ''\n\n  if (selectedItemLabelText !== prevSelectedItemLabelText) {\n    setPrevSelectedItemLabelText(selectedItemLabelText)\n    setInputValue(selectedItemLabelText)\n    // inputValueを選択中アイテムのラベルで上書きした場合、それは手入力値ではないため絞り込みには使わない\n    setIsEditing(false)\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, cleanupAddFrame, handleKeyDownListBox, listBoxId } =\n    useListbox<T>({\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  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    cleanupAddFrame,\n    selectFrame,\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\n      if (latest.selectedItem) {\n        // inputValueを選択中アイテムのラベルへ戻すため、手入力による絞り込みも解除する\n        setIsEditing(false)\n        setInputValue(innerText(latest.selectedItem.label))\n      } else {\n        // HINT: 未選択の場合はinputValueに手入力値が残るため、isEditingは解除しない\n        // 解除してしまうと「入力値が表示されているのに絞り込みが効いていない」状態になる\n        selectDefaultItem()\n      }\n    }\n\n    return {\n      selectDefaultItem,\n      unfocus,\n      cleanupCallbackRef: () => () => {\n        latest.cleanupAddFrame()\n        latest.selectFrame.cancel()\n      },\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  const listBoxCallbackRef = useAreaClickCallbackRef(\n    isFocused ? [triggerRef, clearButtonRef] : null,\n    functions.unfocus,\n    isFocused || selectedItem ? undefined : functions.selectDefaultItem,\n  )\n\n  // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n  // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n  const mergedRef = useMergeRefs(inputRef, functions.cleanupCallbackRef, ref)\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={mergedRef}\n        role=\"combobox\"\n        type=\"text\"\n        name={name}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        value={inputValue}\n        autoComplete={autoComplete ?? 'off'}\n        /* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */\n        placeholder={placeholder}\n        error={error}\n        className={classNames.input}\n        aria-haspopup=\"listbox\"\n        aria-controls={listBoxId}\n        aria-expanded={isFocused}\n        aria-activedescendant={activeOption?.id}\n        aria-autocomplete=\"list\"\n        data-smarthr-ui-input=\"true\"\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        prefix={prefix}\n        suffix={\n          <SuffixButtons\n            clearButtonRef={clearButtonRef}\n            caretIconColor={caretIconColor}\n            classNames={classNames}\n            handleClickClear={functions.handleClickClear}\n            handleClickIcon={functions.handleClickInput}\n          />\n        }\n      />\n      {!readOnly && <ListBox {...listBoxProps} callbackRef={listBoxCallbackRef} />}\n    </div>\n  )\n}\n\nexport const SingleCombobox = genericsForwardRef(ActualSingleCombobox)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA;AACA;AAEA;AACE;AACA;;AAGF;AACE;AACE;AAEA;AACA;;;;AAIC;AACD;AACA;;;;;;AAMC;AACD;;;AAGC;AACF;AACF;AAeD;AAiCA;AAmCE;AACA;AACA;AACA;;;;;;;;;AAWA;AAEA;;;;;;AAOA;;AAEE;;;;AAID;AAED;AAEA;;;;;;AAOI;AACE;AACA;;;AAIA;;;;;;;;AAQE;AACF;;;;;;;AAQH;;;;;;;;;;;;;;;;;;;;;;AAuBF;AAED;;;AAGM;;AAEJ;;;;AAIE;;;AAKA;;;;;;;;AAOE;;AAEJ;;;;AAKE;;AAEE;;;AAGA;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;AAEJ;;;AAQA;AAEA;AACE;;AAIE;;;;;;;AAOJ;AAEA;AAMM;AACA;;;AAgBA;AA8BR;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "smarthr-ui",
   "description": "SmartHR ui components built with React.",
-  "version": "99.7.1",
+  "version": "99.7.2",
   "author": "SmartHR-UI Team",
   "type": "module",
   "dependencies": {