@egov3/system-design 1.3.121 → 1.3.122

package/dist/cjs/components/Calendar/Body/CalendarBody.module.css.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var css_248z = ".CalendarBody-module_wrapper__fd17C {\n  display: flex;\n  flex-direction: column;\n  color: var(--text-disabled-color);\n}\n\n.CalendarBody-module_weekDays__zXG3- {\n  height: 24px;\n}\n\n.CalendarBody-module_grid__HNGTZ,\n.CalendarBody-module_weekDays__zXG3- {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  column-gap: calc((100% - 7 * 28px) / 6);\n  text-align: center;\n}\n\n.CalendarBody-module_weekDay__hzksZ,\n.CalendarBody-module_day__0KNDZ {\n  width: 28px;\n}\n\n.CalendarBody-module_day__0KNDZ {\n  cursor: pointer;\n  color: var(--text-primary);\n  height: 28px;\n}\n\n.CalendarBody-module_muted__8XysY {\n  color: var(--text-disabled-color);\n}\n\n.CalendarBody-module_selected__86UkJ {\n  background-color: var(--surface-accent);\n  color: var(--text-white-nonconvert-color);\n  border-radius: 100px;\n}\n";
-var styles = {"wrapper":"CalendarBody-module_wrapper__fd17C","weekDays":"CalendarBody-module_weekDays__zXG3-","grid":"CalendarBody-module_grid__HNGTZ","weekDay":"CalendarBody-module_weekDay__hzksZ","day":"CalendarBody-module_day__0KNDZ","muted":"CalendarBody-module_muted__8XysY","selected":"CalendarBody-module_selected__86UkJ"};
+var css_248z = ".CalendarBody-module_wrapper__fd17C {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  color: var(--text-disabled-color);\n}\n\n.CalendarBody-module_header__33b3Q {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.CalendarBody-module_monthYear__efUvQ {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  color: var(--text-primary);\n}\n\n.CalendarBody-module_yearButton__Y76y1 {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.CalendarBody-module_navButton__cGVVz {\n  padding: 0;\n  cursor: pointer;\n}\n\n.CalendarBody-module_weekDays__zXG3- {\n  height: 24px;\n}\n\n.CalendarBody-module_grid__HNGTZ,\n.CalendarBody-module_weekDays__zXG3- {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  column-gap: calc((100% - 7 * 28px) / 6);\n  text-align: center;\n}\n\n.CalendarBody-module_weekDay__hzksZ,\n.CalendarBody-module_day__0KNDZ {\n  width: 28px;\n}\n\n.CalendarBody-module_day__0KNDZ {\n  cursor: pointer;\n  color: var(--text-primary);\n  height: 28px;\n}\n\n.CalendarBody-module_muted__8XysY {\n  color: var(--text-disabled-color);\n}\n\n.CalendarBody-module_hiddenDay__mCCeF {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.CalendarBody-module_selected__86UkJ {\n  background-color: var(--surface-accent);\n  color: var(--text-white-nonconvert-color);\n  border-radius: 100px;\n}\n";
+var styles = {"wrapper":"CalendarBody-module_wrapper__fd17C","header":"CalendarBody-module_header__33b3Q","monthYear":"CalendarBody-module_monthYear__efUvQ","yearButton":"CalendarBody-module_yearButton__Y76y1","navButton":"CalendarBody-module_navButton__cGVVz","weekDays":"CalendarBody-module_weekDays__zXG3-","grid":"CalendarBody-module_grid__HNGTZ","weekDay":"CalendarBody-module_weekDay__hzksZ","day":"CalendarBody-module_day__0KNDZ","hiddenDay":"CalendarBody-module_hiddenDay__mCCeF","selected":"CalendarBody-module_selected__86UkJ"};
 function styleInject(css, options) {
     if (typeof document === 'undefined') return;
     const head = document.head || document.getElementsByTagName('head')[0];

package/dist/cjs/components/Calendar/Body/index.js

@@ -1,36 +1,32 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var graphics = require('@egov3/graphics');
 var index = require('../../../baseComponents/index.js');
+var getMonthNameProper = require('../../../utils/date/getMonthNameProper.js');
 var joinClasses = require('../../../utils/joinClasses.js');
+var useCalendar = require('../../../customHooks/useCalendar.js');
 var CalendarBody_module = require('./CalendarBody.module.css.js');
 
 const WEEK_DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
-const CELL_COUNT = 42;
-const isSameDate = (left, right) => left.getFullYear() === right.getFullYear() &&
-    left.getMonth() === right.getMonth() &&
-    left.getDate() === right.getDate();
-const getCalendarDays = (month, year, selectedDate) => {
-    const firstDayIndex = (new Date(year, month, 1).getDay() + 6) % 7;
-    const startDate = new Date(year, month, 1 - firstDayIndex);
-    const today = new Date();
-    return Array.from({ length: CELL_COUNT }, (_, index) => {
-        const date = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + index);
-        return {
-            date,
-            day: date.getDate(),
-            isCurrentMonth: date.getMonth() === month,
-            isToday: isSameDate(date, today),
-            isSelected: selectedDate ? isSameDate(date, selectedDate) : false,
-        };
+const CalendarBody = ({ month = new Date().getMonth(), year = new Date().getFullYear(), selectedDate = null, onDayClick, onMonthChange, }) => {
+    const { days, visibleMonth, visibleYear, changeMonth } = useCalendar.useCalendarBody({
+        month,
+        year,
+        selectedDate,
+        onMonthChange,
     });
-};
-const CalendarBody = ({ month = new Date().getMonth(), year = new Date().getFullYear(), selectedDate = null, onDayClick, }) => {
-    const days = getCalendarDays(month, year, selectedDate);
-    return (jsxRuntime.jsxs("div", { className: CalendarBody_module.default.wrapper, "data-testid": "CalendarBody", children: [jsxRuntime.jsx("div", { className: CalendarBody_module.default.weekDays, children: WEEK_DAYS.map((day) => (jsxRuntime.jsx(index.BaseComponents.Typography, { tag: "span", fontClass: "body2Medium", className: CalendarBody_module.default.weekDay, children: day }, day))) }), jsxRuntime.jsx("div", { className: CalendarBody_module.default.grid, children: days.map((cell) => {
-                    return (jsxRuntime.jsx("button", { type: "button", className: joinClasses.joinClasses(CalendarBody_module.default.day, !cell.isCurrentMonth && CalendarBody_module.default.muted, cell.isToday && CalendarBody_module.default.today, cell.isSelected && CalendarBody_module.default.selected), onClick: () => {
-                            onDayClick?.(cell.date);
-                        }, "data-testid": `CalendarBody_DAY_${cell.date.toISOString().slice(0, 10)}`, children: jsxRuntime.jsx(index.BaseComponents.Typography, { tag: "span", fontClass: "body2Medium", children: cell.day }) }, cell.date.toISOString()));
+    const monthName = getMonthNameProper.getMonthNameProper(visibleMonth);
+    return (jsxRuntime.jsxs("div", { className: CalendarBody_module.default.wrapper, "data-testid": "CalendarBody", children: [jsxRuntime.jsxs("div", { className: CalendarBody_module.default.header, children: [jsxRuntime.jsxs("div", { className: CalendarBody_module.default.monthYear, "data-testid": "Calendar_MONTH_YEAR_LABEL", children: [jsxRuntime.jsx(index.BaseComponents.Typography, { tag: "span", fontClass: "body1Medium", "data-testid": "CalendarBody_MONTH_YEAR", children: monthName }), jsxRuntime.jsxs("button", { className: CalendarBody_module.default.yearButton, type: "button", onClick: () => { }, "data-testid": "Calendar_CHOOSE_YEAR_BTN", children: [jsxRuntime.jsx(index.BaseComponents.Typography, { tag: "span", fontClass: "body1Medium", "data-testid": "Calendar_CURRENT_YEAR", children: visibleYear }), jsxRuntime.jsx(graphics.Icons.Basic.ChevronDownSmall, { width: "24px", height: "24px", fill: "var(--icon-accent-color)" })] })] }), jsxRuntime.jsx("button", { className: CalendarBody_module.default.navButton, type: "button", onClick: () => {
+                            changeMonth(-1);
+                        }, "data-testid": "Calendar_PREV_MONTH_BTN", children: jsxRuntime.jsx(graphics.Icons.Basic.ChevronLeft, { width: "24px", height: "24px", fill: "var(--icon-accent-color)" }) }), jsxRuntime.jsx("button", { className: CalendarBody_module.default.navButton, type: "button", onClick: () => {
+                            changeMonth(1);
+                        }, "data-testid": "Calendar_NEXT_MONTH_BTN", children: jsxRuntime.jsx(graphics.Icons.Basic.ChevronRight, { width: "24px", height: "24px", fill: "var(--icon-accent-color)" }) })] }), jsxRuntime.jsx("div", { className: CalendarBody_module.default.weekDays, children: WEEK_DAYS.map((day) => (jsxRuntime.jsx(index.BaseComponents.Typography, { tag: "span", fontClass: "body2Medium", className: CalendarBody_module.default.weekDay, children: day }, day))) }), jsxRuntime.jsx("div", { className: CalendarBody_module.default.grid, children: days.map((cell) => {
+                    return (jsxRuntime.jsx("button", { type: "button", className: joinClasses.joinClasses(CalendarBody_module.default.day, !cell.isCurrentMonth && CalendarBody_module.default.hiddenDay, cell.isToday && CalendarBody_module.default.today, cell.isSelected && CalendarBody_module.default.selected), onClick: () => {
+                            if (cell.isCurrentMonth) {
+                                onDayClick?.(cell.date);
+                            }
+                        }, disabled: !cell.isCurrentMonth, "data-testid": `CalendarBody_DAY_${cell.date.toISOString().slice(0, 10)}`, children: cell.isCurrentMonth && (jsxRuntime.jsx(index.BaseComponents.Typography, { tag: "span", fontClass: "body2Medium", children: cell.day })) }, cell.date.toISOString()));
                 }) })] }));
 };
 

package/dist/cjs/components/Calendar/Body/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Calendar/Body/index.tsx"],"sourcesContent":[null],"names":["_jsxs","styles","_jsx","BaseComponents","joinClasses"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Calendar/Body/index.tsx"],"sourcesContent":[null],"names":["useCalendarBody","getMonthNameProper","_jsxs","styles","_jsx","BaseComponents","Icons","joinClasses"],"mappings":"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"}

package/dist/cjs/customHooks/useCalendar.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var React = require('react');
+var getDaysInMonth = require('../utils/date/getDaysInMonth.js');
+
+const TODAY = new Date();
+const isSameDate = (left, right) => left.getFullYear() === right.getFullYear() &&
+    left.getMonth() === right.getMonth() &&
+    left.getDate() === right.getDate();
+const buildCalendarDays = (month, year, selectedDate) => {
+    const firstDayIndex = (new Date(year, month, 1).getDay() + 6) % 7;
+    const daysInMonth = getDaysInMonth.getDaysInMonth(month, year);
+    const trailingDays = (7 - ((firstDayIndex + daysInMonth) % 7)) % 7;
+    const cellCount = firstDayIndex + daysInMonth + trailingDays;
+    const startDate = new Date(year, month, 1 - firstDayIndex);
+    return Array.from({ length: cellCount }, (_, index) => {
+        const date = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + index);
+        return {
+            date,
+            day: date.getDate(),
+            isCurrentMonth: date.getMonth() === month,
+            isToday: isSameDate(date, TODAY),
+            isSelected: selectedDate ? isSameDate(date, selectedDate) : false,
+        };
+    });
+};
+const useCalendarBody = ({ month, year, selectedDate, onMonthChange, }) => {
+    const [visibleDate, setVisibleDate] = React.useState(() => new Date(year, month, 1));
+    React.useEffect(() => {
+        setVisibleDate(new Date(year, month, 1));
+    }, [month, year]);
+    const visibleMonth = visibleDate.getMonth();
+    const visibleYear = visibleDate.getFullYear();
+    const days = React.useMemo(() => buildCalendarDays(visibleMonth, visibleYear, selectedDate), [visibleMonth, visibleYear, selectedDate]);
+    const changeMonth = (offset) => {
+        setVisibleDate((current) => {
+            const next = new Date(current.getFullYear(), current.getMonth() + offset, 1);
+            onMonthChange?.(next);
+            return next;
+        });
+    };
+    return { days, visibleMonth, visibleYear, changeMonth };
+};
+
+exports.useCalendarBody = useCalendarBody;
+//# sourceMappingURL=useCalendar.js.map

package/dist/cjs/customHooks/useCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalendar.js","sources":["../../../src/customHooks/useCalendar.tsx"],"sourcesContent":[null],"names":["getDaysInMonth","useState","useEffect","useMemo"],"mappings":";;;;;AAIA,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE;AASxB,MAAM,UAAU,GAAG,CAAC,IAAU,EAAE,KAAW,KACzC,IAAI,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC,WAAW,EAAE;AAC1C,IAAA,IAAI,CAAC,QAAQ,EAAE,KAAK,KAAK,CAAC,QAAQ,EAAE;IACpC,IAAI,CAAC,OAAO,EAAE,KAAK,KAAK,CAAC,OAAO,EAAE;AAEpC,MAAM,iBAAiB,GAAG,CACxB,KAAa,EACb,IAAY,EACZ,YAA0B,KACJ;IACtB,MAAM,aAAa,GAAG,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC;IACjE,MAAM,WAAW,GAAGA,6BAAc,CAAC,KAAK,EAAE,IAAI,CAAC;AAC/C,IAAA,MAAM,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC;AAClE,IAAA,MAAM,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,YAAY;AAC5D,IAAA,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,aAAa,CAAC;AAE1D,IAAA,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;QACpD,MAAM,IAAI,GAAG,IAAI,IAAI,CACnB,SAAS,CAAC,WAAW,EAAE,EACvB,SAAS,CAAC,QAAQ,EAAE,EACpB,SAAS,CAAC,OAAO,EAAE,GAAG,KAAK,CAC5B;QAED,OAAO;YACL,IAAI;AACJ,YAAA,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE;AACnB,YAAA,cAAc,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,KAAK;AACzC,YAAA,OAAO,EAAE,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC;AAChC,YAAA,UAAU,EAAE,YAAY,GAAG,UAAU,CAAC,IAAI,EAAE,YAAY,CAAC,GAAG,KAAK;SAClE;AACH,IAAA,CAAC,CAAC;AACJ,CAAC;AAEM,MAAM,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,aAAa,GACS,KAAI;IAC1B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGC,cAAQ,CAC5C,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAC/B;IAEDC,eAAS,CAAC,MAAK;QACb,cAAc,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;AAC1C,IAAA,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AAEjB,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,EAAE;AAC3C,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,WAAW,EAAE;IAE7C,MAAM,IAAI,GAAGC,aAAO,CAClB,MAAM,iBAAiB,CAAC,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,EAChE,CAAC,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,CAC1C;AAED,IAAA,MAAM,WAAW,GAAG,CAAC,MAAc,KAAI;AACrC,QAAA,cAAc,CAAC,CAAC,OAAO,KAAI;AACzB,YAAA,MAAM,IAAI,GAAG,IAAI,IAAI,CACnB,OAAO,CAAC,WAAW,EAAE,EACrB,OAAO,CAAC,QAAQ,EAAE,GAAG,MAAM,EAC3B,CAAC,CACF;AACD,YAAA,aAAa,GAAG,IAAI,CAAC;AACrB,YAAA,OAAO,IAAI;AACb,QAAA,CAAC,CAAC;AACJ,IAAA,CAAC;IAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE;AACzD;;;;"}

package/dist/cjs/utils/date/getDaysInMonth.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const getDaysInMonth = (month, year) => {
+    return new Date(year, month + 1, 0).getDate();
+};
+
+exports.getDaysInMonth = getDaysInMonth;
+//# sourceMappingURL=getDaysInMonth.js.map

package/dist/cjs/utils/date/getDaysInMonth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDaysInMonth.js","sources":["../../../../src/utils/date/getDaysInMonth.tsx"],"sourcesContent":[null],"names":[],"mappings":";;MAAa,cAAc,GAAG,CAAC,KAAa,EAAE,IAAY,KAAY;AACpE,IAAA,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE;AAC/C;;;;"}

package/dist/cjs/utils/date/getMonthNameProper.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index.js');
+
+const getMonthNameProper = (month) => {
+    const monthName = new Date(index.currentYear, month).toLocaleString("ru-RU", {
+        month: "long",
+    });
+    return monthName.charAt(0).toUpperCase() + monthName.slice(1);
+};
+
+exports.getMonthNameProper = getMonthNameProper;
+//# sourceMappingURL=getMonthNameProper.js.map

package/dist/cjs/utils/date/getMonthNameProper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMonthNameProper.js","sources":["../../../../src/utils/date/getMonthNameProper.tsx"],"sourcesContent":[null],"names":["currentYear"],"mappings":";;;;AAEO,MAAM,kBAAkB,GAAG,CAAC,KAAa,KAAY;AAC1D,IAAA,MAAM,SAAS,GAAG,IAAI,IAAI,CAACA,iBAAW,EAAE,KAAK,CAAC,CAAC,cAAc,CAAC,OAAO,EAAE;AACrE,QAAA,KAAK,EAAE,MAAM;AACd,KAAA,CAAC;AACF,IAAA,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;AAC/D;;;;"}

package/dist/cjs/utils/date/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+new Date(0).getFullYear();
+const currentYear = new Date().getFullYear();
+new Date().getMonth();
+new Date().getDate();
+
+exports.currentYear = currentYear;
+//# sourceMappingURL=index.js.map

package/dist/cjs/utils/date/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/utils/date/index.tsx"],"sourcesContent":[null],"names":[],"mappings":";;AAAuB,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW;AAIvC,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW;AACrB,IAAI,IAAI,EAAE,CAAC,QAAQ;AACrB,IAAI,IAAI,EAAE,CAAC,OAAO;;;;"}

package/dist/esm/components/Calendar/Body/CalendarBody.module.css.js

@@ -1,5 +1,5 @@
-var css_248z = ".CalendarBody-module_wrapper__fd17C {\n  display: flex;\n  flex-direction: column;\n  color: var(--text-disabled-color);\n}\n\n.CalendarBody-module_weekDays__zXG3- {\n  height: 24px;\n}\n\n.CalendarBody-module_grid__HNGTZ,\n.CalendarBody-module_weekDays__zXG3- {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  column-gap: calc((100% - 7 * 28px) / 6);\n  text-align: center;\n}\n\n.CalendarBody-module_weekDay__hzksZ,\n.CalendarBody-module_day__0KNDZ {\n  width: 28px;\n}\n\n.CalendarBody-module_day__0KNDZ {\n  cursor: pointer;\n  color: var(--text-primary);\n  height: 28px;\n}\n\n.CalendarBody-module_muted__8XysY {\n  color: var(--text-disabled-color);\n}\n\n.CalendarBody-module_selected__86UkJ {\n  background-color: var(--surface-accent);\n  color: var(--text-white-nonconvert-color);\n  border-radius: 100px;\n}\n";
-var styles = {"wrapper":"CalendarBody-module_wrapper__fd17C","weekDays":"CalendarBody-module_weekDays__zXG3-","grid":"CalendarBody-module_grid__HNGTZ","weekDay":"CalendarBody-module_weekDay__hzksZ","day":"CalendarBody-module_day__0KNDZ","muted":"CalendarBody-module_muted__8XysY","selected":"CalendarBody-module_selected__86UkJ"};
+var css_248z = ".CalendarBody-module_wrapper__fd17C {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  color: var(--text-disabled-color);\n}\n\n.CalendarBody-module_header__33b3Q {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.CalendarBody-module_monthYear__efUvQ {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  color: var(--text-primary);\n}\n\n.CalendarBody-module_yearButton__Y76y1 {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.CalendarBody-module_navButton__cGVVz {\n  padding: 0;\n  cursor: pointer;\n}\n\n.CalendarBody-module_weekDays__zXG3- {\n  height: 24px;\n}\n\n.CalendarBody-module_grid__HNGTZ,\n.CalendarBody-module_weekDays__zXG3- {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  column-gap: calc((100% - 7 * 28px) / 6);\n  text-align: center;\n}\n\n.CalendarBody-module_weekDay__hzksZ,\n.CalendarBody-module_day__0KNDZ {\n  width: 28px;\n}\n\n.CalendarBody-module_day__0KNDZ {\n  cursor: pointer;\n  color: var(--text-primary);\n  height: 28px;\n}\n\n.CalendarBody-module_muted__8XysY {\n  color: var(--text-disabled-color);\n}\n\n.CalendarBody-module_hiddenDay__mCCeF {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.CalendarBody-module_selected__86UkJ {\n  background-color: var(--surface-accent);\n  color: var(--text-white-nonconvert-color);\n  border-radius: 100px;\n}\n";
+var styles = {"wrapper":"CalendarBody-module_wrapper__fd17C","header":"CalendarBody-module_header__33b3Q","monthYear":"CalendarBody-module_monthYear__efUvQ","yearButton":"CalendarBody-module_yearButton__Y76y1","navButton":"CalendarBody-module_navButton__cGVVz","weekDays":"CalendarBody-module_weekDays__zXG3-","grid":"CalendarBody-module_grid__HNGTZ","weekDay":"CalendarBody-module_weekDay__hzksZ","day":"CalendarBody-module_day__0KNDZ","hiddenDay":"CalendarBody-module_hiddenDay__mCCeF","selected":"CalendarBody-module_selected__86UkJ"};
 function styleInject(css, options) {
     if (typeof document === 'undefined') return;
     const head = document.head || document.getElementsByTagName('head')[0];

package/dist/esm/components/Calendar/Body/index.js

@@ -1,34 +1,30 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icons } from '@egov3/graphics';
 import { BaseComponents } from '../../../baseComponents/index.js';
+import { getMonthNameProper } from '../../../utils/date/getMonthNameProper.js';
 import { joinClasses } from '../../../utils/joinClasses.js';
+import { useCalendarBody } from '../../../customHooks/useCalendar.js';
 import styles from './CalendarBody.module.css.js';
 
 const WEEK_DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
-const CELL_COUNT = 42;
-const isSameDate = (left, right) => left.getFullYear() === right.getFullYear() &&
-    left.getMonth() === right.getMonth() &&
-    left.getDate() === right.getDate();
-const getCalendarDays = (month, year, selectedDate) => {
-    const firstDayIndex = (new Date(year, month, 1).getDay() + 6) % 7;
-    const startDate = new Date(year, month, 1 - firstDayIndex);
-    const today = new Date();
-    return Array.from({ length: CELL_COUNT }, (_, index) => {
-        const date = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + index);
-        return {
-            date,
-            day: date.getDate(),
-            isCurrentMonth: date.getMonth() === month,
-            isToday: isSameDate(date, today),
-            isSelected: selectedDate ? isSameDate(date, selectedDate) : false,
-        };
+const CalendarBody = ({ month = new Date().getMonth(), year = new Date().getFullYear(), selectedDate = null, onDayClick, onMonthChange, }) => {
+    const { days, visibleMonth, visibleYear, changeMonth } = useCalendarBody({
+        month,
+        year,
+        selectedDate,
+        onMonthChange,
     });
-};
-const CalendarBody = ({ month = new Date().getMonth(), year = new Date().getFullYear(), selectedDate = null, onDayClick, }) => {
-    const days = getCalendarDays(month, year, selectedDate);
-    return (jsxs("div", { className: styles.wrapper, "data-testid": "CalendarBody", children: [jsx("div", { className: styles.weekDays, children: WEEK_DAYS.map((day) => (jsx(BaseComponents.Typography, { tag: "span", fontClass: "body2Medium", className: styles.weekDay, children: day }, day))) }), jsx("div", { className: styles.grid, children: days.map((cell) => {
-                    return (jsx("button", { type: "button", className: joinClasses(styles.day, !cell.isCurrentMonth && styles.muted, cell.isToday && styles.today, cell.isSelected && styles.selected), onClick: () => {
-                            onDayClick?.(cell.date);
-                        }, "data-testid": `CalendarBody_DAY_${cell.date.toISOString().slice(0, 10)}`, children: jsx(BaseComponents.Typography, { tag: "span", fontClass: "body2Medium", children: cell.day }) }, cell.date.toISOString()));
+    const monthName = getMonthNameProper(visibleMonth);
+    return (jsxs("div", { className: styles.wrapper, "data-testid": "CalendarBody", children: [jsxs("div", { className: styles.header, children: [jsxs("div", { className: styles.monthYear, "data-testid": "Calendar_MONTH_YEAR_LABEL", children: [jsx(BaseComponents.Typography, { tag: "span", fontClass: "body1Medium", "data-testid": "CalendarBody_MONTH_YEAR", children: monthName }), jsxs("button", { className: styles.yearButton, type: "button", onClick: () => { }, "data-testid": "Calendar_CHOOSE_YEAR_BTN", children: [jsx(BaseComponents.Typography, { tag: "span", fontClass: "body1Medium", "data-testid": "Calendar_CURRENT_YEAR", children: visibleYear }), jsx(Icons.Basic.ChevronDownSmall, { width: "24px", height: "24px", fill: "var(--icon-accent-color)" })] })] }), jsx("button", { className: styles.navButton, type: "button", onClick: () => {
+                            changeMonth(-1);
+                        }, "data-testid": "Calendar_PREV_MONTH_BTN", children: jsx(Icons.Basic.ChevronLeft, { width: "24px", height: "24px", fill: "var(--icon-accent-color)" }) }), jsx("button", { className: styles.navButton, type: "button", onClick: () => {
+                            changeMonth(1);
+                        }, "data-testid": "Calendar_NEXT_MONTH_BTN", children: jsx(Icons.Basic.ChevronRight, { width: "24px", height: "24px", fill: "var(--icon-accent-color)" }) })] }), jsx("div", { className: styles.weekDays, children: WEEK_DAYS.map((day) => (jsx(BaseComponents.Typography, { tag: "span", fontClass: "body2Medium", className: styles.weekDay, children: day }, day))) }), jsx("div", { className: styles.grid, children: days.map((cell) => {
+                    return (jsx("button", { type: "button", className: joinClasses(styles.day, !cell.isCurrentMonth && styles.hiddenDay, cell.isToday && styles.today, cell.isSelected && styles.selected), onClick: () => {
+                            if (cell.isCurrentMonth) {
+                                onDayClick?.(cell.date);
+                            }
+                        }, disabled: !cell.isCurrentMonth, "data-testid": `CalendarBody_DAY_${cell.date.toISOString().slice(0, 10)}`, children: cell.isCurrentMonth && (jsx(BaseComponents.Typography, { tag: "span", fontClass: "body2Medium", children: cell.day })) }, cell.date.toISOString()));
                 }) })] }));
 };
 

package/dist/esm/components/Calendar/Body/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Calendar/Body/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Calendar/Body/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/customHooks/useCalendar.js

@@ -0,0 +1,44 @@
+import { useState, useEffect, useMemo } from 'react';
+import { getDaysInMonth } from '../utils/date/getDaysInMonth.js';
+
+const TODAY = new Date();
+const isSameDate = (left, right) => left.getFullYear() === right.getFullYear() &&
+    left.getMonth() === right.getMonth() &&
+    left.getDate() === right.getDate();
+const buildCalendarDays = (month, year, selectedDate) => {
+    const firstDayIndex = (new Date(year, month, 1).getDay() + 6) % 7;
+    const daysInMonth = getDaysInMonth(month, year);
+    const trailingDays = (7 - ((firstDayIndex + daysInMonth) % 7)) % 7;
+    const cellCount = firstDayIndex + daysInMonth + trailingDays;
+    const startDate = new Date(year, month, 1 - firstDayIndex);
+    return Array.from({ length: cellCount }, (_, index) => {
+        const date = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + index);
+        return {
+            date,
+            day: date.getDate(),
+            isCurrentMonth: date.getMonth() === month,
+            isToday: isSameDate(date, TODAY),
+            isSelected: selectedDate ? isSameDate(date, selectedDate) : false,
+        };
+    });
+};
+const useCalendarBody = ({ month, year, selectedDate, onMonthChange, }) => {
+    const [visibleDate, setVisibleDate] = useState(() => new Date(year, month, 1));
+    useEffect(() => {
+        setVisibleDate(new Date(year, month, 1));
+    }, [month, year]);
+    const visibleMonth = visibleDate.getMonth();
+    const visibleYear = visibleDate.getFullYear();
+    const days = useMemo(() => buildCalendarDays(visibleMonth, visibleYear, selectedDate), [visibleMonth, visibleYear, selectedDate]);
+    const changeMonth = (offset) => {
+        setVisibleDate((current) => {
+            const next = new Date(current.getFullYear(), current.getMonth() + offset, 1);
+            onMonthChange?.(next);
+            return next;
+        });
+    };
+    return { days, visibleMonth, visibleYear, changeMonth };
+};
+
+export { useCalendarBody };
+//# sourceMappingURL=useCalendar.js.map

package/dist/esm/customHooks/useCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalendar.js","sources":["../../../src/customHooks/useCalendar.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/esm/utils/date/getDaysInMonth.js

@@ -0,0 +1,6 @@
+const getDaysInMonth = (month, year) => {
+    return new Date(year, month + 1, 0).getDate();
+};
+
+export { getDaysInMonth };
+//# sourceMappingURL=getDaysInMonth.js.map

package/dist/esm/utils/date/getDaysInMonth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDaysInMonth.js","sources":["../../../../src/utils/date/getDaysInMonth.tsx"],"sourcesContent":[null],"names":[],"mappings":"MAAa,cAAc,GAAG,CAAC,KAAa,EAAE,IAAY,KAAY;AACpE,IAAA,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE;AAC/C;;;;"}

package/dist/esm/utils/date/getMonthNameProper.js

@@ -0,0 +1,11 @@
+import { currentYear } from './index.js';
+
+const getMonthNameProper = (month) => {
+    const monthName = new Date(currentYear, month).toLocaleString("ru-RU", {
+        month: "long",
+    });
+    return monthName.charAt(0).toUpperCase() + monthName.slice(1);
+};
+
+export { getMonthNameProper };
+//# sourceMappingURL=getMonthNameProper.js.map

package/dist/esm/utils/date/getMonthNameProper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMonthNameProper.js","sources":["../../../../src/utils/date/getMonthNameProper.tsx"],"sourcesContent":[null],"names":[],"mappings":";;AAEO,MAAM,kBAAkB,GAAG,CAAC,KAAa,KAAY;AAC1D,IAAA,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,cAAc,CAAC,OAAO,EAAE;AACrE,QAAA,KAAK,EAAE,MAAM;AACd,KAAA,CAAC;AACF,IAAA,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;AAC/D;;;;"}

package/dist/esm/utils/date/index.js

@@ -0,0 +1,7 @@
+new Date(0).getFullYear();
+const currentYear = new Date().getFullYear();
+new Date().getMonth();
+new Date().getDate();
+
+export { currentYear };
+//# sourceMappingURL=index.js.map

package/dist/esm/utils/date/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/utils/date/index.tsx"],"sourcesContent":[null],"names":[],"mappings":"AAAuB,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW;AAIvC,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW;AACrB,IAAI,IAAI,EAAE,CAAC,QAAQ;AACrB,IAAI,IAAI,EAAE,CAAC,OAAO;;;;"}

package/dist/types/components/Calendar/Body/index.d.ts

@@ -3,6 +3,7 @@ interface ICalendarBodyProps {
     year?: number;
     selectedDate?: Date | null;
     onDayClick?: (date: Date) => void;
+    onMonthChange?: (date: Date) => void;
 }
 
 export type { ICalendarBodyProps };

package/dist/types/index.d.ts

@@ -100,7 +100,7 @@ declare const SystemDesign: {
         ServiceCardComponent: ({ handleOrderService, badge, isNew, title, }: IServiceCardComponentProps) => react_jsx_runtime.JSX.Element;
         NotificationItem: ({ type, text, onClick, }: INotificationComponentProps) => react_jsx_runtime.JSX.Element;
         NotificationWrapper: ({ items, removeNotificationData, }: INotificationWrapperProps) => react_jsx_runtime.JSX.Element | null;
-        CalendarBody: ({ month, year, selectedDate, onDayClick, }: ICalendarBodyProps) => react_jsx_runtime.JSX.Element;
+        CalendarBody: ({ month, year, selectedDate, onDayClick, onMonthChange, }: ICalendarBodyProps) => react_jsx_runtime.JSX.Element;
     };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egov3/system-design",
-  "version": "1.3.121",
+  "version": "1.3.122",
   "type": "module",
   "main": "dist/cjs/index.js",
   "types": "dist/types/index.d.ts",