@astryxdesign/core 0.4.7 → 0.5.0-canary.32a62fd

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';
@@ -326,3 +328,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);
+    }
+  });
+});

package/src/PowerSearch/PowerSearchEditPopover.tsx

@@ -32,13 +32,23 @@ import type {
   OperatorValue,
 } from './types';
 
+// Below the popover layer's 400px floor (see popoverLayerStyles in
+// PowerSearch.tsx) the chip rows collapse from one line to wrapped lines.
+// A container query, not a viewport one, so the rows track the width the
+// popover actually got (#4761).
+const CHIP_ROW_COLLAPSE = '@container (max-width: 399px)';
+
 const styles = stylex.create({
   container: {
     overflow: 'hidden',
+    containerType: 'inline-size',
   },
   content: {
     padding: spacingVars['--spacing-4'],
   },
+  chipRow: {
+    flexWrap: {default: 'nowrap', [CHIP_ROW_COLLAPSE]: 'wrap'},
+  },
   footer: {
     padding: spacingVars['--spacing-3'],
     paddingTop: 0,
@@ -51,6 +61,9 @@ const styles = stylex.create({
   operatorSelector: {
     flexGrow: 1,
     flexShrink: 0,
+    // Long translated operator labels truncate in the Selector trigger
+    // instead of pushing the row wider than the popover (#4761).
+    maxWidth: '100%',
   },
   valueEditor: {
     flexGrow: 2,
@@ -63,10 +76,12 @@ const styles = stylex.create({
   nestedFieldSelector: {
     flexShrink: 0,
     width: 200,
+    maxWidth: '100%',
   },
   nestedOperatorSelector: {
     flexShrink: 0,
     width: 180,
+    maxWidth: '100%',
   },
   nestedRow: {
     width: '100%',
@@ -90,6 +105,8 @@ export interface PowerSearchEditPopoverProps {
   onCancel: () => void;
   /** Label for the save button. @default 'Apply' */
   saveButtonLabel?: string;
+  /** Max suggestions in string and entity value typeaheads. */
+  maxMenuItems?: number;
   /** Whether the filter is read-only. */
   isReadOnly?: boolean;
 }
@@ -232,6 +249,7 @@ interface NestedSubFilterRowProps {
   config: InternalConfig;
   subFilter: EditablePartialFilter;
   onChange: (subFilter: EditablePartialFilter) => void;
+  maxMenuItems?: number;
   isReadOnly: boolean;
 }
 
@@ -239,6 +257,7 @@ function NestedSubFilterRow({
   config,
   subFilter,
   onChange,
+  maxMenuItems,
   isReadOnly,
 }: NestedSubFilterRowProps) {
   const t = useTranslator();
@@ -309,7 +328,7 @@ function NestedSubFilterRow({
   );
 
   return (
-    <HStack gap={2} vAlign="center">
+    <HStack gap={2} vAlign="center" xstyle={styles.chipRow}>
       <div {...stylex.props(styles.nestedFieldSelector)}>
         <Selector
           label={t('@astryx.powersearch.editor.field')}
@@ -341,6 +360,7 @@ function NestedSubFilterRow({
             filterValue={subFilter.value}
             onChange={handleValueChange}
             config={config}
+            maxMenuItems={maxMenuItems}
             isDisabled={isReadOnly}
           />
         </div>
@@ -359,6 +379,7 @@ interface NestedEditorProps {
   operatorOptions: {value: string; label: string}[];
   onOperatorChange: (operatorKey: string) => void;
   onPartialFilterChange: (filter: PartialFilter) => void;
+  maxMenuItems?: number;
   isReadOnly: boolean;
 }
 
@@ -368,6 +389,7 @@ function NestedEditor({
   operatorOptions,
   onOperatorChange,
   onPartialFilterChange,
+  maxMenuItems,
   isReadOnly,
 }: NestedEditorProps) {
   const t = useTranslator();
@@ -489,6 +511,7 @@ function NestedEditor({
               config={config}
               subFilter={sf}
               onChange={updated => handleUpdate(itemPath, updated)}
+              maxMenuItems={maxMenuItems}
               isReadOnly={isReadOnly}
             />
           ),
@@ -515,6 +538,7 @@ function NestedEditor({
             config={config}
             subFilter={sf}
             onChange={updated => handleUpdate(itemPath, updated)}
+            maxMenuItems={maxMenuItems}
             isReadOnly={isReadOnly}
           />
         ),
@@ -593,6 +617,7 @@ export function PowerSearchEditPopover({
   onSave,
   onCancel,
   saveButtonLabel: saveButtonLabelFromProps,
+  maxMenuItems,
   isReadOnly = false,
 }: PowerSearchEditPopoverProps) {
   const t = useTranslator();
@@ -762,6 +787,7 @@ export function PowerSearchEditPopover({
               operatorOptions={operatorOptions}
               onOperatorChange={handleOperatorChange}
               onPartialFilterChange={setPartialFilter}
+              maxMenuItems={maxMenuItems}
               isReadOnly={isReadOnly}
             />
           </VStack>
@@ -802,7 +828,7 @@ export function PowerSearchEditPopover({
   return (
     <div {...stylex.props(styles.container)} onKeyDown={handleKeyDown}>
       <div {...stylex.props(styles.content)}>
-        <HStack gap={2}>
+        <HStack gap={2} xstyle={styles.chipRow}>
           <div {...stylex.props(styles.fieldSelector)}>
             <Selector
               label={t('@astryx.powersearch.editor.field')}
@@ -835,6 +861,7 @@ export function PowerSearchEditPopover({
                 onChange={handleValueChange}
                 onEnter={handleSave}
                 config={config}
+                maxMenuItems={maxMenuItems}
                 isDisabled={isReadOnly}
               />
             </div>

package/src/PowerSearch/PowerSearchValueEditor.test.tsx

@@ -10,7 +10,11 @@
 import {describe, it, expect, vi, beforeAll, afterAll} from 'vitest';
 import {render, screen, fireEvent, act} from '@testing-library/react';
 import {PowerSearchValueEditor} from './PowerSearchValueEditor';
-import type {FilterValueEntityList, PowerSearchEntity} from './types';
+import type {
+  FilterValueEntityList,
+  OperatorValue,
+  PowerSearchEntity,
+} from './types';
 import type {InternalConfig} from './useInternalConfig';
 import type {SearchableItem, SearchSource} from '../Typeahead/types';
 
@@ -404,3 +408,45 @@ describe('StringListEditor (#1107)', () => {
     expect(screen.getByRole('combobox')).toBeInTheDocument();
   });
 });
+
+describe('maxMenuItems', () => {
+  const source = createSearchSource(
+    Array.from({length: 6}, (_, index) => ({
+      id: `option-${index}`,
+      label: `Option ${index}`,
+    })),
+  );
+
+  async function expectCapped(operatorValue: OperatorValue) {
+    render(
+      <PowerSearchValueEditor
+        operatorValue={operatorValue}
+        filterValue={undefined}
+        onChange={vi.fn()}
+        config={stubConfig}
+        maxMenuItems={2}
+      />,
+    );
+
+    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(2);
+  }
+
+  it('caps string suggestions', async () => {
+    await expectCapped({type: 'string', searchSource: source});
+  });
+
+  it('caps string-list suggestions', async () => {
+    await expectCapped({type: 'string_list', searchSource: source});
+  });
+
+  it('caps entity-list suggestions', async () => {
+    await expectCapped({type: 'entity_list', searchSource: source});
+  });
+});

package/src/PowerSearch/PowerSearchValueEditor.tsx

@@ -40,6 +40,8 @@ export interface PowerSearchValueEditorProps {
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
   onEnter?: () => void;
   config: InternalConfig;
+  /** Max suggestions in string and entity value typeaheads. */
+  maxMenuItems?: number;
   isDisabled?: boolean;
   timezoneID?: string;
 }
@@ -80,11 +82,13 @@ function StringEditor({
   filterValue,
   onChange,
   onEnter: _onEnter,
+  maxMenuItems,
 }: {
   operatorValue: OperatorValue & {type: 'string'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
   onEnter?: () => void;
+  maxMenuItems?: number;
 }) {
   const t = useTranslator();
   const currentValue = filterValue?.type === 'string' ? filterValue.value : '';
@@ -111,6 +115,7 @@ function StringEditor({
         }}
         placeholder={t('@astryx.powersearch.valueEditor.searchPlaceholder')}
         debounceMs={150}
+        maxMenuItems={maxMenuItems}
       />
     );
   }
@@ -132,10 +137,12 @@ function StringListEditor({
   operatorValue,
   filterValue,
   onChange,
+  maxMenuItems,
 }: {
   operatorValue: OperatorValue & {type: 'string_list'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
+  maxMenuItems?: number;
 }) {
   const t = useTranslator();
   const currentValue: SearchableItem[] = useMemo(() => {
@@ -176,6 +183,7 @@ function StringListEditor({
       placeholder={t('@astryx.powersearch.valueEditor.addValuesPlaceholder')}
       debounceMs={operatorValue.searchSource ? 150 : 0}
       hasCreate={hasCreate}
+      maxMenuItems={maxMenuItems}
     />
   );
 }
@@ -537,10 +545,12 @@ function EntityListEditor({
   operatorValue,
   filterValue,
   onChange,
+  maxMenuItems,
 }: {
   operatorValue: OperatorValue & {type: 'entity_list'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
+  maxMenuItems?: number;
 }) {
   const t = useTranslator();
   const source = useMemo<SearchSource<SearchableItem>>(() => {
@@ -588,6 +598,7 @@ function EntityListEditor({
       renderItem={operatorValue.renderItem}
       placeholder={t('@astryx.powersearch.valueEditor.searchPlaceholder')}
       debounceMs={operatorValue.searchSource ? 150 : 0}
+      maxMenuItems={maxMenuItems}
     />
   );
 }
@@ -631,6 +642,7 @@ export function PowerSearchValueEditor({
   filterValue,
   onChange,
   onEnter,
+  maxMenuItems,
   isDisabled,
 }: PowerSearchValueEditorProps) {
   switch (operatorValue.type) {
@@ -644,6 +656,7 @@ export function PowerSearchValueEditor({
           filterValue={filterValue}
           onChange={onChange}
           onEnter={onEnter}
+          maxMenuItems={maxMenuItems}
         />
       );
 
@@ -653,6 +666,7 @@ export function PowerSearchValueEditor({
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
+          maxMenuItems={maxMenuItems}
         />
       );
 
@@ -734,6 +748,7 @@ export function PowerSearchValueEditor({
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
+          maxMenuItems={maxMenuItems}
         />
       );
 

package/src/PowerSearch/types.ts

@@ -384,6 +384,8 @@ export interface PowerSearchAuxData {
   readonly filterValue?: FilterValue;
   /** Index in the filters array (for editing/removing). */
   readonly filterIndex?: number;
+  /** Section heading for field-browser entries. */
+  readonly group?: string;
 }
 
 export type PowerSearchItem = SearchableItem<PowerSearchAuxData>;

package/src/PowerSearch/usePowerSearchSource.test.ts

@@ -21,10 +21,15 @@ import type {
 // Helpers
 // =============================================================================
 
-function createSource(config: PowerSearchConfig) {
+function createSource(
+  config: PowerSearchConfig,
+  // Uncapped by default so these tests exercise matching and ranking rather
+  // than the typed-result cap, which has its own test below.
+  maxTypedResults: number = Number.POSITIVE_INFINITY,
+) {
   const {result} = renderHook(() => {
     const internal = useInternalConfig(config);
-    return usePowerSearchSource(internal);
+    return usePowerSearchSource(internal, maxTypedResults);
   });
   return result.current;
 }
@@ -92,6 +97,27 @@ const configWithContentSearch: PowerSearchConfig = {
   contentSearchFieldKey: 'title',
 };
 
+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}],
+  };
+}
+
 // =============================================================================
 // Tests
 // =============================================================================
@@ -125,6 +151,21 @@ describe('usePowerSearchSource', () => {
       const source = createSource(baseConfig);
       expect(syncSearch(source, '')).toEqual(syncBootstrap(source));
     });
+
+    it('orders ungrouped fields before named groups', () => {
+      const items = syncBootstrap(createSource(groupedConfig));
+      expect(items.map(item => item.label)).toEqual([
+        'Field Plain A',
+        'Field Plain B',
+        'Field Team A',
+        'Field Team B',
+        'Field Time A',
+        'Field Time B',
+      ]);
+      expect(
+        items.map(item => (item.auxiliaryData as PowerSearchAuxData).group),
+      ).toEqual([undefined, undefined, 'Team', 'Team', 'Time', 'Time']);
+    });
   });
 
   describe('search (with query)', () => {
@@ -176,6 +217,23 @@ describe('usePowerSearchSource', () => {
       const aux = isItem?.auxiliaryData as PowerSearchAuxData;
       expect(aux.operatorKey).toBe('is');
     });
+
+    it('leaves ranked results flat and in relevance order', () => {
+      const results = syncSearch(createSource(groupedConfig), 'field');
+      expect(results.slice(0, 6).map(item => item.label)).toEqual([
+        'Field Team A',
+        'Field Team A is',
+        'Field Plain A',
+        'Field Plain A is',
+        'Field Time A',
+        'Field Time A is',
+      ]);
+      expect(
+        results.every(
+          item => (item.auxiliaryData as PowerSearchAuxData).group == null,
+        ),
+      ).toBe(true);
+    });
   });
 
   describe('contentSearchFieldKey', () => {
@@ -539,3 +597,25 @@ describe('usePowerSearchSource', () => {
     });
   });
 });
+
+describe('typed-result cap', () => {
+  const manyFields: PowerSearchConfig = {
+    name: 'many',
+    fields: Array.from({length: 25}, (_, i) => ({
+      key: `field_${i}`,
+      label: `Zebra ${String(i).padStart(2, '0')}`,
+      operators: [{key: 'is', label: 'is', value: {type: 'string'} as const}],
+    })),
+  };
+
+  it('caps results for a typed query', () => {
+    const source = createSource(manyFields, 10);
+    expect(source.search('zebra')).toHaveLength(10);
+  });
+
+  it('never caps the field list for an empty query', () => {
+    const source = createSource(manyFields, 10);
+    expect(syncBootstrap(source)).toHaveLength(25);
+    expect(source.search('')).toHaveLength(25);
+  });
+});

package/src/PowerSearch/usePowerSearchSource.ts

@@ -14,13 +14,20 @@
 
 import {useMemo} from 'react';
 import type {SearchSource} from '../Typeahead/types';
+import {groupItems} from '../utils';
 import {useTranslator} from '../i18n';
 import {resolveOperatorLabel} from './resolveOperatorLabel';
 import type {InternalConfig} from './useInternalConfig';
 import type {PowerSearchItem, PowerSearchOperator, FilterValue} from './types';
 
+/**
+ * @param maxTypedResults Cap applied to ranked results for a non-empty query.
+ *   The source never truncates empty-query browsing; PowerSearch's view applies
+ *   a separate 1,000-row safety ceiling.
+ */
 export function usePowerSearchSource(
   config: InternalConfig,
+  maxTypedResults: number,
 ): SearchSource<PowerSearchItem> {
   const t = useTranslator();
   return useMemo(() => {
@@ -198,14 +205,14 @@ export function usePowerSearchSource(
           }
         }
 
-        return results;
+        return results.slice(0, maxTypedResults);
       },
 
       bootstrap(): PowerSearchItem[] {
         return allItems;
       },
     };
-  }, [config, t]);
+  }, [config, t, maxTypedResults]);
 }
 
 interface ValueMatch {
@@ -282,9 +289,12 @@ function buildFieldItems(config: InternalConfig): PowerSearchItem[] {
       auxiliaryData: {
         fieldKey: field.key,
         operatorKey: defaultOp?.key,
+        group: field.group,
       },
     });
   }
 
-  return items;
+  return groupItems(items, {ungroupedFirst: true}).flatMap(
+    group => group.items,
+  );
 }