@mui/material 9.0.0 → 9.1.0

package/CardActionArea/CardActionArea.js

@@ -17,6 +17,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _cardActionAreaClasses = _interopRequireWildcard(require("./cardActionAreaClasses"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -65,7 +66,7 @@ const CardActionAreaFocusHighlight = (0, _zeroStyled.styled)('span', {
   borderRadius: 'inherit',
   opacity: 0,
   backgroundColor: 'currentcolor',
-  transition: theme.transitions.create('opacity', {
+  ...(0, _utils.getTransitionStyles)(theme, 'opacity', {
     duration: theme.transitions.duration.short
   })
 })));

package/CardActionArea/CardActionArea.mjs

@@ -10,6 +10,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import cardActionAreaClasses, { getCardActionAreaUtilityClass } from "./cardActionAreaClasses.mjs";
 import ButtonBase from "../ButtonBase/index.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -58,7 +59,7 @@ const CardActionAreaFocusHighlight = styled('span', {
   borderRadius: 'inherit',
   opacity: 0,
   backgroundColor: 'currentcolor',
-  transition: theme.transitions.create('opacity', {
+  ...getTransitionStyles(theme, 'opacity', {
     duration: theme.transitions.duration.short
   })
 })));

package/Checkbox/Checkbox.js

@@ -158,7 +158,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
       slots,
       slotProps: {
         input: (0, _utils.mergeSlotProps)(typeof externalInputProps === 'function' ? externalInputProps(ownerState) : externalInputProps, {
-          'data-indeterminate': indeterminate
+          'data-indeterminate': indeterminate,
+          'aria-checked': indeterminate ? 'mixed' : undefined
         })
       }
     }

package/Checkbox/Checkbox.mjs

@@ -151,7 +151,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
       slots,
       slotProps: {
         input: mergeSlotProps(typeof externalInputProps === 'function' ? externalInputProps(ownerState) : externalInputProps, {
-          'data-indeterminate': indeterminate
+          'data-indeterminate': indeterminate,
+          'aria-checked': indeterminate ? 'mixed' : undefined
         })
       }
     }

package/Chip/Chip.js

@@ -23,6 +23,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _chipClasses = _interopRequireWildcard(require("./chipClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -83,7 +84,7 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
     backgroundColor: (theme.vars || theme).palette.action.selected,
     borderRadius: 32 / 2,
     whiteSpace: 'nowrap',
-    transition: theme.transitions.create(['background-color', 'box-shadow']),
+    ...(0, _utils.getTransitionStyles)(theme, ['background-color', 'box-shadow']),
     // reset cursor explicitly in case ButtonBase is used
     cursor: 'unset',
     // We disable the focus ring for mouse, touch and keyboard users.

package/Chip/Chip.mjs

@@ -16,6 +16,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.mjs";
 import chipClasses, { getChipUtilityClass } from "./chipClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -76,7 +77,7 @@ const ChipRoot = styled('div', {
     backgroundColor: (theme.vars || theme).palette.action.selected,
     borderRadius: 32 / 2,
     whiteSpace: 'nowrap',
-    transition: theme.transitions.create(['background-color', 'box-shadow']),
+    ...getTransitionStyles(theme, ['background-color', 'box-shadow']),
     // reset cursor explicitly in case ButtonBase is used
     cursor: 'unset',
     // We disable the focus ring for mouse, touch and keyboard users.

package/CircularProgress/CircularProgress.d.mts

@@ -30,6 +30,16 @@ export interface CircularProgressProps extends StandardProps<React.HTMLAttribute
    * @default false
    */
   enableTrackSlot?: boolean | undefined;
+  /**
+   * The maximum value for the progress indicator for the determinate variant.
+   * @default 100
+   */
+  max?: number | undefined;
+  /**
+   * The minimum value for the progress indicator for the determinate variant.
+   * @default 0
+   */
+  min?: number | undefined;
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.
@@ -48,8 +58,8 @@ export interface CircularProgressProps extends StandardProps<React.HTMLAttribute
   thickness?: number | undefined;
   /**
    * The value of the progress indicator for the determinate variant.
-   * Value between 0 and 100.
-   * @default 0
+   * Value between `min` and `max`.
+   * @default props.min ?? 0
    */
   value?: number | undefined;
   /**

package/CircularProgress/CircularProgress.d.ts

@@ -30,6 +30,16 @@ export interface CircularProgressProps extends StandardProps<React.HTMLAttribute
    * @default false
    */
   enableTrackSlot?: boolean | undefined;
+  /**
+   * The maximum value for the progress indicator for the determinate variant.
+   * @default 100
+   */
+  max?: number | undefined;
+  /**
+   * The minimum value for the progress indicator for the determinate variant.
+   * @default 0
+   */
+  min?: number | undefined;
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.
@@ -48,8 +58,8 @@ export interface CircularProgressProps extends StandardProps<React.HTMLAttribute
   thickness?: number | undefined;
   /**
    * The value of the progress indicator for the determinate variant.
-   * Value between 0 and 100.
-   * @default 0
+   * Value between `min` and `max`.
+   * @default props.min ?? 0
    */
   value?: number | undefined;
   /**

package/CircularProgress/CircularProgress.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+exports.resetWarningFlags = resetWarningFlags;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -17,9 +18,16 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
+var _utils = require("../transitions/utils");
 var _circularProgressClasses = require("./circularProgressClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const SIZE = 44;
+let warnedMinMaxWithoutVariant = false;
+let warnedInvalidMinMaxValue = false;
+function resetWarningFlags() {
+  warnedMinMaxWithoutVariant = false;
+  warnedInvalidMinMaxValue = false;
+}
 const circularRotateKeyframe = (0, _zeroStyled.keyframes)`
   0% {
     transform: rotate(0deg);
@@ -81,31 +89,41 @@ const CircularProgressRoot = (0, _zeroStyled.styled)('span', {
   }
 })((0, _memoTheme.default)(({
   theme
-}) => ({
-  display: 'inline-block',
-  variants: [{
-    props: {
-      variant: 'determinate'
-    },
-    style: {
-      transition: theme.transitions.create('transform')
-    }
-  }, {
-    props: {
-      variant: 'indeterminate'
-    },
-    style: rotateAnimation || {
-      animation: `${circularRotateKeyframe} 1.4s linear infinite`
-    }
-  }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
-    props: {
-      color
-    },
-    style: {
-      color: (theme.vars || theme).palette[color].main
-    }
-  }))]
-})));
+}) => {
+  const reducedMotionAnimationStyles = (0, _utils.getReducedMotionStyles)(theme, {
+    animation: 'none'
+  });
+  return {
+    display: 'inline-block',
+    variants: [{
+      props: {
+        variant: 'determinate'
+      },
+      style: {
+        ...(0, _utils.getTransitionStyles)(theme, 'transform')
+      }
+    }, {
+      props: {
+        variant: 'indeterminate'
+      },
+      style: rotateAnimation || {
+        animation: `${circularRotateKeyframe} 1.4s linear infinite`
+      }
+    }, ...(reducedMotionAnimationStyles ? [{
+      props: {
+        variant: 'indeterminate'
+      },
+      style: reducedMotionAnimationStyles
+    }] : []), ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
+      props: {
+        color
+      },
+      style: {
+        color: (theme.vars || theme).palette[color].main
+      }
+    }))]
+  };
+}));
 const CircularProgressSVG = (0, _zeroStyled.styled)('svg', {
   name: 'MuiCircularProgress',
   slot: 'Svg'
@@ -123,34 +141,44 @@ const CircularProgressCircle = (0, _zeroStyled.styled)('circle', {
   }
 })((0, _memoTheme.default)(({
   theme
-}) => ({
-  stroke: 'currentColor',
-  variants: [{
-    props: {
-      variant: 'determinate'
-    },
-    style: {
-      transition: theme.transitions.create('stroke-dashoffset')
-    }
-  }, {
-    props: {
-      variant: 'indeterminate'
-    },
-    style: {
-      // Some default value that looks fine waiting for the animation to kicks in.
-      strokeDasharray: '80px, 200px',
-      strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
-    style: dashAnimation || {
-      // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
-      animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
-    }
-  }]
-})));
+}) => {
+  const reducedMotionAnimationStyles = (0, _utils.getReducedMotionStyles)(theme, {
+    animation: 'none'
+  });
+  return {
+    stroke: 'currentColor',
+    variants: [{
+      props: {
+        variant: 'determinate'
+      },
+      style: {
+        ...(0, _utils.getTransitionStyles)(theme, 'stroke-dashoffset')
+      }
+    }, {
+      props: {
+        variant: 'indeterminate'
+      },
+      style: {
+        // Some default value that looks fine while waiting for the animation to kick in.
+        strokeDasharray: '80px, 200px',
+        strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
+      style: dashAnimation || {
+        // At runtime for Pigment CSS, `dashAnimation` will be null and the generated keyframe will be used.
+        animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
+      }
+    }, ...(reducedMotionAnimationStyles ? [{
+      props: ({
+        ownerState
+      }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
+      style: reducedMotionAnimationStyles
+    }] : [])]
+  };
+}));
 const CircularProgressTrack = (0, _zeroStyled.styled)('circle', {
   name: 'MuiCircularProgress',
   slot: 'Track'
@@ -178,13 +206,23 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     color = 'primary',
     disableShrink = false,
     enableTrackSlot = false,
+    min: minProp,
+    max: maxProp,
     size = 40,
     style,
     thickness = 3.6,
-    value = 0,
+    value = props.min ?? 0,
     variant = 'indeterminate',
     ...other
   } = props;
+  if (process.env.NODE_ENV !== 'production') {
+    if (!warnedMinMaxWithoutVariant && variant === 'indeterminate' && (minProp !== undefined || maxProp !== undefined)) {
+      console.warn(`MUI: You have provided the \`min\` or \`max\` props with an 'indeterminate' variant. These props will have no effect.`);
+      warnedMinMaxWithoutVariant = true;
+    }
+  }
+  const min = minProp ?? 0;
+  const max = maxProp ?? 100;
   const ownerState = {
     ...props,
     color,
@@ -201,10 +239,19 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
   const rootProps = {};
   if (variant === 'determinate') {
     const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
+    if (process.env.NODE_ENV !== 'production') {
+      if (!warnedInvalidMinMaxValue && (value < min || value > max || min >= max)) {
+        console.error(`MUI: The min, max, and value props in CircularProgress should be numbers where min < max and min <= value <= max. Received min=${min}, max=${max}, value=${value}.`);
+        warnedInvalidMinMaxValue = true;
+      }
+    }
+    const range = max - min;
     circleStyle.strokeDasharray = circumference.toFixed(3);
-    rootProps['aria-valuenow'] = Math.round(value);
-    circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
+    circleStyle.strokeDashoffset = range > 0 ? `${((max - value) / range * circumference).toFixed(3)}px` : `${circumference.toFixed(3)}px`; // empty-state fallback when range is invalid
     rootStyle.transform = 'rotate(-90deg)';
+    rootProps['aria-valuenow'] = value;
+    rootProps['aria-valuemin'] = min;
+    rootProps['aria-valuemax'] = max;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CircularProgressRoot, {
     className: (0, _clsx.default)(classes.root, className),
@@ -282,6 +329,16 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
    * @default false
    */
   enableTrackSlot: _propTypes.default.bool,
+  /**
+   * The maximum value for the progress indicator for the determinate variant.
+   * @default 100
+   */
+  max: _propTypes.default.number,
+  /**
+   * The minimum value for the progress indicator for the determinate variant.
+   * @default 0
+   */
+  min: _propTypes.default.number,
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.
@@ -304,8 +361,8 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
   thickness: _propTypes.default.number,
   /**
    * The value of the progress indicator for the determinate variant.
-   * Value between 0 and 100.
-   * @default 0
+   * Value between `min` and `max`.
+   * @default props.min ?? 0
    */
   value: _propTypes.default.number,
   /**

package/CircularProgress/CircularProgress.mjs

@@ -10,9 +10,16 @@ import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import capitalize from "../utils/capitalize.mjs";
 import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.mjs";
+import { getReducedMotionStyles, getTransitionStyles } from "../transitions/utils.mjs";
 import { getCircularProgressUtilityClass } from "./circularProgressClasses.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SIZE = 44;
+let warnedMinMaxWithoutVariant = false;
+let warnedInvalidMinMaxValue = false;
+export function resetWarningFlags() {
+  warnedMinMaxWithoutVariant = false;
+  warnedInvalidMinMaxValue = false;
+}
 const circularRotateKeyframe = keyframes`
   0% {
     transform: rotate(0deg);
@@ -74,31 +81,41 @@ const CircularProgressRoot = styled('span', {
   }
 })(memoTheme(({
   theme
-}) => ({
-  display: 'inline-block',
-  variants: [{
-    props: {
-      variant: 'determinate'
-    },
-    style: {
-      transition: theme.transitions.create('transform')
-    }
-  }, {
-    props: {
-      variant: 'indeterminate'
-    },
-    style: rotateAnimation || {
-      animation: `${circularRotateKeyframe} 1.4s linear infinite`
-    }
-  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
-    props: {
-      color
-    },
-    style: {
-      color: (theme.vars || theme).palette[color].main
-    }
-  }))]
-})));
+}) => {
+  const reducedMotionAnimationStyles = getReducedMotionStyles(theme, {
+    animation: 'none'
+  });
+  return {
+    display: 'inline-block',
+    variants: [{
+      props: {
+        variant: 'determinate'
+      },
+      style: {
+        ...getTransitionStyles(theme, 'transform')
+      }
+    }, {
+      props: {
+        variant: 'indeterminate'
+      },
+      style: rotateAnimation || {
+        animation: `${circularRotateKeyframe} 1.4s linear infinite`
+      }
+    }, ...(reducedMotionAnimationStyles ? [{
+      props: {
+        variant: 'indeterminate'
+      },
+      style: reducedMotionAnimationStyles
+    }] : []), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
+      props: {
+        color
+      },
+      style: {
+        color: (theme.vars || theme).palette[color].main
+      }
+    }))]
+  };
+}));
 const CircularProgressSVG = styled('svg', {
   name: 'MuiCircularProgress',
   slot: 'Svg'
@@ -116,34 +133,44 @@ const CircularProgressCircle = styled('circle', {
   }
 })(memoTheme(({
   theme
-}) => ({
-  stroke: 'currentColor',
-  variants: [{
-    props: {
-      variant: 'determinate'
-    },
-    style: {
-      transition: theme.transitions.create('stroke-dashoffset')
-    }
-  }, {
-    props: {
-      variant: 'indeterminate'
-    },
-    style: {
-      // Some default value that looks fine waiting for the animation to kicks in.
-      strokeDasharray: '80px, 200px',
-      strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
-    style: dashAnimation || {
-      // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
-      animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
-    }
-  }]
-})));
+}) => {
+  const reducedMotionAnimationStyles = getReducedMotionStyles(theme, {
+    animation: 'none'
+  });
+  return {
+    stroke: 'currentColor',
+    variants: [{
+      props: {
+        variant: 'determinate'
+      },
+      style: {
+        ...getTransitionStyles(theme, 'stroke-dashoffset')
+      }
+    }, {
+      props: {
+        variant: 'indeterminate'
+      },
+      style: {
+        // Some default value that looks fine while waiting for the animation to kick in.
+        strokeDasharray: '80px, 200px',
+        strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
+      style: dashAnimation || {
+        // At runtime for Pigment CSS, `dashAnimation` will be null and the generated keyframe will be used.
+        animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
+      }
+    }, ...(reducedMotionAnimationStyles ? [{
+      props: ({
+        ownerState
+      }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
+      style: reducedMotionAnimationStyles
+    }] : [])]
+  };
+}));
 const CircularProgressTrack = styled('circle', {
   name: 'MuiCircularProgress',
   slot: 'Track'
@@ -171,13 +198,23 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     color = 'primary',
     disableShrink = false,
     enableTrackSlot = false,
+    min: minProp,
+    max: maxProp,
     size = 40,
     style,
     thickness = 3.6,
-    value = 0,
+    value = props.min ?? 0,
     variant = 'indeterminate',
     ...other
   } = props;
+  if (process.env.NODE_ENV !== 'production') {
+    if (!warnedMinMaxWithoutVariant && variant === 'indeterminate' && (minProp !== undefined || maxProp !== undefined)) {
+      console.warn(`MUI: You have provided the \`min\` or \`max\` props with an 'indeterminate' variant. These props will have no effect.`);
+      warnedMinMaxWithoutVariant = true;
+    }
+  }
+  const min = minProp ?? 0;
+  const max = maxProp ?? 100;
   const ownerState = {
     ...props,
     color,
@@ -194,10 +231,19 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
   const rootProps = {};
   if (variant === 'determinate') {
     const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
+    if (process.env.NODE_ENV !== 'production') {
+      if (!warnedInvalidMinMaxValue && (value < min || value > max || min >= max)) {
+        console.error(`MUI: The min, max, and value props in CircularProgress should be numbers where min < max and min <= value <= max. Received min=${min}, max=${max}, value=${value}.`);
+        warnedInvalidMinMaxValue = true;
+      }
+    }
+    const range = max - min;
     circleStyle.strokeDasharray = circumference.toFixed(3);
-    rootProps['aria-valuenow'] = Math.round(value);
-    circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
+    circleStyle.strokeDashoffset = range > 0 ? `${((max - value) / range * circumference).toFixed(3)}px` : `${circumference.toFixed(3)}px`; // empty-state fallback when range is invalid
     rootStyle.transform = 'rotate(-90deg)';
+    rootProps['aria-valuenow'] = value;
+    rootProps['aria-valuemin'] = min;
+    rootProps['aria-valuemax'] = max;
   }
   return /*#__PURE__*/_jsx(CircularProgressRoot, {
     className: clsx(classes.root, className),
@@ -275,6 +321,16 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
    * @default false
    */
   enableTrackSlot: PropTypes.bool,
+  /**
+   * The maximum value for the progress indicator for the determinate variant.
+   * @default 100
+   */
+  max: PropTypes.number,
+  /**
+   * The minimum value for the progress indicator for the determinate variant.
+   * @default 0
+   */
+  min: PropTypes.number,
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.
@@ -297,8 +353,8 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
   thickness: PropTypes.number,
   /**
    * The value of the progress indicator for the determinate variant.
-   * Value between 0 and 100.
-   * @default 0
+   * Value between `min` and `max`.
+   * @default props.min ?? 0
    */
   value: PropTypes.number,
   /**

package/ClickAwayListener/ClickAwayListener.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ClickAwayListener = ClickAwayListener;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _contains = _interopRequireDefault(require("@mui/utils/contains"));
 var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
@@ -72,7 +73,7 @@ function ClickAwayListener(props) {
     syntheticEventRef.current = false;
     const doc = (0, _ownerDocument.default)(nodeRef.current);
 
-    // 1. IE11 support, which trigger the handleClickAway even after the unbind
+    // 1. IE 11 support, which trigger the handleClickAway even after the unbind
     // 2. The child might render null.
     // 3. Behave like a blur listener.
     if (!activatedRef.current || !nodeRef.current || 'clientX' in event && clickedRootScrollbar(event, doc)) {
@@ -90,11 +91,7 @@ function ClickAwayListener(props) {
     if (event.composedPath) {
       insideDOM = event.composedPath().includes(nodeRef.current);
     } else {
-      insideDOM = !doc.documentElement.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      event.target) || nodeRef.current.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      event.target);
+      insideDOM = !(0, _contains.default)(doc.documentElement, event.target) || (0, _contains.default)(nodeRef.current, event.target);
     }
     if (!insideDOM && (disableReactTree || !insideReactTree)) {
       onClickAway(event);