@lumx/react 3.6.7-alpha.1 → 3.6.7-alpha.2

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.6.7-alpha.1",
-        "@lumx/icons": "^3.6.7-alpha.1",
+        "@lumx/core": "^3.6.7-alpha.2",
+        "@lumx/icons": "^3.6.7-alpha.2",
         "@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.1"
+    "version": "3.6.7-alpha.2"
 }

package/src/components/popover/Popover.tsx

@@ -61,7 +61,7 @@ export interface PopoverProps extends GenericProps, HasTheme {
     /** 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. */
-    focusTrapZone?: RefObject<HTMLElement>;
+    focusTrapZoneElement?: RefObject<HTMLElement>;
     /** Z-axis position. */
     zIndex?: number;
     /** On close callback (on click away or Escape pressed). */
@@ -117,7 +117,7 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
         boundaryRef,
         fitToAnchorWidth,
         fitWithinViewportHeight,
-        focusTrapZone,
+        focusTrapZoneElement,
         offset,
         placement,
         style,
@@ -149,8 +149,8 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
     });
 
     const unmountSentinel = useRestoreFocusOnClose({ focusAnchorOnClose, anchorRef, parentElement }, popperElement);
-    const focusZoneElement = focusTrapZone?.current || popoverRef?.current;
-    console.log('focusZone', focusZoneElement);
+    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. */

package/src/utils/focus/getFocusableElements.ts

@@ -3,5 +3,7 @@ import { DISABLED_SELECTOR, TABBABLE_ELEMENTS_SELECTOR } from './constants';
 const isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);
 
 export function getFocusableElements(element: HTMLElement): HTMLElement[] {
-    return Array.from(element.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR)).filter(isNotDisabled);
+    const focusableElements = element.shadowRoot ? getFocusableElements(element.shadowRoot) : Array.from(element.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR)).filter(isNotDisabled);
+
+    return focusableElements;
 }