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

package/src/Tokenizer/Tokenizer.test.tsx

@@ -16,6 +16,16 @@ import {Tokenizer} from './Tokenizer';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 import type {SearchSource, SearchableItem} from '../Typeahead/types';
 import {TestIcon} from '../__tests__/TestIcon';
+import {InternationalizationProvider} from '../i18n';
+
+// Test-supplied announcement strings: the assertions below depend on no
+// catalog, and no hardcoded English in the component can satisfy them.
+const TOKEN_MESSAGES = {
+  fr: {
+    '@astryx.tokenizer.tokenAdded': 'Ajouté : {label}',
+    '@astryx.tokenizer.tokenRemoved': 'Retiré : {label}',
+  },
+};
 
 function politeRegion(): HTMLElement | null {
   return document.querySelector('[data-astryx-live-region="polite"]');
@@ -980,12 +990,14 @@ describe('Tokenizer', () => {
     it('announces removal politely on Backspace with an empty input', async () => {
       const onChange = vi.fn();
       render(
-        <Tokenizer
-          label="Members"
-          searchSource={userSource}
-          value={[users[0], users[1]]}
-          onChange={onChange}
-        />,
+        <InternationalizationProvider locale="fr" overrides={TOKEN_MESSAGES}>
+          <Tokenizer
+            label="Members"
+            searchSource={userSource}
+            value={[users[0], users[1]]}
+            onChange={onChange}
+          />
+        </InternationalizationProvider>,
       );
       const input = screen.getByRole('combobox');
       fireEvent.keyDown(input, {key: 'Backspace'});
@@ -994,35 +1006,39 @@ describe('Tokenizer', () => {
         type: 'remove',
       });
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Removed Bob');
+        expect(politeRegion()?.textContent).toBe('Retiré : Bob');
       });
     });
 
     it("announces removal politely when clicking a token's remove button", async () => {
       render(
-        <Tokenizer
-          label="Members"
-          searchSource={userSource}
-          value={[users[0], users[1]]}
-          onChange={() => {}}
-        />,
+        <InternationalizationProvider locale="fr" overrides={TOKEN_MESSAGES}>
+          <Tokenizer
+            label="Members"
+            searchSource={userSource}
+            value={[users[0], users[1]]}
+            onChange={() => {}}
+          />
+        </InternationalizationProvider>,
       );
       fireEvent.click(screen.getByRole('button', {name: 'Remove Alice'}));
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Removed Alice');
+        expect(politeRegion()?.textContent).toBe('Retiré : Alice');
       });
     });
 
     it('announces addition politely when selecting a search result', async () => {
       render(
-        <Tokenizer
-          label="Members"
-          searchSource={userSource}
-          value={[]}
-          onChange={() => {}}
-          hasEntriesOnFocus
-          debounceMs={0}
-        />,
+        <InternationalizationProvider locale="fr" overrides={TOKEN_MESSAGES}>
+          <Tokenizer
+            label="Members"
+            searchSource={userSource}
+            value={[]}
+            onChange={() => {}}
+            hasEntriesOnFocus
+            debounceMs={0}
+          />
+        </InternationalizationProvider>,
       );
       const input = screen.getByRole('combobox');
       fireEvent.focus(input);
@@ -1031,7 +1047,7 @@ describe('Tokenizer', () => {
       });
       fireEvent.click(screen.getByText('Alice'));
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Added Alice');
+        expect(politeRegion()?.textContent).toBe('Ajouté : Alice');
       });
     });
 
@@ -1041,14 +1057,16 @@ describe('Tokenizer', () => {
         bootstrap: () => [],
       };
       render(
-        <Tokenizer
-          label="Tags"
-          searchSource={emptySource}
-          value={[]}
-          onChange={() => {}}
-          hasCreate
-          debounceMs={0}
-        />,
+        <InternationalizationProvider locale="fr" overrides={TOKEN_MESSAGES}>
+          <Tokenizer
+            label="Tags"
+            searchSource={emptySource}
+            value={[]}
+            onChange={() => {}}
+            hasCreate
+            debounceMs={0}
+          />
+        </InternationalizationProvider>,
       );
       const input = screen.getByRole('combobox');
       await act(async () => {
@@ -1059,7 +1077,7 @@ describe('Tokenizer', () => {
       });
       fireEvent.click(screen.getByText('Create "new-tag"'));
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Added new-tag');
+        expect(politeRegion()?.textContent).toBe('Ajouté : new-tag');
       });
     });
 

package/src/Tokenizer/Tokenizer.tsx

@@ -600,7 +600,7 @@ export function Tokenizer<T extends SearchableItem>({
         const realItem = base as T;
         const newItems = [...value, realItem];
         onChange(newItems, {item: realItem, type: 'create'});
-        announce(`Added ${createdValue}`);
+        announce(t('@astryx.tokenizer.tokenAdded', {label: createdValue}));
         return;
       }
 
@@ -609,9 +609,9 @@ export function Tokenizer<T extends SearchableItem>({
       }
       const newItems = [...value, item];
       onChange(newItems, {item, type: 'add'});
-      announce(`Added ${item.label}`);
+      announce(t('@astryx.tokenizer.tokenAdded', {label: item.label}));
     },
-    [value, onChange, isAtMax, selectedIds, hasCreate, announce],
+    [value, onChange, isAtMax, selectedIds, hasCreate, announce, t],
   );
 
   // Handle removing an item. Single removal path: both Backspace on an empty
@@ -621,10 +621,10 @@ export function Tokenizer<T extends SearchableItem>({
     (item: T) => {
       const newItems = value.filter(v => v.id !== item.id);
       onChange(newItems, {item, type: 'remove'});
-      announce(`Removed ${item.label}`);
+      announce(t('@astryx.tokenizer.tokenRemoved', {label: item.label}));
       inputRef.current?.focus();
     },
-    [value, onChange, announce],
+    [value, onChange, announce, t],
   );
 
   // Handle clearing all items

package/src/Tooltip/useTooltip.tsx

@@ -28,6 +28,7 @@ import {
 } from '../Layer/useLayer';
 import {layerAnimations} from '../Layer/layerAnimations.stylex';
 import {themeProps} from '../utils/themeProps';
+import {isImeKeyEvent} from '../utils/ime';
 import {
   colorVars,
   radiusVars,
@@ -454,7 +455,9 @@ export function useTooltip(options: TooltipOptions = {}): TooltipReturn {
       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;
       }
       clearTimeouts();

package/src/TreeList/TreeList.doc.mjs

@@ -24,7 +24,7 @@ export const docs = {
   },
   theming: {
     targets: [
-      {className: 'astryx-tree-list', visualProps: ['density']},
+      {className: 'astryx-tree-list', visualProps: ['density', 'variant']},
       {className: 'astryx-tree-list-item', visualProps: ['density'], states: ['selected', 'disabled']},
       {className: 'astryx-tree-list-chevron', states: ['state']},
       {className: 'astryx-tree-list-item-label', states: ['selected']},
@@ -104,7 +104,7 @@ export const docsZh = {
   group: 'TreeList',
   theming: {
     targets: [
-      {className: 'astryx-tree-list', visualProps: ['density']},
+      {className: 'astryx-tree-list', visualProps: ['density', 'variant']},
       {className: 'astryx-tree-list-item', visualProps: ['density'], states: ['selected', 'disabled']},
       {className: 'astryx-tree-list-chevron', states: ['state']},
       {className: 'astryx-tree-list-item-label', states: ['selected']},

package/src/TreeList/TreeList.tsx

@@ -332,7 +332,7 @@ export function TreeList({
       ref={ref}
       data-testid={testId}
       {...mergeProps(
-        themeProps('tree-list', {density}),
+        themeProps('tree-list', {density, variant}),
         stylex.props(styles.root, xstyle),
         className,
         style,

package/src/Typeahead/BaseTypeahead.tsx

@@ -30,7 +30,7 @@ import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
 import {usePopover} from '../Popover/usePopover';
 import {useAnnounce} from '../hooks/useAnnounce';
-import {isImeKeyEvent} from '../hooks/useFocusTrap';
+import {isImeKeyEvent} from '../utils/ime';
 import {TypeaheadItem} from './TypeaheadItem';
 import {Icon} from '../Icon';
 import {
@@ -449,7 +449,7 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
           announce(
             shown.length === 0
               ? emptySearchResultsText
-              : `${shown.length} ${shown.length === 1 ? 'result' : 'results'}`,
+              : t('@astryx.typeahead.resultCount', {count: shown.length}),
           );
         }
       } catch {
@@ -464,7 +464,14 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
         }
       }
     },
-    [searchSource, maxMenuItems, showLayer, announce, emptySearchResultsText],
+    [
+      searchSource,
+      maxMenuItems,
+      showLayer,
+      announce,
+      emptySearchResultsText,
+      t,
+    ],
   );
 
   // Perform bootstrap

package/src/Typeahead/Typeahead.test.tsx

@@ -23,6 +23,7 @@ import userEvent from '@testing-library/user-event';
 import {Typeahead} from './Typeahead';
 import {BaseTypeahead} from './BaseTypeahead';
 import type {SearchSource, SearchableItem} from './types';
+import {InternationalizationProvider} from '../i18n';
 
 // Store original matches to restore later
 const originalMatches = HTMLElement.prototype.matches;
@@ -132,21 +133,94 @@ describe('BaseTypeahead', () => {
 
   it('announces the result count to a live region (comboboxes-6)', async () => {
     render(
-      <BaseTypeahead
-        searchSource={fruitSource}
-        value={null}
-        onChange={() => {}}
-        debounceMs={0}
-      />,
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{
+          fr: {
+            '@astryx.typeahead.resultCount':
+              '{count, number} {count, plural, one {résultat} other {résultats}}',
+          },
+        }}>
+        <BaseTypeahead
+          searchSource={fruitSource}
+          value={null}
+          onChange={() => {}}
+          debounceMs={0}
+        />
+      </InternationalizationProvider>,
     );
     const input = screen.getByRole('combobox');
+    // "Ap" matches Apple only — the singular ICU branch.
     fireEvent.change(input, {target: {value: 'Ap'}});
 
     await waitFor(() => {
       const region = document.querySelector(
         '[data-astryx-live-region="polite"]',
       );
-      expect(region?.textContent).toMatch(/\d+ results?/);
+      // Exact, so the plural branch ("1 résultats") would fail.
+      expect(region?.textContent).toBe('1 résultat');
+    });
+  });
+
+  it('announces the plural result count', async () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{
+          fr: {
+            '@astryx.typeahead.resultCount':
+              '{count, number} {count, plural, one {résultat} other {résultats}}',
+          },
+        }}>
+        <BaseTypeahead
+          searchSource={fruitSource}
+          value={null}
+          onChange={() => {}}
+          debounceMs={0}
+        />
+      </InternationalizationProvider>,
+    );
+    const input = screen.getByRole('combobox');
+    // "err" matches Cherry and Elderberry.
+    fireEvent.change(input, {target: {value: 'err'}});
+
+    await waitFor(() => {
+      const region = document.querySelector(
+        '[data-astryx-live-region="polite"]',
+      );
+      expect(region?.textContent).toBe('2 résultats');
+    });
+  });
+
+  it('speaks the result count from a provider catalog', async () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        messages={{
+          fr: {
+            '@astryx.typeahead.resultCount': {
+              defaultMessage:
+                '{count, number} {count, plural, one {résultat} other {résultats}}',
+            },
+          },
+        }}>
+        <BaseTypeahead
+          searchSource={fruitSource}
+          value={null}
+          onChange={() => {}}
+          debounceMs={0}
+        />
+      </InternationalizationProvider>,
+    );
+    const input = screen.getByRole('combobox');
+    fireEvent.change(input, {target: {value: 'err'}});
+
+    await waitFor(() => {
+      const region = document.querySelector(
+        '[data-astryx-live-region="polite"]',
+      );
+      // Same key through the catalog path rather than `overrides`.
+      expect(region?.textContent).toBe('2 résultats');
     });
   });
 
@@ -796,6 +870,41 @@ describe('Typeahead edit mode', () => {
     // onChange should not have been called — value restored
     expect(onChange).not.toHaveBeenCalled();
   });
+
+  it('does not exit edit mode on a composing Escape (IME)', async () => {
+    const onChange = vi.fn();
+    render(
+      <Typeahead
+        label="Fruit"
+        searchSource={fruitSource}
+        value={fruits[0]}
+        onChange={onChange}
+      />,
+    );
+
+    // Enter edit mode by clicking the token; the input uncollapses and
+    // rejoins the Tab order (tabindex is cleared).
+    const tokenText = screen.getByText(fruits[0].label);
+    fireEvent.click(tokenText.closest('div')!);
+    await act(async () => {
+      await new Promise(r => requestAnimationFrame(r));
+    });
+    const input = screen.getByRole('combobox');
+    expect(input).not.toHaveAttribute('tabindex', '-1');
+
+    // BaseTypeahead invokes this external handler before its own IME guard, so
+    // a composing Escape (isComposing / legacy keyCode 229) — which an IME uses
+    // to cancel the pending candidate — must not exit edit mode here.
+    fireEvent.keyDown(input, {key: 'Escape', isComposing: true});
+    expect(screen.getByRole('combobox')).not.toHaveAttribute('tabindex', '-1');
+    fireEvent.keyDown(input, {key: 'Escape', keyCode: 229});
+    expect(screen.getByRole('combobox')).not.toHaveAttribute('tabindex', '-1');
+
+    // A real, non-composing Escape still exits edit mode: the token is
+    // restored and the collapsed input drops back out of the Tab order.
+    fireEvent.keyDown(input, {key: 'Escape'});
+    expect(screen.getByRole('combobox')).toHaveAttribute('tabindex', '-1');
+  });
 });
 
 describe('Typeahead collapsed input tab order', () => {

package/src/Typeahead/Typeahead.tsx

@@ -45,7 +45,7 @@ import {VisuallyHidden} from '../VisuallyHidden';
 import {spacingVars, sizeVars} from '../theme/tokens.stylex';
 import {groupStyles} from '../InputGroup/groupStyles';
 import {useInputGroup} from '../InputGroup/InputGroupContext';
-import {getInputARIA, mergeProps, mergeRefs} from '../utils';
+import {getInputARIA, isImeKeyEvent, mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import type {SearchableItem, SearchSource} from './types';
@@ -369,6 +369,15 @@ export function Typeahead<T extends SearchableItem>({
   // Handle Escape during edit mode — restore token
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
+      // BaseTypeahead invokes this external handler *before* its own IME
+      // guard, so we must guard here too: an IME candidate window uses Escape
+      // to cancel the pending composition, and that composing Escape fires
+      // before compositionend. Without this, a Korean/Japanese/Chinese user
+      // cancelling a candidate would instead exit edit mode and blur the
+      // field. See utils/ime.ts.
+      if (isImeKeyEvent(e.nativeEvent)) {
+        return;
+      }
       if (e.key === 'Escape' && editingValue) {
         e.preventDefault();
         setIsEditing(false);

package/src/__tests__/stubMatchMedia.test.ts

@@ -0,0 +1,79 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file stubMatchMedia.test.ts
+ * @input Uses vitest, stubMatchMedia
+ * @output Unit coverage for the shared query-aware matchMedia stub
+ * @position Testing; guards the helper other suites trust to route queries
+ *
+ * The helper exists because a stub that ignores its query silently reroutes
+ * code branching on a different one — the failure mode leaves every test
+ * green. A helper sold on that promise has to be held to it, so these assert
+ * the routing itself rather than any component behaviour.
+ */
+
+import {describe, it, expect, afterEach, vi} from 'vitest';
+import {stubMatchMedia} from './stubMatchMedia';
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('stubMatchMedia', () => {
+  it('routes prefers-reduced-motion independently of every other query', () => {
+    // The exact combination the blanket stub could not express: below a
+    // breakpoint (matches) while motion is NOT reduced.
+    stubMatchMedia({reduceMotion: false, matches: true});
+
+    expect(matchMedia('(prefers-reduced-motion: reduce)').matches).toBe(false);
+    expect(matchMedia('(max-width: 768px)').matches).toBe(true);
+  });
+
+  it('answers no-preference as the opposite of reduce', () => {
+    // Two spellings, opposite meanings. A substring test on
+    // 'prefers-reduced-motion' alone would hand both the same answer.
+    stubMatchMedia({reduceMotion: true});
+
+    expect(matchMedia('(prefers-reduced-motion: reduce)').matches).toBe(true);
+    expect(matchMedia('(prefers-reduced-motion: no-preference)').matches).toBe(
+      false,
+    );
+  });
+
+  it('treats the bare preference query as reduce', () => {
+    stubMatchMedia({reduceMotion: true});
+    expect(matchMedia('(prefers-reduced-motion)').matches).toBe(true);
+
+    stubMatchMedia({reduceMotion: false});
+    expect(matchMedia('(prefers-reduced-motion)').matches).toBe(false);
+  });
+
+  it('defaults to full motion and matching everything else', () => {
+    stubMatchMedia();
+
+    expect(matchMedia('(prefers-reduced-motion: reduce)').matches).toBe(false);
+    expect(matchMedia('(max-width: 768px)').matches).toBe(true);
+  });
+
+  it('lets a non-motion query be answered false', () => {
+    // Above the breakpoint, motion still reduced — the other axis of the
+    // combination, so neither knob can be quietly driving both.
+    stubMatchMedia({reduceMotion: true, matches: false});
+
+    expect(matchMedia('(prefers-reduced-motion: reduce)').matches).toBe(true);
+    expect(matchMedia('(max-width: 768px)').matches).toBe(false);
+  });
+
+  it('echoes the query and exposes the listener API components subscribe to', () => {
+    stubMatchMedia();
+    const mql = matchMedia('(max-width: 768px)');
+
+    // useMediaQuery subscribes; a stub without these throws on mount rather
+    // than failing an assertion, which reads as an unrelated crash.
+    expect(mql.media).toBe('(max-width: 768px)');
+    expect(typeof mql.addEventListener).toBe('function');
+    expect(typeof mql.removeEventListener).toBe('function');
+    expect(typeof mql.addListener).toBe('function');
+    expect(typeof mql.removeListener).toBe('function');
+  });
+});

package/src/__tests__/stubMatchMedia.ts

@@ -0,0 +1,95 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file stubMatchMedia.ts
+ * @input Uses vitest
+ * @output stubMatchMedia — a query-aware window.matchMedia stub
+ * @position Shared test helper; imported by component tests that render below
+ *   a breakpoint while also exercising motion-sensitive behaviour
+ *
+ * jsdom has no matchMedia, so tests stub it. The usual stub answers every query
+ * with one boolean:
+ *
+ *   vi.stubGlobal('matchMedia', vi.fn().mockReturnValue({matches: true, ...}))
+ *
+ * That is enough to put AppShell below its breakpoint — and it silently also
+ * matches `prefers-reduced-motion`, rerouting any code that branches on motion.
+ * MobileNav's close delay is capped at 0 under reduced motion, so a suite using
+ * the blanket stub runs against an immediate close while its test names claim
+ * it is exercising the real delay. The failure mode is invisible: every test
+ * still passes.
+ *
+ * So the two answers are separate knobs here. `reduceMotion` answers
+ * `prefers-reduced-motion` only; `matches` answers everything else (breakpoint
+ * width queries, which tests below a breakpoint want to be true).
+ *
+ * SYNC: When modified, update this header.
+ */
+
+import {vi} from 'vitest';
+
+export interface StubMatchMediaOptions {
+  /** Whether the user prefers reduced motion. */
+  reduceMotion?: boolean;
+  /** Answer for every other query — width breakpoints, hover, etc. */
+  matches?: boolean;
+}
+
+/**
+ * Answer a `prefers-reduced-motion` query, or null if it isn't one.
+ *
+ * The preference has two spellings and they are opposites, so a single
+ * `includes('prefers-reduced-motion')` would answer `no-preference` with the
+ * value meant for `reduce` — the same answer-without-reading mistake this
+ * helper exists to prevent. Core only queries `reduce` today (MobileNav,
+ * Carousel); handling both is what keeps that true if one changes.
+ */
+function answerReducedMotion(
+  query: string,
+  reduceMotion: boolean,
+): boolean | null {
+  if (query.includes('prefers-reduced-motion: reduce')) {
+    return reduceMotion;
+  }
+  if (query.includes('prefers-reduced-motion: no-preference')) {
+    return !reduceMotion;
+  }
+  // Bare `(prefers-reduced-motion)` is true for any value other than
+  // no-preference, i.e. the same as `reduce`.
+  if (query.includes('prefers-reduced-motion')) {
+    return reduceMotion;
+  }
+  return null;
+}
+
+/**
+ * Install a `window.matchMedia` stub whose answer depends on the query.
+ *
+ * Call from `beforeEach` (or inside a test that needs different motion
+ * settings) and pair with `vi.unstubAllGlobals()` in `afterEach`.
+ *
+ * @example
+ * ```
+ * beforeEach(() => {
+ *   stubMatchMedia({reduceMotion: false});
+ * });
+ * ```
+ */
+export function stubMatchMedia({
+  reduceMotion = false,
+  matches = true,
+}: StubMatchMediaOptions = {}): void {
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn((query: string) => ({
+      matches: answerReducedMotion(query, reduceMotion) ?? matches,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  );
+}

package/src/hooks/index.ts

@@ -11,13 +11,17 @@
  * SYNC: When modified, update this header
  */
 
-export {
-  hasActiveFocusTrapEscape,
-  isImeKeyEvent,
-  useFocusTrap,
-} from './useFocusTrap';
+export {hasActiveFocusTrapEscape, useFocusTrap} from './useFocusTrap';
 export type {UseFocusTrapOptions, UseFocusTrapReturn} from './useFocusTrap';
 
+/**
+ * @deprecated Import from `@astryxdesign/core/utils` instead — this is a pure
+ * predicate, not a hook, and the `hooks` barrel is a `'use client'` boundary.
+ * Re-exported here for one release so consumers can move; will be removed in
+ * an upcoming major.
+ */
+export {isImeKeyEvent} from '../utils/ime';
+
 export {useAnnounce} from './useAnnounce';
 export type {AnnounceFn, AnnouncePoliteness} from './useAnnounce';
 

package/src/hooks/useFocusTrap.ts

@@ -19,6 +19,7 @@
 import {useCallback, useEffect, useRef} from 'react';
 
 import {FOCUSABLE_SELECTOR} from './focusableSelector';
+import {isImeKeyEvent} from '../utils/ime';
 
 /**
  * Module-level stack of active focus-trap Escape handlers.
@@ -94,20 +95,6 @@ export function hasActiveFocusTrapEscape(): boolean {
   return escapeStack.length > 0;
 }
 
-/**
- * Whether an Escape keydown should be ignored because it is cancelling an
- * in-progress IME composition. CJK/IME users press Escape to cancel
- * composition; that must not close the surrounding overlay. `keyCode === 229`
- * covers browsers that fire keydown before `isComposing` is set. Exported so
- * other overlays (Dialog, Drawer, CommandPalette) share one definition.
- */
-export function isImeKeyEvent(event: {
-  isComposing?: boolean;
-  keyCode?: number;
-}): boolean {
-  return event.isComposing === true || event.keyCode === 229;
-}
-
 /**
  * Whether an element is currently perceivable/focusable — excludes ones hidden
  * via `display:none`/`visibility:hidden` or inside an `inert`/`hidden` subtree,