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

package/index.d.ts

@@ -794,8 +794,8 @@ 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 */
-    focusTrapZone?: RefObject<HTMLElement>;
+    /** 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). */

package/index.js

@@ -2668,7 +2668,8 @@ const DISABLED_SELECTOR = `[hidden], [tabindex="-1"], [disabled]:not([disabled="
 
 const isNotDisabled = element => !element.matches(DISABLED_SELECTOR);
 function getFocusableElements(element) {
-  return Array.from(element.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR)).filter(isNotDisabled);
+  const focusableElements = element.shadowRoot ? getFocusableElements(element.shadowRoot) : Array.from(element.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR)).filter(isNotDisabled);
+  return focusableElements;
 }
 
 /**
@@ -6538,7 +6539,7 @@ function usePopoverStyle(_ref5) {
   };
 }
 
-const _excluded$m = ["anchorRef", "as", "children", "className", "closeOnClickAway", "closeOnEscape", "elevation", "focusElement", "hasArrow", "isOpen", "onClose", "parentElement", "usePortal", "focusAnchorOnClose", "withFocusTrap", "boundaryRef", "fitToAnchorWidth", "fitWithinViewportHeight", "focusTrapZone", "offset", "placement", "style", "theme", "zIndex"];
+const _excluded$m = ["anchorRef", "as", "children", "className", "closeOnClickAway", "closeOnEscape", "elevation", "focusElement", "hasArrow", "isOpen", "onClose", "parentElement", "usePortal", "focusAnchorOnClose", "withFocusTrap", "boundaryRef", "fitToAnchorWidth", "fitWithinViewportHeight", "focusTrapZoneElement", "offset", "placement", "style", "theme", "zIndex"];
 
 /**
  * Defines the props of the component.
@@ -6591,7 +6592,7 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
       boundaryRef,
       fitToAnchorWidth,
       fitWithinViewportHeight,
-      focusTrapZone,
+      focusTrapZoneElement,
       offset,
       placement,
       style,
@@ -6625,11 +6626,12 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
     anchorRef,
     parentElement
   }, popperElement);
+  const focusZoneElement = (focusTrapZoneElement === null || focusTrapZoneElement === void 0 ? void 0 : focusTrapZoneElement.current) || (popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current);
   useCallbackOnEscape(onClose, isOpen && closeOnEscape);
 
   /** Only set focus within if the focus trap is disabled as they interfere with one another. */
   useFocus(focusElement === null || focusElement === void 0 ? void 0 : focusElement.current, !withFocusTrap && isOpen && isPositioned);
-  useFocusTrap(withFocusTrap && isOpen && (focusTrapZone === null || focusTrapZone === void 0 ? void 0 : focusTrapZone.current) || (popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current), focusElement === null || focusElement === void 0 ? void 0 : focusElement.current);
+  useFocusTrap(withFocusTrap && isOpen && focusZoneElement, focusElement === null || focusElement === void 0 ? void 0 : focusElement.current);
   const clickAwayRefs = useRef([popoverRef, anchorRef]);
   const mergedRefs = useMergeRefs(setPopperElement, ref, popoverRef);
   return isOpen ? renderPopover( /*#__PURE__*/React.createElement(Component, _extends({}, forwardedProps, {