@open-mercato/ui 0.7.1-develop.7153.1.7145d295e6 → 0.7.1-develop.7170.1.d95074d7ba

package/dist/backend/CrudForm.js

@@ -71,7 +71,7 @@ import {
 import { loadGeneratedFieldRegistrations } from "./fields/registry.js";
 import { isDefVisible } from "./utils/customFieldDefs.js";
 import { buildFormFieldFromCustomFieldDef } from "./utils/customFieldForms.js";
-import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { useT, useOptionalLocale } from "@open-mercato/shared/lib/i18n/context";
 import { TagsInput } from "./inputs/TagsInput.js";
 import { ComboboxInput } from "./inputs/ComboboxInput.js";
 import { format } from "date-fns/format";
@@ -90,6 +90,7 @@ import { useInjectionSpotEvents, InjectionSpot, useInjectionWidgets } from "./in
 import { dispatchBackendMutationError } from "./injection/mutationEvents.js";
 import { VersionHistoryAction } from "./version-history/VersionHistoryAction.js";
 import { parseBooleanWithDefault } from "@open-mercato/shared/lib/boolean";
+import { parseLocaleNumber, resolveLocaleNumberSeparators } from "@open-mercato/shared/lib/number";
 import { cn } from "@open-mercato/shared/lib/utils";
 import { createLogger } from "@open-mercato/shared/lib/logger";
 import { useInjectionDataWidgets } from "./injection/useInjectionDataWidgets.js";
@@ -3156,14 +3157,21 @@ function NumberInput({
   autoFocus,
   onSubmit
 }) {
+  const locale = useOptionalLocale();
   const serializedValue = value !== void 0 && value !== null ? String(value) : "";
   const [local, setLocal] = React.useState(serializedValue);
   const isFocusedRef = React.useRef(false);
+  const parse = React.useCallback(
+    (raw) => {
+      if (raw === "") return void 0;
+      return parseLocaleNumber(raw, locale) ?? void 0;
+    },
+    [locale]
+  );
   const commitIfChanged = React.useCallback(() => {
     if (local === serializedValue) return;
-    const numValue = local === "" ? void 0 : Number(local);
-    onChange(numValue);
-  }, [local, onChange, serializedValue]);
+    onChange(parse(local));
+  }, [local, onChange, parse, serializedValue]);
   React.useEffect(() => {
     if (!isFocusedRef.current) {
       setLocal(serializedValue);
@@ -3172,16 +3180,24 @@ function NumberInput({
   const handleChange = React.useCallback((e) => {
     const next = e.target.value;
     setLocal(next);
-    const numValue = next === "" ? void 0 : Number(next);
-    onChange(numValue);
-  }, [onChange]);
+    onChange(parse(next));
+  }, [onChange, parse]);
   const handleKeyDown = React.useCallback((e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       commitIfChanged();
       onSubmit?.();
+      return;
+    }
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      e.preventDefault();
+      const base = parse(local) ?? 0;
+      const stepped = Number((base + (e.key === "ArrowUp" ? 1 : -1)).toFixed(10));
+      const { decimal } = resolveLocaleNumberSeparators(locale);
+      setLocal(decimal === "." ? String(stepped) : String(stepped).replace(".", decimal));
+      onChange(stepped);
     }
-  }, [commitIfChanged, onSubmit]);
+  }, [commitIfChanged, local, locale, onChange, onSubmit, parse]);
   const handleFocus = React.useCallback(() => {
     isFocusedRef.current = true;
   }, []);
@@ -3189,19 +3205,27 @@ function NumberInput({
     isFocusedRef.current = false;
     commitIfChanged();
   }, [commitIfChanged]);
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      type: "number",
-      placeholder,
-      value: local,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      autoFocus,
-      "data-crud-focus-target": ""
-    }
+  return (
+    // type="text" rather than type="number": the browser sanitizes a type="number" value
+    // against the BROWSER locale, so it discards the separator the app locale displays
+    // before React ever sees it (issue #5552). inputMode keeps the mobile numeric keypad.
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "text",
+        inputMode: "decimal",
+        autoComplete: "off",
+        spellCheck: false,
+        placeholder,
+        value: local,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        autoFocus,
+        "data-crud-focus-target": ""
+      }
+    )
   );
 }
 function TextAreaInput({