@rjsf/core 6.5.2 → 6.6.0

package/dist/core.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash/cloneDeep'), require('lodash/get'), require('lodash/isEmpty'), require('lodash/pick'), require('lodash/set'), require('lodash/toPath'), require('lodash/unset'), require('lodash/isObject'), require('lodash/uniqueId'), require('react/jsx-runtime'), require('lodash/each'), require('lodash/flatten'), require('lodash/has'), require('lodash/includes'), require('lodash/intersection'), require('lodash/isFunction'), require('lodash/isEqual'), require('lodash/isPlainObject'), require('lodash/isString'), require('lodash/isUndefined'), require('lodash/last'), require('lodash/noop'), require('lodash/omit'), require('markdown-to-jsx'), require('@rjsf/validator-ajv8')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash/cloneDeep', 'lodash/get', 'lodash/isEmpty', 'lodash/pick', 'lodash/set', 'lodash/toPath', 'lodash/unset', 'lodash/isObject', 'lodash/uniqueId', 'react/jsx-runtime', 'lodash/each', 'lodash/flatten', 'lodash/has', 'lodash/includes', 'lodash/intersection', 'lodash/isFunction', 'lodash/isEqual', 'lodash/isPlainObject', 'lodash/isString', 'lodash/isUndefined', 'lodash/last', 'lodash/noop', 'lodash/omit', 'markdown-to-jsx', '@rjsf/validator-ajv8'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.react, global.utils, global._cloneDeep, global.get, global.isEmpty, global._pick, global.set, global._toPath, global._unset, global.isObject, global.uniqueId, global.jsxRuntime, global.each, global.flatten, global.has, global.includes, global.intersection, global.isFunction, global.isEqual, global.isPlainObject, global.isString, global.isUndefined, global.last, global.noop, global.omit3, global.Markdown, global.validator));
-})(this, (function (exports, react, utils, _cloneDeep, get, isEmpty, _pick, set, _toPath, _unset, isObject, uniqueId, jsxRuntime, each, flatten, has, includes, intersection, isFunction, isEqual, isPlainObject, isString, isUndefined, last, noop, omit3, Markdown, validator) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash/cloneDeep'), require('lodash/get'), require('lodash/isEmpty'), require('lodash/pick'), require('lodash/set'), require('lodash/toPath'), require('lodash/unset'), require('lodash/isObject'), require('lodash/uniqueId'), require('react/jsx-runtime'), require('lodash/each'), require('lodash/flatten'), require('lodash/has'), require('lodash/includes'), require('lodash/intersection'), require('lodash/isEqual'), require('lodash/isFunction'), require('lodash/isPlainObject'), require('lodash/isString'), require('lodash/isUndefined'), require('lodash/last'), require('lodash/noop'), require('lodash/omit'), require('markdown-to-jsx'), require('markdown-to-jsx/react'), require('@rjsf/validator-ajv8')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash/cloneDeep', 'lodash/get', 'lodash/isEmpty', 'lodash/pick', 'lodash/set', 'lodash/toPath', 'lodash/unset', 'lodash/isObject', 'lodash/uniqueId', 'react/jsx-runtime', 'lodash/each', 'lodash/flatten', 'lodash/has', 'lodash/includes', 'lodash/intersection', 'lodash/isEqual', 'lodash/isFunction', 'lodash/isPlainObject', 'lodash/isString', 'lodash/isUndefined', 'lodash/last', 'lodash/noop', 'lodash/omit', 'markdown-to-jsx', 'markdown-to-jsx/react', '@rjsf/validator-ajv8'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.react$1, global.utils, global._cloneDeep, global.get, global.isEmpty, global._pick, global.set, global._toPath, global._unset, global.isObject, global.uniqueId, global.jsxRuntime, global.each, global.flatten, global.has, global.includes, global.intersection, global.isEqual, global.isFunction, global.isPlainObject, global.isString, global.isUndefined, global.last, global.noop, global.omit3, global.markdownToJsx, global.react, global.validator));
+})(this, (function (exports, react$1, utils, _cloneDeep, get, isEmpty, _pick, set, _toPath, _unset, isObject, uniqueId, jsxRuntime, each, flatten, has, includes, intersection, isEqual, isFunction, isPlainObject, isString, isUndefined, last, noop, omit3, markdownToJsx, react, validator) { 'use strict';
 
   // src/components/Form.tsx
   function generateRowId() {
@@ -271,31 +271,31 @@
       toolbar: false
     };
     has4.toolbar = Object.keys(has4).some((key) => has4[key]);
-    const onAddItem = react.useCallback(
+    const onAddItem = react$1.useCallback(
       (event) => {
         handleAddItem(event, index + 1);
       },
       [handleAddItem, index]
     );
-    const onCopyItem = react.useCallback(
+    const onCopyItem = react$1.useCallback(
       (event) => {
         handleCopyItem(event, index);
       },
       [handleCopyItem, index]
     );
-    const onRemoveItem = react.useCallback(
+    const onRemoveItem = react$1.useCallback(
       (event) => {
         handleRemoveItem(event, index);
       },
       [handleRemoveItem, index]
     );
-    const onMoveUpItem = react.useCallback(
+    const onMoveUpItem = react$1.useCallback(
       (event) => {
         handleReorderItems(event, index, index - 1);
       },
       [handleReorderItems, index]
     );
-    const onMoveDownItem = react.useCallback(
+    const onMoveDownItem = react$1.useCallback(
       (event) => {
         handleReorderItems(event, index, index + 1);
       },
@@ -576,8 +576,8 @@
     return /* @__PURE__ */ jsxRuntime.jsx(Template, { ...arrayProps });
   }
   function useKeyedFormData(formData = []) {
-    const newHash = react.useMemo(() => utils.hashObject(formData), [formData]);
-    const [state, setState] = react.useState(() => ({
+    const newHash = react$1.useMemo(() => utils.hashObject(formData), [formData]);
+    const [state, setState] = react$1.useState(() => ({
       formDataHash: newHash,
       keyedFormData: generateKeyedFormData(formData)
     }));
@@ -592,7 +592,7 @@
       formDataHash = newHash;
       setState({ formDataHash, keyedFormData });
     }
-    const updateKeyedFormData = react.useCallback((newData) => {
+    const updateKeyedFormData = react$1.useCallback((newData) => {
       const plainFormData = keyedToPlainFormData(newData);
       const newHash2 = utils.hashObject(plainFormData);
       setState({ formDataHash: newHash2, keyedFormData: newData });
@@ -605,7 +605,7 @@
     const { globalFormOptions, schemaUtils, translateString } = registry;
     const { keyedFormData, updateKeyedFormData } = useKeyedFormData(formData);
     const childFieldPathId = props.childFieldPathId ?? fieldPathId;
-    const handleAddItem = react.useCallback(
+    const handleAddItem = react$1.useCallback(
       (event, index) => {
         if (event) {
           event.preventDefault();
@@ -636,7 +636,7 @@
       },
       [keyedFormData, registry, schema, onChange, updateKeyedFormData, errorSchema, childFieldPathId]
     );
-    const handleCopyItem = react.useCallback(
+    const handleCopyItem = react$1.useCallback(
       (event, index) => {
         if (event) {
           event.preventDefault();
@@ -667,7 +667,7 @@
       },
       [keyedFormData, onChange, updateKeyedFormData, errorSchema, childFieldPathId]
     );
-    const handleRemoveItem = react.useCallback(
+    const handleRemoveItem = react$1.useCallback(
       (event, index) => {
         if (event) {
           event.preventDefault();
@@ -689,7 +689,7 @@
       },
       [keyedFormData, onChange, updateKeyedFormData, errorSchema, childFieldPathId]
     );
-    const handleReorderItems = react.useCallback(
+    const handleReorderItems = react$1.useCallback(
       (event, index, newIndex) => {
         if (event) {
           event.preventDefault();
@@ -720,7 +720,7 @@
       },
       [keyedFormData, onChange, updateKeyedFormData, errorSchema, childFieldPathId]
     );
-    const handleChange = react.useCallback(
+    const handleChange = react$1.useCallback(
       (value, path, newErrorSchema, id) => {
         const lastPathIsItemIndex = typeof path.at(-1) === "number";
         onChange(
@@ -735,7 +735,7 @@
       },
       [onChange]
     );
-    const onSelectChange = react.useCallback(
+    const onSelectChange = react$1.useCallback(
       (value) => {
         onChange(value, childFieldPathId.path, void 0, childFieldPathId?.[utils.ID_KEY]);
       },
@@ -859,7 +859,7 @@
         enumOptions = utils.optionsList({ enum: enums }, uiSchema);
       }
     }
-    const onWidgetChange = react.useCallback(
+    const onWidgetChange = react$1.useCallback(
       (value, errorSchema, id) => {
         return onChange(value, fieldPathId.path, errorSchema, id);
       },
@@ -942,13 +942,13 @@
       errorSchema
     } = props;
     const { translateString, fields: fields2, globalFormOptions } = registry;
-    const [type, setType] = react.useState(getTypeOfFormData(formData));
+    const [type, setType] = react$1.useState(getTypeOfFormData(formData));
     const uiOptions = utils.getUiOptions(uiSchema);
     const typeSelectorInnerFieldPathId = utils.useDeepCompareMemo(
       utils.toFieldPathId("__internal_type_selector", globalFormOptions, fieldPathId)
     );
     const schemaTitle = translateString(utils.TranslatableString.Type);
-    const typesOptionSchema = react.useMemo(() => getFallbackTypeSelectionSchema(schemaTitle), [schemaTitle]);
+    const typesOptionSchema = react$1.useMemo(() => getFallbackTypeSelectionSchema(schemaTitle), [schemaTitle]);
     const onTypeChange = (newType) => {
       if (newType != null) {
         setType(newType);
@@ -1191,7 +1191,7 @@
     const { registry, schema: rawSchema, formData } = layoutGridFieldProps;
     const { schemaUtils } = registry;
     const schema = schemaUtils.retrieveSchema(rawSchema, formData);
-    return childrenLayoutGridSchemaId.map((layoutGridSchema) => /* @__PURE__ */ react.createElement(
+    return childrenLayoutGridSchemaId.map((layoutGridSchema) => /* @__PURE__ */ react$1.createElement(
       LayoutGridField,
       {
         ...layoutGridFieldProps,
@@ -1418,7 +1418,7 @@
       hideError = false
     } = props;
     const { widgets: widgets2, schemaUtils, globalUiOptions } = registry;
-    const [enumOptions, setEnumOptions] = react.useState(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
+    const [enumOptions, setEnumOptions] = react$1.useState(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
     const id = get(fieldPathId, utils.ID_KEY);
     const discriminator = utils.getDiscriminatorFieldFromSchema(schema);
     const FieldErrorTemplate2 = utils.getTemplate("FieldErrorTemplate", registry, options);
@@ -1427,7 +1427,7 @@
     const optionsHash = utils.hashObject(options);
     const uiSchemaHash = uiSchema ? utils.hashObject(uiSchema) : "";
     const formDataHash = formData ? utils.hashObject(formData) : "";
-    react.useEffect(() => {
+    react$1.useEffect(() => {
       setEnumOptions(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
     }, [schemaHash, optionsHash, schemaUtils, uiSchemaHash, formDataHash]);
     const {
@@ -1512,7 +1512,7 @@
       }
     );
   }
-  var AnyOfField = class extends react.Component {
+  var AnyOfField = class extends react$1.Component {
     /** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state
      *
      * @param props - The `FieldProps` for this template
@@ -1710,14 +1710,24 @@
     }
   };
   var MultiSchemaField_default = AnyOfField;
+  function NullField(props) {
+    const { formData, onChange, fieldPathId } = props;
+    react$1.useEffect(() => {
+      if (formData === void 0) {
+        onChange(null, fieldPathId.path);
+      }
+    }, [fieldPathId, formData, onChange]);
+    return null;
+  }
+  var NullField_default = NullField;
   var trailingCharMatcherWithPrefix = /\.([0-9]*0)*$/;
   var trailingCharMatcher = /[0.]0*$/;
   function NumberField(props) {
     const { registry, onChange, formData, value: initialValue } = props;
-    const [lastValue, setLastValue] = react.useState(initialValue);
+    const [lastValue, setLastValue] = react$1.useState(initialValue);
     const { StringField: StringField2 } = registry.fields;
     let value = formData;
-    const handleChange = react.useCallback(
+    const handleChange = react$1.useCallback(
       (value2, path, errorSchema, id) => {
         setLastValue(value2);
         if (`${value2}`.charAt(0) === ".") {
@@ -1739,8 +1749,8 @@
   var NumberField_default = NumberField;
 
   // src/components/constants.ts
-  var ADDITIONAL_PROPERTY_KEY_REMOVE = Symbol("remove-this-key");
-  var IS_RESET = Symbol("reset");
+  var ADDITIONAL_PROPERTY_KEY_REMOVE = /* @__PURE__ */ Symbol("remove-this-key");
+  var IS_RESET = /* @__PURE__ */ Symbol("reset");
   function isRequired(schema, name) {
     return Array.isArray(schema.required) && schema.required.indexOf(name) !== -1;
   }
@@ -1781,13 +1791,13 @@
       handleRemoveProperty,
       addedByAdditionalProperties
     } = props;
-    const [wasPropertyKeyModified, setWasPropertyKeyModified] = react.useState(false);
+    const [wasPropertyKeyModified, setWasPropertyKeyModified] = react$1.useState(false);
     const { globalFormOptions, fields: fields2 } = registry;
     const { SchemaField: SchemaField2 } = fields2;
     const innerFieldIdPathId = utils.useDeepCompareMemo(
       utils.toFieldPathId(propertyName, globalFormOptions, fieldPathId.path)
     );
-    const onPropertyChange = react.useCallback(
+    const onPropertyChange = react$1.useCallback(
       (value, path, newErrorSchema, id) => {
         if (value === void 0 && addedByAdditionalProperties) {
           value = "";
@@ -1796,7 +1806,7 @@
       },
       [onChange, addedByAdditionalProperties]
     );
-    const onKeyRename = react.useCallback(
+    const onKeyRename = react$1.useCallback(
       (value) => {
         if (propertyName !== value) {
           setWasPropertyKeyModified(true);
@@ -1805,7 +1815,7 @@
       },
       [propertyName, handleKeyRename]
     );
-    const onKeyRenameBlur = react.useCallback(
+    const onKeyRenameBlur = react$1.useCallback(
       (event) => {
         const {
           target: { value }
@@ -1814,7 +1824,7 @@
       },
       [onKeyRename]
     );
-    const onRemoveProperty = react.useCallback(() => {
+    const onRemoveProperty = react$1.useCallback(() => {
       handleRemoveProperty(propertyName);
     }, [propertyName, handleRemoveProperty]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1861,19 +1871,19 @@
     } = props;
     const { fields: fields2, schemaUtils, translateString, globalUiOptions } = registry;
     const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
-    const formDataRef = react.useRef(formData);
+    const formDataRef = react$1.useRef(formData);
     formDataRef.current = formData;
     const schema = schemaUtils.retrieveSchema(rawSchema, formData, true);
     const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
     const { properties: schemaProperties = {} } = schema;
     const childFieldPathId = props.childFieldPathId ?? fieldPathId;
-    const lastRenamedProperty = react.useRef({ previousKey: "", currentKey: void 0 });
+    const lastRenamedProperty = react$1.useRef({ previousKey: "", currentKey: void 0 });
     const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
     const description = uiOptions.description ?? schema.description;
     const renderOptionalField = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
     const hasFormData = utils.isFormDataAvailable(formData);
     let orderedProperties = [];
-    const getAvailableKey = react.useCallback(
+    const getAvailableKey = react$1.useCallback(
       (preferredKey, formData2) => {
         const { duplicateKeySuffixSeparator = "-" } = utils.getUiOptions(uiSchema, globalUiOptions);
         let index = 0;
@@ -1885,7 +1895,7 @@
       },
       [uiSchema, globalUiOptions]
     );
-    const onAddProperty = react.useCallback(() => {
+    const onAddProperty = react$1.useCallback(() => {
       if (!(schema.additionalProperties || schema.patternProperties)) {
         return;
       }
@@ -1923,7 +1933,7 @@
       }
       onChange(newFormData, childFieldPathId.path);
     }, [formData, onChange, registry, childFieldPathId, getAvailableKey, schema]);
-    const handleKeyRename = react.useCallback(
+    const handleKeyRename = react$1.useCallback(
       (oldKey, newKey) => {
         if (oldKey !== newKey) {
           const currentFormData = formDataRef.current;
@@ -1947,13 +1957,13 @@
       },
       [onChange, childFieldPathId, getAvailableKey]
     );
-    const handleRemoveProperty = react.useCallback(
+    const handleRemoveProperty = react$1.useCallback(
       (key) => {
         onChange(ADDITIONAL_PROPERTY_KEY_REMOVE, [...childFieldPathId.path, key]);
       },
       [onChange, childFieldPathId]
     );
-    const getStableKey = react.useCallback((property) => {
+    const getStableKey = react$1.useCallback((property) => {
       if (lastRenamedProperty.current.currentKey === property) {
         return lastRenamedProperty.current.previousKey;
       }
@@ -1965,7 +1975,7 @@
         orderedProperties = utils.orderProperties(properties, uiOptions.order);
       } catch (err) {
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rjsf-config-error", style: { color: "red" }, children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { options: { disableParsingRawHTML: true }, children: translateString(utils.TranslatableString.InvalidObjectField, [name || "root", err.message]) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rjsf-config-error", style: { color: "red" }, children: /* @__PURE__ */ jsxRuntime.jsx(markdownToJsx.Markdown, { options: { disableParsingRawHTML: true }, children: translateString(utils.TranslatableString.InvalidObjectField, [name || "root", err.message]) }) }),
           /* @__PURE__ */ jsxRuntime.jsx("pre", { children: JSON.stringify(schema) })
         ] });
       }
@@ -2143,7 +2153,7 @@
     const FieldErrorTemplate2 = utils.getTemplate("FieldErrorTemplate", registry, uiOptions);
     const schema = schemaUtils.retrieveSchema(_schema, formData);
     const fieldId = fieldPathId[utils.ID_KEY];
-    const handleFieldComponentChange = react.useCallback(
+    const handleFieldComponentChange = react$1.useCallback(
       (formData2, path, newErrorSchema, id2) => {
         const theId = id2 || fieldId;
         return onChange(formData2, path, newErrorSchema, theId);
@@ -2151,7 +2161,9 @@
       [fieldId, onChange]
     );
     const FieldComponent = getFieldComponent(schema, uiOptions, registry);
-    const disabled = Boolean(uiOptions.disabled ?? props.disabled);
+    const isDeprecated = Boolean(schema.deprecated);
+    const deprecatedHandling = isDeprecated ? uiOptions.deprecatedHandling ?? "label" : void 0;
+    const disabled = Boolean(uiOptions.disabled ?? props.disabled) || deprecatedHandling === "disable";
     const readonly = Boolean(uiOptions.readonly ?? (props.readonly || props.schema.readOnly || schema.readOnly));
     const uiSchemaHideError = uiOptions.hideError;
     const hideError = uiSchemaHideError === void 0 ? props.hideError : Boolean(uiSchemaHideError);
@@ -2214,9 +2226,12 @@
     } else {
       label = utils.ADDITIONAL_PROPERTY_FLAG in schema ? name : uiOptions.title || props.schema.title || schema.title || props.title || name;
     }
+    if (deprecatedHandling === "label") {
+      label = registry.translateString(utils.TranslatableString.DeprecatedLabel, [label]);
+    }
     const description = uiOptions.description || props.schema.description || schema.description || "";
     const help = uiOptions.help;
-    const hidden = uiOptions.widget === "hidden";
+    const hidden = uiOptions.widget === "hidden" || deprecatedHandling === "hide";
     const classNames = ["rjsf-field", `rjsf-field-${utils.getSchemaType(schema)}`];
     if (!hideError && __errors && __errors.length > 0) {
       classNames.push("rjsf-field-error");
@@ -2306,7 +2321,7 @@
       )
     ] }) });
   }
-  var SchemaField = class extends react.Component {
+  var SchemaField = class extends react$1.Component {
     shouldComponentUpdate(nextProps) {
       const {
         registry: { globalFormOptions }
@@ -2349,7 +2364,7 @@
     const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     const label = uiTitle ?? title ?? schemaTitle ?? name;
     const Widget = utils.getWidget(schema, widget, widgets2);
-    const onWidgetChange = react.useCallback(
+    const onWidgetChange = react$1.useCallback(
       (value, errorSchema, id) => {
         return onChange(value, fieldPathId.path, errorSchema, id);
       },
@@ -2382,16 +2397,6 @@
     );
   }
   var StringField_default = StringField;
-  function NullField(props) {
-    const { formData, onChange, fieldPathId } = props;
-    react.useEffect(() => {
-      if (formData === void 0) {
-        onChange(null, fieldPathId.path);
-      }
-    }, [fieldPathId, formData, onChange]);
-    return null;
-  }
-  var NullField_default = NullField;
 
   // src/components/fields/index.ts
   function fields() {
@@ -2437,28 +2442,6 @@
       }
     );
   }
-  function ArrayFieldItemTemplate(props) {
-    const { children, className, buttonsProps, displayLabel, hasDescription, hasToolbar, registry, uiSchema } = props;
-    const uiOptions = utils.getUiOptions(uiSchema);
-    const ArrayFieldItemButtonsTemplate2 = utils.getTemplate(
-      "ArrayFieldItemButtonsTemplate",
-      registry,
-      uiOptions
-    );
-    const btnStyle = {
-      flex: 1,
-      paddingLeft: 6,
-      paddingRight: 6,
-      fontWeight: "bold"
-    };
-    const margin = hasDescription ? 31 : 9;
-    const containerStyle = { display: "flex", alignItems: displayLabel ? "center" : "baseline" };
-    const toolbarStyle = { display: "flex", justifyContent: "flex-end", marginTop: displayLabel ? `${margin}px` : 0 };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: containerStyle, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: hasToolbar ? "col-xs-9 col-md-10 col-xl-11" : "col-xs-12", children }),
-      hasToolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-xs-3 col-md-2 col-xl-1 array-item-toolbox", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "btn-group", style: toolbarStyle, children: /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemButtonsTemplate2, { ...buttonsProps, style: btnStyle }) }) })
-    ] });
-  }
   function ArrayFieldItemButtonsTemplate(props) {
     const {
       disabled,
@@ -2523,6 +2506,28 @@
       )
     ] });
   }
+  function ArrayFieldItemTemplate(props) {
+    const { children, className, buttonsProps, displayLabel, hasDescription, hasToolbar, registry, uiSchema } = props;
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const ArrayFieldItemButtonsTemplate2 = utils.getTemplate(
+      "ArrayFieldItemButtonsTemplate",
+      registry,
+      uiOptions
+    );
+    const btnStyle = {
+      flex: 1,
+      paddingLeft: 6,
+      paddingRight: 6,
+      fontWeight: "bold"
+    };
+    const margin = hasDescription ? 31 : 9;
+    const containerStyle = { display: "flex", alignItems: displayLabel ? "center" : "baseline" };
+    const toolbarStyle = { display: "flex", justifyContent: "flex-end", marginTop: displayLabel ? `${margin}px` : 0 };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: containerStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: hasToolbar ? "col-xs-9 col-md-10 col-xl-11" : "col-xs-12", children }),
+      hasToolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-xs-3 col-md-2 col-xl-1 array-item-toolbox", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "btn-group", style: toolbarStyle, children: /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemButtonsTemplate2, { ...buttonsProps, style: btnStyle }) }) })
+    ] });
+  }
   function ArrayFieldTemplate(props) {
     const {
       canAdd,
@@ -2670,19 +2675,19 @@
     } else {
       inputValue = value == null ? "" : value;
     }
-    const _onChange = react.useCallback(
+    const _onChange = react$1.useCallback(
       ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2),
       [onChange, options]
     );
-    const _onBlur = react.useCallback(
+    const _onBlur = react$1.useCallback(
       ({ target }) => onBlur(id, target && target.value),
       [onBlur, id]
     );
-    const _onFocus = react.useCallback(
+    const _onFocus = react$1.useCallback(
       ({ target }) => onFocus(id, target && target.value),
       [onFocus, id]
     );
-    const _onClear = react.useCallback(
+    const _onClear = react$1.useCallback(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -2713,13 +2718,6 @@
       /* @__PURE__ */ jsxRuntime.jsx(SchemaExamples, { id, schema })
     ] });
   }
-  function SubmitButton({ uiSchema }) {
-    const { submitText, norender, props: submitButtonProps = {} } = utils.getSubmitButtonOptions(uiSchema);
-    if (norender) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", ...submitButtonProps, className: `btn btn-info ${submitButtonProps.className || ""}`, children: submitText }) });
-  }
   function IconButton(props) {
     const { iconType = "default", icon, className, uiSchema, registry, ...otherProps } = props;
     return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: `btn btn-${iconType} ${className}`, ...otherProps, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: `glyphicon glyphicon-${icon}` }) });
@@ -2800,6 +2798,13 @@
       }
     ) });
   }
+  function SubmitButton({ uiSchema }) {
+    const { submitText, norender, props: submitButtonProps = {} } = utils.getSubmitButtonOptions(uiSchema);
+    if (norender) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", ...submitButtonProps, className: `btn btn-info ${submitButtonProps.className || ""}`, children: submitText }) });
+  }
 
   // src/components/templates/ButtonTemplates/index.ts
   function buttonTemplates() {
@@ -2819,7 +2824,7 @@
     const { globalUiOptions } = registry;
     const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
     if (uiOptions.enableMarkdownInDescription && typeof description === "string") {
-      return /* @__PURE__ */ jsxRuntime.jsx(Markdown, { options: { disableParsingRawHTML: true }, "data-testid": TEST_IDS.markdown, children: description });
+      return /* @__PURE__ */ jsxRuntime.jsx(react.Markdown, { options: { disableParsingRawHTML: true }, "data-testid": TEST_IDS.markdown, children: description });
     }
     return description;
   }
@@ -2859,6 +2864,37 @@
       }
     );
   }
+  function FieldErrorTemplate(props) {
+    const { errors = [], fieldPathId } = props;
+    if (errors.length === 0) {
+      return null;
+    }
+    const id = utils.errorId(fieldPathId);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("ul", { id, className: "error-detail bs-callout bs-callout-info", children: errors.filter((elem) => !!elem).map((error, index) => {
+      return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-danger", children: error }, index);
+    }) }) });
+  }
+  var TEST_IDS2 = utils.getTestIds();
+  function RichHelp({
+    help,
+    registry,
+    uiSchema = {}
+  }) {
+    const { globalUiOptions } = registry;
+    const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
+    if (uiOptions.enableMarkdownInHelp && typeof help === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsx(react.Markdown, { options: { disableParsingRawHTML: true }, "data-testid": TEST_IDS2.markdown, children: help });
+    }
+    return help;
+  }
+  RichHelp.TEST_IDS = TEST_IDS2;
+  function FieldHelpTemplate(props) {
+    const { fieldPathId, help, uiSchema, registry } = props;
+    if (!help) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { id: utils.helpId(fieldPathId), className: "help-block", children: /* @__PURE__ */ jsxRuntime.jsx(RichHelp, { help, registry, uiSchema }) });
+  }
   var REQUIRED_FIELD_SYMBOL = "*";
   function Label(props) {
     const { label, required, id } = props;
@@ -2893,37 +2929,6 @@
 
   // src/components/templates/FieldTemplate/index.ts
   var FieldTemplate_default = FieldTemplate;
-  function FieldErrorTemplate(props) {
-    const { errors = [], fieldPathId } = props;
-    if (errors.length === 0) {
-      return null;
-    }
-    const id = utils.errorId(fieldPathId);
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("ul", { id, className: "error-detail bs-callout bs-callout-info", children: errors.filter((elem) => !!elem).map((error, index) => {
-      return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-danger", children: error }, index);
-    }) }) });
-  }
-  var TEST_IDS2 = utils.getTestIds();
-  function RichHelp({
-    help,
-    registry,
-    uiSchema = {}
-  }) {
-    const { globalUiOptions } = registry;
-    const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
-    if (uiOptions.enableMarkdownInHelp && typeof help === "string") {
-      return /* @__PURE__ */ jsxRuntime.jsx(Markdown, { options: { disableParsingRawHTML: true }, "data-testid": TEST_IDS2.markdown, children: help });
-    }
-    return help;
-  }
-  RichHelp.TEST_IDS = TEST_IDS2;
-  function FieldHelpTemplate(props) {
-    const { fieldPathId, help, uiSchema, registry } = props;
-    if (!help) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { id: utils.helpId(fieldPathId), className: "help-block", children: /* @__PURE__ */ jsxRuntime.jsx(RichHelp, { help, registry, uiSchema }) });
-  }
   function GridTemplate(props) {
     const { children, column, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, ...rest, children });
@@ -3057,7 +3062,7 @@
       translateParams.push(reason);
     }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "unsupported-field", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { options: { disableParsingRawHTML: true }, children: translateString(translateEnum, translateParams) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx(markdownToJsx.Markdown, { options: { disableParsingRawHTML: true }, children: translateString(translateEnum, translateParams) }) }),
       schema && /* @__PURE__ */ jsxRuntime.jsx("pre", { children: JSON.stringify(schema, null, 2) })
     ] });
   }
@@ -3154,6 +3159,14 @@
     };
   }
   var templates_default = templates;
+  function AltDateTimeWidget({
+    time = true,
+    ...props
+  }) {
+    const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
+    return /* @__PURE__ */ jsxRuntime.jsx(AltDateWidget2, { time, ...props });
+  }
+  var AltDateTimeWidget_default = AltDateTimeWidget;
   function AltDateWidget(props) {
     const { disabled = false, readonly = false, autofocus = false, options, id, name, registry, onBlur, onFocus } = props;
     const { translateString } = registry;
@@ -3179,14 +3192,63 @@
     ] });
   }
   var AltDateWidget_default = AltDateWidget;
-  function AltDateTimeWidget({
-    time = true,
-    ...props
+  function CheckboxesWidget({
+    id,
+    disabled,
+    options,
+    value,
+    autofocus = false,
+    readonly,
+    onChange,
+    onBlur,
+    onFocus,
+    htmlName
   }) {
-    const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
-    return /* @__PURE__ */ jsxRuntime.jsx(AltDateWidget2, { time, ...props });
+    const { inline = false, enumOptions, enumDisabled, emptyValue } = options;
+    const optionValueFormat = utils.getOptionValueFormat(options);
+    const checkboxesValues = Array.isArray(value) ? value : [value];
+    const handleBlur = react$1.useCallback(
+      ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      [onBlur, id, enumOptions, emptyValue, optionValueFormat]
+    );
+    const handleFocus = react$1.useCallback(
+      ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      [onFocus, id, enumOptions, emptyValue, optionValueFormat]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "checkboxes", id, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+      const checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
+      const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+      const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
+      const handleChange = (event) => {
+        if (event.target.checked) {
+          onChange(utils.enumOptionsSelectValue(index, checkboxesValues, enumOptions));
+        } else {
+          onChange(utils.enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
+        }
+      };
+      const checkbox = /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            id: utils.optionId(id, index),
+            name: htmlName || id,
+            checked,
+            value: utils.enumOptionValueEncoder(option.value, index, optionValueFormat),
+            disabled: disabled || itemDisabled || readonly,
+            autoFocus: autofocus && index === 0,
+            onChange: handleChange,
+            onBlur: handleBlur,
+            onFocus: handleFocus,
+            "aria-describedby": utils.ariaDescribedByIds(id)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
+      ] });
+      return inline ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: `checkbox-inline ${disabledCls}`, children: checkbox }, index) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `checkbox ${disabledCls}`, children: /* @__PURE__ */ jsxRuntime.jsx("label", { children: checkbox }) }, index);
+    }) });
   }
-  var AltDateTimeWidget_default = AltDateTimeWidget;
+  var CheckboxesWidget_default = CheckboxesWidget;
   function CheckboxWidget({
     schema,
     uiSchema,
@@ -3210,15 +3272,15 @@
       options
     );
     const required = utils.schemaRequiresTrueValue(schema);
-    const handleChange = react.useCallback(
+    const handleChange = react$1.useCallback(
       (event) => onChange(event.target.checked),
       [onChange]
     );
-    const handleBlur = react.useCallback(
+    const handleBlur = react$1.useCallback(
       (event) => onBlur(id, event.target.checked),
       [onBlur, id]
     );
-    const handleFocus = react.useCallback(
+    const handleFocus = react$1.useCallback(
       (event) => onFocus(id, event.target.checked),
       [onFocus, id]
     );
@@ -3258,74 +3320,11 @@
     ] });
   }
   var CheckboxWidget_default = CheckboxWidget;
-  function CheckboxesWidget({
-    id,
-    disabled,
-    options,
-    value,
-    autofocus = false,
-    readonly,
-    onChange,
-    onBlur,
-    onFocus,
-    htmlName
-  }) {
-    const { inline = false, enumOptions, enumDisabled, emptyValue } = options;
-    const optionValueFormat = utils.getOptionValueFormat(options);
-    const checkboxesValues = Array.isArray(value) ? value : [value];
-    const handleBlur = react.useCallback(
-      ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
-      [onBlur, id, enumOptions, emptyValue, optionValueFormat]
-    );
-    const handleFocus = react.useCallback(
-      ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
-      [onFocus, id, enumOptions, emptyValue, optionValueFormat]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "checkboxes", id, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
-      const checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
-      const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-      const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
-      const handleChange = (event) => {
-        if (event.target.checked) {
-          onChange(utils.enumOptionsSelectValue(index, checkboxesValues, enumOptions));
-        } else {
-          onChange(utils.enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
-        }
-      };
-      const checkbox = /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "checkbox",
-            id: utils.optionId(id, index),
-            name: htmlName || id,
-            checked,
-            value: utils.enumOptionValueEncoder(option.value, index, optionValueFormat),
-            disabled: disabled || itemDisabled || readonly,
-            autoFocus: autofocus && index === 0,
-            onChange: handleChange,
-            onBlur: handleBlur,
-            onFocus: handleFocus,
-            "aria-describedby": utils.ariaDescribedByIds(id)
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
-      ] });
-      return inline ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: `checkbox-inline ${disabledCls}`, children: checkbox }, index) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `checkbox ${disabledCls}`, children: /* @__PURE__ */ jsxRuntime.jsx("label", { children: checkbox }) }, index);
-    }) });
-  }
-  var CheckboxesWidget_default = CheckboxesWidget;
   function ColorWidget(props) {
     const { disabled, readonly, options, registry } = props;
     const BaseInputTemplate2 = utils.getTemplate("BaseInputTemplate", registry, options);
     return /* @__PURE__ */ jsxRuntime.jsx(BaseInputTemplate2, { type: "color", ...props, disabled: disabled || readonly });
   }
-  function DateWidget(props) {
-    const { onChange, options, registry } = props;
-    const BaseInputTemplate2 = utils.getTemplate("BaseInputTemplate", registry, options);
-    const handleChange = react.useCallback((value) => onChange(value || void 0), [onChange]);
-    return /* @__PURE__ */ jsxRuntime.jsx(BaseInputTemplate2, { type: "date", ...props, onChange: handleChange });
-  }
   function DateTimeWidget(props) {
     const { onChange, value, options, registry } = props;
     const BaseInputTemplate2 = utils.getTemplate("BaseInputTemplate", registry, options);
@@ -3339,6 +3338,12 @@
       }
     );
   }
+  function DateWidget(props) {
+    const { onChange, options, registry } = props;
+    const BaseInputTemplate2 = utils.getTemplate("BaseInputTemplate", registry, options);
+    const handleChange = react$1.useCallback((value) => onChange(value || void 0), [onChange]);
+    return /* @__PURE__ */ jsxRuntime.jsx(BaseInputTemplate2, { type: "date", ...props, onChange: handleChange });
+  }
   function EmailWidget(props) {
     const { options, registry } = props;
     const BaseInputTemplate2 = utils.getTemplate("BaseInputTemplate", registry, options);
@@ -3377,7 +3382,7 @@
       const { name, size, type } = fileInfo;
       const handleRemove = () => onRemove(key);
       return /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Markdown, { children: translateString(utils.TranslatableString.FilesInfo, [name, type, String(size)]) }),
+        /* @__PURE__ */ jsxRuntime.jsx(markdownToJsx.Markdown, { children: translateString(utils.TranslatableString.FilesInfo, [name, type, String(size)]) }),
         preview && /* @__PURE__ */ jsxRuntime.jsx(FileInfoPreview, { fileInfo, registry }),
         /* @__PURE__ */ jsxRuntime.jsx(RemoveButton2, { onClick: handleRemove, registry })
       ] }, key);
@@ -3389,7 +3394,7 @@
     const BaseInputTemplate2 = utils.getTemplate("BaseInputTemplate", registry, options);
     const handleOnChangeEvent = (event) => {
       if (event.target.files) {
-        handleChange(event.target.files);
+        void handleChange(event.target.files);
       }
     };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -3446,11 +3451,11 @@
   }) {
     const { enumOptions, enumDisabled, inline, emptyValue } = options;
     const optionValueFormat = utils.getOptionValueFormat(options);
-    const handleBlur = react.useCallback(
+    const handleBlur = react$1.useCallback(
       ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
       [onBlur, enumOptions, emptyValue, id, optionValueFormat]
     );
-    const handleFocus = react.useCallback(
+    const handleFocus = react$1.useCallback(
       ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
       [onFocus, enumOptions, emptyValue, id, optionValueFormat]
     );
@@ -3512,7 +3517,7 @@
     const { stars = 5, shape = "star" } = options;
     const numStars = schema.maximum ? Math.min(schema.maximum, 5) : Math.min(Math.max(stars, 1), 5);
     const min = schema.minimum || 0;
-    const handleStarClick = react.useCallback(
+    const handleStarClick = react$1.useCallback(
       (starValue) => {
         if (!disabled && !readonly) {
           onChange(starValue);
@@ -3520,7 +3525,7 @@
       },
       [onChange, disabled, readonly]
     );
-    const handleFocus = react.useCallback(
+    const handleFocus = react$1.useCallback(
       (event) => {
         if (onFocus) {
           const starValue = Number(event.target.dataset.value);
@@ -3529,7 +3534,7 @@
       },
       [onFocus, id]
     );
-    const handleBlur = react.useCallback(
+    const handleBlur = react$1.useCallback(
       (event) => {
         if (onBlur) {
           const starValue = Number(event.target.dataset.value);
@@ -3620,21 +3625,21 @@
     const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
     const emptyValue = multiple ? [] : "";
     const optionValueFormat = utils.getOptionValueFormat(options);
-    const handleFocus = react.useCallback(
+    const handleFocus = react$1.useCallback(
       (event) => {
         const newValue = getValue(event, multiple);
         return onFocus(id, utils.enumOptionValueDecoder(newValue, enumOptions, optionValueFormat, optEmptyVal));
       },
       [onFocus, id, multiple, enumOptions, optEmptyVal, optionValueFormat]
     );
-    const handleBlur = react.useCallback(
+    const handleBlur = react$1.useCallback(
       (event) => {
         const newValue = getValue(event, multiple);
         return onBlur(id, utils.enumOptionValueDecoder(newValue, enumOptions, optionValueFormat, optEmptyVal));
       },
       [onBlur, id, multiple, enumOptions, optEmptyVal, optionValueFormat]
     );
-    const handleChange = react.useCallback(
+    const handleChange = react$1.useCallback(
       (event) => {
         const newValue = getValue(event, multiple);
         return onChange(utils.enumOptionValueDecoder(newValue, enumOptions, optionValueFormat, optEmptyVal));
@@ -3684,15 +3689,15 @@
     onFocus,
     htmlName
   }) {
-    const handleChange = react.useCallback(
+    const handleChange = react$1.useCallback(
       ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2),
       [onChange, options.emptyValue]
     );
-    const handleBlur = react.useCallback(
+    const handleBlur = react$1.useCallback(
       ({ target }) => onBlur(id, target && target.value),
       [onBlur, id]
     );
-    const handleFocus = react.useCallback(
+    const handleFocus = react$1.useCallback(
       ({ target }) => onFocus(id, target && target.value),
       [id, onFocus]
     );
@@ -3725,18 +3730,18 @@
   function TimeWidget(props) {
     const { onChange, options, registry } = props;
     const BaseInputTemplate2 = utils.getTemplate("BaseInputTemplate", registry, options);
-    const handleChange = react.useCallback((value) => onChange(value ? `${value}:00` : void 0), [onChange]);
+    const handleChange = react$1.useCallback((value) => onChange(value ? `${value}:00` : void 0), [onChange]);
     return /* @__PURE__ */ jsxRuntime.jsx(BaseInputTemplate2, { type: "time", ...props, onChange: handleChange });
   }
-  function URLWidget(props) {
+  function UpDownWidget(props) {
     const { options, registry } = props;
     const BaseInputTemplate2 = utils.getTemplate("BaseInputTemplate", registry, options);
-    return /* @__PURE__ */ jsxRuntime.jsx(BaseInputTemplate2, { type: "url", ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(BaseInputTemplate2, { type: "number", ...props });
   }
-  function UpDownWidget(props) {
+  function URLWidget(props) {
     const { options, registry } = props;
     const BaseInputTemplate2 = utils.getTemplate("BaseInputTemplate", registry, options);
-    return /* @__PURE__ */ jsxRuntime.jsx(BaseInputTemplate2, { type: "number", ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(BaseInputTemplate2, { type: "url", ...props });
   }
 
   // src/components/widgets/index.ts
@@ -3788,7 +3793,7 @@
       ...status !== void 0 && { status }
     };
   }
-  var Form = class extends react.Component {
+  var Form = class extends react$1.Component {
     /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
      * provide any possible type here
      */
@@ -3848,7 +3853,7 @@
       if (onChange && !utils.deepEquals(this.state.formData, formData)) {
         onChange(toIChangeEvent(this.state));
       }
-      this.formElement = react.createRef();
+      this.formElement = react$1.createRef();
     }
     /**
      * `getSnapshotBeforeUpdate` is a React lifecycle method that is invoked right before the most recently rendered
@@ -4217,7 +4222,7 @@
       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;
       let mergeBaseErrorSchema = schemaValidationErrorSchema;
@@ -4232,7 +4237,26 @@
         if (newValue === ADDITIONAL_PROPERTY_KEY_REMOVE) {
           _unset(formData, path);
         } else if (!isRootPath) {
-          set(formData, path, newValue);
+          let unsetPath = false;
+          let valueForPath = newValue;
+          if (newValue === void 0) {
+            const lastSegment = path[path.length - 1];
+            if (typeof lastSegment === "number") {
+              valueForPath = null;
+            } else {
+              const { field } = schemaUtils.findFieldInSchema(schema, path, oldFormData);
+              const leaf = field;
+              const isOneOfOrAnyOfLeaf = leaf && (utils.ONE_OF_KEY in leaf || utils.ANY_OF_KEY in leaf);
+              if (!isOneOfOrAnyOfLeaf && leaf !== void 0) {
+                unsetPath = true;
+              }
+            }
+          }
+          if (unsetPath) {
+            _unset(formData, path);
+          } else {
+            set(formData, path, valueForPath);
+          }
         }
         const newState = this.getStateFromProps(this.props, inputForDefaults, void 0, void 0, void 0, true);
         formData = newState.formData;
@@ -4247,18 +4271,6 @@
           formData: newFormData
         };
       }
-      if (removeEmptyOptionalObjects) {
-        newFormData = utils.removeOptionalEmptyObjects(
-          schemaUtils.getValidator(),
-          schema,
-          schemaUtils.getRootSchema(),
-          newFormData
-        );
-        state = {
-          ...state,
-          formData: newFormData
-        };
-      }
       if (newErrorSchema) {
         const oldValidationError = !isRootPath ? get(schemaValidationErrorSchema, path) : schemaValidationErrorSchema;
         if (!isEmpty(oldValidationError)) {
@@ -4360,33 +4372,24 @@
      * @param data - The data associated with the field that was blurred
      */
     onBlur = (id, data) => {
-      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 = formData;
         let state = { formData: newFormData };
         if (omitExtraData === true && liveOmit === "onBlur") {
           newFormData = this.omitExtraData(formData);
           state = { formData: newFormData };
         }
-        if (removeEmptyOptionalObjects) {
-          newFormData = utils.removeOptionalEmptyObjects(
-            schemaUtils.getValidator(),
-            schema,
-            schemaUtils.getRootSchema(),
-            newFormData
-          );
-          state = { ...state, formData: newFormData };
-        }
         if (liveValidate === "onBlur") {
-          const { schema: schema2, schemaUtils: schemaUtils2, errorSchema, customErrors, retrievedSchema } = this.state;
+          const { schema, schemaUtils, errorSchema, customErrors, retrievedSchema } = this.state;
           const liveValidation = this.liveValidate(
-            schema2,
-            schemaUtils2,
+            schema,
+            schemaUtils,
             errorSchema,
             newFormData,
             extraErrors,
@@ -4433,20 +4436,11 @@
         return;
       }
       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 = utils.removeOptionalEmptyObjects(
-          schemaUtils.getValidator(),
-          schema,
-          schemaUtils.getRootSchema(),
-          newFormData
-        );
-      }
       if (noValidate || this.validateFormWithFormData(newFormData)) {
         const errorSchema = extraErrors || {};
         const errors = extraErrors ? utils.toErrorList(extraErrors) : [];
@@ -4611,20 +4605,11 @@
      * @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 = utils.removeOptionalEmptyObjects(
-          schemaUtils.getValidator(),
-          schema,
-          schemaUtils.getRootSchema(),
-          newFormData
-        );
-      }
       return this.validateFormWithFormData(newFormData);
     }
     /** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
@@ -4701,8 +4686,26 @@
       );
     }
   };
+  function getTestRegistry(rootSchema, fields2 = {}, templates2 = {}, widgets2 = {}, formContext = {}, globalFormOptions = {
+    idPrefix: utils.DEFAULT_ID_PREFIX,
+    idSeparator: utils.DEFAULT_ID_SEPARATOR,
+    useFallbackUiForUnsupportedType: false
+  }) {
+    const defaults = getDefaultRegistry();
+    const schemaUtils = utils.createSchemaUtils(validator, rootSchema);
+    return {
+      fields: { ...defaults.fields, ...fields2 },
+      templates: { ...defaults.templates, ...templates2 },
+      widgets: { ...defaults.widgets, ...widgets2 },
+      formContext,
+      rootSchema,
+      schemaUtils,
+      translateString: utils.englishStringTranslator,
+      globalFormOptions
+    };
+  }
   function withTheme(themeProps) {
-    return react.forwardRef(
+    return react$1.forwardRef(
       ({ fields: fields2, widgets: widgets2, templates: templates2, ...directProps }, ref) => {
         fields2 = { ...themeProps?.fields, ...fields2 };
         widgets2 = { ...themeProps?.widgets, ...widgets2 };
@@ -4728,24 +4731,6 @@
       }
     );
   }
-  function getTestRegistry(rootSchema, fields2 = {}, templates2 = {}, widgets2 = {}, formContext = {}, globalFormOptions = {
-    idPrefix: utils.DEFAULT_ID_PREFIX,
-    idSeparator: utils.DEFAULT_ID_SEPARATOR,
-    useFallbackUiForUnsupportedType: false
-  }) {
-    const defaults = getDefaultRegistry();
-    const schemaUtils = utils.createSchemaUtils(validator, rootSchema);
-    return {
-      fields: { ...defaults.fields, ...fields2 },
-      templates: { ...defaults.templates, ...templates2 },
-      widgets: { ...defaults.widgets, ...widgets2 },
-      formContext,
-      rootSchema,
-      schemaUtils,
-      translateString: utils.englishStringTranslator,
-      globalFormOptions
-    };
-  }
 
   // src/index.ts
   var index_default = Form;