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

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

@@ -1435,7 +1435,7 @@ var getTestId = getTestId$1;
 var isStringNotEmpty = isStringNotEmpty$1;
 var isEmpty = isEmpty$1;
 var isNotEmpty = function(val) {
-  return isString(val) && isStringNotEmpty(val) || isNotEmpty(val);
+  return isString(val) && isStringNotEmpty$1(val) || isNotEmpty$1(val);
 };
 var useIsMounted = function() {
   var isMounted = useRef(false);
@@ -4096,12 +4096,6 @@ var ComplexIconBoilerplate = function(param) {
     }
   });
 };
-var styles$J = {
-  root: {
-    display: "flex",
-    alignItems: "center"
-  }
-};
 var checkIcons = function(ico) {
   return ico;
 };
@@ -5017,6 +5011,12 @@ var IconBoilerplate = function(param) {
     ]
   });
 };
+var styles$J = {
+  root: {
+    display: "flex",
+    alignItems: "center"
+  }
+};
 function _define_property$M(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -5610,18 +5610,6 @@ var AddButton = function(param) {
   }));
 };
 var styles$F = {
-  root: {
-    display: "flex"
-  },
-  dots: {},
-  default: {},
-  logo: {},
-  currentColor: {
-    color: "currentColor"
-  },
-  tweakPreloaderComponent: {}
-};
-var styles$E = {
   root: {
     display: "flex",
     gap: 4,
@@ -5666,7 +5654,7 @@ var styles$E = {
 };
 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", {
@@ -5730,7 +5718,7 @@ var DefaultPreloader = function() {
     ]
   });
 };
-var styles$D = {
+var styles$E = {
   root: {
     display: "flex",
     width: "100%",
@@ -5740,7 +5728,7 @@ var styles$D = {
 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 = 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;
@@ -5752,6 +5740,18 @@ var SvgPreloader = function(param) {
     }
   }) : /* @__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, {
@@ -5806,7 +5806,7 @@ function _object_spread_props$w(target, source) {
 }
 var ThemedPreloader = function(param) {
   var _param_type = param.type, type = _param_type === void 0 ? "default" : _param_type, _param_useCurrentColor = param.useCurrentColor, useCurrentColor = _param_useCurrentColor === void 0 ? false : _param_useCurrentColor, data = param.data, tweakStyles = param.tweakStyles;
-  var _useTheme = useTheme("ThemedPreloader", styles$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))
@@ -7232,6 +7232,8 @@ var Input = /* @__PURE__ */ forwardRef(function(param, ref) {
     ]
   });
 });
+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%",
@@ -7241,8 +7243,6 @@ var styles$w = {
   },
   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, {
@@ -7378,40 +7378,8 @@ var DateInput = /* @__PURE__ */ forwardRef(function(_param, ref) {
   }));
 });
 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"
   },
@@ -7539,7 +7507,7 @@ var SearchInput = function(_param) {
     "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
@@ -7562,84 +7530,6 @@ var SearchInput = function(_param) {
     ]
   }));
 };
-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");
@@ -7895,7 +7785,7 @@ var CELL_PADDING = [
   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)",
@@ -8062,7 +7952,7 @@ function _define_property$w(obj, key, value) {
 }
 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 = isNotEmpty$1(onToggleCheckbox);
   var multiSelectValue = activeValue;
   var _multiSelectValue_length;
@@ -8176,6 +8066,84 @@ var getDefaultConvertToIdFunction = function(convertValueToString) {
 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;
@@ -8910,7 +8878,7 @@ function Select(props) {
 }
 var SELECT_PADDING_LEFT = 12;
 var SELECT_PADDING_RIGHT = 24;
-var styles$r = {
+var styles$s = {
   btn: {
     width: 36,
     height: 36,
@@ -8979,7 +8947,7 @@ var styles$r = {
 };
 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 = useMemo(function() {
     return Array.from(Array(41)).map(function(_, i) {
       return getYear(new Date()) - 30 + i;
@@ -9071,26 +9039,58 @@ var getDateValueParser = function(dateFormat) {
 var areDatesEquals = function(date1, date2) {
   return isEmpty$1(date1) && isEmpty$1(date2) || isNotEmpty$1(date1) && isNotEmpty$1(date2) && 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;
@@ -9270,7 +9270,7 @@ var DatePicker = /* @__PURE__ */ forwardRef(function(_param, ref) {
     "onKeyDown",
     "tweakStyles"
   ]);
-  var _useTheme = useTheme("DatePicker", styles$v, tweakStyles, {
+  var _useTheme = useTheme("DatePicker", styles$r, tweakStyles, {
     leftPosition,
     topPosition
   }), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
@@ -10321,6 +10321,27 @@ var FilterInterval = function(param) {
     ]
   }));
 };
+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, {
@@ -10469,27 +10490,6 @@ var styles$o = {
     }
   }
 };
-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;
@@ -11245,6 +11245,27 @@ function _object_spread$n(target) {
 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, {
@@ -11421,27 +11442,6 @@ var styles$n = {
     }
   }
 };
-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;
@@ -21093,206 +21093,83 @@ var Flag = function(param) {
     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 = format$1(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 = format$1(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;
@@ -21460,6 +21337,129 @@ function TableRow(param) {
   });
 }
 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;
@@ -22351,8 +22351,8 @@ var Modal = function(_param) {
     "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(useState(false), 2), isClickOnOverlay = _useState[0], setIsClickOnOverlay = _useState[1];
@@ -22674,48 +22674,6 @@ var MoreMenu = function(param) {
   });
 };
 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",
@@ -22783,7 +22741,7 @@ var styles$a = {
 };
 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,
@@ -22828,6 +22786,48 @@ function MultiSelectInput(param) {
     ]
   });
 }
+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;
@@ -22888,7 +22888,7 @@ function _unsupported_iterable_to_array$5(o, minLen) {
 }
 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(useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
   var ref = useRef(null);
   var handleOnClose = function() {
@@ -23361,75 +23361,6 @@ var SmartInput = /* @__PURE__ */ forwardRef(function(_param, ref) {
     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",
@@ -26067,7 +25998,7 @@ function _object_spread$8(target) {
 }
 var ROW_HEIGHT = 40;
 var LIST_PADDING = 10;
-var styles$7 = {
+var styles$8 = {
   root: {
     borderRadius: dimensions.BORDER_RADIUS_SMALL,
     backgroundColor: colors.CLASSIC_WHITE,
@@ -26245,7 +26176,7 @@ function _unsupported_iterable_to_array$3(o, minLen) {
 }
 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 = useMemo(function() {
     return sortCountriesByLocale(phoneInfo, locale2);
@@ -26362,6 +26293,75 @@ var PhoneInputCountryList = function(param) {
     ]
   });
 };
+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;
@@ -26497,7 +26497,7 @@ var PhoneInput = function(_param) {
     "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 = useRef(null);
   var inputWrapper = useRef(null);
   var inputRef = useRef(null);