@astryxdesign/core 0.7.5 → 0.7.6-canary.0d71e8d

package/src/utils/touchPresentation.test.ts

@@ -22,6 +22,7 @@ import {
   COMPACT_TOUCH_PRESENTATION_QUERY,
   useAdaptivePresentation,
 } from '../hooks/useAdaptivePresentation';
+import {reducedMotionKeys} from '../motion/reducedMotion.stylex';
 import {DEFAULT_COMPACT_DEFINITION} from '../theme/themeAdaptations';
 import {Theme, defineTheme} from '../theme';
 import {
@@ -33,6 +34,7 @@ import {
   readTouchPresentation,
   useTouchPresentation,
 } from './touchPresentation';
+import {touchKeys} from './touchPresentation.stylex';
 
 /**
  * A device: what its primary pointer is, how big its viewport is, and
@@ -90,6 +92,32 @@ afterEach(() => {
   vi.unstubAllGlobals();
 });
 
+/**
+ * The Levenshtein distance between two strings, or more than `limit` as soon
+ * as it must exceed it: how many characters a spelling is off another.
+ */
+function editDistance(a: string, b: string, limit: number): number {
+  if (Math.abs(a.length - b.length) > limit) {
+    return limit + 1;
+  }
+  let previous = Array.from({length: b.length + 1}, (_, j) => j);
+  for (let i = 1; i <= a.length; i++) {
+    const current = [i];
+    for (let j = 1; j <= b.length; j++) {
+      current[j] = Math.min(
+        previous[j] + 1,
+        current[j - 1] + 1,
+        previous[j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1),
+      );
+    }
+    if (Math.min(...current) > limit) {
+      return limit + 1;
+    }
+    previous = current;
+  }
+  return previous[b.length];
+}
+
 describe('touch presentation', () => {
   it('keys touch on the primary pointer and compact on the width', () => {
     const {result} = renderHook(() => useTouchPresentation());
@@ -181,6 +209,116 @@ describe('touch presentation', () => {
     });
   });
 
+  it('holds the same keys the resolver defines', () => {
+    expect(touchKeys.touch).toBe(`@media ${TOUCH_QUERY}`);
+    expect(touchKeys.compact).toBe(`@media ${COMPACT_QUERY}`);
+    expect(touchKeys.compactTouch).toBe(`@media ${COMPACT_TOUCH_QUERY}`);
+    expect(touchKeys.iosSupports).toBe(`@supports ${IOS_SUPPORTS_QUERY}`);
+    expect(IOS_TOUCH_STYLE_KEYS).toEqual([
+      touchKeys.touch,
+      touchKeys.iosSupports,
+    ]);
+  });
+
+  it('keeps every touch and Reduce Motion key literal in core: no computed StyleX key', () => {
+    // An imported defineConsts at-rule key compiles to a different StyleX
+    // priority than the same literal (6000 vs 3200), which reorders the
+    // cascade; core spells the keys and matches them to the constants.
+    const root = path.resolve(__dirname, '..');
+    const computed: string[] = [];
+    const walk = (dir: string): void => {
+      for (const entry of fs.readdirSync(dir, {withFileTypes: true})) {
+        const full = path.join(dir, entry.name);
+        if (entry.isDirectory()) {
+          if (entry.name !== '__tests__' && entry.name !== 'node_modules') {
+            walk(full);
+          }
+        } else if (
+          /\.(ts|tsx)$/.test(entry.name) &&
+          !/\.test\.|\.spec\./.test(entry.name)
+        ) {
+          fs.readFileSync(full, 'utf8')
+            .split('\n')
+            .forEach((line, index) => {
+              if (
+                !/^\s*(\*|\/\/)/.test(line) &&
+                /\[(touchKeys|reducedMotionKeys)\.[a-zA-Z]+\]\s*:/.test(line)
+              ) {
+                computed.push(`${path.relative(root, full)}:${index + 1}`);
+              }
+            });
+        }
+      }
+    };
+    walk(root);
+    expect(computed).toEqual([]);
+  });
+
+  it('keeps every quoted at-rule key in core that names the pointer, the touch callout or a compact size, or that is a few characters off a reference spelling, one of the reference spellings', () => {
+    // Every quoted string that starts with `@` is read, whatever its at-rule
+    // is spelled. Two rules, so no drift depends on which character moved:
+    // - one that names the pointer or the touch callout (any word of either
+    //   query, any case), or a compact size with its breakpoint, is one of
+    //   the resolver's own spellings or a query the presentation does not
+    //   decide (a second pointer, a fine pointer, Reduce Motion split by
+    //   pointer);
+    // - one within three characters of any of those spellings, case aside,
+    //   is that spelling exactly: a capital, a digit or a typo anywhere, in
+    //   the at-rule, a feature or a value, fails.
+    const pointerKeys = new Set<string>([
+      touchKeys.touch,
+      touchKeys.compactTouch,
+      touchKeys.iosSupports,
+      '@media (any-pointer: coarse)',
+      '@media (pointer: fine)',
+      reducedMotionKeys.fade,
+      reducedMotionKeys.instant,
+    ]);
+    const references = new Set<string>([...pointerKeys, touchKeys.compact]);
+    const lowered = [...references].map(reference => reference.toLowerCase());
+    const root = path.resolve(__dirname, '..');
+    const drifted: string[] = [];
+    let pointerLiterals = 0;
+    const walk = (dir: string): void => {
+      for (const entry of fs.readdirSync(dir, {withFileTypes: true})) {
+        const full = path.join(dir, entry.name);
+        if (entry.isDirectory()) {
+          if (entry.name !== '__tests__' && entry.name !== 'node_modules') {
+            walk(full);
+          }
+        } else if (
+          /\.(ts|tsx)$/.test(entry.name) &&
+          !/\.(test|spec|stories)\./.test(entry.name)
+        ) {
+          const source = fs.readFileSync(full, 'utf8');
+          for (const match of source.matchAll(/'(@[^'\n]*)'/g)) {
+            const key = match[1];
+            if (references.has(key)) {
+              if (pointerKeys.has(key)) {
+                pointerLiterals++;
+              }
+              continue;
+            }
+            const names =
+              /pointer|coarse|fine|touch|callout/i.test(key) ||
+              (/\b(width|height)\b/i.test(key) && /\b(768|500)px\b/.test(key));
+            const lower = key.toLowerCase();
+            const isNear = lowered.some(
+              reference => editDistance(lower, reference, 3) <= 3,
+            );
+            if (names || isNear) {
+              drifted.push(`${path.relative(root, full)}: ${key}`);
+            }
+          }
+        }
+      }
+    };
+    walk(root);
+    expect(drifted).toEqual([]);
+    // Core writes the touch key as a literal in many places.
+    expect(pointerLiterals).toBeGreaterThan(50);
+  });
+
   it('keeps every iOS gate in core spelled and nested as the resolver', () => {
     // The gate is the media query outside and the supports query inside; a
     // single supports query that names the pointer never matches anywhere.
@@ -201,7 +339,8 @@ describe('touch presentation', () => {
         } else if (
           /\.(ts|tsx)$/.test(entry.name) &&
           !/\.test\.|\.spec\./.test(entry.name) &&
-          entry.name !== 'touchPresentation.ts'
+          entry.name !== 'touchPresentation.ts' &&
+          entry.name !== 'touchPresentation.stylex.ts'
         ) {
           const lines = fs.readFileSync(full, 'utf8').split('\n');
           lines.forEach((line, index) => {

package/src/utils/touchPresentation.ts

@@ -4,7 +4,8 @@
 
 /**
  * @file touchPresentation.ts
- * @input Uses the SSR-safe useMediaQuery hook and window.matchMedia
+ * @input Uses the SSR-safe useMediaQuery hook, window.matchMedia, and
+ *   TOUCH_QUERY from touchQueries.ts (which loads without React or the theme)
  * @output The one definition of when a component presents itself the touch
  *   way: TOUCH_QUERY, COMPACT_QUERY, COMPACT_TOUCH_QUERY, the iOS style gate
  *   (IOS_SUPPORTS_QUERY and its StyleX keys); the hook useTouchPresentation;
@@ -28,8 +29,8 @@
  *   drilled-in sub-menu in place of a flyout) asks for both.
  *
  * Touch behaviour is one model on every touch device, iOS and Android alike;
- * nothing here chooses a platform. Touch motion reads the theme's motion
- * roles, whose defaults are the measured table.
+ * nothing here chooses a platform. Touch motion plays the measured table,
+ * through the internal motion roles where a value is one.
  *
  * CSS first: a style that changes with these conditions writes the same
  * query as a StyleX media key, spelled exactly as here (`@media` followed by
@@ -46,9 +47,11 @@
  * test keeps core's compact-touch keys identical to COMPACT_TOUCH_QUERY and
  * every touch-callout key spelled and nested as above. The iOS style gate
  * is only for a style iOS WebKit itself requires (core's 16px input floor);
- * it never selects a behaviour. The keys are literal because the Astryx
- * StyleX build does not resolve a key shared across files through
- * `defineConsts`. The hook is for behaviour. It answers the server default
+ * it never selects a behaviour. Core spells the keys literally: an imported
+ * `defineConsts` key compiles to a different StyleX priority than the same
+ * literal, which would reorder the cascade. `touchKeys`
+ * (touchPresentation.stylex.ts, internal to core) holds the same keys, and a
+ * test keeps every literal equal to them. The hook is for behaviour. It answers the server default
  * (not touch, not compact) until hydrated unless the caller passes a server
  * hint, and follows the pointer and size when they change (a tablet docking
  * a mouse).
@@ -65,9 +68,11 @@ import {
   type CompactDefinition,
 } from '../theme/themeAdaptations';
 import {useThemeDefinition} from '../theme/useTheme';
+import {TOUCH_QUERY} from './touchQueries';
 
-/** The primary pointer is coarse: touch behaviours. */
-export const TOUCH_QUERY = '(pointer: coarse)';
+// The primary pointer is coarse: touch behaviours. Defined in touchQueries.ts,
+// which loads without React or the theme.
+export {TOUCH_QUERY};
 
 /**
  * The viewport is compact at the default width points: layout behaviours

package/src/utils/touchQueries.ts

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file touchQueries.ts
+ * @input Nothing: plain strings
+ * @output TOUCH_QUERY, the media query for a coarse primary pointer
+ * @position The dependency-free half of touchPresentation.ts, for code that
+ *   must load without React or the theme: the motion foundation, which
+ *   Node-side specs and browser proofs load without a StyleX compile.
+ *   touchPresentation.ts re-exports it beside the hook and the parts that
+ *   read the theme.
+ */
+
+/** The primary pointer is coarse: touch behaviours. */
+export const TOUCH_QUERY = '(pointer: coarse)';

package/src/utils/unicodeDigits.test.ts

@@ -0,0 +1,44 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file unicodeDigits.test.ts
+ * @input Uses vitest and the unicodeDigits helpers
+ * @output Unit tests for digit values across scripts
+ * @position Testing; validates utils/unicodeDigits.ts
+ *
+ * SYNC: When unicodeDigits.ts changes, update tests to match new behavior
+ */
+
+import {describe, expect, it} from 'vitest';
+import {INVISIBLE_CHARS, digitValue, toAsciiDigits} from './unicodeDigits';
+
+describe('digitValue', () => {
+  it.each([
+    ['7', 7],
+    ['٧', 7], // Arabic-Indic
+    ['۷', 7], // Extended Arabic-Indic
+    ['७', 7], // Devanagari
+    ['৭', 7], // Bengali
+    ['７', 7], // full-width
+  ])('reads %s as %i', (char, value) => {
+    expect(digitValue(char)).toBe(value);
+  });
+
+  it('returns null for a non-digit', () => {
+    expect(digitValue('a')).toBeNull();
+    expect(digitValue('')).toBeNull();
+  });
+});
+
+describe('toAsciiDigits', () => {
+  it('rewrites digits and leaves everything else', () => {
+    expect(toAsciiDigits('٢:٣٠ م')).toBe('2:30 م');
+    expect(toAsciiDigits('१२,३४५.६')).toBe('12,345.6');
+  });
+});
+
+describe('INVISIBLE_CHARS', () => {
+  it('strips bidi marks and zero-width characters', () => {
+    expect('\u200F١٢\u061C\uFEFF'.replace(INVISIBLE_CHARS, '')).toBe('١٢');
+  });
+});

package/src/utils/unicodeDigits.ts

@@ -0,0 +1,71 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file unicodeDigits.ts
+ * @input Text in any digit script
+ * @output Exports INVISIBLE_CHARS, digitValue, and toAsciiDigits
+ * @position Internal shared utility for the locale-aware parsers
+ *   (NumberInput/numberParser.ts, utils/timeFormat.ts); not part of the
+ *   public surface
+ *
+ * Locale-independent: a digit's value is a Unicode property, not a locale
+ * preference, so this needs no Intl and no locale.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/utils/unicodeDigits.test.ts
+ */
+
+// Built at runtime rather than written as a literal: Babel's
+// transform-unicode-property-regex rewrites a `\p{...}` regex LITERAL into an
+// enumerated character class, and the copy bundled with Next rejects the
+// General_Category short names, failing the sandbox build. Property escapes are
+// ES2018 and need no transform in any browser this package supports.
+const DECIMAL_DIGIT = new RegExp('\\p{Nd}', 'u');
+
+/**
+ * Zero-width joiners, bidi marks and isolates (which Intl writes around RTL
+ * numbers and day periods), and the BOM Excel prepends.
+ */
+export const INVISIBLE_CHARS =
+  /[\u200B-\u200D\u200E\u200F\u061C\u2066-\u2069\uFEFF]/g;
+
+/**
+ * Value of any Unicode decimal digit. Each digit script lays its ten digits
+ * out consecutively, so walking back to the script's zero derives the value
+ * for Arabic-Indic, Devanagari, full-width and the rest without shipping a
+ * table of them. Returns null for a non-digit, and in the one shape the walk
+ * cannot resolve: two digit blocks adjacent in code space (the mathematical
+ * alphanumerics).
+ */
+export function digitValue(char: string): number | null {
+  const codePoint = char.codePointAt(0);
+  if (codePoint == null || !DECIMAL_DIGIT.test(char)) {
+    return null;
+  }
+  for (let zero = codePoint; codePoint - zero < 10; zero--) {
+    if (!DECIMAL_DIGIT.test(String.fromCodePoint(zero - 1))) {
+      return codePoint - zero;
+    }
+  }
+  return null;
+}
+
+/**
+ * Rewrites every decimal digit as its ASCII digit, leaving other characters
+ * alone. Returns null when a digit's value cannot be resolved.
+ */
+export function toAsciiDigits(text: string): string | null {
+  let out = '';
+  for (const char of text) {
+    if (!DECIMAL_DIGIT.test(char)) {
+      out += char;
+      continue;
+    }
+    const value = digitValue(char);
+    if (value == null) {
+      return null;
+    }
+    out += String(value);
+  }
+  return out;
+}

package/src/utils/useFocusAcrossSwap.ts

@@ -0,0 +1,55 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useFocusAcrossSwap.ts
+ * @input An optional forwarded ref
+ * @output A callback ref that carries focus to a replacement element
+ * @position Internal hook for a component whose element type changes with a
+ *   prop (a link row that renders a plain anchor while disabled). React
+ *   replaces the element, so focus would fall to the page; spec:AST-085 FR4
+ *   keeps it on the row.
+ *
+ * The ref cleanup runs before the old node is removed, so `activeElement` is
+ * still readable there. Only a different node replacing a removed one takes
+ * focus, and only if focus has fallen to the page: React also detaches and
+ * re-attaches the same node (for example when an <Activity> boundary hides and
+ * reveals it), and neither case may pull focus back after the person has moved
+ * elsewhere.
+ */
+
+import {useCallback, useRef, type Ref} from 'react';
+import {mergeRefs} from './mergeRefs';
+
+export function useFocusAcrossSwap<T extends HTMLElement>(
+  ref?: Ref<T>,
+): (node: T | null) => (() => void) | undefined {
+  const focusedNodeRef = useRef<T | null>(null);
+  return useCallback(
+    (node: T | null) => {
+      if (node === null) {
+        return undefined;
+      }
+      const outgoing = focusedNodeRef.current;
+      focusedNodeRef.current = null;
+      const focusFell =
+        document.activeElement === null ||
+        document.activeElement === document.body;
+      if (
+        outgoing !== null &&
+        outgoing !== node &&
+        !outgoing.isConnected &&
+        focusFell
+      ) {
+        node.focus();
+      }
+      const release = mergeRefs<T>(ref)(node);
+      return () => {
+        focusedNodeRef.current = document.activeElement === node ? node : null;
+        release?.();
+      };
+    },
+    [ref],
+  );
+}