@entur/dropdown 8.0.8 → 8.1.0

package/dist/dropdown.cjs.js

@@ -387,6 +387,38 @@ const useResolvedItems = (itemsOrItemsResolver, debounceTimeout = 250) => {
     fetchItems: debouncedFetchItems
   };
 };
+function getActiveElement(root) {
+  const active = root.activeElement;
+  if (active?.shadowRoot) {
+    return getActiveElement(active.shadowRoot);
+  }
+  return active;
+}
+function createShadowEnvironment(shadowRoot) {
+  return {
+    addEventListener: shadowRoot.addEventListener.bind(shadowRoot),
+    removeEventListener: shadowRoot.removeEventListener.bind(shadowRoot),
+    Node: window.Node,
+    document: new Proxy(document, {
+      get(target, prop, receiver) {
+        if (prop === "activeElement") {
+          return getActiveElement(shadowRoot);
+        }
+        const value = Reflect.get(target, prop, receiver);
+        return typeof value === "function" ? value.bind(target) : value;
+      }
+    })
+  };
+}
+function useShadowDomEnvironment(ref) {
+  return React.useMemo(() => {
+    const el = ref.current;
+    if (!el) return void 0;
+    const root = el.getRootNode();
+    if (!(root instanceof ShadowRoot)) return void 0;
+    return createShadowEnvironment(root);
+  }, [ref.current]);
+}
 const EMPTY_INPUT = "";
 function lowerCaseFilterTest(item, input) {
   if (!input) {
@@ -537,6 +569,7 @@ const SearchableDropdown = React.forwardRef(
     const [showSelectedItem, setShowSelectedItem] = React.useState(value !== null);
     const [lastHighlightedIndex, setLastHighlightedIndex] = React.useState(0);
     const inputRef = React.useRef(null);
+    const environment = useShadowDomEnvironment(inputRef);
     const {
       items: normalizedItems,
       loading: resolvedItemsLoading,
@@ -551,7 +584,9 @@ const SearchableDropdown = React.forwardRef(
       if (shouldRefetchItems) fetchItems(inputValue2 ?? EMPTY_INPUT);
       filterListItems({ inputValue: inputValue2 ?? EMPTY_INPUT });
     };
-    const inputHasFocus = typeof document !== "undefined" ? inputRef?.current === document?.activeElement : false;
+    const inputHasFocus = typeof document !== "undefined" && inputRef.current === getActiveElement(
+      inputRef.current?.getRootNode() ?? document
+    );
     React.useEffect(() => {
       filterListItems({ inputValue });
     }, [normalizedItems]);
@@ -630,6 +665,7 @@ const SearchableDropdown = React.forwardRef(
       itemToString,
       selectedItem: value,
       stateReducer,
+      ...environment && { environment },
       onInputValueChange(changes) {
         updateListItems({ inputValue: changes.inputValue });
       },
@@ -852,6 +888,7 @@ const MultiSelect = React.forwardRef(
   }, ref) => {
     const [lastHighlightedIndex, setLastHighlightedIndex] = React.useState(0);
     const inputRef = React.useRef(null);
+    const environment = useShadowDomEnvironment(inputRef);
     React.useEffect(() => {
       if (rest.selectedItem !== void 0)
         console.warn(
@@ -928,6 +965,7 @@ const MultiSelect = React.forwardRef(
       // @ts-expect-error prop missing from library types
       itemToString,
       itemToKey,
+      ...environment && { environment },
       onSelectedItemsChange({ selectedItems: newSelectedItems }) {
         onChange(newSelectedItems);
       }
@@ -1009,6 +1047,7 @@ const MultiSelect = React.forwardRef(
       itemToString,
       selectedItem: null,
       stateReducer,
+      ...environment && { environment },
       onInputValueChange(changes) {
         updateListItems({ inputValue: changes.inputValue });
       },
@@ -1239,6 +1278,8 @@ const Dropdown = React.forwardRef(
   }, ref) => {
     const { items: normalizedItems, loading: resolvedItemsLoading } = useResolvedItems(initialItems);
     const isFilled = selectedItem !== null || placeholder !== void 0;
+    const toggleButtonRef = React.useRef(null);
+    const environment = useShadowDomEnvironment(toggleButtonRef);
     let floatingRefs;
     const {
       isOpen,
@@ -1253,8 +1294,10 @@ const Dropdown = React.forwardRef(
       items: normalizedItems,
       defaultHighlightedIndex: selectedItem ? void 0 : 0,
       selectedItem,
+      ...environment && { environment },
       stateReducer(state, { changes, type }) {
-        const toggleButtonIsFocused = typeof document !== "undefined" && document.activeElement === floatingRefs?.reference.current;
+        const root = toggleButtonRef.current?.getRootNode() ?? document;
+        const toggleButtonIsFocused = getActiveElement(root) === floatingRefs?.reference.current;
         switch (type) {
           case downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
           case downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
@@ -1305,7 +1348,7 @@ const Dropdown = React.forwardRef(
       isFilled
     });
     const toggleButtonProps = getToggleButtonProps({
-      ref: utils.mergeRefs(ref, refs.setReference),
+      ref: utils.mergeRefs(ref, refs.setReference, toggleButtonRef),
       "aria-disabled": disabled,
       "aria-label": disabled ? "Disabled dropdown" : "",
       disabled,