@limetech/lime-elements 35.0.0-next.26 → 35.0.0-next.27

package/dist/esm/limel-form.entry.js

@@ -8863,6 +8863,15 @@ function (_Component) {
         });
       }
 
+      if (isMultiSelect$1(schema, rootSchema)) {
+        // 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 (isCustomWidget$1(uiSchema)) {
+        return this.renderCustomWidget();
+      }
+
       if (isFixedItems$1(schema)) {
         return this.renderFixedArray();
       }
@@ -8871,10 +8880,6 @@ function (_Component) {
         return this.renderFiles();
       }
 
-      if (isMultiSelect$1(schema, rootSchema)) {
-        return this.renderMultiSelect();
-      }
-
       return this.renderNormalArray();
     }
   }, {
@@ -8897,6 +8902,7 @@ function (_Component) {
           onBlur = _this$props5.onBlur,
           onFocus = _this$props5.onFocus,
           idPrefix = _this$props5.idPrefix,
+          idSeparator = _this$props5.idSeparator,
           rawErrors = _this$props5.rawErrors;
       var title = schema.title === undefined ? name : schema.title;
       var ArrayFieldTemplate = registry.ArrayFieldTemplate,
@@ -8915,7 +8921,7 @@ function (_Component) {
           var itemSchema = retrieveSchema$1(schema.items, rootSchema, item);
           var itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
           var itemIdPrefix = idSchema.$id + "_" + index;
-          var itemIdSchema = toIdSchema$1(itemSchema, itemIdPrefix, rootSchema, item, idPrefix);
+          var itemIdSchema = toIdSchema$1(itemSchema, itemIdPrefix, rootSchema, item, idPrefix, idSeparator);
           return _this2.renderArrayFieldItem({
             key: key,
             index: index,
@@ -8952,13 +8958,12 @@ function (_Component) {
       return react.createElement(Component, arrayProps);
     }
   }, {
-    key: "renderMultiSelect",
-    value: function renderMultiSelect() {
+    key: "renderCustomWidget",
+    value: function renderCustomWidget() {
       var _this$props6 = this.props,
           schema = _this$props6.schema,
           idSchema = _this$props6.idSchema,
           uiSchema = _this$props6.uiSchema,
-          formData = _this$props6.formData,
           disabled = _this$props6.disabled,
           readonly = _this$props6.readonly,
           required = _this$props6.required,
@@ -8966,24 +8971,18 @@ function (_Component) {
           autofocus = _this$props6.autofocus,
           onBlur = _this$props6.onBlur,
           onFocus = _this$props6.onFocus,
+          items = _this$props6.formData,
           _this$props6$registry = _this$props6.registry,
           registry = _this$props6$registry === void 0 ? getDefaultRegistry$1() : _this$props6$registry,
           rawErrors = _this$props6.rawErrors,
           name = _this$props6.name;
-      var items = this.props.formData;
       var widgets = registry.widgets,
-          rootSchema = registry.rootSchema,
           formContext = registry.formContext;
-      var itemsSchema = retrieveSchema$1(schema.items, rootSchema, formData);
       var title = schema.title || name;
-      var enumOptions = optionsList$1(itemsSchema);
 
-      var _getUiOptions$enumOpt = _objectSpread$g({}, getUiOptions$1(uiSchema), {
-        enumOptions: enumOptions
-      }),
-          _getUiOptions$enumOpt2 = _getUiOptions$enumOpt.widget,
-          widget = _getUiOptions$enumOpt2 === void 0 ? "select" : _getUiOptions$enumOpt2,
-          options = _objectWithoutProperties$g(_getUiOptions$enumOpt, ["widget"]);
+      var _getUiOptions2 = _objectSpread$g({}, getUiOptions$1(uiSchema)),
+          widget = _getUiOptions2.widget,
+          options = _objectWithoutProperties$g(_getUiOptions2, ["widget"]);
 
       var Widget = getWidget$1(schema, widget, widgets);
       return react.createElement(Widget, {
@@ -9007,73 +9006,129 @@ function (_Component) {
       });
     }
   }, {
-    key: "renderFiles",
-    value: function renderFiles() {
+    key: "renderMultiSelect",
+    value: function renderMultiSelect() {
       var _this$props7 = this.props,
           schema = _this$props7.schema,
-          uiSchema = _this$props7.uiSchema,
           idSchema = _this$props7.idSchema,
-          name = _this$props7.name,
+          uiSchema = _this$props7.uiSchema,
+          formData = _this$props7.formData,
           disabled = _this$props7.disabled,
           readonly = _this$props7.readonly,
+          required = _this$props7.required,
+          placeholder = _this$props7.placeholder,
           autofocus = _this$props7.autofocus,
           onBlur = _this$props7.onBlur,
           onFocus = _this$props7.onFocus,
           _this$props7$registry = _this$props7.registry,
           registry = _this$props7$registry === void 0 ? getDefaultRegistry$1() : _this$props7$registry,
-          rawErrors = _this$props7.rawErrors;
-      var title = schema.title || name;
+          rawErrors = _this$props7.rawErrors,
+          name = _this$props7.name;
       var items = this.props.formData;
       var widgets = registry.widgets,
+          rootSchema = registry.rootSchema,
           formContext = registry.formContext;
+      var itemsSchema = retrieveSchema$1(schema.items, rootSchema, formData);
+      var title = schema.title || name;
+      var enumOptions = optionsList$1(itemsSchema);
 
-      var _getUiOptions2 = getUiOptions$1(uiSchema),
-          _getUiOptions2$widget = _getUiOptions2.widget,
-          widget = _getUiOptions2$widget === void 0 ? "files" : _getUiOptions2$widget,
-          options = _objectWithoutProperties$g(_getUiOptions2, ["widget"]);
+      var _getUiOptions$enumOpt = _objectSpread$g({}, getUiOptions$1(uiSchema), {
+        enumOptions: enumOptions
+      }),
+          _getUiOptions$enumOpt2 = _getUiOptions$enumOpt.widget,
+          widget = _getUiOptions$enumOpt2 === void 0 ? "select" : _getUiOptions$enumOpt2,
+          options = _objectWithoutProperties$g(_getUiOptions$enumOpt, ["widget"]);
 
       var Widget = getWidget$1(schema, widget, widgets);
       return react.createElement(Widget, {
-        options: options,
         id: idSchema && idSchema.$id,
         multiple: true,
         onChange: this.onSelectChange,
         onBlur: onBlur,
         onFocus: onFocus,
+        options: options,
         schema: schema,
-        title: title,
+        registry: registry,
         value: items,
         disabled: disabled,
         readonly: readonly,
+        required: required,
+        label: title,
+        placeholder: placeholder,
         formContext: formContext,
         autofocus: autofocus,
         rawErrors: rawErrors
       });
     }
   }, {
-    key: "renderFixedArray",
-    value: function renderFixedArray() {
-      var _this3 = this;
-
+    key: "renderFiles",
+    value: function renderFiles() {
       var _this$props8 = this.props,
           schema = _this$props8.schema,
           uiSchema = _this$props8.uiSchema,
-          formData = _this$props8.formData,
-          errorSchema = _this$props8.errorSchema,
-          idPrefix = _this$props8.idPrefix,
           idSchema = _this$props8.idSchema,
           name = _this$props8.name,
-          required = _this$props8.required,
           disabled = _this$props8.disabled,
           readonly = _this$props8.readonly,
           autofocus = _this$props8.autofocus,
-          _this$props8$registry = _this$props8.registry,
-          registry = _this$props8$registry === void 0 ? getDefaultRegistry$1() : _this$props8$registry,
           onBlur = _this$props8.onBlur,
           onFocus = _this$props8.onFocus,
+          _this$props8$registry = _this$props8.registry,
+          registry = _this$props8$registry === void 0 ? getDefaultRegistry$1() : _this$props8$registry,
           rawErrors = _this$props8.rawErrors;
       var title = schema.title || name;
       var items = this.props.formData;
+      var widgets = registry.widgets,
+          formContext = registry.formContext;
+
+      var _getUiOptions3 = getUiOptions$1(uiSchema),
+          _getUiOptions3$widget = _getUiOptions3.widget,
+          widget = _getUiOptions3$widget === void 0 ? "files" : _getUiOptions3$widget,
+          options = _objectWithoutProperties$g(_getUiOptions3, ["widget"]);
+
+      var Widget = getWidget$1(schema, widget, widgets);
+      return react.createElement(Widget, {
+        options: options,
+        id: idSchema && idSchema.$id,
+        multiple: true,
+        onChange: this.onSelectChange,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        schema: schema,
+        title: title,
+        value: items,
+        disabled: disabled,
+        readonly: readonly,
+        formContext: formContext,
+        autofocus: autofocus,
+        rawErrors: rawErrors
+      });
+    }
+  }, {
+    key: "renderFixedArray",
+    value: function renderFixedArray() {
+      var _this3 = this;
+
+      var _this$props9 = this.props,
+          schema = _this$props9.schema,
+          uiSchema = _this$props9.uiSchema,
+          formData = _this$props9.formData,
+          errorSchema = _this$props9.errorSchema,
+          idPrefix = _this$props9.idPrefix,
+          idSeparator = _this$props9.idSeparator,
+          idSchema = _this$props9.idSchema,
+          name = _this$props9.name,
+          required = _this$props9.required,
+          disabled = _this$props9.disabled,
+          readonly = _this$props9.readonly,
+          autofocus = _this$props9.autofocus,
+          _this$props9$registry = _this$props9.registry,
+          registry = _this$props9$registry === void 0 ? getDefaultRegistry$1() : _this$props9$registry,
+          onBlur = _this$props9.onBlur,
+          onFocus = _this$props9.onFocus,
+          rawErrors = _this$props9.rawErrors;
+      var title = schema.title || name;
+      var items = this.props.formData;
       var ArrayFieldTemplate = registry.ArrayFieldTemplate,
           rootSchema = registry.rootSchema,
           fields = registry.fields,
@@ -9103,7 +9158,7 @@ function (_Component) {
           var additional = index >= itemSchemas.length;
           var itemSchema = additional ? retrieveSchema$1(schema.additionalItems, rootSchema, item) : itemSchemas[index];
           var itemIdPrefix = idSchema.$id + "_" + index;
-          var itemIdSchema = toIdSchema$1(itemSchema, itemIdPrefix, rootSchema, item, idPrefix);
+          var itemIdSchema = toIdSchema$1(itemSchema, itemIdPrefix, rootSchema, item, idPrefix, idSeparator);
           var itemUiSchema = additional ? uiSchema.additionalItems || {} : Array.isArray(uiSchema.items) ? uiSchema.items[index] : uiSchema.items || {};
           var itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
           return _this3.renderArrayFieldItem({
@@ -9156,12 +9211,12 @@ function (_Component) {
           onBlur = props.onBlur,
           onFocus = props.onFocus,
           rawErrors = props.rawErrors;
-      var _this$props9 = this.props,
-          disabled = _this$props9.disabled,
-          readonly = _this$props9.readonly,
-          uiSchema = _this$props9.uiSchema,
-          _this$props9$registry = _this$props9.registry,
-          registry = _this$props9$registry === void 0 ? getDefaultRegistry$1() : _this$props9$registry;
+      var _this$props10 = this.props,
+          disabled = _this$props10.disabled,
+          readonly = _this$props10.readonly,
+          uiSchema = _this$props10.uiSchema,
+          _this$props10$registr = _this$props10.registry,
+          registry = _this$props10$registr === void 0 ? getDefaultRegistry$1() : _this$props10$registr;
       var SchemaField = registry.fields.SchemaField;
 
       var _orderable$removable$ = _objectSpread$g({
@@ -9501,6 +9556,7 @@ function (_Component) {
           errorSchema = _this$props3.errorSchema,
           formData = _this$props3.formData,
           idPrefix = _this$props3.idPrefix,
+          idSeparator = _this$props3.idSeparator,
           idSchema = _this$props3.idSchema,
           onBlur = _this$props3.onBlur,
           onChange = _this$props3.onChange,
@@ -9561,6 +9617,7 @@ function (_Component) {
         errorSchema: errorSchema,
         idSchema: idSchema,
         idPrefix: idPrefix,
+        idSeparator: idSeparator,
         formData: formData,
         onChange: onChange,
         onBlur: onBlur,
@@ -9931,6 +9988,7 @@ function (_Component) {
           disabled = _this$props2.disabled,
           readonly = _this$props2.readonly,
           idPrefix = _this$props2.idPrefix,
+          idSeparator = _this$props2.idSeparator,
           onBlur = _this$props2.onBlur,
           onFocus = _this$props2.onFocus,
           _this$props2$registry = _this$props2.registry,
@@ -9978,6 +10036,7 @@ function (_Component) {
               errorSchema: errorSchema[name],
               idSchema: idSchema[name],
               idPrefix: idPrefix,
+              idSeparator: idSeparator,
               formData: (formData || {})[name],
               wasPropertyKeyModified: _this2.state.wasPropertyKeyModified,
               onKeyChange: _this2.onKeyChange(name),
@@ -10256,6 +10315,7 @@ function SchemaFieldRender$1(props) {
       formData = props.formData,
       errorSchema = props.errorSchema,
       idPrefix = props.idPrefix,
+      idSeparator = props.idSeparator,
       name = props.name,
       onChange = props.onChange,
       onKeyChange = props.onKeyChange,
@@ -10271,7 +10331,7 @@ function SchemaFieldRender$1(props) {
   var FieldTemplate = uiSchema["ui:FieldTemplate"] || registry.FieldTemplate || DefaultTemplate$1;
   var idSchema = props.idSchema;
   var schema = retrieveSchema$1(props.schema, rootSchema, formData);
-  idSchema = mergeObjects$1(toIdSchema$1(schema, null, rootSchema, formData, idPrefix), idSchema);
+  idSchema = mergeObjects$1(toIdSchema$1(schema, null, rootSchema, formData, idPrefix, idSeparator), idSchema);
   var FieldComponent = getFieldComponent$1(schema, uiSchema, idSchema, fields);
   var DescriptionField = fields.DescriptionField;
   var disabled = Boolean(props.disabled || uiSchema["ui:disabled"]);
@@ -19393,7 +19453,7 @@ function getDisplayLabel$1(schema, uiSchema, rootSchema) {
   var schemaType = getSchemaType$1(schema);
 
   if (schemaType === "array") {
-    displayLabel = isMultiSelect$1(schema, rootSchema) || isFilesArray$1(schema, uiSchema, rootSchema);
+    displayLabel = isMultiSelect$1(schema, rootSchema) || isFilesArray$1(schema, uiSchema, rootSchema) || isCustomWidget$1(uiSchema);
   }
 
   if (schemaType === "object") {
@@ -19570,6 +19630,12 @@ function isFixedItems$1(schema) {
     return isObject$1(item);
   });
 }
+function isCustomWidget$1(uiSchema) {
+  return (// TODO: Remove the `&& uiSchema["ui:widget"] !== "hidden"` once we support hidden widgets for arrays.
+    // https://react-jsonschema-form.readthedocs.io/en/latest/usage/widgets/#hidden-widgets
+    "widget" in getUiOptions$1(uiSchema) && getUiOptions$1(uiSchema)["widget"] !== "hidden"
+  );
+}
 function allowAdditionalItems$1(schema) {
   if (schema.additionalItems === true) {
     console.warn("additionalItems=true is currently not supported");
@@ -19972,6 +20038,7 @@ function shouldRender$1(comp, nextProps, nextState) {
 function toIdSchema$1(schema, id, rootSchema) {
   var formData = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   var idPrefix = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "root";
+  var idSeparator = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : "_";
   var idSchema = {
     $id: id || idPrefix
   };
@@ -19979,11 +20046,11 @@ function toIdSchema$1(schema, id, rootSchema) {
   if ("$ref" in schema || "dependencies" in schema || "allOf" in schema) {
     var _schema = retrieveSchema$1(schema, rootSchema, formData);
 
-    return toIdSchema$1(_schema, id, rootSchema, formData, idPrefix);
+    return toIdSchema$1(_schema, id, rootSchema, formData, idPrefix, idSeparator);
   }
 
   if ("items" in schema && !schema.items.$ref) {
-    return toIdSchema$1(schema.items, id, rootSchema, formData, idPrefix);
+    return toIdSchema$1(schema.items, id, rootSchema, formData, idPrefix, idSeparator);
   }
 
   if (schema.type !== "object") {
@@ -19992,10 +20059,10 @@ function toIdSchema$1(schema, id, rootSchema) {
 
   for (var name in schema.properties || {}) {
     var field = schema.properties[name];
-    var fieldId = idSchema.$id + "_" + name;
+    var fieldId = idSchema.$id + idSeparator + name;
     idSchema[name] = toIdSchema$1(isObject$1(field) ? field : {}, fieldId, rootSchema, // It's possible that formData is not an object -- this can happen if an
     // array item has just been added, but not populated with data yet
-    (formData || {})[name], idPrefix);
+    (formData || {})[name], idPrefix, idSeparator);
   }
 
   return idSchema;
@@ -20568,7 +20635,7 @@ function (_Component) {
         errors = toErrorList$1(errorSchema);
       }
 
-      var idSchema = toIdSchema$1(retrievedSchema, uiSchema["ui:rootFieldId"], rootSchema, formData, props.idPrefix);
+      var idSchema = toIdSchema$1(retrievedSchema, uiSchema["ui:rootFieldId"], rootSchema, formData, props.idPrefix, props.idSeparator);
       var nextState = {
         schema: schema,
         uiSchema: uiSchema,
@@ -20671,6 +20738,7 @@ function (_Component) {
           children = _this$props5.children,
           id = _this$props5.id,
           idPrefix = _this$props5.idPrefix,
+          idSeparator = _this$props5.idSeparator,
           className = _this$props5.className,
           tagName = _this$props5.tagName,
           name = _this$props5.name,
@@ -20721,6 +20789,7 @@ function (_Component) {
         errorSchema: errorSchema,
         idSchema: idSchema,
         idPrefix: idPrefix,
+        idSeparator: idSeparator,
         formContext: formContext,
         formData: formData,
         onChange: this.onChange,
@@ -23204,6 +23273,15 @@ function (_Component) {
         });
       }
 
+      if (isMultiSelect(schema, rootSchema)) {
+        // 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 (isCustomWidget(uiSchema)) {
+        return this.renderCustomWidget();
+      }
+
       if (isFixedItems(schema)) {
         return this.renderFixedArray();
       }
@@ -23212,10 +23290,6 @@ function (_Component) {
         return this.renderFiles();
       }
 
-      if (isMultiSelect(schema, rootSchema)) {
-        return this.renderMultiSelect();
-      }
-
       return this.renderNormalArray();
     }
   }, {
@@ -23238,6 +23312,7 @@ function (_Component) {
           onBlur = _this$props5.onBlur,
           onFocus = _this$props5.onFocus,
           idPrefix = _this$props5.idPrefix,
+          idSeparator = _this$props5.idSeparator,
           rawErrors = _this$props5.rawErrors;
       var title = schema.title === undefined ? name : schema.title;
       var ArrayFieldTemplate = registry.ArrayFieldTemplate,
@@ -23256,7 +23331,7 @@ function (_Component) {
           var itemSchema = retrieveSchema(schema.items, rootSchema, item);
           var itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
           var itemIdPrefix = idSchema.$id + "_" + index;
-          var itemIdSchema = toIdSchema(itemSchema, itemIdPrefix, rootSchema, item, idPrefix);
+          var itemIdSchema = toIdSchema(itemSchema, itemIdPrefix, rootSchema, item, idPrefix, idSeparator);
           return _this2.renderArrayFieldItem({
             key: key,
             index: index,
@@ -23293,13 +23368,12 @@ function (_Component) {
       return react.createElement(Component, arrayProps);
     }
   }, {
-    key: "renderMultiSelect",
-    value: function renderMultiSelect() {
+    key: "renderCustomWidget",
+    value: function renderCustomWidget() {
       var _this$props6 = this.props,
           schema = _this$props6.schema,
           idSchema = _this$props6.idSchema,
           uiSchema = _this$props6.uiSchema,
-          formData = _this$props6.formData,
           disabled = _this$props6.disabled,
           readonly = _this$props6.readonly,
           required = _this$props6.required,
@@ -23307,24 +23381,18 @@ function (_Component) {
           autofocus = _this$props6.autofocus,
           onBlur = _this$props6.onBlur,
           onFocus = _this$props6.onFocus,
+          items = _this$props6.formData,
           _this$props6$registry = _this$props6.registry,
           registry = _this$props6$registry === void 0 ? getDefaultRegistry() : _this$props6$registry,
           rawErrors = _this$props6.rawErrors,
           name = _this$props6.name;
-      var items = this.props.formData;
       var widgets = registry.widgets,
-          rootSchema = registry.rootSchema,
           formContext = registry.formContext;
-      var itemsSchema = retrieveSchema(schema.items, rootSchema, formData);
       var title = schema.title || name;
-      var enumOptions = optionsList(itemsSchema);
 
-      var _getUiOptions$enumOpt = _objectSpread$7({}, getUiOptions(uiSchema), {
-        enumOptions: enumOptions
-      }),
-          _getUiOptions$enumOpt2 = _getUiOptions$enumOpt.widget,
-          widget = _getUiOptions$enumOpt2 === void 0 ? "select" : _getUiOptions$enumOpt2,
-          options = _objectWithoutProperties$7(_getUiOptions$enumOpt, ["widget"]);
+      var _getUiOptions2 = _objectSpread$7({}, getUiOptions(uiSchema)),
+          widget = _getUiOptions2.widget,
+          options = _objectWithoutProperties$7(_getUiOptions2, ["widget"]);
 
       var Widget = getWidget(schema, widget, widgets);
       return react.createElement(Widget, {
@@ -23348,73 +23416,129 @@ function (_Component) {
       });
     }
   }, {
-    key: "renderFiles",
-    value: function renderFiles() {
+    key: "renderMultiSelect",
+    value: function renderMultiSelect() {
       var _this$props7 = this.props,
           schema = _this$props7.schema,
-          uiSchema = _this$props7.uiSchema,
           idSchema = _this$props7.idSchema,
-          name = _this$props7.name,
+          uiSchema = _this$props7.uiSchema,
+          formData = _this$props7.formData,
           disabled = _this$props7.disabled,
           readonly = _this$props7.readonly,
+          required = _this$props7.required,
+          placeholder = _this$props7.placeholder,
           autofocus = _this$props7.autofocus,
           onBlur = _this$props7.onBlur,
           onFocus = _this$props7.onFocus,
           _this$props7$registry = _this$props7.registry,
           registry = _this$props7$registry === void 0 ? getDefaultRegistry() : _this$props7$registry,
-          rawErrors = _this$props7.rawErrors;
-      var title = schema.title || name;
+          rawErrors = _this$props7.rawErrors,
+          name = _this$props7.name;
       var items = this.props.formData;
       var widgets = registry.widgets,
+          rootSchema = registry.rootSchema,
           formContext = registry.formContext;
+      var itemsSchema = retrieveSchema(schema.items, rootSchema, formData);
+      var title = schema.title || name;
+      var enumOptions = optionsList(itemsSchema);
 
-      var _getUiOptions2 = getUiOptions(uiSchema),
-          _getUiOptions2$widget = _getUiOptions2.widget,
-          widget = _getUiOptions2$widget === void 0 ? "files" : _getUiOptions2$widget,
-          options = _objectWithoutProperties$7(_getUiOptions2, ["widget"]);
+      var _getUiOptions$enumOpt = _objectSpread$7({}, getUiOptions(uiSchema), {
+        enumOptions: enumOptions
+      }),
+          _getUiOptions$enumOpt2 = _getUiOptions$enumOpt.widget,
+          widget = _getUiOptions$enumOpt2 === void 0 ? "select" : _getUiOptions$enumOpt2,
+          options = _objectWithoutProperties$7(_getUiOptions$enumOpt, ["widget"]);
 
       var Widget = getWidget(schema, widget, widgets);
       return react.createElement(Widget, {
-        options: options,
         id: idSchema && idSchema.$id,
         multiple: true,
         onChange: this.onSelectChange,
         onBlur: onBlur,
         onFocus: onFocus,
+        options: options,
         schema: schema,
-        title: title,
+        registry: registry,
         value: items,
         disabled: disabled,
         readonly: readonly,
+        required: required,
+        label: title,
+        placeholder: placeholder,
         formContext: formContext,
         autofocus: autofocus,
         rawErrors: rawErrors
       });
     }
   }, {
-    key: "renderFixedArray",
-    value: function renderFixedArray() {
-      var _this3 = this;
-
+    key: "renderFiles",
+    value: function renderFiles() {
       var _this$props8 = this.props,
           schema = _this$props8.schema,
           uiSchema = _this$props8.uiSchema,
-          formData = _this$props8.formData,
-          errorSchema = _this$props8.errorSchema,
-          idPrefix = _this$props8.idPrefix,
           idSchema = _this$props8.idSchema,
           name = _this$props8.name,
-          required = _this$props8.required,
           disabled = _this$props8.disabled,
           readonly = _this$props8.readonly,
           autofocus = _this$props8.autofocus,
-          _this$props8$registry = _this$props8.registry,
-          registry = _this$props8$registry === void 0 ? getDefaultRegistry() : _this$props8$registry,
           onBlur = _this$props8.onBlur,
           onFocus = _this$props8.onFocus,
+          _this$props8$registry = _this$props8.registry,
+          registry = _this$props8$registry === void 0 ? getDefaultRegistry() : _this$props8$registry,
           rawErrors = _this$props8.rawErrors;
       var title = schema.title || name;
       var items = this.props.formData;
+      var widgets = registry.widgets,
+          formContext = registry.formContext;
+
+      var _getUiOptions3 = getUiOptions(uiSchema),
+          _getUiOptions3$widget = _getUiOptions3.widget,
+          widget = _getUiOptions3$widget === void 0 ? "files" : _getUiOptions3$widget,
+          options = _objectWithoutProperties$7(_getUiOptions3, ["widget"]);
+
+      var Widget = getWidget(schema, widget, widgets);
+      return react.createElement(Widget, {
+        options: options,
+        id: idSchema && idSchema.$id,
+        multiple: true,
+        onChange: this.onSelectChange,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        schema: schema,
+        title: title,
+        value: items,
+        disabled: disabled,
+        readonly: readonly,
+        formContext: formContext,
+        autofocus: autofocus,
+        rawErrors: rawErrors
+      });
+    }
+  }, {
+    key: "renderFixedArray",
+    value: function renderFixedArray() {
+      var _this3 = this;
+
+      var _this$props9 = this.props,
+          schema = _this$props9.schema,
+          uiSchema = _this$props9.uiSchema,
+          formData = _this$props9.formData,
+          errorSchema = _this$props9.errorSchema,
+          idPrefix = _this$props9.idPrefix,
+          idSeparator = _this$props9.idSeparator,
+          idSchema = _this$props9.idSchema,
+          name = _this$props9.name,
+          required = _this$props9.required,
+          disabled = _this$props9.disabled,
+          readonly = _this$props9.readonly,
+          autofocus = _this$props9.autofocus,
+          _this$props9$registry = _this$props9.registry,
+          registry = _this$props9$registry === void 0 ? getDefaultRegistry() : _this$props9$registry,
+          onBlur = _this$props9.onBlur,
+          onFocus = _this$props9.onFocus,
+          rawErrors = _this$props9.rawErrors;
+      var title = schema.title || name;
+      var items = this.props.formData;
       var ArrayFieldTemplate = registry.ArrayFieldTemplate,
           rootSchema = registry.rootSchema,
           fields = registry.fields,
@@ -23444,7 +23568,7 @@ function (_Component) {
           var additional = index >= itemSchemas.length;
           var itemSchema = additional ? retrieveSchema(schema.additionalItems, rootSchema, item) : itemSchemas[index];
           var itemIdPrefix = idSchema.$id + "_" + index;
-          var itemIdSchema = toIdSchema(itemSchema, itemIdPrefix, rootSchema, item, idPrefix);
+          var itemIdSchema = toIdSchema(itemSchema, itemIdPrefix, rootSchema, item, idPrefix, idSeparator);
           var itemUiSchema = additional ? uiSchema.additionalItems || {} : Array.isArray(uiSchema.items) ? uiSchema.items[index] : uiSchema.items || {};
           var itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
           return _this3.renderArrayFieldItem({
@@ -23497,12 +23621,12 @@ function (_Component) {
           onBlur = props.onBlur,
           onFocus = props.onFocus,
           rawErrors = props.rawErrors;
-      var _this$props9 = this.props,
-          disabled = _this$props9.disabled,
-          readonly = _this$props9.readonly,
-          uiSchema = _this$props9.uiSchema,
-          _this$props9$registry = _this$props9.registry,
-          registry = _this$props9$registry === void 0 ? getDefaultRegistry() : _this$props9$registry;
+      var _this$props10 = this.props,
+          disabled = _this$props10.disabled,
+          readonly = _this$props10.readonly,
+          uiSchema = _this$props10.uiSchema,
+          _this$props10$registr = _this$props10.registry,
+          registry = _this$props10$registr === void 0 ? getDefaultRegistry() : _this$props10$registr;
       var SchemaField = registry.fields.SchemaField;
 
       var _orderable$removable$ = _objectSpread$7({
@@ -23842,6 +23966,7 @@ function (_Component) {
           errorSchema = _this$props3.errorSchema,
           formData = _this$props3.formData,
           idPrefix = _this$props3.idPrefix,
+          idSeparator = _this$props3.idSeparator,
           idSchema = _this$props3.idSchema,
           onBlur = _this$props3.onBlur,
           onChange = _this$props3.onChange,
@@ -23902,6 +24027,7 @@ function (_Component) {
         errorSchema: errorSchema,
         idSchema: idSchema,
         idPrefix: idPrefix,
+        idSeparator: idSeparator,
         formData: formData,
         onChange: onChange,
         onBlur: onBlur,
@@ -24272,6 +24398,7 @@ function (_Component) {
           disabled = _this$props2.disabled,
           readonly = _this$props2.readonly,
           idPrefix = _this$props2.idPrefix,
+          idSeparator = _this$props2.idSeparator,
           onBlur = _this$props2.onBlur,
           onFocus = _this$props2.onFocus,
           _this$props2$registry = _this$props2.registry,
@@ -24319,6 +24446,7 @@ function (_Component) {
               errorSchema: errorSchema[name],
               idSchema: idSchema[name],
               idPrefix: idPrefix,
+              idSeparator: idSeparator,
               formData: (formData || {})[name],
               wasPropertyKeyModified: _this2.state.wasPropertyKeyModified,
               onKeyChange: _this2.onKeyChange(name),
@@ -26215,7 +26343,7 @@ function getDisplayLabel(schema, uiSchema, rootSchema) {
   var schemaType = getSchemaType(schema);
 
   if (schemaType === "array") {
-    displayLabel = isMultiSelect(schema, rootSchema) || isFilesArray(schema, uiSchema, rootSchema);
+    displayLabel = isMultiSelect(schema, rootSchema) || isFilesArray(schema, uiSchema, rootSchema) || isCustomWidget(uiSchema);
   }
 
   if (schemaType === "object") {
@@ -26392,6 +26520,12 @@ function isFixedItems(schema) {
     return isObject(item);
   });
 }
+function isCustomWidget(uiSchema) {
+  return (// TODO: Remove the `&& uiSchema["ui:widget"] !== "hidden"` once we support hidden widgets for arrays.
+    // https://react-jsonschema-form.readthedocs.io/en/latest/usage/widgets/#hidden-widgets
+    "widget" in getUiOptions(uiSchema) && getUiOptions(uiSchema)["widget"] !== "hidden"
+  );
+}
 function allowAdditionalItems(schema) {
   if (schema.additionalItems === true) {
     console.warn("additionalItems=true is currently not supported");
@@ -26794,6 +26928,7 @@ function shouldRender(comp, nextProps, nextState) {
 function toIdSchema(schema, id, rootSchema) {
   var formData = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   var idPrefix = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "root";
+  var idSeparator = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : "_";
   var idSchema = {
     $id: id || idPrefix
   };
@@ -26801,11 +26936,11 @@ function toIdSchema(schema, id, rootSchema) {
   if ("$ref" in schema || "dependencies" in schema || "allOf" in schema) {
     var _schema = retrieveSchema(schema, rootSchema, formData);
 
-    return toIdSchema(_schema, id, rootSchema, formData, idPrefix);
+    return toIdSchema(_schema, id, rootSchema, formData, idPrefix, idSeparator);
   }
 
   if ("items" in schema && !schema.items.$ref) {
-    return toIdSchema(schema.items, id, rootSchema, formData, idPrefix);
+    return toIdSchema(schema.items, id, rootSchema, formData, idPrefix, idSeparator);
   }
 
   if (schema.type !== "object") {
@@ -26814,10 +26949,10 @@ function toIdSchema(schema, id, rootSchema) {
 
   for (var name in schema.properties || {}) {
     var field = schema.properties[name];
-    var fieldId = idSchema.$id + "_" + name;
+    var fieldId = idSchema.$id + idSeparator + name;
     idSchema[name] = toIdSchema(isObject(field) ? field : {}, fieldId, rootSchema, // It's possible that formData is not an object -- this can happen if an
     // array item has just been added, but not populated with data yet
-    (formData || {})[name], idPrefix);
+    (formData || {})[name], idPrefix, idSeparator);
   }
 
   return idSchema;
@@ -27272,6 +27407,7 @@ function SchemaFieldRender(props) {
       formData = props.formData,
       errorSchema = props.errorSchema,
       idPrefix = props.idPrefix,
+      idSeparator = props.idSeparator,
       name = props.name,
       onChange = props.onChange,
       onKeyChange = props.onKeyChange,
@@ -27287,7 +27423,7 @@ function SchemaFieldRender(props) {
   var FieldTemplate = uiSchema["ui:FieldTemplate"] || registry.FieldTemplate || DefaultTemplate;
   var idSchema = props.idSchema;
   var schema = retrieveSchema(props.schema, rootSchema, formData);
-  idSchema = mergeObjects(toIdSchema(schema, null, rootSchema, formData, idPrefix), idSchema);
+  idSchema = mergeObjects(toIdSchema(schema, null, rootSchema, formData, idPrefix, idSeparator), idSchema);
   var FieldComponent = getFieldComponent(schema, uiSchema, idSchema, fields);
   var DescriptionField = fields.DescriptionField;
   var disabled = Boolean(props.disabled || uiSchema["ui:disabled"]);