@astryxdesign/core 0.7.5 → 0.7.6-canary.5cd7a15

package/src/gestures/touchActionRule.ts

@@ -0,0 +1,157 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file touchActionRule.ts
+ * @input An element and the touch-action its recognizers derive
+ * @output Exports markTouchAction and unmarkTouchAction: the element carries
+ *   the derived value in TOUCH_ACTION_ATTRIBUTE, and its document or shadow
+ *   root holds one zero-specificity rule per value in the first cascade
+ *   layer (`reset`), so any author rule, in any layer or none, or inline
+ *   value outranks the host's (`spec:AST-094` FR18, DEC-8); a root's rules
+ *   go with its last marked element (FR24)
+ * @position The gesture host's touch-action writer (GestureHost.ts)
+ *
+ * The mark is set as a recognizer attaches, so a subtree that mounts with
+ * it is styled once with its touch-action: a value written after that first
+ * styling restyles every descendant (each one's effective touch-action
+ * changes). Until the host reads the element's own value, the value in
+ * force is the author's where the author sets one, and the derived value
+ * elsewhere: never wider than the author's.
+ *
+ * SYNC: When modified, update GestureHost.ts.
+ */
+
+/** The attribute that carries the host's derived touch-action. */
+export const TOUCH_ACTION_ATTRIBUTE = 'data-astryx-touch-action';
+
+/**
+ * The cascade layer the rules sit in: the first in the order every package
+ * stylesheet declares (`spec:AST-080` FR3), so an author rule in any later
+ * layer, or in none, outranks them. Unlayered, they would outrank every
+ * layered author rule.
+ */
+const RULE_LAYER = 'reset';
+
+type RuleRoot = Document | ShadowRoot;
+
+/**
+ * Per document or shadow root: the values it has a rule for, their rules'
+ * text, where that text goes (an adopted sheet, or a style element where
+ * constructable sheets are missing), and the elements marked there. The
+ * rules go with the root's last marked element (`spec:AST-094` FR24).
+ */
+const sheets = new WeakMap<
+  RuleRoot,
+  {
+    readonly values: Set<string>;
+    readonly marked: Set<Element>;
+    css: string;
+    write(css: string): void;
+    remove(): void;
+  }
+>();
+
+/** Where each marked element's rule lives, for its unmark after it leaves. */
+const markedRoots = new WeakMap<Element, RuleRoot>();
+
+function sheetOf(root: RuleRoot) {
+  let entry = sheets.get(root);
+  if (entry == null) {
+    const doc = root.nodeType === 9 ? (root as Document) : root.ownerDocument;
+    let write: ((css: string) => void) | undefined;
+    let remove: (() => void) | undefined;
+    // A constructable sheet where the engine has one; a style element only
+    // where it has none, so any other error from a sheet is not hidden.
+    const Sheet = doc?.defaultView?.CSSStyleSheet;
+    if (
+      typeof Sheet === 'function' &&
+      'replaceSync' in Sheet.prototype &&
+      'adoptedStyleSheets' in root
+    ) {
+      const sheet = new Sheet();
+      root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+      write = css => sheet.replaceSync(css);
+      remove = () => {
+        root.adoptedStyleSheets = root.adoptedStyleSheets.filter(
+          adopted => adopted !== sheet,
+        );
+      };
+    } else {
+      const style = doc?.createElement('style');
+      const parent =
+        root.nodeType === 9 ? (doc?.head ?? doc?.documentElement) : root;
+      if (style != null && parent != null) {
+        parent.append(style);
+        write = css => {
+          style.textContent = css;
+        };
+        remove = () => style.remove();
+      }
+    }
+    if (write == null || remove == null) {
+      return null;
+    }
+    entry = {values: new Set(), marked: new Set(), css: '', write, remove};
+    sheets.set(root, entry);
+  }
+  return entry;
+}
+
+/**
+ * Give `element` the derived touch-action under a rule any author rule
+ * outranks. Returns false where no rule can hold it (a detached element):
+ * the caller writes nothing until the element is in a document.
+ */
+export function markTouchAction(element: Element, value: string): boolean {
+  const root = element.getRootNode() as RuleRoot;
+  const entry =
+    element.isConnected && (root.nodeType === 9 || 'host' in root)
+      ? sheetOf(root)
+      : null;
+  if (entry == null) {
+    return false;
+  }
+  if (!entry.values.has(value)) {
+    entry.values.add(value);
+    entry.css += `:where([${TOUCH_ACTION_ATTRIBUTE}="${value}"]){touch-action:${value}}`;
+    entry.write(`@layer ${RULE_LAYER}{${entry.css}}`);
+  }
+  if (element.getAttribute(TOUCH_ACTION_ATTRIBUTE) !== value) {
+    element.setAttribute(TOUCH_ACTION_ATTRIBUTE, value);
+  }
+  const previous = markedRoots.get(element);
+  if (previous != null && previous !== root) {
+    // Moved to another root: the old one lets it go.
+    releaseMark(element, previous);
+  }
+  entry.marked.add(element);
+  markedRoots.set(element, root);
+  return true;
+}
+
+/** `root` no longer holds `element`'s mark; its last mark takes the rules. */
+function releaseMark(element: Element, root: RuleRoot): void {
+  const entry = sheets.get(root);
+  if (entry == null) {
+    return;
+  }
+  entry.marked.delete(element);
+  if (entry.marked.size === 0) {
+    entry.remove();
+    sheets.delete(root);
+  }
+}
+
+/**
+ * Remove the host's mark; the element's own touch-action stands. The last
+ * mark in a document or shadow root takes its rules with it.
+ */
+export function unmarkTouchAction(element: Element): void {
+  element.removeAttribute(TOUCH_ACTION_ATTRIBUTE);
+  const root = markedRoots.get(element);
+  if (root == null) {
+    return;
+  }
+  markedRoots.delete(element);
+  releaseMark(element, root);
+}

package/src/gestures/types.ts

@@ -46,13 +46,6 @@ export interface NativeScrollProbe {
    * lets the browser pan that axis).
    */
   canScroll(dx: number, dy: number): boolean;
-  /**
-   * How much further (px) the scroller that would move for a finger moving
-   * by (dx, dy) can scroll before it reaches its edge; 0 when none would.
-   * Lets a reader place the point where the content runs out between two
-   * samples instead of at the next one.
-   */
-  distanceToEdge?(dx: number, dy: number): number;
   /** Whether any element under the touch can scroll natively at all. */
   readonly isInsideScroller: boolean;
   /**
@@ -127,6 +120,17 @@ export interface GestureEventContext {
 export interface GestureEnvironment {
   viewportSize(): {readonly width: number; readonly height: number};
   isRtl(view: unknown): boolean;
+  /**
+   * The box of a recognizer's view in viewport coordinates, or null when it
+   * has none to measure. A screen-edge pan reads it to tell a view within
+   * its edge band from any other.
+   */
+  viewRect?(view: unknown): {
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+    readonly height: number;
+  } | null;
 }
 
 export const DEFAULT_ENVIRONMENT: GestureEnvironment = {
@@ -136,8 +140,18 @@ export const DEFAULT_ENVIRONMENT: GestureEnvironment = {
     }
     return {width: window.innerWidth, height: window.innerHeight};
   },
-  isRtl() {
-    return false;
+  isRtl(view) {
+    if (typeof window === 'undefined' || !(view instanceof Element)) {
+      return false;
+    }
+    return window.getComputedStyle(view).direction === 'rtl';
+  },
+  viewRect(view) {
+    if (typeof Element === 'undefined' || !(view instanceof Element)) {
+      return null;
+    }
+    const {left, top, width, height} = view.getBoundingClientRect();
+    return {left, top, width, height};
   },
 };
 
@@ -158,4 +172,11 @@ export interface TouchConsumer {
    * (attached above this consumer) from beginning for a touch on it.
    */
   allowsAncestorRecognizer?(recognizer: unknown): boolean;
+  /**
+   * Whether the consumer takes touches now (a disabled control does not).
+   * The host listens only while something enabled is attached
+   * (`spec:AST-094` FR24); after this changes, call `host.update(element)`.
+   * @default true
+   */
+  isEnabled?(): boolean;
 }

package/src/hooks/useAdaptivePresentation.ts

@@ -7,7 +7,10 @@
  * @input Uses React's external-store subscription over window.matchMedia
  *   and the touch presentation's compact-touch query
  * @output Resolves popover/bottom-sheet presentation policy
- * @position Internal overlay policy shared across component families
+ * @position Internal overlay policy shared across component families. A
+ *   component that also switches input modes under a finger resolves its
+ *   `presentation` with usePresentation (utils/presentation.ts), whose
+ *   surface is this one's
  */
 
 import {useCallback, useSyncExternalStore} from 'react';

package/src/hooks/useMenuHover.ts

@@ -288,6 +288,20 @@ export function useMenuHover<T extends HTMLElement = HTMLElement>(
     }
   }, [hide, menuRef]);
 
+  // A menu placed in the content can own its own list keys (NavHeadingMenu
+  // runs useListFocus over the same `menuitem`s); a key it consumed must not
+  // move focus a second time here as it bubbles out (APG menu: one item per
+  // arrow press).
+  const handleContentKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.defaultPrevented) {
+        return;
+      }
+      handleListKeyDown(event);
+    },
+    [handleListKeyDown],
+  );
+
   useEffect(() => {
     escapeHandlerRef.current = () => {
       clearTimeouts();
@@ -535,7 +549,7 @@ export function useMenuHover<T extends HTMLElement = HTMLElement>(
     contentProps: {
       onMouseEnter: handleContentMouseEnter,
       onMouseLeave: handleMouseLeave,
-      onKeyDown: handleListKeyDown,
+      onKeyDown: handleContentKeyDown,
     },
     menuRef,
     focusFirst,

package/src/i18n/generated-locales/en.generated.ts

@@ -233,6 +233,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@astryx.tabList.label': 'Tabs',
   '@astryx.table.label': 'Table',
   '@astryx.table.noData': 'No data',
+  '@astryx.table.columnResize.resizeColumn': 'Resize column {label}',
   '@astryx.table.filter.allPlaceholder': 'All',
   '@astryx.table.filter.reset': 'Reset',
   '@astryx.table.filter.apply': 'Apply',
@@ -427,6 +428,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@astryx.tableTree.expandRow': 'Expand row',
   '@astryx.tableTree.collapseAllRows': 'Collapse all rows',
   '@astryx.tableTree.expandAllRows': 'Expand all rows',
+  '@astryx.textArea.counter': '{count, number}/{limit, number}',
   '@astryx.textArea.charactersRemaining':
     '{count, number} {count, plural, one {character} other {characters}} remaining',
   '@astryx.textArea.charactersOverLimit':
@@ -449,6 +451,8 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@astryx.multiSelector.allSelected': 'All selected',
   '@astryx.multiSelector.selectionCount':
     '{count, number} of {total, number} selected',
+  '@astryx.multiSelector.selectedCount':
+    '{count, plural, one {# selected} other {# selected}}',
   '@astryx.multiSelector.createOption': 'Create "{query}"',
   '@astryx.multiSelector.optionCreated': '{label} created',
   '@astryx.multiSelector.emptySearchResults': 'No results found',

package/src/i18n/generated-locales/pseudo.generated.ts

@@ -239,6 +239,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@astryx.tabList.label': '⟦Ţàƀš⟧',
   '@astryx.table.label': '⟦Ţàƀłé⟧',
   '@astryx.table.noData': '⟦Ñó ðàţà⟧',
+  '@astryx.table.columnResize.resizeColumn': '⟦Řéšížé çółúɱñ {label}⟧',
   '@astryx.table.filter.allPlaceholder': '⟦Àłł⟧',
   '@astryx.table.filter.reset': '⟦Řéšéţ⟧',
   '@astryx.table.filter.apply': '⟦Àþþłý⟧',
@@ -436,6 +437,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@astryx.tableTree.expandRow': '⟦Éẋþàñð řóŵ⟧',
   '@astryx.tableTree.collapseAllRows': '⟦Çółłàþšé àłł řóŵš⟧',
   '@astryx.tableTree.expandAllRows': '⟦Éẋþàñð àłł řóŵš⟧',
+  '@astryx.textArea.counter': '⟦{count, number}/{limit, number}⟧',
   '@astryx.textArea.charactersRemaining':
     '⟦{count, number} {count, plural, one {character} other {characters}} řéɱàíñíñĝ⟧',
   '@astryx.textArea.charactersOverLimit':
@@ -458,6 +460,8 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@astryx.multiSelector.allSelected': '⟦Àłł šéłéçţéð⟧',
   '@astryx.multiSelector.selectionCount':
     '⟦{count, number} óƒ {total, number} šéłéçţéð⟧',
+  '@astryx.multiSelector.selectedCount':
+    '⟦{count, plural, one {# selected} other {# selected}}⟧',
   '@astryx.multiSelector.createOption': '⟦Çřéàţé "{query}"⟧',
   '@astryx.multiSelector.optionCreated': '⟦{label} çřéàţéð⟧',
   '@astryx.multiSelector.emptySearchResults': '⟦Ñó řéšúłţš ƒóúñð⟧',

package/src/motion/README.md

@@ -81,7 +81,10 @@ await handle.finished; // true if it ran to the end, false if interrupted
 - Promotion: every animation the animator creates, and every `set`, gives its
   channels a compositing layer in the same task (inline `will-change`, merged
   with the element's own), cleared 500 ms after the last motion. Mobile Safari
-  needs it to run a curve through a blocked main thread.
+  needs it to run a curve through a blocked main thread. A pseudo-element is
+  promoted through `--astryx-motion-will-change-<pseudo>` on its host; its
+  style opts in with
+  `willChange: 'var(--astryx-motion-will-change-before, auto)'`.
 - `atRest(properties)` resolves once none of them is moving, after the last
   curve ends, whoever started it.
 - `rebase({y: -shift})` moves properties at once, as a layout shift does; a
@@ -121,6 +124,13 @@ await handle.finished; // true if it ran to the end, false if interrupted
 - `animatorFor(element)` returns the one animator for an element, so code
   that animates it from several places (a swipe on x, a removal on y)
   composes in one `translate` track.
+- `createAnimator(dialog, {pseudoElement: '::backdrop'})` drives a
+  pseudo-element; with no inline style to hold it, a static filling animation
+  holds its end value until the next animation replaces it, while the
+  pseudo-element exists. A dialog's `::backdrop` is made again each time the
+  dialog opens, so a presentation `set`s its starting value right after
+  `showModal()`, in the same task (a `set` before it lands on the backdrop
+  the open replaces).
 
 ### How it stays on the compositor
 

package/src/motion/animator.test.ts

@@ -67,18 +67,23 @@ const requestFrame = (callback: () => void) => {
  * properties, so the page is modeled here).
  */
 let stylesheet: Record<string, string> = {};
+/** The stylesheet's values for a pseudo-element of the element. */
+let pseudoStylesheet: Record<string, string> = {};
 
 beforeEach(() => {
   clock = 1000;
   recorded = [];
   frameQueue = [];
   stylesheet = {};
+  pseudoStylesheet = {};
   vi.spyOn(window, 'getComputedStyle').mockImplementation(
-    element =>
+    (element, pseudo) =>
       ({
         getPropertyValue: (property: string) =>
-          (element as HTMLElement).style.getPropertyValue(property) ||
-          (stylesheet[property] ?? ''),
+          pseudo != null
+            ? (pseudoStylesheet[property] ?? '')
+            : (element as HTMLElement).style.getPropertyValue(property) ||
+              (stylesheet[property] ?? ''),
       }) as unknown as CSSStyleDeclaration,
   );
   vi.useFakeTimers();
@@ -799,6 +804,12 @@ describe('animatorFor: one animator per element', () => {
     const b = document.createElement('div');
     expect(animatorFor(a)).toBe(animatorFor(a));
     expect(animatorFor(a)).not.toBe(animatorFor(b));
+    expect(animatorFor(a, {pseudoElement: '::backdrop'})).toBe(
+      animatorFor(a, {pseudoElement: '::backdrop'}),
+    );
+    expect(animatorFor(a, {pseudoElement: '::backdrop'})).not.toBe(
+      animatorFor(a),
+    );
   });
 
   it('composes two callers’ axes in one translate track', async () => {
@@ -902,6 +913,24 @@ describe('promotion: a compositing layer while it moves', () => {
     expect(element.style.willChange).toBe('');
   });
 
+  it('promotes a pseudo-element through a custom property on its host', async () => {
+    const {animator, element} = setup({pseudoElement: '::backdrop'});
+    animator.set({opacity: 0});
+    // set() promotes a pseudo-element too.
+    expect(
+      element.style.getPropertyValue('--astryx-motion-will-change-backdrop'),
+    ).toBe('opacity');
+    animator.animate({opacity: 1}, {spring: springs.alertPresent});
+    expect(
+      element.style.getPropertyValue('--astryx-motion-will-change-backdrop'),
+    ).toBe('opacity');
+    expect(element.style.willChange).toBe('');
+    await advance(5000 + PROMOTION_LINGER_MS);
+    expect(
+      element.style.getPropertyValue('--astryx-motion-will-change-backdrop'),
+    ).toBe('');
+  });
+
   it('ends promotion on the element it leaves', () => {
     const {animator, element} = setup();
     animator.animate({x: 50}, {spring: springs.settle});
@@ -1937,6 +1966,75 @@ describe('Reduced Motion (design:reduced-motion)', () => {
     expect(element.style.translate).toBe('100px 0px');
   });
 
+  it("a pseudo-element's dip borrows its own opacity and hands it back without touching the host", async () => {
+    for (const role of [undefined, 'exit'] as const) {
+      const {animator, element} = setup({
+        reduced: true,
+        coarse: true,
+        pseudoElement: '::before',
+      });
+      element.style.opacity = '0.5'; // the host's own, untouched
+      pseudoStylesheet = {opacity: '0.3'};
+      animator.animate(
+        {x: 100},
+        {spring: springs.navigationPush},
+        role == null ? {} : {crossfadeAs: role},
+      );
+      await commitFrame(clock);
+      const [fadeLayer] = live('opacity');
+      const values = fadeLayer.keyframes.map(k => Number(k.opacity));
+      expect(Math.max(...values)).toBeCloseTo(0.3, 9);
+      await advance(fade * 2 + END_HOLD_MS + 1);
+      expect(animator.get('x')).toBe(100);
+      // The pseudo-element's stylesheet owns its opacity again; the host
+      // keeps its own.
+      expect(live('opacity')).toEqual([]);
+      expect(element.style.opacity).toBe('0.5');
+    }
+  });
+
+  it("a pseudo-element's identity hold follows a node replacement", () => {
+    const {animator, element} = setup({pseudoElement: '::backdrop'});
+    pseudoStylesheet = {opacity: '0'};
+    animator.set({opacity: 1});
+    animator.attach(null);
+    const next = document.createElement('div');
+    document.body.append(next);
+    animator.attach(next);
+    const held = live('opacity').filter(
+      animation => animation.element === next,
+    );
+    expect(held).toHaveLength(1);
+    expect(Number(held[0].keyframes.at(-1)!.opacity)).toBe(1);
+    expect(live('opacity').some(a => a.element === element)).toBe(false);
+    next.remove();
+  });
+
+  it('a pseudo-element shown over a hiding stylesheet keeps its own opacity through a move', async () => {
+    for (const role of [undefined, 'entrance'] as const) {
+      const {animator} = setup({
+        reduced: true,
+        coarse: true,
+        pseudoElement: '::backdrop',
+      });
+      pseudoStylesheet = {opacity: '0'};
+      animator.set({opacity: 1});
+      animator.animate(
+        {x: 100},
+        {spring: springs.navigationPush},
+        role == null ? {} : {crossfadeAs: role},
+      );
+      await commitFrame(clock);
+      for (let step = 0; step < 8; step++) {
+        await advance(fade / 4);
+      }
+      expect(animator.get('x')).toBe(100);
+      expect(animator.get('opacity')).toBe(1);
+      const [held] = live('opacity');
+      expect(Number(held.keyframes.at(-1)?.opacity)).toBe(1);
+    }
+  });
+
   it('a move dips: fades out, lands while transparent, fades back in', async () => {
     const {animator, element} = reduced();
     animator.animate({x: 100}, {spring: springs.navigationPush});
@@ -2555,6 +2653,56 @@ describe('decay: momentum curves (a coast)', () => {
   });
 });
 
+describe('pseudoElement: a dialog\u2019s ::backdrop', () => {
+  it('targets the pseudo-element, writes no inline style and holds the end state', async () => {
+    const {animator, element} = setup({pseudoElement: '::backdrop'});
+    animator.set({opacity: 0});
+    const [held] = live('opacity');
+    expect(held.options).toMatchObject({
+      fill: 'both',
+      pseudoElement: '::backdrop',
+    });
+    expect(held.keyframes.map(k => k.opacity)).toEqual(['0', '0']);
+    expect(element.style.opacity).toBe('');
+
+    animator.animate({opacity: 1}, {spring: springs.alertPresent});
+    // The new animation exists before the hold goes: no frame in between.
+    expect(held.cancelled).toBe(true);
+    const [fade] = live('opacity');
+    expect(fade.options).toMatchObject({
+      fill: 'both',
+      pseudoElement: '::backdrop',
+    });
+    expect(fade.keyframes[fade.keyframes.length - 1].opacity).toBe('1');
+    expect(element.style.opacity).toBe('');
+    await advance(Number(fade.options.duration) + 1000);
+    // Past the curve's end, a static animation holds the end value.
+    expect(fade.cancelled).toBe(true);
+    const [rest] = live('opacity');
+    expect(rest.options).toMatchObject({
+      fill: 'both',
+      pseudoElement: '::backdrop',
+    });
+    expect(rest.keyframes.map(k => k.opacity)).toEqual(['1', '1']);
+    expect(animator.get('opacity')).toBe(1);
+  });
+
+  it('an exit holds 0 until the next animation replaces it', async () => {
+    const {animator} = setup({
+      pseudoElement: '::backdrop',
+      initial: {opacity: 1},
+    });
+    animator.animate({opacity: 0}, {spring: springs.alertDismiss});
+    const [fade] = live('opacity');
+    await advance(Number(fade.options.duration) + 1000);
+    const [rest] = live('opacity');
+    expect(rest.keyframes.map(k => k.opacity)).toEqual(['0', '0']);
+    animator.animate({opacity: 1}, {spring: springs.alertPresent});
+    expect(rest.cancelled).toBe(true);
+    expect(live('opacity')).toHaveLength(1);
+  });
+});
+
 describe('attach', () => {
   it('keeps state without an element and resumes the curve on attach', () => {
     const animator = createAnimator(null, {