@consta/uikit 3.12.3 → 3.15.0

package/__internal__/src/components/DatePickerCanary/DatePickerTypeDate/DatePickerTypeDate.js

@@ -3,19 +3,21 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import addMonths from 'date-fns/addMonths';
 import startOfMonth from 'date-fns/startOfMonth';
 import { useClickOutside } from '../../../hooks/useClickOutside/useClickOutside';
+import { useFlag } from '../../../hooks/useFlag/useFlag';
 import { setRef } from '../../../utils/setRef';
 import { DatePickerDropdown } from '../DatePickerDropdown/DatePickerDropdown';
 import { DatePickerFieldTypeDate } from '../DatePickerFieldTypeDate/DatePickerFieldTypeDate';
+import { useCurrentVisibleDate } from '../useCurrentVisibleDate';
 export var DatePickerTypeDate = forwardRef(function (props, ref) {
-    var events = props.events, dateTimeView = props.dateTimeView, locale = props.locale, dropdownForm = props.dropdownForm, onFocus = props.onFocus, otherProps = __rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "onFocus"]);
+    var events = props.events, dateTimeView = props.dateTimeView, locale = props.locale, dropdownForm = props.dropdownForm, onFocus = props.onFocus, currentVisibleDateProp = props.currentVisibleDate, onChangeCurrentVisibleDateProp = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, style = props.style, otherProps = __rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "onFocus", "currentVisibleDate", "onChangeCurrentVisibleDate", "renderAdditionalControls", "style"]);
     var fieldRef = useRef(null);
     var calendarRef = useRef(null);
-    var _a = __read(useState(false), 2), calendarVisible = _a[0], setCalendarVisible = _a[1];
-    var _b = __read(useState(), 2), currentVisibleDate = _b[0], setCurrentVisibleDate = _b[1];
+    var _a = __read(useFlag(false), 2), calendarVisible = _a[0], setCalendarVisible = _a[1];
+    var _b = __read(useCurrentVisibleDate(currentVisibleDateProp, onChangeCurrentVisibleDateProp), 2), currentVisibleDate = _b[0], setCurrentVisibleDate = _b[1];
     var _c = __read(useState(), 2), calendarVisibleDate = _c[0], setCalendarVisibleDate = _c[1];
     var onFocusHandler = function (e) {
         onFocus && onFocus(e);
-        setCalendarVisible(true);
+        setCalendarVisible.on();
     };
     useEffect(function () {
         if (ref) {
@@ -39,7 +41,7 @@ export var DatePickerTypeDate = forwardRef(function (props, ref) {
         }
     }, [props.value]);
     var handleClose = function () {
-        setCalendarVisible(false);
+        setCalendarVisible.off();
         setCurrentVisibleDate(undefined);
     };
     useClickOutside({
@@ -48,10 +50,10 @@ export var DatePickerTypeDate = forwardRef(function (props, ref) {
         handler: handleClose
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(DatePickerFieldTypeDate, __assign({}, otherProps, { ref: fieldRef, onFocus: onFocusHandler })),
-        React.createElement(DatePickerDropdown, { ref: calendarRef, anchorRef: fieldRef, isOpen: calendarVisible, value: props.value || undefined, type: props.type, view: dateTimeView, events: events, locale: locale, minDate: props.minDate, maxDate: props.maxDate, currentVisibleDate: currentVisibleDate, form: dropdownForm, onChange: function (params) {
+        React.createElement(DatePickerFieldTypeDate, __assign({}, otherProps, { ref: fieldRef, onFocus: onFocusHandler, style: style })),
+        React.createElement(DatePickerDropdown, { ref: calendarRef, anchorRef: fieldRef, isOpen: calendarVisible, value: props.value || undefined, type: "date", view: dateTimeView, events: events, locale: locale, minDate: props.minDate, maxDate: props.maxDate, currentVisibleDate: currentVisibleDate, form: dropdownForm, onChange: function (params) {
                 var _a;
                 (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, params);
                 handleClose();
-            }, onChangeCurrentVisibleDate: function (date) { return setCalendarVisibleDate(date); } })));
+            }, renderAdditionalControls: renderAdditionalControls, zIndex: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined, onChangeCurrentVisibleDate: setCalendarVisibleDate })));
 });

package/__internal__/src/components/DatePickerCanary/DatePickerTypeDateRange/DatePickerTypeDateRange.d.ts

@@ -1,2 +1,2 @@
-import { DatePickerTypeDateRangeComponent } from '../helpers';
-export declare const DatePickerTypeDateRange: DatePickerTypeDateRangeComponent;
+import { DatePickerTypeComponent } from '../helpers';
+export declare const DatePickerTypeDateRange: DatePickerTypeComponent<'date-range'>;

package/__internal__/src/components/DatePickerCanary/DatePickerTypeDateRange/DatePickerTypeDateRange.js

@@ -7,9 +7,10 @@ import { useForkRef } from '../../../hooks/useForkRef/useForkRef';
 import { DatePickerDropdown, } from '../DatePickerDropdown/DatePickerDropdown';
 import { DatePickerFieldTypeDateRange } from '../DatePickerFieldTypeDateRange/DatePickerFieldTypeDateRange';
 import { normalizeRangeValue } from '../helpers';
+import { useCurrentVisibleDate } from '../useCurrentVisibleDate';
 export var DatePickerTypeDateRange = forwardRef(function (props, ref) {
     var _a, _b, _c, _d;
-    var events = props.events, dateTimeView = props.dateTimeView, locale = props.locale, dropdownForm = props.dropdownForm, startFieldRightSide = props.startFieldRightSide, startFieldLeftSide = props.startFieldLeftSide, startFieldOnBlur = props.startFieldOnBlur, startFieldOnFocus = props.startFieldOnFocus, endFieldRightSide = props.endFieldRightSide, endFieldLeftSide = props.endFieldLeftSide, endFieldOnBlur = props.endFieldOnBlur, endFieldOnFocus = props.endFieldOnFocus, onFocus = props.onFocus, onBlur = props.onBlur, leftSide = props.leftSide, rightSide = props.rightSide, endFieldInputRefProp = props.endFieldInputRef, startFieldInputRefProp = props.startFieldInputRef, fieldProps = __rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "startFieldRightSide", "startFieldLeftSide", "startFieldOnBlur", "startFieldOnFocus", "endFieldRightSide", "endFieldLeftSide", "endFieldOnBlur", "endFieldOnFocus", "onFocus", "onBlur", "leftSide", "rightSide", "endFieldInputRef", "startFieldInputRef"]);
+    var events = props.events, dateTimeView = props.dateTimeView, locale = props.locale, dropdownForm = props.dropdownForm, startFieldRightSide = props.startFieldRightSide, startFieldLeftSide = props.startFieldLeftSide, startFieldOnBlur = props.startFieldOnBlur, startFieldOnFocus = props.startFieldOnFocus, endFieldRightSide = props.endFieldRightSide, endFieldLeftSide = props.endFieldLeftSide, endFieldOnBlur = props.endFieldOnBlur, endFieldOnFocus = props.endFieldOnFocus, onFocus = props.onFocus, onBlur = props.onBlur, leftSide = props.leftSide, rightSide = props.rightSide, endFieldInputRefProp = props.endFieldInputRef, startFieldInputRefProp = props.startFieldInputRef, style = props.style, currentVisibleDateProp = props.currentVisibleDate, onChangeCurrentVisibleDateProp = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, fieldProps = __rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "startFieldRightSide", "startFieldLeftSide", "startFieldOnBlur", "startFieldOnFocus", "endFieldRightSide", "endFieldLeftSide", "endFieldOnBlur", "endFieldOnFocus", "onFocus", "onBlur", "leftSide", "rightSide", "endFieldInputRef", "startFieldInputRef", "style", "currentVisibleDate", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
     var startFieldRef = useRef(null);
     var endFieldRef = useRef(null);
     var startFieldInputRef = useRef(null);
@@ -31,17 +32,7 @@ export var DatePickerTypeDateRange = forwardRef(function (props, ref) {
         }
     };
     var _f = __read(useState(false), 2), calendarVisible = _f[0], setCalendarVisible = _f[1];
-    var _g = __read(useState(), 2), currentVisibleDate = _g[0], setCurrentVisibleDate = _g[1];
-    var commonProps = {
-        value: props.value || undefined,
-        view: dateTimeView,
-        events: events,
-        locale: locale,
-        minDate: props.minDate,
-        maxDate: props.maxDate,
-        form: dropdownForm,
-        onChange: hadleChange
-    };
+    var _g = __read(useCurrentVisibleDate(currentVisibleDateProp, onChangeCurrentVisibleDateProp), 2), currentVisibleDate = _g[0], setCurrentVisibleDate = _g[1];
     var startFieldOnBlurHandler = function (e) {
         onBlur && onBlur(e);
         startFieldOnBlur && startFieldOnBlur(e);
@@ -118,6 +109,6 @@ export var DatePickerTypeDateRange = forwardRef(function (props, ref) {
         }
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(DatePickerFieldTypeDateRange, __assign({}, fieldProps, { ref: ref, startFieldRef: startFieldRef, endFieldRef: endFieldRef, startFieldInputRef: useForkRef([startFieldInputRef, startFieldInputRefProp]), endFieldInputRef: useForkRef([endFieldInputRef, endFieldInputRefProp]), startFieldOnFocus: startFieldOnFocusHandler, endFieldOnFocus: endFieldOnFocusHandler, startFieldRightSide: startFieldRightSide, startFieldLeftSide: startFieldLeftSide || leftSide, endFieldRightSide: endFieldRightSide || rightSide, endFieldLeftSide: endFieldLeftSide, startFieldOnBlur: startFieldOnBlurHandler, endFieldOnBlur: endFieldOnBlurHandler, startFocused: startFocused, endFocused: endFocused })),
-        React.createElement(DatePickerDropdown, __assign({}, commonProps, { ref: calendarRef, anchorRef: startFieldRef, isOpen: calendarVisible, onChangeCurrentVisibleDate: function (date) { return setCurrentVisibleDate(date); }, currentVisibleDate: currentVisibleDate }))));
+        React.createElement(DatePickerFieldTypeDateRange, __assign({}, fieldProps, { style: style, ref: ref, startFieldRef: startFieldRef, endFieldRef: endFieldRef, startFieldInputRef: useForkRef([startFieldInputRef, startFieldInputRefProp]), endFieldInputRef: useForkRef([endFieldInputRef, endFieldInputRefProp]), startFieldOnFocus: startFieldOnFocusHandler, endFieldOnFocus: endFieldOnFocusHandler, startFieldRightSide: startFieldRightSide, startFieldLeftSide: startFieldLeftSide || leftSide, endFieldRightSide: endFieldRightSide || rightSide, endFieldLeftSide: endFieldLeftSide, startFieldOnBlur: startFieldOnBlurHandler, endFieldOnBlur: endFieldOnBlurHandler, startFocused: startFocused, endFocused: endFocused })),
+        React.createElement(DatePickerDropdown, { type: "date", ref: calendarRef, anchorRef: startFieldRef, isOpen: calendarVisible, onChangeCurrentVisibleDate: setCurrentVisibleDate, currentVisibleDate: currentVisibleDate, value: props.value || undefined, view: dateTimeView, events: events, locale: locale, minDate: props.minDate, maxDate: props.maxDate, form: dropdownForm, onChange: hadleChange, renderAdditionalControls: renderAdditionalControls, zIndex: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined })));
 });

package/__internal__/src/components/DatePickerCanary/DatePickerTypeDateTime/DatePickerTypeDateTime.d.ts

@@ -0,0 +1,2 @@
+import { DatePickerTypeComponent } from '../helpers';
+export declare const DatePickerTypeDateTime: DatePickerTypeComponent<'date-time'>;

package/__internal__/src/components/DatePickerCanary/DatePickerTypeDateTime/DatePickerTypeDateTime.js

@@ -0,0 +1,57 @@
+import { __assign, __read, __rest } from "tslib";
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import addMonths from 'date-fns/addMonths';
+import startOfMonth from 'date-fns/startOfMonth';
+import { useClickOutside } from '../../../hooks/useClickOutside/useClickOutside';
+import { useFlag } from '../../../hooks/useFlag/useFlag';
+import { setRef } from '../../../utils/setRef';
+import { DatePickerDropdown } from '../DatePickerDropdown/DatePickerDropdown';
+import { DatePickerFieldTypeDateTime } from '../DatePickerFieldTypeDateTime/DatePickerFieldTypeDateTime';
+import { datePickerPropFormatTypeDateTime, getMultiplicityTime, } from '../helpers';
+import { useCurrentVisibleDate } from '../useCurrentVisibleDate';
+export var DatePickerTypeDateTime = forwardRef(function (props, ref) {
+    var events = props.events, dateTimeView = props.dateTimeView, locale = props.locale, dropdownForm = props.dropdownForm, onFocus = props.onFocus, currentVisibleDateProp = props.currentVisibleDate, onChangeCurrentVisibleDateProp = props.onChangeCurrentVisibleDate, multiplicityHoursProp = props.multiplicityHours, multiplicityMinutesProp = props.multiplicityMinutes, multiplicitySecondsProp = props.multiplicitySeconds, renderAdditionalControls = props.renderAdditionalControls, otherProps = __rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "onFocus", "currentVisibleDate", "onChangeCurrentVisibleDate", "multiplicityHours", "multiplicityMinutes", "multiplicitySeconds", "renderAdditionalControls"]);
+    var _a = __read(getMultiplicityTime(otherProps.format || datePickerPropFormatTypeDateTime, multiplicityHoursProp, multiplicityMinutesProp, multiplicitySecondsProp), 3), multiplicityHours = _a[0], multiplicityMinutes = _a[1], multiplicitySeconds = _a[2];
+    var fieldRef = useRef(null);
+    var calendarRef = useRef(null);
+    var _b = __read(useFlag(false), 2), calendarVisible = _b[0], setCalendarVisible = _b[1];
+    var _c = __read(useCurrentVisibleDate(currentVisibleDateProp, onChangeCurrentVisibleDateProp), 2), currentVisibleDate = _c[0], setCurrentVisibleDate = _c[1];
+    var _d = __read(useState(), 2), calendarVisibleDate = _d[0], setCalendarVisibleDate = _d[1];
+    var onFocusHandler = function (e) {
+        onFocus && onFocus(e);
+        setCalendarVisible.on();
+    };
+    useEffect(function () {
+        if (ref) {
+            setRef(ref, fieldRef.current);
+        }
+    }, [ref, fieldRef]);
+    useEffect(function () {
+        if (props.value && props.dateTimeView === 'classic' && calendarVisibleDate) {
+            var newVisibleDate = startOfMonth(props.value);
+            if (newVisibleDate.getTime() !== calendarVisibleDate.getTime()) {
+                setCurrentVisibleDate(newVisibleDate);
+            }
+            return;
+        }
+        if (props.value && props.dateTimeView !== 'classic' && calendarVisibleDate) {
+            var newVisibleDate = startOfMonth(props.value);
+            if (newVisibleDate.getTime() !== calendarVisibleDate.getTime() &&
+                newVisibleDate.getTime() !== addMonths(calendarVisibleDate, 1).getTime()) {
+                setCurrentVisibleDate(newVisibleDate);
+            }
+        }
+    }, [props.value]);
+    var handleClose = function () {
+        setCalendarVisible.off();
+        setCurrentVisibleDate(undefined);
+    };
+    useClickOutside({
+        isActive: calendarVisible,
+        ignoreClicksInsideRefs: [fieldRef, calendarRef],
+        handler: handleClose
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DatePickerFieldTypeDateTime, __assign({}, otherProps, { ref: fieldRef, onFocus: onFocusHandler, multiplicityHours: multiplicityHours, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes })),
+        React.createElement(DatePickerDropdown, { ref: calendarRef, anchorRef: fieldRef, isOpen: calendarVisible, value: props.value || undefined, type: "date-time", view: dateTimeView, events: events, locale: locale, minDate: props.minDate, maxDate: props.maxDate, currentVisibleDate: currentVisibleDate, form: dropdownForm, onChange: props.onChange, renderAdditionalControls: renderAdditionalControls, onChangeCurrentVisibleDate: setCalendarVisibleDate, multiplicityHours: multiplicityHours, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes })));
+});

package/__internal__/src/components/DatePickerCanary/helpers.d.ts

@@ -3,14 +3,14 @@ import { Locale } from 'date-fns';
 import { IconComponent, IconPropSize } from '../../icons/Icon/Icon';
 import { DateRange } from '../../utils/types/Date';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
-import { DateTimePropView } from '../DateTimeCanary/helpers';
+import { DateTimeAdditionalControlRenderProp, DateTimePropView } from '../DateTimeCanary/helpers';
 import { TextFieldPropForm, TextFieldPropSize, TextFieldPropStatus, TextFieldPropView, TextFieldPropWidth } from '../TextField/TextField';
-export declare const datePickerPropType: readonly ["date", "date-range"];
+export declare const datePickerPropType: readonly ["date", "date-range", "date-time"];
 export declare type DatePickerPropType = typeof datePickerPropType[number];
 export declare const datePickerPropTypeDefault: "date";
 export declare type DatePickerPropDateTimeView = DateTimePropView;
 export declare const datePickerErrorTypes: readonly ["outOfRange", "invalidInputAttempt", "startDateIsGreaterThanEndDate"];
-export declare type DatePickerPropValue<TYPE extends DatePickerPropType> = (TYPE extends 'date' ? Date : DateRange) | null;
+export declare type DatePickerPropValue<TYPE extends DatePickerPropType> = (TYPE extends 'date' | 'date-time' ? Date : DateRange) | null;
 export declare type DatePickerPropOnChange<TYPE extends DatePickerPropType> = (props: {
     value: DatePickerPropValue<TYPE>;
     e: React.MouseEvent<HTMLButtonElement, MouseEvent> | Event;
@@ -18,8 +18,8 @@ export declare type DatePickerPropOnChange<TYPE extends DatePickerPropType> = (p
 export declare const datePickerPropDropdownForm: readonly ["default", "brick", "round"];
 export declare type DatePickerPropDropdownForm = typeof datePickerPropDropdownForm[number];
 export declare const datePickerPropDropdownFormDefault: "default";
-declare type DatePickerPropCalendarWidth<TYPE> = TYPE extends 'date' ? TextFieldPropWidth : never;
-declare type DatePickerPropCalendarInputRef<TYPE> = TYPE extends 'date' ? React.Ref<HTMLInputElement> : never;
+declare type DatePickerPropCalendarWidth<TYPE> = TYPE extends 'date' | 'date-time' ? TextFieldPropWidth : never;
+declare type DatePickerPropCalendarInputRef<TYPE> = TYPE extends 'date' | 'date-time' ? React.Ref<HTMLInputElement> : never;
 declare type DatePickerPropCalendarStartInputRef<TYPE> = TYPE extends 'date-range' ? React.Ref<HTMLInputElement> : never;
 declare type DatePickerPropCalendarStartLeftSide<TYPE> = TYPE extends 'date-range' ? string | IconComponent : never;
 declare type DatePickerPropCalendarStartOnFocus<TYPE> = TYPE extends 'date-range' ? React.FocusEventHandler<HTMLElement> : never;
@@ -29,6 +29,7 @@ export declare type DatePickerProps<TYPE extends DatePickerPropType = 'date'> =
     onChange?: DatePickerPropOnChange<TYPE>;
     minDate?: Date;
     maxDate?: Date;
+    renderAdditionalControls?: DateTimeAdditionalControlRenderProp;
     events?: Date[];
     dateTimeView?: DatePickerPropDateTimeView;
     locale?: Locale;
@@ -70,16 +71,23 @@ export declare type DatePickerProps<TYPE extends DatePickerPropType = 'date'> =
     label?: string;
     caption?: string;
     labelPosition?: 'top' | 'left';
+    onChangeCurrentVisibleDate?: (date: Date) => void;
+    currentVisibleDate?: Date;
+    multiplicitySeconds?: number;
+    multiplicityMinutes?: number;
+    multiplicityHours?: number;
 }, HTMLDivElement>;
 export declare type DatePickerComponent = <TYPE extends DatePickerPropType = 'date'>(props: DatePickerProps<TYPE>) => React.ReactElement | null;
-export declare type DatePickerTypeDateComponent = (props: DatePickerProps<'date'>) => React.ReactElement | null;
-export declare type DatePickerTypeDateRangeComponent = (props: DatePickerProps<'date-range'>) => React.ReactElement | null;
+export declare type DatePickerTypeComponent<TYPE extends DatePickerPropType> = (props: Omit<DatePickerProps<TYPE>, 'type'>) => React.ReactElement | null;
 export declare type DatePickerPropOnError = (props: {
     type: typeof datePickerErrorTypes[0];
     stringValue: string;
     dd?: string;
     MM?: string;
     yyyy?: string;
+    ss?: string;
+    mm?: string;
+    HH?: string;
     date: Date;
 } | {
     type: typeof datePickerErrorTypes[1];
@@ -87,132 +95,19 @@ export declare type DatePickerPropOnError = (props: {
     dd?: string;
     MM?: string;
     yyyy?: string;
+    ss?: string;
+    mm?: string;
+    HH?: string;
 } | {
     type: typeof datePickerErrorTypes[2];
     date: [Date, Date];
 }) => void;
-export declare const isDateRangeParams: (params: DatePickerProps<DatePickerPropType>) => params is PropsWithHTMLAttributesAndRef<{
-    type?: "date-range" | undefined;
-    value?: DateRange | null | undefined;
-    onChange?: DatePickerPropOnChange<"date-range"> | undefined;
-    minDate?: Date | undefined;
-    maxDate?: Date | undefined;
-    events?: Date[] | undefined;
-    dateTimeView?: "slider" | "classic" | "book" | undefined;
-    locale?: globalThis.Locale | undefined;
-    children?: undefined;
-    onError?: DatePickerPropOnError | undefined;
-    id?: string | undefined;
-    name?: string | undefined;
-    disabled?: boolean | undefined;
-    size?: "xs" | "s" | "m" | "l" | undefined;
-    view?: "default" | "clear" | undefined;
-    form?: "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
-    status?: "alert" | "success" | "warning" | undefined;
-    onFocus?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-    onBlur?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-    autoFocus?: boolean | undefined;
-    placeholder?: string | undefined;
-    readOnly?: boolean | undefined;
-    required?: boolean | undefined;
-    tabIndex?: number | undefined;
-    inputRef?: undefined;
-    ariaLabel?: string | undefined;
-    iconSize?: "xs" | "s" | "m" | undefined;
-    format?: string | undefined;
-    separator?: string | undefined;
-    dropdownForm?: "default" | "round" | "brick" | undefined;
-    width?: undefined;
-    leftSide?: string | import("react").FC<PropsWithHTMLAttributesAndRef<{
-        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-        size?: "xs" | "s" | "m" | undefined;
-    }, HTMLSpanElement>> | undefined;
-    rightSide?: string | import("react").FC<PropsWithHTMLAttributesAndRef<{
-        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-        size?: "xs" | "s" | "m" | undefined;
-    }, HTMLSpanElement>> | undefined;
-    startFieldInputRef?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-    endFieldInputRef?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-    startFieldLeftSide?: string | import("react").FC<PropsWithHTMLAttributesAndRef<{
-        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-        size?: "xs" | "s" | "m" | undefined;
-    }, HTMLSpanElement>> | undefined;
-    startFieldRightSide?: string | import("react").FC<PropsWithHTMLAttributesAndRef<{
-        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-        size?: "xs" | "s" | "m" | undefined;
-    }, HTMLSpanElement>> | undefined;
-    endFieldLeftSide?: string | import("react").FC<PropsWithHTMLAttributesAndRef<{
-        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-        size?: "xs" | "s" | "m" | undefined;
-    }, HTMLSpanElement>> | undefined;
-    endFieldRightSide?: string | import("react").FC<PropsWithHTMLAttributesAndRef<{
-        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-        size?: "xs" | "s" | "m" | undefined;
-    }, HTMLSpanElement>> | undefined;
-    startFieldOnFocus?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-    endFieldOnFocus?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-    startFieldOnBlur?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-    endFieldOnBlur?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-    label?: string | undefined;
-    caption?: string | undefined;
-    labelPosition?: "left" | "top" | undefined;
-}, HTMLDivElement>;
-export declare const isNotDateRangeParams: (params: DatePickerProps<DatePickerPropType>) => params is PropsWithHTMLAttributesAndRef<{
-    type?: "date" | undefined;
-    value?: Date | null | undefined;
-    onChange?: DatePickerPropOnChange<"date"> | undefined;
-    minDate?: Date | undefined;
-    maxDate?: Date | undefined;
-    events?: Date[] | undefined;
-    dateTimeView?: "slider" | "classic" | "book" | undefined;
-    locale?: globalThis.Locale | undefined;
-    children?: undefined;
-    onError?: DatePickerPropOnError | undefined;
-    id?: string | undefined;
-    name?: string | undefined;
-    disabled?: boolean | undefined;
-    size?: "xs" | "s" | "m" | "l" | undefined;
-    view?: "default" | "clear" | undefined;
-    form?: "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
-    status?: "alert" | "success" | "warning" | undefined;
-    onFocus?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-    onBlur?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-    autoFocus?: boolean | undefined;
-    placeholder?: string | undefined;
-    readOnly?: boolean | undefined;
-    required?: boolean | undefined;
-    tabIndex?: number | undefined;
-    inputRef?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-    ariaLabel?: string | undefined;
-    iconSize?: "xs" | "s" | "m" | undefined;
-    format?: string | undefined;
-    separator?: string | undefined;
-    dropdownForm?: "default" | "round" | "brick" | undefined;
-    width?: "default" | "full" | undefined;
-    leftSide?: string | import("react").FC<PropsWithHTMLAttributesAndRef<{
-        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-        size?: "xs" | "s" | "m" | undefined;
-    }, HTMLSpanElement>> | undefined;
-    rightSide?: string | import("react").FC<PropsWithHTMLAttributesAndRef<{
-        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-        size?: "xs" | "s" | "m" | undefined;
-    }, HTMLSpanElement>> | undefined;
-    startFieldInputRef?: undefined;
-    endFieldInputRef?: undefined;
-    startFieldLeftSide?: undefined;
-    startFieldRightSide?: undefined;
-    endFieldLeftSide?: undefined;
-    endFieldRightSide?: undefined;
-    startFieldOnFocus?: undefined;
-    endFieldOnFocus?: undefined;
-    startFieldOnBlur?: undefined;
-    endFieldOnBlur?: undefined;
-    label?: string | undefined;
-    caption?: string | undefined;
-    labelPosition?: "left" | "top" | undefined;
-}, HTMLDivElement>;
 export declare const datePickerPropSeparatorDefault = ".";
-export declare const datePickerPropFormatDefault: string;
-export declare const datePickerPropPlaceholderDefault: string;
+export declare const datePickerPropFormatTypeDate: string;
+export declare const datePickerPropPlaceholderTypeDate: string;
+export declare const datePickerPropFormatTypeDateTime: string;
+export declare const datePickerPropPlaceholderTypeDateTime: string;
 export declare const normalizeRangeValue: (dateRange: DateRange) => DateRange;
+export declare const getMultiplicityTime: (format: string, multiplicityHours: number | undefined, multiplicityMinutes: number | undefined, multiplicitySeconds: number | undefined) => (number | undefined)[];
+export declare const getTimeEnum: (length: number, multiplicity: number | undefined, startOfUnits: (date: Date) => Date, addUnits: (date: Date, amount: number) => Date, getItemLabel: (date: Date) => string) => string[];
 export {};

package/__internal__/src/components/DatePickerCanary/helpers.js

@@ -1,4 +1,6 @@
-export var datePickerPropType = ['date', 'date-range'];
+import { startOfToday } from 'date-fns';
+import { range } from '../../utils/array';
+export var datePickerPropType = ['date', 'date-range', 'date-time'];
 export var datePickerPropTypeDefault = datePickerPropType[0];
 export var datePickerErrorTypes = [
     'outOfRange',
@@ -7,15 +9,11 @@ export var datePickerErrorTypes = [
 ];
 export var datePickerPropDropdownForm = ['default', 'brick', 'round'];
 export var datePickerPropDropdownFormDefault = datePickerPropDropdownForm[0];
-export var isDateRangeParams = function (params) {
-    return params.type === datePickerPropType[1];
-};
-export var isNotDateRangeParams = function (params) {
-    return params.type === datePickerPropType[0];
-};
 export var datePickerPropSeparatorDefault = '.';
-export var datePickerPropFormatDefault = "dd" + datePickerPropSeparatorDefault + "MM" + datePickerPropSeparatorDefault + "yyyy";
-export var datePickerPropPlaceholderDefault = "\u0414\u0414" + datePickerPropSeparatorDefault + "\u041C\u041C" + datePickerPropSeparatorDefault + "\u0413\u0413\u0413\u0413";
+export var datePickerPropFormatTypeDate = "dd" + datePickerPropSeparatorDefault + "MM" + datePickerPropSeparatorDefault + "yyyy";
+export var datePickerPropPlaceholderTypeDate = "\u0414\u0414" + datePickerPropSeparatorDefault + "\u041C\u041C" + datePickerPropSeparatorDefault + "\u0413\u0413\u0413\u0413";
+export var datePickerPropFormatTypeDateTime = datePickerPropFormatTypeDate + " HH:mm:ss";
+export var datePickerPropPlaceholderTypeDateTime = datePickerPropPlaceholderTypeDate + " \u0427\u0427:\u041C\u041C:\u0421\u0421";
 export var normalizeRangeValue = function (dateRange) {
     var _a, _b;
     if (dateRange[0] && dateRange[1] && ((_a = dateRange[0]) === null || _a === void 0 ? void 0 : _a.getTime()) > ((_b = dateRange[1]) === null || _b === void 0 ? void 0 : _b.getTime())) {
@@ -23,3 +21,25 @@ export var normalizeRangeValue = function (dateRange) {
     }
     return dateRange;
 };
+export var getMultiplicityTime = function (format, multiplicityHours, multiplicityMinutes, multiplicitySeconds) {
+    var _a;
+    var markers = ['HH', 'mm', 'ss'];
+    var formatArray = (_a = format.split(' ')[1]) === null || _a === void 0 ? void 0 : _a.split(':');
+    var map = {
+        HH: multiplicityHours,
+        mm: multiplicityMinutes,
+        ss: multiplicitySeconds
+    };
+    return markers.map(function (marker) { return ((formatArray === null || formatArray === void 0 ? void 0 : formatArray.indexOf(marker)) < 0 ? 0 : map[marker]); });
+};
+export var getTimeEnum = function (length, multiplicity, startOfUnits, addUnits, getItemLabel) {
+    if (multiplicity === void 0) { multiplicity = 1; }
+    var numbers = range(multiplicity ? Math.floor(length / multiplicity) : 0);
+    if (numbers.length === 0) {
+        return [];
+    }
+    var startDate = startOfUnits(startOfToday());
+    return numbers.map(function (number) {
+        return getItemLabel(addUnits(startDate, number * multiplicity));
+    });
+};

package/__internal__/src/components/DatePickerCanary/useCurrentVisibleDate.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useCurrentVisibleDate: (date?: Date | undefined, onChange?: ((date: Date) => void) | undefined) => [Date | undefined, React.Dispatch<React.SetStateAction<Date | undefined>>];

package/__internal__/src/components/DatePickerCanary/useCurrentVisibleDate.js

@@ -0,0 +1,8 @@
+import { useEffect, useState } from 'react';
+export var useCurrentVisibleDate = function (date, onChange) {
+    var _a;
+    var state = useState(date);
+    useEffect(function () { return state[1](date); }, [date === null || date === void 0 ? void 0 : date.getTime()]);
+    useEffect(function () { return state[0] && (onChange === null || onChange === void 0 ? void 0 : onChange(state[0])); }, [(_a = state[0]) === null || _a === void 0 ? void 0 : _a.getTime()]);
+    return state;
+};

package/__internal__/src/components/DateTimeCanary/DateTimeAdditionalControls/DateTimeAdditionalControls.css

@@ -0,0 +1,9 @@
+.DateTimeAdditionalControls {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-top: var(--space-l);
+  gap: var(--space-s);
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}

package/__internal__/src/components/DateTimeCanary/DateTimeAdditionalControls/DateTimeAdditionalControls.d.ts

@@ -0,0 +1,9 @@
+import './DateTimeAdditionalControls.css';
+import React from 'react';
+import { DateTimeAdditionalControlRenderProp } from '../helpers';
+declare type Props = {
+    renderAdditionalControls?: DateTimeAdditionalControlRenderProp;
+    currentVisibleDate?: Date;
+};
+export declare const DateTimeAdditionalControls: React.FC<Props>;
+export {};

package/__internal__/src/components/DateTimeCanary/DateTimeAdditionalControls/DateTimeAdditionalControls.js

@@ -0,0 +1,17 @@
+import './DateTimeAdditionalControls.css';
+import React from 'react';
+import { cn } from '../../../utils/bem';
+function isRenderFn(fn) {
+    return fn.call !== undefined;
+}
+var cnDateTimeAdditionalControls = cn('DateTimeAdditionalControls');
+export var DateTimeAdditionalControls = function (props) {
+    var renderAdditionalControls = props.renderAdditionalControls, currentVisibleDate = props.currentVisibleDate;
+    if (typeof renderAdditionalControls !== 'undefined') {
+        var content = isRenderFn(renderAdditionalControls)
+            ? renderAdditionalControls({ currentVisibleDate: currentVisibleDate })
+            : renderAdditionalControls;
+        return React.createElement("div", { className: cnDateTimeAdditionalControls() }, content);
+    }
+    return null;
+};

package/__internal__/src/components/DateTimeCanary/DateTimeTypeDate/DateTimeTypeDate.js

@@ -3,6 +3,7 @@ import React, { forwardRef, useEffect } from 'react';
 import { addMonths, startOfMonth } from 'date-fns';
 import ruLocale from 'date-fns/locale/ru';
 import { useFlag } from '../../../hooks/useFlag/useFlag';
+import { DateTimeAdditionalControls } from '../DateTimeAdditionalControls/DateTimeAdditionalControls';
 import { DateTimeLabel } from '../DateTimeLabel/DateTimeLabel';
 import { DateTimeMonth } from '../DateTimeMonth/DateTimeMonth';
 import { DateTimeToggler } from '../DateTimeToggler/DateTimeToggler';
@@ -12,7 +13,7 @@ import { getDaysOfMonth, getDaysOfWeek, getHandleSelectDate, getMouthLabelWithYe
 import { dateTimePropView, dateTimePropViewDefault } from '../helpers/types';
 import { cnDateTimeMixLayout } from '../mixs';
 export var DateTimeTypeDate = forwardRef(function (props, ref) {
-    var className = props.className, minDate = props.minDate, maxDate = props.maxDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, currentVisibleDateProp = props.currentVisibleDate, events = props.events, _a = props.locale, locale = _a === void 0 ? ruLocale : _a, _b = props.view, view = _b === void 0 ? dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = __rest(props, ["className", "minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "view", "onMove", "onChangeCurrentVisibleDate"]);
+    var className = props.className, minDate = props.minDate, maxDate = props.maxDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, currentVisibleDateProp = props.currentVisibleDate, events = props.events, _a = props.locale, locale = _a === void 0 ? ruLocale : _a, _b = props.view, view = _b === void 0 ? dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, otherProps = __rest(props, ["className", "minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "view", "onMove", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
     var _c = __read(useFlag(), 2), changeMonth = _c[0], _d = _c[1], on = _d.on, off = _d.off;
     useEffect(function () {
         !changeMonth && (onMove === null || onMove === void 0 ? void 0 : onMove(moveTypes[2]));
@@ -56,7 +57,8 @@ export var DateTimeTypeDate = forwardRef(function (props, ref) {
     if (view === dateTimePropView[0]) {
         return (React.createElement("div", __assign({}, otherProps, { ref: ref, className: cnDateTimeMixLayout({ view: view }, [className]) }),
             React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: prevMonthHandle, nextOnClick: nextMonthHandle, label: pageOneLabel, onLabelClick: on }),
-            React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth })));
+            React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth }),
+            React.createElement(DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: renderAdditionalControls })));
     }
     var pageTwoCurrentVisibleDate = addMonths(currentVisibleDate, 1);
     var pageTwoDaysOfMonth = getDaysOfMonth({
@@ -70,13 +72,15 @@ export var DateTimeTypeDate = forwardRef(function (props, ref) {
     });
     var pageTwoLabel = getMouthLabelWithYear(pageTwoCurrentVisibleDate, locale);
     if (view === dateTimePropView[1]) {
-        return (React.createElement("div", __assign({}, otherProps, { ref: ref, className: cnDateTimeMixLayout({ view: view }, [className]) }),
-            React.createElement("div", { className: cnDateTimeMixLayout('Page') },
-                React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: prevMonthHandle, label: pageOneLabel, onLabelClick: on }),
-                React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth })),
-            React.createElement("div", { className: cnDateTimeMixLayout('Page') },
-                React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), nextOnClick: nextMonthHandle, label: pageTwoLabel, onLabelClick: on }),
-                React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth }))));
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", __assign({}, otherProps, { ref: ref, className: cnDateTimeMixLayout({ view: view }, [className]) }),
+                React.createElement("div", { className: cnDateTimeMixLayout('Page') },
+                    React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: prevMonthHandle, label: pageOneLabel, onLabelClick: on }),
+                    React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth })),
+                React.createElement("div", { className: cnDateTimeMixLayout('Page') },
+                    React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), nextOnClick: nextMonthHandle, label: pageTwoLabel, onLabelClick: on }),
+                    React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth }))),
+            React.createElement(DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: renderAdditionalControls })));
     }
     return (React.createElement("div", __assign({}, otherProps, { ref: ref, className: cnDateTimeMixLayout({ view: view }, [className]) }),
         React.createElement(DateTimeYearSlider, { className: cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
@@ -86,5 +90,6 @@ export var DateTimeTypeDate = forwardRef(function (props, ref) {
                 React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth })),
             React.createElement("div", { className: cnDateTimeMixLayout('Page') },
                 React.createElement(DateTimeLabel, { className: cnDateTimeMixLayout('Label'), label: pageTwoLabel, onClick: on, cursor: "pointer" }),
-                React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth })))));
+                React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth }))),
+        React.createElement(DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: renderAdditionalControls })));
 });

package/__internal__/src/components/DateTimeCanary/DateTimeTypeDateTime/DateTimeTypeDateTime.js

@@ -3,18 +3,19 @@ import './DateTimeTypeDateTime.css';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { useForkRef } from '../../../hooks/useForkRef/useForkRef';
 import { cn } from '../../../utils/bem';
+import { DateTimeAdditionalControls } from '../DateTimeAdditionalControls/DateTimeAdditionalControls';
 import { DateTimeTypeDate } from '../DateTimeTypeDate/DateTimeTypeDate';
 import { DateTimeTypeTime } from '../DateTimeTypeTime/DateTimeTypeTime';
 import { moveTypes } from '../helpers';
 import { useOnChange } from './useOnChange';
 var cnDateTimeTypeDateTime = cn('DateTimeTypeDateTime');
 export var DateTimeTypeDateTime = forwardRef(function (props, ref) {
-    var className = props.className, onMoveProp = props.onMove, currentVisibleDate = props.currentVisibleDate, value = props.value, onChange = props.onChange, minDate = props.minDate, maxDate = props.maxDate, events = props.events, locale = props.locale, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, multiplicitySeconds = props.multiplicitySeconds, multiplicityMinutes = props.multiplicityMinutes, multiplicityHours = props.multiplicityHours, style = props.style, otherProps = __rest(props, ["className", "onMove", "currentVisibleDate", "value", "onChange", "minDate", "maxDate", "events", "locale", "onChangeCurrentVisibleDate", "multiplicitySeconds", "multiplicityMinutes", "multiplicityHours", "style"]);
+    var className = props.className, onMoveProp = props.onMove, currentVisibleDate = props.currentVisibleDate, value = props.value, onChange = props.onChange, minDate = props.minDate, maxDate = props.maxDate, events = props.events, locale = props.locale, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, multiplicitySeconds = props.multiplicitySeconds, multiplicityMinutes = props.multiplicityMinutes, multiplicityHours = props.multiplicityHours, style = props.style, renderAdditionalControls = props.renderAdditionalControls, otherProps = __rest(props, ["className", "onMove", "currentVisibleDate", "value", "onChange", "minDate", "maxDate", "events", "locale", "onChangeCurrentVisibleDate", "multiplicitySeconds", "multiplicityMinutes", "multiplicityHours", "style", "renderAdditionalControls"]);
     var _a = __read(useState(moveTypes[2]), 2), moveType = _a[0], setMoveType = _a[1];
     var _b = __read(useState({
         '--root-padding-left': '0px'
     }), 2), cssVars = _b[0], setCssVars = _b[1];
-    var _c = __read(useOnChange(onChange), 2), onDateChange = _c[0], onTimeChange = _c[1];
+    var _c = __read(useOnChange(onChange, value), 2), onDateChange = _c[0], onTimeChange = _c[1];
     var rootRef = useRef(null);
     var onMove = function (type) {
         setMoveType(type);
@@ -28,7 +29,9 @@ export var DateTimeTypeDateTime = forwardRef(function (props, ref) {
             });
         }
     }, []);
-    return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeTypeDateTime({ withTime: withTime }, [className]), ref: useForkRef([rootRef, ref]), style: __assign(__assign({}, style), cssVars) }),
-        React.createElement(DateTimeTypeDate, { className: cnDateTimeTypeDateTime('Date', { withTime: withTime }), onMove: onMove, currentVisibleDate: currentVisibleDate, value: value, onChange: onDateChange, minDate: minDate, maxDate: maxDate, events: events, locale: locale, onChangeCurrentVisibleDate: onChangeCurrentVisibleDate }),
-        withTime && (React.createElement(DateTimeTypeTime, { className: cnDateTimeTypeDateTime('Time'), value: value, onChange: onTimeChange, minDate: minDate, maxDate: maxDate, locale: locale, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes, multiplicityHours: multiplicityHours }))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", __assign({}, otherProps, { className: cnDateTimeTypeDateTime({ withTime: withTime }, [className]), ref: useForkRef([rootRef, ref]), style: __assign(__assign({}, style), cssVars) }),
+            React.createElement(DateTimeTypeDate, { className: cnDateTimeTypeDateTime('Date', { withTime: withTime }), onMove: onMove, currentVisibleDate: currentVisibleDate, value: value, onChange: onDateChange, minDate: minDate, maxDate: maxDate, events: events, locale: locale, renderAdditionalControls: withTime ? undefined : renderAdditionalControls, onChangeCurrentVisibleDate: onChangeCurrentVisibleDate }),
+            withTime && (React.createElement(DateTimeTypeTime, { className: cnDateTimeTypeDateTime('Time'), value: value, onChange: onTimeChange, minDate: minDate, maxDate: maxDate, locale: locale, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes, multiplicityHours: multiplicityHours }))),
+        React.createElement(DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: withTime ? renderAdditionalControls : undefined })));
 });

package/__internal__/src/components/DateTimeCanary/DateTimeTypeDateTime/useOnChange.d.ts

@@ -1,2 +1,2 @@
 import { DateTimePropOnChange } from '../helpers';
-export declare const useOnChange: (onChange: DateTimePropOnChange | undefined) => DateTimePropOnChange[];
+export declare const useOnChange: (onChange: DateTimePropOnChange | undefined, value: Date | undefined) => DateTimePropOnChange[];

package/__internal__/src/components/DateTimeCanary/DateTimeTypeDateTime/useOnChange.js

@@ -1,5 +1,5 @@
 import { __read } from "tslib";
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { getHours, getMinutes, getSeconds, set } from 'date-fns';
 import { useMutableRef } from '../../../hooks/useMutableRef/useMutableRef';
 var getTime = function (date) {
@@ -8,8 +8,8 @@ var getTime = function (date) {
     }
     return [getHours(date), getMinutes(date), getSeconds(date)];
 };
-export var useOnChange = function (onChange) {
-    var _a = __read(useState(), 2), time = _a[0], setTime = _a[1];
+export var useOnChange = function (onChange, value) {
+    var _a = __read(useState(value), 2), time = _a[0], setTime = _a[1];
     var onChangeRef = useMutableRef(onChange);
     var timeRef = useMutableRef(time);
     var onDateChange = useCallback(function (_a) {
@@ -21,8 +21,8 @@ export var useOnChange = function (onChange) {
     var onTimeChange = useCallback(function (_a) {
         var _b;
         var e = _a.e, value = _a.value;
-        setTime(value);
         (_b = onChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeRef, { e: e, value: value });
     }, []);
+    useEffect(function () { return setTime(value); }, [value === null || value === void 0 ? void 0 : value.getTime()]);
     return [onDateChange, onTimeChange];
 };