@rjsf/mantine 6.0.0-beta.21 → 6.0.0-beta.23

package/src/templates/WrapIfAdditionalTemplate.tsx

@@ -1,4 +1,3 @@
-import { FocusEvent, useCallback } from 'react';
 import {
   ADDITIONAL_PROPERTY_FLAG,
   UI_OPTIONS_KEY,
@@ -31,8 +30,8 @@ export default function WrapIfAdditionalTemplate<
     disabled,
     schema,
     uiSchema,
-    onKeyChange,
-    onDropPropertyClick,
+    onKeyRenameBlur,
+    onRemoveProperty,
     registry,
     children,
   } = props;
@@ -42,11 +41,6 @@ export default function WrapIfAdditionalTemplate<
   const keyLabel = translateString(TranslatableString.KeyLabel, [label]);
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
 
-  const handleBlur = useCallback(
-    ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target && target.value),
-    [onKeyChange],
-  );
-
   if (!additional) {
     return (
       <div className={classNames} style={style}>
@@ -76,7 +70,7 @@ export default function WrapIfAdditionalTemplate<
                 disabled={disabled || readonly}
                 id={`${id}-key`}
                 name={`${id}-key`}
-                onBlur={!readonly ? handleBlur : undefined}
+                onBlur={!readonly ? onKeyRenameBlur : undefined}
               />
             </div>
           </Grid.Col>
@@ -89,7 +83,7 @@ export default function WrapIfAdditionalTemplate<
           iconType='sm'
           className='rjsf-array-item-remove'
           disabled={disabled || readonly}
-          onClick={onDropPropertyClick(label)}
+          onClick={onRemoveProperty}
           uiSchema={buttonUiOptions}
           registry={registry}
         />

package/src/widgets/CheckboxWidget.tsx

@@ -26,6 +26,7 @@ export default function CheckboxWidget<
   const {
     id,
     name,
+    htmlName,
     value = false,
     required,
     disabled,
@@ -92,7 +93,7 @@ export default function CheckboxWidget<
       )}
       <Checkbox
         id={id}
-        name={name}
+        name={htmlName || name}
         label={labelValue(label || undefined, hideLabel, false)}
         disabled={disabled || readonly}
         required={required}

package/src/widgets/CheckboxesWidget.tsx

@@ -26,6 +26,7 @@ export default function CheckboxesWidget<
 >(props: WidgetProps<T, S, F>) {
   const {
     id,
+    htmlName,
     value,
     required,
     disabled,
@@ -95,7 +96,7 @@ export default function CheckboxesWidget<
               <Checkbox
                 key={i}
                 id={optionId(id, i)}
-                name={id}
+                name={htmlName || id}
                 value={String(i)}
                 label={option.label}
                 disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1}

package/src/widgets/DateTime/AltDateTimeWidget.tsx

@@ -1,7 +1,5 @@
 import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 
-import _AltDateWidget from './AltDateWidget';
-
 /** The `AltDateTimeWidget` is an alternative widget for rendering datetime properties.
  *  It uses the AltDateWidget for rendering, with the `time` prop set to true by default.
  *
@@ -13,10 +11,5 @@ export default function AltDateTimeWidget<
   F extends FormContextType = any,
 >(props: WidgetProps<T, S, F>) {
   const { AltDateWidget } = props.registry.widgets;
-  return <AltDateWidget showTime {...props} />;
+  return <AltDateWidget time {...props} />;
 }
-
-AltDateTimeWidget.defaultProps = {
-  ..._AltDateWidget?.defaultProps,
-  showTime: true,
-};

package/src/widgets/DateTime/AltDateWidget.tsx

@@ -1,25 +1,17 @@
-import { useCallback, useEffect, useState } from 'react';
 import {
   ariaDescribedByIds,
   dateRangeOptions,
-  parseDateString,
-  toDateString,
-  getDateElementProps,
   titleId,
   DateObject,
-  type DateElementFormat,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
   TranslatableString,
+  useAltDateWidgetProps,
   WidgetProps,
 } from '@rjsf/utils';
 import { Flex, Box, Group, Button, Select, Input } from '@mantine/core';
 
-function readyForChange(state: DateObject) {
-  return Object.values(state).every((value) => value !== -1);
-}
-
 /** The `AltDateWidget` is an alternative widget for rendering date properties.
  * @param props - The `WidgetProps` for this component
  */
@@ -28,57 +20,9 @@ export default function AltDateWidget<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: WidgetProps<T, S, F>) {
-  const {
-    id,
-    value,
-    required,
-    disabled,
-    readonly,
-    label,
-    hideLabel,
-    rawErrors,
-    options,
-    onChange,
-    showTime = false,
-    registry,
-  } = props;
-
+  const { id, required, disabled, readonly, label, hideLabel, rawErrors, options, registry } = props;
   const { translateString } = registry;
-  const [state, setState] = useState(parseDateString(value, showTime));
-
-  useEffect(() => {
-    setState(parseDateString(value, showTime));
-  }, [showTime, value]);
-
-  const handleChange = useCallback(
-    (property: keyof DateObject, nextValue: any) => {
-      const nextState = {
-        ...state,
-        [property]: typeof nextValue === 'undefined' ? -1 : nextValue,
-      };
-
-      if (readyForChange(nextState)) {
-        onChange(toDateString(nextState, showTime));
-      } else {
-        setState(nextState);
-      }
-    },
-    [state, onChange, showTime],
-  );
-
-  const handleSetNow = useCallback(() => {
-    if (!disabled && !readonly) {
-      const nextState = parseDateString(new Date().toJSON(), showTime);
-      onChange(toDateString(nextState, showTime));
-    }
-  }, [disabled, readonly, showTime, onChange]);
-
-  const handleClear = useCallback(() => {
-    if (!disabled && !readonly) {
-      onChange('');
-    }
-  }, [disabled, readonly, onChange]);
-
+  const { elements, handleChange, handleClear, handleSetNow } = useAltDateWidgetProps(props);
   return (
     <>
       {!hideLabel && !!label && (
@@ -87,13 +31,8 @@ export default function AltDateWidget<
         </Input.Label>
       )}
       <Flex gap='xs' align='center' wrap='nowrap'>
-        {getDateElementProps(
-          state,
-          showTime,
-          options.yearsRange as [number, number] | undefined,
-          options.format as DateElementFormat | undefined,
-        ).map((elemProps, i) => {
-          const elemId = id + '_' + elemProps.type;
+        {elements.map((elemProps, i) => {
+          const elemId = `${id}_${elemProps.type}`;
           return (
             <Box key={i}>
               <Select
@@ -103,7 +42,7 @@ export default function AltDateWidget<
                 disabled={disabled || readonly}
                 data={dateRangeOptions<S>(elemProps.range[0], elemProps.range[1]).map((item) => item.value.toString())}
                 value={!elemProps.value || elemProps.value < 0 ? null : elemProps.value.toString()}
-                onChange={(v) => handleChange(elemProps.type as keyof DateObject, v)}
+                onChange={(v) => handleChange(elemProps.type as keyof DateObject, v || undefined)}
                 searchable={false}
                 allowDeselect={false}
                 comboboxProps={{ withinPortal: false }}
@@ -133,7 +72,3 @@ export default function AltDateWidget<
     </>
   );
 }
-
-AltDateWidget.defaultProps = {
-  showTime: false,
-};

package/src/widgets/FileWidget.tsx

@@ -1,85 +1,17 @@
 import { useCallback } from 'react';
 import {
-  dataURItoBlob,
   ariaDescribedByIds,
   FormContextType,
   labelValue,
   RJSFSchema,
   StrictRJSFSchema,
+  useFileWidgetProps,
   WidgetProps,
 } from '@rjsf/utils';
 import { FileInput, Pill } from '@mantine/core';
 
 import { cleanupOptions } from '../utils';
 
-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 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 (e) {
-      console.log(e);
-      // Invalid dataURI, so just ignore it.
-      return acc;
-    }
-  }, [] as FileInfoType[]);
-}
-
 /**
  * The `FileWidget` is a widget for rendering file upload fields.
  *
@@ -104,56 +36,32 @@ export default function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSch
     multiple,
     onChange,
   } = props;
-
+  const { filesInfo, handleChange, handleRemove } = useFileWidgetProps(value, onChange, multiple);
   const themeProps = cleanupOptions(options);
 
-  const handleChange = useCallback(
+  const handleOnChange = useCallback(
     (files: any) => {
       if (typeof files === 'object') {
-        processFiles(multiple ? files : [files]).then((filesInfoEvent) => {
-          const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
-          if (multiple) {
-            onChange(value.concat(newValue));
-          } else {
-            onChange(newValue[0]);
-          }
-        });
-      }
-      return;
-    },
-    [multiple, value, onChange],
-  );
-
-  const handleRemoveFile = useCallback(
-    (index: number) => {
-      if (multiple) {
-        const newValue = value.filter((_: any, i: number) => i !== index);
-        onChange(newValue);
-      } else {
-        onChange(undefined);
+        handleChange(files);
       }
     },
-    [multiple, value, onChange],
+    [handleChange],
   );
 
-  const ValueComponent = useCallback(
-    (props: any) => {
-      const filesInfo = props.value ? extractFileInfo(Array.isArray(props.value) ? props.value : [props.value]) : null;
-      if (Array.isArray(filesInfo) && filesInfo.length > 0) {
-        return (
-          <Pill.Group>
-            {filesInfo.map((file, index) => (
-              <Pill key={index} withRemoveButton onRemove={() => handleRemoveFile(index)}>
-                {file.name}
-              </Pill>
-            ))}
-          </Pill.Group>
-        );
-      }
-      return null;
-    },
-    [handleRemoveFile],
-  );
+  const ValueComponent = useCallback(() => {
+    if (Array.isArray(filesInfo) && filesInfo.length > 0) {
+      return (
+        <Pill.Group>
+          {filesInfo.map((file, index) => (
+            <Pill key={index} withRemoveButton onRemove={() => handleRemove(index)}>
+              {file.name}
+            </Pill>
+          ))}
+        </Pill.Group>
+      );
+    }
+    return null;
+  }, [handleRemove, filesInfo]);
 
   return (
     <FileInput
@@ -167,7 +75,7 @@ export default function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSch
       label={labelValue(label || undefined, hideLabel, false)}
       multiple={!!multiple}
       valueComponent={ValueComponent}
-      onChange={handleChange}
+      onChange={handleOnChange}
       error={rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined}
       {...themeProps}
       aria-describedby={ariaDescribedByIds(id)}

package/src/widgets/RadioWidget.tsx

@@ -23,6 +23,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
 ) {
   const {
     id,
+    htmlName,
     value,
     required,
     disabled,
@@ -72,7 +73,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   return (
     <Radio.Group
       id={id}
-      name={id}
+      name={htmlName || id}
       value={selected}
       label={!hideLabel ? label : undefined}
       onChange={handleChange}

package/src/widgets/SelectWidget.tsx

@@ -23,6 +23,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
 ) {
   const {
     id,
+    htmlName,
     value,
     placeholder,
     required,
@@ -88,7 +89,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
   return (
     <Component
       id={id}
-      name={id}
+      name={htmlName || id}
       label={labelValue(label || undefined, hideLabel, false)}
       data={selectOptions}
       value={multiple ? (selectedIndexes as any) : (selectedIndexes as string)}

package/src/widgets/TextareaWidget.tsx

@@ -23,6 +23,7 @@ export default function TextareaWidget<
   const {
     id,
     name,
+    htmlName,
     value,
     placeholder,
     required,
@@ -69,7 +70,7 @@ export default function TextareaWidget<
   return (
     <Textarea
       id={id}
-      name={name}
+      name={htmlName || name}
       value={value || ''}
       placeholder={placeholder || undefined}
       required={required}