@zenkigen-inc/component-ui 1.21.0 → 1.21.1

package/dist/index.d.mts

@@ -116,6 +116,12 @@ type ComboboxProps = PropsWithChildren<{
     inputValue: string;
     /** 入力変更時のコールバック */
     onInputChange: (value: string) => void;
+    /**
+     * クリアボタンのクリック時に呼ばれるコールバック。
+     * このコールバックを渡したときのみクリアボタンが表示される（TextInput と同一仕様）。
+     * 値のクリア（`onChange(null, null)` / `onInputChange('')`）は利用者側で行う。
+     */
+    onClickClearButton?: () => void;
     /** popup の開閉状態（任意、controlled） */
     isOpen?: boolean;
     /** 開閉変更時のコールバック */
@@ -165,7 +171,7 @@ declare function ComboboxList({ children, maxHeight: maxHeightProp }: ComboboxLi
 declare function ComboboxLoading(): react.JSX.Element;
 declare function ComboboxEmpty(): react.JSX.Element;
 
-declare function ComboboxBase({ children, value, onChange, inputValue, onInputChange, isOpen: isOpenProp, onOpenChange, size, variant, placeholder, isError, isDisabled, width, maxWidth, listMaxHeight, matchListToTrigger, }: ComboboxProps): react.JSX.Element;
+declare function ComboboxBase({ children, value, onChange, inputValue, onInputChange, onClickClearButton, isOpen: isOpenProp, onOpenChange, size, variant, placeholder, isError, isDisabled, width, maxWidth, listMaxHeight, matchListToTrigger, }: ComboboxProps): react.JSX.Element;
 declare const Combobox: typeof ComboboxBase & {
     Input: typeof ComboboxInput;
     List: typeof ComboboxList;

package/dist/index.d.ts

@@ -116,6 +116,12 @@ type ComboboxProps = PropsWithChildren<{
     inputValue: string;
     /** 入力変更時のコールバック */
     onInputChange: (value: string) => void;
+    /**
+     * クリアボタンのクリック時に呼ばれるコールバック。
+     * このコールバックを渡したときのみクリアボタンが表示される（TextInput と同一仕様）。
+     * 値のクリア（`onChange(null, null)` / `onInputChange('')`）は利用者側で行う。
+     */
+    onClickClearButton?: () => void;
     /** popup の開閉状態（任意、controlled） */
     isOpen?: boolean;
     /** 開閉変更時のコールバック */
@@ -165,7 +171,7 @@ declare function ComboboxList({ children, maxHeight: maxHeightProp }: ComboboxLi
 declare function ComboboxLoading(): react.JSX.Element;
 declare function ComboboxEmpty(): react.JSX.Element;
 
-declare function ComboboxBase({ children, value, onChange, inputValue, onInputChange, isOpen: isOpenProp, onOpenChange, size, variant, placeholder, isError, isDisabled, width, maxWidth, listMaxHeight, matchListToTrigger, }: ComboboxProps): react.JSX.Element;
+declare function ComboboxBase({ children, value, onChange, inputValue, onInputChange, onClickClearButton, isOpen: isOpenProp, onOpenChange, size, variant, placeholder, isError, isDisabled, width, maxWidth, listMaxHeight, matchListToTrigger, }: ComboboxProps): react.JSX.Element;
 declare const Combobox: typeof ComboboxBase & {
     Input: typeof ComboboxInput;
     List: typeof ComboboxList;

package/dist/index.js

@@ -746,9 +746,9 @@ function ComboboxInput({ autoFocus, children }) {
     setInputElementRef,
     handleKeyDown,
     handleInputBlur,
-    clearValue
+    onClickClearButton
   } = useComboboxContext("Combobox.Input");
-  const isClearButtonVisible = inputValue.length > 0 && !isDisabled;
+  const isClearButtonVisible = onClickClearButton != null && inputValue.length > 0 && !isDisabled;
   const isEffectivelyOpen = isOpen && hasOpenableContent2;
   const activeItem = activeIndex !== null ? items[activeIndex] : null;
   const activeId = activeItem != null ? `${baseId}-option-${activeItem.value}` : null;
@@ -767,8 +767,8 @@ function ComboboxInput({ autoFocus, children }) {
     inputRef.current?.focus();
   }, [isOpen, setIsOpen, inputRef]);
   const handleClear = (0, import_react10.useCallback)(() => {
-    clearValue();
-  }, [clearValue]);
+    onClickClearButton?.();
+  }, [onClickClearButton]);
   const setRef = (0, import_react10.useCallback)(
     (node) => {
       setInputElementRef(node);
@@ -1260,14 +1260,12 @@ function useCombobox(params) {
     },
     [setIsOpen]
   );
-  const clearValue = (0, import_react17.useCallback)(() => {
-    committedInputValueRef.current = "";
-    paramsRef.current.onChange(null, null);
-    paramsRef.current.onInputChange("");
-    setActiveIndexState(null);
-    activeValueRef.current = null;
-    inputRef.current?.focus();
-  }, []);
+  (0, import_react17.useEffect)(() => {
+    if (params.inputValue === "" && params.value === null) {
+      setActiveIndexState(null);
+      activeValueRef.current = null;
+    }
+  }, [params.inputValue, params.value]);
   const moveActive = (0, import_react17.useCallback)((direction) => {
     const currentItems = itemsRef.current;
     const enabledIndices = currentItems.flatMap((item, i) => item.isDisabled ? [] : [i]);
@@ -1365,7 +1363,6 @@ function useCombobox(params) {
     items,
     setItems,
     selectValue,
-    clearValue,
     revertInputToCommitted,
     inputRef,
     handleKeyDown
@@ -1389,6 +1386,7 @@ function ComboboxBase({
   onChange,
   inputValue,
   onInputChange,
+  onClickClearButton,
   isOpen: isOpenProp,
   onOpenChange,
   size = "medium",
@@ -1507,7 +1505,7 @@ function ComboboxBase({
       setIsOpen,
       selectedValue: value,
       selectValue: combobox.selectValue,
-      clearValue: combobox.clearValue,
+      onClickClearButton,
       activeIndex: combobox.activeIndex,
       setActiveIndex: combobox.setActiveIndex,
       inputMode: combobox.inputMode,
@@ -1538,7 +1536,7 @@ function ComboboxBase({
       setIsOpen,
       value,
       combobox.selectValue,
-      combobox.clearValue,
+      onClickClearButton,
       combobox.activeIndex,
       combobox.setActiveIndex,
       combobox.inputMode,

package/dist/index.mjs

@@ -665,9 +665,9 @@ function ComboboxInput({ autoFocus, children }) {
     setInputElementRef,
     handleKeyDown,
     handleInputBlur,
-    clearValue
+    onClickClearButton
   } = useComboboxContext("Combobox.Input");
-  const isClearButtonVisible = inputValue.length > 0 && !isDisabled;
+  const isClearButtonVisible = onClickClearButton != null && inputValue.length > 0 && !isDisabled;
   const isEffectivelyOpen = isOpen && hasOpenableContent2;
   const activeItem = activeIndex !== null ? items[activeIndex] : null;
   const activeId = activeItem != null ? `${baseId}-option-${activeItem.value}` : null;
@@ -686,8 +686,8 @@ function ComboboxInput({ autoFocus, children }) {
     inputRef.current?.focus();
   }, [isOpen, setIsOpen, inputRef]);
   const handleClear = useCallback2(() => {
-    clearValue();
-  }, [clearValue]);
+    onClickClearButton?.();
+  }, [onClickClearButton]);
   const setRef = useCallback2(
     (node) => {
       setInputElementRef(node);
@@ -1179,14 +1179,12 @@ function useCombobox(params) {
     },
     [setIsOpen]
   );
-  const clearValue = useCallback4(() => {
-    committedInputValueRef.current = "";
-    paramsRef.current.onChange(null, null);
-    paramsRef.current.onInputChange("");
-    setActiveIndexState(null);
-    activeValueRef.current = null;
-    inputRef.current?.focus();
-  }, []);
+  useEffect4(() => {
+    if (params.inputValue === "" && params.value === null) {
+      setActiveIndexState(null);
+      activeValueRef.current = null;
+    }
+  }, [params.inputValue, params.value]);
   const moveActive = useCallback4((direction) => {
     const currentItems = itemsRef.current;
     const enabledIndices = currentItems.flatMap((item, i) => item.isDisabled ? [] : [i]);
@@ -1284,7 +1282,6 @@ function useCombobox(params) {
     items,
     setItems,
     selectValue,
-    clearValue,
     revertInputToCommitted,
     inputRef,
     handleKeyDown
@@ -1308,6 +1305,7 @@ function ComboboxBase({
   onChange,
   inputValue,
   onInputChange,
+  onClickClearButton,
   isOpen: isOpenProp,
   onOpenChange,
   size = "medium",
@@ -1426,7 +1424,7 @@ function ComboboxBase({
       setIsOpen,
       selectedValue: value,
       selectValue: combobox.selectValue,
-      clearValue: combobox.clearValue,
+      onClickClearButton,
       activeIndex: combobox.activeIndex,
       setActiveIndex: combobox.setActiveIndex,
       inputMode: combobox.inputMode,
@@ -1457,7 +1455,7 @@ function ComboboxBase({
       setIsOpen,
       value,
       combobox.selectValue,
-      combobox.clearValue,
+      onClickClearButton,
       combobox.activeIndex,
       combobox.setActiveIndex,
       combobox.inputMode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenkigen-inc/component-ui",
-  "version": "1.21.0",
+  "version": "1.21.1",
   "repository": "https://github.com/zenkigen/zenkigen-component",
   "license": "MIT",
   "publishConfig": {
@@ -38,9 +38,9 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.27.19",
-    "@zenkigen-inc/component-config": "1.21.0",
-    "@zenkigen-inc/component-icons": "1.21.0",
-    "@zenkigen-inc/component-theme": "1.21.0",
+    "@zenkigen-inc/component-config": "1.21.1",
+    "@zenkigen-inc/component-icons": "1.21.1",
+    "@zenkigen-inc/component-theme": "1.21.1",
     "clsx": "2.1.1",
     "react-day-picker": "9.14.0"
   }