@rjsf/core 5.3.0 → 5.4.0

package/dist/core.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Component, useState, useCallback, useEffect, useReducer, useMemo, createRef, forwardRef } from 'react';
-import { isFixedItems, allowAdditionalItems, getUiOptions, ITEMS_KEY, getTemplate, TranslatableString, isCustomWidget, getWidget, optionsList, deepEquals, ERRORS_KEY, asNumber, REF_KEY, orderProperties, PROPERTIES_KEY, ADDITIONAL_PROPERTY_FLAG, ANY_OF_KEY, ONE_OF_KEY, mergeObjects, UI_OPTIONS_KEY, descriptionId, getSchemaType, ID_KEY, hasWidget, titleId, getInputProps, examplesId, ariaDescribedByIds, getSubmitButtonOptions, errorId, helpId, canExpand, parseDateString, toDateString, pad, schemaRequiresTrueValue, enumOptionsValueForIndex, enumOptionsIsSelected, optionId, enumOptionsSelectValue, enumOptionsDeselectValue, utcToLocal, localToUTC, dataURItoBlob, enumOptionsIndexForValue, englishStringTranslator, createSchemaUtils, shouldRender, UI_GLOBAL_OPTIONS_KEY, isObject as isObject$1, RJSF_ADDITONAL_PROPERTIES_FLAG, NAME_KEY } from '@rjsf/utils';
+import { isFixedItems, allowAdditionalItems, getUiOptions, ITEMS_KEY, getTemplate, TranslatableString, isCustomWidget, getWidget, optionsList, deepEquals, ERRORS_KEY, asNumber, REF_KEY, orderProperties, PROPERTIES_KEY, ADDITIONAL_PROPERTY_FLAG, ANY_OF_KEY, ONE_OF_KEY, mergeObjects, UI_OPTIONS_KEY, descriptionId, getSchemaType, ID_KEY, hasWidget, titleId, getInputProps, examplesId, ariaDescribedByIds, getSubmitButtonOptions, errorId, helpId, canExpand, parseDateString, toDateString, pad, schemaRequiresTrueValue, labelValue, enumOptionsValueForIndex, enumOptionsIsSelected, optionId, enumOptionsSelectValue, enumOptionsDeselectValue, utcToLocal, localToUTC, dataURItoBlob, enumOptionsIndexForValue, englishStringTranslator, createSchemaUtils, shouldRender, UI_GLOBAL_OPTIONS_KEY, isObject as isObject$1, RJSF_ADDITONAL_PROPERTIES_FLAG, NAME_KEY } from '@rjsf/utils';
 import get from 'lodash-es/get';
 import isEmpty from 'lodash-es/isEmpty';
 import _pick from 'lodash-es/pick';
@@ -84,9 +84,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();
@@ -507,6 +507,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,
@@ -529,12 +530,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 = getUiOptions(uiSchema),
+      formContext = registry.formContext,
+      globalUiOptions = registry.globalUiOptions,
+      schemaUtils = registry.schemaUtils;
+    var _getUiOptions2 = getUiOptions(uiSchema, globalUiOptions),
       widget = _getUiOptions2.widget,
+      uiTitle = _getUiOptions2.title,
       options = _objectWithoutPropertiesLoose(_getUiOptions2, _excluded$9);
     var Widget = getWidget(schema, widget, widgets);
+    var label = (_ref = uiTitle != null ? uiTitle : schema.title) != null ? _ref : name;
+    var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     return jsx(Widget, {
       id: idSchema.$id,
       name: name,
@@ -551,7 +556,8 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       readonly: readonly,
       hideError: hideError,
       required: required,
-      label: title,
+      label: label,
+      hideLabel: !displayLabel,
       placeholder: placeholder,
       formContext: formContext,
       autofocus: autofocus,
@@ -561,6 +567,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,
@@ -583,15 +590,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 = optionsList(itemsSchema);
-    var _getUiOptions3 = getUiOptions(uiSchema),
+    var _getUiOptions3 = getUiOptions(uiSchema, globalUiOptions),
       _getUiOptions3$widget = _getUiOptions3.widget,
       widget = _getUiOptions3$widget === void 0 ? 'select' : _getUiOptions3$widget,
+      uiTitle = _getUiOptions3.title,
       options = _objectWithoutPropertiesLoose(_getUiOptions3, _excluded2);
     var Widget = getWidget(schema, widget, widgets);
+    var label = (_ref2 = uiTitle != null ? uiTitle : schema.title) != null ? _ref2 : name;
+    var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     return jsx(Widget, {
       id: idSchema.$id,
       name: name,
@@ -609,7 +619,8 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       disabled: disabled,
       readonly: readonly,
       required: required,
-      label: title,
+      label: label,
+      hideLabel: !displayLabel,
       placeholder: placeholder,
       formContext: formContext,
       autofocus: autofocus,
@@ -619,6 +630,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,
@@ -638,14 +650,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 = getUiOptions(uiSchema),
+      formContext = registry.formContext,
+      globalUiOptions = registry.globalUiOptions,
+      schemaUtils = registry.schemaUtils;
+    var _getUiOptions4 = getUiOptions(uiSchema, globalUiOptions),
       _getUiOptions4$widget = _getUiOptions4.widget,
       widget = _getUiOptions4$widget === void 0 ? 'files' : _getUiOptions4$widget,
+      uiTitle = _getUiOptions4.title,
       options = _objectWithoutPropertiesLoose(_getUiOptions4, _excluded3);
     var Widget = getWidget(schema, widget, widgets);
+    var label = (_ref3 = uiTitle != null ? uiTitle : schema.title) != null ? _ref3 : name;
+    var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     return jsx(Widget, {
       options: options,
       id: idSchema.$id,
@@ -656,7 +672,6 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       onFocus: onFocus,
       schema: schema,
       uiSchema: uiSchema,
-      title: title,
       value: items,
       disabled: disabled,
       readonly: readonly,
@@ -665,7 +680,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
@@ -877,13 +893,14 @@ var ArrayField = /*#__PURE__*/function (_Component) {
   return ArrayField;
 }(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,
@@ -901,15 +918,20 @@ function BooleanField(props) {
   var title = schema.title;
   var widgets = registry.widgets,
     formContext = registry.formContext,
-    translateString = registry.translateString;
-  var _getUiOptions = getUiOptions(uiSchema),
+    translateString = registry.translateString,
+    globalUiOptions = registry.globalUiOptions;
+  var _getUiOptions = 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 = getWidget(schema, widget, widgets);
   var yes = translateString(TranslatableString.YesLabel);
   var no = translateString(TranslatableString.NoLabel);
   var enumOptions;
+  var label = (_ref = uiTitle != null ? uiTitle : title) != null ? _ref : name;
   if (Array.isArray(schema.oneOf)) {
     enumOptions = optionsList({
       oneOf: schema.oneOf.map(function (option) {
@@ -957,7 +979,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,
@@ -1110,12 +1133,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 = getUiOptions(uiSchema),
+    var _getUiOptions = getUiOptions(uiSchema, globalUiOptions),
       _getUiOptions$widget = _getUiOptions.widget,
       widget = _getUiOptions$widget === void 0 ? 'select' : _getUiOptions$widget,
       placeholder = _getUiOptions.placeholder,
@@ -1129,6 +1154,7 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
     }, widget, widgets);
     var rawErrors = get(errorSchema, ERRORS_KEY, []);
     var fieldErrorSchema = omit(errorSchema, [ERRORS_KEY]);
+    var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     var option = selectedOption >= 0 ? retrievedOptions[selectedOption] || null : null;
     var optionSchema;
     if (option) {
@@ -1173,7 +1199,8 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
           placeholder: placeholder,
           autocomplete: autocomplete,
           autofocus: autofocus,
-          label: ''
+          label: title != null ? title : name,
+          hideLabel: !displayLabel
         })
       }), option !== null && jsx(_SchemaField, _extends({}, this.props, {
         schema: optionSchema
@@ -1428,7 +1455,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,
@@ -1452,14 +1482,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 = getUiOptions(uiSchema);
+    var uiOptions = 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);
@@ -1481,8 +1512,9 @@ var ObjectField = /*#__PURE__*/function (_Component) {
     }
     var Template = 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(schema, [PROPERTIES_KEY, name, ADDITIONAL_PROPERTY_FLAG]);
         var fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
@@ -1799,12 +1831,13 @@ var SchemaField = /*#__PURE__*/function (_Component) {
   return SchemaField;
 }(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,
@@ -1826,7 +1859,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) ? optionsList(schema) : undefined;
   var defaultWidget = enumOptions ? 'select' : 'text';
   if (format && hasWidget(schema, format, widgets)) {
@@ -1837,7 +1871,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 = getWidget(schema, widget, widgets);
   return jsx(Widget, {
     options: _extends({}, options, {
@@ -1847,7 +1884,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,
@@ -1905,7 +1943,7 @@ function ArrayFieldDescriptionTemplate(props) {
     registry = props.registry,
     schema = props.schema,
     uiSchema = props.uiSchema;
-  var options = getUiOptions(uiSchema);
+  var options = getUiOptions(uiSchema, registry.globalUiOptions);
   var _options$label = options.label,
     displayLabel = _options$label === void 0 ? true : _options$label;
   if (!description || !displayLabel) {
@@ -2064,7 +2102,7 @@ function ArrayFieldTitleTemplate(props) {
     uiSchema = props.uiSchema,
     required = props.required,
     registry = props.registry;
-  var options = getUiOptions(uiSchema);
+  var options = getUiOptions(uiSchema, registry.globalUiOptions);
   var _options$label = options.label,
     displayLabel = _options$label === void 0 ? true : _options$label;
   if (!title || !displayLabel) {
@@ -2453,16 +2491,16 @@ function ObjectFieldTemplate(props) {
   var AddButton = registry.templates.ButtonTemplates.AddButton;
   return jsxs("fieldset", {
     id: idSchema.$id,
-    children: [(options.title || title) && jsx(TitleFieldTemplate, {
+    children: [title && jsx(TitleFieldTemplate, {
       id: titleId(idSchema),
-      title: options.title || title,
+      title: title,
       required: required,
       schema: schema,
       uiSchema: uiSchema,
       registry: registry
-    }), (options.description || description) && jsx(DescriptionFieldTemplate, {
+    }), description && jsx(DescriptionFieldTemplate, {
       id: descriptionId(idSchema),
-      description: options.description || description,
+      description: description,
       schema: schema,
       uiSchema: uiSchema,
       registry: registry
@@ -2740,22 +2778,25 @@ function AltDateWidget(_ref2) {
     onChange = _ref2.onChange,
     value = _ref2.value;
   var translateString = registry.translateString;
+  var _useState = useState(value),
+    lastValue = _useState[0],
+    setLastValue = _useState[1];
   var _useReducer = useReducer(function (state, action) {
       return _extends({}, state, action);
     }, parseDateString(value, time)),
     state = _useReducer[0],
     setState = _useReducer[1];
   useEffect(function () {
-    if (value && value !== toDateString(state, time)) {
+    var stateValue = 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(parseDateString(value, time));
     }
-  }, [value, state, time]);
-  useEffect(function () {
-    if (readyForChange(state)) {
-      // Only propagate to parent state if we have a complete date{time}
-      onChange(toDateString(state, time));
-    }
-  }, [state, time, onChange]);
+  }, [time, value, onChange, state, lastValue]);
   var handleChange = useCallback(function (property, value) {
     var _setState;
     setState((_setState = {}, _setState[property] = value, _setState));
@@ -2765,17 +2806,16 @@ function AltDateWidget(_ref2) {
     if (disabled || readonly) {
       return;
     }
-    var nowDateObj = parseDateString(new Date().toJSON(), time);
-    setState(nowDateObj);
+    var nextState = parseDateString(new Date().toJSON(), time);
+    onChange(toDateString(nextState, time));
   }, [disabled, readonly, time]);
   var handleClear = useCallback(function (event) {
     event.preventDefault();
     if (disabled || readonly) {
       return;
     }
-    setState(parseDateString('', time));
     onChange(undefined);
-  }, [disabled, readonly, time, onChange]);
+  }, [disabled, readonly, onChange]);
   return jsxs("ul", {
     className: 'list-inline',
     children: [dateElementProps(state, time, options.yearsRange).map(function (elemProps, i) {
@@ -2836,6 +2876,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,
@@ -2844,6 +2885,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,
@@ -2864,11 +2906,12 @@ function CheckboxWidget(_ref) {
   var handleFocus = useCallback(function (event) {
     return onFocus(id, event.target.checked);
   }, [onFocus, id]);
+  var description = (_options$description = options.description) != null ? _options$description : schema.description;
   return jsxs("div", {
     className: "checkbox " + (disabled || readonly ? 'disabled' : ''),
-    children: [schema.description && jsx(DescriptionFieldTemplate, {
+    children: [!hideLabel && !!description && jsx(DescriptionFieldTemplate, {
       id: descriptionId(id),
-      description: schema.description,
+      description: description,
       schema: schema,
       uiSchema: uiSchema,
       registry: registry
@@ -2885,9 +2928,9 @@ function CheckboxWidget(_ref) {
         onBlur: handleBlur,
         onFocus: handleFocus,
         "aria-describedby": ariaDescribedByIds(id)
-      }), jsx("span", {
+      }), labelValue(jsx("span", {
         children: label
-      })]
+      }), hideLabel)]
     })]
   });
 }
@@ -3075,9 +3118,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 jsx("img", {
+      src: dataURL,
+      style: {
+        maxWidth: '100%'
+      },
+      className: 'file-preview'
+    });
+  }
+  return jsxs(Fragment, {
+    children: [' ', jsx("a", {
+      download: "preview-" + name,
+      href: dataURL,
+      className: 'file-download',
+      children: translateString(TranslatableString.PreviewLabel)
+    })]
+  });
+}
+function FilesInfo(_ref2) {
+  var filesInfo = _ref2.filesInfo,
+    registry = _ref2.registry,
+    preview = _ref2.preview;
   if (filesInfo.length === 0) {
     return null;
   }
@@ -3088,10 +3160,13 @@ function FilesInfo(_ref) {
       var name = fileInfo.name,
         size = fileInfo.size,
         type = fileInfo.type;
-      return jsx("li", {
-        children: jsx(Markdown, {
+      return jsxs("li", {
+        children: [jsx(Markdown, {
           children: translateString(TranslatableString.FilesInfo, [name, type, String(size)])
-        })
+        }), preview && jsx(FileInfoPreview, {
+          fileInfo: fileInfo,
+          registry: registry
+        })]
       }, key);
     })
   });
@@ -3104,6 +3179,7 @@ function extractFileInfo(dataURLs) {
       blob = _dataURItoBlob.blob,
       name = _dataURItoBlob.name;
     return {
+      dataURL: dataURL,
       name: name,
       size: blob.size,
       type: blob.type
@@ -3154,7 +3230,8 @@ function FileWidget(props) {
       accept: options.accept ? String(options.accept) : undefined
     })), jsx(FilesInfo, {
       filesInfo: filesInfo,
-      registry: registry
+      registry: registry,
+      preview: options.filePreview
     })]
   });
 }