@lumx/react 4.14.0-next.1 → 4.14.0-next.2

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';
@@ -203,11 +203,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;
 }
@@ -5050,7 +5045,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;
     }
@@ -5265,7 +5260,7 @@ const Tooltip = forwardRef((props, ref) => {
     ...forwardedProps
   } = props;
   // Disable in SSR.
-  if (!DOCUMENT$1) {
+  if (!DOCUMENT) {
     return /*#__PURE__*/jsx(Fragment, {
       children: children
     });
@@ -8877,15 +8872,12 @@ function setupFocusTrap(options, signal) {
     focusZoneElement,
     focusElement
   } = options;
-
-  // Body element can be undefined in SSR context.
-  const rootElement = DOCUMENT?.body;
-  if (!rootElement || !focusZoneElement || signal.aborted) {
+  if (!focusZoneElement || signal.aborted) {
     return;
   }
 
-  // Use the shadow root as focus zone when available.
-  const focusZoneElementOrShadowRoot = focusZoneElement.shadowRoot || focusZoneElement;
+  // The root node is either the Document (regular DOM) or a ShadowRoot (shadow DOM portal).
+  const rootNode = focusZoneElement.getRootNode();
 
   // Track whether we added a `tabindex="-1"` so we can restore the original state on teardown.
   let addedTabIndex = false;
@@ -8911,7 +8903,7 @@ function setupFocusTrap(options, signal) {
     if (evt.key !== 'Tab') {
       return;
     }
-    const focusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot);
+    const focusable = getFirstAndLastFocusable(focusZoneElement);
 
     // Prevent focus switch if no focusable available — pin focus on the zone itself.
     if (!focusable.first) {
@@ -8919,14 +8911,16 @@ function setupFocusTrap(options, signal) {
       focusZoneFallback();
       return;
     }
-    const activeElement = focusZoneElement.shadowRoot ? focusZoneElement.shadowRoot.activeElement : DOCUMENT?.activeElement;
+    const {
+      activeElement
+    } = rootNode;
     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)) {
+    !focusZoneElement.contains(activeElement)) {
       focusable.first.focus();
       evt.preventDefault();
       return;
@@ -8940,19 +8934,20 @@ function setupFocusTrap(options, signal) {
       evt.preventDefault();
     }
   };
+  const keydownHandler = trapTabFocusInFocusZone;
   const focusTrap = {
-    enable: () => rootElement.addEventListener('keydown', trapTabFocusInFocusZone),
-    disable: () => rootElement.removeEventListener('keydown', trapTabFocusInFocusZone)
+    enable: () => rootNode.addEventListener('keydown', keydownHandler),
+    disable: () => rootNode.removeEventListener('keydown', keydownHandler)
   };
 
   // SETUP: focus initial element.
-  if (focusElement && focusZoneElementOrShadowRoot.contains(focusElement)) {
+  if (focusElement && focusZoneElement.contains(focusElement)) {
     // Focus the given element.
     focusElement.focus({
       preventScroll: true
     });
   } else {
-    const firstFocusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot).first;
+    const firstFocusable = getFirstAndLastFocusable(focusZoneElement).first;
     if (firstFocusable) {
       // Focus the first focusable descendant.
       firstFocusable.focus({
@@ -9539,7 +9534,7 @@ _InnerPopover.displayName = COMPONENT_NAME$16;
  */
 const Popover = skipRender(
 // Skip render in SSR
-() => Boolean(DOCUMENT$1), _InnerPopover);
+() => Boolean(DOCUMENT), _InnerPopover);
 Popover.displayName = COMPONENT_NAME$16;
 Popover.className = CLASSNAME$15;
 Popover.defaultProps = DEFAULT_PROPS$V;
@@ -11824,7 +11819,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;
   }
@@ -14233,7 +14228,7 @@ const Lightbox = forwardRef((props, ref) => {
     zIndex,
     ...forwardedProps
   } = props;
-  if (!DOCUMENT$1) {
+  if (!DOCUMENT) {
     // Can't render in SSR.
     return null;
   }
@@ -15192,7 +15187,7 @@ const Notification = forwardRef((props, ref) => {
     style,
     ...forwardedProps
   } = props;
-  if (!DOCUMENT$1) {
+  if (!DOCUMENT) {
     // Can't render in SSR.
     return null;
   }