@mui/lab 5.0.0-alpha.65 → 5.0.0-alpha.69

package/node/internal/pickers/PickersPopper.js

@@ -25,6 +25,10 @@ var _utils = require("@mui/material/utils");
 
 var _styles = require("@mui/material/styles");
 
+var _Button2 = _interopRequireDefault(require("@mui/material/Button"));
+
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["onClick", "onTouchStart"];
@@ -33,16 +37,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const PickersPopperRoot = (0, _styles.styled)(_Popper.default, {
-  skipSx: true
-})(({
+const PickersPopperRoot = (0, _styles.styled)(_Popper.default)(({
   theme
 }) => ({
   zIndex: theme.zIndex.modal
 }));
-const PickersPopperPaper = (0, _styles.styled)(_Paper.default, {
-  skipSx: true
-})(({
+const PickersPopperPaper = (0, _styles.styled)(_Paper.default)(({
   ownerState
 }) => (0, _extends2.default)({
   transformOrigin: 'top center',
@@ -50,6 +50,16 @@ const PickersPopperPaper = (0, _styles.styled)(_Paper.default, {
 }, ownerState.placement === 'top' && {
   transformOrigin: 'bottom center'
 }));
+const PickersPopperAction = (0, _styles.styled)(_DialogActions.default)(({
+  ownerState
+}) => (0, _extends2.default)({}, ownerState.clearable ? {
+  justifyContent: 'flex-start',
+  '& > *:first-of-type': {
+    marginRight: 'auto'
+  }
+} : {
+  padding: 0
+}));
 
 function clickedRootScrollbar(event, doc) {
   return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
@@ -173,11 +183,16 @@ function useClickAwayListener(active, onClickAway) {
 }
 
 const PickersPopper = props => {
+  var _Button;
+
   const {
     anchorEl,
     children,
     containerRef = null,
     onClose,
+    onClear,
+    clearable = false,
+    clearText = 'Clear',
     open,
     PopperProps,
     role,
@@ -237,7 +252,7 @@ const PickersPopper = props => {
       isEnabled: () => true
     }, TrapFocusProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({}, TransitionProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersPopperPaper, (0, _extends2.default)({
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersPopperPaper, (0, _extends2.default)({
           tabIndex: -1,
           elevation: 8,
           ref: handlePaperRef,
@@ -259,7 +274,13 @@ const PickersPopper = props => {
             placement
           })
         }, otherPaperProps, {
-          children: children
+          children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersPopperAction, {
+            ownerState: ownerState,
+            children: clearable && (_Button || (_Button = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button2.default, {
+              onClick: onClear,
+              children: clearText
+            })))
+          })]
         }))
       }))
     }))

package/node/internal/pickers/PickersToolbar.js

@@ -38,9 +38,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const classes = (0, _base.generateUtilityClasses)('PrivatePickersToolbar', ['root', 'dateTitleContainer']);
-const PickersToolbarRoot = (0, _styles.styled)('div', {
-  skipSx: true
-})(({
+const PickersToolbarRoot = (0, _styles.styled)('div')(({
   theme,
   ownerState
 }) => (0, _extends2.default)({
@@ -56,9 +54,7 @@ const PickersToolbarRoot = (0, _styles.styled)('div', {
   justifyContent: 'flex-start',
   flexWrap: 'wrap'
 }));
-const PickersToolbarGrid = (0, _styles.styled)(_Grid.default, {
-  skipSx: true
-})({
+const PickersToolbarGrid = (0, _styles.styled)(_Grid.default)({
   flex: 1
 });
 

package/node/internal/pickers/PickersToolbarButton.js

@@ -27,9 +27,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const PickersToolbarButtonRoot = (0, _styles.styled)(_Button.default, {
-  skipSx: true
-})({
+const PickersToolbarButtonRoot = (0, _styles.styled)(_Button.default)({
   padding: 0,
   minWidth: 16,
   textTransform: 'none'

package/node/internal/pickers/PickersToolbarText.js

@@ -30,9 +30,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const classes = (0, _base.generateUtilityClasses)('PrivatePickersToolbarText', ['selected']);
-const PickersToolbarTextRoot = (0, _styles.styled)(_Typography.default, {
-  skipSx: true
-})(({
+const PickersToolbarTextRoot = (0, _styles.styled)(_Typography.default)(({
   theme
 }) => ({
   transition: theme.transitions.create('color'),

package/node/internal/pickers/hooks/usePickerState.js

@@ -60,9 +60,10 @@ function usePickerState(props, valueManager) {
       type: 'reset',
       payload: parsedDateValue
     });
-  } // Mobile keyboard view is a special case.
-  // When it's open picker should work like closed, cause we are just showing text field
+  }
 
+  const [initialDate, setInitialDate] = React.useState(draftState.committed); // Mobile keyboard view is a special case.
+  // When it's open picker should work like closed, cause we are just showing text field
 
   const [isMobileKeyboardViewOpen, setMobileKeyboardViewOpen] = React.useState(false);
   const acceptDate = React.useCallback((acceptedDate, needClosePicker) => {
@@ -70,6 +71,7 @@ function usePickerState(props, valueManager) {
 
     if (needClosePicker) {
       setIsOpen(false);
+      setInitialDate(acceptedDate);
 
       if (onAccept) {
         onAccept(acceptedDate);
@@ -80,7 +82,7 @@ function usePickerState(props, valueManager) {
     open: isOpen,
     onClear: () => acceptDate(valueManager.emptyValue, true),
     onAccept: () => acceptDate(draftState.draft, true),
-    onDismiss: () => setIsOpen(false),
+    onDismiss: () => acceptDate(initialDate, true),
     onSetToday: () => {
       const now = utils.date();
       dispatch({
@@ -89,7 +91,7 @@ function usePickerState(props, valueManager) {
       });
       acceptDate(now, !disableCloseOnSelect);
     }
-  }), [acceptDate, disableCloseOnSelect, isOpen, utils, draftState.draft, setIsOpen, valueManager.emptyValue]);
+  }), [acceptDate, disableCloseOnSelect, isOpen, utils, draftState.draft, valueManager.emptyValue, initialDate]);
   const pickerProps = React.useMemo(() => ({
     date: draftState.draft,
     isMobileKeyboardViewOpen,

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

@@ -32,7 +32,10 @@ function DesktopWrapper(props) {
     open,
     PopperProps,
     PaperProps,
-    TransitionComponent
+    TransitionComponent,
+    onClear,
+    clearText,
+    clearable
   } = props;
   const ownInputRef = React.useRef(null);
   const inputRef = (0, _utils.useForkRef)(DateInputProps.inputRef, ownInputRef);
@@ -48,6 +51,9 @@ function DesktopWrapper(props) {
       PopperProps: PopperProps,
       PaperProps: PaperProps,
       onClose: onDismiss,
+      onClear: onClear,
+      clearText: clearText,
+      clearable: clearable,
       children: children
     })]
   });

package/node/internal/pickers/wrappers/PickerStaticWrapper.js

@@ -51,8 +51,7 @@ const useUtilityClasses = ownerState => {
 const PickerStaticWrapperRoot = (0, _styles.styled)('div', {
   name: 'MuiPickerStaticWrapper',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root,
-  skipSx: true
+  overridesResolver: (props, styles) => styles.root
 })(({
   theme
 }) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/lab",
-  "version": "5.0.0-alpha.65",
+  "version": "5.0.0-alpha.69",
   "private": false,
   "author": "MUI Team",
   "description": "Laboratory for new MUI modules.",
@@ -15,12 +15,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui-org/material-ui.git",
+    "url": "https://github.com/mui/material-ui.git",
     "directory": "packages/mui-lab"
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/mui-org/material-ui/issues"
+    "url": "https://github.com/mui/material-ui/issues"
   },
   "homepage": "https://mui.com/components/about-the-lab/",
   "funding": {
@@ -55,14 +55,14 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
-    "@date-io/date-fns": "^2.11.0",
-    "@date-io/dayjs": "^2.11.0",
-    "@date-io/luxon": "^2.11.1",
-    "@date-io/moment": "^2.11.0",
-    "@mui/base": "5.0.0-alpha.65",
-    "@mui/system": "^5.3.0",
-    "@mui/utils": "^5.3.0",
+    "@babel/runtime": "^7.17.0",
+    "@date-io/date-fns": "^2.13.1",
+    "@date-io/dayjs": "^2.13.1",
+    "@date-io/luxon": "^2.13.1",
+    "@date-io/moment": "^2.13.1",
+    "@mui/base": "5.0.0-alpha.69",
+    "@mui/system": "^5.4.2",
+    "@mui/utils": "^5.4.2",
     "clsx": "^1.1.1",
     "prop-types": "^15.7.2",
     "react-is": "^17.0.2",