@rjsf/core 5.15.1 → 5.16.0

package/dist/core.umd.js

@@ -374,6 +374,7 @@
         errorSchema,
         idSchema,
         name,
+        title,
         disabled = false,
         readonly = false,
         autofocus = false,
@@ -386,7 +387,7 @@
         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 = utils.getUiOptions(uiSchema);
       const _schemaItems = isObject(schema.items) ? schema.items : {};
@@ -406,6 +407,7 @@
             key,
             index,
             name: name && `${name}-${index}`,
+            title: fieldTitle ? `${fieldTitle}-${index + 1}` : void 0,
             canAdd,
             canMoveUp: index > 0,
             canMoveDown: index < formData.length - 1,
@@ -429,7 +431,7 @@
         readonly,
         required,
         schema,
-        title,
+        title: fieldTitle,
         formContext,
         formData,
         rawErrors,
@@ -602,6 +604,7 @@
         idSeparator = "_",
         idSchema,
         name,
+        title,
         disabled = false,
         readonly = false,
         autofocus = false,
@@ -613,7 +616,7 @@
       } = this.props;
       const { keyedFormData } = this.state;
       let { formData: items = [] } = this.props;
-      const title = schema.title || name;
+      const fieldTitle = schema.title || title || name;
       const uiOptions = utils.getUiOptions(uiSchema);
       const { schemaUtils, formContext } = registry;
       const _schemaItems = isObject(schema.items) ? schema.items : [];
@@ -645,6 +648,7 @@
             key,
             index,
             name: name && `${name}-${index}`,
+            title: fieldTitle ? `${fieldTitle}-${index + 1}` : void 0,
             canAdd,
             canRemove: additional,
             canMoveUp: index >= itemSchemas.length + 1,
@@ -667,7 +671,7 @@
         registry,
         schema,
         uiSchema,
-        title,
+        title: fieldTitle,
         formContext,
         rawErrors
       };
@@ -697,7 +701,8 @@
         onBlur,
         onFocus,
         rawErrors,
-        totalItems
+        totalItems,
+        title
       } = props;
       const { disabled, hideError, idPrefix, idSeparator, readonly, uiSchema, registry, formContext } = this.props;
       const {
@@ -719,6 +724,7 @@
           ItemSchemaField,
           {
             name,
+            title,
             index,
             schema: itemSchema,
             uiSchema: itemUiSchema,
@@ -776,12 +782,13 @@
       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",
@@ -794,7 +801,7 @@
     const yes = translateString(utils.TranslatableString.YesLabel);
     const no = translateString(utils.TranslatableString.NoLabel);
     let enumOptions;
-    const label = uiTitle ?? title ?? name;
+    const label = uiTitle ?? schemaTitle ?? title ?? name;
     if (Array.isArray(schema.oneOf)) {
       enumOptions = utils.optionsList({
         oneOf: schema.oneOf.map((option) => {
@@ -1219,14 +1226,15 @@
         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 = utils.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 {
@@ -1241,7 +1249,7 @@
       const Template = utils.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 = has(schema, [utils.PROPERTIES_KEY, name2, utils.ADDITIONAL_PROPERTY_FLAG]);
@@ -1419,7 +1427,7 @@
     if (wasPropertyKeyModified) {
       label = name;
     } else {
-      label = utils.ADDITIONAL_PROPERTY_FLAG in schema ? name : uiOptions.title || props.schema.title || schema.title || name;
+      label = utils.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__ */ jsxRuntime.jsx(Markdown, { children: description }) : description;
@@ -2262,26 +2270,6 @@
   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,
@@ -2373,7 +2361,12 @@
       [disabled, readonly, onChange]
     );
     return /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "list-inline", children: [
-      dateElementProps(state, time, options.yearsRange).map((elemProps, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "list-inline-item", children: /* @__PURE__ */ jsxRuntime.jsx(
+      utils.getDateElementProps(
+        state,
+        time,
+        options.yearsRange,
+        options.format
+      ).map((elemProps, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "list-inline-item", children: /* @__PURE__ */ jsxRuntime.jsx(
         DateElement,
         {
           rootId: id,
@@ -2606,17 +2599,22 @@
   function FilesInfo({
     filesInfo,
     registry,
-    preview
+    preview,
+    onRemove,
+    options
   }) {
     if (filesInfo.length === 0) {
       return null;
     }
     const { translateString } = registry;
+    const { RemoveButton: RemoveButton2 } = utils.getTemplate("ButtonTemplates", registry, options);
     return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "file-info", children: filesInfo.map((fileInfo, key) => {
       const { name, size, type } = fileInfo;
+      const handleRemove = () => onRemove(key);
       return /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Markdown, { children: translateString(utils.TranslatableString.FilesInfo, [name, type, String(size)]) }),
-        preview && /* @__PURE__ */ jsxRuntime.jsx(FileInfoPreview, { fileInfo, registry })
+        preview && /* @__PURE__ */ jsxRuntime.jsx(FileInfoPreview, { fileInfo, registry }),
+        /* @__PURE__ */ jsxRuntime.jsx(RemoveButton2, { onClick: handleRemove, registry })
       ] }, key);
     }) });
   }
@@ -2634,9 +2632,6 @@
   function FileWidget(props) {
     const { disabled, readonly, required, multiple, onChange, value, options, registry } = props;
     const BaseInputTemplate2 = utils.getTemplate("BaseInputTemplate", registry, options);
-    const [filesInfo, setFilesInfo] = react.useState(
-      Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value])
-    );
     const handleChange = react.useCallback(
       (event) => {
         if (!event.target.files) {
@@ -2645,15 +2640,25 @@
         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 = react.useMemo(() => extractFileInfo(Array.isArray(value) ? value : [value]), [value]);
+    const rmFile = react.useCallback(
+      (index) => {
+        if (multiple) {
+          const newValue = value.filter((_, i) => i !== index);
+          onChange(newValue);
+        } else {
+          onChange(void 0);
+        }
+      },
+      [multiple, value, onChange]
     );
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2668,7 +2673,16 @@
           accept: options.accept ? String(options.accept) : void 0
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(FilesInfo, { filesInfo, registry, preview: options.filePreview })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FilesInfo,
+        {
+          filesInfo,
+          onRemove: rmFile,
+          registry,
+          preview: options.filePreview,
+          options
+        }
+      )
     ] });
   }
   var FileWidget_default = FileWidget;
@@ -3125,6 +3139,17 @@
           );
         }
       };
+      /** 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");
       }
@@ -3333,17 +3358,6 @@
         globalUiOptions: uiSchema[utils.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.

package/dist/index.esm.js

@@ -412,6 +412,7 @@ var ArrayField = class extends Component {
       errorSchema,
       idSchema,
       name,
+      title,
       disabled = false,
       readonly = false,
       autofocus = false,
@@ -424,7 +425,7 @@ var ArrayField = class extends 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 = getUiOptions(uiSchema);
     const _schemaItems = isObject(schema.items) ? schema.items : {};
@@ -444,6 +445,7 @@ var ArrayField = class extends Component {
           key,
           index,
           name: name && `${name}-${index}`,
+          title: fieldTitle ? `${fieldTitle}-${index + 1}` : void 0,
           canAdd,
           canMoveUp: index > 0,
           canMoveDown: index < formData.length - 1,
@@ -467,7 +469,7 @@ var ArrayField = class extends Component {
       readonly,
       required,
       schema,
-      title,
+      title: fieldTitle,
       formContext,
       formData,
       rawErrors,
@@ -640,6 +642,7 @@ var ArrayField = class extends Component {
       idSeparator = "_",
       idSchema,
       name,
+      title,
       disabled = false,
       readonly = false,
       autofocus = false,
@@ -651,7 +654,7 @@ var ArrayField = class extends 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 = getUiOptions(uiSchema);
     const { schemaUtils, formContext } = registry;
     const _schemaItems = isObject(schema.items) ? schema.items : [];
@@ -683,6 +686,7 @@ var ArrayField = class extends Component {
           key,
           index,
           name: name && `${name}-${index}`,
+          title: fieldTitle ? `${fieldTitle}-${index + 1}` : void 0,
           canAdd,
           canRemove: additional,
           canMoveUp: index >= itemSchemas.length + 1,
@@ -705,7 +709,7 @@ var ArrayField = class extends Component {
       registry,
       schema,
       uiSchema,
-      title,
+      title: fieldTitle,
       formContext,
       rawErrors
     };
@@ -735,7 +739,8 @@ var ArrayField = class extends Component {
       onBlur,
       onFocus,
       rawErrors,
-      totalItems
+      totalItems,
+      title
     } = props;
     const { disabled, hideError, idPrefix, idSeparator, readonly, uiSchema, registry, formContext } = this.props;
     const {
@@ -757,6 +762,7 @@ var ArrayField = class extends Component {
         ItemSchemaField,
         {
           name,
+          title,
           index,
           schema: itemSchema,
           uiSchema: itemUiSchema,
@@ -824,12 +830,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",
@@ -842,7 +849,7 @@ function BooleanField(props) {
   const yes = translateString(TranslatableString2.YesLabel);
   const no = translateString(TranslatableString2.NoLabel);
   let enumOptions;
-  const label = uiTitle ?? title ?? name;
+  const label = uiTitle ?? schemaTitle ?? title ?? name;
   if (Array.isArray(schema.oneOf)) {
     enumOptions = optionsList2({
       oneOf: schema.oneOf.map((option) => {
@@ -1309,14 +1316,15 @@ var ObjectField = class extends Component3 {
       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 = getUiOptions4(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 {
@@ -1331,7 +1339,7 @@ var ObjectField = class extends Component3 {
     const Template = getTemplate2("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 = has(schema, [PROPERTIES_KEY, name2, ADDITIONAL_PROPERTY_FLAG]);
@@ -1528,7 +1536,7 @@ function SchemaFieldRender(props) {
   if (wasPropertyKeyModified) {
     label = name;
   } else {
-    label = ADDITIONAL_PROPERTY_FLAG2 in schema ? name : uiOptions.title || props.schema.title || schema.title || name;
+    label = ADDITIONAL_PROPERTY_FLAG2 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__ */ jsx6(Markdown2, { children: description }) : description;
@@ -2484,7 +2492,8 @@ import {
   parseDateString,
   toDateString,
   pad,
-  TranslatableString as TranslatableString11
+  TranslatableString as TranslatableString11,
+  getDateElementProps
 } from "@rjsf/utils";
 import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 function rangeOptions(start, stop) {
@@ -2497,26 +2506,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,
@@ -2608,7 +2597,12 @@ function AltDateWidget({
     [disabled, readonly, onChange]
   );
   return /* @__PURE__ */ jsxs14("ul", { className: "list-inline", children: [
-    dateElementProps(state, time, options.yearsRange).map((elemProps, i) => /* @__PURE__ */ jsx26("li", { className: "list-inline-item", children: /* @__PURE__ */ jsx26(
+    getDateElementProps(
+      state,
+      time,
+      options.yearsRange,
+      options.format
+    ).map((elemProps, i) => /* @__PURE__ */ jsx26("li", { className: "list-inline-item", children: /* @__PURE__ */ jsx26(
       DateElement,
       {
         rootId: id,
@@ -2836,7 +2830,7 @@ function EmailWidget(props) {
 }
 
 // src/components/widgets/FileWidget.tsx
-import { useCallback as useCallback8, useState as useState3 } from "react";
+import { useCallback as useCallback8, useMemo } from "react";
 import {
   dataURItoBlob,
   getTemplate as getTemplate14,
@@ -2898,17 +2892,22 @@ function FileInfoPreview({
 function FilesInfo({
   filesInfo,
   registry,
-  preview
+  preview,
+  onRemove,
+  options
 }) {
   if (filesInfo.length === 0) {
     return null;
   }
   const { translateString } = registry;
+  const { RemoveButton: RemoveButton2 } = getTemplate14("ButtonTemplates", registry, options);
   return /* @__PURE__ */ jsx34("ul", { className: "file-info", children: filesInfo.map((fileInfo, key) => {
     const { name, size, type } = fileInfo;
+    const handleRemove = () => onRemove(key);
     return /* @__PURE__ */ jsxs17("li", { children: [
       /* @__PURE__ */ jsx34(Markdown4, { children: translateString(TranslatableString12.FilesInfo, [name, type, String(size)]) }),
-      preview && /* @__PURE__ */ jsx34(FileInfoPreview, { fileInfo, registry })
+      preview && /* @__PURE__ */ jsx34(FileInfoPreview, { fileInfo, registry }),
+      /* @__PURE__ */ jsx34(RemoveButton2, { onClick: handleRemove, registry })
     ] }, key);
   }) });
 }
@@ -2926,9 +2925,6 @@ function extractFileInfo(dataURLs) {
 function FileWidget(props) {
   const { disabled, readonly, required, multiple, onChange, value, options, registry } = props;
   const BaseInputTemplate2 = getTemplate14("BaseInputTemplate", registry, options);
-  const [filesInfo, setFilesInfo] = useState3(
-    Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value])
-  );
   const handleChange = useCallback8(
     (event) => {
       if (!event.target.files) {
@@ -2937,15 +2933,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 = useMemo(() => extractFileInfo(Array.isArray(value) ? value : [value]), [value]);
+  const rmFile = useCallback8(
+    (index) => {
+      if (multiple) {
+        const newValue = value.filter((_, i) => i !== index);
+        onChange(newValue);
+      } else {
+        onChange(void 0);
+      }
+    },
+    [multiple, value, onChange]
   );
   return /* @__PURE__ */ jsxs17("div", { children: [
     /* @__PURE__ */ jsx34(
@@ -2960,7 +2966,16 @@ function FileWidget(props) {
         accept: options.accept ? String(options.accept) : void 0
       }
     ),
-    /* @__PURE__ */ jsx34(FilesInfo, { filesInfo, registry, preview: options.filePreview })
+    /* @__PURE__ */ jsx34(
+      FilesInfo,
+      {
+        filesInfo,
+        onRemove: rmFile,
+        registry,
+        preview: options.filePreview,
+        options
+      }
+    )
   ] });
 }
 var FileWidget_default = FileWidget;
@@ -3471,6 +3486,17 @@ var Form = class extends Component5 {
         );
       }
     };
+    /** 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");
     }
@@ -3679,17 +3705,6 @@ var Form = class extends Component5 {
       globalUiOptions: uiSchema[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.