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

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

package/src/PowerSearch/PowerSearchValueEditor.tsx

@@ -12,7 +12,13 @@
  * - /packages/core/src/PowerSearch/index.ts
  */
 
-import React, {useCallback, useMemo} from 'react';
+import React, {
+  useCallback,
+  useMemo,
+  useRef,
+  type FormEvent,
+  type KeyboardEvent,
+} from 'react';
 import type {
   OperatorValue,
   FilterValue,
@@ -27,12 +33,16 @@ import type {ISOTimeString} from '../utils';
 // Lazy import to avoid circular deps — these are all from the same package
 import {TextInput} from '../TextInput';
 import {NumberInput} from '../NumberInput';
+import {
+  resolveNumberInputCommit,
+  type NumberInputCommitDecision,
+} from '../NumberInput/numberInputCommit';
 import {DateInput} from '../DateInput';
 import {TimeInput} from '../TimeInput';
 import {Selector} from '../Selector';
 import {Tokenizer} from '../Tokenizer';
 import {Typeahead} from '../Typeahead';
-import {useTranslator} from '../i18n';
+import {useLocale, useTranslator} from '../i18n';
 
 export interface PowerSearchValueEditorProps {
   operatorValue: OperatorValue;
@@ -40,6 +50,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 +92,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 +125,7 @@ function StringEditor({
         }}
         placeholder={t('@astryx.powersearch.valueEditor.searchPlaceholder')}
         debounceMs={150}
+        maxMenuItems={maxMenuItems}
       />
     );
   }
@@ -132,10 +147,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,31 +193,107 @@ function StringListEditor({
       placeholder={t('@astryx.powersearch.valueEditor.addValuesPlaceholder')}
       debounceMs={operatorValue.searchSource ? 150 : 0}
       hasCreate={hasCreate}
+      maxMenuItems={maxMenuItems}
     />
   );
 }
 
+function useNumberEditorHandlers({
+  valueType,
+  min,
+  max,
+  isIntegerOnly,
+  onChange,
+  onEnter,
+}: {
+  valueType: 'integer' | 'float';
+  min?: number;
+  max?: number;
+  isIntegerOnly: boolean;
+  onChange: (value: FilterValue, shouldSave?: boolean) => void;
+  onEnter?: () => void;
+}) {
+  const locale = useLocale();
+  const pendingDecisionRef = useRef<NumberInputCommitDecision | null>(null);
+  const toFilterValue = useCallback(
+    (value: number): FilterValue =>
+      valueType === 'integer'
+        ? {type: 'integer', value}
+        : {type: 'float', value},
+    [valueType],
+  );
+  const handleChange = useCallback(
+    (value: number) => {
+      onChange(toFilterValue(value));
+    },
+    [onChange, toFilterValue],
+  );
+  const handleFocus = useCallback(() => {
+    pendingDecisionRef.current = null;
+  }, []);
+  const handleInput = useCallback(
+    (event: FormEvent<HTMLElement>) => {
+      pendingDecisionRef.current = resolveNumberInputCommit(
+        (event.currentTarget as HTMLInputElement).value,
+        {min, max, isIntegerOnly, locale, hasClear: false},
+      );
+    },
+    [isIntegerOnly, locale, max, min],
+  );
+  const handleEnter = useCallback(() => {
+    const decision = pendingDecisionRef.current;
+    pendingDecisionRef.current = null;
+    if (decision === null) {
+      onEnter?.();
+    } else if (decision.type === 'commit') {
+      onChange(toFilterValue(decision.value), true);
+    }
+  }, [onChange, onEnter, toFilterValue]);
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Enter') {
+        event.stopPropagation();
+      }
+    },
+    [],
+  );
+
+  return {handleChange, handleEnter, handleFocus, handleInput, handleKeyDown};
+}
+
 function IntegerEditor({
   operatorValue,
   filterValue,
   onChange,
+  onEnter,
 }: {
   operatorValue: OperatorValue & {type: 'integer'};
   filterValue: FilterValue | undefined;
-  onChange: (value: FilterValue) => void;
+  onChange: (value: FilterValue, shouldSave?: boolean) => void;
+  onEnter?: () => void;
 }) {
   const t = useTranslator();
   const currentValue =
     filterValue?.type === 'integer' ? filterValue.value : undefined;
+  const handlers = useNumberEditorHandlers({
+    valueType: 'integer',
+    min: operatorValue.minValue,
+    max: operatorValue.maxValue,
+    isIntegerOnly: true,
+    onChange,
+    onEnter,
+  });
 
   return (
     <NumberInput
       label={t('@astryx.powersearch.valueEditor.value')}
       isLabelHidden
       value={currentValue ?? null}
-      onChange={(value: number) => {
-        onChange({type: 'integer', value});
-      }}
+      onChange={handlers.handleChange}
+      onFocus={handlers.handleFocus}
+      onInput={handlers.handleInput}
+      onEnter={handlers.handleEnter}
+      onKeyDown={handlers.handleKeyDown}
       min={operatorValue.minValue}
       max={operatorValue.maxValue}
       units={operatorValue.units}
@@ -214,23 +307,35 @@ function FloatEditor({
   operatorValue,
   filterValue,
   onChange,
+  onEnter,
 }: {
   operatorValue: OperatorValue & {type: 'float'};
   filterValue: FilterValue | undefined;
-  onChange: (value: FilterValue) => void;
+  onChange: (value: FilterValue, shouldSave?: boolean) => void;
+  onEnter?: () => void;
 }) {
   const t = useTranslator();
   const currentValue =
     filterValue?.type === 'float' ? filterValue.value : undefined;
+  const handlers = useNumberEditorHandlers({
+    valueType: 'float',
+    min: operatorValue.minValue,
+    max: operatorValue.maxValue,
+    isIntegerOnly: false,
+    onChange,
+    onEnter,
+  });
 
   return (
     <NumberInput
       label={t('@astryx.powersearch.valueEditor.value')}
       isLabelHidden
       value={currentValue ?? null}
-      onChange={(value: number) => {
-        onChange({type: 'float', value});
-      }}
+      onChange={handlers.handleChange}
+      onFocus={handlers.handleFocus}
+      onInput={handlers.handleInput}
+      onEnter={handlers.handleEnter}
+      onKeyDown={handlers.handleKeyDown}
       min={operatorValue.minValue}
       max={operatorValue.maxValue}
       units={operatorValue.units}
@@ -537,10 +642,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 +695,7 @@ function EntityListEditor({
       renderItem={operatorValue.renderItem}
       placeholder={t('@astryx.powersearch.valueEditor.searchPlaceholder')}
       debounceMs={operatorValue.searchSource ? 150 : 0}
+      maxMenuItems={maxMenuItems}
     />
   );
 }
@@ -631,6 +739,7 @@ export function PowerSearchValueEditor({
   filterValue,
   onChange,
   onEnter,
+  maxMenuItems,
   isDisabled,
 }: PowerSearchValueEditorProps) {
   switch (operatorValue.type) {
@@ -644,6 +753,7 @@ export function PowerSearchValueEditor({
           filterValue={filterValue}
           onChange={onChange}
           onEnter={onEnter}
+          maxMenuItems={maxMenuItems}
         />
       );
 
@@ -653,6 +763,7 @@ export function PowerSearchValueEditor({
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
+          maxMenuItems={maxMenuItems}
         />
       );
 
@@ -662,6 +773,7 @@ export function PowerSearchValueEditor({
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
+          onEnter={onEnter}
         />
       );
 
@@ -671,6 +783,7 @@ export function PowerSearchValueEditor({
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
+          onEnter={onEnter}
         />
       );
 
@@ -734,6 +847,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);
+  });
+});