@rjsf/core 5.3.1 → 5.5.0

package/dist/core.umd.development.js

@@ -88,9 +88,9 @@
     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();
@@ -511,6 +511,7 @@
     /** 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,
@@ -533,12 +534,16 @@
         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,
@@ -555,7 +560,8 @@
         readonly: readonly,
         hideError: hideError,
         required: required,
-        label: title,
+        label: label,
+        hideLabel: !displayLabel,
         placeholder: placeholder,
         formContext: formContext,
         autofocus: autofocus,
@@ -565,6 +571,7 @@
     /** 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,
@@ -587,15 +594,18 @@
         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,
@@ -613,7 +623,8 @@
         disabled: disabled,
         readonly: readonly,
         required: required,
-        label: title,
+        label: label,
+        hideLabel: !displayLabel,
         placeholder: placeholder,
         formContext: formContext,
         autofocus: autofocus,
@@ -623,6 +634,7 @@
     /** 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,
@@ -642,14 +654,18 @@
         _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,
@@ -660,7 +676,6 @@
         onFocus: onFocus,
         schema: schema,
         uiSchema: uiSchema,
-        title: title,
         value: items,
         disabled: disabled,
         readonly: readonly,
@@ -669,7 +684,8 @@
         formContext: formContext,
         autofocus: autofocus,
         rawErrors: rawErrors,
-        label: ''
+        label: label,
+        hideLabel: !displayLabel
       });
     }
     /** Renders an array that has a maximum limit of items
@@ -881,13 +897,14 @@
     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,
@@ -905,15 +922,20 @@
     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) {
@@ -961,7 +983,8 @@
       onChange: onChange,
       onFocus: onFocus,
       onBlur: onBlur,
-      label: title === undefined ? name : title,
+      label: label,
+      hideLabel: !displayLabel,
       value: formData,
       required: required,
       disabled: disabled,
@@ -1114,12 +1137,14 @@
         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,
@@ -1133,6 +1158,7 @@
       }, 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) {
@@ -1177,7 +1203,8 @@
             placeholder: placeholder,
             autocomplete: autocomplete,
             autofocus: autofocus,
-            label: ''
+            label: title != null ? title : name,
+            hideLabel: !displayLabel
           })
         }), option !== null && jsxRuntime.jsx(_SchemaField, _extends({}, this.props, {
           schema: optionSchema
@@ -1432,7 +1459,10 @@
     /** 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,
@@ -1456,14 +1486,15 @@
       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);
@@ -1485,8 +1516,9 @@
       }
       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];
@@ -1527,6 +1559,7 @@
         required: required,
         idSchema: idSchema,
         uiSchema: uiSchema,
+        errorSchema: errorSchema,
         schema: schema,
         formData: formData,
         formContext: formContext,
@@ -1803,12 +1836,13 @@
     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,
@@ -1830,7 +1864,8 @@
       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)) {
@@ -1841,7 +1876,10 @@
       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, {
@@ -1851,7 +1889,8 @@
       uiSchema: uiSchema,
       id: idSchema.$id,
       name: name,
-      label: title === undefined ? name : title,
+      label: label,
+      hideLabel: !displayLabel,
       value: formData,
       onChange: onChange,
       onBlur: onBlur,
@@ -1909,7 +1948,7 @@
       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) {
@@ -2068,7 +2107,7 @@
       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) {
@@ -2085,7 +2124,7 @@
     });
   }
 
-  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.
@@ -2173,7 +2212,7 @@
       children: jsxRuntime.jsx("button", _extends({
         type: 'submit'
       }, submitButtonProps, {
-        className: "btn btn-info " + submitButtonProps.className,
+        className: "btn btn-info " + (submitButtonProps.className || ''),
         children: submitText
       }))
     });
@@ -2457,16 +2496,16 @@
     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
@@ -2842,6 +2881,7 @@
    * @param props - The `WidgetProps` for this component
    */
   function CheckboxWidget(_ref) {
+    var _options$description;
     var schema = _ref.schema,
       uiSchema = _ref.uiSchema,
       options = _ref.options,
@@ -2850,6 +2890,7 @@
       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,
@@ -2870,11 +2911,12 @@
     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
@@ -2891,9 +2933,9 @@
           onBlur: handleBlur,
           onFocus: handleFocus,
           "aria-describedby": utils.ariaDescribedByIds(id)
-        }), jsxRuntime.jsx("span", {
+        }), utils.labelValue(jsxRuntime.jsx("span", {
           children: label
-        })]
+        }), hideLabel)]
       })]
     });
   }
@@ -3081,9 +3123,38 @@
   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;
     }
@@ -3094,10 +3165,13 @@
         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);
       })
     });
@@ -3110,6 +3184,7 @@
         blob = _dataURItoBlob.blob,
         name = _dataURItoBlob.name;
       return {
+        dataURL: dataURL,
         name: name,
         size: blob.size,
         type: blob.type
@@ -3123,6 +3198,7 @@
   function FileWidget(props) {
     var disabled = props.disabled,
       readonly = props.readonly,
+      required = props.required,
       multiple = props.multiple,
       onChange = props.onChange,
       value = props.value,
@@ -3155,12 +3231,14 @@
       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
       })]
     });
   }
@@ -3211,8 +3289,6 @@
       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,
@@ -3240,7 +3316,7 @@
             type: 'radio',
             id: utils.optionId(id, i),
             checked: checked,
-            name: name,
+            name: id,
             required: required,
             value: String(i),
             disabled: disabled || itemDisabled || readonly,
@@ -3923,6 +3999,10 @@
         // 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();
       }