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

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

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

package/src/ProgressBar/ProgressBar.doc.mjs

@@ -77,12 +77,30 @@ export const docs = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-progressbar', visualProps: ['variant']},
-      {className: 'astryx-progressbar-fill', visualProps: ['variant']},
-      {className: 'astryx-progressbar-track'},
+      {className: 'astryx-progress-bar', visualProps: ['variant']},
+      {className: 'astryx-progress-bar-fill', visualProps: ['variant']},
+      {className: 'astryx-progress-bar-track'},
+      {
+        className: 'astryx-progress-bar-mark',
+        visualProps: ['variant', 'placement'],
+      },
+      // Still emitted beside the names above, so themes written against
+      // them keep working. Drop in the next major.
+      {
+        className: 'astryx-progressbar',
+        visualProps: ['variant'],
+        deprecatedFor: 'progress-bar',
+      },
+      {
+        className: 'astryx-progressbar-fill',
+        visualProps: ['variant'],
+        deprecatedFor: 'progress-bar-fill',
+      },
+      {className: 'astryx-progressbar-track', deprecatedFor: 'progress-bar-track'},
       {
         className: 'astryx-progressbar-mark',
         visualProps: ['variant', 'placement'],
+        deprecatedFor: 'progress-bar-mark',
       },
     ],
     vars: [
@@ -182,12 +200,30 @@ export const docsZh = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-progressbar', visualProps: ['variant']},
-      {className: 'astryx-progressbar-fill', visualProps: ['variant']},
-      {className: 'astryx-progressbar-track'},
+      {className: 'astryx-progress-bar', visualProps: ['variant']},
+      {className: 'astryx-progress-bar-fill', visualProps: ['variant']},
+      {className: 'astryx-progress-bar-track'},
+      {
+        className: 'astryx-progress-bar-mark',
+        visualProps: ['variant', 'placement'],
+      },
+      // Still emitted beside the names above, so themes written against
+      // them keep working. Drop in the next major.
+      {
+        className: 'astryx-progressbar',
+        visualProps: ['variant'],
+        deprecatedFor: 'progress-bar',
+      },
+      {
+        className: 'astryx-progressbar-fill',
+        visualProps: ['variant'],
+        deprecatedFor: 'progress-bar-fill',
+      },
+      {className: 'astryx-progressbar-track', deprecatedFor: 'progress-bar-track'},
       {
         className: 'astryx-progressbar-mark',
         visualProps: ['variant', 'placement'],
+        deprecatedFor: 'progress-bar-mark',
       },
     ],
     vars: [

package/src/ProgressBar/ProgressBar.test.tsx

@@ -839,3 +839,27 @@ describe('ProgressBar', () => {
     });
   });
 });
+
+describe('ProgressBar theme target names', () => {
+  it('renders the deprecated classes beside the current ones', () => {
+    const {container} = render(
+      <ProgressBar
+        value={50}
+        label="Progress"
+        marks={[{value: 80, label: 'M'}]}
+      />,
+    );
+    expect(container.querySelector('.astryx-progress-bar')).toHaveClass(
+      'astryx-progressbar',
+    );
+    expect(container.querySelector('.astryx-progress-bar-track')).toHaveClass(
+      'astryx-progressbar-track',
+    );
+    expect(container.querySelector('.astryx-progress-bar-fill')).toHaveClass(
+      'astryx-progressbar-fill',
+    );
+    expect(container.querySelector('.astryx-progress-bar-mark')).toHaveClass(
+      'astryx-progressbar-mark',
+    );
+  });
+});

package/src/ProgressBar/ProgressBar.tsx

@@ -479,7 +479,13 @@ export function ProgressBar({
     <div
       ref={ref}
       {...mergeProps(
-        themeProps('progressbar', {variant}),
+        themeProps(
+          'progress-bar',
+          {variant},
+          // `progressbar` ran the compound name together; themes styling it
+          // keep working until the next major.
+          {legacyNames: ['progressbar']},
+        ),
         stylex.props(styles.container, xstyle),
         className,
         style,
@@ -524,13 +530,19 @@ export function ProgressBar({
         aria-labelledby={labelId}
         aria-valuetext={isIndeterminate ? undefined : valueText}
         {...mergeProps(
-          themeProps('progressbar-track'),
+          themeProps('progress-bar-track', undefined, {
+            legacyNames: ['progressbar-track'],
+          }),
           stylex.props(styles.track, isIndeterminate && styles.trackClipped),
         )}>
         {isIndeterminate ? (
           <div
             {...mergeProps(
-              themeProps('progressbar-fill', {variant: fillVariant}),
+              themeProps(
+                'progress-bar-fill',
+                {variant: fillVariant},
+                {legacyNames: ['progressbar-fill']},
+              ),
               stylex.props(
                 styles.indeterminateFill,
                 variantStyles[fillVariant],
@@ -540,7 +552,11 @@ export function ProgressBar({
         ) : (
           <div
             {...mergeProps(
-              themeProps('progressbar-fill', {variant: fillVariant}),
+              themeProps(
+                'progress-bar-fill',
+                {variant: fillVariant},
+                {legacyNames: ['progressbar-fill']},
+              ),
               stylex.props(styles.fill, variantStyles[fillVariant]),
             )}
             style={{width: `${percentage}%`}}
@@ -569,10 +585,14 @@ export function ProgressBar({
             <span
               tabIndex={0}
               {...mergeProps(
-                themeProps('progressbar-mark', {
-                  variant: fillVariant,
-                  placement: mark.isOnFill ? 'fill' : 'track',
-                }),
+                themeProps(
+                  'progress-bar-mark',
+                  {
+                    variant: fillVariant,
+                    placement: mark.isOnFill ? 'fill' : 'track',
+                  },
+                  {legacyNames: ['progressbar-mark']},
+                ),
                 stylex.props(
                   focusOutlineStyles.focusVisible,
                   styles.mark,

package/src/Resizable/ResizeHandle.tsx

@@ -35,11 +35,12 @@ import {
   spacingVars,
 } from '../theme/tokens.stylex';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
-import {mergeProps, mergeRefs, rtlStyles} from '../utils';
+import {mergeProps, rtlStyles} from '../utils';
 import type {ResizableProps} from './useResizable';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
 
+import {useMergedRefs} from '../hooks/useMergedRefs';
 const KEYBOARD_STEP = 10;
 const KEYBOARD_LARGE_STEP = 50;
 
@@ -549,7 +550,7 @@ export function ResizeHandle({
 
   return (
     <div
-      ref={mergeRefs(ref, handleRef)}
+      ref={useMergedRefs(ref, handleRef)}
       role="separator"
       aria-orientation={isHorizontal ? 'vertical' : 'horizontal'}
       aria-valuenow={ariaValueNow}

package/src/SegmentedControl/SegmentedControl.tsx

@@ -26,11 +26,12 @@ import type {
   SegmentedControlSize,
   SegmentedControlLayout,
 } from './SegmentedControlContext';
-import {mergeProps, mergeRefs, composeEventHandlers} from '../utils';
+import {mergeProps, composeEventHandlers} from '../utils';
 import {useSize} from '../SizeContext/SizeContext';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 
+import {useMergedRefs} from '../hooks/useMergedRefs';
 export interface SegmentedControlProps extends Omit<
   BaseProps<HTMLDivElement>,
   'onChange'
@@ -258,7 +259,7 @@ export function SegmentedControl({
   return (
     <SegmentedControlContext value={contextValue}>
       <div
-        ref={mergeRefs(ref, listRef, disabledMessageTooltip.ref)}
+        ref={useMergedRefs(ref, listRef, disabledMessageTooltip.ref)}
         {...rest}
         role="radiogroup"
         aria-label={label}