@true-engineering/true-react-common-ui-kit 1.12.1 → 2.0.1

package/dist/true-react-common-ui-kit.umd.cjs

@@ -1,6 +1,6 @@
 (function(global2, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react-transition-group"), require("clsx"), require("hex-to-rgba"), require("react-jss"), require("react-input-mask"), require("react-datepicker"), require("date-fns"), require("react-overlays"), require("scroll-into-view-if-needed"), require("ts-debounce"), require("country-flag-icons"), require("react-remove-scroll")) : typeof define === "function" && define.amd ? define(["exports", "react", "react-transition-group", "clsx", "hex-to-rgba", "react-jss", "react-input-mask", "react-datepicker", "date-fns", "react-overlays", "scroll-into-view-if-needed", "ts-debounce", "country-flag-icons", "react-remove-scroll"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.TrueReactKitUiKit = {}, global2.React, global2.reactTransitionGroup, global2.clsx, global2.hexToRgba, global2.reactJss, global2.InputMask, global2.ReactDatepicker, global2.dateFns, global2.reactOverlays, global2.scrollIntoViewIfNeeded, global2.tsDebounce, global2.countryFlagIcons, global2.reactRemoveScroll));
-})(this, function(exports2, React, reactTransitionGroup, clsx, hexToRgba, reactJss, InputMask, ReactDatepicker, dateFns, reactOverlays, scrollIntoViewIfNeeded, tsDebounce, countryFlagIcons, reactRemoveScroll) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react-transition-group"), require("clsx"), require("hex-to-rgba"), require("react-jss"), require("react-input-mask"), require("react-datepicker"), require("date-fns"), require("react-overlays"), require("scroll-into-view-if-needed"), require("ts-debounce"), require("country-flag-icons"), require("react-remove-scroll")) : typeof define === "function" && define.amd ? define(["exports", "react", "react-transition-group", "clsx", "hex-to-rgba", "react-jss", "react-input-mask", "react-datepicker", "date-fns", "react-overlays", "scroll-into-view-if-needed", "ts-debounce", "country-flag-icons", "react-remove-scroll"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.TrueReactKitUiKit = {}, global2.React, global2.reactTransitionGroup, global2.clsx, global2.hexToRgba, global2.reactJss, global2.InputMask, global2.ReactDatePicker, global2.dateFns, global2.reactOverlays, global2.scrollIntoViewIfNeeded, global2.tsDebounce, global2.countryFlagIcons, global2.reactRemoveScroll));
+})(this, function(exports2, React, reactTransitionGroup, clsx, hexToRgba, reactJss, InputMask, ReactDatePicker, dateFns, reactOverlays, scrollIntoViewIfNeeded, tsDebounce, countryFlagIcons, reactRemoveScroll) {
   "use strict";
   var colors = {
     FONT_MAIN: "#222a37",
@@ -1292,6 +1292,9 @@
   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() !== "";
   };
@@ -1340,17 +1343,19 @@
       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);
         });
       });
     };
@@ -4958,63 +4963,63 @@
       ]
     });
   };
-  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
@@ -5060,7 +5065,7 @@
       }
     });
   };
-  var styles$K = {
+  var styles$J = {
     root: {
       display: "flex",
       alignItems: "center"
@@ -5123,7 +5128,7 @@
   };
   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)), {
@@ -5137,7 +5142,7 @@
   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,
@@ -5234,7 +5239,7 @@
   }
   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();
@@ -5331,7 +5336,7 @@
     }
     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"
     },
@@ -5488,7 +5493,7 @@
   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 = React.useRef(null);
@@ -5555,7 +5560,7 @@
       ]
     }));
   };
-  var styles$H = {
+  var styles$G = {
     root: {
       display: "flex",
       alignItems: "center",
@@ -5635,7 +5640,7 @@
   }
   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),
@@ -5655,7 +5660,7 @@
       ]
     }));
   };
-  var styles$G = {
+  var styles$F = {
     root: {
       display: "flex",
       gap: 4,
@@ -5700,7 +5705,7 @@
   };
   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", {
@@ -5764,7 +5769,7 @@
       ]
     });
   };
-  var styles$F = {
+  var styles$E = {
     root: {
       display: "flex",
       width: "100%",
@@ -5774,7 +5779,7 @@
   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 = React.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;
@@ -5786,7 +5791,7 @@
       }
     }) : /* @__PURE__ */ jsx(PreloaderIcon, {});
   };
-  var styles$E = {
+  var styles$D = {
     root: {
       display: "flex"
     },
@@ -5852,7 +5857,7 @@
   }
   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))
@@ -5865,7 +5870,7 @@
       })
     }));
   };
-  var styles$D = {
+  var styles$C = {
     root: {
       display: "flex",
       justifyContent: "center",
@@ -6098,7 +6103,7 @@
   ];
   var Button = /* @__PURE__ */ React.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 = React.useMemo(function() {
       return merge$1({}, size === "s" || size === "m" ? dotsPreloaderStyles : void 0, componentStyles.tweakPreloader, tweakStyles === null || tweakStyles === void 0 ? void 0 : tweakStyles.tweakPreloader);
     }, [
@@ -6145,7 +6150,7 @@
       ]
     }));
   });
-  var styles$C = {
+  var styles$B = {
     root: {
       cursor: "pointer",
       display: "flex",
@@ -6313,7 +6318,7 @@
   }
   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
@@ -6361,7 +6366,7 @@
       ]
     }));
   }
-  var styles$B = {
+  var styles$A = {
     root: {
       width: 40,
       height: 40,
@@ -6440,7 +6445,7 @@
   }
   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,
@@ -6452,7 +6457,7 @@
       })
     }));
   };
-  var styles$A = {
+  var styles$z = {
     root: {
       display: "flex",
       flexWrap: "wrap"
@@ -6545,7 +6550,7 @@
       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 = React.useContext(ThemeContext).theme;
     var _theme_colors = theme.colors, colors2 = _theme_colors === void 0 ? {} : _theme_colors;
     return /* @__PURE__ */ jsx("div", {
@@ -6575,7 +6580,7 @@
       })
     });
   };
-  var styles$z = {
+  var styles$y = {
     "@global html, body": {
       fontFamily: "Arial, sans-serif",
       color: colors.FONT_MAIN,
@@ -6614,14 +6619,14 @@
   }
   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",
@@ -7144,7 +7149,7 @@
   var DEFAULT_SIZE = 6;
   var Input = /* @__PURE__ */ React.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(React.useState(false), 2), isFocused = _useState[0], setFocused = _useState[1];
     var inputRef = React.useRef(null);
     var handleChange = function(event) {
@@ -7285,12 +7290,14 @@
       ]
     });
   });
-  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: {}
   };
@@ -7378,71 +7385,57 @@
     }
     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__ */ React.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__ */ React.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");
@@ -8830,11 +8823,17 @@
       ]
     });
     React.useEffect(function() {
-      var val = isMultiSelect ? value === null || value === void 0 ? void 0 : value[0] : value;
       var _optionsIndexesForNavigation_find;
       setFocusedListCellIndex((_optionsIndexesForNavigation_find = optionsIndexesForNavigation.find(function(index) {
-        return filteredOptions[index] === val;
+        return isNotEmpty(strValue) && isNotEmpty(filteredOptions[index]) && convertToId(filteredOptions[index]) === convertToId(strValue);
       })) !== null && _optionsIndexesForNavigation_find !== void 0 ? _optionsIndexesForNavigation_find : optionsIndexesForNavigation[0]);
+    }, [
+      strValue,
+      filteredOptions,
+      optionsIndexesForNavigation,
+      convertToId
+    ]);
+    React.useEffect(function() {
       if (isOpen) {
         onOpen === null || onOpen === void 0 ? void 0 : onOpen();
       }
@@ -9007,20 +9006,13 @@
     }
   };
   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 = React.useMemo(function() {
       return Array.from(Array(41)).map(function(_, i) {
         return dateFns.getYear(new Date()) - 30 + i;
       });
     }, []);
-    var getMonthNumber = React.useCallback(function(month) {
-      return months.findIndex(function(m) {
-        return m === month;
-      });
-    }, [
-      months
-    ]);
     return /* @__PURE__ */ jsxs("div", {
       className: classes.header,
       children: [
@@ -9036,11 +9028,11 @@
               children: /* @__PURE__ */ jsx(Select, {
                 value: months[dateFns.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));
+                }
               })
             })
           ]
@@ -9057,11 +9049,11 @@
               children: /* @__PURE__ */ jsx(Select, {
                 value: dateFns.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);
+                }
               })
             })
           ]
@@ -9070,19 +9062,19 @@
           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"
               })
@@ -9092,43 +9084,38 @@
       ]
     });
   };
+  var getDateFormatter = function(dateFormat) {
+    return function(date) {
+      return isNotEmpty(date) ? dateFns.format(date, dateFormat) : "";
+    };
+  };
+  var getDateValueParser = function(dateFormat) {
+    return function(value) {
+      var inputValue = value === EMPTY_DATE_INPUT_VALUE ? "" : value;
+      return isStringNotEmpty(inputValue) ? dateFns.parse(value, dateFormat, new Date()) : null;
+    };
+  };
+  var areDatesEquals = function(date1, date2) {
+    return isEmpty(date1) && isEmpty(date2) || isNotEmpty(date1) && isNotEmpty(date2) && dateFns.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
       },
@@ -9141,7 +9128,8 @@
       '&[data-placement^="right"]': {
         paddingLeft: 6
       }
-    }
+    },
+    tweakDateInput: {}
   };
   function _array_like_to_array$i(arr, len) {
     if (len == null || len > arr.length)
@@ -9285,8 +9273,8 @@
     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(reactOverlays.Portal, {
@@ -9294,257 +9282,240 @@
       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__ */ React.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 = React.useMemo(function() {
+      return {
+        formatDate: getDateFormatter(dateFormat),
+        parseDateValue: getDateValueParser(dateFormat)
+      };
+    }, [
+      dateFormat
+    ]), formatDate = _useMemo.formatDate, parseDateValue = _useMemo.parseDateValue;
     var _useState = _sliced_to_array$i(React.useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
-    var _useState1 = _sliced_to_array$i(React.useState(selectedDate), 2), date = _useState1[0], setDate = _useState1[1];
-    var _useState2 = _sliced_to_array$i(React.useState(selectedDate ? dateFns.format(selectedDate, dateFormat) : ""), 2), dateValue = _useState2[0], setDateValue = _useState2[1];
-    var _useState3 = _sliced_to_array$i(React.useState(startDate), 2), start2 = _useState3[0], setStart = _useState3[1];
+    var _useState1 = _sliced_to_array$i(React.useState(formatDate(selectedDate)), 2), dateValue = _useState1[0], setDateValue = _useState1[1];
+    var _useState2 = _sliced_to_array$i(React.useState(startDate), 2), start2 = _useState2[0], setStart = _useState2[1];
+    var _useState3 = _sliced_to_array$i(React.useState(formatDate(startDate)), 2), startDateValue = _useState3[0], setStartDateValue = _useState3[1];
     var _useState4 = _sliced_to_array$i(React.useState(endDate), 2), end2 = _useState4[0], setEnd = _useState4[1];
-    var _useState5 = _sliced_to_array$i(React.useState(startDate ? dateFns.format(startDate, dateFormat) : ""), 2), startDateValue = _useState5[0], setStartDateValue = _useState5[1];
-    var _useState6 = _sliced_to_array$i(React.useState(endDate ? dateFns.format(endDate, dateFormat) : ""), 2), endDateValue = _useState6[0], setEndDateValue = _useState6[1];
-    var isDateValid = function(value) {
-      return dateFns.isValid(dateFns.parse(value, dateFormat, new Date()));
+    var _useState5 = _sliced_to_array$i(React.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 dateFns.parse(value, dateFormat, new Date());
+    var isDateInRange = function(date) {
+      return (isEmpty(minDate) || dateFns.isAfter(date, minDate)) && (isEmpty(maxDate) || dateFns.isBefore(date, maxDate));
     };
-    var handleDateChange = React.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 = React.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) && !dateFns.isValid(newStart) || isNotEmpty(newStart) && !isDateInRange(newStart)) {
+        newStart = start2;
+      }
+      if (isNotEmpty(newEnd) && !dateFns.isValid(newEnd) || isNotEmpty(newEnd) && !isDateInRange(newEnd)) {
+        newEnd = end2;
+      }
+      if (isEmpty(newStart) && dateFns.isValid(newEnd) || // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      dateFns.isValid(newStart) && dateFns.isValid(newEnd) && dateFns.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
-    ]);
-    React.useEffect(function() {
-      setDateValue("");
-    }, [
-      isNeedClearSelectedDate
-    ]);
+      onCalendarClose === null || onCalendarClose === void 0 ? void 0 : onCalendarClose();
+    };
     React.useEffect(function() {
-      setDate(selectedDate);
-      setStart(startDate);
-      setEnd(endDate);
-      setStartDateValue(startDate ? dateFns.format(startDate, dateFormat) : "");
-      setEndDateValue(endDate ? dateFns.format(endDate, dateFormat) : "");
-      setDateValue(selectedDate ? dateFns.format(selectedDate, dateFormat) : "");
+      setDateValue(formatDate(selectedDate));
+      setDateRangeValues(startDate, endDate);
     }, [
       selectedDate,
       startDate,
       endDate
     ]);
-    var onTabConfirm = function(event) {
-      if (event.key === "9") {
-        setIsOpen(false);
-      }
-    };
-    React.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 && dateFns.isAfter(date, maxDate)) {
-          onChangeDate(maxDate);
-        } else if (minDate && dateFns.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 && dateFns.isAfter(start2, maxDate)) {
-          onChangeRange([
-            maxDate,
-            end2
-          ]);
-        } else if (minDate && dateFns.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: {
@@ -13973,26 +13944,24 @@
       localeKey,
       locale2
     ]);
-    var _useState2 = _sliced_to_array$c(React.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 = React.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);
@@ -14004,10 +13973,10 @@
           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
         });
       }
     };
@@ -14018,16 +13987,16 @@
           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)), {
@@ -14038,7 +14007,7 @@
             /* @__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,
@@ -14046,16 +14015,15 @@
                 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,
@@ -14063,9 +14031,8 @@
                 onChangeDate: handleChangeTo,
                 topPosition,
                 leftPosition: -170,
-                isNeedClearSelectedDate,
                 border: "bottom",
-                testId: testId !== void 0 ? "".concat(testId, "-to") : void 0,
+                testId: getTestId(testId, "to"),
                 isClearable
               }, endPickerProps))
             })
@@ -14079,7 +14046,7 @@
                 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
@@ -28048,6 +28015,8 @@
   exports2.DateInput = DateInput;
   exports2.DatePicker = DatePicker;
   exports2.Description = Description;
+  exports2.EMPTY_DATE_INPUT_VALUE = EMPTY_DATE_INPUT_VALUE;
+  exports2.EMPTY_DATE_RANGE_INPUT_VALUE = EMPTY_DATE_RANGE_INPUT_VALUE;
   exports2.FilterInterval = FilterInterval;
   exports2.FilterLocales = FilterLocales;
   exports2.FilterMultiSelect = FilterMultiSelect;
@@ -28112,6 +28081,7 @@
   exports2.hasExactParent = hasExactParent;
   exports2.isElementOffScreen = isElementOffScreen;
   exports2.isElementOneOfParents = isElementOneOfParents;
+  exports2.isEmpty = isEmpty;
   exports2.isInt = isInt;
   exports2.isNotEmpty = isNotEmpty;
   exports2.isSpaceChar = isSpaceChar;