@astryxdesign/core 0.4.2 → 0.4.3-canary.07f9998

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/Chat/ChatTokenizedText.tsx

@@ -74,7 +74,7 @@ function isCustomToken(
 }
 
 function escapeRegExp(str: string): string {
-  return str.replace(/[.*+?^${}()|[\\]\\]/g, '\\$&');
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
 // =============================================================================

package/src/ComplexSelector/ComplexSelector.doc.mjs

@@ -1,5 +1,14 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+/**
+ * @file ComplexSelector.doc.mjs
+ * @input ComplexSelector public API and composition contract
+ * @output Exports full and dense component documentation
+ * @position Core documentation consumed by CLI and Storybook autodocs
+ *
+ * SYNC: When modified, update ComplexSelector.tsx, tests, and stories.
+ */
+
 /** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
@@ -19,7 +28,10 @@ export const docs = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-complex-selector', visualProps: ['size', 'status']},
+      {
+        className: 'astryx-complex-selector',
+        visualProps: ['variant', 'size', 'status'],
+      },
       {
         className: 'astryx-complex-selector-indicator-icon',
         states: ['state'],
@@ -32,7 +44,7 @@ export const docs = {
       name: 'ComplexSelector',
       displayName: 'Complex Selector',
       description:
-        'A field and dialog-popover shell for custom selector content.',
+        'An input or toolbar trigger and dialog-popover shell for custom selector content.',
       props: [
         {
           name: 'label',
@@ -93,9 +105,21 @@ export const docs = {
         {
           name: 'size',
           type: "'sm' | 'md' | 'lg'",
-          description: 'Trigger and field size.',
+          description: 'Exact trigger height: sm 28px, md 32px, or lg 36px.',
           default: "'md'",
         },
+        {
+          name: 'variant',
+          type: "'input' | 'ghost'",
+          description:
+            'Visual trigger style. Input is the bordered form treatment; ghost matches toolbar buttons.',
+          default: "'input'",
+        },
+        {
+          name: 'startIcon',
+          type: 'ReactNode | IconType',
+          description: 'Icon displayed at the start of the trigger.',
+        },
         {
           name: 'width',
           type: 'SizeValue',
@@ -107,6 +131,18 @@ export const docs = {
           description: 'Popup placement.',
           default: "'below'",
         },
+        {
+          name: 'alignment',
+          type: "'start' | 'center' | 'end'",
+          description: 'Popup alignment along the placement axis.',
+          default: "'start'",
+        },
+        {
+          name: 'handleRef',
+          type: 'React.Ref<ComplexSelectorHandle>',
+          description:
+            'Imperative handle for programmatic control. Exposes open(), close(), toggle(), and isOpen().',
+        },
         {
           name: 'contentXstyle',
           type: 'StyleXStyles',
@@ -119,6 +155,16 @@ export const docs = {
     description:
       'Use ComplexSelector when a selection needs richer custom content than a Selector option row. It is intentionally one component: ComplexSelector owns the field, trigger, popover, focus restore, and changeAction flow, while the content render prop owns the selector-specific accessible structure.',
     bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Use variant="ghost" with a startIcon when the selector is triggered from a toolbar. Use alignment="end" when a wide surface should align its end edge to the trigger.',
+      },
+      {
+        guidance: true,
+        description:
+          'For staged editors, keep draft state in the composed content and call the provided onChange helper only from Apply. Cancel or dismiss without committing.',
+      },
       {
         guidance: true,
         description:
@@ -164,7 +210,7 @@ export const docsDense = {
   group: 'Selector',
   category: 'Data Input',
   description:
-    'Field+dialog-popover shell for rich custom selectors. Content gets value/onChange/close/state; content owns semantics. Use focus hooks and evaluate custom content against WCAG 2.2.',
+    'Input/ghost trigger + dialog-popover shell for rich custom selectors. Content gets value/onChange/close/state; content owns semantics. Use focus hooks and evaluate custom content against WCAG 2.2.',
   usage: {
     description:
       'Use when a selection needs richer custom content than a Selector row. One component: it owns field, trigger, popover, focus restore, and changeAction; the render prop owns the selector-specific accessible structure.',
@@ -211,10 +257,13 @@ export const docsDense = {
     value: 'Controlled value.',
     onChange: 'Commit value.',
     changeAction: 'Async action after onChange; drives optimistic value/busy.',
-    children:
-      'Render custom dialog content from (value,onChange,close,state).',
+    children: 'Render custom dialog content from (value,onChange,close,state).',
     triggerLabel: 'Closed trigger label/content.',
+    variant: 'input for forms; ghost for toolbar triggers.',
+    startIcon: 'Leading trigger icon.',
     placement: 'Popup placement.',
+    alignment: 'Popup alignment.',
+    handleRef: 'Imperative open/close/toggle handle.',
     accessibility:
       'Custom content must provide its own accessible structure. Use focus hooks and evaluate against WCAG 2.2.',
   },

package/src/ComplexSelector/ComplexSelector.test.tsx

@@ -2,17 +2,45 @@
 
 /**
  * @file ComplexSelector.test.tsx
- * @input Uses vitest, Testing Library, user-event
- * @output Unit tests for ComplexSelector
- * @position Tests; validates custom content, async actions, and dialog composition
+ * @input Uses vitest, Testing Library, user-event, and ComplexSelector
+ * @output Unit tests for selection, trigger variants, positioning, and the imperative handle
+ * @position Tests; validates the ComplexSelector public interaction contract
  *
  * SYNC: When ComplexSelector.tsx API changes, update these tests.
  */
 
-import {describe, expect, it, vi} from 'vitest';
-import {render, screen, waitFor} from '@testing-library/react';
+import React from 'react';
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {act, fireEvent, render, screen, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {ComplexSelector} from './ComplexSelector';
+import {ComplexSelector, type ComplexSelectorHandle} from './ComplexSelector';
+
+const originalMatches = HTMLElement.prototype.matches;
+
+// Mock the Popover API, which jsdom does not implement.
+beforeEach(() => {
+  HTMLElement.prototype.showPopover = vi.fn(function (this: HTMLElement) {
+    this.setAttribute('popover-open', '');
+    const event = new Event('toggle');
+    Object.defineProperty(event, 'newState', {value: 'open'});
+    this.dispatchEvent(event);
+  });
+  HTMLElement.prototype.hidePopover = vi.fn(function (this: HTMLElement) {
+    this.removeAttribute('popover-open');
+    const event = new Event('toggle');
+    Object.defineProperty(event, 'newState', {value: 'closed'});
+    this.dispatchEvent(event);
+  });
+  Object.defineProperty(HTMLElement.prototype, 'matches', {
+    configurable: true,
+    value: function (this: HTMLElement, selector: string): boolean {
+      if (selector === ':popover-open') {
+        return this.hasAttribute('popover-open');
+      }
+      return originalMatches.call(this, selector);
+    },
+  });
+});
 
 type FruitValue = {
   fruit: 'Apple' | 'Banana';
@@ -83,6 +111,35 @@ function FruitComplexSelector({
 }
 
 describe('ComplexSelector', () => {
+  it('defaults to md and reflects explicit trigger sizes', () => {
+    const {container, rerender} = render(
+      <ComplexSelector label="Fruit blend" value="Apple">
+        {() => <div>Options</div>}
+      </ComplexSelector>,
+    );
+
+    const getSelector = () =>
+      container.querySelector('.astryx-complex-selector');
+
+    expect(getSelector()).toHaveAttribute('data-size', 'md');
+
+    rerender(
+      <ComplexSelector label="Fruit blend" value="Apple" size="sm">
+        {() => <div>Options</div>}
+      </ComplexSelector>,
+    );
+
+    expect(getSelector()).toHaveAttribute('data-size', 'sm');
+
+    rerender(
+      <ComplexSelector label="Fruit blend" value="Apple" size="lg">
+        {() => <div>Options</div>}
+      </ComplexSelector>,
+    );
+
+    expect(getSelector()).toHaveAttribute('data-size', 'lg');
+  });
+
   it('renders custom content with value and commits through onChange', async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
@@ -174,6 +231,140 @@ describe('ComplexSelector', () => {
     await user.click(screen.getByRole('button', {name: 'Done', ...h}));
     expect(trigger).toHaveAttribute('aria-expanded', 'false');
   });
+
+  it('renders a ghost toolbar trigger with a start icon', () => {
+    const {container} = render(
+      <ComplexSelector
+        label="View options"
+        value={['name']}
+        variant="ghost"
+        startIcon="viewColumns"
+        status={{type: 'warning', message: 'Unsaved changes'}}
+        data-testid="view-options">
+        {() => <div>Columns</div>}
+      </ComplexSelector>,
+    );
+
+    expect(container.querySelector('.astryx-complex-selector')).toHaveAttribute(
+      'data-variant',
+      'ghost',
+    );
+    expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
+      'data-variant',
+      'detached',
+    );
+    expect(
+      screen.getByTestId('view-options').querySelectorAll('svg'),
+    ).toHaveLength(2);
+  });
+
+  it('supports end-aligned popup positioning', () => {
+    render(
+      <ComplexSelector label="View options" value={[]} alignment="end">
+        {() => <div>Columns</div>}
+      </ComplexSelector>,
+    );
+
+    const popover = screen
+      .getByRole('dialog', {hidden: true})
+      .closest('[popover]');
+    expect(popover?.getAttribute('style')).toContain(
+      'position-area: self-block-end span-self-inline-start',
+    );
+  });
+
+  it('exposes imperative open, close, toggle, and isOpen via handleRef', async () => {
+    const handleRef = React.createRef<ComplexSelectorHandle>();
+    render(
+      <ComplexSelector label="View options" value={[]} handleRef={handleRef}>
+        {() => <button type="button">Apply</button>}
+      </ComplexSelector>,
+    );
+    const trigger = screen.getByRole('button', {name: 'View options'});
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(handleRef.current?.isOpen()).toBe(false);
+
+    act(() => {
+      handleRef.current?.open();
+    });
+    await waitFor(() => {
+      expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    });
+    expect(handleRef.current?.isOpen()).toBe(true);
+
+    act(() => {
+      handleRef.current?.close();
+    });
+    await waitFor(() => {
+      expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    });
+    expect(handleRef.current?.isOpen()).toBe(false);
+
+    act(() => {
+      handleRef.current?.toggle();
+    });
+    await waitFor(() => {
+      expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    act(() => {
+      handleRef.current?.toggle();
+    });
+    await waitFor(() => {
+      expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    });
+  });
+
+  it('does not open via the imperative handle when disabled', async () => {
+    const handleRef = React.createRef<ComplexSelectorHandle>();
+    render(
+      <ComplexSelector
+        label="View options"
+        value={[]}
+        isDisabled
+        handleRef={handleRef}>
+        {() => <button type="button">Apply</button>}
+      </ComplexSelector>,
+    );
+    const trigger = screen.getByRole('button', {name: 'View options'});
+
+    act(() => {
+      handleRef.current?.open();
+    });
+    act(() => {
+      handleRef.current?.toggle();
+    });
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(handleRef.current?.isOpen()).toBe(false);
+  });
+
+  it('does not reopen from the trigger click that follows light dismiss', async () => {
+    const user = userEvent.setup();
+    render(
+      <ComplexSelector label="View options" value={[]}>
+        {() => <button type="button">Apply</button>}
+      </ComplexSelector>,
+    );
+    const trigger = screen.getByRole('button', {name: 'View options'});
+
+    await user.click(trigger);
+    const popover = screen
+      .getByRole('dialog', {hidden: true})
+      .closest('[popover]');
+    expect(popover).not.toBeNull();
+
+    const closeEvent = new Event('toggle');
+    Object.defineProperty(closeEvent, 'newState', {value: 'closed'});
+    fireEvent(popover as HTMLElement, closeEvent);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+
+    const showCallCount = vi.mocked(HTMLElement.prototype.showPopover).mock
+      .calls.length;
+    fireEvent.click(trigger);
+    expect(HTMLElement.prototype.showPopover).toHaveBeenCalledTimes(
+      showCallCount,
+    );
+  });
 });
 
 describe('ComplexSelector popup theme target', () => {