fix(deps): update dependency @rjsf/core to v5 (#1409)

* fix(deps): update dependency @rjsf/core to v5

* redux-devtools-ui

* Update

* Update

* Update

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Nathan Bierema <nbierema@gmail.com>

Author: renovate[bot]

packages/redux-devtools-app-core/package.json

@@ -62,7 +62,7 @@
     "@babel/preset-typescript": "^7.24.7",
     "@emotion/react": "^11.13.3",
     "@reduxjs/toolkit": "^2.2.7",
-    "@rjsf/core": "^4.2.3",
+    "@rjsf/core": "^5.20.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",

packages/redux-devtools-app-core/src/actions/index.ts

@@ -55,7 +55,7 @@ interface ChangeThemeFormData {
   readonly colorPreference: 'auto' | 'light' | 'dark';
 }
 interface ChangeThemeData {
-  readonly formData: ChangeThemeFormData;
+  readonly formData?: ChangeThemeFormData;
 }
 export interface ChangeThemeAction {
   readonly type: typeof CHANGE_THEME;
@@ -64,7 +64,7 @@ export interface ChangeThemeAction {
   readonly colorPreference: 'auto' | 'light' | 'dark';
 }
 export function changeTheme(data: ChangeThemeData): ChangeThemeAction {
-  return { type: CHANGE_THEME, ...data.formData };
+  return { type: CHANGE_THEME, ...data.formData! };
 }
 
 interface ChangeStateTreeSettingsFormData {
@@ -73,7 +73,7 @@ interface ChangeStateTreeSettingsFormData {
 }
 
 interface ChangeStateTreeSettingsData {
-  readonly formData: ChangeStateTreeSettingsFormData;
+  readonly formData?: ChangeStateTreeSettingsFormData;
 }
 
 export interface ChangeStateTreeSettingsAction {
@@ -85,7 +85,7 @@ export interface ChangeStateTreeSettingsAction {
 export function changeStateTreeSettings(
   data: ChangeStateTreeSettingsData,
 ): ChangeStateTreeSettingsAction {
-  return { type: CHANGE_STATE_TREE_SETTINGS, ...data.formData };
+  return { type: CHANGE_STATE_TREE_SETTINGS, ...data.formData! };
 }
 
 export interface InitMonitorAction {

packages/redux-devtools-app/package.json

@@ -59,7 +59,7 @@
     "@babel/preset-typescript": "^7.24.7",
     "@emotion/react": "^11.13.3",
     "@reduxjs/toolkit": "^2.2.7",
-    "@rjsf/core": "^4.2.3",
+    "@rjsf/core": "^5.20.0",
     "@types/jsan": "^3.1.5",
     "@types/json-schema": "^7.0.15",
     "@types/lodash": "^4.17.7",

packages/redux-devtools-app/src/components/Settings/Connection.tsx

@@ -1,15 +1,11 @@
 import React, { Component } from 'react';
 import { connect, ResolveThunks } from 'react-redux';
 import { Container, Form } from '@redux-devtools/ui';
-import {
-  JSONSchema7Definition,
-  JSONSchema7Type,
-  JSONSchema7TypeName,
-} from 'json-schema';
+import { JSONSchema7Definition, JSONSchema7TypeName } from 'json-schema';
 import { ConnectionType, saveSocketSettings } from '../../actions';
 import { StoreState } from '../../reducers';
 import { ConnectionStateOptions } from '../../reducers/connection';
-import { IChangeEvent, ISubmitEvent } from '@rjsf/core';
+import { IChangeEvent } from '@rjsf/core';
 
 declare module 'json-schema' {
   export interface JSONSchema7 {
@@ -104,13 +100,13 @@ export class Connection extends Component<Props, State> {
     }
   }
 
-  handleSave = (data: ISubmitEvent<FormData>) => {
-    this.props.saveSettings(data.formData);
+  handleSave = (data: IChangeEvent<FormData>) => {
+    this.props.saveSettings(data.formData!);
     this.setState({ changed: false });
   };
 
   handleChange = (data: IChangeEvent<FormData>) => {
-    const formData = data.formData;
+    const formData = data.formData!;
     const type = formData.type;
     if (type !== this.state.type) {
       this.setState(this.setFormData(type, true));

packages/redux-devtools-inspector-monitor-test-tab/src/index.tsx

@@ -64,17 +64,17 @@ export class TestTab<S, A extends Action<string>> extends Component<
     this.setState({ dialogStatus: null });
   };
 
-  handleSubmit = ({ formData: template }: { formData: Template }) => {
+  handleSubmit = ({ formData: template }: { formData?: Template }) => {
     const { templates = getDefaultTemplates(), selected = 0 } =
       this.getPersistedState();
     if (this.state.dialogStatus === 'Add') {
       this.updateState({
         selected: templates.length,
-        templates: [...templates, template],
+        templates: [...templates, template!],
       });
     } else {
       const editedTemplates = [...templates];
-      editedTemplates[selected] = template;
+      editedTemplates[selected] = template!;
       this.updateState({
         templates: editedTemplates,
       });

packages/redux-devtools-ui/package.json

@@ -43,7 +43,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.25.4",
-    "@rjsf/core": "^4.2.3",
+    "@rjsf/core": "^5.20.0",
+    "@rjsf/utils": "^5.20.0",
+    "@rjsf/validator-ajv8": "^5.20.0",
     "@types/codemirror": "^5.60.15",
     "@types/json-schema": "^7.0.15",
     "@types/simple-element-resize-detector": "^1.3.3",

packages/redux-devtools-ui/src/Form/Form.tsx

@@ -1,5 +1,6 @@
 import React, { PureComponent, Component } from 'react';
 import JSONSchemaForm, { FormProps } from '@rjsf/core';
+import validator from '@rjsf/validator-ajv8';
 import type { Base16Theme } from 'react-base16-styling';
 import createStyledComponent from '../utils/createStyledComponent';
 import styles from './styles';
@@ -8,7 +9,7 @@ import customWidgets from './widgets';
 
 const FormContainer = createStyledComponent(styles, JSONSchemaForm);
 
-export interface Props<T> extends FormProps<T> {
+export interface Props<T> extends Omit<FormProps<T>, 'validator'> {
   children?: React.ReactNode;
   submitText?: string;
   primaryButton?: boolean;
@@ -26,6 +27,7 @@ export default class Form<T> extends (PureComponent || Component)<Props<T>> {
     return (
       <FormContainer
         {...(rest as Props<unknown>)}
+        validator={validator}
         widgets={{ ...customWidgets, ...widgets }}
       >
         {noSubmit ? (

packages/redux-devtools-ui/src/Form/widgets.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FieldProps, Widget, WidgetProps } from '@rjsf/core';
+import { FieldProps, Widget, WidgetProps } from '@rjsf/utils';
 import Select from '../Select';
 import Slider from '../Slider';