@astryxdesign/core 0.4.6-canary.cea9ecd → 0.4.6

package/dist/hooks/useListFocus.d.ts

@@ -38,9 +38,7 @@ export interface UseListFocusOptions {
      */
     wrap?: boolean;
     /**
-     * Callback when Escape key is pressed. Supplying it also makes the list
-     * consume the key (`preventDefault`); without it Escape passes through to
-     * the surrounding layer.
+     * Callback when Escape key is pressed.
      */
     onEscape?: () => void;
     /**
@@ -146,8 +144,7 @@ export interface UseListFocusReturn<T extends HTMLElement = HTMLElement> {
  * - ArrowUp/ArrowLeft: Move to previous item (wraps to last)
  * - Home: Move to first item
  * - End: Move to last item
- * - Escape: runs `onEscape` and consumes the key. With no `onEscape` the key
- *   is left alone, so a surrounding layer can still dismiss on it.
+ * - Escape: Custom callback (e.g., close menu)
  *
  * By default the hook only *moves* focus and leaves `tabindex` management to
  * the caller. Opt into {@link UseListFocusOptions.hasRovingTabIndex} for a hook

package/dist/hooks/useListFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListFocus.d.ts","sourceRoot":"","sources":["../../src/hooks/useListFocus.ts"],"names":[],"mappings":"AAwBA;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAEtE;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;;;;;;;;;;;OAgBG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC;IAEnC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;OAWG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;;;;;;;;;OAYG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACrE;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAEnC;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAEhD;;;;OAIG;IACH,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE3C;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,EAAE,MAAM,OAAO,CAAC;IAE1B;;OAEG;IACH,SAAS,EAAE,MAAM,OAAO,CAAC;IAEzB;;;;;;OAMG;IACH,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,OAAO,CAAC;IAE/C;;;;;OAKG;IACH,QAAQ,EAAE,MAAM,WAAW,EAAE,CAAC;CAC/B;AA+FD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAC9D,OAAO,GAAE,mBAAwB,GAChC,kBAAkB,CAAC,CAAC,CAAC,CA2VvB"}
+{"version":3,"file":"useListFocus.d.ts","sourceRoot":"","sources":["../../src/hooks/useListFocus.ts"],"names":[],"mappings":"AAsBA;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAEtE;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;;;;;;;;;;;OAgBG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC;IAEnC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;OAWG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;;;;;;;;;OAYG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACrE;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAEnC;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAEhD;;;;OAIG;IACH,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE3C;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,EAAE,MAAM,OAAO,CAAC;IAE1B;;OAEG;IACH,SAAS,EAAE,MAAM,OAAO,CAAC;IAEzB;;;;;;OAMG;IACH,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,OAAO,CAAC;IAE/C;;;;;OAKG;IACH,QAAQ,EAAE,MAAM,WAAW,EAAE,CAAC;CAC/B;AA+FD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAC9D,OAAO,GAAE,mBAAwB,GAChC,kBAAkB,CAAC,CAAC,CAAC,CAwVvB"}

package/dist/hooks/useListFocus.js

@@ -14,8 +14,6 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/index.ts
- * - /packages/core/src/hooks/useListFocus.doc.mjs
- * - /packages/core/src/hooks/useListFocus.test.tsx
  */
 import { useCallback, useRef } from 'react';
 import { isRtlElement } from "./isRtlElement.js";
@@ -129,8 +127,7 @@ function shouldDeferToCaret(target, key) {
  * - ArrowUp/ArrowLeft: Move to previous item (wraps to last)
  * - Home: Move to first item
  * - End: Move to last item
- * - Escape: runs `onEscape` and consumes the key. With no `onEscape` the key
- *   is left alone, so a surrounding layer can still dismiss on it.
+ * - Escape: Custom callback (e.g., close menu)
  *
  * By default the hook only *moves* focus and leaves `tabindex` management to
  * the caller. Opt into {@link UseListFocusOptions.hasRovingTabIndex} for a hook
@@ -383,15 +380,12 @@ export function useListFocus(options = {}) {
       return;
     }
 
-    // Escape is handled regardless of orientation, but only *consumed* when
-    // a handler asked for it: a list with no dismissal to perform must leave
-    // the key to whatever host layer does have one, and those defer to
-    // `defaultPrevented` (see `useFocusTrap`) or to the native popover.
+    // Escape is handled regardless of orientation. Preserve the historical
+    // behavior of always consuming Escape here (preventDefault) so consumers
+    // that relied on it are unaffected.
     if (e.key === 'Escape') {
-      if (onEscape) {
-        e.preventDefault();
-        onEscape();
-      }
+      e.preventDefault();
+      onEscape?.();
       return;
     }
     const horizontal = orientation === 'horizontal' || orientation === 'both';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.4.6-canary.cea9ecd",
+  "version": "0.4.6",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -656,7 +656,6 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.4.6-canary.cea9ecd",
     "@babel/cli": "^8.0.4",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^8.0.1",
@@ -665,7 +664,8 @@
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
-    "rimraf": "^6.0.1"
+    "rimraf": "^6.0.1",
+    "@astryxdesign/cli": "0.4.6"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/src/Popover/Popover.test.tsx

@@ -2,8 +2,7 @@
 
 /**
  * @file Popover.test.tsx
- * @input Uses vitest, @testing-library/react, Popover, Dialog,
- *   SegmentedControl
+ * @input Uses vitest, @testing-library/react, Popover component
  * @output Unit tests for Popover component behavior
  * @position Testing; validates Popover.tsx implementation
  *
@@ -15,7 +14,6 @@ import {render, screen, fireEvent} from '@testing-library/react';
 import React, {useRef} from 'react';
 import {Popover} from './Popover';
 import {Dialog} from '../Dialog';
-import {SegmentedControl, SegmentedControlItem} from '../SegmentedControl';
 
 // Store original matches to restore later
 const originalMatches = HTMLElement.prototype.matches;
@@ -308,30 +306,6 @@ describe('Popover', () => {
       expect(trigger).toHaveAttribute('aria-expanded', 'false');
     });
 
-    it('dismisses on Escape pressed inside a roving-focus list', () => {
-      render(
-        <Popover
-          content={
-            <SegmentedControl value="grid" onChange={() => {}} label="View">
-              <SegmentedControlItem value="grid" label="Grid" />
-              <SegmentedControlItem value="list" label="List" />
-            </SegmentedControl>
-          }
-          label="Test">
-          <button type="button">Open</button>
-        </Popover>,
-      );
-      const trigger = screen.getByRole('button', {name: 'Open'});
-      fireEvent.click(trigger);
-      expect(trigger).toHaveAttribute('aria-expanded', 'true');
-
-      // From the segment, so the list's own key handler runs first. jsdom has
-      // no popover display, so the open content still reads as hidden.
-      const segment = screen.getByRole('radio', {name: 'Grid', hidden: true});
-      fireEvent.keyDown(segment, {key: 'Escape'});
-      expect(trigger).toHaveAttribute('aria-expanded', 'false');
-    });
-
     it('stays open on Escape when hasEscapeDismiss is false', () => {
       render(
         <Popover

package/src/hooks/useListFocus.doc.mjs

@@ -36,7 +36,7 @@ export const docs = {
     {
       name: 'options.onEscape',
       type: '() => void',
-      description: 'Callback when Escape key is pressed (e.g., close menu). Supplying it also consumes the key (preventDefault); without it Escape passes through to the surrounding layer.',
+      description: 'Callback when Escape key is pressed (e.g., close menu).',
       required: false,
     },
     {
@@ -144,7 +144,7 @@ export const docsDense = {
     'options.itemSelector': 'selector for focusable items in list.',
     'options.boundarySelector': "boundary selector for lists that contain nested lists (e.g. submenu flyouts); scopes items + key handling to this level.",
     'options.wrap': 'whether arrow navigation wraps around at ends.',
-    'options.onEscape': 'callback when Escape key pressed (e.g. close menu). Also consumes the key; without it Escape passes through to the surrounding layer.',
+    'options.onEscape': 'callback when Escape key pressed (e.g. close menu).',
     'options.orientation': "navigation orientation. 'horizontal' uses ArrowLeft/ArrowRight, 'vertical' uses ArrowUp/ArrowDown, 'both' accepts all four arrows.",
     'options.hasHomeEnd': 'whether Home/End jump to first/last enabled item.',
     'options.isRtl': 'ArrowLeft/ArrowRight swap for horizontal nav (RTL). default: auto-detect from container computed direction; explicit boolean wins.',

package/src/hooks/useListFocus.test.tsx

@@ -3,14 +3,14 @@
 /**
  * @file useListFocus.test.tsx
  * @input Uses vitest, @testing-library/react, useListFocus hook
- * @output Unit tests for useListFocus disabled-item skipping, navigation,
- *   Escape consumption, and RTL auto-detection
+ * @output Unit tests for useListFocus disabled-item skipping, navigation, and
+ *   RTL auto-detection
  * @position Testing; validates useListFocus.ts keyboard navigation
  *
  * SYNC: When useListFocus.ts changes, update tests to match new behavior
  */
 
-import {describe, it, expect, vi} from 'vitest';
+import {describe, it, expect} from 'vitest';
 import type {KeyboardEvent as ReactKeyboardEvent} from 'react';
 import {render, screen, fireEvent} from '@testing-library/react';
 import {useListFocus} from './useListFocus';
@@ -525,65 +525,3 @@ describe('useListFocus boundarySelector (nested lists)', () => {
     expect(innerProbe).toHaveAttribute('data-owns', 'false');
   });
 });
-
-// A list inside a host that dismisses on Escape. The host's guard mirrors
-// `useFocusTrap`: it acts only on a key no inner handler has consumed.
-function EscapeHost({
-  onEscape,
-  onHostEscape,
-}: {
-  onEscape?: () => void;
-  onHostEscape: () => void;
-}) {
-  const {listRef, handleKeyDown} = useListFocus<HTMLDivElement>({onEscape});
-  return (
-    <div
-      data-testid="host"
-      onKeyDown={e => {
-        if (e.key === 'Escape' && !e.defaultPrevented) {
-          onHostEscape();
-        }
-      }}>
-      <div ref={listRef} role="menu" onKeyDown={handleKeyDown}>
-        <div role="menuitem" tabIndex={-1} data-testid="One">
-          One
-        </div>
-        <div role="menuitem" tabIndex={-1} data-testid="Two">
-          Two
-        </div>
-      </div>
-    </div>
-  );
-}
-
-describe('useListFocus Escape', () => {
-  it('leaves Escape to the host when no onEscape is supplied', () => {
-    const onHostEscape = vi.fn();
-    render(<EscapeHost onHostEscape={onHostEscape} />);
-
-    fireEvent.keyDown(screen.getByRole('menu'), {key: 'Escape'});
-    expect(onHostEscape).toHaveBeenCalledTimes(1);
-  });
-
-  it('consumes Escape and runs onEscape when one is supplied', () => {
-    const onEscape = vi.fn();
-    const onHostEscape = vi.fn();
-    render(<EscapeHost onEscape={onEscape} onHostEscape={onHostEscape} />);
-
-    fireEvent.keyDown(screen.getByRole('menu'), {key: 'Escape'});
-    expect(onEscape).toHaveBeenCalledTimes(1);
-    expect(onHostEscape).not.toHaveBeenCalled();
-  });
-
-  it('still consumes arrow keys with no onEscape (page-scroll suppression)', () => {
-    render(<EscapeHost onHostEscape={() => {}} />);
-    screen.getByTestId('One').focus();
-
-    // fireEvent returns false when a handler cancelled the event.
-    const wasCancelled = !fireEvent.keyDown(screen.getByRole('menu'), {
-      key: 'ArrowDown',
-    });
-    expect(wasCancelled).toBe(true);
-    expect(screen.getByTestId('Two')).toHaveFocus();
-  });
-});

package/src/hooks/useListFocus.ts

@@ -14,8 +14,6 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/index.ts
- * - /packages/core/src/hooks/useListFocus.doc.mjs
- * - /packages/core/src/hooks/useListFocus.test.tsx
  */
 
 import {useCallback, useRef} from 'react';
@@ -66,9 +64,7 @@ export interface UseListFocusOptions {
   wrap?: boolean;
 
   /**
-   * Callback when Escape key is pressed. Supplying it also makes the list
-   * consume the key (`preventDefault`); without it Escape passes through to
-   * the surrounding layer.
+   * Callback when Escape key is pressed.
    */
   onEscape?: () => void;
 
@@ -281,8 +277,7 @@ function shouldDeferToCaret(target: EventTarget | null, key: string): boolean {
  * - ArrowUp/ArrowLeft: Move to previous item (wraps to last)
  * - Home: Move to first item
  * - End: Move to last item
- * - Escape: runs `onEscape` and consumes the key. With no `onEscape` the key
- *   is left alone, so a surrounding layer can still dismiss on it.
+ * - Escape: Custom callback (e.g., close menu)
  *
  * By default the hook only *moves* focus and leaves `tabindex` management to
  * the caller. Opt into {@link UseListFocusOptions.hasRovingTabIndex} for a hook
@@ -562,15 +557,12 @@ export function useListFocus<T extends HTMLElement = HTMLElement>(
         return;
       }
 
-      // Escape is handled regardless of orientation, but only *consumed* when
-      // a handler asked for it: a list with no dismissal to perform must leave
-      // the key to whatever host layer does have one, and those defer to
-      // `defaultPrevented` (see `useFocusTrap`) or to the native popover.
+      // Escape is handled regardless of orientation. Preserve the historical
+      // behavior of always consuming Escape here (preventDefault) so consumers
+      // that relied on it are unaffected.
       if (e.key === 'Escape') {
-        if (onEscape) {
-          e.preventDefault();
-          onEscape();
-        }
+        e.preventDefault();
+        onEscape?.();
         return;
       }