@oxy.so/bloom 4.23.0 → 4.24.1

package/src/dialog/Dialog.web.tsx

@@ -37,6 +37,7 @@ import Animated, {
 import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
 import { Backdrop, OverlayRoot } from '../overlay';
+import { ModalKeyboard } from '../overlay/ModalKeyboard';
 import { StyledView } from '../styles/styled-primitives';
 import { Portal } from '../portal/index.web';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
@@ -219,6 +220,7 @@ function CenterOrSideDialog({
   // the imperative `control.close()` still drives the exit + post-exit onClose.
   const [isOpen, setIsOpen] = useState(() => controlledOpen ?? startOpen ?? false);
   const [isClosing, setIsClosing] = useState(false);
+  const panelRef = useRef<View>(null);
   const closeCallbacksRef = useRef<(() => void)[]>([]);
   // Read the latest controlled flag inside stable callbacks without re-binding.
   const isControlledRef = useRef(isControlled);
@@ -314,24 +316,6 @@ function CenterOrSideDialog({
       : withTiming(1, { duration: BACKDROP_FADE_IN_DURATION, easing: Easing.out(Easing.ease) });
   }, [backdropFade, isOpen, isClosing]);
 
-  // Escape-to-close while open. The listener is intentionally scoped to the
-  // open lifetime so stacked dialogs don't fight for the keydown — the
-  // top-most one wins via document-level event order. Escape honors
-  // `dismissOnBackdrop`: a blocking dialog (e.g. an unanswered confirm) is not
-  // dismissible by Escape, matching the backdrop's behavior. The default
-  // (`dismissOnBackdrop` true) is unchanged — Escape still closes.
-  useEffect(() => {
-    if (!isOpen || !dismissOnBackdrop || typeof document === 'undefined') return;
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.stopPropagation();
-        close();
-      }
-    };
-    document.addEventListener('keydown', handler);
-    return () => document.removeEventListener('keydown', handler);
-  }, [close, dismissOnBackdrop, isOpen]);
-
   useImperativeHandle(
     control?.ref,
     () => ({ open, close }),
@@ -359,6 +343,12 @@ function CenterOrSideDialog({
                 `OverlayInertBoundary` take the page out of the tab order and
                 the accessibility tree while it is open. */}
             <OverlayRoot modal>
+              <ModalKeyboard
+                panelRef={panelRef}
+                closing={isClosing}
+                dismissible={dismissOnBackdrop}
+                dismiss={close}
+              />
               {/* The press target IS the full-viewport box, so it uses
                   `Backdrop` (which opts back in from the Portal root's
                   `pointer-events: none` via the `pointerEvents` PROP — the style
@@ -380,6 +370,7 @@ function CenterOrSideDialog({
                 }}
               >
                 <DialogPanel
+                  panelRef={panelRef}
                   testID={testID}
                   label={label}
                   title={title}
@@ -410,6 +401,7 @@ function CenterOrSideDialog({
         <ClosingContext.Provider value={isClosing}>
           <RemoveScrollBar />
           <SheetSurface
+            panelRef={panelRef}
             testID={testID}
             label={label}
             title={title}
@@ -439,6 +431,7 @@ function CenterOrSideDialog({
 }
 
 function DialogPanel({
+  panelRef,
   testID,
   label,
   title,
@@ -454,6 +447,7 @@ function DialogPanel({
   isClosing,
   children,
 }: {
+  panelRef: React.RefObject<View | null>;
   testID?: string;
   label?: string;
   title?: string;
@@ -508,7 +502,11 @@ function DialogPanel({
 
   return (
     <Animated.View
+      ref={panelRef}
       role="dialog"
+      aria-modal
+      // Focus lands on the panel itself when it holds nothing tabbable.
+      tabIndex={-1}
       aria-label={label}
       aria-labelledby={title ? titleId : undefined}
       aria-describedby={description ? descriptionId : undefined}
@@ -625,6 +623,7 @@ function DialogPanel({
  * implementation with native and supports drag-to-dismiss on web.
  */
 function SheetSurface({
+  panelRef,
   testID,
   label,
   title,
@@ -646,6 +645,7 @@ function SheetSurface({
   style,
   children,
 }: {
+  panelRef: React.RefObject<View | null>;
   testID?: string;
   label?: string;
   title?: string;
@@ -750,6 +750,7 @@ function SheetSurface({
 
   return (
     <OverlayRoot style={[sheetStyles.root, containerStyle]} className={containerClassName} modal>
+      <ModalKeyboard panelRef={panelRef} closing={!shown} dismissible={dismissOnBackdrop} dismiss={onDismiss} />
       <Backdrop
         testID={testID ? `${testID}-backdrop` : DIALOG_SHEET_BACKDROP_TESTID}
         accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}
@@ -763,7 +764,10 @@ function SheetSurface({
       />
 
       <StyledView
+        ref={panelRef}
         role="dialog"
+        aria-modal
+        tabIndex={-1}
         aria-label={label}
         aria-labelledby={title ? titleId : undefined}
         aria-describedby={description ? descriptionId : undefined}

package/src/dialog/DialogBottomSheet.tsx

@@ -100,6 +100,8 @@ export function DialogBottomSheet({
   isControlledRef.current = isControlled;
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
+  const controlledOpenRef = useRef(controlledOpen);
+  controlledOpenRef.current = controlledOpen;
 
   // Drain queued close callbacks atomically — capturing the list and resetting
   // it before invocation ensures a callback that synchronously re-opens the
@@ -139,12 +141,15 @@ export function DialogBottomSheet({
   }, []);
 
   // Fired when the sheet has finished closing. Drains queued callbacks, then
-  // fires `onClose` ONLY in imperative mode — controlled mode already requested
-  // the close through `onClose` (the host then flipped `open`), so firing it
-  // again here would double-call it.
+  // fires `onClose` in imperative mode. In controlled mode a close the HOST
+  // made (it flipped `open` to false, usually after `close()` asked it to) was
+  // already requested through `onClose`, so firing it again would double-call
+  // it — but a close the SHEET made on its own (the backdrop, a drag, Escape)
+  // arrives with `open` still true, and the host has to hear about it or its
+  // state says open over a closed sheet.
   const handleDismiss = useCallback(() => {
     callQueuedCallbacks();
-    if (!isControlledRef.current) onCloseRef.current?.();
+    if (!isControlledRef.current || controlledOpenRef.current) onCloseRef.current?.();
   }, [callQueuedCallbacks]);
 
   // In controlled mode, mirror the `open` prop onto the underlying sheet so both

package/src/overlay/ModalKeyboard.tsx

@@ -0,0 +1,88 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import type { View } from 'react-native';
+
+import { listenForEscape, tabbablesWithin, wrapTab } from './modal-keyboard';
+import { useOverlayLayerContext } from './Overlay';
+import { isTopmostOverlayLayer } from './stack';
+
+export interface ModalKeyboardProps {
+  /** The surface's panel: where focus goes, and what Tab stays inside. */
+  panelRef: React.RefObject<View | null>;
+  /** The surface has started its exit: focus goes back now, Escape is spent. */
+  closing?: boolean;
+  /** Whether Escape may dismiss it (a dialog's `dismissOnBackdrop`). */
+  dismissible: boolean;
+  dismiss: () => void;
+}
+
+/**
+ * An open modal surface's keyboard and focus, WEB. Renders nothing; it must
+ * sit INSIDE the surface's `OverlayRoot`, which is how it knows the surface's
+ * place in the overlay stack. Used by the web `Dialog` (card and side drawers)
+ * and the web `BottomSheet`.
+ *
+ *  - Focus moves INTO the panel when it opens — to whatever the content
+ *    focused itself (an `autoFocus` field), else the first tabbable, else the
+ *    panel — and goes BACK to the element that had it once the surface starts
+ *    closing (or unmounts), unless the host has already put it somewhere else.
+ *  - Tab and Shift+Tab wrap at the panel's edges.
+ *  - Escape dismisses (when `dismissible`), from anywhere — a text field of the
+ *    surface included, which react-native-web keeps every keydown from
+ *    bubbling out of (`./modal-keyboard.ts`).
+ *
+ * All three belong to the TOP-MOST surface only: a menu or a second dialog
+ * opened from this one takes them until it closes, so Escape closes one layer
+ * at a time. Inert without a DOM, so native never runs any of it.
+ */
+export function ModalKeyboard({ panelRef, closing = false, dismissible, dismiss }: ModalKeyboardProps) {
+  const layer = useOverlayLayerContext();
+  const state = useRef({ closing, dismissible, dismiss });
+  state.current = { closing, dismissible, dismiss };
+  const opener = useRef<HTMLElement | null>(null);
+
+  const restoreFocus = useCallback(() => {
+    const target = opener.current;
+    opener.current = null;
+    if (!target?.isConnected || typeof document === 'undefined') return;
+    const panel = panelRef.current as unknown as HTMLElement | null;
+    const active = document.activeElement;
+    // Only focus the surface still holds (or lost with its nodes): a host that
+    // moved focus on purpose while closing keeps its choice.
+    if (!active || active === document.body || panel?.contains(active)) target.focus();
+  }, [panelRef]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof document === 'undefined') return;
+    const active = document.activeElement;
+    opener.current = active instanceof HTMLElement && active !== document.body ? active : null;
+    const panel = () => panelRef.current as unknown as HTMLElement | null;
+    // A frame later, so content that focuses itself on mount has done so.
+    const frame = requestAnimationFrame(() => {
+      const node = panel();
+      if (!node || node.contains(document.activeElement) || !isTopmostOverlayLayer(layer)) return;
+      (tabbablesWithin(node)[0] ?? node).focus();
+    });
+    const onTab = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || !isTopmostOverlayLayer(layer)) return;
+      wrapTab(event, panel());
+    };
+    // Capture: a text field in the panel stops its own keydowns.
+    window.addEventListener('keydown', onTab, true);
+    const stopEscape = listenForEscape(
+      () => state.current.dismissible && !state.current.closing && isTopmostOverlayLayer(layer),
+      () => state.current.dismiss(),
+    );
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener('keydown', onTab, true);
+      stopEscape();
+      restoreFocus();
+    };
+  }, [layer, panelRef, restoreFocus]);
+
+  useEffect(() => {
+    if (closing) restoreFocus();
+  }, [closing, restoreFocus]);
+
+  return null;
+}

package/src/overlay/modal-keyboard.ts

@@ -0,0 +1,133 @@
+/**
+ * Keyboard plumbing for a web surface that takes over the screen — a dialog, a
+ * drawer: which elements Tab may land on, wrapping Tab at the surface's edges,
+ * and Escape. WEB ONLY; every export is inert without a DOM.
+ *
+ * ── WHY ESCAPE IS NOT A PLAIN `keydown` LISTENER ────────────────────────────
+ *
+ * react-native-web's `TextInput` calls `stopPropagation()` on EVERY keydown it
+ * receives (its source cites RNW #612). React delegates events at the root or
+ * portal container, so the stop happens there — below `document` and `window`.
+ * A surface that listened for Escape on either never heard it while focus was
+ * in one of its own text fields: a command palette, whose focus lives in its
+ * search box, could not be dismissed from the keyboard at all.
+ *
+ * Listening in the CAPTURE phase alone is not the fix either: it runs before
+ * the focused control, so a control that owns Escape (a tag field clearing its
+ * highlight, a composer closing its suggestion list) would lose it to the
+ * surface. So `listenForEscape` takes the key in three steps:
+ *
+ *  1. CAPTURE on `window`: the surface decides whether the key is its to take
+ *     (`claim`). This is the only point where "an anchored menu is open above
+ *     me" is still true — the floating Escape stack closes that menu during the
+ *     bubble phase. A claimed key is remembered, nothing else happens yet.
+ *  2. BUBBLE on `window`: the key arrived untouched — dismiss, unless something
+ *     called `preventDefault()`.
+ *  3. After dispatch, for a key that never reached the bubble listener: it is
+ *     still dismissed when its target is an editable text field and nothing
+ *     prevented its default, because that stop is react-native-web's, not a
+ *     decision any control made. Any other stopped key was consumed on purpose
+ *     (an inner popup) and is left alone. A control inside a text field that
+ *     wants to KEEP Escape calls `preventDefault()` — the tag field and the
+ *     composer already do.
+ */
+import { hasOpenFloatingSurface } from '../floating/escape-stack';
+
+const FOCUSABLE = 'button, a[href], input, select, textarea, [tabindex]';
+
+function hasDom(): boolean {
+  return typeof window !== 'undefined' && typeof document !== 'undefined';
+}
+
+function visible(element: HTMLElement): boolean {
+  for (let current: HTMLElement | null = element; current; current = current.parentElement) {
+    const style = getComputedStyle(current);
+    if (style.display === 'none' || style.visibility === 'hidden') return false;
+  }
+  return true;
+}
+
+/** The elements inside `node` that Tab can land on, in document order. */
+export function tabbablesWithin(node: HTMLElement | null): HTMLElement[] {
+  if (!node) return [];
+  return Array.from(node.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(
+    (element) =>
+      element.tabIndex >= 0 &&
+      !element.matches(':disabled, [aria-disabled="true"]') &&
+      !element.closest('[hidden], [aria-hidden="true"], [inert]') &&
+      visible(element),
+  );
+}
+
+/**
+ * Keep Tab inside `node`: from the last tabbable (or from outside) forward to
+ * the first, from the first (or from outside) backward to the last. Returns
+ * whether it moved focus.
+ */
+export function wrapTab(event: KeyboardEvent, node: HTMLElement | null): boolean {
+  if (event.key !== 'Tab' || !node) return false;
+  const items = tabbablesWithin(node);
+  const first = items[0];
+  const last = items[items.length - 1];
+  const active = document.activeElement;
+  const outside = !node.contains(active);
+  if (event.shiftKey ? outside || active === first : outside || active === last) {
+    event.preventDefault();
+    (event.shiftKey ? last : first)?.focus();
+    return true;
+  }
+  return false;
+}
+
+function isTextEntry(target: EventTarget | null): boolean {
+  if (!target || typeof (target as Element).closest !== 'function') return false;
+  const element = target as HTMLElement;
+  if (element.isContentEditable) return true;
+  if (element.tagName === 'TEXTAREA') return true;
+  if (element.tagName !== 'INPUT') return false;
+  const type = (element as HTMLInputElement).type;
+  return !['button', 'checkbox', 'radio', 'range', 'submit', 'reset', 'file', 'color', 'image'].includes(type);
+}
+
+/**
+ * Dismiss on Escape — see the file comment for the three steps. `claim` runs
+ * in the capture phase and says whether this surface is the one the key is
+ * for (the top-most, nothing anchored open above it). An open anchored
+ * surface (a menu, a select's list) always keeps the key: it is the top layer
+ * whatever the caller's own bookkeeping says.
+ */
+export function listenForEscape(claim: () => boolean, dismiss: () => void): () => void {
+  if (!hasDom()) return () => undefined;
+  let pending: KeyboardEvent | null = null;
+  const timers = new Set<ReturnType<typeof setTimeout>>();
+
+  const onCapture = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape' || event.isComposing || event.defaultPrevented) return;
+    if (hasOpenFloatingSurface() || !claim()) return;
+    pending = event;
+    const timer = setTimeout(() => {
+      timers.delete(timer);
+      if (pending !== event) return;
+      pending = null;
+      if (!event.defaultPrevented && isTextEntry(event.target)) dismiss();
+    }, 0);
+    timers.add(timer);
+  };
+  const onBubble = (event: KeyboardEvent) => {
+    if (pending !== event) return;
+    pending = null;
+    if (event.defaultPrevented) return;
+    event.preventDefault();
+    dismiss();
+  };
+
+  window.addEventListener('keydown', onCapture, true);
+  window.addEventListener('keydown', onBubble);
+  return () => {
+    window.removeEventListener('keydown', onCapture, true);
+    window.removeEventListener('keydown', onBubble);
+    for (const timer of timers) clearTimeout(timer);
+    timers.clear();
+    pending = null;
+  };
+}

package/src/overlay/stack.ts

@@ -169,3 +169,16 @@ export function resetOverlayStack(): void {
 export function hasActiveOverlays(): boolean {
   return registry().live.size > 0;
 }
+
+/**
+ * Whether the surface painting at `layer` is the top-most one open — the one
+ * Escape and Tab belong to. A menu opened from inside a dialog takes a higher
+ * rank than the dialog, so the dialog stands aside until it closes.
+ */
+export function isTopmostOverlayLayer(layer: OverlayLayer): boolean {
+  const { live } = registry();
+  if (live.size === 0) return false;
+  let top = 0;
+  for (const rank of live) if (rank > top) top = rank;
+  return layerForRank(top).root === layer.root;
+}

package/src/sidebar/Sidebar.tsx

@@ -254,11 +254,15 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     };
   }, [progress, expandedWidth, fluid, collapsedWidth, expandedPadding, collapsedPadding]);
   const [contentHeight, setContentHeight] = useState(0);
+  // A worklet copies what it reads to the UI runtime, and `tree` carries the
+  // app's rows, elements and data — a `Date` among them crashes native on the
+  // copy. The mapper reads only whether there is one (`worklet-captures.test.ts`).
+  const treeShown = Boolean(tree);
   const contentMorph = useAnimatedStyle(() => ({
     height: contentHeight > 0 ? contentHeight * (1 - progress.value) : collapsed ? 0 : undefined,
     opacity: 1 - progress.value,
-    marginTop: tree ? 0 : 24 * (1 - progress.value),
-  }), [contentHeight, collapsed, progress, tree]);
+    marginTop: treeShown ? 0 : 24 * (1 - progress.value),
+  }), [contentHeight, collapsed, progress, treeShown]);
   const contentWidth = useAnimatedStyle(() => ({ width: expandedWidth.value - expandedPadding * 2 }), [expandedWidth, expandedPadding]);
   const navInset = useAnimatedStyle(() => {
     const inset = expandedInset * (1 - progress.value);
@@ -412,6 +416,10 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   const plain = surface === 'plain';
   const flatMobile = mobile && plain;
   const searchRing = `inset 0 0 0 2px ${palette.searchRing}`;
+  // The glyph-only header buttons: the web ring rule paints
+  // `var(--bloom-sidebar-ring)`, which resolves to nothing — no ring at all —
+  // on a node that does not set it.
+  const iconButtonRing = { borderRadius: 6, '--bloom-sidebar-ring': palette.ring } as WebCssStyle;
   const placeholder = searchPlaceholder ?? (flatMobile ? 'Search...' : 'Search navigation…');
 
   const toggleCollapse = () => {
@@ -442,7 +450,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
         role="button"
         accessibilityLabel={searchButtonLabel}
         onPress={activateSearch}
-        style={{ width: 20, height: 20, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}
+        style={[{ width: 20, height: 20, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }, iconButtonRing]}
       >
         <RiSearchLine width={20} height={20} fill={palette.textSecondary} />
       </Pressable>
@@ -466,6 +474,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
       role="button"
       accessibilityLabel={closeLabel}
       onPress={onClose}
+      style={iconButtonRing}
       testID="sidebar-close"
     >
       <RiCloseLine width={20} height={20} fill={palette.textSecondary} />
@@ -477,7 +486,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
       accessibilityLabel={collapsed ? expandLabel : collapseLabel}
       aria-expanded={!collapsed}
       onPress={toggleCollapse}
-      style={{ width: '100%', alignItems: 'center', justifyContent: 'center' }}
+      style={[{ width: '100%', alignItems: 'center', justifyContent: 'center' }, iconButtonRing]}
       testID="sidebar-collapse"
     >
       <Animated.View style={sideBarIconStyle}>