@mui/x-date-pickers 8.0.0-alpha.2 → 8.0.0-alpha.4

package/node/TimeClock/ClockPointer.js

@@ -14,12 +14,10 @@ var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _shared = require("./shared");
 var _clockPointerClasses = require("./clockPointerClasses");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "hasSelected", "isInner", "type", "viewValue"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["className", "classes", "isBetweenTwoClockValues", "isInner", "type", "viewValue"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     thumb: ['thumb']
@@ -41,7 +39,7 @@ const ClockPointerRoot = (0, _styles.styled)('div', {
   transformOrigin: 'center bottom 0px',
   variants: [{
     props: {
-      shouldAnimate: true
+      isClockPointerAnimated: true
     },
     style: {
       transition: theme.transitions.create(['transform', 'height'])
@@ -66,7 +64,7 @@ const ClockPointerThumb = (0, _styles.styled)('div', {
   boxSizing: 'content-box',
   variants: [{
     props: {
-      hasSelected: true
+      isBetweenTwoClockValues: false
     },
     style: {
       backgroundColor: (theme.vars || theme).palette.primary.main
@@ -84,6 +82,8 @@ function ClockPointer(inProps) {
   });
   const {
       className,
+      classes: classesProp,
+      isBetweenTwoClockValues,
       isInner,
       type,
       viewValue
@@ -93,10 +93,14 @@ function ClockPointer(inProps) {
   React.useEffect(() => {
     previousType.current = type;
   }, [type]);
-  const ownerState = (0, _extends2.default)({}, props, {
-    shouldAnimate: previousType.current !== type
+  const {
+    ownerState: pickerOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, pickerOwnerState, {
+    isClockPointerAnimated: previousType.current !== type,
+    isClockPointerBetweenTwoValues: isBetweenTwoClockValues
   });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   const getAngleStyle = () => {
     const max = type === 'hours' ? 12 : 60;
     let angle = 360 / max * viewValue;

package/node/TimeClock/TimeClock.js

@@ -27,12 +27,10 @@ var _ClockNumbers = require("./ClockNumbers");
 var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _useClockReferenceDate = require("../internals/hooks/useClockReferenceDate");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "ampmInClock", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "showViewSwitcher", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "timezone"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["ampm", "ampmInClock", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "showViewSwitcher", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "classes", "disabled", "readOnly", "timezone"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     arrowSwitcher: ['arrowSwitcher']
@@ -100,6 +98,7 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
       focusedView,
       onFocusedViewChange,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       timezone: timezoneProp
@@ -127,6 +126,10 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
   });
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const now = (0, _useUtils.useNow)(timezone);
+  const selectedId = (0, _utils.unstable_useId)();
+  const {
+    ownerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const {
     view,
     setView,
@@ -221,7 +224,6 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
         throw new Error('not supported');
     }
   }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
-  const selectedId = (0, _utils.unstable_useId)();
   const viewProps = React.useMemo(() => {
     switch (view) {
       case 'hours':
@@ -286,8 +288,7 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
         throw new Error('You must provide the type for ClockView');
     }
   }, [view, utils, value, ampm, translations.hoursClockNumberText, translations.minutesClockNumberText, translations.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, isTimeDisabled, selectedId, disabled]);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TimeClockRoot, (0, _extends2.default)({
     ref: ref,
     className: (0, _clsx.default)(classes.root, className),

package/node/TimePicker/TimePickerToolbar.js

@@ -12,7 +12,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _RtlProvider = require("@mui/system/RtlProvider");
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _PickersToolbarText = require("../internals/components/PickersToolbarText");
@@ -25,19 +24,19 @@ var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
 var _timePickerToolbarClasses = require("./timePickerToolbarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
 var _hooks = require("../hooks");
+var _useToolbarOwnerState = require("../internals/hooks/useToolbarOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "className"];
-const useUtilityClasses = ownerState => {
+const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "className", "classes"];
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    isLandscape,
-    classes,
-    isRtl
+    pickerOrientation,
+    toolbarDirection
   } = ownerState;
   const slots = {
     root: ['root'],
     separator: ['separator'],
-    hourMinuteLabel: ['hourMinuteLabel', isLandscape && 'hourMinuteLabelLandscape', isRtl && 'hourMinuteLabelReverse'],
-    ampmSelection: ['ampmSelection', isLandscape && 'ampmLandscape'],
+    hourMinuteLabel: ['hourMinuteLabel', pickerOrientation === 'landscape' && 'hourMinuteLabelLandscape', toolbarDirection === 'rtl' && 'hourMinuteLabelReverse'],
+    ampmSelection: ['ampmSelection', pickerOrientation === 'landscape' && 'ampmLandscape'],
     ampmLabel: ['ampmLabel']
   };
   return (0, _composeClasses.default)(slots, _timePickerToolbarClasses.getTimePickerToolbarUtilityClass, classes);
@@ -69,14 +68,14 @@ const TimePickerToolbarHourMinuteLabel = (0, _styles.styled)('div', {
   alignItems: 'flex-end',
   variants: [{
     props: {
-      isRtl: true
+      toolbarDirection: 'rtl'
     },
     style: {
       flexDirection: 'row-reverse'
     }
   }, {
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       marginTop: 'auto'
@@ -101,7 +100,7 @@ const TimePickerToolbarAmPmSelection = (0, _styles.styled)('div', {
   },
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       margin: '4px 0 auto',
@@ -136,12 +135,14 @@ function TimePickerToolbar(inProps) {
       view,
       onViewChange,
       views,
-      className
+      className,
+      classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const utils = (0, _useUtils.useUtils)();
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
-  const isRtl = (0, _RtlProvider.useRtl)();
+  const ownerState = (0, _useToolbarOwnerState.useToolbarOwnerState)();
+  const classes = useUtilityClasses(classesProp, ownerState);
   const {
     disabled,
     readOnly
@@ -152,10 +153,6 @@ function TimePickerToolbar(inProps) {
     handleMeridiemChange
   } = (0, _dateHelpersHooks.useMeridiemMode)(value, ampm, onChange);
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
-  const ownerState = (0, _extends2.default)({}, props, {
-    isRtl
-  });
-  const classes = useUtilityClasses(ownerState);
   const separator = /*#__PURE__*/(0, _jsxRuntime.jsx)(TimePickerToolbarSeparator, {
     tabIndex: -1,
     value: ":",

package/node/hooks/useClearableField.js

@@ -15,11 +15,13 @@ var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
 var _icons = require("../icons");
 var _usePickerTranslations = require("./usePickerTranslations");
+var _useFieldOwnerState = require("../internals/hooks/useFieldOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["clearable", "onClear", "InputProps", "sx", "slots", "slotProps"],
   _excluded2 = ["ownerState"];
 const useClearableField = props => {
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
+  const ownerState = (0, _useFieldOwnerState.useFieldOwnerState)(props);
   const {
       clearable,
       onClear,
@@ -34,7 +36,7 @@ const useClearableField = props => {
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: IconButton,
       externalSlotProps: slotProps?.clearButton,
-      ownerState: {},
+      ownerState,
       className: 'clearButton',
       additionalProps: {
         title: translations.fieldClearLabel,
@@ -46,7 +48,7 @@ const useClearableField = props => {
   const endClearIconProps = (0, _useSlotProps2.default)({
     elementType: EndClearIcon,
     externalSlotProps: slotProps?.clearIcon,
-    ownerState: {}
+    ownerState
   });
   return (0, _extends2.default)({}, other, {
     InputProps: (0, _extends2.default)({}, InputProps, {

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.0.0-alpha.2
+ * @mui/x-date-pickers v8.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/components/PickersPopper.js

@@ -20,12 +20,10 @@ var _styles = require("@mui/material/styles");
 var _pickersPopperClasses = require("./pickersPopperClasses");
 var _utils2 = require("../utils/utils");
 var _useDefaultReduceAnimations = require("../hooks/useDefaultReduceAnimations");
+var _usePickerPrivateContext = require("../hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["PaperComponent", "popperPlacement", "ownerState", "children", "paperSlotProps", "paperClasses", "onPaperClick", "onPaperTouchStart"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["PaperComponent", "ownerState", "children", "paperSlotProps", "paperClasses", "onPaperClick", "onPaperTouchStart"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     paper: ['paper']
@@ -50,8 +48,8 @@ const PickersPopperPaper = (0, _styles.styled)(_Paper.default, {
   transformOrigin: 'top center',
   variants: [{
     props: ({
-      placement
-    }) => ['top', 'top-start', 'top-end'].includes(placement),
+      popperPlacement
+    }) => ['top', 'top-start', 'top-end'].includes(popperPlacement),
     style: {
       transformOrigin: 'bottom center'
     }
@@ -175,8 +173,7 @@ function useClickAwayListener(active, onClickAway) {
 const PickersPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
       PaperComponent,
-      popperPlacement,
-      ownerState: inOwnerState,
+      ownerState,
       children,
       paperSlotProps,
       paperClasses,
@@ -186,9 +183,6 @@ const PickersPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) =>
       // https://mui.com/material-ui/transitions/#child-requirement
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, inOwnerState, {
-    placement: popperPlacement
-  });
   const paperProps = (0, _useSlotProps.default)({
     elementType: PaperComponent,
     externalSlotProps: paperSlotProps,
@@ -227,10 +221,11 @@ function PickersPopper(inProps) {
     onDismiss,
     open,
     role,
-    placement,
+    placement = 'bottom',
     slots,
     slotProps,
-    reduceAnimations: inReduceAnimations
+    reduceAnimations: inReduceAnimations,
+    classes: classesProp
   } = props;
   React.useEffect(() => {
     function handleKeyDown(nativeEvent) {
@@ -264,10 +259,15 @@ function PickersPopper(inProps) {
   const paperRef = React.useRef(null);
   const handleRef = (0, _utils.unstable_useForkRef)(paperRef, containerRef);
   const handlePaperRef = (0, _utils.unstable_useForkRef)(handleRef, clickAwayRef);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   const defaultReduceAnimations = (0, _useDefaultReduceAnimations.useDefaultReduceAnimations)();
   const reduceAnimations = inReduceAnimations ?? defaultReduceAnimations;
+  const {
+    ownerState: pickerOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, pickerOwnerState, {
+    popperPlacement: placement
+  });
   const handleKeyDown = event => {
     if (event.key === 'Escape') {
       // stop the propagation to avoid closing parent modal
@@ -291,12 +291,11 @@ function PickersPopper(inProps) {
       onKeyDown: handleKeyDown
     },
     className: classes.root,
-    ownerState: props
+    ownerState
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Popper, (0, _extends2.default)({}, popperProps, {
     children: ({
-      TransitionProps,
-      placement: popperPlacement
+      TransitionProps
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(FocusTrap, (0, _extends2.default)({
       open: open,
       disableAutoFocus: true
@@ -312,7 +311,6 @@ function PickersPopper(inProps) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersPopperPaperWrapper, {
           PaperComponent: Paper,
           ownerState: ownerState,
-          popperPlacement: popperPlacement,
           ref: handlePaperRef,
           onPaperClick: onPaperClick,
           onPaperTouchStart: onPaperTouchStart,

package/node/internals/components/PickersToolbar.js

@@ -13,13 +13,12 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _createStyled = require("@mui/system/createStyled");
 var _pickersToolbarClasses = require("./pickersToolbarClasses");
+var _useToolbarOwnerState = require("../hooks/useToolbarOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "toolbarTitle", "hidden", "titleId", "isLandscape", "classes", "landscapeDirection"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["children", "className", "classes", "toolbarTitle", "hidden", "titleId", "isLandscape", "classes", "landscapeDirection"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     content: ['content']
@@ -40,7 +39,7 @@ const PickersToolbarRoot = (0, _styles.styled)('div', {
   padding: theme.spacing(2, 3),
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       height: 'auto',
@@ -54,7 +53,8 @@ const PickersToolbarRoot = (0, _styles.styled)('div', {
 const PickersToolbarContent = (0, _styles.styled)('div', {
   name: 'MuiPickersToolbar',
   slot: 'Content',
-  overridesResolver: (props, styles) => styles.content
+  overridesResolver: (props, styles) => styles.content,
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'landscapeDirection'
 })({
   display: 'flex',
   flexWrap: 'wrap',
@@ -65,7 +65,7 @@ const PickersToolbarContent = (0, _styles.styled)('div', {
   flexDirection: 'row',
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       justifyContent: 'flex-start',
@@ -74,7 +74,7 @@ const PickersToolbarContent = (0, _styles.styled)('div', {
     }
   }, {
     props: {
-      isLandscape: true,
+      pickerOrientation: 'landscape',
       landscapeDirection: 'row'
     },
     style: {
@@ -90,13 +90,15 @@ const PickersToolbar = exports.PickersToolbar = /*#__PURE__*/React.forwardRef(fu
   const {
       children,
       className,
+      classes: classesProp,
       toolbarTitle,
       hidden,
-      titleId
+      titleId,
+      landscapeDirection
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = (0, _useToolbarOwnerState.useToolbarOwnerState)();
+  const classes = useUtilityClasses(classesProp);
   if (hidden) {
     return null;
   }
@@ -113,6 +115,7 @@ const PickersToolbar = exports.PickersToolbar = /*#__PURE__*/React.forwardRef(fu
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersToolbarContent, {
       className: classes.content,
       ownerState: ownerState,
+      landscapeDirection: landscapeDirection,
       children: children
     })]
   }));

package/node/internals/components/PickersToolbarButton.js

@@ -16,11 +16,8 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _PickersToolbarText = require("./PickersToolbarText");
 var _pickersToolbarClasses = require("./pickersToolbarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["align", "className", "selected", "typographyClassName", "value", "variant", "width"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["align", "className", "classes", "selected", "typographyClassName", "value", "variant", "width"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -43,6 +40,7 @@ const PickersToolbarButton = exports.PickersToolbarButton = /*#__PURE__*/React.f
   const {
       align,
       className,
+      classes: classesProp,
       selected,
       typographyClassName,
       value,
@@ -50,7 +48,7 @@ const PickersToolbarButton = exports.PickersToolbarButton = /*#__PURE__*/React.f
       width
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersToolbarButtonRoot, (0, _extends2.default)({
     variant: "text",
     ref: ref,

package/node/internals/components/PickersToolbarText.js

@@ -15,29 +15,23 @@ var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _pickersToolbarTextClasses = require("./pickersToolbarTextClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "selected", "value"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    selected
-  } = ownerState;
+const _excluded = ["className", "classes", "selected", "value"];
+const useUtilityClasses = classes => {
   const slots = {
-    root: ['root', selected && 'selected']
+    root: ['root']
   };
   return (0, _composeClasses.default)(slots, _pickersToolbarTextClasses.getPickersToolbarTextUtilityClass, classes);
 };
 const PickersToolbarTextRoot = (0, _styles.styled)(_Typography.default, {
   name: 'MuiPickersToolbarText',
   slot: 'Root',
-  overridesResolver: (_, styles) => [styles.root, {
-    [`&.${_pickersToolbarTextClasses.pickersToolbarTextClasses.selected}`]: styles.selected
-  }]
+  overridesResolver: (_, styles) => [styles.root]
 })(({
   theme
 }) => ({
   transition: theme.transitions.create('color'),
   color: (theme.vars || theme).palette.text.secondary,
-  [`&.${_pickersToolbarTextClasses.pickersToolbarTextClasses.selected}`]: {
+  [`&[data-selected]`]: {
     color: (theme.vars || theme).palette.text.primary
   }
 }));
@@ -48,14 +42,18 @@ const PickersToolbarText = exports.PickersToolbarText = /*#__PURE__*/React.forwa
   });
   const {
       className,
+      classes: classesProp,
+      selected,
       value
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersToolbarTextRoot, (0, _extends2.default)({
     ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     component: "span"
+  }, selected && {
+    'data-selected': true
   }, other, {
     children: value
   }));

package/node/internals/hooks/useOpenState.js

@@ -12,7 +12,7 @@ const useOpenState = ({
   onClose
 }) => {
   const isControllingOpenProp = React.useRef(typeof open === 'boolean').current;
-  const [openState, setIsOpenState] = React.useState(false);
+  const [openState, setOpenState] = React.useState(false);
 
   // It is required to update inner state in useEffect in order to avoid situation when
   // Our component is not mounted yet, but `open` state is set to `true` (for example initially opened)
@@ -21,23 +21,24 @@ const useOpenState = ({
       if (typeof open !== 'boolean') {
         throw new Error('You must not mix controlling and uncontrolled mode for `open` prop');
       }
-      setIsOpenState(open);
+      setOpenState(open);
     }
   }, [isControllingOpenProp, open]);
-  const setIsOpen = React.useCallback(newIsOpen => {
+  const setOpen = React.useCallback(action => {
+    const newOpen = typeof action === 'function' ? action(openState) : action;
     if (!isControllingOpenProp) {
-      setIsOpenState(newIsOpen);
+      setOpenState(newOpen);
     }
-    if (newIsOpen && onOpen) {
+    if (newOpen && onOpen) {
       onOpen();
     }
-    if (!newIsOpen && onClose) {
+    if (!newOpen && onClose) {
       onClose();
     }
-  }, [isControllingOpenProp, onOpen, onClose]);
+  }, [isControllingOpenProp, onOpen, onClose, openState]);
   return {
-    isOpen: openState,
-    setIsOpen
+    open: openState,
+    setOpen
   };
 };
 exports.useOpenState = useOpenState;

package/node/internals/hooks/usePicker/usePicker.js

@@ -44,11 +44,11 @@ const usePicker = ({
   });
   const providerProps = (0, _usePickerProvider.usePickerProvider)({
     props,
-    pickerValueResponse,
     localeText,
     valueManager,
     variant,
-    views: pickerViewsResponse.views
+    paramsFromUsePickerValue: pickerValueResponse.provider,
+    paramsFromUsePickerViews: pickerViewsResponse.provider
   });
   return {
     // Picker value
@@ -57,7 +57,7 @@ const usePicker = ({
     fieldProps: pickerValueResponse.fieldProps,
     // Picker views
     renderCurrentView: pickerViewsResponse.renderCurrentView,
-    hasUIView: pickerViewsResponse.hasUIView,
+    hasUIView: pickerViewsResponse.provider.hasUIView,
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
     // Picker layout
     layoutProps: (0, _extends2.default)({}, pickerViewsResponse.layoutProps, pickerValueResponse.layoutProps),

package/node/internals/hooks/usePicker/usePickerProvider.js

@@ -1,12 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePickerOrientation = void 0;
 exports.usePickerProvider = usePickerProvider;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useUtils = require("../useUtils");
@@ -46,31 +47,28 @@ exports.usePickerOrientation = usePickerOrientation;
 function usePickerProvider(parameters) {
   const {
     props,
-    pickerValueResponse,
     valueManager,
     localeText,
     variant,
-    views
+    paramsFromUsePickerValue,
+    paramsFromUsePickerViews
   } = parameters;
   const utils = (0, _useUtils.useUtils)();
-  const orientation = usePickerOrientation(views, props.orientation);
+  const orientation = usePickerOrientation(paramsFromUsePickerViews.views, props.orientation);
   const ownerState = React.useMemo(() => ({
-    isPickerValueEmpty: valueManager.areValuesEqual(utils, pickerValueResponse.viewProps.value, valueManager.emptyValue),
-    isPickerOpen: pickerValueResponse.open,
+    isPickerValueEmpty: valueManager.areValuesEqual(utils, paramsFromUsePickerValue.value, valueManager.emptyValue),
+    isPickerOpen: paramsFromUsePickerValue.contextValue.open,
     isPickerDisabled: props.disabled ?? false,
     isPickerReadOnly: props.readOnly ?? false,
     pickerOrientation: orientation,
     pickerVariant: variant
-  }), [utils, valueManager, pickerValueResponse.viewProps.value, pickerValueResponse.open, orientation, variant, props.disabled, props.readOnly]);
-  const contextValue = React.useMemo(() => ({
-    onOpen: pickerValueResponse.actions.onOpen,
-    onClose: pickerValueResponse.actions.onClose,
-    open: pickerValueResponse.open,
+  }), [utils, valueManager, paramsFromUsePickerValue.value, paramsFromUsePickerValue.contextValue.open, orientation, variant, props.disabled, props.readOnly]);
+  const contextValue = React.useMemo(() => (0, _extends2.default)({}, paramsFromUsePickerValue.contextValue, {
     disabled: props.disabled ?? false,
     readOnly: props.readOnly ?? false,
     variant,
     orientation
-  }), [pickerValueResponse.actions.onOpen, pickerValueResponse.actions.onClose, pickerValueResponse.open, variant, orientation, props.disabled, props.readOnly]);
+  }), [paramsFromUsePickerValue.contextValue, variant, orientation, props.disabled, props.readOnly]);
   const privateContextValue = React.useMemo(() => ({
     ownerState
   }), [ownerState]);
@@ -82,6 +80,10 @@ function usePickerProvider(parameters) {
 }
 
 /**
- * Props used to create the private context.
+ * Props used to create the picker's contexts.
  * Those props are exposed on all the pickers.
+ */
+
+/**
+ * Props used to create the picker's contexts and that are not available on static pickers.
  */