@astryxdesign/core 0.1.9 → 0.2.0-canary.0b7a99e

package/src/DropdownMenu/DropdownMenuRadioGroup.tsx

@@ -49,16 +49,13 @@ export interface DropdownMenuRadioGroupProps extends Omit<
    */
   onChange: (value: string) => void;
   /**
-   * Accessible label for the group. Required (together with `aria-labelledby`,
-   * one of the two) so screen readers announce the radios as a named set,
-   * e.g. "Sort by".
+   * Accessible name for the group, announced by screen readers so the radios
+   * read as a named set (e.g. "Sort by"). Applied as the group's `aria-label`.
+   * Required -- an unnamed radio group is an accessibility defect. Pass
+   * `aria-labelledby` (via base props) instead if the name already exists as a
+   * visible element on the page.
    */
-  'aria-label'?: string;
-  /**
-   * The id of an element that labels the group, as an alternative to
-   * `aria-label`.
-   */
-  'aria-labelledby'?: string;
+  label: string;
   /**
    * Whether selecting a value closes the menu. Radio items default to closing
    * on selection (a single-choice commit), unlike checkbox items which stay
@@ -82,7 +79,7 @@ export interface DropdownMenuRadioGroupProps extends Omit<
  *   DropdownMenuRadioItem,
  * } from '@astryxdesign/core/DropdownMenu';
  * <DropdownMenu button={{label: 'Sort'}}>
- *   <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
+ *   <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
  *     <DropdownMenuRadioItem value="newest" label="Newest" />
  *     <DropdownMenuRadioItem value="oldest" label="Oldest" />
  *   </DropdownMenuRadioGroup>
@@ -92,6 +89,7 @@ export interface DropdownMenuRadioGroupProps extends Omit<
 export function DropdownMenuRadioGroup({
   value,
   onChange,
+  label,
   hasCloseOnSelect = true,
   children,
   className,
@@ -107,6 +105,7 @@ export function DropdownMenuRadioGroup({
     <div
       {...rest}
       role="group"
+      aria-label={label}
       {...mergeProps(stylex.props(styles.group), {className, style})}>
       <DropdownMenuRadioGroupContext value={contextValue}>
         {children}

package/src/DropdownMenu/DropdownMenuRadioItem.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'DropdownMenuRadioItem',

package/src/DropdownMenu/DropdownMenuRadioItem.tsx

@@ -21,11 +21,12 @@
  * has no registry glyph).
  */
 
-import {useCallback, type ReactNode} from 'react';
+import {useCallback, type PointerEvent, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {renderIconSlot, type IconType} from '../Icon';
 import {Item} from '../Item';
 import {useDropdownMenuContext} from './DropdownMenuContext';
+import {focusMenuItemOnHover} from './menuItemHover';
 import {
   colorVars,
   spacingVars,
@@ -45,7 +46,6 @@ const styles = stylex.create({
     backgroundColor: {
       default: 'transparent',
       ':focus': colorVars['--color-overlay-hover'],
-      ':hover': colorVars['--color-overlay-hover'],
     },
     cursor: 'pointer',
     outline: 'none',
@@ -145,7 +145,7 @@ export interface DropdownMenuRadioItemProps extends Omit<
  *
  * @example
  * ```
- * <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
+ * <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
  *   <DropdownMenuRadioItem value="newest" label="Newest" />
  *   <DropdownMenuRadioItem value="oldest" label="Oldest" icon="clock" />
  * </DropdownMenuRadioGroup>
@@ -184,12 +184,18 @@ export function DropdownMenuRadioItem({
     }
   }, [isDisabled, groupCtx, value, menuCtx]);
 
+  const handlePointerMove = useCallback(
+    (e: PointerEvent<HTMLElement>) => focusMenuItemOnHover(e, isDisabled),
+    [isDisabled],
+  );
+
   return (
     <Item
       {...rest}
       role="menuitemradio"
       aria-checked={isChecked}
       tabIndex={isDisabled ? undefined : -1}
+      onPointerMove={handlePointerMove}
       marker={
         <span
           aria-hidden="true"
@@ -206,7 +212,16 @@ export function DropdownMenuRadioItem({
             ),
           )}>
           {isChecked && (
-            <span {...stylex.props(styles.dot, dotSizeStyles[controlSize])} />
+            <span
+              {...mergeProps(
+                themeProps('dropdown-menu-radio-dot', {
+                  size: controlSize,
+                  checked: 'checked',
+                  disabled: isDisabled ? 'disabled' : null,
+                }),
+                stylex.props(styles.dot, dotSizeStyles[controlSize]),
+              )}
+            />
           )}
         </span>
       }

package/src/DropdownMenu/DropdownMenuSelectable.test.tsx

@@ -78,6 +78,37 @@ describe('DropdownMenuCheckboxItem', () => {
     expect(onChangeSpy).toHaveBeenCalledWith(true);
   });
 
+  it('keeps the composed checkbox decorative (row is the only announced control)', async () => {
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu button={{label: 'View'}}>
+        <DropdownMenuCheckboxItem label="Show archived" value={true} />
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole('button', {name: /View/}));
+
+    // The row owns role="menuitemcheckbox" — it is the single such control.
+    expect(
+      screen.getAllByRole('menuitemcheckbox', {hidden: true}),
+    ).toHaveLength(1);
+
+    // The composed CheckboxInput is present in the DOM but sits inside an
+    // `aria-hidden` + `inert` subtree: it contributes nothing to the row's
+    // accessible name and its native <input> is out of the tab order and the
+    // accessibility tree, so it is not a second announced/focusable control.
+    // (Browsers enforce inert; jsdom does not model its a11y removal, so this
+    // asserts the aria-hidden/inert boundary directly rather than via role.)
+    const row = screen.getByRole('menuitemcheckbox', {
+      name: /Show archived/,
+      hidden: true,
+    });
+    const input = row.querySelector('input[type="checkbox"]');
+    expect(input).not.toBeNull();
+    const marker = input?.closest('[inert]');
+    expect(marker).not.toBeNull();
+    expect(marker).toHaveAttribute('aria-hidden', 'true');
+  });
+
   it('does not toggle when disabled', async () => {
     const user = userEvent.setup();
     const onChangeSpy = vi.fn();
@@ -110,7 +141,7 @@ describe('DropdownMenuRadioGroup / RadioItem', () => {
         <DropdownMenuRadioGroup
           value="newest"
           onChange={() => {}}
-          aria-label="Sort by">
+          label="Sort by">
           <DropdownMenuRadioItem value="newest" label="Newest" />
           <DropdownMenuRadioItem value="oldest" label="Oldest" />
         </DropdownMenuRadioGroup>
@@ -128,6 +159,39 @@ describe('DropdownMenuRadioGroup / RadioItem', () => {
     ).toBeInTheDocument();
   });
 
+  it('exposes a themeable slot on the checked radio dot', async () => {
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu button={{label: 'Sort'}}>
+        <DropdownMenuRadioGroup
+          value="newest"
+          onChange={() => {}}
+          label="Sort by">
+          <DropdownMenuRadioItem value="newest" label="Newest" />
+          <DropdownMenuRadioItem value="oldest" label="Oldest" />
+        </DropdownMenuRadioGroup>
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole('button', {name: /Sort/}));
+    const checked = screen.getByRole('menuitemradio', {
+      name: 'Newest',
+      hidden: true,
+    });
+    const dot = checked.querySelector('.astryx-dropdown-menu-radio-dot');
+    expect(dot).toBeInTheDocument();
+    // Mirrors the radio container's visual props/states for consistent theming.
+    expect(dot).toHaveAttribute('data-size', 'md');
+    expect(dot).toHaveAttribute('data-checked', 'checked');
+    // The unchecked radio has no dot, so no dot slot either.
+    const unchecked = screen.getByRole('menuitemradio', {
+      name: 'Oldest',
+      hidden: true,
+    });
+    expect(
+      unchecked.querySelector('.astryx-dropdown-menu-radio-dot'),
+    ).not.toBeInTheDocument();
+  });
+
   it('calls onChange with the selected value', async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
@@ -136,7 +200,7 @@ describe('DropdownMenuRadioGroup / RadioItem', () => {
         <DropdownMenuRadioGroup
           value="newest"
           onChange={onChange}
-          aria-label="Sort by">
+          label="Sort by">
           <DropdownMenuRadioItem value="newest" label="Newest" />
           <DropdownMenuRadioItem value="oldest" label="Oldest" />
         </DropdownMenuRadioGroup>
@@ -149,6 +213,24 @@ describe('DropdownMenuRadioGroup / RadioItem', () => {
     expect(onChange).toHaveBeenCalledWith('oldest');
   });
 
+  it('names the group from the required label prop', async () => {
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu button={{label: 'Sort'}}>
+        <DropdownMenuRadioGroup
+          value="newest"
+          onChange={() => {}}
+          label="Sort by">
+          <DropdownMenuRadioItem value="newest" label="Newest" />
+        </DropdownMenuRadioGroup>
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole('button', {name: /Sort/}));
+    expect(
+      screen.getByRole('group', {name: 'Sort by', hidden: true}),
+    ).toBeInTheDocument();
+  });
+
   it('throws when a radio item is used outside a group', () => {
     const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
     expect(() =>

package/src/DropdownMenu/DropdownMenuSubMenu.doc.mjs

@@ -0,0 +1,88 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
+
+export const docs = {
+  name: 'DropdownMenuSubMenu',
+  subComponentOf: 'DropdownMenu',
+  displayName: 'Dropdown Menu Submenu',
+  isHiddenFromOverview: true,
+  description:
+    'A single menu row that reveals a nested flyout of its own items. The row adopts DropdownMenuItem semantics (label / icon / description / isDisabled); its children become the flyout content. Opens inline-end with viewport auto-flip; Right/Enter/Space opens and focuses the first item, Left/Escape closes and returns focus to the trigger (Right/Left swap in RTL). For data-driven menus, give a menu item a nested `items` array instead of using this component directly.',
+  playground: {
+    defaults: {label: 'Move to'},
+  },
+  props: [
+    {
+      name: 'label',
+      type: 'ReactNode',
+      description: 'Primary label text for the trigger row.',
+    },
+    {
+      name: 'icon',
+      type: 'IconType',
+      description:
+        'Icon to display before the label. See `astryx docs icons` for valid semantic names.',
+    },
+    {
+      name: 'description',
+      type: 'ReactNode',
+      description: 'Secondary description text displayed below the label.',
+    },
+    {
+      name: 'children',
+      type: 'ReactNode',
+      description:
+        'The flyout menu items: the same components used at the top level (DropdownMenuItem, nested DropdownMenuSubMenu, selectable items).',
+    },
+    {
+      name: 'isDisabled',
+      type: 'boolean',
+      default: 'false',
+      description:
+        'A disabled submenu renders its trigger row but never opens the flyout.',
+    },
+    {
+      name: 'hasSpinner',
+      type: 'boolean',
+      default: 'false',
+      description:
+        'Show a spinner in place of the caret, e.g. while a lazy submenu\'s children are loading.',
+    },
+    {
+      name: 'menuWidth',
+      type: 'number | string',
+      description: 'Fixed flyout width. Defaults to sizing to its content (min 160px).',
+    },
+    {
+      name: 'onOpenChange',
+      type: '(isOpen: boolean) => void',
+      description: 'Called when the flyout opens or closes.',
+    },
+    {
+      name: 'xstyle',
+      type: 'StyleXStyles',
+      description:
+        'StyleX styles for the trigger row. Must be a stylex.create() value: not an inline style object like style={{}}.',
+    },
+  ],
+};
+
+export const docsDense = {
+  name: 'DropdownMenuSubMenu',
+  isHiddenFromOverview: true,
+  displayName: 'Dropdown Menu Submenu',
+  description:
+    'menu row that reveals a nested flyout of its own children/items (single component, not Sub/SubTrigger/SubContent)',
+  propDescriptions: {
+    label: 'primary label text for the trigger row',
+    icon: 'icon before label',
+    description: 'secondary text below label',
+    children: 'flyout menu items (same components as top level)',
+    isDisabled: 'renders trigger but never opens',
+    hasSpinner: 'spinner instead of caret for async children',
+    menuWidth: 'fixed flyout width (default: content, min 160px)',
+    onOpenChange: 'called when flyout opens/closes',
+    xstyle: 'StyleX styles for the trigger row',
+  },
+};