@rjsf/core 6.5.3 → 6.6.0

package/lib/withTheme.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
-import { FormProps } from './components/Form.js';
 import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { FormProps } from './components/Form.js';
 /** The properties for the `withTheme` function, essentially a subset of properties from the `FormProps` that can be
  * overridden while creating a theme
  */

package/lib/withTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withTheme.d.ts","sourceRoot":"","sources":["../src/withTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA4B,MAAM,OAAO,CAAC;AAChE,OAAa,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE5E;;GAEG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,IAAI,IAAI,CAC9G,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAClB,QAAQ,GAAG,WAAW,GAAG,SAAS,GAAG,sBAAsB,CAC5D,CAAC;AAEF,mHAAmH;AACnH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACjH,UAAU,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAC9B,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CA2BnC"}
+{"version":3,"file":"withTheme.d.ts","sourceRoot":"","sources":["../src/withTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA4B,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE5E,OAAa,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEpD;;GAEG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,IAAI,IAAI,CAC9G,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAClB,QAAQ,GAAG,WAAW,GAAG,SAAS,GAAG,sBAAsB,CAC5D,CAAC;AAEF,mHAAmH;AACnH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACjH,UAAU,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAC9B,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CA2BnC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/core",
-  "version": "6.5.3",
+  "version": "6.6.0",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "scripts": {
     "compileReplacer": "tsc -p tsconfig.replacer.json && move-file lodashReplacer.js lodashReplacer.cjs",
@@ -9,20 +9,21 @@
     "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/index.esm.js --sourcemap --packages=external --format=esm",
     "build:umd": "rollup dist/index.esm.js --format=umd --file=dist/core.umd.js --name=JSONSchemaForm",
     "build": "npm run build:ts && npm run build:cjs && npm run build:esm && npm run build:umd",
-    "cs-check": "prettier -l \"{src,test}/**/*.[jt]s?(x)\"",
-    "cs-format": "prettier \"{src,test}/**/*.[jt]s?(x)\" --write",
-    "lint": "eslint src test",
+    "cs-check": "oxfmt --check \"{src,test}/**/*.{ts,tsx,js,jsx}\"",
+    "cs-format": "oxfmt \"{src,test}/**/*.{ts,tsx,js,jsx}\"",
+    "lint": "oxlint src test",
     "precommit": "lint-staged",
     "publish-to-npm": "npm run build && npm publish",
-    "test": "jest",
+    "test": "vitest run",
     "test:debug": "node --inspect-brk ../../node_modules/.bin/jest",
-    "test:update": "jest --u",
-    "test:watch": "jest --watch",
-    "test-coverage": "jest --coverage"
+    "test:update": "vitest run --update-snapshots",
+    "test:watch": "vitest",
+    "test-coverage": "vitest run --coverage"
   },
   "lint-staged": {
-    "{src,test}/**/*.[jt]s?(x)": [
-      "eslint --fix"
+    "{src,test}/**/*.{ts,tsx,js,jsx}": [
+      "oxlint --fix",
+      "oxfmt"
     ]
   },
   "main": "dist/index.js",
@@ -72,21 +73,20 @@
   "dependencies": {
     "lodash": "^4.18.1",
     "lodash-es": "^4.18.1",
-    "markdown-to-jsx": "^8.0.0",
+    "markdown-to-jsx": "^9.8.1",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@rjsf/snapshot-tests": "6.5.3",
-    "@rjsf/utils": "6.5.3",
-    "@rjsf/validator-ajv8": "6.5.3",
+    "@rjsf/snapshot-tests": "6.6.0",
+    "@rjsf/utils": "6.6.0",
+    "@rjsf/validator-ajv8": "6.6.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/react-portal": "^4.0.7",
-    "ajv": "^8.18.0",
+    "ajv": "^8.20.0",
     "atob": "^2.1.2",
-    "eslint": "^8.57.1",
-    "jsdom": "^27.0.1",
+    "jsdom": "^29.1.1",
     "react-portal": "^4.3.0"
   },
   "directories": {

package/src/components/Form.tsx

@@ -21,7 +21,6 @@ import {
   RegistryWidgetsType,
   RJSFSchema,
   RJSFValidationError,
-  removeOptionalEmptyObjects,
   SchemaUtilsType,
   shouldRender,
   SUBMIT_BTN_OPTIONS_KEY,
@@ -210,10 +209,9 @@ export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
    * called. Set to `false` by default.
    */
   omitExtraData?: boolean;
-  /** If set to true, optional object properties whose fields are all empty (undefined, null, or empty string)
-   * will be automatically removed from formData. This prevents the scenario where interacting with fields inside
-   * an optional object "activates" it permanently, making the form unsubmittable when the optional object has
-   * required inner fields. This works independently of `omitExtraData`. Set to `false` by default.
+  /** This option no longer does anything as it has been co-opted into `omitExtraData`
+   *
+   * @deprecated - Will be removed in a future release use `omitExtraData` instead
    */
   removeEmptyOptionalObjects?: boolean;
   /** When this prop is set to `top` or 'bottom', a list of errors (or the custom error list defined in the `ErrorList`) will also
@@ -895,8 +893,7 @@ export default class Form<
     this._isProcessingUserChange = true;
     const { newValue, path, id } = this.pendingChanges[0];
     const { newErrorSchema } = this.pendingChanges[0];
-    const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange, removeEmptyOptionalObjects } =
-      this.props;
+    const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
     const { formData: oldFormData, schemaUtils, schema, fieldPathId, schemaValidationErrorSchema, errors } = this.state;
     let { customErrors } = this.state;
     // Use the un-merged AJV-only schema as the base for re-merging extraErrors. Mirrors the
@@ -971,19 +968,6 @@ export default class Form<
       };
     }
 
-    if (removeEmptyOptionalObjects) {
-      newFormData = removeOptionalEmptyObjects(
-        schemaUtils.getValidator(),
-        schema,
-        schemaUtils.getRootSchema(),
-        newFormData,
-      ) as T;
-      state = {
-        ...state,
-        formData: newFormData,
-      };
-    }
-
     if (newErrorSchema) {
       // First check to see if there is an existing validation error on this path...
       // @ts-expect-error TS2590, because getting from the error schema is confusing TS
@@ -1100,28 +1084,19 @@ export default class Form<
    * @param data - The data associated with the field that was blurred
    */
   onBlur = (id: string, data: any) => {
-    const { onBlur, omitExtraData, liveOmit, liveValidate, removeEmptyOptionalObjects } = this.props;
+    const { onBlur, omitExtraData, liveOmit, liveValidate } = this.props;
     if (onBlur) {
       onBlur(id, data);
     }
     if ((omitExtraData === true && liveOmit === 'onBlur') || liveValidate === 'onBlur') {
       const { onChange, extraErrors } = this.props;
-      const { formData, schemaUtils, schema } = this.state;
+      const { formData } = this.state;
       let newFormData: T | undefined = formData;
       let state: Partial<FormState<T, S, F>> = { formData: newFormData };
       if (omitExtraData === true && liveOmit === 'onBlur') {
         newFormData = this.omitExtraData(formData);
         state = { formData: newFormData };
       }
-      if (removeEmptyOptionalObjects) {
-        newFormData = removeOptionalEmptyObjects(
-          schemaUtils.getValidator(),
-          schema,
-          schemaUtils.getRootSchema(),
-          newFormData,
-        ) as T;
-        state = { ...state, formData: newFormData };
-      }
       if (liveValidate === 'onBlur') {
         const { schema, schemaUtils, errorSchema, customErrors, retrievedSchema } = this.state;
         const liveValidation = this.liveValidate(
@@ -1179,23 +1154,13 @@ export default class Form<
     }
 
     event.persist();
-    const { omitExtraData, extraErrors, noValidate, onSubmit, removeEmptyOptionalObjects } = this.props;
+    const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
     let { formData: newFormData } = this.state;
 
     if (omitExtraData === true) {
       newFormData = this.omitExtraData(newFormData);
     }
 
-    if (removeEmptyOptionalObjects) {
-      const { schemaUtils, schema } = this.state;
-      newFormData = removeOptionalEmptyObjects(
-        schemaUtils.getValidator(),
-        schema,
-        schemaUtils.getRootSchema(),
-        newFormData,
-      ) as T;
-    }
-
     if (noValidate || this.validateFormWithFormData(newFormData)) {
       // There are no errors generated through schema validation.
       // Check for user provided errors and update state accordingly.
@@ -1379,20 +1344,11 @@ export default class Form<
    * @returns - True if the form is valid, false otherwise.
    */
   validateForm() {
-    const { omitExtraData, removeEmptyOptionalObjects } = this.props;
+    const { omitExtraData } = this.props;
     let { formData: newFormData } = this.state;
     if (omitExtraData === true) {
       newFormData = this.omitExtraData(newFormData);
     }
-    if (removeEmptyOptionalObjects) {
-      const { schemaUtils, schema } = this.state;
-      newFormData = removeOptionalEmptyObjects(
-        schemaUtils.getValidator(),
-        schema,
-        schemaUtils.getRootSchema(),
-        newFormData,
-      ) as T;
-    }
     return this.validateFormWithFormData(newFormData);
   }
 

package/src/components/RichDescription.tsx

@@ -8,7 +8,7 @@ import {
   getTestIds,
   getUiOptions,
 } from '@rjsf/utils';
-import Markdown from 'markdown-to-jsx';
+import { Markdown } from 'markdown-to-jsx/react';
 
 const TEST_IDS = getTestIds();
 

package/src/components/RichHelp.tsx

@@ -8,7 +8,7 @@ import {
   getTestIds,
   getUiOptions,
 } from '@rjsf/utils';
-import Markdown from 'markdown-to-jsx';
+import { Markdown } from 'markdown-to-jsx/react';
 
 const TEST_IDS = getTestIds();
 

package/src/components/fields/FallbackField.tsx

@@ -1,3 +1,4 @@
+import { useMemo, useState } from 'react';
 import {
   FallbackFieldProps,
   FieldPathId,
@@ -11,7 +12,6 @@ import {
   TranslatableString,
   useDeepCompareMemo,
 } from '@rjsf/utils';
-import { useMemo, useState } from 'react';
 import { JSONSchema7TypeName } from 'json-schema';
 
 /**

package/src/components/fields/LayoutGridField.tsx

@@ -32,8 +32,8 @@ import has from 'lodash/has';
 import includes from 'lodash/includes';
 import intersection from 'lodash/intersection';
 import isEmpty from 'lodash/isEmpty';
-import isFunction from 'lodash/isFunction';
 import isEqual from 'lodash/isEqual';
+import isFunction from 'lodash/isFunction';
 import isObject from 'lodash/isObject';
 import isPlainObject from 'lodash/isPlainObject';
 import isString from 'lodash/isString';

package/src/components/fields/MultiSchemaField.tsx

@@ -1,7 +1,4 @@
 import { Component } from 'react';
-import get from 'lodash/get';
-import isEmpty from 'lodash/isEmpty';
-import omit from 'lodash/omit';
 import {
   ANY_OF_KEY,
   deepEquals,
@@ -21,6 +18,9 @@ import {
   TranslatableString,
   UiSchema,
 } from '@rjsf/utils';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import omit from 'lodash/omit';
 
 /** Type used for the state of the `AnyOfField` component */
 type AnyOfFieldState<S extends StrictRJSFSchema = RJSFSchema> = {

package/src/components/fields/ObjectField.tsx

@@ -23,11 +23,11 @@ import {
   StrictRJSFSchema,
   TranslatableString,
 } from '@rjsf/utils';
-import Markdown from 'markdown-to-jsx';
 import get from 'lodash/get';
 import has from 'lodash/has';
 import isObject from 'lodash/isObject';
 import set from 'lodash/set';
+import { Markdown } from 'markdown-to-jsx';
 
 import { ADDITIONAL_PROPERTY_KEY_REMOVE } from '../constants';
 

package/src/components/fields/index.ts

@@ -7,12 +7,12 @@ import LayoutGridField from './LayoutGridField';
 import LayoutHeaderField from './LayoutHeaderField';
 import LayoutMultiSchemaField from './LayoutMultiSchemaField';
 import MultiSchemaField from './MultiSchemaField';
+import NullField from './NullField';
 import NumberField from './NumberField';
 import ObjectField from './ObjectField';
 import OptionalDataControlsField from './OptionalDataControlsField';
 import SchemaField from './SchemaField';
 import StringField from './StringField';
-import NullField from './NullField';
 
 function fields<
   T = any,

package/src/components/templates/ButtonTemplates/index.ts

@@ -1,8 +1,8 @@
 import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
 
-import SubmitButton from './SubmitButton';
 import AddButton from './AddButton';
 import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton, ClearButton } from './IconButton';
+import SubmitButton from './SubmitButton';
 
 function buttonTemplates<
   T = any,

package/src/components/templates/FieldHelpTemplate.tsx

@@ -1,4 +1,5 @@
 import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
 import RichHelp from '../RichHelp';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field

package/src/components/templates/UnsupportedField.tsx

@@ -1,5 +1,5 @@
 import { FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString, UnsupportedFieldProps } from '@rjsf/utils';
-import Markdown from 'markdown-to-jsx';
+import { Markdown } from 'markdown-to-jsx';
 
 /** The `UnsupportedField` component is used to render a field in the schema is one that is not supported by
  * react-jsonschema-form.

package/src/components/templates/index.ts

@@ -1,8 +1,8 @@
 import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
 
 import ArrayFieldDescriptionTemplate from './ArrayFieldDescriptionTemplate';
-import ArrayFieldItemTemplate from './ArrayFieldItemTemplate';
 import ArrayFieldItemButtonsTemplate from './ArrayFieldItemButtonsTemplate';
+import ArrayFieldItemTemplate from './ArrayFieldItemTemplate';
 import ArrayFieldTemplate from './ArrayFieldTemplate';
 import ArrayFieldTitleTemplate from './ArrayFieldTitleTemplate';
 import BaseInputTemplate from './BaseInputTemplate';
@@ -10,9 +10,9 @@ import ButtonTemplates from './ButtonTemplates';
 import DescriptionField from './DescriptionField';
 import ErrorList from './ErrorList';
 import FallbackFieldTemplate from './FallbackFieldTemplate';
-import FieldTemplate from './FieldTemplate';
 import FieldErrorTemplate from './FieldErrorTemplate';
 import FieldHelpTemplate from './FieldHelpTemplate';
+import FieldTemplate from './FieldTemplate';
 import GridTemplate from './GridTemplate';
 import MultiSchemaFieldTemplate from './MultiSchemaFieldTemplate';
 import ObjectFieldTemplate from './ObjectFieldTemplate';

package/src/components/widgets/FileWidget.tsx

@@ -11,7 +11,7 @@ import {
   useFileWidgetProps,
   WidgetProps,
 } from '@rjsf/utils';
-import Markdown from 'markdown-to-jsx';
+import { Markdown } from 'markdown-to-jsx';
 
 function FileInfoPreview<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   fileInfo,
@@ -95,7 +95,8 @@ function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
 
   const handleOnChangeEvent = (event: ChangeEvent<HTMLInputElement>) => {
     if (event.target.files) {
-      handleChange(event.target.files);
+      // handleChange is async; DOM event handlers are void-returning, so we intentionally don't await
+      void handleChange(event.target.files);
     }
   };
 

package/src/components/widgets/index.ts

@@ -1,12 +1,12 @@
 import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
-import AltDateWidget from './AltDateWidget';
 import AltDateTimeWidget from './AltDateTimeWidget';
-import CheckboxWidget from './CheckboxWidget';
+import AltDateWidget from './AltDateWidget';
 import CheckboxesWidget from './CheckboxesWidget';
+import CheckboxWidget from './CheckboxWidget';
 import ColorWidget from './ColorWidget';
-import DateWidget from './DateWidget';
 import DateTimeWidget from './DateTimeWidget';
+import DateWidget from './DateWidget';
 import EmailWidget from './EmailWidget';
 import FileWidget from './FileWidget';
 import HiddenWidget from './HiddenWidget';
@@ -18,8 +18,8 @@ import SelectWidget from './SelectWidget';
 import TextareaWidget from './TextareaWidget';
 import TextWidget from './TextWidget';
 import TimeWidget from './TimeWidget';
-import URLWidget from './URLWidget';
 import UpDownWidget from './UpDownWidget';
+import URLWidget from './URLWidget';
 
 function widgets<
   T = any,

package/src/index.ts

@@ -2,9 +2,9 @@ import Form, { FormProps, FormState, IChangeEvent } from './components/Form';
 import RichDescription, { RichDescriptionProps } from './components/RichDescription';
 import RichHelp, { RichHelpProps } from './components/RichHelp';
 import SchemaExamples, { SchemaExamplesProps } from './components/SchemaExamples';
-import withTheme, { ThemeProps } from './withTheme';
 import getDefaultRegistry from './getDefaultRegistry';
 import getTestRegistry from './getTestRegistry';
+import withTheme, { ThemeProps } from './withTheme';
 
 export type {
   FormProps,

package/src/tsconfig.json

@@ -6,7 +6,6 @@
   "compilerOptions": {
     "rootDir": "./",
     "outDir": "../lib",
-    "baseUrl": "../",
     "jsx": "react-jsx",
     "composite": true
   },

package/src/withTheme.tsx

@@ -1,7 +1,8 @@
 import { ComponentType, ForwardedRef, forwardRef } from 'react';
-import Form, { FormProps } from './components/Form';
 import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
+import Form, { FormProps } from './components/Form';
+
 /** The properties for the `withTheme` function, essentially a subset of properties from the `FormProps` that can be
  * overridden while creating a theme
  */