@steroidsjs/bootstrap 3.0.0-beta.12 → 3.0.0-beta.121

package/content/CalendarSystem/CalendarSystemModalView.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable implicit-arrow-linebreak */
+/* eslint-disable no-undef */
+var Modal_1 = __importDefault(require("@steroidsjs/core/ui/modal/Modal"));
+var form_1 = require("@steroidsjs/core/ui/form");
+var Text_1 = __importDefault(require("@steroidsjs/core/ui/typography/Text/Text"));
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+function CalendarSystemModalView(props) {
+    var bem = (0, useBem_1["default"])('CalendarSystemModalView');
+    var eventInitialValues = react_1["default"].useMemo(function () { return props.eventInitialValues; }, [props.eventInitialValues]);
+    var callOnEventSubmit = function (fields) {
+        return eventInitialValues && !props.isCreate ? props.onEventSubmit(fields, eventInitialValues) : props.onEventSubmit(fields);
+    };
+    return (react_1["default"].createElement(Modal_1["default"], { title: props.isCreate ? __('Новое событие') : __('Редактирование события'), onClose: props.onClose, className: bem.block(), shouldCloseOnEsc: true, shouldCloseOnOverlayClick: true },
+        react_1["default"].createElement(form_1.Form, { className: bem.element('default-form'), onSubmit: function (fields) {
+                callOnEventSubmit(fields);
+                props.onClose();
+            }, initialValues: eventInitialValues !== null && eventInitialValues !== void 0 ? eventInitialValues : null, submitLabel: props.isCreate ? __('Создать') : __('Сохранить') },
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(Text_1["default"], { content: __('Наименование'), className: bem.element('label') }),
+                react_1["default"].createElement(form_1.InputField, { attribute: 'title', required: true, className: bem.element('name-field') }),
+                react_1["default"].createElement(form_1.DropDownField, { attribute: 'eventGroupId', items: props.eventGroups, outline: true, placeholder: '\u0413\u0440\u0443\u043F\u043F\u0430', color: "primary", required: true, itemsContent: {
+                        type: 'checkbox'
+                    } })),
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(Text_1["default"], { content: __('Время и дата'), className: bem.element('label') }),
+                react_1["default"].createElement(form_1.DateTimeField, { attribute: 'date', required: true })),
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(Text_1["default"], { content: __('Описание'), className: bem.element('label') }),
+                react_1["default"].createElement(form_1.TextField, { attribute: 'description', required: true })))));
+}
+exports["default"] = CalendarSystemModalView;

package/content/CalendarSystem/CalendarSystemModalView.scss

@@ -0,0 +1,84 @@
+@use "style/variables";
+
+.CalendarSystemModalView {
+    $root: &;
+    width: 941px;
+
+    .FieldLayoutView {
+        margin-bottom: 0;
+    }
+
+    .ModalView__header {
+        .ModalView__title {
+            font-size: variables.$font-size-lg;
+            font-weight: variables.$font-weight-lg;
+            line-height: variables.$line-height-lg;
+        }
+    }
+
+    .ModalView__content {
+        padding: 0;
+    }
+
+    &__default-form {
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 16px;
+
+        > div {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+
+            gap: 12px;
+
+            &:nth-child(3) {
+                > .FieldLayoutView {
+                    width: calc(84%);
+
+                    .TextFieldView textarea {
+                        height: 160px;
+                    }
+                }
+            }
+        }
+
+        #{$root}__label {
+            align-self: flex-start;
+            margin-bottom: 0;
+            margin-right: 16px;
+            width: 140px;
+            height: 46px;
+        }
+
+        #{$root}__name-field {
+            width: 585px;
+        }
+
+        .ButtonView {
+            width: 120px;
+            padding: 11px 12px;
+        }
+
+        .InputFieldView {
+            max-width: 420px;
+        }
+
+        .DropDownFieldView_outline_primary {
+            width: 300px;
+            border-color: variables.$element-border-color;
+            background-color: variables.$element-field-background-color;
+
+            &:hover {
+                border-color: variables.$element-border-color;
+            }
+
+            .CheckboxFieldView__label-text {
+                display: -webkit-box;
+                overflow: hidden;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+            }
+        }
+    }
+}

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.openCreateModal, 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, openCreateEventGroupModal: props.openCreateEventGroupModal })),
+        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, openEditModal: props.openEditModal, openCreateModal: props.openCreateModal }))
+                : (react_1["default"].createElement(WeekGrid_1["default"], { allHours: props.allHours, getEventsFromDate: props.getEventsFromDate, currentWeekDays: props.currentWeekDays, openEditModal: props.openEditModal, openCreateModal: props.openCreateModal })))));
+}
+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,26 @@
+"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: CalendarType_1["default"], onClick: props.onChangeCalendarType, defaultActiveButton: 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,14 @@
+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[];
+    openEditModal: (event: IEvent) => void;
+    openCreateModal: (eventInitialDay?: IDay) => void;
+}
+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,39 @@
+"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"));
+require("./MonthGrid.scss");
+var MonthDay_1 = __importDefault(require("./views/MonthDay"));
+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) { return (react_1["default"].createElement(MonthDay_1["default"], { key: dayIndex, openEditModal: props.openEditModal, getEventsFromDate: props.getEventsFromDate, openCreateModal: props.openCreateModal, day: day })); }))));
+}
+exports["default"] = (0, react_1.memo)(MonthGrid);

package/content/CalendarSystem/MonthGrid/MonthGrid.scss

@@ -0,0 +1,41 @@
+@use "style/variables";
+
+:root {
+    --month-day-color-text: #000000;
+}
+
+html[data-theme="dark"] {
+    --month-day-color-text: #ffffff;
+}
+
+$month-day-color-text: var(--month-day-color-text);
+
+.MonthGrid {
+    display: flex;
+    flex-flow: column nowrap;
+    height: 100%;
+
+    &__grid {
+        flex-shrink: 0;
+        flex-grow: 1;
+        display: grid;
+        height: 90%;
+        gap: 5px;
+        grid-template-columns: repeat(7, 1fr);
+        grid-template-rows: repeat(6, auto);
+    }
+
+    &__week-days {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        text-align: right;
+
+        &-day {
+            color: $month-day-color-text;
+            font-size: variables.$font-size-14;
+            font-weight: variables.$font-weight-md;
+            line-height: variables.$line-height-18;
+            padding: 8px 10px;
+        }
+    }
+}

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

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

package/content/CalendarSystem/MonthGrid/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 MonthGrid_1 = __importDefault(require("./MonthGrid"));
+exports["default"] = MonthGrid_1["default"];

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

@@ -0,0 +1,11 @@
+import CalendarEnum from '@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType';
+import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import './MonthDay.scss';
+interface IMonthDayProps {
+    day: IDay;
+    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
+    openEditModal: (event: IEvent) => void;
+    openCreateModal: (eventInitialDay?: IDay) => void;
+}
+export default function MonthDay(props: IMonthDayProps): JSX.Element;
+export {};

package/content/CalendarSystem/MonthGrid/views/MonthDay/MonthDay.js

@@ -0,0 +1,73 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable @typescript-eslint/no-shadow */
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var CalendarType_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType"));
+var Tooltip_1 = __importDefault(require("@steroidsjs/core/ui/layout/Tooltip/Tooltip"));
+var slice_1 = __importDefault(require("lodash-es/slice"));
+var get_1 = __importDefault(require("lodash-es/get"));
+var form_1 = require("@steroidsjs/core/ui/form");
+var useExpandClickAway_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/hooks/useExpandClickAway"));
+var cloneDeep_1 = __importDefault(require("lodash-es/cloneDeep"));
+var getFormattedExpandLabel_1 = require("../../../../../utils/getFormattedExpandLabel");
+require("./MonthDay.scss");
+var SIXTH_ELEMENT_INDEX = 6;
+function MonthDay(props) {
+    var bem = (0, useBem_1["default"])('MonthDay');
+    var day = props.day, getEventsFromDate = props.getEventsFromDate;
+    var _a = (0, useExpandClickAway_1["default"])(), isExpanded = _a.isExpanded, setIsExpanded = _a.setIsExpanded, monthDayRef = _a.triggerRef;
+    var _b = react_1["default"].useMemo(function () {
+        var callingDate = new Date(props.day.date);
+        var events = getEventsFromDate(callingDate, CalendarType_1["default"].MONTH);
+        var dayHasMoreThanSixEvents = events.length > 6;
+        return {
+            events: events,
+            hasSixEvents: dayHasMoreThanSixEvents
+        };
+    }, [getEventsFromDate, props.day.date]), events = _b.events, hasSixEvents = _b.hasSixEvents;
+    var formattedExpandLabel = react_1["default"].useMemo(function () { return (0, getFormattedExpandLabel_1.getFormattedExpandRestLabel)((0, slice_1["default"])(__spreadArray([], events, true), SIXTH_ELEMENT_INDEX)); }, [events]);
+    var renderEvent = react_1["default"].useCallback(function (event, eventIndex) { return (react_1["default"].createElement(Tooltip_1["default"], { key: event.id, position: 'rightBottom', content: event.title, className: bem.element('tooltip') },
+        react_1["default"].createElement("span", { className: bem.element('event'), "data-eventid": event.id },
+            react_1["default"].createElement("span", { className: bem.element('event-dot'), style: { backgroundColor: event.color } }),
+            event.title))); }, [bem]);
+    var handleEventClick = react_1["default"].useCallback(function (event) {
+        var eventFromHour = event.target;
+        var eventId = (0, get_1["default"])(eventFromHour, 'dataset.eventid');
+        if (!eventId) {
+            return;
+        }
+        var requiredEvent = events.filter(function (hourEvent) { return hourEvent.id === Number(eventId); })[0];
+        props.openEditModal(requiredEvent);
+    }, [events, props]);
+    var handleOnContextMenuCreateClick = react_1["default"].useCallback(function (e) {
+        e.preventDefault();
+        var day = (0, cloneDeep_1["default"])(props.day);
+        day.date.setHours(0, 0, 0, 0);
+        props.openCreateModal(day);
+    }, [props]);
+    return (react_1["default"].createElement("div", { className: bem(bem.block({
+            outOfRange: day.outOfRange,
+            isToday: day.isToday
+        })), ref: monthDayRef, onClick: handleEventClick, onContextMenu: handleOnContextMenuCreateClick },
+        react_1["default"].createElement("div", { className: bem.element('wrapper') },
+            react_1["default"].createElement("span", { className: bem.element('number') }, day.dayNumber.toString()),
+            react_1["default"].createElement("div", { className: bem.element('content', {
+                    isExpanded: isExpanded
+                }) },
+                events.map(renderEvent),
+                hasSixEvents && !isExpanded && (react_1["default"].createElement(form_1.Button, { link: true, className: bem.element('expand-button'), onClick: function () { return setIsExpanded(true); } }, formattedExpandLabel))))));
+}
+exports["default"] = MonthDay;

package/content/CalendarSystem/MonthGrid/views/MonthDay/MonthDay.scss

@@ -0,0 +1,126 @@
+@use "style/variables";
+@use "../../../../../scss/mixins";
+
+:root {
+    --month-day-background-color: #ffffff;
+    --month-day-out-of-range-color: #f9fcff;
+    --month-day-color-text: #000000;
+    --month-day-out-of-range-color-text: rgba(0, 0, 0, 0.3);
+}
+
+html[data-theme="dark"] {
+    --month-day-background-color: #333646;
+    --month-day-out-of-range-color: #161b20;
+    --month-day-color-text: #ffffff;
+    --month-day-out-of-range-color-text: rgba(255, 255, 255, 0.3);
+}
+
+$month-day-background-color: var(--month-day-background-color);
+$month-day-out-of-range-color: var(--month-day-out-of-range-color);
+$month-day-color-text: var(--month-day-color-text);
+$month-day-out-of-range-color-text: var(--month-day-out-of-range-color-text);
+
+.MonthDay {
+    $dayRoot: &;
+    padding: 4px 8px 0px 8px;
+    min-height: 80px;
+    border-radius: variables.$radius-large;
+    background-color: $month-day-background-color;
+
+    &__wrapper {
+        display: block;
+        text-align: right;
+    }
+
+    &__number {
+        position: relative;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        font-size: variables.$font-size-14;
+        font-weight: variables.$font-weight-sm;
+        line-height: variables.$line-height-18;
+        color: $month-day-color-text;
+        width: 24px;
+        height: 24px;
+    }
+
+    &_outOfRange {
+        background-color: $month-day-out-of-range-color;
+
+        #{$dayRoot}__number {
+            color: $month-day-out-of-range-color-text;
+        }
+    }
+
+    &_isToday {
+        #{$dayRoot}__number {
+            &::before {
+                position: absolute;
+                content: "";
+                border: 1px solid variables.$primary;
+                display: block;
+                width: 100%;
+                height: 100%;
+                border-radius: variables.$radius-small;
+            }
+            color: variables.$primary;
+        }
+    }
+
+    &__content {
+        overflow: hidden;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 1px;
+
+        &_isExpanded {
+            #{$dayRoot}__event {
+                display: block;
+            }
+        }
+    }
+
+    &__event {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        font-size: variables.$font-size-xs;
+        font-weight: variables.$font-weight-sm;
+        line-height: variables.$line-height-xs;
+        color: variables.$text-color;
+
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        cursor: pointer;
+        text-align: left;
+
+        &:nth-child(n + 7) {
+            display: none;
+        }
+
+        &-dot {
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            margin-right: 8px;
+            border-radius: 100px;
+            pointer-events: none;
+        }
+    }
+
+    &__content_isExpanded {
+        #{$dayRoot}__event {
+            display: block;
+        }
+    }
+
+    &__tooltip {
+        @include mixins.calendar-tooltip();
+    }
+
+    &__expand-button {
+        @include mixins.expand-button();
+    }
+}

package/content/CalendarSystem/MonthGrid/views/MonthDay/index.d.ts

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

package/content/CalendarSystem/MonthGrid/views/MonthDay/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 MonthDay_1 = __importDefault(require("./MonthDay"));
+exports["default"] = MonthDay_1["default"];