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

package/CHANGELOG.md

@@ -5,6 +5,108 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-alpha.3
+
+_Dec 5, 2024_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Support [Server-side lazy loading](https://mui.com/x/react-data-grid/server-side-data/lazy-loading/) on the Data Grid. Use [data source](https://mui.com/x/react-data-grid/server-side-data/#data-source) to fetch a range of rows on demand and update the rows in the same way as described in [Infinite loading](https://mui.com/x/react-data-grid/row-updates/#infinite-loading) and [Lazy loading](https://mui.com/x/react-data-grid/row-updates/#lazy-loading) without the need to use any additional event listeners and callbacks.
+- 🎯 Improved [data caching](https://mui.com/x/react-data-grid/server-side-data/#data-caching). Check out our [recommendations](https://mui.com/x/react-data-grid/server-side-data/#improving-the-cache-hit-rate) for improving the cache hit rate.
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@ihsanberkozcan, @k-rajat19, @perezShaked.
+Following are all team members who have contributed to this release:
+@arminmeh, @cherniavskii, @flaviendelangle, @JCQuintas, @MBilalShafi, @noraleonte.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- The "Select all" checkbox is now checked when all the selectable rows are selected, ignoring rows that are not selectable because of the `isRowSelectable` prop.
+- The `rowPositionsDebounceMs` prop was removed.
+- The `gridRowsDataRowIdToIdLookupSelector` selector was removed. Use the `gridRowsLookupSelector` selector in combination with the `getRowId()` API method instead.
+  ```diff
+  -const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
+  -const rowId = idToIdLookup[id]
+  +const rowsLookup = gridRowsLookupSelector(apiRef);
+  +const rowId = apiRef.current.getRowId(rowsLookup[id])
+  ```
+- The Grid is now more aligned with the WAI-ARIA authoring practices and sets the `role` attribute to `treegrid` if the Data Grid is used with row grouping feature.
+
+#### `@mui/x-data-grid@8.0.0-alpha.3`
+
+- [DataGrid] Fix deselection not working with `isRowSelectable` (#15692) @MBilalShafi
+- [DataGrid] Make column autosizing work with flex columns (#15465) @cherniavskii
+- [DataGrid] Remove `gridRowsDataRowIdToIdLookupSelector` selector (#15698) @arminmeh
+- [DataGrid] Remove `rowPositionsDebounceMs` prop (#15482) @k-rajat19
+- [l10n] Improve Hebrew (he-IL) locale (#15699) @perezShaked
+- [l10n] Improve Turkish (tr-TR) locale (#15734) @ihsanberkozcan
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.0.0-alpha.3`, plus:
+
+- [DataGridPro] Cleanup pinned rows on removal (#15697) @cherniavskii
+- [DataGridPro] Server-side lazy loading (#13878) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.3`, plus:
+
+- [DataGridPremium] Remove the `ariaV8` experimental flag (#15694) @arminmeh
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The `onOpen()` and `onClose()` methods of the `usePickerContext()` hook have been replaced with a single `setOpen` method — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#usepickercontext).
+
+#### `@mui/x-date-pickers@8.0.0-alpha.3`
+
+- [pickers] Replace the `onOpen()` and `onClose()` methods of `usePickerContext()` with a single `setOpen()` method. (#15701) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.0.0-alpha.3`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-alpha.3`
+
+- [charts] Improve SVG `pattern` and `gradient` support (#15720) @JCQuintas
+
+#### `@mui/x-charts-pro@8.0.0-alpha.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-alpha.3`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.3`
+
+No changes since `@mui/x-tree-view-pro@v8.0.0-alpha.2`.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-alpha.3`.
+
+### Docs
+
+- [docs] Add a customization demo for the Date and Time Pickers overview page (#15118) @noraleonte
+- [docs] Fix typo in charts axis documentation (#15743) @JCQuintas
+- [docs] Improve SEO titles for the Data Grid (#15695) @MBilalShafi
+
+### Core
+
+- [core] Add `@mui/x-tree-view-pro` to `releaseChangelog` (#15316) @flaviendelangle
+- [code-infra] Lock file maintenance (#11894)
+- [code-infra] Check if `preset-safe` folder exists in codemod test (#15703) @JCQuintas
+- [code-infra] Import Pickers `preset-safe` into global codemod config (#15659) @JCQuintas
+- [code-infra] Playwright 1.49 (#15493) @JCQuintas
+- [test] Force hover in headless Chrome (#15710) @cherniavskii
+
 ## v8.0.0-alpha.2
 
 _Nov 29, 2024_

package/PickersActionBar/PickersActionBar.js

@@ -5,10 +5,17 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["onAccept", "onClear", "onCancel", "onSetToday", "actions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import DialogActions from '@mui/material/DialogActions';
 import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const PickersActionBarRoot = styled(DialogActions, {
+  name: 'MuiPickersLayout',
+  slot: 'ActionBar',
+  overridesResolver: (_, styles) => styles.actionBar
+})({});
+
 /**
  * Demos:
  *
@@ -58,7 +65,7 @@ function PickersActionBar(props) {
         return null;
     }
   });
-  return /*#__PURE__*/_jsx(DialogActions, _extends({}, other, {
+  return /*#__PURE__*/_jsx(PickersActionBarRoot, _extends({}, other, {
     children: buttons
   }));
 }

package/PickersShortcuts/PickersShortcuts.js

@@ -5,12 +5,19 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"],
   _excluded2 = ["getValue"];
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Chip from '@mui/material/Chip';
 import { VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const PickersShortcutsRoot = styled(List, {
+  name: 'MuiPickersLayout',
+  slot: 'Shortcuts',
+  overridesResolver: (_, styles) => styles.shortcuts
+})({});
+
 /**
  * Demos:
  *
@@ -47,7 +54,7 @@ function PickersShortcuts(props) {
       disabled: !isValid(newValue)
     });
   });
-  return /*#__PURE__*/_jsx(List, _extends({
+  return /*#__PURE__*/_jsx(PickersShortcutsRoot, _extends({
     dense: true,
     sx: [{
       maxHeight: VIEW_HEIGHT,

package/index.js

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

package/internals/components/PickerProvider.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { PickerOwnerState } from '../../models';
 import { PickersInputLocaleText } from '../../locales';
 import { PickerOrientation, PickerVariant } from '../models';
+import { UsePickerValueContextValue } from '../hooks/usePicker/usePickerValue.types';
 export declare const PickerContext: React.Context<PickerContextValue | null>;
 export declare const PickerPrivateContext: React.Context<PickerPrivateContextValue>;
 /**
@@ -18,21 +19,7 @@ export interface PickerProviderProps {
     localeText: PickersInputLocaleText | undefined;
     children: React.ReactNode;
 }
-export interface PickerContextValue {
-    /**
-     * Open the picker.
-     * @param {React.UIEvent} event The DOM event that triggered the change.
-     */
-    onOpen: (event: React.UIEvent) => void;
-    /**
-     * Close the picker.
-     * @param {React.UIEvent} event The DOM event that triggered the change.
-     */
-    onClose: (event: React.UIEvent) => void;
-    /**
-     * `true` if the picker is open, `false` otherwise.
-     */
-    open: boolean;
+export interface PickerContextValue extends UsePickerValueContextValue {
     /**
      * `true` if the picker is disabled, `false` otherwise.
      */

package/internals/hooks/useOpenState.d.ts

@@ -1,9 +1,10 @@
+import * as React from 'react';
 export interface OpenStateProps {
     open?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
 }
 export declare const useOpenState: ({ open, onOpen, onClose }: OpenStateProps) => {
-    isOpen: boolean;
-    setIsOpen: (newIsOpen: boolean) => void;
+    open: boolean;
+    setOpen: (action: React.SetStateAction<boolean>) => void;
 };

package/internals/hooks/useOpenState.js

@@ -5,7 +5,7 @@ export 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)
@@ -14,22 +14,23 @@ export 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
   };
 };

package/internals/hooks/usePicker/usePicker.js

@@ -37,11 +37,11 @@ export const usePicker = ({
   });
   const providerProps = usePickerProvider({
     props,
-    pickerValueResponse,
     localeText,
     valueManager,
     variant,
-    views: pickerViewsResponse.views
+    views: pickerViewsResponse.views,
+    paramsFromUsePickerValue: pickerValueResponse.provider
   });
   return {
     // Picker value

package/internals/hooks/usePicker/usePicker.types.d.ts

@@ -13,7 +13,7 @@ export interface UsePickerProps<TValue extends PickerValidValue, TView extends D
 export interface UsePickerParams<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any, any>, TAdditionalProps extends {}> extends Pick<UsePickerValueParams<TValue, TExternalProps>, 'valueManager' | 'valueType' | 'variant' | 'validator'>, Pick<UsePickerViewParams<TValue, TView, TExternalProps, TAdditionalProps>, 'additionalViewProps' | 'autoFocusView' | 'rendererInterceptor' | 'fieldRef'>, Pick<UsePickerProviderParameters<TValue>, 'localeText'> {
     props: TExternalProps;
 }
-export interface UsePickerResponse<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends Omit<UsePickerValueResponse<TValue, TError>, 'viewProps' | 'layoutProps'>, Omit<UsePickerViewsResponse<TView>, 'layoutProps' | 'views'> {
+export interface UsePickerResponse<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends Pick<UsePickerValueResponse<TValue, TError>, 'open' | 'actions' | 'fieldProps'>, Omit<UsePickerViewsResponse<TView>, 'layoutProps' | 'views'> {
     ownerState: PickerOwnerState;
     providerProps: UsePickerProviderReturnValue;
     layoutProps: UsePickerValueResponse<TValue, TError>['layoutProps'] & UsePickerViewsResponse<TView>['layoutProps'];

package/internals/hooks/usePicker/usePickerProvider.d.ts

@@ -1,4 +1,4 @@
-import { PickerValueManager, UsePickerValueResponse } from './usePickerValue.types';
+import { PickerValueManager, UsePickerValueProviderParams } from './usePickerValue.types';
 import { PickerProviderProps } from '../../components/PickerProvider';
 import type { UsePickerProps } from './usePicker.types';
 import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerValidValue, PickerVariant } from '../../models';
@@ -6,10 +6,10 @@ export declare const usePickerOrientation: (views: readonly DateOrTimeViewWithMe
 export declare function usePickerProvider<TValue extends PickerValidValue>(parameters: UsePickerProviderParameters<TValue>): UsePickerProviderReturnValue;
 export interface UsePickerProviderParameters<TValue extends PickerValidValue> extends Pick<PickerProviderProps, 'localeText'> {
     props: UsePickerProps<TValue, any, any, any, any>;
-    pickerValueResponse: UsePickerValueResponse<TValue, any>;
     valueManager: PickerValueManager<TValue, any>;
     variant: PickerVariant;
     views: readonly DateOrTimeViewWithMeridiem[];
+    paramsFromUsePickerValue: UsePickerValueProviderParams<TValue>;
 }
 export interface UsePickerProviderReturnValue extends Omit<PickerProviderProps, 'children'> {
 }

package/internals/hooks/usePicker/usePickerProvider.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useUtils } from "../useUtils.js";
@@ -36,31 +37,28 @@ export const usePickerOrientation = (views, customOrientation) => {
 export function usePickerProvider(parameters) {
   const {
     props,
-    pickerValueResponse,
     valueManager,
     localeText,
     variant,
-    views
+    views,
+    paramsFromUsePickerValue
   } = parameters;
   const utils = useUtils();
   const orientation = usePickerOrientation(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(() => _extends({}, 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]);

package/internals/hooks/usePicker/usePickerValue.js

@@ -150,8 +150,8 @@ export const usePickerValue = ({
   const utils = useUtils();
   const adapter = useLocalizationContext();
   const {
-    isOpen,
-    setIsOpen
+    open,
+    setOpen
   } = useOpenState(props);
   const {
     timezone,
@@ -237,7 +237,7 @@ export const usePickerValue = ({
       onAccept(action.value, getContext());
     }
     if (shouldClose) {
-      setIsOpen(false);
+      setOpen(false);
     }
   });
   if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
@@ -288,11 +288,11 @@ export const usePickerValue = ({
   });
   const handleOpen = useEventCallback(event => {
     event.preventDefault();
-    setIsOpen(true);
+    setOpen(true);
   });
   const handleClose = useEventCallback(event => {
     event?.preventDefault();
-    setIsOpen(false);
+    setOpen(false);
   });
   const handleChange = useEventCallback((newValue, selectionState = 'partial') => updateDate({
     name: 'setValueFromView',
@@ -323,12 +323,12 @@ export const usePickerValue = ({
     value: dateState.draft,
     onChange: handleChangeFromField
   };
-  const viewValue = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
+  const valueWithoutError = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
   const viewResponse = {
-    value: viewValue,
+    value: valueWithoutError,
     onChange: handleChange,
     onClose: handleClose,
-    open: isOpen
+    open
   };
   const isValid = testedValue => {
     const error = validator({
@@ -340,16 +340,27 @@ export const usePickerValue = ({
     return !valueManager.hasError(error);
   };
   const layoutResponse = _extends({}, actions, {
-    value: viewValue,
+    value: valueWithoutError,
     onChange: handleChange,
     onSelectShortcut: handleSelectShortcut,
     isValid
   });
+  const contextValue = React.useMemo(() => {
+    return {
+      open,
+      setOpen
+    };
+  }, [open, setOpen]);
+  const providerParams = {
+    value: valueWithoutError,
+    contextValue
+  };
   return {
-    open: isOpen,
+    open,
     fieldProps: fieldResponse,
     viewProps: viewResponse,
     layoutProps: layoutResponse,
-    actions
+    actions,
+    provider: providerParams
   };
 };

package/internals/hooks/usePicker/usePickerValue.types.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { FieldChangeHandlerContext, UseFieldInternalProps } from '../useField';
 import { Validator } from '../../../validation';
 import { PickerVariant } from '../../models/common';
@@ -264,10 +265,35 @@ export interface UsePickerValueLayoutResponse<TValue extends PickerValidValue> e
     onSelectShortcut: (newValue: TValue, changeImportance: PickerShortcutChangeImportance, shortcut: PickersShortcutsItemContext) => void;
     isValid: (value: TValue) => boolean;
 }
+/**
+ * Params passed to `usePickerProvider`.
+ */
+export interface UsePickerValueProviderParams<TValue extends PickerValidValue> {
+    value: TValue;
+    contextValue: UsePickerValueContextValue;
+}
 export interface UsePickerValueResponse<TValue extends PickerValidValue, TError> {
     open: boolean;
     actions: UsePickerValueActions;
     viewProps: UsePickerValueViewsResponse<TValue>;
     fieldProps: UsePickerValueFieldResponse<TValue, TError>;
     layoutProps: UsePickerValueLayoutResponse<TValue>;
+    provider: UsePickerValueProviderParams<TValue>;
+}
+export interface UsePickerValueContextValue {
+    /**
+     * Sets the current open state of the Picker.
+     * ```ts
+     * setOpen(true); // Opens the picker.
+     * setOpen(false); // Closes the picker.
+     * setOpen((prevOpen) => !prevOpen); // Toggles the open state.
+     * ```
+     * @param {React.SetStateAction<boolean>} action The new open state of the Picker.
+     * It can be a function that will receive the current open state.
+     */
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * `true` if the picker is open, `false` otherwise.
+     */
+    open: boolean;
 }

package/modern/PickersActionBar/PickersActionBar.js

@@ -5,10 +5,17 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["onAccept", "onClear", "onCancel", "onSetToday", "actions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import DialogActions from '@mui/material/DialogActions';
 import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const PickersActionBarRoot = styled(DialogActions, {
+  name: 'MuiPickersLayout',
+  slot: 'ActionBar',
+  overridesResolver: (_, styles) => styles.actionBar
+})({});
+
 /**
  * Demos:
  *
@@ -58,7 +65,7 @@ function PickersActionBar(props) {
         return null;
     }
   });
-  return /*#__PURE__*/_jsx(DialogActions, _extends({}, other, {
+  return /*#__PURE__*/_jsx(PickersActionBarRoot, _extends({}, other, {
     children: buttons
   }));
 }

package/modern/PickersShortcuts/PickersShortcuts.js

@@ -5,12 +5,19 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"],
   _excluded2 = ["getValue"];
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Chip from '@mui/material/Chip';
 import { VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const PickersShortcutsRoot = styled(List, {
+  name: 'MuiPickersLayout',
+  slot: 'Shortcuts',
+  overridesResolver: (_, styles) => styles.shortcuts
+})({});
+
 /**
  * Demos:
  *
@@ -47,7 +54,7 @@ function PickersShortcuts(props) {
       disabled: !isValid(newValue)
     });
   });
-  return /*#__PURE__*/_jsx(List, _extends({
+  return /*#__PURE__*/_jsx(PickersShortcutsRoot, _extends({
     dense: true,
     sx: [{
       maxHeight: VIEW_HEIGHT,

package/modern/index.js

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

package/modern/internals/hooks/useOpenState.js

@@ -5,7 +5,7 @@ export 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)
@@ -14,22 +14,23 @@ export 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
   };
 };

package/modern/internals/hooks/usePicker/usePicker.js

@@ -37,11 +37,11 @@ export const usePicker = ({
   });
   const providerProps = usePickerProvider({
     props,
-    pickerValueResponse,
     localeText,
     valueManager,
     variant,
-    views: pickerViewsResponse.views
+    views: pickerViewsResponse.views,
+    paramsFromUsePickerValue: pickerValueResponse.provider
   });
   return {
     // Picker value

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useUtils } from "../useUtils.js";
@@ -36,31 +37,28 @@ export const usePickerOrientation = (views, customOrientation) => {
 export function usePickerProvider(parameters) {
   const {
     props,
-    pickerValueResponse,
     valueManager,
     localeText,
     variant,
-    views
+    views,
+    paramsFromUsePickerValue
   } = parameters;
   const utils = useUtils();
   const orientation = usePickerOrientation(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(() => _extends({}, 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]);

package/modern/internals/hooks/usePicker/usePickerValue.js

@@ -150,8 +150,8 @@ export const usePickerValue = ({
   const utils = useUtils();
   const adapter = useLocalizationContext();
   const {
-    isOpen,
-    setIsOpen
+    open,
+    setOpen
   } = useOpenState(props);
   const {
     timezone,
@@ -237,7 +237,7 @@ export const usePickerValue = ({
       onAccept(action.value, getContext());
     }
     if (shouldClose) {
-      setIsOpen(false);
+      setOpen(false);
     }
   });
   if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
@@ -288,11 +288,11 @@ export const usePickerValue = ({
   });
   const handleOpen = useEventCallback(event => {
     event.preventDefault();
-    setIsOpen(true);
+    setOpen(true);
   });
   const handleClose = useEventCallback(event => {
     event?.preventDefault();
-    setIsOpen(false);
+    setOpen(false);
   });
   const handleChange = useEventCallback((newValue, selectionState = 'partial') => updateDate({
     name: 'setValueFromView',
@@ -323,12 +323,12 @@ export const usePickerValue = ({
     value: dateState.draft,
     onChange: handleChangeFromField
   };
-  const viewValue = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
+  const valueWithoutError = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
   const viewResponse = {
-    value: viewValue,
+    value: valueWithoutError,
     onChange: handleChange,
     onClose: handleClose,
-    open: isOpen
+    open
   };
   const isValid = testedValue => {
     const error = validator({
@@ -340,16 +340,27 @@ export const usePickerValue = ({
     return !valueManager.hasError(error);
   };
   const layoutResponse = _extends({}, actions, {
-    value: viewValue,
+    value: valueWithoutError,
     onChange: handleChange,
     onSelectShortcut: handleSelectShortcut,
     isValid
   });
+  const contextValue = React.useMemo(() => {
+    return {
+      open,
+      setOpen
+    };
+  }, [open, setOpen]);
+  const providerParams = {
+    value: valueWithoutError,
+    contextValue
+  };
   return {
-    open: isOpen,
+    open,
     fieldProps: fieldResponse,
     viewProps: viewResponse,
     layoutProps: layoutResponse,
-    actions
+    actions,
+    provider: providerParams
   };
 };

package/node/PickersActionBar/PickersActionBar.js

@@ -11,11 +11,18 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
 var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["onAccept", "onClear", "onCancel", "onSetToday", "actions"];
+const PickersActionBarRoot = (0, _styles.styled)(_DialogActions.default, {
+  name: 'MuiPickersLayout',
+  slot: 'ActionBar',
+  overridesResolver: (_, styles) => styles.actionBar
+})({});
+
 /**
  * Demos:
  *
@@ -65,7 +72,7 @@ function PickersActionBar(props) {
         return null;
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogActions.default, (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersActionBarRoot, (0, _extends2.default)({}, other, {
     children: buttons
   }));
 }

package/node/PickersShortcuts/PickersShortcuts.js

@@ -10,6 +10,7 @@ exports.PickersShortcuts = PickersShortcuts;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _List = _interopRequireDefault(require("@mui/material/List"));
 var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
@@ -18,6 +19,12 @@ var _dimensions = require("../internals/constants/dimensions");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"],
   _excluded2 = ["getValue"];
+const PickersShortcutsRoot = (0, _styles.styled)(_List.default, {
+  name: 'MuiPickersLayout',
+  slot: 'Shortcuts',
+  overridesResolver: (_, styles) => styles.shortcuts
+})({});
+
 /**
  * Demos:
  *
@@ -54,7 +61,7 @@ function PickersShortcuts(props) {
       disabled: !isValid(newValue)
     });
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersShortcutsRoot, (0, _extends2.default)({
     dense: true,
     sx: [{
       maxHeight: _dimensions.VIEW_HEIGHT,

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.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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
+    views: pickerViewsResponse.views,
+    paramsFromUsePickerValue: pickerValueResponse.provider
   });
   return {
     // Picker value

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
+    views,
+    paramsFromUsePickerValue
   } = parameters;
   const utils = (0, _useUtils.useUtils)();
   const orientation = usePickerOrientation(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]);

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

@@ -158,8 +158,8 @@ const usePickerValue = ({
   const utils = (0, _useUtils.useUtils)();
   const adapter = (0, _useUtils.useLocalizationContext)();
   const {
-    isOpen,
-    setIsOpen
+    open,
+    setOpen
   } = (0, _useOpenState.useOpenState)(props);
   const {
     timezone,
@@ -245,7 +245,7 @@ const usePickerValue = ({
       onAccept(action.value, getContext());
     }
     if (shouldClose) {
-      setIsOpen(false);
+      setOpen(false);
     }
   });
   if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
@@ -296,11 +296,11 @@ const usePickerValue = ({
   });
   const handleOpen = (0, _useEventCallback.default)(event => {
     event.preventDefault();
-    setIsOpen(true);
+    setOpen(true);
   });
   const handleClose = (0, _useEventCallback.default)(event => {
     event?.preventDefault();
-    setIsOpen(false);
+    setOpen(false);
   });
   const handleChange = (0, _useEventCallback.default)((newValue, selectionState = 'partial') => updateDate({
     name: 'setValueFromView',
@@ -331,12 +331,12 @@ const usePickerValue = ({
     value: dateState.draft,
     onChange: handleChangeFromField
   };
-  const viewValue = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
+  const valueWithoutError = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
   const viewResponse = {
-    value: viewValue,
+    value: valueWithoutError,
     onChange: handleChange,
     onClose: handleClose,
-    open: isOpen
+    open
   };
   const isValid = testedValue => {
     const error = validator({
@@ -348,17 +348,28 @@ const usePickerValue = ({
     return !valueManager.hasError(error);
   };
   const layoutResponse = (0, _extends2.default)({}, actions, {
-    value: viewValue,
+    value: valueWithoutError,
     onChange: handleChange,
     onSelectShortcut: handleSelectShortcut,
     isValid
   });
+  const contextValue = React.useMemo(() => {
+    return {
+      open,
+      setOpen
+    };
+  }, [open, setOpen]);
+  const providerParams = {
+    value: valueWithoutError,
+    contextValue
+  };
   return {
-    open: isOpen,
+    open,
     fieldProps: fieldResponse,
     viewProps: viewResponse,
     layoutProps: layoutResponse,
-    actions
+    actions,
+    provider: providerParams
   };
 };
 exports.usePickerValue = usePickerValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "The community edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",