@skbkontur/react-ui 0.0.0-9a66eda8b5 → 0.0.0-9ab4f802f3

package/cjs/components/Calendar/Calendar.md

@@ -0,0 +1,239 @@
+
+
+Календарь с заданной датой
+
+```jsx harmony
+const [date, setDate] = React.useState("01.11.2021");
+
+<Calendar
+  value={date}
+  onValueChange={setDate}
+/>
+```
+
+Вне зависимости от того, какая дата выбрана в календаре в данный момент - можно изменить отображение начального года и месяца с помощью пропов `initialMonth` и `initialYear`
+
+```jsx harmony
+import { Checkbox } from '@skbkontur/react-ui';
+
+const [date, setDate] = React.useState("11.12.2021");
+const initialMonth = 7;
+const initialYear = 2000;
+
+<div style={{ display: 'flex' }}>
+  <Calendar
+    value={date}
+    onValueChange={setDate}
+    initialMonth={initialMonth}
+    initialYear={initialYear}
+  />
+  <div style={{ fontSize: '16px' }}>
+    <p>Выбранная дата: {date}</p>
+    <p>Начальный месяц: {initialMonth}</p>
+    <p>Начальный год: {initialYear}</p>
+  </div>
+</div>
+```
+
+### `isHoliday`
+
+В компонент можно передать функцию `isHoliday`, которая будет получать день строкой формата `dd.mm.yyyy` и флаг `isWeekend`, и должна вернуть `true` для выходного и `false` для рабочего дня.
+
+```jsx harmony
+import * as DatePickerHelpers from '../DatePicker/DatePickerHelpers';
+
+const [date, setDate] = React.useState();
+
+const createRandomHolidays = () => {
+  const holidays = new Array(10);
+  const today = new Date();
+
+  for (let index = 0; index < holidays.length; index++) {
+    const day = new Date(today.setDate(today.getDate() + 1 + index).valueOf());
+
+    const holiday = {
+      date: day.getDate(),
+      month: day.getMonth(),
+      year: day.getFullYear(),
+    };
+
+    holidays[index] = DatePickerHelpers.formatDate(holiday);
+  }
+
+  return holidays;
+};
+const holidays = createRandomHolidays();
+
+const isHoliday = (day, isWeekend) => {
+  const today = new Date();
+  const holiday = {
+    date: today.getDate(),
+    month: today.getMonth(),
+    year: today.getFullYear(),
+  };
+
+  if (holidays.includes(day)) {
+    return !isWeekend;
+  }
+
+  return isWeekend;
+};
+
+<Calendar isHoliday={isHoliday} value={date} onValueChange={setDate} />;
+```
+
+Календарю можно задать кастомную высоту с помощью переменной темы `calendarWrapperHeight`
+
+- Базовая высота календаря - `330px`
+- Максимальная высота календаря - `450px`
+
+```jsx harmony
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
+import { ThemeFactory } from '@skbkontur/react-ui/lib/theming/ThemeFactory';
+
+const [date, setDate] = React.useState("01.11.2021");
+const theme = React.useContext(ThemeContext);
+
+<ThemeContext.Provider
+  value={ThemeFactory.create({ calendarWrapperHeight: '450px' }, theme)}
+  >
+  <Calendar
+    value={date}
+    onValueChange={setDate}
+  />
+</ThemeContext.Provider>
+```
+
+### Кастомный рендер дня
+
+Для кастомнизации дней в календаре используется метод `renderDay` и компонент [Calendar.Day](#/Components/Calendar/Calendar.Day)
+
+```jsx harmony
+import { Tooltip, Hint, CalendarDay } from '@skbkontur/react-ui';
+
+const initialValue = "02.09.2023";
+
+const [value, setValue] = React.useState(initialValue);
+
+const renderDay = (props) => {
+  const [date, month, year] = props.date.split('.').map(Number);
+
+  if (month == 9 && date > 12 && date < 16) {
+    return (
+      <Tooltip render={() => "Кастомный день"}>
+        <CalendarDay {...props} style={{ background: 'darkgray' }} />
+      </Tooltip>
+    );
+  }
+
+  if (month == 8 && date == 20) {
+    return (
+      <Hint text={date} pos="right middle">
+        <CalendarDay {...props}>
+          <b style={{color: 'orange'}}>#</b>
+        </CalendarDay>
+      </Hint>
+    );
+  }
+
+  return <CalendarDay {...props} />
+};
+
+<Calendar
+  value={value}
+  onValueChange={setValue}
+  renderDay={renderDay}
+/>;
+```
+
+### Календарь с ценами
+
+Пример с кастомизацией темы и кастомным рендером дня 
+
+```jsx harmony
+import { ThemeContext, ThemeFactory, CalendarDay } from '@skbkontur/react-ui';
+
+const theme = React.useContext(ThemeContext);
+
+function renderDay(props) {
+  const [date, month] = props.date.split('.').map(Number);
+  const randomDay = date % 6 === 0 || date % 7 === 0 || date % 8 === 0;
+  const randomPrice = Math.round((date / month) * 1000);
+
+  return (
+    <CalendarDay {...props}>
+      <div style={{ fontSize: theme.calendarCellFontSize }}>{date}</div>
+      <div style={{ fontSize: '11px', fontFeatureSettings: 'tnum', fontVariantNumeric: 'tabular-nums' }}>
+        {randomDay ? <>{randomPrice}&thinsp;₽</> : <span style={{ color: theme.tokenTextColorDisabled }}>—</span>}
+      </div>
+    </CalendarDay>
+  );
+}
+
+const [value, setValue] = React.useState(null);
+
+<ThemeContext.Provider
+  value={ThemeFactory.create({
+    calendarCellSize: '56px',
+    calendarCellLineHeight: '1.5',
+    calendarWrapperHeight: '600px',
+    calendarCellBorderRadius: '8px'
+  }, theme)}
+>
+  <Calendar value={value} renderDay={renderDay} onValueChange={setValue} />
+</ThemeContext.Provider>
+```
+
+#### Локали по умолчанию
+
+```typescript static
+interface CalendarLocale {
+  months?: string[];
+  selectMonthAriaLabel?: string;
+  selectYearAriaLabel?: string;
+  selectChosenAriaLabel?: string;
+  dayCellChooseDateAriaLabel?: string;
+}
+
+const ru_RU = {
+  months: [
+    'Январь',
+    'Февраль',
+    'Март',
+    'Апрель',
+    'Май',
+    'Июнь',
+    'Июль',
+    'Август',
+    'Сентябрь',
+    'Октябрь',
+    'Ноябрь',
+    'Декабрь',
+  ],
+  selectMonthAriaLabel: 'месяц',
+  selectYearAriaLabel: 'год',
+  selectChosenAriaLabel: 'Выбранный',
+  dayCellChooseDateAriaLabel: 'Выбрать дату',
+};
+
+const en_GB = {
+  months: [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ],
+  selectMonthAriaLabel: 'месяц',
+  selectYearAriaLabel: 'год',
+  selectChosenAriaLabel: 'Выбранный',
+  dayCellChooseDateAriaLabel: 'Выбрать дату',
+};
+```

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

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

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

@@ -0,0 +1,35 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3;
+
+
+var getStyles = function getStyles(emotion) {return (
+    (0, _Emotion.memoizeStyle)({
+      root: function root(t) {
+        var width = parseInt(t.calendarCellWidth) * 7;
+        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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.pickerBorderRadius,
+        t.textColorDefault,
+
+        t.calendarPaddingX,
+        width);
+
+
+      },
+
+      wrapper: function wrapper() {
+        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        font-size: 14px;\n        position: relative;\n        overflow: hidden;\n      "])));
+
+
+
+
+      },
+
+      separator: function separator(t) {
+        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        border-bottom: ", ";\n        margin: 0 ", ";\n      "])),
+        t.calendarBottomSeparatorBorder,
+        t.calendarMonthTitleMarginX);
+
+      } }));};exports.getStyles = getStyles;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Calendar.styles.ts"],"names":["getStyles","emotion","root","t","width","parseInt","calendarCellWidth","css","calendarBg","pickerBorderRadius","textColorDefault","calendarPaddingX","wrapper","separator","calendarBottomSeparatorBorder","calendarMonthTitleMarginX"],"mappings":";;AAEA,oD;;;AAGO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvB,+BAAa;AACXC,MAAAA,IADW,gBACNC,CADM,EACI;AACb,YAAMC,KAAK,GAAGC,QAAQ,CAACF,CAAC,CAACG,iBAAH,CAAR,GAAgC,CAA9C;AACA,eAAOL,OAAO,CAACM,GAAf;AACgBJ,QAAAA,CAAC,CAACK,UADlB;;AAGmBL,QAAAA,CAAC,CAACM,kBAHrB;AAIWN,QAAAA,CAAC,CAACO,gBAJb;;AAMeP,QAAAA,CAAC,CAACQ,gBANjB;AAOWP,QAAAA,KAPX;;;AAUD,OAbU;;AAeXQ,MAAAA,OAfW,qBAeD;AACR,eAAOX,OAAO,CAACM,GAAf;;;;;AAKD,OArBU;;AAuBXM,MAAAA,SAvBW,qBAuBDV,CAvBC,EAuBS;AAClB,eAAOF,OAAO,CAACM,GAAf;AACmBJ,QAAAA,CAAC,CAACW,6BADrB;AAEcX,QAAAA,CAAC,CAACY,yBAFhB;;AAID,OA5BU,EAAb,CADuB,GAAlB,C","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    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.pickerBorderRadius};\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"]}

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

@@ -0,0 +1,12 @@
+import { CalendarDateShape } from './CalendarDateShape';
+import { CalendarProps } from './Calendar';
+export interface CalendarContextProps {
+    renderDay?: CalendarProps['renderDay'];
+    value?: CalendarDateShape;
+    minDate?: CalendarDateShape;
+    maxDate?: CalendarDateShape;
+    isHoliday?: CalendarProps['isHoliday'];
+    today?: CalendarDateShape;
+    onDateClick?: (date: CalendarDateShape) => void;
+}
+export declare const CalendarContext: import("react").Context<CalendarContextProps>;

package/cjs/components/Calendar/CalendarContext.js

@@ -0,0 +1,16 @@
+"use strict";exports.__esModule = true;exports.CalendarContext = void 0;var _react = require("react");
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var CalendarContext = /*#__PURE__*/(0, _react.createContext)({});exports.CalendarContext = CalendarContext;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["CalendarContext.ts"],"names":["CalendarContext"],"mappings":"wEAAA;;;;;;;;;;;;;;;AAeO,IAAMA,eAAe,gBAAG,0BAAoC,EAApC,CAAxB,C","sourcesContent":["import { createContext } from 'react';\n\nimport { CalendarDateShape } from './CalendarDateShape';\nimport { CalendarProps } from './Calendar';\n\nexport interface CalendarContextProps {\n  renderDay?: CalendarProps['renderDay'];\n  value?: CalendarDateShape;\n  minDate?: CalendarDateShape;\n  maxDate?: CalendarDateShape;\n  isHoliday?: CalendarProps['isHoliday'];\n  today?: CalendarDateShape;\n  onDateClick?: (date: CalendarDateShape) => void;\n}\n\nexport const CalendarContext = createContext<CalendarContextProps>({});\n"]}

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

@@ -0,0 +1,16 @@
+import { Nullable } from '../../typings/utility-types';
+export interface CalendarDateShape {
+    year: number;
+    month: number;
+    date: number;
+}
+export declare const isEqual: (a: Nullable<CalendarDateShape>, b: Nullable<CalendarDateShape>) => boolean;
+export declare const comparator: (a: CalendarDateShape, b: CalendarDateShape) => 0 | 1 | -1;
+export declare const create: (date: number, month: number, year: number) => CalendarDateShape;
+export declare const isLess: (left: CalendarDateShape, right: CalendarDateShape) => boolean;
+export declare const isLessOrEqual: (left: CalendarDateShape, right: CalendarDateShape) => boolean;
+export declare const isGreater: (left: CalendarDateShape, right: CalendarDateShape) => boolean;
+export declare const isGreaterOrEqual: (left: CalendarDateShape, right: CalendarDateShape) => boolean;
+export declare const isBetween: (date: CalendarDateShape, left?: Nullable<CalendarDateShape>, right?: Nullable<CalendarDateShape>) => boolean;
+export declare const fromString: (dateString: string) => CalendarDateShape;
+export declare const toString: ({ date, month, year }: CalendarDateShape) => string;

package/cjs/components/Calendar/CalendarDateShape.js

@@ -0,0 +1,62 @@
+"use strict";exports.__esModule = true;exports.toString = exports.isLessOrEqual = exports.isLess = exports.isGreaterOrEqual = exports.isGreater = exports.isEqual = exports.isBetween = exports.fromString = exports.create = exports.comparator = void 0;
+
+
+
+
+
+
+
+var isEqual = function isEqual(a, b) {return (
+    Boolean(!a && !b || a && b && a.year === b.year && a.month === b.month && a.date === b.date));};exports.isEqual = isEqual;
+
+var comparator = function comparator(a, b) {
+  if (a.year < b.year) {
+    return -1;
+  } else if (a.year > b.year) {
+    return 1;
+  } else if (a.month < b.month) {
+    return -1;
+  } else if (a.month > b.month) {
+    return 1;
+  } else if (a.date < b.date) {
+    return -1;
+  } else if (a.date > b.date) {
+    return 1;
+  }
+  return 0;
+};exports.comparator = comparator;
+
+var create = function create(date, month, year) {return { date: date, month: month, year: year };};exports.create = create;
+
+var isLess = function isLess(left, right) {return comparator(left, right) === -1;};exports.isLess = isLess;
+
+var isLessOrEqual = function isLessOrEqual(left, right) {return (
+    isLess(left, right) || isEqual(left, right));};exports.isLessOrEqual = isLessOrEqual;
+
+var isGreater = function isGreater(left, right) {return !isLessOrEqual(left, right);};exports.isGreater = isGreater;
+
+var isGreaterOrEqual = function isGreaterOrEqual(left, right) {return !isLess(left, right);};exports.isGreaterOrEqual = isGreaterOrEqual;
+
+var isBetween = function isBetween(
+date,
+left,
+right)
+{
+  if (left && isLess(date, left)) {
+    return false;
+  }
+  if (right && isGreater(date, right)) {
+    return false;
+  }
+  return true;
+};exports.isBetween = isBetween;
+
+var fromString = function fromString(dateString) {
+  var _dateString$split$map = dateString.split('.').map(Number),date = _dateString$split$map[0],month = _dateString$split$map[1],year = _dateString$split$map[2];
+  return create(date, month, year);
+};exports.fromString = fromString;
+
+var toString = function toString(_ref) {var date = _ref.date,month = _ref.month,year = _ref.year;
+  var _map = [date, month, year].map(function (x) {return x.toString();}),d = _map[0],m = _map[1],y = _map[2];
+  return d.padStart(2, '0') + "." + m.padStart(2, '0') + "." + y.padStart(4, '0');
+};exports.toString = toString;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["CalendarDateShape.ts"],"names":["isEqual","a","b","Boolean","year","month","date","comparator","create","isLess","left","right","isLessOrEqual","isGreater","isGreaterOrEqual","isBetween","fromString","dateString","split","map","Number","toString","x","d","m","y","padStart"],"mappings":"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","sourcesContent":["import { Nullable } from '../../typings/utility-types';\n\nexport interface CalendarDateShape {\n  year: number;\n  month: number;\n  date: number;\n}\n\nexport const isEqual = (a: Nullable<CalendarDateShape>, b: Nullable<CalendarDateShape>) =>\n  Boolean((!a && !b) || (a && b && a.year === b.year && a.month === b.month && a.date === b.date));\n\nexport const comparator = (a: CalendarDateShape, b: CalendarDateShape) => {\n  if (a.year < b.year) {\n    return -1;\n  } else if (a.year > b.year) {\n    return 1;\n  } else if (a.month < b.month) {\n    return -1;\n  } else if (a.month > b.month) {\n    return 1;\n  } else if (a.date < b.date) {\n    return -1;\n  } else if (a.date > b.date) {\n    return 1;\n  }\n  return 0;\n};\n\nexport const create = (date: number, month: number, year: number): CalendarDateShape => ({ date, month, year });\n\nexport const isLess = (left: CalendarDateShape, right: CalendarDateShape) => comparator(left, right) === -1;\n\nexport const isLessOrEqual = (left: CalendarDateShape, right: CalendarDateShape) =>\n  isLess(left, right) || isEqual(left, right);\n\nexport const isGreater = (left: CalendarDateShape, right: CalendarDateShape) => !isLessOrEqual(left, right);\n\nexport const isGreaterOrEqual = (left: CalendarDateShape, right: CalendarDateShape) => !isLess(left, right);\n\nexport const isBetween = (\n  date: CalendarDateShape,\n  left?: Nullable<CalendarDateShape>,\n  right?: Nullable<CalendarDateShape>,\n) => {\n  if (left && isLess(date, left)) {\n    return false;\n  }\n  if (right && isGreater(date, right)) {\n    return false;\n  }\n  return true;\n};\n\nexport const fromString = (dateString: string): CalendarDateShape => {\n  const [date, month, year] = dateString.split('.').map(Number);\n  return create(date, month, year);\n};\n\nexport const toString = ({ date, month, year }: CalendarDateShape): string => {\n  const [d, m, y] = [date, month, year].map((x) => x.toString());\n  return `${d.padStart(2, '0')}.${m.padStart(2, '0')}.${y.padStart(4, '0')}`;\n};\n"]}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface CalendarDayProps extends React.HTMLAttributes<HTMLButtonElement> {
+    isToday?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    isWeekend?: boolean;
+    date: string;
+}
+/**
+ * @visibleName Calendar.Day
+ */
+export declare const CalendarDay: React.MemoExoticComponent<import("../../lib/forwardRefAndName").ReactUIComponentWithRef<HTMLButtonElement, CalendarDayProps> & Record<string, unknown>>;

package/cjs/components/Calendar/CalendarDay.js

@@ -0,0 +1,79 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.CalendarDay = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
+
+var _useLocaleForControl = require("../../lib/locale/useLocaleForControl");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _Emotion = require("../../lib/theming/Emotion");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _locale = require("../DatePicker/locale");
+var _InternalDate = require("../../lib/date/InternalDate");
+var _locale2 = require("../../lib/locale");
+var _getVisualStateDataAttributes = require("../../internal/CommonWrapper/utils/getVisualStateDataAttributes");
+var _forwardRefAndName = require("../../lib/forwardRefAndName");
+
+var _DayCellView = require("./DayCellView.styles");
+var _Calendar = require("./Calendar");var _excluded = ["isToday", "isSelected", "isDisabled", "isWeekend", "date", "children", "className"];
+
+
+
+
+
+
+
+
+
+/**
+ * @visibleName Calendar.Day
+ */
+var CalendarDay = /*#__PURE__*/(0, _react.memo)(
+(0, _forwardRefAndName.forwardRefAndName)(
+'CalendarDay',
+function CalendarDay(_ref,
+
+
+
+
+
+
+
+
+
+
+ref)
+{var _cx, _cx2;var isToday = _ref.isToday,isSelected = _ref.isSelected,isDisabled = _ref.isDisabled,isWeekend = _ref.isWeekend,date = _ref.date,children = _ref.children,className = _ref.className,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var emotion = (0, _Emotion.useEmotion)();
+  var _isTheme2022 = (0, _ThemeHelpers.isTheme2022)(theme);
+
+  var _useContext = (0, _react.useContext)(_locale2.LocaleContext),langCode = _useContext.langCode;
+  var internalDate = new _InternalDate.InternalDate({ langCode: langCode, value: date });
+
+  var locale = (0, _useLocaleForControl.useLocaleForControl)('Calendar', _locale.DatePickerLocaleHelper);
+  var ariaLabel = locale.dayCellChooseDateAriaLabel + ": " + internalDate.toA11YFormat();
+
+  var _internalDate$getComp = internalDate.getComponentsLikeNumber(),day = _internalDate$getComp.date;
+  var caption = children != null ? children : day;
+  var styles = (0, _DayCellView.getStyles)(emotion);
+
+  return /*#__PURE__*/(
+    _react.default.createElement("button", (0, _extends2.default)({
+      ref: ref,
+      "data-tid": _Calendar.CalendarDataTids.dayCell,
+      "aria-label": ariaLabel,
+      tabIndex: -1,
+      disabled: isDisabled,
+      className: (0, _Emotion.cx)((_cx = {}, _cx[
+
+      styles.day(theme)] = true, _cx[
+      styles.today(theme)] = isToday && !_isTheme2022, _cx[
+      styles.selected(theme)] = isSelected, _cx[
+      styles.weekend(theme)] = isWeekend, _cx),
+
+      className) },
+
+    (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ selected: isSelected }),
+    rest), /*#__PURE__*/
+
+    _react.default.createElement("span", { className: (0, _Emotion.cx)((_cx2 = {}, _cx2[styles.todayCaption2022(theme)] = isToday && _isTheme2022, _cx2)) }, caption)));
+
+
+}));exports.CalendarDay = CalendarDay;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["CalendarDay.tsx"],"names":["CalendarDay","ref","isToday","isSelected","isDisabled","isWeekend","date","children","className","rest","theme","ThemeContext","emotion","_isTheme2022","LocaleContext","langCode","internalDate","InternalDate","value","locale","DatePickerLocaleHelper","ariaLabel","dayCellChooseDateAriaLabel","toA11YFormat","getComponentsLikeNumber","day","caption","styles","CalendarDataTids","dayCell","today","selected","weekend","todayCaption2022"],"mappings":"8cAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,sC;;;;;;;;;;AAUA;AACA;AACA;AACO,IAAMA,WAAW,gBAAG;AACzB;AACE,aADF;AAEE,SAASA,WAAT;;;;;;;;;;;AAWEC,GAXF;AAYE,mBAVEC,OAUF,QAVEA,OAUF,CATEC,UASF,QATEA,UASF,CAREC,UAQF,QAREA,UAQF,CAPEC,SAOF,QAPEA,SAOF,CANEC,IAMF,QANEA,IAMF,CALEC,QAKF,QALEA,QAKF,CAJEC,SAIF,QAJEA,SAIF,CAHKC,IAGL;AACA,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,OAAO,GAAG,0BAAhB;AACA,MAAMC,YAAY,GAAG,+BAAYH,KAAZ,CAArB;;AAEA,oBAAqB,uBAAWI,sBAAX,CAArB,CAAQC,QAAR,eAAQA,QAAR;AACA,MAAMC,YAAY,GAAG,IAAIC,0BAAJ,CAAiB,EAAEF,QAAQ,EAARA,QAAF,EAAYG,KAAK,EAAEZ,IAAnB,EAAjB,CAArB;;AAEA,MAAMa,MAAM,GAAG,8CAAoB,UAApB,EAAgCC,8BAAhC,CAAf;AACA,MAAMC,SAAS,GAAMF,MAAM,CAACG,0BAAb,UAA4CN,YAAY,CAACO,YAAb,EAA3D;;AAEA,8BAAsBP,YAAY,CAACQ,uBAAb,EAAtB,CAAcC,GAAd,yBAAQnB,IAAR;AACA,MAAMoB,OAAO,GAAGnB,QAAH,WAAGA,QAAH,GAAekB,GAA5B;AACA,MAAME,MAAM,GAAG,4BAAUf,OAAV,CAAf;;AAEA;AACE;AACE,MAAA,GAAG,EAAEX,GADP;AAEE,kBAAU2B,2BAAiBC,OAF7B;AAGE,oBAAYR,SAHd;AAIE,MAAA,QAAQ,EAAE,CAAC,CAJb;AAKE,MAAA,QAAQ,EAAEjB,UALZ;AAME,MAAA,SAAS,EAAE;;AAENuB,MAAAA,MAAM,CAACF,GAAP,CAAWf,KAAX,CAFM,IAEc,IAFd;AAGNiB,MAAAA,MAAM,CAACG,KAAP,CAAapB,KAAb,CAHM,IAGgBR,OAAO,IAAI,CAACW,YAH5B;AAINc,MAAAA,MAAM,CAACI,QAAP,CAAgBrB,KAAhB,CAJM,IAImBP,UAJnB;AAKNwB,MAAAA,MAAM,CAACK,OAAP,CAAetB,KAAf,CALM,IAKkBL,SALlB;;AAOTG,MAAAA,SAPS,CANb;;AAeM,oEAA6B,EAAEuB,QAAQ,EAAE5B,UAAZ,EAA7B,CAfN;AAgBMM,IAAAA,IAhBN;;AAkBE,2CAAM,SAAS,EAAE,kCAAMkB,MAAM,CAACM,gBAAP,CAAwBvB,KAAxB,CAAN,IAAuCR,OAAO,IAAIW,YAAlD,QAAjB,IAAqFa,OAArF,CAlBF,CADF;;;AAsBD,CAnDH,CADyB,CAApB,C","sourcesContent":["import React, { PropsWithChildren, useContext, memo } from 'react';\n\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx, useEmotion } from '../../lib/theming/Emotion';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\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 = useEmotion();\n      const _isTheme2022 = isTheme2022(theme);\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={cx(\n            {\n              [styles.day(theme)]: true,\n              [styles.today(theme)]: isToday && !_isTheme2022,\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.todayCaption2022(theme)]: isToday && _isTheme2022 })}>{caption}</span>\n        </button>\n      );\n    },\n  ),\n);\n"]}

package/cjs/components/Calendar/CalendarDay.md

@@ -0,0 +1,70 @@
+Компонент для отрисовки дня в Calendar. Полезен при использовании вместе с его пропом `renderDay`.
+
+```jsx harmony
+import { Calendar, 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>
+</Gapped>
+```
+
+Набор функций для сравнения строковых дат.
+
+```jsx harmony
+import { isBetween, isEqual, isGreater, isGreaterOrEqual, isLess, isLessOrEqual } from '@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>
+)
+
+const Row = ({ code }) => (
+    <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}")`} />
+</Table>
+
+```
+
+```typescript static
+export function isEqual(left: string, right: string): boolean;
+export function isLess(left: string, right: string): boolean;
+export function isLessOrEqual(left: string, right: string): boolean;
+export function isGreater(left: string, right: string): boolean;
+export function isGreaterOrEqual(left: string, right: string): boolean;
+export function isBetween(
+  date: string,
+  left?: string,
+  right?: string,
+): boolean;

package/cjs/components/Calendar/CalendarScrollEvents.js

@@ -0,0 +1,23 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.addListener = addListener;exports.emit = emit;var _eventemitter = _interopRequireDefault(require("eventemitter3"));
+
+var emitterCache;
+function getEmitter() {
+  if (!emitterCache) {
+    emitterCache = new _eventemitter.default();
+  }
+  return emitterCache;
+}
+
+function addListener(callback) {
+  var emitter = getEmitter();
+  emitter.addListener('CalendarScroll', callback);
+  return {
+    remove: function remove() {
+      emitter.removeListener('CalendarScroll', callback);
+    } };
+
+}
+
+function emit() {
+  getEmitter().emit('CalendarScroll');
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["CalendarScrollEvents.ts"],"names":["emitterCache","getEmitter","EventEmitter","addListener","callback","emitter","remove","removeListener","emit"],"mappings":"0LAAA;;AAEA,IAAIA,YAAJ;AACA,SAASC,UAAT,GAAsB;AACpB,MAAI,CAACD,YAAL,EAAmB;AACjBA,IAAAA,YAAY,GAAG,IAAIE,qBAAJ,EAAf;AACD;AACD,SAAOF,YAAP;AACD;;AAEM,SAASG,WAAT,CAAqBC,QAArB,EAA2C;AAChD,MAAMC,OAAO,GAAGJ,UAAU,EAA1B;AACAI,EAAAA,OAAO,CAACF,WAAR,CAAoB,gBAApB,EAAsCC,QAAtC;AACA,SAAO;AACLE,IAAAA,MADK,oBACI;AACPD,MAAAA,OAAO,CAACE,cAAR,CAAuB,gBAAvB,EAAyCH,QAAzC;AACD,KAHI,EAAP;;AAKD;;AAEM,SAASI,IAAT,GAAgB;AACrBP,EAAAA,UAAU,GAAGO,IAAb,CAAkB,gBAAlB;AACD","sourcesContent":["import EventEmitter from 'eventemitter3';\n\nlet emitterCache: EventEmitter;\nfunction getEmitter() {\n  if (!emitterCache) {\n    emitterCache = new EventEmitter();\n  }\n  return emitterCache;\n}\n\nexport function addListener(callback: () => 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() {\n  getEmitter().emit('CalendarScroll');\n}\n"]}

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

@@ -0,0 +1,37 @@
+import { Nullable } from '../../typings/utility-types';
+import { Theme } from '../../lib/theming/Theme';
+import { MonthViewModel } from './MonthViewModel';
+import { CalendarState } from './Calendar';
+import { CalendarDateShape } from './CalendarDateShape';
+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;
+    months: MonthViewModel[];
+    scrollDirection: number;
+} | {
+    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: () => {
+    date: number;
+    month: number;
+    year: number;
+};