@entur/dropdown 9.0.2 → 9.1.0

package/dist/dropdown.mjs

@@ -1,6 +1,6 @@
 import { useDebounce, getActiveElement, mergeRefs, warnAboutMissingStyles } from "@entur/utils";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { forwardRef, createElement, useMemo, useState, useRef, useEffect, useCallback, useLayoutEffect, useId } from "react";
+import React, { forwardRef, createElement, useRef, useLayoutEffect, useCallback, useMemo, useState, useEffect, useId } from "react";
 import { useCombobox, useMultipleSelection, useSelect } from "downshift";
 import classNames from "classnames";
 import { useFloating, offset, shift, size, flip, autoUpdate } from "@floating-ui/react-dom";
@@ -385,6 +385,15 @@ const useResolvedItems = (itemsOrItemsResolver, debounceTimeout = 250) => {
     fetchItems: debouncedFetchItems
   };
 };
+function useFloatingRef(setElement) {
+  const latestSetElement = useRef(setElement);
+  useLayoutEffect(() => {
+    latestSetElement.current = setElement;
+  }, [setElement]);
+  return useCallback((node) => {
+    if (node !== null) latestSetElement.current(node);
+  }, []);
+}
 function createShadowEnvironment(shadowRoot) {
   return {
     addEventListener: shadowRoot.addEventListener.bind(shadowRoot),
@@ -695,6 +704,7 @@ const SearchableDropdown = React.forwardRef(
         flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
+    const setFloatingMenu = useFloatingRef(refs.setFloating);
     useLayoutEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return autoUpdate(
@@ -710,7 +720,7 @@ const SearchableDropdown = React.forwardRef(
     });
     const menuProps = getMenuProps({
       refKey: "innerRef",
-      ref: refs.setFloating,
+      ref: setFloatingMenu,
       style: listStyle
     });
     const inputProps = getInputProps({
@@ -808,7 +818,8 @@ const SearchableDropdown = React.forwardRef(
               className: classNames("eds-dropdown__input eds-form-control", {
                 "eds-dropdown__input--hidden": showSelectedItem
               }),
-              ...inputProps
+              ...inputProps,
+              "aria-invalid": variant === "negative" || variant === "error"
             }
           ),
           /* @__PURE__ */ jsx(
@@ -1075,6 +1086,7 @@ const MultiSelect = React.forwardRef(
         flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
+    const setFloatingMenu = useFloatingRef(refs.setFloating);
     useLayoutEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return autoUpdate(
@@ -1118,7 +1130,7 @@ const MultiSelect = React.forwardRef(
     const menuProps = getMenuProps({
       "aria-multiselectable": true,
       refKey: "innerRef",
-      ref: refs.setFloating,
+      ref: setFloatingMenu,
       style: listStyle
     });
     const toggleButtonProps = getToggleButtonProps({
@@ -1210,7 +1222,13 @@ const MultiSelect = React.forwardRef(
                     selectedItem: summarySelectedItems
                   }
                 ),
-                /* @__PURE__ */ jsx("input", { ...inputProps })
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ...inputProps,
+                    "aria-invalid": variant === "negative" || variant === "error"
+                  }
+                )
               ]
             }
           ),
@@ -1236,6 +1254,7 @@ const MultiSelect = React.forwardRef(
     );
   }
 );
+const error$1 = "error";
 const Dropdown = React.forwardRef(
   ({
     ariaLabelChosenSingular,
@@ -1319,6 +1338,8 @@ const Dropdown = React.forwardRef(
       ]
     });
     floatingRefs = refs;
+    const setFloatingMenu = useFloatingRef(refs.setFloating);
+    const setFloatingReference = useFloatingRef(refs.setReference);
     useLayoutEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return autoUpdate(
@@ -1336,7 +1357,7 @@ const Dropdown = React.forwardRef(
       isFilled
     });
     const toggleButtonProps = getToggleButtonProps({
-      ref: mergeRefs(ref, refs.setReference, toggleButtonRef),
+      ref: mergeRefs(ref, setFloatingReference, toggleButtonRef),
       "aria-disabled": disabled,
       "aria-label": disabled ? "Disabled dropdown" : "",
       disabled,
@@ -1357,7 +1378,7 @@ const Dropdown = React.forwardRef(
     });
     const menuProps = getMenuProps({
       refKey: "innerRef",
-      ref: refs.setFloating,
+      ref: setFloatingMenu,
       style: listStyle
     });
     return /* @__PURE__ */ jsxs(
@@ -1374,6 +1395,7 @@ const Dropdown = React.forwardRef(
         style,
         variant,
         ...toggleButtonProps,
+        "aria-invalid": variant === "negative" || variant === error$1,
         after: /* @__PURE__ */ jsx(
           DropdownList,
           {
@@ -1447,6 +1469,8 @@ const NativeDropdown = forwardRef(
     style,
     value,
     variant,
+    ariaAlertOnFeedback,
+    feedbackProps,
     ...rest
   }, ref) => {
     const { items: normalizedItems, loading } = useResolvedItems(items);
@@ -1457,6 +1481,8 @@ const NativeDropdown = forwardRef(
         disabled,
         readOnly,
         prepend,
+        ariaAlertOnFeedback,
+        feedbackProps,
         append: /* @__PURE__ */ jsx(
           FieldAppend,
           {