@douglasneuroinformatics/libui 3.7.3 → 3.7.5

package/package.json

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

package/src/components/Form/BooleanField/BooleanFieldCheckbox.tsx

@@ -25,7 +25,7 @@ export const BooleanFieldCheckbox = ({
     <FieldGroup name={name}>
       <FieldGroup.Row>
         <Checkbox
-          checked={value}
+          checked={Boolean(value)}
           disabled={disabled || readOnly}
           id={name}
           name={name}

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

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 /* eslint-disable perfectionist/sort-objects */
 
 import { useEffect, useState } from 'react';
@@ -18,8 +19,8 @@ const $ExampleFormData = z.object({
   booleanRadio: z.boolean().optional(),
   recordArray: z.array(
     z.object({
-      recordArrayStringInput: z.string().optional(),
-      showRecordArrayDynamicField: z.boolean().optional(),
+      recordArrayStringInput: z.string(),
+      showRecordArrayDynamicField: z.boolean(),
       recordArrayDynamicField: z.string().optional()
     })
   ),
@@ -46,6 +47,11 @@ const $ExampleFormData = z.object({
 type ExampleFormSchemaType = typeof $ExampleFormData;
 type ExampleFormData = z.TypeOf<typeof $ExampleFormData>;
 
+const $SimpleExampleFormData = z.object({
+  name: z.string()
+});
+type SimpleExampleFormSchemaType = typeof $SimpleExampleFormData;
+
 export default {
   component: Form,
   decorators: [
@@ -399,6 +405,18 @@ export const WithInitialValues: StoryObj<typeof Form> = {
       numberSlider: 45,
       numberRadio: 3,
       numberSelect: 4,
+      numberRecord: {
+        q1: 1,
+        q2: 2,
+        q3: 3
+      },
+      recordArray: [
+        {
+          recordArrayStringInput: 'A',
+          showRecordArrayDynamicField: true,
+          recordArrayDynamicField: 'B'
+        }
+      ],
       stringSelect: 'a',
       setListbox: new Set(['a', 'b']),
       setSelect: new Set(['c', 'd']),
@@ -420,7 +438,6 @@ export const WithDynamicInitialValues: StoryObj<typeof Form> = {
   decorators: [
     (Story) => {
       const [initialValues, setInitialValues] = useState<FormTypes.PartialNullableData<ExampleFormData>>({});
-
       useEffect(() => {
         setTimeout(() => {
           setInitialValues({
@@ -471,3 +488,20 @@ export const WithDynamicInitialValues: StoryObj<typeof Form> = {
     }
   ]
 };
+
+export const WithPreventReset: StoryObj<typeof Form<SimpleExampleFormSchemaType>> = {
+  args: {
+    content: {
+      name: {
+        kind: 'string',
+        label: 'Name',
+        variant: 'input'
+      }
+    },
+    preventResetValuesOnReset: true,
+    onSubmit: (data) => {
+      alert(JSON.stringify(data, (_key, value) => (value instanceof Set ? [...value] : (value as unknown)), 2));
+    },
+    validationSchema: $SimpleExampleFormData
+  }
+};

package/src/components/Form/Form.tsx

@@ -64,8 +64,9 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
   const { resolvedLanguage, t } = useTranslation('libui');
   const [rootErrors, setRootErrors] = useState<string[]>([]);
   const [errors, setErrors] = useState<FormErrors<TData>>({});
-  const [values, setValues] = useState<PartialFormDataType<TData>>({});
-  const [isInitialSetValuesComplete, setIsInitialSetValuesComplete] = useState(false);
+  const [values, setValues] = useState<PartialFormDataType<TData>>(
+    initialValues ? getInitialValues(initialValues) : {}
+  );
 
   const handleError = (error: z.ZodError<TData>) => {
     const fieldErrors: FormErrors<TData> = {};
@@ -127,17 +128,6 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
     revalidate();
   }, [resolvedLanguage]);
 
-  useEffect(() => {
-    if (initialValues) {
-      setValues(getInitialValues(initialValues));
-    }
-    setIsInitialSetValuesComplete(true);
-  }, [initialValues]);
-
-  if (!isInitialSetValuesComplete) {
-    return null;
-  }
-
   return (
     <form
       autoComplete="off"

package/src/components/Form/NumberRecordField.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 import type {
   NumberRecordFieldValue,
@@ -27,8 +27,13 @@ export const NumberRecordField = <T extends NumberRecordFieldValue = NumberRecor
   setValue: setRecordValue,
   value: recordValue
 }: NumberRecordFieldProps<T>) => {
+  const isFirstRenderRef = useRef(true);
+
   useEffect(() => {
-    setRecordValue({});
+    if ((isFirstRenderRef.current && !recordValue) || !isFirstRenderRef.current) {
+      setRecordValue({});
+    }
+    isFirstRenderRef.current = false;
   }, [options]);
 
   if (!recordValue) {

package/src/components/Form/RecordArrayField.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect } from 'react';
+import { memo, useEffect, useRef } from 'react';
 
 import type { RecordArrayFieldValue, RecordArrayFormField } from '@douglasneuroinformatics/libui-form-types';
 import { MinusCircleIcon, PlusCircleIcon } from 'lucide-react';
@@ -25,12 +25,16 @@ export const RecordArrayField = memo(function RecordArrayField({
   setValue: setArrayValue,
   value: arrayValue
 }: RecordArrayFieldProps) {
+  const isFirstRenderRef = useRef(true);
   const { t } = useTranslation('libui');
 
   const createNewRecord = () => Object.fromEntries(Object.keys(fieldset).map((fieldName) => [fieldName, undefined]));
 
   useEffect(() => {
-    setArrayValue([createNewRecord()]);
+    if ((isFirstRenderRef.current && !arrayValue) || !isFirstRenderRef.current) {
+      setArrayValue([createNewRecord()]);
+    }
+    isFirstRenderRef.current = false;
   }, [fieldset]);
 
   if (!arrayValue) {