@mui/lab 5.0.0-alpha.49 → 5.0.0-alpha.53

package/modern/internal/pickers/PickersPopper.js

@@ -1,4 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["onClick", "onTouchStart"];
 import * as React from 'react';
 import Grow from '@mui/material/Grow';
 import Paper from '@mui/material/Paper';
@@ -80,7 +82,8 @@ function useClickAwayListener(active, onClickAway) {
     // 2. The child might render null.
     // 3. Behave like a blur listener.
 
-    if (!nodeRef.current || 'clientX' in event && clickedRootScrollbar(event, doc)) {
+    if (!nodeRef.current || // is a TouchEvent?
+    'clientX' in event && clickedRootScrollbar(event, doc)) {
       return;
     } // Do not act if user performed touchmove
 
@@ -155,7 +158,8 @@ const PickersPopper = props => {
     PopperProps,
     role,
     TransitionComponent = Grow,
-    TrapFocusProps
+    TrapFocusProps,
+    PaperProps = {}
   } = props;
   React.useEffect(() => {
     function handleKeyDown(nativeEvent) {
@@ -187,6 +191,13 @@ const PickersPopper = props => {
   const handleRef = useForkRef(paperRef, containerRef);
   const handlePaperRef = useForkRef(handleRef, clickAwayRef);
   const ownerState = props;
+
+  const {
+    onClick: onPaperClickProp,
+    onTouchStart: onPaperTouchStartProp
+  } = PaperProps,
+        otherPaperProps = _objectWithoutPropertiesLoose(PaperProps, _excluded);
+
   return /*#__PURE__*/_jsx(PickersPopperRoot, _extends({
     transition: true,
     role: role,
@@ -204,17 +215,30 @@ const PickersPopper = props => {
       isEnabled: () => true
     }, TrapFocusProps, {
       children: /*#__PURE__*/_jsx(TransitionComponent, _extends({}, TransitionProps, {
-        children: /*#__PURE__*/_jsx(PickersPopperPaper, {
+        children: /*#__PURE__*/_jsx(PickersPopperPaper, _extends({
           tabIndex: -1,
           elevation: 8,
           ref: handlePaperRef,
-          onClick: onPaperClick,
-          onTouchStart: onPaperTouchStart,
+          onClick: event => {
+            onPaperClick(event);
+
+            if (onPaperClickProp) {
+              onPaperClickProp(event);
+            }
+          },
+          onTouchStart: event => {
+            onPaperTouchStart(event);
+
+            if (onPaperTouchStartProp) {
+              onPaperTouchStartProp(event);
+            }
+          },
           ownerState: _extends({}, ownerState, {
             placement
-          }),
+          })
+        }, otherPaperProps, {
           children: children
-        })
+        }))
       }))
     }))
   }));

package/modern/internal/pickers/test-utils.js

@@ -4,7 +4,6 @@ const _excluded = ["locale"];
 import * as React from 'react';
 import { parseISO } from 'date-fns';
 import { createClientRender, fireEvent, screen } from 'test/utils';
-import { queryHelpers } from '@testing-library/react/pure';
 import AdapterDateFns from '@mui/lab/AdapterDateFns';
 import LocalizationProvider from '@mui/lab/LocalizationProvider'; // TODO make possible to pass here any utils using cli
 
@@ -16,12 +15,25 @@ import LocalizationProvider from '@mui/lab/LocalizationProvider'; // TODO make p
 
 import { jsx as _jsx } from "react/jsx-runtime";
 export class AdapterClassToUse extends AdapterDateFns {
-  date(value) {
-    if (typeof value === 'string') {
-      return parseISO(value);
-    }
+  constructor(...args) {
+    super(...args);
 
-    return super.date(value);
+    this.date = value => {
+      if (typeof value === 'string') {
+        return parseISO(value);
+      }
+
+      if (typeof value === 'undefined') {
+        return new Date();
+      }
+
+      if (value === null) {
+        // @ts-expect-error AdapterDateFns#date says it returns NotNullable but that's not true
+        return null;
+      }
+
+      return new Date(value);
+    };
   }
 
 }
@@ -64,26 +76,6 @@ export function createPickerRender(_ref = {}) {
     wrapper: Wrapper
   }));
 }
-export const queryByMuiTest = queryHelpers.queryByAttribute.bind(null, 'data-mui-test');
-export const queryAllByMuiTest = queryHelpers.queryAllByAttribute.bind(null, 'data-mui-test');
-export function getAllByMuiTest(id, container = document.body, options) {
-  const els = queryAllByMuiTest(container, id, options);
-
-  if (!els.length) {
-    throw queryHelpers.getElementError(`Unable to find an element by: [data-mui-test="${id}"]`, container);
-  }
-
-  return els;
-}
-export function getByMuiTest(...args) {
-  const result = getAllByMuiTest(...args);
-
-  if (result.length > 0) {
-    return result[0];
-  }
-
-  throw queryHelpers.getElementError(`Unable to find an element by: [data-mui-test="${args[0]}"]`, document.body);
-}
 export function openMobilePicker() {
   fireEvent.click(screen.getByRole('textbox'));
 }

package/modern/internal/pickers/wrappers/DesktopWrapper.js

@@ -14,6 +14,7 @@ function DesktopWrapper(props) {
     onDismiss,
     open,
     PopperProps,
+    PaperProps,
     TransitionComponent
   } = props;
   const ownInputRef = React.useRef(null);
@@ -28,6 +29,7 @@ function DesktopWrapper(props) {
       anchorEl: ownInputRef.current,
       TransitionComponent: TransitionComponent,
       PopperProps: PopperProps,
+      PaperProps: PaperProps,
       onClose: onDismiss,
       children: children
     })]

package/node/CalendarPicker/CalendarPicker.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.defaultReduceAnimations = exports.default = exports.calendarPickerClasses = void 0;
 exports.getCalendarPickerUtilityClass = getCalendarPickerUtilityClass;
-exports.default = exports.defaultReduceAnimations = exports.calendarPickerClasses = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 

package/node/CalendarPicker/PickersFadeTransitionGroup.js

@@ -29,10 +29,10 @@ const classes = (0, _core.generateUtilityClasses)('PrivatePickersFadeTransitionG
 const animationDuration = 500;
 const PickersFadeTransitionGroupRoot = (0, _styles.styled)(_reactTransitionGroup.TransitionGroup, {
   skipSx: true
-})(() => ({
+})({
   display: 'block',
   position: 'relative'
-}));
+});
 /**
  * @ignore - do not document.
  */

package/node/CalendarPicker/PickersSlideTransition.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.slideAnimationDuration = void 0;
+exports.slideAnimationDuration = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 

package/node/CalendarPicker/index.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "calendarPickerClasses", {
   enumerable: true,
   get: function () {
-    return _CalendarPicker.default;
+    return _CalendarPicker.calendarPickerClasses;
   }
 });
-Object.defineProperty(exports, "calendarPickerClasses", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _CalendarPicker.calendarPickerClasses;
+    return _CalendarPicker.default;
   }
 });
 

package/node/CalendarPicker/useCalendarState.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCalendarState = useCalendarState;
 exports.createCalendarStateReducer = void 0;
+exports.useCalendarState = useCalendarState;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 

package/node/CalendarPickerSkeleton/CalendarPickerSkeleton.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getCalendarPickerSkeletonUtilityClass = getCalendarPickerSkeletonUtilityClass;
 exports.default = exports.calendarPickerSkeletonClasses = void 0;
+exports.getCalendarPickerSkeletonUtilityClass = getCalendarPickerSkeletonUtilityClass;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -171,7 +171,7 @@ process.env.NODE_ENV !== "production" ? CalendarPickerSkeleton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = CalendarPickerSkeleton;
 exports.default = _default;

package/node/CalendarPickerSkeleton/index.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "calendarPickerSkeletonClasses", {
   enumerable: true,
   get: function () {
-    return _CalendarPickerSkeleton.default;
+    return _CalendarPickerSkeleton.calendarPickerSkeletonClasses;
   }
 });
-Object.defineProperty(exports, "calendarPickerSkeletonClasses", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _CalendarPickerSkeleton.calendarPickerSkeletonClasses;
+    return _CalendarPickerSkeleton.default;
   }
 });
 Object.defineProperty(exports, "getCalendarPickerSkeletonUtilityClass", {

package/node/ClockPicker/ClockPicker.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getClockPickerUtilityClass = getClockPickerUtilityClass;
 exports.default = exports.clockPickerClasses = void 0;
+exports.getClockPickerUtilityClass = getClockPickerUtilityClass;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 

package/node/ClockPicker/index.js

@@ -5,16 +5,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "clockPickerClasses", {
   enumerable: true,
   get: function () {
-    return _ClockPickerStandalone.default;
+    return _ClockPicker.clockPickerClasses;
   }
 });
-Object.defineProperty(exports, "clockPickerClasses", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _ClockPicker.clockPickerClasses;
+    return _ClockPickerStandalone.default;
   }
 });
 

package/node/ClockPicker/shared.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getHours = exports.getMinutes = exports.CLOCK_HOUR_WIDTH = exports.CLOCK_WIDTH = void 0;
+exports.getMinutes = exports.getHours = exports.CLOCK_WIDTH = exports.CLOCK_HOUR_WIDTH = void 0;
 const CLOCK_WIDTH = 220;
 exports.CLOCK_WIDTH = CLOCK_WIDTH;
 const CLOCK_HOUR_WIDTH = 36;

package/node/DatePicker/DatePicker.js

@@ -354,6 +354,11 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
 
+  /**
+   * Paper props passed down to [Paper](https://mui.com/api/paper/) component.
+   */
+  PaperProps: _propTypes.default.object,
+
   /**
    * Popper props passed down to [Popper](https://mui.com/api/popper/) component.
    */

package/node/DatePicker/shared.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.isYearOnlyView = exports.isYearAndMonthViews = void 0;
 exports.useDatePickerDefaultizedProps = useDatePickerDefaultizedProps;
-exports.isYearAndMonthViews = exports.isYearOnlyView = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 

package/node/DateRangePicker/DateRangePicker.js

@@ -407,6 +407,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
 
+  /**
+   * Paper props passed down to [Paper](https://mui.com/api/paper/) component.
+   */
+  PaperProps: _propTypes.default.object,
+
   /**
    * Popper props passed down to [Popper](https://mui.com/api/popper/) component.
    */

package/node/DateRangePickerDay/DateRangePickerDay.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDateRangePickerDayUtilityClass = getDateRangePickerDayUtilityClass;
 exports.default = exports.dateRangePickerDayClasses = void 0;
+exports.getDateRangePickerDayUtilityClass = getDateRangePickerDayUtilityClass;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -253,7 +253,7 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDay.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 /**
  *

package/node/DateTimePicker/DateTimePicker.js

@@ -423,6 +423,11 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
 
+  /**
+   * Paper props passed down to [Paper](https://mui.com/api/paper/) component.
+   */
+  PaperProps: _propTypes.default.object,
+
   /**
    * Popper props passed down to [Popper](https://mui.com/api/popper/) component.
    */

package/node/DesktopDatePicker/DesktopDatePicker.js

@@ -33,7 +33,7 @@ var _usePickerState = require("../internal/pickers/hooks/usePickerState");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["onChange", "PopperProps", "ToolbarComponent", "TransitionComponent", "value"];
+const _excluded = ["onChange", "PopperProps", "PaperProps", "ToolbarComponent", "TransitionComponent", "value"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -66,6 +66,7 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
   } = (0, _usePickerState.usePickerState)(props, valueManager);
   const {
     PopperProps,
+    PaperProps,
     ToolbarComponent = _DatePickerToolbar.default,
     TransitionComponent
   } = props,
@@ -78,6 +79,7 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
     DateInputProps: AllDateInputProps,
     KeyboardDateInputComponent: _KeyboardDateInput.KeyboardDateInput,
     PopperProps: PopperProps,
+    PaperProps: PaperProps,
     TransitionComponent: TransitionComponent,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker.default, (0, _extends2.default)({}, pickerProps, {
       autoFocus: true,
@@ -329,6 +331,11 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
 
+  /**
+   * Paper props passed down to [Paper](https://mui.com/api/paper/) component.
+   */
+  PaperProps: _propTypes.default.object,
+
   /**
    * Popper props passed down to [Popper](https://mui.com/api/popper/) component.
    */

package/node/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -373,6 +373,11 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
 
+  /**
+   * Paper props passed down to [Paper](https://mui.com/api/paper/) component.
+   */
+  PaperProps: _propTypes.default.object,
+
   /**
    * Popper props passed down to [Popper](https://mui.com/api/popper/) component.
    */

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -398,6 +398,11 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
 
+  /**
+   * Paper props passed down to [Paper](https://mui.com/api/paper/) component.
+   */
+  PaperProps: _propTypes.default.object,
+
   /**
    * Popper props passed down to [Popper](https://mui.com/api/popper/) component.
    */

package/node/DesktopTimePicker/DesktopTimePicker.js

@@ -271,6 +271,11 @@ process.env.NODE_ENV !== "production" ? DesktopTimePicker.propTypes
    */
   onOpen: _propTypes.default.func,
 
+  /**
+   * Callback fired on view change.
+   */
+  onViewChange: _propTypes.default.func,
+
   /**
    * Control the popup or dialog open state.
    */
@@ -291,6 +296,11 @@ process.env.NODE_ENV !== "production" ? DesktopTimePicker.propTypes
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
 
+  /**
+   * Paper props passed down to [Paper](https://mui.com/api/paper/) component.
+   */
+  PaperProps: _propTypes.default.object,
+
   /**
    * Popper props passed down to [Popper](https://mui.com/api/popper/) component.
    */

package/node/LoadingButton/LoadingButton.js

@@ -84,6 +84,22 @@ const LoadingButtonRoot = (0, _styles.styled)(_Button.default, {
   [`&.${_loadingButtonClasses.default.loading}`]: {
     color: 'transparent'
   }
+}, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
+  [`& .${_loadingButtonClasses.default.startIconLoadingStart}, & .${_loadingButtonClasses.default.endIconLoadingEnd}`]: {
+    transition: theme.transitions.create(['opacity'], {
+      duration: theme.transitions.duration.short
+    }),
+    opacity: 0,
+    marginRight: -8
+  }
+}, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
+  [`& .${_loadingButtonClasses.default.startIconLoadingStart}, & .${_loadingButtonClasses.default.endIconLoadingEnd}`]: {
+    transition: theme.transitions.create(['opacity'], {
+      duration: theme.transitions.duration.short
+    }),
+    opacity: 0,
+    marginLeft: -8
+  }
 }));
 const LoadingButtonLoadingIndicator = (0, _styles.styled)('div', {
   name: 'MuiLoadingButton',
@@ -109,6 +125,12 @@ const LoadingButtonLoadingIndicator = (0, _styles.styled)('div', {
   color: theme.palette.action.disabled
 }, ownerState.loadingPosition === 'end' && {
   right: 14
+}, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
+  position: 'relative',
+  left: -10
+}, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
+  position: 'relative',
+  right: -10
 }));
 const LoadingIndicator = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
   color: "inherit",
@@ -134,17 +156,25 @@ const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inPro
     loadingPosition
   });
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(LoadingButtonRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingButtonRoot, (0, _extends2.default)({
     disabled: disabled || loading,
     ref: ref
   }, other, {
     classes: classes,
     ownerState: ownerState,
-    children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingButtonLoadingIndicator, {
-      className: classes.loadingIndicator,
-      ownerState: ownerState,
-      children: loadingIndicator
-    }), children]
+    children: ownerState.loadingPosition === 'end' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [children, loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingButtonLoadingIndicator, {
+        className: classes.loadingIndicator,
+        ownerState: ownerState,
+        children: loadingIndicator
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingButtonLoadingIndicator, {
+        className: classes.loadingIndicator,
+        ownerState: ownerState,
+        children: loadingIndicator
+      }), children]
+    })
   }));
 });
 process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
@@ -202,7 +232,7 @@ process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = LoadingButton;
 exports.default = _default;

package/node/LoadingButton/loadingButtonClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getLoadingButtonUtilityClass = getLoadingButtonUtilityClass;
 exports.default = void 0;
+exports.getLoadingButtonUtilityClass = getLoadingButtonUtilityClass;
 
 var _core = require("@mui/core");