@rjsf/core 6.0.0-beta.8 → 6.0.0

package/src/components/templates/ArrayFieldTemplate.tsx

@@ -2,7 +2,6 @@ import {
   getTemplate,
   getUiOptions,
   ArrayFieldTemplateProps,
-  ArrayFieldItemTemplateType,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
@@ -11,7 +10,7 @@ import {
 
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *
- * @param props - The `ArrayFieldItemTemplateType` props for the component
+ * @param props - The `ArrayFieldTemplateProps` props for the component
  */
 export default function ArrayFieldTemplate<
   T = any,
@@ -22,9 +21,10 @@ export default function ArrayFieldTemplate<
     canAdd,
     className,
     disabled,
-    idSchema,
+    fieldPathId,
     uiSchema,
     items,
+    optionalDataControl,
     onAddClick,
     readonly,
     registry,
@@ -38,46 +38,39 @@ export default function ArrayFieldTemplate<
     registry,
     uiOptions,
   );
-  const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
-    'ArrayFieldItemTemplate',
-    registry,
-    uiOptions,
-  );
   const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
     'ArrayFieldTitleTemplate',
     registry,
     uiOptions,
   );
   // Button templates are not overridden in the uiSchema
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton },
   } = registry.templates;
   return (
-    <fieldset className={className} id={idSchema.$id}>
+    <fieldset className={className} id={fieldPathId.$id}>
       <ArrayFieldTitleTemplate
-        idSchema={idSchema}
+        fieldPathId={fieldPathId}
         title={uiOptions.title || title}
         required={required}
         schema={schema}
         uiSchema={uiSchema}
         registry={registry}
+        optionalDataControl={showOptionalDataControlInTitle ? optionalDataControl : undefined}
       />
       <ArrayFieldDescriptionTemplate
-        idSchema={idSchema}
+        fieldPathId={fieldPathId}
         description={uiOptions.description || schema.description}
         schema={schema}
         uiSchema={uiSchema}
         registry={registry}
       />
-      <div className='row array-item-list'>
-        {items &&
-          items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
-            <ArrayFieldItemTemplate key={key} {...itemProps} />
-          ))}
-      </div>
+      {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
+      <div className='row array-item-list'>{items}</div>
       {canAdd && (
         <AddButton
-          id={buttonId<T>(idSchema, 'add')}
+          id={buttonId(fieldPathId, 'add')}
           className='rjsf-array-item-add'
           onClick={onAddClick}
           disabled={disabled || readonly}

package/src/components/templates/ArrayFieldTitleTemplate.tsx

@@ -10,7 +10,7 @@ import {
 } from '@rjsf/utils';
 
 /** The `ArrayFieldTitleTemplate` component renders a `TitleFieldTemplate` with an `id` derived from
- * the `idSchema`.
+ * the `fieldPathId`.
  *
  * @param props - The `ArrayFieldTitleProps` for the component
  */
@@ -19,7 +19,7 @@ export default function ArrayFieldTitleTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: ArrayFieldTitleProps<T, S, F>) {
-  const { idSchema, title, schema, uiSchema, required, registry } = props;
+  const { fieldPathId, title, schema, uiSchema, required, registry, optionalDataControl } = props;
   const options = getUiOptions<T, S, F>(uiSchema, registry.globalUiOptions);
   const { label: displayLabel = true } = options;
   if (!title || !displayLabel) {
@@ -32,12 +32,13 @@ export default function ArrayFieldTitleTemplate<
   );
   return (
     <TitleFieldTemplate
-      id={titleId<T>(idSchema)}
+      id={titleId(fieldPathId)}
       title={title}
       required={required}
       schema={schema}
       uiSchema={uiSchema}
       registry={registry}
+      optionalDataControl={optionalDataControl}
     />
   );
 }

package/src/components/templates/BaseInputTemplate.tsx

@@ -23,6 +23,7 @@ export default function BaseInputTemplate<
   const {
     id,
     name, // remove this from ...rest
+    htmlName,
     value,
     readonly,
     disabled,
@@ -34,7 +35,6 @@ export default function BaseInputTemplate<
     options,
     schema,
     uiSchema,
-    formContext,
     registry,
     rawErrors,
     type,
@@ -78,21 +78,21 @@ export default function BaseInputTemplate<
     <>
       <input
         id={id}
-        name={id}
+        name={htmlName || id}
         className='form-control'
         readOnly={readonly}
         disabled={disabled}
         autoFocus={autofocus}
         value={inputValue}
         {...inputProps}
-        list={schema.examples ? examplesId<T>(id) : undefined}
+        list={schema.examples ? examplesId(id) : undefined}
         onChange={onChangeOverride || _onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
-        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+        aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
       {Array.isArray(schema.examples) && (
-        <datalist key={`datalist_${id}`} id={examplesId<T>(id)}>
+        <datalist key={`datalist_${id}`} id={examplesId(id)}>
           {(schema.examples as string[])
             .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
             .map((example: any) => {

package/src/components/templates/ButtonTemplates/AddButton.tsx

@@ -5,6 +5,7 @@ import IconButton from './IconButton';
 /** The `AddButton` renders a button that represent the `Add` action on a form
  */
 export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  id,
   className,
   onClick,
   disabled,
@@ -15,6 +16,7 @@ export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSche
     <div className='row'>
       <p className={`col-xs-3 col-xs-offset-9 text-right ${className}`}>
         <IconButton
+          id={id}
           iconType='info'
           icon='plus'
           className='btn-add col-xs-12'

package/src/components/templates/FallbackFieldTemplate.tsx

@@ -0,0 +1,28 @@
+import { FallbackFieldTemplateProps, FormContextType, getTemplate, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+/**
+ * The `FallbackFieldTemplate` is used to render a field when no field matches. The field renders a type selector and
+ * the schema field for the form data.
+ */
+export default function FallbackFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: FallbackFieldTemplateProps<T, S, F>) {
+  const { schema, registry, typeSelector, schemaField } = props;
+
+  // By default, use the MultiSchemaFieldTemplate, which handles the same basic requirements.
+  const MultiSchemaFieldTemplate = getTemplate<'MultiSchemaFieldTemplate', T, S, F>(
+    'MultiSchemaFieldTemplate',
+    registry,
+  );
+
+  return (
+    <MultiSchemaFieldTemplate
+      selector={typeSelector}
+      optionSchemaField={schemaField}
+      schema={schema}
+      registry={registry}
+    />
+  );
+}

package/src/components/templates/FieldErrorTemplate.tsx

@@ -9,11 +9,11 @@ export default function FieldErrorTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldErrorProps<T, S, F>) {
-  const { errors = [], idSchema } = props;
+  const { errors = [], fieldPathId } = props;
   if (errors.length === 0) {
     return null;
   }
-  const id = errorId<T>(idSchema);
+  const id = errorId(fieldPathId);
 
   return (
     <div>

package/src/components/templates/FieldHelpTemplate.tsx

@@ -9,11 +9,11 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { idSchema, help } = props;
+  const { fieldPathId, help } = props;
   if (!help) {
     return null;
   }
-  const id = helpId<T>(idSchema);
+  const id = helpId(fieldPathId);
   if (typeof help === 'string') {
     return (
       <p id={id} className='help-block'>

package/src/components/templates/MultiSchemaFieldTemplate.tsx

@@ -0,0 +1,20 @@
+import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+/** The `MultiSchemaFieldTemplate` component renders the layout for the MultiSchemaField, which supports choosing
+ * a schema from a list of schemas defined using `anyOf` or `oneOf`.
+ *
+ * @param props - The `MultiSchemaFieldTemplate` to be rendered
+ */
+export default function MultiSchemaFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: MultiSchemaFieldTemplateProps<T, S, F>) {
+  const { selector, optionSchemaField } = props;
+  return (
+    <div className='panel panel-default panel-body'>
+      <div className='form-group'>{selector}</div>
+      {optionSchemaField}
+    </div>
+  );
+}

package/src/components/templates/ObjectFieldTemplate.tsx

@@ -24,11 +24,13 @@ export default function ObjectFieldTemplate<
   F extends FormContextType = any,
 >(props: ObjectFieldTemplateProps<T, S, F>) {
   const {
+    className,
     description,
     disabled,
     formData,
-    idSchema,
-    onAddClick,
+    fieldPathId,
+    onAddProperty,
+    optionalDataControl,
     properties,
     readonly,
     registry,
@@ -44,37 +46,40 @@ export default function ObjectFieldTemplate<
     registry,
     options,
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
   } = registry.templates;
   return (
-    <fieldset id={idSchema.$id}>
+    <fieldset className={className} id={fieldPathId.$id}>
       {title && (
         <TitleFieldTemplate
-          id={titleId<T>(idSchema)}
+          id={titleId(fieldPathId)}
           title={title}
           required={required}
           schema={schema}
           uiSchema={uiSchema}
           registry={registry}
+          optionalDataControl={showOptionalDataControlInTitle ? optionalDataControl : undefined}
         />
       )}
       {description && (
         <DescriptionFieldTemplate
-          id={descriptionId<T>(idSchema)}
+          id={descriptionId(fieldPathId)}
           description={description}
           schema={schema}
           uiSchema={uiSchema}
           registry={registry}
         />
       )}
+      {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
       {properties.map((prop: ObjectFieldTemplatePropertyType) => prop.content)}
       {canExpand<T, S, F>(schema, uiSchema, formData) && (
         <AddButton
-          id={buttonId<T>(idSchema, 'add')}
+          id={buttonId(fieldPathId, 'add')}
           className='rjsf-object-property-expand'
-          onClick={onAddClick(schema)}
+          onClick={onAddProperty}
           disabled={disabled || readonly}
           uiSchema={uiSchema}
           registry={registry}

package/src/components/templates/OptionalDataControlsTemplate.tsx

@@ -0,0 +1,43 @@
+import { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+import IconButton from './ButtonTemplates/IconButton';
+
+/** The OptionalDataControlsTemplate renders one of three different states. If
+ * there is an `onAddClick()` function, it renders the "Add" button. If there is
+ * an `onRemoveClick()` function, it renders the "Remove" button. Otherwise it
+ * renders the "No data found" section. All of them use the `label` as either
+ * the `title` of buttons or simply outputting it.
+ *
+ * @param props - The `OptionalDataControlsTemplateProps` for the template
+ */
+export default function OptionalDataControlsTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: OptionalDataControlsTemplateProps<T, S, F>) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return (
+      <IconButton
+        id={id}
+        registry={registry}
+        icon='plus'
+        className='rjsf-add-optional-data btn-sm'
+        onClick={onAddClick}
+        title={label}
+      />
+    );
+  } else if (onRemoveClick) {
+    return (
+      <IconButton
+        id={id}
+        registry={registry}
+        icon='remove'
+        className='rjsf-remove-optional-data btn-sm'
+        onClick={onRemoveClick}
+        title={label}
+      />
+    );
+  }
+  return <em id={id}>{label}</em>;
+}

package/src/components/templates/TitleField.tsx

@@ -9,11 +9,16 @@ const REQUIRED_FIELD_SYMBOL = '*';
 export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: TitleFieldProps<T, S, F>,
 ) {
-  const { id, title, required } = props;
+  const { id, title, required, optionalDataControl } = props;
   return (
     <legend id={id}>
       {title}
       {required && <span className='required'>{REQUIRED_FIELD_SYMBOL}</span>}
+      {optionalDataControl && (
+        <span className='pull-right' style={{ marginBottom: '2px' }}>
+          {optionalDataControl}
+        </span>
+      )}
     </legend>
   );
 }

package/src/components/templates/UnsupportedField.tsx

@@ -9,13 +9,13 @@ import Markdown from 'markdown-to-jsx';
 function UnsupportedField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: UnsupportedFieldProps<T, S, F>,
 ) {
-  const { schema, idSchema, reason, registry } = props;
+  const { schema, fieldPathId, reason, registry } = props;
   const { translateString } = registry;
   let translateEnum: TranslatableString = TranslatableString.UnsupportedField;
   const translateParams: string[] = [];
-  if (idSchema && idSchema.$id) {
+  if (fieldPathId && fieldPathId.$id) {
     translateEnum = TranslatableString.UnsupportedFieldWithId;
-    translateParams.push(idSchema.$id);
+    translateParams.push(fieldPathId.$id);
   }
   if (reason) {
     translateEnum =

package/src/components/templates/WrapIfAdditionalTemplate.tsx

@@ -26,8 +26,8 @@ export default function WrapIfAdditionalTemplate<
     style,
     disabled,
     label,
-    onKeyChange,
-    onDropPropertyClick,
+    onKeyRenameBlur,
+    onRemoveProperty,
     readonly,
     required,
     schema,
@@ -67,7 +67,7 @@ export default function WrapIfAdditionalTemplate<
               className='form-control'
               type='text'
               id={`${id}-key`}
-              onBlur={({ target }) => onKeyChange(target && target.value)}
+              onBlur={onKeyRenameBlur}
               defaultValue={label}
             />
           </div>
@@ -75,11 +75,11 @@ export default function WrapIfAdditionalTemplate<
         <div className='form-additional form-group col-xs-5'>{children}</div>
         <div className='col-xs-2'>
           <RemoveButton
-            id={buttonId<T>(id, 'remove')}
+            id={buttonId(id, 'remove')}
             className='rjsf-object-property-remove btn-block'
             style={{ border: '0' }}
             disabled={disabled || readonly}
-            onClick={onDropPropertyClick(label)}
+            onClick={onRemoveProperty}
             uiSchema={uiSchema}
             registry={registry}
           />

package/src/components/templates/index.ts

@@ -9,11 +9,14 @@ import BaseInputTemplate from './BaseInputTemplate';
 import ButtonTemplates from './ButtonTemplates';
 import DescriptionField from './DescriptionField';
 import ErrorList from './ErrorList';
+import FallbackFieldTemplate from './FallbackFieldTemplate';
 import FieldTemplate from './FieldTemplate';
 import FieldErrorTemplate from './FieldErrorTemplate';
 import FieldHelpTemplate from './FieldHelpTemplate';
 import GridTemplate from './GridTemplate';
+import MultiSchemaFieldTemplate from './MultiSchemaFieldTemplate';
 import ObjectFieldTemplate from './ObjectFieldTemplate';
+import OptionalDataControlsTemplate from './OptionalDataControlsTemplate';
 import TitleField from './TitleField';
 import UnsupportedField from './UnsupportedField';
 import WrapIfAdditionalTemplate from './WrapIfAdditionalTemplate';
@@ -33,11 +36,14 @@ function templates<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends F
     BaseInputTemplate,
     DescriptionFieldTemplate: DescriptionField,
     ErrorListTemplate: ErrorList,
+    FallbackFieldTemplate,
     FieldTemplate,
     FieldErrorTemplate,
     FieldHelpTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     UnsupportedFieldTemplate: UnsupportedField,
     WrapIfAdditionalTemplate,

package/src/components/widgets/AltDateWidget.tsx

@@ -1,144 +1,26 @@
-import { MouseEvent, useCallback, useEffect, useReducer, useState } from 'react';
 import {
-  ariaDescribedByIds,
-  dateRangeOptions,
-  parseDateString,
-  toDateString,
-  DateObject,
-  type DateElementFormat,
+  DateElement,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
   TranslatableString,
   WidgetProps,
-  getDateElementProps,
+  useAltDateWidgetProps,
 } from '@rjsf/utils';
 
-function readyForChange(state: DateObject) {
-  return Object.values(state).every((value) => value !== -1);
-}
-
-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'
-> & {
-  rootId: string;
-  select: (property: keyof DateObject, value: any) => void;
-  type: string;
-  range: [number, number];
-};
-
-function DateElement<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
-  type,
-  range,
-  value,
-  select,
-  rootId,
-  name,
-  disabled,
-  readonly,
-  autofocus,
-  registry,
-  onBlur,
-  onFocus,
-}: DateElementProps<T, S, F>) {
-  const id = rootId + '_' + type;
-  const { SelectWidget } = registry.widgets;
-  return (
-    <SelectWidget
-      schema={{ type: 'integer' } as S}
-      id={id}
-      name={name}
-      className='form-control'
-      options={{ enumOptions: dateRangeOptions<S>(range[0], range[1]) }}
-      placeholder={type}
-      value={value}
-      disabled={disabled}
-      readonly={readonly}
-      autofocus={autofocus}
-      onChange={(value: any) => select(type as keyof DateObject, value)}
-      onBlur={onBlur}
-      onFocus={onFocus}
-      registry={registry}
-      label=''
-      aria-describedby={ariaDescribedByIds<T>(rootId)}
-    />
-  );
-}
-
 /** The `AltDateWidget` is an alternative widget for rendering date properties.
  * @param props - The `WidgetProps` for this component
  */
-function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
-  time = false,
-  disabled = false,
-  readonly = false,
-  autofocus = false,
-  options,
-  id,
-  name,
-  registry,
-  onBlur,
-  onFocus,
-  onChange,
-  value,
-}: WidgetProps<T, S, F>) {
+function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>,
+) {
+  const { disabled = false, readonly = false, autofocus = false, options, id, name, registry, onBlur, onFocus } = props;
   const { translateString } = registry;
-  const [lastValue, setLastValue] = useState(value);
-  const [state, setState] = useReducer(
-    (state: DateObject, action: Partial<DateObject>) => {
-      return { ...state, ...action };
-    },
-    parseDateString(value, time),
-  );
-
-  useEffect(() => {
-    const stateValue = toDateString(state, time);
-    if (readyForChange(state) && stateValue !== value) {
-      // The user changed the date to a new valid data via the comboboxes, so call onChange
-      onChange(stateValue);
-    } else if (lastValue !== value) {
-      // We got a new value in the props
-      setLastValue(value);
-      setState(parseDateString(value, time));
-    }
-  }, [time, value, onChange, state, lastValue]);
-
-  const handleChange = useCallback((property: keyof DateObject, value: string) => {
-    setState({ [property]: value });
-  }, []);
-
-  const handleSetNow = useCallback(
-    (event: MouseEvent<HTMLAnchorElement>) => {
-      event.preventDefault();
-      if (disabled || readonly) {
-        return;
-      }
-      const nextState = parseDateString(new Date().toJSON(), time);
-      onChange(toDateString(nextState, time));
-    },
-    [disabled, readonly, time],
-  );
-
-  const handleClear = useCallback(
-    (event: MouseEvent<HTMLAnchorElement>) => {
-      event.preventDefault();
-      if (disabled || readonly) {
-        return;
-      }
-      onChange(undefined);
-    },
-    [disabled, readonly, onChange],
-  );
+  const { elements, handleChange, handleClear, handleSetNow } = useAltDateWidgetProps(props);
 
   return (
     <ul className='list-inline'>
-      {getDateElementProps(
-        state,
-        time,
-        options.yearsRange as [number, number] | undefined,
-        options.format as DateElementFormat | undefined,
-      ).map((elemProps, i) => (
+      {elements.map((elemProps, i) => (
         <li className='list-inline-item' key={i}>
           <DateElement
             rootId={id}

package/src/components/widgets/CheckboxWidget.tsx

@@ -31,6 +31,7 @@ function CheckboxWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
   onFocus,
   onChange,
   registry,
+  htmlName,
 }: WidgetProps<T, S, F>) {
   const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
     'DescriptionFieldTemplate',
@@ -62,7 +63,7 @@ function CheckboxWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
     <div className={`checkbox ${disabled || readonly ? 'disabled' : ''}`}>
       {!hideLabel && description && (
         <DescriptionFieldTemplate
-          id={descriptionId<T>(id)}
+          id={descriptionId(id)}
           description={description}
           schema={schema}
           uiSchema={uiSchema}
@@ -73,7 +74,7 @@ function CheckboxWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
         <input
           type='checkbox'
           id={id}
-          name={id}
+          name={htmlName || id}
           checked={typeof value === 'undefined' ? false : value}
           required={required}
           disabled={disabled || readonly}
@@ -81,7 +82,7 @@ function CheckboxWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
           onChange={handleChange}
           onBlur={handleBlur}
           onFocus={handleFocus}
-          aria-describedby={ariaDescribedByIds<T>(id)}
+          aria-describedby={ariaDescribedByIds(id)}
         />
         {labelValue(<span>{label}</span>, hideLabel)}
       </label>