@12-apps/ui 6.39.9 → 6.39.10

package/src/components/layout/SettingsLayout/SettingsSectionChips.scroll.ts

@@ -0,0 +1,180 @@
+/**
+ * Telling the strip's own scrolls from the visitor's (FUT-2606).
+ *
+ * Split from `SettingsSectionChips.tsx` so the chips stay a component file and
+ * the rule for "who moved the strip" can be read in one place.
+ */
+
+/**
+ * How near to where the strip aimed itself it has to come to rest for the scroll
+ * to count as the strip's own. A smooth scroll lands on a device pixel, and the
+ * target it was given is fractional.
+ */
+const LANDED_SLACK = 1;
+
+/**
+ * Where `scrollend` is missing: how long the strip has to go without a `scroll`
+ * before it counts as settled. Generous on purpose — a busy main thread can go
+ * several frames between ticks of a smooth scroll, and judging one mid-flight
+ * would read the strip's own animation as the visitor's. Too long only delays a
+ * re-centre; too short can latch the strip for good.
+ */
+const QUIET_BEFORE_SETTLED_MS = 250;
+
+interface VisitorScrollWatch {
+  /** True once the visitor has moved the strip themselves. */
+  hasScrolled: () => boolean;
+  /**
+   * True while a scroll the visitor MAY be making has not come to rest yet. The
+   * strip must not scroll itself under it: that would yank a drag in progress.
+   */
+  isUndecided: () => boolean;
+  /** Where the strip last aimed itself, in its own pixels; `NaN` before it has. */
+  aimedAt: () => number;
+  /**
+   * The strip is about to scroll itself to `left`. Records the aim and NOTHING
+   * else: it used to disarm too, and a re-centre landing between a visitor's key
+   * press (or wheel, or pan) and the first tick of the scroll it causes wiped
+   * the arming — their scroll went unclaimed, read as the strip's own. Left
+   * armed, the worst a stale arming does is put the strip's OWN next scroll
+   * under judgement, which rests on its aim, is not latched, and disarms.
+   */
+  beforeOwnScroll: (left: number) => void;
+  /** Called once an undecided scroll has come to rest and been judged. */
+  onSettled: (listener: () => void) => void;
+  detach: () => void;
+}
+
+type Listeners = Array<[string, (event: Event) => void]>;
+
+/** A wheel's sideways travel: `deltaX`, or `deltaY` with Shift held, as browsers read it. */
+function horizontalDelta(event: Event): number {
+  if (!(event instanceof WheelEvent)) return 0;
+  return event.deltaX !== 0 ? event.deltaX : event.shiftKey ? event.deltaY : 0;
+}
+
+interface WatchState {
+  pointer: boolean;
+  touch: boolean;
+  nudged: boolean;
+  undecided: boolean;
+  scrolled: boolean;
+  aimed: number;
+  quiet: ReturnType<typeof setTimeout> | undefined;
+  settled: () => void;
+}
+
+/** Whether the strip came to rest where it last aimed itself — clamped as the browser would. */
+function restsOnAim(strip: HTMLElement, aimed: number): boolean {
+  const reachable = Math.min(aimed, strip.scrollWidth - strip.clientWidth);
+  // Written so that `NaN` — the strip never aimed — reads as "not on aim".
+  return Math.abs(strip.scrollLeft - reachable) <= LANDED_SLACK;
+}
+
+/**
+ * Tell a scroll the VISITOR made from every other one.
+ *
+ * The `scroll` event cannot say: the strip's own `scrollTo` fires it, and so does
+ * the browser clamping a strip whose content shrank. So a scroll is only a
+ * CANDIDATE when it arrives during something only a visitor does:
+ *
+ * - a finger held on the strip (`touchstart` until `touchend`) — a drag;
+ * - a pointer held on it (`pointerdown` until `pointerup`);
+ * - a key press, a SIDEWAYS wheel, or the browser taking a pointer over to pan
+ *   it (`pointercancel`), each armed until the next scroll under judgement has
+ *   been judged — whoever's it turns out to be.
+ *
+ * and the verdict waits until the strip comes to REST (`scrollend`, or a quiet
+ * spell where the browser has no `scrollend`): it is the visitor's only if the
+ * strip rests somewhere other than where it last aimed itself.
+ *
+ * Judged at rest rather than per `scroll` because the strip's own smooth scroll
+ * fires `scroll` for a third of a second, and a visitor who presses Tab or puts
+ * a finger on a chip to scroll the PAGE in that window is not scrolling the
+ * strip. Every tick of that animation used to count as theirs, the strip stopped
+ * re-centring for good, and the open chip could be left clipped (FUT-2606
+ * again, by another door). A visitor who really drags or wheels the strip
+ * mid-animation cancels it, so the strip rests where THEY left it — and that
+ * still counts. The one loss: a visitor who happens to leave it within a pixel
+ * of the strip's own aim is not told apart from it, and the strip there is
+ * already where it would have put itself.
+ *
+ * A tap is a pointer held with no scroll under it, so it never counts. A
+ * vertical wheel scrolls the PAGE — the strip is `overflowY: hidden` — and is
+ * not armed at all.
+ */
+export function watchVisitorScroll(strip: HTMLElement): VisitorScrollWatch {
+  const view = strip.ownerDocument.defaultView;
+  const hasScrollEnd = 'onscrollend' in strip;
+  const state: WatchState = {
+    pointer: false,
+    touch: false,
+    nudged: false,
+    undecided: false,
+    scrolled: false,
+    aimed: Number.NaN,
+    quiet: undefined,
+    settled: () => undefined,
+  };
+  const set =
+    (key: 'pointer' | 'touch' | 'nudged', value: boolean) =>
+    (): void => {
+      state[key] = value;
+    };
+  const settle = (): void => {
+    // Only a scroll that was UNDER JUDGEMENT disarms. Chromium can end the
+    // strip's own smooth scroll with a `scrollend` when another scroll cuts it
+    // off, fired BEFORE that scroll's first `scroll` (seen with an instant one);
+    // disarming there would hand the visitor's scroll to nobody.
+    if (!state.undecided) return;
+    state.undecided = false;
+    state.nudged = false;
+    if (!restsOnAim(strip, state.aimed)) state.scrolled = true;
+    state.settled();
+  };
+  const onWheel = (event: Event): void => {
+    if (horizontalDelta(event) !== 0) state.nudged = true;
+  };
+  const onScroll = (): void => {
+    if (state.pointer || state.touch || state.nudged) state.undecided = true;
+    if (!state.undecided || hasScrollEnd) return;
+    // Every tick while undecided, armed or not: a quiet spell that began while
+    // the strip was still moving would judge it mid-flight, away from its aim.
+    clearTimeout(state.quiet);
+    state.quiet = setTimeout(settle, QUIET_BEFORE_SETTLED_MS);
+  };
+  const onStrip: Listeners = [
+    ['pointerdown', set('pointer', true)],
+    ['touchstart', set('touch', true)],
+    ['pointercancel', set('nudged', true)],
+    ['keydown', set('nudged', true)],
+    ['wheel', onWheel],
+    ['scroll', onScroll],
+    ['scrollend', settle],
+  ];
+  // A gesture can END off the strip, so its end is heard on the window.
+  const onView: Listeners = [
+    ['pointerup', set('pointer', false)],
+    ['pointercancel', set('pointer', false)],
+    ['touchend', set('touch', false)],
+    ['touchcancel', set('touch', false)],
+  ];
+  for (const [type, listener] of onStrip) strip.addEventListener(type, listener, { passive: true });
+  for (const [type, listener] of onView) view?.addEventListener(type, listener, { passive: true });
+  return {
+    hasScrolled: () => state.scrolled,
+    isUndecided: () => state.undecided,
+    aimedAt: () => state.aimed,
+    beforeOwnScroll: (left) => {
+      state.aimed = left;
+    },
+    onSettled: (listener) => {
+      state.settled = listener;
+    },
+    detach: () => {
+      clearTimeout(state.quiet);
+      for (const [type, listener] of onStrip) strip.removeEventListener(type, listener);
+      for (const [type, listener] of onView) view?.removeEventListener(type, listener);
+    },
+  };
+}

package/src/components/layout/SettingsLayout/SettingsSectionChips.tsx

@@ -4,6 +4,7 @@ import Box from '@mui/material/Box/index.js';
 import { alpha, useTheme, type Theme } from '@mui/material/styles/index.js';
 import React, { useEffect, useRef, type RefObject } from 'react';
 
+import { watchVisitorScroll } from './SettingsSectionChips.scroll';
 import { SettingsStatusMarker } from './SettingsStatusMarker';
 import { TOUCH_TARGET } from './SettingsLayout.styles';
 import { rem, sxRem } from '../../../tokens/relative';
@@ -37,7 +38,38 @@ function prefersReducedMotion(): boolean {
 }
 
 /**
- * Keep the open section's chip in view, however the visitor got here.
+ * Where the strip has to scroll for `chip`'s centre to sit on its own, clamped
+ * to what the strip can scroll.
+ *
+ * Measured from the two boxes rather than from `chip.offsetLeft`. `offsetLeft`
+ * counts from the nearest POSITIONED ancestor, and the strip is not one — nor
+ * are the panel and layout around it — so it counted from whatever box the host
+ * happened to position, and every target overshot by the strip's offset inside
+ * it. The clamp hid that for the last chip; a middle one was simply off-centre.
+ * The boxes are both in viewport coordinates, so their difference is the strip's
+ * own, whatever the host wraps it in.
+ */
+function centredScrollLeft(strip: HTMLElement, chip: HTMLElement): number {
+  const chipBox = chip.getBoundingClientRect();
+  const visibleStart = strip.getBoundingClientRect().left + strip.clientLeft;
+  const chipCentre = chipBox.left - visibleStart + strip.scrollLeft + chipBox.width / 2;
+  const target = chipCentre - strip.clientWidth / 2;
+  return Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));
+}
+
+/** The chip for `id`, walked rather than selected. */
+function findChip(strip: HTMLElement, id: string): HTMLElement | undefined {
+  // An id is host data, and a section id carrying a quote would turn a selector
+  // string into a thrown SyntaxError — which here would take the whole strip
+  // down to centre one chip.
+  return Array.from(strip.children).find(
+    (node): node is HTMLElement => node instanceof HTMLElement && node.dataset.chipId === id,
+  );
+}
+
+/**
+ * Keep the open section's chip in view, however the visitor got here — and
+ * however the strip's content settles after it mounted.
  *
  * Keyed on `activeItemId` in an effect rather than done in a click handler:
  * arriving by the desktop rail, by a card, by a pasted link and by the browser's
@@ -46,9 +78,22 @@ function prefersReducedMotion(): boolean {
  * the active chip off the right edge on any list longer than a screen — the
  * visitor is told where they are by an element they cannot see.
  *
+ * Centring ONCE is not enough (FUT-2606). A host can widen a chip after mount
+ * with the ids unchanged — a status marker whose read resolves late, a web font
+ * arriving — and a strip that fitted at mount then overflows with its last chip
+ * clipped, because the one centring saw nothing to scroll. So the strip and
+ * every chip are watched with a `ResizeObserver`, and a resize re-aims at the
+ * active chip when its target has moved.
+ *
+ * Never against the visitor, though: once they have scrolled the strip
+ * themselves, it is theirs until the open section changes
+ * ({@link watchVisitorScroll}, which also says why the strip's OWN smooth scroll
+ * never counts as theirs). A strip that yanks back mid-drag because a
+ * marker loaded is worse than one that does not centre.
+ *
  * `itemsKey` rather than `items`: a host almost always rebuilds that array per
  * render (`groups.flatMap(...)`), and depending on it would re-run this on every
- * render and yank the strip back mid-drag.
+ * render and reset the visitor's latch with it.
  *
  * The key joins on NUL — as the ESCAPE `'\u0000'`, which it must stay. A
  * literal NUL byte works identically at runtime and makes git classify this file
@@ -63,25 +108,38 @@ function useCentreActiveChip(
 ): void {
   useEffect(() => {
     const strip = stripRef.current;
-    if (!strip || !activeItemId) return;
-    // Walked rather than selected: an id is host data, and a section id carrying
-    // a quote would turn a selector string into a thrown SyntaxError — which
-    // here would take the whole strip down to centre one chip.
-    const chip = Array.from(strip.children).find(
-      (node): node is HTMLElement =>
-        node instanceof HTMLElement && node.dataset.chipId === activeItemId,
-    );
-    if (!chip) return;
+    if (!strip || !activeItemId) return undefined;
     // Feature-checked, not assumed. `Element.scrollTo` is absent in jsdom and in
     // a few embedded webviews, and an unguarded call there THROWS out of an
     // effect — which React escalates to the nearest error boundary. The whole
     // settings area would go down to centre one chip, and the host's own tests
     // could not render the shell at all. Same reasoning as walking the children
     // instead of building a selector: nothing in here is worth a crash.
-    if (typeof strip.scrollTo !== 'function') return;
-    const target = chip.offsetLeft + chip.offsetWidth / 2 - strip.clientWidth / 2;
-    const left = Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));
-    strip.scrollTo({ left, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    if (typeof strip.scrollTo !== 'function') return undefined;
+    const visitor = watchVisitorScroll(strip);
+    const centre = (): void => {
+      const chip = findChip(strip, activeItemId);
+      // Not while a scroll that may be the visitor's is still moving: a resize
+      // mid-drag must not yank the strip. It is re-tried once that scroll rests.
+      if (!chip || visitor.hasScrolled() || visitor.isUndecided()) return;
+      const left = centredScrollLeft(strip, chip);
+      // Only when the target MOVED: a resize that leaves it where it was must not
+      // restart a smooth scroll that is already on its way there. The aim is a
+      // runtime-computed scroll offset, like the exempt `left` below — not a size.
+      if (Math.abs(left - visitor.aimedAt()) < 0.5) return;
+      visitor.beforeOwnScroll(left);
+      strip.scrollTo({ left, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+    };
+    visitor.onSettled(centre);
+    centre();
+    // Also feature-checked: without it the strip still centres once, as before.
+    const resizes = typeof ResizeObserver === 'function' ? new ResizeObserver(centre) : undefined;
+    resizes?.observe(strip);
+    for (const child of Array.from(strip.children)) resizes?.observe(child);
+    return () => {
+      resizes?.disconnect();
+      visitor.detach();
+    };
   }, [stripRef, activeItemId, itemsKey]);
 }
 

package/dist/chunk-XWZJLXJT.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsSectionChips.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport { alpha, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React, { useEffect, useRef, type RefObject } from 'react';\n\nimport { SettingsStatusMarker } from './SettingsStatusMarker';\nimport { TOUCH_TARGET } from './SettingsLayout.styles';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n/**\n * The chip's drawn height, against `TOUCH_TARGET`'s 44 for the tappable one.\n *\n * The strip sits between a section's header and its first field on the width\n * with the least room for either, so the pill is sized to its text rather than\n * to the thumb — and the thumb is served by the hit area instead.\n */\nconst CHIP_HEIGHT = sxRem(34);\nimport type { SettingsLayoutProps, SettingsNavItem } from './SettingsLayout.types';\n\nexport interface SettingsSectionChipsProps {\n  /** The sibling sections to offer — usually the open item's own group. */\n  items: SettingsNavItem[];\n  /** Which one is open. */\n  activeItemId?: string;\n  /** Accessible name of the strip, in the host's language. */\n  ariaLabel: string;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}\n\n/** True when the visitor asked the OS for less movement. Re-read per scroll. */\nfunction prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Keep the open section's chip in view, however the visitor got here.\n *\n * Keyed on `activeItemId` in an effect rather than done in a click handler:\n * arriving by the desktop rail, by a card, by a pasted link and by the browser's\n * back button all have to land the same way, and only one of those is a click on\n * a chip. Every re-render otherwise starts the strip at scroll 0, which parks\n * the active chip off the right edge on any list longer than a screen — the\n * visitor is told where they are by an element they cannot see.\n *\n * `itemsKey` rather than `items`: a host almost always rebuilds that array per\n * render (`groups.flatMap(...)`), and depending on it would re-run this on every\n * render and yank the strip back mid-drag.\n *\n * The key joins on NUL — as the ESCAPE `'\\u0000'`, which it must stay. A\n * literal NUL byte works identically at runtime and makes git classify this file\n * as BINARY: `git diff` prints \"Binary file not shown\" and the GitHub review UI\n * shows nothing at all. This file shipped that way once, and the cost was not\n * the byte — it was a whole change nobody could read.\n */\nfunction useCentreActiveChip(\n  stripRef: RefObject<HTMLDivElement | null>,\n  activeItemId: string | undefined,\n  itemsKey: string,\n): void {\n  useEffect(() => {\n    const strip = stripRef.current;\n    if (!strip || !activeItemId) return;\n    // Walked rather than selected: an id is host data, and a section id carrying\n    // a quote would turn a selector string into a thrown SyntaxError — which\n    // here would take the whole strip down to centre one chip.\n    const chip = Array.from(strip.children).find(\n      (node): node is HTMLElement =>\n        node instanceof HTMLElement && node.dataset.chipId === activeItemId,\n    );\n    if (!chip) return;\n    // Feature-checked, not assumed. `Element.scrollTo` is absent in jsdom and in\n    // a few embedded webviews, and an unguarded call there THROWS out of an\n    // effect — which React escalates to the nearest error boundary. The whole\n    // settings area would go down to centre one chip, and the host's own tests\n    // could not render the shell at all. Same reasoning as walking the children\n    // instead of building a selector: nothing in here is worth a crash.\n    if (typeof strip.scrollTo !== 'function') return;\n    const target = chip.offsetLeft + chip.offsetWidth / 2 - strip.clientWidth / 2;\n    const left = Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));\n    strip.scrollTo({ left, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });\n  }, [stripRef, activeItemId, itemsKey]);\n}\n\n/** One chip: a link when the host gave it a target, else a button. */\nfunction SectionChip({\n  item,\n  active,\n  theme,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: {\n  item: SettingsNavItem;\n  active: boolean;\n  theme: Theme;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const asLink = item.href !== undefined && linkComponent !== undefined;\n  const behaviour = asLink\n    ? { component: linkComponent, href: item.href }\n    : { component: 'button' as const, type: 'button' as const, onClick: () => onSelectItem?.(item.id) };\n\n  return (\n    <Box\n      {...behaviour}\n      data-chip-id={item.id}\n      data-testid={`${testIdPrefix}-chip-${item.id}`}\n      aria-current={active ? 'page' : undefined}\n      sx={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: 0.75,\n        flex: '0 0 auto',\n        position: 'relative',\n        // The chip LOOKS this tall; it is still tapped at `TOUCH_TARGET`.\n        //\n        // Shrinking `minHeight` alone would have bought a slimmer strip with a\n        // smaller hit area — on the one width where the strip IS the navigation\n        // and the input is a thumb. The `::after` below keeps the tappable\n        // region at the full target while the pill itself takes less room, so\n        // this is a visual change and not an accessibility trade.\n        minHeight: CHIP_HEIGHT,\n        px: 1.5,\n        borderRadius: 999,\n        cursor: 'pointer',\n        font: 'inherit',\n        fontSize: rem(theme, 13),\n        fontWeight: active ? 700 : 500,\n        textDecoration: 'none',\n        whiteSpace: 'nowrap',\n        color: active ? 'primary.main' : 'text.secondary',\n        bgcolor: active ? alpha(theme.palette.primary.main, 0.12) : 'transparent',\n        border: `1px solid ${active ? alpha(theme.palette.primary.main, 0.4) : theme.palette.divider}`,\n        // Spans the chip's width only, so neighbours never overlap: the strip\n        // is a row, and the extra reach is vertical.\n        '&::after': {\n          content: '\"\"',\n          position: 'absolute',\n          insetInlineStart: 0,\n          insetInlineEnd: 0,\n          top: '50%',\n          transform: 'translateY(-50%)',\n          height: rem(theme, TOUCH_TARGET),\n        },\n      }}\n    >\n      {item.status ? (\n        <SettingsStatusMarker\n          status={item.status}\n          label={item.statusLabel}\n          testId={`${testIdPrefix}-chip-status-${item.id}`}\n        />\n      ) : null}\n      {item.label}\n    </Box>\n  );\n}\n\n/**\n * The narrow-width section strip: horizontally scrollable chips for the sections\n * beside the open one.\n *\n * It clips its own overflow — `overflow-x: auto` on the strip, never on an\n * ancestor. A strip that pushes the page wide makes every OTHER screen at that\n * width scroll sideways too, and the cause is nowhere near the symptom.\n */\nexport function SettingsSectionChips({\n  items,\n  activeItemId,\n  ariaLabel,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: SettingsSectionChipsProps): React.JSX.Element {\n  const theme = useTheme();\n  const stripRef = useRef<HTMLDivElement | null>(null);\n  useCentreActiveChip(stripRef, activeItemId, items.map((item) => item.id).join('\\u0000'));\n\n  return (\n    <Box\n      ref={stripRef}\n      component=\"nav\"\n      aria-label={ariaLabel}\n      data-testid={`${testIdPrefix}-chips`}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 0.75,\n        px: 0.25,\n        py: 0.25,\n        overflowX: 'auto',\n        overflowY: 'hidden',\n        scrollbarWidth: 'none',\n        '&::-webkit-scrollbar': { display: 'none' },\n      }}\n    >\n      {items.map((item) => (\n        <SectionChip\n          key={item.id}\n          item={item}\n          active={item.id === activeItemId}\n          theme={theme}\n          linkComponent={linkComponent}\n          onSelectItem={onSelectItem}\n          testIdPrefix={testIdPrefix}\n        />\n      ))}\n    </Box>\n  );\n}\n\nSettingsSectionChips.displayName = 'SettingsSectionChips';\n"],"mappings":"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","names":[]}