@alfalab/core-components 41.1.0-beta.0 → 41.2.0

package/calendar/cssm/useCalendar.js

@@ -43,7 +43,7 @@ var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 var subYears__default = /*#__PURE__*/_interopDefaultCompat(subYears);
 
 function useCalendar(_a) {
-    var defaultMonth = _a.defaultMonth, month = _a.month, minDate = _a.minDate, _b = _a.view, view = _b === void 0 ? 'days' : _b, maxDate = _a.maxDate, selected = _a.selected, events = _a.events, offDays = _a.offDays, holidays = _a.holidays, onMonthChange = _a.onMonthChange, onChange = _a.onChange;
+    var defaultMonth = _a.defaultMonth, month = _a.month, minDate = _a.minDate, _b = _a.view, view = _b === void 0 ? 'days' : _b, maxDate = _a.maxDate, selected = _a.selected, events = _a.events, offDays = _a.offDays, holidays = _a.holidays, dayAddons = _a.dayAddons, onMonthChange = _a.onMonthChange, onChange = _a.onChange;
     var _c = React.useState(defaultMonth), monthState = _c[0], setMonthState = _c[1];
     var _d = React.useState(), highlighted = _d[0], setHighlighted = _d[1];
     var uncontrolled = month === undefined;
@@ -57,6 +57,7 @@ function useCalendar(_a) {
     var eventsMap = React.useMemo(function () { return utils.dateArrayToHashTable(events || []); }, [events]);
     var offDaysMap = React.useMemo(function () { return utils.dateArrayToHashTable(offDays || []); }, [offDays]);
     var holidaysMap = React.useMemo(function () { return utils.dateArrayToHashTable(holidays || []); }, [holidays]);
+    var dayAddonsMap = React.useMemo(function () { return utils.addonArrayToHashTable(dayAddons || []); }, [dayAddons]);
     var weeks = React.useMemo(function () {
         return utils.generateWeeks(activeMonth, {
             minDate: minDate,
@@ -65,8 +66,9 @@ function useCalendar(_a) {
             eventsMap: eventsMap,
             offDaysMap: offDaysMap,
             holidaysMap: holidaysMap,
+            dayAddonsMap: dayAddonsMap,
         });
-    }, [maxDate, minDate, selected, activeMonth, eventsMap, offDaysMap, holidaysMap]);
+    }, [maxDate, minDate, selected, dayAddonsMap, activeMonth, eventsMap, offDaysMap, holidaysMap]);
     var months = React.useMemo(function () { return utils.generateMonths(activeMonth, { minMonth: minMonth, maxMonth: maxMonth }); }, [minMonth, maxMonth, activeMonth]);
     var years = React.useMemo(function () {
         return utils.generateYears(minDate || subYears__default.default(new Date(), 100), maxDate || addYears__default.default(new Date(), 1));

package/calendar/cssm/utils.d.ts

@@ -1,4 +1,5 @@
-import { DateShift, Day, Month, SpecialDays } from "./typings";
+import { ReactNode } from 'react';
+import { DateShift, Day, DayAddons, Month, SpecialDays, SpecialDaysAddon } from "./typings";
 declare const DAYS_IN_WEEK = 7;
 declare const MONTHS_IN_YEAR = 12;
 declare const SUNDAY_INDEX = 6;
@@ -20,6 +21,7 @@ declare function generateWeeks(month: Date, options: {
     eventsMap?: SpecialDays;
     offDaysMap?: SpecialDays;
     holidaysMap?: SpecialDays;
+    dayAddonsMap?: SpecialDaysAddon;
 }): Day[][];
 /**
  * Возвращает массив с месяцами для переданного года
@@ -42,6 +44,7 @@ declare function buildDay(day: Date, options: {
     eventsMap?: SpecialDays;
     offDaysMap?: SpecialDays;
     holidaysMap?: SpecialDays;
+    dayAddonsMap?: SpecialDaysAddon;
 }): Day;
 /**
  * Добавляет метаданные для переданного месяца
@@ -66,6 +69,7 @@ declare function monthName(month: Date): string;
  * Превращает массив в объект, у которого ключи составляются из элементов массива
  */
 declare function dateArrayToHashTable(arr: Array<Date | number>): Record<number, boolean>;
+declare function addonArrayToHashTable(arr: DayAddons[]): Record<number, ReactNode>;
 /**
  * Возвращает корректный отрезок дат для выделения
  */
@@ -81,4 +85,4 @@ declare function modifyDateByShift(shift: DateShift, date: Date, minDate?: Date,
 declare function simulateTab(node: HTMLElement): void;
 declare const formatDate: (date: Date | number, dateFormat?: string) => string;
 declare const parseDateString: (value: string, dateFormat?: string) => Date;
-export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString };
+export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString };

package/calendar/cssm/utils.js

@@ -113,7 +113,7 @@ function generateYears(minYear, maxYear) {
  * Добавляет метаданные для переданного дня
  */
 function buildDay(day, options) {
-    var minDate = options.minDate, maxDate = options.maxDate, selected = options.selected, _a = options.eventsMap, eventsMap = _a === void 0 ? {} : _a, _b = options.offDaysMap, offDaysMap = _b === void 0 ? {} : _b, _c = options.holidaysMap, holidaysMap = _c === void 0 ? {} : _c;
+    var minDate = options.minDate, maxDate = options.maxDate, selected = options.selected, _a = options.eventsMap, eventsMap = _a === void 0 ? {} : _a, _b = options.offDaysMap, offDaysMap = _b === void 0 ? {} : _b, _c = options.holidaysMap, holidaysMap = _c === void 0 ? {} : _c, _d = options.dayAddonsMap, dayAddonsMap = _d === void 0 ? {} : _d;
     var off = offDaysMap[day.getTime()];
     var disabled = (minDate && isBefore__default.default(day, minDate)) || (maxDate && isAfter__default.default(day, maxDate));
     return {
@@ -122,6 +122,7 @@ function buildDay(day, options) {
         event: eventsMap[day.getTime()],
         holiday: holidaysMap[day.getTime()],
         selected: selected && isSameDay__default.default(day, selected),
+        dayAddon: dayAddonsMap[day.getTime()],
     };
 }
 /**
@@ -166,6 +167,12 @@ function dateArrayToHashTable(arr) {
         return acc;
     }, {});
 }
+function addonArrayToHashTable(arr) {
+    return arr.reduce(function (acc, v) {
+        acc[startOfDay__default.default(v.date).getTime()] = v.addon;
+        return acc;
+    }, {});
+}
 /**
  * Возвращает корректный отрезок дат для выделения
  */
@@ -236,6 +243,7 @@ exports.MONTHS_IN_YEAR = MONTHS_IN_YEAR;
 exports.NATIVE_DATE_FORMAT = NATIVE_DATE_FORMAT;
 exports.SUNDAY_INDEX = SUNDAY_INDEX;
 exports.WEEKDAYS = WEEKDAYS;
+exports.addonArrayToHashTable = addonArrayToHashTable;
 exports.buildDay = buildDay;
 exports.buildMonth = buildMonth;
 exports.dateArrayToHashTable = dateArrayToHashTable;

package/calendar/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 1f2di */
+/* hash: 10d45 */
 :root {
 } /* deprecated */ :root { /* 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 */
 } :root { /* 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 */
@@ -40,27 +40,27 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_1p9qk {
+} .calendar__component_fxv7s {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     outline: none
-} @media (max-width: 374px) { .calendar__component_1p9qk {
+} @media (max-width: 374px) { .calendar__component_fxv7s {
         align-items: center;
         width: 100%;
         height: 321px
 }
-    } .calendar__component_1p9qk.calendar__responsive_1p9qk {
+    } .calendar__component_fxv7s.calendar__responsive_fxv7s {
         width: 100%
-    } .calendar__component_1p9qk.calendar__responsive_1p9qk .calendar__period_1p9qk {
+    } .calendar__component_fxv7s.calendar__responsive_fxv7s .calendar__period_fxv7s {
             width: 100%;
-        } .calendar__component_1p9qk.calendar__responsive_1p9qk .calendar__monthYear_1p9qk {
+        } .calendar__component_fxv7s.calendar__responsive_fxv7s .calendar__monthYear_fxv7s {
             width: 100%;
-        } .calendar__component_1p9qk.calendar__responsive_1p9qk .calendar__container_1p9qk {
+        } .calendar__component_fxv7s.calendar__responsive_fxv7s .calendar__container_fxv7s {
             width: 100%;
-        } .calendar__container_1p9qk {
+        } .calendar__container_fxv7s {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -68,24 +68,24 @@
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden
-} @media (max-width: 374px) { .calendar__container_1p9qk {
+} @media (max-width: 374px) { .calendar__container_fxv7s {
         width: 288px
 }
-    } .calendar__sixWeeks_1p9qk {
+    } .calendar__sixWeeks_fxv7s {
     height: 388px
-} @media (max-width: 374px) { .calendar__sixWeeks_1p9qk {
+} @media (max-width: 374px) { .calendar__sixWeeks_fxv7s {
         height: 361px
 }
-    } .calendar__period_1p9qk {
+    } .calendar__period_fxv7s {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__period_1p9qk {
+} @media (max-width: 374px) { .calendar__period_fxv7s {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto
 }
-    } .calendar__monthYear_1p9qk {
+    } .calendar__monthYear_fxv7s {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__monthYear_1p9qk {
+} @media (max-width: 374px) { .calendar__monthYear_fxv7s {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto

package/calendar/esm/Component.desktop.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 import { MouseEvent } from "react";
-import { SelectorView, View } from "./typings";
+import { DayAddons, SelectorView, View } from "./typings";
 type CalendarDesktopProps = {
     /**
      * Дополнительный класс
@@ -87,6 +87,14 @@ type CalendarDesktopProps = {
      * Должен ли календарь подстраиваться под ширину родителя.
      */
     responsive?: boolean;
+    /**
+     * Дополнительный контент под числом
+     */
+    dayAddons?: DayAddons[];
+    /**
+     * Форма ячейки дня
+     */
+    shape?: 'rounded' | 'rectangular';
 };
 declare const CalendarDesktop: React.ForwardRefExoticComponent<CalendarDesktopProps & React.RefAttributes<HTMLDivElement>>;
 export { CalendarDesktopProps, CalendarDesktop };

package/calendar/esm/Component.desktop.js

@@ -60,14 +60,14 @@ import 'date-fns/setYear';
 import 'date-fns/subYears';
 import './components/period-slider/utils.js';
 
-var styles = {"component":"calendar__component_1p9qk","responsive":"calendar__responsive_1p9qk","period":"calendar__period_1p9qk","monthYear":"calendar__monthYear_1p9qk","container":"calendar__container_1p9qk","sixWeeks":"calendar__sixWeeks_1p9qk"};
+var styles = {"component":"calendar__component_fxv7s","responsive":"calendar__responsive_fxv7s","period":"calendar__period_fxv7s","monthYear":"calendar__monthYear_fxv7s","container":"calendar__container_fxv7s","sixWeeks":"calendar__sixWeeks_fxv7s"};
 require('./desktop.css');
 
 var CalendarDesktop = forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _e = _a.defaultMonth, defaultMonthTimestamp = _e === void 0 ? +new Date() : _e, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive;
-    var _g = useState(defaultView), view = _g[0], setView = _g[1];
-    var _h = useState(false), scrolled = _h[0], setScrolled = _h[1];
+    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _e = _a.defaultMonth, defaultMonthTimestamp = _e === void 0 ? +new Date() : _e, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive, dayAddons = _a.dayAddons, _g = _a.shape, shape = _g === void 0 ? 'rounded' : _g;
+    var _h = useState(defaultView), view = _h[0], setView = _h[1];
+    var _j = useState(false), scrolled = _j[0], setScrolled = _j[1];
     var selected = useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
     var defaultMonth = useMemo(function () {
         return startOfMonth(selected ||
@@ -78,7 +78,7 @@ var CalendarDesktop = forwardRef(function (_a, ref) {
     var month = useMemo(function () { return (monthTimestamp ? new Date(monthTimestamp) : undefined); }, [monthTimestamp]);
     var minDate = useMemo(function () { return (minDateTimestamp ? startOfDay(minDateTimestamp) : undefined); }, [minDateTimestamp]);
     var maxDate = useMemo(function () { return (maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined); }, [maxDateTimestamp]);
-    var _j = useCalendar({
+    var _k = useCalendar({
         month: month,
         defaultMonth: defaultMonth,
         view: view,
@@ -88,9 +88,10 @@ var CalendarDesktop = forwardRef(function (_a, ref) {
         offDays: offDays,
         events: events,
         holidays: holidays,
+        dayAddons: dayAddons,
         onChange: onChange,
         onMonthChange: onMonthChange,
-    }), activeMonth = _j.activeMonth, weeks = _j.weeks, months = _j.months, years = _j.years, canSetPrevMonth = _j.canSetPrevMonth, canSetNextMonth = _j.canSetNextMonth, setMonthByDate = _j.setMonthByDate, setPrevMonth = _j.setPrevMonth, setNextMonth = _j.setNextMonth, highlighted = _j.highlighted, getDayProps = _j.getDayProps, getMonthProps = _j.getMonthProps, getYearProps = _j.getYearProps, getRootProps = _j.getRootProps;
+    }), activeMonth = _k.activeMonth, weeks = _k.weeks, months = _k.months, years = _k.years, canSetPrevMonth = _k.canSetPrevMonth, canSetNextMonth = _k.canSetNextMonth, setMonthByDate = _k.setMonthByDate, setPrevMonth = _k.setPrevMonth, setNextMonth = _k.setNextMonth, highlighted = _k.highlighted, getDayProps = _k.getDayProps, getMonthProps = _k.getMonthProps, getYearProps = _k.getYearProps, getRootProps = _k.getRootProps;
     var toggleView = useCallback(function (newView) {
         setView(view === newView ? 'days' : newView);
     }, [view]);
@@ -134,7 +135,7 @@ var CalendarDesktop = forwardRef(function (_a, ref) {
             _b)), "data-test-id": dataTestId }),
         hasHeader && (React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
         React.createElement("div", { className: cn(styles.container, styles[view]) },
-            view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive })),
+            view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive, shape: shape })),
             view === 'months' && (React.createElement(MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps, responsive: responsive })),
             view === 'years' && (React.createElement(YearsTable, { selectedYear: activeMonth, years: years, getYearProps: getYearProps, onScroll: handleScroll, responsive: responsive })))));
 });

package/calendar/esm/{Component.responsive-70132086.js → Component.responsive-e10f4026.js}

@@ -16,7 +16,7 @@ import 'date-fns/endOfWeek';
 import 'date-fns/startOfWeek';
 import '../../icon-button/esm';
 import '@alfalab/icons-glyph/ChevronBackMIcon';
-import { WEEKDAYS, limitDate, dateArrayToHashTable, generateMonths, generateWeeks, monthName } from './utils.js';
+import { WEEKDAYS, limitDate, dateArrayToHashTable, addonArrayToHashTable, generateMonths, generateWeeks, monthName } from './utils.js';
 import 'date-fns/addDays';
 import 'date-fns/addMonths';
 import 'date-fns/addQuarters';
@@ -65,7 +65,7 @@ import 'react-merge-refs';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
 
-var styles = {"wrapper":"calendar__wrapper_17cic","withZIndex":"calendar__withZIndex_17cic","calendar":"calendar__calendar_17cic","dayNames":"calendar__dayNames_17cic","withHeader":"calendar__withHeader_17cic","month":"calendar__month_17cic","daysTable":"calendar__daysTable_17cic","dayName":"calendar__dayName_17cic"};
+var styles = {"wrapper":"calendar__wrapper_1g5mb","withZIndex":"calendar__withZIndex_1g5mb","calendar":"calendar__calendar_1g5mb","dayNames":"calendar__dayNames_1g5mb","withHeader":"calendar__withHeader_1g5mb","month":"calendar__month_1g5mb","daysTable":"calendar__daysTable_1g5mb","dayName":"calendar__dayName_1g5mb"};
 require('./components/calendar-mobile/index.css');
 
 // ResizeObserverPolyfill необходим для корректной работы react-virtuoso.
@@ -73,7 +73,7 @@ if (typeof window !== 'undefined' && !window.ResizeObserver) {
     window.ResizeObserver = ResizeObserver;
 }
 var CalendarMonthOnlyView = function (_a) {
-    var value = _a.value, defaultView = _a.defaultView, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, defaultMonthTimestamp = _a.defaultMonth, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, onMonthChange = _a.onMonthChange, _b = _a.yearsAmount, yearsAmount = _b === void 0 ? 3 : _b;
+    var value = _a.value, defaultView = _a.defaultView, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, defaultMonthTimestamp = _a.defaultMonth, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, onMonthChange = _a.onMonthChange, _b = _a.yearsAmount, yearsAmount = _b === void 0 ? 3 : _b, dayAddons = _a.dayAddons, _c = _a.shape, shape = _c === void 0 ? 'rounded' : _c;
     var initialMonthIndex = useMemo(function () {
         var currentMonthIndex = new Date().getMonth();
         return yearsAmount * 12 + currentMonthIndex;
@@ -86,7 +86,7 @@ var CalendarMonthOnlyView = function (_a) {
         return startOfMonth(selected ||
             limitDate(defaultMonthTimestamp || Date.now(), minDateTimestamp, maxDateTimestamp));
     }, [defaultMonthTimestamp, maxDateTimestamp, minDateTimestamp, selected]);
-    var _c = useCalendar({
+    var _d = useCalendar({
         month: month,
         defaultMonth: defaultMonth,
         view: defaultView,
@@ -97,11 +97,13 @@ var CalendarMonthOnlyView = function (_a) {
         events: events,
         onChange: onChange,
         onMonthChange: onMonthChange,
-    }), activeMonth = _c.activeMonth, months = _c.months, highlighted = _c.highlighted, getDayProps = _c.getDayProps;
+        dayAddons: dayAddons,
+    }), activeMonth = _d.activeMonth, months = _d.months, highlighted = _d.highlighted, getDayProps = _d.getDayProps;
     var activeMonths = useMemo(function () {
         var eventsMap = dateArrayToHashTable(events || []);
         var offDaysMap = dateArrayToHashTable(offDays || []);
         var holidaysMap = dateArrayToHashTable(holidays || []);
+        var dayAddonsMap = addonArrayToHashTable(dayAddons || []);
         var prevMonths = [];
         var nextMonths = [];
         var date = new Date();
@@ -122,11 +124,12 @@ var CalendarMonthOnlyView = function (_a) {
                 eventsMap: eventsMap,
                 offDaysMap: offDaysMap,
                 holidaysMap: holidaysMap,
+                dayAddonsMap: dayAddonsMap,
             }), title: "".concat(monthName(item.date), " ").concat(item.date.getFullYear()) })); });
-    }, [events, offDays, holidays, months, yearsAmount, minDate, maxDate, selected]);
+    }, [events, offDays, holidays, dayAddons, months, yearsAmount, minDate, maxDate, selected]);
     var renderMonth = function (index) { return (React.createElement("div", { className: styles.daysTable, id: "month-".concat(index) },
         React.createElement("span", { className: styles.month }, activeMonths[index].title),
-        React.createElement(DaysTable, { weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, hasHeader: false, responsive: true }))); };
+        React.createElement(DaysTable, { weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, hasHeader: false, responsive: true, shape: shape }))); };
     return (React.createElement(Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: initialMonthIndex, increaseViewportBy: 800, itemSize: function (el) { return el.getBoundingClientRect().height + 32; } }));
 };
 var CalendarMobile = forwardRef(function (_a, ref) {

package/calendar/esm/Component.responsive.js

@@ -1,7 +1,7 @@
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';
-export { C as CalendarResponsive } from './Component.responsive-70132086.js';
+export { C as CalendarResponsive } from './Component.responsive-e10f4026.js';
 import './Component.desktop.js';
 import 'react-virtuoso';
 import '@juggle/resize-observer';

package/calendar/esm/components/calendar-mobile/Component.js

@@ -9,7 +9,7 @@ import 'date-fns/startOfMonth';
 import '../../../../button/esm';
 import '../../../../modal/esm/mobile';
 import '../../Component.desktop.js';
-export { a as CalendarMobile } from '../../Component.responsive-70132086.js';
+export { a as CalendarMobile } from '../../Component.responsive-e10f4026.js';
 import 'date-fns/differenceInDays';
 import '@alfalab/hooks';
 import 'react-merge-refs';

package/calendar/esm/components/calendar-mobile/index.css

@@ -1,4 +1,4 @@
-/* hash: oefr8 */
+/* hash: 1ndiz */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -57,13 +57,13 @@
     /* mobile */
 
     /* paddings */
-} .calendar__wrapper_17cic {
+} .calendar__wrapper_1g5mb {
     background: var(--color-light-bg-primary);
-} .calendar__withZIndex_17cic {
+} .calendar__withZIndex_1g5mb {
     z-index: 2;
-} .calendar__calendar_17cic th {
+} .calendar__calendar_1g5mb th {
     border-bottom: 1px solid var(--color-light-border-primary);
-} .calendar__dayNames_17cic {
+} .calendar__dayNames_1g5mb {
     padding: 0 var(--gap-m);
     width: 100%;
     position: sticky;
@@ -71,11 +71,11 @@
     background: var(--modal-header-background);
     top: 0;
     height: 32px
-} .calendar__dayNames_17cic.calendar__withHeader_17cic {
+} .calendar__dayNames_1g5mb.calendar__withHeader_1g5mb {
         top: 48px;
-    } .calendar__dayNames_17cic th {
+    } .calendar__dayNames_1g5mb th {
     height: 100%;
-} .calendar__month_17cic {
+} .calendar__month_1g5mb {
     font-style: normal;
     font-weight: 700;
     font-size: 12px;
@@ -84,18 +84,18 @@
     text-transform: uppercase;
     color: var(--color-light-text-primary);
     margin-bottom: var(--gap-xs);
-} .calendar__daysTable_17cic {
+} .calendar__daysTable_1g5mb {
     display: flex;
     flex-direction: column;
     margin-top: var(--gap-2xl);
-} .calendar__dayName_17cic {
+} .calendar__dayName_1g5mb {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
 
     height: var(--calendar-day-size);
     color: var(--color-light-text-secondary)
-} @media (max-width: 374px) { .calendar__dayName_17cic {
+} @media (max-width: 374px) { .calendar__dayName_1g5mb {
         height: 36px
 }
     }

package/calendar/esm/components/calendar-mobile/index.d.ts

@@ -1,2 +1,2 @@
-export * from "../../Component.responsive-70132086";
+export * from "../../Component.responsive-e10f4026";
 export {};

package/calendar/esm/components/calendar-mobile/index.js

@@ -1,4 +1,4 @@
-export { a as CalendarMobile } from '../../Component.responsive-70132086.js';
+export { a as CalendarMobile } from '../../Component.responsive-e10f4026.js';
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';

package/calendar/esm/components/days-table/Component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 import { FC, RefCallback } from "react";
-import { Day } from "../../typings";
+import { Day, DayAddons } from "../../typings";
 type DaysTableProps = {
     /**
      * Массив-календарь недель
@@ -42,6 +42,14 @@ type DaysTableProps = {
      * Должен ли календарь подстраиваться под ширину родителя.
      */
     responsive?: boolean;
+    /**
+     * Дополнительный контент под числом
+     */
+    dayAddons?: DayAddons[];
+    /**
+     * Форма ячейки дня
+     */
+    shape?: 'rounded' | 'rectangular';
 };
 declare const DaysTable: FC<DaysTableProps>;
 export { DaysTableProps, DaysTable };

package/calendar/esm/components/days-table/Component.js

@@ -31,12 +31,12 @@ import 'date-fns/startOfYear';
 import 'date-fns/subDays';
 import 'date-fns/subMonths';
 
-var styles = {"daysTable":"calendar__daysTable_d4htw","responsive":"calendar__responsive_d4htw","dayName":"calendar__dayName_d4htw","day":"calendar__day_d4htw","highlighted":"calendar__highlighted_d4htw","range":"calendar__range_d4htw","disabled":"calendar__disabled_d4htw","holiday":"calendar__holiday_d4htw","today":"calendar__today_d4htw","rangeComplete":"calendar__rangeComplete_d4htw","selected":"calendar__selected_d4htw","dayWrapper":"calendar__dayWrapper_d4htw","cursorPointer":"calendar__cursorPointer_d4htw","rangeEnd":"calendar__rangeEnd_d4htw","rangeStart":"calendar__rangeStart_d4htw","transitLeft":"calendar__transitLeft_d4htw","transitRight":"calendar__transitRight_d4htw","sharpTransitLeft":"calendar__sharpTransitLeft_d4htw","sharpTransitRight":"calendar__sharpTransitRight_d4htw","daysEnter":"calendar__daysEnter_d4htw","left":"calendar__left_d4htw","daysEnterActive":"calendar__daysEnterActive_d4htw","daysExit":"calendar__daysExit_d4htw","daysExitActive":"calendar__daysExitActive_d4htw","right":"calendar__right_d4htw","dot":"calendar__dot_d4htw"};
+var styles = {"daysTable":"calendar__daysTable_1dhmz","responsive":"calendar__responsive_1dhmz","dayName":"calendar__dayName_1dhmz","day":"calendar__day_1dhmz","rounded":"calendar__rounded_1dhmz","rectangular":"calendar__rectangular_1dhmz","highlighted":"calendar__highlighted_1dhmz","range":"calendar__range_1dhmz","disabled":"calendar__disabled_1dhmz","holiday":"calendar__holiday_1dhmz","today":"calendar__today_1dhmz","rangeComplete":"calendar__rangeComplete_1dhmz","selected":"calendar__selected_1dhmz","dayWrapper":"calendar__dayWrapper_1dhmz","cursorPointer":"calendar__cursorPointer_1dhmz","rangeEnd":"calendar__rangeEnd_1dhmz","rangeStart":"calendar__rangeStart_1dhmz","transitLeft":"calendar__transitLeft_1dhmz","transitRight":"calendar__transitRight_1dhmz","sharpTransitLeft":"calendar__sharpTransitLeft_1dhmz","sharpTransitRight":"calendar__sharpTransitRight_1dhmz","daysEnter":"calendar__daysEnter_1dhmz","left":"calendar__left_1dhmz","daysEnterActive":"calendar__daysEnterActive_1dhmz","daysExit":"calendar__daysExit_1dhmz","daysExitActive":"calendar__daysExitActive_1dhmz","right":"calendar__right_1dhmz","dayAddons":"calendar__dayAddons_1dhmz","dayContent":"calendar__dayContent_1dhmz","addons":"calendar__addons_1dhmz","dot":"calendar__dot_1dhmz","bottomAddon":"calendar__bottomAddon_1dhmz"};
 require('./index.css');
 
 var DaysTable = function (_a) {
     var _b;
-    var _c = _a.weeks, weeks = _c === void 0 ? [] : _c, _d = _a.activeMonth, activeMonth = _d === void 0 ? new Date() : _d, highlighted = _a.highlighted, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _e = _a.rangeComplete, rangeComplete = _e === void 0 ? selectedFrom && selectedTo : _e, getDayProps = _a.getDayProps, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive;
+    var _c = _a.weeks, weeks = _c === void 0 ? [] : _c, _d = _a.activeMonth, activeMonth = _d === void 0 ? new Date() : _d, highlighted = _a.highlighted, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _e = _a.rangeComplete, rangeComplete = _e === void 0 ? selectedFrom && selectedTo : _e, getDayProps = _a.getDayProps, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive, _g = _a.shape, shape = _g === void 0 ? 'rounded' : _g;
     var activeMonthRef = useRef(activeMonth);
     var directionRef = useRef();
     activeMonthRef.current = activeMonth;
@@ -49,7 +49,7 @@ var DaysTable = function (_a) {
         return WEEKDAYS.map(function (dayName) { return (React.createElement("th", { className: styles.dayName, key: dayName }, dayName)); });
     }, []);
     var renderDay = function (day, dayIdx) {
-        var _a, _b;
+        var _a, _b, _c;
         if (!day)
             return React.createElement("td", { key: dayIdx });
         var daySelected = day.selected ||
@@ -102,15 +102,20 @@ var DaysTable = function (_a) {
                     dayProps.ref(node);
                 }
             }, onClick: handleDayClick }),
-            React.createElement(Button, { type: 'button', view: 'ghost', size: 'xs', disabled: day.disabled, className: cn(styles.day, (_b = {},
+            React.createElement(Button, { type: 'button', view: 'ghost', size: 'xs', disabled: day.disabled, className: cn(styles.day, styles[shape], (_b = {},
+                    _b[styles.dayAddons] = day.dayAddon,
                     _b[styles.selected] = daySelected,
                     _b[styles.today] = isToday(day.date),
                     _b[styles.disabled] = day.disabled,
                     _b[styles.holiday] = !day.disabled && day.holiday,
                     _b[styles.highlighted] = dayHighlighted,
                     _b)) },
-                day.event && React.createElement("span", { className: styles.dot }),
-                day.date.getDate())));
+                React.createElement("span", { className: cn(styles.dayContent) }, day.date.getDate()),
+                React.createElement("span", { className: cn(styles.addons, (_c = {},
+                        _c[styles.dot] = day.event,
+                        _c[styles.bottomAddon] = day.dayAddon,
+                        _c[styles.selected] = daySelected,
+                        _c)) }, day.dayAddon))));
     };
     var renderWeek = function (week, weekIdx) { return (React.createElement("tr", { key: weekIdx }, week.map(renderDay))); };
     return (React.createElement("table", { className: cn(styles.daysTable, directionRef.current && styles[directionRef.current], (_b = {},