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

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

@@ -1,6 +1,6 @@
 import React, { createContext, useRef, useEffect, useCallback, useState, useMemo, useContext, createElement, Fragment as Fragment$1, forwardRef, createRef, PureComponent, useLayoutEffect, memo } from "react";
 import { createUseStyles } from "react-jss";
-import { mergeStyles, isNotEmpty, isArrayNotEmpty, isEmpty, isString, isStringNotEmpty, addDataTestId, getTestId, isReactNodeNotEmpty, getSelectKeyHandler, createFilter, getTransition, isNumberInteger } from "@true-engineering/true-react-platform-helpers";
+import { mergeStyles, isNotEmpty, isArrayNotEmpty, isEmpty, isString, isStringNotEmpty, addDataTestId, getTestId, isReactNodeNotEmpty, getSelectKeyHandler, createFilter, getTransition, indexMap, isNumberInteger } from "@true-engineering/true-react-platform-helpers";
 import { CSSTransition } from "react-transition-group";
 import clsx from "clsx";
 import InputMask from "react-input-mask";
@@ -5126,7 +5126,7 @@ var IconBoilerplate = function(param) {
     ]
   });
 };
-var useStyles$L = createThemedStyles("Icon", {
+var useStyles$M = createThemedStyles("Icon", {
   root: {
     display: "flex",
     alignItems: "center"
@@ -5186,7 +5186,7 @@ function _object_spread_props$F(target, source) {
 }
 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({
@@ -5207,7 +5207,7 @@ var renderIcon = function(icon) {
 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,
@@ -5304,7 +5304,7 @@ function _object_spread_props$E(target, source) {
 }
 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) {
@@ -5378,7 +5378,7 @@ function _object_spread$M(target) {
   }
   return target;
 }
-var useStyles$J = createThemedStyles("AccountInfo", _object_spread$M({
+var useStyles$K = createThemedStyles("AccountInfo", _object_spread$M({
   root: {
     display: "flex"
   },
@@ -5532,7 +5532,7 @@ function _unsupported_iterable_to_array$o(o, minLen) {
 }
 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({
@@ -5602,7 +5602,7 @@ var AccountInfo = function(param) {
     ]
   }));
 };
-var useStyles$I = createThemedStyles("AddButton", {
+var useStyles$J = createThemedStyles("AddButton", {
   root: {
     display: "flex",
     alignItems: "center",
@@ -5682,7 +5682,7 @@ function _object_spread_props$C(target, source) {
 }
 var AddButton = function(param) {
   var text = param.text, _param_type = param.type, type = _param_type === void 0 ? "button" : _param_type, isDisabled = param.isDisabled, onClick = param.onClick, isFullWidth = param.isFullWidth, data = param.data, 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({
@@ -5704,7 +5704,7 @@ var AddButton = function(param) {
     ]
   }));
 };
-var useStyles$H = createThemedStyles("DotsPreloader", {
+var useStyles$I = createThemedStyles("DotsPreloader", {
   root: {
     display: "flex",
     gap: 4,
@@ -5749,7 +5749,7 @@ var useStyles$H = createThemedStyles("DotsPreloader", {
 });
 var DotsPreloader = function(param) {
   var tweakStyles = param.tweakStyles;
-  var classes = useStyles$H({
+  var classes = useStyles$I({
     theme: tweakStyles
   });
   return /* @__PURE__ */ jsx("div", {
@@ -5815,7 +5815,7 @@ var DefaultPreloader = function() {
     ]
   });
 };
-var useStyles$G = createThemedStyles("SvgPreloader", {
+var useStyles$H = createThemedStyles("SvgPreloader", {
   root: {
     display: "flex",
     width: "100%",
@@ -5825,7 +5825,7 @@ var useStyles$G = createThemedStyles("SvgPreloader", {
 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 = useContext(ThemeContext).theme;
@@ -5839,7 +5839,7 @@ var SvgPreloader = function(param) {
     }
   }) : /* @__PURE__ */ jsx(PreloaderIcon, {});
 };
-var useStyles$F = createThemedStyles("ThemedPreloader", {
+var useStyles$G = createThemedStyles("ThemedPreloader", {
   root: {
     display: "flex"
   },
@@ -5904,7 +5904,7 @@ function _object_spread_props$B(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, testId = param.testId, tweakStyles = param.tweakStyles;
-  var classes = useStyles$F({
+  var classes = useStyles$G({
     theme: tweakStyles
   });
   var tweakDotsPreloaderStyles = useTweakStyles({
@@ -5928,7 +5928,7 @@ var ThemedPreloader = function(param) {
     })
   }));
 };
-var useStyles$E = createThemedStyles("Button", {
+var useStyles$F = createThemedStyles("Button", {
   root: {
     display: "flex",
     justifyContent: "center",
@@ -6154,7 +6154,7 @@ function _object_spread_props$A(target, source) {
 }
 var Button = /* @__PURE__ */ forwardRef(function(param, ref) {
   var _param_type = param.type, type = _param_type === void 0 ? "button" : _param_type, children = param.children, _param_size = param.size, size = _param_size === void 0 ? "l" : _param_size, _param_view = param.view, view = _param_view === void 0 ? "primary" : _param_view, _param_isFullWidth = param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? false : _param_isFullWidth, _param_isInline = param.isInline, isInline = _param_isInline === void 0 ? false : _param_isInline, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_shouldSkipTabNavigation = param.shouldSkipTabNavigation, shouldSkipTabNavigation = _param_shouldSkipTabNavigation === void 0 ? false : _param_shouldSkipTabNavigation, data = param.data, testId = param.testId, tweakStyles = param.tweakStyles, icon = param.icon, _param_iconPosition = param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_preloaderType = param.preloaderType, preloaderType = _param_preloaderType === void 0 ? "dots" : _param_preloaderType, onClick = param.onClick, onMouseDown = param.onMouseDown;
-  var classes = useStyles$E({
+  var classes = useStyles$F({
     theme: tweakStyles
   });
   var tweakPreloaderStyles = useTweakStyles({
@@ -6201,7 +6201,7 @@ var Button = /* @__PURE__ */ forwardRef(function(param, ref) {
     ]
   }));
 });
-var useStyles$D = createThemedStyles("Checkbox", {
+var useStyles$E = createThemedStyles("Checkbox", {
   root: {
     cursor: "pointer",
     display: "flex",
@@ -6350,7 +6350,7 @@ function _unsupported_iterable_to_array$n(o, minLen) {
 }
 function Checkbox(param) {
   var children = param.children, isDisabled = param.isDisabled, isReadonly = param.isReadonly, _param_isChecked = param.isChecked, isChecked = _param_isChecked === void 0 ? false : _param_isChecked, value = param.value, 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(useState(false), 2), isSelected = _useState[0], setIsSelected = _useState[1];
@@ -6396,7 +6396,7 @@ function Checkbox(param) {
     ]
   }));
 }
-var useStyles$C = createThemedStyles("CloseButton", {
+var useStyles$D = createThemedStyles("CloseButton", {
   root: {
     width: 40,
     height: 40,
@@ -6475,7 +6475,7 @@ function _object_spread_props$y(target, source) {
 }
 var CloseButton = function(param) {
   var tweakStyles = param.tweakStyles, testId = param.testId, data = param.data, _param_iconType = param.iconType, iconType = _param_iconType === void 0 ? "close" : _param_iconType, onClose = param.onClose;
-  var classes = useStyles$C({
+  var classes = useStyles$D({
     theme: tweakStyles
   });
   return /* @__PURE__ */ jsx("button", _object_spread_props$y(_object_spread$G({
@@ -6488,7 +6488,7 @@ var CloseButton = function(param) {
     })
   }));
 };
-var useStyles$B = createThemedStyles({
+var useStyles$C = createThemedStyles({
   root: {
     display: "flex",
     flexWrap: "wrap"
@@ -6581,7 +6581,7 @@ function _unsupported_iterable_to_array$m(o, minLen) {
     return _array_like_to_array$m(o, minLen);
 }
 var Colors = function() {
-  var classes = useStyles$B();
+  var classes = useStyles$C();
   var theme = useContext(ThemeContext).theme;
   var _theme_colors = theme.colors, colors2 = _theme_colors === void 0 ? {} : _theme_colors;
   return /* @__PURE__ */ jsx("div", {
@@ -6611,7 +6611,7 @@ var Colors = function() {
     })
   });
 };
-var useStyles$A = createThemedStyles("CssBaseline", {
+var useStyles$B = createThemedStyles("CssBaseline", {
   "@global html, body": {
     fontFamily: "Arial, sans-serif",
     color: colors.FONT_MAIN,
@@ -6650,7 +6650,7 @@ function _object_spread$F(target) {
 }
 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({
@@ -6660,7 +6660,7 @@ var CssBaseline = function(param) {
 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",
@@ -7176,7 +7176,7 @@ var __generator$5 = globalThis && globalThis.__generator || function(thisArg, bo
 };
 var Input = /* @__PURE__ */ forwardRef(function(param, ref) {
   var _param_value = param.value, value = _param_value === void 0 ? "" : _param_value, label = param.label, placeholder = param.placeholder, _param_type = param.type, type = _param_type === void 0 ? "text" : _param_type, isDisabled = param.isDisabled, isReadonly = param.isReadonly, _param_hasFloatingLabel = param.hasFloatingLabel, hasFloatingLabel = _param_hasFloatingLabel === void 0 ? true : _param_hasFloatingLabel, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isClearable = param.isClearable, isClearable = _param_isClearable === void 0 ? false : _param_isClearable, infoMessage = param.infoMessage, errorMessage = param.errorMessage, _param_errorPosition = param.errorPosition, errorPosition = _param_errorPosition === void 0 ? "bottom" : _param_errorPosition, inlineStyle = param.inlineStyle, border = param.border, isRequired = param.isRequired, isLoading = param.isLoading, isAutoSizeable = param.isAutoSizeable, _param_defaultSize = param.defaultSize, defaultSize = _param_defaultSize === void 0 ? DEFAULT_SIZE : _param_defaultSize, iconType = param.iconType, name = param.name, hasRequiredLabel = param.hasRequiredLabel, data = param.data, tweakStyles = param.tweakStyles, maxLength = param.maxLength, shouldFocusOnMount = param.shouldFocusOnMount, units = param.units, testId = param.testId, tabIndex = param.tabIndex, onChange = param.onChange, onPaste = param.onPaste, onFocus = param.onFocus, onBlur = param.onBlur, onIconClick = param.onIconClick, onKeyDown = param.onKeyDown, mask = param.mask, maskPlaceholder = param.maskPlaceholder, alwaysShowMask = param.alwaysShowMask, shouldAlwaysShowPlaceholder = param.shouldAlwaysShowPlaceholder, beforeMaskedStateChange = param.beforeMaskedStateChange;
-  var classes = useStyles$z({
+  var classes = useStyles$A({
     theme: tweakStyles
   });
   var tweakPreloaderStyles = useTweakStyles({
@@ -7325,7 +7325,7 @@ 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 useStyles$y = createThemedStyles("DateInput", {
+var useStyles$z = createThemedStyles("DateInput", {
   root: {
     width: "100%",
     height: "100%",
@@ -7431,7 +7431,7 @@ var DateInput = /* @__PURE__ */ forwardRef(function(_param, ref) {
     "onClick",
     "onChange"
   ]);
-  var classes = useStyles$y({
+  var classes = useStyles$z({
     theme: tweakStyles
   });
   var tweakInputStyles = useTweakStyles({
@@ -7475,7 +7475,7 @@ var DateInput = /* @__PURE__ */ forwardRef(function(_param, ref) {
 });
 const reactDatepicker = "";
 var LEFT_PADDING = 44;
-var useStyles$x = createThemedStyles("SearchInput", {
+var useStyles$y = createThemedStyles("SearchInput", {
   root: {
     position: "relative"
   },
@@ -7603,7 +7603,7 @@ var SearchInput = function(_param) {
     "testId",
     "data"
   ]);
-  var classes = useStyles$x({
+  var classes = useStyles$y({
     theme: tweakStyles
   });
   var tweakInputStyles = useTweakStyles({
@@ -7890,7 +7890,7 @@ var CELL_PADDING = [
   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)",
@@ -8094,7 +8094,7 @@ function _object_spread_props$t(target, source) {
 }
 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 = isNotEmpty(onToggleCheckbox);
@@ -8210,7 +8210,7 @@ var getDefaultConvertToIdFunction = function(convertValueToString) {
 var isMultiSelectValue = function(props, _value) {
   return props.isMultiSelect === true;
 };
-var useStyles$v = createThemedStyles("Select", {
+var useStyles$w = createThemedStyles("Select", {
   root: {
     width: "100%",
     position: "relative",
@@ -8634,7 +8634,7 @@ function Select(props) {
     "convertValueToReactNode",
     "optionsFilter"
   ]);
-  var classes = useStyles$v({
+  var classes = useStyles$w({
     theme: tweakStyles
   });
   var shouldRenderSearchInputInList = (searchInput === null || searchInput === void 0 ? void 0 : searchInput.shouldRenderInList) === true;
@@ -9056,7 +9056,7 @@ function Select(props) {
 }
 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,
@@ -9125,7 +9125,7 @@ var selectStyles$1 = {
 };
 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({
@@ -9234,7 +9234,7 @@ var getDateValueParser = function(dateFormat) {
 var areDatesEquals = function(date1, date2) {
   return isEmpty(date1) && isEmpty(date2) || isNotEmpty(date1) && isNotEmpty(date2) && isSameDay(date1, date2);
 };
-var useStyles$t = createThemedStyles("DatePicker", {
+var useStyles$u = createThemedStyles("DatePicker", {
   root: {
     width: "100%",
     height: "100%"
@@ -9445,7 +9445,7 @@ var DatePicker = /* @__PURE__ */ forwardRef(function(_param, ref) {
     "onKeyDown",
     "tweakStyles"
   ]);
-  var classes = useStyles$t({
+  var classes = useStyles$u({
     theme: tweakStyles
   });
   var tweakDateInputStyles = useTweakStyles({
@@ -9637,7 +9637,7 @@ var DatePicker = /* @__PURE__ */ forwardRef(function(_param, ref) {
   }));
 });
 var LINK_REGEXP = /(http(s?):\/\/(.*))(\s?)/;
-var useStyles$s = createThemedStyles("Description", {
+var useStyles$t = createThemedStyles("Description", {
   root: {},
   button: {
     cursor: "pointer",
@@ -9779,7 +9779,7 @@ function _unsupported_iterable_to_array$i(o, minLen) {
 }
 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;
@@ -10626,7 +10626,7 @@ function cloneDeep(value) {
   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",
@@ -10691,7 +10691,7 @@ var innerTextButtonStyles = {
     }
   }
 };
-var useStyles$q = createThemedStyles("FilterInterval", {
+var useStyles$r = createThemedStyles("FilterInterval", {
   root: {
     padding: 8,
     background: colors.CLASSIC_WHITE
@@ -10788,7 +10788,7 @@ function _object_spread_props$p(target, source) {
 }
 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 = useMemo(function() {
@@ -10959,7 +10959,7 @@ function _object_spread$s(target) {
 }
 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
@@ -11349,7 +11349,7 @@ function MultiSelectList(param) {
     }
   };
   var isMounted = useIsMounted();
-  var classes = useStyles$p({
+  var classes = useStyles$q({
     theme: tweakStyles
   });
   var tweakCheckboxStyles = useTweakStyles({
@@ -11874,7 +11874,7 @@ function _object_spread$p(target) {
 }
 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
@@ -12264,7 +12264,7 @@ var __generator$1 = globalThis && globalThis.__generator || function(thisArg, bo
 };
 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({
@@ -13748,7 +13748,7 @@ var locale = {
   }
 };
 const ru = locale;
-var useStyles$n = createThemedStyles("FilterWithDates", {
+var useStyles$o = createThemedStyles("FilterWithDates", {
   root: {
     background: colors.CLASSIC_WHITE,
     position: "relative",
@@ -13916,7 +13916,7 @@ function _unsupported_iterable_to_array$e(o, minLen) {
 }
 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({
@@ -14083,7 +14083,7 @@ var FilterWithDates = function(param) {
     ]
   }));
 };
-var useStyles$m = createThemedStyles("FilterWithPeriod", {
+var useStyles$n = createThemedStyles("FilterWithPeriod", {
   root: {},
   main: {},
   picker: {}
@@ -14219,7 +14219,7 @@ function _unsupported_iterable_to_array$d(o, minLen) {
 }
 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 = useMemo(function() {
@@ -14611,7 +14611,7 @@ function Filter(param) {
   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",
@@ -14821,7 +14821,7 @@ function _unsupported_iterable_to_array$b(o, minLen) {
 }
 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({
@@ -14933,7 +14933,7 @@ function FiltersPaneSearch(param) {
     ]
   }));
 }
-var useStyles$k = createThemedStyles("FilterValueView", {
+var useStyles$l = createThemedStyles("FilterValueView", {
   text: {
     overflow: "hidden",
     textOverflow: "ellipsis",
@@ -14952,7 +14952,7 @@ function _instanceof$1(left2, right2) {
 }
 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) {
@@ -15103,7 +15103,7 @@ function FilterValueView(param) {
     children: displayValue(value)
   });
 }
-var useStyles$j = createThemedStyles("FilterWrapper", {
+var useStyles$k = createThemedStyles("FilterWrapper", {
   root: {
     position: "relative",
     transition: "0.25s ease-in-out",
@@ -15336,7 +15336,7 @@ function FilterWrapper(param) {
     }
     onChange(v);
   };
-  var classes = useStyles$j({
+  var classes = useStyles$k({
     theme: tweakStyles
   });
   var tweakFilterValueViewStyles = useTweakStyles({
@@ -15493,7 +15493,7 @@ function _object_spread_props$h(target, source) {
 }
 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({
@@ -21706,7 +21706,7 @@ const Flags = {
   ZM,
   ZW
 };
-var useStyles$i = createThemedStyles("Flag", {
+var useStyles$j = createThemedStyles("Flag", {
   root: {
     // приходится хардкодить в компоненте, тк либа Flags выдает флаги с 2-3 пиксельным отступом снизу
     // если будет нужно, то можно вынести border на уровень пропсов
@@ -21724,7 +21724,7 @@ var useStyles$i = createThemedStyles("Flag", {
 });
 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 CC3 = countryCode.toUpperCase();
@@ -21740,6 +21740,52 @@ var Flag = function(param) {
     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]) {
@@ -21838,6 +21884,13 @@ var useStyles$h = createThemedStyles("FlexibleTable", {
   },
   headerSecond: {
     paddingLeft: STICKY_SHADOW_PADDING
+  },
+  skeleton: {
+    height: 21,
+    padding: [
+      14,
+      7
+    ]
   }
 });
 function _define_property$j(obj, key, value) {
@@ -22142,7 +22195,7 @@ function FlexibleTableRowInner(param) {
       }
     }
   };
-  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: [
@@ -22160,11 +22213,11 @@ function FlexibleTableRowInner(param) {
       }, 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,
@@ -22299,7 +22352,7 @@ function _unsupported_iterable_to_array$8(o, minLen) {
     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
   });
@@ -22313,6 +22366,12 @@ function FlexibleTable(param) {
   var observer = useRef();
   var scrollRef = useRef(null);
   var ref = refForScroll !== null && refForScroll !== void 0 ? refForScroll : scrollRef;
+  var showedColumns = useMemo(function() {
+    return enabledColumns !== null && enabledColumns !== void 0 ? enabledColumns : Object.keys(config);
+  }, [
+    enabledColumns,
+    config
+  ]);
   var initIntersectionObserver = useCallback(function(node) {
     if (infinityScrollConfig) {
       if (infinityScrollConfig.isLoading || infinityScrollConfig.activePage >= infinityScrollConfig.totalPages) {
@@ -22371,7 +22430,7 @@ function FlexibleTable(param) {
         /* @__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 : "";
@@ -22384,7 +22443,7 @@ function FlexibleTable(param) {
               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,
@@ -22401,38 +22460,51 @@ function FlexibleTable(param) {
         }),
         /* @__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", {
+            !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
-              }, 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 ? 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
+                  }, 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"
+                      })
+                    })
                   })
                 })
-              })
+              ]
             })
           ]
         })
@@ -28916,6 +28988,7 @@ export {
   ScrollIntoViewIfNeeded,
   SearchInput,
   Select,
+  Skeleton,
   SmartInput,
   Switch,
   TextArea,