@mui/x-date-pickers 6.0.0-beta.0 → 6.0.0-beta.1

package/AdapterDayjs/index.d.ts

@@ -16,6 +16,8 @@ export declare class AdapterDayjs extends BaseAdapterDayjs implements MuiPickers
         start: string;
         end: string;
     };
+    private getLocaleFormats;
+    is12HourCycleInCurrentLocale: () => boolean;
     /**
      * The current getFormatHelperText method uses an outdated format parsing logic.
      * We should use this one in the future to support all localized formats.

package/AdapterDayjs/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable class-methods-use-this */
-
+import defaultDayjs from 'dayjs';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import BaseAdapterDayjs from '@date-io/dayjs';
 import { buildWarning } from '../internals/utils/warning';
@@ -39,12 +39,23 @@ export class AdapterDayjs extends BaseAdapterDayjs {
       start: '[',
       end: ']'
     };
-    this.expandFormat = format => {
-      const localeObject = this.rawDayJsInstance.Ls[this.locale || 'en'];
+    this.getLocaleFormats = () => {
+      var _this$rawDayJsInstanc;
+      const locales = (_this$rawDayJsInstanc = this.rawDayJsInstance.Ls) != null ? _this$rawDayJsInstanc : defaultDayjs.Ls;
+      const locale = this.locale || 'en';
+      let localeObject = locales[locale];
       if (localeObject === undefined) {
         localeNotFoundWarning();
+        localeObject = locales.en;
       }
-      const localeFormats = localeObject === undefined ? this.rawDayJsInstance.Ls.en.formats : localeObject.formats;
+      return localeObject.formats;
+    };
+    this.is12HourCycleInCurrentLocale = () => {
+      /* istanbul ignore next */
+      return /A|a/.test(this.getLocaleFormats().LT || '');
+    };
+    this.expandFormat = format => {
+      const localeFormats = this.getLocaleFormats();
 
       // @see https://github.com/iamkun/dayjs/blob/dev/src/plugin/localizedFormat/index.js
       const t = formatBis => formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (_, a, b) => a || b.slice(1));
@@ -59,6 +70,6 @@ export class AdapterDayjs extends BaseAdapterDayjs {
     this.getWeekNumber = date => {
       return date.week();
     };
-    this.rawDayJsInstance.extend(weekOfYear);
+    defaultDayjs.extend(weekOfYear);
   }
 }

package/CHANGELOG.md

@@ -3,6 +3,72 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-beta.1
+
+_Jan 27, 2023_
+
+We'd like to offer a big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 New shortcuts component for the date pickers (#7154) @alexfauquette
+- 🌍 Add Belarusian (be-BY), Czech (cs-CZ) and Russian (ru-RU) locales
+- 🌍 Improve Spanish (es-ES), Japanese (ja-JP), Slovak (sk-SK), and Vietnamese (vi-VN) locales
+- ✨ New codemods for migrating to v6
+- 📚 Documentation improvements
+- 🐞 Bug fixes
+
+### `@mui/x-data-grid@v6.0.0-beta.1` / `@mui/x-data-grid-pro@v6.0.0-beta.1` / `@mui/x-data-grid-premium@v6.0.0-beta.1`
+
+#### Changes
+
+- [DataGrid] Add `title` attribute to cells (#7682) @thupi
+- [DataGrid] Fix `autoHeight` not working properly inside of a flex container (#7701) @cherniavskii
+- [DataGrid] Fix grid state not being updated after print preview is closed (#7642) @cherniavskii
+- [DataGrid] Fix non-hideable columns visibility toggling (#7637) @cherniavskii
+- [DataGrid] Fix scrolling on resize for data grids inside shadow root (#7298) @akiradev
+- [l10n] Add Slovak (sk-SK) translation for aggregation functions (#7702) @msidlo
+- [l10n] Add missing core locales for `MuiTablePagination` (#7717) @MBilalShafi
+- [l10n] Improve Spanish (es-ES) and Vietnamese (vi-VN) locale (#7634) @WiXSL and @SpacerZ
+- [l10n] Add Belarusian (be-BY) locale (#7646) @volhalink
+
+### `@mui/x-date-pickers@v6.0.0-beta.1` / `@mui/x-date-pickers-pro@v6.0.0-beta.1`
+
+#### Changes
+
+- [pickers] Fix `aria-labelledby` assignment to dialog (#7608) @LukasTy
+- [pickers] Support `UTC` with `dayjs` (#7610) @flaviendelangle
+- [pickers] Update focus when opening a UI view (#7620) @alexfauquette
+- [DateRangePickers] Add shortcuts component (#7154) @alexfauquette
+- [l10n] Add Czech (cs-CZ) locale (#7645) @OndrejHj04
+- [l10n] Add Russian (ru-RU) locale (#7706) @rstmzh
+- [l10n] Improve Japanese (ja-JP) locale (#7624) @makoto14
+
+### `@mui/x-codemod@v6.0.0-beta.1`
+
+#### Changes
+
+- [codemod] Add pickers `replace-toolbar-props-by-slot` codemod (#7687) @alexfauquette
+- [codemod] Add `GridColumnMenuItemProps` to `column-menu-components-rename` codemod (#7710) @MBilalShafi
+- [codemod] Add `headerHeight` prop update to `row-selection-props-rename` codemod (#7711) @MBilalShafi
+- [codemod] Add pickers codemod for `components` to `slots` renaming (#7533) @alexfauquette
+- [codemod] Add pickers `migrate-to-components-componentsProps` and `replace-arrows-button-slot` codemods (#7698) @alexfauquette
+- [codemod] Add data grid codemod renaming `rowsPerPageOptions` prop to `pageSizeOptions` (#7603) @MBilalShafi
+- [codemod] Add pickers `rename-should-disable-time` codemod (#7709) @alexfauquette
+- [codemod] Add data grid `row-selection-props-rename` codemod (#7485) @MBilalShafi
+- [codemod] Add data grid `rename-selectors-and-events` codemod (#7699) @MBilalShafi
+- [codemod] Add pickers `replace-tabs-props` codemod (#7639) @alexfauquette
+
+### Docs
+
+- [docs] Add info callout about available component `slots` (#7714) @Vivek-Prajapatii
+- [docs] Add recipe for pinning grouped column (#7712) @MBilalShafi
+- [docs] Fix 404 links to picker API page @oliviertassinari
+- [docs] Update `DemoContainer` `components` prop using a codemod (#7574) @alexfauquette
+
+### Core
+
+- [core] Fix `innerslotProps` typo (#7697) @LukasTy
+- [core] Upgrade monorepo (#7676) @cherniavskii
+
 ## 6.0.0-beta.0
 
 _Jan 19, 2023_
@@ -342,7 +408,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
   ```diff
    <DateTimePicker
   -   shouldDisableTime={(timeValue, view) => view === 'hours' && timeValue < 12}
-  +   shouldDisableTime={(time, view) => view === 'hours' && value.hour() < 12}
+  +   shouldDisableTime={(value, view) => view === 'hours' && value.hour() < 12}
    />
   ```
 
@@ -1426,7 +1492,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
    // TimePicker, MobileTimePicker, DateRangePicker and MobileDateRangePicker.
    <DatePicker
   -  DialogProps={{ backgroundColor: 'red' }}
-  +  componentsProps={{ dialog: { backgroundColor: 'red }}}
+  +  componentsProps={{ dialog: { backgroundColor: 'red' }}}
    />
   ```
 
@@ -1437,7 +1503,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
    // TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
    <DatePicker
   -  PaperProps={{ backgroundColor: 'red' }}
-  +  componentsProps={{ desktopPaper: { backgroundColor: 'red }}}
+  +  componentsProps={{ desktopPaper: { backgroundColor: 'red' }}}
    />
   ```
 
@@ -1956,6 +2022,44 @@ You can find more information about the new api, including how to set those tran
 - [test] Skip tests for column pinning and dynamic row height (#5997) @m4theushw
 - [website] Improve security header @oliviertassinari
 
+## v5.17.21
+
+_Jan 27, 2023_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Belarusian (be-BY), Czech (cs-CZ), and Russian (ru-RU) locales
+- 🌍 Improve Slovak (sk-SK), Japanese (ja-JP), Vietnamese (vi-VN), and Spanish (es-ES) locales
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.21` / `@mui/x-data-grid-pro@v5.17.21` / `@mui/x-data-grid-premium@v5.17.21`
+
+#### Changes
+
+- [DataGrid] Add `title` attribute to cells (#7695) @thupi
+- [DataGrid] Fix grid state not being updated after print preview is closed (#7680) @cherniavskii
+- [DataGrid] Fix non-hideable columns visibility toggling (#7716) @cherniavskii
+- [DataGrid] Fix scrolling on resize for data grids inside shadow root (#7722) @cherniavskii
+- [DataGridPremium] Create aggregation footer row with `isAutoGenerated: true` (#7681) @m4theushw
+- [l10n] Add Belarusian (be-BY) locale (#7718) @volhalink
+- [l10n] Add Slovak (sk-SK) translation for aggregation functions (#7690) @msidlo
+- [l10n] Add missing core locales for `MuiTablePagination` (#7719) @MBilalShafi
+- [l10n] Improve Japanese (ja-JP) locale (#7627) @makoto14
+- [l10n] Improve Vietnamese (vi-VN) locale (#7601) @SpacerZ
+
+### `@mui/x-date-pickers@v5.0.16` / `@mui/x-date-pickers-pro@v5.0.16`
+
+#### Changes
+
+- [pickers] Add missing components to `themeAugmentation` (#7677) @LukasTy
+- [l10n] Add Czech (cs-CZ) locale (#7666) @OndrejHj04
+- [l10n] Add Russian (ru-RU) locale (#7708) @rstmzh
+- [l10n] Improve Spanish (es-ES) locale (#7614) @WiXSL
+
+### Docs
+
+- [docs] Add info callout about available component `slots` (#7723) @Vivek-Prajapatii
+
 ## 5.17.20
 
 _Jan 19, 2023_

package/DatePicker/DatePickerToolbar.js

@@ -116,6 +116,7 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
   onViewChange: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  titleId: PropTypes.string,
   /**
    * Toolbar date format.
    */

package/DateTimePicker/DateTimePickerToolbar.js

@@ -219,6 +219,7 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
+  titleId: PropTypes.string,
   /**
    * Toolbar date format.
    */

package/DesktopDatePicker/DesktopDatePicker.types.d.ts

@@ -1,11 +1,11 @@
-import { UseDesktopPickerSlotsComponent, UseDesktopPickerSlotsComponentsProps, DesktopOnlyPickerProps } from '../internals/hooks/useDesktopPicker';
+import { UseDesktopPickerSlotsComponent, ExportedUseDesktopPickerSlotsComponentsProps, DesktopOnlyPickerProps } from '../internals/hooks/useDesktopPicker';
 import { BaseDatePickerProps, BaseDatePickerSlotsComponent, BaseDatePickerSlotsComponentsProps } from '../DatePicker/shared';
 import { MakeOptional } from '../internals/models/helpers';
 import { DateView } from '../internals/models/views';
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 export interface DesktopDatePickerSlotsComponent<TDate> extends BaseDatePickerSlotsComponent<TDate>, MakeOptional<UseDesktopPickerSlotsComponent<TDate, DateView>, 'Field' | 'OpenPickerIcon'> {
 }
-export interface DesktopDatePickerSlotsComponentsProps<TDate> extends BaseDatePickerSlotsComponentsProps<TDate>, UseDesktopPickerSlotsComponentsProps<TDate, DateView> {
+export interface DesktopDatePickerSlotsComponentsProps<TDate> extends BaseDatePickerSlotsComponentsProps<TDate>, ExportedUseDesktopPickerSlotsComponentsProps<TDate, DateView> {
 }
 export interface DesktopDatePickerProps<TDate> extends BaseDatePickerProps<TDate>, DesktopOnlyPickerProps<TDate> {
     /**

package/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts

@@ -1,11 +1,11 @@
-import { UseDesktopPickerSlotsComponent, UseDesktopPickerSlotsComponentsProps, DesktopOnlyPickerProps } from '../internals/hooks/useDesktopPicker';
+import { UseDesktopPickerSlotsComponent, ExportedUseDesktopPickerSlotsComponentsProps, DesktopOnlyPickerProps } from '../internals/hooks/useDesktopPicker';
 import { BaseDateTimePickerProps, BaseDateTimePickerSlotsComponent, BaseDateTimePickerSlotsComponentsProps } from '../DateTimePicker/shared';
 import { MakeOptional } from '../internals/models/helpers';
 import { DateOrTimeView } from '../internals/models/views';
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 export interface DesktopDateTimePickerSlotsComponent<TDate> extends BaseDateTimePickerSlotsComponent<TDate>, MakeOptional<UseDesktopPickerSlotsComponent<TDate, DateOrTimeView>, 'Field' | 'OpenPickerIcon'> {
 }
-export interface DesktopDateTimePickerSlotsComponentsProps<TDate> extends BaseDateTimePickerSlotsComponentsProps<TDate>, UseDesktopPickerSlotsComponentsProps<TDate, DateOrTimeView> {
+export interface DesktopDateTimePickerSlotsComponentsProps<TDate> extends BaseDateTimePickerSlotsComponentsProps<TDate>, ExportedUseDesktopPickerSlotsComponentsProps<TDate, DateOrTimeView> {
 }
 export interface DesktopDateTimePickerProps<TDate> extends BaseDateTimePickerProps<TDate>, DesktopOnlyPickerProps<TDate> {
     /**

package/DesktopTimePicker/DesktopTimePicker.types.d.ts

@@ -1,11 +1,11 @@
-import { UseDesktopPickerSlotsComponent, UseDesktopPickerSlotsComponentsProps, DesktopOnlyPickerProps } from '../internals/hooks/useDesktopPicker';
+import { UseDesktopPickerSlotsComponent, ExportedUseDesktopPickerSlotsComponentsProps, DesktopOnlyPickerProps } from '../internals/hooks/useDesktopPicker';
 import { BaseTimePickerProps, BaseTimePickerSlotsComponent, BaseTimePickerSlotsComponentsProps } from '../TimePicker/shared';
 import { MakeOptional } from '../internals/models/helpers';
 import { TimeView } from '../internals/models/views';
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 export interface DesktopTimePickerSlotsComponent<TDate> extends BaseTimePickerSlotsComponent<TDate>, MakeOptional<UseDesktopPickerSlotsComponent<TDate, TimeView>, 'Field' | 'OpenPickerIcon'> {
 }
-export interface DesktopTimePickerSlotsComponentsProps<TDate> extends BaseTimePickerSlotsComponentsProps, UseDesktopPickerSlotsComponentsProps<TDate, TimeView> {
+export interface DesktopTimePickerSlotsComponentsProps<TDate> extends BaseTimePickerSlotsComponentsProps, ExportedUseDesktopPickerSlotsComponentsProps<TDate, TimeView> {
 }
 export interface DesktopTimePickerProps<TDate> extends BaseTimePickerProps<TDate>, DesktopOnlyPickerProps<TDate> {
     /**

package/MobileDatePicker/MobileDatePicker.types.d.ts

@@ -1,11 +1,11 @@
-import { UseMobilePickerSlotsComponent, UseMobilePickerSlotsComponentsProps, MobileOnlyPickerProps } from '../internals/hooks/useMobilePicker';
+import { UseMobilePickerSlotsComponent, MobileOnlyPickerProps, ExportedUseMobilePickerSlotsComponentsProps } from '../internals/hooks/useMobilePicker';
 import { BaseDatePickerProps, BaseDatePickerSlotsComponent, BaseDatePickerSlotsComponentsProps } from '../DatePicker/shared';
 import { MakeOptional } from '../internals/models/helpers';
 import { DateView } from '../internals/models/views';
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 export interface MobileDatePickerSlotsComponent<TDate> extends BaseDatePickerSlotsComponent<TDate>, MakeOptional<UseMobilePickerSlotsComponent<TDate, DateView>, 'Field'> {
 }
-export interface MobileDatePickerSlotsComponentsProps<TDate> extends BaseDatePickerSlotsComponentsProps<TDate>, UseMobilePickerSlotsComponentsProps<TDate, DateView> {
+export interface MobileDatePickerSlotsComponentsProps<TDate> extends BaseDatePickerSlotsComponentsProps<TDate>, ExportedUseMobilePickerSlotsComponentsProps<TDate, DateView> {
 }
 export interface MobileDatePickerProps<TDate> extends BaseDatePickerProps<TDate>, MobileOnlyPickerProps<TDate> {
     /**

package/MobileDateTimePicker/MobileDateTimePicker.types.d.ts

@@ -1,11 +1,11 @@
-import { UseMobilePickerSlotsComponent, UseMobilePickerSlotsComponentsProps, MobileOnlyPickerProps } from '../internals/hooks/useMobilePicker';
+import { UseMobilePickerSlotsComponent, ExportedUseMobilePickerSlotsComponentsProps, MobileOnlyPickerProps } from '../internals/hooks/useMobilePicker';
 import { BaseDateTimePickerProps, BaseDateTimePickerSlotsComponent, BaseDateTimePickerSlotsComponentsProps } from '../DateTimePicker/shared';
 import { MakeOptional } from '../internals/models/helpers';
 import { DateOrTimeView } from '../internals/models/views';
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 export interface MobileDateTimePickerSlotsComponent<TDate> extends BaseDateTimePickerSlotsComponent<TDate>, MakeOptional<UseMobilePickerSlotsComponent<TDate, DateOrTimeView>, 'Field'> {
 }
-export interface MobileDateTimePickerSlotsComponentsProps<TDate> extends BaseDateTimePickerSlotsComponentsProps<TDate>, UseMobilePickerSlotsComponentsProps<TDate, DateOrTimeView> {
+export interface MobileDateTimePickerSlotsComponentsProps<TDate> extends BaseDateTimePickerSlotsComponentsProps<TDate>, ExportedUseMobilePickerSlotsComponentsProps<TDate, DateOrTimeView> {
 }
 export interface MobileDateTimePickerProps<TDate> extends BaseDateTimePickerProps<TDate>, MobileOnlyPickerProps<TDate> {
     /**

package/MobileTimePicker/MobileTimePicker.types.d.ts

@@ -1,11 +1,11 @@
-import { UseMobilePickerSlotsComponent, UseMobilePickerSlotsComponentsProps, MobileOnlyPickerProps } from '../internals/hooks/useMobilePicker';
+import { UseMobilePickerSlotsComponent, ExportedUseMobilePickerSlotsComponentsProps, MobileOnlyPickerProps } from '../internals/hooks/useMobilePicker';
 import { BaseTimePickerProps, BaseTimePickerSlotsComponent, BaseTimePickerSlotsComponentsProps } from '../TimePicker/shared';
 import { MakeOptional } from '../internals/models/helpers';
 import { TimeView } from '../internals/models/views';
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 export interface MobileTimePickerSlotsComponent<TDate> extends BaseTimePickerSlotsComponent<TDate>, MakeOptional<UseMobilePickerSlotsComponent<TDate, TimeView>, 'Field'> {
 }
-export interface MobileTimePickerSlotsComponentsProps<TDate> extends BaseTimePickerSlotsComponentsProps, UseMobilePickerSlotsComponentsProps<TDate, TimeView> {
+export interface MobileTimePickerSlotsComponentsProps<TDate> extends BaseTimePickerSlotsComponentsProps, ExportedUseMobilePickerSlotsComponentsProps<TDate, TimeView> {
 }
 export interface MobileTimePickerProps<TDate> extends BaseTimePickerProps<TDate>, MobileOnlyPickerProps<TDate> {
     /**

package/PickersLayout/PickersLayout.d.ts

@@ -9,7 +9,7 @@ declare const PickersLayoutRoot: import("@emotion/styled").StyledComponent<impor
 export { PickersLayoutRoot };
 export declare const PickersLayoutContentWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 declare const PickersLayout: {
-    <TValue, TView extends DateOrTimeView>(inProps: PickersLayoutProps<TValue, TView>): JSX.Element;
+    <TValue, TDate, TView extends DateOrTimeView>(inProps: PickersLayoutProps<TValue, TDate, TView>): JSX.Element;
     propTypes: any;
 };
 export { PickersLayout };

package/PickersLayout/PickersLayout.js

@@ -31,10 +31,17 @@ const PickersLayoutRoot = styled('div', {
   gridAutoRows: 'max-content auto max-content',
   [`& .${pickersLayoutClasses.toolbar}`]: ownerState.isLandscape ? {
     gridColumn: theme.direction === 'rtl' ? 3 : 1,
-    gridRow: '1 / 3'
+    gridRow: '2 / 3'
   } : {
-    gridColumn: '1 / 4',
+    gridColumn: '2 / 4',
+    gridRow: 1
+  },
+  [`.${pickersLayoutClasses.shortcuts}`]: ownerState.isLandscape ? {
+    gridColumn: '2 / 4',
     gridRow: 1
+  } : {
+    gridColumn: theme.direction === 'rtl' ? 3 : 1,
+    gridRow: '2 / 3'
   },
   [`& .${pickersLayoutClasses.actionBar}`]: {
     gridColumn: '1 / 4',
@@ -72,22 +79,24 @@ const PickersLayout = function PickersLayout(inProps) {
     toolbar,
     content,
     tabs,
-    actionBar
+    actionBar,
+    shortcuts
   } = usePickerLayout(props);
   const {
     sx,
     className,
+    isLandscape,
     ref,
     wrapperVariant
   } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(PickersLayoutRoot, {
+    ref: ref,
     sx: sx,
     className: clsx(className, classes.root),
     ownerState: ownerState,
-    ref: ref,
-    children: [toolbar, /*#__PURE__*/_jsx(PickersLayoutContentWrapper, {
+    children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/_jsx(PickersLayoutContentWrapper, {
       className: classes.contentWrapper,
       children: wrapperVariant === 'desktop' ? /*#__PURE__*/_jsxs(React.Fragment, {
         children: [content, tabs]
@@ -119,6 +128,7 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   componentsProps: PropTypes.object,
   disabled: PropTypes.bool,
   isLandscape: PropTypes.bool.isRequired,
+  isValid: PropTypes.func.isRequired,
   onAccept: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,

package/PickersLayout/PickersLayout.types.d.ts

@@ -6,35 +6,48 @@ import { DateOrTimeView } from '../internals/models/views';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs';
 import { UsePickerLayoutPropsResponseLayoutProps } from '../internals/hooks/usePicker/usePickerLayoutProps';
+import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { PickersLayoutClasses } from './pickersLayoutClasses';
 import { WrapperVariant } from '../internals/models/common';
-import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
-export interface ExportedPickersLayoutSlotsComponent<TValue, TView extends DateOrTimeView> {
+import { PickersShortcutsProps } from '../PickersShortcuts';
+export interface ExportedPickersLayoutSlotsComponent<TValue, TDate, TView extends DateOrTimeView> {
     /**
      * Custom component for the action bar, it is placed bellow the picker views.
      * @default PickersActionBar
      */
     ActionBar?: React.ElementType<PickersActionBarProps>;
+    /**
+     * Custom component for the shortcuts.
+     * @default PickersShortcuts
+     */
+    Shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<TValue>>;
     /**
      * Custom component for wrapping the layout.
-     * It wraps the toolbar, views, and action bar.
+     * It wraps the toolbar, views, action bar, and shortcuts.
      */
-    Layout?: React.JSXElementConstructor<PickersLayoutProps<TValue, TView>>;
+    Layout?: React.JSXElementConstructor<PickersLayoutProps<TValue, TDate, TView> & React.RefAttributes<HTMLDivElement>>;
 }
-interface PickersLayoutActionBarOwnerState<TValue, TView extends DateOrTimeView> extends PickersLayoutProps<TValue, TView> {
+interface PickersLayoutActionBarOwnerState<TValue, TDate, TView extends DateOrTimeView> extends PickersLayoutProps<TValue, TDate, TView> {
     wrapperVariant: WrapperVariant;
 }
-export interface ExportedPickersLayoutSlotsComponentsProps<TValue, TView extends DateOrTimeView> {
+interface PickersShortcutsOwnerState<TValue> extends PickersShortcutsProps<TValue> {
+    wrapperVariant: WrapperVariant;
+}
+export interface ExportedPickersLayoutSlotsComponentsProps<TValue, TDate, TView extends DateOrTimeView> {
     /**
      * Props passed down to the action bar component.
      */
-    actionBar?: SlotComponentProps<React.ComponentType<Omit<PickersActionBarProps, 'onAccept' | 'onClear' | 'onCancel' | 'onSetToday'>>, {}, PickersLayoutActionBarOwnerState<TValue, TView>>;
+    actionBar?: SlotComponentProps<React.ComponentType<Omit<PickersActionBarProps, 'onAccept' | 'onClear' | 'onCancel' | 'onSetToday'>>, {}, PickersLayoutActionBarOwnerState<TValue, TDate, TView>>;
+    /**
+     * Props passed down to the shortcuts component.
+     */
+    shortcuts?: SlotComponentProps<React.ComponentType<PickersShortcutsProps<TValue>>, {}, PickersShortcutsOwnerState<TValue>>;
     /**
      * Props passed down to the layoutRoot component.
      */
-    layout?: Partial<PickersLayoutProps<TValue, TView>>;
+    layout?: Partial<PickersLayoutProps<TValue, TDate, TView>>;
 }
-export interface PickersLayoutSlotsComponent<TValue, TView extends DateOrTimeView> extends ExportedPickersLayoutSlotsComponent<TValue, TView> {
+export interface PickersLayoutSlotsComponent<TValue, TDate, TView extends DateOrTimeView> extends ExportedPickersLayoutSlotsComponent<TValue, TDate, TView> {
     /**
      * Tabs enabling toggling between views.
      */
@@ -45,7 +58,7 @@ export interface PickersLayoutSlotsComponent<TValue, TView extends DateOrTimeVie
      */
     Toolbar?: React.JSXElementConstructor<BaseToolbarProps<TValue, TView>>;
 }
-export interface PickersLayoutSlotsComponentsProps<TValue, TView extends DateOrTimeView> extends ExportedPickersLayoutSlotsComponentsProps<TValue, TView> {
+export interface PickersLayoutSlotsComponentsProps<TValue, TDate, TView extends DateOrTimeView> extends ExportedPickersLayoutSlotsComponentsProps<TValue, TDate, TView> {
     /**
      * Props passed down to the tabs component.
      */
@@ -55,7 +68,7 @@ export interface PickersLayoutSlotsComponentsProps<TValue, TView extends DateOrT
      */
     toolbar?: ExportedBaseToolbarProps;
 }
-export interface PickersLayoutProps<TValue, TView extends DateOrTimeView> extends Omit<UsePickerLayoutPropsResponseLayoutProps<TValue, TView>, 'value'> {
+export interface PickersLayoutProps<TValue, TDate, TView extends DateOrTimeView> extends Omit<UsePickerLayoutPropsResponseLayoutProps<TValue, TView>, 'value'> {
     value?: TValue;
     className?: string;
     children?: React.ReactNode;
@@ -70,28 +83,29 @@ export interface PickersLayoutProps<TValue, TView extends DateOrTimeView> extend
      * @default {}
      * @deprecated Please use `slots`.
      */
-    components?: PickersLayoutSlotsComponent<TValue, TView>;
+    components?: PickersLayoutSlotsComponent<TValue, TDate, TView>;
     /**
      * The props used for each component slot.
      * @default {}
      * @deprecated Please use `slotProps`.
      */
-    componentsProps?: PickersLayoutSlotsComponentsProps<TValue, TView>;
+    componentsProps?: PickersLayoutSlotsComponentsProps<TValue, TDate, TView>;
     /**
      * Overrideable component slots.
      * @default {}
      */
-    slots?: UncapitalizeObjectKeys<PickersLayoutSlotsComponent<TValue, TView>>;
+    slots?: UncapitalizeObjectKeys<PickersLayoutSlotsComponent<TValue, TDate, TView>>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: PickersLayoutSlotsComponentsProps<TValue, TView>;
+    slotProps?: PickersLayoutSlotsComponentsProps<TValue, TDate, TView>;
 }
 export interface SubComponents {
     toolbar: React.ReactNode;
     content: React.ReactNode;
     tabs: React.ReactNode;
     actionBar: React.ReactNode;
+    shortcuts: React.ReactNode;
 }
 export {};

package/PickersLayout/pickersLayoutClasses.d.ts

@@ -11,6 +11,8 @@ export interface PickersLayoutClasses {
     actionBar: string;
     /** Styles applied to the tabs. */
     tabs: string;
+    /** Styles applied to the shortcuts container. */
+    shortcuts: string;
 }
 export type PickersLayoutClassKey = keyof PickersLayoutClasses;
 export declare function getPickersLayoutUtilityClass(slot: string): string;

package/PickersLayout/pickersLayoutClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generat
 export function getPickersLayoutUtilityClass(slot) {
   return generateUtilityClass('MuiPickersLayout', slot);
 }
-export const pickersLayoutClasses = generateUtilityClasses('MuiPickersLayout', ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar']);
+export const pickersLayoutClasses = generateUtilityClasses('MuiPickersLayout', ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar', 'shortcuts']);

package/PickersLayout/usePickerLayout.d.ts

@@ -2,5 +2,5 @@ import { PickersLayoutProps, SubComponents } from './PickersLayout.types';
 import { DateOrTimeView } from '../internals/models';
 interface UsePickerLayoutResponse extends SubComponents {
 }
-declare const usePickerLayout: <TValue, TView extends DateOrTimeView>(props: PickersLayoutProps<TValue, TView>) => UsePickerLayoutResponse;
+declare const usePickerLayout: <TValue, TDate, TView extends DateOrTimeView>(props: PickersLayoutProps<TValue, TDate, TView>) => UsePickerLayoutResponse;
 export default usePickerLayout;

package/PickersLayout/usePickerLayout.js

@@ -4,19 +4,12 @@ import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { PickersActionBar } from '../PickersActionBar';
 import { getPickersLayoutUtilityClass } from './pickersLayoutClasses';
+import { PickersShortcuts } from '../PickersShortcuts';
 import { uncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { jsx as _jsx } from "react/jsx-runtime";
 function toolbarHasView(toolbarProps) {
   return toolbarProps.view !== null;
 }
-
-// TODO: Remove this functions. It get introduced to mark `value` prop in PickersLayoutProps as not required.
-// The true type should be
-// - For pickers value: TDate | null
-// - For rangepickers value: [TDate | null, TDate | null]
-function toolbarHasValue(toolbarProps) {
-  return toolbarProps.value !== undefined;
-}
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -28,12 +21,13 @@ const useUtilityClasses = ownerState => {
     toolbar: ['toolbar'],
     actionBar: ['actionBar'],
     tabs: ['tabs'],
-    landscape: ['landscape']
+    landscape: ['landscape'],
+    shortcuts: ['shortcuts']
   };
   return composeClasses(slots, getPickersLayoutUtilityClass, classes);
 };
 const usePickerLayout = props => {
-  var _slots$actionBar;
+  var _slots$actionBar, _slots$shortcuts;
   const {
     wrapperVariant,
     onAccept,
@@ -45,6 +39,7 @@ const usePickerLayout = props => {
     onViewChange,
     value,
     onChange,
+    isValid,
     isLandscape,
     disabled,
     readOnly,
@@ -52,10 +47,14 @@ const usePickerLayout = props => {
     components,
     componentsProps,
     slots: innerSlots,
-    slotProps: innerslotProps
+    slotProps: innerSlotProps
+    // TODO: Remove this "as" hack. It get introduced to mark `value` prop in PickersLayoutProps as not required.
+    // The true type should be
+    // - For pickers value: TDate | null
+    // - For rangepickers value: [TDate | null, TDate | null]
   } = props;
   const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
-  const slotProps = innerslotProps != null ? innerslotProps : componentsProps;
+  const slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
   const classes = useUtilityClasses(props);
 
   // Action bar
@@ -99,7 +98,7 @@ const usePickerLayout = props => {
       wrapperVariant
     })
   });
-  const toolbar = toolbarHasView(toolbarProps) && toolbarHasValue(toolbarProps) && !!Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, toolbarProps)) : null;
+  const toolbar = toolbarHasView(toolbarProps) && !!Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, toolbarProps)) : null;
 
   // Content
 
@@ -112,11 +111,34 @@ const usePickerLayout = props => {
     view: view,
     onViewChange: onViewChange
   }, slotProps == null ? void 0 : slotProps.tabs)) : null;
+
+  // Shortcuts
+
+  const Shortcuts = (_slots$shortcuts = slots == null ? void 0 : slots.shortcuts) != null ? _slots$shortcuts : PickersShortcuts;
+  const shortcutsProps = useSlotProps({
+    elementType: Shortcuts,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.shortcuts,
+    additionalProps: {
+      isValid,
+      isLandscape,
+      onChange,
+      className: classes.shortcuts
+    },
+    ownerState: {
+      isValid,
+      isLandscape,
+      onChange,
+      className: classes.shortcuts,
+      wrapperVariant
+    }
+  });
+  const shortcuts = view && !!Shortcuts ? /*#__PURE__*/_jsx(Shortcuts, _extends({}, shortcutsProps)) : null;
   return {
     toolbar,
     content,
     tabs,
-    actionBar
+    actionBar,
+    shortcuts
   };
 };
 export default usePickerLayout;

package/PickersShortcuts/PickersShortcuts.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { ListProps } from '@mui/material/List';
+interface PickersShortcutsItemGetValueParams<TValue> {
+    isValid: (value: TValue) => boolean;
+}
+export interface PickersShortcutsItem<TValue> {
+    label: string;
+    getValue: (params: PickersShortcutsItemGetValueParams<TValue>) => TValue;
+}
+export interface PickersShortcutsProps<TValue> extends Omit<ListProps, 'onChange'> {
+    /**
+     * Ordered array of shortcuts to display.
+     * If empty, does not display the shortcuts.
+     * @default `[]`
+     */
+    items?: PickersShortcutsItem<TValue>[];
+    isLandscape: boolean;
+    onChange: (newValue: TValue) => void;
+    isValid: (value: TValue) => boolean;
+}
+declare function PickersShortcuts<TValue>(props: PickersShortcutsProps<TValue>): JSX.Element | null;
+declare namespace PickersShortcuts {
+    var propTypes: any;
+}
+export { PickersShortcuts };