@rjsf/core 6.0.0-beta.8 → 6.0.0

package/src/components/widgets/CheckboxesWidget.tsx

@@ -27,19 +27,20 @@ function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
   onChange,
   onBlur,
   onFocus,
+  htmlName,
 }: WidgetProps<T, S, F>) {
   const checkboxesValues = Array.isArray(value) ? value : [value];
 
   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}>
@@ -62,7 +63,7 @@ function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
               <input
                 type='checkbox'
                 id={optionId(id, index)}
-                name={id}
+                name={htmlName || id}
                 checked={checked}
                 value={String(index)}
                 disabled={disabled || itemDisabled || readonly}
@@ -70,7 +71,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/FileWidget.tsx

@@ -1,6 +1,6 @@
-import { ChangeEvent, useCallback, useMemo } from 'react';
+import { ChangeEvent } from 'react';
 import {
-  dataURItoBlob,
+  FileInfoType,
   FormContextType,
   getTemplate,
   Registry,
@@ -8,54 +8,11 @@ import {
   StrictRJSFSchema,
   TranslatableString,
   UIOptionsType,
+  useFileWidgetProps,
   WidgetProps,
 } from '@rjsf/utils';
 import Markdown from 'markdown-to-jsx';
 
-function addNameToDataURL(dataURL: string, name: string) {
-  if (dataURL === null) {
-    return null;
-  }
-  return dataURL.replace(';base64', `;name=${encodeURIComponent(name)};base64`);
-}
-
-type FileInfoType = {
-  dataURL?: string | null;
-  name: string;
-  size: number;
-  type: string;
-};
-
-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);
-  });
-}
-
-function processFiles(files: FileList) {
-  return Promise.all(Array.from(files).map(processFile));
-}
-
 function FileInfoPreview<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   fileInfo,
   registry,
@@ -125,29 +82,6 @@ function FilesInfo<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends F
   );
 }
 
-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[]);
-}
-
 /**
  *  The `FileWidget` is a widget for rendering file upload fields.
  *  It is typically used with a string property with data-url format.
@@ -156,40 +90,15 @@ function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   props: WidgetProps<T, S, F>,
 ) {
   const { disabled, readonly, required, multiple, onChange, value, options, registry } = props;
+  const { filesInfo, handleChange, handleRemove } = useFileWidgetProps(value, onChange, multiple);
   const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);
 
-  const handleChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      if (!event.target.files) {
-        return;
-      }
-      // Due to variances in themes, dealing with multiple files for the array case now happens one file at a time.
-      // This is because we don't pass `multiple` into the `BaseInputTemplate` anymore. Instead, we deal with the single
-      // file in each event and concatenate them together ourselves
-      processFiles(event.target.files).then((filesInfoEvent) => {
-        const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
-        if (multiple) {
-          onChange(value.concat(newValue));
-        } else {
-          onChange(newValue[0]);
-        }
-      });
-    },
-    [multiple, value, onChange],
-  );
+  const handleOnChangeEvent = (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      handleChange(event.target.files);
+    }
+  };
 
-  const filesInfo = useMemo(() => extractFileInfo(Array.isArray(value) ? value : [value]), [value]);
-  const rmFile = useCallback(
-    (index: number) => {
-      if (multiple) {
-        const newValue = value.filter((_: any, i: number) => i !== index);
-        onChange(newValue);
-      } else {
-        onChange(undefined);
-      }
-    },
-    [multiple, value, onChange],
-  );
   return (
     <div>
       <BaseInputTemplate
@@ -197,13 +106,13 @@ function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
         disabled={disabled || readonly}
         type='file'
         required={value ? false : required} // this turns off HTML required validation when a value exists
-        onChangeOverride={handleChange}
+        onChangeOverride={handleOnChangeEvent}
         value=''
         accept={options.accept ? String(options.accept) : undefined}
       />
       <FilesInfo<T, S, F>
         filesInfo={filesInfo}
-        onRemove={rmFile}
+        onRemove={handleRemove}
         registry={registry}
         preview={options.filePreview}
         options={options}

package/src/components/widgets/HiddenWidget.tsx

@@ -8,8 +8,9 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjs
 function HiddenWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
   value,
+  htmlName,
 }: WidgetProps<T, S, F>) {
-  return <input type='hidden' id={id} name={id} value={typeof value === 'undefined' ? '' : value} />;
+  return <input type='hidden' id={id} name={htmlName || id} value={typeof value === 'undefined' ? '' : value} />;
 }
 
 export default HiddenWidget;

package/src/components/widgets/RadioWidget.tsx

@@ -26,6 +26,7 @@ function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   onFocus,
   onChange,
   id,
+  htmlName,
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
 
@@ -57,7 +58,7 @@ function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
                 type='radio'
                 id={optionId(id, i)}
                 checked={checked}
-                name={id}
+                name={htmlName || id}
                 required={required}
                 value={String(i)}
                 disabled={disabled || itemDisabled || readonly}
@@ -65,7 +66,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/RatingWidget.tsx

@@ -29,6 +29,7 @@ export default function RatingWidget<
   onBlur,
   schema,
   options,
+  htmlName,
 }: WidgetProps<T, S, F>) {
   const { stars = 5, shape = 'star' } = options;
 
@@ -117,7 +118,7 @@ export default function RatingWidget<
         <input
           type='hidden'
           id={id}
-          name={id}
+          name={htmlName || id}
           value={value || ''}
           required={required}
           disabled={disabled || readonly}

package/src/components/widgets/SelectWidget.tsx

@@ -38,6 +38,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
   onBlur,
   onFocus,
   placeholder,
+  htmlName,
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
   const emptyValue = multiple ? [] : '';
@@ -72,7 +73,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
   return (
     <select
       id={id}
-      name={id}
+      name={htmlName || id}
       multiple={multiple}
       role='combobox'
       className='form-control'
@@ -83,7 +84,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

@@ -17,6 +17,7 @@ function TextareaWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
   onChange,
   onBlur,
   onFocus,
+  htmlName,
 }: WidgetProps<T, S, F>) {
   const handleChange = useCallback(
     ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) => onChange(value === '' ? options.emptyValue : value),
@@ -36,7 +37,7 @@ function TextareaWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
   return (
     <textarea
       id={id}
-      name={id}
+      name={htmlName || id}
       className='form-control'
       value={value ? value : ''}
       placeholder={placeholder}
@@ -48,7 +49,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,10 @@ export default function getDefaultRegistry<
     rootSchema: {} as S,
     formContext: {} as F,
     translateString: englishStringTranslator,
+    globalFormOptions: {
+      idPrefix: DEFAULT_ID_PREFIX,
+      idSeparator: DEFAULT_ID_SEPARATOR,
+      useFallbackUiForUnsupportedType: false,
+    },
   };
 }

package/src/getTestRegistry.tsx

@@ -0,0 +1,38 @@
+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,
+    useFallbackUiForUnsupportedType: false,
+  },
+): 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;