diff --git a/docs/data/date-pickers/lifecycle/lifecycle.md b/docs/data/date-pickers/lifecycle/lifecycle.md index b5ee50f1d828..2613a2962541 100644 --- a/docs/data/date-pickers/lifecycle/lifecycle.md +++ b/docs/data/date-pickers/lifecycle/lifecycle.md @@ -51,9 +51,12 @@ In all the below scenarios, the picker closes when `onClose` is called, except i #### When the last view is completed When a selection in the last view is made, `onClose` will be called only if the `closeOnSelect` prop is equal to `true`. -By default, it is set to `true` on desktop and `false` on mobile. +The default value of `closeOnSelect` varies among the components: -Here are a few examples: +- `DatePicker` and `DateRangePicker`: `true` on desktop and `false` on mobile variants; +- `TimePicker`, `DateTimePicker` and `DateTimeRangePicker`: `false` on both desktop and mobile variants. + + Here are a few examples: :::info The examples below are using the desktop and mobile variants of the pickers, but the behavior is exactly the same when using the responsive variant (`DatePicker`, `TimePicker`, ...) on a mobile or desktop environment. @@ -225,7 +228,10 @@ You can use the second argument passed to the `onAccept` callback to get the val #### When the last view is completed When a selection in the last view is made, `onAccept` will be called only if the `closeOnSelect` prop is equal to `true` and the value has been modified since the last time `onAccept` was called. -By default, `closeOnSelect`, is set to `true` on desktop and `false` on mobile. +The default value of `closeOnSelect` varies among the components: + +- `DatePicker` and `DateRangePicker`: `true` on desktop and `false` on mobile variants; +- `TimePicker`, `DateTimePicker` and `DateTimeRangePicker`: `false` on both desktop and mobile variants. Here are a few examples: diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json index 33b4cd3a0f78..b85a303cbc79 100644 --- a/docs/pages/x/api/date-pickers/date-picker.json +++ b/docs/pages/x/api/date-pickers/date-picker.json @@ -3,7 +3,7 @@ "autoFocus": { "type": { "name": "bool" } }, "closeOnSelect": { "type": { "name": "bool" }, - "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." + "default": "`true` for desktop, `false` for mobile variant (based on the chosen wrapper and `desktopModeMediaQuery` prop)." }, "dayOfWeekFormatter": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/date-pickers/date-range-picker.json b/docs/pages/x/api/date-pickers/date-range-picker.json index a357693be539..bc287a49490b 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-range-picker.json @@ -7,7 +7,7 @@ }, "closeOnSelect": { "type": { "name": "bool" }, - "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." + "default": "`true` for desktop, `false` for mobile variants (based on the chosen wrapper and `desktopModeMediaQuery` prop)." }, "currentMonthCalendarPosition": { "type": { "name": "enum", "description": "1
| 2
| 3" }, diff --git a/docs/pages/x/api/date-pickers/date-time-picker.json b/docs/pages/x/api/date-pickers/date-time-picker.json index c0d304a92e66..54a7f613fd3b 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-picker.json @@ -3,10 +3,7 @@ "ampm": { "type": { "name": "bool" }, "default": "utils.is12HourCycleInCurrentLocale()" }, "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" }, "autoFocus": { "type": { "name": "bool" } }, - "closeOnSelect": { - "type": { "name": "bool" }, - "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." - }, + "closeOnSelect": { "type": { "name": "bool" }, "default": "false" }, "dayOfWeekFormatter": { "type": { "name": "func" }, "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker.json b/docs/pages/x/api/date-pickers/date-time-range-picker.json index d3901e8bc3a0..dcce8180673c 100644 --- a/docs/pages/x/api/date-pickers/date-time-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-range-picker.json @@ -6,10 +6,7 @@ "type": { "name": "enum", "description": "1
| 2
| 3" }, "default": "1" }, - "closeOnSelect": { - "type": { "name": "bool" }, - "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." - }, + "closeOnSelect": { "type": { "name": "bool" }, "default": "false" }, "currentMonthCalendarPosition": { "type": { "name": "enum", "description": "1
| 2
| 3" }, "default": "1" diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/docs/pages/x/api/date-pickers/desktop-date-picker.json index cc8dee6f79e6..b9f1453bafdd 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-picker.json @@ -1,10 +1,7 @@ { "props": { "autoFocus": { "type": { "name": "bool" } }, - "closeOnSelect": { - "type": { "name": "bool" }, - "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." - }, + "closeOnSelect": { "type": { "name": "bool" }, "default": "true" }, "dayOfWeekFormatter": { "type": { "name": "func" }, "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", diff --git a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json index 32abb59adbbf..06e7ec8c81ab 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json @@ -5,10 +5,7 @@ "type": { "name": "enum", "description": "1
| 2
| 3" }, "default": "2" }, - "closeOnSelect": { - "type": { "name": "bool" }, - "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." - }, + "closeOnSelect": { "type": { "name": "bool" }, "default": "true" }, "currentMonthCalendarPosition": { "type": { "name": "enum", "description": "1
| 2
| 3" }, "default": "1" diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json index 62a9ffa7411c..dc5fa97160a4 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json @@ -3,10 +3,7 @@ "ampm": { "type": { "name": "bool" }, "default": "utils.is12HourCycleInCurrentLocale()" }, "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" }, "autoFocus": { "type": { "name": "bool" } }, - "closeOnSelect": { - "type": { "name": "bool" }, - "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." - }, + "closeOnSelect": { "type": { "name": "bool" }, "default": "false" }, "dayOfWeekFormatter": { "type": { "name": "func" }, "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json index 7f2205b1922d..c6b03e66dc21 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json @@ -6,10 +6,7 @@ "type": { "name": "enum", "description": "1
| 2
| 3" }, "default": "1" }, - "closeOnSelect": { - "type": { "name": "bool" }, - "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." - }, + "closeOnSelect": { "type": { "name": "bool" }, "default": "false" }, "currentMonthCalendarPosition": { "type": { "name": "enum", "description": "1
| 2
| 3" }, "default": "1" diff --git a/docs/pages/x/api/date-pickers/desktop-time-picker.json b/docs/pages/x/api/date-pickers/desktop-time-picker.json index bc22f8994e8c..b3522ba52f61 100644 --- a/docs/pages/x/api/date-pickers/desktop-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-time-picker.json @@ -3,10 +3,7 @@ "ampm": { "type": { "name": "bool" }, "default": "utils.is12HourCycleInCurrentLocale()" }, "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" }, "autoFocus": { "type": { "name": "bool" } }, - "closeOnSelect": { - "type": { "name": "bool" }, - "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." - }, + "closeOnSelect": { "type": { "name": "bool" }, "default": "false" }, "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, diff --git a/docs/pages/x/api/date-pickers/mobile-date-picker.json b/docs/pages/x/api/date-pickers/mobile-date-picker.json index 6dcd610f508e..fcb0d81bf951 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-picker.json @@ -1,10 +1,7 @@ { "props": { "autoFocus": { "type": { "name": "bool" } }, - "closeOnSelect": { - "type": { "name": "bool" }, - "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." - }, + "closeOnSelect": { "type": { "name": "bool" }, "default": "false" }, "dayOfWeekFormatter": { "type": { "name": "func" }, "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", diff --git a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json index 4f50f20ccf6b..80648e73d42d 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json @@ -1,10 +1,7 @@ { "props": { "autoFocus": { "type": { "name": "bool" } }, - "closeOnSelect": { - "type": { "name": "bool" }, - "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." - }, + "closeOnSelect": { "type": { "name": "bool" }, "default": "false" }, "currentMonthCalendarPosition": { "type": { "name": "enum", "description": "1
| 2
| 3" }, "default": "1" diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json index 79eb455f2379..b37580faa309 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json @@ -3,10 +3,7 @@ "ampm": { "type": { "name": "bool" }, "default": "utils.is12HourCycleInCurrentLocale()" }, "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" }, "autoFocus": { "type": { "name": "bool" } }, - "closeOnSelect": { - "type": { "name": "bool" }, - "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." - }, + "closeOnSelect": { "type": { "name": "bool" }, "default": "false" }, "dayOfWeekFormatter": { "type": { "name": "func" }, "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json index 9228bf05b26d..23ed79617d54 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json @@ -2,10 +2,7 @@ "props": { "ampm": { "type": { "name": "bool" }, "default": "utils.is12HourCycleInCurrentLocale()" }, "autoFocus": { "type": { "name": "bool" } }, - "closeOnSelect": { - "type": { "name": "bool" }, - "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." - }, + "closeOnSelect": { "type": { "name": "bool" }, "default": "false" }, "currentMonthCalendarPosition": { "type": { "name": "enum", "description": "1
| 2
| 3" }, "default": "1" diff --git a/docs/pages/x/api/date-pickers/mobile-time-picker.json b/docs/pages/x/api/date-pickers/mobile-time-picker.json index 64336f642f90..fda5d610c00e 100644 --- a/docs/pages/x/api/date-pickers/mobile-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-time-picker.json @@ -3,10 +3,7 @@ "ampm": { "type": { "name": "bool" }, "default": "utils.is12HourCycleInCurrentLocale()" }, "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" }, "autoFocus": { "type": { "name": "bool" } }, - "closeOnSelect": { - "type": { "name": "bool" }, - "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." - }, + "closeOnSelect": { "type": { "name": "bool" }, "default": "false" }, "defaultValue": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "disableFuture": { "type": { "name": "bool" }, "default": "false" }, diff --git a/docs/pages/x/api/date-pickers/time-picker.json b/docs/pages/x/api/date-pickers/time-picker.json index e4ce5e054eeb..d43c77f117e2 100644 --- a/docs/pages/x/api/date-pickers/time-picker.json +++ b/docs/pages/x/api/date-pickers/time-picker.json @@ -3,10 +3,7 @@ "ampm": { "type": { "name": "bool" }, "default": "utils.is12HourCycleInCurrentLocale()" }, "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" }, "autoFocus": { "type": { "name": "bool" } }, - "closeOnSelect": { - "type": { "name": "bool" }, - "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)." - }, + "closeOnSelect": { "type": { "name": "bool" }, "default": "false" }, "defaultValue": { "type": { "name": "object" } }, "desktopModeMediaQuery": { "type": { "name": "string" }, diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx index 4c4ada8e4094..74a57c9dd6df 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx @@ -63,7 +63,7 @@ DateRangePicker.propTypes = { className: PropTypes.string, /** * If `true`, the popover or modal will close after submitting the full date. - * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). + * @default `true` for desktop, `false` for mobile variants (based on the chosen wrapper and `desktopModeMediaQuery` prop). */ closeOnSelect: PropTypes.bool, /** diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts index 326c9b650e99..10a35386c64b 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts @@ -40,6 +40,11 @@ export interface DateRangePickerProps; + /** + * If `true`, the popover or modal will close after submitting the full date. + * @default `true` for desktop, `false` for mobile variants (based on the chosen wrapper and `desktopModeMediaQuery` prop). + */ + closeOnSelect?: boolean; } /** diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx index 5236bd223247..33fad8ed132c 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx @@ -68,7 +68,7 @@ DateTimeRangePicker.propTypes = { className: PropTypes.string, /** * If `true`, the popover or modal will close after submitting the full date. - * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). + * @default false */ closeOnSelect: PropTypes.bool, /** diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx index d3f2d3127fd9..e371a82620d9 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx @@ -116,6 +116,11 @@ export interface BaseDateTimeRangePickerProps * If `undefined`, internally defined view will be used. */ viewRenderers?: Partial>; + /** + * If `true`, the popover or modal will close after submitting the full date. + * @default false + */ + closeOnSelect?: boolean; } type UseDateTimeRangePickerDefaultizedProps = diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx index ce29eb7a0e8f..665d5ee3f19a 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx @@ -110,7 +110,7 @@ DesktopDateRangePicker.propTypes = { className: PropTypes.string, /** * If `true`, the popover or modal will close after submitting the full date. - * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). + * @default true */ closeOnSelect: PropTypes.bool, /** diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts index 5b238ebbf61d..42868dd651c2 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts @@ -40,4 +40,9 @@ export interface DesktopDateRangePickerProps< * @default {} */ slotProps?: DesktopDateRangePickerSlotProps; + /** + * If `true`, the popover or modal will close after submitting the full date. + * @default true + */ + closeOnSelect?: boolean; } diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx index e40fc1df38fe..9dde725086ca 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx @@ -13,7 +13,6 @@ import { } from '@mui/x-date-pickers/internals'; import { extractValidationProps } from '@mui/x-date-pickers/validation'; import { PickerOwnerState } from '@mui/x-date-pickers/models'; -import { PickersLayoutOwnerState } from '@mui/x-date-pickers/PickersLayout'; import resolveComponentProps from '@mui/utils/resolveComponentProps'; import { refType } from '@mui/utils'; import { @@ -26,7 +25,6 @@ import { } from '@mui/x-date-pickers/MultiSectionDigitalClock'; import Divider from '@mui/material/Divider'; import { digitalClockClasses } from '@mui/x-date-pickers/DigitalClock'; -import type { PickersActionBarAction } from '@mui/x-date-pickers/PickersActionBar'; import { DesktopDateTimePickerLayout } from '@mui/x-date-pickers/DesktopDateTimePicker'; import { rangeValueManager } from '../internals/utils/valueManagers'; import { DesktopDateTimeRangePickerProps } from './DesktopDateTimeRangePicker.types'; @@ -161,8 +159,6 @@ const DesktopDateTimeRangePicker = React.forwardRef(function DesktopDateTimeRang const views = !shouldHoursRendererContainMeridiemView ? defaultizedProps.views.filter((view) => view !== 'meridiem') : defaultizedProps.views; - const actionBarActions: PickersActionBarAction[] = - defaultizedProps.shouldRenderTimeInASingleColumn ? [] : ['accept']; const props = { ...defaultizedProps, @@ -193,10 +189,6 @@ const DesktopDateTimeRangePicker = React.forwardRef(function DesktopDateTimeRang toolbarVariant: 'desktop', ...defaultizedProps.slotProps?.toolbar, }, - actionBar: (ownerState: PickersLayoutOwnerState) => ({ - actions: actionBarActions, - ...resolveComponentProps(defaultizedProps.slotProps?.actionBar, ownerState), - }), }, }; @@ -240,7 +232,7 @@ DesktopDateTimeRangePicker.propTypes = { className: PropTypes.string, /** * If `true`, the popover or modal will close after submitting the full date. - * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). + * @default false */ closeOnSelect: PropTypes.bool, /** diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx index 63694b969229..d733de0b34a3 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx @@ -106,7 +106,7 @@ MobileDateRangePicker.propTypes = { className: PropTypes.string, /** * If `true`, the popover or modal will close after submitting the full date. - * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). + * @default false */ closeOnSelect: PropTypes.bool, /** diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts index 567a57d4495c..3752fd7b8925 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts @@ -1,3 +1,4 @@ +import { MobileOnlyPickerProps } from '@mui/x-date-pickers/internals'; import { MakeOptional } from '@mui/x-internals/types'; import { UseMobileRangePickerSlots, @@ -24,6 +25,7 @@ export interface MobileDateRangePickerSlotProps extends BaseDateRangePickerProps, + Pick, MobileRangeOnlyPickerProps { /** * Overridable component slots. diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx index 9ceb784539b2..3238e1bb8f2a 100644 --- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx @@ -229,7 +229,7 @@ MobileDateTimeRangePicker.propTypes = { className: PropTypes.string, /** * If `true`, the popover or modal will close after submitting the full date. - * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). + * @default false */ closeOnSelect: PropTypes.bool, /** diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts index 4dd3305f8d9b..bb1b133f1427 100644 --- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts @@ -1,3 +1,4 @@ +import { MobileOnlyPickerProps } from '@mui/x-date-pickers/internals'; import { MakeOptional } from '@mui/x-internals/types'; import { UseMobileRangePickerSlots, @@ -26,6 +27,7 @@ export interface MobileDateTimeRangePickerSlotProps< export interface MobileDateTimeRangePickerProps< TEnableAccessibleFieldDOMStructure extends boolean = true, > extends BaseDateTimeRangePickerProps, + Pick, MobileRangeOnlyPickerProps { /** * Overridable component slots. diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx index c535422d9455..282dbe0a4740 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx @@ -55,7 +55,7 @@ DatePicker.propTypes = { className: PropTypes.string, /** * If `true`, the popover or modal will close after submitting the full date. - * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). + * @default `true` for desktop, `false` for mobile variant (based on the chosen wrapper and `desktopModeMediaQuery` prop). */ closeOnSelect: PropTypes.bool, /** diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts b/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts index 3b80ff310dad..bed8ebfb5793 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts @@ -48,6 +48,11 @@ export interface DatePickerProps>; + /** + * If `true`, the popover or modal will close after submitting the full date. + * @default false + */ + closeOnSelect?: boolean; } type UseDateTimePickerDefaultizedProps< diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx index 2965274f7051..ad8f1ba05343 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx @@ -113,7 +113,7 @@ DesktopDatePicker.propTypes = { className: PropTypes.string, /** * If `true`, the popover or modal will close after submitting the full date. - * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). + * @default true */ closeOnSelect: PropTypes.bool, /** diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts index 168d39f4a34b..8b324d51aa6b 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts @@ -39,4 +39,9 @@ export interface DesktopDatePickerProps view !== 'meridiem') : resolvedViews; - const actionBarActions: PickersActionBarAction[] = shouldRenderTimeInASingleColumn - ? [] - : ['accept']; // Props with the default values specific to the desktop variant const props = { @@ -205,10 +200,6 @@ const DesktopDateTimePicker = React.forwardRef(function DesktopDateTimePicker< hidden: true, ...defaultizedProps.slotProps?.tabs, }, - actionBar: (ownerState: PickersLayoutOwnerState) => ({ - actions: actionBarActions, - ...resolveComponentProps(defaultizedProps.slotProps?.actionBar, ownerState), - }), }, }; @@ -258,7 +249,7 @@ DesktopDateTimePicker.propTypes = { className: PropTypes.string, /** * If `true`, the popover or modal will close after submitting the full date. - * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). + * @default false */ closeOnSelect: PropTypes.bool, /** diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx index 9368acefdfc7..ebd9767882a9 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx @@ -109,6 +109,7 @@ DesktopDateTimePickerLayout.propTypes = { PropTypes.object, ]), value: PropTypes.any, + valueType: PropTypes.oneOf(['date-time', 'date', 'time']).isRequired, view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), views: PropTypes.arrayOf( PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired, diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx index ea815c570641..fda2d1f68cf0 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx @@ -56,6 +56,12 @@ describe('', () => { // Change the meridiem (same value) fireEvent.click(screen.getByRole('option', { name: 'AM' })); expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change + // closeOnSelect false by default + expect(onAccept.callCount).to.equal(0); + expect(onClose.callCount).to.equal(0); + + // Click on 'accept' action to close the picker + fireEvent.click(screen.getByText(/ok/i)); expect(onAccept.callCount).to.equal(1); expect(onClose.callCount).to.equal(1); }); @@ -99,6 +105,12 @@ describe('', () => { // Change the meridiem fireEvent.click(screen.getByRole('option', { name: 'PM' })); expect(onChange.callCount).to.equal(8); + // closeOnSelect false by default + expect(onAccept.callCount).to.equal(0); + expect(onClose.callCount).to.equal(0); + + // Click on 'accept' action to close the picker + fireEvent.click(screen.getByText(/ok/i)); expect(onAccept.callCount).to.equal(1); expect(onClose.callCount).to.equal(1); }); @@ -123,6 +135,10 @@ describe('', () => { expect(onChange.callCount).to.equal(2); expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 2, 3, 0, 0)); + expect(onAccept.callCount).to.equal(0); // onAccept false by default + + // Click on 'accept' action to close the picker + fireEvent.click(screen.getByText(/ok/i)); expect(onAccept.callCount).to.equal(1); }); @@ -144,6 +160,10 @@ describe('', () => { expect(onChange.callCount).to.equal(1); expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 3, 0, 0)); + expect(onAccept.callCount).to.equal(0); // onAccept false by default + + // Click on 'accept' action to close the picker + fireEvent.click(screen.getByText(/ok/i)); expect(onAccept.callCount).to.equal(1); }); }); diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx index 7496b80d2e26..dc006570c0d1 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx @@ -16,7 +16,6 @@ import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView, } from '../timeViewRenderers'; -import { PickersActionBarAction } from '../PickersActionBar'; import { TimeViewWithMeridiem } from '../internals/models'; import { resolveTimeFormat } from '../internals/utils/time-utils'; import { resolveTimeViewsResponse } from '../internals/utils/date-time-utils'; @@ -72,9 +71,7 @@ const DesktopTimePicker = React.forwardRef(function DesktopTimePicker< }; const ampmInClock = defaultizedProps.ampmInClock ?? true; - const actionBarActions: PickersActionBarAction[] = shouldRenderTimeInASingleColumn - ? [] - : ['accept']; + // Need to avoid adding the `meridiem` view when unexpected renderer is specified const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name; @@ -109,10 +106,6 @@ const DesktopTimePicker = React.forwardRef(function DesktopTimePicker< ampmInClock, ...defaultizedProps.slotProps?.toolbar, }, - actionBar: { - actions: actionBarActions, - ...defaultizedProps.slotProps?.actionBar, - }, }, }; @@ -161,7 +154,7 @@ DesktopTimePicker.propTypes = { className: PropTypes.string, /** * If `true`, the popover or modal will close after submitting the full date. - * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). + * @default false */ closeOnSelect: PropTypes.bool, /** diff --git a/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx index f6d1314d7694..096830e2565b 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx @@ -80,8 +80,13 @@ describe('', () => { fireEvent.click(screen.getByRole('option', { name: '09:00 AM' })); expect(onChange.callCount).to.equal(1); expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 9, 0)); + // closeOnSelect false by default + expect(onAccept.callCount).to.equal(0); + expect(onClose.callCount).to.equal(0); + + // Click on 'accept' action to close the picker + fireEvent.click(screen.getByText(/ok/i)); expect(onAccept.callCount).to.equal(1); - expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 9, 0)); expect(onClose.callCount).to.equal(1); }); @@ -113,8 +118,13 @@ describe('', () => { fireEvent.click(screen.getByRole('option', { name: 'PM' })); expect(onChange.callCount).to.equal(3); + // closeOnSelect false by default + expect(onAccept.callCount).to.equal(0); + expect(onClose.callCount).to.equal(0); + + // Click on 'accept' action to close the picker + fireEvent.click(screen.getByText(/ok/i)); expect(onAccept.callCount).to.equal(1); - expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 14, 15)); expect(onClose.callCount).to.equal(1); }); @@ -151,8 +161,13 @@ describe('', () => { fireEvent.click(screen.getByRole('option', { name: 'PM' })); expect(onChange.callCount).to.equal(4); + // closeOnSelect false by default + expect(onAccept.callCount).to.equal(0); + expect(onClose.callCount).to.equal(0); + + // Click on 'accept' action to close the picker + fireEvent.click(screen.getByText(/ok/i)); expect(onAccept.callCount).to.equal(1); - expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 14, 25)); expect(onClose.callCount).to.equal(1); }); @@ -174,8 +189,13 @@ describe('', () => { fireEvent.click(screen.getByRole('option', { name: 'PM' })); expect(onChange.callCount).to.equal(1); + // closeOnSelect false by default + expect(onAccept.callCount).to.equal(0); + expect(onClose.callCount).to.equal(0); + + // Click on 'accept' action to close the picker + fireEvent.click(screen.getByText(/ok/i)); expect(onAccept.callCount).to.equal(1); - expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 12, 0)); expect(onClose.callCount).to.equal(1); }); }); diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx index 4db881d75251..182e81cf68b1 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx @@ -110,7 +110,7 @@ MobileDatePicker.propTypes = { className: PropTypes.string, /** * If `true`, the popover or modal will close after submitting the full date. - * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). + * @default false */ closeOnSelect: PropTypes.bool, /** diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx index 6d9c1b3c7bb5..f653887d4ea4 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx @@ -135,7 +135,7 @@ MobileDateTimePicker.propTypes = { className: PropTypes.string, /** * If `true`, the popover or modal will close after submitting the full date. - * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). + * @default false */ closeOnSelect: PropTypes.bool, /** diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx index 43c653c1661a..6b7ee08335fc 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx @@ -124,7 +124,7 @@ MobileTimePicker.propTypes = { className: PropTypes.string, /** * If `true`, the popover or modal will close after submitting the full date. - * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). + * @default false */ closeOnSelect: PropTypes.bool, /** diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx index 5648dbcc8d88..15d37b442afd 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx @@ -44,6 +44,7 @@ const MultiSectionDigitalClockRoot = styled(PickerViewRoot, { display: 'flex', flexDirection: 'row', width: '100%', + justifyContent: 'space-evenly', borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`, })); diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx index bd68beaba510..338dd23f2785 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx @@ -56,9 +56,11 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, { })<{ ownerState: MultiSectionDigitalClockSectionProps & { alreadyRendered: boolean } }>( ({ theme }) => ({ maxHeight: DIGITAL_CLOCK_VIEW_HEIGHT, - width: 56, + width: '100%', padding: 0, overflow: 'hidden', + borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`, + scrollbarGutter: 'stable', '@media (prefers-reduced-motion: no-preference)': { scrollBehavior: 'auto', }, @@ -70,8 +72,8 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, { '@media (pointer: none), (pointer: coarse)': { overflowY: 'auto', }, - '&:not(:first-of-type)': { - borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`, + '&:first-of-type': { + borderColor: 'transparent', }, '&::after': { display: 'block', diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts index c6591da17a8b..de89e5434012 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts +++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts @@ -20,7 +20,7 @@ export interface StaticDateTimePickerSlotProps UseStaticPickerSlotProps {} export interface StaticDateTimePickerProps - extends BaseDateTimePickerProps, + extends Omit, 'closeOnSelect'>, MakeOptional { /** * Overridable component slots. diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts index 8de99acfe5c1..8572ba36ba70 100644 --- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts +++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts @@ -20,7 +20,7 @@ export interface StaticTimePickerSlotProps UseStaticPickerSlotProps {} export interface StaticTimePickerProps - extends BaseTimePickerProps, + extends Omit, 'closeOnSelect'>, MakeOptional { /** * Overridable component slots. diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx index 090d3c50b962..b65621a1cddb 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx @@ -65,7 +65,7 @@ TimePicker.propTypes = { className: PropTypes.string, /** * If `true`, the popover or modal will close after submitting the full date. - * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). + * @default false */ closeOnSelect: PropTypes.bool, /** diff --git a/packages/x-date-pickers/src/TimePicker/shared.tsx b/packages/x-date-pickers/src/TimePicker/shared.tsx index e5a9a8368f29..2d7755b8d2c4 100644 --- a/packages/x-date-pickers/src/TimePicker/shared.tsx +++ b/packages/x-date-pickers/src/TimePicker/shared.tsx @@ -64,6 +64,11 @@ export interface BaseTimePickerProps * If `undefined`, internally defined view will be used. */ viewRenderers?: Partial>; + /** + * If `true`, the popover or modal will close after submitting the full date. + * @default false + */ + closeOnSelect?: boolean; } type UseTimePickerDefaultizedProps< diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts index 27824fd3df82..7a24aeaa3355 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts @@ -69,7 +69,13 @@ export interface MobileOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, - UsePickerViewsNonStaticProps {} + UsePickerViewsNonStaticProps { + /** + * If `true`, the popover or modal will close after submitting the full date. + * @default false + */ + closeOnSelect?: boolean; +} export interface UseMobilePickerProps< TView extends DateOrTimeViewWithMeridiem, diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts index d9693d260b45..97339c61f596 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts @@ -66,6 +66,7 @@ export const usePicker = < const pickerLayoutResponse = usePickerLayoutProps({ props, wrapperVariant, + valueType, propsFromPickerValue: pickerValueResponse.layoutProps, propsFromPickerViews: pickerViewsResponse.layoutProps, }); diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerLayoutProps.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerLayoutProps.ts index f4084f8b3222..93e0d84e393a 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerLayoutProps.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerLayoutProps.ts @@ -3,6 +3,7 @@ import { useIsLandscape } from '../useIsLandscape'; import { UsePickerValueLayoutResponse } from './usePickerValue.types'; import { UsePickerViewsLayoutResponse } from './usePickerViews'; import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../../models/common'; +import { FieldValueType } from '../../../models'; /** * Props used to create the layout of the views. @@ -26,6 +27,7 @@ export interface UsePickerLayoutPropsResponseLayoutProps< isLandscape: boolean; isRtl: boolean; wrapperVariant: WrapperVariant; + valueType: FieldValueType; isValid: (value: TValue) => boolean; } @@ -38,6 +40,7 @@ export interface UsePickerLayoutPropsParams; propsFromPickerViews: UsePickerViewsLayoutResponse; wrapperVariant: WrapperVariant; + valueType: FieldValueType; } /** @@ -48,6 +51,7 @@ export const usePickerLayoutProps = ): UsePickerLayoutPropsResponse => { const { orientation } = props; const isLandscape = useIsLandscape(propsFromPickerViews.views, orientation); @@ -59,6 +63,7 @@ export const usePickerLayoutProps = } else { expect(onChange.lastCall.args[0]).toEqualDateTime(newValue); } - expect(onAccept.callCount).to.equal(pickerParams.variant === 'mobile' ? 0 : 1); - expect(onClose.callCount).to.equal(pickerParams.variant === 'mobile' ? 0 : 1); + + const isTimeOrMobile = + pickerParams.variant === 'mobile' || pickerParams.type.includes('time'); + + expect(onAccept.callCount).to.equal(isTimeOrMobile ? 0 : 1); + expect(onClose.callCount).to.equal(isTimeOrMobile ? 0 : 1); }); it('should not select input content after closing on mobile', () => {