@skbkontur/react-ui 0.0.0-95a1dbe516 → 0.0.0-9ab4f802f3

package/cjs/components/Calendar/MonthView.js

@@ -1,14 +1,39 @@
-"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.MonthView = MonthView;var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.MonthView = MonthView;exports.getMinMonth = exports.getMaxMonth = void 0;var _react = _interopRequireWildcard(require("react"));
 
 var _DateSelect = require("../../internal/DateSelect");
 var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunctions"));
 var _Emotion = require("../../lib/theming/Emotion");
+var _ResponsiveLayout = require("../../components/ResponsiveLayout");
 var _useTheme = require("../../lib/theming/useTheme");
 
+
 var _MonthView = require("./MonthView.styles");
 var _config = require("./config");
 var CDS = _interopRequireWildcard(require("./CalendarDateShape"));
 var _Calendar = require("./Calendar");
+var _CalendarContext = require("./CalendarContext");
+
+var getMinMonth = function getMinMonth(year, minDate) {
+  var min = 0;
+  for (var i = 0; i < 12; ++i) {
+    if (minDate && CDS.isGreaterOrEqual({ date: 31, month: i, year: year }, minDate)) {
+      min = i;
+      break;
+    }
+  }
+  return min;
+};exports.getMinMonth = getMinMonth;
+
+var getMaxMonth = function getMaxMonth(year, maxDate) {
+  var max = 11;
+  for (var i = 11; i >= 0; --i) {
+    if (maxDate && CDS.isLessOrEqual({ date: 1, month: i, year: year }, maxDate)) {
+      max = i;
+      break;
+    }
+  }
+  return max;
+};exports.getMaxMonth = getMaxMonth;
 
 
 
@@ -25,11 +50,11 @@ var _Calendar = require("./Calendar");
 
 
 
-
-
-function MonthView(props) {var _emotion$cx;
+function MonthView(props) {var _emotion$cx, _emotion$cx2;
   var theme = (0, _useTheme.useTheme)();
   var emotion = (0, _Emotion.useEmotion)();
+  var _useContext = (0, _react.useContext)(_CalendarContext.CalendarContext),minDate = _useContext.minDate,maxDate = _useContext.maxDate;
+  var _useResponsiveLayout = (0, _ResponsiveLayout.useResponsiveLayout)(),isMobile = _useResponsiveLayout.isMobile;
 
   var
   children =
@@ -43,9 +68,7 @@ function MonthView(props) {var _emotion$cx;
 
 
 
-
-
-  props.children,height = props.height,isFirstInYear = props.isFirstInYear,isLastInYear = props.isLastInYear,maxDate = props.maxDate,minDate = props.minDate,month = props.month,top = props.top,year = props.year,onMonthSelect = props.onMonthSelect,onYearSelect = props.onYearSelect,monthSelectRef = props.monthSelectRef,yearSelectRef = props.yearSelectRef;
+  props.children,height = props.height,isFirstInYear = props.isFirstInYear,isLastInYear = props.isLastInYear,month = props.month,top = props.top,year = props.year,onMonthSelect = props.onMonthSelect,onYearSelect = props.onYearSelect,monthSelectRef = props.monthSelectRef,yearSelectRef = props.yearSelectRef;
 
   var isTopNegative = top <= 0;
   var isHeaderSticky = isTopNegative && height >= -top;
@@ -57,56 +80,42 @@ function MonthView(props) {var _emotion$cx;
   var monthSelectDisabled = top > 40 || headerTop < 0 || headerTop >= height - (0, _config.themeConfig)(theme).MONTH_TITLE_HEIGHT;
   var yearSelectDisabled = top > 40 || isLastInYear && top < -height + (0, _config.themeConfig)(theme).MONTH_TITLE_HEIGHT;
 
-  var getMinMonth = function getMinMonth(value) {
-    var min = 0;
-    for (var i = 0; i < 12; ++i) {
-      if (minDate && CDS.isGreaterOrEqual({ date: 31, month: i, year: value }, minDate)) {
-        min = i;
-        break;
-      }
-    }
-    return min;
-  };
-
-  var getMaxMonth = function getMaxMonth(value) {
-    var max = 11;
-    for (var i = 11; i >= 0; --i) {
-      if (maxDate && CDS.isLessOrEqual({ date: 1, month: i, year: value }, maxDate)) {
-        max = i;
-        break;
-      }
-    }
-    return max;
-  };
   var styles = (0, _MonthView.getStyles)(emotion);
-
   return /*#__PURE__*/(
-    _react.default.createElement("div", { "data-tid": _Calendar.CalendarDataTids.month, className: styles.month(theme), style: { top: top }, key: month + '-' + year }, /*#__PURE__*/
+    _react.default.createElement("div", {
+      "data-tid": _Calendar.CalendarDataTids.month,
+      className: emotion.cx((_emotion$cx = {}, _emotion$cx[styles.month(theme)] = true, _emotion$cx[styles.monthMobile()] = isMobile, _emotion$cx)),
+      style: { top: top },
+      key: month + '-' + year }, /*#__PURE__*/
+
     _react.default.createElement("div", {
       style: { top: headerTop },
-      className: emotion.cx((_emotion$cx = {}, _emotion$cx[
-      styles.header()] = true, _emotion$cx[
-      styles.headerSticky(theme)] = isHeaderSticky, _emotion$cx)) }, /*#__PURE__*/
+      className: emotion.cx((_emotion$cx2 = {}, _emotion$cx2[
+      styles.header()] = true, _emotion$cx2[
+      styles.headerSticky(theme)] = isHeaderSticky, _emotion$cx2)) }, /*#__PURE__*/
 
 
     _react.default.createElement("div", { style: { borderBottomColor: borderBottomColor }, className: styles.monthTitle(theme) }, /*#__PURE__*/
     _react.default.createElement("div", { "data-tid": _Calendar.CalendarDataTids.headerMonth, className: styles.headerMonth(theme) }, /*#__PURE__*/
+
     _react.default.createElement(_DateSelect.DateSelect, {
       disabled: monthSelectDisabled,
-      width: 85,
+      width: isMobile ? '6em' : 85,
       type: "month",
       value: month,
       onValueChange: onMonthSelect,
       ref: !monthSelectDisabled ? monthSelectRef : undefined,
-      minValue: getMinMonth(year),
-      maxValue: getMaxMonth(year) })),
+      minValue: getMinMonth(year, minDate),
+      maxValue: getMaxMonth(year, maxDate) })),
+
 
 
     isYearVisible && /*#__PURE__*/
     _react.default.createElement("div", { "data-tid": _Calendar.CalendarDataTids.headerYear, className: styles.headerYear(theme), style: { top: yearTop } }, /*#__PURE__*/
+
     _react.default.createElement(_DateSelect.DateSelect, {
       disabled: yearSelectDisabled,
-      width: 50,
+      width: isMobile ? '3.5em' : 50,
       type: "year",
       value: year,
       minValue: minDate ? minDate.year : undefined,
@@ -118,6 +127,7 @@ function MonthView(props) {var _emotion$cx;
 
 
 
+
     children));
 
 

package/cjs/components/Calendar/MonthView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MonthView.tsx"],"names":["MonthView","props","theme","emotion","children","height","isFirstInYear","isLastInYear","maxDate","minDate","month","top","year","onMonthSelect","onYearSelect","monthSelectRef","yearSelectRef","isTopNegative","isHeaderSticky","headerTop","Math","min","MONTH_TITLE_HEIGHT","alpha","borderBottomColor","ColorFunctions","fade","calendarMonthTitleBorderBottomColor","isYearVisible","yearTop","monthSelectDisabled","yearSelectDisabled","getMinMonth","value","i","CDS","isGreaterOrEqual","date","getMaxMonth","max","isLessOrEqual","styles","CalendarDataTids","cx","header","headerSticky","monthTitle","headerMonth","undefined","headerYear"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { DateSelect } from '../../internal/DateSelect';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { getStyles } from './MonthView.styles';\nimport { themeConfig } from './config';\nimport * as CDS from './CalendarDateShape';\nimport { CalendarDataTids } from './Calendar';\n\ninterface MonthViewProps {\n  children: React.ReactNode;\n  firstDayOffset: number;\n  height: number;\n  isFirstInYear?: boolean;\n  isLastInYear?: boolean;\n  maxDate?: CDS.CalendarDateShape;\n  minDate?: CDS.CalendarDateShape;\n  month: number;\n  top: number;\n  year: number;\n  onMonthSelect: (month: number) => void;\n  onYearSelect: (month: number) => void;\n  monthSelectRef: (select: DateSelect | null) => void;\n  yearSelectRef: (select: DateSelect | null) => void;\n}\n\nexport function MonthView(props: MonthViewProps) {\n  const theme = useTheme();\n  const emotion = useEmotion();\n\n  const {\n    children,\n    height,\n    isFirstInYear,\n    isLastInYear,\n    maxDate,\n    minDate,\n    month,\n    top,\n    year,\n    onMonthSelect,\n    onYearSelect,\n    monthSelectRef,\n    yearSelectRef,\n  } = props;\n\n  const isTopNegative = top <= 0;\n  const isHeaderSticky = isTopNegative && height >= -top;\n  const headerTop = isHeaderSticky ? Math.min(-top, height - themeConfig(theme).MONTH_TITLE_HEIGHT) : 0;\n  const alpha = isHeaderSticky ? (height + top - themeConfig(theme).MONTH_TITLE_HEIGHT) / 10 : 1;\n  const borderBottomColor = ColorFunctions.fade(theme.calendarMonthTitleBorderBottomColor, alpha);\n  const isYearVisible = isFirstInYear || isHeaderSticky;\n  const yearTop = isHeaderSticky && !isLastInYear ? -headerTop - top : 0;\n  const monthSelectDisabled = top > 40 || headerTop < 0 || headerTop >= height - themeConfig(theme).MONTH_TITLE_HEIGHT;\n  const yearSelectDisabled = top > 40 || (isLastInYear && top < -height + themeConfig(theme).MONTH_TITLE_HEIGHT);\n\n  const getMinMonth = (value: number) => {\n    let min = 0;\n    for (let i = 0; i < 12; ++i) {\n      if (minDate && CDS.isGreaterOrEqual({ date: 31, month: i, year: value }, minDate)) {\n        min = i;\n        break;\n      }\n    }\n    return min;\n  };\n\n  const getMaxMonth = (value: number) => {\n    let max = 11;\n    for (let i = 11; i >= 0; --i) {\n      if (maxDate && CDS.isLessOrEqual({ date: 1, month: i, year: value }, maxDate)) {\n        max = i;\n        break;\n      }\n    }\n    return max;\n  };\n  const styles = getStyles(emotion);\n\n  return (\n    <div data-tid={CalendarDataTids.month} className={styles.month(theme)} style={{ top }} key={month + '-' + year}>\n      <div\n        style={{ top: headerTop }}\n        className={emotion.cx({\n          [styles.header()]: true,\n          [styles.headerSticky(theme)]: isHeaderSticky,\n        })}\n      >\n        <div style={{ borderBottomColor }} className={styles.monthTitle(theme)}>\n          <div data-tid={CalendarDataTids.headerMonth} className={styles.headerMonth(theme)}>\n            <DateSelect\n              disabled={monthSelectDisabled}\n              width={85}\n              type=\"month\"\n              value={month}\n              onValueChange={onMonthSelect}\n              ref={!monthSelectDisabled ? monthSelectRef : undefined}\n              minValue={getMinMonth(year)}\n              maxValue={getMaxMonth(year)}\n            />\n          </div>\n          {isYearVisible && (\n            <div data-tid={CalendarDataTids.headerYear} className={styles.headerYear(theme)} style={{ top: yearTop }}>\n              <DateSelect\n                disabled={yearSelectDisabled}\n                width={50}\n                type=\"year\"\n                value={year}\n                minValue={minDate ? minDate.year : undefined}\n                maxValue={maxDate ? maxDate.year : undefined}\n                onValueChange={onYearSelect}\n                ref={!yearSelectDisabled ? yearSelectRef : undefined}\n              />\n            </div>\n          )}\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["MonthView.tsx"],"names":["getMinMonth","year","minDate","min","i","CDS","isGreaterOrEqual","date","month","getMaxMonth","maxDate","max","isLessOrEqual","MonthView","props","theme","emotion","CalendarContext","isMobile","children","height","isFirstInYear","isLastInYear","top","onMonthSelect","onYearSelect","monthSelectRef","yearSelectRef","isTopNegative","isHeaderSticky","headerTop","Math","MONTH_TITLE_HEIGHT","alpha","borderBottomColor","ColorFunctions","fade","calendarMonthTitleBorderBottomColor","isYearVisible","yearTop","monthSelectDisabled","yearSelectDisabled","styles","CalendarDataTids","cx","monthMobile","header","headerSticky","monthTitle","headerMonth","undefined","headerYear"],"mappings":"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","sourcesContent":["import React, { useContext } from 'react';\n\nimport { DateSelect } from '../../internal/DateSelect';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../../components/ResponsiveLayout';\nimport { useTheme } from '../../lib/theming/useTheme';\nimport { Nullable } from '../..//typings/utility-types';\n\nimport { getStyles } from './MonthView.styles';\nimport { themeConfig } from './config';\nimport * as CDS from './CalendarDateShape';\nimport { CalendarDataTids } from './Calendar';\nimport { CalendarContext } from './CalendarContext';\n\nexport const getMinMonth = (year: number, minDate: Nullable<CDS.CalendarDateShape>) => {\n  let min = 0;\n  for (let i = 0; i < 12; ++i) {\n    if (minDate && CDS.isGreaterOrEqual({ date: 31, month: i, year }, minDate)) {\n      min = i;\n      break;\n    }\n  }\n  return min;\n};\n\nexport const getMaxMonth = (year: number, maxDate: Nullable<CDS.CalendarDateShape>) => {\n  let max = 11;\n  for (let i = 11; i >= 0; --i) {\n    if (maxDate && CDS.isLessOrEqual({ date: 1, month: i, year }, maxDate)) {\n      max = i;\n      break;\n    }\n  }\n  return max;\n};\n\ninterface MonthViewProps {\n  children: React.ReactNode;\n  firstDayOffset: number;\n  height: number;\n  isFirstInYear?: boolean;\n  isLastInYear?: boolean;\n  month: number;\n  top: number;\n  year: number;\n  onMonthSelect: (month: number) => void;\n  onYearSelect: (month: number) => void;\n  monthSelectRef: (select: DateSelect | null) => void;\n  yearSelectRef: (select: DateSelect | null) => void;\n}\n\nexport function MonthView(props: MonthViewProps) {\n  const theme = useTheme();\n  const emotion = useEmotion();\n  const { minDate, maxDate } = useContext(CalendarContext);\n  const { isMobile } = useResponsiveLayout();\n\n  const {\n    children,\n    height,\n    isFirstInYear,\n    isLastInYear,\n    month,\n    top,\n    year,\n    onMonthSelect,\n    onYearSelect,\n    monthSelectRef,\n    yearSelectRef,\n  } = props;\n\n  const isTopNegative = top <= 0;\n  const isHeaderSticky = isTopNegative && height >= -top;\n  const headerTop = isHeaderSticky ? Math.min(-top, height - themeConfig(theme).MONTH_TITLE_HEIGHT) : 0;\n  const alpha = isHeaderSticky ? (height + top - themeConfig(theme).MONTH_TITLE_HEIGHT) / 10 : 1;\n  const borderBottomColor = ColorFunctions.fade(theme.calendarMonthTitleBorderBottomColor, alpha);\n  const isYearVisible = isFirstInYear || isHeaderSticky;\n  const yearTop = isHeaderSticky && !isLastInYear ? -headerTop - top : 0;\n  const monthSelectDisabled = top > 40 || headerTop < 0 || headerTop >= height - themeConfig(theme).MONTH_TITLE_HEIGHT;\n  const yearSelectDisabled = top > 40 || (isLastInYear && top < -height + themeConfig(theme).MONTH_TITLE_HEIGHT);\n\n  const styles = getStyles(emotion);\n  return (\n    <div\n      data-tid={CalendarDataTids.month}\n      className={emotion.cx({ [styles.month(theme)]: true, [styles.monthMobile()]: isMobile })}\n      style={{ top }}\n      key={month + '-' + year}\n    >\n      <div\n        style={{ top: headerTop }}\n        className={emotion.cx({\n          [styles.header()]: true,\n          [styles.headerSticky(theme)]: isHeaderSticky,\n        })}\n      >\n        <div style={{ borderBottomColor }} className={styles.monthTitle(theme)}>\n          <div data-tid={CalendarDataTids.headerMonth} className={styles.headerMonth(theme)}>\n            {\n              <DateSelect\n                disabled={monthSelectDisabled}\n                width={isMobile ? '6em' : 85}\n                type=\"month\"\n                value={month}\n                onValueChange={onMonthSelect}\n                ref={!monthSelectDisabled ? monthSelectRef : undefined}\n                minValue={getMinMonth(year, minDate)}\n                maxValue={getMaxMonth(year, maxDate)}\n              />\n            }\n          </div>\n          {isYearVisible && (\n            <div data-tid={CalendarDataTids.headerYear} className={styles.headerYear(theme)} style={{ top: yearTop }}>\n              {\n                <DateSelect\n                  disabled={yearSelectDisabled}\n                  width={isMobile ? '3.5em' : 50}\n                  type=\"year\"\n                  value={year}\n                  minValue={minDate ? minDate.year : undefined}\n                  maxValue={maxDate ? maxDate.year : undefined}\n                  onValueChange={onYearSelect}\n                  ref={!yearSelectDisabled ? yearSelectRef : undefined}\n                />\n              }\n            </div>\n          )}\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n}\n"]}

package/cjs/components/Calendar/MonthView.styles.d.ts

@@ -4,8 +4,11 @@ export declare const getStyles: (emotion: Emotion) => {
     headerMonth(t: Theme): string;
     headerYear(t: Theme): string;
     month(t: Theme): string;
+    monthMobile(): string;
     header(): string;
     headerSticky(t: Theme): string;
     monthTitle(t: Theme): string;
     monthDayGrid(t: Theme): string;
+    monthDayRow(t: Theme): string;
+    nativeSelect(): string;
 };

package/cjs/components/Calendar/MonthView.styles.js

@@ -1,6 +1,6 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 
-var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
 
 var getStyles = function getStyles(emotion) {return (
@@ -22,28 +22,34 @@ var getStyles = function getStyles(emotion) {return (
       },
 
       month: function month(t) {
-        var width = parseInt(t.calendarCellSize) * 7;
+        var width = parseInt(t.calendarCellWidth) * 7;
         return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        position: absolute;\n        width: ", "px;\n      "])),
 
         width);
 
       },
 
+      monthMobile: function monthMobile() {
+        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        width: 100%;\n      "])));
+
+
+      },
+
       header: function header() {
-        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        position: relative;\n      "])));
+        return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        position: relative;\n      "])));
 
 
       },
 
       headerSticky: function headerSticky(t) {
-        return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        z-index: 2;\n      "])),
+        return emotion.css(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        z-index: 2;\n      "])),
         t.calendarMonthHeaderStickedBgColor);
 
 
       },
 
       monthTitle: function monthTitle(t) {
-        return emotion.css(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        border-bottom: 1px solid ", ";\n        font-weight: ", ";\n        margin: 0 ", " ", ";\n        line-height: ", ";\n      "])),
+        return emotion.css(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n        border-bottom: 1px solid ", ";\n        font-weight: ", ";\n        margin: 0 ", " ", ";\n        line-height: ", ";\n      "])),
         t.calendarMonthTitleBorderBottomColor,
         t.dateSelectFontWeight,
         t.calendarMonthTitleMarginX, t.calendarMonthTitleMarginBottom,
@@ -51,8 +57,40 @@ var getStyles = function getStyles(emotion) {return (
 
       },
 
+      /* Note: this could've been
+       * display: grid;
+       * grid-template-columns: repeat(7, minmax(0, 1fr));
+       */
       monthDayGrid: function monthDayGrid(t) {
-        return emotion.css(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n        line-height: ", ";\n      "])),
-        t.calendarCellLineHeight);
+        return emotion.css(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n        line-height: ", ";\n      display: flex;\n      flex-direction: column;\n      padding: ", " 0px;\n    "])),
+        t.calendarCellLineHeight,
+
+
+        t.calendarGridRowSpacing);
+
+      },
+
+      monthDayRow: function monthDayRow(t) {
+        return emotion.css(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      justify-content: space-between;\n\n      & + & {\n        margin-top: ", ";\n      }\n    "])),
+
+
+
+
+        t.calendarGridRowSpacing);
+
+
+      },
+
+      nativeSelect: function nativeSelect() {
+        return emotion.css(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      top: -12px;\n      right: 0;\n      bottom: -8px;\n      left: 0;\n      cursor: pointer;\n      appearance: none;\n      opacity: 0;\n      border: none;\n      "])));
+
+
+
+
+
+
+
+
+
 
       } }));};exports.getStyles = getStyles;

package/cjs/components/Calendar/MonthView.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MonthView.styles.ts"],"names":["getStyles","emotion","headerMonth","t","css","calendarMonthTitlePaddingTop","calendarMonthTitlePaddingBottom","headerYear","month","width","parseInt","calendarCellSize","header","headerSticky","calendarMonthHeaderStickedBgColor","monthTitle","calendarMonthTitleBorderBottomColor","dateSelectFontWeight","calendarMonthTitleMarginX","calendarMonthTitleMarginBottom","calendarMonthTitleLineHeight","monthDayGrid","calendarCellLineHeight"],"mappings":";;AAEA,oD;;;AAGO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvB,+BAAa;AACXC,MAAAA,WADW,uBACCC,CADD,EACW;AACpB,eAAOF,OAAO,CAACG,GAAf;;AAEaD,QAAAA,CAAC,CAACE,4BAFf,EAEiDF,CAAC,CAACG,+BAFnD;;AAID,OANU;;AAQXC,MAAAA,UARW,sBAQAJ,CARA,EAQU;AACnB,eAAOF,OAAO,CAACG,GAAf;;;;AAIaD,QAAAA,CAAC,CAACE,4BAJf,EAIiDF,CAAC,CAACG,+BAJnD;;AAMD,OAfU;;AAiBXE,MAAAA,KAjBW,iBAiBLL,CAjBK,EAiBK;AACd,YAAMM,KAAK,GAAGC,QAAQ,CAACP,CAAC,CAACQ,gBAAH,CAAR,GAA+B,CAA7C;AACA,eAAOV,OAAO,CAACG,GAAf;;AAEWK,QAAAA,KAFX;;AAID,OAvBU;;AAyBXG,MAAAA,MAzBW,oBAyBF;AACP,eAAOX,OAAO,CAACG,GAAf;;;AAGD,OA7BU;;AA+BXS,MAAAA,YA/BW,wBA+BEV,CA/BF,EA+BY;AACrB,eAAOF,OAAO,CAACG,GAAf;AACsBD,QAAAA,CAAC,CAACW,iCADxB;;;AAID,OApCU;;AAsCXC,MAAAA,UAtCW,sBAsCAZ,CAtCA,EAsCU;AACnB,eAAOF,OAAO,CAACG,GAAf;AAC6BD,QAAAA,CAAC,CAACa,mCAD/B;AAEiBb,QAAAA,CAAC,CAACc,oBAFnB;AAGcd,QAAAA,CAAC,CAACe,yBAHhB,EAG6Cf,CAAC,CAACgB,8BAH/C;AAIiBhB,QAAAA,CAAC,CAACiB,4BAJnB;;AAMD,OA7CU;;AA+CXC,MAAAA,YA/CW,wBA+CElB,CA/CF,EA+CY;AACrB,eAAOF,OAAO,CAACG,GAAf;AACiBD,QAAAA,CAAC,CAACmB,sBADnB;;AAGD,OAnDU,EAAb,CADuB,GAAlB,C","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    headerMonth(t: Theme) {\n      return emotion.css`\n        display: inline-block;\n        padding: ${t.calendarMonthTitlePaddingTop} 0 ${t.calendarMonthTitlePaddingBottom};\n      `;\n    },\n\n    headerYear(t: Theme) {\n      return emotion.css`\n        display: inline-block;\n        position: absolute;\n        right: 0;\n        padding: ${t.calendarMonthTitlePaddingTop} 0 ${t.calendarMonthTitlePaddingBottom};\n      `;\n    },\n\n    month(t: Theme) {\n      const width = parseInt(t.calendarCellSize) * 7;\n      return emotion.css`\n        position: absolute;\n        width: ${width}px;\n      `;\n    },\n\n    header() {\n      return emotion.css`\n        position: relative;\n      `;\n    },\n\n    headerSticky(t: Theme) {\n      return emotion.css`\n        background-color: ${t.calendarMonthHeaderStickedBgColor};\n        z-index: 2;\n      `;\n    },\n\n    monthTitle(t: Theme) {\n      return emotion.css`\n        border-bottom: 1px solid ${t.calendarMonthTitleBorderBottomColor};\n        font-weight: ${t.dateSelectFontWeight};\n        margin: 0 ${t.calendarMonthTitleMarginX} ${t.calendarMonthTitleMarginBottom};\n        line-height: ${t.calendarMonthTitleLineHeight};\n      `;\n    },\n\n    monthDayGrid(t: Theme) {\n      return emotion.css`\n        line-height: ${t.calendarCellLineHeight};\n      `;\n    },\n  });\n"]}
+{"version":3,"sources":["MonthView.styles.ts"],"names":["getStyles","emotion","headerMonth","t","css","calendarMonthTitlePaddingTop","calendarMonthTitlePaddingBottom","headerYear","month","width","parseInt","calendarCellWidth","monthMobile","header","headerSticky","calendarMonthHeaderStickedBgColor","monthTitle","calendarMonthTitleBorderBottomColor","dateSelectFontWeight","calendarMonthTitleMarginX","calendarMonthTitleMarginBottom","calendarMonthTitleLineHeight","monthDayGrid","calendarCellLineHeight","calendarGridRowSpacing","monthDayRow","nativeSelect"],"mappings":";;AAEA,oD;;;AAGO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvB,+BAAa;AACXC,MAAAA,WADW,uBACCC,CADD,EACW;AACpB,eAAOF,OAAO,CAACG,GAAf;;AAEaD,QAAAA,CAAC,CAACE,4BAFf,EAEiDF,CAAC,CAACG,+BAFnD;;AAID,OANU;;AAQXC,MAAAA,UARW,sBAQAJ,CARA,EAQU;AACnB,eAAOF,OAAO,CAACG,GAAf;;;;AAIaD,QAAAA,CAAC,CAACE,4BAJf,EAIiDF,CAAC,CAACG,+BAJnD;;AAMD,OAfU;;AAiBXE,MAAAA,KAjBW,iBAiBLL,CAjBK,EAiBK;AACd,YAAMM,KAAK,GAAGC,QAAQ,CAACP,CAAC,CAACQ,iBAAH,CAAR,GAAgC,CAA9C;AACA,eAAOV,OAAO,CAACG,GAAf;;AAEWK,QAAAA,KAFX;;AAID,OAvBU;;AAyBXG,MAAAA,WAzBW,yBAyBG;AACZ,eAAOX,OAAO,CAACG,GAAf;;;AAGD,OA7BU;;AA+BXS,MAAAA,MA/BW,oBA+BF;AACP,eAAOZ,OAAO,CAACG,GAAf;;;AAGD,OAnCU;;AAqCXU,MAAAA,YArCW,wBAqCEX,CArCF,EAqCY;AACrB,eAAOF,OAAO,CAACG,GAAf;AACsBD,QAAAA,CAAC,CAACY,iCADxB;;;AAID,OA1CU;;AA4CXC,MAAAA,UA5CW,sBA4CAb,CA5CA,EA4CU;AACnB,eAAOF,OAAO,CAACG,GAAf;AAC6BD,QAAAA,CAAC,CAACc,mCAD/B;AAEiBd,QAAAA,CAAC,CAACe,oBAFnB;AAGcf,QAAAA,CAAC,CAACgB,yBAHhB,EAG6ChB,CAAC,CAACiB,8BAH/C;AAIiBjB,QAAAA,CAAC,CAACkB,4BAJnB;;AAMD,OAnDU;;AAqDX;AACJ;AACA;AACA;AACIC,MAAAA,YAzDW,wBAyDEnB,CAzDF,EAyDY;AACrB,eAAOF,OAAO,CAACG,GAAf;AACiBD,QAAAA,CAAC,CAACoB,sBADnB;;;AAIWpB,QAAAA,CAAC,CAACqB,sBAJb;;AAMD,OAhEU;;AAkEXC,MAAAA,WAlEW,uBAkECtB,CAlED,EAkEW;AACpB,eAAOF,OAAO,CAACG,GAAf;;;;;AAKgBD,QAAAA,CAAC,CAACqB,sBALlB;;;AAQD,OA3EU;;AA6EXE,MAAAA,YA7EW,0BA6EI;AACb,eAAOzB,OAAO,CAACG,GAAf;;;;;;;;;;;AAWD,OAzFU,EAAb,CADuB,GAAlB,C","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    headerMonth(t: Theme) {\n      return emotion.css`\n        display: inline-block;\n        padding: ${t.calendarMonthTitlePaddingTop} 0 ${t.calendarMonthTitlePaddingBottom};\n      `;\n    },\n\n    headerYear(t: Theme) {\n      return emotion.css`\n        display: inline-block;\n        position: absolute;\n        right: 0;\n        padding: ${t.calendarMonthTitlePaddingTop} 0 ${t.calendarMonthTitlePaddingBottom};\n      `;\n    },\n\n    month(t: Theme) {\n      const width = parseInt(t.calendarCellWidth) * 7;\n      return emotion.css`\n        position: absolute;\n        width: ${width}px;\n      `;\n    },\n\n    monthMobile() {\n      return emotion.css`\n        width: 100%;\n      `;\n    },\n\n    header() {\n      return emotion.css`\n        position: relative;\n      `;\n    },\n\n    headerSticky(t: Theme) {\n      return emotion.css`\n        background-color: ${t.calendarMonthHeaderStickedBgColor};\n        z-index: 2;\n      `;\n    },\n\n    monthTitle(t: Theme) {\n      return emotion.css`\n        border-bottom: 1px solid ${t.calendarMonthTitleBorderBottomColor};\n        font-weight: ${t.dateSelectFontWeight};\n        margin: 0 ${t.calendarMonthTitleMarginX} ${t.calendarMonthTitleMarginBottom};\n        line-height: ${t.calendarMonthTitleLineHeight};\n      `;\n    },\n\n    /* Note: this could've been\n     * display: grid;\n     * grid-template-columns: repeat(7, minmax(0, 1fr));\n     */\n    monthDayGrid(t: Theme) {\n      return emotion.css`\n        line-height: ${t.calendarCellLineHeight};\n      display: flex;\n      flex-direction: column;\n      padding: ${t.calendarGridRowSpacing} 0px;\n    `;\n    },\n\n    monthDayRow(t: Theme) {\n      return emotion.css`\n      display: flex;\n      justify-content: space-between;\n\n      & + & {\n        margin-top: ${t.calendarGridRowSpacing};\n      }\n    `;\n    },\n\n    nativeSelect() {\n      return emotion.css`\n      position: absolute;\n      top: -12px;\n      right: 0;\n      bottom: -8px;\n      left: 0;\n      cursor: pointer;\n      appearance: none;\n      opacity: 0;\n      border: none;\n      `;\n    },\n  });\n"]}

package/cjs/components/Calendar/MonthViewModel.js

@@ -1,6 +1,7 @@
 "use strict";exports.__esModule = true;exports.MonthViewModel = void 0;var _memo = require("../../lib/memo");
 
 
+var _CalendarUtils = require("./CalendarUtils");
 var _config = require("./config");
 var _DayCellViewModel = require("./DayCellViewModel");
 
@@ -48,8 +49,16 @@ MonthViewModel = /*#__PURE__*/function () {var _proto = MonthViewModel.prototype
 
 
   getHeight = function getHeight(theme) {
-    var _themeConfig = (0, _config.themeConfig)(theme),DAY_SIZE = _themeConfig.DAY_SIZE,MONTH_TITLE_OFFSET_HEIGHT = _themeConfig.MONTH_TITLE_OFFSET_HEIGHT,MONTH_BOTTOM_MARGIN = _themeConfig.MONTH_BOTTOM_MARGIN;
-    return getMonthHeight(this.daysCount, this.offset, DAY_SIZE, MONTH_TITLE_OFFSET_HEIGHT, MONTH_BOTTOM_MARGIN);
+    var _themeConfig =
+    (0, _config.themeConfig)(theme),DAY_HEIGHT = _themeConfig.DAY_HEIGHT,MONTH_TITLE_OFFSET_HEIGHT = _themeConfig.MONTH_TITLE_OFFSET_HEIGHT,MONTH_BOTTOM_MARGIN = _themeConfig.MONTH_BOTTOM_MARGIN,CALENDAR_GRID_ROW_SPACING = _themeConfig.CALENDAR_GRID_ROW_SPACING;
+    return getMonthHeight(
+    this.daysCount,
+    this.offset,
+    DAY_HEIGHT,
+    MONTH_TITLE_OFFSET_HEIGHT,
+    MONTH_BOTTOM_MARGIN,
+    CALENDAR_GRID_ROW_SPACING);
+
   };
 
   function MonthViewModel(month, year) {
@@ -72,10 +81,19 @@ MonthViewModel = /*#__PURE__*/function () {var _proto = MonthViewModel.prototype
 
 
 var getMonthHeight = (0, _memo.memo)(
-function (daysCount, offset, dayHeight, titleHeight, marginBottom) {return (
-    Math.ceil((daysCount + offset) / 7) * dayHeight + titleHeight + marginBottom);});
-
-var getMonthsDays = (0, _memo.memo)(function (month, year) {return new Date(year, month + 1, 0).getDate();});
+function (
+daysCount,
+offset,
+dayHeight,
+titleHeight,
+marginBottom,
+rowSpacing)
+{
+  var weeks = Math.ceil((daysCount + offset) / 7);
+  return weeks * dayHeight + titleHeight + marginBottom + rowSpacing * 2 + rowSpacing * (weeks - 1);
+});
+
+var getMonthsDays = (0, _memo.memo)(function (month, year) {return new Date(year, (0, _CalendarUtils.getMonthInHumanFormat)(month), 0).getDate();});
 
 var getMonthOffset = (0, _memo.memo)(function (month, year) {
   var day = new Date(year, month, 1).getDay() - 1;

package/cjs/components/Calendar/MonthViewModel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MonthViewModel.ts"],"names":["getCurrentYear","month","year","Math","ceil","floor","getCurrentMonth","MonthViewModel","getHeight","theme","DAY_SIZE","MONTH_TITLE_OFFSET_HEIGHT","MONTH_BOTTOM_MARGIN","getMonthHeight","daysCount","offset","currentYear","currentMonth","getMonthsDays","getMonthOffset","isLastInYear","isFirstInYear","days","Array","from","length","_","i","isWeekend","DayCellViewModel","create","dayHeight","titleHeight","marginBottom","Date","getDate","day","getDay"],"mappings":"uEAAA;;;AAGA;AACA;;AAEA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAAgBC,IAAhB,EAAiC;AACtD,MAAID,KAAK,GAAG,CAAZ,EAAe;AACb,WAAOC,IAAI,GAAGC,IAAI,CAACC,IAAL,CAAU,CAACH,KAAD,GAAS,EAAnB,CAAd;AACD;;AAED,MAAIA,KAAK,GAAG,EAAZ,EAAgB;AACd,WAAOC,IAAI,GAAGC,IAAI,CAACE,KAAL,CAAWJ,KAAK,GAAG,EAAnB,CAAd;AACD;;AAED,SAAOC,IAAP;AACD,CAVD;;AAYA,IAAMI,eAAe,GAAG,SAAlBA,eAAkB,CAACL,KAAD,EAAmB;AACzC,MAAIA,KAAK,GAAG,CAAZ,EAAe;AACb,WAAO,KAAMA,KAAK,GAAG,EAArB;AACD;;AAED,MAAIA,KAAK,GAAG,EAAZ,EAAgB;AACd,WAAOA,KAAK,GAAG,EAAf;AACD;;AAED,SAAOA,KAAP;AACD,CAVD,C;;AAYaM,c;;;;;;;;;;;;;;;;;;;AAmBJC,EAAAA,S,GAAP,mBAAiBC,KAAjB,EAAuC;AACrC,uBAAqE,yBAAYA,KAAZ,CAArE,CAAQC,QAAR,gBAAQA,QAAR,CAAkBC,yBAAlB,gBAAkBA,yBAAlB,CAA6CC,mBAA7C,gBAA6CA,mBAA7C;AACA,WAAOC,cAAc,CAAC,KAAKC,SAAN,EAAiB,KAAKC,MAAtB,EAA8BL,QAA9B,EAAwCC,yBAAxC,EAAmEC,mBAAnE,CAArB;AACD,G;;AAED,0BAAoBX,KAApB,EAAmCC,IAAnC,EAAiD;AAC/C,QAAMc,WAAW,GAAGhB,cAAc,CAACC,KAAD,EAAQC,IAAR,CAAlC;AACA,QAAMe,YAAY,GAAGX,eAAe,CAACL,KAAD,CAApC;;AAEA,QAAMa,SAAS,GAAGI,aAAa,CAACD,YAAD,EAAeD,WAAf,CAA/B;AACA,QAAMD,MAAM,GAAGI,cAAc,CAACF,YAAD,EAAeD,WAAf,CAA7B;AACA,SAAKF,SAAL,GAAiBA,SAAjB;AACA,SAAKC,MAAL,GAAcA,MAAd;AACA,SAAKd,KAAL,GAAagB,YAAb;AACA,SAAKf,IAAL,GAAYc,WAAZ;AACA,SAAKI,YAAL,GAAoBH,YAAY,KAAK,EAArC;AACA,SAAKI,aAAL,GAAqBJ,YAAY,KAAK,CAAtC;AACA,SAAKK,IAAL,GAAYC,KAAK,CAACC,IAAN,CAAW,EAAEC,MAAM,EAAEX,SAAV,EAAX,EAAkC,UAACY,CAAD,EAAIC,CAAJ,EAAU;AACtD,UAAMC,SAAS,GAAG,CAACD,CAAC,GAAGR,cAAc,CAACF,YAAD,EAAeD,WAAf,CAAnB,IAAkD,CAAlD,IAAuD,CAAzE;AACA,aAAOa,mCAAiBC,MAAjB,CAAwBH,CAAC,GAAG,CAA5B,EAA+BV,YAA/B,EAA6CD,WAA7C,EAA0DY,SAA1D,CAAP;AACD,KAHW,CAAZ;AAID,G,kEAxCUrB,c,CACGuB,M,GAAS,gBAAK,UAAC7B,KAAD,EAAgBC,IAAhB,UAAiD,IAAIK,cAAJ,CAAmBN,KAAnB,EAA0BC,IAA1B,CAAjD,EAAL,C;;;AA0CzB,IAAMW,cAAc,GAAG;AACrB,UAACC,SAAD,EAAoBC,MAApB,EAAoCgB,SAApC,EAAuDC,WAAvD,EAA4EC,YAA5E;AACE9B,IAAAA,IAAI,CAACC,IAAL,CAAU,CAACU,SAAS,GAAGC,MAAb,IAAuB,CAAjC,IAAsCgB,SAAtC,GAAkDC,WAAlD,GAAgEC,YADlE,GADqB,CAAvB;;AAIA,IAAMf,aAAa,GAAG,gBAAK,UAACjB,KAAD,EAAgBC,IAAhB,UAAiC,IAAIgC,IAAJ,CAAShC,IAAT,EAAeD,KAAK,GAAG,CAAvB,EAA0B,CAA1B,EAA6BkC,OAA7B,EAAjC,EAAL,CAAtB;;AAEA,IAAMhB,cAAc,GAAG,gBAAK,UAAClB,KAAD,EAAgBC,IAAhB,EAAiC;AAC3D,MAAMkC,GAAG,GAAG,IAAIF,IAAJ,CAAShC,IAAT,EAAeD,KAAf,EAAsB,CAAtB,EAAyBoC,MAAzB,KAAoC,CAAhD;AACA,MAAID,GAAG,KAAK,CAAC,CAAb,EAAgB;AACd,WAAO,CAAP;AACD;AACD,SAAOA,GAAP;AACD,CANsB,CAAvB","sourcesContent":["import { memo } from '../../lib/memo';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { themeConfig } from './config';\nimport { DayCellViewModel } from './DayCellViewModel';\n\nconst getCurrentYear = (month: number, year: number) => {\n  if (month < 0) {\n    return year - Math.ceil(-month / 12);\n  }\n\n  if (month > 11) {\n    return year + Math.floor(month / 12);\n  }\n\n  return year;\n};\n\nconst getCurrentMonth = (month: number) => {\n  if (month < 0) {\n    return 12 + (month % 12);\n  }\n\n  if (month > 11) {\n    return month % 12;\n  }\n\n  return month;\n};\n\nexport class MonthViewModel {\n  public static create = memo((month: number, year: number): MonthViewModel => new MonthViewModel(month, year));\n\n  public readonly daysCount: number;\n\n  public readonly offset: number;\n\n  public readonly month: number;\n\n  public readonly year: number;\n\n  public readonly days: DayCellViewModel[];\n\n  // FIXME: shouldbe readonly\n  public isLastInYear: boolean;\n\n  // FIXME: shouldbe readonly\n  public isFirstInYear: boolean;\n\n  public getHeight(theme: Theme): number {\n    const { DAY_SIZE, MONTH_TITLE_OFFSET_HEIGHT, MONTH_BOTTOM_MARGIN } = themeConfig(theme);\n    return getMonthHeight(this.daysCount, this.offset, DAY_SIZE, MONTH_TITLE_OFFSET_HEIGHT, MONTH_BOTTOM_MARGIN);\n  }\n\n  private constructor(month: number, year: number) {\n    const currentYear = getCurrentYear(month, year);\n    const currentMonth = getCurrentMonth(month);\n\n    const daysCount = getMonthsDays(currentMonth, currentYear);\n    const offset = getMonthOffset(currentMonth, currentYear);\n    this.daysCount = daysCount;\n    this.offset = offset;\n    this.month = currentMonth;\n    this.year = currentYear;\n    this.isLastInYear = currentMonth === 11;\n    this.isFirstInYear = currentMonth === 0;\n    this.days = Array.from({ length: daysCount }, (_, i) => {\n      const isWeekend = (i + getMonthOffset(currentMonth, currentYear)) % 7 >= 5;\n      return DayCellViewModel.create(i + 1, currentMonth, currentYear, isWeekend);\n    });\n  }\n}\n\nconst getMonthHeight = memo(\n  (daysCount: number, offset: number, dayHeight: number, titleHeight: number, marginBottom: number) =>\n    Math.ceil((daysCount + offset) / 7) * dayHeight + titleHeight + marginBottom,\n);\nconst getMonthsDays = memo((month: number, year: number) => new Date(year, month + 1, 0).getDate());\n\nconst getMonthOffset = memo((month: number, year: number) => {\n  const day = new Date(year, month, 1).getDay() - 1;\n  if (day === -1) {\n    return 6;\n  }\n  return day;\n});\n"]}
+{"version":3,"sources":["MonthViewModel.ts"],"names":["getCurrentYear","month","year","Math","ceil","floor","getCurrentMonth","MonthViewModel","getHeight","theme","DAY_HEIGHT","MONTH_TITLE_OFFSET_HEIGHT","MONTH_BOTTOM_MARGIN","CALENDAR_GRID_ROW_SPACING","getMonthHeight","daysCount","offset","currentYear","currentMonth","getMonthsDays","getMonthOffset","isLastInYear","isFirstInYear","days","Array","from","length","_","i","isWeekend","DayCellViewModel","create","dayHeight","titleHeight","marginBottom","rowSpacing","weeks","Date","getDate","day","getDay"],"mappings":"uEAAA;;;AAGA;AACA;AACA;;AAEA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAAgBC,IAAhB,EAAiC;AACtD,MAAID,KAAK,GAAG,CAAZ,EAAe;AACb,WAAOC,IAAI,GAAGC,IAAI,CAACC,IAAL,CAAU,CAACH,KAAD,GAAS,EAAnB,CAAd;AACD;;AAED,MAAIA,KAAK,GAAG,EAAZ,EAAgB;AACd,WAAOC,IAAI,GAAGC,IAAI,CAACE,KAAL,CAAWJ,KAAK,GAAG,EAAnB,CAAd;AACD;;AAED,SAAOC,IAAP;AACD,CAVD;;AAYA,IAAMI,eAAe,GAAG,SAAlBA,eAAkB,CAACL,KAAD,EAAmB;AACzC,MAAIA,KAAK,GAAG,CAAZ,EAAe;AACb,WAAO,KAAMA,KAAK,GAAG,EAArB;AACD;;AAED,MAAIA,KAAK,GAAG,EAAZ,EAAgB;AACd,WAAOA,KAAK,GAAG,EAAf;AACD;;AAED,SAAOA,KAAP;AACD,CAVD,C;;AAYaM,c;;;;;;;;;;;;;;;;;;;AAmBJC,EAAAA,S,GAAP,mBAAiBC,KAAjB,EAAuC;AACrC;AACE,6BAAYA,KAAZ,CADF,CAAQC,UAAR,gBAAQA,UAAR,CAAoBC,yBAApB,gBAAoBA,yBAApB,CAA+CC,mBAA/C,gBAA+CA,mBAA/C,CAAoEC,yBAApE,gBAAoEA,yBAApE;AAEA,WAAOC,cAAc;AACnB,SAAKC,SADc;AAEnB,SAAKC,MAFc;AAGnBN,IAAAA,UAHmB;AAInBC,IAAAA,yBAJmB;AAKnBC,IAAAA,mBALmB;AAMnBC,IAAAA,yBANmB,CAArB;;AAQD,G;;AAED,0BAAoBZ,KAApB,EAAmCC,IAAnC,EAAiD;AAC/C,QAAMe,WAAW,GAAGjB,cAAc,CAACC,KAAD,EAAQC,IAAR,CAAlC;AACA,QAAMgB,YAAY,GAAGZ,eAAe,CAACL,KAAD,CAApC;;AAEA,QAAMc,SAAS,GAAGI,aAAa,CAACD,YAAD,EAAeD,WAAf,CAA/B;AACA,QAAMD,MAAM,GAAGI,cAAc,CAACF,YAAD,EAAeD,WAAf,CAA7B;AACA,SAAKF,SAAL,GAAiBA,SAAjB;AACA,SAAKC,MAAL,GAAcA,MAAd;AACA,SAAKf,KAAL,GAAaiB,YAAb;AACA,SAAKhB,IAAL,GAAYe,WAAZ;AACA,SAAKI,YAAL,GAAoBH,YAAY,KAAK,EAArC;AACA,SAAKI,aAAL,GAAqBJ,YAAY,KAAK,CAAtC;AACA,SAAKK,IAAL,GAAYC,KAAK,CAACC,IAAN,CAAW,EAAEC,MAAM,EAAEX,SAAV,EAAX,EAAkC,UAACY,CAAD,EAAIC,CAAJ,EAAU;AACtD,UAAMC,SAAS,GAAG,CAACD,CAAC,GAAGR,cAAc,CAACF,YAAD,EAAeD,WAAf,CAAnB,IAAkD,CAAlD,IAAuD,CAAzE;AACA,aAAOa,mCAAiBC,MAAjB,CAAwBH,CAAC,GAAG,CAA5B,EAA+BV,YAA/B,EAA6CD,WAA7C,EAA0DY,SAA1D,CAAP;AACD,KAHW,CAAZ;AAID,G,kEAhDUtB,c,CACGwB,M,GAAS,gBAAK,UAAC9B,KAAD,EAAgBC,IAAhB,UAAiD,IAAIK,cAAJ,CAAmBN,KAAnB,EAA0BC,IAA1B,CAAjD,EAAL,C;;;AAkDzB,IAAMY,cAAc,GAAG;AACrB;AACEC,SADF;AAEEC,MAFF;AAGEgB,SAHF;AAIEC,WAJF;AAKEC,YALF;AAMEC,UANF;AAOK;AACH,MAAMC,KAAK,GAAGjC,IAAI,CAACC,IAAL,CAAU,CAACW,SAAS,GAAGC,MAAb,IAAuB,CAAjC,CAAd;AACA,SAAOoB,KAAK,GAAGJ,SAAR,GAAoBC,WAApB,GAAkCC,YAAlC,GAAiDC,UAAU,GAAG,CAA9D,GAAkEA,UAAU,IAAIC,KAAK,GAAG,CAAZ,CAAnF;AACD,CAXoB,CAAvB;;AAaA,IAAMjB,aAAa,GAAG,gBAAK,UAAClB,KAAD,EAAgBC,IAAhB,UAAiC,IAAImC,IAAJ,CAASnC,IAAT,EAAe,0CAAsBD,KAAtB,CAAf,EAA6C,CAA7C,EAAgDqC,OAAhD,EAAjC,EAAL,CAAtB;;AAEA,IAAMlB,cAAc,GAAG,gBAAK,UAACnB,KAAD,EAAgBC,IAAhB,EAAiC;AAC3D,MAAMqC,GAAG,GAAG,IAAIF,IAAJ,CAASnC,IAAT,EAAeD,KAAf,EAAsB,CAAtB,EAAyBuC,MAAzB,KAAoC,CAAhD;AACA,MAAID,GAAG,KAAK,CAAC,CAAb,EAAgB;AACd,WAAO,CAAP;AACD;AACD,SAAOA,GAAP;AACD,CANsB,CAAvB","sourcesContent":["import { memo } from '../../lib/memo';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { getMonthInHumanFormat } from './CalendarUtils';\nimport { themeConfig } from './config';\nimport { DayCellViewModel } from './DayCellViewModel';\n\nconst getCurrentYear = (month: number, year: number) => {\n  if (month < 0) {\n    return year - Math.ceil(-month / 12);\n  }\n\n  if (month > 11) {\n    return year + Math.floor(month / 12);\n  }\n\n  return year;\n};\n\nconst getCurrentMonth = (month: number) => {\n  if (month < 0) {\n    return 12 + (month % 12);\n  }\n\n  if (month > 11) {\n    return month % 12;\n  }\n\n  return month;\n};\n\nexport class MonthViewModel {\n  public static create = memo((month: number, year: number): MonthViewModel => new MonthViewModel(month, year));\n\n  public readonly daysCount: number;\n\n  public readonly offset: number;\n\n  public readonly month: number;\n\n  public readonly year: number;\n\n  public readonly days: DayCellViewModel[];\n\n  // FIXME: shouldbe readonly\n  public isLastInYear: boolean;\n\n  // FIXME: shouldbe readonly\n  public isFirstInYear: boolean;\n\n  public getHeight(theme: Theme): number {\n    const { DAY_HEIGHT, MONTH_TITLE_OFFSET_HEIGHT, MONTH_BOTTOM_MARGIN, CALENDAR_GRID_ROW_SPACING } =\n      themeConfig(theme);\n    return getMonthHeight(\n      this.daysCount,\n      this.offset,\n      DAY_HEIGHT,\n      MONTH_TITLE_OFFSET_HEIGHT,\n      MONTH_BOTTOM_MARGIN,\n      CALENDAR_GRID_ROW_SPACING,\n    );\n  }\n\n  private constructor(month: number, year: number) {\n    const currentYear = getCurrentYear(month, year);\n    const currentMonth = getCurrentMonth(month);\n\n    const daysCount = getMonthsDays(currentMonth, currentYear);\n    const offset = getMonthOffset(currentMonth, currentYear);\n    this.daysCount = daysCount;\n    this.offset = offset;\n    this.month = currentMonth;\n    this.year = currentYear;\n    this.isLastInYear = currentMonth === 11;\n    this.isFirstInYear = currentMonth === 0;\n    this.days = Array.from({ length: daysCount }, (_, i) => {\n      const isWeekend = (i + getMonthOffset(currentMonth, currentYear)) % 7 >= 5;\n      return DayCellViewModel.create(i + 1, currentMonth, currentYear, isWeekend);\n    });\n  }\n}\n\nconst getMonthHeight = memo(\n  (\n    daysCount: number,\n    offset: number,\n    dayHeight: number,\n    titleHeight: number,\n    marginBottom: number,\n    rowSpacing: number,\n  ) => {\n    const weeks = Math.ceil((daysCount + offset) / 7);\n    return weeks * dayHeight + titleHeight + marginBottom + rowSpacing * 2 + rowSpacing * (weeks - 1);\n  },\n);\nconst getMonthsDays = memo((month: number, year: number) => new Date(year, getMonthInHumanFormat(month), 0).getDate());\n\nconst getMonthOffset = memo((month: number, year: number) => {\n  const day = new Date(year, month, 1).getDay() - 1;\n  if (day === -1) {\n    return 6;\n  }\n  return day;\n});\n"]}

package/cjs/components/Calendar/config.js

@@ -7,20 +7,24 @@ monthTitleLineHeight,
 monthTitlePaddingTop,
 monthTitlePaddingBottom,
 monthTitleMarginBottom,
-cellSize,
+cellWidth,
+cellHeight,
 wrapperHeight,
 monthMarginBottom,
-maxMonthsToAppendOnScroll)
+maxMonthsToAppendOnScroll,
+calendarGridRowSpacing)
 {
   var monthTitleHeight =
   parseInt(monthTitleLineHeight) + parseInt(monthTitlePaddingTop) + parseInt(monthTitlePaddingBottom);
   return {
-    DAY_SIZE: parseInt(cellSize),
+    DAY_WIDTH: parseInt(cellWidth),
+    DAY_HEIGHT: parseInt(cellHeight),
     MONTH_TITLE_HEIGHT: monthTitleHeight,
     MONTH_TITLE_OFFSET_HEIGHT: monthTitleHeight + parseInt(monthTitleMarginBottom) + 1, // + 1px separator line
     WRAPPER_HEIGHT: parseInt(wrapperHeight),
     MONTH_BOTTOM_MARGIN: parseInt(monthMarginBottom),
-    MAX_MONTHS_TO_APPEND_ON_SCROLL: parseInt(maxMonthsToAppendOnScroll) };
+    MAX_MONTHS_TO_APPEND_ON_SCROLL: parseInt(maxMonthsToAppendOnScroll),
+    CALENDAR_GRID_ROW_SPACING: parseInt(calendarGridRowSpacing) };
 
 });
 
@@ -31,7 +35,9 @@ var themeConfig = function themeConfig(t) {return (
     t.calendarMonthTitlePaddingTop,
     t.calendarMonthTitlePaddingBottom,
     t.calendarMonthTitleMarginBottom,
-    t.calendarCellSize,
+    t.calendarCellWidth,
+    t.calendarCellHeight,
     t.calendarWrapperHeight,
     t.calendarMonthMarginBottom,
-    t.calendarMaxMonthsToAppendOnScroll));};exports.themeConfig = themeConfig;
+    t.calendarMaxMonthsToAppendOnScroll,
+    t.calendarGridRowSpacing));};exports.themeConfig = themeConfig;

package/cjs/components/Calendar/config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["config.ts"],"names":["getConfig","monthTitleLineHeight","monthTitlePaddingTop","monthTitlePaddingBottom","monthTitleMarginBottom","cellSize","wrapperHeight","monthMarginBottom","maxMonthsToAppendOnScroll","monthTitleHeight","parseInt","DAY_SIZE","MONTH_TITLE_HEIGHT","MONTH_TITLE_OFFSET_HEIGHT","WRAPPER_HEIGHT","MONTH_BOTTOM_MARGIN","MAX_MONTHS_TO_APPEND_ON_SCROLL","themeConfig","t","calendarMonthTitleLineHeight","calendarMonthTitlePaddingTop","calendarMonthTitlePaddingBottom","calendarMonthTitleMarginBottom","calendarCellSize","calendarWrapperHeight","calendarMonthMarginBottom","calendarMaxMonthsToAppendOnScroll"],"mappings":";AACA;;AAEA,IAAMA,SAAS,GAAG;AAChB;AACEC,oBADF;AAEEC,oBAFF;AAGEC,uBAHF;AAIEC,sBAJF;AAKEC,QALF;AAMEC,aANF;AAOEC,iBAPF;AAQEC,yBARF;AASK;AACH,MAAMC,gBAAgB;AACpBC,EAAAA,QAAQ,CAACT,oBAAD,CAAR,GAAiCS,QAAQ,CAACR,oBAAD,CAAzC,GAAkEQ,QAAQ,CAACP,uBAAD,CAD5E;AAEA,SAAO;AACLQ,IAAAA,QAAQ,EAAED,QAAQ,CAACL,QAAD,CADb;AAELO,IAAAA,kBAAkB,EAAEH,gBAFf;AAGLI,IAAAA,yBAAyB,EAAEJ,gBAAgB,GAAGC,QAAQ,CAACN,sBAAD,CAA3B,GAAsD,CAH5E,EAG+E;AACpFU,IAAAA,cAAc,EAAEJ,QAAQ,CAACJ,aAAD,CAJnB;AAKLS,IAAAA,mBAAmB,EAAEL,QAAQ,CAACH,iBAAD,CALxB;AAMLS,IAAAA,8BAA8B,EAAEN,QAAQ,CAACF,yBAAD,CANnC,EAAP;;AAQD,CArBe,CAAlB;;;AAwBO,IAAMS,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD;AACzBlB,IAAAA,SAAS;AACPkB,IAAAA,CAAC,CAACC,4BADK;AAEPD,IAAAA,CAAC,CAACE,4BAFK;AAGPF,IAAAA,CAAC,CAACG,+BAHK;AAIPH,IAAAA,CAAC,CAACI,8BAJK;AAKPJ,IAAAA,CAAC,CAACK,gBALK;AAMPL,IAAAA,CAAC,CAACM,qBANK;AAOPN,IAAAA,CAAC,CAACO,yBAPK;AAQPP,IAAAA,CAAC,CAACQ,iCARK,CADgB,GAApB,C","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { memo } from '../../lib/memo';\n\nconst getConfig = memo(\n  (\n    monthTitleLineHeight: string,\n    monthTitlePaddingTop: string,\n    monthTitlePaddingBottom: string,\n    monthTitleMarginBottom: string,\n    cellSize: string,\n    wrapperHeight: string,\n    monthMarginBottom: string,\n    maxMonthsToAppendOnScroll: string,\n  ) => {\n    const monthTitleHeight =\n      parseInt(monthTitleLineHeight) + parseInt(monthTitlePaddingTop) + parseInt(monthTitlePaddingBottom);\n    return {\n      DAY_SIZE: parseInt(cellSize),\n      MONTH_TITLE_HEIGHT: monthTitleHeight,\n      MONTH_TITLE_OFFSET_HEIGHT: monthTitleHeight + parseInt(monthTitleMarginBottom) + 1, // + 1px separator line\n      WRAPPER_HEIGHT: parseInt(wrapperHeight),\n      MONTH_BOTTOM_MARGIN: parseInt(monthMarginBottom),\n      MAX_MONTHS_TO_APPEND_ON_SCROLL: parseInt(maxMonthsToAppendOnScroll),\n    };\n  },\n);\n\nexport const themeConfig = (t: Theme) =>\n  getConfig(\n    t.calendarMonthTitleLineHeight,\n    t.calendarMonthTitlePaddingTop,\n    t.calendarMonthTitlePaddingBottom,\n    t.calendarMonthTitleMarginBottom,\n    t.calendarCellSize,\n    t.calendarWrapperHeight,\n    t.calendarMonthMarginBottom,\n    t.calendarMaxMonthsToAppendOnScroll,\n  );\n"]}
+{"version":3,"sources":["config.ts"],"names":["getConfig","monthTitleLineHeight","monthTitlePaddingTop","monthTitlePaddingBottom","monthTitleMarginBottom","cellWidth","cellHeight","wrapperHeight","monthMarginBottom","maxMonthsToAppendOnScroll","calendarGridRowSpacing","monthTitleHeight","parseInt","DAY_WIDTH","DAY_HEIGHT","MONTH_TITLE_HEIGHT","MONTH_TITLE_OFFSET_HEIGHT","WRAPPER_HEIGHT","MONTH_BOTTOM_MARGIN","MAX_MONTHS_TO_APPEND_ON_SCROLL","CALENDAR_GRID_ROW_SPACING","themeConfig","t","calendarMonthTitleLineHeight","calendarMonthTitlePaddingTop","calendarMonthTitlePaddingBottom","calendarMonthTitleMarginBottom","calendarCellWidth","calendarCellHeight","calendarWrapperHeight","calendarMonthMarginBottom","calendarMaxMonthsToAppendOnScroll"],"mappings":";AACA;;AAEA,IAAMA,SAAS,GAAG;AAChB;AACEC,oBADF;AAEEC,oBAFF;AAGEC,uBAHF;AAIEC,sBAJF;AAKEC,SALF;AAMEC,UANF;AAOEC,aAPF;AAQEC,iBARF;AASEC,yBATF;AAUEC,sBAVF;AAWK;AACH,MAAMC,gBAAgB;AACpBC,EAAAA,QAAQ,CAACX,oBAAD,CAAR,GAAiCW,QAAQ,CAACV,oBAAD,CAAzC,GAAkEU,QAAQ,CAACT,uBAAD,CAD5E;AAEA,SAAO;AACLU,IAAAA,SAAS,EAAED,QAAQ,CAACP,SAAD,CADd;AAELS,IAAAA,UAAU,EAAEF,QAAQ,CAACN,UAAD,CAFf;AAGLS,IAAAA,kBAAkB,EAAEJ,gBAHf;AAILK,IAAAA,yBAAyB,EAAEL,gBAAgB,GAAGC,QAAQ,CAACR,sBAAD,CAA3B,GAAsD,CAJ5E,EAI+E;AACpFa,IAAAA,cAAc,EAAEL,QAAQ,CAACL,aAAD,CALnB;AAMLW,IAAAA,mBAAmB,EAAEN,QAAQ,CAACJ,iBAAD,CANxB;AAOLW,IAAAA,8BAA8B,EAAEP,QAAQ,CAACH,yBAAD,CAPnC;AAQLW,IAAAA,yBAAyB,EAAER,QAAQ,CAACF,sBAAD,CAR9B,EAAP;;AAUD,CAzBe,CAAlB;;;AA4BO,IAAMW,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD;AACzBtB,IAAAA,SAAS;AACPsB,IAAAA,CAAC,CAACC,4BADK;AAEPD,IAAAA,CAAC,CAACE,4BAFK;AAGPF,IAAAA,CAAC,CAACG,+BAHK;AAIPH,IAAAA,CAAC,CAACI,8BAJK;AAKPJ,IAAAA,CAAC,CAACK,iBALK;AAMPL,IAAAA,CAAC,CAACM,kBANK;AAOPN,IAAAA,CAAC,CAACO,qBAPK;AAQPP,IAAAA,CAAC,CAACQ,yBARK;AASPR,IAAAA,CAAC,CAACS,iCATK;AAUPT,IAAAA,CAAC,CAACZ,sBAVK,CADgB,GAApB,C","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { memo } from '../../lib/memo';\n\nconst getConfig = memo(\n  (\n    monthTitleLineHeight: string,\n    monthTitlePaddingTop: string,\n    monthTitlePaddingBottom: string,\n    monthTitleMarginBottom: string,\n    cellWidth: string,\n    cellHeight: string,\n    wrapperHeight: string,\n    monthMarginBottom: string,\n    maxMonthsToAppendOnScroll: string,\n    calendarGridRowSpacing: string,\n  ) => {\n    const monthTitleHeight =\n      parseInt(monthTitleLineHeight) + parseInt(monthTitlePaddingTop) + parseInt(monthTitlePaddingBottom);\n    return {\n      DAY_WIDTH: parseInt(cellWidth),\n      DAY_HEIGHT: parseInt(cellHeight),\n      MONTH_TITLE_HEIGHT: monthTitleHeight,\n      MONTH_TITLE_OFFSET_HEIGHT: monthTitleHeight + parseInt(monthTitleMarginBottom) + 1, // + 1px separator line\n      WRAPPER_HEIGHT: parseInt(wrapperHeight),\n      MONTH_BOTTOM_MARGIN: parseInt(monthMarginBottom),\n      MAX_MONTHS_TO_APPEND_ON_SCROLL: parseInt(maxMonthsToAppendOnScroll),\n      CALENDAR_GRID_ROW_SPACING: parseInt(calendarGridRowSpacing),\n    };\n  },\n);\n\nexport const themeConfig = (t: Theme) =>\n  getConfig(\n    t.calendarMonthTitleLineHeight,\n    t.calendarMonthTitlePaddingTop,\n    t.calendarMonthTitlePaddingBottom,\n    t.calendarMonthTitleMarginBottom,\n    t.calendarCellWidth,\n    t.calendarCellHeight,\n    t.calendarWrapperHeight,\n    t.calendarMonthMarginBottom,\n    t.calendarMaxMonthsToAppendOnScroll,\n    t.calendarGridRowSpacing,\n  );\n"]}

package/cjs/components/Calendar/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Calendar';
 export * from './CalendarDateShape';
+export * from './CalendarDay';

package/cjs/components/Calendar/index.js

@@ -1,2 +1,3 @@
 "use strict";exports.__esModule = true;var _Calendar = require("./Calendar");Object.keys(_Calendar).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Calendar[key]) return;exports[key] = _Calendar[key];});
-var _CalendarDateShape = require("./CalendarDateShape");Object.keys(_CalendarDateShape).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _CalendarDateShape[key]) return;exports[key] = _CalendarDateShape[key];});
+var _CalendarDateShape = require("./CalendarDateShape");Object.keys(_CalendarDateShape).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _CalendarDateShape[key]) return;exports[key] = _CalendarDateShape[key];});
+var _CalendarDay = require("./CalendarDay");Object.keys(_CalendarDay).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _CalendarDay[key]) return;exports[key] = _CalendarDay[key];});

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

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA;AACA","sourcesContent":["export * from './Calendar';\nexport * from './CalendarDateShape';\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA;AACA;AACA","sourcesContent":["export * from './Calendar';\nexport * from './CalendarDateShape';\nexport * from './CalendarDay';\n"]}

package/cjs/components/Checkbox/Checkbox.js

@@ -421,7 +421,7 @@ Checkbox = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
           _this.props.onValueChange(checked);
         }
       }
-    };return _this;}var _proto = Checkbox.prototype;_proto.getRootSizeClassName = function getRootSizeClassName() {var styles = (0, _Checkbox.getStyles)(this.emotion);switch (this.getProps().size) {case 'large':return styles.rootLarge(this.theme);case 'medium':return styles.rootMedium(this.theme);case 'small':default:return styles.rootSmall(this.theme);}};_proto.getBoxWrapperSizeClassName = function getBoxWrapperSizeClassName() {var styles = (0, _Checkbox.getStyles)(this.emotion);switch (this.getProps().size) {case 'large':return styles.boxWrapperLarge(this.theme);case 'medium':return styles.boxWrapperMedium(this.theme);case 'small':default:return styles.boxWrapperSmall(this.theme);}};_proto.getCheckboxBoxSize = function getCheckboxBoxSize() {switch (this.getProps().size) {case 'large':return this.theme.checkboxBoxSizeLarge;case 'medium':return this.theme.checkboxBoxSizeMedium;case 'small':default:return this.theme.checkboxBoxSizeSmall;}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (prevProps.checked !== this.props.checked) {this.resetIndeterminate();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeConsumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain);});});} /**
+    };return _this;}var _proto = Checkbox.prototype;_proto.getRootSizeClassName = function getRootSizeClassName() {var styles = (0, _Checkbox.getStyles)(this.emotion);switch (this.getProps().size) {case 'large':return styles.rootLarge(this.theme);case 'medium':return styles.rootMedium(this.theme);case 'small':default:return styles.rootSmall(this.theme);}};_proto.getBoxWrapperSizeClassName = function getBoxWrapperSizeClassName() {var styles = (0, _Checkbox.getStyles)(this.emotion);switch (this.getProps().size) {case 'large':return styles.boxWrapperLarge(this.theme);case 'medium':return styles.boxWrapperMedium(this.theme);case 'small':default:return styles.boxWrapperSmall(this.theme);}};_proto.getCheckboxBoxSize = function getCheckboxBoxSize() {switch (this.getProps().size) {case 'large':return this.theme.checkboxBoxSizeLarge;case 'medium':return this.theme.checkboxBoxSizeMedium;case 'small':default:return this.theme.checkboxBoxSizeSmall;}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (prevProps.checked !== this.props.checked) {this.resetIndeterminate();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain);});});} /**
    * Программная установка фокуса чекбоксу.
    * @public
    */;_proto.focus = function focus() {var _this$input$current;_keyListener.keyListener.isTabPressed = true;(_this$input$current = this.input.current) == null ? void 0 : _this$input$current.focus();} /**