@rjsf/core 5.15.0 → 5.16.0

package/src/components/Form.tsx

@@ -533,7 +533,11 @@ export default class Form<
             const formValue = _get(formData, path);
             // adds path to fieldNames if it points to a value
             // or an empty object/array
-            if (typeof formValue !== 'object' || _isEmpty(formValue)) {
+            if (
+              typeof formValue !== 'object' ||
+              _isEmpty(formValue) ||
+              (Array.isArray(formValue) && formValue.every((val) => typeof val !== 'object'))
+            ) {
               acc.push(path);
             }
           });
@@ -738,7 +742,7 @@ export default class Form<
   }
 
   /** Provides a function that can be used to programmatically submit the `Form` */
-  submit() {
+  submit = () => {
     if (this.formElement.current) {
       this.formElement.current.dispatchEvent(
         new CustomEvent('submit', {
@@ -747,7 +751,7 @@ export default class Form<
       );
       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

package/src/components/fields/ArrayField.tsx

@@ -470,6 +470,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       errorSchema,
       idSchema,
       name,
+      title,
       disabled = false,
       readonly = false,
       autofocus = false,
@@ -482,7 +483,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       rawErrors,
     } = this.props;
     const { keyedFormData } = this.state;
-    const title = schema.title === undefined ? name : schema.title;
+    const fieldTitle = schema.title || title || name;
     const { schemaUtils, formContext } = registry;
     const uiOptions = getUiOptions<T[], S, F>(uiSchema);
     const _schemaItems: S = isObject(schema.items) ? (schema.items as S) : ({} as S);
@@ -503,6 +504,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           key,
           index,
           name: name && `${name}-${index}`,
+          title: fieldTitle ? `${fieldTitle}-${index + 1}` : undefined,
           canAdd,
           canMoveUp: index > 0,
           canMoveDown: index < formData.length - 1,
@@ -526,7 +528,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       readonly,
       required,
       schema,
-      title,
+      title: fieldTitle,
       formContext,
       formData,
       rawErrors,
@@ -701,6 +703,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       idSeparator = '_',
       idSchema,
       name,
+      title,
       disabled = false,
       readonly = false,
       autofocus = false,
@@ -712,7 +715,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     } = 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<T[], S, F>(uiSchema);
     const { schemaUtils, formContext } = registry;
     const _schemaItems: S[] = isObject(schema.items) ? (schema.items as S[]) : ([] as S[]);
@@ -759,6 +762,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           key,
           index,
           name: name && `${name}-${index}`,
+          title: fieldTitle ? `${fieldTitle}-${index + 1}` : undefined,
           canAdd,
           canRemove: additional,
           canMoveUp: index >= itemSchemas.length + 1,
@@ -781,7 +785,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       registry,
       schema,
       uiSchema,
-      title,
+      title: fieldTitle,
       formContext,
       rawErrors,
     };
@@ -799,6 +803,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     key: string;
     index: number;
     name: string;
+    title: string | undefined;
     canAdd: boolean;
     canRemove?: boolean;
     canMoveUp: boolean;
@@ -832,6 +837,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       onFocus,
       rawErrors,
       totalItems,
+      title,
     } = props;
     const { disabled, hideError, idPrefix, idSeparator, readonly, uiSchema, registry, formContext } = this.props;
     const {
@@ -853,6 +859,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       children: (
         <ItemSchemaField
           name={name}
+          title={title}
           index={index}
           schema={itemSchema}
           uiSchema={itemUiSchema}

package/src/components/fields/BooleanField.tsx

@@ -31,12 +31,13 @@ function BooleanField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
     readonly,
     hideError,
     autofocus,
+    title,
     onChange,
     onFocus,
     onBlur,
     rawErrors,
   } = props;
-  const { title } = schema;
+  const { title: schemaTitle } = schema;
   const { widgets, formContext, translateString, globalUiOptions } = registry;
   const {
     widget = 'checkbox',
@@ -49,7 +50,7 @@ function BooleanField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
   const yes = translateString(TranslatableString.YesLabel);
   const no = translateString(TranslatableString.NoLabel);
   let enumOptions: EnumOptionsType<S>[] | undefined;
-  const label = uiTitle ?? title ?? name;
+  const label = uiTitle ?? schemaTitle ?? title ?? name;
   if (Array.isArray(schema.oneOf)) {
     enumOptions = optionsList<S>({
       oneOf: schema.oneOf

package/src/components/fields/ObjectField.tsx

@@ -241,6 +241,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
       onBlur,
       onFocus,
       registry,
+      title,
     } = this.props;
 
     const { fields, formContext, schemaUtils, translateString, globalUiOptions } = registry;
@@ -249,7 +250,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
     const uiOptions = getUiOptions<T, S, F>(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: string[];
     try {
@@ -272,7 +273,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
 
     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 ? undefined : description,
       properties: orderedProperties.map((name) => {
         const addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, name, ADDITIONAL_PROPERTY_FLAG]);

package/src/components/fields/SchemaField.tsx

@@ -193,7 +193,10 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   if (wasPropertyKeyModified) {
     label = name;
   } else {
-    label = ADDITIONAL_PROPERTY_FLAG in schema ? name : uiOptions.title || props.schema.title || schema.title || name;
+    label =
+      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 || '';

package/src/components/widgets/AltDateWidget.tsx

@@ -5,11 +5,13 @@ import {
   toDateString,
   pad,
   DateObject,
+  type DateElementFormat,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
   TranslatableString,
   WidgetProps,
+  getDateElementProps,
 } from '@rjsf/utils';
 
 function rangeOptions(start: number, stop: number) {
@@ -24,31 +26,6 @@ function readyForChange(state: DateObject) {
   return Object.values(state).every((value) => value !== -1);
 }
 
-function dateElementProps(
-  state: DateObject,
-  time: boolean,
-  yearsRange: [number, number] = [1900, 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 },
-  ] as { type: string; range: [number, number]; value: number | undefined }[];
-  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;
-}
-
 type DateElementProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> = Pick<
   WidgetProps<T, S, F>,
   'value' | 'name' | 'disabled' | 'readonly' | 'autofocus' | 'registry' | 'onBlur' | 'onFocus'
@@ -161,7 +138,12 @@ function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
 
   return (
     <ul className='list-inline'>
-      {dateElementProps(state, time, options.yearsRange as [number, number] | undefined).map((elemProps, i) => (
+      {getDateElementProps(
+        state,
+        time,
+        options.yearsRange as [number, number] | undefined,
+        options.format as DateElementFormat | undefined
+      ).map((elemProps, i) => (
         <li className='list-inline-item' key={i}>
           <DateElement
             rootId={id}

package/src/components/widgets/FileWidget.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useCallback, useState } from 'react';
+import { ChangeEvent, useCallback, useMemo } from 'react';
 import {
   dataURItoBlob,
   FormContextType,
@@ -7,6 +7,7 @@ import {
   RJSFSchema,
   StrictRJSFSchema,
   TranslatableString,
+  UIOptionsType,
   WidgetProps,
 } from '@rjsf/utils';
 import Markdown from 'markdown-to-jsx';
@@ -86,23 +87,32 @@ function FilesInfo<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends F
   filesInfo,
   registry,
   preview,
+  onRemove,
+  options,
 }: {
   filesInfo: FileInfoType[];
   registry: Registry<T, S, F>;
   preview?: boolean;
+  onRemove: (index: number) => void;
+  options: UIOptionsType<T, S, F>;
 }) {
   if (filesInfo.length === 0) {
     return null;
   }
   const { translateString } = registry;
+
+  const { RemoveButton } = getTemplate<'ButtonTemplates', T, S, F>('ButtonTemplates', registry, options);
+
   return (
     <ul className='file-info'>
       {filesInfo.map((fileInfo, key) => {
         const { name, size, type } = fileInfo;
+        const handleRemove = () => onRemove(key);
         return (
           <li key={key}>
             <Markdown>{translateString(TranslatableString.FilesInfo, [name, type, String(size)])}</Markdown>
             {preview && <FileInfoPreview<T, S, F> fileInfo={fileInfo} registry={registry} />}
+            <RemoveButton onClick={handleRemove} registry={registry} />
           </li>
         );
       })}
@@ -133,9 +143,6 @@ function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
 ) {
   const { disabled, readonly, required, multiple, onChange, value, options, registry } = props;
   const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);
-  const [filesInfo, setFilesInfo] = useState<FileInfoType[]>(
-    Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value])
-  );
 
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
@@ -148,17 +155,27 @@ function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
       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 = useCallback(
+    (index: number) => {
+      if (multiple) {
+        const newValue = value.filter((_: any, i: number) => i !== index);
+        onChange(newValue);
+      } else {
+        onChange(undefined);
+      }
+    },
+    [multiple, value, onChange]
+  );
   return (
     <div>
       <BaseInputTemplate
@@ -170,7 +187,13 @@ function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
         value=''
         accept={options.accept ? String(options.accept) : undefined}
       />
-      <FilesInfo<T, S, F> filesInfo={filesInfo} registry={registry} preview={options.filePreview} />
+      <FilesInfo<T, S, F>
+        filesInfo={filesInfo}
+        onRemove={rmFile}
+        registry={registry}
+        preview={options.filePreview}
+        options={options}
+      />
     </div>
   );
 }