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

package/dist/MultiSelector/MultiSelector.js

@@ -275,7 +275,10 @@ export function MultiSelector({
   selectAllLabel: selectAllLabelFromProps,
   hasSearch = false,
   searchPlaceholder: searchPlaceholderFromProps,
+  emptyText: emptyTextFromProps,
+  emptySearchText: emptySearchTextFromProps,
   triggerDisplay = 'count',
+  formatValue,
   maxBadges = 3,
   renderOption,
   indicatorPosition = 'start',
@@ -295,6 +298,8 @@ export function MultiSelector({
   const placeholder = placeholderFromProps ?? t('@astryx.multiSelector.selectPlaceholder');
   const selectAllLabel = selectAllLabelFromProps ?? t('@astryx.multiSelector.selectAll');
   const searchPlaceholder = searchPlaceholderFromProps ?? t('@astryx.multiSelector.searchPlaceholder');
+  const emptyText = emptyTextFromProps ?? t('@astryx.multiSelector.empty');
+  const emptySearchText = emptySearchTextFromProps ?? t('@astryx.multiSelector.emptySearchResults');
   const size = useSize(sizeProp, 'md');
   const effectiveStatusVariant = variant === 'ghost' && statusVariant === 'attached' ? 'detached' : statusVariant;
   const triggerId = useId();
@@ -347,6 +352,13 @@ export function MultiSelector({
   // Announce selection-count changes politely (comboboxes-7 announce path).
   // Toggling options / select-all previously produced no audible feedback.
   const announce = useAnnounce();
+
+  // The panel's empty message is role="presentation" and reaches assistive tech
+  // only through this live region, so the region has to speak whatever the
+  // panel shows. A ReactNode override cannot be spoken; fall back to the
+  // catalog copy for that case rather than announcing nothing.
+  const emptyAnnouncement = typeof emptyText === 'string' ? emptyText : t('@astryx.multiSelector.empty');
+  const emptySearchAnnouncement = typeof emptySearchText === 'string' ? emptySearchText : t('@astryx.multiSelector.emptySearchResults');
   const announceSelection = useCallback(nextValue => {
     const total = selectableItems.length;
     const selectableSet = new Set(selectableItems.map(item => item.value));
@@ -453,11 +465,38 @@ export function MultiSelector({
       announce('');
       return;
     }
+    // While isLoading the panel deliberately shows nothing, so announcing a
+    // result would put a claim in the one channel the screen has gone quiet
+    // for.
+    if (isLoading) {
+      announce('');
+      return;
+    }
     const count = filterOptionsByQuery(selectableItems, nextQuery).length;
-    announce(count === 0 ? t('@astryx.multiSelector.emptySearchResults') : t('@astryx.multiSelector.resultCount', {
+    announce(count === 0 ? emptySearchAnnouncement : t('@astryx.multiSelector.resultCount', {
       count
     }));
-  }, [announce, selectableItems, t]);
+  }, [announce, isLoading, selectableItems, emptySearchAnnouncement, t]);
+
+  // The panel's empty message is role="presentation", so this region is the
+  // only route to assistive tech. It has to watch the STATE rather than the
+  // open event: the panel can become empty either on open or when a fetch
+  // lands with nothing in it, and an open-only announcement leaves the second
+  // case silent while the message sits on screen. The ref makes it fire once
+  // per arrival at that state rather than on every re-render.
+  const announcedEmptyRef = useRef(null);
+  useEffect(() => {
+    const isPanelEmpty = popover.isOpen && !isLoading && searchQuery === '' && selectableItems.length === 0;
+    if (!isPanelEmpty) {
+      announcedEmptyRef.current = null;
+      return;
+    }
+    if (announcedEmptyRef.current === emptyAnnouncement) {
+      return;
+    }
+    announcedEmptyRef.current = emptyAnnouncement;
+    announce(emptyAnnouncement);
+  }, [popover.isOpen, isLoading, searchQuery, selectableItems.length, emptyAnnouncement, announce]);
 
   // Handle toggle
   // Clear all selected values. Shared by the clear button and the keyboard
@@ -576,12 +615,16 @@ export function MultiSelector({
   }, [popover.isOpen, highlightedIndex, getItemId]);
 
   // Build trigger display content
-  const selectedLabels = useMemo(() => {
+  const selectedItems = useMemo(() => {
     return optimisticValue.map(v => {
       const item = selectableItems.find(i => i.value === v);
-      return item?.label ?? v;
+      return {
+        value: v,
+        label: item?.label ?? v
+      };
     });
   }, [optimisticValue, selectableItems]);
+  const selectedLabels = useMemo(() => selectedItems.map(item => item.label), [selectedItems]);
   const renderTriggerContent = useCallback(() => {
     if (optimisticValue.length === 0) {
       return /*#__PURE__*/_jsx("span", {
@@ -593,11 +636,11 @@ export function MultiSelector({
     }
     switch (triggerDisplay) {
       case 'count':
-        return /*#__PURE__*/_jsxs("span", {
+        return /*#__PURE__*/_jsx("span", {
           ...{
             className: "xb3r6kr xlyipyv xuxw1ft"
           },
-          children: [optimisticValue.length, " selected"]
+          children: formatValue?.(selectedItems) ?? `${optimisticValue.length} selected`
         });
       case 'labels':
         {
@@ -608,7 +651,7 @@ export function MultiSelector({
             ...{
               className: "xb3r6kr xlyipyv xuxw1ft"
             },
-            children: text
+            children: formatValue?.(selectedItems) ?? text
           });
         }
       case 'badges':
@@ -631,7 +674,7 @@ export function MultiSelector({
           });
         }
     }
-  }, [optimisticValue, triggerDisplay, selectedLabels, placeholder, maxBadges]);
+  }, [optimisticValue, triggerDisplay, selectedItems, selectedLabels, placeholder, formatValue, maxBadges]);
 
   // Render search input
   const renderSearch = useCallback(() => {
@@ -795,13 +838,16 @@ export function MultiSelector({
     // message out of the listbox's accessibility tree (role="listbox" only
     // permits option/group children); the no-results outcome is announced
     // via the result-count live region instead.
-    if (realItemCount === 0) {
+    // While isLoading the options have not arrived yet, so asserting either
+    // message would be a claim the component cannot make; the trigger's
+    // spinner covers it.
+    if (realItemCount === 0 && !isLoading) {
       elements.push(/*#__PURE__*/_jsx("div", {
         role: "presentation",
         ...mergeProps(themeProps('multi-selector-empty-state'), {
           className: "x1b2ylru x2b8uid xv1l7n4 x9ynric xcr08ib"
         }),
-        children: "No results found"
+        children: searchQuery ? emptySearchText : emptyText
       }, "empty"));
       return elements;
     }
@@ -827,7 +873,13 @@ export function MultiSelector({
         // A standalone divider between groups would orphan itself once its
         // neighbors are filtered out, so skip it while searching.
         if (!isSearching) {
+          // role="listbox" only permits option/group children; the divider
+          // carries no information the options don't, so it's hidden from
+          // the accessibility tree entirely rather than exposing
+          // role="separator" as a disallowed listbox child (axe
+          // aria-required-children).
           elements.push(/*#__PURE__*/_jsx(Divider, {
+            "aria-hidden": "true",
             xstyle: styles.divider
           }, `divider-${i}`));
         }
@@ -866,7 +918,7 @@ export function MultiSelector({
     }
     flushPending();
     return elements;
-  }, [options, renderItem, sortedItems, searchQuery, hasSelectAll]);
+  }, [options, renderItem, sortedItems, searchQuery, hasSelectAll, isLoading, emptyText, emptySearchText]);
 
   // The detached message box renders its own leading status icon, so the
   // on-field icon would duplicate it — keep the chevron indicator instead.

package/dist/MultiSelector/index.d.ts

@@ -3,7 +3,7 @@
  * @output Exports MultiSelector and types
  * @position Public API entry point
  */
-export { MultiSelector, type MultiSelectorProps, type MultiSelectorSize, type MultiSelectorStatusType, } from './MultiSelector';
+export { MultiSelector, type MultiSelectorProps, type MultiSelectorSize, type MultiSelectorStatusType, type MultiSelectorSelectedItem, } from './MultiSelector';
 export type { MultiSelectorOptionType, MultiSelectorOptionData, MultiSelectorDivider, MultiSelectorSection, MultiSelectorStatus, } from './types';
 export { useMultiCombobox } from './hooks';
 //# sourceMappingURL=index.d.ts.map

package/dist/MultiSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/index.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AAEH,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,GAC7B,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/index.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AAEH,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,GAC/B,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC"}

package/dist/NavIcon/NavIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavIcon.d.ts","sourceRoot":"","sources":["../../src/NavIcon/NavIcon.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuB5C,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;OAGG;IACH,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,+BAcd;yBArBe,OAAO"}
+{"version":3,"file":"NavIcon.d.ts","sourceRoot":"","sources":["../../src/NavIcon/NavIcon.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuB5C,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;OAGG;IACH,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,+BAkBd;yBAzBe,OAAO"}

package/dist/NavIcon/NavIcon.js

@@ -67,7 +67,11 @@ export function NavIcon({
 }) {
   return /*#__PURE__*/_jsx("span", {
     ref: ref,
-    ...mergeProps(themeProps('navicon'), stylex.props(styles.base, xstyle), className, style),
+    ...mergeProps(themeProps('nav-icon', undefined, {
+      // `navicon` ran the compound name together; themes styling it keep
+      // working until the next major.
+      legacyNames: ['navicon']
+    }), stylex.props(styles.base, xstyle), className, style),
     ...props,
     children: icon
   });

package/dist/NavMenu/NavHeadingMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavHeadingMenu.d.ts","sourceRoot":"","sources":["../../src/NavMenu/NavHeadingMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIlE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,kBAAkB,CAAC;AAsB1B,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,iEAAiE;IACjE,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,QAAQ,EACR,IAAW,EACX,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,GACtB,EAAE,mBAAmB,qBAiFrB;yBA1Fe,cAAc"}
+{"version":3,"file":"NavHeadingMenu.d.ts","sourceRoot":"","sources":["../../src/NavMenu/NavHeadingMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIlE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,kBAAkB,CAAC;AAuB1B,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,iEAAiE;IACjE,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,QAAQ,EACR,IAAW,EACX,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,GACtB,EAAE,mBAAmB,qBAiFrB;yBA1Fe,cAAc"}

package/dist/NavMenu/NavHeadingMenu.js

@@ -15,11 +15,12 @@ import React, { useCallback, useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
-import { mergeProps, mergeRefs } from "../utils/index.js";
+import { mergeProps } from "../utils/index.js";
 import { useListFocus } from "../hooks/useListFocus.js";
 import { useTypeahead } from "../hooks/useTypeahead.js";
 import { themeProps } from "../utils/themeProps.js";
 import { NavHeadingMenuContext, useNavHeadingCloseContext } from "./NavMenuContext.js";
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   root: {
@@ -125,7 +126,7 @@ export function NavHeadingMenu({
   return /*#__PURE__*/_jsx(NavHeadingMenuContext, {
     value: ctx,
     children: /*#__PURE__*/_jsx("div", {
-      ref: mergeRefs(ref, listRef),
+      ref: useMergedRefs(ref, listRef),
       role: "menu",
       onKeyDown: listKeyDown,
       "data-testid": testId,

package/dist/NumberInput/NumberInput.d.ts

@@ -5,6 +5,8 @@
  * @position Core implementation; consumed by index.ts, tested by NumberInput.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/NumberInput/numberParser.ts (locale-aware parsing)
+ * - /packages/core/src/NumberInput/numberInputCommit.ts (draft commit policy)
  * - /packages/core/src/NumberInput/NumberInput.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/NumberInput/NumberInput.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/NumberInput/index.ts (exports if types change)
@@ -159,10 +161,12 @@ interface NumberInputPropsBase extends Omit<BaseProps, 'onChange' | 'defaultValu
     autoComplete?: string;
     /**
      * The minimum value allowed.
+     * A smaller entry commits at this value on blur or Enter.
      */
     min?: number | null;
     /**
      * The maximum value allowed.
+     * A larger entry commits at this value on blur or Enter.
      */
     max?: number | null;
     /**
@@ -233,7 +237,8 @@ type NumberInputPropsClearable = NumberInputPropsBase & {
 export type NumberInputProps = NumberInputPropsNonClearable | NumberInputPropsClearable;
 /**
  * A number input component for collecting numeric user input.
- * Only calls onChange when the entered value passes validation.
+ * Commits text edits on blur or Enter and only calls onChange when the whole
+ * draft passes validation.
  *
  * @example
  * ```

package/dist/NumberInput/NumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAML,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,EAGL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AA8I5D,QAAA,MAAM,UAAU;;;;;;;;;;EAUd,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,UAAU,CAAC;AAMtD,YAAY,EACV,WAAW,IAAI,iBAAiB,EAChC,eAAe,IAAI,qBAAqB,GACzC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAM9C,UAAU,oBAAqB,SAAQ,IAAI,CACzC,SAAS,EACT,UAAU,GAAG,cAAc,CAC5B;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IAEvB;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED;;;GAGG;AACH,KAAK,4BAA4B,GAAG,oBAAoB,GAAG;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG,oBAAoB,GAAG;IACtD;;;;;;OAMG;IACH,QAAQ,EAAE,IAAI,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAC1B,4BAA4B,GAAG,yBAAyB,CAAC;AAoF3D;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,SAAS,EACT,SAAS,EACT,MAAM,EACN,aAA0B,EAC1B,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAoB,EACpB,QAAQ,EACR,YAAY,EACZ,GAAG,EACH,GAAG,EACH,IAAI,EACJ,WAAW,EACX,cAAqB,EACrB,iBAAyB,EACzB,KAAK,EACL,aAAqB,EACrB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BA2dlB;yBAngBe,WAAW"}

package/dist/NumberInput/NumberInput.js

@@ -9,6 +9,8 @@
  * @position Core implementation; consumed by index.ts, tested by NumberInput.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/NumberInput/numberParser.ts (locale-aware parsing)
+ * - /packages/core/src/NumberInput/numberInputCommit.ts (draft commit policy)
  * - /packages/core/src/NumberInput/NumberInput.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/NumberInput/NumberInput.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/NumberInput/index.ts (exports if types change)
@@ -91,43 +93,15 @@ import { groupStyles } from "../InputGroup/groupStyles.js";
 
 import { isImeKeyEvent, mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { useTranslator } from "../i18n/index.js";
+import { useTranslator, useLocale } from "../i18n/index.js";
+import { formatEditableNumber } from "./numberParser.js";
+import { parseNumberInput, resolveNumberInputCommit } from "./numberInputCommit.js";
 
 /**
  * Without `hasClear`, onChange only receives valid numbers.
  * With `hasClear`, onChange also receives `null` when the user clears the input.
  */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * Parse and validate a string input as a number.
- * Returns null if the input is not a valid number or fails validation.
- */
-function parseNumberInput(input, options) {
-  const trimmed = input.trim();
-  if (trimmed === '' || trimmed === '-') {
-    return null;
-  }
-  const num = Number(trimmed);
-  if (!Number.isFinite(num)) {
-    return null;
-  }
-
-  // Check integer constraint
-  if (options.isIntegerOnly && !Number.isInteger(num)) {
-    return null;
-  }
-
-  // Check min constraint
-  if (options.min != null && num < options.min) {
-    return null;
-  }
-
-  // Check max constraint
-  if (options.max != null && num > options.max) {
-    return null;
-  }
-  return num;
-}
 function getDecimalPlaces(value) {
   const [coefficient, exponentText] = String(value).toLowerCase().split('e');
   const fractionLength = coefficient.split('.')[1]?.length ?? 0;
@@ -181,7 +155,8 @@ function getSteppedValue({
 
 /**
  * A number input component for collecting numeric user input.
- * Only calls onChange when the entered value passes validation.
+ * Commits text edits on blur or Enter and only calls onChange when the whole
+ * draft passes validation.
  *
  * @example
  * ```
@@ -231,6 +206,7 @@ export function NumberInput({
   ...rest
 }) {
   const t = useTranslator();
+  const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({
     isRequired,
     isOptional
@@ -280,6 +256,12 @@ export function NumberInput({
   // The tooltip variant renders no message box; describe the input by the
   // tooltip's content instead so the status is still announced.
   statusTooltipDescribedBy, units ? unitsID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
+  const parseInput = useCallback(text => parseNumberInput(text, {
+    min,
+    max,
+    isIntegerOnly,
+    locale
+  }), [isIntegerOnly, locale, max, min]);
   const formattedValue = useMemo(() => {
     if (value == null) {
       return '';
@@ -296,75 +278,62 @@ export function NumberInput({
     if (value == null) {
       return '';
     }
-    return isFocused ? String(value) : formattedValue;
-  }, [formattedValue, isFocused, pendingInput, value]);
+    return isFocused ? formatEditableNumber(value, locale) : formattedValue;
+  }, [formattedValue, isFocused, locale, pendingInput, value]);
 
   // Check if current pending input is valid (for styling purposes)
   const isInputValid = useMemo(() => {
     if (pendingInput === null || !pendingInput.trim()) {
       return true;
     }
-    return parseNumberInput(pendingInput, {
-      min,
-      max,
-      isIntegerOnly
-    }) !== null;
-  }, [pendingInput, min, max, isIntegerOnly]);
+    return parseInput(pendingInput) !== null;
+  }, [pendingInput, parseInput]);
 
-  // Handle input text change - update immediately if valid
+  // Keep the whole text edit as a draft until an explicit commit boundary.
   const handleInputChange = useCallback(e => {
     // Value can't change while showing a disabled message (the field is
     // read-only and non-native-disabled), but guard the handler too so the
-    // pending value and onChange never fire.
+    // pending value never changes.
     if (isDisabled || isReadOnly) {
       return;
     }
-    const newValue = e.target.value;
-    setPendingInput(newValue);
-
-    // If the input is valid, update immediately
-    const parsed = parseNumberInput(newValue, {
-      min,
-      max,
-      isIntegerOnly
-    });
-    if (parsed !== null && parsed !== value) {
-      onChange(parsed);
-    }
-  }, [value, onChange, min, max, isIntegerOnly, isDisabled, isReadOnly]);
+    setPendingInput(e.target.value);
+  }, [isDisabled, isReadOnly]);
 
   // Handle focus
   const handleFocus = useCallback(e => {
     setIsFocused(true);
     onFocus?.(e);
   }, [onFocus]);
-
-  // Handle blur - validate and clear pending input
-  const handleBlur = useCallback(e => {
-    if (pendingInput !== null) {
-      if (hasClear && pendingInput.trim() === '') {
-        // Keyboard clearing honors the clearable contract: an emptied
-        // input commits null instead of silently reverting on blur.
-        if (value != null) {
-          onChange(null);
-        }
-      } else {
-        const parsed = parseNumberInput(pendingInput, {
-          min,
-          max,
-          isIntegerOnly
-        });
-        if (parsed !== null && parsed !== value) {
-          onChange(parsed);
-        }
+  const commitPendingInput = useCallback(trigger => {
+    if (pendingInput === null) {
+      return;
+    }
+    const decision = resolveNumberInputCommit(pendingInput, {
+      min,
+      max,
+      isIntegerOnly,
+      locale,
+      hasClear: !!hasClear
+    });
+    if (trigger === 'blur' || decision.type === 'commit' && decision.didClamp) {
+      setPendingInput(null);
+    }
+    if (decision.type === 'clear') {
+      if (hasClear && value != null) {
+        onChange(null);
       }
+    } else if (decision.type === 'commit' && decision.value !== value) {
+      onChange(decision.value);
     }
+  }, [hasClear, isIntegerOnly, locale, max, min, onChange, pendingInput, value]);
 
-    // Clear pending input - display will revert to formatted value
-    setPendingInput(null);
+  // Blur ends the edit and displays the resulting committed value.
+  const handleBlur = useCallback(e => {
+    commitPendingInput('blur');
     setIsFocused(false);
     onBlur?.(e);
-  }, [pendingInput, value, onChange, min, max, isIntegerOnly, onBlur, hasClear]);
+  }, [commitPendingInput, onBlur]);
   const valueForStepping = useMemo(() => {
     if (pendingInput === null) {
       return value ?? null;
@@ -372,12 +341,8 @@ export function NumberInput({
     if (pendingInput.trim() === '') {
       return null;
     }
-    return parseNumberInput(pendingInput, {
-      min,
-      max,
-      isIntegerOnly
-    }) ?? value ?? null;
-  }, [isIntegerOnly, max, min, pendingInput, value]);
+    return parseInput(pendingInput) ?? value ?? null;
+  }, [parseInput, pendingInput, value]);
   const getNextValue = useCallback(direction => getSteppedValue({
     currentValue: valueForStepping,
     direction,
@@ -423,29 +388,11 @@ export function NumberInput({
       return;
     }
     if (e.key === 'Enter') {
-      // Validate and commit on Enter
-      if (pendingInput !== null) {
-        if (hasClear && pendingInput.trim() === '') {
-          // Same clearable contract as blur: Enter on an emptied input
-          // commits null instead of reverting.
-          if (value != null) {
-            onChange(null);
-          }
-        } else {
-          const parsed = parseNumberInput(pendingInput, {
-            min,
-            max,
-            isIntegerOnly
-          });
-          if (parsed !== null && parsed !== value) {
-            onChange(parsed);
-          }
-        }
-      }
+      commitPendingInput('Enter');
       onEnter?.();
     }
     onKeyDown?.(e);
-  }, [pendingInput, value, onChange, min, max, isIntegerOnly, onEnter, onKeyDown, hasClear, stepValue]);
+  }, [commitPendingInput, onEnter, onKeyDown, stepValue]);
 
   // React's delegated wheel listener can be passive, so use a native,
   // explicitly non-passive listener to prevent page scrolling only when this
@@ -538,7 +485,10 @@ export function NumberInput({
       autoFocus: hasAutoFocus,
       "data-autofocus": hasAutoFocus || undefined,
       "aria-valuemin": min ?? undefined,
-      "aria-valuemax": max ?? undefined,
+      "aria-valuemax": max ?? undefined
+      // The ARIA value and hidden form input expose the committed value;
+      // pendingInput is still an uncommitted edit and may be invalid.
+      ,
       "aria-valuenow": value ?? undefined,
       "aria-valuetext": value == null || !formatValue ? undefined : formattedValue,
       "aria-describedby": ariaDescribedBy,

package/dist/NumberInput/numberInputCommit.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @file numberInputCommit.ts
+ * @input A NumberInput draft and the field's validation constraints
+ * @output A single commit, clear, or revert decision for the whole draft
+ * @position Shared internal draft validation and commit policy for NumberInput and its live consumers
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/NumberInput/NumberInput.tsx
+ * - /packages/core/src/NumberInput/numberInputCommit.test.ts
+ * - /packages/core/src/Table/plugins/filtering/useTableFiltering.tsx
+ * - /packages/core/src/PowerSearch/PowerSearchValueEditor.tsx
+ */
+import type { Locale } from '../i18n';
+interface NumberInputValidationOptions {
+    min?: number | null;
+    max?: number | null;
+    isIntegerOnly?: boolean;
+    locale?: Locale;
+}
+export type NumberInputCommitDecision = {
+    type: 'commit';
+    value: number;
+    didClamp: boolean;
+} | {
+    type: 'clear';
+} | {
+    type: 'revert';
+};
+export declare function parseNumberInput(input: string, options: NumberInputValidationOptions): number | null;
+export declare function resolveNumberInputCommit(input: string, options: NumberInputValidationOptions & {
+    hasClear: boolean;
+}): NumberInputCommitDecision;
+export {};
+//# sourceMappingURL=numberInputCommit.d.ts.map

package/dist/NumberInput/numberInputCommit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberInputCommit.d.ts","sourceRoot":"","sources":["../../src/NumberInput/numberInputCommit.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAGpC,UAAU,4BAA4B;IACpC,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,yBAAyB,GACjC;IAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GAClD;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC,GACf;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,CAAC;AAqBrB,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,4BAA4B,GACpC,MAAM,GAAG,IAAI,CAYf;AAED,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,4BAA4B,GAAG;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GAC1D,yBAAyB,CAiC3B"}

package/dist/NumberInput/numberInputCommit.js

@@ -0,0 +1,71 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file numberInputCommit.ts
+ * @input A NumberInput draft and the field's validation constraints
+ * @output A single commit, clear, or revert decision for the whole draft
+ * @position Shared internal draft validation and commit policy for NumberInput and its live consumers
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/NumberInput/NumberInput.tsx
+ * - /packages/core/src/NumberInput/numberInputCommit.test.ts
+ * - /packages/core/src/Table/plugins/filtering/useTableFiltering.tsx
+ * - /packages/core/src/PowerSearch/PowerSearchValueEditor.tsx
+ */
+
+import { parseLocaleNumber } from "./numberParser.js";
+function parseNumericInput(input, options) {
+  const trimmed = input.trim();
+  if (trimmed === '') {
+    return null;
+  }
+  const value = parseLocaleNumber(trimmed, options.locale);
+  if (value == null || !Number.isFinite(value)) {
+    return null;
+  }
+  if (options.isIntegerOnly && !Number.isInteger(value)) {
+    return null;
+  }
+  return value;
+}
+export function parseNumberInput(input, options) {
+  const value = parseNumericInput(input, options);
+  if (value === null) {
+    return null;
+  }
+  if (options.min != null && value < options.min) {
+    return null;
+  }
+  if (options.max != null && value > options.max) {
+    return null;
+  }
+  return value;
+}
+export function resolveNumberInputCommit(input, options) {
+  if (input.trim() === '') {
+    return options.hasClear ? {
+      type: 'clear'
+    } : {
+      type: 'revert'
+    };
+  }
+  const value = parseNumericInput(input, options);
+  if (value === null) {
+    return {
+      type: 'revert'
+    };
+  }
+  const min = options.min == null ? null : options.isIntegerOnly ? Math.ceil(options.min) : options.min;
+  const max = options.max == null ? null : options.isIntegerOnly ? Math.floor(options.max) : options.max;
+  if (min != null && max != null && min > max) {
+    return {
+      type: 'revert'
+    };
+  }
+  const committedValue = min != null && value < min ? min : max != null && value > max ? max : value;
+  return {
+    type: 'commit',
+    value: committedValue,
+    didClamp: committedValue !== value
+  };
+}