Merge pull request #6456 from marmelab/fix-selectinput-css-api-ts

Fix TS definition of SelectInput classes
marmelab · Jul 21, 2021 · a387f3a · a387f3a
2 parents 2ba78fc + c46bec6
commit a387f3a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 25 deletions.
diff --git a/packages/ra-ui-materialui/src/input/ResettableTextField.tsx b/packages/ra-ui-materialui/src/input/ResettableTextField.tsx
@@ -7,11 +7,13 @@ import {
     IconButton,
     TextField as MuiTextField,
     TextFieldProps,
+    Theme,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import ClearIcon from '@material-ui/icons/Clear';
 import { InputProps, useTranslate } from 'ra-core';
 import { ClassesOverride } from '../types';
+import { Styles } from '@material-ui/styles';
 
 /**
  * An override of the default Material-UI TextField which is resettable
@@ -170,30 +172,31 @@ function ResettableTextField(props: ResettableTextFieldProps) {
     );
 }
 
-const useStyles = makeStyles(
-    {
-        clearIcon: {
-            height: 16,
-            width: 0,
-        },
-        visibleClearIcon: {
-            width: 16,
-        },
-        clearButton: {
-            height: 24,
-            width: 24,
-            padding: 0,
-        },
-        selectAdornment: {
-            position: 'absolute',
-            right: 24,
-        },
-        inputAdornedEnd: {
-            paddingRight: 0,
-        },
+export const resettableStyles: Styles<Theme, ResettableTextFieldProps> = {
+    clearIcon: {
+        height: 16,
+        width: 0,
+    },
+    visibleClearIcon: {
+        width: 16,
     },
-    { name: 'RaResettableTextField' }
-);
+    clearButton: {
+        height: 24,
+        width: 24,
+        padding: 0,
+    },
+    selectAdornment: {
+        position: 'absolute',
+        right: 24,
+    },
+    inputAdornedEnd: {
+        paddingRight: 0,
+    },
+};
+
+const useStyles = makeStyles(resettableStyles, {
+    name: 'RaResettableTextField',
+});
 
 const handleMouseDownClearButton = event => {
     event.preventDefault();

diff --git a/packages/ra-ui-materialui/src/input/SelectInput.tsx b/packages/ra-ui-materialui/src/input/SelectInput.tsx
@@ -14,7 +14,7 @@ import {
     warning,
 } from 'ra-core';
 
-import ResettableTextField from './ResettableTextField';
+import ResettableTextField, { resettableStyles } from './ResettableTextField';
 import InputHelperText from './InputHelperText';
 import sanitizeInputRestProps from './sanitizeInputRestProps';
 import Labeled from './Labeled';
@@ -23,6 +23,7 @@ import {
     useSupportCreateSuggestion,
     SupportCreateSuggestionOptions,
 } from './useSupportCreateSuggestion';
+import { ClassesOverride } from '../types';
 
 /**
  * An Input component for a select box, using an array of objects for the options
@@ -350,6 +351,7 @@ const sanitizeRestProps = ({
 
 const useStyles = makeStyles(
     theme => ({
+        ...resettableStyles,
         input: {
             minWidth: theme.spacing(20),
         },
@@ -360,4 +362,6 @@ const useStyles = makeStyles(
 export interface SelectInputProps
     extends ChoicesInputProps<TextFieldProps>,
         Omit<SupportCreateSuggestionOptions, 'handleChange'>,
-        Omit<TextFieldProps, 'label' | 'helperText'> {}
+        Omit<TextFieldProps, 'label' | 'helperText' | 'classes'> {
+    classes?: ClassesOverride<typeof useStyles>;
+}