@rjsf/core 5.24.10 → 6.0.0-beta.1

package/dist/core.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash/forEach'), require('lodash/get'), require('lodash/isEmpty'), require('lodash/isNil'), require('lodash/pick'), require('lodash/toPath'), require('lodash/cloneDeep'), require('lodash/isObject'), require('lodash/set'), require('nanoid'), require('react/jsx-runtime'), require('lodash/omit'), require('markdown-to-jsx'), require('lodash/has'), require('lodash/unset')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash/forEach', 'lodash/get', 'lodash/isEmpty', 'lodash/isNil', 'lodash/pick', 'lodash/toPath', 'lodash/cloneDeep', 'lodash/isObject', 'lodash/set', 'nanoid', 'react/jsx-runtime', 'lodash/omit', 'markdown-to-jsx', 'lodash/has', 'lodash/unset'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.react, global.utils, global._forEach, global.get3, global.isEmpty, global._isNil, global._pick, global._toPath, global.cloneDeep, global.isObject, global.set, global.nanoid, global.jsxRuntime, global.omit2, global.Markdown, global.has, global.unset));
-})(this, (function (exports, react, utils, _forEach, get3, isEmpty, _isNil, _pick, _toPath, cloneDeep, isObject, set, nanoid, jsxRuntime, omit2, Markdown, has, unset) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash/forEach'), require('lodash/get'), require('lodash/isEmpty'), require('lodash/isNil'), require('lodash/pick'), require('lodash/toPath'), require('lodash/cloneDeep'), require('lodash/isObject'), require('lodash/set'), require('nanoid'), require('react/jsx-runtime'), require('lodash/each'), require('lodash/flatten'), require('lodash/has'), require('lodash/includes'), require('lodash/intersection'), require('lodash/isFunction'), require('lodash/isEqual'), require('lodash/isPlainObject'), require('lodash/isString'), require('lodash/isUndefined'), require('lodash/noop'), require('lodash/omit'), require('markdown-to-jsx'), require('lodash/unset')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash/forEach', 'lodash/get', 'lodash/isEmpty', 'lodash/isNil', 'lodash/pick', 'lodash/toPath', 'lodash/cloneDeep', 'lodash/isObject', 'lodash/set', 'nanoid', 'react/jsx-runtime', 'lodash/each', 'lodash/flatten', 'lodash/has', 'lodash/includes', 'lodash/intersection', 'lodash/isFunction', 'lodash/isEqual', 'lodash/isPlainObject', 'lodash/isString', 'lodash/isUndefined', 'lodash/noop', 'lodash/omit', 'markdown-to-jsx', 'lodash/unset'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.react, global.utils, global._forEach, global.get2, global.isEmpty, global._isNil, global._pick, global._toPath, global.cloneDeep2, global.isObject, global.set, global.nanoid, global.jsxRuntime, global.each, global.flatten, global.has, global.includes, global.intersection, global.isFunction, global.isEqual, global.isPlainObject, global.isString, global.isUndefined, global.noop, global.omit3, global.Markdown, global.unset));
+})(this, (function (exports, react, utils, _forEach, get2, isEmpty, _isNil, _pick, _toPath, cloneDeep2, isObject, set, nanoid, jsxRuntime, each, flatten, has, includes, intersection, isFunction, isEqual, isPlainObject, isString, isUndefined, noop, omit3, Markdown, unset) { 'use strict';
 
   // src/components/Form.tsx
   function generateRowId() {
@@ -66,10 +66,10 @@
     get itemTitle() {
       const { schema, registry } = this.props;
       const { translateString } = registry;
-      return get3(
+      return get2(
         schema,
         [utils.ITEMS_KEY, "title"],
-        get3(schema, [utils.ITEMS_KEY, "description"], translateString(utils.TranslatableString.ArrayItemTitle))
+        get2(schema, [utils.ITEMS_KEY, "description"], translateString(utils.TranslatableString.ArrayItemTitle))
       );
     }
     /** Determines whether the item described in the schema is always required, which is determined by whether any item
@@ -205,7 +205,7 @@
         }
         const newKeyedFormDataRow = {
           key: generateRowId(),
-          item: cloneDeep(keyedFormData[index].item)
+          item: cloneDeep2(keyedFormData[index].item)
         };
         const newKeyedFormData = [...keyedFormData];
         if (index !== void 0) {
@@ -423,7 +423,7 @@
             totalItems: keyedFormData.length
           });
         }),
-        className: `field field-array field-array-of-${itemsSchema.type}`,
+        className: `rjsf-field rjsf-field-array rjsf-field-array-of-${itemsSchema.type}`,
         disabled,
         idSchema,
         uiSchema,
@@ -631,7 +631,7 @@
       const canAdd = this.canAddItem(items) && !!additionalSchema;
       const arrayProps = {
         canAdd,
-        className: "field field-array field-array-fixed-items",
+        className: "rjsf-field rjsf-field-array rjsf-field-array-fixed-items",
         disabled,
         idSchema,
         formData,
@@ -712,14 +712,14 @@
       } = registry;
       const ItemSchemaField = ArraySchemaField || SchemaField2;
       const { orderable = true, removable = true, copyable = false } = utils.getUiOptions(uiSchema, globalUiOptions);
-      const has2 = {
+      const has4 = {
         moveUp: orderable && canMoveUp,
         moveDown: orderable && canMoveDown,
         copy: copyable && canAdd,
         remove: removable && canRemove,
         toolbar: false
       };
-      has2.toolbar = Object.keys(has2).some((key2) => has2[key2]);
+      has4.toolbar = Object.keys(has4).some((key2) => has4[key2]);
       return {
         children: /* @__PURE__ */ jsxRuntime.jsx(
           ItemSchemaField,
@@ -747,21 +747,31 @@
             rawErrors
           }
         ),
-        className: "array-item",
+        buttonsProps: {
+          idSchema: itemIdSchema,
+          disabled,
+          readonly,
+          canAdd,
+          hasCopy: has4.copy,
+          hasMoveUp: has4.moveUp,
+          hasMoveDown: has4.moveDown,
+          hasRemove: has4.remove,
+          index,
+          totalItems,
+          onAddIndexClick: this.onAddIndexClick,
+          onCopyIndexClick: this.onCopyIndexClick,
+          onDropIndexClick: this.onDropIndexClick,
+          onReorderClick: this.onReorderClick,
+          registry,
+          schema: itemSchema,
+          uiSchema: itemUiSchema
+        },
+        className: "rjsf-array-item",
         disabled,
-        canAdd,
-        hasCopy: has2.copy,
-        hasToolbar: has2.toolbar,
-        hasMoveUp: has2.moveUp,
-        hasMoveDown: has2.moveDown,
-        hasRemove: has2.remove,
+        hasToolbar: has4.toolbar,
         index,
         totalItems,
         key,
-        onAddIndexClick: this.onAddIndexClick,
-        onCopyIndexClick: this.onCopyIndexClick,
-        onDropIndexClick: this.onDropIndexClick,
-        onReorderClick: this.onReorderClick,
         readonly,
         registry,
         schema: itemSchema,
@@ -796,6 +806,7 @@
       title: uiTitle,
       // Unlike the other fields, don't use `getDisplayLabel()` since it always returns false for the boolean type
       label: displayLabel = true,
+      enumNames,
       ...options
     } = utils.getUiOptions(uiSchema, globalUiOptions);
     const Widget = utils.getWidget(schema, widget, widgets2);
@@ -820,9 +831,8 @@
         uiSchema
       );
     } else {
-      const schemaWithEnumNames = schema;
       const enums = schema.enum ?? [true, false];
-      if (!schemaWithEnumNames.enumNames && enums.length === 2 && enums.every((v) => typeof v === "boolean")) {
+      if (!enumNames && enums.length === 2 && enums.every((v) => typeof v === "boolean")) {
         enumOptions = [
           {
             value: enums[0],
@@ -834,14 +844,7 @@
           }
         ];
       } else {
-        enumOptions = utils.optionsList(
-          {
-            enum: enums,
-            // NOTE: enumNames is deprecated, but still supported for now.
-            enumNames: schemaWithEnumNames.enumNames
-          },
-          uiSchema
-        );
+        enumOptions = utils.optionsList({ enum: enums }, uiSchema);
       }
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -870,6 +873,688 @@
     );
   }
   var BooleanField_default = BooleanField;
+  var LOOKUP_REGEX = /^\$lookup=(.+)/;
+  var LAYOUT_GRID_UI_OPTION = "layoutGrid";
+  var UI_GLOBAL_OPTIONS = "ui:global_options";
+  function getNonNullishValue(value, fallback) {
+    return value ?? fallback;
+  }
+  var LayoutGridField = class _LayoutGridField extends react.PureComponent {
+    static defaultProps = {
+      layoutGridSchema: void 0
+    };
+    static TEST_IDS = utils.getTestIds();
+    /** Computes the uiSchema for the field with `name` from the `uiProps` and `uiSchema` provided. The field UI Schema
+     * will always contain a copy of the global options from the `uiSchema` (so they can be passed down) as well as
+     * copying them into the local ui options. When the `forceReadonly` flag is true, then the field UI Schema is
+     * updated to make "readonly" be true. When the `schemaReadonly` flag is true AND the field UI Schema does NOT have
+     * the flag already provided, then we also make "readonly" true. We always make sure to return the final value of the
+     * field UI Schema's "readonly" flag as `uiReadonly` along with the `fieldUiSchema` in the return value.
+     *
+     * @param field - The name of the field to pull the existing UI Schema for
+     * @param uiProps - Any props that should be put into the field's uiSchema
+     * @param [uiSchema] - The optional UI Schema from which to get the UI schema for the field
+     * @param [schemaReadonly] - Optional flag indicating whether the schema indicates the field is readonly
+     * @param [forceReadonly] - Optional flag indicating whether the Form itself is in readonly mode
+     */
+    static computeFieldUiSchema(field, uiProps, uiSchema, schemaReadonly, forceReadonly) {
+      const globalUiOptions = get2(uiSchema, [UI_GLOBAL_OPTIONS], {});
+      const localUiSchema = get2(uiSchema, field);
+      const localUiOptions = { ...get2(localUiSchema, [utils.UI_OPTIONS_KEY], {}), ...uiProps, ...globalUiOptions };
+      const fieldUiSchema = { ...localUiSchema };
+      if (!isEmpty(localUiOptions)) {
+        set(fieldUiSchema, [utils.UI_OPTIONS_KEY], localUiOptions);
+      }
+      if (!isEmpty(globalUiOptions)) {
+        set(fieldUiSchema, [UI_GLOBAL_OPTIONS], globalUiOptions);
+      }
+      let { readonly: uiReadonly } = utils.getUiOptions(fieldUiSchema);
+      if (forceReadonly === true || isUndefined(uiReadonly) && schemaReadonly === true) {
+        uiReadonly = true;
+        if (has(localUiOptions, utils.READONLY_KEY)) {
+          set(fieldUiSchema, [utils.UI_OPTIONS_KEY, utils.READONLY_KEY], true);
+        } else {
+          set(fieldUiSchema, `ui:${utils.READONLY_KEY}`, true);
+        }
+      }
+      return { fieldUiSchema, uiReadonly };
+    }
+    /** Given an `operator`, `datum` and `value` determines whether this condition is considered matching. Matching
+     * depends on the `operator`. The `datum` and `value` are converted into arrays if they aren't already and then the
+     * contents of the two arrays are compared using the `operator`. When `operator` is All, then the two arrays must be
+     * equal to match. When `operator` is SOME then the intersection of the two arrays must have at least one value in
+     * common to match. When `operator` is NONE then the intersection of the two arrays must not have any values in common
+     * to match.
+     *
+     * @param [operator] - The optional operator for the condition
+     * @param [datum] - The optional datum for the condition, this can be an item or a list of items of type unknown
+     * @param [value='$0m3tH1nG Un3xP3cT3d'] The optional value for the condition, defaulting to a highly unlikely value
+     *        to avoid comparing two undefined elements when `value` was forgotten in the condition definition.
+     *        This can be an item or a list of items of type unknown
+     * @returns - True if the condition matches, false otherwise
+     */
+    static conditionMatches(operator, datum, value = "$0m3tH1nG Un3xP3cT3d") {
+      const data = flatten([datum]).sort();
+      const values = flatten([value]).sort();
+      switch (operator) {
+        case "all" /* ALL */:
+          return isEqual(data, values);
+        case "some" /* SOME */:
+          return intersection(data, values).length > 0;
+        case "none" /* NONE */:
+          return intersection(data, values).length === 0;
+        default:
+          return false;
+      }
+    }
+    /** From within the `layoutGridSchema` finds the `children` and any extra `gridProps` from the object keyed by
+     * `schemaKey`. If the `children` contains extra `gridProps` and those props contain a `className` string, try to
+     * lookup whether that `className` has a replacement value in the `registry` using the `FORM_CONTEXT_LOOKUP_BASE`.
+     * When the `className` value contains multiple classNames separated by a space, the lookup will look for a
+     * replacement value for each `className` and combine them into one.
+     *
+     * @param layoutGridSchema - The GridSchemaType instance from which to obtain the `schemaKey` children and extra props
+     * @param schemaKey - A `GridType` value, used to get the children and extra props from within the `layoutGridSchema`
+     * @param registry - The `@rjsf` Registry from which to look up `classNames` if they are present in the extra props
+     * @returns - An object containing the list of `LayoutGridSchemaType` `children` and any extra `gridProps`
+     * @throws - A `TypeError` when the `children` is not an array
+     */
+    static findChildrenAndProps(layoutGridSchema, schemaKey, registry) {
+      let gridProps = {};
+      let children = layoutGridSchema[schemaKey];
+      if (isPlainObject(children)) {
+        const { children: elements, className: toMapClassNames, ...otherProps } = children;
+        children = elements;
+        if (toMapClassNames) {
+          const classes = toMapClassNames.split(" ");
+          const className = classes.map((ele) => utils.lookupFromFormContext(registry, ele, ele)).join(" ");
+          gridProps = { ...otherProps, className };
+        } else {
+          gridProps = otherProps;
+        }
+      }
+      if (!Array.isArray(children)) {
+        throw new TypeError(`Expected array for "${schemaKey}" in ${JSON.stringify(layoutGridSchema)}`);
+      }
+      return { children, gridProps };
+    }
+    /** Generates an idSchema for the `schema` using `@rjsf`'s `toIdSchema` util, passing the `baseIdSchema`'s `$id` value
+     * as the id prefix.
+     *
+     * @param schemaUtils - The `SchemaUtilsType` used to call `toIdSchema`
+     * @param schema - The schema to generate the idSchema for
+     * @param baseIdSchema - The IdSchema for the base
+     * @param formData - The formData to pass the `toIdSchema`
+     * @param [idSeparator] - The param to pass into the `toIdSchema` util which will use it to join the `idSchema` paths
+     * @returns - The generated `idSchema` for the `schema`
+     */
+    static getIdSchema(schemaUtils, baseIdSchema, formData, schema = {}, idSeparator) {
+      const baseId = get2(baseIdSchema, utils.ID_KEY);
+      return schemaUtils.toIdSchema(schema, baseId, formData, baseId, idSeparator);
+    }
+    /** Given a `dottedPath` to a field in the `initialSchema`, iterate through each individual path in the schema until
+     * the leaf path is found and returned (along with whether that leaf path `isRequired`) OR no schema exists for an
+     * element in the path. If the leaf schema element happens to be a oneOf/anyOf then also return the oneOf/anyOf as
+     * `options`.
+     *
+     * @param schemaUtils - The `SchemaUtilsType` used to call `retrieveSchema`
+     * @param dottedPath - The dotted-path to the field for which to get the schema
+     * @param initialSchema - The initial schema to start the search from
+     * @param formData - The formData, useful for resolving a oneOf/anyOf selection in the path hierarchy
+     * @param initialIdSchema - The initial idSchema to start the search from
+     * @param [idSeparator] - The param to pass into the `toIdSchema` util which will use it to join the `idSchema` paths
+     * @returns - An object containing the destination schema, isRequired and isReadonly flags for the field and options
+     *            info if a oneOf/anyOf
+     */
+    static getSchemaDetailsForField(schemaUtils, dottedPath, initialSchema, formData, initialIdSchema, idSeparator) {
+      let rawSchema = initialSchema;
+      let idSchema = initialIdSchema;
+      const parts = dottedPath.split(".");
+      const leafPath = parts.pop();
+      let schema = schemaUtils.retrieveSchema(rawSchema, formData);
+      let innerData = formData;
+      let isReadonly = schema.readOnly;
+      parts.forEach((part) => {
+        if (has(schema, utils.PROPERTIES_KEY)) {
+          rawSchema = get2(schema, [utils.PROPERTIES_KEY, part], {});
+          idSchema = get2(idSchema, part, {});
+        } else if (schema && (has(schema, utils.ONE_OF_KEY) || has(schema, utils.ANY_OF_KEY))) {
+          const xxx = has(schema, utils.ONE_OF_KEY) ? utils.ONE_OF_KEY : utils.ANY_OF_KEY;
+          const selectedSchema = schemaUtils.findSelectedOptionInXxxOf(schema, part, xxx, innerData);
+          const selectedIdSchema = _LayoutGridField.getIdSchema(
+            schemaUtils,
+            idSchema,
+            formData,
+            selectedSchema,
+            idSeparator
+          );
+          rawSchema = get2(selectedSchema, [utils.PROPERTIES_KEY, part], {});
+          idSchema = get2(selectedIdSchema, part, {});
+        } else {
+          rawSchema = {};
+        }
+        innerData = get2(innerData, part, {});
+        schema = schemaUtils.retrieveSchema(rawSchema, innerData);
+        isReadonly = getNonNullishValue(schema.readOnly, isReadonly);
+      });
+      let optionsInfo;
+      let isRequired = false;
+      if (isEmpty(schema)) {
+        schema = void 0;
+      }
+      if (schema && leafPath) {
+        if (schema && (has(schema, utils.ONE_OF_KEY) || has(schema, utils.ANY_OF_KEY))) {
+          const xxx = has(schema, utils.ONE_OF_KEY) ? utils.ONE_OF_KEY : utils.ANY_OF_KEY;
+          schema = schemaUtils.findSelectedOptionInXxxOf(schema, leafPath, xxx, innerData);
+          const rawIdSchema = _LayoutGridField.getIdSchema(schemaUtils, idSchema, formData, schema, idSeparator);
+          idSchema = utils.mergeObjects(rawIdSchema, idSchema);
+        }
+        isRequired = schema !== void 0 && Array.isArray(schema.required) && includes(schema.required, leafPath);
+        schema = get2(schema, [utils.PROPERTIES_KEY, leafPath]);
+        schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
+        idSchema = get2(idSchema, leafPath, {});
+        isReadonly = getNonNullishValue(schema?.readOnly, isReadonly);
+        if (schema && (has(schema, utils.ONE_OF_KEY) || has(schema, utils.ANY_OF_KEY))) {
+          const xxx = has(schema, utils.ONE_OF_KEY) ? utils.ONE_OF_KEY : utils.ANY_OF_KEY;
+          const discriminator = utils.getDiscriminatorFieldFromSchema(schema);
+          optionsInfo = { options: schema[xxx], hasDiscriminator: !!discriminator };
+        }
+      }
+      return { schema, isRequired, isReadonly, optionsInfo, idSchema };
+    }
+    /** Gets the custom render component from the `render`, by either determining that it is either already a function or
+     * it is a non-function value that can be used to look up the function in the registry. If no function can be found,
+     * null is returned.
+     *
+     * @param render - The potential render function or lookup name to one
+     * @param registry - The `@rjsf` Registry from which to look up `classNames` if they are present in the extra props
+     * @returns - Either a render function if available, or null if not
+     */
+    static getCustomRenderComponent(render, registry) {
+      let customRenderer = render;
+      if (isString(customRenderer)) {
+        customRenderer = utils.lookupFromFormContext(registry, customRenderer);
+      }
+      if (isFunction(customRenderer)) {
+        return customRenderer;
+      }
+      return null;
+    }
+    /** Extract the `name`, and optional `render` and all other props from the `gridSchema`. We look up the `render` to
+     * see if can be resolved to a UIComponent. If `name` does not exist and there is an optional `render` UIComponent, we
+     * set the `rendered` component with only specified props for that component in the object.
+     *
+     * @param registry - The `@rjsf` Registry from which to look up `classNames` if they are present in the extra props
+     * @param gridSchema - The string or object that represents the configuration for the grid field
+     * @returns - The UIComponentPropsType computed from the gridSchema
+     */
+    static computeUIComponentPropsFromGridSchema(registry, gridSchema) {
+      let name;
+      let UIComponent = null;
+      let uiProps = {};
+      let rendered;
+      if (isString(gridSchema) || isUndefined(gridSchema)) {
+        name = gridSchema ?? "";
+      } else {
+        const { name: innerName, render, ...innerProps } = gridSchema;
+        name = innerName;
+        uiProps = innerProps;
+        if (!isEmpty(uiProps)) {
+          each(uiProps, (prop, key) => {
+            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);
+              }
+            }
+          });
+        }
+        UIComponent = _LayoutGridField.getCustomRenderComponent(render, registry);
+        if (!innerName && UIComponent) {
+          rendered = /* @__PURE__ */ jsxRuntime.jsx(UIComponent, { ...innerProps, "data-testid": _LayoutGridField.TEST_IDS.uiComponent });
+        }
+      }
+      return { name, UIComponent, uiProps, rendered };
+    }
+    /** Constructs an `LayoutGridField` with the given `props`
+     *
+     * @param props - The `LayoutGridField` for this template
+     */
+    constructor(props) {
+      super(props);
+    }
+    /** Generates an `onChange` handler for the field associated with the `dottedPath`. This handler will clone and update
+     * the `formData` with the new `value` and the `errorSchema` if an `errSchema` is provided. After updating those two
+     * elements, they will then be passed on to the `onChange` handler of the `LayoutFieldGrid`.
+     *
+     * @param dottedPath - The dotted-path to the field for which to generate the onChange handler
+     * @returns - The `onChange` handling function for the `dottedPath` field
+     */
+    onFieldChange = (dottedPath) => {
+      return (value, errSchema, id) => {
+        const { onChange, errorSchema, formData } = this.props;
+        const newFormData = cloneDeep2(formData || {});
+        let newErrorSchema = errorSchema;
+        if (errSchema && errorSchema) {
+          newErrorSchema = cloneDeep2(errorSchema);
+          set(newErrorSchema, dottedPath, errSchema);
+        }
+        set(newFormData, dottedPath, value);
+        onChange(newFormData, newErrorSchema, id);
+      };
+    };
+    /** Renders the `children` of the `GridType.CONDITION` if it passes. The `layoutGridSchema` for the
+     * `GridType.CONDITION` is separated into the `children` and other `gridProps`. The `gridProps` are used to extract
+     * the `operator`, `field` and `value` of the condition. If the condition matches, then all of the `children` are
+     * rendered, otherwise null is returned.
+     *
+     * @param layoutGridSchema - The string or object that represents the configuration for the grid field
+     * @returns - The rendered the children for the `GridType.CONDITION` or null
+     */
+    renderCondition(layoutGridSchema) {
+      const { formData, registry } = this.props;
+      const { children, gridProps } = _LayoutGridField.findChildrenAndProps(
+        layoutGridSchema,
+        "ui:condition" /* CONDITION */,
+        registry
+      );
+      const { operator, field = "", value } = gridProps;
+      const fieldData = get2(formData, field, null);
+      if (_LayoutGridField.conditionMatches(operator, fieldData, value)) {
+        return this.renderChildren(children);
+      }
+      return null;
+    }
+    /** Renders a material-ui `GridTemplate` as an item. The `layoutGridSchema` for the `GridType.COLUMN` is separated
+     * into the `children` and other `gridProps`. The `gridProps` will be spread onto the outer `GridTemplate`. Inside
+     * the `GridTemplate` all the `children` are rendered.
+     *
+     * @param layoutGridSchema - The string or object that represents the configuration for the grid field
+     * @returns - The rendered `GridTemplate` containing the children for the `GridType.COLUMN`
+     */
+    renderCol(layoutGridSchema) {
+      const { registry, uiSchema } = this.props;
+      const { children, gridProps } = _LayoutGridField.findChildrenAndProps(
+        layoutGridSchema,
+        "ui:col" /* COLUMN */,
+        registry
+      );
+      const uiOptions = utils.getUiOptions(uiSchema);
+      const GridTemplate2 = utils.getTemplate("GridTemplate", registry, uiOptions);
+      return /* @__PURE__ */ jsxRuntime.jsx(GridTemplate2, { column: true, "data-testid": _LayoutGridField.TEST_IDS.col, ...gridProps, children: this.renderChildren(children) });
+    }
+    /** Renders a material-ui `GridTemplate` as an item. The `layoutGridSchema` for the `GridType.COLUMNS` is separated
+     * into the `children` and other `gridProps`. The `children` is iterated on and `gridProps` will be spread onto the
+     * outer `GridTemplate`. Each child will have their own rendered `GridTemplate`.
+     *
+     * @param layoutGridSchema - The string or object that represents the configuration for the grid field
+     * @returns - The rendered `GridTemplate` containing the children for the `GridType.COLUMNS`
+     */
+    renderColumns(layoutGridSchema) {
+      const { registry, uiSchema } = this.props;
+      const { children, gridProps } = _LayoutGridField.findChildrenAndProps(
+        layoutGridSchema,
+        "ui:columns" /* COLUMNS */,
+        registry
+      );
+      const uiOptions = utils.getUiOptions(uiSchema);
+      const GridTemplate2 = utils.getTemplate("GridTemplate", registry, uiOptions);
+      return children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+        GridTemplate2,
+        {
+          column: true,
+          "data-testid": _LayoutGridField.TEST_IDS.col,
+          ...gridProps,
+          children: this.renderChildren([child])
+        },
+        `column-${utils.hashObject(child)}`
+      ));
+    }
+    /** Renders a material-ui `GridTemplate` as a container. The
+     * `layoutGridSchema` for the `GridType.ROW` is separated into the `children` and other `gridProps`. The `gridProps`
+     * will be spread onto the outer `GridTemplate`. Inside of the `GridTemplate` all of the `children` are rendered.
+     *
+     * @param layoutGridSchema - The string or object that represents the configuration for the grid field
+     * @returns - The rendered `GridTemplate` containing the children for the `GridType.ROW`
+     */
+    renderRow(layoutGridSchema) {
+      const { registry, uiSchema } = this.props;
+      const { children, gridProps } = _LayoutGridField.findChildrenAndProps(
+        layoutGridSchema,
+        "ui:row" /* ROW */,
+        registry
+      );
+      const uiOptions = utils.getUiOptions(uiSchema);
+      const GridTemplate2 = utils.getTemplate("GridTemplate", registry, uiOptions);
+      return /* @__PURE__ */ jsxRuntime.jsx(GridTemplate2, { ...gridProps, "data-testid": _LayoutGridField.TEST_IDS.row, children: this.renderChildren(children) });
+    }
+    /** Iterates through all the `childrenLayoutGridSchema`, rendering a nested `LayoutGridField` for each item in the
+     * list, passing all the props for the current `LayoutGridField` along, updating the `schema` by calling
+     * `retrieveSchema()` on it to resolve any `$ref`s. In addition to the updated `schema`, each item in
+     * `childrenLayoutGridSchema` is passed as `layoutGridSchema`.
+     *
+     * @param childrenLayoutGridSchema - The list of strings or objects that represents the configurations for the
+     *          children fields
+     * @returns - The nested `LayoutGridField`s
+     */
+    renderChildren(childrenLayoutGridSchema) {
+      const { registry, schema: rawSchema, formData } = this.props;
+      const { schemaUtils } = registry;
+      const schema = schemaUtils.retrieveSchema(rawSchema, formData);
+      return childrenLayoutGridSchema.map((layoutGridSchema) => /* @__PURE__ */ react.createElement(
+        _LayoutGridField,
+        {
+          ...this.props,
+          key: `layoutGrid-${utils.hashObject(layoutGridSchema)}`,
+          schema,
+          layoutGridSchema
+        }
+      ));
+    }
+    /** Renders the field described by `gridSchema`. If `gridSchema` is not an object, then is will be assumed
+     * to be the dotted-path to the field in the schema. Otherwise, we extract the `name`, and optional `render` and all
+     * other props. If `name` does not exist and there is an optional `render`, we return the `render` component with only
+     * specified props for that component. If `name` exists, we take the name, the initial & root schemas and the formData
+     * and get the destination schema, is required state and optional oneOf/anyOf options for it. If the destination
+     * schema was located along with oneOf/anyOf options then a `LayoutMultiSchemaField` will be rendered with the
+     * `uiSchema`, `errorSchema`, `idSchema` and `formData` drilled down to the dotted-path field, spreading any other
+     * props from `gridSchema` into the `ui:options`. If the destination schema located without any oneOf/anyOf options,
+     * then a `SchemaField` will be rendered with the same props as mentioned in the previous sentence. If no destination
+     * schema was located, but a custom render component was found, then it will be rendered with many of the non-event
+     * handling props. If none of the previous render paths are valid, then a null is returned.
+     *
+     * @param gridSchema - The string or object that represents the configuration for the grid field
+     * @returns - One of `LayoutMultiSchemaField`, `SchemaField`, a custom render component or null, depending
+     */
+    renderField(gridSchema) {
+      const {
+        schema: initialSchema,
+        uiSchema,
+        errorSchema,
+        idSchema,
+        onBlur,
+        onFocus,
+        formData,
+        readonly,
+        registry,
+        idSeparator,
+        layoutGridSchema,
+        // Used to pull this out of otherProps since we don't want to pass it through
+        ...otherProps
+      } = this.props;
+      const { fields: fields2, schemaUtils } = registry;
+      const { SchemaField: SchemaField2, LayoutMultiSchemaField: LayoutMultiSchemaField2 } = fields2;
+      const uiComponentProps = _LayoutGridField.computeUIComponentPropsFromGridSchema(registry, gridSchema);
+      if (uiComponentProps.rendered) {
+        return uiComponentProps.rendered;
+      }
+      const { name, UIComponent, uiProps } = uiComponentProps;
+      const {
+        schema,
+        isRequired,
+        isReadonly,
+        optionsInfo,
+        idSchema: fieldIdSchema
+      } = _LayoutGridField.getSchemaDetailsForField(
+        schemaUtils,
+        name,
+        initialSchema,
+        formData,
+        idSchema,
+        idSeparator
+      );
+      if (schema) {
+        const Field = optionsInfo?.hasDiscriminator ? LayoutMultiSchemaField2 : SchemaField2;
+        const { fieldUiSchema, uiReadonly } = _LayoutGridField.computeFieldUiSchema(
+          name,
+          uiProps,
+          uiSchema,
+          isReadonly,
+          readonly
+        );
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Field,
+          {
+            "data-testid": optionsInfo?.hasDiscriminator ? _LayoutGridField.TEST_IDS.layoutMultiSchemaField : _LayoutGridField.TEST_IDS.field,
+            ...otherProps,
+            name,
+            required: isRequired,
+            readonly: uiReadonly,
+            schema,
+            uiSchema: fieldUiSchema,
+            errorSchema: get2(errorSchema, name),
+            idSchema: fieldIdSchema,
+            idSeparator,
+            formData: get2(formData, name),
+            onChange: this.onFieldChange(name),
+            onBlur,
+            onFocus,
+            options: optionsInfo?.options,
+            registry
+          }
+        );
+      }
+      if (UIComponent) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          UIComponent,
+          {
+            "data-testid": _LayoutGridField.TEST_IDS.uiComponent,
+            ...otherProps,
+            name,
+            required: isRequired,
+            formData,
+            readOnly: !!isReadonly || readonly,
+            errorSchema,
+            uiSchema,
+            schema: initialSchema,
+            idSchema,
+            idSeparator,
+            onBlur,
+            onFocus,
+            registry,
+            ...uiProps
+          }
+        );
+      }
+      return null;
+    }
+    /** Renders the `LayoutGridField`. If there isn't a `layoutGridSchema` prop defined, then try pulling it out of the
+     * `uiSchema` via `ui:LayoutGridField`. If `layoutGridSchema` is an object, then check to see if any of the properties
+     * match one of the `GridType`s. If so, call the appropriate render function for the type. Otherwise, just call the
+     * generic `renderField()` function with the `layoutGridSchema`.
+     *
+     * @returns - the rendered `LayoutGridField`
+     */
+    render() {
+      const { uiSchema } = this.props;
+      let { layoutGridSchema } = this.props;
+      const uiOptions = utils.getUiOptions(uiSchema);
+      if (!layoutGridSchema && LAYOUT_GRID_UI_OPTION in uiOptions && isObject(uiOptions[LAYOUT_GRID_UI_OPTION])) {
+        layoutGridSchema = uiOptions[LAYOUT_GRID_UI_OPTION];
+      }
+      if (isObject(layoutGridSchema)) {
+        if ("ui:row" /* ROW */ in layoutGridSchema) {
+          return this.renderRow(layoutGridSchema);
+        }
+        if ("ui:col" /* COLUMN */ in layoutGridSchema) {
+          return this.renderCol(layoutGridSchema);
+        }
+        if ("ui:columns" /* COLUMNS */ in layoutGridSchema) {
+          return this.renderColumns(layoutGridSchema);
+        }
+        if ("ui:condition" /* CONDITION */ in layoutGridSchema) {
+          return this.renderCondition(layoutGridSchema);
+        }
+      }
+      return this.renderField(layoutGridSchema);
+    }
+  };
+  function LayoutHeaderField(props) {
+    const { idSchema, title, schema, uiSchema, required, registry, name } = props;
+    const options = utils.getUiOptions(uiSchema, registry.globalUiOptions);
+    const { title: uiTitle } = options;
+    const { title: schemaTitle } = schema;
+    const fieldTitle = uiTitle || title || schemaTitle || name;
+    if (!fieldTitle) {
+      return null;
+    }
+    const TitleFieldTemplate = utils.getTemplate(
+      "TitleFieldTemplate",
+      registry,
+      options
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TitleFieldTemplate,
+      {
+        id: utils.titleId(idSchema),
+        title: fieldTitle,
+        required,
+        schema,
+        uiSchema,
+        registry
+      }
+    );
+  }
+  function getSelectedOption(options, selectorField, value) {
+    const defaultValue = "!@#!@$@#$!@$#";
+    const schemaOptions = options.map(({ schema }) => schema);
+    return schemaOptions.find((option) => {
+      const selector = get2(option, [utils.PROPERTIES_KEY, selectorField]);
+      const result = get2(selector, utils.DEFAULT_KEY, get2(selector, utils.CONST_KEY, defaultValue));
+      return result === value;
+    });
+  }
+  function computeEnumOptions(schema, options, schemaUtils, uiSchema, formData) {
+    const realOptions = options.map((opt) => schemaUtils.retrieveSchema(opt, formData));
+    let tempSchema = schema;
+    if (has(schema, utils.ONE_OF_KEY)) {
+      tempSchema = { ...schema, [utils.ONE_OF_KEY]: realOptions };
+    } else if (has(schema, utils.ANY_OF_KEY)) {
+      tempSchema = { ...schema, [utils.ANY_OF_KEY]: realOptions };
+    }
+    const enumOptions = utils.optionsList(tempSchema, uiSchema);
+    if (!enumOptions) {
+      throw new Error(`No enumOptions were computed from the schema ${JSON.stringify(tempSchema)}`);
+    }
+    return enumOptions;
+  }
+  function LayoutMultiSchemaField(props) {
+    const {
+      name,
+      baseType,
+      disabled = false,
+      formData,
+      idSchema,
+      onBlur,
+      onChange,
+      options,
+      onFocus,
+      registry,
+      uiSchema,
+      schema,
+      formContext,
+      autofocus,
+      readonly,
+      required,
+      errorSchema,
+      hideError = false
+    } = props;
+    const { widgets: widgets2, schemaUtils, globalUiOptions } = registry;
+    const [enumOptions, setEnumOptions] = react.useState(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
+    const id = get2(idSchema, utils.ID_KEY);
+    const discriminator = utils.getDiscriminatorFieldFromSchema(schema);
+    const FieldErrorTemplate2 = utils.getTemplate("FieldErrorTemplate", registry, options);
+    const FieldTemplate2 = utils.getTemplate("FieldTemplate", registry, options);
+    const schemaHash = utils.hashObject(schema);
+    const optionsHash = utils.hashObject(options);
+    const uiSchemaHash = uiSchema ? utils.hashObject(uiSchema) : "";
+    const formDataHash = formData ? utils.hashObject(formData) : "";
+    react.useEffect(() => {
+      setEnumOptions(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
+    }, [schemaHash, optionsHash, schemaUtils, uiSchemaHash, formDataHash]);
+    const {
+      widget = discriminator ? "radio" : "select",
+      title = "",
+      placeholder = "",
+      optionsSchemaSelector: selectorField = discriminator,
+      hideError: uiSchemaHideError,
+      ...uiOptions
+    } = utils.getUiOptions(uiSchema);
+    if (!selectorField) {
+      throw new Error("No selector field provided for the LayoutMultiSchemaField");
+    }
+    const selectedOption = get2(formData, selectorField);
+    let optionSchema = get2(enumOptions[0]?.schema, [utils.PROPERTIES_KEY, selectorField], {});
+    const option = getSelectedOption(enumOptions, selectorField, selectedOption);
+    optionSchema = optionSchema?.type ? optionSchema : { ...optionSchema, type: option?.type || baseType };
+    const Widget = utils.getWidget(optionSchema, widget, widgets2);
+    const hideFieldError = uiSchemaHideError === void 0 ? hideError : Boolean(uiSchemaHideError);
+    const rawErrors = get2(errorSchema, [utils.ERRORS_KEY], []);
+    const fieldErrorSchema = omit3(errorSchema, [utils.ERRORS_KEY]);
+    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+    const onOptionChange = (opt) => {
+      const newOption = getSelectedOption(enumOptions, selectorField, opt);
+      const oldOption = getSelectedOption(enumOptions, selectorField, selectedOption);
+      let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
+      if (newFormData && newOption) {
+        newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, "excludeObjectChildren");
+      }
+      if (newFormData) {
+        set(newFormData, selectorField, opt);
+      }
+      onChange(newFormData, void 0, id);
+    };
+    const widgetOptions = { enumOptions, ...uiOptions };
+    const errors = !hideFieldError && rawErrors.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(FieldErrorTemplate2, { idSchema, schema, errors: rawErrors, registry }) : void 0;
+    const ignored = (value) => noop;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FieldTemplate2,
+      {
+        id,
+        schema,
+        label: (title || schema.title) ?? "",
+        disabled: disabled || Array.isArray(enumOptions) && isEmpty(enumOptions),
+        uiSchema,
+        formContext,
+        required,
+        readonly: !!readonly,
+        registry,
+        displayLabel,
+        errors,
+        onChange,
+        onDropPropertyClick: ignored,
+        onKeyChange: ignored,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Widget,
+          {
+            id,
+            name,
+            schema,
+            label: (title || schema.title) ?? "",
+            disabled: disabled || Array.isArray(enumOptions) && isEmpty(enumOptions),
+            uiSchema,
+            formContext,
+            autofocus,
+            readonly,
+            required,
+            registry,
+            multiple: false,
+            rawErrors,
+            hideError: hideFieldError,
+            hideLabel: !displayLabel,
+            errorSchema: fieldErrorSchema,
+            placeholder,
+            onChange: onOptionChange,
+            onBlur,
+            onFocus,
+            value: selectedOption,
+            options: widgetOptions
+          }
+        )
+      }
+    );
+  }
   var AnyOfField = class extends react.Component {
     /** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state
      *
@@ -986,8 +1671,8 @@
         ...uiOptions
       } = utils.getUiOptions(uiSchema, globalUiOptions);
       const Widget = utils.getWidget({ type: "number" }, widget, widgets2);
-      const rawErrors = get3(errorSchema, utils.ERRORS_KEY, []);
-      const fieldErrorSchema = omit2(errorSchema, [utils.ERRORS_KEY]);
+      const rawErrors = get2(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;
@@ -1214,33 +1899,37 @@
      * @param schema - The schema element to which the new property is being added
      */
     handleAddClick = (schema) => () => {
-      if (!schema.additionalProperties) {
+      if (!(schema.additionalProperties || schema.patternProperties)) {
         return;
       }
       const { formData, onChange, registry } = this.props;
       const newFormData = { ...formData };
-      let type = void 0;
-      let constValue = void 0;
-      let defaultValue = void 0;
-      if (isObject(schema.additionalProperties)) {
-        type = schema.additionalProperties.type;
-        constValue = schema.additionalProperties.const;
-        defaultValue = schema.additionalProperties.default;
-        let apSchema = schema.additionalProperties;
-        if (utils.REF_KEY in apSchema) {
-          const { schemaUtils } = registry;
-          apSchema = schemaUtils.retrieveSchema({ $ref: apSchema[utils.REF_KEY] }, formData);
-          type = apSchema.type;
-          constValue = apSchema.const;
-          defaultValue = apSchema.default;
-        }
-        if (!type && (utils.ANY_OF_KEY in apSchema || utils.ONE_OF_KEY in apSchema)) {
-          type = "object";
+      const newKey = this.getAvailableKey("newKey", newFormData);
+      if (schema.patternProperties) {
+        set(newFormData, newKey, null);
+      } else {
+        let type = void 0;
+        let constValue = void 0;
+        let defaultValue = void 0;
+        if (isObject(schema.additionalProperties)) {
+          type = schema.additionalProperties.type;
+          constValue = schema.additionalProperties.const;
+          defaultValue = schema.additionalProperties.default;
+          let apSchema = schema.additionalProperties;
+          if (utils.REF_KEY in apSchema) {
+            const { schemaUtils } = registry;
+            apSchema = schemaUtils.retrieveSchema({ $ref: apSchema[utils.REF_KEY] }, formData);
+            type = apSchema.type;
+            constValue = apSchema.const;
+            defaultValue = apSchema.default;
+          }
+          if (!type && (utils.ANY_OF_KEY in apSchema || utils.ONE_OF_KEY in apSchema)) {
+            type = "object";
+          }
         }
+        const newValue = constValue ?? defaultValue ?? this.getDefaultValue(type);
+        set(newFormData, newKey, newValue);
       }
-      const newKey = this.getAvailableKey("newKey", newFormData);
-      const newValue = constValue ?? defaultValue ?? this.getDefaultValue(type);
-      set(newFormData, newKey, newValue);
       onChange(newFormData);
     };
     /** Renders the `ObjectField` from the given props
@@ -1277,7 +1966,7 @@
         orderedProperties = utils.orderProperties(properties, uiOptions.order);
       } catch (err) {
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "config-error", style: { color: "red" }, children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { options: { disableParsingRawHTML: true }, children: translateString(utils.TranslatableString.InvalidObjectField, [name || "root", err.message]) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rjsf-config-error", style: { color: "red" }, children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { options: { disableParsingRawHTML: true }, children: translateString(utils.TranslatableString.InvalidObjectField, [name || "root", err.message]) }) }),
           /* @__PURE__ */ jsxRuntime.jsx("pre", { children: JSON.stringify(schema) })
         ] });
       }
@@ -1290,20 +1979,20 @@
           const addedByAdditionalProperties = has(schema, [utils.PROPERTIES_KEY, name2, utils.ADDITIONAL_PROPERTY_FLAG]);
           const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name2];
           const hidden = utils.getUiOptions(fieldUiSchema).widget === "hidden";
-          const fieldIdSchema = get3(idSchema, [name2], {});
+          const fieldIdSchema = get2(idSchema, [name2], {});
           return {
             content: /* @__PURE__ */ jsxRuntime.jsx(
               SchemaField2,
               {
                 name: name2,
                 required: this.isRequired(name2),
-                schema: get3(schema, [utils.PROPERTIES_KEY, name2], {}),
+                schema: get2(schema, [utils.PROPERTIES_KEY, name2], {}),
                 uiSchema: fieldUiSchema,
-                errorSchema: get3(errorSchema, name2),
+                errorSchema: get2(errorSchema, name2),
                 idSchema: fieldIdSchema,
                 idPrefix,
                 idSeparator,
-                formData: get3(formData, name2),
+                formData: get2(formData, name2),
                 formContext,
                 wasPropertyKeyModified: this.state.wasPropertyKeyModified,
                 onKeyChange: this.onKeyChange(name2),
@@ -1436,9 +2125,9 @@
     }
     const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     const { __errors, ...fieldErrorSchema } = errorSchema || {};
-    const fieldUiSchema = omit2(uiSchema, ["ui:classNames", "classNames", "ui:style"]);
+    const fieldUiSchema = omit3(uiSchema, ["ui:classNames", "classNames", "ui:style"]);
     if (utils.UI_OPTIONS_KEY in fieldUiSchema) {
-      fieldUiSchema[utils.UI_OPTIONS_KEY] = omit2(fieldUiSchema[utils.UI_OPTIONS_KEY], ["classNames", "style"]);
+      fieldUiSchema[utils.UI_OPTIONS_KEY] = omit3(fieldUiSchema[utils.UI_OPTIONS_KEY], ["classNames", "style"]);
     }
     const field = /* @__PURE__ */ jsxRuntime.jsx(
       FieldComponent,
@@ -1468,17 +2157,9 @@
     const richDescription = uiOptions.enableMarkdownInDescription ? /* @__PURE__ */ jsxRuntime.jsx(Markdown, { options: { disableParsingRawHTML: true }, children: description }) : description;
     const help = uiOptions.help;
     const hidden = uiOptions.widget === "hidden";
-    const classNames = ["form-group", "field", `field-${utils.getSchemaType(schema)}`];
+    const classNames = ["rjsf-field", `rjsf-field-${utils.getSchemaType(schema)}`];
     if (!hideError && __errors && __errors.length > 0) {
-      classNames.push("field-error has-error has-danger");
-    }
-    if (uiSchema?.classNames) {
-      {
-        console.warn(
-          "'uiSchema.classNames' is deprecated and may be removed in a major release; Use 'ui:classNames' instead."
-        );
-      }
-      classNames.push(uiSchema.classNames);
+      classNames.push("rjsf-field-error");
     }
     if (uiOptions.classNames) {
       classNames.push(uiOptions.classNames);
@@ -1680,6 +2361,9 @@
       ArrayField: ArrayField_default,
       // ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
       BooleanField: BooleanField_default,
+      LayoutGridField,
+      LayoutHeaderField,
+      LayoutMultiSchemaField,
       NumberField: NumberField_default,
       ObjectField: ObjectField_default,
       OneOfField: MultiSchemaField_default,
@@ -1713,24 +2397,13 @@
     );
   }
   function ArrayFieldItemTemplate(props) {
-    const {
-      children,
-      className,
-      disabled,
-      hasToolbar,
-      hasMoveDown,
-      hasMoveUp,
-      hasRemove,
-      hasCopy,
-      index,
-      onCopyIndexClick,
-      onDropIndexClick,
-      onReorderClick,
-      readonly,
+    const { children, className, buttonsProps, hasToolbar, registry, uiSchema } = props;
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const ArrayFieldItemButtonsTemplate2 = utils.getTemplate(
+      "ArrayFieldItemButtonsTemplate",
       registry,
-      uiSchema
-    } = props;
-    const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
+      uiOptions
+    );
     const btnStyle = {
       flex: 1,
       paddingLeft: 6,
@@ -1739,7 +2412,7 @@
     };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: hasToolbar ? "col-xs-9" : "col-xs-12", children }),
-      hasToolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-xs-3 array-item-toolbox", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      hasToolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-xs-3 array-item-toolbox", children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: "btn-group",
@@ -1747,52 +2420,79 @@
             display: "flex",
             justifyContent: "space-around"
           },
-          children: [
-            (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
-              MoveUpButton2,
-              {
-                style: btnStyle,
-                disabled: disabled || readonly || !hasMoveUp,
-                onClick: onReorderClick(index, index - 1),
-                uiSchema,
-                registry
-              }
-            ),
-            (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
-              MoveDownButton2,
-              {
-                style: btnStyle,
-                disabled: disabled || readonly || !hasMoveDown,
-                onClick: onReorderClick(index, index + 1),
-                uiSchema,
-                registry
-              }
-            ),
-            hasCopy && /* @__PURE__ */ jsxRuntime.jsx(
-              CopyButton2,
-              {
-                style: btnStyle,
-                disabled: disabled || readonly,
-                onClick: onCopyIndexClick(index),
-                uiSchema,
-                registry
-              }
-            ),
-            hasRemove && /* @__PURE__ */ jsxRuntime.jsx(
-              RemoveButton2,
-              {
-                style: btnStyle,
-                disabled: disabled || readonly,
-                onClick: onDropIndexClick(index),
-                uiSchema,
-                registry
-              }
-            )
-          ]
+          children: /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemButtonsTemplate2, { ...buttonsProps, style: btnStyle })
         }
       ) })
     ] });
   }
+  function ArrayFieldItemButtonsTemplate(props) {
+    const {
+      disabled,
+      hasCopy,
+      hasMoveDown,
+      hasMoveUp,
+      hasRemove,
+      idSchema,
+      index,
+      onCopyIndexClick,
+      onDropIndexClick,
+      onReorderClick,
+      readonly,
+      registry,
+      uiSchema
+    } = props;
+    const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
+    const onCopyClick = react.useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
+    const onRemoveClick = react.useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
+    const onArrowUpClick = react.useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
+    const onArrowDownClick = react.useMemo(() => onReorderClick(index, index + 1), [index, onReorderClick]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
+        MoveUpButton2,
+        {
+          id: utils.buttonId(idSchema, "moveUp"),
+          className: "rjsf-array-item-move-up",
+          disabled: disabled || readonly || !hasMoveUp,
+          onClick: onArrowUpClick,
+          uiSchema,
+          registry
+        }
+      ),
+      (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
+        MoveDownButton2,
+        {
+          id: utils.buttonId(idSchema, "moveDown"),
+          className: "rjsf-array-item-move-down",
+          disabled: disabled || readonly || !hasMoveDown,
+          onClick: onArrowDownClick,
+          uiSchema,
+          registry
+        }
+      ),
+      hasCopy && /* @__PURE__ */ jsxRuntime.jsx(
+        CopyButton2,
+        {
+          id: utils.buttonId(idSchema, "copy"),
+          className: "rjsf-array-item-copy",
+          disabled: disabled || readonly,
+          onClick: onCopyClick,
+          uiSchema,
+          registry
+        }
+      ),
+      hasRemove && /* @__PURE__ */ jsxRuntime.jsx(
+        RemoveButton2,
+        {
+          id: utils.buttonId(idSchema, "remove"),
+          className: "rjsf-array-item-remove",
+          disabled: disabled || readonly,
+          onClick: onRemoveClick,
+          uiSchema,
+          registry
+        }
+      )
+    ] });
+  }
   function ArrayFieldTemplate(props) {
     const {
       canAdd,
@@ -1853,7 +2553,8 @@
       canAdd && /* @__PURE__ */ jsxRuntime.jsx(
         AddButton2,
         {
-          className: "array-item-add",
+          id: utils.buttonId(idSchema, "add"),
+          className: "rjsf-array-item-add",
           onClick: onAddClick,
           disabled: disabled || readonly,
           uiSchema,
@@ -1977,58 +2678,25 @@
     const {
       registry: { translateString }
     } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
-      {
-        title: translateString(utils.TranslatableString.CopyButton),
-        className: "array-item-copy",
-        ...props,
-        icon: "copy"
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.CopyButton), ...props, icon: "copy" });
   }
   function MoveDownButton(props) {
     const {
       registry: { translateString }
     } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
-      {
-        title: translateString(utils.TranslatableString.MoveDownButton),
-        className: "array-item-move-down",
-        ...props,
-        icon: "arrow-down"
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.MoveDownButton), ...props, icon: "arrow-down" });
   }
   function MoveUpButton(props) {
     const {
       registry: { translateString }
     } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
-      {
-        title: translateString(utils.TranslatableString.MoveUpButton),
-        className: "array-item-move-up",
-        ...props,
-        icon: "arrow-up"
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.MoveUpButton), ...props, icon: "arrow-up" });
   }
   function RemoveButton(props) {
     const {
       registry: { translateString }
     } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
-      {
-        title: translateString(utils.TranslatableString.RemoveButton),
-        className: "array-item-remove",
-        ...props,
-        iconType: "danger",
-        icon: "remove"
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.RemoveButton), ...props, iconType: "danger", icon: "remove" });
   }
   function AddButton({
     className,
@@ -2140,6 +2808,10 @@
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: "help-block", children: help });
   }
+  function GridTemplate(props) {
+    const { children, column, className, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, ...rest, children });
+  }
   function ObjectFieldTemplate(props) {
     const {
       description,
@@ -2191,7 +2863,8 @@
       utils.canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsxRuntime.jsx(
         AddButton2,
         {
-          className: "object-property-expand",
+          id: utils.buttonId(idSchema, "add"),
+          className: "rjsf-object-property-expand",
           onClick: onAddClick(schema),
           disabled: disabled || readonly,
           uiSchema,
@@ -2239,6 +2912,8 @@
       readonly,
       required,
       schema,
+      hideError,
+      rawErrors,
       children,
       uiSchema,
       registry
@@ -2247,10 +2922,15 @@
     const { RemoveButton: RemoveButton2 } = templates2.ButtonTemplates;
     const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
     const additional = utils.ADDITIONAL_PROPERTY_FLAG in schema;
+    const classNamesList = ["form-group", classNames];
+    if (!hideError && rawErrors && rawErrors.length > 0) {
+      classNamesList.push("has-error has-danger");
+    }
+    const uiClassNames = classNamesList.join(" ").trim();
     if (!additional) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: uiClassNames, style, children });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: uiClassNames, style, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-xs-5 form-additional", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "form-group", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Label, { label: keyLabel, required, id: `${id}-key` }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -2268,7 +2948,8 @@
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-xs-2", children: /* @__PURE__ */ jsxRuntime.jsx(
         RemoveButton2,
         {
-          className: "array-item-remove btn-block",
+          id: utils.buttonId(id, "remove"),
+          className: "rjsf-object-property-remove btn-block",
           style: { border: "0" },
           disabled: disabled || readonly,
           onClick: onDropPropertyClick(label),
@@ -2284,6 +2965,7 @@
     return {
       ArrayFieldDescriptionTemplate,
       ArrayFieldItemTemplate,
+      ArrayFieldItemButtonsTemplate,
       ArrayFieldTemplate,
       ArrayFieldTitleTemplate,
       ButtonTemplates: ButtonTemplates_default(),
@@ -2293,6 +2975,7 @@
       FieldTemplate: FieldTemplate_default,
       FieldErrorTemplate,
       FieldHelpTemplate,
+      GridTemplate,
       ObjectFieldTemplate,
       TitleFieldTemplate: TitleField,
       UnsupportedFieldTemplate: UnsupportedField_default,
@@ -2357,9 +3040,12 @@
   }) {
     const { translateString } = registry;
     const [lastValue, setLastValue] = react.useState(value);
-    const [state, setState] = react.useReducer((state2, action) => {
-      return { ...state2, ...action };
-    }, utils.parseDateString(value, time));
+    const [state, setState] = react.useReducer(
+      (state2, action) => {
+        return { ...state2, ...action };
+      },
+      utils.parseDateString(value, time)
+    );
     react.useEffect(() => {
       const stateValue = utils.toDateString(state, time);
       if (readyForChange(state) && stateValue !== value) {
@@ -2667,7 +3353,7 @@
             type: blob.type
           }
         ];
-      } catch (e) {
+      } catch {
         return acc;
       }
     }, []);
@@ -2756,13 +3442,13 @@
     const { enumOptions, enumDisabled, inline, emptyValue } = options;
     const handleBlur = react.useCallback(
       ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-      [onBlur, id]
+      [onBlur, enumOptions, emptyValue, id]
     );
     const handleFocus = react.useCallback(
       ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-      [onFocus, id]
+      [onFocus, enumOptions, emptyValue, id]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "field-radio-group", id, children: Array.isArray(enumOptions) && enumOptions.map((option, i) => {
+    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 disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
@@ -2803,6 +3489,105 @@
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "range-view", children: value })
     ] });
   }
+  function RatingWidget({
+    id,
+    value,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    onChange,
+    onFocus,
+    onBlur,
+    schema,
+    options
+  }) {
+    const { stars = 5, shape = "star" } = options;
+    const numStars = schema.maximum ? Math.min(schema.maximum, 5) : Math.min(Math.max(stars, 1), 5);
+    const min = schema.minimum || 0;
+    const handleStarClick = react.useCallback(
+      (starValue) => {
+        if (!disabled && !readonly) {
+          onChange(starValue);
+        }
+      },
+      [onChange, disabled, readonly]
+    );
+    const handleFocus = react.useCallback(
+      (event) => {
+        if (onFocus) {
+          const starValue = Number(event.target.dataset.value);
+          onFocus(id, starValue);
+        }
+      },
+      [onFocus, id]
+    );
+    const handleBlur = react.useCallback(
+      (event) => {
+        if (onBlur) {
+          const starValue = Number(event.target.dataset.value);
+          onBlur(id, starValue);
+        }
+      },
+      [onBlur, id]
+    );
+    const getSymbol = (isFilled) => {
+      if (shape === "heart") {
+        return isFilled ? "\u2665" : "\u2661";
+      }
+      return isFilled ? "\u2605" : "\u2606";
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "rating-widget",
+        style: {
+          display: "inline-flex",
+          fontSize: "1.5rem",
+          cursor: disabled || readonly ? "default" : "pointer"
+        },
+        children: [
+          [...Array(numStars)].map((_, index) => {
+            const starValue = min + index;
+            const isFilled = starValue <= value;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                onClick: () => handleStarClick(starValue),
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                "data-value": starValue,
+                tabIndex: disabled || readonly ? -1 : 0,
+                role: "radio",
+                "aria-checked": starValue === value,
+                "aria-label": `${starValue} ${shape === "heart" ? "heart" : "star"}${starValue === 1 ? "" : "s"}`,
+                style: {
+                  color: isFilled ? "#FFD700" : "#ccc",
+                  padding: "0 0.2rem",
+                  transition: "color 0.2s",
+                  userSelect: "none"
+                },
+                children: getSymbol(isFilled)
+              },
+              index
+            );
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "hidden",
+              id,
+              name: id,
+              value: value || "",
+              required,
+              disabled: disabled || readonly,
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ) });
+  }
   function getValue(event, multiple) {
     if (multiple) {
       return Array.from(event.target.options).slice().filter((o) => o.selected).map((o) => o.value);
@@ -2831,21 +3616,21 @@
         const newValue = getValue(event, multiple);
         return onFocus(id, utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
       },
-      [onFocus, id, schema, multiple, enumOptions, optEmptyVal]
+      [onFocus, id, multiple, enumOptions, optEmptyVal]
     );
     const handleBlur = react.useCallback(
       (event) => {
         const newValue = getValue(event, multiple);
         return onBlur(id, utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
       },
-      [onBlur, id, schema, multiple, enumOptions, optEmptyVal]
+      [onBlur, id, multiple, enumOptions, optEmptyVal]
     );
     const handleChange = react.useCallback(
       (event) => {
         const newValue = getValue(event, multiple);
         return onChange(utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
       },
-      [onChange, schema, multiple, enumOptions, optEmptyVal]
+      [onChange, multiple, enumOptions, optEmptyVal]
     );
     const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
     const showPlaceholderOption = !multiple && schema.default === void 0;
@@ -2855,6 +3640,7 @@
         id,
         name: id,
         multiple,
+        role: "combobox",
         className: "form-control",
         value: typeof selectedIndexes === "undefined" ? emptyValue : selectedIndexes,
         required,
@@ -2963,6 +3749,7 @@
       PasswordWidget,
       RadioWidget: RadioWidget_default,
       RangeWidget,
+      RatingWidget,
       SelectWidget: SelectWidget_default,
       TextWidget,
       TextareaWidget: TextareaWidget_default,
@@ -3052,9 +3839,6 @@
      * If an update is required, it applies the next state and, if needed, triggers the `onChange` handler to inform about
      * changes.
      *
-     * This method effectively replaces the deprecated `UNSAFE_componentWillReceiveProps`, providing a safer alternative
-     * to handle prop changes and state updates.
-     *
      * @param _ - The previous set of props.
      * @param prevState - The previous state of the component before the update.
      * @param snapshot - The value returned from `getSnapshotBeforeUpdate`.
@@ -3144,10 +3928,13 @@
         errors = currentErrors.errors;
         errorSchema = currentErrors.errorSchema;
         if (formDataChangedFields.length > 0) {
-          const newErrorSchema = formDataChangedFields.reduce((acc, key) => {
-            acc[key] = void 0;
-            return acc;
-          }, {});
+          const newErrorSchema = formDataChangedFields.reduce(
+            (acc, key) => {
+              acc[key] = void 0;
+              return acc;
+            },
+            {}
+          );
           errorSchema = schemaValidationErrorSchema = utils.mergeObjects(
             currentErrors.errorSchema,
             newErrorSchema,
@@ -3272,7 +4059,7 @@
             }
           } else if (key === utils.NAME_KEY && _obj[key] !== "") {
             paths.forEach((path) => {
-              const formValue = get3(formData, path);
+              const formValue = get2(formData, path);
               if (typeof formValue !== "object" || isEmpty(formValue) || Array.isArray(formValue) && formValue.every((val) => typeof val !== "object")) {
                 acc.push(path);
               }
@@ -3630,7 +4417,6 @@
         action,
         autoComplete,
         enctype,
-        acceptcharset,
         acceptCharset,
         noHtml5Validate = false,
         disabled,
@@ -3661,7 +4447,7 @@
           action,
           autoComplete,
           encType: enctype,
-          acceptCharset: acceptCharset || acceptcharset,
+          acceptCharset,
           noValidate: noHtml5Validate,
           onSubmit: this.onSubmit,
           as,
@@ -3724,9 +4510,9 @@
   }
 
   // src/index.ts
-  var src_default = Form;
+  var index_default = Form;
 
-  exports.default = src_default;
+  exports.default = index_default;
   exports.getDefaultRegistry = getDefaultRegistry;
   exports.withTheme = withTheme;