@rjsf/utils 6.0.0-beta.21 → 6.0.0-beta.23

package/src/nameGenerators.ts

@@ -0,0 +1,43 @@
+import { NameGeneratorFunction, FieldPathList } from './types';
+
+/**
+ * Generates bracketed names
+ * Example: root[tasks][0][title]
+ * For multi-value fields (checkboxes, multi-select): root[hobbies][]
+ */
+export const bracketNameGenerator: NameGeneratorFunction = (
+  path: FieldPathList,
+  idPrefix: string,
+  isMultiValue?: boolean,
+): string => {
+  if (!path || path.length === 0) {
+    return idPrefix;
+  }
+
+  const baseName = path.reduce<string>((acc, pathUnit, index) => {
+    if (index === 0) {
+      return `${idPrefix}[${String(pathUnit)}]`;
+    }
+    return `${acc}[${String(pathUnit)}]`;
+  }, '');
+
+  // For multi-value fields, append [] to allow multiple values with the same name
+  return isMultiValue ? `${baseName}[]` : baseName;
+};
+
+/**
+ * Generates dot-notation names
+ * Example: root.tasks.0.title
+ * Multi-value fields are handled the same as single-value fields in dot notation
+ */
+export const dotNotationNameGenerator: NameGeneratorFunction = (
+  path: FieldPathList,
+  idPrefix: string,
+  _isMultiValue?: boolean,
+): string => {
+  if (!path || path.length === 0) {
+    return idPrefix;
+  }
+
+  return `${idPrefix}.${path.map(String).join('.')}`;
+};

package/src/shouldRenderOptionalField.ts

@@ -40,14 +40,14 @@ export default function shouldRenderOptionalField<
   const { enableOptionalDataFieldForType = [] } = getUiOptions<T, S, F>(uiSchema, registry.globalUiOptions);
   let schemaType: ReturnType<typeof getSchemaType<S>>;
   if (ANY_OF_KEY in schema && Array.isArray(schema[ANY_OF_KEY])) {
-    schemaType = getSchemaTypesForXxxOf(schema[ANY_OF_KEY] as S[]);
+    schemaType = getSchemaTypesForXxxOf<S>(schema[ANY_OF_KEY] as S[]);
   } else if (ONE_OF_KEY in schema && Array.isArray(schema[ONE_OF_KEY])) {
-    schemaType = getSchemaTypesForXxxOf(schema[ONE_OF_KEY] as S[]);
+    schemaType = getSchemaTypesForXxxOf<S>(schema[ONE_OF_KEY] as S[]);
   } else {
     schemaType = getSchemaType<S>(schema);
   }
   return (
-    !isRootSchema(registry, schema) &&
+    !isRootSchema<T, S, F>(registry, schema) &&
     !required &&
     !!schemaType &&
     !Array.isArray(schemaType) &&

package/src/toFieldPathId.ts

@@ -4,21 +4,31 @@ import { FieldPathId, FieldPathList, GlobalFormOptions } from './types';
 /** Constructs the `FieldPathId` for `fieldPath`. If `parentPathId` is provided, the `fieldPath` is appended to the end
  * of the parent path. Then the `ID_KEY` of the resulting `FieldPathId` is constructed from the `idPrefix` and
  * `idSeparator` contained within the `globalFormOptions`. If `fieldPath` is passed as an empty string, it will simply
- * generate the path from the `parentPath` (if provided) and the `idPrefix` and `idSeparator`
+ * generate the path from the `parentPath` (if provided) and the `idPrefix` and `idSeparator`. If a `nameGenerator`
+ * is provided in `globalFormOptions`, it will also generate the HTML `name` attribute.
  *
  * @param fieldPath - The property name or array index of the current field element
  * @param globalFormOptions - The `GlobalFormOptions` used to get the `idPrefix` and `idSeparator`
  * @param [parentPath] - The optional `FieldPathId` or `FieldPathList` of the parent element for this field element
+ * @param [isMultiValue] - Optional flag indicating this field accepts multiple values
  * @returns - The `FieldPathId` for the given `fieldPath` and the optional `parentPathId`
  */
 export default function toFieldPathId(
   fieldPath: string | number,
   globalFormOptions: GlobalFormOptions,
   parentPath?: FieldPathId | FieldPathList,
+  isMultiValue?: boolean,
 ): FieldPathId {
   const basePath = Array.isArray(parentPath) ? parentPath : parentPath?.path;
   const childPath = fieldPath === '' ? [] : [fieldPath];
   const path = basePath ? basePath.concat(...childPath) : childPath;
   const id = [globalFormOptions.idPrefix, ...path].join(globalFormOptions.idSeparator);
-  return { path, [ID_KEY]: id };
+
+  // Generate name attribute if nameGenerator is provided
+  let name: string | undefined;
+  if (globalFormOptions.nameGenerator && path.length > 0) {
+    name = globalFormOptions.nameGenerator(path, globalFormOptions.idPrefix, isMultiValue);
+  }
+
+  return { path, [ID_KEY]: id, ...(name !== undefined && { name }) };
 }

package/src/types.ts

@@ -2,6 +2,7 @@ import type {
   ButtonHTMLAttributes,
   ChangeEvent,
   ComponentType,
+  FocusEvent,
   HTMLAttributes,
   ReactElement,
   ReactNode,
@@ -35,6 +36,9 @@ export type FormContextType = GenericObjectType;
  */
 export type TestIdShape = Record<string, string>;
 
+/** Function to generate HTML name attributes from path segments */
+export type NameGeneratorFunction = (path: FieldPathList, idPrefix: string, isMultiValue?: boolean) => string;
+
 /** Experimental feature that specifies the Array `minItems` default form state behavior
  */
 export type Experimental_ArrayMinItems = {
@@ -175,6 +179,8 @@ export type FieldPathId = {
   $id: string;
   /** The path for a field */
   path: FieldPathList;
+  /** The optional HTML name attribute for a field, generated by nameGenerator if provided */
+  name?: string;
 };
 
 /** Type describing a name used for a field in the `PathSchema` */
@@ -327,9 +333,9 @@ export type TemplatesType<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
   /** The template to use while rendering the description for an array field */
   ArrayFieldDescriptionTemplate: ComponentType<ArrayFieldDescriptionProps<T, S, F>>;
   /** The template to use while rendering the buttons for an item in an array field */
-  ArrayFieldItemButtonsTemplate: ComponentType<ArrayFieldItemButtonsTemplateType<T, S, F>>;
+  ArrayFieldItemButtonsTemplate: ComponentType<ArrayFieldItemButtonsTemplateProps<T, S, F>>;
   /** The template to use while rendering an item in an array field */
-  ArrayFieldItemTemplate: ComponentType<ArrayFieldItemTemplateType<T, S, F>>;
+  ArrayFieldItemTemplate: ComponentType<ArrayFieldItemTemplateProps<T, S, F>>;
   /** The template to use while rendering the title for an array field */
   ArrayFieldTitleTemplate: ComponentType<ArrayFieldTitleProps<T, S, F>>;
   /** The template to use while rendering the standard html input */
@@ -338,6 +344,8 @@ export type TemplatesType<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
   DescriptionFieldTemplate: ComponentType<DescriptionFieldProps<T, S, F>>;
   /** The template to use while rendering the errors for the whole form */
   ErrorListTemplate: ComponentType<ErrorListProps<T, S, F>>;
+  /** The template to use while rendering a fallback field for schemas that have an empty or unknown 'type' */
+  FallbackFieldTemplate: ComponentType<FallbackFieldTemplateProps<T, S, F>>;
   /** The template to use while rendering the errors for a single field */
   FieldErrorTemplate: ComponentType<FieldErrorProps<T, S, F>>;
   /** The template to use while rendering the errors for a single field */
@@ -420,6 +428,16 @@ export type GlobalFormOptions = {
   readonly idSeparator: string;
   /** The component update strategy used by the Form and its fields for performance optimization */
   readonly experimental_componentUpdateStrategy?: 'customDeep' | 'shallow' | 'always';
+  /** Optional function to generate custom HTML name attributes for form elements. Receives the field path segments
+   * and element type (object or array), and returns a custom name string. This allows backends like PHP/Rails
+   * (`root[tasks][0][title]`) or Django (`root__tasks-0__title`) to receive form data in their expected format.
+   */
+  readonly nameGenerator?: NameGeneratorFunction;
+  /**
+   * Boolean flag that, when set to true, will cause the form to use a fallback UI when encountering a schema type that
+   * is not supported by RJSF or a custom field. When false, the UnsupportedField error component will be shown instead.
+   */
+  readonly useFallbackUiForUnsupportedType?: boolean;
 };
 
 /** The object containing the registered core, theme and custom fields and widgets as well as the root schema, form
@@ -547,10 +565,38 @@ export type FieldTemplateProps<
   formData?: T;
   /** The value change event handler; Can be called with a new value to change the value for this field */
   onChange: FieldProps<T, S, F>['onChange'];
-  /** The key change event handler; Called when the key associated with a field is changed for an additionalProperty */
-  onKeyChange: (value: string) => () => void;
-  /** The property drop/removal event handler; Called when a field is removed in an additionalProperty context */
-  onDropPropertyClick: (value: string) => () => void;
+  /** Callback used to handle the changing of an additional property key's name with the new value
+   */
+  onKeyRename: (newKey: string) => void;
+  /** Callback used to handle the changing of an additional property key's name when the input is blurred. The event's
+   * target's value will be used as the new value. Its a wrapper callback around `onKeyRename`
+   */
+  onKeyRenameBlur: (event: FocusEvent<HTMLInputElement>) => void;
+  /** Callback used to handle the removal of the additionalProperty */
+  onRemoveProperty: () => void;
+};
+
+/**
+ * The properties that are passed to a `FallbackField` implementation
+ */
+export type FallbackFieldProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> = FieldProps<T, S, F>;
+
+/**
+ * The properties that are passed to a `FallbackFieldTemplate` implementation
+ */
+export type FallbackFieldTemplateProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> = RJSFBaseProps<T, S, F> & {
+  /** A ReactNode that allows the selecting a different type for the field */
+  typeSelector: ReactNode;
+  /** A ReactNode that renders the field with the present formData and matches the selected type */
+  schemaField: ReactNode;
 };
 
 /** The properties that are passed to the `UnsupportedFieldTemplate` implementation */
@@ -620,7 +666,7 @@ export type ArrayFieldDescriptionProps<
 };
 
 /** The properties of the buttons to render for each element in the ArrayFieldTemplateProps.items array */
-export type ArrayFieldItemButtonsTemplateType<
+export type ArrayFieldItemButtonsTemplateProps<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
@@ -647,20 +693,22 @@ export type ArrayFieldItemButtonsTemplateType<
   index: number;
   /** A number stating the total number `items` in the array */
   totalItems: number;
-  /** Returns a function that adds a new item at `index` */
-  onAddIndexClick: (index: number) => (event?: any) => void;
-  /** Returns a function that copies the item at `index` into the position at `index + 1` */
-  onCopyIndexClick: (index: number) => (event?: any) => void;
-  /** Returns a function that removes the item at `index` */
-  onDropIndexClick: (index: number) => (event?: any) => void;
-  /** Returns a function that swaps the items at `index` with `newIndex` */
-  onReorderClick: (index: number, newIndex: number) => (event?: any) => void;
+  /** Callback function that adds a new item below this item */
+  onAddItem: (event?: any) => void;
+  /** Callback function that copies this item below itself */
+  onCopyItem: (event?: any) => void;
+  /** Callback function that moves the item up one spot in the list */
+  onMoveUpItem: (event?: any) => void;
+  /** Callback function that moves the item down one spot in the list */
+  onMoveDownItem: (event?: any) => void;
+  /** Callback function that removes the item from the list */
+  onRemoveItem: (event?: any) => void;
   /** A boolean value stating if the array item is read-only */
   readonly?: boolean;
 };
 
-/** The properties of each element in the ArrayFieldTemplateProps.items array */
-export type ArrayFieldItemTemplateType<
+/** The properties used to render the ArrayFieldItemTemplate */
+export type ArrayFieldItemTemplateProps<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
@@ -668,7 +716,7 @@ export type ArrayFieldItemTemplateType<
   /** The html for the item's content */
   children: ReactNode;
   /** The props to pass to the `ArrayFieldItemButtonTemplate` */
-  buttonsProps: ArrayFieldItemButtonsTemplateType<T, S, F>;
+  buttonsProps: ArrayFieldItemButtonsTemplateProps<T, S, F>;
   /** The className string */
   className: string;
   /** A boolean value stating if the array item is disabled */
@@ -682,18 +730,13 @@ export type ArrayFieldItemTemplateType<
   /** A boolean value stating if the array item is read-only */
   readonly?: boolean;
   /** A stable, unique key for the array item */
-  key: string;
+  itemKey: string;
+  /** The UI schema of the array item's parent array field used for
+   * customization in some themes
+   */
+  parentUiSchema?: UiSchema<T, S, F>;
 };
 
-/**
- * @deprecated - Use `ArrayFieldItemTemplateType` instead
- */
-export type ArrayFieldTemplateItemType<
-  T = any,
-  S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any,
-> = ArrayFieldItemTemplateType<T, S, F>;
-
 /** The common properties of the two container templates: `ArrayFieldTemplateProps` and `ObjectFieldTemplateProps` */
 export type ContainerFieldTemplateProps<
   T = any,
@@ -730,9 +773,9 @@ export type ArrayFieldTemplateProps<
 > = ContainerFieldTemplateProps<T, S, F> & {
   /** A boolean value stating whether new elements can be added to the array */
   canAdd?: boolean;
-  /** An array of objects representing the items in the array */
-  items: ArrayFieldItemTemplateType<T, S, F>[];
-  /** A function that adds a new item to the array */
+  /** An array of React elements representing the items in the array */
+  items: ReactElement[];
+  /** A function that adds a new item to the end of the array */
   onAddClick: (event?: any) => void;
   /** An array of strings listing all generated error messages from encountered errors for this widget */
   rawErrors?: string[];
@@ -762,8 +805,10 @@ export type ObjectFieldTemplateProps<
   description?: string | ReactElement;
   /** An array of objects representing the properties in the object */
   properties: ObjectFieldTemplatePropertyType[];
-  /** Returns a function that adds a new property to the object (to be used with additionalProperties) */
-  onAddClick: (schema: S) => () => void;
+  /** Callback to use in order to add an new additionalProperty to the object field  (to be used with
+   * additionalProperties and patternProperties)
+   */
+  onAddProperty: () => void;
   /** A boolean value stating if the object is read-only */
   readonly?: boolean;
   /** A boolean value stating if the object is required */
@@ -815,8 +860,9 @@ export type WrapIfAdditionalTemplateProps<
     | 'disabled'
     | 'schema'
     | 'uiSchema'
-    | 'onKeyChange'
-    | 'onDropPropertyClick'
+    | 'onKeyRename'
+    | 'onKeyRenameBlur'
+    | 'onRemoveProperty'
     | 'registry'
   >;
 
@@ -882,6 +928,8 @@ export interface WidgetProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   multiple?: boolean;
   /** An array of strings listing all generated error messages from encountered errors for this widget */
   rawErrors?: string[];
+  /** The optional custom HTML name attribute generated by the nameGenerator function, if provided */
+  htmlName?: string;
 }
 
 /** The definition of a React-based Widget component */

package/src/useAltDateWidgetProps.tsx

@@ -0,0 +1,163 @@
+import { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
+
+import dateRangeOptions from './dateRangeOptions';
+import getDateElementProps, { DateElementFormat, DateElementProp } from './getDateElementProps';
+import { ariaDescribedByIds } from './idGenerators';
+import parseDateString from './parseDateString';
+import toDateString from './toDateString';
+import { DateObject, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from './types';
+
+/** Function that checks to see if a `DateObject` is ready for the onChange callback to be triggered
+ *
+ * @param state - The current `DateObject`
+ * @returns - True if the `state` is ready to trigger an onChange
+ */
+function readyForChange(state: DateObject) {
+  return Object.values(state).every((value) => value !== -1);
+}
+
+/** The Props for the `DateElement` component */
+export 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' | 'className'
+> & {
+  /** The root id of the field */
+  rootId: string;
+  /** The selector function for a specific prop within the `DateObject`, for a value */
+  select: (property: keyof DateObject, value: any) => void;
+  /** The type of the date element */
+  type: DateElementProp['type'];
+  /** The range for the date element */
+  range: DateElementProp['range'];
+};
+
+/** The `DateElement` component renders one of the 6 date element selectors for an `AltDateWidget`, using the `select`
+ * widget from the registry.
+ *
+ * @param props - The `DateElementProps` for the date element
+ */
+export function DateElement<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: DateElementProps<T, S, F>,
+) {
+  const {
+    className = 'form-control',
+    type,
+    range,
+    value,
+    select,
+    rootId,
+    name,
+    disabled,
+    readonly,
+    autofocus,
+    registry,
+    onBlur,
+    onFocus,
+  } = props;
+  const id = `${rootId}_${type}`;
+  const { SelectWidget } = registry.widgets;
+  const onChange = useCallback((value: any) => select(type as keyof DateObject, value), [select, type]);
+  return (
+    <SelectWidget
+      schema={{ type: 'integer' } as S}
+      id={id}
+      name={name}
+      className={className}
+      options={{ enumOptions: dateRangeOptions<S>(range[0], range[1]) }}
+      placeholder={type}
+      value={value}
+      disabled={disabled}
+      readonly={readonly}
+      autofocus={autofocus}
+      onChange={onChange}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      registry={registry}
+      label=''
+      aria-describedby={ariaDescribedByIds(rootId)}
+    />
+  );
+}
+
+/** The result of a call to the `useAltDateWidgetProps()` hook */
+export type UseAltDateWidgetResult = {
+  /** The list of `DateElementProp` data to render for the `AltDateWidget` */
+  elements: DateElementProp[];
+  /** The callback that handles the changing of DateElement components */
+  handleChange: (property: keyof DateObject, value?: string) => void;
+  /** The callback that will clear the `AltDateWidget` when a button is clicked */
+  handleClear: (event: MouseEvent) => void;
+  /** The callback that will set the `AltDateWidget` to NOW when a button is clicked */
+  handleSetNow: (event: MouseEvent) => void;
+};
+
+/** Hook which encapsulates the logic needed to render an `AltDateWidget` with optional `time` elements. It contains
+ * the `state` of the current date(/time) selections in the widget. It returns a `UseAltDateWidgetResult` object
+ * that contains the `elements: DateElementProp[]` and three callbacks needed to change one of the rendered `elements`,
+ * and to handle the clicking of the `clear` and `setNow` buttons.
+ *
+ * @param props - The `WidgetProps` for the `AltDateWidget`
+ */
+export default function useAltDateWidgetProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: WidgetProps<T, S, F>): UseAltDateWidgetResult {
+  const { time = false, disabled = false, readonly = false, options, onChange, value } = props;
+  const [state, setState] = useState(parseDateString(value, time));
+
+  useEffect(() => {
+    setState(parseDateString(value, time));
+  }, [time, value]);
+
+  const handleChange = useCallback(
+    (property: keyof DateObject, value?: string) => {
+      const nextState = {
+        ...state,
+        [property]: typeof value === 'undefined' ? -1 : value,
+      };
+
+      if (readyForChange(nextState)) {
+        onChange(toDateString(nextState, time));
+      } else {
+        setState(nextState);
+      }
+    },
+    [state, onChange, time],
+  );
+
+  const handleClear = useCallback(
+    (event: MouseEvent) => {
+      event.preventDefault();
+      if (disabled || readonly) {
+        return;
+      }
+      onChange(undefined);
+    },
+    [disabled, readonly, onChange],
+  );
+
+  const handleSetNow = useCallback(
+    (event: MouseEvent) => {
+      event.preventDefault();
+      if (disabled || readonly) {
+        return;
+      }
+      const nextState = parseDateString(new Date().toJSON(), time);
+      onChange(toDateString(nextState, time));
+    },
+    [disabled, readonly, time, onChange],
+  );
+
+  const elements = useMemo(
+    () =>
+      getDateElementProps(
+        state,
+        time,
+        options.yearsRange as [number, number] | undefined,
+        options.format as DateElementFormat | undefined,
+      ),
+    [state, time, options.yearsRange, options.format],
+  );
+  return { elements, handleChange, handleClear, handleSetNow };
+}

package/src/useDeepCompareMemo.ts

@@ -0,0 +1,17 @@
+import { useRef } from 'react';
+import isEqual from 'lodash/isEqual';
+
+/** Hook that stores and returns a `T` value. If `newValue` is the same as the stored one, then the stored one is
+ * returned to avoid having a component rerender due it being a different object. Otherwise, the `newValue` is stored
+ * and returned.
+ *
+ * @param newValue - The potential new `T` value
+ * @returns - The latest stored `T` value
+ */
+export default function useDeepCompareMemo<T = unknown>(newValue: T): T {
+  const valueRef = useRef<T>(newValue);
+  if (!isEqual(newValue, valueRef.current)) {
+    valueRef.current = newValue;
+  }
+  return valueRef.current;
+}

package/src/useFileWidgetProps.ts

@@ -0,0 +1,155 @@
+import { useCallback, useMemo } from 'react';
+
+import dataURItoBlob from './dataURItoBlob';
+
+/** The information about files used by a FileWidget */
+export type FileInfoType = {
+  /** The url of the data containing the file */
+  dataURL?: string | null;
+  /** The name of the file */
+  name: string;
+  /** The size of the file */
+  size: number;
+  /** The type of the file */
+  type: string;
+};
+
+export interface UseFileWidgetPropsResult {
+  /** The list of FileInfoType contained within the FileWidget */
+  filesInfo: FileInfoType[];
+  /** The callback handler to pass to the onChange of the input */
+  handleChange: (files: FileList) => void;
+  /** The callback handler to pass in order to delete a file */
+  handleRemove: (index: number) => void;
+}
+
+/** Updated the given `dataUrl` to add the `name` to it
+ *
+ * @param dataURL - The url description string
+ * @param name - The name of the file to add to the dataUrl
+ * @returns - The `dataUrl` updated to include the name
+ */
+function addNameToDataURL(dataURL: string, name: string) {
+  return dataURL.replace(';base64', `;name=${encodeURIComponent(name)};base64`);
+}
+
+/** Returns a promise that will read the file from the browser and return it as the result of the promise.
+ *
+ * @param file - The `File` information to read
+ * @returns - A promise that resolves to the read file.
+ */
+function processFile(file: File): Promise<FileInfoType> {
+  const { name, size, type } = file;
+  return new Promise((resolve, reject) => {
+    const reader = new window.FileReader();
+    reader.onerror = reject;
+    reader.onload = (event) => {
+      if (typeof event.target?.result === 'string') {
+        resolve({
+          dataURL: addNameToDataURL(event.target.result, name),
+          name,
+          size,
+          type,
+        });
+      } else {
+        resolve({
+          dataURL: null,
+          name,
+          size,
+          type,
+        });
+      }
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+/** Reads a list of files from the browser, returning the results of the promises of each individual file read.
+ *
+ * @param files - The list of files to read
+ * @returns - The list of read files
+ */
+function processFiles(files: FileList) {
+  return Promise.all(Array.from(files).map(processFile));
+}
+
+/** Extracts the file information from the data URLs
+ *
+ * @param dataURLs - The information about the files
+ * @returns - The list of `FileInfoType` objects extracted from the data urls
+ */
+function extractFileInfo(dataURLs: string[]): FileInfoType[] {
+  return dataURLs.reduce((acc, dataURL) => {
+    if (!dataURL) {
+      return acc;
+    }
+    try {
+      const { blob, name } = dataURItoBlob(dataURL);
+      return [
+        ...acc,
+        {
+          dataURL,
+          name: name,
+          size: blob.size,
+          type: blob.type,
+        },
+      ];
+    } catch {
+      // Invalid dataURI, so just ignore it.
+      return acc;
+    }
+  }, [] as FileInfoType[]);
+}
+
+/** Hook which encapsulates the logic needed to read and convert a `value` of `File` or `File[]` into the
+ * `filesInfo: FileInfoType[]` and the two callback implementations needed to change the list or to remove a
+ * `File` from the list. To be used by theme specific `FileWidget` implementations.
+ *
+ * @param value - The current value of the `FileWidget`
+ * @param onChange - The onChange handler for the `FileWidget`
+ * @param [multiple=false] - Flag indicating whether the control supports multiple selections
+ * @returns - The `UseFileWidgetPropsResult` to be used within a `FileWidget` implementation
+ */
+export default function useFileWidgetProps(
+  value: string | string[] | undefined | null,
+  onChange: (value?: string | null | (string | null)[]) => void,
+  multiple = false,
+): UseFileWidgetPropsResult {
+  const values: (string | null)[] = useMemo(() => {
+    if (multiple && value) {
+      return Array.isArray(value) ? value : [value];
+    }
+    return [];
+  }, [value, multiple]);
+  const filesInfo = useMemo(
+    () => (Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value || ''])),
+    [value],
+  );
+
+  const handleChange = useCallback(
+    (files: FileList) => {
+      processFiles(files).then((filesInfoEvent) => {
+        const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL || null);
+        if (multiple) {
+          onChange(values.concat(...newValue));
+        } else {
+          onChange(newValue[0]);
+        }
+      });
+    },
+    [values, multiple, onChange],
+  );
+  const handleRemove = useCallback(
+    (index: number) => {
+      if (multiple) {
+        const newValue = values.filter((_, i: number) => i !== index);
+        onChange(newValue);
+      } else {
+        onChange(undefined);
+      }
+    },
+    [values, multiple, onChange],
+  );
+
+  return { filesInfo, handleChange, handleRemove };
+}