@lumx/react 3.6.7-alpha.3 → 3.6.7-alpha.5

package/index.d.ts

@@ -794,6 +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. */
+    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;
 }
 
 /**
@@ -2728,13 +2729,15 @@ function useFocusTrap(focusZoneElement, focusElement) {
         evt.preventDefault();
         return;
       }
+      const activeElement = focusZoneElement.shadowRoot ? focusZoneElement.shadowRoot.activeElement : document.activeElement;
+      console.log('active', 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)) {
+      !focusZoneElement.contains(activeElement)) {
         focusable.first.focus();
         evt.preventDefault();
         return;
@@ -2743,7 +2746,7 @@ function useFocusTrap(focusZoneElement, 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();
       }
@@ -6538,7 +6541,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", "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,6 +6594,7 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
       boundaryRef,
       fitToAnchorWidth,
       fitWithinViewportHeight,
+      focusTrapZoneElement,
       offset,
       placement,
       style,
@@ -6624,11 +6628,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 && (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, {