@astryxdesign/core 0.4.3 → 0.4.4-canary.0f4d45f

package/src/Chat/ChatComposerInput.tsx

@@ -43,7 +43,7 @@ import {
   typeScaleVars,
   typographyVars,
 } from '../theme/tokens.stylex';
-import {mergeProps} from '../utils';
+import {mergeProps, isImeKeyEvent} from '../utils';
 import {useTriggerMenu} from './useTriggerMenu';
 import {useChatComposerTokens, isCustomToken} from './useChatComposerTokens';
 import {ensureCaretInside, insertTextAtCursor} from './chatComposerSelection';
@@ -559,9 +559,8 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
 
       if (e.key === 'Enter' && !e.shiftKey) {
         // Never submit mid-composition — an IME uses Enter to commit a
-        // candidate (e.g. Japanese/Chinese/Korean input), and browsers may
-        // also surface the legacy keyCode 229 for composing keystrokes.
-        if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) {
+        // candidate. See utils/ime.ts for the full rationale.
+        if (isImeKeyEvent(e.nativeEvent)) {
           return;
         }
 

package/src/ComplexSelector/ComplexSelector.tsx

@@ -46,7 +46,7 @@ import {
   typographyVars,
   typeScaleVars,
 } from '../theme/tokens.stylex';
-import {mergeProps} from '../utils';
+import {isRenderable, mergeProps} from '../utils';
 import {composeEventHandlers} from '../utils/composeEventHandlers';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import type {SizeValue} from '../utils/types';
@@ -439,6 +439,11 @@ export function ComplexSelector<Value>({
 
   const triggerContent = triggerLabel ?? placeholder;
 
+  const startIconSlot = renderIconSlot(startIcon, {
+    size: 'sm',
+    color: 'secondary',
+  });
+
   const content = (
     <div id={contentId} {...stylex.props(styles.content, contentXstyle)}>
       {children(optimisticValue, commitValue, close, {
@@ -467,9 +472,12 @@ export function ComplexSelector<Value>({
             inputWrapperStyles.base,
             styles.triggerContainer,
             styles[size],
-            variant === 'input' && focusOutlineStyles.focusWithin,
+            // The ring belongs to the wrapper (the focusable `<button>` sits
+            // inside it), but it must still be a KEYBOARD ring: `:focus-within`
+            // matched a mouse click on the trigger and drew the outline for
+            // pointer users too. `focusWithin` here is `:has(:focus-visible)`.
+            focusOutlineStyles.focusWithin,
             variant === 'ghost' && styles.triggerGhost,
-            variant === 'ghost' && focusOutlineStyles.focusWithin,
             isDisabled && inputWrapperStyles.disabled,
             variant === 'ghost' && isDisabled && styles.triggerGhostDisabled,
             isDisabled && styles.disabled,
@@ -479,8 +487,7 @@ export function ComplexSelector<Value>({
           className,
           style,
         )}>
-        {startIcon &&
-          renderIconSlot(startIcon, {size: 'sm', color: 'secondary'})}
+        {isRenderable(startIconSlot) && startIconSlot}
         <button
           ref={triggerRef}
           id={triggerId}

package/src/ContextMenu/ContextMenu.tsx

@@ -63,7 +63,7 @@ import {
   easeVars,
   shadowVars,
 } from '../theme/tokens.stylex';
-import {mergeProps, mergeRefs} from '../utils';
+import {mergeProps, mergeRefs, isImeKeyEvent} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {StyleXStyles} from '../theme/types';
 import {themeProps} from '../utils/themeProps';
@@ -334,7 +334,9 @@ export function ContextMenu({
       if (e.key !== 'Escape') {
         return;
       }
-      if (e.isComposing || e.keyCode === 229) {
+      if (isImeKeyEvent(e)) {
+        // Ignore Escape that is committing/cancelling an IME composition;
+        // see utils/ime.ts for why.
         return;
       }
       e.preventDefault();

package/src/DateInput/DateInput.test.tsx

@@ -536,6 +536,27 @@ describe('DateInput', () => {
     expect(onChange).toHaveBeenCalledWith('2026-03-15');
   });
 
+  it('does not commit on a composing Enter (IME)', () => {
+    const onChange = vi.fn();
+    render(<DateInput label="Date" onChange={onChange} />);
+
+    const input = screen.getByRole('combobox');
+    fireEvent.change(input, {target: {value: '03/15/2026'}});
+    onChange.mockClear();
+
+    // The composing keydown (isComposing / legacy keyCode 229) that commits an
+    // IME candidate fires before compositionend; it must not be read as
+    // "commit the typed date".
+    fireEvent.keyDown(input, {key: 'Enter', isComposing: true});
+    expect(onChange).not.toHaveBeenCalled();
+    fireEvent.keyDown(input, {key: 'Enter', keyCode: 229});
+    expect(onChange).not.toHaveBeenCalled();
+
+    // A real, non-composing Enter still commits.
+    fireEvent.keyDown(input, {key: 'Enter'});
+    expect(onChange).toHaveBeenCalledWith('2026-03-15');
+  });
+
   // --- Arrow-down opens calendar popover ---
 
   // Note: Tests involving popover rendering (show/hide with calendar)

package/src/DateInput/DateInput.tsx

@@ -60,7 +60,7 @@ import {useCalendarConstraints} from '../Calendar/hooks';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {usePopover} from '../Popover';
 import {useTooltip} from '../Tooltip';
-import {getInputARIA, parseDateInput} from '../utils';
+import {getInputARIA, isImeKeyEvent, parseDateInput} from '../utils';
 import {
   plainDateFromISO,
   plainDateToISO,
@@ -627,6 +627,14 @@ export function DateInput({
   // Handle keyboard events on input
   const handleInputKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
+      // An in-progress IME composition uses Enter to commit the candidate and
+      // Escape to cancel it; that composing keydown fires before
+      // compositionend, so without this guard a Korean/Japanese/Chinese user
+      // committing a syllable with Enter would instead commit the pending date
+      // (or Escape would close the calendar mid-composition). See utils/ime.ts.
+      if (isImeKeyEvent(e.nativeEvent)) {
+        return;
+      }
       if (e.key === 'Escape' && popover.isOpen) {
         e.preventDefault();
         popover.hide();

package/src/DateTimeInput/DateTimeInput.doc.mjs

@@ -204,6 +204,8 @@ export const docs = {
         className: 'astryx-date-time-input-time-segment',
         visualProps: ['size', 'status'],
       },
+      {className: 'astryx-date-time-input-toggle-icon', states: ['state']},
+      {className: 'astryx-date-time-input-clock-icon'},
     ],
   },
   usage: {
@@ -508,6 +510,8 @@ export const docsZh = {
         className: 'astryx-date-time-input-time-segment',
         visualProps: ['size', 'status'],
       },
+      {className: 'astryx-date-time-input-toggle-icon', states: ['state']},
+      {className: 'astryx-date-time-input-clock-icon'},
     ],
   },
 };

package/src/DateTimeInput/DateTimeInput.test.tsx

@@ -15,6 +15,7 @@ import userEvent from '@testing-library/user-event';
 import {getButton, queryButton} from '../__tests__/fastRoleQueries';
 import {DateTimeInput} from './DateTimeInput';
 import type {ISODateTimeString} from './DateTimeInput';
+import {Icon} from '../Icon';
 import {defineTheme} from '../theme/defineTheme';
 import {generateThemeCSS} from '../theme/generateThemeRules';
 import {InternationalizationProvider} from '../i18n';
@@ -96,6 +97,48 @@ describe('DateTimeInput', () => {
     expect(screen.getByLabelText('Meeting time')).toBeInTheDocument();
   });
 
+  it('does not commit the date on a composing Enter (IME)', () => {
+    const onChange = vi.fn();
+    render(<DateTimeInput label="Meeting" onChange={onChange} />);
+    const dateInput = screen.getByRole('combobox');
+    fireEvent.change(dateInput, {target: {value: '03/15/2026'}});
+    onChange.mockClear();
+
+    // The composing keydown (isComposing / legacy keyCode 229) that commits an
+    // IME candidate must not be read as "commit the typed date".
+    fireEvent.keyDown(dateInput, {key: 'Enter', isComposing: true});
+    expect(onChange).not.toHaveBeenCalled();
+    fireEvent.keyDown(dateInput, {key: 'Enter', keyCode: 229});
+    expect(onChange).not.toHaveBeenCalled();
+
+    // A real, non-composing Enter still commits.
+    fireEvent.keyDown(dateInput, {key: 'Enter'});
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('does not step the time on a composing ArrowUp (IME)', () => {
+    const onChange = vi.fn();
+    render(
+      <DateTimeInput
+        label="Meeting"
+        value={'2026-03-15T14:30' as ISODateTimeString}
+        onChange={onChange}
+      />,
+    );
+    const timeInput = screen.getByLabelText('Meeting time');
+
+    // An IME candidate window navigates with the arrows; a composing ArrowUp
+    // must not step the time value.
+    fireEvent.keyDown(timeInput, {key: 'ArrowUp', isComposing: true});
+    expect(onChange).not.toHaveBeenCalled();
+    fireEvent.keyDown(timeInput, {key: 'ArrowUp', keyCode: 229});
+    expect(onChange).not.toHaveBeenCalled();
+
+    // A real, non-composing ArrowUp still steps the time by one minute.
+    fireEvent.keyDown(timeInput, {key: 'ArrowUp'});
+    expect(onChange).toHaveBeenCalledWith('2026-03-15T14:31');
+  });
+
   it('displays formatted date in date input when value is provided', () => {
     render(
       <DateTimeInput
@@ -1063,6 +1106,100 @@ describe('DateTimeInput', () => {
       expect(css).toContain('block-size: var(--size-element-lg)');
       expect(css).toContain('padding-inline: var(--spacing-4)');
     });
+
+    it('renders the toggle-icon target on the calendar glyph with open/closed state', async () => {
+      const {container} = render(
+        <DateTimeInput label="Meeting" onChange={() => {}} />,
+      );
+      // The stable target lands on the icon element itself (not the button),
+      // so a theme can restyle just this glyph — mirroring
+      // `date-input-toggle-icon`.
+      const icon = container.querySelector(
+        '.astryx-date-time-input-toggle-icon',
+      );
+      expect(icon).not.toBeNull();
+      expect(icon).toHaveClass('astryx-icon');
+      expect(icon).toHaveAttribute('data-state', 'collapsed');
+
+      fireEvent.click(getButton('Open calendar'));
+      await waitFor(() => {
+        expect(
+          container.querySelector('.astryx-date-time-input-toggle-icon'),
+        ).toHaveAttribute('data-state', 'expanded');
+      });
+    });
+
+    it('renders the clock-icon target on the leading time glyph', () => {
+      const {container} = render(
+        <DateTimeInput label="Meeting" onChange={() => {}} />,
+      );
+      const icon = container.querySelector(
+        '.astryx-date-time-input-clock-icon',
+      );
+      expect(icon).not.toBeNull();
+      expect(icon).toHaveClass('astryx-icon');
+    });
+
+    it('leaves both leading glyphs byte-identical to a plain secondary/sm icon by default', () => {
+      // The targets are purely additive: the stable target class and its
+      // reflected state add nothing to the render until a theme targets them.
+      // Guard that by diffing each glyph's StyleX classes against a standalone
+      // secondary/sm icon, excluding only the additive target/state classes.
+      const {container} = render(
+        <DateTimeInput label="Meeting" onChange={() => {}} />,
+      );
+      const calendarIcon = container.querySelector(
+        '.astryx-date-time-input-toggle-icon',
+      ) as HTMLElement;
+      const clockIcon = container.querySelector(
+        '.astryx-date-time-input-clock-icon',
+      ) as HTMLElement;
+
+      const {container: refContainer} = render(
+        <Icon icon="calendar" size="sm" color="secondary" />,
+      );
+      const refIcon = refContainer.querySelector('.astryx-icon') as HTMLElement;
+
+      const themeTargetClasses = new Set([
+        'astryx-date-time-input-toggle-icon',
+        'astryx-date-time-input-clock-icon',
+        'collapsed',
+        'expanded',
+      ]);
+      const styleClasses = (el: HTMLElement) =>
+        el.className
+          .split(' ')
+          .filter(c => !themeTargetClasses.has(c))
+          .sort();
+
+      expect(styleClasses(calendarIcon)).toEqual(styleClasses(refIcon));
+      expect(styleClasses(clockIcon)).toEqual(styleClasses(refIcon));
+    });
+
+    it('exposes the icon targets so a theme reaches their size and per-state color', () => {
+      // jsdom cannot resolve the @layer cascade, so the generated CSS is what
+      // proves a same-element theme rule can reach these glyphs and win over
+      // the icon's own base size/color.
+      const theme = defineTheme({
+        name: 'date-time-input-icon-targets-test',
+        components: {
+          'date-time-input-toggle-icon': {
+            base: {width: '14px', height: '14px', fontSize: '14px'},
+            'state:expanded': {color: 'var(--color-icon-primary)'},
+          },
+          'date-time-input-clock-icon': {
+            base: {width: '14px', height: '14px', fontSize: '14px'},
+          },
+        },
+      });
+      const css = generateThemeTestCSS(theme);
+
+      expect(css).toContain('.astryx-date-time-input-toggle-icon {');
+      expect(css).toContain('.astryx-date-time-input-toggle-icon.expanded');
+      expect(css).toContain('.astryx-date-time-input-clock-icon {');
+      expect(css).toContain('width: 14px');
+      expect(css).toContain('color: var(--color-icon-primary)');
+    });
   });
 });
 

package/src/DateTimeInput/DateTimeInput.tsx

@@ -69,6 +69,7 @@ import {
   formatISOTime,
   isTimeInRange,
   adjustTime,
+  isImeKeyEvent,
   mergeProps,
   mergeRefs,
   isFocusDetached,
@@ -742,6 +743,13 @@ export function DateTimeInput({
 
   const handleDateKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
+      // Guard the composing keydown (fires before compositionend): an IME uses
+      // Enter to commit the candidate and Escape to cancel it, so without this
+      // a CJK user committing a syllable with Enter would commit the pending
+      // date instead. See utils/ime.ts.
+      if (isImeKeyEvent(e.nativeEvent)) {
+        return;
+      }
       if (e.key === 'Escape' && popover.isOpen) {
         e.preventDefault();
         popover.hide();
@@ -835,6 +843,13 @@ export function DateTimeInput({
 
   const handleTimeKeyDown = useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
+      // ArrowUp/ArrowDown step the time and preventDefault; an IME candidate
+      // window uses those same arrows to navigate candidates, so guard the
+      // composing keydown (fires before compositionend) to avoid stealing them
+      // mid-composition. See utils/ime.ts.
+      if (isImeKeyEvent(e.nativeEvent)) {
+        return;
+      }
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
         e.preventDefault();
 
@@ -960,7 +975,20 @@ export function DateTimeInput({
               styles.iconButton,
               isEffectivelyDisabled && styles.iconButtonDisabled,
             )}>
-            <Icon icon="calendar" size="sm" color="secondary" />
+            <Icon
+              icon="calendar"
+              size="sm"
+              color="secondary"
+              // Stable theme target on the calendar toggle glyph, so a theme
+              // can restyle just this icon (color, size, hover) — and each
+              // open/closed state — via `defineTheme`, mirroring
+              // `date-input-toggle-icon`. Same-element rules in
+              // @layer astryx-theme win over the icon's own base color/size,
+              // which a segment-level target could not reach.
+              {...themeProps('date-time-input-toggle-icon', {
+                state: popover.isOpen ? 'expanded' : 'collapsed',
+              })}
+            />
           </button>
           <input
             ref={mergeRefs(ref, dateInputRef)}
@@ -1039,7 +1067,16 @@ export function DateTimeInput({
             ),
           )}>
           <div {...stylex.props(styles.icon)}>
-            <Icon icon="clock" size="sm" color="secondary" />
+            <Icon
+              icon="clock"
+              size="sm"
+              color="secondary"
+              // Stable theme target on the leading clock glyph, so a theme can
+              // restyle just this icon (color, size) via `defineTheme`. The
+              // time segment has no toggle button — the clock is a static
+              // leading affordance — so this carries no interactive state.
+              {...themeProps('date-time-input-clock-icon')}
+            />
           </div>
           <input
             ref={timeInputRef}

package/src/Dialog/Dialog.tsx

@@ -27,7 +27,8 @@ import {
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import {useScrollLock} from '../hooks/useScrollLock';
-import {hasActiveFocusTrapEscape, isImeKeyEvent} from '../hooks/useFocusTrap';
+import {hasActiveFocusTrapEscape} from '../hooks/useFocusTrap';
+import {isImeKeyEvent} from '../utils/ime';
 import {
   colorVars,
   radiusVars,

package/src/Field/Field.doc.mjs

@@ -34,6 +34,7 @@ export const docs = {
         className: 'astryx-input-status-icon',
         visualProps: ['size', 'status'],
       },
+      {className: 'astryx-input-clear-button'},
       {className: 'astryx-input-clear-icon'},
     ],
     vars: [

package/src/Field/InputClearButton.test.tsx

@@ -114,4 +114,29 @@ describe('InputClearButton', () => {
     expect(css).toContain('.astryx-input-clear-icon:hover {');
     expect(css).toContain('color: var(--color-icon-primary)');
   });
+
+  it('renders the astryx-input-clear-button target on the button wrapper', () => {
+    render(<InputClearButton label="Clear" onClick={() => {}} />);
+    const button = screen.getByRole('button', {name: 'Clear'});
+    expect(button).toHaveClass('astryx-input-clear-button');
+  });
+
+  it('exposes input-clear-button so a theme controls the button size and hover', () => {
+    const theme = defineTheme({
+      name: 'input-clear-button-test',
+      components: {
+        'input-clear-button': {
+          base: {
+            height: '28px',
+            ':hover': {backgroundImage: 'none'},
+          },
+        },
+      },
+    });
+    const css = generateThemeTestCSS(theme);
+    expect(css).toContain('.astryx-input-clear-button {');
+    expect(css).toContain('height: 28px');
+    expect(css).toContain('.astryx-input-clear-button:hover {');
+    expect(css).toContain('background-image: none');
+  });
 });

package/src/Field/InputClearButton.tsx

@@ -11,7 +11,8 @@
  *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
  *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
  *   routes it through here, so the glyph is themed in one place via the
- *   `astryx-input-clear-icon` target.
+ *   `astryx-input-clear-icon` target and the button wrapper is themed via the
+ *   `astryx-input-clear-button` target.
  */
 
 import type {ReactNode} from 'react';
@@ -48,11 +49,13 @@ export function InputClearButton({
   iconClassName,
 }: InputClearButtonProps): ReactNode {
   const {className: iconTargetClassName} = themeProps('input-clear-icon');
+  const {className: buttonTargetClassName} = themeProps('input-clear-button');
   return (
     <Button
       variant="ghost"
       size="sm"
       label={label}
+      className={buttonTargetClassName}
       icon={
         <Icon
           icon="close"

package/src/FileInput/FileInput.test.tsx

@@ -20,6 +20,12 @@ import {
 import userEvent from '@testing-library/user-event';
 import {FileInput} from './FileInput';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+import {InternationalizationProvider} from '../i18n';
+
+// The `=1` branch names the file; the `other` branch must not. Both come from
+// this test, so neither can pass against a hardcoded English string.
+const FILE_SELECTED = 'Un fichier choisi : {fileName}';
+const FILES_SELECTED = '{count, number} fichiers choisis';
 
 afterEach(() => {
   __resetLiveRegionsForTest();
@@ -324,23 +330,36 @@ describe('FileInput', () => {
 
   describe('announcements', () => {
     it('announces a single file selection politely', async () => {
-      render(<FileInput label="Upload" value={null} onChange={() => {}} />);
+      render(
+        <InternationalizationProvider
+          locale="fr"
+          overrides={{fr: {'@astryx.fileInput.fileSelected': FILE_SELECTED}}}>
+          <FileInput label="Upload" value={null} onChange={() => {}} />
+        </InternationalizationProvider>,
+      );
       fireEvent.change(fileInputEl(), {
         target: {files: [createFile('report.pdf', 100)]},
       });
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('1 file selected: report.pdf');
+        // The single-file key, carrying the file name.
+        expect(politeRegion()?.textContent).toBe(
+          'Un fichier choisi : report.pdf',
+        );
       });
     });
 
     it('announces a multi-file count politely', async () => {
       render(
-        <FileInput
-          label="Upload"
-          value={null}
-          onChange={() => {}}
-          isMultiple
-        />,
+        <InternationalizationProvider
+          locale="fr"
+          overrides={{fr: {'@astryx.fileInput.filesSelected': FILES_SELECTED}}}>
+          <FileInput
+            label="Upload"
+            value={null}
+            onChange={() => {}}
+            isMultiple
+          />
+        </InternationalizationProvider>,
       );
       const files = [
         createFile('a.txt', 100),
@@ -349,7 +368,32 @@ describe('FileInput', () => {
       ];
       fireEvent.change(fileInputEl(), {target: {files}});
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('3 files selected');
+        // The multi-file key: a count, and no file name.
+        expect(politeRegion()?.textContent).toBe('3 fichiers choisis');
+      });
+      expect(politeRegion()?.textContent).not.toContain('a.txt');
+    });
+
+    it('speaks the selection from a provider catalog', async () => {
+      render(
+        <InternationalizationProvider
+          locale="fr"
+          messages={{
+            fr: {
+              '@astryx.fileInput.fileSelected': {defaultMessage: FILE_SELECTED},
+            },
+          }}>
+          <FileInput label="Upload" value={null} onChange={() => {}} />
+        </InternationalizationProvider>,
+      );
+      fireEvent.change(fileInputEl(), {
+        target: {files: [createFile('report.pdf', 100)]},
+      });
+      await waitFor(() => {
+        // Same key through the catalog path rather than `overrides`.
+        expect(politeRegion()?.textContent).toBe(
+          'Un fichier choisi : report.pdf',
+        );
       });
     });