@rjsf/core 5.3.0 → 5.4.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];
@@ -1817,12 +1849,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 +1877,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 +1889,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 +1902,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 +1961,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 +2120,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) {
@@ -2471,16 +2509,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
@@ -2758,22 +2796,25 @@ function AltDateWidget(_ref2) {
     onChange = _ref2.onChange,
     value = _ref2.value;
   var translateString = registry.translateString;
+  var _useState = react.useState(value),
+    lastValue = _useState[0],
+    setLastValue = _useState[1];
   var _useReducer = react.useReducer(function (state, action) {
       return _extends({}, state, action);
     }, utils.parseDateString(value, time)),
     state = _useReducer[0],
     setState = _useReducer[1];
   react.useEffect(function () {
-    if (value && value !== utils.toDateString(state, time)) {
+    var stateValue = utils.toDateString(state, time);
+    if (readyForChange(state) && stateValue !== value) {
+      // The user changed the date to a new valid data via the comboboxes, so call onChange
+      onChange(stateValue);
+    } else if (lastValue !== value) {
+      // We got a new value in the props
+      setLastValue(value);
       setState(utils.parseDateString(value, time));
     }
-  }, [value, state, time]);
-  react.useEffect(function () {
-    if (readyForChange(state)) {
-      // Only propagate to parent state if we have a complete date{time}
-      onChange(utils.toDateString(state, time));
-    }
-  }, [state, time, onChange]);
+  }, [time, value, onChange, state, lastValue]);
   var handleChange = react.useCallback(function (property, value) {
     var _setState;
     setState((_setState = {}, _setState[property] = value, _setState));
@@ -2783,17 +2824,16 @@ function AltDateWidget(_ref2) {
     if (disabled || readonly) {
       return;
     }
-    var nowDateObj = utils.parseDateString(new Date().toJSON(), time);
-    setState(nowDateObj);
+    var nextState = utils.parseDateString(new Date().toJSON(), time);
+    onChange(utils.toDateString(nextState, time));
   }, [disabled, readonly, time]);
   var handleClear = react.useCallback(function (event) {
     event.preventDefault();
     if (disabled || readonly) {
       return;
     }
-    setState(utils.parseDateString('', time));
     onChange(undefined);
-  }, [disabled, readonly, time, onChange]);
+  }, [disabled, readonly, onChange]);
   return jsxRuntime.jsxs("ul", {
     className: 'list-inline',
     children: [dateElementProps(state, time, options.yearsRange).map(function (elemProps, i) {
@@ -2854,6 +2894,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,
@@ -2862,6 +2903,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,
@@ -2882,11 +2924,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
@@ -2903,9 +2946,9 @@ function CheckboxWidget(_ref) {
         onBlur: handleBlur,
         onFocus: handleFocus,
         "aria-describedby": utils.ariaDescribedByIds(id)
-      }), jsxRuntime.jsx("span", {
+      }), utils.labelValue(jsxRuntime.jsx("span", {
         children: label
-      })]
+      }), hideLabel)]
     })]
   });
 }
@@ -3093,9 +3136,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;
   }
@@ -3106,10 +3178,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);
     })
   });
@@ -3122,6 +3197,7 @@ function extractFileInfo(dataURLs) {
       blob = _dataURItoBlob.blob,
       name = _dataURItoBlob.name;
     return {
+      dataURL: dataURL,
       name: name,
       size: blob.size,
       type: blob.type
@@ -3172,7 +3248,8 @@ function FileWidget(props) {
       accept: options.accept ? String(options.accept) : undefined
     })), jsxRuntime.jsx(FilesInfo, {
       filesInfo: filesInfo,
-      registry: registry
+      registry: registry,
+      preview: options.filePreview
     })]
   });
 }