@rjsf/core 4.2.3 → 5.0.0-beta.4

package/dist/core.umd.development.js

@@ -0,0 +1,4054 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash-es/pick'), require('lodash-es/get'), require('lodash-es/isEmpty'), require('lodash-es/isObject'), require('lodash-es/set'), require('nanoid'), require('lodash-es/unset'), require('lodash-es/has'), require('lodash-es/omit')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash-es/pick', 'lodash-es/get', 'lodash-es/isEmpty', 'lodash-es/isObject', 'lodash-es/set', 'nanoid', 'lodash-es/unset', 'lodash-es/has', 'lodash-es/omit'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/core"] = {}, global.React, global.utils, global._pick, global.get, global._isEmpty, global.isObject, global.set, global.nanoid, global.unset, global.has, global.omit));
+})(this, (function (exports, React, utils, _pick, get, _isEmpty, isObject, set, nanoid, unset, has, omit) { 'use strict';
+
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+  var _pick__default = /*#__PURE__*/_interopDefaultLegacy(_pick);
+  var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
+  var _isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(_isEmpty);
+  var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
+  var set__default = /*#__PURE__*/_interopDefaultLegacy(set);
+  var unset__default = /*#__PURE__*/_interopDefaultLegacy(unset);
+  var has__default = /*#__PURE__*/_interopDefaultLegacy(has);
+  var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
+
+  /** Used to generate a unique ID for an element in a row */
+
+  function generateRowId() {
+    return nanoid.nanoid();
+  }
+  /** Converts the `formData` into `KeyedFormDataType` data, using the `generateRowId()` function to create the key
+   *
+   * @param formData - The data for the form
+   * @returns - The `formData` converted into a `KeyedFormDataType` element
+   */
+
+
+  function generateKeyedFormData(formData) {
+    return !Array.isArray(formData) ? [] : formData.map(item => {
+      return {
+        key: generateRowId(),
+        item
+      };
+    });
+  }
+  /** Converts `KeyedFormDataType` data into the inner `formData`
+   *
+   * @param keyedFormData - The `KeyedFormDataType` to be converted
+   * @returns - The inner `formData` item(s) in the `keyedFormData`
+   */
+
+
+  function keyedToPlainFormData(keyedFormData) {
+    if (Array.isArray(keyedFormData)) {
+      return keyedFormData.map(keyedItem => keyedItem.item);
+    }
+
+    return [];
+  }
+  /** The `ArrayField` component is used to render a field in the schema that is of type `array`. It supports both normal
+   * and fixed array, allowing user to add and remove elements from the array data.
+   */
+
+
+  class ArrayField extends React.Component {
+    /** Constructs an `ArrayField` from the `props`, generating the initial keyed data from the `formData`
+     *
+     * @param props - The `FieldProps` for this template
+     */
+    constructor(props) {
+      super(props);
+
+      this._getNewFormDataRow = () => {
+        const {
+          schema,
+          registry
+        } = this.props;
+        const {
+          schemaUtils
+        } = registry;
+        let itemSchema = schema.items;
+
+        if (utils.isFixedItems(schema) && utils.allowAdditionalItems(schema)) {
+          itemSchema = schema.additionalItems;
+        } // Cast this as a T to work around schema utils being for T[] caused by the FieldProps<T[], F> call on the class
+
+
+        return schemaUtils.getDefaultFormState(itemSchema);
+      };
+
+      this.onAddClick = event => {
+        if (event) {
+          event.preventDefault();
+        }
+
+        const {
+          onChange
+        } = this.props;
+        const {
+          keyedFormData
+        } = this.state;
+        const newKeyedFormDataRow = {
+          key: generateRowId(),
+          item: this._getNewFormDataRow()
+        };
+        const newKeyedFormData = [...keyedFormData, newKeyedFormDataRow];
+        this.setState({
+          keyedFormData: newKeyedFormData,
+          updatedKeyedFormData: true
+        }, () => onChange(keyedToPlainFormData(newKeyedFormData)));
+      };
+
+      this.onAddIndexClick = index => {
+        return event => {
+          if (event) {
+            event.preventDefault();
+          }
+
+          const {
+            onChange
+          } = this.props;
+          const {
+            keyedFormData
+          } = this.state;
+          const newKeyedFormDataRow = {
+            key: generateRowId(),
+            item: this._getNewFormDataRow()
+          };
+          const newKeyedFormData = [...keyedFormData];
+          newKeyedFormData.splice(index, 0, newKeyedFormDataRow);
+          this.setState({
+            keyedFormData: newKeyedFormData,
+            updatedKeyedFormData: true
+          }, () => onChange(keyedToPlainFormData(newKeyedFormData)));
+        };
+      };
+
+      this.onDropIndexClick = index => {
+        return event => {
+          if (event) {
+            event.preventDefault();
+          }
+
+          const {
+            onChange,
+            errorSchema
+          } = this.props;
+          const {
+            keyedFormData
+          } = this.state; // refs #195: revalidate to ensure properly reindexing errors
+
+          let newErrorSchema;
+
+          if (errorSchema) {
+            newErrorSchema = {};
+
+            for (const idx in errorSchema) {
+              const i = parseInt(idx);
+
+              if (i < index) {
+                set__default["default"](newErrorSchema, [i], errorSchema[idx]);
+              } else if (i > index) {
+                set__default["default"](newErrorSchema, [i - 1], errorSchema[idx]);
+              }
+            }
+          }
+
+          const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
+          this.setState({
+            keyedFormData: newKeyedFormData,
+            updatedKeyedFormData: true
+          }, () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema));
+        };
+      };
+
+      this.onReorderClick = (index, newIndex) => {
+        return event => {
+          if (event) {
+            event.preventDefault();
+            event.currentTarget.blur();
+          }
+
+          const {
+            onChange,
+            errorSchema
+          } = this.props;
+          let newErrorSchema;
+
+          if (this.props.errorSchema) {
+            newErrorSchema = {};
+
+            for (const idx in errorSchema) {
+              const i = parseInt(idx);
+
+              if (i == index) {
+                set__default["default"](newErrorSchema, [newIndex], errorSchema[index]);
+              } else if (i == newIndex) {
+                set__default["default"](newErrorSchema, [index], errorSchema[newIndex]);
+              } else {
+                set__default["default"](newErrorSchema, [idx], errorSchema[i]);
+              }
+            }
+          }
+
+          const {
+            keyedFormData
+          } = this.state;
+
+          function reOrderArray() {
+            // Copy item
+            const _newKeyedFormData = keyedFormData.slice(); // Moves item from index to newIndex
+
+
+            _newKeyedFormData.splice(index, 1);
+
+            _newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
+
+            return _newKeyedFormData;
+          }
+
+          const newKeyedFormData = reOrderArray();
+          this.setState({
+            keyedFormData: newKeyedFormData
+          }, () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema));
+        };
+      };
+
+      this.onChangeForIndex = index => {
+        return (value, newErrorSchema) => {
+          const {
+            formData,
+            onChange,
+            errorSchema
+          } = this.props;
+          const arrayData = Array.isArray(formData) ? formData : [];
+          const newFormData = arrayData.map((item, i) => {
+            // We need to treat undefined items as nulls to have validation.
+            // See https://github.com/tdegrunt/jsonschema/issues/206
+            const jsonValue = typeof value === "undefined" ? null : value;
+            return index === i ? jsonValue : item;
+          });
+          onChange(newFormData, errorSchema && errorSchema && { ...errorSchema,
+            [index]: newErrorSchema
+          });
+        };
+      };
+
+      this.onSelectChange = value => {
+        const {
+          onChange
+        } = this.props;
+        onChange(value);
+      };
+
+      const {
+        formData: _formData = []
+      } = props;
+
+      const _keyedFormData = generateKeyedFormData(_formData);
+
+      this.state = {
+        keyedFormData: _keyedFormData,
+        updatedKeyedFormData: false
+      };
+    }
+    /** React lifecycle method that is called when the props are about to change allowing the state to be updated. It
+     * regenerates the keyed form data and returns it
+     *
+     * @param nextProps - The next set of props data
+     * @param prevState - The previous set of state data
+     */
+
+
+    static getDerivedStateFromProps(nextProps, prevState) {
+      // Don't call getDerivedStateFromProps if keyed formdata was just updated.
+      if (prevState.updatedKeyedFormData) {
+        return {
+          updatedKeyedFormData: false
+        };
+      }
+
+      const nextFormData = Array.isArray(nextProps.formData) ? nextProps.formData : [];
+      const previousKeyedFormData = prevState.keyedFormData || [];
+      const newKeyedFormData = nextFormData.length === previousKeyedFormData.length ? previousKeyedFormData.map((previousKeyedFormDatum, index) => {
+        return {
+          key: previousKeyedFormDatum.key,
+          item: nextFormData[index]
+        };
+      }) : generateKeyedFormData(nextFormData);
+      return {
+        keyedFormData: newKeyedFormData
+      };
+    }
+    /** Returns the appropriate title for an item by getting first the title from the schema.items, then falling back to
+     * the description from the schema.items, and finally the string "Item"
+     */
+
+
+    get itemTitle() {
+      const {
+        schema
+      } = this.props;
+      return get__default["default"](schema, [utils.ITEMS_KEY, "title"], get__default["default"](schema, [utils.ITEMS_KEY, "description"], "Item"));
+    }
+    /** Determines whether the item described in the schema is always required, which is determined by whether any item
+     * may be null.
+     *
+     * @param itemSchema - The schema for the item
+     * @return - True if the item schema type does not contain the "null" type
+     */
+
+
+    isItemRequired(itemSchema) {
+      if (Array.isArray(itemSchema.type)) {
+        // While we don't yet support composite/nullable jsonschema types, it's
+        // future-proof to check for requirement against these.
+        return !itemSchema.type.includes("null");
+      } // All non-null array item types are inherently required by design
+
+
+      return itemSchema.type !== "null";
+    }
+    /** Determines whether more items can be added to the array. If the uiSchema indicates the array doesn't allow adding
+     * then false is returned. Otherwise, if the schema indicates that there are a maximum number of items and the
+     * `formData` matches that value, then false is returned, otherwise true is returned.
+     *
+     * @param formItems - The list of items in the form
+     * @returns - True if the item is addable otherwise false
+     */
+
+
+    canAddItem(formItems) {
+      const {
+        schema,
+        uiSchema
+      } = this.props;
+      let {
+        addable
+      } = utils.getUiOptions(uiSchema);
+
+      if (addable !== false) {
+        // if ui:options.addable was not explicitly set to false, we can add
+        // another item if we have not exceeded maxItems yet
+        if (schema.maxItems !== undefined) {
+          addable = formItems.length < schema.maxItems;
+        } else {
+          addable = true;
+        }
+      }
+
+      return addable;
+    }
+    /** Returns the default form information for an item based on the schema for that item. Deals with the possibility
+     * that the schema is fixed and allows additional items.
+     */
+
+
+    /** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
+     */
+    render() {
+      const {
+        schema,
+        uiSchema,
+        idSchema,
+        registry
+      } = this.props;
+      const {
+        schemaUtils
+      } = registry;
+
+      if (!(utils.ITEMS_KEY in schema)) {
+        const uiOptions = utils.getUiOptions(uiSchema);
+        const UnsupportedFieldTemplate = utils.getTemplate("UnsupportedFieldTemplate", registry, uiOptions);
+        return /*#__PURE__*/React__default["default"].createElement(UnsupportedFieldTemplate, {
+          schema: schema,
+          idSchema: idSchema,
+          reason: "Missing items definition",
+          registry: registry
+        });
+      }
+
+      if (schemaUtils.isMultiSelect(schema)) {
+        // If array has enum or uniqueItems set to true, call renderMultiSelect() to render the default multiselect widget or a custom widget, if specified.
+        return this.renderMultiSelect();
+      }
+
+      if (utils.isCustomWidget(uiSchema)) {
+        return this.renderCustomWidget();
+      }
+
+      if (utils.isFixedItems(schema)) {
+        return this.renderFixedArray();
+      }
+
+      if (schemaUtils.isFilesArray(schema, uiSchema)) {
+        return this.renderFiles();
+      }
+
+      return this.renderNormalArray();
+    }
+    /** Renders a normal array without any limitations of length
+     */
+
+
+    renderNormalArray() {
+      const {
+        schema,
+        uiSchema = {},
+        errorSchema,
+        idSchema,
+        name,
+        disabled = false,
+        readonly = false,
+        autofocus = false,
+        required = false,
+        registry,
+        onBlur,
+        onFocus,
+        idPrefix,
+        idSeparator = "_",
+        rawErrors
+      } = this.props;
+      const {
+        keyedFormData
+      } = this.state;
+      const title = schema.title === undefined ? name : schema.title;
+      const {
+        schemaUtils,
+        formContext
+      } = registry;
+      const uiOptions = utils.getUiOptions(uiSchema);
+
+      const _schemaItems = isObject__default["default"](schema.items) ? schema.items : {};
+
+      const itemsSchema = schemaUtils.retrieveSchema(_schemaItems);
+      const formData = keyedToPlainFormData(this.state.keyedFormData);
+      const arrayProps = {
+        canAdd: this.canAddItem(formData),
+        items: keyedFormData.map((keyedItem, index) => {
+          const {
+            key,
+            item
+          } = keyedItem; // While we are actually dealing with a single item of type T, the types require a T[], so cast
+
+          const itemCast = item;
+          const itemSchema = schemaUtils.retrieveSchema(_schemaItems, itemCast);
+          const itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
+          const itemIdPrefix = idSchema.$id + idSeparator + index;
+          const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
+          return this.renderArrayFieldItem({
+            key,
+            index,
+            name: name && name + "-" + index,
+            canMoveUp: index > 0,
+            canMoveDown: index < formData.length - 1,
+            itemSchema: itemSchema,
+            itemIdSchema,
+            itemErrorSchema,
+            itemData: itemCast,
+            itemUiSchema: uiSchema.items,
+            autofocus: autofocus && index === 0,
+            onBlur,
+            onFocus,
+            rawErrors
+          });
+        }),
+        className: "field field-array field-array-of-" + itemsSchema.type,
+        disabled,
+        idSchema,
+        uiSchema,
+        onAddClick: this.onAddClick,
+        readonly,
+        required,
+        schema,
+        title,
+        formContext,
+        formData,
+        rawErrors,
+        registry
+      };
+      const Template = utils.getTemplate("ArrayFieldTemplate", registry, uiOptions);
+      return /*#__PURE__*/React__default["default"].createElement(Template, { ...arrayProps
+      });
+    }
+    /** Renders an array using the custom widget provided by the user in the `uiSchema`
+     */
+
+
+    renderCustomWidget() {
+      const {
+        schema,
+        idSchema,
+        uiSchema,
+        disabled = false,
+        readonly = false,
+        autofocus = false,
+        required = false,
+        hideError,
+        placeholder,
+        onBlur,
+        onFocus,
+        formData: items = [],
+        registry,
+        rawErrors,
+        name
+      } = this.props;
+      const {
+        widgets,
+        formContext
+      } = registry;
+      const title = schema.title || name;
+      const {
+        widget,
+        ...options
+      } = utils.getUiOptions(uiSchema);
+      const Widget = utils.getWidget(schema, widget, widgets);
+      return /*#__PURE__*/React__default["default"].createElement(Widget, {
+        id: idSchema && idSchema.$id,
+        multiple: true,
+        onChange: this.onSelectChange,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        options: options,
+        schema: schema,
+        uiSchema: uiSchema,
+        registry: registry,
+        value: items,
+        disabled: disabled,
+        readonly: readonly,
+        hideError: hideError,
+        required: required,
+        label: title,
+        placeholder: placeholder,
+        formContext: formContext,
+        autofocus: autofocus,
+        rawErrors: rawErrors
+      });
+    }
+    /** Renders an array as a set of checkboxes
+     */
+
+
+    renderMultiSelect() {
+      const {
+        schema,
+        idSchema,
+        uiSchema,
+        formData: items = [],
+        disabled = false,
+        readonly = false,
+        autofocus = false,
+        required = false,
+        placeholder,
+        onBlur,
+        onFocus,
+        registry,
+        rawErrors,
+        name
+      } = this.props;
+      const {
+        widgets,
+        schemaUtils,
+        formContext
+      } = registry;
+      const itemsSchema = schemaUtils.retrieveSchema(schema.items, items);
+      const title = schema.title || name;
+      const enumOptions = utils.optionsList(itemsSchema);
+      const {
+        widget = "select",
+        ...options
+      } = utils.getUiOptions(uiSchema);
+      const Widget = utils.getWidget(schema, widget, widgets);
+      return /*#__PURE__*/React__default["default"].createElement(Widget, {
+        id: idSchema && idSchema.$id,
+        multiple: true,
+        onChange: this.onSelectChange,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        options: { ...options,
+          enumOptions
+        },
+        schema: schema,
+        uiSchema: uiSchema,
+        registry: registry,
+        value: items,
+        disabled: disabled,
+        readonly: readonly,
+        required: required,
+        label: title,
+        placeholder: placeholder,
+        formContext: formContext,
+        autofocus: autofocus,
+        rawErrors: rawErrors
+      });
+    }
+    /** Renders an array of files using the `FileWidget`
+     */
+
+
+    renderFiles() {
+      const {
+        schema,
+        uiSchema,
+        idSchema,
+        name,
+        disabled = false,
+        readonly = false,
+        autofocus = false,
+        required = false,
+        onBlur,
+        onFocus,
+        registry,
+        formData: items = [],
+        rawErrors
+      } = this.props;
+      const title = schema.title || name;
+      const {
+        widgets,
+        formContext
+      } = registry;
+      const {
+        widget = "files",
+        ...options
+      } = utils.getUiOptions(uiSchema);
+      const Widget = utils.getWidget(schema, widget, widgets);
+      return /*#__PURE__*/React__default["default"].createElement(Widget, {
+        options: options,
+        id: idSchema && idSchema.$id,
+        multiple: true,
+        onChange: this.onSelectChange,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        schema: schema,
+        uiSchema: uiSchema,
+        title: title,
+        value: items,
+        disabled: disabled,
+        readonly: readonly,
+        required: required,
+        registry: registry,
+        formContext: formContext,
+        autofocus: autofocus,
+        rawErrors: rawErrors,
+        label: ""
+      });
+    }
+    /** Renders an array that has a maximum limit of items
+     */
+
+
+    renderFixedArray() {
+      const {
+        schema,
+        uiSchema = {},
+        formData = [],
+        errorSchema,
+        idPrefix,
+        idSeparator = "_",
+        idSchema,
+        name,
+        disabled = false,
+        readonly = false,
+        autofocus = false,
+        required = false,
+        registry,
+        onBlur,
+        onFocus,
+        rawErrors
+      } = this.props;
+      const {
+        keyedFormData
+      } = this.state;
+      let {
+        formData: items = []
+      } = this.props;
+      const title = schema.title || name;
+      const uiOptions = utils.getUiOptions(uiSchema);
+      const {
+        schemaUtils,
+        formContext
+      } = registry;
+
+      const _schemaItems = isObject__default["default"](schema.items) ? schema.items : [];
+
+      const itemSchemas = _schemaItems.map((item, index) => schemaUtils.retrieveSchema(item, formData[index]));
+
+      const additionalSchema = isObject__default["default"](schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, formData) : null;
+
+      if (!items || items.length < itemSchemas.length) {
+        // to make sure at least all fixed items are generated
+        items = items || [];
+        items = items.concat(new Array(itemSchemas.length - items.length));
+      } // These are the props passed into the render function
+
+
+      const arrayProps = {
+        canAdd: this.canAddItem(items) && !!additionalSchema,
+        className: "field field-array field-array-fixed-items",
+        disabled,
+        idSchema,
+        formData,
+        items: keyedFormData.map((keyedItem, index) => {
+          const {
+            key,
+            item
+          } = keyedItem; // While we are actually dealing with a single item of type T, the types require a T[], so cast
+
+          const itemCast = item;
+          const additional = index >= itemSchemas.length;
+          const itemSchema = additional && isObject__default["default"](schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, itemCast) : itemSchemas[index];
+          const itemIdPrefix = idSchema.$id + idSeparator + index;
+          const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
+          const itemUiSchema = additional ? uiSchema.additionalItems || {} : Array.isArray(uiSchema.items) ? uiSchema.items[index] : uiSchema.items || {};
+          const itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
+          return this.renderArrayFieldItem({
+            key,
+            index,
+            name: name && name + "-" + index,
+            canRemove: additional,
+            canMoveUp: index >= itemSchemas.length + 1,
+            canMoveDown: additional && index < items.length - 1,
+            itemSchema,
+            itemData: itemCast,
+            itemUiSchema,
+            itemIdSchema,
+            itemErrorSchema,
+            autofocus: autofocus && index === 0,
+            onBlur,
+            onFocus,
+            rawErrors
+          });
+        }),
+        onAddClick: this.onAddClick,
+        readonly,
+        required,
+        registry,
+        schema,
+        uiSchema,
+        title,
+        formContext,
+        rawErrors
+      };
+      const Template = utils.getTemplate("ArrayFieldTemplate", registry, uiOptions);
+      return /*#__PURE__*/React__default["default"].createElement(Template, { ...arrayProps
+      });
+    }
+    /** Renders the individual array item using a `SchemaField` along with the additional properties required to be send
+     * back to the `ArrayFieldItemTemplate`.
+     *
+     * @param props - The props for the individual array item to be rendered
+     */
+
+
+    renderArrayFieldItem(props) {
+      const {
+        key,
+        index,
+        name,
+        canRemove = true,
+        canMoveUp = true,
+        canMoveDown = true,
+        itemSchema,
+        itemData,
+        itemUiSchema,
+        itemIdSchema,
+        itemErrorSchema,
+        autofocus,
+        onBlur,
+        onFocus,
+        rawErrors
+      } = props;
+      const {
+        disabled,
+        hideError,
+        idPrefix,
+        idSeparator,
+        readonly,
+        uiSchema,
+        registry,
+        formContext
+      } = this.props;
+      const {
+        fields: {
+          SchemaField
+        }
+      } = registry;
+      const {
+        orderable = true,
+        removable = true
+      } = utils.getUiOptions(uiSchema);
+      const has = {
+        moveUp: orderable && canMoveUp,
+        moveDown: orderable && canMoveDown,
+        remove: removable && canRemove,
+        toolbar: false
+      };
+      has.toolbar = Object.keys(has).some(key => has[key]);
+      return {
+        children: /*#__PURE__*/React__default["default"].createElement(SchemaField, {
+          name: name,
+          index: index,
+          schema: itemSchema,
+          uiSchema: itemUiSchema,
+          formData: itemData,
+          formContext: formContext,
+          errorSchema: itemErrorSchema,
+          idPrefix: idPrefix,
+          idSeparator: idSeparator,
+          idSchema: itemIdSchema,
+          required: this.isItemRequired(itemSchema),
+          onChange: this.onChangeForIndex(index),
+          onBlur: onBlur,
+          onFocus: onFocus,
+          registry: registry,
+          disabled: disabled,
+          readonly: readonly,
+          hideError: hideError,
+          autofocus: autofocus,
+          rawErrors: rawErrors
+        }),
+        className: "array-item",
+        disabled,
+        hasToolbar: has.toolbar,
+        hasMoveUp: has.moveUp,
+        hasMoveDown: has.moveDown,
+        hasRemove: has.remove,
+        index,
+        key,
+        onAddIndexClick: this.onAddIndexClick,
+        onDropIndexClick: this.onDropIndexClick,
+        onReorderClick: this.onReorderClick,
+        readonly,
+        registry
+      };
+    }
+
+  }
+
+  /** The `BooleanField` component is used to render a field in the schema is boolean. It constructs `enumOptions` for the
+   * two boolean values based on the various alternatives in the schema.
+   *
+   * @param props - The `FieldProps` for this template
+   */
+
+  function BooleanField(props) {
+    const {
+      schema,
+      name,
+      uiSchema,
+      idSchema,
+      formData,
+      registry,
+      required,
+      disabled,
+      readonly,
+      autofocus,
+      onChange,
+      onFocus,
+      onBlur,
+      rawErrors
+    } = props;
+    const {
+      title
+    } = schema;
+    const {
+      widgets,
+      formContext
+    } = registry;
+    const {
+      widget = "checkbox",
+      ...options
+    } = utils.getUiOptions(uiSchema);
+    const Widget = utils.getWidget(schema, widget, widgets);
+    let enumOptions;
+
+    if (Array.isArray(schema.oneOf)) {
+      enumOptions = utils.optionsList({
+        oneOf: schema.oneOf.map(option => {
+          if (isObject__default["default"](option)) {
+            return { ...option,
+              title: option.title || (option.const === true ? "Yes" : "No")
+            };
+          }
+
+          return undefined;
+        }).filter(o => o) // cast away the error that typescript can't grok is fixed
+
+      });
+    } else {
+      var _schema$enum;
+
+      // We deprecated enumNames in v5. It's intentionally omitted from RSJFSchema type, so we need to cast here.
+      const schemaWithEnumNames = schema;
+      schema.enum = (_schema$enum = schema.enum) != null ? _schema$enum : [true, false];
+
+      if (!schemaWithEnumNames.enumNames && schema.enum && schema.enum.length === 2 && schema.enum.every(v => typeof v === "boolean")) {
+        enumOptions = [{
+          value: schema.enum[0],
+          label: schema.enum[0] ? "Yes" : "No"
+        }, {
+          value: schema.enum[1],
+          label: schema.enum[1] ? "Yes" : "No"
+        }];
+      } else {
+        enumOptions = utils.optionsList({
+          enum: schema.enum,
+          // NOTE: enumNames is deprecated, but still supported for now.
+          enumNames: schemaWithEnumNames.enumNames
+        });
+      }
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(Widget, {
+      options: { ...options,
+        enumOptions
+      },
+      schema: schema,
+      uiSchema: uiSchema,
+      id: idSchema && idSchema.$id,
+      onChange: onChange,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      label: title === undefined ? name : title,
+      value: formData,
+      required: required,
+      disabled: disabled,
+      readonly: readonly,
+      registry: registry,
+      formContext: formContext,
+      autofocus: autofocus,
+      rawErrors: rawErrors
+    });
+  }
+
+  /** The `AnyOfField` component is used to render a field in the schema that is an `anyOf`, `allOf` or `oneOf`. It tracks
+   * the currently selected option and cleans up any irrelevant data in `formData`.
+   *
+   * @param props - The `FieldProps` for this template
+   */
+
+  class AnyOfField extends React.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);
+
+      this.onOptionChange = option => {
+        const selectedOption = parseInt(option, 10);
+        const {
+          formData,
+          onChange,
+          options,
+          registry
+        } = this.props;
+        const {
+          schemaUtils
+        } = registry;
+        const newOption = schemaUtils.retrieveSchema(options[selectedOption], formData); // If the new option is of type object and the current data is an object,
+        // discard properties added using the old option.
+
+        let newFormData = undefined;
+
+        if (utils.guessType(formData) === "object" && (newOption.type === "object" || newOption.properties)) {
+          newFormData = Object.assign({}, formData);
+          const optionsToDiscard = options.slice();
+          optionsToDiscard.splice(selectedOption, 1); // Discard any data added using other options
+
+          for (const option of optionsToDiscard) {
+            if (option.properties) {
+              for (const key in option.properties) {
+                if (key in newFormData) {
+                  unset__default["default"](newFormData, key);
+                }
+              }
+            }
+          }
+        } // Call getDefaultFormState to make sure defaults are populated on change.
+
+
+        onChange(schemaUtils.getDefaultFormState(options[selectedOption], newFormData));
+        this.setState({
+          selectedOption: parseInt(option, 10)
+        });
+      };
+
+      const {
+        formData: _formData,
+        options: _options
+      } = this.props;
+      this.state = {
+        selectedOption: this.getMatchingOption(0, _formData, _options)
+      };
+    }
+    /** React lifecycle methos 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,
+        idSchema
+      } = this.props;
+      const {
+        selectedOption
+      } = this.state;
+
+      if (!utils.deepEquals(formData, prevProps.formData) && idSchema.$id === prevProps.idSchema.$id) {
+        const matchingOption = this.getMatchingOption(selectedOption, formData, options);
+
+        if (!prevState || matchingOption === selectedOption) {
+          return;
+        }
+
+        this.setState({
+          selectedOption: matchingOption
+        });
+      }
+    }
+    /** 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 {
+        schemaUtils
+      } = this.props.registry;
+      const option = schemaUtils.getMatchingOption(formData, options);
+
+      if (option !== 0) {
+        return option;
+      } // If the form data matches none of the options, use the currently selected
+      // option, assuming it's available; otherwise use the first option
+
+
+      return selectedOption || 0;
+    }
+    /** 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 -
+     */
+
+
+    /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
+     */
+    render() {
+      const {
+        name,
+        baseType,
+        disabled = false,
+        readonly = false,
+        hideError = false,
+        errorSchema = {},
+        formData,
+        formContext,
+        idPrefix,
+        idSeparator,
+        idSchema,
+        onBlur,
+        onChange,
+        onFocus,
+        options,
+        registry,
+        uiSchema,
+        schema
+      } = this.props;
+      const {
+        widgets,
+        fields
+      } = registry;
+      const {
+        SchemaField: _SchemaField
+      } = fields;
+      const {
+        selectedOption
+      } = this.state;
+      const {
+        widget = "select",
+        ...uiOptions
+      } = utils.getUiOptions(uiSchema);
+      const Widget = utils.getWidget({
+        type: "number"
+      }, widget, widgets);
+      const option = options[selectedOption] || null;
+      let optionSchema;
+
+      if (option) {
+        // If the subschema doesn't declare a type, infer the type from the
+        // parent schema
+        optionSchema = option.type ? option : Object.assign({}, option, {
+          type: baseType
+        });
+      }
+
+      const enumOptions = options.map((option, index) => ({
+        label: option.title || "Option " + (index + 1),
+        value: index
+      }));
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "panel panel-default panel-body"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "form-group"
+      }, /*#__PURE__*/React__default["default"].createElement(Widget, {
+        id: "" + idSchema.$id + (schema.oneOf ? "__oneof_select" : "__anyof_select"),
+        schema: {
+          type: "number",
+          default: 0
+        },
+        onChange: this.onOptionChange,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        value: selectedOption,
+        options: {
+          enumOptions
+        },
+        registry: registry,
+        formContext: formContext,
+        ...uiOptions,
+        label: ""
+      })), option !== null && /*#__PURE__*/React__default["default"].createElement(_SchemaField, {
+        name: name,
+        schema: optionSchema,
+        uiSchema: uiSchema,
+        errorSchema: errorSchema,
+        idSchema: idSchema,
+        idPrefix: idPrefix,
+        idSeparator: idSeparator,
+        formData: formData,
+        formContext: formContext,
+        onChange: onChange,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        registry: registry,
+        disabled: disabled,
+        readonly: readonly,
+        hideError: hideError
+      }));
+    }
+
+  }
+
+  // digits followed by any number of 0 characters up until the end of the line.
+  // Ensuring that there is at least one prefixed character is important so that
+  // you don't incorrectly match against "0".
+
+  const trailingCharMatcherWithPrefix = /\.([0-9]*0)*$/; // This is used for trimming the trailing 0 and . characters without affecting
+  // the rest of the string. Its possible to use one RegEx with groups for this
+  // functionality, but it is fairly complex compared to simply defining two
+  // different matchers.
+
+  const trailingCharMatcher = /[0.]0*$/;
+  /**
+   * The NumberField class has some special handling for dealing with trailing
+   * decimal points and/or zeroes. This logic is designed to allow trailing values
+   * to be visible in the input element, but not be represented in the
+   * corresponding form data.
+   *
+   * The algorithm is as follows:
+   *
+   * 1. When the input value changes the value is cached in the component state
+   *
+   * 2. The value is then normalized, removing trailing decimal points and zeros,
+   *    then passed to the "onChange" callback
+   *
+   * 3. When the component is rendered, the formData value is checked against the
+   *    value cached in the state. If it matches the cached value, the cached
+   *    value is passed to the input instead of the formData value
+   */
+
+  function NumberField(props) {
+    const {
+      registry,
+      onChange,
+      formData,
+      value: initialValue
+    } = props;
+    const [lastValue, setLastValue] = React.useState(initialValue);
+    const {
+      StringField
+    } = registry.fields;
+    let value = formData;
+    /** Handle the change from the `StringField` to properly convert to a number
+     *
+     * @param value - The current value for the change occurring
+     */
+
+    const handleChange = React.useCallback(value => {
+      // Cache the original value in component state
+      setLastValue(value); // Normalize decimals that don't start with a zero character in advance so
+      // that the rest of the normalization logic is simpler
+
+      if (("" + value).charAt(0) === ".") {
+        value = "0" + value;
+      } // Check that the value is a string (this can happen if the widget used is a
+      // <select>, due to an enum declaration etc) then, if the value ends in a
+      // trailing decimal point or multiple zeroes, strip the trailing values
+
+
+      const processed = typeof value === "string" && value.match(trailingCharMatcherWithPrefix) ? utils.asNumber(value.replace(trailingCharMatcher, "")) : utils.asNumber(value);
+      onChange(processed);
+    }, [onChange]);
+
+    if (typeof lastValue === "string" && typeof value === "number") {
+      // Construct a regular expression that checks for a string that consists
+      // of the formData value suffixed with zero or one '.' characters and zero
+      // or more '0' characters
+      const re = new RegExp(("" + value).replace(".", "\\.") + "\\.?0*$"); // If the cached "lastValue" is a match, use that instead of the formData
+      // value to prevent the input value from changing in the UI
+
+      if (lastValue.match(re)) {
+        value = lastValue;
+      }
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(StringField, { ...props,
+      formData: value,
+      onChange: handleChange
+    });
+  }
+
+  /** The `ObjectField` component is used to render a field in the schema that is of type `object`. It tracks whether an
+   * additional property key was modified and what it was modified to
+   *
+   * @param props - The `FieldProps` for this template
+   */
+
+  class ObjectField extends React.Component {
+    constructor() {
+      var _this;
+
+      super(...arguments);
+      _this = this;
+      this.state = {
+        wasPropertyKeyModified: false,
+        additionalProperties: {}
+      };
+
+      this.onPropertyChange = function (name, addedByAdditionalProperties) {
+        if (addedByAdditionalProperties === void 0) {
+          addedByAdditionalProperties = false;
+        }
+
+        return (value, newErrorSchema) => {
+          const {
+            formData,
+            onChange,
+            errorSchema
+          } = _this.props;
+
+          if (value === undefined && addedByAdditionalProperties) {
+            // Don't set value = undefined for fields added by
+            // additionalProperties. Doing so removes them from the
+            // formData, which causes them to completely disappear
+            // (including the input field for the property name). Unlike
+            // fields which are "mandated" by the schema, these fields can
+            // be set to undefined by clicking a "delete field" button, so
+            // set empty values to the empty string.
+            value = "";
+          }
+
+          const newFormData = { ...formData,
+            [name]: value
+          };
+          onChange(newFormData, errorSchema && errorSchema && { ...errorSchema,
+            [name]: newErrorSchema
+          });
+        };
+      };
+
+      this.onDropPropertyClick = key => {
+        return event => {
+          event.preventDefault();
+          const {
+            onChange,
+            formData
+          } = this.props;
+          const copiedFormData = { ...formData
+          };
+          unset__default["default"](copiedFormData, key);
+          onChange(copiedFormData);
+        };
+      };
+
+      this.getAvailableKey = (preferredKey, formData) => {
+        const {
+          uiSchema
+        } = this.props;
+        const {
+          duplicateKeySuffixSeparator = "-"
+        } = utils.getUiOptions(uiSchema);
+        let index = 0;
+        let newKey = preferredKey;
+
+        while (newKey in formData) {
+          newKey = "" + preferredKey + duplicateKeySuffixSeparator + ++index;
+        }
+
+        return newKey;
+      };
+
+      this.onKeyChange = oldValue => {
+        return (value, newErrorSchema) => {
+          if (oldValue === value) {
+            return;
+          }
+
+          const {
+            formData,
+            onChange,
+            errorSchema
+          } = this.props;
+          value = this.getAvailableKey(value, formData);
+          const newFormData = { ...formData
+          };
+          const newKeys = {
+            [oldValue]: value
+          };
+          const keyValues = Object.keys(newFormData).map(key => {
+            const newKey = newKeys[key] || key;
+            return {
+              [newKey]: newFormData[key]
+            };
+          });
+          const renamedObj = Object.assign({}, ...keyValues);
+          this.setState({
+            wasPropertyKeyModified: true
+          });
+          onChange(renamedObj, errorSchema && errorSchema && { ...errorSchema,
+            [value]: newErrorSchema
+          });
+        };
+      };
+
+      this.handleAddClick = schema => () => {
+        if (!isObject__default["default"](schema.additionalProperties)) {
+          return;
+        }
+
+        const {
+          formData,
+          onChange,
+          registry
+        } = this.props;
+        let type = schema.additionalProperties.type;
+        const newFormData = { ...formData
+        };
+
+        if (utils.REF_KEY in schema.additionalProperties) {
+          const {
+            schemaUtils
+          } = registry;
+          const refSchema = schemaUtils.retrieveSchema({
+            $ref: schema.additionalProperties[utils.REF_KEY]
+          }, formData);
+          type = refSchema.type;
+        }
+
+        const newKey = this.getAvailableKey("newKey", newFormData); // Cast this to make the `set` work properly
+
+        set__default["default"](newFormData, newKey, this.getDefaultValue(type));
+        onChange(newFormData);
+      };
+    }
+
+    /** Returns a flag indicating whether the `name` field is required in the object schema
+     *
+     * @param name - The name of the field to check for required-ness
+     * @returns - True if the field `name` is required, false otherwise
+     */
+    isRequired(name) {
+      const {
+        schema
+      } = this.props;
+      return Array.isArray(schema.required) && schema.required.indexOf(name) !== -1;
+    }
+    /** Returns the `onPropertyChange` handler for the `name` field. Handles the special case where a user is attempting
+     * to clear the data for a field added as an additional property. Calls the `onChange()` handler with the updated
+     * formData.
+     *
+     * @param name - The name of the property
+     * @param addedByAdditionalProperties - Flag indicating whether this property is an additional property
+     * @returns - The onPropertyChange callback for the `name` property
+     */
+
+
+    /** Returns a default value to be used for a new additional schema property of the given `type`
+     *
+     * @param type - The type of the new additional schema property
+     */
+    getDefaultValue(type) {
+      switch (type) {
+        case "string":
+          return "New Value";
+
+        case "array":
+          return [];
+
+        case "boolean":
+          return false;
+
+        case "null":
+          return null;
+
+        case "number":
+          return 0;
+
+        case "object":
+          return {};
+
+        default:
+          // We don't have a datatype for some reason (perhaps additionalProperties was true)
+          return "New Value";
+      }
+    }
+    /** Handles the adding of a new additional property on the given `schema`. Calls the `onChange` callback once the new
+     * default data for that field has been added to the formData.
+     *
+     * @param schema - The schema element to which the new property is being added
+     */
+
+
+    /** Renders the `ObjectField` from the given props
+     */
+    render() {
+      const {
+        schema: rawSchema,
+        uiSchema = {},
+        formData,
+        errorSchema,
+        idSchema,
+        name,
+        required = false,
+        disabled = false,
+        readonly = false,
+        hideError,
+        idPrefix,
+        idSeparator,
+        onBlur,
+        onFocus,
+        registry
+      } = this.props;
+      const {
+        fields,
+        formContext,
+        schemaUtils
+      } = registry;
+      const {
+        SchemaField
+      } = fields;
+      const schema = schemaUtils.retrieveSchema(rawSchema, formData);
+      const uiOptions = utils.getUiOptions(uiSchema);
+      const {
+        properties: schemaProperties = {}
+      } = schema;
+      const title = schema.title === undefined ? name : schema.title;
+      const description = uiOptions.description || schema.description;
+      let orderedProperties;
+
+      try {
+        const properties = Object.keys(schemaProperties);
+        orderedProperties = utils.orderProperties(properties, uiOptions.order);
+      } catch (err) {
+        return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
+          className: "config-error",
+          style: {
+            color: "red"
+          }
+        }, "Invalid ", name || "root", " object field configuration:", /*#__PURE__*/React__default["default"].createElement("em", null, err.message), "."), /*#__PURE__*/React__default["default"].createElement("pre", null, JSON.stringify(schema)));
+      }
+
+      const Template = utils.getTemplate("ObjectFieldTemplate", registry, uiOptions);
+      const templateProps = {
+        title: uiOptions.title || title,
+        description,
+        properties: orderedProperties.map(name => {
+          const addedByAdditionalProperties = has__default["default"](schema, [utils.PROPERTIES_KEY, name, utils.ADDITIONAL_PROPERTY_FLAG]);
+          const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
+          const hidden = utils.getUiOptions(fieldUiSchema).widget === "hidden";
+          const fieldIdSchema = get__default["default"](idSchema, [name], {});
+          return {
+            content: /*#__PURE__*/React__default["default"].createElement(SchemaField, {
+              key: name,
+              name: name,
+              required: this.isRequired(name),
+              schema: get__default["default"](schema, [utils.PROPERTIES_KEY, name], {}),
+              uiSchema: fieldUiSchema,
+              errorSchema: get__default["default"](errorSchema, name),
+              idSchema: fieldIdSchema,
+              idPrefix: idPrefix,
+              idSeparator: idSeparator,
+              formData: get__default["default"](formData, name),
+              formContext: formContext,
+              wasPropertyKeyModified: this.state.wasPropertyKeyModified,
+              onKeyChange: this.onKeyChange(name),
+              onChange: this.onPropertyChange(name, addedByAdditionalProperties),
+              onBlur: onBlur,
+              onFocus: onFocus,
+              registry: registry,
+              disabled: disabled,
+              readonly: readonly,
+              hideError: hideError,
+              onDropPropertyClick: this.onDropPropertyClick
+            }),
+            name,
+            readonly,
+            disabled,
+            required,
+            hidden
+          };
+        }),
+        readonly,
+        disabled,
+        required,
+        idSchema,
+        uiSchema,
+        schema,
+        formData,
+        formContext,
+        registry
+      };
+      return /*#__PURE__*/React__default["default"].createElement(Template, { ...templateProps,
+        onAddClick: this.handleAddClick
+      });
+    }
+
+  }
+
+  /** The map of component type to FieldName */
+
+  const COMPONENT_TYPES = {
+    array: "ArrayField",
+    boolean: "BooleanField",
+    integer: "NumberField",
+    number: "NumberField",
+    object: "ObjectField",
+    string: "StringField",
+    null: "NullField"
+  };
+  /** Computes and returns which `Field` implementation to return in order to render the field represented by the
+   * `schema`. The `uiOptions` are used to alter what potential `Field` implementation is actually returned. If no
+   * appropriate `Field` implementation can be found then a wrapper around `UnsupportedFieldTemplate` is used.
+   *
+   * @param schema - The schema from which to obtain the type
+   * @param uiOptions - The UI Options that may affect the component decision
+   * @param idSchema - The id that is passed to the `UnsupportedFieldTemplate`
+   * @param registry - The registry from which fields and templates are obtained
+   * @returns - The `Field` component that is used to render the actual field data
+   */
+
+  function getFieldComponent(schema, uiOptions, idSchema, registry) {
+    const field = uiOptions.field;
+    const {
+      fields
+    } = registry;
+
+    if (typeof field === "function") {
+      return field;
+    }
+
+    if (typeof field === "string" && field in fields) {
+      return fields[field];
+    }
+
+    const schemaType = utils.getSchemaType(schema);
+    const type = Array.isArray(schemaType) ? schemaType[0] : schemaType || "";
+    const componentName = COMPONENT_TYPES[type]; // If the type is not defined and the schema uses 'anyOf' or 'oneOf', don't
+    // render a field and let the MultiSchemaField component handle the form display
+
+    if (!componentName && (schema.anyOf || schema.oneOf)) {
+      return () => null;
+    }
+
+    return componentName in fields ? fields[componentName] : () => {
+      const UnsupportedFieldTemplate = utils.getTemplate("UnsupportedFieldTemplate", registry, uiOptions);
+      return /*#__PURE__*/React__default["default"].createElement(UnsupportedFieldTemplate, {
+        schema: schema,
+        idSchema: idSchema,
+        reason: "Unknown field type " + schema.type,
+        registry: registry
+      });
+    };
+  }
+  /** The `Help` component renders any help desired for a field
+   *
+   * @param props - The id and help information to be rendered
+   */
+
+
+  function Help(props) {
+    const {
+      id,
+      help
+    } = props;
+
+    if (!help) {
+      return null;
+    }
+
+    if (typeof help === "string") {
+      return /*#__PURE__*/React__default["default"].createElement("p", {
+        id: id,
+        className: "help-block"
+      }, help);
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      id: id,
+      className: "help-block"
+    }, help);
+  }
+  /** The `ErrorList` component renders the errors local to the particular field
+   *
+   * @param props - The list of errors to show
+   */
+
+
+  function ErrorList$1(props) {
+    const {
+      errors = []
+    } = props;
+
+    if (errors.length === 0) {
+      return null;
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("ul", {
+      className: "error-detail bs-callout bs-callout-info"
+    }, errors.filter(elem => !!elem).map((error, index) => {
+      return /*#__PURE__*/React__default["default"].createElement("li", {
+        className: "text-danger",
+        key: index
+      }, error);
+    })));
+  }
+  /** The `SchemaFieldRender` component is the work-horse of react-jsonschema-form, determining what kind of real field to
+   * render based on the `schema`, `uiSchema` and all the other props. It also deals with rendering the `anyOf` and
+   * `oneOf` fields.
+   *
+   * @param props - The `FieldProps` for this component
+   */
+
+
+  function SchemaFieldRender(props) {
+    const {
+      schema: _schema,
+      idSchema: _idSchema,
+      uiSchema,
+      formData,
+      errorSchema,
+      idPrefix,
+      idSeparator,
+      name,
+      onChange,
+      onKeyChange,
+      onDropPropertyClick,
+      required,
+      registry,
+      wasPropertyKeyModified = false
+    } = props;
+    const {
+      formContext,
+      schemaUtils
+    } = registry;
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const FieldTemplate = utils.getTemplate("FieldTemplate", registry, uiOptions);
+    const DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, uiOptions);
+    const schema = schemaUtils.retrieveSchema(_schema, formData);
+    const idSchema = utils.mergeObjects(schemaUtils.toIdSchema(schema, _idSchema.$id, formData, idPrefix, idSeparator), _idSchema);
+    const FieldComponent = getFieldComponent(schema, uiOptions, idSchema, registry);
+    const disabled = Boolean(props.disabled || uiOptions.disabled);
+    const readonly = Boolean(props.readonly || uiOptions.readonly || props.schema.readOnly || schema.readOnly);
+    const uiSchemaHideError = uiOptions.hideError; // Set hideError to the value provided in the uiSchema, otherwise stick with the prop to propagate to children
+
+    const hideError = uiSchemaHideError === undefined ? props.hideError : Boolean(uiSchemaHideError);
+    const autofocus = Boolean(props.autofocus || uiOptions.autofocus);
+
+    if (Object.keys(schema).length === 0) {
+      return null;
+    }
+
+    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
+    const {
+      __errors,
+      ...fieldErrorSchema
+    } = errorSchema || {}; // See #439: uiSchema: Don't pass consumed class names to child components
+
+    const fieldUiSchema = omit__default["default"](uiSchema, ["ui:classNames", "classNames"]);
+
+    if ("ui:options" in fieldUiSchema) {
+      fieldUiSchema["ui:options"] = omit__default["default"](fieldUiSchema["ui:options"], ["classNames"]);
+    }
+
+    const field = /*#__PURE__*/React__default["default"].createElement(FieldComponent, { ...props,
+      idSchema: idSchema,
+      schema: schema,
+      uiSchema: fieldUiSchema,
+      disabled: disabled,
+      readonly: readonly,
+      hideError: hideError,
+      autofocus: autofocus,
+      errorSchema: fieldErrorSchema,
+      formContext: formContext,
+      rawErrors: __errors
+    });
+    const id = idSchema[utils.ID_KEY]; // If this schema has a title defined, but the user has set a new key/label, retain their input.
+
+    let label;
+
+    if (wasPropertyKeyModified) {
+      label = name;
+    } else {
+      label = uiOptions.title || props.schema.title || schema.title || name;
+    }
+
+    const description = uiOptions.description || props.schema.description || schema.description || "";
+    const errors = __errors;
+    const help = uiOptions.help;
+    const hidden = uiOptions.widget === "hidden";
+    const classNames = ["form-group", "field", "field-" + schema.type];
+
+    if (!hideError && errors && errors.length > 0) {
+      classNames.push("field-error has-error has-danger");
+    }
+
+    if (uiSchema !== null && uiSchema !== void 0 && uiSchema.classNames) {
+      {
+        console.warn("'uiSchema.classNames' is deprecated and may be removed in a major release; Use 'ui:classNames' instead.");
+      }
+
+      classNames.push(uiSchema.classNames);
+    }
+
+    if (uiOptions.classNames) {
+      classNames.push(uiOptions.classNames);
+    }
+
+    const fieldProps = {
+      description: /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
+        id: id + "__description",
+        description: description,
+        registry: registry
+      }),
+      rawDescription: description,
+      help: /*#__PURE__*/React__default["default"].createElement(Help, {
+        id: id + "__help",
+        help: help
+      }),
+      rawHelp: typeof help === "string" ? help : undefined,
+      errors: hideError ? undefined : /*#__PURE__*/React__default["default"].createElement(ErrorList$1, {
+        errors: errors
+      }),
+      rawErrors: hideError ? undefined : errors,
+      id,
+      label,
+      hidden,
+      onChange,
+      onKeyChange,
+      onDropPropertyClick,
+      required,
+      disabled,
+      readonly,
+      hideError,
+      displayLabel,
+      classNames: classNames.join(" ").trim(),
+      formContext,
+      formData,
+      schema,
+      uiSchema,
+      registry
+    };
+    const _AnyOfField = registry.fields.AnyOfField;
+    const _OneOfField = registry.fields.OneOfField;
+    return /*#__PURE__*/React__default["default"].createElement(FieldTemplate, { ...fieldProps
+    }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, field, schema.anyOf && !(uiSchema !== null && uiSchema !== void 0 && uiSchema["ui:field"]) && !schemaUtils.isSelect(schema) && /*#__PURE__*/React__default["default"].createElement(_AnyOfField, {
+      name: name,
+      disabled: disabled,
+      readonly: readonly,
+      hideError: hideError,
+      errorSchema: errorSchema,
+      formData: formData,
+      formContext: formContext,
+      idPrefix: idPrefix,
+      idSchema: idSchema,
+      idSeparator: idSeparator,
+      onBlur: props.onBlur,
+      onChange: props.onChange,
+      onFocus: props.onFocus,
+      options: schema.anyOf.map(_schema => schemaUtils.retrieveSchema(isObject__default["default"](_schema) ? _schema : {}, formData)),
+      baseType: schema.type,
+      registry: registry,
+      schema: schema,
+      uiSchema: uiSchema
+    }), schema.oneOf && !(uiSchema !== null && uiSchema !== void 0 && uiSchema["ui:field"]) && !schemaUtils.isSelect(schema) && /*#__PURE__*/React__default["default"].createElement(_OneOfField, {
+      name: name,
+      disabled: disabled,
+      readonly: readonly,
+      hideError: hideError,
+      errorSchema: errorSchema,
+      formData: formData,
+      formContext: formContext,
+      idPrefix: idPrefix,
+      idSchema: idSchema,
+      idSeparator: idSeparator,
+      onBlur: props.onBlur,
+      onChange: props.onChange,
+      onFocus: props.onFocus,
+      options: schema.oneOf.map(_schema => schemaUtils.retrieveSchema(isObject__default["default"](_schema) ? _schema : {}, formData)),
+      baseType: schema.type,
+      registry: registry,
+      schema: schema,
+      uiSchema: uiSchema
+    })));
+  }
+  /** The `SchemaField` component determines whether it is necessary to rerender the component based on any props changes
+   * and if so, calls the `SchemaFieldRender` component with the props.
+   */
+
+
+  class SchemaField extends React__default["default"].Component {
+    shouldComponentUpdate(nextProps) {
+      return !utils.deepEquals(this.props, nextProps);
+    }
+
+    render() {
+      return /*#__PURE__*/React__default["default"].createElement(SchemaFieldRender, { ...this.props
+      });
+    }
+
+  }
+
+  /** The `StringField` component is used to render a schema field that represents a string type
+   *
+   * @param props - The `FieldProps` for this template
+   */
+
+  function StringField(props) {
+    const {
+      schema,
+      name,
+      uiSchema,
+      idSchema,
+      formData,
+      required,
+      disabled = false,
+      readonly = false,
+      autofocus = false,
+      onChange,
+      onBlur,
+      onFocus,
+      registry,
+      rawErrors
+    } = props;
+    const {
+      title,
+      format
+    } = schema;
+    const {
+      widgets,
+      formContext,
+      schemaUtils
+    } = registry;
+    const enumOptions = schemaUtils.isSelect(schema) ? utils.optionsList(schema) : undefined;
+    let defaultWidget = enumOptions ? "select" : "text";
+
+    if (format && utils.hasWidget(schema, format, widgets)) {
+      defaultWidget = format;
+    }
+
+    const {
+      widget = defaultWidget,
+      placeholder = "",
+      ...options
+    } = utils.getUiOptions(uiSchema);
+    const Widget = utils.getWidget(schema, widget, widgets);
+    return /*#__PURE__*/React__default["default"].createElement(Widget, {
+      options: { ...options,
+        enumOptions
+      },
+      schema: schema,
+      uiSchema: uiSchema,
+      id: idSchema && idSchema.$id,
+      label: title === undefined ? name : title,
+      value: formData,
+      onChange: onChange,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      required: required,
+      disabled: disabled,
+      readonly: readonly,
+      formContext: formContext,
+      autofocus: autofocus,
+      registry: registry,
+      placeholder: placeholder,
+      rawErrors: rawErrors
+    });
+  }
+
+  /** The `NullField` component is used to render a field in the schema is null. It also ensures that the `formData` is
+   * also set to null if it has no value.
+   *
+   * @param props - The `FieldProps` for this template
+   */
+
+  function NullField(props) {
+    const {
+      formData,
+      onChange
+    } = props;
+    React.useEffect(() => {
+      if (formData === undefined) {
+        onChange(null);
+      }
+    }, [formData, onChange]);
+    return null;
+  }
+
+  const fields = {
+    AnyOfField: AnyOfField,
+    ArrayField,
+    BooleanField,
+    NumberField,
+    ObjectField,
+    OneOfField: AnyOfField,
+    SchemaField,
+    StringField,
+    NullField
+  };
+
+  /** The `ArrayFieldDescriptionTemplate` component renders a `DescriptionFieldTemplate` with an `id` derived from
+   * the `idSchema`.
+   *
+   * @param props - The `ArrayFieldDescriptionProps` for the component
+   */
+
+  function ArrayFieldDescriptionTemplate(props) {
+    const {
+      idSchema,
+      description,
+      registry,
+      uiSchema
+    } = props;
+
+    if (!description) {
+      return null;
+    }
+
+    const options = utils.getUiOptions(uiSchema);
+    const DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, options);
+    const id = idSchema.$id + "__description";
+    return /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
+      id: id,
+      description: description,
+      registry: registry
+    });
+  }
+
+  /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
+   *
+   * @param props - The `ArrayFieldTemplateItemType` props for the component
+   */
+
+  function ArrayFieldItemTemplate(props) {
+    const {
+      children,
+      className,
+      disabled,
+      hasToolbar,
+      hasMoveDown,
+      hasMoveUp,
+      hasRemove,
+      index,
+      onDropIndexClick,
+      onReorderClick,
+      readonly,
+      registry
+    } = props;
+    const {
+      MoveDownButton,
+      MoveUpButton,
+      RemoveButton
+    } = registry.templates.ButtonTemplates;
+    const btnStyle = {
+      flex: 1,
+      paddingLeft: 6,
+      paddingRight: 6,
+      fontWeight: "bold"
+    };
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: className
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: hasToolbar ? "col-xs-9" : "col-xs-12"
+    }, children), hasToolbar && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "col-xs-3 array-item-toolbox"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "btn-group",
+      style: {
+        display: "flex",
+        justifyContent: "space-around"
+      }
+    }, (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveUpButton, {
+      style: btnStyle,
+      disabled: disabled || readonly || !hasMoveUp,
+      onClick: onReorderClick(index, index - 1)
+    }), (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveDownButton, {
+      style: btnStyle,
+      disabled: disabled || readonly || !hasMoveDown,
+      onClick: onReorderClick(index, index + 1)
+    }), hasRemove && /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
+      style: btnStyle,
+      disabled: disabled || readonly,
+      onClick: onDropIndexClick(index)
+    }))));
+  }
+
+  /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+   *
+   * @param props - The `ArrayFieldTemplateItemType` props for the component
+   */
+
+  function ArrayFieldTemplate(props) {
+    const {
+      canAdd,
+      className,
+      disabled,
+      idSchema,
+      uiSchema,
+      items,
+      onAddClick,
+      readonly,
+      registry,
+      required,
+      schema,
+      title
+    } = props;
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const ArrayFieldDescriptionTemplate = utils.getTemplate("ArrayFieldDescriptionTemplate", registry, uiOptions);
+    const ArrayFieldItemTemplate = utils.getTemplate("ArrayFieldItemTemplate", registry, uiOptions);
+    const ArrayFieldTitleTemplate = utils.getTemplate("ArrayFieldTitleTemplate", registry, uiOptions); // Button templates are not overridden in the uiSchema
+
+    const {
+      ButtonTemplates: {
+        AddButton
+      }
+    } = registry.templates;
+    return /*#__PURE__*/React__default["default"].createElement("fieldset", {
+      className: className,
+      id: idSchema.$id
+    }, /*#__PURE__*/React__default["default"].createElement(ArrayFieldTitleTemplate, {
+      idSchema: idSchema,
+      title: uiOptions.title || title,
+      required: required,
+      uiSchema: uiSchema,
+      registry: registry
+    }), (uiOptions.description || schema.description) && /*#__PURE__*/React__default["default"].createElement(ArrayFieldDescriptionTemplate, {
+      idSchema: idSchema,
+      description: uiOptions.description || schema.description,
+      uiSchema: uiSchema,
+      registry: registry
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "row array-item-list"
+    }, items && items.map(_ref => {
+      let {
+        key,
+        ...itemProps
+      } = _ref;
+      return /*#__PURE__*/React__default["default"].createElement(ArrayFieldItemTemplate, {
+        key: key,
+        ...itemProps
+      });
+    })), canAdd && /*#__PURE__*/React__default["default"].createElement(AddButton, {
+      className: "array-item-add",
+      onClick: onAddClick,
+      disabled: disabled || readonly
+    }));
+  }
+
+  /** The `ArrayFieldTitleTemplate` component renders a `TitleFieldTemplate` with an `id` derived from
+   * the `idSchema`.
+   *
+   * @param props - The `ArrayFieldTitleProps` for the component
+   */
+
+  function ArrayFieldTitleTemplate(props) {
+    const {
+      idSchema,
+      title,
+      uiSchema,
+      required,
+      registry
+    } = props;
+
+    if (!title) {
+      return null;
+    }
+
+    const options = utils.getUiOptions(uiSchema);
+    const TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, options);
+    const id = idSchema.$id + "__title";
+    return /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
+      id: id,
+      title: title,
+      required: required,
+      uiSchema: uiSchema,
+      registry: registry
+    });
+  }
+
+  /** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
+   * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
+   * It can be customized/overridden for other themes or individual implementations as needed.
+   *
+   * @param props - The `WidgetProps` for this template
+   */
+
+  function BaseInputTemplate(props) {
+    const {
+      id,
+      value,
+      readonly,
+      disabled,
+      autofocus,
+      onBlur,
+      onFocus,
+      onChange,
+      options,
+      schema,
+      uiSchema,
+      formContext,
+      registry,
+      rawErrors,
+      type,
+      ...rest
+    } = props; // Note: since React 15.2.0 we can't forward unknown element attributes, so we
+    // exclude the "options" and "schema" ones here.
+
+    if (!id) {
+      console.log("No id for", props);
+      throw new Error("no id for props " + JSON.stringify(props));
+    }
+
+    const inputProps = { ...rest,
+      ...utils.getInputProps(schema, type, options)
+    };
+    let inputValue;
+
+    if (inputProps.type === "number" || inputProps.type === "integer") {
+      inputValue = value || value === 0 ? value : "";
+    } else {
+      inputValue = value == null ? "" : value;
+    }
+
+    const _onChange = React.useCallback(_ref => {
+      let {
+        target: {
+          value
+        }
+      } = _ref;
+      return onChange(value === "" ? options.emptyValue : value);
+    }, [onChange, options]);
+
+    const _onBlur = React.useCallback(_ref2 => {
+      let {
+        target: {
+          value
+        }
+      } = _ref2;
+      return onBlur(id, value);
+    }, [onBlur, id]);
+
+    const _onFocus = React.useCallback(_ref3 => {
+      let {
+        target: {
+          value
+        }
+      } = _ref3;
+      return onFocus(id, value);
+    }, [onFocus, id]);
+
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", {
+      key: id,
+      id: id,
+      className: "form-control",
+      readOnly: readonly,
+      disabled: disabled,
+      autoFocus: autofocus,
+      value: inputValue,
+      ...inputProps,
+      list: schema.examples ? "examples_" + id : undefined,
+      onChange: _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus
+    }), Array.isArray(schema.examples) && /*#__PURE__*/React__default["default"].createElement("datalist", {
+      key: "datalist_" + id,
+      id: "examples_" + id
+    }, [...new Set(schema.examples.concat(schema.default ? [schema.default] : []))].map(example => /*#__PURE__*/React__default["default"].createElement("option", {
+      key: example,
+      value: example
+    }))));
+  }
+
+  /** The `SubmitButton` renders a button that represent the `Submit` action on a form
+   */
+
+  function SubmitButton(_ref) {
+    let {
+      uiSchema
+    } = _ref;
+    const {
+      submitText,
+      norender,
+      props: submitButtonProps = {}
+    } = utils.getSubmitButtonOptions(uiSchema);
+
+    if (norender) {
+      return null;
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("button", {
+      type: "submit",
+      ...submitButtonProps,
+      className: "btn btn-info " + submitButtonProps.className
+    }, submitText));
+  }
+
+  function IconButton(props) {
+    const {
+      iconType = "default",
+      icon,
+      className,
+      ...otherProps
+    } = props;
+    return /*#__PURE__*/React__default["default"].createElement("button", {
+      type: "button",
+      className: "btn btn-" + iconType + " " + className,
+      ...otherProps
+    }, /*#__PURE__*/React__default["default"].createElement("i", {
+      className: "glyphicon glyphicon-" + icon
+    }));
+  }
+  function MoveDownButton(props) {
+    return /*#__PURE__*/React__default["default"].createElement(IconButton, {
+      title: "Move down",
+      className: "array-item-move-down",
+      ...props,
+      icon: "arrow-down"
+    });
+  }
+  function MoveUpButton(props) {
+    return /*#__PURE__*/React__default["default"].createElement(IconButton, {
+      title: "Move up",
+      className: "array-item-move-up",
+      ...props,
+      icon: "arrow-up"
+    });
+  }
+  function RemoveButton(props) {
+    return /*#__PURE__*/React__default["default"].createElement(IconButton, {
+      title: "Remove",
+      className: "array-item-remove",
+      ...props,
+      iconType: "danger",
+      icon: "remove"
+    });
+  }
+
+  /** The `AddButton` renders a button that represent the `Add` action on a form
+   */
+
+  function AddButton(_ref) {
+    let {
+      className,
+      onClick,
+      disabled
+    } = _ref;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "row"
+    }, /*#__PURE__*/React__default["default"].createElement("p", {
+      className: "col-xs-3 col-xs-offset-9 text-right " + className
+    }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
+      iconType: "info",
+      icon: "plus",
+      className: "btn-add col-xs-12",
+      title: "Add",
+      onClick: onClick,
+      disabled: disabled
+    })));
+  }
+
+  const buttonTemplates = {
+    SubmitButton,
+    AddButton,
+    MoveDownButton,
+    MoveUpButton,
+    RemoveButton
+  };
+
+  /** The `DescriptionField` is the template to use to render the description of a field
+   *
+   * @param props - The `DescriptionFieldProps` for this component
+   */
+
+  function DescriptionField(props) {
+    const {
+      id,
+      description
+    } = props;
+
+    if (!description) {
+      return null;
+    }
+
+    if (typeof description === "string") {
+      return /*#__PURE__*/React__default["default"].createElement("p", {
+        id: id,
+        className: "field-description"
+      }, description);
+    } else {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        id: id,
+        className: "field-description"
+      }, description);
+    }
+  }
+
+  /** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
+   *
+   * @param props - The `ErrorListProps` for this component
+   */
+
+  function ErrorList(_ref) {
+    let {
+      errors
+    } = _ref;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "panel panel-danger errors"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "panel-heading"
+    }, /*#__PURE__*/React__default["default"].createElement("h3", {
+      className: "panel-title"
+    }, "Errors")), /*#__PURE__*/React__default["default"].createElement("ul", {
+      className: "list-group"
+    }, errors.map((error, i) => {
+      return /*#__PURE__*/React__default["default"].createElement("li", {
+        key: i,
+        className: "list-group-item text-danger"
+      }, error.stack);
+    })));
+  }
+
+  const REQUIRED_FIELD_SYMBOL$1 = "*";
+  /** Renders a label for a field
+   *
+   * @param props - The `LabelProps` for this component
+   */
+
+  function Label(props) {
+    const {
+      label,
+      required,
+      id
+    } = props;
+
+    if (!label) {
+      return null;
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement("label", {
+      className: "control-label",
+      htmlFor: id
+    }, label, required && /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "required"
+    }, REQUIRED_FIELD_SYMBOL$1));
+  }
+
+  /** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
+   * part of an `additionalProperties` part of a schema.
+   *
+   * @param props - The `WrapIfAdditionalProps` for this component
+   */
+
+  function WrapIfAdditional(props) {
+    const {
+      id,
+      classNames,
+      disabled,
+      label,
+      onKeyChange,
+      onDropPropertyClick,
+      readonly,
+      required,
+      schema,
+      children,
+      registry
+    } = props;
+    const {
+      RemoveButton
+    } = registry.templates.ButtonTemplates;
+    const keyLabel = label + " Key"; // i18n ?
+
+    const additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
+
+    if (!additional) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: classNames
+      }, children);
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classNames
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "row"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "col-xs-5 form-additional"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "form-group"
+    }, /*#__PURE__*/React__default["default"].createElement(Label, {
+      label: keyLabel,
+      required: required,
+      id: id + "-key"
+    }), /*#__PURE__*/React__default["default"].createElement("input", {
+      className: "form-control",
+      type: "text",
+      id: id + "-key",
+      onBlur: event => onKeyChange(event.target.value),
+      defaultValue: label
+    }))), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "form-additional form-group col-xs-5"
+    }, children), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "col-xs-2"
+    }, /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
+      className: "array-item-remove btn-block",
+      style: {
+        border: "0"
+      },
+      disabled: disabled || readonly,
+      onClick: onDropPropertyClick(label)
+    }))));
+  }
+
+  /** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
+   * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
+   *
+   * @param props - The `FieldTemplateProps` for this component
+   */
+
+  function FieldTemplate(props) {
+    const {
+      id,
+      label,
+      children,
+      errors,
+      help,
+      description,
+      hidden,
+      required,
+      displayLabel
+    } = props;
+
+    if (hidden) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "hidden"
+      }, children);
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditional, { ...props
+    }, displayLabel && /*#__PURE__*/React__default["default"].createElement(Label, {
+      label: label,
+      required: required,
+      id: id
+    }), displayLabel && description ? description : null, children, errors, help);
+  }
+
+  /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
+   * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
+   * the properties.
+   *
+   * @param props - The `ObjectFieldTemplateProps` for this component
+   */
+
+  function ObjectFieldTemplate(props) {
+    const {
+      description,
+      disabled,
+      formData,
+      idSchema,
+      onAddClick,
+      properties,
+      readonly,
+      registry,
+      required,
+      schema,
+      title,
+      uiSchema
+    } = props;
+    const options = utils.getUiOptions(uiSchema);
+    const TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, options);
+    const DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, options); // Button templates are not overridden in the uiSchema
+
+    const {
+      ButtonTemplates: {
+        AddButton
+      }
+    } = registry.templates;
+    return /*#__PURE__*/React__default["default"].createElement("fieldset", {
+      id: idSchema.$id
+    }, (options.title || title) && /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
+      id: idSchema.$id + "__title",
+      title: options.title || title,
+      required: required,
+      uiSchema: uiSchema,
+      registry: registry
+    }), (options.description || description) && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
+      id: idSchema.$id + "__description",
+      description: options.description || description,
+      registry: registry
+    }), properties.map(prop => prop.content), utils.canExpand(schema, uiSchema, formData) && /*#__PURE__*/React__default["default"].createElement(AddButton, {
+      className: "object-property-expand",
+      onClick: onAddClick(schema),
+      disabled: disabled || readonly
+    }));
+  }
+
+  const REQUIRED_FIELD_SYMBOL = "*";
+  /** The `TitleField` is the template to use to render the title of a field
+   *
+   * @param props - The `TitleFieldProps` for this component
+   */
+
+  function TitleField(props) {
+    const {
+      id,
+      title,
+      required
+    } = props;
+    return /*#__PURE__*/React__default["default"].createElement("legend", {
+      id: id
+    }, title, required && /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "required"
+    }, REQUIRED_FIELD_SYMBOL));
+  }
+
+  /** The `UnsupportedField` component is used to render a field in the schema is one that is not supported by
+   * react-jsonschema-form.
+   *
+   * @param props - The `FieldProps` for this template
+   */
+
+  function UnsupportedField(props) {
+    const {
+      schema,
+      idSchema,
+      reason
+    } = props;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "unsupported-field"
+    }, /*#__PURE__*/React__default["default"].createElement("p", null, "Unsupported field schema", idSchema && idSchema.$id && /*#__PURE__*/React__default["default"].createElement("span", null, " for", " field ", /*#__PURE__*/React__default["default"].createElement("code", null, idSchema.$id)), reason && /*#__PURE__*/React__default["default"].createElement("em", null, ": ", reason), "."), schema && /*#__PURE__*/React__default["default"].createElement("pre", null, JSON.stringify(schema, null, 2)));
+  }
+
+  const templates = {
+    ArrayFieldDescriptionTemplate,
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    ArrayFieldTitleTemplate,
+    ButtonTemplates: buttonTemplates,
+    BaseInputTemplate,
+    DescriptionFieldTemplate: DescriptionField,
+    ErrorListTemplate: ErrorList,
+    FieldTemplate,
+    ObjectFieldTemplate,
+    TitleFieldTemplate: TitleField,
+    UnsupportedFieldTemplate: UnsupportedField
+  };
+
+  function rangeOptions(start, stop) {
+    const options = [];
+
+    for (let i = start; i <= stop; i++) {
+      options.push({
+        value: i,
+        label: utils.pad(i, 2)
+      });
+    }
+
+    return options;
+  }
+
+  function readyForChange(state) {
+    return Object.values(state).every(value => value !== -1);
+  }
+
+  function dateElementProps(state, time, yearsRange) {
+    if (yearsRange === void 0) {
+      yearsRange = [1900, new Date().getFullYear() + 2];
+    }
+
+    const {
+      year,
+      month,
+      day,
+      hour,
+      minute,
+      second
+    } = state;
+    const data = [{
+      type: "year",
+      range: yearsRange,
+      value: year
+    }, {
+      type: "month",
+      range: [1, 12],
+      value: month
+    }, {
+      type: "day",
+      range: [1, 31],
+      value: day
+    }];
+
+    if (time) {
+      data.push({
+        type: "hour",
+        range: [0, 23],
+        value: hour
+      }, {
+        type: "minute",
+        range: [0, 59],
+        value: minute
+      }, {
+        type: "second",
+        range: [0, 59],
+        value: second
+      });
+    }
+
+    return data;
+  }
+
+  function DateElement(_ref) {
+    let {
+      type,
+      range,
+      value,
+      select,
+      rootId,
+      disabled,
+      readonly,
+      autofocus,
+      registry,
+      onBlur,
+      onFocus
+    } = _ref;
+    const id = rootId + "_" + type;
+    const {
+      SelectWidget
+    } = registry.widgets;
+    return /*#__PURE__*/React__default["default"].createElement(SelectWidget, {
+      schema: {
+        type: "integer"
+      },
+      id: id,
+      className: "form-control",
+      options: {
+        enumOptions: rangeOptions(range[0], range[1])
+      },
+      placeholder: type,
+      value: value,
+      disabled: disabled,
+      readonly: readonly,
+      autofocus: autofocus,
+      onChange: value => select(type, value),
+      onBlur: onBlur,
+      onFocus: onFocus,
+      registry: registry,
+      label: ""
+    });
+  }
+  /** The `AltDateWidget` is an alternative widget for rendering date properties.
+   * @param props - The `WidgetProps` for this component
+   */
+
+
+  function AltDateWidget(_ref2) {
+    let {
+      time = false,
+      disabled = false,
+      readonly = false,
+      autofocus = false,
+      options,
+      id,
+      registry,
+      onBlur,
+      onFocus,
+      onChange,
+      value
+    } = _ref2;
+    const [state, setState] = React.useReducer((state, action) => {
+      return { ...state,
+        ...action
+      };
+    }, utils.parseDateString(value, time));
+    React.useEffect(() => {
+      if (value && value !== utils.toDateString(state, time)) {
+        setState(utils.parseDateString(value, time));
+      }
+    }, [value, state, time]);
+    React.useEffect(() => {
+      if (readyForChange(state)) {
+        // Only propagate to parent state if we have a complete date{time}
+        onChange(utils.toDateString(state, time));
+      }
+    }, [state, time, onChange]);
+    const handleChange = React.useCallback((property, value) => {
+      setState({
+        [property]: value
+      });
+    }, []);
+    const handleSetNow = React.useCallback(event => {
+      event.preventDefault();
+
+      if (disabled || readonly) {
+        return;
+      }
+
+      const nowDateObj = utils.parseDateString(new Date().toJSON(), time);
+      setState(nowDateObj);
+    }, [disabled, readonly, time]);
+    const handleClear = React.useCallback(event => {
+      event.preventDefault();
+
+      if (disabled || readonly) {
+        return;
+      }
+
+      setState(utils.parseDateString("", time));
+      onChange(undefined);
+    }, [disabled, readonly, time, onChange]);
+    return /*#__PURE__*/React__default["default"].createElement("ul", {
+      className: "list-inline"
+    }, dateElementProps(state, time, options.yearsRange).map((elemProps, i) => /*#__PURE__*/React__default["default"].createElement("li", {
+      key: i
+    }, /*#__PURE__*/React__default["default"].createElement(DateElement, {
+      rootId: id,
+      select: handleChange,
+      ...elemProps,
+      disabled: disabled,
+      readonly: readonly,
+      registry: registry,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      autofocus: autofocus && i === 0
+    }))), (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement("a", {
+      href: "#",
+      className: "btn btn-info btn-now",
+      onClick: handleSetNow
+    }, "Now")), (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement("a", {
+      href: "#",
+      className: "btn btn-warning btn-clear",
+      onClick: handleClear
+    }, "Clear")));
+  }
+
+  /** The `AltDateTimeWidget` is an alternative widget for rendering datetime properties.
+   *  It uses the AltDateWidget for rendering, with the `time` prop set to true by default.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+
+  function AltDateTimeWidget(_ref) {
+    let {
+      time = true,
+      ...props
+    } = _ref;
+    const {
+      AltDateWidget
+    } = props.registry.widgets;
+    return /*#__PURE__*/React__default["default"].createElement(AltDateWidget, {
+      time: time,
+      ...props
+    });
+  }
+
+  /** The `CheckBoxWidget` is a widget for rendering boolean properties.
+   *  It is typically used to represent a boolean.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+
+  function CheckboxWidget(_ref) {
+    let {
+      schema,
+      options,
+      id,
+      value,
+      disabled,
+      readonly,
+      label,
+      autofocus = false,
+      onBlur,
+      onFocus,
+      onChange,
+      registry
+    } = _ref;
+    const DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, options); // Because an unchecked checkbox will cause html5 validation to fail, only add
+    // the "required" attribute if the field value must be "true", due to the
+    // "const" or "enum" keywords
+
+    const required = utils.schemaRequiresTrueValue(schema);
+    const handleChange = React.useCallback(event => onChange(event.target.checked), [onChange]);
+    const handleBlur = React.useCallback(event => onBlur(id, event.target.checked), [onBlur, id]);
+    const handleFocus = React.useCallback(event => onFocus(id, event.target.checked), [onFocus, id]);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "checkbox " + (disabled || readonly ? "disabled" : "")
+    }, schema.description && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
+      id: id + "__description",
+      description: schema.description,
+      registry: registry
+    }), /*#__PURE__*/React__default["default"].createElement("label", null, /*#__PURE__*/React__default["default"].createElement("input", {
+      type: "checkbox",
+      id: id,
+      checked: typeof value === "undefined" ? false : value,
+      required: required,
+      disabled: disabled || readonly,
+      autoFocus: autofocus,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      onFocus: handleFocus
+    }), /*#__PURE__*/React__default["default"].createElement("span", null, label)));
+  }
+
+  function selectValue(value, selected, all) {
+    const at = all.indexOf(value);
+    const updated = selected.slice(0, at).concat(value, selected.slice(at)); // As inserting values at predefined index positions doesn't work with empty
+    // arrays, we need to reorder the updated selection to match the initial order
+
+    return updated.sort((a, b) => Number(all.indexOf(a) > all.indexOf(b)));
+  }
+
+  function deselectValue(value, selected) {
+    return selected.filter(v => v !== value);
+  }
+  /** The `CheckboxesWidget` is a widget for rendering checkbox groups.
+   *  It is typically used to represent an array of enums.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+
+
+  function CheckboxesWidget(_ref) {
+    let {
+      id,
+      disabled,
+      options: {
+        inline = false,
+        enumOptions,
+        enumDisabled
+      },
+      value,
+      autofocus = false,
+      readonly,
+      onChange
+    } = _ref;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "checkboxes",
+      id: id
+    }, Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+      const checked = value.indexOf(option.value) !== -1;
+      const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) != -1;
+      const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
+
+      const handleChange = event => {
+        const all = enumOptions.map(_ref2 => {
+          let {
+            value
+          } = _ref2;
+          return value;
+        });
+
+        if (event.target.checked) {
+          onChange(selectValue(option.value, value, all));
+        } else {
+          onChange(deselectValue(option.value, value));
+        }
+      };
+
+      const checkbox = /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement("input", {
+        type: "checkbox",
+        id: id + "_" + index,
+        checked: checked,
+        disabled: disabled || itemDisabled || readonly,
+        autoFocus: autofocus && index === 0,
+        onChange: handleChange
+      }), /*#__PURE__*/React__default["default"].createElement("span", null, option.label));
+      return inline ? /*#__PURE__*/React__default["default"].createElement("label", {
+        key: index,
+        className: "checkbox-inline " + disabledCls
+      }, checkbox) : /*#__PURE__*/React__default["default"].createElement("div", {
+        key: index,
+        className: "checkbox " + disabledCls
+      }, /*#__PURE__*/React__default["default"].createElement("label", null, checkbox));
+    }));
+  }
+
+  /** The `ColorWidget` component uses the `BaseInputTemplate` changing the type to `color` and disables it when it is
+   * either disabled or readonly.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+
+  function ColorWidget(props) {
+    const {
+      disabled,
+      readonly,
+      options,
+      registry
+    } = props;
+    const BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
+    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, {
+      type: "color",
+      ...props,
+      disabled: disabled || readonly
+    });
+  }
+
+  /** The `DateWidget` component uses the `BaseInputTemplate` changing the type to `date` and transforms
+   * the value to undefined when it is falsy during the `onChange` handling.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+
+  function DateWidget(props) {
+    const {
+      onChange,
+      options,
+      registry
+    } = props;
+    const BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
+    const handleChange = React.useCallback(value => onChange(value || undefined), [onChange]);
+    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, {
+      type: "date",
+      ...props,
+      onChange: handleChange
+    });
+  }
+
+  /** The `DateTimeWidget` component uses the `BaseInputTemplate` changing the type to `datetime-local` and transforms
+   * the value to/from utc using the appropriate utility functions.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+
+  function DateTimeWidget(props) {
+    const {
+      onChange,
+      value,
+      options,
+      registry
+    } = props;
+    const BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
+    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, {
+      type: "datetime-local",
+      ...props,
+      value: utils.utcToLocal(value),
+      onChange: value => onChange(utils.localToUTC(value))
+    });
+  }
+
+  /** The `EmailWidget` component uses the `BaseInputTemplate` changing the type to `email`.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+
+  function EmailWidget(props) {
+    const {
+      options,
+      registry
+    } = props;
+    const BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
+    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, {
+      type: "email",
+      ...props
+    });
+  }
+
+  function addNameToDataURL(dataURL, name) {
+    if (dataURL === null) {
+      return null;
+    }
+
+    return dataURL.replace(";base64", ";name=" + encodeURIComponent(name) + ";base64");
+  }
+
+  function processFile(file) {
+    const {
+      name,
+      size,
+      type
+    } = file;
+    return new Promise((resolve, reject) => {
+      const reader = new window.FileReader();
+      reader.onerror = reject;
+
+      reader.onload = event => {
+        var _event$target;
+
+        if (typeof ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result) === "string") {
+          resolve({
+            dataURL: addNameToDataURL(event.target.result, name),
+            name,
+            size,
+            type
+          });
+        } else {
+          resolve({
+            dataURL: null,
+            name,
+            size,
+            type
+          });
+        }
+      };
+
+      reader.readAsDataURL(file);
+    });
+  }
+
+  function processFiles(files) {
+    return Promise.all(Array.from(files).map(processFile));
+  }
+
+  function FilesInfo(_ref) {
+    let {
+      filesInfo
+    } = _ref;
+
+    if (filesInfo.length === 0) {
+      return null;
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement("ul", {
+      className: "file-info"
+    }, filesInfo.map((fileInfo, key) => {
+      const {
+        name,
+        size,
+        type
+      } = fileInfo;
+      return /*#__PURE__*/React__default["default"].createElement("li", {
+        key: key
+      }, /*#__PURE__*/React__default["default"].createElement("strong", null, name), " (", type, ", ", size, " bytes)");
+    }));
+  }
+
+  function extractFileInfo(dataURLs) {
+    return dataURLs.filter(dataURL => typeof dataURL !== "undefined").map(dataURL => {
+      const {
+        blob,
+        name
+      } = utils.dataURItoBlob(dataURL);
+      return {
+        name: name,
+        size: blob.size,
+        type: blob.type
+      };
+    });
+  }
+  /**
+   *  The `FileWidget` is a widget for rendering file upload fields.
+   *  It is typically used with a string property with data-url format.
+   */
+
+
+  function FileWidget(_ref2) {
+    let {
+      multiple,
+      id,
+      readonly,
+      disabled,
+      onChange,
+      value,
+      autofocus = false,
+      options
+    } = _ref2;
+    const extractedFilesInfo = React.useMemo(() => Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value]), [value]);
+    const [filesInfo, setFilesInfo] = React.useState(extractedFilesInfo);
+    const handleChange = React.useCallback(event => {
+      if (!event.target.files) {
+        return;
+      }
+
+      processFiles(event.target.files).then(filesInfoEvent => {
+        setFilesInfo(filesInfoEvent);
+        const newValue = filesInfoEvent.map(fileInfo => fileInfo.dataURL);
+
+        if (multiple) {
+          onChange(newValue);
+        } else {
+          onChange(newValue[0]);
+        }
+      });
+    }, [multiple, onChange]);
+    return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", null, /*#__PURE__*/React__default["default"].createElement("input", {
+      id: id,
+      type: "file",
+      disabled: readonly || disabled,
+      onChange: handleChange,
+      defaultValue: "",
+      autoFocus: autofocus,
+      multiple: multiple,
+      accept: options.accept ? String(options.accept) : undefined
+    })), /*#__PURE__*/React__default["default"].createElement(FilesInfo, {
+      filesInfo: filesInfo
+    }));
+  }
+
+  /** The `HiddenWidget` is a widget for rendering a hidden input field.
+   *  It is typically used by setting type to "hidden".
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+
+  function HiddenWidget(_ref) {
+    let {
+      id,
+      value
+    } = _ref;
+    return /*#__PURE__*/React__default["default"].createElement("input", {
+      type: "hidden",
+      id: id,
+      value: typeof value === "undefined" ? "" : value
+    });
+  }
+
+  /** The `PasswordWidget` component uses the `BaseInputTemplate` changing the type to `password`.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+
+  function PasswordWidget(props) {
+    const {
+      options,
+      registry
+    } = props;
+    const BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
+    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, {
+      type: "password",
+      ...props
+    });
+  }
+
+  /** The `RadioWidget` is a widget for rendering a radio group.
+   *  It is typically used with a string property constrained with enum options.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+
+  function RadioWidget(_ref) {
+    let {
+      options,
+      value,
+      required,
+      disabled,
+      readonly,
+      autofocus = false,
+      onBlur,
+      onFocus,
+      onChange,
+      id
+    } = _ref;
+    // Generating a unique field name to identify this set of radio buttons
+    const name = Math.random().toString();
+    const {
+      enumOptions,
+      enumDisabled,
+      inline
+    } = options; // checked={checked} has been moved above name={name}, As mentioned in #349;
+    // this is a temporary fix for radio button rendering bug in React, facebook/react#7630.
+
+    const handleBlur = React.useCallback(event => onBlur(id, event.target.value), [onBlur, id]);
+    const handleFocus = React.useCallback(event => onFocus(id, event.target.value), [onFocus, id]);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "field-radio-group",
+      id: id
+    }, Array.isArray(enumOptions) && enumOptions.map((option, i) => {
+      const checked = option.value === value;
+      const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) != -1;
+      const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
+
+      const handleChange = () => onChange(option.value);
+
+      const radio = /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement("input", {
+        type: "radio",
+        id: id + "_" + i,
+        checked: checked,
+        name: name,
+        required: required,
+        value: option.value,
+        disabled: disabled || itemDisabled || readonly,
+        autoFocus: autofocus && i === 0,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus
+      }), /*#__PURE__*/React__default["default"].createElement("span", null, option.label));
+      return inline ? /*#__PURE__*/React__default["default"].createElement("label", {
+        key: i,
+        className: "radio-inline " + disabledCls
+      }, radio) : /*#__PURE__*/React__default["default"].createElement("div", {
+        key: i,
+        className: "radio " + disabledCls
+      }, /*#__PURE__*/React__default["default"].createElement("label", null, radio));
+    }));
+  }
+
+  /** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
+   * in a div, with the value along side it.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+
+  function RangeWidget(props) {
+    const {
+      value,
+      registry: {
+        templates: {
+          BaseInputTemplate
+        }
+      }
+    } = props;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "field-range-wrapper"
+    }, /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, {
+      type: "range",
+      ...props
+    }), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "range-view"
+    }, value));
+  }
+
+  function getValue(event, multiple) {
+    if (multiple) {
+      return Array.from(event.target.options).slice().filter(o => o.selected).map(o => o.value);
+    }
+
+    return event.target.value;
+  }
+  /** The `SelectWidget` is a widget for rendering dropdowns.
+   *  It is typically used with string properties constrained with enum options.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+
+
+  function SelectWidget(_ref) {
+    let {
+      schema,
+      id,
+      options,
+      value,
+      required,
+      disabled,
+      readonly,
+      multiple = false,
+      autofocus = false,
+      onChange,
+      onBlur,
+      onFocus,
+      placeholder
+    } = _ref;
+    const {
+      enumOptions,
+      enumDisabled
+    } = options;
+    const emptyValue = multiple ? [] : "";
+    const handleFocus = React.useCallback(event => {
+      const newValue = getValue(event, multiple);
+      return onFocus(id, utils.processSelectValue(schema, newValue, options));
+    }, [onFocus, id, schema, multiple, options]);
+    const handleBlur = React.useCallback(event => {
+      const newValue = getValue(event, multiple);
+      return onBlur(id, utils.processSelectValue(schema, newValue, options));
+    }, [onBlur, id, schema, multiple, options]);
+    const handleChange = React.useCallback(event => {
+      const newValue = getValue(event, multiple);
+      return onChange(utils.processSelectValue(schema, newValue, options));
+    }, [onChange, schema, multiple, options]);
+    return /*#__PURE__*/React__default["default"].createElement("select", {
+      id: id,
+      multiple: multiple,
+      className: "form-control",
+      value: typeof value === "undefined" ? emptyValue : value,
+      required: required,
+      disabled: disabled || readonly,
+      autoFocus: autofocus,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onChange: handleChange
+    }, !multiple && schema.default === undefined && /*#__PURE__*/React__default["default"].createElement("option", {
+      value: ""
+    }, placeholder), Array.isArray(enumOptions) && enumOptions.map((_ref2, i) => {
+      let {
+        value,
+        label
+      } = _ref2;
+      const disabled = enumDisabled && enumDisabled.indexOf(value) != -1;
+      return /*#__PURE__*/React__default["default"].createElement("option", {
+        key: i,
+        value: value,
+        disabled: disabled
+      }, label);
+    }));
+  }
+
+  /** The `TextareaWidget` is a widget for rendering input fields as textarea.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+
+  function TextareaWidget(_ref) {
+    let {
+      id,
+      options = {},
+      placeholder,
+      value,
+      required,
+      disabled,
+      readonly,
+      autofocus = false,
+      onChange,
+      onBlur,
+      onFocus
+    } = _ref;
+    const handleChange = React.useCallback(_ref2 => {
+      let {
+        target: {
+          value
+        }
+      } = _ref2;
+      return onChange(value === "" ? options.emptyValue : value);
+    }, [onChange, options.emptyValue]);
+    const handleBlur = React.useCallback(_ref3 => {
+      let {
+        target: {
+          value
+        }
+      } = _ref3;
+      return onBlur(id, value);
+    }, [onBlur, id]);
+    const handleFocus = React.useCallback(_ref4 => {
+      let {
+        target: {
+          value
+        }
+      } = _ref4;
+      return onFocus(id, value);
+    }, [id, onFocus]);
+    return /*#__PURE__*/React__default["default"].createElement("textarea", {
+      id: id,
+      className: "form-control",
+      value: value ? value : "",
+      placeholder: placeholder,
+      required: required,
+      disabled: disabled,
+      readOnly: readonly,
+      autoFocus: autofocus,
+      rows: options.rows,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onChange: handleChange
+    });
+  }
+
+  TextareaWidget.defaultProps = {
+    autofocus: false,
+    options: {}
+  };
+
+  /** The `TextWidget` component uses the `BaseInputTemplate`.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+
+  function TextWidget(props) {
+    const {
+      options,
+      registry
+    } = props;
+    const BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
+    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, { ...props
+    });
+  }
+
+  /** The `URLWidget` component uses the `BaseInputTemplate` changing the type to `url`.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+
+  function URLWidget(props) {
+    const {
+      options,
+      registry
+    } = props;
+    const BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
+    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, {
+      type: "url",
+      ...props
+    });
+  }
+
+  /** The `UpDownWidget` component uses the `BaseInputTemplate` changing the type to `number`.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+
+  function UpDownWidget(props) {
+    const {
+      options,
+      registry
+    } = props;
+    const BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
+    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, {
+      type: "number",
+      ...props
+    });
+  }
+
+  const widgets = {
+    PasswordWidget,
+    RadioWidget,
+    UpDownWidget,
+    RangeWidget,
+    SelectWidget,
+    TextWidget,
+    DateWidget,
+    DateTimeWidget,
+    AltDateWidget,
+    AltDateTimeWidget,
+    EmailWidget,
+    URLWidget,
+    TextareaWidget,
+    HiddenWidget,
+    ColorWidget,
+    FileWidget,
+    CheckboxWidget,
+    CheckboxesWidget
+  };
+
+  /** The default registry consists of all the fields, templates and widgets provided in the core implementation,
+   * plus an empty `rootSchema` and `formContext. We omit schemaUtils here because it cannot be defaulted without a
+   * rootSchema and validator. It will be added into the computed registry later in the Form.
+   */
+
+  function getDefaultRegistry() {
+    return {
+      fields,
+      templates,
+      widgets,
+      rootSchema: {},
+      formContext: {}
+    };
+  }
+
+  /** The `Form` component renders the outer form and all the fields defined in the `schema` */
+
+  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
+     */
+
+    /** Constructs the `Form` from the `props`. Will setup the initial state from the props. It will also call the
+     * `onChange` handler if the initially provided `formData` is modified to add missing default values as part of the
+     * state construction.
+     *
+     * @param props - The initial props for the `Form`
+     */
+    constructor(props) {
+      super(props);
+      this.formElement = void 0;
+
+      this.getUsedFormData = (formData, fields) => {
+        // For the case of a single input form
+        if (fields.length === 0 && typeof formData !== "object") {
+          return formData;
+        }
+
+        const data = _pick__default["default"](formData, fields);
+
+        if (Array.isArray(formData)) {
+          return Object.keys(data).map(key => data[key]);
+        }
+
+        return data;
+      };
+
+      this.getFieldNames = (pathSchema, formData) => {
+        const getAllPaths = function (_obj, acc, paths) {
+          if (acc === void 0) {
+            acc = [];
+          }
+
+          if (paths === void 0) {
+            paths = [""];
+          }
+
+          Object.keys(_obj).forEach(key => {
+            if (typeof _obj[key] === "object") {
+              const newPaths = paths.map(path => path + "." + key); // If an object is marked with additionalProperties, all its keys are valid
+
+              if (_obj[key][utils.RJSF_ADDITONAL_PROPERTIES_FLAG] && _obj[key][utils.NAME_KEY] !== "") {
+                acc.push(_obj[key][utils.NAME_KEY]);
+              } else {
+                getAllPaths(_obj[key], acc, newPaths);
+              }
+            } else if (key === utils.NAME_KEY && _obj[key] !== "") {
+              paths.forEach(path => {
+                path = path.replace(/^\./, "");
+
+                const formValue = get__default["default"](formData, path); // adds path to fieldNames if it points to a value
+                // or an empty object/array
+
+
+                if (typeof formValue !== "object" || _isEmpty__default["default"](formValue)) {
+                  acc.push(path);
+                }
+              });
+            }
+          });
+          return acc;
+        };
+
+        return getAllPaths(pathSchema);
+      };
+
+      this.onChange = (formData, newErrorSchema) => {
+        const {
+          extraErrors,
+          omitExtraData,
+          liveOmit,
+          noValidate,
+          liveValidate,
+          onChange
+        } = this.props;
+        const {
+          schemaUtils,
+          schema
+        } = this.state;
+
+        if (utils.isObject(formData) || Array.isArray(formData)) {
+          const newState = this.getStateFromProps(this.props, formData);
+          formData = newState.formData;
+        }
+
+        const mustValidate = !noValidate && liveValidate;
+        let state = {
+          formData,
+          schema
+        };
+        let newFormData = formData;
+
+        if (omitExtraData === true && liveOmit === true) {
+          const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
+          const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
+          const fieldNames = this.getFieldNames(pathSchema, formData);
+          newFormData = this.getUsedFormData(formData, fieldNames);
+          state = {
+            formData: newFormData
+          };
+        }
+
+        if (mustValidate) {
+          const schemaValidation = this.validate(schemaUtils, newFormData);
+          let errors = schemaValidation.errors;
+          let errorSchema = schemaValidation.errorSchema;
+          const schemaValidationErrors = errors;
+          const schemaValidationErrorSchema = errorSchema;
+
+          if (extraErrors) {
+            const merged = schemaUtils.mergeValidationData(schemaValidation, extraErrors);
+            errorSchema = merged.errorSchema;
+            errors = merged.errors;
+          }
+
+          state = {
+            formData: newFormData,
+            errors,
+            errorSchema,
+            schemaValidationErrors,
+            schemaValidationErrorSchema
+          };
+        } else if (!noValidate && newErrorSchema) {
+          const errorSchema = extraErrors ? utils.mergeObjects(newErrorSchema, extraErrors, true) : newErrorSchema;
+          state = {
+            formData: newFormData,
+            errorSchema: errorSchema,
+            errors: schemaUtils.getValidator().toErrorList(errorSchema)
+          };
+        }
+
+        this.setState(state, () => onChange && onChange({ ...this.state,
+          ...state
+        }));
+      };
+
+      this.onBlur = (id, data) => {
+        const {
+          onBlur
+        } = this.props;
+
+        if (onBlur) {
+          onBlur(id, data);
+        }
+      };
+
+      this.onFocus = (id, data) => {
+        const {
+          onFocus
+        } = this.props;
+
+        if (onFocus) {
+          onFocus(id, data);
+        }
+      };
+
+      this.onSubmit = event => {
+        event.preventDefault();
+
+        if (event.target !== event.currentTarget) {
+          return;
+        }
+
+        event.persist();
+        const {
+          omitExtraData,
+          extraErrors,
+          noValidate,
+          onSubmit,
+          onError
+        } = this.props;
+        let {
+          formData: newFormData
+        } = this.state;
+        const {
+          schema,
+          schemaUtils
+        } = this.state;
+
+        if (omitExtraData === true) {
+          const retrievedSchema = schemaUtils.retrieveSchema(schema, newFormData);
+          const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", newFormData);
+          const fieldNames = this.getFieldNames(pathSchema, newFormData);
+          newFormData = this.getUsedFormData(newFormData, fieldNames);
+        }
+
+        if (!noValidate) {
+          const schemaValidation = this.validate(schemaUtils, newFormData);
+          let errors = schemaValidation.errors;
+          let errorSchema = schemaValidation.errorSchema;
+          const schemaValidationErrors = errors;
+          const schemaValidationErrorSchema = errorSchema;
+
+          if (errors.length > 0) {
+            if (extraErrors) {
+              const merged = schemaUtils.mergeValidationData(schemaValidation, extraErrors);
+              errorSchema = merged.errorSchema;
+              errors = merged.errors;
+            }
+
+            this.setState({
+              errors,
+              errorSchema,
+              schemaValidationErrors,
+              schemaValidationErrorSchema
+            }, () => {
+              if (onError) {
+                onError(errors);
+              } else {
+                console.error("Form validation failed", errors);
+              }
+            });
+            return;
+          }
+        } // There are no errors generated through schema validation.
+        // Check for user provided errors and update state accordingly.
+
+
+        const errorSchema = extraErrors || {};
+        const errors = extraErrors ? schemaUtils.getValidator().toErrorList(extraErrors) : [];
+        this.setState({
+          formData: newFormData,
+          errors,
+          errorSchema,
+          schemaValidationErrors: [],
+          schemaValidationErrorSchema: {}
+        }, () => {
+          if (onSubmit) {
+            onSubmit({ ...this.state,
+              formData: newFormData,
+              status: "submitted"
+            }, event);
+          }
+        });
+      };
+
+      if (!props.validator) {
+        throw new Error("A validator is required for Form functionality to work");
+      }
+
+      this.state = this.getStateFromProps(props, props.formData);
+
+      if (this.props.onChange && !utils.deepEquals(this.state.formData, this.props.formData)) {
+        this.props.onChange(this.state);
+      }
+
+      this.formElement = /*#__PURE__*/React__default["default"].createRef();
+    }
+    /** React lifecycle method that gets called before new props are provided, updates the state based on new props. It
+     * will also call the`onChange` handler if the `formData` is modified to add missing default values as part of the
+     * state construction.
+     *
+     * @param nextProps - The new set of props about to be applied to the `Form`
+     */
+
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      const nextState = this.getStateFromProps(nextProps, nextProps.formData);
+
+      if (!utils.deepEquals(nextState.formData, nextProps.formData) && !utils.deepEquals(nextState.formData, this.state.formData) && nextProps.onChange) {
+        nextProps.onChange(nextState);
+      }
+
+      this.setState(nextState);
+    }
+    /** Extracts the updated state from the given `props` and `inputFormData`. As part of this process, the
+     * `inputFormData` is first processed to add any missing required defaults. After that, the data is run through the
+     * validation process IF required by the `props`.
+     *
+     * @param props - The props passed to the `Form`
+     * @param inputFormData - The new or current data for the `Form`
+     * @returns - The new state for the `Form`
+     */
+
+
+    getStateFromProps(props, inputFormData) {
+      const state = this.state || {};
+      const schema = "schema" in props ? props.schema : this.props.schema;
+      const uiSchema = ("uiSchema" in props ? props.uiSchema : this.props.uiSchema) || {};
+      const edit = typeof inputFormData !== "undefined";
+      const liveValidate = "liveValidate" in props ? props.liveValidate : this.props.liveValidate;
+      const mustValidate = edit && !props.noValidate && liveValidate;
+      const rootSchema = schema;
+      let schemaUtils = state.schemaUtils;
+
+      if (!schemaUtils || schemaUtils.doesSchemaUtilsDiffer(props.validator, rootSchema)) {
+        schemaUtils = utils.createSchemaUtils(props.validator, rootSchema);
+      }
+
+      const formData = schemaUtils.getDefaultFormState(schema, inputFormData);
+      const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
+
+      const getCurrentErrors = () => {
+        if (props.noValidate) {
+          return {
+            errors: [],
+            errorSchema: {}
+          };
+        } else if (!props.liveValidate) {
+          return {
+            errors: state.schemaValidationErrors || [],
+            errorSchema: state.schemaValidationErrorSchema || {}
+          };
+        }
+
+        return {
+          errors: state.errors || [],
+          errorSchema: state.errorSchema || {}
+        };
+      };
+
+      let errors;
+      let errorSchema;
+      let schemaValidationErrors = state.schemaValidationErrors;
+      let schemaValidationErrorSchema = state.schemaValidationErrorSchema;
+
+      if (mustValidate) {
+        const schemaValidation = this.validate(schemaUtils, formData, schema);
+        errors = schemaValidation.errors;
+        errorSchema = schemaValidation.errorSchema;
+        schemaValidationErrors = errors;
+        schemaValidationErrorSchema = errorSchema;
+      } else {
+        const currentErrors = getCurrentErrors();
+        errors = currentErrors.errors;
+        errorSchema = currentErrors.errorSchema;
+      }
+
+      if (props.extraErrors) {
+        const merged = schemaUtils.mergeValidationData({
+          errorSchema,
+          errors
+        }, props.extraErrors);
+        errorSchema = merged.errorSchema;
+        errors = merged.errors;
+      }
+
+      const idSchema = schemaUtils.toIdSchema(retrievedSchema, uiSchema["ui:rootFieldId"], formData, props.idPrefix, props.idSeparator);
+      const nextState = {
+        schemaUtils,
+        schema,
+        uiSchema,
+        idSchema,
+        formData,
+        edit,
+        errors,
+        errorSchema,
+        schemaValidationErrors,
+        schemaValidationErrorSchema
+      };
+      return nextState;
+    }
+    /** React lifecycle method that is used to determine whether component should be updated.
+     *
+     * @param nextProps - The next version of the props
+     * @param nextState - The next version of the state
+     * @returns - True if the component should be updated, false otherwise
+     */
+
+
+    shouldComponentUpdate(nextProps, nextState) {
+      return utils.shouldRender(this, nextProps, nextState);
+    }
+    /** Validates the `formData` against the `schema` using the `schemaUtils`, returning the results.
+     *
+     * @param schemaUtils - The schemaUtils to use for validation
+     * @param formData - The new form data to validate
+     * @param schema - The schema used to validate against
+     */
+
+
+    validate(schemaUtils, formData, schema) {
+      if (schema === void 0) {
+        schema = this.props.schema;
+      }
+
+      const {
+        customValidate,
+        transformErrors
+      } = this.props;
+      const resolvedSchema = schemaUtils.retrieveSchema(schema, formData);
+      return schemaUtils.getValidator().validateFormData(formData, resolvedSchema, customValidate, transformErrors);
+    }
+    /** 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 {
+        showErrorList,
+        formContext
+      } = this.props;
+      const options = utils.getUiOptions(uiSchema);
+      const ErrorListTemplate = utils.getTemplate("ErrorListTemplate", registry, options);
+
+      if (errors && errors.length && showErrorList != false) {
+        return /*#__PURE__*/React__default["default"].createElement(ErrorListTemplate, {
+          errors: errors,
+          errorSchema: errorSchema || {},
+          schema: schema,
+          uiSchema: uiSchema,
+          formContext: formContext
+        });
+      }
+
+      return null;
+    }
+    /** Returns the `formData` with only the elements specified in the `fields` list
+     *
+     * @param formData - The data for the `Form`
+     * @param fields - The fields to keep while filtering
+     */
+
+
+    /** Returns the registry for the form */
+    getRegistry() {
+      var _this$props$templates;
+
+      const {
+        schemaUtils
+      } = this.state;
+      const {
+        fields,
+        templates,
+        widgets,
+        formContext
+      } = getDefaultRegistry();
+      return {
+        fields: { ...fields,
+          ...this.props.fields
+        },
+        templates: { ...templates,
+          ...this.props.templates,
+          ButtonTemplates: { ...templates.ButtonTemplates,
+            ...((_this$props$templates = this.props.templates) === null || _this$props$templates === void 0 ? void 0 : _this$props$templates.ButtonTemplates)
+          }
+        },
+        widgets: { ...widgets,
+          ...this.props.widgets
+        },
+        rootSchema: this.props.schema,
+        formContext: this.props.formContext || formContext,
+        schemaUtils
+      };
+    }
+    /** Provides a function that can be used to programmatically submit the `Form` */
+
+
+    submit() {
+      if (this.formElement.current) {
+        this.formElement.current.dispatchEvent(new CustomEvent("submit", {
+          cancelable: true
+        }));
+        this.formElement.current.requestSubmit();
+      }
+    }
+    /** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
+     * needed along with the submit button or any children of the form.
+     */
+
+
+    render() {
+      const {
+        children,
+        id,
+        idPrefix,
+        idSeparator,
+        className = "",
+        tagName,
+        name,
+        method,
+        target,
+        action,
+        autoComplete,
+        enctype,
+        acceptcharset,
+        noHtml5Validate = false,
+        disabled = false,
+        readonly = false,
+        formContext,
+        _internalFormWrapper
+      } = this.props;
+      const {
+        schema,
+        uiSchema,
+        formData,
+        errorSchema,
+        idSchema
+      } = this.state;
+      const registry = this.getRegistry();
+      const {
+        SchemaField: _SchemaField
+      } = registry.fields;
+      const {
+        SubmitButton
+      } = registry.templates.ButtonTemplates; // The `semantic-ui` and `material-ui` themes have `_internalFormWrapper`s that take an `as` prop that is the
+      // PropTypes.elementType to use for the inner tag so we'll need to pass `tagName` along if it is provided.
+      // NOTE, the `as` prop is native to `semantic-ui` and is emulated in the `material-ui` theme
+
+      const as = _internalFormWrapper ? tagName : undefined;
+      const FormTag = _internalFormWrapper || tagName || "form";
+      return /*#__PURE__*/React__default["default"].createElement(FormTag, {
+        className: className ? className : "rjsf",
+        id: id,
+        name: name,
+        method: method,
+        target: target,
+        action: action,
+        autoComplete: autoComplete,
+        encType: enctype,
+        acceptCharset: acceptcharset,
+        noValidate: noHtml5Validate,
+        onSubmit: this.onSubmit,
+        as: as,
+        ref: this.formElement
+      }, this.renderErrors(registry), /*#__PURE__*/React__default["default"].createElement(_SchemaField, {
+        name: "",
+        schema: schema,
+        uiSchema: uiSchema,
+        errorSchema: errorSchema,
+        idSchema: idSchema,
+        idPrefix: idPrefix,
+        idSeparator: idSeparator,
+        formContext: formContext,
+        formData: formData,
+        onChange: this.onChange,
+        onBlur: this.onBlur,
+        onFocus: this.onFocus,
+        registry: registry,
+        disabled: disabled,
+        readonly: readonly
+      }), children ? children : /*#__PURE__*/React__default["default"].createElement(SubmitButton, {
+        uiSchema: uiSchema
+      }));
+    }
+
+  }
+
+  /** A Higher-Order component that creates a wrapper around a `Form` with the overrides from the `WithThemeProps` */
+
+  function withTheme(themeProps) {
+    return /*#__PURE__*/React.forwardRef((_ref, ref) => {
+      var _themeProps$templates, _templates;
+
+      let {
+        fields,
+        widgets,
+        templates,
+        ...directProps
+      } = _ref;
+      fields = { ...themeProps.fields,
+        ...fields
+      };
+      widgets = { ...themeProps.widgets,
+        ...widgets
+      };
+      templates = { ...themeProps.templates,
+        ...templates,
+        ButtonTemplates: { ...(themeProps === null || themeProps === void 0 ? void 0 : (_themeProps$templates = themeProps.templates) === null || _themeProps$templates === void 0 ? void 0 : _themeProps$templates.ButtonTemplates),
+          ...((_templates = templates) === null || _templates === void 0 ? void 0 : _templates.ButtonTemplates)
+        }
+      };
+      return /*#__PURE__*/React__default["default"].createElement(Form, { ...themeProps,
+        ...directProps,
+        fields: fields,
+        widgets: widgets,
+        templates: templates,
+        ref: ref
+      });
+    });
+  }
+
+  exports["default"] = Form;
+  exports.getDefaultRegistry = getDefaultRegistry;
+  exports.withTheme = withTheme;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=core.umd.development.js.map