@lumx/react 4.12.1-alpha.0 → 4.12.1-next.1

package/index.js

@@ -1,4 +1,4 @@
-import { ColorVariant as ColorVariant$1, Size as Size$1, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT as DOCUMENT$1, IS_BROWSER as IS_BROWSER$1, Emphasis as Emphasis$1, WINDOW, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, NOTIFICATION_TRANSITION_DURATION, Kind as Kind$1, Alignment as Alignment$1, ColorPalette as ColorPalette$1 } from '@lumx/core/js/constants';
+import { ColorVariant as ColorVariant$1, Size as Size$1, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT, IS_BROWSER as IS_BROWSER$1, Emphasis as Emphasis$1, WINDOW, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, NOTIFICATION_TRANSITION_DURATION, Kind as Kind$1, Alignment as Alignment$1, ColorPalette as ColorPalette$1 } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
@@ -204,11 +204,6 @@ const ColorVariant = {
  */
 const IS_BROWSER = typeof window !== 'undefined' && !window.navigator.userAgent.includes('jsdom');
 
-/**
- * Optional global `document` instance (not defined when running SSR).
- */
-const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
-
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -5065,7 +5060,7 @@ const LISTENERS = makeListenerTowerContext();
  */
 function useCallbackOnEscape(callback, closeOnEscape = true) {
   useEffect(() => {
-    const rootElement = DOCUMENT$1?.body;
+    const rootElement = DOCUMENT?.body;
     if (!closeOnEscape || !callback || !rootElement) {
       return undefined;
     }
@@ -5280,7 +5275,7 @@ const Tooltip = forwardRef((props, ref) => {
     ...forwardedProps
   } = props;
   // Disable in SSR.
-  if (!DOCUMENT$1) {
+  if (!DOCUMENT) {
     return /*#__PURE__*/jsx(Fragment, {
       children: children
     });
@@ -8818,14 +8813,8 @@ const ComboboxOptionMoreInfo$1 = (props, {
 /** CSS selector listing all tabbable elements. */
 const TABBABLE_ELEMENTS_SELECTOR = 'a[href], button, textarea, input:not([type="hidden"]):not([hidden]), [tabindex]';
 
-/**
- * CSS selector matching elements that should be excluded from focus traversal.
- *
- * Note: `aria-disabled` is intentionally NOT in this list — per ARIA semantics, an `aria-disabled` element
- * remains focusable (and discoverable by assistive tech). To remove an element from the tab order, use
- * `tabindex="-1"` instead.
- */
-const DISABLED_SELECTOR = '[hidden], [tabindex="-1"], [disabled]:not([disabled="false"])';
+/** CSS selector matching element that are disabled (should not receive focus). */
+const DISABLED_SELECTOR = '[hidden], [tabindex="-1"], [disabled]:not([disabled="false"]), [aria-disabled]:not([aria-disabled="false"])';
 
 const isNotDisabled = element => !element.matches(DISABLED_SELECTOR);
 function getFocusableElements(element) {
@@ -8854,158 +8843,86 @@ function getFirstAndLastFocusable(parentElement) {
   return {};
 }
 
-/**
- * Shared listener tower for focus traps.
- *
- * When multiple traps are activated, only the last registered one is active. When it tears down, the previously
- * registered trap is re-enabled.
- */
 const FOCUS_TRAPS = makeListenerTowerContext();
+
 /**
  * Trap 'Tab' focus switch inside the `focusZoneElement`.
  *
- * Setup behavior:
- * 1. Focus `focusElement` if provided and contained in the zone.
- * 2. Otherwise focus the first focusable descendant.
- * 3. Otherwise focus the zone element itself (falling back to setting `tabindex="-1"` if needed) so that
- *    keyboard users (especially screen reader users) land inside the trapped region (e.g. an empty dialog).
- *
- * Tab key behavior:
- * - With at least one focusable descendant: focus cycles between the first and last focusable in the zone.
- * - With no focusable descendant: Tab is swallowed and focus is restored to the zone element itself.
- *
- * Multiple traps stack — only the latest one is active; previous traps re-enable when the latest is torn down.
+ * If multiple focus trap are activated, only the last one is maintained and when a focus trap closes, the previous one
+ * gets activated again.
  *
- * @param options Trap configuration.
- * @param signal  AbortSignal used to tear down the trap.
+ * @param focusZoneElement The element in which to trap the focus.
+ * @param focusElement     The element to focus when the focus trap is activated (otherwise the first focusable element
+ *                         will be focused).
  */
-function setupFocusTrap(options, signal) {
-  const {
-    focusZoneElement,
-    focusElement
-  } = options;
-
-  // Body element can be undefined in SSR context.
-  const rootElement = DOCUMENT?.body;
-  if (!rootElement || !focusZoneElement || signal.aborted) {
-    return;
-  }
-
-  // Use the shadow root as focus zone when available.
-  const focusZoneElementOrShadowRoot = focusZoneElement.shadowRoot || focusZoneElement;
-
-  // Track whether we added a `tabindex="-1"` so we can restore the original state on teardown.
-  let addedTabIndex = false;
-
-  /** Make the zone element programmatically focusable (so we can fall back to it). */
-  const ensureZoneIsFocusable = () => {
-    if (!focusZoneElement.hasAttribute('tabindex')) {
-      focusZoneElement.setAttribute('tabindex', '-1');
-      addedTabIndex = true;
+function useFocusTrap(focusZoneElement, focusElement) {
+  useEffect(() => {
+    // Body element can be undefined in SSR context.
+    const rootElement = DOCUMENT?.body;
+    if (!rootElement || !focusZoneElement) {
+      return undefined;
     }
-  };
 
-  /** Focus the zone element itself as a last-resort fallback. */
-  const focusZoneFallback = () => {
-    ensureZoneIsFocusable();
-    focusZoneElement.focus({
-      preventScroll: true
-    });
-  };
+    // 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 => {
-    if (evt.key !== 'Tab') {
-      return;
-    }
-    const focusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot);
+    // Trap 'Tab' key down focus switch into the focus zone.
+    const trapTabFocusInFocusZone = evt => {
+      const {
+        key
+      } = evt;
+      if (key !== 'Tab') {
+        return;
+      }
+      const focusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot);
 
-    // Prevent focus switch if no focusable available — pin focus on the zone itself.
-    if (!focusable.first) {
-      evt.preventDefault();
-      focusZoneFallback();
-      return;
-    }
-    const activeElement = focusZoneElement.shadowRoot ? focusZoneElement.shadowRoot.activeElement : DOCUMENT?.activeElement;
-    if (
-    // No previous focus.
-    !activeElement ||
-    // Previous focus is at the end of the focus zone.
-    !evt.shiftKey && activeElement === focusable.last ||
-    // Previous focus is outside the focus zone.
-    !focusZoneElementOrShadowRoot.contains(activeElement)) {
-      focusable.first.focus();
-      evt.preventDefault();
-      return;
-    }
-    if (
-    // Focus order reversed.
-    evt.shiftKey &&
-    // Previous focus is at the start of the focus zone.
-    activeElement === focusable.first) {
-      focusable.last.focus();
-      evt.preventDefault();
-    }
-  };
-  const focusTrap = {
-    enable: () => rootElement.addEventListener('keydown', trapTabFocusInFocusZone),
-    disable: () => rootElement.removeEventListener('keydown', trapTabFocusInFocusZone)
-  };
+      // 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
+      !activeElement ||
+      // Previous focus is at the end of the focus zone.
+      !evt.shiftKey && activeElement === focusable.last ||
+      // Previous focus is outside the focus zone
+      !focusZoneElementOrShadowRoot.contains(activeElement)) {
+        focusable.first.focus();
+        evt.preventDefault();
+        return;
+      }
+      if (
+      // Focus order reversed
+      evt.shiftKey &&
+      // Previous focus is at the start of the focus zone.
+      activeElement === focusable.first) {
+        focusable.last.focus();
+        evt.preventDefault();
+      }
+    };
+    const focusTrap = {
+      enable: () => rootElement.addEventListener('keydown', trapTabFocusInFocusZone),
+      disable: () => rootElement.removeEventListener('keydown', trapTabFocusInFocusZone)
+    };
 
-  // SETUP: focus initial element.
-  if (focusElement && focusZoneElementOrShadowRoot.contains(focusElement)) {
-    // Focus the given element.
-    focusElement.focus({
-      preventScroll: true
-    });
-  } else {
-    const firstFocusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot).first;
-    if (firstFocusable) {
-      // Focus the first focusable descendant.
-      firstFocusable.focus({
+    // SETUP:
+    if (focusElement && focusZoneElementOrShadowRoot.contains(focusElement)) {
+      // Focus the given element.
+      focusElement.focus({
         preventScroll: true
       });
     } else {
-      // No focusable descendant — fall back to the zone itself (e.g. an empty dialog).
-      focusZoneFallback();
-    }
-  }
-  FOCUS_TRAPS.register(focusTrap);
-
-  // TEARDOWN.
-  signal.addEventListener('abort', () => {
-    FOCUS_TRAPS.unregister(focusTrap);
-    if (addedTabIndex) {
-      focusZoneElement.removeAttribute('tabindex');
+      // Focus the first focusable element in the zone.
+      getFirstAndLastFocusable(focusZoneElementOrShadowRoot).first?.focus({
+        preventScroll: true
+      });
     }
-  }, {
-    once: true
-  });
-}
+    FOCUS_TRAPS.register(focusTrap);
 
-/**
- * Trap 'Tab' focus switch inside the `focusZoneElement`.
- *
- * If multiple focus traps are activated, only the last one is maintained and when a focus trap closes, the previous one
- * gets activated again.
- *
- * If the zone has no focusable descendant, the zone element itself receives focus (with a fallback `tabindex="-1"`).
- *
- * @param focusZoneElement The element in which to trap the focus.
- * @param focusElement     The element to focus when the focus trap is activated (otherwise the first focusable element
- *                         will be focused — and finally the zone element itself if no focusable is found).
- */
-function useFocusTrap(focusZoneElement, focusElement) {
-  useEffect(() => {
-    if (!focusZoneElement) {
-      return undefined;
-    }
-    const controller = new AbortController();
-    setupFocusTrap({
-      focusZoneElement,
-      focusElement
-    }, controller.signal);
-    return () => controller.abort();
+    // TEARDOWN:
+    return () => FOCUS_TRAPS.unregister(focusTrap);
   }, [focusElement, focusZoneElement]);
 }
 
@@ -9546,7 +9463,7 @@ _InnerPopover.displayName = COMPONENT_NAME$15;
  */
 const Popover = skipRender(
 // Skip render in SSR
-() => Boolean(DOCUMENT$1), _InnerPopover);
+() => Boolean(DOCUMENT), _InnerPopover);
 Popover.displayName = COMPONENT_NAME$15;
 Popover.className = CLASSNAME$14;
 Popover.defaultProps = DEFAULT_PROPS$V;
@@ -11831,7 +11748,7 @@ const DEFAULT_PROPS$P = {
  * @return React element.
  */
 const Dialog = forwardRef((props, ref) => {
-  if (!DOCUMENT$1) {
+  if (!DOCUMENT) {
     // Can't render in SSR.
     return null;
   }
@@ -14240,7 +14157,7 @@ const Lightbox = forwardRef((props, ref) => {
     zIndex,
     ...forwardedProps
   } = props;
-  if (!DOCUMENT$1) {
+  if (!DOCUMENT) {
     // Can't render in SSR.
     return null;
   }
@@ -15199,7 +15116,7 @@ const Notification = forwardRef((props, ref) => {
     style,
     ...forwardedProps
   } = props;
-  if (!DOCUMENT$1) {
+  if (!DOCUMENT) {
     // Can't render in SSR.
     return null;
   }