@byline/admin 3.20.4 → 3.21.0

package/dist/fields/field-renderer.js

@@ -110,6 +110,8 @@ const FieldRenderer = ({ field, defaultValue: initialDefault, basePath, disableS
                     id: htmlId
                 });
             case 'integer':
+            case 'float':
+            case 'decimal':
                 return /*#__PURE__*/ jsx(NumericalField, {
                     field: hideLabel ? {
                         ...field,

package/dist/fields/numerical/numerical-field.d.ts

@@ -6,13 +6,15 @@
  * Copyright (c) Infonomic Company Limited
  */
 import type { CounterField, DecimalField, FieldComponentSlots, FloatField, IntegerField } from '@byline/core';
+type NumericalValue = string | number | null;
 export declare const NumericalField: ({ field, value, defaultValue, onChange, id, path, components, }: {
     field: IntegerField | FloatField | DecimalField | CounterField;
     value?: string | number | null;
     defaultValue?: string | number | null;
-    onChange?: (value: string) => void;
+    onChange?: (value: NumericalValue) => void;
     id?: string;
     path?: string;
     /** Optional UI component slot overrides from the admin config. */
     components?: FieldComponentSlots;
 }) => import("react").JSX.Element;
+export {};

package/dist/fields/numerical/numerical-field.js

@@ -1,13 +1,39 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { normalizeNumericValue } from "@byline/core";
 import { Input } from "@byline/ui/react";
 import { useFieldError, useFieldValue } from "../../forms/form-context.js";
+const COMPLETE_NUMERIC_RE = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/;
 const NumericalField = ({ field, value, defaultValue, onChange, id, path, components })=>{
     const fieldPath = path ?? field.name;
     const fieldError = useFieldError(fieldPath);
     const fieldValue = useFieldValue(fieldPath);
-    const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
+    const incomingValue = void 0 !== value ? value : void 0 !== fieldValue ? fieldValue : defaultValue ?? null;
     const htmlId = id ?? fieldPath;
-    const displayValue = null == incomingValue ? '' : String(incomingValue);
+    const canonicalDisplay = null == incomingValue ? '' : String(incomingValue);
+    const [displayValue, setDisplayValue] = useState(canonicalDisplay);
+    const [isEditing, setIsEditing] = useState(false);
+    useEffect(()=>{
+        if (!isEditing) setDisplayValue(canonicalDisplay);
+    }, [
+        canonicalDisplay,
+        isEditing
+    ]);
+    const canonicalize = (nextValue)=>{
+        if (null == nextValue || 'string' == typeof nextValue && '' === nextValue.trim()) return null;
+        if ('counter' === field.type) return;
+        if ('string' == typeof nextValue && !COMPLETE_NUMERIC_RE.test(nextValue.trim())) return;
+        try {
+            return normalizeNumericValue(field.type, nextValue, fieldPath);
+        } catch  {
+            return;
+        }
+    };
+    const commit = (nextValue)=>{
+        const canonical = canonicalize(nextValue);
+        if (void 0 !== canonical) onChange?.(canonical);
+        return canonical;
+    };
     const slots = components;
     const CustomLabel = slots?.Label;
     const CustomHelpText = slots?.HelpText;
@@ -35,12 +61,14 @@ const NumericalField = ({ field, value, defaultValue, onChange, id, path, compon
     const renderInput = ()=>{
         if (CustomField) return /*#__PURE__*/ jsx(CustomField, {
             ...slotBaseProps,
-            onChange: (v)=>onChange?.(v),
+            onChange: (nextValue)=>commit(nextValue),
             defaultValue: defaultValue,
             placeholder: field.placeholder
         });
         return /*#__PURE__*/ jsx(Input, {
-            type: "number",
+            type: "text",
+            inputMode: 'integer' === field.type || 'counter' === field.type ? 'numeric' : 'decimal',
+            step: 'integer' === field.type || 'counter' === field.type ? 1 : 'any',
             id: htmlId,
             name: field.name,
             label: suppressInputLabel ? void 0 : field.label,
@@ -48,7 +76,16 @@ const NumericalField = ({ field, value, defaultValue, onChange, id, path, compon
             readOnly: field.readOnly,
             helpText: suppressInputHelpText ? void 0 : field.helpText,
             value: displayValue,
-            onChange: (e)=>onChange?.(e.target.value),
+            onFocus: ()=>setIsEditing(true),
+            onChange: (e)=>{
+                setDisplayValue(e.target.value);
+                commit(e.target.value);
+            },
+            onBlur: ()=>{
+                setIsEditing(false);
+                const canonical = commit(displayValue);
+                setDisplayValue(void 0 === canonical ? canonicalDisplay : canonical?.toString() ?? '');
+            },
             error: null != fieldError,
             errorText: fieldError
         });

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/admin",
   "private": false,
   "license": "MPL-2.0",
-  "version": "3.20.4",
+  "version": "3.21.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -155,10 +155,10 @@
     "react-diff-viewer-continued": "^4.2.2",
     "uuid": "^14.0.1",
     "zod": "^4.4.3",
-    "@byline/auth": "3.20.4",
-    "@byline/core": "3.20.4",
-    "@byline/ui": "3.20.4",
-    "@byline/i18n": "3.20.4"
+    "@byline/auth": "3.21.0",
+    "@byline/ui": "3.21.0",
+    "@byline/i18n": "3.21.0",
+    "@byline/core": "3.21.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/fields/field-renderer.tsx

@@ -195,6 +195,8 @@ export const FieldRenderer = ({
           />
         )
       case 'integer':
+      case 'float':
+      case 'decimal':
         return (
           <NumericalField
             field={hideLabel ? { ...field, label: undefined } : field}

package/src/fields/numerical/numerical-field.tsx

@@ -6,6 +6,8 @@
  * Copyright (c) Infonomic Company Limited
  */
 
+import { useEffect, useState } from 'react'
+
 import type {
   CounterField,
   DecimalField,
@@ -14,10 +16,15 @@ import type {
   FloatField,
   IntegerField,
 } from '@byline/core'
+import { normalizeNumericValue } from '@byline/core'
 import { Input } from '@byline/ui/react'
 
 import { useFieldError, useFieldValue } from '../../forms/form-context'
 
+type NumericalValue = string | number | null
+
+const COMPLETE_NUMERIC_RE = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/
+
 export const NumericalField = ({
   field,
   value,
@@ -30,7 +37,7 @@ export const NumericalField = ({
   field: IntegerField | FloatField | DecimalField | CounterField
   value?: string | number | null
   defaultValue?: string | number | null
-  onChange?: (value: string) => void
+  onChange?: (value: NumericalValue) => void
   id?: string
   path?: string
   /** Optional UI component slot overrides from the admin config. */
@@ -38,11 +45,36 @@ export const NumericalField = ({
 }) => {
   const fieldPath = path ?? field.name
   const fieldError = useFieldError(fieldPath)
-  const fieldValue = useFieldValue<string | number | undefined>(fieldPath)
-  const incomingValue = value ?? fieldValue ?? defaultValue ?? ''
+  const fieldValue = useFieldValue<NumericalValue | undefined>(fieldPath)
+  const incomingValue =
+    value !== undefined ? value : fieldValue !== undefined ? fieldValue : (defaultValue ?? null)
   const htmlId = id ?? fieldPath
-  const displayValue =
-    incomingValue === undefined || incomingValue === null ? '' : String(incomingValue)
+  const canonicalDisplay = incomingValue == null ? '' : String(incomingValue)
+  const [displayValue, setDisplayValue] = useState(canonicalDisplay)
+  const [isEditing, setIsEditing] = useState(false)
+
+  useEffect(() => {
+    if (!isEditing) setDisplayValue(canonicalDisplay)
+  }, [canonicalDisplay, isEditing])
+
+  const canonicalize = (nextValue: NumericalValue): NumericalValue | undefined => {
+    if (nextValue == null || (typeof nextValue === 'string' && nextValue.trim() === '')) return null
+    if (field.type === 'counter') return undefined
+    if (typeof nextValue === 'string' && !COMPLETE_NUMERIC_RE.test(nextValue.trim())) {
+      return undefined
+    }
+    try {
+      return normalizeNumericValue(field.type, nextValue, fieldPath)
+    } catch {
+      return undefined
+    }
+  }
+
+  const commit = (nextValue: NumericalValue) => {
+    const canonical = canonicalize(nextValue)
+    if (canonical !== undefined) onChange?.(canonical)
+    return canonical
+  }
 
   // Custom component slots (from admin config)
   const slots = components
@@ -79,7 +111,7 @@ export const NumericalField = ({
       return (
         <CustomField
           {...slotBaseProps}
-          onChange={(v: any) => onChange?.(v)}
+          onChange={(nextValue: NumericalValue) => commit(nextValue)}
           defaultValue={defaultValue}
           placeholder={field.placeholder}
         />
@@ -87,7 +119,9 @@ export const NumericalField = ({
     }
     return (
       <Input
-        type="number"
+        type="text"
+        inputMode={field.type === 'integer' || field.type === 'counter' ? 'numeric' : 'decimal'}
+        step={field.type === 'integer' || field.type === 'counter' ? 1 : 'any'}
         id={htmlId}
         name={field.name}
         label={suppressInputLabel ? undefined : field.label}
@@ -95,7 +129,18 @@ export const NumericalField = ({
         readOnly={field.readOnly}
         helpText={suppressInputHelpText ? undefined : field.helpText}
         value={displayValue}
-        onChange={(e) => onChange?.(e.target.value)}
+        onFocus={() => setIsEditing(true)}
+        onChange={(e) => {
+          setDisplayValue(e.target.value)
+          commit(e.target.value)
+        }}
+        onBlur={() => {
+          setIsEditing(false)
+          const canonical = commit(displayValue)
+          setDisplayValue(
+            canonical === undefined ? canonicalDisplay : (canonical?.toString() ?? '')
+          )
+        }}
         error={fieldError != null}
         errorText={fieldError}
       />