@consta/uikit 3.5.0 → 3.6.0

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

@@ -0,0 +1,90 @@
+import { __assign, __read, __rest } from "tslib";
+import React, { forwardRef, useEffect } from 'react';
+import { addYears, startOfYear } from 'date-fns';
+import ruLocale from 'date-fns/locale/ru';
+import { useFlag } from '../../../hooks/useFlag/useFlag';
+import { DateTime10Years } from '../DateTime10Years/DateTime10Years';
+import { DateTime10YearSlider } from '../DateTime10YearSlider/DateTime10YearSlider';
+import { DateTimeLabel } from '../DateTimeLabel/DateTimeLabel';
+import { DateTimeToggler } from '../DateTimeToggler/DateTimeToggler';
+import { DateTimeTypeYear } from '../DateTimeTypeYear/DateTimeTypeYear';
+import { DateTimeYear } from '../DateTimeYear/DateTimeYear';
+import { getHandleSelectDate, getMonthsOfYear, getYearTitle, isEqualMount, moveTypes, useCurrentVisibleDate, } from '../helpers';
+import { dateTimePropView, dateTimePropViewDefault } from '../helpers/types';
+import { cnDateTimeMixLayout } from '../mixs';
+export var DateTimeTypeMonth = 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 ? ruLocale : _a, className = props.className, _b = props.view, view = _b === void 0 ? dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = __rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate"]);
+    var _c = __read(useFlag(), 2), changeYear = _c[0], _d = _c[1], on = _d.on, off = _d.off;
+    useEffect(function () {
+        !changeYear && (onMove === null || onMove === void 0 ? void 0 : onMove(moveTypes[1]));
+    }, [changeYear]);
+    var _e = __read(useCurrentVisibleDate({
+        currentVisibleDate: currentVisibleDateProp,
+        maxDate: maxDate,
+        minDate: minDate,
+        value: value,
+        startOfUnit: startOfYear,
+        onChangeCurrentVisibleDate: onChangeCurrentVisibleDate
+    }), 2), currentVisibleDate = _e[0], setCurrentVisibleDate = _e[1];
+    if (changeYear) {
+        return (React.createElement(DateTimeTypeYear, __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 = getHandleSelectDate({
+        minDate: minDate,
+        maxDate: maxDate,
+        value: value,
+        onChange: onChange,
+        onChangeRange: onChangeRange,
+        isEqualUnit: isEqualMount
+    });
+    var pageOneMonthsOfYear = getMonthsOfYear({
+        date: currentVisibleDate,
+        onChange: handleSelectDate,
+        value: value,
+        events: events,
+        minDate: minDate,
+        maxDate: maxDate,
+        locale: locale
+    });
+    var pageOneLabel = getYearTitle(currentVisibleDate);
+    var handleNext = function () { return setCurrentVisibleDate(addYears(currentVisibleDate, 1)); };
+    var handlePrev = function () { return setCurrentVisibleDate(addYears(currentVisibleDate, -1)); };
+    if (view === dateTimePropView[0]) {
+        return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+            React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, nextOnClick: handleNext, label: pageOneLabel, onLabelClick: on }),
+            React.createElement(DateTimeYear, { years: pageOneMonthsOfYear })));
+    }
+    var pageTwoCurrentVisibleDate = addYears(currentVisibleDate, 1);
+    var pageTwoLabel = getYearTitle(pageTwoCurrentVisibleDate);
+    var pageTwoMonthsOfYear = getMonthsOfYear({
+        date: pageTwoCurrentVisibleDate,
+        onChange: handleSelectDate,
+        value: value,
+        events: events,
+        minDate: minDate,
+        maxDate: maxDate,
+        locale: locale
+    });
+    if (view === dateTimePropView[1]) {
+        return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+            React.createElement("div", { className: cnDateTimeMixLayout('Page') },
+                React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, label: pageOneLabel, onLabelClick: on }),
+                React.createElement(DateTime10Years, { years: pageOneMonthsOfYear })),
+            React.createElement("div", { className: cnDateTimeMixLayout('Page') },
+                React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel, onLabelClick: on }),
+                React.createElement(DateTime10Years, { years: pageTwoMonthsOfYear }))));
+    }
+    return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+        React.createElement(DateTime10YearSlider, { 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(DateTime10Years, { years: pageOneMonthsOfYear })),
+            React.createElement("div", { className: cnDateTimeMixLayout('Page') },
+                React.createElement(DateTimeLabel, { className: cnDateTimeMixLayout('Label'), label: pageTwoLabel, onClick: on, cursor: "pointer" }),
+                React.createElement(DateTime10Years, { years: pageTwoMonthsOfYear })))));
+});

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

@@ -0,0 +1,32 @@
+import { __assign, __read, __rest } from "tslib";
+import './DateTimeTypeTime.css';
+import React, { forwardRef, useEffect, useMemo } from 'react';
+import { cn } from '../../../utils/bem';
+import { DateTimeLabel } from '../DateTimeLabel/DateTimeLabel';
+import { DateTimeTimeColumn } from '../DateTimeTimeColumn/DateTimeTimeColumn';
+import { getTimeTitle, moveTypes } from '../helpers';
+import { dateTimeTimePropLocaleDefault, useTimeItems } from './helpers';
+var cnDateTimeTypeTime = cn('DateTimeTypeTime');
+export var DateTimeTypeTime = 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 = __rest(props, ["locale", "value", "className", "onChange", "maxDate", "minDate", "multiplicityHours", "multiplicityMinutes", "multiplicitySeconds", "onMove"]);
+    useEffect(function () {
+        onMove === null || onMove === void 0 ? void 0 : onMove(moveTypes[3]);
+    }, []);
+    var locale = useMemo(function () { return (__assign(__assign({}, 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 = useTimeItems(value, multiplicityHours, multiplicityMinutes, multiplicitySeconds, onChange, minDate, maxDate);
+    var _h = __read(time, 3), hours = _h[0], minutes = _h[1], seconds = _h[2];
+    var label = getTimeTitle(value, multiplicityHours, multiplicityMinutes, multiplicitySeconds);
+    var labelLenght = time.filter(function (item) { return item.length; }).length;
+    return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeTypeTime(null, [className]), ref: ref }),
+        React.createElement(DateTimeLabel, { align: "center", className: cnDateTimeTypeTime('Label'), style: (_a = {}, _a['--label-length'] = labelLenght, _a), label: label }),
+        React.createElement("div", __assign({}, otherProps, { className: cnDateTimeTypeTime('Grid') }),
+            React.createElement(DateTimeTimeColumn, { label: locale.hours, items: hours }),
+            React.createElement(DateTimeTimeColumn, { label: locale.minutes, items: minutes }),
+            React.createElement(DateTimeTimeColumn, { label: locale.seconds, items: seconds }))));
+});

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

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+import { addHours, addMinutes, addSeconds, endOfHour, endOfMinute, endOfSecond, startOfDay, startOfHour, startOfMinute, startOfSecond, startOfToday, } from 'date-fns';
+import { useMutableRef } from '../../../hooks/useMutableRef/useMutableRef';
+import { range } from '../../../utils/array';
+import { isInMinMaxDade } from '../../../utils/date';
+import { getLabelHours, getLabelMinutes, getLabelSeconds } from '../helpers';
+export var 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 = range(multiplicity ? Math.floor(length / multiplicity) : 0);
+    if (numbers.length === 0) {
+        return [];
+    }
+    var startDate = startOfUnits(value || 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 = !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
+        };
+    });
+};
+export var useTimeItems = function (value, multiplicityHours, multiplicityMinutes, multiplicitySeconds, onChange, minDate, maxDate) {
+    var onChangeRef = useMutableRef(onChange);
+    return useMemo(function () { return [
+        getItemData(24, multiplicityHours, startOfDay, startOfHour, endOfHour, addHours, getLabelHours, value, minDate, maxDate, onChangeRef),
+        getItemData(60, multiplicityMinutes, startOfHour, startOfMinute, endOfMinute, addMinutes, getLabelMinutes, value, minDate, maxDate, onChangeRef),
+        getItemData(60, multiplicitySeconds, startOfMinute, startOfSecond, endOfSecond, addSeconds, 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__/src/components/DateTimeCanary/DateTimeTypeYear/DateTimeTypeYear.d.ts

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

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

@@ -0,0 +1,79 @@
+import { __assign, __read, __rest } from "tslib";
+import React, { forwardRef, useEffect } from 'react';
+import { addYears, startOfDecade } from 'date-fns';
+import ruLocale from 'date-fns/locale/ru';
+import { DateTime10Years } from '../DateTime10Years/DateTime10Years';
+import { DateTime100YearSlider } from '../DateTime100YearSlider/DateTime100YearSlider';
+import { DateTimeLabel } from '../DateTimeLabel/DateTimeLabel';
+import { DateTimeToggler } from '../DateTimeToggler/DateTimeToggler';
+import { getDecadeTitle, getHandleSelectDate, getYearsOfDecade, isEqualYear, moveTypes, useCurrentVisibleDate, } from '../helpers';
+import { dateTimePropView, dateTimePropViewDefault } from '../helpers/types';
+import { cnDateTimeMixLayout } from '../mixs';
+export var DateTimeTypeYear = 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 ? ruLocale : _a, className = props.className, _b = props.view, view = _b === void 0 ? dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = __rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate"]);
+    useEffect(function () {
+        onMove === null || onMove === void 0 ? void 0 : onMove(moveTypes[0]);
+    }, []);
+    var _c = __read(useCurrentVisibleDate({
+        currentVisibleDate: currentVisibleDateProp,
+        maxDate: maxDate,
+        minDate: minDate,
+        value: value,
+        startOfUnit: startOfDecade,
+        onChangeCurrentVisibleDate: onChangeCurrentVisibleDate
+    }), 2), currentVisibleDate = _c[0], setCurrentVisibleDate = _c[1];
+    var handleSelectDate = getHandleSelectDate({
+        minDate: minDate,
+        maxDate: maxDate,
+        value: value,
+        onChange: onChange,
+        onChangeRange: onChangeRange,
+        isEqualUnit: isEqualYear
+    });
+    var pageOneYearsOfDecade = getYearsOfDecade({
+        date: currentVisibleDate,
+        onChange: handleSelectDate,
+        value: value,
+        events: events,
+        minDate: minDate,
+        maxDate: maxDate,
+        locale: locale
+    });
+    var pageOneLabel = getDecadeTitle(currentVisibleDate);
+    var handleNext = function () { return setCurrentVisibleDate(addYears(currentVisibleDate, 10)); };
+    var handlePrev = function () { return setCurrentVisibleDate(addYears(currentVisibleDate, -10)); };
+    if (view === dateTimePropView[0]) {
+        return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+            React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, nextOnClick: handleNext, label: pageOneLabel }),
+            React.createElement(DateTime10Years, { years: pageOneYearsOfDecade })));
+    }
+    var pageTwoCurrentVisibleDate = addYears(currentVisibleDate, 10);
+    var pageTwoYearsOfDecade = getYearsOfDecade({
+        date: pageTwoCurrentVisibleDate,
+        onChange: handleSelectDate,
+        value: value,
+        events: events,
+        minDate: minDate,
+        maxDate: maxDate,
+        locale: locale
+    });
+    var pageTwoLabel = getDecadeTitle(pageTwoCurrentVisibleDate);
+    if (view === dateTimePropView[1]) {
+        return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+            React.createElement("div", { className: cnDateTimeMixLayout('Page') },
+                React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, label: pageOneLabel }),
+                React.createElement(DateTime10Years, { years: pageOneYearsOfDecade })),
+            React.createElement("div", { className: cnDateTimeMixLayout('Page') },
+                React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel }),
+                React.createElement(DateTime10Years, { years: pageTwoYearsOfDecade }))));
+    }
+    return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+        React.createElement(DateTime100YearSlider, { 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 }),
+                React.createElement(DateTime10Years, { years: pageOneYearsOfDecade })),
+            React.createElement("div", { className: cnDateTimeMixLayout('Page') },
+                React.createElement(DateTimeLabel, { className: cnDateTimeMixLayout('Label'), label: pageTwoLabel }),
+                React.createElement(DateTime10Years, { years: pageTwoYearsOfDecade })))));
+});

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

@@ -0,0 +1,10 @@
+import { __assign, __rest } from "tslib";
+import './DateTimeYear.css';
+import React from 'react';
+import { cn } from '../../../utils/bem';
+import { DateTimeGrid } from '../DateTimeGrid/DateTimeGrid';
+export var cnDateTimeYear = cn('DateTimeYear');
+export var DateTimeYear = function (props) {
+    var className = props.className, years = props.years, otherProps = __rest(props, ["className", "years"]);
+    return (React.createElement(DateTimeGrid, __assign({}, otherProps, { className: cnDateTimeYear(null, [className]), items: years })));
+};

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

@@ -0,0 +1,5 @@
+.DateTimeYearSlider {
+  --date-time-cell-width: calc(var(--control-height-s) + (var(--space-3xs) * 2));
+  --item-width: calc((var(--date-time-cell-width) * 14 - var(--control-height-m) * 2) / 13);
+  --parent-width: calc(var(--item-width) * 12);
+}

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

@@ -0,0 +1,14 @@
+import './DateTimeYearSlider.css';
+import React from 'react';
+import { Locale } from 'date-fns';
+import { DateRange } from '../../../utils/types/Date';
+import { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';
+export declare type DateTimeYearSliderProps = PropsWithHTMLAttributes<{
+    currentVisibleDate: Date;
+    onChange: (date: Date) => void;
+    children?: never;
+    value?: Date | DateRange;
+    locale?: Locale;
+}, HTMLDivElement>;
+export declare const cnDateTimeYearSlider: import("@bem-react/classname").ClassNameFormatter;
+export declare const DateTimeYearSlider: React.FC<DateTimeYearSliderProps>;

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

@@ -0,0 +1,49 @@
+import { __assign, __rest } from "tslib";
+import './DateTimeYearSlider.css';
+import React from 'react';
+import { addMonths, addYears, endOfYear, format, getMonth, getYear, startOfYear, } from 'date-fns';
+import ruLocale from 'date-fns/locale/ru';
+import { range } from '../../../utils/array';
+import { cn } from '../../../utils/bem';
+import { DateTimeSlider } from '../DateTimeSlider/DateTimeSlider';
+import { getMonthTitleAbbreviated } from '../helpers';
+import { getSliderValueRange } from '../helpers/getSliderValueRange';
+export var cnDateTimeYearSlider = cn('DateTimeYearSlider');
+var isCurrentVisibleYear = function (currentDate, month) {
+    return getYear(currentDate) === getYear(month);
+};
+var isCurrentVisibleMonth = function (currentDate, month) {
+    return isCurrentVisibleYear(currentDate, month) && getMonth(currentDate) === getMonth(month);
+};
+var getYearItems = function (currentVisibleDate, date, locale) {
+    return range(12).map(function (month) {
+        var monthDate = addMonths(date, month);
+        return {
+            date: monthDate,
+            label: getMonthTitleAbbreviated(monthDate, locale),
+            current: isCurrentVisibleMonth(currentVisibleDate, monthDate)
+        };
+    });
+};
+var getSliderData = function (currentVisibleDate, value, locale) {
+    var currentYear = startOfYear(currentVisibleDate);
+    return [
+        addYears(currentYear, -1),
+        currentYear,
+        addYears(currentYear, 1),
+        addYears(currentYear, 2),
+    ].map(function (date) { return ({
+        label: format(date, 'yyyy', { locale: locale }),
+        date: date,
+        items: getYearItems(currentVisibleDate, date, locale),
+        current: isCurrentVisibleYear(currentVisibleDate, date),
+        valueRange: getSliderValueRange(date, value, startOfYear, endOfYear)
+    }); });
+};
+export var DateTimeYearSlider = function (props) {
+    var currentVisibleDate = props.currentVisibleDate, className = props.className, onChange = props.onChange, value = props.value, _a = props.locale, locale = _a === void 0 ? ruLocale : _a, otherProps = __rest(props, ["currentVisibleDate", "className", "onChange", "value", "locale"]);
+    var handlePrev = function () { return onChange(addYears(currentVisibleDate, -1)); };
+    var handleNext = function () { return onChange(addYears(currentVisibleDate, 1)); };
+    var data = getSliderData(currentVisibleDate, value, locale);
+    return (React.createElement(DateTimeSlider, __assign({ className: cnDateTimeYearSlider(null, [className]), onNext: handleNext, onPrev: handlePrev, data: data, onChange: onChange }, otherProps)));
+};

package/__internal__/src/components/DateTimeCanary/helpers/getDaysOfMonth.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Locale } from 'date-fns';
+import { range } from '../../../utils/array';
+import { DateRange } from '../../../utils/types/Date';
+import { DateTimeCellPropRange } from '../DateTimeCell/DateTimeCell';
+import { HandleSelectDate } from './types';
+export declare const getDaysOfMonth: (props: {
+    date: Date;
+    locale: Locale;
+    handleDayClick?: HandleSelectDate | undefined;
+    value?: Date | DateRange | undefined;
+    events?: Date[] | undefined;
+    minDate?: Date | undefined;
+    maxDate?: Date | undefined;
+}) => {
+    disabled?: boolean;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    label: string;
+    selected?: boolean;
+    range?: DateTimeCellPropRange;
+    event?: boolean;
+    current?: boolean;
+}[];

package/__internal__/src/components/DateTimeCanary/helpers/getDaysOfMonth.js

@@ -0,0 +1,49 @@
+import { addDays, addWeeks, differenceInDays, endOfDay, endOfWeek, format, startOfDay, startOfMonth, startOfWeek, } from 'date-fns';
+import { range } from '../../../utils/array';
+import { isInMinMaxDade } from '../../../utils/date';
+import { isDateInRange } from './isDateInRange';
+import { isEqualDay } from './isEqualDay';
+var isSelected = function (_a) {
+    var date = _a.date, value = _a.value;
+    if (!value) {
+        return false;
+    }
+    if (Array.isArray(value)) {
+        return !!value.find(function (item) { return (item ? isEqualDay(date, item) : false); });
+    }
+    return isEqualDay(date, value);
+};
+var hasEvent = function (date, events) {
+    return !!events.find(function (eventDate) { return isEqualDay(eventDate, date); });
+};
+var isToday = function (date) { return isEqualDay(new Date(), date); };
+export var getDaysOfMonth = function (props) {
+    var date = props.date, locale = props.locale, handleDayClick = props.handleDayClick, value = props.value, events = props.events, minDate = props.minDate, maxDate = props.maxDate;
+    var currentMonth = date.getMonth();
+    var startDate = startOfWeek(startOfMonth(date), { locale: locale });
+    var endDate = endOfWeek(addWeeks(startDate, 5), { locale: locale });
+    var diffDays = differenceInDays(endDate, startDate) + 1;
+    return range(diffDays).map(function (index) {
+        var date = addDays(startDate, index);
+        var label = format(date, 'd');
+        var disabled = !isInMinMaxDade(date, minDate, maxDate, startOfDay, endOfDay);
+        var onClick = !disabled && handleDayClick
+            ? function (e) { return handleDayClick({ e: e, value: date }); }
+            : undefined;
+        if (date.getMonth() === currentMonth) {
+            return {
+                label: label,
+                onClick: onClick,
+                selected: isSelected({ date: date, value: value }),
+                range: Array.isArray(value) && isDateInRange(date, value),
+                event: events && hasEvent(date, events),
+                current: isToday(date),
+                disabled: disabled
+            };
+        }
+        return {
+            label: label,
+            disabled: true
+        };
+    });
+};

package/__internal__/src/components/DateTimeCanary/helpers/getHandleSelectDate.d.ts

@@ -0,0 +1,11 @@
+import { DateTimePropOnChange, DateTimePropOnChangeRange, DateTimePropValue, HandleSelectDate, СapableRangeType } from './types';
+declare type GetHandleSelectDateProps = {
+    isEqualUnit: (date1: Date, date2: Date) => boolean;
+    value?: DateTimePropValue<СapableRangeType>;
+    onChange?: DateTimePropOnChange;
+    onChangeRange?: DateTimePropOnChangeRange<СapableRangeType>;
+    minDate?: Date;
+    maxDate?: Date;
+};
+export declare function getHandleSelectDate(props: GetHandleSelectDateProps): HandleSelectDate;
+export {};

package/__internal__/src/components/DateTimeCanary/helpers/getHandleSelectDate.js

@@ -0,0 +1,44 @@
+import { __read } from "tslib";
+import { isDefined } from '../../../utils/type-guards';
+export function getHandleSelectDate(props) {
+    return function (callbackProps) {
+        if (typeof props.onChange === 'function') {
+            props.onChange(callbackProps);
+        }
+        if (typeof props.onChangeRange === 'function') {
+            var currentValue = (Array.isArray(props.value)
+                ? props.value
+                : [props.value, undefined]) || [undefined, undefined];
+            var _a = __read(currentValue, 2), startDate = _a[0], endDate = _a[1];
+            if (isDefined(startDate) && props.isEqualUnit(startDate, callbackProps.value)) {
+                return props.onChangeRange({
+                    e: callbackProps.e,
+                    value: [endDate, undefined]
+                });
+            }
+            if (isDefined(endDate) && props.isEqualUnit(endDate, callbackProps.value)) {
+                return props.onChangeRange({
+                    e: callbackProps.e,
+                    value: [startDate, undefined]
+                });
+            }
+            if (isDefined(startDate)) {
+                return props.onChangeRange({
+                    e: callbackProps.e,
+                    value: startDate > callbackProps.value
+                        ? [callbackProps.value, startDate]
+                        : [startDate, callbackProps.value]
+                });
+            }
+            if (isDefined(endDate)) {
+                return props.onChangeRange({
+                    e: callbackProps.e,
+                    value: endDate > callbackProps.value
+                        ? [callbackProps.value, endDate]
+                        : [endDate, callbackProps.value]
+                });
+            }
+            props.onChangeRange({ e: callbackProps.e, value: [callbackProps.value, undefined] });
+        }
+    };
+}

package/__internal__/src/components/DateTimeCanary/helpers/getMonthsOfYear.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Locale } from 'date-fns';
+import { range } from '../../../utils/array';
+import { DateRange } from '../../../utils/types/Date';
+import { DateTimeCellPropRange } from '../DateTimeCell/DateTimeCell';
+import { HandleSelectDate } from './types';
+export declare const getMonthsOfYear: (props: {
+    date: Date;
+    locale: Locale;
+    onChange?: HandleSelectDate | undefined;
+    value?: Date | DateRange | undefined;
+    events?: Date[] | undefined;
+    minDate?: Date | undefined;
+    maxDate?: Date | undefined;
+}) => {
+    disabled?: boolean;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    label: string;
+    selected?: boolean;
+    range?: DateTimeCellPropRange;
+    event?: boolean;
+    current?: boolean;
+}[];

package/__internal__/src/components/DateTimeCanary/helpers/getMonthsOfYear.js

@@ -0,0 +1,48 @@
+import { addMonths, endOfMonth, getYear, startOfMonth, startOfYear } from 'date-fns';
+import { range } from '../../../utils/array';
+import { isInMinMaxDade } from '../../../utils/date';
+import { getMonthTitleAbbreviated } from './index';
+import { isDateInRange } from './isDateInRange';
+import { isEqualMount } from './isEqualMount';
+var isSelected = function (_a) {
+    var date = _a.date, value = _a.value;
+    if (!value) {
+        return false;
+    }
+    if (Array.isArray(value)) {
+        return !!value.find(function (item) { return (item ? isEqualMount(date, item) : false); });
+    }
+    return isEqualMount(date, value);
+};
+var hasEvent = function (date, events) {
+    return !!events.find(function (eventDate) { return isEqualMount(eventDate, date); });
+};
+var isCurrent = function (date) { return isEqualMount(new Date(), date); };
+export var getMonthsOfYear = function (props) {
+    var date = props.date, onChange = props.onChange, value = props.value, events = props.events, minDate = props.minDate, maxDate = props.maxDate, locale = props.locale;
+    var currentYear = getYear(date);
+    var startDate = startOfYear(date);
+    return range(12).map(function (index) {
+        var date = addMonths(startDate, index);
+        var label = getMonthTitleAbbreviated(date, locale);
+        var disabled = !isInMinMaxDade(date, minDate, maxDate, startOfMonth, endOfMonth);
+        var onClick = !disabled && onChange
+            ? function (e) { return onChange({ e: e, value: date }); }
+            : undefined;
+        if (getYear(date) === currentYear) {
+            return {
+                label: label,
+                onClick: onClick,
+                selected: isSelected({ date: date, value: value }),
+                range: Array.isArray(value) && isDateInRange(date, value),
+                event: events && hasEvent(date, events),
+                current: isCurrent(date),
+                disabled: disabled
+            };
+        }
+        return {
+            label: label,
+            disabled: true
+        };
+    });
+};

package/__internal__/src/components/DateTimeCanary/helpers/getSliderValueRange.d.ts

@@ -0,0 +1,4 @@
+import { DateRange } from '../../../utils/types/Date';
+declare type StartEndOfPeriod = (date: Date) => Date;
+export declare const getSliderValueRange: (decadeDate: Date, value: Date | DateRange | undefined, startOfPeriod: StartEndOfPeriod, endOfPeriod: StartEndOfPeriod) => number[] | undefined;
+export {};