@yamada-ui/autocomplete 1.5.4-next-20241005220055 → 1.6.0-dev-20241011151311

package/dist/autocomplete-list.js

@@ -33,9 +33,9 @@ var import_use_descendant = require("@yamada-ui/use-descendant");
 var import_utils = require("@yamada-ui/utils");
 var {
   DescendantsContextProvider: AutocompleteDescendantsContextProvider,
-  useDescendantsContext: useAutocompleteDescendantsContext,
+  useDescendant: useAutocompleteDescendant,
   useDescendants: useAutocompleteDescendants,
-  useDescendant: useAutocompleteDescendant
+  useDescendantsContext: useAutocompleteDescendantsContext
 } = (0, import_use_descendant.createDescendant)();
 var [AutocompleteProvider, useAutocompleteContext] = (0, import_utils.createContext)({
   name: "AutocompleteContext",
@@ -87,20 +87,20 @@ var useAutocompleteList = () => {
     (props = {}, ref = null) => {
       var _a;
       return {
-        as: "ul",
+        id: (_a = props.id) != null ? _a : uuid,
         ref: (0, import_utils2.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
   };
 };
 
@@ -109,21 +109,21 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var AutocompleteList = (0, import_core.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;
@@ -135,10 +135,10 @@ var AutocompleteList = (0, import_core.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: (0, import_utils3.handlerAll)(
           contentProps == null ? void 0 : contentProps.onAnimationComplete,

package/dist/autocomplete-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/autocomplete-list.tsx","../src/autocomplete-context.ts","../src/use-autocomplete-list.ts"],"sourcesContent":["import type { CSSUIProps, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { MotionPropsWithoutChildren } from \"@yamada-ui/motion\"\nimport { PopoverContent } from \"@yamada-ui/popover\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { useAutocompleteList } from \"./use-autocomplete-list\"\n\nexport interface AutocompleteListProps extends HTMLUIProps<\"ul\"> {\n  contentProps?: MotionPropsWithoutChildren\n  header?: ReactNode\n  footer?: ReactNode\n}\n\nexport const AutocompleteList = forwardRef<AutocompleteListProps, \"ul\">(\n  (\n    {\n      className,\n      w,\n      width,\n      minW,\n      minWidth,\n      maxW,\n      maxWidth,\n      contentProps,\n      header,\n      footer,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { styles } = useAutocompleteContext()\n    const { onAnimationComplete, getListProps } = 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        width={width}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        __css={{ ...styles.content, width, minWidth, maxWidth }}\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","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type { Dispatch, DOMAttributes, RefObject, SetStateAction } from \"react\"\nimport type { ChangeOptions, UseAutocompleteProps } from \"./use-autocomplete\"\n\nexport const {\n  DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n  useDescendantsContext: useAutocompleteDescendantsContext,\n  useDescendants: useAutocompleteDescendants,\n  useDescendant: useAutocompleteDescendant,\n} = createDescendant()\n\ninterface AutocompleteContext\n  extends Omit<\n    UseAutocompleteProps,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"onCreate\"\n  > {\n  value: string | string[]\n  label: string | string[] | undefined\n  inputValue: string\n  isHit: boolean\n  isEmpty: boolean\n  isAllSelected: boolean\n  onChange: (newValue: string, options?: ChangeOptions) => void\n  onChangeLabel: (newValue: string, options?: ChangeOptions) => void\n  pickOptions: (value: string) => void\n  rebirthOptions: (runFocus?: boolean) => void\n  inputProps: DOMAttributes<HTMLInputElement>\n  isOpen: boolean\n  onOpen: () => void\n  onClose: () => void\n  onCreate: () => void\n  onFocusFirst: () => void\n  onFocusLast: () => void\n  onFocusNext: (index?: number) => void\n  onFocusPrev: (index?: number) => void\n  focusedIndex: number\n  setFocusedIndex: Dispatch<SetStateAction<number>>\n  listRef: RefObject<HTMLUListElement>\n  inputRef: RefObject<HTMLInputElement>\n  formControlProps: { [key: string]: any }\n  styles: { [key: string]: CSSUIObject }\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","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":"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","names":["import_utils","import_utils"]}
+{"version":3,"sources":["../src/autocomplete-list.tsx","../src/autocomplete-context.ts","../src/use-autocomplete-list.ts"],"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","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","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":"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","names":["import_utils","import_utils"]}

package/dist/autocomplete-list.mjs

@@ -1,9 +1,9 @@
 "use client"
 import {
   AutocompleteList
-} from "./chunk-S53LMDD7.mjs";
-import "./chunk-R76HPAN4.mjs";
-import "./chunk-JPUKYLBW.mjs";
+} from "./chunk-VTBUO5SK.mjs";
+import "./chunk-TR4X4EEG.mjs";
+import "./chunk-WDQYM4FP.mjs";
 export {
   AutocompleteList
 };

package/dist/autocomplete-option-group.js

@@ -32,9 +32,9 @@ var import_use_descendant = require("@yamada-ui/use-descendant");
 var import_utils = require("@yamada-ui/utils");
 var {
   DescendantsContextProvider: AutocompleteDescendantsContextProvider,
-  useDescendantsContext: useAutocompleteDescendantsContext,
+  useDescendant: useAutocompleteDescendant,
   useDescendants: useAutocompleteDescendants,
-  useDescendant: useAutocompleteDescendant
+  useDescendantsContext: useAutocompleteDescendantsContext
 } = (0, import_use_descendant.createDescendant)();
 var [AutocompleteProvider, useAutocompleteContext] = (0, import_utils.createContext)({
   name: "AutocompleteContext",
@@ -49,7 +49,7 @@ var useAutocompleteOptionGroup = ({
   label,
   ...rest
 }) => {
-  const { value, omitSelectedValues } = useAutocompleteContext();
+  const { omitSelectedValues, value } = useAutocompleteContext();
   const isMulti = (0, import_utils2.isArray)(value);
   const descendants = useAutocompleteDescendantsContext();
   const values = descendants.values();
@@ -61,7 +61,7 @@ var useAutocompleteOptionGroup = ({
   ) : [];
   const selectedIndexes = selectedValues.map(({ index }) => index);
   const childValues = values.filter(
-    ({ node, index }) => {
+    ({ index, node }) => {
       var _a;
       return ((_a = node.parentElement) == null ? void 0 : _a.dataset.label) === label && !selectedIndexes.includes(index) && "target" in node.dataset;
     }
@@ -74,12 +74,12 @@ var useAutocompleteOptionGroup = ({
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
         height: "1px",
-        width: "1px",
         margin: "-1px",
-        padding: "0px",
         overflow: "hidden",
+        padding: "0px",
+        position: "absolute",
         whiteSpace: "nowrap",
-        position: "absolute"
+        width: "1px"
       };
       return {
         ref,
@@ -114,12 +114,12 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var AutocompleteOptionGroup = (0, import_core2.forwardRef)(
   ({
     className,
+    children,
     color,
     h,
     height,
     minH,
     minHeight,
-    children,
     labelProps,
     ...rest
   }, ref) => {
@@ -135,15 +135,15 @@ var AutocompleteOptionGroup = (0, import_core2.forwardRef)(
           "ui-autocomplete__item--group",
           className
         ),
-        __css: { w: "100%", h: "fit-content", color },
+        __css: { color, h: "fit-content", w: "100%" },
         ...getContainerProps(),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_core2.ui.span,
             {
               className: "ui-autocomplete__item__group-label",
-              __css: styles.groupLabel,
               lineClamp: 1,
+              __css: styles.groupLabel,
               ...labelProps,
               children: label
             }

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/autocomplete-option-group.tsx","../src/autocomplete-context.ts","../src/use-autocomplete-option-group.ts"],"sourcesContent":["import type { HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport type { UseAutocompleteOptionGroupProps } from \"./use-autocomplete-option-group\"\nimport { useAutocompleteOptionGroup } from \"./use-autocomplete-option-group\"\n\ninterface AutocompleteOptionGroupOptions\n  extends UseAutocompleteOptionGroupProps {\n  /**\n   * Props for autocomplete option group element.\n   */\n  labelProps?: HTMLUIProps<\"span\">\n}\n\nexport interface AutocompleteOptionGroupProps\n  extends HTMLUIProps<\"ul\">,\n    AutocompleteOptionGroupOptions {}\n\nexport const AutocompleteOptionGroup = forwardRef<\n  AutocompleteOptionGroupProps,\n  \"ul\"\n>(\n  (\n    {\n      className,\n      color,\n      h,\n      height,\n      minH,\n      minHeight,\n      children,\n      labelProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { styles } = useAutocompleteContext()\n    const { label, getContainerProps, getGroupProps } =\n      useAutocompleteOptionGroup(rest)\n\n    h ??= height\n    minH ??= minHeight\n\n    return (\n      <ui.li\n        className={cx(\n          \"ui-autocomplete__item\",\n          \"ui-autocomplete__item--group\",\n          className,\n        )}\n        __css={{ w: \"100%\", h: \"fit-content\", color }}\n        {...getContainerProps()}\n      >\n        <ui.span\n          className=\"ui-autocomplete__item__group-label\"\n          __css={styles.groupLabel}\n          lineClamp={1}\n          {...labelProps}\n        >\n          {label}\n        </ui.span>\n\n        <ui.ul\n          {...getGroupProps({}, ref)}\n          className=\"ui-autocomplete__item__group\"\n          __css={{ h, minH, ...styles.group }}\n        >\n          {children}\n        </ui.ul>\n      </ui.li>\n    )\n  },\n)\n\nAutocompleteOptionGroup.displayName = \"AutocompleteOptionGroup\"\nAutocompleteOptionGroup.__ui__ = \"AutocompleteOptionGroup\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type { Dispatch, DOMAttributes, RefObject, SetStateAction } from \"react\"\nimport type { ChangeOptions, UseAutocompleteProps } from \"./use-autocomplete\"\n\nexport const {\n  DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n  useDescendantsContext: useAutocompleteDescendantsContext,\n  useDescendants: useAutocompleteDescendants,\n  useDescendant: useAutocompleteDescendant,\n} = createDescendant()\n\ninterface AutocompleteContext\n  extends Omit<\n    UseAutocompleteProps,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"onCreate\"\n  > {\n  value: string | string[]\n  label: string | string[] | undefined\n  inputValue: string\n  isHit: boolean\n  isEmpty: boolean\n  isAllSelected: boolean\n  onChange: (newValue: string, options?: ChangeOptions) => void\n  onChangeLabel: (newValue: string, options?: ChangeOptions) => void\n  pickOptions: (value: string) => void\n  rebirthOptions: (runFocus?: boolean) => void\n  inputProps: DOMAttributes<HTMLInputElement>\n  isOpen: boolean\n  onOpen: () => void\n  onClose: () => void\n  onCreate: () => void\n  onFocusFirst: () => void\n  onFocusLast: () => void\n  onFocusNext: (index?: number) => void\n  onFocusPrev: (index?: number) => void\n  focusedIndex: number\n  setFocusedIndex: Dispatch<SetStateAction<number>>\n  listRef: RefObject<HTMLUListElement>\n  inputRef: RefObject<HTMLInputElement>\n  formControlProps: { [key: string]: any }\n  styles: { [key: string]: CSSUIObject }\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","import type { HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport { isArray, splitObject } from \"@yamada-ui/utils\"\nimport type { CSSProperties } from \"react\"\nimport { useCallback } from \"react\"\nimport {\n  useAutocompleteContext,\n  useAutocompleteDescendantsContext,\n} from \"./autocomplete-context\"\n\nexport interface UseAutocompleteOptionGroupProps extends HTMLUIProps<\"ul\"> {\n  /**\n   * The label of the autocomplete option group.\n   */\n  label: string\n}\n\nexport const useAutocompleteOptionGroup = ({\n  label,\n  ...rest\n}: UseAutocompleteOptionGroupProps) => {\n  const { value, omitSelectedValues } = useAutocompleteContext()\n\n  const isMulti = isArray(value)\n\n  const descendants = useAutocompleteDescendantsContext()\n\n  const values = descendants.values()\n  const selectedValues =\n    isMulti && omitSelectedValues\n      ? descendants.values(({ node }) =>\n          value.includes(node.dataset.value ?? \"\"),\n        )\n      : []\n  const selectedIndexes = selectedValues.map(({ index }) => index)\n  const childValues = values.filter(\n    ({ node, index }) =>\n      node.parentElement?.dataset.label === label &&\n      !selectedIndexes.includes(index) &&\n      \"target\" in node.dataset,\n  )\n\n  const isEmpty = !childValues.length\n\n  const [containerProps, groupProps] = splitObject(rest, layoutStyleProperties)\n\n  const getContainerProps: 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        width: \"1px\",\n        margin: \"-1px\",\n        padding: \"0px\",\n        overflow: \"hidden\",\n        whiteSpace: \"nowrap\",\n        position: \"absolute\",\n      }\n\n      return {\n        ref,\n        ...props,\n        ...containerProps,\n        style: isEmpty ? style : undefined,\n        \"data-label\": label,\n        role: \"autocomplete-group-container\",\n      }\n    },\n    [containerProps, isEmpty, label],\n  )\n\n  const getGroupProps: PropGetter<\"ul\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ref,\n      ...props,\n      ...groupProps,\n      \"data-label\": label,\n      role: \"autocomplete-group\",\n    }),\n    [groupProps, label],\n  )\n\n  return {\n    label,\n    getContainerProps,\n    getGroupProps,\n  }\n}\n\nexport type UseAutocompleteOptionGroupReturn = ReturnType<\n  typeof useAutocompleteOptionGroup\n>\n"],"mappings":"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","names":["import_core","import_utils","import_utils"]}
+{"version":3,"sources":["../src/autocomplete-option-group.tsx","../src/autocomplete-context.ts","../src/use-autocomplete-option-group.ts"],"sourcesContent":["import type { HTMLUIProps } from \"@yamada-ui/core\"\nimport type { UseAutocompleteOptionGroupProps } from \"./use-autocomplete-option-group\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { useAutocompleteOptionGroup } from \"./use-autocomplete-option-group\"\n\ninterface AutocompleteOptionGroupOptions\n  extends UseAutocompleteOptionGroupProps {\n  /**\n   * Props for autocomplete option group element.\n   */\n  labelProps?: HTMLUIProps<\"span\">\n}\n\nexport interface AutocompleteOptionGroupProps\n  extends HTMLUIProps<\"ul\">,\n    AutocompleteOptionGroupOptions {}\n\nexport const AutocompleteOptionGroup = forwardRef<\n  AutocompleteOptionGroupProps,\n  \"ul\"\n>(\n  (\n    {\n      className,\n      children,\n      color,\n      h,\n      height,\n      minH,\n      minHeight,\n      labelProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { styles } = useAutocompleteContext()\n    const { label, getContainerProps, getGroupProps } =\n      useAutocompleteOptionGroup(rest)\n\n    h ??= height\n    minH ??= minHeight\n\n    return (\n      <ui.li\n        className={cx(\n          \"ui-autocomplete__item\",\n          \"ui-autocomplete__item--group\",\n          className,\n        )}\n        __css={{ color, h: \"fit-content\", w: \"100%\" }}\n        {...getContainerProps()}\n      >\n        <ui.span\n          className=\"ui-autocomplete__item__group-label\"\n          lineClamp={1}\n          __css={styles.groupLabel}\n          {...labelProps}\n        >\n          {label}\n        </ui.span>\n\n        <ui.ul\n          {...getGroupProps({}, ref)}\n          className=\"ui-autocomplete__item__group\"\n          __css={{ h, minH, ...styles.group }}\n        >\n          {children}\n        </ui.ul>\n      </ui.li>\n    )\n  },\n)\n\nAutocompleteOptionGroup.displayName = \"AutocompleteOptionGroup\"\nAutocompleteOptionGroup.__ui__ = \"AutocompleteOptionGroup\"\n","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","import type { HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport type { CSSProperties } from \"react\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport { isArray, splitObject } from \"@yamada-ui/utils\"\nimport { useCallback } from \"react\"\nimport {\n  useAutocompleteContext,\n  useAutocompleteDescendantsContext,\n} from \"./autocomplete-context\"\n\nexport interface UseAutocompleteOptionGroupProps extends HTMLUIProps<\"ul\"> {\n  /**\n   * The label of the autocomplete option group.\n   */\n  label: string\n}\n\nexport const useAutocompleteOptionGroup = ({\n  label,\n  ...rest\n}: UseAutocompleteOptionGroupProps) => {\n  const { omitSelectedValues, value } = useAutocompleteContext()\n\n  const isMulti = isArray(value)\n\n  const descendants = useAutocompleteDescendantsContext()\n\n  const values = descendants.values()\n  const selectedValues =\n    isMulti && omitSelectedValues\n      ? descendants.values(({ node }) =>\n          value.includes(node.dataset.value ?? \"\"),\n        )\n      : []\n  const selectedIndexes = selectedValues.map(({ index }) => index)\n  const childValues = values.filter(\n    ({ index, node }) =>\n      node.parentElement?.dataset.label === label &&\n      !selectedIndexes.includes(index) &&\n      \"target\" in node.dataset,\n  )\n\n  const isEmpty = !childValues.length\n\n  const [containerProps, groupProps] = splitObject(rest, layoutStyleProperties)\n\n  const getContainerProps: 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        ...containerProps,\n        style: isEmpty ? style : undefined,\n        \"data-label\": label,\n        role: \"autocomplete-group-container\",\n      }\n    },\n    [containerProps, isEmpty, label],\n  )\n\n  const getGroupProps: PropGetter<\"ul\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ref,\n      ...props,\n      ...groupProps,\n      \"data-label\": label,\n      role: \"autocomplete-group\",\n    }),\n    [groupProps, label],\n  )\n\n  return {\n    label,\n    getContainerProps,\n    getGroupProps,\n  }\n}\n\nexport type UseAutocompleteOptionGroupReturn = ReturnType<\n  typeof useAutocompleteOptionGroup\n>\n"],"mappings":"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","names":["import_core","import_utils","import_utils"]}

package/dist/autocomplete-option-group.mjs

@@ -1,9 +1,9 @@
 "use client"
 import {
   AutocompleteOptionGroup
-} from "./chunk-6F3LT7J6.mjs";
-import "./chunk-JMX72TSD.mjs";
-import "./chunk-JPUKYLBW.mjs";
+} from "./chunk-4SBNPEK7.mjs";
+import "./chunk-67X7JKWL.mjs";
+import "./chunk-WDQYM4FP.mjs";
 export {
   AutocompleteOptionGroup
 };

package/dist/autocomplete-option.d.mts

@@ -6,7 +6,7 @@ interface AutocompleteOptionOptions {
     /**
      * The autocomplete option icon to use.
      */
-    icon?: ReactElement;
+    icon?: null | ReactElement;
 }
 interface AutocompleteOptionProps extends UseAutocompleteOptionProps, AutocompleteOptionOptions {
 }

package/dist/autocomplete-option.d.ts

@@ -6,7 +6,7 @@ interface AutocompleteOptionOptions {
     /**
      * The autocomplete option icon to use.
      */
-    icon?: ReactElement;
+    icon?: null | ReactElement;
 }
 interface AutocompleteOptionProps extends UseAutocompleteOptionProps, AutocompleteOptionOptions {
 }

package/dist/autocomplete-option.js

@@ -32,9 +32,9 @@ var import_use_descendant = require("@yamada-ui/use-descendant");
 var import_utils = require("@yamada-ui/utils");
 var {
   DescendantsContextProvider: AutocompleteDescendantsContextProvider,
-  useDescendantsContext: useAutocompleteDescendantsContext,
+  useDescendant: useAutocompleteDescendant,
   useDescendants: useAutocompleteDescendants,
-  useDescendant: useAutocompleteDescendant
+  useDescendantsContext: useAutocompleteDescendantsContext
 } = (0, import_use_descendant.createDescendant)();
 var [AutocompleteProvider, useAutocompleteContext] = (0, import_utils.createContext)({
   name: "AutocompleteContext",
@@ -52,27 +52,27 @@ var AutocompleteIcon = (0, import_core.forwardRef)(
   ({ className, children, __css, ...rest }, ref) => {
     const { styles } = useAutocompleteContext();
     const css = {
-      position: "absolute",
-      top: "50%",
-      transform: "translateY(-50%)",
-      display: "inline-flex",
       alignItems: "center",
+      cursor: "pointer",
+      display: "inline-flex",
       justifyContent: "center",
       pointerEvents: "none",
-      cursor: "pointer",
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
       ...styles.icon,
       ...__css
     };
     const validChildren = (0, import_utils2.getValidChildren)(children);
     const cloneChildren = validChildren.map(
       (child) => (0, import_react.cloneElement)(child, {
-        focusable: false,
-        "aria-hidden": true,
         style: {
-          maxWidth: "1em",
+          color: "currentColor",
           maxHeight: "1em",
-          color: "currentColor"
-        }
+          maxWidth: "1em"
+        },
+        "aria-hidden": true,
+        focusable: false
       })
     );
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -105,11 +105,11 @@ var AutocompleteClearIcon = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     AutocompleteIcon,
     {
-      "aria-label": "Clear value",
       className: (0, import_utils2.cx)("ui-autocomplete__icon--clear", className),
+      "aria-label": "Clear value",
       __css: styles.clearIcon,
       ...rest,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.CloseIcon, { w: "0.5em", h: "0.5em" })
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.CloseIcon, { h: "0.5em", w: "0.5em" })
     }
   );
 };
@@ -118,11 +118,11 @@ AutocompleteClearIcon.__ui__ = "AutocompleteClearIcon";
 var AutocompleteItemIcon = (0, import_core.forwardRef)(({ className, ...rest }, ref) => {
   const { styles } = useAutocompleteContext();
   const css = {
-    flexShrink: 0,
-    display: "inline-flex",
-    justifyContent: "center",
     alignItems: "center",
+    display: "inline-flex",
+    flexShrink: 0,
     fontSize: "0.85em",
+    justifyContent: "center",
     ...styles.itemIcon
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -143,41 +143,50 @@ var import_utils3 = require("@yamada-ui/utils");
 var import_react2 = require("react");
 var isTargetOption = (target) => {
   var _a;
-  return (0, import_utils3.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("option"));
+  return (0, import_utils3.isHTMLElement)(target) && !!((_a = target.getAttribute("role")) == null ? void 0 : _a.startsWith("option"));
 };
 var useAutocompleteOption = (props) => {
   var _a, _b;
   const {
-    value,
+    closeOnSelect: generalCloseOnSelect,
+    focusedIndex,
+    inputRef,
     omitSelectedValues,
+    setFocusedIndex,
+    value,
+    optionProps,
     onChange,
     onChangeLabel,
-    focusedIndex,
-    setFocusedIndex,
     onClose,
-    closeOnSelect: generalCloseOnSelect,
-    optionProps,
-    inputRef,
     onFocusNext
   } = useAutocompleteContext();
   const id = (0, import_react2.useId)();
   let {
+    children,
+    closeOnSelect: customCloseOnSelect,
     icon: customIcon,
     isDisabled,
     isFocusable,
-    closeOnSelect: customCloseOnSelect,
-    children,
     value: optionValue,
     ...computedProps
   } = { ...optionProps, ...props };
   const trulyDisabled = !!isDisabled && !isFocusable;
   const itemRef = (0, import_react2.useRef)(null);
-  const { index, register, descendants } = useAutocompleteDescendant({
+  const { descendants, index, register } = useAutocompleteDescendant({
     disabled: trulyDisabled
   });
   const values = descendants.values();
   const frontValues = values.slice(0, index);
   const isMulti = (0, import_utils3.isArray)(value);
+  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 isDuplicated = !isMulti ? frontValues.some(({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")) : false;
   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 : {});
@@ -222,27 +231,27 @@ var useAutocompleteOption = (props) => {
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
         height: "1px",
-        width: "1px",
         margin: "-1px",
-        padding: "0px",
         overflow: "hidden",
+        padding: "0px",
+        position: "absolute",
         whiteSpace: "nowrap",
-        position: "absolute"
+        width: "1px"
       };
       return {
-        ref: (0, import_utils3.mergeRefs)(itemRef, ref, register),
         id,
+        ref: (0, import_utils3.mergeRefs)(itemRef, ref, register),
         role: "option",
         ...computedProps,
         ...props2,
-        tabIndex: -1,
         style: !isTarget || omitSelectedValues && isSelected ? style : void 0,
-        "data-target": (0, import_utils3.dataAttr)(true),
-        "data-value": optionValue != null ? optionValue : "",
-        "data-focus": (0, import_utils3.dataAttr)(isFocused),
-        "data-disabled": (0, import_utils3.dataAttr)(isDisabled),
         "aria-checked": isSelected,
         "aria-disabled": (0, import_utils3.ariaAttr)(isDisabled),
+        "data-disabled": (0, import_utils3.dataAttr)(isDisabled),
+        "data-focus": (0, import_utils3.dataAttr)(isFocused),
+        "data-target": (0, import_utils3.dataAttr)(true),
+        "data-value": optionValue != null ? optionValue : "",
+        tabIndex: -1,
         onClick: (0, import_utils3.handlerAll)(computedProps.onClick, props2.onClick, onClick)
       };
     },
@@ -260,10 +269,10 @@ var useAutocompleteOption = (props) => {
     ]
   );
   return {
-    isSelected,
-    isFocused,
-    customIcon,
     children,
+    customIcon,
+    isFocused,
+    isSelected,
     getOptionProps
   };
 };
@@ -273,19 +282,19 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var AutocompleteOption = (0, import_core2.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__ */ (0, import_jsx_runtime2.jsxs)(
@@ -304,7 +313,7 @@ var AutocompleteOption = (0, import_core2.forwardRef)(
 );
 AutocompleteOption.displayName = "AutocompleteOption";
 AutocompleteOption.__ui__ = "AutocompleteOption";
-var AutocompleteCheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+var AutocompleteCheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { height: "1em", viewBox: "0 0 14 14", width: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
   "polygon",
   {
     fill: "currentColor",