@skbkontur/react-ui 0.0.0-001618ff8c → 0.0.0-044e274f2c

package/cjs/components/Calendar/Calendar.md

@@ -0,0 +1,275 @@
+
+
+Календарь с заданной датой
+
+```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: 'Выбрать дату',
+};
+```
+
+
+### Скролл к месяцу
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+
+const initialValue = "02.09.2023";
+const [value, setValue] = React.useState(initialValue);
+const calendarRef = React.useRef(null);
+
+<>
+  <Gapped gap={8} verticalAlign="top">
+    <Calendar
+      value={value}
+      ref={calendarRef}
+      onValueChange={setValue}
+    />
+    
+    <Gapped vertical gap={8}>
+      <Button onClick={() => calendarRef.current.scrollToMonth(1, 2023)}>
+        I квартал
+      </Button>
+      <Button onClick={() => calendarRef.current.scrollToMonth(4, 2023)}>
+        II квартал
+      </Button>
+      <Button onClick={() => calendarRef.current.scrollToMonth(7, 2023)}>
+        III квартал
+      </Button>
+      <Button onClick={() => calendarRef.current.scrollToMonth(10, 2023)}>
+        IV квартал
+      </Button>
+    </Gapped>
+  </Gapped>
+</>;
+```

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,36 @@
+"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 = exports.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.calendarBorderRadius,
+        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);
+
+      }
+    }));};

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

@@ -0,0 +1 @@
+{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","getStyles","exports","emotion","memoizeStyle","root","t","width","parseInt","calendarCellWidth","css","_taggedTemplateLiteralLoose2","default","calendarBg","calendarBorderRadius","textColorDefault","calendarPaddingX","wrapper","separator","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,IAAAA,QAAA,GAAAC,OAAA,8BAAyD,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA;;;AAGlD,IAAMC,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAAIE,OAAgB;IACxC,IAAAC,qBAAY,EAAC;MACXC,IAAI,WAAAA,KAACC,CAAQ,EAAE;QACb,IAAMC,KAAK,GAAGC,QAAQ,CAACF,CAAC,CAACG,iBAAiB,CAAC,GAAG,CAAC;QAC/C,OAAON,OAAO,CAACO,GAAG,CAAAZ,eAAA,KAAAA,eAAA,OAAAa,4BAAA,CAAAC,OAAA;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,OAAOd,OAAO,CAACO,GAAG,CAAAX,gBAAA,KAAAA,gBAAA,OAAAY,4BAAA,CAAAC,OAAA;;;;;MAKpB,CAAC;;MAEDM,SAAS,WAAAA,UAACZ,CAAQ,EAAE;QAClB,OAAOH,OAAO,CAACO,GAAG,CAAAV,gBAAA,KAAAA,gBAAA,OAAAW,4BAAA,CAAAC,OAAA;QACCN,CAAC,CAACa,6BAA6B;QACpCb,CAAC,CAACc,yBAAyB;;MAE3C;IACF,CAAC,CAAC","ignoreList":[]}

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 = exports.CalendarContext = /*#__PURE__*/(0, _react.createContext)({});

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","CalendarContext","exports","createContext"],"sources":["CalendarContext.ts"],"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"],"mappings":"wEAAA,IAAAA,MAAA,GAAAC,OAAA;;;;;;;;;;;;;;;AAeO,IAAMC,eAAe,GAAAC,OAAA,CAAAD,eAAA,gBAAG,IAAAE,oBAAa,EAAuB,CAAC,CAAC,CAAC","ignoreList":[]}

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 = exports.isEqual = function isEqual(a, b) {return (
+    Boolean(!a && !b || a && b && a.year === b.year && a.month === b.month && a.date === b.date));};
+
+var comparator = exports.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;
+};
+
+var create = exports.create = function create(date, month, year) {return { date: date, month: month, year: year };};
+
+var isLess = exports.isLess = function isLess(left, right) {return comparator(left, right) === -1;};
+
+var isLessOrEqual = exports.isLessOrEqual = function isLessOrEqual(left, right) {return (
+    isLess(left, right) || isEqual(left, right));};
+
+var isGreater = exports.isGreater = function isGreater(left, right) {return !isLessOrEqual(left, right);};
+
+var isGreaterOrEqual = exports.isGreaterOrEqual = function isGreaterOrEqual(left, right) {return !isLess(left, right);};
+
+var isBetween = exports.isBetween = function isBetween(
+date,
+left,
+right)
+{
+  if (left && isLess(date, left)) {
+    return false;
+  }
+  if (right && isGreater(date, right)) {
+    return false;
+  }
+  return true;
+};
+
+var fromString = exports.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);
+};
+
+var toString = exports.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');
+};

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

@@ -0,0 +1 @@
+{"version":3,"names":["isEqual","exports","a","b","Boolean","year","month","date","comparator","create","isLess","left","right","isLessOrEqual","isGreater","isGreaterOrEqual","isBetween","fromString","dateString","_dateString$split$map","split","map","Number","toString","_ref","_map","x","d","m","y","padStart"],"sources":["CalendarDateShape.ts"],"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"],"mappings":"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","ignoreList":[]}

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, React.PropsWithChildren<CalendarDayProps>> & Record<never, never>>;

package/cjs/components/Calendar/CalendarDay.js

@@ -0,0 +1,78 @@
+"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 _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 = exports.CalendarDay = /*#__PURE__*/(0, _react.memo)(
+  (0, _forwardRefAndName.forwardRefAndName)(
+    'CalendarDay',
+    function CalendarDay(_ref,
+
+
+
+
+
+
+
+
+
+
+    ref)
+    {var _emotion$cx, _emotion$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, _react.useContext)(_Emotion.EmotionContext);
+
+      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: 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
+          ) },
+        (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ selected: isSelected }),
+        rest), /*#__PURE__*/
+
+        _react.default.createElement("span", { className: emotion.cx((_emotion$cx2 = {}, _emotion$cx2[styles.todayCaption(theme)] = isToday, _emotion$cx2)) }, caption)
+        ));
+
+    }
+  )
+);

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_useLocaleForControl","_ThemeContext","_Emotion","_locale","_InternalDate","_locale2","_getVisualStateDataAttributes","_forwardRefAndName","_DayCellView","_Calendar","_excluded","CalendarDay","exports","memo","forwardRefAndName","_ref","ref","_emotion$cx","_emotion$cx2","isToday","isSelected","isDisabled","isWeekend","date","children","className","rest","_objectWithoutPropertiesLoose2","default","theme","useContext","ThemeContext","emotion","EmotionContext","_useContext","LocaleContext","langCode","internalDate","InternalDate","value","locale","useLocaleForControl","DatePickerLocaleHelper","ariaLabel","dayCellChooseDateAriaLabel","toA11YFormat","_internalDate$getComp","getComponentsLikeNumber","day","caption","styles","getStyles","createElement","_extends2","CalendarDataTids","dayCell","tabIndex","disabled","cx","selected","weekend","getVisualStateDataAttributes","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":"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","ignoreList":[]}

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.d.ts

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

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');
+}