@astryxdesign/core 0.7.1 → 0.7.2-canary.01eab6a

package/src/Text/Text.test.tsx

@@ -346,3 +346,60 @@ describe('truncated text shows one tooltip, not two', () => {
     }
   });
 });
+
+// With hasTruncateTooltip={false} nothing reads the measured overflow, so a
+// long table of truncated cells must not pay a layout read per cell.
+function countScrollWidthReads(run: () => void): number {
+  const proto = window.HTMLElement.prototype;
+  const original = Object.getOwnPropertyDescriptor(proto, 'scrollWidth');
+  let reads = 0;
+  Object.defineProperty(proto, 'scrollWidth', {
+    configurable: true,
+    get() {
+      reads += 1;
+      return 0;
+    },
+  });
+  try {
+    run();
+  } finally {
+    if (original) {
+      Object.defineProperty(proto, 'scrollWidth', original);
+    } else {
+      delete (proto as {scrollWidth?: number}).scrollWidth;
+    }
+  }
+  return reads;
+}
+
+describe('Text maxLines without a truncation tooltip', () => {
+  it('takes no truncation measurement when hasTruncateTooltip is false', () => {
+    const reads = countScrollWidthReads(() => {
+      render(
+        <>
+          {Array.from({length: 20}, (_, index) => (
+            <Text
+              type="body"
+              maxLines={1}
+              hasTruncateTooltip={false}
+              key={index}>
+              Cell {index} with text far wider than its column
+            </Text>
+          ))}
+        </>,
+      );
+    });
+    expect(reads).toBe(0);
+  });
+
+  it('still measures when the tooltip is enabled', () => {
+    const reads = countScrollWidthReads(() => {
+      render(
+        <Text type="body" maxLines={1}>
+          Text far wider than its column
+        </Text>,
+      );
+    });
+    expect(reads).toBeGreaterThan(0);
+  });
+});

package/src/Text/Text.tsx

@@ -260,8 +260,12 @@ export function Text({
   // Resolve display - force block when maxLines > 0 or hasCapsize
   const resolvedDisplay = maxLines > 0 || hasCapsize ? 'block' : display;
 
-  // Truncation detection
-  const truncation = useTruncation({maxLines});
+  // Truncation detection. Only the tooltip reads the measured overflow, so
+  // with the tooltip off the text is clipped by CSS alone and nothing is
+  // measured or observed.
+  const truncation = useTruncation({
+    maxLines: hasTruncateTooltip === false ? 0 : maxLines,
+  });
 
   // Tooltip for truncated text
   const tooltipPlacement: LayerPlacement =

package/src/Text/useTruncation.test.tsx

@@ -0,0 +1,69 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useTruncation.test.tsx
+ * Tests for useTruncation
+ */
+
+import {render, screen, waitFor} from '@testing-library/react';
+import {afterEach, describe, it, expect, vi} from 'vitest';
+import {useTruncation} from './useTruncation';
+
+function Probe({text}: {text: string}) {
+  const truncation = useTruncation({maxLines: 1});
+  return (
+    <>
+      <span ref={truncation.ref}>{text}</span>
+      <output data-testid="full-text">{truncation.fullText}</output>
+    </>
+  );
+}
+
+// A status line at a fixed width never resizes when its message changes, so
+// the tooltip text must follow the content, not only the element's size.
+describe('useTruncation', () => {
+  it('re-measures when the text changes without a resize', async () => {
+    const {rerender} = render(<Probe text="planning the first step" />);
+    expect(screen.getByTestId('full-text')).toHaveTextContent(
+      'planning the first step',
+    );
+
+    rerender(<Probe text="writing the second step" />);
+
+    await waitFor(() =>
+      expect(screen.getByTestId('full-text')).toHaveTextContent(
+        'writing the second step',
+      ),
+    );
+  });
+
+  describe('content observation', () => {
+    afterEach(() => {
+      vi.unstubAllGlobals();
+    });
+
+    it('shares one observer across every truncating instance', () => {
+      const NativeMutationObserver = globalThis.MutationObserver;
+      let created = 0;
+      vi.stubGlobal(
+        'MutationObserver',
+        class extends NativeMutationObserver {
+          constructor(callback: MutationCallback) {
+            super(callback);
+            created += 1;
+          }
+        },
+      );
+
+      render(
+        <>
+          {Array.from({length: 50}, (_, index) => (
+            <Probe key={index} text={`cell ${index}`} />
+          ))}
+        </>,
+      );
+
+      expect(created).toBe(1);
+    });
+  });
+});

package/src/Text/useTruncation.ts

@@ -4,7 +4,7 @@
 
 /**
  * @file useTruncation.ts
- * @input Uses React hooks, sharedResizeObserver
+ * @input Uses React hooks, sharedResizeObserver, sharedMutationObserver
  * @output Exports useTruncation hook for detecting text overflow
  * @position Hook; consumed by Text.tsx, Heading.tsx
  *
@@ -14,6 +14,7 @@
 
 import {useCallback, useRef, useState, type RefCallback} from 'react';
 import {observeResize} from '../utils/sharedResizeObserver';
+import {observeContent} from '../utils/sharedMutationObserver';
 
 export interface UseTruncationOptions {
   /**
@@ -43,10 +44,12 @@ export interface UseTruncationReturn {
 /**
  * Hook for detecting text overflow/truncation.
  *
- * Uses a shared ResizeObserver singleton (via observeResize)
- * for efficient detection when content or container changes. A single
- * ResizeObserver instance is shared across all mounted useTruncation hooks,
- * so even hundreds of table cells only create one observer.
+ * Uses a shared ResizeObserver singleton (via observeResize) for size
+ * changes and a shared MutationObserver singleton (via observeContent) for
+ * content changes, so even hundreds of table cells create one observer of
+ * each kind. Observing content matters because an element whose text changes
+ * without resizing (a fixed-width status line) must still be re-measured for
+ * the tooltip text and the truncated state to follow the current content.
  *
  * - Single-line: compares scrollWidth > offsetWidth
  * - Multi-line: uses Range.getBoundingClientRect() to measure actual content
@@ -71,6 +74,7 @@ export function useTruncation(
   const [fullText, setFullText] = useState('');
   const elementRef = useRef<HTMLElement | null>(null);
   const unobserveRef = useRef<(() => void) | null>(null);
+  const unobserveContentRef = useRef<(() => void) | null>(null);
 
   const checkTruncation = useCallback(
     (element: HTMLElement) => {
@@ -113,6 +117,8 @@ export function useTruncation(
       // by element leaves any other observer of the same node untouched.
       unobserveRef.current?.();
       unobserveRef.current = null;
+      unobserveContentRef.current?.();
+      unobserveContentRef.current = null;
 
       elementRef.current = element;
 
@@ -127,6 +133,11 @@ export function useTruncation(
         } else {
           checkTruncation(element);
         }
+        // New text in a box that keeps its size fires no resize, so the
+        // captured text and truncated state would otherwise stay stale.
+        unobserveContentRef.current = observeContent(element, () => {
+          checkTruncation(element);
+        });
       } else {
         setIsTruncated(false);
         setFullText('');

package/src/TimeInput/TimeInput.fr10.test.tsx

@@ -191,6 +191,21 @@ for (const [surface, presentation, selector] of SURFACES) {
       expect(own?.textContent).toContain('Start');
     });
 
+    it('puts hidden, inert, and dir on the control', () => {
+      render(
+        <TimeInput
+          label="Start"
+          presentation={presentation}
+          hidden
+          inert
+          dir="rtl"
+        />,
+      );
+      expect(control(selector)).toHaveAttribute('hidden');
+      expect(control(selector)).toHaveAttribute('inert');
+      expect(control(selector)).toHaveAttribute('dir', 'rtl');
+    });
+
     it('keeps control* on the control box in a horizontal-labels FormLayout', () => {
       vi.spyOn(console, 'warn').mockImplementation(() => {});
       const {container} = render(

package/src/ToggleButton/ToggleButton.test.tsx

@@ -497,6 +497,78 @@ describe('ToggleButton', () => {
     expect(button).not.toHaveAttribute('aria-busy', 'true');
     await act(async () => {});
   });
+
+  // family:buttons FR5: a caller onClick on a standalone ToggleButton runs
+  // before onPressedChange and pressedChangeAction, never replaces the toggle
+  // request, and cancels it only by calling preventDefault() itself.
+  describe('with a caller onClick', () => {
+    it('runs the caller onClick first, then requests the next state and runs the Action', async () => {
+      const calls: string[] = [];
+      render(
+        <ToggleButton
+          label="Compact"
+          isPressed={false}
+          onClick={() => calls.push('onClick')}
+          onPressedChange={next => calls.push(`onPressedChange:${next}`)}
+          pressedChangeAction={next => {
+            calls.push(`pressedChangeAction:${next}`);
+          }}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole('button', {name: 'Compact'}));
+      await act(async () => {});
+
+      expect(calls).toEqual([
+        'onClick',
+        'onPressedChange:true',
+        'pressedChangeAction:true',
+      ]);
+    });
+
+    it('requests no next state when the caller onClick calls preventDefault', async () => {
+      const onPressedChange = vi.fn();
+      const pressedChangeAction = vi.fn();
+      render(
+        <ToggleButton
+          label="Compact"
+          isPressed={false}
+          onClick={event => event.preventDefault()}
+          onPressedChange={onPressedChange}
+          pressedChangeAction={pressedChangeAction}
+        />,
+      );
+
+      const button = screen.getByRole('button', {name: 'Compact'});
+      fireEvent.click(button);
+      await act(async () => {});
+
+      expect(onPressedChange).not.toHaveBeenCalled();
+      expect(pressedChangeAction).not.toHaveBeenCalled();
+      expect(button).toHaveAttribute('aria-pressed', 'false');
+    });
+
+    it('still requests the next state when the click was already prevented before the caller onClick ran', () => {
+      const onPressedChange = vi.fn();
+      render(
+        <div onClickCapture={event => event.preventDefault()}>
+          <ToggleButton
+            label="Compact"
+            isPressed={false}
+            onClick={() => {}}
+            onPressedChange={onPressedChange}
+          />
+        </div>,
+      );
+
+      fireEvent.click(screen.getByRole('button', {name: 'Compact'}));
+
+      expect(onPressedChange).toHaveBeenCalledExactlyOnceWith(
+        true,
+        expect.anything(),
+      );
+    });
+  });
 });
 
 // =============================================================================
@@ -721,6 +793,29 @@ describe.each(['single', 'multiple'] as const)(
       expect(onPressedChange).not.toHaveBeenCalled();
       expect(pressedChangeAction).not.toHaveBeenCalled();
     });
+
+    // family:buttons FR11: a member's selection request comes from the group,
+    // and a caller onClick on the member must not replace it.
+    it('still asks the group to toggle a member that receives an onClick', async () => {
+      const onChange = vi.fn();
+      const onClick = vi.fn();
+      const groupProps =
+        type === 'single'
+          ? {type, value: null, onChange}
+          : {type, value: [], onChange};
+      render(
+        <ToggleButtonGroup {...groupProps} label="View">
+          <ToggleButton value="grid" label="Grid" onClick={onClick} />
+        </ToggleButtonGroup>,
+      );
+
+      await userEvent.setup().click(screen.getByRole('button', {name: 'Grid'}));
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenCalledExactlyOnceWith(
+        type === 'single' ? 'grid' : ['grid'],
+      );
+    });
   },
 );
 

package/src/ToggleButton/ToggleButton.tsx

@@ -9,7 +9,8 @@
  * @position Thin wrapper over Button; adds controlled toggle pattern
  *
  * ToggleButton wraps Button with `isPressed` and adds:
- * - `onPressedChange` from internal `onClick`; `pressedChangeAction` via Button
+ * - `onPressedChange` from internal `onClick`, after any caller `onClick`;
+ *   `pressedChangeAction` via Button
  * - `pressedIcon` for outline-to-filled icon swap
  * - Font weight shift on press with width reservation to prevent layout shift
  * - Group integration via ToggleButtonGroupContext
@@ -258,6 +259,7 @@ export function ToggleButton({
   xstyle,
   className,
   style,
+  onClick: onClickProp,
   ...props
 }: ToggleButtonProps): ReactNode {
   const group = useToggleButtonGroup();
@@ -287,11 +289,20 @@ export function ToggleButton({
     if (isDisabled) {
       return;
     }
+    // A caller onClick (a trigger wrapper often supplies one) runs first and
+    // never replaces the toggle's own request (family:buttons FR5, FR11).
+    const wasPrevented = event.defaultPrevented;
+    onClickProp?.(event);
     if (group && value != null) {
       group.toggle(value);
       event.preventDefault();
       return;
     }
+    // A standalone toggle is cancelled only by the caller's own
+    // preventDefault(); Button then skips pressedChangeAction too.
+    if (!wasPrevented && event.defaultPrevented) {
+      return;
+    }
 
     onPressedChangeProp?.(nextPressed, event);
   };

package/src/Tokenizer/Tokenizer.test.tsx

@@ -20,7 +20,7 @@ import {
   afterEach,
 } from 'vitest';
 import {render, screen, fireEvent, act, waitFor} from '@testing-library/react';
-import {createRef, Profiler} from 'react';
+import {createRef, Profiler, useState} from 'react';
 import userEvent from '@testing-library/user-event';
 import {Tokenizer} from './Tokenizer';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
@@ -1790,6 +1790,59 @@ describe('Tokenizer end-lane reserve', () => {
     expect(renderedTokens).toEqual([]);
   });
 
+  it('clears the busy spinner when a token is added while a bootstrap load is in flight', async () => {
+    let settle: (items: SearchableItem[]) => void = () => {};
+    const bootstrap = vi.fn(
+      async () =>
+        new Promise<SearchableItem[]>(resolve => {
+          settle = resolve;
+        }),
+    );
+    const source: SearchSource = {search: () => [], bootstrap};
+
+    function Harness() {
+      const [value, setValue] = useState<SearchableItem[]>([]);
+      return (
+        <>
+          <Tokenizer
+            label="Items"
+            searchSource={source}
+            value={value}
+            onChange={setValue}
+            hasEntriesOnFocus
+          />
+          <button type="button" onClick={() => setValue([users[0]])}>
+            Add Token
+          </button>
+        </>
+      );
+    }
+
+    render(<Harness />);
+    const input = screen.getByRole('combobox');
+
+    fireEvent.focus(input);
+    await waitFor(() => {
+      expect(screen.getByRole('status', {name: 'Loading'})).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole('button', {name: 'Add Token'}));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('status', {name: 'Loading'}),
+      ).not.toBeInTheDocument();
+    });
+
+    await act(async () => {
+      settle([]);
+      await Promise.resolve();
+    });
+    expect(
+      screen.queryByRole('status', {name: 'Loading'}),
+    ).not.toBeInTheDocument();
+  });
+
   it('shares one observer across every field on the page', () => {
     // Browsers batch per observer instance, so one observer per lane meant N
     // callback dispatches a frame for N fields.

package/src/Tooltip/Tooltip.test.tsx

@@ -183,6 +183,37 @@ describe('Tooltip', () => {
     });
   });
 
+  describe('icon-only trigger', () => {
+    // A rendered icon is an SVGElement, and ShowPopoverOptions.source is
+    // declared as an HTMLElement. Handing the icon to showPopover throws
+    // during dictionary conversion, before the popover opens, so the hint
+    // never appeared. (#7226)
+    it('opens an icon trigger without passing an SVGElement as the source', async () => {
+      const showSpy = vi.mocked(HTMLElement.prototype.showPopover);
+      showSpy.mockClear();
+
+      render(
+        <Tooltip content="Shared memory" isDefaultOpen>
+          <svg data-testid="icon" aria-hidden="true" />
+        </Tooltip>,
+      );
+
+      await waitFor(() => {
+        expect(showSpy).toHaveBeenCalled();
+      });
+
+      const [options] = showSpy.mock.calls[0];
+      // Compared as a boolean on purpose: a plain `toBeUndefined` failure makes
+      // the diff printer walk the SVGElement, which it cannot inspect.
+      expect(options?.source === undefined).toBe(true);
+
+      // The icon is still the trigger the ARIA tooltip pattern is wired to.
+      expect(screen.getByTestId('icon').getAttribute('aria-describedby')).toBe(
+        screen.getByRole('tooltip', {hidden: true}).id,
+      );
+    });
+  });
+
   describe('WCAG 1.4.13 — content on hover or focus', () => {
     it('dismisses on Escape while visible (dismissible)', async () => {
       const onOpenChange = vi.fn();

package/src/Tooltip/useTooltip.test.tsx

@@ -147,6 +147,19 @@ describe('useTooltip — show delay', () => {
 
     expect(onShow).not.toHaveBeenCalled();
   });
+
+  it('drops a pending show when isEnabled turns false before the delay elapses', () => {
+    const onShow = vi.fn();
+    const {rerender} = render(<Harness onShow={onShow} />);
+
+    fireEvent.mouseEnter(trigger());
+    tick(100);
+    rerender(<Harness isEnabled={false} onShow={onShow} />);
+    tick(1000);
+
+    expect(onShow).not.toHaveBeenCalled();
+    expect(tooltipElement().matches(':popover-open')).toBe(false);
+  });
 });
 
 describe('useTooltip — touch suppression', () => {

package/src/Tooltip/useTooltip.tsx

@@ -352,6 +352,17 @@ export function useTooltip(options: TooltipOptions = {}): TooltipReturn {
     }, delay);
   }, [isEnabled, isOpen, clearTimeouts, showLayer, delay]);
 
+  // A show scheduled while the triggers were enabled must not outlive them:
+  // disabling also detaches the leave listener that would have cancelled it,
+  // so the timer would open a tooltip that nothing ever closes. Only the
+  // pending show is dropped; a pending hide still runs.
+  useEffect(() => {
+    if (!isEnabled && showTimeoutRef.current) {
+      clearTimeout(showTimeoutRef.current);
+      showTimeoutRef.current = null;
+    }
+  }, [isEnabled]);
+
   // Schedule hide with delay (suppressed when isOpen is true).
   // A small hover bridge (when hideDelay is 0) lets the pointer travel from the
   // trigger onto the tooltip surface without the tooltip vanishing — required

package/src/TopNav/TopNavMegaMenu.test.tsx

@@ -769,6 +769,28 @@ describe('TopNavMegaMenu — drawer mode', () => {
     expect(handleClick).toHaveBeenCalledTimes(1);
   });
 
+  it('clips the drawer section only while it is collapsed', async () => {
+    // The ring paints outside the item, so a permanent clip would cut it off.
+    const user = userEvent.setup();
+    render(
+      <TopNavRenderContext value="drawer">
+        <TopNavMegaMenu
+          label="Products"
+          items={<TopNavMegaMenuItem title="Analytics" href="/analytics" />}
+        />
+      </TopNavRenderContext>,
+    );
+    const trigger = screen.getByRole('button', {name: 'Products'});
+    const section = document.getElementById(
+      trigger.getAttribute('aria-controls') ?? '',
+    )!;
+    expect(getComputedStyle(section).overflow).toBe('hidden');
+    expect(getComputedStyle(section.firstElementChild!).overflow).toBe('');
+
+    await user.click(trigger);
+    expect(getComputedStyle(section).overflow).toBe('visible');
+  });
+
   it('renders featured content when expanded', async () => {
     const user = userEvent.setup();
 

package/src/TopNav/TopNavMegaMenu.tsx

@@ -229,18 +229,22 @@ const styles = stylex.create({
   drawerChevronExpanded: {
     transform: 'rotate(180deg)',
   },
+  // Clips only while collapsed or animating; see TopNavMenu drawerStyles.items.
   drawerItems: {
     display: 'grid',
     gridTemplateRows: '0fr',
-    transitionProperty: 'grid-template-rows',
-    transitionDuration: durationVars['--duration-medium'],
+    overflow: 'hidden',
+    transitionProperty: 'grid-template-rows, overflow',
+    transitionBehavior: 'allow-discrete',
+    transitionDuration: `${durationVars['--duration-medium']}, 0s`,
     transitionTimingFunction: easeVars['--ease-standard'],
   },
   drawerItemsExpanded: {
     gridTemplateRows: '1fr',
+    overflow: 'visible',
+    transitionDelay: `0s, ${durationVars['--duration-medium']}`,
   },
   drawerItemsInner: {
-    overflow: 'hidden',
     minHeight: 0,
   },
 

package/src/TopNav/TopNavMenu.test.tsx

@@ -241,6 +241,25 @@ describe('TopNavMenu — drawer focus ring', () => {
     );
     expectSharedFocusRing(screen.getByRole('link', {name: /Analytics/}));
   });
+
+  it('clips the drawer section only while it is collapsed', async () => {
+    // The ring paints outside the item, so a permanent clip would cut it off.
+    const user = userEvent.setup();
+    render(
+      <TopNavRenderContext value="drawer">
+        <TopNavMenu label="Products" items={mockItems} />
+      </TopNavRenderContext>,
+    );
+    const trigger = screen.getByRole('button', {name: /Products/});
+    const section = document.getElementById(
+      trigger.getAttribute('aria-controls') ?? '',
+    )!;
+    expect(getComputedStyle(section).overflow).toBe('hidden');
+    expect(getComputedStyle(section.firstElementChild!).overflow).toBe('');
+
+    await user.click(trigger);
+    expect(getComputedStyle(section).overflow).toBe('visible');
+  });
 });
 
 describe('TopNavMenu pass-through props', () => {

package/src/TopNav/TopNavMenu.tsx

@@ -194,18 +194,26 @@ const drawerStyles = stylex.create({
   chevronExpanded: {
     transform: 'rotate(180deg)',
   },
+  // The section clips its items only for the 0fr collapse animation: a
+  // permanent clip cuts off the focus ring, which paints outside the item.
+  // `overflow` is discrete, so it rides the transition with `allow-discrete`
+  // and switches to `visible` only after the open has finished. Collapsing
+  // clips again at once.
   items: {
     display: 'grid',
     gridTemplateRows: '0fr',
-    transitionProperty: 'grid-template-rows',
-    transitionDuration: durationVars['--duration-medium'],
+    overflow: 'hidden',
+    transitionProperty: 'grid-template-rows, overflow',
+    transitionBehavior: 'allow-discrete',
+    transitionDuration: `${durationVars['--duration-medium']}, 0s`,
     transitionTimingFunction: easeVars['--ease-standard'],
   },
   itemsExpanded: {
     gridTemplateRows: '1fr',
+    overflow: 'visible',
+    transitionDelay: `0s, ${durationVars['--duration-medium']}`,
   },
   itemsInner: {
-    overflow: 'hidden',
     minHeight: 0,
   },
   item: {

package/src/TreeList/TreeList.doc.mjs

@@ -89,6 +89,7 @@ export const docs = {
       {name: '--tree-list-indent', description: 'Per-level indentation step. Each nesting level indents its rows by this distance, and the guide lines follow it so they stay aligned. Set it on the `tree-list` target to retune the metric (e.g. `var(--spacing-5)` for a wider indent).', default: 'var(--spacing-4)'},
       {name: '--tree-list-row-gap', description: 'Vertical gap between adjacent rows. Default `2px` (var(--spacing-0-5)) gives a subtle separation; set it on the `tree-list` target to widen or close the gap. The connector guides span the gap automatically (the line stays continuous) and do not overhang the last row, so no guide-height tuning is needed.', default: 'var(--spacing-0-5)'},
       {name: '--_tree-indent', description: 'Distance one row is indented, computed per row from --tree-list-indent and the row depth. Set --tree-list-indent to retune indentation; this is the resolved value.', default: '0px', private: true},
+      {name: '--_tree-focus-z', description: 'Stacking order of a row while its treeitem has keyboard focus, published by each treeitem so its focused row paints above the guide lines. Not a theming lever.', default: 'auto', private: true},
     ],
   },
   components: [