@rjsf/core 5.3.0 → 5.4.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];
@@ -1803,12 +1835,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 +1863,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 +1875,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 +1888,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 +1947,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 +2106,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) {
@@ -2457,16 +2495,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
@@ -2744,22 +2782,25 @@
       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));
@@ -2769,17 +2810,16 @@
       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) {
@@ -2840,6 +2880,7 @@
    * @param props - The `WidgetProps` for this component
    */
   function CheckboxWidget(_ref) {
+    var _options$description;
     var schema = _ref.schema,
       uiSchema = _ref.uiSchema,
       options = _ref.options,
@@ -2848,6 +2889,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,
@@ -2868,11 +2910,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
@@ -2889,9 +2932,9 @@
           onBlur: handleBlur,
           onFocus: handleFocus,
           "aria-describedby": utils.ariaDescribedByIds(id)
-        }), jsxRuntime.jsx("span", {
+        }), utils.labelValue(jsxRuntime.jsx("span", {
           children: label
-        })]
+        }), hideLabel)]
       })]
     });
   }
@@ -3079,9 +3122,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;
     }
@@ -3092,10 +3164,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);
       })
     });
@@ -3108,6 +3183,7 @@
         blob = _dataURItoBlob.blob,
         name = _dataURItoBlob.name;
       return {
+        dataURL: dataURL,
         name: name,
         size: blob.size,
         type: blob.type
@@ -3158,7 +3234,8 @@
         accept: options.accept ? String(options.accept) : undefined
       })), jsxRuntime.jsx(FilesInfo, {
         filesInfo: filesInfo,
-        registry: registry
+        registry: registry,
+        preview: options.filePreview
       })]
     });
   }