@astryxdesign/core 0.5.0 → 0.5.1-canary.046f6ea

package/src/Token/Token.test.tsx

@@ -521,3 +521,98 @@ describe('Token focus outline', () => {
     expect(container.tagName).toBe('SPAN');
   });
 });
+
+describe('Token pass-through props', () => {
+  it('forwards pass-through props to the token element', () => {
+    render(
+      <Token
+        label="Design"
+        aria-label="Design tag"
+        id="design-token"
+        data-source="filters"
+        data-testid="token"
+      />,
+    );
+    const token = screen.getByTestId('token');
+    expect(token).toHaveAttribute('aria-label', 'Design tag');
+    expect(token).toHaveAttribute('id', 'design-token');
+    expect(token).toHaveAttribute('data-source', 'filters');
+  });
+
+  it('forwards pass-through props on the clickable and link variants', () => {
+    const {rerender} = render(
+      <Token
+        label="Design"
+        onClick={() => {}}
+        id="clickable"
+        data-testid="token"
+      />,
+    );
+    expect(screen.getByTestId('token')).toHaveAttribute('id', 'clickable');
+
+    rerender(
+      <Token label="Design" href="/tags" id="link" data-testid="token" />,
+    );
+    expect(screen.getByTestId('token')).toHaveAttribute('id', 'link');
+  });
+
+  it('keeps its own label when the label is visually hidden', () => {
+    render(
+      <Token
+        label="Design"
+        isLabelHidden
+        aria-label="Caller label"
+        data-source="filters"
+        data-testid="token"
+      />,
+    );
+    const token = screen.getByTestId('token');
+    expect({
+      ariaLabel: token.getAttribute('aria-label'),
+      dataSource: token.getAttribute('data-source'),
+    }).toEqual({ariaLabel: 'Design', dataSource: 'filters'});
+  });
+});
+
+describe('Token — owned handlers on the link+remove container', () => {
+  it("composes a caller's onMouseUp with the container's link delegation", () => {
+    const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+    const handleMouseUp = vi.fn();
+    render(
+      <Token
+        label="Tag"
+        href="/test"
+        onRemove={() => {}}
+        onMouseUp={handleMouseUp}
+        icon={<span data-testid="icon">★</span>}
+      />,
+    );
+
+    fireEvent.mouseUp(screen.getByTestId('icon'), {button: 1});
+
+    expect(handleMouseUp).toHaveBeenCalledOnce();
+    expect(openSpy).toHaveBeenCalledWith('/test', '_blank', 'noopener');
+    openSpy.mockRestore();
+  });
+
+  it("does not fire the container's delegation when disabled, but still forwards the caller's onMouseUp", () => {
+    const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+    const handleMouseUp = vi.fn();
+    render(
+      <Token
+        label="Tag"
+        href="/test"
+        onRemove={() => {}}
+        onMouseUp={handleMouseUp}
+        isDisabled
+        icon={<span data-testid="icon">★</span>}
+      />,
+    );
+
+    fireEvent.mouseUp(screen.getByTestId('icon'), {button: 1});
+
+    expect(handleMouseUp).toHaveBeenCalledOnce();
+    expect(openSpy).not.toHaveBeenCalled();
+    openSpy.mockRestore();
+  });
+});

package/src/Token/Token.tsx

@@ -37,6 +37,7 @@ import {TokenLink} from './TokenLink';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
+import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {useTranslator} from '../i18n';
 import type {TokenColorMap} from './index';
 
@@ -143,13 +144,6 @@ const styles = stylex.create({
     transitionProperty: 'background-image',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    backgroundImage: {
-      default: null,
-      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
-        '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
-      },
-      ':active': `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,
-    },
   },
   disabled: {
     cursor: 'default',
@@ -307,6 +301,7 @@ export function Token({
   style,
   'data-testid': testId,
   ref,
+  ...rest
 }: TokenProps) {
   const t = useTranslator();
   const LinkComponent = useLinkComponent();
@@ -344,8 +339,8 @@ export function Token({
 
   const sharedProps = {
     'data-testid': testId,
-    'aria-label': isLabelHidden ? label : undefined,
-    'aria-description': description,
+    ...(isLabelHidden ? {'aria-label': label} : {}),
+    ...(description != null ? {'aria-description': description} : {}),
   };
 
   if (role === 'link') {
@@ -354,8 +349,6 @@ export function Token({
         <LinkComponent
           ref={ref as React.Ref<HTMLAnchorElement>}
           href={href as string}
-          aria-disabled={isDisabled || undefined}
-          {...sharedProps}
           {...mergeProps(
             themeProps('token', {color, size}),
             focusOutlineProps.focusVisible(
@@ -363,12 +356,16 @@ export function Token({
               sizeStyles[size],
               colorStyles[color],
               styles.interactive,
+              interactionOverlayStyles.backgroundImage,
               isDisabled && styles.disabled,
               xstyle,
             ),
             className,
             style,
-          )}>
+          )}
+          {...rest}
+          {...(isDisabled ? {'aria-disabled': true} : {})}
+          {...sharedProps}>
           {content}
         </LinkComponent>
       );
@@ -400,7 +397,6 @@ export function Token({
             {label}
           </span>
         }
-        {...sharedProps}
         {...mergeProps(
           themeProps('token', {color, size}),
           focusOutlineProps.focusWithin(
@@ -408,12 +404,15 @@ export function Token({
             sizeStyles[size],
             colorStyles[color],
             styles.interactive,
+            interactionOverlayStyles.backgroundImage,
             isDisabled && styles.disabled,
             xstyle,
           ),
           className,
           style,
         )}
+        {...rest}
+        {...sharedProps}
       />
     );
   }
@@ -431,7 +430,6 @@ export function Token({
       <span
         ref={ref}
         onClick={isDisabled ? undefined : handleContainerClick}
-        {...sharedProps}
         {...mergeProps(
           themeProps('token', {color, size}),
           focusOutlineProps.focusWithin(
@@ -439,12 +437,15 @@ export function Token({
             sizeStyles[size],
             colorStyles[color],
             styles.interactive,
+            interactionOverlayStyles.backgroundImage,
             isDisabled && styles.disabled,
             xstyle,
           ),
           className,
           style,
-        )}>
+        )}
+        {...rest}
+        {...sharedProps}>
         {icon}
         <button
           type="button"
@@ -468,7 +469,6 @@ export function Token({
   return (
     <span
       ref={ref}
-      {...sharedProps}
       {...mergeProps(
         themeProps('token', {color, size}),
         stylex.props(
@@ -480,7 +480,9 @@ export function Token({
         ),
         className,
         style,
-      )}>
+      )}
+      {...rest}
+      {...sharedProps}>
       {content}
     </span>
   );

package/src/Token/TokenLink.tsx

@@ -29,6 +29,7 @@ import type {ReactNode, CSSProperties, Ref, HTMLAttributes} from 'react';
 import {useRef} from 'react';
 import {useClickableContainer} from '../hooks/useClickableContainer';
 import type {LinkComponentType} from '../Link/types';
+import {composeEventHandlers} from '../utils';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
 export interface TokenLinkProps extends HTMLAttributes<HTMLElement> {
@@ -72,6 +73,8 @@ export function TokenLink({
   icon,
   endContent,
   removeButton,
+  onClick: onClickProp,
+  onMouseUp: onMouseUpProp,
   ...containerProps
 }: TokenLinkProps) {
   const containerRef = useRef<HTMLElement | null>(null);
@@ -87,9 +90,15 @@ export function TokenLink({
   return (
     <span
       ref={useMergedRefs(ref, containerRef)}
-      onClick={isDisabled ? undefined : onClick}
-      onMouseUp={isDisabled ? undefined : onMouseUp}
-      {...containerProps}>
+      {...containerProps}
+      onClick={
+        isDisabled ? onClickProp : composeEventHandlers(onClickProp, onClick)
+      }
+      onMouseUp={
+        isDisabled
+          ? onMouseUpProp
+          : composeEventHandlers(onMouseUpProp, onMouseUp)
+      }>
       {icon}
       <LinkComponent
         ref={linkRef as Ref<HTMLAnchorElement>}

package/src/Tokenizer/Tokenizer.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'Tokenizer',
   displayName: 'Tokenizer',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["tokenizer","multiselect","multi-select","chips","tags","combobox","autocomplete","taginput","chipinput"],
   props: [
     {
@@ -132,7 +132,7 @@ export const docs = {
     {
       name: 'maxMenuItems',
       type: 'number',
-      description: 'Maximum number of dropdown items to display.',
+      description: 'Maximum number of search results to display. The hasCreate entry is offered on top of them, so a menu can show one more than this.',
       default: '10',
     },
     {
@@ -140,6 +140,12 @@ export const docs = {
       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 — unless hasCreate is set, in which case the "Create ..." entry is still offered, being derived from the typed text rather than fetched for it.',
+      default: '1',
+    },
     {
       name: 'emptySearchResultsText',
       type: 'string',
@@ -386,7 +392,7 @@ export const docsZh = {
     {
       name: 'maxMenuItems',
       type: 'number',
-      description: '\u4e0b\u62c9\u5217\u8868\u663e\u793a\u7684\u6700\u5927\u9879\u76ee\u6570\u3002',
+      description: '下拉列表显示的最大搜索结果数。“创建 ...”条目会在此之外额外提供，因此菜单可能比该数量多显示一项。',
       default: '10',
     },
     {
@@ -394,6 +400,12 @@ export const docsZh = {
       type: 'number',
       description: '下拉菜单的固定像素宽度。菜单不会小于其锚点宽度。',
     },
+    {
+      name: 'minQueryLength',
+      type: 'number',
+      description: '查询搜索源前的最小查询长度。低于该长度不会发起搜索，菜单保持关闭；但设置 hasCreate 时仍会提供“创建 ...”条目——该条目由输入的文本推导而来，并非通过搜索获取。',
+      default: '1',
+    },
     {
       name: 'emptySearchResultsText',
       type: 'string',
@@ -515,8 +527,9 @@ export const docsDense = {
     isOptional: 'Shows optional indicator on label.',
     labelTooltip: 'Tooltip on label.',
     hasEntriesOnFocus: 'Show bootstrap results on focus before typing.',
-    maxMenuItems: 'Max dropdown items to display.',
+    maxMenuItems: 'Max search results shown; the hasCreate entry sits on top of them.',
     menuWidth: 'Fixed dropdown width in pixels.',
+    minQueryLength: 'Min query length before searching. Menu stays closed below it, except the hasCreate entry.',
     emptySearchResultsText: 'Text when search returns no results.',
     hasAutoFocus: 'Auto-focus input on mount.',
     size: 'Input+token size.',

package/src/Tokenizer/Tokenizer.test.tsx

@@ -94,6 +94,37 @@ const userSource: SearchSource = {
   bootstrap: () => users.slice(0, 3),
 };
 
+describe('Tokenizer minQueryLength', () => {
+  it('forwards the threshold to the typeahead engine', async () => {
+    const search = vi.fn((query: string) =>
+      users.filter(u => u.label.toLowerCase().includes(query.toLowerCase())),
+    );
+    render(
+      <Tokenizer
+        label="People"
+        searchSource={{search, bootstrap: () => []}}
+        value={[]}
+        onChange={() => {}}
+        minQueryLength={3}
+        debounceMs={0}
+      />,
+    );
+    const input = screen.getByRole('combobox');
+
+    fireEvent.change(input, {target: {value: 'Al'}});
+    await act(async () => {
+      await Promise.resolve();
+    });
+    expect(search).not.toHaveBeenCalled();
+    expect(input).toHaveAttribute('aria-expanded', 'false');
+
+    fireEvent.change(input, {target: {value: 'Ali'}});
+    await waitFor(() => {
+      expect(input).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+});
+
 describe('Tokenizer', () => {
   it('forwards ref to the root field element', () => {
     let root: HTMLDivElement | null = null;
@@ -606,6 +637,136 @@ describe('Tokenizer', () => {
       bootstrap: () => [],
     };
 
+    it('still offers Create below minQueryLength, and does not search', async () => {
+      // The threshold exists to avoid a fetch too broad to be worth making.
+      // Creating costs no fetch, so a field that can create `QA` should not
+      // stop being able to just because a search for `QA` would match too
+      // much. Reported on #5385.
+      const search = vi.fn(() => []);
+      const onChange = vi.fn();
+      render(
+        <Tokenizer
+          label="Tags"
+          searchSource={{search, bootstrap: () => []}}
+          value={[]}
+          onChange={onChange}
+          hasCreate
+          minQueryLength={3}
+          debounceMs={0}
+        />,
+      );
+
+      const input = screen.getByRole('combobox');
+      await act(async () => {
+        fireEvent.change(input, {target: {value: 'QA'}});
+      });
+      await act(async () => {
+        await new Promise(r => setTimeout(r, 50));
+      });
+
+      // Offered...
+      expect(screen.queryByText('Create "QA"')).toBeInTheDocument();
+      // ...without the source ever being asked.
+      expect(search).not.toHaveBeenCalled();
+      // ...and it commits.
+      fireEvent.click(screen.getByText('Create "QA"'));
+      expect(onChange).toHaveBeenCalledWith(
+        [expect.objectContaining({id: 'QA', label: 'QA'})],
+        expect.objectContaining({type: 'create'}),
+      );
+    });
+
+    it('offers no menu below the threshold without hasCreate', async () => {
+      // The negative control for the case above: with nothing to derive from
+      // the text, a below-threshold query still opens nothing, and never
+      // reports "no results" for a query that was not searched.
+      const search = vi.fn(() => []);
+      render(
+        <Tokenizer
+          label="Tags"
+          searchSource={{search, bootstrap: () => []}}
+          value={[]}
+          onChange={() => {}}
+          minQueryLength={3}
+          debounceMs={0}
+        />,
+      );
+
+      const input = screen.getByRole('combobox');
+      await act(async () => {
+        fireEvent.change(input, {target: {value: 'QA'}});
+      });
+      await act(async () => {
+        await new Promise(r => setTimeout(r, 50));
+      });
+
+      expect(search).not.toHaveBeenCalled();
+      expect(input).toHaveAttribute('aria-expanded', 'false');
+      expect(screen.queryByText('No results found')).not.toBeInTheDocument();
+    });
+
+    it('does not offer Create below the threshold for a token already held', async () => {
+      render(
+        <Tokenizer
+          label="Tags"
+          searchSource={{search: () => [], bootstrap: () => []}}
+          value={[{id: 'QA', label: 'QA'}]}
+          onChange={() => {}}
+          hasCreate
+          minQueryLength={3}
+          debounceMs={0}
+        />,
+      );
+
+      const input = screen.getByRole('combobox');
+      await act(async () => {
+        fireEvent.change(input, {target: {value: 'QA'}});
+      });
+      await act(async () => {
+        await new Promise(r => setTimeout(r, 50));
+      });
+
+      expect(screen.queryByText('Create "QA"')).not.toBeInTheDocument();
+    });
+
+    it('offers Create on top of a full menu, not in place of a result', async () => {
+      // The Create entry is appended after the results are cut to
+      // `maxMenuItems`, so a full menu shows one more option rather than
+      // dropping its last result to make room. Deliberate: creating is a
+      // different capability from searching, and the cap exists to bound how
+      // many *results* a menu shows.
+      const many = Array.from({length: 20}, (_, i) => ({
+        id: `qa-${i}`,
+        label: `QA ${i}`,
+      }));
+      render(
+        <Tokenizer
+          label="Tags"
+          searchSource={{search: () => many, bootstrap: () => []}}
+          value={[]}
+          onChange={() => {}}
+          hasCreate
+          maxMenuItems={3}
+          debounceMs={0}
+        />,
+      );
+
+      const input = screen.getByRole('combobox');
+      await act(async () => {
+        fireEvent.change(input, {target: {value: 'QA'}});
+      });
+      await act(async () => {
+        await new Promise(r => setTimeout(r, 50));
+      });
+
+      // Queried off the document rather than by role: the popover renders
+      // into a layer that jsdom keeps out of the accessibility tree, which is
+      // why the tests around this one reach for text too.
+      const options = document.querySelectorAll('[role="option"]');
+      expect(options).toHaveLength(4);
+      expect(options[3]).toHaveTextContent('Create "QA"');
+    });
+
     it('shows a "Create" option when typing with hasCreate', async () => {
       render(
         <Tokenizer

package/src/Tokenizer/Tokenizer.tsx

@@ -158,6 +158,17 @@ export interface TokenizerProps<T extends SearchableItem> extends Omit<
   maxMenuItems?: number;
   /** Fixed dropdown width in pixels. Never shrinks below the input width. */
   menuWidth?: number;
+  /**
+   * Minimum query length before the search source is queried. Below it no
+   * search runs and the menu stays closed — useful for remote sources where
+   * one or two characters match too much to be worth fetching.
+   *
+   * With `hasCreate`, the "Create" entry rides on the search results, so it
+   * also waits for the threshold.
+   *
+   * @default 1
+   */
+  minQueryLength?: number;
   /** Text shown when no results found. @default 'No results found' */
   emptySearchResultsText?: string;
   /** Whether the input is disabled. @default false */
@@ -396,6 +407,7 @@ export function Tokenizer<T extends SearchableItem>({
   hasEntriesOnFocus,
   maxMenuItems,
   menuWidth,
+  minQueryLength,
   emptySearchResultsText,
   isDisabled = false,
   htmlName,
@@ -536,36 +548,47 @@ export function Tokenizer<T extends SearchableItem>({
     () => ({
       search: async (query: string) => {
         const results = await searchSource.search(query);
-        const filtered = results.filter(item => !selectedIds.has(item.id));
-
-        // Append a "Create: X" synthetic item when hasCreate is true,
-        // the user has typed something, and it doesn't exactly match an
-        // existing result.
-        if (hasCreate && query.trim()) {
-          const trimmed = query.trim();
-          const alreadyExists =
-            selectedIds.has(trimmed) ||
-            filtered.some(
-              item => item.label.toLowerCase() === trimmed.toLowerCase(),
-            );
-          if (!alreadyExists) {
-            const creatableItem = {
-              id: `${CREATABLE_ID_PREFIX}${trimmed}`,
-              label: `Create "${trimmed}"`,
-              auxiliaryData: {__createdValue: trimmed},
-            } as unknown as T;
-            filtered.push(creatableItem);
-          }
-        }
-
-        return filtered;
+        return results.filter(item => !selectedIds.has(item.id));
       },
       bootstrap: async () => {
         const results = await searchSource.bootstrap();
         return results.filter(item => !selectedIds.has(item.id));
       },
     }),
-    [searchSource, selectedIds, hasCreate],
+    [searchSource, selectedIds],
+  );
+
+  /**
+   * The "Create X" entry. It is derived from the typed text, not fetched for
+   * it, so it is offered through `__queryEntries` rather than appended to the
+   * search results — which is what keeps it available when the query is too
+   * short to search. `minQueryLength` is there to avoid a fetch too broad to
+   * be worth making; creating `QA` costs no fetch, and a field that can
+   * create it should not stop being able to.
+   */
+  const createEntries = useCallback(
+    (query: string, results: T[]): T[] => {
+      const trimmed = query.trim();
+      if (!hasCreate || trimmed === '') {
+        return [];
+      }
+      const alreadyExists =
+        selectedIds.has(trimmed) ||
+        results.some(
+          item => item.label.toLowerCase() === trimmed.toLowerCase(),
+        );
+      if (alreadyExists) {
+        return [];
+      }
+      return [
+        {
+          id: `${CREATABLE_ID_PREFIX}${trimmed}`,
+          label: `Create "${trimmed}"`,
+          auxiliaryData: {__createdValue: trimmed},
+        } as unknown as T,
+      ];
+    },
+    [hasCreate, selectedIds],
   );
 
   const emptySource: SearchSource<T> = useMemo(
@@ -782,6 +805,7 @@ export function Tokenizer<T extends SearchableItem>({
         hasEntriesOnFocus={isAtMax ? false : hasEntriesOnFocus}
         maxMenuItems={maxMenuItems}
         menuWidth={menuWidth}
+        minQueryLength={minQueryLength}
         emptySearchResultsText={emptySearchResultsText}
         isDisabled={isDisabled}
         isFocusableDisabled={showsDisabledMessage}
@@ -789,6 +813,7 @@ export function Tokenizer<T extends SearchableItem>({
         inputId={inputId}
         ariaDescribedBy={ariaDescribedBy}
         onChangeQuery={onChangeQuery}
+        __queryEntries={createEntries}
         debounceMs={debounceMs}
         onKeyDown={handleKeyDown}
         anchorRef={wrapperRef}

package/src/TopNav/TopNavHeading.tsx

@@ -54,7 +54,7 @@ const styles = stylex.create({
     minHeight: spacingVars['--spacing-8'],
     paddingInlineStart: {
       default: spacingVars['--spacing-2'],
-      ':has(.astryx-navicon)': 0,
+      ':has(.astryx-nav-icon)': 0,
     },
     paddingInlineEnd: spacingVars['--spacing-2'],
     paddingBlock: 0,
@@ -190,7 +190,7 @@ const styles = stylex.create({
     minHeight: spacingVars['--spacing-8'],
     paddingInlineStart: {
       default: spacingVars['--spacing-2'],
-      ':has(.astryx-navicon)': 0,
+      ':has(.astryx-nav-icon)': 0,
     },
     paddingInlineEnd: spacingVars['--spacing-2'],
     paddingBlock: 0,

package/src/TopNav/TopNavItem.tsx

@@ -36,6 +36,7 @@ import {mergeProps} from '../utils';
 import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
+import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 
 /**
  * NavItem styles with hover/selected states
@@ -60,13 +61,6 @@ const styles = stylex.create({
     transitionProperty: 'background-color, color',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    backgroundColor: {
-      default: 'transparent',
-      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
-        '@media (hover: hover)': colorVars['--color-overlay-hover'],
-      },
-      ':active': colorVars['--color-overlay-pressed'],
-    },
   },
   selected: {
     color: colorVars['--color-text-primary'],
@@ -234,6 +228,7 @@ export function TopNavItem({
           }),
           focusOutlineProps.focusVisible(
             navItemStyles.item,
+            interactionOverlayStyles.backgroundColor,
             navItemStyles[size],
             isSelected && navItemStyles.selected,
             isDisabled && navItemStyles.disabled,
@@ -270,6 +265,7 @@ export function TopNavItem({
         }),
         focusOutlineProps.focusVisible(
           styles.base,
+          interactionOverlayStyles.backgroundColor,
           isSelected && styles.selected,
           isDisabled && navItemStyles.disabled,
           isIconOnly && styles.iconOnly,