@astryxdesign/core 0.1.9-canary.d2d84f8 → 0.1.9-canary.e00a241

package/src/DropdownMenu/renderDropdownItems.tsx

@@ -10,6 +10,7 @@ import type {ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Divider} from '../Divider';
 import {DropdownMenuItem} from './DropdownMenuItem';
+import {DropdownMenuSubMenu} from './DropdownMenuSubMenu';
 import {
   spacingVars,
   typographyVars,
@@ -49,18 +50,14 @@ function getSectionKey(section: DropdownMenuSection, index: number): string {
  * Converts data-driven items into DropdownMenuItem components,
  * so both modes share the same rendering and keyboard navigation path.
  */
-export function renderDropdownItems(
-  items: DropdownMenuOption[],
-): ReactNode {
+export function renderDropdownItems(items: DropdownMenuOption[]): ReactNode {
   const elements: ReactNode[] = [];
 
   for (let i = 0; i < items.length; i++) {
     const option = items[i];
 
     if ('type' in option && option.type === 'divider') {
-      elements.push(
-        <Divider key={`divider-${i}`} xstyle={styles.divider} />,
-      );
+      elements.push(<Divider key={`divider-${i}`} xstyle={styles.divider} />);
     } else if ('type' in option && option.type === 'section') {
       elements.push(
         <div
@@ -84,15 +81,32 @@ export function renderDropdownItems(
         </div>,
       );
     } else if (!('type' in option)) {
-      elements.push(
-        <DropdownMenuItem
-          key={getItemKey(option)}
-          icon={option.icon}
-          label={option.label}
-          onClick={option.onClick}
-          isDisabled={option.isDisabled}
-        />,
-      );
+      // A plain item that declares nested `items` becomes a submenu (data-mode
+      // parity with the compound DropdownMenuSubMenu API); otherwise it's a
+      // leaf. renderDropdownItems owns the recursion and hands the rendered
+      // children to DropdownMenuSubMenu — so DropdownMenuSubMenu never imports
+      // this module back (no import cycle).
+      if (option.items && option.items.length > 0) {
+        elements.push(
+          <DropdownMenuSubMenu
+            key={getItemKey(option)}
+            icon={option.icon}
+            label={option.label}
+            isDisabled={option.isDisabled}>
+            {renderDropdownItems(option.items)}
+          </DropdownMenuSubMenu>,
+        );
+      } else {
+        elements.push(
+          <DropdownMenuItem
+            key={getItemKey(option)}
+            icon={option.icon}
+            label={option.label}
+            onClick={option.onClick}
+            isDisabled={option.isDisabled}
+          />,
+        );
+      }
     }
   }
 

package/src/Field/Field.tsx

@@ -22,6 +22,7 @@ import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {FieldLabel} from './FieldLabel';
 import {FieldStatus} from '../FieldStatus/FieldStatus';
+import type {FieldStatusVariant} from '../FieldStatus/FieldStatus';
 import {spacingVars, borderVars} from '../theme/tokens.stylex';
 import type {IconType} from '../Icon';
 import {mergeProps} from '../utils';
@@ -156,9 +157,10 @@ export interface FieldProps extends Omit<
    * How the status message is rendered relative to the input.
    * - 'attached': Status sits directly below the input (default, for bordered inputs)
    * - 'detached': Status is a separate element below the field (for checkboxes, switches, sliders)
+   * - 'tooltip': No message box; the input surfaces status through a tooltip on its on-field icon
    * @default 'attached'
    */
-  statusVariant?: 'attached' | 'detached';
+  statusVariant?: FieldStatusVariant;
   /**
    * Width of the field. Numbers are treated as pixels, strings are used as-is
    * (e.g. `'100%'`). Sizes the whole field — label, control, and status — so
@@ -239,14 +241,17 @@ export function Field({
     />
   );
 
-  const statusNode = status?.message ? (
-    <FieldStatus
-      type={status.type}
-      message={status.message}
-      id={resolvedMessageID}
-      variant={statusVariant}
-    />
-  ) : null;
+  // The 'tooltip' variant surfaces status through the input's on-field icon
+  // tooltip, so Field renders no message box for it.
+  const statusNode =
+    status?.message && statusVariant !== 'tooltip' ? (
+      <FieldStatus
+        type={status.type}
+        message={status.message}
+        id={resolvedMessageID}
+        variant={statusVariant}
+      />
+    ) : null;
 
   // ─── Horizontal-labels mode ───────────────────────────────────────────
   // Use display:contents so the parent grid's `auto 1fr` columns place

package/src/Field/inputStyles.stylex.ts

@@ -67,6 +67,8 @@ export const inputWrapperStyles = stylex.create({
     cursor: 'not-allowed',
     opacity: 0.5,
     borderColor: colorVars['--color-border-emphasized'],
+    // Suppress the base hover ring — a disabled control must not react to hover.
+    boxShadow: 'none',
   },
 });
 

package/src/FieldStatus/FieldStatus.tsx

@@ -71,9 +71,12 @@ const styles = stylex.create({
     gap: spacingVars['--spacing-1'],
   },
   detachedIcon: {
-    // Match the height of the first text line so the glyph top-aligns to it
-    // (rather than to the flex box) when the message wraps to multiple lines.
-    lineHeight: typeScaleVars['--text-supporting-leading'],
+    // Center the glyph within the first text-line box so it aligns to the
+    // first line of the message (rather than the top of the flex row) when the
+    // message wraps to multiple lines.
+    display: 'inline-flex',
+    alignItems: 'center',
+    height: `calc(${typeScaleVars['--text-supporting-size']} * ${typeScaleVars['--text-supporting-leading']})`,
     flexShrink: 0,
   },
 });
@@ -109,6 +112,7 @@ const colorStyles = stylex.create({
 export interface FieldStatusVariantMap {
   attached: true;
   detached: true;
+  tooltip: true;
 }
 
 /**
@@ -143,7 +147,9 @@ export interface FieldStatusProps extends BaseProps<HTMLDivElement> {
  * decorative for assistive tech (`aria-hidden`): the message text already names
  * the status in words and is announced through the live region. The `attached`
  * variant keeps its status affordance on the bordered input, so it renders no
- * icon here to avoid a duplicate.
+ * icon here to avoid a duplicate. The `tooltip` variant renders no message box
+ * at all — the input surfaces the status through a tooltip on its on-field
+ * icon — so callers skip rendering FieldStatus for it.
  *
  * Screen-reader announcements go through the persistent `useAnnounce` live
  * regions (assertive for errors, polite otherwise) rather than `role`/

package/src/FileInput/FileInput.doc.mjs

@@ -78,7 +78,7 @@ export const docs = {
       name: 'isRequired',
       type: 'boolean',
       description:
-        'Displays a "Required" indicator next to the label and sets aria-required. Mutually exclusive with isOptional.',
+        'Displays a "Required" indicator next to the label and adds a screen-reader-only "Required" description to the trigger (assistive tech does not reliably announce aria-required on the trigger). Mutually exclusive with isOptional.',
       default: 'false',
     },
     {
@@ -121,9 +121,9 @@ export const docs = {
     },
     {
       name: 'statusVariant',
-      type: "'attached' | 'detached'",
+      type: "'attached' | 'detached' | 'tooltip'",
       description:
-        'How the status message is placed relative to the input. attached overlaps directly below the input (bordered treatment); detached floats below as a separate element with spacing.',
+        'How the status message is placed relative to the input. attached overlaps directly below the input (bordered treatment); detached floats below as a separate element with spacing; tooltip hides the message box and surfaces it in a tooltip on the status icon.',
       default: "'attached'",
     },
     {
@@ -132,6 +132,12 @@ export const docs = {
       description:
         'Tooltip text displayed in an info icon at the end of the label.',
     },
+    {
+      name: 'width',
+      type: 'SizeValue',
+      description:
+        'Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.',
+    },
   ],
   theming: {
     targets: [
@@ -255,9 +261,9 @@ export const docsZh = {
     },
     {
       name: 'statusVariant',
-      type: "'attached' | 'detached'",
+      type: "'attached' | 'detached' | 'tooltip'",
       description:
-        '状态消息相对于输入框的放置方式。attached 直接叠加在输入框下方（带边框处理）；detached 作为独立元素浮于下方并留有间距。',
+        '状态消息相对于输入框的放置方式。attached 直接叠加在输入框下方（带边框处理）；detached 作为独立元素浮于下方并留有间距；tooltip 隐藏消息框，并在状态图标上以提示气泡形式显示。',
       default: "'attached'",
     },
   ],
@@ -322,7 +328,7 @@ export const docsDense = {
     isLabelHidden: 'Visually hides label; keeps screen reader access.',
     description: 'Description text between label+input.',
     isOptional: 'Shows "Optional" indicator.',
-    isRequired: 'Shows "Required" indicator+sets aria-required.',
+    isRequired: 'Shows "Required" indicator+SR-only trigger description.',
     isDisabled: 'Disables input, prevents interaction.',
     disabledMessage:
       'Explains why input is disabled. With isDisabled, shows tooltip on hover/focus + keeps trigger focusable via aria-disabled (opening picker stays blocked). Use instead of wrapping a disabled FileInput in Tooltip.',
@@ -330,7 +336,7 @@ export const docsDense = {
     placeholder: 'Placeholder when no files selected.',
     mode: "Visual mode: 'input' (compact) or 'dropzone' (drag-and-drop).",
     status: 'Validation status; colored border. Message floats below.',
-    statusVariant: 'How status message is placed: attached overlaps below input; detached floats below w/ spacing.',
+    statusVariant: 'How status message is placed: attached overlaps below input; detached floats below w/ spacing; tooltip hides the box and shows it on the status icon.',
     labelTooltip: 'Tooltip in info icon at label end.',
   },
 };

package/src/FileInput/FileInput.test.tsx

@@ -147,16 +147,33 @@ describe('FileInput', () => {
     expect(screen.getByText('Upload')).toBeInTheDocument();
   });
 
-  it('sets aria-required when isRequired is true', () => {
+  it('conveys required state through the accessible description', () => {
     render(
       <FileInput label="Resume" isRequired value={null} onChange={() => {}} />,
     );
-    // aria-required lives on the focusable role="button" wrapper, not the
+    const trigger = screen.getByRole('button', {name: 'Resume'});
+    // Required is conveyed via a visually hidden "Required" node referenced
+    // from aria-describedby on the focusable role="button" trigger — not the
     // hidden file input (forms-6).
-    expect(screen.getByRole('button', {name: 'Resume'})).toHaveAttribute(
-      'aria-required',
-      'true',
+    expect(trigger).toHaveAccessibleDescription(/Required/);
+    // aria-required is not a supported property of role="button" in
+    // WAI-ARIA 1.2 (AT does not announce it), so it must never appear.
+    expect(trigger).not.toHaveAttribute('aria-required');
+  });
+
+  it('combines required with the description in the accessible description', () => {
+    render(
+      <FileInput
+        label="Resume"
+        description="PDF only"
+        isRequired
+        value={null}
+        onChange={() => {}}
+      />,
     );
+    const trigger = screen.getByRole('button', {name: 'Resume'});
+    expect(trigger).toHaveAccessibleDescription(/PDF only/);
+    expect(trigger).toHaveAccessibleDescription(/Required/);
   });
 
   it('places aria-describedby on the focusable button, not the hidden input (forms-6)', () => {
@@ -176,11 +193,11 @@ describe('FileInput', () => {
     expect(input).toHaveAttribute('aria-hidden', 'true');
   });
 
-  it('does not set aria-required by default', () => {
+  it('does not mention required without isRequired', () => {
     render(<FileInput label="Resume" value={null} onChange={() => {}} />);
-    expect(screen.getByRole('button', {name: 'Resume'})).not.toHaveAttribute(
-      'aria-required',
-    );
+    const trigger = screen.getByRole('button', {name: 'Resume'});
+    expect(trigger).not.toHaveAccessibleDescription(/Required/);
+    expect(trigger).not.toHaveAttribute('aria-required');
   });
 
   it('sets disabled attribute when isDisabled is true', () => {
@@ -353,6 +370,40 @@ describe('FileInput', () => {
       // FieldStatus, but the polite channel must stay empty.)
       expect(politeRegion()?.textContent ?? '').toBe('');
     });
+
+    it('announces a validation error exactly once across live regions', async () => {
+      render(
+        <FileInput
+          label="Upload"
+          value={null}
+          onChange={() => {}}
+          accept=".pdf"
+        />,
+      );
+      fireEvent.change(fileInputEl(), {
+        target: {files: [createFile('note.txt', 100)]},
+      });
+      const errorText = '"note.txt" is not an accepted file type';
+      // The error lands in the assertive announce region (via the FieldStatus
+      // the derived error status mounts)…
+      await waitFor(() => {
+        expect(
+          document.querySelector('[data-astryx-live-region="assertive"]'),
+        ).toHaveTextContent(errorText);
+      });
+      // …and in exactly one live region overall. FileInput's own role="status"
+      // region used to duplicate the FieldStatus announcement, so the same
+      // error was read twice (assertively, then politely).
+      const liveRegions = Array.from(
+        document.querySelectorAll(
+          '[role="status"], [role="alert"], [aria-live]',
+        ),
+      );
+      const regionsWithError = liveRegions.filter(el =>
+        (el.textContent ?? '').includes(errorText),
+      );
+      expect(regionsWithError).toHaveLength(1);
+    });
   });
 
   describe('validation', () => {
@@ -719,16 +770,20 @@ describe('FileInput', () => {
         />,
       );
 
-      const trigger = screen.getByRole('button');
       const tooltip = screen.getByRole('tooltip', h);
       expect(tooltip).toHaveTextContent('You need the Editor role');
 
-      fireEvent.mouseEnter(trigger);
+      // The trigger button is visually hidden, so the disabled-reason tooltip
+      // anchors its hover listeners to the visible container surface.
+      const surface = document.querySelector(
+        '.astryx-file-input',
+      ) as HTMLElement;
+      fireEvent.mouseEnter(surface);
       await waitFor(() => {
         expect(tooltip).toHaveAttribute('popover-open');
       });
 
-      fireEvent.mouseLeave(trigger);
+      fireEvent.mouseLeave(surface);
       await waitFor(() => {
         expect(tooltip).not.toHaveAttribute('popover-open');
       });
@@ -809,7 +864,10 @@ describe('FileInput', () => {
     });
 
     it('blocks opening the file picker while focusable-disabled', async () => {
-      const user = userEvent.setup();
+      // The trigger is a visually-hidden button (pointer-events: none) — real
+      // pointer clicks land on the container surface, so bypass the pointer
+      // check to exercise the disabled guard directly.
+      const user = userEvent.setup({pointerEventsCheck: 0});
       render(
         <FileInput
           label="Resume"
@@ -850,11 +908,15 @@ describe('FileInput', () => {
   });
 });
 
-
 describe('FileInput statusVariant forwarding', () => {
   it('defaults to attached (status renders with data-variant="attached")', () => {
     const {container} = render(
-      <FileInput label="Upload" value={null} onChange={() => {}} status={{type: 'error', message: 'Something went wrong'}} />,
+      <FileInput
+        label="Upload"
+        value={null}
+        onChange={() => {}}
+        status={{type: 'error', message: 'Something went wrong'}}
+      />,
     );
     expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
       'data-variant',
@@ -864,7 +926,13 @@ describe('FileInput statusVariant forwarding', () => {
 
   it('forwards statusVariant="detached" to the underlying Field status', () => {
     const {container} = render(
-      <FileInput label="Upload" value={null} onChange={() => {}} status={{type: 'error', message: 'Something went wrong'}} statusVariant="detached" />,
+      <FileInput
+        label="Upload"
+        value={null}
+        onChange={() => {}}
+        status={{type: 'error', message: 'Something went wrong'}}
+        statusVariant="detached"
+      />,
     );
     expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
       'data-variant',