@douglasneuroinformatics/libui 3.7.4 → 3.7.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "3.7.4",
+  "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/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()
     })
   ),
@@ -404,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']),
@@ -425,7 +438,6 @@ export const WithDynamicInitialValues: StoryObj<typeof Form> = {
   decorators: [
     (Story) => {
       const [initialValues, setInitialValues] = useState<FormTypes.PartialNullableData<ExampleFormData>>({});
-
       useEffect(() => {
         setTimeout(() => {
           setInitialValues({

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) {