Added multiple usecallback hooks and multischemafieldtemplate for mantine

Author: Algirdyz

packages/mantine/package.json

@@ -63,7 +63,7 @@
   "peerDependencies": {
     "@rjsf/core": "^6.0.0-beta",
     "@rjsf/utils": "^6.0.0-beta",
-    "react": "^16.14.0 || >=17",
+    "react": ">=18",
     "@mantine/core": ">=7",
     "@mantine/hooks": ">=7",
     "@mantine/dates": ">=7"
@@ -109,4 +109,4 @@
     "url": "git+https://github.com/rjsf-team/react-jsonschema-form.git"
   },
   "license": "Apache-2.0"
-}
+}

packages/mantine/src/templates/BaseInputTemplate.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FocusEvent } from 'react';
+import { ChangeEvent, FocusEvent, useCallback } from 'react';
 import {
   ariaDescribedByIds,
   BaseInputTemplateProps,
@@ -48,16 +48,30 @@ export default function BaseInputTemplate<
   const inputProps = getInputProps<T, S, F>(schema, type, options, false);
   const themeProps = cleanupOptions(options);
 
-  const handleNumberChange = (value: number | string) => onChange(value);
+  const handleNumberChange = useCallback((value: number | string) => onChange(value), [onChange]);
 
-  const handleChange = onChangeOverride
-    ? onChangeOverride
-    : (e: ChangeEvent<HTMLInputElement>) =>
-        onChange(e.target.value === '' ? (options.emptyValue ?? '') : e.target.value);
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const handler = onChangeOverride ? onChangeOverride : onChange;
+      const value = e.target.value === '' ? (options.emptyValue ?? '') : e.target.value;
+      handler(value);
+    },
+    [onChange, onChangeOverride, options],
+  );
 
-  const handleBlur = (e: FocusEvent<HTMLInputElement>) => onBlur(id, e.target && e.target.value);
+  const handleBlur = useCallback(
+    (e: FocusEvent<HTMLInputElement>) => {
+      onBlur(id, e.target && e.target.value);
+    },
+    [onBlur, id],
+  );
 
-  const handleFocus = (e: FocusEvent<HTMLInputElement>) => onFocus(id, e.target && e.target.value);
+  const handleFocus = useCallback(
+    (e: FocusEvent<HTMLInputElement>) => {
+      onFocus(id, e.target && e.target.value);
+    },
+    [onFocus, id],
+  );
 
   const input =
     inputProps.type === 'number' || inputProps.type === 'integer' ? (

packages/mantine/src/templates/MultiSchemaFieldTemplate.tsx

@@ -0,0 +1,15 @@
+import { Stack } from '@mantine/core';
+import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export default function MultiSchemaFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>({ selector, optionSchemaField }: MultiSchemaFieldTemplateProps<T, S, F>) {
+  return (
+    <Stack style={{ marginBottom: '1rem' }}>
+      {selector}
+      {optionSchemaField}
+    </Stack>
+  );
+}

packages/mantine/src/templates/ObjectFieldTemplate.tsx

@@ -93,7 +93,7 @@ export default function ObjectFieldTemplate<
             id={buttonId<T>(idSchema, 'add')}
             disabled={disabled || readonly}
             onClick={onAddClick(schema)}
-            className='object-property-expand'
+            className='rjsf-object-property-expand'
             uiSchema={uiSchema}
             registry={registry}
           />

packages/mantine/src/templates/WrapIfAdditionalTemplate.tsx

@@ -1,4 +1,4 @@
-import { FocusEvent } from 'react';
+import { FocusEvent, useCallback } from 'react';
 import {
   ADDITIONAL_PROPERTY_FLAG,
   UI_OPTIONS_KEY,
@@ -42,6 +42,11 @@ 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}>
@@ -50,8 +55,6 @@ export default function WrapIfAdditionalTemplate<
     );
   }
 
-  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target && target.value);
-
   // The `block` prop is not part of the `IconButtonProps` defined in the template, so put it into the uiSchema instead
   const uiOptions = uiSchema ? uiSchema[UI_OPTIONS_KEY] : {};
   const buttonUiOptions = {

packages/mantine/src/templates/index.ts

@@ -14,6 +14,7 @@ import GridTemplate from './GridTemplate';
 import ObjectFieldTemplate from './ObjectFieldTemplate';
 import TitleField from './TitleField';
 import WrapIfAdditionalTemplate from './WrapIfAdditionalTemplate';
+import MultiSchemaFieldTemplate from './MultiSchemaFieldTemplate';
 
 export function generateTemplates<
   T = any,
@@ -35,6 +36,7 @@ export function generateTemplates<
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,
+    MultiSchemaFieldTemplate,
   };
 }
 

packages/mantine/src/widgets/DateTime/DateTimeInput.tsx

@@ -60,9 +60,17 @@ export default function DateTimeInput<
     [onChange, valueFormat],
   );
 
-  const handleBlur = () => onBlur && onBlur(id, value);
+  const handleBlur = useCallback(() => {
+    if (onBlur) {
+      onBlur(id, value);
+    }
+  }, [onBlur, id, value]);
 
-  const handleFocus = () => onFocus && onFocus(id, value);
+  const handleFocus = useCallback(() => {
+    if (onFocus) {
+      onFocus(id, value);
+    }
+  }, [onFocus, id, value]);
 
   return (
     <DateInput

packages/mantine/src/widgets/RangeWidget.tsx

@@ -50,9 +50,17 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
     [onChange, disabled, readonly],
   );
 
-  const handleBlur = () => onBlur && onBlur(id, value);
+  const handleBlur = useCallback(() => {
+    if (onBlur) {
+      onBlur(id, value);
+    }
+  }, [onBlur, id, value]);
 
-  const handleFocus = () => onFocus && onFocus(id, value);
+  const handleFocus = useCallback(() => {
+    if (onFocus) {
+      onFocus(id, value);
+    }
+  }, [onFocus, id, value]);
 
   return (
     <>