@salutejs/plasma-new-hope 0.344.0-canary.2398.20426736662.0 → 0.344.0-canary.2400.20429488881.0

package/dist/emotion/es/components/Table/Table.tokens.js

@@ -4,7 +4,8 @@ export var classes = {
     sortingAscIcon: 'sorting-asc-icon',
     sortingDescIcon: 'sorting-desc-icon',
     filterIcon: 'filter-icon',
-    resizeDivider: 'resize-divider'
+    resizeDivider: 'resize-divider',
+    scrollableContainer: 'table-scrollable-container'
 };
 export var tableTokens = {
     fontFamily: '--plasma-table-font-family',

package/dist/emotion/es/components/_beta/Tooltip/Tooltip.types.js

@@ -0,0 +1 @@
+export { };

package/dist/styled-components/cjs/components/LinkButton/LinkButton.js

@@ -144,7 +144,6 @@ var linkButtonRoot = function(Root) {
             href: disabled ? undefined : href,
             rel: target === '_blank' ? 'noopener noreferrer' : rel
         };
-        var hasContent = Boolean(txt || children || additionalContent || contentRight);
         return /*#__PURE__*/ _react.default.createElement(Root, _object_spread({
             ref: ref,
             view: view,
@@ -157,11 +156,7 @@ var linkButtonRoot = function(Root) {
         }, linkProps, rest), /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.LoadWrap, {
             isLoading: !disabled && isLoading,
             style: _object_spread({}, loadingCustomOpacity)
-        }, contentLeft && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledContentLeft, {
-            hasContent: hasContent
-        }, contentLeft), txt ? /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.LinkButtonText, null, txt) : children, additionalContent && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledAdditionalContent, null, additionalContent), contentRight && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledContentRight, {
-            hasContent: hasContent
-        }, contentRight)), !disabled && isLoading && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.Loader, null, loader || /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledSpinner, null)));
+        }, contentLeft && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.LinkButtonText, null, txt) : children, additionalContent && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledAdditionalContent, null, additionalContent), contentRight && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledContentRight, null, contentRight)), !disabled && isLoading && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.Loader, null, loader || /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledSpinner, null)));
     });
 };
 var linkButtonConfig = {

package/dist/styled-components/cjs/components/LinkButton/LinkButton.styles.js

@@ -93,14 +93,14 @@ var base = (0, _styledcomponents.css)([
 }));
 var StyledAdditionalContent = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__StyledAdditionalContent",
-    componentId: "sc-f97b8dcf-0"
+    componentId: "sc-e83eddac-0"
 })([
     "display:flex;align-items:center;margin:var(",
     ");"
 ], _LinkButtontokens.tokens.linkButtonAdditionalContentMargin);
 var LoadWrap = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__LoadWrap",
-    componentId: "sc-f97b8dcf-1"
+    componentId: "sc-e83eddac-1"
 })([
     "opacity:",
     ";display:flex;align-items:inherit;justify-content:inherit;height:100%;width:100%;"
@@ -110,13 +110,13 @@ var LoadWrap = _styledcomponents.default.div.withConfig({
 });
 var Loader = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__Loader",
-    componentId: "sc-f97b8dcf-2"
+    componentId: "sc-e83eddac-2"
 })([
     "position:absolute;"
 ]);
 var StyledSpinner = (0, _styledcomponents.default)(Spinner).withConfig({
     displayName: "LinkButton.styles__StyledSpinner",
-    componentId: "sc-f97b8dcf-3"
+    componentId: "sc-e83eddac-3"
 })([
     "",
     ":var(",
@@ -126,7 +126,7 @@ var StyledSpinner = (0, _styledcomponents.default)(Spinner).withConfig({
 ], _Spinner.spinnerTokens.size, _LinkButtontokens.tokens.linkButtonSpinnerSize, _Spinner.spinnerTokens.color, _LinkButtontokens.tokens.linkButtonSpinnerColor);
 var LinkButtonText = _styledcomponents.default.span.withConfig({
     displayName: "LinkButton.styles__LinkButtonText",
-    componentId: "sc-f97b8dcf-4"
+    componentId: "sc-e83eddac-4"
 })([
     "padding:var(",
     ");color:var(",
@@ -137,23 +137,17 @@ var LinkButtonText = _styledcomponents.default.span.withConfig({
 ], _LinkButtontokens.tokens.linkButtonTextPadding, _LinkButtontokens.tokens.linkButtonTextColor, (0, _mixins.applyEllipsis)(), _LinkButtontokens.tokens.linkButtonTextColorHover, _LinkButtontokens.tokens.linkButtonTextColorActive);
 var StyledContentLeft = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__StyledContentLeft",
-    componentId: "sc-f97b8dcf-5"
+    componentId: "sc-e83eddac-5"
 })([
     "line-height:0;color:var(",
-    ");margin:",
-    ";"
-], _LinkButtontokens.tokens.linkButtonIconColor, function(param) {
-    var hasContent = param.hasContent;
-    return hasContent ? "var(".concat(_LinkButtontokens.tokens.linkButtonLeftContentMargin, ")") : '0';
-});
+    ");margin:var(",
+    ");"
+], _LinkButtontokens.tokens.linkButtonIconColor, _LinkButtontokens.tokens.linkButtonLeftContentMargin);
 var StyledContentRight = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__StyledContentRight",
-    componentId: "sc-f97b8dcf-6"
+    componentId: "sc-e83eddac-6"
 })([
     "line-height:0;color:var(",
-    ");margin:",
-    ";"
-], _LinkButtontokens.tokens.linkButtonIconColor, function(param) {
-    var hasContent = param.hasContent;
-    return hasContent ? "var(".concat(_LinkButtontokens.tokens.linkButtonRightContentMargin, ")") : '0';
-});
+    ");margin:var(",
+    ");"
+], _LinkButtontokens.tokens.linkButtonIconColor, _LinkButtontokens.tokens.linkButtonRightContentMargin);

package/dist/styled-components/cjs/components/Table/Table.js

@@ -19,6 +19,7 @@ _export(exports, {
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _reacttable = require("@tanstack/react-table");
 var _plasmacore = require("@salutejs/plasma-core");
+var _Tabletokens = require("./Table.tokens");
 var _utils = require("./utils");
 var _ui = require("./ui");
 var _Tablestyles = require("./Table.styles");
@@ -178,7 +179,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 var tableRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(_param, ref) {
-        var data = _param.data, onChange = _param.onChange, columns = _param.columns, view = _param.view, size = _param.size, _param_borderVariant = _param.borderVariant, borderVariant = _param_borderVariant === void 0 ? 'all' : _param_borderVariant, _param_enableSelection = _param.enableSelection, enableSelection = _param_enableSelection === void 0 ? false : _param_enableSelection, outerSelected = _param.selected, outerFiltered = _param.filtered, outerSorted = _param.sorted, maxHeight = _param.maxHeight, _param_stickyHeader = _param.stickyHeader, stickyHeader = _param_stickyHeader === void 0 ? false : _param_stickyHeader, onCellUpdate = _param.onCellUpdate, setRowProps = _param.setRowProps, props = _object_without_properties(_param, [
+        var data = _param.data, onChange = _param.onChange, columns = _param.columns, view = _param.view, size = _param.size, _param_borderVariant = _param.borderVariant, borderVariant = _param_borderVariant === void 0 ? 'all' : _param_borderVariant, _param_enableSelection = _param.enableSelection, enableSelection = _param_enableSelection === void 0 ? false : _param_enableSelection, outerSelected = _param.selected, outerFiltered = _param.filtered, outerSorted = _param.sorted, maxHeight = _param.maxHeight, _param_stickyHeader = _param.stickyHeader, stickyHeader = _param_stickyHeader === void 0 ? false : _param_stickyHeader, onCellUpdate = _param.onCellUpdate, setRowProps = _param.setRowProps, topContent = _param.topContent, bottomContent = _param.bottomContent, loadingSlot = _param.loadingSlot, onScroll = _param.onScroll, props = _object_without_properties(_param, [
             "data",
             "onChange",
             "columns",
@@ -192,7 +193,11 @@ var tableRoot = function(Root) {
             "maxHeight",
             "stickyHeader",
             "onCellUpdate",
-            "setRowProps"
+            "setRowProps",
+            "topContent",
+            "bottomContent",
+            "loadingSlot",
+            "onScroll"
         ]);
         var _useState = _sliced_to_array((0, _react.useState)(outerSelected || {}), 2), innerSelected = _useState[0], innerSetSelected = _useState[1];
         var _useState1 = _sliced_to_array((0, _react.useState)(outerFiltered || []), 2), innerFiltered = _useState1[0], setInnerFiltered = _useState1[1];
@@ -315,6 +320,7 @@ var tableRoot = function(Root) {
             onRowSelectionChange: handleRowSelection,
             columnResizeMode: 'onChange',
             columnResizeDirection: 'ltr',
+            manualPagination: true,
             meta: {
                 updateData: function(rowId, columnId, value) {
                     if (onCellUpdate) {
@@ -328,11 +334,12 @@ var tableRoot = function(Root) {
             data: data,
             columns: columns,
             view: view,
-            size: size,
-            style: {
-                maxHeight: maxHeight || 'none'
-            }
-        }, props), /*#__PURE__*/ _react.default.createElement(_Tablestyles.Table, {
+            size: size
+        }, props), topContent, /*#__PURE__*/ _react.default.createElement(_Tablestyles.ScrollableWrapper, {
+            className: _Tabletokens.classes.scrollableContainer,
+            onScroll: onScroll,
+            maxHeight: maxHeight
+        }, /*#__PURE__*/ _react.default.createElement(_Tablestyles.Table, {
             borderVariant: borderVariant,
             stickyHeader: stickyHeader
         }, /*#__PURE__*/ _react.default.createElement(_Tablestyles.Thead, {
@@ -359,8 +366,6 @@ var tableRoot = function(Root) {
             }, setRowProps === null || setRowProps === void 0 ? void 0 : setRowProps(row.original)), row.getVisibleCells().map(function(cell) {
                 var _cell_column_columnDef_meta_setCellProps, _cell_column_columnDef_meta, _cell_column_columnDef, _cell_column, _cell_column_columnDef_meta1, _cell_column_columnDef1, _cell_column1;
                 var additionalProps = (cell === null || cell === void 0 ? void 0 : (_cell_column = cell.column) === null || _cell_column === void 0 ? void 0 : (_cell_column_columnDef = _cell_column.columnDef) === null || _cell_column_columnDef === void 0 ? void 0 : (_cell_column_columnDef_meta = _cell_column_columnDef.meta) === null || _cell_column_columnDef_meta === void 0 ? void 0 : (_cell_column_columnDef_meta_setCellProps = _cell_column_columnDef_meta.setCellProps) === null || _cell_column_columnDef_meta_setCellProps === void 0 ? void 0 : _cell_column_columnDef_meta_setCellProps.call(_cell_column_columnDef_meta, cell.row.original, cell.id)) || {};
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
                 return (cell === null || cell === void 0 ? void 0 : (_cell_column1 = cell.column) === null || _cell_column1 === void 0 ? void 0 : (_cell_column_columnDef1 = _cell_column1.columnDef) === null || _cell_column_columnDef1 === void 0 ? void 0 : (_cell_column_columnDef_meta1 = _cell_column_columnDef1.meta) === null || _cell_column_columnDef_meta1 === void 0 ? void 0 : _cell_column_columnDef_meta1.enableEditing) ? /*#__PURE__*/ _react.default.createElement(_ui.EditableCell, {
                     key: cell.id,
                     size: size,
@@ -379,7 +384,7 @@ var tableRoot = function(Root) {
                     additionalProps: additionalProps
                 });
             }));
-        }))));
+        }))), loadingSlot), bottomContent);
     });
 };
 var tableConfig = {

package/dist/styled-components/cjs/components/Table/Table.styles.js

@@ -21,6 +21,9 @@ _export(exports, {
     get Resizer () {
         return Resizer;
     },
+    get ScrollableWrapper () {
+        return ScrollableWrapper;
+    },
     get StyledCheckbox () {
         return StyledCheckbox;
     },
@@ -103,11 +106,21 @@ var Divider = (0, _engines.component)(mergedDividerConfig);
 var mergedLinkButtonConfig = (0, _engines.mergeConfig)(_LinkButton.linkButtonConfig);
 var LinkButtonBase = (0, _engines.component)(mergedLinkButtonConfig);
 var base = (0, _styledcomponents.css)([
-    "display:inline-block;overflow-y:auto;"
+    "display:inline-flex;flex-direction:column;align-items:flex-start;"
 ]);
+var ScrollableWrapper = _styledcomponents.default.div.withConfig({
+    displayName: "Table.styles__ScrollableWrapper",
+    componentId: "sc-c4913190-0"
+})([
+    "overflow-y:auto;max-height:",
+    ";"
+], function(param) {
+    var maxHeight = param.maxHeight;
+    return maxHeight || 'none';
+});
 var Table = _styledcomponents.default.table.withConfig({
     displayName: "Table.styles__Table",
-    componentId: "sc-382f3104-0"
+    componentId: "sc-c4913190-1"
 })([
     "width:fit-content;font-family:var(",
     ");font-size:var(",
@@ -123,7 +136,7 @@ var Table = _styledcomponents.default.table.withConfig({
 });
 var Tr = _styledcomponents.default.tr.withConfig({
     displayName: "Table.styles__Tr",
-    componentId: "sc-382f3104-1"
+    componentId: "sc-c4913190-2"
 })([
     "box-sizing:content-box;width:fit-content;background-color:",
     ";"
@@ -133,11 +146,11 @@ var Tr = _styledcomponents.default.tr.withConfig({
 });
 var Thead = _styledcomponents.default.thead.withConfig({
     displayName: "Table.styles__Thead",
-    componentId: "sc-382f3104-2"
+    componentId: "sc-c4913190-3"
 })([
     "position:",
     ";top:0;background:",
-    ";z-index:1;box-shadow:",
+    ";z-index:10;box-shadow:",
     ";",
     "{background:transparent;}"
 ], function(param) {
@@ -153,13 +166,13 @@ var Thead = _styledcomponents.default.thead.withConfig({
 }, Tr);
 var Tbody = _styledcomponents.default.tbody.withConfig({
     displayName: "Table.styles__Tbody",
-    componentId: "sc-382f3104-3"
+    componentId: "sc-c4913190-4"
 })([
     ""
 ]);
 var Resizer = _styledcomponents.default.div.withConfig({
     displayName: "Table.styles__Resizer",
-    componentId: "sc-382f3104-4"
+    componentId: "sc-c4913190-5"
 })([
     "display:",
     ";position:absolute;z-index:1;top:-0.0625rem;bottom:0;right:-0.125rem;width:0.1875rem;background:var(--outline-accent);cursor:col-resize;user-select:none;touch-action:none;"
@@ -169,12 +182,12 @@ var Resizer = _styledcomponents.default.div.withConfig({
 });
 var Th = _styledcomponents.default.th.withConfig({
     displayName: "Table.styles__Th",
-    componentId: "sc-382f3104-5"
+    componentId: "sc-c4913190-6"
 })([
     "padding:",
     ";position:relative;font-weight:600;text-align:left;height:var(",
     ");background-color:transparent;color:inherit;box-sizing:content-box;border-width:0.0625rem;border-top-width:0;border-bottom-width:0;border-style:solid;border-color:",
-    ";&:hover{",
+    ";box-sizing:border-box;&:hover{",
     "{display:block;}}"
 ], function(param) {
     var selectionCell = param.selectionCell;
@@ -185,7 +198,7 @@ var Th = _styledcomponents.default.th.withConfig({
 }, Resizer);
 var StyledCheckbox = (0, _styledcomponents.default)(Checkbox).withConfig({
     displayName: "Table.styles__StyledCheckbox",
-    componentId: "sc-382f3104-6"
+    componentId: "sc-c4913190-7"
 })([
     "",
     ":var(",
@@ -205,7 +218,7 @@ var StyledCheckbox = (0, _styledcomponents.default)(Checkbox).withConfig({
 ], _Checkbox.checkboxTokens.triggerSize, _Tabletokens.tableTokens.checkboxTriggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Tabletokens.tableTokens.checkboxTriggerBorderRadius, _Checkbox.checkboxTokens.fillColor, _Tabletokens.tableTokens.checkboxFillColor, _Checkbox.checkboxTokens.iconColor, _Tabletokens.tableTokens.checkboxTriggerIconColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor, _Tabletokens.tableTokens.checkboxTriggerBorderCheckedColor, _Checkbox.checkboxTokens.triggerBorderWidth, _Tabletokens.tableTokens.checkboxTriggerBorderWidth, _Checkbox.checkboxTokens.triggerBorderColor, _Tabletokens.tableTokens.checkboxTriggerBorderColor);
 var StyledDivider = (0, _styledcomponents.default)(Divider).withConfig({
     displayName: "Table.styles__StyledDivider",
-    componentId: "sc-382f3104-7"
+    componentId: "sc-c4913190-8"
 })([
     "",
     ":0.0625rem;",
@@ -214,7 +227,7 @@ var StyledDivider = (0, _styledcomponents.default)(Divider).withConfig({
 ], _Divider.dividerTokens.baseSideSize, _Divider.dividerTokens.background, _Divider.dividerTokens.borderRadius);
 var Button = (0, _styledcomponents.default)(ButtonBase).withConfig({
     displayName: "Table.styles__Button",
-    componentId: "sc-382f3104-8"
+    componentId: "sc-c4913190-9"
 })([
     "",
     ":var(",
@@ -235,7 +248,7 @@ var Button = (0, _styledcomponents.default)(ButtonBase).withConfig({
 ], _Button.buttonTokens.buttonHeight, _Tabletokens.tableTokens.buttonHeight, _Button.buttonTokens.buttonDisabledOpacity, _Button.buttonTokens.buttonFontFamily, _Tabletokens.tableTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Tabletokens.tableTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Tabletokens.tableTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Tabletokens.tableTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Tabletokens.tableTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Tabletokens.tableTokens.buttonLineHeight);
 var ButtonAccent = (0, _styledcomponents.default)(Button).withConfig({
     displayName: "Table.styles__ButtonAccent",
-    componentId: "sc-382f3104-9"
+    componentId: "sc-c4913190-10"
 })([
     "",
     ":var(--on-dark-text-primary);",
@@ -246,7 +259,7 @@ var ButtonAccent = (0, _styledcomponents.default)(Button).withConfig({
 ], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonBackgroundColorActive);
 var LinkButton = (0, _styledcomponents.default)(LinkButtonBase).withConfig({
     displayName: "Table.styles__LinkButton",
-    componentId: "sc-382f3104-10"
+    componentId: "sc-c4913190-11"
 })([
     "",
     ":var(--text-primary);",

package/dist/styled-components/cjs/components/Table/Table.tokens.js

@@ -22,7 +22,8 @@ var classes = {
     sortingAscIcon: 'sorting-asc-icon',
     sortingDescIcon: 'sorting-desc-icon',
     filterIcon: 'filter-icon',
-    resizeDivider: 'resize-divider'
+    resizeDivider: 'resize-divider',
+    scrollableContainer: 'table-scrollable-container'
 };
 var tableTokens = {
     fontFamily: '--plasma-table-font-family',

package/dist/styled-components/cjs/components/_beta/Tooltip/Tooltip.types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/styled-components/es/components/LinkButton/LinkButton.js

@@ -85,7 +85,6 @@ export var linkButtonRoot = function(Root) {
             href: disabled ? undefined : href,
             rel: target === '_blank' ? 'noopener noreferrer' : rel
         };
-        var hasContent = Boolean(txt || children || additionalContent || contentRight);
         return /*#__PURE__*/ React.createElement(Root, _object_spread({
             ref: ref,
             view: view,
@@ -98,11 +97,7 @@ export var linkButtonRoot = function(Root) {
         }, linkProps, rest), /*#__PURE__*/ React.createElement(LoadWrap, {
             isLoading: !disabled && isLoading,
             style: _object_spread({}, loadingCustomOpacity)
-        }, contentLeft && /*#__PURE__*/ React.createElement(StyledContentLeft, {
-            hasContent: hasContent
-        }, contentLeft), txt ? /*#__PURE__*/ React.createElement(LinkButtonText, null, txt) : children, additionalContent && /*#__PURE__*/ React.createElement(StyledAdditionalContent, null, additionalContent), contentRight && /*#__PURE__*/ React.createElement(StyledContentRight, {
-            hasContent: hasContent
-        }, contentRight)), !disabled && isLoading && /*#__PURE__*/ React.createElement(Loader, null, loader || /*#__PURE__*/ React.createElement(StyledSpinner, null)));
+        }, contentLeft && /*#__PURE__*/ React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/ React.createElement(LinkButtonText, null, txt) : children, additionalContent && /*#__PURE__*/ React.createElement(StyledAdditionalContent, null, additionalContent), contentRight && /*#__PURE__*/ React.createElement(StyledContentRight, null, contentRight)), !disabled && isLoading && /*#__PURE__*/ React.createElement(Loader, null, loader || /*#__PURE__*/ React.createElement(StyledSpinner, null)));
     });
 };
 export var linkButtonConfig = {

package/dist/styled-components/es/components/LinkButton/LinkButton.styles.js

@@ -17,14 +17,14 @@ export var base = css([
 }));
 export var StyledAdditionalContent = styled.div.withConfig({
     displayName: "LinkButton.styles__StyledAdditionalContent",
-    componentId: "sc-f97b8dcf-0"
+    componentId: "sc-e83eddac-0"
 })([
     "display:flex;align-items:center;margin:var(",
     ");"
 ], tokens.linkButtonAdditionalContentMargin);
 export var LoadWrap = styled.div.withConfig({
     displayName: "LinkButton.styles__LoadWrap",
-    componentId: "sc-f97b8dcf-1"
+    componentId: "sc-e83eddac-1"
 })([
     "opacity:",
     ";display:flex;align-items:inherit;justify-content:inherit;height:100%;width:100%;"
@@ -34,13 +34,13 @@ export var LoadWrap = styled.div.withConfig({
 });
 export var Loader = styled.div.withConfig({
     displayName: "LinkButton.styles__Loader",
-    componentId: "sc-f97b8dcf-2"
+    componentId: "sc-e83eddac-2"
 })([
     "position:absolute;"
 ]);
 export var StyledSpinner = styled(Spinner).withConfig({
     displayName: "LinkButton.styles__StyledSpinner",
-    componentId: "sc-f97b8dcf-3"
+    componentId: "sc-e83eddac-3"
 })([
     "",
     ":var(",
@@ -50,7 +50,7 @@ export var StyledSpinner = styled(Spinner).withConfig({
 ], spinnerTokens.size, tokens.linkButtonSpinnerSize, spinnerTokens.color, tokens.linkButtonSpinnerColor);
 export var LinkButtonText = styled.span.withConfig({
     displayName: "LinkButton.styles__LinkButtonText",
-    componentId: "sc-f97b8dcf-4"
+    componentId: "sc-e83eddac-4"
 })([
     "padding:var(",
     ");color:var(",
@@ -61,23 +61,17 @@ export var LinkButtonText = styled.span.withConfig({
 ], tokens.linkButtonTextPadding, tokens.linkButtonTextColor, applyEllipsis(), tokens.linkButtonTextColorHover, tokens.linkButtonTextColorActive);
 export var StyledContentLeft = styled.div.withConfig({
     displayName: "LinkButton.styles__StyledContentLeft",
-    componentId: "sc-f97b8dcf-5"
+    componentId: "sc-e83eddac-5"
 })([
     "line-height:0;color:var(",
-    ");margin:",
-    ";"
-], tokens.linkButtonIconColor, function(param) {
-    var hasContent = param.hasContent;
-    return hasContent ? "var(".concat(tokens.linkButtonLeftContentMargin, ")") : '0';
-});
+    ");margin:var(",
+    ");"
+], tokens.linkButtonIconColor, tokens.linkButtonLeftContentMargin);
 export var StyledContentRight = styled.div.withConfig({
     displayName: "LinkButton.styles__StyledContentRight",
-    componentId: "sc-f97b8dcf-6"
+    componentId: "sc-e83eddac-6"
 })([
     "line-height:0;color:var(",
-    ");margin:",
-    ";"
-], tokens.linkButtonIconColor, function(param) {
-    var hasContent = param.hasContent;
-    return hasContent ? "var(".concat(tokens.linkButtonRightContentMargin, ")") : '0';
-});
+    ");margin:var(",
+    ");"
+], tokens.linkButtonIconColor, tokens.linkButtonRightContentMargin);

package/dist/styled-components/es/components/Table/Table.js

@@ -114,12 +114,13 @@ function _unsupported_iterable_to_array(o, minLen) {
 import React, { forwardRef, useState, useMemo, useRef } from "react";
 import { getCoreRowModel, useReactTable, getSortedRowModel, getFilteredRowModel } from "@tanstack/react-table";
 import { useForkRef } from "@salutejs/plasma-core";
+import { classes } from "./Table.tokens";
 import { SELECT_COLUMN_ID } from "./utils";
 import { HeadCell, Cell, EditableCell } from "./ui";
-import { base, Table, Tr, Thead, StyledCheckbox, Tbody } from "./Table.styles";
+import { base, Table, Tr, Thead, StyledCheckbox, Tbody, ScrollableWrapper } from "./Table.styles";
 export var tableRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(_param, ref) {
-        var data = _param.data, onChange = _param.onChange, columns = _param.columns, view = _param.view, size = _param.size, _param_borderVariant = _param.borderVariant, borderVariant = _param_borderVariant === void 0 ? 'all' : _param_borderVariant, _param_enableSelection = _param.enableSelection, enableSelection = _param_enableSelection === void 0 ? false : _param_enableSelection, outerSelected = _param.selected, outerFiltered = _param.filtered, outerSorted = _param.sorted, maxHeight = _param.maxHeight, _param_stickyHeader = _param.stickyHeader, stickyHeader = _param_stickyHeader === void 0 ? false : _param_stickyHeader, onCellUpdate = _param.onCellUpdate, setRowProps = _param.setRowProps, props = _object_without_properties(_param, [
+        var data = _param.data, onChange = _param.onChange, columns = _param.columns, view = _param.view, size = _param.size, _param_borderVariant = _param.borderVariant, borderVariant = _param_borderVariant === void 0 ? 'all' : _param_borderVariant, _param_enableSelection = _param.enableSelection, enableSelection = _param_enableSelection === void 0 ? false : _param_enableSelection, outerSelected = _param.selected, outerFiltered = _param.filtered, outerSorted = _param.sorted, maxHeight = _param.maxHeight, _param_stickyHeader = _param.stickyHeader, stickyHeader = _param_stickyHeader === void 0 ? false : _param_stickyHeader, onCellUpdate = _param.onCellUpdate, setRowProps = _param.setRowProps, topContent = _param.topContent, bottomContent = _param.bottomContent, loadingSlot = _param.loadingSlot, onScroll = _param.onScroll, props = _object_without_properties(_param, [
             "data",
             "onChange",
             "columns",
@@ -133,7 +134,11 @@ export var tableRoot = function(Root) {
             "maxHeight",
             "stickyHeader",
             "onCellUpdate",
-            "setRowProps"
+            "setRowProps",
+            "topContent",
+            "bottomContent",
+            "loadingSlot",
+            "onScroll"
         ]);
         var _useState = _sliced_to_array(useState(outerSelected || {}), 2), innerSelected = _useState[0], innerSetSelected = _useState[1];
         var _useState1 = _sliced_to_array(useState(outerFiltered || []), 2), innerFiltered = _useState1[0], setInnerFiltered = _useState1[1];
@@ -256,6 +261,7 @@ export var tableRoot = function(Root) {
             onRowSelectionChange: handleRowSelection,
             columnResizeMode: 'onChange',
             columnResizeDirection: 'ltr',
+            manualPagination: true,
             meta: {
                 updateData: function(rowId, columnId, value) {
                     if (onCellUpdate) {
@@ -269,11 +275,12 @@ export var tableRoot = function(Root) {
             data: data,
             columns: columns,
             view: view,
-            size: size,
-            style: {
-                maxHeight: maxHeight || 'none'
-            }
-        }, props), /*#__PURE__*/ React.createElement(Table, {
+            size: size
+        }, props), topContent, /*#__PURE__*/ React.createElement(ScrollableWrapper, {
+            className: classes.scrollableContainer,
+            onScroll: onScroll,
+            maxHeight: maxHeight
+        }, /*#__PURE__*/ React.createElement(Table, {
             borderVariant: borderVariant,
             stickyHeader: stickyHeader
         }, /*#__PURE__*/ React.createElement(Thead, {
@@ -300,8 +307,6 @@ export var tableRoot = function(Root) {
             }, setRowProps === null || setRowProps === void 0 ? void 0 : setRowProps(row.original)), row.getVisibleCells().map(function(cell) {
                 var _cell_column_columnDef_meta_setCellProps, _cell_column_columnDef_meta, _cell_column_columnDef, _cell_column, _cell_column_columnDef_meta1, _cell_column_columnDef1, _cell_column1;
                 var additionalProps = (cell === null || cell === void 0 ? void 0 : (_cell_column = cell.column) === null || _cell_column === void 0 ? void 0 : (_cell_column_columnDef = _cell_column.columnDef) === null || _cell_column_columnDef === void 0 ? void 0 : (_cell_column_columnDef_meta = _cell_column_columnDef.meta) === null || _cell_column_columnDef_meta === void 0 ? void 0 : (_cell_column_columnDef_meta_setCellProps = _cell_column_columnDef_meta.setCellProps) === null || _cell_column_columnDef_meta_setCellProps === void 0 ? void 0 : _cell_column_columnDef_meta_setCellProps.call(_cell_column_columnDef_meta, cell.row.original, cell.id)) || {};
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
                 return (cell === null || cell === void 0 ? void 0 : (_cell_column1 = cell.column) === null || _cell_column1 === void 0 ? void 0 : (_cell_column_columnDef1 = _cell_column1.columnDef) === null || _cell_column_columnDef1 === void 0 ? void 0 : (_cell_column_columnDef_meta1 = _cell_column_columnDef1.meta) === null || _cell_column_columnDef_meta1 === void 0 ? void 0 : _cell_column_columnDef_meta1.enableEditing) ? /*#__PURE__*/ React.createElement(EditableCell, {
                     key: cell.id,
                     size: size,
@@ -320,7 +325,7 @@ export var tableRoot = function(Root) {
                     additionalProps: additionalProps
                 });
             }));
-        }))));
+        }))), loadingSlot), bottomContent);
     });
 };
 export var tableConfig = {

package/dist/styled-components/es/components/Table/Table.styles.js

@@ -15,11 +15,21 @@ var Divider = component(mergedDividerConfig);
 var mergedLinkButtonConfig = mergeConfig(linkButtonConfig);
 var LinkButtonBase = component(mergedLinkButtonConfig);
 export var base = css([
-    "display:inline-block;overflow-y:auto;"
+    "display:inline-flex;flex-direction:column;align-items:flex-start;"
 ]);
+export var ScrollableWrapper = styled.div.withConfig({
+    displayName: "Table.styles__ScrollableWrapper",
+    componentId: "sc-c4913190-0"
+})([
+    "overflow-y:auto;max-height:",
+    ";"
+], function(param) {
+    var maxHeight = param.maxHeight;
+    return maxHeight || 'none';
+});
 export var Table = styled.table.withConfig({
     displayName: "Table.styles__Table",
-    componentId: "sc-382f3104-0"
+    componentId: "sc-c4913190-1"
 })([
     "width:fit-content;font-family:var(",
     ");font-size:var(",
@@ -35,7 +45,7 @@ export var Table = styled.table.withConfig({
 });
 export var Tr = styled.tr.withConfig({
     displayName: "Table.styles__Tr",
-    componentId: "sc-382f3104-1"
+    componentId: "sc-c4913190-2"
 })([
     "box-sizing:content-box;width:fit-content;background-color:",
     ";"
@@ -45,11 +55,11 @@ export var Tr = styled.tr.withConfig({
 });
 export var Thead = styled.thead.withConfig({
     displayName: "Table.styles__Thead",
-    componentId: "sc-382f3104-2"
+    componentId: "sc-c4913190-3"
 })([
     "position:",
     ";top:0;background:",
-    ";z-index:1;box-shadow:",
+    ";z-index:10;box-shadow:",
     ";",
     "{background:transparent;}"
 ], function(param) {
@@ -65,13 +75,13 @@ export var Thead = styled.thead.withConfig({
 }, Tr);
 export var Tbody = styled.tbody.withConfig({
     displayName: "Table.styles__Tbody",
-    componentId: "sc-382f3104-3"
+    componentId: "sc-c4913190-4"
 })([
     ""
 ]);
 export var Resizer = styled.div.withConfig({
     displayName: "Table.styles__Resizer",
-    componentId: "sc-382f3104-4"
+    componentId: "sc-c4913190-5"
 })([
     "display:",
     ";position:absolute;z-index:1;top:-0.0625rem;bottom:0;right:-0.125rem;width:0.1875rem;background:var(--outline-accent);cursor:col-resize;user-select:none;touch-action:none;"
@@ -81,12 +91,12 @@ export var Resizer = styled.div.withConfig({
 });
 export var Th = styled.th.withConfig({
     displayName: "Table.styles__Th",
-    componentId: "sc-382f3104-5"
+    componentId: "sc-c4913190-6"
 })([
     "padding:",
     ";position:relative;font-weight:600;text-align:left;height:var(",
     ");background-color:transparent;color:inherit;box-sizing:content-box;border-width:0.0625rem;border-top-width:0;border-bottom-width:0;border-style:solid;border-color:",
-    ";&:hover{",
+    ";box-sizing:border-box;&:hover{",
     "{display:block;}}"
 ], function(param) {
     var selectionCell = param.selectionCell;
@@ -97,7 +107,7 @@ export var Th = styled.th.withConfig({
 }, Resizer);
 export var StyledCheckbox = styled(Checkbox).withConfig({
     displayName: "Table.styles__StyledCheckbox",
-    componentId: "sc-382f3104-6"
+    componentId: "sc-c4913190-7"
 })([
     "",
     ":var(",
@@ -117,7 +127,7 @@ export var StyledCheckbox = styled(Checkbox).withConfig({
 ], checkboxTokens.triggerSize, tokens.checkboxTriggerSize, checkboxTokens.triggerBorderRadius, tokens.checkboxTriggerBorderRadius, checkboxTokens.fillColor, tokens.checkboxFillColor, checkboxTokens.iconColor, tokens.checkboxTriggerIconColor, checkboxTokens.triggerBorderCheckedColor, tokens.checkboxTriggerBorderCheckedColor, checkboxTokens.triggerBorderWidth, tokens.checkboxTriggerBorderWidth, checkboxTokens.triggerBorderColor, tokens.checkboxTriggerBorderColor);
 export var StyledDivider = styled(Divider).withConfig({
     displayName: "Table.styles__StyledDivider",
-    componentId: "sc-382f3104-7"
+    componentId: "sc-c4913190-8"
 })([
     "",
     ":0.0625rem;",
@@ -126,7 +136,7 @@ export var StyledDivider = styled(Divider).withConfig({
 ], dividerTokens.baseSideSize, dividerTokens.background, dividerTokens.borderRadius);
 export var Button = styled(ButtonBase).withConfig({
     displayName: "Table.styles__Button",
-    componentId: "sc-382f3104-8"
+    componentId: "sc-c4913190-9"
 })([
     "",
     ":var(",
@@ -147,7 +157,7 @@ export var Button = styled(ButtonBase).withConfig({
 ], buttonTokens.buttonHeight, tokens.buttonHeight, buttonTokens.buttonDisabledOpacity, buttonTokens.buttonFontFamily, tokens.buttonFontFamily, buttonTokens.buttonFontSize, tokens.buttonFontSize, buttonTokens.buttonFontStyle, tokens.buttonFontStyle, buttonTokens.buttonFontWeight, tokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, tokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, tokens.buttonLineHeight);
 export var ButtonAccent = styled(Button).withConfig({
     displayName: "Table.styles__ButtonAccent",
-    componentId: "sc-382f3104-9"
+    componentId: "sc-c4913190-10"
 })([
     "",
     ":var(--on-dark-text-primary);",
@@ -158,7 +168,7 @@ export var ButtonAccent = styled(Button).withConfig({
 ], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonBackgroundColorActive);
 export var LinkButton = styled(LinkButtonBase).withConfig({
     displayName: "Table.styles__LinkButton",
-    componentId: "sc-382f3104-10"
+    componentId: "sc-c4913190-11"
 })([
     "",
     ":var(--text-primary);",

package/dist/styled-components/es/components/Table/Table.tokens.js

@@ -4,7 +4,8 @@ export var classes = {
     sortingAscIcon: 'sorting-asc-icon',
     sortingDescIcon: 'sorting-desc-icon',
     filterIcon: 'filter-icon',
-    resizeDivider: 'resize-divider'
+    resizeDivider: 'resize-divider',
+    scrollableContainer: 'table-scrollable-container'
 };
 export var tableTokens = {
     fontFamily: '--plasma-table-font-family',

package/dist/styled-components/es/components/_beta/Tooltip/Tooltip.types.js

@@ -0,0 +1 @@
+export { };