@astryxdesign/core 0.1.6 → 0.1.7-canary.04cd8f7

package/src/ContextMenu/ContextMenu.test.tsx

@@ -12,7 +12,12 @@ 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} from './index';
+import {
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+} from './index';
 import {DropdownMenuItem} from '../DropdownMenu/DropdownMenuItem';
 import {Divider} from '../Divider';
 
@@ -537,3 +542,72 @@ 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,6 +46,10 @@ 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';
@@ -62,6 +66,7 @@ import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {StyleXStyles} from '../theme/types';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 import type {
   DropdownMenuOption,
   DropdownMenuItemData,
@@ -205,7 +210,7 @@ export function ContextMenu({
   children,
   menuWidth,
   size = 'md',
-  label = 'Context menu',
+  label: labelFromProps,
   isDisabled = false,
   onOpenChange,
   ref,
@@ -216,6 +221,8 @@ export function ContextMenu({
   'data-testid': testId,
   ...props
 }: ContextMenuProps) {
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.contextMenu.label');
   const items = ('items' in props ? props.items : undefined) ?? [];
   const menuContent = 'menuContent' in props ? props.menuContent : undefined;
 
@@ -262,7 +269,7 @@ export function ContextMenu({
     focusFirst,
     focusItem,
   } = useListFocus<HTMLDivElement>({
-    itemSelector: '[role="menuitem"]:not([aria-disabled="true"])',
+    itemSelector: MENU_ITEM_SELECTOR,
     wrap: false,
     onEscape: closeMenu,
   });
@@ -272,9 +279,7 @@ export function ContextMenu({
     (): HTMLElement[] =>
       listRef.current
         ? Array.from(
-            listRef.current.querySelectorAll<HTMLElement>(
-              '[role="menuitem"]:not([aria-disabled="true"])',
-            ),
+            listRef.current.querySelectorAll<HTMLElement>(MENU_ITEM_SELECTOR),
           )
         : [],
     [listRef],
@@ -338,7 +343,10 @@ export function ContextMenu({
       if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         const focused = document.activeElement as HTMLElement | null;
-        if (focused?.getAttribute('role') === 'menuitem') {
+        if (
+          focused &&
+          MENU_ITEM_ROLES.has(focused.getAttribute('role') ?? '')
+        ) {
           focused.click();
         }
         return;

package/src/ContextMenu/index.ts

@@ -20,3 +20,18 @@ 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/DateInput/DateInput.doc.mjs

@@ -111,7 +111,7 @@ export const docs = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description:
         'Status indicator object for error, warning, or success states with a message.',
     },
@@ -374,7 +374,7 @@ export const docsZh = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description: '错误、警告或成功状态的状态指示对象，附带消息。',
     },
     {

package/src/DateInput/DateInput.test.tsx

@@ -10,7 +10,13 @@
  */
 
 import {describe, it, expect, vi, beforeEach} from 'vitest';
-import {render, screen, fireEvent, waitFor} from '@testing-library/react';
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+  within,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {getButton, queryButton} from '../__tests__/fastRoleQueries';
 import {DateInput} from './DateInput';
@@ -133,21 +139,27 @@ describe('DateInput', () => {
   });
 
   it('announces an alert message when typed input is invalid', () => {
-    render(<DateInput label="Date" onChange={() => {}} />);
+    // Scope to the component's own container: the embedded Calendar uses the
+    // shared `useAnnounce` hook, whose global polite/assertive live-region pair
+    // (both mounted on document.body by any announce) would otherwise make a
+    // document-wide `getByRole('alert')` ambiguous.
+    const {container} = render(<DateInput label="Date" onChange={() => {}} />);
 
     const input = screen.getByRole('combobox');
     fireEvent.change(input, {target: {value: '13/45/2024'}});
 
-    expect(screen.getByRole('alert')).toHaveTextContent('Invalid date');
+    expect(within(container).getByRole('alert')).toHaveTextContent(
+      'Invalid date',
+    );
   });
 
   it('does not announce an alert message when input is valid', () => {
-    render(<DateInput label="Date" onChange={() => {}} />);
+    const {container} = render(<DateInput label="Date" onChange={() => {}} />);
 
     const input = screen.getByRole('combobox');
     fireEvent.change(input, {target: {value: '03/15/2026'}});
 
-    expect(screen.getByRole('alert')).toHaveTextContent('');
+    expect(within(container).getByRole('alert')).toHaveTextContent('');
     expect(screen.queryByText('Invalid date')).not.toBeInTheDocument();
   });
 

package/src/DateInput/DateInput.tsx

@@ -137,6 +137,7 @@ import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 export interface DateInputProps extends Omit<
   BaseProps,
@@ -311,7 +312,7 @@ export function DateInput({
   min,
   max,
   dateConstraints,
-  placeholder = 'Select a date',
+  placeholder: placeholderFromProps,
   size: sizeProp,
   status,
   labelTooltip,
@@ -324,6 +325,9 @@ export function DateInput({
   ref,
   ...rest
 }: DateInputProps) {
+  const t = useTranslator();
+  const placeholder =
+    placeholderFromProps ?? t('@astryx.dateInput.placeholder');
   const size = useSize(sizeProp, 'md');
   const id = useId();
   const inputLabelID = useId();
@@ -415,8 +419,8 @@ export function DateInput({
       : parseDateInput(pendingInput) !== null;
 
   const popover = usePopover({
-    dialogLabel: 'Choose date',
-    closeButtonLabel: 'Close calendar',
+    dialogLabel: t('@astryx.dateInput.dialogLabel'),
+    closeButtonLabel: t('@astryx.dateInput.closeCalendar'),
     onHide: () => inputRef.current?.focus(),
   });
 
@@ -582,7 +586,11 @@ export function DateInput({
         type="button"
         onClick={handleToggle}
         disabled={isEffectivelyDisabled}
-        aria-label={popover.isOpen ? 'Close calendar' : 'Open calendar'}
+        aria-label={
+          popover.isOpen
+            ? t('@astryx.dateInput.toggleCalendarClose')
+            : t('@astryx.dateInput.openCalendar')
+        }
         {...stylex.props(
           styles.iconButton,
           isEffectivelyDisabled && styles.iconButtonDisabled,
@@ -637,7 +645,7 @@ export function DateInput({
         <button
           type="button"
           onClick={handleClear}
-          aria-label={`Clear ${label}`}
+          aria-label={t('@astryx.dateInput.clear', {label})}
           {...stylex.props(styles.iconButton)}>
           <Icon icon="close" size="sm" color="secondary" />
         </button>

package/src/DateRangeInput/DateRangeInput.doc.mjs

@@ -124,7 +124,7 @@ export const docs = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description: 'Status indicator for error, warning, or success states.',
     },
     {

package/src/DateRangeInput/DateRangeInput.tsx

@@ -54,6 +54,7 @@ import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 export type {DateRange} from '../Calendar';
 
@@ -381,7 +382,7 @@ export function DateRangeInput({
   dateConstraints,
   presets,
   hasClear = true,
-  placeholder = 'Select date range',
+  placeholder: placeholderFromProps,
   size: sizeProp,
   status,
   labelTooltip,
@@ -393,6 +394,9 @@ export function DateRangeInput({
   ref,
   ...rest
 }: DateRangeInputProps) {
+  const t = useTranslator();
+  const placeholder =
+    placeholderFromProps ?? t('@astryx.dateRangeInput.placeholder');
   const size = useSize(sizeProp, 'md');
   const id = useId();
   const descriptionID = useId();
@@ -448,8 +452,8 @@ export function DateRangeInput({
   );
 
   const popover = usePopover({
-    dialogLabel: 'Choose date range',
-    closeButtonLabel: 'Close calendar',
+    dialogLabel: t('@astryx.dateRangeInput.dialogLabel'),
+    closeButtonLabel: t('@astryx.dateInput.closeCalendar'),
   });
 
   const fireChange = useCallback(
@@ -557,7 +561,11 @@ export function DateRangeInput({
           type="button"
           onClick={handleToggle}
           disabled={isEffectivelyDisabled}
-          aria-label={popover.isOpen ? 'Close calendar' : 'Open calendar'}
+          aria-label={
+            popover.isOpen
+              ? t('@astryx.dateInput.toggleCalendarClose')
+              : t('@astryx.dateInput.openCalendar')
+          }
           tabIndex={-1}
           {...stylex.props(
             styles.iconButton,
@@ -594,7 +602,7 @@ export function DateRangeInput({
           <button
             type="button"
             onClick={handleClear}
-            aria-label={`Clear ${label}`}
+            aria-label={t('@astryx.dateInput.clear', {label})}
             {...stylex.props(styles.iconButton)}>
             <Icon icon="close" size="sm" color="secondary" />
           </button>
@@ -613,7 +621,7 @@ export function DateRangeInput({
           {presets && presets.length > 0 && (
             <div
               role="group"
-              aria-label="Preset date ranges"
+              aria-label={t('@astryx.dateRangeInput.presetDateRanges')}
               {...stylex.props(styles.presetSidebar)}>
               {presets.map(preset => {
                 const presetRange = preset.getRange();

package/src/DateTimeInput/DateTimeInput.doc.mjs

@@ -157,7 +157,7 @@ export const docs = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description:
         'Status indicator object for error, warning, or success states with a message.',
     },
@@ -449,7 +449,7 @@ export const docsZh = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description: '错误、警告或成功状态的状态指示对象，附带消息。',
     },
     {

package/src/DateTimeInput/DateTimeInput.tsx

@@ -77,6 +77,7 @@ import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 export type ISODateTimeString = string & {
   readonly __brand: 'ISODateTimeString';
@@ -418,8 +419,8 @@ export function DateTimeInput({
   hourFormat = '12h',
   timeIncrement = 1,
   hasClear = false,
-  placeholder = 'Select a date',
-  timePlaceholder = 'Select a time',
+  placeholder: placeholderFromProps,
+  timePlaceholder: timePlaceholderFromProps,
   timeLabel,
   size: sizeProp,
   status,
@@ -432,6 +433,11 @@ export function DateTimeInput({
   ref,
   ...rest
 }: DateTimeInputProps) {
+  const t = useTranslator();
+  const placeholder =
+    placeholderFromProps ?? t('@astryx.dateTimeInput.placeholder');
+  const timePlaceholder =
+    timePlaceholderFromProps ?? t('@astryx.dateTimeInput.timePlaceholder');
   const size = useSize(sizeProp, 'md');
   const dateInputId = useId();
   const timeInputId = useId();
@@ -599,8 +605,8 @@ export function DateTimeInput({
 
   // --- Popover ---
   const popover = usePopover({
-    dialogLabel: 'Choose date',
-    closeButtonLabel: 'Close calendar',
+    dialogLabel: t('@astryx.dateTimeInput.dialogLabel'),
+    closeButtonLabel: t('@astryx.dateInput.closeCalendar'),
     onHide: () => dateInputRef.current?.focus(),
   });
 
@@ -887,7 +893,11 @@ export function DateTimeInput({
             type="button"
             onClick={handleCalendarToggle}
             disabled={isEffectivelyDisabled}
-            aria-label={popover.isOpen ? 'Close calendar' : 'Open calendar'}
+            aria-label={
+              popover.isOpen
+                ? t('@astryx.dateInput.toggleCalendarClose')
+                : t('@astryx.dateInput.openCalendar')
+            }
             {...stylex.props(
               styles.iconButton,
               isEffectivelyDisabled && styles.iconButtonDisabled,
@@ -942,7 +952,7 @@ export function DateTimeInput({
             <button
               type="button"
               onClick={handleClear}
-              aria-label={`Clear ${label}`}
+              aria-label={t('@astryx.dateInput.clear', {label})}
               {...stylex.props(styles.iconButton)}>
               <Icon icon="close" size="sm" color="secondary" />
             </button>
@@ -990,7 +1000,7 @@ export function DateTimeInput({
             disabled={isEffectivelyDisabled && !showsDisabledMessage}
             aria-disabled={showsDisabledMessage ? 'true' : undefined}
             readOnly={showsDisabledMessage || undefined}
-            aria-label={timeLabel ?? `${label} time`}
+            aria-label={timeLabel ?? t('@astryx.dateTimeInput.timeSuffix', {label})}
             aria-describedby={ariaDescribedBy}
             aria-required={isRequired === true ? 'true' : undefined}
             aria-invalid={

package/src/Dialog/Dialog.tsx

@@ -508,6 +508,10 @@ export function Dialog({
     </div>
   );
 
+  // Filter out native open to prevent InvalidStateError when accidentally passed
+  const hasPosition = position != null && !isFullscreen;
+  const {open: _open, ...safeProps} = props as Record<string, unknown>;
+
   // --- Inline rendering path (for documentation previews) ---
   if (isInline) {
     if (!isOpen) {
@@ -516,6 +520,7 @@ export function Dialog({
 
     return (
       <div
+        {...safeProps}
         {...mergeProps(
           themeProps('dialog', {variant}),
           stylex.props(
@@ -526,30 +531,18 @@ export function Dialog({
           ),
           className,
           style,
-        )}
-        data-testid={
-          (props as Record<string, unknown>)['data-testid'] as
-            | string
-            | undefined
-        }>
+        )}>
         {innerContent}
       </div>
     );
   }
 
   // --- Standard modal rendering path ---
-  const hasPosition = position != null && !isFullscreen;
-
-  // Filter out native open to prevent InvalidStateError when accidentally passed
-  const {open: _open, ...safeProps} = props as Record<string, unknown>;
 
   return (
     <dialog
       ref={mergeRefs(ref, dialogRef)}
-      onClick={handleClick}
-      onCancel={handleCancel}
-      aria-modal="true"
-      role={purpose === 'required' ? 'alertdialog' : undefined}
+      {...safeProps}
       {...mergeProps(
         themeProps('dialog', {variant}),
         stylex.props(
@@ -570,7 +563,10 @@ export function Dialog({
         className,
         style,
       )}
-      {...safeProps}>
+      onClick={handleClick}
+      onCancel={handleCancel}
+      aria-modal="true"
+      {...(purpose === 'required' ? {role: 'alertdialog'} : undefined)}>
       {innerContent}
     </dialog>
   );

package/src/Dialog/DialogHeader.tsx

@@ -26,6 +26,7 @@ import {Heading} from '../Heading/Heading';
 import {Text} from '../Text/Text';
 import type {BaseProps} from '../BaseProps';
 import {useDialogContext} from './DialogContext';
+import {useTranslator} from '../i18n';
 
 const styles = stylex.create({
   container: {
@@ -130,7 +131,9 @@ export function DialogHeader({
   className,
   style,
   ref,
+  ...rest
 }: DialogHeaderProps) {
+  const t = useTranslator();
   const titleRef = useRef<HTMLHeadingElement>(null);
   const dialogContext = useDialogContext();
   const shouldAutoFocus = dialogContext?.isInline !== true;
@@ -150,7 +153,8 @@ export function DialogHeader({
       hasDivider={hasDivider}
       xstyle={xstyle}
       className={className}
-      style={style}>
+      style={style}
+      {...rest}>
       <div {...stylex.props(styles.container)}>
         {startContent && (
           <div {...stylex.props(styles.actions)}>{startContent}</div>
@@ -179,8 +183,8 @@ export function DialogHeader({
             {onOpenChange && (
               <Button
                 variant="ghost"
-                label="Close"
-                tooltip="Close"
+                label={t('@astryx.dialog.close')}
+                tooltip={t('@astryx.dialog.close')}
                 icon={<Icon icon="close" color="inherit" />}
                 onClick={() => {
                   onOpenChange?.(false);

package/src/DropdownMenu/DropdownMenu.doc.mjs

@@ -8,10 +8,33 @@ export const docs = {
   group: 'DropdownMenu',
   category: 'Action',
   keywords: ["dropdown","menu","popover","select","actions","contextmenu","overflow","kebab","menubutton"],
+  playground: {
+    // `items` is required; without seeded entries the properties-tab preview
+    // renders an empty trigger button. Provide a few actions so the preview
+    // is meaningful.
+    defaults: {
+      button: {label: 'Actions'},
+      items: [
+        {label: 'Edit'},
+        {label: 'Duplicate'},
+        {label: 'Delete'},
+      ],
+    },
+  },
   theming: {
     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},