@lumx/react 4.24.0 → 4.24.1-alpha.0

package/index.d.ts

@@ -2487,13 +2487,18 @@ interface DialogProps extends GenericProps$1, HasCloseMode$1, BaseDialogProps {
     size?: DialogSizes;
     /** Z-axis position. */
     zIndex?: number;
-    /** Z-axis position. */
+    /**
+     * Additional props for the dialog container element.
+     * Set `'aria-modal': false` to make the dialog non-modal: the page stays usable (no focus trap, no overlay,
+     * no close on click away, rendered in place instead of in a portal) and escape only closes the dialog when the
+     * focus is inside.
+     */
     dialogProps?: GenericProps$1;
     /** On close callback. */
     onClose?(): void;
     /** Callback called when the open animation starts and the close animation finishes. */
     onVisibilityChange?(isVisible: boolean): void;
-    /** whether to disable the scroll on the body or not */
+    /** Whether to disable the scroll on the body or not (ignored on a non-modal dialog: the page stays usable). */
     disableBodyScroll?: boolean;
     /** Children */
     children?: React__default.ReactNode;

package/index.js

@@ -9260,6 +9260,64 @@ function getFirstAndLastFocusable(parentElement) {
   return {};
 }
 
+/**
+ * Focus the zone element itself (last-resort fallback, e.g. an empty dialog).
+ *
+ * Adds a `tabindex="-1"` if needed to make the zone programmatically focusable, removed when the signal aborts.
+ *
+ * @param focusZoneElement The zone element.
+ * @param signal           AbortSignal used to remove the added `tabindex`.
+ */
+function focusZoneFallback(focusZoneElement, signal) {
+  if (!focusZoneElement.hasAttribute('tabindex')) {
+    focusZoneElement.setAttribute('tabindex', '-1');
+    signal.addEventListener('abort', () => focusZoneElement.removeAttribute('tabindex'), {
+      once: true
+    });
+  }
+  focusZoneElement.focus({
+    preventScroll: true
+  });
+}
+
+/**
+ * Move the focus into the `focusZoneElement`:
+ * 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 zone (e.g. an empty dialog).
+ *
+ * @param options Initial focus configuration.
+ * @param signal  AbortSignal used to tear down (removes the fallback `tabindex` if it was added).
+ */
+function setupInitialFocus(options, signal) {
+  const {
+    focusZoneElement,
+    focusElement
+  } = options;
+  if (!focusZoneElement || signal.aborted) {
+    return;
+  }
+  if (focusElement && focusZoneElement.contains(focusElement)) {
+    // Focus the given element.
+    focusElement.focus({
+      preventScroll: true
+    });
+    return;
+  }
+  const firstFocusable = getFirstAndLastFocusable(focusZoneElement).first;
+  if (firstFocusable) {
+    // Focus the first focusable descendant.
+    firstFocusable.focus({
+      preventScroll: true
+    });
+    return;
+  }
+
+  // No focusable descendant — fall back to the zone itself.
+  focusZoneFallback(focusZoneElement, signal);
+}
+
 /**
  * Shared listener tower for focus traps.
  *
@@ -9267,14 +9325,13 @@ function getFirstAndLastFocusable(parentElement) {
  * registered trap is re-enabled.
  */
 const FOCUS_TRAPS = makeListenerTowerContext();
+
+/** Focus trap options: the zone in which to trap the focus, and the element to focus on activation. */
+
 /**
  * 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).
+ * Setup behavior: move the focus into the zone (see `setupInitialFocus`).
  *
  * Tab key behavior:
  * - With at least one focusable descendant: focus cycles between the first and last focusable in the zone.
@@ -9287,8 +9344,7 @@ const FOCUS_TRAPS = makeListenerTowerContext();
  */
 function setupFocusTrap(options, signal) {
   const {
-    focusZoneElement,
-    focusElement
+    focusZoneElement
   } = options;
   if (!focusZoneElement || signal.aborted) {
     return;
@@ -9297,25 +9353,6 @@ function setupFocusTrap(options, signal) {
   // 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;
-
-  /** 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;
-    }
-  };
-
-  /** Focus the zone element itself as a last-resort fallback. */
-  const focusZoneFallback = () => {
-    ensureZoneIsFocusable();
-    focusZoneElement.focus({
-      preventScroll: true
-    });
-  };
-
   // Trap 'Tab' key down focus switch into the focus zone.
   const trapTabFocusInFocusZone = evt => {
     if (evt.key !== 'Tab') {
@@ -9326,7 +9363,7 @@ function setupFocusTrap(options, signal) {
     // Prevent focus switch if no focusable available — pin focus on the zone itself.
     if (!focusable.first) {
       evt.preventDefault();
-      focusZoneFallback();
+      focusZoneFallback(focusZoneElement, signal);
       return;
     }
     const {
@@ -9359,32 +9396,11 @@ function setupFocusTrap(options, signal) {
   };
 
   // SETUP: focus initial element.
-  if (focusElement && focusZoneElement.contains(focusElement)) {
-    // Focus the given element.
-    focusElement.focus({
-      preventScroll: true
-    });
-  } else {
-    const firstFocusable = getFirstAndLastFocusable(focusZoneElement).first;
-    if (firstFocusable) {
-      // Focus the first focusable descendant.
-      firstFocusable.focus({
-        preventScroll: true
-      });
-    } else {
-      // No focusable descendant — fall back to the zone itself (e.g. an empty dialog).
-      focusZoneFallback();
-    }
-  }
+  setupInitialFocus(options, signal);
   FOCUS_TRAPS.register(focusTrap);
 
   // TEARDOWN.
-  signal.addEventListener('abort', () => {
-    FOCUS_TRAPS.unregister(focusTrap);
-    if (addedTabIndex) {
-      focusZoneElement.removeAttribute('tabindex');
-    }
-  }, {
+  signal.addEventListener('abort', () => FOCUS_TRAPS.unregister(focusTrap), {
     once: true
   });
 }
@@ -12156,6 +12172,23 @@ const useTransitionVisibility = (ref, isComponentVisible, timeout, onVisibilityC
   return isVisible || isComponentVisible;
 };
 
+/**
+ * Check if the focus is on the given element or inside it.
+ *
+ * Reads the active element of the element's own root node (Document or ShadowRoot), so it also works when the
+ * element lives in a shadow DOM.
+ *
+ * @param  element The element to check.
+ * @return whether the active element is the element itself or one of its descendants.
+ */
+function isFocusWithin(element) {
+  if (!element) return false;
+  const {
+    activeElement
+  } = element.getRootNode();
+  return Boolean(activeElement && element.contains(activeElement));
+}
+
 /**
  * Dialog label id key in IdsRegistry
  */
@@ -12202,6 +12235,7 @@ const DialogShell = props => {
     isVisible,
     size = DEFAULT_PROPS$U.size,
     zIndex,
+    isModal = true,
     children,
     Portal,
     HeadingLevelProvider,
@@ -12210,19 +12244,21 @@ const DialogShell = props => {
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx(Portal, {
+    enabled: isModal,
     children: /*#__PURE__*/jsxs("div", {
       ref: ref,
       ...forwardedProps,
       className: classnames(className, block$N({
         'is-hidden': !isOpen,
         'is-loading': isLoading,
+        'is-non-modal': !isModal,
         'is-shown': isOpen || isVisible,
         [`size-${size}`]: Boolean(size)
       })),
       style: {
         zIndex
       },
-      children: [/*#__PURE__*/jsx("div", {
+      children: [isModal && /*#__PURE__*/jsx("div", {
         className: element$C('overlay')
       }), /*#__PURE__*/jsx(HeadingLevelProvider, {
         level: 2,
@@ -12260,6 +12296,14 @@ function resolveAccessibleNameProps(ariaLabel, ariaLabelledBy) {
  * that has resolved `labelId` from the ids registry.
  */
 
+/**
+ * Whether the dialog is modal: it is, unless `dialogProps['aria-modal']` is `false` (or `'false'`).
+ *
+ * @param  dialogProps Props of the dialog container element.
+ * @return whether the dialog is modal.
+ */
+const isDialogModal = dialogProps => dialogProps?.['aria-modal'] !== false && dialogProps?.['aria-modal'] !== 'false';
+
 /**
  * Dialog content: the `role="dialog"` element + header/body/footer.
  *
@@ -12301,14 +12345,17 @@ const DialogContent$1 = props => {
     'aria-labelledby': dialogAriaLabelledBy,
     ...restDialogProps
   } = dialogProps ?? {};
+  const isModal = isDialogModal(restDialogProps);
   return /*#__PURE__*/jsx("div", {
     className: element$C('container'),
     role: "dialog",
     "aria-modal": "true",
     ...restDialogProps,
     ...resolveAccessibleNameProps(dialogAriaLabel, dialogAriaLabelledBy || labelId),
-    children: /*#__PURE__*/jsx(ClickAwayProvider, {
-      callback: !shouldPreventCloseOnClickAway && handleClose,
+    children: /*#__PURE__*/jsx(ClickAwayProvider
+    // A non-modal dialog leaves the page usable: clicking it must not close the dialog.
+    , {
+      callback: isModal && !shouldPreventCloseOnClickAway && handleClose,
       childrenRefs: clickAwayRefs,
       parentRef: rootRef,
       children: /*#__PURE__*/jsxs("section", {
@@ -12534,28 +12581,51 @@ const DialogBody = forwardRef((props, ref) => {
     preventCloseOnEscape,
     ...forwardedProps
   } = props;
+  const isModal = isDialogModal(dialogProps);
+  const wrapperRef = useRef(null);
   const previousOpen = React__default.useRef(isOpen);
   React__default.useEffect(() => {
     if (isOpen !== previousOpen.current) {
       previousOpen.current = isOpen;
 
       // Focus the parent element on close.
-      if (!isOpen && parentElement && parentElement.current) {
+      // Non-modal: only when the focus is inside the dialog (do not steal the focus from the page).
+      if (!isOpen && parentElement?.current && (isModal || isFocusWithin(wrapperRef.current))) {
         parentElement.current.focus();
       }
     }
-  }, [isOpen, parentElement]);
+  }, [isOpen, isModal, parentElement]);
   const shouldPreventCloseOnEscape = preventAutoClose || preventCloseOnEscape;
-  useCallbackOnEscape(onClose, isOpen && !shouldPreventCloseOnEscape);
-  const wrapperRef = useRef(null);
+
   /**
    * Since the `contentRef` comes from the parent and is optional,
    * we need to create a stable contentRef that will always be available.
    */
   const localContentRef = useRef(null);
+
+  // Close on escape (a tooltip or popover opened inside registers after the dialog and so gets the escape first).
+  // Non-modal: the page stays usable, so only close when the focus is inside the dialog.
+  const onEscape = React__default.useCallback(() => {
+    if (isModal || isFocusWithin(wrapperRef.current)) onClose?.();
+  }, [isModal, onClose]);
+  useCallbackOnEscape(onClose && onEscape, isOpen && !shouldPreventCloseOnEscape);
+
   // Handle focus trap.
-  useFocusTrap(isOpen && wrapperRef.current, focusElement?.current);
-  useDisableBodyScroll(disableBodyScroll && isOpen && localContentRef.current);
+  useFocusTrap(isModal && isOpen && wrapperRef.current, focusElement?.current);
+
+  // Non-modal: without the focus trap, move the focus into the dialog on open ourselves.
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (isModal || !isOpen || !wrapper) return undefined;
+    const controller = new AbortController();
+    setupInitialFocus({
+      focusZoneElement: wrapper,
+      focusElement: focusElement?.current
+    }, controller.signal);
+    return () => controller.abort();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isModal, isOpen]);
+  useDisableBodyScroll(isModal && disableBodyScroll && isOpen && localContentRef.current);
   const [sentinelTop, setSentinelTop] = useState(null);
   const [sentinelBottom, setSentinelBottom] = useState(null);
   const intersections = useIntersectionObserver([sentinelTop, sentinelBottom], {
@@ -12587,6 +12657,7 @@ const DialogBody = forwardRef((props, ref) => {
     isVisible,
     size,
     zIndex,
+    isModal,
     ref: mergeRefs(rootRef, ref),
     ...forwardedProps,
     children: /*#__PURE__*/jsx(DialogContent, {