@yamada-ui/autocomplete 1.2.7 → 1.3.0-dev-20240716131202

package/dist/multi-autocomplete.js

@@ -371,7 +371,7 @@ var flattenItems = (items) => {
 };
 var isTargetOption = (target) => {
   var _a;
-  return (0, import_utils6.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("autocomplete-item"));
+  return (0, import_utils6.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("option"));
 };
 var {
   DescendantsContextProvider: AutocompleteDescendantsContextProvider,
@@ -1075,47 +1075,58 @@ var useAutocompleteInput = () => {
     isAllSelected,
     formControlProps,
     inputProps,
-    isOpen
+    isOpen,
+    focusedIndex,
+    listRef
   } = useAutocompleteContext();
+  const { value } = useAutocompleteDescendantsContext();
   (0, import_utils6.useUpdateEffect)(() => {
     if (isAllSelected && inputRef.current) inputRef.current.blur();
   }, [isAllSelected]);
   const getInputProps = (0, import_react.useCallback)(
-    (props = {}, ref = null) => ({
-      ref: (0, import_utils6.mergeRefs)(inputRef, ref),
-      ...formControlProps,
-      role: "combobox",
-      "aria-haspopup": "listbox",
-      "aria-autocomplete": "list",
-      "aria-expanded": isOpen,
-      autoCapitalize: "none",
-      autoComplete: "off",
-      spellCheck: "false",
-      ...inputProps,
-      ...props,
-      id,
-      cursor: formControlProps.readOnly ? "default" : "text",
-      pointerEvents: formControlProps.disabled || isAllSelected ? "none" : "auto",
-      tabIndex: isAllSelected ? -1 : 0,
-      onChange: (0, import_utils6.handlerAll)(props.onChange, onSearch),
-      onCompositionStart: (0, import_utils6.handlerAll)(
-        props.onCompositionStart,
-        inputProps.onCompositionStart,
-        onCompositionStart
-      ),
-      onCompositionEnd: (0, import_utils6.handlerAll)(
-        props.onCompositionEnd,
-        inputProps.onCompositionEnd,
-        onCompositionEnd
-      )
-    }),
+    (props = {}, ref = null) => {
+      var _a, _b;
+      return {
+        ref: (0, import_utils6.mergeRefs)(inputRef, ref),
+        ...formControlProps,
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-autocomplete": "list",
+        "aria-expanded": isOpen,
+        "aria-activedescendant": (_a = value(focusedIndex)) == null ? void 0 : _a.node.id,
+        "aria-controls": (_b = listRef.current) == null ? void 0 : _b.id,
+        autoCapitalize: "none",
+        autoComplete: "off",
+        spellCheck: "false",
+        ...inputProps,
+        ...props,
+        id,
+        cursor: formControlProps.readOnly ? "default" : "text",
+        pointerEvents: formControlProps.disabled || isAllSelected ? "none" : "auto",
+        tabIndex: isAllSelected ? -1 : 0,
+        onChange: (0, import_utils6.handlerAll)(props.onChange, onSearch),
+        onCompositionStart: (0, import_utils6.handlerAll)(
+          props.onCompositionStart,
+          inputProps.onCompositionStart,
+          onCompositionStart
+        ),
+        onCompositionEnd: (0, import_utils6.handlerAll)(
+          props.onCompositionEnd,
+          inputProps.onCompositionEnd,
+          onCompositionEnd
+        )
+      };
+    },
     [
+      listRef,
+      focusedIndex,
       isOpen,
       inputProps,
       inputRef,
       formControlProps,
       id,
       isAllSelected,
+      value,
       onSearch,
       onCompositionStart,
       onCompositionEnd
@@ -1166,8 +1177,9 @@ var useAutocompleteList = () => {
     (props = {}, ref = null) => ({
       as: "ul",
       ref: (0, import_utils6.mergeRefs)(listRef, ref),
-      role: "select",
+      role: "listbox",
       tabIndex: -1,
+      id: props.id || (0, import_react.useId)(),
       ...props,
       onAnimationComplete: (0, import_utils6.handlerAll)(
         props.onAnimationComplete,
@@ -1328,16 +1340,17 @@ var useAutocompleteOption = (props) => {
       };
       return {
         ref: (0, import_utils6.mergeRefs)(itemRef, ref, register),
+        id: (0, import_react.useId)(),
+        role: "option",
         ...computedProps,
         ...props2,
-        role: "autocomplete-item",
         tabIndex: -1,
         style: !isTarget || omitSelectedValues && isSelected ? style : void 0,
         "data-target": (0, import_utils6.dataAttr)(true),
         "data-value": optionValue != null ? optionValue : "",
         "data-focus": (0, import_utils6.dataAttr)(isFocused),
         "data-disabled": (0, import_utils6.dataAttr)(isDisabled),
-        "aria-checked": (0, import_utils6.ariaAttr)(isSelected),
+        "aria-checked": isSelected,
         "aria-disabled": (0, import_utils6.ariaAttr)(isDisabled),
         onClick: (0, import_utils6.handlerAll)(computedProps.onClick, props2.onClick, onClick)
       };
@@ -1696,6 +1709,7 @@ var MultiAutocompleteField = (0, import_core8.forwardRef)(
               overflow: "hidden",
               marginBlockStart: "0.125rem",
               marginBlockEnd: "0.125rem",
+              "aria-multiselectable": "true",
               placeholder: !label || !(label == null ? void 0 : label.length) || keepPlaceholder && isOpen ? placeholder : void 0,
               ...getInputProps({ ...inputProps, value: inputValue != null ? inputValue : "" }, ref)
             }