@douglasneuroinformatics/libui 2.9.2 → 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;AAE1B,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,21 +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, min, name, readOnly, setValue, value }) => {
+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 = parseFloat(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 ?? -Infinity) && newValue <= (max ?? Infinity)) {
-            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.2",
+  "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",
@@ -64,8 +64,8 @@
     "zod": "^3.23.6"
   },
   "dependencies": {
-    "@douglasneuroinformatics/libjs": "^0.3.1",
-    "@douglasneuroinformatics/libui-form-types": "^0.10.0",
+    "@douglasneuroinformatics/libjs": "^0.5.0",
+    "@douglasneuroinformatics/libui-form-types": "^0.10.1",
     "@headlessui/tailwindcss": "^0.2.1",
     "@heroicons/react": "^2.1.3",
     "@radix-ui/react-accordion": "^1.1.2",

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

@@ -34,7 +34,7 @@ const $ExampleFormData = z.object({
   stringTextArea: z.string().optional(),
   stringPassword: z.string().optional(),
   stringInput: z.string().optional(),
-  stringRadio: z.enum(['a', 'b', 'c'])
+  stringRadio: z.enum(['a', 'b', 'c']).optional()
 });
 type ExampleFormSchemaType = typeof $ExampleFormData;
 type ExampleFormData = z.TypeOf<typeof $ExampleFormData>;
@@ -79,9 +79,7 @@ const numberFields: FormFields<Pick<ExampleFormData, 'numberInput' | 'numberRadi
     numberInput: {
       description: 'This is a number field',
       kind: 'number',
-      label: 'Input',
-      max: 10,
-      min: 0,
+      label: 'Number Input',
       variant: 'input'
     },
     numberRadio: {
@@ -109,7 +107,7 @@ const numberFields: FormFields<Pick<ExampleFormData, 'numberInput' | 'numberRadi
       description: 'This is a number field',
       kind: 'number',
       variant: 'select',
-      label: 'Select',
+      label: 'Number Select',
       options: {
         1: 'Very Low',
         2: 'Low',
@@ -364,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,5 +1,6 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 
+import { parseNumber } from '@douglasneuroinformatics/libjs';
 import type { NumberFormField } from '@douglasneuroinformatics/libui-form-types';
 import type { Simplify } from 'type-fest';
 
@@ -17,21 +18,31 @@ export const NumberFieldInput = ({
   description,
   error,
   label,
-  max,
-  min,
+  max = Number.MAX_SAFE_INTEGER,
+  min = Number.MIN_SAFE_INTEGER,
   name,
   readOnly,
   setValue,
   value
 }: NumberFieldInputProps) => {
+  const inputValueRef = useRef(value?.toString() ?? '');
+  const [inputKey, setInputKey] = useState(0);
+
   const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-    const newValue = parseFloat(event.target.value);
-    if (Number.isNaN(newValue)) {
-      setValue(undefined);
-    } else if (newValue >= (min ?? -Infinity) && newValue <= (max ?? Infinity)) {
-      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>
@@ -44,7 +55,7 @@ export const NumberFieldInput = ({
         min={min}
         name={name}
         type="text"
-        value={value ?? ''}
+        value={inputValueRef.current}
         onChange={handleChange}
       />
       <FieldGroup.Error error={error} />