[material-ui] Remove remaining IE11 code

docs/data/material/components/modal/ServerModal.js

@@ -13,11 +13,6 @@ export default function ServerModal() {
         flexGrow: 1,
         minWidth: 300,
         transform: 'translateZ(0)',
-        // The position fixed scoping doesn't work in IE11.
-        // Disable this demo to preserve the others.
-        '@media all and (-ms-high-contrast: none)': {
-          display: 'none',
-        },
       }}
       ref={rootRef}
     >

docs/data/material/components/modal/ServerModal.tsx

@@ -13,11 +13,6 @@ export default function ServerModal() {
         flexGrow: 1,
         minWidth: 300,
         transform: 'translateZ(0)',
-        // The position fixed scoping doesn't work in IE11.
-        // Disable this demo to preserve the others.
-        '@media all and (-ms-high-contrast: none)': {
-          display: 'none',
-        },
       }}
       ref={rootRef}
     >

packages/mui-material/src/ButtonBase/ButtonBase.js

@@ -219,20 +219,9 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) {
     return component && component !== 'button' && !(button.tagName === 'A' && button.href);
   };
 
-  /**
-   * IE11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
-   */
-  const keydownRef = React.useRef(false);
   const handleKeyDown = useEventCallback((event) => {
     // Check if key is already down to avoid repeats being counted as multiple activations
-    if (
-      focusRipple &&
-      !keydownRef.current &&
-      focusVisible &&
-      rippleRef.current &&
-      event.key === ' '
-    ) {
-      keydownRef.current = true;
+    if (focusRipple && !event.repeat && focusVisible && rippleRef.current && event.key === ' ') {
       rippleRef.current.stop(event, () => {
         rippleRef.current.start(event);
       });
@@ -270,7 +259,6 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) {
       focusVisible &&
       !event.defaultPrevented
     ) {
-      keydownRef.current = false;
       rippleRef.current.stop(event, () => {
         rippleRef.current.pulsate(event);
       });

packages/mui-material/src/ButtonBase/ButtonBase.test.js

@@ -901,9 +901,7 @@ describe('<ButtonBase />', () => {
 
       expect(container.querySelectorAll('.ripple-visible')).to.have.lengthOf(1);
 
-      // technically the second keydown should be fire with repeat: true
-      // but that isn't implemented in IE11 so we shouldn't mock it here either
-      fireEvent.keyDown(button, { key: 'Enter' });
+      fireEvent.keyDown(button, { key: 'Enter', repeat: true });
 
       expect(container.querySelectorAll('.ripple-visible')).to.have.lengthOf(1);
     });

packages/mui-material/src/Dialog/Dialog.js

@@ -117,7 +117,6 @@ const DialogPaper = styled(Paper, {
 })(({ theme }) => ({
   margin: 32,
   position: 'relative',
-  overflowY: 'auto', // Fix IE11 issue, to remove at some point.
   '@media print': {
     overflowY: 'visible',
     boxShadow: 'none',
@@ -140,7 +139,6 @@ const DialogPaper = styled(Paper, {
       style: {
         display: 'inline-block',
         verticalAlign: 'middle',
-        textAlign: 'left', // 'initial' doesn't work on IE11
       },
     },
     {

packages/mui-material/src/FilledInput/FilledInput.js

@@ -79,7 +79,6 @@ const FilledInputRoot = styled(InputBaseRoot, {
           '&::after': {
             left: 0,
             bottom: 0,
-            // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
             content: '""',
             position: 'absolute',
             right: 0,
@@ -108,7 +107,6 @@ const FilledInputRoot = styled(InputBaseRoot, {
             }`,
             left: 0,
             bottom: 0,
-            // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
             content: '"\\00a0"',
             position: 'absolute',
             right: 0,

packages/mui-material/src/IconButton/IconButton.js

@@ -48,7 +48,6 @@ const IconButtonRoot = styled(ButtonBase, {
     fontSize: theme.typography.pxToRem(24),
     padding: 8,
     borderRadius: '50%',
-    overflow: 'visible', // Explicitly set the default value to solve a bug on IE11.
     color: (theme.vars || theme).palette.action.active,
     transition: theme.transitions.create('background-color', {
       duration: theme.transitions.duration.shortest,

packages/mui-material/src/ImageList/ImageList.js

@@ -70,20 +70,6 @@ const ImageList = React.forwardRef(function ImageList(inProps, ref) {
     [rowHeight, gap, variant],
   );
 
-  React.useEffect(() => {
-    if (process.env.NODE_ENV !== 'production') {
-      // Detect Internet Explorer 8+
-      if (document !== undefined && 'objectFit' in document.documentElement.style === false) {
-        console.error(
-          [
-            'MUI: ImageList v5+ no longer natively supports Internet Explorer.',
-            'Use v4 of this component instead, or polyfill CSS object-fit.',
-          ].join('\n'),
-        );
-      }
-    }
-  }, []);
-
   const style =
     variant === 'masonry'
       ? { columnCount: cols, columnGap: gap, ...styleProp }

packages/mui-material/src/Input/Input.js

@@ -68,7 +68,6 @@ const InputRoot = styled(InputBaseRoot, {
           '&::after': {
             left: 0,
             bottom: 0,
-            // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
             content: '""',
             position: 'absolute',
             right: 0,
@@ -93,7 +92,6 @@ const InputRoot = styled(InputBaseRoot, {
             borderBottom: `1px solid ${bottomLineColor}`,
             left: 0,
             bottom: 0,
-            // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
             content: '"\\00a0"',
             position: 'absolute',
             right: 0,

packages/mui-material/src/InputAdornment/InputAdornment.js

@@ -45,7 +45,6 @@ const InputAdornmentRoot = styled('div', {
   overridesResolver,
 })(({ theme }) => ({
   display: 'flex',
-  height: '0.01em', // Fix IE11 flexbox alignment. To remove at some point.
   maxHeight: '2em',
   alignItems: 'center',
   whiteSpace: 'nowrap',

packages/mui-material/src/InputBase/InputBase.js

@@ -184,12 +184,11 @@ export const InputBaseInput = styled('input', {
     display: 'block',
     // Make the flex item shrink with Firefox
     minWidth: 0,
-    width: '100%', // Fix IE11 width issue
+    flexGrow: 1,
     animationName: 'mui-auto-fill-cancel',
     animationDuration: '10ms',
     '&::-webkit-input-placeholder': placeholder,
     '&::-moz-placeholder': placeholder, // Firefox 19+
-    '&:-ms-input-placeholder': placeholder, // IE11
     '&::-ms-input-placeholder': placeholder, // Edge
     '&:focus': {
       outline: 0,
@@ -206,11 +205,9 @@ export const InputBaseInput = styled('input', {
     [`label[data-shrink=false] + .${inputBaseClasses.formControl} &`]: {
       '&::-webkit-input-placeholder': placeholderHidden,
       '&::-moz-placeholder': placeholderHidden, // Firefox 19+
-      '&:-ms-input-placeholder': placeholderHidden, // IE11
       '&::-ms-input-placeholder': placeholderHidden, // Edge
       '&:focus::-webkit-input-placeholder': placeholderVisible,
       '&:focus::-moz-placeholder': placeholderVisible, // Firefox 19+
-      '&:focus:-ms-input-placeholder': placeholderVisible, // IE11
       '&:focus::-ms-input-placeholder': placeholderVisible, // Edge
     },
     [`&.${inputBaseClasses.disabled}`]: {
@@ -390,13 +387,6 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {
   }, [value, checkDirty, isControlled]);
 
   const handleFocus = (event) => {
-    // Fix a bug with IE11 where the focus/blur events are triggered
-    // while the component is disabled.
-    if (fcs.disabled) {
-      event.stopPropagation();
-      return;
-    }
-
     if (onFocus) {
       onFocus(event);
     }

packages/mui-material/src/InputBase/InputBase.test.js

@@ -110,27 +110,6 @@ describe('<InputBase />', () => {
       expect(handleFocus.callCount).to.equal(1);
     });
 
-    // IE11 bug
-    it('should not respond the focus event when disabled', () => {
-      const handleFocus = spy();
-      // non-native input simulating how IE11 treats disabled inputs
-      const { getByRole } = render(
-        <div onFocus={handleFocus}>
-          <InputBase
-            disabled
-            inputComponent="div"
-            inputProps={{ role: 'textbox', tabIndex: -1 }}
-            onFocus={handleFocus}
-          />
-        </div>,
-      );
-
-      act(() => {
-        getByRole('textbox').focus();
-      });
-      expect(handleFocus.called).to.equal(false);
-    });
-
     it('fires the click event when the <input /> is disabled', () => {
       const handleClick = spy();
       const { getByRole } = render(<InputBase disabled onClick={handleClick} />);

packages/mui-material/src/NativeSelect/NativeSelectInput.js

@@ -35,10 +35,6 @@ export const StyledSelectSelect = styled('select')(({ theme }) => ({
     // Reset Chrome style
     borderRadius: 0,
   },
-  // Remove IE11 arrow
-  '&::-ms-expand': {
-    display: 'none',
-  },
   [`&.${nativeSelectClasses.disabled}`]: {
     cursor: 'default',
   },

packages/mui-material/src/StepLabel/StepLabel.js

@@ -104,7 +104,6 @@ const StepLabelIconContainer = styled('span', {
   slot: 'IconContainer',
   overridesResolver: (props, styles) => styles.iconContainer,
 })({
-  flexShrink: 0, // Fix IE11 issue
   display: 'flex',
   paddingRight: 8,
   [`&.${stepLabelClasses.alternativeLabel}`]: {

packages/mui-material/src/Tabs/Tabs.js

@@ -10,7 +10,6 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { styled, createUseThemeProps } from '../zero-styled';
 import useTheme from '../styles/useTheme';
 import debounce from '../utils/debounce';
-import { getNormalizedScrollLeft, detectScrollType } from '../utils/scrollLeft';
 import animate from '../internal/animate';
 import ScrollbarSize from './ScrollbarSize';
 import TabScrollButton from '../TabScrollButton';
@@ -380,7 +379,6 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
         clientWidth: tabsNode.clientWidth,
         scrollLeft: tabsNode.scrollLeft,
         scrollTop: tabsNode.scrollTop,
-        scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, isRtl ? 'rtl' : 'ltr'),
         scrollWidth: tabsNode.scrollWidth,
         top: rect.top,
         bottom: rect.bottom,
@@ -452,11 +450,9 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
     } else {
       startIndicator = isRtl ? 'right' : 'left';
       if (tabMeta && tabsMeta) {
-        const correction = isRtl
-          ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth
-          : tabsMeta.scrollLeft;
         startValue =
-          (isRtl ? -1 : 1) * (tabMeta[startIndicator] - tabsMeta[startIndicator] + correction);
+          (isRtl ? -1 : 1) *
+          (tabMeta[startIndicator] - tabsMeta[startIndicator] + tabsMeta.scrollLeft);
       }
     }
 
@@ -466,9 +462,10 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
       [size]: tabMeta ? tabMeta[size] : 0,
     };
 
-    // IE11 support, replace with Number.isNaN
-    // eslint-disable-next-line no-restricted-globals
-    if (isNaN(indicatorStyle[startIndicator]) || isNaN(indicatorStyle[size])) {
+    if (
+      typeof indicatorStyle[startIndicator] !== 'number' ||
+      typeof indicatorStyle[size] !== 'number'
+    ) {
       setIndicatorStyle(newIndicatorStyle);
     } else {
       const dStart = Math.abs(indicatorStyle[startIndicator] - newIndicatorStyle[startIndicator]);
@@ -497,8 +494,6 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
       scrollValue += delta;
     } else {
       scrollValue += delta * (isRtl ? -1 : 1);
-      // Fix for Edge
-      scrollValue *= isRtl && detectScrollType() === 'reverse' ? -1 : 1;
     }
 
     scroll(scrollValue);