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

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

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.base = exports.Tr = exports.Thead = exports.Th = exports.Tbody = exports.Table = exports.StyledDivider = exports.StyledCheckbox = exports.Resizer = exports.LinkButton = exports.ButtonAccent = exports.Button = void 0;
+exports.base = exports.Tr = exports.Thead = exports.Th = exports.Table = exports.StyledDivider = exports.StyledCheckbox = exports.Resizer = exports.LinkButton = exports.ButtonAccent = exports.Button = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("styled-components"));
 var _engines = /*#__PURE__*/require("../../engines");
 var _Checkbox = /*#__PURE__*/require("../Checkbox");
@@ -51,18 +51,15 @@ var Thead = exports.Thead = /*#__PURE__*/_styledComponents["default"].thead.with
     view === 'clear' ? 'none' : borderVariant === 'header' || borderVariant === 'rows' ? "inset 0 -1px 0 0 var(".concat(_Table.tableTokens.borderColor, ")") : "inset 0 1px 0 0 var(".concat(_Table.tableTokens.borderColor, "), inset 0 -1px 0 0 var(").concat(_Table.tableTokens.borderColor, ")")
   );
 }, Tr);
-var Tbody = exports.Tbody = /*#__PURE__*/_styledComponents["default"].tbody.withConfig({
-  componentId: "plasma-new-hope__sc-1nklm7n-3"
-})([""]);
 var Resizer = exports.Resizer = /*#__PURE__*/_styledComponents["default"].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) {
+  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) {
   var isResizing = _ref6.isResizing;
   return isResizing ? 'block' : 'none';
 });
 var Th = exports.Th = /*#__PURE__*/_styledComponents["default"].th.withConfig({
-  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) {
+  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) {
   var selectionCell = _ref7.selectionCell;
   return selectionCell ? "var(".concat(_Table.tableTokens.checkboxCellPadding, ")") : "var(".concat(_Table.tableTokens.cellPadding, ")");
 }, _Table.tableTokens.headerRowHeight, function (_ref8) {
@@ -70,17 +67,17 @@ var Th = exports.Th = /*#__PURE__*/_styledComponents["default"].th.withConfig({
   return borderVariant === 'all' ? "var(".concat(_Table.tableTokens.borderColor, ")") : 'transparent';
 }, Resizer);
 var StyledCheckbox = exports.StyledCheckbox = /*#__PURE__*/(0, _styledComponents["default"])(Checkbox).withConfig({
-  componentId: "plasma-new-hope__sc-1nklm7n-6"
+  componentId: "plasma-new-hope__sc-1nklm7n-5"
 })(["", ":var(", ");", ":var(", ");", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);"], _Checkbox.checkboxTokens.triggerSize, _Table.tableTokens.checkboxTriggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Table.tableTokens.checkboxTriggerBorderRadius, _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.triggerBorderColor);
 var StyledDivider = exports.StyledDivider = /*#__PURE__*/(0, _styledComponents["default"])(Divider).withConfig({
-  componentId: "plasma-new-hope__sc-1nklm7n-7"
+  componentId: "plasma-new-hope__sc-1nklm7n-6"
 })(["", ":0.0625rem;", ":var(--surface-transparent-tertiary);", ":0.0625rem;"], _Divider.dividerTokens.baseSideSize, _Divider.dividerTokens.background, _Divider.dividerTokens.borderRadius);
 var Button = exports.Button = /*#__PURE__*/(0, _styledComponents["default"])(ButtonBase).withConfig({
-  componentId: "plasma-new-hope__sc-1nklm7n-8"
+  componentId: "plasma-new-hope__sc-1nklm7n-7"
 })(["", ":var(", ");", ":0.4;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _Button.buttonTokens.buttonHeight, _Table.tableTokens.buttonHeight, _Button.buttonTokens.buttonDisabledOpacity, _Button.buttonTokens.buttonFontFamily, _Table.tableTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Table.tableTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Table.tableTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Table.tableTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Table.tableTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Table.tableTokens.buttonLineHeight);
 var ButtonAccent = exports.ButtonAccent = /*#__PURE__*/(0, _styledComponents["default"])(Button).withConfig({
-  componentId: "plasma-new-hope__sc-1nklm7n-9"
+  componentId: "plasma-new-hope__sc-1nklm7n-8"
 })(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-accent-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonBackgroundColorActive);
 var LinkButton = exports.LinkButton = /*#__PURE__*/(0, _styledComponents["default"])(LinkButtonBase).withConfig({
-  componentId: "plasma-new-hope__sc-1nklm7n-10"
+  componentId: "plasma-new-hope__sc-1nklm7n-9"
 })(["", ":var(--text-primary);", ":var(--surface-transparent-clear);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--surface-accent);", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _LinkButton.linkButtonTokens.linkButtonColor, _LinkButton.linkButtonTokens.linkButtonBackgroundColor, _LinkButton.linkButtonTokens.linkButtonColorHover, _LinkButton.linkButtonTokens.linkButtonColorActive, _LinkButton.linkButtonTokens.linkButtonFocusColor, _LinkButton.linkButtonTokens.linkButtonFontFamily, _Table.tableTokens.linkButtonFontFamily, _LinkButton.linkButtonTokens.linkButtonFontSize, _Table.tableTokens.linkButtonFontSize, _LinkButton.linkButtonTokens.linkButtonFontStyle, _Table.tableTokens.linkButtonFontStyle, _LinkButton.linkButtonTokens.linkButtonFontWeight, _Table.tableTokens.linkButtonFontWeight, _LinkButton.linkButtonTokens.linkButtonLetterSpacing, _Table.tableTokens.linkButtonLetterSpacing, _LinkButton.linkButtonTokens.linkButtonLineHeight, _Table.tableTokens.linkButtonLineHeight);

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

@@ -3,15 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableTokens = exports.classes = void 0;
-var classes = exports.classes = {
-  editIcon: 'edit-icon',
-  sortingDefaultIcon: 'sorting-default-icon',
-  sortingAscIcon: 'sorting-asc-icon',
-  sortingDescIcon: 'sorting-desc-icon',
-  filterIcon: 'filter-icon',
-  resizeDivider: 'resize-divider'
-};
+exports.tableTokens = void 0;
 var tableTokens = exports.tableTokens = {
   fontFamily: '--plasma-table-font-family',
   fontSize: '--plasma-table-font-size',

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

@@ -9,7 +9,7 @@ var _Table = /*#__PURE__*/require("../../Table.tokens");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var Td = exports.Td = /*#__PURE__*/_styledComponents["default"].td.withConfig({
   componentId: "plasma-new-hope__sc-1doamj5-0"
-})(["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) {
+})(["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) {
   var selectionCell = _ref.selectionCell;
   return selectionCell ? "var(".concat(_Table.tableTokens.checkboxCellPadding, ")") : "var(".concat(_Table.tableTokens.cellPadding, ")");
 }, _Table.tableTokens.rowHeight, function (_ref2) {

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

@@ -12,9 +12,8 @@ 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 _Resizer;
+var _IconEditOutline, _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(); }
@@ -29,13 +28,12 @@ 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;
+    selected = _ref.selected,
+    view = _ref.view;
   var _useState = (0, _react.useState)(cell.getValue()),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
@@ -44,7 +42,7 @@ var EditableCell = exports.EditableCell = function EditableCell(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     editingMode = _useState4[0],
     setEditingMode = _useState4[1];
-  var updateData = (_table$options$meta = table.options.meta) === null || _table$options$meta === void 0 ? void 0 : _table$options$meta.updateData;
+  var updateData = table.options.meta.updateData;
   var ref = (0, _hooks.useOutsideClick)(function () {
     setEditingMode(false);
   });
@@ -61,18 +59,14 @@ var EditableCell = exports.EditableCell = function EditableCell(_ref) {
   };
   var handleSubmit = function handleSubmit(e) {
     e.stopPropagation();
-    if (updateData) {
-      updateData(cell.row.id, cell.column.id, value);
-    }
+    updateData(cell.row.id, cell.column.id, value);
     setEditingMode(false);
   };
   var handleKeyDown = function handleKeyDown(event) {
     switch (event.code) {
       case keys.Enter:
         {
-          if (updateData) {
-            updateData(cell.row.id, cell.column.id, value);
-          }
+          updateData(cell.row.id, cell.column.id, value);
           setEditingMode(false);
           break;
         }
@@ -112,11 +106,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()), /*#__PURE__*/_react["default"].createElement(_Icon.IconEditOutline, {
+  }))) : /*#__PURE__*/_react["default"].createElement(_EditableCell.ContentWrapper, null, (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()), _IconEditOutline || (_IconEditOutline = /*#__PURE__*/_react["default"].createElement(_Icon.IconEditOutline, {
     size: "xs",
-    className: _Table3.classes.editIcon,
+    className: "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: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) {
+})(["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) {
   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,7 +43,7 @@ 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: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);
+})(["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);
 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);

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

@@ -9,7 +9,6 @@ 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 }; }
@@ -38,22 +37,23 @@ var HeadCell = exports.HeadCell = function HeadCell(_ref) {
     size: size,
     outerFiltered: outerFiltered,
     tableContainerRef: tableContainerRef
-  }), header.column.getCanSort() && /*#__PURE__*/_react["default"].createElement(_HeadCell.IconWrapper, {
+  }), header.column.getCanSort() && /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      lineHeight: 0,
+      cursor: 'pointer',
+      userSelect: 'none'
+    },
     onClick: header.column.getToggleSortingHandler()
   }, (_asc$desc = {
     asc: /*#__PURE__*/_react["default"].createElement(_Icon.IconArrowUp, {
-      size: getIconSize(size),
-      className: _Table3.classes.sortingAscIcon
+      size: getIconSize(size)
     }),
     desc: /*#__PURE__*/_react["default"].createElement(_Icon.IconArrowDown, {
-      size: getIconSize(size),
-      className: _Table3.classes.sortingDescIcon
+      size: getIconSize(size)
     })
   }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : /*#__PURE__*/_react["default"].createElement(_Icon.IconSwapVert, {
-    size: getIconSize(size),
-    className: _Table3.classes.sortingDefaultIcon
+    size: getIconSize(size)
   }))))), 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.IconWrapper = exports.ControlButtons = void 0;
+exports.ThWrapper = 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,7 +11,4 @@ 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;"]);
-var IconWrapper = exports.IconWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-haivw3-2"
-})(["line-height:0;cursor:pointer;user-select:none;"]);
+})(["display:flex;justify-content:space-between;align-items:center;gap:0.5rem;"]);

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

@@ -10,7 +10,6 @@ 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); }
@@ -86,8 +85,7 @@ 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),
-        className: _Table2.classes.filterIcon
+        size: (0, _HeadCell.getIconSize)(size)
       }), filtered.length ? _StyledIndicator || (_StyledIndicator = /*#__PURE__*/_react["default"].createElement(_Filter.StyledIndicator, {
         size: "s",
         view: "accent"

package/styled-components/cjs/components/Typography/Typography.template-doc.mdx

@@ -23,6 +23,22 @@ title: Typography
 По умолчанию в типографике если текст превышает ширину элемента, то слова будут переноситься по пробелам.
 Чтобы запретить перенос по пробелам, необходимо установить свойство `noWrap` в значении `true`.
 
+## Смена тега
+Если при использовании компонентов необходимо сменить тег, то можно использовать свойство `as`:
+
+```tsx live
+import React from 'react';
+import { BodyM } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <BodyM as="h3">
+            BodyM
+        </BodyM>
+    );
+}
+```
+
 ## Состав
 
 ### Hero unit

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

@@ -1,6 +1,5 @@
 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';
@@ -9,12 +8,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 { views, sizes } = getConfigVariations(config);
+const view = ['default', 'clear'];
+const size = ['s', 'm', 'l'];
 const borderVariant = ['rows', 'header', 'all'];
 
 const meta: Meta<StoryTableProps> = {
@@ -24,11 +23,11 @@ const meta: Meta<StoryTableProps> = {
     argTypes: {
         view: {
             control: 'select',
-            options: views,
+            options: view,
         },
         size: {
             control: 'select',
-            options: sizes,
+            options: size,
         },
         borderVariant: {
             control: 'select',
@@ -515,8 +514,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="negative" size="xs" onClick={clearAll} />
-                <Button text="Добавить строку" view="positive" size="xs" onClick={addRow} />
+                <Button text="Очистить все" view="critical" size="xs" onClick={clearAll} />
+                <Button text="Добавить строку" view="success" size="xs" onClick={addRow} />
             </ButtonGroup>
 
             <br />

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

@@ -1,6 +1,5 @@
 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,13 +7,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 { views, sizes } = getConfigVariations(config);
+const view = ['default', 'clear'];
+const size = ['s', 'm', 'l'];
 const borderVariant = ['rows', 'header', 'all'];
 
 const meta: Meta<StoryTableProps> = {
@@ -24,11 +23,11 @@ const meta: Meta<StoryTableProps> = {
     argTypes: {
         view: {
             control: 'select',
-            options: views,
+            options: view,
         },
         size: {
             control: 'select',
-            options: sizes,
+            options: size,
         },
         borderVariant: {
             control: 'select',
@@ -515,8 +514,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="negative" size="xs" onClick={clearAll} />
-                <Button text="Добавить строку" view="positive" size="xs" onClick={addRow} />
+                <Button text="Очистить все" view="critical" size="xs" onClick={clearAll} />
+                <Button text="Добавить строку" view="success" size="xs" onClick={addRow} />
             </ButtonGroup>
 
             <br />

package/styled-components/cjs/examples/typography/components/Body/Body.stories.tsx

@@ -9,7 +9,7 @@ import { Body } from './Body';
 import { config } from './Body.config';
 
 const meta: Meta<typeof Body> = {
-    title: 'Data Display/Typography/Body',
+    title: 'typography/Body',
     decorators: [WithTheme],
     component: Body,
     argTypes: {
@@ -19,6 +19,9 @@ const meta: Meta<typeof Body> = {
                 type: 'color',
             },
         },
+        as: {
+            control: 'text',
+        },
     },
     args: {
         noWrap: false,

package/styled-components/cjs/examples/typography/components/Dspl/Dspl.stories.tsx

@@ -9,7 +9,7 @@ import { Dspl } from './Dspl';
 import { config } from './Dspl.config';
 
 const meta: Meta<typeof Dspl> = {
-    title: 'Data Display/Typography/Dspl',
+    title: 'typography/Dspl',
     decorators: [WithTheme],
     component: Dspl,
     argTypes: {
@@ -19,6 +19,9 @@ const meta: Meta<typeof Dspl> = {
                 type: 'color',
             },
         },
+        as: {
+            control: 'text',
+        },
     },
     args: {
         noWrap: false,

package/styled-components/cjs/examples/typography/components/Heading/Heading.stories.tsx

@@ -9,7 +9,7 @@ import { Heading } from './Heading';
 import { config } from './Heading.config';
 
 const meta: Meta<typeof Heading> = {
-    title: 'Data Display/Typography/Heading',
+    title: 'typography/Heading',
     decorators: [WithTheme],
     component: Heading,
     argTypes: {
@@ -19,6 +19,9 @@ const meta: Meta<typeof Heading> = {
                 type: 'color',
             },
         },
+        as: {
+            control: 'text',
+        },
     },
     args: {
         noWrap: false,

package/styled-components/cjs/examples/typography/components/Text/Text.stories.tsx

@@ -9,7 +9,7 @@ import { Text } from './Text';
 import { config } from './Text.config';
 
 const meta: Meta<typeof Text> = {
-    title: 'Data Display/Typography/Text',
+    title: 'typography/Text',
     decorators: [WithTheme],
     component: Text,
     argTypes: {
@@ -19,6 +19,9 @@ const meta: Meta<typeof Text> = {
                 type: 'color',
             },
         },
+        as: {
+            control: 'text',
+        },
     },
     args: {
         noWrap: false,

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

@@ -1,5 +1,3 @@
-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); }
@@ -10,14 +8,12 @@ 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, Tbody } from './Table.styles';
-export var SELECT_COLUMN_ID = 'SELECT_COLUMN_UNIQUE_ID';
+import { base, Table, Tr, Thead, StyledCheckbox } from './Table.styles';
+export var SELECT_COLUMN_ID = 'select#65768756432';
 export var tableRoot = function tableRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, ref) {
     var data = _ref.data,
@@ -33,8 +29,7 @@ export var tableRoot = function tableRoot(Root) {
       outerSorted = _ref.sorted,
       maxHeight = _ref.maxHeight,
       stickyHeader = _ref.stickyHeader,
-      onCellUpdate = _ref.onCellUpdate,
-      props = _objectWithoutProperties(_ref, _excluded);
+      onCellUpdate = _ref.onCellUpdate;
     var _useState = useState(outerSelected || {}),
       _useState2 = _slicedToArray(_useState, 2),
       innerSelected = _useState2[0],
@@ -128,10 +123,17 @@ export var tableRoot = function tableRoot(Root) {
           enableSorting: enableSorting,
           enableResizing: enableResizing,
           filterFn: function filterFn(row, columnId, filterArr) {
-            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));
-              });
+            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;
             }
             return true;
           },
@@ -172,7 +174,7 @@ export var tableRoot = function tableRoot(Root) {
         }
       }
     });
-    return /*#__PURE__*/React.createElement(Root, _extends({
+    return /*#__PURE__*/React.createElement(Root, {
       ref: rootRef,
       data: data,
       columns: columns,
@@ -181,7 +183,7 @@ export var tableRoot = function tableRoot(Root) {
       style: {
         maxHeight: maxHeight || 'none'
       }
-    }, props), /*#__PURE__*/React.createElement(Table, {
+    }, /*#__PURE__*/React.createElement(Table, {
       borderVariant: borderVariant,
       stickyHeader: stickyHeader
     }, /*#__PURE__*/React.createElement(Thead, {
@@ -201,7 +203,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,18 +43,15 @@ 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 Tbody = /*#__PURE__*/styled.tbody.withConfig({
-  componentId: "plasma-new-hope__sc-1nklm7n-3"
-})([""]);
 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) {
+  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) {
   var isResizing = _ref6.isResizing;
   return isResizing ? 'block' : 'none';
 });
 export var Th = /*#__PURE__*/styled.th.withConfig({
-  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) {
+  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) {
   var selectionCell = _ref7.selectionCell;
   return selectionCell ? "var(".concat(tokens.checkboxCellPadding, ")") : "var(".concat(tokens.cellPadding, ")");
 }, tokens.headerRowHeight, function (_ref8) {
@@ -62,17 +59,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-6"
+  componentId: "plasma-new-hope__sc-1nklm7n-5"
 })(["", ":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-7"
+  componentId: "plasma-new-hope__sc-1nklm7n-6"
 })(["", ":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-8"
+  componentId: "plasma-new-hope__sc-1nklm7n-7"
 })(["", ":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-9"
+  componentId: "plasma-new-hope__sc-1nklm7n-8"
 })(["", ":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-10"
+  componentId: "plasma-new-hope__sc-1nklm7n-9"
 })(["", ":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,11 +1,3 @@
-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:0.0625rem;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:1px;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) {