@astryxdesign/core 0.4.2 → 0.4.3-canary.00bed29

package/src/PowerSearch/PowerSearch.tsx

@@ -54,6 +54,7 @@ import {formatFilterValue} from './formatFilterValue';
 import {PowerSearchEditPopover} from './PowerSearchEditPopover';
 import {resolveOperatorLabel} from './resolveOperatorLabel';
 import {themeProps} from '../utils/themeProps';
+import {truncateCharacters} from '../utils/characters';
 import {useTranslator} from '../i18n';
 import type {
   PowerSearchConfig,
@@ -117,7 +118,9 @@ const resultCountStyles = stylex.create({
 });
 
 function truncateString(value: string, limit: number): string {
-  return value.length > limit + 3 ? value.slice(0, limit) + '...' : value;
+  // Same semantics as before — strings within limit + 3 pass through, longer
+  // ones cut to limit + '...' — but counted in characters, not code units.
+  return truncateCharacters(value, limit + 3, '...');
 }
 
 function getEnumLabel(values: ReadonlyArray<EnumItem>, value: string): string {

package/src/PowerSearch/PowerSearchEditPopover.tsx

@@ -20,7 +20,7 @@ import {HStack, VStack} from '../Stack';
 import {Icon} from '../Icon';
 import {TreeList, type TreeListItemData} from '../TreeList';
 import {useTranslator} from '../i18n';
-import {isImeKeyEvent} from '../hooks/useFocusTrap';
+import {isImeKeyEvent} from '../utils/ime';
 import {spacingVars, typeScaleVars} from '../theme/tokens.stylex';
 import {PowerSearchValueEditor} from './PowerSearchValueEditor';
 import {resolveOperatorLabel} from './resolveOperatorLabel';

package/src/PowerSearch/formatFilterValue.test.ts

@@ -62,6 +62,28 @@ describe('formatFilterValue', () => {
         'abcde',
       );
     });
+
+    it('truncates by characters, never splitting an emoji (#4759)', () => {
+      // Four surrogate-pair emoji: 8 code units, 4 user-perceived characters.
+      // The exact-string assertion also proves no surrogate pair was split.
+      const out = fmt(
+        {type: 'string'},
+        {type: 'string', value: '\u{1F600}'.repeat(4)},
+        3,
+      );
+      expect(out).toBe('\u{1F600}'.repeat(2) + ELLIPSIS);
+    });
+
+    it('keeps multi-unit characters within maxLength intact (#4759)', () => {
+      // Three emoji are 6 code units but only 3 user-perceived characters.
+      expect(
+        fmt(
+          {type: 'string'},
+          {type: 'string', value: '\u{1F600}'.repeat(3)},
+          3,
+        ),
+      ).toBe('\u{1F600}'.repeat(3));
+    });
   });
 
   describe('integer / float', () => {

package/src/PowerSearch/formatFilterValue.ts

@@ -13,12 +13,10 @@
 import type {OperatorValue, FilterValue, EnumItem} from './types';
 import type {InternalConfig} from './useInternalConfig';
 import type {TranslatorFn} from '../i18n';
+import {truncateCharacters} from '../utils/characters';
 
 function truncate(str: string, maxLength: number): string {
-  if (str.length <= maxLength) {
-    return str;
-  }
-  return str.slice(0, maxLength - 1) + '\u2026';
+  return truncateCharacters(str, maxLength);
 }
 
 function formatEnumLabel(

package/src/Selector/Selector.test.tsx

@@ -26,6 +26,7 @@ import {RadioIndicator} from '../Indicator';
 import {InputGroup, InputGroupText} from '../InputGroup';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 import {__resetInteractionModalityForTest} from '../utils/interactionModality';
+import {InternationalizationProvider} from '../i18n';
 import {defineTheme} from '../theme/defineTheme';
 import {Theme} from '../theme/Theme';
 import {generateThemeCSS} from '../theme/generateThemeRules';
@@ -1000,60 +1001,118 @@ describe('Selector', () => {
       ).toBeInTheDocument();
     });
 
+    it('does not select the highlighted option on a composing Enter (IME)', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      render(
+        <Selector
+          label="Fruit"
+          options={OPTIONS}
+          onChange={onChange}
+          hasSearch
+        />,
+      );
+      await user.click(screen.getByRole('button', {name: 'Fruit'}));
+      const search = screen.getByRole('combobox', h);
+      // Filter to Banana and highlight it so an unguarded Enter would commit a
+      // selection.
+      await user.type(search, 'ban');
+      await user.keyboard('{ArrowDown}');
+      expect(search).toHaveAttribute('aria-activedescendant');
+
+      // The browser fires this composing keydown for the Enter that commits an
+      // IME candidate (isComposing: true, or the legacy keyCode 229) before
+      // compositionend writes the syllable. It must NOT be read as "select the
+      // highlighted option".
+      fireEvent.keyDown(search, {key: 'Enter', isComposing: true});
+      expect(onChange).not.toHaveBeenCalled();
+      fireEvent.keyDown(search, {key: 'Enter', keyCode: 229});
+      expect(onChange).not.toHaveBeenCalled();
+
+      // A real, non-composing Enter still selects the highlighted option.
+      fireEvent.keyDown(search, {key: 'Enter'});
+      expect(onChange).toHaveBeenCalledWith('Banana');
+    });
+
     describe('result announcements', () => {
       it('announces the match count politely while searching', async () => {
         const user = userEvent.setup();
         render(
-          <Selector
-            label="Fruit"
-            options={OPTIONS}
-            value="Apple"
-            onChange={() => {}}
-            hasSearch
-          />,
+          <InternationalizationProvider
+            locale="fr"
+            overrides={{
+              fr: {
+                '@astryx.selector.resultCount':
+                  '{count, number} {count, plural, one {résultat} other {résultats}}',
+              },
+            }}>
+            <Selector
+              label="Fruit"
+              options={OPTIONS}
+              value="Apple"
+              onChange={() => {}}
+              hasSearch
+            />
+          </InternationalizationProvider>,
         );
         await user.click(screen.getByRole('button', {name: 'Fruit'}));
         // "a" matches Apple and Banana.
         await user.type(screen.getByRole('combobox', h), 'a');
         await waitFor(() => {
-          expect(politeRegion()).toHaveTextContent('2 results');
+          // The plural branch of a message no catalog supplies.
+          expect(politeRegion()?.textContent).toBe('2 résultats');
         });
       });
 
       it('announces the singular form when one option matches', async () => {
         const user = userEvent.setup();
         render(
-          <Selector
-            label="Fruit"
-            options={OPTIONS}
-            value="Apple"
-            onChange={() => {}}
-            hasSearch
-          />,
+          <InternationalizationProvider
+            locale="fr"
+            overrides={{
+              fr: {
+                '@astryx.selector.resultCount':
+                  '{count, number} {count, plural, one {résultat} other {résultats}}',
+              },
+            }}>
+            <Selector
+              label="Fruit"
+              options={OPTIONS}
+              value="Apple"
+              onChange={() => {}}
+              hasSearch
+            />
+          </InternationalizationProvider>,
         );
         await user.click(screen.getByRole('button', {name: 'Fruit'}));
-        // "ban" matches only Banana. Anchored so it cannot pass on "1 results".
+        // "ban" matches only Banana. Exact, so "1 résultats" would fail.
         await user.type(screen.getByRole('combobox', h), 'ban');
         await waitFor(() => {
-          expect(politeRegion()).toHaveTextContent(/^1 result$/);
+          expect(politeRegion()?.textContent).toBe('1 résultat');
         });
       });
 
-      it('announces "No results found" when nothing matches', async () => {
+      it('announces the empty-results message when nothing matches', async () => {
         const user = userEvent.setup();
         render(
-          <Selector
-            label="Fruit"
-            options={OPTIONS}
-            value="Apple"
-            onChange={() => {}}
-            hasSearch
-          />,
+          <InternationalizationProvider
+            locale="fr"
+            overrides={{
+              fr: {'@astryx.selector.emptySearchResults': 'Aucun résultat'},
+            }}>
+            <Selector
+              label="Fruit"
+              options={OPTIONS}
+              value="Apple"
+              onChange={() => {}}
+              hasSearch
+            />
+          </InternationalizationProvider>,
         );
         await user.click(screen.getByRole('button', {name: 'Fruit'}));
         await user.type(screen.getByRole('combobox', h), 'xyz');
         await waitFor(() => {
-          expect(politeRegion()).toHaveTextContent('No results found');
+          expect(politeRegion()?.textContent).toBe('Aucun résultat');
         });
       });
 

package/src/Selector/Selector.tsx

@@ -72,7 +72,7 @@ import {
 import {useCombobox, useSelectedItemOffset} from './hooks';
 import {useTypeahead} from '../hooks/useTypeahead';
 import {SelectorOption} from './SelectorOption';
-import {getInputARIA, mergeProps} from '../utils';
+import {getInputARIA, isImeKeyEvent, mergeProps} from '../utils';
 import {useSize} from '../SizeContext/SizeContext';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
@@ -844,11 +844,11 @@ export function Selector<T extends SelectorOptionType>(
       const count = filterOptionsByQuery(selectableItems, nextQuery).length;
       announce(
         count === 0
-          ? 'No results found'
-          : `${count} result${count === 1 ? '' : 's'}`,
+          ? t('@astryx.selector.emptySearchResults')
+          : t('@astryx.selector.resultCount', {count}),
       );
     },
-    [announce, selectableItems],
+    [announce, selectableItems, t],
   );
 
   // Calculate offset to position selected item over trigger. Explicit
@@ -1055,6 +1055,15 @@ export function Selector<T extends SelectorOptionType>(
           }
         }}
         onKeyDown={e => {
+          // An in-progress IME composition uses these same keys (Enter to
+          // commit the candidate, Escape/Arrows to navigate the candidate
+          // window); the composing keydown fires before compositionend, so
+          // without this guard a Korean/Japanese/Chinese user committing a
+          // syllable with Enter would instead select the highlighted option.
+          // See utils/ime.ts.
+          if (isImeKeyEvent(e.nativeEvent)) {
+            return;
+          }
           // Arrow keys navigate options; Enter selects; Escape closes.
           // Home/End are left to the input for caret movement (APG editable
           // combobox); PageUp/PageDown are the sanctioned substitute for

package/src/Switch/Switch.test.tsx

@@ -262,6 +262,22 @@ describe('Switch', () => {
     expect(screen.getByLabelText('Toggle row')).toBeInTheDocument();
   });
 
+  it('drops the label gap when isLabelHidden so the row is only as wide as the track', () => {
+    const {rerender} = render(
+      <Switch
+        label="Toggle row"
+        isLabelHidden
+        value={false}
+        onChange={() => {}}
+      />,
+    );
+    const row = screen.getByRole('switch').parentElement!.parentElement!;
+    expect(getComputedStyle(row).gap).toMatch(/^0(px)?$/);
+
+    rerender(<Switch label="Toggle row" value={false} onChange={() => {}} />);
+    expect(getComputedStyle(row).gap).not.toMatch(/^0(px)?$/);
+  });
+
   it('keeps description linked via aria-describedby when isLabelHidden', () => {
     render(
       <Switch

package/src/Switch/Switch.tsx

@@ -135,6 +135,12 @@ const styles = stylex.create({
     alignItems: 'center',
     gap: spacingVars['--spacing-2'],
   },
+  // A hidden label is sr-only, so its wrapper is a zero-width flex item — the
+  // row gap would still be painted beside the track, making the field box
+  // wider than the control it contains. Matches CheckboxInput.
+  containerLabelHidden: {
+    gap: 0,
+  },
   containerSpread: {
     justifyContent: 'space-between',
     width: '100%',
@@ -655,6 +661,7 @@ export function Switch({
         }}
         {...stylex.props(
           styles.container,
+          isLabelHidden && styles.containerLabelHidden,
           labelSpacing === 'spread' && styles.containerSpread,
           !isDisabled && switchScope,
         )}>

package/src/Table/Table.test.tsx

@@ -95,6 +95,12 @@ describe('columnUtils', () => {
     it('handles single character', () => {
       expect(capitalize('a')).toBe('A');
     });
+
+    it('uppercases an astral-plane letter without splitting it (#4759)', () => {
+      // Deseret 𐐨 (U+10428) uppercases to 𐐀 (U+10400); charAt(0) would grab
+      // half the surrogate pair and leave the string unchanged.
+      expect(capitalize('\u{10428}pple')).toBe('\u{10400}pple');
+    });
   });
 
   describe('generateColumns', () => {

package/src/Table/columnUtils.ts

@@ -13,6 +13,7 @@
 
 import type {CSSProperties, ReactNode} from 'react';
 import type {TableColumn, ProportionalWidth, PixelWidth} from './types';
+import {firstCharacter} from '../utils/characters';
 
 /** Default minimum width (in px) for proportional columns. */
 export const DEFAULT_MIN_COLUMN_WIDTH = 120;
@@ -168,7 +169,8 @@ export function capitalize(str: string): string {
   if (str.length === 0) {
     return str;
   }
-  return str.charAt(0).toUpperCase() + str.slice(1);
+  const first = firstCharacter(str);
+  return first.toUpperCase() + str.slice(first.length);
 }
 
 /**

package/src/TextArea/TextArea.doc.mjs

@@ -105,7 +105,7 @@ export const docs = {
       name: 'maxLength',
       type: 'number',
       description:
-        'Maximum number of characters allowed. When set, a character counter (current/max) is displayed inside the input container, anchored to the bottom-right beneath the text. Does not enforce the limit natively; when exceeded the counter turns red and shows a warning icon (a non-color cue), and screen-reader users hear the remaining/over-limit count announced.',
+        'Maximum number of characters allowed, counted as user-perceived characters — an emoji or flag sequence counts as one. When set, a character counter (current/max) is displayed inside the input container, anchored to the bottom-right beneath the text. Does not enforce the limit natively; when exceeded the counter turns red and shows a warning icon (a non-color cue), and screen-reader users hear the remaining/over-limit count announced. Consumers validating the limit should count with characterCount (exported from the package) so enforcement matches the displayed count.',
     },
     {
       name: 'status',

package/src/TextArea/TextArea.test.tsx

@@ -504,6 +504,33 @@ describe('TextArea', () => {
       expect(screen.getByRole('textbox')).not.toHaveAttribute('maxlength');
     });
 
+    it('counts user-perceived characters, not code units (#4759)', () => {
+      // Two surrogate-pair emoji: 4 code units, but 2 user-perceived characters.
+      render(
+        <TextArea
+          label="Description"
+          value={'\u{1F600}\u{1F600}'}
+          onChange={() => {}}
+          maxLength={5}
+        />,
+      );
+      expect(screen.getByText('2/5')).toBeInTheDocument();
+    });
+
+    it('measures the over-limit state in characters (#4759)', () => {
+      // Three ZWJ family emoji: 33 code units, 3 user-perceived characters.
+      const family = '\u{1F468}‍\u{1F469}‍\u{1F467}‍\u{1F466}';
+      render(
+        <TextArea
+          label="Description"
+          value={family.repeat(3)}
+          onChange={() => {}}
+          maxLength={2}
+        />,
+      );
+      expect(screen.getByText('3/2')).toBeInTheDocument();
+    });
+
     it('counter updates as user types (controlled)', async () => {
       const user = userEvent.setup();
       function Wrapper() {
@@ -570,6 +597,51 @@ describe('TextArea', () => {
       });
     });
 
+    it('announces zone transitions using character counts (#4759)', async () => {
+      function Wrapper() {
+        const [val, setVal] = useState('x'.repeat(7));
+        return (
+          <TextArea
+            label="Description"
+            value={val}
+            onChange={setVal}
+            maxLength={10}
+          />
+        );
+      }
+      render(<Wrapper />);
+      // Appending two emoji makes 9 characters (11 code units): near the limit
+      // with 1 remaining. Code-unit counting would call this over the limit
+      // and announce assertively instead.
+      fireEvent.change(screen.getByRole('textbox'), {
+        target: {value: 'x'.repeat(7) + '\u{1F600}\u{1F600}'},
+      });
+      const politeRegion = () =>
+        document.querySelector('[data-astryx-live-region="polite"]');
+      const assertiveRegion = () =>
+        document.querySelector('[data-astryx-live-region="assertive"]');
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('1 character remaining');
+      });
+      expect(assertiveRegion()).not.toHaveTextContent('over the limit');
+    });
+
+    it('does not flag over-limit while characters fit, even when code units exceed (#4759)', () => {
+      // Three emoji: 6 code units but 3 user-perceived characters — within a
+      // maxLength of 4, so no error state anywhere.
+      render(
+        <TextArea
+          label="Description"
+          value={'\u{1F600}'.repeat(3)}
+          onChange={() => {}}
+          maxLength={4}
+        />,
+      );
+      const counter = screen.getByText('3/4');
+      expect(counter.querySelector('svg')).toBeNull();
+      expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-invalid');
+    });
+
     it('shows a non-color over-limit indicator icon when exceeded', () => {
       const {container} = render(
         <TextArea

package/src/TextArea/TextArea.tsx

@@ -22,6 +22,7 @@ import {
   useTransition,
   useRef,
   useCallback,
+  useMemo,
   type ChangeEvent,
   type ClipboardEvent,
   type FocusEvent,
@@ -53,6 +54,7 @@ import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {useAnnounce} from '../hooks/useAnnounce';
 import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
+import {characterCount} from '../utils/characters';
 import {useTranslator} from '../i18n';
 
 const COUNTER_WARNING_THRESHOLD = 0.8;
@@ -312,10 +314,13 @@ export interface TextAreaProps extends Omit<
    */
   onPaste?: (e: ClipboardEvent<HTMLTextAreaElement>) => void;
   /**
-   * Maximum number of characters allowed.
-   * When set, displays a character counter below the textarea.
+   * Maximum number of characters allowed, counted as user-perceived
+   * characters — an emoji or flag sequence counts as one. When set,
+   * displays a character counter below the textarea.
    * Does not enforce the limit natively — the counter shows error styling
-   * when exceeded, and the consumer can validate via onChange.
+   * when exceeded, and the consumer can validate via onChange. Validate with
+   * `characterCount` (exported from this package) rather than `value.length`
+   * so enforcement matches the displayed count.
    */
   maxLength?: number;
   /**
@@ -482,7 +487,11 @@ export function TextArea({
       return;
     }
     const newValue = e.target.value;
-    announceCounter(newValue.length);
+    // Guarded here, not just inside announceCounter, so textareas without a
+    // maxLength never pay for segmenting the whole value on each keystroke.
+    if (maxLength != null) {
+      announceCounter(characterCount(newValue));
+    }
     onChange?.(newValue, e);
     if (changeAction && !e.defaultPrevented) {
       startTransition(async () => {
@@ -492,6 +501,15 @@ export function TextArea({
     }
   };
 
+  // Counter semantics count user-perceived characters, so an emoji or flag
+  // sequence counts as one character, not its code units.
+  // Only measured when a counter exists — segmentation is O(value length),
+  // and memoized so re-renders that keep the same value skip it entirely.
+  const valueLength = useMemo(
+    () => (maxLength != null ? characterCount(optimisticValue) : 0),
+    [maxLength, optimisticValue],
+  );
+
   const effectivelyDisabled = isDisabled || isBusy;
 
   // Focus textarea when clicking anywhere on the wrapper (icons, padding, etc.)
@@ -583,7 +601,7 @@ export function TextArea({
           aria-required={isRequired && !isOptional ? 'true' : undefined}
           aria-invalid={
             status?.type === 'error' ||
-            (maxLength != null && optimisticValue.length > maxLength)
+            (maxLength != null && valueLength > maxLength)
               ? 'true'
               : undefined
           }
@@ -614,15 +632,15 @@ export function TextArea({
             id={counterID}
             {...stylex.props(
               styles.counter,
-              optimisticValue.length > maxLength && styles.counterError,
+              valueLength > maxLength && styles.counterError,
             )}>
-            {optimisticValue.length > maxLength && (
+            {valueLength > maxLength && (
               // Non-color cue so the over-limit state isn't conveyed by the red
               // color alone (WCAG 1.4.1). Decorative — the count text and the
               // live-region announcement carry the meaning.
               <Icon icon="warning" size="sm" />
             )}
-            {optimisticValue.length}/{maxLength}
+            {valueLength}/{maxLength}
           </div>
         )}
       </div>

package/src/TimeInput/TimeInput.test.tsx

@@ -42,6 +42,29 @@ describe('TimeInput', () => {
     expect(screen.getByPlaceholderText('Pick a time')).toBeInTheDocument();
   });
 
+  it('does not step the time on a composing ArrowUp/ArrowDown (IME)', () => {
+    const onChange = vi.fn();
+    render(
+      <TimeInput
+        label="Time"
+        value={'14:30' as ISOTimeString}
+        onChange={onChange}
+      />,
+    );
+    const input = screen.getByLabelText('Time');
+
+    // An IME candidate window navigates with the arrows; a composing keydown
+    // (isComposing / legacy keyCode 229) must not step the time value.
+    fireEvent.keyDown(input, {key: 'ArrowUp', isComposing: true});
+    expect(onChange).not.toHaveBeenCalled();
+    fireEvent.keyDown(input, {key: 'ArrowDown', keyCode: 229});
+    expect(onChange).not.toHaveBeenCalled();
+
+    // A real, non-composing ArrowUp still steps the time by one minute.
+    fireEvent.keyDown(input, {key: 'ArrowUp'});
+    expect(onChange).toHaveBeenCalledWith('14:31');
+  });
+
   it('displays formatted time in 12h format', () => {
     render(
       <TimeInput

package/src/TimeInput/TimeInput.tsx

@@ -55,6 +55,7 @@ import {
   formatDisplayTime24h,
   formatISOTime,
   adjustTime,
+  isImeKeyEvent,
   isTimeInRange,
   mergeProps,
   mergeRefs,
@@ -530,6 +531,13 @@ export function TimeInput({
   // Handle keyboard navigation on input
   const handleInputKeyDown = 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;
+      }
       // Arrow-key adjustment mutates the value; block it while showing a
       // disabled reason (the input keeps focusability via aria-disabled).
       if (isDisabled) {