@astryxdesign/core 0.4.7 → 0.5.0-canary.009bcb3

package/src/TopNav/TopNavMenu.test.tsx

@@ -10,7 +10,7 @@
  */
 
 import {describe, it, expect, vi} from 'vitest';
-import {render, screen, fireEvent} from '@testing-library/react';
+import {render, screen, fireEvent, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as stylex from '@stylexjs/stylex';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
@@ -212,3 +212,135 @@ describe('TopNavMenu — drawer focus ring', () => {
     expectSharedFocusRing(screen.getByRole('link', {name: /Analytics/}));
   });
 });
+
+describe('TopNavMenu pass-through props', () => {
+  it('forwards pass-through props to the trigger button', () => {
+    render(
+      <TopNavMenu
+        label="Products"
+        items={mockItems}
+        aria-label="Products menu"
+        id="products-trigger"
+        data-source="nav"
+      />,
+    );
+    const trigger = screen.getByRole('button', {name: 'Products menu'});
+    expect(trigger).toHaveAttribute('id', 'products-trigger');
+    expect(trigger).toHaveAttribute('data-source', 'nav');
+  });
+
+  it('forwards pass-through props to the drawer trigger', () => {
+    render(
+      <TopNavRenderContext value="drawer">
+        <TopNavMenu
+          label="Products"
+          items={mockItems}
+          id="products-drawer"
+          data-source="nav"
+        />
+      </TopNavRenderContext>,
+    );
+    const trigger = screen.getByRole('button', {name: /Products/});
+    expect(trigger).toHaveAttribute('id', 'products-drawer');
+    expect(trigger).toHaveAttribute('data-source', 'nav');
+  });
+
+  it('keeps its own popup wiring when a caller passes the same attributes', () => {
+    render(
+      <TopNavMenu
+        label="Products"
+        items={mockItems}
+        aria-haspopup="dialog"
+        aria-expanded
+        data-source="nav"
+      />,
+    );
+    const trigger = screen.getByRole('button', {name: 'Products'});
+    expect({
+      hasPopup: trigger.getAttribute('aria-haspopup'),
+      isExpanded: trigger.getAttribute('aria-expanded'),
+      dataSource: trigger.getAttribute('data-source'),
+    }).toEqual({hasPopup: 'true', isExpanded: 'false', dataSource: 'nav'});
+  });
+});
+
+describe('TopNavMenu — owned handlers on the trigger', () => {
+  it("composes a caller's onClick with the trigger's own open behavior", async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(
+      <TopNavMenu label="Products" items={mockItems} onClick={handleClick} />,
+    );
+
+    const trigger = screen.getByRole('button', {name: 'Products'});
+    await user.click(trigger);
+
+    expect(handleClick).toHaveBeenCalledOnce();
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it("composes a caller's hover handlers with the trigger's hover wiring", async () => {
+    vi.useFakeTimers({shouldAdvanceTime: true});
+    const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+    const handleMouseEnter = vi.fn();
+    const handleMouseLeave = vi.fn();
+    render(
+      <TopNavMenu
+        label="Products"
+        items={mockItems}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      />,
+    );
+
+    const trigger = screen.getByRole('button', {name: 'Products'});
+    await user.hover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+    expect(handleMouseEnter).toHaveBeenCalledOnce();
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    await user.unhover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+    expect(handleMouseLeave).toHaveBeenCalledOnce();
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    vi.useRealTimers();
+  });
+
+  it("composes a caller's onClick with the drawer section toggle", async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(
+      <TopNavRenderContext value="drawer">
+        <TopNavMenu label="Products" items={mockItems} onClick={handleClick} />
+      </TopNavRenderContext>,
+    );
+
+    const trigger = screen.getByRole('button', {name: /Products/});
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(trigger);
+    expect(handleClick).toHaveBeenCalledOnce();
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('still forwards hover handlers the drawer trigger does not own', async () => {
+    const user = userEvent.setup();
+    const handleMouseEnter = vi.fn();
+    render(
+      <TopNavRenderContext value="drawer">
+        <TopNavMenu
+          label="Products"
+          items={mockItems}
+          onMouseEnter={handleMouseEnter}
+        />
+      </TopNavRenderContext>,
+    );
+
+    await user.hover(screen.getByRole('button', {name: /Products/}));
+    expect(handleMouseEnter).toHaveBeenCalledOnce();
+  });
+});

package/src/TopNav/TopNavMenu.tsx

@@ -29,7 +29,8 @@ import {useMenuHover} from '../hooks/useMenuHover';
 import {useListFocus} from '../hooks/useListFocus';
 import {useTypeahead} from '../hooks/useTypeahead';
 import {Icon} from '../Icon';
-import {mergeProps, mergeRefs} from '../utils';
+import {mergeProps, composeEventHandlers} from '../utils';
+import {useMergedRefs} from '../hooks/useMergedRefs';
 import type {BaseProps} from '../BaseProps';
 import {navItemStyles} from '../NavItem/navItemStyles.stylex';
 import {useTopNavSlot} from './TopNavContext';
@@ -331,6 +332,13 @@ export function TopNavMenu({
   items,
   delay = 150,
   hideDelay = 200,
+  xstyle,
+  className,
+  style,
+  onClick: onClickProp,
+  onMouseEnter: onMouseEnterProp,
+  onMouseLeave: onMouseLeaveProp,
+  ...rest
 }: TopNavMenuProps) {
   const renderMode = useTopNavRenderMode();
   const {closeMobileNav} = useAppShellMobile();
@@ -361,7 +369,7 @@ export function TopNavMenu({
       popoverId: popover.id,
     });
 
-  const setTriggerRef = mergeRefs<HTMLButtonElement>(
+  const setTriggerRef = useMergedRefs<HTMLButtonElement>(
     triggerButtonRef,
     popover.triggerRef,
     setTriggerEl,
@@ -426,7 +434,7 @@ export function TopNavMenu({
 
   // Menu container carries both the hover hook's ref (for its open/close
   // focus management) and the list-focus ref (for roving tabindex/typeahead).
-  const setMenuRef = mergeRefs<HTMLDivElement>(menuRef, listRef);
+  const setMenuRef = useMergedRefs<HTMLDivElement>(menuRef, listRef);
 
   // Mobile bar: hide menus entirely
   if (renderMode === 'mobile-bar') {
@@ -439,12 +447,22 @@ export function TopNavMenu({
       <div {...stylex.props(drawerStyles.section)}>
         <button
           type="button"
-          onClick={() => setDrawerExpanded(v => !v)}
+          {...rest}
+          onMouseEnter={onMouseEnterProp}
+          onMouseLeave={onMouseLeaveProp}
+          onClick={composeEventHandlers(onClickProp, () =>
+            setDrawerExpanded(v => !v),
+          )}
           aria-expanded={drawerExpanded}
           aria-controls={`${menuId}-items`}
-          {...focusOutlineProps.focusVisible(
-            navItemStyles.item,
-            drawerStyles.header,
+          {...mergeProps(
+            focusOutlineProps.focusVisible(
+              navItemStyles.item,
+              drawerStyles.header,
+              xstyle,
+            ),
+            className,
+            style,
           )}>
           {label}
           <Icon
@@ -503,14 +521,27 @@ export function TopNavMenu({
       <button
         ref={setTriggerRef}
         type="button"
+        {...rest}
         {...popover.triggerProps}
         {...triggerProps}
+        onClick={composeEventHandlers(onClickProp, triggerProps.onClick)}
+        onMouseEnter={composeEventHandlers(
+          onMouseEnterProp,
+          triggerProps.onMouseEnter,
+        )}
+        onMouseLeave={composeEventHandlers(
+          onMouseLeaveProp,
+          triggerProps.onMouseLeave,
+        )}
         {...mergeProps(
           themeProps('top-nav-menu'),
           focusOutlineProps.focusVisible(
             styles.trigger,
             popover.isOpen && styles.triggerOpen,
+            xstyle,
           ),
+          className,
+          style,
         )}>
         {label}
         <Icon

package/src/TreeList/TreeList.test.tsx

@@ -145,6 +145,18 @@ describe('TreeList', () => {
     expect(screen.getByTestId('tree')).toBeInTheDocument();
   });
 
+  it('forwards aria-label to the tree element', () => {
+    render(<TreeList items={simpleItems} aria-label="File tree" />);
+    const tree = screen.getByRole('tree');
+    expect(tree).toHaveAttribute('aria-label', 'File tree');
+  });
+
+  it('forwards id to the root element', () => {
+    render(<TreeList items={simpleItems} id="file-tree" />);
+    const root = screen.getByRole('tree').parentElement;
+    expect(root).toHaveAttribute('id', 'file-tree');
+  });
+
   it('renders description text', () => {
     const items: TreeListItemData[] = [
       {id: 'a', label: 'Label', description: 'Description text'},
@@ -194,6 +206,43 @@ describe('TreeList', () => {
     expect(tree).not.toHaveAttribute('aria-labelledby');
   });
 
+  it('prefers the visible header id over caller aria-labelledby when header exists', () => {
+    render(
+      <TreeList
+        items={simpleItems}
+        header={<span>File Tree</span>}
+        aria-labelledby="external-label"
+      />,
+    );
+    const tree = screen.getByRole('tree');
+    const headerId = tree.getAttribute('aria-labelledby');
+    expect(headerId).toBeTruthy();
+    expect(headerId).not.toBe('external-label');
+    const headerEl = document.getElementById(headerId!);
+    expect(headerEl?.textContent).toBe('File Tree');
+  });
+
+  it('uses caller aria-labelledby on the headerless path', () => {
+    render(<TreeList items={simpleItems} aria-labelledby="external-label" />);
+    const tree = screen.getByRole('tree');
+    expect(tree).toHaveAttribute('aria-labelledby', 'external-label');
+  });
+
+  it('ignores caller aria-label when a header names the tree', () => {
+    render(
+      <TreeList
+        items={simpleItems}
+        header={<span>File Tree</span>}
+        aria-label="External name"
+      />,
+    );
+    const tree = screen.getByRole('tree');
+    expect(tree).not.toHaveAttribute('aria-label');
+    const headerId = tree.getAttribute('aria-labelledby');
+    const headerEl = document.getElementById(headerId!);
+    expect(headerEl?.textContent).toBe('File Tree');
+  });
+
   // ===========================================================================
   // Expansion (internal state)
   // ===========================================================================

package/src/TreeList/TreeList.tsx

@@ -188,7 +188,10 @@ export function TreeList({
   className,
   style,
   'data-testid': testId,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   ref,
+  ...restProps
 }: TreeListProps) {
   const headerId = useId();
 
@@ -336,7 +339,8 @@ export function TreeList({
         stylex.props(styles.root, xstyle),
         className,
         style,
-      )}>
+      )}
+      {...restProps}>
       {header != null && (
         <div id={headerId} {...stylex.props(styles.header)}>
           {header}
@@ -345,7 +349,8 @@ export function TreeList({
       <ul
         ref={treeRef}
         role="tree"
-        aria-labelledby={header != null ? headerId : undefined}
+        aria-label={header != null ? undefined : ariaLabel}
+        aria-labelledby={header != null ? headerId : ariaLabelledby}
         onKeyDown={handleKeyDown}
         onFocus={handleFocus}
         {...stylex.props(styles.list)}>

package/src/Typeahead/BaseTypeahead.doc.mjs

@@ -60,6 +60,17 @@ export const docs = {
       description: 'Maximum dropdown items to display.',
       default: '10',
     },
+    {
+      name: 'menuWidth',
+      type: 'number',
+      description: 'Fixed dropdown width in pixels. The menu never shrinks below its anchor width.',
+    },
+    {
+      name: 'minQueryLength',
+      type: 'number',
+      description: 'Minimum query length before the search source is queried. Below it no search runs and the menu stays closed.',
+      default: '1',
+    },
     {
       name: 'emptySearchResultsText',
       type: 'string',
@@ -169,6 +180,17 @@ export const docsZh = {
       description: '下拉列表显示的最大项目数。',
       default: '10',
     },
+    {
+      name: 'menuWidth',
+      type: 'number',
+      description: '下拉菜单的固定像素宽度。菜单不会小于其锚点宽度。',
+    },
+    {
+      name: 'minQueryLength',
+      type: 'number',
+      description: '查询搜索源前的最小查询长度。低于该长度不会发起搜索，菜单保持关闭。',
+      default: '1',
+    },
     {
       name: 'emptySearchResultsText',
       type: 'string',
@@ -253,6 +275,8 @@ export const docsDense = {
     placeholder: 'Input placeholder.',
     hasEntriesOnFocus: 'Bootstrap results on focus.',
     maxMenuItems: 'Max dropdown items.',
+    menuWidth: 'Fixed dropdown width in pixels.',
+    minQueryLength: 'Min query length before searching. Menu stays closed below it.',
     emptySearchResultsText: 'Text when no results.',
     isDisabled: 'Whether input disabled.',
     hasAutoFocus: 'Auto-focus on mount.',