@consta/uikit 3.5.0 → 3.6.0

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

@@ -0,0 +1,154 @@
+/*
+задается сверху
+--item-width
+--parent-width
+*/
+
+.DateTimeSlider {
+  --slider-height: var(--control-height-m);
+  --slider-width: calc(var(--date-time-cell-width) * 14 + var(--space-m));
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: var(--slider-width);
+}
+
+.DateTimeSlider-Slider {
+    position: relative;
+    overflow: hidden;
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    height: var(--slider-height);
+    margin: 0 var(--space-xs);
+    background: var(--color-control-bg-ghost);
+    border-radius: var(--control-radius);
+  }
+
+.DateTimeSlider-Button_direction_prev {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+
+.DateTimeSlider-SliderBody {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    height: 100%;
+  }
+
+.DateTimeSlider-Parent {
+    position: absolute;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: var(--parent-width);
+    height: 100%;
+    -webkit-transition: -webkit-transform 0.5s;
+    transition: -webkit-transform 0.5s;
+    transition: transform 0.5s;
+    transition: transform 0.5s, -webkit-transform 0.5s;
+  }
+
+.DateTimeSlider-Parent_position_0 {
+        -webkit-transform: translateX(calc(var(--parent-width) * -1));
+                transform: translateX(calc(var(--parent-width) * -1));
+      }
+
+.DateTimeSlider-Parent_position_1 {
+        -webkit-transform: translateX(0);
+                transform: translateX(0);
+      }
+
+.DateTimeSlider-Parent_position_2 {
+        -webkit-transform: translateX(calc(var(--parent-width)));
+                transform: translateX(calc(var(--parent-width)));
+      }
+
+.DateTimeSlider-Parent_position_3 {
+        -webkit-transform: translateX(calc(var(--parent-width) * 2));
+                transform: translateX(calc(var(--parent-width) * 2));
+      }
+
+.DateTimeSlider-Parent_selected::before {
+        content: '';
+        position: absolute;
+        left: var(--value-offset);
+        bottom: 0;
+        width: var(--value-width);
+        height: var(--space-3xs);
+        background-color: var(--color-control-bg-primary);
+        pointer-events: none;
+      }
+
+/* исправляет разрыв между полосками */
+
+.DateTimeSlider-Parent_selected + .DateTimeSlider-Parent_selected {
+        left: calc(var(--value-offset) - 1px);
+        width: calc(var(--value-width) + 1px);
+      }
+
+.DateTimeSlider-ParentLabel {
+    position: absolute;
+    right: 0;
+    -webkit-transition: color 0.2s, -webkit-transform 0.5s;
+    transition: color 0.2s, -webkit-transform 0.5s;
+    transition: transform 0.5s, color 0.2s;
+    transition: transform 0.5s, color 0.2s, -webkit-transform 0.5s;
+  }
+
+.DateTimeSlider-ParentLabel_position_0 {
+        -webkit-transform: translateX(calc(var(--item-width) * -13));
+                transform: translateX(calc(var(--item-width) * -13));
+      }
+
+.DateTimeSlider-ParentLabel_position_1 {
+        -webkit-transform: translateX(calc((var(--parent-width) + var(--item-width)) / -2 + 50%));
+                transform: translateX(calc((var(--parent-width) + var(--item-width)) / -2 + 50%));
+      }
+
+.DateTimeSlider-ParentLabel_position_2 {
+        -webkit-transform: translateX(calc(var(--space-2xs) * -1));
+                transform: translateX(calc(var(--space-2xs) * -1));
+      }
+
+.DateTimeSlider-ParentLabel_position_3 {
+        -webkit-transform: translateX(calc(var(--parent-width)));
+                transform: translateX(calc(var(--parent-width)));
+      }
+
+.DateTimeSlider-Item {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: end;
+        -ms-flex-align: end;
+            align-items: flex-end;
+    width: var(--item-width);
+    height: 100%;
+    margin-bottom: var(--space-3xs);
+    background: transparent;
+    border: none;
+    outline: transparent;
+    cursor: pointer;
+  }
+
+.DateTimeSlider-ItemLabel {
+    width: var(--item-width);
+    height: var(--space-m);
+    margin-bottom: var(--space-3xs);
+  }
+
+.DateTimeSlider-Selector {
+    position: absolute;
+    width: calc(var(--item-width) * 2);
+    height: var(--slider-height);
+    background-color: var(--color-control-bg-ghost);
+    border-radius: var(--control-radius);
+    -webkit-transition: -webkit-transform 0.3s;
+    transition: -webkit-transform 0.3s;
+    transition: transform 0.3s;
+    transition: transform 0.3s, -webkit-transform 0.3s;
+    -webkit-transform: translateX(calc(var(--item-width) * var(--current-item)));
+            transform: translateX(calc(var(--item-width) * var(--current-item)));
+  }

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

@@ -0,0 +1,24 @@
+import './DateTimeSlider.css';
+import React from 'react';
+import { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';
+declare type Data = {
+    label: string | number;
+    current?: boolean;
+    valueRange?: number[];
+    date: Date;
+    items: {
+        label: string;
+        date: Date;
+        current?: boolean;
+    }[];
+};
+export declare type DateTimeSliderProps = PropsWithHTMLAttributes<{
+    onChange?: (date: Date) => void;
+    onPrev?: () => void;
+    onNext?: () => void;
+    children?: never;
+    data: Data[];
+}, HTMLDivElement>;
+export declare const cnDateTimeSlider: import("@bem-react/classname").ClassNameFormatter;
+export declare const DateTimeSlider: React.FC<DateTimeSliderProps>;
+export {};

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

@@ -0,0 +1,36 @@
+import { __assign, __rest } from "tslib";
+import './DateTimeSlider.css';
+import React from 'react';
+import { IconForward } from '../../../icons/IconForward/IconForward';
+import { cn } from '../../../utils/bem';
+import { Button } from '../../Button/Button';
+import { Text } from '../../Text/Text';
+export var cnDateTimeSlider = cn('DateTimeSlider');
+var getCurrentItem = function (data) {
+    var _a;
+    var index = ((_a = data.find(function (item) { return item.current; })) === null || _a === void 0 ? void 0 : _a.items.findIndex(function (item) { return item.current; })) || 0;
+    return index < 0 ? 0 : index;
+};
+export var DateTimeSlider = function (props) {
+    var _a;
+    var className = props.className, onChange = props.onChange, data = props.data, onPrev = props.onPrev, onNext = props.onNext, otherProps = __rest(props, ["className", "onChange", "data", "onPrev", "onNext"]);
+    var currentItemIndex = getCurrentItem(data);
+    return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeSlider(null, [className]) }),
+        React.createElement(Button, { className: cnDateTimeSlider('Button', { direction: 'prev' }), view: "ghost", iconLeft: IconForward, onClick: onPrev }),
+        React.createElement("div", { className: cnDateTimeSlider('Slider'), style: (_a = {}, _a['--current-item'] = currentItemIndex, _a) },
+            React.createElement("div", { className: cnDateTimeSlider('SliderBody') },
+                React.createElement("div", { className: cnDateTimeSlider('Selector') }),
+                data.map(function (year, index) { return (React.createElement(Text, { className: cnDateTimeSlider('ParentLabel', { position: index.toString() }), weight: "bold", size: "s", key: year.label, view: year.current ? undefined : 'ghost' }, year.label)); }),
+                data.map(function (year, index) {
+                    var _a;
+                    return (React.createElement("div", { key: year.label, className: cnDateTimeSlider('Parent', {
+                            position: index.toString(),
+                            selected: !!year.valueRange
+                        }), style: year.valueRange && (_a = {},
+                            _a['--value-offset'] = year.valueRange[0] + "%",
+                            _a['--value-width'] = year.valueRange[1] + "%",
+                            _a) }, year.items.map(function (item, index) { return (React.createElement("button", { className: cnDateTimeSlider('Item'), key: index, onFocus: function () { return onChange === null || onChange === void 0 ? void 0 : onChange(item.date); }, type: "button" },
+                        React.createElement(Text, { className: cnDateTimeSlider('ItemLabel'), size: "2xs", view: "ghost", align: "center" }, item.label))); })));
+                }))),
+        React.createElement(Button, { className: cnDateTimeSlider('Button', { direction: 'next' }), view: "ghost", iconLeft: IconForward, onClick: onNext })));
+};

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

@@ -0,0 +1,34 @@
+.DateTimeTimeColumn {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+  .DateTimeTimeColumn-Label {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+  }
+
+  .DateTimeTimeColumn-ScrollWrapper {
+    overflow-y: scroll;
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    -ms-overflow-style: none;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+  }
+
+  .DateTimeTimeColumn-ScrollWrapper::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+
+  .DateTimeTimeColumn-FakeElemet {
+    height: calc(100% - var(--date-time-cell-height));
+  }

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

@@ -0,0 +1,17 @@
+import './DateTimeTimeColumn.css';
+import React from 'react';
+import { PropsWithJsxAttributes } from '../../../utils/types/PropsWithJsxAttributes';
+declare type DateTimeTimeColumnPropItem = {
+    label: string;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    selected?: boolean;
+};
+declare type DateTimeTimeColumnProps = PropsWithJsxAttributes<{
+    children?: never;
+    label: string;
+    items: DateTimeTimeColumnPropItem[];
+}, 'div'>;
+export declare const cnDateTimeTimeColumn: import("@bem-react/classname").ClassNameFormatter;
+export declare const DateTimeTimeColumn: React.FC<DateTimeTimeColumnProps>;
+export {};

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

@@ -0,0 +1,23 @@
+import { __assign, __read, __rest } from "tslib";
+import './DateTimeTimeColumn.css';
+import React, { memo, useRef } from 'react';
+import { cn } from '../../../utils/bem';
+import { Text } from '../../Text/Text';
+import { DateTimeCell } from '../DateTimeCell/DateTimeCell';
+import { DateTimeGrid } from '../DateTimeGrid/DateTimeGrid';
+import { useScrollToElement } from './useScrollToElement/useScrollToElement';
+export var cnDateTimeTimeColumn = cn('DateTimeTimeColumn');
+export var DateTimeTimeColumn = memo(function (props) {
+    var label = props.label, items = props.items, className = props.className, otherProps = __rest(props, ["label", "items", "className"]);
+    var scrollWrapperRef = useRef(null);
+    var _a = __read(useScrollToElement(items, scrollWrapperRef), 1), itemsRefs = _a[0];
+    if (items.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeTimeColumn(null, [className]) }),
+        React.createElement(DateTimeCell, { className: cnDateTimeTimeColumn('Label') },
+            React.createElement(Text, { view: "ghost", size: "2xs" }, label)),
+        React.createElement("div", { className: cnDateTimeTimeColumn('ScrollWrapper'), ref: scrollWrapperRef },
+            React.createElement(DateTimeGrid, { className: cnDateTimeTimeColumn('List'), items: items, itemsRefs: itemsRefs }),
+            React.createElement("div", { className: cnDateTimeTimeColumn('FakeElemet') }))));
+});

package/__internal__/src/components/DateTimeCanary/DateTimeTimeColumn/useScrollToElement/useScrollToElement.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const useScrollToElement: (items: {
+    selected?: boolean;
+}[], scrollWrapper: React.RefObject<HTMLDivElement>) => import("react").RefObject<HTMLDivElement>[][];

package/__internal__/src/components/DateTimeCanary/DateTimeTimeColumn/useScrollToElement/useScrollToElement.js

@@ -0,0 +1,32 @@
+import { __read, __spread } from "tslib";
+import { createRef, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+export var useScrollToElement = function (items, scrollWrapper) {
+    var _a = __read(useState([]), 2), itemDimentions = _a[0], setItemDimentions = _a[1];
+    var itemsRefs = useMemo(function () { return new Array(items.length).fill(null).map(function () { return createRef(); }); }, [items.length]);
+    useEffect(function () {
+        var _a;
+        var selectedItemIndex = items.findIndex(function (item) { return item.selected; });
+        var scrollWrapperElement = scrollWrapper.current;
+        if (scrollWrapperElement) {
+            scrollWrapperElement.scrollTo({
+                top: ((_a = itemDimentions === null || itemDimentions === void 0 ? void 0 : itemDimentions[selectedItemIndex]) === null || _a === void 0 ? void 0 : _a.offset) || 0,
+                behavior: 'smooth'
+            });
+        }
+    });
+    useLayoutEffect(function () {
+        var itemDimentions = itemsRefs.reduce(function (accumulator, currentValue, index) {
+            var _a, _b;
+            var height = ((_a = currentValue.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+            var offset = accumulator.length > 0 ? ((_b = accumulator[index - 1]) === null || _b === void 0 ? void 0 : _b.offset) + height : 0;
+            return __spread(accumulator, [
+                {
+                    height: height,
+                    offset: offset
+                },
+            ]);
+        }, []);
+        setItemDimentions(itemDimentions);
+    }, [itemsRefs]);
+    return [itemsRefs];
+};

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

@@ -0,0 +1,34 @@
+.DateTimeToggler {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: calc(var(--date-time-cell-width) * 7);
+}
+
+  .DateTimeToggler:not(.DateTimeToggler_withPrevButton) {
+    padding-left: var(--control-height-s);
+  }
+
+  .DateTimeToggler:not(.DateTimeToggler_withNextButton) {
+    padding-right: var(--control-height-s);
+  }
+
+  .DateTimeToggler-Label {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    margin: 0 var(--space-xs);
+  }
+
+  .DateTimeToggler-Button_direction_prev {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }

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

@@ -0,0 +1,12 @@
+import './DateTimeToggler.css';
+import React from 'react';
+import { PropsWithJsxAttributes } from '../../../utils/types/PropsWithJsxAttributes';
+export declare type DateTimeTogglerProps = PropsWithJsxAttributes<{
+    prevOnClick?: React.EventHandler<React.MouseEvent<HTMLDivElement>>;
+    nextOnClick?: React.EventHandler<React.MouseEvent<HTMLDivElement>>;
+    onLabelClick?: React.EventHandler<React.MouseEvent<HTMLDivElement>>;
+    label: string | number;
+    children?: never;
+}, 'div'>;
+export declare const cnDateTimeToggler: import("@bem-react/classname").ClassNameFormatter;
+export declare const DateTimeToggler: React.FC<DateTimeTogglerProps>;

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

@@ -0,0 +1,15 @@
+import { __assign, __rest } from "tslib";
+import './DateTimeToggler.css';
+import React from 'react';
+import { IconForward } from '../../../icons/IconForward/IconForward';
+import { cn } from '../../../utils/bem';
+import { Button } from '../../Button/Button';
+import { DateTimeLabel } from '../DateTimeLabel/DateTimeLabel';
+export var cnDateTimeToggler = cn('DateTimeToggler');
+export var DateTimeToggler = function (props) {
+    var label = props.label, className = props.className, prevOnClick = props.prevOnClick, nextOnClick = props.nextOnClick, onLabelClick = props.onLabelClick, otherProps = __rest(props, ["label", "className", "prevOnClick", "nextOnClick", "onLabelClick"]);
+    return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeToggler({ withPrevButton: Boolean(prevOnClick), withNextButton: Boolean(nextOnClick) }, [className]) }),
+        prevOnClick && (React.createElement(Button, { className: cnDateTimeToggler('Button', { direction: 'prev' }), onClick: prevOnClick, iconLeft: IconForward, size: "s", view: "clear", iconSize: "s" })),
+        React.createElement(DateTimeLabel, { onClick: onLabelClick, cursor: onLabelClick && 'pointer', className: cnDateTimeToggler('Label'), label: label, align: "center" }),
+        nextOnClick && (React.createElement(Button, { className: cnDateTimeToggler('Button', { direction: 'next' }), onClick: nextOnClick, iconLeft: IconForward, size: "s", view: "clear", iconSize: "s" }))));
+};

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

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

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

@@ -0,0 +1,90 @@
+import { __assign, __read, __rest } from "tslib";
+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 { DateTimeLabel } from '../DateTimeLabel/DateTimeLabel';
+import { DateTimeMonth } from '../DateTimeMonth/DateTimeMonth';
+import { DateTimeToggler } from '../DateTimeToggler/DateTimeToggler';
+import { DateTimeTypeMonth } from '../DateTimeTypeMonth/DateTimeTypeMonth';
+import { DateTimeYearSlider } from '../DateTimeYearSlider/DateTimeYearSlider';
+import { getDaysOfMonth, getDaysOfWeek, getHandleSelectDate, getMouthLabelWithYear, isEqualDay, moveTypes, useCurrentVisibleDate, } from '../helpers';
+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, _a = props.currentVisibleDate, currentVisibleDateProp = _a === void 0 ? new Date() : _a, events = props.events, _b = props.locale, locale = _b === void 0 ? ruLocale : _b, _c = props.view, view = _c === void 0 ? dateTimePropViewDefault : _c, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = __rest(props, ["className", "minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "view", "onMove", "onChangeCurrentVisibleDate"]);
+    var _d = __read(useFlag(), 2), changeMonth = _d[0], _e = _d[1], on = _e.on, off = _e.off;
+    useEffect(function () {
+        !changeMonth && (onMove === null || onMove === void 0 ? void 0 : onMove(moveTypes[2]));
+    }, [changeMonth]);
+    var _f = __read(useCurrentVisibleDate({
+        currentVisibleDate: currentVisibleDateProp,
+        maxDate: maxDate,
+        minDate: minDate,
+        value: value,
+        startOfUnit: startOfMonth,
+        onChangeCurrentVisibleDate: onChangeCurrentVisibleDate
+    }), 2), currentVisibleDate = _f[0], setCurrentVisibleDate = _f[1];
+    if (changeMonth) {
+        return (React.createElement(DateTimeTypeMonth, __assign({}, otherProps, { ref: ref, className: className, minDate: minDate, maxDate: maxDate, locale: locale, events: events, currentVisibleDate: currentVisibleDate, view: view, onChange: function (_a) {
+                var value = _a.value;
+                setCurrentVisibleDate(value);
+                off();
+            }, onMove: onMove })));
+    }
+    var handleSelectDate = getHandleSelectDate({
+        minDate: minDate,
+        maxDate: maxDate,
+        value: value,
+        onChange: onChange,
+        onChangeRange: onChangeRange,
+        isEqualUnit: isEqualDay
+    });
+    var pageOneDaysOfMonth = getDaysOfMonth({
+        date: currentVisibleDate,
+        handleDayClick: handleSelectDate,
+        value: value,
+        events: events,
+        minDate: minDate,
+        maxDate: maxDate,
+        locale: locale
+    });
+    var pageOneLabel = getMouthLabelWithYear(currentVisibleDate, locale);
+    var daysOfWeek = getDaysOfWeek(locale);
+    var nextMonthHandle = function () { return setCurrentVisibleDate(addMonths(currentVisibleDate, 1)); };
+    var prevMonthHandle = function () { return setCurrentVisibleDate(addMonths(currentVisibleDate, -1)); };
+    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 })));
+    }
+    var pageTwoCurrentVisibleDate = addMonths(currentVisibleDate, 1);
+    var pageTwoDaysOfMonth = getDaysOfMonth({
+        date: pageTwoCurrentVisibleDate,
+        handleDayClick: handleSelectDate,
+        value: value,
+        events: events,
+        minDate: minDate,
+        maxDate: maxDate,
+        locale: locale
+    });
+    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("div", __assign({}, otherProps, { ref: ref, className: cnDateTimeMixLayout({ view: view }, [className]) }),
+        React.createElement(DateTimeYearSlider, { className: cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
+        React.createElement("div", { className: cnDateTimeMixLayout('PageWrapper') },
+            React.createElement("div", { className: cnDateTimeMixLayout('Page') },
+                React.createElement(DateTimeLabel, { className: cnDateTimeMixLayout('Label'), label: pageOneLabel, onClick: on, cursor: "pointer" }),
+                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 })))));
+});

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

@@ -0,0 +1,33 @@
+/*
+--root-padding-left
+задается из компонента
+*/
+
+.DateTimeTypeDateTime_withTime {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+.DateTimeTypeDateTime_withTime::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: calc(
+        (var(--control-height-s) + (var(--space-3xs) * 2)) * 7 + var(--space-s) +
+          var(--root-padding-left)
+      );
+      display: block;
+      width: 1px;
+      height: 100%;
+      background: var(--color-bg-border);
+    }
+
+.DateTimeTypeDateTime-Date_withTime {
+      padding-right: var(--space-s);
+    }
+
+.DateTimeTypeDateTime-Time {
+    padding-left: var(--space-s);
+  }

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

@@ -0,0 +1,3 @@
+import './DateTimeTypeDateTime.css';
+import { DateTimeTypeComponent } from '../helpers';
+export declare const DateTimeTypeDateTime: DateTimeTypeComponent<'date-time'>;

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

@@ -0,0 +1,34 @@
+import { __assign, __read, __rest } from "tslib";
+import './DateTimeTypeDateTime.css';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { useForkRef } from '../../../hooks/useForkRef/useForkRef';
+import { cn } from '../../../utils/bem';
+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 _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 rootRef = useRef(null);
+    var onMove = function (type) {
+        setMoveType(type);
+        onMoveProp === null || onMoveProp === void 0 ? void 0 : onMoveProp(type);
+    };
+    var withTime = moveType === moveTypes[2];
+    useEffect(function () {
+        if (rootRef.current) {
+            setCssVars({
+                '--root-padding-left': window.getComputedStyle(rootRef.current).paddingLeft || '0px'
+            });
+        }
+    }, []);
+    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 }))));
+});

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

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

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

@@ -0,0 +1,28 @@
+import { __read } from "tslib";
+import { useCallback, useState } from 'react';
+import { getHours, getMinutes, getSeconds, set } from 'date-fns';
+import { useMutableRef } from '../../../hooks/useMutableRef/useMutableRef';
+var getTime = function (date) {
+    if (!date) {
+        return [0, 0, 0];
+    }
+    return [getHours(date), getMinutes(date), getSeconds(date)];
+};
+export var useOnChange = function (onChange) {
+    var _a = __read(useState(), 2), time = _a[0], setTime = _a[1];
+    var onChangeRef = useMutableRef(onChange);
+    var timeRef = useMutableRef(time);
+    var onDateChange = useCallback(function (_a) {
+        var _b;
+        var e = _a.e, value = _a.value;
+        var _c = __read(getTime(timeRef.current), 3), hours = _c[0], minutes = _c[1], seconds = _c[2];
+        (_b = onChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeRef, { e: e, value: set(value, { hours: hours, minutes: minutes, seconds: seconds }) });
+    }, []);
+    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 });
+    }, []);
+    return [onDateChange, onTimeChange];
+};

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

@@ -0,0 +1,2 @@
+import { DateTimeTypeComponent } from '../helpers';
+export declare const DateTimeTypeMonth: DateTimeTypeComponent<'month'>;