@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-ecefada396

package/components/DatePicker/DatePicker.md

@@ -0,0 +1,307 @@
+Компонент `DatePicker` принимает в `value` строку формата `dd.mm.yyyy`.
+При вводе строки в поле ввода, возвращает строку без маски.
+
+Имеется статический метод `DatePicker.validate`, который проверяет,
+что введенная дата корректна
+
+```ts static
+DatePicker.validate: (value: string, range?: { minDate?: string; maxDate?: string }) => boolean
+```
+
+### Валидация
+
+Пример с обработкой ошибок, когда пользователь ввел невалидную дату.
+
+```jsx harmony
+import { Gapped, Tooltip } from '@skbkontur/react-ui';
+import { ViewDateInputValidateChecks } from '@skbkontur/react-ui/components/DateInput/ViewDateInputValidateChecks';
+
+const [value, setValue] = React.useState();
+const [error, setError] = React.useState(false);
+const [tooltip, setTooltip] = React.useState(false);
+
+const minDate = '22.12.2012';
+const maxDate = '02.05.2018';
+
+const unvalidate = () => {
+  setError(false);
+  setTooltip(false);
+};
+
+const validate = () => {
+  const errorNew = !!value && !DatePicker.validate(value, { minDate: minDate, maxDate: maxDate });
+  setError(errorNew);
+  setTooltip(errorNew);
+};
+
+let removeTooltip = () => setTooltip(false);
+
+<Gapped gap={10} vertical>
+  <ViewDateInputValidateChecks value={value} minDate={minDate} maxDate={maxDate} />
+  <pre>
+    minDate = {minDate}
+    <br />
+    maxDate = {maxDate}
+  </pre>
+
+  <Tooltip trigger={tooltip ? 'opened' : 'closed'} render={() => 'Невалидная дата'} onCloseClick={removeTooltip}>
+    <DatePicker
+      error={error}
+      value={value}
+      onValueChange={setValue}
+      onFocus={unvalidate}
+      onBlur={validate}
+      minDate={minDate}
+      maxDate={maxDate}
+      enableTodayLink
+    />
+  </Tooltip>
+</Gapped>;
+```
+
+### `isHoliday`
+
+В компонент можно передать функцию `isHoliday`, которая будет получать день строкой формата `dd.mm.yyyy` и флаг `isWeekend`, и должна вернуть `true` для выходного и `false` для рабочего дня.
+
+```jsx harmony
+import * as DatePickerHelpers from './DatePickerHelpers';
+
+const [value, setValue] = 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;
+};
+
+<DatePicker isHoliday={isHoliday} value={value} onValueChange={setValue} enableTodayLink />;
+```
+
+### Производственный календарь
+
+Пример обработки производственного календаря от `data.gov.ru`
+
+<details><summary>`data.gov.ru`</summary>
+
+Docs:
+https://data.gov.ru/api-portala-otkrytyh-dannyh-rf-polnoe-rukovodstvo
+
+Request:
+
+```md
+https://data.gov.ru/api/json/dataset/7708660670-proizvcalendar/version/20151123T183036/content?search=2021&access_token=31de6d0b90f51a7aa3ee2d518d50f4e9
+```
+
+Response:
+
+```json
+[
+  {
+    "Год/Месяц": "2021",
+    "Январь": "1,2,3,4,5,6,7,8,9,10,16,17,23,24,30,31",
+    "Февраль": "6,7,13,14,20,21,22*,23,27,28",
+    "Март": "6,7,8*,13,14,20,21,27,28",
+    "Апрель": "3,4,10,11,17,18,24,25,30*",
+    "Май": "1,2,3+,8,9,10+,15,16,22,23,29,30",
+    "Июнь": "5,6,11*,12,13,14+,19,20,26,27",
+    "Июль": "3,4,10,11,17,18,24,25,31",
+    "Август": "1,7,8,14,15,21,22,28,29",
+    "Сентябрь": "4,5,11,12,18,19,25,26",
+    "Октябрь": "2,3,9,10,16,17,23,24,30,31",
+    "Ноябрь": "3*,4,6,7,13,14,20,21,27,28",
+    "Декабрь": "4,5,11,12,18,19,25,26,31*",
+    "Всего рабочих дней": "249",
+    "Всего праздничных и выходных дней": "116",
+    "Количество рабочих часов при 40-часовой рабочей неделе": "1987",
+    "Количество рабочих часов при 36-часовой рабочей неделе": "1787.8",
+    "Количество рабочих часов при 24-часовой рабочей неделе": "1190.2"
+  }
+]
+```
+
+</details>
+
+```jsx harmony
+const today = new Date();
+const year = today.getFullYear();
+const response = [
+  {
+    'Год/Месяц': '2021',
+    Январь: '1,2,3,4,5,6,7,8,9,10,16,17,23,24,30,31',
+    Февраль: '6,7,13,14,20,21,22*,23,27,28',
+    Март: '6,7,8*,13,14,20,21,27,28',
+    Апрель: '3,4,10,11,17,18,24,25,30*',
+    Май: '1,2,3+,8,9,10+,15,16,22,23,29,30',
+    Июнь: '5,6,11*,12,13,14+,19,20,26,27',
+    Июль: '3,4,10,11,17,18,24,25,31',
+    Август: '1,7,8,14,15,21,22,28,29',
+    Сентябрь: '4,5,11,12,18,19,25,26',
+    Октябрь: '2,3,9,10,16,17,23,24,30,31',
+    Ноябрь: '3*,4,6,7,13,14,20,21,27,28',
+    Декабрь: '4,5,11,12,18,19,25,26,31*',
+    'Всего рабочих дней': '249',
+    'Всего праздничных и выходных дней': '116',
+    'Количество рабочих часов при 40-часовой рабочей неделе': '1987',
+    'Количество рабочих часов при 36-часовой рабочей неделе': '1787.8',
+    'Количество рабочих часов при 24-часовой рабочей неделе': '1190.2',
+  },
+];
+let result = [];
+let holidays = [];
+
+if (response.length !== 0) {
+  result = Object.values(
+    response.length > 1 ? response.find(data => data['Год/Месяц'] === year.toString()) || response[0] : response[0],
+  ).slice(1, 13);
+}
+result.forEach((month, index) => {
+  month
+    .split(',')
+    .filter(item => /^\d*$/.test(item))
+    .forEach(day => {
+      holidays.push(`${day.padStart(2, 0)}.${(index + 1).toString().padStart(2, 0)}.${year}`);
+    });
+});
+
+const isHoliday = (date, isWeekend) => holidays.includes(date) || isWeekend;
+
+<DatePicker isHoliday={isHoliday} onValueChange={() => void 0} enableTodayLink />;
+```
+
+### Ручное форматирование даты
+
+```jsx harmony
+import { DateOrder, DateSeparator, Gapped, LocaleContext, Select, LangCodes } from '@skbkontur/react-ui';
+
+class DatePickerFormatting extends React.Component {
+  constructor() {
+    this.state = {
+      order: DateOrder.YMD,
+      separator: 'Dot',
+      value: '21.12.2012',
+    };
+  }
+
+  render() {
+    return (
+      <Gapped vertical gap={10}>
+        <div>
+          <span style={{ width: '300px', display: 'inline-block' }}>
+            Порядок компонентов (<tt>DateOrder</tt>)
+          </span>
+          <Select
+            value={this.state.order}
+            items={Object.keys(DateOrder)}
+            onValueChange={order => this.setState({ order })}
+          />
+        </div>
+        <div>
+          <span style={{ width: '300px', display: 'inline-block' }}>
+            Разделитель (<tt>DateSeparator</tt>)
+          </span>
+          <Select
+            value={this.state.separator}
+            items={Object.keys(DateSeparator)}
+            onValueChange={separator => this.setState({ separator })}
+          />
+        </div>
+        <LocaleContext.Provider
+          value={{
+            langCode: LangCodes.ru_RU,
+            locale: {
+              DatePicker: {
+                separator: DateSeparator[this.state.separator],
+                order: this.state.order,
+              },
+            },
+          }}
+        >
+          <DatePicker onValueChange={value => this.setState({ value })} value={this.state.value} />
+        </LocaleContext.Provider>
+      </Gapped>
+    );
+  }
+}
+
+<DatePickerFormatting />;
+```
+
+#### Локали по умолчанию
+
+```typescript static
+interface DatePickerLocale {
+  today?: string;
+  months?: string[];
+  order?: DateOrder;
+  separator?: DateSeparator;
+}
+
+const ru_RU = {
+  today: 'Сегодня',
+  months: [
+    'Январь',
+    'Февраль',
+    'Март',
+    'Апрель',
+    'Май',
+    'Июнь',
+    'Июль',
+    'Август',
+    'Сентябрь',
+    'Октябрь',
+    'Ноябрь',
+    'Декабрь',
+  ],
+  order: DateOrder.DMY,
+  separator: DateSeparator.Dot,
+};
+
+const en_GB = {
+  today: 'Today',
+  months: [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ],
+  order: DateOrder.MDY,
+  separator: DateSeparator.Slash,
+};
+```

package/components/DatePicker/DatePicker.styles/DatePicker.styles.js

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  root: function root() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      position: relative;\n      touch-action: none;\n      line-height: normal;\n    "])));
+  }
+});

package/components/DatePicker/DatePicker.styles/DatePicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DatePicker.styles.ts"],"names":["css","memoizeStyle","styles","root"],"mappings":"oHAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;;;AAMD,GARgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      display: inline-block;\n      position: relative;\n      touch-action: none;\n      line-height: normal;\n    `;\n  },\n});\n"]}

package/components/DatePicker/DatePicker.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/DatePicker/DatePicker.styles.js",
+  "module": "DatePicker.styles",
+  "types": "../DatePicker.styles.d.ts",
+  "sideEffects": false
+}

package/components/DatePicker/DatePicker.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: {
+    root(): string;
+};

package/components/DatePicker/DatePickerHelpers/DatePickerHelpers.js

@@ -0,0 +1,14 @@
+export function formatDate(_ref) {
+  var date = _ref.date,
+      month = _ref.month,
+      year = _ref.year;
+
+  var _map = [date, month + 1, 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/components/DatePicker/DatePickerHelpers/DatePickerHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DatePickerHelpers.tsx"],"names":["formatDate","date","month","year","map","x","toString","d","m","y","padStart"],"mappings":";;AAEA,OAAO,SAASA,UAAT,OAAsE,KAAhDC,IAAgD,QAAhDA,IAAgD,CAA1CC,KAA0C,QAA1CA,KAA0C,CAAnCC,IAAmC,QAAnCA,IAAmC;AACzD,GAACF,IAAD,EAAOC,KAAK,GAAG,CAAf,EAAkBC,IAAlB,EAAwBC,GAAxB,CAA4B,UAACC,CAAD,UAAOA,CAAC,CAACC,QAAF,EAAP,EAA5B,CADyD,CACpEC,CADoE,WACjEC,CADiE,WAC9DC,CAD8D;AAE3E,SAAUF,CAAC,CAACG,QAAF,CAAW,CAAX,EAAc,GAAd,CAAV,SAAgCF,CAAC,CAACE,QAAF,CAAW,CAAX,EAAc,GAAd,CAAhC,SAAsDD,CAAC,CAACC,QAAF,CAAW,CAAX,EAAc,GAAd,CAAtD;AACD","sourcesContent":["import { CalendarDateShape } from '../../internal/Calendar';\n\nexport function formatDate({ date, month, year }: CalendarDateShape): string {\n  const [d, m, y] = [date, month + 1, year].map((x) => x.toString());\n  return `${d.padStart(2, '0')}.${m.padStart(2, '0')}.${y.padStart(4, '0')}`;\n}\n"]}

package/components/DatePicker/DatePickerHelpers/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/DatePicker/DatePickerHelpers.js",
+  "module": "DatePickerHelpers",
+  "types": "../DatePickerHelpers.d.ts",
+  "sideEffects": false
+}

package/components/DatePicker/DatePickerHelpers.d.ts

@@ -1,2 +1,2 @@
-import { CalendarDateShape } from '../Calendar/index';
-export declare function formatDate({ date, month, year }: CalendarDateShape): string;
+import { CalendarDateShape } from '../../internal/Calendar';
+export declare function formatDate({ date, month, year }: CalendarDateShape): string;

package/components/DatePicker/Picker/Picker.js

@@ -0,0 +1,144 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _dec, _class, _class2, _temp;
+
+import React from 'react';
+import shallowEqual from 'shallowequal';
+import { InternalDate } from "../../../lib/date/InternalDate";
+import { InternalDateGetter } from "../../../lib/date/InternalDateGetter";
+import { Calendar, isGreater, isLess } from "../../../internal/Calendar";
+import { locale } from "../../../lib/locale/decorators";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { styles } from "../Picker.styles";
+import { DatePickerLocaleHelper } from "../locale";
+
+var getTodayCalendarDate = function getTodayCalendarDate() {
+  var d = new Date();
+  return {
+    date: d.getDate(),
+    month: d.getMonth(),
+    year: d.getFullYear()
+  };
+};
+
+export var Picker = (_dec = locale('DatePicker', DatePickerLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Picker, _React$Component);
+
+  function Picker(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this.theme = void 0;
+    _this.calendar = null;
+    _this.locale = void 0;
+
+    _this.scrollToMonth = function (month, year) {
+      if (_this.calendar) {
+        _this.calendar.scrollToMonth(month, year);
+      }
+    };
+
+    _this.handleSelectToday = function (today) {
+      return function () {
+        if (_this.props.onSelect) {
+          _this.props.onSelect(today.toNativeFormat());
+        }
+
+        if (_this.calendar) {
+          var _this$state$today = _this.state.today,
+              month = _this$state$today.month,
+              year = _this$state$today.year;
+
+          _this.calendar.scrollToMonth(month, year);
+        }
+      };
+    };
+
+    _this.getInitialDate = function (today) {
+      if (_this.props.value) {
+        return _this.props.value;
+      }
+
+      if (_this.props.minDate && isLess(today, _this.props.minDate)) {
+        return _this.props.minDate;
+      }
+
+      if (_this.props.maxDate && isGreater(today, _this.props.maxDate)) {
+        return _this.props.maxDate;
+      }
+
+      return today;
+    };
+
+    var _today = getTodayCalendarDate();
+
+    _this.state = {
+      date: _this.getInitialDate(_today),
+      today: _today
+    };
+    return _this;
+  }
+
+  var _proto = Picker.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var value = this.props.value;
+
+    if (value && !shallowEqual(value, prevProps.value)) {
+      this.scrollToMonth(value.month, value.year);
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _this3 = this;
+
+    var date = this.state.date;
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.root(this.theme),
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      }
+    }, /*#__PURE__*/React.createElement(Calendar, {
+      ref: function ref(c) {
+        return _this3.calendar = c;
+      },
+      value: this.props.value,
+      initialMonth: date.month,
+      initialYear: date.year,
+      onSelect: this.props.onPick,
+      minDate: this.props.minDate,
+      maxDate: this.props.maxDate,
+      isHoliday: this.props.isHoliday
+    }), this.props.enableTodayLink && this.renderTodayLink(), ' ');
+  };
+
+  _proto.renderTodayLink = function renderTodayLink() {
+    var _this$locale = this.locale,
+        order = _this$locale.order,
+        separator = _this$locale.separator;
+    var today = new InternalDate({
+      order: order,
+      separator: separator
+    }).setComponents(InternalDateGetter.getTodayComponents());
+    return /*#__PURE__*/React.createElement("button", {
+      "data-tid": "Picker__todayWrapper",
+      className: styles.todayWrapper(this.theme),
+      onClick: this.handleSelectToday(today),
+      tabIndex: -1
+    }, this.locale.today + " " + today.toString({
+      withPad: true,
+      withSeparator: true
+    }));
+  };
+
+  return Picker;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Picker', _temp)) || _class);

package/components/DatePicker/Picker/Picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Picker.tsx"],"names":["React","shallowEqual","InternalDate","InternalDateGetter","Calendar","isGreater","isLess","locale","ThemeContext","styles","DatePickerLocaleHelper","getTodayCalendarDate","d","Date","date","getDate","month","getMonth","year","getFullYear","Picker","props","theme","calendar","scrollToMonth","handleSelectToday","today","onSelect","toNativeFormat","state","getInitialDate","value","minDate","maxDate","componentDidUpdate","prevProps","render","renderMain","root","e","preventDefault","c","onPick","isHoliday","enableTodayLink","renderTodayLink","order","separator","setComponents","getTodayComponents","todayWrapper","toString","withPad","withSeparator","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\nimport shallowEqual from 'shallowequal';\n\nimport { InternalDate } from '../../lib/date/InternalDate';\nimport { InternalDateGetter } from '../../lib/date/InternalDateGetter';\nimport { Calendar, CalendarDateShape, isGreater, isLess } from '../../internal/Calendar';\nimport { locale } from '../../lib/locale/decorators';\nimport { Nullable } from '../../typings/utility-types';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { styles } from './Picker.styles';\nimport { DatePickerLocale, DatePickerLocaleHelper } from './locale';\n\ninterface Props {\n  maxDate?: CalendarDateShape;\n  minDate?: CalendarDateShape;\n  value: Nullable<CalendarDateShape>;\n  onPick: (date: CalendarDateShape) => void;\n  onSelect?: (date: CalendarDateShape) => void;\n  enableTodayLink?: boolean;\n  isHoliday?: (day: CalendarDateShape & { isWeekend: boolean }) => boolean;\n}\n\ninterface State {\n  date: CalendarDateShape;\n  today: CalendarDateShape;\n}\n\nconst getTodayCalendarDate = () => {\n  const d = new Date();\n  return {\n    date: d.getDate(),\n    month: d.getMonth(),\n    year: d.getFullYear(),\n  };\n};\n\n@locale('DatePicker', DatePickerLocaleHelper)\nexport class Picker extends React.Component<Props, State> {\n  public static __KONTUR_REACT_UI__ = 'Picker';\n\n  private theme!: Theme;\n  private calendar: Calendar | null = null;\n  private readonly locale!: DatePickerLocale;\n\n  constructor(props: Props) {\n    super(props);\n    const today = getTodayCalendarDate();\n    this.state = {\n      date: this.getInitialDate(today),\n      today,\n    };\n  }\n\n  public componentDidUpdate(prevProps: Props) {\n    const { value } = this.props;\n    if (value && !shallowEqual(value, prevProps.value)) {\n      this.scrollToMonth(value.month, value.year);\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { date } = this.state;\n\n    return (\n      <div className={styles.root(this.theme)} onMouseDown={(e) => e.preventDefault()}>\n        <Calendar\n          ref={(c) => (this.calendar = c)}\n          value={this.props.value}\n          initialMonth={date.month}\n          initialYear={date.year}\n          onSelect={this.props.onPick}\n          minDate={this.props.minDate}\n          maxDate={this.props.maxDate}\n          isHoliday={this.props.isHoliday}\n        />\n        {this.props.enableTodayLink && this.renderTodayLink()}{' '}\n      </div>\n    );\n  }\n\n  private scrollToMonth = (month: number, year: number) => {\n    if (this.calendar) {\n      this.calendar.scrollToMonth(month, year);\n    }\n  };\n\n  private renderTodayLink() {\n    const { order, separator } = this.locale;\n    const today = new InternalDate({ order, separator }).setComponents(InternalDateGetter.getTodayComponents());\n    return (\n      <button\n        data-tid=\"Picker__todayWrapper\"\n        className={styles.todayWrapper(this.theme)}\n        onClick={this.handleSelectToday(today)}\n        tabIndex={-1}\n      >\n        {`${this.locale.today} ${today.toString({ withPad: true, withSeparator: true })}`}\n      </button>\n    );\n  }\n\n  private handleSelectToday = (today: InternalDate) => () => {\n    if (this.props.onSelect) {\n      this.props.onSelect(today.toNativeFormat()!);\n    }\n    if (this.calendar) {\n      const { month, year } = this.state.today;\n      this.calendar.scrollToMonth(month, year);\n    }\n  };\n\n  private getInitialDate = (today: CalendarDateShape) => {\n    if (this.props.value) {\n      return this.props.value;\n    }\n\n    if (this.props.minDate && isLess(today, this.props.minDate)) {\n      return this.props.minDate;\n    }\n\n    if (this.props.maxDate && isGreater(today, this.props.maxDate)) {\n      return this.props.maxDate;\n    }\n\n    return today;\n  };\n}\n"]}

package/components/DatePicker/Picker/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/DatePicker/Picker.js",
+  "module": "Picker",
+  "types": "../Picker.d.ts",
+  "sideEffects": false
+}

package/components/DatePicker/Picker.d.ts

@@ -1,30 +1,33 @@
-import * as React from 'react';
-import { CalendarDateShape } from '../Calendar';
-import { Nullable } from '../../typings/utility-types';
-interface Props {
-    maxDate?: CalendarDateShape;
-    minDate?: CalendarDateShape;
-    value: Nullable<CalendarDateShape>;
-    onPick: (date: CalendarDateShape) => void;
-    onSelect?: (date: CalendarDateShape) => void;
-    enableTodayLink?: boolean;
-    isHoliday?: (day: CalendarDateShape & {
-        isWeekend: boolean;
-    }) => boolean;
-}
-interface State {
-    date: CalendarDateShape;
-    today: CalendarDateShape;
-}
-export default class Picker extends React.Component<Props, State> {
-    private calendar;
-    private readonly locale;
-    constructor(props: Props);
-    componentDidUpdate(prevProps: Props): void;
-    render(): JSX.Element;
-    private scrollToMonth;
-    private renderTodayLink;
-    private handleSelectToday;
-    private getInitialDate;
-}
-export {};
+import React from 'react';
+import { CalendarDateShape } from '../../internal/Calendar';
+import { Nullable } from '../../typings/utility-types';
+interface Props {
+    maxDate?: CalendarDateShape;
+    minDate?: CalendarDateShape;
+    value: Nullable<CalendarDateShape>;
+    onPick: (date: CalendarDateShape) => void;
+    onSelect?: (date: CalendarDateShape) => void;
+    enableTodayLink?: boolean;
+    isHoliday?: (day: CalendarDateShape & {
+        isWeekend: boolean;
+    }) => boolean;
+}
+interface State {
+    date: CalendarDateShape;
+    today: CalendarDateShape;
+}
+export declare class Picker extends React.Component<Props, State> {
+    static __KONTUR_REACT_UI__: string;
+    private theme;
+    private calendar;
+    private readonly locale;
+    constructor(props: Props);
+    componentDidUpdate(prevProps: Props): void;
+    render(): JSX.Element;
+    private renderMain;
+    private scrollToMonth;
+    private renderTodayLink;
+    private handleSelectToday;
+    private getInitialDate;
+}
+export {};

package/components/DatePicker/Picker.styles/Picker.styles.js

@@ -0,0 +1,13 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  root: function root(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      box-shadow: ", ";\n      display: inline-block;\n      font-size: 0;\n      z-index: 1000;\n      touch-action: none;\n    "])), t.pickerBg, t.pickerShadow);
+  },
+  todayWrapper: function todayWrapper(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      border: none;\n      border-top: ", ";\n      color: ", ";\n      display: block;\n      font-size: ", ";\n      padding-bottom: ", ";\n      padding-top: ", ";\n      line-height: ", ";\n      width: 100%;\n\n      &:hover {\n        background-color: ", ";\n        cursor: pointer;\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), t.pickerTodayWrapperBgColor, t.pickerTodayWrapperBorderTop, t.linkColor, t.pickerTodayWrapperFontSize, t.pickerTodayWrapperPaddingBottom, t.pickerTodayWrapperPaddingTop, t.pickerTodayWrapperLineHeight, t.pickerTodayWrapperHoverBgColor, t.linkActiveColor);
+  }
+});

package/components/DatePicker/Picker.styles/Picker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Picker.styles.ts"],"names":["css","memoizeStyle","styles","root","t","pickerBg","pickerShadow","todayWrapper","pickerTodayWrapperBgColor","pickerTodayWrapperBorderTop","linkColor","pickerTodayWrapperFontSize","pickerTodayWrapperPaddingBottom","pickerTodayWrapperPaddingTop","pickerTodayWrapperLineHeight","pickerTodayWrapperHoverBgColor","linkActiveColor"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACC,QADlB;AAEgBD,IAAAA,CAAC,CAACE,YAFlB;;;;;;AAQD,GAVgC;;AAYjCC,EAAAA,YAZiC,wBAYpBH,CAZoB,EAYV;AACrB,WAAOJ,GAAP;AACsBI,IAAAA,CAAC,CAACI,yBADxB;;AAGgBJ,IAAAA,CAAC,CAACK,2BAHlB;AAIWL,IAAAA,CAAC,CAACM,SAJb;;AAMeN,IAAAA,CAAC,CAACO,0BANjB;AAOoBP,IAAAA,CAAC,CAACQ,+BAPtB;AAQiBR,IAAAA,CAAC,CAACS,4BARnB;AASiBT,IAAAA,CAAC,CAACU,4BATnB;;;;AAawBV,IAAAA,CAAC,CAACW,8BAb1B;;;;;AAkBaX,IAAAA,CAAC,CAACY,eAlBf;;;AAqBD,GAlCgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      background: ${t.pickerBg};\n      box-shadow: ${t.pickerShadow};\n      display: inline-block;\n      font-size: 0;\n      z-index: 1000;\n      touch-action: none;\n    `;\n  },\n\n  todayWrapper(t: Theme) {\n    return css`\n      background-color: ${t.pickerTodayWrapperBgColor};\n      border: none;\n      border-top: ${t.pickerTodayWrapperBorderTop};\n      color: ${t.linkColor};\n      display: block;\n      font-size: ${t.pickerTodayWrapperFontSize};\n      padding-bottom: ${t.pickerTodayWrapperPaddingBottom};\n      padding-top: ${t.pickerTodayWrapperPaddingTop};\n      line-height: ${t.pickerTodayWrapperLineHeight};\n      width: 100%;\n\n      &:hover {\n        background-color: ${t.pickerTodayWrapperHoverBgColor};\n        cursor: pointer;\n      }\n\n      &:active {\n        color: ${t.linkActiveColor};\n      }\n    `;\n  },\n});\n"]}

package/components/DatePicker/Picker.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/DatePicker/Picker.styles.js",
+  "module": "Picker.styles",
+  "types": "../Picker.styles.d.ts",
+  "sideEffects": false
+}

package/components/DatePicker/Picker.styles.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(t: Theme): string;
+    todayWrapper(t: Theme): string;
+};

package/components/DatePicker/index/index.js

@@ -0,0 +1 @@
+export * from "../DatePicker";

package/components/DatePicker/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAd","sourcesContent":["export * from './DatePicker';\n"]}

package/components/DatePicker/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/DatePicker/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/components/DatePicker/index.d.ts

@@ -1 +1 @@
-export { default, DatePickerProps, DatePickerState } from './DatePicker';
+export * from './DatePicker';