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

package/package.json

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

package/src/hooks/useFocusTrap.ts

@@ -33,6 +33,12 @@ export function useFocusTrap(focusZoneElement: HTMLElement | Falsy, 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) {
@@ -48,6 +54,7 @@ export function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement
                 // Previous focus is outside the focus zone
                 !focusZoneElement.contains(document.activeElement)
             ) {
+                console.log('focus first');
                 focusable.first.focus();
                 evt.preventDefault();
                 return;

package/src/utils/focus/getFirstAndLastFocusable.ts

@@ -8,6 +8,7 @@ import { getFocusableElements } from './getFocusableElements';
  */
 export function getFirstAndLastFocusable(parentElement: HTMLElement) {
     const focusableElements = getFocusableElements(parentElement);
+    console.log('focusableElements', focusableElements);
 
     // First non disabled element.
     const first = focusableElements[0];

package/src/utils/focus/getFocusableElements.ts

@@ -3,7 +3,9 @@ import { DISABLED_SELECTOR, TABBABLE_ELEMENTS_SELECTOR } from './constants';
 const isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);
 
 export function getFocusableElements(element: HTMLElement): HTMLElement[] {
-    const focusableElements = element.shadowRoot ? getFocusableElements(element.shadowRoot) : 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;
 }