@lumx/react 3.6.7-alpha.6 → 3.6.7

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

@@ -2713,6 +2713,9 @@ function useFocusTrap(focusZoneElement, 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 => {
       const {
@@ -2721,20 +2724,21 @@ function useFocusTrap(focusZoneElement, focusElement) {
       if (key !== 'Tab') {
         return;
       }
-      const focusable = getFirstAndLastFocusable(focusZoneElement);
+      const focusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot);
 
       // Prevent focus switch if no focusable available.
       if (!focusable.first) {
         evt.preventDefault();
         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();
         return;
@@ -2743,7 +2747,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();
       }
@@ -2754,7 +2758,7 @@ function useFocusTrap(focusZoneElement, focusElement) {
     };
 
     // SETUP:
-    if (focusElement && focusZoneElement.contains(focusElement)) {
+    if (focusElement && focusZoneElementOrShadowRoot.contains(focusElement)) {
       // Focus the given element.
       focusElement.focus({
         preventScroll: true
@@ -2762,7 +2766,7 @@ function useFocusTrap(focusZoneElement, focusElement) {
     } else {
       var _getFirstAndLastFocus;
       // Focus the first focusable element in the zone.
-      (_getFirstAndLastFocus = getFirstAndLastFocusable(focusZoneElement).first) === null || _getFirstAndLastFocus === void 0 ? void 0 : _getFirstAndLastFocus.focus({
+      (_getFirstAndLastFocus = getFirstAndLastFocusable(focusZoneElementOrShadowRoot).first) === null || _getFirstAndLastFocus === void 0 ? void 0 : _getFirstAndLastFocus.focus({
         preventScroll: true
       });
     }
@@ -6538,7 +6542,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 +6595,7 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
       boundaryRef,
       fitToAnchorWidth,
       fitWithinViewportHeight,
+      focusTrapZoneElement,
       offset,
       placement,
       style,
@@ -6624,11 +6629,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, {