@salutejs/plasma-new-hope 0.317.0-dev.0 → 0.318.0-canary.1888.14216501427.0

package/styled-components/cjs/components/Table/ui/EditableCell/EditableCell.js

@@ -12,8 +12,9 @@ var _Table2 = /*#__PURE__*/require("../../Table");
 var _hooks = /*#__PURE__*/require("../../../../hooks");
 var _Icon = /*#__PURE__*/require("../../../_Icon");
 var _HeadCell = /*#__PURE__*/require("../HeadCell/HeadCell");
+var _Table3 = /*#__PURE__*/require("../../Table.tokens");
 var _EditableCell = /*#__PURE__*/require("./EditableCell.styles");
-var _IconEditOutline, _Resizer;
+var _Resizer;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -28,12 +29,13 @@ var keys = {
   Escape: 'Escape'
 };
 var EditableCell = exports.EditableCell = function EditableCell(_ref) {
+  var _table$options$meta;
   var size = _ref.size,
+    view = _ref.view,
     cell = _ref.cell,
     borderVariant = _ref.borderVariant,
     table = _ref.table,
-    selected = _ref.selected,
-    view = _ref.view;
+    selected = _ref.selected;
   var _useState = (0, _react.useState)(cell.getValue()),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
@@ -42,7 +44,7 @@ var EditableCell = exports.EditableCell = function EditableCell(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     editingMode = _useState4[0],
     setEditingMode = _useState4[1];
-  var updateData = table.options.meta.updateData;
+  var updateData = (_table$options$meta = table.options.meta) === null || _table$options$meta === void 0 ? void 0 : _table$options$meta.updateData;
   var ref = (0, _hooks.useOutsideClick)(function () {
     setEditingMode(false);
   });
@@ -59,14 +61,18 @@ var EditableCell = exports.EditableCell = function EditableCell(_ref) {
   };
   var handleSubmit = function handleSubmit(e) {
     e.stopPropagation();
-    updateData(cell.row.id, cell.column.id, value);
+    if (updateData) {
+      updateData(cell.row.id, cell.column.id, value);
+    }
     setEditingMode(false);
   };
   var handleKeyDown = function handleKeyDown(event) {
     switch (event.code) {
       case keys.Enter:
         {
-          updateData(cell.row.id, cell.column.id, value);
+          if (updateData) {
+            updateData(cell.row.id, cell.column.id, value);
+          }
           setEditingMode(false);
           break;
         }
@@ -106,11 +112,11 @@ var EditableCell = exports.EditableCell = function EditableCell(_ref) {
     tabIndex: -1
   }, /*#__PURE__*/_react["default"].createElement(_Icon.IconDoneCircleOutline, {
     size: (0, _HeadCell.getIconSize)(size)
-  }))) : /*#__PURE__*/_react["default"].createElement(_EditableCell.ContentWrapper, null, (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()), _IconEditOutline || (_IconEditOutline = /*#__PURE__*/_react["default"].createElement(_Icon.IconEditOutline, {
+  }))) : /*#__PURE__*/_react["default"].createElement(_EditableCell.ContentWrapper, null, (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()), /*#__PURE__*/_react["default"].createElement(_Icon.IconEditOutline, {
     size: "xs",
-    className: "editIcon",
+    className: _Table3.classes.editIcon,
     color: "var(--text-secondary)"
-  })))), cell.column.getIsResizing() && (_Resizer || (_Resizer = /*#__PURE__*/_react["default"].createElement(_Table.Resizer, {
+  }))), cell.column.getIsResizing() && (_Resizer || (_Resizer = /*#__PURE__*/_react["default"].createElement(_Table.Resizer, {
     isResizing: true
   }))));
 };

package/styled-components/cjs/components/Table/ui/EditableCell/EditableCell.styles.js

@@ -13,7 +13,7 @@ var mergedIndicatorConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_IconButton.i
 var IconButton = /*#__PURE__*/(0, _engines.component)(mergedIndicatorConfig);
 var Td = exports.Td = /*#__PURE__*/_styledComponents["default"].td.withConfig({
   componentId: "plasma-new-hope__sc-1uu72a1-0"
-})(["position:relative;padding:", ";height:var(", ");border-width:1px;border-top-width:0;border-style:solid;border-color:", ";border-bottom-color:", ";cursor:pointer;box-sizing:border-box;& .editIcon{opacity:0;}&:hover .editIcon{opacity:1;}"], function (_ref) {
+})(["position:relative;padding:", ";height:var(", ");border-width:0.0625rem;border-top-width:0;border-style:solid;border-color:", ";border-bottom-color:", ";cursor:pointer;box-sizing:border-box;& .", "{opacity:0;}&:hover .", "{opacity:1;}"], function (_ref) {
   var selectionCell = _ref.selectionCell,
     editingMode = _ref.editingMode;
   return (
@@ -31,7 +31,7 @@ var Td = exports.Td = /*#__PURE__*/_styledComponents["default"].td.withConfig({
 }, function (_ref3) {
   var borderVariant = _ref3.borderVariant;
   return borderVariant === 'all' || borderVariant === 'rows' ? "var(".concat(_Table.tableTokens.borderColor, ")") : 'transparent';
-});
+}, _Table.classes.editIcon, _Table.classes.editIcon);
 var InnerWrapper = exports.InnerWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1uu72a1-1"
 })(["display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;"]);
@@ -43,10 +43,10 @@ var EditModeWrapper = exports.EditModeWrapper = /*#__PURE__*/_styledComponents["
 })(["display:flex;align-items:center;justify-content:space-between;gap:var(", ");height:100%;"], _Table.tableTokens.editableCellPadding);
 var InputWrapper = exports.InputWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1uu72a1-4"
-})(["display:flex;align-items:center;height:100%;flex:1;padding:var(", ");background:var(", ");border:1px solid var(", ");border-radius:var(", ");box-sizing:border-box;gap:var(", ");"], _Table.tableTokens.editableCellInputPadding, _Table.tableTokens.editableCellInputBackground, _Table.tableTokens.editableCellInputBorderColor, _Table.tableTokens.editableCellInputBorderRadius, _Table.tableTokens.editableCellIconGap);
+})(["display:flex;align-items:center;height:100%;flex:1;padding:var(", ");background:var(", ");border:0.0625rem solid var(", ");border-radius:var(", ");box-sizing:border-box;gap:var(", ");"], _Table.tableTokens.editableCellInputPadding, _Table.tableTokens.editableCellInputBackground, _Table.tableTokens.editableCellInputBorderColor, _Table.tableTokens.editableCellInputBorderRadius, _Table.tableTokens.editableCellIconGap);
 var Input = exports.Input = /*#__PURE__*/_styledComponents["default"].input.withConfig({
   componentId: "plasma-new-hope__sc-1uu72a1-5"
-})(["width:auto;border:none;padding:0;background:transparent;outline:none;caret-color:var(--text-accent);font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _Table.tableTokens.fontFamily, _Table.tableTokens.fontSize, _Table.tableTokens.fontStyle, _Table.tableTokens.fontWeight, _Table.tableTokens.letterSpacing, _Table.tableTokens.lineHeight);
+})(["width:auto;border:none;padding:0;background:transparent;outline:none;caret-color:var(--text-accent);color:var(--text-primary);font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _Table.tableTokens.fontFamily, _Table.tableTokens.fontSize, _Table.tableTokens.fontStyle, _Table.tableTokens.fontWeight, _Table.tableTokens.letterSpacing, _Table.tableTokens.lineHeight);
 var IconDoneButton = exports.IconDoneButton = /*#__PURE__*/(0, _styledComponents["default"])(IconButton).withConfig({
   componentId: "plasma-new-hope__sc-1uu72a1-6"
 })(["", ":var(", ");", ":var(", ");"], _IconButton.iconButtonTokens.iconButtonWidth, _Table.tableTokens.editableCellIconButtonWidth, _IconButton.iconButtonTokens.iconButtonHeight, _Table.tableTokens.editableCellIconButtonHeight);

package/styled-components/cjs/components/Table/ui/HeadCell/HeadCell.js

@@ -9,6 +9,7 @@ var _react = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("react"));
 var _Table = /*#__PURE__*/require("../../Table.styles");
 var _Icon = /*#__PURE__*/require("../../../_Icon");
 var _Table2 = /*#__PURE__*/require("../../Table");
+var _Table3 = /*#__PURE__*/require("../../Table.tokens");
 var _HeadCell = /*#__PURE__*/require("./HeadCell.styles");
 var _Filter = /*#__PURE__*/require("./ui/Filter/Filter");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -37,23 +38,22 @@ var HeadCell = exports.HeadCell = function HeadCell(_ref) {
     size: size,
     outerFiltered: outerFiltered,
     tableContainerRef: tableContainerRef
-  }), header.column.getCanSort() && /*#__PURE__*/_react["default"].createElement("span", {
-    style: {
-      lineHeight: 0,
-      cursor: 'pointer',
-      userSelect: 'none'
-    },
+  }), header.column.getCanSort() && /*#__PURE__*/_react["default"].createElement(_HeadCell.IconWrapper, {
     onClick: header.column.getToggleSortingHandler()
   }, (_asc$desc = {
     asc: /*#__PURE__*/_react["default"].createElement(_Icon.IconArrowUp, {
-      size: getIconSize(size)
+      size: getIconSize(size),
+      className: _Table3.classes.sortingAscIcon
     }),
     desc: /*#__PURE__*/_react["default"].createElement(_Icon.IconArrowDown, {
-      size: getIconSize(size)
+      size: getIconSize(size),
+      className: _Table3.classes.sortingDescIcon
     })
   }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : /*#__PURE__*/_react["default"].createElement(_Icon.IconSwapVert, {
-    size: getIconSize(size)
+    size: getIconSize(size),
+    className: _Table3.classes.sortingDefaultIcon
   }))))), header.column.getCanResize() && /*#__PURE__*/_react["default"].createElement(_Table.Resizer, {
+    className: _Table3.classes.resizeDivider,
     onMouseDown: header.getResizeHandler(),
     onTouchStart: header.getResizeHandler(),
     isResizing: header.column.getIsResizing()

package/styled-components/cjs/components/Table/ui/HeadCell/HeadCell.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ThWrapper = exports.ControlButtons = void 0;
+exports.ThWrapper = exports.IconWrapper = exports.ControlButtons = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var ControlButtons = exports.ControlButtons = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -11,4 +11,7 @@ var ControlButtons = exports.ControlButtons = /*#__PURE__*/_styledComponents["de
 })(["display:flex;justify-content:space-between;align-items:center;gap:0.5rem;"]);
 var ThWrapper = exports.ThWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-haivw3-1"
-})(["display:flex;justify-content:space-between;align-items:center;gap:0.5rem;"]);
+})(["display:flex;justify-content:space-between;align-items:center;gap:0.5rem;"]);
+var IconWrapper = exports.IconWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-haivw3-2"
+})(["line-height:0;cursor:pointer;user-select:none;"]);

package/styled-components/cjs/components/Table/ui/HeadCell/ui/Filter/Filter.js

@@ -10,6 +10,7 @@ var _hooks = /*#__PURE__*/require("../../../../../../hooks");
 var _Icon = /*#__PURE__*/require("../../../../../_Icon");
 var _HeadCell = /*#__PURE__*/require("../../HeadCell");
 var _Table = /*#__PURE__*/require("../../../../Table.styles");
+var _Table2 = /*#__PURE__*/require("../../../../Table.tokens");
 var _Filter = /*#__PURE__*/require("./Filter.styles");
 var _StyledIndicator, _StyledDivider;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -85,7 +86,8 @@ var Filter = exports.Filter = function Filter(_ref) {
     onChange: setLocalFiltered,
     renderTarget: function renderTarget() {
       return /*#__PURE__*/_react["default"].createElement(_Filter.IconFilterWrapper, null, /*#__PURE__*/_react["default"].createElement(_Icon.IconFilterFunnel, {
-        size: (0, _HeadCell.getIconSize)(size)
+        size: (0, _HeadCell.getIconSize)(size),
+        className: _Table2.classes.filterIcon
       }), filtered.length ? _StyledIndicator || (_StyledIndicator = /*#__PURE__*/_react["default"].createElement(_Filter.StyledIndicator, {
         size: "s",
         view: "accent"

package/styled-components/cjs/examples/plasma_b2c/components/Table/Table.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, ComponentProps, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
+import { getConfigVariations } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup';
@@ -8,12 +9,12 @@ import { IconButton } from '../IconButton/IconButton';
 import { IconEditOutline } from '../../../../components/_Icon';
 import { Dropdown } from '../Dropdown/Dropdown';
 
+import { config } from './Table.config';
 import { Table } from './Table';
 
 type StoryTableProps = ComponentProps<typeof Table>;
 
-const view = ['default', 'clear'];
-const size = ['s', 'm', 'l'];
+const { views, sizes } = getConfigVariations(config);
 const borderVariant = ['rows', 'header', 'all'];
 
 const meta: Meta<StoryTableProps> = {
@@ -23,11 +24,11 @@ const meta: Meta<StoryTableProps> = {
     argTypes: {
         view: {
             control: 'select',
-            options: view,
+            options: views,
         },
         size: {
             control: 'select',
-            options: size,
+            options: sizes,
         },
         borderVariant: {
             control: 'select',
@@ -514,8 +515,8 @@ const StoryComplex = (args: StoryTableProps) => {
                 <Button text="Очистить выбранные" view="warning" size="xs" onClick={clearSelected} />
                 <Button text="Убрать сортировку" view="warning" size="xs" onClick={clearSorted} />
                 <Button text="Очистить фильтры" view="warning" size="xs" onClick={clearFiltered} />
-                <Button text="Очистить все" view="critical" size="xs" onClick={clearAll} />
-                <Button text="Добавить строку" view="success" size="xs" onClick={addRow} />
+                <Button text="Очистить все" view="negative" size="xs" onClick={clearAll} />
+                <Button text="Добавить строку" view="positive" size="xs" onClick={addRow} />
             </ButtonGroup>
 
             <br />

package/styled-components/cjs/examples/plasma_web/components/Table/Table.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, ComponentProps, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
+import { getConfigVariations } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup';
@@ -7,13 +8,13 @@ import { Button } from '../Button/Button';
 import { IconButton } from '../IconButton/IconButton';
 import { IconEditOutline } from '../../../../components/_Icon';
 import { Dropdown } from '../Dropdown/Dropdown';
+import { config } from '../../../plasma_b2c/components/Table/Table.config';
 
 import { Table } from './Table';
 
 type StoryTableProps = ComponentProps<typeof Table>;
 
-const view = ['default', 'clear'];
-const size = ['s', 'm', 'l'];
+const { views, sizes } = getConfigVariations(config);
 const borderVariant = ['rows', 'header', 'all'];
 
 const meta: Meta<StoryTableProps> = {
@@ -23,11 +24,11 @@ const meta: Meta<StoryTableProps> = {
     argTypes: {
         view: {
             control: 'select',
-            options: view,
+            options: views,
         },
         size: {
             control: 'select',
-            options: size,
+            options: sizes,
         },
         borderVariant: {
             control: 'select',
@@ -514,8 +515,8 @@ const StoryComplex = (args: StoryTableProps) => {
                 <Button text="Очистить выбранные" view="warning" size="xs" onClick={clearSelected} />
                 <Button text="Убрать сортировку" view="warning" size="xs" onClick={clearSorted} />
                 <Button text="Очистить фильтры" view="warning" size="xs" onClick={clearFiltered} />
-                <Button text="Очистить все" view="critical" size="xs" onClick={clearAll} />
-                <Button text="Добавить строку" view="success" size="xs" onClick={addRow} />
+                <Button text="Очистить все" view="negative" size="xs" onClick={clearAll} />
+                <Button text="Добавить строку" view="positive" size="xs" onClick={addRow} />
             </ButtonGroup>
 
             <br />

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

@@ -1,3 +1,5 @@
+var _excluded = ["data", "onChange", "columns", "view", "size", "borderVariant", "enableSelection", "selected", "filtered", "sorted", "maxHeight", "stickyHeader", "onCellUpdate"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -8,12 +10,14 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef, useState, useMemo, useRef } from 'react';
 import { getCoreRowModel, useReactTable, getSortedRowModel, getFilteredRowModel } from '@tanstack/react-table';
 import { useForkRef } from '@salutejs/plasma-core';
 import { HeadCell, Cell, EditableCell } from './ui';
-import { base, Table, Tr, Thead, StyledCheckbox } from './Table.styles';
-export var SELECT_COLUMN_ID = 'select#65768756432';
+import { base, Table, Tr, Thead, StyledCheckbox, Tbody } from './Table.styles';
+export var SELECT_COLUMN_ID = 'SELECT_COLUMN_UNIQUE_ID';
 export var tableRoot = function tableRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, ref) {
     var data = _ref.data,
@@ -29,7 +33,8 @@ export var tableRoot = function tableRoot(Root) {
       outerSorted = _ref.sorted,
       maxHeight = _ref.maxHeight,
       stickyHeader = _ref.stickyHeader,
-      onCellUpdate = _ref.onCellUpdate;
+      onCellUpdate = _ref.onCellUpdate,
+      props = _objectWithoutProperties(_ref, _excluded);
     var _useState = useState(outerSelected || {}),
       _useState2 = _slicedToArray(_useState, 2),
       innerSelected = _useState2[0],
@@ -123,17 +128,10 @@ export var tableRoot = function tableRoot(Root) {
           enableSorting: enableSorting,
           enableResizing: enableResizing,
           filterFn: function filterFn(row, columnId, filterArr) {
-            if (outerFilterFn && filterArr && Array.isArray(filterArr)) {
-              if (filterArr.length === 0) {
-                return true;
-              }
-              for (var i = 0; i < filterArr.length; i++) {
-                var filterValue = filterArr[i];
-                if (outerFilterFn(filterValue, row.getValue(columnId))) {
-                  return true;
-                }
-              }
-              return false;
+            if ((filterArr === null || filterArr === void 0 ? void 0 : filterArr.length) !== 0 && outerFilterFn && filterArr && Array.isArray(filterArr)) {
+              return filterArr.some(function (filterValue) {
+                return outerFilterFn(filterValue, row.getValue(columnId));
+              });
             }
             return true;
           },
@@ -174,7 +172,7 @@ export var tableRoot = function tableRoot(Root) {
         }
       }
     });
-    return /*#__PURE__*/React.createElement(Root, {
+    return /*#__PURE__*/React.createElement(Root, _extends({
       ref: rootRef,
       data: data,
       columns: columns,
@@ -183,7 +181,7 @@ export var tableRoot = function tableRoot(Root) {
       style: {
         maxHeight: maxHeight || 'none'
       }
-    }, /*#__PURE__*/React.createElement(Table, {
+    }, props), /*#__PURE__*/React.createElement(Table, {
       borderVariant: borderVariant,
       stickyHeader: stickyHeader
     }, /*#__PURE__*/React.createElement(Thead, {
@@ -203,7 +201,7 @@ export var tableRoot = function tableRoot(Root) {
           tableContainerRef: tableContainerRef
         });
       }));
-    })), /*#__PURE__*/React.createElement("tbody", null, table.getRowModel().rows.map(function (row) {
+    })), /*#__PURE__*/React.createElement(Tbody, null, table.getRowModel().rows.map(function (row) {
       return /*#__PURE__*/React.createElement(Tr, {
         key: row.id,
         selected: row.getIsSelected()

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

@@ -43,15 +43,18 @@ export var Thead = /*#__PURE__*/styled.thead.withConfig({
     view === 'clear' ? 'none' : borderVariant === 'header' || borderVariant === 'rows' ? "inset 0 -1px 0 0 var(".concat(tokens.borderColor, ")") : "inset 0 1px 0 0 var(".concat(tokens.borderColor, "), inset 0 -1px 0 0 var(").concat(tokens.borderColor, ")")
   );
 }, Tr);
-export var Resizer = /*#__PURE__*/styled.div.withConfig({
+export var Tbody = /*#__PURE__*/styled.tbody.withConfig({
   componentId: "plasma-new-hope__sc-1nklm7n-3"
-})(["display:", ";position:absolute;z-index:1;top:-1px;bottom:0;right:-2px;width:0.1875rem;background:var(--outline-accent);cursor:col-resize;user-select:none;touch-action:none;"], function (_ref6) {
+})([""]);
+export var Resizer = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1nklm7n-4"
+})(["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;"], function (_ref6) {
   var isResizing = _ref6.isResizing;
   return isResizing ? 'block' : 'none';
 });
 export var Th = /*#__PURE__*/styled.th.withConfig({
-  componentId: "plasma-new-hope__sc-1nklm7n-4"
-})(["padding:", ";position:relative;font-weight:600;text-align:left;height:var(", ");background-color:transparent;color:inherit;border-width:1px;border-top-width:0;border-bottom-width:0;border-style:solid;border-color:", ";&:hover{", "{display:block;}}"], function (_ref7) {
+  componentId: "plasma-new-hope__sc-1nklm7n-5"
+})(["padding:", ";position:relative;font-weight:600;text-align:left;height:var(", ");background-color:transparent;color:inherit;border-width:0.0625rem;border-top-width:0;border-bottom-width:0;border-style:solid;border-color:", ";&:hover{", "{display:block;}}"], function (_ref7) {
   var selectionCell = _ref7.selectionCell;
   return selectionCell ? "var(".concat(tokens.checkboxCellPadding, ")") : "var(".concat(tokens.cellPadding, ")");
 }, tokens.headerRowHeight, function (_ref8) {
@@ -59,17 +62,17 @@ export var Th = /*#__PURE__*/styled.th.withConfig({
   return borderVariant === 'all' ? "var(".concat(tokens.borderColor, ")") : 'transparent';
 }, Resizer);
 export var StyledCheckbox = /*#__PURE__*/styled(Checkbox).withConfig({
-  componentId: "plasma-new-hope__sc-1nklm7n-5"
+  componentId: "plasma-new-hope__sc-1nklm7n-6"
 })(["", ":var(", ");", ":var(", ");", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);"], checkboxTokens.triggerSize, tokens.checkboxTriggerSize, checkboxTokens.triggerBorderRadius, tokens.checkboxTriggerBorderRadius, checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.triggerBorderColor);
 export var StyledDivider = /*#__PURE__*/styled(Divider).withConfig({
-  componentId: "plasma-new-hope__sc-1nklm7n-6"
+  componentId: "plasma-new-hope__sc-1nklm7n-7"
 })(["", ":0.0625rem;", ":var(--surface-transparent-tertiary);", ":0.0625rem;"], dividerTokens.baseSideSize, dividerTokens.background, dividerTokens.borderRadius);
 export var Button = /*#__PURE__*/styled(ButtonBase).withConfig({
-  componentId: "plasma-new-hope__sc-1nklm7n-7"
+  componentId: "plasma-new-hope__sc-1nklm7n-8"
 })(["", ":var(", ");", ":0.4;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], 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 = /*#__PURE__*/styled(Button).withConfig({
-  componentId: "plasma-new-hope__sc-1nklm7n-8"
+  componentId: "plasma-new-hope__sc-1nklm7n-9"
 })(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-accent-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonBackgroundColorActive);
 export var LinkButton = /*#__PURE__*/styled(LinkButtonBase).withConfig({
-  componentId: "plasma-new-hope__sc-1nklm7n-9"
+  componentId: "plasma-new-hope__sc-1nklm7n-10"
 })(["", ":var(--text-primary);", ":var(--surface-transparent-clear);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--surface-accent);", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], linkButtonTokens.linkButtonColor, linkButtonTokens.linkButtonBackgroundColor, linkButtonTokens.linkButtonColorHover, linkButtonTokens.linkButtonColorActive, linkButtonTokens.linkButtonFocusColor, linkButtonTokens.linkButtonFontFamily, tokens.linkButtonFontFamily, linkButtonTokens.linkButtonFontSize, tokens.linkButtonFontSize, linkButtonTokens.linkButtonFontStyle, tokens.linkButtonFontStyle, linkButtonTokens.linkButtonFontWeight, tokens.linkButtonFontWeight, linkButtonTokens.linkButtonLetterSpacing, tokens.linkButtonLetterSpacing, linkButtonTokens.linkButtonLineHeight, tokens.linkButtonLineHeight);

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

@@ -1,3 +1,11 @@
+export var classes = {
+  editIcon: 'edit-icon',
+  sortingDefaultIcon: 'sorting-default-icon',
+  sortingAscIcon: 'sorting-asc-icon',
+  sortingDescIcon: 'sorting-desc-icon',
+  filterIcon: 'filter-icon',
+  resizeDivider: 'resize-divider'
+};
 export var tableTokens = {
   fontFamily: '--plasma-table-font-family',
   fontSize: '--plasma-table-font-size',

package/styled-components/es/components/Table/ui/Cell/Cell.styles.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { tableTokens as tokens } from '../../Table.tokens';
 export var Td = /*#__PURE__*/styled.td.withConfig({
   componentId: "plasma-new-hope__sc-1doamj5-0"
-})(["position:relative;padding:", ";height:var(", ");border-width:1px;border-top-width:0;border-style:solid;border-color:", ";border-bottom-color:", ";box-sizing:border-box;"], function (_ref) {
+})(["position:relative;padding:", ";height:var(", ");border-width:0.0625rem;border-top-width:0;border-style:solid;border-color:", ";border-bottom-color:", ";box-sizing:border-box;"], function (_ref) {
   var selectionCell = _ref.selectionCell;
   return selectionCell ? "var(".concat(tokens.checkboxCellPadding, ")") : "var(".concat(tokens.cellPadding, ")");
 }, tokens.rowHeight, function (_ref2) {

package/styled-components/es/components/Table/ui/EditableCell/EditableCell.js

@@ -1,4 +1,4 @@
-var _IconEditOutline, _Resizer;
+var _Resizer;
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -12,6 +12,7 @@ import { SELECT_COLUMN_ID } from '../../Table';
 import { useOutsideClick } from '../../../../hooks';
 import { IconEditOutline, IconResetOutline, IconDoneCircleOutline } from '../../../_Icon';
 import { getIconSize } from '../HeadCell/HeadCell';
+import { classes } from '../../Table.tokens';
 import { ContentWrapper, Td, IconDoneButton, Input, InnerWrapper, InputWrapper, EditModeWrapper, IconResetButton } from './EditableCell.styles';
 var keys = {
   Enter: 'Enter',
@@ -19,12 +20,13 @@ var keys = {
   Escape: 'Escape'
 };
 export var EditableCell = function EditableCell(_ref) {
+  var _table$options$meta;
   var size = _ref.size,
+    view = _ref.view,
     cell = _ref.cell,
     borderVariant = _ref.borderVariant,
     table = _ref.table,
-    selected = _ref.selected,
-    view = _ref.view;
+    selected = _ref.selected;
   var _useState = useState(cell.getValue()),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
@@ -33,7 +35,7 @@ export var EditableCell = function EditableCell(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     editingMode = _useState4[0],
     setEditingMode = _useState4[1];
-  var updateData = table.options.meta.updateData;
+  var updateData = (_table$options$meta = table.options.meta) === null || _table$options$meta === void 0 ? void 0 : _table$options$meta.updateData;
   var ref = useOutsideClick(function () {
     setEditingMode(false);
   });
@@ -50,14 +52,18 @@ export var EditableCell = function EditableCell(_ref) {
   };
   var handleSubmit = function handleSubmit(e) {
     e.stopPropagation();
-    updateData(cell.row.id, cell.column.id, value);
+    if (updateData) {
+      updateData(cell.row.id, cell.column.id, value);
+    }
     setEditingMode(false);
   };
   var handleKeyDown = function handleKeyDown(event) {
     switch (event.code) {
       case keys.Enter:
         {
-          updateData(cell.row.id, cell.column.id, value);
+          if (updateData) {
+            updateData(cell.row.id, cell.column.id, value);
+          }
           setEditingMode(false);
           break;
         }
@@ -97,11 +103,11 @@ export var EditableCell = function EditableCell(_ref) {
     tabIndex: -1
   }, /*#__PURE__*/React.createElement(IconDoneCircleOutline, {
     size: getIconSize(size)
-  }))) : /*#__PURE__*/React.createElement(ContentWrapper, null, flexRender(cell.column.columnDef.cell, cell.getContext()), _IconEditOutline || (_IconEditOutline = /*#__PURE__*/React.createElement(IconEditOutline, {
+  }))) : /*#__PURE__*/React.createElement(ContentWrapper, null, flexRender(cell.column.columnDef.cell, cell.getContext()), /*#__PURE__*/React.createElement(IconEditOutline, {
     size: "xs",
-    className: "editIcon",
+    className: classes.editIcon,
     color: "var(--text-secondary)"
-  })))), cell.column.getIsResizing() && (_Resizer || (_Resizer = /*#__PURE__*/React.createElement(Resizer, {
+  }))), cell.column.getIsResizing() && (_Resizer || (_Resizer = /*#__PURE__*/React.createElement(Resizer, {
     isResizing: true
   }))));
 };

package/styled-components/es/components/Table/ui/EditableCell/EditableCell.styles.js

@@ -1,12 +1,12 @@
 import styled from 'styled-components';
 import { component, mergeConfig } from '../../../../engines';
-import { tableTokens as tokens } from '../../Table.tokens';
+import { tableTokens as tokens, classes } from '../../Table.tokens';
 import { iconButtonConfig, iconButtonTokens } from '../../../IconButton';
 var mergedIndicatorConfig = /*#__PURE__*/mergeConfig(iconButtonConfig);
 var IconButton = /*#__PURE__*/component(mergedIndicatorConfig);
 export var Td = /*#__PURE__*/styled.td.withConfig({
   componentId: "plasma-new-hope__sc-1uu72a1-0"
-})(["position:relative;padding:", ";height:var(", ");border-width:1px;border-top-width:0;border-style:solid;border-color:", ";border-bottom-color:", ";cursor:pointer;box-sizing:border-box;& .editIcon{opacity:0;}&:hover .editIcon{opacity:1;}"], function (_ref) {
+})(["position:relative;padding:", ";height:var(", ");border-width:0.0625rem;border-top-width:0;border-style:solid;border-color:", ";border-bottom-color:", ";cursor:pointer;box-sizing:border-box;& .", "{opacity:0;}&:hover .", "{opacity:1;}"], function (_ref) {
   var selectionCell = _ref.selectionCell,
     editingMode = _ref.editingMode;
   return (
@@ -24,7 +24,7 @@ export var Td = /*#__PURE__*/styled.td.withConfig({
 }, function (_ref3) {
   var borderVariant = _ref3.borderVariant;
   return borderVariant === 'all' || borderVariant === 'rows' ? "var(".concat(tokens.borderColor, ")") : 'transparent';
-});
+}, classes.editIcon, classes.editIcon);
 export var InnerWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1uu72a1-1"
 })(["display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;"]);
@@ -36,10 +36,10 @@ export var EditModeWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;align-items:center;justify-content:space-between;gap:var(", ");height:100%;"], tokens.editableCellPadding);
 export var InputWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1uu72a1-4"
-})(["display:flex;align-items:center;height:100%;flex:1;padding:var(", ");background:var(", ");border:1px solid var(", ");border-radius:var(", ");box-sizing:border-box;gap:var(", ");"], tokens.editableCellInputPadding, tokens.editableCellInputBackground, tokens.editableCellInputBorderColor, tokens.editableCellInputBorderRadius, tokens.editableCellIconGap);
+})(["display:flex;align-items:center;height:100%;flex:1;padding:var(", ");background:var(", ");border:0.0625rem solid var(", ");border-radius:var(", ");box-sizing:border-box;gap:var(", ");"], tokens.editableCellInputPadding, tokens.editableCellInputBackground, tokens.editableCellInputBorderColor, tokens.editableCellInputBorderRadius, tokens.editableCellIconGap);
 export var Input = /*#__PURE__*/styled.input.withConfig({
   componentId: "plasma-new-hope__sc-1uu72a1-5"
-})(["width:auto;border:none;padding:0;background:transparent;outline:none;caret-color:var(--text-accent);font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight);
+})(["width:auto;border:none;padding:0;background:transparent;outline:none;caret-color:var(--text-accent);color:var(--text-primary);font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight);
 export var IconDoneButton = /*#__PURE__*/styled(IconButton).withConfig({
   componentId: "plasma-new-hope__sc-1uu72a1-6"
 })(["", ":var(", ");", ":var(", ");"], iconButtonTokens.iconButtonWidth, tokens.editableCellIconButtonWidth, iconButtonTokens.iconButtonHeight, tokens.editableCellIconButtonHeight);

package/styled-components/es/components/Table/ui/HeadCell/HeadCell.js

@@ -3,7 +3,8 @@ import React from 'react';
 import { Th, Resizer } from '../../Table.styles';
 import { IconSwapVert, IconArrowDown, IconArrowUp } from '../../../_Icon';
 import { SELECT_COLUMN_ID } from '../../Table';
-import { ControlButtons, ThWrapper } from './HeadCell.styles';
+import { classes } from '../../Table.tokens';
+import { ControlButtons, ThWrapper, IconWrapper } from './HeadCell.styles';
 import { Filter } from './ui/Filter/Filter';
 export var getIconSize = function getIconSize(size) {
   return size === 's' ? 'xs' : 's';
@@ -30,23 +31,22 @@ export var HeadCell = function HeadCell(_ref) {
     size: size,
     outerFiltered: outerFiltered,
     tableContainerRef: tableContainerRef
-  }), header.column.getCanSort() && /*#__PURE__*/React.createElement("span", {
-    style: {
-      lineHeight: 0,
-      cursor: 'pointer',
-      userSelect: 'none'
-    },
+  }), header.column.getCanSort() && /*#__PURE__*/React.createElement(IconWrapper, {
     onClick: header.column.getToggleSortingHandler()
   }, (_asc$desc = {
     asc: /*#__PURE__*/React.createElement(IconArrowUp, {
-      size: getIconSize(size)
+      size: getIconSize(size),
+      className: classes.sortingAscIcon
     }),
     desc: /*#__PURE__*/React.createElement(IconArrowDown, {
-      size: getIconSize(size)
+      size: getIconSize(size),
+      className: classes.sortingDescIcon
     })
   }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : /*#__PURE__*/React.createElement(IconSwapVert, {
-    size: getIconSize(size)
+    size: getIconSize(size),
+    className: classes.sortingDefaultIcon
   }))))), header.column.getCanResize() && /*#__PURE__*/React.createElement(Resizer, {
+    className: classes.resizeDivider,
     onMouseDown: header.getResizeHandler(),
     onTouchStart: header.getResizeHandler(),
     isResizing: header.column.getIsResizing()

package/styled-components/es/components/Table/ui/HeadCell/HeadCell.styles.js

@@ -4,4 +4,7 @@ export var ControlButtons = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;justify-content:space-between;align-items:center;gap:0.5rem;"]);
 export var ThWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-haivw3-1"
-})(["display:flex;justify-content:space-between;align-items:center;gap:0.5rem;"]);
+})(["display:flex;justify-content:space-between;align-items:center;gap:0.5rem;"]);
+export var IconWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-haivw3-2"
+})(["line-height:0;cursor:pointer;user-select:none;"]);

package/styled-components/es/components/Table/ui/HeadCell/ui/Filter/Filter.js

@@ -14,6 +14,7 @@ import { useDidMountEffect } from '../../../../../../hooks';
 import { IconFilterFunnel } from '../../../../../_Icon';
 import { getIconSize } from '../../HeadCell';
 import { ButtonAccent, LinkButton } from '../../../../Table.styles';
+import { classes } from '../../../../Table.tokens';
 import { IconFilterWrapper, StyledIndicator, Select, StyledDivider, ControlPanel } from './Filter.styles';
 var getSelectWidth = function getSelectWidth(size) {
   switch (size) {
@@ -76,7 +77,8 @@ export var Filter = function Filter(_ref) {
     onChange: setLocalFiltered,
     renderTarget: function renderTarget() {
       return /*#__PURE__*/React.createElement(IconFilterWrapper, null, /*#__PURE__*/React.createElement(IconFilterFunnel, {
-        size: getIconSize(size)
+        size: getIconSize(size),
+        className: classes.filterIcon
       }), filtered.length ? _StyledIndicator || (_StyledIndicator = /*#__PURE__*/React.createElement(StyledIndicator, {
         size: "s",
         view: "accent"