@astryxdesign/core 0.7.5 → 0.7.6-canary.00507ba

package/src/hooks/useScrollOverflow.test.tsx

@@ -3,7 +3,8 @@
 /**
  * @file useScrollOverflow.test.tsx
  * @input Uses vitest, @testing-library/react, useScrollOverflow
- * @output Unit tests for the hook's measurement and its rendered-only gate
+ * @output Unit tests for the hook's measurement, what it observes (the
+ *   container's scroll and size, and its content), and its rendered-only gate
  * @position Testing; jsdom lays nothing out, so the scroll box is faked and
  *   `checkVisibility` is stubbed per element.
  */
@@ -18,7 +19,10 @@ import {useScrollOverflow} from './useScrollOverflow';
 let deliverResize: ((entries: ResizeObserverEntry[]) => void) | null = null;
 
 class FakeResizeObserver implements ResizeObserver {
+  /** The shared observer, so a test can read what it observes. */
+  static last: FakeResizeObserver | null = null;
   constructor(callback: ResizeObserverCallback) {
+    FakeResizeObserver.last = this;
     deliverResize = entries => callback(entries, this);
   }
   observe = vi.fn();
@@ -69,7 +73,9 @@ beforeEach(() => {
 
 afterEach(() => {
   vi.unstubAllGlobals();
+  vi.restoreAllMocks();
   deliverResize = null;
+  FakeResizeObserver.last = null;
 });
 
 describe('useScrollOverflow', () => {
@@ -200,6 +206,101 @@ describe('useScrollOverflow', () => {
     unmount();
   });
 
+  // The overflow is the content's width against the container's: it changes
+  // when the content does, with the container keeping its size.
+  it('measures again when a child is added or removed, though the container keeps its size', async () => {
+    const el = document.createElement('div');
+    fakeScrollBox(el, {scrollWidth: 300, clientWidth: 300});
+    stubRendered(el, true);
+    const {result, unmount} = renderHook(() => useScrollOverflow());
+    act(() => {
+      result.current.scrollRef(el);
+    });
+    expect(result.current.hasOverflow).toBe(false);
+
+    const child = document.createElement('div');
+    fakeScrollBox(el, {scrollWidth: 600, clientWidth: 300});
+    await act(async () => {
+      el.append(child);
+    });
+    expect(result.current.hasOverflow).toBe(true);
+
+    fakeScrollBox(el, {scrollWidth: 300, clientWidth: 300});
+    await act(async () => {
+      child.remove();
+    });
+    expect(result.current.hasOverflow).toBe(false);
+    unmount();
+  });
+
+  it('measures again when a child resizes, though the container keeps its size', () => {
+    const el = document.createElement('div');
+    const child = document.createElement('div');
+    el.append(child);
+    fakeScrollBox(el, {scrollWidth: 300, clientWidth: 300});
+    stubRendered(el, true);
+    const {result, unmount} = renderHook(() => useScrollOverflow());
+    act(() => {
+      result.current.scrollRef(el);
+    });
+    expect(result.current.hasOverflow).toBe(false);
+
+    // The child's content grows past the container.
+    fakeScrollBox(el, {scrollWidth: 600, clientWidth: 300});
+    act(() => {
+      deliverResize?.([resizeEntry(child)]);
+    });
+    expect(result.current.hasOverflow).toBe(true);
+    unmount();
+  });
+
+  it("measures again when the container's class or style changes, as a new gap does", async () => {
+    const el = document.createElement('div');
+    fakeScrollBox(el, {scrollWidth: 300, clientWidth: 300});
+    stubRendered(el, true);
+    const {result, unmount} = renderHook(() => useScrollOverflow());
+    act(() => {
+      result.current.scrollRef(el);
+    });
+    expect(result.current.hasOverflow).toBe(false);
+
+    fakeScrollBox(el, {scrollWidth: 340, clientWidth: 300});
+    await act(async () => {
+      el.className = 'wider-gap';
+    });
+    expect(result.current.hasOverflow).toBe(true);
+
+    fakeScrollBox(el, {scrollWidth: 300, clientWidth: 300});
+    await act(async () => {
+      el.style.columnGap = '0px';
+    });
+    expect(result.current.hasOverflow).toBe(false);
+    unmount();
+  });
+
+  it('stops observing the content when the container detaches', () => {
+    const el = document.createElement('div');
+    const child = document.createElement('div');
+    el.append(child);
+    fakeScrollBox(el, {scrollWidth: 300, clientWidth: 300});
+    stubRendered(el, true);
+    const disconnect = vi.spyOn(MutationObserver.prototype, 'disconnect');
+    const {result, unmount} = renderHook(() => useScrollOverflow());
+    act(() => {
+      result.current.scrollRef(el);
+    });
+    const observer = FakeResizeObserver.last;
+    expect(observer?.observe).toHaveBeenCalledWith(child);
+
+    act(() => {
+      result.current.scrollRef(null);
+    });
+    expect(disconnect).toHaveBeenCalled();
+    expect(observer?.unobserve).toHaveBeenCalledWith(child);
+    expect(observer?.unobserve).toHaveBeenCalledWith(el);
+    unmount();
+  });
+
   it('follows a scroll on a rendered container', () => {
     const el = document.createElement('div');
     fakeScrollBox(el, {scrollWidth: 600, clientWidth: 300});

package/src/hooks/useScrollOverflow.ts

@@ -10,12 +10,15 @@
  *   state
  *
  * Observes a scroll container and reports whether content overflows at the
- * start, end, or both edges. Updates on every scroll, and on a resize while
- * the container is rendered: a layout read on an element the browser is not
+ * start, end, or both edges. Updates on every scroll, and while the container
+ * is rendered on what else changes the overflow with or without the
+ * container resizing: its own size, a child's size (a slide's content
+ * growing), a child added or removed, and its class or style (a new gap or
+ * padding). A layout read on an element the browser is not
  * rendering (an ancestor with `display: none`, or a `content-visibility:
  * hidden` subtree) either answers zeros or makes the browser lay out that
- * whole hidden subtree for the answer, so a resize observation delivered for
- * a hidden container, and the measurement at registration inside one, are
+ * whole hidden subtree for the answer, so an observation delivered for a
+ * hidden container, and the measurement at registration inside one, are
  * skipped; the hook keeps its last state until the resize observation that
  * follows the reveal (one frame after it paints). A scroll is measured
  * whether or not the container is rendered: a scroll of a hidden container
@@ -52,11 +55,57 @@ function isRendered(el: HTMLElement): boolean {
   return typeof el.checkVisibility !== 'function' || el.checkVisibility();
 }
 
+/**
+ * Observes what changes `el`'s overflow besides its scroll: its own size,
+ * each child's size, the children added or removed, and its class or style.
+ * Returns the teardown, which ends every observation.
+ */
+function observeContent(el: HTMLElement, measure: () => void): () => void {
+  const unobserveContainer = observeResize(el, measure);
+  const unobserveChildren = new Map<Element, () => void>();
+  const followChildren = () => {
+    const children = new Set(el.children);
+    for (const [child, unobserve] of unobserveChildren) {
+      if (!children.has(child)) {
+        unobserve();
+        unobserveChildren.delete(child);
+      }
+    }
+    for (const child of children) {
+      if (!unobserveChildren.has(child)) {
+        unobserveChildren.set(child, observeResize(child, measure));
+      }
+    }
+  };
+  followChildren();
+  const mutations =
+    typeof MutationObserver === 'function'
+      ? new MutationObserver(() => {
+          followChildren();
+          measure();
+        })
+      : null;
+  mutations?.observe(el, {
+    childList: true,
+    attributes: true,
+    attributeFilter: ['class', 'style'],
+  });
+  return () => {
+    mutations?.disconnect();
+    for (const unobserve of unobserveChildren.values()) {
+      unobserve();
+    }
+    unobserveChildren.clear();
+    unobserveContainer();
+  };
+}
+
 /**
  * Tracks scroll overflow state for a horizontally scrollable container.
  *
  * Returns a ref callback to attach to the scroll container and a state
- * object that updates as the user scrolls or the container resizes.
+ * object that updates as the user scrolls, the container resizes, or its
+ * content changes.
  *
  * @example
  * ```
@@ -95,10 +144,10 @@ export function useScrollOverflow() {
     });
   }, []);
 
-  // Registration and resize: only a rendered container. A hidden one has no
-  // edges to report, and reading its layout would make the browser render
-  // the hidden subtree it sits in; the resize observation that follows the
-  // reveal measures again.
+  // Registration, resize and content changes: only a rendered container. A
+  // hidden one has no edges to report, and reading its layout would make the
+  // browser render the hidden subtree it sits in; the resize observation that
+  // follows the reveal measures again.
   const measure = useCallback(() => {
     const el = elRef.current;
     if (el && isRendered(el)) {
@@ -129,7 +178,7 @@ export function useScrollOverflow() {
 
       if (el) {
         el.addEventListener('scroll', measureOnScroll, {passive: true});
-        unobserveRef.current = observeResize(el, measure);
+        unobserveRef.current = observeContent(el, measure);
       }
     },
     [measure, measureOnScroll],

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

@@ -230,9 +230,12 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@astryx.sideNav.label': 'Side navigation',
   '@astryx.sideNav.resizeSidebar': 'Resize sidebar',
   '@astryx.sideNav.heading.openMenu': 'Open menu',
+  '@astryx.slider.minimumThumb': 'Minimum value',
+  '@astryx.slider.maximumThumb': 'Maximum value',
   '@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 +430,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 +453,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',
@@ -595,6 +601,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@astryx.comments.resolveFailed': "This thread couldn't be resolved.",
   '@astryx.comments.resolved': 'Resolved',
   '@astryx.comments.resolvedBy': 'Resolved by {name}',
+  '@astryx.comments.errorAnnouncement': '{title} {description}',
   '@astryx.comments.retryFailed': "Retrying didn't work.",
   '@astryx.comments.sendFailed': "Couldn't send this comment.",
   '@astryx.comments.threadLabel': 'Thread by {name}',

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

@@ -236,9 +236,12 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@astryx.sideNav.label': '⟦Šíðé ñàṽíĝàţíóñ⟧',
   '@astryx.sideNav.resizeSidebar': '⟦Řéšížé šíðéƀàř⟧',
   '@astryx.sideNav.heading.openMenu': '⟦Óþéñ ɱéñú⟧',
+  '@astryx.slider.minimumThumb': '⟦Ṁíñíɱúɱ ṽàłúé⟧',
+  '@astryx.slider.maximumThumb': '⟦Ṁàẋíɱúɱ ṽàłúé⟧',
   '@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 +439,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 +462,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': '⟦Ñó řéšúłţš ƒóúñð⟧',
@@ -606,6 +612,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@astryx.comments.resolveFailed': "⟦Ţĥíš ţĥřéàð çóúłðñ'ţ ƀé řéšółṽéð.⟧",
   '@astryx.comments.resolved': '⟦Řéšółṽéð⟧',
   '@astryx.comments.resolvedBy': '⟦Řéšółṽéð ƀý {name}⟧',
+  '@astryx.comments.errorAnnouncement': '⟦{title} {description}⟧',
   '@astryx.comments.retryFailed': "⟦Řéţřýíñĝ ðíðñ'ţ ŵóřķ.⟧",
   '@astryx.comments.sendFailed': "⟦Çóúłðñ'ţ šéñð ţĥíš çóɱɱéñţ.⟧",
   '@astryx.comments.threadLabel': '⟦Ţĥřéàð ƀý {name}⟧',

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, {