@rjsf/core 5.3.1 → 5.5.0

package/dist/core.cjs.development.js

@@ -102,9 +102,9 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 
-var _excluded$9 = ["widget"],
-  _excluded2 = ["widget"],
-  _excluded3 = ["widget"];
+var _excluded$9 = ["widget", "title"],
+  _excluded2 = ["widget", "title"],
+  _excluded3 = ["widget", "title"];
 /** Used to generate a unique ID for an element in a row */
 function generateRowId() {
   return nanoid.nanoid();
@@ -525,6 +525,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
   /** Renders an array using the custom widget provided by the user in the `uiSchema`
    */;
   _proto.renderCustomWidget = function renderCustomWidget() {
+    var _ref;
     var _this$props9 = this.props,
       schema = _this$props9.schema,
       idSchema = _this$props9.idSchema,
@@ -547,12 +548,16 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       rawErrors = _this$props9.rawErrors,
       name = _this$props9.name;
     var widgets = registry.widgets,
-      formContext = registry.formContext;
-    var title = schema.title || name;
-    var _getUiOptions2 = utils.getUiOptions(uiSchema),
+      formContext = registry.formContext,
+      globalUiOptions = registry.globalUiOptions,
+      schemaUtils = registry.schemaUtils;
+    var _getUiOptions2 = utils.getUiOptions(uiSchema, globalUiOptions),
       widget = _getUiOptions2.widget,
+      uiTitle = _getUiOptions2.title,
       options = _objectWithoutPropertiesLoose(_getUiOptions2, _excluded$9);
     var Widget = utils.getWidget(schema, widget, widgets);
+    var label = (_ref = uiTitle != null ? uiTitle : schema.title) != null ? _ref : name;
+    var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     return jsxRuntime.jsx(Widget, {
       id: idSchema.$id,
       name: name,
@@ -569,7 +574,8 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       readonly: readonly,
       hideError: hideError,
       required: required,
-      label: title,
+      label: label,
+      hideLabel: !displayLabel,
       placeholder: placeholder,
       formContext: formContext,
       autofocus: autofocus,
@@ -579,6 +585,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
   /** Renders an array as a set of checkboxes
    */;
   _proto.renderMultiSelect = function renderMultiSelect() {
+    var _ref2;
     var _this$props10 = this.props,
       schema = _this$props10.schema,
       idSchema = _this$props10.idSchema,
@@ -601,15 +608,18 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       name = _this$props10.name;
     var widgets = registry.widgets,
       schemaUtils = registry.schemaUtils,
-      formContext = registry.formContext;
+      formContext = registry.formContext,
+      globalUiOptions = registry.globalUiOptions;
     var itemsSchema = schemaUtils.retrieveSchema(schema.items, items);
-    var title = schema.title || name;
     var enumOptions = utils.optionsList(itemsSchema);
-    var _getUiOptions3 = utils.getUiOptions(uiSchema),
+    var _getUiOptions3 = utils.getUiOptions(uiSchema, globalUiOptions),
       _getUiOptions3$widget = _getUiOptions3.widget,
       widget = _getUiOptions3$widget === void 0 ? 'select' : _getUiOptions3$widget,
+      uiTitle = _getUiOptions3.title,
       options = _objectWithoutPropertiesLoose(_getUiOptions3, _excluded2);
     var Widget = utils.getWidget(schema, widget, widgets);
+    var label = (_ref2 = uiTitle != null ? uiTitle : schema.title) != null ? _ref2 : name;
+    var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     return jsxRuntime.jsx(Widget, {
       id: idSchema.$id,
       name: name,
@@ -627,7 +637,8 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       disabled: disabled,
       readonly: readonly,
       required: required,
-      label: title,
+      label: label,
+      hideLabel: !displayLabel,
       placeholder: placeholder,
       formContext: formContext,
       autofocus: autofocus,
@@ -637,6 +648,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
   /** Renders an array of files using the `FileWidget`
    */;
   _proto.renderFiles = function renderFiles() {
+    var _ref3;
     var _this$props11 = this.props,
       schema = _this$props11.schema,
       uiSchema = _this$props11.uiSchema,
@@ -656,14 +668,18 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       _this$props11$formDat = _this$props11.formData,
       items = _this$props11$formDat === void 0 ? [] : _this$props11$formDat,
       rawErrors = _this$props11.rawErrors;
-    var title = schema.title || name;
     var widgets = registry.widgets,
-      formContext = registry.formContext;
-    var _getUiOptions4 = utils.getUiOptions(uiSchema),
+      formContext = registry.formContext,
+      globalUiOptions = registry.globalUiOptions,
+      schemaUtils = registry.schemaUtils;
+    var _getUiOptions4 = utils.getUiOptions(uiSchema, globalUiOptions),
       _getUiOptions4$widget = _getUiOptions4.widget,
       widget = _getUiOptions4$widget === void 0 ? 'files' : _getUiOptions4$widget,
+      uiTitle = _getUiOptions4.title,
       options = _objectWithoutPropertiesLoose(_getUiOptions4, _excluded3);
     var Widget = utils.getWidget(schema, widget, widgets);
+    var label = (_ref3 = uiTitle != null ? uiTitle : schema.title) != null ? _ref3 : name;
+    var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     return jsxRuntime.jsx(Widget, {
       options: options,
       id: idSchema.$id,
@@ -674,7 +690,6 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       onFocus: onFocus,
       schema: schema,
       uiSchema: uiSchema,
-      title: title,
       value: items,
       disabled: disabled,
       readonly: readonly,
@@ -683,7 +698,8 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       formContext: formContext,
       autofocus: autofocus,
       rawErrors: rawErrors,
-      label: ''
+      label: label,
+      hideLabel: !displayLabel
     });
   }
   /** Renders an array that has a maximum limit of items
@@ -895,13 +911,14 @@ var ArrayField = /*#__PURE__*/function (_Component) {
   return ArrayField;
 }(react.Component);
 
-var _excluded$8 = ["widget"];
+var _excluded$8 = ["widget", "title", "label"];
 /** 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) {
+  var _ref;
   var schema = props.schema,
     name = props.name,
     uiSchema = props.uiSchema,
@@ -919,15 +936,20 @@ function BooleanField(props) {
   var title = schema.title;
   var widgets = registry.widgets,
     formContext = registry.formContext,
-    translateString = registry.translateString;
-  var _getUiOptions = utils.getUiOptions(uiSchema),
+    translateString = registry.translateString,
+    globalUiOptions = registry.globalUiOptions;
+  var _getUiOptions = utils.getUiOptions(uiSchema, globalUiOptions),
     _getUiOptions$widget = _getUiOptions.widget,
     widget = _getUiOptions$widget === void 0 ? 'checkbox' : _getUiOptions$widget,
+    uiTitle = _getUiOptions.title,
+    _getUiOptions$label = _getUiOptions.label,
+    displayLabel = _getUiOptions$label === void 0 ? true : _getUiOptions$label,
     options = _objectWithoutPropertiesLoose(_getUiOptions, _excluded$8);
   var Widget = utils.getWidget(schema, widget, widgets);
   var yes = translateString(utils.TranslatableString.YesLabel);
   var no = translateString(utils.TranslatableString.NoLabel);
   var enumOptions;
+  var label = (_ref = uiTitle != null ? uiTitle : title) != null ? _ref : name;
   if (Array.isArray(schema.oneOf)) {
     enumOptions = utils.optionsList({
       oneOf: schema.oneOf.map(function (option) {
@@ -975,7 +997,8 @@ function BooleanField(props) {
     onChange: onChange,
     onFocus: onFocus,
     onBlur: onBlur,
-    label: title === undefined ? name : title,
+    label: label,
+    hideLabel: !displayLabel,
     value: formData,
     required: required,
     disabled: disabled,
@@ -1128,12 +1151,14 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
       uiSchema = _this$props5.uiSchema;
     var widgets = registry.widgets,
       fields = registry.fields,
-      translateString = registry.translateString;
+      translateString = registry.translateString,
+      globalUiOptions = registry.globalUiOptions,
+      schemaUtils = registry.schemaUtils;
     var _SchemaField = fields.SchemaField;
     var _this$state2 = this.state,
       selectedOption = _this$state2.selectedOption,
       retrievedOptions = _this$state2.retrievedOptions;
-    var _getUiOptions = utils.getUiOptions(uiSchema),
+    var _getUiOptions = utils.getUiOptions(uiSchema, globalUiOptions),
       _getUiOptions$widget = _getUiOptions.widget,
       widget = _getUiOptions$widget === void 0 ? 'select' : _getUiOptions$widget,
       placeholder = _getUiOptions.placeholder,
@@ -1147,6 +1172,7 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
     }, widget, widgets);
     var rawErrors = get__default["default"](errorSchema, utils.ERRORS_KEY, []);
     var fieldErrorSchema = omit__default["default"](errorSchema, [utils.ERRORS_KEY]);
+    var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     var option = selectedOption >= 0 ? retrievedOptions[selectedOption] || null : null;
     var optionSchema;
     if (option) {
@@ -1191,7 +1217,8 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
           placeholder: placeholder,
           autocomplete: autocomplete,
           autofocus: autofocus,
-          label: ''
+          label: title != null ? title : name,
+          hideLabel: !displayLabel
         })
       }), option !== null && jsxRuntime.jsx(_SchemaField, _extends({}, this.props, {
         schema: optionSchema
@@ -1446,7 +1473,10 @@ var ObjectField = /*#__PURE__*/function (_Component) {
   /** Renders the `ObjectField` from the given props
    */
   _proto.render = function render() {
-    var _this2 = this;
+    var _ref2,
+      _uiOptions$title,
+      _uiOptions$descriptio,
+      _this2 = this;
     var _this$props6 = this.props,
       rawSchema = _this$props6.schema,
       _this$props6$uiSchema = _this$props6.uiSchema,
@@ -1470,14 +1500,15 @@ var ObjectField = /*#__PURE__*/function (_Component) {
     var fields = registry.fields,
       formContext = registry.formContext,
       schemaUtils = registry.schemaUtils,
-      translateString = registry.translateString;
+      translateString = registry.translateString,
+      globalUiOptions = registry.globalUiOptions;
     var SchemaField = fields.SchemaField;
     var schema = schemaUtils.retrieveSchema(rawSchema, formData);
-    var uiOptions = utils.getUiOptions(uiSchema);
+    var uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
     var _schema$properties = schema.properties,
       schemaProperties = _schema$properties === void 0 ? {} : _schema$properties;
-    var title = uiOptions.title || (schema.title === undefined ? name : schema.title);
-    var description = uiOptions.description || schema.description;
+    var title = (_ref2 = (_uiOptions$title = uiOptions.title) != null ? _uiOptions$title : schema.title) != null ? _ref2 : name;
+    var description = (_uiOptions$descriptio = uiOptions.description) != null ? _uiOptions$descriptio : schema.description;
     var orderedProperties;
     try {
       var properties = Object.keys(schemaProperties);
@@ -1499,8 +1530,9 @@ var ObjectField = /*#__PURE__*/function (_Component) {
     }
     var Template = utils.getTemplate('ObjectFieldTemplate', registry, uiOptions);
     var templateProps = {
-      title: title,
-      description: description,
+      // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
+      title: uiOptions.label === false ? '' : title,
+      description: uiOptions.label === false ? undefined : description,
       properties: orderedProperties.map(function (name) {
         var addedByAdditionalProperties = has__default["default"](schema, [utils.PROPERTIES_KEY, name, utils.ADDITIONAL_PROPERTY_FLAG]);
         var fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
@@ -1541,6 +1573,7 @@ var ObjectField = /*#__PURE__*/function (_Component) {
       required: required,
       idSchema: idSchema,
       uiSchema: uiSchema,
+      errorSchema: errorSchema,
       schema: schema,
       formData: formData,
       formContext: formContext,
@@ -1817,12 +1850,13 @@ var SchemaField = /*#__PURE__*/function (_Component) {
   return SchemaField;
 }(react.Component);
 
-var _excluded$5 = ["widget", "placeholder"];
+var _excluded$5 = ["widget", "placeholder", "title"];
 /** 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) {
+  var _ref;
   var schema = props.schema,
     name = props.name,
     uiSchema = props.uiSchema,
@@ -1844,7 +1878,8 @@ function StringField(props) {
     format = schema.format;
   var widgets = registry.widgets,
     formContext = registry.formContext,
-    schemaUtils = registry.schemaUtils;
+    schemaUtils = registry.schemaUtils,
+    globalUiOptions = registry.globalUiOptions;
   var enumOptions = schemaUtils.isSelect(schema) ? utils.optionsList(schema) : undefined;
   var defaultWidget = enumOptions ? 'select' : 'text';
   if (format && utils.hasWidget(schema, format, widgets)) {
@@ -1855,7 +1890,10 @@ function StringField(props) {
     widget = _getUiOptions$widget === void 0 ? defaultWidget : _getUiOptions$widget,
     _getUiOptions$placeho = _getUiOptions.placeholder,
     placeholder = _getUiOptions$placeho === void 0 ? '' : _getUiOptions$placeho,
+    uiTitle = _getUiOptions.title,
     options = _objectWithoutPropertiesLoose(_getUiOptions, _excluded$5);
+  var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+  var label = (_ref = uiTitle != null ? uiTitle : title) != null ? _ref : name;
   var Widget = utils.getWidget(schema, widget, widgets);
   return jsxRuntime.jsx(Widget, {
     options: _extends({}, options, {
@@ -1865,7 +1903,8 @@ function StringField(props) {
     uiSchema: uiSchema,
     id: idSchema.$id,
     name: name,
-    label: title === undefined ? name : title,
+    label: label,
+    hideLabel: !displayLabel,
     value: formData,
     onChange: onChange,
     onBlur: onBlur,
@@ -1923,7 +1962,7 @@ function ArrayFieldDescriptionTemplate(props) {
     registry = props.registry,
     schema = props.schema,
     uiSchema = props.uiSchema;
-  var options = utils.getUiOptions(uiSchema);
+  var options = utils.getUiOptions(uiSchema, registry.globalUiOptions);
   var _options$label = options.label,
     displayLabel = _options$label === void 0 ? true : _options$label;
   if (!description || !displayLabel) {
@@ -2082,7 +2121,7 @@ function ArrayFieldTitleTemplate(props) {
     uiSchema = props.uiSchema,
     required = props.required,
     registry = props.registry;
-  var options = utils.getUiOptions(uiSchema);
+  var options = utils.getUiOptions(uiSchema, registry.globalUiOptions);
   var _options$label = options.label,
     displayLabel = _options$label === void 0 ? true : _options$label;
   if (!title || !displayLabel) {
@@ -2099,7 +2138,7 @@ function ArrayFieldTitleTemplate(props) {
   });
 }
 
-var _excluded$3 = ["id", "name", "value", "readonly", "disabled", "autofocus", "onBlur", "onFocus", "onChange", "onChangeOverride", "options", "schema", "uiSchema", "formContext", "registry", "rawErrors", "type"];
+var _excluded$3 = ["id", "name", "value", "readonly", "disabled", "autofocus", "onBlur", "onFocus", "onChange", "onChangeOverride", "options", "schema", "uiSchema", "formContext", "registry", "rawErrors", "type", "hideLabel", "hideError"];
 /** 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.
@@ -2187,7 +2226,7 @@ function SubmitButton(_ref) {
     children: jsxRuntime.jsx("button", _extends({
       type: 'submit'
     }, submitButtonProps, {
-      className: "btn btn-info " + submitButtonProps.className,
+      className: "btn btn-info " + (submitButtonProps.className || ''),
       children: submitText
     }))
   });
@@ -2471,16 +2510,16 @@ function ObjectFieldTemplate(props) {
   var AddButton = registry.templates.ButtonTemplates.AddButton;
   return jsxRuntime.jsxs("fieldset", {
     id: idSchema.$id,
-    children: [(options.title || title) && jsxRuntime.jsx(TitleFieldTemplate, {
+    children: [title && jsxRuntime.jsx(TitleFieldTemplate, {
       id: utils.titleId(idSchema),
-      title: options.title || title,
+      title: title,
       required: required,
       schema: schema,
       uiSchema: uiSchema,
       registry: registry
-    }), (options.description || description) && jsxRuntime.jsx(DescriptionFieldTemplate, {
+    }), description && jsxRuntime.jsx(DescriptionFieldTemplate, {
       id: utils.descriptionId(idSchema),
-      description: options.description || description,
+      description: description,
       schema: schema,
       uiSchema: uiSchema,
       registry: registry
@@ -2856,6 +2895,7 @@ function AltDateTimeWidget(_ref) {
  * @param props - The `WidgetProps` for this component
  */
 function CheckboxWidget(_ref) {
+  var _options$description;
   var schema = _ref.schema,
     uiSchema = _ref.uiSchema,
     options = _ref.options,
@@ -2864,6 +2904,7 @@ function CheckboxWidget(_ref) {
     disabled = _ref.disabled,
     readonly = _ref.readonly,
     label = _ref.label,
+    hideLabel = _ref.hideLabel,
     _ref$autofocus = _ref.autofocus,
     autofocus = _ref$autofocus === void 0 ? false : _ref$autofocus,
     onBlur = _ref.onBlur,
@@ -2884,11 +2925,12 @@ function CheckboxWidget(_ref) {
   var handleFocus = react.useCallback(function (event) {
     return onFocus(id, event.target.checked);
   }, [onFocus, id]);
+  var description = (_options$description = options.description) != null ? _options$description : schema.description;
   return jsxRuntime.jsxs("div", {
     className: "checkbox " + (disabled || readonly ? 'disabled' : ''),
-    children: [schema.description && jsxRuntime.jsx(DescriptionFieldTemplate, {
+    children: [!hideLabel && !!description && jsxRuntime.jsx(DescriptionFieldTemplate, {
       id: utils.descriptionId(id),
-      description: schema.description,
+      description: description,
       schema: schema,
       uiSchema: uiSchema,
       registry: registry
@@ -2905,9 +2947,9 @@ function CheckboxWidget(_ref) {
         onBlur: handleBlur,
         onFocus: handleFocus,
         "aria-describedby": utils.ariaDescribedByIds(id)
-      }), jsxRuntime.jsx("span", {
+      }), utils.labelValue(jsxRuntime.jsx("span", {
         children: label
-      })]
+      }), hideLabel)]
     })]
   });
 }
@@ -3095,9 +3137,38 @@ function processFile(file) {
 function processFiles(files) {
   return Promise.all(Array.from(files).map(processFile));
 }
-function FilesInfo(_ref) {
-  var filesInfo = _ref.filesInfo,
+function FileInfoPreview(_ref) {
+  var fileInfo = _ref.fileInfo,
     registry = _ref.registry;
+  var translateString = registry.translateString;
+  var dataURL = fileInfo.dataURL,
+    type = fileInfo.type,
+    name = fileInfo.name;
+  if (!dataURL) {
+    return null;
+  }
+  if (type.indexOf('image') !== -1) {
+    return jsxRuntime.jsx("img", {
+      src: dataURL,
+      style: {
+        maxWidth: '100%'
+      },
+      className: 'file-preview'
+    });
+  }
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [' ', jsxRuntime.jsx("a", {
+      download: "preview-" + name,
+      href: dataURL,
+      className: 'file-download',
+      children: translateString(utils.TranslatableString.PreviewLabel)
+    })]
+  });
+}
+function FilesInfo(_ref2) {
+  var filesInfo = _ref2.filesInfo,
+    registry = _ref2.registry,
+    preview = _ref2.preview;
   if (filesInfo.length === 0) {
     return null;
   }
@@ -3108,10 +3179,13 @@ function FilesInfo(_ref) {
       var name = fileInfo.name,
         size = fileInfo.size,
         type = fileInfo.type;
-      return jsxRuntime.jsx("li", {
-        children: jsxRuntime.jsx(Markdown__default["default"], {
+      return jsxRuntime.jsxs("li", {
+        children: [jsxRuntime.jsx(Markdown__default["default"], {
           children: translateString(utils.TranslatableString.FilesInfo, [name, type, String(size)])
-        })
+        }), preview && jsxRuntime.jsx(FileInfoPreview, {
+          fileInfo: fileInfo,
+          registry: registry
+        })]
       }, key);
     })
   });
@@ -3124,6 +3198,7 @@ function extractFileInfo(dataURLs) {
       blob = _dataURItoBlob.blob,
       name = _dataURItoBlob.name;
     return {
+      dataURL: dataURL,
       name: name,
       size: blob.size,
       type: blob.type
@@ -3137,6 +3212,7 @@ function extractFileInfo(dataURLs) {
 function FileWidget(props) {
   var disabled = props.disabled,
     readonly = props.readonly,
+    required = props.required,
     multiple = props.multiple,
     onChange = props.onChange,
     value = props.value,
@@ -3169,12 +3245,14 @@ function FileWidget(props) {
     children: [jsxRuntime.jsx(BaseInputTemplate, _extends({}, props, {
       disabled: disabled || readonly,
       type: 'file',
+      required: value ? false : required,
       onChangeOverride: handleChange,
       value: '',
       accept: options.accept ? String(options.accept) : undefined
     })), jsxRuntime.jsx(FilesInfo, {
       filesInfo: filesInfo,
-      registry: registry
+      registry: registry,
+      preview: options.filePreview
     })]
   });
 }
@@ -3225,8 +3303,6 @@ function RadioWidget(_ref) {
     onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     id = _ref.id;
-  // Generating a unique field name to identify this set of radio buttons
-  var name = Math.random().toString();
   var enumOptions = options.enumOptions,
     enumDisabled = options.enumDisabled,
     inline = options.inline,
@@ -3254,7 +3330,7 @@ function RadioWidget(_ref) {
           type: 'radio',
           id: utils.optionId(id, i),
           checked: checked,
-          name: name,
+          name: id,
           required: required,
           value: String(i),
           disabled: disabled || itemDisabled || readonly,
@@ -3937,6 +4013,10 @@ var Form = /*#__PURE__*/function (_Component) {
       // if not an exact match, try finding an input starting with the element id (like radio buttons or checkboxes)
       field = this.formElement.current.querySelector("input[id^=" + elementId);
     }
+    if (field.length) {
+      // If we got a list with length > 0
+      field = field[0];
+    }
     if (field) {
       field.focus();
     }