@oxy.so/bloom 4.22.2 → 4.24.0

package/src/hooks/use-textarea-autosize.ts

@@ -0,0 +1,106 @@
+import { useLayoutEffect, useRef, type RefObject } from 'react';
+import type { TextInput } from 'react-native';
+
+/**
+ * The web half of a composer's autosize: how tall its draft is, measured from
+ * the `<textarea>` react-native-web renders. Native reads
+ * `onContentSizeChange` and never calls this.
+ *
+ * `scrollHeight` never falls below the height already applied, so it reports
+ * growth exactly but cannot report shrinking. The old measurement collapsed the
+ * live field to `0px` before EVERY read and restored it after — and a
+ * collapsed field is a different page: each keystroke paid for laying the
+ * whole document out three times (collapse, read, restore), 23–27 ms a key
+ * beside a 1,000-message conversation, against 6–8 ms without the collapse.
+ *
+ * So the field is collapsed only when the draft could have got SHORTER:
+ *
+ *   - an edit that only INSERTED characters (typing, pasting, an IME
+ *     committing) cannot remove a line, so `scrollHeight` is read as it
+ *     stands: one layout, the same one the frame was going to do anyway.
+ *   - a field already at its floor cannot shrink, so it is never collapsed.
+ *   - anything else — a deletion, a replacement, a programmatic `value` such as
+ *     the clear after send, a change of floor — collapses, reads and restores
+ *     in the same task, so nothing is painted in between.
+ *
+ * The one thing insertion cannot promise is soft-wrap: inserting a character
+ * could in principle reflow a wrapped word onto fewer lines. The field then
+ * keeps one line too many until the next edit that deletes, which is the
+ * failure the old measurement would have fixed a keystroke earlier — not a
+ * clipped draft.
+ */
+export interface TextareaAutosizeOptions {
+  /** Measure at all — `IS_WEB`. Native measures through `onContentSizeChange`. */
+  enabled: boolean;
+  /** The height the field has now, as last applied by the caller. */
+  height: number;
+  /** The smallest height the field is drawn at; a field there cannot shrink. */
+  minHeight: number;
+  /** Receives the draft's content height, in px, whenever it is measured. */
+  onMeasure: (contentHeight: number) => void;
+}
+
+/** The DOM surface this reads and writes — `HTMLTextAreaElement`, narrowed. */
+export interface AutosizeNode {
+  style: { height: string };
+  scrollHeight: number;
+}
+
+/**
+ * Whether `next` is `previous` with characters only INSERTED — at one place,
+ * nothing removed or replaced. A common prefix plus a common suffix that
+ * together cover all of `previous` means every old character survived.
+ */
+export function isPureInsertion(previous: string, next: string): boolean {
+  const length = previous.length;
+  if (next.length < length) return false;
+  let prefix = 0;
+  while (prefix < length && previous.charCodeAt(prefix) === next.charCodeAt(prefix)) prefix++;
+  if (prefix === length) return true;
+  let suffix = 0;
+  while (
+    suffix < length - prefix &&
+    previous.charCodeAt(length - 1 - suffix) === next.charCodeAt(next.length - 1 - suffix)
+  ) {
+    suffix++;
+  }
+  return prefix + suffix >= length;
+}
+
+/**
+ * The content height of `node`. With `collapse` it zeroes the height first so
+ * `scrollHeight` can report LESS than the field's current height, and puts the
+ * height back before returning.
+ */
+export function measureTextarea(node: AutosizeNode, collapse: boolean): number {
+  if (!collapse) return node.scrollHeight;
+  const previous = node.style.height;
+  node.style.height = '0px';
+  const measured = node.scrollHeight;
+  node.style.height = previous;
+  return measured;
+}
+
+export function useTextareaAutosize(
+  ref: RefObject<TextInput | null>,
+  text: string,
+  { enabled, height, minHeight, onMeasure }: TextareaAutosizeOptions,
+): void {
+  // What the field held at the last measurement, and the floor it was held to.
+  const last = useRef<{ text: string; minHeight: number } | null>(null);
+  const latest = useRef({ height, onMeasure });
+  latest.current = { height, onMeasure };
+
+  useLayoutEffect(() => {
+    if (!enabled) return;
+    const node = ref.current as unknown as AutosizeNode | null;
+    if (!node?.style || typeof node.scrollHeight !== 'number') return;
+    const previous = last.current;
+    last.current = { text, minHeight };
+    const onlyGrew =
+      previous !== null && previous.minHeight === minHeight && isPureInsertion(previous.text, text);
+    const collapse = !onlyGrew && latest.current.height > minHeight;
+    const measured = measureTextarea(node, collapse);
+    if (measured > 0) latest.current.onMeasure(measured);
+  }, [enabled, ref, text, minHeight]);
+}

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

@@ -412,6 +412,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 +446,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 +470,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 +482,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}>