@lumx/react 3.6.7-alpha.6 → 3.6.7

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.6.7-alpha.6",
-        "@lumx/icons": "^3.6.7-alpha.6",
+        "@lumx/core": "^3.6.7",
+        "@lumx/icons": "^3.6.7",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -112,5 +112,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.6.7-alpha.6"
+    "version": "3.6.7"
 }

package/src/components/popover/Popover.tsx

@@ -60,6 +60,8 @@ export interface PopoverProps extends GenericProps, HasTheme {
     placement?: Placement;
     /** Whether the popover should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
     usePortal?: boolean;
+    /** The element in which the focus trap should be set. Default to popover. */
+    focusTrapZoneElement?: RefObject<HTMLElement>;
     /** Z-axis position. */
     zIndex?: number;
     /** On close callback (on click away or Escape pressed). */
@@ -115,6 +117,7 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
         boundaryRef,
         fitToAnchorWidth,
         fitWithinViewportHeight,
+        focusTrapZoneElement,
         offset,
         placement,
         style,
@@ -146,12 +149,13 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
     });
 
     const unmountSentinel = useRestoreFocusOnClose({ focusAnchorOnClose, anchorRef, parentElement }, popperElement);
+    const focusZoneElement = focusTrapZoneElement?.current || popoverRef?.current;
 
     useCallbackOnEscape(onClose, isOpen && closeOnEscape);
 
     /** Only set focus within if the focus trap is disabled as they interfere with one another. */
     useFocus(focusElement?.current, !withFocusTrap && isOpen && isPositioned);
-    useFocusTrap(withFocusTrap && isOpen && popoverRef?.current, focusElement?.current);
+    useFocusTrap(withFocusTrap && isOpen && focusZoneElement, focusElement?.current);
 
     const clickAwayRefs = useRef([popoverRef, anchorRef]);
     const mergedRefs = useMergeRefs<HTMLDivElement>(setPopperElement, ref, popoverRef);

package/src/hooks/useFocusTrap.ts

@@ -26,13 +26,17 @@ export function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement
             return undefined;
         }
 
+        // Use the shadow root as focusZoneElement when available
+        const focusZoneElementOrShadowRoot = focusZoneElement.shadowRoot || focusZoneElement;
+
         // Trap 'Tab' key down focus switch into the focus zone.
         const trapTabFocusInFocusZone = (evt: KeyboardEvent) => {
             const { key } = evt;
             if (key !== 'Tab') {
                 return;
             }
-            const focusable = getFirstAndLastFocusable(focusZoneElement);
+
+            const focusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot);
 
             // Prevent focus switch if no focusable available.
             if (!focusable.first) {
@@ -40,13 +44,17 @@ export function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement
                 return;
             }
 
+            const activeElement = focusZoneElement.shadowRoot
+                ? focusZoneElement.shadowRoot.activeElement
+                : document.activeElement;
+
             if (
                 // No previous focus
-                !document.activeElement ||
+                !activeElement ||
                 // Previous focus is at the end of the focus zone.
-                (!evt.shiftKey && document.activeElement === focusable.last) ||
+                (!evt.shiftKey && activeElement === focusable.last) ||
                 // Previous focus is outside the focus zone
-                !focusZoneElement.contains(document.activeElement)
+                !focusZoneElementOrShadowRoot.contains(activeElement)
             ) {
                 focusable.first.focus();
                 evt.preventDefault();
@@ -57,7 +65,7 @@ export function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement
                 // Focus order reversed
                 evt.shiftKey &&
                 // Previous focus is at the start of the focus zone.
-                document.activeElement === focusable.first
+                activeElement === focusable.first
             ) {
                 focusable.last.focus();
                 evt.preventDefault();
@@ -70,12 +78,12 @@ export function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement
         };
 
         // SETUP:
-        if (focusElement && focusZoneElement.contains(focusElement)) {
+        if (focusElement && focusZoneElementOrShadowRoot.contains(focusElement)) {
             // Focus the given element.
             focusElement.focus({ preventScroll: true });
         } else {
             // Focus the first focusable element in the zone.
-            getFirstAndLastFocusable(focusZoneElement).first?.focus({ preventScroll: true });
+            getFirstAndLastFocusable(focusZoneElementOrShadowRoot).first?.focus({ preventScroll: true });
         }
         FOCUS_TRAPS.register(focusTrap);
 

package/src/utils/focus/getFirstAndLastFocusable.ts

@@ -6,7 +6,7 @@ import { getFocusableElements } from './getFocusableElements';
  * @param parentElement The element in which to search focusable elements.
  * @return first and last focusable elements
  */
-export function getFirstAndLastFocusable(parentElement: HTMLElement) {
+export function getFirstAndLastFocusable(parentElement: HTMLElement | ShadowRoot) {
     const focusableElements = getFocusableElements(parentElement);
 
     // First non disabled element.

package/src/utils/focus/getFocusableElements.ts

@@ -2,6 +2,6 @@ import { DISABLED_SELECTOR, TABBABLE_ELEMENTS_SELECTOR } from './constants';
 
 const isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);
 
-export function getFocusableElements(element: HTMLElement): HTMLElement[] {
+export function getFocusableElements(element: HTMLElement | ShadowRoot): HTMLElement[] {
     return Array.from(element.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR)).filter(isNotDisabled);
 }