@consta/uikit 3.4.0 → 3.8.0

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

@@ -0,0 +1,126 @@
+"use strict";
+exports.__esModule = true;
+exports.DatePickerTypeDateRange = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var addMonths_1 = tslib_1.__importDefault(require("date-fns/addMonths"));
+var startOfMonth_1 = tslib_1.__importDefault(require("date-fns/startOfMonth"));
+var useClickOutside_1 = require("../../../hooks/useClickOutside/useClickOutside");
+var useForkRef_1 = require("../../../hooks/useForkRef/useForkRef");
+var DatePickerDropdown_1 = require("../DatePickerDropdown/DatePickerDropdown");
+var DatePickerFieldTypeDateRange_1 = require("../DatePickerFieldTypeDateRange/DatePickerFieldTypeDateRange");
+var helpers_1 = require("../helpers");
+exports.DatePickerTypeDateRange = react_1.forwardRef(function (props, ref) {
+    var _a, _b, _c, _d;
+    var events = props.events, dateTimeView = props.dateTimeView, locale = props.locale, dropdownForm = props.dropdownForm, startFieldRightSide = props.startFieldRightSide, startFieldLeftSide = props.startFieldLeftSide, startFieldOnBlur = props.startFieldOnBlur, startFieldOnFocus = props.startFieldOnFocus, endFieldRightSide = props.endFieldRightSide, endFieldLeftSide = props.endFieldLeftSide, endFieldOnBlur = props.endFieldOnBlur, endFieldOnFocus = props.endFieldOnFocus, onFocus = props.onFocus, onBlur = props.onBlur, leftSide = props.leftSide, rightSide = props.rightSide, endFieldInputRefProp = props.endFieldInputRef, startFieldInputRefProp = props.startFieldInputRef, fieldProps = tslib_1.__rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "startFieldRightSide", "startFieldLeftSide", "startFieldOnBlur", "startFieldOnFocus", "endFieldRightSide", "endFieldLeftSide", "endFieldOnBlur", "endFieldOnFocus", "onFocus", "onBlur", "leftSide", "rightSide", "endFieldInputRef", "startFieldInputRef"]);
+    var startFieldRef = react_1.useRef(null);
+    var endFieldRef = react_1.useRef(null);
+    var startFieldInputRef = react_1.useRef(null);
+    var endFieldInputRef = react_1.useRef(null);
+    var calendarRef = react_1.useRef(null);
+    var _e = tslib_1.__read(react_1.useState(false), 2), fieldFocused = _e[0], setFieldFocused = _e[1];
+    var startFocused = fieldFocused === 'start';
+    var endFocused = fieldFocused === 'end';
+    var hadleChange = function (_a) {
+        var _b, _c, _d, _e, _f, _g;
+        var e = _a.e, value = _a.value;
+        if (startFocused) {
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, { e: e, value: helpers_1.normalizeRangeValue([value, (_c = props === null || props === void 0 ? void 0 : props.value) === null || _c === void 0 ? void 0 : _c[1]]) });
+            (_d = endFieldInputRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+        }
+        if (endFocused) {
+            (_e = props.onChange) === null || _e === void 0 ? void 0 : _e.call(props, { e: e, value: helpers_1.normalizeRangeValue([(_f = props === null || props === void 0 ? void 0 : props.value) === null || _f === void 0 ? void 0 : _f[0], value]) });
+            (_g = startFieldInputRef.current) === null || _g === void 0 ? void 0 : _g.focus();
+        }
+    };
+    var _f = tslib_1.__read(react_1.useState(false), 2), calendarVisible = _f[0], setCalendarVisible = _f[1];
+    var _g = tslib_1.__read(react_1.useState(), 2), currentVisibleDate = _g[0], setCurrentVisibleDate = _g[1];
+    var commonProps = {
+        value: props.value || undefined,
+        view: dateTimeView,
+        events: events,
+        locale: locale,
+        minDate: props.minDate,
+        maxDate: props.maxDate,
+        form: dropdownForm,
+        onChange: hadleChange
+    };
+    var startFieldOnBlurHandler = function (e) {
+        onBlur && onBlur(e);
+        startFieldOnBlur && startFieldOnBlur(e);
+    };
+    var endFieldOnBlurHandler = function (e) {
+        onBlur && onBlur(e);
+        endFieldOnBlur && endFieldOnBlur(e);
+    };
+    var startFieldOnFocusHandler = function (e) {
+        setFieldFocused('start');
+        setCalendarVisible(true);
+        onFocus && onFocus(e);
+        startFieldOnFocus && startFieldOnFocus(e);
+    };
+    var endFieldOnFocusHandler = function (e) {
+        setFieldFocused('end');
+        setCalendarVisible(true);
+        onFocus && onFocus(e);
+        endFieldOnFocus && endFieldOnFocus(e);
+    };
+    // эфект для того чтобы календарь переключался при вводе с клавиатуры
+    react_1.useEffect(function () {
+        var _a, _b;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) &&
+            props.dateTimeView === 'classic' &&
+            currentVisibleDate &&
+            startFocused) {
+            var newVisibleDate = startOfMonth_1["default"](props.value[0]);
+            if (newVisibleDate.getTime() !== currentVisibleDate.getTime()) {
+                setCurrentVisibleDate(newVisibleDate);
+            }
+            return;
+        }
+        if (((_b = props.value) === null || _b === void 0 ? void 0 : _b[0]) &&
+            props.dateTimeView !== 'classic' &&
+            currentVisibleDate &&
+            startFocused) {
+            var newVisibleDate = startOfMonth_1["default"](props.value[0]);
+            if (newVisibleDate.getTime() !== currentVisibleDate.getTime() &&
+                newVisibleDate.getTime() !== addMonths_1["default"](currentVisibleDate, 1).getTime()) {
+                setCurrentVisibleDate(newVisibleDate);
+            }
+        }
+    }, [(_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getTime(), calendarVisible]);
+    react_1.useEffect(function () {
+        var _a, _b;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[1]) &&
+            props.dateTimeView === 'classic' &&
+            currentVisibleDate &&
+            endFocused) {
+            var newVisibleDate = startOfMonth_1["default"](props.value[1]);
+            if (newVisibleDate.getTime() !== currentVisibleDate.getTime()) {
+                setCurrentVisibleDate(newVisibleDate);
+            }
+            return;
+        }
+        if (((_b = props.value) === null || _b === void 0 ? void 0 : _b[1]) &&
+            props.dateTimeView !== 'classic' &&
+            currentVisibleDate &&
+            endFocused) {
+            var newVisibleDate = startOfMonth_1["default"](props.value[1]);
+            if (newVisibleDate.getTime() !== currentVisibleDate.getTime() &&
+                newVisibleDate.getTime() !== addMonths_1["default"](currentVisibleDate, 1).getTime()) {
+                setCurrentVisibleDate(addMonths_1["default"](newVisibleDate, -1));
+            }
+        }
+    }, [(_d = (_c = props.value) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.getTime(), calendarVisible]);
+    useClickOutside_1.useClickOutside({
+        isActive: calendarVisible,
+        ignoreClicksInsideRefs: [startFieldRef, endFieldRef, calendarRef],
+        handler: function () {
+            setFieldFocused(false);
+            setCalendarVisible(false);
+        }
+    });
+    return (react_1["default"].createElement(react_1["default"].Fragment, null,
+        react_1["default"].createElement(DatePickerFieldTypeDateRange_1.DatePickerFieldTypeDateRange, tslib_1.__assign({}, fieldProps, { ref: ref, startFieldRef: startFieldRef, endFieldRef: endFieldRef, startFieldInputRef: useForkRef_1.useForkRef([startFieldInputRef, startFieldInputRefProp]), endFieldInputRef: useForkRef_1.useForkRef([endFieldInputRef, endFieldInputRefProp]), startFieldOnFocus: startFieldOnFocusHandler, endFieldOnFocus: endFieldOnFocusHandler, startFieldRightSide: startFieldRightSide, startFieldLeftSide: startFieldLeftSide || leftSide, endFieldRightSide: endFieldRightSide || rightSide, endFieldLeftSide: endFieldLeftSide, startFieldOnBlur: startFieldOnBlurHandler, endFieldOnBlur: endFieldOnBlurHandler, startFocused: startFocused, endFocused: endFocused })),
+        react_1["default"].createElement(DatePickerDropdown_1.DatePickerDropdown, tslib_1.__assign({}, commonProps, { ref: calendarRef, anchorRef: startFieldRef, isOpen: calendarVisible, onChangeCurrentVisibleDate: function (date) { return setCurrentVisibleDate(date); }, currentVisibleDate: currentVisibleDate }))));
+});

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

@@ -0,0 +1,185 @@
+/// <reference types="react" />
+import { Locale } from 'date-fns';
+import { IconProps, IconPropSize } from '../../icons/Icon/Icon';
+import { DateRange } from '../../utils/types/Date';
+import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
+import { DateTimePropView } from '../DateTimeCanary/helpers';
+import { TextFieldPropForm, TextFieldPropSize, TextFieldPropStatus, TextFieldPropView, TextFieldPropWidth } from '../TextField/TextField';
+export declare const datePickerPropType: readonly ["date", "date-range"];
+export declare type DatePickerPropType = typeof datePickerPropType[number];
+export declare const datePickerPropTypeDefault: "date";
+export declare type DatePickerPropDateTimeView = DateTimePropView;
+export declare const datePickerErrorTypes: readonly ["outOfRange", "invalidInputAttempt", "startDateIsGreaterThanEndDate"];
+export declare type DatePickerPropValue<TYPE extends DatePickerPropType> = (TYPE extends 'date' ? Date : DateRange) | null;
+export declare type DatePickerPropOnChange<TYPE extends DatePickerPropType> = (props: {
+    value: DatePickerPropValue<TYPE>;
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent> | Event;
+}) => void;
+export declare const datePickerPropDropdownForm: readonly ["default", "brick", "round"];
+export declare type DatePickerPropDropdownForm = typeof datePickerPropDropdownForm[number];
+export declare const datePickerPropDropdownFormDefault: "default";
+declare type DatePickerPropCalendarWidth<TYPE> = TYPE extends 'date' ? TextFieldPropWidth : never;
+declare type DatePickerPropCalendarInputRef<TYPE> = TYPE extends 'date' ? React.Ref<HTMLInputElement> : never;
+declare type DatePickerPropCalendarStartInputRef<TYPE> = TYPE extends 'date-range' ? React.Ref<HTMLInputElement> : never;
+declare type DatePickerPropCalendarStartLeftSide<TYPE> = TYPE extends 'date-range' ? string | React.FC<IconProps> : never;
+declare type DatePickerPropCalendarStartOnFocus<TYPE> = TYPE extends 'date-range' ? React.FocusEventHandler<HTMLElement> : never;
+export declare type DatePickerProps<TYPE extends DatePickerPropType = 'date'> = PropsWithHTMLAttributesAndRef<{
+    type?: TYPE;
+    value?: DatePickerPropValue<TYPE>;
+    onChange?: DatePickerPropOnChange<TYPE>;
+    minDate?: Date;
+    maxDate?: Date;
+    events?: Date[];
+    dateTimeView?: DatePickerPropDateTimeView;
+    locale?: Locale;
+    children?: never;
+    onError?: DatePickerPropOnError;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    size?: TextFieldPropSize;
+    view?: TextFieldPropView;
+    form?: TextFieldPropForm;
+    status?: TextFieldPropStatus;
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+    autoFocus?: boolean;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    tabIndex?: number;
+    inputRef?: DatePickerPropCalendarInputRef<TYPE>;
+    ariaLabel?: string;
+    iconSize?: IconPropSize;
+    format?: string;
+    separator?: string;
+    dropdownForm?: DatePickerPropDropdownForm;
+    width?: DatePickerPropCalendarWidth<TYPE>;
+    leftSide?: string | React.FC<IconProps>;
+    rightSide?: string | React.FC<IconProps>;
+    startFieldInputRef?: DatePickerPropCalendarStartInputRef<TYPE>;
+    endFieldInputRef?: DatePickerPropCalendarStartInputRef<TYPE>;
+    startFieldLeftSide?: DatePickerPropCalendarStartLeftSide<TYPE>;
+    startFieldRightSide?: DatePickerPropCalendarStartLeftSide<TYPE>;
+    endFieldLeftSide?: DatePickerPropCalendarStartLeftSide<TYPE>;
+    endFieldRightSide?: DatePickerPropCalendarStartLeftSide<TYPE>;
+    startFieldOnFocus?: DatePickerPropCalendarStartOnFocus<TYPE>;
+    endFieldOnFocus?: DatePickerPropCalendarStartOnFocus<TYPE>;
+    startFieldOnBlur?: DatePickerPropCalendarStartOnFocus<TYPE>;
+    endFieldOnBlur?: DatePickerPropCalendarStartOnFocus<TYPE>;
+}, HTMLDivElement>;
+export declare type DatePickerComponent = <TYPE extends DatePickerPropType = 'date'>(props: DatePickerProps<TYPE>) => React.ReactElement | null;
+export declare type DatePickerTypeDateComponent = (props: DatePickerProps<'date'>) => React.ReactElement | null;
+export declare type DatePickerTypeDateRangeComponent = (props: DatePickerProps<'date-range'>) => React.ReactElement | null;
+export declare type DatePickerPropOnError = (props: {
+    type: typeof datePickerErrorTypes[0];
+    stringValue: string;
+    dd?: string;
+    MM?: string;
+    yyyy?: string;
+    date: Date;
+} | {
+    type: typeof datePickerErrorTypes[1];
+    stringValue: string;
+    dd?: string;
+    MM?: string;
+    yyyy?: string;
+} | {
+    type: typeof datePickerErrorTypes[2];
+    date: [Date, Date];
+}) => void;
+export declare const isDateRangeParams: (params: DatePickerProps<DatePickerPropType>) => params is PropsWithHTMLAttributesAndRef<{
+    type?: "date-range" | undefined;
+    value?: DateRange | null | undefined;
+    onChange?: DatePickerPropOnChange<"date-range"> | undefined;
+    minDate?: Date | undefined;
+    maxDate?: Date | undefined;
+    events?: Date[] | undefined;
+    dateTimeView?: "slider" | "classic" | "book" | undefined;
+    locale?: globalThis.Locale | undefined;
+    children?: undefined;
+    onError?: DatePickerPropOnError | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    size?: "xs" | "s" | "m" | "l" | undefined;
+    view?: "default" | "clear" | undefined;
+    form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | "brickRound" | "roundBrick" | undefined;
+    status?: "alert" | "success" | "warning" | undefined;
+    onFocus?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
+    onBlur?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
+    autoFocus?: boolean | undefined;
+    placeholder?: string | undefined;
+    readOnly?: boolean | undefined;
+    required?: boolean | undefined;
+    tabIndex?: number | undefined;
+    inputRef?: undefined;
+    ariaLabel?: string | undefined;
+    iconSize?: "xs" | "s" | "m" | undefined;
+    format?: string | undefined;
+    separator?: string | undefined;
+    dropdownForm?: "default" | "round" | "brick" | undefined;
+    width?: undefined;
+    leftSide?: string | import("react").FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    rightSide?: string | import("react").FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    startFieldInputRef?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+    endFieldInputRef?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+    startFieldLeftSide?: string | import("react").FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    startFieldRightSide?: string | import("react").FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    endFieldLeftSide?: string | import("react").FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    endFieldRightSide?: string | import("react").FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    startFieldOnFocus?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
+    endFieldOnFocus?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
+    startFieldOnBlur?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
+    endFieldOnBlur?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
+}, HTMLDivElement>;
+export declare const isNotDateRangeParams: (params: DatePickerProps<DatePickerPropType>) => params is PropsWithHTMLAttributesAndRef<{
+    type?: "date" | undefined;
+    value?: Date | null | undefined;
+    onChange?: DatePickerPropOnChange<"date"> | undefined;
+    minDate?: Date | undefined;
+    maxDate?: Date | undefined;
+    events?: Date[] | undefined;
+    dateTimeView?: "slider" | "classic" | "book" | undefined;
+    locale?: globalThis.Locale | undefined;
+    children?: undefined;
+    onError?: DatePickerPropOnError | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    size?: "xs" | "s" | "m" | "l" | undefined;
+    view?: "default" | "clear" | undefined;
+    form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | "brickRound" | "roundBrick" | undefined;
+    status?: "alert" | "success" | "warning" | undefined;
+    onFocus?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
+    onBlur?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
+    autoFocus?: boolean | undefined;
+    placeholder?: string | undefined;
+    readOnly?: boolean | undefined;
+    required?: boolean | undefined;
+    tabIndex?: number | undefined;
+    inputRef?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+    ariaLabel?: string | undefined;
+    iconSize?: "xs" | "s" | "m" | undefined;
+    format?: string | undefined;
+    separator?: string | undefined;
+    dropdownForm?: "default" | "round" | "brick" | undefined;
+    width?: "default" | "full" | undefined;
+    leftSide?: string | import("react").FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    rightSide?: string | import("react").FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<import("../../icons/Icon/Icon").Props, HTMLSpanElement>> | undefined;
+    startFieldInputRef?: undefined;
+    endFieldInputRef?: undefined;
+    startFieldLeftSide?: undefined;
+    startFieldRightSide?: undefined;
+    endFieldLeftSide?: undefined;
+    endFieldRightSide?: undefined;
+    startFieldOnFocus?: undefined;
+    endFieldOnFocus?: undefined;
+    startFieldOnBlur?: undefined;
+    endFieldOnBlur?: undefined;
+}, HTMLDivElement>;
+export declare const datePickerPropSeparatorDefault = ".";
+export declare const datePickerPropFormatDefault: string;
+export declare const datePickerPropPlaceholderDefault: string;
+export declare const normalizeRangeValue: (dateRange: DateRange) => DateRange;
+export {};

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

@@ -0,0 +1,28 @@
+"use strict";
+exports.__esModule = true;
+exports.normalizeRangeValue = exports.datePickerPropPlaceholderDefault = exports.datePickerPropFormatDefault = exports.datePickerPropSeparatorDefault = exports.isNotDateRangeParams = exports.isDateRangeParams = exports.datePickerPropDropdownFormDefault = exports.datePickerPropDropdownForm = exports.datePickerErrorTypes = exports.datePickerPropTypeDefault = exports.datePickerPropType = void 0;
+exports.datePickerPropType = ['date', 'date-range'];
+exports.datePickerPropTypeDefault = exports.datePickerPropType[0];
+exports.datePickerErrorTypes = [
+    'outOfRange',
+    'invalidInputAttempt',
+    'startDateIsGreaterThanEndDate',
+];
+exports.datePickerPropDropdownForm = ['default', 'brick', 'round'];
+exports.datePickerPropDropdownFormDefault = exports.datePickerPropDropdownForm[0];
+exports.isDateRangeParams = function (params) {
+    return params.type === exports.datePickerPropType[1];
+};
+exports.isNotDateRangeParams = function (params) {
+    return params.type === exports.datePickerPropType[0];
+};
+exports.datePickerPropSeparatorDefault = '.';
+exports.datePickerPropFormatDefault = "dd" + exports.datePickerPropSeparatorDefault + "MM" + exports.datePickerPropSeparatorDefault + "yyyy";
+exports.datePickerPropPlaceholderDefault = "\u0414\u0414" + exports.datePickerPropSeparatorDefault + "\u041C\u041C" + exports.datePickerPropSeparatorDefault + "\u0413\u0413\u0413\u0413";
+exports.normalizeRangeValue = function (dateRange) {
+    var _a, _b;
+    if (dateRange[0] && dateRange[1] && ((_a = dateRange[0]) === null || _a === void 0 ? void 0 : _a.getTime()) > ((_b = dateRange[1]) === null || _b === void 0 ? void 0 : _b.getTime())) {
+        return [dateRange[1], dateRange[0]];
+    }
+    return dateRange;
+};

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

@@ -0,0 +1,5 @@
+.DateTime100YearSlider {
+  --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) / 11);
+  --parent-width: calc(var(--item-width) * 10);
+}

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

@@ -0,0 +1,14 @@
+import './DateTime100YearSlider.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 DateTime100YearSliderProps = PropsWithHTMLAttributes<{
+    currentVisibleDate: Date;
+    onChange: (date: Date) => void;
+    children?: never;
+    value?: Date | DateRange;
+    locale?: Locale;
+}, HTMLDivElement>;
+export declare const cnDateTime100YearSlider: import("@bem-react/classname").ClassNameFormatter;
+export declare const DateTime100YearSlider: React.FC<DateTime100YearSliderProps>;

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

@@ -0,0 +1,52 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTime100YearSlider = exports.cnDateTime100YearSlider = void 0;
+var tslib_1 = require("tslib");
+require("./DateTime100YearSlider.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var date_fns_1 = require("date-fns");
+var ru_1 = tslib_1.__importDefault(require("date-fns/locale/ru"));
+var array_1 = require("../../../utils/array");
+var bem_1 = require("../../../utils/bem");
+var date_1 = require("../../../utils/date");
+var DateTimeSlider_1 = require("../DateTimeSlider/DateTimeSlider");
+var getSliderValueRange_1 = require("../helpers/getSliderValueRange");
+exports.cnDateTime100YearSlider = bem_1.cn('DateTime100YearSlider');
+var isCurrentVisibleCentury = function (currentDate, century) {
+    return date_1.getCentury(currentDate) === date_1.getCentury(century);
+};
+var isCurrentVisibleDecade = function (currentDate, decade) {
+    return isCurrentVisibleCentury(currentDate, decade) && date_fns_1.getDecade(currentDate) === date_fns_1.getDecade(decade);
+};
+var getCenturyItems = function (currentVisibleDate, decade, locale) {
+    return array_1.range(10).map(function (year) {
+        var yearDate = date_fns_1.addYears(decade, year * 10);
+        return {
+            date: yearDate,
+            label: date_fns_1.format(yearDate, 'yyyy', { locale: locale }),
+            current: isCurrentVisibleDecade(currentVisibleDate, yearDate)
+        };
+    });
+};
+var getSliderData = function (currentVisibleDate, value, locale) {
+    var currentCentury = date_1.startOfCentury(currentVisibleDate);
+    return [
+        date_fns_1.addYears(currentCentury, -100),
+        currentCentury,
+        date_fns_1.addYears(currentCentury, 100),
+        date_fns_1.addYears(currentCentury, 200),
+    ].map(function (date) { return ({
+        label: date_fns_1.format(date, 'yyyy', { locale: locale }) + "-" + date_fns_1.format(date_fns_1.addYears(date, 100), 'yyyy', { locale: locale }),
+        date: date,
+        items: getCenturyItems(currentVisibleDate, date, locale),
+        current: isCurrentVisibleCentury(currentVisibleDate, date),
+        valueRange: getSliderValueRange_1.getSliderValueRange(date, value, date_1.startOfCentury, date_1.endOfCentury)
+    }); });
+};
+exports.DateTime100YearSlider = function (props) {
+    var currentVisibleDate = props.currentVisibleDate, className = props.className, onChange = props.onChange, value = props.value, _a = props.locale, locale = _a === void 0 ? ru_1["default"] : _a, otherProps = tslib_1.__rest(props, ["currentVisibleDate", "className", "onChange", "value", "locale"]);
+    var handlePrev = function () { return onChange(date_fns_1.addYears(currentVisibleDate, -100)); };
+    var handleNext = function () { return onChange(date_fns_1.addYears(currentVisibleDate, 100)); };
+    var data = getSliderData(currentVisibleDate, value, locale);
+    return (react_1["default"].createElement(DateTimeSlider_1.DateTimeSlider, tslib_1.__assign({ className: exports.cnDateTime100YearSlider(null, [className]), onNext: handleNext, onPrev: handlePrev, data: data, onChange: onChange }, otherProps)));
+};

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

@@ -0,0 +1,5 @@
+.DateTime10YearSlider {
+  --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) / 11);
+  --parent-width: calc(var(--item-width) * 10);
+}

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

@@ -0,0 +1,14 @@
+import './DateTime10YearSlider.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 DateTime10YearSliderProps = PropsWithHTMLAttributes<{
+    currentVisibleDate: Date;
+    onChange: (date: Date) => void;
+    children?: never;
+    value?: Date | DateRange;
+    locale?: Locale;
+}, HTMLDivElement>;
+export declare const cnDateTime10YearSlider: import("@bem-react/classname").ClassNameFormatter;
+export declare const DateTime10YearSlider: React.FC<DateTime10YearSliderProps>;

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

@@ -0,0 +1,51 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTime10YearSlider = exports.cnDateTime10YearSlider = void 0;
+var tslib_1 = require("tslib");
+require("./DateTime10YearSlider.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var date_fns_1 = require("date-fns");
+var ru_1 = tslib_1.__importDefault(require("date-fns/locale/ru"));
+var array_1 = require("../../../utils/array");
+var bem_1 = require("../../../utils/bem");
+var DateTimeSlider_1 = require("../DateTimeSlider/DateTimeSlider");
+var getSliderValueRange_1 = require("../helpers/getSliderValueRange");
+exports.cnDateTime10YearSlider = bem_1.cn('DateTime10YearSlider');
+var isCurrentVisibleDecade = function (currentDate, decade) {
+    return date_fns_1.getDecade(currentDate) === date_fns_1.getDecade(decade);
+};
+var isCurrentVisibleYear = function (currentDate, year) {
+    return isCurrentVisibleDecade(currentDate, year) && date_fns_1.getYear(currentDate) === date_fns_1.getYear(year);
+};
+var getDecadeItems = function (currentVisibleDate, decade, locale) {
+    return array_1.range(10).map(function (year) {
+        var yearDate = date_fns_1.addYears(decade, year);
+        return {
+            date: yearDate,
+            label: date_fns_1.format(yearDate, 'yyyy', { locale: locale }),
+            current: isCurrentVisibleYear(currentVisibleDate, yearDate)
+        };
+    });
+};
+var getSliderData = function (currentVisibleDate, value, locale) {
+    var currentDecade = date_fns_1.startOfDecade(currentVisibleDate);
+    return [
+        date_fns_1.addYears(currentDecade, -10),
+        currentDecade,
+        date_fns_1.addYears(currentDecade, 10),
+        date_fns_1.addYears(currentDecade, 20),
+    ].map(function (date) { return ({
+        label: date_fns_1.format(date, 'yyyy', { locale: locale }) + "-" + date_fns_1.format(date_fns_1.addYears(date, 10), 'yyyy', { locale: locale }),
+        date: date,
+        items: getDecadeItems(currentVisibleDate, date, locale),
+        current: isCurrentVisibleDecade(currentVisibleDate, date),
+        valueRange: getSliderValueRange_1.getSliderValueRange(date, value, date_fns_1.startOfDecade, date_fns_1.endOfDecade)
+    }); });
+};
+exports.DateTime10YearSlider = function (props) {
+    var currentVisibleDate = props.currentVisibleDate, className = props.className, onChange = props.onChange, value = props.value, _a = props.locale, locale = _a === void 0 ? ru_1["default"] : _a, otherProps = tslib_1.__rest(props, ["currentVisibleDate", "className", "onChange", "value", "locale"]);
+    var handlePrev = function () { return onChange(date_fns_1.addYears(currentVisibleDate, -10)); };
+    var handleNext = function () { return onChange(date_fns_1.addYears(currentVisibleDate, 10)); };
+    var data = getSliderData(currentVisibleDate, value, locale);
+    return (react_1["default"].createElement(DateTimeSlider_1.DateTimeSlider, tslib_1.__assign({ className: exports.cnDateTime10YearSlider(null, [className]), onNext: handleNext, onPrev: handlePrev, data: data, onChange: onChange }, otherProps)));
+};

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

@@ -0,0 +1,14 @@
+.DateTime10Years {
+  --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/DateTime10Years/DateTime10Years.d.ts

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

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

@@ -0,0 +1,13 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTime10Years = exports.cnDateTime10Years = void 0;
+var tslib_1 = require("tslib");
+require("./DateTime10Years.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var bem_1 = require("../../../utils/bem");
+var DateTimeGrid_1 = require("../DateTimeGrid/DateTimeGrid");
+exports.cnDateTime10Years = bem_1.cn('DateTime10Years');
+exports.DateTime10Years = 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.cnDateTime10Years(null, [className]), items: years })));
+};

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

@@ -0,0 +1,3 @@
+import { DateTimeComponent } from './helpers/types';
+export declare const DateTime: DateTimeComponent;
+export * from './helpers/types';

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

@@ -0,0 +1,25 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTime = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var DateTimeTypeDate_1 = require("./DateTimeTypeDate/DateTimeTypeDate");
+var DateTimeTypeDateTime_1 = require("./DateTimeTypeDateTime/DateTimeTypeDateTime");
+var DateTimeTypeMonth_1 = require("./DateTimeTypeMonth/DateTimeTypeMonth");
+var DateTimeTypeTime_1 = require("./DateTimeTypeTime/DateTimeTypeTime");
+var DateTimeTypeYear_1 = require("./DateTimeTypeYear/DateTimeTypeYear");
+var types_1 = require("./helpers/types");
+var typeMap = {
+    'date': DateTimeTypeDate_1.DateTimeTypeDate,
+    'month': DateTimeTypeMonth_1.DateTimeTypeMonth,
+    'year': DateTimeTypeYear_1.DateTimeTypeYear,
+    'time': DateTimeTypeTime_1.DateTimeTypeTime,
+    'date-time': DateTimeTypeDateTime_1.DateTimeTypeDateTime
+};
+exports.DateTime = react_1.forwardRef(function (props, ref) {
+    var _a = props.type, type = _a === void 0 ? types_1.dateTimePropTypeDefault : _a, otherProps = tslib_1.__rest(props, ["type"]);
+    var Component = getSizeByMap_1.getSizeByMap(typeMap, type);
+    return react_1["default"].createElement(Component, tslib_1.__assign({}, otherProps, { ref: ref }));
+});
+tslib_1.__exportStar(require("./helpers/types"), exports);

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

@@ -0,0 +1,56 @@
+/* 
+--date-time-cell-width
+--date-time-cell-height
+--date-time-cell-vertical-gap
+--date-time-cell-horisontal-ga
+
+задаются сверху
+*/
+
+.DateTimeCell {
+  --bg-color: var(--color-control-bg-ghost);
+  --visible-height: calc(var(--date-time-cell-height) - (var(--date-time-cell-horisontal-gap) * 2));
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: var(--date-time-cell-width);
+  height: var(--date-time-cell-height);
+}
+
+.DateTimeCell_range::before {
+      content: '';
+      position: absolute;
+      top: var(--date-time-cell-vertical-gap);
+      right: 0;
+      left: 0;
+      bottom: var(--date-time-cell-vertical-gap);
+      background: var(--bg-color);
+    }
+
+.DateTimeCell_range_first::before,
+    .DateTimeCell_range_last::before {
+      content: '';
+      position: absolute;
+      top: var(--date-time-cell-vertical-gap);
+      bottom: var(--date-time-cell-vertical-gap);
+      background: var(--bg-color);
+    }
+
+.DateTimeCell_range_first::before {
+      right: 0;
+      left: var(--date-time-cell-horisontal-gap);
+      border-radius: var(--visible-height) 0 0 var(--visible-height);
+    }
+
+.DateTimeCell_range_last::before {
+      right: var(--date-time-cell-horisontal-gap);
+      left: 0;
+      border-radius: 0 var(--visible-height) var(--visible-height) 0;
+    }