@consta/uikit 3.5.0 → 3.6.0

package/__internal__/cjs-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__/cjs-src/components/DateTimeCanary/DateTimeToggler/DateTimeToggler.js

@@ -0,0 +1,18 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTimeToggler = exports.cnDateTimeToggler = void 0;
+var tslib_1 = require("tslib");
+require("./DateTimeToggler.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var IconForward_1 = require("../../../icons/IconForward/IconForward");
+var bem_1 = require("../../../utils/bem");
+var Button_1 = require("../../Button/Button");
+var DateTimeLabel_1 = require("../DateTimeLabel/DateTimeLabel");
+exports.cnDateTimeToggler = bem_1.cn('DateTimeToggler');
+exports.DateTimeToggler = function (props) {
+    var label = props.label, className = props.className, prevOnClick = props.prevOnClick, nextOnClick = props.nextOnClick, onLabelClick = props.onLabelClick, otherProps = tslib_1.__rest(props, ["label", "className", "prevOnClick", "nextOnClick", "onLabelClick"]);
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: exports.cnDateTimeToggler({ withPrevButton: Boolean(prevOnClick), withNextButton: Boolean(nextOnClick) }, [className]) }),
+        prevOnClick && (react_1["default"].createElement(Button_1.Button, { className: exports.cnDateTimeToggler('Button', { direction: 'prev' }), onClick: prevOnClick, iconLeft: IconForward_1.IconForward, size: "s", view: "clear", iconSize: "s" })),
+        react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { onClick: onLabelClick, cursor: onLabelClick && 'pointer', className: exports.cnDateTimeToggler('Label'), label: label, align: "center" }),
+        nextOnClick && (react_1["default"].createElement(Button_1.Button, { className: exports.cnDateTimeToggler('Button', { direction: 'next' }), onClick: nextOnClick, iconLeft: IconForward_1.IconForward, size: "s", view: "clear", iconSize: "s" }))));
+};

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

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

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

@@ -0,0 +1,93 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTimeTypeDate = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var date_fns_1 = require("date-fns");
+var ru_1 = tslib_1.__importDefault(require("date-fns/locale/ru"));
+var useFlag_1 = require("../../../hooks/useFlag/useFlag");
+var DateTimeLabel_1 = require("../DateTimeLabel/DateTimeLabel");
+var DateTimeMonth_1 = require("../DateTimeMonth/DateTimeMonth");
+var DateTimeToggler_1 = require("../DateTimeToggler/DateTimeToggler");
+var DateTimeTypeMonth_1 = require("../DateTimeTypeMonth/DateTimeTypeMonth");
+var DateTimeYearSlider_1 = require("../DateTimeYearSlider/DateTimeYearSlider");
+var helpers_1 = require("../helpers");
+var types_1 = require("../helpers/types");
+var mixs_1 = require("../mixs");
+exports.DateTimeTypeDate = react_1.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 ? ru_1["default"] : _b, _c = props.view, view = _c === void 0 ? types_1.dateTimePropViewDefault : _c, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = tslib_1.__rest(props, ["className", "minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "view", "onMove", "onChangeCurrentVisibleDate"]);
+    var _d = tslib_1.__read(useFlag_1.useFlag(), 2), changeMonth = _d[0], _e = _d[1], on = _e.on, off = _e.off;
+    react_1.useEffect(function () {
+        !changeMonth && (onMove === null || onMove === void 0 ? void 0 : onMove(helpers_1.moveTypes[2]));
+    }, [changeMonth]);
+    var _f = tslib_1.__read(helpers_1.useCurrentVisibleDate({
+        currentVisibleDate: currentVisibleDateProp,
+        maxDate: maxDate,
+        minDate: minDate,
+        value: value,
+        startOfUnit: date_fns_1.startOfMonth,
+        onChangeCurrentVisibleDate: onChangeCurrentVisibleDate
+    }), 2), currentVisibleDate = _f[0], setCurrentVisibleDate = _f[1];
+    if (changeMonth) {
+        return (react_1["default"].createElement(DateTimeTypeMonth_1.DateTimeTypeMonth, tslib_1.__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 = helpers_1.getHandleSelectDate({
+        minDate: minDate,
+        maxDate: maxDate,
+        value: value,
+        onChange: onChange,
+        onChangeRange: onChangeRange,
+        isEqualUnit: helpers_1.isEqualDay
+    });
+    var pageOneDaysOfMonth = helpers_1.getDaysOfMonth({
+        date: currentVisibleDate,
+        handleDayClick: handleSelectDate,
+        value: value,
+        events: events,
+        minDate: minDate,
+        maxDate: maxDate,
+        locale: locale
+    });
+    var pageOneLabel = helpers_1.getMouthLabelWithYear(currentVisibleDate, locale);
+    var daysOfWeek = helpers_1.getDaysOfWeek(locale);
+    var nextMonthHandle = function () { return setCurrentVisibleDate(date_fns_1.addMonths(currentVisibleDate, 1)); };
+    var prevMonthHandle = function () { return setCurrentVisibleDate(date_fns_1.addMonths(currentVisibleDate, -1)); };
+    if (view === types_1.dateTimePropView[0]) {
+        return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { ref: ref, className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]) }),
+            react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: prevMonthHandle, nextOnClick: nextMonthHandle, label: pageOneLabel, onLabelClick: on }),
+            react_1["default"].createElement(DateTimeMonth_1.DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth })));
+    }
+    var pageTwoCurrentVisibleDate = date_fns_1.addMonths(currentVisibleDate, 1);
+    var pageTwoDaysOfMonth = helpers_1.getDaysOfMonth({
+        date: pageTwoCurrentVisibleDate,
+        handleDayClick: handleSelectDate,
+        value: value,
+        events: events,
+        minDate: minDate,
+        maxDate: maxDate,
+        locale: locale
+    });
+    var pageTwoLabel = helpers_1.getMouthLabelWithYear(pageTwoCurrentVisibleDate, locale);
+    if (view === types_1.dateTimePropView[1]) {
+        return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { ref: ref, className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]) }),
+            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: prevMonthHandle, label: pageOneLabel, onLabelClick: on }),
+                react_1["default"].createElement(DateTimeMonth_1.DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth })),
+            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), nextOnClick: nextMonthHandle, label: pageTwoLabel, onLabelClick: on }),
+                react_1["default"].createElement(DateTimeMonth_1.DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth }))));
+    }
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { ref: ref, className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]) }),
+        react_1["default"].createElement(DateTimeYearSlider_1.DateTimeYearSlider, { className: mixs_1.cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
+        react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('PageWrapper') },
+            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { className: mixs_1.cnDateTimeMixLayout('Label'), label: pageOneLabel, onClick: on, cursor: "pointer" }),
+                react_1["default"].createElement(DateTimeMonth_1.DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth })),
+            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { className: mixs_1.cnDateTimeMixLayout('Label'), label: pageTwoLabel, onClick: on, cursor: "pointer" }),
+                react_1["default"].createElement(DateTimeMonth_1.DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth })))));
+});

package/__internal__/cjs-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__/cjs-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__/cjs-src/components/DateTimeCanary/DateTimeTypeDateTime/DateTimeTypeDateTime.js

@@ -0,0 +1,37 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTimeTypeDateTime = void 0;
+var tslib_1 = require("tslib");
+require("./DateTimeTypeDateTime.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useForkRef_1 = require("../../../hooks/useForkRef/useForkRef");
+var bem_1 = require("../../../utils/bem");
+var DateTimeTypeDate_1 = require("../DateTimeTypeDate/DateTimeTypeDate");
+var DateTimeTypeTime_1 = require("../DateTimeTypeTime/DateTimeTypeTime");
+var helpers_1 = require("../helpers");
+var useOnChange_1 = require("./useOnChange");
+var cnDateTimeTypeDateTime = bem_1.cn('DateTimeTypeDateTime');
+exports.DateTimeTypeDateTime = react_1.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 = tslib_1.__rest(props, ["className", "onMove", "currentVisibleDate", "value", "onChange", "minDate", "maxDate", "events", "locale", "onChangeCurrentVisibleDate", "multiplicitySeconds", "multiplicityMinutes", "multiplicityHours", "style"]);
+    var _a = tslib_1.__read(react_1.useState(helpers_1.moveTypes[2]), 2), moveType = _a[0], setMoveType = _a[1];
+    var _b = tslib_1.__read(react_1.useState({
+        '--root-padding-left': '0px'
+    }), 2), cssVars = _b[0], setCssVars = _b[1];
+    var _c = tslib_1.__read(useOnChange_1.useOnChange(onChange), 2), onDateChange = _c[0], onTimeChange = _c[1];
+    var rootRef = react_1.useRef(null);
+    var onMove = function (type) {
+        setMoveType(type);
+        onMoveProp === null || onMoveProp === void 0 ? void 0 : onMoveProp(type);
+    };
+    var withTime = moveType === helpers_1.moveTypes[2];
+    react_1.useEffect(function () {
+        if (rootRef.current) {
+            setCssVars({
+                '--root-padding-left': window.getComputedStyle(rootRef.current).paddingLeft || '0px'
+            });
+        }
+    }, []);
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: cnDateTimeTypeDateTime({ withTime: withTime }, [className]), ref: useForkRef_1.useForkRef([rootRef, ref]), style: tslib_1.__assign(tslib_1.__assign({}, style), cssVars) }),
+        react_1["default"].createElement(DateTimeTypeDate_1.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_1["default"].createElement(DateTimeTypeTime_1.DateTimeTypeTime, { className: cnDateTimeTypeDateTime('Time'), value: value, onChange: onTimeChange, minDate: minDate, maxDate: maxDate, locale: locale, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes, multiplicityHours: multiplicityHours }))));
+});

package/__internal__/cjs-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__/cjs-src/components/DateTimeCanary/DateTimeTypeDateTime/useOnChange.js

@@ -0,0 +1,31 @@
+"use strict";
+exports.__esModule = true;
+exports.useOnChange = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var date_fns_1 = require("date-fns");
+var useMutableRef_1 = require("../../../hooks/useMutableRef/useMutableRef");
+var getTime = function (date) {
+    if (!date) {
+        return [0, 0, 0];
+    }
+    return [date_fns_1.getHours(date), date_fns_1.getMinutes(date), date_fns_1.getSeconds(date)];
+};
+exports.useOnChange = function (onChange) {
+    var _a = tslib_1.__read(react_1.useState(), 2), time = _a[0], setTime = _a[1];
+    var onChangeRef = useMutableRef_1.useMutableRef(onChange);
+    var timeRef = useMutableRef_1.useMutableRef(time);
+    var onDateChange = react_1.useCallback(function (_a) {
+        var _b;
+        var e = _a.e, value = _a.value;
+        var _c = tslib_1.__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: date_fns_1.set(value, { hours: hours, minutes: minutes, seconds: seconds }) });
+    }, []);
+    var onTimeChange = react_1.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__/cjs-src/components/DateTimeCanary/DateTimeTypeMonth/DateTimeTypeMonth.d.ts

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

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTypeMonth/DateTimeTypeMonth.js

@@ -0,0 +1,93 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTimeTypeMonth = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var date_fns_1 = require("date-fns");
+var ru_1 = tslib_1.__importDefault(require("date-fns/locale/ru"));
+var useFlag_1 = require("../../../hooks/useFlag/useFlag");
+var DateTime10Years_1 = require("../DateTime10Years/DateTime10Years");
+var DateTime10YearSlider_1 = require("../DateTime10YearSlider/DateTime10YearSlider");
+var DateTimeLabel_1 = require("../DateTimeLabel/DateTimeLabel");
+var DateTimeToggler_1 = require("../DateTimeToggler/DateTimeToggler");
+var DateTimeTypeYear_1 = require("../DateTimeTypeYear/DateTimeTypeYear");
+var DateTimeYear_1 = require("../DateTimeYear/DateTimeYear");
+var helpers_1 = require("../helpers");
+var types_1 = require("../helpers/types");
+var mixs_1 = require("../mixs");
+exports.DateTimeTypeMonth = react_1.forwardRef(function (props, ref) {
+    var 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 ? ru_1["default"] : _a, className = props.className, _b = props.view, view = _b === void 0 ? types_1.dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = tslib_1.__rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate"]);
+    var _c = tslib_1.__read(useFlag_1.useFlag(), 2), changeYear = _c[0], _d = _c[1], on = _d.on, off = _d.off;
+    react_1.useEffect(function () {
+        !changeYear && (onMove === null || onMove === void 0 ? void 0 : onMove(helpers_1.moveTypes[1]));
+    }, [changeYear]);
+    var _e = tslib_1.__read(helpers_1.useCurrentVisibleDate({
+        currentVisibleDate: currentVisibleDateProp,
+        maxDate: maxDate,
+        minDate: minDate,
+        value: value,
+        startOfUnit: date_fns_1.startOfYear,
+        onChangeCurrentVisibleDate: onChangeCurrentVisibleDate
+    }), 2), currentVisibleDate = _e[0], setCurrentVisibleDate = _e[1];
+    if (changeYear) {
+        return (react_1["default"].createElement(DateTimeTypeYear_1.DateTimeTypeYear, tslib_1.__assign({}, otherProps, { ref: ref, className: className, currentVisibleDate: currentVisibleDate, minDate: minDate, maxDate: maxDate, locale: locale, events: events, view: view, onChange: function (_a) {
+                var value = _a.value;
+                setCurrentVisibleDate(value);
+                off();
+            }, onMove: onMove })));
+    }
+    var handleSelectDate = helpers_1.getHandleSelectDate({
+        minDate: minDate,
+        maxDate: maxDate,
+        value: value,
+        onChange: onChange,
+        onChangeRange: onChangeRange,
+        isEqualUnit: helpers_1.isEqualMount
+    });
+    var pageOneMonthsOfYear = helpers_1.getMonthsOfYear({
+        date: currentVisibleDate,
+        onChange: handleSelectDate,
+        value: value,
+        events: events,
+        minDate: minDate,
+        maxDate: maxDate,
+        locale: locale
+    });
+    var pageOneLabel = helpers_1.getYearTitle(currentVisibleDate);
+    var handleNext = function () { return setCurrentVisibleDate(date_fns_1.addYears(currentVisibleDate, 1)); };
+    var handlePrev = function () { return setCurrentVisibleDate(date_fns_1.addYears(currentVisibleDate, -1)); };
+    if (view === types_1.dateTimePropView[0]) {
+        return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+            react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, nextOnClick: handleNext, label: pageOneLabel, onLabelClick: on }),
+            react_1["default"].createElement(DateTimeYear_1.DateTimeYear, { years: pageOneMonthsOfYear })));
+    }
+    var pageTwoCurrentVisibleDate = date_fns_1.addYears(currentVisibleDate, 1);
+    var pageTwoLabel = helpers_1.getYearTitle(pageTwoCurrentVisibleDate);
+    var pageTwoMonthsOfYear = helpers_1.getMonthsOfYear({
+        date: pageTwoCurrentVisibleDate,
+        onChange: handleSelectDate,
+        value: value,
+        events: events,
+        minDate: minDate,
+        maxDate: maxDate,
+        locale: locale
+    });
+    if (view === types_1.dateTimePropView[1]) {
+        return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, label: pageOneLabel, onLabelClick: on }),
+                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneMonthsOfYear })),
+            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel, onLabelClick: on }),
+                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoMonthsOfYear }))));
+    }
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+        react_1["default"].createElement(DateTime10YearSlider_1.DateTime10YearSlider, { className: mixs_1.cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
+        react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('PageWrapper') },
+            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { className: mixs_1.cnDateTimeMixLayout('Label'), label: pageOneLabel, onClick: on, cursor: "pointer" }),
+                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneMonthsOfYear })),
+            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { className: mixs_1.cnDateTimeMixLayout('Label'), label: pageTwoLabel, onClick: on, cursor: "pointer" }),
+                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoMonthsOfYear })))));
+});

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTypeTime/DateTimeTypeTime.css

@@ -0,0 +1,37 @@
+/*
+задается из компонета
+--label-length
+*/
+
+.DateTimeTypeTime {
+  width: calc((var(--control-height-s) + (var(--space-3xs) * 2)) * 3);
+}
+
+.DateTimeTypeTime-Grid {
+    --date-time-item-width: var(--control-height-s);
+    --date-time-item-height: var(--control-height-s);
+    --date-time-cell-vertical-gap: var(--space-3xs);
+    --date-time-cell-horisontal-gap: var(--space-3xs);
+    --date-time-cell-width: calc(
+      var(--date-time-item-width) + (var(--date-time-cell-horisontal-gap) * 2)
+    );
+    --date-time-cell-height: calc(
+      var(--date-time-item-height) + (var(--date-time-cell-vertical-gap) * 2)
+    );
+    --date-time-grid-columns: 1;
+    --date-time-grid-row-gap: 0;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    height: calc(var(--date-time-cell-height) * 7);
+  }
+
+.DateTimeTypeTime-Label {
+    display: block;
+    height: var(--control-height-s);
+    margin-bottom: var(--space-s);
+    line-height: var(--control-height-s);
+  }

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTypeTime/DateTimeTypeTime.d.ts

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

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTypeTime/DateTimeTypeTime.js

@@ -0,0 +1,35 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTimeTypeTime = void 0;
+var tslib_1 = require("tslib");
+require("./DateTimeTypeTime.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var bem_1 = require("../../../utils/bem");
+var DateTimeLabel_1 = require("../DateTimeLabel/DateTimeLabel");
+var DateTimeTimeColumn_1 = require("../DateTimeTimeColumn/DateTimeTimeColumn");
+var helpers_1 = require("../helpers");
+var helpers_2 = require("./helpers");
+var cnDateTimeTypeTime = bem_1.cn('DateTimeTypeTime');
+exports.DateTimeTypeTime = react_1.forwardRef(function (props, ref) {
+    var _a;
+    var _b, _c, _d;
+    var localeProp = props.locale, value = props.value, className = props.className, onChange = props.onChange, maxDate = props.maxDate, minDate = props.minDate, _e = props.multiplicityHours, multiplicityHours = _e === void 0 ? 1 : _e, _f = props.multiplicityMinutes, multiplicityMinutes = _f === void 0 ? 1 : _f, _g = props.multiplicitySeconds, multiplicitySeconds = _g === void 0 ? 1 : _g, onMove = props.onMove, otherProps = tslib_1.__rest(props, ["locale", "value", "className", "onChange", "maxDate", "minDate", "multiplicityHours", "multiplicityMinutes", "multiplicitySeconds", "onMove"]);
+    react_1.useEffect(function () {
+        onMove === null || onMove === void 0 ? void 0 : onMove(helpers_1.moveTypes[3]);
+    }, []);
+    var locale = react_1.useMemo(function () { return (tslib_1.__assign(tslib_1.__assign({}, helpers_2.dateTimeTimePropLocaleDefault), localeProp === null || localeProp === void 0 ? void 0 : localeProp.words)); }, [
+        (_b = localeProp === null || localeProp === void 0 ? void 0 : localeProp.words) === null || _b === void 0 ? void 0 : _b.hours,
+        (_c = localeProp === null || localeProp === void 0 ? void 0 : localeProp.words) === null || _c === void 0 ? void 0 : _c.minutes,
+        (_d = localeProp === null || localeProp === void 0 ? void 0 : localeProp.words) === null || _d === void 0 ? void 0 : _d.seconds,
+    ]);
+    var time = helpers_2.useTimeItems(value, multiplicityHours, multiplicityMinutes, multiplicitySeconds, onChange, minDate, maxDate);
+    var _h = tslib_1.__read(time, 3), hours = _h[0], minutes = _h[1], seconds = _h[2];
+    var label = helpers_1.getTimeTitle(value, multiplicityHours, multiplicityMinutes, multiplicitySeconds);
+    var labelLenght = time.filter(function (item) { return item.length; }).length;
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: cnDateTimeTypeTime(null, [className]), ref: ref }),
+        react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { align: "center", className: cnDateTimeTypeTime('Label'), style: (_a = {}, _a['--label-length'] = labelLenght, _a), label: label }),
+        react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: cnDateTimeTypeTime('Grid') }),
+            react_1["default"].createElement(DateTimeTimeColumn_1.DateTimeTimeColumn, { label: locale.hours, items: hours }),
+            react_1["default"].createElement(DateTimeTimeColumn_1.DateTimeTimeColumn, { label: locale.minutes, items: minutes }),
+            react_1["default"].createElement(DateTimeTimeColumn_1.DateTimeTimeColumn, { label: locale.seconds, items: seconds }))));
+});

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTypeTime/helpers.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare const dateTimeTimePropLocaleDefault: {
+    readonly hours: "Час";
+    readonly minutes: "Мин";
+    readonly seconds: "Сек";
+};
+declare type DateTimeTimePropOnChange = (props: {
+    value: Date;
+    e: React.MouseEvent<HTMLButtonElement>;
+}) => void;
+declare type ResultItem = {
+    label: string;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    selected?: boolean;
+};
+export declare const useTimeItems: (value?: Date | undefined, multiplicityHours?: number | undefined, multiplicityMinutes?: number | undefined, multiplicitySeconds?: number | undefined, onChange?: DateTimeTimePropOnChange | undefined, minDate?: Date | undefined, maxDate?: Date | undefined) => ResultItem[][];
+export {};

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTypeTime/helpers.js

@@ -0,0 +1,50 @@
+"use strict";
+exports.__esModule = true;
+exports.useTimeItems = exports.dateTimeTimePropLocaleDefault = void 0;
+var react_1 = require("react");
+var date_fns_1 = require("date-fns");
+var useMutableRef_1 = require("../../../hooks/useMutableRef/useMutableRef");
+var array_1 = require("../../../utils/array");
+var date_1 = require("../../../utils/date");
+var helpers_1 = require("../helpers");
+exports.dateTimeTimePropLocaleDefault = {
+    hours: 'Час',
+    minutes: 'Мин',
+    seconds: 'Сек'
+};
+var getItemData = function (length, multiplicity, startOfUnits, startOfUnit, endOfUnit, addUnits, getItemLabel, value, minDate, maxDate, onChangeRef) {
+    if (multiplicity === void 0) { multiplicity = 1; }
+    var numbers = array_1.range(multiplicity ? Math.floor(length / multiplicity) : 0);
+    if (numbers.length === 0) {
+        return [];
+    }
+    var startDate = startOfUnits(value || date_fns_1.startOfToday());
+    return numbers.map(function (number) {
+        var date = addUnits(startDate, number * multiplicity);
+        var label = getItemLabel(date);
+        var selected = value ? getItemLabel(date) === getItemLabel(value) : false;
+        var disabled = !date_1.isInMinMaxDade(date, minDate, maxDate, startOfUnit, endOfUnit);
+        var onClick = function (e) { var _a; return !disabled && ((_a = onChangeRef === null || onChangeRef === void 0 ? void 0 : onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, { e: e, value: date })); };
+        return {
+            label: label,
+            selected: selected,
+            disabled: disabled,
+            onClick: onClick
+        };
+    });
+};
+exports.useTimeItems = function (value, multiplicityHours, multiplicityMinutes, multiplicitySeconds, onChange, minDate, maxDate) {
+    var onChangeRef = useMutableRef_1.useMutableRef(onChange);
+    return react_1.useMemo(function () { return [
+        getItemData(24, multiplicityHours, date_fns_1.startOfDay, date_fns_1.startOfHour, date_fns_1.endOfHour, date_fns_1.addHours, helpers_1.getLabelHours, value, minDate, maxDate, onChangeRef),
+        getItemData(60, multiplicityMinutes, date_fns_1.startOfHour, date_fns_1.startOfMinute, date_fns_1.endOfMinute, date_fns_1.addMinutes, helpers_1.getLabelMinutes, value, minDate, maxDate, onChangeRef),
+        getItemData(60, multiplicitySeconds, date_fns_1.startOfMinute, date_fns_1.startOfSecond, date_fns_1.endOfSecond, date_fns_1.addSeconds, helpers_1.getLabelSeconds, value, minDate, maxDate, onChangeRef),
+    ]; }, [
+        value === null || value === void 0 ? void 0 : value.getTime(),
+        minDate === null || minDate === void 0 ? void 0 : minDate.getTime(),
+        maxDate === null || maxDate === void 0 ? void 0 : maxDate.getTime(),
+        multiplicityHours,
+        multiplicityMinutes,
+        multiplicitySeconds,
+    ]);
+};

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTypeYear/DateTimeTypeYear.d.ts

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

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTypeYear/DateTimeTypeYear.js

@@ -0,0 +1,82 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTimeTypeYear = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var date_fns_1 = require("date-fns");
+var ru_1 = tslib_1.__importDefault(require("date-fns/locale/ru"));
+var DateTime10Years_1 = require("../DateTime10Years/DateTime10Years");
+var DateTime100YearSlider_1 = require("../DateTime100YearSlider/DateTime100YearSlider");
+var DateTimeLabel_1 = require("../DateTimeLabel/DateTimeLabel");
+var DateTimeToggler_1 = require("../DateTimeToggler/DateTimeToggler");
+var helpers_1 = require("../helpers");
+var types_1 = require("../helpers/types");
+var mixs_1 = require("../mixs");
+exports.DateTimeTypeYear = react_1.forwardRef(function (props, ref) {
+    var 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 ? ru_1["default"] : _a, className = props.className, _b = props.view, view = _b === void 0 ? types_1.dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = tslib_1.__rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate"]);
+    react_1.useEffect(function () {
+        onMove === null || onMove === void 0 ? void 0 : onMove(helpers_1.moveTypes[0]);
+    }, []);
+    var _c = tslib_1.__read(helpers_1.useCurrentVisibleDate({
+        currentVisibleDate: currentVisibleDateProp,
+        maxDate: maxDate,
+        minDate: minDate,
+        value: value,
+        startOfUnit: date_fns_1.startOfDecade,
+        onChangeCurrentVisibleDate: onChangeCurrentVisibleDate
+    }), 2), currentVisibleDate = _c[0], setCurrentVisibleDate = _c[1];
+    var handleSelectDate = helpers_1.getHandleSelectDate({
+        minDate: minDate,
+        maxDate: maxDate,
+        value: value,
+        onChange: onChange,
+        onChangeRange: onChangeRange,
+        isEqualUnit: helpers_1.isEqualYear
+    });
+    var pageOneYearsOfDecade = helpers_1.getYearsOfDecade({
+        date: currentVisibleDate,
+        onChange: handleSelectDate,
+        value: value,
+        events: events,
+        minDate: minDate,
+        maxDate: maxDate,
+        locale: locale
+    });
+    var pageOneLabel = helpers_1.getDecadeTitle(currentVisibleDate);
+    var handleNext = function () { return setCurrentVisibleDate(date_fns_1.addYears(currentVisibleDate, 10)); };
+    var handlePrev = function () { return setCurrentVisibleDate(date_fns_1.addYears(currentVisibleDate, -10)); };
+    if (view === types_1.dateTimePropView[0]) {
+        return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+            react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, nextOnClick: handleNext, label: pageOneLabel }),
+            react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade })));
+    }
+    var pageTwoCurrentVisibleDate = date_fns_1.addYears(currentVisibleDate, 10);
+    var pageTwoYearsOfDecade = helpers_1.getYearsOfDecade({
+        date: pageTwoCurrentVisibleDate,
+        onChange: handleSelectDate,
+        value: value,
+        events: events,
+        minDate: minDate,
+        maxDate: maxDate,
+        locale: locale
+    });
+    var pageTwoLabel = helpers_1.getDecadeTitle(pageTwoCurrentVisibleDate);
+    if (view === types_1.dateTimePropView[1]) {
+        return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, label: pageOneLabel }),
+                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade })),
+            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel }),
+                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoYearsOfDecade }))));
+    }
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+        react_1["default"].createElement(DateTime100YearSlider_1.DateTime100YearSlider, { className: mixs_1.cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
+        react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('PageWrapper') },
+            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { className: mixs_1.cnDateTimeMixLayout('Label'), label: pageOneLabel }),
+                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade })),
+            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { className: mixs_1.cnDateTimeMixLayout('Label'), label: pageTwoLabel }),
+                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoYearsOfDecade })))));
+});

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeYear/DateTimeYear.css

@@ -0,0 +1,14 @@
+.DateTimeYear {
+  --date-time-item-width: calc(var(--control-height-s) * 7 / var(--date-time-grid-columns));
+  --date-time-item-height: var(--control-height-s);
+  --date-time-cell-vertical-gap: var(--space-3xs);
+  --date-time-cell-horisontal-gap: calc(var(--space-3xs) * 7 / var(--date-time-grid-columns));
+  --date-time-cell-width: calc(
+    var(--date-time-item-width) + (var(--date-time-cell-horisontal-gap) * 2)
+  );
+  --date-time-cell-height: calc(
+    var(--date-time-item-height) + (var(--date-time-cell-vertical-gap) * 2)
+  );
+  --date-time-grid-columns: 4;
+  --date-time-grid-row-gap: calc(var(--control-height-s) * 5 / 3);
+}

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeYear/DateTimeYear.d.ts

@@ -0,0 +1,13 @@
+import './DateTimeYear.css';
+import React from 'react';
+import { PropsWithJsxAttributes } from '../../../utils/types/PropsWithJsxAttributes';
+import { DateTimeCellPropRange } from '../DateTimeCell/DateTimeCell';
+import { DateTimeItemProps } from '../DateTimeItem/DateTimeItem';
+export declare type DateTimeYearProps = PropsWithJsxAttributes<{
+    children?: never;
+    years: Omit<DateTimeItemProps & {
+        range?: DateTimeCellPropRange;
+    }, 'ref'>[];
+}, 'div'>;
+export declare const cnDateTimeYear: import("@bem-react/classname").ClassNameFormatter;
+export declare const DateTimeYear: React.FC<DateTimeYearProps>;

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeYear/DateTimeYear.js

@@ -0,0 +1,13 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTimeYear = exports.cnDateTimeYear = void 0;
+var tslib_1 = require("tslib");
+require("./DateTimeYear.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var bem_1 = require("../../../utils/bem");
+var DateTimeGrid_1 = require("../DateTimeGrid/DateTimeGrid");
+exports.cnDateTimeYear = bem_1.cn('DateTimeYear');
+exports.DateTimeYear = function (props) {
+    var className = props.className, years = props.years, otherProps = tslib_1.__rest(props, ["className", "years"]);
+    return (react_1["default"].createElement(DateTimeGrid_1.DateTimeGrid, tslib_1.__assign({}, otherProps, { className: exports.cnDateTimeYear(null, [className]), items: years })));
+};