@semcore/data-table 3.7.28 → 3.8.0

package/lib/es6/Head.js

@@ -19,22 +19,13 @@ import { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';
 import logger from '@semcore/utils/lib/logger';
 import { setRef } from '@semcore/utils/lib/ref';
 import 'resize-observer-polyfill';
-
 /*__reshadow-styles__:"./style/scroll-area.shadow.css"*/
-var scrollStyles = (
-/*__reshadow_css_start__*/
-_sstyled.insert(
-/*__inner_css_start__*/
-".___SShadowHorizontal_qidk4_gg_:before{left:var(--left_qidk4)!important}.___SShadowHorizontal_qidk4_gg_:after{right:var(--right_qidk4)!important}.___SContainer_qidk4_gg_.__disabledScroll_qidk4_gg_{overflow:visible}"
-/*__inner_css_end__*/
-, "qidk4_gg_")
-/*__reshadow_css_end__*/
-, {
-  "__SShadowHorizontal": "___SShadowHorizontal_qidk4_gg_",
-  "--left": "--left_qidk4",
-  "--right": "--right_qidk4",
-  "__SContainer": "___SContainer_qidk4_gg_",
-  "_disabledScroll": "__disabledScroll_qidk4_gg_"
+var scrollStyles = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SShadowHorizontal_hmn2a_gg_:before{left:var(--left_hmn2a)!important}.___SShadowHorizontal_hmn2a_gg_:after{right:var(--right_hmn2a)!important}.___SContainer_hmn2a_gg_.__disabledScroll_hmn2a_gg_{overflow:visible}" /*__inner_css_end__*/, "hmn2a_gg_") /*__reshadow_css_end__*/, {
+  "__SShadowHorizontal": "___SShadowHorizontal_hmn2a_gg_",
+  "--left": "--left_hmn2a",
+  "--right": "--right_hmn2a",
+  "__SContainer": "___SContainer_hmn2a_gg_",
+  "_disabledScroll": "__disabledScroll_hmn2a_gg_"
 });
 var SORTING_ICON = {
   desc: SortDesc,
@@ -44,31 +35,22 @@ var ariaSort = {
   desc: 'descending',
   asc: 'ascending'
 };
-
 var Head = /*#__PURE__*/function (_Component) {
   _inherits(Head, _Component);
-
   var _super = _createSuper(Head);
-
   function Head() {
     var _this;
-
     _classCallCheck(this, Head);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "columns", []);
-
     _defineProperty(_assertThisInitialized(_this), "bindHandlerSortClick", function (name) {
       return function (event) {
         _this.asProps.$onSortClick(name, event);
       };
     });
-
     _defineProperty(_assertThisInitialized(_this), "bindHandlerKeyDown", function (name) {
       return function (event) {
         if (event.code === 'Enter') {
@@ -76,25 +58,20 @@ var Head = /*#__PURE__*/function (_Component) {
         }
       };
     });
-
     _defineProperty(_assertThisInitialized(_this), "refColumn", function (props) {
       return function (ref) {
         setRef(props.ref, ref);
-
         if (props.forwardRef) {
           setRef(props.forwardRef, ref);
         }
       };
     });
-
     return _this;
   }
-
   _createClass(Head, [{
     key: "renderColumns",
     value: function renderColumns(columns, width) {
       var _this2 = this;
-
       return columns.map(function (column) {
         return _this2.renderColumn(column, width);
       });
@@ -102,12 +79,11 @@ var Head = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderColumn",
     value: function renderColumn(column, width) {
-      var _ref2, _column$columns, _column$props$justify;
-
+      var _ref2, _column$columns;
       var _this$asProps = this.asProps,
-          styles = _this$asProps.styles,
-          use = _this$asProps.use,
-          hidden = _this$asProps.hidden;
+        styles = _this$asProps.styles,
+        use = _this$asProps.use,
+        hidden = _this$asProps.hidden;
       var SColumn = Flex;
       var SHead = Box;
       var SSortWrapper = 'div';
@@ -115,24 +91,19 @@ var Head = /*#__PURE__*/function (_Component) {
       var ariaSortValue = column.sortable && column.active ? ariaSort[column.sortDirection] : undefined;
       var isGroup = ((_column$columns = column.columns) === null || _column$columns === void 0 ? void 0 : _column$columns.length) > 0;
       var cSize = isGroup ? flattenColumns(column.columns).length : 1;
-
       var _getFixedStyle = getFixedStyle(column, this.columns),
-          _getFixedStyle2 = _slicedToArray(_getFixedStyle, 2),
-          name = _getFixedStyle2[0],
-          value = _getFixedStyle2[1];
-
+        _getFixedStyle2 = _slicedToArray(_getFixedStyle, 2),
+        name = _getFixedStyle2[0],
+        value = _getFixedStyle2[1];
       var style = _objectSpread({
         flexBasis: column.props.flex === undefined && "".concat(width * cSize, "%")
       }, column.props.style);
-
       if (name !== undefined && value !== undefined) {
         style[name] = value;
       }
-
       if (!column.setVar) {
         style['flexBasis'] = "var(".concat(column.varWidth, ")");
       }
-
       return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SColumn, _ref2.cn("SColumn", _objectSpread(_objectSpread({
         "role": isGroup ? undefined : 'columnheader',
         "key": column.name,
@@ -140,7 +111,6 @@ var Head = /*#__PURE__*/function (_Component) {
         "fixed": column.fixed,
         "resizable": column.resizable,
         "sortable": column.sortable,
-        "sortIconFloat": (_column$props$justify = column.props.justifyContent) === null || _column$props$justify === void 0 ? void 0 : _column$props$justify.includes('end'),
         "borderLeft": isGroup ? false : column.borderLeft,
         "borderRight": isGroup ? false : column.borderRight,
         "active": isGroup ? false : column.active,
@@ -168,25 +138,22 @@ var Head = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _ref = this.asProps,
-          _ref3;
-
+        _ref3;
       var SHead = Box;
       var SHeadWrapper = Box;
       var _this$asProps2 = this.asProps,
-          Children = _this$asProps2.Children,
-          styles = _this$asProps2.styles,
-          columnsChildren = _this$asProps2.columnsChildren,
-          onResize = _this$asProps2.onResize,
-          $scrollRef = _this$asProps2.$scrollRef,
-          sticky = _this$asProps2.sticky,
-          disabledScroll = _this$asProps2.disabledScroll;
+        Children = _this$asProps2.Children,
+        styles = _this$asProps2.styles,
+        columnsChildren = _this$asProps2.columnsChildren,
+        onResize = _this$asProps2.onResize,
+        $scrollRef = _this$asProps2.$scrollRef,
+        sticky = _this$asProps2.sticky,
+        disabledScroll = _this$asProps2.disabledScroll;
       this.columns = flattenColumns(columnsChildren);
-
       var _getScrollOffsetValue = getScrollOffsetValue(this.columns),
-          _getScrollOffsetValue2 = _slicedToArray(_getScrollOffsetValue, 2),
-          offsetLeftSum = _getScrollOffsetValue2[0],
-          offsetRightSum = _getScrollOffsetValue2[1];
-
+        _getScrollOffsetValue2 = _slicedToArray(_getScrollOffsetValue, 2),
+        offsetLeftSum = _getScrollOffsetValue2[0],
+        offsetRightSum = _getScrollOffsetValue2[1];
       logger.warn(sticky, "'sticky' property is deprecated, use '<Sticky/>' wrapper", this.asProps['data-ui-name'] || Head.displayName);
       return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SHeadWrapper, _ref3.cn("SHeadWrapper", {
         "sticky": sticky,
@@ -205,11 +172,8 @@ var Head = /*#__PURE__*/function (_Component) {
       }, _ref))), this.renderColumns(columnsChildren, 100 / this.columns.length)))), Children.origin);
     }
   }]);
-
   return Head;
 }(Component);
-
 _defineProperty(Head, "displayName", void 0);
-
 export default Head;
 //# sourceMappingURL=Head.js.map

package/lib/es6/Head.js.map

@@ -1 +1 @@
-{"version":3,"file":"Head.js","names":["React","Component","sstyled","Root","Box","Flex","ScrollArea","SortDesc","SortAsc","callAllEventHandlers","flattenColumns","getFixedStyle","getScrollOffsetValue","logger","setRef","SORTING_ICON","desc","asc","ariaSort","Head","name","event","asProps","$onSortClick","code","props","ref","forwardRef","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","SHead","SSortWrapper","SSortIcon","sortDirection","ariaSortValue","sortable","active","undefined","isGroup","length","cSize","value","style","flexBasis","flex","setVar","varWidth","fixed","resizable","justifyContent","includes","borderLeft","borderRight","refColumn","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","children","renderColumns","SHeadWrapper","Children","columnsChildren","onResize","$scrollRef","sticky","disabledScroll","offsetLeftSum","offsetRightSum","warn","displayName","scrollStyles","origin"],"sources":["../../src/Head.tsx"],"sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport SortDesc from '@semcore/icon/SortDesc/m';\nimport SortAsc from '@semcore/icon/SortAsc/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';\nimport type { Column } from './types';\nimport logger from '@semcore/utils/lib/logger';\nimport { setRef } from '@semcore/utils/lib/ref';\nimport 'resize-observer-polyfill';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n  desc: SortDesc,\n  asc: SortAsc,\n} as const;\nconst ariaSort = {\n  desc: 'descending',\n  asc: 'ascending',\n} as const;\n\ntype AsProps = {\n  $onSortClick: (name: string, event: React.MouseEvent | React.KeyboardEvent) => void;\n  $scrollRef: (instance: unknown) => void;\n  use: 'primary' | 'secondary';\n  columnsChildren: Column[];\n  onResize: ResizeObserverCallback;\n  sticky: boolean;\n  disabledScroll?: boolean;\n  ['data-ui-name']: string;\n};\n\nclass Head extends Component<AsProps> {\n  columns: Column[] = [];\n\n  static displayName: string;\n\n  bindHandlerSortClick = (name: string) => (event: React.MouseEvent) => {\n    this.asProps.$onSortClick(name, event);\n  };\n\n  bindHandlerKeyDown = (name: string) => (event: React.KeyboardEvent) => {\n    if (event.code === 'Enter') {\n      this.asProps.$onSortClick(name, event);\n    }\n  };\n\n  refColumn = (props: Column['props']) => (ref: HTMLElement) => {\n    setRef(props.ref, ref);\n    if (props.forwardRef) {\n      setRef(props.forwardRef, ref);\n    }\n  };\n\n  renderColumns(columns: Column[], width: number) {\n    return columns.map((column) => this.renderColumn(column, width));\n  }\n\n  renderColumn(column: Column, width: number) {\n    const { styles, use, hidden } = this.asProps;\n    const SColumn = Flex;\n    const SHead = Box;\n    const SSortWrapper = 'div';\n    const SSortIcon = SORTING_ICON[column.sortDirection];\n    const ariaSortValue =\n      column.sortable && column.active ? ariaSort[column.sortDirection] : undefined;\n    const isGroup = column.columns?.length > 0;\n    const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n    const [name, value] = getFixedStyle(column, this.columns);\n\n    const style = {\n      flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n      ...column.props.style,\n    };\n\n    if (name !== undefined && value !== undefined) {\n      style[name] = value;\n    }\n\n    if (!column.setVar) {\n      style['flexBasis'] = `var(${column.varWidth})`;\n    }\n\n    return sstyled(styles)(\n      <SColumn\n        role={isGroup ? undefined : 'columnheader'}\n        key={column.name}\n        use={use}\n        fixed={column.fixed}\n        resizable={column.resizable}\n        sortable={column.sortable}\n        sortIconFloat={column.props.justifyContent?.includes('end')}\n        borderLeft={isGroup ? false : column.borderLeft}\n        borderRight={isGroup ? false : column.borderRight}\n        active={isGroup ? false : column.active}\n        group={isGroup}\n        tabIndex={column.sortable && 0}\n        {...column.props}\n        ref={this.refColumn(column.props)}\n        onClick={callAllEventHandlers(\n          column.props.onClick,\n          column.sortable ? this.bindHandlerSortClick(column.name) : undefined,\n        )}\n        onKeyDown={callAllEventHandlers(\n          column.props.onKeyDown,\n          column.sortable ? this.bindHandlerKeyDown(column.name) : undefined,\n        )}\n        style={style}\n        hidden={hidden}\n        aria-sort={ariaSortValue}\n      >\n        {isGroup ? (\n          <>\n            <SColumn\n              role=\"columnheader\"\n              groupHead\n              use={use}\n              active={column.active}\n              borderLeft={column.borderLeft}\n              borderRight={column.borderRight}\n            >\n              <div>{column.props.children}</div>\n            </SColumn>\n            <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>\n          </>\n        ) : (\n          <>\n            {column.props.children}\n            {column.sortable ? (\n              <SSortWrapper>\n                <SSortIcon active={column.active} />\n              </SSortWrapper>\n            ) : null}\n          </>\n        )}\n      </SColumn>,\n    );\n  }\n\n  render() {\n    const SHead = Root;\n    const SHeadWrapper = Box;\n    const { Children, styles, columnsChildren, onResize, $scrollRef, sticky, disabledScroll } =\n      this.asProps;\n\n    this.columns = flattenColumns(columnsChildren);\n\n    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);\n\n    logger.warn(\n      sticky,\n      \"'sticky' property is deprecated, use '<Sticky/>' wrapper\",\n      this.asProps['data-ui-name'] || Head.displayName,\n    );\n\n    return sstyled(styles)(\n      <SHeadWrapper sticky={sticky} role=\"rowgroup\">\n        <ScrollArea\n          styles={scrollStyles}\n          use:left={`${offsetLeftSum}px`}\n          use:right={`${offsetRightSum}px`}\n          shadow\n          onResize={onResize}\n        >\n          <ScrollArea.Container ref={$scrollRef} disabledScroll={disabledScroll}>\n            <SHead render={Box} role=\"row\">\n              {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n            </SHead>\n          </ScrollArea.Container>\n        </ScrollArea>\n        {Children.origin}\n      </SHeadWrapper>,\n    );\n  }\n}\n\nexport default Head;\n"],"mappings":"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"}
+{"version":3,"file":"Head.js","names":["React","Component","sstyled","Root","Box","Flex","ScrollArea","SortDesc","SortAsc","callAllEventHandlers","flattenColumns","getFixedStyle","getScrollOffsetValue","logger","setRef","scrollStyles","_sstyled","insert","SORTING_ICON","desc","asc","ariaSort","Head","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","name","event","asProps","$onSortClick","code","props","ref","forwardRef","_createClass","key","value","renderColumns","columns","width","_this2","map","column","renderColumn","_ref2","_column$columns","_this$asProps","styles","use","hidden","SColumn","SHead","SSortWrapper","SSortIcon","sortDirection","ariaSortValue","sortable","active","undefined","isGroup","cSize","_getFixedStyle","_getFixedStyle2","_slicedToArray","style","_objectSpread","flexBasis","flex","setVar","varWidth","createElement","cn","fixed","resizable","borderLeft","borderRight","refColumn","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","Fragment","children","render","_ref","_ref3","SHeadWrapper","_this$asProps2","Children","columnsChildren","onResize","$scrollRef","sticky","disabledScroll","_getScrollOffsetValue","_getScrollOffsetValue2","offsetLeftSum","offsetRightSum","warn","displayName","Container","_assignProps","origin"],"sources":["../../src/Head.tsx"],"sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport SortDesc from '@semcore/icon/SortDesc/m';\nimport SortAsc from '@semcore/icon/SortAsc/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';\nimport type { Column } from './types';\nimport logger from '@semcore/utils/lib/logger';\nimport { setRef } from '@semcore/utils/lib/ref';\nimport 'resize-observer-polyfill';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n  desc: SortDesc,\n  asc: SortAsc,\n} as const;\nconst ariaSort = {\n  desc: 'descending',\n  asc: 'ascending',\n} as const;\n\ntype AsProps = {\n  $onSortClick: (name: string, event: React.MouseEvent | React.KeyboardEvent) => void;\n  $scrollRef: (instance: unknown) => void;\n  use: 'primary' | 'secondary';\n  columnsChildren: Column[];\n  onResize: ResizeObserverCallback;\n  sticky: boolean;\n  disabledScroll?: boolean;\n  ['data-ui-name']: string;\n};\n\nclass Head extends Component<AsProps> {\n  columns: Column[] = [];\n\n  static displayName: string;\n\n  bindHandlerSortClick = (name: string) => (event: React.MouseEvent) => {\n    this.asProps.$onSortClick(name, event);\n  };\n\n  bindHandlerKeyDown = (name: string) => (event: React.KeyboardEvent) => {\n    if (event.code === 'Enter') {\n      this.asProps.$onSortClick(name, event);\n    }\n  };\n\n  refColumn = (props: Column['props']) => (ref: HTMLElement) => {\n    setRef(props.ref, ref);\n    if (props.forwardRef) {\n      setRef(props.forwardRef, ref);\n    }\n  };\n\n  renderColumns(columns: Column[], width: number) {\n    return columns.map((column) => this.renderColumn(column, width));\n  }\n\n  renderColumn(column: Column, width: number) {\n    const { styles, use, hidden } = this.asProps;\n    const SColumn = Flex;\n    const SHead = Box;\n    const SSortWrapper = 'div';\n    const SSortIcon = SORTING_ICON[column.sortDirection];\n    const ariaSortValue =\n      column.sortable && column.active ? ariaSort[column.sortDirection] : undefined;\n    const isGroup = column.columns?.length > 0;\n    const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n    const [name, value] = getFixedStyle(column, this.columns);\n\n    const style = {\n      flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n      ...column.props.style,\n    };\n\n    if (name !== undefined && value !== undefined) {\n      style[name] = value;\n    }\n\n    if (!column.setVar) {\n      style['flexBasis'] = `var(${column.varWidth})`;\n    }\n\n    return sstyled(styles)(\n      <SColumn\n        role={isGroup ? undefined : 'columnheader'}\n        key={column.name}\n        use={use}\n        fixed={column.fixed}\n        resizable={column.resizable}\n        sortable={column.sortable}\n        borderLeft={isGroup ? false : column.borderLeft}\n        borderRight={isGroup ? false : column.borderRight}\n        active={isGroup ? false : column.active}\n        group={isGroup}\n        tabIndex={column.sortable && 0}\n        {...column.props}\n        ref={this.refColumn(column.props)}\n        onClick={callAllEventHandlers(\n          column.props.onClick,\n          column.sortable ? this.bindHandlerSortClick(column.name) : undefined,\n        )}\n        onKeyDown={callAllEventHandlers(\n          column.props.onKeyDown,\n          column.sortable ? this.bindHandlerKeyDown(column.name) : undefined,\n        )}\n        style={style}\n        hidden={hidden}\n        aria-sort={ariaSortValue}\n      >\n        {isGroup ? (\n          <>\n            <SColumn\n              role=\"columnheader\"\n              groupHead\n              use={use}\n              active={column.active}\n              borderLeft={column.borderLeft}\n              borderRight={column.borderRight}\n            >\n              <div>{column.props.children}</div>\n            </SColumn>\n            <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>\n          </>\n        ) : (\n          <>\n            {column.props.children}\n            {column.sortable ? (\n              <SSortWrapper>\n                <SSortIcon active={column.active} />\n              </SSortWrapper>\n            ) : null}\n          </>\n        )}\n      </SColumn>,\n    );\n  }\n\n  render() {\n    const SHead = Root;\n    const SHeadWrapper = Box;\n    const { Children, styles, columnsChildren, onResize, $scrollRef, sticky, disabledScroll } =\n      this.asProps;\n\n    this.columns = flattenColumns(columnsChildren);\n\n    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);\n\n    logger.warn(\n      sticky,\n      \"'sticky' property is deprecated, use '<Sticky/>' wrapper\",\n      this.asProps['data-ui-name'] || Head.displayName,\n    );\n\n    return sstyled(styles)(\n      <SHeadWrapper sticky={sticky} role=\"rowgroup\">\n        <ScrollArea\n          styles={scrollStyles}\n          use:left={`${offsetLeftSum}px`}\n          use:right={`${offsetRightSum}px`}\n          shadow\n          onResize={onResize}\n        >\n          <ScrollArea.Container ref={$scrollRef} disabledScroll={disabledScroll}>\n            <SHead render={Box} role=\"row\">\n              {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n            </SHead>\n          </ScrollArea.Container>\n        </ScrollArea>\n        {Children.origin}\n      </SHeadWrapper>,\n    );\n  }\n}\n\nexport default Head;\n"],"mappings":"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"}

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.ts"],"sourcesContent":["export { default } from './DataTable';\nexport * from './DataTable';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB;AACA,cAAc,aAAd"}
+{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.ts"],"sourcesContent":["export { default } from './DataTable';\nexport * from './DataTable';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,aAAa;AACrC,cAAc,aAAa"}

package/lib/es6/style/data-table.shadow.css

@@ -32,6 +32,7 @@ SColumn {
   align-items: flex-start;
   flex-grow: 1;
   font-size: var(--intergalactic-fs-100, 12px);
+  line-height: var(--intergalactic-lh-100, 133%);
   color: var(--intergalactic-text-primary, #191b23);
   box-sizing: border-box;
   position: relative;
@@ -88,7 +89,18 @@ SColumn[sortable] {
   }
 
   &:hover SSortWrapper {
+    flex-basis: calc(var(--intergalactic-spacing-1x, 4px) + 16px);
+    opacity: 1;
+  }
+
+  &:hover SSortWrapper:before {
+    display: block;
+    opacity: 1;
+  }
+
+  &:hover SSortIcon {
     display: block;
+    opacity: 1;
   }
 }
 
@@ -97,20 +109,15 @@ SColumn[use='primary'][active] {
   width: 100%;
 }
 
-SColumn[active] SSortIcon {
-  position: relative;
-}
-
-SColumn[sortIconFloat] SSortWrapper {
-  width: 0;
-  flex-basis: 0;
+SColumn[active] SSortWrapper {
+  flex-basis: calc(var(--intergalactic-spacing-1x, 4px) + 16px);
+  opacity: 1;
 }
 
-SColumn[active] SSortWrapper {
+SColumn[active] SSortIcon {
   display: block;
-  width: 16px;
-  flex-basis: 20px;
-  margin-left: var(--intergalactic-spacing-1x, 4px);
+  position: relative;
+  opacity: 1;
 }
 
 SColumn[resizable] {
@@ -149,43 +156,52 @@ SCell[borderRight] {
   border-right: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
 }
 
-SSortIcon {
-  fill: var(--intergalactic-icon-secondary-neutral-hover-active, #8a8e9b);
-  position: absolute;
-  top: -2px;
-  right: 0;
-}
-
 SSortWrapper {
-  display: none;
   flex-shrink: 99999;
   position: relative;
-  flex-basis: 20px;
-  height: 0;
+  flex-basis: 0;
+  height: 100%;
+  min-height: 16px;
+  opacity: 0;
+  transition: all 0.3s ease;
 }
 
 SSortWrapper:before {
+  display: none;
   content: '';
   position: absolute;
-  top: -2px;
+  top: 0;
   right: 0;
   width: 20px;
-  height: 16px;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+SSortIcon {
+  display: none;
+  fill: var(--intergalactic-icon-secondary-neutral-hover-active, #8a8e9b);
+  position: absolute;
+  top: calc(1em * 1.25 - 16px);
+  right: 0;
+  margin-left: var(--intergalactic-spacing-1x, 4px);
+  opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
 SColumn[use='primary'] SSortWrapper:before {
   background: linear-gradient(
-    270deg,
-    var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,
-    rgba(224, 225, 233, 0) 105%
+      270deg,
+      var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,
+      rgba(224, 225, 233, 0) 105%
   );
 }
 
 SColumn[use='secondary'] SSortWrapper:before {
   background: linear-gradient(
-    270deg,
-    var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,
-    rgba(255, 255, 255, 0) 105%
+      270deg,
+      var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,
+      rgba(255, 255, 255, 0) 105%
   );
 }
 

package/lib/es6/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["ROW_GROUP"],"sources":["../../src/types.ts"],"sourcesContent":["import React from 'react';\nimport { ROW_GROUP } from './DataTable';\nimport { Property } from 'csstype';\n\nexport type PseudoChildPropsGetter = (\n  props: { [propName: string]: unknown },\n  rowData: { [columnName: string]: unknown },\n  index: number,\n) => { [propName: string]: unknown };\nexport type PropsLayer = {\n  childrenPropsGetter?: PseudoChildPropsGetter;\n  [propName: string]: unknown;\n};\n\nexport type SortDirection = 'asc' | 'desc';\nexport type Column<\n  Props extends { [propName: string]: unknown } = { [propName: string]: unknown },\n> = {\n  name: string;\n  active: boolean;\n  width: number;\n  fixed?: 'left' | 'right';\n  resizable?: boolean;\n  sortable?: boolean | SortDirection;\n  sortDirection: SortDirection;\n  varWidth: string;\n  setVar: boolean;\n  data?: unknown;\n  vBorders?: boolean;\n  borderLeft?: boolean;\n  borderRight?: boolean;\n  props: {\n    name: string;\n    ref: React.RefObject<HTMLElement>;\n  } & Partial<{\n    flex: Property.Flex;\n    justifyContent: Property.JustifyContent;\n    onClick: (event: React.MouseEvent) => void;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    forwardRef: React.Ref<HTMLElement>;\n    style: React.CSSProperties;\n    fixed: 'left' | 'right';\n    children: React.ReactNode[];\n    resizable: boolean;\n    sortable: boolean | SortDirection;\n    sortDirection: SortDirection;\n    vBorders: boolean;\n    borderLeft: boolean;\n    borderRight: boolean;\n  }> &\n    Props;\n  columns: Column[];\n};\nexport type Cell = Pick<Column, 'name' | 'fixed' | 'data'> & {\n  cssVar: string | string[];\n  cellPropsLayers: PropsLayer[];\n};\nexport type RowData<\n  Data extends { [columnName: string]: unknown } = { [columnName: string]: unknown },\n> = Data &\n  Partial<{\n    name: string;\n    [ROW_GROUP]: RowData[];\n  }>;\nexport type NestedCells = (Cell | NestedCells)[] & { flatRowData?: RowData };\n"],"mappings":"AACA,SAASA,SAAT,QAA0B,aAA1B"}
+{"version":3,"file":"types.js","names":["ROW_GROUP"],"sources":["../../src/types.ts"],"sourcesContent":["import React from 'react';\nimport { ROW_GROUP } from './DataTable';\nimport { Property } from 'csstype';\n\nexport type PseudoChildPropsGetter = (\n  props: { [propName: string]: unknown },\n  rowData: { [columnName: string]: unknown },\n  index: number,\n) => { [propName: string]: unknown };\nexport type PropsLayer = {\n  childrenPropsGetter?: PseudoChildPropsGetter;\n  [propName: string]: unknown;\n};\n\nexport type SortDirection = 'asc' | 'desc';\nexport type Column<\n  Props extends { [propName: string]: unknown } = { [propName: string]: unknown },\n> = {\n  name: string;\n  active: boolean;\n  width: number;\n  fixed?: 'left' | 'right';\n  resizable?: boolean;\n  sortable?: boolean | SortDirection;\n  sortDirection: SortDirection;\n  varWidth: string;\n  setVar: boolean;\n  data?: unknown;\n  vBorders?: boolean;\n  borderLeft?: boolean;\n  borderRight?: boolean;\n  props: {\n    name: string;\n    ref: React.RefObject<HTMLElement>;\n  } & Partial<{\n    flex: Property.Flex;\n    justifyContent: Property.JustifyContent;\n    onClick: (event: React.MouseEvent) => void;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    forwardRef: React.Ref<HTMLElement>;\n    style: React.CSSProperties;\n    fixed: 'left' | 'right';\n    children: React.ReactNode[];\n    resizable: boolean;\n    sortable: boolean | SortDirection;\n    sortDirection: SortDirection;\n    vBorders: boolean;\n    borderLeft: boolean;\n    borderRight: boolean;\n  }> &\n    Props;\n  columns: Column[];\n};\nexport type Cell = Pick<Column, 'name' | 'fixed' | 'data'> & {\n  cssVar: string | string[];\n  cellPropsLayers: PropsLayer[];\n};\nexport type RowData<\n  Data extends { [columnName: string]: unknown } = { [columnName: string]: unknown },\n> = Data &\n  Partial<{\n    name: string;\n    [ROW_GROUP]: RowData[];\n  }>;\nexport type NestedCells = (Cell | NestedCells)[] & { flatRowData?: RowData };\n"],"mappings":"AACA,SAASA,SAAS,QAAQ,aAAa"}

package/lib/es6/utils.js

@@ -3,11 +3,9 @@ export var getScrollOffsetValue = function getScrollOffsetValue(columns) {
     if (column.fixed === 'left') {
       acc[0] += column.width;
     }
-
     if (column.fixed === 'right') {
       acc[1] += column.width;
     }
-
     return acc;
   }, [0, 0]);
 };

package/lib/es6/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["getScrollOffsetValue","columns","reduce","acc","column","fixed","width","flattenColumns","hasNestedColumns","length","concat","getFixedStyle","cell","side","undefined","names","name","split","nameSideMap","left","right","index","findIndex","startIndexSideMap","endIndexSideMap","columnsFixed","slice","vars","map","join"],"sources":["../../src/utils.ts"],"sourcesContent":["import type { Column } from './types';\n\nexport const getScrollOffsetValue = (columns: Column[]) =>\n  columns.reduce(\n    (acc, column) => {\n      if (column.fixed === 'left') {\n        acc[0] += column.width;\n      }\n      if (column.fixed === 'right') {\n        acc[1] += column.width;\n      }\n      return acc;\n    },\n    [0, 0] as [leftOffset: number, rightOffset: number],\n  );\n\nexport const flattenColumns = (columns: Column[]) =>\n  columns.reduce((acc, column) => {\n    const hasNestedColumns = 'columns' in column && column.columns.length > 0;\n    const columns: Column[] = hasNestedColumns ? flattenColumns(column.columns) : [column];\n    acc = acc.concat(columns);\n    return acc;\n  }, [] as Column[]);\n\nexport const getFixedStyle = (\n  cell: Pick<Column, 'name' | 'fixed'>,\n  columns: Column[],\n): [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined] => {\n  const side = cell.fixed;\n  if (!side) return [undefined, undefined];\n  const names = cell.name.split('/');\n  const nameSideMap = {\n    left: names[0],\n    right: names[names.length - 1],\n  };\n  const name = nameSideMap[side];\n  const index = columns.findIndex((column) => column.name === name);\n\n  if (index === -1) return [undefined, undefined];\n\n  const startIndexSideMap = {\n    left: 0,\n    right: index,\n  };\n  const endIndexSideMap = {\n    left: index,\n    right: columns.length - 1,\n  };\n  const columnsFixed = columns.slice(startIndexSideMap[side], endIndexSideMap[side]);\n\n  if (columnsFixed.length < 1) return [side, 0];\n\n  const vars = columnsFixed.map((column) => `var(--${column.name}_width)`);\n  return [side, vars.length === 1 ? vars[0] : `calc(${vars.join(' + ')})`];\n};\n"],"mappings":"AAEA,OAAO,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,OAAD;EAAA,OAClCA,OAAO,CAACC,MAAR,CACE,UAACC,GAAD,EAAMC,MAAN,EAAiB;IACf,IAAIA,MAAM,CAACC,KAAP,KAAiB,MAArB,EAA6B;MAC3BF,GAAG,CAAC,CAAD,CAAH,IAAUC,MAAM,CAACE,KAAjB;IACD;;IACD,IAAIF,MAAM,CAACC,KAAP,KAAiB,OAArB,EAA8B;MAC5BF,GAAG,CAAC,CAAD,CAAH,IAAUC,MAAM,CAACE,KAAjB;IACD;;IACD,OAAOH,GAAP;EACD,CATH,EAUE,CAAC,CAAD,EAAI,CAAJ,CAVF,CADkC;AAAA,CAA7B;AAcP,OAAO,IAAMI,cAAc,GAAG,SAAjBA,cAAiB,CAACN,OAAD;EAAA,OAC5BA,OAAO,CAACC,MAAR,CAAe,UAACC,GAAD,EAAMC,MAAN,EAAiB;IAC9B,IAAMI,gBAAgB,GAAG,aAAaJ,MAAb,IAAuBA,MAAM,CAACH,OAAP,CAAeQ,MAAf,GAAwB,CAAxE;IACA,IAAMR,OAAiB,GAAGO,gBAAgB,GAAGD,cAAc,CAACH,MAAM,CAACH,OAAR,CAAjB,GAAoC,CAACG,MAAD,CAA9E;IACAD,GAAG,GAAGA,GAAG,CAACO,MAAJ,CAAWT,OAAX,CAAN;IACA,OAAOE,GAAP;EACD,CALD,EAKG,EALH,CAD4B;AAAA,CAAvB;AAQP,OAAO,IAAMQ,aAAa,GAAG,SAAhBA,aAAgB,CAC3BC,IAD2B,EAE3BX,OAF2B,EAGgE;EAC3F,IAAMY,IAAI,GAAGD,IAAI,CAACP,KAAlB;EACA,IAAI,CAACQ,IAAL,EAAW,OAAO,CAACC,SAAD,EAAYA,SAAZ,CAAP;EACX,IAAMC,KAAK,GAAGH,IAAI,CAACI,IAAL,CAAUC,KAAV,CAAgB,GAAhB,CAAd;EACA,IAAMC,WAAW,GAAG;IAClBC,IAAI,EAAEJ,KAAK,CAAC,CAAD,CADO;IAElBK,KAAK,EAAEL,KAAK,CAACA,KAAK,CAACN,MAAN,GAAe,CAAhB;EAFM,CAApB;EAIA,IAAMO,IAAI,GAAGE,WAAW,CAACL,IAAD,CAAxB;EACA,IAAMQ,KAAK,GAAGpB,OAAO,CAACqB,SAAR,CAAkB,UAAClB,MAAD;IAAA,OAAYA,MAAM,CAACY,IAAP,KAAgBA,IAA5B;EAAA,CAAlB,CAAd;EAEA,IAAIK,KAAK,KAAK,CAAC,CAAf,EAAkB,OAAO,CAACP,SAAD,EAAYA,SAAZ,CAAP;EAElB,IAAMS,iBAAiB,GAAG;IACxBJ,IAAI,EAAE,CADkB;IAExBC,KAAK,EAAEC;EAFiB,CAA1B;EAIA,IAAMG,eAAe,GAAG;IACtBL,IAAI,EAAEE,KADgB;IAEtBD,KAAK,EAAEnB,OAAO,CAACQ,MAAR,GAAiB;EAFF,CAAxB;EAIA,IAAMgB,YAAY,GAAGxB,OAAO,CAACyB,KAAR,CAAcH,iBAAiB,CAACV,IAAD,CAA/B,EAAuCW,eAAe,CAACX,IAAD,CAAtD,CAArB;EAEA,IAAIY,YAAY,CAAChB,MAAb,GAAsB,CAA1B,EAA6B,OAAO,CAACI,IAAD,EAAO,CAAP,CAAP;EAE7B,IAAMc,IAAI,GAAGF,YAAY,CAACG,GAAb,CAAiB,UAACxB,MAAD;IAAA,uBAAqBA,MAAM,CAACY,IAA5B;EAAA,CAAjB,CAAb;EACA,OAAO,CAACH,IAAD,EAAOc,IAAI,CAAClB,MAAL,KAAgB,CAAhB,GAAoBkB,IAAI,CAAC,CAAD,CAAxB,kBAAsCA,IAAI,CAACE,IAAL,CAAU,KAAV,CAAtC,MAAP,CAAP;AACD,CA9BM"}
+{"version":3,"file":"utils.js","names":["getScrollOffsetValue","columns","reduce","acc","column","fixed","width","flattenColumns","hasNestedColumns","length","concat","getFixedStyle","cell","side","undefined","names","name","split","nameSideMap","left","right","index","findIndex","startIndexSideMap","endIndexSideMap","columnsFixed","slice","vars","map","join"],"sources":["../../src/utils.ts"],"sourcesContent":["import type { Column } from './types';\n\nexport const getScrollOffsetValue = (columns: Column[]) =>\n  columns.reduce(\n    (acc, column) => {\n      if (column.fixed === 'left') {\n        acc[0] += column.width;\n      }\n      if (column.fixed === 'right') {\n        acc[1] += column.width;\n      }\n      return acc;\n    },\n    [0, 0] as [leftOffset: number, rightOffset: number],\n  );\n\nexport const flattenColumns = (columns: Column[]) =>\n  columns.reduce((acc, column) => {\n    const hasNestedColumns = 'columns' in column && column.columns.length > 0;\n    const columns: Column[] = hasNestedColumns ? flattenColumns(column.columns) : [column];\n    acc = acc.concat(columns);\n    return acc;\n  }, [] as Column[]);\n\nexport const getFixedStyle = (\n  cell: Pick<Column, 'name' | 'fixed'>,\n  columns: Column[],\n): [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined] => {\n  const side = cell.fixed;\n  if (!side) return [undefined, undefined];\n  const names = cell.name.split('/');\n  const nameSideMap = {\n    left: names[0],\n    right: names[names.length - 1],\n  };\n  const name = nameSideMap[side];\n  const index = columns.findIndex((column) => column.name === name);\n\n  if (index === -1) return [undefined, undefined];\n\n  const startIndexSideMap = {\n    left: 0,\n    right: index,\n  };\n  const endIndexSideMap = {\n    left: index,\n    right: columns.length - 1,\n  };\n  const columnsFixed = columns.slice(startIndexSideMap[side], endIndexSideMap[side]);\n\n  if (columnsFixed.length < 1) return [side, 0];\n\n  const vars = columnsFixed.map((column) => `var(--${column.name}_width)`);\n  return [side, vars.length === 1 ? vars[0] : `calc(${vars.join(' + ')})`];\n};\n"],"mappings":"AAEA,OAAO,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAIC,OAAiB;EAAA,OACpDA,OAAO,CAACC,MAAM,CACZ,UAACC,GAAG,EAAEC,MAAM,EAAK;IACf,IAAIA,MAAM,CAACC,KAAK,KAAK,MAAM,EAAE;MAC3BF,GAAG,CAAC,CAAC,CAAC,IAAIC,MAAM,CAACE,KAAK;IACxB;IACA,IAAIF,MAAM,CAACC,KAAK,KAAK,OAAO,EAAE;MAC5BF,GAAG,CAAC,CAAC,CAAC,IAAIC,MAAM,CAACE,KAAK;IACxB;IACA,OAAOH,GAAG;EACZ,CAAC,EACD,CAAC,CAAC,EAAE,CAAC,CAAC,CACP;AAAA;AAEH,OAAO,IAAMI,cAAc,GAAG,SAAjBA,cAAcA,CAAIN,OAAiB;EAAA,OAC9CA,OAAO,CAACC,MAAM,CAAC,UAACC,GAAG,EAAEC,MAAM,EAAK;IAC9B,IAAMI,gBAAgB,GAAG,SAAS,IAAIJ,MAAM,IAAIA,MAAM,CAACH,OAAO,CAACQ,MAAM,GAAG,CAAC;IACzE,IAAMR,OAAiB,GAAGO,gBAAgB,GAAGD,cAAc,CAACH,MAAM,CAACH,OAAO,CAAC,GAAG,CAACG,MAAM,CAAC;IACtFD,GAAG,GAAGA,GAAG,CAACO,MAAM,CAACT,OAAO,CAAC;IACzB,OAAOE,GAAG;EACZ,CAAC,EAAE,EAAE,CAAa;AAAA;AAEpB,OAAO,IAAMQ,aAAa,GAAG,SAAhBA,aAAaA,CACxBC,IAAoC,EACpCX,OAAiB,EAC0E;EAC3F,IAAMY,IAAI,GAAGD,IAAI,CAACP,KAAK;EACvB,IAAI,CAACQ,IAAI,EAAE,OAAO,CAACC,SAAS,EAAEA,SAAS,CAAC;EACxC,IAAMC,KAAK,GAAGH,IAAI,CAACI,IAAI,CAACC,KAAK,CAAC,GAAG,CAAC;EAClC,IAAMC,WAAW,GAAG;IAClBC,IAAI,EAAEJ,KAAK,CAAC,CAAC,CAAC;IACdK,KAAK,EAAEL,KAAK,CAACA,KAAK,CAACN,MAAM,GAAG,CAAC;EAC/B,CAAC;EACD,IAAMO,IAAI,GAAGE,WAAW,CAACL,IAAI,CAAC;EAC9B,IAAMQ,KAAK,GAAGpB,OAAO,CAACqB,SAAS,CAAC,UAAClB,MAAM;IAAA,OAAKA,MAAM,CAACY,IAAI,KAAKA,IAAI;EAAA,EAAC;EAEjE,IAAIK,KAAK,KAAK,CAAC,CAAC,EAAE,OAAO,CAACP,SAAS,EAAEA,SAAS,CAAC;EAE/C,IAAMS,iBAAiB,GAAG;IACxBJ,IAAI,EAAE,CAAC;IACPC,KAAK,EAAEC;EACT,CAAC;EACD,IAAMG,eAAe,GAAG;IACtBL,IAAI,EAAEE,KAAK;IACXD,KAAK,EAAEnB,OAAO,CAACQ,MAAM,GAAG;EAC1B,CAAC;EACD,IAAMgB,YAAY,GAAGxB,OAAO,CAACyB,KAAK,CAACH,iBAAiB,CAACV,IAAI,CAAC,EAAEW,eAAe,CAACX,IAAI,CAAC,CAAC;EAElF,IAAIY,YAAY,CAAChB,MAAM,GAAG,CAAC,EAAE,OAAO,CAACI,IAAI,EAAE,CAAC,CAAC;EAE7C,IAAMc,IAAI,GAAGF,YAAY,CAACG,GAAG,CAAC,UAACxB,MAAM;IAAA,gBAAAM,MAAA,CAAcN,MAAM,CAACY,IAAI;EAAA,CAAS,CAAC;EACxE,OAAO,CAACH,IAAI,EAAEc,IAAI,CAAClB,MAAM,KAAK,CAAC,GAAGkB,IAAI,CAAC,CAAC,CAAC,WAAAjB,MAAA,CAAWiB,IAAI,CAACE,IAAI,CAAC,KAAK,CAAC,MAAG,CAAC;AAC1E,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "Semrush DataTable Component",
-  "version": "3.7.28",
+  "version": "3.8.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",