@rjsf/core 5.15.0 → 5.16.0

package/dist/index.js

@@ -425,6 +425,7 @@ var ArrayField = class extends import_react.Component {
       errorSchema,
       idSchema,
       name,
+      title,
       disabled = false,
       readonly = false,
       autofocus = false,
@@ -437,7 +438,7 @@ var ArrayField = class extends import_react.Component {
       rawErrors
     } = this.props;
     const { keyedFormData } = this.state;
-    const title = schema.title === void 0 ? name : schema.title;
+    const fieldTitle = schema.title || title || name;
     const { schemaUtils, formContext } = registry;
     const uiOptions = (0, import_utils.getUiOptions)(uiSchema);
     const _schemaItems = (0, import_isObject.default)(schema.items) ? schema.items : {};
@@ -457,6 +458,7 @@ var ArrayField = class extends import_react.Component {
           key,
           index,
           name: name && `${name}-${index}`,
+          title: fieldTitle ? `${fieldTitle}-${index + 1}` : void 0,
           canAdd,
           canMoveUp: index > 0,
           canMoveDown: index < formData.length - 1,
@@ -480,7 +482,7 @@ var ArrayField = class extends import_react.Component {
       readonly,
       required,
       schema,
-      title,
+      title: fieldTitle,
       formContext,
       formData,
       rawErrors,
@@ -653,6 +655,7 @@ var ArrayField = class extends import_react.Component {
       idSeparator = "_",
       idSchema,
       name,
+      title,
       disabled = false,
       readonly = false,
       autofocus = false,
@@ -664,7 +667,7 @@ var ArrayField = class extends import_react.Component {
     } = this.props;
     const { keyedFormData } = this.state;
     let { formData: items = [] } = this.props;
-    const title = schema.title || name;
+    const fieldTitle = schema.title || title || name;
     const uiOptions = (0, import_utils.getUiOptions)(uiSchema);
     const { schemaUtils, formContext } = registry;
     const _schemaItems = (0, import_isObject.default)(schema.items) ? schema.items : [];
@@ -696,6 +699,7 @@ var ArrayField = class extends import_react.Component {
           key,
           index,
           name: name && `${name}-${index}`,
+          title: fieldTitle ? `${fieldTitle}-${index + 1}` : void 0,
           canAdd,
           canRemove: additional,
           canMoveUp: index >= itemSchemas.length + 1,
@@ -718,7 +722,7 @@ var ArrayField = class extends import_react.Component {
       registry,
       schema,
       uiSchema,
-      title,
+      title: fieldTitle,
       formContext,
       rawErrors
     };
@@ -748,7 +752,8 @@ var ArrayField = class extends import_react.Component {
       onBlur,
       onFocus,
       rawErrors,
-      totalItems
+      totalItems,
+      title
     } = props;
     const { disabled, hideError, idPrefix, idSeparator, readonly, uiSchema, registry, formContext } = this.props;
     const {
@@ -770,6 +775,7 @@ var ArrayField = class extends import_react.Component {
         ItemSchemaField,
         {
           name,
+          title,
           index,
           schema: itemSchema,
           uiSchema: itemUiSchema,
@@ -832,12 +838,13 @@ function BooleanField(props) {
     readonly,
     hideError,
     autofocus,
+    title,
     onChange,
     onFocus,
     onBlur,
     rawErrors
   } = props;
-  const { title } = schema;
+  const { title: schemaTitle } = schema;
   const { widgets: widgets2, formContext, translateString, globalUiOptions } = registry;
   const {
     widget = "checkbox",
@@ -850,7 +857,7 @@ function BooleanField(props) {
   const yes = translateString(import_utils2.TranslatableString.YesLabel);
   const no = translateString(import_utils2.TranslatableString.NoLabel);
   let enumOptions;
-  const label = uiTitle ?? title ?? name;
+  const label = uiTitle ?? schemaTitle ?? title ?? name;
   if (Array.isArray(schema.oneOf)) {
     enumOptions = (0, import_utils2.optionsList)({
       oneOf: schema.oneOf.map((option) => {
@@ -1299,14 +1306,15 @@ var ObjectField = class extends import_react4.Component {
       idSeparator,
       onBlur,
       onFocus,
-      registry
+      registry,
+      title
     } = this.props;
     const { fields: fields2, formContext, schemaUtils, translateString, globalUiOptions } = registry;
     const { SchemaField: SchemaField2 } = fields2;
     const schema = schemaUtils.retrieveSchema(rawSchema, formData);
     const uiOptions = (0, import_utils5.getUiOptions)(uiSchema, globalUiOptions);
     const { properties: schemaProperties = {} } = schema;
-    const title = uiOptions.title ?? schema.title ?? name;
+    const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
     const description = uiOptions.description ?? schema.description;
     let orderedProperties;
     try {
@@ -1321,7 +1329,7 @@ var ObjectField = class extends import_react4.Component {
     const Template = (0, import_utils5.getTemplate)("ObjectFieldTemplate", registry, uiOptions);
     const templateProps = {
       // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
-      title: uiOptions.label === false ? "" : title,
+      title: uiOptions.label === false ? "" : templateTitle,
       description: uiOptions.label === false ? void 0 : description,
       properties: orderedProperties.map((name2) => {
         const addedByAdditionalProperties = (0, import_has.default)(schema, [import_utils5.PROPERTIES_KEY, name2, import_utils5.ADDITIONAL_PROPERTY_FLAG]);
@@ -1507,7 +1515,7 @@ function SchemaFieldRender(props) {
   if (wasPropertyKeyModified) {
     label = name;
   } else {
-    label = import_utils6.ADDITIONAL_PROPERTY_FLAG in schema ? name : uiOptions.title || props.schema.title || schema.title || name;
+    label = import_utils6.ADDITIONAL_PROPERTY_FLAG in schema ? name : uiOptions.title || props.schema.title || schema.title || props.title || name;
   }
   const description = uiOptions.description || props.schema.description || schema.description || "";
   const richDescription = uiOptions.enableMarkdownInDescription ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_markdown_to_jsx2.default, { children: description }) : description;
@@ -2436,26 +2444,6 @@ function rangeOptions(start, stop) {
 function readyForChange(state) {
   return Object.values(state).every((value) => value !== -1);
 }
-function dateElementProps(state, time, yearsRange = [1900, (/* @__PURE__ */ new Date()).getFullYear() + 2]) {
-  const { year, month, day, hour, minute, second } = state;
-  const data = [
-    {
-      type: "year",
-      range: yearsRange,
-      value: year
-    },
-    { type: "month", range: [1, 12], value: month },
-    { type: "day", range: [1, 31], value: day }
-  ];
-  if (time) {
-    data.push(
-      { type: "hour", range: [0, 23], value: hour },
-      { type: "minute", range: [0, 59], value: minute },
-      { type: "second", range: [0, 59], value: second }
-    );
-  }
-  return data;
-}
 function DateElement({
   type,
   range,
@@ -2547,7 +2535,12 @@ function AltDateWidget({
     [disabled, readonly, onChange]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("ul", { className: "list-inline", children: [
-    dateElementProps(state, time, options.yearsRange).map((elemProps, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { className: "list-inline-item", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    (0, import_utils22.getDateElementProps)(
+      state,
+      time,
+      options.yearsRange,
+      options.format
+    ).map((elemProps, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { className: "list-inline-item", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       DateElement,
       {
         rootId: id,
@@ -2816,17 +2809,22 @@ function FileInfoPreview({
 function FilesInfo({
   filesInfo,
   registry,
-  preview
+  preview,
+  onRemove,
+  options
 }) {
   if (filesInfo.length === 0) {
     return null;
   }
   const { translateString } = registry;
+  const { RemoveButton: RemoveButton2 } = (0, import_utils29.getTemplate)("ButtonTemplates", registry, options);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { className: "file-info", children: filesInfo.map((fileInfo, key) => {
     const { name, size, type } = fileInfo;
+    const handleRemove = () => onRemove(key);
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("li", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_markdown_to_jsx4.default, { children: translateString(import_utils29.TranslatableString.FilesInfo, [name, type, String(size)]) }),
-      preview && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FileInfoPreview, { fileInfo, registry })
+      preview && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FileInfoPreview, { fileInfo, registry }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RemoveButton2, { onClick: handleRemove, registry })
     ] }, key);
   }) });
 }
@@ -2844,9 +2842,6 @@ function extractFileInfo(dataURLs) {
 function FileWidget(props) {
   const { disabled, readonly, required, multiple, onChange, value, options, registry } = props;
   const BaseInputTemplate2 = (0, import_utils29.getTemplate)("BaseInputTemplate", registry, options);
-  const [filesInfo, setFilesInfo] = (0, import_react12.useState)(
-    Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value])
-  );
   const handleChange = (0, import_react12.useCallback)(
     (event) => {
       if (!event.target.files) {
@@ -2855,15 +2850,25 @@ function FileWidget(props) {
       processFiles(event.target.files).then((filesInfoEvent) => {
         const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
         if (multiple) {
-          setFilesInfo(filesInfo.concat(filesInfoEvent[0]));
           onChange(value.concat(newValue[0]));
         } else {
-          setFilesInfo(filesInfoEvent);
           onChange(newValue[0]);
         }
       });
     },
-    [multiple, value, filesInfo, onChange]
+    [multiple, value, onChange]
+  );
+  const filesInfo = (0, import_react12.useMemo)(() => extractFileInfo(Array.isArray(value) ? value : [value]), [value]);
+  const rmFile = (0, import_react12.useCallback)(
+    (index) => {
+      if (multiple) {
+        const newValue = value.filter((_, i) => i !== index);
+        onChange(newValue);
+      } else {
+        onChange(void 0);
+      }
+    },
+    [multiple, value, onChange]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -2878,7 +2883,16 @@ function FileWidget(props) {
         accept: options.accept ? String(options.accept) : void 0
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FilesInfo, { filesInfo, registry, preview: options.filePreview })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      FilesInfo,
+      {
+        filesInfo,
+        onRemove: rmFile,
+        registry,
+        preview: options.filePreview,
+        options
+      }
+    )
   ] });
 }
 var FileWidget_default = FileWidget;
@@ -3223,7 +3237,7 @@ var Form = class extends import_react17.Component {
           } else if (key === import_utils39.NAME_KEY && _obj[key] !== "") {
             paths.forEach((path) => {
               const formValue = (0, import_get4.default)(formData, path);
-              if (typeof formValue !== "object" || (0, import_isEmpty2.default)(formValue)) {
+              if (typeof formValue !== "object" || (0, import_isEmpty2.default)(formValue) || Array.isArray(formValue) && formValue.every((val) => typeof val !== "object")) {
                 acc.push(path);
               }
             });
@@ -3380,6 +3394,17 @@ var Form = class extends import_react17.Component {
         );
       }
     };
+    /** Provides a function that can be used to programmatically submit the `Form` */
+    this.submit = () => {
+      if (this.formElement.current) {
+        this.formElement.current.dispatchEvent(
+          new CustomEvent("submit", {
+            cancelable: true
+          })
+        );
+        this.formElement.current.requestSubmit();
+      }
+    };
     if (!props.validator) {
       throw new Error("A validator is required for Form functionality to work");
     }
@@ -3588,17 +3613,6 @@ var Form = class extends import_react17.Component {
       globalUiOptions: uiSchema[import_utils39.UI_GLOBAL_OPTIONS_KEY]
     };
   }
-  /** Provides a function that can be used to programmatically submit the `Form` */
-  submit() {
-    if (this.formElement.current) {
-      this.formElement.current.dispatchEvent(
-        new CustomEvent("submit", {
-          cancelable: true
-        })
-      );
-      this.formElement.current.requestSubmit();
-    }
-  }
   /** Attempts to focus on the field associated with the `error`. Uses the `property` field to compute path of the error
    * field, then, using the `idPrefix` and `idSeparator` converts that path into an id. Then the input element with that
    * id is attempted to be found using the `formElement` ref. If it is located, then it is focused.