@mui/x-date-pickers 6.11.0 → 6.11.2

package/models/adapters.d.ts

@@ -710,6 +710,7 @@ export interface MuiPickersAdapter<TDate, TLocale = any> {
     getYearRange(start: TDate, end: TDate): TDate[];
     /**
      * Allow to customize how the "am"` and "pm" strings are rendered.
+     * @deprecated Use `utils.format(utils.setHours(utils.date()!, meridiem === 'am' ? 2 : 14), 'meridiem')` instead.
      * @param {"am" | "pm"} meridiem The string to render.
      * @return {string} The formatted string.
      */

package/models/index.d.ts

@@ -4,3 +4,4 @@ export * from './validation';
 export * from './views';
 export * from './adapters';
 export * from './common';
+export * from './pickers';

package/models/index.js

@@ -3,4 +3,5 @@ export * from './timezone';
 export * from './validation';
 export * from './views';
 export * from './adapters';
-export * from './common';
+export * from './common';
+export * from './pickers';

package/models/pickers.d.ts

@@ -0,0 +1,9 @@
+import type { PickersShortcutsItemContext } from '../PickersShortcuts';
+export interface PickerChangeHandlerContext<TError> {
+    validationError: TError;
+    /**
+     * Shortcut causing this `onChange` call.
+     * If the call has not been caused by a shortcut selection, this property will be `undefined`.
+     */
+    shortcut?: PickersShortcutsItemContext;
+}

package/models/pickers.js

@@ -0,0 +1 @@
+export {};

package/modern/DateCalendar/DateCalendar.js

@@ -484,8 +484,8 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    */
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/modern/DateField/DateField.js

@@ -84,6 +84,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @default 'primary'
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
   /**
    * Overridable components.
    * @default {}

package/modern/DatePicker/DatePicker.js

@@ -241,8 +241,8 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/modern/DateTimeField/DateTimeField.js

@@ -89,6 +89,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @default 'primary'
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
   /**
    * Overridable components.
    * @default {}

package/modern/DateTimePicker/DateTimePicker.js

@@ -279,8 +279,8 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/modern/DateTimePicker/DateTimePickerToolbar.js

@@ -12,6 +12,7 @@ import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { dateTimePickerToolbarClasses, getDateTimePickerToolbarUtilityClass } from './dateTimePickerToolbarClasses';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { MULTI_SECTION_CLOCK_SECTION_WIDTH } from '../internals/constants/dimensions';
+import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -264,14 +265,14 @@ function DateTimePickerToolbar(inProps) {
           variant: "subtitle2",
           selected: meridiemMode === 'am',
           typographyClassName: classes.ampmLabel,
-          value: utils.getMeridiemText('am'),
+          value: formatMeridiem(utils, 'am'),
           onClick: readOnly ? undefined : () => handleMeridiemChange('am'),
           disabled: disabled
         }), /*#__PURE__*/_jsx(PickersToolbarButton, {
           variant: "subtitle2",
           selected: meridiemMode === 'pm',
           typographyClassName: classes.ampmLabel,
-          value: utils.getMeridiemText('pm'),
+          value: formatMeridiem(utils, 'pm'),
           onClick: readOnly ? undefined : () => handleMeridiemChange('pm'),
           disabled: disabled
         })]
@@ -279,7 +280,7 @@ function DateTimePickerToolbar(inProps) {
         variant: "h5",
         onClick: () => onViewChange('meridiem'),
         selected: view === 'meridiem',
-        value: value && meridiemMode ? utils.getMeridiemText(meridiemMode) : '--',
+        value: value && meridiemMode ? formatMeridiem(utils, meridiemMode) : '--',
         width: MULTI_SECTION_CLOCK_SECTION_WIDTH
       })]
     })]

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -255,8 +255,8 @@ DesktopDatePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -329,8 +329,8 @@ DesktopDateTimePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -250,6 +250,11 @@ DesktopTimePicker.propTypes = {
    */
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   */
+  reduceAnimations: PropTypes.bool,
   /**
    * The currently selected sections.
    * This prop accept four formats:

package/modern/DigitalClock/DigitalClock.js

@@ -41,7 +41,9 @@ const DigitalClockRoot = styled(PickerViewRoot, {
 }) => ({
   overflowY: 'auto',
   width: '100%',
-  scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto',
+  '@media (prefers-reduced-motion: no-preference)': {
+    scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto'
+  },
   maxHeight: DIGITAL_CLOCK_VIEW_HEIGHT
 }));
 const DigitalClockList = styled(MenuList, {

package/modern/MobileDatePicker/MobileDatePicker.js

@@ -252,8 +252,8 @@ MobileDatePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -301,8 +301,8 @@ MobileDateTimePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/modern/MobileTimePicker/MobileTimePicker.js

@@ -228,6 +228,11 @@ MobileTimePicker.propTypes = {
    */
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   */
+  reduceAnimations: PropTypes.bool,
   /**
    * The currently selected sections.
    * This prop accept four formats:

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -18,6 +18,7 @@ import { getHourSectionOptions, getTimeSectionOptions } from './MultiSectionDigi
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate';
+import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -269,8 +270,8 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         }
       case 'meridiem':
         {
-          const amLabel = utils.getMeridiemText('am');
-          const pmLabel = utils.getMeridiemText('pm');
+          const amLabel = formatMeridiem(utils, 'am');
+          const pmLabel = formatMeridiem(utils, 'pm');
           return {
             onChange: handleMeridiemChange,
             items: [{

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -33,7 +33,9 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
   width: 56,
   padding: 0,
   overflow: 'hidden',
-  scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto',
+  '@media (prefers-reduced-motion: no-preference)': {
+    scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto'
+  },
   '&:hover': {
     overflowY: 'auto'
   },

package/modern/PickersDay/PickersDay.js

@@ -224,6 +224,7 @@ process.env.NODE_ENV !== "production" ? PickersDayRaw.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
+  component: PropTypes.elementType,
   /**
    * The date to show.
    */

package/modern/PickersShortcuts/PickersShortcuts.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"];
+const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"],
+  _excluded2 = ["getValue"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import List from '@mui/material/List';
@@ -19,14 +20,18 @@ function PickersShortcuts(props) {
   if (items == null || items.length === 0) {
     return null;
   }
-  const resolvedItems = items.map(item => {
-    const newValue = item.getValue({
+  const resolvedItems = items.map(_ref => {
+    let {
+        getValue
+      } = _ref,
+      item = _objectWithoutPropertiesLoose(_ref, _excluded2);
+    const newValue = getValue({
       isValid
     });
     return {
       label: item.label,
       onClick: () => {
-        onChange(newValue, changeImportance);
+        onChange(newValue, changeImportance, item);
       },
       disabled: !isValid(newValue)
     };
@@ -59,6 +64,7 @@ process.env.NODE_ENV !== "production" ? PickersShortcuts.propTypes = {
    */
   changeImportance: PropTypes.oneOf(['accept', 'set']),
   className: PropTypes.string,
+  component: PropTypes.elementType,
   /**
    * If `true`, compact vertical padding designed for keyboard and mouse input is used for
    * the list and list items.

package/modern/StaticDatePicker/StaticDatePicker.js

@@ -200,8 +200,8 @@ StaticDatePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/modern/StaticDateTimePicker/StaticDateTimePicker.js

@@ -248,8 +248,8 @@ StaticDateTimePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/modern/StaticTimePicker/StaticTimePicker.js

@@ -174,6 +174,11 @@ StaticTimePicker.propTypes = {
    */
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   */
+  reduceAnimations: PropTypes.bool,
   /**
    * Disable specific clock time.
    * @param {number} clockValue The value to check.

package/modern/TimeField/TimeField.js

@@ -89,6 +89,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @default 'primary'
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
   /**
    * Overridable components.
    * @default {}

package/modern/TimePicker/TimePicker.js

@@ -213,6 +213,11 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    */
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   */
+  reduceAnimations: PropTypes.bool,
   /**
    * The currently selected sections.
    * This prop accept four formats:

package/modern/TimePicker/TimePickerToolbar.js

@@ -12,6 +12,7 @@ import { arrayIncludes } from '../internals/utils/utils';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { getTimePickerToolbarUtilityClass, timePickerToolbarClasses } from './timePickerToolbarClasses';
+import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -179,7 +180,7 @@ function TimePickerToolbar(inProps) {
         variant: "subtitle2",
         selected: meridiemMode === 'am',
         typographyClassName: classes.ampmLabel,
-        value: utils.getMeridiemText('am'),
+        value: formatMeridiem(utils, 'am'),
         onClick: readOnly ? undefined : () => handleMeridiemChange('am'),
         disabled: disabled
       }), /*#__PURE__*/_jsx(PickersToolbarButton, {
@@ -187,7 +188,7 @@ function TimePickerToolbar(inProps) {
         variant: "subtitle2",
         selected: meridiemMode === 'pm',
         typographyClassName: classes.ampmLabel,
-        value: utils.getMeridiemText('pm'),
+        value: formatMeridiem(utils, 'pm'),
         onClick: readOnly ? undefined : () => handleMeridiemChange('pm'),
         disabled: disabled
       })]

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.11.0
+ * @mui/x-date-pickers v6.11.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -86,21 +86,20 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
     goTo: onGoToPrevious,
     label: previousLabel
   };
-  const [leftProps, rightProps] = isRTL ? [nextProps, previousProps] : [previousProps, nextProps];
   const PreviousIconButton = slots?.previousIconButton ?? PickersArrowSwitcherButton;
   const previousIconButtonProps = useSlotProps({
     elementType: PreviousIconButton,
     externalSlotProps: slotProps?.previousIconButton,
     additionalProps: {
       size: 'medium',
-      title: leftProps.label,
-      'aria-label': leftProps.label,
-      disabled: leftProps.isDisabled,
+      title: previousProps.label,
+      'aria-label': previousProps.label,
+      disabled: previousProps.isDisabled,
       edge: 'end',
-      onClick: leftProps.goTo
+      onClick: previousProps.goTo
     },
     ownerState: _extends({}, ownerState, {
-      hidden: leftProps.isHidden
+      hidden: previousProps.isHidden
     }),
     className: classes.button
   });
@@ -110,14 +109,14 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
     externalSlotProps: slotProps?.nextIconButton,
     additionalProps: {
       size: 'medium',
-      title: rightProps.label,
-      'aria-label': rightProps.label,
-      disabled: rightProps.isDisabled,
+      title: nextProps.label,
+      'aria-label': nextProps.label,
+      disabled: nextProps.isDisabled,
       edge: 'start',
-      onClick: rightProps.goTo
+      onClick: nextProps.goTo
     },
     ownerState: _extends({}, ownerState, {
-      hidden: rightProps.isHidden
+      hidden: nextProps.isHidden
     }),
     className: classes.button
   });

package/modern/internals/components/PickersPopper.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
 import Grow from '@mui/material/Grow';
+import Fade from '@mui/material/Fade';
 import MuiPaper from '@mui/material/Paper';
 import MuiPopper from '@mui/material/Popper';
 import MuiTrapFocus from '@mui/material/Unstable_TrapFocus';
@@ -9,6 +10,7 @@ import { unstable_useForkRef as useForkRef, unstable_useEventCallback as useEven
 import { styled, useThemeProps } from '@mui/material/styles';
 import { getPickersPopperUtilityClass } from './pickersPopperClasses';
 import { getActiveElement } from '../utils/utils';
+import { useDefaultReduceAnimations } from '../hooks/useDefaultReduceAnimations';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -172,7 +174,8 @@ export function PickersPopper(inProps) {
     role,
     placement,
     slots,
-    slotProps
+    slotProps,
+    reduceAnimations: inReduceAnimations
   } = props;
   React.useEffect(() => {
     function handleKeyDown(nativeEvent) {
@@ -209,6 +212,8 @@ export function PickersPopper(inProps) {
   const handlePaperRef = useForkRef(handleRef, clickAwayRef);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
+  const defaultReduceAnimations = useDefaultReduceAnimations();
+  const reduceAnimations = inReduceAnimations ?? defaultReduceAnimations;
   const handleKeyDown = event => {
     if (event.key === 'Escape') {
       // stop the propagation to avoid closing parent modal
@@ -216,7 +221,7 @@ export function PickersPopper(inProps) {
       onDismiss();
     }
   };
-  const Transition = slots?.desktopTransition ?? Grow;
+  const Transition = slots?.desktopTransition ?? reduceAnimations ? Fade : Grow;
   const TrapFocus = slots?.desktopTrapFocus ?? MuiTrapFocus;
   const Paper = slots?.desktopPaper ?? PickersPopperPaper;
   const paperProps = useSlotProps({

package/modern/internals/components/PickersToolbar.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import clsx from 'clsx';
-import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -40,16 +39,20 @@ const PickersToolbarRoot = styled('div', {
   justifyContent: 'flex-start',
   flexWrap: 'wrap'
 }));
-const PickersToolbarContent = styled(Grid, {
+const PickersToolbarContent = styled('div', {
   name: 'MuiPickersToolbar',
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content
 })(({
   ownerState
-}) => _extends({
-  flex: 1
-}, !ownerState.isLandscape && {
-  alignItems: 'center'
+}) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  width: '100%',
+  justifyContent: ownerState.isLandscape ? 'flex-start' : 'space-between',
+  flexDirection: ownerState.isLandscape ? ownerState.landscapeDirection ?? 'column' : 'row',
+  flex: 1,
+  alignItems: ownerState.isLandscape ? 'flex-start' : 'center'
 }));
 export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersToolbar(inProps, ref) {
   const props = useThemeProps({
@@ -59,8 +62,6 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
   const {
     children,
     className,
-    isLandscape,
-    landscapeDirection = 'column',
     toolbarTitle,
     hidden,
     titleId
@@ -80,12 +81,8 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
       id: titleId,
       children: toolbarTitle
     }), /*#__PURE__*/_jsx(PickersToolbarContent, {
-      container: true,
-      justifyContent: isLandscape ? 'flex-start' : 'space-between',
       className: classes.content,
       ownerState: ownerState,
-      direction: isLandscape ? landscapeDirection : 'row',
-      alignItems: isLandscape ? 'flex-start' : 'flex-end',
       children: children
     })]
   });

package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -41,7 +41,8 @@ export const useDesktopPicker = _ref => {
     readOnly,
     disabled,
     autoFocus,
-    localeText
+    localeText,
+    reduceAnimations
   } = props;
   const utils = useUtils();
   const internalInputRef = React.useRef(null);
@@ -155,6 +156,7 @@ export const useDesktopPicker = _ref => {
       slots: slots,
       slotProps: slotProps,
       shouldRestoreFocus: shouldRestoreFocus,
+      reduceAnimations: reduceAnimations,
       children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,

package/modern/internals/hooks/useField/useField.js

@@ -366,7 +366,7 @@ export const useField = params => {
     if (state.sections[selectedSectionIndexes.startIndex].contentType === 'letter') {
       return 'text';
     }
-    return 'tel';
+    return 'numeric';
   }, [selectedSectionIndexes, state.sections]);
   const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
   const shouldShowPlaceholder = !inputHasFocus && valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);

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

@@ -40,7 +40,7 @@ const shouldPublishValue = params => {
     }
     return hasChanged(dateState.lastPublishedValue);
   }
-  if (action.name === 'setValueFromShortcut' && action.changeImportance === 'accept') {
+  if (action.name === 'setValueFromShortcut') {
     // On the first view,
     // If the value is not controlled, then clicking on any value (including the one equal to `defaultValue`) should call `onChange`
     if (isCurrentValueTheDefaultValue) {
@@ -221,6 +221,11 @@ export const usePickerValue = ({
       const context = {
         validationError
       };
+
+      // TODO v7: Remove 2nd condition
+      if (action.name === 'setValueFromShortcut' && action.shortcut != null) {
+        context.shortcut = action.shortcut;
+      }
       handleValueChange(action.value, context);
     }
     if (shouldCommit && onAccept) {
@@ -283,10 +288,13 @@ export const usePickerValue = ({
     value: newValue,
     selectionState
   }));
-  const handleSelectShortcut = useEventCallback((newValue, changeImportance) => updateDate({
+
+  // TODO v7: Make changeImportance and label mandatory.
+  const handleSelectShortcut = useEventCallback((newValue, changeImportance, shortcut) => updateDate({
     name: 'setValueFromShortcut',
     value: newValue,
-    changeImportance: changeImportance ?? 'accept'
+    changeImportance: changeImportance ?? 'accept',
+    shortcut
   }));
   const handleChangeFromField = useEventCallback((newValue, context) => updateDate({
     name: 'setValueFromField',

package/modern/internals/utils/date-utils.js

@@ -80,6 +80,10 @@ export const mergeDateAndTime = (utils, dateParam, timeParam) => {
   return mergedDate;
 };
 export const getTodayDate = (utils, timezone, valueType) => valueType === 'date' ? utils.startOfDay(utils.dateWithTimezone(undefined, timezone)) : utils.dateWithTimezone(undefined, timezone);
+export const formatMeridiem = (utils, meridiem) => {
+  const date = utils.setHours(utils.date(), meridiem === 'am' ? 2 : 14);
+  return utils.format(date, 'meridiem');
+};
 const dateViews = ['year', 'month', 'day'];
 export const isDatePickerView = view => dateViews.includes(view);
 export const resolveDateFormat = (utils, {

package/modern/locales/fiFI.js

@@ -34,11 +34,10 @@ const fiFIPickers = {
   // Digital clock labels
   selectViewText: view => `Valitse ${views[view]}`,
   // Calendar labels
-  // calendarWeekNumberHeaderLabel: 'Week number',
-  // calendarWeekNumberHeaderText: '#',
-  // calendarWeekNumberAriaLabelText: weekNumber => `Week ${weekNumber}`,
-  // calendarWeekNumberText: weekNumber => `${weekNumber}`,
-
+  calendarWeekNumberHeaderLabel: 'Viikko',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: weekNumber => `Viikko ${weekNumber}`,
+  calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Valitse päivä, valittu päivä on ${utils.format(value, 'fullDate')}` : 'Valitse päivä',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Valitse aika, valittu aika on ${utils.format(value, 'fullTime')}` : 'Valitse aika',