@astryxdesign/core 0.1.4 → 0.1.5-canary.76e6697

package/src/Chat/ChatDictationButton.test.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+import {render, screen} from '@testing-library/react';
+import {ChatDictationButton} from './ChatDictationButton';
+import type {UseSpeechRecognitionReturn} from './useSpeechRecognition';
+
+const dictation: UseSpeechRecognitionReturn = {
+  isSupported: true,
+  isListening: false,
+  isSpeaking: false,
+  volume: 0,
+  bands: [0, 0, 0, 0, 0],
+  rawBands: [0, 0, 0, 0, 0],
+  interimTranscript: '',
+  start: () => {},
+  stop: () => {},
+  abort: () => {},
+  toggle: () => {},
+};
+
+describe('ChatDictationButton', () => {
+  it('renders a dictation button', () => {
+    render(
+      <ChatDictationButton dictation={dictation} data-testid="dictation" />,
+    );
+    expect(screen.getByTestId('dictation')).toBeTruthy();
+  });
+
+  it('forwards rest props (data-*, aria-*, id) to the root element', () => {
+    render(
+      <ChatDictationButton
+        dictation={dictation}
+        data-testid="dictation"
+        data-custom="x"
+        id="dictate-1"
+      />,
+    );
+    const root = screen.getByTestId('dictation');
+    expect(root).toHaveAttribute('data-custom', 'x');
+    expect(root).toHaveAttribute('id', 'dictate-1');
+  });
+});

package/src/Chat/ChatDictationButton.tsx

@@ -105,6 +105,7 @@ export function ChatDictationButton({
   xstyle,
   className,
   style,
+  ...rest
 }: ChatDictationButtonProps) {
   if (isHiddenWhenUnsupported && !dictation.isSupported) {
     return null;
@@ -130,7 +131,8 @@ export function ChatDictationButton({
   return (
     <span
       ref={ref}
-      {...mergeProps(stylex.props(styles.wrapper, xstyle), className, style)}>
+      {...mergeProps(stylex.props(styles.wrapper, xstyle), className, style)}
+      {...rest}>
       {isListening && (
         <span
           aria-hidden
@@ -161,9 +163,7 @@ export function ChatDictationButton({
         aria-label={accessibleLabel}
         variant="ghost"
         size={size}
-        icon={
-          isListening ? undefined : <Icon icon="microphone" size={size} />
-        }
+        icon={isListening ? undefined : <Icon icon="microphone" size={size} />}
         isIconOnly
         onClick={dictation.toggle}
       />

package/src/Chat/ChatLayoutScrollButton.test.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+import {render, screen} from '@testing-library/react';
+import {ChatLayoutScrollButton} from './ChatLayoutScrollButton';
+
+describe('ChatLayoutScrollButton', () => {
+  it('renders a scroll button', () => {
+    render(
+      <ChatLayoutScrollButton
+        isVisible
+        onClick={() => {}}
+        data-testid="scroll"
+      />,
+    );
+    expect(screen.getByTestId('scroll')).toBeTruthy();
+  });
+
+  it('forwards rest props (data-*, aria-*, id) to the root element', () => {
+    render(
+      <ChatLayoutScrollButton
+        isVisible
+        onClick={() => {}}
+        data-testid="scroll"
+        data-custom="x"
+        id="scroll-1"
+      />,
+    );
+    const root = screen.getByTestId('scroll');
+    expect(root).toHaveAttribute('data-custom', 'x');
+    expect(root).toHaveAttribute('id', 'scroll-1');
+  });
+});

package/src/Chat/ChatLayoutScrollButton.tsx

@@ -118,11 +118,13 @@ export function ChatLayoutScrollButton({
   xstyle,
   className,
   style,
+  ...rest
 }: ChatLayoutScrollButtonProps) {
   return (
     <div
       ref={ref}
-      {...mergeProps(stylex.props(styles.wrapper, xstyle), className, style)}>
+      {...mergeProps(stylex.props(styles.wrapper, xstyle), className, style)}
+      {...rest}>
       <div
         {...stylex.props(
           styles.container,

package/src/Chat/ChatMessageMetadata.test.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+import {render, screen} from '@testing-library/react';
+import {ChatMessageMetadata} from './ChatMessageMetadata';
+
+describe('ChatMessageMetadata', () => {
+  it('renders metadata content', () => {
+    render(
+      <ChatMessageMetadata
+        timestamp="12:00"
+        status="read"
+        data-testid="meta"
+      />,
+    );
+    expect(screen.getByTestId('meta')).toBeTruthy();
+  });
+
+  it('forwards rest props (data-*, aria-*, id) to the root element', () => {
+    render(
+      <ChatMessageMetadata
+        timestamp="12:00"
+        data-testid="meta"
+        data-custom="x"
+        id="meta-1"
+      />,
+    );
+    const root = screen.getByTestId('meta');
+    expect(root).toHaveAttribute('data-custom', 'x');
+    expect(root).toHaveAttribute('id', 'meta-1');
+  });
+});

package/src/Chat/ChatMessageMetadata.tsx

@@ -28,11 +28,7 @@ import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 
 export type ChatMessageStatus =
-  | 'sending'
-  | 'sent'
-  | 'delivered'
-  | 'read'
-  | 'error';
+  'sending' | 'sent' | 'delivered' | 'read' | 'error';
 
 const STATUS_CONFIG: Record<
   ChatMessageStatus,
@@ -118,6 +114,7 @@ export function ChatMessageMetadata({
   xstyle,
   className,
   style,
+  ...rest
 }: ChatMessageMetadataProps) {
   const msgContext = useChatMessageContext();
   const sender = msgContext?.sender ?? 'assistant';
@@ -142,7 +139,8 @@ export function ChatMessageMetadata({
         ),
         className,
         style,
-      )}>
+      )}
+      {...rest}>
       {timestamp != null && <span>{timestamp}</span>}
       {timestamp != null && (footer != null || statusConfig != null) && (
         <span>·</span>

package/src/Chat/ChatSystemMessage.test.tsx

@@ -11,26 +11,20 @@ describe('ChatSystemMessage', () => {
   });
 
   it('has role="status"', () => {
-    render(
-      <ChatSystemMessage data-testid="sys">Notice</ChatSystemMessage>,
-    );
+    render(<ChatSystemMessage data-testid="sys">Notice</ChatSystemMessage>);
     const el = screen.getByTestId('sys');
     expect(el.getAttribute('role')).toBe('status');
   });
 
   it('renders default variant without divider lines', () => {
-    const {container} = render(
-      <ChatSystemMessage>Hello</ChatSystemMessage>,
-    );
+    const {container} = render(<ChatSystemMessage>Hello</ChatSystemMessage>);
     // Divider lines have aria-hidden, so check there are none
     const hiddenElements = container.querySelectorAll('[aria-hidden]');
     expect(hiddenElements.length).toBe(0);
   });
 
   it('renders divider variant with Divider', () => {
-    render(
-      <ChatSystemMessage variant="divider">Today</ChatSystemMessage>,
-    );
+    render(<ChatSystemMessage variant="divider">Today</ChatSystemMessage>);
     expect(screen.getByText('Today')).toBeTruthy();
   });
 
@@ -54,9 +48,30 @@ describe('ChatSystemMessage', () => {
   });
 
   it('applies data-testid', () => {
+    render(<ChatSystemMessage data-testid="my-sys">Hello</ChatSystemMessage>);
+    expect(screen.getByTestId('my-sys')).toBeTruthy();
+  });
+
+  it('forwards rest props (data-*, id) while keeping its own role', () => {
     render(
-      <ChatSystemMessage data-testid="my-sys">Hello</ChatSystemMessage>,
+      <ChatSystemMessage data-testid="sys" data-custom="x" id="sys-1">
+        Hello
+      </ChatSystemMessage>,
     );
-    expect(screen.getByTestId('my-sys')).toBeTruthy();
+    const el = screen.getByTestId('sys');
+    expect(el).toHaveAttribute('data-custom', 'x');
+    expect(el).toHaveAttribute('id', 'sys-1');
+    expect(el.getAttribute('role')).toBe('status');
+  });
+
+  it('forwards rest props in the divider variant', () => {
+    render(
+      <ChatSystemMessage variant="divider" data-testid="sys" data-custom="x">
+        Today
+      </ChatSystemMessage>,
+    );
+    const el = screen.getByTestId('sys');
+    expect(el).toHaveAttribute('data-custom', 'x');
+    expect(el.getAttribute('role')).toBe('status');
   });
 });

package/src/Chat/ChatSystemMessage.tsx

@@ -120,21 +120,21 @@ export function ChatSystemMessage({
   xstyle,
   className,
   style: styleProp,
-  'data-testid': testId,
   ref,
+  ...rest
 }: ChatSystemMessageProps) {
   if (variant === 'divider') {
     return (
       <div
         ref={ref}
-        role="status"
-        data-testid={testId}
         {...mergeProps(
           themeProps('chat-system-message', {variant}),
           stylex.props(styles.dividerWrap, xstyle),
           className,
           styleProp,
-        )}>
+        )}
+        {...rest}
+        role="status">
         <Divider label={children} />
       </div>
     );
@@ -143,14 +143,14 @@ export function ChatSystemMessage({
   return (
     <div
       ref={ref}
-      role="status"
-      data-testid={testId}
       {...mergeProps(
         themeProps('chat-system-message', {variant}),
         stylex.props(styles.root, xstyle),
         className,
         styleProp,
-      )}>
+      )}
+      {...rest}
+      role="status">
       <span {...stylex.props(styles.content)}>
         {icon != null && <span {...stylex.props(styles.icon)}>{icon}</span>}
         {children}

package/src/Chat/ChatTokenizedText.test.tsx

@@ -6,18 +6,12 @@ import {ChatTokenizedText} from './ChatTokenizedText';
 
 describe('ChatTokenizedText', () => {
   it('renders plain text when no tokens provided', () => {
-    render(
-      <ChatTokenizedText>Hello world</ChatTokenizedText>,
-    );
+    render(<ChatTokenizedText>Hello world</ChatTokenizedText>);
     expect(screen.getByText('Hello world')).toBeInTheDocument();
   });
 
   it('renders plain text when tokens array is empty', () => {
-    render(
-      <ChatTokenizedText tokens={[]}>
-        Hello world
-      </ChatTokenizedText>,
-    );
+    render(<ChatTokenizedText tokens={[]}>Hello world</ChatTokenizedText>);
     expect(screen.getByText('Hello world')).toBeInTheDocument();
   });
 
@@ -48,8 +42,7 @@ describe('ChatTokenizedText', () => {
 
   it('handles repeated occurrences of the same token', () => {
     render(
-      <ChatTokenizedText
-        tokens={[{value: '@cindy', label: '@Cindy Zhang'}]}>
+      <ChatTokenizedText tokens={[{value: '@cindy', label: '@Cindy Zhang'}]}>
         @cindy and @cindy again
       </ChatTokenizedText>,
     );
@@ -58,8 +51,7 @@ describe('ChatTokenizedText', () => {
 
   it('renders text with no matching tokens as plain text', () => {
     render(
-      <ChatTokenizedText
-        tokens={[{value: '@cindy', label: '@Cindy Zhang'}]}>
+      <ChatTokenizedText tokens={[{value: '@cindy', label: '@Cindy Zhang'}]}>
         Hello world
       </ChatTokenizedText>,
     );
@@ -68,8 +60,7 @@ describe('ChatTokenizedText', () => {
 
   it('handles tokens with special regex characters in pattern', () => {
     render(
-      <ChatTokenizedText
-        tokens={[{value: '/search', label: '/search'}]}>
+      <ChatTokenizedText tokens={[{value: '/search', label: '/search'}]}>
         Run /search now
       </ChatTokenizedText>,
     );
@@ -79,8 +70,7 @@ describe('ChatTokenizedText', () => {
 
   it('preserves surrounding text', () => {
     const {container} = render(
-      <ChatTokenizedText
-        tokens={[{value: '@cindy', label: '@Cindy Zhang'}]}>
+      <ChatTokenizedText tokens={[{value: '@cindy', label: '@Cindy Zhang'}]}>
         Before @cindy after
       </ChatTokenizedText>,
     );
@@ -88,4 +78,27 @@ describe('ChatTokenizedText', () => {
     expect(container.textContent).toContain('after');
     expect(container.textContent).toContain('@Cindy Zhang');
   });
+
+  it('forwards rest props (data-*, id) to the root element', () => {
+    render(
+      <ChatTokenizedText data-testid="tokenized" data-custom="x" id="tok-1">
+        Plain text
+      </ChatTokenizedText>,
+    );
+    const root = screen.getByTestId('tokenized');
+    expect(root).toHaveAttribute('data-custom', 'x');
+    expect(root).toHaveAttribute('id', 'tok-1');
+  });
+
+  it('forwards rest props when rendering tokens', () => {
+    render(
+      <ChatTokenizedText
+        tokens={[{value: '@cindy', label: '@Cindy Zhang'}]}
+        data-testid="tokenized"
+        data-custom="x">
+        Hi @cindy
+      </ChatTokenizedText>,
+    );
+    expect(screen.getByTestId('tokenized')).toHaveAttribute('data-custom', 'x');
+  });
 });

package/src/Chat/ChatTokenizedText.tsx

@@ -91,6 +91,10 @@ export function ChatTokenizedText({
   ref,
   children,
   tokens,
+  xstyle,
+  className,
+  style,
+  ...rest
 }: ChatTokenizedTextProps) {
   if (!children || !tokens || tokens.length === 0) {
     return (
@@ -98,8 +102,11 @@ export function ChatTokenizedText({
         ref={ref}
         {...mergeProps(
           themeProps('chat-tokenized-text'),
-          stylex.props(styles.root),
-        )}>
+          stylex.props(styles.root, xstyle),
+          className,
+          style,
+        )}
+        {...rest}>
         {children ?? ''}
       </span>
     );
@@ -111,8 +118,11 @@ export function ChatTokenizedText({
       ref={ref}
       {...mergeProps(
         themeProps('chat-tokenized-text'),
-        stylex.props(styles.root),
-      )}>
+        stylex.props(styles.root, xstyle),
+        className,
+        style,
+      )}
+      {...rest}>
       {parts}
     </span>
   );
@@ -124,10 +134,7 @@ ChatTokenizedText.displayName = 'ChatTokenizedText';
 // Render
 // =============================================================================
 
-function renderTokens(
-  text: string,
-  tokens: ChatComposerToken[],
-): ReactNode[] {
+function renderTokens(text: string, tokens: ChatComposerToken[]): ReactNode[] {
   const pattern = tokens.map(t => escapeRegExp(t.value)).join('|');
   const regex = new RegExp(`(${pattern})`, 'g');
 

package/src/Chat/ChatToolCalls.test.tsx

@@ -97,4 +97,59 @@ describe('ChatToolCalls', () => {
     );
     expect(screen.getByText('git status')).toBeInTheDocument();
   });
+
+  it('exposes no aria-expanded on a call row without resultDetail', () => {
+    const {container} = render(
+      <ChatToolCalls calls={[{name: 'bash', status: 'complete'}]} />,
+    );
+    expect(container.querySelector('[aria-expanded]')).toBeNull();
+  });
+
+  it('wires disclosure semantics on an expandable call row', () => {
+    render(
+      <ChatToolCalls
+        calls={[
+          {
+            name: 'readFile',
+            status: 'complete',
+            resultDetail: <div>file contents here</div>,
+          },
+        ]}
+      />,
+    );
+    const row = screen.getByRole('button');
+    expect(row).toHaveAttribute('aria-expanded', 'false');
+    // Detail panel is conditionally mounted, so no aria-controls while closed.
+    expect(row).not.toHaveAttribute('aria-controls');
+    expect(screen.queryByText('file contents here')).not.toBeInTheDocument();
+
+    fireEvent.click(row);
+
+    expect(row).toHaveAttribute('aria-expanded', 'true');
+    const detailId = row.getAttribute('aria-controls');
+    expect(detailId).toBeTruthy();
+    const panel = document.getElementById(detailId as string);
+    expect(panel).not.toBeNull();
+    expect(panel).toHaveTextContent('file contents here');
+  });
+
+  it('points the group header aria-controls at the content region', () => {
+    render(
+      <ChatToolCalls
+        defaultIsExpanded={true}
+        calls={[
+          {name: 'searchCode', status: 'complete'},
+          {name: 'readFile', status: 'complete'},
+        ]}
+      />,
+    );
+    const header = screen.getByRole('button');
+    expect(header).toHaveAttribute('aria-expanded', 'true');
+    const regionId = header.getAttribute('aria-controls');
+    expect(regionId).toBeTruthy();
+    const region = document.getElementById(regionId as string);
+    expect(region).not.toBeNull();
+    expect(region).toHaveTextContent('searchCode');
+    expect(region).toHaveTextContent('readFile');
+  });
 });

package/src/Chat/ChatToolCalls.tsx

@@ -18,7 +18,7 @@
  * for builders to wire up.
  */
 
-import React, {useState, useCallback, type ReactNode} from 'react';
+import React, {useState, useCallback, useId, type ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import {
@@ -41,11 +41,7 @@ import {themeProps} from '../utils/themeProps';
 // Types
 // =============================================================================
 
-export type ChatToolCallStatus =
-  | 'pending'
-  | 'running'
-  | 'complete'
-  | 'error';
+export type ChatToolCallStatus = 'pending' | 'running' | 'complete' | 'error';
 
 export interface ChatToolCallItem {
   /** Tool/function name. */
@@ -356,6 +352,7 @@ function CallRow({call}: {call: ChatToolCallItem}) {
   const status = call.status ?? 'complete';
   const hasDetail = call.resultDetail != null;
   const [isDetailOpen, setIsDetailOpen] = useState(false);
+  const detailId = useId();
 
   const toggleDetail = hasDetail
     ? () => setIsDetailOpen(prev => !prev)
@@ -365,6 +362,8 @@ function CallRow({call}: {call: ChatToolCallItem}) {
     <div
       role={hasDetail ? 'button' : undefined}
       tabIndex={hasDetail ? 0 : undefined}
+      aria-expanded={hasDetail ? isDetailOpen : undefined}
+      aria-controls={hasDetail && isDetailOpen ? detailId : undefined}
       onClick={toggleDetail}
       onKeyDown={
         hasDetail
@@ -399,11 +398,7 @@ function CallRow({call}: {call: ChatToolCallItem}) {
       </span>
       <span {...stylex.props(styles.callName)}>{call.name}</span>
       {call.node != null && (
-        <Badge
-          label={call.node}
-          variant="neutral"
-          xstyle={styles.nodePill}
-        />
+        <Badge label={call.node} variant="neutral" xstyle={styles.nodePill} />
       )}
       {call.target != null && (
         <span {...stylex.props(styles.callLabel)}>{call.target}</span>
@@ -448,7 +443,7 @@ function CallRow({call}: {call: ChatToolCallItem}) {
     <div>
       {row}
       {isDetailOpen && (
-        <div {...stylex.props(styles.callDetailContent)}>
+        <div id={detailId} {...stylex.props(styles.callDetailContent)}>
           {call.resultDetail}
         </div>
       )}
@@ -497,6 +492,7 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
 
   const autoDefault = defaultIsExpanded ?? false;
   const [internalExpanded, setInternalExpanded] = useState(autoDefault);
+  const contentId = useId();
   const isControlled = controlledExpanded !== undefined;
   const isExpanded = isControlled ? controlledExpanded : internalExpanded;
 
@@ -548,6 +544,7 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
         role="button"
         tabIndex={0}
         aria-expanded={isExpanded}
+        aria-controls={contentId}
         onClick={toggle}
         onKeyDown={e => {
           if (e.key === 'Enter' || e.key === ' ') {
@@ -613,6 +610,7 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
 
       {/* Expanded: all calls with full metadata */}
       <div
+        id={contentId}
         {...stylex.props(
           styles.groupContent,
           isExpanded && styles.groupContentExpanded,

package/src/Chat/index.ts

@@ -21,10 +21,7 @@ export type {ChatSendButtonProps} from './ChatSendButton';
 export {ChatComposerDrawer} from './ChatComposerDrawer';
 export type {ChatComposerDrawerProps} from './ChatComposerDrawer';
 
-export {
-  ChatComposerInput,
-  ChatComposerTokenElement,
-} from './ChatComposerInput';
+export {ChatComposerInput, ChatComposerTokenElement} from './ChatComposerInput';
 export type {
   ChatComposerInputProps,
   ChatComposerInputHandle,

package/src/Chat/useTriggerMenu.tsx

@@ -40,10 +40,7 @@ import {
 import {mergeProps, groupItems} from '../utils';
 import type {SearchableItem} from '../Typeahead/types';
 import {themeProps} from '../utils/themeProps';
-import type {
-  ChatComposerTrigger,
-  ChatComposerToken,
-} from './ChatComposerInput';
+import type {ChatComposerTrigger, ChatComposerToken} from './ChatComposerInput';
 
 // =============================================================================
 // Types

package/src/CheckboxInput/CheckboxInput.doc.mjs

@@ -125,7 +125,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-checkbox-input', visualProps: ['size']},
-      {className: 'astryx-checkbox'},
+      {className: 'astryx-checkbox', visualProps: ['size'], states: ['checked', 'disabled']},
     ],
   },
   usage: {
@@ -178,7 +178,7 @@ export const docsZh = {
     {name: 'isLoading', type: 'boolean', description: '复选框是否处于加载状态。显示旋转器并阻止交互。', default: 'false'},
     {name: 'isDisabled', type: 'boolean', description: '复选框是否禁用。', default: 'false'},
     {name: 'htmlName', type: 'string', description: '底层复选框输入的 HTML name 属性，用于表单提交（勾选时提交 "on"）。'},
-    {name: 'disabledMessage', type: 'string', description: 'Explains why the checkbox is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the checkbox focusable via aria-disabled (toggling stays blocked). Use this instead of wrapping a disabled CheckboxInput in Tooltip — disabled controls swallow the hover events an external Tooltip needs.'},
+    {name: 'disabledMessage', type: 'string', description: 'Explains why the checkbox is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the checkbox focusable via aria-disabled (toggling stays blocked). Use this instead of wrapping a disabled CheckboxInput in Tooltip: disabled controls swallow the hover events an external Tooltip needs.'},
     {name: 'isReadOnly', type: 'boolean', description: '复选框是否为只读。以完整不透明度显示当前状态但阻止交互。与 isDisabled 不同，只读复选框不会变暗。', default: 'false'},
     {name: 'isOptional', type: 'boolean', description: '字段是否可选。与 isRequired 互斥。', default: 'false'},
     {name: 'isRequired', type: 'boolean', description: '复选框是否必填。与 isOptional 互斥。', default: 'false'},
@@ -200,7 +200,7 @@ export const docsZh = {
           'size',
         ],
       },
-      {className: 'astryx-checkbox'},
+      {className: 'astryx-checkbox', visualProps: ['size'], states: ['checked', 'disabled']},
     ],
   },
 };