@alfalab/core-components 24.0.0 → 24.1.0

package/calendar/modern/components/days-table/index.css

@@ -3,15 +3,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 {
 
@@ -25,8 +27,8 @@
     --gap-2xs: 4px;
 }
 :root {
-    --border-radius-s: 4px;
     --border-radius-circle: 50%;
+    --border-radius-pill: 99px;
 }
 :root {
 
@@ -36,10 +38,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);
@@ -47,206 +49,242 @@
 
     /* 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);
 }
-.calendar__daysTable_r38dn {
+.calendar__daysTable_1e7ge {
     border-collapse: separate;
     border-spacing: 0;
     position: relative
 }
-.calendar__daysTable_r38dn th {
+.calendar__daysTable_1e7ge th {
         padding: 0;
     }
-.calendar__daysTable_r38dn td {
-        padding: var(--gap-2xs) 0 0
+.calendar__daysTable_1e7ge td {
+        padding: var(--gap-2xs) 0 0;
     }
-.calendar__daysTable_r38dn td:first-child .calendar__transitLeft_r38dn {
-            background: linear-gradient(
-                270deg,
-                var(--calendar-range-background) 0%,
-                var(--color-light-specialbg-nulled) 100%
-            )
-        }
-.calendar__daysTable_r38dn td:first-child .calendar__transitLeft_r38dn:after {
-                display: none;
-            }
-.calendar__daysTable_r38dn td:last-child .calendar__transitRight_r38dn {
-            background: linear-gradient(
-                270deg,
-                var(--color-light-specialbg-nulled) 0%,
-                var(--calendar-range-background) 100%
-            )
-        }
-.calendar__daysTable_r38dn td:last-child .calendar__transitRight_r38dn:after {
-                display: none;
-            }
-.calendar__dayName_r38dn {
+.calendar__dayName_1e7ge {
     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) {
-.calendar__dayName_r38dn {
+.calendar__dayName_1e7ge {
         height: 36px
 }
     }
-.calendar__day_r38dn {
+.calendar__day_1e7ge {
     font-size: 16px;
     line-height: 24px;
     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) {
-.calendar__day_r38dn {
+.calendar__day_1e7ge {
         width: 36px;
         height: 36px
 }
     }
-.calendar__day_r38dn.calendar__event_r38dn:before {
-            content: '';
-            display: block;
-            position: absolute;
-            bottom: 2px;
-            width: 6px;
-            height: 6px;
-            border-radius: var(--border-radius-circle);
-            background: var(--calendar-marker-background);
-        }
-.calendar__day_r38dn.calendar__today_r38dn {
-        font-weight: bold
-    }
-.calendar__day_r38dn.calendar__today_r38dn 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;
-        }
-.calendar__day_r38dn.calendar__highlighted_r38dn {
+.calendar__day_1e7ge.calendar__highlighted_1e7ge,
+    .calendar__day_1e7ge.calendar__range_1e7ge.calendar__highlighted_1e7ge:not(.calendar__disabled_1e7ge) {
         color: var(--calendar-highlighted-color);
         background: var(--calendar-highlighted-background);
     }
-.calendar__day_r38dn.calendar__disabled_r38dn {
+.calendar__day_1e7ge.calendar__disabled_1e7ge {
         pointer-events: none;
         color: var(--calendar-disabled-color);
 
         background: var(--calendar-disabled-background);
         cursor: default;
     }
-.calendar__day_r38dn.calendar__range_r38dn {
-        color: var(--calendar-range-color);
-        background: var(--calendar-range-background);
-        border-radius: 0;
+.calendar__day_1e7ge.calendar__today_1e7ge {
+        font-weight: bold;
+        color: var(--calendar-today-color);
     }
-.calendar__day_r38dn.calendar__selected_r38dn,
-    .calendar__day_r38dn.calendar__disabled_r38dn.calendar__selected_r38dn {
+.calendar__day_1e7ge.calendar__selected_1e7ge,
+    .calendar__day_1e7ge.calendar__disabled_1e7ge.calendar__selected_1e7ge {
         color: var(--calendar-selected-color);
         background: var(--calendar-selected-background);
-        cursor: default;
     }
-.calendar__day_r38dn.calendar__rangeStart_r38dn {
-        cursor: pointer;
+.calendar__day_1e7ge.calendar__selected_1e7ge:hover {
+            background: var(--calendar-selected-hover-background);
+        }
+.calendar__day_1e7ge:focus {
+        z-index: 1;
+    }
+/* RANGE */
+.calendar__dayWrapper_1e7ge {
+    position: relative
+}
+.calendar__dayWrapper_1e7ge:before {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: var(--calendar-day-size);
+    }
+.calendar__range_1e7ge .calendar__day_1e7ge:not(.calendar__selected_1e7ge):not(.calendar__disabled_1e7ge):not(.calendar__today_1e7ge) {
+        color: var(--calendar-range-color);
+    }
+.calendar__range_1e7ge:before {
+        background: var(--calendar-range-background);
+    }
+.calendar__rangeEnd_1e7ge:before {
+        border-bottom-right-radius: 50%;
+        border-top-right-radius: 50%;
+        width: var(--calendar-day-size);
+    }
+.calendar__rangeEnd_1e7ge:after {
+        opacity: 0;
+    }
+.calendar__rangeStart_1e7ge:before {
+        left: auto;
+        right: 0;
+        border-bottom-left-radius: 50%;
+        border-top-left-radius: 50%;
+        width: var(--calendar-day-size);
+    }
+.calendar__rangeStart_1e7ge:after {
+        opacity: 0;
+    }
+.calendar__rangeComplete_1e7ge:before {
+        background: var(--calendar-range-complete-background);
+    }
+.calendar__transitLeft_1e7ge:after, .calendar__transitRight_1e7ge:after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 100%;
+        height: var(--calendar-day-size);
+        bottom: 0;
+        pointer-events: none;
+    }
+.calendar__transitLeft_1e7ge:after {
+        right: 100%;
+        background: linear-gradient(
+            270deg,
+            var(--calendar-range-background) 0%,
+            var(--color-light-specialbg-nulled) 100%
+        );
     }
-.calendar__day_r38dn.calendar__firstDay_r38dn:after, .calendar__day_r38dn.calendar__lastDay_r38dn:after {
-            transition: opacity 0.2s ease;
-            content: '';
-            position: absolute;
-            display: block;
-            width: 100%;
-            height: 100%;
+.calendar__transitLeft_1e7ge:first-child:before {
             opacity: 0;
-            pointer-events: none;
         }
-.calendar__day_r38dn.calendar__firstDay_r38dn:after {
-            right: 100%;
-            background: linear-gradient(
-                270deg,
-                var(--calendar-range-background) 0%,
-                var(--color-light-specialbg-nulled) 100%
-            );
+.calendar__transitLeft_1e7ge:first-child:after {
+            right: 0;
         }
-.calendar__day_r38dn.calendar__lastDay_r38dn:after {
-            left: 100%;
-            background: linear-gradient(
-                270deg,
-                var(--color-light-specialbg-nulled) 0%,
-                var(--calendar-range-background) 100%
-            );
+.calendar__transitRight_1e7ge:after {
+        left: 100%;
+        background: linear-gradient(
+            270deg,
+            var(--color-light-specialbg-nulled) 0%,
+            var(--calendar-range-background) 100%
+        );
+    }
+.calendar__transitRight_1e7ge:last-child:before {
+            opacity: 0;
         }
-.calendar__day_r38dn.calendar__transitLeft_r38dn:after, .calendar__day_r38dn.calendar__transitRight_r38dn:after {
-            opacity: 1;
+.calendar__transitRight_1e7ge:last-child:after {
+            left: 0;
         }
-.calendar__day_r38dn:focus {
-        z-index: 1;
+.calendar__rangeComplete_1e7ge.calendar__transitLeft_1e7ge:after {
+        background: linear-gradient(
+            270deg,
+            var(--calendar-range-complete-background) 0%,
+            var(--color-light-specialbg-nulled) 100%
+        );
     }
-.calendar__left_r38dn .calendar__daysEnter_r38dn {
+.calendar__rangeComplete_1e7ge.calendar__transitRight_1e7ge:after {
+        background: linear-gradient(
+            270deg,
+            var(--color-light-specialbg-nulled) 0%,
+            var(--calendar-range-complete-background) 100%
+        );
+    }
+/* SLIDE ANIMATION */
+.calendar__left_1e7ge .calendar__daysEnter_1e7ge {
         transform: translateX(var(--calendar-day-size));
     }
-.calendar__left_r38dn .calendar__daysEnterActive_r38dn {
+.calendar__left_1e7ge .calendar__daysEnterActive_1e7ge {
         transform: translateX(0%);
     }
-.calendar__left_r38dn .calendar__daysExit_r38dn {
+.calendar__left_1e7ge .calendar__daysExit_1e7ge {
         transform: translateX(0%);
     }
-.calendar__left_r38dn .calendar__daysExitActive_r38dn {
+.calendar__left_1e7ge .calendar__daysExitActive_1e7ge {
         transform: translateX(calc(-1 * var(--calendar-day-size)));
     }
-.calendar__right_r38dn .calendar__daysEnter_r38dn {
+.calendar__right_1e7ge .calendar__daysEnter_1e7ge {
         transform: translateX(calc(-1 * var(--calendar-day-size)));
     }
-.calendar__right_r38dn .calendar__daysEnterActive_r38dn {
+.calendar__right_1e7ge .calendar__daysEnterActive_1e7ge {
         transform: translateX(0%);
     }
-.calendar__right_r38dn .calendar__daysExit_r38dn {
+.calendar__right_1e7ge .calendar__daysExit_1e7ge {
         transform: translateX(0%);
     }
-.calendar__right_r38dn .calendar__daysExitActive_r38dn {
+.calendar__right_1e7ge .calendar__daysExitActive_1e7ge {
         transform: translateX(var(--calendar-day-size));
     }
-.calendar__daysEnter_r38dn {
+.calendar__dot_1e7ge {
+    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);
+}
+.calendar__selected_1e7ge .calendar__dot_1e7ge {
+    background: var(--calendar-marker-selected-background);
+}
+.calendar__daysEnter_1e7ge {
     opacity: 0;
     position: absolute;
     left: 0;
 }
-.calendar__daysEnterActive_r38dn {
+.calendar__daysEnterActive_1e7ge {
     opacity: 1;
 }
-.calendar__daysExit_r38dn {
+.calendar__daysExit_1e7ge {
     pointer-events: none;
     opacity: 1;
 }
-.calendar__daysExitActive_r38dn {
+.calendar__daysExitActive_1e7ge {
     opacity: 0;
 }
-.calendar__daysEnterActive_r38dn,
-.calendar__daysExitActive_r38dn {
+.calendar__daysEnterActive_1e7ge,
+.calendar__daysExitActive_1e7ge {
     transition: opacity 300ms, transform 300ms;
 }

package/calendar/modern/components/header/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"header":"calendar__header_i1vts","withShadow":"calendar__withShadow_i1vts","monthOnly":"calendar__monthOnly_i1vts"};
+var styles = {"header":"calendar__header_14dk8","withShadow":"calendar__withShadow_14dk8"};
 require('./index.css');
 
 const Header = ({ view = 'full', withShadow, children }) => {

package/calendar/modern/components/header/index.css

@@ -11,15 +11,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);
 
     /* День */
 
@@ -35,15 +32,14 @@
 
     /* marker */
 }
-.calendar__header_i1vts {
+.calendar__header_14dk8 {
     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;
 }
-.calendar__withShadow_i1vts {
+.calendar__withShadow_14dk8 {
     box-shadow: var(--shadow-s);
 }
-.calendar__monthOnly_i1vts {
-    padding: var(--calendar-month-only-header-paddings);
-}

package/calendar/modern/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/modern/components/month-year-header/Component.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import cn from 'classnames';
+import 'date-fns';
+import { ChevronDownCompactSIcon } from '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import '../../../../button/modern';
+import { monthName } from '../../utils.js';
+import { SelectButton } from '../select-button/Component.js';
+
+var styles = {"component":"calendar__component_w53vo","button":"calendar__button_w53vo","month":"calendar__month_w53vo","year":"calendar__year_w53vo","buttonContent":"calendar__buttonContent_w53vo","upDownIcon":"calendar__upDownIcon_w53vo"};
+require('./index.css');
+
+const MonthYearHeader = ({ value, className, onMonthClick, onYearClick, dataTestId, }) => {
+    const month = value ? monthName(value) : undefined;
+    const year = value ? value.getFullYear().toString() : undefined;
+    return (React.createElement("div", { className: cn(styles.component, className), "aria-live": 'polite', "data-test-id": dataTestId },
+        React.createElement(SelectButton, { view: 'filled', className: cn(styles.button, styles.month), onClick: onMonthClick },
+            React.createElement("span", { className: styles.buttonContent },
+                month,
+                React.createElement(ChevronDownCompactSIcon, { className: styles.upDownIcon }))),
+        React.createElement(SelectButton, { view: 'filled', className: cn(styles.button, styles.year), onClick: onYearClick },
+            React.createElement("span", { className: styles.buttonContent },
+                year,
+                React.createElement(ChevronDownCompactSIcon, { className: styles.upDownIcon })))));
+};
+
+export { MonthYearHeader };

package/calendar/modern/components/month-year-header/index.css

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

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

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

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

@@ -0,0 +1,8 @@
+import 'react';
+import 'classnames';
+import 'date-fns';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import '../../../../button/modern';
+import '../../utils.js';
+import '../select-button/Component.js';
+export { MonthYearHeader } from './Component.js';

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

@@ -5,7 +5,7 @@ import '../../../../button/modern';
 import { monthName } from '../../utils.js';
 import { SelectButton } from '../select-button/Component.js';
 
-var styles = {"monthsTable":"calendar__monthsTable_1hmzq","button":"calendar__button_1hmzq"};
+var styles = {"monthsTable":"calendar__monthsTable_4yvja","button":"calendar__button_4yvja"};
 require('./index.css');
 
 const MonthsTable = ({ selectedMonth, months = [], getMonthProps, }) => {

package/calendar/modern/components/months-table/index.css

@@ -12,9 +12,10 @@
     --gap-xs: 8px;
 }
 :root {
+    --calendar-inner-width: 280px;
+    --calendar-mobile-inner-width: 256px;
 
     /* Кнопки выбора месяцев и годов */
-    --calendar-selector-button-width: 100px;
 
     /* Шапка */
 
@@ -32,30 +33,39 @@
 
     /* marker */
 }
-.calendar__monthsTable_1hmzq {
+.calendar__monthsTable_4yvja {
     display: flex;
     flex-wrap: wrap;
-    width: 318px;
-    margin: auto -3px;
+    width: var(--calendar-inner-width);
     justify-content: flex-start
 }
 @media (max-width: 374px) {
-.calendar__monthsTable_1hmzq {
-        /* 2 кнопки по 125px + 2 отступа по 6px */
-        width: 262px
+.calendar__monthsTable_4yvja {
+        width: var(--calendar-mobile-inner-width)
 }
     }
-.calendar__button_1hmzq {
-    width: var(--calendar-selector-button-width);
-    margin: 0 3px var(--gap-xs)
+.calendar__button_4yvja {
+    width: calc((var(--calendar-inner-width) / 3) - (var(--gap-xs) / 3));
+    margin-right: var(--gap-2xs);
+    margin-bottom: var(--gap-xs)
 }
-.calendar__button_1hmzq:nth-last-child(-n + 3) {
-        margin-bottom: 0;
+.calendar__button_4yvja:nth-child(3n) {
+        margin-right: 0;
     }
 @media (max-width: 374px) {
-.calendar__button_1hmzq {
-        margin: 0 3px var(--gap-2xs);
-        width: 125px;
+.calendar__button_4yvja {
+        width: calc((var(--calendar-mobile-inner-width) / 2) - (var(--gap-2xs) / 2))
+}
+
+        .calendar__button_4yvja:nth-child(3n) {
+            margin-right: var(--gap-2xs);
+        }
+
+        .calendar__button_4yvja:nth-child(2n) {
+            margin-right: 0;
+        }
+.calendar__button_4yvja {
+
         height: 36px
 }
     }

package/calendar/modern/components/period-slider/Component.d.ts

@@ -4,7 +4,7 @@ type PeriodSliderProps = {
     /**
      * Активная дата или период
      */
-    value: Date | [Date, Date];
+    value?: Date | [Date, Date];
     /**
      * Вид шапки — с кнопками выбора года и месяца или только период
      */
@@ -51,14 +51,6 @@ type PeriodSliderProps = {
         valueTo: Date;
         periodType: PeriodType;
     }) => void;
-    /**
-     * Обработчик нажатия на кнопку месяца
-     */
-    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик нажатия на кнопку года
-     */
-    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */