@yamada-ui/autocomplete 1.6.2-dev-20241026110242 → 1.6.2-dev-20241026234458

package/dist/{chunk-ZXALWDKQ.mjs → chunk-3A2HEULI.mjs}

@@ -35,8 +35,10 @@ var useAutocompleteOption = (props) => {
     onClose,
     onFocusNext
   } = useAutocompleteContext();
-  const id = useId();
+  const uuid = useId();
+  const itemRef = useRef(null);
   let {
+    id,
     children,
     closeOnSelect: customCloseOnSelect,
     icon: customIcon,
@@ -46,13 +48,19 @@ var useAutocompleteOption = (props) => {
     ...computedProps
   } = { ...optionProps, ...props };
   const trulyDisabled = !!isDisabled && !isFocusable;
-  const itemRef = useRef(null);
   const { descendants, index, register } = useAutocompleteDescendant({
     disabled: trulyDisabled
   });
   const values = descendants.values();
   const frontValues = values.slice(0, index);
   const isMulti = isArray(value);
+  const isDuplicated = frontValues.some(
+    ({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")
+  );
+  const isSelected = !isDuplicated && (!isMulti ? (optionValue != null ? optionValue : "") === value : value.includes(optionValue != null ? optionValue : ""));
+  const isTarget = "target" in ((_b = (_a = itemRef.current) == null ? void 0 : _a.dataset) != null ? _b : {});
+  const isFocused = index === focusedIndex;
+  id != null ? id : id = uuid;
   if (isUndefined(optionValue)) {
     if (isString(children) || isNumber(children)) {
       optionValue = children.toString();
@@ -62,12 +70,6 @@ var useAutocompleteOption = (props) => {
       );
     }
   }
-  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();
@@ -98,6 +100,7 @@ var useAutocompleteOption = (props) => {
   );
   const getOptionProps = useCallback(
     (props2 = {}, ref = null) => {
+      const isHidden = !isTarget || omitSelectedValues && isSelected;
       const style = {
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
@@ -110,14 +113,15 @@ var useAutocompleteOption = (props) => {
         width: "1px"
       };
       return {
-        id,
         ref: mergeRefs(itemRef, ref, register),
         role: "option",
         ...computedProps,
         ...props2,
-        style: !isTarget || omitSelectedValues && isSelected ? style : void 0,
-        "aria-checked": isSelected,
+        id,
+        style: isHidden ? style : void 0,
         "aria-disabled": ariaAttr(isDisabled),
+        "aria-hidden": ariaAttr(isHidden),
+        "aria-selected": isSelected,
         "data-disabled": dataAttr(isDisabled),
         "data-duplicated": dataAttr(isDuplicated),
         "data-focus": dataAttr(isFocused),
@@ -146,6 +150,8 @@ var useAutocompleteOption = (props) => {
     customIcon,
     isFocused,
     isSelected,
+    isTarget,
+    omitSelectedValues,
     getOptionProps
   };
 };
@@ -166,8 +172,10 @@ var useAutocompleteCreate = () => {
       };
       return {
         ref,
+        role: "option",
         ...props,
         style: isHit ? style : void 0,
+        "aria-hidden": ariaAttr(isHit),
         "data-focus": dataAttr(!isHit),
         tabIndex: -1,
         onClick: handlerAll(props.onClick, onCreate)
@@ -181,6 +189,7 @@ var useAutocompleteEmpty = () => {
   const { isEmpty, isHit } = useAutocompleteContext();
   const getEmptyProps = useCallback(
     (props = {}, ref = null) => {
+      const isHidden = isHit && !isEmpty;
       const style = {
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
@@ -194,8 +203,10 @@ var useAutocompleteEmpty = () => {
       };
       return {
         ref,
+        role: "presentation",
         ...props,
-        style: isHit && !isEmpty ? style : void 0,
+        style: isHidden ? style : void 0,
+        "aria-hidden": ariaAttr(isHidden),
         tabIndex: -1
       };
     },
@@ -209,4 +220,4 @@ export {
   useAutocompleteCreate,
   useAutocompleteEmpty
 };
-//# sourceMappingURL=chunk-ZXALWDKQ.mjs.map
+//# sourceMappingURL=chunk-3A2HEULI.mjs.map

package/dist/chunk-3A2HEULI.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, \"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 uuid = useId()\n  const itemRef = useRef<HTMLLIElement>(null)\n  let {\n    id,\n    children,\n    closeOnSelect: customCloseOnSelect,\n    icon: customIcon,\n    isDisabled,\n    isFocusable,\n    value: optionValue,\n    ...computedProps\n  } = { ...optionProps, ...props }\n  const trulyDisabled = !!isDisabled && !isFocusable\n  const { descendants, index, register } = useAutocompleteDescendant({\n    disabled: trulyDisabled,\n  })\n  const values = descendants.values()\n  const frontValues = values.slice(0, index)\n  const isMulti = isArray(value)\n  const isDuplicated = frontValues.some(\n    ({ node }) => node.dataset.value === (optionValue ?? \"\"),\n  )\n  const isSelected =\n    !isDuplicated &&\n    (!isMulti\n      ? (optionValue ?? \"\") === value\n      : value.includes(optionValue ?? \"\"))\n  const isTarget = \"target\" in (itemRef.current?.dataset ?? {})\n  const isFocused = index === focusedIndex\n\n  id ??= uuid\n\n  if (isUndefined(optionValue)) {\n    if (isString(children) || isNumber(children)) {\n      optionValue = children.toString()\n    } else {\n      console.warn(\n        `${\n          !isMulti ? \"Autocomplete\" : \"MultiAutocomplete\"\n        }: Cannot infer the option value of complex children. Pass a \\`value\\` prop or use a plain string as children to <Option>.`,\n      )\n    }\n  }\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.stopPropagation()\n\n      if (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 = useCallback(\n    (props = {}, ref = null) => {\n      const isHidden = !isTarget || (omitSelectedValues && isSelected)\n\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: \"0px\",\n        position: \"absolute\",\n        whiteSpace: \"nowrap\",\n        width: \"1px\",\n      }\n\n      return {\n        ref: mergeRefs(itemRef, ref, register),\n        role: \"option\",\n        ...computedProps,\n        ...props,\n        id,\n        style: isHidden ? style : undefined,\n        \"aria-disabled\": ariaAttr(isDisabled),\n        \"aria-hidden\": ariaAttr(isHidden),\n        \"aria-selected\": isSelected,\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    isTarget,\n    omitSelectedValues,\n    getOptionProps,\n  }\n}\n\nexport type UseAutocompleteOptionReturn = ReturnType<\n  typeof useAutocompleteOption\n>\n\nexport const useAutocompleteCreate = () => {\n  const { isHit, onCreate } = useAutocompleteContext()\n\n  const getCreateProps: PropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: \"0px\",\n        position: \"absolute\",\n        whiteSpace: \"nowrap\",\n        width: \"1px\",\n      }\n\n      return {\n        ref,\n        role: \"option\",\n        ...props,\n        style: isHit ? style : undefined,\n        \"aria-hidden\": ariaAttr(isHit),\n        \"data-focus\": dataAttr(!isHit),\n        tabIndex: -1,\n        onClick: handlerAll(props.onClick, onCreate),\n      }\n    },\n    [isHit, onCreate],\n  )\n\n  return { getCreateProps }\n}\n\nexport type UseAutocompleteCreateReturn = ReturnType<\n  typeof useAutocompleteCreate\n>\n\nexport const useAutocompleteEmpty = () => {\n  const { isEmpty, isHit } = useAutocompleteContext()\n\n  const getEmptyProps: PropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const isHidden = isHit && !isEmpty\n\n      const style: CSSProperties = {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: \"0px\",\n        position: \"absolute\",\n        whiteSpace: \"nowrap\",\n        width: \"1px\",\n      }\n\n      return {\n        ref,\n        role: \"presentation\",\n        ...props,\n        style: isHidden ? style : undefined,\n        \"aria-hidden\": ariaAttr(isHidden),\n        tabIndex: -1,\n      }\n    },\n    [isHit, isEmpty],\n  )\n\n  return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n"],"mappings":"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","names":["props"]}

package/dist/{chunk-PKRO525W.mjs → chunk-6II6KCIJ.mjs}

@@ -1,7 +1,7 @@
 "use client"
 import {
   useAutocompleteEmpty
-} from "./chunk-ZXALWDKQ.mjs";
+} from "./chunk-3A2HEULI.mjs";
 import {
   AutocompleteItemIcon
 } from "./chunk-6OTUOEYS.mjs";
@@ -33,7 +33,7 @@ var AutocompleteEmpty = forwardRef(
       ...styles.item
     };
     return /* @__PURE__ */ jsxs(
-      ui.li,
+      ui.div,
       {
         className: cx("ui-autocomplete__item--empty", className),
         __css: css,
@@ -61,4 +61,4 @@ AutocompleteMinusIcon.__ui__ = "AutocompleteMinusIcon";
 export {
   AutocompleteEmpty
 };
-//# sourceMappingURL=chunk-PKRO525W.mjs.map
+//# sourceMappingURL=chunk-6II6KCIJ.mjs.map

package/dist/chunk-6II6KCIJ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/autocomplete-empty.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { ReactElement } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { AutocompleteItemIcon } from \"./autocomplete-icon\"\nimport { useAutocompleteEmpty } from \"./use-autocomplete-option\"\n\ninterface AutocompleteEmptyOptions {\n  /**\n   * The label of the autocomplete empty option.\n   */\n  children?: string\n  /**\n   * The autocomplete empty option icon to use.\n   */\n  icon?: null | ReactElement\n}\n\nexport interface AutocompleteEmptyProps\n  extends Omit<HTMLUIProps, \"children\">,\n    AutocompleteEmptyOptions {}\n\nexport const AutocompleteEmpty = forwardRef<AutocompleteEmptyProps, \"div\">(\n  ({ className, children, icon, ...rest }, ref) => {\n    const { emptyMessage, styles } = useAutocompleteContext()\n    const { getEmptyProps } = useAutocompleteEmpty()\n\n    children ??= emptyMessage\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      pointerEvents: \"none\",\n      textAlign: \"start\",\n      textDecoration: \"none\",\n      userSelect: \"none\",\n      width: \"100%\",\n      ...styles.item,\n    }\n\n    return (\n      <ui.div\n        className={cx(\"ui-autocomplete__item--empty\", className)}\n        __css={css}\n        {...getEmptyProps(rest, ref)}\n      >\n        {icon !== null ? (\n          <AutocompleteItemIcon>\n            {icon || <AutocompleteMinusIcon />}\n          </AutocompleteItemIcon>\n        ) : null}\n\n        {icon ? (\n          <ui.span style={{ flex: 1, pointerEvents: \"none\" }} lineClamp={1}>\n            {children}\n          </ui.span>\n        ) : (\n          children\n        )}\n      </ui.div>\n    )\n  },\n)\n\nAutocompleteEmpty.displayName = \"AutocompleteEmpty\"\nAutocompleteEmpty.__ui__ = \"AutocompleteEmpty\"\n\nconst AutocompleteMinusIcon: FC = () => (\n  <svg height=\"1em\" viewBox=\"0 0 448 512\" width=\"1em\">\n    <path\n      d=\"M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n)\n\nAutocompleteMinusIcon.displayName = \"AutocompleteMinusIcon\"\nAutocompleteMinusIcon.__ui__ = \"AutocompleteMinusIcon\"\n"],"mappings":";;;;;;;;;;;;AAEA,SAAS,YAAY,UAAU;AAC/B,SAAS,UAAU;AA2Cb,SAOe,KAPf;AAvBC,IAAM,oBAAoB;AAAA,EAC/B,CAAC,EAAE,WAAW,UAAU,MAAM,GAAG,KAAK,GAAG,QAAQ;AAC/C,UAAM,EAAE,cAAc,OAAO,IAAI,uBAAuB;AACxD,UAAM,EAAE,cAAc,IAAI,qBAAqB;AAE/C,6CAAa;AAEb,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS;AAAA,MACT,eAAe;AAAA,MACf,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,gCAAgC,SAAS;AAAA,QACvD,OAAO;AAAA,QACN,GAAG,cAAc,MAAM,GAAG;AAAA,QAE1B;AAAA,mBAAS,OACR,oBAAC,wBACE,kBAAQ,oBAAC,yBAAsB,GAClC,IACE;AAAA,UAEH,OACC,oBAAC,GAAG,MAAH,EAAQ,OAAO,EAAE,MAAM,GAAG,eAAe,OAAO,GAAG,WAAW,GAC5D,UACH,IAEA;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;AAChC,kBAAkB,SAAS;AAE3B,IAAM,wBAA4B,MAChC,oBAAC,SAAI,QAAO,OAAM,SAAQ,eAAc,OAAM,OAC5C;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA;AACP,GACF;AAGF,sBAAsB,cAAc;AACpC,sBAAsB,SAAS;","names":[]}

package/dist/{chunk-OY5JVCQQ.mjs → chunk-6WQMVK6S.mjs}

@@ -2,16 +2,16 @@
 import {
   useAutocomplete,
   useAutocompleteInput
-} from "./chunk-352YZTOO.mjs";
+} from "./chunk-EVGBK5C5.mjs";
 import {
   AutocompleteCreate
-} from "./chunk-J6UKIKNL.mjs";
+} from "./chunk-G6SC44LI.mjs";
 import {
   AutocompleteEmpty
-} from "./chunk-PKRO525W.mjs";
+} from "./chunk-6II6KCIJ.mjs";
 import {
   AutocompleteList
-} from "./chunk-WJ4P4B2E.mjs";
+} from "./chunk-REPBXBG3.mjs";
 import {
   AutocompleteIcon
 } from "./chunk-6OTUOEYS.mjs";
@@ -181,4 +181,4 @@ AutocompleteField.__ui__ = "AutocompleteField";
 export {
   Autocomplete
 };
-//# sourceMappingURL=chunk-OY5JVCQQ.mjs.map
+//# sourceMappingURL=chunk-6WQMVK6S.mjs.map

package/dist/{chunk-HUY7Q3WA.mjs → chunk-6ZFQNL3O.mjs}

@@ -2,16 +2,16 @@
 import {
   useAutocomplete,
   useAutocompleteInput
-} from "./chunk-352YZTOO.mjs";
+} from "./chunk-EVGBK5C5.mjs";
 import {
   AutocompleteCreate
-} from "./chunk-J6UKIKNL.mjs";
+} from "./chunk-G6SC44LI.mjs";
 import {
   AutocompleteEmpty
-} from "./chunk-PKRO525W.mjs";
+} from "./chunk-6II6KCIJ.mjs";
 import {
   AutocompleteList
-} from "./chunk-WJ4P4B2E.mjs";
+} from "./chunk-REPBXBG3.mjs";
 import {
   AutocompleteClearIcon,
   AutocompleteIcon
@@ -236,8 +236,6 @@ var MultiAutocompleteField = forwardRef(
             ui.input,
             {
               className: "ui-multi-autocomplete__field__input",
-              "aria-label": "Input value",
-              "aria-multiselectable": "true",
               display: "inline-block",
               flex: "1",
               marginBlockEnd: "0.125rem",
@@ -259,4 +257,4 @@ MultiAutocompleteField.__ui__ = "MultiAutocompleteField";
 export {
   MultiAutocomplete
 };
-//# sourceMappingURL=chunk-HUY7Q3WA.mjs.map
+//# sourceMappingURL=chunk-6ZFQNL3O.mjs.map

package/dist/{chunk-HUY7Q3WA.mjs.map → chunk-6ZFQNL3O.mjs.map}

@@ -1 +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      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      children,\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      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              <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\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    if (label?.length && component) css.py = \"0.125rem\"\n\n    return (\n      <PopoverTrigger>\n        <ui.div\n          className={cx(\"ui-multi-autocomplete__field\", className)}\n          __css={css}\n          {...rest}\n        >\n          {cloneChildren}\n\n          <ui.input\n            className=\"ui-multi-autocomplete__field__input\"\n            aria-label=\"Input value\"\n            aria-multiselectable=\"true\"\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            {...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"]}
+{"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      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      children,\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      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              <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\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    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    if (label?.length && component) css.py = \"0.125rem\"\n\n    return (\n      <PopoverTrigger>\n        <ui.div\n          className={cx(\"ui-multi-autocomplete__field\", className)}\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            {...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-7QON6ZHO.mjs → chunk-CMFJUJJW.mjs}

@@ -6,16 +6,18 @@ import {
 
 // src/use-autocomplete-option-group.ts
 import { layoutStyleProperties } from "@yamada-ui/core";
-import { isArray, splitObject } from "@yamada-ui/utils";
-import { useCallback } from "react";
+import { isArray, mergeRefs, splitObject } from "@yamada-ui/utils";
+import { useCallback, useId, useRef } from "react";
 var useAutocompleteOptionGroup = ({
   label,
   ...rest
 }) => {
   const { omitSelectedValues, value } = useAutocompleteContext();
-  const isMulti = isArray(value);
   const descendants = useAutocompleteDescendantsContext();
+  const labelRef = useRef(null);
+  const labelId = useId();
   const values = descendants.values();
+  const isMulti = isArray(value);
   const selectedValues = isMulti && omitSelectedValues ? descendants.values(
     ({ node }) => {
       var _a;
@@ -33,6 +35,7 @@ var useAutocompleteOptionGroup = ({
   const [containerProps, groupProps] = splitObject(rest, layoutStyleProperties);
   const getContainerProps = useCallback(
     (props = {}, ref = null) => {
+      var _a;
       const style = {
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
@@ -46,33 +49,44 @@ var useAutocompleteOptionGroup = ({
       };
       return {
         ref,
+        "aria-labelledby": (_a = labelRef.current) == null ? void 0 : _a.id,
+        role: "group",
         ...props,
         ...containerProps,
-        style: isEmpty ? style : void 0,
-        "data-label": label,
-        role: "autocomplete-group-container"
+        style: isEmpty ? style : void 0
+      };
+    },
+    [containerProps, isEmpty]
+  );
+  const getLabelProps = useCallback(
+    ({ id, ...props } = {}, ref = null) => {
+      return {
+        id: id != null ? id : labelId,
+        ref: mergeRefs(ref, labelRef),
+        role: "presentation",
+        ...props
       };
     },
-    [containerProps, isEmpty, label]
+    [labelId]
   );
   const getGroupProps = useCallback(
     (props = {}, ref = null) => ({
       ref,
       ...props,
       ...groupProps,
-      "data-label": label,
-      role: "autocomplete-group"
+      "data-label": label
     }),
     [groupProps, label]
   );
   return {
     label,
     getContainerProps,
-    getGroupProps
+    getGroupProps,
+    getLabelProps
   };
 };
 
 export {
   useAutocompleteOptionGroup
 };
-//# sourceMappingURL=chunk-7QON6ZHO.mjs.map
+//# sourceMappingURL=chunk-CMFJUJJW.mjs.map

package/dist/chunk-CMFJUJJW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-autocomplete-option-group.ts"],"sourcesContent":["import type { HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport type { CSSProperties } from \"react\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport { isArray, mergeRefs, splitObject } from \"@yamada-ui/utils\"\nimport { useCallback, useId, useRef } from \"react\"\nimport {\n  useAutocompleteContext,\n  useAutocompleteDescendantsContext,\n} from \"./autocomplete-context\"\n\nexport interface UseAutocompleteOptionGroupProps extends HTMLUIProps {\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  const descendants = useAutocompleteDescendantsContext()\n  const labelRef = useRef<HTMLDivElement>(null)\n  const labelId = useId()\n  const values = descendants.values()\n  const isMulti = isArray(value)\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  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        \"aria-labelledby\": labelRef.current?.id,\n        role: \"group\",\n        ...props,\n        ...containerProps,\n        style: isEmpty ? style : undefined,\n      }\n    },\n    [containerProps, isEmpty],\n  )\n\n  const getLabelProps: PropGetter = useCallback(\n    ({ id, ...props } = {}, ref = null) => {\n      return {\n        id: id ?? labelId,\n        ref: mergeRefs(ref, labelRef),\n        role: \"presentation\",\n        ...props,\n      }\n    },\n    [labelId],\n  )\n\n  const getGroupProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ref,\n      ...props,\n      ...groupProps,\n      \"data-label\": label,\n    }),\n    [groupProps, label],\n  )\n\n  return {\n    label,\n    getContainerProps,\n    getGroupProps,\n    getLabelProps,\n  }\n}\n\nexport type UseAutocompleteOptionGroupReturn = ReturnType<\n  typeof useAutocompleteOptionGroup\n>\n"],"mappings":";;;;;;;AAEA,SAAS,6BAA6B;AACtC,SAAS,SAAS,WAAW,mBAAmB;AAChD,SAAS,aAAa,OAAO,cAAc;AAapC,IAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA,GAAG;AACL,MAAuC;AACrC,QAAM,EAAE,oBAAoB,MAAM,IAAI,uBAAuB;AAC7D,QAAM,cAAc,kCAAkC;AACtD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,UAAU,MAAM;AACtB,QAAM,SAAS,YAAY,OAAO;AAClC,QAAM,UAAU,QAAQ,KAAK;AAC7B,QAAM,iBACJ,WAAW,qBACP,YAAY;AAAA,IAAO,CAAC,EAAE,KAAK,MAAG;AA7BtC;AA8BU,mBAAM,UAAS,UAAK,QAAQ,UAAb,YAAsB,EAAE;AAAA;AAAA,EACzC,IACA,CAAC;AACP,QAAM,kBAAkB,eAAe,IAAI,CAAC,EAAE,MAAM,MAAM,KAAK;AAC/D,QAAM,cAAc,OAAO;AAAA,IACzB,CAAC,EAAE,OAAO,KAAK,MAAG;AAnCtB;AAoCM,yBAAK,kBAAL,mBAAoB,QAAQ,WAAU,SACtC,CAAC,gBAAgB,SAAS,KAAK,KAC/B,YAAY,KAAK;AAAA;AAAA,EACrB;AACA,QAAM,UAAU,CAAC,YAAY;AAE7B,QAAM,CAAC,gBAAgB,UAAU,IAAI,YAAY,MAAM,qBAAqB;AAE5E,QAAM,oBAAsC;AAAA,IAC1C,CAAC,QAAQ,CAAC,GAAG,MAAM,SAAS;AA7ChC;AA8CM,YAAM,QAAuB;AAAA,QAC3B,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,OAAO;AAAA,MACT;AAEA,aAAO;AAAA,QACL;AAAA,QACA,oBAAmB,cAAS,YAAT,mBAAkB;AAAA,QACrC,MAAM;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,OAAO,UAAU,QAAQ;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,OAAO;AAAA,EAC1B;AAEA,QAAM,gBAA4B;AAAA,IAChC,CAAC,EAAE,IAAI,GAAG,MAAM,IAAI,CAAC,GAAG,MAAM,SAAS;AACrC,aAAO;AAAA,QACL,IAAI,kBAAM;AAAA,QACV,KAAK,UAAU,KAAK,QAAQ;AAAA,QAC5B,MAAM;AAAA,QACN,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,gBAA4B;AAAA,IAChC,CAAC,QAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH,cAAc;AAAA,IAChB;AAAA,IACA,CAAC,YAAY,KAAK;AAAA,EACpB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/{chunk-352YZTOO.mjs → chunk-EVGBK5C5.mjs}

@@ -1,10 +1,10 @@
 "use client"
 import {
   AutocompleteOptionGroup
-} from "./chunk-WNN655FX.mjs";
+} from "./chunk-PU6HFINM.mjs";
 import {
   AutocompleteOption
-} from "./chunk-KWIJUSLC.mjs";
+} from "./chunk-2UKLSSUA.mjs";
 import {
   useAutocompleteContext,
   useAutocompleteDescendants,
@@ -800,7 +800,6 @@ var useAutocomplete = (props) => {
       tabIndex: -1,
       ...props2,
       ...formControlProps,
-      "aria-expanded": dataAttr(isOpen),
       "data-active": dataAttr(isOpen),
       placeholder,
       onFocus: handlerAll(props2.onFocus, onFocusProp, onFocus),
@@ -860,6 +859,7 @@ var useAutocomplete = (props) => {
   };
 };
 var useAutocompleteInput = () => {
+  var _a, _b;
   const {
     id,
     focusedIndex,
@@ -873,31 +873,32 @@ var useAutocompleteInput = () => {
     onCompositionStart,
     onSearch
   } = useAutocompleteContext();
-  const { value } = useAutocompleteDescendantsContext();
+  const descendants = useAutocompleteDescendantsContext();
+  const activedescendantId = (_a = descendants.value(focusedIndex)) == null ? void 0 : _a.node.id;
+  const listId = (_b = listRef.current) == null ? void 0 : _b.id;
   useUpdateEffect(() => {
     if (isAllSelected && inputRef.current) inputRef.current.blur();
   }, [isAllSelected]);
   const getInputProps = useCallback(
     (props = {}, ref = null) => {
-      var _a, _b;
       return {
         ref: mergeRefs(inputRef, ref),
         ...formControlProps,
-        "aria-activedescendant": (_a = value(focusedIndex)) == null ? void 0 : _a.node.id,
+        "aria-activedescendant": activedescendantId,
         "aria-autocomplete": "list",
-        "aria-controls": (_b = listRef.current) == null ? void 0 : _b.id,
+        "aria-controls": listId,
         "aria-expanded": isOpen,
         "aria-haspopup": "listbox",
         autoCapitalize: "none",
         autoComplete: "off",
         role: "combobox",
         spellCheck: "false",
+        tabIndex: isAllSelected ? -1 : 0,
         ...inputProps,
         ...props,
         id,
         cursor: formControlProps.readOnly ? "default" : "text",
         pointerEvents: formControlProps.disabled || isAllSelected ? "none" : "auto",
-        tabIndex: isAllSelected ? -1 : 0,
         onChange: handlerAll(props.onChange, onSearch),
         onCompositionEnd: handlerAll(
           props.onCompositionEnd,
@@ -912,15 +913,14 @@ var useAutocompleteInput = () => {
       };
     },
     [
-      listRef,
-      focusedIndex,
+      listId,
+      activedescendantId,
       isOpen,
       inputProps,
       inputRef,
       formControlProps,
       id,
       isAllSelected,
-      value,
       onSearch,
       onCompositionStart,
       onCompositionEnd
@@ -935,4 +935,4 @@ export {
   useAutocomplete,
   useAutocompleteInput
 };
-//# sourceMappingURL=chunk-352YZTOO.mjs.map
+//# sourceMappingURL=chunk-EVGBK5C5.mjs.map