@true-engineering/true-react-common-ui-kit 2.3.0 → 2.3.2

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

@@ -1425,7 +1425,7 @@
   var isStringNotEmpty = trueReactPlatformHelpers.isStringNotEmpty;
   var isEmpty = trueReactPlatformHelpers.isEmpty;
   var isNotEmpty = function(val) {
-    return trueReactPlatformHelpers.isString(val) && isStringNotEmpty(val) || isNotEmpty(val);
+    return trueReactPlatformHelpers.isString(val) && trueReactPlatformHelpers.isStringNotEmpty(val) || trueReactPlatformHelpers.isNotEmpty(val);
   };
   var useIsMounted = function() {
     var isMounted = React.useRef(false);
@@ -4086,12 +4086,6 @@
       }
     });
   };
-  var styles$J = {
-    root: {
-      display: "flex",
-      alignItems: "center"
-    }
-  };
   var checkIcons = function(ico) {
     return ico;
   };
@@ -5007,6 +5001,12 @@
       ]
     });
   };
+  var styles$J = {
+    root: {
+      display: "flex",
+      alignItems: "center"
+    }
+  };
   function _define_property$M(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
@@ -5600,18 +5600,6 @@
     }));
   };
   var styles$F = {
-    root: {
-      display: "flex"
-    },
-    dots: {},
-    default: {},
-    logo: {},
-    currentColor: {
-      color: "currentColor"
-    },
-    tweakPreloaderComponent: {}
-  };
-  var styles$E = {
     root: {
       display: "flex",
       gap: 4,
@@ -5656,7 +5644,7 @@
   };
   var DotsPreloader = function(param) {
     var tweakStyles = param.tweakStyles;
-    var classes = useTheme("DotsPreloader", styles$E, tweakStyles).classes;
+    var classes = useTheme("DotsPreloader", styles$F, tweakStyles).classes;
     return /* @__PURE__ */ jsx("div", {
       className: classes.root,
       children: /* @__PURE__ */ jsx("span", {
@@ -5720,7 +5708,7 @@
       ]
     });
   };
-  var styles$D = {
+  var styles$E = {
     root: {
       display: "flex",
       width: "100%",
@@ -5730,7 +5718,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$D, 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;
@@ -5742,6 +5730,18 @@
       }
     }) : /* @__PURE__ */ jsx(PreloaderIcon, {});
   };
+  var styles$D = {
+    root: {
+      display: "flex"
+    },
+    dots: {},
+    default: {},
+    logo: {},
+    currentColor: {
+      color: "currentColor"
+    },
+    tweakPreloaderComponent: {}
+  };
   function _define_property$H(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
@@ -5796,7 +5796,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$F, 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))
@@ -7222,6 +7222,8 @@
       ]
     });
   });
+  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: {
       width: "100%",
@@ -7231,8 +7233,6 @@
     },
     tweakInput: {}
   };
-  var EMPTY_DATE_INPUT_VALUE = "__.__.____";
-  var EMPTY_DATE_RANGE_INPUT_VALUE = "".concat(EMPTY_DATE_INPUT_VALUE, " - ").concat(EMPTY_DATE_INPUT_VALUE);
   function _define_property$B(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
@@ -7368,40 +7368,8 @@
     }));
   });
   const reactDatepicker = "";
-  var styles$v = {
-    root: {
-      width: "100%",
-      height: "100%"
-    },
-    day: {},
-    datepicker: {},
-    popper: {
-      zIndex: 10,
-      marginTop: function(param) {
-        var topPosition = param.topPosition;
-        return topPosition;
-      },
-      marginLeft: function(param) {
-        var leftPosition = param.leftPosition;
-        return leftPosition;
-      },
-      '&[data-placement^="bottom"]': {
-        paddingTop: 6
-      },
-      '&[data-placement^="top"]': {
-        paddingBottom: 6
-      },
-      '&[data-placement^="left"]': {
-        paddingRight: 6
-      },
-      '&[data-placement^="right"]': {
-        paddingLeft: 6
-      }
-    },
-    tweakDateInput: {}
-  };
   var LEFT_PADDING = 44;
-  var styles$u = {
+  var styles$v = {
     root: {
       position: "relative"
     },
@@ -7529,7 +7497,7 @@
       "testId",
       "data"
     ]);
-    var _useTheme = useTheme("SearchInput", styles$u, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
+    var _useTheme = useTheme("SearchInput", styles$v, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
     var tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, "tweakInput");
     return /* @__PURE__ */ jsxs("div", _object_spread_props$q(_object_spread$y({
       className: classes.root
@@ -7552,84 +7520,6 @@
       ]
     }));
   };
-  var styles$t = {
-    root: {
-      width: "100%",
-      position: "relative",
-      boxSizing: "border-box"
-    },
-    inputWrapper: {
-      width: "100%",
-      cursor: "text",
-      position: "relative"
-    },
-    listWrapper: {
-      left: -1,
-      zIndex: 3,
-      width: "fit-content",
-      minWidth: "calc(100% + 1px)"
-    },
-    withoutPopper: {
-      position: "absolute",
-      top: "calc(100% + 6px)"
-    },
-    listWrapperInBody: {
-      minWidth: "auto",
-      width: "auto",
-      maxWidth: "min-content"
-    },
-    arrow: {
-      position: "absolute",
-      right: 12,
-      top: 14,
-      width: 20,
-      height: 20,
-      cursor: "pointer",
-      zIndex: 1,
-      transition: "transform 0.1s ease"
-    },
-    activeArrow: {
-      transform: "rotate(180deg)"
-    },
-    disabled: {
-      "& $arrow": {
-        cursor: "default"
-      }
-    },
-    counter: {
-      "&:not(:last-child)": {
-        paddingRight: 8
-      }
-    },
-    icon: {
-      width: 16,
-      height: 16
-    },
-    tweakInput: {
-      input: {
-        paddingRight: 32
-      },
-      disabled: {
-        "& $input": {
-          cursor: "default"
-        }
-      },
-      controls: {
-        paddingRight: 32
-      }
-    },
-    tweakSelectList: {},
-    tweakSearchInput: {
-      tweakInput: {
-        inputWrapper: {
-          height: 48,
-          borderRadius: 0,
-          border: "none",
-          backgroundColor: "transparent"
-        }
-      }
-    }
-  };
   function _assert_this_initialized(self2) {
     if (self2 === void 0) {
       throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
@@ -7885,7 +7775,7 @@
     10,
     20
   ];
-  var styles$s = {
+  var styles$u = {
     root: {
       borderRadius: dimensions.BORDER_RADIUS_SMALL,
       boxShadow: "0 13px 74px -27px rgba(0, 0, 0, 0.11)",
@@ -8052,7 +7942,7 @@
   }
   function SelectList(param) {
     var options = param.options, focusedIndex = param.focusedIndex, activeValue = param.activeValue, defaultOptionLabel = param.defaultOptionLabel, _param_noMatchesLabel = param.noMatchesLabel, noMatchesLabel = _param_noMatchesLabel === void 0 ? "Совпадений не найдено" : _param_noMatchesLabel, isLoading = param.isLoading, _param_loadingLabel = param.loadingLabel, loadingLabel = _param_loadingLabel === void 0 ? "Загрузка..." : _param_loadingLabel, tweakStyles = param.tweakStyles, testId = param.testId, _param_shouldScrollToList = param.shouldScrollToList, shouldScrollToList = _param_shouldScrollToList === void 0 ? true : _param_shouldScrollToList, areAllOptionsSelected = param.areAllOptionsSelected, customListHeader = param.customListHeader, isOptionDisabled = param.isOptionDisabled, allOptionsLabel = param.allOptionsLabel, onOptionSelect = param.onOptionSelect, onToggleCheckbox = param.onToggleCheckbox, convertValueToString = param.convertValueToString, _param_convertValueToReactNode = param.convertValueToReactNode, convertValueToReactNode = _param_convertValueToReactNode === void 0 ? convertValueToString : _param_convertValueToReactNode, convertValueToId = param.convertValueToId;
-    var classes = useTheme("SelectList", styles$s, tweakStyles).classes;
+    var classes = useTheme("SelectList", styles$u, tweakStyles).classes;
     var isMultiSelect = trueReactPlatformHelpers.isNotEmpty(onToggleCheckbox);
     var multiSelectValue = activeValue;
     var _multiSelectValue_length;
@@ -8166,6 +8056,84 @@
   var isMultiSelectValue = function(props, _value) {
     return props.isMultiSelect === true;
   };
+  var styles$t = {
+    root: {
+      width: "100%",
+      position: "relative",
+      boxSizing: "border-box"
+    },
+    inputWrapper: {
+      width: "100%",
+      cursor: "text",
+      position: "relative"
+    },
+    listWrapper: {
+      left: -1,
+      zIndex: 3,
+      width: "fit-content",
+      minWidth: "calc(100% + 1px)"
+    },
+    withoutPopper: {
+      position: "absolute",
+      top: "calc(100% + 6px)"
+    },
+    listWrapperInBody: {
+      minWidth: "auto",
+      width: "auto",
+      maxWidth: "min-content"
+    },
+    arrow: {
+      position: "absolute",
+      right: 12,
+      top: 14,
+      width: 20,
+      height: 20,
+      cursor: "pointer",
+      zIndex: 1,
+      transition: "transform 0.1s ease"
+    },
+    activeArrow: {
+      transform: "rotate(180deg)"
+    },
+    disabled: {
+      "& $arrow": {
+        cursor: "default"
+      }
+    },
+    counter: {
+      "&:not(:last-child)": {
+        paddingRight: 8
+      }
+    },
+    icon: {
+      width: 16,
+      height: 16
+    },
+    tweakInput: {
+      input: {
+        paddingRight: 32
+      },
+      disabled: {
+        "& $input": {
+          cursor: "default"
+        }
+      },
+      controls: {
+        paddingRight: 32
+      }
+    },
+    tweakSelectList: {},
+    tweakSearchInput: {
+      tweakInput: {
+        inputWrapper: {
+          height: 48,
+          borderRadius: 0,
+          border: "none",
+          backgroundColor: "transparent"
+        }
+      }
+    }
+  };
   function _array_like_to_array$j(arr, len) {
     if (len == null || len > arr.length)
       len = arr.length;
@@ -8900,7 +8868,7 @@
   }
   var SELECT_PADDING_LEFT = 12;
   var SELECT_PADDING_RIGHT = 24;
-  var styles$r = {
+  var styles$s = {
     btn: {
       width: 36,
       height: 36,
@@ -8969,7 +8937,7 @@
   };
   var DatePickerHeader = function(param) {
     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$r), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
+    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;
@@ -9061,26 +9029,58 @@
   var areDatesEquals = function(date1, date2) {
     return trueReactPlatformHelpers.isEmpty(date1) && trueReactPlatformHelpers.isEmpty(date2) || trueReactPlatformHelpers.isNotEmpty(date1) && trueReactPlatformHelpers.isNotEmpty(date2) && dateFns.isSameDay(date1, date2);
   };
-  function _array_like_to_array$i(arr, len) {
-    if (len == null || len > arr.length)
-      len = arr.length;
-    for (var i = 0, arr2 = new Array(len); i < len; i++)
-      arr2[i] = arr[i];
-    return arr2;
-  }
-  function _array_with_holes$i(arr) {
-    if (Array.isArray(arr))
-      return arr;
-  }
-  function _define_property$u(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
+  var styles$r = {
+    root: {
+      width: "100%",
+      height: "100%"
+    },
+    day: {},
+    datepicker: {},
+    popper: {
+      zIndex: 10,
+      marginTop: function(param) {
+        var topPosition = param.topPosition;
+        return topPosition;
+      },
+      marginLeft: function(param) {
+        var leftPosition = param.leftPosition;
+        return leftPosition;
+      },
+      '&[data-placement^="bottom"]': {
+        paddingTop: 6
+      },
+      '&[data-placement^="top"]': {
+        paddingBottom: 6
+      },
+      '&[data-placement^="left"]': {
+        paddingRight: 6
+      },
+      '&[data-placement^="right"]': {
+        paddingLeft: 6
+      }
+    },
+    tweakDateInput: {}
+  };
+  function _array_like_to_array$i(arr, len) {
+    if (len == null || len > arr.length)
+      len = arr.length;
+    for (var i = 0, arr2 = new Array(len); i < len; i++)
+      arr2[i] = arr[i];
+    return arr2;
+  }
+  function _array_with_holes$i(arr) {
+    if (Array.isArray(arr))
+      return arr;
+  }
+  function _define_property$u(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
       obj[key] = value;
     }
     return obj;
@@ -9260,7 +9260,7 @@
       "onKeyDown",
       "tweakStyles"
     ]);
-    var _useTheme = useTheme("DatePicker", styles$v, tweakStyles, {
+    var _useTheme = useTheme("DatePicker", styles$r, tweakStyles, {
       leftPosition,
       topPosition
     }), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
@@ -10311,6 +10311,27 @@
       ]
     }));
   };
+  var MultiSelectLocales = {
+    ru: {
+      clear: "Очистить",
+      all: "Все",
+      chosen: "Выбранные",
+      nothingFound: "Не найдено",
+      searchPlaceholder: "Поиск"
+    },
+    en: {
+      clear: "Clear",
+      all: "All",
+      chosen: "Chosen",
+      nothingFound: "Nothing found",
+      searchPlaceholder: "Search"
+    }
+  };
+  var DEFAULT_LOCALE$1 = "en";
+  var getLocale$1 = function() {
+    var key = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : DEFAULT_LOCALE$1, custom = arguments.length > 1 ? arguments[1] : void 0, custom2 = arguments.length > 2 ? arguments[2] : void 0;
+    return merge$1({}, MultiSelectLocales[key], custom, custom2);
+  };
   function _define_property$q(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
@@ -10459,27 +10480,6 @@
       }
     }
   };
-  var MultiSelectLocales = {
-    ru: {
-      clear: "Очистить",
-      all: "Все",
-      chosen: "Выбранные",
-      nothingFound: "Не найдено",
-      searchPlaceholder: "Поиск"
-    },
-    en: {
-      clear: "Clear",
-      all: "All",
-      chosen: "Chosen",
-      nothingFound: "Nothing found",
-      searchPlaceholder: "Search"
-    }
-  };
-  var DEFAULT_LOCALE$1 = "en";
-  var getLocale$1 = function() {
-    var key = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : DEFAULT_LOCALE$1, custom = arguments.length > 1 ? arguments[1] : void 0, custom2 = arguments.length > 2 ? arguments[2] : void 0;
-    return merge$1({}, MultiSelectLocales[key], custom, custom2);
-  };
   function _array_like_to_array$f(arr, len) {
     if (len == null || len > arr.length)
       len = arr.length;
@@ -11235,6 +11235,27 @@
   function FilterMultiSelect(props) {
     return /* @__PURE__ */ jsx(MultiSelectList, _object_spread$n({}, props));
   }
+  var SelectLocales = {
+    ru: {
+      clear: "Очистить",
+      all: "Все",
+      chosen: "Выбранные",
+      nothingFound: "Ничего не найдено",
+      searchPlaceholder: "Поиск"
+    },
+    en: {
+      clear: "Clear",
+      all: "All",
+      chosen: "Chosen",
+      nothingFound: "Nothing found",
+      searchPlaceholder: "Search"
+    }
+  };
+  var DEFAULT_LOCALE = "en";
+  var getLocale = function() {
+    var key = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : DEFAULT_LOCALE, custom = arguments.length > 1 ? arguments[1] : void 0, custom2 = arguments.length > 2 ? arguments[2] : void 0;
+    return merge$1({}, SelectLocales[key], custom, custom2);
+  };
   function _define_property$n(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
@@ -11411,27 +11432,6 @@
       }
     }
   };
-  var SelectLocales = {
-    ru: {
-      clear: "Очистить",
-      all: "Все",
-      chosen: "Выбранные",
-      nothingFound: "Ничего не найдено",
-      searchPlaceholder: "Поиск"
-    },
-    en: {
-      clear: "Clear",
-      all: "All",
-      chosen: "Chosen",
-      nothingFound: "Nothing found",
-      searchPlaceholder: "Search"
-    }
-  };
-  var DEFAULT_LOCALE = "en";
-  var getLocale = function() {
-    var key = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : DEFAULT_LOCALE, custom = arguments.length > 1 ? arguments[1] : void 0, custom2 = arguments.length > 2 ? arguments[2] : void 0;
-    return merge$1({}, SelectLocales[key], custom, custom2);
-  };
   function _array_like_to_array$e(arr, len) {
     if (len == null || len > arr.length)
       len = arr.length;
@@ -21083,206 +21083,83 @@
       className: classes.root
     });
   };
-  var STICKY_SHADOW_PADDING = 12;
-  var styles$f = {
-    root: {
-      position: "relative",
-      width: "100%",
-      borderCollapse: "separate",
-      borderSpacing: 0
-    },
-    row: {
-      position: "relative"
-    },
-    scroll: {
-      overflow: "auto",
-      /*
-        Чтобы сделать таблицу на всю высоту проставьте
-        height у родителя таблицы у себя в проекте.
-        Например: height: calc(100vh -{высота шапки}px)
-      */
-      maxHeight: "100%"
-    },
-    horizontallyScrolled: {
-      "& $cellSticky": {
-        boxShadow: "4px 0 4px rgba(0, 0, 0, 0.05)"
+  function _instanceof(left2, right2) {
+    if (right2 != null && typeof Symbol !== "undefined" && right2[Symbol.hasInstance]) {
+      return !!right2[Symbol.hasInstance](left2);
+    } else {
+      return left2 instanceof right2;
+    }
+  }
+  var DEFAULT_DATE_FORMAT = "dd.MM.yyyy";
+  function TableValue(param) {
+    var item = param.item, columnName = param.columnName, config = param.config, classes = param.classes, isFocusedRow = param.isFocusedRow, isSecond = param.isSecond, isSticky = param.isSticky, isNestedComponentExpanded = param.isNestedComponentExpanded, isRowNestedComponentExpanded = param.isRowNestedComponentExpanded, onSetNestedComponent = param.onSetNestedComponent;
+    var itemConfig = config === null || config === void 0 ? void 0 : config[columnName];
+    var value = item[columnName];
+    var content = null;
+    if (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.component) {
+      var ValueComponent = itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.component;
+      content = ValueComponent({
+        value,
+        row: item,
+        isFocusedRow,
+        isNestedComponentExpanded,
+        isRowNestedComponentExpanded,
+        onSetNestedComponent
+      });
+    } else if (typeof value === "string" || typeof value === "number") {
+      content = value;
+    } else if (_instanceof(value, Date)) {
+      content = dateFns.format(value, (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.dateFormat) || DEFAULT_DATE_FORMAT);
+    }
+    return /* @__PURE__ */ jsx("td", {
+      className: clsx(classes.root, isSticky && classes.sticky, isSecond && classes.second),
+      style: {
+        textAlign: itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.cellAlign,
+        position: isSticky ? "sticky" : itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.position,
+        right: itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.right,
+        left: isSticky ? 0 : itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.left,
+        verticalAlign: itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.cellVerticalAlign
       },
-      "& $headerSticky::before": {
-        boxShadow: "4px 0 4px rgba(0, 0, 0, 0.05)"
-      }
-    },
-    loader: {
-      position: "sticky",
-      left: 0,
-      maxWidth: "100vw",
-      height: 48,
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center"
-    },
-    headerRow: {
-      verticalAlign: "bottom"
-    },
-    activeRow: {},
-    cell: {
-      position: "relative",
-      boxSizing: "content-box",
-      padding: [
-        14,
-        7,
-        14,
-        7
-      ],
-      fontSize: 14,
-      lineHeight: 1.42,
-      zIndex: 5,
-      verticalAlign: "top"
-    },
-    cellSticky: {
-      zIndex: 19,
-      paddingLeft: 24,
-      paddingRight: 12,
-      transition: [
-        "box-shadow",
-        "0.25s",
-        "ease-in-out"
-      ]
-    },
-    cellSecond: {
-      paddingLeft: STICKY_SHADOW_PADDING
-    },
-    header: {
-      position: "sticky",
-      boxSizing: "content-box",
-      top: 0,
-      zIndex: 10,
-      fontSize: 12,
-      fontWeight: "normal",
-      padding: [
-        0,
-        7,
-        16,
-        7
-      ]
-    },
-    headerSticky: {
-      zIndex: 20,
-      left: 0,
-      paddingLeft: 24,
-      paddingRight: 12,
-      "&::before": {
-        content: '""',
-        display: "block",
-        width: "100%",
-        height: "100%",
-        position: "absolute",
-        left: 0,
-        top: 0,
-        background: "transparent",
-        pointerEvents: "none",
-        zIndex: 1,
-        transition: [
-          "box-shadow",
-          "0.25s",
-          "ease-in-out"
-        ]
-      },
-      "&::after": {
-        content: '""',
-        display: "block",
-        width: STICKY_SHADOW_PADDING,
-        height: "100%",
-        position: "absolute",
-        left: "100%",
-        top: 0,
-        background: "linear-gradient(90deg, ".concat(colors.CLASSIC_WHITE, ", ").concat(rgba(colors.CLASSIC_WHITE, 0), ")"),
-        zIndex: 0
-      }
-    },
-    headerSecond: {
-      paddingLeft: STICKY_SHADOW_PADDING
-    },
-    editableRow: {
-      cursor: "pointer"
-    }
-  };
-  function _instanceof(left2, right2) {
-    if (right2 != null && typeof Symbol !== "undefined" && right2[Symbol.hasInstance]) {
-      return !!right2[Symbol.hasInstance](left2);
-    } else {
-      return left2 instanceof right2;
-    }
-  }
-  var DEFAULT_DATE_FORMAT = "dd.MM.yyyy";
-  function TableValue(param) {
-    var item = param.item, columnName = param.columnName, config = param.config, classes = param.classes, isFocusedRow = param.isFocusedRow, isSecond = param.isSecond, isSticky = param.isSticky, isNestedComponentExpanded = param.isNestedComponentExpanded, isRowNestedComponentExpanded = param.isRowNestedComponentExpanded, onSetNestedComponent = param.onSetNestedComponent;
-    var itemConfig = config === null || config === void 0 ? void 0 : config[columnName];
-    var value = item[columnName];
-    var content = null;
-    if (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.component) {
-      var ValueComponent = itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.component;
-      content = ValueComponent({
-        value,
-        row: item,
-        isFocusedRow,
-        isNestedComponentExpanded,
-        isRowNestedComponentExpanded,
-        onSetNestedComponent
-      });
-    } else if (typeof value === "string" || typeof value === "number") {
-      content = value;
-    } else if (_instanceof(value, Date)) {
-      content = dateFns.format(value, (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.dateFormat) || DEFAULT_DATE_FORMAT);
-    }
-    return /* @__PURE__ */ jsx("td", {
-      className: clsx(classes.root, isSticky && classes.sticky, isSecond && classes.second),
-      style: {
-        textAlign: itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.cellAlign,
-        position: isSticky ? "sticky" : itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.position,
-        right: itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.right,
-        left: isSticky ? 0 : itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.left,
-        verticalAlign: itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.cellVerticalAlign
-      },
-      children: content
-    }, columnName);
-  }
-  function _array_like_to_array$9(arr, len) {
-    if (len == null || len > arr.length)
-      len = arr.length;
-    for (var i = 0, arr2 = new Array(len); i < len; i++)
-      arr2[i] = arr[i];
-    return arr2;
-  }
-  function _array_with_holes$9(arr) {
-    if (Array.isArray(arr))
-      return arr;
-  }
-  function _define_property$g(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
-    return obj;
-  }
-  function _iterable_to_array_limit$9(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null)
-      return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-        if (i && _arr.length === i)
-          break;
+      children: content
+    }, columnName);
+  }
+  function _array_like_to_array$9(arr, len) {
+    if (len == null || len > arr.length)
+      len = arr.length;
+    for (var i = 0, arr2 = new Array(len); i < len; i++)
+      arr2[i] = arr[i];
+    return arr2;
+  }
+  function _array_with_holes$9(arr) {
+    if (Array.isArray(arr))
+      return arr;
+  }
+  function _define_property$g(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+    return obj;
+  }
+  function _iterable_to_array_limit$9(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null)
+      return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value);
+        if (i && _arr.length === i)
+          break;
       }
     } catch (err) {
       _d = true;
@@ -21450,6 +21327,129 @@
     });
   }
   const TableRow$1 = /* @__PURE__ */ React.memo(TableRow);
+  var STICKY_SHADOW_PADDING = 12;
+  var styles$f = {
+    root: {
+      position: "relative",
+      width: "100%",
+      borderCollapse: "separate",
+      borderSpacing: 0
+    },
+    row: {
+      position: "relative"
+    },
+    scroll: {
+      overflow: "auto",
+      /*
+        Чтобы сделать таблицу на всю высоту проставьте
+        height у родителя таблицы у себя в проекте.
+        Например: height: calc(100vh -{высота шапки}px)
+      */
+      maxHeight: "100%"
+    },
+    horizontallyScrolled: {
+      "& $cellSticky": {
+        boxShadow: "4px 0 4px rgba(0, 0, 0, 0.05)"
+      },
+      "& $headerSticky::before": {
+        boxShadow: "4px 0 4px rgba(0, 0, 0, 0.05)"
+      }
+    },
+    loader: {
+      position: "sticky",
+      left: 0,
+      maxWidth: "100vw",
+      height: 48,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    headerRow: {
+      verticalAlign: "bottom"
+    },
+    activeRow: {},
+    cell: {
+      position: "relative",
+      boxSizing: "content-box",
+      padding: [
+        14,
+        7,
+        14,
+        7
+      ],
+      fontSize: 14,
+      lineHeight: 1.42,
+      zIndex: 5,
+      verticalAlign: "top"
+    },
+    cellSticky: {
+      zIndex: 19,
+      paddingLeft: 24,
+      paddingRight: 12,
+      transition: [
+        "box-shadow",
+        "0.25s",
+        "ease-in-out"
+      ]
+    },
+    cellSecond: {
+      paddingLeft: STICKY_SHADOW_PADDING
+    },
+    header: {
+      position: "sticky",
+      boxSizing: "content-box",
+      top: 0,
+      zIndex: 10,
+      fontSize: 12,
+      fontWeight: "normal",
+      padding: [
+        0,
+        7,
+        16,
+        7
+      ]
+    },
+    headerSticky: {
+      zIndex: 20,
+      left: 0,
+      paddingLeft: 24,
+      paddingRight: 12,
+      "&::before": {
+        content: '""',
+        display: "block",
+        width: "100%",
+        height: "100%",
+        position: "absolute",
+        left: 0,
+        top: 0,
+        background: "transparent",
+        pointerEvents: "none",
+        zIndex: 1,
+        transition: [
+          "box-shadow",
+          "0.25s",
+          "ease-in-out"
+        ]
+      },
+      "&::after": {
+        content: '""',
+        display: "block",
+        width: STICKY_SHADOW_PADDING,
+        height: "100%",
+        position: "absolute",
+        left: "100%",
+        top: 0,
+        background: "linear-gradient(90deg, ".concat(colors.CLASSIC_WHITE, ", ").concat(rgba(colors.CLASSIC_WHITE, 0), ")"),
+        zIndex: 0
+      }
+    },
+    headerSecond: {
+      paddingLeft: STICKY_SHADOW_PADDING
+    },
+    editableRow: {
+      cursor: "pointer"
+    }
+  };
   function _array_like_to_array$8(arr, len) {
     if (len == null || len > arr.length)
       len = arr.length;
@@ -22341,8 +22341,8 @@
       "unmountOnExit",
       "onClose"
     ]);
-    var _ref;
-    var isModalOpen = (_ref = isOpen !== null && isOpen !== void 0 ? isOpen : restProps.in) !== null && _ref !== void 0 ? _ref : false;
+    var _restProps_in;
+    var isModalOpen = (_restProps_in = restProps.in) !== null && _restProps_in !== void 0 ? _restProps_in : isOpen;
     var _useTheme = useTheme("Modal", styles$d, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
     var tweakCloseButtonStyles = useTweakStyles(componentStyles, tweakStyles, "tweakCloseButton");
     var _useState = _sliced_to_array$7(React.useState(false), 2), isClickOnOverlay = _useState[0], setIsClickOnOverlay = _useState[1];
@@ -22664,48 +22664,6 @@
     });
   };
   var styles$b = {
-    root: {
-      position: "relative",
-      boxSizing: "border-box",
-      height: "100%",
-      width: "100%",
-      cursor: "pointer",
-      fontSize: 16
-    },
-    required: {
-      "&:before": {
-        content: '""',
-        position: "absolute",
-        left: -12,
-        top: "50%",
-        transform: "translate(0, -50%)",
-        width: 6,
-        height: 6,
-        borderRadius: "50%"
-      }
-    },
-    disabled: {
-      cursor: "default"
-    },
-    listContainer: {
-      position: "absolute",
-      top: "calc(100% + 4px)",
-      left: -1,
-      right: -1,
-      zIndex: 2
-    },
-    invalid: {},
-    open: {},
-    full: {},
-    left: {},
-    right: {},
-    tweakMultiSelectList: {
-      root: {
-        width: "100%"
-      }
-    }
-  };
-  var styles$a = {
     root: {
       display: "flex",
       justifyContent: "center",
@@ -22773,7 +22731,7 @@
   };
   function MultiSelectInput(param) {
     var v = param.value, isOpen = param.isOpen, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "" : _param_placeholder, onToggle = param.onToggle;
-    var classes = useTheme("MultiSelectInput", styles$a).classes;
+    var classes = useTheme("MultiSelectInput", styles$b).classes;
     var value = v === null || v === void 0 ? void 0 : v.include;
     return /* @__PURE__ */ jsxs("div", {
       className: classes.root,
@@ -22818,6 +22776,48 @@
       ]
     });
   }
+  var styles$a = {
+    root: {
+      position: "relative",
+      boxSizing: "border-box",
+      height: "100%",
+      width: "100%",
+      cursor: "pointer",
+      fontSize: 16
+    },
+    required: {
+      "&:before": {
+        content: '""',
+        position: "absolute",
+        left: -12,
+        top: "50%",
+        transform: "translate(0, -50%)",
+        width: 6,
+        height: 6,
+        borderRadius: "50%"
+      }
+    },
+    disabled: {
+      cursor: "default"
+    },
+    listContainer: {
+      position: "absolute",
+      top: "calc(100% + 4px)",
+      left: -1,
+      right: -1,
+      zIndex: 2
+    },
+    invalid: {},
+    open: {},
+    full: {},
+    left: {},
+    right: {},
+    tweakMultiSelectList: {
+      root: {
+        width: "100%"
+      }
+    }
+  };
   function _array_like_to_array$5(arr, len) {
     if (len == null || len > arr.length)
       len = arr.length;
@@ -22878,7 +22878,7 @@
   }
   function MultiSelect(param) {
     var value = param.value, _param_corners = param.corners, corners = _param_corners === void 0 ? "full" : _param_corners, isInvalid = param.isInvalid, isRequired = param.isRequired, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "" : _param_placeholder, localeKey = param.localeKey, locale2 = param.locale, onChange = param.onChange, fetchOptions = param.fetchOptions, tweakStyles = param.tweakStyles;
-    var _useTheme = useTheme("MultiSelect", styles$b, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
+    var _useTheme = useTheme("MultiSelect", styles$a, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
     var _useState = _sliced_to_array$5(React.useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
     var ref = React.useRef(null);
     var handleOnClose = function() {
@@ -23351,75 +23351,6 @@
       value: currentValue
     }));
   });
-  var COUNTRY_SELECT_WIDTH = 80;
-  var styles$8 = {
-    root: {
-      width: "100%",
-      position: "relative",
-      boxSizing: "border-box"
-    },
-    countrySelectContainer: {
-      position: "absolute",
-      left: 1,
-      top: 1,
-      width: COUNTRY_SELECT_WIDTH,
-      height: dimensions.CONTROL_HEIGHT - 2,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      borderRight: [
-        "solid",
-        1,
-        colors.BORDER_MAIN
-      ],
-      transition: "border-color 0.2s ease-in",
-      cursor: "pointer",
-      zIndex: 2
-    },
-    disabledCountrySelect: {
-      cursor: "default"
-    },
-    flag: {
-      width: 22,
-      height: 16
-    },
-    arrow: {
-      width: 20,
-      color: colors.GREY_ACTIVE,
-      marginLeft: 8,
-      transition: "transform .2s ease"
-    },
-    up: {
-      transform: "rotate(180deg)"
-    },
-    invalidArrow: {
-      color: colors.RED_WARNING
-    },
-    focusedBorder: {},
-    invalidBorder: {
-      borderColor: colors.RED_WARNING
-    },
-    inputContainer: {
-      position: "relative",
-      flex: 1
-    },
-    flagListContainer: {
-      position: "absolute",
-      width: "100%",
-      top: dimensions.CONTROL_HEIGHT + 6,
-      left: -1,
-      zIndex: 3
-    },
-    tweakInput: {
-      inputWrapper: {
-        paddingLeft: COUNTRY_SELECT_WIDTH
-      },
-      label: {
-        marginLeft: COUNTRY_SELECT_WIDTH
-      }
-    },
-    tweakCountryList: {}
-  };
   var phoneInfo = [
     {
       countryEn: "Afghanistan",
@@ -26057,7 +25988,7 @@
   }
   var ROW_HEIGHT = 40;
   var LIST_PADDING = 10;
-  var styles$7 = {
+  var styles$8 = {
     root: {
       borderRadius: dimensions.BORDER_RADIUS_SMALL,
       backgroundColor: colors.CLASSIC_WHITE,
@@ -26235,7 +26166,7 @@
   }
   var PhoneInputCountryList = function(param) {
     var locale2 = param.locale, placeholder = param.placeholder, selectedCountryCode = param.selectedCountryCode, closeList = param.closeList, noMatchesLabel = param.noMatchesLabel, onChange = param.onChange, tweakStyles = param.tweakStyles;
-    var _useTheme = useTheme("PhoneInputCountryList", styles$7, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
+    var _useTheme = useTheme("PhoneInputCountryList", styles$8, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
     var tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, "tweakInput");
     var sortedCountries = React.useMemo(function() {
       return sortCountriesByLocale(phoneInfo, locale2);
@@ -26352,6 +26283,75 @@
       ]
     });
   };
+  var COUNTRY_SELECT_WIDTH = 80;
+  var styles$7 = {
+    root: {
+      width: "100%",
+      position: "relative",
+      boxSizing: "border-box"
+    },
+    countrySelectContainer: {
+      position: "absolute",
+      left: 1,
+      top: 1,
+      width: COUNTRY_SELECT_WIDTH,
+      height: dimensions.CONTROL_HEIGHT - 2,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRight: [
+        "solid",
+        1,
+        colors.BORDER_MAIN
+      ],
+      transition: "border-color 0.2s ease-in",
+      cursor: "pointer",
+      zIndex: 2
+    },
+    disabledCountrySelect: {
+      cursor: "default"
+    },
+    flag: {
+      width: 22,
+      height: 16
+    },
+    arrow: {
+      width: 20,
+      color: colors.GREY_ACTIVE,
+      marginLeft: 8,
+      transition: "transform .2s ease"
+    },
+    up: {
+      transform: "rotate(180deg)"
+    },
+    invalidArrow: {
+      color: colors.RED_WARNING
+    },
+    focusedBorder: {},
+    invalidBorder: {
+      borderColor: colors.RED_WARNING
+    },
+    inputContainer: {
+      position: "relative",
+      flex: 1
+    },
+    flagListContainer: {
+      position: "absolute",
+      width: "100%",
+      top: dimensions.CONTROL_HEIGHT + 6,
+      left: -1,
+      zIndex: 3
+    },
+    tweakInput: {
+      inputWrapper: {
+        paddingLeft: COUNTRY_SELECT_WIDTH
+      },
+      label: {
+        marginLeft: COUNTRY_SELECT_WIDTH
+      }
+    },
+    tweakCountryList: {}
+  };
   function _array_like_to_array$2(arr, len) {
     if (len == null || len > arr.length)
       len = arr.length;
@@ -26487,7 +26487,7 @@
       "codeSearchPlaceholder",
       "noMatchesLabel"
     ]);
-    var _useTheme = useTheme("PhoneInput", styles$8, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
+    var _useTheme = useTheme("PhoneInput", styles$7, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
     var list = React.useRef(null);
     var inputWrapper = React.useRef(null);
     var inputRef = React.useRef(null);