@astryxdesign/core 0.1.7-canary.eb8e07b → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.1.7-canary.eb8e07b",
+  "version": "0.1.7",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",

package/src/ContextMenu/ContextMenu.test.tsx

@@ -12,12 +12,7 @@ import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {ContextMenu} from './ContextMenu';
-import {
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-} from './index';
+import {ContextMenuItem} from './index';
 import {DropdownMenuItem} from '../DropdownMenu/DropdownMenuItem';
 import {Divider} from '../Divider';
 
@@ -542,72 +537,3 @@ describe('ContextMenu compound mode', () => {
     });
   });
 });
-
-describe('ContextMenu selectable items', () => {
-  it('renders checkbox and radio items with correct roles and state', () => {
-    render(
-      <ContextMenu
-        menuContent={
-          <>
-            <ContextMenuRadioGroup
-              value="name"
-              onChange={() => {}}
-              aria-label="Sort by">
-              <ContextMenuRadioItem value="name" label="Sort by name" />
-              <ContextMenuRadioItem value="date" label="Sort by date" />
-            </ContextMenuRadioGroup>
-            <ContextMenuCheckboxItem label="Show hidden" value={true} />
-          </>
-        }>
-        <div>Right-click me</div>
-      </ContextMenu>,
-    );
-    expect(
-      screen.getByRole('menuitemradio', {name: 'Sort by name', hidden: true}),
-    ).toHaveAttribute('aria-checked', 'true');
-    expect(
-      screen.getByRole('menuitemradio', {name: 'Sort by date', hidden: true}),
-    ).toHaveAttribute('aria-checked', 'false');
-    expect(
-      screen.getByRole('menuitemcheckbox', {name: 'Show hidden', hidden: true}),
-    ).toHaveAttribute('aria-checked', 'true');
-    expect(
-      screen.getByRole('group', {name: 'Sort by', hidden: true}),
-    ).toBeInTheDocument();
-  });
-
-  it('fires onChange for radio and checkbox items', async () => {
-    const user = userEvent.setup();
-    const onSort = vi.fn();
-    const onToggle = vi.fn();
-    render(
-      <ContextMenu
-        menuContent={
-          <>
-            <ContextMenuRadioGroup
-              value="name"
-              onChange={onSort}
-              aria-label="Sort by">
-              <ContextMenuRadioItem value="name" label="Sort by name" />
-              <ContextMenuRadioItem value="date" label="Sort by date" />
-            </ContextMenuRadioGroup>
-            <ContextMenuCheckboxItem
-              label="Show hidden"
-              value={false}
-              onChange={onToggle}
-            />
-          </>
-        }>
-        <div>Right-click me</div>
-      </ContextMenu>,
-    );
-    await user.click(
-      screen.getByRole('menuitemradio', {name: 'Sort by date', hidden: true}),
-    );
-    expect(onSort).toHaveBeenCalledWith('date');
-    await user.click(
-      screen.getByRole('menuitemcheckbox', {name: 'Show hidden', hidden: true}),
-    );
-    expect(onToggle).toHaveBeenCalledWith(true);
-  });
-});

package/src/ContextMenu/ContextMenu.tsx

@@ -46,10 +46,6 @@ import {
   DropdownMenuContext,
   type DropdownMenuContextValue,
 } from '../DropdownMenu/DropdownMenuContext';
-import {
-  MENU_ITEM_ROLES,
-  MENU_ITEM_SELECTOR,
-} from '../DropdownMenu/menuItemRoles';
 import {useListFocus} from '../hooks/useListFocus';
 import {useTypeahead} from '../hooks/useTypeahead';
 import {useLongPress} from '../hooks/useLongPress';
@@ -269,7 +265,7 @@ export function ContextMenu({
     focusFirst,
     focusItem,
   } = useListFocus<HTMLDivElement>({
-    itemSelector: MENU_ITEM_SELECTOR,
+    itemSelector: '[role="menuitem"]:not([aria-disabled="true"])',
     wrap: false,
     onEscape: closeMenu,
   });
@@ -279,7 +275,9 @@ export function ContextMenu({
     (): HTMLElement[] =>
       listRef.current
         ? Array.from(
-            listRef.current.querySelectorAll<HTMLElement>(MENU_ITEM_SELECTOR),
+            listRef.current.querySelectorAll<HTMLElement>(
+              '[role="menuitem"]:not([aria-disabled="true"])',
+            ),
           )
         : [],
     [listRef],
@@ -343,10 +341,7 @@ export function ContextMenu({
       if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         const focused = document.activeElement as HTMLElement | null;
-        if (
-          focused &&
-          MENU_ITEM_ROLES.has(focused.getAttribute('role') ?? '')
-        ) {
+        if (focused?.getAttribute('role') === 'menuitem') {
           focused.click();
         }
         return;

package/src/ContextMenu/index.ts

@@ -20,18 +20,3 @@ export {
   DropdownMenuItem as ContextMenuItem,
   type DropdownMenuItemProps as ContextMenuItemProps,
 } from '../DropdownMenu/DropdownMenuItem';
-
-// Selectable items work inside a ContextMenu too — re-exported under the
-// ContextMenu name for a coherent API.
-export {
-  DropdownMenuCheckboxItem as ContextMenuCheckboxItem,
-  type DropdownMenuCheckboxItemProps as ContextMenuCheckboxItemProps,
-} from '../DropdownMenu/DropdownMenuCheckboxItem';
-export {
-  DropdownMenuRadioGroup as ContextMenuRadioGroup,
-  type DropdownMenuRadioGroupProps as ContextMenuRadioGroupProps,
-} from '../DropdownMenu/DropdownMenuRadioGroup';
-export {
-  DropdownMenuRadioItem as ContextMenuRadioItem,
-  type DropdownMenuRadioItemProps as ContextMenuRadioItemProps,
-} from '../DropdownMenu/DropdownMenuRadioItem';

package/src/DropdownMenu/DropdownMenu.doc.mjs

@@ -12,16 +12,6 @@ export const docs = {
     targets: [
       {className: 'astryx-dropdown-menu'},
       {className: 'astryx-dropdown-menu-item', visualProps: ['size']},
-      {
-        className: 'astryx-dropdown-menu-checkbox',
-        visualProps: ['size'],
-        states: ['checked', 'disabled'],
-      },
-      {
-        className: 'astryx-dropdown-menu-radio',
-        visualProps: ['size'],
-        states: ['checked', 'disabled'],
-      },
     ],
     vars: [
       {name: '--_dropdown-menu-radius', description: 'Border radius of the menu popup', default: 'var(--radius-element)', private: true},

package/src/DropdownMenu/DropdownMenu.tsx

@@ -38,7 +38,6 @@ import {Icon} from '../Icon';
 import type {IconType} from '../Icon';
 
 import {renderDropdownItems} from './renderDropdownItems';
-import {MENU_ITEM_ROLES, MENU_ITEM_SELECTOR} from './menuItemRoles';
 import {
   DropdownMenuContext,
   type DropdownMenuContextValue,
@@ -256,17 +255,14 @@ export function DropdownMenu({
     popover.hide();
   }, [popover]);
 
-  // Single keyboard navigation path for both modes.
-  // The selector matches plain items plus selectable items
-  // (menuitemradio/menuitemcheckbox) so lab checkbox/radio rows are reachable
-  // and roved to alongside plain items — not just role="menuitem".
+  // Single keyboard navigation path for both modes
   const {
     listRef,
     handleKeyDown: listNavKeyDown,
     focusFirst,
     focusItem,
   } = useListFocus<HTMLDivElement>({
-    itemSelector: MENU_ITEM_SELECTOR,
+    itemSelector: '[role="menuitem"]:not([aria-disabled="true"])',
     wrap: false,
     onEscape: closeMenu,
   });
@@ -277,7 +273,9 @@ export function DropdownMenu({
     (): HTMLElement[] =>
       listRef.current
         ? Array.from(
-            listRef.current.querySelectorAll<HTMLElement>(MENU_ITEM_SELECTOR),
+            listRef.current.querySelectorAll<HTMLElement>(
+              '[role="menuitem"]:not([aria-disabled="true"])',
+            ),
           )
         : [],
     [listRef],
@@ -310,10 +308,7 @@ export function DropdownMenu({
       if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         const focused = document.activeElement as HTMLElement | null;
-        if (
-          focused &&
-          MENU_ITEM_ROLES.has(focused.getAttribute('role') ?? '')
-        ) {
+        if (focused?.getAttribute('role') === 'menuitem') {
           focused.click();
         }
         return;

package/src/DropdownMenu/DropdownMenuContext.tsx

@@ -14,14 +14,11 @@
 
 import {createContext, use} from 'react';
 
-/** Menu size, derived from the trigger button size. */
-export type DropdownMenuSize = 'sm' | 'md' | 'lg';
-
 export interface DropdownMenuContextValue {
   /** Close the menu and return focus to trigger */
   closeMenu: () => void;
   /** Menu size derived from button size */
-  menuSize: DropdownMenuSize;
+  menuSize: 'sm' | 'md' | 'lg';
 }
 
 export const DropdownMenuContext =
@@ -35,28 +32,3 @@ DropdownMenuContext.displayName = 'DropdownMenuContext';
 export function useDropdownMenuContext(): DropdownMenuContextValue | null {
   return use(DropdownMenuContext);
 }
-
-// =============================================================================
-// Radio group coordination
-// =============================================================================
-
-export interface DropdownMenuRadioGroupContextValue {
-  /** The currently selected value in the group. */
-  value: string | undefined;
-  /** Select a value. Called by a DropdownMenuRadioItem on activation. */
-  onChange: (value: string) => void;
-  /** Whether selecting an item should close the menu. @default true */
-  hasCloseOnSelect: boolean;
-}
-
-export const DropdownMenuRadioGroupContext =
-  createContext<DropdownMenuRadioGroupContextValue | null>(null);
-DropdownMenuRadioGroupContext.displayName = 'DropdownMenuRadioGroupContext';
-
-/**
- * Read the enclosing radio group's selection state.
- * Returns null when used outside a DropdownMenuRadioGroup.
- */
-export function useDropdownMenuRadioGroupContext(): DropdownMenuRadioGroupContextValue | null {
-  return use(DropdownMenuRadioGroupContext);
-}

package/src/DropdownMenu/index.ts

@@ -18,27 +18,7 @@ export {
   type DropdownMenuOption,
 } from './DropdownMenu';
 
-export {DropdownMenuItem, type DropdownMenuItemProps} from './DropdownMenuItem';
-
-// Selectable items — checkbox (independent) and radio (single-select group).
-export {
-  DropdownMenuCheckboxItem,
-  type DropdownMenuCheckboxItemProps,
-} from './DropdownMenuCheckboxItem';
-export {
-  DropdownMenuRadioGroup,
-  type DropdownMenuRadioGroupProps,
-} from './DropdownMenuRadioGroup';
-export {
-  DropdownMenuRadioItem,
-  type DropdownMenuRadioItemProps,
-} from './DropdownMenuRadioItem';
-
-// Menu-coordination context — public so consumers can build custom menu items
-// that read the menu size / close the menu.
 export {
-  DropdownMenuContext,
-  useDropdownMenuContext,
-  type DropdownMenuContextValue,
-  type DropdownMenuSize,
-} from './DropdownMenuContext';
+  DropdownMenuItem,
+  type DropdownMenuItemProps,
+} from './DropdownMenuItem';

package/src/Icon/Icon.test.tsx

@@ -96,52 +96,6 @@ describe('Icon', () => {
     expect(screen.getByTestId('icon')).toBeInTheDocument();
   });
 
-  it('sizes component-mode icons in rem so they scale with root font-size', () => {
-    const sizes = {
-      xsm: '0.75rem',
-      sm: '1rem',
-      md: '1.25rem',
-      lg: '1.5rem',
-    } as const;
-    for (const [size, expected] of Object.entries(sizes)) {
-      const {unmount} = render(
-        <Icon
-          icon={TestIcon}
-          size={size as keyof typeof sizes}
-          data-testid="icon"
-        />,
-      );
-      const style = getComputedStyle(screen.getByTestId('icon'));
-      expect(style.width).toBe(expected);
-      expect(style.height).toBe(expected);
-      unmount();
-    }
-  });
-
-  it('sizes registry (string-mode) icons in rem, including fontSize', () => {
-    const sizes = {
-      xsm: '0.75rem',
-      sm: '1rem',
-      md: '1.25rem',
-      lg: '1.5rem',
-    } as const;
-    for (const [size, expected] of Object.entries(sizes)) {
-      const {unmount} = render(
-        <Icon
-          icon="check"
-          size={size as keyof typeof sizes}
-          data-testid="icon"
-        />,
-      );
-      const style = getComputedStyle(screen.getByTestId('icon'));
-      expect(style.width).toBe(expected);
-      expect(style.height).toBe(expected);
-      // fontSize is expressed in rem so 1em-based registry icons scale too.
-      expect(style.fontSize).toBe(expected);
-      unmount();
-    }
-  });
-
   it('forwards ref correctly', () => {
     const ref = vi.fn();
     render(<Icon icon={TestIcon} ref={ref} />);

package/src/Icon/Icon.tsx

@@ -111,64 +111,51 @@ const colorStyles = stylex.create({
 /**
  * Size styles for direct SVG icon components.
  * Uses width/height only — SVG components handle their own viewBox scaling.
- *
- * Sizes are expressed in `rem` (relative to the root font-size) so icons scale
- * in step with text when the document font-size changes, matching the rest of
- * the design system's rem-based type scale. Values are the px-equivalents at a
- * 16px root: 12px → 0.75rem, 16px → 1rem, 20px → 1.25rem, 24px → 1.5rem.
  */
 const sizeStyles = stylex.create({
   xsm: {
-    width: '0.75rem',
-    height: '0.75rem',
+    width: 12,
+    height: 12,
   },
   sm: {
-    width: '1rem',
-    height: '1rem',
+    width: 16,
+    height: 16,
   },
   md: {
-    width: '1.25rem',
-    height: '1.25rem',
+    width: 20,
+    height: 20,
   },
   lg: {
-    width: '1.5rem',
-    height: '1.5rem',
+    width: 24,
+    height: 24,
   },
 });
 
 /**
  * Size styles for string-based (registry) icons.
  * Includes fontSize so that 1em-based icons from the registry scale correctly.
- *
- * Expressed in `rem` for the same reason as {@link sizeStyles} — icons track the
- * root font-size instead of being locked to absolute pixels.
  */
 const spanSizeStyles = stylex.create({
-  /* eslint-disable @astryx/no-hardcoded-styles -- fontSize here sizes 1em-based
-     registry SVGs to the icon box; icons use their own 12/16/20/24 scale, not
-     the 14px-anchored textSizeVars type scale. Values are rem so icons track
-     the root font-size. */
   xsm: {
-    width: '0.75rem',
-    height: '0.75rem',
-    fontSize: '0.75rem',
+    width: 12,
+    height: 12,
+    fontSize: 12,
   },
   sm: {
-    width: '1rem',
-    height: '1rem',
-    fontSize: '1rem',
+    width: 16,
+    height: 16,
+    fontSize: 16,
   },
   md: {
-    width: '1.25rem',
-    height: '1.25rem',
-    fontSize: '1.25rem',
+    width: 20,
+    height: 20,
+    fontSize: 20,
   },
   lg: {
-    width: '1.5rem',
-    height: '1.5rem',
-    fontSize: '1.5rem',
+    width: 24,
+    height: 24,
+    fontSize: 24,
   },
-  /* eslint-enable @astryx/no-hardcoded-styles */
 });
 
 // =============================================================================
@@ -207,10 +194,10 @@ export interface IconProps extends Omit<
   color?: IconColor;
   /**
    * The size of the icon.
-   * - 'xsm': 0.75rem (12px at a 16px root)
-   * - 'sm': 1rem (16px at a 16px root)
-   * - 'md': 1.25rem (20px at a 16px root)
-   * - 'lg': 1.5rem (24px at a 16px root)
+   * - 'xsm': 12px
+   * - 'sm': 16px
+   * - 'md': 20px
+   * - 'lg': 24px
    * @default 'md'
    */
   size?: IconSize;

package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts

@@ -1,89 +0,0 @@
-/**
- * @file DropdownMenuCheckboxItem.tsx
- * @input React, stylex, Item + Icon + DropdownMenu context + tokens from core
- * @output DropdownMenuCheckboxItem — a standalone checkable menu item.
- * @position Sub-component; used inside DropdownMenu.
- *
- * A menu item that toggles an independent boolean (role="menuitemcheckbox").
- * Unlike CheckboxInput, there is no nested native <input>: the row itself owns
- * the role and aria-checked, per the WAI-ARIA menuitemcheckbox pattern.
- * Keyboard navigation (arrows/typeahead) and Enter/Space activation come from
- * the parent DropdownMenu's useListFocus + activation path, which matches
- * menuitemcheckbox alongside plain menuitem rows.
- *
- * The square checkbox visual is decorative (aria-hidden) — the row owns the
- * checked state. Its size is derived from the menu's item size (a `sm` menu
- * gets the compact control; `md`/`lg` get the standard one) and it swaps to the
- * inline-end of the row on coarse-pointer (touch) devices via CSS `order`, so
- * it lands where selection toggles are conventionally placed on mobile. The
- * checkmark uses the `check` icon from the active theme's icon registry.
- */
-import { type ReactNode } from 'react';
-import { type IconType } from '../Icon';
-import type { BaseProps } from '../BaseProps';
-export interface DropdownMenuCheckboxItemProps extends Omit<BaseProps, 'onChange' | 'role' | 'aria-checked' | 'tabIndex'> {
-    /**
-     * Primary label text identifying the item.
-     */
-    label: ReactNode;
-    /**
-     * Secondary description text displayed below the label.
-     */
-    description?: ReactNode;
-    /**
-     * Icon to display before the label. Accepts a semantic icon name (see
-     * `npx astryx docs icons`) or a rendered node.
-     */
-    icon?: ReactNode | IconType;
-    /**
-     * Whether the item is checked. Controlled — pair with `onChange`.
-     */
-    value: boolean;
-    /**
-     * Callback fired with the next checked state when the item is toggled.
-     */
-    onChange?: (checked: boolean) => void;
-    /**
-     * Whether the item is disabled. Disabled items stay focusable (via
-     * `aria-disabled`) so they remain discoverable by keyboard and assistive
-     * technology, but activation is blocked.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Whether toggling the item closes the menu. Checkbox items default to
-     * staying open so several can be toggled in a single session, unlike radio
-     * items which default to closing on selection.
-     * @default false
-     */
-    hasCloseOnSelect?: boolean;
-    /**
-     * Content to render after the label and description, such as a keyboard
-     * shortcut hint or badge.
-     */
-    endContent?: ReactNode;
-}
-/**
- * A checkable dropdown menu item (role="menuitemcheckbox").
- *
- * Must be used inside a DropdownMenu. Toggles an independent boolean; for a
- * one-of-N choice use DropdownMenuRadioGroup + DropdownMenuRadioItem instead.
- *
- * @example
- * ```
- *  * import {DropdownMenuCheckboxItem} from '@astryxdesign/core/DropdownMenu';
- *
- * <DropdownMenu button={{label: 'View'}}>
- *   <DropdownMenuCheckboxItem
- *     label="Show archived"
- *     value={showArchived}
- *     onChange={setShowArchived}
- *   />
- * </DropdownMenu>
- * ```
- */
-export declare function DropdownMenuCheckboxItem({ label, description, icon, value, onChange, isDisabled, hasCloseOnSelect, endContent, xstyle, className, style, ...rest }: DropdownMenuCheckboxItemProps): import("react").JSX.Element;
-export declare namespace DropdownMenuCheckboxItem {
-    var displayName: string;
-}
-//# sourceMappingURL=DropdownMenuCheckboxItem.d.ts.map

package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownMenuCheckboxItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuCheckboxItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAElD,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAY5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6D5C,MAAM,WAAW,6BAA8B,SAAQ,IAAI,CACzD,SAAS,EACT,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,UAAU,CAClD;IACC;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAkB,EAClB,gBAAwB,EACxB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,6BAA6B,+BAwD/B;yBArEe,wBAAwB"}