",
- "styledComponent": false,
+ "styledComponent": true,
"cssComponent": false
}
diff --git a/docs/translations/api-docs/native-select/native-select.json b/docs/translations/api-docs/native-select/native-select.json
index b303222f1c7269..eb51c78befe586 100644
--- a/docs/translations/api-docs/native-select/native-select.json
+++ b/docs/translations/api-docs/native-select/native-select.json
@@ -7,6 +7,7 @@
"input": "An Input element; does not have to be a material-ui specific Input.",
"inputProps": "<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes">Attributes</a> applied to the select element.",
"onChange": "Callback fired when a menu item is selected.
Signature: function(event: object) => void event: The event source of the callback. You can pull out the new value by accessing event.target.value (string).",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"value": "The input value. The DOM API casts this to a string.",
"variant": "The variant to use."
},
diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.d.ts b/packages/material-ui/src/NativeSelect/NativeSelect.d.ts
index fc2102f5edaadc..cc4d959e3dde68 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelect.d.ts
+++ b/packages/material-ui/src/NativeSelect/NativeSelect.d.ts
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { InternalStandardProps as StandardProps } from '..';
+import { SxProps } from '@material-ui/system';
+import { InternalStandardProps as StandardProps, Theme } from '..';
import { InputProps } from '../Input';
import { NativeSelectInputProps } from './NativeSelectInput';
@@ -12,6 +13,7 @@ export interface NativeSelectProps
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
+ * @default {}
*/
classes?: {
/** Styles applied to the select component `root` class. */
@@ -58,6 +60,10 @@ export interface NativeSelectProps
* You can pull out the new value by accessing `event.target.value` (string).
*/
onChange?: NativeSelectInputProps['onChange'];
+ /**
+ * The system prop that allows defining system overrides as well as additional CSS styles.
+ */
+ sx?: SxProps;
/**
* The `input` value. The DOM API casts this to a string.
*/
diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js
index 6e62ec6eaa7fc9..695c152924fab6 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelect.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelect.js
@@ -1,12 +1,16 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import NativeSelectInput from './NativeSelectInput';
-import withStyles from '../styles/withStyles';
import formControlState from '../FormControl/formControlState';
import useFormControl from '../FormControl/useFormControl';
import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
import Input from '../Input';
+import useThemeProps from '../styles/useThemeProps';
+/*
+ TODO: v5 Remove styles function once Select component is migrated
+ to emotion
+*/
export const styles = (theme) => ({
/* Styles applied to the select component `root` class. */
root: {},
@@ -108,10 +112,11 @@ const defaultInput = ;
/**
* An alternative to `` with a much smaller bundle size footprint.
*/
-const NativeSelect = React.forwardRef(function NativeSelect(props, ref) {
+const NativeSelect = React.forwardRef(function NativeSelect(inProps, ref) {
+ const props = useThemeProps({ name: 'MuiNativeSelect', props: inProps });
const {
children,
- classes,
+ classes = {},
IconComponent = ArrowDropDownIcon,
input = defaultInput,
inputProps,
@@ -140,6 +145,7 @@ const NativeSelect = React.forwardRef(function NativeSelect(props, ref) {
...(input ? input.props.inputProps : {}),
},
ref,
+ classes,
...other,
});
});
@@ -156,6 +162,7 @@ NativeSelect.propTypes = {
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
+ * @default {}
*/
classes: PropTypes.object,
/**
@@ -179,6 +186,10 @@ NativeSelect.propTypes = {
* You can pull out the new value by accessing `event.target.value` (string).
*/
onChange: PropTypes.func,
+ /**
+ * The system prop that allows defining system overrides as well as additional CSS styles.
+ */
+ sx: PropTypes.object,
/**
* The `input` value. The DOM API casts this to a string.
*/
@@ -191,4 +202,4 @@ NativeSelect.propTypes = {
NativeSelect.muiName = 'Select';
-export default withStyles(styles, { name: 'MuiNativeSelect' })(NativeSelect);
+export default NativeSelect;
diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.test.js b/packages/material-ui/src/NativeSelect/NativeSelect.test.js
index a393af5c7744a5..0e79ded6d53128 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelect.test.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelect.test.js
@@ -1,12 +1,11 @@
import * as React from 'react';
import { expect } from 'chai';
-import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
+import { createMount, createClientRender, describeConformanceV5 } from 'test/utils';
import Input, { inputClasses } from '../Input';
import NativeSelect from './NativeSelect';
+import classes from './nativeSelectClasses';
describe('', () => {
- let classes;
-
const mount = createMount();
const render = createClientRender();
const defaultProps = {
@@ -21,16 +20,13 @@ describe('', () => {
],
};
- before(() => {
- classes = getClasses();
- });
-
- describeConformance(, () => ({
+ describeConformanceV5(, () => ({
classes,
inheritComponent: Input,
mount,
refInstanceof: window.HTMLDivElement,
- skip: ['componentProp', 'rootClass'],
+ muiName: 'MuiNativeSelect',
+ skip: ['componentProp', 'componentsProp', 'rootClass'],
}));
it('should render a native select', () => {
diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.d.ts b/packages/material-ui/src/NativeSelect/NativeSelectInput.d.ts
index a95956e04eb089..67b344b1a97dc0 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelectInput.d.ts
+++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.d.ts
@@ -1,10 +1,13 @@
import * as React from 'react';
+import { SxProps } from '@material-ui/system';
+import { Theme } from '..';
export interface NativeSelectInputProps extends React.SelectHTMLAttributes {
disabled?: boolean;
IconComponent?: React.ElementType;
inputRef?: React.Ref;
variant?: 'standard' | 'outlined' | 'filled';
+ sx?: SxProps;
}
declare const NativeSelectInput: React.ComponentType;
diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
index 2a359d93faf2b6..c8ffd2a16ac27b 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
@@ -1,45 +1,132 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
-import { refType } from '@material-ui/utils';
+import { refType, deepmerge } from '@material-ui/utils';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
import capitalize from '../utils/capitalize';
+import { getNativeSelectUtilitiyClasses } from './nativeSelectClasses';
+import experimentalStyled from '../styles/experimentalStyled';
+
+const overridesResolver = (props, styles) => {
+ const { styleProps } = props;
+ return deepmerge(styles.root, {
+ ...(!styleProps.disableUnderline && styles.underline),
+ });
+};
+
+const iconOverridesResolver = (props, styles) => {
+ const { styleProps } = props;
+ return deepmerge(styles.icon, {
+ ...(!styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]),
+ });
+};
+
+const useUtilityClasses = (styleProps) => {
+ const { classes, variant, disabled } = styleProps;
+
+ const slots = {
+ root: ['root', 'select', variant, disabled && disabled],
+ icon: ['icon', `icon${capitalize(variant)}`, disabled && disabled],
+ };
+
+ return composeClasses(slots, getNativeSelectUtilitiyClasses, classes);
+};
+
+const SelectRoot = experimentalStyled(
+ 'select',
+ {},
+ { name: 'MuiNativeSelect', slot: 'Root', overridesResolver },
+)(({ styleProps, theme }) => ({
+ MozAppearance: 'none', // Reset
+ WebkitAppearance: 'none', // Reset
+ // When interacting quickly, the text can end up selected.
+ // Native select can't be selected either.
+ userSelect: 'none',
+ borderRadius: 0, // Reset
+ minWidth: 16, // So it doesn't collapse.
+ cursor: 'pointer',
+ '&:focus': {
+ // Show that it's not an text input
+ backgroundColor:
+ theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)',
+ borderRadius: 0, // Reset Chrome style
+ },
+ // Remove IE11 arrow
+ '&::-ms-expand': {
+ display: 'none',
+ },
+ '&.Mui-disabled': {
+ cursor: 'default',
+ },
+ '&[multiple]': {
+ height: 'auto',
+ },
+ '&:not([multiple]) option, &:not([multiple]) optgroup': {
+ backgroundColor: theme.palette.background.paper,
+ },
+ // Bump specificity to allow extending custom inputs
+ '&&': {
+ paddingRight: 24,
+ },
+ ...(styleProps.variant === 'filled' && {
+ '&&': {
+ paddingRight: 32,
+ },
+ }),
+ ...(styleProps.variant === 'outlined' && {
+ borderRadius: theme.shape.borderRadius,
+ '&&': {
+ paddingRight: 32,
+ },
+ }),
+}));
+
+const IconRoot = experimentalStyled(
+ 'svg',
+ {},
+ { name: 'MuiNativeSelect', slot: 'Icon', overridesResolver: iconOverridesResolver },
+)(({ styleProps, theme }) => ({
+ // We use a position absolute over a flexbox in order to forward the pointer events
+ // to the input and to support wrapping tags..
+ position: 'absolute',
+ right: 0,
+ top: 'calc(50% - 12px)', // Center vertically
+ pointerEvents: 'none', // Don't block pointer events on the select under the icon.
+ color: theme.palette.action.active,
+ '&.Mui-disabled': {
+ color: theme.palette.action.disabled,
+ },
+ ...(styleProps.variant === 'filled' && {
+ right: 7,
+ }),
+ ...(styleProps.variant === 'outlined' && {
+ right: 7,
+ }),
+}));
/**
* @ignore - internal component.
*/
const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref) {
- const {
- classes,
- className,
- disabled,
- IconComponent,
- inputRef,
- variant = 'standard',
- ...other
- } = props;
+ const { className, disabled, IconComponent, inputRef, variant = 'standard', ...other } = props;
+
+ const styleProps = {
+ ...props,
+ variant,
+ };
+ const classes = useUtilityClasses(styleProps);
return (
-
{props.multiple ? null : (
-
+
)}
);
diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.test.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.test.js
index 4d2044aa7e5249..563a5ce7f9e105 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelectInput.test.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.test.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import { createMount, describeConformance, createClientRender } from 'test/utils';
+import { createMount, describeConformanceV5, createClientRender } from 'test/utils';
import NativeSelectInput from './NativeSelectInput';
describe('', () => {
@@ -25,10 +25,11 @@ describe('', () => {
],
};
- describeConformance( {}} />, () => ({
+ describeConformanceV5( {}} />, () => ({
mount,
only: ['refForwarding'],
refInstanceof: window.HTMLSelectElement,
+ muiName: 'MuiNativeSelectInput',
}));
it('should render a native select', () => {
diff --git a/packages/material-ui/src/NativeSelect/index.d.ts b/packages/material-ui/src/NativeSelect/index.d.ts
index b98e687a6d6fa1..026e02bdf5c8a9 100644
--- a/packages/material-ui/src/NativeSelect/index.d.ts
+++ b/packages/material-ui/src/NativeSelect/index.d.ts
@@ -1,2 +1,4 @@
export { default } from './NativeSelect';
export * from './NativeSelect';
+export { default as nativeSelectClasses } from './nativeSelectClasses';
+export * from './nativeSelectClasses';
diff --git a/packages/material-ui/src/NativeSelect/index.js b/packages/material-ui/src/NativeSelect/index.js
index e2f92130f3481e..1377cb53267a13 100644
--- a/packages/material-ui/src/NativeSelect/index.js
+++ b/packages/material-ui/src/NativeSelect/index.js
@@ -1 +1,3 @@
export { default } from './NativeSelect';
+export { default as nativeSelectClasses } from './nativeSelectClasses';
+export * from './nativeSelectClasses';
diff --git a/packages/material-ui/src/NativeSelect/nativeSelectClasses.d.ts b/packages/material-ui/src/NativeSelect/nativeSelectClasses.d.ts
new file mode 100644
index 00000000000000..8f484a275c2fd0
--- /dev/null
+++ b/packages/material-ui/src/NativeSelect/nativeSelectClasses.d.ts
@@ -0,0 +1,7 @@
+import { NativeSelectClassKey } from './NativeSelect';
+
+declare const nativeSelectClasses: Record;
+
+export function getNativeSelectUtilityClasses(slot: string): string;
+
+export default nativeSelectClasses;
diff --git a/packages/material-ui/src/NativeSelect/nativeSelectClasses.js b/packages/material-ui/src/NativeSelect/nativeSelectClasses.js
new file mode 100644
index 00000000000000..f11810e5537c91
--- /dev/null
+++ b/packages/material-ui/src/NativeSelect/nativeSelectClasses.js
@@ -0,0 +1,21 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getNativeSelectUtilitiyClasses(slot) {
+ return generateUtilityClass('MuiSelect', slot);
+}
+
+const nativeSelectClasses = generateUtilityClasses('MuiSelect', [
+ 'root',
+ 'select',
+ 'filled',
+ 'outlined',
+ 'selectMenu',
+ 'disabled',
+ 'icon',
+ 'iconOpen',
+ 'iconFilled',
+ 'iconOutlined',
+ 'nativeInput',
+]);
+
+export default nativeSelectClasses;
From a0bd515789034663b18d6150675d64d46bd7177a Mon Sep 17 00:00:00 2001
From: duganbrett <44508924+duganbrett@users.noreply.github.com>
Date: Sat, 30 Jan 2021 09:10:20 -0700
Subject: [PATCH 02/13] Fixed overrides and ignore tests.
---
packages/material-ui/src/NativeSelect/NativeSelect.test.js | 2 +-
packages/material-ui/src/NativeSelect/NativeSelectInput.js | 5 +++--
2 files changed, 4 insertions(+), 3 deletions(-)
diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.test.js b/packages/material-ui/src/NativeSelect/NativeSelect.test.js
index 0e79ded6d53128..51365ab737014d 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelect.test.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelect.test.js
@@ -26,7 +26,7 @@ describe('', () => {
mount,
refInstanceof: window.HTMLDivElement,
muiName: 'MuiNativeSelect',
- skip: ['componentProp', 'componentsProp', 'rootClass'],
+ skip: ['componentProp', 'componentsProp', 'rootClass', 'themeVariants', 'themeStyleOverrides'],
}));
it('should render a native select', () => {
diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
index c8ffd2a16ac27b..9f8542b310d941 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
@@ -10,14 +10,15 @@ import experimentalStyled from '../styles/experimentalStyled';
const overridesResolver = (props, styles) => {
const { styleProps } = props;
return deepmerge(styles.root, {
- ...(!styleProps.disableUnderline && styles.underline),
+ ...styles.select,
+ ...styles[styleProps.variant]
});
};
const iconOverridesResolver = (props, styles) => {
const { styleProps } = props;
return deepmerge(styles.icon, {
- ...(!styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]),
+ ...(styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]),
});
};
From 32991236a5ca12d5b9a00f664215743c35fdd277 Mon Sep 17 00:00:00 2001
From: duganbrett <44508924+duganbrett@users.noreply.github.com>
Date: Sat, 30 Jan 2021 10:02:13 -0700
Subject: [PATCH 03/13] Fixed formatting
---
packages/material-ui/src/NativeSelect/NativeSelectInput.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
index 9f8542b310d941..fa5779e86058fa 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
@@ -11,7 +11,7 @@ const overridesResolver = (props, styles) => {
const { styleProps } = props;
return deepmerge(styles.root, {
...styles.select,
- ...styles[styleProps.variant]
+ ...styles[styleProps.variant],
});
};
From 871870ed24fceaf43e96082bd2f0e574847a69d6 Mon Sep 17 00:00:00 2001
From: duganbrett <44508924+duganbrett@users.noreply.github.com>
Date: Sat, 30 Jan 2021 10:14:28 -0700
Subject: [PATCH 04/13] Fix component name
---
packages/material-ui/src/NativeSelect/nativeSelectClasses.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/material-ui/src/NativeSelect/nativeSelectClasses.js b/packages/material-ui/src/NativeSelect/nativeSelectClasses.js
index f11810e5537c91..70cfb0a4434ee9 100644
--- a/packages/material-ui/src/NativeSelect/nativeSelectClasses.js
+++ b/packages/material-ui/src/NativeSelect/nativeSelectClasses.js
@@ -1,10 +1,10 @@
import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
export function getNativeSelectUtilitiyClasses(slot) {
- return generateUtilityClass('MuiSelect', slot);
+ return generateUtilityClass('MuiNativeSelect', slot);
}
-const nativeSelectClasses = generateUtilityClasses('MuiSelect', [
+const nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', [
'root',
'select',
'filled',
From 12d3570d22429c899ffbecf2fd403ae7112f9b5f Mon Sep 17 00:00:00 2001
From: duganbrett <44508924+duganbrett@users.noreply.github.com>
Date: Sat, 30 Jan 2021 10:53:36 -0700
Subject: [PATCH 05/13] Fix overrideResolvers and prepare for compatibility
with Select
---
.../src/NativeSelect/NativeSelectInput.js | 46 +++++++++++++------
1 file changed, 32 insertions(+), 14 deletions(-)
diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
index fa5779e86058fa..ad5b50300ff6e7 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
@@ -7,7 +7,7 @@ import capitalize from '../utils/capitalize';
import { getNativeSelectUtilitiyClasses } from './nativeSelectClasses';
import experimentalStyled from '../styles/experimentalStyled';
-const overridesResolver = (props, styles) => {
+export const overridesResolver = (props, styles) => {
const { styleProps } = props;
return deepmerge(styles.root, {
...styles.select,
@@ -15,10 +15,11 @@ const overridesResolver = (props, styles) => {
});
};
-const iconOverridesResolver = (props, styles) => {
+export const iconOverridesResolver = (props, styles) => {
const { styleProps } = props;
return deepmerge(styles.icon, {
...(styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]),
+ ...(styleProps.open && styles.iconOpen)
});
};
@@ -33,11 +34,8 @@ const useUtilityClasses = (styleProps) => {
return composeClasses(slots, getNativeSelectUtilitiyClasses, classes);
};
-const SelectRoot = experimentalStyled(
- 'select',
- {},
- { name: 'MuiNativeSelect', slot: 'Root', overridesResolver },
-)(({ styleProps, theme }) => ({
+
+export const rootStyles = ({ styleProps, theme }) => ({
MozAppearance: 'none', // Reset
WebkitAppearance: 'none', // Reset
// When interacting quickly, the text can end up selected.
@@ -80,13 +78,16 @@ const SelectRoot = experimentalStyled(
paddingRight: 32,
},
}),
-}));
+ ...(styleProps.selectMenu && {
+ height: 'auto', // Resets for multpile select with chips
+ minHeight: '1.4375em', // Required for select\text-field height consistency
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ }),
+})
-const IconRoot = experimentalStyled(
- 'svg',
- {},
- { name: 'MuiNativeSelect', slot: 'Icon', overridesResolver: iconOverridesResolver },
-)(({ styleProps, theme }) => ({
+export const iconStyles = ({ styleProps, theme }) => ({
// We use a position absolute over a flexbox in order to forward the pointer events
// to the input and to support wrapping tags..
position: 'absolute',
@@ -97,13 +98,29 @@ const IconRoot = experimentalStyled(
'&.Mui-disabled': {
color: theme.palette.action.disabled,
},
+ ...(styleProps.open && {
+ right: 7,
+ }),
...(styleProps.variant === 'filled' && {
right: 7,
}),
...(styleProps.variant === 'outlined' && {
right: 7,
}),
-}));
+
+});
+
+const SelectRoot = experimentalStyled(
+ 'select',
+ {},
+ { name: 'MuiNativeSelect', slot: 'Root', overridesResolver },
+)(rootStyles);
+
+const IconRoot = experimentalStyled(
+ 'svg',
+ {},
+ { name: 'MuiNativeSelect', slot: 'Icon', overridesResolver: iconOverridesResolver },
+)(iconStyles);
/**
* @ignore - internal component.
@@ -113,6 +130,7 @@ const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref
const styleProps = {
...props,
+ disabled,
variant,
};
From 54eb6e3d133a24bab044a3b47ea1a142d0975880 Mon Sep 17 00:00:00 2001
From: duganbrett <44508924+duganbrett@users.noreply.github.com>
Date: Sat, 30 Jan 2021 11:24:56 -0700
Subject: [PATCH 06/13] Formattins fix
---
.../material-ui/src/NativeSelect/NativeSelectInput.js | 8 +++-----
1 file changed, 3 insertions(+), 5 deletions(-)
diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
index ad5b50300ff6e7..db81dcf09e4a07 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
@@ -19,7 +19,7 @@ export const iconOverridesResolver = (props, styles) => {
const { styleProps } = props;
return deepmerge(styles.icon, {
...(styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]),
- ...(styleProps.open && styles.iconOpen)
+ ...(styleProps.open && styles.iconOpen),
});
};
@@ -34,7 +34,6 @@ const useUtilityClasses = (styleProps) => {
return composeClasses(slots, getNativeSelectUtilitiyClasses, classes);
};
-
export const rootStyles = ({ styleProps, theme }) => ({
MozAppearance: 'none', // Reset
WebkitAppearance: 'none', // Reset
@@ -78,14 +77,14 @@ export const rootStyles = ({ styleProps, theme }) => ({
paddingRight: 32,
},
}),
- ...(styleProps.selectMenu && {
+ ...(styleProps.selectMenu && {
height: 'auto', // Resets for multpile select with chips
minHeight: '1.4375em', // Required for select\text-field height consistency
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
}),
-})
+});
export const iconStyles = ({ styleProps, theme }) => ({
// We use a position absolute over a flexbox in order to forward the pointer events
@@ -107,7 +106,6 @@ export const iconStyles = ({ styleProps, theme }) => ({
...(styleProps.variant === 'outlined' && {
right: 7,
}),
-
});
const SelectRoot = experimentalStyled(
From f3a296623165d8913f5ec52519fbb6ea00ce9527 Mon Sep 17 00:00:00 2001
From: duganbrett <44508924+duganbrett@users.noreply.github.com>
Date: Sat, 30 Jan 2021 13:22:22 -0700
Subject: [PATCH 07/13] rerun ci
From ab9ffd5df31c6fd9ef0786955926cd77e4502341 Mon Sep 17 00:00:00 2001
From: duganbrett <44508924+duganbrett@users.noreply.github.com>
Date: Sat, 30 Jan 2021 13:37:32 -0700
Subject: [PATCH 08/13] rerun ci
From e09f6419437920880211c07729e75a78bf3929ee Mon Sep 17 00:00:00 2001
From: Marija Najdova
Date: Wed, 7 Apr 2021 13:18:48 +0200
Subject: [PATCH 09/13] misc fixes
---
docs/pages/api-docs/native-select.json | 2 +-
.../src/NativeSelect/NativeSelect.d.ts | 1 -
.../src/NativeSelect/NativeSelect.js | 4 +-
.../src/NativeSelect/NativeSelectInput.js | 49 ++++++++-----------
4 files changed, 23 insertions(+), 33 deletions(-)
diff --git a/docs/pages/api-docs/native-select.json b/docs/pages/api-docs/native-select.json
index 244365ede022ba..328c6493e2cda1 100644
--- a/docs/pages/api-docs/native-select.json
+++ b/docs/pages/api-docs/native-select.json
@@ -1,7 +1,7 @@
{
"props": {
"children": { "type": { "name": "node" } },
- "classes": { "type": { "name": "object" }, "default": "{}" },
+ "classes": { "type": { "name": "object" } },
"IconComponent": { "type": { "name": "elementType" }, "default": "ArrowDropDownIcon" },
"input": { "type": { "name": "element" }, "default": "" },
"inputProps": { "type": { "name": "object" } },
diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.d.ts b/packages/material-ui/src/NativeSelect/NativeSelect.d.ts
index cc4d959e3dde68..494b7132d4527e 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelect.d.ts
+++ b/packages/material-ui/src/NativeSelect/NativeSelect.d.ts
@@ -13,7 +13,6 @@ export interface NativeSelectProps
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
- * @default {}
*/
classes?: {
/** Styles applied to the select component `root` class. */
diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js
index 695c152924fab6..450a24ddde6f2a 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelect.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelect.js
@@ -116,7 +116,7 @@ const NativeSelect = React.forwardRef(function NativeSelect(inProps, ref) {
const props = useThemeProps({ name: 'MuiNativeSelect', props: inProps });
const {
children,
- classes = {},
+ classes,
IconComponent = ArrowDropDownIcon,
input = defaultInput,
inputProps,
@@ -145,7 +145,6 @@ const NativeSelect = React.forwardRef(function NativeSelect(inProps, ref) {
...(input ? input.props.inputProps : {}),
},
ref,
- classes,
...other,
});
});
@@ -162,7 +161,6 @@ NativeSelect.propTypes = {
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
- * @default {}
*/
classes: PropTypes.object,
/**
diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
index db81dcf09e4a07..88b5b64eeb03a2 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
@@ -4,7 +4,7 @@ import clsx from 'clsx';
import { refType, deepmerge } from '@material-ui/utils';
import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
import capitalize from '../utils/capitalize';
-import { getNativeSelectUtilitiyClasses } from './nativeSelectClasses';
+import nativeSelectClasses, { getNativeSelectUtilitiyClasses } from './nativeSelectClasses';
import experimentalStyled from '../styles/experimentalStyled';
export const overridesResolver = (props, styles) => {
@@ -12,29 +12,30 @@ export const overridesResolver = (props, styles) => {
return deepmerge(styles.root, {
...styles.select,
...styles[styleProps.variant],
- });
-};
-
-export const iconOverridesResolver = (props, styles) => {
- const { styleProps } = props;
- return deepmerge(styles.icon, {
- ...(styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]),
- ...(styleProps.open && styles.iconOpen),
+ [`& .${nativeSelectClasses.icon}`]: {
+ ...styles.icon,
+ ...(styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]),
+ ...(styleProps.open && styles.iconOpen),
+ }
});
};
const useUtilityClasses = (styleProps) => {
- const { classes, variant, disabled } = styleProps;
+ const { classes, variant, disabled, open } = styleProps;
const slots = {
root: ['root', 'select', variant, disabled && disabled],
- icon: ['icon', `icon${capitalize(variant)}`, disabled && disabled],
+ icon: ['icon', `icon${capitalize(variant)}`, open && 'iconOpen', disabled && disabled],
};
return composeClasses(slots, getNativeSelectUtilitiyClasses, classes);
};
-export const rootStyles = ({ styleProps, theme }) => ({
+const SelectRoot = experimentalStyled(
+ 'select',
+ {},
+ { name: 'MuiNativeSelect', slot: 'Root', overridesResolver },
+)(({ styleProps, theme }) => ({
MozAppearance: 'none', // Reset
WebkitAppearance: 'none', // Reset
// When interacting quickly, the text can end up selected.
@@ -84,9 +85,13 @@ export const rootStyles = ({ styleProps, theme }) => ({
whiteSpace: 'nowrap',
overflow: 'hidden',
}),
-});
+}));
-export const iconStyles = ({ styleProps, theme }) => ({
+const IconRoot = experimentalStyled(
+ 'svg',
+ {},
+ { name: 'MuiNativeSelect', slot: 'Icon' },
+)(({ styleProps, theme }) => ({
// We use a position absolute over a flexbox in order to forward the pointer events
// to the input and to support wrapping tags..
position: 'absolute',
@@ -106,19 +111,7 @@ export const iconStyles = ({ styleProps, theme }) => ({
...(styleProps.variant === 'outlined' && {
right: 7,
}),
-});
-
-const SelectRoot = experimentalStyled(
- 'select',
- {},
- { name: 'MuiNativeSelect', slot: 'Root', overridesResolver },
-)(rootStyles);
-
-const IconRoot = experimentalStyled(
- 'svg',
- {},
- { name: 'MuiNativeSelect', slot: 'Icon', overridesResolver: iconOverridesResolver },
-)(iconStyles);
+}));
/**
* @ignore - internal component.
@@ -159,7 +152,7 @@ NativeSelectInput.propTypes = {
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
- classes: PropTypes.object.isRequired,
+ classes: PropTypes.object,
/**
* The CSS class name of the select element.
*/
From e80316cf2dc03a8144d7900afb9745396e2baca7 Mon Sep 17 00:00:00 2001
From: Marija Najdova
Date: Wed, 7 Apr 2021 13:37:17 +0200
Subject: [PATCH 10/13] move styles to Select
---
.../src/NativeSelect/NativeSelect.js | 101 ------------------
.../src/NativeSelect/NativeSelectInput.js | 2 +-
packages/material-ui/src/Select/Select.js | 98 ++++++++++++++++-
3 files changed, 97 insertions(+), 104 deletions(-)
diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js
index 450a24ddde6f2a..518bdc42b82c85 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelect.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelect.js
@@ -7,107 +7,6 @@ import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
import Input from '../Input';
import useThemeProps from '../styles/useThemeProps';
-/*
- TODO: v5 Remove styles function once Select component is migrated
- to emotion
-*/
-export const styles = (theme) => ({
- /* Styles applied to the select component `root` class. */
- root: {},
- /* Styles applied to the select component `select` class. */
- select: {
- '-moz-appearance': 'none', // Reset
- '-webkit-appearance': 'none', // Reset
- // When interacting quickly, the text can end up selected.
- // Native select can't be selected either.
- userSelect: 'none',
- borderRadius: 0, // Reset
- minWidth: 16, // So it doesn't collapse.
- cursor: 'pointer',
- '&:focus': {
- // Show that it's not an text input
- backgroundColor:
- theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)',
- borderRadius: 0, // Reset Chrome style
- },
- // Remove IE11 arrow
- '&::-ms-expand': {
- display: 'none',
- },
- '&$disabled': {
- cursor: 'default',
- },
- '&[multiple]': {
- height: 'auto',
- },
- '&:not([multiple]) option, &:not([multiple]) optgroup': {
- backgroundColor: theme.palette.background.paper,
- },
- // Bump specificity to allow extending custom inputs
- '&&': {
- paddingRight: 24,
- },
- },
- /* Styles applied to the select component if `variant="filled"`. */
- filled: {
- '&&': {
- paddingRight: 32,
- },
- },
- /* Styles applied to the select component if `variant="outlined"`. */
- outlined: {
- borderRadius: theme.shape.borderRadius,
- '&&': {
- paddingRight: 32,
- },
- },
- /* Styles applied to the select component `selectMenu` class. */
- selectMenu: {
- height: 'auto', // Resets for multpile select with chips
- minHeight: '1.4375em', // Required for select\text-field height consistency
- textOverflow: 'ellipsis',
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- },
- /* Pseudo-class applied to the select component `disabled` class. */
- disabled: {},
- /* Styles applied to the icon component. */
- icon: {
- // We use a position absolute over a flexbox in order to forward the pointer events
- // to the input and to support wrapping tags..
- position: 'absolute',
- right: 0,
- top: 'calc(50% - 12px)', // Center vertically
- pointerEvents: 'none', // Don't block pointer events on the select under the icon.
- color: theme.palette.action.active,
- '&$disabled': {
- color: theme.palette.action.disabled,
- },
- },
- /* Styles applied to the icon component if the popup is open. */
- iconOpen: {
- transform: 'rotate(180deg)',
- },
- /* Styles applied to the icon component if `variant="filled"`. */
- iconFilled: {
- right: 7,
- },
- /* Styles applied to the icon component if `variant="outlined"`. */
- iconOutlined: {
- right: 7,
- },
- /* Styles applied to the underlying native input component. */
- nativeInput: {
- bottom: 0,
- left: 0,
- position: 'absolute',
- opacity: 0,
- pointerEvents: 'none',
- width: '100%',
- boxSizing: 'border-box',
- },
-});
-
const defaultInput = ;
/**
* An alternative to `` with a much smaller bundle size footprint.
diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
index 88b5b64eeb03a2..0d7e4b83dc696c 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
@@ -16,7 +16,7 @@ export const overridesResolver = (props, styles) => {
...styles.icon,
...(styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]),
...(styleProps.open && styles.iconOpen),
- }
+ },
});
};
diff --git a/packages/material-ui/src/Select/Select.js b/packages/material-ui/src/Select/Select.js
index 1511df8e8755ed..c0d262dac58c7b 100644
--- a/packages/material-ui/src/Select/Select.js
+++ b/packages/material-ui/src/Select/Select.js
@@ -7,12 +7,106 @@ import useFormControl from '../FormControl/useFormControl';
import withStyles from '../styles/withStyles';
import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
import Input from '../Input';
-import { styles as nativeSelectStyles } from '../NativeSelect/NativeSelect';
import NativeSelectInput from '../NativeSelect/NativeSelectInput';
import FilledInput from '../FilledInput';
import OutlinedInput from '../OutlinedInput';
-export const styles = nativeSelectStyles;
+export const styles = (theme) => ({
+ /* Styles applied to the select component `root` class. */
+ root: {},
+ /* Styles applied to the select component `select` class. */
+ select: {
+ '-moz-appearance': 'none', // Reset
+ '-webkit-appearance': 'none', // Reset
+ // When interacting quickly, the text can end up selected.
+ // Native select can't be selected either.
+ userSelect: 'none',
+ borderRadius: 0, // Reset
+ minWidth: 16, // So it doesn't collapse.
+ cursor: 'pointer',
+ '&:focus': {
+ // Show that it's not an text input
+ backgroundColor:
+ theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)',
+ borderRadius: 0, // Reset Chrome style
+ },
+ // Remove IE11 arrow
+ '&::-ms-expand': {
+ display: 'none',
+ },
+ '&$disabled': {
+ cursor: 'default',
+ },
+ '&[multiple]': {
+ height: 'auto',
+ },
+ '&:not([multiple]) option, &:not([multiple]) optgroup': {
+ backgroundColor: theme.palette.background.paper,
+ },
+ // Bump specificity to allow extending custom inputs
+ '&&': {
+ paddingRight: 24,
+ },
+ },
+ /* Styles applied to the select component if `variant="filled"`. */
+ filled: {
+ '&&': {
+ paddingRight: 32,
+ },
+ },
+ /* Styles applied to the select component if `variant="outlined"`. */
+ outlined: {
+ borderRadius: theme.shape.borderRadius,
+ '&&': {
+ paddingRight: 32,
+ },
+ },
+ /* Styles applied to the select component `selectMenu` class. */
+ selectMenu: {
+ height: 'auto', // Resets for multpile select with chips
+ minHeight: '1.4375em', // Required for select\text-field height consistency
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ },
+ /* Pseudo-class applied to the select component `disabled` class. */
+ disabled: {},
+ /* Styles applied to the icon component. */
+ icon: {
+ // We use a position absolute over a flexbox in order to forward the pointer events
+ // to the input and to support wrapping tags..
+ position: 'absolute',
+ right: 0,
+ top: 'calc(50% - 12px)', // Center vertically
+ pointerEvents: 'none', // Don't block pointer events on the select under the icon.
+ color: theme.palette.action.active,
+ '&$disabled': {
+ color: theme.palette.action.disabled,
+ },
+ },
+ /* Styles applied to the icon component if the popup is open. */
+ iconOpen: {
+ transform: 'rotate(180deg)',
+ },
+ /* Styles applied to the icon component if `variant="filled"`. */
+ iconFilled: {
+ right: 7,
+ },
+ /* Styles applied to the icon component if `variant="outlined"`. */
+ iconOutlined: {
+ right: 7,
+ },
+ /* Styles applied to the underlying native input component. */
+ nativeInput: {
+ bottom: 0,
+ left: 0,
+ position: 'absolute',
+ opacity: 0,
+ pointerEvents: 'none',
+ width: '100%',
+ boxSizing: 'border-box',
+ },
+});
const Select = React.forwardRef(function Select(props, ref) {
const {
From f21473ecc7098b92765d9f3b4192ccba8aa06c5c Mon Sep 17 00:00:00 2001
From: Marija Najdova
Date: Wed, 7 Apr 2021 13:43:32 +0200
Subject: [PATCH 11/13] merge conflicts
---
packages/material-ui/src/NativeSelect/NativeSelectInput.js | 3 +++
packages/material-ui/src/Select/Select.js | 5 ++++-
2 files changed, 7 insertions(+), 1 deletion(-)
diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
index 0d7e4b83dc696c..04790c8d90ee57 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
@@ -74,6 +74,9 @@ const SelectRoot = experimentalStyled(
}),
...(styleProps.variant === 'outlined' && {
borderRadius: theme.shape.borderRadius,
+ '&:focus': {
+ borderRadius: theme.shape.borderRadius, // Reset the reset for Chrome style
+ },
'&&': {
paddingRight: 32,
},
diff --git a/packages/material-ui/src/Select/Select.js b/packages/material-ui/src/Select/Select.js
index c0d262dac58c7b..30d592a369d599 100644
--- a/packages/material-ui/src/Select/Select.js
+++ b/packages/material-ui/src/Select/Select.js
@@ -57,13 +57,16 @@ export const styles = (theme) => ({
/* Styles applied to the select component if `variant="outlined"`. */
outlined: {
borderRadius: theme.shape.borderRadius,
+ '&:focus': {
+ borderRadius: theme.shape.borderRadius, // Reset the reset for Chrome style
+ },
'&&': {
paddingRight: 32,
},
},
/* Styles applied to the select component `selectMenu` class. */
selectMenu: {
- height: 'auto', // Resets for multpile select with chips
+ height: 'auto', // Resets for multipile select with chips
minHeight: '1.4375em', // Required for select\text-field height consistency
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
From 0808efbe17ac57f8d825a1ee80cbabc2bd587d02 Mon Sep 17 00:00:00 2001
From: Marija Najdova
Date: Wed, 7 Apr 2021 15:06:25 +0200
Subject: [PATCH 12/13] fixes
---
packages/material-ui/src/NativeSelect/NativeSelect.test.js | 1 +
packages/material-ui/src/NativeSelect/NativeSelectInput.js | 4 ++--
2 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.test.js b/packages/material-ui/src/NativeSelect/NativeSelect.test.js
index 51365ab737014d..7a62ebfcbbdb96 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelect.test.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelect.test.js
@@ -24,6 +24,7 @@ describe('', () => {
classes,
inheritComponent: Input,
mount,
+ render,
refInstanceof: window.HTMLDivElement,
muiName: 'MuiNativeSelect',
skip: ['componentProp', 'componentsProp', 'rootClass', 'themeVariants', 'themeStyleOverrides'],
diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
index 04790c8d90ee57..5cf8af18bc9977 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
@@ -24,8 +24,8 @@ const useUtilityClasses = (styleProps) => {
const { classes, variant, disabled, open } = styleProps;
const slots = {
- root: ['root', 'select', variant, disabled && disabled],
- icon: ['icon', `icon${capitalize(variant)}`, open && 'iconOpen', disabled && disabled],
+ root: ['root', 'select', variant, disabled && 'disabled'],
+ icon: ['icon', `icon${capitalize(variant)}`, open && 'iconOpen', disabled && 'disabled'],
};
return composeClasses(slots, getNativeSelectUtilitiyClasses, classes);
From 5b4a4fe4197a1096ab2f231420659d1300adba21 Mon Sep 17 00:00:00 2001
From: Marija Najdova
Date: Wed, 7 Apr 2021 15:25:34 +0200
Subject: [PATCH 13/13] reverted select changes
---
.../src/NativeSelect/NativeSelect.js | 100 +++++++++++++++++
packages/material-ui/src/Select/Select.js | 101 +-----------------
2 files changed, 102 insertions(+), 99 deletions(-)
diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js
index fbfa85dd6c838d..3e234c3a363954 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelect.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelect.js
@@ -7,6 +7,106 @@ import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
import Input from '../Input';
import useThemeProps from '../styles/useThemeProps';
+export const styles = (theme) => ({
+ /* Styles applied to the select component `root` class. */
+ root: {},
+ /* Styles applied to the select component `select` class. */
+ select: {
+ '-moz-appearance': 'none', // Reset
+ '-webkit-appearance': 'none', // Reset
+ // When interacting quickly, the text can end up selected.
+ // Native select can't be selected either.
+ userSelect: 'none',
+ borderRadius: 0, // Reset
+ minWidth: 16, // So it doesn't collapse.
+ cursor: 'pointer',
+ '&:focus': {
+ // Show that it's not an text input
+ backgroundColor:
+ theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)',
+ borderRadius: 0, // Reset Chrome style
+ },
+ // Remove IE11 arrow
+ '&::-ms-expand': {
+ display: 'none',
+ },
+ '&$disabled': {
+ cursor: 'default',
+ },
+ '&[multiple]': {
+ height: 'auto',
+ },
+ '&:not([multiple]) option, &:not([multiple]) optgroup': {
+ backgroundColor: theme.palette.background.paper,
+ },
+ // Bump specificity to allow extending custom inputs
+ '&&': {
+ paddingRight: 24,
+ },
+ },
+ /* Styles applied to the select component if `variant="filled"`. */
+ filled: {
+ '&&': {
+ paddingRight: 32,
+ },
+ },
+ /* Styles applied to the select component if `variant="outlined"`. */
+ outlined: {
+ borderRadius: theme.shape.borderRadius,
+ '&:focus': {
+ borderRadius: theme.shape.borderRadius, // Reset the reset for Chrome style
+ },
+ '&&': {
+ paddingRight: 32,
+ },
+ },
+ /* Styles applied to the select component `selectMenu` class. */
+ selectMenu: {
+ height: 'auto', // Resets for multipile select with chips
+ minHeight: '1.4375em', // Required for select\text-field height consistency
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ },
+ /* Pseudo-class applied to the select component `disabled` class. */
+ disabled: {},
+ /* Styles applied to the icon component. */
+ icon: {
+ // We use a position absolute over a flexbox in order to forward the pointer events
+ // to the input and to support wrapping tags..
+ position: 'absolute',
+ right: 0,
+ top: 'calc(50% - 12px)', // Center vertically
+ pointerEvents: 'none', // Don't block pointer events on the select under the icon.
+ color: theme.palette.action.active,
+ '&$disabled': {
+ color: theme.palette.action.disabled,
+ },
+ },
+ /* Styles applied to the icon component if the popup is open. */
+ iconOpen: {
+ transform: 'rotate(180deg)',
+ },
+ /* Styles applied to the icon component if `variant="filled"`. */
+ iconFilled: {
+ right: 7,
+ },
+ /* Styles applied to the icon component if `variant="outlined"`. */
+ iconOutlined: {
+ right: 7,
+ },
+ /* Styles applied to the underlying native input component. */
+ nativeInput: {
+ bottom: 0,
+ left: 0,
+ position: 'absolute',
+ opacity: 0,
+ pointerEvents: 'none',
+ width: '100%',
+ boxSizing: 'border-box',
+ },
+});
+
const defaultInput = ;
/**
* An alternative to `` with a much smaller bundle size footprint.
diff --git a/packages/material-ui/src/Select/Select.js b/packages/material-ui/src/Select/Select.js
index f9aa3f6a8f65cb..3ad793122424ca 100644
--- a/packages/material-ui/src/Select/Select.js
+++ b/packages/material-ui/src/Select/Select.js
@@ -7,109 +7,12 @@ import useFormControl from '../FormControl/useFormControl';
import withStyles from '../styles/withStyles';
import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
import Input from '../Input';
+import { styles as nativeSelectStyles } from '../NativeSelect/NativeSelect';
import NativeSelectInput from '../NativeSelect/NativeSelectInput';
import FilledInput from '../FilledInput';
import OutlinedInput from '../OutlinedInput';
-export const styles = (theme) => ({
- /* Styles applied to the select component `root` class. */
- root: {},
- /* Styles applied to the select component `select` class. */
- select: {
- '-moz-appearance': 'none', // Reset
- '-webkit-appearance': 'none', // Reset
- // When interacting quickly, the text can end up selected.
- // Native select can't be selected either.
- userSelect: 'none',
- borderRadius: 0, // Reset
- minWidth: 16, // So it doesn't collapse.
- cursor: 'pointer',
- '&:focus': {
- // Show that it's not an text input
- backgroundColor:
- theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)',
- borderRadius: 0, // Reset Chrome style
- },
- // Remove IE11 arrow
- '&::-ms-expand': {
- display: 'none',
- },
- '&$disabled': {
- cursor: 'default',
- },
- '&[multiple]': {
- height: 'auto',
- },
- '&:not([multiple]) option, &:not([multiple]) optgroup': {
- backgroundColor: theme.palette.background.paper,
- },
- // Bump specificity to allow extending custom inputs
- '&&': {
- paddingRight: 24,
- },
- },
- /* Styles applied to the select component if `variant="filled"`. */
- filled: {
- '&&': {
- paddingRight: 32,
- },
- },
- /* Styles applied to the select component if `variant="outlined"`. */
- outlined: {
- borderRadius: theme.shape.borderRadius,
- '&:focus': {
- borderRadius: theme.shape.borderRadius, // Reset the reset for Chrome style
- },
- '&&': {
- paddingRight: 32,
- },
- },
- /* Styles applied to the select component `selectMenu` class. */
- selectMenu: {
- height: 'auto', // Resets for multipile select with chips
- minHeight: '1.4375em', // Required for select\text-field height consistency
- textOverflow: 'ellipsis',
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- },
- /* Pseudo-class applied to the select component `disabled` class. */
- disabled: {},
- /* Styles applied to the icon component. */
- icon: {
- // We use a position absolute over a flexbox in order to forward the pointer events
- // to the input and to support wrapping tags..
- position: 'absolute',
- right: 0,
- top: 'calc(50% - 12px)', // Center vertically
- pointerEvents: 'none', // Don't block pointer events on the select under the icon.
- color: theme.palette.action.active,
- '&$disabled': {
- color: theme.palette.action.disabled,
- },
- },
- /* Styles applied to the icon component if the popup is open. */
- iconOpen: {
- transform: 'rotate(180deg)',
- },
- /* Styles applied to the icon component if `variant="filled"`. */
- iconFilled: {
- right: 7,
- },
- /* Styles applied to the icon component if `variant="outlined"`. */
- iconOutlined: {
- right: 7,
- },
- /* Styles applied to the underlying native input component. */
- nativeInput: {
- bottom: 0,
- left: 0,
- position: 'absolute',
- opacity: 0,
- pointerEvents: 'none',
- width: '100%',
- boxSizing: 'border-box',
- },
-});
+export const styles = nativeSelectStyles;
const Select = React.forwardRef(function Select(props, ref) {
const {