@skbkontur/react-ui 0.0.0-3c309a601b → 0.0.0-3dbb8bef27

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

@@ -0,0 +1,125 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getFontSize = getFontSize;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+var _Emotion = require("../../lib/theming/Emotion");
+
+var _Calendar = require("../Calendar");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+var styles = exports.styles = (0, _Emotion.memoizeStyle)({
+  root: function root(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      color: ", ";\n    "])),
+
+    t.textColorDefault);
+
+  },
+  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    "])));
+
+
+
+
+
+
+
+  },
+  inputWrapperWidth: function inputWrapperWidth(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      min-width: ", "px;\n    "])),
+    parseInt(t.calendarCellWidth) * 7 + parseInt(t.calendarPaddingX) * 2);
+
+  },
+  inputWrapperWidthFull: function inputWrapperWidthFull() {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 100%;\n    "])));
+
+
+  },
+  inputVisuallyFocus: function inputVisuallyFocus(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: ", ";\n    "])),
+    t.inputFocusShadow);
+
+  },
+  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);
+
+
+
+
+
+  },
+  calendarWidthAuto: function calendarWidthAuto() {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: auto;\n    "])));
+
+
+  },
+  rangeCalendarDay: function rangeCalendarDay() {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 100%;\n      height: 100%;\n    "])));
+
+
+
+  },
+  rangeCalendarDayEnd: function rangeCalendarDayEnd(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: ", ";\n        border-radius: ", ";\n      }\n\n      [data-tid=", "] {\n        color: ", ";\n\n        @media (hover: hover) {\n          &:hover {\n            color: ", ";\n            background: none;\n          }\n        }\n      }\n    "])),
+
+
+
+
+
+
+
+
+
+    t.rangeCalendarCellEndBg,
+    t.calendarCellBorderRadius,
+
+
+    _Calendar.CalendarDataTids.dayCell,
+    t.rangeCalendarCellEndColor,
+
+
+
+    t.rangeCalendarCellEndColor);
+
+
+
+
+
+  },
+  rangeCalendarDayInHoveredPeriod: function rangeCalendarDayInHoveredPeriod(t) {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n    "])),
+    t.rangeCalendarCellBg);
+
+  },
+  rangeCalendarDayHoverInPeriod: function rangeCalendarDayHoverInPeriod(t) {
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      @media (hover: hover) {\n        &:hover [data-tid=", "] {\n          background: ", ";\n        }\n      }\n    "])),
+
+    _Calendar.CalendarDataTids.dayCell,
+    t.rangeCalendarCellHoverBg);
+
+
+
+  },
+  buttonWrap: function buttonWrap() {
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      margin: 8px;\n\n      > * {\n        flex-grow: 1;\n      }\n\n      > *:not(:first-child) {\n        margin-left: 8px;\n      }\n    "])));
+
+
+
+
+
+
+
+
+
+
+
+  }
+});
+
+function getFontSize(t, size) {
+  switch (size) {
+    case 'large':
+      return t.fontSizeLarge;
+    case 'medium':
+      return t.fontSizeMedium;
+    case 'small':
+    default:
+      return t.fontSizeSmall;
+  }
+}

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

@@ -0,0 +1 @@
+{"version":3,"names":["_Emotion","require","_Calendar","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","styles","exports","memoizeStyle","root","t","css","_taggedTemplateLiteralLoose2","default","textColorDefault","inputWrapper","inputWrapperWidth","parseInt","calendarCellWidth","calendarPaddingX","inputWrapperWidthFull","inputVisuallyFocus","inputFocusShadow","calendarWrapper","pickerShadow","calendarWidthAuto","rangeCalendarDay","rangeCalendarDayEnd","rangeCalendarCellEndBg","calendarCellBorderRadius","CalendarDataTids","dayCell","rangeCalendarCellEndColor","rangeCalendarDayInHoveredPeriod","rangeCalendarCellBg","rangeCalendarDayHoverInPeriod","rangeCalendarCellHoverBg","buttonWrap","getFontSize","size","fontSizeLarge","fontSizeMedium","fontSizeSmall"],"sources":["DateRangePicker.styles.ts"],"sourcesContent":["import { SizeProp } from '../../lib/types/props';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CalendarDataTids } from '../Calendar';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      display: inline-block;\n      color: ${t.textColorDefault};\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  inputWrapperWidth(t: Theme) {\n    return css`\n      min-width: ${parseInt(t.calendarCellWidth) * 7 + parseInt(t.calendarPaddingX) * 2}px;\n    `;\n  },\n  inputWrapperWidthFull() {\n    return css`\n      width: 100%;\n    `;\n  },\n  inputVisuallyFocus(t: Theme) {\n    return css`\n      box-shadow: ${t.inputFocusShadow};\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  calendarWidthAuto() {\n    return css`\n      width: auto;\n    `;\n  },\n  rangeCalendarDay() {\n    return css`\n      width: 100%;\n      height: 100%;\n    `;\n  },\n  rangeCalendarDayEnd(t: Theme) {\n    return css`\n      position: relative;\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: ${t.rangeCalendarCellEndBg};\n        border-radius: ${t.calendarCellBorderRadius};\n      }\n\n      [data-tid=${CalendarDataTids.dayCell}] {\n        color: ${t.rangeCalendarCellEndColor};\n\n        @media (hover: hover) {\n          &:hover {\n            color: ${t.rangeCalendarCellEndColor};\n            background: none;\n          }\n        }\n      }\n    `;\n  },\n  rangeCalendarDayInHoveredPeriod(t: Theme) {\n    return css`\n      background: ${t.rangeCalendarCellBg};\n    `;\n  },\n  rangeCalendarDayHoverInPeriod(t: Theme) {\n    return css`\n      @media (hover: hover) {\n        &:hover [data-tid=${CalendarDataTids.dayCell}] {\n          background: ${t.rangeCalendarCellHoverBg};\n        }\n      }\n    `;\n  },\n  buttonWrap() {\n    return css`\n      display: flex;\n      margin: 8px;\n\n      > * {\n        flex-grow: 1;\n      }\n\n      > *:not(:first-child) {\n        margin-left: 8px;\n      }\n    `;\n  },\n});\n\nexport function getFontSize(t: Theme, size?: SizeProp) {\n  switch (size) {\n    case 'large':\n      return t.fontSizeLarge;\n    case 'medium':\n      return t.fontSizeMedium;\n    case 'small':\n    default:\n      return t.fontSizeSmall;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { RefObject } from 'react';
+import type { DateInput } from '../DateInput';
+import type { SizeProp } from '../../lib/types/props';
+import type { DateRangePickerInputType } from './DateRangePickerInput';
+export interface DateRangePickerContextProps {
+    startValue?: string;
+    startOptional?: boolean;
+    startDisabled?: boolean;
+    endValue?: string;
+    endOptional?: boolean;
+    endDisabled?: boolean;
+    minDate?: string;
+    maxDate?: string;
+    size?: SizeProp;
+    setStartValue: (value: string) => void;
+    setStartOptional: (value: boolean) => void;
+    setStartDisabled: (value: boolean) => void;
+    setEndValue: (value: string) => void;
+    setEndOptional: (value: boolean) => void;
+    setEndDisabled: (value: boolean) => void;
+    setMinDate: (value: string) => void;
+    setMaxDate: (value: string) => void;
+    setFocusInput: (value: DateRangePickerInputType | null) => void;
+    open: (type: DateRangePickerInputType) => void;
+    close: () => void;
+    dateRangePickerRef: RefObject<HTMLDivElement>;
+    startRef: RefObject<DateInput>;
+    endRef: RefObject<DateInput>;
+}
+export declare const DateRangePickerContext: React.Context<DateRangePickerContextProps>;

package/cjs/components/DateRangePicker/DateRangePickerContext.js

@@ -0,0 +1,37 @@
+"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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","DateRangePickerContext","exports","React","createContext","displayName"],"sources":["DateRangePickerContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { RefObject } from 'react';\n\nimport type { DateInput } from '../DateInput';\nimport type { SizeProp } from '../../lib/types/props';\n\nimport type { DateRangePickerInputType } from './DateRangePickerInput';\n\nexport interface DateRangePickerContextProps {\n  startValue?: string;\n  startOptional?: boolean;\n  startDisabled?: boolean;\n  endValue?: string;\n  endOptional?: boolean;\n  endDisabled?: boolean;\n  minDate?: string;\n  maxDate?: string;\n  size?: SizeProp;\n  setStartValue: (value: string) => void;\n  setStartOptional: (value: boolean) => void;\n  setStartDisabled: (value: boolean) => void;\n  setEndValue: (value: string) => void;\n  setEndOptional: (value: boolean) => void;\n  setEndDisabled: (value: boolean) => void;\n  setMinDate: (value: string) => void;\n  setMaxDate: (value: string) => void;\n  setFocusInput: (value: DateRangePickerInputType | null) => void;\n  open: (type: DateRangePickerInputType) => void;\n  close: () => void;\n  dateRangePickerRef: RefObject<HTMLDivElement>;\n  startRef: RefObject<DateInput>;\n  endRef: RefObject<DateInput>;\n}\n\nexport const DateRangePickerContext = React.createContext({} as DateRangePickerContextProps);\n\nDateRangePickerContext.displayName = 'DateRangePickerContext';\n"],"mappings":"4KAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCO,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/DateRangePickerInput.d.ts

@@ -0,0 +1,11 @@
+import { DateInput, DateInputProps } from '../DateInput';
+export type DateRangePickerInputType = 'start' | 'end';
+export interface DateRangePickerInputProps extends Omit<DateInputProps, 'value'> {
+    type: DateRangePickerInputType;
+    value?: string | null;
+    optional?: boolean;
+}
+type DateRangePickerInputWithoutType = Omit<DateRangePickerInputProps, 'type'>;
+export declare const DateRangePickerStart: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<DateInput, DateRangePickerInputWithoutType> & Record<never, never>;
+export declare const DateRangePickerEnd: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<DateInput, DateRangePickerInputWithoutType> & Record<never, never>;
+export {};

package/cjs/components/DateRangePicker/DateRangePickerInput.js

@@ -0,0 +1,162 @@
+"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.DateRangePickerStart = exports.DateRangePickerEnd = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react = _interopRequireWildcard(require("react"));
+
+var _useLocaleForControl = require("../../lib/locale/useLocaleForControl");
+var _DateInput = require("../DateInput");
+var _ResponsiveLayout = require("../ResponsiveLayout");
+var _forwardRefAndName = require("../../lib/forwardRefAndName");
+var _utils = require("../../lib/utils");
+
+var _DateRangePickerContext = require("./DateRangePickerContext");
+var _DateRangePicker = require("./DateRangePicker");
+var _locale = require("./locale");
+
+
+
+
+
+
+
+
+
+
+
+var DateRangePickerInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _useContext =
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    (0, _react.useContext)(_DateRangePickerContext.DateRangePickerContext),minDate = _useContext.minDate,maxDate = _useContext.maxDate,startValue = _useContext.startValue,endValue = _useContext.endValue,size = _useContext.size,setStartValue = _useContext.setStartValue,setStartOptional = _useContext.setStartOptional,setStartDisabled = _useContext.setStartDisabled,setEndValue = _useContext.setEndValue,setEndOptional = _useContext.setEndOptional,setEndDisabled = _useContext.setEndDisabled,setMinDate = _useContext.setMinDate,setMaxDate = _useContext.setMaxDate,setFocusInput = _useContext.setFocusInput,open = _useContext.open,close = _useContext.close,dateRangePickerRef = _useContext.dateRangePickerRef,startRef = _useContext.startRef,endRef = _useContext.endRef;
+  var isStart = props.type === 'start';
+  var isEnd = props.type === 'end';
+  var locale = (0, _useLocaleForControl.useLocaleForControl)('DateRangePicker', _locale.DateRangePickerLocaleHelper);
+
+  var _useResponsiveLayout = (0, _ResponsiveLayout.useResponsiveLayout)(),isMobile = _useResponsiveLayout.isMobile;
+
+  (0, _react.useImperativeHandle)(ref, function () {return isStart ? startRef.current : endRef.current;}, []);
+
+  (0, _react.useEffect)(function () {
+    if ((0, _utils.isNullable)(props.value)) {
+      return;
+    }
+
+    if (isStart) {
+      setStartValue(props.value);
+    } else if (isEnd) {
+      setEndValue(props.value);
+    }
+  }, [props.value]);
+
+  (0, _react.useEffect)(function () {
+    if (isStart) {
+      setStartOptional(props.optional || false);
+      setStartDisabled(props.disabled || false);
+      setMinDate(props.minDate || '');
+    } else if (isEnd) {
+      setEndOptional(props.optional || false);
+      setEndDisabled(props.disabled || false);
+      setMaxDate(props.maxDate || '');
+    }
+  }, [props.optional, props.disabled, props.minDate, props.maxDate]);
+
+  (0, _react.useEffect)(function () {
+    if (isStart && startValue !== props.value && (0, _utils.isNonNullable)(startValue)) {
+      props.onValueChange == null || props.onValueChange(startValue);
+    }
+  }, [startValue]);
+
+  (0, _react.useEffect)(function () {
+    if (isEnd && endValue !== props.value && (0, _utils.isNonNullable)(endValue)) {
+      props.onValueChange == null || props.onValueChange(endValue);
+    }
+  }, [endValue]);
+
+  var commonProps = (0, _extends2.default)({
+    withIcon: true,
+    size: size,
+    minDate: minDate,
+    maxDate: maxDate },
+  props, {
+    onValueChange: function onValueChange(value) {
+      if (isStart) {
+        setStartValue(value || '');
+      } else if (isEnd) {
+        setEndValue(value || '');
+      }
+    },
+    onClick: function onClick() {
+      if (props.disabled) {
+        return;
+      }
+      open(props.type);
+    },
+    onFocus: function onFocus(e) {
+      open(props.type);
+      props.onFocus == null || props.onFocus(e);
+    },
+    onBlur: function onBlur(e) {var _dateRangePickerRef$c;
+      props.onBlur == null || props.onBlur(e);
+
+      if (isMobile) {
+        return;
+      }
+      var nextFocusedElement = e.relatedTarget;
+      if (!((_dateRangePickerRef$c = dateRangePickerRef.current) != null && _dateRangePickerRef$c.contains(nextFocusedElement))) {
+        close();
+      }
+      setFocusInput(null);
+    } });
+
+
+  switch (props.type) {
+    case 'start':
+      return /*#__PURE__*/(
+        _react.default.createElement(_DateInput.DateInput, (0, _extends2.default)({},
+        commonProps, {
+          value: props.value || '',
+          "data-tid": _DateRangePicker.DateRangePickerDataTids.start,
+          "aria-label": props['aria-label'] || locale.startDateLabel,
+          ref: startRef })
+        ));
+
+    case 'end':
+      return /*#__PURE__*/(
+        _react.default.createElement(_DateInput.DateInput, (0, _extends2.default)({},
+        commonProps, {
+          value: props.value || '',
+          "data-tid": _DateRangePicker.DateRangePickerDataTids.end,
+          "aria-label": props['aria-label'] || locale.endDateLabel,
+          ref: endRef })
+        ));
+
+  }
+});
+
+var DateRangePickerStart = exports.DateRangePickerStart = (0, _forwardRefAndName.forwardRefAndName)(
+  'DateRangePickerStart',
+  function (props, ref) {return /*#__PURE__*/(
+      _react.default.createElement(DateRangePickerInput, (0, _extends2.default)({ type: "start" }, props, { ref: ref })));}
+
+);
+
+var DateRangePickerEnd = exports.DateRangePickerEnd = (0, _forwardRefAndName.forwardRefAndName)(
+  'DateRangePickerEnd',
+  function (props, ref) {return /*#__PURE__*/(
+      _react.default.createElement(DateRangePickerInput, (0, _extends2.default)({ type: "end" }, props, { ref: ref })));}
+
+);

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_useLocaleForControl","_DateInput","_ResponsiveLayout","_forwardRefAndName","_utils","_DateRangePickerContext","_DateRangePicker","_locale","DateRangePickerInput","forwardRef","props","ref","_useContext","useContext","DateRangePickerContext","minDate","maxDate","startValue","endValue","size","setStartValue","setStartOptional","setStartDisabled","setEndValue","setEndOptional","setEndDisabled","setMinDate","setMaxDate","setFocusInput","open","close","dateRangePickerRef","startRef","endRef","isStart","type","isEnd","locale","useLocaleForControl","DateRangePickerLocaleHelper","_useResponsiveLayout","useResponsiveLayout","isMobile","useImperativeHandle","current","useEffect","isNullable","value","optional","disabled","isNonNullable","onValueChange","commonProps","_extends2","default","withIcon","onClick","onFocus","e","onBlur","_dateRangePickerRef$c","nextFocusedElement","relatedTarget","contains","createElement","DateInput","DateRangePickerDataTids","start","startDateLabel","end","endDateLabel","DateRangePickerStart","exports","forwardRefAndName","DateRangePickerEnd"],"sources":["DateRangePickerInput.tsx"],"sourcesContent":["import React, { forwardRef, Ref, useContext, useEffect, useImperativeHandle } from 'react';\n\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\nimport { DateInput, DateInputProps } from '../DateInput';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { isNonNullable, isNullable } from '../../lib/utils';\n\nimport { DateRangePickerContext } from './DateRangePickerContext';\nimport { DateRangePickerDataTids } from './DateRangePicker';\nimport { DateRangePickerLocaleHelper } from './locale';\n\nexport type DateRangePickerInputType = 'start' | 'end';\n\nexport interface DateRangePickerInputProps extends Omit<DateInputProps, 'value'> {\n  type: DateRangePickerInputType;\n  value?: string | null;\n  optional?: boolean;\n}\n\ntype DateRangePickerInputWithoutType = Omit<DateRangePickerInputProps, 'type'>;\n\nconst DateRangePickerInput = forwardRef((props: DateRangePickerInputProps, ref: Ref<DateInput | null>) => {\n  const {\n    minDate,\n    maxDate,\n    startValue,\n    endValue,\n    size,\n    setStartValue,\n    setStartOptional,\n    setStartDisabled,\n    setEndValue,\n    setEndOptional,\n    setEndDisabled,\n    setMinDate,\n    setMaxDate,\n    setFocusInput,\n    open,\n    close,\n    dateRangePickerRef,\n    startRef,\n    endRef,\n  } = useContext(DateRangePickerContext);\n  const isStart = props.type === 'start';\n  const isEnd = props.type === 'end';\n  const locale = useLocaleForControl('DateRangePicker', DateRangePickerLocaleHelper);\n\n  const { isMobile } = useResponsiveLayout();\n\n  useImperativeHandle(ref, () => (isStart ? startRef.current : endRef.current), []);\n\n  useEffect(() => {\n    if (isNullable(props.value)) {\n      return;\n    }\n\n    if (isStart) {\n      setStartValue(props.value);\n    } else if (isEnd) {\n      setEndValue(props.value);\n    }\n  }, [props.value]);\n\n  useEffect(() => {\n    if (isStart) {\n      setStartOptional(props.optional || false);\n      setStartDisabled(props.disabled || false);\n      setMinDate(props.minDate || '');\n    } else if (isEnd) {\n      setEndOptional(props.optional || false);\n      setEndDisabled(props.disabled || false);\n      setMaxDate(props.maxDate || '');\n    }\n  }, [props.optional, props.disabled, props.minDate, props.maxDate]);\n\n  useEffect(() => {\n    if (isStart && startValue !== props.value && isNonNullable(startValue)) {\n      props.onValueChange?.(startValue);\n    }\n  }, [startValue]);\n\n  useEffect(() => {\n    if (isEnd && endValue !== props.value && isNonNullable(endValue)) {\n      props.onValueChange?.(endValue);\n    }\n  }, [endValue]);\n\n  const commonProps: DateRangePickerInputProps = {\n    withIcon: true,\n    size,\n    minDate,\n    maxDate,\n    ...props,\n    onValueChange: (value) => {\n      if (isStart) {\n        setStartValue(value || '');\n      } else if (isEnd) {\n        setEndValue(value || '');\n      }\n    },\n    onClick: () => {\n      if (props.disabled) {\n        return;\n      }\n      open(props.type);\n    },\n    onFocus: (e) => {\n      open(props.type);\n      props.onFocus?.(e);\n    },\n    onBlur: (e) => {\n      props.onBlur?.(e);\n\n      if (isMobile) {\n        return;\n      }\n      const nextFocusedElement = e.relatedTarget;\n      if (!dateRangePickerRef.current?.contains(nextFocusedElement)) {\n        close();\n      }\n      setFocusInput(null);\n    },\n  };\n\n  switch (props.type) {\n    case 'start':\n      return (\n        <DateInput\n          {...commonProps}\n          value={props.value || ''}\n          data-tid={DateRangePickerDataTids.start}\n          aria-label={props['aria-label'] || locale.startDateLabel}\n          ref={startRef}\n        />\n      );\n    case 'end':\n      return (\n        <DateInput\n          {...commonProps}\n          value={props.value || ''}\n          data-tid={DateRangePickerDataTids.end}\n          aria-label={props['aria-label'] || locale.endDateLabel}\n          ref={endRef}\n        />\n      );\n  }\n});\n\nexport const DateRangePickerStart = forwardRefAndName(\n  'DateRangePickerStart',\n  (props: DateRangePickerInputWithoutType, ref: Ref<DateInput>) => (\n    <DateRangePickerInput type=\"start\" {...props} ref={ref} />\n  ),\n);\n\nexport const DateRangePickerEnd = forwardRefAndName(\n  'DateRangePickerEnd',\n  (props: DateRangePickerInputWithoutType, ref: Ref<DateInput>) => (\n    <DateRangePickerInput type=\"end\" {...props} ref={ref} />\n  ),\n);\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DateRangePickerSeparator: () => React.JSX.Element;

package/cjs/components/DateRangePicker/DateRangePickerSeparator.js

@@ -0,0 +1,3 @@
+"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

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

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,33 @@
+"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',
+      calendarCellSelectedBgColor: 'transparent',
+      calendarWrapperHeight: theme.rangeCalendarWrapperHeight
+    },
+    theme
+  );
+};
+
+var getMobileDateRangePickerTheme = exports.getMobileDateRangePickerTheme = function getMobileDateRangePickerTheme(theme) {
+  return _ThemeFactory.ThemeFactory.create(
+    {
+      calendarCellBg: 'transparent',
+      calendarCellSelectedBgColor: '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

@@ -0,0 +1 @@
+{"version":3,"names":["_ThemeFactory","require","getDateRangePickerTheme","exports","theme","ThemeFactory","create","calendarBottomSeparatorBorder","calendarCellBg","calendarCellSelectedBgColor","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      calendarCellSelectedBgColor: '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      calendarCellSelectedBgColor: '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,2BAA2B,EAAE,aAAa;MAC1CC,qBAAqB,EAAEN,KAAK,CAACO;IAC/B,CAAC;IACDP;EACF,CAAC;AACH,CAAC;;AAEM,IAAMQ,6BAA6B,GAAAT,OAAA,CAAAS,6BAAA,GAAG,SAAhCA,6BAA6BA,CAAIR,KAAY,EAAY;EACpE,OAAOC,0BAAY,CAACC,MAAM;IACxB;MACEE,cAAc,EAAE,aAAa;MAC7BC,2BAA2B,EAAE,aAAa;MAC1CI,wBAAwB,EAAET,KAAK,CAACU,8BAA8B;MAC9DC,oBAAoB,EAAEX,KAAK,CAACY,0BAA0B;MACtDC,sBAAsB,EAAEb,KAAK,CAACc,iCAAiC;MAC/DC,gBAAgB,EAAEf,KAAK,CAACgB,sBAAsB;MAC9CC,iBAAiB,EAAEjB,KAAK,CAACkB,4BAA4B;MACrDC,kBAAkB,EAAEnB,KAAK,CAACoB,6BAA6B;MACvDd,qBAAqB,EAAEN,KAAK,CAACqB,gCAAgC;MAC7DC,kBAAkB,EAAEtB,KAAK,CAACuB,wBAAwB;MAClDC,oBAAoB,EAAExB,KAAK,CAACyB;IAC9B,CAAC;IACDzB;EACF,CAAC;AACH,CAAC","ignoreList":[]}

package/cjs/components/DateRangePicker/__creevey__/DateRangePicker.creevey.mts

@@ -0,0 +1,155 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+kind('DateRangePicker', () => {
+  story('MinMax', () => {
+    test('opened', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="DateRangePicker__start"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened');
+    });
+
+    test('DateSelect month', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="DateRangePicker__start"]' }))
+        .perform();
+      await delay(1000);
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(
+          context.webdriver.findElement({
+            css: '[data-tid="MonthView__month"]:first-child [data-tid="MonthView__headerMonth"] [data-tid="DateSelect__caption"]',
+          }),
+        )
+        .move({ origin: context.webdriver.findElement({ css: 'body' }) })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'DateSelect month');
+    });
+
+    test('DateSelect year', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="DateRangePicker__start"]' }))
+        .perform();
+      await delay(1000);
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(
+          context.webdriver.findElement({
+            css: '[data-comp-name~="MonthView"]:first-child [data-tid="MonthView__headerYear"] [data-tid="DateSelect__caption"]',
+          }),
+        )
+        .move({ origin: context.webdriver.findElement({ css: 'body' }) })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'DateSelect year');
+    });
+  });
+
+  story('TodayButton', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } } });
+
+    test('opened', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="DateRangePicker__start"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened');
+    });
+  });
+
+  story('OptionalRange', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } } });
+
+    test('opened', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="DateRangePicker__start"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened');
+    });
+  });
+
+  story('OptionalRangeWithTodayButton', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } } });
+
+    test('opened', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="DateRangePicker__start"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened');
+    });
+  });
+
+  story('MenuPos', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } } });
+
+    test('opened position top', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="position-top"] [data-tid="DateRangePicker__start"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened position top');
+    });
+
+    test('opened position bottom', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(
+          context.webdriver.findElement({ css: '[data-tid="position-bottom"] [data-tid="DateRangePicker__start"]' }),
+        )
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened position bottom');
+    });
+  });
+
+  story('MobilePicker', () => {
+    test('MobilePicker on iphone opened', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="DateRangePicker__start"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'MobilePicker on iphone opened');
+    });
+  });
+});