@astryxdesign/core 0.6.2 → 0.6.3-canary.0788c49

package/src/PowerSearch/PowerSearchEditPopover.test.tsx

@@ -10,7 +10,14 @@ import {
   afterAll,
   afterEach,
 } from 'vitest';
-import {render, screen, fireEvent, act} from '@testing-library/react';
+import {
+  render,
+  screen,
+  fireEvent,
+  act,
+  waitFor,
+  within,
+} from '@testing-library/react';
 import React, {useState} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {spacingVars} from '../theme/tokens.stylex';
@@ -170,6 +177,148 @@ describe('PowerSearch', () => {
     expect(popoverText).toContain('equals');
   });
 
+  describe('value editor identity follows the field and operator', () => {
+    // Two fields with the same value type, so an unkeyed editor would be
+    // reused across the switch and keep the first field's menu contents.
+    const sameTypeConfig: PowerSearchConfig = {
+      name: 'test-same-type',
+      fields: [
+        {
+          key: 'creator',
+          label: 'Creator',
+          operators: [
+            {
+              key: 'is_any_of',
+              label: 'is any of',
+              value: {
+                type: 'enum_list',
+                values: [{value: 'creator-1', label: 'Creator Person'}],
+              },
+            },
+          ],
+        },
+        {
+          key: 'owner',
+          label: 'Owner',
+          operators: [
+            {
+              key: 'is_any_of',
+              label: 'is any of',
+              value: {
+                type: 'enum_list',
+                values: [{value: 'owner-1', label: 'Owner Person'}],
+              },
+            },
+          ],
+        },
+      ],
+    };
+
+    const creatorOption = () =>
+      screen.queryByRole('option', {name: 'Creator Person', hidden: true});
+    const ownerOption = () =>
+      screen.queryByRole('option', {name: 'Owner Person', hidden: true});
+
+    it('replaces an open value menu when the field changes', async () => {
+      function Harness() {
+        const internalConfig = useInternalConfig(sameTypeConfig);
+        return (
+          <PowerSearchEditPopover
+            config={internalConfig}
+            filter={{
+              field: 'creator',
+              operator: 'is_any_of',
+              value: {type: 'enum_list', value: []},
+            }}
+            mode="edit"
+            onSave={() => {}}
+            onCancel={() => {}}
+          />
+        );
+      }
+
+      render(<Harness />);
+
+      // Open the Creator value menu and leave it open.
+      fireEvent.focus(screen.getByRole('combobox', {name: 'Values'}));
+      await waitFor(() => expect(creatorOption()).toBeInTheDocument());
+
+      // Switch the field underneath the open menu.
+      fireEvent.click(screen.getByRole('combobox', {name: 'Field'}));
+      fireEvent.click(
+        screen.getByRole('option', {name: 'Owner', hidden: true}),
+      );
+      act(() => flushRAF());
+
+      // The old field's options are gone, the new field's are shown.
+      expect(creatorOption()).not.toBeInTheDocument();
+      await waitFor(() => expect(ownerOption()).toBeInTheDocument());
+    });
+
+    it('replaces an open value menu on a nested sub-filter row', async () => {
+      const nestedConfig: PowerSearchConfig = {
+        name: 'test-nested-same-type',
+        fields: [
+          {
+            key: 'group',
+            label: 'Group',
+            operators: [
+              {key: 'all_of', label: 'all of', value: {type: 'nested'}},
+            ],
+          },
+          ...sameTypeConfig.fields,
+        ],
+      };
+
+      function Harness() {
+        const internalConfig = useInternalConfig(nestedConfig);
+        return (
+          <PowerSearchEditPopover
+            config={internalConfig}
+            filter={{
+              field: 'group',
+              operator: 'all_of',
+              value: {
+                type: 'nested',
+                value: [
+                  {
+                    field: 'creator',
+                    operator: 'is_any_of',
+                    value: {type: 'enum_list', value: []},
+                  },
+                ],
+              },
+            }}
+            mode="edit"
+            onSave={() => {}}
+            onCancel={() => {}}
+          />
+        );
+      }
+
+      render(<Harness />);
+
+      fireEvent.focus(screen.getByRole('combobox', {name: 'Values'}));
+      await waitFor(() => expect(creatorOption()).toBeInTheDocument());
+
+      // The nested row's own field selector is the one currently on
+      // "Creator"; the root selector stays on "Group".
+      const rowField = screen
+        .getAllByRole('combobox', {name: 'Field'})
+        .find(el => el.textContent === 'Creator');
+      expect(rowField).toBeDefined();
+      fireEvent.click(rowField!);
+      const rowListbox = document.getElementById(
+        rowField!.getAttribute('aria-controls')!,
+      )!;
+      fireEvent.click(
+        within(rowListbox).getByRole('option', {name: 'Owner', hidden: true}),
+      );
+
+      expect(creatorOption()).not.toBeInTheDocument();
+    });
+  });
+
   it('edit popover shows correct filter after removing a preceding filter', () => {
     const filters: PowerSearchFilter[] = [
       {field: 'status', operator: 'is', value: {type: 'string', value: 'open'}},

package/src/PowerSearch/PowerSearchEditPopover.tsx

@@ -22,7 +22,10 @@ import {TreeList, type TreeListItemData} from '../TreeList';
 import {useTranslator} from '../i18n';
 import {isImeKeyEvent} from '../utils/ime';
 import {spacingVars, typeScaleVars} from '../theme/tokens.stylex';
-import {PowerSearchValueEditor} from './PowerSearchValueEditor';
+import {
+  PowerSearchValueEditor,
+  type PowerSearchValueEditorProps,
+} from './PowerSearchValueEditor';
 import {resolveOperatorLabel} from './resolveOperatorLabel';
 import type {InternalConfig} from './useInternalConfig';
 import type {
@@ -356,6 +359,7 @@ function NestedSubFilterRow({
       {operatorValue && !isEmptyType && !isNestedType && (
         <div {...stylex.props(styles.nestedRowValueEditor)}>
           <PowerSearchValueEditor
+            key={valueEditorKey(subFilter)}
             operatorValue={operatorValue}
             filterValue={subFilter.value}
             onChange={handleValueChange}
@@ -606,6 +610,42 @@ function NestedEditor({
   return <TreeList items={items} density="balanced" />;
 }
 
+// =============================================================================
+// Value editor cell
+// =============================================================================
+
+// A field switch must replace the editor, not update it in place: a reused
+// editor keeps its open menu and old results.
+function valueEditorKey(filter: {field: string; operator?: string}): string {
+  return `${filter.field}\u0000${filter.operator ?? ''}`;
+}
+
+// Keyed on field + operator, so this also mounts on a field switch, not just
+// when the popover opens; the focus handoff below runs for both.
+function ValueEditorCell(props: PowerSearchValueEditorProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      const container = ref.current;
+      if (!container) {
+        return;
+      }
+      const focusable = container.querySelector<HTMLElement>(
+        'input:not([disabled]), button:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      );
+      focusable?.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, []);
+
+  return (
+    <div ref={ref} {...stylex.props(styles.valueEditor)}>
+      <PowerSearchValueEditor {...props} />
+    </div>
+  );
+}
+
 // =============================================================================
 // Main popover
 // =============================================================================
@@ -625,22 +665,6 @@ export function PowerSearchEditPopover({
     saveButtonLabelFromProps ?? t('@astryx.powersearch.editor.apply');
   const [partialFilter, setPartialFilter] =
     useState<PartialFilter>(initialFilter);
-  const valueEditorRef = useRef<HTMLDivElement>(null);
-
-  // Focus the first focusable element inside the value editor after mount
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      const container = valueEditorRef.current;
-      if (!container) {
-        return;
-      }
-      const focusable = container.querySelector<HTMLElement>(
-        'input:not([disabled]), button:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])',
-      );
-      focusable?.focus();
-    });
-    return () => cancelAnimationFrame(frame);
-  }, []);
 
   const currentOperator = partialFilter.operator
     ? config.getOperator(partialFilter.field, partialFilter.operator)
@@ -854,17 +878,16 @@ export function PowerSearchEditPopover({
             </div>
           )}
           {operatorValue && !isEmptyType && (
-            <div ref={valueEditorRef} {...stylex.props(styles.valueEditor)}>
-              <PowerSearchValueEditor
-                operatorValue={operatorValue}
-                filterValue={partialFilter.value}
-                onChange={handleValueChange}
-                onEnter={handleSave}
-                config={config}
-                maxMenuItems={maxMenuItems}
-                isDisabled={isReadOnly}
-              />
-            </div>
+            <ValueEditorCell
+              key={valueEditorKey(partialFilter)}
+              operatorValue={operatorValue}
+              filterValue={partialFilter.value}
+              onChange={handleValueChange}
+              onEnter={handleSave}
+              config={config}
+              maxMenuItems={maxMenuItems}
+              isDisabled={isReadOnly}
+            />
           )}
         </HStack>
       </div>

package/src/PowerSearch/PowerSearchValueEditor.test.tsx

@@ -630,3 +630,54 @@ describe('maxMenuItems', () => {
     await expectCapped({type: 'entity_list', searchSource: source});
   });
 });
+
+// =============================================================================
+// EnumListEditor shows the whole closed vocabulary
+// =============================================================================
+
+describe('EnumListEditor', () => {
+  const values = Array.from({length: 12}, (_, index) => ({
+    value: `option-${index}`,
+    label: `Option ${index}`,
+  }));
+
+  it('shows every value on focus instead of the typeahead default of 10', async () => {
+    render(
+      <PowerSearchValueEditor
+        operatorValue={{type: 'enum_list', values}}
+        filterValue={undefined}
+        onChange={vi.fn()}
+        config={stubConfig}
+      />,
+    );
+
+    fireEvent.focus(screen.getByRole('combobox'));
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 50));
+    });
+
+    expect(screen.getAllByRole('option', {hidden: true})).toHaveLength(12);
+    expect(screen.getByText('Option 11')).toBeInTheDocument();
+  });
+
+  it('shows every matching value when searching', async () => {
+    render(
+      <PowerSearchValueEditor
+        operatorValue={{type: 'enum_list', values}}
+        filterValue={undefined}
+        onChange={vi.fn()}
+        config={stubConfig}
+      />,
+    );
+
+    await act(async () => {
+      fireEvent.change(screen.getByRole('combobox'), {
+        target: {value: 'Option'},
+      });
+      await new Promise(resolve => setTimeout(resolve, 200));
+    });
+
+    expect(screen.getAllByRole('option', {hidden: true})).toHaveLength(12);
+    expect(screen.getByText('Option 11')).toBeInTheDocument();
+  });
+});

package/src/PowerSearch/PowerSearchValueEditor.tsx

@@ -619,6 +619,10 @@ function EnumListEditor({
       placeholder={t('@astryx.powersearch.valueEditor.selectValuesPlaceholder')}
       hasEntriesOnFocus
       debounceMs={0}
+      // A closed vocabulary: every value is a valid choice, so the menu shows
+      // all of them instead of BaseTypeahead's 10-suggestion default, which
+      // would silently drop valid choices with no way to reach them.
+      maxMenuItems={items.length}
     />
   );
 }

package/src/ProgressBar/ProgressBar.test.tsx

@@ -1,5 +1,12 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+/**
+ * @file ProgressBar.test.tsx
+ * @input Uses Vitest, Testing Library, and ProgressBar
+ * @output DOM regressions for values, labels, themes, and external mark triggers
+ * @position Colocated unit tests; mark geometry is checked in Storybook
+ */
+
 import {describe, it, expect, beforeAll} from 'vitest';
 import {render, screen, waitFor} from '@testing-library/react';
 import {ProgressBar} from './ProgressBar';
@@ -558,6 +565,21 @@ describe('ProgressBar', () => {
       expect(styleClasses(accentMarks[1])).toBe(styleClasses(errorMarks[1]));
     });
 
+    it('keeps tabbable target marks outside the progressbar subtree', () => {
+      const {container} = render(
+        <ProgressBar
+          value={50}
+          label="Progress"
+          marks={[{value: 80, label: 'Goal'}]}
+        />,
+      );
+      const progressbar = screen.getByRole('progressbar', {name: 'Progress'});
+      const mark = container.querySelector(MARK)!;
+      expect(mark).toHaveAttribute('tabindex', '0');
+      expect(progressbar.querySelector('[tabindex="0"]')).toBeNull();
+      expect(mark.closest('[role="progressbar"]')).toBeNull();
+    });
+
     it('renders every mark as a focusable trigger (label is required, never decorative)', () => {
       const {container} = render(
         <ProgressBar
@@ -605,10 +627,8 @@ describe('ProgressBar', () => {
     });
 
     it('keeps the progressbar element free of role="img"/aria-label children', () => {
-      // Marks are children of role="progressbar" (unchanged DOM), but a
-      // mark uses a Tooltip (aria-describedby) rather than a
-      // role="img"+aria-label child, so nothing muddies what SRs announce for
-      // the bar.
+      // Marks stay outside the progressbar's presentational subtree; their
+      // Tooltip descriptions must not change the bar's own semantics.
       const {container} = render(
         <ProgressBar
           value={50}
@@ -617,9 +637,7 @@ describe('ProgressBar', () => {
         />,
       );
       const progressbar = screen.getByRole('progressbar');
-      // Mark is a child of the progressbar (DOM unchanged from main).
-      expect(progressbar.querySelector(MARK)).not.toBeNull();
-      // But it is not a labeled graphic that pollutes the a11y subtree.
+      expect(progressbar.querySelector(MARK)).toBeNull();
       expect(progressbar.querySelector('[role="img"]')).toBeNull();
       expect(progressbar.querySelector('[aria-label]')).toBeNull();
       expect(container.querySelectorAll(MARK)).toHaveLength(1);
@@ -637,9 +655,9 @@ describe('ProgressBar', () => {
       expect(progressbar.getAttribute('aria-valuetext')).toBe('50%');
     });
 
-    it('renders marks as children of the progressbar (unchanged DOM)', () => {
-      // Marks stay children of role="progressbar", after the fill — the same
-      // shape as main. The fill remains the first child.
+    it('preserves the fill inside the progressbar when marks are rendered outside it', () => {
+      // Only the fill belongs to the semantic track; the focusable marks
+      // remain independently available outside its presentational subtree.
       const {container} = render(
         <ProgressBar
           value={50}
@@ -652,7 +670,7 @@ describe('ProgressBar', () => {
       expect(fill.style.width).toBe('50%');
       expect(fill.classList.contains('astryx-progressbar-mark')).toBe(false);
       const mark = container.querySelector<HTMLElement>(MARK)!;
-      expect(mark.closest('[role="progressbar"]')).toBe(progressbar);
+      expect(progressbar).not.toContainElement(mark);
       expect(container.querySelectorAll(MARK)).toHaveLength(1);
     });
 

package/src/ProgressBar/ProgressBar.tsx

@@ -215,26 +215,23 @@ const styles = stylex.create({
     whiteSpace: 'nowrap',
     borderWidth: 0,
   },
-  // The `role="progressbar"` element. In determinate mode it does NOT clip its
-  // content (`overflow` stays visible) so a themed mark taller than the bar can
-  // overhang it; the determinate fill rounds its own corners via `border-radius`
-  // (see `fill`) and is always inside the track box, so dropping the clip does
-  // not change its appearance at any progress. Indeterminate mode re-adds the
-  // clip via `trackClipped` (see below) — its sliding fill travels outside the
-  // track and must be clipped, and marks are ignored while indeterminate, so
-  // there is nothing to overhang.
-  track: {
+  // The in-flow track determines this containing block's actual height.
+  // Marks share its geometry without depending on the label row's height or
+  // entering the progressbar's presentational subtree. Keep it unclipped so
+  // themed tall marks can overhang the track symmetrically.
+  trackContainer: {
     position: 'relative',
     width: '100%',
+  },
+  // The semantic rail holds only the fill, which rounds its own corners.
+  track: {
+    width: '100%',
     height: '8px',
     backgroundColor: colorVars['--color-background-muted'],
     borderRadius: radiusVars['--radius-full'],
   },
-  // Indeterminate-only clip. The indeterminate fill slides from translateX
-  // -100% to 250%, so it deliberately overshoots the track on both sides and
-  // relies on the track clipping it to the visible window. Applied only when
-  // `isIndeterminate` (marks are suppressed then, so nothing needs to overhang)
-  // so it never re-clips a themed tall mark in determinate mode.
+  // The indeterminate fill overshoots the track on both sides and must be
+  // clipped to the visible rail. Marks are suppressed in this mode.
   trackClipped: {
     overflow: 'hidden',
   },
@@ -260,11 +257,10 @@ const styles = stylex.create({
     animationTimingFunction: 'ease-in-out',
     animationIterationCount: 'infinite',
   },
-  // A mark is a vertical tick centered on the track, a child of the
-  // `role="progressbar"` element (unchanged DOM). The track no longer clips, so
-  // its height — 8px by default — may exceed the bar and overhang; the centering
-  // translate keeps any overhang symmetric. Positioned horizontally via
-  // `insetInlineStart`; the translate mirrors under RTL.
+  // A mark is a vertical tick centered on the track via their shared positioning container.
+  // It stays outside role="progressbar" so it remains independently focusable.
+  // The centering translate keeps themed overhang symmetric;
+  // insetInlineStart and the mirrored translate preserve RTL.
   //
   // The dimensions read private vars rather than being plain declarations: a
   // theme writes `width`/`height` on the `progressbar-mark` target as usual and
@@ -518,59 +514,50 @@ export function ProgressBar({
         <VisuallyHidden id={labelId}>{label}</VisuallyHidden>
       )}
 
-      {/* Progress track — the `role="progressbar"` element, holding the fill
-          and marks as its children (unchanged DOM shape). It no longer clips
-          (`overflow` is visible), so a themed taller mark can overhang it;
-          the fill preserves its rounded shape via its own `border-radius`. */}
-      <div
-        role="progressbar"
-        aria-valuenow={isIndeterminate ? undefined : clampedValue}
-        aria-valuemin={isIndeterminate ? undefined : 0}
-        aria-valuemax={isIndeterminate ? undefined : safeMax}
-        aria-labelledby={labelId}
-        aria-valuetext={isIndeterminate ? undefined : valueText}
-        {...mergeProps(
-          themeProps('progress-bar-track', undefined, {
-            legacyNames: ['progressbar-track'],
-          }),
-          stylex.props(styles.track, isIndeterminate && styles.trackClipped),
-        )}>
-        {isIndeterminate ? (
-          <div
-            {...mergeProps(
-              themeProps(
-                'progress-bar-fill',
-                {variant: fillVariant},
-                {legacyNames: ['progressbar-fill']},
-              ),
-              stylex.props(
-                styles.indeterminateFill,
-                variantStyles[fillVariant],
-              ),
-            )}
-          />
-        ) : (
-          <div
-            {...mergeProps(
-              themeProps(
-                'progress-bar-fill',
-                {variant: fillVariant},
-                {legacyNames: ['progressbar-fill']},
-              ),
-              stylex.props(styles.fill, variantStyles[fillVariant]),
-            )}
-            style={{width: `${percentage}%`}}
-          />
-        )}
-        {/* Target marks — children of the progressbar element (unchanged),
-            layered above the fill so they show whether progress is below or
-            past them. A mark's color follows what it sits on: inside the fill
-            it uses the fill variant's on-color, out on the bare track it uses
-            the emphasized divider color. Each mark is labeled, so it is a
-            focusable Tooltip trigger: the label is visible on hover/focus and
-            names the mark for assistive tech via the Tooltip's
-            aria-describedby, without adding a labeled child to the
-            progressbar's own a11y subtree. */}
+      <div {...stylex.props(styles.trackContainer)}>
+        <div
+          role="progressbar"
+          aria-valuenow={isIndeterminate ? undefined : clampedValue}
+          aria-valuemin={isIndeterminate ? undefined : 0}
+          aria-valuemax={isIndeterminate ? undefined : safeMax}
+          aria-labelledby={labelId}
+          aria-valuetext={isIndeterminate ? undefined : valueText}
+          {...mergeProps(
+            themeProps('progress-bar-track', undefined, {
+              legacyNames: ['progressbar-track'],
+            }),
+            stylex.props(styles.track, isIndeterminate && styles.trackClipped),
+          )}>
+          {isIndeterminate ? (
+            <div
+              {...mergeProps(
+                themeProps(
+                  'progress-bar-fill',
+                  {variant: fillVariant},
+                  {legacyNames: ['progressbar-fill']},
+                ),
+                stylex.props(
+                  styles.indeterminateFill,
+                  variantStyles[fillVariant],
+                ),
+              )}
+            />
+          ) : (
+            <div
+              {...mergeProps(
+                themeProps(
+                  'progress-bar-fill',
+                  {variant: fillVariant},
+                  {legacyNames: ['progressbar-fill']},
+                ),
+                stylex.props(styles.fill, variantStyles[fillVariant]),
+              )}
+              style={{width: `${percentage}%`}}
+            />
+          )}
+        </div>
+        {/* Marks overlay the fill but live outside the semantic progressbar.
+          Their Tooltip descriptions remain independently reachable on focus. */}
         {resolvedMarks.map(mark => {
           // The tick element. It is both the Tooltip's anchor and the Suspense
           // fallback shown while the lazy Tooltip chunk loads, so the tick is

package/src/RadioList/RadioList.doc.mjs

@@ -132,6 +132,17 @@ export const docs = {
     {name: 'RadioListItem'},
   ],
   usage: {
+    accessibility: [
+      {
+        name: 'Radio circle',
+        category: 'Color contrast',
+        criterion: '1.4.11 Non-text Contrast',
+        requirement: '3:1',
+        states: ['Rest', 'Hover', 'Pointer down', 'Selected'],
+        description:
+          'The circle edge (unselected) and fill (selected) must have at least 3:1 contrast with the surface behind them. For Hover and Pointer down, measure the final colors after the tint and the pressed overlay are applied.',
+      },
+    ],
     description:
       'A group of options where only one can be selected at a time. All options are visible at once, making it easy to compare choices. Use it when users need to pick one option from a small set.',
     bestPractices: [

package/src/RadioList/RadioList.test.tsx

@@ -15,6 +15,7 @@
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import {hasPressedArm} from '../__tests__/pressState';
 import {RadioList} from './RadioList';
 import {RadioListItem} from './RadioListItem';
 import {getForcedColorsRules} from '../__tests__/forcedColors';
@@ -856,3 +857,34 @@ describe('forced colors (WCAG 1.4.11)', () => {
     expect(getForcedColorsRules()).toContain('background-color: canvastext;');
   });
 });
+
+describe('pressed state', () => {
+  it('paints the pressed overlay over the radio indicator while the row is pressed', () => {
+    const {container} = render(
+      <RadioList label="Plan" value="a" onChange={() => {}}>
+        <RadioListItem label="Option A" value="a" />
+        <RadioListItem label="Option B" value="b" />
+      </RadioList>,
+    );
+    const circle = container.querySelector('.astryx-radio-indicator');
+    const wrapper = circle?.parentElement?.parentElement;
+    if (wrapper == null) {
+      throw new Error('the radio has no indicator wrapper to press');
+    }
+    expect(hasPressedArm(wrapper)).toBe(true);
+  });
+
+  it('does not expose a pressed arm on a disabled radio', () => {
+    const {container} = render(
+      <RadioList label="Plan" value="a" onChange={() => {}}>
+        <RadioListItem label="Unavailable" value="b" isDisabled />
+      </RadioList>,
+    );
+    const circle = container.querySelector('.astryx-radio-indicator');
+    const wrapper = circle?.parentElement?.parentElement;
+    if (wrapper == null) {
+      throw new Error('the radio has no indicator wrapper');
+    }
+    expect(hasPressedArm(wrapper)).toBe(false);
+  });
+});