@steroidsjs/bootstrap 3.0.0-beta.101 → 3.0.0-beta.102

package/content/Calendar/CaptionElement.js

@@ -31,6 +31,7 @@ var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var upperFirst_1 = __importDefault(require("lodash-es/upperFirst"));
+var DateControlType_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/enums/DateControlType"));
 function CaptionElement(props) {
     var bem = (0, hooks_1.useBem)('CaptionElement');
     var localeUtils = props.localeUtils, locale = props.locale, fromYear = props.fromYear, toYear = props.toYear, date = props.date, isCaptionPanelVisible = props.isCaptionPanelVisible, toggleCaptionPanel = props.toggleCaptionPanel;
@@ -60,20 +61,22 @@ function CaptionElement(props) {
     var icons = (0, react_1.useMemo)(function () { return [
         {
             name: 'double_arrow_left',
+            sourceControl: DateControlType_1["default"].PREV_DOUBLE,
             onClick: function () { return handleYearChange(currentYear - 1); }
         },
         {
             name: 'arrow_left_24x24',
-            externalClass: 'one-arrow',
+            sourceControl: DateControlType_1["default"].PREV_ONE,
             onClick: function () { return handleMonthChange(currentMonth - 1); }
         },
         {
             name: 'arrow_right_24x24',
-            externalClass: 'one-arrow',
+            sourceControl: DateControlType_1["default"].NEXT_ONE,
             onClick: function () { return handleMonthChange(currentMonth + 1); }
         },
         {
             name: 'double_arrow_right',
+            sourceControl: DateControlType_1["default"].NEXT_DOUBLE,
             onClick: function () { return handleYearChange(currentYear + 1); }
         },
     ]; }, [currentYear, handleYearChange, currentMonth, handleMonthChange]);
@@ -91,7 +94,7 @@ function CaptionElement(props) {
             React.createElement("div", { className: bem.element('container-icons') }, icons.map(function (icon, iconIndex) { return (React.createElement(Icon_1["default"], { key: iconIndex, name: icon.name, onClick: function (e) {
                     e.preventDefault();
                     icon.onClick();
-                }, className: bem.element('button', icon.externalClass) })); }))),
+                }, className: bem.element('button'), "data-sourcecontrol": icon.sourceControl })); }))),
         isCaptionPanelVisible && (React.createElement("div", { className: bem.element('panel', { 'full-height': !props.showCalendarFooter }) },
             React.createElement("div", { className: bem.element('panel-header', 'months') }, __('Месяц')),
             React.createElement("div", { className: bem.element('panel-header', 'years') }, __('Год')),

package/content/CalendarSystem/AsideCalendars/AsideCalendars.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IEventGroup } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import './AsideCalendars.scss';
+interface IAsideCalendarsProps {
+    eventGroups: IEventGroup[];
+    eventGroupsTitle: string;
+    selectedCalendarGroupsIds: number[];
+    onChangeEventGroupsIds: (selectedIds: number[]) => void;
+}
+declare function AsideCalendars(props: IAsideCalendarsProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof AsideCalendars>;
+export default _default;

package/content/CalendarSystem/AsideCalendars/AsideCalendars.js

@@ -0,0 +1,41 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var form_1 = require("@steroidsjs/core/ui/form");
+require("./AsideCalendars.scss");
+function AsideCalendars(props) {
+    var bem = (0, useBem_1["default"])('AsideCalendars');
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement(content_1.Accordion, null,
+            react_1["default"].createElement(content_1.AccordionItem, { title: props.eventGroupsTitle },
+                react_1["default"].createElement(form_1.CheckboxListField, { items: props.eventGroups, selectedIds: props.selectedCalendarGroupsIds, onChange: function (selectedIds) { return props.onChangeEventGroupsIds(selectedIds); } })))));
+}
+exports["default"] = (0, react_1.memo)(AsideCalendars);

package/content/CalendarSystem/AsideCalendars/AsideCalendars.scss

@@ -0,0 +1,81 @@
+@use "style/variables";
+
+:root {
+    --calendar-system-icon-background-color: #f1f5f7;
+    --calendar-system-icon-chevron-color: #323232;
+}
+
+html[data-theme="dark"] {
+    --calendar-system-icon-background-color: #4b4e5e;
+    --calendar-system-separator-color: rgba(255, 255, 255, 0.1);
+}
+
+$calendar-system-icon-background-color: var(--calendar-system-icon-background-color);
+$calendar-system-separator-color: var(--calendar-system-separator-color);
+
+.AsideCalendars {
+    position: relative;
+
+    &::before {
+        content: "";
+        display: block;
+        position: relative;
+        height: 1px;
+        width: 100%;
+        margin: 32px 0px;
+
+        background-color: $calendar-system-separator-color;
+    }
+
+    .AccordionItemView {
+        width: 100%;
+
+        &_opened {
+            overflow: visible;
+        }
+
+        &__icon-chevron {
+            box-shadow: none;
+
+            svg {
+                rect {
+                    fill: $calendar-system-icon-background-color;
+                }
+                path {
+                    stroke: variables.$icon-color;
+                }
+            }
+        }
+
+        &__icon-wrapper {
+            top: 14px;
+        }
+
+        &__header-container {
+            background-color: variables.$element-background-color;
+        }
+
+        &__content {
+            padding: 0;
+            padding-top: 0;
+        }
+
+        &__content_visible {
+            padding: 0;
+            border: none;
+            overflow: visible;
+        }
+
+        &__title-container {
+            width: 238px;
+            padding-left: 0;
+            padding-top: 12px;
+
+            p {
+                font-size: variables.$font-size-16;
+                font-weight: variables.$font-weight-lg;
+                line-height: variables.$line-height-22;
+            }
+        }
+    }
+}

package/content/CalendarSystem/AsideCalendars/index.d.ts

@@ -0,0 +1,2 @@
+import AsideCalendars from './AsideCalendars';
+export default AsideCalendars;

package/content/CalendarSystem/AsideCalendars/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var AsideCalendars_1 = __importDefault(require("./AsideCalendars"));
+exports["default"] = AsideCalendars_1["default"];

package/content/CalendarSystem/AsideHeader/AsideHeader.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './AsideHeader.scss';
+interface IAsideHeaderProps {
+    onClick?: () => void;
+    className?: string;
+}
+declare function AsideHeader(props: IAsideHeaderProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof AsideHeader>;
+export default _default;

package/content/CalendarSystem/AsideHeader/AsideHeader.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Title_1 = __importDefault(require("@steroidsjs/core/ui/typography/Title/Title"));
+var form_1 = require("@steroidsjs/core/ui/form");
+require("./AsideHeader.scss");
+function AsideHeader(props) {
+    var bem = (0, useBem_1["default"])('AsideHeader');
+    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className) },
+        react_1["default"].createElement(Title_1["default"], { content: __('Календарь'), className: bem.element('title') }),
+        react_1["default"].createElement(form_1.Button, { icon: "add", size: "sm", label: __('Создать'), className: bem.element('create'), onClick: props.onClick })));
+}
+exports["default"] = (0, react_1.memo)(AsideHeader);

package/content/CalendarSystem/AsideHeader/AsideHeader.scss

@@ -0,0 +1,41 @@
+@use "style/variables";
+
+.AsideHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    
+    &__title {
+        font-size: variables.$font-size-24;
+        font-weight: variables.$font-weight-lg;
+        line-height: variables.$line-height-32;
+        color: variables.$text-color;
+        margin-bottom: 0;
+    }
+
+    .ButtonView {
+        width: 94px;
+        height: 34px;
+        border: none;
+        padding: 5px 12px;
+
+        &__label {
+            gap: 4px;
+        }
+
+        &__text {
+            font-size: variables.$font-size-14;
+            font-weight: variables.$font-weight-sm;
+            line-height: variables.$line-height-24;
+        }
+
+        &__icon {
+            margin: 0;
+            svg path,
+            rect,
+            circle {
+                stroke: #FFFFFF;
+            }
+        }
+    }
+}

package/content/CalendarSystem/AsideHeader/index.d.ts

@@ -0,0 +1,2 @@
+import AsideHeader from './AsideHeader';
+export default AsideHeader;

package/content/CalendarSystem/AsideHeader/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var AsideHeader_1 = __importDefault(require("./AsideHeader"));
+exports["default"] = AsideHeader_1["default"];

package/content/CalendarSystem/CalendarSystemModalView.d.ts

@@ -0,0 +1,3 @@
+import './CalendarSystemModalView.scss';
+import { ICalendarSystemModalViewProps } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+export default function CalendarSystemModalView(props: ICalendarSystemModalViewProps): JSX.Element;

package/content/CalendarSystem/CalendarSystemModalView.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+require("./CalendarSystemModalView.scss");
+var Modal_1 = __importDefault(require("@steroidsjs/core/ui/modal/Modal"));
+function CalendarSystemModalView(props) {
+    var bem = (0, useBem_1["default"])('CalendarSystemModalView');
+    return (react_1["default"].createElement(Modal_1["default"], { title: __('Новое событие'), onClose: props.onClose }));
+}
+exports["default"] = CalendarSystemModalView;

package/content/CalendarSystem/CalendarSystemModalView.scss

@@ -0,0 +1,5 @@
+@import 'style/variables';
+
+.CalendarSystemModalView {
+
+}

package/content/CalendarSystem/CalendarSystemView.d.ts

@@ -0,0 +1,2 @@
+import { ICalendarSystemViewProps } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+export default function CalendarSystemView(props: ICalendarSystemViewProps): JSX.Element;

package/content/CalendarSystem/CalendarSystemView.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar"));
+var CalendarType_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType"));
+var AsideHeader_1 = __importDefault(require("./AsideHeader"));
+var AsideCalendars_1 = __importDefault(require("./AsideCalendars"));
+var ContentHeader_1 = __importDefault(require("./ContentHeader"));
+var MonthGrid_1 = __importDefault(require("./MonthGrid"));
+var WeekGrid_1 = __importDefault(require("./WeekGrid"));
+function CalendarSystemView(props) {
+    var bem = (0, useBem_1["default"])('CalendarSystemView');
+    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: props.style },
+        react_1["default"].createElement("aside", { className: bem.element('aside') },
+            react_1["default"].createElement(AsideHeader_1["default"], { onClick: props.onClickCreate, className: bem.element('aside-header') }),
+            react_1["default"].createElement(Calendar_1["default"], { showFooter: false, onMonthChange: props.onMonthChange }),
+            react_1["default"].createElement(AsideCalendars_1["default"], { eventGroups: props.eventGroups, eventGroupsTitle: props.eventGroupsTitle, selectedCalendarGroupsIds: props.selectedCalendarGroups, onChangeEventGroupsIds: props.onChangeEventGroupsIds })),
+        react_1["default"].createElement("div", { className: bem.element('content') },
+            react_1["default"].createElement(ContentHeader_1["default"], { dateToDisplay: props.dateToDisplay, onChangeCalendarType: props.onChangeCalendarType, applyControl: props.applyControl }),
+            props.calendarType === CalendarType_1["default"].MONTH
+                ? (react_1["default"].createElement(MonthGrid_1["default"], { monthCalendarDays: props.monthCalendarDays, getEventsFromDate: props.getEventsFromDate, weekDays: props.weekDays }))
+                : (react_1["default"].createElement(WeekGrid_1["default"], { allHours: props.allHours, getEventsFromDate: props.getEventsFromDate, onClickHour: props.onClickHour, currentWeekDays: props.currentWeekDays })))));
+}
+exports["default"] = CalendarSystemView;

package/content/CalendarSystem/CalendarSystemView.scss

@@ -0,0 +1,50 @@
+@use 'style/variables';
+
+:root {
+    --calendar-system-content-background-color: #f1f5f7;
+}
+
+html[data-theme="dark"] {
+    --calendar-system-content-background-color: #101216;
+}
+
+$calendar-system-content-background-color: var(--calendar-system-content-background-color);
+
+.CalendarSystemView {
+    $root: &;
+    max-height: 1080px;
+
+    display: flex;
+    &__aside {
+        display: flex;
+        flex-flow: column nowrap;
+        flex-shrink: 0;
+        gap: 32px;
+        max-width: 310px;
+        padding: 12px;
+
+        background-color: variables.$element-background-color;
+
+        .CalendarView {
+            padding: 0;
+            border: none;
+
+            .DayPicker-WeekdaysRow {
+                gap: 8px;
+            }
+
+            .DayPicker-Week {
+                gap: 8px;
+            }
+        }
+    }
+
+    &__content {
+        background-color: $calendar-system-content-background-color;
+        width: 100%;
+        padding: 12px;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 11px;
+    }
+}

package/content/CalendarSystem/ContentHeader/ContentHeader.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './ContentHeader.scss';
+interface IContentHeaderProps {
+    dateToDisplay: string;
+    onChangeCalendarType: (newType: string) => void;
+    applyControl: (event: React.MouseEvent<HTMLElement>) => void;
+}
+declare function ContentHeader(props: IContentHeaderProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ContentHeader>;
+export default _default;

package/content/CalendarSystem/ContentHeader/ContentHeader.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Text_1 = __importDefault(require("@steroidsjs/core/ui/typography/Text/Text"));
+var nav_1 = require("@steroidsjs/core/ui/nav");
+var content_1 = require("@steroidsjs/core/ui/content");
+var DateControlType_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/enums/DateControlType"));
+var CalendarType_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType"));
+require("./ContentHeader.scss");
+function ContentHeader(props) {
+    var bem = (0, useBem_1["default"])('ContentHeader');
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement(Text_1["default"], { content: props.dateToDisplay, className: bem.element('month') }),
+        react_1["default"].createElement("ul", { className: bem.element('controls'), onClick: props.applyControl }, Object.entries(DateControlType_1["default"].getIcons()).map(function (_a, controlIndex) {
+            var controlLabel = _a[0], controlIcon = _a[1];
+            return (react_1["default"].createElement("li", { key: controlIndex, className: bem.element('controls-item'), "data-control": controlLabel },
+                react_1["default"].createElement(content_1.Icon, { className: bem.element('controls-item-icon'), name: controlIcon })));
+        })),
+        react_1["default"].createElement(nav_1.ButtonGroup, { className: bem.element('measures'), items: Object.entries(CalendarType_1["default"].getLabels()).map(function (_a) {
+                var _ = _a[0], label = _a[1];
+                return label;
+            }), onClick: props.onChangeCalendarType, defaultActiveButton: CalendarType_1["default"].getLabels()[CalendarType_1["default"].MONTH] })));
+}
+exports["default"] = react_1["default"].memo(ContentHeader);

package/content/CalendarSystem/ContentHeader/ContentHeader.scss

@@ -0,0 +1,57 @@
+@use "style/variables";
+
+:root {
+    --calendar-system-caption-arrow-background-color: #fff;
+    --calendar-system-caption-arrow-color: #323232;
+}
+
+html[data-theme="dark"] {
+    --calendar-system-caption-arrow-background-color: var(--gray);
+    --calendar-system-caption-arrow-color: #ffffff;
+}
+
+$calendar-system-caption-arrow-color: var(--calendar-system-caption-arrow-color);
+$calendar-system-caption-arrow-background-color: var(--calendar-system-caption-arrow-background-color);
+
+.ContentHeader {
+    display: flex;
+    align-items: center;
+
+    &__month {
+        display: inline-block;
+        font-size: variables.$font-size-24;
+        font-weight: variables.$font-weight-lg;
+        line-height: variables.$line-height-32;
+        margin-right: 93px;
+        margin-bottom: 0;
+        width: 190px;
+    }
+
+    &__controls {
+        display: inline-flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        margin-right: auto;
+        gap: 8px;
+
+        &-item {
+            cursor: pointer;
+
+            svg {
+                path {
+                    stroke: $calendar-system-caption-arrow-color;
+                }
+                rect {
+                    fill: $calendar-system-caption-arrow-background-color;
+                }
+            }
+
+            &-icon { 
+                pointer-events: none;
+            }
+        }
+    }
+
+    &__measures {
+    }
+}

package/content/CalendarSystem/ContentHeader/index.d.ts

@@ -0,0 +1,2 @@
+import ContentHeader from './ContentHeader';
+export default ContentHeader;

package/content/CalendarSystem/ContentHeader/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var ContentHeader_1 = __importDefault(require("./ContentHeader"));
+exports["default"] = ContentHeader_1["default"];

package/content/CalendarSystem/MonthGrid/MonthGrid.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import CalendarEnum from '@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType';
+import './MonthGrid.scss';
+interface IMonthGridProps {
+    monthCalendarDays: IDay[];
+    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
+    weekDays: string[];
+}
+declare function MonthGrid(props: IMonthGridProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof MonthGrid>;
+export default _default;

package/content/CalendarSystem/MonthGrid/MonthGrid.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var CalendarType_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType"));
+require("./MonthGrid.scss");
+function MonthGrid(props) {
+    var bem = (0, useBem_1["default"])('MonthGrid');
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement("div", { className: bem.element('week-days') }, props.weekDays.map(function (day, dayIndex) { return (react_1["default"].createElement("span", { key: dayIndex, className: bem.element('week-days-day') }, day)); })),
+        react_1["default"].createElement("div", { className: bem.element('grid') }, props.monthCalendarDays.map(function (day, dayIndex) {
+            var _a;
+            return (react_1["default"].createElement("div", { key: dayIndex, className: bem.element('day', {
+                    outOfRange: day.outOfRange,
+                    isToday: day.isToday
+                }) },
+                react_1["default"].createElement("div", { className: bem.element('day-wrapper') },
+                    react_1["default"].createElement("span", { className: bem.element('day-number') }, day.dayNumber.toString()),
+                    react_1["default"].createElement("div", { className: bem.element('day-content') }, (_a = props.getEventsFromDate(day.date, CalendarType_1["default"].MONTH)) === null || _a === void 0 ? void 0 : _a.map(function (event, eventIndex) { return (react_1["default"].createElement("span", { key: eventIndex, className: bem.element('day-event'), title: event.title },
+                        react_1["default"].createElement("span", { className: bem.element('day-event-dot'), style: { backgroundColor: event.color } }),
+                        event.title)); })))));
+        }))));
+}
+exports["default"] = (0, react_1.memo)(MonthGrid);