hrm_ui_lib 2.1.0 → 2.2.0

package/components/DatePicker/RangeDatePicker/RangeDatePickerDesktop.js

@@ -1,177 +1,76 @@
-import _extends from '@babel/runtime/helpers/extends';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { forwardRef, useState, useRef, useEffect } from 'react';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import dayjs from 'dayjs';
 import DatePicker from 'react-datepicker';
-import { Input } from '../../Input/Input.js';
-import { DateFormat } from '../types.js';
-import { useImportFilesDynamically } from '../hooks.js';
-import { isSameDay } from '../../../utils/helpers.js';
-import { Label } from '../../../helperComponents/Label/Label.js';
-import 'classnames';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@babel/runtime/helpers/defineProperty';
-import '../../../consts/index.js';
-import '../../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import '../../../Alert-BslI0aA0.js';
-import 'react-syntax-highlighter';
-import { IconCalendarRight } from '../../SVGIcons/IconCalendarRight.js';
-import 'react-input-mask';
-import 'react-number-format';
-import '../../../helperComponents/ErrorMessage/ErrorMessage.js';
-import '../../Text/Text.js';
-import '../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../../helperComponents/IconDynamicComponent/constants.js';
-import '../../SVGIcons/IconCheckmarkCircleFilled.js';
-import '../../../type/file-upload.js';
-import '../../Alert/consts.js';
-import '../../../helperComponents/Loader/Loader.js';
-import 'react-dropzone';
-import '../../SVGIcons/IconUpload.js';
-import '../../FileUpload/types.js';
-import '../../../helpers/format-date.js';
-import '../../../helpers/locale.js';
-import '../../../type/locale.js';
-import '../../../helpers/storage.js';
-import 'react-toastify';
-import '../../../hooks/useGetIsMobile.js';
-import 'framer-motion';
-import '../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../../hooks/useOnOutsideClick.js';
-import '../../../hooks/useHideBodyScroll.js';
-import '../../SVGIcons/IconDismiss.js';
-import '../../Tooltip/types.js';
-import '../../Tooltip/Tooltip.js';
-import '../../../hooks/useGetTooltipStyles.js';
-import '../../../hooks/useGetElemSizes.js';
-import '../../../hooks/useGetElemPositions.js';
-import '../../../hooks/useGetTooltipPosition.js';
-import '../../../hooks/useHideOnScroll.js';
-import '../../Link/Link.js';
-import '../../Popover/PopoverDesktop.js';
-import '../../SVGIcons/IconInfo.js';
-import '@babel/runtime/helpers/typeof';
-import '../../SVGIcons/IconDismissFilled.js';
-import '../../SVGIcons/IconDelete.js';
-import '../../FileUpload/DropzoneFileUpload/FilePreview.js';
-import '../../Progress/Progress.js';
-import '../../SVGIcons/IconArrowDownloadFilled.js';
-import '../../../helpers/download-file.js';
-import '../../Button/consts.js';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/regenerator';
-
-var _excluded = ["value", "currentDates", "setFieldValue", "name", "changeHandler", "dataId", "format", "maxDate", "minDate", "locale", "disabled", "placeholderText", "label", "hasError", "required"];
-var RangeDatePickerDesktop = /*#__PURE__*/forwardRef(function (props, _ref) {
-  var value = props.value,
-    _props$currentDates = props.currentDates,
-    currentDates = _props$currentDates === void 0 ? [] : _props$currentDates,
-    setFieldValue = props.setFieldValue,
-    name = props.name,
-    changeHandler = props.changeHandler,
-    dataId = props.dataId,
-    _props$format = props.format,
-    format = _props$format === void 0 ? DateFormat.LongDate : _props$format,
-    maxDate = props.maxDate,
-    minDate = props.minDate,
-    _props$locale = props.locale,
-    locale = _props$locale === void 0 ? 'hy' : _props$locale,
-    disabled = props.disabled,
-    placeholderText = props.placeholderText,
-    label = props.label,
-    hasError = props.hasError,
-    required = props.required,
-    rest = _objectWithoutProperties(props, _excluded);
-  useImportFilesDynamically(locale);
-  var dateInitialValue = value !== undefined && Array.isArray(value) ? value : currentDates;
-  var _useState = useState(dateInitialValue),
-    _useState2 = _slicedToArray(_useState, 2),
-    rangeArray = _useState2[0],
-    setRangeDate = _useState2[1];
-  var calendarRef = useRef(null);
-  var onChange = function onChange(date) {
-    if (date && Array.isArray(date)) {
-      setRangeDate(date);
-      if (changeHandler) {
-        changeHandler(date);
-      }
-      if (setFieldValue && name) {
-        setFieldValue(name, date);
-      }
+import { Input } from '../../Input';
+import { DateFormat } from '../types';
+import { useImportFilesDynamically } from '../hooks';
+import { isSameDay } from '../../../utils/helpers';
+import { Label } from '../../../helperComponents';
+import IconCalendarRight from '../../SVGIcons/IconCalendarRight';
+export const RangeDatePickerDesktop = forwardRef((props, _ref) => {
+    const { value, currentDates = [], setFieldValue, name, changeHandler, dataId, format = DateFormat.LongDate, maxDate, minDate, locale = 'hy', disabled, placeholderText, label, hasError, required } = props, rest = __rest(props, ["value", "currentDates", "setFieldValue", "name", "changeHandler", "dataId", "format", "maxDate", "minDate", "locale", "disabled", "placeholderText", "label", "hasError", "required"]);
+    useImportFilesDynamically(locale);
+    const dateInitialValue = value !== undefined && Array.isArray(value) ? value : currentDates;
+    const [rangeArray, setRangeDate] = useState(dateInitialValue);
+    const calendarRef = useRef(null);
+    const onChange = (date) => {
+        if (date && Array.isArray(date)) {
+            setRangeDate(date);
+            if (changeHandler) {
+                changeHandler(date);
+            }
+            if (setFieldValue && name) {
+                setFieldValue(name, date);
+            }
+        }
+    };
+    useEffect(() => {
+        setRangeDate(dateInitialValue);
+    }, [dateInitialValue]);
+    if (!Array.isArray(rangeArray)) {
+        return null;
     }
-  };
-  useEffect(function () {
-    setRangeDate(dateInitialValue);
-  }, [dateInitialValue]);
-  if (!Array.isArray(rangeArray)) {
-    return null;
-  }
-  var formatDate = function formatDate(date) {
-    return date ? dayjs(date).format(format) : '';
-  };
-  var checkRange = function checkRange() {
-    var _rangeArray = _slicedToArray(rangeArray, 2),
-      startDate = _rangeArray[0],
-      endDate = _rangeArray[1];
-    if (!startDate || !endDate) {
-      onChange([null, null]);
-    }
-  };
-  var renderCurrentSelectedDate = function renderCurrentSelectedDate(rangeArray) {
-    var _rangeArray2 = _slicedToArray(rangeArray, 2),
-      startDate = _rangeArray2[0],
-      endDate = _rangeArray2[1];
-    var startDateFormatted = formatDate(startDate);
-    var endDateFormatted = formatDate(endDate);
-    if (isSameDay(startDate, endDate) || !rangeArray[1]) {
-      return startDateFormatted;
-    }
-    return "".concat(startDateFormatted, " - ").concat(endDateFormatted);
-  };
-  var openDatepicker = function openDatepicker() {
-    if (calendarRef.current) {
-      var _calendarRef$current, _calendarRef$current2;
-      var isOpen = (_calendarRef$current = calendarRef.current) === null || _calendarRef$current === void 0 ? void 0 : _calendarRef$current.isCalendarOpen();
-      (_calendarRef$current2 = calendarRef.current) === null || _calendarRef$current2 === void 0 || _calendarRef$current2.setOpen(!isOpen);
-    }
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "picker-container input__inner"
-  }, /*#__PURE__*/React.createElement(Label, {
-    text: label,
-    required: required,
-    invalid: hasError
-  }), /*#__PURE__*/React.createElement(DatePicker, _extends({}, rest, {
-    locale: locale,
-    minDate: minDate,
-    maxDate: maxDate,
-    startDate: rangeArray[0],
-    endDate: rangeArray[1],
-    selectsRange: true,
-    disabled: disabled,
-    onChange: onChange,
-    onClickOutside: checkRange
-    // @ts-ignore
-    ,
-    ref: calendarRef,
-    customInput: /*#__PURE__*/React.createElement("div", {
-      className: "date-picker_input-container"
-    }, /*#__PURE__*/React.createElement(Input, {
-      dataId: dataId,
-      disabled: disabled,
-      placeholder: placeholderText
-      // @ts-ignore
-      ,
-      currentValue: renderCurrentSelectedDate(rangeArray),
-      rightIconProps: {
-        Component: IconCalendarRight,
-        onClick: openDatepicker
-      }
-    }))
-  })));
+    const formatDate = (date) => {
+        return date ? dayjs(date).format(format) : '';
+    };
+    const checkRange = () => {
+        const [startDate, endDate] = rangeArray;
+        if (!startDate || !endDate) {
+            onChange([null, null]);
+        }
+    };
+    const renderCurrentSelectedDate = (rangeArray) => {
+        const [startDate, endDate] = rangeArray;
+        const startDateFormatted = formatDate(startDate);
+        const endDateFormatted = formatDate(endDate);
+        if (isSameDay(startDate, endDate) || !rangeArray[1]) {
+            return startDateFormatted;
+        }
+        return `${startDateFormatted} - ${endDateFormatted}`;
+    };
+    const openDatepicker = () => {
+        var _a, _b;
+        if (calendarRef.current) {
+            const isOpen = (_a = calendarRef.current) === null || _a === void 0 ? void 0 : _a.isCalendarOpen();
+            (_b = calendarRef.current) === null || _b === void 0 ? void 0 : _b.setOpen(!isOpen);
+        }
+    };
+    return (_jsxs("div", { className: "picker-container input__inner", children: [_jsx(Label, { text: label, required: required, invalid: hasError }), _jsx(DatePicker, Object.assign({}, rest, { locale: locale, minDate: minDate, maxDate: maxDate, startDate: rangeArray[0], endDate: rangeArray[1], selectsRange: true, disabled: disabled, onChange: onChange, onClickOutside: checkRange, 
+                // @ts-ignore
+                ref: calendarRef, customInput: _jsx("div", { className: "date-picker_input-container", children: _jsx(Input, { dataId: dataId, disabled: disabled, placeholder: placeholderText, 
+                        // @ts-ignore
+                        currentValue: renderCurrentSelectedDate(rangeArray), rightIconProps: { Component: IconCalendarRight, onClick: openDatepicker } }) }) }))] }));
 });
 RangeDatePickerDesktop.displayName = 'RangeDatePickerDesktop';
-
-export { RangeDatePickerDesktop };

package/components/DatePicker/RangeDatePicker/RangeDatePickerMobile.js

@@ -1,269 +1,90 @@
-import _extends from '@babel/runtime/helpers/extends';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { forwardRef, useState, useEffect } from 'react';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// @ts-nocheck
+import { forwardRef, useEffect, useState } from 'react';
 import DatePicker from 'react-datepicker';
-import { Input } from '../../Input/Input.js';
-import { DateFormat } from '../types.js';
-import { useImportFilesDynamically } from '../hooks.js';
-import { isSameDay } from '../../../utils/helpers.js';
-import { IconCalendarRight } from '../../SVGIcons/IconCalendarRight.js';
-import { a as Modal } from '../../../Alert-BslI0aA0.js';
-import 'classnames';
-import 'framer-motion';
-import '../../../consts/index.js';
-import '../../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/toConsumableArray';
-import 'react-syntax-highlighter';
-import { CustomHeader } from '../CustomHeader/CustomHeader.js';
-import { formatDate } from '../../../helpers/format-date.js';
-import 'react-toastify';
-import '@babel/runtime/helpers/typeof';
-import 'react-input-mask';
-import 'react-number-format';
-import '../../../helperComponents/Label/Label.js';
-import '../../Text/Text.js';
-import 'dayjs';
-import '../../../helperComponents/ErrorMessage/ErrorMessage.js';
-import '../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../../helperComponents/IconDynamicComponent/constants.js';
-import '../../SVGIcons/IconCheckmarkCircleFilled.js';
-import '../../../type/file-upload.js';
-import '../../Alert/consts.js';
-import '../../../helperComponents/Loader/Loader.js';
-import 'react-dropzone';
-import '../../SVGIcons/IconUpload.js';
-import '../../FileUpload/types.js';
-import '../../../helpers/locale.js';
-import '../../../type/locale.js';
-import '../../../helpers/storage.js';
-import '../../../hooks/useGetIsMobile.js';
-import '../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../../hooks/useOnOutsideClick.js';
-import '../../../hooks/useHideBodyScroll.js';
-import '../../SVGIcons/IconDismiss.js';
-import '../../Tooltip/types.js';
-import '../../Tooltip/Tooltip.js';
-import '../../../hooks/useGetTooltipStyles.js';
-import '../../../hooks/useGetElemSizes.js';
-import '../../../hooks/useGetElemPositions.js';
-import '../../../hooks/useGetTooltipPosition.js';
-import '../../../hooks/useHideOnScroll.js';
-import '../../Link/Link.js';
-import '../../Popover/PopoverDesktop.js';
-import '../../SVGIcons/IconInfo.js';
-import '../../SVGIcons/IconDismissFilled.js';
-import '../../SVGIcons/IconDelete.js';
-import '../../FileUpload/DropzoneFileUpload/FilePreview.js';
-import '../../Progress/Progress.js';
-import '../../SVGIcons/IconArrowDownloadFilled.js';
-import '../../../helpers/download-file.js';
-import '../../Button/consts.js';
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/regenerator';
-import '../../Select/Select/Select.js';
-import '../../Select/Select/SelectDesktop/index.js';
-import 'react-window';
-import '../../../helperComponents/OptionItem/OptionItem.js';
-import '../../Avatar/Avatar.js';
-import '../../FileUpload/FileUpload.js';
-import '../../FileUpload/UploadItems.js';
-import '../../../hooks/useFormProps.js';
-import '../../../context/types.js';
-import '../../SVGIcons/IconEditFilled.js';
-import '../../SVGIcons/IconEdit.js';
-import '../../SVGIcons/IconAttach.js';
-import '../../SVGIcons/IconCheckmark.js';
-import '../../../hooks/useGetHasBottomSpace.js';
-import '../../../hooks/useChangePositionsOnScroll.js';
-import '../../Empty/Empty.js';
-import '../../Image/Image.js';
-import 'react-dom';
-import '../../Collapse/CollapseGroup/CollapseGroup.js';
-import '../../Collapse/CollapseItem/CollapseItem.js';
-import '../../SVGIcons/IconChevronRight.js';
-import '../../Divider/Divider.js';
-import '../../SVGIcons/IconChevronDown.js';
-import '../../Select/SharedComponents/ContentTop.js';
-import '../../Select/SharedComponents/Actions.js';
-import '../../Menu/Menu.js';
-import '../../SVGIcons/IconMore.js';
-import '../../SVGIcons/IconSearchFilled.js';
-import '../../SVGIcons/IconSelectAllOff.js';
-import '../../SVGIcons/IconChevronLeft.js';
-import '../../Select/SharedComponents/Loading.js';
-import '../../Select/constants.js';
-import '../../Select/Select/helpers.js';
-import '../../Select/Select/SelectMobile/index.js';
-import '../../Select/Select/SelectMobile/MobileTopContent.js';
-import '../../SVGIcons/IconChevronUp.js';
-import '../../Select/localization.js';
-import '../../Select/MultiSelect/MultiSelect.js';
-import '../../Select/MultiSelect/OptionsWrapper.js';
-import '../../Select/MultiSelect/MultiSelectGrouped/MultiSelectGrouped.js';
-import '../../SVGIcons/IconCaretUpFilled.js';
-import '../../SVGIcons/IconCaretDownFilled.js';
-import '../../Select/MultiSelect/MultiBase/MultiBase.js';
-import '../../Select/MultiSelect/MultiSelectWithTabs/MultiSelectWithTabs.js';
-import '../../Tab/Tab.js';
-import '../../Tab/TabItem.js';
-import '../../Badge/Badge.js';
-import '../../Select/SharedComponents/Footer.js';
-import '../../Select/SharedComponents/InputSelectWrapper/InputSelectWrapper.js';
-import '../../Select/MultiSelect/MobileWrapper.js';
-import '../../Select/MultiSelect/DesktopWrapper.js';
-import '../../Select/SharedComponents/ButtonSelectWrapper/ButtonSelectWrapper.js';
-import '../../Select/SharedComponents/ButtonSelectWrapper/Button/Button.js';
-import '../../Select/ButtonSelect/ButtonSelect.js';
-import '../CustomHeader/helpers.js';
-import '../localization.js';
-
-var _excluded = ["value", "currentDates", "setFieldValue", "name", "changeHandler", "dataId", "format", "maxDate", "minDate", "locale", "disabled", "placeholderText", "dataIdPrefix", "modalOptions"];
-var RangeDatePickerMobile = /*#__PURE__*/forwardRef(function (props, _ref) {
-  var value = props.value,
-    _props$currentDates = props.currentDates,
-    currentDates = _props$currentDates === void 0 ? [] : _props$currentDates,
-    setFieldValue = props.setFieldValue,
-    name = props.name,
-    changeHandler = props.changeHandler,
-    dataId = props.dataId,
-    _props$format = props.format,
-    format = _props$format === void 0 ? DateFormat.LongDate : _props$format,
-    maxDate = props.maxDate,
-    minDate = props.minDate,
-    _props$locale = props.locale,
-    locale = _props$locale === void 0 ? 'hy' : _props$locale,
-    disabled = props.disabled,
-    placeholderText = props.placeholderText,
-    dataIdPrefix = props.dataIdPrefix,
-    modalOptions = props.modalOptions,
-    rest = _objectWithoutProperties(props, _excluded);
-  useImportFilesDynamically(locale);
-  var startYear = minDate ? minDate.getFullYear() : 1900;
-  var endYear = maxDate ? maxDate.getFullYear() : new Date().getFullYear() + 5;
-  var dateInitialValue = value !== undefined && Array.isArray(value) ? value : currentDates;
-  var _useState = useState(dateInitialValue),
-    _useState2 = _slicedToArray(_useState, 2),
-    rangeArray = _useState2[0],
-    setRangeDate = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isCalendarOpen = _useState4[0],
-    setIsCalendarOpen = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isApplied = _useState6[0],
-    setIsApplied = _useState6[1];
-  var onChange = function onChange(date) {
-    if (date && Array.isArray(date)) {
-      setRangeDate(date);
+import { Input } from '../../Input';
+import { DateFormat } from '../types';
+import { useImportFilesDynamically } from '../hooks';
+import { isSameDay } from '../../../utils/helpers';
+import IconCalendarRight from '../../SVGIcons/IconCalendarRight';
+import { Modal } from '../../Modal';
+import { CustomHeader } from '../CustomHeader/CustomHeader';
+import { formatDate } from '../../../helpers';
+export const RangeDatePickerMobile = forwardRef((props, _ref) => {
+    const { value, currentDates = [], setFieldValue, name, changeHandler, dataId, format = DateFormat.LongDate, maxDate, minDate, locale = 'hy', disabled, placeholderText, dataIdPrefix, modalOptions } = props, rest = __rest(props, ["value", "currentDates", "setFieldValue", "name", "changeHandler", "dataId", "format", "maxDate", "minDate", "locale", "disabled", "placeholderText", "dataIdPrefix", "modalOptions"]);
+    useImportFilesDynamically(locale);
+    const startYear = minDate ? minDate.getFullYear() : 1900;
+    const endYear = maxDate ? maxDate.getFullYear() : new Date().getFullYear() + 5;
+    const dateInitialValue = value !== undefined && Array.isArray(value) ? value : currentDates;
+    const [rangeArray, setRangeDate] = useState(dateInitialValue);
+    const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+    const [isApplied, setIsApplied] = useState(false);
+    const onChange = (date) => {
+        if (date && Array.isArray(date)) {
+            setRangeDate(date);
+        }
+    };
+    useEffect(() => {
+        setRangeDate(dateInitialValue);
+    }, [dateInitialValue]);
+    if (!Array.isArray(rangeArray)) {
+        return null;
     }
-  };
-  useEffect(function () {
-    setRangeDate(dateInitialValue);
-  }, [dateInitialValue]);
-  if (!Array.isArray(rangeArray)) {
-    return null;
-  }
-  var checkRange = function checkRange() {
-    var _rangeArray = _slicedToArray(rangeArray, 2),
-      startDate = _rangeArray[0],
-      endDate = _rangeArray[1];
-    if (!startDate || !endDate) {
-      onChange([null, null]);
-    }
-  };
-  var renderCurrentSelectedDate = function renderCurrentSelectedDate(rangeArray) {
-    if (isCalendarOpen && !isApplied) {
-      return;
-    }
-    var _rangeArray2 = _slicedToArray(rangeArray, 2),
-      startDate = _rangeArray2[0],
-      endDate = _rangeArray2[1];
-    var startDateFormatted = formatDate(startDate, format);
-    var endDateFormatted = formatDate(endDate, format);
-    if (isSameDay(startDate, endDate) || !endDate) {
-      return startDateFormatted;
-    }
-    return "".concat(startDateFormatted, " - ").concat(endDateFormatted);
-  };
-  var openDatepicker = function openDatepicker() {
-    setIsCalendarOpen(true);
-  };
-  var closeDatepicker = function closeDatepicker() {
-    setIsCalendarOpen(false);
-  };
-  var onApply = function onApply() {
-    if (changeHandler) {
-      changeHandler(rangeArray);
-    }
-    if (setFieldValue && name) {
-      setFieldValue(name, rangeArray);
-    }
-    setIsApplied(true);
-    closeDatepicker();
-  };
-  var _rangeArray3 = _slicedToArray(rangeArray, 2),
-    startDate = _rangeArray3[0],
-    endDate = _rangeArray3[1];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
-    readOnly: true,
-    onClick: openDatepicker,
-    dataId: dataId,
-    disabled: disabled,
-    placeholder: placeholderText,
-    currentValue: renderCurrentSelectedDate(rangeArray),
-    rightIconProps: {
-      Component: IconCalendarRight,
-      onClick: openDatepicker
-    }
-  }), /*#__PURE__*/React.createElement(Modal, {
-    isOpen: isCalendarOpen,
-    title: modalOptions === null || modalOptions === void 0 ? void 0 : modalOptions.title,
-    onClose: closeDatepicker,
-    buttonProps: {
-      confirm: {
-        buttonText: modalOptions === null || modalOptions === void 0 ? void 0 : modalOptions.btnConfirmText,
-        onClick: onApply
-      },
-      cancel: {
-        buttonText: modalOptions === null || modalOptions === void 0 ? void 0 : modalOptions.btnCancelText,
-        onClick: closeDatepicker
-      }
-    },
-    closeIcon: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flexbox justify-content--between mb-16 gap-16"
-  }, /*#__PURE__*/React.createElement(Input, {
-    readOnly: true,
-    value: formatDate(startDate, format)
-  }), /*#__PURE__*/React.createElement(Input, {
-    readOnly: true,
-    value: formatDate(endDate, format)
-  })), /*#__PURE__*/React.createElement(DatePicker, _extends({}, rest, {
-    inline: true,
-    locale: locale,
-    minDate: minDate,
-    maxDate: maxDate,
-    startDate: startDate,
-    endDate: endDate,
-    selectsRange: true,
-    disabled: disabled,
-    onChange: onChange,
-    onClickOutside: checkRange,
-    renderCustomHeader: function renderCustomHeader(props) {
-      return /*#__PURE__*/React.createElement(CustomHeader, _extends({}, props, {
-        locale: locale,
-        startYear: startYear,
-        endYear: endYear,
-        dataPrefix: dataIdPrefix,
-        isMobile: true
-      }));
-    }
-  }))));
+    const checkRange = () => {
+        const [startDate, endDate] = rangeArray;
+        if (!startDate || !endDate) {
+            onChange([null, null]);
+        }
+    };
+    const renderCurrentSelectedDate = (rangeArray) => {
+        if (isCalendarOpen && !isApplied) {
+            return;
+        }
+        const [startDate, endDate] = rangeArray;
+        const startDateFormatted = formatDate(startDate, format);
+        const endDateFormatted = formatDate(endDate, format);
+        if (isSameDay(startDate, endDate) || !endDate) {
+            return startDateFormatted;
+        }
+        return `${startDateFormatted} - ${endDateFormatted}`;
+    };
+    const openDatepicker = () => {
+        setIsCalendarOpen(true);
+    };
+    const closeDatepicker = () => {
+        setIsCalendarOpen(false);
+    };
+    const onApply = () => {
+        if (changeHandler) {
+            changeHandler(rangeArray);
+        }
+        if (setFieldValue && name) {
+            setFieldValue(name, rangeArray);
+        }
+        setIsApplied(true);
+        closeDatepicker();
+    };
+    const [startDate, endDate] = rangeArray;
+    return (_jsxs(_Fragment, { children: [_jsx(Input, { readOnly: true, onClick: openDatepicker, dataId: dataId, disabled: disabled, placeholder: placeholderText, currentValue: renderCurrentSelectedDate(rangeArray), rightIconProps: { Component: IconCalendarRight, onClick: openDatepicker } }), _jsxs(Modal, { isOpen: isCalendarOpen, title: modalOptions === null || modalOptions === void 0 ? void 0 : modalOptions.title, onClose: closeDatepicker, buttonProps: {
+                    confirm: {
+                        buttonText: modalOptions === null || modalOptions === void 0 ? void 0 : modalOptions.btnConfirmText,
+                        onClick: onApply
+                    },
+                    cancel: {
+                        buttonText: modalOptions === null || modalOptions === void 0 ? void 0 : modalOptions.btnCancelText,
+                        onClick: closeDatepicker
+                    }
+                }, closeIcon: true, children: [_jsxs("div", { className: "flexbox justify-content--between mb-16 gap-16", children: [_jsx(Input, { readOnly: true, value: formatDate(startDate, format) }), _jsx(Input, { readOnly: true, value: formatDate(endDate, format) })] }), _jsx(DatePicker, Object.assign({}, rest, { inline: true, locale: locale, minDate: minDate, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsRange: true, disabled: disabled, onChange: onChange, onClickOutside: checkRange, renderCustomHeader: (props) => (_jsx(CustomHeader, Object.assign({}, props, { locale: locale, startYear: startYear, endYear: endYear, dataPrefix: dataIdPrefix, isMobile: true }))) }))] })] }));
 });
 RangeDatePickerMobile.displayName = 'RangeDatePickerMobile';
-
-export { RangeDatePickerMobile };