@mui/x-date-pickers 5.0.7 → 5.0.9

package/CHANGELOG.md

@@ -3,6 +3,99 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.13
+
+_Nov 24, 2022_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Fix support of the pickers to Shadow DOM (#6971) @flaviendelangle
+- 💅 Improve DataGrid theme augmentation (#6980) @iigrik
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.13` / `@mui/x-data-grid-pro@v5.17.13` / `@mui/x-data-grid-premium@v5.17.13`
+
+#### Changes
+
+- [DataGrid] Fix `ErrorOverlay` not receiving defined input props (#6885) @banoth-ravinder
+- [DataGrid] Improve typing for `styleOverrides` (#6980) @iigrik
+- [DataGridPro] Fix lazy-loaded rows not working with `updateRows` API method (#6875) @cherniavskii
+- [l10n] Fix translation of `filterOperatorBefore` in Arabic (ar-SD) locale (#6917) @HassanGhazy
+
+### `@mui/x-date-pickers@v5.0.9` / `@mui/x-date-pickers-pro@v5.0.9`
+
+#### Changes
+
+- [pickers] Fix usage with Shadow DOM (#6971) @flaviendelangle
+
+### Docs
+
+- [docs] Add new "Expired package version" error type (#6937) @oliviertassinari
+- [docs] Enforce values for installation options in Date / Time pickers Getting Started page (#6896) @01zulfi
+- [docs] Fix live edit @oliviertassinari
+- [docs] Upgrade to Next 13 (#6911) @cherniavskii
+
+### Core
+
+- [core] Upgrade monorepo (#6906) @cherniavskii
+- [core] Upgrade node to v14.21 (#6939) @piwysocki
+
+## 5.17.12
+
+_Nov 17, 2022_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Finnish (fi-FI) locale (#6859) @RainoPikkarainen
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.12` / `@mui/x-data-grid-pro@v5.17.12` / `@mui/x-data-grid-premium@v5.17.12`
+
+#### Changes
+
+- [DataGrid] Fix conflict with the latest version of `@types/react` (#6883) @vizv
+- [DataGridPremium] Support aggregating data from multiple row fields (#6844) @cherniavskii
+- [DataGridPro] Fix detail panel not working with `getRowSpacing` prop (#6858) @cherniavskii
+- [l10n] Improve Finnish (fi-FI) locale (#6859) @RainoPikkarainen
+
+### Docs
+
+- [docs] Clarify DataGrid Row Pinning docs (#6891) @cherniavskii
+
+### Core
+
+- [core] Upgrade monorepo (#6864) @m4theushw
+- [license] Polish error messages (#6881) @oliviertassinari
+
+## 5.17.11
+
+_Nov 10, 2022_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.11` / `@mui/x-data-grid-pro@v5.17.11` / `@mui/x-data-grid-premium@v5.17.11`
+
+#### Changes
+
+- [DataGrid] Fix for cell focus preventing scroll when virtualization enabled (#6622) @yaredtsy
+- [DataGridPro] Opt-out for column jump back on re-order (#6697) @gavbrennan
+
+### `@mui/x-date-pickers@v5.0.8` / `@mui/x-date-pickers-pro@v5.0.8`
+
+#### Changes
+
+- [pickers] Fix pickers toolbar styling (#6793) @LukasTy
+
+### Docs
+
+- [docs] Fix link to localization page (#6766) @alexfauquette
+
+### Core
+
+- [license] Add new license status 'Out of scope' (#6774) @oliviertassinari
+
 ## 5.17.10
 
 _Nov 4, 2022_

package/DatePicker/DatePickerToolbar.js

@@ -6,7 +6,6 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { PickersToolbar } from '../internals/components/PickersToolbar';
-import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { isYearAndMonthViews, isYearOnlyView } from './shared';
 import { getDatePickerToolbarUtilityClass } from './datePickerToolbarClasses';
@@ -27,12 +26,7 @@ const DatePickerToolbarRoot = styled(PickersToolbar, {
   name: 'MuiDatePickerToolbar',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
-})({
-  [`& .${pickersToolbarClasses.penIconButton}`]: {
-    position: 'relative',
-    top: 4
-  }
-});
+})({});
 const DatePickerToolbarTitle = styled(Typography, {
   name: 'MuiDatePickerToolbar',
   slot: 'Title',
@@ -97,7 +91,6 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
     isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
     toggleMobileKeyboardView: toggleMobileKeyboardView,
     isLandscape: isLandscape,
-    ownerState: ownerState,
     className: classes.root
   }, other, {
     children: /*#__PURE__*/_jsx(DatePickerToolbarTitle, {

package/DateTimePicker/DateTimePickerToolbar.js

@@ -1,5 +1,5 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["ampm", "parsedValue", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
 import * as React from 'react';
 import { styled, useThemeProps } from '@mui/material/styles';
@@ -30,16 +30,22 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, {
   name: 'MuiDateTimePickerToolbar',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})({
+})(({
+  theme
+}) => ({
   paddingLeft: 16,
   paddingRight: 16,
   justifyContent: 'space-around',
-  [`& .${pickersToolbarClasses.penIconButton}`]: {
+  position: 'relative',
+  [`& .${pickersToolbarClasses.penIconButton}`]: _extends({
     position: 'absolute',
-    top: 8,
+    top: 8
+  }, theme.direction === 'rtl' ? {
+    left: 8
+  } : {
     right: 8
-  }
-});
+  })
+}));
 const DateTimePickerToolbarDateContainer = styled('div', {
   name: 'MuiDateTimePickerToolbar',
   slot: 'DateContainer',

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.7
+/** @license MUI v5.0.9
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internals/components/PickersPopper.js

@@ -11,6 +11,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { PickersActionBar } from '../../PickersActionBar';
 import { getPickersPopperUtilityClass } from './pickersPopperClasses';
+import { getActiveElement } from '../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -213,7 +214,7 @@ export function PickersPopper(inProps) {
     }
 
     if (open) {
-      lastFocusedElementRef.current = document.activeElement;
+      lastFocusedElementRef.current = getActiveElement(document);
     } else if (lastFocusedElementRef.current && lastFocusedElementRef.current instanceof HTMLElement) {
       // make sure the button is flushed with updated label, before returning focus to it
       // avoids issue, where screen reader could fail to announce selected date after selection

package/internals/components/PickersToolbar.js

@@ -49,9 +49,13 @@ const PickersToolbarContent = styled(Grid, {
   name: 'MuiPickersToolbar',
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content
-})({
+})(({
+  ownerState
+}) => _extends({
   flex: 1
-});
+}, !ownerState.isLandscape && {
+  alignItems: 'center'
+}));
 const PickersToolbarPenIconButton = styled(IconButton, {
   name: 'MuiPickersToolbar',
   slot: 'PenIconButton',

package/internals/components/PickersToolbarText.d.ts

@@ -6,4 +6,4 @@ export interface PickersToolbarTextProps extends Omit<TypographyProps, 'classes'
     value: React.ReactNode;
     classes?: Partial<PickersToolbarTextClasses>;
 }
-export declare const PickersToolbarText: React.ForwardRefExoticComponent<Pick<PickersToolbarTextProps, "selected" | "p" | "slot" | "style" | "title" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "translate" | "className" | "classes" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping" | "value"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const PickersToolbarText: React.ForwardRefExoticComponent<Pick<PickersToolbarTextProps, "selected" | "p" | "slot" | "style" | "title" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "translate" | "className" | "classes" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping" | "value"> & React.RefAttributes<HTMLSpanElement>>;

package/internals/components/wrappers/DesktopTooltipWrapper.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useForkRef } from '@mui/material/utils';
 import { WrapperVariantContext } from './WrapperVariantContext';
-import { executeInTheNextEventLoopTick } from '../../utils/utils';
+import { executeInTheNextEventLoopTick, getActiveElement } from '../../utils/utils';
 import { PickersPopper } from '../PickersPopper';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -30,7 +30,7 @@ export function DesktopTooltipWrapper(props) {
     executeInTheNextEventLoopTick(() => {
       var _inputContainerRef$cu, _popperRef$current;
 
-      if ((_inputContainerRef$cu = inputContainerRef.current) != null && _inputContainerRef$cu.contains(document.activeElement) || (_popperRef$current = popperRef.current) != null && _popperRef$current.contains(document.activeElement)) {
+      if ((_inputContainerRef$cu = inputContainerRef.current) != null && _inputContainerRef$cu.contains(getActiveElement(document)) || (_popperRef$current = popperRef.current) != null && _popperRef$current.contains(getActiveElement(document))) {
         return;
       }
 

package/internals/utils/utils.d.ts

@@ -3,3 +3,4 @@ export declare function arrayIncludes<T>(array: T[] | readonly T[], itemOrItems:
 export declare const onSpaceOrEnter: (innerFn: (ev: React.MouseEvent<any> | React.KeyboardEvent<any>) => void, onFocus?: ((event: React.KeyboardEvent<any>) => void) | undefined) => (event: React.KeyboardEvent) => void;
 export declare const executeInTheNextEventLoopTick: (fn: () => void) => void;
 export declare const doNothing: () => void;
+export declare const getActiveElement: (root?: Document | ShadowRoot) => Element | null;

package/internals/utils/utils.js

@@ -21,4 +21,18 @@ export const onSpaceOrEnter = (innerFn, onFocus) => event => {
 export const executeInTheNextEventLoopTick = fn => {
   setTimeout(fn, 0);
 };
-export const doNothing = () => {};
+export const doNothing = () => {}; // https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
+
+export const getActiveElement = (root = document) => {
+  const activeEl = root.activeElement;
+
+  if (!activeEl) {
+    return null;
+  }
+
+  if (activeEl.shadowRoot) {
+    return getActiveElement(activeEl.shadowRoot);
+  }
+
+  return activeEl;
+};

package/legacy/DatePicker/DatePickerToolbar.js

@@ -1,13 +1,11 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _excluded = ["parsedValue", "isLandscape", "isMobileKeyboardViewOpen", "onChange", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { PickersToolbar } from '../internals/components/PickersToolbar';
-import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { isYearAndMonthViews, isYearOnlyView } from './shared';
 import { getDatePickerToolbarUtilityClass } from './datePickerToolbarClasses';
@@ -28,10 +26,7 @@ var DatePickerToolbarRoot = styled(PickersToolbar, {
   overridesResolver: function overridesResolver(_, styles) {
     return styles.root;
   }
-})(_defineProperty({}, "& .".concat(pickersToolbarClasses.penIconButton), {
-  position: 'relative',
-  top: 4
-}));
+})({});
 var DatePickerToolbarTitle = styled(Typography, {
   name: 'MuiDatePickerToolbar',
   slot: 'Title',
@@ -99,7 +94,6 @@ export var DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePicker
     isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
     toggleMobileKeyboardView: toggleMobileKeyboardView,
     isLandscape: isLandscape,
-    ownerState: ownerState,
     className: classes.root
   }, other, {
     children: /*#__PURE__*/_jsx(DatePickerToolbarTitle, {

package/legacy/DateTimePicker/DateTimePickerToolbar.js

@@ -1,6 +1,6 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
 var _excluded = ["ampm", "parsedValue", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
 import * as React from 'react';
 import { styled, useThemeProps } from '@mui/material/styles';
@@ -31,15 +31,22 @@ var DateTimePickerToolbarRoot = styled(PickersToolbar, {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.root;
   }
-})(_defineProperty({
-  paddingLeft: 16,
-  paddingRight: 16,
-  justifyContent: 'space-around'
-}, "& .".concat(pickersToolbarClasses.penIconButton), {
-  position: 'absolute',
-  top: 8,
-  right: 8
-}));
+})(function (_ref) {
+  var theme = _ref.theme;
+  return _defineProperty({
+    paddingLeft: 16,
+    paddingRight: 16,
+    justifyContent: 'space-around',
+    position: 'relative'
+  }, "& .".concat(pickersToolbarClasses.penIconButton), _extends({
+    position: 'absolute',
+    top: 8
+  }, theme.direction === 'rtl' ? {
+    left: 8
+  } : {
+    right: 8
+  }));
+});
 var DateTimePickerToolbarDateContainer = styled('div', {
   name: 'MuiDateTimePickerToolbar',
   slot: 'DateContainer',

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.7
+/** @license MUI v5.0.9
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/internals/components/PickersPopper.js

@@ -12,6 +12,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { PickersActionBar } from '../../PickersActionBar';
 import { getPickersPopperUtilityClass } from './pickersPopperClasses';
+import { getActiveElement } from '../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -219,7 +220,7 @@ export function PickersPopper(inProps) {
     }
 
     if (open) {
-      lastFocusedElementRef.current = document.activeElement;
+      lastFocusedElementRef.current = getActiveElement(document);
     } else if (lastFocusedElementRef.current && lastFocusedElementRef.current instanceof HTMLElement) {
       // make sure the button is flushed with updated label, before returning focus to it
       // avoids issue, where screen reader could fail to announce selected date after selection

package/legacy/internals/components/PickersToolbar.js

@@ -53,8 +53,13 @@ var PickersToolbarContent = styled(Grid, {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.content;
   }
-})({
-  flex: 1
+})(function (_ref2) {
+  var ownerState = _ref2.ownerState;
+  return _extends({
+    flex: 1
+  }, !ownerState.isLandscape && {
+    alignItems: 'center'
+  });
 });
 var PickersToolbarPenIconButton = styled(IconButton, {
   name: 'MuiPickersToolbar',

package/legacy/internals/components/wrappers/DesktopTooltipWrapper.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useForkRef } from '@mui/material/utils';
 import { WrapperVariantContext } from './WrapperVariantContext';
-import { executeInTheNextEventLoopTick } from '../../utils/utils';
+import { executeInTheNextEventLoopTick, getActiveElement } from '../../utils/utils';
 import { PickersPopper } from '../PickersPopper';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,7 +28,7 @@ export function DesktopTooltipWrapper(props) {
     executeInTheNextEventLoopTick(function () {
       var _inputContainerRef$cu, _popperRef$current;
 
-      if ((_inputContainerRef$cu = inputContainerRef.current) != null && _inputContainerRef$cu.contains(document.activeElement) || (_popperRef$current = popperRef.current) != null && _popperRef$current.contains(document.activeElement)) {
+      if ((_inputContainerRef$cu = inputContainerRef.current) != null && _inputContainerRef$cu.contains(getActiveElement(document)) || (_popperRef$current = popperRef.current) != null && _popperRef$current.contains(getActiveElement(document))) {
         return;
       }
 

package/legacy/internals/utils/utils.js

@@ -25,4 +25,19 @@ export var onSpaceOrEnter = function onSpaceOrEnter(innerFn, onFocus) {
 export var executeInTheNextEventLoopTick = function executeInTheNextEventLoopTick(fn) {
   setTimeout(fn, 0);
 };
-export var doNothing = function doNothing() {};
+export var doNothing = function doNothing() {}; // https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
+
+export var getActiveElement = function getActiveElement() {
+  var root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
+  var activeEl = root.activeElement;
+
+  if (!activeEl) {
+    return null;
+  }
+
+  if (activeEl.shadowRoot) {
+    return getActiveElement(activeEl.shadowRoot);
+  }
+
+  return activeEl;
+};

package/modern/DatePicker/DatePickerToolbar.js

@@ -6,7 +6,6 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { PickersToolbar } from '../internals/components/PickersToolbar';
-import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { isYearAndMonthViews, isYearOnlyView } from './shared';
 import { getDatePickerToolbarUtilityClass } from './datePickerToolbarClasses';
@@ -27,12 +26,7 @@ const DatePickerToolbarRoot = styled(PickersToolbar, {
   name: 'MuiDatePickerToolbar',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
-})({
-  [`& .${pickersToolbarClasses.penIconButton}`]: {
-    position: 'relative',
-    top: 4
-  }
-});
+})({});
 const DatePickerToolbarTitle = styled(Typography, {
   name: 'MuiDatePickerToolbar',
   slot: 'Title',
@@ -97,7 +91,6 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
     isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
     toggleMobileKeyboardView: toggleMobileKeyboardView,
     isLandscape: isLandscape,
-    ownerState: ownerState,
     className: classes.root
   }, other, {
     children: /*#__PURE__*/_jsx(DatePickerToolbarTitle, {

package/modern/DateTimePicker/DateTimePickerToolbar.js

@@ -1,5 +1,5 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["ampm", "parsedValue", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
 import * as React from 'react';
 import { styled, useThemeProps } from '@mui/material/styles';
@@ -30,16 +30,22 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, {
   name: 'MuiDateTimePickerToolbar',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})({
+})(({
+  theme
+}) => ({
   paddingLeft: 16,
   paddingRight: 16,
   justifyContent: 'space-around',
-  [`& .${pickersToolbarClasses.penIconButton}`]: {
+  position: 'relative',
+  [`& .${pickersToolbarClasses.penIconButton}`]: _extends({
     position: 'absolute',
-    top: 8,
+    top: 8
+  }, theme.direction === 'rtl' ? {
+    left: 8
+  } : {
     right: 8
-  }
-});
+  })
+}));
 const DateTimePickerToolbarDateContainer = styled('div', {
   name: 'MuiDateTimePickerToolbar',
   slot: 'DateContainer',

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.7
+/** @license MUI v5.0.9
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/internals/components/PickersPopper.js

@@ -11,6 +11,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { PickersActionBar } from '../../PickersActionBar';
 import { getPickersPopperUtilityClass } from './pickersPopperClasses';
+import { getActiveElement } from '../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -211,7 +212,7 @@ export function PickersPopper(inProps) {
     }
 
     if (open) {
-      lastFocusedElementRef.current = document.activeElement;
+      lastFocusedElementRef.current = getActiveElement(document);
     } else if (lastFocusedElementRef.current && lastFocusedElementRef.current instanceof HTMLElement) {
       // make sure the button is flushed with updated label, before returning focus to it
       // avoids issue, where screen reader could fail to announce selected date after selection

package/modern/internals/components/PickersToolbar.js

@@ -49,9 +49,13 @@ const PickersToolbarContent = styled(Grid, {
   name: 'MuiPickersToolbar',
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content
-})({
+})(({
+  ownerState
+}) => _extends({
   flex: 1
-});
+}, !ownerState.isLandscape && {
+  alignItems: 'center'
+}));
 const PickersToolbarPenIconButton = styled(IconButton, {
   name: 'MuiPickersToolbar',
   slot: 'PenIconButton',

package/modern/internals/components/wrappers/DesktopTooltipWrapper.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useForkRef } from '@mui/material/utils';
 import { WrapperVariantContext } from './WrapperVariantContext';
-import { executeInTheNextEventLoopTick } from '../../utils/utils';
+import { executeInTheNextEventLoopTick, getActiveElement } from '../../utils/utils';
 import { PickersPopper } from '../PickersPopper';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,7 +28,7 @@ export function DesktopTooltipWrapper(props) {
 
   const handleBlur = () => {
     executeInTheNextEventLoopTick(() => {
-      if (inputContainerRef.current?.contains(document.activeElement) || popperRef.current?.contains(document.activeElement)) {
+      if (inputContainerRef.current?.contains(getActiveElement(document)) || popperRef.current?.contains(getActiveElement(document))) {
         return;
       }
 

package/modern/internals/utils/utils.js

@@ -21,4 +21,18 @@ export const onSpaceOrEnter = (innerFn, onFocus) => event => {
 export const executeInTheNextEventLoopTick = fn => {
   setTimeout(fn, 0);
 };
-export const doNothing = () => {};
+export const doNothing = () => {}; // https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
+
+export const getActiveElement = (root = document) => {
+  const activeEl = root.activeElement;
+
+  if (!activeEl) {
+    return null;
+  }
+
+  if (activeEl.shadowRoot) {
+    return getActiveElement(activeEl.shadowRoot);
+  }
+
+  return activeEl;
+};

package/node/DatePicker/DatePickerToolbar.js

@@ -21,8 +21,6 @@ var _material = require("@mui/material");
 
 var _PickersToolbar = require("../internals/components/PickersToolbar");
 
-var _pickersToolbarClasses = require("../internals/components/pickersToolbarClasses");
-
 var _useUtils = require("../internals/hooks/useUtils");
 
 var _shared = require("./shared");
@@ -52,12 +50,7 @@ const DatePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToolbar
   name: 'MuiDatePickerToolbar',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
-})({
-  [`& .${_pickersToolbarClasses.pickersToolbarClasses.penIconButton}`]: {
-    position: 'relative',
-    top: 4
-  }
-});
+})({});
 const DatePickerToolbarTitle = (0, _styles.styled)(_Typography.default, {
   name: 'MuiDatePickerToolbar',
   slot: 'Title',
@@ -120,7 +113,6 @@ const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolb
     isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
     toggleMobileKeyboardView: toggleMobileKeyboardView,
     isLandscape: isLandscape,
-    ownerState: ownerState,
     className: classes.root
   }, other, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DatePickerToolbarTitle, {

package/node/DateTimePicker/DateTimePickerToolbar.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DateTimePickerToolbar = DateTimePickerToolbar;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _styles = require("@mui/material/styles");
@@ -54,16 +54,22 @@ const DateTimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToo
   name: 'MuiDateTimePickerToolbar',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})({
+})(({
+  theme
+}) => ({
   paddingLeft: 16,
   paddingRight: 16,
   justifyContent: 'space-around',
-  [`& .${_pickersToolbarClasses.pickersToolbarClasses.penIconButton}`]: {
+  position: 'relative',
+  [`& .${_pickersToolbarClasses.pickersToolbarClasses.penIconButton}`]: (0, _extends2.default)({
     position: 'absolute',
-    top: 8,
+    top: 8
+  }, theme.direction === 'rtl' ? {
+    left: 8
+  } : {
     right: 8
-  }
-});
+  })
+}));
 const DateTimePickerToolbarDateContainer = (0, _styles.styled)('div', {
   name: 'MuiDateTimePickerToolbar',
   slot: 'DateContainer',

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.7
+/** @license MUI v5.0.9
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/internals/components/PickersPopper.js

@@ -31,6 +31,8 @@ var _PickersActionBar = require("../../PickersActionBar");
 
 var _pickersPopperClasses = require("./pickersPopperClasses");
 
+var _utils2 = require("../utils/utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["onClick", "onTouchStart"];
@@ -238,7 +240,7 @@ function PickersPopper(inProps) {
     }
 
     if (open) {
-      lastFocusedElementRef.current = document.activeElement;
+      lastFocusedElementRef.current = (0, _utils2.getActiveElement)(document);
     } else if (lastFocusedElementRef.current && lastFocusedElementRef.current instanceof HTMLElement) {
       // make sure the button is flushed with updated label, before returning focus to it
       // avoids issue, where screen reader could fail to announce selected date after selection

package/node/internals/components/PickersToolbar.js

@@ -72,9 +72,13 @@ const PickersToolbarContent = (0, _styles.styled)(_Grid.default, {
   name: 'MuiPickersToolbar',
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content
-})({
+})(({
+  ownerState
+}) => (0, _extends2.default)({
   flex: 1
-});
+}, !ownerState.isLandscape && {
+  alignItems: 'center'
+}));
 const PickersToolbarPenIconButton = (0, _styles.styled)(_IconButton.default, {
   name: 'MuiPickersToolbar',
   slot: 'PenIconButton',

package/node/internals/components/wrappers/DesktopTooltipWrapper.js

@@ -49,7 +49,7 @@ function DesktopTooltipWrapper(props) {
     (0, _utils2.executeInTheNextEventLoopTick)(() => {
       var _inputContainerRef$cu, _popperRef$current;
 
-      if ((_inputContainerRef$cu = inputContainerRef.current) != null && _inputContainerRef$cu.contains(document.activeElement) || (_popperRef$current = popperRef.current) != null && _popperRef$current.contains(document.activeElement)) {
+      if ((_inputContainerRef$cu = inputContainerRef.current) != null && _inputContainerRef$cu.contains((0, _utils2.getActiveElement)(document)) || (_popperRef$current = popperRef.current) != null && _popperRef$current.contains((0, _utils2.getActiveElement)(document))) {
         return;
       }
 

package/node/internals/utils/utils.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.arrayIncludes = arrayIncludes;
-exports.onSpaceOrEnter = exports.executeInTheNextEventLoopTick = exports.doNothing = void 0;
+exports.onSpaceOrEnter = exports.getActiveElement = exports.executeInTheNextEventLoopTick = exports.doNothing = void 0;
 
 /* Use it instead of .includes method for IE support */
 function arrayIncludes(array, itemOrItems) {
@@ -36,6 +36,23 @@ const executeInTheNextEventLoopTick = fn => {
 
 exports.executeInTheNextEventLoopTick = executeInTheNextEventLoopTick;
 
-const doNothing = () => {};
+const doNothing = () => {}; // https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
 
-exports.doNothing = doNothing;
+
+exports.doNothing = doNothing;
+
+const getActiveElement = (root = document) => {
+  const activeEl = root.activeElement;
+
+  if (!activeEl) {
+    return null;
+  }
+
+  if (activeEl.shadowRoot) {
+    return getActiveElement(activeEl.shadowRoot);
+  }
+
+  return activeEl;
+};
+
+exports.getActiveElement = getActiveElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "5.0.7",
+  "version": "5.0.9",
   "description": "The community edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",