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

package/legacy/internal/pickers/PickersPopper.js

@@ -1,3 +1,4 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
@@ -83,7 +84,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
 
@@ -159,7 +161,9 @@ var PickersPopper = function PickersPopper(props) {
       role = props.role,
       _props$TransitionComp = props.TransitionComponent,
       TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
-      TrapFocusProps = props.TrapFocusProps;
+      TrapFocusProps = props.TrapFocusProps,
+      _props$PaperProps = props.PaperProps,
+      PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps;
   React.useEffect(function () {
     function handleKeyDown(nativeEvent) {
       // IE11, Edge (prior to using Bink?) use 'Esc'
@@ -196,6 +200,11 @@ var PickersPopper = function PickersPopper(props) {
   var handleRef = useForkRef(paperRef, containerRef);
   var handlePaperRef = useForkRef(handleRef, clickAwayRef);
   var ownerState = props;
+
+  var onPaperClickProp = PaperProps.onClick,
+      onPaperTouchStartProp = PaperProps.onTouchStart,
+      otherPaperProps = _objectWithoutProperties(PaperProps, ["onClick", "onTouchStart"]);
+
   return /*#__PURE__*/_jsx(PickersPopperRoot, _extends({
     transition: true,
     role: role,
@@ -215,17 +224,30 @@ var PickersPopper = function PickersPopper(props) {
         }
       }, 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: function onClick(event) {
+              onPaperClick(event);
+
+              if (onPaperClickProp) {
+                onPaperClickProp(event);
+              }
+            },
+            onTouchStart: function onTouchStart(event) {
+              onPaperTouchStart(event);
+
+              if (onPaperTouchStartProp) {
+                onPaperTouchStartProp(event);
+              }
+            },
             ownerState: _extends({}, ownerState, {
               placement: placement
-            }),
+            })
+          }, otherPaperProps, {
             children: _children
-          })
+          }))
         }))
       }));
     }

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

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _get from "@babel/runtime/helpers/esm/get";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
@@ -14,7 +12,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 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
 
@@ -31,21 +28,35 @@ export var AdapterClassToUse = /*#__PURE__*/function (_AdapterDateFns) {
   var _super = _createSuper(AdapterClassToUse);
 
   function AdapterClassToUse() {
+    var _this;
+
     _classCallCheck(this, AdapterClassToUse);
 
-    return _super.apply(this, arguments);
-  }
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-  _createClass(AdapterClassToUse, [{
-    key: "date",
-    value: function date(value) {
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.date = function (value) {
       if (typeof value === 'string') {
         return parseISO(value);
       }
 
-      return _get(_getPrototypeOf(AdapterClassToUse.prototype), "date", this).call(this, 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);
+    };
+
+    return _this;
+  }
 
   return AdapterClassToUse;
 }(AdapterDateFns);
@@ -90,28 +101,6 @@ export function createPickerRender() {
     }));
   };
 }
-export var queryByMuiTest = queryHelpers.queryByAttribute.bind(null, 'data-mui-test');
-export var queryAllByMuiTest = queryHelpers.queryAllByAttribute.bind(null, 'data-mui-test');
-export function getAllByMuiTest(id) {
-  var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;
-  var options = arguments.length > 2 ? arguments[2] : undefined;
-  var els = queryAllByMuiTest(container, id, options);
-
-  if (!els.length) {
-    throw queryHelpers.getElementError("Unable to find an element by: [data-mui-test=\"".concat(id, "\"]"), container);
-  }
-
-  return els;
-}
-export function getByMuiTest() {
-  var result = getAllByMuiTest.apply(void 0, arguments);
-
-  if (result.length > 0) {
-    return result[0];
-  }
-
-  throw queryHelpers.getElementError("Unable to find an element by: [data-mui-test=\"".concat(arguments.length <= 0 ? undefined : arguments[0], "\"]"), document.body);
-}
 export function openMobilePicker() {
   fireEvent.click(screen.getByRole('textbox'));
 }

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

@@ -13,6 +13,7 @@ function DesktopWrapper(props) {
       onDismiss = props.onDismiss,
       open = props.open,
       PopperProps = props.PopperProps,
+      PaperProps = props.PaperProps,
       TransitionComponent = props.TransitionComponent;
   var ownInputRef = React.useRef(null);
   var inputRef = useForkRef(DateInputProps.inputRef, ownInputRef);
@@ -26,6 +27,7 @@ function DesktopWrapper(props) {
       anchorEl: ownInputRef.current,
       TransitionComponent: TransitionComponent,
       PopperProps: PopperProps,
+      PaperProps: PaperProps,
       onClose: onDismiss,
       children: children
     })]

package/modern/CalendarPicker/PickersFadeTransitionGroup.js

@@ -9,10 +9,10 @@ const classes = generateUtilityClasses('PrivatePickersFadeTransitionGroup', ['ro
 const animationDuration = 500;
 const PickersFadeTransitionGroupRoot = styled(TransitionGroup, {
   skipSx: true
-})(() => ({
+})({
   display: 'block',
   position: 'relative'
-}));
+});
 /**
  * @ignore - do not document.
  */

package/modern/CalendarPickerSkeleton/CalendarPickerSkeleton.js

@@ -144,6 +144,6 @@ process.env.NODE_ENV !== "production" ? CalendarPickerSkeleton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default CalendarPickerSkeleton;

package/modern/DatePicker/DatePicker.js

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

package/modern/DateRangePicker/DateRangePicker.js

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

package/modern/DateRangePickerDay/DateRangePickerDay.js

@@ -228,7 +228,7 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDay.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 /**
  *

package/modern/DateTimePicker/DateTimePicker.js

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

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onChange", "PopperProps", "ToolbarComponent", "TransitionComponent", "value"];
+const _excluded = ["onChange", "PopperProps", "PaperProps", "ToolbarComponent", "TransitionComponent", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
@@ -40,6 +40,7 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
 
   const {
     PopperProps,
+    PaperProps,
     ToolbarComponent = DatePickerToolbar,
     TransitionComponent
   } = props,
@@ -54,6 +55,7 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
     DateInputProps: AllDateInputProps,
     KeyboardDateInputComponent: KeyboardDateInput,
     PopperProps: PopperProps,
+    PaperProps: PaperProps,
     TransitionComponent: TransitionComponent,
     children: /*#__PURE__*/_jsx(Picker, _extends({}, pickerProps, {
       autoFocus: true,
@@ -305,6 +307,11 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes
    */
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
 
+  /**
+   * Paper props passed down to [Paper](https://mui.com/api/paper/) component.
+   */
+  PaperProps: PropTypes.object,
+
   /**
    * Popper props passed down to [Popper](https://mui.com/api/popper/) component.
    */

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

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

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

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

package/modern/DesktopTimePicker/DesktopTimePicker.js

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

package/modern/LoadingButton/LoadingButton.js

@@ -60,6 +60,22 @@ const LoadingButtonRoot = styled(Button, {
   [`&.${loadingButtonClasses.loading}`]: {
     color: 'transparent'
   }
+}, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
+  [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
+    transition: theme.transitions.create(['opacity'], {
+      duration: theme.transitions.duration.short
+    }),
+    opacity: 0,
+    marginRight: -8
+  }
+}, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
+  [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
+    transition: theme.transitions.create(['opacity'], {
+      duration: theme.transitions.duration.short
+    }),
+    opacity: 0,
+    marginLeft: -8
+  }
 }));
 const LoadingButtonLoadingIndicator = styled('div', {
   name: 'MuiLoadingButton',
@@ -85,6 +101,12 @@ const LoadingButtonLoadingIndicator = 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__*/_jsx(CircularProgress, {
@@ -115,17 +137,25 @@ const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inPro
   });
 
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(LoadingButtonRoot, _extends({
+  return /*#__PURE__*/_jsx(LoadingButtonRoot, _extends({
     disabled: disabled || loading,
     ref: ref
   }, other, {
     classes: classes,
     ownerState: ownerState,
-    children: [loading && /*#__PURE__*/_jsx(LoadingButtonLoadingIndicator, {
-      className: classes.loadingIndicator,
-      ownerState: ownerState,
-      children: loadingIndicator
-    }), children]
+    children: ownerState.loadingPosition === 'end' ? /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [children, loading && /*#__PURE__*/_jsx(LoadingButtonLoadingIndicator, {
+        className: classes.loadingIndicator,
+        ownerState: ownerState,
+        children: loadingIndicator
+      })]
+    }) : /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [loading && /*#__PURE__*/_jsx(LoadingButtonLoadingIndicator, {
+        className: classes.loadingIndicator,
+        ownerState: ownerState,
+        children: loadingIndicator
+      }), children]
+    })
   }));
 });
 process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
@@ -183,6 +213,6 @@ process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default LoadingButton;