@yamada-ui/autocomplete 1.6.0-dev-20241011153139 → 1.6.0-dev-20241011162716

package/dist/chunk-OY5JVCQQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/autocomplete.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type { PortalProps } from \"@yamada-ui/portal\"\nimport type { FC, ReactNode } from \"react\"\nimport type { AutocompleteCreateProps } from \"./autocomplete-create\"\nimport type { AutocompleteEmptyProps } from \"./autocomplete-empty\"\nimport type { AutocompleteIconProps } from \"./autocomplete-icon\"\nimport type { AutocompleteListProps } from \"./autocomplete-list\"\nimport type { UseAutocompleteProps } from \"./use-autocomplete\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Popover, PopoverTrigger } from \"@yamada-ui/popover\"\nimport { Portal } from \"@yamada-ui/portal\"\nimport { cx, runIfFunc } from \"@yamada-ui/utils\"\nimport {\n  AutocompleteDescendantsContextProvider,\n  AutocompleteProvider,\n  useAutocompleteContext,\n} from \"./autocomplete-context\"\nimport { AutocompleteCreate } from \"./autocomplete-create\"\nimport { AutocompleteEmpty } from \"./autocomplete-empty\"\nimport { AutocompleteIcon } from \"./autocomplete-icon\"\nimport { AutocompleteList } from \"./autocomplete-list\"\nimport { useAutocomplete, useAutocompleteInput } from \"./use-autocomplete\"\n\ninterface AutocompleteOptions {\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: string\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: string\n  /**\n   * The footer of the autocomplete content element.\n   */\n  footer?: FC<{ value: string | undefined; onClose: () => void }> | ReactNode\n  /**\n   * The header of the autocomplete content element.\n   */\n  header?: FC<{ value: string | undefined; onClose: () => void }> | ReactNode\n  /**\n   * Props for autocomplete container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"children\">\n  /**\n   * Props for autocomplete content element.\n   */\n  contentProps?: Omit<MotionProps, \"children\">\n  /**\n   * Props for autocomplete create element.\n   */\n  createProps?: Omit<AutocompleteCreateProps, \"children\">\n  /**\n   * Props for autocomplete empty element.\n   */\n  emptyProps?: Omit<AutocompleteEmptyProps, \"children\">\n  /**\n   * Props for autocomplete field element.\n   */\n  fieldProps?: Omit<AutocompleteFieldProps, \"children\" | \"inputProps\">\n  /**\n   * Props for autocomplete icon element.\n   */\n  iconProps?: AutocompleteIconProps\n  /**\n   * Props for autocomplete input element.\n   */\n  inputProps?: HTMLUIProps<\"input\">\n  /**\n   * Props for autocomplete list element.\n   */\n  listProps?: Omit<AutocompleteListProps, \"children\">\n  /**\n   * Props to be forwarded to the portal component.\n   *\n   * @default '{ isDisabled: true }'\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport interface AutocompleteProps\n  extends ThemeProps<\"Autocomplete\">,\n    Omit<UseAutocompleteProps, \"maxSelectValues\" | \"omitSelectedValues\">,\n    AutocompleteOptions {}\n\n/**\n * `Autocomplete` is a component used to display suggestions in response to user text input.\n *\n * @see Docs https://yamada-ui.com/components/forms/autocomplete\n */\nexport const Autocomplete = forwardRef<AutocompleteProps, \"input\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\"Autocomplete\", props)\n    let {\n      className,\n      color,\n      defaultValue = \"\",\n      footer,\n      h,\n      header,\n      height,\n      minH,\n      minHeight,\n      containerProps,\n      contentProps,\n      createProps,\n      emptyProps,\n      fieldProps,\n      iconProps,\n      inputProps,\n      listProps,\n      portalProps = { isDisabled: true },\n      ...computedProps\n    } = omitThemeProps(mergedProps)\n\n    const {\n      allowCreate,\n      children,\n      descendants,\n      inputValue,\n      isEmpty,\n      value,\n      formControlProps,\n      getContainerProps,\n      getFieldProps,\n      getPopoverProps,\n      onClose,\n      ...rest\n    } = useAutocomplete({ ...computedProps, defaultValue })\n\n    h ??= height\n    minH ??= minHeight\n\n    const css: CSSUIObject = {\n      color,\n      h: \"fit-content\",\n      w: \"100%\",\n      ...styles.container,\n    }\n\n    return (\n      <AutocompleteDescendantsContextProvider value={descendants}>\n        <AutocompleteProvider\n          value={{\n            ...rest,\n            allowCreate,\n            inputValue,\n            isEmpty,\n            styles,\n            value,\n            formControlProps,\n            onClose,\n          }}\n        >\n          <Popover {...getPopoverProps()}>\n            <ui.div\n              className={cx(\"ui-autocomplete\", className)}\n              __css={css}\n              {...getContainerProps(containerProps)}\n            >\n              <ui.div\n                className=\"ui-autocomplete__inner\"\n                __css={{ position: \"relative\", ...styles.inner }}\n              >\n                <AutocompleteField\n                  h={h}\n                  minH={minH}\n                  inputProps={inputProps}\n                  {...getFieldProps(fieldProps, ref)}\n                />\n\n                <AutocompleteIcon {...iconProps} {...formControlProps} />\n              </ui.div>\n\n              <Portal {...portalProps}>\n                <AutocompleteList\n                  footer={runIfFunc(footer, { value, onClose })}\n                  header={runIfFunc(header, { value, onClose })}\n                  contentProps={contentProps}\n                  {...listProps}\n                >\n                  {!isEmpty ? (\n                    <>\n                      {allowCreate ? (\n                        <AutocompleteCreate {...createProps} />\n                      ) : (\n                        <AutocompleteEmpty {...emptyProps} />\n                      )}\n\n                      {children}\n                    </>\n                  ) : allowCreate && inputValue ? (\n                    <AutocompleteCreate {...createProps} />\n                  ) : (\n                    <AutocompleteEmpty {...emptyProps} />\n                  )}\n                </AutocompleteList>\n              </Portal>\n            </ui.div>\n          </Popover>\n        </AutocompleteProvider>\n      </AutocompleteDescendantsContextProvider>\n    )\n  },\n)\n\nAutocomplete.displayName = \"Autocomplete\"\nAutocomplete.__ui__ = \"Autocomplete\"\n\ninterface AutocompleteFieldProps\n  extends HTMLUIProps,\n    Pick<AutocompleteProps, \"inputProps\"> {}\n\nconst AutocompleteField = forwardRef<AutocompleteFieldProps, \"input\">(\n  ({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {\n    const { inputValue, label, styles } = useAutocompleteContext()\n    const { getInputProps } = useAutocompleteInput()\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"flex\",\n      h,\n      minH,\n      pe: \"2rem\",\n      ...styles.field,\n      cursor: \"text\",\n    }\n\n    return (\n      <PopoverTrigger>\n        <ui.div\n          className={cx(\"ui-autocomplete__field\", className)}\n          __css={css}\n          {...rest}\n        >\n          <ui.input\n            className=\"ui-autocomplete__field__input\"\n            display=\"inline-block\"\n            placeholder={placeholder}\n            w=\"100%\"\n            {...getInputProps(\n              { ...inputProps, value: inputValue || label || \"\" },\n              ref,\n            )}\n          />\n        </ui.div>\n      </PopoverTrigger>\n    )\n  },\n)\n\nAutocompleteField.displayName = \"AutocompleteField\"\nAutocompleteField.__ui__ = \"AutocompleteField\"\n"],"mappings":"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","names":[]}

package/dist/{chunk-2HJUFFCU.mjs → chunk-PKRO525W.mjs}

@@ -1,13 +1,13 @@
 "use client"
 import {
   useAutocompleteEmpty
-} from "./chunk-6OLHNK7O.mjs";
+} from "./chunk-ZXALWDKQ.mjs";
 import {
   AutocompleteItemIcon
-} from "./chunk-V6YCG642.mjs";
+} from "./chunk-6OTUOEYS.mjs";
 import {
   useAutocompleteContext
-} from "./chunk-WDQYM4FP.mjs";
+} from "./chunk-ZNO5RUVT.mjs";
 
 // src/autocomplete-empty.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
@@ -61,4 +61,4 @@ AutocompleteMinusIcon.__ui__ = "AutocompleteMinusIcon";
 export {
   AutocompleteEmpty
 };
-//# sourceMappingURL=chunk-2HJUFFCU.mjs.map
+//# sourceMappingURL=chunk-PKRO525W.mjs.map

package/dist/{chunk-VTBUO5SK.mjs → chunk-WJ4P4B2E.mjs}

@@ -1,10 +1,10 @@
 "use client"
 import {
   useAutocompleteList
-} from "./chunk-TR4X4EEG.mjs";
+} from "./chunk-X2PFHBZY.mjs";
 import {
   useAutocompleteContext
-} from "./chunk-WDQYM4FP.mjs";
+} from "./chunk-ZNO5RUVT.mjs";
 
 // src/autocomplete-list.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
@@ -86,4 +86,4 @@ AutocompleteList.__ui__ = "AutocompleteList";
 export {
   AutocompleteList
 };
-//# sourceMappingURL=chunk-VTBUO5SK.mjs.map
+//# sourceMappingURL=chunk-WJ4P4B2E.mjs.map

package/dist/{chunk-4SBNPEK7.mjs → chunk-WNN655FX.mjs}

@@ -1,10 +1,10 @@
 "use client"
 import {
   useAutocompleteOptionGroup
-} from "./chunk-67X7JKWL.mjs";
+} from "./chunk-7QON6ZHO.mjs";
 import {
   useAutocompleteContext
-} from "./chunk-WDQYM4FP.mjs";
+} from "./chunk-ZNO5RUVT.mjs";
 
 // src/autocomplete-option-group.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
@@ -67,4 +67,4 @@ AutocompleteOptionGroup.__ui__ = "AutocompleteOptionGroup";
 export {
   AutocompleteOptionGroup
 };
-//# sourceMappingURL=chunk-4SBNPEK7.mjs.map
+//# sourceMappingURL=chunk-WNN655FX.mjs.map

package/dist/{chunk-TR4X4EEG.mjs → chunk-X2PFHBZY.mjs}

@@ -2,7 +2,7 @@
 import {
   useAutocompleteContext,
   useAutocompleteDescendantsContext
-} from "./chunk-WDQYM4FP.mjs";
+} from "./chunk-ZNO5RUVT.mjs";
 
 // src/use-autocomplete-list.ts
 import { mergeRefs, useUpdateEffect } from "@yamada-ui/utils";
@@ -69,4 +69,4 @@ var useAutocompleteList = () => {
 export {
   useAutocompleteList
 };
-//# sourceMappingURL=chunk-TR4X4EEG.mjs.map
+//# sourceMappingURL=chunk-X2PFHBZY.mjs.map

package/dist/{chunk-WDQYM4FP.mjs → chunk-ZNO5RUVT.mjs}

@@ -22,4 +22,4 @@ export {
   AutocompleteProvider,
   useAutocompleteContext
 };
-//# sourceMappingURL=chunk-WDQYM4FP.mjs.map
+//# sourceMappingURL=chunk-ZNO5RUVT.mjs.map

package/dist/chunk-ZNO5RUVT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/autocomplete-context.ts"],"sourcesContent":["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  listRef: RefObject<HTMLUListElement>\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":";;;AAGA,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAEvB,IAAM;AAAA,EACX,4BAA4B;AAAA,EAC5B,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,uBAAuB;AACzB,IAAI,iBAAiB;AAiCd,IAAM,CAAC,sBAAsB,sBAAsB,IACxD,cAAmC;AAAA,EACjC,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;","names":[]}

package/dist/{chunk-6OLHNK7O.mjs → chunk-ZXALWDKQ.mjs}

@@ -2,7 +2,7 @@
 import {
   useAutocompleteContext,
   useAutocompleteDescendant
-} from "./chunk-WDQYM4FP.mjs";
+} from "./chunk-ZNO5RUVT.mjs";
 
 // src/use-autocomplete-option.ts
 import {
@@ -14,8 +14,7 @@ import {
   isNumber,
   isString,
   isUndefined,
-  mergeRefs,
-  useUpdateEffect
+  mergeRefs
 } from "@yamada-ui/utils";
 import { useCallback, useId, useRef } from "react";
 var isTargetOption = (target) => {
@@ -25,7 +24,7 @@ var isTargetOption = (target) => {
 var useAutocompleteOption = (props) => {
   var _a, _b;
   const {
-    closeOnSelect: generalCloseOnSelect,
+    closeOnSelect,
     focusedIndex,
     inputRef,
     omitSelectedValues,
@@ -33,7 +32,6 @@ var useAutocompleteOption = (props) => {
     value,
     optionProps,
     onChange,
-    onChangeLabel,
     onClose,
     onFocusNext
   } = useAutocompleteContext();
@@ -64,28 +62,27 @@ var useAutocompleteOption = (props) => {
       );
     }
   }
-  const isDuplicated = !isMulti ? frontValues.some(({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")) : false;
+  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;
   const onClick = useCallback(
     (ev) => {
       ev.stopPropagation();
-      if (isDisabled) {
-        if (inputRef.current) inputRef.current.focus();
-        return;
-      }
-      if (!isTargetOption(ev.currentTarget)) {
+      if (isDisabled || !isTargetOption(ev.currentTarget)) {
         if (inputRef.current) inputRef.current.focus();
         return;
       }
-      setFocusedIndex(index);
+      if (!isDuplicated) setFocusedIndex(index);
       onChange(optionValue != null ? optionValue : "");
       if (inputRef.current) inputRef.current.focus();
-      if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect) onClose();
+      if (customCloseOnSelect != null ? customCloseOnSelect : closeOnSelect) onClose();
       if (omitSelectedValues) onFocusNext(index);
     },
     [
+      isDuplicated,
       onFocusNext,
       omitSelectedValues,
       isDisabled,
@@ -94,14 +91,11 @@ var useAutocompleteOption = (props) => {
       index,
       onChange,
       customCloseOnSelect,
-      generalCloseOnSelect,
+      closeOnSelect,
       onClose,
       inputRef
     ]
   );
-  useUpdateEffect(() => {
-    if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", { runOmit: false });
-  }, [optionValue]);
   const getOptionProps = useCallback(
     (props2 = {}, ref = null) => {
       const style = {
@@ -125,6 +119,7 @@ var useAutocompleteOption = (props) => {
         "aria-checked": isSelected,
         "aria-disabled": ariaAttr(isDisabled),
         "data-disabled": dataAttr(isDisabled),
+        "data-duplicated": dataAttr(isDuplicated),
         "data-focus": dataAttr(isFocused),
         "data-target": dataAttr(true),
         "data-value": optionValue != null ? optionValue : "",
@@ -134,6 +129,7 @@ var useAutocompleteOption = (props) => {
     },
     [
       id,
+      isDuplicated,
       optionValue,
       computedProps,
       isDisabled,
@@ -213,4 +209,4 @@ export {
   useAutocompleteCreate,
   useAutocompleteEmpty
 };
-//# sourceMappingURL=chunk-6OLHNK7O.mjs.map
+//# sourceMappingURL=chunk-ZXALWDKQ.mjs.map

package/dist/chunk-ZXALWDKQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-autocomplete-option.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<\"li\">, \"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  isDisabled?: boolean\n  /**\n   * If `true`, the autocomplete option will be focusable.\n   *\n   * @default false\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 id = useId()\n\n  let {\n    children,\n    closeOnSelect: customCloseOnSelect,\n    icon: customIcon,\n    isDisabled,\n    isFocusable,\n    value: optionValue,\n    ...computedProps\n  } = { ...optionProps, ...props }\n\n  const trulyDisabled = !!isDisabled && !isFocusable\n\n  const itemRef = useRef<HTMLLIElement>(null)\n\n  const { descendants, index, register } = useAutocompleteDescendant({\n    disabled: trulyDisabled,\n  })\n\n  const values = descendants.values()\n  const frontValues = values.slice(0, index)\n  const isMulti = isArray(value)\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 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  const onClick = useCallback(\n    (ev: MouseEvent<HTMLLIElement>) => {\n      ev.stopPropagation()\n\n      if (isDisabled || !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      isDisabled,\n      optionValue,\n      setFocusedIndex,\n      index,\n      onChange,\n      customCloseOnSelect,\n      closeOnSelect,\n      onClose,\n      inputRef,\n    ],\n  )\n\n  const getOptionProps: PropGetter<\"li\"> = 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        id,\n        ref: mergeRefs(itemRef, ref, register),\n        role: \"option\",\n        ...computedProps,\n        ...props,\n        style:\n          !isTarget || (omitSelectedValues && isSelected) ? style : undefined,\n        \"aria-checked\": isSelected,\n        \"aria-disabled\": ariaAttr(isDisabled),\n        \"data-disabled\": dataAttr(isDisabled),\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      isDisabled,\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    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<\"li\"> = 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        ...props,\n        style: isHit ? style : undefined,\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<\"li\"> = 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        ...props,\n        style: isHit && !isEmpty ? style : undefined,\n        tabIndex: -1,\n      }\n    },\n    [isHit, isEmpty],\n  )\n\n  return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n"],"mappings":"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","names":["props"]}

package/dist/index.d.mts

@@ -14,7 +14,6 @@ import './autocomplete-list.mjs';
 import './use-autocomplete-option.mjs';
 import './use-autocomplete-option-group.mjs';
 import '@yamada-ui/use-descendant';
-import 'react/jsx-runtime';
 import '@yamada-ui/form-control';
 import '@yamada-ui/popover';
 import '@yamada-ui/utils';

package/dist/index.d.ts

@@ -14,7 +14,6 @@ import './autocomplete-list.js';
 import './use-autocomplete-option.js';
 import './use-autocomplete-option-group.js';
 import '@yamada-ui/use-descendant';
-import 'react/jsx-runtime';
 import '@yamada-ui/form-control';
 import '@yamada-ui/popover';
 import '@yamada-ui/utils';

package/dist/index.js

@@ -161,7 +161,7 @@ var isTargetOption = (target) => {
 var useAutocompleteOption = (props) => {
   var _a, _b;
   const {
-    closeOnSelect: generalCloseOnSelect,
+    closeOnSelect,
     focusedIndex,
     inputRef,
     omitSelectedValues,
@@ -169,7 +169,6 @@ var useAutocompleteOption = (props) => {
     value,
     optionProps,
     onChange,
-    onChangeLabel,
     onClose,
     onFocusNext
   } = useAutocompleteContext();
@@ -200,28 +199,27 @@ var useAutocompleteOption = (props) => {
       );
     }
   }
-  const isDuplicated = !isMulti ? frontValues.some(({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")) : false;
+  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;
   const onClick = (0, import_react2.useCallback)(
     (ev) => {
       ev.stopPropagation();
-      if (isDisabled) {
+      if (isDisabled || !isTargetOption(ev.currentTarget)) {
         if (inputRef.current) inputRef.current.focus();
         return;
       }
-      if (!isTargetOption(ev.currentTarget)) {
-        if (inputRef.current) inputRef.current.focus();
-        return;
-      }
-      setFocusedIndex(index);
+      if (!isDuplicated) setFocusedIndex(index);
       onChange(optionValue != null ? optionValue : "");
       if (inputRef.current) inputRef.current.focus();
-      if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect) onClose();
+      if (customCloseOnSelect != null ? customCloseOnSelect : closeOnSelect) onClose();
       if (omitSelectedValues) onFocusNext(index);
     },
     [
+      isDuplicated,
       onFocusNext,
       omitSelectedValues,
       isDisabled,
@@ -230,14 +228,11 @@ var useAutocompleteOption = (props) => {
       index,
       onChange,
       customCloseOnSelect,
-      generalCloseOnSelect,
+      closeOnSelect,
       onClose,
       inputRef
     ]
   );
-  (0, import_utils3.useUpdateEffect)(() => {
-    if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", { runOmit: false });
-  }, [optionValue]);
   const getOptionProps = (0, import_react2.useCallback)(
     (props2 = {}, ref = null) => {
       const style = {
@@ -261,6 +256,7 @@ var useAutocompleteOption = (props) => {
         "aria-checked": isSelected,
         "aria-disabled": (0, import_utils3.ariaAttr)(isDisabled),
         "data-disabled": (0, import_utils3.dataAttr)(isDisabled),
+        "data-duplicated": (0, import_utils3.dataAttr)(isDuplicated),
         "data-focus": (0, import_utils3.dataAttr)(isFocused),
         "data-target": (0, import_utils3.dataAttr)(true),
         "data-value": optionValue != null ? optionValue : "",
@@ -270,6 +266,7 @@ var useAutocompleteOption = (props) => {
     },
     [
       id,
+      isDuplicated,
       optionValue,
       computedProps,
       isDisabled,
@@ -989,15 +986,23 @@ var useAutocomplete = (props) => {
   );
   const validChildren = (0, import_utils11.getValidChildren)(children);
   const computedChildren = (0, import_react5.useMemo)(
-    () => resolvedItems == null ? void 0 : resolvedItems.map((item, i) => {
+    () => resolvedItems == null ? void 0 : resolvedItems.map((item, index) => {
       if ("value" in item) {
         const { label: label2, value: value2, ...props2 } = item;
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteOption, { value: value2, ...props2, children: label2 }, i);
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteOption, { value: value2, ...props2, children: label2 }, index);
       } else if ("items" in item) {
         const { items: items2 = [], label: label2, ...props2 } = item;
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteOptionGroup, { label: label2, ...props2, children: items2.map(({ label: label3, value: value2, ...props3 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteOption, { value: value2, ...props3, children: label3 }, i2)) }, i);
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          AutocompleteOptionGroup,
+          {
+            label: label2,
+            ...props2,
+            children: items2.map(({ label: label3, value: value2, ...props3 }, index2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteOption, { value: value2, ...props3, children: label3 }, index2))
+          },
+          index
+        );
       }
-    }),
+    }).filter(Boolean),
     [resolvedItems]
   );
   const isEmpty = !validChildren.length && !(computedChildren == null ? void 0 : computedChildren.length);
@@ -1176,50 +1181,29 @@ var useAutocomplete = (props) => {
     },
     [descendants, onFocusFirst]
   );
-  const getSelectedValues = (0, import_react5.useCallback)(
-    (newValues) => {
-      const enabledValues2 = descendants.enabledValues();
-      const resolvedValues = (0, import_utils11.isArray)(newValues) ? newValues : [newValues];
-      const selectedValues2 = resolvedValues.map((value2) => {
+  const onChangeLabel = (0, import_react5.useCallback)(
+    (newValue) => {
+      const values = descendants.values();
+      if (!values.length) return;
+      const resolvedValues = (0, import_utils11.isArray)(newValue) ? newValue : [newValue];
+      const selectedLabel = resolvedValues.map((value2) => {
         var _a, _b;
-        const { node } = (_a = enabledValues2.find(({ node: node2 }) => node2.dataset.value === value2)) != null ? _a : {};
+        const { node } = (_a = values.find(({ node: node2 }) => node2.dataset.value === value2)) != null ? _a : {};
         if (node) {
-          const el = Array.from(node.children).find(
+          const { textContent } = (_b = Array.from(node.children).find(
             (child) => child.getAttribute("data-label") !== null
-          );
-          return (_b = el == null ? void 0 : el.textContent) != null ? _b : void 0;
+          )) != null ? _b : {};
+          return textContent;
         } else {
           return allowFree ? value2 : void 0;
         }
-      }).filter(Boolean);
-      return selectedValues2;
+      }).filter((label2) => !(0, import_utils11.isUndefined)(label2));
+      setLabel(!isMulti ? selectedLabel[0] : selectedLabel);
     },
-    [allowFree, descendants]
-  );
-  const onChangeLabel = (0, import_react5.useCallback)(
-    (newValue, { forceUpdate, runOmit = true } = {}) => {
-      const selectedValues2 = getSelectedValues(newValue);
-      if (!forceUpdate && !selectedValues2.length) return;
-      setLabel((prev) => {
-        if (!isMulti) {
-          return selectedValues2[0];
-        } else {
-          selectedValues2.forEach((selectedValue) => {
-            const isSelected = (0, import_utils11.isArray)(prev) && prev.includes(selectedValue);
-            if (!isSelected) {
-              prev = [...(0, import_utils11.isArray)(prev) ? prev : [], selectedValue];
-            } else if (runOmit) {
-              prev = (0, import_utils11.isArray)(prev) ? prev.filter((value2) => value2 !== selectedValue) : void 0;
-            }
-          });
-          return prev;
-        }
-      });
-    },
-    [getSelectedValues, isMulti]
+    [allowFree, descendants, isMulti]
   );
   const onChange = (0, import_react5.useCallback)(
-    (newValue, { forceUpdate, runRebirth = true } = {}) => {
+    (newValue, runRebirth = true) => {
       setValue((prev) => {
         let next;
         if (!(0, import_utils11.isArray)(prev)) {
@@ -1241,14 +1225,13 @@ var useAutocomplete = (props) => {
           return format((_a = node.textContent) != null ? _a : "").includes(newValue);
         }
       ).length > 0;
-      onChangeLabel(newValue, { forceUpdate });
-      if (allowFree || isHit2) setInputValue("");
+      if (allowCreate || allowFree || isHit2) setInputValue("");
       if (isMulti && runRebirth) rebirthOptions(false);
     },
     [
       allowFree,
+      allowCreate,
       isMulti,
-      onChangeLabel,
       rebirthOptions,
       setValue,
       descendants,
@@ -1359,7 +1342,7 @@ var useAutocomplete = (props) => {
       const relatedTarget = (0, import_utils11.getEventRelatedTarget)(ev);
       if ((0, import_utils11.isContains)(containerRef.current, relatedTarget)) return;
       if (!closeOnBlur && isHit) return;
-      if (allowFree && !!inputValue) onChange(inputValue, { runRebirth: false });
+      if (allowFree && !!inputValue) onChange(inputValue, false);
       setInputValue("");
       if (isOpen) onClose();
     },
@@ -1367,7 +1350,7 @@ var useAutocomplete = (props) => {
   );
   const onDelete = (0, import_react5.useCallback)(() => {
     if (!isMulti) {
-      onChange("", { forceUpdate: true });
+      onChange("");
     } else {
       onChange(value[value.length - 1]);
     }
@@ -1454,18 +1437,9 @@ var useAutocomplete = (props) => {
     onClose,
     maxSelectValues
   ]);
-  (0, import_react5.useEffect)(() => {
-    var _a;
-    if (isMulti) {
-      if (JSON.stringify((_a = prevValue.current) != null ? _a : []) === JSON.stringify(value))
-        return;
-      const label2 = getSelectedValues(value);
-      setLabel(label2);
-    } else {
-      if (prevValue.current === value) return;
-      onChangeLabel(value, { runOmit: false });
-    }
-  }, [isMulti, value, onChangeLabel, getSelectedValues]);
+  (0, import_utils11.useSafeLayoutEffect)(() => {
+    onChangeLabel(value);
+  }, [value]);
   (0, import_utils11.useUpdateEffect)(() => {
     if (isOpen || allowFree) return;
     setFocusedIndex(-1);
@@ -1572,8 +1546,8 @@ var useAutocomplete = (props) => {
     id,
     allowCreate,
     allowFree,
+    children: children != null ? children : computedChildren,
     closeOnSelect,
-    computedChildren,
     descendants,
     emptyMessage,
     focusedIndex,
@@ -1597,7 +1571,6 @@ var useAutocomplete = (props) => {
     inputProps,
     optionProps,
     onChange,
-    onChangeLabel,
     onClear,
     onClose,
     onCompositionEnd,
@@ -1691,7 +1664,6 @@ var Autocomplete = (0, import_core9.forwardRef)(
     const [styles, mergedProps] = (0, import_core9.useComponentMultiStyle)("Autocomplete", props);
     let {
       className,
-      children,
       color,
       defaultValue = "",
       footer,
@@ -1713,7 +1685,7 @@ var Autocomplete = (0, import_core9.forwardRef)(
     } = (0, import_core9.omitThemeProps)(mergedProps);
     const {
       allowCreate,
-      computedChildren,
+      children,
       descendants,
       inputValue,
       isEmpty,
@@ -1724,7 +1696,7 @@ var Autocomplete = (0, import_core9.forwardRef)(
       getPopoverProps,
       onClose,
       ...rest
-    } = useAutocomplete({ ...computedProps, children, defaultValue });
+    } = useAutocomplete({ ...computedProps, defaultValue });
     h != null ? h : h = height;
     minH != null ? minH : minH = minHeight;
     const css = {
@@ -1772,26 +1744,17 @@ var Autocomplete = (0, import_core9.forwardRef)(
                   ]
                 }
               ),
-              !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 AutocompleteList,
                 {
                   footer: (0, import_utils12.runIfFunc)(footer, { value, onClose }),
                   header: (0, import_utils12.runIfFunc)(header, { value, onClose }),
                   contentProps,
                   ...listProps,
-                  children: [
+                  children: !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
                     allowCreate ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, { ...emptyProps }),
-                    children != null ? children : computedChildren
-                  ]
-                }
-              ) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                AutocompleteList,
-                {
-                  footer: (0, import_utils12.runIfFunc)(footer, { value, onClose }),
-                  header: (0, import_utils12.runIfFunc)(header, { value, onClose }),
-                  contentProps,
-                  ...listProps,
-                  children: allowCreate && inputValue ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, { ...emptyProps })
+                    children
+                  ] }) : allowCreate && inputValue ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, { ...emptyProps })
                 }
               ) })
             ]
@@ -1857,7 +1820,6 @@ var MultiAutocomplete = (0, import_core10.forwardRef)(
     );
     let {
       className,
-      children,
       closeOnSelect = false,
       color,
       component,
@@ -1885,7 +1847,7 @@ var MultiAutocomplete = (0, import_core10.forwardRef)(
     } = (0, import_core10.omitThemeProps)(mergedProps);
     const {
       allowCreate,
-      computedChildren,
+      children,
       descendants,
       inputValue,
       isEmpty,
@@ -1899,7 +1861,6 @@ var MultiAutocomplete = (0, import_core10.forwardRef)(
       ...rest
     } = useAutocomplete({
       ...computedProps,
-      children,
       closeOnSelect,
       defaultValue
     });
@@ -1960,26 +1921,17 @@ var MultiAutocomplete = (0, import_core10.forwardRef)(
                   ]
                 }
               ),
-              !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_portal2.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_portal2.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 AutocompleteList,
                 {
                   footer: (0, import_utils13.runIfFunc)(footer, { value, onClose }),
                   header: (0, import_utils13.runIfFunc)(header, { value, onClose }),
                   contentProps,
                   ...listProps,
-                  children: [
+                  children: !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
                     allowCreate ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteEmpty, { ...emptyProps }),
-                    children != null ? children : computedChildren
-                  ]
-                }
-              ) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_portal2.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                AutocompleteList,
-                {
-                  footer: (0, import_utils13.runIfFunc)(footer, { value, onClose }),
-                  header: (0, import_utils13.runIfFunc)(header, { value, onClose }),
-                  contentProps,
-                  ...listProps,
-                  children: allowCreate && inputValue ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteEmpty, { ...emptyProps })
+                    children
+                  ] }) : allowCreate && inputValue ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteEmpty, { ...emptyProps })
                 }
               ) })
             ]
@@ -2049,11 +2001,11 @@ var MultiAutocompleteField = (0, import_core10.forwardRef)(
       ...styles.field,
       cursor: "text"
     };
+    if ((label == null ? void 0 : label.length) && component) css.py = "0.125rem";
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_popover3.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       import_core10.ui.div,
       {
         className: (0, import_utils13.cx)("ui-multi-autocomplete__field", className),
-        py: (label == null ? void 0 : label.length) && component ? "0.125rem" : void 0,
         __css: css,
         ...rest,
         children: [