smarthr-ui 97.0.0 → 98.1.0

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

@@ -6,10 +6,11 @@ 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.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 var hooks_useClick = require('../../../hooks/useClick.cjs');
+var hooks_useLatest = require('../../../hooks/useLatest.cjs');
 var hooks_useTheme = require('../../../hooks/useTheme.cjs');
 require('../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../intl/Localizer.cjs');
 require('../../../_virtual/dayjs.min.cjs');
 require('../../../intl/TimeFormatter.cjs');
 var libs_util = require('../../../libs/util.cjs');
@@ -66,6 +67,7 @@ const classNameGenerator = index.tv({
         },
     },
 });
+const SuffixButtons = React.memo(({ onClickClear, clearButtonRef, onClickIcon: onDelegateClickIcon, caretIconColor, destroyButtonIconAlt, classNames, }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(components_Button_UnstyledButton.UnstyledButton, { onClick: onClickClear, ref: clearButtonRef, className: classNames.clearButton, children: jsxRuntime.jsx(components_Icon_FaIcon.FaCircleXmarkIcon, { color: "TEXT_BLACK", alt: destroyButtonIconAlt, className: classNames.clearButtonIcon }) }), jsxRuntime.jsx("span", { role: "presentation", onClick: onDelegateClickIcon, className: classNames.caretDownLayout, children: jsxRuntime.jsx(components_Icon_FaIcon.FaCaretDownIcon, { color: caretIconColor, className: classNames.caretDownIcon }) })] })));
 const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled, readOnly, required, prefix, error, creatable, placeholder, autoComplete, dropdownHelpMessage, isLoading, width, dropdownWidth = 'auto', className, onChange, onChangeInput, onAdd, onSelect, onClear, onClearClick, onChangeSelected, onFocus, onBlur, onKeyPress, noResultText, style, ...rest }, ref) => {
     const theme = hooks_useTheme.useTheme();
     const { localize } = intl_useIntl.useIntl();
@@ -77,6 +79,24 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
     const [inputValue, setInputValue] = React.useState('');
     const [isComposing, setIsComposing] = React.useState(false);
     const [isEditing, setIsEditing] = React.useState(false);
+    const latest = hooks_useLatest.useLatest({
+        onChange,
+        onChangeInput,
+        onAdd,
+        onSelect,
+        onClear,
+        onClearClick,
+        onChangeSelected,
+        onFocus,
+        onBlur,
+        onKeyPress,
+        defaultItem,
+        selectedItem,
+        isFocused,
+        isExpanded,
+        isComposing,
+        isEditing,
+    });
     React.useImperativeHandle(ref, () => inputRef.current);
     const { options } = components_Combobox_useOptions.useSingleOptions({
         items,
@@ -91,49 +111,58 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
         dropdownWidth,
         onAdd,
         onSelect: React.useCallback((selected) => {
-            onSelect?.(selected);
-            onChangeSelected?.(selected);
-            // 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する
-            onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT);
+            latest.onSelect?.(selected);
+            latest.onChangeSelected?.(selected);
             // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう
             // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする
             requestAnimationFrame(() => {
                 setIsExpanded(false);
+                // HINT:
+                // - 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する
+                // - 対応するdropdownを閉じて以降にonChangeInputを発火する必要がある
+                //   - 先にclearしてしまうと意図せずこの要素のドロップダウンを閉じる前に他要素の再レンダリングを引き起こす可能性がある
+                //   - 例えばFilterDropdownなどで当comboboxを使っている場合、レイアウト上comboboxのdropdown以下の要素がクリックされた扱いになってしまい
+                //     FilterDropdownを意図せず閉じてしまうなどの挙動のバグを引き起こす可能性がある
+                latest.onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT);
             });
             setIsEditing(false);
-        }, [onChangeSelected, onSelect, onChangeInput]),
+        }, [latest]),
         isExpanded,
         isLoading,
         triggerRef: outerRef,
         noResultText,
     });
-    const selectDefaultItem = React.useMemo(() => (onSelect && defaultItem ? () => onSelect(defaultItem) : NOOP), [onSelect, defaultItem]);
+    const selectDefaultItem = React.useCallback(() => {
+        if (latest.onSelect && latest.defaultItem) {
+            latest.onSelect(latest.defaultItem);
+        }
+    }, [latest]);
     const focus = React.useCallback(() => {
-        onFocus?.();
+        latest.onFocus?.();
         inputRef.current?.focus();
         setIsFocused(true);
-        if (!isFocused) {
+        if (!latest.isFocused) {
             setIsExpanded(true);
         }
-    }, [onFocus, isFocused]);
+    }, [latest]);
     const unfocus = React.useCallback(() => {
-        if (!isFocused)
+        if (!latest.isFocused)
             return;
-        onBlur?.();
+        latest.onBlur?.();
         setIsFocused(false);
         setIsExpanded(false);
         setIsEditing(false);
-        if (selectedItem) {
-            setInputValue(index$1(selectedItem.label));
+        if (latest.selectedItem) {
+            setInputValue(index$1(latest.selectedItem.label));
         }
         else {
             selectDefaultItem();
         }
-    }, [isFocused, onBlur, selectedItem, selectDefaultItem]);
+    }, [selectDefaultItem, latest]);
     const onClickClear = React.useCallback((e) => {
         e.stopPropagation();
         let isExecutedPreventDefault = false;
-        onClearClick?.({
+        latest.onClearClick?.({
             ...e,
             preventDefault: () => {
                 e.preventDefault();
@@ -141,44 +170,43 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
             },
         });
         if (!isExecutedPreventDefault) {
-            onClear?.();
-            onChangeSelected?.(null);
+            latest.onClear?.();
+            latest.onChangeSelected?.(null);
             inputRef.current?.focus();
             setIsFocused(true);
             setIsExpanded(true);
         }
-    }, [onClearClick, onClear, onChangeSelected]);
+    }, [latest]);
     const onClickInput = React.useCallback((e) => {
         if (disabled || readOnly) {
             e.stopPropagation();
             return;
         }
         inputRef.current?.focus();
-        if (!isExpanded) {
+        if (!latest.isExpanded) {
             setIsExpanded(true);
         }
-    }, [disabled, readOnly, inputRef, isExpanded]);
-    const onDelegateClickIcon = onClickInput;
+    }, [disabled, readOnly, latest]);
     const actualOnChangeInput = React.useCallback((e) => {
-        onChange?.(e);
-        onChangeInput?.(e);
-        if (!isEditing)
+        latest.onChange?.(e);
+        latest.onChangeInput?.(e);
+        if (!latest.isEditing)
             setIsEditing(true);
         const { value } = e.currentTarget;
         setInputValue(value);
         if (value === '') {
-            onClear?.();
-            onChangeSelected?.(null);
+            latest.onClear?.();
+            latest.onChangeSelected?.(null);
         }
-    }, [isEditing, onChange, onChangeInput, onClear, onChangeSelected]);
+    }, [latest]);
     const onCompositionStart = React.useCallback(() => setIsComposing(true), []);
     const onCompositionEnd = React.useCallback(() => setIsComposing(false), []);
     const onKeyDownInput = React.useCallback((e) => {
-        if (isComposing) {
+        if (latest.isComposing) {
             return;
         }
         if (ESCAPE_KEY_REGEX.test(e.key)) {
-            if (isExpanded) {
+            if (latest.isExpanded) {
                 e.stopPropagation();
                 setIsExpanded(false);
             }
@@ -191,28 +219,26 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
                 e.preventDefault();
             }
             inputRef.current?.focus();
-            if (!isExpanded) {
+            if (!latest.isExpanded) {
                 setIsExpanded(true);
             }
         }
         onKeyDownListBox(e);
-    }, [isComposing, isExpanded, unfocus, onKeyDownListBox]);
+    }, [unfocus, onKeyDownListBox, latest]);
     // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で
     // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、
     // submitイベントが発生し、formが送信される場合がある
     const handleKeyPress = React.useCallback((e) => {
         if (e.key === 'Enter')
             e.preventDefault();
-        onKeyPress?.(e);
-    }, [onKeyPress]);
-    const caretIconColor = React.useMemo(() => {
-        if (isFocused)
-            return theme.textColor.black;
-        if (disabled || readOnly)
-            return theme.textColor.disabled;
-        return theme.textColor.grey;
-    }, [disabled, readOnly, isFocused, theme.textColor]);
-    hooks_useClick.useClick(React.useMemo(() => [outerRef, listBoxRef, clearButtonRef], [outerRef, listBoxRef, clearButtonRef]), isFocused || selectedItem ? NOOP : selectDefaultItem, unfocus);
+        latest.onKeyPress?.(e);
+    }, [latest]);
+    const caretIconColor = isFocused
+        ? theme.textColor.black
+        : disabled || readOnly
+            ? theme.textColor.disabled
+            : theme.textColor.grey;
+    hooks_useClick.useClick(React.useMemo(() => [outerRef, listBoxRef, clearButtonRef], [listBoxRef]), isFocused || selectedItem ? NOOP : selectDefaultItem, unfocus);
     // selectedItem.label はプリミティブ値でないデータ型の可能性があり、そのまま useEffect の依存配列に入れると意図せぬエフェクトの実行を引き起こしてしまう可能性があるので、プリミティブ値である string 型に変換したものを依存配列に入れています。
     const selectedItemLabelText = index$1(selectedItem?.label);
     React.useEffect(() => {
@@ -222,7 +248,7 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
         ...style,
         width: typeof width === 'number' ? `${width}px` : width,
     }), [style, width]);
-    const notSelected = selectedItem === null;
+    const hasSelectedItem = selectedItem !== null;
     const classNames = React.useMemo(() => {
         const { wrapper, input, caretDownLayout, caretDownIcon, clearButton, clearButtonIcon } = classNameGenerator();
         return {
@@ -230,17 +256,24 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
             input: input(),
             caretDownLayout: caretDownLayout(),
             caretDownIcon: caretDownIcon(),
-            clearButton: clearButton({ hidden: notSelected || disabled || readOnly }),
+            clearButton: clearButton({
+                hidden: !hasSelectedItem || disabled || readOnly,
+            }),
             clearButtonIcon: clearButtonIcon(),
         };
-    }, [notSelected, disabled, readOnly, className]);
+    }, [hasSelectedItem, disabled, readOnly, className]);
     const destroyButtonIconAlt = React.useMemo(() => localize({
         id: 'smarthr-ui/SingleCombobox/destroyButtonIconAlt',
         defaultText: 'クリア',
     }), [localize]);
     return (jsxRuntime.jsxs("div", { role: "group", className: classNames.wrapper, style: wrapperStyle, ref: outerRef, children: [jsxRuntime.jsx(components_Input_Input.Input, { ...rest, ref: inputRef, type: "text", role: "combobox", name: name, value: inputValue, disabled: disabled, readOnly: readOnly, required: required, autoComplete: autoComplete ?? 'off', "aria-haspopup": "listbox", "aria-controls": listBoxId, "aria-expanded": isFocused, "aria-activedescendant": activeOption?.id, "aria-autocomplete": "list", 
                 /* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */
-                placeholder: placeholder, onClick: onClickInput, onChange: actualOnChangeInput, onFocus: isFocused ? undefined : focus, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: onKeyDownInput, onKeyPress: handleKeyPress, error: error, prefix: prefix, suffix: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(components_Button_UnstyledButton.UnstyledButton, { onClick: onClickClear, ref: clearButtonRef, className: classNames.clearButton, children: jsxRuntime.jsx(components_Icon_FaIcon.FaCircleXmarkIcon, { color: "TEXT_BLACK", alt: destroyButtonIconAlt, className: classNames.clearButtonIcon }) }), jsxRuntime.jsx("span", { role: "presentation", onClick: onDelegateClickIcon, className: classNames.caretDownLayout, children: jsxRuntime.jsx(components_Icon_FaIcon.FaCaretDownIcon, { color: caretIconColor, className: classNames.caretDownIcon }) })] }), className: classNames.input, "data-smarthr-ui-input": "true" }), !readOnly && renderListBox()] }));
+                placeholder: placeholder, onClick: onClickInput, onChange: actualOnChangeInput, onFocus: isFocused ? undefined : focus, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: onKeyDownInput, onKeyPress: handleKeyPress, error: error, prefix: prefix, suffix: jsxRuntime.jsx(SuffixButtons, { onClickClear: onClickClear, clearButtonRef: clearButtonRef, onClickIcon: onClickInput, caretIconColor: caretIconColor, destroyButtonIconAlt: destroyButtonIconAlt, classNames: {
+                        clearButton: classNames.clearButton,
+                        clearButtonIcon: classNames.clearButtonIcon,
+                        caretDownLayout: classNames.caretDownLayout,
+                        caretDownIcon: classNames.caretDownIcon,
+                    } }), className: classNames.input, "data-smarthr-ui-input": "true" }), !readOnly && renderListBox()] }));
 };
 const SingleCombobox = libs_util.genericsForwardRef(ActualSingleCombobox);
 

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  useCallback,\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 { useTheme } from '../../../hooks/useTheme'\nimport { useIntl } from '../../../intl'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { UnstyledButton } from '../../Button'\nimport { FaCaretDownIcon, FaCircleXmarkIcon } from '../../Icon'\nimport { Input } from '../../Input'\nimport { useListbox } from '../useListbox'\nimport { useSingleOptions } from '../useOptions'\n\nimport type { ComboboxItem, AbstractProps as ComboboxProps } from '../types'\n\ntype AbstractProps<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> = AbstractProps<T> &\n  Omit<ComponentPropsWithoutRef<'input'>, keyof AbstractProps<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: 'smarthr-ui-SingleCombobox shr-inline-block',\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    ],\n    clearButtonIcon: [\n      'shr-block',\n      'group-focus-visible/clearButton:shr-focus-indicator group-focus-visible/clearButton:shr-rounded-full',\n    ],\n  },\n  variants: {\n    disabled: {\n      true: {\n        wrapper: 'shr-cursor-not-allowed',\n      },\n    },\n    hidden: {\n      true: {\n        clearButton: 'shr-hidden',\n      },\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 { localize } = useIntl()\n  const outerRef = 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>(ref, () => inputRef.current)\n\n  const { options } = useSingleOptions({\n    items,\n    selected: selectedItem,\n    creatable,\n    inputValue,\n    isFilteringDisabled: !isEditing,\n  })\n\n  const { renderListBox, activeOption, onKeyDownListBox, listBoxId, listBoxRef } = useListbox<T>({\n    options,\n    dropdownHelpMessage,\n    dropdownWidth,\n    onAdd,\n    onSelect: useCallback(\n      (selected: ComboboxItem<T>) => {\n        onSelect?.(selected)\n        onChangeSelected?.(selected)\n\n        // 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する\n        onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          setIsExpanded(false)\n        })\n\n        setIsEditing(false)\n      },\n      [onChangeSelected, onSelect, onChangeInput],\n    ),\n    isExpanded,\n    isLoading,\n    triggerRef: outerRef,\n    noResultText,\n  })\n\n  const selectDefaultItem = useMemo(\n    () => (onSelect && defaultItem ? () => onSelect(defaultItem) : NOOP),\n    [onSelect, defaultItem],\n  )\n\n  const focus = useCallback(() => {\n    onFocus?.()\n    inputRef.current?.focus()\n    setIsFocused(true)\n\n    if (!isFocused) {\n      setIsExpanded(true)\n    }\n  }, [onFocus, isFocused])\n  const unfocus = useCallback(() => {\n    if (!isFocused) return\n\n    onBlur?.()\n\n    setIsFocused(false)\n    setIsExpanded(false)\n    setIsEditing(false)\n\n    if (selectedItem) {\n      setInputValue(innerText(selectedItem.label))\n    } else {\n      selectDefaultItem()\n    }\n  }, [isFocused, onBlur, selectedItem, selectDefaultItem])\n  const onClickClear = useCallback(\n    (e: MouseEvent) => {\n      e.stopPropagation()\n\n      let isExecutedPreventDefault = false\n\n      onClearClick?.({\n        ...e,\n        preventDefault: () => {\n          e.preventDefault()\n          isExecutedPreventDefault = true\n        },\n      })\n\n      if (!isExecutedPreventDefault) {\n        onClear?.()\n        onChangeSelected?.(null)\n\n        inputRef.current?.focus()\n\n        setIsFocused(true)\n        setIsExpanded(true)\n      }\n    },\n    [onClearClick, onClear, onChangeSelected],\n  )\n  const onClickInput = useCallback(\n    (e: MouseEvent) => {\n      if (disabled || readOnly) {\n        e.stopPropagation()\n\n        return\n      }\n\n      inputRef.current?.focus()\n\n      if (!isExpanded) {\n        setIsExpanded(true)\n      }\n    },\n    [disabled, readOnly, inputRef, isExpanded],\n  )\n  const onDelegateClickIcon = onClickInput\n  const actualOnChangeInput = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e)\n      onChangeInput?.(e)\n\n      if (!isEditing) setIsEditing(true)\n\n      const { value } = e.currentTarget\n\n      setInputValue(value)\n\n      if (value === '') {\n        onClear?.()\n        onChangeSelected?.(null)\n      }\n    },\n    [isEditing, onChange, onChangeInput, onClear, onChangeSelected],\n  )\n  const onCompositionStart = useCallback(() => setIsComposing(true), [])\n  const onCompositionEnd = useCallback(() => setIsComposing(false), [])\n  const onKeyDownInput = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (isComposing) {\n        return\n      }\n\n      if (ESCAPE_KEY_REGEX.test(e.key)) {\n        if (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 (!isExpanded) {\n          setIsExpanded(true)\n        }\n      }\n      onKeyDownListBox(e)\n    },\n    [isComposing, isExpanded, unfocus, onKeyDownListBox],\n  )\n\n  // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n  // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n  // submitイベントが発生し、formが送信される場合がある\n  const handleKeyPress = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') e.preventDefault()\n\n      onKeyPress?.(e)\n    },\n    [onKeyPress],\n  )\n\n  const caretIconColor = useMemo(() => {\n    if (isFocused) return theme.textColor.black\n    if (disabled || readOnly) return theme.textColor.disabled\n\n    return theme.textColor.grey\n  }, [disabled, readOnly, isFocused, theme.textColor])\n\n  useClick(\n    useMemo(() => [outerRef, listBoxRef, clearButtonRef], [outerRef, listBoxRef, clearButtonRef]),\n    isFocused || selectedItem ? NOOP : selectDefaultItem,\n    unfocus,\n  )\n\n  // selectedItem.label はプリミティブ値でないデータ型の可能性があり、そのまま useEffect の依存配列に入れると意図せぬエフェクトの実行を引き起こしてしまう可能性があるので、プリミティブ値である string 型に変換したものを依存配列に入れています。\n  const selectedItemLabelText = innerText(selectedItem?.label)\n  useEffect(() => {\n    setInputValue(selectedItemLabelText)\n  }, [selectedItemLabelText])\n\n  const wrapperStyle = useMemo(\n    () => ({\n      ...style,\n      width: typeof width === 'number' ? `${width}px` : width,\n    }),\n    [style, width],\n  )\n\n  const notSelected = selectedItem === null\n\n  const classNames = useMemo(() => {\n    const { wrapper, input, caretDownLayout, caretDownIcon, clearButton, clearButtonIcon } =\n      classNameGenerator()\n\n    return {\n      wrapper: wrapper({ disabled, className }),\n      input: input(),\n      caretDownLayout: caretDownLayout(),\n      caretDownIcon: caretDownIcon(),\n      clearButton: clearButton({ hidden: notSelected || disabled || readOnly }),\n      clearButtonIcon: clearButtonIcon(),\n    }\n  }, [notSelected, disabled, readOnly, className])\n\n  const destroyButtonIconAlt = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/SingleCombobox/destroyButtonIconAlt',\n        defaultText: 'クリア',\n      }),\n    [localize],\n  )\n\n  return (\n    <div role=\"group\" className={classNames.wrapper} style={wrapperStyle} ref={outerRef}>\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={onClickInput}\n        onChange={actualOnChangeInput}\n        onFocus={isFocused ? undefined : focus}\n        onCompositionStart={onCompositionStart}\n        onCompositionEnd={onCompositionEnd}\n        onKeyDown={onKeyDownInput}\n        onKeyPress={handleKeyPress}\n        error={error}\n        prefix={prefix}\n        suffix={\n          <>\n            <UnstyledButton\n              onClick={onClickClear}\n              ref={clearButtonRef}\n              className={classNames.clearButton}\n            >\n              <FaCircleXmarkIcon\n                color=\"TEXT_BLACK\"\n                alt={destroyButtonIconAlt}\n                className={classNames.clearButtonIcon}\n              />\n            </UnstyledButton>\n            <span\n              role=\"presentation\"\n              onClick={onDelegateClickIcon}\n              className={classNames.caretDownLayout}\n            >\n              <FaCaretDownIcon color={caretIconColor} className={classNames.caretDownIcon} />\n            </span>\n          </>\n        }\n        className={classNames.input}\n        data-smarthr-ui-input=\"true\"\n      />\n      {!readOnly && renderListBox()}\n    </div>\n  )\n}\n\nexport const SingleCombobox = genericsForwardRef(ActualSingleCombobox)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA;AAEA;AACA;AAEA;AACE;AACA;;AAGF;AACE;AACE;AACA;AACA;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;;;AAGC;AACF;AACD;AACE;AACE;AACE;AACD;AACF;AACD;AACE;AACE;AACD;AACF;AACF;AACF;AAED;AAmCE;AACA;AACA;AACA;AACA;;;;;;;AASA;;AAEE;;;;AAID;AAED;;;;;AAKE;AAEI;AACA;;AAGA;;;;;AAMA;;;;;AAQJ;;AAED;AAED;AAKA;;AAEE;;;;;AAMF;AACA;AACE;;;;;;;;;;AAWE;;;AAGJ;;;AAMI;AACE;;;;;AAKD;;;AAIC;AAEA;;;;;AAQN;AAEI;;;;AAMA;;;;;;AASJ;AAEI;AACA;AAEA;;AAEA;;AAIA;;AAEE;;AAEJ;AAGF;AACA;AACA;;;;;;;;;;AAWW;AACL;;;;;;AAMA;;;;;;;;;;AAcN;AAEI;;AAEA;AACF;AAIF;AACE;AAAe;;AACW;AAE1B;AACF;AAEA;;;;;AAUA;AAEA;AAEI;AACA;AACD;AAIH;AAEA;AACE;;;;;;AAQE;;;;;AAQE;AACA;AACD;AAIL;;AAmBM;AAsCR;;;"}
+{"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  useCallback,\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 { useIntl } from '../../../intl'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { UnstyledButton } from '../../Button'\nimport { FaCaretDownIcon, FaCircleXmarkIcon } from '../../Icon'\nimport { Input } from '../../Input'\nimport { useListbox } from '../useListbox'\nimport { useSingleOptions } from '../useOptions'\n\nimport type { ComboboxItem, AbstractProps as ComboboxProps } from '../types'\n\ntype AbstractProps<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> = AbstractProps<T> &\n  Omit<ComponentPropsWithoutRef<'input'>, keyof AbstractProps<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: 'smarthr-ui-SingleCombobox shr-inline-block',\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    ],\n    clearButtonIcon: [\n      'shr-block',\n      'group-focus-visible/clearButton:shr-focus-indicator group-focus-visible/clearButton:shr-rounded-full',\n    ],\n  },\n  variants: {\n    disabled: {\n      true: {\n        wrapper: 'shr-cursor-not-allowed',\n      },\n    },\n    hidden: {\n      true: {\n        clearButton: 'shr-hidden',\n      },\n    },\n  },\n})\n\ntype SuffixButtonsProps = {\n  onClickClear: (e: MouseEvent) => void\n  clearButtonRef: RefObject<HTMLButtonElement>\n  onClickIcon: (e: MouseEvent) => void\n  caretIconColor: string\n  destroyButtonIconAlt: string\n  classNames: {\n    clearButton: string\n    clearButtonIcon: string\n    caretDownLayout: string\n    caretDownIcon: string\n  }\n}\n\nconst SuffixButtons = memo<SuffixButtonsProps>(\n  ({\n    onClickClear,\n    clearButtonRef,\n    onClickIcon: onDelegateClickIcon,\n    caretIconColor,\n    destroyButtonIconAlt,\n    classNames,\n  }) => (\n    <>\n      <UnstyledButton\n        onClick={onClickClear}\n        ref={clearButtonRef}\n        className={classNames.clearButton}\n      >\n        <FaCircleXmarkIcon\n          color=\"TEXT_BLACK\"\n          alt={destroyButtonIconAlt}\n          className={classNames.clearButtonIcon}\n        />\n      </UnstyledButton>\n      <span\n        role=\"presentation\"\n        onClick={onDelegateClickIcon}\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 { localize } = useIntl()\n  const outerRef = 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  const latest = useLatest({\n    onChange,\n    onChangeInput,\n    onAdd,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    defaultItem,\n    selectedItem,\n    isFocused,\n    isExpanded,\n    isComposing,\n    isEditing,\n  })\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => inputRef.current)\n\n  const { options } = useSingleOptions({\n    items,\n    selected: selectedItem,\n    creatable,\n    inputValue,\n    isFilteringDisabled: !isEditing,\n  })\n\n  const { renderListBox, activeOption, onKeyDownListBox, listBoxId, listBoxRef } = useListbox<T>({\n    options,\n    dropdownHelpMessage,\n    dropdownWidth,\n    onAdd,\n    onSelect: useCallback(\n      (selected: ComboboxItem<T>) => {\n        latest.onSelect?.(selected)\n        latest.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          latest.onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n        })\n\n        setIsEditing(false)\n      },\n      [latest],\n    ),\n    isExpanded,\n    isLoading,\n    triggerRef: outerRef,\n    noResultText,\n  })\n\n  const selectDefaultItem = useCallback(() => {\n    if (latest.onSelect && latest.defaultItem) {\n      latest.onSelect(latest.defaultItem)\n    }\n  }, [latest])\n\n  const focus = useCallback(() => {\n    latest.onFocus?.()\n    inputRef.current?.focus()\n    setIsFocused(true)\n\n    if (!latest.isFocused) {\n      setIsExpanded(true)\n    }\n  }, [latest])\n  const unfocus = useCallback(() => {\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  }, [selectDefaultItem, latest])\n  const onClickClear = useCallback(\n    (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    [latest],\n  )\n  const onClickInput = useCallback(\n    (e: MouseEvent) => {\n      if (disabled || readOnly) {\n        e.stopPropagation()\n\n        return\n      }\n\n      inputRef.current?.focus()\n\n      if (!latest.isExpanded) {\n        setIsExpanded(true)\n      }\n    },\n    [disabled, readOnly, latest],\n  )\n  const actualOnChangeInput = useCallback(\n    (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    [latest],\n  )\n  const onCompositionStart = useCallback(() => setIsComposing(true), [])\n  const onCompositionEnd = useCallback(() => setIsComposing(false), [])\n  const onKeyDownInput = useCallback(\n    (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      onKeyDownListBox(e)\n    },\n    [unfocus, onKeyDownListBox, latest],\n  )\n\n  // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n  // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n  // submitイベントが発生し、formが送信される場合がある\n  const handleKeyPress = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') e.preventDefault()\n\n      latest.onKeyPress?.(e)\n    },\n    [latest],\n  )\n\n  const caretIconColor = isFocused\n    ? theme.textColor.black\n    : disabled || readOnly\n      ? theme.textColor.disabled\n      : theme.textColor.grey\n\n  useClick(\n    useMemo(() => [outerRef, listBoxRef, clearButtonRef], [listBoxRef]),\n    isFocused || selectedItem ? NOOP : selectDefaultItem,\n    unfocus,\n  )\n\n  // selectedItem.label はプリミティブ値でないデータ型の可能性があり、そのまま useEffect の依存配列に入れると意図せぬエフェクトの実行を引き起こしてしまう可能性があるので、プリミティブ値である string 型に変換したものを依存配列に入れています。\n  const selectedItemLabelText = innerText(selectedItem?.label)\n  useEffect(() => {\n    setInputValue(selectedItemLabelText)\n  }, [selectedItemLabelText])\n\n  const wrapperStyle = useMemo(\n    () => ({\n      ...style,\n      width: typeof width === 'number' ? `${width}px` : width,\n    }),\n    [style, width],\n  )\n\n  const hasSelectedItem = selectedItem !== null\n\n  const classNames = useMemo(() => {\n    const { wrapper, input, caretDownLayout, caretDownIcon, clearButton, clearButtonIcon } =\n      classNameGenerator()\n\n    return {\n      wrapper: wrapper({ disabled, className }),\n      input: input(),\n      caretDownLayout: caretDownLayout(),\n      caretDownIcon: caretDownIcon(),\n      clearButton: clearButton({\n        hidden: !hasSelectedItem || disabled || readOnly,\n      }),\n      clearButtonIcon: clearButtonIcon(),\n    }\n  }, [hasSelectedItem, disabled, readOnly, className])\n\n  const destroyButtonIconAlt = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/SingleCombobox/destroyButtonIconAlt',\n        defaultText: 'クリア',\n      }),\n    [localize],\n  )\n\n  return (\n    <div role=\"group\" className={classNames.wrapper} style={wrapperStyle} ref={outerRef}>\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={onClickInput}\n        onChange={actualOnChangeInput}\n        onFocus={isFocused ? undefined : focus}\n        onCompositionStart={onCompositionStart}\n        onCompositionEnd={onCompositionEnd}\n        onKeyDown={onKeyDownInput}\n        onKeyPress={handleKeyPress}\n        error={error}\n        prefix={prefix}\n        suffix={\n          <SuffixButtons\n            onClickClear={onClickClear}\n            clearButtonRef={clearButtonRef}\n            onClickIcon={onClickInput}\n            caretIconColor={caretIconColor}\n            destroyButtonIconAlt={destroyButtonIconAlt}\n            classNames={{\n              clearButton: classNames.clearButton,\n              clearButtonIcon: classNames.clearButtonIcon,\n              caretDownLayout: classNames.caretDownLayout,\n              caretDownIcon: classNames.caretDownIcon,\n            }}\n          />\n        }\n        className={classNames.input}\n        data-smarthr-ui-input=\"true\"\n      />\n      {!readOnly && renderListBox()}\n    </div>\n  )\n}\n\nexport const SingleCombobox = genericsForwardRef(ActualSingleCombobox)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA;AAEA;AACA;AAEA;AACE;AACA;;AAGF;AACE;AACE;AACA;AACA;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;;;AAGC;AACF;AACD;AACE;AACE;AACE;AACD;AACF;AACD;AACE;AACE;AACD;AACF;AACF;AACF;AAgBD;AAgCA;AAmCE;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;AAwBC;;AAID;;AAEE;;;;AAID;AAED;;;;;AAKE;AAEI;AACA;;;;;;;;;;;AAYE;AACF;;AAGF;;;AAKF;;AAED;AAED;;AAEI;;AAEJ;AAEA;AACE;AACA;;AAGA;;;AAGF;AACA;;;AAGE;;;;AAMA;;;;AAGE;;AAEJ;AACA;;;;AAOM;;;;;AAKD;;AAGC;AACA;AAEA;;;;AAKJ;AAGF;AAEI;;;;AAMA;AAEA;;;;AAMJ;AAEI;AACA;;;AAIA;;AAIA;AACE;AACA;;AAEJ;AAGF;AACA;AACA;AAEI;;;;AAKE;;;;;AAIK;AACL;;;;;;AAMA;AAEA;;;;;;;;;AAYN;AAEI;;AAEA;AACF;;AAKA;;AAEE;AACA;AAEJ;;;;;AAUA;AAEA;AAEI;AACA;AACD;AAIH;AAEA;AACE;;;;;;;AASI;;;;;;AASA;AACA;AACD;AAIL;;AAmBM;;;;;AAsBK;AASb;;;"}

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

@@ -1,13 +1,14 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useRef, useState, useImperativeHandle, useCallback, useMemo, useEffect } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { memo, useRef, useState, useImperativeHandle, useCallback, useMemo, useEffect } 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.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import { useClick } from '../../../hooks/useClick.js';
+import { useLatest } from '../../../hooks/useLatest.js';
 import { useTheme } from '../../../hooks/useTheme.js';
 import '../../../intl/IntlProvider.js';
 import { useIntl } from '../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../intl/Localizer.js';
 import '../../../_virtual/dayjs.min.js';
 import '../../../intl/TimeFormatter.js';
 import { genericsForwardRef } from '../../../libs/util.js';
@@ -64,6 +65,7 @@ const classNameGenerator = ce({
         },
     },
 });
+const SuffixButtons = memo(({ onClickClear, clearButtonRef, onClickIcon: onDelegateClickIcon, caretIconColor, destroyButtonIconAlt, classNames, }) => (jsxs(Fragment, { children: [jsx(UnstyledButton, { onClick: onClickClear, ref: clearButtonRef, className: classNames.clearButton, children: jsx(FaCircleXmarkIcon, { color: "TEXT_BLACK", alt: destroyButtonIconAlt, className: classNames.clearButtonIcon }) }), jsx("span", { role: "presentation", onClick: onDelegateClickIcon, className: classNames.caretDownLayout, children: jsx(FaCaretDownIcon, { color: caretIconColor, className: classNames.caretDownIcon }) })] })));
 const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled, readOnly, required, prefix, error, creatable, placeholder, autoComplete, dropdownHelpMessage, isLoading, width, dropdownWidth = 'auto', className, onChange, onChangeInput, onAdd, onSelect, onClear, onClearClick, onChangeSelected, onFocus, onBlur, onKeyPress, noResultText, style, ...rest }, ref) => {
     const theme = useTheme();
     const { localize } = useIntl();
@@ -75,6 +77,24 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
     const [inputValue, setInputValue] = useState('');
     const [isComposing, setIsComposing] = useState(false);
     const [isEditing, setIsEditing] = useState(false);
+    const latest = useLatest({
+        onChange,
+        onChangeInput,
+        onAdd,
+        onSelect,
+        onClear,
+        onClearClick,
+        onChangeSelected,
+        onFocus,
+        onBlur,
+        onKeyPress,
+        defaultItem,
+        selectedItem,
+        isFocused,
+        isExpanded,
+        isComposing,
+        isEditing,
+    });
     useImperativeHandle(ref, () => inputRef.current);
     const { options } = useSingleOptions({
         items,
@@ -89,49 +109,58 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
         dropdownWidth,
         onAdd,
         onSelect: useCallback((selected) => {
-            onSelect?.(selected);
-            onChangeSelected?.(selected);
-            // 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する
-            onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT);
+            latest.onSelect?.(selected);
+            latest.onChangeSelected?.(selected);
             // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう
             // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする
             requestAnimationFrame(() => {
                 setIsExpanded(false);
+                // HINT:
+                // - 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する
+                // - 対応するdropdownを閉じて以降にonChangeInputを発火する必要がある
+                //   - 先にclearしてしまうと意図せずこの要素のドロップダウンを閉じる前に他要素の再レンダリングを引き起こす可能性がある
+                //   - 例えばFilterDropdownなどで当comboboxを使っている場合、レイアウト上comboboxのdropdown以下の要素がクリックされた扱いになってしまい
+                //     FilterDropdownを意図せず閉じてしまうなどの挙動のバグを引き起こす可能性がある
+                latest.onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT);
             });
             setIsEditing(false);
-        }, [onChangeSelected, onSelect, onChangeInput]),
+        }, [latest]),
         isExpanded,
         isLoading,
         triggerRef: outerRef,
         noResultText,
     });
-    const selectDefaultItem = useMemo(() => (onSelect && defaultItem ? () => onSelect(defaultItem) : NOOP), [onSelect, defaultItem]);
+    const selectDefaultItem = useCallback(() => {
+        if (latest.onSelect && latest.defaultItem) {
+            latest.onSelect(latest.defaultItem);
+        }
+    }, [latest]);
     const focus = useCallback(() => {
-        onFocus?.();
+        latest.onFocus?.();
         inputRef.current?.focus();
         setIsFocused(true);
-        if (!isFocused) {
+        if (!latest.isFocused) {
             setIsExpanded(true);
         }
-    }, [onFocus, isFocused]);
+    }, [latest]);
     const unfocus = useCallback(() => {
-        if (!isFocused)
+        if (!latest.isFocused)
             return;
-        onBlur?.();
+        latest.onBlur?.();
         setIsFocused(false);
         setIsExpanded(false);
         setIsEditing(false);
-        if (selectedItem) {
-            setInputValue(innerText(selectedItem.label));
+        if (latest.selectedItem) {
+            setInputValue(innerText(latest.selectedItem.label));
         }
         else {
             selectDefaultItem();
         }
-    }, [isFocused, onBlur, selectedItem, selectDefaultItem]);
+    }, [selectDefaultItem, latest]);
     const onClickClear = useCallback((e) => {
         e.stopPropagation();
         let isExecutedPreventDefault = false;
-        onClearClick?.({
+        latest.onClearClick?.({
             ...e,
             preventDefault: () => {
                 e.preventDefault();
@@ -139,44 +168,43 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
             },
         });
         if (!isExecutedPreventDefault) {
-            onClear?.();
-            onChangeSelected?.(null);
+            latest.onClear?.();
+            latest.onChangeSelected?.(null);
             inputRef.current?.focus();
             setIsFocused(true);
             setIsExpanded(true);
         }
-    }, [onClearClick, onClear, onChangeSelected]);
+    }, [latest]);
     const onClickInput = useCallback((e) => {
         if (disabled || readOnly) {
             e.stopPropagation();
             return;
         }
         inputRef.current?.focus();
-        if (!isExpanded) {
+        if (!latest.isExpanded) {
             setIsExpanded(true);
         }
-    }, [disabled, readOnly, inputRef, isExpanded]);
-    const onDelegateClickIcon = onClickInput;
+    }, [disabled, readOnly, latest]);
     const actualOnChangeInput = useCallback((e) => {
-        onChange?.(e);
-        onChangeInput?.(e);
-        if (!isEditing)
+        latest.onChange?.(e);
+        latest.onChangeInput?.(e);
+        if (!latest.isEditing)
             setIsEditing(true);
         const { value } = e.currentTarget;
         setInputValue(value);
         if (value === '') {
-            onClear?.();
-            onChangeSelected?.(null);
+            latest.onClear?.();
+            latest.onChangeSelected?.(null);
         }
-    }, [isEditing, onChange, onChangeInput, onClear, onChangeSelected]);
+    }, [latest]);
     const onCompositionStart = useCallback(() => setIsComposing(true), []);
     const onCompositionEnd = useCallback(() => setIsComposing(false), []);
     const onKeyDownInput = useCallback((e) => {
-        if (isComposing) {
+        if (latest.isComposing) {
             return;
         }
         if (ESCAPE_KEY_REGEX.test(e.key)) {
-            if (isExpanded) {
+            if (latest.isExpanded) {
                 e.stopPropagation();
                 setIsExpanded(false);
             }
@@ -189,28 +217,26 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
                 e.preventDefault();
             }
             inputRef.current?.focus();
-            if (!isExpanded) {
+            if (!latest.isExpanded) {
                 setIsExpanded(true);
             }
         }
         onKeyDownListBox(e);
-    }, [isComposing, isExpanded, unfocus, onKeyDownListBox]);
+    }, [unfocus, onKeyDownListBox, latest]);
     // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で
     // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、
     // submitイベントが発生し、formが送信される場合がある
     const handleKeyPress = useCallback((e) => {
         if (e.key === 'Enter')
             e.preventDefault();
-        onKeyPress?.(e);
-    }, [onKeyPress]);
-    const caretIconColor = useMemo(() => {
-        if (isFocused)
-            return theme.textColor.black;
-        if (disabled || readOnly)
-            return theme.textColor.disabled;
-        return theme.textColor.grey;
-    }, [disabled, readOnly, isFocused, theme.textColor]);
-    useClick(useMemo(() => [outerRef, listBoxRef, clearButtonRef], [outerRef, listBoxRef, clearButtonRef]), isFocused || selectedItem ? NOOP : selectDefaultItem, unfocus);
+        latest.onKeyPress?.(e);
+    }, [latest]);
+    const caretIconColor = isFocused
+        ? theme.textColor.black
+        : disabled || readOnly
+            ? theme.textColor.disabled
+            : theme.textColor.grey;
+    useClick(useMemo(() => [outerRef, listBoxRef, clearButtonRef], [listBoxRef]), isFocused || selectedItem ? NOOP : selectDefaultItem, unfocus);
     // selectedItem.label はプリミティブ値でないデータ型の可能性があり、そのまま useEffect の依存配列に入れると意図せぬエフェクトの実行を引き起こしてしまう可能性があるので、プリミティブ値である string 型に変換したものを依存配列に入れています。
     const selectedItemLabelText = innerText(selectedItem?.label);
     useEffect(() => {
@@ -220,7 +246,7 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
         ...style,
         width: typeof width === 'number' ? `${width}px` : width,
     }), [style, width]);
-    const notSelected = selectedItem === null;
+    const hasSelectedItem = selectedItem !== null;
     const classNames = useMemo(() => {
         const { wrapper, input, caretDownLayout, caretDownIcon, clearButton, clearButtonIcon } = classNameGenerator();
         return {
@@ -228,17 +254,24 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
             input: input(),
             caretDownLayout: caretDownLayout(),
             caretDownIcon: caretDownIcon(),
-            clearButton: clearButton({ hidden: notSelected || disabled || readOnly }),
+            clearButton: clearButton({
+                hidden: !hasSelectedItem || disabled || readOnly,
+            }),
             clearButtonIcon: clearButtonIcon(),
         };
-    }, [notSelected, disabled, readOnly, className]);
+    }, [hasSelectedItem, disabled, readOnly, className]);
     const destroyButtonIconAlt = useMemo(() => localize({
         id: 'smarthr-ui/SingleCombobox/destroyButtonIconAlt',
         defaultText: 'クリア',
     }), [localize]);
     return (jsxs("div", { role: "group", className: classNames.wrapper, style: wrapperStyle, ref: outerRef, children: [jsx(Input, { ...rest, ref: inputRef, type: "text", role: "combobox", name: name, value: inputValue, disabled: disabled, readOnly: readOnly, required: required, autoComplete: autoComplete ?? 'off', "aria-haspopup": "listbox", "aria-controls": listBoxId, "aria-expanded": isFocused, "aria-activedescendant": activeOption?.id, "aria-autocomplete": "list", 
                 /* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */
-                placeholder: placeholder, onClick: onClickInput, onChange: actualOnChangeInput, onFocus: isFocused ? undefined : focus, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: onKeyDownInput, onKeyPress: handleKeyPress, error: error, prefix: prefix, suffix: jsxs(Fragment, { children: [jsx(UnstyledButton, { onClick: onClickClear, ref: clearButtonRef, className: classNames.clearButton, children: jsx(FaCircleXmarkIcon, { color: "TEXT_BLACK", alt: destroyButtonIconAlt, className: classNames.clearButtonIcon }) }), jsx("span", { role: "presentation", onClick: onDelegateClickIcon, className: classNames.caretDownLayout, children: jsx(FaCaretDownIcon, { color: caretIconColor, className: classNames.caretDownIcon }) })] }), className: classNames.input, "data-smarthr-ui-input": "true" }), !readOnly && renderListBox()] }));
+                placeholder: placeholder, onClick: onClickInput, onChange: actualOnChangeInput, onFocus: isFocused ? undefined : focus, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: onKeyDownInput, onKeyPress: handleKeyPress, error: error, prefix: prefix, suffix: jsx(SuffixButtons, { onClickClear: onClickClear, clearButtonRef: clearButtonRef, onClickIcon: onClickInput, caretIconColor: caretIconColor, destroyButtonIconAlt: destroyButtonIconAlt, classNames: {
+                        clearButton: classNames.clearButton,
+                        clearButtonIcon: classNames.clearButtonIcon,
+                        caretDownLayout: classNames.caretDownLayout,
+                        caretDownIcon: classNames.caretDownIcon,
+                    } }), className: classNames.input, "data-smarthr-ui-input": "true" }), !readOnly && renderListBox()] }));
 };
 const SingleCombobox = genericsForwardRef(ActualSingleCombobox);