react-magma-dom 4.13.0-next.6 → 4.13.0

package/dist/esm/index.js

@@ -11263,25 +11263,141 @@ var CalendarHeader = function CalendarHeader(props) {
   })));
 };
 
+var useDeviceDetect = function useDeviceDetect() {
+  var userAgent = useMemo(function () {
+    return typeof navigator !== 'undefined' ? navigator.userAgent.toLowerCase() : '';
+  }, []);
+  var isSafari = useMemo(function () {
+    return /^((?!chrome|android).)*safari/i.test(userAgent);
+  }, [userAgent]);
+  var isChrome = useMemo(function () {
+    return /chrome|crios/i.test(userAgent) && !/edge|edg/i.test(userAgent);
+  }, [userAgent]);
+  var isFirefox = useMemo(function () {
+    return /firefox|fxios/i.test(userAgent);
+  }, [userAgent]);
+  var isEdge = useMemo(function () {
+    return /edge|edg/i.test(userAgent);
+  }, [userAgent]);
+  var isMobile = useMemo(function () {
+    return /mobi|android|touch|mini/i.test(userAgent);
+  }, [userAgent]);
+  var isWindows = useMemo(function () {
+    return /windows nt/.test(userAgent);
+  }, [userAgent]);
+  var isMacOS = useMemo(function () {
+    return /macintosh/.test(userAgent);
+  }, [userAgent]);
+  var isAndroid = useMemo(function () {
+    return /android/.test(userAgent);
+  }, [userAgent]);
+  var isIOS = useMemo(function () {
+    return /iphone|ipad|ipod/.test(userAgent);
+  }, [userAgent]);
+  var isLinux = useMemo(function () {
+    return /linux/.test(userAgent) && !isAndroid;
+  }, [userAgent, isAndroid]);
+  return {
+    isSafari: isSafari,
+    isChrome: isChrome,
+    isFirefox: isFirefox,
+    isEdge: isEdge,
+    isMobile: isMobile,
+    isWindows: isWindows,
+    isMacOS: isMacOS,
+    isLinux: isLinux,
+    isAndroid: isAndroid,
+    isIOS: isIOS
+  };
+};
+
+/**
+ * Returns a grouping key if the element belongs to a group
+ * that shares a single tab stop (e.g. named radio groups).
+ * Returns null if the element is independently tabbable.
+ *
+ * Extend this function to support new grouping patterns.
+ */
+function getTabStopGroupKey(el) {
+  // Native radio buttons with the same name share a single tab stop.
+  // Scope by form so identically-named groups in different forms stay separate.
+  if (el instanceof HTMLInputElement && el.type === 'radio' && el.name) {
+    var formScope = el.form ? "f" + (el.form.id || '') : 'noform';
+    return "radio:" + formScope + ":" + el.name;
+  }
+  return null;
+}
+/**
+ * Within a shared-tab-stop group, decides whether `candidate`
+ * should replace `current` as the representative tab stop.
+ * For radio buttons the checked element wins; otherwise the
+ * first element in DOM order is kept (it was set when the
+ * group was first encountered).
+ */
+function isPreferredTabStop(candidate, current) {
+  if (candidate instanceof HTMLInputElement && candidate.type === 'radio' && current instanceof HTMLInputElement) {
+    return candidate.checked && !current.checked;
+  }
+  return false;
+}
+/**
+ * From a flat list of focusable elements, removes duplicates
+ * that share a single tab stop, keeping only the representative
+ * element for each group (the checked radio, or the first one
+ * in DOM order when nothing is checked, etc.).
+ */
+function deduplicateTabStops(allFocusable) {
+  var groupRepresentatives = new Map();
+  for (var _iterator = _createForOfIteratorHelperLoose(allFocusable), _step; !(_step = _iterator()).done;) {
+    var el = _step.value;
+    var key = getTabStopGroupKey(el);
+    if (key) {
+      var current = groupRepresentatives.get(key);
+      if (!current || isPreferredTabStop(el, current)) {
+        groupRepresentatives.set(key, el);
+      }
+    }
+  }
+  return allFocusable.filter(function (el) {
+    var key = getTabStopGroupKey(el);
+    if (key) {
+      return groupRepresentatives.get(key) === el;
+    }
+    return true;
+  });
+}
+/**
+ * Module-level registry of currently active focus-lock root elements.
+ * Used in Safari to prevent an outer lock from handling Tab for elements
+ * that belong to an inner (descendant) lock.
+ */
+var activeFocusLockRoots = /*#__PURE__*/new Set();
 function useFocusLock(active, header, body) {
   var rootNode = useRef(null);
   var focusableItems = useRef([]);
+  var _useDeviceDetect = useDeviceDetect(),
+    isSafari = _useDeviceDetect.isSafari;
   // The filter is necessary for the proper functioning of focus in drawer-navigation or similar cases
   var updateFocusableItems = function updateFocusableItems() {
     var _rootNode$current;
-    focusableItems.current = Array.from(((_rootNode$current = rootNode.current) == null ? void 0 : _rootNode$current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), video')) || []).filter(function (element) {
+    var allFocusable = Array.from(((_rootNode$current = rootNode.current) == null ? void 0 : _rootNode$current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), video')) || []).filter(function (element) {
       var style = window.getComputedStyle(element);
-      return element instanceof HTMLElement && style.display !== 'none' && style.visibility !== 'hidden' && !element.hasAttribute('disabled');
+      return element instanceof HTMLElement && style.display !== 'none' && style.visibility !== 'hidden' && !element.hasAttribute('disabled') && element.tabIndex >= 0;
     });
+    focusableItems.current = deduplicateTabStops(allFocusable);
   };
   useEffect(function () {
     if (active) {
+      var root = rootNode.current;
+      if (root) {
+        activeFocusLockRoots.add(root);
+      }
       updateFocusableItems();
       var observer = new MutationObserver(function () {
         updateFocusableItems();
       });
-      if (rootNode.current) {
-        observer.observe(rootNode.current, {
+      if (root) {
+        observer.observe(root, {
           childList: true,
           subtree: true
         });
@@ -11296,6 +11412,9 @@ function useFocusLock(active, header, body) {
         body.current.firstChild.focus();
       }
       return function () {
+        if (root) {
+          activeFocusLockRoots["delete"](root);
+        }
         observer.disconnect();
       };
     }
@@ -11305,12 +11424,44 @@ function useFocusLock(active, header, body) {
       if (!focusableItems.current) return;
       var key = event.key,
         shiftKey = event.shiftKey;
-      var _focusableItems$curre = focusableItems.current,
-        length = _focusableItems$curre.length,
-        firstItem = _focusableItems$curre[0],
-        lastItem = _focusableItems$curre[length - 1];
       if (active && key === 'Tab') {
-        // If no focusable items are
+        updateFocusableItems();
+        var length = focusableItems.current.length;
+        var firstItem = focusableItems.current[0];
+        var lastItem = focusableItems.current[length - 1];
+        var activeElement = document.activeElement;
+        var eventTarget = event.target;
+        var isEventInsideCurrentLock = !!rootNode.current && !!eventTarget && rootNode.current.contains(eventTarget);
+        var isActiveElementTracked = !!activeElement && (activeElement === (header == null ? void 0 : header.current) || focusableItems.current.includes(activeElement));
+        var isActiveElementInsideCurrentLock = !!rootNode.current && !!activeElement && rootNode.current.contains(activeElement);
+        /**
+         * Safari + VoiceOver can place screen reader focus on non-interactive content.
+         * In that case, on next Tab the DOM focus may no longer be on one of the tracked
+         * interactive elements, and the default browser tabbing can escape the lock.
+         *
+         * We only handle this as a fallback:
+         * - lock is active
+         * - Tab was pressed
+         * - event still belongs to the current lock
+         * - but DOM focus is no longer on a tracked interactive element
+         *
+         * This keeps the default logic intact and avoids breaking nested focus locks.
+         */
+        // Check whether the active element sits inside a nested active lock.
+        // If so, that lock should handle Tab — not this (outer) one.
+        var isInsideNestedLock = !!activeElement && Array.from(activeFocusLockRoots).some(function (lockRoot) {
+          return lockRoot !== rootNode.current && rootNode.current.contains(lockRoot) && lockRoot.contains(activeElement);
+        });
+        if (length > 0 && (isEventInsideCurrentLock || isSafari) && !isActiveElementTracked && !isInsideNestedLock && (isActiveElementInsideCurrentLock || activeElement === document.body)) {
+          event.preventDefault();
+          if (shiftKey) {
+            lastItem.focus();
+          } else {
+            firstItem.focus();
+          }
+          return;
+        }
+        // If no focusable items
         if (length === 0) {
           event.preventDefault();
           return;
@@ -11323,6 +11474,56 @@ function useFocusLock(active, header, body) {
           }
           return;
         }
+        // If focused on header then focus on first/last item
+        if (document.activeElement === (header == null ? void 0 : header.current)) {
+          event.preventDefault();
+          (shiftKey ? lastItem : firstItem).focus();
+          return;
+        }
+        /**
+         * Safari does not keep Tab navigation inside React portals,
+         * so we manually move focus to the next/prev item for every Tab.
+         * Other browsers handle intermediate navigation natively and
+         * only need the boundary guards below.
+         */
+        if (isSafari) {
+          // In Safari we manually manage every Tab, so we must exclude:
+          // 1. Elements hidden by an ancestor (e.g. closed DatePicker calendar)
+          // 2. Elements inside a nested active focus lock (they have their own handler)
+          var nestedLockRoots = Array.from(activeFocusLockRoots).filter(function (lockRoot) {
+            return lockRoot !== rootNode.current && rootNode.current.contains(lockRoot);
+          });
+          var visibleItems = focusableItems.current.filter(function (el) {
+            if (typeof el.checkVisibility === 'function' && !el.checkVisibility()) {
+              return false;
+            }
+            // Skip elements managed by a nested lock
+            if (nestedLockRoots.length > 0 && nestedLockRoots.some(function (lockRoot) {
+              return lockRoot.contains(el);
+            })) {
+              return false;
+            }
+            return true;
+          });
+          var visibleLength = visibleItems.length;
+          if (visibleLength === 0) {
+            event.preventDefault();
+            return;
+          }
+          var idx = visibleItems.indexOf(activeElement);
+          // Active element is not in this lock's own elements
+          // (it must be inside a nested lock) — let that lock handle it.
+          if (idx === -1) {
+            return;
+          }
+          event.preventDefault();
+          if (shiftKey) {
+            visibleItems[idx <= 0 ? visibleLength - 1 : idx - 1].focus();
+          } else {
+            visibleItems[idx >= visibleLength - 1 ? 0 : idx + 1].focus();
+          }
+          return;
+        }
         // If focused on last item then focus on first item when tab is pressed
         if (!shiftKey && document.activeElement === lastItem) {
           event.preventDefault();
@@ -11330,7 +11531,7 @@ function useFocusLock(active, header, body) {
           return;
         }
         // If focused on first item then focus on last item when shift + tab is pressed
-        if (shiftKey && (document.activeElement === firstItem || document.activeElement === (header == null ? void 0 : header.current))) {
+        if (shiftKey && document.activeElement === firstItem) {
           event.preventDefault();
           lastItem.focus();
           return;
@@ -14908,54 +15109,6 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
 });
 DropdownMenuItem.displayName = 'DropdownMenuItem';
 
-var useDeviceDetect = function useDeviceDetect() {
-  var userAgent = useMemo(function () {
-    return navigator.userAgent.toLowerCase();
-  }, []);
-  var isSafari = useMemo(function () {
-    return /^((?!chrome|android).)*safari/i.test(userAgent);
-  }, [userAgent]);
-  var isChrome = useMemo(function () {
-    return /chrome|crios/i.test(userAgent) && !/edge|edg/i.test(userAgent);
-  }, [userAgent]);
-  var isFirefox = useMemo(function () {
-    return /firefox|fxios/i.test(userAgent);
-  }, [userAgent]);
-  var isEdge = useMemo(function () {
-    return /edge|edg/i.test(userAgent);
-  }, [userAgent]);
-  var isMobile = useMemo(function () {
-    return /mobi|android|touch|mini/i.test(userAgent);
-  }, [userAgent]);
-  var isWindows = useMemo(function () {
-    return /windows nt/.test(userAgent);
-  }, [userAgent]);
-  var isMacOS = useMemo(function () {
-    return /macintosh/.test(userAgent);
-  }, [userAgent]);
-  var isAndroid = useMemo(function () {
-    return /android/.test(userAgent);
-  }, [userAgent]);
-  var isIOS = useMemo(function () {
-    return /iphone|ipad|ipod/.test(userAgent);
-  }, [userAgent]);
-  var isLinux = useMemo(function () {
-    return /linux/.test(userAgent) && !isAndroid;
-  }, [userAgent, isAndroid]);
-  return {
-    isSafari: isSafari,
-    isChrome: isChrome,
-    isFirefox: isFirefox,
-    isEdge: isEdge,
-    isMobile: isMobile,
-    isWindows: isWindows,
-    isMacOS: isMacOS,
-    isLinux: isLinux,
-    isAndroid: isAndroid,
-    isIOS: isIOS
-  };
-};
-
 var _excluded$T = ["children", "icon", "to"];
 var StyledItem$3 = /*#__PURE__*/_styled("a", {
   target: "e1b21r9q0",