@astryxdesign/core 0.7.1 → 0.7.2-canary.01eab6a

package/src/MultiSelector/OptionActions.a11y.chromium.spec.ts

@@ -6,8 +6,10 @@
  *   built Storybook.
  * @output Real-engine proof for option actions: the action is visible at rest
  *   beside its row (`spec:AST-058` FR8), the keyboard reaches it through the
- *   inline-end arrow in both directions and fires it with Enter, and the
- *   highlight follows a real mouse across rows and actions.
+ *   inline-end arrow in both directions and fires it with Enter, the active
+ *   action cell draws the standard focus ring when the shared input modality
+ *   is keyboard and not after pointer input, and the highlight follows a real
+ *   mouse across rows and actions.
  * @position Run with `pnpm test:a11y-contract`; paint, pointer paths and the
  *   active descendant as an engine exposes them are not jsdom claims.
  */
@@ -143,6 +145,114 @@ test('the keyboard reaches an action through the inline-end arrow and fires it w
   await expect.poll(async () => activeDescendant(page)).toBe('row:Bug');
 });
 
+test('the active action cell draws the standard focus ring', async ({page}) => {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-multiselector--row-actions&viewMode=story`,
+  );
+  const search = page.getByRole('combobox');
+  await expect(search).toBeFocused();
+  await search.press('ArrowDown'); // select-all
+  await search.press('ArrowDown'); // Feature (no action)
+  await search.press('ArrowDown'); // Bug
+  await search.press('ArrowRight');
+  await expect
+    .poll(async () => activeDescendant(page))
+    .toBe('gridcell:Edit Bug');
+  const ring = await page.evaluate(() => {
+    const id = document.activeElement?.getAttribute('aria-activedescendant');
+    const cell = id ? document.getElementById(id) : null;
+    if (!cell) {
+      return null;
+    }
+    const cs = getComputedStyle(cell);
+    // The ring the focus tokens describe, resolved by the browser on a probe.
+    const probe = document.createElement('div');
+    probe.style.cssText =
+      'outline-width:var(--focus-outline-width);outline-style:var(--focus-outline-style);outline-color:var(--focus-outline-color);outline-offset:var(--focus-outline-offset)';
+    document.body.appendChild(probe);
+    const want = getComputedStyle(probe);
+    const result = {
+      style: cs.outlineStyle,
+      width: cs.outlineWidth,
+      color: cs.outlineColor,
+      offset: cs.outlineOffset,
+      wantStyle: want.outlineStyle,
+      wantWidth: want.outlineWidth,
+      wantColor: want.outlineColor,
+      wantOffset: want.outlineOffset,
+    };
+    probe.remove();
+    return result;
+  });
+  expect(ring).not.toBeNull();
+  expect(ring!.style).not.toBe('none');
+  expect(ring!.width).not.toBe('0px');
+  expect(ring!.style).toBe(ring!.wantStyle);
+  expect(ring!.width).toBe(ring!.wantWidth);
+  expect(ring!.color).toBe(ring!.wantColor);
+  expect(ring!.offset).toBe(ring!.wantOffset);
+  // Back on the option cell, the action cell drops the ring.
+  await search.press('ArrowLeft');
+  await expect.poll(async () => activeDescendant(page)).toBe('row:Bug');
+  const after = await page
+    .getByRole('row', {name: 'Bug'})
+    .locator('[data-multi-selector-action-cell]')
+    .evaluate(cell => getComputedStyle(cell).outlineStyle);
+  expect(after).toBe('none');
+});
+
+test('the action-cell ring follows the shared input modality', async ({
+  page,
+}) => {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-multiselector--row-actions&viewMode=story`,
+  );
+  const search = page.getByRole('combobox');
+  await expect(search).toBeFocused();
+  const actionCell = (name: string) =>
+    page.getByRole('row', {name}).locator('[data-multi-selector-action-cell]');
+  const outlineStyle = async (name: string) =>
+    actionCell(name).evaluate(cell => getComputedStyle(cell).outlineStyle);
+  const hover = async (name: string) => {
+    const cell = await box(actionCell(name));
+    await page.mouse.move(cell.x + cell.width / 2, cell.y + cell.height / 2, {
+      steps: 6,
+    });
+  };
+
+  // Pointer input: a click into the search field, then a hover onto an
+  // action, moves the highlight without the ring, and leaves none behind.
+  await search.click();
+  await hover('Bug');
+  await expect
+    .poll(async () => activeDescendant(page))
+    .toBe('gridcell:Edit Bug');
+  expect(await outlineStyle('Bug')).toBe('none');
+  // A modifier chord is not keyboard navigation for the shared tracker.
+  await search.press('Control+ArrowRight');
+  expect(await outlineStyle('Bug')).toBe('none');
+  await page.mouse.move(1, 1, {steps: 6});
+  expect(await outlineStyle('Bug')).toBe('none');
+
+  // Keyboard input: back onto the same cell, the ring is drawn.
+  await search.press('ArrowLeft');
+  await expect.poll(async () => activeDescendant(page)).toBe('row:Bug');
+  await search.press('ArrowRight');
+  await expect
+    .poll(async () => activeDescendant(page))
+    .toBe('gridcell:Edit Bug');
+  expect(await outlineStyle('Bug')).not.toBe('none');
+
+  // Still keyboard-driven, a hover that moves the highlight to another
+  // row's action carries the ring with it.
+  await hover('P0');
+  await expect
+    .poll(async () => activeDescendant(page))
+    .toBe('gridcell:Edit P0');
+  expect(await outlineStyle('P0')).not.toBe('none');
+  expect(await outlineStyle('Bug')).toBe('none');
+});
+
 test('under RTL the inline-end arrow is ArrowLeft', async ({page}) => {
   await page.goto(
     `${storybook.origin}/iframe.html?id=core-multiselector--row-actions-rtl&viewMode=story`,

package/src/MultiSelector/hooks.ts

@@ -6,10 +6,12 @@
  * @file hooks.ts
  * @input Uses React hooks, MultiSelectorOptionData type
  * @output Exports useMultiCombobox hook
- * @position Internal hook; used by MultiSelector.tsx
+ * @position Public hook, exported from the MultiSelector entry point; used by
+ *   MultiSelector.tsx
  *
  * SYNC: When modified, update:
  * - /packages/core/src/MultiSelector/index.ts
+ * - /packages/core/src/MultiSelector/useMultiCombobox.doc.mjs
  */
 
 import {useCallback, useRef, useState} from 'react';

package/src/MultiSelector/useMultiCombobox.doc.mjs

@@ -0,0 +1,267 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
+export const docs = {
+  name: 'useMultiCombobox',
+  displayName: 'useMultiCombobox',
+  group: 'MultiSelector',
+  keywords: [
+    'combobox',
+    'multi-select',
+    'multiselect',
+    'listbox',
+    'grid',
+    'toggle',
+    'highlight',
+    'active option',
+    'aria-activedescendant',
+    'keyboard',
+    'headless',
+    'apg',
+    'accessibility',
+    'a11y',
+  ],
+  params: [
+    {
+      name: 'options',
+      type: 'UseMultiComboboxOptions',
+      description: 'Configuration object.',
+      required: true,
+    },
+    {
+      name: 'options.selectableItems',
+      type: 'MultiSelectorOptionData[]',
+      description:
+        'The options in the same order as they render. Options with `disabled` cannot be toggled and are skipped while moving through the open list; ArrowDown or ArrowUp that opens the list still lands on the first or last option.',
+      required: true,
+    },
+    {
+      name: 'options.isOpen',
+      type: 'boolean',
+      description: 'Whether the list is shown. The caller owns this state.',
+      required: true,
+    },
+    {
+      name: 'options.onOpen',
+      type: '() => unknown',
+      description:
+        'Called to show the list. Return `false` to refuse; the hook then leaves the highlight alone.',
+      required: true,
+    },
+    {
+      name: 'options.onClose',
+      type: '() => void',
+      description: 'Called to hide the list. The highlight resets first.',
+      required: true,
+    },
+    {
+      name: 'options.onToggle',
+      type: '(itemValue: string) => void',
+      description:
+        'Called with the value of the option to add or remove. Toggling keeps the list open.',
+      required: true,
+    },
+    {
+      name: 'options.listboxId',
+      type: 'string',
+      description:
+        "The listbox (or grid) element's id. Option and action-cell ids are derived from it.",
+      required: true,
+    },
+    {
+      name: 'options.hasSearch',
+      type: 'boolean',
+      description:
+        'Whether the list has its own search field. Space then types instead of toggling, opening by a press or Enter does not pre-highlight (ArrowDown and ArrowUp still open on the first and last option), Delete and Backspace edit the query, and type-to-select is off. Home and End still jump to the first and last option, so a search input that keeps them for the caret should stop them before this handler and rely on PageUp and PageDown.',
+      default: 'false',
+    },
+    {
+      name: 'options.onClear',
+      type: '() => void',
+      description:
+        'Clears every selected value. When provided, Delete or Backspace on the closed control clears them, so clearing is not pointer-only. Ignored while the list is open or with `hasSearch`.',
+    },
+    {
+      name: 'options.hasValue',
+      type: 'boolean',
+      description:
+        'Whether anything is selected. The Delete and Backspace clear is skipped when false.',
+      default: 'false',
+    },
+    {
+      name: 'options.isGrid',
+      type: 'boolean',
+      description:
+        "Whether each row pairs an option cell with an action cell. The inline-end arrow then moves the highlight to the row's action and the inline-start arrow back, following visual direction in right-to-left layouts, and Enter on the action runs `onActivateAction` instead of toggling.",
+      default: 'false',
+    },
+    {
+      name: 'options.rowHasAction',
+      type: '(index: number) => boolean',
+      description:
+        'In a grid, whether the row at `index` has an action cell to move to.',
+    },
+    {
+      name: 'options.onActivateAction',
+      type: '(index: number) => void',
+      description:
+        "In a grid, runs the control in the highlighted row's action cell. The selection does not change.",
+    },
+    {
+      name: 'options.isDisabled',
+      type: 'boolean',
+      description: 'Whether the control ignores clicks and keys.',
+      default: 'false',
+    },
+  ],
+  returns: [
+    {
+      name: 'highlightedIndex',
+      type: 'number',
+      description: 'Index of the active row, or -1 when none is active.',
+    },
+    {
+      name: 'setHighlightedIndex',
+      type: '(index: number) => void',
+      description:
+        "Sets the active row, for example after filtering. The highlight lands on the row's option cell.",
+    },
+    {
+      name: 'highlightedCell',
+      type: "'option' | 'action'",
+      description:
+        "Which cell of the active row is highlighted; `'action'` only in a grid.",
+    },
+    {
+      name: 'activeDescendantId',
+      type: 'string | undefined',
+      description:
+        "The id to pass as the control's `aria-activedescendant`: the active option, or its action cell in a grid. Undefined while the list is closed or nothing is active.",
+    },
+    {
+      name: 'getItemId',
+      type: '(index: number) => string',
+      description: 'The id to render on the option at `index`.',
+    },
+    {
+      name: 'getActionCellId',
+      type: '(index: number) => string',
+      description:
+        'In a grid, the id to render on the action cell of row `index`.',
+    },
+    {
+      name: 'onTriggerClick',
+      type: '() => void',
+      description: 'Toggles the list from a press on the control.',
+    },
+    {
+      name: 'onKeyDown',
+      type: '(e: React.KeyboardEvent) => void',
+      description:
+        'Key handler for the control that keeps focus. ArrowDown and ArrowUp open the list or move the active row; Enter (and Space without search) toggles the active option and keeps the list open; Escape and Tab close it; Home, End, PageUp and PageDown jump to the first or last option; without search, typed characters move to the first option whose label starts with them.',
+    },
+    {
+      name: 'onItemMouseEnter',
+      type: "(item: MultiSelectorOptionData, index: number, cell?: 'option' | 'action') => void",
+      description:
+        'Makes the hovered option, or its action cell, active without scrolling the list or moving focus.',
+    },
+  ],
+  usage: {
+    description:
+      'Tracks the active option of a multi-select combobox and handles its keys, while DOM focus stays on the control. It powers MultiSelector; unlike useCombobox, toggling an option keeps the list open, and rows can carry an action cell. It renders nothing and sets no attributes: the caller renders the control and the list, and wires the ARIA attributes from what it returns.',
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          "Render each option with `id={getItemId(index)}` and pass `activeDescendantId` as the control's `aria-activedescendant`.",
+      },
+      {
+        guidance: true,
+        description:
+          'Use `isGrid` only when rows carry a control next to the option; give each action cell `id={getActionCellId(index)}`.',
+      },
+      {
+        guidance: true,
+        description:
+          'Announce the number of results through useAnnounce when the options change for a new query.',
+      },
+      {
+        guidance: false,
+        description:
+          'Close the list after each toggle; a multi-select stays open so several options can be picked in a row.',
+      },
+    ],
+  },
+  relatedComponents: ['MultiSelector'],
+  relatedHooks: ['useCombobox', 'useAnnounce'],
+  importPath: '@astryxdesign/core/MultiSelector',
+  category: 'focus',
+};
+
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
+export const docsDense = {
+  description:
+    'Multi-select combobox state + keys; focus stays on control. Powers MultiSelector. Toggle keeps list open; rows may carry an action cell (grid). Renders nothing, sets no attrs: caller renders + wires ARIA.',
+  paramDescriptions: {
+    options: 'config.',
+    'options.selectableItems':
+      'options in render order; disabled ones not toggleable, skipped while moving in open list (ArrowDown/Up opening still lands first / last).',
+    'options.isOpen': 'list shown; caller owns state.',
+    'options.onOpen':
+      'show list; return false to refuse (highlight untouched).',
+    'options.onClose': 'hide list; highlight resets first.',
+    'options.onToggle': 'add / remove value; list stays open.',
+    'options.listboxId':
+      'listbox / grid id; option + action-cell ids derive from it.',
+    'options.hasSearch':
+      'own search field: Space types, press / Enter opening does not pre-highlight (ArrowDown/Up still first / last), Delete / Backspace edit query, no type-to-select. Home / End still jump; stop them first to keep them for the caret, use PageUp / PageDown.',
+    'options.onClear':
+      'clear all; Delete / Backspace on closed control. ignored when open or hasSearch.',
+    'options.hasValue': 'anything selected; clear skipped when false.',
+    'options.isGrid':
+      'rows = option + action cell; inline-end / inline-start arrows move between them (RTL-aware); Enter on action -> onActivateAction.',
+    'options.rowHasAction': 'grid: row at index has an action cell.',
+    'options.onActivateAction':
+      "grid: run highlighted row's action; selection unchanged.",
+    'options.isDisabled': 'ignore clicks + keys.',
+  },
+  returnDescriptions: {
+    highlightedIndex: 'active row index, -1 = none.',
+    setHighlightedIndex: 'set active row (lands on option cell).',
+    highlightedCell: "'option' | 'action' (action only in grid).",
+    activeDescendantId:
+      'control aria-activedescendant: active option or its action cell; undefined when closed / none.',
+    getItemId: 'id for option at index.',
+    getActionCellId: 'grid: id for action cell of row index.',
+    onTriggerClick: 'toggle list from a press on control.',
+    onKeyDown:
+      'control keydown: ArrowDown/Up open or move; Enter (Space w/o search) toggles, stays open; Escape / Tab close; Home / End / PageUp / PageDown jump; typed chars jump by label prefix (w/o search).',
+    onItemMouseEnter:
+      'hover makes option / action cell active; no scroll, no focus move.',
+  },
+  usage: {
+    description:
+      'Headless multi-select combobox: active option + keys, focus stays on control; toggle keeps list open. Caller renders + wires ARIA.',
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Option id = getItemId(index); control aria-activedescendant = activeDescendantId.',
+      },
+      {
+        guidance: true,
+        description:
+          'isGrid only when rows carry a control; action cell id = getActionCellId(index).',
+      },
+      {
+        guidance: true,
+        description: 'Announce result count via useAnnounce on new query.',
+      },
+      {
+        guidance: false,
+        description: 'Close after each toggle; multi-select stays open.',
+      },
+    ],
+  },
+};

package/src/Pagination/Pagination.doc.mjs

@@ -137,7 +137,7 @@ export const docs = {
       name: 'variant',
       type: "'pages' | 'count' | 'compact' | 'dots' | 'input' | 'none'",
       description:
-        "Visual variant controlling what appears between prev/next buttons. 'pages' shows page number buttons with ellipsis, 'count' shows 'X-Y of Z' text, 'compact' shows 'Page X of Y', 'dots' shows dot indicators, 'input' shows an editable page-number box with a leading label ('Page [ n ] / N') flanked by first/last buttons by default (the box needs a known total to clamp against, so it is disabled in cursor/hasMore mode), 'none' shows just prev/next buttons.",
+        "Visual variant controlling what appears between prev/next buttons. 'pages' shows page number buttons with ellipsis, 'count' shows 'X-Y of Z' text, 'compact' shows 'Page X of Y' (add first/last buttons with hasFirstLast), 'dots' shows dot indicators, 'input' shows an editable page-number box with a leading label ('Page [ n ] / N') flanked by first/last buttons by default (the box needs a known total to clamp against, so it is disabled in cursor/hasMore mode), 'none' shows just prev/next buttons.",
       default: "'pages'",
     },
     {
@@ -150,8 +150,8 @@ export const docs = {
       name: 'hasFirstLast',
       type: 'boolean',
       description:
-        "Whether to show first/last («/») double-chevron buttons flanking prev/next. Only applies to the 'input' variant; omitted when the page count is unknown (cursor/hasMore pagination).",
-      default: 'true',
+        "Whether to show first/last («/») double-chevron buttons flanking prev/next. Applies to the 'input' variant (shown unless false) and the 'compact' variant (shown only when true); other variants ignore it. Omitted when the page count is unknown (cursor/hasMore pagination).",
+      default: "true for 'input'; false for 'compact'",
     },
     {
       name: 'step',
@@ -288,7 +288,7 @@ export const docsZh = {
       name: 'variant',
       type: "'pages' | 'count' | 'compact' | 'dots' | 'input' | 'none'",
       description:
-        "控制上一页/下一页按钮之间显示内容的视觉变体。'pages' 显示带省略号的页码按钮，'count' 显示 'X-Y of Z' 文本，'compact' 显示 'Page X of Y'，'dots' 显示点指示器，'input' 显示带前置标签的可编辑页码框——'Page [ n ] / N'——默认两侧带首页/末页按钮，'none' 仅显示上一页/下一页按钮。",
+        "控制上一页/下一页按钮之间显示内容的视觉变体。'pages' 显示带省略号的页码按钮，'count' 显示 'X-Y of Z' 文本，'compact' 显示 'Page X of Y'（可通过 hasFirstLast 添加首页/末页按钮），'dots' 显示点指示器，'input' 显示带前置标签的可编辑页码框——'Page [ n ] / N'——默认两侧带首页/末页按钮，'none' 仅显示上一页/下一页按钮。",
       default: "'pages'",
     },
     {
@@ -301,8 +301,8 @@ export const docsZh = {
       name: 'hasFirstLast',
       type: 'boolean',
       description:
-        "是否显示首页/末页（«/»）双箭头按钮，位于上一页/下一页两侧。仅适用于 'input' 变体；当页数未知（游标/hasMore 分页）时省略。",
-      default: 'true',
+        "是否显示首页/末页（«/»）双箭头按钮，位于上一页/下一页两侧。适用于 'input' 变体（除非设为 false 否则显示）和 'compact' 变体（仅在设为 true 时显示）；其他变体忽略此项。当页数未知（游标/hasMore 分页）时省略。",
+      default: "'input' 为 true；'compact' 为 false",
     },
     {
       name: 'step',
@@ -400,7 +400,7 @@ export const docsDense = {
     onPageSizeChange: 'Called on page size change. Auto resets to page 1.',
     variant: "Display between prev/next. 'input' = 'Page [n] / N' + first/last.",
     pageLabel: "Noun before the 'input' box (e.g. 'Page' or 'Row'). Navigation stays page-based. Default localized 'Page'.",
-    hasFirstLast: "Show first/last («/») buttons in the 'input' variant. Omitted when total unknown.",
+    hasFirstLast: "Show first/last («/») buttons. 'input' default true; 'compact' default false (opt in). Other variants ignore. Omitted when total unknown.",
     step: 'Pages the prev/next buttons advance per click. Clamped to range; < 1 or non-integer falls back to 1.',
     siblingCount: "Page buttons each side of current; only variant='pages'.",
     size: 'Control size.',

package/src/Pagination/Pagination.spec.md

@@ -92,15 +92,15 @@ and usage remain documented in `Pagination.doc.mjs`.
 
 ### Representative states
 
-| State                         | Required invariant                                                                | Allowed variation                                  |
-| ----------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------- |
-| Numbered, known page count    | Page number buttons render; Ellipsis appears only where pages are omitted.        | Page count, sibling range, and active page.        |
-| Count with known item total   | Count readout renders between Previous/next buttons.                              | Range and total text.                              |
-| Compact with known page count | Compact readout renders between Previous/next buttons.                            | Current and total page text.                       |
-| Dots with known page count    | One Dot renders for each page and active state stays on the Dot target.           | Dot count and active Dot.                          |
-| Input with known page count   | Page input label, Page input, and Page input total render; First/last may render. | Label text and first/last opt-out.                 |
-| Input with unknown page count | Page input label and disabled Page input remain; total and First/last are absent. | Cursor-backed current page.                        |
-| None                          | Previous/next buttons remain without a presentation-specific part between them.   | Enabled state follows current paging availability. |
+| State                         | Required invariant                                                                           | Allowed variation                                  |
+| ----------------------------- | -------------------------------------------------------------------------------------------- | -------------------------------------------------- |
+| Numbered, known page count    | Page number buttons render; Ellipsis appears only where pages are omitted.                   | Page count, sibling range, and active page.        |
+| Count with known item total   | Count readout renders between Previous/next buttons.                                         | Range and total text.                              |
+| Compact with known page count | Compact readout renders between Previous/next buttons; First/last render only when opted in. | Current and total page text and first/last opt-in. |
+| Dots with known page count    | One Dot renders for each page and active state stays on the Dot target.                      | Dot count and active Dot.                          |
+| Input with known page count   | Page input label, Page input, and Page input total render; First/last may render.            | Label text and first/last opt-out.                 |
+| Input with unknown page count | Page input label and disabled Page input remain; total and First/last are absent.            | Cursor-backed current page.                        |
+| None                          | Previous/next buttons remain without a presentation-specific part between them.              | Enabled state follows current paging availability. |
 
 The optional Page-size selector may precede the paging controls in any current
 presentation when page-size options are provided.