@astryxdesign/core 0.4.7 → 0.5.0-canary.055e75f

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);
+    }
+  });
+});

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';
 
@@ -178,6 +182,70 @@ describe('StringEditor (#1103)', () => {
   });
 });
 
+describe('numeric editor commit timing', () => {
+  it('saves the committed number when Enter finishes the edit', () => {
+    const onChange = vi.fn();
+    const onEnter = vi.fn();
+    render(
+      <PowerSearchValueEditor
+        operatorValue={{type: 'integer'}}
+        filterValue={{type: 'integer', value: 5}}
+        onChange={onChange}
+        onEnter={onEnter}
+        config={stubConfig}
+      />,
+    );
+    const input = screen.getByRole('spinbutton');
+    fireEvent.focus(input);
+    fireEvent.input(input, {target: {value: '42'}});
+    fireEvent.keyDown(input, {key: 'Enter'});
+
+    expect(onChange).toHaveBeenLastCalledWith(
+      {type: 'integer', value: 42},
+      true,
+    );
+    expect(onEnter).not.toHaveBeenCalled();
+  });
+
+  it('does not save an invalid numeric draft on Enter', () => {
+    const onChange = vi.fn();
+    const onEnter = vi.fn();
+    render(
+      <PowerSearchValueEditor
+        operatorValue={{type: 'integer'}}
+        filterValue={{type: 'integer', value: 5}}
+        onChange={onChange}
+        onEnter={onEnter}
+        config={stubConfig}
+      />,
+    );
+    const input = screen.getByRole('spinbutton');
+    fireEvent.focus(input);
+    fireEvent.input(input, {target: {value: '1·234'}});
+    fireEvent.keyDown(input, {key: 'Enter'});
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onEnter).not.toHaveBeenCalled();
+    expect(input).toHaveValue('1·234');
+  });
+
+  it('keeps the existing Enter callback when there is no pending edit', () => {
+    const onEnter = vi.fn();
+    render(
+      <PowerSearchValueEditor
+        operatorValue={{type: 'float'}}
+        filterValue={{type: 'float', value: 1.5}}
+        onChange={() => {}}
+        onEnter={onEnter}
+        config={stubConfig}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole('spinbutton'), {key: 'Enter'});
+    expect(onEnter).toHaveBeenCalledTimes(1);
+  });
+});
+
 // =============================================================================
 // #1106 — EntityListEditor drops photo, no renderItem
 // =============================================================================
@@ -404,3 +472,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});
+  });
+});