@skbkontur/react-ui 0.0.0-ce2a893b1a → 0.0.0-d1bb8f344a

package/cjs/components/DatePicker/DatePicker.md

@@ -59,6 +59,25 @@ let removeTooltip = () => setTooltip(false);
 </Gapped>;
 ```
 
+Очистить значение в `DatePicker`'е можно с помощью пустой строки, `null` или `undefined`
+
+```jsx harmony
+import { Button, Group } from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState('24.08.2022');
+
+<Group>
+  <DatePicker
+    value={value}
+    onValueChange={setValue}
+    enableTodayLink
+  />
+  <Button onClick={() => setValue(null)}>Null</Button>
+  <Button onClick={() => setValue(undefined)}>Undefined</Button>
+  <Button onClick={() => setValue('')}>Пустая строка</Button>
+</Group>;
+```
+
 ### `isHoliday`
 
 В компонент можно передать функцию `isHoliday`, которая будет получать день строкой формата `dd.mm.yyyy` и флаг `isWeekend`, и должна вернуть `true` для выходного и `false` для рабочего дня.
@@ -113,7 +132,7 @@ const isHoliday = (day, isWeekend) => {
 <details><summary>`data.gov.ru`</summary>
 
 Docs:
-https://data.gov.ru/api-portala-otkrytyh-dannyh-rf-polnoe-rukovodstvo
+<https://data.gov.ru/api-portala-otkrytyh-dannyh-rf-polnoe-rukovodstvo>
 
 Request:
 
@@ -255,6 +274,29 @@ class DatePickerFormatting extends React.Component {
 <DatePickerFormatting />;
 ```
 
+### Кастомный рендер дня
+Подбробный пример в [Calendar](#/Components/Calendar)
+
+```jsx harmony
+import { CalendarDay } from "@skbkontur/react-ui";
+
+const [value, setValue] = React.useState('12.05.2022');
+
+const renderDay = (props) => {
+  const [date] = props.date.split('.').map(Number);
+  const isEven = date % 2 === 0;
+
+  if (isEven) {
+    return <CalendarDay {...props} style={{ background: '#e9f8e3' }} />
+  }
+  
+  return <CalendarDay {...props} />
+};
+
+
+<DatePicker value={value} onValueChange={setValue} renderDay={renderDay} />;
+```
+
 #### Локали по умолчанию
 
 ```typescript static
@@ -263,6 +305,11 @@ interface DatePickerLocale {
   months?: string[];
   order?: DateOrder;
   separator?: DateSeparator;
+  todayAriaLabel?: string
+  selectMonthAriaLabel?: string;
+  selectYearAriaLabel?: string;
+  selectChosenAriaLabel?: string;
+  dayCellChooseDateAriaLabel?: string;
 }
 
 const ru_RU = {
@@ -283,6 +330,11 @@ const ru_RU = {
   ],
   order: DateOrder.DMY,
   separator: DateSeparator.Dot,
+  todayAriaLabel: 'Перейти к сегодняшней дате',
+  selectMonthAriaLabel: 'месяц',
+  selectYearAriaLabel: 'год',
+  selectChosenAriaLabel: 'Выбранный',
+  dayCellChooseDateAriaLabel: 'Выбрать дату',
 };
 
 const en_GB = {
@@ -303,5 +355,14 @@ const en_GB = {
   ],
   order: DateOrder.MDY,
   separator: DateSeparator.Slash,
+  todayAriaLabel: "Go to today's date",
+  selectMonthAriaLabel: 'month',
+  selectYearAriaLabel: 'year',
+  selectChosenAriaLabel: 'Chosen',
+  dayCellChooseDateAriaLabel: 'Choose date',
 };
 ```
+
+### Адаптивность
+
+На мобильных устройствах есть несколько вариантов. По умолчанию откроется адаптивная версия в попапе. Но можно открывать нативный календарь, если передать проп `useMobileNativeDatePicker`.

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

@@ -1,3 +1,6 @@
+import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     root(): string;
+    calendarWrapper(t: Theme): string;
+    todayLinkWrapper(t: Theme): string;
 };

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

@@ -1,4 +1,5 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3;
 
 var styles = (0, _Emotion.memoizeStyle)({
   root: function root() {
@@ -8,4 +9,38 @@ var styles = (0, _Emotion.memoizeStyle)({
 
 
 
+  },
+  calendarWrapper: function calendarWrapper(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      box-shadow: ", ";\n      display: inline-block;\n      font-size: 0;\n      z-index: 1000;\n      touch-action: none;\n      border-radius: ", ";\n    "])),
+    t.pickerBg,
+    t.pickerShadow,
+
+
+
+
+    t.pickerBorderRadius);
+
+  },
+  todayLinkWrapper: function todayLinkWrapper(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\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);
+
+
   } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["DatePicker.styles.ts"],"names":["styles","root","css"],"mappings":"4QAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;;;;AAMD,GARgC,EAAb,CAAf,C","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"]}
+{"version":3,"sources":["DatePicker.styles.ts"],"names":["styles","root","css","calendarWrapper","t","pickerBg","pickerShadow","pickerBorderRadius","todayLinkWrapper","pickerTodayWrapperBgColor","pickerTodayWrapperBorderTop","linkColor","pickerTodayWrapperFontSize","pickerTodayWrapperPaddingBottom","pickerTodayWrapperPaddingTop","pickerTodayWrapperLineHeight","pickerTodayWrapperHoverBgColor","linkActiveColor"],"mappings":";AACA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;;;;AAMD,GARgC;AASjCC,EAAAA,eATiC,2BASjBC,CATiB,EASP;AACxB,eAAOF,YAAP;AACgBE,IAAAA,CAAC,CAACC,QADlB;AAEgBD,IAAAA,CAAC,CAACE,YAFlB;;;;;AAOmBF,IAAAA,CAAC,CAACG,kBAPrB;;AASD,GAnBgC;AAoBjCC,EAAAA,gBApBiC,4BAoBhBJ,CApBgB,EAoBN;AACzB,eAAOF,YAAP;AACsBE,IAAAA,CAAC,CAACK,yBADxB;;AAGgBL,IAAAA,CAAC,CAACM,2BAHlB;AAIWN,IAAAA,CAAC,CAACO,SAJb;;AAMeP,IAAAA,CAAC,CAACQ,0BANjB;AAOoBR,IAAAA,CAAC,CAACS,+BAPtB;AAQiBT,IAAAA,CAAC,CAACU,4BARnB;AASiBV,IAAAA,CAAC,CAACW,4BATnB;;;;AAawBX,IAAAA,CAAC,CAACY,8BAb1B;;;;;AAkBaZ,IAAAA,CAAC,CAACa,eAlBf;;;AAqBD,GA1CgC,EAAb,CAAf,C","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { 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  calendarWrapper(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      border-radius: ${t.pickerBorderRadius};\n    `;\n  },\n  todayLinkWrapper(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/cjs/components/DatePicker/DatePickerHelpers.d.ts

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

package/cjs/components/DatePicker/DatePickerHelpers.js

@@ -1,6 +1,7 @@
 "use strict";exports.__esModule = true;exports.formatDate = formatDate;
+var _CalendarUtils = require("../Calendar/CalendarUtils");
 
 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];
+  var _map = [date, (0, _CalendarUtils.getMonthInHumanFormat)(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/DatePicker/DatePickerHelpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DatePickerHelpers.tsx"],"names":["formatDate","date","month","year","map","x","toString","d","m","y","padStart"],"mappings":";;AAEO,SAASA,UAAT,OAAsE,KAAhDC,IAAgD,QAAhDA,IAAgD,CAA1CC,KAA0C,QAA1CA,KAA0C,CAAnCC,IAAmC,QAAnCA,IAAmC;AAC3E,aAAkB,CAACF,IAAD,EAAOC,KAAK,GAAG,CAAf,EAAkBC,IAAlB,EAAwBC,GAAxB,CAA4B,UAACC,CAAD,UAAOA,CAAC,CAACC,QAAF,EAAP,EAA5B,CAAlB,CAAOC,CAAP,WAAUC,CAAV,WAAaC,CAAb;AACA,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"]}
+{"version":3,"sources":["DatePickerHelpers.tsx"],"names":["formatDate","date","month","year","map","x","toString","d","m","y","padStart"],"mappings":";AACA;;AAEO,SAASA,UAAT,OAAsE,KAAhDC,IAAgD,QAAhDA,IAAgD,CAA1CC,KAA0C,QAA1CA,KAA0C,CAAnCC,IAAmC,QAAnCA,IAAmC;AAC3E,aAAkB,CAACF,IAAD,EAAO,0CAAsBC,KAAtB,CAAP,EAAqCC,IAArC,EAA2CC,GAA3C,CAA+C,UAACC,CAAD,UAAOA,CAAC,CAACC,QAAF,EAAP,EAA/C,CAAlB,CAAOC,CAAP,WAAUC,CAAV,WAAaC,CAAb;AACA,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 '../../components/Calendar/CalendarDateShape';\nimport { getMonthInHumanFormat } from '../Calendar/CalendarUtils';\n\nexport function formatDate({ date, month, year }: CalendarDateShape): string {\n  const [d, m, y] = [date, getMonthInHumanFormat(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/DatePicker/MobilePicker.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DatePickerProps } from './DatePicker';
+export declare const MobilePickerDataTids: {
+    readonly input: "MobilePicker__input";
+    readonly today: "MobilePicker__today";
+};
+export interface MobilePickerProps extends Pick<DatePickerProps, 'error' | 'warning' | 'value' | 'minDate' | 'maxDate' | 'onValueChange' | 'isHoliday' | 'enableTodayLink' | 'renderDay' | 'onMonthChange'> {
+    onCloseRequest?: () => void;
+}
+export declare const MobilePicker: React.FC<MobilePickerProps>;

package/cjs/components/DatePicker/MobilePicker.js

@@ -0,0 +1,118 @@
+"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.MobilePickerDataTids = exports.MobilePicker = void 0;var _react = _interopRequireWildcard(require("react"));
+
+var _Calendar = require("../Calendar");
+var CalendarUtils = _interopRequireWildcard(require("../Calendar/CalendarUtils"));
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _MobilePopup = require("../../internal/MobilePopup");
+var _DateInput = require("../DateInput");
+var _Button = require("../Button");
+var _useLocaleForControl = require("../../lib/locale/useLocaleForControl");
+var _useEffectWithoutInitCall = require("../../hooks/useEffectWithoutInitCall");
+
+
+var _locale = require("./locale");
+var _MobilePicker = require("./MobilePicker.styles");
+var _getMobilePickerTheme = require("./getMobilePickerTheme");
+
+var MobilePickerDataTids = {
+  input: 'MobilePicker__input',
+  today: 'MobilePicker__today' };exports.MobilePickerDataTids = MobilePickerDataTids;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var MobilePicker = function MobilePicker(props) {
+  var locale = (0, _useLocaleForControl.useLocaleForControl)('DatePicker', _locale.DatePickerLocaleHelper);
+
+  var theme = (0, _getMobilePickerTheme.getMobilePickerTheme)((0, _react.useContext)(_ThemeContext.ThemeContext));
+
+  var onValueChange = function onValueChange(date) {
+    if (props.onValueChange) {
+      props.onValueChange(date);
+    }
+    if (props.onCloseRequest) {
+      props.onCloseRequest();
+    }
+  };
+
+  var inputRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  var calendarRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(function () {return CalendarUtils.getTodayDate();}),today = _useState[0];
+  var onTodayClick = function onTodayClick() {
+    if (calendarRef.current) {
+      calendarRef.current.scrollToMonth(today.month, today.year);
+    }
+  };
+
+  (0, _useEffectWithoutInitCall.useEffectWithoutInitCall)(function () {
+    if (props.value && calendarRef.current) {
+      var month = +props.value.substring(3, 5);
+      var year = +props.value.substring(6);
+      calendarRef.current.scrollToMonth(month, year);
+    }
+  }, [props.value]);
+
+  return /*#__PURE__*/(
+    _react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: theme }, /*#__PURE__*/
+    _react.default.createElement(_MobilePopup.MobilePopup, {
+      opened: true,
+      headerChildComponent: /*#__PURE__*/
+      _react.default.createElement(_DateInput.DateInput, {
+        value: props.value || '',
+        width: "100%",
+        withIcon: true,
+        ref: inputRef,
+        minDate: props.minDate,
+        maxDate: props.maxDate,
+        onValueChange: props.onValueChange,
+        size: "medium",
+        warning: props.warning,
+        error: props.error,
+        "data-tid": MobilePickerDataTids.input }),
+
+
+      footerChildComponent:
+      props.enableTodayLink && /*#__PURE__*/
+      _react.default.createElement(_Button.Button, { size: "medium", onClick: onTodayClick, "data-tid": MobilePickerDataTids.today },
+      locale.today),
+
+
+
+      onCloseRequest: props.onCloseRequest }, /*#__PURE__*/
+
+    _react.default.createElement(_Calendar.Calendar, {
+      ref: calendarRef,
+      value: props.value,
+      className: _MobilePicker.styles.calendarRoot(),
+      minDate: props.minDate,
+      maxDate: props.maxDate,
+      onValueChange: onValueChange,
+      isHoliday: props.isHoliday,
+      renderDay: props.renderDay,
+      onMonthChange: props.onMonthChange }))));
+
+
+
+
+};exports.MobilePicker = MobilePicker;

package/cjs/components/DatePicker/MobilePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MobilePicker.tsx"],"names":["MobilePickerDataTids","input","today","MobilePicker","props","locale","DatePickerLocaleHelper","theme","ThemeContext","onValueChange","date","onCloseRequest","inputRef","current","focus","calendarRef","CalendarUtils","getTodayDate","onTodayClick","scrollToMonth","month","year","value","substring","minDate","maxDate","warning","error","enableTodayLink","styles","calendarRoot","isHoliday","renderDay","onMonthChange"],"mappings":"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","sourcesContent":["import React, { useContext, useLayoutEffect, useRef, useState } from 'react';\n\nimport { Calendar } from '../Calendar';\nimport * as CalendarUtils from '../Calendar/CalendarUtils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { MobilePopup } from '../../internal/MobilePopup';\nimport { DateInput } from '../DateInput';\nimport { Button } from '../Button';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\nimport { useEffectWithoutInitCall } from '../../hooks/useEffectWithoutInitCall';\n\nimport { DatePickerProps } from './DatePicker';\nimport { DatePickerLocaleHelper } from './locale';\nimport { styles } from './MobilePicker.styles';\nimport { getMobilePickerTheme } from './getMobilePickerTheme';\n\nexport const MobilePickerDataTids = {\n  input: 'MobilePicker__input',\n  today: 'MobilePicker__today',\n} as const;\n\nexport interface MobilePickerProps\n  extends Pick<\n    DatePickerProps,\n    | 'error'\n    | 'warning'\n    | 'value'\n    | 'minDate'\n    | 'maxDate'\n    | 'onValueChange'\n    | 'isHoliday'\n    | 'enableTodayLink'\n    | 'renderDay'\n    | 'onMonthChange'\n  > {\n  onCloseRequest?: () => void;\n}\n\nexport const MobilePicker: React.FC<MobilePickerProps> = (props) => {\n  const locale = useLocaleForControl('DatePicker', DatePickerLocaleHelper);\n\n  const theme = getMobilePickerTheme(useContext(ThemeContext));\n\n  const onValueChange = (date: string) => {\n    if (props.onValueChange) {\n      props.onValueChange(date);\n    }\n    if (props.onCloseRequest) {\n      props.onCloseRequest();\n    }\n  };\n\n  const inputRef = useRef<DateInput>(null);\n  useLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.focus();\n    }\n  }, []);\n\n  const calendarRef = useRef<Calendar>(null);\n  const [today] = useState(() => CalendarUtils.getTodayDate());\n  const onTodayClick = () => {\n    if (calendarRef.current) {\n      calendarRef.current.scrollToMonth(today.month, today.year);\n    }\n  };\n\n  useEffectWithoutInitCall(() => {\n    if (props.value && calendarRef.current) {\n      const month = +props.value.substring(3, 5);\n      const year = +props.value.substring(6);\n      calendarRef.current.scrollToMonth(month, year);\n    }\n  }, [props.value]);\n\n  return (\n    <ThemeContext.Provider value={theme}>\n      <MobilePopup\n        opened\n        headerChildComponent={\n          <DateInput\n            value={props.value || ''}\n            width=\"100%\"\n            withIcon\n            ref={inputRef}\n            minDate={props.minDate}\n            maxDate={props.maxDate}\n            onValueChange={props.onValueChange}\n            size=\"medium\"\n            warning={props.warning}\n            error={props.error}\n            data-tid={MobilePickerDataTids.input}\n          />\n        }\n        footerChildComponent={\n          props.enableTodayLink && (\n            <Button size=\"medium\" onClick={onTodayClick} data-tid={MobilePickerDataTids.today}>\n              {locale.today}\n            </Button>\n          )\n        }\n        onCloseRequest={props.onCloseRequest}\n      >\n        <Calendar\n          ref={calendarRef}\n          value={props.value}\n          className={styles.calendarRoot()}\n          minDate={props.minDate}\n          maxDate={props.maxDate}\n          onValueChange={onValueChange}\n          isHoliday={props.isHoliday}\n          renderDay={props.renderDay}\n          onMonthChange={props.onMonthChange}\n        />\n      </MobilePopup>\n    </ThemeContext.Provider>\n  );\n};\n"]}

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

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

package/cjs/components/DatePicker/MobilePicker.styles.js

@@ -0,0 +1,8 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
+
+var styles = (0, _Emotion.memoizeStyle)({
+  calendarRoot: function calendarRoot() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: auto;\n    "])));
+
+
+  } });exports.styles = styles;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["MobilePicker.styles.ts"],"names":["styles","calendarRoot","css"],"mappings":"oRAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,YADiC,0BAClB;AACb,eAAOC,YAAP;;;AAGD,GALgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  calendarRoot() {\n    return css`\n      width: auto;\n    `;\n  },\n});\n"]}

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { CalendarDateShape } from '../../internal/Calendar';
 import { Nullable } from '../../typings/utility-types';
-interface Props {
+import { CalendarDateShape } from '../Calendar/CalendarDateShape';
+interface PickerProps {
     maxDate?: CalendarDateShape;
     minDate?: CalendarDateShape;
     value: Nullable<CalendarDateShape>;
@@ -12,22 +12,22 @@ interface Props {
         isWeekend: boolean;
     }) => boolean;
 }
-interface State {
-    date: CalendarDateShape;
+interface PickerState {
     today: CalendarDateShape;
 }
-export declare class Picker extends React.Component<Props, State> {
+export declare class Picker extends React.Component<PickerProps, PickerState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     private theme;
     private calendar;
     private readonly locale;
-    constructor(props: Props);
-    componentDidUpdate(prevProps: Props): void;
+    constructor(props: PickerProps);
     render(): JSX.Element;
+    private isHoliday;
+    private onValueChange;
     private renderMain;
-    private scrollToMonth;
+    private getDateFromShape;
     private renderTodayLink;
     private handleSelectToday;
-    private getInitialDate;
 }
 export {};

package/cjs/components/DatePicker/Picker.js

@@ -1,19 +1,25 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Picker = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _shallowequal = _interopRequireDefault(require("shallowequal"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.Picker = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _warning = _interopRequireDefault(require("warning"));
 
-var _InternalDate = require("../../lib/date/InternalDate");
+var _InternalDateTransformer = require("../../lib/date/InternalDateTransformer");
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+
+var _Emotion = require("../../lib/theming/Emotion");
 var _InternalDateGetter = require("../../lib/date/InternalDateGetter");
-var _Calendar = require("../../internal/Calendar");
+var _InternalDate = require("../../lib/date/InternalDate");
 var _decorators = require("../../lib/locale/decorators");
+var _Calendar = require("../Calendar");
 
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _CalendarUtils = require("../Calendar/CalendarUtils");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _Button = require("../Button");
+var _ArrowAUp16Light = require("../../internal/icons2022/ArrowAUpIcon/ArrowAUp16Light");
 
-var _Picker = require("./Picker.styles");
-var _locale = require("./locale");var _dec, _class, _class2, _temp;
-
-
-
+var _DatePicker = require("./DatePicker.styles");
+var _DatePicker2 = require("./DatePicker");
+var _locale = require("./locale");var _dec, _class, _class2, _temp;var
 
 
 
@@ -27,14 +33,7 @@ var _locale = require("./locale");var _dec, _class, _class2, _temp;
 
 
 
-var getTodayCalendarDate = function getTodayCalendarDate() {
-  var d = new Date();
-  return {
-    date: d.getDate(),
-    month: d.getMonth(),
-    year: d.getFullYear() };
 
-};var
 
 
 Picker = (_dec = (0, _decorators.locale)('DatePicker', _locale.DatePickerLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Picker, _React$Component);
@@ -44,6 +43,7 @@ Picker = (_dec = (0, _decorators.locale)('DatePicker', _locale.DatePickerLocaleH
 
 
 
+
   function Picker(props) {var _this;
     _this = _React$Component.call(this, props) || this;_this.calendar = null;_this.
 
@@ -71,7 +71,17 @@ Picker = (_dec = (0, _decorators.locale)('DatePicker', _locale.DatePickerLocaleH
 
 
 
+    isHoliday = function (day, isWeekend) {
+      var dateShape = new _InternalDate.InternalDate().parseValue(day).getComponentsLikeNumber();
+
+      return !!(_this.props.isHoliday != null && _this.props.isHoliday((0, _extends2.default)({}, dateShape, { isWeekend: isWeekend })));
+    };_this.
 
+    onValueChange = function (date) {
+      var dateShape = new _InternalDate.InternalDate().parseValue(date).getComponentsLikeNumber();
+
+      return _this.props.onPick(dateShape);
+    };_this.
 
 
 
@@ -91,10 +101,14 @@ Picker = (_dec = (0, _decorators.locale)('DatePicker', _locale.DatePickerLocaleH
 
 
 
-    scrollToMonth = function (month, year) {
-      if (_this.calendar) {
-        _this.calendar.scrollToMonth(month, year);
+
+
+    getDateFromShape = function (dateShape) {
+      if (!dateShape) {
+        return undefined;
       }
+
+      return _InternalDateTransformer.InternalDateTransformer.dateToInternalString(dateShape);
     };_this.
 
 
@@ -111,29 +125,35 @@ Picker = (_dec = (0, _decorators.locale)('DatePicker', _locale.DatePickerLocaleH
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
     handleSelectToday = function (today) {return function () {
         if (_this.props.onSelect) {
-          _this.props.onSelect(today.toNativeFormat());
+          var todayInNativeFormat = new _InternalDate.InternalDate().parseValue(today).toNativeFormat();
+          _this.props.onSelect(todayInNativeFormat);
         }
+
         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 && (0, _Calendar.isLess)(today, _this.props.minDate)) {
-        return _this.props.minDate;
-      }
-
-      if (_this.props.maxDate && (0, _Calendar.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 && !(0, _shallowequal.default)(value, prevProps.value)) {this.scrollToMonth(value.month, value.year);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.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.default.createElement("div", { className: _Picker.styles.root(this.theme), onMouseDown: function onMouseDown(e) {return e.preventDefault();} }, /*#__PURE__*/_react.default.createElement(_Calendar.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.InternalDate({ order: order, separator: separator }).setComponents(_InternalDateGetter.InternalDateGetter.getTodayComponents());return /*#__PURE__*/_react.default.createElement("button", { "data-tid": "Picker__todayWrapper", className: _Picker.styles.todayWrapper(this.theme), onClick: this.handleSelectToday(today), tabIndex: -1 }, this.locale.today + " " + today.toString({ withPad: true, withSeparator: true }));};return Picker;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Picker', _temp)) || _class);exports.Picker = Picker;
+      };};_this.state = { today: (0, _CalendarUtils.getTodayDate)() };(0, _warning.default)(false, "<Picker /> has been deprecated. It will be removed in the next major version of the library. If you wish to have a similar component make use of public component <Calendar />.");return _this;}var _proto = Picker.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ calendarBottomSeparatorBorder: 'none' }, theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _this3 = this;return /*#__PURE__*/_react.default.createElement("div", { "data-tid": _DatePicker2.DatePickerDataTids.pickerRoot, className: _DatePicker.styles.calendarWrapper(this.theme), onMouseDown: function onMouseDown(e) {return e.preventDefault();} }, /*#__PURE__*/_react.default.createElement(_Calendar.Calendar, { ref: function ref(c) {return _this3.calendar = c;}, maxDate: this.getDateFromShape(this.props.maxDate), minDate: this.getDateFromShape(this.props.minDate), onValueChange: this.onValueChange, isHoliday: this.isHoliday, value: this.getDateFromShape(this.props.value) }), this.props.enableTodayLink && this.renderTodayLink(), ' ');};_proto.renderTodayLink = function renderTodayLink() {var _cx;var _this$locale = this.locale,order = _this$locale.order,separator = _this$locale.separator;var today = new _InternalDate.InternalDate({ order: order, separator: separator }).setComponents(_InternalDateGetter.InternalDateGetter.getTodayComponents()).toString({ withPad: true, withSeparator: true });if ((0, _ThemeHelpers.isTheme2022)(this.theme)) {return /*#__PURE__*/_react.default.createElement("div", { style: { margin: 8 } }, /*#__PURE__*/_react.default.createElement(_Button.Button, { "data-tid": _DatePicker2.DatePickerDataTids.pickerTodayWrapper, width: "100%", onClick: this.handleSelectToday(today), icon: /*#__PURE__*/_react.default.createElement(_ArrowAUp16Light.ArrowAUpIcon16Light, null) }, this.locale.today));}return /*#__PURE__*/_react.default.createElement("button", { "data-tid": _DatePicker2.DatePickerDataTids.pickerTodayWrapper, className: (0, _Emotion.cx)((_cx = {}, _cx[_DatePicker.styles.todayLinkWrapper(this.theme)] = true, _cx)), onClick: this.handleSelectToday(today), tabIndex: -1 }, this.locale.today + " " + today);};return Picker;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Picker', _class2.displayName = 'Picker', _temp)) || _class);exports.Picker = Picker;

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

@@ -1 +1 @@
-{"version":3,"sources":["Picker.tsx"],"names":["getTodayCalendarDate","d","Date","date","getDate","month","getMonth","year","getFullYear","Picker","DatePickerLocaleHelper","props","calendar","scrollToMonth","handleSelectToday","today","onSelect","toNativeFormat","state","getInitialDate","value","minDate","maxDate","componentDidUpdate","prevProps","render","theme","renderMain","styles","root","e","preventDefault","c","onPick","isHoliday","enableTodayLink","renderTodayLink","locale","order","separator","InternalDate","setComponents","InternalDateGetter","getTodayComponents","todayWrapper","toString","withPad","withSeparator","React","Component","__KONTUR_REACT_UI__"],"mappings":"kPAAA;AACA;;AAEA;AACA;AACA;AACA;;;AAGA;;AAEA;AACA,kC;;;;;;;;;;;;;;;;;AAiBA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,GAAM;AACjC,MAAMC,CAAC,GAAG,IAAIC,IAAJ,EAAV;AACA,SAAO;AACLC,IAAAA,IAAI,EAAEF,CAAC,CAACG,OAAF,EADD;AAELC,IAAAA,KAAK,EAAEJ,CAAC,CAACK,QAAF,EAFF;AAGLC,IAAAA,IAAI,EAAEN,CAAC,CAACO,WAAF,EAHD,EAAP;;AAKD,CAPD,C;;;AAUaC,M,WADZ,wBAAO,YAAP,EAAqBC,8BAArB,C;;;;;;;AAQC,kBAAYC,KAAZ,EAA0B;AACxB,wCAAMA,KAAN,UADwB,MAHlBC,QAGkB,GAHU,IAGV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+ClBC,IAAAA,aA/CkB,GA+CF,UAACR,KAAD,EAAgBE,IAAhB,EAAiC;AACvD,UAAI,MAAKK,QAAT,EAAmB;AACjB,cAAKA,QAAL,CAAcC,aAAd,CAA4BR,KAA5B,EAAmCE,IAAnC;AACD;AACF,KAnDyB;;;;;;;;;;;;;;;;;AAoElBO,IAAAA,iBApEkB,GAoEE,UAACC,KAAD,UAAyB,YAAM;AACzD,YAAI,MAAKJ,KAAL,CAAWK,QAAf,EAAyB;AACvB,gBAAKL,KAAL,CAAWK,QAAX,CAAoBD,KAAK,CAACE,cAAN,EAApB;AACD;AACD,YAAI,MAAKL,QAAT,EAAmB;AACjB,kCAAwB,MAAKM,KAAL,CAAWH,KAAnC,CAAQV,KAAR,qBAAQA,KAAR,CAAeE,IAAf,qBAAeA,IAAf;AACA,gBAAKK,QAAL,CAAcC,aAAd,CAA4BR,KAA5B,EAAmCE,IAAnC;AACD;AACF,OAR2B,EApEF;;AA8ElBY,IAAAA,cA9EkB,GA8ED,UAACJ,KAAD,EAA8B;AACrD,UAAI,MAAKJ,KAAL,CAAWS,KAAf,EAAsB;AACpB,eAAO,MAAKT,KAAL,CAAWS,KAAlB;AACD;;AAED,UAAI,MAAKT,KAAL,CAAWU,OAAX,IAAsB,sBAAON,KAAP,EAAc,MAAKJ,KAAL,CAAWU,OAAzB,CAA1B,EAA6D;AAC3D,eAAO,MAAKV,KAAL,CAAWU,OAAlB;AACD;;AAED,UAAI,MAAKV,KAAL,CAAWW,OAAX,IAAsB,yBAAUP,KAAV,EAAiB,MAAKJ,KAAL,CAAWW,OAA5B,CAA1B,EAAgE;AAC9D,eAAO,MAAKX,KAAL,CAAWW,OAAlB;AACD;;AAED,aAAOP,KAAP;AACD,KA5FyB,CAExB,IAAMA,MAAK,GAAGf,oBAAoB,EAAlC,CACA,MAAKkB,KAAL,GAAa,EACXf,IAAI,EAAE,MAAKgB,cAAL,CAAoBJ,MAApB,CADK,EAEXA,KAAK,EAALA,MAFW,EAAb,CAHwB,aAOzB,C,qCAEMQ,kB,GAAP,4BAA0BC,SAA1B,EAA4C,CAC1C,IAAQJ,KAAR,GAAkB,KAAKT,KAAvB,CAAQS,KAAR,CACA,IAAIA,KAAK,IAAI,CAAC,2BAAaA,KAAb,EAAoBI,SAAS,CAACJ,KAA9B,CAAd,EAAoD,CAClD,KAAKP,aAAL,CAAmBO,KAAK,CAACf,KAAzB,EAAgCe,KAAK,CAACb,IAAtC,EACD,CACF,C,QAEMkB,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEOA,U,GAAR,sBAAqB,mBACnB,IAAQxB,IAAR,GAAiB,KAAKe,KAAtB,CAAQf,IAAR,CAEA,oBACE,sCAAK,SAAS,EAAEyB,eAAOC,IAAP,CAAY,KAAKH,KAAjB,CAAhB,EAAyC,WAAW,EAAE,qBAACI,CAAD,UAAOA,CAAC,CAACC,cAAF,EAAP,EAAtD,iBACE,6BAAC,kBAAD,IACE,GAAG,EAAE,aAACC,CAAD,UAAQ,MAAI,CAACpB,QAAL,GAAgBoB,CAAxB,EADP,EAEE,KAAK,EAAE,KAAKrB,KAAL,CAAWS,KAFpB,EAGE,YAAY,EAAEjB,IAAI,CAACE,KAHrB,EAIE,WAAW,EAAEF,IAAI,CAACI,IAJpB,EAKE,QAAQ,EAAE,KAAKI,KAAL,CAAWsB,MALvB,EAME,OAAO,EAAE,KAAKtB,KAAL,CAAWU,OANtB,EAOE,OAAO,EAAE,KAAKV,KAAL,CAAWW,OAPtB,EAQE,SAAS,EAAE,KAAKX,KAAL,CAAWuB,SARxB,GADF,EAWG,KAAKvB,KAAL,CAAWwB,eAAX,IAA8B,KAAKC,eAAL,EAXjC,EAWyD,GAXzD,CADF,CAeD,C,QAQOA,e,GAAR,2BAA0B,CACxB,mBAA6B,KAAKC,MAAlC,CAAQC,KAAR,gBAAQA,KAAR,CAAeC,SAAf,gBAAeA,SAAf,CACA,IAAMxB,KAAK,GAAG,IAAIyB,0BAAJ,CAAiB,EAAEF,KAAK,EAALA,KAAF,EAASC,SAAS,EAATA,SAAT,EAAjB,EAAuCE,aAAvC,CAAqDC,uCAAmBC,kBAAnB,EAArD,CAAd,CACA,oBACE,yCACE,YAAS,sBADX,EAEE,SAAS,EAAEf,eAAOgB,YAAP,CAAoB,KAAKlB,KAAzB,CAFb,EAGE,OAAO,EAAE,KAAKZ,iBAAL,CAAuBC,KAAvB,CAHX,EAIE,QAAQ,EAAE,CAAC,CAJb,IAMM,KAAKsB,MAAL,CAAYtB,KANlB,SAM2BA,KAAK,CAAC8B,QAAN,CAAe,EAAEC,OAAO,EAAE,IAAX,EAAiBC,aAAa,EAAE,IAAhC,EAAf,CAN3B,CADF,CAUD,C,iBAzEyBC,eAAMC,S,WAClBC,mB,GAAsB,Q","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"]}
+{"version":3,"sources":["Picker.tsx"],"names":["Picker","DatePickerLocaleHelper","props","calendar","isHoliday","day","isWeekend","dateShape","InternalDate","parseValue","getComponentsLikeNumber","onValueChange","date","onPick","getDateFromShape","undefined","InternalDateTransformer","dateToInternalString","handleSelectToday","today","onSelect","todayInNativeFormat","toNativeFormat","state","month","year","scrollToMonth","render","theme","ThemeFactory","create","calendarBottomSeparatorBorder","renderMain","DatePickerDataTids","pickerRoot","styles","calendarWrapper","e","preventDefault","c","maxDate","minDate","value","enableTodayLink","renderTodayLink","locale","order","separator","setComponents","InternalDateGetter","getTodayComponents","toString","withPad","withSeparator","margin","pickerTodayWrapper","todayLinkWrapper","React","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport warning from 'warning';\n\nimport { InternalDateTransformer } from '../../lib/date/InternalDateTransformer';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Nullable } from '../../typings/utility-types';\nimport { cx } from '../../lib/theming/Emotion';\nimport { InternalDateGetter } from '../../lib/date/InternalDateGetter';\nimport { InternalDate } from '../../lib/date/InternalDate';\nimport { locale } from '../../lib/locale/decorators';\nimport { Calendar } from '../Calendar';\nimport { CalendarDateShape } from '../Calendar/CalendarDateShape';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { getTodayDate } from '../Calendar/CalendarUtils';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { Button } from '../Button';\nimport { ArrowAUpIcon16Light } from '../../internal/icons2022/ArrowAUpIcon/ArrowAUp16Light';\n\nimport { styles } from './DatePicker.styles';\nimport { DatePickerDataTids } from './DatePicker';\nimport { DatePickerLocale, DatePickerLocaleHelper } from './locale';\n\ninterface PickerProps {\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 PickerState {\n  today: CalendarDateShape;\n}\n\n@locale('DatePicker', DatePickerLocaleHelper)\nexport class Picker extends React.Component<PickerProps, PickerState> {\n  public static __KONTUR_REACT_UI__ = 'Picker';\n  public static displayName = 'Picker';\n\n  private theme!: Theme;\n  private calendar: Calendar | null = null;\n  private readonly locale!: DatePickerLocale;\n\n  constructor(props: PickerProps) {\n    super(props);\n    this.state = {\n      today: getTodayDate(),\n    };\n    warning(\n      false,\n      `<Picker /> has been deprecated. It will be removed in the next major version of the library. If you wish to have a similar component make use of public component <Calendar />.`,\n    );\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n\n          return (\n            <ThemeContext.Provider value={ThemeFactory.create({ calendarBottomSeparatorBorder: 'none' }, theme)}>\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private isHoliday = (day: string, isWeekend: boolean) => {\n    const dateShape = new InternalDate().parseValue(day).getComponentsLikeNumber();\n\n    return !!this.props.isHoliday?.({ ...dateShape, isWeekend });\n  };\n\n  private onValueChange = (date: string) => {\n    const dateShape = new InternalDate().parseValue(date).getComponentsLikeNumber();\n\n    return this.props.onPick(dateShape);\n  };\n\n  private renderMain() {\n    return (\n      <div\n        data-tid={DatePickerDataTids.pickerRoot}\n        className={styles.calendarWrapper(this.theme)}\n        onMouseDown={(e) => e.preventDefault()}\n      >\n        <Calendar\n          ref={(c) => (this.calendar = c)}\n          maxDate={this.getDateFromShape(this.props.maxDate)}\n          minDate={this.getDateFromShape(this.props.minDate)}\n          onValueChange={this.onValueChange}\n          isHoliday={this.isHoliday}\n          value={this.getDateFromShape(this.props.value)}\n        />\n        {this.props.enableTodayLink && this.renderTodayLink()}{' '}\n      </div>\n    );\n  }\n\n  private getDateFromShape = (dateShape: CalendarDateShape | undefined | null) => {\n    if (!dateShape) {\n      return undefined;\n    }\n\n    return InternalDateTransformer.dateToInternalString(dateShape);\n  };\n\n  private renderTodayLink() {\n    const { order, separator } = this.locale;\n    const today = new InternalDate({ order, separator })\n      .setComponents(InternalDateGetter.getTodayComponents())\n      .toString({ withPad: true, withSeparator: true });\n\n    if (isTheme2022(this.theme)) {\n      return (\n        <div style={{ margin: 8 }}>\n          <Button\n            data-tid={DatePickerDataTids.pickerTodayWrapper}\n            width=\"100%\"\n            onClick={this.handleSelectToday(today)}\n            icon={<ArrowAUpIcon16Light />}\n          >\n            {this.locale.today}\n          </Button>\n        </div>\n      );\n    }\n\n    return (\n      <button\n        data-tid={DatePickerDataTids.pickerTodayWrapper}\n        className={cx({\n          [styles.todayLinkWrapper(this.theme)]: true,\n        })}\n        onClick={this.handleSelectToday(today)}\n        tabIndex={-1}\n      >\n        {`${this.locale.today} ${today}`}\n      </button>\n    );\n  }\n\n  private handleSelectToday = (today: string) => () => {\n    if (this.props.onSelect) {\n      const todayInNativeFormat = new InternalDate().parseValue(today).toNativeFormat() as CalendarDateShape;\n      this.props.onSelect(todayInNativeFormat);\n    }\n\n    if (this.calendar) {\n      const { month, year } = this.state.today;\n      this.calendar.scrollToMonth(month, year);\n    }\n  };\n}\n"]}

package/cjs/components/DatePicker/getMobilePickerTheme.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const getMobilePickerTheme: (theme: Theme) => Theme;

package/cjs/components/DatePicker/getMobilePickerTheme.js

@@ -0,0 +1,19 @@
+"use strict";exports.__esModule = true;exports.getMobilePickerTheme = void 0;var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+
+
+var getMobilePickerTheme = function getMobilePickerTheme(theme) {
+  return _ThemeFactory.ThemeFactory.create(
+  {
+    calendarPaddingX: theme.mobileCalendarPaddingX,
+    calendarCellWidth: theme.mobileCalendarCellWidth,
+    calendarCellHeight: theme.mobileCalendarCellHeight,
+    calendarCellBorderRadius: theme.mobileCalendarCellBorderRadius,
+    calendarCellFontSize: theme.mobileCalendarCellFontSize,
+    calendarGridRowSpacing: theme.mobileCalendarGridRowSpacing,
+    dateSelectFontSize: theme.mobileDateSelectFontSize,
+    dateSelectLineHeight: theme.mobileDateSelectLineHeight,
+    calendarWrapperHeight: theme.mobileCalendarWrapperHeight },
+
+  theme);
+
+};exports.getMobilePickerTheme = getMobilePickerTheme;