@cerebruminc/cerebellum 17.0.0 → 17.0.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # react-component-lib-boilerplate
 
+## [17.0.1](https://github.com/cerebruminc/cerebellum/compare/v17.0.0...v17.0.1) (2026-05-18)
+
+
+### Bug Fixes
+
+* Update rjsform to v6 ([25394f8](https://github.com/cerebruminc/cerebellum/commit/25394f8dad43c2a1773a26fb86c8755ce75eb35f))
+
 ## [17.0.0](https://github.com/cerebruminc/cerebellum/compare/v16.14.0...v17.0.0) (2026-05-18)
 
 

package/jest.config.cjs

@@ -11,8 +11,9 @@ module.exports = {
   roots: ["<rootDir>"],
   moduleDirectories: ["node_modules", "src"],
   testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/lib/"],
-  transformIgnorePatterns: ["/node_modules/(?!(nanoid)/)"],
+  transformIgnorePatterns: ["/node_modules/(?!(nanoid|@rjsf|@x0k)/)"],
   transform: {
+    "^.+\\.tsx?$": ["ts-jest", { tsconfig: "<rootDir>/tsconfig.test.json" }],
     "^.+\\.jsx?$": "<rootDir>/jest.transform.cjs",
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "17.0.0",
+  "version": "17.0.1",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "src/index.ts",
@@ -95,6 +95,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.0.0",
     "lorem-ipsum": "^2.0.4",
+    "msw": "^2.14.6",
     "next": "^15.1.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -130,9 +131,9 @@
   },
   "dependencies": {
     "@react-google-maps/api": "^2.19.2",
-    "@rjsf/core": "^5.10.0",
-    "@rjsf/utils": "^5.10.0",
-    "@rjsf/validator-ajv8": "^5.20.0",
+    "@rjsf/core": "^6.5.3",
+    "@rjsf/utils": "^6.5.3",
+    "@rjsf/validator-ajv8": "^6.5.3",
     "@types/styled-components": "^5.1.34",
     "browser-image-compression": "^2.0.2",
     "country-flag-icons": "^1.5.11",

package/src/components/RJSForm/RJSForm.tsx

@@ -6,7 +6,7 @@ import { noop } from "lodash";
 import { PrimaryButton } from "../Button";
 import { StyleHack } from "./RJSFormStyles";
 import { fields, widgets } from "./const";
-import { ArrayFieldTemplate } from "./fields/ArrayField";
+import { ArrayFieldItemTemplate, ArrayFieldTemplate } from "./fields/ArrayField";
 import { ObjectFieldTemplate } from "./fields/ObjectField";
 import { transformErrors } from "./helpers";
 import { RJSFormType } from "./types";
@@ -35,6 +35,7 @@ export const RJSForm: FC<RJSFormType> = (props) => {
     ...uiSchema,
   };
   const templatesWithDefaults = {
+    ArrayFieldItemTemplate: ArrayFieldItemTemplate,
     ArrayFieldTemplate: ArrayFieldTemplate,
     ObjectFieldTemplate: ObjectFieldTemplate,
     ...templates,

package/src/components/RJSForm/fields/AddressField.tsx

@@ -42,7 +42,7 @@ export function AddressField(props: FieldProps<any, any, any>) {
       };
     }
 
-    onChange(newFormData);
+    onChange(newFormData, []);
   };
 
   return (

package/src/components/RJSForm/fields/ArrayField.tsx

@@ -1,53 +1,49 @@
-import { ArrayFieldTemplateProps } from "@rjsf/utils";
+import { ArrayFieldItemTemplateProps, ArrayFieldTemplateProps } from "@rjsf/utils";
 import { useState } from "react";
 import { AddButton } from "../../../configuredComponents/AddButton";
 import { CaretDown, CaretUp } from "../../Icons";
-import { HeadingH2 } from "../../../const/text";
 import { IconButton } from "../../IconButton";
 import { TextButton } from "../../Button";
 import { TitleGroup } from "../../Form/FormStyles";
 import { AddButtonBox, ArrayBase, ArrayGroup, HeaderButtons } from "../RJSFormStyles";
-import { HandleRemoveProps } from "../types";
 
-export const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
-  const { canAdd, idSchema, items, onAddClick, title } = props;
-  const [removingIndices, setRemovingIndices] = useState<Set<number>>(new Set());
-
-  const displayTitle = title || idSchema.$id.split("_").pop();
-
-  const handleRemove = ({ index }: HandleRemoveProps) => {
-    // Mark this index as "removing"
-    setRemovingIndices((prev) => new Set(Array.from(prev).concat([index])));
+export const ArrayFieldItemTemplate = (props: ArrayFieldItemTemplateProps) => {
+  const { buttonsProps, children } = props;
+  const { hasMoveDown, hasMoveUp, hasRemove, onMoveDownItem, onMoveUpItem, onRemoveItem } = buttonsProps;
+  const [isFading, setIsFading] = useState(false);
 
-    // Wait for the animation to finish, then proceed with the actual removal
+  const handleRemove = () => {
+    setIsFading(true);
     setTimeout(() => {
-      items[index].onDropIndexClick(index)();
-      setRemovingIndices((prev) => {
-        const updated = new Set(Array.from(prev));
-        updated.delete(index);
-        return updated;
-      });
+      onRemoveItem();
     }, 400);
   };
 
+  return (
+    <ArrayGroup $fade={isFading}>
+      <TitleGroup $roomForRemove>
+        <HeaderButtons>
+          {hasMoveDown && <IconButton Icon={CaretDown} onClick={onMoveDownItem} />}
+          {hasMoveUp && <IconButton Icon={CaretUp} onClick={onMoveUpItem} />}
+          {hasRemove && <TextButton onClick={handleRemove} text="Remove" />}
+        </HeaderButtons>
+      </TitleGroup>
+      {children}
+    </ArrayGroup>
+  );
+};
+
+export const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
+  const { canAdd, items, onAddClick, title } = props;
+
   return (
     <ArrayBase>
       {items.map((element, index) => (
-        <ArrayGroup key={element.index} $fade={removingIndices.has(index)}>
-          <TitleGroup $roomForRemove>
-            <HeadingH2 data-sentry-unmask>{`${displayTitle} (${index + 1})`}</HeadingH2>
-            <HeaderButtons>
-              {element.hasMoveDown && <IconButton Icon={CaretDown} onClick={element.onReorderClick(element.index, element.index + 1)} />}
-              {element.hasMoveUp && <IconButton Icon={CaretUp} onClick={element.onReorderClick(element.index, element.index - 1)} />}
-              {element.hasRemove && <TextButton onClick={(event) => handleRemove({ event, index })} text="Remove" />}
-            </HeaderButtons>
-          </TitleGroup>
-          {element.children}
-        </ArrayGroup>
+        <div key={element.key ?? index}>{element}</div>
       ))}
       {canAdd && (
         <AddButtonBox>
-          <AddButton onClick={onAddClick} text={`Add ${displayTitle}`} />
+          <AddButton onClick={onAddClick} text={`Add ${title ?? "item"}`} />
         </AddButtonBox>
       )}
     </ArrayBase>

package/src/components/RJSForm/fields/CheckboxField.tsx

@@ -1,4 +1,4 @@
-import { ErrorSchema, FieldProps, IdSchema, RJSFSchema, Widget } from "@rjsf/utils";
+import { ErrorSchema, FieldPathId, FieldProps, RJSFSchema, Widget } from "@rjsf/utils";
 import React from "react";
 import { CheckboxItem, CheckboxItemType } from "../../CheckboxItem";
 import { FieldBox } from "../RJSFormStyles";
@@ -17,32 +17,32 @@ export type CheckboxFieldUiSchemaOptions = {
 type CheckboxFieldProps = FieldProps & {
   errorSchema?: ErrorSchema;
   formData?: any;
-  idSchema: IdSchema;
   idSeparator?: string;
   uiSchema?: CheckboxFieldUiSchemaOptions;
 };
 
 // This is a wrapper component to convert the types from the widget to be used with the field types
 export const CheckboxWidget: Widget<any, RJSFSchema, any> = (props) => {
-  const { id, value, disabled = false, readonly = false, uiSchema, ...rest } = props;
+  const { id, value, disabled = false, readonly = false, uiSchema, onChange, ...rest } = props;
 
-  const idSchema: IdSchema = { $id: id } as IdSchema;
+  const fieldPathId: FieldPathId = { $id: id, path: [] };
 
   const checkboxFieldProps: CheckboxFieldProps = {
-    idSchema,
+    fieldPathId,
     formData: value,
     disabled,
     readonly,
     uiSchema: uiSchema as CheckboxFieldUiSchemaOptions,
     ...rest,
+    onChange: (newValue: any, _path: any, es?: any, id?: string) => onChange(newValue, es, id),
   };
 
   return <CheckboxField {...checkboxFieldProps} />;
 };
 
 export const CheckboxField: React.FC<CheckboxFieldProps> = (props) => {
-  const { autofocus, disabled, formData, idSchema, label, name, onBlur, onChange, onFocus, schema, uiSchema } = props;
-  const id = idSchema.$id;
+  const { autofocus, disabled, formData, fieldPathId, label, name, onBlur, onChange, onFocus, schema, uiSchema } = props;
+  const id = fieldPathId.$id;
 
   const ui = uiSchema?.["ui:options"] || {};
   const contentPadding = (ui?.padding as string) || "";
@@ -56,7 +56,7 @@ export const CheckboxField: React.FC<CheckboxFieldProps> = (props) => {
         id={id}
         label={label || schema.title || name}
         name={name}
-        onClick={(event) => onChange(event.target.checked)}
+        onClick={(event) => onChange(event.target.checked, [])}
         onBlur={() => onBlur(id, formData)}
         onFocus={() => onFocus(id, formData)}
         value={formData}

package/src/components/RJSForm/fields/CheckboxGroupField.tsx

@@ -1,4 +1,4 @@
-import { ErrorSchema, FieldProps, IdSchema, RJSFSchema, Widget } from "@rjsf/utils";
+import { ErrorSchema, FieldPathId, FieldProps, RJSFSchema, Widget } from "@rjsf/utils";
 import React, { useEffect, useState } from "react";
 import { flushSync } from "react-dom";
 import { CheckboxGroup, CheckboxGroupType } from "../../CheckboxGroup";
@@ -21,32 +21,32 @@ export type CheckboxGroupFieldUiSchemaOptions = {
 type CheckboxGroupFieldProps = FieldProps & {
   errorSchema?: ErrorSchema;
   formData?: any;
-  idSchema: IdSchema;
   idSeparator?: string;
   uiSchema?: CheckboxGroupFieldUiSchemaOptions;
 };
 
 // This is a wrapper component to convert the types from the widget to be used with the field types
 export const CheckboxGroupWidget: Widget<any, RJSFSchema, any> = (props) => {
-  const { id, value, disabled = false, readonly = false, uiSchema, ...rest } = props;
+  const { id, value, disabled = false, readonly = false, uiSchema, onChange, ...rest } = props;
 
-  const idSchema: IdSchema = { $id: id } as IdSchema;
+  const fieldPathId: FieldPathId = { $id: id, path: [] };
 
   const checkboxGroupFieldProps: CheckboxGroupFieldProps = {
-    idSchema,
+    fieldPathId,
     formData: value,
     disabled,
     readonly,
     uiSchema: uiSchema as CheckboxGroupFieldUiSchemaOptions,
     ...rest,
+    onChange: (newValue: any, _path: any, es?: any, id?: string) => onChange(newValue, es, id),
   };
 
   return <CheckboxGroupField {...checkboxGroupFieldProps} />;
 };
 
 export const CheckboxGroupField: React.FC<CheckboxGroupFieldProps> = (props) => {
-  const { autofocus, hideLabel, rawErrors, required, formData, idSchema, label, name, onBlur, onChange, onFocus, schema, uiSchema } = props;
-  const id = idSchema.$id;
+  const { autofocus, hideLabel, rawErrors, required, formData, fieldPathId, label, name, onBlur, onChange, onFocus, schema, uiSchema } = props;
+  const id = fieldPathId.$id;
 
   const [formattedOptions, setFormattedOptions] = useState<SwitchGroupSwitchType[]>([]);
 
@@ -59,7 +59,7 @@ export const CheckboxGroupField: React.FC<CheckboxGroupFieldProps> = (props) =>
     const enumValues = (schema as RJSFSchema)?.enum || (schema?.items as RJSFSchema)?.enum || [];
     let options: SwitchGroupSwitchType[] = [];
     if (!ui.options && enumValues.length > 0) {
-      const enumLabels = ui.enumNames || [];
+      const enumLabels = Array.isArray(ui.enumNames) ? ui.enumNames : [];
       const validEnumValues = enumValues.filter(
         (enumValue: any): enumValue is string | number => typeof enumValue === "string" || typeof enumValue === "number"
       );
@@ -91,7 +91,7 @@ export const CheckboxGroupField: React.FC<CheckboxGroupFieldProps> = (props) =>
             });
 
             flushSync(() => {
-              onChange(updatedValues);
+              onChange(updatedValues, []);
             });
           }
         }}

package/src/components/RJSForm/fields/DateField.tsx

@@ -1,4 +1,4 @@
-import { ErrorSchema, FieldProps, IdSchema, RJSFSchema, UiSchema, Widget } from "@rjsf/utils";
+import { ErrorSchema, FieldPathId, FieldProps, RJSFSchema, UiSchema, Widget } from "@rjsf/utils";
 import dayjs from "dayjs";
 import React, { useEffect } from "react";
 import { DatePicker, DatePickerType, InlineDatePicker } from "../../DatePicker";
@@ -34,24 +34,24 @@ type DateFieldUiSchemaType = UiSchema & DateFieldUiSchemaOptions;
 type DateFieldProps = FieldProps & {
   errorSchema?: ErrorSchema;
   formData?: any;
-  idSchema: IdSchema;
   idSeparator?: string;
   uiSchema?: DateFieldUiSchemaOptions;
 };
 
 // This is a wrapper component to convert the types from the widget to be used with the field types
 export const DateWidget: Widget<any, RJSFSchema, any> = (props) => {
-  const { id, value, disabled = false, readonly = false, uiSchema, ...rest } = props;
+  const { id, value, disabled = false, readonly = false, uiSchema, onChange, ...rest } = props;
 
-  const idSchema: IdSchema = { $id: id } as IdSchema;
+  const fieldPathId: FieldPathId = { $id: id, path: [] };
 
   const dateFieldProps: DateFieldProps = {
-    idSchema,
+    fieldPathId,
     formData: value,
     disabled,
     readonly,
     uiSchema: uiSchema as DateFieldUiSchemaType,
     ...rest,
+    onChange: (newValue: any, _path: any, es?: any, id?: string) => onChange(newValue, es, id),
   };
 
   return <DateField {...dateFieldProps} />;
@@ -62,7 +62,7 @@ export const DateField: React.FC<DateFieldProps> = (props) => {
     disabled,
     formData,
     hideLabel,
-    idSchema,
+    fieldPathId,
     label,
     name,
     onBlur,
@@ -74,7 +74,7 @@ export const DateField: React.FC<DateFieldProps> = (props) => {
     schema,
     uiSchema,
   } = props;
-  const id = idSchema.$id;
+  const id = fieldPathId.$id;
 
   const DatePickerComponent = hideLabel ? InlineDatePicker : DatePicker;
   const ui = uiSchema?.["ui:options"] || {};
@@ -85,7 +85,7 @@ export const DateField: React.FC<DateFieldProps> = (props) => {
   // biome-ignore lint/correctness/useExhaustiveDependencies: skip validation
   useEffect(() => {
     if (formData === "") {
-      onChange(undefined);
+      onChange(undefined, []);
     }
   }, [formData]);
 
@@ -94,7 +94,7 @@ export const DateField: React.FC<DateFieldProps> = (props) => {
 
     if (date !== null && date !== undefined) {
       const stringDate = dayjs.unix(date).format("YYYY-MM-DD");
-      onChange(stringDate, errors, id);
+      onChange(stringDate, [], errors, id);
     }
   };
 

package/src/components/RJSForm/fields/HiddenField.tsx

@@ -1,4 +1,4 @@
-import { ErrorSchema, FieldProps, IdSchema } from "@rjsf/utils";
+import { ErrorSchema, FieldProps } from "@rjsf/utils";
 import React, { ChangeEvent, RefObject } from "react";
 import { RJSFormFields, UIErrorMessages } from "../types";
 
@@ -19,7 +19,6 @@ export type HiddenFieldUiSchemaOptions = {
 type HiddenFieldProps = FieldProps & {
   errorSchema?: ErrorSchema;
   formData?: any;
-  idSchema: IdSchema;
   idSeparator?: string;
   uiSchema?: HiddenFieldUiSchemaOptions;
 };
@@ -28,11 +27,10 @@ export const HiddenField: React.FC<HiddenFieldProps> = (props) => {
   const {
     formData, // Specific to Field
     name,
-    onChange,
     uiSchema,
   } = props;
 
   const ui = (uiSchema?.["ui:options"] as HiddenOptions) || {};
 
-  return <input name={name} onChange={onChange} ref={ui.innerRef} type="hidden" value={formData} />;
+  return <input name={name} ref={ui.innerRef} type="hidden" value={formData} readOnly />;
 };

package/src/components/RJSForm/fields/MaskedInputField.tsx

@@ -1,4 +1,4 @@
-import { ErrorSchema, FieldProps, IdSchema } from "@rjsf/utils";
+import { ErrorSchema, FieldProps } from "@rjsf/utils";
 import React, { useEffect } from "react";
 import { IMask } from "react-imask";
 import { Input, InputType } from "../../Input";
@@ -33,7 +33,6 @@ type MaskedInputFieldUiSchemaOptions = {
 type MaskedInputFieldProps = FieldProps & {
   errorSchema?: ErrorSchema;
   formData?: any;
-  idSchema: IdSchema;
   idSeparator?: string;
   uiSchema?: MaskedInputFieldUiSchemaOptions;
 };
@@ -43,7 +42,7 @@ export const MaskedInputField: React.FC<MaskedInputFieldProps> = (props) => {
     autofocus,
     disabled,
     formData,
-    idSchema,
+    fieldPathId,
     label,
     name,
     onBlur,
@@ -56,7 +55,7 @@ export const MaskedInputField: React.FC<MaskedInputFieldProps> = (props) => {
     hideLabel,
   } = props;
 
-  const id = idSchema.$id;
+  const id = fieldPathId.$id;
   const ui = uiSchema?.["ui:options"] || {};
   const contentPadding = (ui?.padding as string) || "";
   const mask = uiSchema?.["ui:mask"];
@@ -67,7 +66,7 @@ export const MaskedInputField: React.FC<MaskedInputFieldProps> = (props) => {
   // biome-ignore lint/correctness/useExhaustiveDependencies: skip validation
   useEffect(() => {
     if (formData === "") {
-      onChange(undefined);
+      onChange(undefined, []);
     }
   }, [formData]);
 
@@ -99,7 +98,7 @@ export const MaskedInputField: React.FC<MaskedInputFieldProps> = (props) => {
           // Remove special mask characters to apply the correct mask
           const sanitizedValue = (value as string).replace(/[^a-zA-Z0-9]/g, "");
           masked.resolve(sanitizedValue as string);
-          onChange(masked.value);
+          onChange(masked.value, []);
         }}
         placeholder={placeholder}
         required={required}

package/src/components/RJSForm/fields/MultiSelectField.tsx

@@ -1,6 +1,6 @@
 // MultiSelectWidget supports enum: String[]. oneOf: Object[] will be supported in a separate component
 
-import { ErrorSchema, FieldProps, IdSchema, RJSFSchema, UiSchema, Widget } from "@rjsf/utils";
+import { ErrorSchema, FieldPathId, FieldProps, RJSFSchema, UiSchema, Widget } from "@rjsf/utils";
 import React, { useEffect, useState } from "react";
 import { flushSync } from "react-dom";
 import { MultiSelect, MultiSelectType } from "../../../configuredComponents/MultiSelect";
@@ -36,24 +36,24 @@ type MultiSelectFieldUiSchemaType = UiSchema & MultiSelectFieldUiSchemaOptions;
 type MultiSelectFieldProps = FieldProps & {
   errorSchema?: ErrorSchema;
   formData?: any;
-  idSchema: IdSchema;
   idSeparator?: string;
   uiSchema?: MultiSelectFieldUiSchemaType;
 };
 
 // This is a wrapper component to convert the types from the widget to be used with the field types
 export const MultiSelectWidget: Widget<any, RJSFSchema, any> = (props) => {
-  const { id, value, disabled = false, readonly = false, uiSchema, ...rest } = props;
+  const { id, value, disabled = false, readonly = false, uiSchema, onChange, ...rest } = props;
 
-  const idSchema: IdSchema = { $id: id } as IdSchema;
+  const fieldPathId: FieldPathId = { $id: id, path: [] };
 
   const checkboxFieldProps: MultiSelectFieldProps = {
-    idSchema,
+    fieldPathId,
     formData: value,
     disabled,
     readonly,
     uiSchema: uiSchema as MultiSelectFieldUiSchemaType,
     ...rest,
+    onChange: (newValue: any, _path: any, es?: any, id?: string) => onChange(newValue, es, id),
   };
 
   return <MultiSelectField {...checkboxFieldProps} />;
@@ -65,7 +65,7 @@ export const MultiSelectField: React.FC<MultiSelectFieldProps> = (props) => {
     disabled,
     formData, // Specific to Field
     hideLabel,
-    idSchema, // Specific to Field
+    fieldPathId, // Specific to Field
     label,
     name,
     onBlur,
@@ -78,7 +78,7 @@ export const MultiSelectField: React.FC<MultiSelectFieldProps> = (props) => {
     uiSchema,
   } = props;
   const [formattedOptions, setFormattedOptions] = useState<OptionType[]>([]);
-  const id = idSchema.$id;
+  const id = fieldPathId.$id;
 
   const ui = uiSchema?.["ui:options"] || {};
   const contentPadding = (ui?.padding as string) || "";
@@ -89,7 +89,7 @@ export const MultiSelectField: React.FC<MultiSelectFieldProps> = (props) => {
     const enumValues = (schema as RJSFSchema)?.enum || (schema?.items as RJSFSchema)?.enum || [];
     let options: OptionType[] = [];
     if (!ui?.options && enumValues?.length > 0) {
-      const enumLabels = ui.enumNames || [];
+      const enumLabels = Array.isArray(ui.enumNames) ? ui.enumNames : [];
       const validEnumValues = enumValues.filter(
         (enumValue: any): enumValue is string | number => typeof enumValue === "string" || typeof enumValue === "number"
       );
@@ -121,7 +121,7 @@ export const MultiSelectField: React.FC<MultiSelectFieldProps> = (props) => {
             });
 
             flushSync(() => {
-              onChange(updatedValues);
+              onChange(updatedValues, []);
             });
           }
         }}
@@ -136,7 +136,7 @@ export const MultiSelectField: React.FC<MultiSelectFieldProps> = (props) => {
             string: response.tag?.id as string,
           });
           flushSync(() => {
-            onChange(updatedValues);
+            onChange(updatedValues, []);
           });
         }}
         // uiSchema options
@@ -144,7 +144,7 @@ export const MultiSelectField: React.FC<MultiSelectFieldProps> = (props) => {
           ui?.clearAll
             ? () => {
                 flushSync(() => {
-                  onChange([]);
+                  onChange([], []);
                 });
               }
             : undefined

package/src/components/RJSForm/fields/MultiTextInputField.tsx

@@ -1,4 +1,4 @@
-import { ErrorSchema, FieldProps, IdSchema, RJSFSchema, Widget } from "@rjsf/utils";
+import { ErrorSchema, FieldPathId, FieldProps, RJSFSchema, Widget } from "@rjsf/utils";
 import React, { useEffect, useState } from "react";
 import { CheckboxItem } from "../../CheckboxItem";
 import { Email } from "../../Icons";
@@ -42,24 +42,24 @@ export type MultiTextInputUiSchemaOptions = {
 type TextFieldProps = FieldProps & {
   errorSchema?: ErrorSchema;
   formData?: any;
-  idSchema: IdSchema;
   idSeparator?: string;
   uiSchema?: MultiTextInputUiSchemaOptions;
 };
 
 // This is a wrapper component to convert the types from the widget to be used with the field types
 export const MultiTextInputWidget: Widget<any, RJSFSchema, any> = (props) => {
-  const { id, value, disabled = false, readonly = false, uiSchema, ...rest } = props;
+  const { id, value, disabled = false, readonly = false, uiSchema, onChange, ...rest } = props;
 
-  const idSchema: IdSchema = { $id: id } as IdSchema;
+  const fieldPathId: FieldPathId = { $id: id, path: [] };
 
   const checkboxFieldProps: TextFieldProps = {
-    idSchema,
+    fieldPathId,
     formData: value,
     disabled,
     readonly,
     uiSchema: uiSchema as MultiTextInputUiSchemaOptions,
     ...rest,
+    onChange: (newValue: any, _path: any, es?: any, id?: string) => onChange(newValue, es, id),
   };
 
   return <MultiTextInputField {...checkboxFieldProps} />;
@@ -75,7 +75,7 @@ export const MultiTextInputField: React.FC<TextFieldProps> = (props) => {
     formData, // Specific to Field
     // hideError,
     hideLabel,
-    idSchema, // Specific to Field
+    fieldPathId, // Specific to Field
     label,
     name,
     onBlur,
@@ -89,7 +89,7 @@ export const MultiTextInputField: React.FC<TextFieldProps> = (props) => {
     schema,
     uiSchema,
   } = props;
-  const id = idSchema.$id;
+  const id = fieldPathId.$id;
 
   const InputComponent = hideLabel ? InlineInput : Input;
   const ui = uiSchema?.["ui:options"] || {};
@@ -146,7 +146,7 @@ export const MultiTextInputField: React.FC<TextFieldProps> = (props) => {
       // Clear validation error and add the value
       setValidationError("");
       const newValues = Array.isArray(formData) ? [...formData, trimmedValue] : [trimmedValue];
-      onChange(newValues);
+      onChange(newValues, []);
       setCurrentValue("");
     }
   };
@@ -160,10 +160,9 @@ export const MultiTextInputField: React.FC<TextFieldProps> = (props) => {
   };
 
   const handleRemove = (idx: number | string) => {
-    console.log("handleRemove", idx);
     if (!Array.isArray(formData)) return;
     const newValues = formData.filter((_: string, i: number) => i !== idx);
-    onChange(newValues);
+    onChange(newValues, []);
   };
 
   // Updated shouldShowField logic
@@ -176,7 +175,7 @@ export const MultiTextInputField: React.FC<TextFieldProps> = (props) => {
   // this could generate a validation error if we provide a format for this field
   useEffect(() => {
     if (formData === "") {
-      onChange(undefined);
+      onChange(undefined, []);
     }
   }, [formData]);
 
@@ -194,10 +193,10 @@ export const MultiTextInputField: React.FC<TextFieldProps> = (props) => {
       setSavedEmailList(currentEmails);
       setCurrentValue(""); // Clear current input value
       setValidationError(""); // Clear any validation errors
-      onChange(undefined); // Set formData to undefined (this disables the backend option)
+      onChange(undefined, []); // Set formData to undefined (this disables the backend option)
     } else {
       // If we're showing the input, restore saved email list or set to empty array
-      onChange(savedEmailList);
+      onChange(savedEmailList, []);
       setSavedEmailList([]); // Clear saved list after restoring
     }
   };

package/src/components/RJSForm/fields/NumberField.tsx

@@ -1,4 +1,4 @@
-import { ErrorSchema, FieldProps, IdSchema } from "@rjsf/utils";
+import { ErrorSchema, FieldProps } from "@rjsf/utils";
 import React from "react";
 import { InlineInput } from "../../InlineInput";
 import { Input, InputType } from "../../Input";
@@ -33,7 +33,6 @@ export type NumberFieldUiSchemaOptions = {
 type NumberFieldProps = FieldProps & {
   errorSchema?: ErrorSchema;
   formData?: any;
-  idSchema: IdSchema;
   idSeparator?: string;
   uiSchema?: NumberFieldUiSchemaOptions;
 };
@@ -48,7 +47,7 @@ export const NumberField: React.FC<NumberFieldProps> = (props) => {
     formData, // Specific to Field
     // hideError,
     hideLabel,
-    idSchema, // Specific to Field
+    fieldPathId, // Specific to Field
     label,
     name,
     onBlur,
@@ -63,7 +62,7 @@ export const NumberField: React.FC<NumberFieldProps> = (props) => {
     schema,
     uiSchema,
   } = props;
-  const id = idSchema.$id;
+  const id = fieldPathId.$id;
 
   const InputComponent = hideLabel ? InlineInput : Input;
   const ui = uiSchema?.["ui:options"] || {};
@@ -73,11 +72,11 @@ export const NumberField: React.FC<NumberFieldProps> = (props) => {
     const errors: ErrorSchema<any> = {};
     if (Number.isNaN(Number(value))) {
       errors.__errors = [NUMBER_FIELD_INVALID_ERROR];
-      onChange(value, errors, id);
+      onChange(value, [], errors, id);
     } else if (value === undefined || value === "") {
-      onChange("", errors, id);
+      onChange("", [], errors, id);
     } else {
-      onChange(Number(value), errors, id);
+      onChange(Number(value), [], errors, id);
     }
   };
 

package/src/components/RJSForm/fields/RadioField.tsx

@@ -1,6 +1,6 @@
 // RadioWidget supports enum: String[]. oneOf: Object[] will be supported in a separate component
 
-import { ErrorSchema, FieldProps, IdSchema, RJSFSchema, UiSchema, Widget } from "@rjsf/utils";
+import { ErrorSchema, FieldPathId, FieldProps, RJSFSchema, UiSchema, Widget } from "@rjsf/utils";
 import React, { useEffect, useState } from "react";
 import { RadioGroup, RadioGroupType } from "../../RadioGroup";
 import { SwitchGroupSwitchType } from "../../../sharedTypes/types";
@@ -23,24 +23,24 @@ type RadioFieldUiSchemaType = UiSchema & RadioFieldUiSchemaOptions;
 type RadioFieldProps = FieldProps & {
   errorSchema?: ErrorSchema;
   formData?: any;
-  idSchema: IdSchema;
   idSeparator?: string;
   uiSchema?: RadioFieldUiSchemaType;
 };
 
 // This is a wrapper component to convert the types from the widget to be used with the field types
 export const RadioWidget: Widget<any, RJSFSchema, any> = (props) => {
-  const { id, value, disabled = false, readonly = false, uiSchema, ...rest } = props;
+  const { id, value, disabled = false, readonly = false, uiSchema, onChange, ...rest } = props;
 
-  const idSchema: IdSchema = { $id: id } as IdSchema;
+  const fieldPathId: FieldPathId = { $id: id, path: [] };
 
   const radioFieldProps: RadioFieldProps = {
-    idSchema,
+    fieldPathId,
     formData: value,
     disabled,
     readonly,
     uiSchema: uiSchema as RadioFieldUiSchemaType,
     ...rest,
+    onChange: (newValue: any, _path: any, es?: any, id?: string) => onChange(newValue, es, id),
   };
 
   return <RadioField {...radioFieldProps} />;
@@ -80,7 +80,7 @@ export const RadioField: React.FC<RadioFieldProps> = (props) => {
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     // set State for Default values
-    onChange(formData);
+    onChange(formData, []);
   }, []);
 
   return (
@@ -90,7 +90,7 @@ export const RadioField: React.FC<RadioFieldProps> = (props) => {
         helperText={schema.description}
         radioLabel={label || schema.title || name}
         name={name}
-        onRadioClick={(event) => onChange(event.target.value)}
+        onRadioClick={(event) => onChange(event.target.value, [])}
         radios={radioOptions}
         required={required}
         showValidationMessage={!!rawErrors?.[0]}

package/src/components/RJSForm/fields/SelectField.tsx

@@ -1,6 +1,6 @@
 // SelectWidget supports enum: String[]. oneOf: Object[] will be supported in a separate component
 
-import { ErrorSchema, FieldProps, IdSchema, RJSFSchema, UiSchema, Widget } from "@rjsf/utils";
+import { ErrorSchema, FieldPathId, FieldProps, RJSFSchema, UiSchema, Widget } from "@rjsf/utils";
 import React, { useEffect, useState } from "react";
 import { DropdownInput, DropdownInputType } from "../../../configuredComponents/DropdownInput";
 import { OptionType } from "../../../sharedTypes/types";
@@ -39,24 +39,24 @@ type SelectFieldUiSchemaType = UiSchema & SelectFieldUiSchemaOptions;
 type SelectFieldProps = FieldProps & {
   errorSchema?: ErrorSchema;
   formData?: any;
-  idSchema: IdSchema;
   idSeparator?: string;
   uiSchema?: SelectFieldUiSchemaType;
 };
 
 // This is a wrapper component to convert the types from the widget to be used with the field types
 export const SelectWidget: Widget<any, RJSFSchema, any> = (props) => {
-  const { id, value, disabled = false, readonly = false, uiSchema, ...rest } = props;
+  const { id, value, disabled = false, readonly = false, uiSchema, onChange, ...rest } = props;
 
-  const idSchema: IdSchema = { $id: id } as IdSchema;
+  const fieldPathId: FieldPathId = { $id: id, path: [] };
 
   const checkboxFieldProps: SelectFieldProps = {
-    idSchema,
+    fieldPathId,
     formData: value,
     disabled,
     readonly,
     uiSchema: uiSchema as SelectFieldUiSchemaType,
     ...rest,
+    onChange: (newValue: any, _path: any, es?: any, id?: string) => onChange(newValue, es, id),
   };
 
   return <SelectField {...checkboxFieldProps} />;
@@ -68,7 +68,7 @@ export const SelectField: React.FC<SelectFieldProps> = (props) => {
     disabled,
     formData,
     hideLabel,
-    idSchema,
+    fieldPathId,
     label,
     name,
     onBlur,
@@ -82,7 +82,7 @@ export const SelectField: React.FC<SelectFieldProps> = (props) => {
   } = props;
   const [formattedOptions, setFormattedOptions] = useState<OptionType[]>([]);
   const [selectedOption, setSelectedOption] = useState<OptionType | undefined>({});
-  const id = idSchema.$id;
+  const id = fieldPathId.$id;
 
   const ui = uiSchema?.["ui:options"] || {};
   const contentPadding = (ui?.padding as string) || "";
@@ -93,7 +93,7 @@ export const SelectField: React.FC<SelectFieldProps> = (props) => {
     const enumValues = (schema as RJSFSchema).enum || [];
     let options: OptionType[] = [];
     if (!ui.options && enumValues.length > 0) {
-      const enumLabels = ui.enumNames || [];
+      const enumLabels = Array.isArray(ui.enumNames) ? ui.enumNames : [];
       const validEnumValues = enumValues.filter(
         (enumValue: any): enumValue is string | number => typeof enumValue === "string" || typeof enumValue === "number"
       );
@@ -131,7 +131,7 @@ export const SelectField: React.FC<SelectFieldProps> = (props) => {
         onInputFocus={() => onFocus(id, formData)}
         onSelect={(option) => {
           setSelectedOption(option);
-          onChange(option?.value);
+          onChange(option?.value, []);
         }}
         options={formattedOptions}
         placeholder={placeholder}

package/src/components/RJSForm/fields/TextField.tsx

@@ -1,4 +1,4 @@
-import { ErrorSchema, FieldProps, IdSchema, RJSFSchema, Widget } from "@rjsf/utils";
+import { ErrorSchema, FieldPathId, FieldProps, RJSFSchema, Widget } from "@rjsf/utils";
 import React, { useEffect } from "react";
 import { InlineInput } from "../../InlineInput";
 import { Input, InputType } from "../../Input";
@@ -34,24 +34,24 @@ export type TextFieldUiSchemaOptions = {
 type TextFieldProps = FieldProps & {
   errorSchema?: ErrorSchema;
   formData?: any;
-  idSchema: IdSchema;
   idSeparator?: string;
   uiSchema?: TextFieldUiSchemaOptions;
 };
 
 // This is a wrapper component to convert the types from the widget to be used with the field types
 export const TextWidget: Widget<any, RJSFSchema, any> = (props) => {
-  const { id, value, disabled = false, readonly = false, uiSchema, ...rest } = props;
+  const { id, value, disabled = false, readonly = false, uiSchema, onChange, ...rest } = props;
 
-  const idSchema: IdSchema = { $id: id } as IdSchema;
+  const fieldPathId: FieldPathId = { $id: id, path: [] };
 
   const checkboxFieldProps: TextFieldProps = {
-    idSchema,
+    fieldPathId,
     formData: value,
     disabled,
     readonly,
     uiSchema: uiSchema as TextFieldUiSchemaOptions,
     ...rest,
+    onChange: (newValue: any, _path: any, es?: any, id?: string) => onChange(newValue, es, id),
   };
 
   return <TextField {...checkboxFieldProps} />;
@@ -67,7 +67,7 @@ export const TextField: React.FC<TextFieldProps> = (props) => {
     formData, // Specific to Field
     // hideError,
     hideLabel,
-    idSchema, // Specific to Field
+    fieldPathId, // Specific to Field
     label,
     name,
     onBlur,
@@ -82,7 +82,7 @@ export const TextField: React.FC<TextFieldProps> = (props) => {
     schema,
     uiSchema,
   } = props;
-  const id = idSchema.$id;
+  const id = fieldPathId.$id;
 
   const InputComponent = hideLabel ? InlineInput : Input;
   const ui = uiSchema?.["ui:options"] || {};
@@ -96,7 +96,7 @@ export const TextField: React.FC<TextFieldProps> = (props) => {
   // biome-ignore lint/correctness/useExhaustiveDependencies: skip validation
   useEffect(() => {
     if (formData === "") {
-      onChange(undefined);
+      onChange(undefined, []);
     }
   }, [formData]);
 
@@ -111,7 +111,7 @@ export const TextField: React.FC<TextFieldProps> = (props) => {
         name={name}
         onInputBlur={() => onBlur(id, formData)}
         onInputFocus={() => onFocus(id, formData)}
-        onValueChange={onChange}
+        onValueChange={(value) => onChange(value, [])}
         placeholder={placeholder}
         required={required}
         showValidationMessage={!!rawErrors?.[0]}

package/src/components/RJSForm/fields/TextareaField.tsx

@@ -1,4 +1,4 @@
-import { ErrorSchema, FieldProps, IdSchema, RJSFSchema, Widget } from "@rjsf/utils";
+import { ErrorSchema, FieldPathId, FieldProps, RJSFSchema, Widget } from "@rjsf/utils";
 import React from "react";
 import { Textarea, TextareaType } from "../../Textarea";
 import { FieldBox } from "../RJSFormStyles";
@@ -32,24 +32,24 @@ export type TextareaFieldUiSchemaOptions = {
 type TextareaFieldProps = FieldProps & {
   errorSchema?: ErrorSchema;
   formData?: any;
-  idSchema: IdSchema;
   idSeparator?: string;
   uiSchema?: TextareaFieldUiSchemaOptions;
 };
 
 // This is a wrapper component to convert the types from the widget to be used with the field types
 export const TextareaWidget: Widget<any, RJSFSchema, any> = (props) => {
-  const { id, value, disabled = false, readonly = false, uiSchema, ...rest } = props;
+  const { id, value, disabled = false, readonly = false, uiSchema, onChange, ...rest } = props;
 
-  const idSchema: IdSchema = { $id: id } as IdSchema;
+  const fieldPathId: FieldPathId = { $id: id, path: [] };
 
   const textareaFieldProps: TextareaFieldProps = {
-    idSchema,
+    fieldPathId,
     formData: value,
     disabled,
     readonly,
     uiSchema: uiSchema as TextareaFieldUiSchemaOptions,
     ...rest,
+    onChange: (newValue: any, _path: any, es?: any, id?: string) => onChange(newValue, es, id),
   };
 
   return <TextareaField {...textareaFieldProps} />;
@@ -60,7 +60,7 @@ export const TextareaField: React.FC<TextareaFieldProps> = (props) => {
     disabled,
     formData, // Specific to Field
     hideLabel,
-    idSchema, // Specific to Field
+    fieldPathId, // Specific to Field
     label,
     name,
     onBlur,
@@ -72,7 +72,7 @@ export const TextareaField: React.FC<TextareaFieldProps> = (props) => {
     schema,
     uiSchema,
   } = props;
-  const id = idSchema.$id;
+  const id = fieldPathId.$id;
 
   const ui = uiSchema?.["ui:options"] || {};
   const contentPadding = (ui?.padding as string) || "";
@@ -81,7 +81,7 @@ export const TextareaField: React.FC<TextareaFieldProps> = (props) => {
     <FieldBox $padding={contentPadding}>
       <Textarea
         value={formData}
-        onValueChange={onChange}
+        onValueChange={(value) => onChange(value, [])}
         disabled={disabled}
         {...(hideLabel ? {} : { helperText: schema.description })}
         htmlId={id}

package/src/components/RJSForm/fields/ToggleField.tsx

@@ -1,4 +1,4 @@
-import { ErrorSchema, FieldProps, IdSchema, RJSFSchema, Widget } from "@rjsf/utils";
+import { ErrorSchema, FieldPathId, FieldProps, RJSFSchema, Widget } from "@rjsf/utils";
 import React from "react";
 import { ToggleItem, ToggleItemType } from "../../ToggleItem";
 import { FieldBox } from "../RJSFormStyles";
@@ -14,32 +14,32 @@ export type ToggleFieldUiSchemaOptions = {
 type ToggleFieldProps = FieldProps & {
   errorSchema?: ErrorSchema;
   formData?: any;
-  idSchema: IdSchema;
   idSeparator?: string;
   uiSchema?: ToggleFieldUiSchemaOptions;
 };
 
 // This is a wrapper component to convert the types from the widget to be used with the field types
 export const ToggleWidget: Widget<any, RJSFSchema, any> = (props) => {
-  const { id, value, disabled = false, readonly = false, uiSchema, ...rest } = props;
+  const { id, value, disabled = false, readonly = false, uiSchema, onChange, ...rest } = props;
 
-  const idSchema: IdSchema = { $id: id } as IdSchema;
+  const fieldPathId: FieldPathId = { $id: id, path: [] };
 
   const toggleFieldProps: ToggleFieldProps = {
-    idSchema,
+    fieldPathId,
     formData: value,
     disabled,
     readonly,
     uiSchema: uiSchema as ToggleFieldUiSchemaOptions,
     ...rest,
+    onChange: (newValue: any, _path: any, es?: any, id?: string) => onChange(newValue, es, id),
   };
 
   return <ToggleField {...toggleFieldProps} />;
 };
 
 export const ToggleField: React.FC<ToggleFieldProps> = (props) => {
-  const { disabled, formData, idSchema, label, name, onChange, schema, uiSchema } = props;
-  const id = idSchema.$id;
+  const { disabled, formData, fieldPathId, label, name, onChange, schema, uiSchema } = props;
+  const id = fieldPathId.$id;
 
   const ui = uiSchema?.["ui:options"] || {};
   const contentPadding = (ui?.padding as string) || "";
@@ -52,7 +52,7 @@ export const ToggleField: React.FC<ToggleFieldProps> = (props) => {
         active={!!formData}
         disabled={disabled}
         name={name}
-        onToggle={(event) => onChange(event.target?.checked)}
+        onToggle={(event) => onChange(event.target?.checked, [])}
         value={formData}
         focusedColor={ui.focusedColor}
       />

package/src/components/Table/Table.test.tsx

@@ -982,7 +982,7 @@ describe("Table: Column Filters", () => {
     await waitFor(() => userEvent.click(screen.getByText(filterLabel)));
     await userEvent.click(clickoutTarget);
     const element = screen.getByTestId("Slider_component");
-    expect(element).toHaveStyle({ opacity: "0" });
+    await waitFor(() => expect(element).toHaveStyle({ opacity: "0" }));
     expect(filterFunction).toBeCalledTimes(1);
   });
 

package/tsconfig.test.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "moduleResolution": "node"
+  },
+  "include": ["src/**/*", "types.d.ts", "node_modules/@rjsf/**/*"]
+}