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

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;
 }
 
 /**
@@ -2679,6 +2680,7 @@ function getFocusableElements(element) {
  */
 function getFirstAndLastFocusable(parentElement) {
   const focusableElements = getFocusableElements(parentElement);
+  console.log('focusableElements', focusableElements);
 
   // First non disabled element.
   const first = focusableElements[0];
@@ -2722,6 +2724,12 @@ function useFocusTrap(focusZoneElement, focusElement) {
         return;
       }
       const focusable = getFirstAndLastFocusable(focusZoneElement);
+      console.log('data', {
+        focusable,
+        activeElement: document.activeElement,
+        endOfFocusZone: !evt.shiftKey && document.activeElement === focusable.last,
+        isInFocusZone: focusZoneElement.contains(document.activeElement)
+      });
 
       // Prevent focus switch if no focusable available.
       if (!focusable.first) {
@@ -2735,6 +2743,7 @@ function useFocusTrap(focusZoneElement, focusElement) {
       !evt.shiftKey && document.activeElement === focusable.last ||
       // Previous focus is outside the focus zone
       !focusZoneElement.contains(document.activeElement)) {
+        console.log('focus first');
         focusable.first.focus();
         evt.preventDefault();
         return;
@@ -6538,7 +6547,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 +6600,7 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
       boundaryRef,
       fitToAnchorWidth,
       fitWithinViewportHeight,
+      focusTrapZoneElement,
       offset,
       placement,
       style,
@@ -6624,11 +6634,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, {