@skbkontur/react-ui 1.12.1 → 2.0.0-beta.4

package/components/Calendar/Month.js

@@ -1,105 +1,126 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = tslib_1.__importStar(require("react"));
-var config_1 = tslib_1.__importDefault(require("./config"));
-var CDS = tslib_1.__importStar(require("./CalendarDateShape"));
-var MonthView_1 = require("./MonthView");
-var DayCellView_1 = require("./DayCellView");
-var CalendarScrollEvents_1 = tslib_1.__importDefault(require("./CalendarScrollEvents"));
-var Month = /** @class */function (_super) {
-  tslib_1.__extends(Month, _super);
-  function Month() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-    _this.monthSelect = null;
-    _this.yearSelect = null;
-    _this.closeSelects = function () {
-      if (_this.monthSelect) {
-        _this.monthSelect.close();
-      }
-      if (_this.yearSelect) {
-        _this.yearSelect.close();
-      }
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
     };
-    _this.monthRef = function (monthSelect) {
-      _this.monthSelect = monthSelect;
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
-    _this.yearRef = function (yearSelect) {
-      _this.yearSelect = yearSelect;
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import React from 'react';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+import { MonthView } from './MonthView.js';
+import { DayCellView } from './DayCellView.js';
+import * as CalendarScrollEvents from './CalendarScrollEvents.js';
+import { getStyles } from './MonthView.styles.js';
+import { getStyles as getCellStyles } from './DayCellView.styles.js';
+var Month = /** @class */ (function (_super) {
+    __extends(Month, _super);
+    function Month() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.monthSelect = null;
+        _this.yearSelect = null;
+        _this.closeSelects = function () {
+            if (_this.monthSelect) {
+                _this.monthSelect.close();
+            }
+            if (_this.yearSelect) {
+                _this.yearSelect.close();
+            }
+        };
+        _this.monthRef = function (monthSelect) {
+            _this.monthSelect = monthSelect;
+        };
+        _this.yearRef = function (yearSelect) {
+            _this.yearSelect = yearSelect;
+        };
+        _this.handleMonthSelect = function (month) {
+            _this.props.onMonthYearChange(month, _this.props.month.year);
+        };
+        _this.handleYearSelect = function (year) {
+            _this.props.onMonthYearChange(_this.props.month.month, year);
+        };
+        return _this;
+    }
+    Month.prototype.shouldComponentUpdate = function (nextProps) {
+        if (this.props.top !== nextProps.top) {
+            return true;
+        }
+        return this.props.month !== nextProps.month;
     };
-    _this.handleMonthSelect = function (month) {
-      _this.props.onMonthYearChange(month, _this.props.month.year);
+    Month.prototype.componentDidMount = function () {
+        CalendarScrollEvents.addListener(this.closeSelects);
     };
-    _this.handleYearSelect = function (year) {
-      _this.props.onMonthYearChange(_this.props.month.month, year);
+    Month.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
     };
-    return _this;
-  }
-  Month.prototype.shouldComponentUpdate = function (nextProps) {
-    if (this.props.top !== nextProps.top) {
-      return true;
-    }
-    if (!CDS.isEqual(nextProps.value, this.props.value)) {
-      return true;
-    }
-    if (!CDS.isEqual(nextProps.today, this.props.today)) {
-      return true;
-    }
-    if (!CDS.isEqual(nextProps.minDate, this.props.minDate)) {
-      return true;
-    }
-    if (!CDS.isEqual(nextProps.maxDate, this.props.maxDate)) {
-      return true;
-    }
-    return this.props.month !== nextProps.month;
-  };
-  Month.prototype.componentDidMount = function () {
-    CalendarScrollEvents_1["default"].addListener(this.closeSelects);
-  };
-  Month.prototype.render = function () {
-    var _a = this.props,month = _a.month,maxDate = _a.maxDate,minDate = _a.minDate,top = _a.top;
-    return React.createElement(MonthView_1.MonthView, { firstDayOffset: month.offset, height: month.height, isFirstInYear: month.isFirstInYear, isLastInYear: month.isLastInYear, maxDate: maxDate, minDate: minDate, month: month.month, top: top, year: month.year, onMonthSelect: this.handleMonthSelect, onYearSelect: this.handleYearSelect, monthSelectRef: this.monthRef, yearSelectRef: this.yearRef }, this.renderCells());
-  };
-  Month.prototype.renderCells = function () {
-    return React.createElement(MonthDayGrid, { days: this.props.month.days, offset: this.props.month.offset, minDate: this.props.minDate, maxDate: this.props.maxDate, today: this.props.today, value: this.props.value, onDateClick: this.props.onDateClick, isHoliday: this.props.isHoliday });
-  };
-  return Month;
-}(React.Component);
-exports.Month = Month;
-var MonthDayGrid = /** @class */function (_super) {
-  tslib_1.__extends(MonthDayGrid, _super);
-  function MonthDayGrid() {
-    return _super !== null && _super.apply(this, arguments) || this;
-  }
-  MonthDayGrid.prototype.shouldComponentUpdate = function (nextProps) {
-    if (!CDS.isEqual(nextProps.value, this.props.value)) {
-      return true;
-    }
-    if (!CDS.isEqual(nextProps.today, this.props.today)) {
-      return true;
-    }
-    if (!CDS.isEqual(nextProps.minDate, this.props.minDate)) {
-      return true;
+    Month.prototype.renderMain = function () {
+        var _a = this.props, month = _a.month, top = _a.top;
+        return (React.createElement(MonthView, { firstDayOffset: month.offset, height: month.getHeight(this.theme), isFirstInYear: month.isFirstInYear, isLastInYear: month.isLastInYear, month: month.month, top: top, year: month.year, onMonthSelect: this.handleMonthSelect, onYearSelect: this.handleYearSelect, monthSelectRef: this.monthRef, yearSelectRef: this.yearRef }, this.renderCells()));
+    };
+    Month.prototype.renderCells = function () {
+        return React.createElement(MonthDayGrid, { days: this.props.month.days, offset: this.props.month.offset });
+    };
+    return Month;
+}(React.Component));
+export { Month };
+var DAYS_PER_WEEK = 7;
+var MonthDayGrid = /** @class */ (function (_super) {
+    __extends(MonthDayGrid, _super);
+    function MonthDayGrid() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    if (!CDS.isEqual(nextProps.maxDate, this.props.maxDate)) {
-      return true;
+    MonthDayGrid.prototype.shouldComponentUpdate = function (nextProps) {
+        return this.props.days !== nextProps.days;
+    };
+    MonthDayGrid.prototype.render = function () {
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        this.cellStyles = getCellStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
+    };
+    MonthDayGrid.prototype.renderMain = function () {
+        var _this = this;
+        var leadingDays = Array.from({ length: this.props.offset }, function (_, i) { return (React.createElement("div", { key: "leading_".concat(i), className: _this.cellStyles.cell(_this.theme) })); });
+        var trailingOffset = DAYS_PER_WEEK - ((this.props.offset + this.props.days.length) % DAYS_PER_WEEK);
+        var trailingDays = Array.from({ length: trailingOffset }, function (_, i) { return (React.createElement("div", { key: "trailing_".concat(i), className: _this.cellStyles.cell(_this.theme) })); });
+        var days = this.props.days.map(function (day) {
+            return React.createElement(DayCellView, { date: day, key: "".concat(day.date, ".").concat(day.month, ".").concat(day.year) });
+        });
+        var weeks = divideToWeeks(leadingDays.concat(days, trailingDays));
+        return (React.createElement("div", { className: this.styles.monthDayGrid(this.theme) }, weeks.map(function (week, i) { return (React.createElement("div", { className: _this.styles.monthDayRow(_this.theme), key: "week_".concat(i) }, week)); })));
+    };
+    MonthDayGrid = __decorate([
+        withRenderEnvironment
+    ], MonthDayGrid);
+    return MonthDayGrid;
+}(React.Component));
+function divideToWeeks(days) {
+    var weeks = [];
+    for (var i = 0; i < days.length; i += DAYS_PER_WEEK) {
+        var week = days.slice(i, i + DAYS_PER_WEEK);
+        weeks.push(week);
     }
-    return this.props.days !== nextProps.days;
-  };
-  MonthDayGrid.prototype.render = function () {
-    var _this = this;
-    return React.createElement("div", null,
-    React.createElement("div", { style: {
-        width: this.props.offset * config_1["default"].DAY_HEIGHT,
-        display: 'inline-block' } }),
-
-    this.props.days.map(function (day) {
-      var isWeekend = _this.props.isHoliday(day);
-      return React.createElement(DayCellView_1.DayCellView, { date: day, key: day.date + "." + day.month + "." + day.year, minDate: _this.props.minDate, maxDate: _this.props.maxDate, today: _this.props.today, value: _this.props.value, isWeekend: isWeekend, onDateClick: _this.props.onDateClick });
-    }));
-  };
-  MonthDayGrid.defaultProps = {
-    isHoliday: function isHoliday(day) {return day.isWeekend;} };
-
-  return MonthDayGrid;
-}(React.Component);
+    return weeks;
+}
+//# sourceMappingURL=Month.js.map

package/components/Calendar/Month.js.map

@@ -1 +1 @@
-{"version":3,"file":"Month.js","sourceRoot":"","sources":["Month.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Month.js","sourceRoot":"","sources":["../../../components/Calendar/Month.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { type JSX } from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport type { DateSelect } from '../../internal/DateSelect/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\n\nimport type { MonthViewModel } from './MonthViewModel.js';\nimport type { DayCellViewModel } from './DayCellViewModel.js';\nimport { MonthView } from './MonthView.js';\nimport { DayCellView } from './DayCellView.js';\nimport * as CalendarScrollEvents from './CalendarScrollEvents.js';\nimport { getStyles } from './MonthView.styles.js';\nimport { getStyles as getCellStyles } from './DayCellView.styles.js';\n\ninterface MonthProps {\n  top: number;\n  month: MonthViewModel;\n  onMonthYearChange: (monthNative: number, year: number) => void;\n}\n\nexport class Month extends React.Component<MonthProps> {\n  private theme!: Theme;\n\n  private monthSelect: DateSelect | null = null;\n  private yearSelect: DateSelect | null = null;\n\n  public shouldComponentUpdate(nextProps: MonthProps) {\n    if (this.props.top !== nextProps.top) {\n      return true;\n    }\n\n    return this.props.month !== nextProps.month;\n  }\n\n  public componentDidMount() {\n    CalendarScrollEvents.addListener(this.closeSelects);\n  }\n\n  public render(): React.JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain(): JSX.Element {\n    const { month, top } = this.props;\n    return (\n      <MonthView\n        firstDayOffset={month.offset}\n        height={month.getHeight(this.theme)}\n        isFirstInYear={month.isFirstInYear}\n        isLastInYear={month.isLastInYear}\n        month={month.month}\n        top={top}\n        year={month.year}\n        onMonthSelect={this.handleMonthSelect}\n        onYearSelect={this.handleYearSelect}\n        monthSelectRef={this.monthRef}\n        yearSelectRef={this.yearRef}\n      >\n        {this.renderCells()}\n      </MonthView>\n    );\n  }\n\n  private renderCells(): JSX.Element {\n    return <MonthDayGrid days={this.props.month.days} offset={this.props.month.offset} />;\n  }\n\n  private closeSelects = (): void => {\n    if (this.monthSelect) {\n      this.monthSelect.close();\n    }\n    if (this.yearSelect) {\n      this.yearSelect.close();\n    }\n  };\n\n  private monthRef = (monthSelect: DateSelect | null): void => {\n    this.monthSelect = monthSelect;\n  };\n\n  private yearRef = (yearSelect: DateSelect | null): void => {\n    this.yearSelect = yearSelect;\n  };\n\n  private handleMonthSelect = (month: number): void => {\n    this.props.onMonthYearChange(month, this.props.month.year);\n  };\n\n  private handleYearSelect = (year: number): void => {\n    this.props.onMonthYearChange(this.props.month.month, year);\n  };\n}\n\nconst DAYS_PER_WEEK = 7;\n\ninterface MonthDayGridProps {\n  days: DayCellViewModel[];\n  offset: number;\n}\n\n@withRenderEnvironment\nclass MonthDayGrid extends React.Component<MonthDayGridProps> {\n  private styles!: ReturnType<typeof getStyles>;\n  private cellStyles!: ReturnType<typeof getCellStyles>;\n  private theme!: Theme;\n  private emotion!: Emotion;\n\n  public shouldComponentUpdate(nextProps: MonthDayGridProps) {\n    return this.props.days !== nextProps.days;\n  }\n\n  public render(): JSX.Element {\n    this.styles = getStyles(this.emotion);\n    this.cellStyles = getCellStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain(): JSX.Element {\n    const leadingDays = Array.from({ length: this.props.offset }, (_, i) => (\n      <div key={`leading_${i}`} className={this.cellStyles.cell(this.theme)} />\n    ));\n    const trailingOffset = DAYS_PER_WEEK - ((this.props.offset + this.props.days.length) % DAYS_PER_WEEK);\n    const trailingDays = Array.from({ length: trailingOffset }, (_, i) => (\n      <div key={`trailing_${i}`} className={this.cellStyles.cell(this.theme)} />\n    ));\n    const days = this.props.days.map((day) => {\n      return <DayCellView date={day} key={`${day.date}.${day.month}.${day.year}`} />;\n    });\n    const weeks = divideToWeeks(leadingDays.concat(days, trailingDays));\n    return (\n      <div className={this.styles.monthDayGrid(this.theme)}>\n        {weeks.map((week, i) => (\n          <div className={this.styles.monthDayRow(this.theme)} key={`week_${i}`}>\n            {week}\n          </div>\n        ))}\n      </div>\n    );\n  }\n}\n\nfunction divideToWeeks<T>(days: T[]): T[][] {\n  const weeks: T[][] = [];\n  for (let i = 0; i < days.length; i += DAYS_PER_WEEK) {\n    const week = days.slice(i, i + DAYS_PER_WEEK);\n    weeks.push(week);\n  }\n  return weeks;\n}\n"]}

package/components/Calendar/MonthView.d.ts

@@ -1,25 +1,22 @@
-import * as React from 'react';
-import * as CDS from './CalendarDateShape';
-import DateSelect from '../DateSelect';
-interface MonthViewProps {
-    children: React.ReactNode;
-    firstDayOffset: number;
-    height: number;
-    isFirstInYear?: boolean;
-    isLastInYear?: boolean;
-    maxDate?: CDS.CalendarDateShape;
-    minDate?: CDS.CalendarDateShape;
-    month: number;
-    top: number;
-    year: number;
-    onMonthSelect: (month: number) => void;
-    onYearSelect: (month: number) => void;
-    monthSelectRef: (select: DateSelect | null) => void;
-    yearSelectRef: (select: DateSelect | null) => void;
-}
-export declare class MonthView extends React.Component<MonthViewProps> {
-    private theme;
-    render(): JSX.Element;
-    private renderMain;
-}
-export {};
+import React from 'react';
+import type { Nullable } from '../..//typings/utility-types.js';
+import { DateSelect } from '../../internal/DateSelect/index.js';
+import * as CDS from './CalendarDateShape.js';
+export declare const getMinMonth: (year: number, minDate: Nullable<CDS.CalendarDateShape>) => number;
+export declare const getMaxMonth: (year: number, maxDate: Nullable<CDS.CalendarDateShape>) => number;
+interface MonthViewProps {
+    children: React.ReactNode;
+    firstDayOffset: number;
+    height: number;
+    isFirstInYear?: boolean;
+    isLastInYear?: boolean;
+    month: number;
+    top: number;
+    year: number;
+    onMonthSelect: (month: number) => void;
+    onYearSelect: (month: number) => void;
+    monthSelectRef: (select: DateSelect | null) => void;
+    yearSelectRef: (select: DateSelect | null) => void;
+}
+export declare function MonthView(props: MonthViewProps): React.JSX.Element;
+export {};

package/components/Calendar/MonthView.js

@@ -1,72 +1,60 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = tslib_1.__importStar(require("react"));
-var CDS = tslib_1.__importStar(require("./CalendarDateShape"));
-var config_1 = tslib_1.__importDefault(require("./config"));
-var MonthView_module_less_1 = tslib_1.__importDefault(require("./MonthView.module.css"));
-var DateSelect_1 = tslib_1.__importDefault(require("../DateSelect"));
-var Emotion_1 = require("../../lib/theming/Emotion");
-var MonthView_styles_1 = tslib_1.__importDefault(require("./MonthView.styles"));
-var ThemeConsumer_1 = tslib_1.__importDefault(require("../ThemeConsumer"));
-var ColorFunctions_1 = tslib_1.__importDefault(require("../../lib/styles/ColorFunctions"));
-var MonthView = /** @class */function (_super) {
-  tslib_1.__extends(MonthView, _super);
-  function MonthView() {
-    return _super !== null && _super.apply(this, arguments) || this;
-  }
-  MonthView.prototype.render = function () {
-    var _this = this;
-    return React.createElement(ThemeConsumer_1["default"], null, function (theme) {
-      _this.theme = theme;
-      return _this.renderMain();
-    });
-  };
-  MonthView.prototype.renderMain = function () {
-    var _a;
-    var _b = this.props,children = _b.children,height = _b.height,isFirstInYear = _b.isFirstInYear,isLastInYear = _b.isLastInYear,maxDate = _b.maxDate,minDate = _b.minDate,month = _b.month,top = _b.top,year = _b.year,onMonthSelect = _b.onMonthSelect,onYearSelect = _b.onYearSelect,monthSelectRef = _b.monthSelectRef,yearSelectRef = _b.yearSelectRef;
+import React, { useContext } from 'react';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { useResponsiveLayout } from '../../components/ResponsiveLayout/index.js';
+import { DateSelect } from '../../internal/DateSelect/index.js';
+import { getStyles } from './MonthView.styles.js';
+import { themeConfig } from './config.js';
+import * as CDS from './CalendarDateShape.js';
+import { CalendarDataTids } from './Calendar.js';
+import { CalendarContext } from './CalendarContext.js';
+export var getMinMonth = function (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;
+};
+export var getMaxMonth = function (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;
+};
+export function MonthView(props) {
+    var _a, _b;
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
+    var _c = useContext(CalendarContext), minDate = _c.minDate, maxDate = _c.maxDate;
+    var isMobile = useResponsiveLayout().isMobile;
+    var children = 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;
-    var headerTop = isHeaderSticky ? Math.min(-top, height - config_1["default"].MONTH_TITLE_HEIGHT) : 0;
-    var alpha = isHeaderSticky ? (height + top - config_1["default"].MONTH_TITLE_HEIGHT) / 10 : 1;
-    var borderBottomColor = ColorFunctions_1["default"].fade(this.theme.calendarMonthTitleBorderBottomColor, alpha);
+    var headerTop = isHeaderSticky ? Math.min(-top, height - themeConfig(theme).MONTH_TITLE_HEIGHT) : 0;
+    var alpha = isHeaderSticky ? (height + top - themeConfig(theme).MONTH_TITLE_HEIGHT) / 10 : 1;
+    var borderBottomColor = "color-mix(in srgb, ".concat(theme.calendarMonthTitleBorderBottomColor, ", transparent ").concat(Math.max(alpha, 0), "%)");
     var isYearVisible = isFirstInYear || isHeaderSticky;
     var yearTop = isHeaderSticky && !isLastInYear ? -headerTop - top : 0;
-    var monthSelectDisabled = top > 40 || headerTop < 0 || headerTop >= height - config_1["default"].MONTH_TITLE_HEIGHT;
-    var yearSelectDisabled = top > 40 || isLastInYear && top < -height + config_1["default"].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;
-    };
-    return React.createElement("div", { className: MonthView_module_less_1["default"].month, style: { top: top }, key: month + '-' + year },
-    React.createElement("div", { style: { lineHeight: config_1["default"].MONTH_TITLE_HEIGHT + "px", top: headerTop, borderBottomColor: borderBottomColor }, className: Emotion_1.cx((_a = {},
-      _a[MonthView_module_less_1["default"].monthTitle] = true,
-      _a[MonthView_styles_1["default"].monthTitle(this.theme)] = true,
-      _a[MonthView_module_less_1["default"].headerSticky] = isHeaderSticky,
-      _a[MonthView_styles_1["default"].headerSticky(this.theme)] = isHeaderSticky,
-      _a)) },
-    React.createElement("div", { className: MonthView_module_less_1["default"].headerMonth },
-    React.createElement(DateSelect_1["default"], { disabled: monthSelectDisabled, width: 85, type: "month", value: month, onChange: onMonthSelect, ref: !monthSelectDisabled ? monthSelectRef : undefined, minValue: getMinMonth(year), maxValue: getMaxMonth(year) })),
-    isYearVisible && React.createElement("div", { className: MonthView_module_less_1["default"].headerYear, style: { top: yearTop } },
-    React.createElement(DateSelect_1["default"], { disabled: yearSelectDisabled, width: 50, type: "year", value: year, minValue: minDate ? minDate.year : undefined, maxValue: maxDate ? maxDate.year : undefined, onChange: onYearSelect, ref: !yearSelectDisabled ? yearSelectRef : undefined }))),
-    children);
-  };
-  return MonthView;
-}(React.Component);
-exports.MonthView = MonthView;
+    var monthSelectDisabled = top > 52 || headerTop < 0 || headerTop >= height - themeConfig(theme).MONTH_TITLE_HEIGHT;
+    var yearSelectDisabled = top > 52 || (isLastInYear && top < -height + themeConfig(theme).MONTH_TITLE_HEIGHT);
+    return (React.createElement("div", { "data-tid": CalendarDataTids.month, className: cx((_a = {}, _a[styles.month(theme)] = true, _a[styles.monthMobile()] = isMobile, _a)), style: { top: top }, key: month + '-' + year },
+        React.createElement("div", { style: { top: headerTop }, className: cx((_b = {},
+                _b[styles.header()] = true,
+                _b[styles.headerSticky(theme)] = isHeaderSticky,
+                _b)) },
+            React.createElement("div", { style: { borderBottomColor: borderBottomColor }, className: styles.monthTitle(theme) },
+                React.createElement("div", { "data-tid": CalendarDataTids.headerMonth, className: styles.headerMonth(theme) },
+                    React.createElement(DateSelect, { disabled: monthSelectDisabled, width: isMobile ? '6em' : 85, type: "month", value: month, onValueChange: onMonthSelect, ref: !monthSelectDisabled ? monthSelectRef : undefined, minValue: getMinMonth(year, minDate), maxValue: getMaxMonth(year, maxDate) })),
+                isYearVisible && (React.createElement("div", { "data-tid": CalendarDataTids.headerYear, className: styles.headerYear(theme), style: { top: yearTop } },
+                    React.createElement(DateSelect, { disabled: yearSelectDisabled, width: isMobile ? '3.5em' : 50, type: "year", value: year, minValue: minDate ? minDate.year : undefined, maxValue: maxDate ? maxDate.year : undefined, onValueChange: onYearSelect, ref: !yearSelectDisabled ? yearSelectRef : undefined }))))),
+        children));
+}
+//# sourceMappingURL=MonthView.js.map

package/components/Calendar/MonthView.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonthView.js","sourceRoot":"","sources":["MonthView.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MonthView.js","sourceRoot":"","sources":["../../../components/Calendar/MonthView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext } from 'react';\n\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { useResponsiveLayout } from '../../components/ResponsiveLayout/index.js';\nimport type { Nullable } from '../..//typings/utility-types.js';\nimport { DateSelect } from '../../internal/DateSelect/index.js';\n\nimport { getStyles } from './MonthView.styles.js';\nimport { themeConfig } from './config.js';\nimport * as CDS from './CalendarDateShape.js';\nimport { CalendarDataTids } from './Calendar.js';\nimport { CalendarContext } from './CalendarContext.js';\n\nexport const getMinMonth = (year: number, minDate: Nullable<CDS.CalendarDateShape>): number => {\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>): number => {\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): React.JSX.Element {\n  const theme = useContext(ThemeContext);\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\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 = `color-mix(in srgb, ${theme.calendarMonthTitleBorderBottomColor}, transparent ${Math.max(alpha, 0)}%)`;\n  const isYearVisible = isFirstInYear || isHeaderSticky;\n  const yearTop = isHeaderSticky && !isLastInYear ? -headerTop - top : 0;\n  const monthSelectDisabled = top > 52 || headerTop < 0 || headerTop >= height - themeConfig(theme).MONTH_TITLE_HEIGHT;\n  const yearSelectDisabled = top > 52 || (isLastInYear && top < -height + themeConfig(theme).MONTH_TITLE_HEIGHT);\n\n  return (\n    <div\n      data-tid={CalendarDataTids.month}\n      className={cx({ [styles.month(theme)]: true, [styles.monthMobile()]: isMobile })}\n      style={{ top }}\n      key={month + '-' + year}\n    >\n      <div\n        style={{ top: headerTop }}\n        className={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={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          </div>\n          {isYearVisible && (\n            <div data-tid={CalendarDataTids.headerYear} className={styles.headerYear(theme)} style={{ top: yearTop }}>\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            </div>\n          )}\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n}\n"]}

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

@@ -1,6 +1,13 @@
-import { ITheme } from '../../lib/theming/Theme';
-declare const jsStyles: {
-    headerSticky(t: ITheme): string;
-    monthTitle(t: ITheme): string;
-};
-export default jsStyles;
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    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/components/Calendar/MonthView.styles.js

@@ -1,14 +1,47 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var Emotion_1 = require("../../lib/theming/Emotion");
-var jsStyles = {
-  headerSticky: function headerSticky(t) {
-    return Emotion_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), t.calendarMonthHeaderStickedBgColor);
-  },
-  monthTitle: function monthTitle(t) {
-    return Emotion_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      border-bottom: 1px solid ", ";\n    "], ["\n      border-bottom: 1px solid ", ";\n    "])), t.calendarMonthTitleBorderBottomColor);
-  } };
-
-exports["default"] = jsStyles;
-var templateObject_1, templateObject_2;
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        headerMonth: function (t) {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: inline-block;\n      padding: ", " 0 ", ";\n    "], ["\n      display: inline-block;\n      padding: ", " 0 ", ";\n    "])), t.calendarMonthTitlePaddingTop, t.calendarMonthTitlePaddingBottom);
+        },
+        headerYear: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      display: inline-block;\n      position: absolute;\n      right: 0;\n      padding: ", " 0 ", ";\n    "], ["\n      display: inline-block;\n      position: absolute;\n      right: 0;\n      padding: ", " 0 ", ";\n    "])), t.calendarMonthTitlePaddingTop, t.calendarMonthTitlePaddingBottom);
+        },
+        month: function (t) {
+            var width = parseInt(t.calendarCellWidth) * 7;
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      width: ", "px;\n    "], ["\n      position: absolute;\n      width: ", "px;\n    "])), width);
+        },
+        monthMobile: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
+        },
+        header: function () {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      position: relative;\n    "], ["\n      position: relative;\n    "])));
+        },
+        headerSticky: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background-color: ", ";\n      z-index: 2;\n    "], ["\n      background-color: ", ";\n      z-index: 2;\n    "])), t.calendarMonthHeaderStickedBgColor);
+        },
+        monthTitle: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      border-bottom: 1px solid ", ";\n      font-weight: ", ";\n      margin: 0 ", " ", ";\n      line-height: ", ";\n    "], ["\n      border-bottom: 1px solid ", ";\n      font-weight: ", ";\n      margin: 0 ", " ", ";\n      line-height: ", ";\n    "])), t.calendarMonthTitleBorderBottomColor, t.dateSelectFontWeight, t.calendarMonthTitleMarginX, t.calendarMonthTitleMarginBottom, t.calendarMonthTitleLineHeight);
+        },
+        /* Note: this could've been
+         * display: grid;
+         * grid-template-columns: repeat(7, minmax(0, 1fr));
+         */
+        monthDayGrid: function (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      line-height: ", ";\n      display: flex;\n      flex-direction: column;\n      padding: ", " 0px;\n    "], ["\n      line-height: ", ";\n      display: flex;\n      flex-direction: column;\n      padding: ", " 0px;\n    "])), t.calendarCellLineHeight, t.calendarGridRowSpacing);
+        },
+        monthDayRow: function (t) {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      display: flex;\n      justify-content: space-between;\n\n      & + & {\n        margin-top: ", ";\n      }\n    "], ["\n      display: flex;\n      justify-content: space-between;\n\n      & + & {\n        margin-top: ", ";\n      }\n    "])), t.calendarGridRowSpacing);
+        },
+        nativeSelect: function () {
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\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      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    "])));
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+//# sourceMappingURL=MonthView.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MonthView.styles.js","sourceRoot":"","sources":["MonthView.styles.ts"],"names":[],"mappings":";;;AAAA,qDAAgD;AAGhD,IAAM,QAAQ,GAAG;IACf,YAAY,YAAC,CAAS;QACpB,OAAO,aAAG,kHAAA,4BACY,EAAmC,SACxD,KADqB,CAAC,CAAC,iCAAiC,EACvD;IACJ,CAAC;IAED,UAAU,YAAC,CAAS;QAClB,OAAO,aAAG,yHAAA,mCACmB,EAAqC,SACjE,KAD4B,CAAC,CAAC,mCAAmC,EAChE;IACJ,CAAC;CACF,CAAC;AAEF,kBAAe,QAAQ,CAAC"}
+{"version":3,"file":"MonthView.styles.js","sourceRoot":"","sources":["../../../components/Calendar/MonthView.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,WAAW,YAAC,CAAQ;YAClB,OAAO,GAAG,sIAAA,iDAEG,EAA8B,KAAM,EAAiC,SACjF,KADY,CAAC,CAAC,4BAA4B,EAAM,CAAC,CAAC,+BAA+B,EAChF;QACJ,CAAC;QAED,UAAU,YAAC,CAAQ;YACjB,OAAO,GAAG,kLAAA,6FAIG,EAA8B,KAAM,EAAiC,SACjF,KADY,CAAC,CAAC,4BAA4B,EAAM,CAAC,CAAC,+BAA+B,EAChF;QACJ,CAAC;QAED,KAAK,YAAC,CAAQ;YACZ,IAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;YAChD,OAAO,GAAG,4HAAA,4CAEC,EAAK,WACf,KADU,KAAK,EACd;QACJ,CAAC;QAED,WAAW;YACT,OAAO,GAAG,+FAAA,4BAET,KAAC;QACJ,CAAC;QAED,MAAM;YACJ,OAAO,GAAG,sGAAA,mCAET,KAAC;QACJ,CAAC;QAED,YAAY,YAAC,CAAQ;YACnB,OAAO,GAAG,6HAAA,4BACY,EAAmC,4BAExD,KAFqB,CAAC,CAAC,iCAAiC,EAEvD;QACJ,CAAC;QAED,UAAU,YAAC,CAAQ;YACjB,OAAO,GAAG,iMAAA,mCACmB,EAAqC,wBACjD,EAAsB,qBACzB,EAA2B,GAAI,EAAgC,wBAC5D,EAA8B,SAC9C,KAJ4B,CAAC,CAAC,mCAAmC,EACjD,CAAC,CAAC,oBAAoB,EACzB,CAAC,CAAC,yBAAyB,EAAI,CAAC,CAAC,8BAA8B,EAC5D,CAAC,CAAC,4BAA4B,EAC7C;QACJ,CAAC;QAED;;;WAGG;QACH,YAAY,YAAC,CAAQ;YACnB,OAAO,GAAG,oLAAA,uBACO,EAAwB,yEAG5B,EAAwB,aACpC,KAJgB,CAAC,CAAC,sBAAsB,EAG5B,CAAC,CAAC,sBAAsB,EACnC;QACJ,CAAC;QAED,WAAW,YAAC,CAAQ;YAClB,OAAO,GAAG,6LAAA,sGAKQ,EAAwB,kBAEzC,KAFiB,CAAC,CAAC,sBAAsB,EAExC;QACJ,CAAC;QAED,YAAY;YACV,OAAO,GAAG,0QAAA,qMAUT,KAAC;QACJ,CAAC;KACF,CAAC;AA1F8D,CA0F9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  headerMonth(t: Theme) {\n    return css`\n      display: inline-block;\n      padding: ${t.calendarMonthTitlePaddingTop} 0 ${t.calendarMonthTitlePaddingBottom};\n    `;\n  },\n\n  headerYear(t: Theme) {\n    return 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 css`\n      position: absolute;\n      width: ${width}px;\n    `;\n  },\n\n  monthMobile() {\n    return css`\n      width: 100%;\n    `;\n  },\n\n  header() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  headerSticky(t: Theme) {\n    return css`\n      background-color: ${t.calendarMonthHeaderStickedBgColor};\n      z-index: 2;\n    `;\n  },\n\n  monthTitle(t: Theme) {\n    return 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 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 css`\n      display: flex;\n      justify-content: space-between;\n\n      & + & {\n        margin-top: ${t.calendarGridRowSpacing};\n      }\n    `;\n  },\n\n  nativeSelect() {\n    return 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"]}