@skbkontur/react-ui 0.0.0-044e274f2c → 0.0.0-07d08325b0

package/components/Calendar/Calendar.d.ts

@@ -4,61 +4,38 @@ import { Nullable, Range } from '../../typings/utility-types';
 import { MonthViewModel } from './MonthViewModel';
 import { CalendarDayProps } from './CalendarDay';
 export interface CalendarProps extends CommonProps {
-    /**
-     * Вызывается при изменении `value`
-     *
-     * В аргументе хранится дата в формате `dd.mm.yyyy`
-     */
+    /** Задает функцию, которая вызывается при изменении value.
+     * @param {string} date - строка в формате `dd.mm.yyyy`. */
     onValueChange?: (date: string) => void;
-    /**
-     * Задаёт текущую дату
-     *
-     * Дата задаётся в формате `dd.mm.yyyy`
-     */
+    /** Задает текущую дату в формате `dd.mm.yyyy`. */
     value: Nullable<string>;
-    /**
-     * Задаёт максимальную возможную дату
-     *
-     * Дата задаётся в формате `dd.mm.yyyy`
-     */
+    /** Задает максимальную возможную дату в формате `dd.mm.yyyy`. */
     maxDate?: string;
-    /**
-     * Задаёт минимальную возможную дату
-     *
-     * Дата задаётся в формате `dd.mm.yyyy`
-     */
+    /** Задает минимальную возможную дату в формате `dd.mm.yyyy`. */
     minDate?: string;
-    /**
-     * Функция для определения праздничных дней
-     * @default (_day, isWeekend) => isWeekend
-     * @param {string} day - строка в формате `dd.mm.yyyy`
-     * @param {boolean} isWeekend - флаг выходного (суббота или воскресенье)
-     *
-     * @returns {boolean} `true` для выходного или `false` для рабочего дня
-     */
+    /** Задает начальную дату периода в формате `dd.mm.yyyy`. */
+    periodStartDate?: string;
+    /** Задает конечную дату периода в формате `dd.mm.yyyy`. */
+    periodEndDate?: string;
+    /** Задает функцию для определения праздничных дней.
+     * @default (_day, isWeekend) => isWeekend.
+     * @param {string} day - строка в формате `dd.mm.yyyy`.
+     * @param {boolean} isWeekend - флаг выходного (суббота или воскресенье).
+     * @returns {boolean} `true` для выходного или `false` для рабочего дня. */
     isHoliday?: (day: string, isWeekend: boolean) => boolean;
-    /**
-     * Позволяет задать начальный месяц
-     */
+    /** Задает начальный месяц. */
     initialMonth?: Range<1, 13>;
-    /**
-     * Позволяет задать начальный год
-     */
+    /** Задает начальный год. */
     initialYear?: number;
-    /**
-     * Метод отрисовки дат в календаре
+    /** Задает метод отрисовки дат в календаре.
      * @default (props: CalendarDayProps) => <CalendarDay {...props} />
-     * @param {CalendarDayProps} props
-     *
-     * @returns {ReactElement} Элемент, который отрисовывает контент числа месяца.
-     */
+     * @param {CalendarDayProps} props - параметры дня.
+     * @returns {ReactElement} элемент, который отрисовывает контент числа месяца. */
     renderDay?: (props: CalendarDayProps) => React.ReactElement;
-    /**
-     * Вызывается при каждом изменении месяца
+    /** Задает функцию, которая вызывается при каждом изменении месяца.
      * @param {CalendarMonthChangeInfo} changeInfo - информация о изменении отображаемого месяца, где
      * `month: number` - номер текущего отображаемого месяца от 1 до 12,
-     * `year: number` - отображаемый год,
-     */
+     * `year: number` - отображаемый год. */
     onMonthChange?: (changeInfo: CalendarMonthChangeInfo) => void;
 }
 export interface CalendarState {
@@ -80,7 +57,7 @@ export declare const CalendarDataTids: {
 };
 type DefaultProps = Required<Pick<CalendarProps, 'minDate' | 'maxDate' | 'isHoliday'>>;
 /**
- * Компонент календаря из [DatePicker](https://tech.skbkontur.ru/react-ui/#/Components/DatePicker)'а
+ * Компонент календаря `Calendar` из DatePicker'а помогает выбирать дату с помощью мыши.
  */
 export declare class Calendar extends React.Component<CalendarProps, CalendarState> {
     static __KONTUR_REACT_UI__: string;
@@ -90,8 +67,6 @@ export declare class Calendar extends React.Component<CalendarProps, CalendarSta
     static defaultProps: DefaultProps;
     private getProps;
     private theme;
-    private emotion;
-    private styles;
     private wheelEndTimeout;
     private root;
     private animation;

package/components/Calendar/Calendar.md

@@ -1,6 +1,4 @@
-
-
-Календарь с заданной датой
+### Календарь с заданной датой
 
 ```jsx harmony
 const [date, setDate] = React.useState("01.11.2021");
@@ -11,6 +9,7 @@ const [date, setDate] = React.useState("01.11.2021");
 />
 ```
 
+### initialMonth и initialYear
 Вне зависимости от того, какая дата выбрана в календаре в данный момент - можно изменить отображение начального года и месяца с помощью пропов `initialMonth` и `initialYear`
 
 ```jsx harmony
@@ -35,12 +34,12 @@ const initialYear = 2000;
 </div>
 ```
 
-### `isHoliday`
+### isHoliday
 
 В компонент можно передать функцию `isHoliday`, которая будет получать день строкой формата `dd.mm.yyyy` и флаг `isWeekend`, и должна вернуть `true` для выходного и `false` для рабочего дня.
 
 ```jsx harmony
-import * as DatePickerHelpers from '../DatePicker/DatePickerHelpers';
+import * as DatePickerHelpers from '@skbkontur/react-ui/components/DatePicker/DatePickerHelpers';
 
 const [date, setDate] = React.useState();
 
@@ -82,6 +81,7 @@ const isHoliday = (day, isWeekend) => {
 <Calendar isHoliday={isHoliday} value={date} onValueChange={setDate} />;
 ```
 
+### Высота
 Календарю можно задать кастомную высоту с помощью переменной темы `calendarWrapperHeight`
 
 - Базовая высота календаря - `330px`
@@ -105,7 +105,6 @@ const theme = React.useContext(ThemeContext);
 ```
 
 ### Кастомный рендер дня
-
 Для кастомнизации дней в календаре используется метод `renderDay` и компонент [Calendar.Day](#/Components/Calendar/Calendar.Day)
 
 ```jsx harmony
@@ -147,11 +146,12 @@ const renderDay = (props) => {
 ```
 
 ### Календарь с ценами
-
-Пример с кастомизацией темы и кастомным рендером дня 
+Пример с кастомизацией темы и кастомным рендером дня.
 
 ```jsx harmony
-import { ThemeContext, ThemeFactory, CalendarDay } from '@skbkontur/react-ui';
+import { CalendarDay } from '@skbkontur/react-ui';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
+import { ThemeFactory } from '@skbkontur/react-ui/lib/theming/ThemeFactory';
 
 const theme = React.useContext(ThemeContext);
 
@@ -174,7 +174,8 @@ const [value, setValue] = React.useState(null);
 
 <ThemeContext.Provider
   value={ThemeFactory.create({
-    calendarCellSize: '56px',
+    calendarCellWidth: '56px',
+    calendarCellHeight: '56px',
     calendarCellLineHeight: '1.5',
     calendarWrapperHeight: '600px',
     calendarCellBorderRadius: '8px'
@@ -184,7 +185,7 @@ const [value, setValue] = React.useState(null);
 </ThemeContext.Provider>
 ```
 
-#### Локали по умолчанию
+### Локали по умолчанию
 
 ```typescript static
 interface CalendarLocale {
@@ -255,7 +256,7 @@ const calendarRef = React.useRef(null);
       ref={calendarRef}
       onValueChange={setValue}
     />
-    
+
     <Gapped vertical gap={8}>
       <Button onClick={() => calendarRef.current.scrollToMonth(1, 2023)}>
         I квартал
@@ -272,4 +273,4 @@ const calendarRef = React.useRef(null);
     </Gapped>
   </Gapped>
 </>;
-```
+```

package/components/Calendar/Calendar.styles/Calendar.styles.js

@@ -1,17 +1,15 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    root: function root(t) {
-      var width = parseInt(t.calendarCellWidth) * 7;
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        box-sizing: content-box;\n        border-radius: ", ";\n        color: ", ";\n        display: block;\n        padding: 0 ", ";\n        width: ", "px;\n        touch-action: none;\n      "])), t.calendarBg, t.calendarBorderRadius, t.textColorDefault, t.calendarPaddingX, width);
-    },
-    wrapper: function wrapper() {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        font-size: 14px;\n        position: relative;\n        overflow: hidden;\n      "])));
-    },
-    separator: function separator(t) {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        border-bottom: ", ";\n        margin: 0 ", ";\n      "])), t.calendarBottomSeparatorBorder, t.calendarMonthTitleMarginX);
-    }
-  });
-};
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  root: function root(t) {
+    var width = parseInt(t.calendarCellWidth) * 7;
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      box-sizing: content-box;\n      border-radius: ", ";\n      color: ", ";\n      display: block;\n      padding: 0 ", ";\n      width: ", "px;\n      touch-action: none;\n    "])), t.calendarBg, t.calendarBorderRadius, t.textColorDefault, t.calendarPaddingX, width);
+  },
+  wrapper: function wrapper() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      font-size: 14px;\n      position: relative;\n      overflow: hidden;\n    "])));
+  },
+  separator: function separator(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n      margin: 0 ", ";\n    "])), t.calendarBottomSeparatorBorder, t.calendarMonthTitleMarginX);
+  }
+});

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

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","getStyles","emotion","root","t","width","parseInt","calendarCellWidth","css","_templateObject","_taggedTemplateLiteralLoose","calendarBg","calendarBorderRadius","textColorDefault","calendarPaddingX","wrapper","_templateObject2","separator","_templateObject3","calendarBottomSeparatorBorder","calendarMonthTitleMarginX"],"sources":["Calendar.styles.ts"],"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    root(t: Theme) {\n      const width = parseInt(t.calendarCellWidth) * 7;\n      return emotion.css`\n        background: ${t.calendarBg};\n        box-sizing: content-box;\n        border-radius: ${t.calendarBorderRadius};\n        color: ${t.textColorDefault};\n        display: block;\n        padding: 0 ${t.calendarPaddingX};\n        width: ${width}px;\n        touch-action: none;\n      `;\n    },\n\n    wrapper() {\n      return emotion.css`\n        font-size: 14px;\n        position: relative;\n        overflow: hidden;\n      `;\n    },\n\n    separator(t: Theme) {\n      return emotion.css`\n        border-bottom: ${t.calendarBottomSeparatorBorder};\n        margin: 0 ${t.calendarMonthTitleMarginX};\n      `;\n    },\n  });\n"],"mappings":";;AAEA,SAASA,YAAY,QAAQ,2BAA2B;;;AAGxD,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxCF,YAAY,CAAC;MACXG,IAAI,WAAAA,KAACC,CAAQ,EAAE;QACb,IAAMC,KAAK,GAAGC,QAAQ,CAACF,CAAC,CAACG,iBAAiB,CAAC,GAAG,CAAC;QAC/C,OAAOL,OAAO,CAACM,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;QACFN,CAAC,CAACO,UAAU;;QAETP,CAAC,CAACQ,oBAAoB;QAC9BR,CAAC,CAACS,gBAAgB;;QAEdT,CAAC,CAACU,gBAAgB;QACtBT,KAAK;;;MAGlB,CAAC;;MAEDU,OAAO,WAAAA,QAAA,EAAG;QACR,OAAOb,OAAO,CAACM,GAAG,CAAAQ,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;;MAKpB,CAAC;;MAEDO,SAAS,WAAAA,UAACb,CAAQ,EAAE;QAClB,OAAOF,OAAO,CAACM,GAAG,CAAAU,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;QACCN,CAAC,CAACe,6BAA6B;QACpCf,CAAC,CAACgB,yBAAyB;;MAE3C;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","root","t","width","parseInt","calendarCellWidth","_templateObject","_taggedTemplateLiteralLoose","calendarBg","calendarBorderRadius","textColorDefault","calendarPaddingX","wrapper","_templateObject2","separator","_templateObject3","calendarBottomSeparatorBorder","calendarMonthTitleMarginX"],"sources":["Calendar.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const width = parseInt(t.calendarCellWidth) * 7;\n    return css`\n      background: ${t.calendarBg};\n      box-sizing: content-box;\n      border-radius: ${t.calendarBorderRadius};\n      color: ${t.textColorDefault};\n      display: block;\n      padding: 0 ${t.calendarPaddingX};\n      width: ${width}px;\n      touch-action: none;\n    `;\n  },\n\n  wrapper() {\n    return css`\n      font-size: 14px;\n      position: relative;\n      overflow: hidden;\n    `;\n  },\n\n  separator(t: Theme) {\n    return css`\n      border-bottom: ${t.calendarBottomSeparatorBorder};\n      margin: 0 ${t.calendarMonthTitleMarginX};\n    `;\n  },\n});\n"],"mappings":"wJAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,IAAMC,KAAK,GAAGC,QAAQ,CAACF,CAAC,CAACG,iBAAiB,CAAC,GAAG,CAAC;IAC/C,OAAOP,GAAG,CAAAQ,eAAA,KAAAA,eAAA,GAAAC,2BAAA;IACML,CAAC,CAACM,UAAU;;IAETN,CAAC,CAACO,oBAAoB;IAC9BP,CAAC,CAACQ,gBAAgB;;IAEdR,CAAC,CAACS,gBAAgB;IACtBR,KAAK;;;EAGlB,CAAC;;EAEDS,OAAO,WAAAA,QAAA,EAAG;IACR,OAAOd,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;;EAKZ,CAAC;;EAEDO,SAAS,WAAAA,UAACZ,CAAQ,EAAE;IAClB,OAAOJ,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;IACSL,CAAC,CAACc,6BAA6B;IACpCd,CAAC,CAACe,yBAAyB;;EAE3C;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(t: Theme): string;
     wrapper(): string;
     separator(t: Theme): string;

package/components/Calendar/CalendarDay/CalendarDay.js

@@ -1,23 +1,25 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["isToday", "isSelected", "isDisabled", "isWeekend", "date", "children", "className"];
-import React, { memo, useContext } from 'react';
+import React, { useContext, memo } from 'react';
 import { useLocaleForControl } from "../../../lib/locale/useLocaleForControl";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { EmotionContext } from "../../../lib/theming/Emotion";
+import { cx } from "../../../lib/theming/Emotion";
 import { DatePickerLocaleHelper } from "../../DatePicker/locale";
 import { InternalDate } from "../../../lib/date/InternalDate";
 import { LocaleContext } from "../../../lib/locale";
 import { getVisualStateDataAttributes } from "../../../internal/CommonWrapper/utils/getVisualStateDataAttributes";
 import { forwardRefAndName } from "../../../lib/forwardRefAndName";
-import { getStyles } from "../DayCellView.styles";
+import { styles } from "../DayCellView.styles";
 import { CalendarDataTids } from "../Calendar";
 
 /**
+ * Компонент дня `CalendarDay` из Calendar.
+ *
  * @visibleName Calendar.Day
  */
 export var CalendarDay = /*#__PURE__*/memo(forwardRefAndName('CalendarDay', function CalendarDay(_ref, ref) {
-  var _emotion$cx, _emotion$cx2;
+  var _cx, _cx2;
   var isToday = _ref.isToday,
     isSelected = _ref.isSelected,
     isDisabled = _ref.isDisabled,
@@ -27,7 +29,6 @@ export var CalendarDay = /*#__PURE__*/memo(forwardRefAndName('CalendarDay', func
     className = _ref.className,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var theme = useContext(ThemeContext);
-  var emotion = useContext(EmotionContext);
   var _useContext = useContext(LocaleContext),
     langCode = _useContext.langCode;
   var internalDate = new InternalDate({
@@ -39,7 +40,6 @@ export var CalendarDay = /*#__PURE__*/memo(forwardRefAndName('CalendarDay', func
   var _internalDate$getComp = internalDate.getComponentsLikeNumber(),
     day = _internalDate$getComp.date;
   var caption = children != null ? children : day;
-  var styles = getStyles(emotion);
   return /*#__PURE__*/(
     React.createElement("button", _extends({
       ref: ref,
@@ -47,13 +47,13 @@ export var CalendarDay = /*#__PURE__*/memo(forwardRefAndName('CalendarDay', func
       "aria-label": ariaLabel,
       tabIndex: -1,
       disabled: isDisabled,
-      className: emotion.cx((_emotion$cx = {}, _emotion$cx[styles.day(theme)] = true, _emotion$cx[styles.selected(theme)] = isSelected, _emotion$cx[styles.weekend(theme)] = isWeekend, _emotion$cx), className)
+      className: cx((_cx = {}, _cx[styles.day(theme)] = true, _cx[styles.selected(theme)] = isSelected, _cx[styles.weekend(theme)] = isWeekend, _cx), className)
     }, getVisualStateDataAttributes({
       selected: isSelected
     }), rest), /*#__PURE__*/
 
     React.createElement("span", {
-      className: emotion.cx((_emotion$cx2 = {}, _emotion$cx2[styles.todayCaption(theme)] = isToday, _emotion$cx2))
+      className: cx((_cx2 = {}, _cx2[styles.todayCaption(theme)] = isToday, _cx2))
     }, caption))
   );
 }));

package/components/Calendar/CalendarDay/CalendarDay.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","useContext","useLocaleForControl","ThemeContext","EmotionContext","DatePickerLocaleHelper","InternalDate","LocaleContext","getVisualStateDataAttributes","forwardRefAndName","getStyles","CalendarDataTids","CalendarDay","_ref","ref","_emotion$cx","_emotion$cx2","isToday","isSelected","isDisabled","isWeekend","date","children","className","rest","_objectWithoutPropertiesLoose","_excluded","theme","emotion","_useContext","langCode","internalDate","value","locale","ariaLabel","dayCellChooseDateAriaLabel","toA11YFormat","_internalDate$getComp","getComponentsLikeNumber","day","caption","styles","createElement","_extends","dayCell","tabIndex","disabled","cx","selected","weekend","todayCaption"],"sources":["CalendarDay.tsx"],"sourcesContent":["import React, { memo, PropsWithChildren, useContext } from 'react';\n\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { EmotionContext } from '../../lib/theming/Emotion';\nimport { DatePickerLocaleHelper } from '../DatePicker/locale';\nimport { InternalDate } from '../../lib/date/InternalDate';\nimport { LocaleContext } from '../../lib/locale';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\nimport { getStyles } from './DayCellView.styles';\nimport { CalendarDataTids } from './Calendar';\n\nexport interface CalendarDayProps extends React.HTMLAttributes<HTMLButtonElement> {\n  isToday?: boolean;\n  isSelected?: boolean;\n  isDisabled?: boolean;\n  isWeekend?: boolean;\n  date: string;\n}\n\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        children,\n        className,\n        ...rest\n      }: PropsWithChildren<CalendarDayProps>,\n      ref: React.Ref<HTMLButtonElement>,\n    ) {\n      const theme = useContext(ThemeContext);\n      const emotion = useContext(EmotionContext);\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 { date: day } = internalDate.getComponentsLikeNumber();\n      const caption = children ?? day;\n      const styles = getStyles(emotion);\n\n      return (\n        <button\n          ref={ref}\n          data-tid={CalendarDataTids.dayCell}\n          aria-label={ariaLabel}\n          tabIndex={-1}\n          disabled={isDisabled}\n          className={emotion.cx(\n            {\n              [styles.day(theme)]: true,\n              [styles.selected(theme)]: isSelected,\n              [styles.weekend(theme)]: isWeekend,\n            },\n            className,\n          )}\n          {...getVisualStateDataAttributes({ selected: isSelected })}\n          {...rest}\n        >\n          <span className={emotion.cx({ [styles.todayCaption(theme)]: isToday })}>{caption}</span>\n        </button>\n      );\n    },\n  ),\n);\n"],"mappings":"oQAAA,OAAOA,KAAK,IAAIC,IAAI,EAAqBC,UAAU,QAAQ,OAAO;;AAElE,SAASC,mBAAmB,QAAQ,sCAAsC;AAC1E,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,cAAc,QAAQ,2BAA2B;AAC1D,SAASC,sBAAsB,QAAQ,sBAAsB;AAC7D,SAASC,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,4BAA4B,QAAQ,iEAAiE;AAC9G,SAASC,iBAAiB,QAAQ,6BAA6B;;AAE/D,SAASC,SAAS,QAAQ,sBAAsB;AAChD,SAASC,gBAAgB,QAAQ,YAAY;;;;;;;;;;AAU7C;AACA;AACA;AACA,OAAO,IAAMC,WAAW,gBAAGZ,IAAI;EAC7BS,iBAAiB;IACf,aAAa;IACb,SAASG,WAAWA,CAAAC,IAAA;;;;;;;;;;;IAWlBC,GAAiC;IACjC,KAAAC,WAAA,EAAAC,YAAA,KAVEC,OAAO,GAAAJ,IAAA,CAAPI,OAAO,CACPC,UAAU,GAAAL,IAAA,CAAVK,UAAU,CACVC,UAAU,GAAAN,IAAA,CAAVM,UAAU,CACVC,SAAS,GAAAP,IAAA,CAATO,SAAS,CACTC,IAAI,GAAAR,IAAA,CAAJQ,IAAI,CACJC,QAAQ,GAAAT,IAAA,CAARS,QAAQ,CACRC,SAAS,GAAAV,IAAA,CAATU,SAAS,CACNC,IAAI,GAAAC,6BAAA,CAAAZ,IAAA,EAAAa,SAAA;MAIT,IAAMC,KAAK,GAAG1B,UAAU,CAACE,YAAY,CAAC;MACtC,IAAMyB,OAAO,GAAG3B,UAAU,CAACG,cAAc,CAAC;;MAE1C,IAAAyB,WAAA,GAAqB5B,UAAU,CAACM,aAAa,CAAC,CAAtCuB,QAAQ,GAAAD,WAAA,CAARC,QAAQ;MAChB,IAAMC,YAAY,GAAG,IAAIzB,YAAY,CAAC,EAAEwB,QAAQ,EAARA,QAAQ,EAAEE,KAAK,EAAEX,IAAI,CAAC,CAAC,CAAC;;MAEhE,IAAMY,MAAM,GAAG/B,mBAAmB,CAAC,UAAU,EAAEG,sBAAsB,CAAC;MACtE,IAAM6B,SAAS,GAAMD,MAAM,CAACE,0BAA0B,UAAKJ,YAAY,CAACK,YAAY,CAAC,CAAG;;MAExF,IAAAC,qBAAA,GAAsBN,YAAY,CAACO,uBAAuB,CAAC,CAAC,CAA9CC,GAAG,GAAAF,qBAAA,CAAThB,IAAI;MACZ,IAAMmB,OAAO,GAAGlB,QAAQ,WAARA,QAAQ,GAAIiB,GAAG;MAC/B,IAAME,MAAM,GAAG/B,SAAS,CAACkB,OAAO,CAAC;;MAEjC;QACE7B,KAAA,CAAA2C,aAAA,WAAAC,QAAA;UACE7B,GAAG,EAAEA,GAAI;UACT,YAAUH,gBAAgB,CAACiC,OAAQ;UACnC,cAAYV,SAAU;UACtBW,QAAQ,EAAE,CAAC,CAAE;UACbC,QAAQ,EAAE3B,UAAW;UACrBI,SAAS,EAAEK,OAAO,CAACmB,EAAE,EAAAhC,WAAA,OAAAA,WAAA;;UAEhB0B,MAAM,CAACF,GAAG,CAACZ,KAAK,CAAC,IAAG,IAAI,EAAAZ,WAAA;UACxB0B,MAAM,CAACO,QAAQ,CAACrB,KAAK,CAAC,IAAGT,UAAU,EAAAH,WAAA;UACnC0B,MAAM,CAACQ,OAAO,CAACtB,KAAK,CAAC,IAAGP,SAAS,EAAAL,WAAA;;UAEpCQ;UACF,CAAE;QACEf,4BAA4B,CAAC,EAAEwC,QAAQ,EAAE9B,UAAU,CAAC,CAAC,CAAC;QACtDM,IAAI;;QAERzB,KAAA,CAAA2C,aAAA,WAAMnB,SAAS,EAAEK,OAAO,CAACmB,EAAE,EAAA/B,YAAA,OAAAA,YAAA,CAAIyB,MAAM,CAACS,YAAY,CAACvB,KAAK,CAAC,IAAGV,OAAO,EAAAD,YAAA,CAAE,CAAE,IAAEwB,OAAc;QACjF,CAAC;;IAEb;EACF;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useContext","memo","useLocaleForControl","ThemeContext","cx","DatePickerLocaleHelper","InternalDate","LocaleContext","getVisualStateDataAttributes","forwardRefAndName","styles","CalendarDataTids","CalendarDay","_ref","ref","_cx","_cx2","isToday","isSelected","isDisabled","isWeekend","date","children","className","rest","_objectWithoutPropertiesLoose","_excluded","theme","_useContext","langCode","internalDate","value","locale","ariaLabel","dayCellChooseDateAriaLabel","toA11YFormat","_internalDate$getComp","getComponentsLikeNumber","day","caption","createElement","_extends","dayCell","tabIndex","disabled","selected","weekend","todayCaption"],"sources":["CalendarDay.tsx"],"sourcesContent":["import React, { PropsWithChildren, useContext, memo } from 'react';\n\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\nimport { DatePickerLocaleHelper } from '../DatePicker/locale';\nimport { InternalDate } from '../../lib/date/InternalDate';\nimport { LocaleContext } from '../../lib/locale';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\nimport { styles } from './DayCellView.styles';\nimport { CalendarDataTids } from './Calendar';\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\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        children,\n        className,\n        ...rest\n      }: PropsWithChildren<CalendarDayProps>,\n      ref: React.Ref<HTMLButtonElement>,\n    ) {\n      const theme = useContext(ThemeContext);\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 { 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          className={cx(\n            {\n              [styles.day(theme)]: true,\n              [styles.selected(theme)]: isSelected,\n              [styles.weekend(theme)]: isWeekend,\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"],"mappings":"oQAAA,OAAOA,KAAK,IAAuBC,UAAU,EAAEC,IAAI,QAAQ,OAAO;;AAElE,SAASC,mBAAmB,QAAQ,sCAAsC;AAC1E,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,EAAE,QAAQ,2BAA2B;AAC9C,SAASC,sBAAsB,QAAQ,sBAAsB;AAC7D,SAASC,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,4BAA4B,QAAQ,iEAAiE;AAC9G,SAASC,iBAAiB,QAAQ,6BAA6B;;AAE/D,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,gBAAgB,QAAQ,YAAY;;;;;;;;;;;;;;;;;;;AAmB7C;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,gBAAGX,IAAI;EAC7BQ,iBAAiB;IACf,aAAa;IACb,SAASG,WAAWA,CAAAC,IAAA;;;;;;;;;;;IAWlBC,GAAiC;IACjC,KAAAC,GAAA,EAAAC,IAAA,KAVEC,OAAO,GAAAJ,IAAA,CAAPI,OAAO,CACPC,UAAU,GAAAL,IAAA,CAAVK,UAAU,CACVC,UAAU,GAAAN,IAAA,CAAVM,UAAU,CACVC,SAAS,GAAAP,IAAA,CAATO,SAAS,CACTC,IAAI,GAAAR,IAAA,CAAJQ,IAAI,CACJC,QAAQ,GAAAT,IAAA,CAARS,QAAQ,CACRC,SAAS,GAAAV,IAAA,CAATU,SAAS,CACNC,IAAI,GAAAC,6BAAA,CAAAZ,IAAA,EAAAa,SAAA;MAIT,IAAMC,KAAK,GAAG3B,UAAU,CAACG,YAAY,CAAC;;MAEtC,IAAAyB,WAAA,GAAqB5B,UAAU,CAACO,aAAa,CAAC,CAAtCsB,QAAQ,GAAAD,WAAA,CAARC,QAAQ;MAChB,IAAMC,YAAY,GAAG,IAAIxB,YAAY,CAAC,EAAEuB,QAAQ,EAARA,QAAQ,EAAEE,KAAK,EAAEV,IAAI,CAAC,CAAC,CAAC;;MAEhE,IAAMW,MAAM,GAAG9B,mBAAmB,CAAC,UAAU,EAAEG,sBAAsB,CAAC;MACtE,IAAM4B,SAAS,GAAMD,MAAM,CAACE,0BAA0B,UAAKJ,YAAY,CAACK,YAAY,CAAC,CAAG;;MAExF,IAAAC,qBAAA,GAAsBN,YAAY,CAACO,uBAAuB,CAAC,CAAC,CAA9CC,GAAG,GAAAF,qBAAA,CAATf,IAAI;MACZ,IAAMkB,OAAO,GAAGjB,QAAQ,WAARA,QAAQ,GAAIgB,GAAG;;MAE/B;QACEvC,KAAA,CAAAyC,aAAA,WAAAC,QAAA;UACE3B,GAAG,EAAEA,GAAI;UACT,YAAUH,gBAAgB,CAAC+B,OAAQ;UACnC,cAAYT,SAAU;UACtBU,QAAQ,EAAE,CAAC,CAAE;UACbC,QAAQ,EAAEzB,UAAW;UACrBI,SAAS,EAAEnB,EAAE,EAAAW,GAAA,OAAAA,GAAA;;UAERL,MAAM,CAAC4B,GAAG,CAACX,KAAK,CAAC,IAAG,IAAI,EAAAZ,GAAA;UACxBL,MAAM,CAACmC,QAAQ,CAAClB,KAAK,CAAC,IAAGT,UAAU,EAAAH,GAAA;UACnCL,MAAM,CAACoC,OAAO,CAACnB,KAAK,CAAC,IAAGP,SAAS,EAAAL,GAAA;;UAEpCQ;UACF,CAAE;QACEf,4BAA4B,CAAC,EAAEqC,QAAQ,EAAE3B,UAAU,CAAC,CAAC,CAAC;QACtDM,IAAI;;QAERzB,KAAA,CAAAyC,aAAA,WAAMjB,SAAS,EAAEnB,EAAE,EAAAY,IAAA,OAAAA,IAAA,CAAIN,MAAM,CAACqC,YAAY,CAACpB,KAAK,CAAC,IAAGV,OAAO,EAAAD,IAAA,CAAE,CAAE,IAAEuB,OAAc;QACzE,CAAC;;IAEb;EACF;AACF,CAAC","ignoreList":[]}

package/components/Calendar/CalendarDay.d.ts

@@ -1,12 +1,19 @@
 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").ReactUIComponentWithRef<HTMLButtonElement, React.PropsWithChildren<CalendarDayProps>> & Record<never, never>>;

package/components/Calendar/CalendarDay.md

@@ -1,58 +1,58 @@
 Компонент для отрисовки дня в Calendar. Полезен при использовании вместе с его пропом `renderDay`.
 
+### Базовый пример
 ```jsx harmony
-import { Calendar, Gapped } from '@skbkontur/react-ui';
+import { CalendarDay, Gapped } from '@skbkontur/react-ui';
 
 const date = '20.05.2024';
 const style = { width: 32, height: 32 };
 
 <Gapped>
-  <Calendar.Day style={style} date={date} />
-  <Calendar.Day style={style} date={date} isToday={true} />
-  <Calendar.Day style={style} date={date} isSelected={true} />
-  <Calendar.Day style={style} date={date} isDisabled={true} />
-  <Calendar.Day style={style} date={date} isWeekend={true} />
-  <Calendar.Day style={style}><b>20</b></Calendar.Day>
+  <CalendarDay style={style} date={date} />
+  <CalendarDay style={style} date={date} isToday={true} />
+  <CalendarDay style={style} date={date} isSelected={true} />
+  <CalendarDay style={style} date={date} isDisabled={true} />
+  <CalendarDay style={style} date={date} isWeekend={true} />
+  <CalendarDay style={style}><b>20</b></CalendarDay>
 </Gapped>
 ```
 
-Набор функций для сравнения строковых дат.
+### Функции для сравнения строковых дат
 
 ```jsx harmony
-import { isBetween, isEqual, isGreater, isGreaterOrEqual, isLess, isLessOrEqual } from '@skbkontur/react-ui/lib/date/comparison';
+const { isBetween, isEqual, isGreater, isGreaterOrEqual, isLess, isLessOrEqual } = require('@skbkontur/react-ui/lib/date/comparison');
 
 const date_a = '10.03.2017';
 const date_b = '11.03.2017';
-const date_c = '12.03.2017';
 
 const Table = ({ children }) => (
-    <table>
-        <thead>
-            <tr>
-                <td>Функция</td>
-                <td>Результат</td>
-            </tr>
-        </thead>
-        <tbody>
-            { children }
-        </tbody>
-    </table>
+  <table>
+    <thead>
+      <tr>
+        <td>Функция</td>
+        <td>Результат</td>
+      </tr>
+    </thead>
+    <tbody>
+      { children }
+    </tbody>
+  </table>
 )
 
 const Row = ({ code }) => (
-    <tr>
-        <td><code>{code}</code></td>
-        <td><code>{JSON.stringify(eval(code), null, 2)}</code></td>
-    </tr>
+  <tr>
+    <td><code>{code}</code></td>
+    <td><code>{JSON.stringify(eval(code), null, 2)}</code></td>
+  </tr>
 );
 
 <Table>
-    <Row code={`isEqual("${date_a}", "${date_a}")`} />
-    <Row code={`isLess("${date_a}", "${date_b}")`} />
-    <Row code={`isLessOrEqual("${date_a}", "${date_b}")`} />
-    <Row code={`isGreater("${date_b}", "${date_a}")`} />
-    <Row code={`isGreaterOrEqual("${date_b}", "${date_a}")`} />
-    <Row code={`isBetween("${date_b}", "${date_a}", "${date_b}")`} />
+  <Row code={`isEqual("${date_a}", "${date_a}")`} />
+  <Row code={`isLess("${date_a}", "${date_b}")`} />
+  <Row code={`isLessOrEqual("${date_a}", "${date_b}")`} />
+  <Row code={`isGreater("${date_b}", "${date_a}")`} />
+  <Row code={`isGreaterOrEqual("${date_b}", "${date_a}")`} />
+  <Row code={`isBetween("${date_b}", "${date_a}", "${date_b}")`} />
 </Table>
 
 ```
@@ -67,4 +67,4 @@ export function isBetween(
   date: string,
   left?: string,
   right?: string,
-): boolean;
+): boolean;

package/components/Calendar/DayCellView/DayCellView.js

@@ -1,8 +1,7 @@
-import React, { useContext } from 'react';
-import { EmotionContext } from "../../../lib/theming/Emotion";
-import { InternalDateTransformer } from "../../../lib/date/InternalDateTransformer";
+import React, { useCallback, useContext } from 'react';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { getStyles } from "../DayCellView.styles";
+import { InternalDateTransformer } from "../../../lib/date/InternalDateTransformer";
+import { styles } from "../DayCellView.styles";
 import { CalendarContext } from "../CalendarContext";
 import * as CDS from "../CalendarDateShape";
 import { CalendarDay } from "../CalendarDay";
@@ -17,25 +16,26 @@ export var DayCellView = function DayCellView(props) {
     renderDay = _useContext.renderDay,
     today = _useContext.today,
     onDateClick = _useContext.onDateClick;
-  var emotion = useContext(EmotionContext);
   var theme = useContext(ThemeContext);
-  var handleClick = function handleClick() {
-    onDateClick == null || onDateClick(date);
-  };
+  var isDisabled = !CDS.isBetween(date, minDate, maxDate);
   var humanDateString = InternalDateTransformer.dateToHumanString(date);
-  var styles = getStyles(emotion);
   var dayProps = {
     isToday: Boolean(today && CDS.isEqual(date, today)),
     isSelected: Boolean(value && CDS.isEqual(date, value)),
-    isDisabled: !CDS.isBetween(date, minDate, maxDate),
+    isDisabled: isDisabled,
     isWeekend: (_isHoliday = isHoliday == null ? void 0 : isHoliday(humanDateString, date.isWeekend)) != null ? _isHoliday : date.isWeekend,
     date: humanDateString
   };
   var dayElement = (_renderDay = renderDay == null ? void 0 : renderDay(dayProps)) != null ? _renderDay : /*#__PURE__*/React.createElement(CalendarDay, dayProps);
-  return /*#__PURE__*/(
-    React.createElement("div", {
-      onClick: handleClick,
-      className: styles.cell(theme)
-    }, dayElement)
-  );
+  var customDayClickHandler = dayElement.props.onClick;
+  var dayClickHandler = useCallback(function (e) {
+    customDayClickHandler == null || customDayClickHandler(e);
+    onDateClick == null || onDateClick(date);
+  }, [customDayClickHandler, onDateClick, date]);
+  var dayElementWithClickHandler = /*#__PURE__*/React.cloneElement(dayElement, {
+    onClick: dayClickHandler
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.cell(theme)
+  }, dayElementWithClickHandler);
 };

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

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","EmotionContext","InternalDateTransformer","ThemeContext","getStyles","CalendarContext","CDS","CalendarDay","DayCellView","props","_isHoliday","_renderDay","date","_useContext","value","minDate","maxDate","isHoliday","renderDay","today","onDateClick","emotion","theme","handleClick","humanDateString","dateToHumanString","styles","dayProps","isToday","Boolean","isEqual","isSelected","isDisabled","isBetween","isWeekend","dayElement","createElement","onClick","className","cell"],"sources":["DayCellView.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { EmotionContext } from '../../lib/theming/Emotion';\nimport { InternalDateTransformer } from '../../lib/date/InternalDateTransformer';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './DayCellView.styles';\nimport { CalendarContext } from './CalendarContext';\nimport { DayCellViewModel } from './DayCellViewModel';\nimport * as CDS from './CalendarDateShape';\nimport { CalendarDay, CalendarDayProps } from './CalendarDay';\n\nexport interface DayCellViewProps {\n  date: DayCellViewModel;\n}\n\nexport const DayCellView = (props: DayCellViewProps) => {\n  const { date } = props;\n  const { value, minDate, maxDate, isHoliday, renderDay, today, onDateClick } = useContext(CalendarContext);\n  const emotion = useContext(EmotionContext);\n  const theme = useContext(ThemeContext);\n\n  const handleClick = () => {\n    onDateClick?.(date);\n  };\n\n  const humanDateString = InternalDateTransformer.dateToHumanString(date);\n  const styles = getStyles(emotion);\n\n  const dayProps: CalendarDayProps = {\n    isToday: Boolean(today && CDS.isEqual(date, today)),\n    isSelected: Boolean(value && CDS.isEqual(date, value)),\n    isDisabled: !CDS.isBetween(date, minDate, maxDate),\n    isWeekend: isHoliday?.(humanDateString, date.isWeekend) ?? date.isWeekend,\n    date: humanDateString,\n  };\n\n  const dayElement = renderDay?.(dayProps) ?? <CalendarDay {...dayProps} />;\n\n  return (\n    <div onClick={handleClick} className={styles.cell(theme)}>\n      {dayElement}\n    </div>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;AAEzC,SAASC,cAAc,QAAQ,2BAA2B;AAC1D,SAASC,uBAAuB,QAAQ,wCAAwC;AAChF,SAASC,YAAY,QAAQ,gCAAgC;;AAE7D,SAASC,SAAS,QAAQ,sBAAsB;AAChD,SAASC,eAAe,QAAQ,mBAAmB;;AAEnD,OAAO,KAAKC,GAAG,MAAM,qBAAqB;AAC1C,SAASC,WAAW,QAA0B,eAAe;;;;;;AAM7D,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIC,KAAuB,EAAK,KAAAC,UAAA,EAAAC,UAAA;EACtD,IAAQC,IAAI,GAAKH,KAAK,CAAdG,IAAI;EACZ,IAAAC,WAAA,GAA8Eb,UAAU,CAACK,eAAe,CAAC,CAAjGS,KAAK,GAAAD,WAAA,CAALC,KAAK,CAAEC,OAAO,GAAAF,WAAA,CAAPE,OAAO,CAAEC,OAAO,GAAAH,WAAA,CAAPG,OAAO,CAAEC,SAAS,GAAAJ,WAAA,CAATI,SAAS,CAAEC,SAAS,GAAAL,WAAA,CAATK,SAAS,CAAEC,KAAK,GAAAN,WAAA,CAALM,KAAK,CAAEC,WAAW,GAAAP,WAAA,CAAXO,WAAW;EACzE,IAAMC,OAAO,GAAGrB,UAAU,CAACC,cAAc,CAAC;EAC1C,IAAMqB,KAAK,GAAGtB,UAAU,CAACG,YAAY,CAAC;;EAEtC,IAAMoB,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxBH,WAAW,YAAXA,WAAW,CAAGR,IAAI,CAAC;EACrB,CAAC;;EAED,IAAMY,eAAe,GAAGtB,uBAAuB,CAACuB,iBAAiB,CAACb,IAAI,CAAC;EACvE,IAAMc,MAAM,GAAGtB,SAAS,CAACiB,OAAO,CAAC;;EAEjC,IAAMM,QAA0B,GAAG;IACjCC,OAAO,EAAEC,OAAO,CAACV,KAAK,IAAIb,GAAG,CAACwB,OAAO,CAAClB,IAAI,EAAEO,KAAK,CAAC,CAAC;IACnDY,UAAU,EAAEF,OAAO,CAACf,KAAK,IAAIR,GAAG,CAACwB,OAAO,CAAClB,IAAI,EAAEE,KAAK,CAAC,CAAC;IACtDkB,UAAU,EAAE,CAAC1B,GAAG,CAAC2B,SAAS,CAACrB,IAAI,EAAEG,OAAO,EAAEC,OAAO,CAAC;IAClDkB,SAAS,GAAAxB,UAAA,GAAEO,SAAS,oBAATA,SAAS,CAAGO,eAAe,EAAEZ,IAAI,CAACsB,SAAS,CAAC,YAAAxB,UAAA,GAAIE,IAAI,CAACsB,SAAS;IACzEtB,IAAI,EAAEY;EACR,CAAC;;EAED,IAAMW,UAAU,IAAAxB,UAAA,GAAGO,SAAS,oBAATA,SAAS,CAAGS,QAAQ,CAAC,YAAAhB,UAAA,gBAAIZ,KAAA,CAAAqC,aAAA,CAAC7B,WAAW,EAAKoB,QAAW,CAAC;;EAEzE;IACE5B,KAAA,CAAAqC,aAAA,UAAKC,OAAO,EAAEd,WAAY,EAACe,SAAS,EAAEZ,MAAM,CAACa,IAAI,CAACjB,KAAK,CAAE;IACtDa;IACE,CAAC;;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useContext","ThemeContext","InternalDateTransformer","styles","CalendarContext","CDS","CalendarDay","DayCellView","props","_isHoliday","_renderDay","date","_useContext","value","minDate","maxDate","isHoliday","renderDay","today","onDateClick","theme","isDisabled","isBetween","humanDateString","dateToHumanString","dayProps","isToday","Boolean","isEqual","isSelected","isWeekend","dayElement","createElement","customDayClickHandler","onClick","dayClickHandler","e","dayElementWithClickHandler","cloneElement","className","cell"],"sources":["DayCellView.tsx"],"sourcesContent":["import React, { ReactElement, useCallback, useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { InternalDateTransformer } from '../../lib/date/InternalDateTransformer';\n\nimport { styles } from './DayCellView.styles';\nimport { CalendarContext } from './CalendarContext';\nimport { DayCellViewModel } from './DayCellViewModel';\nimport * as CDS from './CalendarDateShape';\nimport { CalendarDay, CalendarDayProps } from './CalendarDay';\n\nexport interface DayCellViewProps {\n  date: DayCellViewModel;\n}\n\nexport const DayCellView = (props: DayCellViewProps) => {\n  const { date } = props;\n  const { value, minDate, maxDate, isHoliday, renderDay, today, onDateClick } = useContext(CalendarContext);\n  const theme = useContext(ThemeContext);\n\n  const isDisabled = !CDS.isBetween(date, minDate, maxDate);\n\n  const humanDateString = InternalDateTransformer.dateToHumanString(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  };\n\n  const dayElement: ReactElement<CalendarDayProps> = renderDay?.(dayProps) ?? <CalendarDay {...dayProps} />;\n  const customDayClickHandler = dayElement.props.onClick;\n\n  const dayClickHandler = useCallback<NonNullable<typeof customDayClickHandler>>(\n    (e) => {\n      customDayClickHandler?.(e);\n      onDateClick?.(date);\n    },\n    [customDayClickHandler, onDateClick, date],\n  );\n\n  const dayElementWithClickHandler = React.cloneElement<CalendarDayProps>(dayElement, {\n    onClick: dayClickHandler,\n  });\n\n  return <div className={styles.cell(theme)}>{dayElementWithClickHandler}</div>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAkBC,WAAW,EAAEC,UAAU,QAAQ,OAAO;;AAEpE,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,uBAAuB,QAAQ,wCAAwC;;AAEhF,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,eAAe,QAAQ,mBAAmB;;AAEnD,OAAO,KAAKC,GAAG,MAAM,qBAAqB;AAC1C,SAASC,WAAW,QAA0B,eAAe;;;;;;AAM7D,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIC,KAAuB,EAAK,KAAAC,UAAA,EAAAC,UAAA;EACtD,IAAQC,IAAI,GAAKH,KAAK,CAAdG,IAAI;EACZ,IAAAC,WAAA,GAA8EZ,UAAU,CAACI,eAAe,CAAC,CAAjGS,KAAK,GAAAD,WAAA,CAALC,KAAK,CAAEC,OAAO,GAAAF,WAAA,CAAPE,OAAO,CAAEC,OAAO,GAAAH,WAAA,CAAPG,OAAO,CAAEC,SAAS,GAAAJ,WAAA,CAATI,SAAS,CAAEC,SAAS,GAAAL,WAAA,CAATK,SAAS,CAAEC,KAAK,GAAAN,WAAA,CAALM,KAAK,CAAEC,WAAW,GAAAP,WAAA,CAAXO,WAAW;EACzE,IAAMC,KAAK,GAAGpB,UAAU,CAACC,YAAY,CAAC;;EAEtC,IAAMoB,UAAU,GAAG,CAAChB,GAAG,CAACiB,SAAS,CAACX,IAAI,EAAEG,OAAO,EAAEC,OAAO,CAAC;;EAEzD,IAAMQ,eAAe,GAAGrB,uBAAuB,CAACsB,iBAAiB,CAACb,IAAI,CAAC;;EAEvE,IAAMc,QAA0B,GAAG;IACjCC,OAAO,EAAEC,OAAO,CAACT,KAAK,IAAIb,GAAG,CAACuB,OAAO,CAACjB,IAAI,EAAEO,KAAK,CAAC,CAAC;IACnDW,UAAU,EAAEF,OAAO,CAACd,KAAK,IAAIR,GAAG,CAACuB,OAAO,CAACjB,IAAI,EAAEE,KAAK,CAAC,CAAC;IACtDQ,UAAU,EAAVA,UAAU;IACVS,SAAS,GAAArB,UAAA,GAAEO,SAAS,oBAATA,SAAS,CAAGO,eAAe,EAAEZ,IAAI,CAACmB,SAAS,CAAC,YAAArB,UAAA,GAAIE,IAAI,CAACmB,SAAS;IACzEnB,IAAI,EAAEY;EACR,CAAC;;EAED,IAAMQ,UAA0C,IAAArB,UAAA,GAAGO,SAAS,oBAATA,SAAS,CAAGQ,QAAQ,CAAC,YAAAf,UAAA,gBAAIZ,KAAA,CAAAkC,aAAA,CAAC1B,WAAW,EAAKmB,QAAW,CAAC;EACzG,IAAMQ,qBAAqB,GAAGF,UAAU,CAACvB,KAAK,CAAC0B,OAAO;;EAEtD,IAAMC,eAAe,GAAGpC,WAAW;IACjC,UAACqC,CAAC,EAAK;MACLH,qBAAqB,YAArBA,qBAAqB,CAAGG,CAAC,CAAC;MAC1BjB,WAAW,YAAXA,WAAW,CAAGR,IAAI,CAAC;IACrB,CAAC;IACD,CAACsB,qBAAqB,EAAEd,WAAW,EAAER,IAAI;EAC3C,CAAC;;EAED,IAAM0B,0BAA0B,gBAAGvC,KAAK,CAACwC,YAAY,CAAmBP,UAAU,EAAE;IAClFG,OAAO,EAAEC;EACX,CAAC,CAAC;;EAEF,oBAAOrC,KAAA,CAAAkC,aAAA,UAAKO,SAAS,EAAEpC,MAAM,CAACqC,IAAI,CAACpB,KAAK,CAAE,IAAEiB,0BAAgC,CAAC;AAC/E,CAAC","ignoreList":[]}

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

@@ -1,23 +1,21 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    cell: function cell(t) {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        flex: 1 1 ", ";\n        height: ", ";\n    "])), t.calendarCellWidth, t.calendarCellHeight);
-    },
-    day: function day(t) {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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\n        &:hover {\n          background-color: ", ";\n          color: ", ";\n          cursor: pointer;\n        }\n        &:disabled {\n          opacity: 0.5;\n          pointer-events: none;\n        }\n        &:active:hover:enabled {\n          color: ", ";\n        }\n      "])), resetButton(emotion), t.calendarCellBg, t.calendarCellFontSize, t.calendarCellLineHeight, t.calendarCellBorderRadius, t.calendarCellHoverBgColor, t.calendarCellHoverColor, t.calendarCellActiveHoverColor);
-    },
-    selected: function selected(t) {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        color: ", ";\n      "])), t.calendarCellSelectedBgColor, t.calendarCellSelectedFontColor);
-    },
-    weekend: function weekend(t) {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.calendarCellWeekendColor);
-    },
-    todayCaption: function todayCaption(t) {
-      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        padding-bottom: 2px;\n        border-bottom: ", ";\n      "])), t.calendarCellTodayBorder);
-    }
-  });
-};
+export var styles = memoizeStyle({
+  cell: function cell(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      flex: 1 1 ", ";\n      height: ", ";\n    "])), t.calendarCellWidth, t.calendarCellHeight);
+  },
+  day: function day(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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 selected(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      color: ", ";\n    "])), t.calendarCellSelectedBgColor, t.calendarCellSelectedFontColor);
+  },
+  weekend: function weekend(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.calendarCellWeekendColor);
+  },
+  todayCaption: function todayCaption(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      padding-bottom: 2px;\n      border-bottom: ", ";\n    "])), t.calendarCellTodayBorder);
+  }
+});

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

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","resetButton","getStyles","emotion","cell","t","css","_templateObject","_taggedTemplateLiteralLoose","calendarCellWidth","calendarCellHeight","day","_templateObject2","calendarCellBg","calendarCellFontSize","calendarCellLineHeight","calendarCellBorderRadius","calendarCellHoverBgColor","calendarCellHoverColor","calendarCellActiveHoverColor","selected","_templateObject3","calendarCellSelectedBgColor","calendarCellSelectedFontColor","weekend","_templateObject4","calendarCellWeekendColor","todayCaption","_templateObject5","calendarCellTodayBorder"],"sources":["DayCellView.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const getStyles = (emotion: Emotion) => {\n  return memoizeStyle({\n    cell(t: Theme) {\n      return emotion.css`\n        flex: 1 1 ${t.calendarCellWidth};\n        height: ${t.calendarCellHeight};\n    `;\n    },\n\n    day(t: Theme) {\n      return emotion.css`\n        ${resetButton(emotion)};\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\n        &:hover {\n          background-color: ${t.calendarCellHoverBgColor};\n          color: ${t.calendarCellHoverColor};\n          cursor: pointer;\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 emotion.css`\n        background-color: ${t.calendarCellSelectedBgColor};\n        color: ${t.calendarCellSelectedFontColor};\n      `;\n    },\n\n    weekend(t: Theme) {\n      return emotion.css`\n        color: ${t.calendarCellWeekendColor};\n      `;\n    },\n\n    todayCaption(t: Theme) {\n      return emotion.css`\n        padding-bottom: 2px;\n        border-bottom: ${t.calendarCellTodayBorder};\n      `;\n    },\n  });\n};\n"],"mappings":";;AAEA,SAASA,YAAY,QAAQ,2BAA2B;;AAExD,SAASC,WAAW,QAAQ,yBAAyB;;AAErD,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB,EAAK;EAC7C,OAAOH,YAAY,CAAC;IAClBI,IAAI,WAAAA,KAACC,CAAQ,EAAE;MACb,OAAOF,OAAO,CAACG,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;MACJH,CAAC,CAACI,iBAAiB;MACrBJ,CAAC,CAACK,kBAAkB;;IAElC,CAAC;;IAEDC,GAAG,WAAAA,IAACN,CAAQ,EAAE;MACZ,OAAOF,OAAO,CAACG,GAAG,CAAAM,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;MACdP,WAAW,CAACE,OAAO,CAAC;;;;MAIRE,CAAC,CAACQ,cAAc;;MAEjBR,CAAC,CAACS,oBAAoB;;;;;MAKpBT,CAAC,CAACU,sBAAsB;MACtBV,CAAC,CAACW,wBAAwB;;;MAGrBX,CAAC,CAACY,wBAAwB;MACrCZ,CAAC,CAACa,sBAAsB;;;;;;;;MAQxBb,CAAC,CAACc,4BAA4B;;;IAG7C,CAAC;;IAEDC,QAAQ,WAAAA,SAACf,CAAQ,EAAE;MACjB,OAAOF,OAAO,CAACG,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAb,2BAAA;MACIH,CAAC,CAACiB,2BAA2B;MACxCjB,CAAC,CAACkB,6BAA6B;;IAE5C,CAAC;;IAEDC,OAAO,WAAAA,QAACnB,CAAQ,EAAE;MAChB,OAAOF,OAAO,CAACG,GAAG,CAAAmB,gBAAA,KAAAA,gBAAA,GAAAjB,2BAAA;MACPH,CAAC,CAACqB,wBAAwB;;IAEvC,CAAC;;IAEDC,YAAY,WAAAA,aAACtB,CAAQ,EAAE;MACrB,OAAOF,OAAO,CAACG,GAAG,CAAAsB,gBAAA,KAAAA,gBAAA,GAAApB,2BAAA;;MAECH,CAAC,CAACwB,uBAAuB;;IAE9C;EACF,CAAC,CAAC;AACJ,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","resetButton","styles","cell","t","_templateObject","_taggedTemplateLiteralLoose","calendarCellWidth","calendarCellHeight","day","_templateObject2","calendarCellBg","calendarCellFontSize","calendarCellLineHeight","calendarCellBorderRadius","calendarCellHoverBgColor","calendarCellHoverColor","calendarCellActiveHoverColor","selected","_templateObject3","calendarCellSelectedBgColor","calendarCellSelectedFontColor","weekend","_templateObject4","calendarCellWeekendColor","todayCaption","_templateObject5","calendarCellTodayBorder"],"sources":["DayCellView.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\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"],"mappings":"4LAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,SAASC,WAAW,QAAQ,yBAAyB;;AAErD,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;EACjCG,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,OAAOL,GAAG,CAAAM,eAAA,KAAAA,eAAA,GAAAC,2BAAA;IACIF,CAAC,CAACG,iBAAiB;IACrBH,CAAC,CAACI,kBAAkB;;EAElC,CAAC;EACDC,GAAG,WAAAA,IAACL,CAAQ,EAAE;IACZ,OAAOL,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;IACNL,WAAW,CAAC,CAAC;;;;IAIDG,CAAC,CAACO,cAAc;;IAEjBP,CAAC,CAACQ,oBAAoB;;;;;IAKpBR,CAAC,CAACS,sBAAsB;IACtBT,CAAC,CAACU,wBAAwB;;;;;;;;;;;;;;;;;IAiBnBV,CAAC,CAACW,wBAAwB;IACrCX,CAAC,CAACY,sBAAsB;;;;;;;;;;IAU1BZ,CAAC,CAACa,4BAA4B;;;EAG7C,CAAC;;EAEDC,QAAQ,WAAAA,SAACd,CAAQ,EAAE;IACjB,OAAOL,GAAG,CAAAoB,gBAAA,KAAAA,gBAAA,GAAAb,2BAAA;IACYF,CAAC,CAACgB,2BAA2B;IACxChB,CAAC,CAACiB,6BAA6B;;EAE5C,CAAC;;EAEDC,OAAO,WAAAA,QAAClB,CAAQ,EAAE;IAChB,OAAOL,GAAG,CAAAwB,gBAAA,KAAAA,gBAAA,GAAAjB,2BAAA;IACCF,CAAC,CAACoB,wBAAwB;;EAEvC,CAAC;;EAEDC,YAAY,WAAAA,aAACrB,CAAQ,EAAE;IACrB,OAAOL,GAAG,CAAA2B,gBAAA,KAAAA,gBAAA,GAAApB,2BAAA;;IAESF,CAAC,CAACuB,uBAAuB;;EAE9C;AACF,CAAC,CAAC","ignoreList":[]}