@yamada-ui/autocomplete 1.6.9-dev-20241212135810 → 1.6.9-dev-20241213210300

package/dist/use-autocomplete-option.js

@@ -56,7 +56,7 @@ var useAutocompleteOption = (props) => {
     inputRef,
     omitSelectedValues,
     setFocusedIndex,
-    value,
+    value: selectedValue,
     optionProps,
     onChange,
     onClose,
@@ -64,43 +64,44 @@ var useAutocompleteOption = (props) => {
   } = useAutocompleteContext();
   const uuid = (0, import_react.useId)();
   const itemRef = (0, import_react.useRef)(null);
-  let {
-    id,
+  const {
+    id = uuid,
     children,
     closeOnSelect: customCloseOnSelect,
-    disabled,
-    focusable,
-    icon: customIcon,
     isDisabled,
+    disabled = isDisabled,
     isFocusable,
+    focusable = isFocusable,
+    icon: customIcon,
     value: optionValue,
     ...computedProps
   } = { ...optionProps, ...props };
-  disabled != null ? disabled : disabled = isDisabled;
-  focusable != null ? focusable : focusable = isFocusable;
   const trulyDisabled = !!disabled && !focusable;
   const { descendants, index, register } = useAutocompleteDescendant({
     disabled: trulyDisabled
   });
   const values = descendants.values();
   const frontValues = values.slice(0, index);
-  const isMulti = (0, import_utils2.isArray)(value);
-  const isDuplicated = frontValues.some(
-    ({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")
-  );
-  const isSelected = !isDuplicated && (!isMulti ? (optionValue != null ? optionValue : "") === value : value.includes(optionValue != null ? optionValue : ""));
-  const isTarget = "target" in ((_b = (_a = itemRef.current) == null ? void 0 : _a.dataset) != null ? _b : {});
-  const isFocused = index === focusedIndex;
-  id != null ? id : id = uuid;
-  if ((0, import_utils2.isUndefined)(optionValue)) {
-    if ((0, import_utils2.isString)(children) || (0, import_utils2.isNumber)(children)) {
-      optionValue = children.toString();
-    } else {
-      console.warn(
-        `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
-      );
+  const multi = (0, import_utils2.isArray)(selectedValue);
+  const target = "target" in ((_b = (_a = itemRef.current) == null ? void 0 : _a.dataset) != null ? _b : {});
+  const focused = index === focusedIndex;
+  const value = (0, import_react.useMemo)(() => {
+    let value2 = optionValue;
+    if ((0, import_utils2.isUndefined)(optionValue)) {
+      if ((0, import_utils2.isString)(children) || (0, import_utils2.isNumber)(children)) {
+        value2 = children.toString();
+      } else {
+        console.warn(
+          `${!multi ? "Autocomplete" : "MultiAutocomplete"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
+        );
+      }
     }
-  }
+    return value2 != null ? value2 : "";
+  }, [children, multi, optionValue]);
+  const duplicated = frontValues.some(
+    ({ node }) => node.dataset.value === value
+  );
+  const selected = !duplicated && (!multi ? value === selectedValue : selectedValue.includes(value));
   const onClick = (0, import_react.useCallback)(
     (ev) => {
       ev.stopPropagation();
@@ -108,18 +109,18 @@ var useAutocompleteOption = (props) => {
         if (inputRef.current) inputRef.current.focus();
         return;
       }
-      if (!isDuplicated) setFocusedIndex(index);
-      onChange(optionValue != null ? optionValue : "");
+      if (!duplicated) setFocusedIndex(index);
+      onChange(value);
       if (inputRef.current) inputRef.current.focus();
       if (customCloseOnSelect != null ? customCloseOnSelect : closeOnSelect) onClose();
       if (omitSelectedValues) onFocusNext(index);
     },
     [
-      isDuplicated,
+      duplicated,
       onFocusNext,
       omitSelectedValues,
       disabled,
-      optionValue,
+      value,
       setFocusedIndex,
       index,
       onChange,
@@ -131,7 +132,7 @@ var useAutocompleteOption = (props) => {
   );
   const getOptionProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => {
-      const isHidden = !isTarget || omitSelectedValues && isSelected;
+      const isHidden = !target || omitSelectedValues && selected;
       const style = {
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
@@ -152,37 +153,37 @@ var useAutocompleteOption = (props) => {
         style: isHidden ? style : void 0,
         "aria-disabled": (0, import_utils2.ariaAttr)(disabled),
         "aria-hidden": (0, import_utils2.ariaAttr)(isHidden),
-        "aria-selected": isSelected,
+        "aria-selected": selected,
         "data-disabled": (0, import_utils2.dataAttr)(disabled),
-        "data-duplicated": (0, import_utils2.dataAttr)(isDuplicated),
-        "data-focus": (0, import_utils2.dataAttr)(isFocused),
+        "data-duplicated": (0, import_utils2.dataAttr)(duplicated),
+        "data-focus": (0, import_utils2.dataAttr)(focused),
         "data-target": (0, import_utils2.dataAttr)(true),
-        "data-value": optionValue != null ? optionValue : "",
+        "data-value": value,
         tabIndex: -1,
         onClick: (0, import_utils2.handlerAll)(computedProps.onClick, props2.onClick, onClick)
       };
     },
     [
       id,
-      isDuplicated,
-      optionValue,
+      duplicated,
+      value,
       computedProps,
       disabled,
-      isFocused,
-      isSelected,
-      isTarget,
+      focused,
+      selected,
+      target,
       omitSelectedValues,
       onClick,
       register
     ]
   );
   return {
+    target,
     children,
     customIcon,
-    isFocused,
-    isSelected,
-    isTarget,
+    focused,
     omitSelectedValues,
+    selected,
     getOptionProps
   };
 };

package/dist/use-autocomplete-option.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/use-autocomplete-option.ts","../src/autocomplete-context.ts"],"sourcesContent":["import type { HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport type { CSSProperties, MouseEvent } from \"react\"\nimport {\n  ariaAttr,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isHTMLElement,\n  isNumber,\n  isString,\n  isUndefined,\n  mergeRefs,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useId, useRef } from \"react\"\nimport {\n  useAutocompleteContext,\n  useAutocompleteDescendant,\n} from \"./autocomplete-context\"\n\nconst isTargetOption = (target: EventTarget | null): boolean =>\n  isHTMLElement(target) && !!target.getAttribute(\"role\")?.startsWith(\"option\")\n\nexport interface UseAutocompleteOptionProps\n  extends Omit<HTMLUIProps, \"children\" | \"value\"> {\n  /**\n   * The label of the autocomplete option.\n   */\n  children?: string\n  /**\n   * If `true`, the list element will be closed when selected.\n   *\n   * @default false\n   */\n  closeOnSelect?: boolean\n  /**\n   * If `true`, the autocomplete option will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, the autocomplete option will be focusable.\n   *\n   * @default false\n   */\n  focusable?: boolean\n  /**\n   * If `true`, the autocomplete option will be disabled.\n   *\n   * @default false\n   *\n   * @deprecated Use `disabled` instead.\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the autocomplete option will be focusable.\n   *\n   * @default false\n   *\n   * @deprecated Use `focusable` instead.\n   */\n  isFocusable?: boolean\n  /**\n   * The value of the autocomplete option.\n   */\n  value?: string\n}\n\nexport const useAutocompleteOption = (props: UseAutocompleteOptionProps) => {\n  const {\n    closeOnSelect,\n    focusedIndex,\n    inputRef,\n    omitSelectedValues,\n    setFocusedIndex,\n    value,\n    optionProps,\n    onChange,\n    onClose,\n    onFocusNext,\n  } = useAutocompleteContext()\n  const uuid = useId()\n  const itemRef = useRef<HTMLLIElement>(null)\n  let {\n    id,\n    children,\n    closeOnSelect: customCloseOnSelect,\n    disabled,\n    focusable,\n    icon: customIcon,\n    isDisabled,\n    isFocusable,\n    value: optionValue,\n    ...computedProps\n  } = { ...optionProps, ...props }\n  disabled ??= isDisabled\n  focusable ??= isFocusable\n  const trulyDisabled = !!disabled && !focusable\n  const { descendants, index, register } = useAutocompleteDescendant({\n    disabled: trulyDisabled,\n  })\n  const values = descendants.values()\n  const frontValues = values.slice(0, index)\n  const isMulti = isArray(value)\n  const isDuplicated = frontValues.some(\n    ({ node }) => node.dataset.value === (optionValue ?? \"\"),\n  )\n  const isSelected =\n    !isDuplicated &&\n    (!isMulti\n      ? (optionValue ?? \"\") === value\n      : value.includes(optionValue ?? \"\"))\n  const isTarget = \"target\" in (itemRef.current?.dataset ?? {})\n  const isFocused = index === focusedIndex\n\n  id ??= uuid\n\n  if (isUndefined(optionValue)) {\n    if (isString(children) || isNumber(children)) {\n      optionValue = children.toString()\n    } else {\n      console.warn(\n        `${\n          !isMulti ? \"Autocomplete\" : \"MultiAutocomplete\"\n        }: Cannot infer the option value of complex children. Pass a \\`value\\` prop or use a plain string as children to <Option>.`,\n      )\n    }\n  }\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.stopPropagation()\n\n      if (disabled || !isTargetOption(ev.currentTarget)) {\n        if (inputRef.current) inputRef.current.focus()\n\n        return\n      }\n\n      if (!isDuplicated) setFocusedIndex(index)\n\n      onChange(optionValue ?? \"\")\n\n      if (inputRef.current) inputRef.current.focus()\n\n      if (customCloseOnSelect ?? closeOnSelect) onClose()\n\n      if (omitSelectedValues) onFocusNext(index)\n    },\n    [\n      isDuplicated,\n      onFocusNext,\n      omitSelectedValues,\n      disabled,\n      optionValue,\n      setFocusedIndex,\n      index,\n      onChange,\n      customCloseOnSelect,\n      closeOnSelect,\n      onClose,\n      inputRef,\n    ],\n  )\n\n  const getOptionProps: PropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const isHidden = !isTarget || (omitSelectedValues && isSelected)\n\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: \"0px\",\n        position: \"absolute\",\n        whiteSpace: \"nowrap\",\n        width: \"1px\",\n      }\n\n      return {\n        ref: mergeRefs(itemRef, ref, register),\n        role: \"option\",\n        ...computedProps,\n        ...props,\n        id,\n        style: isHidden ? style : undefined,\n        \"aria-disabled\": ariaAttr(disabled),\n        \"aria-hidden\": ariaAttr(isHidden),\n        \"aria-selected\": isSelected,\n        \"data-disabled\": dataAttr(disabled),\n        \"data-duplicated\": dataAttr(isDuplicated),\n        \"data-focus\": dataAttr(isFocused),\n        \"data-target\": dataAttr(true),\n        \"data-value\": optionValue ?? \"\",\n        tabIndex: -1,\n        onClick: handlerAll(computedProps.onClick, props.onClick, onClick),\n      }\n    },\n    [\n      id,\n      isDuplicated,\n      optionValue,\n      computedProps,\n      disabled,\n      isFocused,\n      isSelected,\n      isTarget,\n      omitSelectedValues,\n      onClick,\n      register,\n    ],\n  )\n\n  return {\n    children,\n    customIcon,\n    isFocused,\n    isSelected,\n    isTarget,\n    omitSelectedValues,\n    getOptionProps,\n  }\n}\n\nexport type UseAutocompleteOptionReturn = ReturnType<\n  typeof useAutocompleteOption\n>\n\nexport const useAutocompleteCreate = () => {\n  const { isHit, onCreate } = useAutocompleteContext()\n\n  const getCreateProps: PropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: \"0px\",\n        position: \"absolute\",\n        whiteSpace: \"nowrap\",\n        width: \"1px\",\n      }\n\n      return {\n        ref,\n        role: \"option\",\n        ...props,\n        style: isHit ? style : undefined,\n        \"aria-hidden\": ariaAttr(isHit),\n        \"data-focus\": dataAttr(!isHit),\n        tabIndex: -1,\n        onClick: handlerAll(props.onClick, onCreate),\n      }\n    },\n    [isHit, onCreate],\n  )\n\n  return { getCreateProps }\n}\n\nexport type UseAutocompleteCreateReturn = ReturnType<\n  typeof useAutocompleteCreate\n>\n\nexport const useAutocompleteEmpty = () => {\n  const { isEmpty, isHit } = useAutocompleteContext()\n\n  const getEmptyProps: PropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const isHidden = isHit && !isEmpty\n\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: \"0px\",\n        position: \"absolute\",\n        whiteSpace: \"nowrap\",\n        width: \"1px\",\n      }\n\n      return {\n        ref,\n        role: \"presentation\",\n        ...props,\n        style: isHidden ? style : undefined,\n        \"aria-hidden\": ariaAttr(isHidden),\n        tabIndex: -1,\n      }\n    },\n    [isHit, isEmpty],\n  )\n\n  return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { Dispatch, DOMAttributes, RefObject, SetStateAction } from \"react\"\nimport type { UseAutocompleteProps } from \"./use-autocomplete\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\n\nexport const {\n  DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n  useDescendant: useAutocompleteDescendant,\n  useDescendants: useAutocompleteDescendants,\n  useDescendantsContext: useAutocompleteDescendantsContext,\n} = createDescendant()\n\ninterface AutocompleteContext\n  extends Omit<\n    UseAutocompleteProps,\n    \"defaultValue\" | \"onChange\" | \"onCreate\" | \"value\"\n  > {\n  focusedIndex: number\n  inputRef: RefObject<HTMLInputElement>\n  inputValue: string\n  isAllSelected: boolean\n  isEmpty: boolean\n  isHit: boolean\n  isOpen: boolean\n  label: string | string[] | undefined\n  pickOptions: (value: string) => void\n  rebirthOptions: (runFocus?: boolean) => void\n  setFocusedIndex: Dispatch<SetStateAction<number>>\n  styles: { [key: string]: CSSUIObject | undefined }\n  value: string | string[]\n  formControlProps: { [key: string]: any }\n  inputProps: DOMAttributes<HTMLInputElement>\n  onChange: (newValue: string, runRebirth?: boolean) => void\n  onClose: () => void\n  onCreate: () => void\n  onFocusFirst: () => void\n  onFocusLast: () => void\n  onFocusNext: (index?: number) => void\n  onFocusPrev: (index?: number) => void\n  onOpen: () => void\n}\n\nexport const [AutocompleteProvider, useAutocompleteContext] =\n  createContext<AutocompleteContext>({\n    name: \"AutocompleteContext\",\n    errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Autocomplete />\" or \"<MultiAutocomplete />\"`,\n  })\n"],"mappings":"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","names":["import_utils","props"]}
+{"version":3,"sources":["../src/use-autocomplete-option.ts","../src/autocomplete-context.ts"],"sourcesContent":["import type { HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport type { CSSProperties, MouseEvent } from \"react\"\nimport {\n  ariaAttr,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isHTMLElement,\n  isNumber,\n  isString,\n  isUndefined,\n  mergeRefs,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useId, useMemo, useRef } from \"react\"\nimport {\n  useAutocompleteContext,\n  useAutocompleteDescendant,\n} from \"./autocomplete-context\"\n\nconst isTargetOption = (target: EventTarget | null): boolean =>\n  isHTMLElement(target) && !!target.getAttribute(\"role\")?.startsWith(\"option\")\n\nexport interface UseAutocompleteOptionProps\n  extends Omit<HTMLUIProps, \"children\" | \"value\"> {\n  /**\n   * The label of the autocomplete option.\n   */\n  children?: string\n  /**\n   * If `true`, the list element will be closed when selected.\n   *\n   * @default false\n   */\n  closeOnSelect?: boolean\n  /**\n   * If `true`, the autocomplete option will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, the autocomplete option will be focusable.\n   *\n   * @default false\n   */\n  focusable?: boolean\n  /**\n   * If `true`, the autocomplete option will be disabled.\n   *\n   * @default false\n   *\n   * @deprecated Use `disabled` instead.\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the autocomplete option will be focusable.\n   *\n   * @default false\n   *\n   * @deprecated Use `focusable` instead.\n   */\n  isFocusable?: boolean\n  /**\n   * The value of the autocomplete option.\n   */\n  value?: string\n}\n\nexport const useAutocompleteOption = (props: UseAutocompleteOptionProps) => {\n  const {\n    closeOnSelect,\n    focusedIndex,\n    inputRef,\n    omitSelectedValues,\n    setFocusedIndex,\n    value: selectedValue,\n    optionProps,\n    onChange,\n    onClose,\n    onFocusNext,\n  } = useAutocompleteContext()\n  const uuid = useId()\n  const itemRef = useRef<HTMLLIElement>(null)\n  const {\n    id = uuid,\n    children,\n    closeOnSelect: customCloseOnSelect,\n    isDisabled,\n    disabled = isDisabled,\n    isFocusable,\n    focusable = isFocusable,\n    icon: customIcon,\n    value: optionValue,\n    ...computedProps\n  } = { ...optionProps, ...props }\n  const trulyDisabled = !!disabled && !focusable\n  const { descendants, index, register } = useAutocompleteDescendant({\n    disabled: trulyDisabled,\n  })\n  const values = descendants.values()\n  const frontValues = values.slice(0, index)\n  const multi = isArray(selectedValue)\n  const target = \"target\" in (itemRef.current?.dataset ?? {})\n  const focused = index === focusedIndex\n\n  const value = useMemo(() => {\n    let value = optionValue\n\n    if (isUndefined(optionValue)) {\n      if (isString(children) || isNumber(children)) {\n        value = children.toString()\n      } else {\n        console.warn(\n          `${\n            !multi ? \"Autocomplete\" : \"MultiAutocomplete\"\n          }: Cannot infer the option value of complex children. Pass a \\`value\\` prop or use a plain string as children to <Option>.`,\n        )\n      }\n    }\n\n    return value ?? \"\"\n  }, [children, multi, optionValue])\n\n  const duplicated = frontValues.some(\n    ({ node }) => node.dataset.value === value,\n  )\n  const selected =\n    !duplicated &&\n    (!multi ? value === selectedValue : selectedValue.includes(value))\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.stopPropagation()\n\n      if (disabled || !isTargetOption(ev.currentTarget)) {\n        if (inputRef.current) inputRef.current.focus()\n\n        return\n      }\n\n      if (!duplicated) setFocusedIndex(index)\n\n      onChange(value)\n\n      if (inputRef.current) inputRef.current.focus()\n\n      if (customCloseOnSelect ?? closeOnSelect) onClose()\n\n      if (omitSelectedValues) onFocusNext(index)\n    },\n    [\n      duplicated,\n      onFocusNext,\n      omitSelectedValues,\n      disabled,\n      value,\n      setFocusedIndex,\n      index,\n      onChange,\n      customCloseOnSelect,\n      closeOnSelect,\n      onClose,\n      inputRef,\n    ],\n  )\n\n  const getOptionProps: PropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const isHidden = !target || (omitSelectedValues && selected)\n\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: \"0px\",\n        position: \"absolute\",\n        whiteSpace: \"nowrap\",\n        width: \"1px\",\n      }\n\n      return {\n        ref: mergeRefs(itemRef, ref, register),\n        role: \"option\",\n        ...computedProps,\n        ...props,\n        id,\n        style: isHidden ? style : undefined,\n        \"aria-disabled\": ariaAttr(disabled),\n        \"aria-hidden\": ariaAttr(isHidden),\n        \"aria-selected\": selected,\n        \"data-disabled\": dataAttr(disabled),\n        \"data-duplicated\": dataAttr(duplicated),\n        \"data-focus\": dataAttr(focused),\n        \"data-target\": dataAttr(true),\n        \"data-value\": value,\n        tabIndex: -1,\n        onClick: handlerAll(computedProps.onClick, props.onClick, onClick),\n      }\n    },\n    [\n      id,\n      duplicated,\n      value,\n      computedProps,\n      disabled,\n      focused,\n      selected,\n      target,\n      omitSelectedValues,\n      onClick,\n      register,\n    ],\n  )\n\n  return {\n    target,\n    children,\n    customIcon,\n    focused,\n    omitSelectedValues,\n    selected,\n    getOptionProps,\n  }\n}\n\nexport type UseAutocompleteOptionReturn = ReturnType<\n  typeof useAutocompleteOption\n>\n\nexport const useAutocompleteCreate = () => {\n  const { isHit, onCreate } = useAutocompleteContext()\n\n  const getCreateProps: PropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: \"0px\",\n        position: \"absolute\",\n        whiteSpace: \"nowrap\",\n        width: \"1px\",\n      }\n\n      return {\n        ref,\n        role: \"option\",\n        ...props,\n        style: isHit ? style : undefined,\n        \"aria-hidden\": ariaAttr(isHit),\n        \"data-focus\": dataAttr(!isHit),\n        tabIndex: -1,\n        onClick: handlerAll(props.onClick, onCreate),\n      }\n    },\n    [isHit, onCreate],\n  )\n\n  return { getCreateProps }\n}\n\nexport type UseAutocompleteCreateReturn = ReturnType<\n  typeof useAutocompleteCreate\n>\n\nexport const useAutocompleteEmpty = () => {\n  const { isEmpty, isHit } = useAutocompleteContext()\n\n  const getEmptyProps: PropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const isHidden = isHit && !isEmpty\n\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: \"0px\",\n        position: \"absolute\",\n        whiteSpace: \"nowrap\",\n        width: \"1px\",\n      }\n\n      return {\n        ref,\n        role: \"presentation\",\n        ...props,\n        style: isHidden ? style : undefined,\n        \"aria-hidden\": ariaAttr(isHidden),\n        tabIndex: -1,\n      }\n    },\n    [isHit, isEmpty],\n  )\n\n  return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { Dispatch, DOMAttributes, RefObject, SetStateAction } from \"react\"\nimport type { UseAutocompleteProps } from \"./use-autocomplete\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\n\nexport const {\n  DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n  useDescendant: useAutocompleteDescendant,\n  useDescendants: useAutocompleteDescendants,\n  useDescendantsContext: useAutocompleteDescendantsContext,\n} = createDescendant()\n\ninterface AutocompleteContext\n  extends Omit<\n    UseAutocompleteProps,\n    \"defaultValue\" | \"onChange\" | \"onCreate\" | \"value\"\n  > {\n  focusedIndex: number\n  inputRef: RefObject<HTMLInputElement>\n  inputValue: string\n  isAllSelected: boolean\n  isEmpty: boolean\n  isHit: boolean\n  isOpen: boolean\n  label: string | string[] | undefined\n  pickOptions: (value: string) => void\n  rebirthOptions: (runFocus?: boolean) => void\n  setFocusedIndex: Dispatch<SetStateAction<number>>\n  styles: { [key: string]: CSSUIObject | undefined }\n  value: string | string[]\n  formControlProps: { [key: string]: any }\n  inputProps: DOMAttributes<HTMLInputElement>\n  onChange: (newValue: string, runRebirth?: boolean) => void\n  onClose: () => void\n  onCreate: () => void\n  onFocusFirst: () => void\n  onFocusLast: () => void\n  onFocusNext: (index?: number) => void\n  onFocusPrev: (index?: number) => void\n  onOpen: () => void\n}\n\nexport const [AutocompleteProvider, useAutocompleteContext] =\n  createContext<AutocompleteContext>({\n    name: \"AutocompleteContext\",\n    errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Autocomplete />\" or \"<MultiAutocomplete />\"`,\n  })\n"],"mappings":"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","names":["import_utils","value","props"]}

package/dist/use-autocomplete-option.mjs

@@ -3,7 +3,7 @@ import {
   useAutocompleteCreate,
   useAutocompleteEmpty,
   useAutocompleteOption
-} from "./chunk-2LP57WVB.mjs";
+} from "./chunk-NPRQXPV7.mjs";
 import "./chunk-TP5VZFO3.mjs";
 export {
   useAutocompleteCreate,

package/dist/use-autocomplete.js

@@ -163,7 +163,7 @@ var useAutocompleteOption = (props) => {
     inputRef,
     omitSelectedValues,
     setFocusedIndex,
-    value,
+    value: selectedValue,
     optionProps,
     onChange,
     onClose,
@@ -171,43 +171,44 @@ var useAutocompleteOption = (props) => {
   } = useAutocompleteContext();
   const uuid = (0, import_react2.useId)();
   const itemRef = (0, import_react2.useRef)(null);
-  let {
-    id,
+  const {
+    id = uuid,
     children,
     closeOnSelect: customCloseOnSelect,
-    disabled,
-    focusable,
-    icon: customIcon,
     isDisabled,
+    disabled = isDisabled,
     isFocusable,
+    focusable = isFocusable,
+    icon: customIcon,
     value: optionValue,
     ...computedProps
   } = { ...optionProps, ...props };
-  disabled != null ? disabled : disabled = isDisabled;
-  focusable != null ? focusable : focusable = isFocusable;
   const trulyDisabled = !!disabled && !focusable;
   const { descendants, index, register } = useAutocompleteDescendant({
     disabled: trulyDisabled
   });
   const values = descendants.values();
   const frontValues = values.slice(0, index);
-  const isMulti = (0, import_utils3.isArray)(value);
-  const isDuplicated = frontValues.some(
-    ({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")
-  );
-  const isSelected = !isDuplicated && (!isMulti ? (optionValue != null ? optionValue : "") === value : value.includes(optionValue != null ? optionValue : ""));
-  const isTarget = "target" in ((_b = (_a = itemRef.current) == null ? void 0 : _a.dataset) != null ? _b : {});
-  const isFocused = index === focusedIndex;
-  id != null ? id : id = uuid;
-  if ((0, import_utils3.isUndefined)(optionValue)) {
-    if ((0, import_utils3.isString)(children) || (0, import_utils3.isNumber)(children)) {
-      optionValue = children.toString();
-    } else {
-      console.warn(
-        `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
-      );
+  const multi = (0, import_utils3.isArray)(selectedValue);
+  const target = "target" in ((_b = (_a = itemRef.current) == null ? void 0 : _a.dataset) != null ? _b : {});
+  const focused = index === focusedIndex;
+  const value = (0, import_react2.useMemo)(() => {
+    let value2 = optionValue;
+    if ((0, import_utils3.isUndefined)(optionValue)) {
+      if ((0, import_utils3.isString)(children) || (0, import_utils3.isNumber)(children)) {
+        value2 = children.toString();
+      } else {
+        console.warn(
+          `${!multi ? "Autocomplete" : "MultiAutocomplete"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
+        );
+      }
     }
-  }
+    return value2 != null ? value2 : "";
+  }, [children, multi, optionValue]);
+  const duplicated = frontValues.some(
+    ({ node }) => node.dataset.value === value
+  );
+  const selected = !duplicated && (!multi ? value === selectedValue : selectedValue.includes(value));
   const onClick = (0, import_react2.useCallback)(
     (ev) => {
       ev.stopPropagation();
@@ -215,18 +216,18 @@ var useAutocompleteOption = (props) => {
         if (inputRef.current) inputRef.current.focus();
         return;
       }
-      if (!isDuplicated) setFocusedIndex(index);
-      onChange(optionValue != null ? optionValue : "");
+      if (!duplicated) setFocusedIndex(index);
+      onChange(value);
       if (inputRef.current) inputRef.current.focus();
       if (customCloseOnSelect != null ? customCloseOnSelect : closeOnSelect) onClose();
       if (omitSelectedValues) onFocusNext(index);
     },
     [
-      isDuplicated,
+      duplicated,
       onFocusNext,
       omitSelectedValues,
       disabled,
-      optionValue,
+      value,
       setFocusedIndex,
       index,
       onChange,
@@ -238,7 +239,7 @@ var useAutocompleteOption = (props) => {
   );
   const getOptionProps = (0, import_react2.useCallback)(
     (props2 = {}, ref = null) => {
-      const isHidden = !isTarget || omitSelectedValues && isSelected;
+      const isHidden = !target || omitSelectedValues && selected;
       const style = {
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
@@ -259,37 +260,37 @@ var useAutocompleteOption = (props) => {
         style: isHidden ? style : void 0,
         "aria-disabled": (0, import_utils3.ariaAttr)(disabled),
         "aria-hidden": (0, import_utils3.ariaAttr)(isHidden),
-        "aria-selected": isSelected,
+        "aria-selected": selected,
         "data-disabled": (0, import_utils3.dataAttr)(disabled),
-        "data-duplicated": (0, import_utils3.dataAttr)(isDuplicated),
-        "data-focus": (0, import_utils3.dataAttr)(isFocused),
+        "data-duplicated": (0, import_utils3.dataAttr)(duplicated),
+        "data-focus": (0, import_utils3.dataAttr)(focused),
         "data-target": (0, import_utils3.dataAttr)(true),
-        "data-value": optionValue != null ? optionValue : "",
+        "data-value": value,
         tabIndex: -1,
         onClick: (0, import_utils3.handlerAll)(computedProps.onClick, props2.onClick, onClick)
       };
     },
     [
       id,
-      isDuplicated,
-      optionValue,
+      duplicated,
+      value,
       computedProps,
       disabled,
-      isFocused,
-      isSelected,
-      isTarget,
+      focused,
+      selected,
+      target,
       omitSelectedValues,
       onClick,
       register
     ]
   );
   return {
+    target,
     children,
     customIcon,
-    isFocused,
-    isSelected,
-    isTarget,
+    focused,
     omitSelectedValues,
+    selected,
     getOptionProps
   };
 };
@@ -299,7 +300,7 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var AutocompleteOption = (0, import_core2.forwardRef)(
   ({ className, icon, ...rest }, ref) => {
     const { styles } = useAutocompleteContext();
-    const { children, customIcon, isSelected, getOptionProps } = useAutocompleteOption(rest);
+    const { children, customIcon, selected, getOptionProps } = useAutocompleteOption(rest);
     icon != null ? icon : icon = customIcon;
     const css = {
       alignItems: "center",
@@ -321,7 +322,7 @@ var AutocompleteOption = (0, import_core2.forwardRef)(
         __css: css,
         ...getOptionProps({}, ref),
         children: [
-          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteItemIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteCheckIcon, {}) }) : null,
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteItemIcon, { opacity: selected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteCheckIcon, {}) }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { flex: 1 }, "data-label": true, children })
         ]
       }