@skbkontur/react-ui 0.0.0-fed57d84fb → 0.7.0-beta.1

package/components/Calendar/CalendarDay.d.ts

@@ -0,0 +1,20 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+export interface CalendarDayProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /** Устанавливает, является ли день текущим. */
+    isToday?: boolean;
+    /** Устанавливает, является ли день выбранным. */
+    isSelected?: boolean;
+    /** Устанавливает, является ли день недоступным. */
+    isDisabled?: boolean;
+    /** Устанавливает, является ли день выходным. */
+    isWeekend?: boolean;
+    /** Задает день. */
+    date: string;
+}
+/**
+ * Компонент дня `CalendarDay` из Calendar.
+ *
+ * @visibleName Calendar.Day
+ */
+export declare const CalendarDay: React.MemoExoticComponent<import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<HTMLButtonElement, PropsWithChildren<CalendarDayProps>> & Record<never, never>>;

package/components/Calendar/CalendarDay.js

@@ -0,0 +1,62 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useContext, memo, useCallback } from 'react';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { DatePickerLocaleHelper } from '../DatePicker/locale/index.js';
+import { InternalDate } from '../../lib/date/InternalDate.js';
+import { LocaleContext } from '../../lib/locale/index.js';
+import { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';
+import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
+import { getStyles } from './DayCellView.styles.js';
+import { CalendarDataTids } from './Calendar.js';
+/**
+ * Компонент дня `CalendarDay` из Calendar.
+ *
+ * @visibleName Calendar.Day
+ */
+export var CalendarDay = memo(forwardRefAndName('CalendarDay', function CalendarDay(_a, ref) {
+    var _b, _c;
+    var isToday = _a.isToday, isSelected = _a.isSelected, isDisabled = _a.isDisabled, isWeekend = _a.isWeekend, date = _a.date, onDayClick = _a.onDayClick, onClick = _a.onClick, children = _a.children, className = _a.className, rest = __rest(_a, ["isToday", "isSelected", "isDisabled", "isWeekend", "date", "onDayClick", "onClick", "children", "className"]);
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
+    var langCode = useContext(LocaleContext).langCode;
+    var internalDate = new InternalDate({ langCode: langCode, value: date });
+    var locale = useLocaleForControl('Calendar', DatePickerLocaleHelper);
+    var ariaLabel = "".concat(locale.dayCellChooseDateAriaLabel, ": ").concat(internalDate.toA11YFormat());
+    var handleClick = useCallback(function (e) {
+        onDayClick();
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    }, [onDayClick, onClick]);
+    var day = internalDate.getComponentsLikeNumber().date;
+    var caption = children !== null && children !== void 0 ? children : day;
+    return (React.createElement("button", __assign({ ref: ref, "data-tid": CalendarDataTids.dayCell, "aria-label": ariaLabel, tabIndex: -1, disabled: isDisabled, onClick: handleClick, className: cx((_b = {},
+            _b[styles.day(theme)] = true,
+            _b[styles.weekend(theme)] = isWeekend,
+            _b[styles.selected(theme)] = isSelected,
+            _b), className) }, getVisualStateDataAttributes({ selected: isSelected }), rest),
+        React.createElement("span", { className: cx((_c = {}, _c[styles.todayCaption(theme)] = isToday, _c)) }, caption)));
+}));
+//# sourceMappingURL=CalendarDay.js.map

package/components/Calendar/CalendarDay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarDay.js","sourceRoot":"","sources":["../../../components/Calendar/CalendarDay.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { PropsWithChildren } from 'react';\nimport React, { useContext, memo, useCallback } from 'react';\n\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { DatePickerLocaleHelper } from '../DatePicker/locale/index.js';\nimport { InternalDate } from '../../lib/date/InternalDate.js';\nimport { LocaleContext } from '../../lib/locale/index.js';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\n\nimport { getStyles } from './DayCellView.styles.js';\nimport { CalendarDataTids } from './Calendar.js';\n\nexport interface CalendarDayProps extends React.HTMLAttributes<HTMLButtonElement> {\n  /** Устанавливает, является ли день текущим. */\n  isToday?: boolean;\n\n  /** Устанавливает, является ли день выбранным. */\n  isSelected?: boolean;\n\n  /** Устанавливает, является ли день недоступным. */\n  isDisabled?: boolean;\n\n  /** Устанавливает, является ли день выходным. */\n  isWeekend?: boolean;\n\n  /** Задает день. */\n  date: string;\n\n  /** Задает функцию, которая вызывается при клике на день. Необходима для внутренней работы Calendar. Не предназначена для переопределения. Вместо этого, следует использовать стандартный `onClick`.\n   * @internal @ignore\n   */\n  onDayClick: () => void;\n}\n\n/**\n * Компонент дня `CalendarDay` из Calendar.\n *\n * @visibleName Calendar.Day\n */\nexport const CalendarDay = memo(\n  forwardRefAndName(\n    'CalendarDay',\n    function CalendarDay(\n      {\n        isToday,\n        isSelected,\n        isDisabled,\n        isWeekend,\n        date,\n        onDayClick,\n        onClick,\n        children,\n        className,\n        ...rest\n      }: PropsWithChildren<CalendarDayProps>,\n      ref: React.Ref<HTMLButtonElement>,\n    ) {\n      const theme = useContext(ThemeContext);\n      const { cx } = useEmotion();\n      const styles = useStyles(getStyles);\n\n      const { langCode } = useContext(LocaleContext);\n      const internalDate = new InternalDate({ langCode, value: date });\n\n      const locale = useLocaleForControl('Calendar', DatePickerLocaleHelper);\n      const ariaLabel = `${locale.dayCellChooseDateAriaLabel}: ${internalDate.toA11YFormat()}`;\n\n      const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n        (e) => {\n          onDayClick();\n          onClick?.(e);\n        },\n        [onDayClick, onClick],\n      );\n\n      const { date: day } = internalDate.getComponentsLikeNumber();\n      const caption = children ?? day;\n\n      return (\n        <button\n          ref={ref}\n          data-tid={CalendarDataTids.dayCell}\n          aria-label={ariaLabel}\n          tabIndex={-1}\n          disabled={isDisabled}\n          onClick={handleClick}\n          className={cx(\n            {\n              [styles.day(theme)]: true,\n              [styles.weekend(theme)]: isWeekend,\n              [styles.selected(theme)]: isSelected,\n            },\n            className,\n          )}\n          {...getVisualStateDataAttributes({ selected: isSelected })}\n          {...rest}\n        >\n          <span className={cx({ [styles.todayCaption(theme)]: isToday })}>{caption}</span>\n        </button>\n      );\n    },\n  ),\n);\n"]}

package/components/Calendar/CalendarScrollEvents.d.ts

@@ -0,0 +1,4 @@
+export declare function addListener(callback: () => void): {
+    remove: () => void;
+};
+export declare function emit(): void;

package/components/Calendar/CalendarScrollEvents.js

@@ -0,0 +1,21 @@
+import { EventEmitter } from 'eventemitter3';
+var emitterCache;
+function getEmitter() {
+    if (!emitterCache) {
+        emitterCache = new EventEmitter();
+    }
+    return emitterCache;
+}
+export function addListener(callback) {
+    var emitter = getEmitter();
+    emitter.addListener('CalendarScroll', callback);
+    return {
+        remove: function () {
+            emitter.removeListener('CalendarScroll', callback);
+        },
+    };
+}
+export function emit() {
+    getEmitter().emit('CalendarScroll');
+}
+//# sourceMappingURL=CalendarScrollEvents.js.map

package/components/Calendar/CalendarScrollEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarScrollEvents.js","sourceRoot":"","sources":["../../../components/Calendar/CalendarScrollEvents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,IAAI,YAA0B,CAAC;AAC/B,SAAS,UAAU;IACjB,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,YAAY,GAAG,IAAI,YAAY,EAAE,CAAC;IACpC,CAAC;IACD,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,QAAoB;IAC9C,IAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,OAAO,CAAC,WAAW,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;IAChD,OAAO;QACL,MAAM;YACJ,OAAO,CAAC,cAAc,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;QACrD,CAAC;KACF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,IAAI;IAClB,UAAU,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;AACtC,CAAC","sourcesContent":["import { EventEmitter } from 'eventemitter3';\n\nlet emitterCache: EventEmitter;\nfunction getEmitter(): EventEmitter {\n  if (!emitterCache) {\n    emitterCache = new EventEmitter();\n  }\n  return emitterCache;\n}\n\nexport function addListener(callback: () => void): { remove: () => void } {\n  const emitter = getEmitter();\n  emitter.addListener('CalendarScroll', callback);\n  return {\n    remove() {\n      emitter.removeListener('CalendarScroll', callback);\n    },\n  };\n}\n\nexport function emit(): void {\n  getEmitter().emit('CalendarScroll');\n}\n"]}

package/components/Calendar/CalendarUtils.d.ts

@@ -0,0 +1,29 @@
+import type { Nullable } from '../../typings/utility-types.js';
+import type { Theme } from '../../lib/theming/Theme.js';
+import { MonthViewModel } from './MonthViewModel.js';
+import type { CalendarState } from './Calendar.js';
+import type { CalendarDateShape } from './CalendarDateShape.js';
+export declare const calculateScrollPosition: (months: MonthViewModel[], scrollPosition: number, deltaY: number, theme: Theme) => {
+    scrollPosition: number;
+    months: MonthViewModel[];
+    scrollDirection: number;
+};
+export declare const applyDelta: (deltaY: number, theme: Theme) => ({ scrollPosition, months }: Readonly<CalendarState>, { minDate, maxDate }: {
+    minDate: CalendarDateShape;
+    maxDate: CalendarDateShape;
+}) => {
+    scrollPosition: number;
+    scrollDirection: number;
+};
+export declare const isMonthVisible: (top: number, month: MonthViewModel, theme: Theme) => boolean;
+export declare const getMonthsHeight: (months: MonthViewModel[], theme: Theme) => number;
+export declare const getMonths: (month: number, year: number) => MonthViewModel[];
+export declare const getMonthInNativeFormat: (month: number) => number;
+export declare const getMonthInHumanFormat: (month: number) => number;
+export declare const getInitialDate: ({ today, date, minDate, maxDate, }: {
+    today: CalendarDateShape;
+    date?: Nullable<CalendarDateShape>;
+    minDate?: Nullable<CalendarDateShape>;
+    maxDate?: Nullable<CalendarDateShape>;
+}) => CalendarDateShape;
+export declare const getTodayDate: () => CalendarDateShape;

package/components/Calendar/CalendarUtils.js

@@ -0,0 +1,76 @@
+import { themeConfig } from './config.js';
+import { MonthViewModel } from './MonthViewModel.js';
+import { isGreater, isLess } from './CalendarDateShape.js';
+export var calculateScrollPosition = function (months, scrollPosition, deltaY, theme) {
+    var scrollDirection = deltaY > 0 ? 1 : -1;
+    var nextScrollPosition = scrollPosition - deltaY;
+    var nextMonths = months;
+    var firstMonth = months[0];
+    if (scrollDirection < 0 && nextScrollPosition >= firstMonth.getHeight(theme)) {
+        do {
+            nextScrollPosition -= nextMonths[0].getHeight(theme);
+            nextMonths = getMonths(firstMonth.month, firstMonth.year);
+        } while (nextScrollPosition >= nextMonths[0].getHeight(theme));
+    }
+    var lastMonth = months[months.length - 1];
+    if (scrollDirection > 0 && nextScrollPosition < 0) {
+        do {
+            nextScrollPosition += nextMonths[1].getHeight(theme);
+            nextMonths = getMonths(lastMonth.month, lastMonth.year);
+        } while (nextScrollPosition < 0);
+    }
+    return {
+        scrollPosition: nextScrollPosition,
+        months: nextMonths,
+        scrollDirection: scrollDirection,
+    };
+};
+export var applyDelta = function (deltaY, theme) {
+    return function (_a, _b) {
+        var scrollPosition = _a.scrollPosition, months = _a.months;
+        var minDate = _b.minDate, maxDate = _b.maxDate;
+        var scrollDirection = deltaY > 0 ? 1 : -1;
+        var isMinDateExceeded = minDate && scrollDirection < 0 && minDate.year * 12 + minDate.month > months[0].year * 12 + months[0].month;
+        var isMaxDateExceeded = maxDate && scrollDirection > 0 && maxDate.year * 12 + maxDate.month < months[1].year * 12 + months[1].month;
+        if (isMinDateExceeded) {
+            return { scrollPosition: 0, scrollDirection: scrollDirection };
+        }
+        if (isMaxDateExceeded) {
+            return { scrollPosition: months[2].getHeight(theme), scrollDirection: scrollDirection };
+        }
+        return calculateScrollPosition(months, scrollPosition, deltaY, theme);
+    };
+};
+export var isMonthVisible = function (top, month, theme) {
+    return top < themeConfig(theme).WRAPPER_HEIGHT && top > -month.getHeight(theme);
+};
+export var getMonthsHeight = function (months, theme) {
+    return months.reduce(function (a, b) { return a + b.getHeight(theme); }, 0);
+};
+export var getMonths = function (month, year) {
+    return [-1, 0, 1].map(function (x) { return MonthViewModel.create(month + x, year); });
+};
+export var getMonthInNativeFormat = function (month) { return month - 1; };
+export var getMonthInHumanFormat = function (month) { return month + 1; };
+export var getInitialDate = function (_a) {
+    var today = _a.today, date = _a.date, minDate = _a.minDate, maxDate = _a.maxDate;
+    if (date) {
+        return date;
+    }
+    if (minDate && isLess(today, minDate)) {
+        return minDate;
+    }
+    if (maxDate && isGreater(today, maxDate)) {
+        return maxDate;
+    }
+    return today;
+};
+export var getTodayDate = function () {
+    var date = new Date();
+    return {
+        date: date.getDate(),
+        month: date.getMonth(),
+        year: date.getFullYear(),
+    };
+};
+//# sourceMappingURL=CalendarUtils.js.map

package/components/Calendar/CalendarUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarUtils.js","sourceRoot":"","sources":["../../../components/Calendar/CalendarUtils.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Nullable } from '../../typings/utility-types.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nimport { themeConfig } from './config.js';\nimport { MonthViewModel } from './MonthViewModel.js';\nimport type { CalendarState } from './Calendar.js';\nimport type { CalendarDateShape } from './CalendarDateShape.js';\nimport { isGreater, isLess } from './CalendarDateShape.js';\n\nexport const calculateScrollPosition = (\n  months: MonthViewModel[],\n  scrollPosition: number,\n  deltaY: number,\n  theme: Theme,\n): { scrollPosition: number; months: MonthViewModel[]; scrollDirection: number } => {\n  const scrollDirection = deltaY > 0 ? 1 : -1;\n\n  let nextScrollPosition = scrollPosition - deltaY;\n  let nextMonths = months;\n\n  const firstMonth = months[0];\n  if (scrollDirection < 0 && nextScrollPosition >= firstMonth.getHeight(theme)) {\n    do {\n      nextScrollPosition -= nextMonths[0].getHeight(theme);\n      nextMonths = getMonths(firstMonth.month, firstMonth.year);\n    } while (nextScrollPosition >= nextMonths[0].getHeight(theme));\n  }\n\n  const lastMonth = months[months.length - 1];\n  if (scrollDirection > 0 && nextScrollPosition < 0) {\n    do {\n      nextScrollPosition += nextMonths[1].getHeight(theme);\n      nextMonths = getMonths(lastMonth.month, lastMonth.year);\n    } while (nextScrollPosition < 0);\n  }\n\n  return {\n    scrollPosition: nextScrollPosition,\n    months: nextMonths,\n    scrollDirection,\n  };\n};\n\nexport const applyDelta = (deltaY: number, theme: Theme) => {\n  return (\n    { scrollPosition, months }: Readonly<CalendarState>,\n    { minDate, maxDate }: { minDate: CalendarDateShape; maxDate: CalendarDateShape },\n  ): { scrollPosition: number; scrollDirection: number } => {\n    const scrollDirection = deltaY > 0 ? 1 : -1;\n    const isMinDateExceeded =\n      minDate && scrollDirection < 0 && minDate.year * 12 + minDate.month > months[0].year * 12 + months[0].month;\n\n    const isMaxDateExceeded =\n      maxDate && scrollDirection > 0 && maxDate.year * 12 + maxDate.month < months[1].year * 12 + months[1].month;\n\n    if (isMinDateExceeded) {\n      return { scrollPosition: 0, scrollDirection };\n    }\n\n    if (isMaxDateExceeded) {\n      return { scrollPosition: months[2].getHeight(theme), scrollDirection };\n    }\n\n    return calculateScrollPosition(months, scrollPosition, deltaY, theme);\n  };\n};\n\nexport const isMonthVisible = (top: number, month: MonthViewModel, theme: Theme): boolean => {\n  return top < themeConfig(theme).WRAPPER_HEIGHT && top > -month.getHeight(theme);\n};\n\nexport const getMonthsHeight = (months: MonthViewModel[], theme: Theme): number =>\n  months.reduce((a, b) => a + b.getHeight(theme), 0);\n\nexport const getMonths = (month: number, year: number): MonthViewModel[] => {\n  return [-1, 0, 1].map((x) => MonthViewModel.create(month + x, year));\n};\n\nexport const getMonthInNativeFormat = (month: number): number => month - 1;\n\nexport const getMonthInHumanFormat = (month: number): number => month + 1;\n\nexport const getInitialDate = ({\n  today,\n  date,\n  minDate,\n  maxDate,\n}: {\n  today: CalendarDateShape;\n  date?: Nullable<CalendarDateShape>;\n  minDate?: Nullable<CalendarDateShape>;\n  maxDate?: Nullable<CalendarDateShape>;\n}): CalendarDateShape => {\n  if (date) {\n    return date;\n  }\n\n  if (minDate && isLess(today, minDate)) {\n    return minDate;\n  }\n\n  if (maxDate && isGreater(today, maxDate)) {\n    return maxDate;\n  }\n\n  return today;\n};\n\nexport const getTodayDate = (): CalendarDateShape => {\n  const date = new Date();\n  return {\n    date: date.getDate(),\n    month: date.getMonth(),\n    year: date.getFullYear(),\n  };\n};\n"]}

package/components/Calendar/DayCellView.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { DayCellViewModel } from './DayCellViewModel.js';
+export interface DayCellViewProps {
+    date: DayCellViewModel;
+}
+export declare const DayCellView: (props: DayCellViewProps) => React.JSX.Element;

package/components/Calendar/DayCellView.js

@@ -0,0 +1,42 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useCallback, useContext } from 'react';
+import { useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { InternalDateTransformer } from '../../lib/date/InternalDateTransformer.js';
+import { getStyles } from './DayCellView.styles.js';
+import { CalendarContext } from './CalendarContext.js';
+import * as CDS from './CalendarDateShape.js';
+import { CalendarDay } from './CalendarDay.js';
+export var DayCellView = function (props) {
+    var _a, _b;
+    var date = props.date;
+    var _c = useContext(CalendarContext), value = _c.value, minDate = _c.minDate, maxDate = _c.maxDate, isHoliday = _c.isHoliday, renderDay = _c.renderDay, today = _c.today, onDateClick = _c.onDateClick;
+    var styles = useStyles(getStyles);
+    var theme = useContext(ThemeContext);
+    var isDisabled = !CDS.isBetween(date, minDate, maxDate);
+    var humanDateString = InternalDateTransformer.dateToHumanString(date);
+    var dayClickHandler = useCallback(function () {
+        onDateClick === null || onDateClick === void 0 ? void 0 : onDateClick(date);
+    }, [onDateClick, date]);
+    var dayProps = {
+        isToday: Boolean(today && CDS.isEqual(date, today)),
+        isSelected: Boolean(value && CDS.isEqual(date, value)),
+        isDisabled: isDisabled,
+        isWeekend: (_a = isHoliday === null || isHoliday === void 0 ? void 0 : isHoliday(humanDateString, date.isWeekend)) !== null && _a !== void 0 ? _a : date.isWeekend,
+        date: humanDateString,
+        onDayClick: dayClickHandler,
+    };
+    var dayElement = (_b = renderDay === null || renderDay === void 0 ? void 0 : renderDay(dayProps)) !== null && _b !== void 0 ? _b : React.createElement(CalendarDay, __assign({}, dayProps));
+    return React.createElement("div", { className: styles.cell(theme) }, dayElement);
+};
+//# sourceMappingURL=DayCellView.js.map

package/components/Calendar/DayCellView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DayCellView.js","sourceRoot":"","sources":["../../../components/Calendar/DayCellView.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AAEpF,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,KAAK,GAAG,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAM/C,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,KAAuB;;IACzC,IAAA,IAAI,GAAK,KAAK,KAAV,CAAW;IACjB,IAAA,KAAwE,UAAU,CAAC,eAAe,CAAC,EAAjG,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,OAAO,aAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA,EAAE,WAAW,iBAAgC,CAAC;IAC1G,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEvC,IAAM,UAAU,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IAE1D,IAAM,eAAe,GAAG,uBAAuB,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAExE,IAAM,eAAe,GAAG,WAAW,CAAC;QAClC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,IAAI,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;IAExB,IAAM,QAAQ,GAAqB;QACjC,OAAO,EAAE,OAAO,CAAC,KAAK,IAAI,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACnD,UAAU,EAAE,OAAO,CAAC,KAAK,IAAI,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACtD,UAAU,YAAA;QACV,SAAS,EAAE,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC,mCAAI,IAAI,CAAC,SAAS;QACzE,IAAI,EAAE,eAAe;QACrB,UAAU,EAAE,eAAe;KAC5B,CAAC;IAEF,IAAM,UAAU,GAAmC,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,QAAQ,CAAC,mCAAI,oBAAC,WAAW,eAAK,QAAQ,EAAI,CAAC;IAE1G,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,UAAU,CAAO,CAAC;AAChE,CAAC,CAAC","sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useCallback, useContext } from 'react';\n\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { InternalDateTransformer } from '../../lib/date/InternalDateTransformer.js';\n\nimport { getStyles } from './DayCellView.styles.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport type { DayCellViewModel } from './DayCellViewModel.js';\nimport * as CDS from './CalendarDateShape.js';\nimport type { CalendarDayProps } from './CalendarDay.js';\nimport { CalendarDay } from './CalendarDay.js';\n\nexport interface DayCellViewProps {\n  date: DayCellViewModel;\n}\n\nexport const DayCellView = (props: DayCellViewProps): React.JSX.Element => {\n  const { date } = props;\n  const { value, minDate, maxDate, isHoliday, renderDay, today, onDateClick } = useContext(CalendarContext);\n  const styles = useStyles(getStyles);\n  const theme = useContext(ThemeContext);\n\n  const isDisabled = !CDS.isBetween(date, minDate, maxDate);\n\n  const humanDateString = InternalDateTransformer.dateToHumanString(date);\n\n  const dayClickHandler = useCallback(() => {\n    onDateClick?.(date);\n  }, [onDateClick, date]);\n\n  const dayProps: CalendarDayProps = {\n    isToday: Boolean(today && CDS.isEqual(date, today)),\n    isSelected: Boolean(value && CDS.isEqual(date, value)),\n    isDisabled,\n    isWeekend: isHoliday?.(humanDateString, date.isWeekend) ?? date.isWeekend,\n    date: humanDateString,\n    onDayClick: dayClickHandler,\n  };\n\n  const dayElement: ReactElement<CalendarDayProps> = renderDay?.(dayProps) ?? <CalendarDay {...dayProps} />;\n\n  return <div className={styles.cell(theme)}>{dayElement}</div>;\n};\n"]}

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

@@ -0,0 +1,8 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    cell(t: Theme): string;
+    day(t: Theme): string;
+    selected(t: Theme): string;
+    weekend(t: Theme): string;
+    todayCaption(t: Theme): string;
+}>;

package/components/Calendar/DayCellView.styles.js

@@ -0,0 +1,28 @@
+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';
+import { resetButton } from '../../lib/styles/Mixins.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        cell: function (t) {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex: 1 1 ", ";\n      height: ", ";\n    "], ["\n      flex: 1 1 ", ";\n      height: ", ";\n    "])), t.calendarCellWidth, t.calendarCellHeight);
+        },
+        day: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", ";\n      width: 100%;\n      height: 100%;\n\n      background: ", ";\n      border: 1px solid transparent;\n      font-size: ", ";\n      padding: 0;\n      text-align: center;\n      user-select: none;\n      position: relative;\n      line-height: ", ";\n      border-radius: ", ";\n      transition:\n        0.15s ease background-color,\n        0.15s ease opacity;\n\n      // Expand the clickable area\n      &:before {\n        content: '';\n        position: absolute;\n        left: -1px;\n        top: -1px;\n        width: calc(100% + 2px);\n        height: calc(100% + 2px);\n      }\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ", ";\n          color: ", ";\n          cursor: pointer;\n        }\n      }\n\n      &:disabled {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n      &:active:hover:enabled {\n        color: ", ";\n      }\n    "], ["\n      ", ";\n      width: 100%;\n      height: 100%;\n\n      background: ", ";\n      border: 1px solid transparent;\n      font-size: ", ";\n      padding: 0;\n      text-align: center;\n      user-select: none;\n      position: relative;\n      line-height: ", ";\n      border-radius: ", ";\n      transition:\n        0.15s ease background-color,\n        0.15s ease opacity;\n\n      // Expand the clickable area\n      &:before {\n        content: '';\n        position: absolute;\n        left: -1px;\n        top: -1px;\n        width: calc(100% + 2px);\n        height: calc(100% + 2px);\n      }\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ", ";\n          color: ", ";\n          cursor: pointer;\n        }\n      }\n\n      &:disabled {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n      &:active:hover:enabled {\n        color: ", ";\n      }\n    "])), resetButton(), t.calendarCellBg, t.calendarCellFontSize, t.calendarCellLineHeight, t.calendarCellBorderRadius, t.calendarCellHoverBgColor, t.calendarCellHoverColor, t.calendarCellActiveHoverColor);
+        },
+        selected: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n    "], ["\n      background-color: ", ";\n      color: ", ";\n    "])), t.calendarCellSelectedBgColor, t.calendarCellSelectedFontColor);
+        },
+        weekend: function (t) {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.calendarCellWeekendColor);
+        },
+        todayCaption: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-bottom: 2px;\n      border-bottom: ", ";\n    "], ["\n      padding-bottom: 2px;\n      border-bottom: ", ";\n    "])), t.calendarCellTodayBorder);
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+//# sourceMappingURL=DayCellView.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DayCellView.styles.js","sourceRoot":"","sources":["../../../components/Calendar/DayCellView.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,uHAAA,oBACI,EAAmB,mBACrB,EAAoB,SAC/B,KAFa,CAAC,CAAC,iBAAiB,EACrB,CAAC,CAAC,kBAAkB,EAC9B;QACJ,CAAC;QACD,GAAG,YAAC,CAAQ;YACV,OAAO,GAAG,89BAAA,UACN,EAAa,kEAID,EAAgB,4DAEjB,EAAsB,2HAKpB,EAAwB,0BACtB,EAA0B,6YAiBnB,EAA0B,sBACrC,EAAwB,yLAU1B,EAA8B,kBAE1C,KA1CG,WAAW,EAAE,EAID,CAAC,CAAC,cAAc,EAEjB,CAAC,CAAC,oBAAoB,EAKpB,CAAC,CAAC,sBAAsB,EACtB,CAAC,CAAC,wBAAwB,EAiBnB,CAAC,CAAC,wBAAwB,EACrC,CAAC,CAAC,sBAAsB,EAU1B,CAAC,CAAC,4BAA4B,EAEzC;QACJ,CAAC;QAED,QAAQ,YAAC,CAAQ;YACf,OAAO,GAAG,8HAAA,4BACY,EAA6B,kBACxC,EAA+B,SACzC,KAFqB,CAAC,CAAC,2BAA2B,EACxC,CAAC,CAAC,6BAA6B,EACxC;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,+FAAA,iBACC,EAA0B,SACpC,KADU,CAAC,CAAC,wBAAwB,EACnC;QACJ,CAAC;QAED,YAAY,YAAC,CAAQ;YACnB,OAAO,GAAG,mIAAA,qDAES,EAAyB,SAC3C,KADkB,CAAC,CAAC,uBAAuB,EAC1C;QACJ,CAAC;KACF,CAAC;AAzE8D,CAyE9D,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';\nimport { resetButton } from '../../lib/styles/Mixins.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  cell(t: Theme) {\n    return css`\n      flex: 1 1 ${t.calendarCellWidth};\n      height: ${t.calendarCellHeight};\n    `;\n  },\n  day(t: Theme) {\n    return css`\n      ${resetButton()};\n      width: 100%;\n      height: 100%;\n\n      background: ${t.calendarCellBg};\n      border: 1px solid transparent;\n      font-size: ${t.calendarCellFontSize};\n      padding: 0;\n      text-align: center;\n      user-select: none;\n      position: relative;\n      line-height: ${t.calendarCellLineHeight};\n      border-radius: ${t.calendarCellBorderRadius};\n      transition:\n        0.15s ease background-color,\n        0.15s ease opacity;\n\n      // Expand the clickable area\n      &:before {\n        content: '';\n        position: absolute;\n        left: -1px;\n        top: -1px;\n        width: calc(100% + 2px);\n        height: calc(100% + 2px);\n      }\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ${t.calendarCellHoverBgColor};\n          color: ${t.calendarCellHoverColor};\n          cursor: pointer;\n        }\n      }\n\n      &:disabled {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n      &:active:hover:enabled {\n        color: ${t.calendarCellActiveHoverColor};\n      }\n    `;\n  },\n\n  selected(t: Theme) {\n    return css`\n      background-color: ${t.calendarCellSelectedBgColor};\n      color: ${t.calendarCellSelectedFontColor};\n    `;\n  },\n\n  weekend(t: Theme) {\n    return css`\n      color: ${t.calendarCellWeekendColor};\n    `;\n  },\n\n  todayCaption(t: Theme) {\n    return css`\n      padding-bottom: 2px;\n      border-bottom: ${t.calendarCellTodayBorder};\n    `;\n  },\n}));\n"]}

package/components/Calendar/DayCellViewModel.d.ts

@@ -0,0 +1,8 @@
+export declare class DayCellViewModel {
+    static create(date: number, month: number, year: number, isWeekend: boolean): DayCellViewModel;
+    date: number;
+    month: number;
+    year: number;
+    isWeekend: boolean;
+    constructor(date: number, month: number, year: number, isWeekend: boolean);
+}

package/components/Calendar/DayCellViewModel.js

@@ -0,0 +1,14 @@
+var DayCellViewModel = /** @class */ (function () {
+    function DayCellViewModel(date, month, year, isWeekend) {
+        this.date = date;
+        this.month = month;
+        this.year = year;
+        this.isWeekend = isWeekend;
+    }
+    DayCellViewModel.create = function (date, month, year, isWeekend) {
+        return new DayCellViewModel(date, month, year, isWeekend);
+    };
+    return DayCellViewModel;
+}());
+export { DayCellViewModel };
+//# sourceMappingURL=DayCellViewModel.js.map

package/components/Calendar/DayCellViewModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DayCellViewModel.js","sourceRoot":"","sources":["../../../components/Calendar/DayCellViewModel.ts"],"names":[],"mappings":"AAAA;IAaE,0BAAY,IAAY,EAAE,KAAa,EAAE,IAAY,EAAE,SAAkB;QACvE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IAjBa,uBAAM,GAApB,UAAqB,IAAY,EAAE,KAAa,EAAE,IAAY,EAAE,SAAkB;QAChF,OAAO,IAAI,gBAAgB,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;IAC5D,CAAC;IAgBH,uBAAC;AAAD,CAAC,AAnBD,IAmBC","sourcesContent":["export class DayCellViewModel {\n  public static create(date: number, month: number, year: number, isWeekend: boolean): DayCellViewModel {\n    return new DayCellViewModel(date, month, year, isWeekend);\n  }\n\n  public date: number;\n\n  public month: number;\n\n  public year: number;\n\n  public isWeekend: boolean;\n\n  constructor(date: number, month: number, year: number, isWeekend: boolean) {\n    this.date = date;\n    this.month = month;\n    this.year = year;\n    this.isWeekend = isWeekend;\n  }\n}\n"]}

package/components/Calendar/Month.d.ts

@@ -0,0 +1,23 @@
+import React, { type JSX } from 'react';
+import type { MonthViewModel } from './MonthViewModel.js';
+interface MonthProps {
+    top: number;
+    month: MonthViewModel;
+    onMonthYearChange: (monthNative: number, year: number) => void;
+}
+export declare class Month extends React.Component<MonthProps> {
+    private theme;
+    private monthSelect;
+    private yearSelect;
+    shouldComponentUpdate(nextProps: MonthProps): boolean;
+    componentDidMount(): void;
+    render(): React.JSX.Element;
+    renderMain(): JSX.Element;
+    private renderCells;
+    private closeSelects;
+    private monthRef;
+    private yearRef;
+    private handleMonthSelect;
+    private handleYearSelect;
+}
+export {};

package/components/Calendar/Month.js

@@ -0,0 +1,126 @@
+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);
+    };
+    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 __());
+    };
+})();
+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;
+    };
+    Month.prototype.componentDidMount = function () {
+        CalendarScrollEvents.addListener(this.closeSelects);
+    };
+    Month.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
+    };
+    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;
+    }
+    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 weeks;
+}
+//# sourceMappingURL=Month.js.map

package/components/Calendar/Month.js.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,22 @@
+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 {};