@skbkontur/react-ui 0.0.0-044e274f2c → 0.0.0-07d08325b0

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

@@ -0,0 +1,53 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { CalendarDataTids } from "../../Calendar";
+export var styles = memoizeStyle({
+  root: function root() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
+  },
+  inputWrapper: function inputWrapper() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n\n      & > * {\n        flex: 1 1 50%;\n      }\n    "])));
+  },
+  inputWrapperWidth: function inputWrapperWidth(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      min-width: ", "px;\n    "])), parseInt(t.calendarCellWidth) * 7 + parseInt(t.calendarPaddingX) * 2);
+  },
+  inputWrapperWidthFull: function inputWrapperWidthFull() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n    "])));
+  },
+  inputVisuallyFocus: function inputVisuallyFocus(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      box-shadow: ", ";\n    "])), t.inputFocusShadow);
+  },
+  calendarWrapper: function calendarWrapper(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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 css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      width: auto;\n    "])));
+  },
+  rangeCalendarDay: function rangeCalendarDay() {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n      height: 100%;\n    "])));
+  },
+  rangeCalendarDayEnd: function rangeCalendarDayEnd(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\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            background: none;\n          }\n        }\n      }\n    "])), t.rangeCalendarCellEndBg, t.calendarCellBorderRadius, CalendarDataTids.dayCell, t.rangeCalendarCellEndColor);
+  },
+  rangeCalendarDayInHoveredPeriod: function rangeCalendarDayInHoveredPeriod(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.rangeCalendarCellBg);
+  },
+  rangeCalendarDayHoverInPeriod: function rangeCalendarDayHoverInPeriod(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      @media (hover: hover) {\n        &:hover [data-tid=", "] {\n          background: ", ";\n        }\n      }\n    "])), CalendarDataTids.dayCell, t.rangeCalendarCellHoverBg);
+  },
+  buttonWrap: function buttonWrap() {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      margin: 8px;\n\n      > * {\n        flex-grow: 1;\n      }\n\n      > *:not(:first-child) {\n        margin-left: 8px;\n      }\n    "])));
+  }
+});
+export function getFontSize(t, size) {
+  switch (size) {
+    case 'large':
+      return t.fontSizeLarge;
+    case 'medium':
+      return t.fontSizeMedium;
+    case 'small':
+    default:
+      return t.fontSizeSmall;
+  }
+}

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

@@ -0,0 +1 @@
+{"version":3,"names":["css","memoizeStyle","CalendarDataTids","styles","root","_templateObject","_taggedTemplateLiteralLoose","inputWrapper","_templateObject2","inputWrapperWidth","t","_templateObject3","parseInt","calendarCellWidth","calendarPaddingX","inputWrapperWidthFull","_templateObject4","inputVisuallyFocus","_templateObject5","inputFocusShadow","calendarWrapper","_templateObject6","pickerShadow","calendarWidthAuto","_templateObject7","rangeCalendarDay","_templateObject8","rangeCalendarDayEnd","_templateObject9","rangeCalendarCellEndBg","calendarCellBorderRadius","dayCell","rangeCalendarCellEndColor","rangeCalendarDayInHoveredPeriod","_templateObject10","rangeCalendarCellBg","rangeCalendarDayHoverInPeriod","_templateObject11","rangeCalendarCellHoverBg","buttonWrap","_templateObject12","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() {\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  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            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":";AACA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,SAASC,gBAAgB,QAAQ,aAAa;;AAE9C,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;EACjCG,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOJ,GAAG,CAAAK,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;EAGZ,CAAC;EACDC,YAAY,WAAAA,aAAA,EAAG;IACb,OAAOP,GAAG,CAAAQ,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;;;;;EAQZ,CAAC;EACDG,iBAAiB,WAAAA,kBAACC,CAAQ,EAAE;IAC1B,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAL,2BAAA;IACKM,QAAQ,CAACF,CAAC,CAACG,iBAAiB,CAAC,GAAG,CAAC,GAAGD,QAAQ,CAACF,CAAC,CAACI,gBAAgB,CAAC,GAAG,CAAC;;EAErF,CAAC;EACDC,qBAAqB,WAAAA,sBAAA,EAAG;IACtB,OAAOf,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;;;EAGZ,CAAC;EACDW,kBAAkB,WAAAA,mBAACP,CAAQ,EAAE;IAC3B,OAAOV,GAAG,CAAAkB,gBAAA,KAAAA,gBAAA,GAAAZ,2BAAA;IACMI,CAAC,CAACS,gBAAgB;;EAEpC,CAAC;EACDC,eAAe,WAAAA,gBAACV,CAAQ,EAAE;IACxB,OAAOV,GAAG,CAAAqB,gBAAA,KAAAA,gBAAA,GAAAf,2BAAA;IACMI,CAAC,CAACY,YAAY;;;;;;EAMhC,CAAC;EACDC,iBAAiB,WAAAA,kBAAA,EAAG;IAClB,OAAOvB,GAAG,CAAAwB,gBAAA,KAAAA,gBAAA,GAAAlB,2BAAA;;;EAGZ,CAAC;EACDmB,gBAAgB,WAAAA,iBAAA,EAAG;IACjB,OAAOzB,GAAG,CAAA0B,gBAAA,KAAAA,gBAAA,GAAApB,2BAAA;;;;EAIZ,CAAC;EACDqB,mBAAmB,WAAAA,oBAACjB,CAAQ,EAAE;IAC5B,OAAOV,GAAG,CAAA4B,gBAAA,KAAAA,gBAAA,GAAAtB,2BAAA;;;;;;;;;;IAUQI,CAAC,CAACmB,sBAAsB;IACrBnB,CAAC,CAACoB,wBAAwB;;;IAGjC5B,gBAAgB,CAAC6B,OAAO;IACzBrB,CAAC,CAACsB,yBAAyB;;;;;;;;;EAS1C,CAAC;EACDC,+BAA+B,WAAAA,gCAACvB,CAAQ,EAAE;IACxC,OAAOV,GAAG,CAAAkC,iBAAA,KAAAA,iBAAA,GAAA5B,2BAAA;IACMI,CAAC,CAACyB,mBAAmB;;EAEvC,CAAC;EACDC,6BAA6B,WAAAA,8BAAC1B,CAAQ,EAAE;IACtC,OAAOV,GAAG,CAAAqC,iBAAA,KAAAA,iBAAA,GAAA/B,2BAAA;;IAEcJ,gBAAgB,CAAC6B,OAAO;IAC5BrB,CAAC,CAAC4B,wBAAwB;;;;EAIhD,CAAC;EACDC,UAAU,WAAAA,WAAA,EAAG;IACX,OAAOvC,GAAG,CAAAwC,iBAAA,KAAAA,iBAAA,GAAAlC,2BAAA;;;;;;;;;;;;EAYZ;AACF,CAAC,CAAC;;AAEF,OAAO,SAASmC,WAAWA,CAAC/B,CAAQ,EAAEgC,IAAe,EAAE;EACrD,QAAQA,IAAI;IACV,KAAK,OAAO;MACV,OAAOhC,CAAC,CAACiC,aAAa;IACxB,KAAK,QAAQ;MACX,OAAOjC,CAAC,CAACkC,cAAc;IACzB,KAAK,OAAO;IACZ;MACE,OAAOlC,CAAC,CAACmC,aAAa;EAC1B;AACF","ignoreList":[]}

package/components/DateRangePicker/DateRangePicker.styles/package.json

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

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

@@ -0,0 +1,17 @@
+import { SizeProp } from '../../lib/types/props';
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(): string;
+    inputWrapper(): string;
+    inputWrapperWidth(t: Theme): string;
+    inputWrapperWidthFull(): string;
+    inputVisuallyFocus(t: Theme): string;
+    calendarWrapper(t: Theme): string;
+    calendarWidthAuto(): string;
+    rangeCalendarDay(): string;
+    rangeCalendarDayEnd(t: Theme): string;
+    rangeCalendarDayInHoveredPeriod(t: Theme): string;
+    rangeCalendarDayHoverInPeriod(t: Theme): string;
+    buttonWrap(): string;
+};
+export declare function getFontSize(t: Theme, size?: SizeProp): string;

package/components/DateRangePicker/DateRangePickerContext/DateRangePickerContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export var DateRangePickerContext = /*#__PURE__*/React.createContext({});
+DateRangePickerContext.displayName = 'DateRangePickerContext';

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","DateRangePickerContext","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":"AAAA,OAAOA,KAAK,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCzB,OAAO,IAAMC,sBAAsB,gBAAGD,KAAK,CAACE,aAAa,CAAC,CAAC,CAAgC,CAAC;;AAE5FD,sBAAsB,CAACE,WAAW,GAAG,wBAAwB","ignoreList":[]}

package/components/DateRangePicker/DateRangePickerContext/package.json

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

package/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/components/DateRangePicker/DateRangePickerInput/DateRangePickerInput.js

@@ -0,0 +1,145 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { forwardRef, useContext, useEffect, useImperativeHandle } from 'react';
+import { useLocaleForControl } from "../../../lib/locale/useLocaleForControl";
+import { DateInput } from "../../DateInput";
+import { useResponsiveLayout } from "../../ResponsiveLayout";
+import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+import { isNonNullable, isNullable } from "../../../lib/utils";
+import { DateRangePickerContext } from "../DateRangePickerContext";
+import { DateRangePickerDataTids } from "../DateRangePicker";
+import { DateRangePickerLocaleHelper } from "../locale";
+var DateRangePickerInput = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useContext = useContext(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 = useLocaleForControl('DateRangePicker', DateRangePickerLocaleHelper);
+  var _useResponsiveLayout = useResponsiveLayout(),
+    isMobile = _useResponsiveLayout.isMobile;
+  useImperativeHandle(ref, function () {
+    return isStart ? startRef.current : endRef.current;
+  }, []);
+  useEffect(function () {
+    if (isNullable(props.value)) {
+      return;
+    }
+    if (isStart) {
+      setStartValue(props.value);
+    } else if (isEnd) {
+      setEndValue(props.value);
+    }
+  }, [props.value]);
+  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]);
+  useEffect(function () {
+    if (isStart && startValue !== props.value && isNonNullable(startValue)) {
+      props.onValueChange == null || props.onValueChange(startValue);
+    }
+  }, [startValue]);
+  useEffect(function () {
+    if (isEnd && endValue !== props.value && isNonNullable(endValue)) {
+      props.onValueChange == null || props.onValueChange(endValue);
+    }
+  }, [endValue]);
+  var commonProps = _extends({
+    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.createElement(DateInput, _extends({}, commonProps, {
+          value: props.value || '',
+          "data-tid": DateRangePickerDataTids.start,
+          "aria-label": props['aria-label'] || locale.startDateLabel,
+          ref: startRef
+        }))
+      );
+    case 'end':
+      return /*#__PURE__*/(
+        React.createElement(DateInput, _extends({}, commonProps, {
+          value: props.value || '',
+          "data-tid": DateRangePickerDataTids.end,
+          "aria-label": props['aria-label'] || locale.endDateLabel,
+          ref: endRef
+        }))
+      );
+  }
+});
+export var DateRangePickerStart = forwardRefAndName('DateRangePickerStart', function (props, ref) {
+  return /*#__PURE__*/(
+    React.createElement(DateRangePickerInput, _extends({
+      type: "start"
+    }, props, {
+      ref: ref
+    }))
+  );
+});
+export var DateRangePickerEnd = forwardRefAndName('DateRangePickerEnd', function (props, ref) {
+  return /*#__PURE__*/(
+    React.createElement(DateRangePickerInput, _extends({
+      type: "end"
+    }, props, {
+      ref: ref
+    }))
+  );
+});

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","forwardRef","useContext","useEffect","useImperativeHandle","useLocaleForControl","DateInput","useResponsiveLayout","forwardRefAndName","isNonNullable","isNullable","DateRangePickerContext","DateRangePickerDataTids","DateRangePickerLocaleHelper","DateRangePickerInput","props","ref","_useContext","minDate","maxDate","startValue","endValue","size","setStartValue","setStartOptional","setStartDisabled","setEndValue","setEndOptional","setEndDisabled","setMinDate","setMaxDate","setFocusInput","open","close","dateRangePickerRef","startRef","endRef","isStart","type","isEnd","locale","_useResponsiveLayout","isMobile","current","value","optional","disabled","onValueChange","commonProps","_extends","withIcon","onClick","onFocus","e","onBlur","_dateRangePickerRef$c","nextFocusedElement","relatedTarget","contains","createElement","start","startDateLabel","end","endDateLabel","DateRangePickerStart","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/components/DateRangePicker/DateRangePickerInput/package.json

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

package/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/components/DateRangePicker/DateRangePickerSeparator/DateRangePickerSeparator.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export var DateRangePickerSeparator = function DateRangePickerSeparator() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0\u2014\xA0");
+};

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","DateRangePickerSeparator","createElement","Fragment"],"sources":["DateRangePickerSeparator.tsx"],"sourcesContent":["import React from 'react';\n\nexport const DateRangePickerSeparator = () => <>&nbsp;—&nbsp;</>;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,OAAO,IAAMC,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAA,uBAASD,KAAA,CAAAE,aAAA,CAAAF,KAAA,CAAAG,QAAA,QAAE,gBAAe,CAAC","ignoreList":[]}

package/components/DateRangePicker/DateRangePickerSeparator/package.json

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

package/components/DateRangePicker/DateRangePickerSeparator.d.ts

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

package/components/DateRangePicker/DateRangePickerTheme/DateRangePickerTheme.js

@@ -0,0 +1,24 @@
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+export var getDateRangePickerTheme = function getDateRangePickerTheme(theme) {
+  return ThemeFactory.create({
+    calendarBottomSeparatorBorder: 'none',
+    calendarCellBg: 'transparent',
+    calendarCellSelectedBgColor: 'transparent',
+    calendarWrapperHeight: theme.rangeCalendarWrapperHeight
+  }, theme);
+};
+export var getMobileDateRangePickerTheme = function getMobileDateRangePickerTheme(theme) {
+  return 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/components/DateRangePicker/DateRangePickerTheme/DateRangePickerTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ThemeFactory","getDateRangePickerTheme","theme","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":"AAAA,SAASA,YAAY,QAAQ,gCAAgC;;;AAG7D,OAAO,IAAMC,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAAIC,KAAY,EAAY;EAC9D,OAAOF,YAAY,CAACG,MAAM;IACxB;MACEC,6BAA6B,EAAE,MAAM;MACrCC,cAAc,EAAE,aAAa;MAC7BC,2BAA2B,EAAE,aAAa;MAC1CC,qBAAqB,EAAEL,KAAK,CAACM;IAC/B,CAAC;IACDN;EACF,CAAC;AACH,CAAC;;AAED,OAAO,IAAMO,6BAA6B,GAAG,SAAhCA,6BAA6BA,CAAIP,KAAY,EAAY;EACpE,OAAOF,YAAY,CAACG,MAAM;IACxB;MACEE,cAAc,EAAE,aAAa;MAC7BC,2BAA2B,EAAE,aAAa;MAC1CI,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":[]}

package/components/DateRangePicker/DateRangePickerTheme/package.json

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

package/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/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');
+    });
+  });
+});