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

package/dist/autocomplete.js

@@ -165,8 +165,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,
@@ -176,13 +178,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();
@@ -192,12 +200,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();
@@ -228,6 +230,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)",
@@ -240,14 +243,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),
@@ -276,6 +280,8 @@ var useAutocompleteOption = (props) => {
     customIcon,
     isFocused,
     isSelected,
+    isTarget,
+    omitSelectedValues,
     getOptionProps
   };
 };
@@ -296,8 +302,10 @@ var useAutocompleteCreate = () => {
       };
       return {
         ref,
+        role: "option",
         ...props,
         style: isHit ? style : void 0,
+        "aria-hidden": (0, import_utils3.ariaAttr)(isHit),
         "data-focus": (0, import_utils3.dataAttr)(!isHit),
         tabIndex: -1,
         onClick: (0, import_utils3.handlerAll)(props.onClick, onCreate)
@@ -311,6 +319,7 @@ var useAutocompleteEmpty = () => {
   const { isEmpty, isHit } = useAutocompleteContext();
   const getEmptyProps = (0, import_react2.useCallback)(
     (props = {}, ref = null) => {
+      const isHidden = isHit && !isEmpty;
       const style = {
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
@@ -324,8 +333,10 @@ var useAutocompleteEmpty = () => {
       };
       return {
         ref,
+        role: "presentation",
         ...props,
-        style: isHit && !isEmpty ? style : void 0,
+        style: isHidden ? style : void 0,
+        "aria-hidden": (0, import_utils3.ariaAttr)(isHidden),
         tabIndex: -1
       };
     },
@@ -355,7 +366,7 @@ var AutocompleteCreate = (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--create", className),
         __css: css,
@@ -404,7 +415,7 @@ var AutocompleteEmpty = (0, import_core3.forwardRef)(
       ...styles.item
     };
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      import_core3.ui.li,
+      import_core3.ui.div,
       {
         className: (0, import_utils5.cx)("ui-autocomplete__item--empty", className),
         __css: css,
@@ -438,11 +449,12 @@ var import_utils7 = require("@yamada-ui/utils");
 var import_utils6 = require("@yamada-ui/utils");
 var import_react3 = require("react");
 var useAutocompleteList = () => {
-  const uuid = (0, import_react3.useId)();
-  const { focusedIndex, isOpen, listRef, rebirthOptions } = useAutocompleteContext();
+  const { focusedIndex, isOpen, listRef, rebirthOptions, value } = useAutocompleteContext();
   const descendants = useAutocompleteDescendantsContext();
+  const uuid = (0, import_react3.useId)();
   const beforeFocusedIndex = (0, import_react3.useRef)(-1);
   const selectedValue = descendants.value(focusedIndex);
+  const isMulti = (0, import_utils6.isArray)(value);
   const onAnimationComplete = (0, import_react3.useCallback)(() => {
     if (!isOpen) rebirthOptions(false);
   }, [isOpen, rebirthOptions]);
@@ -476,19 +488,16 @@ var useAutocompleteList = () => {
     if (!isOpen) beforeFocusedIndex.current = -1;
   }, [isOpen]);
   const getListProps = (0, import_react3.useCallback)(
-    (props = {}, ref = null) => {
-      var _a;
-      return {
-        id: (_a = props.id) != null ? _a : uuid,
-        ref: (0, import_utils6.mergeRefs)(listRef, ref),
-        as: "ul",
-        position: "relative",
-        role: "listbox",
-        tabIndex: -1,
-        ...props
-      };
-    },
-    [listRef, uuid]
+    ({ id, ...props } = {}, ref = null) => ({
+      id: id != null ? id : uuid,
+      ref: (0, import_utils6.mergeRefs)(listRef, ref),
+      "aria-multiselectable": (0, import_utils6.ariaAttr)(isMulti),
+      position: "relative",
+      role: "listbox",
+      tabIndex: -1,
+      ...props
+    }),
+    [listRef, uuid, isMulti]
   );
   return {
     getListProps,
@@ -525,7 +534,6 @@ var AutocompleteList = (0, import_core4.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       import_popover.PopoverContent,
       {
-        as: "div",
         className: "ui-autocomplete__popover",
         maxWidth,
         minWidth,
@@ -538,7 +546,7 @@ var AutocompleteList = (0, import_core4.forwardRef)(
         ),
         children: [
           header ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_core4.ui.div,
+            import_core4.ui.header,
             {
               className: "ui-autocomplete__header",
               __css: { ...styles.header },
@@ -546,7 +554,7 @@ var AutocompleteList = (0, import_core4.forwardRef)(
             }
           ) : null,
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_core4.ui.ul,
+            import_core4.ui.div,
             {
               className: (0, import_utils7.cx)("ui-autocomplete__list", className),
               __css: { ...styles.list },
@@ -555,7 +563,7 @@ var AutocompleteList = (0, import_core4.forwardRef)(
             }
           ),
           footer ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_core4.ui.div,
+            import_core4.ui.footer,
             {
               className: "ui-autocomplete__footer",
               __css: { ...styles.footer },
@@ -602,7 +610,7 @@ var AutocompleteOption = (0, import_core5.forwardRef)(
       ...styles.item
     };
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      import_core5.ui.li,
+      import_core5.ui.div,
       {
         className: (0, import_utils8.cx)("ui-autocomplete__item", className),
         __css: css,
@@ -640,9 +648,11 @@ var useAutocompleteOptionGroup = ({
   ...rest
 }) => {
   const { omitSelectedValues, value } = useAutocompleteContext();
-  const isMulti = (0, import_utils9.isArray)(value);
   const descendants = useAutocompleteDescendantsContext();
+  const labelRef = (0, import_react4.useRef)(null);
+  const labelId = (0, import_react4.useId)();
   const values = descendants.values();
+  const isMulti = (0, import_utils9.isArray)(value);
   const selectedValues = isMulti && omitSelectedValues ? descendants.values(
     ({ node }) => {
       var _a;
@@ -660,6 +670,7 @@ var useAutocompleteOptionGroup = ({
   const [containerProps, groupProps] = (0, import_utils9.splitObject)(rest, import_core6.layoutStyleProperties);
   const getContainerProps = (0, import_react4.useCallback)(
     (props = {}, ref = null) => {
+      var _a;
       const style = {
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
@@ -673,29 +684,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_react4.useCallback)(
+    ({ id, ...props } = {}, ref = null) => {
+      return {
+        id: id != null ? id : labelId,
+        ref: (0, import_utils9.mergeRefs)(ref, labelRef),
+        role: "presentation",
+        ...props
+      };
+    },
+    [labelId]
   );
   const getGroupProps = (0, import_react4.useCallback)(
     (props = {}, ref = null) => ({
       ref,
       ...props,
       ...groupProps,
-      "data-label": label,
-      role: "autocomplete-group"
+      "data-label": label
     }),
     [groupProps, label]
   );
   return {
     label,
     getContainerProps,
-    getGroupProps
+    getGroupProps,
+    getLabelProps
   };
 };
 
@@ -714,11 +736,11 @@ var AutocompleteOptionGroup = (0, import_core7.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_runtime6.jsxs)(
-      import_core7.ui.li,
+      import_core7.ui.section,
       {
         className: (0, import_utils10.cx)(
           "ui-autocomplete__item",
@@ -729,17 +751,17 @@ var AutocompleteOptionGroup = (0, import_core7.forwardRef)(
         ...getContainerProps(),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_core7.ui.span,
+            import_core7.ui.header,
             {
               className: "ui-autocomplete__item__group-label",
               lineClamp: 1,
               __css: styles.groupLabel,
-              ...labelProps,
+              ...getLabelProps(labelProps),
               children: label
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_core7.ui.ul,
+            import_core7.ui.div,
             {
               ...getGroupProps({}, ref),
               className: "ui-autocomplete__item__group",
@@ -1519,7 +1541,6 @@ var useAutocomplete = (props) => {
       tabIndex: -1,
       ...props2,
       ...formControlProps,
-      "aria-expanded": (0, import_utils11.dataAttr)(isOpen),
       "data-active": (0, import_utils11.dataAttr)(isOpen),
       placeholder,
       onFocus: (0, import_utils11.handlerAll)(props2.onFocus, onFocusProp, onFocus),
@@ -1579,6 +1600,7 @@ var useAutocomplete = (props) => {
   };
 };
 var useAutocompleteInput = () => {
+  var _a, _b;
   const {
     id,
     focusedIndex,
@@ -1592,31 +1614,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_utils11.useUpdateEffect)(() => {
     if (isAllSelected && inputRef.current) inputRef.current.blur();
   }, [isAllSelected]);
   const getInputProps = (0, import_react5.useCallback)(
     (props = {}, ref = null) => {
-      var _a, _b;
       return {
         ref: (0, import_utils11.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_utils11.handlerAll)(props.onChange, onSearch),
         onCompositionEnd: (0, import_utils11.handlerAll)(
           props.onCompositionEnd,
@@ -1631,15 +1654,14 @@ var useAutocompleteInput = () => {
       };
     },
     [
-      listRef,
-      focusedIndex,
+      listId,
+      activedescendantId,
       isOpen,
       inputProps,
       inputRef,
       formControlProps,
       id,
       isAllSelected,
-      value,
       onSearch,
       onCompositionStart,
       onCompositionEnd