@mui/x-date-pickers 5.0.6 → 5.0.8

package/CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Ukrainian (uk-UA) locale to pickers (#6661) @Dufran
+
+### `@mui/x-data-grid@v5.17.10` / `@mui/x-data-grid-pro@v5.17.10` / `@mui/x-data-grid-premium@v5.17.10`
+
+#### Changes
+
+- [DataGrid] Remove `React.memo` from `GridCellCheckboxRenderer` (#6688) @mattcorner
+
+### `@mui/x-date-pickers@v5.0.7` / `@mui/x-date-pickers-pro@v5.0.7`
+
+#### Changes
+
+- [DateRangePicker] Fix input focused style and mobile behaviour (#6645) (#6714) @LukasTy
+- [pickers] Add Ukrainian (uk-UA) locale on the date picker (#6661) @Dufran
+
+### Docs
+
+- [docs] Mark data grid column group available (#6659) @alexfauquette
+
 ## 5.17.9
 
 _Oct 28, 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.6
+/** @license MUI v5.0.8
  *
  * 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/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/utils/utils.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 export declare function arrayIncludes<T>(array: T[] | readonly T[], itemOrItems: T | T[]): boolean;
-export declare const onSpaceOrEnter: (innerFn: () => void, onFocus?: ((event: React.KeyboardEvent<any>) => void) | undefined) => (event: React.KeyboardEvent) => void;
+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;

package/internals/utils/utils.js

@@ -8,7 +8,7 @@ export function arrayIncludes(array, itemOrItems) {
 }
 export const onSpaceOrEnter = (innerFn, onFocus) => event => {
   if (event.key === 'Enter' || event.key === ' ') {
-    innerFn(); // prevent any side effects
+    innerFn(event); // prevent any side effects
 
     event.preventDefault();
     event.stopPropagation();

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.6
+/** @license MUI v5.0.8
  *
  * 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/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/utils/utils.js

@@ -11,7 +11,7 @@ export function arrayIncludes(array, itemOrItems) {
 export var onSpaceOrEnter = function onSpaceOrEnter(innerFn, onFocus) {
   return function (event) {
     if (event.key === 'Enter' || event.key === ' ') {
-      innerFn(); // prevent any side effects
+      innerFn(event); // prevent any side effects
 
       event.preventDefault();
       event.stopPropagation();

package/legacy/locales/index.js

@@ -15,4 +15,5 @@ export * from './zhCN';
 export * from './koKR';
 export * from './isIS';
 export * from './jaJP';
+export * from './ukUA';
 export * from './utils/pickersLocaleTextApi';

package/legacy/locales/ukUA.js

@@ -0,0 +1,53 @@
+import { getPickersLocalization } from './utils/getPickersLocalization';
+// This object is not Partial<PickersLocaleText> because it is the default values
+var ukUAPickers = {
+  // Calendar navigation
+  previousMonth: 'Попередній місяць',
+  nextMonth: 'Наступний місяць',
+  // View navigation
+  openPreviousView: 'відкрити попередній вигляд',
+  openNextView: 'відкрити наступний вигляд',
+  calendarViewSwitchingButtonAriaLabel: function calendarViewSwitchingButtonAriaLabel(view) {
+    return view === 'year' ? 'річний вигляд відкрито, перейти до календарного вигляду' : 'календарний вигляд відкрито, перейти до річного вигляду';
+  },
+  inputModeToggleButtonAriaLabel: function inputModeToggleButtonAriaLabel(isKeyboardInputOpen, viewType) {
+    return isKeyboardInputOpen ? "\u0442\u0435\u043A\u0441\u0442\u043E\u0432\u0435 \u043F\u043E\u043B\u0435 \u0432\u0456\u0434\u043A\u0440\u0438\u0442\u0435, \u043F\u0435\u0440\u0435\u0439\u0442\u0438 \u0434\u043E  ".concat(viewType, " \u0432\u0438\u0433\u043B\u044F\u0434\u0443") : "".concat(viewType, " \u0432\u0438\u0433\u043B\u044F\u0434 \u043D\u0430\u0440\u0430\u0437\u0456 \u0432\u0456\u0434\u043A\u0440\u0438\u0442\u043E, \u043F\u0435\u0440\u0435\u0439\u0442\u0438 \u0434\u043E \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u043F\u043E\u043B\u044F");
+  },
+  // DateRange placeholders
+  start: 'Початок',
+  end: 'Кінець',
+  // Action bar
+  cancelButtonLabel: 'Відміна',
+  clearButtonLabel: 'Очистити',
+  okButtonLabel: 'OK',
+  todayButtonLabel: 'Сьогодні',
+  // Toolbar titles
+  datePickerDefaultToolbarTitle: 'Вибрати дату',
+  dateTimePickerDefaultToolbarTitle: 'Вибрати дату і час',
+  timePickerDefaultToolbarTitle: 'Вибрати час',
+  dateRangePickerDefaultToolbarTitle: 'Вибрати календарний період',
+  // Clock labels
+  clockLabelText: function clockLabelText(view, time, adapter) {
+    return "Select ".concat(view, ". ").concat(time === null ? 'Час не вибраний' : "\u0412\u0438\u0431\u0440\u0430\u043D\u043E \u0447\u0430\u0441 ".concat(adapter.format(time, 'fullTime')));
+  },
+  hoursClockNumberText: function hoursClockNumberText(hours) {
+    return "".concat(hours, " \u0433\u043E\u0434\u0438\u043D");
+  },
+  minutesClockNumberText: function minutesClockNumberText(minutes) {
+    return "".concat(minutes, " \u0445\u0432\u0438\u043B\u0438\u043D");
+  },
+  secondsClockNumberText: function secondsClockNumberText(seconds) {
+    return "".concat(seconds, " \u0441\u0435\u043A\u0443\u043D\u0434");
+  },
+  // Open picker labels
+  openDatePickerDialogue: function openDatePickerDialogue(value, utils) {
+    return value !== null && utils.isValid(value) ? "\u041E\u0431\u0435\u0440\u0456\u0442\u044C \u0434\u0430\u0442\u0443, \u043E\u0431\u0440\u0430\u043D\u0430 \u0434\u0430\u0442\u0430  ".concat(utils.format(value, 'fullDate')) : 'Оберіть дату';
+  },
+  openTimePickerDialogue: function openTimePickerDialogue(value, utils) {
+    return value !== null && utils.isValid(value) ? "\u041E\u0431\u0435\u0440\u0456\u0442\u044C \u0447\u0430\u0441, \u043E\u0431\u0440\u0430\u043D\u0438\u0439 \u0447\u0430\u0441  ".concat(utils.format(value, 'fullTime')) : 'Оберіть час';
+  },
+  // Table labels
+  timeTableLabel: 'оберіть час',
+  dateTableLabel: 'оберіть дату'
+};
+export var ukUA = getPickersLocalization(ukUAPickers);

package/locales/index.d.ts

@@ -15,4 +15,5 @@ export * from './zhCN';
 export * from './koKR';
 export * from './isIS';
 export * from './jaJP';
+export * from './ukUA';
 export * from './utils/pickersLocaleTextApi';

package/locales/index.js

@@ -15,4 +15,5 @@ export * from './zhCN';
 export * from './koKR';
 export * from './isIS';
 export * from './jaJP';
+export * from './ukUA';
 export * from './utils/pickersLocaleTextApi';

package/locales/ukUA.d.ts

@@ -0,0 +1,35 @@
+import { CalendarPickerView } from '../internals/models';
+export declare const ukUA: {
+    components: {
+        MuiLocalizationProvider: {
+            defaultProps: {
+                localeText: {
+                    previousMonth?: string | undefined;
+                    nextMonth?: string | undefined;
+                    openPreviousView?: string | undefined;
+                    openNextView?: string | undefined;
+                    cancelButtonLabel?: string | undefined;
+                    clearButtonLabel?: string | undefined;
+                    okButtonLabel?: string | undefined;
+                    todayButtonLabel?: string | undefined;
+                    start?: string | undefined;
+                    end?: string | undefined;
+                    calendarViewSwitchingButtonAriaLabel?: ((currentView: CalendarPickerView) => string) | undefined;
+                    inputModeToggleButtonAriaLabel?: ((isKeyboardInputOpen: boolean, viewType: "calendar" | "clock") => string) | undefined;
+                    clockLabelText?: ((view: import("../internals/models").ClockPickerView, time: any, adapter: import("../internals/models").MuiPickersAdapter<any>) => string) | undefined;
+                    hoursClockNumberText?: ((hours: string) => string) | undefined;
+                    minutesClockNumberText?: ((minutes: string) => string) | undefined;
+                    secondsClockNumberText?: ((seconds: string) => string) | undefined;
+                    openDatePickerDialogue?: ((date: any, utils: import("../internals/models").MuiPickersAdapter<any>) => string) | undefined;
+                    openTimePickerDialogue?: ((date: any, utils: import("../internals/models").MuiPickersAdapter<any>) => string) | undefined;
+                    timeTableLabel?: string | undefined;
+                    dateTableLabel?: string | undefined;
+                    datePickerDefaultToolbarTitle?: string | undefined;
+                    dateTimePickerDefaultToolbarTitle?: string | undefined;
+                    timePickerDefaultToolbarTitle?: string | undefined;
+                    dateRangePickerDefaultToolbarTitle?: string | undefined;
+                };
+            };
+        };
+    };
+};

package/locales/ukUA.js

@@ -0,0 +1,37 @@
+import { getPickersLocalization } from './utils/getPickersLocalization';
+// This object is not Partial<PickersLocaleText> because it is the default values
+const ukUAPickers = {
+  // Calendar navigation
+  previousMonth: 'Попередній місяць',
+  nextMonth: 'Наступний місяць',
+  // View navigation
+  openPreviousView: 'відкрити попередній вигляд',
+  openNextView: 'відкрити наступний вигляд',
+  calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'річний вигляд відкрито, перейти до календарного вигляду' : 'календарний вигляд відкрито, перейти до річного вигляду',
+  inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) => isKeyboardInputOpen ? `текстове поле відкрите, перейти до  ${viewType} вигляду` : `${viewType} вигляд наразі відкрито, перейти до текстового поля`,
+  // DateRange placeholders
+  start: 'Початок',
+  end: 'Кінець',
+  // Action bar
+  cancelButtonLabel: 'Відміна',
+  clearButtonLabel: 'Очистити',
+  okButtonLabel: 'OK',
+  todayButtonLabel: 'Сьогодні',
+  // Toolbar titles
+  datePickerDefaultToolbarTitle: 'Вибрати дату',
+  dateTimePickerDefaultToolbarTitle: 'Вибрати дату і час',
+  timePickerDefaultToolbarTitle: 'Вибрати час',
+  dateRangePickerDefaultToolbarTitle: 'Вибрати календарний період',
+  // Clock labels
+  clockLabelText: (view, time, adapter) => `Select ${view}. ${time === null ? 'Час не вибраний' : `Вибрано час ${adapter.format(time, 'fullTime')}`}`,
+  hoursClockNumberText: hours => `${hours} годин`,
+  minutesClockNumberText: minutes => `${minutes} хвилин`,
+  secondsClockNumberText: seconds => `${seconds} секунд`,
+  // Open picker labels
+  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Оберіть дату, обрана дата  ${utils.format(value, 'fullDate')}` : 'Оберіть дату',
+  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Оберіть час, обраний час  ${utils.format(value, 'fullTime')}` : 'Оберіть час',
+  // Table labels
+  timeTableLabel: 'оберіть час',
+  dateTableLabel: 'оберіть дату'
+};
+export const ukUA = getPickersLocalization(ukUAPickers);

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.6
+/** @license MUI v5.0.8
  *
  * 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/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/utils/utils.js

@@ -8,7 +8,7 @@ export function arrayIncludes(array, itemOrItems) {
 }
 export const onSpaceOrEnter = (innerFn, onFocus) => event => {
   if (event.key === 'Enter' || event.key === ' ') {
-    innerFn(); // prevent any side effects
+    innerFn(event); // prevent any side effects
 
     event.preventDefault();
     event.stopPropagation();

package/modern/locales/index.js

@@ -15,4 +15,5 @@ export * from './zhCN';
 export * from './koKR';
 export * from './isIS';
 export * from './jaJP';
+export * from './ukUA';
 export * from './utils/pickersLocaleTextApi';

package/modern/locales/ukUA.js

@@ -0,0 +1,37 @@
+import { getPickersLocalization } from './utils/getPickersLocalization';
+// This object is not Partial<PickersLocaleText> because it is the default values
+const ukUAPickers = {
+  // Calendar navigation
+  previousMonth: 'Попередній місяць',
+  nextMonth: 'Наступний місяць',
+  // View navigation
+  openPreviousView: 'відкрити попередній вигляд',
+  openNextView: 'відкрити наступний вигляд',
+  calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'річний вигляд відкрито, перейти до календарного вигляду' : 'календарний вигляд відкрито, перейти до річного вигляду',
+  inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) => isKeyboardInputOpen ? `текстове поле відкрите, перейти до  ${viewType} вигляду` : `${viewType} вигляд наразі відкрито, перейти до текстового поля`,
+  // DateRange placeholders
+  start: 'Початок',
+  end: 'Кінець',
+  // Action bar
+  cancelButtonLabel: 'Відміна',
+  clearButtonLabel: 'Очистити',
+  okButtonLabel: 'OK',
+  todayButtonLabel: 'Сьогодні',
+  // Toolbar titles
+  datePickerDefaultToolbarTitle: 'Вибрати дату',
+  dateTimePickerDefaultToolbarTitle: 'Вибрати дату і час',
+  timePickerDefaultToolbarTitle: 'Вибрати час',
+  dateRangePickerDefaultToolbarTitle: 'Вибрати календарний період',
+  // Clock labels
+  clockLabelText: (view, time, adapter) => `Select ${view}. ${time === null ? 'Час не вибраний' : `Вибрано час ${adapter.format(time, 'fullTime')}`}`,
+  hoursClockNumberText: hours => `${hours} годин`,
+  minutesClockNumberText: minutes => `${minutes} хвилин`,
+  secondsClockNumberText: seconds => `${seconds} секунд`,
+  // Open picker labels
+  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Оберіть дату, обрана дата  ${utils.format(value, 'fullDate')}` : 'Оберіть дату',
+  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Оберіть час, обраний час  ${utils.format(value, 'fullTime')}` : 'Оберіть час',
+  // Table labels
+  timeTableLabel: 'оберіть час',
+  dateTableLabel: 'оберіть дату'
+};
+export const ukUA = getPickersLocalization(ukUAPickers);

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.6
+/** @license MUI v5.0.8
  *
  * 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/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/utils/utils.js

@@ -17,7 +17,7 @@ function arrayIncludes(array, itemOrItems) {
 
 const onSpaceOrEnter = (innerFn, onFocus) => event => {
   if (event.key === 'Enter' || event.key === ' ') {
-    innerFn(); // prevent any side effects
+    innerFn(event); // prevent any side effects
 
     event.preventDefault();
     event.stopPropagation();

package/node/locales/index.js

@@ -225,6 +225,19 @@ Object.keys(_jaJP).forEach(function (key) {
   });
 });
 
+var _ukUA = require("./ukUA");
+
+Object.keys(_ukUA).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ukUA[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ukUA[key];
+    }
+  });
+});
+
 var _pickersLocaleTextApi = require("./utils/pickersLocaleTextApi");
 
 Object.keys(_pickersLocaleTextApi).forEach(function (key) {

package/node/locales/ukUA.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ukUA = void 0;
+
+var _getPickersLocalization = require("./utils/getPickersLocalization");
+
+// This object is not Partial<PickersLocaleText> because it is the default values
+const ukUAPickers = {
+  // Calendar navigation
+  previousMonth: 'Попередній місяць',
+  nextMonth: 'Наступний місяць',
+  // View navigation
+  openPreviousView: 'відкрити попередній вигляд',
+  openNextView: 'відкрити наступний вигляд',
+  calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'річний вигляд відкрито, перейти до календарного вигляду' : 'календарний вигляд відкрито, перейти до річного вигляду',
+  inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) => isKeyboardInputOpen ? `текстове поле відкрите, перейти до  ${viewType} вигляду` : `${viewType} вигляд наразі відкрито, перейти до текстового поля`,
+  // DateRange placeholders
+  start: 'Початок',
+  end: 'Кінець',
+  // Action bar
+  cancelButtonLabel: 'Відміна',
+  clearButtonLabel: 'Очистити',
+  okButtonLabel: 'OK',
+  todayButtonLabel: 'Сьогодні',
+  // Toolbar titles
+  datePickerDefaultToolbarTitle: 'Вибрати дату',
+  dateTimePickerDefaultToolbarTitle: 'Вибрати дату і час',
+  timePickerDefaultToolbarTitle: 'Вибрати час',
+  dateRangePickerDefaultToolbarTitle: 'Вибрати календарний період',
+  // Clock labels
+  clockLabelText: (view, time, adapter) => `Select ${view}. ${time === null ? 'Час не вибраний' : `Вибрано час ${adapter.format(time, 'fullTime')}`}`,
+  hoursClockNumberText: hours => `${hours} годин`,
+  minutesClockNumberText: minutes => `${minutes} хвилин`,
+  secondsClockNumberText: seconds => `${seconds} секунд`,
+  // Open picker labels
+  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Оберіть дату, обрана дата  ${utils.format(value, 'fullDate')}` : 'Оберіть дату',
+  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Оберіть час, обраний час  ${utils.format(value, 'fullTime')}` : 'Оберіть час',
+  // Table labels
+  timeTableLabel: 'оберіть час',
+  dateTableLabel: 'оберіть дату'
+};
+const ukUA = (0, _getPickersLocalization.getPickersLocalization)(ukUAPickers);
+exports.ukUA = ukUA;

package/package.json

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