@astryxdesign/core 0.5.0 → 0.5.1-canary.046f6ea

package/src/Icon/useIcon.ts

@@ -11,13 +11,20 @@
 
 import type {ReactNode} from 'react';
 import {useThemeName} from '../theme/useTheme';
-import {getIcon, type IconName} from './globalIconRegistry';
+import {
+  getIcon,
+  type IconName,
+  type NamespacedIconName,
+} from './globalIconRegistry';
 
 /**
  * Resolve a semantic icon name from the nearest Theme, falling back through
  * root theme registration, global icon overrides, and built-in defaults.
+ *
+ * Accepts a namespaced extension key (`'richtext:bold'`) as well as a built-in
+ * name; both resolve through the same registry.
  */
-export function useIcon(name: IconName): ReactNode {
+export function useIcon(name: IconName | NamespacedIconName): ReactNode {
   const themeName = useThemeName();
   return getIcon(name, themeName);
 }

package/src/Indicator/CheckboxIndicator.tsx

@@ -227,10 +227,13 @@ export function CheckboxIndicator({
         <>
           <svg
             viewBox="0 0 10 10"
-            {...stylex.props(
-              styles.checkmark,
-              checkmarkSizeStyles[size],
-              isChecked && styles.checkmarkVisible,
+            {...mergeProps(
+              themeProps('checkbox-indicator-check', {size}),
+              stylex.props(
+                styles.checkmark,
+                checkmarkSizeStyles[size],
+                isChecked && styles.checkmarkVisible,
+              ),
             )}>
             <path
               d="M8.5 2.5L4 7.5L1.5 5"
@@ -242,10 +245,13 @@ export function CheckboxIndicator({
             />
           </svg>
           <span
-            {...stylex.props(
-              styles.indeterminateMark,
-              indeterminateSizeStyles[size],
-              isIndeterminate && styles.indeterminateMarkVisible,
+            {...mergeProps(
+              themeProps('checkbox-indicator-dash', {size}),
+              stylex.props(
+                styles.indeterminateMark,
+                indeterminateSizeStyles[size],
+                isIndeterminate && styles.indeterminateMarkVisible,
+              ),
             )}
           />
         </>

package/src/Indicator/Indicator.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'Indicator',
   displayName: 'Indicator',
   group: 'Indicator',
-  category: 'Data Input',
+  category: 'Form Controls',
   isHiddenFromOverview: true,
   keywords: [
     'indicator',
@@ -132,6 +132,8 @@ export const docs = {
         visualProps: ['size'],
         states: ['checked', 'disabled'],
       },
+      {className: 'astryx-checkbox-indicator-check', visualProps: ['size']},
+      {className: 'astryx-checkbox-indicator-dash', visualProps: ['size']},
       {
         className: 'astryx-radio-indicator',
         visualProps: ['size'],

package/src/InputGroup/InputGroup.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'InputGroup',
   displayName: 'Input Group',
   group: 'Field',
-  category: 'Data Input',
+  category: 'Form Controls',
   isHiddenFromOverview: true,
   keywords: [
     'inputgroup',

package/src/Item/Item.tsx

@@ -35,6 +35,7 @@ import {useClickableContainer} from '../hooks/useClickableContainer';
 import {useDevWarning} from '../hooks/useDevWarning';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
+import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 
 // =============================================================================
 // Types
@@ -224,13 +225,6 @@ const styles = stylex.create({
     transitionProperty: 'background-color',
     transitionDuration: durationVars['--duration-fast-min'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    backgroundColor: {
-      default: 'transparent',
-      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
-        '@media (hover: hover)': colorVars['--color-overlay-hover'],
-      },
-      ':active': colorVars['--color-overlay-pressed'],
-    },
   },
   highlighted: {
     backgroundColor: colorVars['--color-overlay-hover'],
@@ -603,6 +597,7 @@ export function Item({
           densityStyles[density],
           align === 'start' && styles.alignStart,
           isInteractive && styles.interactive,
+          isInteractive && interactionOverlayStyles.backgroundColor,
           isHighlighted && styles.highlighted,
           isSelected && styles.selected,
           isDisabled && !hasParentRole && styles.disabled,

package/src/Kbd/Kbd.test.tsx

@@ -23,7 +23,6 @@ describe('Kbd', () => {
       value: originalPlatform,
       configurable: true,
     });
-    delete (navigator as {userAgentData?: unknown}).userAgentData;
   });
 
   it('renders a single key', () => {
@@ -55,22 +54,6 @@ describe('Kbd', () => {
     expect(screen.getByText('\u2318')).toBeInTheDocument(); // \u2318
   });
 
-  it('reads a blank userAgentData.platform as unknown, not as non-Mac', () => {
-    // Builds that rewrite their client-hints identity expose the key with an
-    // empty value; navigator.platform is the only surface left that answers.
-    Object.defineProperty(navigator, 'userAgentData', {
-      value: {platform: ''},
-      configurable: true,
-    });
-    Object.defineProperty(navigator, 'platform', {
-      value: 'MacIntel',
-      configurable: true,
-    });
-
-    render(<Kbd keys="mod" />);
-    expect(screen.getByText('\u2318')).toBeInTheDocument();
-  });
-
   it('maps modifier keys to symbols', () => {
     render(<Kbd keys="ctrl+alt+shift+k" />);
     expect(screen.getByText('\u2303')).toBeInTheDocument(); // \u2303

package/src/Kbd/Kbd.tsx

@@ -16,6 +16,7 @@
 import React, {useSyncExternalStore} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {mergeProps} from '../utils';
+import {isApplePlatform} from '../utils/isApplePlatform';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {
@@ -122,31 +123,6 @@ function getServerPlatformSnapshot(): boolean {
   return false;
 }
 
-/**
- * Detects whether the current platform is macOS/iOS.
- * Prefers the User-Agent Client Hints API when it names a platform (modern
- * Chrome/Edge), falls back to navigator.platform (deprecated but universally
- * supported) when it is absent or blank.
- */
-function detectMac(): boolean {
-  if (typeof navigator === 'undefined') {
-    return false;
-  }
-  // Prefer User-Agent Client Hints API (not deprecated)
-  const uaData = 'userAgentData' in navigator ? navigator.userAgentData : null;
-  if (uaData && typeof uaData === 'object' && 'platform' in uaData) {
-    const uaPlatform = (uaData as {platform?: unknown}).platform;
-    // A blank platform is no answer, not a negative one. Builds that rewrite
-    // their client-hints identity ship '', so fall through rather than
-    // reading it as "not Apple".
-    if (typeof uaPlatform === 'string' && uaPlatform.trim() !== '') {
-      return /mac/i.test(uaPlatform);
-    }
-  }
-  // Fallback: navigator.platform (deprecated but still shipped everywhere)
-  return /Mac|iPhone|iPad|iPod/.test(navigator.platform ?? '');
-}
-
 export interface KbdProps extends BaseProps<HTMLSpanElement> {
   ref?: React.Ref<HTMLSpanElement>;
   /**
@@ -183,7 +159,7 @@ export interface KbdProps extends BaseProps<HTMLSpanElement> {
 export function Kbd({keys, ref, xstyle, className, style, ...rest}: KbdProps) {
   const isMac = useSyncExternalStore(
     subscribeToPlatformChanges,
-    detectMac,
+    isApplePlatform,
     getServerPlatformSnapshot,
   );
 

package/src/Layer/gestureCounter.ts

@@ -0,0 +1,57 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file gestureCounter.ts
+ * @input Listens for pointerdown, keydown, and click on the document
+ * @output Exports the current gesture identity and whether its click has run
+ * @position Internal to Layer; used by useLayer to tell a click that belongs
+ *   to a dismissing press from a fresh one
+ *
+ * A browser light-dismiss and the trigger's own click come from ONE press, and
+ * which of them React sees first is a race. Comparing timestamps against a
+ * window guesses; counting gestures does not. The counter advances on every
+ * new press or keystroke, so "the click from the gesture that dismissed the
+ * layer" is exactly "the click while the counter still reads what it read at
+ * the dismissal", no matter how long the main thread was blocked in between.
+ */
+
+let gesture = 0;
+let clickedGesture: number | null = null;
+let isListening = false;
+
+function advance() {
+  gesture += 1;
+}
+
+function markClicked() {
+  clickedGesture = gesture;
+}
+
+function listen() {
+  if (isListening || typeof document === 'undefined') {
+    return;
+  }
+  isListening = true;
+  // Capture phase: the count must advance before any handler reads it.
+  document.addEventListener('pointerdown', advance, true);
+  document.addEventListener('keydown', advance, true);
+  // Capture phase observes the click even when a consumer stops propagation.
+  document.addEventListener('click', markClicked, true);
+}
+
+/**
+ * Identifies the user gesture in flight. Two reads returning the same value
+ * happened within one press (or one keystroke).
+ */
+export function currentGesture(): number {
+  listen();
+  return gesture;
+}
+
+/** Whether the click belonging to the current gesture already bubbled. */
+export function currentGestureHasClicked(): boolean {
+  listen();
+  return clickedGesture === gesture;
+}

package/src/Layer/useLayer.test.tsx

@@ -10,13 +10,28 @@
  */
 
 import {describe, it, expect, vi, afterEach} from 'vitest';
-import {render, act, fireEvent, waitFor} from '@testing-library/react';
+import {
+  render,
+  renderHook,
+  act,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {useLayer, getPositionTryFallbacks} from './useLayer';
+import * as stylex from '@stylexjs/stylex';
+import {
+  useKeepLayerOpenProps,
+  useLayer,
+  useLayerInternal,
+  getPositionTryFallbacks,
+} from './useLayer';
+import {typeScaleVars} from '../theme/tokens.stylex';
 import type {
   LayerPlacement,
   LayerAlignment,
   ContextRenderProps,
+  ContextLayerReturn,
+  FixedLayerReturn,
 } from './useLayer';
 
 function mockCSSStyleDeclaration(
@@ -137,6 +152,43 @@ function RelocatingOpenContextHostingHarness({
   );
 }
 
+describe('useLayer identity', () => {
+  it('keeps the context ref and API object stable across rerenders', () => {
+    const {result, rerender} = renderHook(() => useLayer({mode: 'context'}));
+    const first = result.current;
+
+    rerender();
+
+    expect(result.current.ref).toBe(first.ref);
+    expect(result.current).toBe(first);
+  });
+
+  it('keeps the context ref stable when callbacks change', () => {
+    const firstOnShow = vi.fn();
+    const secondOnShow = vi.fn();
+    const {result, rerender} = renderHook(
+      ({onShow}: {onShow: () => void}) => useLayer({mode: 'context', onShow}),
+      {initialProps: {onShow: firstOnShow}},
+    );
+    const first = result.current;
+    const firstRef = result.current.ref;
+
+    rerender({onShow: secondOnShow});
+
+    expect(result.current).not.toBe(first);
+    expect(result.current.ref).toBe(firstRef);
+  });
+
+  it('keeps the fixed API object stable across rerenders', () => {
+    const {result, rerender} = renderHook(() => useLayer({mode: 'fixed'}));
+    const first = result.current;
+
+    rerender();
+
+    expect(result.current).toBe(first);
+  });
+});
+
 describe('getPositionTryFallbacks (issue #3671)', () => {
   const FLIPS = 'flip-block, flip-inline, flip-block flip-inline';
 
@@ -500,20 +552,6 @@ describe('useLayer', () => {
   });
 
   describe('when the Popover API is supported', () => {
-    it('declares body type instead of inheriting the host context', () => {
-      const {container} = render(
-        <div style={{fontSize: '30px', lineHeight: '3'}}>
-          <LayerHarness onReady={() => {}} />
-        </div>,
-      );
-
-      const layer = container.querySelector('[popover]') as HTMLElement;
-      expect(layer).toHaveStyle({
-        fontSize: 'var(--text-body-size)',
-        lineHeight: 'var(--text-body-leading)',
-      });
-    });
-
     it('calls showPopover/hidePopover on show/hide', () => {
       const showSpy = vi.fn();
       const hideSpy = vi.fn();
@@ -614,6 +652,66 @@ async function openAndGetStyle(ui: React.ReactElement): Promise<string> {
   return popover?.getAttribute('style') ?? '';
 }
 
+describe('typography baseline', () => {
+  const overrideStyles = stylex.create({
+    supporting: {fontSize: typeScaleVars['--text-supporting-size']},
+  });
+
+  function TypographyHarness({
+    ambientFontSize,
+    xstyle,
+  }: {
+    ambientFontSize: string;
+    xstyle?: ContextRenderProps['xstyle'];
+  }) {
+    const layer = useLayer({mode: 'context'});
+    return (
+      <div style={{fontSize: ambientFontSize, lineHeight: '3'}}>
+        <button type="button" ref={layer.ref} onClick={layer.show}>
+          trigger
+        </button>
+        {layer.render(<span>content</span>, {xstyle})}
+      </div>
+    );
+  }
+
+  async function openAndGetType(ui: React.ReactElement) {
+    const user = userEvent.setup();
+    const {container, getByRole} = render(ui);
+    await user.click(getByRole('button', {name: 'trigger'}));
+    const el = container.querySelector('[popover]') as HTMLElement;
+    const computed = window.getComputedStyle(el);
+    return {fontSize: computed.fontSize, lineHeight: computed.lineHeight};
+  }
+
+  // jsdom resolves no var() indirection, so the token reference is what the
+  // assertion can see — the point is that a declaration exists at all, since
+  // an absent one is exactly what let the ambient size through.
+  it.each(['13px', '20px'])(
+    'takes the body role rather than the surrounding %s',
+    async ambientFontSize => {
+      expect(
+        await openAndGetType(
+          <TypographyHarness ambientFontSize={ambientFontSize} />,
+        ),
+      ).toEqual({
+        fontSize: 'var(--text-body-size)',
+        lineHeight: 'var(--text-body-leading)',
+      });
+    },
+  );
+
+  it('still lets a consumer xstyle set its own size', async () => {
+    const {fontSize} = await openAndGetType(
+      <TypographyHarness
+        ambientFontSize="13px"
+        xstyle={overrideStyles.supporting}
+      />,
+    );
+    expect(fontSize).toBe('var(--text-supporting-size)');
+  });
+});
+
 describe('useLayer context positioning', () => {
   // The mapping uses the self-* logical keyword family, so the emitted
   // string is direction-independent by construction: the browser resolves
@@ -873,3 +971,257 @@ describe('useLayer context positioning', () => {
     expect(style).not.toContain('position-anchor');
   });
 });
+
+describe('useLayer public return types', () => {
+  it('keeps dismissal helpers internal', () => {
+    const contextHasKeepOpenProps: 'keepOpenProps' extends keyof ContextLayerReturn
+      ? true
+      : false = false;
+    const fixedHasKeepOpenProps: 'keepOpenProps' extends keyof FixedLayerReturn
+      ? true
+      : false = false;
+    const contextHasGuard: 'wasJustDismissed' extends keyof ContextLayerReturn
+      ? true
+      : false = false;
+    const fixedHasGuard: 'wasJustDismissed' extends keyof FixedLayerReturn
+      ? true
+      : false = false;
+
+    expect(contextHasKeepOpenProps).toBe(false);
+    expect(fixedHasKeepOpenProps).toBe(false);
+    expect(contextHasGuard).toBe(false);
+    expect(fixedHasGuard).toBe(false);
+  });
+});
+
+describe('internal keep-open props (controls on the trigger, #5004)', () => {
+  function ClearableTriggerHarness() {
+    const layer = useLayer({mode: 'context'});
+    const keepOpenProps = useKeepLayerOpenProps(layer.id, layer.isOpen);
+    return (
+      <>
+        <button type="button" ref={layer.ref} onClick={layer.show}>
+          Trigger
+        </button>
+        <button type="button" {...keepOpenProps}>
+          Clear
+        </button>
+        {layer.render(<span>Layer content</span>, {placement: 'below'})}
+      </>
+    );
+  }
+
+  it('names the control an invoker for the duration of the press', async () => {
+    const user = userEvent.setup();
+    const {container, getByRole} = render(<ClearableTriggerHarness />);
+    const clear = getByRole('button', {name: 'Clear'});
+
+    await user.click(getByRole('button', {name: 'Trigger'}));
+    const popover = container.querySelector('[popover]') as HTMLElement;
+
+    await user.pointer({keys: '[MouseLeft>]', target: clear});
+    expect(clear.getAttribute('popovertarget')).toBe(popover.id);
+
+    await user.pointer({keys: '[/MouseLeft]', target: clear});
+    expect(clear).not.toHaveAttribute('popovertarget');
+  });
+
+  it('takes the invoker off when the press ends in pointercancel', async () => {
+    const user = userEvent.setup();
+    const {container, getByRole} = render(<ClearableTriggerHarness />);
+    const clear = getByRole('button', {name: 'Clear'});
+
+    await user.click(getByRole('button', {name: 'Trigger'}));
+    const popover = container.querySelector('[popover]') as HTMLElement;
+
+    await user.pointer({keys: '[MouseLeft>]', target: clear});
+    expect(clear.getAttribute('popovertarget')).toBe(popover.id);
+
+    // A touch the browser claims — for a scroll, for the platform's long-press
+    // menu — ends here, and no pointerup ever arrives.
+    await act(async () => {
+      document.dispatchEvent(new Event('pointercancel'));
+      await new Promise(resolve => {
+        window.setTimeout(resolve, 0);
+      });
+    });
+
+    expect(clear).not.toHaveAttribute('popovertarget');
+  });
+
+  it('leaves the control alone while the layer is closed', async () => {
+    const user = userEvent.setup();
+    const {getByRole} = render(<ClearableTriggerHarness />);
+    const clear = getByRole('button', {name: 'Clear'});
+
+    await user.click(clear);
+
+    expect(clear).not.toHaveAttribute('popovertarget');
+  });
+
+  it("cancels the invoker's own toggle so the press cannot close the layer", async () => {
+    const user = userEvent.setup();
+    const {container, getByRole} = render(<ClearableTriggerHarness />);
+    await user.click(getByRole('button', {name: 'Trigger'}));
+    const popover = container.querySelector('[popover]') as HTMLElement;
+    const clear = getByRole('button', {name: 'Clear'});
+
+    const click = new MouseEvent('click', {bubbles: true, cancelable: true});
+    await act(async () => {
+      clear.setAttribute('popovertarget', popover.id);
+      clear.dispatchEvent(click);
+    });
+
+    expect(click.defaultPrevented).toBe(true);
+    expect(clear).not.toHaveAttribute('popovertarget');
+  });
+});
+
+describe('wasJustDismissed (light dismiss vs. the trigger click, #5004)', () => {
+  function GuardedTriggerHarness() {
+    const layer = useLayerInternal({mode: 'context'});
+    return (
+      <>
+        <button
+          type="button"
+          ref={layer.ref}
+          onClick={() => {
+            if (layer.wasJustDismissed()) {
+              return;
+            }
+            if (layer.isOpen) {
+              layer.hide();
+            } else {
+              layer.show();
+            }
+          }}>
+          Trigger
+        </button>
+        <span data-testid="state">{layer.isOpen ? 'open' : 'closed'}</span>
+        {layer.render(<span>Layer content</span>, {placement: 'below'})}
+      </>
+    );
+  }
+
+  /**
+   * The browser closing the layer itself: it hides the element and queues a
+   * `toggle` event, which is what reaches React — before the click, on the
+   * engines that lose the race.
+   */
+  function lightDismiss(container: HTMLElement) {
+    const popover = container.querySelector('[popover]') as HTMLElement;
+    act(() => {
+      popover.dispatchEvent(
+        Object.assign(new Event('toggle'), {
+          oldState: 'open',
+          newState: 'closed',
+        }),
+      );
+    });
+  }
+
+  it('absorbs the trigger click that follows a light dismiss', async () => {
+    const user = userEvent.setup();
+    const {container, getByRole, getByTestId} = render(
+      <GuardedTriggerHarness />,
+    );
+    const trigger = getByRole('button', {name: 'Trigger'});
+
+    await user.click(trigger);
+    expect(getByTestId('state')).toHaveTextContent('open');
+
+    // The next press reaches the browser dismissal before its click.
+    fireEvent.pointerDown(trigger);
+    lightDismiss(container);
+    fireEvent.click(trigger);
+
+    expect(getByTestId('state')).toHaveTextContent('closed');
+  });
+
+  it('acts on a deliberate second press', async () => {
+    const user = userEvent.setup();
+    const {container, getByRole, getByTestId} = render(
+      <GuardedTriggerHarness />,
+    );
+    const trigger = getByRole('button', {name: 'Trigger'});
+
+    await user.click(trigger);
+    fireEvent.pointerDown(trigger);
+    lightDismiss(container);
+    fireEvent.click(trigger);
+    // A press of its own — a new gesture, however soon it lands.
+    await user.click(trigger);
+
+    expect(getByTestId('state')).toHaveTextContent('open');
+  });
+
+  it('leaves a programmatic hide unguarded', async () => {
+    const user = userEvent.setup();
+    const {getByRole, getByTestId} = render(<GuardedTriggerHarness />);
+    const trigger = getByRole('button', {name: 'Trigger'});
+
+    // Three presses with no browser-initiated close between them.
+    await user.click(trigger);
+    await user.click(trigger);
+    await user.click(trigger);
+
+    expect(getByTestId('state')).toHaveTextContent('open');
+  });
+
+  it('acts on a synthesized click after a stopped click-first dismissal', async () => {
+    const user = userEvent.setup();
+    const {container, getByRole, getByTestId} = render(
+      <GuardedTriggerHarness />,
+    );
+    const trigger = getByRole('button', {name: 'Trigger'});
+
+    await user.click(trigger);
+    fireEvent.pointerDown(document.body);
+    document.body.addEventListener('click', event => event.stopPropagation(), {
+      once: true,
+    });
+    fireEvent.click(document.body);
+    lightDismiss(container);
+    expect(getByTestId('state')).toHaveTextContent('closed');
+
+    // Chromium delivers the dismissing click before the queued toggle. A later
+    // bare click is a new activation even though it has no pointerdown.
+    act(() => {
+      trigger.click();
+    });
+
+    expect(getByTestId('state')).toHaveTextContent('open');
+  });
+
+  /** A trigger that calls show()/hide() directly, checking nothing. */
+  function PlainTriggerHarness() {
+    const layer = useLayerInternal({mode: 'context'});
+    return (
+      <>
+        <button
+          type="button"
+          ref={layer.ref}
+          onClick={() => (layer.isOpen ? layer.hide() : layer.show())}>
+          Trigger
+        </button>
+        <span data-testid="state">{layer.isOpen ? 'open' : 'closed'}</span>
+        {layer.render(<span>Layer content</span>, {placement: 'below'})}
+      </>
+    );
+  }
+
+  it('absorbs the click for a trigger that never calls wasJustDismissed', async () => {
+    const user = userEvent.setup();
+    const {container, getByRole, getByTestId} = render(<PlainTriggerHarness />);
+    const trigger = getByRole('button', {name: 'Trigger'});
+
+    await user.click(trigger);
+    expect(getByTestId('state')).toHaveTextContent('open');
+
+    fireEvent.pointerDown(trigger);
+    lightDismiss(container);
+    fireEvent.click(trigger);
+
+    expect(getByTestId('state')).toHaveTextContent('closed');
+  });
+});