@alfalab/core-components 41.11.0-beta.0 → 41.11.0-beta.1

package/day-of-month-picker/cssm/components/days-table/Component.js

@@ -1,10 +1,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib = require('tslib');
 var React = require('react');
-var reactTransitionGroup = require('react-transition-group');
 var cn = require('classnames');
 var coreComponentsButton = require('../../../../button/cssm');
+var coreComponentsTypography = require('../../../../typography/cssm');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -20,38 +19,38 @@ var DAYS_OF_MONTH = [
     [22, 23, 24, 25, 26, 27, 28],
     [29, 30],
 ];
+var LAST_DAY = 31;
 var DaysTable = function (_a) {
-    var _b;
-    var getDayProps = _a.getDayProps, responsive = _a.responsive, highlighted = _a.highlighted;
-    var renderDay = function (day, dayIdx) {
+    var onClick = _a.onClick, selectedDay = _a.selectedDay;
+    var handleMouseDown = React.useCallback(function (event) {
+        // Не дает терять фокус при выборе дня
+        event.preventDefault();
+    }, []);
+    var renderDay = function (day) {
         var _a;
-        if (!day)
-            return React__default.default.createElement("td", { key: dayIdx });
-        var _b = getDayProps(day), onClick = _b.onClick, selected = _b.selected, props = tslib.__rest(_b, ["onClick", "selected"]);
-        var dayHighlighted = day === highlighted;
-        var handleDayClick = function (e) {
-            onClick(e);
-        };
         return (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
-        React__default.default.createElement("td", tslib.__assign({}, props, { key: day, className: cn__default.default(styles__default.default.dayWrapper), align: 'center', onClick: function () { return handleDayClick(day); } }),
+        // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+        React__default.default.createElement("td", { key: day, align: 'center', onClick: function () { return onClick(day); }, role: 'presentation', "aria-selected": selectedDay === day, "data-day": day, onMouseDown: handleMouseDown },
             React__default.default.createElement(coreComponentsButton.Button, { type: 'button', view: 'ghost', size: 'xs', className: cn__default.default(styles__default.default.day, (_a = {},
-                    _a[styles__default.default.selected] = selected,
-                    _a[styles__default.default.highlighted] = dayHighlighted,
+                    _a[styles__default.default.highlighted] = selectedDay === day,
                     _a)) },
                 React__default.default.createElement("span", { className: cn__default.default(styles__default.default.dayContent) }, day))));
     };
-    var renderWeek = function (week) { return React__default.default.createElement("tr", { key: week[0] }, week.map(renderDay)); };
-    return (React__default.default.createElement("table", { className: cn__default.default(styles__default.default.daysTable, (_b = {},
-            _b[styles__default.default.responsive] = responsive,
-            _b)) },
-        React__default.default.createElement(reactTransitionGroup.TransitionGroup, { component: null },
-            React__default.default.createElement(reactTransitionGroup.CSSTransition, { timeout: 300, classNames: {
-                    enter: styles__default.default.daysEnter,
-                    enterActive: styles__default.default.daysEnterActive,
-                    exit: styles__default.default.daysExit,
-                } },
-                React__default.default.createElement("tbody", null, DAYS_OF_MONTH.map(renderWeek))))));
+    var renderLastDay = function () {
+        var _a;
+        var isLastDay = selectedDay === LAST_DAY;
+        var handleClick = function () {
+            onClick(LAST_DAY);
+        };
+        return (React__default.default.createElement(coreComponentsButton.Button, { dataTestId: 'last-day-button', type: 'button', view: 'ghost', size: 'xs', className: cn__default.default(styles__default.default.lastDay, (_a = {},
+                _a[styles__default.default.highlighted] = isLastDay,
+                _a)), onClick: handleClick, onMouseDown: handleMouseDown },
+            React__default.default.createElement(coreComponentsTypography.Typography.Text, { color: "".concat(isLastDay ? 'primary-inverted' : 'primary') }, "\u0412 \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0438\u0439 \u0434\u0435\u043D\u044C \u043C\u0435\u0441\u044F\u0446\u0430")));
+    };
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement("table", { className: styles__default.default.daysTable },
+            React__default.default.createElement("tbody", null, DAYS_OF_MONTH.map(function (week) { return (React__default.default.createElement("tr", { key: week[0] }, week.map(renderDay))); }))),
+        renderLastDay()));
 };
 
 exports.DaysTable = DaysTable;

package/day-of-month-picker/cssm/components/days-table/index.js

@@ -1,11 +1,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_daysTable_Component = require('./Component.js');
-require('tslib');
 require('react');
-require('react-transition-group');
 require('classnames');
 require('../../../../button/cssm');
+require('../../../../typography/cssm');
 require('./index.module.css');
 
 

package/day-of-month-picker/cssm/components/days-table/index.module.css

@@ -1,7 +1,6 @@
 :root {
 } /* deprecated */ :root {
     --color-light-graphic-primary: #0e0e0e;
-    --color-light-graphic-primary-inverted: #fff;
     --color-light-graphic-quaternary: #dcdcdd;
     --color-light-text-primary: #0e0e0e;
     --color-light-text-primary-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,6 +15,7 @@
 
     /* Hard up */
 } :root {
+    --border-radius-l: 12px;
     --border-radius-pill: 99px;
 } :root {
     --gap-2xs: 4px;
@@ -23,21 +23,8 @@
 } :root {
 } :root {
 
-    /* День */
-    --calendar-day-size: 40px;
-    --calendar-day-border-radius: var(--border-radius-pill);
-
-    /* highlighted */
-    --calendar-highlighted-color: var(--color-light-text-primary);
-    --calendar-highlighted-background: var(--color-light-graphic-quaternary);
-
-    /* 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);
-
-    /* marker */
-    --calendar-marker-selected-background: var(--color-light-graphic-primary-inverted);
+    /* day */
+    --day-of-month-picker-day-size: 40px;
 } .daysTable {
     border-collapse: separate;
     border-spacing: 0;
@@ -49,11 +36,9 @@
     } .daysTable td {
         padding: var(--gap-2xs) 0 0;
     } .day {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
     position: relative;
-    width: var(--calendar-day-size);
-    height: var(--calendar-day-size);
+    width: var(--day-of-month-picker-day-size);
+    height: var(--day-of-month-picker-day-size);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -61,55 +46,31 @@
     box-sizing: border-box;
     color: var(--color-light-text-primary);
     z-index: 1;
-    border-radius: var(--calendar-day-border-radius)
+    border-radius: var(--border-radius-pill)
 } .day.highlighted {
-        color: var(--calendar-highlighted-color);
-        background: var(--calendar-highlighted-background);
-    } .day.selected,
-    .day.disabled.selected {
-        color: var(--calendar-selected-color);
-        background: var(--calendar-selected-background);
+        color: var(--color-light-text-primary-inverted);
+        background: var(--color-light-graphic-primary);
+    } .day:hover {
+        background: var(--color-light-graphic-quaternary);
     } @media (hover) {
-            .day.selected:hover {
-                background: var(--calendar-selected-hover-background);
+            .day.highlighted:hover {
+                background: var(--color-light-graphic-primary-tint-15);
             }
         } .day:focus {
         z-index: 1;
-    } /* RANGE */ .dayWrapper {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    position: relative
-} .dayWrapper:before {
-        content: '';
-        display: block;
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        height: var(--calendar-day-size);
-    } .dayWrapper:focus {
-        outline: none;
-    } .dayWrapper.cursorPointer {
-        cursor: pointer;
-    } /* SLIDE ANIMATION */ .daysEnter .dayWrapper {
-    width: 100px;
-} .dayContent {
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400
-} .dayContent.today {
-        font-weight: bold;
-    } .selected .dot {
-    background: var(--calendar-marker-selected-background);
-} .daysEnter {
-    opacity: 0;
-    position: absolute;
-    left: 0;
-} .daysEnterActive {
-    opacity: 1;
-} .daysExit {
-    pointer-events: none;
-    opacity: 1;
-} .daysEnterActive,
-.daysExitActive {
-    transition: opacity 200ms, transform 300ms;
-}
+    } .lastDay {
+    border-radius: var(--border-radius-l);
+    height: var(--day-of-month-picker-day-size);
+    cursor: pointer;
+    width: 100%;
+    margin: var(--gap-2xs) 0 0
+} .lastDay.highlighted {
+        color: var(--color-light-text-primary-inverted);
+        background: var(--color-light-graphic-primary);
+    } .lastDay:hover {
+        background: var(--color-light-graphic-quaternary);
+    } @media (hover) {
+            .lastDay.highlighted:hover {
+                background: var(--color-light-graphic-primary-tint-15);
+            }
+        }

package/day-of-month-picker/cssm/desktop.js

@@ -1,20 +1,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component_desktop = require('./Component.desktop.js');
-require('tslib');
 require('react');
-require('classnames');
+require('../../popover/cssm');
+require('./components/day-input-field/DayInputField.js');
 require('../../icon-button/cssm');
 require('../../input/cssm');
-require('../../popover/cssm');
-require('../../typography/cssm');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('./components/days-table/Component.js');
-require('react-transition-group');
+require('classnames');
 require('../../button/cssm');
+require('../../typography/cssm');
 require('./components/days-table/index.module.css');
-require('./useCalendar.js');
-require('react-merge-refs');
 require('./desktop.module.css');
 
 

package/day-of-month-picker/cssm/desktop.module.css

@@ -11,25 +11,19 @@
 
     /* Hard up */
 } :root {
-    --border-radius-l: 12px;
+    --border-radius-m: 8px;
 } :root {
     --gap-m: 16px;
 } :root {
 } :root {
 } :root {
-    --calendar-height: 290px;
-    --calendar-width: 312px;
+    --day-of-month-picker-height: 290px;
+    --day-of-month-picker-width: 312px;
 
-    /* День */
-
-    /* highlighted */
-
-    /* selected */
-
-    /* marker */
+    /* day */
 } .component {
-    width: var(--calendar-width);
-    height: var(--calendar-height);
+    width: var(--day-of-month-picker-width);
+    height: var(--day-of-month-picker-height);
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -39,11 +33,7 @@
         width: 100%;
         height: 321px
 }
-    } .component.responsive {
-        width: 100%
-    } .component.responsive .container {
-            width: 100%;
-        } .container {
+    } .container {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -57,26 +47,10 @@
     } .calendarContainer {
     display: inline-block;
     box-sizing: border-box;
-    border-radius: var(--calendar-input-popover-border-radius);
+    border-radius: var(--border-radius-m);
     border: 1px solid var(--color-light-border-secondary)
 } @media (max-width: 374px) { .calendarContainer {
         width: 100%;
         min-width: 288px
 }
-    } .calendarResponsive {
-    width: var(--calendar-width);
-} .lastDay {
-    border-radius: var(--border-radius-l);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 10px 0;
-    grid-gap: 10px;
-    gap: 10px;
-    width: 280px;
-    height: 40px;
-    cursor: pointer;
-} .lastDaySelected {
-    background: #121212;
-}
+    }

package/day-of-month-picker/cssm/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./responsive";
-export { useCalendar } from "./useCalendar";
 export * from "./components/day-of-month-picker-mobile/index";
 export { DayOfMonthPickerDesktop as DayOfMonthPicker } from "./desktop";
 export type { DayOfMontPickerDesktopProps as DayOfMonthPickerProps } from "./desktop";

package/day-of-month-picker/cssm/index.js

@@ -1,30 +1,26 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component_responsive = require('./Component.responsive.js');
-var useCalendar = require('./useCalendar.js');
 var components_dayOfMonthPickerMobile_Component = require('./components/day-of-month-picker-mobile/Component.js');
 var Component_desktop = require('./Component.desktop.js');
 require('tslib');
 require('react');
 require('@alfalab/hooks');
-require('react-merge-refs');
-require('classnames');
-require('../../modal/cssm/mobile');
-require('./components/day-of-month-picker-mobile/index.module.css');
+require('../../bottom-sheet/cssm');
+require('./components/day-input-field/DayInputField.js');
 require('../../icon-button/cssm');
 require('../../input/cssm');
-require('../../popover/cssm');
-require('../../typography/cssm');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('./components/days-table/Component.js');
-require('react-transition-group');
+require('classnames');
 require('../../button/cssm');
+require('../../typography/cssm');
 require('./components/days-table/index.module.css');
+require('../../popover/cssm');
 require('./desktop.module.css');
 
 
 
 exports.DayOfMonthPickerResponsive = Component_responsive.DayOfMonthPickerResponsive;
-exports.useCalendar = useCalendar.useCalendar;
 exports.DayOfMonthPickerMobile = components_dayOfMonthPickerMobile_Component.DayOfMonthPickerMobile;
 exports.DayOfMonthPicker = Component_desktop.DayOfMonthPickerDesktop;

package/day-of-month-picker/cssm/mobile.js

@@ -2,23 +2,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_dayOfMonthPickerMobile_Component = require('./components/day-of-month-picker-mobile/Component.js');
 require('react');
-require('classnames');
-require('../../modal/cssm/mobile');
-require('./Component.desktop.js');
-require('tslib');
+require('../../bottom-sheet/cssm');
+require('./components/day-input-field/DayInputField.js');
 require('../../icon-button/cssm');
 require('../../input/cssm');
-require('../../popover/cssm');
-require('../../typography/cssm');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('./components/days-table/Component.js');
-require('react-transition-group');
+require('classnames');
 require('../../button/cssm');
+require('../../typography/cssm');
 require('./components/days-table/index.module.css');
-require('./useCalendar.js');
-require('react-merge-refs');
-require('./desktop.module.css');
-require('./components/day-of-month-picker-mobile/index.module.css');
 
 
 

package/day-of-month-picker/cssm/responsive.js

@@ -5,22 +5,19 @@ require('tslib');
 require('react');
 require('@alfalab/hooks');
 require('./components/day-of-month-picker-mobile/Component.js');
-require('classnames');
-require('../../modal/cssm/mobile');
-require('./Component.desktop.js');
+require('../../bottom-sheet/cssm');
+require('./components/day-input-field/DayInputField.js');
 require('../../icon-button/cssm');
 require('../../input/cssm');
-require('../../popover/cssm');
-require('../../typography/cssm');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('./components/days-table/Component.js');
-require('react-transition-group');
+require('classnames');
 require('../../button/cssm');
+require('../../typography/cssm');
 require('./components/days-table/index.module.css');
-require('./useCalendar.js');
-require('react-merge-refs');
+require('./Component.desktop.js');
+require('../../popover/cssm');
 require('./desktop.module.css');
-require('./components/day-of-month-picker-mobile/index.module.css');
 
 
 

package/day-of-month-picker/cssm/vars.css

@@ -1,10 +1,4 @@
 :root {
 
-    /* День */
-
-    /* highlighted */
-
-    /* selected */
-
-    /* marker */
+    /* day */
 }

package/day-of-month-picker/desktop.css

@@ -12,25 +12,19 @@
 
     /* Hard up */
 } :root {
-    --border-radius-l: 12px;
+    --border-radius-m: 8px;
 } :root {
     --gap-m: 16px;
 } :root {
 } :root {
 } :root {
-    --calendar-height: 290px;
-    --calendar-width: 312px;
+    --day-of-month-picker-height: 290px;
+    --day-of-month-picker-width: 312px;
 
-    /* День */
-
-    /* highlighted */
-
-    /* selected */
-
-    /* marker */
+    /* day */
 } .day-of-month-picker__component_189mh {
-    width: var(--calendar-width);
-    height: var(--calendar-height);
+    width: var(--day-of-month-picker-width);
+    height: var(--day-of-month-picker-height);
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -40,11 +34,7 @@
         width: 100%;
         height: 321px
 }
-    } .day-of-month-picker__component_189mh.day-of-month-picker__responsive_189mh {
-        width: 100%
-    } .day-of-month-picker__component_189mh.day-of-month-picker__responsive_189mh .day-of-month-picker__container_189mh {
-            width: 100%;
-        } .day-of-month-picker__container_189mh {
+    } .day-of-month-picker__container_189mh {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -58,27 +48,10 @@
     } .day-of-month-picker__calendarContainer_189mh {
     display: inline-block;
     box-sizing: border-box;
-    border-radius: var(--calendar-input-popover-border-radius);
+    border-radius: var(--border-radius-m);
     border: 1px solid var(--color-light-border-secondary)
 } @media (max-width: 374px) { .day-of-month-picker__calendarContainer_189mh {
         width: 100%;
         min-width: 288px
 }
-    } .day-of-month-picker__calendarResponsive_189mh {
-    width: var(--calendar-width);
-} .day-of-month-picker__lastDay_189mh {
-    border-radius: var(--border-radius-l);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 10px 0;
-    grid-gap: 10px;
-    grid-gap: 10px;
-    gap: 10px;
-    width: 280px;
-    height: 40px;
-    cursor: pointer;
-} .day-of-month-picker__lastDaySelected_189mh {
-    background: #121212;
-}
+    }

package/day-of-month-picker/desktop.js

@@ -1,19 +1,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component_desktop = require('./Component.desktop.js');
-require('tslib');
 require('react');
-require('classnames');
+require('../popover');
+require('./components/day-input-field/DayInputField.js');
 require('../icon-button');
 require('../input');
-require('../popover');
-require('../typography');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('./components/days-table/Component.js');
-require('react-transition-group');
+require('classnames');
 require('../button');
-require('./useCalendar.js');
-require('react-merge-refs');
+require('../typography');
 
 
 

package/day-of-month-picker/esm/Component.desktop.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
+import { ReactNode } from "react";
 type DayOfMontPickerDesktopProps = {
     /**
      * Дополнительный класс
@@ -18,9 +19,13 @@ type DayOfMontPickerDesktopProps = {
      */
     dataTestId?: string;
     /**
-     * Должен ли календарь подстраиваться под ширину родителя.
+     * Отображение ошибки
      */
-    responsive?: boolean;
+    error?: ReactNode | boolean;
+    /**
+     * Текст подсказки снизу
+     */
+    hint?: ReactNode;
 };
 declare const DayOfMonthPickerDesktop: React.ForwardRefExoticComponent<DayOfMontPickerDesktopProps & React.RefAttributes<HTMLDivElement>>;
 export { DayOfMontPickerDesktopProps, DayOfMonthPickerDesktop };