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

package/src/PowerSearch/PowerSearch.test.tsx

@@ -11,7 +11,14 @@
 
 import {useState} from 'react';
 import {describe, it, expect, vi, beforeAll, afterAll, afterEach} from 'vitest';
-import {render, screen, act, fireEvent, waitFor} from '@testing-library/react';
+import {
+  render,
+  screen,
+  act,
+  fireEvent,
+  waitFor,
+  within,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {PowerSearch} from './PowerSearch';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
@@ -492,3 +499,235 @@ describe('PowerSearch statusVariant forwarding', () => {
     );
   });
 });
+
+describe('maxOperatorMenuItems', () => {
+  it('caps entity suggestions after selecting a field', async () => {
+    const people = Array.from({length: 6}, (_, index) => ({
+      id: `person-${index}`,
+      label: `Person ${index}`,
+    }));
+    const config: PowerSearchConfig = {
+      name: 'PeopleSearch',
+      fields: [
+        {
+          key: 'person',
+          label: 'Person',
+          defaultOperator: 'is_any_of',
+          operators: [
+            {
+              key: 'is_any_of',
+              label: 'is any of',
+              value: {
+                type: 'entity_list',
+                searchSource: {
+                  search: query =>
+                    people.filter(person => person.label.includes(query)),
+                  bootstrap: () => people,
+                },
+              },
+            },
+          ],
+        },
+      ],
+    };
+    const user = userEvent.setup();
+    render(
+      <PowerSearch
+        config={config}
+        filters={[
+          {
+            field: 'person',
+            operator: 'is_any_of',
+            value: {type: 'entity_list', value: [people[0]]},
+          },
+        ]}
+        onChange={() => {}}
+        maxOperatorMenuItems={2}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', {name: 'Person: is any of'}));
+    const inputs = screen.getAllByRole('combobox', {hidden: true});
+    const valueInput = inputs[inputs.length - 1];
+    await user.type(valueInput, 'Person');
+
+    const listboxID = valueInput.getAttribute('aria-controls');
+    expect(listboxID).not.toBeNull();
+    const listbox = document.getElementById(listboxID!);
+    expect(listbox).not.toBeNull();
+    await waitFor(() => {
+      expect(
+        within(listbox!).getAllByRole('option', {hidden: true}),
+      ).toHaveLength(2);
+    });
+  });
+});
+
+describe('field menu sizing', () => {
+  const FIELD_COUNT = 25;
+  const manyFields: PowerSearchConfig = {
+    name: 'ManyFields',
+    fields: Array.from({length: FIELD_COUNT}, (_, i) => ({
+      key: `field_${i}`,
+      label: `Zebra ${String(i).padStart(2, '0')}`,
+      defaultOperator: 'is',
+      operators: [{key: 'is', label: 'is', value: {type: 'string'} as const}],
+    })),
+  };
+
+  async function openMenu(
+    props?: {maxSearchResults?: number; menuWidth?: number},
+    config: PowerSearchConfig = manyFields,
+  ) {
+    const user = userEvent.setup();
+    render(
+      <PowerSearch
+        config={config}
+        filters={[]}
+        onChange={() => {}}
+        {...props}
+      />,
+    );
+    await user.click(screen.getByRole('combobox'));
+    await waitFor(() => {
+      expect(screen.getByRole('listbox', {hidden: true})).toBeInTheDocument();
+    });
+    return user;
+  }
+
+  const optionCount = () =>
+    screen.getAllByRole('option', {hidden: true}).length;
+
+  it('shows every field in a normal field list while browsing', async () => {
+    await openMenu();
+    expect(optionCount()).toBe(FIELD_COUNT);
+  });
+
+  it('caps an extreme field list at the 1,000-row browsing ceiling', async () => {
+    const extremeConfig: PowerSearchConfig = {
+      name: 'ExtremeFields',
+      fields: Array.from({length: 1001}, (_, i) => ({
+        key: `extreme_${i}`,
+        label: `Extreme ${i}`,
+        defaultOperator: 'is',
+        operators: [{key: 'is', label: 'is', value: {type: 'string'} as const}],
+      })),
+    };
+
+    await openMenu(undefined, extremeConfig);
+    expect(optionCount()).toBe(1000);
+  });
+
+  it('caps ranked results while typing', async () => {
+    const user = await openMenu();
+    // "zebra" matches every field label.
+    await user.type(screen.getByRole('combobox'), 'zebra');
+    await waitFor(() => {
+      expect(optionCount()).toBe(10);
+    });
+  });
+
+  it('caps ranked results at maxSearchResults while typing', async () => {
+    const user = await openMenu({maxSearchResults: 3});
+    await user.type(screen.getByRole('combobox'), 'zebra');
+    await waitFor(() => {
+      expect(optionCount()).toBe(3);
+    });
+  });
+
+  it('does not apply maxSearchResults while browsing', async () => {
+    await openMenu({maxSearchResults: 3});
+    expect(optionCount()).toBe(FIELD_COUNT);
+  });
+
+  it('applies menuWidth to the main field menu', async () => {
+    await openMenu({menuWidth: 480});
+    const listbox = screen.getByRole('listbox', {hidden: true});
+    const popover = listbox.closest('[popover]');
+    expect(popover).not.toBeNull();
+    expect((popover as HTMLElement).style.getPropertyValue('--x-width')).toBe(
+      '480px',
+    );
+  });
+});
+
+describe('field menu grouping', () => {
+  const groupedConfig: PowerSearchConfig = {
+    name: 'GroupedSearch',
+    fields: [
+      field('team_a', 'Field Team A', 'Team'),
+      field('plain_a', 'Field Plain A'),
+      field('time_a', 'Field Time A', 'Time'),
+      field('team_b', 'Field Team B', 'Team'),
+      field('plain_b', 'Field Plain B'),
+      field('time_b', 'Field Time B', 'Time'),
+    ],
+  };
+
+  function field(key: string, label: string, group?: string) {
+    return {
+      key,
+      label,
+      group,
+      operators: [{key: 'is', label: 'is', value: {type: 'string'} as const}],
+    };
+  }
+
+  async function openMenu() {
+    const user = userEvent.setup();
+    render(
+      <PowerSearch config={groupedConfig} filters={[]} onChange={() => {}} />,
+    );
+    await user.click(screen.getByRole('combobox'));
+    await waitFor(() => {
+      expect(screen.getByRole('listbox', {hidden: true})).toBeInTheDocument();
+    });
+    return user;
+  }
+
+  it('renders ungrouped fields first and named sections after them', async () => {
+    await openMenu();
+    const listbox = screen.getByRole('listbox', {hidden: true});
+    expect(
+      within(listbox)
+        .getAllByRole('option', {hidden: true})
+        .map(option => option.textContent),
+    ).toEqual([
+      'Field Plain A',
+      'Field Plain B',
+      'Field Team A',
+      'Field Team B',
+      'Field Time A',
+      'Field Time B',
+    ]);
+    expect(
+      within(listbox)
+        .getAllByRole('group', {hidden: true})
+        .map(group => group.getAttribute('aria-label')),
+    ).toEqual(['Team', 'Time']);
+  });
+
+  it('keeps keyboard navigation flat across section boundaries', async () => {
+    const user = await openMenu();
+    const input = screen.getByRole('combobox');
+    await user.keyboard('{ArrowDown}{ArrowDown}');
+    const activeId = input.getAttribute('aria-activedescendant');
+    expect(activeId).not.toBeNull();
+    expect(document.getElementById(activeId!)?.textContent).toBe(
+      'Field Team A',
+    );
+  });
+
+  it('keeps ranked results flat while typing', async () => {
+    const user = await openMenu();
+    await user.type(screen.getByRole('combobox'), 'field');
+    await waitFor(() => {
+      expect(
+        within(screen.getByRole('listbox', {hidden: true})).queryAllByRole(
+          'group',
+          {hidden: true},
+        ),
+      ).toHaveLength(0);
+    });
+  });
+});

package/src/PowerSearch/PowerSearch.tsx

@@ -46,7 +46,6 @@ import {
   typeScaleVars,
   fontWeightVars,
 } from '../theme/tokens.stylex';
-import {mergeRefs} from '../utils';
 import {useSize} from '../SizeContext/SizeContext';
 import {useInternalConfig} from './useInternalConfig';
 import {usePowerSearchSource} from './usePowerSearchSource';
@@ -75,10 +74,19 @@ import type {
   PowerSearchComponents,
 } from './types';
 
+import {useMergedRefs} from '../hooks/useMergedRefs';
 // =============================================================================
 // Icon mapping for typeahead entries
 // =============================================================================
 
+// Ranked suggestions shown for a non-empty query. The field list itself is
+// never capped -- see the maxSearchResults prop.
+const DEFAULT_MAX_SEARCH_RESULTS = 10;
+
+// Empty-query browsing gets a high safety ceiling, matching XDS. This shows
+// every practical field list without allowing an accidental unbounded DOM.
+const MAX_BROWSE_MENU_ITEMS = 1000;
+
 const OPERATOR_VALUE_TYPE_TO_ICON: Record<string, IconName> = {
   string: 'search',
   string_list: 'search',
@@ -109,7 +117,12 @@ const tokenValueStyles = stylex.create({
 const popoverLayerStyles = stylex.create({
   layer: {
     width: 'anchor-size(width)',
-    minWidth: 400,
+    // Floor for comfortable editing, yielding when the available inline
+    // space cannot fit it, so the editor stays on-screen at narrow viewport
+    // widths (#4761). Percentages resolve against the position-area region
+    // (anchor start edge to viewport end), falling back to the viewport
+    // where area sizing is not honored.
+    minWidth: `min(400px, calc(100% - ${spacingVars['--spacing-4']}))`,
   },
 });
 
@@ -401,8 +414,14 @@ export interface PowerSearchProps extends Omit<
   menuWidth?: number;
   /** Max display length for filter token values. @default 40 */
   maxTokenLength?: number;
-  /** Max items in operator dropdown. */
+  /** Max suggestions in string and entity value typeaheads. @default 10 */
   maxOperatorMenuItems?: number;
+  /**
+   * Max ranked results shown for a non-empty query. This does not affect the
+   * value editor shown after selecting a field. Browsing the field list with
+   * an empty query shows up to 1,000 fields. @default 10
+   */
+  maxSearchResults?: number;
   /** Label for the save button in edit popover. @default 'Apply' */
   popoverSaveButtonLabel?: string;
   /** Timezone ID for date formatting. */
@@ -542,7 +561,10 @@ export function PowerSearch({
   onBlur,
   status,
   statusVariant = 'attached',
+  menuWidth,
   maxTokenLength = 40,
+  maxOperatorMenuItems,
+  maxSearchResults = DEFAULT_MAX_SEARCH_RESULTS,
   popoverSaveButtonLabel: popoverSaveButtonLabelFromProps,
   timezoneID,
   tokenOverflowBehavior,
@@ -559,7 +581,7 @@ export function PowerSearch({
 }: PowerSearchProps) {
   const size = useSize(sizeProp, 'md');
   const config = useInternalConfig(configProp);
-  const searchSource = usePowerSearchSource(config);
+  const searchSource = usePowerSearchSource(config, maxSearchResults);
   const t = useTranslator();
   const locale = useLocale();
   const label = labelFromProps ?? t('@astryx.powersearch.label');
@@ -962,6 +984,7 @@ export function PowerSearch({
         onSave={handlePopoverSave}
         onCancel={handlePopoverCancel}
         saveButtonLabel={popoverSaveButtonLabel}
+        maxMenuItems={maxOperatorMenuItems}
         isReadOnly={isReadOnly}
       />
     );
@@ -974,6 +997,7 @@ export function PowerSearch({
     handlePopoverSave,
     handlePopoverCancel,
     popoverSaveButtonLabel,
+    maxOperatorMenuItems,
     isReadOnly,
   ]);
 
@@ -1029,7 +1053,10 @@ export function PowerSearch({
   return (
     <>
       <div
-        ref={mergeRefs(ref, popover.triggerRef as React.Ref<HTMLDivElement>)}
+        ref={useMergedRefs(
+          ref,
+          popover.triggerRef as React.Ref<HTMLDivElement>,
+        )}
         {...themeProps('power-search')}>
         <Tokenizer
           handleRef={tokenizerRef}
@@ -1040,6 +1067,8 @@ export function PowerSearch({
           onChange={handleTokenizerChange}
           renderToken={renderToken}
           renderItem={renderItem}
+          maxMenuItems={MAX_BROWSE_MENU_ITEMS}
+          menuWidth={menuWidth}
           placeholder={filters.length === 0 ? placeholder : ''}
           hasAutoFocus={hasAutoFocus}
           hasClear={hasClear && !isReadOnly}

package/src/PowerSearch/PowerSearchEditPopover.test.tsx

@@ -12,6 +12,8 @@ import {
 } from 'vitest';
 import {render, screen, fireEvent, act} from '@testing-library/react';
 import React, {useState} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {spacingVars} from '../theme/tokens.stylex';
 import {PowerSearch} from './PowerSearch';
 import {PowerSearchEditPopover} from './PowerSearchEditPopover';
 import {useInternalConfig} from './useInternalConfig';
@@ -284,6 +286,93 @@ describe('PowerSearch', () => {
     expect(onSave).not.toHaveBeenCalled();
   });
 
+  it('saves the freshly committed numeric value on Enter', () => {
+    const numericConfig: PowerSearchConfig = {
+      name: 'test-number',
+      fields: [
+        {
+          key: 'level',
+          label: 'Level',
+          operators: [
+            {key: 'equals', label: 'equals', value: {type: 'integer'}},
+          ],
+        },
+      ],
+    };
+    const onSave = vi.fn();
+
+    function NumericValueHarness() {
+      const internalConfig = useInternalConfig(numericConfig);
+      return (
+        <PowerSearchEditPopover
+          config={internalConfig}
+          filter={{
+            field: 'level',
+            operator: 'equals',
+            value: {type: 'integer', value: 5},
+          }}
+          mode="edit"
+          onSave={onSave}
+          onCancel={() => {}}
+        />
+      );
+    }
+
+    render(<NumericValueHarness />);
+    const input = screen.getByRole('spinbutton');
+    fireEvent.focus(input);
+    fireEvent.input(input, {target: {value: '42'}});
+    fireEvent.keyDown(input, {key: 'Enter'});
+
+    expect(onSave).toHaveBeenCalledWith({
+      field: 'level',
+      operator: 'equals',
+      value: {type: 'integer', value: 42},
+    });
+  });
+
+  it('does not save an invalid numeric draft on Enter', () => {
+    const numericConfig: PowerSearchConfig = {
+      name: 'test-number',
+      fields: [
+        {
+          key: 'level',
+          label: 'Level',
+          operators: [
+            {key: 'equals', label: 'equals', value: {type: 'integer'}},
+          ],
+        },
+      ],
+    };
+    const onSave = vi.fn();
+
+    function NumericValueHarness() {
+      const internalConfig = useInternalConfig(numericConfig);
+      return (
+        <PowerSearchEditPopover
+          config={internalConfig}
+          filter={{
+            field: 'level',
+            operator: 'equals',
+            value: {type: 'integer', value: 5},
+          }}
+          mode="edit"
+          onSave={onSave}
+          onCancel={() => {}}
+        />
+      );
+    }
+
+    render(<NumericValueHarness />);
+    const input = screen.getByRole('spinbutton');
+    fireEvent.focus(input);
+    fireEvent.input(input, {target: {value: '1·234'}});
+    fireEvent.keyDown(input, {key: 'Enter'});
+
+    expect(onSave).not.toHaveBeenCalled();
+    expect(input).toHaveValue('1·234');
+  });
+
   it('does not save/close on a composing Enter while typing a filter value (#4828)', () => {
     const onSave = vi.fn();
     const onCancel = vi.fn();
@@ -326,3 +415,202 @@ describe('PowerSearch', () => {
     expect(onSave).toHaveBeenCalledTimes(1);
   });
 });
+
+// =============================================================================
+// Narrow-width layout (#4761)
+// =============================================================================
+
+// jsdom performs no real layout (and never matches @container conditions), so
+// these tests assert the declarations that produce the narrow-width behavior
+// rather than measured geometry, via StyleX probe classes: one deterministic
+// atomic class per property/value/condition, so an element carries a probe's
+// classes exactly when it has the same declaration. The dev debug class
+// (contains "__") is excluded.
+const CHIP_ROW_COLLAPSE = '@container (max-width: 399px)';
+
+const probe = stylex.create({
+  responsiveLayerMinWidth: {
+    minWidth: `min(400px, calc(100% - ${spacingVars['--spacing-4']}))`,
+  },
+  fixedLayerMinWidth: {minWidth: 400},
+  queryContainer: {containerType: 'inline-size'},
+  responsiveWrap: {
+    flexWrap: {default: 'nowrap', [CHIP_ROW_COLLAPSE]: 'wrap'},
+  },
+  cellMaxWidth: {maxWidth: '100%'},
+  nestedFieldCellWidth: {width: 200},
+});
+
+function atomicClasses(style: (typeof probe)[keyof typeof probe]): string[] {
+  const {className = ''} = stylex.props(style);
+  const classes = className
+    .split(' ')
+    .filter(c => c !== '' && !c.includes('__'));
+  // A probe resolving to no atomic classes would make every assertion built
+  // on it vacuous, including the not-toHaveClass loops; fail loudly instead.
+  expect(classes.length).toBeGreaterThan(0);
+  return classes;
+}
+
+function expectProbeClasses(
+  el: HTMLElement,
+  style: (typeof probe)[keyof typeof probe],
+) {
+  for (const cls of atomicClasses(style)) {
+    expect(el).toHaveClass(cls);
+  }
+}
+
+describe('narrow-width layout (#4761)', () => {
+  function EditHarness() {
+    const internalConfig = useInternalConfig(testConfig);
+    return (
+      <PowerSearchEditPopover
+        config={internalConfig}
+        filter={{
+          field: 'status',
+          operator: 'is',
+          value: {type: 'string', value: 'open'},
+        }}
+        mode="edit"
+        onSave={() => {}}
+        onCancel={() => {}}
+      />
+    );
+  }
+
+  function getChipRow(container: HTMLElement): HTMLElement {
+    // Locate the chip row by its collapse declaration, then sanity-check it
+    // really is the row holding the field / operator / value cells.
+    const [rowCls] = atomicClasses(probe.responsiveWrap);
+    const row = container.querySelector(`.${rowCls}`) as HTMLElement;
+    expect(row).not.toBeNull();
+    expect(row).toHaveClass('astryx-stack');
+    expect(row.children).toHaveLength(3);
+    return row;
+  }
+
+  it('popover root establishes the container the collapse query measures', () => {
+    const {container} = render(<EditHarness />);
+
+    // Without inline-size containment on the root, no @container condition
+    // in this file can match and the chip rows would never wrap.
+    const root = container.firstElementChild as HTMLElement;
+    expect(root).not.toBeNull();
+    expectProbeClasses(root, probe.queryContainer);
+  });
+
+  it('filter chip row wraps below the collapse width instead of overflowing', () => {
+    const {container} = render(<EditHarness />);
+
+    const row = getChipRow(container);
+    expectProbeClasses(row, probe.responsiveWrap);
+  });
+
+  it('operator cell is capped at the row width', () => {
+    const {container} = render(<EditHarness />);
+
+    // Capped so a long translated operator label truncates inside the
+    // Selector trigger instead of pushing the row wider than the popover.
+    const operatorCell = getChipRow(container).children[1] as HTMLElement;
+    expectProbeClasses(operatorCell, probe.cellMaxWidth);
+  });
+
+  it('nested sub-filter rows wrap instead of overflowing on one line', () => {
+    const nestedConfig: PowerSearchConfig = {
+      name: 'test-nested',
+      fields: [
+        {
+          key: 'group',
+          label: 'Group',
+          operators: [
+            {key: 'all_of', label: 'all of', value: {type: 'nested'}},
+          ],
+        },
+        {
+          key: 'status',
+          label: 'Status',
+          operators: [{key: 'is', label: 'is', value: {type: 'string'}}],
+        },
+      ],
+    };
+
+    function NestedHarness() {
+      const internalConfig = useInternalConfig(nestedConfig);
+      return (
+        <PowerSearchEditPopover
+          config={internalConfig}
+          filter={{
+            field: 'group',
+            operator: 'all_of',
+            value: {
+              type: 'nested',
+              value: [
+                {
+                  field: 'status',
+                  operator: 'is',
+                  value: {type: 'string', value: 'open'},
+                },
+              ],
+            },
+          }}
+          mode="edit"
+          onSave={() => {}}
+          onCancel={() => {}}
+        />
+      );
+    }
+
+    const {container} = render(<NestedHarness />);
+
+    // Locate the sub-filter row through its fixed-width field cell.
+    const [cellCls] = atomicClasses(probe.nestedFieldCellWidth);
+    const fieldCell = container.querySelector(`.${cellCls}`) as HTMLElement;
+    expect(fieldCell).not.toBeNull();
+    const row = fieldCell.parentElement as HTMLElement;
+    expect(row).toHaveClass('astryx-stack');
+    expectProbeClasses(row, probe.responsiveWrap);
+
+    // The fixed-width cells are capped so they cannot clip in containers
+    // narrower than their design width (or under deep TreeList indentation).
+    expectProbeClasses(fieldCell, probe.cellMaxWidth);
+    const operatorCell = row.children[1] as HTMLElement;
+    expectProbeClasses(operatorCell, probe.cellMaxWidth);
+  });
+
+  it('edit popover layer yields to viewports narrower than its 400px floor', () => {
+    const filters: PowerSearchFilter[] = [
+      {field: 'status', operator: 'is', value: {type: 'string', value: 'open'}},
+    ];
+
+    function Harness() {
+      const [currentFilters, setCurrentFilters] = useState(filters);
+      return (
+        <PowerSearch
+          config={testConfig}
+          filters={currentFilters}
+          onChange={newFilters => setCurrentFilters([...newFilters])}
+        />
+      );
+    }
+
+    render(<Harness />);
+
+    act(() => {
+      fireEvent.click(screen.getByText('Status: is'));
+      flushRAF();
+    });
+
+    const layer = screen
+      .getByText('Cancel')
+      .closest('[popover]') as HTMLElement;
+    expect(layer).not.toBeNull();
+
+    // The fixed 400px floor is replaced by one clamped to the available
+    // inline space, so the popover never opens wider than the screen.
+    expectProbeClasses(layer, probe.responsiveLayerMinWidth);
+    for (const cls of atomicClasses(probe.fixedLayerMinWidth)) {
+      expect(layer).not.toHaveClass(cls);
+    }
+  });
+});