@alfalab/core-components 23.13.0 → 25.1.0

package/calendar/cssm/components/days-table/index.js

@@ -3,10 +3,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('../../tslib.es6-ce870b46.js');
 require('react');
 require('classnames');
-require('date-fns');
+require('date-fns/startOfDay');
+require('date-fns/startOfMonth');
 require('@alfalab/hooks');
 require('../../../../button/cssm');
+require('date-fns/isEqual');
+require('date-fns/isLastDayOfMonth');
+require('date-fns/isSameDay');
+require('date-fns/isToday');
+require('date-fns/isWithinInterval');
 require('react-transition-group');
+require('date-fns/eachDayOfInterval');
+require('date-fns/eachMonthOfInterval');
+require('date-fns/eachYearOfInterval');
+require('date-fns/lastDayOfMonth');
+require('date-fns/startOfYear');
+require('date-fns/endOfYear');
+require('date-fns/isBefore');
+require('date-fns/isAfter');
+require('date-fns/min');
+require('date-fns/max');
+require('date-fns/addDays');
+require('date-fns/addMonths');
+require('date-fns/endOfWeek');
+require('date-fns/startOfWeek');
+require('date-fns/subDays');
+require('date-fns/subMonths');
+require('date-fns/format');
+require('date-fns/parse');
 require('../../utils.js');
 require('./index.module.css');
 var components_daysTable_Component = require('./Component.js');

package/calendar/cssm/components/days-table/index.module.css

@@ -2,15 +2,17 @@
     --color-static-graphic-solitude: #e8f2fe;
 }
 :root {
-    --color-light-border-key: #0b1f35;
     --color-light-graphic-neutral: #dbdee1;
     --color-light-graphic-primary: #0b1f35;
-    --color-light-graphic-tertiary: #b6bcc3;
+    --color-light-graphic-primary-inverted: #fff;
+    --color-light-specialbg-component: rgba(11, 31, 53, 0.07);
     --color-light-specialbg-nulled: rgba(255, 255, 255, 0);
+    --color-light-text-link: #007aff;
     --color-light-text-primary: #0b1f35;
     --color-light-text-primary-inverted: #fff;
     --color-light-text-secondary: #546272;
     --color-light-text-tertiary: #b6bcc3;
+    --color-light-graphic-primary-tint-15: rgb(48, 65, 83);
 }
 :root {
 
@@ -24,8 +26,8 @@
     --gap-2xs: 4px;
 }
 :root {
-    --border-radius-s: 4px;
     --border-radius-circle: 50%;
+    --border-radius-pill: 99px;
 }
 :root {
 
@@ -35,10 +37,10 @@
 
     /* День */
     --calendar-day-size: 40px;
-    --calendar-day-border-radius: var(--border-radius-s);
+    --calendar-day-border-radius: var(--border-radius-pill);
 
     /* today */
-    --calendar-today-border-color: var(--color-light-border-key);
+    --calendar-today-color: var(--color-light-text-link);
 
     /* highlighted */
     --calendar-highlighted-color: var(--color-light-text-primary);
@@ -46,18 +48,21 @@
 
     /* range */
     --calendar-range-color: var(--color-light-text-primary);
-    --calendar-range-background: var(--color-static-graphic-solitude);
+    --calendar-range-background: var(--color-light-specialbg-component);
+    --calendar-range-complete-background: var(--color-static-graphic-solitude);
 
     /* selected */
     --calendar-selected-color: var(--color-light-text-primary-inverted);
     --calendar-selected-background: var(--color-light-graphic-primary);
+    --calendar-selected-hover-background: var(--color-light-graphic-primary-tint-15);
 
     /* disabled */
     --calendar-disabled-color: var(--color-light-text-tertiary);
     --calendar-disabled-background: transparent;
 
     /* marker */
-    --calendar-marker-background: var(--color-light-graphic-tertiary);
+    --calendar-marker-background: var(--color-light-graphic-primary);
+    --calendar-marker-selected-background: var(--color-light-graphic-primary-inverted);
 }
 .daysTable {
     border-collapse: separate;
@@ -68,34 +73,14 @@
         padding: 0;
     }
 .daysTable td {
-        padding: var(--gap-2xs) 0 0
-    }
-.daysTable td:first-child .transitLeft {
-            background: linear-gradient(
-                270deg,
-                var(--calendar-range-background) 0%,
-                var(--color-light-specialbg-nulled) 100%
-            )
-        }
-.daysTable td:first-child .transitLeft:after {
-                display: none;
-            }
-.daysTable td:last-child .transitRight {
-            background: linear-gradient(
-                270deg,
-                var(--color-light-specialbg-nulled) 0%,
-                var(--calendar-range-background) 100%
-            )
-        }
-.daysTable td:last-child .transitRight:after {
-                display: none;
-            }
+        padding: var(--gap-2xs) 0 0;
+    }
 .dayName {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
 
-    height: 40px;
+    height: var(--calendar-day-size);
     color: var(--color-light-text-secondary)
 }
 @media (max-width: 374px) {
@@ -109,15 +94,16 @@
     font-weight: 400;
 
     position: relative;
-    width: 40px;
-    height: 40px;
+    width: var(--calendar-day-size);
+    height: var(--calendar-day-size);
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     box-sizing: border-box;
     border-radius: var(--calendar-day-border-radius);
-    color: var(--color-light-text-primary)
+    color: var(--color-light-text-primary);
+    z-index: 1
 }
 @media (max-width: 374px) {
 .day {
@@ -125,31 +111,8 @@
         height: 36px
 }
     }
-.day.event:before {
-            content: '';
-            display: block;
-            position: absolute;
-            bottom: 2px;
-            width: 6px;
-            height: 6px;
-            border-radius: var(--border-radius-circle);
-            background: var(--calendar-marker-background);
-        }
-.day.today {
-        font-weight: bold
-    }
-.day.today span:after {
-            content: '';
-            border: 1px solid var(--calendar-today-border-color);
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            border-radius: var(--calendar-day-border-radius);
-            box-sizing: border-box;
-        }
-.day.highlighted {
+.day.highlighted,
+    .day.range.highlighted:not(.disabled) {
         color: var(--calendar-highlighted-color);
         background: var(--calendar-highlighted-background);
     }
@@ -160,52 +123,120 @@
         background: var(--calendar-disabled-background);
         cursor: default;
     }
-.day.range {
-        color: var(--calendar-range-color);
-        background: var(--calendar-range-background);
-        border-radius: 0;
+.day.today {
+        font-weight: bold;
+        color: var(--calendar-today-color);
+    }
+.day.rangeComplete {
+        background: var(--calendar-range-complete-background);
+    }
+.day.today {
+        font-weight: bold;
+        color: var(--color-light-text-link);
     }
 .day.selected,
     .day.disabled.selected {
         color: var(--calendar-selected-color);
         background: var(--calendar-selected-background);
-        cursor: default;
     }
-.day.rangeStart {
-        cursor: pointer;
+.day.selected:hover {
+            background: var(--calendar-selected-hover-background);
+        }
+.day:focus {
+        z-index: 1;
+    }
+/* RANGE */
+.dayWrapper {
+    position: relative
+}
+.dayWrapper:before {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: var(--calendar-day-size);
+    }
+.range .day:not(.selected):not(.disabled):not(.today) {
+        color: var(--calendar-range-color);
+    }
+.range:before {
+        background: var(--calendar-range-background);
+    }
+.rangeEnd:before {
+        border-bottom-right-radius: 50%;
+        border-top-right-radius: 50%;
+        width: var(--calendar-day-size);
+    }
+.rangeEnd:after {
+        opacity: 0;
+    }
+.rangeStart:before {
+        left: auto;
+        right: 0;
+        border-bottom-left-radius: 50%;
+        border-top-left-radius: 50%;
+        width: var(--calendar-day-size);
+    }
+.rangeStart:after {
+        opacity: 0;
+    }
+.rangeComplete:before {
+        background: var(--calendar-range-complete-background);
+    }
+.transitLeft:after, .transitRight:after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 100%;
+        height: var(--calendar-day-size);
+        bottom: 0;
+        pointer-events: none;
     }
-.day.firstDay:after, .day.lastDay:after {
-            transition: opacity 0.2s ease;
-            content: '';
-            position: absolute;
-            display: block;
-            width: 100%;
-            height: 100%;
+.transitLeft:after {
+        right: 100%;
+        background: linear-gradient(
+            270deg,
+            var(--calendar-range-background) 0%,
+            var(--color-light-specialbg-nulled) 100%
+        );
+    }
+.transitLeft:first-child:before {
             opacity: 0;
-            pointer-events: none;
         }
-.day.firstDay:after {
-            right: 100%;
-            background: linear-gradient(
-                270deg,
-                var(--calendar-range-background) 0%,
-                var(--color-light-specialbg-nulled) 100%
-            );
+.transitLeft:first-child:after {
+            right: 0;
         }
-.day.lastDay:after {
-            left: 100%;
-            background: linear-gradient(
-                270deg,
-                var(--color-light-specialbg-nulled) 0%,
-                var(--calendar-range-background) 100%
-            );
+.transitRight:after {
+        left: 100%;
+        background: linear-gradient(
+            270deg,
+            var(--color-light-specialbg-nulled) 0%,
+            var(--calendar-range-background) 100%
+        );
+    }
+.transitRight:last-child:before {
+            opacity: 0;
         }
-.day.transitLeft:after, .day.transitRight:after {
-            opacity: 1;
+.transitRight:last-child:after {
+            left: 0;
         }
-.day:focus {
-        z-index: 1;
+.rangeComplete.transitLeft:after {
+        background: linear-gradient(
+            270deg,
+            var(--calendar-range-complete-background) 0%,
+            var(--color-light-specialbg-nulled) 100%
+        );
+    }
+.rangeComplete.transitRight:after {
+        background: linear-gradient(
+            270deg,
+            var(--color-light-specialbg-nulled) 0%,
+            var(--calendar-range-complete-background) 100%
+        );
     }
+/* SLIDE ANIMATION */
 .left .daysEnter {
         transform: translateX(var(--calendar-day-size));
     }
@@ -230,6 +261,20 @@
 .right .daysExitActive {
         transform: translateX(var(--calendar-day-size));
     }
+.dot {
+    display: block;
+    position: absolute;
+    bottom: 4px;
+    width: 4px;
+    height: 4px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: var(--border-radius-circle);
+    background: var(--calendar-marker-background);
+}
+.selected .dot {
+    background: var(--calendar-marker-selected-background);
+}
 .daysEnter {
     opacity: 0;
     position: absolute;

package/calendar/cssm/components/header/index.module.css

@@ -10,15 +10,12 @@
 :root {
     --gap-s: 12px;
     --gap-m: 16px;
-    --gap-2xl: 32px;
 }
 :root {
 
     /* Кнопки выбора месяцев и годов */
 
     /* Шапка */
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
 
     /* День */
 
@@ -37,12 +34,11 @@
 .header {
     width: 100%;
     box-sizing: border-box;
-    padding: var(--calendar-header-paddings);
+    padding: var(--gap-m) 0 var(--gap-s);
     transition: box-shadow 0.2s ease;
+    display: flex;
+    justify-content: center;
 }
 .withShadow {
     box-shadow: var(--shadow-s);
 }
-.monthOnly {
-    padding: var(--calendar-month-only-header-paddings);
-}

package/calendar/cssm/components/month-year-header/Component.d.ts

@@ -0,0 +1,25 @@
+import { FC, MouseEvent } from 'react';
+type MonthYearHeaderProps = {
+    /**
+     * Активная дата
+     */
+    value?: Date;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Обработчик нажатия на кнопку месяца
+     */
+    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на кнопку года
+     */
+    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const MonthYearHeader: FC<MonthYearHeaderProps>;
+export { MonthYearHeaderProps, MonthYearHeader };

package/calendar/cssm/components/month-year-header/Component.js

@@ -0,0 +1,55 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../../tslib.es6-ce870b46.js');
+var React = require('react');
+var cn = require('classnames');
+require('date-fns/startOfDay');
+require('date-fns/startOfMonth');
+require('../../../../button/cssm');
+require('date-fns/isSameDay');
+require('date-fns/eachDayOfInterval');
+require('date-fns/eachMonthOfInterval');
+require('date-fns/eachYearOfInterval');
+require('date-fns/lastDayOfMonth');
+require('date-fns/startOfYear');
+require('date-fns/endOfYear');
+require('date-fns/isBefore');
+require('date-fns/isAfter');
+require('date-fns/min');
+require('date-fns/max');
+require('date-fns/addDays');
+require('date-fns/addMonths');
+require('date-fns/endOfWeek');
+require('date-fns/startOfWeek');
+require('date-fns/subDays');
+require('date-fns/subMonths');
+require('date-fns/format');
+require('date-fns/parse');
+var utils = require('../../utils.js');
+require('../select-button/index.module.css');
+var components_selectButton_Component = require('../select-button/Component.js');
+var ChevronDownCompactSIcon = require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var MonthYearHeader = function (_a) {
+    var value = _a.value, className = _a.className, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId;
+    var month = value ? utils.monthName(value) : undefined;
+    var year = value ? value.getFullYear().toString() : undefined;
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, className), "aria-live": 'polite', "data-test-id": dataTestId },
+        React__default['default'].createElement(components_selectButton_Component.SelectButton, { view: 'filled', className: cn__default['default'](styles__default['default'].button, styles__default['default'].month), onClick: onMonthClick },
+            React__default['default'].createElement("span", { className: styles__default['default'].buttonContent },
+                month,
+                React__default['default'].createElement(ChevronDownCompactSIcon.ChevronDownCompactSIcon, { className: styles__default['default'].upDownIcon }))),
+        React__default['default'].createElement(components_selectButton_Component.SelectButton, { view: 'filled', className: cn__default['default'](styles__default['default'].button, styles__default['default'].year), onClick: onYearClick },
+            React__default['default'].createElement("span", { className: styles__default['default'].buttonContent },
+                year,
+                React__default['default'].createElement(ChevronDownCompactSIcon.ChevronDownCompactSIcon, { className: styles__default['default'].upDownIcon })))));
+};
+
+exports.MonthYearHeader = MonthYearHeader;

package/calendar/cssm/components/month-year-header/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/calendar/cssm/components/month-year-header/index.js

@@ -0,0 +1,37 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../../tslib.es6-ce870b46.js');
+require('react');
+require('classnames');
+require('date-fns/startOfDay');
+require('date-fns/startOfMonth');
+require('../../../../button/cssm');
+require('date-fns/isSameDay');
+require('date-fns/eachDayOfInterval');
+require('date-fns/eachMonthOfInterval');
+require('date-fns/eachYearOfInterval');
+require('date-fns/lastDayOfMonth');
+require('date-fns/startOfYear');
+require('date-fns/endOfYear');
+require('date-fns/isBefore');
+require('date-fns/isAfter');
+require('date-fns/min');
+require('date-fns/max');
+require('date-fns/addDays');
+require('date-fns/addMonths');
+require('date-fns/endOfWeek');
+require('date-fns/startOfWeek');
+require('date-fns/subDays');
+require('date-fns/subMonths');
+require('date-fns/format');
+require('date-fns/parse');
+require('../../utils.js');
+require('../select-button/index.module.css');
+require('../select-button/Component.js');
+require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
+require('./index.module.css');
+var components_monthYearHeader_Component = require('./Component.js');
+
+
+
+exports.MonthYearHeader = components_monthYearHeader_Component.MonthYearHeader;

package/calendar/cssm/components/month-year-header/index.module.css

@@ -0,0 +1,75 @@
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+}
+:root {
+    --border-radius-s: 4px;
+}
+:root {
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+.component {
+    position: relative;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.button {
+    border-radius: var(--border-radius-s);
+}
+.month {
+    flex-basis: 65%
+}
+@media (max-width: 374px) {
+.month {
+        flex-grow: 1
+}
+    }
+.year {
+    flex-basis: 35%;
+    margin-left: var(--gap-xs)
+}
+@media (max-width: 374px) {
+.year {
+        width: 90px
+}
+    }
+.buttonContent {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.upDownIcon {
+    margin-left: var(--gap-xs)
+}
+@media (max-width: 374px) {
+.upDownIcon {
+        margin-left: auto
+}
+    }

package/calendar/cssm/components/months-table/Component.js

@@ -3,9 +3,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../../tslib.es6-ce870b46.js');
 var React = require('react');
 require('classnames');
-var dateFns = require('date-fns');
+require('date-fns/startOfDay');
+require('date-fns/startOfMonth');
 require('../../../../button/cssm');
+require('date-fns/isSameDay');
+require('date-fns/eachDayOfInterval');
+require('date-fns/eachMonthOfInterval');
+require('date-fns/eachYearOfInterval');
+require('date-fns/lastDayOfMonth');
+require('date-fns/startOfYear');
+require('date-fns/endOfYear');
+require('date-fns/isBefore');
+require('date-fns/isAfter');
+require('date-fns/min');
+require('date-fns/max');
+require('date-fns/addDays');
+require('date-fns/addMonths');
+require('date-fns/endOfWeek');
+require('date-fns/startOfWeek');
+require('date-fns/subDays');
+require('date-fns/subMonths');
+require('date-fns/format');
+require('date-fns/parse');
 var utils = require('../../utils.js');
+var isSameMonth = require('date-fns/isSameMonth');
+var isThisMonth = require('date-fns/isThisMonth');
 require('../select-button/index.module.css');
 var components_selectButton_Component = require('../select-button/Component.js');
 var styles = require('./index.module.css');
@@ -13,14 +35,16 @@ var styles = require('./index.module.css');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var isSameMonth__default = /*#__PURE__*/_interopDefaultLegacy(isSameMonth);
+var isThisMonth__default = /*#__PURE__*/_interopDefaultLegacy(isThisMonth);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var MonthsTable = function (_a) {
     var selectedMonth = _a.selectedMonth, _b = _a.months, months = _b === void 0 ? [] : _b, getMonthProps = _a.getMonthProps;
     var view = React.useCallback(function (month) {
-        if (selectedMonth && dateFns.isSameMonth(selectedMonth, month.date))
+        if (selectedMonth && isSameMonth__default['default'](selectedMonth, month.date))
             return 'selected';
-        if (dateFns.isThisMonth(month.date))
+        if (isThisMonth__default['default'](month.date))
             return 'outlined';
         return 'default';
     }, [selectedMonth]);

package/calendar/cssm/components/months-table/index.js

@@ -3,9 +3,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('../../tslib.es6-ce870b46.js');
 require('react');
 require('classnames');
-require('date-fns');
+require('date-fns/startOfDay');
+require('date-fns/startOfMonth');
 require('../../../../button/cssm');
+require('date-fns/isSameDay');
+require('date-fns/eachDayOfInterval');
+require('date-fns/eachMonthOfInterval');
+require('date-fns/eachYearOfInterval');
+require('date-fns/lastDayOfMonth');
+require('date-fns/startOfYear');
+require('date-fns/endOfYear');
+require('date-fns/isBefore');
+require('date-fns/isAfter');
+require('date-fns/min');
+require('date-fns/max');
+require('date-fns/addDays');
+require('date-fns/addMonths');
+require('date-fns/endOfWeek');
+require('date-fns/startOfWeek');
+require('date-fns/subDays');
+require('date-fns/subMonths');
+require('date-fns/format');
+require('date-fns/parse');
 require('../../utils.js');
+require('date-fns/isSameMonth');
+require('date-fns/isThisMonth');
 require('../select-button/index.module.css');
 require('../select-button/Component.js');
 require('./index.module.css');