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

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;