@skbkontur/react-ui 0.0.0-30619a873c → 0.0.0-32550fb571

package/cjs/components/DateRangePicker/DateRangePicker.md

@@ -1,298 +0,0 @@
-Компонент `DateRangePicker` состоит из двух [DateInput](#/Components/DateInput) и одного общего [Calendar](#/Components/Calendar).
-
-- Период задается через `from` и `to`
-- Минимальное и максимальные даты указываются через `minDate` и `maxDate`
-- Значения задаются строкой в формате `dd.mm.yyyy`
-- Пустыми значениями считаются `""`, `null` и `undefined`
-
-```jsx harmony
-const [fromValue, setFromValue] = React.useState();
-const [toValue, setToValue] = React.useState();
-const minDate = "08.07.2024";
-const maxDate = "18.08.2024";
-
-<DateRangePicker
-  from={fromValue}
-  to={toValue}
-  minDate={minDate}
-  maxDate={maxDate}
-  onValueChange={console.log}
-  onFromValueChange={setFromValue}
-  onToValueChange={setToValue}
-/>
-```
-
-<br />
-
-## Внешний вид
-
-Внешний вид кастомизируется через [дизайн-токены](#/Customization/ThemeShowcase) `dateInput*` и `calendar*`.
-
-
-### Размеры
-
-Через параметр `size` доступны размеры `large`, `medium` и `small`.
-
-```jsx harmony
-import { Gapped, ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
-
-const theme = React.useContext(ThemeContext);
-const createTheme = (tokens) => ThemeFactory.create(tokens, theme);
-
-<Gapped vertical gap={16}>
-  <ThemeContext.Provider value={createTheme({ calendarCellWidth: '44px', calendarCellHeight: '44px' })}>
-    <DateRangePicker size="large" />
-  </ThemeContext.Provider>
-  
-  <ThemeContext.Provider value={createTheme({ calendarCellWidth: '36px', calendarCellHeight: '36px' })}>
-    <DateRangePicker size="medium" />
-  </ThemeContext.Provider>
-
-  <DateRangePicker size="small" />
-</Gapped>
-
-```
-
-### Адаптивность
-
-На мобильных устройствах доступны 2 варианта отображения:
-
-- Адаптивная версия в попапе (по умолчанию)
-- 2 нативных календаря через `useMobileNativeDatePicker`. Ограничение: [календарь в iOS не поддерживает параметры min и max](https://bugs.webkit.org/show_bug.cgi?id=225639)
-
-<br />
-<br />
-
-## Произвольная настройка полей
-
-Для более гибкой кастомизации каждого из полей доступны дочерние элементы:
-- `<DateRangePicker.From />` — поле «от», настройки как у [DateInput](#/Components/DateInput)
-- `<DateRangePicker.To />` — поле «до», настройки как у [DateInput](#/Components/DateInput)
-- `<DateRangePicker.Separator />` — разделитель
-
-<br />
-
-### Поля без тире
-
-```jsx harmony
-<DateRangePicker>
-  <DateRangePicker.From style={{ borderRadius: 0 }} />
-  <DateRangePicker.To style={{ marginLeft: -1, borderRadius: 0 }} />
-</DateRangePicker>
-```
-
-### Вертикальное расположение
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<DateRangePicker>
-    <Gapped gap={4} vertical>
-      <DateRangePicker.From />
-      <DateRangePicker.To />
-    </Gapped>
-</DateRangePicker>
-```
-
-
-### Открытые даты начала или конца
-
-Для полей достпен параметр `optional`, чтобы указывать поля открытыми.
-
-```jsx harmony
-import { Checkbox } from '@skbkontur/react-ui';
-
-<DateRangePicker>
-  <DateRangePicker.From optional />
-  <DateRangePicker.Separator />
-  <DateRangePicker.To optional />
-</DateRangePicker>
-```
-
-
-<!--
-TODO: ручное форатирование даты
--->
-
-<br />
-
-## Форматирование даты
-
-
-```jsx harmony
-import { DateInput, DateOrder, DateSeparator, Gapped, LocaleContext, Select } from '@skbkontur/react-ui';
-
-class DateInputFormatting 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={{
-          locale:{
-            DatePicker: {
-              separator: DateSeparator[this.state.separator],
-              order: this.state.order,
-            },
-          }}}
-        >
-          <DateRangePicker onValueChange={value => this.setState({ value })} from={this.state.value} />
-        </LocaleContext.Provider>
-      </Gapped>
-    );
-  }
-}
-
-<DateInputFormatting />;
-```
-
-<!--
-TODO: раздел валидации
--->
-
-<br />
-
-### Выбор дат с ценами
-
-Пример с кастомизацией темы и кастомным рендером дня 
-
-```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 [fromValue, setFromValue] = React.useState();
- const [toValue, setToValue] = React.useState();
- const minDate = "08.07.2024";
- const maxDate = "18.08.2024";
-
-<ThemeContext.Provider
-  value={ThemeFactory.create({
-    calendarCellWidth: '48px',
-    calendarCellHeight: '48px',
-    calendarCellLineHeight: '18px',
-    calendarWrapperHeight: '700px',
-    calendarCellBorderRadius: '10px'
-  }, theme)}
->
-  <DateRangePicker
-    from={fromValue}
-    to={toValue}
-    minDate={minDate}
-    maxDate={maxDate}
-    size="medium"
-    onValueChange={console.log}
-    onFromValueChange={setFromValue}
-    onToValueChange={setToValue}
-    renderDay={renderDay}
-  />
-</ThemeContext.Provider>
-```
-
-## Локали по умолчанию
-
-```typescript static
-interface DatePickerLocale {
-  today?: string;
-  months?: string[];
-  order?: DateOrder;
-  separator?: DateSeparator;
-  todayAriaLabel?: string
-  selectMonthAriaLabel?: string;
-  selectYearAriaLabel?: string;
-  selectChosenAriaLabel?: string;
-  dayCellChooseDateAriaLabel?: string;
-}
-
-const ru_RU = {
-  today: 'Сегодня',
-  months: [
-  'Январь',
-  'Февраль',
-  'Март',
-  'Апрель',
-  'Май',
-  'Июнь',
-  'Июль',
-  'Август',
-  'Сентябрь',
-  'Октябрь',
-  'Ноябрь',
-  'Декабрь',
-  ],
-  order: DateOrder.DMY,
-  separator: DateSeparator.Dot,
-  todayAriaLabel: 'Перейти к сегодняшней дате',
-  selectMonthAriaLabel: 'месяц',
-  selectYearAriaLabel: 'год',
-  selectChosenAriaLabel: 'Выбранный',
-  dayCellChooseDateAriaLabel: 'Выбрать дату',
-};
-
-const en_GB = {
-  today: 'Today',
-  months: [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-  ],
-  order: DateOrder.MDY,
-  separator: DateSeparator.Slash,
-  todayAriaLabel: "Go to today's date",
-  selectMonthAriaLabel: 'month',
-  selectYearAriaLabel: 'year',
-  selectChosenAriaLabel: 'Chosen',
-  dayCellChooseDateAriaLabel: 'Choose date',
-};
-```
-

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

@@ -1,9 +0,0 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
-    root(): string;
-    rootMobile(): string;
-    inputWrapper(): string;
-    inputVisuallyFocus(t: Theme): string;
-    inputWrapperWidth(t: Theme): string;
-    calendarWrapper(t: Theme): string;
-};

package/cjs/components/DateRangePicker/DateRangePicker.styles.js

@@ -1,42 +0,0 @@
-"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, _templateObject4, _templateObject5, _templateObject6;
-
-
-var styles = exports.styles = (0, _Emotion.memoizeStyle)({
-  root: function root() {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([""])));
-  },
-  rootMobile: function rootMobile() {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([""])));
-  },
-  inputWrapper: function inputWrapper() {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      align-items: center;\n\n      & > * {\n        flex: 1 1 50%;\n      }\n    "])));
-
-
-
-
-
-
-
-  },
-  inputVisuallyFocus: function inputVisuallyFocus(t) {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: none;\n      outline: ", " solid ", ";\n    "])),
-
-    t.inputOutlineWidth, t.inputFocusOutline);
-
-  },
-  inputWrapperWidth: function inputWrapperWidth(t) {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      min-width: ", "px;\n    "])),
-    parseInt(t.calendarCellWidth) * 7 + parseInt(t.calendarPaddingX) * 2);
-
-  },
-
-  calendarWrapper: function calendarWrapper(t) {
-    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: ", ";\n      display: inline-block;\n      font-size: 0;\n      z-index: 1000;\n      touch-action: none;\n    "])),
-    t.pickerShadow);
-
-
-
-
-
-  }
-});

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

@@ -1 +0,0 @@
-{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","styles","exports","memoizeStyle","root","css","_taggedTemplateLiteralLoose2","default","rootMobile","inputWrapper","inputVisuallyFocus","t","inputOutlineWidth","inputFocusOutline","inputWrapperWidth","parseInt","calendarCellWidth","calendarPaddingX","calendarWrapper","pickerShadow"],"sources":["DateRangePicker.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css``;\n  },\n  rootMobile() {\n    return css``;\n  },\n  inputWrapper() {\n    return css`\n      display: inline-flex;\n      align-items: center;\n\n      & > * {\n        flex: 1 1 50%;\n      }\n    `;\n  },\n  inputVisuallyFocus(t: Theme) {\n    return css`\n      box-shadow: none;\n      outline: ${t.inputOutlineWidth} solid ${t.inputFocusOutline};\n    `;\n  },\n  inputWrapperWidth(t: Theme) {\n    return css`\n      min-width: ${parseInt(t.calendarCellWidth) * 7 + parseInt(t.calendarPaddingX) * 2}px;\n    `;\n  },\n\n  calendarWrapper(t: Theme) {\n    return css`\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"],"mappings":"oRAAA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;;AAGvD,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,IAAI,WAAAA,KAAA,EAAG;IACL,WAAOC,YAAG,EAAAV,eAAA,KAAAA,eAAA,OAAAW,4BAAA,CAAAC,OAAA;EACZ,CAAC;EACDC,UAAU,WAAAA,WAAA,EAAG;IACX,WAAOH,YAAG,EAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;EACZ,CAAC;EACDE,YAAY,WAAAA,aAAA,EAAG;IACb,WAAOJ,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;;;;;;;;EAQZ,CAAC;EACDG,kBAAkB,WAAAA,mBAACC,CAAQ,EAAE;IAC3B,WAAON,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;;IAEGI,CAAC,CAACC,iBAAiB,EAAUD,CAAC,CAACE,iBAAiB;;EAE/D,CAAC;EACDC,iBAAiB,WAAAA,kBAACH,CAAQ,EAAE;IAC1B,WAAON,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;IACKQ,QAAQ,CAACJ,CAAC,CAACK,iBAAiB,CAAC,GAAG,CAAC,GAAGD,QAAQ,CAACJ,CAAC,CAACM,gBAAgB,CAAC,GAAG,CAAC;;EAErF,CAAC;;EAEDC,eAAe,WAAAA,gBAACP,CAAQ,EAAE;IACxB,WAAON,YAAG,EAAAL,gBAAA,KAAAA,gBAAA,OAAAM,4BAAA,CAAAC,OAAA;IACMI,CAAC,CAACQ,YAAY;;;;;;EAMhC;AACF,CAAC,CAAC","ignoreList":[]}

package/cjs/components/DateRangePicker/DateRangePickerContext.d.ts

@@ -1,28 +0,0 @@
-import React from 'react';
-import { SizeProp } from '../../lib/types/props';
-import { Calendar } from '../Calendar';
-export interface DateRangePickerContextProps {
-    from?: string;
-    to?: string;
-    minDate?: string;
-    maxDate?: string;
-    size?: SizeProp;
-    onValueChange?: (from: string, to: string) => void;
-    onFromValueChange?: (value: string) => void;
-    onToValueChange?: (value: string) => void;
-    periodStart?: string;
-    periodEnd?: string;
-    hoveredDay?: string | null;
-    showCalendar?: boolean;
-    currentFocus?: 'start' | 'end' | null;
-    setPeriodStart?: (value: string | null) => void;
-    setPeriodEnd?: (value: string | null) => void;
-    setHoveredDay?: (value: string | null) => void;
-    setShowCalendar?: (value: boolean) => void;
-    setCurrentFocus?: (value: 'start' | 'end' | null) => void;
-    isMobile?: boolean;
-    fromRef?: React.RefObject<any>;
-    toRef?: React.RefObject<any>;
-    calendarRef?: React.RefObject<Calendar>;
-}
-export declare const DateRangePickerContext: React.Context<DateRangePickerContextProps>;

package/cjs/components/DateRangePicker/DateRangePickerContext.js

@@ -1,33 +0,0 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.DateRangePickerContext = void 0;var _react = _interopRequireDefault(require("react"));
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var DateRangePickerContext = exports.DateRangePickerContext = /*#__PURE__*/_react.default.createContext({});
-
-DateRangePickerContext.displayName = 'DateRangePickerContext';

package/cjs/components/DateRangePicker/DateRangePickerContext.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","DateRangePickerContext","exports","React","createContext","displayName"],"sources":["DateRangePickerContext.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SizeProp } from '../../lib/types/props';\nimport { Calendar } from '../Calendar';\n\nexport interface DateRangePickerContextProps {\n  from?: string;\n  to?: string;\n  minDate?: string;\n  maxDate?: string;\n  size?: SizeProp;\n  onValueChange?: (from: string, to: string) => void;\n  onFromValueChange?: (value: string) => void;\n  onToValueChange?: (value: string) => void;\n  periodStart?: string;\n  periodEnd?: string;\n  hoveredDay?: string | null;\n  showCalendar?: boolean;\n  currentFocus?: 'start' | 'end' | null;\n  setPeriodStart?: (value: string | null) => void;\n  setPeriodEnd?: (value: string | null) => void;\n  setHoveredDay?: (value: string | null) => void;\n  setShowCalendar?: (value: boolean) => void;\n  setCurrentFocus?: (value: 'start' | 'end' | null) => void;\n  isMobile?: boolean;\n  fromRef?: React.RefObject<any>;\n  toRef?: React.RefObject<any>;\n  calendarRef?: React.RefObject<Calendar>;\n}\n\nexport const DateRangePickerContext = React.createContext<DateRangePickerContextProps>({});\n\nDateRangePickerContext.displayName = 'DateRangePickerContext';\n"],"mappings":"4KAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BO,IAAMC,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,gBAAGE,cAAK,CAACC,aAAa,CAA8B,CAAC,CAAC,CAAC;;AAE1FH,sBAAsB,CAACI,WAAW,GAAG,wBAAwB","ignoreList":[]}

package/cjs/components/DateRangePicker/DateRangePickerField.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { DateInputProps } from '../DateInput';
-export interface DateRangePickerFieldProps extends DateInputProps {
-    type: 'start' | 'end';
-    optional?: boolean;
-}
-export declare const DateRangePickerField: React.FC<DateRangePickerFieldProps>;

package/cjs/components/DateRangePicker/DateRangePickerField.js

@@ -1,98 +0,0 @@
-"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.DateRangePickerField = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react = _interopRequireWildcard(require("react"));
-
-var _DateInput = require("../DateInput");
-var _comparison = require("../../lib/date/comparison");
-
-var _DateRangePickerContext = require("./DateRangePickerContext");
-var _DateRangePicker = require("./DateRangePicker");
-
-
-
-
-
-
-var DateRangePickerField = exports.DateRangePickerField = function DateRangePickerField(props) {
-  var _useContext =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    (0, _react.useContext)(_DateRangePickerContext.DateRangePickerContext),periodStart = _useContext.periodStart,periodEnd = _useContext.periodEnd,minDate = _useContext.minDate,maxDate = _useContext.maxDate,size = _useContext.size,currentFocus = _useContext.currentFocus,isMobile = _useContext.isMobile,fromRef = _useContext.fromRef,toRef = _useContext.toRef,calendarRef = _useContext.calendarRef,setPeriodEnd = _useContext.setPeriodEnd,setPeriodStart = _useContext.setPeriodStart,setCurrentFocus = _useContext.setCurrentFocus,setShowCalendar = _useContext.setShowCalendar;
-
-  var isStart = props.type === 'start';
-  var isEnd = props.type === 'end';
-
-  var swapStartAndEndIfNeeded = function swapStartAndEndIfNeeded() {
-    if (periodStart && periodEnd && (0, _comparison.isGreater)(periodStart, periodEnd)) {
-      setPeriodEnd == null || setPeriodEnd(periodStart);
-      setPeriodStart == null || setPeriodStart(periodEnd);
-    }
-  };
-
-  var handleBlur = function handleBlur() {
-    swapStartAndEndIfNeeded();
-
-    if (!currentFocus) {
-      return;
-    }
-
-    if (setCurrentFocus && !isMobile) {
-      setCurrentFocus(null);
-    }
-  };
-
-  var handleFocus = function handleFocus() {
-    setCurrentFocus == null || setCurrentFocus(props.type);
-    setShowCalendar == null || setShowCalendar(true);
-
-    var period = isStart ? periodStart : periodEnd;
-
-    if (period) {
-      var _period$split$map = period.split('.').map(Number),month = _period$split$map[1],year = _period$split$map[2];
-
-      if (month) {var _calendarRef$current;
-        calendarRef == null || (_calendarRef$current = calendarRef.current) == null || _calendarRef$current.scrollToMonth(month, year);
-      }
-    }
-  };
-
-  var handleValueChange = function handleValueChange(value) {
-    if (isStart) {
-      setPeriodStart == null || setPeriodStart(value);
-    }
-
-    if (isEnd) {
-      setPeriodEnd == null || setPeriodEnd(value);
-    }
-  };
-
-  var commonProps = (0, _extends2.default)({
-    minDate: minDate,
-    maxDate: maxDate,
-    size: props.size || size,
-    withIcon: true,
-    onFocus: handleFocus,
-    onClick: handleFocus,
-    onBlur: handleBlur,
-    onValueChange: handleValueChange },
-  props);
-
-
-  switch (props.type) {
-    case 'start':
-      return /*#__PURE__*/_react.default.createElement(_DateInput.DateInput, (0, _extends2.default)({ value: periodStart, ref: fromRef, "data-tid": _DateRangePicker.DateRangePickerDataTids.from }, commonProps));
-
-    case 'end':
-      return /*#__PURE__*/_react.default.createElement(_DateInput.DateInput, (0, _extends2.default)({ value: periodEnd, ref: toRef, "data-tid": _DateRangePicker.DateRangePickerDataTids.to }, commonProps));
-  }
-};

package/cjs/components/DateRangePicker/DateRangePickerField.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_DateInput","_comparison","_DateRangePickerContext","_DateRangePicker","DateRangePickerField","exports","props","_useContext","useContext","DateRangePickerContext","periodStart","periodEnd","minDate","maxDate","size","currentFocus","isMobile","fromRef","toRef","calendarRef","setPeriodEnd","setPeriodStart","setCurrentFocus","setShowCalendar","isStart","type","isEnd","swapStartAndEndIfNeeded","isGreater","handleBlur","handleFocus","period","_period$split$map","split","map","Number","month","year","_calendarRef$current","current","scrollToMonth","handleValueChange","value","commonProps","_extends2","default","withIcon","onFocus","onClick","onBlur","onValueChange","createElement","DateInput","ref","DateRangePickerDataTids","from","to"],"sources":["DateRangePickerField.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { DateInput, DateInputProps } from '../DateInput';\nimport { isGreater } from '../../lib/date/comparison';\n\nimport { DateRangePickerContext } from './DateRangePickerContext';\nimport { DateRangePickerDataTids } from './DateRangePicker';\n\nexport interface DateRangePickerFieldProps extends DateInputProps {\n  type: 'start' | 'end';\n  optional?: boolean;\n}\n\nexport const DateRangePickerField: React.FC<DateRangePickerFieldProps> = (props) => {\n  const {\n    periodStart,\n    periodEnd,\n    minDate,\n    maxDate,\n    size,\n    currentFocus,\n    isMobile,\n    fromRef,\n    toRef,\n    calendarRef,\n    setPeriodEnd,\n    setPeriodStart,\n    setCurrentFocus,\n    setShowCalendar,\n  } = useContext(DateRangePickerContext);\n\n  const isStart = props.type === 'start';\n  const isEnd = props.type === 'end';\n\n  const swapStartAndEndIfNeeded = () => {\n    if (periodStart && periodEnd && isGreater(periodStart, periodEnd)) {\n      setPeriodEnd?.(periodStart);\n      setPeriodStart?.(periodEnd);\n    }\n  };\n\n  const handleBlur = () => {\n    swapStartAndEndIfNeeded();\n\n    if (!currentFocus) {\n      return;\n    }\n\n    if (setCurrentFocus && !isMobile) {\n      setCurrentFocus(null);\n    }\n  };\n\n  const handleFocus = () => {\n    setCurrentFocus?.(props.type);\n    setShowCalendar?.(true);\n\n    const period = isStart ? periodStart : periodEnd;\n\n    if (period) {\n      const [, month, year] = period.split('.').map(Number);\n\n      if (month) {\n        calendarRef?.current?.scrollToMonth(month, year);\n      }\n    }\n  };\n\n  const handleValueChange = (value: string) => {\n    if (isStart) {\n      setPeriodStart?.(value);\n    }\n\n    if (isEnd) {\n      setPeriodEnd?.(value);\n    }\n  };\n\n  const commonProps: DateInputProps = {\n    minDate,\n    maxDate,\n    size: props.size || size,\n    withIcon: true,\n    onFocus: handleFocus,\n    onClick: handleFocus,\n    onBlur: handleBlur,\n    onValueChange: handleValueChange,\n    ...props,\n  };\n\n  switch (props.type) {\n    case 'start':\n      return <DateInput value={periodStart} ref={fromRef} data-tid={DateRangePickerDataTids.from} {...commonProps} />;\n\n    case 'end':\n      return <DateInput value={periodEnd} ref={toRef} data-tid={DateRangePickerDataTids.to} {...commonProps} />;\n  }\n};\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/DateRangePicker/DateRangePickerSeparator.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DateRangePickerSeparator: React.FC;

package/cjs/components/DateRangePicker/DateRangePickerSeparator.js

@@ -1,3 +0,0 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.DateRangePickerSeparator = void 0;var _react = _interopRequireDefault(require("react"));
-
-var DateRangePickerSeparator = exports.DateRangePickerSeparator = function DateRangePickerSeparator() {return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\xA0\u2014\xA0");};

package/cjs/components/DateRangePicker/DateRangePickerSeparator.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","DateRangePickerSeparator","exports","default","createElement","Fragment"],"sources":["DateRangePickerSeparator.tsx"],"sourcesContent":["import React from 'react';\n\nexport const DateRangePickerSeparator: React.FC = () => <>&nbsp;—&nbsp;</>;\n"],"mappings":"8KAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;AAEO,IAAMC,wBAAkC,GAAAC,OAAA,CAAAD,wBAAA,GAAG,SAArCA,wBAAkCA,CAAA,uBAASH,MAAA,CAAAK,OAAA,CAAAC,aAAA,CAAAN,MAAA,CAAAK,OAAA,CAAAE,QAAA,QAAE,gBAAe,CAAC","ignoreList":[]}

package/cjs/components/DateRangePicker/DateRangePickerTheme.d.ts

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

package/cjs/components/DateRangePicker/DateRangePickerTheme.js

@@ -1,30 +0,0 @@
-"use strict";exports.__esModule = true;exports.getMobileDateRangePickerTheme = exports.getDateRangePickerTheme = void 0;var _ThemeFactory = require("../../lib/theming/ThemeFactory");
-
-
-var getDateRangePickerTheme = exports.getDateRangePickerTheme = function getDateRangePickerTheme(theme) {
-  return _ThemeFactory.ThemeFactory.create(
-    {
-      calendarBottomSeparatorBorder: 'none',
-      calendarCellBg: 'transparent',
-      calendarWrapperHeight: theme.calendarRangeWrapperHeight
-    },
-    theme
-  );
-};
-
-var getMobileDateRangePickerTheme = exports.getMobileDateRangePickerTheme = function getMobileDateRangePickerTheme(theme) {
-  return _ThemeFactory.ThemeFactory.create(
-    {
-      calendarPaddingX: theme.mobileCalendarPaddingX,
-      calendarCellWidth: theme.mobileCalendarCellWidth,
-      calendarCellHeight: theme.mobileCalendarRangeCellHeight,
-      calendarCellBorderRadius: theme.mobileCalendarCellBorderRadius,
-      calendarCellFontSize: theme.mobileCalendarCellFontSize,
-      calendarGridRowSpacing: theme.mobileCalendarRangeGridRowSpacing,
-      dateSelectFontSize: theme.mobileDateSelectFontSize,
-      dateSelectLineHeight: theme.mobileDateSelectLineHeight,
-      calendarWrapperHeight: theme.mobileCalendarRangeWrapperHeight
-    },
-    theme
-  );
-};

package/cjs/components/DateRangePicker/DateRangePickerTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_ThemeFactory","require","getDateRangePickerTheme","exports","theme","ThemeFactory","create","calendarBottomSeparatorBorder","calendarCellBg","calendarWrapperHeight","calendarRangeWrapperHeight","getMobileDateRangePickerTheme","calendarPaddingX","mobileCalendarPaddingX","calendarCellWidth","mobileCalendarCellWidth","calendarCellHeight","mobileCalendarRangeCellHeight","calendarCellBorderRadius","mobileCalendarCellBorderRadius","calendarCellFontSize","mobileCalendarCellFontSize","calendarGridRowSpacing","mobileCalendarRangeGridRowSpacing","dateSelectFontSize","mobileDateSelectFontSize","dateSelectLineHeight","mobileDateSelectLineHeight","mobileCalendarRangeWrapperHeight"],"sources":["DateRangePickerTheme.ts"],"sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getDateRangePickerTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      calendarBottomSeparatorBorder: 'none',\n      calendarCellBg: 'transparent',\n      calendarWrapperHeight: theme.calendarRangeWrapperHeight,\n    },\n    theme,\n  );\n};\n\nexport const getMobileDateRangePickerTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      calendarPaddingX: theme.mobileCalendarPaddingX,\n      calendarCellWidth: theme.mobileCalendarCellWidth,\n      calendarCellHeight: theme.mobileCalendarRangeCellHeight,\n      calendarCellBorderRadius: theme.mobileCalendarCellBorderRadius,\n      calendarCellFontSize: theme.mobileCalendarCellFontSize,\n      calendarGridRowSpacing: theme.mobileCalendarRangeGridRowSpacing,\n      dateSelectFontSize: theme.mobileDateSelectFontSize,\n      dateSelectLineHeight: theme.mobileDateSelectLineHeight,\n      calendarWrapperHeight: theme.mobileCalendarRangeWrapperHeight,\n    },\n    theme,\n  );\n};\n"],"mappings":"wHAAA,IAAAA,aAAA,GAAAC,OAAA;;;AAGO,IAAMC,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAG,SAA1BA,uBAAuBA,CAAIE,KAAY,EAAY;EAC9D,OAAOC,0BAAY,CAACC,MAAM;IACxB;MACEC,6BAA6B,EAAE,MAAM;MACrCC,cAAc,EAAE,aAAa;MAC7BC,qBAAqB,EAAEL,KAAK,CAACM;IAC/B,CAAC;IACDN;EACF,CAAC;AACH,CAAC;;AAEM,IAAMO,6BAA6B,GAAAR,OAAA,CAAAQ,6BAAA,GAAG,SAAhCA,6BAA6BA,CAAIP,KAAY,EAAY;EACpE,OAAOC,0BAAY,CAACC,MAAM;IACxB;MACEM,gBAAgB,EAAER,KAAK,CAACS,sBAAsB;MAC9CC,iBAAiB,EAAEV,KAAK,CAACW,uBAAuB;MAChDC,kBAAkB,EAAEZ,KAAK,CAACa,6BAA6B;MACvDC,wBAAwB,EAAEd,KAAK,CAACe,8BAA8B;MAC9DC,oBAAoB,EAAEhB,KAAK,CAACiB,0BAA0B;MACtDC,sBAAsB,EAAElB,KAAK,CAACmB,iCAAiC;MAC/DC,kBAAkB,EAAEpB,KAAK,CAACqB,wBAAwB;MAClDC,oBAAoB,EAAEtB,KAAK,CAACuB,0BAA0B;MACtDlB,qBAAqB,EAAEL,KAAK,CAACwB;IAC/B,CAAC;IACDxB;EACF,CAAC;AACH,CAAC","ignoreList":[]}

package/cjs/components/DateRangePicker/MobileDateRangePicker.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { DateRangePickerProps } from './DateRangePicker';
-export interface MobileDateRangePickerProps extends Pick<DateRangePickerProps, 'error' | 'warning' | 'value' | 'minDate' | 'maxDate' | 'enableTodayLink' | 'renderDay' | 'onMonthChange'> {
-    onCalendarPickDay: (date: string) => void;
-    onCloseRequest?: () => void;
-}
-export declare const MobileDateRangePicker: React.FC<MobileDateRangePickerProps>;