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

package/lib/types.d.ts

@@ -280,6 +280,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 */
@@ -367,6 +369,11 @@ export type GlobalFormOptions = {
      * (`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
  * context, schema utils and templates.
@@ -491,6 +498,19 @@ export type FieldTemplateProps<T = any, S extends StrictRJSFSchema = RJSFSchema,
     /** 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 */
 export type UnsupportedFieldProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> = RJSFBaseProps<T, S, F> & {
     /** The FieldPathId of the field in the hierarchy */

package/lib/useAltDateWidgetProps.d.ts

@@ -0,0 +1,39 @@
+import { MouseEvent } from 'react';
+import { DateElementProp } from './getDateElementProps.js';
+import { DateObject, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from './types.js';
+/** 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 declare function DateElement<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: DateElementProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
+/** 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;

package/lib/useAltDateWidgetProps.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import dateRangeOptions from './dateRangeOptions.js';
+import getDateElementProps from './getDateElementProps.js';
+import { ariaDescribedByIds } from './idGenerators.js';
+import parseDateString from './parseDateString.js';
+import toDateString from './toDateString.js';
+/** 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) {
+    return Object.values(state).every((value) => value !== -1);
+}
+/** 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(props) {
+    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) => select(type, value), [select, type]);
+    return (_jsx(SelectWidget, { schema: { type: 'integer' }, id: id, name: name, className: className, options: { enumOptions: dateRangeOptions(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) }));
+}
+/** 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(props) {
+    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, value) => {
+        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) => {
+        event.preventDefault();
+        if (disabled || readonly) {
+            return;
+        }
+        onChange(undefined);
+    }, [disabled, readonly, onChange]);
+    const handleSetNow = useCallback((event) => {
+        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, options.format), [state, time, options.yearsRange, options.format]);
+    return { elements, handleChange, handleClear, handleSetNow };
+}
+//# sourceMappingURL=useAltDateWidgetProps.js.map

package/lib/useAltDateWidgetProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAltDateWidgetProps.js","sourceRoot":"","sources":["../src/useAltDateWidgetProps.tsx"],"names":[],"mappings":"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"}

package/lib/useFileWidgetProps.d.ts

@@ -0,0 +1,29 @@
+/** 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;
+}
+/** 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?: boolean): UseFileWidgetPropsResult;

package/lib/useFileWidgetProps.js

@@ -0,0 +1,119 @@
+import { useCallback, useMemo } from 'react';
+import dataURItoBlob from './dataURItoBlob.js';
+/** 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, name) {
+    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) {
+    const { name, size, type } = file;
+    return new Promise((resolve, reject) => {
+        const reader = new window.FileReader();
+        reader.onerror = reject;
+        reader.onload = (event) => {
+            var _a;
+            if (typeof ((_a = event.target) === null || _a === void 0 ? void 0 : _a.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) {
+    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) {
+    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 (_a) {
+            // Invalid dataURI, so just ignore it.
+            return acc;
+        }
+    }, []);
+}
+/** 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, onChange, multiple = false) {
+    const values = 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) => {
+        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) => {
+        if (multiple) {
+            const newValue = values.filter((_, i) => i !== index);
+            onChange(newValue);
+        }
+        else {
+            onChange(undefined);
+        }
+    }, [values, multiple, onChange]);
+    return { filesInfo, handleChange, handleRemove };
+}
+//# sourceMappingURL=useFileWidgetProps.js.map

package/lib/useFileWidgetProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileWidgetProps.js","sourceRoot":"","sources":["../src/useFileWidgetProps.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/utils",
-  "version": "6.0.0-beta.22",
+  "version": "6.0.0-beta.23",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",

package/src/enums.ts

@@ -51,6 +51,10 @@ export enum TranslatableString {
   OptionalObjectRemove = 'Remove data for optional field',
   /** The label for when displaying a non-editable form with missing optional field data */
   OptionalObjectEmptyMsg = 'No data for optional field',
+  /** Label for the schema type selector, used by FallbackField */
+  Type = 'Type',
+  /** Label for the 'value' field, used by FallbackField */
+  Value = 'Value',
   // Strings with replaceable parameters
   /** Unknown field type reason, where %1 will be replaced with the type as provided by SchemaField */
   UnknownFieldType = 'Unknown field type %1',

package/src/getDateElementProps.ts

@@ -4,7 +4,7 @@ import { type DateObject } from './types';
 export type DateElementFormat = 'DMY' | 'MDY' | 'YMD';
 
 /** Type describing format of DateElement prop */
-type DateElementProp = {
+export type DateElementProp = {
   type: string;
   range: [number, number];
   value: number | undefined;

package/src/index.ts

@@ -16,7 +16,7 @@ import enumOptionsValueForIndex from './enumOptionsValueForIndex';
 import ErrorSchemaBuilder from './ErrorSchemaBuilder';
 import findSchemaDefinition from './findSchemaDefinition';
 import getChangedFields from './getChangedFields';
-import getDateElementProps, { type DateElementFormat } from './getDateElementProps';
+import getDateElementProps, { DateElementFormat, DateElementProp } from './getDateElementProps';
 import getDiscriminatorFieldFromSchema from './getDiscriminatorFieldFromSchema';
 import getInputProps from './getInputProps';
 import getOptionMatchingSimpleDiscriminator from './getOptionMatchingSimpleDiscriminator';
@@ -59,7 +59,7 @@ import parseDateString from './parseDateString';
 import rangeSpec from './rangeSpec';
 import replaceStringParameters from './replaceStringParameters';
 import schemaRequiresTrueValue from './schemaRequiresTrueValue';
-import shouldRender from './shouldRender';
+import shouldRender, { ComponentUpdateStrategy } from './shouldRender';
 import shouldRenderOptionalField from './shouldRenderOptionalField';
 import toConstant from './toConstant';
 import toDateString from './toDateString';
@@ -67,7 +67,9 @@ import toErrorList from './toErrorList';
 import toErrorSchema from './toErrorSchema';
 import toFieldPathId from './toFieldPathId';
 import unwrapErrorHandler from './unwrapErrorHandler';
+import useAltDateWidgetProps, { DateElement, DateElementProps, UseAltDateWidgetResult } from './useAltDateWidgetProps';
 import useDeepCompareMemo from './useDeepCompareMemo';
+import useFileWidgetProps, { FileInfoType, UseFileWidgetPropsResult } from './useFileWidgetProps';
 import utcToLocal from './utcToLocal';
 import validationDataMerge from './validationDataMerge';
 import withIdRefPrefix from './withIdRefPrefix';
@@ -80,6 +82,16 @@ export * from './constants';
 export * from './parser';
 export * from './schema';
 
+export type {
+  ComponentUpdateStrategy,
+  DateElementFormat,
+  DateElementProp,
+  DateElementProps,
+  FileInfoType,
+  UseAltDateWidgetResult,
+  UseFileWidgetPropsResult,
+};
+
 export {
   allowAdditionalItems,
   ariaDescribedByIds,
@@ -88,7 +100,7 @@ export {
   canExpand,
   createErrorHandler,
   createSchemaUtils,
-  DateElementFormat,
+  DateElement,
   dataURItoBlob,
   dateRangeOptions,
   deepEquals,
@@ -152,12 +164,12 @@ export {
   toErrorSchema,
   toFieldPathId,
   unwrapErrorHandler,
+  useAltDateWidgetProps,
   useDeepCompareMemo,
+  useFileWidgetProps,
   utcToLocal,
   validationDataMerge,
   withIdRefPrefix,
   bracketNameGenerator,
   dotNotationNameGenerator,
 };
-
-export type { ComponentUpdateStrategy } from './shouldRender';

package/src/types.ts

@@ -344,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 */
@@ -431,6 +433,11 @@ export type GlobalFormOptions = {
    * (`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
@@ -569,6 +576,29 @@ export type FieldTemplateProps<
   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 */
 export type UnsupportedFieldProps<
   T = any,

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 };
+}