@astryxdesign/core 0.5.0 → 0.5.1-canary.046f6ea

package/src/PowerSearch/PowerSearchValueEditor.test.tsx

@@ -182,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
 // =============================================================================

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;
@@ -188,27 +198,102 @@ function StringListEditor({
   );
 }
 
+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}
@@ -222,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}
@@ -676,6 +773,7 @@ export function PowerSearchValueEditor({
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
+          onEnter={onEnter}
         />
       );
 
@@ -685,6 +783,7 @@ export function PowerSearchValueEditor({
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
+          onEnter={onEnter}
         />
       );
 

package/src/PowerSearch/formatFilterValue.test.ts

@@ -1,7 +1,11 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 import {describe, expect, it} from 'vitest';
-import {formatFilterValue} from './formatFilterValue';
+import {
+  formatDateAbsolute,
+  formatDateAbsoluteCompact,
+  formatFilterValue,
+} from './formatFilterValue';
 import type {TranslatorFn} from '../i18n';
 import type {OperatorValue, FilterValue} from './types';
 
@@ -270,6 +274,17 @@ describe('formatFilterValue', () => {
         ),
       ).toBe('date range');
     });
+    it('keeps Gregorian years for locales that default to another calendar', () => {
+      const unixSeconds = Date.parse('2026-08-22T12:00:00Z') / 1000;
+      for (const value of [
+        formatDateAbsolute(unixSeconds, 'th-TH', 'UTC'),
+        formatDateAbsoluteCompact(unixSeconds, 'th-TH'),
+      ]) {
+        expect(value).toContain('2026');
+        expect(value).not.toContain('2569');
+      }
+    });
+
     it('formats an absolute date and truncates to maxLength', () => {
       const full = fmt(
         {type: 'date_absolute'},

package/src/PowerSearch/formatFilterValue.ts

@@ -44,6 +44,7 @@ export function formatDateAbsolute(
     hour: 'numeric',
     minute: '2-digit',
     ...(timezoneID ? {timeZone: timezoneID} : {}),
+    calendar: 'gregory',
   };
   return new Intl.DateTimeFormat(locale, options).format(unixSeconds * 1000);
 }
@@ -63,6 +64,7 @@ export function formatDateAbsoluteCompact(
     year: 'numeric',
     month: 'short',
     day: 'numeric',
+    calendar: 'gregory',
   }).format(unixSeconds * 1000);
 }
 

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/RadioList/RadioList.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'RadioList',
   displayName: 'Radio List',
   group: 'Radio',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["radiolist","radio","radiogroup","radiobutton","optionlist","singlechoice","choicelist"],
   theming: {
     targets: [

package/src/Resizable/Resizable.doc.mjs

@@ -104,7 +104,7 @@ export const docs = {
         {
           name: 'autoSaveId',
           type: 'string',
-          description: 'Key for persisting sizes to localStorage.',
+          description: 'Key for persisting sizes and collapse state to localStorage.',
         },
       ],
     },
@@ -212,7 +212,7 @@ export const docsDense = {
         collapsedSize: 'px threshold triggering collapse during drag',
         snaps: 'px values to snap to during resize',
         shrinkOrder: 'cascade priority: lower number shrinks first',
-        autoSaveId: 'key for persisting sizes to localStorage',
+        autoSaveId: 'key for persisting sizes + collapse state to localStorage',
       },
     },
     {

package/src/Resizable/useResizable.doc.mjs

@@ -38,7 +38,23 @@ export const docs = {
     {
       name: 'autoSaveId',
       type: 'string',
-      description: 'Key for localStorage persistence of size across sessions.',
+      description: 'Key for localStorage persistence of size and collapse state across sessions.',
+    },
+    {
+      name: 'defaultIsCollapsed',
+      type: 'boolean',
+      description: 'Initial collapse state (uncontrolled). A persisted entry wins over it.',
+      default: 'false',
+    },
+    {
+      name: 'isCollapsed',
+      type: 'boolean',
+      description: 'Controlled collapse state. collapse(), expand() and a drag past the threshold then report through onCollapseChange instead of changing state internally.',
+    },
+    {
+      name: 'onCollapseChange',
+      type: '(isCollapsed: boolean) => void',
+      description: 'Called once per collapse state change, via drag or programmatically.',
     },
   ],
   returns: [
@@ -96,7 +112,10 @@ export const docsDense = {
     maxSizePx: 'max size in px.',
     collapsible: 'whether dragging below collapsed threshold collapses region to zero.',
     snaps: 'px values to snap to during drag.',
-    autoSaveId: 'key for localStorage persistence of size across sessions.',
+    autoSaveId: 'key for localStorage persistence of size + collapse state across sessions.',
+    defaultIsCollapsed: 'initial collapse state (uncontrolled); persisted entry wins.',
+    isCollapsed: 'controlled collapse state; collapse()/expand()/drag report instead of mutating.',
+    onCollapseChange: 'called once per collapse state change.',
   },
   returnDescriptions: {
     size: 'current size in px.',