@douglasneuroinformatics/libui 2.9.3 → 2.10.0

package/dist/components/Form/NumberField/NumberFieldInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAM1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAC1C,uBAAuB,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,eAAe,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,CACjF,CAAC;AAEF,eAAO,MAAM,gBAAgB,6EAU1B,qBAAqB,sBA2BvB,CAAC"}
+{"version":3,"file":"NumberFieldInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAGhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAM1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAC1C,uBAAuB,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,eAAe,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,CACjF,CAAC;AAEF,eAAO,MAAM,gBAAgB,6EAU1B,qBAAqB,sBAqCvB,CAAC"}

package/dist/components/Form/NumberField/NumberFieldInput.js

@@ -1,22 +1,30 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import { parseNumber } from '@douglasneuroinformatics/libjs';
 import { Input } from '../../Input/Input.js';
 import { Label } from '../../Label/Label.js';
 import { FieldGroup } from '../FieldGroup/FieldGroup.js';
 export const NumberFieldInput = ({ description, error, label, max = Number.MAX_SAFE_INTEGER, min = Number.MIN_SAFE_INTEGER, name, readOnly, setValue, value }) => {
+    const inputValueRef = useRef(value?.toString() ?? '');
+    const [inputKey, setInputKey] = useState(0);
     const handleChange = (event) => {
-        const newValue = parseNumber(event.target.value);
-        if (Number.isNaN(newValue)) {
-            setValue(undefined);
+        let newValue = value;
+        if (/^[+-]?$/.test(event.target.value)) {
+            newValue = undefined;
+            inputValueRef.current = event.target.value;
         }
-        else if (newValue >= min && newValue <= max) {
-            setValue(newValue);
+        else {
+            const parsedValue = parseNumber(event.target.value);
+            if (parsedValue >= min && parsedValue <= max) {
+                newValue = parsedValue;
+                inputValueRef.current = event.target.value;
+            }
         }
+        value === newValue ? setInputKey(inputKey + 1) : setValue(newValue);
     };
     return (React.createElement(FieldGroup, null,
         React.createElement(FieldGroup.Row, null,
             React.createElement(Label, null, label),
             React.createElement(FieldGroup.Description, { description: description })),
-        React.createElement(Input, { disabled: readOnly, max: max, min: min, name: name, type: "text", value: value ?? '', onChange: handleChange }),
+        React.createElement(Input, { disabled: readOnly, max: max, min: min, name: name, type: "text", value: inputValueRef.current, onChange: handleChange }),
         React.createElement(FieldGroup.Error, { error: error })));
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "2.9.3",
+  "version": "2.10.0",
   "packageManager": "pnpm@9.3.0",
   "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
   "author": "Joshua Unrau",

package/src/components/Form/Form.stories.tsx

@@ -362,3 +362,25 @@ export const ReadOnly: StoryObj<typeof Form<ExampleFormSchemaType>> = {
     validationSchema: $ExampleFormData
   }
 };
+
+export const WithInitialValue: StoryObj<typeof Form> = {
+  args: {
+    content: {
+      numberInput: {
+        kind: 'number',
+        label: 'Number Input',
+        variant: 'input'
+      }
+    },
+    initialValues: {
+      numberInput: 44
+    },
+    onSubmit: (data) => {
+      alert(JSON.stringify(data, null, 2));
+    },
+    preventResetValuesOnReset: true,
+    validationSchema: z.object({
+      numberInput: z.number()
+    })
+  }
+};

package/src/components/Form/NumberField/NumberFieldInput.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 
 import { parseNumber } from '@douglasneuroinformatics/libjs';
 import type { NumberFormField } from '@douglasneuroinformatics/libui-form-types';
@@ -25,14 +25,24 @@ export const NumberFieldInput = ({
   setValue,
   value
 }: NumberFieldInputProps) => {
+  const inputValueRef = useRef(value?.toString() ?? '');
+  const [inputKey, setInputKey] = useState(0);
+
   const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-    const newValue = parseNumber(event.target.value);
-    if (Number.isNaN(newValue)) {
-      setValue(undefined);
-    } else if (newValue >= min && newValue <= max) {
-      setValue(newValue);
+    let newValue: number | undefined = value;
+    if (/^[+-]?$/.test(event.target.value)) {
+      newValue = undefined;
+      inputValueRef.current = event.target.value;
+    } else {
+      const parsedValue = parseNumber(event.target.value);
+      if (parsedValue >= min && parsedValue <= max) {
+        newValue = parsedValue;
+        inputValueRef.current = event.target.value;
+      }
     }
+    value === newValue ? setInputKey(inputKey + 1) : setValue(newValue);
   };
+
   return (
     <FieldGroup>
       <FieldGroup.Row>
@@ -45,7 +55,7 @@ export const NumberFieldInput = ({
         min={min}
         name={name}
         type="text"
-        value={value ?? ''}
+        value={inputValueRef.current}
         onChange={handleChange}
       />
       <FieldGroup.Error error={error} />