@rjsf/mui 6.2.4 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/mui",
-  "version": "6.2.4",
+  "version": "6.3.0",
   "main": "./dist/index.cjs",
   "module": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -69,15 +69,15 @@
     "react": ">=18"
   },
   "devDependencies": {
-    "@emotion/jest": "^11.13.0",
+    "@emotion/jest": "^11.14.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.4",
-    "@mui/material": "^7.3.4",
-    "@rjsf/core": "^6.2.0",
-    "@rjsf/snapshot-tests": "^6.2.0",
-    "@rjsf/utils": "^6.2.0",
-    "@rjsf/validator-ajv8": "^6.2.0",
+    "@mui/icons-material": "^7.3.7",
+    "@mui/material": "^7.3.7",
+    "@rjsf/core": "^6.2.5",
+    "@rjsf/snapshot-tests": "^6.2.5",
+    "@rjsf/utils": "^6.2.5",
+    "@rjsf/validator-ajv8": "^6.2.5",
     "eslint": "^8.57.1"
   },
   "publishConfig": {

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -12,6 +12,7 @@ import {
   RJSFSchema,
   StrictRJSFSchema,
 } from '@rjsf/utils';
+import { SchemaExamples } from '@rjsf/core';
 
 const TYPES_THAT_SHRINK_LABEL = ['date', 'datetime-local', 'file', 'time'];
 
@@ -51,23 +52,28 @@ export default function BaseInputTemplate<
     errorSchema,
     registry,
     InputLabelProps,
+    InputProps,
+    slotProps,
     ...textFieldProps
   } = props;
   const { ClearButton } = registry.templates.ButtonTemplates;
-  const inputProps = getInputProps<T, S, F>(schema, type, options);
   // Now we need to pull out the step, min, max into an inner `inputProps` for material-ui
-  const { step, min, max, accept, ...rest } = inputProps;
-  const htmlInputProps = { step, min, max, accept, ...(schema.examples ? { list: examplesId(id) } : undefined) };
+  const { step, min, max, accept, ...rest } = getInputProps<T, S, F>(schema, type, options);
+  const htmlInputProps = {
+    ...slotProps?.htmlInput,
+    step,
+    min,
+    max,
+    accept,
+    ...(schema.examples ? { list: examplesId(id) } : undefined),
+  };
   const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
     onChange(value === '' ? options.emptyValue : value);
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
   const DisplayInputLabelProps = TYPES_THAT_SHRINK_LABEL.includes(type)
-    ? {
-        ...InputLabelProps,
-        shrink: true,
-      }
-    : InputLabelProps;
+    ? { ...slotProps?.inputLabel, ...InputLabelProps, shrink: true }
+    : { ...slotProps?.inputLabel, ...InputLabelProps };
   const _onClear = useCallback(
     (e: MouseEvent) => {
       e.preventDefault();
@@ -76,6 +82,22 @@ export default function BaseInputTemplate<
     },
     [onChange, options.emptyValue],
   );
+  const inputProps = { ...InputProps, ...slotProps?.input };
+  if (options.allowClearTextInputs && value && !readonly && !disabled) {
+    const clearAdornment = (
+      <InputAdornment position='end'>
+        <ClearButton registry={registry} onClick={_onClear} />
+      </InputAdornment>
+    );
+    inputProps.endAdornment = !inputProps.endAdornment ? (
+      clearAdornment
+    ) : (
+      <>
+        {inputProps.endAdornment}
+        {clearAdornment}
+      </>
+    );
+  }
 
   return (
     <>
@@ -87,7 +109,12 @@ export default function BaseInputTemplate<
         autoFocus={autofocus}
         required={required}
         disabled={disabled || readonly}
-        slotProps={{ htmlInput: htmlInputProps, inputLabel: DisplayInputLabelProps }}
+        slotProps={{
+          ...slotProps,
+          input: inputProps,
+          htmlInput: htmlInputProps,
+          inputLabel: DisplayInputLabelProps,
+        }}
         {...rest}
         value={value || value === 0 ? value : ''}
         error={rawErrors.length > 0}
@@ -96,25 +123,8 @@ export default function BaseInputTemplate<
         onFocus={_onFocus}
         {...(textFieldProps as TextFieldProps)}
         aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
-        InputProps={{
-          ...textFieldProps.InputProps,
-          endAdornment:
-            options.allowClearTextInputs && value && !readonly && !disabled ? (
-              <InputAdornment position='end'>
-                <ClearButton registry={registry} onClick={_onClear} />
-              </InputAdornment>
-            ) : undefined,
-        }}
       />
-      {Array.isArray(schema.examples) && (
-        <datalist id={examplesId(id)}>
-          {(schema.examples as string[])
-            .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
-            .map((example: any) => {
-              return <option key={example} value={example} />;
-            })}
-        </datalist>
-      )}
+      <SchemaExamples id={id} schema={schema} />
     </>
   );
 }