@rjsf/core 6.6.1 → 6.7.0

package/dist/core.umd.js

@@ -1,20 +1,18 @@
 (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/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';
+  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/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/react', '@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.isEqual, global.isFunction, global.isPlainObject, global.isString, global.isUndefined, global.last, global.noop, global.omit3, global.react$1, global.validator));
+})(this, (function (exports, react, utils, _cloneDeep, get, isEmpty, _pick, set, _toPath, _unset, isObject, uniqueId, jsxRuntime, each, flatten, has, includes, intersection, isEqual, isFunction, isPlainObject, isString, isUndefined, last, noop, omit3, react$1, validator) { 'use strict';
 
   // src/components/Form.tsx
   function generateRowId() {
     return uniqueId("rjsf-array-item-");
   }
   function generateKeyedFormData(formData) {
-    return !Array.isArray(formData) ? [] : formData.map((item) => {
-      return {
-        key: generateRowId(),
-        item
-      };
-    });
+    return !Array.isArray(formData) ? [] : formData.map((item) => ({
+      key: generateRowId(),
+      item
+    }));
   }
   function keyedToPlainFormData(keyedFormData) {
     if (Array.isArray(keyedFormData)) {
@@ -215,7 +213,7 @@
       }
     );
   }
-  function ArrayFieldItem(props) {
+  function ArrayFieldItemInner(props) {
     const {
       itemKey,
       index,
@@ -230,10 +228,10 @@
       canRemove = true,
       canMoveUp,
       canMoveDown,
-      itemSchema,
+      rawItemSchema,
       itemData,
       itemUiSchema,
-      itemFieldPathId,
+      parentFieldPathId,
       itemErrorSchema,
       autofocus,
       onBlur,
@@ -250,9 +248,17 @@
     const {
       schemaUtils,
       fields: { ArraySchemaField, SchemaField: SchemaField2 },
-      globalUiOptions
+      globalUiOptions,
+      globalFormOptions
     } = registry;
-    const fieldPathId = utils.useDeepCompareMemo(itemFieldPathId);
+    const itemSchema = react.useMemo(
+      () => schemaUtils.retrieveSchema(rawItemSchema, itemData),
+      [schemaUtils, rawItemSchema, itemData]
+    );
+    const fieldPathId = react.useMemo(
+      () => utils.toFieldPathId(index, globalFormOptions, parentFieldPathId),
+      [index, globalFormOptions, parentFieldPathId]
+    );
     const ItemSchemaField = ArraySchemaField || SchemaField2;
     const ArrayFieldItemTemplate2 = utils.getTemplate(
       "ArrayFieldItemTemplate",
@@ -271,31 +277,31 @@
       toolbar: false
     };
     has4.toolbar = Object.keys(has4).some((key) => has4[key]);
-    const onAddItem = react$1.useCallback(
+    const onAddItem = react.useCallback(
       (event) => {
         handleAddItem(event, index + 1);
       },
       [handleAddItem, index]
     );
-    const onCopyItem = react$1.useCallback(
+    const onCopyItem = react.useCallback(
       (event) => {
         handleCopyItem(event, index);
       },
       [handleCopyItem, index]
     );
-    const onRemoveItem = react$1.useCallback(
+    const onRemoveItem = react.useCallback(
       (event) => {
         handleRemoveItem(event, index);
       },
       [handleRemoveItem, index]
     );
-    const onMoveUpItem = react$1.useCallback(
+    const onMoveUpItem = react.useCallback(
       (event) => {
         handleReorderItems(event, index, index - 1);
       },
       [handleReorderItems, index]
     );
-    const onMoveDownItem = react$1.useCallback(
+    const onMoveDownItem = react.useCallback(
       (event) => {
         handleReorderItems(event, index, index + 1);
       },
@@ -361,6 +367,7 @@
     };
     return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemTemplate2, { ...templateProps });
   }
+  var ArrayFieldItem = react.memo(ArrayFieldItemInner);
   function NormalArray(props) {
     const {
       schema,
@@ -387,15 +394,18 @@
       handleReorderItems
     } = props;
     const fieldTitle = schema.title || title || name;
-    const { schemaUtils, fields: fields2, formContext, globalFormOptions, globalUiOptions } = registry;
+    const { schemaUtils, fields: fields2, formContext, globalUiOptions } = registry;
     const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
-    const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
-    const _schemaItems = isObject(schema.items) ? schema.items : {};
-    const itemsSchema = schemaUtils.retrieveSchema(_schemaItems);
-    const formData = keyedToPlainFormData(keyedFormData);
+    const uiOptions = react.useMemo(() => utils.getUiOptions(uiSchema, globalUiOptions), [uiSchema, globalUiOptions]);
+    const schemaItems = react.useMemo(() => isObject(schema.items) ? schema.items : {}, [schema.items]);
+    const itemsSchema = react.useMemo(() => schemaUtils.retrieveSchema(schemaItems), [schemaUtils, schemaItems]);
+    const formData = react.useMemo(() => keyedToPlainFormData(keyedFormData), [keyedFormData]);
     const renderOptionalField = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
     const hasFormData = utils.isFormDataAvailable(formDataFromProps);
-    const canAdd = canAddItem(registry, schema, formData, uiSchema) && (!renderOptionalField || hasFormData);
+    const canAdd = react.useMemo(
+      () => canAddItem(registry, schema, formData, uiSchema) && (!renderOptionalField || hasFormData),
+      [registry, schema, formData, uiSchema, renderOptionalField, hasFormData]
+    );
     const actualFormData = hasFormData ? keyedFormData : [];
     const extraClass = renderOptionalField ? " rjsf-optional-array-field" : "";
     const childFieldPathId = props.childFieldPathId ?? fieldPathId;
@@ -405,9 +415,7 @@
       items: actualFormData.map((keyedItem, index) => {
         const { key, item } = keyedItem;
         const itemCast = item;
-        const itemSchema = schemaUtils.retrieveSchema(_schemaItems, itemCast);
         const itemErrorSchema = errorSchema ? errorSchema[index] : void 0;
-        const itemFieldPathId = utils.toFieldPathId(index, globalFormOptions, childFieldPathId);
         const itemUiSchema = computeItemUiSchema(uiSchema, item, index, formContext);
         const itemProps = {
           itemKey: key,
@@ -424,8 +432,8 @@
           canAdd,
           canMoveUp: index > 0,
           canMoveDown: index < formData.length - 1,
-          itemSchema,
-          itemFieldPathId,
+          rawItemSchema: schemaItems,
+          parentFieldPathId: childFieldPathId,
           itemErrorSchema,
           itemData: itemCast,
           itemUiSchema,
@@ -486,24 +494,24 @@
     } = props;
     let { formData: items = [] } = props;
     const fieldTitle = schema.title || title || name;
-    const { schemaUtils, fields: fields2, formContext, globalFormOptions, globalUiOptions } = registry;
-    const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
+    const { fields: fields2, formContext, globalUiOptions } = registry;
+    const uiOptions = react.useMemo(() => utils.getUiOptions(uiSchema, globalUiOptions), [uiSchema, globalUiOptions]);
     const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
     const renderOptionalField = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
     const hasFormData = utils.isFormDataAvailable(formData);
-    const _schemaItems = isObject(schema.items) ? schema.items : [];
-    const itemSchemas = _schemaItems.map(
-      (item, index) => schemaUtils.retrieveSchema(item, items[index])
+    const schemaItems = react.useMemo(
+      () => isObject(schema.items) ? schema.items : [],
+      [schema.items]
     );
-    const additionalSchema = isObject(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, formData) : null;
+    const hasAdditionalItems = isObject(schema.additionalItems);
     const childFieldPathId = props.childFieldPathId ?? fieldPathId;
-    if (items.length < itemSchemas.length) {
-      items = items.concat(new Array(itemSchemas.length - items.length));
+    if (items.length < schemaItems.length) {
+      items = items.concat(new Array(schemaItems.length - items.length));
     }
     const actualFormData = hasFormData ? keyedFormData : [];
     const extraClass = renderOptionalField ? " rjsf-optional-array-field" : "";
     const optionalDataControl = renderOptionalField ? /* @__PURE__ */ jsxRuntime.jsx(OptionalDataControlsField2, { ...props, fieldPathId: childFieldPathId }) : void 0;
-    const canAdd = canAddItem(registry, schema, items, uiSchema) && !!additionalSchema && (!renderOptionalField || hasFormData);
+    const canAdd = canAddItem(registry, schema, items, uiSchema) && hasAdditionalItems && (!renderOptionalField || hasFormData);
     const arrayProps = {
       canAdd,
       className: `rjsf-field rjsf-field-array rjsf-field-array-fixed-items${extraClass}`,
@@ -513,18 +521,15 @@
       items: actualFormData.map((keyedItem, index) => {
         const { key, item } = keyedItem;
         const itemCast = item;
-        const additional = index >= itemSchemas.length;
-        const itemSchema = (additional && isObject(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, itemCast) : itemSchemas[index]) || {};
-        const itemFieldPathId = utils.toFieldPathId(index, globalFormOptions, childFieldPathId);
+        const additional = index >= schemaItems.length;
+        const rawItemSchema = (additional && isObject(schema.additionalItems) ? schema.additionalItems : schemaItems[index]) || {};
         let itemUiSchema;
         if (additional) {
           itemUiSchema = uiSchema.additionalItems;
+        } else if (Array.isArray(uiSchema.items)) {
+          itemUiSchema = uiSchema.items[index];
         } else {
-          if (Array.isArray(uiSchema.items)) {
-            itemUiSchema = uiSchema.items[index];
-          } else {
-            itemUiSchema = computeItemUiSchema(uiSchema, item, index, formContext);
-          }
+          itemUiSchema = computeItemUiSchema(uiSchema, item, index, formContext);
         }
         const itemErrorSchema = errorSchema ? errorSchema[index] : void 0;
         const itemProps = {
@@ -541,12 +546,12 @@
           title: fieldTitle ? `${fieldTitle}-${index + 1}` : void 0,
           canAdd,
           canRemove: additional,
-          canMoveUp: index >= itemSchemas.length + 1,
+          canMoveUp: index >= schemaItems.length + 1,
           canMoveDown: additional && index < items.length - 1,
-          itemSchema,
+          rawItemSchema,
           itemData: itemCast,
           itemUiSchema,
-          itemFieldPathId,
+          parentFieldPathId: childFieldPathId,
           itemErrorSchema,
           autofocus: autofocus && index === 0,
           onBlur,
@@ -576,8 +581,8 @@
     return /* @__PURE__ */ jsxRuntime.jsx(Template, { ...arrayProps });
   }
   function useKeyedFormData(formData = []) {
-    const newHash = react$1.useMemo(() => utils.hashObject(formData), [formData]);
-    const [state, setState] = react$1.useState(() => ({
+    const newHash = react.useMemo(() => utils.hashObject(formData), [formData]);
+    const [state, setState] = react.useState(() => ({
       formDataHash: newHash,
       keyedFormData: generateKeyedFormData(formData)
     }));
@@ -592,10 +597,10 @@
       formDataHash = newHash;
       setState({ formDataHash, keyedFormData });
     }
-    const updateKeyedFormData = react$1.useCallback((newData) => {
+    const updateKeyedFormData = react.useCallback((newData) => {
       const plainFormData = keyedToPlainFormData(newData);
-      const newHash2 = utils.hashObject(plainFormData);
-      setState({ formDataHash: newHash2, keyedFormData: newData });
+      const updatedHash = utils.hashObject(plainFormData);
+      setState({ formDataHash: updatedHash, keyedFormData: newData });
       return plainFormData;
     }, []);
     return { keyedFormData, updateKeyedFormData };
@@ -604,21 +609,25 @@
     const { schema, uiSchema, errorSchema, fieldPathId, registry, formData, onChange } = props;
     const { globalFormOptions, schemaUtils, translateString } = registry;
     const { keyedFormData, updateKeyedFormData } = useKeyedFormData(formData);
+    const keyedFormDataRef = react.useRef(keyedFormData);
+    keyedFormDataRef.current = keyedFormData;
+    const errorSchemaRef = react.useRef(errorSchema);
+    errorSchemaRef.current = errorSchema;
     const childFieldPathId = props.childFieldPathId ?? fieldPathId;
-    const handleAddItem = react$1.useCallback(
+    const handleAddItem = react.useCallback(
       (event, index) => {
         if (event) {
           event.preventDefault();
         }
         let newErrorSchema;
-        if (errorSchema) {
+        if (errorSchemaRef.current) {
           newErrorSchema = {};
-          for (const idx in errorSchema) {
-            const i = parseInt(idx);
+          for (const idx of Object.keys(errorSchemaRef.current)) {
+            const i = parseInt(idx, 10);
             if (index === void 0 || i < index) {
-              set(newErrorSchema, [i], errorSchema[idx]);
+              set(newErrorSchema, [i], errorSchemaRef.current[i]);
             } else if (i >= index) {
-              set(newErrorSchema, [i + 1], errorSchema[idx]);
+              set(newErrorSchema, [i + 1], errorSchemaRef.current[i]);
             }
           }
         }
@@ -626,7 +635,7 @@
           key: generateRowId(),
           item: getNewFormDataRow(registry, schema)
         };
-        const newKeyedFormData = [...keyedFormData];
+        const newKeyedFormData = [...keyedFormDataRef.current];
         if (index !== void 0) {
           newKeyedFormData.splice(index, 0, newKeyedFormDataRow);
         } else {
@@ -634,30 +643,30 @@
         }
         onChange(updateKeyedFormData(newKeyedFormData), childFieldPathId.path, newErrorSchema);
       },
-      [keyedFormData, registry, schema, onChange, updateKeyedFormData, errorSchema, childFieldPathId]
+      [registry, schema, onChange, updateKeyedFormData, childFieldPathId]
     );
-    const handleCopyItem = react$1.useCallback(
+    const handleCopyItem = react.useCallback(
       (event, index) => {
         if (event) {
           event.preventDefault();
         }
         let newErrorSchema;
-        if (errorSchema) {
+        if (errorSchemaRef.current) {
           newErrorSchema = {};
-          for (const idx in errorSchema) {
-            const i = parseInt(idx);
+          for (const idx of Object.keys(errorSchemaRef.current)) {
+            const i = parseInt(idx, 10);
             if (i <= index) {
-              set(newErrorSchema, [i], errorSchema[idx]);
+              set(newErrorSchema, [i], errorSchemaRef.current[i]);
             } else if (i > index) {
-              set(newErrorSchema, [i + 1], errorSchema[idx]);
+              set(newErrorSchema, [i + 1], errorSchemaRef.current[i]);
             }
           }
         }
         const newKeyedFormDataRow = {
           key: generateRowId(),
-          item: _cloneDeep(keyedFormData[index].item)
+          item: _cloneDeep(keyedFormDataRef.current[index].item)
         };
-        const newKeyedFormData = [...keyedFormData];
+        const newKeyedFormData = [...keyedFormDataRef.current];
         if (index !== void 0) {
           newKeyedFormData.splice(index + 1, 0, newKeyedFormDataRow);
         } else {
@@ -665,62 +674,62 @@
         }
         onChange(updateKeyedFormData(newKeyedFormData), childFieldPathId.path, newErrorSchema);
       },
-      [keyedFormData, onChange, updateKeyedFormData, errorSchema, childFieldPathId]
+      [onChange, updateKeyedFormData, childFieldPathId]
     );
-    const handleRemoveItem = react$1.useCallback(
+    const handleRemoveItem = react.useCallback(
       (event, index) => {
         if (event) {
           event.preventDefault();
         }
         let newErrorSchema;
-        if (errorSchema) {
+        if (errorSchemaRef.current) {
           newErrorSchema = {};
-          for (const idx in errorSchema) {
-            const i = parseInt(idx);
+          for (const idx of Object.keys(errorSchemaRef.current)) {
+            const i = parseInt(idx, 10);
             if (i < index) {
-              set(newErrorSchema, [i], errorSchema[idx]);
+              set(newErrorSchema, [i], errorSchemaRef.current[i]);
             } else if (i > index) {
-              set(newErrorSchema, [i - 1], errorSchema[idx]);
+              set(newErrorSchema, [i - 1], errorSchemaRef.current[i]);
             }
           }
         }
-        const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
+        const newKeyedFormData = keyedFormDataRef.current.filter((_, i) => i !== index);
         onChange(updateKeyedFormData(newKeyedFormData), childFieldPathId.path, newErrorSchema);
       },
-      [keyedFormData, onChange, updateKeyedFormData, errorSchema, childFieldPathId]
+      [onChange, updateKeyedFormData, childFieldPathId]
     );
-    const handleReorderItems = react$1.useCallback(
+    const handleReorderItems = react.useCallback(
       (event, index, newIndex) => {
         if (event) {
           event.preventDefault();
           event.currentTarget.blur();
         }
         let newErrorSchema;
-        if (errorSchema) {
+        if (errorSchemaRef.current) {
           newErrorSchema = {};
-          for (const idx in errorSchema) {
-            const i = parseInt(idx);
-            if (i == index) {
-              set(newErrorSchema, [newIndex], errorSchema[index]);
-            } else if (i == newIndex) {
-              set(newErrorSchema, [index], errorSchema[newIndex]);
+          for (const idx of Object.keys(errorSchemaRef.current)) {
+            const i = parseInt(idx, 10);
+            if (i === index) {
+              set(newErrorSchema, [newIndex], errorSchemaRef.current[index]);
+            } else if (i === newIndex) {
+              set(newErrorSchema, [index], errorSchemaRef.current[newIndex]);
             } else {
-              set(newErrorSchema, [idx], errorSchema[i]);
+              set(newErrorSchema, [idx], errorSchemaRef.current[i]);
             }
           }
         }
         function reOrderArray() {
-          const _newKeyedFormData = keyedFormData.slice();
-          _newKeyedFormData.splice(index, 1);
-          _newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
-          return _newKeyedFormData;
+          const newKeyedFormData2 = keyedFormDataRef.current.slice();
+          newKeyedFormData2.splice(index, 1);
+          newKeyedFormData2.splice(newIndex, 0, keyedFormDataRef.current[index]);
+          return newKeyedFormData2;
         }
         const newKeyedFormData = reOrderArray();
         onChange(updateKeyedFormData(newKeyedFormData), childFieldPathId.path, newErrorSchema);
       },
-      [keyedFormData, onChange, updateKeyedFormData, errorSchema, childFieldPathId]
+      [onChange, updateKeyedFormData, childFieldPathId]
     );
-    const handleChange = react$1.useCallback(
+    const handleChange = react.useCallback(
       (value, path, newErrorSchema, id) => {
         const lastPathIsItemIndex = typeof path.at(-1) === "number";
         onChange(
@@ -735,7 +744,7 @@
       },
       [onChange]
     );
-    const onSelectChange = react$1.useCallback(
+    const onSelectChange = react.useCallback(
       (value) => {
         onChange(value, childFieldPathId.path, void 0, childFieldPathId?.[utils.ID_KEY]);
       },
@@ -859,10 +868,8 @@
         enumOptions = utils.optionsList({ enum: enums }, uiSchema);
       }
     }
-    const onWidgetChange = react$1.useCallback(
-      (value, errorSchema, id) => {
-        return onChange(value, fieldPathId.path, errorSchema, id);
-      },
+    const onWidgetChange = react.useCallback(
+      (value, errorSchema, id) => onChange(value, fieldPathId.path, errorSchema, id),
       [onChange, fieldPathId]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -891,6 +898,33 @@
     );
   }
   var BooleanField_default = BooleanField;
+  function CyclicSchemaField(props) {
+    const [expanded, setExpanded] = react.useState(false);
+    const { name, registry, schema, uiSchema, fieldPathId } = props;
+    const { globalUiOptions } = registry;
+    const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
+    const CyclicSchemaExpandTemplate2 = utils.getTemplate(
+      "CyclicSchemaExpandTemplate",
+      registry,
+      uiOptions
+    );
+    if (!expanded) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        CyclicSchemaExpandTemplate2,
+        {
+          registry,
+          schema,
+          uiSchema,
+          name,
+          fieldPathId,
+          onExpand: () => setExpanded(true)
+        }
+      );
+    }
+    const { fields: fields2 } = registry;
+    const { SchemaField: SchemaField2 } = fields2;
+    return /* @__PURE__ */ jsxRuntime.jsx(SchemaField2, { ...props, schema: { ...schema, [utils.RJSF_REF_CYCLE_KEY]: false } });
+  }
   function getFallbackTypeSelectionSchema(title) {
     return {
       type: "string",
@@ -915,7 +949,7 @@
         return String(formData);
       case "number": {
         const castedNumber = Number(formData);
-        return isNaN(castedNumber) ? 0 : castedNumber;
+        return Number.isNaN(castedNumber) ? 0 : castedNumber;
       }
       case "boolean":
         return Boolean(formData);
@@ -942,13 +976,13 @@
       errorSchema
     } = props;
     const { translateString, fields: fields2, globalFormOptions } = registry;
-    const [type, setType] = react$1.useState(getTypeOfFormData(formData));
+    const [type, setType] = react.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$1.useMemo(() => getFallbackTypeSelectionSchema(schemaTitle), [schemaTitle]);
+    const typesOptionSchema = react.useMemo(() => getFallbackTypeSelectionSchema(schemaTitle), [schemaTitle]);
     const onTypeChange = (newType) => {
       if (newType != null) {
         setType(newType);
@@ -1073,6 +1107,7 @@
   }
   function computeArraySchemasIfPresent(schema, fieldPathId, potentialIndex) {
     let rawSchema;
+    let resultPathId = fieldPathId;
     if (isNumericIndex(potentialIndex) && schema && schema?.type === "array" && has(schema, utils.ITEMS_KEY)) {
       const index = Number(potentialIndex);
       const items = schema[utils.ITEMS_KEY];
@@ -1085,12 +1120,12 @@
       } else {
         rawSchema = items;
       }
-      fieldPathId = {
+      resultPathId = {
         [utils.ID_KEY]: fieldPathId[utils.ID_KEY],
         path: [...fieldPathId.path.slice(0, fieldPathId.path.length - 1), index]
       };
     }
-    return { rawSchema, fieldPathId };
+    return { rawSchema, fieldPathId: resultPathId };
   }
   function getSchemaDetailsForField(registry, dottedPath, initialSchema, formData, initialFieldIdPath) {
     const { schemaUtils, globalFormOptions } = registry;
@@ -1173,8 +1208,8 @@
           if (isString(prop)) {
             const match = LOOKUP_REGEX.exec(prop);
             if (Array.isArray(match) && match.length > 1) {
-              const name2 = match[1];
-              uiProps[key] = utils.lookupFromFormContext(registry, name2, name2);
+              const lookupName = match[1];
+              uiProps[key] = utils.lookupFromFormContext(registry, lookupName, lookupName);
             }
           }
         });
@@ -1191,7 +1226,7 @@
     const { registry, schema: rawSchema, formData } = layoutGridFieldProps;
     const { schemaUtils } = registry;
     const schema = schemaUtils.retrieveSchema(rawSchema, formData);
-    return childrenLayoutGridSchemaId.map((layoutGridSchema) => /* @__PURE__ */ react$1.createElement(
+    return childrenLayoutGridSchemaId.map((layoutGridSchema) => /* @__PURE__ */ react.createElement(
       LayoutGridField,
       {
         ...layoutGridFieldProps,
@@ -1278,10 +1313,10 @@
       return uiComponentProps.rendered;
     }
     if (schema) {
-      const Field2 = optionsInfo?.hasDiscriminator ? LayoutMultiSchemaField2 : SchemaField2;
+      const Field = optionsInfo?.hasDiscriminator ? LayoutMultiSchemaField2 : SchemaField2;
       const { fieldUiSchema, uiReadonly } = computeFieldUiSchema(name, uiProps, uiSchema, isReadonly, readonly);
       return /* @__PURE__ */ jsxRuntime.jsx(
-        Field2,
+        Field,
         {
           "data-testid": optionsInfo?.hasDiscriminator ? LAYOUT_GRID_FIELD_TEST_IDS.layoutMultiSchemaField : LAYOUT_GRID_FIELD_TEST_IDS.field,
           ...otherProps,
@@ -1418,7 +1453,7 @@
       hideError = false
     } = props;
     const { widgets: widgets2, schemaUtils, globalUiOptions } = registry;
-    const [enumOptions, setEnumOptions] = react$1.useState(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
+    const [enumOptions, setEnumOptions] = react.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 +1462,7 @@
     const optionsHash = utils.hashObject(options);
     const uiSchemaHash = uiSchema ? utils.hashObject(uiSchema) : "";
     const formDataHash = formData ? utils.hashObject(formData) : "";
-    react$1.useEffect(() => {
+    react.useEffect(() => {
       setEnumOptions(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
     }, [schemaHash, optionsHash, schemaUtils, uiSchemaHash, formDataHash]);
     const {
@@ -1451,6 +1486,9 @@
     const fieldErrorSchema = omit3(errorSchema, [utils.ERRORS_KEY]);
     const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     const onOptionChange = (opt) => {
+      if (disabled || readonly) {
+        return;
+      }
       const newOption = getSelectedOption(enumOptions, selectorField, opt);
       const oldOption = getSelectedOption(enumOptions, selectorField, selectedOption);
       let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
@@ -1512,207 +1550,183 @@
       }
     );
   }
-  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
-     */
-    constructor(props) {
-      super(props);
-      const {
-        formData,
-        options,
-        registry: { schemaUtils }
-      } = this.props;
-      const retrievedOptions = options.map((opt) => schemaUtils.retrieveSchema(opt, formData));
-      this.state = {
-        retrievedOptions,
-        selectedOption: this.getMatchingOption(0, formData, retrievedOptions)
-      };
-    }
-    /** React lifecycle method that is called when the props and/or state for this component is updated. It recomputes the
-     * currently selected option based on the overall `formData`
-     *
-     * @param prevProps - The previous `FieldProps` for this template
-     * @param prevState - The previous `AnyOfFieldState` for this template
-     */
-    componentDidUpdate(prevProps, prevState) {
-      const { formData, options, fieldPathId } = this.props;
-      const { selectedOption } = this.state;
-      let newState = this.state;
-      if (!utils.deepEquals(prevProps.options, options)) {
-        const {
-          registry: { schemaUtils }
-        } = this.props;
-        const retrievedOptions = options.map((opt) => schemaUtils.retrieveSchema(opt, formData));
-        newState = { selectedOption, retrievedOptions };
+  function AnyOfField(props) {
+    const {
+      name,
+      disabled = false,
+      errorSchema = {},
+      formData,
+      fieldPathId,
+      onBlur,
+      onChange,
+      onFocus,
+      options,
+      readonly,
+      registry,
+      required = false,
+      schema,
+      uiSchema
+    } = props;
+    const { schemaUtils } = registry;
+    const formDataHash = utils.hashObject(formData ?? null);
+    const retrievedOptions = react.useMemo(
+      () => options.map((opt) => schemaUtils.retrieveSchema(opt, formData)),
+      // oxlint-disable-next-line react-hooks/exhaustive-deps -- formDataHash is the value-stable proxy for formData
+      [options, schemaUtils, formDataHash]
+    );
+    const [selectedOption, setSelectedOption] = react.useState(() => {
+      const discriminator = utils.getDiscriminatorFieldFromSchema(schema);
+      return schemaUtils.getClosestMatchingOption(formData, retrievedOptions, 0, discriminator);
+    });
+    const skipNextOptionRecalculation = react.useRef(false);
+    const prevFormDataRef = react.useRef(formData);
+    const prevFieldIdRef = react.useRef(fieldPathId.$id);
+    react.useEffect(() => {
+      const prevFormData = prevFormDataRef.current;
+      const prevFieldId = prevFieldIdRef.current;
+      prevFormDataRef.current = formData;
+      prevFieldIdRef.current = fieldPathId.$id;
+      if (!utils.deepEquals(formData, prevFormData) && fieldPathId.$id === prevFieldId) {
+        if (skipNextOptionRecalculation.current) {
+          skipNextOptionRecalculation.current = false;
+          return;
+        }
+        const discriminator = utils.getDiscriminatorFieldFromSchema(schema);
+        const matchingOption = schemaUtils.getClosestMatchingOption(
+          formData,
+          retrievedOptions,
+          selectedOption,
+          discriminator
+        );
+        if (matchingOption !== selectedOption) {
+          setSelectedOption(matchingOption);
+        }
       }
-      if (!utils.deepEquals(formData, prevProps.formData) && fieldPathId.$id === prevProps.fieldPathId.$id) {
-        const { retrievedOptions } = newState;
-        const matchingOption = this.getMatchingOption(selectedOption, formData, retrievedOptions);
-        if (prevState && matchingOption !== selectedOption) {
-          newState = { selectedOption: matchingOption, retrievedOptions };
+    });
+    const fieldId = `${fieldPathId.$id}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`;
+    const onOptionChange = react.useCallback(
+      (option2) => {
+        if (disabled || readonly) {
+          return;
         }
+        const intOption = option2 !== void 0 ? parseInt(option2, 10) : -1;
+        if (intOption === selectedOption) {
+          return;
+        }
+        const newOption = intOption >= 0 ? retrievedOptions[intOption] : void 0;
+        const oldOption = selectedOption >= 0 ? retrievedOptions[selectedOption] : void 0;
+        let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
+        if (newOption) {
+          newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, "excludeObjectChildren");
+        }
+        setSelectedOption(intOption);
+        skipNextOptionRecalculation.current = true;
+        onChange(newFormData, fieldPathId.path, void 0, fieldId);
+      },
+      // setSelectedOption is stable (guaranteed by useState); skipNextOptionRecalculation is a ref
+      [selectedOption, retrievedOptions, disabled, readonly, schemaUtils, formData, fieldPathId, onChange, fieldId]
+    );
+    const { widgets: widgets2, fields: fields2, translateString, globalUiOptions } = registry;
+    const { SchemaField: SchemaFieldComponent } = fields2;
+    const MultiSchemaFieldTemplate2 = utils.getTemplate(
+      "MultiSchemaFieldTemplate",
+      registry,
+      globalUiOptions
+    );
+    const isOptionalRender = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
+    const hasFormData = utils.isFormDataAvailable(formData);
+    const {
+      widget = "select",
+      placeholder,
+      autofocus,
+      autocomplete,
+      title = schema.title,
+      ...uiOptions
+    } = utils.getUiOptions(uiSchema, globalUiOptions);
+    const Widget = utils.getWidget({ type: "number" }, widget, widgets2);
+    const rawErrors = get(errorSchema, utils.ERRORS_KEY, []);
+    const fieldErrorSchema = omit3(errorSchema, [utils.ERRORS_KEY]);
+    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+    const option = selectedOption >= 0 ? retrievedOptions[selectedOption] || null : null;
+    let optionSchema;
+    if (option) {
+      const { required: schemaRequired, type: schemaType } = schema;
+      const parentProps = {};
+      if (schemaRequired) {
+        parentProps.required = schemaRequired;
       }
-      if (newState !== this.state) {
-        this.setState(newState);
+      if (schemaType !== void 0 && !("type" in option)) {
+        parentProps.type = schemaType;
       }
+      optionSchema = Object.keys(parentProps).length > 0 ? utils.mergeSchemas(parentProps, option) : option;
     }
-    /** Determines the best matching option for the given `formData` and `options`.
-     *
-     * @param formData - The new formData
-     * @param options - The list of options to choose from
-     * @return - The index of the `option` that best matches the `formData`
-     */
-    getMatchingOption(selectedOption, formData, options) {
-      const {
-        schema,
-        registry: { schemaUtils }
-      } = this.props;
-      const discriminator = utils.getDiscriminatorFieldFromSchema(schema);
-      const option = schemaUtils.getClosestMatchingOption(formData, options, selectedOption, discriminator);
-      return option;
-    }
-    /** Callback handler to remember what the currently selected option is. In addition to that the `formData` is updated
-     * to remove properties that are not part of the newly selected option schema, and then the updated data is passed to
-     * the `onChange` handler.
-     *
-     * @param option - The new option value being selected
-     */
-    onOptionChange = (option) => {
-      const { selectedOption, retrievedOptions } = this.state;
-      const { formData, onChange, registry, fieldPathId } = this.props;
-      const { schemaUtils } = registry;
-      const intOption = option !== void 0 ? parseInt(option, 10) : -1;
-      if (intOption === selectedOption) {
-        return;
+    let optionsUiSchema = [];
+    if (utils.ONE_OF_KEY in schema && uiSchema && utils.ONE_OF_KEY in uiSchema) {
+      if (Array.isArray(uiSchema[utils.ONE_OF_KEY])) {
+        optionsUiSchema = uiSchema[utils.ONE_OF_KEY];
+      } else {
+        console.warn(`uiSchema.oneOf is not an array for "${title || name}"`);
       }
-      const newOption = intOption >= 0 ? retrievedOptions[intOption] : void 0;
-      const oldOption = selectedOption >= 0 ? retrievedOptions[selectedOption] : void 0;
-      let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
-      if (newOption) {
-        newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, "excludeObjectChildren");
+    } else if (utils.ANY_OF_KEY in schema && uiSchema && utils.ANY_OF_KEY in uiSchema) {
+      if (Array.isArray(uiSchema[utils.ANY_OF_KEY])) {
+        optionsUiSchema = uiSchema[utils.ANY_OF_KEY];
+      } else {
+        console.warn(`uiSchema.anyOf is not an array for "${title || name}"`);
       }
-      this.setState({ selectedOption: intOption }, () => {
-        onChange(newFormData, fieldPathId.path, void 0, this.getFieldId());
-      });
-    };
-    getFieldId() {
-      const { fieldPathId, schema } = this.props;
-      return `${fieldPathId.$id}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`;
     }
-    /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
-     */
-    render() {
-      const {
-        name,
-        disabled = false,
-        errorSchema = {},
-        formData,
+    let optionUiSchema = uiSchema;
+    if (selectedOption >= 0 && optionsUiSchema.length > selectedOption) {
+      optionUiSchema = optionsUiSchema[selectedOption];
+    }
+    const translateEnum = title ? utils.TranslatableString.TitleOptionPrefix : utils.TranslatableString.OptionPrefix;
+    const translateParams = title ? [title] : [];
+    const enumOptions = retrievedOptions.map((opt, index) => {
+      const { title: uiTitle = opt.title } = utils.getUiOptions(optionsUiSchema[index]);
+      return {
+        label: uiTitle || translateString(translateEnum, translateParams.concat(String(index + 1))),
+        value: index
+      };
+    });
+    const selector = !isOptionalRender || hasFormData ? /* @__PURE__ */ jsxRuntime.jsx(
+      Widget,
+      {
+        id: fieldId,
+        name: `${name}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`,
+        schema: { type: "number", default: 0 },
+        onChange: onOptionChange,
         onBlur,
         onFocus,
-        readonly,
-        required = false,
-        registry,
-        schema,
-        uiSchema
-      } = this.props;
-      const { widgets: widgets2, fields: fields2, translateString, globalUiOptions, schemaUtils } = registry;
-      const { SchemaField: _SchemaField } = fields2;
-      const MultiSchemaFieldTemplate2 = utils.getTemplate(
-        "MultiSchemaFieldTemplate",
+        disabled: disabled || isEmpty(enumOptions),
+        multiple: false,
+        rawErrors,
+        errorSchema: fieldErrorSchema,
+        value: selectedOption >= 0 ? selectedOption : void 0,
+        options: { enumOptions, ...uiOptions },
         registry,
-        globalUiOptions
-      );
-      const isOptionalRender = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
-      const hasFormData = utils.isFormDataAvailable(formData);
-      const { selectedOption, retrievedOptions } = this.state;
-      const {
-        widget = "select",
         placeholder,
-        autofocus,
         autocomplete,
-        title = schema.title,
-        ...uiOptions
-      } = utils.getUiOptions(uiSchema, globalUiOptions);
-      const Widget = utils.getWidget({ type: "number" }, widget, widgets2);
-      const rawErrors = get(errorSchema, utils.ERRORS_KEY, []);
-      const fieldErrorSchema = omit3(errorSchema, [utils.ERRORS_KEY]);
-      const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
-      const option = selectedOption >= 0 ? retrievedOptions[selectedOption] || null : null;
-      let optionSchema;
-      if (option) {
-        const { required: required2 } = schema;
-        optionSchema = required2 ? utils.mergeSchemas({ required: required2 }, option) : option;
-      }
-      let optionsUiSchema = [];
-      if (utils.ONE_OF_KEY in schema && uiSchema && utils.ONE_OF_KEY in uiSchema) {
-        if (Array.isArray(uiSchema[utils.ONE_OF_KEY])) {
-          optionsUiSchema = uiSchema[utils.ONE_OF_KEY];
-        } else {
-          console.warn(`uiSchema.oneOf is not an array for "${title || name}"`);
-        }
-      } else if (utils.ANY_OF_KEY in schema && uiSchema && utils.ANY_OF_KEY in uiSchema) {
-        if (Array.isArray(uiSchema[utils.ANY_OF_KEY])) {
-          optionsUiSchema = uiSchema[utils.ANY_OF_KEY];
-        } else {
-          console.warn(`uiSchema.anyOf is not an array for "${title || name}"`);
-        }
+        autofocus,
+        label: title ?? name,
+        hideLabel: !displayLabel,
+        readonly
       }
-      let optionUiSchema = uiSchema;
-      if (selectedOption >= 0 && optionsUiSchema.length > selectedOption) {
-        optionUiSchema = optionsUiSchema[selectedOption];
+    ) : void 0;
+    const optionsSchemaField = optionSchema && optionSchema.type !== "null" && /* @__PURE__ */ jsxRuntime.jsx(SchemaFieldComponent, { ...props, schema: optionSchema, uiSchema: optionUiSchema }) || null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MultiSchemaFieldTemplate2,
+      {
+        schema,
+        registry,
+        uiSchema,
+        selector,
+        optionSchemaField: optionsSchemaField
       }
-      const translateEnum = title ? utils.TranslatableString.TitleOptionPrefix : utils.TranslatableString.OptionPrefix;
-      const translateParams = title ? [title] : [];
-      const enumOptions = retrievedOptions.map((opt, index) => {
-        const { title: uiTitle = opt.title } = utils.getUiOptions(optionsUiSchema[index]);
-        return {
-          label: uiTitle || translateString(translateEnum, translateParams.concat(String(index + 1))),
-          value: index
-        };
-      });
-      const selector = !isOptionalRender || hasFormData ? /* @__PURE__ */ jsxRuntime.jsx(
-        Widget,
-        {
-          id: this.getFieldId(),
-          name: `${name}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`,
-          schema: { type: "number", default: 0 },
-          onChange: this.onOptionChange,
-          onBlur,
-          onFocus,
-          disabled: disabled || isEmpty(enumOptions),
-          multiple: false,
-          rawErrors,
-          errorSchema: fieldErrorSchema,
-          value: selectedOption >= 0 ? selectedOption : void 0,
-          options: { enumOptions, ...uiOptions },
-          registry,
-          placeholder,
-          autocomplete,
-          autofocus,
-          label: title ?? name,
-          hideLabel: !displayLabel,
-          readonly
-        }
-      ) : void 0;
-      const optionsSchemaField = optionSchema && optionSchema.type !== "null" && /* @__PURE__ */ jsxRuntime.jsx(_SchemaField, { ...this.props, schema: optionSchema, uiSchema: optionUiSchema }) || null;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        MultiSchemaFieldTemplate2,
-        {
-          schema,
-          registry,
-          uiSchema,
-          selector,
-          optionSchemaField: optionsSchemaField
-        }
-      );
-    }
-  };
+    );
+  }
   var MultiSchemaField_default = AnyOfField;
   function NullField(props) {
     const { formData, onChange, fieldPathId } = props;
-    react$1.useEffect(() => {
+    react.useEffect(() => {
       if (formData === void 0) {
         onChange(null, fieldPathId.path);
       }
@@ -1724,16 +1738,14 @@
   var trailingCharMatcher = /[0.]0*$/;
   function NumberField(props) {
     const { registry, onChange, formData, value: initialValue } = props;
-    const [lastValue, setLastValue] = react$1.useState(initialValue);
+    const [lastValue, setLastValue] = react.useState(initialValue);
     const { StringField: StringField2 } = registry.fields;
     let value = formData;
-    const handleChange = react$1.useCallback(
-      (value2, path, errorSchema, id) => {
-        setLastValue(value2);
-        if (`${value2}`.charAt(0) === ".") {
-          value2 = `0${value2}`;
-        }
-        const processed = typeof value2 === "string" && value2.match(trailingCharMatcherWithPrefix) ? utils.asNumber(value2.replace(trailingCharMatcher, "")) : utils.asNumber(value2);
+    const handleChange = react.useCallback(
+      (newValue, path, errorSchema, id) => {
+        setLastValue(newValue);
+        const normalizedValue = `${newValue}`.startsWith(".") ? `0${newValue}` : newValue;
+        const processed = typeof normalizedValue === "string" && trailingCharMatcherWithPrefix.exec(normalizedValue) ? utils.asNumber(normalizedValue.replace(trailingCharMatcher, "")) : utils.asNumber(normalizedValue);
         onChange(processed, path, errorSchema, id);
       },
       [onChange]
@@ -1752,7 +1764,7 @@
   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;
+    return Array.isArray(schema.required) && schema.required.includes(name);
   }
   function getDefaultValue(translateString, type) {
     switch (type) {
@@ -1771,7 +1783,7 @@
         return translateString(utils.TranslatableString.NewStringDefault);
     }
   }
-  function ObjectFieldProperty(props) {
+  function ObjectFieldPropertyFn(props) {
     const {
       fieldPathId,
       schema,
@@ -1791,22 +1803,23 @@
       handleRemoveProperty,
       addedByAdditionalProperties
     } = props;
-    const [wasPropertyKeyModified, setWasPropertyKeyModified] = react$1.useState(false);
+    const [wasPropertyKeyModified, setWasPropertyKeyModified] = react.useState(false);
     const { globalFormOptions, fields: fields2 } = registry;
     const { SchemaField: SchemaField2 } = fields2;
     const innerFieldIdPathId = utils.useDeepCompareMemo(
       utils.toFieldPathId(propertyName, globalFormOptions, fieldPathId.path)
     );
-    const onPropertyChange = react$1.useCallback(
+    const onPropertyChange = react.useCallback(
       (value, path, newErrorSchema, id) => {
+        let normalizedValue = value;
         if (value === void 0 && addedByAdditionalProperties) {
-          value = "";
+          normalizedValue = "";
         }
-        onChange(value, path, newErrorSchema, id);
+        onChange(normalizedValue, path, newErrorSchema, id);
       },
       [onChange, addedByAdditionalProperties]
     );
-    const onKeyRename = react$1.useCallback(
+    const onKeyRename = react.useCallback(
       (value) => {
         if (propertyName !== value) {
           setWasPropertyKeyModified(true);
@@ -1815,7 +1828,7 @@
       },
       [propertyName, handleKeyRename]
     );
-    const onKeyRenameBlur = react$1.useCallback(
+    const onKeyRenameBlur = react.useCallback(
       (event) => {
         const {
           target: { value }
@@ -1824,7 +1837,7 @@
       },
       [onKeyRename]
     );
-    const onRemoveProperty = react$1.useCallback(() => {
+    const onRemoveProperty = react.useCallback(() => {
       handleRemoveProperty(propertyName);
     }, [propertyName, handleRemoveProperty]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1851,6 +1864,7 @@
       }
     );
   }
+  var ObjectFieldProperty = react.memo(ObjectFieldPropertyFn);
   function ObjectField(props) {
     const {
       schema: rawSchema,
@@ -1871,35 +1885,38 @@
     } = props;
     const { fields: fields2, schemaUtils, translateString, globalUiOptions } = registry;
     const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
-    const formDataRef = react$1.useRef(formData);
+    const formDataRef = react.useRef(formData);
     formDataRef.current = formData;
-    const schema = schemaUtils.retrieveSchema(rawSchema, formData, true);
-    const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
+    const schema = react.useMemo(
+      () => schemaUtils.retrieveSchema(rawSchema, formData, true),
+      [schemaUtils, rawSchema, formData]
+    );
+    const uiOptions = react.useMemo(() => utils.getUiOptions(uiSchema, globalUiOptions), [uiSchema, globalUiOptions]);
     const { properties: schemaProperties = {} } = schema;
     const childFieldPathId = props.childFieldPathId ?? fieldPathId;
-    const lastRenamedProperty = react$1.useRef({ previousKey: "", currentKey: void 0 });
+    const lastRenamedProperty = react.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$1.useCallback(
-      (preferredKey, formData2) => {
+    const getAvailableKey = react.useCallback(
+      (preferredKey, existingFormData) => {
         const { duplicateKeySuffixSeparator = "-" } = utils.getUiOptions(uiSchema, globalUiOptions);
         let index = 0;
         let newKey = preferredKey;
-        while (has(formData2, newKey)) {
-          newKey = `${preferredKey}${duplicateKeySuffixSeparator}${++index}`;
+        while (has(existingFormData, newKey)) {
+          index += 1;
+          newKey = `${preferredKey}${duplicateKeySuffixSeparator}${index}`;
         }
         return newKey;
       },
       [uiSchema, globalUiOptions]
     );
-    const onAddProperty = react$1.useCallback(() => {
+    const onAddProperty = react.useCallback(() => {
       if (!(schema.additionalProperties || schema.patternProperties)) {
         return;
       }
-      const { translateString: translateString2 } = registry;
       const newFormData = { ...formData };
       const newKey = getAvailableKey("newKey", newFormData);
       if (schema.patternProperties) {
@@ -1914,17 +1931,16 @@
           defaultValue = schema.additionalProperties.default;
           let apSchema = schema.additionalProperties;
           if (utils.REF_KEY in apSchema) {
-            const { schemaUtils: schemaUtils2 } = registry;
-            apSchema = schemaUtils2.retrieveSchema({ [utils.REF_KEY]: apSchema[utils.REF_KEY] }, formData);
+            apSchema = schemaUtils.retrieveSchema({ [utils.REF_KEY]: apSchema[utils.REF_KEY] }, formData);
             type = apSchema.type;
             constValue = apSchema.const;
-            defaultValue = apSchema.default;
+            defaultValue = schemaUtils.getDefaultFormState(apSchema, defaultValue);
           }
           if (!type && (utils.ANY_OF_KEY in apSchema || utils.ONE_OF_KEY in apSchema)) {
             type = "object";
           }
         }
-        const newValue = constValue ?? defaultValue ?? getDefaultValue(translateString2, type);
+        const newValue = constValue ?? defaultValue ?? getDefaultValue(translateString, type);
         set(newFormData, newKey, newValue);
       }
       if (lastRenamedProperty.current.previousKey === newKey) {
@@ -1932,8 +1948,8 @@
         lastRenamedProperty.current.previousKey = getAvailableKey(newKey, newFormData);
       }
       onChange(newFormData, childFieldPathId.path);
-    }, [formData, onChange, registry, childFieldPathId, getAvailableKey, schema]);
-    const handleKeyRename = react$1.useCallback(
+    }, [formData, onChange, translateString, schemaUtils, childFieldPathId, getAvailableKey, schema]);
+    const handleKeyRename = react.useCallback(
       (oldKey, newKey) => {
         if (oldKey !== newKey) {
           const currentFormData = formDataRef.current;
@@ -1943,8 +1959,8 @@
           };
           const newKeys = { [oldKey]: actualNewKey };
           const keyValues = Object.keys(newFormData).map((key) => {
-            const newKey2 = newKeys[key] || key;
-            return { [newKey2]: newFormData[key] };
+            const mappedKey = Object.hasOwn(newKeys, key) ? newKeys[key] : key;
+            return { [mappedKey]: newFormData[key] };
           });
           const renamedObj = Object.assign({}, ...keyValues);
           formDataRef.current = renamedObj;
@@ -1957,13 +1973,13 @@
       },
       [onChange, childFieldPathId, getAvailableKey]
     );
-    const handleRemoveProperty = react$1.useCallback(
+    const handleRemoveProperty = react.useCallback(
       (key) => {
         onChange(ADDITIONAL_PROPERTY_KEY_REMOVE, [...childFieldPathId.path, key]);
       },
       [onChange, childFieldPathId]
     );
-    const getStableKey = react$1.useCallback((property) => {
+    const getStableKey = react.useCallback((property) => {
       if (lastRenamedProperty.current.currentKey === property) {
         return lastRenamedProperty.current.previousKey;
       }
@@ -1975,7 +1991,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(markdownToJsx.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(react$1.Markdown, { options: { disableParsingRawHTML: true }, children: translateString(utils.TranslatableString.InvalidObjectField, [name || "root", err.message]) }) }),
           /* @__PURE__ */ jsxRuntime.jsx("pre", { children: JSON.stringify(schema) })
         ] });
       }
@@ -1986,20 +2002,22 @@
       // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
       title: uiOptions.label === false ? "" : templateTitle,
       description: uiOptions.label === false ? void 0 : description,
-      properties: orderedProperties.map((name2) => {
-        const addedByAdditionalProperties = has(schema, [utils.PROPERTIES_KEY, name2, utils.ADDITIONAL_PROPERTY_FLAG]);
-        const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name2];
+      properties: orderedProperties.map((propertyName) => {
+        const addedByAdditionalProperties = Boolean(
+          schema.properties?.[propertyName]?.[utils.ADDITIONAL_PROPERTY_FLAG]
+        );
+        const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[propertyName];
         const hidden = utils.getUiOptions(fieldUiSchema).widget === "hidden";
         const content = /* @__PURE__ */ jsxRuntime.jsx(
           ObjectFieldProperty,
           {
-            propertyName: name2,
-            required: isRequired(schema, name2),
-            schema: get(schema, [utils.PROPERTIES_KEY, name2], {}),
+            propertyName,
+            required: isRequired(schema, propertyName),
+            schema: get(schema, [utils.PROPERTIES_KEY, propertyName], {}),
             uiSchema: fieldUiSchema,
-            errorSchema: get(errorSchema, [name2]),
+            errorSchema: get(errorSchema, [propertyName]),
             fieldPathId: childFieldPathId,
-            formData: get(formData, [name2]),
+            formData: get(formData, [propertyName]),
             handleKeyRename,
             handleRemoveProperty,
             addedByAdditionalProperties,
@@ -2011,11 +2029,11 @@
             readonly,
             hideError
           },
-          getStableKey(name2)
+          getStableKey(propertyName)
         );
         return {
           content,
-          name: name2,
+          name: propertyName,
           readonly,
           disabled,
           required,
@@ -2103,8 +2121,8 @@
     null: "NullField"
   };
   function getFieldComponent(schema, uiOptions, registry) {
-    const field = uiOptions.field;
-    const { fields: fields2 } = registry;
+    const { field } = uiOptions;
+    const { fields: fields2, schemaUtils } = registry;
     if (typeof field === "function") {
       return field;
     }
@@ -2118,10 +2136,10 @@
     if (schemaId && schemaId in fields2) {
       componentName = schemaId;
     }
-    if (!componentName && (schema.anyOf || schema.oneOf)) {
+    if ((schema.anyOf || schema.oneOf) && !schemaUtils.isSelect(schema) && componentName !== "ObjectField") {
       return () => null;
     }
-    return componentName in fields2 ? fields2[componentName] : fields2["FallbackField"];
+    return componentName in fields2 ? fields2[componentName] : fields2.FallbackField;
   }
   function SchemaFieldRender(props) {
     const {
@@ -2140,7 +2158,18 @@
       wasPropertyKeyModified = false
     } = props;
     const { schemaUtils, globalFormOptions, globalUiOptions, fields: fields2 } = registry;
-    const { AnyOfField: _AnyOfField, OneOfField: _OneOfField } = fields2;
+    const { AnyOfField: _AnyOfField, OneOfField: _OneOfField, CyclicSchemaField: CyclicSchemaField2 } = fields2;
+    const fieldId = fieldPathId[utils.ID_KEY];
+    const handleFieldComponentChange = react.useCallback(
+      (newFormData, path, newErrorSchema, id2) => {
+        const theId = id2 || fieldId;
+        return onChange(newFormData, path, newErrorSchema, theId);
+      },
+      [fieldId, onChange]
+    );
+    if (_schema[utils.RJSF_REF_CYCLE_KEY]) {
+      return /* @__PURE__ */ jsxRuntime.jsx(CyclicSchemaField2, { ...props });
+    }
     const uiSchema = utils.resolveUiSchema(_schema, _uiSchema, registry);
     const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
     const FieldTemplate2 = utils.getTemplate("FieldTemplate", registry, uiOptions);
@@ -2152,14 +2181,6 @@
     const FieldHelpTemplate2 = utils.getTemplate("FieldHelpTemplate", registry, uiOptions);
     const FieldErrorTemplate2 = utils.getTemplate("FieldErrorTemplate", registry, uiOptions);
     const schema = schemaUtils.retrieveSchema(_schema, formData);
-    const fieldId = fieldPathId[utils.ID_KEY];
-    const handleFieldComponentChange = react$1.useCallback(
-      (formData2, path, newErrorSchema, id2) => {
-        const theId = id2 || fieldId;
-        return onChange(formData2, path, newErrorSchema, theId);
-      },
-      [fieldId, onChange]
-    );
     const FieldComponent = getFieldComponent(schema, uiOptions, registry);
     const isDeprecated = Boolean(schema.deprecated);
     const deprecatedHandling = isDeprecated ? uiOptions.deprecatedHandling ?? "label" : void 0;
@@ -2180,12 +2201,12 @@
       if (schema[utils.ANY_OF_KEY]) {
         XxxOfField = _AnyOfField;
         XxxOfOptions = schema[utils.ANY_OF_KEY].map(
-          (_schema2) => schemaUtils.retrieveSchema(isObject(_schema2) ? _schema2 : {}, formData)
+          (xxxOfSchema) => schemaUtils.retrieveSchema(isObject(xxxOfSchema) ? xxxOfSchema : {}, formData)
         );
       } else if (schema[utils.ONE_OF_KEY]) {
         XxxOfField = _OneOfField;
         XxxOfOptions = schema[utils.ONE_OF_KEY].map(
-          (_schema2) => schemaUtils.retrieveSchema(isObject(_schema2) ? _schema2 : {}, formData)
+          (xxxOfSchema) => schemaUtils.retrieveSchema(isObject(xxxOfSchema) ? xxxOfSchema : {}, formData)
         );
       }
       const isOptionalRender = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
@@ -2230,7 +2251,7 @@
       label = registry.translateString(utils.TranslatableString.DeprecatedLabel, [label]);
     }
     const description = uiOptions.description || props.schema.description || schema.description || "";
-    const help = uiOptions.help;
+    const { help } = uiOptions;
     const hidden = uiOptions.widget === "hidden" || deprecatedHandling === "hide";
     const classNames = ["rjsf-field", `rjsf-field-${utils.getSchemaType(schema)}`];
     if (!hideError && __errors && __errors.length > 0) {
@@ -2321,18 +2342,16 @@
       )
     ] }) });
   }
-  var SchemaField = class extends react$1.Component {
-    shouldComponentUpdate(nextProps) {
-      const {
-        registry: { globalFormOptions }
-      } = this.props;
-      const { experimental_componentUpdateStrategy = "customDeep" } = globalFormOptions;
-      return utils.shouldRender(this, nextProps, this.state, experimental_componentUpdateStrategy);
+  var SchemaField = react.memo(SchemaFieldRender, (prevProps, nextProps) => {
+    const { experimental_componentUpdateStrategy = "customDeep" } = nextProps.registry.globalFormOptions;
+    if (experimental_componentUpdateStrategy === "always") {
+      return false;
     }
-    render() {
-      return /* @__PURE__ */ jsxRuntime.jsx(SchemaFieldRender, { ...this.props });
+    if (experimental_componentUpdateStrategy === "shallow") {
+      return utils.shallowEquals(prevProps, nextProps);
     }
-  };
+    return utils.deepEquals(prevProps, nextProps);
+  });
   var SchemaField_default = SchemaField;
   function StringField(props) {
     const {
@@ -2364,10 +2383,8 @@
     const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     const label = uiTitle ?? title ?? schemaTitle ?? name;
     const Widget = utils.getWidget(schema, widget, widgets2);
-    const onWidgetChange = react$1.useCallback(
-      (value, errorSchema, id) => {
-        return onChange(value, fieldPathId.path, errorSchema, id);
-      },
+    const onWidgetChange = react.useCallback(
+      (value, errorSchema, id) => onChange(value, fieldPathId.path, errorSchema, id),
       [onChange, fieldPathId]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2405,6 +2422,7 @@
       ArrayField,
       // ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
       BooleanField: BooleanField_default,
+      CyclicSchemaField,
       FallbackField,
       LayoutGridField,
       LayoutHeaderField,
@@ -2630,9 +2648,10 @@
     }
     return /* @__PURE__ */ jsxRuntime.jsx("datalist", { id: utils.examplesId(id), children: examples.concat(
       schemaDefault !== void 0 && !examples.map(String).includes(String(schemaDefault)) ? [schemaDefault] : []
-    ).map((example) => {
-      return /* @__PURE__ */ jsxRuntime.jsx("option", { value: example }, String(example));
-    }) }, `datalist_${id}`);
+    ).map((example) => (
+      // oxlint-disable-next-line jsx-a11y/control-has-associated-label
+      /* @__PURE__ */ jsxRuntime.jsx("option", { value: example }, String(example))
+    )) }, `datalist_${id}`);
   }
   function BaseInputTemplate(props) {
     const {
@@ -2675,19 +2694,16 @@
     } else {
       inputValue = value == null ? "" : value;
     }
-    const _onChange = react$1.useCallback(
-      ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2),
+    const handleChange = react.useCallback(
+      ({ target: { value: newValue } }) => onChange(newValue === "" ? options.emptyValue : newValue),
       [onChange, options]
     );
-    const _onBlur = react$1.useCallback(
-      ({ target }) => onBlur(id, target && target.value),
-      [onBlur, id]
-    );
-    const _onFocus = react$1.useCallback(
-      ({ target }) => onFocus(id, target && target.value),
+    const handleBlur = react.useCallback(({ target }) => onBlur(id, target?.value), [onBlur, id]);
+    const handleFocus = react.useCallback(
+      ({ target }) => onFocus(id, target?.value),
       [onFocus, id]
     );
-    const _onClear = react$1.useCallback(
+    const handleClear = react.useCallback(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -2708,45 +2724,51 @@
           value: inputValue,
           ...inputProps,
           list: schema.examples ? utils.examplesId(id) : void 0,
-          onChange: onChangeOverride || _onChange,
-          onBlur: _onBlur,
-          onFocus: _onFocus,
+          onChange: onChangeOverride || handleChange,
+          onBlur: handleBlur,
+          onFocus: handleFocus,
           "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
         }
       ),
-      options.allowClearTextInputs && !readonly && !disabled && inputValue && /* @__PURE__ */ jsxRuntime.jsx(ClearButton2, { registry, onClick: _onClear }),
+      options.allowClearTextInputs && !readonly && !disabled && inputValue && /* @__PURE__ */ jsxRuntime.jsx(ClearButton2, { registry, onClick: handleClear }),
       /* @__PURE__ */ jsxRuntime.jsx(SchemaExamples, { id, schema })
     ] });
   }
-  function IconButton(props) {
+  function IconButtonFn(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}` }) });
   }
-  function CopyButton(props) {
+  var IconButton = react.memo(IconButtonFn);
+  var IconButton_default = IconButton;
+  function CopyButtonFn(props) {
     const {
       registry: { translateString }
     } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.CopyButton), ...props, icon: "copy" });
   }
-  function MoveDownButton(props) {
+  var CopyButton = react.memo(CopyButtonFn);
+  function MoveDownButtonFn(props) {
     const {
       registry: { translateString }
     } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.MoveDownButton), ...props, icon: "arrow-down" });
   }
-  function MoveUpButton(props) {
+  var MoveDownButton = react.memo(MoveDownButtonFn);
+  function MoveUpButtonFn(props) {
     const {
       registry: { translateString }
     } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.MoveUpButton), ...props, icon: "arrow-up" });
   }
-  function RemoveButton(props) {
+  var MoveUpButton = react.memo(MoveUpButtonFn);
+  function RemoveButtonFn(props) {
     const {
       registry: { translateString }
     } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.RemoveButton), ...props, iconType: "danger", icon: "remove" });
   }
-  function ClearButton({
+  var RemoveButton = react.memo(RemoveButtonFn);
+  function ClearButtonFn({
     id,
     className,
     onClick,
@@ -2770,6 +2792,7 @@
       }
     );
   }
+  var ClearButton = react.memo(ClearButtonFn);
   function AddButton({
     id,
     className,
@@ -2783,7 +2806,7 @@
       {
         className: `col-xs-4 col-sm-2 col-lg-1 col-xs-offset-8 col-sm-offset-10 col-lg-offset-11 text-right ${className}`,
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          IconButton,
+          IconButton_default,
           {
             id,
             iconType: "info",
@@ -2819,12 +2842,33 @@
     };
   }
   var ButtonTemplates_default = buttonTemplates;
+  function CyclicSchemaExpandTemplate(props) {
+    const { name, fieldPathId, registry, onExpand } = props;
+    const { translateString } = registry;
+    const buttonId5 = `${fieldPathId[utils.ID_KEY]}-button`;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "1rem" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-danger", children: translateString(utils.TranslatableString.CycleDetected, [name]) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            id: buttonId5,
+            type: "button",
+            className: "btn btn-sm btn-warning",
+            onClick: () => onExpand(fieldPathId[utils.ID_KEY]),
+            children: translateString(utils.TranslatableString.ExpandButton)
+          }
+        ),
+        " "
+      ] })
+    ] });
+  }
   var TEST_IDS = utils.getTestIds();
   function RichDescription({ description, registry, uiSchema = {} }) {
     const { globalUiOptions } = registry;
     const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
     if (uiOptions.enableMarkdownInDescription && typeof description === "string") {
-      return /* @__PURE__ */ jsxRuntime.jsx(react.Markdown, { options: { disableParsingRawHTML: true }, "data-testid": TEST_IDS.markdown, children: description });
+      return /* @__PURE__ */ jsxRuntime.jsx(react$1.Markdown, { options: { disableParsingRawHTML: true }, "data-testid": TEST_IDS.markdown, children: description });
     }
     return description;
   }
@@ -2843,9 +2887,10 @@
     const { translateString } = registry;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel panel-danger errors", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-heading", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "panel-title", children: translateString(utils.TranslatableString.ErrorsLabel) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-group", children: errors.map((error, i) => {
-        return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "list-group-item text-danger", children: error.stack }, i);
-      }) })
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-group", children: errors.map((error, i) => (
+        // oxlint-disable-next-line react/no-array-index-key
+        /* @__PURE__ */ jsxRuntime.jsx("li", { className: "list-group-item text-danger", children: error.stack }, i)
+      )) })
     ] });
   }
   function FallbackFieldTemplate(props) {
@@ -2870,9 +2915,10 @@
       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);
-    }) }) });
+    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) => (
+      // oxlint-disable-next-line react/no-array-index-key
+      /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-danger", children: error }, index)
+    )) }) });
   }
   var TEST_IDS2 = utils.getTestIds();
   function RichHelp({
@@ -2883,7 +2929,7 @@
     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 /* @__PURE__ */ jsxRuntime.jsx(react$1.Markdown, { options: { disableParsingRawHTML: true }, "data-testid": TEST_IDS2.markdown, children: help });
     }
     return help;
   }
@@ -3014,7 +3060,7 @@
     const { id, registry, label, onAddClick, onRemoveClick } = props;
     if (onAddClick) {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        IconButton,
+        IconButton_default,
         {
           id,
           registry,
@@ -3024,9 +3070,10 @@
           title: label
         }
       );
-    } else if (onRemoveClick) {
+    }
+    if (onRemoveClick) {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        IconButton,
+        IconButton_default,
         {
           id,
           registry,
@@ -3053,7 +3100,7 @@
     const { translateString } = registry;
     let translateEnum = utils.TranslatableString.UnsupportedField;
     const translateParams = [];
-    if (fieldPathId && fieldPathId.$id) {
+    if (fieldPathId?.$id) {
       translateEnum = utils.TranslatableString.UnsupportedFieldWithId;
       translateParams.push(fieldPathId.$id);
     }
@@ -3062,7 +3109,7 @@
       translateParams.push(reason);
     }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "unsupported-field", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx(markdownToJsx.Markdown, { options: { disableParsingRawHTML: true }, children: translateString(translateEnum, translateParams) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Markdown, { options: { disableParsingRawHTML: true }, children: translateString(translateEnum, translateParams) }) }),
       schema && /* @__PURE__ */ jsxRuntime.jsx("pre", { children: JSON.stringify(schema, null, 2) })
     ] });
   }
@@ -3143,6 +3190,7 @@
       ArrayFieldTitleTemplate,
       ButtonTemplates: ButtonTemplates_default(),
       BaseInputTemplate,
+      CyclicSchemaExpandTemplate,
       DescriptionFieldTemplate: DescriptionField,
       ErrorListTemplate: ErrorList,
       FallbackFieldTemplate,
@@ -3172,23 +3220,26 @@
     const { translateString } = registry;
     const { elements, handleChange, handleClear, handleSetNow } = utils.useAltDateWidgetProps(props);
     return /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "list-inline", children: [
-      elements.map((elemProps, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "list-inline-item", children: /* @__PURE__ */ jsxRuntime.jsx(
-        utils.DateElement,
-        {
-          rootId: id,
-          name,
-          select: handleChange,
-          ...elemProps,
-          disabled,
-          readonly,
-          registry,
-          onBlur,
-          onFocus,
-          autofocus: autofocus && i === 0
-        }
-      ) }, i)),
-      (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "list-inline-item", children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", className: "btn btn-info btn-now", onClick: handleSetNow, children: translateString(utils.TranslatableString.NowLabel) }) }),
-      (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "list-inline-item", children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", className: "btn btn-warning btn-clear", onClick: handleClear, children: translateString(utils.TranslatableString.ClearLabel) }) })
+      elements.map((elemProps, i) => (
+        // oxlint-disable-next-line react/no-array-index-key
+        /* @__PURE__ */ jsxRuntime.jsx("li", { className: "list-inline-item", children: /* @__PURE__ */ jsxRuntime.jsx(
+          utils.DateElement,
+          {
+            rootId: id,
+            name,
+            select: handleChange,
+            ...elemProps,
+            disabled,
+            readonly,
+            registry,
+            onBlur,
+            onFocus,
+            autofocus: autofocus && i === 0
+          }
+        ) }, i)
+      )),
+      (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "list-inline-item", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "btn btn-info btn-now", onClick: handleSetNow, children: translateString(utils.TranslatableString.NowLabel) }) }),
+      (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "list-inline-item", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "btn btn-warning btn-clear", onClick: handleClear, children: translateString(utils.TranslatableString.ClearLabel) }) })
     ] });
   }
   var AltDateWidget_default = AltDateWidget;
@@ -3207,17 +3258,17 @@
     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)),
+    const handleBlur = react.useCallback(
+      ({ target }) => onBlur(id, utils.enumOptionValueDecoder(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)),
+    const handleFocus = react.useCallback(
+      ({ target }) => onFocus(id, utils.enumOptionValueDecoder(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 itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
       const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
       const handleChange = (event) => {
         if (event.target.checked) {
@@ -3245,7 +3296,7 @@
         ),
         /* @__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);
+      return inline ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: `checkbox-inline ${disabledCls}`, children: checkbox }, String(option.value)) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `checkbox ${disabledCls}`, children: /* @__PURE__ */ jsxRuntime.jsx("label", { children: checkbox }) }, String(option.value));
     }) });
   }
   var CheckboxesWidget_default = CheckboxesWidget;
@@ -3272,15 +3323,15 @@
       options
     );
     const required = utils.schemaRequiresTrueValue(schema);
-    const handleChange = react$1.useCallback(
+    const handleChange = react.useCallback(
       (event) => onChange(event.target.checked),
       [onChange]
     );
-    const handleBlur = react$1.useCallback(
+    const handleBlur = react.useCallback(
       (event) => onBlur(id, event.target.checked),
       [onBlur, id]
     );
-    const handleFocus = react$1.useCallback(
+    const handleFocus = react.useCallback(
       (event) => onFocus(id, event.target.checked),
       [onFocus, id]
     );
@@ -3334,14 +3385,14 @@
         type: "datetime-local",
         ...props,
         value: utils.utcToLocal(value),
-        onChange: (value2) => onChange(utils.localToUTC(value2))
+        onChange: (newValue) => onChange(utils.localToUTC(newValue))
       }
     );
   }
   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]);
+    const handleChange = react.useCallback((value) => onChange(value || void 0), [onChange]);
     return /* @__PURE__ */ jsxRuntime.jsx(BaseInputTemplate2, { type: "date", ...props, onChange: handleChange });
   }
   function EmailWidget(props) {
@@ -3358,12 +3409,13 @@
     if (!dataURL) {
       return null;
     }
+    const previewLabel = translateString(utils.TranslatableString.PreviewLabel);
     if (["image/jpeg", "image/png"].includes(type)) {
-      return /* @__PURE__ */ jsxRuntime.jsx("img", { src: dataURL, style: { maxWidth: "100%" }, className: "file-preview" });
+      return /* @__PURE__ */ jsxRuntime.jsx("img", { src: dataURL, alt: previewLabel, style: { maxWidth: "100%" }, className: "file-preview" });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       " ",
-      /* @__PURE__ */ jsxRuntime.jsx("a", { download: `preview-${name}`, href: dataURL, className: "file-download", children: translateString(utils.TranslatableString.PreviewLabel) })
+      /* @__PURE__ */ jsxRuntime.jsx("a", { download: `preview-${name}`, href: dataURL, className: "file-download", children: previewLabel })
     ] });
   }
   function FilesInfo({
@@ -3381,11 +3433,14 @@
     return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "file-info", children: filesInfo.map((fileInfo, key) => {
       const { name, size, type } = fileInfo;
       const handleRemove = () => onRemove(key);
-      return /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-        /* @__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);
+      return (
+        // oxlint-disable-next-line react/no-array-index-key
+        /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.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)
+      );
     }) });
   }
   function FileWidget(props) {
@@ -3451,17 +3506,17 @@
   }) {
     const { enumOptions, enumDisabled, inline, emptyValue } = options;
     const optionValueFormat = utils.getOptionValueFormat(options);
-    const handleBlur = react$1.useCallback(
-      ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    const handleBlur = react.useCallback(
+      ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target?.value, enumOptions, optionValueFormat, emptyValue)),
       [onBlur, enumOptions, emptyValue, id, optionValueFormat]
     );
-    const handleFocus = react$1.useCallback(
-      ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    const handleFocus = react.useCallback(
+      ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target?.value, enumOptions, optionValueFormat, emptyValue)),
       [onFocus, enumOptions, emptyValue, id, optionValueFormat]
     );
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "field-radio-group", id, role: "radiogroup", children: Array.isArray(enumOptions) && enumOptions.map((option, i) => {
       const checked = utils.enumOptionsIsSelected(option.value, value);
-      const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+      const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
       const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
       const handleChange = () => onChange(option.value);
       const radio = /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -3484,7 +3539,7 @@
         ),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
       ] });
-      return inline ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: `radio-inline ${disabledCls}`, children: radio }, i) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `radio ${disabledCls}`, children: /* @__PURE__ */ jsxRuntime.jsx("label", { children: radio }) }, i);
+      return inline ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: `radio-inline ${disabledCls}`, children: radio }, String(option.value)) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `radio ${disabledCls}`, children: /* @__PURE__ */ jsxRuntime.jsx("label", { children: radio }) }, String(option.value));
     }) });
   }
   var RadioWidget_default = RadioWidget;
@@ -3517,7 +3572,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$1.useCallback(
+    const handleStarClick = react.useCallback(
       (starValue) => {
         if (!disabled && !readonly) {
           onChange(starValue);
@@ -3525,7 +3580,7 @@
       },
       [onChange, disabled, readonly]
     );
-    const handleFocus = react$1.useCallback(
+    const handleFocus = react.useCallback(
       (event) => {
         if (onFocus) {
           const starValue = Number(event.target.dataset.value);
@@ -3534,7 +3589,7 @@
       },
       [onFocus, id]
     );
-    const handleBlur = react$1.useCallback(
+    const handleBlur = react.useCallback(
       (event) => {
         if (onBlur) {
           const starValue = Number(event.target.dataset.value);
@@ -3549,7 +3604,7 @@
       }
       return isFilled ? "\u2605" : "\u2606";
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: "rating-widget",
@@ -3566,6 +3621,7 @@
               "span",
               {
                 onClick: () => handleStarClick(starValue),
+                onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && handleStarClick(starValue),
                 onFocus: handleFocus,
                 onBlur: handleBlur,
                 "data-value": starValue,
@@ -3598,7 +3654,7 @@
           )
         ]
       }
-    ) });
+    );
   }
   function getValue(event, multiple) {
     if (multiple) {
@@ -3620,26 +3676,28 @@
     onBlur,
     onFocus,
     placeholder,
-    htmlName
+    htmlName,
+    registry,
+    uiSchema
   }) {
     const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
     const emptyValue = multiple ? [] : "";
     const optionValueFormat = utils.getOptionValueFormat(options);
-    const handleFocus = react$1.useCallback(
+    const handleFocus = react.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$1.useCallback(
+    const handleBlur = react.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$1.useCallback(
+    const handleChange = react.useCallback(
       (event) => {
         const newValue = getValue(event, multiple);
         return onChange(utils.enumOptionValueDecoder(newValue, enumOptions, optionValueFormat, optEmptyVal));
@@ -3648,36 +3706,57 @@
     );
     const selectValue = utils.enumOptionSelectedValue(value, enumOptions, multiple, optionValueFormat, emptyValue);
     const showPlaceholderOption = !multiple && schema.default === void 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "select",
-      {
-        id,
-        name: htmlName || id,
-        multiple,
-        role: "combobox",
-        className: "form-control",
-        value: selectValue,
-        required,
-        disabled: disabled || readonly,
-        autoFocus: autofocus,
-        onBlur: handleBlur,
-        onFocus: handleFocus,
-        onChange: handleChange,
-        "aria-describedby": utils.ariaDescribedByIds(id),
-        children: [
-          showPlaceholderOption && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: placeholder }),
-          Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label }, i) => {
-            const disabled2 = enumDisabled && enumDisabled.indexOf(value2) !== -1;
-            return /* @__PURE__ */ jsxRuntime.jsx("option", { value: utils.enumOptionValueEncoder(value2, i, optionValueFormat), disabled: disabled2, children: label }, i);
-          })
-        ]
-      }
-    );
+    utils.logUnsupportedDefaultForEnum(id, schema, enumOptions, multiple);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        utils.SelectedOptionDescription,
+        {
+          id,
+          multiple,
+          options,
+          registry,
+          uiSchema,
+          value
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          id,
+          name: htmlName || id,
+          multiple,
+          className: "form-control",
+          value: selectValue,
+          required,
+          disabled: disabled || readonly,
+          autoFocus: autofocus,
+          onBlur: handleBlur,
+          onFocus: handleFocus,
+          onChange: handleChange,
+          "aria-describedby": utils.ariaDescribedByIds(id),
+          children: [
+            showPlaceholderOption && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: placeholder }),
+            Array.isArray(enumOptions) && enumOptions.map(({ value: enumValue, label: enumLabel }, i) => {
+              const isDisabled = enumDisabled && enumDisabled.includes(enumValue);
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "option",
+                {
+                  value: utils.enumOptionValueEncoder(enumValue, i, optionValueFormat),
+                  disabled: isDisabled,
+                  children: enumLabel
+                },
+                String(enumValue)
+              );
+            })
+          ]
+        }
+      )
+    ] });
   }
   var SelectWidget_default = SelectWidget;
   function TextareaWidget({
     id,
-    options = {},
+    options,
     placeholder,
     value,
     required,
@@ -3689,16 +3768,16 @@
     onFocus,
     htmlName
   }) {
-    const handleChange = react$1.useCallback(
-      ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2),
+    const handleChange = react.useCallback(
+      ({ target: { value: newValue } }) => onChange(newValue === "" ? options.emptyValue : newValue),
       [onChange, options.emptyValue]
     );
-    const handleBlur = react$1.useCallback(
-      ({ target }) => onBlur(id, target && target.value),
+    const handleBlur = react.useCallback(
+      ({ target }) => onBlur(id, target?.value),
       [onBlur, id]
     );
-    const handleFocus = react$1.useCallback(
-      ({ target }) => onFocus(id, target && target.value),
+    const handleFocus = react.useCallback(
+      ({ target }) => onFocus(id, target?.value),
       [id, onFocus]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3707,7 +3786,7 @@
         id,
         name: htmlName || id,
         className: "form-control",
-        value: value ? value : "",
+        value: value || "",
         placeholder,
         required,
         disabled,
@@ -3730,7 +3809,7 @@
   function TimeWidget(props) {
     const { onChange, options, registry } = props;
     const BaseInputTemplate2 = utils.getTemplate("BaseInputTemplate", registry, options);
-    const handleChange = react$1.useCallback((value) => onChange(value ? `${value}:00` : void 0), [onChange]);
+    const handleChange = react.useCallback((value) => onChange(value ? `${value}:00` : void 0), [onChange]);
     return /* @__PURE__ */ jsxRuntime.jsx(BaseInputTemplate2, { type: "time", ...props, onChange: handleChange });
   }
   function UpDownWidget(props) {
@@ -3793,7 +3872,7 @@
       ...status !== void 0 && { status }
     };
   }
-  var Form = class extends react$1.Component {
+  var Form = class _Form extends react.Component {
     /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
      * provide any possible type here
      */
@@ -3804,7 +3883,7 @@
     /** Flag to track when we're processing a user-initiated field change.
      * This prevents componentDidUpdate from reverting oneOf/anyOf option switches.
      */
-    _isProcessingUserChange = false;
+    isProcessingUserChange = false;
     /** When the `extraErrors` prop changes, re-merges `schemaValidationErrors` + `extraErrors` + `customErrors` into
      * state before render, ensuring the updated errors are visible immediately in a single render cycle.
      *
@@ -3813,7 +3892,7 @@
      * @returns Partial state with re-merged errors if `extraErrors` changed, or `null` if no update is needed
      */
     static getDerivedStateFromProps(props, state) {
-      if (props.extraErrors !== state._prevExtraErrors) {
+      if (props.extraErrors !== state.prevExtraErrors) {
         const baseErrors = {
           errors: state.schemaValidationErrors || [],
           errorSchema: state.schemaValidationErrorSchema || {}
@@ -3829,7 +3908,7 @@
             true
           ));
         }
-        return { _prevExtraErrors: props.extraErrors, errors, errorSchema };
+        return { prevExtraErrors: props.extraErrors, errors, errorSchema };
       }
       return null;
     }
@@ -3848,12 +3927,12 @@
       const formData = propsFormData ?? initialFormData;
       this.state = {
         ...this.getStateFromProps(props, formData, void 0, void 0, void 0, true),
-        _prevExtraErrors: props.extraErrors
+        prevExtraErrors: props.extraErrors
       };
       if (onChange && !utils.deepEquals(this.state.formData, formData)) {
         onChange(toIChangeEvent(this.state));
       }
-      this.formElement = react$1.createRef();
+      this.formElement = react.createRef();
     }
     /**
      * `getSnapshotBeforeUpdate` is a React lifecycle method that is invoked right before the most recently rendered
@@ -3913,8 +3992,8 @@
       if (snapshot.shouldUpdate) {
         const { nextState } = snapshot;
         const nextStateDiffersFromProps = !utils.deepEquals(nextState.formData, this.props.formData);
-        const wasProcessingUserChange = this._isProcessingUserChange;
-        this._isProcessingUserChange = false;
+        const wasProcessingUserChange = this.isProcessingUserChange;
+        this.isProcessingUserChange = false;
         if (wasProcessingUserChange && nextStateDiffersFromProps) {
           return;
         }
@@ -3931,12 +4010,13 @@
      * @param props - The props passed to the `Form`
      * @param inputFormData - The new or current data for the `Form`
      * @param retrievedSchema - An expanded schema, if not provided, it will be retrieved from the `schema` and `formData`.
-     * @param isSchemaChanged - A flag indicating whether the schema has changed.
-     * @param formDataChangedFields - The changed fields of `formData`
-     * @param skipLiveValidate - Optional flag, if true, means that we are not running live validation
+     * @param [isSchemaChanged=false] - A flag indicating whether the schema has changed.
+     * @param [formDataChangedFields=[]] - The changed fields of `formData`
+     * @param [skipLiveValidate=false] - Optional flag, if true, means that we are not running live validation
+     * @param [shouldSanitize=false] - Optional flag, if true, means that we should attempt to sanitize formData
      * @returns - The new state for the `Form`
      */
-    getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false, formDataChangedFields = [], skipLiveValidate = false) {
+    getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false, formDataChangedFields = [], skipLiveValidate = false, shouldSanitize = false) {
       const state = this.state || {};
       const schema = "schema" in props ? props.schema : this.props.schema;
       const validator2 = "validator" in props ? props.validator : this.props.validator;
@@ -3947,7 +4027,7 @@
       const mustValidate = edit && !props.noValidate && liveValidate;
       const experimental_defaultFormStateBehavior = "experimental_defaultFormStateBehavior" in props ? props.experimental_defaultFormStateBehavior : this.props.experimental_defaultFormStateBehavior;
       const experimental_customMergeAllOf = "experimental_customMergeAllOf" in props ? props.experimental_customMergeAllOf : this.props.experimental_customMergeAllOf;
-      let schemaUtils = state.schemaUtils;
+      let { schemaUtils } = state;
       if (!schemaUtils || schemaUtils.doesSchemaUtilsDiffer(
         validator2,
         schema,
@@ -3968,19 +4048,45 @@
       } else if (inputFormData === void 0 && isUncontrolled) {
         defaultsFormData = state.formData;
       }
-      const formData = schemaUtils.getDefaultFormState(
-        rootSchema,
-        defaultsFormData,
-        false,
-        state.initialDefaultsGenerated
-      );
-      const _retrievedSchema = this.updateRetrievedSchema(
-        retrievedSchema ?? schemaUtils.retrieveSchema(rootSchema, formData)
-      );
+      let formData;
+      let computedRetrievedSchema;
+      let wasSanitized = false;
+      const preventInfiniteSanitize = [];
+      do {
+        formData = schemaUtils.getDefaultFormState(
+          rootSchema,
+          defaultsFormData,
+          false,
+          state.initialDefaultsGenerated
+        );
+        const formHash = shouldSanitize ? utils.hashObject({ formData }) : "";
+        computedRetrievedSchema = this.updateRetrievedSchema(
+          retrievedSchema ?? schemaUtils.retrieveSchema(rootSchema, formData)
+        );
+        if (shouldSanitize && !preventInfiniteSanitize.includes(formHash) && !utils.deepEquals(computedRetrievedSchema, state.retrievedSchema)) {
+          const sanitizedFormData = schemaUtils.sanitizeDataForNewSchema(
+            computedRetrievedSchema,
+            state.retrievedSchema,
+            formData
+          );
+          wasSanitized = !utils.deepEquals(sanitizedFormData, formData);
+          if (wasSanitized) {
+            formData = sanitizedFormData;
+            defaultsFormData = sanitizedFormData;
+            const sanitizedFormHash = utils.hashObject({ formData: sanitizedFormData });
+            wasSanitized = !preventInfiniteSanitize.includes(sanitizedFormHash);
+            preventInfiniteSanitize.push(sanitizedFormHash);
+          }
+          preventInfiniteSanitize.push(formHash);
+        } else {
+          wasSanitized = false;
+        }
+      } while (wasSanitized);
       const getCurrentErrors = () => {
         if (props.noValidate || isSchemaChanged) {
           return { errors: [], errorSchema: {} };
-        } else if (!props.liveValidate) {
+        }
+        if (!props.liveValidate) {
           return {
             errors: state.schemaValidationErrors || [],
             errorSchema: state.schemaValidationErrorSchema || {}
@@ -3993,8 +4099,7 @@
       };
       let errors;
       let errorSchema;
-      let schemaValidationErrors = state.schemaValidationErrors;
-      let schemaValidationErrorSchema = state.schemaValidationErrorSchema;
+      let { schemaValidationErrors, schemaValidationErrorSchema } = state;
       if (mustValidate && !skipLiveValidate) {
         const liveValidation = this.liveValidate(
           rootSchema,
@@ -4017,24 +4122,22 @@
         errors = currentErrors.errors;
         errorSchema = currentErrors.errorSchema;
         if (formDataChangedFields.length > 0 && !mustValidate) {
-          const newErrorSchema = formDataChangedFields.reduce(
-            (acc, key) => {
-              acc[key] = void 0;
-              return acc;
-            },
-            {}
-          );
-          errorSchema = schemaValidationErrorSchema = utils.mergeObjects(
+          const newErrorSchema = formDataChangedFields.reduce((acc, key) => {
+            acc[key] = void 0;
+            return acc;
+          }, {});
+          schemaValidationErrorSchema = utils.mergeObjects(
             currentErrors.errorSchema,
             newErrorSchema,
             "preventDuplicates"
           );
+          errorSchema = schemaValidationErrorSchema;
         }
-        const mergedErrors = this.mergeErrors({ errorSchema, errors }, props.extraErrors, state.customErrors);
+        const mergedErrors = _Form.mergeErrors({ errorSchema, errors }, props.extraErrors, state.customErrors);
         errors = mergedErrors.errors;
         errorSchema = mergedErrors.errorSchema;
       }
-      const newRegistry = this.getRegistry(props, rootSchema, schemaUtils);
+      const newRegistry = _Form.getRegistry(props, rootSchema, schemaUtils);
       const registry = utils.deepEquals(state.registry, newRegistry) ? state.registry : newRegistry;
       const fieldPathId = state.fieldPathId && state.fieldPathId?.[utils.ID_KEY] === registry.globalFormOptions.idPrefix ? state.fieldPathId : utils.toFieldPathId("", registry.globalFormOptions);
       const nextState = {
@@ -4048,7 +4151,7 @@
         errorSchema,
         schemaValidationErrors,
         schemaValidationErrorSchema,
-        retrievedSchema: _retrievedSchema,
+        retrievedSchema: computedRetrievedSchema,
         initialDefaultsGenerated: true,
         registry
       };
@@ -4073,17 +4176,18 @@
      * @param [retrievedSchema] - An optionally retrieved schema for per
      */
     validate(formData, schema = this.state.schema, altSchemaUtils, retrievedSchema) {
-      const schemaUtils = altSchemaUtils ? altSchemaUtils : this.state.schemaUtils;
+      const schemaUtils = altSchemaUtils || this.state.schemaUtils;
       const { customValidate, transformErrors, uiSchema } = this.props;
-      const resolvedSchema = retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData);
-      return schemaUtils.getValidator().validateFormData(formData, resolvedSchema, customValidate, transformErrors, uiSchema);
+      const validationSchema = retrievedSchema ?? schema;
+      const validationFormData = formData ? JSON.parse(JSON.stringify(formData)) : void 0;
+      return schemaUtils.getValidator().validateFormData(validationFormData, validationSchema, customValidate, transformErrors, uiSchema);
     }
     /** Renders any errors contained in the `state` in using the `ErrorList`, if not disabled by `showErrorList`. */
     renderErrors(registry) {
       const { errors, errorSchema, schema, uiSchema } = this.state;
       const options = utils.getUiOptions(uiSchema);
       const ErrorListTemplate = utils.getTemplate("ErrorListTemplate", registry, options);
-      if (errors && errors.length) {
+      if (errors?.length) {
         return /* @__PURE__ */ jsxRuntime.jsx(
           ErrorListTemplate,
           {
@@ -4105,9 +4209,8 @@
      * @return - The `extraErrors` and `customErrors` merged into the `schemaValidation`
      * @private
      */
-    mergeErrors(schemaValidation, extraErrors, customErrors) {
-      let errorSchema = schemaValidation.errorSchema;
-      let errors = schemaValidation.errors;
+    static mergeErrors(schemaValidation, extraErrors, customErrors) {
+      let { errorSchema, errors } = schemaValidation;
       if (extraErrors) {
         const merged = utils.validationDataMerge(schemaValidation, extraErrors);
         errorSchema = merged.errorSchema;
@@ -4136,8 +4239,8 @@
      */
     liveValidate(rootSchema, schemaUtils, originalErrorSchema, formData, extraErrors, customErrors, retrievedSchema, mergeIntoOriginalErrorSchema = false) {
       const schemaValidation = this.validate(formData, rootSchema, schemaUtils, retrievedSchema);
-      const errors = schemaValidation.errors;
-      let errorSchema = schemaValidation.errorSchema;
+      const { errors } = schemaValidation;
+      let { errorSchema } = schemaValidation;
       if (mergeIntoOriginalErrorSchema) {
         errorSchema = utils.mergeObjects(
           originalErrorSchema,
@@ -4147,7 +4250,7 @@
       }
       const schemaValidationErrors = errors;
       const schemaValidationErrorSchema = errorSchema;
-      const mergedErrors = this.mergeErrors({ errorSchema, errors }, extraErrors, customErrors);
+      const mergedErrors = _Form.mergeErrors({ errorSchema, errors }, extraErrors, customErrors);
       return { ...mergedErrors, schemaValidationErrors, schemaValidationErrorSchema };
     }
     /** Returns the `formData` with only the elements specified in the `fields` list
@@ -4156,18 +4259,16 @@
      * @param fields - The fields to keep while filtering
      * @deprecated - To be removed as an exported `Form` function in a future release; there isn't a planned replacement
      */
-    getUsedFormData = (formData, fields2) => {
-      return utils.getUsedFormData(formData, fields2);
-    };
+    // oxlint-disable-next-line class-methods-use-this, typescript/no-deprecated
+    getUsedFormData = (formData, fields2) => utils.getUsedFormData(formData, fields2);
     /** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
      *
      * @param pathSchema - The `PathSchema` object for the form
      * @param [formData] - The form data to use while checking for empty objects/arrays
      * @deprecated - To be removed as an exported `Form` function in a future release; there isn't a planned replacement
      */
-    getFieldNames = (pathSchema, formData) => {
-      return utils.getFieldNames(pathSchema, formData);
-    };
+    // oxlint-disable-next-line class-methods-use-this, typescript/no-deprecated
+    getFieldNames = (pathSchema, formData) => utils.getFieldNames(pathSchema, formData);
     /** Returns the `formData` after filtering to remove any extra data not in a form field
      *
      * @param formData - The data for the `Form`
@@ -4219,25 +4320,24 @@
       if (this.pendingChanges.length === 0) {
         return;
       }
-      this._isProcessingUserChange = true;
+      this.isProcessingUserChange = true;
       const { newValue, path, id } = this.pendingChanges[0];
       const { newErrorSchema } = this.pendingChanges[0];
-      const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
+      const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange, disabled, readonly } = this.props;
       const { formData: oldFormData, schemaUtils, schema, fieldPathId, schemaValidationErrorSchema, errors } = this.state;
-      let { customErrors } = this.state;
+      let { customErrors, retrievedSchema } = this.state;
       let mergeBaseErrorSchema = schemaValidationErrorSchema;
       const rootPathId = fieldPathId.path[0] || "";
       const isRootPath = !path || path.length === 0 || path.length === 1 && path[0] === rootPathId;
-      let retrievedSchema = this.state.retrievedSchema;
       let formData = isRootPath ? newValue : _cloneDeep(oldFormData);
       const hasOnlyUndefinedValues = utils.isObject(formData) && Object.keys(formData).length > 0 && Object.values(formData).every((v) => v === void 0);
       const wasPreviouslyNull = oldFormData === null || oldFormData === void 0;
       const inputForDefaults = hasOnlyUndefinedValues && wasPreviouslyNull ? void 0 : formData;
       if (utils.isObject(formData) || Array.isArray(formData)) {
+        let plainLeafWasCleared = false;
         if (newValue === ADDITIONAL_PROPERTY_KEY_REMOVE) {
           _unset(formData, path);
         } else if (!isRootPath) {
-          let unsetPath = false;
           let valueForPath = newValue;
           if (newValue === void 0) {
             const lastSegment = path[path.length - 1];
@@ -4248,28 +4348,38 @@
               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;
+                plainLeafWasCleared = true;
               }
             }
           }
-          if (unsetPath) {
-            _unset(formData, path);
+          if (plainLeafWasCleared) {
+            set(formData, path, void 0);
           } else {
             set(formData, path, valueForPath);
           }
         }
-        const newState = this.getStateFromProps(this.props, inputForDefaults, void 0, void 0, void 0, true);
+        const shouldSanitize = retrievedSchema && !isRootPath && !utils.isObject(newValue) && !Array.isArray(newValue) && !disabled && !readonly;
+        const newState = this.getStateFromProps(
+          this.props,
+          inputForDefaults,
+          void 0,
+          void 0,
+          void 0,
+          true,
+          shouldSanitize
+        );
         formData = newState.formData;
         retrievedSchema = newState.retrievedSchema;
+        if (plainLeafWasCleared && formData) {
+          set(formData, path, void 0);
+        }
       }
       const mustValidate = !noValidate && (liveValidate === true || liveValidate === "onChange");
-      let state = { formData, schema };
+      let state = { formData, retrievedSchema };
       let newFormData = formData;
       if (omitExtraData === true && (liveOmit === true || liveOmit === "onChange")) {
         newFormData = this.omitExtraData(formData);
-        state = {
-          formData: newFormData
-        };
+        state = { ...state, formData: newFormData };
       }
       if (newErrorSchema) {
         const oldValidationError = !isRootPath ? get(schemaValidationErrorSchema, path) : schemaValidationErrorSchema;
@@ -4285,9 +4395,9 @@
             customErrors = new utils.ErrorSchemaBuilder();
           }
           if (isRootPath) {
-            const errors2 = get(newErrorSchema, utils.ERRORS_KEY);
-            if (errors2) {
-              customErrors.setErrors(errors2);
+            const pathErrors = get(newErrorSchema, utils.ERRORS_KEY);
+            if (pathErrors) {
+              customErrors.setErrors(pathErrors);
             }
           } else {
             set(customErrors.ErrorSchema, path, newErrorSchema);
@@ -4306,14 +4416,14 @@
           customErrors,
           retrievedSchema
         );
-        state = { formData: newFormData, ...liveValidation, customErrors };
+        state = { ...state, formData: newFormData, ...liveValidation, customErrors };
       } else if (!noValidate && newErrorSchema) {
-        const mergedErrors = this.mergeErrors({ errorSchema: mergeBaseErrorSchema, errors }, extraErrors, customErrors);
-        state = {
-          formData: newFormData,
-          ...mergedErrors,
+        const mergedErrors = _Form.mergeErrors(
+          { errorSchema: mergeBaseErrorSchema, errors },
+          extraErrors,
           customErrors
-        };
+        );
+        state = { ...state, formData: newFormData, ...mergedErrors, customErrors };
       }
       this.setState(state, () => {
         if (onChange) {
@@ -4362,7 +4472,7 @@
         initialDefaultsGenerated: false,
         customErrors: void 0
       };
-      this.setState(state, () => onChange && onChange(toIChangeEvent({ ...this.state, ...state })));
+      this.setState(state, () => onChange?.(toIChangeEvent({ ...this.state, ...state })));
     };
     /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
      * was provided. Also runs any live validation and/or live omit operations if the flags indicate they should happen
@@ -4466,7 +4576,7 @@
      * @returns - The `GlobalFormOptions` from the props
      * @private
      */
-    getGlobalFormOptions(props) {
+    static getGlobalFormOptions(props) {
       const {
         uiSchema = {},
         experimental_componentUpdateStrategy,
@@ -4485,7 +4595,7 @@
       };
     }
     /** Computed the registry for the form using the given `props`, `schema` and `schemaUtils` */
-    getRegistry(props, schema, schemaUtils) {
+    static getRegistry(props, schema, schemaUtils) {
       const { translateString: customTranslateString, uiSchema = {} } = props;
       const { fields: fields2, templates: templates2, widgets: widgets2, formContext, translateString } = getDefaultRegistry();
       return {
@@ -4504,7 +4614,7 @@
         schemaUtils,
         translateString: customTranslateString || translateString,
         globalUiOptions: uiSchema[utils.UI_GLOBAL_OPTIONS_KEY],
-        globalFormOptions: this.getGlobalFormOptions(props),
+        globalFormOptions: _Form.getGlobalFormOptions(props),
         uiSchemaDefinitions: uiSchema[utils.UI_DEFINITIONS_KEY] ?? {}
       };
     }
@@ -4539,7 +4649,7 @@
       if (!field) {
         field = this.formElement.current.querySelector(`input[id^="${elementId}"], button[id^="${elementId}"]`);
       }
-      if (field && field.length) {
+      if (field?.length) {
         field = field[0];
       }
       if (field) {
@@ -4556,7 +4666,7 @@
       const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
       const { errors: prevErrors } = this.state;
       const schemaValidation = this.validate(formData);
-      const { errors, errorSchema } = extraErrors ? this.mergeErrors(schemaValidation, extraErrors) : schemaValidation;
+      const { errors, errorSchema } = extraErrors ? _Form.mergeErrors(schemaValidation, extraErrors) : schemaValidation;
       const hasError = schemaValidation.errors.length > 0 || extraErrors && extraErrorsBlockSubmit;
       if (hasError) {
         if (focusOnFirstError) {
@@ -4635,7 +4745,7 @@
         _internalFormWrapper
       } = this.props;
       const { schema, uiSchema, formData, errorSchema, fieldPathId, registry } = this.state;
-      const { SchemaField: _SchemaField } = registry.fields;
+      const { SchemaField: SchemaFieldComponent } = registry.fields;
       const { SubmitButton: SubmitButton2 } = registry.templates.ButtonTemplates;
       const as = _internalFormWrapper ? tagName : void 0;
       const FormTag = _internalFormWrapper || tagName || "form";
@@ -4647,7 +4757,7 @@
       return /* @__PURE__ */ jsxRuntime.jsxs(
         FormTag,
         {
-          className: className ? className : "rjsf",
+          className: className || "rjsf",
           id,
           name,
           method,
@@ -4663,7 +4773,7 @@
           children: [
             showErrorList === "top" && this.renderErrors(registry),
             /* @__PURE__ */ jsxRuntime.jsx(
-              _SchemaField,
+              SchemaFieldComponent,
               {
                 name: "",
                 schema,
@@ -4679,7 +4789,7 @@
                 readonly
               }
             ),
-            children ? children : /* @__PURE__ */ jsxRuntime.jsx(SubmitButton2, { uiSchema: submitUiSchema, registry }),
+            children || /* @__PURE__ */ jsxRuntime.jsx(SubmitButton2, { uiSchema: submitUiSchema, registry }),
             showErrorList === "bottom" && this.renderErrors(registry)
           ]
         }
@@ -4705,16 +4815,16 @@
     };
   }
   function withTheme(themeProps) {
-    return react$1.forwardRef(
-      ({ fields: fields2, widgets: widgets2, templates: templates2, ...directProps }, ref) => {
-        fields2 = { ...themeProps?.fields, ...fields2 };
-        widgets2 = { ...themeProps?.widgets, ...widgets2 };
-        templates2 = {
+    return react.forwardRef(
+      ({ fields: propFields, widgets: propWidgets, templates: propTemplates, ...directProps }, ref) => {
+        const fields2 = { ...themeProps?.fields, ...propFields };
+        const widgets2 = { ...themeProps?.widgets, ...propWidgets };
+        const templates2 = {
           ...themeProps?.templates,
-          ...templates2,
+          ...propTemplates,
           ButtonTemplates: {
             ...themeProps?.templates?.ButtonTemplates,
-            ...templates2?.ButtonTemplates
+            ...propTemplates?.ButtonTemplates
           }
         };
         return /* @__PURE__ */ jsxRuntime.jsx(