@yamada-ui/autocomplete 1.6.2-dev-20241026093521 → 1.6.2-dev-20241026111932

package/dist/use-autocomplete.js

@@ -169,8 +169,10 @@ var useAutocompleteOption = (props) => {
     onClose,
     onFocusNext
   } = useAutocompleteContext();
-  const id = (0, import_react2.useId)();
+  const uuid = (0, import_react2.useId)();
+  const itemRef = (0, import_react2.useRef)(null);
   let {
+    id,
     children,
     closeOnSelect: customCloseOnSelect,
     icon: customIcon,
@@ -180,13 +182,19 @@ var useAutocompleteOption = (props) => {
     ...computedProps
   } = { ...optionProps, ...props };
   const trulyDisabled = !!isDisabled && !isFocusable;
-  const itemRef = (0, import_react2.useRef)(null);
   const { descendants, index, register } = useAutocompleteDescendant({
     disabled: trulyDisabled
   });
   const values = descendants.values();
   const frontValues = values.slice(0, index);
   const isMulti = (0, import_utils3.isArray)(value);
+  const isDuplicated = frontValues.some(
+    ({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")
+  );
+  const isSelected = !isDuplicated && (!isMulti ? (optionValue != null ? optionValue : "") === value : value.includes(optionValue != null ? optionValue : ""));
+  const isTarget = "target" in ((_b = (_a = itemRef.current) == null ? void 0 : _a.dataset) != null ? _b : {});
+  const isFocused = index === focusedIndex;
+  id != null ? id : id = uuid;
   if ((0, import_utils3.isUndefined)(optionValue)) {
     if ((0, import_utils3.isString)(children) || (0, import_utils3.isNumber)(children)) {
       optionValue = children.toString();
@@ -196,12 +204,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 = (0, import_react2.useCallback)(
     (ev) => {
       ev.stopPropagation();
@@ -232,6 +234,7 @@ var useAutocompleteOption = (props) => {
   );
   const getOptionProps = (0, import_react2.useCallback)(
     (props2 = {}, ref = null) => {
+      const isHidden = !isTarget || omitSelectedValues && isSelected;
       const style = {
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
@@ -244,14 +247,15 @@ var useAutocompleteOption = (props) => {
         width: "1px"
       };
       return {
-        id,
         ref: (0, import_utils3.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": (0, import_utils3.ariaAttr)(isDisabled),
+        "aria-hidden": (0, import_utils3.ariaAttr)(isHidden),
+        "aria-selected": isSelected,
         "data-disabled": (0, import_utils3.dataAttr)(isDisabled),
         "data-duplicated": (0, import_utils3.dataAttr)(isDuplicated),
         "data-focus": (0, import_utils3.dataAttr)(isFocused),
@@ -280,6 +284,8 @@ var useAutocompleteOption = (props) => {
     customIcon,
     isFocused,
     isSelected,
+    isTarget,
+    omitSelectedValues,
     getOptionProps
   };
 };
@@ -305,7 +311,7 @@ var AutocompleteOption = (0, import_core2.forwardRef)(
       ...styles.item
     };
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      import_core2.ui.li,
+      import_core2.ui.div,
       {
         className: (0, import_utils4.cx)("ui-autocomplete__item", className),
         __css: css,
@@ -343,9 +349,11 @@ var useAutocompleteOptionGroup = ({
   ...rest
 }) => {
   const { omitSelectedValues, value } = useAutocompleteContext();
-  const isMulti = (0, import_utils5.isArray)(value);
   const descendants = useAutocompleteDescendantsContext();
+  const labelRef = (0, import_react3.useRef)(null);
+  const labelId = (0, import_react3.useId)();
   const values = descendants.values();
+  const isMulti = (0, import_utils5.isArray)(value);
   const selectedValues = isMulti && omitSelectedValues ? descendants.values(
     ({ node }) => {
       var _a;
@@ -363,6 +371,7 @@ var useAutocompleteOptionGroup = ({
   const [containerProps, groupProps] = (0, import_utils5.splitObject)(rest, import_core3.layoutStyleProperties);
   const getContainerProps = (0, import_react3.useCallback)(
     (props = {}, ref = null) => {
+      var _a;
       const style = {
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
@@ -376,29 +385,40 @@ 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, label]
+    [containerProps, isEmpty]
+  );
+  const getLabelProps = (0, import_react3.useCallback)(
+    ({ id, ...props } = {}, ref = null) => {
+      return {
+        id: id != null ? id : labelId,
+        ref: (0, import_utils5.mergeRefs)(ref, labelRef),
+        role: "presentation",
+        ...props
+      };
+    },
+    [labelId]
   );
   const getGroupProps = (0, import_react3.useCallback)(
     (props = {}, ref = null) => ({
       ref,
       ...props,
       ...groupProps,
-      "data-label": label,
-      role: "autocomplete-group"
+      "data-label": label
     }),
     [groupProps, label]
   );
   return {
     label,
     getContainerProps,
-    getGroupProps
+    getGroupProps,
+    getLabelProps
   };
 };
 
@@ -417,11 +437,11 @@ var AutocompleteOptionGroup = (0, import_core4.forwardRef)(
     ...rest
   }, ref) => {
     const { styles } = useAutocompleteContext();
-    const { label, getContainerProps, getGroupProps } = useAutocompleteOptionGroup(rest);
+    const { label, getContainerProps, getGroupProps, getLabelProps } = useAutocompleteOptionGroup(rest);
     h != null ? h : h = height;
     minH != null ? minH : minH = minHeight;
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      import_core4.ui.li,
+      import_core4.ui.section,
       {
         className: (0, import_utils6.cx)(
           "ui-autocomplete__item",
@@ -432,17 +452,17 @@ var AutocompleteOptionGroup = (0, import_core4.forwardRef)(
         ...getContainerProps(),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_core4.ui.span,
+            import_core4.ui.header,
             {
               className: "ui-autocomplete__item__group-label",
               lineClamp: 1,
               __css: styles.groupLabel,
-              ...labelProps,
+              ...getLabelProps(labelProps),
               children: label
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_core4.ui.ul,
+            import_core4.ui.div,
             {
               ...getGroupProps({}, ref),
               className: "ui-autocomplete__item__group",
@@ -1222,7 +1242,6 @@ var useAutocomplete = (props) => {
       tabIndex: -1,
       ...props2,
       ...formControlProps,
-      "aria-expanded": (0, import_utils7.dataAttr)(isOpen),
       "data-active": (0, import_utils7.dataAttr)(isOpen),
       placeholder,
       onFocus: (0, import_utils7.handlerAll)(props2.onFocus, onFocusProp, onFocus),
@@ -1282,6 +1301,7 @@ var useAutocomplete = (props) => {
   };
 };
 var useAutocompleteInput = () => {
+  var _a, _b;
   const {
     id,
     focusedIndex,
@@ -1295,31 +1315,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;
   (0, import_utils7.useUpdateEffect)(() => {
     if (isAllSelected && inputRef.current) inputRef.current.blur();
   }, [isAllSelected]);
   const getInputProps = (0, import_react4.useCallback)(
     (props = {}, ref = null) => {
-      var _a, _b;
       return {
         ref: (0, import_utils7.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: (0, import_utils7.handlerAll)(props.onChange, onSearch),
         onCompositionEnd: (0, import_utils7.handlerAll)(
           props.onCompositionEnd,
@@ -1334,15 +1355,14 @@ var useAutocompleteInput = () => {
       };
     },
     [
-      listRef,
-      focusedIndex,
+      listId,
+      activedescendantId,
       isOpen,
       inputProps,
       inputRef,
       formControlProps,
       id,
       isAllSelected,
-      value,
       onSearch,
       onCompositionStart,
       onCompositionEnd