@semcore/data-table 4.34.3 → 4.35.0

package/lib/es6/Head.js

@@ -17,6 +17,8 @@ import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
 import { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';
 import logger from '@semcore/utils/lib/logger';
 import { setRef } from '@semcore/utils/lib/ref';
+import cssToIntDefault from '@semcore/utils/lib/cssToIntDefault';
+export var SORT_ICON_WIDTH = 20;
 var SORTING_ICON = {
   desc: SortDesc,
   asc: SortAsc
@@ -39,6 +41,8 @@ var Head = /*#__PURE__*/function (_Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "columns", []);
+    _defineProperty(_assertThisInitialized(_this), "sortWrapperRefs", new Map());
+    _defineProperty(_assertThisInitialized(_this), "defaultMinWidths", new Map());
     _defineProperty(_assertThisInitialized(_this), "bindHandlerSortClick", function (name) {
       return function (event) {
         _this.asProps.$onSortClick(name, event);
@@ -52,14 +56,60 @@ var Head = /*#__PURE__*/function (_Component) {
         }
       };
     });
-    _defineProperty(_assertThisInitialized(_this), "refColumn", function (props) {
+    _defineProperty(_assertThisInitialized(_this), "makeSortRefHandler", function (active) {
       return function (ref) {
-        setRef(props.ref, ref);
-        if (props.forwardRef) {
-          setRef(props.forwardRef, ref);
+        if (ref) {
+          _this.sortWrapperRefs.set(ref, active);
         }
       };
     });
+    _defineProperty(_assertThisInitialized(_this), "makeColumnRefHandler", function (column) {
+      return function (ref) {
+        setRef(column.props.ref, ref);
+        if (column.props.forwardRef) {
+          setRef(column.props.forwardRef, ref);
+        }
+        if (ref && ref.getAttribute('scope') === 'col') {
+          _this.calculateMinWidth(ref, column);
+        }
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "calculateMinWidth", function (node, column) {
+      if (!_this.defaultMinWidths.has(node) && (column.props.wMin || column.props.wMax || column.props.w)) {
+        var computedStyle = window.getComputedStyle(node);
+        _this.defaultMinWidths.set(node, cssToIntDefault(computedStyle.getPropertyValue('width')));
+      }
+      if (column.active) {
+        var _this$defaultMinWidth;
+        var clonedColumn = document.createElement('div');
+        var _computedStyle = window.getComputedStyle(node);
+        node.childNodes.forEach(function (node) {
+          if (!_this.sortWrapperRefs.get(node)) {
+            clonedColumn.append(node.cloneNode(true));
+          }
+        });
+        clonedColumn.style.setProperty('visibility', 'hidden', 'important');
+        var styles = ['display', 'flex', 'margin', 'padding', 'background', 'font-style', 'font-width', 'font-size', 'font-weight'];
+        styles.forEach(function (key) {
+          clonedColumn.style.setProperty(key, _computedStyle.getPropertyValue(key), _computedStyle.getPropertyPriority(key));
+        });
+        clonedColumn.style.setProperty('width', 'fit-content', 'important');
+        document.body.appendChild(clonedColumn);
+        var computedWidth = Math.floor(clonedColumn.getBoundingClientRect().width);
+        document.body.removeChild(clonedColumn);
+        var defaultNodeWidth = (_this$defaultMinWidth = _this.defaultMinWidths.get(node)) !== null && _this$defaultMinWidth !== void 0 ? _this$defaultMinWidth : 0;
+        if (computedWidth >= defaultNodeWidth) {
+          node.style.setProperty('min-width', defaultNodeWidth + SORT_ICON_WIDTH + 'px');
+        } else {
+          var freeSpace = defaultNodeWidth - computedWidth;
+          if (freeSpace < SORT_ICON_WIDTH) {
+            node.style.setProperty('min-width', computedWidth + SORT_ICON_WIDTH + 'px');
+          }
+        }
+      } else if (_this.defaultMinWidths.has(node)) {
+        node.style.setProperty('min-width', _this.defaultMinWidths.get(node) + 'px');
+      }
+    });
     return _this;
   }
   _createClass(Head, [{
@@ -115,7 +165,7 @@ var Head = /*#__PURE__*/function (_Component) {
         "tabIndex": column.sortable ? 0 : undefined,
         "__excludeProps": ['hidden']
       }, column.props), {}, {
-        "ref": this.refColumn(column.props),
+        "ref": this.makeColumnRefHandler(column),
         "onClick": callAllEventHandlers(column.props.onClick, column.sortable ? this.bindHandlerSortClick(column.name) : undefined),
         "onKeyDown": callAllEventHandlers(column.props.onKeyDown, column.sortable ? this.bindHandlerKeyDown(column.name) : undefined),
         "style": style,
@@ -128,7 +178,9 @@ var Head = /*#__PURE__*/function (_Component) {
         "active": column.active,
         "borderLeft": column.borderLeft,
         "borderRight": column.borderRight
-      }), /*#__PURE__*/React.createElement("div", _ref2.cn("div", {}), column.props.children)), /*#__PURE__*/React.createElement(SHead, _ref2.cn("SHead", {}), this.renderColumns(column.columns, 100 / cSize))) : /*#__PURE__*/React.createElement(React.Fragment, null, column.props.children, column.sortable ? /*#__PURE__*/React.createElement(SSortWrapper, _ref2.cn("SSortWrapper", {}), /*#__PURE__*/React.createElement(SSortIcon, _ref2.cn("SSortIcon", {
+      }), /*#__PURE__*/React.createElement("div", _ref2.cn("div", {}), column.props.children)), /*#__PURE__*/React.createElement(SHead, _ref2.cn("SHead", {}), this.renderColumns(column.columns, 100 / cSize))) : /*#__PURE__*/React.createElement(React.Fragment, null, column.props.children, column.sortable ? /*#__PURE__*/React.createElement(SSortWrapper, _ref2.cn("SSortWrapper", {
+        "ref": this.makeSortRefHandler(column.active)
+      }), /*#__PURE__*/React.createElement(SSortIcon, _ref2.cn("SSortIcon", {
         "active": column.active
       }))) : null));
     }
@@ -147,7 +199,7 @@ var Head = /*#__PURE__*/function (_Component) {
         $scrollRef = _this$asProps2.$scrollRef,
         sticky = _this$asProps2.sticky,
         withScrollBar = _this$asProps2.withScrollBar,
-        hidden = _this$asProps2.hidden;
+        animationsDisabled = _this$asProps2.animationsDisabled;
       this.columns = flattenColumns(columnsChildren);
       var _getScrollOffsetValue = getScrollOffsetValue(this.columns),
         _getScrollOffsetValue2 = _slicedToArray(_getScrollOffsetValue, 2),
@@ -155,7 +207,8 @@ var Head = /*#__PURE__*/function (_Component) {
         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
+        "sticky": sticky,
+        "animationsDisabled": animationsDisabled
       }), /*#__PURE__*/React.createElement(ScrollArea, _ref3.cn("ScrollArea", {
         "leftOffset": offsetLeftSum,
         "rightOffset": offsetRightSum,

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","displayContents","display","Head","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","name","event","asProps","$onSortClick","key","preventDefault","props","ref","forwardRef","_createClass","value","renderColumns","columns","width","_this2","map","column","renderColumn","_ref2","_column$columns","_this$asProps","styles","use","hidden","uid","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","withScrollBar","_getScrollOffsetValue","_getScrollOffsetValue2","offsetLeftSum","offsetRightSum","warn","displayName","Container","role","tabIndex","zIndex","_assignProps","Boolean","Bar","orientation","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';\n\nconst SORTING_ICON = {\n  desc: SortDesc,\n  asc: SortAsc,\n} as const;\nconst ariaSort = {\n  desc: 'descending',\n  asc: 'ascending',\n} as const;\nconst displayContents = { display: 'contents' };\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  ['data-ui-name']: string;\n  uid?: string;\n  withScrollBar?: boolean;\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.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\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, uid } = this.asProps;\n    const SColumn = Flex as any;\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        scope={isGroup ? 'colgroup' : 'col'}\n        key={column.name}\n        id={`igc-table-${uid}-${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 : undefined}\n        __excludeProps={['hidden']}\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 as any;\n    const {\n      Children,\n      styles,\n      columnsChildren,\n      onResize,\n      $scrollRef,\n      sticky,\n      withScrollBar,\n      hidden,\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}>\n        <ScrollArea\n          leftOffset={offsetLeftSum}\n          rightOffset={offsetRightSum}\n          shadow\n          onResize={onResize}\n        >\n          <ScrollArea.Container ref={$scrollRef} role='rowgroup' tabIndex={-1} zIndex={2}>\n            <SHead render={Box} role='row' aria-rowindex='1' __excludeProps={['hidden']}>\n              {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n            </SHead>\n          </ScrollArea.Container>\n          {Boolean(withScrollBar) && (\n            <div style={displayContents} role='rowgroup'>\n              <div style={displayContents} role='row'>\n                <div style={displayContents} role='cell'>\n                  <ScrollArea.Bar orientation='horizontal' />\n                </div>\n              </div>\n            </div>\n          )}\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","cssToIntDefault","SORT_ICON_WIDTH","SORTING_ICON","desc","asc","ariaSort","displayContents","display","Head","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","Map","name","event","asProps","$onSortClick","key","preventDefault","active","ref","sortWrapperRefs","set","column","props","forwardRef","getAttribute","calculateMinWidth","node","defaultMinWidths","has","wMin","wMax","w","computedStyle","window","getComputedStyle","getPropertyValue","_this$defaultMinWidth","clonedColumn","document","createElement","childNodes","forEach","get","append","cloneNode","style","setProperty","styles","getPropertyPriority","body","appendChild","computedWidth","Math","floor","getBoundingClientRect","width","removeChild","defaultNodeWidth","freeSpace","_createClass","value","renderColumns","columns","_this2","map","renderColumn","_ref2","_column$columns","_this$asProps","use","hidden","uid","SColumn","SHead","SSortWrapper","SSortIcon","sortDirection","ariaSortValue","sortable","undefined","isGroup","cSize","_getFixedStyle","_getFixedStyle2","_slicedToArray","_objectSpread","flexBasis","flex","setVar","varWidth","cn","fixed","resizable","borderLeft","borderRight","makeColumnRefHandler","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","Fragment","children","makeSortRefHandler","render","_ref","_ref3","SHeadWrapper","_this$asProps2","Children","columnsChildren","onResize","$scrollRef","sticky","withScrollBar","animationsDisabled","_getScrollOffsetValue","_getScrollOffsetValue2","offsetLeftSum","offsetRightSum","warn","displayName","Container","role","tabIndex","zIndex","_assignProps","Boolean","Bar","orientation","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 cssToIntDefault from '@semcore/utils/lib/cssToIntDefault';\n\nexport const SORT_ICON_WIDTH = 20;\n\nconst SORTING_ICON = {\n  desc: SortDesc,\n  asc: SortAsc,\n} as const;\nconst ariaSort = {\n  desc: 'descending',\n  asc: 'ascending',\n} as const;\nconst displayContents = { display: 'contents' };\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  ['data-ui-name']: string;\n  uid?: string;\n  withScrollBar?: boolean;\n  animationsDisabled?: boolean;\n};\n\nclass Head extends Component<AsProps> {\n  columns: Column[] = [];\n\n  static displayName: string;\n\n  sortWrapperRefs = new Map<Node, boolean>();\n  defaultMinWidths = new Map<Node, number>();\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.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.asProps.$onSortClick(name, event);\n    }\n  };\n\n  makeSortRefHandler = (active: boolean) => (ref: HTMLElement | null) => {\n    if (ref) {\n      this.sortWrapperRefs.set(ref, active);\n    }\n  };\n\n  makeColumnRefHandler = (column: Column) => (ref: HTMLElement | null) => {\n    setRef(column.props.ref, ref);\n    if (column.props.forwardRef) {\n      setRef(column.props.forwardRef, ref);\n    }\n\n    if (ref && ref.getAttribute('scope') === 'col') {\n      this.calculateMinWidth(ref, column);\n    }\n  };\n\n  calculateMinWidth = (node: HTMLElement, column: Column) => {\n    if (\n      !this.defaultMinWidths.has(node) &&\n      (column.props.wMin || column.props.wMax || column.props.w)\n    ) {\n      const computedStyle = window.getComputedStyle(node);\n\n      this.defaultMinWidths.set(node, cssToIntDefault(computedStyle.getPropertyValue('width')));\n    }\n\n    if (column.active) {\n      const clonedColumn = document.createElement('div');\n      const computedStyle = window.getComputedStyle(node);\n\n      node.childNodes.forEach((node) => {\n        if (!this.sortWrapperRefs.get(node)) {\n          clonedColumn.append(node.cloneNode(true));\n        }\n      });\n\n      clonedColumn.style.setProperty('visibility', 'hidden', 'important');\n\n      const styles = [\n        'display',\n        'flex',\n        'margin',\n        'padding',\n        'background',\n        'font-style',\n        'font-width',\n        'font-size',\n        'font-weight',\n      ];\n\n      styles.forEach((key) => {\n        clonedColumn.style.setProperty(\n          key,\n          computedStyle.getPropertyValue(key),\n          computedStyle.getPropertyPriority(key),\n        );\n      });\n\n      clonedColumn.style.setProperty('width', 'fit-content', 'important');\n\n      document.body.appendChild(clonedColumn);\n\n      const computedWidth = Math.floor(clonedColumn.getBoundingClientRect().width);\n\n      document.body.removeChild(clonedColumn);\n\n      const defaultNodeWidth = this.defaultMinWidths.get(node) ?? 0;\n\n      if (computedWidth >= defaultNodeWidth) {\n        node.style.setProperty('min-width', defaultNodeWidth + SORT_ICON_WIDTH + 'px');\n      } else {\n        const freeSpace = defaultNodeWidth - computedWidth;\n\n        if (freeSpace < SORT_ICON_WIDTH) {\n          node.style.setProperty('min-width', computedWidth + SORT_ICON_WIDTH + 'px');\n        }\n      }\n    } else if (this.defaultMinWidths.has(node)) {\n      node.style.setProperty('min-width', this.defaultMinWidths.get(node) + 'px');\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, uid } = this.asProps;\n    const SColumn = Flex as any;\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        scope={isGroup ? 'colgroup' : 'col'}\n        key={column.name}\n        id={`igc-table-${uid}-${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 : undefined}\n        __excludeProps={['hidden']}\n        {...column.props}\n        ref={this.makeColumnRefHandler(column)}\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 ref={this.makeSortRefHandler(column.active)}>\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 as any;\n    const {\n      Children,\n      styles,\n      columnsChildren,\n      onResize,\n      $scrollRef,\n      sticky,\n      withScrollBar,\n      animationsDisabled,\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} animationsDisabled={animationsDisabled}>\n        <ScrollArea\n          leftOffset={offsetLeftSum}\n          rightOffset={offsetRightSum}\n          shadow\n          onResize={onResize}\n        >\n          <ScrollArea.Container ref={$scrollRef} role='rowgroup' tabIndex={-1} zIndex={2}>\n            <SHead render={Box} role='row' aria-rowindex='1' __excludeProps={['hidden']}>\n              {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n            </SHead>\n          </ScrollArea.Container>\n          {Boolean(withScrollBar) && (\n            <div style={displayContents} role='rowgroup'>\n              <div style={displayContents} role='row'>\n                <div style={displayContents} role='cell'>\n                  <ScrollArea.Bar orientation='horizontal' />\n                </div>\n              </div>\n            </div>\n          )}\n        </ScrollArea>\n        {Children.origin}\n      </SHeadWrapper>,\n    );\n  }\n}\n\nexport default Head;\n"],"mappings":"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"}

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

@@ -13,6 +13,12 @@ SHeadWrapper {
   position: relative;
 }
 
+SHeadWrapper[animationsDisabled] {
+  SColumn {
+    transition: none;
+  }
+}
+
 SHeadWrapper[sticky] {
   position: sticky;
   top: 0;
@@ -41,6 +47,8 @@ SColumn {
     outline: none;
     box-shadow: inset var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
   }
+
+  transition: width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out, min-width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out, max-width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
 }
 
 SColumn[hidden] {
@@ -90,11 +98,11 @@ SColumn[sortable] {
     background-color: var(--intergalactic-table-th-primary-cell-hover, #e0e1e9);
   }
 
-  &[justifyContent='right'] SSortWrapper {
-    position: absolute;
-    right: calc(var(--intergalactic-spacing-1x, 4px) + 16px);
+  &[justifyContent='right'][active] SSortWrapper {
+    position: relative;
   }
-  &[justifyContent='right']:hover SSortWrapper, &[justifyContent='right']:focus SSortWrapper, &[justifyContent='right'][active] SSortWrapper {
+  &[justifyContent='right'][active='false']:hover SSortWrapper, &[justifyContent='right'][active='false']:focus SSortWrapper {
+    position: absolute;
     right: var(--intergalactic-spacing-3x, 12px);
   }
 
@@ -161,12 +169,12 @@ SCell[borderRight] {
 }
 
 SSortWrapper {
-  flex-shrink: 99999;
+  flex-shrink: 1;
   position: relative;
   flex-basis: 0;
   min-height: 16px;
   opacity: 0;
-  transition: all calc(var(--intergalactic-duration-medium, 300) * 1ms) ease;
+  transition: all calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
 }
 
 SSortWrapper:before {
@@ -322,6 +330,10 @@ SRow[positioned] {
   position: absolute;
 }
 
+SBody[animationsDisabled] SCell {
+  transition: none;
+}
+
 SCell {
   display: flex;
   flex: 1;
@@ -334,6 +346,7 @@ SCell {
   overflow: hidden;
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
+  transition: width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
 }
 
 SCell[use='primary'] {

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    alignItems: Property.AlignItems;\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: Property.BorderLeft;\n    borderRight: Property.BorderLeft;\n  }> &\n    Props;\n  columns: Column[];\n  parentColumns: 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"}
+{"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';\nimport { FlexProps } from '@semcore/flex-box';\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  } & FlexProps &\n    Partial<{\n      flex: Property.Flex;\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      resizable: boolean;\n      sortable: boolean | SortDirection;\n      sortDirection: SortDirection;\n      vBorders: boolean;\n      borderLeft: Property.BorderLeft;\n      borderRight: Property.BorderLeft;\n    }> &\n    Props;\n  columns: Column[];\n  parentColumns: 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/types/Body.d.ts

@@ -25,6 +25,7 @@ type AsProps = {
     }) => React.ReactNode;
     disabledScroll?: boolean;
     uid?: string;
+    animationsDisabled?: boolean;
 };
 type State = {
     rowHeight: number | undefined;

package/lib/types/DataTable.d.ts

@@ -60,6 +60,8 @@ export type DataTableHeadProps = BoxProps & {
     disabledScroll?: boolean;
     /** Enable scroll bar element in header */
     withScrollBar?: boolean;
+    /** Disables column width change animation **/
+    animationsDisabled?: boolean;
 };
 /** @deprecated */
 export interface IDataTableColumnProps extends DataTableColumnProps, UnknownProperties {
@@ -112,6 +114,8 @@ export type DataTableBodyProps = BoxProps & {
     onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;
     /** Disabled scroll */
     disabledScroll?: boolean;
+    /** Disables column width change animation **/
+    animationsDisabled?: boolean;
 };
 /** @deprecated */
 export interface IDataTableRowProps extends DataTableRowProps, UnknownProperties {

package/lib/types/Head.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Component } from '@semcore/core';
 import type { Column } from './types';
+export declare const SORT_ICON_WIDTH = 20;
 type AsProps = {
     $onSortClick: (name: string, event: React.MouseEvent | React.KeyboardEvent) => void;
     $scrollRef: (instance: unknown) => void;
@@ -11,13 +12,18 @@ type AsProps = {
     ['data-ui-name']: string;
     uid?: string;
     withScrollBar?: boolean;
+    animationsDisabled?: boolean;
 };
 declare class Head extends Component<AsProps> {
     columns: Column[];
     static displayName: string;
+    sortWrapperRefs: Map<Node, boolean>;
+    defaultMinWidths: Map<Node, number>;
     bindHandlerSortClick: (name: string) => (event: React.MouseEvent) => void;
     bindHandlerKeyDown: (name: string) => (event: React.KeyboardEvent) => void;
-    refColumn: (props: Column['props']) => (ref: HTMLElement) => void;
+    makeSortRefHandler: (active: boolean) => (ref: HTMLElement | null) => void;
+    makeColumnRefHandler: (column: Column) => (ref: HTMLElement | null) => void;
+    calculateMinWidth: (node: HTMLElement, column: Column) => void;
     renderColumns(columns: Column[], width: number): React.ReactNode[];
     renderColumn(column: Column, width: number): React.ReactNode;
     render(): React.ReactNode;

package/lib/types/types.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ROW_GROUP } from './DataTable';
 import { Property } from 'csstype';
+import { FlexProps } from '@semcore/flex-box';
 export type PseudoChildPropsGetter = (props: {
     [propName: string]: unknown;
 }, rowData: {
@@ -34,16 +35,13 @@ export type Column<Props extends {
     props: {
         name: string;
         ref: React.RefObject<HTMLElement>;
-    } & Partial<{
+    } & FlexProps & Partial<{
         flex: Property.Flex;
-        justifyContent: Property.JustifyContent;
-        alignItems: Property.AlignItems;
         onClick: (event: React.MouseEvent) => void;
         onKeyDown: (event: React.KeyboardEvent) => void;
         forwardRef: React.Ref<HTMLElement>;
         style: React.CSSProperties;
         fixed: 'left' | 'right';
-        children: React.ReactNode[];
         resizable: boolean;
         sortable: boolean | SortDirection;
         sortDirection: SortDirection;

package/package.json

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