@salutejs/plasma-new-hope 0.326.1-canary.2043.15852251108.0 → 0.327.0-canary.1741.15743877104.0

package/es/components/DatePicker/RangeDate/RangeDate.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React, { forwardRef, useRef, useState, useEffect, useLayoutEffect, useCallback, createRef } from 'react';
 import cls from 'classnames';
 import { getDateFormatDelimiter } from '../utils/dateHelper.js';
@@ -16,549 +16,478 @@ import { getFormattedDates } from '../utils/getFormattedDates.js';
 import { noop } from '../../../utils/noop.js';
 import { getSortedValues } from '../../Calendar/utils/calendarRangeHelper.js';
 
-var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "value", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "hasRequiredIndicator", "format", "lang", "maskWithFormat", "min", "max", "renderFromDate", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "calendarContainerWidth", "calendarContainerHeight", "stretched", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
-var datePickerRangeRoot = function datePickerRangeRoot(Root) {
-  return /*#__PURE__*/forwardRef(function (_ref, ref) {
-    var _rangeRef$current, _rangeRef$current2;
-    var className = _ref.className,
-      autoComplete = _ref.autoComplete,
-      _ref$isDoubleCalendar = _ref.isDoubleCalendar,
-      isDoubleCalendar = _ref$isDoubleCalendar === void 0 ? false : _ref$isDoubleCalendar,
-      _ref$opened = _ref.opened,
-      opened = _ref$opened === void 0 ? false : _ref$opened,
-      externalValue = _ref.value,
-      label = _ref.label,
-      leftHelper = _ref.leftHelper,
-      contentLeft = _ref.contentLeft,
-      contentRight = _ref.contentRight,
-      view = _ref.view,
-      size = _ref.size,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      name = _ref.name,
-      _ref$dividerVariant = _ref.dividerVariant,
-      dividerVariant = _ref$dividerVariant === void 0 ? 'dash' : _ref$dividerVariant,
-      dividerIcon = _ref.dividerIcon,
-      _ref$defaultFirstDate = _ref.defaultFirstDate,
-      defaultFirstDate = _ref$defaultFirstDate === void 0 ? '' : _ref$defaultFirstDate,
-      _ref$defaultSecondDat = _ref.defaultSecondDate,
-      defaultSecondDate = _ref$defaultSecondDat === void 0 ? '' : _ref$defaultSecondDat,
-      firstValueError = _ref.firstValueError,
-      secondValueError = _ref.secondValueError,
-      firstValueSuccess = _ref.firstValueSuccess,
-      secondValueSuccess = _ref.secondValueSuccess,
-      firstPlaceholder = _ref.firstPlaceholder,
-      secondPlaceholder = _ref.secondPlaceholder,
-      firstTextfieldContentLeft = _ref.firstTextfieldContentLeft,
-      firstTextfieldContentRight = _ref.firstTextfieldContentRight,
-      secondTextfieldContentLeft = _ref.secondTextfieldContentLeft,
-      secondTextfieldContentRight = _ref.secondTextfieldContentRight,
-      firstTextfieldTextBefore = _ref.firstTextfieldTextBefore,
-      secondTextfieldTextBefore = _ref.secondTextfieldTextBefore,
-      firstTextfieldTextAfter = _ref.firstTextfieldTextAfter,
-      secondTextfieldTextAfter = _ref.secondTextfieldTextAfter,
-      required = _ref.required,
-      _ref$requiredPlacemen = _ref.requiredPlacement,
-      requiredPlacement = _ref$requiredPlacemen === void 0 ? 'right' : _ref$requiredPlacemen,
-      _ref$hasRequiredIndic = _ref.hasRequiredIndicator,
-      hasRequiredIndicator = _ref$hasRequiredIndic === void 0 ? true : _ref$hasRequiredIndic,
-      _ref$format = _ref.format,
-      format = _ref$format === void 0 ? 'DD.MM.YYYY' : _ref$format,
-      _ref$lang = _ref.lang,
-      lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
-      maskWithFormat = _ref.maskWithFormat,
-      min = _ref.min,
-      max = _ref.max,
-      renderFromDate = _ref.renderFromDate,
-      _ref$includeEdgeDates = _ref.includeEdgeDates,
-      includeEdgeDates = _ref$includeEdgeDates === void 0 ? false : _ref$includeEdgeDates,
-      eventList = _ref.eventList,
-      disabledList = _ref.disabledList,
-      eventMonthList = _ref.eventMonthList,
-      disabledMonthList = _ref.disabledMonthList,
-      eventQuarterList = _ref.eventQuarterList,
-      disabledQuarterList = _ref.disabledQuarterList,
-      eventYearList = _ref.eventYearList,
-      disabledYearList = _ref.disabledYearList,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'Days' : _ref$type,
-      _ref$frame = _ref.frame,
-      frame = _ref$frame === void 0 ? 'document' : _ref$frame,
-      _ref$usePortal = _ref.usePortal,
-      usePortal = _ref$usePortal === void 0 ? false : _ref$usePortal,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? ['top', 'bottom'] : _ref$placement,
-      _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
-      closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
-      _ref$closeOnEsc = _ref.closeOnEsc,
-      closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
-      _ref$closeAfterDateSe = _ref.closeAfterDateSelect,
-      closeAfterDateSelect = _ref$closeAfterDateSe === void 0 ? true : _ref$closeAfterDateSe,
-      offset = _ref.offset,
-      calendarContainerWidth = _ref.calendarContainerWidth,
-      calendarContainerHeight = _ref.calendarContainerHeight,
-      stretched = _ref.stretched,
-      onToggle = _ref.onToggle,
-      onChange = _ref.onChange,
-      onChangeFirstValue = _ref.onChangeFirstValue,
-      onChangeSecondValue = _ref.onChangeSecondValue,
-      onCommitFirstDate = _ref.onCommitFirstDate,
-      onCommitSecondDate = _ref.onCommitSecondDate,
-      onFocusFirstTextfield = _ref.onFocusFirstTextfield,
-      onFocusSecondTextfield = _ref.onFocusSecondTextfield,
-      _onBlurFirstTextfield = _ref.onBlurFirstTextfield,
-      _onBlurSecondTextfield = _ref.onBlurSecondTextfield,
-      rest = _objectWithoutProperties(_ref, _excluded);
-    if (externalValue !== null && externalValue !== void 0 && externalValue.length && (defaultFirstDate || defaultSecondDate)) {
-      throw new Error("Controlled DatePicker can't have `default{First|Second}Date`, use `value` instead");
-    }
-    var rangeRef = ref && 'current' in ref ? ref : /*#__PURE__*/createRef();
-    var rootRef = useRef(null);
-    var innerRefFirst = useRef(null);
-    var innerRefSecond = useRef(null);
-    var _useState = useState(rangeRef === null || rangeRef === void 0 || (_rangeRef$current = rangeRef.current) === null || _rangeRef$current === void 0 ? void 0 : _rangeRef$current.firstTextField()),
-      _useState2 = _slicedToArray(_useState, 2),
-      firstInputRef = _useState2[0],
-      setFirstInputRef = _useState2[1];
-    var _useState3 = useState(rangeRef === null || rangeRef === void 0 || (_rangeRef$current2 = rangeRef.current) === null || _rangeRef$current2 === void 0 ? void 0 : _rangeRef$current2.secondTextField()),
-      _useState4 = _slicedToArray(_useState3, 2),
-      secondInputRef = _useState4[0],
-      setSecondInputRef = _useState4[1];
-    var _useState5 = useState(opened),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isInnerOpen = _useState6[0],
-      setIsInnerOpen = _useState6[1];
-    var dateFormatDelimiter = getDateFormatDelimiter(format);
-    var _ref2 = externalValue || [],
-      _ref3 = _slicedToArray(_ref2, 2),
-      startExternalValue = _ref3[0],
-      endExternalValue = _ref3[1];
-    var startInitialValues = getFormattedDates({
-      value: startExternalValue || defaultFirstDate,
-      delimiter: dateFormatDelimiter,
-      lang: lang,
-      format: format,
-      includeEdgeDates: includeEdgeDates,
-      min: min,
-      max: max
-    });
-    var endInitialValues = getFormattedDates({
-      value: endExternalValue || defaultSecondDate,
-      delimiter: dateFormatDelimiter,
-      lang: lang,
-      format: format,
-      includeEdgeDates: includeEdgeDates,
-      min: min,
-      max: max
-    });
-    var _useState7 = useState({
-        calendar: startInitialValues.originalDate,
-        input: startInitialValues.formattedDate
-      }),
-      _useState8 = _slicedToArray(_useState7, 2),
-      correctStartDates = _useState8[0],
-      setCorrectStartDates = _useState8[1];
-    var _useState9 = useState({
-        calendar: endInitialValues.originalDate,
-        input: endInitialValues.formattedDate
-      }),
-      _useState10 = _slicedToArray(_useState9, 2),
-      correctEndDates = _useState10[0],
-      setCorrectEndDates = _useState10[1];
-    var _useState11 = useState(startInitialValues.originalDate),
-      _useState12 = _slicedToArray(_useState11, 2),
-      calendarFirstValue = _useState12[0],
-      setCalendarFirstValue = _useState12[1];
-    var _useState13 = useState(startInitialValues.formattedDate),
-      _useState14 = _slicedToArray(_useState13, 2),
-      inputFirstValue = _useState14[0],
-      setInputFirstValue = _useState14[1];
-    var _useState15 = useState(endInitialValues.originalDate),
-      _useState16 = _slicedToArray(_useState15, 2),
-      calendarSecondValue = _useState16[0],
-      setCalendarSecondValue = _useState16[1];
-    var _useState17 = useState(endInitialValues.formattedDate),
-      _useState18 = _slicedToArray(_useState17, 2),
-      inputSecondValue = _useState18[0],
-      setInputSecondValue = _useState18[1];
-    var _useState19 = useState(Boolean(calendarFirstValue && calendarSecondValue)),
-      _useState20 = _slicedToArray(_useState19, 2),
-      fullDateEntered = _useState20[0],
-      setFullDateEntered = _useState20[1];
-    var _useState21 = useState(false),
-      _useState22 = _slicedToArray(_useState21, 2),
-      secondTextFieldClicked = _useState22[0],
-      setSecondTextFieldClicked = _useState22[1];
-    var rangeErrorClass = firstValueError || secondValueError ? classes.datePickerError : undefined;
-    var rangeSuccessClass = firstValueSuccess || secondValueSuccess ? classes.datePickerSuccess : undefined;
-    var setFirstInputValue = function setFirstInputValue(value) {
-      setInputFirstValue(value);
-      if (onChange) {
-        onChange({
-          target: {
-            value: "".concat(value, " - ").concat(inputSecondValue),
-            name: name
-          }
-        });
-      }
-    };
-    var setSecondInputValue = function setSecondInputValue(value) {
-      setInputSecondValue(value);
-      if (onChange) {
-        onChange({
-          target: {
-            value: "".concat(inputFirstValue, " - ").concat(value),
-            name: name
-          }
-        });
-      }
-    };
-    var _useDatePicker = useDatePicker({
-        currentValue: inputFirstValue,
-        format: format,
-        lang: lang,
-        disabled: disabled,
-        readOnly: readOnly,
-        maskWithFormat: maskWithFormat,
-        valueError: firstValueError,
-        valueSuccess: firstValueSuccess,
-        name: name,
-        type: type,
-        min: min,
-        max: max,
-        includeEdgeDates: includeEdgeDates,
-        dateFormatDelimiter: dateFormatDelimiter,
-        setCorrectDates: setCorrectStartDates,
-        setInputValue: setFirstInputValue,
-        setCalendarValue: setCalendarFirstValue,
-        onChangeValue: onChangeFirstValue,
-        onCommitDate: onCommitFirstDate
-      }),
-      handleChangeFirstValue = _useDatePicker.handleChangeValue,
-      handleFirstCalendarPick = _useDatePicker.handleCalendarPick,
-      handleSearchFirst = _useDatePicker.handleSearch,
-      updateExternalFirstDate = _useDatePicker.updateExternalDate;
-    var _useDatePicker2 = useDatePicker({
-        currentValue: inputSecondValue,
-        format: format,
-        lang: lang,
-        disabled: disabled,
-        readOnly: readOnly,
-        maskWithFormat: maskWithFormat,
-        valueError: secondValueError,
-        valueSuccess: secondValueSuccess,
-        name: name,
-        type: type,
-        min: min,
-        max: max,
-        includeEdgeDates: includeEdgeDates,
-        dateFormatDelimiter: dateFormatDelimiter,
-        setCorrectDates: setCorrectEndDates,
-        setInputValue: setSecondInputValue,
-        setCalendarValue: setCalendarSecondValue,
-        onChangeValue: onChangeSecondValue,
-        onCommitDate: onCommitSecondDate
-      }),
-      handleChangeSecondValue = _useDatePicker2.handleChangeValue,
-      handleSecondCalendarPick = _useDatePicker2.handleCalendarPick,
-      handleSearchSecond = _useDatePicker2.handleSearch,
-      updateExternalSecondDate = _useDatePicker2.updateExternalDate;
-    var handleToggle = function handleToggle(currentOpened, event) {
-      var _firstInputRef$curren, _secondInputRef$curre;
-      if (disabled || readOnly) {
-        return;
-      }
-      var isCalendarOpen = (firstInputRef !== null && firstInputRef !== void 0 && (_firstInputRef$curren = firstInputRef.current) !== null && _firstInputRef$curren !== void 0 && _firstInputRef$curren.contains((event === null || event === void 0 ? void 0 : event.target) || null) || secondInputRef !== null && secondInputRef !== void 0 && (_secondInputRef$curre = secondInputRef.current) !== null && _secondInputRef$curre !== void 0 && _secondInputRef$curre.contains((event === null || event === void 0 ? void 0 : event.target) || null)) && (event === null || event === void 0 ? void 0 : event.code) !== keys.Escape ? true : currentOpened;
-      if (!isCalendarOpen) {
-        if (calendarFirstValue && !calendarSecondValue) {
-          var _secondInputRef$curre2;
-          secondInputRef === null || secondInputRef === void 0 || (_secondInputRef$curre2 = secondInputRef.current) === null || _secondInputRef$curre2 === void 0 || _secondInputRef$curre2.focus();
+const datePickerRangeRoot = Root => /*#__PURE__*/forwardRef(({
+  className,
+  autoComplete,
+  isDoubleCalendar = false,
+  opened = false,
+  value: externalValue,
+  label,
+  leftHelper,
+  contentLeft,
+  contentRight,
+  view,
+  size,
+  readOnly = false,
+  disabled = false,
+  name,
+  dividerVariant = 'dash',
+  dividerIcon,
+  defaultFirstDate = '',
+  defaultSecondDate = '',
+  firstValueError,
+  secondValueError,
+  firstValueSuccess,
+  secondValueSuccess,
+  firstPlaceholder,
+  secondPlaceholder,
+  firstTextfieldContentLeft,
+  firstTextfieldContentRight,
+  secondTextfieldContentLeft,
+  secondTextfieldContentRight,
+  firstTextfieldTextBefore,
+  secondTextfieldTextBefore,
+  firstTextfieldTextAfter,
+  secondTextfieldTextAfter,
+  required,
+  requiredPlacement = 'right',
+  hasRequiredIndicator = true,
+  format = 'DD.MM.YYYY',
+  lang = 'ru',
+  maskWithFormat,
+  min,
+  max,
+  renderFromDate,
+  includeEdgeDates = false,
+  eventList,
+  disabledList,
+  eventMonthList,
+  disabledMonthList,
+  eventQuarterList,
+  disabledQuarterList,
+  eventYearList,
+  disabledYearList,
+  type = 'Days',
+  frame = 'document',
+  usePortal = false,
+  placement = ['top', 'bottom'],
+  closeOnOverlayClick = true,
+  closeOnEsc = true,
+  closeAfterDateSelect = true,
+  offset,
+  calendarContainerWidth,
+  calendarContainerHeight,
+  stretched,
+  onToggle,
+  onChange,
+  onChangeFirstValue,
+  onChangeSecondValue,
+  onCommitFirstDate,
+  onCommitSecondDate,
+  onFocusFirstTextfield,
+  onFocusSecondTextfield,
+  onBlurFirstTextfield,
+  onBlurSecondTextfield,
+  ...rest
+}, ref) => {
+  if (externalValue?.length && (defaultFirstDate || defaultSecondDate)) {
+    throw new Error("Controlled DatePicker can't have `default{First|Second}Date`, use `value` instead");
+  }
+  const rangeRef = ref && 'current' in ref ? ref : /*#__PURE__*/createRef();
+  const rootRef = useRef(null);
+  const innerRefFirst = useRef(null);
+  const innerRefSecond = useRef(null);
+  const [firstInputRef, setFirstInputRef] = useState(rangeRef?.current?.firstTextField());
+  const [secondInputRef, setSecondInputRef] = useState(rangeRef?.current?.secondTextField());
+  const [isInnerOpen, setIsInnerOpen] = useState(opened);
+  const dateFormatDelimiter = getDateFormatDelimiter(format);
+  const [startExternalValue, endExternalValue] = externalValue || [];
+  const startInitialValues = getFormattedDates({
+    value: startExternalValue || defaultFirstDate,
+    delimiter: dateFormatDelimiter,
+    lang,
+    format,
+    includeEdgeDates,
+    min,
+    max
+  });
+  const endInitialValues = getFormattedDates({
+    value: endExternalValue || defaultSecondDate,
+    delimiter: dateFormatDelimiter,
+    lang,
+    format,
+    includeEdgeDates,
+    min,
+    max
+  });
+  const [correctStartDates, setCorrectStartDates] = useState({
+    calendar: startInitialValues.originalDate,
+    input: startInitialValues.formattedDate
+  });
+  const [correctEndDates, setCorrectEndDates] = useState({
+    calendar: endInitialValues.originalDate,
+    input: endInitialValues.formattedDate
+  });
+  const [calendarFirstValue, setCalendarFirstValue] = useState(startInitialValues.originalDate);
+  const [inputFirstValue, setInputFirstValue] = useState(startInitialValues.formattedDate);
+  const [calendarSecondValue, setCalendarSecondValue] = useState(endInitialValues.originalDate);
+  const [inputSecondValue, setInputSecondValue] = useState(endInitialValues.formattedDate);
+  const [fullDateEntered, setFullDateEntered] = useState(Boolean(calendarFirstValue && calendarSecondValue));
+  const [secondTextFieldClicked, setSecondTextFieldClicked] = useState(false);
+  const rangeErrorClass = firstValueError || secondValueError ? classes.datePickerError : undefined;
+  const rangeSuccessClass = firstValueSuccess || secondValueSuccess ? classes.datePickerSuccess : undefined;
+  const setFirstInputValue = value => {
+    setInputFirstValue(value);
+    if (onChange) {
+      onChange({
+        target: {
+          value: `${value} - ${inputSecondValue}`,
+          name
         }
-        if (calendarSecondValue && !calendarFirstValue) {
-          var _firstInputRef$curren2;
-          firstInputRef === null || firstInputRef === void 0 || (_firstInputRef$curren2 = firstInputRef.current) === null || _firstInputRef$curren2 === void 0 || _firstInputRef$curren2.focus();
+      });
+    }
+  };
+  const setSecondInputValue = value => {
+    setInputSecondValue(value);
+    if (onChange) {
+      onChange({
+        target: {
+          value: `${inputFirstValue} - ${value}`,
+          name
         }
+      });
+    }
+  };
+  const {
+    handleChangeValue: handleChangeFirstValue,
+    handleCalendarPick: handleFirstCalendarPick,
+    handleSearch: handleSearchFirst,
+    updateExternalDate: updateExternalFirstDate
+  } = useDatePicker({
+    currentValue: inputFirstValue,
+    format,
+    lang,
+    disabled,
+    readOnly,
+    maskWithFormat,
+    valueError: firstValueError,
+    valueSuccess: firstValueSuccess,
+    name,
+    type,
+    min,
+    max,
+    includeEdgeDates,
+    dateFormatDelimiter,
+    setCorrectDates: setCorrectStartDates,
+    setInputValue: setFirstInputValue,
+    setCalendarValue: setCalendarFirstValue,
+    onChangeValue: onChangeFirstValue,
+    onCommitDate: onCommitFirstDate
+  });
+  const {
+    handleChangeValue: handleChangeSecondValue,
+    handleCalendarPick: handleSecondCalendarPick,
+    handleSearch: handleSearchSecond,
+    updateExternalDate: updateExternalSecondDate
+  } = useDatePicker({
+    currentValue: inputSecondValue,
+    format,
+    lang,
+    disabled,
+    readOnly,
+    maskWithFormat,
+    valueError: secondValueError,
+    valueSuccess: secondValueSuccess,
+    name,
+    type,
+    min,
+    max,
+    includeEdgeDates,
+    dateFormatDelimiter,
+    setCorrectDates: setCorrectEndDates,
+    setInputValue: setSecondInputValue,
+    setCalendarValue: setCalendarSecondValue,
+    onChangeValue: onChangeSecondValue,
+    onCommitDate: onCommitSecondDate
+  });
+  const handleToggle = (currentOpened, event) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    const isCalendarOpen = (firstInputRef?.current?.contains(event?.target || null) || secondInputRef?.current?.contains(event?.target || null)) && event?.code !== keys.Escape ? true : currentOpened;
+    if (!isCalendarOpen) {
+      if (calendarFirstValue && !calendarSecondValue) {
+        secondInputRef?.current?.focus();
       }
-      if (!isCalendarOpen) {
-        setSecondTextFieldClicked(false);
-      }
-      if (onToggle) {
-        return onToggle(isCalendarOpen, event);
+      if (calendarSecondValue && !calendarFirstValue) {
+        firstInputRef?.current?.focus();
       }
-      setIsInnerOpen(isCalendarOpen);
-    };
-    var handleFocusFirstTextField = function handleFocusFirstTextField(event) {
-      onFocusFirstTextfield === null || onFocusFirstTextfield === void 0 || onFocusFirstTextfield(event);
+    }
+    if (!isCalendarOpen) {
       setSecondTextFieldClicked(false);
-    };
-    var handleFocusSecondTextField = function handleFocusSecondTextField(event) {
-      onFocusSecondTextfield === null || onFocusSecondTextfield === void 0 || onFocusSecondTextfield(event);
-      setSecondTextFieldClicked(true);
-    };
-    var handleBlur = function handleBlur(event, outerHandler) {
-      if (!inputFirstValue || !inputSecondValue) {
-        outerHandler === null || outerHandler === void 0 || outerHandler(event);
-        return;
-      }
-      var _getFormattedDates = getFormattedDates({
-          value: inputFirstValue,
-          delimiter: dateFormatDelimiter,
-          lang: lang,
-          format: format,
-          includeEdgeDates: includeEdgeDates,
-          min: min,
-          max: max
-        }),
-        startOriginalDate = _getFormattedDates.originalDate;
-      var _getFormattedDates2 = getFormattedDates({
-          value: inputSecondValue,
-          delimiter: dateFormatDelimiter,
-          lang: lang,
-          format: format,
-          includeEdgeDates: includeEdgeDates,
-          min: min,
-          max: max
-        }),
-        endOriginalDate = _getFormattedDates2.originalDate;
-      if (!calendarFirstValue && correctStartDates.calendar) {
-        startOriginalDate = new Date(correctStartDates.calendar);
-      }
-      if (!calendarSecondValue && correctEndDates.calendar) {
-        endOriginalDate = new Date(correctEndDates.calendar);
-      }
-      var _getSortedValues = getSortedValues([startOriginalDate, endOriginalDate]),
-        _getSortedValues2 = _slicedToArray(_getSortedValues, 2),
-        startValue = _getSortedValues2[0],
-        endValue = _getSortedValues2[1];
-      var _getFormattedDates3 = getFormattedDates({
-          value: startValue || null,
-          delimiter: dateFormatDelimiter,
-          lang: lang,
-          format: format,
-          includeEdgeDates: includeEdgeDates,
-          min: min,
-          max: max
-        }),
-        startFormattedDate = _getFormattedDates3.formattedDate;
-      var _getFormattedDates4 = getFormattedDates({
-          value: endValue || null,
-          delimiter: dateFormatDelimiter,
-          lang: lang,
-          format: format,
-          includeEdgeDates: includeEdgeDates,
-          min: min,
-          max: max
-        }),
-        endFormattedDate = _getFormattedDates4.formattedDate;
-      setFirstInputValue(startFormattedDate);
-      setSecondInputValue(endFormattedDate);
-      setCalendarFirstValue(startOriginalDate);
-      setCalendarSecondValue(endOriginalDate);
-      outerHandler === null || outerHandler === void 0 || outerHandler(event);
-    };
-    var _useKeyNavigation = useKeyNavigation({
-        isCalendarOpen: isInnerOpen,
-        format: format,
-        maskWithFormat: maskWithFormat,
-        delimiter: dateFormatDelimiter,
-        closeOnEsc: closeOnEsc,
-        onToggle: handleToggle
-      }),
-      onKeyDown = _useKeyNavigation.onKeyDown;
-    var handleChangeStartOfRange = function handleChangeStartOfRange(chosenDate, dateInfo) {
-      if (!fullDateEntered) {
-        handleFirstCalendarPick(chosenDate, dateInfo);
-        handleSecondCalendarPick(undefined);
-        return;
-      }
-      var prevValue = secondTextFieldClicked ? calendarFirstValue : calendarSecondValue;
-      var _getSortedValues3 = getSortedValues([prevValue, chosenDate]),
-        _getSortedValues4 = _slicedToArray(_getSortedValues3, 2),
-        first = _getSortedValues4[0],
-        second = _getSortedValues4[1];
-      handleFirstCalendarPick(first, dateInfo);
-      handleSecondCalendarPick(second, dateInfo);
-      if (!firstValueError && !secondValueError && closeAfterDateSelect) {
-        handleToggle(false);
-      }
-    };
-    var handleChangeCalendarValue = function handleChangeCalendarValue(_ref4, dateInfo) {
-      var _ref5 = _slicedToArray(_ref4, 2),
-        firstDate = _ref5[0],
-        secondDate = _ref5[1];
-      if (firstDate) {
-        handleFirstCalendarPick(firstDate, dateInfo);
-      }
-      if (secondDate) {
-        handleSecondCalendarPick(secondDate, dateInfo);
-      }
-      if (firstDate && secondDate && !firstValueError && !secondValueError && closeAfterDateSelect) {
-        handleToggle(false);
-      }
-    };
-    var RangeComponent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledRange, {
-      ref: rangeRef,
-      autoComplete: autoComplete,
-      dividerIcon: dividerIcon,
-      dividerVariant: dividerVariant,
-      label: label,
-      required: required,
-      requiredPlacement: requiredPlacement,
-      hasRequiredIndicator: hasRequiredIndicator,
-      disabled: disabled,
-      readOnly: !disabled && readOnly,
-      firstPlaceholder: firstPlaceholder,
-      secondPlaceholder: secondPlaceholder,
-      contentLeft: contentLeft,
-      contentRight: contentRight,
-      firstTextfieldTextBefore: firstTextfieldTextBefore,
-      secondTextfieldTextBefore: secondTextfieldTextBefore,
-      firstTextfieldTextAfter: firstTextfieldTextAfter,
-      secondTextfieldTextAfter: secondTextfieldTextAfter,
-      firstTextfieldContentLeft: firstTextfieldContentLeft,
-      firstTextfieldContentRight: firstTextfieldContentRight,
-      secondTextfieldContentLeft: secondTextfieldContentLeft,
-      secondTextfieldContentRight: secondTextfieldContentRight,
-      firstValue: inputFirstValue,
-      secondValue: inputSecondValue,
-      firstValueError: firstValueError,
-      secondValueError: secondValueError,
-      firstValueSuccess: firstValueSuccess,
-      secondValueSuccess: secondValueSuccess,
-      onChangeFirstValue: handleChangeFirstValue,
-      onChangeSecondValue: handleChangeSecondValue,
-      name: name,
-      onSearchFirstValue: function onSearchFirstValue(_, date) {
-        handleSearchFirst(String(date));
-        if (!calendarSecondValue || secondValueError) {
-          var _rangeRef$current3;
-          rangeRef === null || rangeRef === void 0 || (_rangeRef$current3 = rangeRef.current) === null || _rangeRef$current3 === void 0 || (_rangeRef$current3 = _rangeRef$current3.secondTextField()) === null || _rangeRef$current3 === void 0 || (_rangeRef$current3 = _rangeRef$current3.current) === null || _rangeRef$current3 === void 0 || _rangeRef$current3.focus();
-        }
-      },
-      onSearchSecondValue: function onSearchSecondValue(_, date) {
-        handleSearchSecond(String(date));
-        if (!calendarFirstValue || firstValueError) {
-          var _rangeRef$current4;
-          rangeRef === null || rangeRef === void 0 || (_rangeRef$current4 = rangeRef.current) === null || _rangeRef$current4 === void 0 || (_rangeRef$current4 = _rangeRef$current4.firstTextField()) === null || _rangeRef$current4 === void 0 || (_rangeRef$current4 = _rangeRef$current4.current) === null || _rangeRef$current4 === void 0 || _rangeRef$current4.focus();
-        }
-      },
-      onFocusFirstTextfield: handleFocusFirstTextField,
-      onFocusSecondTextfield: handleFocusSecondTextField,
-      onBlurFirstTextfield: function onBlurFirstTextfield(event) {
-        return handleBlur(event, _onBlurFirstTextfield);
-      },
-      onBlurSecondTextfield: function onBlurSecondTextfield(event) {
-        return handleBlur(event, _onBlurSecondTextfield);
-      },
-      onKeyDown: onKeyDown
-    }));
-    useEffect(function () {
-      var _rangeRef$current5, _rangeRef$current6;
-      setFirstInputRef((_rangeRef$current5 = rangeRef.current) === null || _rangeRef$current5 === void 0 ? void 0 : _rangeRef$current5.firstTextField());
-      setSecondInputRef((_rangeRef$current6 = rangeRef.current) === null || _rangeRef$current6 === void 0 ? void 0 : _rangeRef$current6.secondTextField());
-    }, [rangeRef.current]);
-    useEffect(function () {
-      setIsInnerOpen(function (prevOpen) {
-        return prevOpen !== opened && opened;
-      });
-    }, [opened]);
-    useEffect(function () {
-      if (calendarFirstValue && calendarSecondValue) {
-        setFullDateEntered(true);
-      }
-    }, [calendarFirstValue, calendarSecondValue]);
-    useLayoutEffect(function () {
-      updateExternalFirstDate(startExternalValue || undefined);
-    }, [startExternalValue, format, lang]);
-    useLayoutEffect(function () {
-      updateExternalSecondDate(endExternalValue || undefined);
-    }, [endExternalValue, format, lang]);
-    useLayoutEffect(function () {
-      updateExternalFirstDate(defaultFirstDate);
-    }, [defaultFirstDate, format, lang]);
-    useLayoutEffect(function () {
-      updateExternalSecondDate(defaultSecondDate);
-    }, [defaultSecondDate, format, lang]);
-    var RootWrapper = useCallback(/*#__PURE__*/forwardRef(function (_ref6, rootWrapperRef) {
-      var children = _ref6.children,
-        rootWrapperClassName = _ref6.className,
-        onClick = _ref6.onClick;
-      return /*#__PURE__*/React.createElement(Root, {
-        ref: rootWrapperRef,
-        view: view,
-        size: size,
-        className: rootWrapperClassName,
-        disabled: disabled,
-        readOnly: !disabled && readOnly,
-        onClick: onClick
-      }, children);
-    }), [view, size, disabled, readOnly]);
-    return /*#__PURE__*/React.createElement(Root, _extends({
-      ref: rootRef,
-      view: view,
-      size: size,
-      className: cls(classes.datePickerRoot, className, _defineProperty({}, classes.datePickerstretched, stretched)),
-      disabled: disabled,
-      readOnly: !disabled && readOnly
-    }, rest), /*#__PURE__*/React.createElement(RangeDatePopover, {
-      calendarValue: [calendarFirstValue, calendarSecondValue],
-      target: RangeComponent,
-      opened: isInnerOpen,
-      includeEdgeDates: includeEdgeDates,
-      eventList: eventList,
-      disabledList: disabledList,
-      eventMonthList: eventMonthList,
-      disabledMonthList: disabledMonthList,
-      eventQuarterList: eventQuarterList,
-      disabledQuarterList: disabledQuarterList,
-      eventYearList: eventYearList,
-      disabledYearList: disabledYearList,
-      min: min,
-      max: max,
-      renderFromDate: renderFromDate,
-      frame: frame,
-      usePortal: usePortal,
-      placement: placement,
-      closeOnOverlayClick: closeOnOverlayClick,
-      closeOnEsc: closeOnEsc,
-      offset: offset,
-      stretched: stretched,
-      calendarContainerWidth: calendarContainerWidth,
-      calendarContainerHeight: calendarContainerHeight,
-      type: type,
-      onToggle: handleToggle,
-      lang: lang,
-      isDoubleCalendar: isDoubleCalendar,
-      rootWrapper: RootWrapper,
-      onChangeStartOfRange: handleChangeStartOfRange,
-      onChangeValue: handleChangeCalendarValue,
-      setIsInnerOpen: setIsInnerOpen
-    }), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
-      className: cls(rangeErrorClass, rangeSuccessClass)
-    }, leftHelper), /*#__PURE__*/React.createElement(InputHidden, _extends({
-      name: name,
-      type: "hidden",
-      datatype: "datepicker-double",
-      "data-datepicker": "from",
+    }
+    if (onToggle) {
+      return onToggle(isCalendarOpen, event);
+    }
+    setIsInnerOpen(isCalendarOpen);
+  };
+  const handleFocusFirstTextField = event => {
+    onFocusFirstTextfield?.(event);
+    setSecondTextFieldClicked(false);
+  };
+  const handleFocusSecondTextField = event => {
+    onFocusSecondTextfield?.(event);
+    setSecondTextFieldClicked(true);
+  };
+  const handleBlur = (event, outerHandler) => {
+    if (!inputFirstValue || !inputSecondValue) {
+      outerHandler?.(event);
+      return;
+    }
+    let {
+      originalDate: startOriginalDate
+    } = getFormattedDates({
       value: inputFirstValue,
-      ref: innerRefFirst
-    }, noop)), /*#__PURE__*/React.createElement(InputHidden, _extends({
-      name: name,
-      type: "hidden",
-      datatype: "datepicker-double",
-      "data-datepicker": "to",
+      delimiter: dateFormatDelimiter,
+      lang,
+      format,
+      includeEdgeDates,
+      min,
+      max
+    });
+    let {
+      originalDate: endOriginalDate
+    } = getFormattedDates({
       value: inputSecondValue,
-      ref: innerRefSecond
-    }, noop)));
+      delimiter: dateFormatDelimiter,
+      lang,
+      format,
+      includeEdgeDates,
+      min,
+      max
+    });
+    if (!calendarFirstValue && correctStartDates.calendar) {
+      startOriginalDate = new Date(correctStartDates.calendar);
+    }
+    if (!calendarSecondValue && correctEndDates.calendar) {
+      endOriginalDate = new Date(correctEndDates.calendar);
+    }
+    const [startValue, endValue] = getSortedValues([startOriginalDate, endOriginalDate]);
+    const {
+      formattedDate: startFormattedDate
+    } = getFormattedDates({
+      value: startValue || null,
+      delimiter: dateFormatDelimiter,
+      lang,
+      format,
+      includeEdgeDates,
+      min,
+      max
+    });
+    const {
+      formattedDate: endFormattedDate
+    } = getFormattedDates({
+      value: endValue || null,
+      delimiter: dateFormatDelimiter,
+      lang,
+      format,
+      includeEdgeDates,
+      min,
+      max
+    });
+    setFirstInputValue(startFormattedDate);
+    setSecondInputValue(endFormattedDate);
+    setCalendarFirstValue(startOriginalDate);
+    setCalendarSecondValue(endOriginalDate);
+    outerHandler?.(event);
+  };
+  const {
+    onKeyDown
+  } = useKeyNavigation({
+    isCalendarOpen: isInnerOpen,
+    format,
+    maskWithFormat,
+    delimiter: dateFormatDelimiter,
+    closeOnEsc,
+    onToggle: handleToggle
   });
-};
-var datePickerRangeConfig = {
+  const handleChangeStartOfRange = (chosenDate, dateInfo) => {
+    if (!fullDateEntered) {
+      handleFirstCalendarPick(chosenDate, dateInfo);
+      handleSecondCalendarPick(undefined);
+      return;
+    }
+    const prevValue = secondTextFieldClicked ? calendarFirstValue : calendarSecondValue;
+    const [first, second] = getSortedValues([prevValue, chosenDate]);
+    handleFirstCalendarPick(first, dateInfo);
+    handleSecondCalendarPick(second, dateInfo);
+    if (!firstValueError && !secondValueError && closeAfterDateSelect) {
+      handleToggle(false);
+    }
+  };
+  const handleChangeCalendarValue = ([firstDate, secondDate], dateInfo) => {
+    if (firstDate) {
+      handleFirstCalendarPick(firstDate, dateInfo);
+    }
+    if (secondDate) {
+      handleSecondCalendarPick(secondDate, dateInfo);
+    }
+    if (firstDate && secondDate && !firstValueError && !secondValueError && closeAfterDateSelect) {
+      handleToggle(false);
+    }
+  };
+  const RangeComponent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledRange, {
+    ref: rangeRef,
+    autoComplete: autoComplete,
+    dividerIcon: dividerIcon,
+    dividerVariant: dividerVariant,
+    label: label,
+    required: required,
+    requiredPlacement: requiredPlacement,
+    hasRequiredIndicator: hasRequiredIndicator,
+    disabled: disabled,
+    readOnly: !disabled && readOnly,
+    firstPlaceholder: firstPlaceholder,
+    secondPlaceholder: secondPlaceholder,
+    contentLeft: contentLeft,
+    contentRight: contentRight,
+    firstTextfieldTextBefore: firstTextfieldTextBefore,
+    secondTextfieldTextBefore: secondTextfieldTextBefore,
+    firstTextfieldTextAfter: firstTextfieldTextAfter,
+    secondTextfieldTextAfter: secondTextfieldTextAfter,
+    firstTextfieldContentLeft: firstTextfieldContentLeft,
+    firstTextfieldContentRight: firstTextfieldContentRight,
+    secondTextfieldContentLeft: secondTextfieldContentLeft,
+    secondTextfieldContentRight: secondTextfieldContentRight,
+    firstValue: inputFirstValue,
+    secondValue: inputSecondValue,
+    firstValueError: firstValueError,
+    secondValueError: secondValueError,
+    firstValueSuccess: firstValueSuccess,
+    secondValueSuccess: secondValueSuccess,
+    onChangeFirstValue: handleChangeFirstValue,
+    onChangeSecondValue: handleChangeSecondValue,
+    name: name,
+    onSearchFirstValue: (_, date) => {
+      handleSearchFirst(String(date));
+      if (!calendarSecondValue || secondValueError) {
+        rangeRef?.current?.secondTextField()?.current?.focus();
+      }
+    },
+    onSearchSecondValue: (_, date) => {
+      handleSearchSecond(String(date));
+      if (!calendarFirstValue || firstValueError) {
+        rangeRef?.current?.firstTextField()?.current?.focus();
+      }
+    },
+    onFocusFirstTextfield: handleFocusFirstTextField,
+    onFocusSecondTextfield: handleFocusSecondTextField,
+    onBlurFirstTextfield: event => handleBlur(event, onBlurFirstTextfield),
+    onBlurSecondTextfield: event => handleBlur(event, onBlurSecondTextfield),
+    onKeyDown: onKeyDown
+  }));
+  useEffect(() => {
+    setFirstInputRef(rangeRef.current?.firstTextField());
+    setSecondInputRef(rangeRef.current?.secondTextField());
+  }, [rangeRef.current]);
+  useEffect(() => {
+    setIsInnerOpen(prevOpen => prevOpen !== opened && opened);
+  }, [opened]);
+  useEffect(() => {
+    if (calendarFirstValue && calendarSecondValue) {
+      setFullDateEntered(true);
+    }
+  }, [calendarFirstValue, calendarSecondValue]);
+  useLayoutEffect(() => {
+    updateExternalFirstDate(startExternalValue || undefined);
+  }, [startExternalValue, format, lang]);
+  useLayoutEffect(() => {
+    updateExternalSecondDate(endExternalValue || undefined);
+  }, [endExternalValue, format, lang]);
+  useLayoutEffect(() => {
+    updateExternalFirstDate(defaultFirstDate);
+  }, [defaultFirstDate, format, lang]);
+  useLayoutEffect(() => {
+    updateExternalSecondDate(defaultSecondDate);
+  }, [defaultSecondDate, format, lang]);
+  const RootWrapper = useCallback(/*#__PURE__*/forwardRef(({
+    children,
+    className: rootWrapperClassName,
+    onClick
+  }, rootWrapperRef) => /*#__PURE__*/React.createElement(Root, {
+    ref: rootWrapperRef,
+    view: view,
+    size: size,
+    className: rootWrapperClassName,
+    disabled: disabled,
+    readOnly: !disabled && readOnly,
+    onClick: onClick
+  }, children)), [view, size, disabled, readOnly]);
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    ref: rootRef,
+    view: view,
+    size: size,
+    className: cls(classes.datePickerRoot, className, {
+      [classes.datePickerstretched]: stretched
+    }),
+    disabled: disabled,
+    readOnly: !disabled && readOnly
+  }, rest), /*#__PURE__*/React.createElement(RangeDatePopover, {
+    calendarValue: [calendarFirstValue, calendarSecondValue],
+    target: RangeComponent,
+    opened: isInnerOpen,
+    includeEdgeDates: includeEdgeDates,
+    eventList: eventList,
+    disabledList: disabledList,
+    eventMonthList: eventMonthList,
+    disabledMonthList: disabledMonthList,
+    eventQuarterList: eventQuarterList,
+    disabledQuarterList: disabledQuarterList,
+    eventYearList: eventYearList,
+    disabledYearList: disabledYearList,
+    min: min,
+    max: max,
+    renderFromDate: renderFromDate,
+    frame: frame,
+    usePortal: usePortal,
+    placement: placement,
+    closeOnOverlayClick: closeOnOverlayClick,
+    closeOnEsc: closeOnEsc,
+    offset: offset,
+    stretched: stretched,
+    calendarContainerWidth: calendarContainerWidth,
+    calendarContainerHeight: calendarContainerHeight,
+    type: type,
+    onToggle: handleToggle,
+    lang: lang,
+    isDoubleCalendar: isDoubleCalendar,
+    rootWrapper: RootWrapper,
+    onChangeStartOfRange: handleChangeStartOfRange,
+    onChangeValue: handleChangeCalendarValue,
+    setIsInnerOpen: setIsInnerOpen
+  }), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
+    className: cls(rangeErrorClass, rangeSuccessClass)
+  }, leftHelper), /*#__PURE__*/React.createElement(InputHidden, _extends({
+    name: name,
+    type: "hidden",
+    datatype: "datepicker-double",
+    "data-datepicker": "from",
+    value: inputFirstValue,
+    ref: innerRefFirst
+  }, noop)), /*#__PURE__*/React.createElement(InputHidden, _extends({
+    name: name,
+    type: "hidden",
+    datatype: "datepicker-double",
+    "data-datepicker": "to",
+    value: inputSecondValue,
+    ref: innerRefSecond
+  }, noop)));
+});
+const datePickerRangeConfig = {
   name: 'DatePickerRange',
   tag: 'div',
   layout: datePickerRangeRoot,
-  base: base,
+  base,
   variations: {
     view: {
       css: base$1