@rjsf/core 6.0.0-beta.2 → 6.0.0-beta.21

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

@@ -85,14 +85,14 @@ export default function BaseInputTemplate<
         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/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,
+    fieldPathId,
     onAddClick,
+    optionalDataControl,
     properties,
     readonly,
     registry,
@@ -44,35 +46,38 @@ 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)}
           disabled={disabled || readonly}

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

@@ -75,7 +75,7 @@ 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}

package/src/components/templates/index.ts

@@ -13,7 +13,9 @@ 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';
@@ -37,7 +39,9 @@ function templates<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends F
     FieldErrorTemplate,
     FieldHelpTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     UnsupportedFieldTemplate: UnsupportedField,
     WrapIfAdditionalTemplate,

package/src/components/widgets/AltDateWidget.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, useCallback, useEffect, useReducer, useState } from 'react';
+import { MouseEvent, useCallback, useEffect, useState } from 'react';
 import {
   ariaDescribedByIds,
   dateRangeOptions,
@@ -61,7 +61,7 @@ function DateElement<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
       onFocus={onFocus}
       registry={registry}
       label=''
-      aria-describedby={ariaDescribedByIds<T>(rootId)}
+      aria-describedby={ariaDescribedByIds(rootId)}
     />
   );
 }
@@ -84,29 +84,27 @@ function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
   value,
 }: WidgetProps<T, S, F>) {
   const { translateString } = registry;
-  const [lastValue, setLastValue] = useState(value);
-  const [state, setState] = useReducer(
-    (state: DateObject, action: Partial<DateObject>) => {
-      return { ...state, ...action };
-    },
-    parseDateString(value, time),
-  );
+  const [state, setState] = useState(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]);
+    setState(parseDateString(value, time));
+  }, [time, value]);
+
+  const handleChange = useCallback(
+    (property: keyof DateObject, value: string) => {
+      const nextState = {
+        ...state,
+        [property]: typeof value === 'undefined' ? -1 : value,
+      };
 
-  const handleChange = useCallback((property: keyof DateObject, value: string) => {
-    setState({ [property]: value });
-  }, []);
+      if (readyForChange(nextState)) {
+        onChange(toDateString(nextState, time));
+      } else {
+        setState(nextState);
+      }
+    },
+    [state, onChange, time],
+  );
 
   const handleSetNow = useCallback(
     (event: MouseEvent<HTMLAnchorElement>) => {
@@ -117,7 +115,7 @@ function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
       const nextState = parseDateString(new Date().toJSON(), time);
       onChange(toDateString(nextState, time));
     },
-    [disabled, readonly, time],
+    [disabled, readonly, time, onChange],
   );
 
   const handleClear = useCallback(

package/src/components/widgets/CheckboxWidget.tsx

@@ -62,7 +62,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}
@@ -81,7 +81,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>

package/src/components/widgets/CheckboxesWidget.tsx

@@ -33,13 +33,13 @@ function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
   const handleBlur = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) =>
       onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue)),
-    [onBlur, id],
+    [onBlur, id, enumOptions, emptyValue],
   );
 
   const handleFocus = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) =>
       onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue)),
-    [onFocus, id],
+    [onFocus, id, enumOptions, emptyValue],
   );
   return (
     <div className='checkboxes' id={id}>
@@ -70,7 +70,7 @@ function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
                 onChange={handleChange}
                 onBlur={handleBlur}
                 onFocus={handleFocus}
-                aria-describedby={ariaDescribedByIds<T>(id)}
+                aria-describedby={ariaDescribedByIds(id)}
               />
               <span>{option.label}</span>
             </span>

package/src/components/widgets/RadioWidget.tsx

@@ -65,7 +65,7 @@ function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
                 onChange={handleChange}
                 onBlur={handleBlur}
                 onFocus={handleFocus}
-                aria-describedby={ariaDescribedByIds<T>(id)}
+                aria-describedby={ariaDescribedByIds(id)}
               />
               <span>{option.label}</span>
             </span>

package/src/components/widgets/SelectWidget.tsx

@@ -83,7 +83,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
       onBlur={handleBlur}
       onFocus={handleFocus}
       onChange={handleChange}
-      aria-describedby={ariaDescribedByIds<T>(id)}
+      aria-describedby={ariaDescribedByIds(id)}
     >
       {showPlaceholderOption && <option value=''>{placeholder}</option>}
       {Array.isArray(enumOptions) &&

package/src/components/widgets/TextareaWidget.tsx

@@ -48,7 +48,7 @@ function TextareaWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
       onBlur={handleBlur}
       onFocus={handleFocus}
       onChange={handleChange}
-      aria-describedby={ariaDescribedByIds<T>(id)}
+      aria-describedby={ariaDescribedByIds(id)}
     />
   );
 }

package/src/getDefaultRegistry.ts

@@ -1,4 +1,12 @@
-import { englishStringTranslator, FormContextType, Registry, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import {
+  DEFAULT_ID_PREFIX,
+  DEFAULT_ID_SEPARATOR,
+  englishStringTranslator,
+  FormContextType,
+  Registry,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 
 import fields from './components/fields';
 import templates from './components/templates';
@@ -20,5 +28,6 @@ export default function getDefaultRegistry<
     rootSchema: {} as S,
     formContext: {} as F,
     translateString: englishStringTranslator,
+    globalFormOptions: { idPrefix: DEFAULT_ID_PREFIX, idSeparator: DEFAULT_ID_SEPARATOR },
   };
 }

package/src/getTestRegistry.tsx

@@ -0,0 +1,34 @@
+import {
+  DEFAULT_ID_PREFIX,
+  DEFAULT_ID_SEPARATOR,
+  createSchemaUtils,
+  englishStringTranslator,
+  Registry,
+} from '@rjsf/utils';
+import validator from '@rjsf/validator-ajv8';
+
+import getDefaultRegistry from './getDefaultRegistry';
+
+/** Use for react testing library tests where we directly test the component rather than testing inside a Form
+ */
+export default function getTestRegistry(
+  rootSchema: Registry['rootSchema'],
+  fields: Registry['fields'] = {},
+  templates: Partial<Registry['templates']> = {},
+  widgets: Registry['widgets'] = {},
+  formContext: Registry['formContext'] = {},
+  globalFormOptions: Registry['globalFormOptions'] = { idPrefix: DEFAULT_ID_PREFIX, idSeparator: DEFAULT_ID_SEPARATOR },
+): Registry {
+  const defaults = getDefaultRegistry();
+  const schemaUtils = createSchemaUtils(validator, rootSchema);
+  return {
+    fields: { ...defaults.fields, ...fields },
+    templates: { ...defaults.templates, ...templates },
+    widgets: { ...defaults.widgets, ...widgets },
+    formContext,
+    rootSchema,
+    schemaUtils,
+    translateString: englishStringTranslator,
+    globalFormOptions,
+  };
+}

package/src/index.ts

@@ -2,8 +2,9 @@ import Form, { FormProps, FormState, IChangeEvent } from './components/Form';
 import RichDescription, { RichDescriptionProps } from './components/RichDescription';
 import withTheme, { ThemeProps } from './withTheme';
 import getDefaultRegistry from './getDefaultRegistry';
+import getTestRegistry from './getTestRegistry';
 
 export type { FormProps, FormState, IChangeEvent, ThemeProps, RichDescriptionProps };
 
-export { withTheme, getDefaultRegistry, RichDescription };
+export { withTheme, getDefaultRegistry, getTestRegistry, RichDescription };
 export default Form;