@mui/material 7.0.0-alpha.0 → 7.0.0-alpha.1

package/SwipeableDrawer/SwipeableDrawer.d.ts

@@ -1,7 +1,22 @@
 import * as React from 'react';
-import { DrawerProps } from '../Drawer';
-
-export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'open'> {
+import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
+import { DrawerProps, DrawerOwnerState, DrawerSlotsAndSlotProps } from "../Drawer/index.js";
+export interface SwipeableDrawerSwipeAreaSlotPropsOverrides {}
+export interface SwipeableDrawerSlots {
+  /**
+   * The component used for the swipeArea slot.
+   * @default div
+   */
+  swipeArea?: React.ElementType;
+}
+type SwipeableDrawerSlotsAndSlotProps = DrawerSlotsAndSlotProps & CreateSlotsAndSlotProps<SwipeableDrawerSlots, {
+  /**
+   * Props forwarded to the docked slot.
+   * By default, the avaible props are based on a div element.
+   */
+  swipeArea: SlotProps<'div', SwipeableDrawerSwipeAreaSlotPropsOverrides, DrawerOwnerState>;
+}>;
+export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'open' | 'slots' | 'slotProps'>, SwipeableDrawerSlotsAndSlotProps {
   /**
    * If set to true, the swipe event will open the drawer even if the user begins the swipe on one of the drawer's children.
    * This can be useful in scenarios where the drawer is partially visible.
@@ -14,9 +29,7 @@ export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'ope
    *
    * @default false
    */
-  allowSwipeInChildren?:
-    | boolean
-    | ((event: TouchEvent, swipeArea: HTMLDivElement, paper: HTMLDivElement) => boolean);
+  allowSwipeInChildren?: boolean | ((event: TouchEvent, swipeArea: HTMLDivElement, paper: HTMLDivElement) => boolean);
   /**
    * Disable the backdrop transition.
    * This can improve the FPS on low-end devices.
@@ -67,6 +80,7 @@ export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'ope
   open?: boolean;
   /**
    * The element is used to intercept the touch events on the edge.
+   * @deprecated use the `slotProps.swipeArea` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SwipeAreaProps?: object;
   /**
@@ -89,5 +103,4 @@ export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'ope
  * - inherits [Drawer API](https://next.mui.com/material-ui/api/drawer/)
  */
 declare const SwipeableDrawer: React.JSXElementConstructor<SwipeableDrawerProps>;
-
-export default SwipeableDrawer;
+export default SwipeableDrawer;

package/SwipeableDrawer/SwipeableDrawer.js

@@ -1,24 +1,33 @@
+"use strict";
 'use client';
 
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
-import NoSsr from "../NoSsr/index.js";
-import Drawer, { getAnchor, isHorizontal } from "../Drawer/Drawer.js";
-import useForkRef from "../utils/useForkRef.js";
-import ownerDocument from "../utils/ownerDocument.js";
-import ownerWindow from "../utils/ownerWindow.js";
-import useEventCallback from "../utils/useEventCallback.js";
-import useEnhancedEffect from "../utils/useEnhancedEffect.js";
-import { useTheme } from "../zero-styled/index.js";
-import { useDefaultProps } from "../DefaultPropsProvider/index.js";
-import { getTransitionProps } from "../transitions/utils.js";
-import SwipeArea from "./SwipeArea.js";
-
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.reset = reset;
+var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
+var _NoSsr = _interopRequireDefault(require("../NoSsr"));
+var _Drawer = _interopRequireWildcard(require("../Drawer/Drawer"));
+var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
+var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
+var _ownerWindow = _interopRequireDefault(require("../utils/ownerWindow"));
+var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
+var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
+var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _utils = require("../transitions/utils");
+var _utils2 = require("../utils");
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _SwipeArea = _interopRequireDefault(require("./SwipeArea"));
+var _jsxRuntime = require("react/jsx-runtime");
 // This value is closed to what browsers are using internally to
 // trigger a native scroll.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const UNCERTAINTY_THRESHOLD = 3; // px
 
 // This is the part of the drawer displayed on touch start.
@@ -30,7 +39,7 @@ const DRAG_STARTED_SIGNAL = 20; // px
 let claimedSwipeInstance = null;
 
 // Exported for test purposes.
-export function reset() {
+function reset() {
   claimedSwipeInstance = null;
 }
 function calculateCurrentX(anchor, touches, doc) {
@@ -54,7 +63,7 @@ function getDomTreeShapes(element, rootNode) {
   // Adapted from https://github.com/oliviertassinari/react-swipeable-views/blob/7666de1dba253b896911adf2790ce51467670856/packages/react-swipeable-views/src/SwipeableViews.js#L129
   const domTreeShapes = [];
   while (element && element !== rootNode.parentElement) {
-    const style = ownerWindow(rootNode).getComputedStyle(element);
+    const style = (0, _ownerWindow.default)(rootNode).getComputedStyle(element);
     if (
     // Ignore the scroll children if the element is absolute positioned.
     style.getPropertyValue('position') === 'absolute' ||
@@ -114,11 +123,11 @@ function computeHasNativeHandler({
 }
 const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
 const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inProps, ref) {
-  const props = useDefaultProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     name: 'MuiSwipeableDrawer',
     props: inProps
   });
-  const theme = useTheme();
+  const theme = (0, _zeroStyled.useTheme)();
   const transitionDurationDefault = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen
@@ -145,6 +154,8 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     transitionDuration = transitionDurationDefault,
     variant = 'temporary',
     // Mobile first.
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const [maybeSwiping, setMaybeSwiping] = React.useState(false);
@@ -154,14 +165,14 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
   const swipeAreaRef = React.useRef();
   const backdropRef = React.useRef();
   const paperRef = React.useRef();
-  const handleRef = useForkRef(PaperProps.ref, paperRef);
+  const handleRef = (0, _useForkRef.default)(PaperProps.ref, paperRef);
   const touchDetected = React.useRef(false);
 
   // Ref for transition duration based on / to match swipe speed
   const calculatedDurationRef = React.useRef();
 
   // Use a ref so the open value used is always up to date inside useCallback.
-  useEnhancedEffect(() => {
+  (0, _useEnhancedEffect.default)(() => {
     calculatedDurationRef.current = null;
   }, [open]);
   const setPosition = React.useCallback((translate, options = {}) => {
@@ -169,16 +180,16 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       mode = null,
       changeTransition = true
     } = options;
-    const anchorRtl = getAnchor(theme, anchor);
+    const anchorRtl = (0, _Drawer.getAnchor)(theme, anchor);
     const rtlTranslateMultiplier = ['right', 'bottom'].includes(anchorRtl) ? 1 : -1;
-    const horizontalSwipe = isHorizontal(anchor);
+    const horizontalSwipe = (0, _Drawer.isHorizontal)(anchor);
     const transform = horizontalSwipe ? `translate(${rtlTranslateMultiplier * translate}px, 0)` : `translate(0, ${rtlTranslateMultiplier * translate}px)`;
     const drawerStyle = paperRef.current.style;
     drawerStyle.webkitTransform = transform;
     drawerStyle.transform = transform;
     let transition = '';
     if (mode) {
-      transition = theme.transitions.create('all', getTransitionProps({
+      transition = theme.transitions.create('all', (0, _utils.getTransitionProps)({
         easing: undefined,
         style: undefined,
         timeout: transitionDuration
@@ -199,7 +210,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       }
     }
   }, [anchor, disableBackdropTransition, hideBackdrop, theme, transitionDuration]);
-  const handleBodyTouchEnd = useEventCallback(nativeEvent => {
+  const handleBodyTouchEnd = (0, _useEventCallback.default)(nativeEvent => {
     if (!touchDetected.current) {
       return;
     }
@@ -216,13 +227,13 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       return;
     }
     swipeInstance.current.isSwiping = null;
-    const anchorRtl = getAnchor(theme, anchor);
-    const horizontal = isHorizontal(anchor);
+    const anchorRtl = (0, _Drawer.getAnchor)(theme, anchor);
+    const horizontal = (0, _Drawer.isHorizontal)(anchor);
     let current;
     if (horizontal) {
-      current = calculateCurrentX(anchorRtl, nativeEvent.changedTouches, ownerDocument(nativeEvent.currentTarget));
+      current = calculateCurrentX(anchorRtl, nativeEvent.changedTouches, (0, _ownerDocument.default)(nativeEvent.currentTarget));
     } else {
-      current = calculateCurrentY(anchorRtl, nativeEvent.changedTouches, ownerWindow(nativeEvent.currentTarget));
+      current = calculateCurrentY(anchorRtl, nativeEvent.changedTouches, (0, _ownerWindow.default)(nativeEvent.currentTarget));
     }
     const startLocation = horizontal ? swipeInstance.current.startX : swipeInstance.current.startY;
     const maxTranslate = getMaxTranslate(horizontal, paperRef.current);
@@ -262,7 +273,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
           setMaybeSwiping(true);
         });
       }
-      const horizontalSwipe = isHorizontal(anchor);
+      const horizontalSwipe = (0, _Drawer.isHorizontal)(anchor);
       if (!open && paperRef.current) {
         // The ref may be null when a parent component updates while swiping.
         setPosition(getMaxTranslate(horizontalSwipe, paperRef.current) + (disableDiscovery ? 15 : -DRAG_STARTED_SIGNAL), {
@@ -276,7 +287,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       touchDetected.current = true;
     }
   };
-  const handleBodyTouchMove = useEventCallback(nativeEvent => {
+  const handleBodyTouchMove = (0, _useEventCallback.default)(nativeEvent => {
     // the ref may be null when a parent component updates while swiping
     if (!paperRef.current || !touchDetected.current) {
       return;
@@ -287,10 +298,10 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       return;
     }
     startMaybeSwiping(true);
-    const anchorRtl = getAnchor(theme, anchor);
-    const horizontalSwipe = isHorizontal(anchor);
-    const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, ownerDocument(nativeEvent.currentTarget));
-    const currentY = calculateCurrentY(anchorRtl, nativeEvent.touches, ownerWindow(nativeEvent.currentTarget));
+    const anchorRtl = (0, _Drawer.getAnchor)(theme, anchor);
+    const horizontalSwipe = (0, _Drawer.isHorizontal)(anchor);
+    const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, (0, _ownerDocument.default)(nativeEvent.currentTarget));
+    const currentY = calculateCurrentY(anchorRtl, nativeEvent.touches, (0, _ownerWindow.default)(nativeEvent.currentTarget));
     if (open && paperRef.current.contains(nativeEvent.target) && claimedSwipeInstance === null) {
       const domTreeShapes = getDomTreeShapes(nativeEvent.target, paperRef.current);
       const hasNativeHandler = computeHasNativeHandler({
@@ -376,7 +387,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     }
     setPosition(translate);
   });
-  const handleBodyTouchStart = useEventCallback(nativeEvent => {
+  const handleBodyTouchStart = (0, _useEventCallback.default)(nativeEvent => {
     // We are not supposed to handle this touch move.
     // Example of use case: ignore the event if there is a Slider.
     if (nativeEvent.defaultPrevented) {
@@ -392,10 +403,10 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     if (open && (hideBackdrop || !backdropRef.current.contains(nativeEvent.target)) && !paperRef.current.contains(nativeEvent.target)) {
       return;
     }
-    const anchorRtl = getAnchor(theme, anchor);
-    const horizontalSwipe = isHorizontal(anchor);
-    const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, ownerDocument(nativeEvent.currentTarget));
-    const currentY = calculateCurrentY(anchorRtl, nativeEvent.touches, ownerWindow(nativeEvent.currentTarget));
+    const anchorRtl = (0, _Drawer.getAnchor)(theme, anchor);
+    const horizontalSwipe = (0, _Drawer.isHorizontal)(anchor);
+    const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, (0, _ownerDocument.default)(nativeEvent.currentTarget));
+    const currentY = calculateCurrentY(anchorRtl, nativeEvent.touches, (0, _ownerWindow.default)(nativeEvent.currentTarget));
     if (!open) {
       // logic for if swipe should be ignored:
       // if disableSwipeToOpen
@@ -420,7 +431,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
   });
   React.useEffect(() => {
     if (variant === 'temporary') {
-      const doc = ownerDocument(paperRef.current);
+      const doc = (0, _ownerDocument.default)(paperRef.current);
       doc.addEventListener('touchstart', handleBodyTouchStart);
       // A blocking listener prevents Firefox's navbar to auto-hide on scroll.
       // It only needs to prevent scrolling on the drawer's content when open.
@@ -450,8 +461,24 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       setMaybeSwiping(false);
     }
   }, [open]);
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(Drawer, {
+  const [SwipeAreaSlot, swipeAreaSlotProps] = (0, _useSlot.default)('swipeArea', {
+    ref: swipeAreaRef,
+    elementType: _SwipeArea.default,
+    ownerState: props,
+    externalForwardedProps: {
+      slots,
+      slotProps: {
+        swipeArea: SwipeAreaProps,
+        ...slotProps
+      }
+    },
+    additionalProps: {
+      width: swipeAreaWidth,
+      anchor
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
       open: variant === 'temporary' && maybeSwiping ? true : open,
       variant: variant,
       ModalProps: {
@@ -467,25 +494,27 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
         ...ModalPropsProp
       },
       hideBackdrop: hideBackdrop,
-      PaperProps: {
-        ...PaperProps,
-        style: {
-          pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : '',
-          ...PaperProps.style
-        },
-        ref: handleRef
-      },
       anchor: anchor,
       transitionDuration: calculatedDurationRef.current || transitionDuration,
       onClose: onClose,
       ref: ref,
+      slots: slots,
+      slotProps: {
+        ...slotProps,
+        backdrop: (0, _utils2.mergeSlotProps)(slotProps.backdrop ?? BackdropProps, {
+          ref: backdropRef
+        }),
+        paper: (0, _utils2.mergeSlotProps)(slotProps.paper ?? PaperProps, {
+          style: {
+            pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : ''
+          },
+          ref: handleRef
+        })
+      },
       ...other
-    }), !disableSwipeToOpen && variant === 'temporary' && /*#__PURE__*/_jsx(NoSsr, {
-      children: /*#__PURE__*/_jsx(SwipeArea, {
-        anchor: anchor,
-        ref: swipeAreaRef,
-        width: swipeAreaWidth,
-        ...SwipeAreaProps
+    }), !disableSwipeToOpen && variant === 'temporary' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SwipeAreaSlot, {
+        ...swipeAreaSlotProps
       })
     })]
   });
@@ -507,56 +536,56 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
    *
    * @default false
    */
-  allowSwipeInChildren: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+  allowSwipeInChildren: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
   /**
    * @ignore
    */
-  anchor: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+  anchor: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
   /**
    * The content of the component.
    */
-  children: PropTypes.node,
+  children: _propTypes.default.node,
   /**
    * Disable the backdrop transition.
    * This can improve the FPS on low-end devices.
    * @default false
    */
-  disableBackdropTransition: PropTypes.bool,
+  disableBackdropTransition: _propTypes.default.bool,
   /**
    * If `true`, touching the screen near the edge of the drawer will not slide in the drawer a bit
    * to promote accidental discovery of the swipe gesture.
    * @default false
    */
-  disableDiscovery: PropTypes.bool,
+  disableDiscovery: _propTypes.default.bool,
   /**
    * If `true`, swipe to open is disabled. This is useful in browsers where swiping triggers
    * navigation actions. Swipe to open is disabled on iOS browsers by default.
    * @default typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent)
    */
-  disableSwipeToOpen: PropTypes.bool,
+  disableSwipeToOpen: _propTypes.default.bool,
   /**
    * @ignore
    */
-  hideBackdrop: PropTypes.bool,
+  hideBackdrop: _propTypes.default.bool,
   /**
    * Affects how far the drawer must be opened/closed to change its state.
    * Specified as percent (0-1) of the width of the drawer
    * @default 0.52
    */
-  hysteresis: PropTypes.number,
+  hysteresis: _propTypes.default.number,
   /**
    * Defines, from which (average) velocity on, the swipe is
    * defined as complete although hysteresis isn't reached.
    * Good threshold is between 250 - 1000 px/s
    * @default 450
    */
-  minFlingVelocity: PropTypes.number,
+  minFlingVelocity: _propTypes.default.number,
   /**
    * @ignore
    */
-  ModalProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
-    BackdropProps: PropTypes.shape({
-      component: elementTypeAcceptingRef
+  ModalProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
+    BackdropProps: _propTypes.default.shape({
+      component: _elementTypeAcceptingRef.default
     })
   }),
   /**
@@ -564,35 +593,60 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
    *
    * @param {React.SyntheticEvent<{}>} event The event source of the callback.
    */
-  onClose: PropTypes.func.isRequired,
+  onClose: _propTypes.default.func.isRequired,
   /**
    * Callback fired when the component requests to be opened.
    *
    * @param {React.SyntheticEvent<{}>} event The event source of the callback.
    */
-  onOpen: PropTypes.func.isRequired,
+  onOpen: _propTypes.default.func.isRequired,
   /**
    * If `true`, the component is shown.
    * @default false
    */
-  open: PropTypes.bool,
+  open: _propTypes.default.bool,
   /**
    * @ignore
    */
-  PaperProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
-    component: elementTypeAcceptingRef,
-    style: PropTypes.object
+  PaperProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
+    component: _elementTypeAcceptingRef.default,
+    style: _propTypes.default.object
+  }),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    docked: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    paper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    swipeArea: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    backdrop: _propTypes.default.elementType,
+    docked: _propTypes.default.elementType,
+    paper: _propTypes.default.elementType,
+    root: _propTypes.default.elementType,
+    swipeArea: _propTypes.default.elementType,
+    transition: _propTypes.default.elementType
   }),
   /**
    * The element is used to intercept the touch events on the edge.
+   * @deprecated use the `slotProps.swipeArea` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  SwipeAreaProps: PropTypes.object,
+  SwipeAreaProps: _propTypes.default.object,
   /**
    * The width of the left most (or right most) area in `px` that
    * the drawer can be swiped open from.
    * @default 20
    */
-  swipeAreaWidth: PropTypes.number,
+  swipeAreaWidth: _propTypes.default.number,
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
@@ -601,14 +655,14 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
    *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
-  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    appear: PropTypes.number,
-    enter: PropTypes.number,
-    exit: PropTypes.number
+  transitionDuration: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+    appear: _propTypes.default.number,
+    enter: _propTypes.default.number,
+    exit: _propTypes.default.number
   })]),
   /**
    * @ignore
    */
-  variant: PropTypes.oneOf(['permanent', 'persistent', 'temporary'])
+  variant: _propTypes.default.oneOf(['permanent', 'persistent', 'temporary'])
 } : void 0;
-export default SwipeableDrawer;
+var _default = exports.default = SwipeableDrawer;

package/SwipeableDrawer/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './SwipeableDrawer';
-export * from './SwipeableDrawer';
+export { default } from "./SwipeableDrawer.js";
+export * from "./SwipeableDrawer.js";

package/SwipeableDrawer/index.js

@@ -1 +1,13 @@
-export { default } from "./SwipeableDrawer.js";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SwipeableDrawer.default;
+  }
+});
+var _SwipeableDrawer = _interopRequireDefault(require("./SwipeableDrawer"));

package/Switch/Switch.d.ts

@@ -1,16 +1,12 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
-import { InternalStandardProps as StandardProps, Theme } from '..';
-import { SwitchBaseProps } from '../internal/SwitchBase';
-import { SwitchClasses } from './switchClasses';
-
+import { InternalStandardProps as StandardProps, Theme } from "../index.js";
+import { SwitchBaseProps } from "../internal/SwitchBase.js";
+import { SwitchClasses } from "./switchClasses.js";
 export interface SwitchPropsSizeOverrides {}
-
 export interface SwitchPropsColorOverrides {}
-
-export interface SwitchProps
-  extends StandardProps<SwitchBaseProps, 'checkedIcon' | 'color' | 'icon'> {
+export interface SwitchProps extends StandardProps<SwitchBaseProps, 'checkedIcon' | 'color' | 'icon'> {
   /**
    * The icon to display when the component is checked.
    */
@@ -25,10 +21,7 @@ export interface SwitchProps
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
-  color?: OverridableStringUnion<
-    'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default',
-    SwitchPropsColorOverrides
-  >;
+  color?: OverridableStringUnion<'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default', SwitchPropsColorOverrides>;
   /**
    * If `true`, the component is disabled.
    */
@@ -66,4 +59,4 @@ export interface SwitchProps
  * - [Switch API](https://next.mui.com/material-ui/api/switch/)
  * - inherits [IconButton API](https://next.mui.com/material-ui/api/icon-button/)
  */
-export default function Switch(props: SwitchProps): React.JSX.Element;
+export default function Switch(props: SwitchProps): React.JSX.Element;