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

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

package/dist/NumberInput/numberParser.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @file numberParser.ts
+ * @input Text a person typed or pasted, plus the resolved BCP 47 locale
+ * @output Exports parseLocaleNumber and formatEditableNumber
+ * @position Internal to NumberInput; not part of the public surface
+ *
+ * People paste numbers out of spreadsheets, and a spreadsheet writes them
+ * grouped, signed, and decorated. This reads those back. Everything locale
+ * specific — the grouping and decimal separators, the group sizes, the digit
+ * script — is derived from Intl and Unicode rather than a table, and text that
+ * no reading fits returns null so the field stays visibly invalid instead of
+ * committing a guess. Where both readings are well formed the locale's wins,
+ * the way utils/dateParser.ts settles an ambiguous date by locale preference.
+ * Grouping is well formed only when every group fits the locale's own sizes:
+ * the last exactly the primary size, each inner one exactly the secondary, the
+ * first no longer than that. So de-DE `1.234` is 1234, while `1.2345` (last
+ * group too long) and `1234.567` (too much ahead of it) keep the full stop as
+ * a decimal point. Groups of three fit every locale, so a separator repeated
+ * with three-digit groups is grouping in all of them and `1,234,567` reads the
+ * same everywhere; for a space or apostrophe, which no locale writes as a
+ * decimal point, one occurrence is enough, so en-US `1 234` is 1234.
+ *
+ * That paragraph is executable: numberParser.docblock.test.ts implements it as
+ * code, quote by quote, and fails when the parser and the words disagree.
+ *
+ * Which characters may separate digits at all is the one thing that is NOT
+ * read off the input: SEPARATOR_CHARS below is a bounded alphabet, the same
+ * shape utils/dateParser.ts uses for its `[-/.]` date separators.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/NumberInput/NumberInput.tsx
+ * - /packages/core/src/NumberInput/numberParser.test.ts
+ * - /packages/core/src/NumberInput/numberParser.docblock.test.ts
+ */
+import type { Locale } from '../i18n';
+/**
+ * Read a number out of text the way a person in `locale` writes one: their
+ * grouping and decimal separators, their group sizes, their digit script, an
+ * optional currency symbol, and the shapes a spreadsheet pastes.
+ *
+ * Returns null rather than a guess. Grouping is validated, so en-US `1,23` —
+ * a comma that is neither a decimal point nor a well-formed group — is not
+ * silently read as 123, and neither is a number written for another locale.
+ * Only the characters some locale writes between digits count as separators,
+ * so `123-456-789` is not a number at all.
+ *
+ * @example
+ * ```
+ * parseLocaleNumber('1,234,234,234', 'en-US')  // 1234234234
+ * parseLocaleNumber('1,234,234,234', 'de-DE')  // 1234234234
+ * parseLocaleNumber('1,5', 'de-DE')            // 1.5
+ * parseLocaleNumber('1.5', 'de-DE')            // 1.5
+ * parseLocaleNumber('1,5', 'en-US')            // null
+ * parseLocaleNumber('123-456-789', 'en-US')    // null
+ * ```
+ */
+export declare function parseLocaleNumber(text: string, locale?: Locale): number | null;
+/**
+ * The text shown while the field is focused: the plain machine number in the
+ * locale's decimal separator, so what a person sees mid-edit is what the
+ * parser reads back on blur.
+ */
+export declare function formatEditableNumber(value: number, locale?: Locale): string;
+//# sourceMappingURL=numberParser.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"numberParser.d.ts","sourceRoot":"","sources":["../../src/NumberInput/numberParser.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAiPpC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,MAAM,EACZ,MAAM,CAAC,EAAE,MAAM,GACd,MAAM,GAAG,IAAI,CA8Ef;AAaD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAI3E"}