@skbkontur/react-ui 0.0.0-d4e280859d → 0.0.0-d99038a7ec

package/cjs/components/DateRangePicker/DateRangePicker.md

@@ -1,298 +0,0 @@
-Компонент `DateRangePicker` состоит из двух [DateInput](#/Components/DateInput) и одного общего [Calendar](#/Components/Calendar).
-
-- Период задается через `start` и `end`
-- Минимальное и максимальные даты указываются через `minDate` и `maxDate`
-- Значения задаются строкой в формате `dd.mm.yyyy`
-- Пустыми значениями считаются `""`, `null` и `undefined`
-
-```jsx harmony
-const [startValue, setStartValue] = React.useState();
-const [toValue, setEndValue] = React.useState();
-const minDate = "08.07.2024";
-const maxDate = "18.08.2024";
-
-<DateRangePicker
-  start={startValue}
-  end={toValue}
-  minDate={minDate}
-  maxDate={maxDate}
-  onValueChange={console.log}
-  onStartValueChange={setStartValue}
-  onEndValueChange={setEndValue}
-/>
-```
-
-<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.Start />` — поле «от», настройки как у [DateInput](#/Components/DateInput)
-- `<DateRangePicker.End />` — поле «до», настройки как у [DateInput](#/Components/DateInput)
-- `<DateRangePicker.Separator />` — разделитель
-
-<br />
-
-### Поля без тире
-
-```jsx harmony
-<DateRangePicker>
-  <DateRangePicker.Start style={{ borderRadius: 0 }} />
-  <DateRangePicker.End style={{ marginLeft: -1, borderRadius: 0 }} />
-</DateRangePicker>
-```
-
-### Вертикальное расположение
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<DateRangePicker>
-    <Gapped gap={4} vertical>
-      <DateRangePicker.Start />
-      <DateRangePicker.End />
-    </Gapped>
-</DateRangePicker>
-```
-
-
-### Открытые даты начала или конца
-
-Для полей достпен параметр `optional`, чтобы указывать поля открытыми.
-
-```jsx harmony
-import { Checkbox } from '@skbkontur/react-ui';
-
-<DateRangePicker>
-  <DateRangePicker.Start optional />
-  <DateRangePicker.Separator />
-  <DateRangePicker.End 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 })} start={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.endkenTextColorDisabled }}>—</span>}
-      </div>
-    </CalendarDay>
-  );
-}
-
- const [startValue, setStartValue] = React.useState();
- const [toValue, setEndValue] = 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
-    start={startValue}
-    end={toValue}
-    minDate={minDate}
-    maxDate={maxDate}
-    size="medium"
-    onValueChange={console.log}
-    onStartValueChange={setStartValue}
-    onEndValueChange={setEndValue}
-    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: 'Endday',
-  months: [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-  ],
-  order: DateOrder.MDY,
-  separator: DateSeparator.Slash,
-  todayAriaLabel: "Go end 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;
-    inputWrapper(): string;
-    inputVisuallyFocus(t: Theme): string;
-    inputWrapperWidth(t: Theme): string;
-    calendarMobile(): string;
-    calendarWrapper(t: Theme): string;
-};

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

@@ -1,45 +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)(["\n      display: inline-block;\n    "])));
-
-
-  },
-  inputWrapper: function inputWrapper() {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (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)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: ", ";\n    "])),
-    t.inputFocusShadow);
-
-  },
-  inputWrapperWidth: function inputWrapperWidth(t) {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      min-width: ", "px;\n    "])),
-    parseInt(t.calendarCellWidth) * 7 + parseInt(t.calendarPaddingX) * 2);
-
-  },
-
-  calendarMobile: function calendarMobile() {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: auto;\n    "])));
-
-
-  },
-  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","inputWrapper","inputVisuallyFocus","t","inputFocusShadow","inputWrapperWidth","parseInt","calendarCellWidth","calendarPaddingX","calendarMobile","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      display: inline-block;\n    `;\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: ${t.inputFocusShadow};\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  calendarMobile() {\n    return css`\n      width: auto;\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;;;EAGZ,CAAC;EACDC,YAAY,WAAAA,aAAA,EAAG;IACb,WAAOH,YAAG,EAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;;;;;;;;EAQZ,CAAC;EACDE,kBAAkB,WAAAA,mBAACC,CAAQ,EAAE;IAC3B,WAAOL,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;IACMG,CAAC,CAACC,gBAAgB;;EAEpC,CAAC;EACDC,iBAAiB,WAAAA,kBAACF,CAAQ,EAAE;IAC1B,WAAOL,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;IACKM,QAAQ,CAACH,CAAC,CAACI,iBAAiB,CAAC,GAAG,CAAC,GAAGD,QAAQ,CAACH,CAAC,CAACK,gBAAgB,CAAC,GAAG,CAAC;;EAErF,CAAC;;EAEDC,cAAc,WAAAA,eAAA,EAAG;IACf,WAAOX,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;;;EAGZ,CAAC;EACDU,eAAe,WAAAA,gBAACP,CAAQ,EAAE;IACxB,WAAOL,YAAG,EAAAL,gBAAA,KAAAA,gBAAA,OAAAM,4BAAA,CAAAC,OAAA;IACMG,CAAC,CAACQ,YAAY;;;;;;EAMhC;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -1,27 +0,0 @@
-import React from 'react';
-import type { SizeProp } from '../../lib/types/props';
-import type { DateInput } from '../DateInput';
-import type { DateRangeFieldType } from './DateRangePicker';
-export interface DateRangePickerContextProps {
-    start: string | null;
-    end: string | null;
-    setActiveField?: boolean;
-    minDate?: string;
-    maxDate?: string;
-    size?: SizeProp;
-    disabled?: boolean[];
-    autoFocus?: boolean;
-    warning?: boolean[];
-    error?: boolean[];
-    onBlur?: () => void;
-    onFocus?: () => void;
-    onValueChange?: (value: string[]) => void;
-    setStart: (value: string) => void;
-    setEnd: (value: string) => void;
-    open: (Props: DateRangeFieldType) => void;
-    close: () => void;
-    dateRangePickerRef: React.RefObject<HTMLDivElement>;
-    startRef: React.RefObject<DateInput>;
-    endRef: React.RefObject<DateInput>;
-}
-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 type { SizeProp } from '../../lib/types/props';\nimport type { DateInput } from '../DateInput';\n\nimport type { DateRangeFieldType } from './DateRangePicker';\n\nexport interface DateRangePickerContextProps {\n  start: string | null;\n  end: string | null;\n  setActiveField?: boolean;\n  minDate?: string;\n  maxDate?: string;\n  size?: SizeProp;\n  disabled?: boolean[];\n  autoFocus?: boolean;\n  warning?: boolean[];\n  error?: boolean[];\n  onBlur?: () => void;\n  onFocus?: () => void;\n  onValueChange?: (value: string[]) => void;\n  setStart: (value: string) => void;\n  setEnd: (value: string) => void;\n  open: (Props: DateRangeFieldType) => void;\n  close: () => void;\n  dateRangePickerRef: React.RefObject<HTMLDivElement>;\n  startRef: React.RefObject<DateInput>;\n  endRef: React.RefObject<DateInput>;\n}\n\nexport const DateRangePickerContext = React.createContext({} as 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,CAAC,CAAC,CAAgC,CAAC;;AAE5FH,sBAAsB,CAACI,WAAW,GAAG,wBAAwB","ignoreList":[]}

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

@@ -1,8 +0,0 @@
-import React from 'react';
-import { DateInputProps } from '../DateInput';
-import { CommonProps } from '../../internal/CommonWrapper';
-export interface DateRangePickerFieldProps extends CommonProps, Pick<DateInputProps, 'id' | 'size' | 'style' | 'withIcon' | 'width'> {
-    type: 'start' | 'end';
-}
-export type DateRangePickerFieldWithTypeProps = Omit<DateInputProps, 'type'>;
-export declare const DateRangePickerField: React.FC<DateRangePickerFieldProps>;

package/cjs/components/DateRangePicker/DateRangePickerField.js

@@ -1,100 +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 _ResponsiveLayout = require("../ResponsiveLayout");
-
-
-var _DateRangePickerContext = require("./DateRangePickerContext");
-var _DateRangePicker = require("./DateRangePicker");
-
-
-
-
-
-
-
-
-
-var DateRangePickerField = exports.DateRangePickerField = function DateRangePickerField(props) {
-  var _useContext =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    (0, _react.useContext)(_DateRangePickerContext.DateRangePickerContext),start = _useContext.start,end = _useContext.end,minDate = _useContext.minDate,maxDate = _useContext.maxDate,size = _useContext.size,disabled = _useContext.disabled,autoFocus = _useContext.autoFocus,warning = _useContext.warning,error = _useContext.error,dateRangePickerRef = _useContext.dateRangePickerRef,startRef = _useContext.startRef,endRef = _useContext.endRef,setEnd = _useContext.setEnd,setStart = _useContext.setStart,open = _useContext.open,close = _useContext.close,_onFocus = _useContext.onFocus,_onBlur = _useContext.onBlur;
-  var _useResponsiveLayout = (0, _ResponsiveLayout.useResponsiveLayout)(),isMobile = _useResponsiveLayout.isMobile;
-
-  var commonProps = (0, _extends2.default)({
-    minDate: minDate,
-    maxDate: maxDate,
-    size: size,
-    withIcon: true },
-  props, {
-    onClick: function onClick() {
-      var isDisabled = props.type === 'start' ? disabled == null ? void 0 : disabled[0] : disabled == null ? void 0 : disabled[1];
-      if (isDisabled) {
-        return;
-      }
-      open(props.type);
-    },
-    onFocus: function onFocus() {
-      open(props.type);
-      _onFocus == null || _onFocus();
-    },
-    onBlur: function onBlur(e) {var _dateRangePickerRef$c;
-      if (isMobile) {
-        return;
-      }
-      var nextFocusedElement = e.relatedTarget;
-      if (!((_dateRangePickerRef$c = dateRangePickerRef.current) != null && _dateRangePickerRef$c.contains(nextFocusedElement))) {
-        close();
-      }
-      _onBlur == null || _onBlur();
-    } });
-
-
-  switch (props.type) {
-    case 'start':
-      return /*#__PURE__*/(
-        _react.default.createElement(_DateInput.DateInput, (0, _extends2.default)({
-          value: start || '',
-          autoFocus: autoFocus,
-          disabled: disabled == null ? void 0 : disabled[0],
-          error: error == null ? void 0 : error[0],
-          warning: warning == null ? void 0 : warning[0],
-          "data-tid": _DateRangePicker.DateRangePickerDataTids.start,
-          onValueChange: setStart,
-          ref: startRef },
-        commonProps)
-        ));
-
-
-    case 'end':
-      return /*#__PURE__*/(
-        _react.default.createElement(_DateInput.DateInput, (0, _extends2.default)({
-          value: end || '',
-          disabled: disabled == null ? void 0 : disabled[1],
-          error: error == null ? void 0 : error[1],
-          warning: warning == null ? void 0 : warning[1],
-          "data-tid": _DateRangePicker.DateRangePickerDataTids.end,
-          onValueChange: setEnd,
-          ref: endRef },
-        commonProps)
-        ));
-
-  }
-};

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

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_DateInput","_ResponsiveLayout","_DateRangePickerContext","_DateRangePicker","DateRangePickerField","exports","props","_useContext","useContext","DateRangePickerContext","start","end","minDate","maxDate","size","disabled","autoFocus","warning","error","dateRangePickerRef","startRef","endRef","setEnd","setStart","open","close","onFocus","onBlur","_useResponsiveLayout","useResponsiveLayout","isMobile","commonProps","_extends2","default","withIcon","onClick","isDisabled","type","e","_dateRangePickerRef$c","nextFocusedElement","relatedTarget","current","contains","createElement","DateInput","value","DateRangePickerDataTids","onValueChange","ref"],"sources":["DateRangePickerField.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { DateInput, DateInputProps } from '../DateInput';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\nimport { CommonProps } from '../../internal/CommonWrapper';\n\nimport { DateRangePickerContext } from './DateRangePickerContext';\nimport { DateRangePickerDataTids } from './DateRangePicker';\n\nexport interface DateRangePickerFieldProps\n  extends CommonProps,\n    Pick<DateInputProps, 'id' | 'size' | 'style' | 'withIcon' | 'width'> {\n  type: 'start' | 'end';\n}\n\nexport type DateRangePickerFieldWithTypeProps = Omit<DateInputProps, 'type'>;\n\nexport const DateRangePickerField: React.FC<DateRangePickerFieldProps> = (props) => {\n  const {\n    start,\n    end,\n    minDate,\n    maxDate,\n    size,\n    disabled,\n    autoFocus,\n    warning,\n    error,\n    dateRangePickerRef,\n    startRef,\n    endRef,\n    setEnd,\n    setStart,\n    open,\n    close,\n    onFocus,\n    onBlur,\n  } = useContext(DateRangePickerContext);\n  const { isMobile } = useResponsiveLayout();\n\n  const commonProps: DateInputProps = {\n    minDate,\n    maxDate,\n    size,\n    withIcon: true,\n    ...props,\n    onClick: () => {\n      const isDisabled = props.type === 'start' ? disabled?.[0] : disabled?.[1];\n      if (isDisabled) {\n        return;\n      }\n      open(props.type);\n    },\n    onFocus: () => {\n      open(props.type);\n      onFocus?.();\n    },\n    onBlur: (e) => {\n      if (isMobile) {\n        return;\n      }\n      const nextFocusedElement = e.relatedTarget;\n      if (!dateRangePickerRef.current?.contains(nextFocusedElement)) {\n        close();\n      }\n      onBlur?.();\n    },\n  };\n\n  switch (props.type) {\n    case 'start':\n      return (\n        <DateInput\n          value={start || ''}\n          autoFocus={autoFocus}\n          disabled={disabled?.[0]}\n          error={error?.[0]}\n          warning={warning?.[0]}\n          data-tid={DateRangePickerDataTids.start}\n          onValueChange={setStart}\n          ref={startRef}\n          {...commonProps}\n        />\n      );\n\n    case 'end':\n      return (\n        <DateInput\n          value={end || ''}\n          disabled={disabled?.[1]}\n          error={error?.[1]}\n          warning={warning?.[1]}\n          data-tid={DateRangePickerDataTids.end}\n          onValueChange={setEnd}\n          ref={endRef}\n          {...commonProps}\n        />\n      );\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,31 +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.rangeCalendarWrapperHeight
-    },
-    theme
-  );
-};
-
-var getMobileDateRangePickerTheme = exports.getMobileDateRangePickerTheme = function getMobileDateRangePickerTheme(theme) {
-  return _ThemeFactory.ThemeFactory.create(
-    {
-      calendarCellBg: 'transparent',
-      calendarCellBorderRadius: theme.mobileCalendarCellBorderRadius,
-      calendarCellFontSize: theme.mobileCalendarCellFontSize,
-      calendarGridRowSpacing: theme.mobileRangeCalendarGridRowSpacing,
-      calendarPaddingX: theme.mobileCalendarPaddingX,
-      calendarCellWidth: theme.mobileRangeCalendarCellWidth,
-      calendarCellHeight: theme.mobileRangeCalendarCellHeight,
-      calendarWrapperHeight: theme.mobileRangeCalendarWrapperHeight,
-      dateSelectFontSize: theme.mobileDateSelectFontSize,
-      dateSelectLineHeight: theme.mobileDateSelectLineHeight
-    },
-    theme
-  );
-};

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

@@ -1 +0,0 @@
-{"version":3,"names":["_ThemeFactory","require","getDateRangePickerTheme","exports","theme","ThemeFactory","create","calendarBottomSeparatorBorder","calendarCellBg","calendarWrapperHeight","rangeCalendarWrapperHeight","getMobileDateRangePickerTheme","calendarCellBorderRadius","mobileCalendarCellBorderRadius","calendarCellFontSize","mobileCalendarCellFontSize","calendarGridRowSpacing","mobileRangeCalendarGridRowSpacing","calendarPaddingX","mobileCalendarPaddingX","calendarCellWidth","mobileRangeCalendarCellWidth","calendarCellHeight","mobileRangeCalendarCellHeight","mobileRangeCalendarWrapperHeight","dateSelectFontSize","mobileDateSelectFontSize","dateSelectLineHeight","mobileDateSelectLineHeight"],"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.rangeCalendarWrapperHeight,\n    },\n    theme,\n  );\n};\n\nexport const getMobileDateRangePickerTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      calendarCellBg: 'transparent',\n      calendarCellBorderRadius: theme.mobileCalendarCellBorderRadius,\n      calendarCellFontSize: theme.mobileCalendarCellFontSize,\n      calendarGridRowSpacing: theme.mobileRangeCalendarGridRowSpacing,\n      calendarPaddingX: theme.mobileCalendarPaddingX,\n      calendarCellWidth: theme.mobileRangeCalendarCellWidth,\n      calendarCellHeight: theme.mobileRangeCalendarCellHeight,\n      calendarWrapperHeight: theme.mobileRangeCalendarWrapperHeight,\n      dateSelectFontSize: theme.mobileDateSelectFontSize,\n      dateSelectLineHeight: theme.mobileDateSelectLineHeight,\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;MACEE,cAAc,EAAE,aAAa;MAC7BI,wBAAwB,EAAER,KAAK,CAACS,8BAA8B;MAC9DC,oBAAoB,EAAEV,KAAK,CAACW,0BAA0B;MACtDC,sBAAsB,EAAEZ,KAAK,CAACa,iCAAiC;MAC/DC,gBAAgB,EAAEd,KAAK,CAACe,sBAAsB;MAC9CC,iBAAiB,EAAEhB,KAAK,CAACiB,4BAA4B;MACrDC,kBAAkB,EAAElB,KAAK,CAACmB,6BAA6B;MACvDd,qBAAqB,EAAEL,KAAK,CAACoB,gCAAgC;MAC7DC,kBAAkB,EAAErB,KAAK,CAACsB,wBAAwB;MAClDC,oBAAoB,EAAEvB,KAAK,CAACwB;IAC9B,CAAC;IACDxB;EACF,CAAC;AACH,CAAC","ignoreList":[]}