@true-engineering/true-react-common-ui-kit 1.12.0 → 2.0.0

package/dist/true-react-common-ui-kit.js

@@ -4,8 +4,8 @@ import clsx from "clsx";
 import hexToRgba from "hex-to-rgba";
 import { createUseStyles } from "react-jss";
 import InputMask from "react-input-mask";
-import ReactDatepicker from "react-datepicker";
-import { getYear, getMonth, format as format$1, isValid, parse, isAfter, isBefore, startOfMonth, endOfMonth, sub, startOfYear, endOfYear } from "date-fns";
+import ReactDatePicker from "react-datepicker";
+import { getYear, getMonth, format as format$1, parse, isSameDay, isValid, isAfter, isBefore, startOfMonth, endOfMonth, sub, startOfYear, endOfYear } from "date-fns";
 import { Portal } from "react-overlays";
 import scrollIntoViewIfNeeded from "scroll-into-view-if-needed";
 import { debounce as debounce$1 } from "ts-debounce";
@@ -1301,6 +1301,9 @@ var getNumberLength = function(n) {
 var isNotEmpty = function(val) {
   return typeof val === "string" ? val.trim() !== "" : val !== null && val !== void 0;
 };
+var isEmpty = function(val) {
+  return val === null || val === void 0;
+};
 var isStringNotEmpty = function(value) {
   return (value !== null && value !== void 0 ? value : "").trim() !== "";
 };
@@ -1349,17 +1352,19 @@ var addClickHandler = function(cb) {
     tabIndex: -1
   };
 };
-var createFilter = function(getter) {
+var createFilter = function(getter, compareFn) {
   return function(items, query) {
     return items.filter(function(item) {
       var possibleValues = getter(item).reduce(function(acc, cur) {
         return _to_consumable_array$7(acc).concat(_to_consumable_array$7(isStringNotEmpty(cur) ? [
-          cur === null || cur === void 0 ? void 0 : cur.toLowerCase()
+          cur.toLowerCase()
         ] : []));
       }, []);
       var queryString = query.toLowerCase().trim();
       return possibleValues.some(function(v) {
-        return v === null || v === void 0 ? void 0 : v.includes(queryString);
+        return (compareFn !== null && compareFn !== void 0 ? compareFn : function() {
+          return v === null || v === void 0 ? void 0 : v.includes(queryString);
+        })(v, queryString);
       });
     });
   };
@@ -4967,63 +4972,63 @@ var IconBoilerplate = function(param) {
     ]
   });
 };
-const avatarGreen = `  <svg\r
-    width="100%"\r
-    height="100%"\r
-    viewBox="0 0 32 32"\r
-    fill="none"\r
-    xmlns="http://www.w3.org/2000/svg"\r
-  >\r
-    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />\r
-    <mask\r
-      id="mask0_0_12744"\r
-      style="mask-type: 'alpha';"\r
-      maskUnits="userSpaceOnUse"\r
-      x="0"\r
-      y="0"\r
-      width="32"\r
-      height="32"\r
-    >\r
-      <circle cx="16" cy="16" r="16" fill="white" />\r
-    </mask>\r
-    <g mask="url(#mask0_0_12744)">\r
-      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />\r
-      <mask\r
-        id="mask1_0_12744"\r
-        style="mask-type: 'alpha';"\r
-        maskUnits="userSpaceOnUse"\r
-        x="3"\r
-        y="16"\r
-        width="26"\r
-        height="26"\r
-      >\r
-        <circle cx="16" cy="29" r="13" fill="white" />\r
-      </mask>\r
-      <g mask="url(#mask1_0_12744)">\r
-        <ellipse\r
-          cx="16"\r
-          cy="17.5"\r
-          rx="6"\r
-          ry="7.5"\r
-          fill="#505F79"\r
-          fill-opacity="0.204983"\r
-        />\r
-      </g>\r
-    </g>\r
-    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />\r
-    <defs>\r
-      <linearGradient\r
-        id="paint0_linear_0_12744"\r
-        x1="13.347"\r
-        y1="46.279"\r
-        x2="33.5318"\r
-        y2="30.8088"\r
-        gradientUnits="userSpaceOnUse"\r
-      >\r
-        <stop stop-color="#ABD229" />\r
-        <stop offset="1" stop-color="#9CD03F" />\r
-      </linearGradient>\r
-    </defs>\r
+const avatarGreen = `  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
+    <mask
+      id="mask0_0_12744"
+      style="mask-type: 'alpha';"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="32"
+      height="32"
+    >
+      <circle cx="16" cy="16" r="16" fill="white" />
+    </mask>
+    <g mask="url(#mask0_0_12744)">
+      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
+      <mask
+        id="mask1_0_12744"
+        style="mask-type: 'alpha';"
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="16"
+        width="26"
+        height="26"
+      >
+        <circle cx="16" cy="29" r="13" fill="white" />
+      </mask>
+      <g mask="url(#mask1_0_12744)">
+        <ellipse
+          cx="16"
+          cy="17.5"
+          rx="6"
+          ry="7.5"
+          fill="#505F79"
+          fill-opacity="0.204983"
+        />
+      </g>
+    </g>
+    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_0_12744"
+        x1="13.347"
+        y1="46.279"
+        x2="33.5318"
+        y2="30.8088"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#ABD229" />
+        <stop offset="1" stop-color="#9CD03F" />
+      </linearGradient>
+    </defs>
   </svg>`;
 var complexIcons = {
   avatar: avatarGreen
@@ -5069,7 +5074,7 @@ var ComplexIconBoilerplate = function(param) {
     }
   });
 };
-var styles$K = {
+var styles$J = {
   root: {
     display: "flex",
     alignItems: "center"
@@ -5132,7 +5137,7 @@ var isComplexIcon = function(type) {
 };
 var Icon = function(param) {
   var type = param.type, data = param.data, tweakStyles = param.tweakStyles;
-  var classes = useTheme("Icon", styles$K, tweakStyles).classes;
+  var classes = useTheme("Icon", styles$J, tweakStyles).classes;
   return /* @__PURE__ */ jsx("div", _object_spread_props$B(_object_spread$K({
     className: classes.root
   }, addDataAttributes(data)), {
@@ -5146,7 +5151,7 @@ var Icon = function(param) {
 var ITEM_HORIZONTAL_PADDING = 16;
 var ICON_SIZE = 20;
 var ICON_GAP = 12;
-var styles$J = {
+var styles$I = {
   root: {
     minWidth: 180,
     backgroundColor: colors.CLASSIC_WHITE,
@@ -5243,7 +5248,7 @@ function _object_spread_props$A(target, source) {
 }
 var List = function(param) {
   var items = param.items, testId = param.testId, data = param.data, tweakStyles = param.tweakStyles, onClick = param.onClick;
-  var classes = useTheme("List", styles$J, tweakStyles).classes;
+  var classes = useTheme("List", styles$I, tweakStyles).classes;
   var handleItemClick = function(item) {
     item.onClick();
     onClick === null || onClick === void 0 ? void 0 : onClick();
@@ -5340,7 +5345,7 @@ function _object_spread_props$z(target, source) {
   }
   return target;
 }
-var styles$I = _object_spread_props$z(_object_spread$I({
+var styles$H = _object_spread_props$z(_object_spread$I({
   root: {
     display: "flex"
   },
@@ -5497,7 +5502,7 @@ function _unsupported_iterable_to_array$n(o, minLen) {
 var ANIMATION_TIMEOUT = 150;
 var AccountInfo = function(param) {
   var data = param.data, avatar = param.avatar, tweakStyles = param.tweakStyles, accountName = param.accountName, options = param.options;
-  var _useTheme = useTheme("AccountInfo", styles$I, tweakStyles, {
+  var _useTheme = useTheme("AccountInfo", styles$H, tweakStyles, {
     timeout: ANIMATION_TIMEOUT
   }), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
   var nameRef = useRef(null);
@@ -5564,7 +5569,7 @@ var AccountInfo = function(param) {
     ]
   }));
 };
-var styles$H = {
+var styles$G = {
   root: {
     display: "flex",
     alignItems: "center",
@@ -5644,7 +5649,7 @@ function _object_spread_props$x(target, source) {
 }
 var AddButton = function(param) {
   var text = param.text, _param_type = param.type, type = _param_type === void 0 ? "button" : _param_type, isDisabled = param.isDisabled, onClick = param.onClick, isFullWidth = param.isFullWidth, data = param.data, tweakStyles = param.tweakStyles;
-  var classes = useTheme("AddButton", styles$H, tweakStyles).classes;
+  var classes = useTheme("AddButton", styles$G, tweakStyles).classes;
   return /* @__PURE__ */ jsxs("button", _object_spread_props$x(_object_spread$G({
     type,
     className: clsx(classes.root, isDisabled && classes.disabled, isFullWidth && classes.fullWidth),
@@ -5664,7 +5669,7 @@ var AddButton = function(param) {
     ]
   }));
 };
-var styles$G = {
+var styles$F = {
   root: {
     display: "flex",
     gap: 4,
@@ -5709,7 +5714,7 @@ var styles$G = {
 };
 var DotsPreloader = function(param) {
   var tweakStyles = param.tweakStyles;
-  var classes = useTheme("DotsPreloader", styles$G, tweakStyles).classes;
+  var classes = useTheme("DotsPreloader", styles$F, tweakStyles).classes;
   return /* @__PURE__ */ jsx("div", {
     className: classes.root,
     children: /* @__PURE__ */ jsx("span", {
@@ -5773,7 +5778,7 @@ var DefaultPreloader = function() {
     ]
   });
 };
-var styles$F = {
+var styles$E = {
   root: {
     display: "flex",
     width: "100%",
@@ -5783,7 +5788,7 @@ var styles$F = {
 var SvgPreloader = function(param) {
   var _param_type = param.type, type = _param_type === void 0 ? "default" : _param_type, tweakStyles = param.tweakStyles;
   var _theme_preloaders;
-  var classes = useTheme("SvgPreloader", styles$F, tweakStyles).classes;
+  var classes = useTheme("SvgPreloader", styles$E, tweakStyles).classes;
   var theme = useContext(ThemeContext).theme;
   var _theme_preloaders_type;
   var PreloaderIcon = (_theme_preloaders_type = (_theme_preloaders = theme.preloaders) === null || _theme_preloaders === void 0 ? void 0 : _theme_preloaders[type]) !== null && _theme_preloaders_type !== void 0 ? _theme_preloaders_type : DefaultPreloader;
@@ -5795,7 +5800,7 @@ var SvgPreloader = function(param) {
     }
   }) : /* @__PURE__ */ jsx(PreloaderIcon, {});
 };
-var styles$E = {
+var styles$D = {
   root: {
     display: "flex"
   },
@@ -5861,7 +5866,7 @@ function _object_spread_props$w(target, source) {
 }
 var ThemedPreloader = function(param) {
   var _param_type = param.type, type = _param_type === void 0 ? "default" : _param_type, _param_useCurrentColor = param.useCurrentColor, useCurrentColor = _param_useCurrentColor === void 0 ? false : _param_useCurrentColor, data = param.data, tweakStyles = param.tweakStyles;
-  var _useTheme = useTheme("ThemedPreloader", styles$E, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
+  var _useTheme = useTheme("ThemedPreloader", styles$D, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
   var preloaderComponentStyles = useTweakStyles(componentStyles, tweakStyles, "tweakPreloaderComponent");
   return /* @__PURE__ */ jsx("div", _object_spread_props$w(_object_spread$F({
     className: clsx(classes.root, classes[type], _define_property$H({}, classes.currentColor, useCurrentColor))
@@ -5874,7 +5879,7 @@ var ThemedPreloader = function(param) {
     })
   }));
 };
-var styles$D = {
+var styles$C = {
   root: {
     display: "flex",
     justifyContent: "center",
@@ -6105,9 +6110,9 @@ var BUTTON_VIEWS = [
   "text",
   "custom"
 ];
-var Button = function(param) {
+var Button = /* @__PURE__ */ forwardRef(function(param, ref) {
   var _param_type = param.type, type = _param_type === void 0 ? "button" : _param_type, children = param.children, _param_size = param.size, size = _param_size === void 0 ? "l" : _param_size, _param_view = param.view, view = _param_view === void 0 ? "primary" : _param_view, _param_isFullWidth = param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? false : _param_isFullWidth, _param_isInline = param.isInline, isInline = _param_isInline === void 0 ? false : _param_isInline, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_shouldSkipTabNavigation = param.shouldSkipTabNavigation, shouldSkipTabNavigation = _param_shouldSkipTabNavigation === void 0 ? false : _param_shouldSkipTabNavigation, data = param.data, testId = param.testId, tweakStyles = param.tweakStyles, icon = param.icon, _param_iconPosition = param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_preloaderType = param.preloaderType, preloaderType = _param_preloaderType === void 0 ? "dots" : _param_preloaderType, onClick = param.onClick, onMouseDown = param.onMouseDown;
-  var _useTheme = useTheme("Button", styles$D, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
+  var _useTheme = useTheme("Button", styles$C, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
   var tweakPreloaderStyles = useMemo(function() {
     return merge$1({}, size === "s" || size === "m" ? dotsPreloaderStyles : void 0, componentStyles.tweakPreloader, tweakStyles === null || tweakStyles === void 0 ? void 0 : tweakStyles.tweakPreloader);
   }, [
@@ -6119,6 +6124,7 @@ var Button = function(param) {
   var hasNoAction = isDisabled || isLoading;
   var _obj, _obj1;
   return /* @__PURE__ */ jsxs("button", _object_spread_props$v(_object_spread$E({
+    ref,
     type,
     className: clsx(classes.root, classes[size], classes[view], (_obj = {}, _define_property$G(_obj, classes.disabled, isDisabled), _define_property$G(_obj, classes.fullWidth, isFullWidth), _define_property$G(_obj, classes.inline, isInline), _define_property$G(_obj, classes.active, isActive), _define_property$G(_obj, classes.loading, isLoading), _define_property$G(_obj, classes.onlyIcon, hasIcon && !hasChildren), _obj)),
     tabIndex: shouldSkipTabNavigation ? -1 : void 0,
@@ -6152,8 +6158,8 @@ var Button = function(param) {
       })
     ]
   }));
-};
-var styles$C = {
+});
+var styles$B = {
   root: {
     cursor: "pointer",
     display: "flex",
@@ -6321,7 +6327,7 @@ function _unsupported_iterable_to_array$m(o, minLen) {
 }
 function Checkbox(param) {
   var children = param.children, isDisabled = param.isDisabled, isReadonly = param.isReadonly, _param_isChecked = param.isChecked, isChecked = _param_isChecked === void 0 ? false : _param_isChecked, value = param.value, _param_size = param.size, size = _param_size === void 0 ? 18 : _param_size, _param_alignItems = param.alignItems, alignItems = _param_alignItems === void 0 ? "center" : _param_alignItems, textMargin = param.textMargin, data = param.data, testId = param.testId, isSemiChecked = param.isSemiChecked, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? "right" : _param_labelPosition, tweakStyles = param.tweakStyles, onSelect = param.onSelect;
-  var classes = useTheme("Checkbox", styles$C, tweakStyles, {
+  var classes = useTheme("Checkbox", styles$B, tweakStyles, {
     size,
     alignItems,
     textMargin
@@ -6369,7 +6375,7 @@ function Checkbox(param) {
     ]
   }));
 }
-var styles$B = {
+var styles$A = {
   root: {
     width: 40,
     height: 40,
@@ -6448,7 +6454,7 @@ function _object_spread_props$t(target, source) {
 }
 var CloseButton = function(param) {
   var tweakStyles = param.tweakStyles, testId = param.testId, data = param.data, _param_iconType = param.iconType, iconType = _param_iconType === void 0 ? "close" : _param_iconType, onClose = param.onClose;
-  var classes = useTheme("CloseButton", styles$B, tweakStyles).classes;
+  var classes = useTheme("CloseButton", styles$A, tweakStyles).classes;
   return /* @__PURE__ */ jsx("button", _object_spread_props$t(_object_spread$C({
     type: "button",
     className: classes.root,
@@ -6460,7 +6466,7 @@ var CloseButton = function(param) {
     })
   }));
 };
-var styles$A = {
+var styles$z = {
   root: {
     display: "flex",
     flexWrap: "wrap"
@@ -6553,7 +6559,7 @@ function _unsupported_iterable_to_array$l(o, minLen) {
     return _array_like_to_array$l(o, minLen);
 }
 var Colors = function() {
-  var classes = useTheme("Colors", styles$A).classes;
+  var classes = useTheme("Colors", styles$z).classes;
   var theme = useContext(ThemeContext).theme;
   var _theme_colors = theme.colors, colors2 = _theme_colors === void 0 ? {} : _theme_colors;
   return /* @__PURE__ */ jsx("div", {
@@ -6583,7 +6589,7 @@ var Colors = function() {
     })
   });
 };
-var styles$z = {
+var styles$y = {
   "@global html, body": {
     fontFamily: "Arial, sans-serif",
     color: colors.FONT_MAIN,
@@ -6622,14 +6628,14 @@ function _object_spread$B(target) {
 }
 var CssBaseline = function(param) {
   var data = param.data, tweakStyles = param.tweakStyles;
-  var classes = useTheme("CssBaseline", styles$z, tweakStyles).classes;
+  var classes = useTheme("CssBaseline", styles$y, tweakStyles).classes;
   return /* @__PURE__ */ jsx("div", _object_spread$B({
     className: classes.root
   }, addDataAttributes(data)));
 };
 var PADDING_X$1 = 12;
 var AUTOSIZE_MAX_WIDTH = 480;
-var styles$y = {
+var styles$x = {
   root: {
     width: "100%",
     boxSizing: "border-box",
@@ -7152,7 +7158,7 @@ var __generator$5 = globalThis && globalThis.__generator || function(thisArg, bo
 var DEFAULT_SIZE = 6;
 var Input = /* @__PURE__ */ forwardRef(function(param, ref) {
   var _param_value = param.value, value = _param_value === void 0 ? "" : _param_value, label = param.label, placeholder = param.placeholder, _param_type = param.type, type = _param_type === void 0 ? "text" : _param_type, isDisabled = param.isDisabled, isReadonly = param.isReadonly, _param_hasFloatingLabel = param.hasFloatingLabel, hasFloatingLabel = _param_hasFloatingLabel === void 0 ? true : _param_hasFloatingLabel, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isClearable = param.isClearable, isClearable = _param_isClearable === void 0 ? false : _param_isClearable, infoMessage = param.infoMessage, errorMessage = param.errorMessage, _param_errorPosition = param.errorPosition, errorPosition = _param_errorPosition === void 0 ? "bottom" : _param_errorPosition, inlineStyle = param.inlineStyle, border = param.border, isRequired = param.isRequired, isLoading = param.isLoading, isAutoSizeable = param.isAutoSizeable, _param_defaultSize = param.defaultSize, defaultSize = _param_defaultSize === void 0 ? DEFAULT_SIZE : _param_defaultSize, iconType = param.iconType, name = param.name, hasRequiredLabel = param.hasRequiredLabel, data = param.data, tweakStyles = param.tweakStyles, maxLength = param.maxLength, shouldFocusOnMount = param.shouldFocusOnMount, units = param.units, testId = param.testId, tabIndex = param.tabIndex, onChange = param.onChange, onPaste = param.onPaste, onFocus = param.onFocus, onBlur = param.onBlur, onIconClick = param.onIconClick, onKeyDown = param.onKeyDown, mask = param.mask, maskPlaceholder = param.maskPlaceholder, alwaysShowMask = param.alwaysShowMask, beforeMaskedStateChange = param.beforeMaskedStateChange;
-  var _useTheme = useTheme("Input", styles$y, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
+  var _useTheme = useTheme("Input", styles$x, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
   var _useState = _sliced_to_array$k(useState(false), 2), isFocused = _useState[0], setFocused = _useState[1];
   var inputRef = useRef(null);
   var handleChange = function(event) {
@@ -7293,12 +7299,14 @@ var Input = /* @__PURE__ */ forwardRef(function(param, ref) {
     ]
   });
 });
-var styles$x = {
+var EMPTY_DATE_INPUT_VALUE = "__.__.____";
+var EMPTY_DATE_RANGE_INPUT_VALUE = "".concat(EMPTY_DATE_INPUT_VALUE, " - ").concat(EMPTY_DATE_INPUT_VALUE);
+var styles$w = {
   root: {
-    cursor: "pointer",
-    position: "relative",
     width: "100%",
-    height: "100%"
+    height: "100%",
+    cursor: "pointer",
+    position: "relative"
   },
   tweakInput: {}
 };
@@ -7386,71 +7394,57 @@ function _object_without_properties_loose$8(source, excluded) {
   }
   return target;
 }
-var DateInput = function(_param) {
-  var isRange = _param.isRange, date = _param.date, _param_startDate = _param.startDate, startDate = _param_startDate === void 0 ? "" : _param_startDate, _param_endDate = _param.endDate, endDate = _param_endDate === void 0 ? "" : _param_endDate, data = _param.data, onChange = _param.onChange, tweakStyles = _param.tweakStyles, props = _object_without_properties$8(_param, [
-    "isRange",
+var DateInput = /* @__PURE__ */ forwardRef(function(_param, ref) {
+  var date = _param.date, _param_startDate = _param.startDate, startDate = _param_startDate === void 0 ? "" : _param_startDate, _param_endDate = _param.endDate, endDate = _param_endDate === void 0 ? "" : _param_endDate, mask = _param.mask, className = _param.className, placeholder = _param.placeholder, data = _param.data, isRange = _param.isRange, tweakStyles = _param.tweakStyles, onClick = _param.onClick, onChange = _param.onChange, inputProps = _object_without_properties$8(_param, [
     "date",
     "startDate",
     "endDate",
+    "mask",
+    "className",
+    "placeholder",
     "data",
-    "onChange",
-    "tweakStyles"
+    "isRange",
+    "tweakStyles",
+    "onClick",
+    "onChange"
   ]);
-  var _useTheme = useTheme("DateInput", styles$x, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
-  var mainProps = isRange ? {
-    value: "".concat(startDate).concat(endDate),
-    onChange: function(v) {
-      return onChange(v !== "__.__.____ - __.__.____" ? v : "");
-    },
-    mask: "99.99.9999 - 99.99.9999"
-  } : {
-    value: date,
-    onChange: function(v) {
-      return onChange(v !== "__.__.____" ? v : "");
-    },
-    mask: "99.99.9999"
-  };
+  var _useTheme = useTheme("DateInput", styles$w, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
   var tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, "tweakInput");
+  var beforeMaskedStateChange = function(param) {
+    var nextState = param.nextState;
+    if (nextState.value === EMPTY_DATE_INPUT_VALUE || nextState.value === EMPTY_DATE_RANGE_INPUT_VALUE) {
+      return {
+        value: "",
+        selection: {
+          start: 0,
+          end: 0
+        }
+      };
+    }
+    return nextState;
+  };
+  var handleChange = function(value, event) {
+    if (event.type === "click") {
+      event.target.value = "";
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, value);
+  };
   return /* @__PURE__ */ jsx("div", _object_spread_props$r(_object_spread$z({
-    className: classes.root
+    className: clsx(classes.root, className),
+    onClick
   }, addDataAttributes(data)), {
-    children: /* @__PURE__ */ jsx(Input, _object_spread_props$r(_object_spread$z({}, mainProps, props), {
-      tweakStyles: tweakInputStyles
+    children: /* @__PURE__ */ jsx(Input, _object_spread_props$r(_object_spread$z({}, inputProps), {
+      ref,
+      value: isRange ? "".concat(startDate).concat(endDate) : date,
+      mask: mask !== null && mask !== void 0 ? mask : isRange ? "99.99.9999 - 99.99.9999" : "99.99.9999",
+      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : isRange ? EMPTY_DATE_RANGE_INPUT_VALUE : EMPTY_DATE_INPUT_VALUE,
+      tweakStyles: tweakInputStyles,
+      onChange: handleChange,
+      beforeMaskedStateChange
     }))
   }));
-};
-const reactDatepicker = "";
-var styles$w = {
-  customInput: {
-    width: "100%",
-    height: "100%"
-  },
-  s: {
-    width: 184,
-    height: "100%"
-  },
-  m: {
-    width: 300,
-    height: "100%"
-  },
-  full: {
-    width: "100%",
-    height: "100%"
-  }
-};
-var DatePickerInput = /* @__PURE__ */ forwardRef(function(param, ref) {
-  var onClick = param.onClick, children = param.children, _param_size = param.size, size = _param_size === void 0 ? "full" : _param_size, className = param.className;
-  var classes = useTheme("DatePickerInput", styles$w).classes;
-  return /* @__PURE__ */ jsx("div", {
-    className: clsx(classes.customInput, className),
-    children: /* @__PURE__ */ jsx("div", {
-      className: classes[size],
-      onClick,
-      ref,
-      children
-    })
-  });
 });
+const reactDatepicker = "";
 function _assert_this_initialized(self2) {
   if (self2 === void 0) {
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
@@ -9015,20 +9009,13 @@ var styles$s = {
   }
 };
 var DatePickerHeader = function(param) {
-  var date = param.date, changeYear = param.changeYear, changeMonth = param.changeMonth, decreaseMonth = param.decreaseMonth, increaseMonth = param.increaseMonth, isPrevMonthButtonDisabled = param.isPrevMonthButtonDisabled, isNextMonthButtonDisabled = param.isNextMonthButtonDisabled, months = param.months;
+  var date = param.date, _param_months = param.months, months = _param_months === void 0 ? [] : _param_months, prevMonthButtonDisabled = param.prevMonthButtonDisabled, nextMonthButtonDisabled = param.nextMonthButtonDisabled, changeYear = param.changeYear, changeMonth = param.changeMonth, decreaseMonth = param.decreaseMonth, increaseMonth = param.increaseMonth;
   var _useTheme = useTheme("DatePickerHeader", styles$s), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
   var years = useMemo(function() {
     return Array.from(Array(41)).map(function(_, i) {
       return getYear(new Date()) - 30 + i;
     });
   }, []);
-  var getMonthNumber = useCallback(function(month) {
-    return months.findIndex(function(m) {
-      return m === month;
-    });
-  }, [
-    months
-  ]);
   return /* @__PURE__ */ jsxs("div", {
     className: classes.header,
     children: [
@@ -9044,11 +9031,11 @@ var DatePickerHeader = function(param) {
             children: /* @__PURE__ */ jsx(Select, {
               value: months[getMonth(date)],
               options: months,
-              onChange: function(value) {
-                return changeMonth(getMonthNumber(value));
-              },
+              dropdownIcon: "chevron-down-small",
               tweakStyles: componentStyles.tweakSelect,
-              dropdownIcon: "chevron-down-small"
+              onChange: function(value) {
+                return changeMonth(months.indexOf(value));
+              }
             })
           })
         ]
@@ -9065,11 +9052,11 @@ var DatePickerHeader = function(param) {
             children: /* @__PURE__ */ jsx(Select, {
               value: getYear(date),
               options: years,
-              onChange: function(value) {
-                changeYear(value);
-              },
+              dropdownIcon: "chevron-down-small",
               tweakStyles: componentStyles.tweakSelect,
-              dropdownIcon: "chevron-down-small"
+              onChange: function(value) {
+                return changeYear(value);
+              }
             })
           })
         ]
@@ -9078,19 +9065,19 @@ var DatePickerHeader = function(param) {
         className: classes.buttons,
         children: [
           /* @__PURE__ */ jsx("button", {
-            onClick: decreaseMonth,
-            disabled: isPrevMonthButtonDisabled,
-            className: classes.btn,
             type: "button",
+            className: classes.btn,
+            disabled: prevMonthButtonDisabled,
+            onClick: decreaseMonth,
             children: /* @__PURE__ */ jsx(Icon, {
               type: "chevron-left"
             })
           }),
           /* @__PURE__ */ jsx("button", {
-            onClick: increaseMonth,
-            disabled: isNextMonthButtonDisabled,
-            className: classes.btn,
             type: "button",
+            className: classes.btn,
+            disabled: nextMonthButtonDisabled,
+            onClick: increaseMonth,
             children: /* @__PURE__ */ jsx(Icon, {
               type: "chevron-right"
             })
@@ -9100,43 +9087,38 @@ var DatePickerHeader = function(param) {
     ]
   });
 };
+var getDateFormatter = function(dateFormat) {
+  return function(date) {
+    return isNotEmpty(date) ? format$1(date, dateFormat) : "";
+  };
+};
+var getDateValueParser = function(dateFormat) {
+  return function(value) {
+    var inputValue = value === EMPTY_DATE_INPUT_VALUE ? "" : value;
+    return isStringNotEmpty(inputValue) ? parse(value, dateFormat, new Date()) : null;
+  };
+};
+var areDatesEquals = function(date1, date2) {
+  return isEmpty(date1) && isEmpty(date2) || isNotEmpty(date1) && isNotEmpty(date2) && isSameDay(date1, date2);
+};
+var DEFAULT_DATE_FORMAT$2 = "dd.MM.yyyy";
 var styles$r = {
   root: {
     width: "100%",
     height: "100%"
   },
-  day: {
-    width: 36,
-    height: 36,
-    lineHeight: "normal",
-    boxSizing: "border-box",
-    paddingTop: 10,
-    fontSize: 16
-  },
-  datepicker: {
-    display: "flex",
-    padding: [
-      4,
-      8,
-      20,
-      8
-    ],
-    width: 320,
-    boxSizing: "border-box"
-  },
-  btnText: {
-    marginLeft: "auto"
-  },
+  day: {},
+  datepicker: {},
   popper: {
     zIndex: 10,
-    marginLeft: function(param) {
-      var leftPosition = param.leftPosition;
-      return leftPosition;
-    },
     marginTop: function(param) {
       var topPosition = param.topPosition;
       return topPosition;
     },
+    marginLeft: function(param) {
+      var leftPosition = param.leftPosition;
+      return leftPosition;
+    },
     '&[data-placement^="bottom"]': {
       paddingTop: 6
     },
@@ -9149,7 +9131,8 @@ var styles$r = {
     '&[data-placement^="right"]': {
       paddingLeft: 6
     }
-  }
+  },
+  tweakDateInput: {}
 };
 function _array_like_to_array$i(arr, len) {
   if (len == null || len > arr.length)
@@ -9293,8 +9276,8 @@ function _unsupported_iterable_to_array$i(o, minLen) {
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
     return _array_like_to_array$i(o, minLen);
 }
-var _ReactDatepicker_default;
-var Datepicker = (_ReactDatepicker_default = ReactDatepicker.default) !== null && _ReactDatepicker_default !== void 0 ? _ReactDatepicker_default : ReactDatepicker;
+var _ReactDatePicker_default;
+var DatePickerComponent = (_ReactDatePicker_default = ReactDatePicker.default) !== null && _ReactDatePicker_default !== void 0 ? _ReactDatePicker_default : ReactDatePicker;
 var PopperContainer = function(param) {
   var children = param.children;
   return /* @__PURE__ */ jsx(Portal, {
@@ -9302,257 +9285,240 @@ var PopperContainer = function(param) {
     children
   });
 };
-var DEFAULT_DATE_FORMAT$2 = "dd.MM.yyyy";
-var DatePicker = function(_param) {
-  var data = _param.data, tweakStyles = _param.tweakStyles, selectedDate = _param.selectedDate, minDate = _param.minDate, maxDate = _param.maxDate, endDate = _param.endDate, startDate = _param.startDate, size = _param.size, isRange = _param.isRange, locale2 = _param.locale, months = _param.months, _param_calendarStartDay = _param.calendarStartDay, calendarStartDay = _param_calendarStartDay === void 0 ? 1 : _param_calendarStartDay, _param_leftPosition = _param.leftPosition, leftPosition = _param_leftPosition === void 0 ? 0 : _param_leftPosition, _param_topPosition = _param.topPosition, topPosition = _param_topPosition === void 0 ? 0 : _param_topPosition, isInline = _param.isInline, isNeedClearSelectedDate = _param.isNeedClearSelectedDate, _param_dateFormat = _param.dateFormat, dateFormat = _param_dateFormat === void 0 ? DEFAULT_DATE_FORMAT$2 : _param_dateFormat, monthsShown = _param.monthsShown, _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? "__.__.____" : _param_placeholder, shouldGiveValueOnType = _param.shouldGiveValueOnType, disabledKeyboardNavigation = _param.disabledKeyboardNavigation, shouldRenderPopperInBody = _param.shouldRenderPopperInBody, popperModifiers = _param.popperModifiers, showPreviousMonths = _param.showPreviousMonths, popperPlacement = _param.popperPlacement, onChangeDate = _param.onChangeDate, onChangeRange = _param.onChangeRange, customHeader = _param.customHeader, filterDate = _param.filterDate, inputProps = _object_without_properties$4(_param, [
+var DatePicker = /* @__PURE__ */ forwardRef(function(_param, ref) {
+  var data = _param.data, _param_selectedDate = _param.selectedDate, selectedDate = _param_selectedDate === void 0 ? null : _param_selectedDate, minDate = _param.minDate, maxDate = _param.maxDate, _param_endDate = _param.endDate, endDate = _param_endDate === void 0 ? null : _param_endDate, _param_startDate = _param.startDate, startDate = _param_startDate === void 0 ? null : _param_startDate, locale2 = _param.locale, months = _param.months, _param_topPosition = _param.topPosition, topPosition = _param_topPosition === void 0 ? 0 : _param_topPosition, _param_leftPosition = _param.leftPosition, leftPosition = _param_leftPosition === void 0 ? 0 : _param_leftPosition, _param_calendarStartDay = _param.calendarStartDay, calendarStartDay = _param_calendarStartDay === void 0 ? 1 : _param_calendarStartDay, _param_dateFormat = _param.dateFormat, dateFormat = _param_dateFormat === void 0 ? DEFAULT_DATE_FORMAT$2 : _param_dateFormat, monthsShown = _param.monthsShown, placeholder = _param.placeholder, isRange = _param.isRange, isInline = _param.isInline, isDisabled = _param.isDisabled, isClearable = _param.isClearable, focusSelectedMonth = _param.focusSelectedMonth, disabledKeyboardNavigation = _param.disabledKeyboardNavigation, shouldRenderPopperInBody = _param.shouldRenderPopperInBody, _param_allowSameDay = _param.allowSameDay, allowSameDay = _param_allowSameDay === void 0 ? false : _param_allowSameDay, shouldCloseOnSelect = _param.shouldCloseOnSelect, showPreviousMonths = _param.showPreviousMonths, preventOpenOnFocus = _param.preventOpenOnFocus, popperModifiers = _param.popperModifiers, popperPlacement = _param.popperPlacement, todayButton = _param.todayButton, calendarContainer = _param.calendarContainer, dayClassName = _param.dayClassName, tmp = _param.customInput, CustomInput = tmp === void 0 ? DateInput : tmp, customInputRef = _param.customInputRef, renderCustomHeader = _param.renderCustomHeader, filterDate = _param.filterDate, onYearChange = _param.onYearChange, onMonthChange = _param.onMonthChange, onCalendarOpen = _param.onCalendarOpen, onCalendarClose = _param.onCalendarClose, onChangeDate = _param.onChangeDate, onChangeRange = _param.onChangeRange, onBlur = _param.onBlur, onFocus = _param.onFocus, onKeyDown = _param.onKeyDown, tweakStyles = _param.tweakStyles, inputProps = _object_without_properties$4(_param, [
     "data",
-    "tweakStyles",
     "selectedDate",
     "minDate",
     "maxDate",
     "endDate",
     "startDate",
-    "size",
-    "isRange",
     "locale",
     "months",
-    "calendarStartDay",
-    "leftPosition",
     "topPosition",
-    "isInline",
-    "isNeedClearSelectedDate",
+    "leftPosition",
+    "calendarStartDay",
     "dateFormat",
     "monthsShown",
     "placeholder",
-    "shouldGiveValueOnType",
+    "isRange",
+    "isInline",
+    "isDisabled",
+    "isClearable",
+    "focusSelectedMonth",
     "disabledKeyboardNavigation",
     "shouldRenderPopperInBody",
-    "popperModifiers",
+    "allowSameDay",
+    "shouldCloseOnSelect",
     "showPreviousMonths",
+    "preventOpenOnFocus",
+    "popperModifiers",
     "popperPlacement",
+    "todayButton",
+    "calendarContainer",
+    "dayClassName",
+    "customInput",
+    "customInputRef",
+    "renderCustomHeader",
+    "filterDate",
+    "onYearChange",
+    "onMonthChange",
+    "onCalendarOpen",
+    "onCalendarClose",
     "onChangeDate",
     "onChangeRange",
-    "customHeader",
-    "filterDate"
+    "onBlur",
+    "onFocus",
+    "onKeyDown",
+    "tweakStyles"
   ]);
-  var classes = useTheme("DatePicker", styles$r, tweakStyles, {
+  var _useTheme = useTheme("DatePicker", styles$r, tweakStyles, {
     leftPosition,
     topPosition
-  }).classes;
+  }), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
+  var tweakDateInputStyles = useTweakStyles(componentStyles, tweakStyles, "tweakDateInput");
+  var _useMemo = useMemo(function() {
+    return {
+      formatDate: getDateFormatter(dateFormat),
+      parseDateValue: getDateValueParser(dateFormat)
+    };
+  }, [
+    dateFormat
+  ]), formatDate = _useMemo.formatDate, parseDateValue = _useMemo.parseDateValue;
   var _useState = _sliced_to_array$i(useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
-  var _useState1 = _sliced_to_array$i(useState(selectedDate), 2), date = _useState1[0], setDate = _useState1[1];
-  var _useState2 = _sliced_to_array$i(useState(selectedDate ? format$1(selectedDate, dateFormat) : ""), 2), dateValue = _useState2[0], setDateValue = _useState2[1];
-  var _useState3 = _sliced_to_array$i(useState(startDate), 2), start2 = _useState3[0], setStart = _useState3[1];
+  var _useState1 = _sliced_to_array$i(useState(formatDate(selectedDate)), 2), dateValue = _useState1[0], setDateValue = _useState1[1];
+  var _useState2 = _sliced_to_array$i(useState(startDate), 2), start2 = _useState2[0], setStart = _useState2[1];
+  var _useState3 = _sliced_to_array$i(useState(formatDate(startDate)), 2), startDateValue = _useState3[0], setStartDateValue = _useState3[1];
   var _useState4 = _sliced_to_array$i(useState(endDate), 2), end2 = _useState4[0], setEnd = _useState4[1];
-  var _useState5 = _sliced_to_array$i(useState(startDate ? format$1(startDate, dateFormat) : ""), 2), startDateValue = _useState5[0], setStartDateValue = _useState5[1];
-  var _useState6 = _sliced_to_array$i(useState(endDate ? format$1(endDate, dateFormat) : ""), 2), endDateValue = _useState6[0], setEndDateValue = _useState6[1];
-  var isDateValid = function(value) {
-    return isValid(parse(value, dateFormat, new Date()));
+  var _useState5 = _sliced_to_array$i(useState(formatDate(endDate)), 2), endDateValue = _useState5[0], setEndDateValue = _useState5[1];
+  var hasDateInputValue = isRange ? isStringNotEmpty(startDateValue) || isStringNotEmpty(endDateValue) : isStringNotEmpty(dateValue);
+  var dateInputProps = _object_spread$t(_object_spread_props$n(_object_spread$t({}, inputProps), {
+    isRange,
+    isDisabled,
+    isClearable,
+    isActive: isOpen,
+    iconType: isClearable && hasDateInputValue ? void 0 : "calendar",
+    tweakStyles: tweakDateInputStyles
+  }), isRange ? {
+    startDate: startDateValue,
+    endDate: endDateValue
+  } : {
+    date: dateValue
+  });
+  var handleChangeDate = function(value, event) {
+    onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(value, event);
   };
-  var parseStringToDate = function(value) {
-    return parse(value, dateFormat, new Date());
+  var isDateInRange = function(date) {
+    return (isEmpty(minDate) || isAfter(date, minDate)) && (isEmpty(maxDate) || isBefore(date, maxDate));
   };
-  var handleDateChange = useCallback(function(newDate) {
-    if (onChangeDate) {
-      if (!newDate) {
-        onChangeDate(null, newDate);
-      }
-      if (newDate && isDateValid(newDate)) {
-        onChangeDate(parseStringToDate(newDate));
-      }
+  var handleChangeRange = function(value, event) {
+    if (allowSameDay || !areDatesEquals(value === null || value === void 0 ? void 0 : value[0], startDate) || !areDatesEquals(value === null || value === void 0 ? void 0 : value[1], endDate)) {
+      var _value_;
+      setStart((_value_ = value === null || value === void 0 ? void 0 : value[0]) !== null && _value_ !== void 0 ? _value_ : null);
+      var _value_1;
+      setEnd((_value_1 = value === null || value === void 0 ? void 0 : value[1]) !== null && _value_1 !== void 0 ? _value_1 : null);
+      onChangeRange === null || onChangeRange === void 0 ? void 0 : onChangeRange(value, event);
     }
-    setDateValue(newDate);
-  }, [
-    onChangeDate
-  ]);
-  var handleRangeChange = useCallback(function(newDate) {
-    if (!newDate && onChangeRange) {
-      onChangeRange(null);
-      setStartDateValue("");
-      setEndDateValue("");
-    }
-    var newStartDate = newDate.slice(0, 10);
-    var newEndDate = newDate.slice(13);
-    setStartDateValue(newStartDate);
-    setEndDateValue(newEndDate);
-    if (newStartDate && isDateValid(newStartDate)) {
-      setStart(parseStringToDate(newStartDate));
-    }
-    if (newEndDate && isDateValid(newEndDate)) {
-      setEnd(parseStringToDate(newEndDate));
-    }
-    if (newStartDate && newEndDate && isDateValid(newStartDate) && isDateValid(newEndDate) && onChangeRange) {
-      onChangeRange([
-        parseStringToDate(newStartDate),
-        parseStringToDate(newEndDate)
+  };
+  var handleChangeDateRangeInput = function(value) {
+    var newStartDateValue = value.slice(0, 10);
+    var newStart = parseDateValue(newStartDateValue);
+    var newEndDateValue = value.slice(13);
+    var newEnd = parseDateValue(newEndDateValue);
+    if (isNotEmpty(newStart) && !isValid(newStart) || isNotEmpty(newStart) && !isDateInRange(newStart)) {
+      newStart = start2;
+    }
+    if (isNotEmpty(newEnd) && !isValid(newEnd) || isNotEmpty(newEnd) && !isDateInRange(newEnd)) {
+      newEnd = end2;
+    }
+    if (isEmpty(newStart) && isValid(newEnd) || // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    isValid(newStart) && isValid(newEnd) && isAfter(newStart, newEnd)) {
+      newStart = newEnd;
+      newEnd = null;
+    }
+    setStartDateValue(newStartDateValue);
+    setStart(newStart);
+    setEndDateValue(newEndDateValue);
+    setEnd(newEnd);
+  };
+  var handleDateInputBlur = function(event) {
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    setDateValue(formatDate(selectedDate));
+  };
+  var setDateRangeValues = function() {
+    var startValue = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : null, endValue = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : null;
+    var convertedStartDate = formatDate(startValue);
+    var convertedEndDate = formatDate(endValue);
+    if (convertedStartDate === "" && convertedEndDate !== "") {
+      convertedStartDate = EMPTY_DATE_INPUT_VALUE;
+    }
+    setStart(startValue);
+    setStartDateValue(convertedStartDate);
+    setEnd(endValue);
+    setEndDateValue(convertedEndDate);
+  };
+  var handleDateRangeInputBlur = function(event) {
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    handleChangeRange([
+      start2,
+      end2
+    ], event);
+    setDateRangeValues(start2, end2);
+  };
+  var handleOpenCalendar = function() {
+    setIsOpen(true);
+    onCalendarOpen === null || onCalendarOpen === void 0 ? void 0 : onCalendarOpen();
+  };
+  var handleCloseCalendar = function() {
+    setIsOpen(false);
+    if (isRange) {
+      handleChangeRange([
+        start2,
+        end2
       ]);
+      setDateRangeValues(start2, end2);
+    } else {
+      setDateValue(formatDate(selectedDate));
     }
-  }, [
-    onChangeRange
-  ]);
-  useEffect(function() {
-    setDateValue("");
-  }, [
-    isNeedClearSelectedDate
-  ]);
+    onCalendarClose === null || onCalendarClose === void 0 ? void 0 : onCalendarClose();
+  };
   useEffect(function() {
-    setDate(selectedDate);
-    setStart(startDate);
-    setEnd(endDate);
-    setStartDateValue(startDate ? format$1(startDate, dateFormat) : "");
-    setEndDateValue(endDate ? format$1(endDate, dateFormat) : "");
-    setDateValue(selectedDate ? format$1(selectedDate, dateFormat) : "");
+    setDateValue(formatDate(selectedDate));
+    setDateRangeValues(startDate, endDate);
   }, [
     selectedDate,
     startDate,
     endDate
   ]);
-  var onTabConfirm = function(event) {
-    if (event.key === "9") {
-      setIsOpen(false);
-    }
-  };
-  useEffect(function() {
-    document.addEventListener("keydown", onTabConfirm);
-    return function() {
-      return document.removeEventListener("keydown", onTabConfirm);
-    };
-  }, []);
-  var handleBlur = function(e) {
-    if (inputProps.onBlur) {
-      inputProps.onBlur(e);
-    }
-    if (shouldGiveValueOnType && onChangeDate && !isDateValid(dateValue)) {
-      onChangeDate(null, dateValue);
-      return;
-    }
-    if (onChangeDate && date) {
-      if (!isDateValid(dateValue)) {
-        onChangeDate(null);
-        setDateValue("");
-      } else if (maxDate && isAfter(date, maxDate)) {
-        onChangeDate(maxDate);
-      } else if (minDate && isAfter(minDate, date)) {
-        onChangeDate(minDate);
-      }
-    }
-  };
-  var handleRangeBlur = function(e) {
-    if (inputProps.onBlur) {
-      inputProps.onBlur(e);
-    }
-    if (onChangeRange && start2 && end2) {
-      if (!isDateValid(startDateValue) && endDateValue) {
-        setStartDateValue(placeholder);
-      }
-      if (!isDateValid(endDateValue)) {
-        setEndDateValue("");
-      } else if (maxDate && isAfter(start2, maxDate)) {
-        onChangeRange([
-          maxDate,
-          end2
-        ]);
-      } else if (minDate && isAfter(minDate, end2)) {
-        onChangeRange([
-          start2,
-          start2
-        ]);
-      }
-    }
-  };
-  var datePickerProps = {
-    dateFormat,
-    calendarStartDay,
-    locale: locale2,
-    popperModifiers,
-    popperPlacement,
-    monthsShown,
-    showPreviousMonths,
-    disabledKeyboardNavigation,
-    inline: isInline,
-    disabled: inputProps.isDisabled,
-    showPopperArrow: false,
-    popperClassName: classes.popper,
-    calendarClassName: classes.datepicker,
-    popperContainer: shouldRenderPopperInBody ? PopperContainer : void 0,
-    selectsRange: isRange,
-    onChange: function() {
-      return null;
-    },
-    dayClassName: function() {
-      return classes.day;
-    },
-    filterDate
-  };
-  var dateInputProps = _object_spread_props$n(_object_spread$t({}, inputProps), {
-    tweakStyles,
-    iconType: inputProps.isClearable && dateValue !== "" ? void 0 : "calendar",
-    isRange,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onChange: function() {
-    }
-  });
-  if (onChangeRange) {
-    datePickerProps = _object_spread_props$n(_object_spread$t({}, datePickerProps), {
-      startDate: start2,
-      endDate: end2,
-      selectsRange: true,
-      selected: startDate,
-      onChange: onChangeRange
-    });
-    dateInputProps = _object_spread_props$n(_object_spread$t({}, dateInputProps), {
-      startDate: startDateValue,
-      endDate: endDateValue,
-      onBlur: handleRangeBlur,
-      onChange: handleRangeChange
-    });
-  }
-  if (onChangeDate) {
-    datePickerProps = _object_spread_props$n(_object_spread$t({}, datePickerProps), {
-      selected: date,
-      onChange: function(newDate) {
-        return onChangeDate(newDate);
-      },
-      onCalendarOpen: function() {
-        return setIsOpen(true);
-      },
-      onCalendarClose: function() {
-        return setIsOpen(false);
-      },
-      minDate,
-      maxDate
-    });
-    dateInputProps = _object_spread_props$n(_object_spread$t({}, dateInputProps), {
-      date: dateValue,
-      isActive: isOpen,
-      onBlur: handleBlur,
-      onChange: handleDateChange
-    });
-  }
   return /* @__PURE__ */ jsx("div", _object_spread_props$n(_object_spread$t({
     className: classes.root
   }, addDataAttributes(data)), {
-    children: /* @__PURE__ */ jsx(Datepicker, _object_spread_props$n(_object_spread$t({}, datePickerProps), {
-      customInput: /* @__PURE__ */ jsx(DatePickerInput, {
-        size,
-        children: /* @__PURE__ */ jsx(DateInput, _object_spread$t({}, dateInputProps))
-      }),
-      renderCustomHeader: customHeader !== void 0 ? customHeader : function(param) {
-        var renderDate = param.date, changeYear = param.changeYear, changeMonth = param.changeMonth, decreaseMonth = param.decreaseMonth, increaseMonth = param.increaseMonth, prevMonthButtonDisabled = param.prevMonthButtonDisabled, nextMonthButtonDisabled = param.nextMonthButtonDisabled;
-        return /* @__PURE__ */ jsx(DatePickerHeader, {
-          date: renderDate,
-          changeMonth,
-          changeYear,
-          decreaseMonth,
-          increaseMonth,
-          isPrevMonthButtonDisabled: prevMonthButtonDisabled,
-          isNextMonthButtonDisabled: nextMonthButtonDisabled,
+    children: /* @__PURE__ */ jsx(DatePickerComponent, _object_spread$t({
+      ref,
+      minDate,
+      maxDate,
+      locale: locale2,
+      dateFormat,
+      placeholderText: placeholder,
+      calendarStartDay,
+      inline: isInline,
+      disabled: isDisabled,
+      showPreviousMonths,
+      focusSelectedMonth,
+      monthsShown,
+      allowSameDay,
+      showPopperArrow: false,
+      popperClassName: classes.popper,
+      calendarClassName: classes.datepicker,
+      dayClassName: function(v) {
+        return clsx(classes.day, dayClassName === null || dayClassName === void 0 ? void 0 : dayClassName(v));
+      },
+      disabledKeyboardNavigation,
+      popperContainer: shouldRenderPopperInBody ? PopperContainer : void 0,
+      popperModifiers,
+      popperPlacement,
+      selectsRange: isRange,
+      preventOpenOnFocus,
+      shouldCloseOnSelect,
+      customInputRef,
+      customInput: /* @__PURE__ */ jsx(CustomInput, _object_spread$t({}, dateInputProps)),
+      renderCustomHeader: renderCustomHeader !== null && renderCustomHeader !== void 0 ? renderCustomHeader : function(baseProps) {
+        return /* @__PURE__ */ jsx(DatePickerHeader, _object_spread_props$n(_object_spread$t({}, baseProps), {
           months
-        });
+        }));
+      },
+      todayButton,
+      calendarContainer,
+      filterDate,
+      onYearChange,
+      onMonthChange,
+      onFocus,
+      onKeyDown,
+      onCalendarOpen: handleOpenCalendar,
+      onCalendarClose: handleCloseCalendar,
+      onChangeRaw: function(_, value) {
+        if (value === void 0) {
+          return;
+        }
+        if (isRange) {
+          handleChangeDateRangeInput(value);
+        } else {
+          setDateValue(value);
+        }
       }
+    }, isRange ? {
+      startDate: start2,
+      endDate: end2,
+      selected: start2,
+      onBlur: handleDateRangeInputBlur,
+      onChange: handleChangeRange
+    } : {
+      selected: selectedDate,
+      onBlur: handleDateInputBlur,
+      onChange: handleChangeDate
     }))
   }));
-};
+});
 var styles$q = {
   root: {},
   button: {
@@ -13981,26 +13947,24 @@ var FilterWithDates = function(param) {
     localeKey,
     locale2
   ]);
-  var _useState2 = _sliced_to_array$c(useState(false), 2), isNeedClearSelectedDate = _useState2[0], setNeedClearSelectedDate = _useState2[1];
   var topPosition = !isClearable && onStartBtnSubmit === void 0 ? 28 : 60;
   var handleClear = function() {
     onEndBtnSubmit();
-    setNeedClearSelectedDate(!isNeedClearSelectedDate);
   };
   var ref = useRef(null);
   var isOpenCalendar = isOpenFrom || isOpenTo;
   var handleFromSelected = function(val) {
-    var _value_to2;
+    var _value_to;
     onChange({
       from: val,
-      to: (_value_to2 = value === null || value === void 0 ? void 0 : value.to) !== null && _value_to2 !== void 0 ? _value_to2 : null
+      to: (_value_to = value === null || value === void 0 ? void 0 : value.to) !== null && _value_to !== void 0 ? _value_to : null
     });
     setOpenFrom(false);
   };
   var handleToSelected = function(val) {
-    var _value_from2;
+    var _value_from;
     onChange({
-      from: (_value_from2 = value === null || value === void 0 ? void 0 : value.from) !== null && _value_from2 !== void 0 ? _value_from2 : null,
+      from: (_value_from = value === null || value === void 0 ? void 0 : value.from) !== null && _value_from !== void 0 ? _value_from : null,
       to: val
     });
     setOpenTo(false);
@@ -14012,10 +13976,10 @@ var FilterWithDates = function(param) {
         to: val
       });
     } else {
-      var _value_to2;
+      var _value_to;
       onChange({
         from: val,
-        to: (_value_to2 = value === null || value === void 0 ? void 0 : value.to) !== null && _value_to2 !== void 0 ? _value_to2 : null
+        to: (_value_to = value === null || value === void 0 ? void 0 : value.to) !== null && _value_to !== void 0 ? _value_to : null
       });
     }
   };
@@ -14026,16 +13990,16 @@ var FilterWithDates = function(param) {
         to: value.from
       });
     } else {
-      var _value_from2;
+      var _value_from;
       onChange({
-        from: (_value_from2 = value === null || value === void 0 ? void 0 : value.from) !== null && _value_from2 !== void 0 ? _value_from2 : null,
+        from: (_value_from = value === null || value === void 0 ? void 0 : value.from) !== null && _value_from !== void 0 ? _value_from : null,
         to: val
       });
     }
   };
   var tweakClearButtonStyles = useTweakStyles(componentStyles, tweakStyles, "tweakClearButton");
   var tweakBackButtonStyles = useTweakStyles(componentStyles, tweakStyles, "tweakBackButton");
-  var _value_from, _value_to, _ref;
+  var _ref;
   return /* @__PURE__ */ jsxs("div", _object_spread_props$h(_object_spread$j({
     className: classes.root
   }, addDataAttributes(data)), {
@@ -14046,7 +14010,7 @@ var FilterWithDates = function(param) {
           /* @__PURE__ */ jsx("div", {
             className: classes.containerItem,
             children: /* @__PURE__ */ jsx(DatePicker, _object_spread$j({
-              selectedDate: (_value_from = value === null || value === void 0 ? void 0 : value.from) !== null && _value_from !== void 0 ? _value_from : null,
+              selectedDate: value === null || value === void 0 ? void 0 : value.from,
               maxDate: value === null || value === void 0 ? void 0 : value.to,
               label: translates.from,
               months: translates.months,
@@ -14054,16 +14018,15 @@ var FilterWithDates = function(param) {
               onChangeDate: handleChangeFrom,
               leftPosition: -20,
               topPosition,
-              isNeedClearSelectedDate,
               border: "bottom",
-              testId: testId !== void 0 ? "".concat(testId, "-from") : void 0,
+              testId: getTestId(testId, "from"),
               isClearable
             }, startPickerProps))
           }),
           /* @__PURE__ */ jsx("div", {
             className: classes.containerItem,
             children: /* @__PURE__ */ jsx(DatePicker, _object_spread$j({
-              selectedDate: (_value_to = value === null || value === void 0 ? void 0 : value.to) !== null && _value_to !== void 0 ? _value_to : null,
+              selectedDate: value === null || value === void 0 ? void 0 : value.to,
               label: translates.to,
               months: translates.months,
               minDate: value === null || value === void 0 ? void 0 : value.from,
@@ -14071,9 +14034,8 @@ var FilterWithDates = function(param) {
               onChangeDate: handleChangeTo,
               topPosition,
               leftPosition: -170,
-              isNeedClearSelectedDate,
               border: "bottom",
-              testId: testId !== void 0 ? "".concat(testId, "-to") : void 0,
+              testId: getTestId(testId, "to"),
               isClearable
             }, endPickerProps))
           })
@@ -14087,7 +14049,7 @@ var FilterWithDates = function(param) {
               onClick: handleClear,
               size: "s",
               view: "text",
-              testId: testId !== void 0 ? "".concat(testId, "-clear-button") : void 0,
+              testId: getTestId(testId, "clear-button"),
               isFullWidth: true,
               tweakStyles: tweakClearButtonStyles,
               children: translates.clear
@@ -28057,6 +28019,8 @@ export {
   DateInput,
   DatePicker,
   Description,
+  EMPTY_DATE_INPUT_VALUE,
+  EMPTY_DATE_RANGE_INPUT_VALUE,
   FilterInterval,
   FilterLocales,
   FilterMultiSelect,
@@ -28121,6 +28085,7 @@ export {
   hasExactParent,
   isElementOffScreen,
   isElementOneOfParents,
+  isEmpty,
   isInt,
   isNotEmpty,
   isSpaceChar,