@true-engineering/true-react-common-ui-kit 3.0.0-alpha.16 → 3.0.0-alpha.18

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

@@ -5116,7 +5116,7 @@
       ]
     });
   };
-  var useStyles$L = createThemedStyles("Icon", {
+  var useStyles$M = createThemedStyles("Icon", {
     root: {
       display: "flex",
       alignItems: "center"
@@ -5176,7 +5176,7 @@
   }
   var Icon = function(param) {
     var type = param.type, data = param.data, testId = param.testId, tweakStyles = param.tweakStyles;
-    var classes = useStyles$L({
+    var classes = useStyles$M({
       theme: tweakStyles
     });
     return /* @__PURE__ */ jsx("div", _object_spread_props$F(_object_spread$O({
@@ -5197,7 +5197,7 @@
   var ITEM_HORIZONTAL_PADDING = 16;
   var ICON_SIZE = 20;
   var ICON_GAP = 12;
-  var useStyles$K = createThemedStyles("List", {
+  var useStyles$L = createThemedStyles("List", {
     root: {
       minWidth: 180,
       backgroundColor: colors.CLASSIC_WHITE,
@@ -5294,7 +5294,7 @@
   }
   var List = function(param) {
     var items = param.items, testId = param.testId, data = param.data, tweakStyles = param.tweakStyles, onClick = param.onClick;
-    var classes = useStyles$K({
+    var classes = useStyles$L({
       theme: tweakStyles
     });
     var handleItemClick = function(item) {
@@ -5368,7 +5368,7 @@
     }
     return target;
   }
-  var useStyles$J = createThemedStyles("AccountInfo", _object_spread$M({
+  var useStyles$K = createThemedStyles("AccountInfo", _object_spread$M({
     root: {
       display: "flex"
     },
@@ -5522,7 +5522,7 @@
   }
   var AccountInfo = function(param) {
     var data = param.data, testId = param.testId, avatar = param.avatar, tweakStyles = param.tweakStyles, accountName = param.accountName, options = param.options;
-    var classes = useStyles$J({
+    var classes = useStyles$K({
       theme: tweakStyles
     });
     var tweakListStyles = useTweakStyles({
@@ -5592,7 +5592,7 @@
       ]
     }));
   };
-  var useStyles$I = createThemedStyles("AddButton", {
+  var useStyles$J = createThemedStyles("AddButton", {
     root: {
       display: "flex",
       alignItems: "center",
@@ -5672,7 +5672,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, testId = param.testId, tweakStyles = param.tweakStyles;
-    var classes = useStyles$I({
+    var classes = useStyles$J({
       theme: tweakStyles
     });
     return /* @__PURE__ */ jsxs("button", _object_spread_props$C(_object_spread$K({
@@ -5694,7 +5694,7 @@
       ]
     }));
   };
-  var useStyles$H = createThemedStyles("DotsPreloader", {
+  var useStyles$I = createThemedStyles("DotsPreloader", {
     root: {
       display: "flex",
       gap: 4,
@@ -5739,7 +5739,7 @@
   });
   var DotsPreloader = function(param) {
     var tweakStyles = param.tweakStyles;
-    var classes = useStyles$H({
+    var classes = useStyles$I({
       theme: tweakStyles
     });
     return /* @__PURE__ */ jsx("div", {
@@ -5805,7 +5805,7 @@
       ]
     });
   };
-  var useStyles$G = createThemedStyles("SvgPreloader", {
+  var useStyles$H = createThemedStyles("SvgPreloader", {
     root: {
       display: "flex",
       width: "100%",
@@ -5815,7 +5815,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 = useStyles$G({
+    var classes = useStyles$H({
       theme: tweakStyles
     });
     var theme = React.useContext(ThemeContext).theme;
@@ -5829,7 +5829,7 @@
       }
     }) : /* @__PURE__ */ jsx(PreloaderIcon, {});
   };
-  var useStyles$F = createThemedStyles("ThemedPreloader", {
+  var useStyles$G = createThemedStyles("ThemedPreloader", {
     root: {
       display: "flex"
     },
@@ -5894,7 +5894,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, testId = param.testId, tweakStyles = param.tweakStyles;
-    var classes = useStyles$F({
+    var classes = useStyles$G({
       theme: tweakStyles
     });
     var tweakDotsPreloaderStyles = useTweakStyles({
@@ -5918,7 +5918,7 @@
       })
     }));
   };
-  var useStyles$E = createThemedStyles("Button", {
+  var useStyles$F = createThemedStyles("Button", {
     root: {
       display: "flex",
       justifyContent: "center",
@@ -6144,7 +6144,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 classes = useStyles$E({
+    var classes = useStyles$F({
       theme: tweakStyles
     });
     var tweakPreloaderStyles = useTweakStyles({
@@ -6191,7 +6191,7 @@
       ]
     }));
   });
-  var useStyles$D = createThemedStyles("Checkbox", {
+  var useStyles$E = createThemedStyles("Checkbox", {
     root: {
       cursor: "pointer",
       display: "flex",
@@ -6340,7 +6340,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, 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 = useStyles$D({
+    var classes = useStyles$E({
       theme: tweakStyles
     });
     var _useState = _sliced_to_array$n(React.useState(false), 2), isSelected = _useState[0], setIsSelected = _useState[1];
@@ -6386,7 +6386,7 @@
       ]
     }));
   }
-  var useStyles$C = createThemedStyles("CloseButton", {
+  var useStyles$D = createThemedStyles("CloseButton", {
     root: {
       width: 40,
       height: 40,
@@ -6465,7 +6465,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 = useStyles$C({
+    var classes = useStyles$D({
       theme: tweakStyles
     });
     return /* @__PURE__ */ jsx("button", _object_spread_props$y(_object_spread$G({
@@ -6478,7 +6478,7 @@
       })
     }));
   };
-  var useStyles$B = createThemedStyles({
+  var useStyles$C = createThemedStyles({
     root: {
       display: "flex",
       flexWrap: "wrap"
@@ -6571,7 +6571,7 @@
       return _array_like_to_array$m(o, minLen);
   }
   var Colors = function() {
-    var classes = useStyles$B();
+    var classes = useStyles$C();
     var theme = React.useContext(ThemeContext).theme;
     var _theme_colors = theme.colors, colors2 = _theme_colors === void 0 ? {} : _theme_colors;
     return /* @__PURE__ */ jsx("div", {
@@ -6601,7 +6601,7 @@
       })
     });
   };
-  var useStyles$A = createThemedStyles("CssBaseline", {
+  var useStyles$B = createThemedStyles("CssBaseline", {
     "@global html, body": {
       fontFamily: "Arial, sans-serif",
       color: colors.FONT_MAIN,
@@ -6640,7 +6640,7 @@
   }
   var CssBaseline = function(param) {
     var data = param.data, testId = param.testId, tweakStyles = param.tweakStyles;
-    var classes = useStyles$A({
+    var classes = useStyles$B({
       theme: tweakStyles
     });
     return /* @__PURE__ */ jsx("div", _object_spread$F({
@@ -6650,7 +6650,7 @@
   var DEFAULT_SIZE = 6;
   var PADDING_X$1 = 12;
   var AUTOSIZE_MAX_WIDTH = 480;
-  var useStyles$z = createThemedStyles("Input", {
+  var useStyles$A = createThemedStyles("Input", {
     root: {
       width: "100%",
       boxSizing: "border-box",
@@ -7166,7 +7166,7 @@
   };
   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, shouldAlwaysShowPlaceholder = param.shouldAlwaysShowPlaceholder, beforeMaskedStateChange = param.beforeMaskedStateChange;
-    var classes = useStyles$z({
+    var classes = useStyles$A({
       theme: tweakStyles
     });
     var tweakPreloaderStyles = useTweakStyles({
@@ -7315,7 +7315,7 @@
   });
   var EMPTY_DATE_INPUT_VALUE = "__.__.____";
   var EMPTY_DATE_RANGE_INPUT_VALUE = "".concat(EMPTY_DATE_INPUT_VALUE, " - ").concat(EMPTY_DATE_INPUT_VALUE);
-  var useStyles$y = createThemedStyles("DateInput", {
+  var useStyles$z = createThemedStyles("DateInput", {
     root: {
       width: "100%",
       height: "100%",
@@ -7421,7 +7421,7 @@
       "onClick",
       "onChange"
     ]);
-    var classes = useStyles$y({
+    var classes = useStyles$z({
       theme: tweakStyles
     });
     var tweakInputStyles = useTweakStyles({
@@ -7465,7 +7465,7 @@
   });
   const reactDatepicker = "";
   var LEFT_PADDING = 44;
-  var useStyles$x = createThemedStyles("SearchInput", {
+  var useStyles$y = createThemedStyles("SearchInput", {
     root: {
       position: "relative"
     },
@@ -7593,7 +7593,7 @@
       "testId",
       "data"
     ]);
-    var classes = useStyles$x({
+    var classes = useStyles$y({
       theme: tweakStyles
     });
     var tweakInputStyles = useTweakStyles({
@@ -7880,7 +7880,7 @@
     10,
     20
   ];
-  var useStyles$w = createThemedStyles("SelectList", {
+  var useStyles$x = createThemedStyles("SelectList", {
     root: {
       borderRadius: dimensions.BORDER_RADIUS_SMALL,
       boxShadow: "0 13px 74px -27px rgba(0, 0, 0, 0.11)",
@@ -8084,7 +8084,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 = useStyles$w({
+    var classes = useStyles$x({
       theme: tweakStyles
     });
     var isMultiSelect = trueReactPlatformHelpers.isNotEmpty(onToggleCheckbox);
@@ -8200,7 +8200,7 @@
   var isMultiSelectValue = function(props, _value) {
     return props.isMultiSelect === true;
   };
-  var useStyles$v = createThemedStyles("Select", {
+  var useStyles$w = createThemedStyles("Select", {
     root: {
       width: "100%",
       position: "relative",
@@ -8624,7 +8624,7 @@
       "convertValueToReactNode",
       "optionsFilter"
     ]);
-    var classes = useStyles$v({
+    var classes = useStyles$w({
       theme: tweakStyles
     });
     var shouldRenderSearchInputInList = (searchInput === null || searchInput === void 0 ? void 0 : searchInput.shouldRenderInList) === true;
@@ -9046,7 +9046,7 @@
   }
   var SELECT_PADDING_LEFT = 12;
   var SELECT_PADDING_RIGHT = 24;
-  var useStyles$u = createThemedStyles("DatePickerHeader", {
+  var useStyles$v = createThemedStyles("DatePickerHeader", {
     btn: {
       width: 36,
       height: 36,
@@ -9115,7 +9115,7 @@
   };
   var DatePickerHeader = function(param) {
     var date = param.date, _param_months = param.months, months = _param_months === void 0 ? [] : _param_months, tweakStyles = param.tweakStyles, prevMonthButtonDisabled = param.prevMonthButtonDisabled, nextMonthButtonDisabled = param.nextMonthButtonDisabled, changeYear = param.changeYear, changeMonth = param.changeMonth, decreaseMonth = param.decreaseMonth, increaseMonth = param.increaseMonth;
-    var classes = useStyles$u({
+    var classes = useStyles$v({
       theme: tweakStyles
     });
     var tweakSelectStyles = useTweakStyles({
@@ -9224,7 +9224,7 @@
   var areDatesEquals = function(date1, date2) {
     return trueReactPlatformHelpers.isEmpty(date1) && trueReactPlatformHelpers.isEmpty(date2) || trueReactPlatformHelpers.isNotEmpty(date1) && trueReactPlatformHelpers.isNotEmpty(date2) && dateFns.isSameDay(date1, date2);
   };
-  var useStyles$t = createThemedStyles("DatePicker", {
+  var useStyles$u = createThemedStyles("DatePicker", {
     root: {
       width: "100%",
       height: "100%"
@@ -9435,7 +9435,7 @@
       "onKeyDown",
       "tweakStyles"
     ]);
-    var classes = useStyles$t({
+    var classes = useStyles$u({
       theme: tweakStyles
     });
     var tweakDateInputStyles = useTweakStyles({
@@ -9627,7 +9627,7 @@
     }));
   });
   var LINK_REGEXP = /(http(s?):\/\/(.*))(\s?)/;
-  var useStyles$s = createThemedStyles("Description", {
+  var useStyles$t = createThemedStyles("Description", {
     root: {},
     button: {
       cursor: "pointer",
@@ -9769,7 +9769,7 @@
   }
   var Description = function(param) {
     var text = param.text, moreTitle = param.moreTitle, lessTitle = param.lessTitle, _param_truncateIndex = param.truncateIndex, truncateIndex = _param_truncateIndex === void 0 ? 150 : _param_truncateIndex, _param_isAlwaysOpen = param.isAlwaysOpen, isAlwaysOpen = _param_isAlwaysOpen === void 0 ? true : _param_isAlwaysOpen, testId = param.testId, data = param.data, tweakStyles = param.tweakStyles;
-    var classes = useStyles$s({
+    var classes = useStyles$t({
       theme: tweakStyles
     });
     var isTooShort = text.length < truncateIndex;
@@ -10616,7 +10616,7 @@
     return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);
   }
   var FILTER_HEIGHT = 36;
-  var useStyles$r = createThemedStyles("FiltersPane", {
+  var useStyles$s = createThemedStyles("FiltersPane", {
     root: {
       display: "flex",
       flexWrap: "wrap",
@@ -10681,7 +10681,7 @@
       }
     }
   };
-  var useStyles$q = createThemedStyles("FilterInterval", {
+  var useStyles$r = createThemedStyles("FilterInterval", {
     root: {
       padding: 8,
       background: colors.CLASSIC_WHITE
@@ -10778,7 +10778,7 @@
   }
   var FilterInterval = function(param) {
     var data = param.data, tweakStyles = param.tweakStyles, value = param.value, labelName = param.labelName, withFieldNameInLabel = param.withFieldNameInLabel, localeKey = param.localeKey, locale2 = param.locale, canBeFloat = param.canBeFloat, onChange = param.onChange, fromInput = param.fromInput, toInput = param.toInput, testId = param.testId;
-    var classes = useStyles$q({
+    var classes = useStyles$r({
       theme: tweakStyles
     });
     var translates = React.useMemo(function() {
@@ -10949,7 +10949,7 @@
   }
   var ITEM_HEIGHT$1 = 40;
   var TOP_GAP = 12;
-  var useStyles$p = createThemedStyles("MultiSelectList", {
+  var useStyles$q = createThemedStyles("MultiSelectList", {
     root: {
       width: 220,
       background: colors.CLASSIC_WHITE
@@ -11339,7 +11339,7 @@
       }
     };
     var isMounted = useIsMounted();
-    var classes = useStyles$p({
+    var classes = useStyles$q({
       theme: tweakStyles
     });
     var tweakCheckboxStyles = useTweakStyles({
@@ -11864,7 +11864,7 @@
   }
   var ITEM_HEIGHT = 40;
   var LIST_GAP = 12;
-  var useStyles$o = createThemedStyles("FilterSelect", {
+  var useStyles$p = createThemedStyles("FilterSelect", {
     root: {
       width: 220,
       background: colors.CLASSIC_WHITE
@@ -12254,7 +12254,7 @@
   };
   function FilterSelect(param) {
     var data = param.data, tweakStyles = param.tweakStyles, value = param.value, _param_isSearchEnabled = param.isSearchEnabled, isSearchEnabled = _param_isSearchEnabled === void 0 ? false : _param_isSearchEnabled, _param_isGroupingEnabled = param.isGroupingEnabled, isGroupingEnabled = _param_isGroupingEnabled === void 0 ? false : _param_isGroupingEnabled, localeKey = param.localeKey, locale2 = param.locale, onChange = param.onChange, options = param.options, fetchOptions = param.fetchOptions, footer = param.footer, _param_getValueView = param.getValueView, getValueView = _param_getValueView === void 0 ? defaultConvertFunction$1 : _param_getValueView, _param_getValueId = param.getValueId, getValueId = _param_getValueId === void 0 ? defaultConvertFunction$1 : _param_getValueId, _param_getValueString = param.getValueString, getValueString = _param_getValueString === void 0 ? defaultConvertFunction$1 : _param_getValueString, _param_hasClearButton = param.hasClearButton, hasClearButton = _param_hasClearButton === void 0 ? true : _param_hasClearButton, testId = param.testId;
-    var classes = useStyles$o({
+    var classes = useStyles$p({
       theme: tweakStyles
     });
     var tweakSearchInputStyles = useTweakStyles({
@@ -13738,7 +13738,7 @@
     }
   };
   const ru = locale;
-  var useStyles$n = createThemedStyles("FilterWithDates", {
+  var useStyles$o = createThemedStyles("FilterWithDates", {
     root: {
       background: colors.CLASSIC_WHITE,
       position: "relative",
@@ -13906,7 +13906,7 @@
   }
   var FilterWithDates = function(param) {
     var value = param.value, onChange = param.onChange, localeKey = param.localeKey, locale2 = param.locale, onStartBtnSubmit = param.onStartBtnSubmit, onEndBtnSubmit = param.onEndBtnSubmit, data = param.data, tweakStyles = param.tweakStyles, testId = param.testId, _param_startPickerProps = param.startPickerProps, startPickerProps = _param_startPickerProps === void 0 ? DEFAULT_PICKER_PROPS : _param_startPickerProps, _param_endPickerProps = param.endPickerProps, endPickerProps = _param_endPickerProps === void 0 ? DEFAULT_PICKER_PROPS : _param_endPickerProps, _param_isClearable = param.isClearable, isClearable = _param_isClearable === void 0 ? true : _param_isClearable;
-    var classes = useStyles$n({
+    var classes = useStyles$o({
       theme: tweakStyles
     });
     var tweakClearButtonStyles = useTweakStyles({
@@ -14073,7 +14073,7 @@
       ]
     }));
   };
-  var useStyles$m = createThemedStyles("FilterWithPeriod", {
+  var useStyles$n = createThemedStyles("FilterWithPeriod", {
     root: {},
     main: {},
     picker: {}
@@ -14209,7 +14209,7 @@
   }
   var FilterWithPeriod = function(param) {
     var value = param.value, localeKey = param.localeKey, locale2 = param.locale, onChange = param.onChange, onClose = param.onClose, periods = param.periods, tweakStyles = param.tweakStyles, testId = param.testId;
-    var classes = useStyles$m({
+    var classes = useStyles$n({
       theme: tweakStyles
     });
     var translates = React.useMemo(function() {
@@ -14601,7 +14601,7 @@
     console.warn("%cДля фильтра ".concat(filter.name, " не задан тип или component"), "background: red; color: black");
     return null;
   }
-  var useStyles$l = createThemedStyles("FiltersPaneSearch", {
+  var useStyles$m = createThemedStyles("FiltersPaneSearch", {
     root: {
       display: "flex",
       position: "relative",
@@ -14811,7 +14811,7 @@
   }
   function FiltersPaneSearch(param) {
     var value = param.value, _param_fields = param.fields, fields = _param_fields === void 0 ? [] : _param_fields, field = param.field, onChange = param.onChange, localeKey = param.localeKey, locale2 = param.locale, getValueId = param.getValueId, getValueView = param.getValueView, getValueString = param.getValueString, hasClearSelectButton = param.hasClearSelectButton, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isSelectSearchEnabled = param.isSelectSearchEnabled, isSelectSearchEnabled = _param_isSelectSearchEnabled === void 0 ? true : _param_isSelectSearchEnabled, _param_isAutoSizeable = param.isAutoSizeable, isAutoSizeable = _param_isAutoSizeable === void 0 ? true : _param_isAutoSizeable, maxLength = param.maxLength, data = param.data, tweakStyles = param.tweakStyles, testId = param.testId;
-    var classes = useStyles$l({
+    var classes = useStyles$m({
       theme: tweakStyles
     });
     var tweakSearchInputStyles = useTweakStyles({
@@ -14923,7 +14923,7 @@
       ]
     }));
   }
-  var useStyles$k = createThemedStyles("FilterValueView", {
+  var useStyles$l = createThemedStyles("FilterValueView", {
     text: {
       overflow: "hidden",
       textOverflow: "ellipsis",
@@ -14942,7 +14942,7 @@
   }
   function FilterValueView(param) {
     var locale2 = param.locale, localeKey = param.localeKey, filter = param.filter, value = param.value, tweakStyles = param.tweakStyles;
-    var classes = useStyles$k({
+    var classes = useStyles$l({
       theme: tweakStyles
     });
     if (value === void 0 || value === null) {
@@ -15093,7 +15093,7 @@
       children: displayValue(value)
     });
   }
-  var useStyles$j = createThemedStyles("FilterWrapper", {
+  var useStyles$k = createThemedStyles("FilterWrapper", {
     root: {
       position: "relative",
       transition: "0.25s ease-in-out",
@@ -15326,7 +15326,7 @@
       }
       onChange(v);
     };
-    var classes = useStyles$j({
+    var classes = useStyles$k({
       theme: tweakStyles
     });
     var tweakFilterValueViewStyles = useTweakStyles({
@@ -15483,7 +15483,7 @@
   }
   function FiltersPane(param) {
     var data = param.data, tweakStyles = param.tweakStyles, filtersConfig = param.filtersConfig, enabledFilters = param.enabledFilters, _param_values = param.values, values = _param_values === void 0 ? {} : _param_values, localeKey = param.localeKey, locale2 = param.locale, search = param.search, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_hasClearButton = param.hasClearButton, hasClearButton = _param_hasClearButton === void 0 ? true : _param_hasClearButton, testId = param.testId, onChangeFilters = param.onChangeFilters, onSettingsButtonClick = param.onSettingsButtonClick, onClear = param.onClear;
-    var classes = useStyles$r({
+    var classes = useStyles$s({
       theme: tweakStyles
     });
     var tweakClearButtonStyles = useTweakStyles({
@@ -21696,7 +21696,7 @@
     ZM,
     ZW
   };
-  var useStyles$i = createThemedStyles("Flag", {
+  var useStyles$j = createThemedStyles("Flag", {
     root: {
       // приходится хардкодить в компоненте, тк либа Flags выдает флаги с 2-3 пиксельным отступом снизу
       // если будет нужно, то можно вынести border на уровень пропсов
@@ -21714,7 +21714,7 @@
   });
   var Flag = function(param) {
     var _param_countryCode = param.countryCode, countryCode = _param_countryCode === void 0 ? "" : _param_countryCode, tweakStyles = param.tweakStyles;
-    var classes = useStyles$i({
+    var classes = useStyles$j({
       theme: tweakStyles
     });
     var CC2 = countryCode.toUpperCase();
@@ -21730,6 +21730,52 @@
       className: classes.root
     });
   };
+  var useStyles$i = createThemedStyles("Skeleton", {
+    root: {
+      display: "flex",
+      width: "100%",
+      height: "100%",
+      backgroundColor: rgba(colors.GREY_DISABLED, 0.8),
+      position: "relative",
+      borderRadius: 4,
+      overflow: "hidden",
+      "-webkit-mask-image": "-webkit-radial-gradient(white, black)",
+      "&::after": {
+        content: '""',
+        animation: "$skeleton 1.6s linear 0.5s infinite",
+        background: "linear-gradient(90deg, transparent, ".concat(rgba(colors.GREY_BACKGROUND, 0.65), ", transparent)"),
+        position: "absolute",
+        transform: "translateX(-100%)",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        top: 0
+      }
+    },
+    "@keyframes skeleton": {
+      "0%": {
+        transform: "translateX(-100%)"
+      },
+      "50%": {
+        transform: "translateX(100%)"
+      },
+      "100%": {
+        transform: "translateX(100%)"
+      }
+    }
+  });
+  var Skeleton = function(param) {
+    var height = param.height, tweakStyles = param.tweakStyles;
+    var classes = useStyles$i({
+      theme: tweakStyles
+    });
+    return /* @__PURE__ */ jsx("div", {
+      className: classes.root,
+      style: {
+        height
+      }
+    });
+  };
   var DEFAULT_DATE_FORMAT = "dd.MM.yyyy";
   function _instanceof(left2, right2) {
     if (right2 != null && typeof Symbol !== "undefined" && right2[Symbol.hasInstance]) {
@@ -21828,6 +21874,13 @@
     },
     headerSecond: {
       paddingLeft: STICKY_SHADOW_PADDING
+    },
+    skeleton: {
+      height: 21,
+      padding: [
+        14,
+        7
+      ]
     }
   });
   function _define_property$j(obj, key, value) {
@@ -22132,7 +22185,7 @@
         }
       }
     };
-    var items = enabledColumns !== null && enabledColumns !== void 0 ? enabledColumns : Object.keys(item);
+    var items = enabledColumns !== null && enabledColumns !== void 0 ? enabledColumns : Object.keys(config);
     var _obj;
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [
@@ -22150,11 +22203,11 @@
         }, addDataAttributes(_object_spread_props$f(_object_spread$g({}, rowData), {
           isExpandableComponentActive: nestedComponent.isOpen ? true : void 0
         }))), {
-          children: items.map(function(key, idx) {
+          children: items.map(function(key, i) {
             return /* @__PURE__ */ jsx(FlexibleTableCell, {
               columnName: key,
-              isSticky: isFirstColumnSticky && idx === 0,
-              isSecond: isFirstColumnSticky && idx === 1,
+              isSticky: isFirstColumnSticky && i === 0,
+              isSecond: isFirstColumnSticky && i === 1,
               item,
               config,
               tweakStyles: tweakTableCellStyles,
@@ -22289,7 +22342,7 @@
       return _array_like_to_array$8(o, minLen);
   }
   function FlexibleTable(param) {
-    var data = param.data, tweakStyles = param.tweakStyles, content = param.content, headerContent = param.headerContent, config = param.config, activeRows = param.activeRows, enabledColumns = param.enabledColumns, isHorizontallyScrollable = param.isHorizontallyScrollable, isFirstColumnSticky = param.isFirstColumnSticky, infinityScrollConfig = param.infinityScrollConfig, uniqueField = param.uniqueField, onHeadClick = param.onHeadClick, onRowHover = param.onRowHover, onRowClick = param.onRowClick, refForScroll = param.refForScroll, rowAttributes = param.rowAttributes, nothingFoundContent = param.nothingFoundContent, testId = param.testId, expandableRowComponent = param.expandableRowComponent;
+    var data = param.data, tweakStyles = param.tweakStyles, content = param.content, headerContent = param.headerContent, config = param.config, activeRows = param.activeRows, enabledColumns = param.enabledColumns, isHorizontallyScrollable = param.isHorizontallyScrollable, isFirstColumnSticky = param.isFirstColumnSticky, infinityScrollConfig = param.infinityScrollConfig, uniqueField = param.uniqueField, isLoading = param.isLoading, onHeadClick = param.onHeadClick, onRowHover = param.onRowHover, onRowClick = param.onRowClick, refForScroll = param.refForScroll, rowAttributes = param.rowAttributes, nothingFoundContent = param.nothingFoundContent, testId = param.testId, expandableRowComponent = param.expandableRowComponent;
     var classes = useStyles$h({
       theme: tweakStyles
     });
@@ -22303,6 +22356,12 @@
     var observer = React.useRef();
     var scrollRef = React.useRef(null);
     var ref = refForScroll !== null && refForScroll !== void 0 ? refForScroll : scrollRef;
+    var showedColumns = React.useMemo(function() {
+      return enabledColumns !== null && enabledColumns !== void 0 ? enabledColumns : Object.keys(config);
+    }, [
+      enabledColumns,
+      config
+    ]);
     var initIntersectionObserver = React.useCallback(function(node) {
       if (infinityScrollConfig) {
         if (infinityScrollConfig.isLoading || infinityScrollConfig.activePage >= infinityScrollConfig.totalPages) {
@@ -22361,7 +22420,7 @@
           /* @__PURE__ */ jsx("thead", {
             children: /* @__PURE__ */ jsx("tr", {
               className: classes.headerRow,
-              children: (enabledColumns || Object.keys(content[0])).map(function(key, idx) {
+              children: showedColumns.map(function(key, i) {
                 var itemConfig = config === null || config === void 0 ? void 0 : config[key];
                 var _itemConfig_title;
                 var titleContent = (_itemConfig_title = itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.title) !== null && _itemConfig_title !== void 0 ? _itemConfig_title : "";
@@ -22374,7 +22433,7 @@
                 var _itemConfig_titleAlign;
                 var _obj;
                 return /* @__PURE__ */ jsx("th", {
-                  className: clsx(classes.header, (_obj = {}, _define_property$g(_obj, classes.headerSticky, isFirstColumnSticky && idx === 0), _define_property$g(_obj, classes.headerSecond, isFirstColumnSticky && idx === 1), _obj)),
+                  className: clsx(classes.header, (_obj = {}, _define_property$g(_obj, classes.headerSticky, isFirstColumnSticky && i === 0), _define_property$g(_obj, classes.headerSecond, isFirstColumnSticky && i === 1), _obj)),
                   style: {
                     minWidth: itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.minWidth,
                     width: itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.width,
@@ -22391,38 +22450,51 @@
           }),
           /* @__PURE__ */ jsxs("tbody", {
             children: [
-              content.length === 0 && nothingFoundContent !== void 0 && !(infinityScrollConfig === null || infinityScrollConfig === void 0 ? void 0 : infinityScrollConfig.isLoading) && ((infinityScrollConfig === null || infinityScrollConfig === void 0 ? void 0 : infinityScrollConfig.isLastPage) === void 0 || infinityScrollConfig.isLastPage) && /* @__PURE__ */ jsx("tr", {
+              !trueReactPlatformHelpers.isArrayNotEmpty(content) && nothingFoundContent !== void 0 && !(infinityScrollConfig === null || infinityScrollConfig === void 0 ? void 0 : infinityScrollConfig.isLoading) && ((infinityScrollConfig === null || infinityScrollConfig === void 0 ? void 0 : infinityScrollConfig.isLastPage) === void 0 || infinityScrollConfig.isLastPage) && /* @__PURE__ */ jsx("tr", {
                 children: /* @__PURE__ */ jsx("td", {
-                  colSpan: (enabledColumns || Object.keys(content[0])).length,
+                  colSpan: showedColumns.length,
                   children: nothingFoundContent
                 })
               }),
-              content.map(function(item, i) {
-                return jsx(FlexibleTableRow, {
-                  item,
-                  uniqueField,
-                  isActive: (_activeRows_includes = activeRows === null || activeRows === void 0 ? void 0 : activeRows.includes(i)) !== null && _activeRows_includes !== void 0 ? _activeRows_includes : false,
-                  isFirstColumnSticky,
-                  onRowClick,
-                  onRowHover,
-                  enabledColumns,
-                  config,
-                  rowAttributes,
-                  tweakStyles: tweakTableRowStyles,
-                  expandableRowComponent
-                }, trueReactPlatformHelpers.isNotEmpty(uniqueField) ? item[uniqueField] : i);
-              }),
-              infinityScrollConfig !== void 0 && !infinityScrollConfig.isLastPage && /* @__PURE__ */ jsx("tr", {
-                children: /* @__PURE__ */ jsx("td", {
-                  colSpan: (enabledColumns || Object.keys(content[0])).length,
-                  children: /* @__PURE__ */ jsx("div", {
-                    ref: initIntersectionObserver,
-                    className: classes.loader,
-                    children: /* @__PURE__ */ jsx(ThemedPreloader, {
-                      type: "dots"
+              isLoading ? trueReactPlatformHelpers.indexMap(6, function(i) {
+                return /* @__PURE__ */ jsx("tr", {
+                  children: showedColumns.map(function(_, j) {
+                    return /* @__PURE__ */ jsx("td", {
+                      className: classes.skeleton,
+                      children: /* @__PURE__ */ jsx(Skeleton, {})
+                    }, j);
+                  })
+                }, i);
+              }) : /* @__PURE__ */ jsxs(Fragment, {
+                children: [
+                  content.map(function(item, i) {
+                    return jsx(FlexibleTableRow, {
+                      item,
+                      uniqueField,
+                      isActive: (_activeRows_includes = activeRows === null || activeRows === void 0 ? void 0 : activeRows.includes(i)) !== null && _activeRows_includes !== void 0 ? _activeRows_includes : false,
+                      isFirstColumnSticky,
+                      onRowClick,
+                      onRowHover,
+                      enabledColumns,
+                      config,
+                      rowAttributes,
+                      tweakStyles: tweakTableRowStyles,
+                      expandableRowComponent
+                    }, trueReactPlatformHelpers.isNotEmpty(uniqueField) ? item[uniqueField] : i);
+                  }),
+                  infinityScrollConfig !== void 0 && !infinityScrollConfig.isLastPage && /* @__PURE__ */ jsx("tr", {
+                    children: /* @__PURE__ */ jsx("td", {
+                      colSpan: showedColumns.length,
+                      children: /* @__PURE__ */ jsx("div", {
+                        ref: initIntersectionObserver,
+                        className: classes.loader,
+                        children: /* @__PURE__ */ jsx(ThemedPreloader, {
+                          type: "dots"
+                        })
+                      })
                     })
                   })
-                })
+                ]
               })
             ]
           })
@@ -28905,6 +28977,7 @@
   exports2.ScrollIntoViewIfNeeded = ScrollIntoViewIfNeeded;
   exports2.SearchInput = SearchInput;
   exports2.Select = Select;
+  exports2.Skeleton = Skeleton;
   exports2.SmartInput = SmartInput;
   exports2.Switch = Switch;
   exports2.TextArea = TextArea;