@yamada-ui/autocomplete 1.5.4-dev-20241005224505 → 1.5.4-dev-20241006032009

package/dist/{chunk-QPIWG4ZF.mjs → chunk-TJGVRIGK.mjs}

@@ -2,32 +2,32 @@
 import {
   useAutocomplete,
   useAutocompleteInput
-} from "./chunk-OLOU5HFC.mjs";
+} from "./chunk-4APEPTYJ.mjs";
 import {
   AutocompleteCreate
-} from "./chunk-Q2HZVVOI.mjs";
+} from "./chunk-I4IW2CW7.mjs";
 import {
   AutocompleteEmpty
-} from "./chunk-5GKGL6BL.mjs";
+} from "./chunk-2MVSDK7L.mjs";
 import {
   AutocompleteList
-} from "./chunk-S53LMDD7.mjs";
+} from "./chunk-VTBUO5SK.mjs";
 import {
   AutocompleteClearIcon,
   AutocompleteIcon
-} from "./chunk-7SWSKLSA.mjs";
+} from "./chunk-I5X4WSCX.mjs";
 import {
   AutocompleteDescendantsContextProvider,
   AutocompleteProvider,
   useAutocompleteContext
-} from "./chunk-JPUKYLBW.mjs";
+} from "./chunk-WDQYM4FP.mjs";
 
 // src/multi-autocomplete.tsx
 import {
-  ui,
   forwardRef,
-  useComponentMultiStyle,
-  omitThemeProps
+  omitThemeProps,
+  ui,
+  useComponentMultiStyle
 } from "@yamada-ui/core";
 import { Popover, PopoverTrigger } from "@yamada-ui/popover";
 import { Portal } from "@yamada-ui/portal";
@@ -42,58 +42,58 @@ var MultiAutocomplete = forwardRef(
     );
     let {
       className,
-      defaultValue = [],
-      component,
-      separator,
-      isClearable = true,
+      children,
+      closeOnSelect = false,
       color,
+      component,
+      defaultValue = [],
+      footer,
       h,
+      header,
       height,
+      isClearable = true,
+      keepPlaceholder = false,
       minH,
       minHeight,
-      closeOnSelect = false,
-      keepPlaceholder = false,
+      separator,
+      clearIconProps,
       containerProps,
       contentProps,
-      listProps,
+      createProps,
+      emptyProps,
       fieldProps,
-      inputProps,
       iconProps,
-      clearIconProps,
+      inputProps,
+      listProps,
       portalProps = { isDisabled: true },
-      createProps,
-      emptyProps,
-      header,
-      footer,
-      children,
       ...computedProps
     } = omitThemeProps(mergedProps);
     const {
-      value,
-      onClose,
+      allowCreate,
+      computedChildren,
       descendants,
+      inputValue,
+      isEmpty,
+      value,
       formControlProps,
-      getPopoverProps,
       getContainerProps,
       getFieldProps,
-      allowCreate,
-      isEmpty,
-      inputValue,
-      computedChildren,
+      getPopoverProps,
       onClear,
+      onClose,
       ...rest
     } = useAutocomplete({
       ...computedProps,
-      defaultValue,
+      children,
       closeOnSelect,
-      children
+      defaultValue
     });
     h != null ? h : h = height;
     minH != null ? minH : minH = minHeight;
     const css = {
-      w: "100%",
-      h: "fit-content",
       color,
+      h: "fit-content",
+      w: "100%",
       ...styles.container
     };
     return /* @__PURE__ */ jsx(AutocompleteDescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(
@@ -101,13 +101,13 @@ var MultiAutocomplete = forwardRef(
       {
         value: {
           ...rest,
-          value,
-          onClose,
-          formControlProps,
-          inputValue,
           allowCreate,
+          inputValue,
           isEmpty,
-          styles
+          styles,
+          value,
+          formControlProps,
+          onClose
         },
         children: /* @__PURE__ */ jsx(Popover, { ...getPopoverProps(), children: /* @__PURE__ */ jsxs(
           ui.div,
@@ -126,10 +126,10 @@ var MultiAutocomplete = forwardRef(
                       MultiAutocompleteField,
                       {
                         component,
-                        separator,
-                        keepPlaceholder,
                         h,
+                        keepPlaceholder,
                         minH,
+                        separator,
                         inputProps,
                         ...getFieldProps(fieldProps, ref)
                       }
@@ -148,8 +148,8 @@ var MultiAutocomplete = forwardRef(
               !isEmpty ? /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsxs(
                 AutocompleteList,
                 {
-                  header: runIfFunc(header, { value, onClose }),
                   footer: runIfFunc(footer, { value, onClose }),
+                  header: runIfFunc(header, { value, onClose }),
                   contentProps,
                   ...listProps,
                   children: [
@@ -160,8 +160,8 @@ var MultiAutocomplete = forwardRef(
               ) }) : /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(
                 AutocompleteList,
                 {
-                  header: runIfFunc(header, { value, onClose }),
                   footer: runIfFunc(footer, { value, onClose }),
+                  header: runIfFunc(header, { value, onClose }),
                   contentProps,
                   ...listProps,
                   children: allowCreate && inputValue ? /* @__PURE__ */ jsx(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ jsx(AutocompleteEmpty, { ...emptyProps })
@@ -180,34 +180,36 @@ var MultiAutocompleteField = forwardRef(
   ({
     className,
     component,
-    separator = ",",
-    keepPlaceholder,
     h,
+    keepPlaceholder,
     minH,
     placeholder,
+    separator = ",",
     inputProps,
     ...rest
   }, ref) => {
-    const { value, label, inputValue, onChange, isOpen, inputRef, styles } = useAutocompleteContext();
+    const { inputRef, inputValue, isOpen, label, styles, value, onChange } = useAutocompleteContext();
     const { getInputProps } = useAutocompleteInput();
     const cloneChildren = useMemo(() => {
       if (!(label == null ? void 0 : label.length)) return null;
       if (component) {
         return label.map((label2, index) => {
+          if (!value[index]) return null;
           const onRemove = (ev) => {
+            if (!value[index]) return;
             ev.stopPropagation();
             onChange(value[index]);
             if (inputRef.current) inputRef.current.focus();
           };
           const el = component({
-            value: value[index],
-            label: label2,
             index,
+            label: label2,
+            value: value[index],
             onRemove
           });
           const style = {
-            marginBlockStart: "0.125rem",
             marginBlockEnd: "0.125rem",
+            marginBlockStart: "0.125rem",
             marginInlineEnd: "0.25rem"
           };
           return el ? cloneElement(el, { key: index, style }) : null;
@@ -223,12 +225,12 @@ var MultiAutocompleteField = forwardRef(
       }
     }, [label, component, value, onChange, isOpen, inputRef, separator]);
     const css = {
-      pe: "2rem",
-      h,
-      minH,
+      alignItems: "center",
       display: "flex",
       flexWrap: "wrap",
-      alignItems: "center",
+      h,
+      minH,
+      pe: "2rem",
       ...styles.field,
       cursor: "text"
     };
@@ -236,25 +238,25 @@ var MultiAutocompleteField = forwardRef(
       ui.div,
       {
         className: cx("ui-multi-autocomplete__field", className),
-        __css: css,
         py: (label == null ? void 0 : label.length) && component ? "0.125rem" : void 0,
+        __css: css,
         ...rest,
         children: [
           cloneChildren,
           /* @__PURE__ */ jsx(
             ui.input,
             {
-              "aria-label": "Input value",
               className: "ui-multi-autocomplete__field__input",
               display: "inline-block",
               flex: "1",
+              marginBlockEnd: "0.125rem",
+              marginBlockStart: "0.125rem",
               minW: "0px",
               overflow: "hidden",
-              marginBlockStart: "0.125rem",
-              marginBlockEnd: "0.125rem",
+              placeholder: !(label == null ? void 0 : label.length) || keepPlaceholder && isOpen ? placeholder : void 0,
+              "aria-label": "Input value",
               "aria-multiselectable": "true",
-              placeholder: !label || !(label == null ? void 0 : label.length) || keepPlaceholder && isOpen ? placeholder : void 0,
-              ...getInputProps({ ...inputProps, value: inputValue != null ? inputValue : "" }, ref)
+              ...getInputProps({ ...inputProps, value: inputValue }, ref)
             }
           )
         ]
@@ -268,4 +270,4 @@ MultiAutocompleteField.__ui__ = "MultiAutocompleteField";
 export {
   MultiAutocomplete
 };
-//# sourceMappingURL=chunk-QPIWG4ZF.mjs.map
+//# sourceMappingURL=chunk-TJGVRIGK.mjs.map

package/dist/chunk-TJGVRIGK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/multi-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 {\n  CSSProperties,\n  FC,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n} 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, handlerAll, runIfFunc } from \"@yamada-ui/utils\"\nimport { cloneElement, useMemo } from \"react\"\nimport {\n  AutocompleteDescendantsContextProvider,\n  AutocompleteProvider,\n  useAutocompleteContext,\n} from \"./autocomplete-context\"\nimport { AutocompleteCreate } from \"./autocomplete-create\"\nimport { AutocompleteEmpty } from \"./autocomplete-empty\"\nimport { AutocompleteClearIcon, AutocompleteIcon } from \"./autocomplete-icon\"\nimport { AutocompleteList } from \"./autocomplete-list\"\nimport { useAutocomplete, useAutocompleteInput } from \"./use-autocomplete\"\n\ninterface MultiAutocompleteOptions {\n  /**\n   * If `true`, the list element will be closed when value is selected.\n   *\n   * @default false\n   */\n  closeOnSelect?: boolean\n  /**\n   * The custom display value to use.\n   */\n  component?: FC<{\n    index: number\n    label: string\n    value: number | string\n    onRemove: MouseEventHandler<HTMLElement>\n  }>\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   * If `true`, display the select clear icon.\n   *\n   * @default true\n   */\n  isClearable?: boolean\n  /**\n   * If `true`, keep the placeholder.\n   *\n   * @default false\n   */\n  keepPlaceholder?: boolean\n  /**\n   * The visual separator between each value.\n   *\n   * @default ','\n   */\n  separator?: string\n  /**\n   * Props for multi autocomplete clear icon element.\n   */\n  clearIconProps?: AutocompleteIconProps\n  /**\n   * Props for multi autocomplete container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"children\">\n  /**\n   * Props for multi 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 multi autocomplete field element.\n   */\n  fieldProps?: Omit<\n    MultiAutocompleteFieldProps,\n    \"children\" | \"component\" | \"inputProps\" | \"keepPlaceholder\" | \"separator\"\n  >\n  /**\n   * Props for multi autocomplete icon element.\n   */\n  iconProps?: AutocompleteIconProps\n  /**\n   * Props for multi autocomplete input element.\n   */\n  inputProps?: HTMLUIProps<\"input\">\n  /**\n   * Props for multi 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   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport interface MultiAutocompleteProps\n  extends ThemeProps<\"MultiAutocomplete\">,\n    Omit<UseAutocompleteProps<string[]>, \"closeOnSelect\">,\n    MultiAutocompleteOptions {}\n\n/**\n * `MultiAutocomplete` is a component used to display suggestions based on user text input and to obtain multiple values.\n *\n * @see Docs https://yamada-ui.com/components/forms/multi-autocomplete\n */\nexport const MultiAutocomplete = forwardRef<MultiAutocompleteProps, \"input\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\n      \"MultiAutocomplete\",\n      props,\n    )\n    let {\n      className,\n      children,\n      closeOnSelect = false,\n      color,\n      component,\n      defaultValue = [],\n      footer,\n      h,\n      header,\n      height,\n      isClearable = true,\n      keepPlaceholder = false,\n      minH,\n      minHeight,\n      separator,\n      clearIconProps,\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      computedChildren,\n      descendants,\n      inputValue,\n      isEmpty,\n      value,\n      formControlProps,\n      getContainerProps,\n      getFieldProps,\n      getPopoverProps,\n      onClear,\n      onClose,\n      ...rest\n    } = useAutocomplete<string[]>({\n      ...computedProps,\n      children,\n      closeOnSelect,\n      defaultValue,\n    })\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-multi-autocomplete\", className)}\n              __css={css}\n              {...getContainerProps(containerProps)}\n            >\n              <ui.div\n                className=\"ui-multi-autocomplete__inner\"\n                __css={{ position: \"relative\", ...styles.inner }}\n              >\n                <MultiAutocompleteField\n                  component={component}\n                  h={h}\n                  keepPlaceholder={keepPlaceholder}\n                  minH={minH}\n                  separator={separator}\n                  inputProps={inputProps}\n                  {...getFieldProps(fieldProps, ref)}\n                />\n\n                {isClearable && value.length ? (\n                  <AutocompleteClearIcon\n                    {...clearIconProps}\n                    onClick={handlerAll(clearIconProps?.onClick, onClear)}\n                    {...formControlProps}\n                  />\n                ) : (\n                  <AutocompleteIcon {...iconProps} {...formControlProps} />\n                )}\n              </ui.div>\n\n              {!isEmpty ? (\n                <Portal {...portalProps}>\n                  <AutocompleteList\n                    footer={runIfFunc(footer, { value, onClose })}\n                    header={runIfFunc(header, { value, onClose })}\n                    contentProps={contentProps}\n                    {...listProps}\n                  >\n                    {allowCreate ? (\n                      <AutocompleteCreate {...createProps} />\n                    ) : (\n                      <AutocompleteEmpty {...emptyProps} />\n                    )}\n\n                    {children ?? computedChildren}\n                  </AutocompleteList>\n                </Portal>\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                    {allowCreate && inputValue ? (\n                      <AutocompleteCreate {...createProps} />\n                    ) : (\n                      <AutocompleteEmpty {...emptyProps} />\n                    )}\n                  </AutocompleteList>\n                </Portal>\n              )}\n            </ui.div>\n          </Popover>\n        </AutocompleteProvider>\n      </AutocompleteDescendantsContextProvider>\n    )\n  },\n)\n\nMultiAutocomplete.displayName = \"MultiAutocomplete\"\nMultiAutocomplete.__ui__ = \"MultiAutocomplete\"\n\ninterface MultiAutocompleteFieldProps\n  extends HTMLUIProps,\n    Pick<\n      MultiAutocompleteProps,\n      \"component\" | \"inputProps\" | \"keepPlaceholder\" | \"separator\"\n    > {}\n\nconst MultiAutocompleteField = forwardRef<MultiAutocompleteFieldProps, \"input\">(\n  (\n    {\n      className,\n      component,\n      h,\n      keepPlaceholder,\n      minH,\n      placeholder,\n      separator = \",\",\n      inputProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { inputRef, inputValue, isOpen, label, styles, value, onChange } =\n      useAutocompleteContext()\n\n    const { getInputProps } = useAutocompleteInput()\n\n    const cloneChildren = useMemo(() => {\n      if (!label?.length) return null\n\n      if (component) {\n        return (label as string[]).map((label, index) => {\n          if (!value[index]) return null\n\n          const onRemove: MouseEventHandler<HTMLElement> = (ev) => {\n            if (!value[index]) return\n\n            ev.stopPropagation()\n\n            onChange(value[index])\n\n            if (inputRef.current) inputRef.current.focus()\n          }\n\n          const el = component({\n            index,\n            label,\n            value: value[index],\n            onRemove,\n          })\n\n          const style: CSSProperties = {\n            marginBlockEnd: \"0.125rem\",\n            marginBlockStart: \"0.125rem\",\n            marginInlineEnd: \"0.25rem\",\n          }\n\n          return el\n            ? cloneElement(el as ReactElement, { key: index, style })\n            : null\n        })\n      } else {\n        return (label as string[]).map((value, index) => {\n          const isLast = label.length === index + 1\n\n          return (\n            <ui.span key={index} display=\"inline-block\" me=\"0.25rem\">\n              {value}\n              {!isLast || isOpen ? separator : null}\n            </ui.span>\n          )\n        })\n      }\n    }, [label, component, value, onChange, isOpen, inputRef, separator])\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"flex\",\n      flexWrap: \"wrap\",\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-multi-autocomplete__field\", className)}\n          py={label?.length && component ? \"0.125rem\" : undefined}\n          __css={css}\n          {...rest}\n        >\n          {cloneChildren}\n\n          <ui.input\n            className=\"ui-multi-autocomplete__field__input\"\n            display=\"inline-block\"\n            flex=\"1\"\n            marginBlockEnd=\"0.125rem\"\n            marginBlockStart=\"0.125rem\"\n            minW=\"0px\"\n            overflow=\"hidden\"\n            placeholder={\n              !label?.length || (keepPlaceholder && isOpen)\n                ? placeholder\n                : undefined\n            }\n            aria-label=\"Input value\"\n            aria-multiselectable=\"true\"\n            {...getInputProps({ ...inputProps, value: inputValue }, ref)}\n          />\n        </ui.div>\n      </PopoverTrigger>\n    )\n  },\n)\n\nMultiAutocompleteField.displayName = \"MultiAutocompleteField\"\nMultiAutocompleteField.__ui__ = \"MultiAutocompleteField\"\n"],"mappings":"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","names":["label","value"]}

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

@@ -2,7 +2,7 @@
 import {
   useAutocompleteContext,
   useAutocompleteDescendantsContext
-} from "./chunk-JPUKYLBW.mjs";
+} from "./chunk-WDQYM4FP.mjs";
 
 // src/use-autocomplete-list.ts
 import { mergeRefs, useUpdateEffect } from "@yamada-ui/utils";
@@ -49,24 +49,24 @@ var useAutocompleteList = () => {
     (props = {}, ref = null) => {
       var _a;
       return {
-        as: "ul",
+        id: (_a = props.id) != null ? _a : uuid,
         ref: mergeRefs(listRef, ref),
+        as: "ul",
+        position: "relative",
         role: "listbox",
         tabIndex: -1,
-        position: "relative",
-        id: (_a = props.id) != null ? _a : uuid,
         ...props
       };
     },
     [listRef, uuid]
   );
   return {
-    onAnimationComplete,
-    getListProps
+    getListProps,
+    onAnimationComplete
   };
 };
 
 export {
   useAutocompleteList
 };
-//# sourceMappingURL=chunk-R76HPAN4.mjs.map
+//# sourceMappingURL=chunk-TR4X4EEG.mjs.map

package/dist/{chunk-R76HPAN4.mjs.map → chunk-TR4X4EEG.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/use-autocomplete-list.ts"],"sourcesContent":["import type { PropGetter } from \"@yamada-ui/core\"\nimport { mergeRefs, useUpdateEffect } from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef } from \"react\"\nimport {\n  useAutocompleteContext,\n  useAutocompleteDescendantsContext,\n} from \"./autocomplete-context\"\n\nexport const useAutocompleteList = () => {\n  const uuid = useId()\n  const { focusedIndex, isOpen, listRef, rebirthOptions } =\n    useAutocompleteContext()\n\n  const descendants = useAutocompleteDescendantsContext()\n\n  const beforeFocusedIndex = useRef<number>(-1)\n  const selectedValue = descendants.value(focusedIndex)\n\n  const onAnimationComplete = useCallback(() => {\n    if (!isOpen) rebirthOptions(false)\n  }, [isOpen, rebirthOptions])\n\n  useEffect(() => {\n    if (!listRef.current || !selectedValue) return\n\n    if (beforeFocusedIndex.current === selectedValue.index) return\n\n    const parent = listRef.current\n    const child = selectedValue.node\n\n    const parentHeight = parent.clientHeight\n    const viewTop = parent.scrollTop\n    const viewBottom = viewTop + parentHeight\n\n    const childHeight = child.clientHeight\n    const childTop = child.offsetTop\n    const childBottom = childTop + childHeight\n\n    const isInView = viewTop <= childTop && childBottom <= viewBottom\n\n    const isScrollBottom = beforeFocusedIndex.current < selectedValue.index\n\n    if (!isInView) {\n      if (childBottom <= parentHeight) {\n        listRef.current.scrollTo({ top: 0 })\n      } else {\n        if (!isScrollBottom) {\n          listRef.current.scrollTo({ top: childTop + 1 })\n        } else {\n          listRef.current.scrollTo({ top: childBottom - parentHeight })\n        }\n      }\n    }\n\n    beforeFocusedIndex.current = selectedValue.index\n  }, [listRef, selectedValue])\n\n  useUpdateEffect(() => {\n    if (!isOpen) beforeFocusedIndex.current = -1\n  }, [isOpen])\n\n  const getListProps: PropGetter<\"ul\"> = useCallback(\n    (props = {}, ref = null) => ({\n      as: \"ul\",\n      ref: mergeRefs(listRef, ref),\n      role: \"listbox\",\n      tabIndex: -1,\n      position: \"relative\",\n      id: props.id ?? uuid,\n      ...props,\n    }),\n    [listRef, uuid],\n  )\n\n  return {\n    onAnimationComplete,\n    getListProps,\n  }\n}\n"],"mappings":";;;;;;;AACA,SAAS,WAAW,uBAAuB;AAC3C,SAAS,aAAa,WAAW,OAAO,cAAc;AAM/C,IAAM,sBAAsB,MAAM;AACvC,QAAM,OAAO,MAAM;AACnB,QAAM,EAAE,cAAc,QAAQ,SAAS,eAAe,IACpD,uBAAuB;AAEzB,QAAM,cAAc,kCAAkC;AAEtD,QAAM,qBAAqB,OAAe,EAAE;AAC5C,QAAM,gBAAgB,YAAY,MAAM,YAAY;AAEpD,QAAM,sBAAsB,YAAY,MAAM;AAC5C,QAAI,CAAC,OAAQ,gBAAe,KAAK;AAAA,EACnC,GAAG,CAAC,QAAQ,cAAc,CAAC;AAE3B,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,WAAW,CAAC,cAAe;AAExC,QAAI,mBAAmB,YAAY,cAAc,MAAO;AAExD,UAAM,SAAS,QAAQ;AACvB,UAAM,QAAQ,cAAc;AAE5B,UAAM,eAAe,OAAO;AAC5B,UAAM,UAAU,OAAO;AACvB,UAAM,aAAa,UAAU;AAE7B,UAAM,cAAc,MAAM;AAC1B,UAAM,WAAW,MAAM;AACvB,UAAM,cAAc,WAAW;AAE/B,UAAM,WAAW,WAAW,YAAY,eAAe;AAEvD,UAAM,iBAAiB,mBAAmB,UAAU,cAAc;AAElE,QAAI,CAAC,UAAU;AACb,UAAI,eAAe,cAAc;AAC/B,gBAAQ,QAAQ,SAAS,EAAE,KAAK,EAAE,CAAC;AAAA,MACrC,OAAO;AACL,YAAI,CAAC,gBAAgB;AACnB,kBAAQ,QAAQ,SAAS,EAAE,KAAK,WAAW,EAAE,CAAC;AAAA,QAChD,OAAO;AACL,kBAAQ,QAAQ,SAAS,EAAE,KAAK,cAAc,aAAa,CAAC;AAAA,QAC9D;AAAA,MACF;AAAA,IACF;AAEA,uBAAmB,UAAU,cAAc;AAAA,EAC7C,GAAG,CAAC,SAAS,aAAa,CAAC;AAE3B,kBAAgB,MAAM;AACpB,QAAI,CAAC,OAAQ,oBAAmB,UAAU;AAAA,EAC5C,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,eAAiC;AAAA,IACrC,CAAC,QAAQ,CAAC,GAAG,MAAM,SAAM;AA9D7B;AA8DiC;AAAA,QAC3B,IAAI;AAAA,QACJ,KAAK,UAAU,SAAS,GAAG;AAAA,QAC3B,MAAM;AAAA,QACN,UAAU;AAAA,QACV,UAAU;AAAA,QACV,KAAI,WAAM,OAAN,YAAY;AAAA,QAChB,GAAG;AAAA,MACL;AAAA;AAAA,IACA,CAAC,SAAS,IAAI;AAAA,EAChB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../src/use-autocomplete-list.ts"],"sourcesContent":["import type { PropGetter } from \"@yamada-ui/core\"\nimport { mergeRefs, useUpdateEffect } from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef } from \"react\"\nimport {\n  useAutocompleteContext,\n  useAutocompleteDescendantsContext,\n} from \"./autocomplete-context\"\n\nexport const useAutocompleteList = () => {\n  const uuid = useId()\n  const { focusedIndex, isOpen, listRef, rebirthOptions } =\n    useAutocompleteContext()\n\n  const descendants = useAutocompleteDescendantsContext()\n\n  const beforeFocusedIndex = useRef<number>(-1)\n  const selectedValue = descendants.value(focusedIndex)\n\n  const onAnimationComplete = useCallback(() => {\n    if (!isOpen) rebirthOptions(false)\n  }, [isOpen, rebirthOptions])\n\n  useEffect(() => {\n    if (!listRef.current || !selectedValue) return\n\n    if (beforeFocusedIndex.current === selectedValue.index) return\n\n    const parent = listRef.current\n    const child = selectedValue.node\n\n    const parentHeight = parent.clientHeight\n    const viewTop = parent.scrollTop\n    const viewBottom = viewTop + parentHeight\n\n    const childHeight = child.clientHeight\n    const childTop = child.offsetTop\n    const childBottom = childTop + childHeight\n\n    const isInView = viewTop <= childTop && childBottom <= viewBottom\n\n    const isScrollBottom = beforeFocusedIndex.current < selectedValue.index\n\n    if (!isInView) {\n      if (childBottom <= parentHeight) {\n        listRef.current.scrollTo({ top: 0 })\n      } else {\n        if (!isScrollBottom) {\n          listRef.current.scrollTo({ top: childTop + 1 })\n        } else {\n          listRef.current.scrollTo({ top: childBottom - parentHeight })\n        }\n      }\n    }\n\n    beforeFocusedIndex.current = selectedValue.index\n  }, [listRef, selectedValue])\n\n  useUpdateEffect(() => {\n    if (!isOpen) beforeFocusedIndex.current = -1\n  }, [isOpen])\n\n  const getListProps: PropGetter<\"ul\"> = useCallback(\n    (props = {}, ref = null) => ({\n      id: props.id ?? uuid,\n      ref: mergeRefs(listRef, ref),\n      as: \"ul\",\n      position: \"relative\",\n      role: \"listbox\",\n      tabIndex: -1,\n      ...props,\n    }),\n    [listRef, uuid],\n  )\n\n  return {\n    getListProps,\n    onAnimationComplete,\n  }\n}\n"],"mappings":";;;;;;;AACA,SAAS,WAAW,uBAAuB;AAC3C,SAAS,aAAa,WAAW,OAAO,cAAc;AAM/C,IAAM,sBAAsB,MAAM;AACvC,QAAM,OAAO,MAAM;AACnB,QAAM,EAAE,cAAc,QAAQ,SAAS,eAAe,IACpD,uBAAuB;AAEzB,QAAM,cAAc,kCAAkC;AAEtD,QAAM,qBAAqB,OAAe,EAAE;AAC5C,QAAM,gBAAgB,YAAY,MAAM,YAAY;AAEpD,QAAM,sBAAsB,YAAY,MAAM;AAC5C,QAAI,CAAC,OAAQ,gBAAe,KAAK;AAAA,EACnC,GAAG,CAAC,QAAQ,cAAc,CAAC;AAE3B,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,WAAW,CAAC,cAAe;AAExC,QAAI,mBAAmB,YAAY,cAAc,MAAO;AAExD,UAAM,SAAS,QAAQ;AACvB,UAAM,QAAQ,cAAc;AAE5B,UAAM,eAAe,OAAO;AAC5B,UAAM,UAAU,OAAO;AACvB,UAAM,aAAa,UAAU;AAE7B,UAAM,cAAc,MAAM;AAC1B,UAAM,WAAW,MAAM;AACvB,UAAM,cAAc,WAAW;AAE/B,UAAM,WAAW,WAAW,YAAY,eAAe;AAEvD,UAAM,iBAAiB,mBAAmB,UAAU,cAAc;AAElE,QAAI,CAAC,UAAU;AACb,UAAI,eAAe,cAAc;AAC/B,gBAAQ,QAAQ,SAAS,EAAE,KAAK,EAAE,CAAC;AAAA,MACrC,OAAO;AACL,YAAI,CAAC,gBAAgB;AACnB,kBAAQ,QAAQ,SAAS,EAAE,KAAK,WAAW,EAAE,CAAC;AAAA,QAChD,OAAO;AACL,kBAAQ,QAAQ,SAAS,EAAE,KAAK,cAAc,aAAa,CAAC;AAAA,QAC9D;AAAA,MACF;AAAA,IACF;AAEA,uBAAmB,UAAU,cAAc;AAAA,EAC7C,GAAG,CAAC,SAAS,aAAa,CAAC;AAE3B,kBAAgB,MAAM;AACpB,QAAI,CAAC,OAAQ,oBAAmB,UAAU;AAAA,EAC5C,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,eAAiC;AAAA,IACrC,CAAC,QAAQ,CAAC,GAAG,MAAM,SAAM;AA9D7B;AA8DiC;AAAA,QAC3B,KAAI,WAAM,OAAN,YAAY;AAAA,QAChB,KAAK,UAAU,SAAS,GAAG;AAAA,QAC3B,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,MAAM;AAAA,QACN,UAAU;AAAA,QACV,GAAG;AAAA,MACL;AAAA;AAAA,IACA,CAAC,SAAS,IAAI;AAAA,EAChB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

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

@@ -1,34 +1,34 @@
 "use client"
 import {
   useAutocompleteList
-} from "./chunk-R76HPAN4.mjs";
+} from "./chunk-TR4X4EEG.mjs";
 import {
   useAutocompleteContext
-} from "./chunk-JPUKYLBW.mjs";
+} from "./chunk-WDQYM4FP.mjs";
 
 // src/autocomplete-list.tsx
-import { ui, forwardRef } from "@yamada-ui/core";
+import { forwardRef, ui } from "@yamada-ui/core";
 import { PopoverContent } from "@yamada-ui/popover";
 import { cx, handlerAll } from "@yamada-ui/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 var AutocompleteList = forwardRef(
   ({
     className,
-    w,
-    width,
-    minW,
-    minWidth,
+    children,
+    footer,
+    header,
     maxW,
     maxWidth,
+    minW,
+    minWidth,
+    w,
+    width,
     contentProps,
-    header,
-    footer,
-    children,
     ...rest
   }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const { styles } = useAutocompleteContext();
-    const { onAnimationComplete, getListProps } = useAutocompleteList();
+    const { getListProps, onAnimationComplete } = useAutocompleteList();
     width != null ? width : width = w;
     width != null ? width : width = (_c = (_a = styles.list) == null ? void 0 : _a.width) != null ? _c : (_b = styles.list) == null ? void 0 : _b.w;
     minWidth != null ? minWidth : minWidth = minW;
@@ -40,10 +40,10 @@ var AutocompleteList = forwardRef(
       {
         as: "div",
         className: "ui-autocomplete__popover",
-        width,
-        minWidth,
         maxWidth,
-        __css: { ...styles.content, width, minWidth, maxWidth },
+        minWidth,
+        width,
+        __css: { ...styles.content, maxWidth, minWidth, width },
         ...contentProps,
         onAnimationComplete: handlerAll(
           contentProps == null ? void 0 : contentProps.onAnimationComplete,
@@ -86,4 +86,4 @@ AutocompleteList.__ui__ = "AutocompleteList";
 export {
   AutocompleteList
 };
-//# sourceMappingURL=chunk-S53LMDD7.mjs.map
+//# sourceMappingURL=chunk-VTBUO5SK.mjs.map

package/dist/chunk-VTBUO5SK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/autocomplete-list.tsx"],"sourcesContent":["import type { CSSUIProps, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { MotionPropsWithoutChildren } from \"@yamada-ui/motion\"\nimport type { ReactNode } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { PopoverContent } from \"@yamada-ui/popover\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { useAutocompleteList } from \"./use-autocomplete-list\"\n\nexport interface AutocompleteListProps extends HTMLUIProps<\"ul\"> {\n  footer?: ReactNode\n  header?: ReactNode\n  contentProps?: MotionPropsWithoutChildren\n}\n\nexport const AutocompleteList = forwardRef<AutocompleteListProps, \"ul\">(\n  (\n    {\n      className,\n      children,\n      footer,\n      header,\n      maxW,\n      maxWidth,\n      minW,\n      minWidth,\n      w,\n      width,\n      contentProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { styles } = useAutocompleteContext()\n    const { getListProps, onAnimationComplete } = useAutocompleteList()\n\n    width ??= w\n    width ??= (styles.list?.width ?? styles.list?.w) as CSSUIProps[\"width\"]\n    minWidth ??= minW\n    minWidth ??= (styles.list?.minWidth ??\n      styles.list?.minW) as CSSUIProps[\"minWidth\"]\n    maxWidth ??= maxW\n    maxWidth ??= (styles.list?.maxWidth ??\n      styles.list?.maxW) as CSSUIProps[\"maxWidth\"]\n\n    return (\n      <PopoverContent\n        as=\"div\"\n        className=\"ui-autocomplete__popover\"\n        maxWidth={maxWidth}\n        minWidth={minWidth}\n        width={width}\n        __css={{ ...styles.content, maxWidth, minWidth, width }}\n        {...contentProps}\n        onAnimationComplete={handlerAll(\n          contentProps?.onAnimationComplete,\n          onAnimationComplete,\n        )}\n      >\n        {header ? (\n          <ui.div\n            className=\"ui-autocomplete__header\"\n            __css={{ ...styles.header }}\n          >\n            {header}\n          </ui.div>\n        ) : null}\n\n        <ui.ul\n          className={cx(\"ui-autocomplete__list\", className)}\n          __css={{ ...styles.list }}\n          {...getListProps(rest, ref)}\n        >\n          {children}\n        </ui.ul>\n\n        {footer ? (\n          <ui.div\n            className=\"ui-autocomplete__footer\"\n            __css={{ ...styles.footer }}\n          >\n            {footer}\n          </ui.div>\n        ) : null}\n      </PopoverContent>\n    )\n  },\n)\n\nAutocompleteList.displayName = \"AutocompleteList\"\nAutocompleteList.__ui__ = \"AutocompleteList\"\n"],"mappings":";;;;;;;;;AAGA,SAAS,YAAY,UAAU;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,IAAI,kBAAkB;AAyCzB,SAcI,KAdJ;AA/BC,IAAM,mBAAmB;AAAA,EAC9B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AAhCP;AAiCI,UAAM,EAAE,OAAO,IAAI,uBAAuB;AAC1C,UAAM,EAAE,cAAc,oBAAoB,IAAI,oBAAoB;AAElE,oCAAU;AACV,qCAAW,kBAAO,SAAP,mBAAa,UAAb,aAAsB,YAAO,SAAP,mBAAa;AAC9C,6CAAa;AACb,8CAAc,kBAAO,SAAP,mBAAa,aAAb,aACZ,YAAO,SAAP,mBAAa;AACf,6CAAa;AACb,8CAAc,kBAAO,SAAP,mBAAa,aAAb,aACZ,YAAO,SAAP,mBAAa;AAEf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,WAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,SAAS,UAAU,UAAU,MAAM;AAAA,QACrD,GAAG;AAAA,QACJ,qBAAqB;AAAA,UACnB,6CAAc;AAAA,UACd;AAAA,QACF;AAAA,QAEC;AAAA,mBACC;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,OAAO;AAAA,cAEzB;AAAA;AAAA,UACH,IACE;AAAA,UAEJ;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,cAChD,OAAO,EAAE,GAAG,OAAO,KAAK;AAAA,cACvB,GAAG,aAAa,MAAM,GAAG;AAAA,cAEzB;AAAA;AAAA,UACH;AAAA,UAEC,SACC;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,OAAO;AAAA,cAEzB;AAAA;AAAA,UACH,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;AAC/B,iBAAiB,SAAS;","names":[]}

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

@@ -5,9 +5,9 @@ import { createDescendant } from "@yamada-ui/use-descendant";
 import { createContext } from "@yamada-ui/utils";
 var {
   DescendantsContextProvider: AutocompleteDescendantsContextProvider,
-  useDescendantsContext: useAutocompleteDescendantsContext,
+  useDescendant: useAutocompleteDescendant,
   useDescendants: useAutocompleteDescendants,
-  useDescendant: useAutocompleteDescendant
+  useDescendantsContext: useAutocompleteDescendantsContext
 } = createDescendant();
 var [AutocompleteProvider, useAutocompleteContext] = createContext({
   name: "AutocompleteContext",
@@ -16,10 +16,10 @@ var [AutocompleteProvider, useAutocompleteContext] = createContext({
 
 export {
   AutocompleteDescendantsContextProvider,
-  useAutocompleteDescendantsContext,
-  useAutocompleteDescendants,
   useAutocompleteDescendant,
+  useAutocompleteDescendants,
+  useAutocompleteDescendantsContext,
   AutocompleteProvider,
   useAutocompleteContext
 };
-//# sourceMappingURL=chunk-JPUKYLBW.mjs.map
+//# sourceMappingURL=chunk-WDQYM4FP.mjs.map

package/dist/chunk-WDQYM4FP.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 { ChangeOptions, 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, options?: ChangeOptions) => void\n  onChangeLabel: (newValue: string, options?: ChangeOptions) => 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;AAkCd,IAAM,CAAC,sBAAsB,sBAAsB,IACxD,cAAmC;AAAA,EACjC,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;","names":[]}

package/dist/{chunk-S2HFYJVI.mjs → chunk-ZEGANG5C.mjs}

@@ -1,34 +1,34 @@
 "use client"
 import {
   useAutocompleteOption
-} from "./chunk-5LPWFWE6.mjs";
+} from "./chunk-ZJFWWXQM.mjs";
 import {
   AutocompleteItemIcon
-} from "./chunk-7SWSKLSA.mjs";
+} from "./chunk-I5X4WSCX.mjs";
 import {
   useAutocompleteContext
-} from "./chunk-JPUKYLBW.mjs";
+} from "./chunk-WDQYM4FP.mjs";
 
 // src/autocomplete-option.tsx
-import { ui, forwardRef } from "@yamada-ui/core";
+import { forwardRef, ui } from "@yamada-ui/core";
 import { cx } from "@yamada-ui/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 var AutocompleteOption = forwardRef(
   ({ className, icon, ...rest }, ref) => {
     const { styles } = useAutocompleteContext();
-    const { isSelected, customIcon, children, getOptionProps } = useAutocompleteOption(rest);
+    const { children, customIcon, isSelected, getOptionProps } = useAutocompleteOption(rest);
     icon != null ? icon : icon = customIcon;
     const css = {
-      textDecoration: "none",
+      alignItems: "center",
       color: "inherit",
-      userSelect: "none",
       display: "flex",
-      width: "100%",
-      alignItems: "center",
-      textAlign: "start",
       flex: "0 0 auto",
-      outline: 0,
       gap: "0.75rem",
+      outline: 0,
+      textAlign: "start",
+      textDecoration: "none",
+      userSelect: "none",
+      width: "100%",
       ...styles.item
     };
     return /* @__PURE__ */ jsxs(
@@ -47,7 +47,7 @@ var AutocompleteOption = forwardRef(
 );
 AutocompleteOption.displayName = "AutocompleteOption";
 AutocompleteOption.__ui__ = "AutocompleteOption";
-var AutocompleteCheckIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ jsx(
+var AutocompleteCheckIcon = () => /* @__PURE__ */ jsx("svg", { height: "1em", viewBox: "0 0 14 14", width: "1em", children: /* @__PURE__ */ jsx(
   "polygon",
   {
     fill: "currentColor",
@@ -60,4 +60,4 @@ AutocompleteCheckIcon.__ui__ = "AutocompleteCheckIcon";
 export {
   AutocompleteOption
 };
-//# sourceMappingURL=chunk-S2HFYJVI.mjs.map
+//# sourceMappingURL=chunk-ZEGANG5C.mjs.map

package/dist/chunk-ZEGANG5C.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/autocomplete-option.tsx"],"sourcesContent":["import type { CSSUIObject, FC } from \"@yamada-ui/core\"\nimport type { ReactElement } from \"react\"\nimport type { UseAutocompleteOptionProps } from \"./use-autocomplete-option\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { AutocompleteItemIcon } from \"./autocomplete-icon\"\nimport { useAutocompleteOption } from \"./use-autocomplete-option\"\n\ninterface AutocompleteOptionOptions {\n  /**\n   * The autocomplete option icon to use.\n   */\n  icon?: null | ReactElement\n}\n\nexport interface AutocompleteOptionProps\n  extends UseAutocompleteOptionProps,\n    AutocompleteOptionOptions {}\n\nexport const AutocompleteOption = forwardRef<AutocompleteOptionProps, \"li\">(\n  ({ className, icon, ...rest }, ref) => {\n    const { styles } = useAutocompleteContext()\n    const { children, customIcon, isSelected, getOptionProps } =\n      useAutocompleteOption(rest)\n\n    icon ??= customIcon\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      color: \"inherit\",\n      display: \"flex\",\n      flex: \"0 0 auto\",\n      gap: \"0.75rem\",\n      outline: 0,\n      textAlign: \"start\",\n      textDecoration: \"none\",\n      userSelect: \"none\",\n      width: \"100%\",\n      ...styles.item,\n    }\n\n    return (\n      <ui.li\n        className={cx(\"ui-autocomplete__item\", className)}\n        __css={css}\n        {...getOptionProps({}, ref)}\n      >\n        {icon !== null ? (\n          <AutocompleteItemIcon opacity={isSelected ? 1 : 0}>\n            {icon || <AutocompleteCheckIcon />}\n          </AutocompleteItemIcon>\n        ) : null}\n\n        <ui.span style={{ flex: 1 }} data-label>\n          {children}\n        </ui.span>\n      </ui.li>\n    )\n  },\n)\n\nAutocompleteOption.displayName = \"AutocompleteOption\"\nAutocompleteOption.__ui__ = \"AutocompleteOption\"\n\nconst AutocompleteCheckIcon: FC = () => (\n  <svg height=\"1em\" viewBox=\"0 0 14 14\" width=\"1em\">\n    <polygon\n      fill=\"currentColor\"\n      points=\"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039\"\n    />\n  </svg>\n)\n\nAutocompleteCheckIcon.displayName = \"AutocompleteCheckIcon\"\nAutocompleteCheckIcon.__ui__ = \"AutocompleteCheckIcon\"\n"],"mappings":";;;;;;;;;;;;AAGA,SAAS,YAAY,UAAU;AAC/B,SAAS,UAAU;AAuCb,SAOe,KAPf;AAvBC,IAAM,qBAAqB;AAAA,EAChC,CAAC,EAAE,WAAW,MAAM,GAAG,KAAK,GAAG,QAAQ;AACrC,UAAM,EAAE,OAAO,IAAI,uBAAuB;AAC1C,UAAM,EAAE,UAAU,YAAY,YAAY,eAAe,IACvD,sBAAsB,IAAI;AAE5B,iCAAS;AAET,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,QAChD,OAAO;AAAA,QACN,GAAG,eAAe,CAAC,GAAG,GAAG;AAAA,QAEzB;AAAA,mBAAS,OACR,oBAAC,wBAAqB,SAAS,aAAa,IAAI,GAC7C,kBAAQ,oBAAC,yBAAsB,GAClC,IACE;AAAA,UAEJ,oBAAC,GAAG,MAAH,EAAQ,OAAO,EAAE,MAAM,EAAE,GAAG,cAAU,MACpC,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;AAE5B,IAAM,wBAA4B,MAChC,oBAAC,SAAI,QAAO,OAAM,SAAQ,aAAY,OAAM,OAC1C;AAAA,EAAC;AAAA;AAAA,IACC,MAAK;AAAA,IACL,QAAO;AAAA;AACT,GACF;AAGF,sBAAsB,cAAc;AACpC,sBAAsB,SAAS;","names":[]}