@consta/uikit 3.4.0 → 3.8.0

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

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

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

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

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

@@ -0,0 +1,26 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTimeTimeColumn = exports.cnDateTimeTimeColumn = void 0;
+var tslib_1 = require("tslib");
+require("./DateTimeTimeColumn.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var bem_1 = require("../../../utils/bem");
+var Text_1 = require("../../Text/Text");
+var DateTimeCell_1 = require("../DateTimeCell/DateTimeCell");
+var DateTimeGrid_1 = require("../DateTimeGrid/DateTimeGrid");
+var useScrollToElement_1 = require("./useScrollToElement/useScrollToElement");
+exports.cnDateTimeTimeColumn = bem_1.cn('DateTimeTimeColumn');
+exports.DateTimeTimeColumn = react_1.memo(function (props) {
+    var label = props.label, items = props.items, className = props.className, otherProps = tslib_1.__rest(props, ["label", "items", "className"]);
+    var scrollWrapperRef = react_1.useRef(null);
+    var _a = tslib_1.__read(useScrollToElement_1.useScrollToElement(items, scrollWrapperRef), 1), itemsRefs = _a[0];
+    if (items.length === 0) {
+        return null;
+    }
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: exports.cnDateTimeTimeColumn(null, [className]) }),
+        react_1["default"].createElement(DateTimeCell_1.DateTimeCell, { className: exports.cnDateTimeTimeColumn('Label') },
+            react_1["default"].createElement(Text_1.Text, { view: "ghost", size: "2xs" }, label)),
+        react_1["default"].createElement("div", { className: exports.cnDateTimeTimeColumn('ScrollWrapper'), ref: scrollWrapperRef },
+            react_1["default"].createElement(DateTimeGrid_1.DateTimeGrid, { className: exports.cnDateTimeTimeColumn('List'), items: items, itemsRefs: itemsRefs }),
+            react_1["default"].createElement("div", { className: exports.cnDateTimeTimeColumn('FakeElemet') }))));
+});

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

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

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

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

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

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

package/__internal__/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, currentVisibleDateProp = props.currentVisibleDate, events = props.events, _a = props.locale, locale = _a === void 0 ? ru_1["default"] : _a, _b = props.view, view = _b === void 0 ? types_1.dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = tslib_1.__rest(props, ["className", "minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "view", "onMove", "onChangeCurrentVisibleDate"]);
+    var _c = tslib_1.__read(useFlag_1.useFlag(), 2), changeMonth = _c[0], _d = _c[1], on = _d.on, off = _d.off;
+    react_1.useEffect(function () {
+        !changeMonth && (onMove === null || onMove === void 0 ? void 0 : onMove(helpers_1.moveTypes[2]));
+    }, [changeMonth]);
+    var _e = tslib_1.__read(helpers_1.useCurrentVisibleDate({
+        currentVisibleDate: currentVisibleDateProp,
+        maxDate: maxDate,
+        minDate: minDate,
+        value: value,
+        startOfUnit: date_fns_1.startOfMonth,
+        onChangeCurrentVisibleDate: onChangeCurrentVisibleDate
+    }), 2), currentVisibleDate = _e[0], setCurrentVisibleDate = _e[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 {};