@semcore/data-table 16.0.0-prerelease.13 → 16.0.0-prerelease.15

package/lib/es6/components/DataTable/DataTable.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.types.js","names":[],"sources":["../../../../src/components/DataTable/DataTable.types.ts"],"sourcesContent":["import { Intergalactic } from '@semcore/core';\nimport { BoxProps } from '@semcore/base-components';\n\n/**\n * Datatable must have an accessible name (aria-table-name).\n * It should describe table content.\n */\ntype DataTableAriaProps = Intergalactic.RequireAtLeastOne<{\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  title?: string;\n}>;\n\nexport type SortDirection = 'asc' | 'desc';\nexport type DataTableSort<Column = string> = [sortBy: Column, sortDirection: SortDirection];\n\nexport type DTKey = string | symbol;\nexport type DTValue = string | number | boolean;\nexport type DataTableData = Array<Record<DTKey, any>>;\n\nexport type DTUse = 'primary' | 'secondary';\n\ntype Sizes = Pick<BoxProps, 'w' | 'wMax' | 'wMin' | 'h' | 'hMax' | 'hMin'>;\n\nexport type DataTableProps = DataTableAriaProps &\n  Sizes & {\n    /** Data for table */\n    data: DataTableData;\n    /** Count of total rows if table using virtual scroll. Needs for accessibility */\n    totalRows?: number;\n\n    /** Table theme according to visual hierarchy on the page\n     * @default primary\n     * */\n    use?: DTUse;\n\n    /** Active sort object */\n    sort?: DataTableSort;\n    /** Handler call when request will change sort */\n    onSortChange?: (sort: DataTableSort, e?: React.SyntheticEvent) => void;\n\n    /**\n     *\n     * @default auto\n     */\n    defaultGridTemplateColumnWidth?: 'auto' | '1fr';\n\n    /**\n     * Flag for compact view (less paddings)\n     */\n    compact?: boolean;\n\n    /**\n     * Flag for showing spinner on table body\n     */\n    loading?: boolean;\n\n    children?: any;\n  };\n\nexport type RowIndex = number;\nexport type ColIndex = number;\n"],"mappings":""}

package/lib/es6/components/DataTable/dataTable.shadow.css

@@ -0,0 +1,14 @@
+SDataTable {
+  display: grid;
+  position: relative;
+  align-items: start;
+  min-width: fit-content;
+}
+
+SDataTable[gridTemplateColumns] {
+  grid-template-columns: var(--gridTemplateColumns);
+}
+
+SDataTable[gridTemplateAreas] {
+  grid-template-areas: var(--gridTemplateAreas);
+}

package/lib/es6/components/Head/Column.js

@@ -0,0 +1,270 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps } from "@semcore/core";
+import * as React from 'react';
+import { Component, Root, sstyled } from '@semcore/core';
+import { Flex } from '@semcore/base-components';
+import SortDesc from '@semcore/icon/SortDesc/m';
+import SortAsc from '@semcore/icon/SortAsc/m';
+/*__reshadow-styles__:"./style.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SHead_182z1_gg_{display:contents}.___SHead_182z1_gg_.__sticky_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:0;z-index:1}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{top:0}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroupContainer_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:40px;z-index:1}.___SHead_182z1_gg_.__compact_182z1_gg_ .___SColumn_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_182z1_gg_,.___SGroup_182z1_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;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}.___SGroup_182z1_gg_._use_primary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-3x, 12px);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_182z1_gg_._use_secondary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-2x, 8px);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SGroup_182z1_gg_:has(.___SColumn_182z1_gg_.__visibleSort_182z1_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_left_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_left_182z1_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_right_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_right_182z1_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_,.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before,.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before{display:flex;opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_{display:flex;opacity:1}.___SColumn_182z1_gg_.__gridArea_182z1_gg_,.___SGroupTitle_182z1_gg_.__gridArea_182z1_gg_,.___SGroup_182z1_gg_.__gridArea_182z1_gg_{grid-area:var(--gridArea_182z1)}.___SHead_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_ .___SGroup_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{position:sticky;z-index:2}@media (hover:hover){.___SColumn_182z1_gg_.__sortable_182z1_gg_:hover{cursor:pointer}}.___SSortWrapper_182z1_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_182z1_gg_,.___SSortWrapper_182z1_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_182z1_gg_:before{content:\"\";top:0;width:20px;height:100%}.___SSortButton_182z1_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}" /*__inner_css_end__*/, "182z1_gg_") /*__reshadow_css_end__*/, {
+  "__SHead": "___SHead_182z1_gg_",
+  "_sticky": "__sticky_182z1_gg_",
+  "__SColumn": "___SColumn_182z1_gg_",
+  "__SGroup": "___SGroup_182z1_gg_",
+  "__SGroupContainer": "___SGroupContainer_182z1_gg_",
+  "_compact": "__compact_182z1_gg_",
+  "_use_primary": "_use_primary_182z1_gg_",
+  "_use_secondary": "_use_secondary_182z1_gg_",
+  "_visibleSort": "__visibleSort_182z1_gg_",
+  "_borders_both": "_borders_both_182z1_gg_",
+  "_borders_left": "_borders_left_182z1_gg_",
+  "_borders_right": "_borders_right_182z1_gg_",
+  "_gridArea": "__gridArea_182z1_gg_",
+  "__SGroupTitle": "___SGroupTitle_182z1_gg_",
+  "--gridArea": "--gridArea_182z1",
+  "_fixed": "__fixed_182z1_gg_",
+  "_sortable": "__sortable_182z1_gg_",
+  "__SSortWrapper": "___SSortWrapper_182z1_gg_",
+  "__SSortButton": "___SSortButton_182z1_gg_"
+});
+import { ButtonLink } from '@semcore/button';
+import { getFocusableIn } from '@semcore/core/lib/utils/focus-lock/getFocusableIn';
+import { SORT_ICON_WIDTH } from '../../Head';
+import canUseDOM from '@semcore/core/lib/utils/canUseDOM';
+var SORTING_ICON = {
+  desc: SortDesc,
+  asc: SortAsc
+};
+var ARIA_SORT = {
+  desc: 'descending',
+  asc: 'ascending'
+};
+var DEFAULT_DIRECTION = 'desc';
+var reversedSortDirection = {
+  desc: 'asc',
+  asc: 'desc'
+};
+export var Column = /*#__PURE__*/function (_Component) {
+  _inherits(Column, _Component);
+  var _super = _createSuper(Column);
+  function Column() {
+    var _this;
+    _classCallCheck(this, Column);
+    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), "lockedCell", [null, false]);
+    _defineProperty(_assertThisInitialized(_this), "columnRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "sortWrapperRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      sortVisible: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "calculateActiveColumnMinWidth", function () {
+      var node = _this.columnRef.current;
+      if (node) {
+        var _this$columnRef$curre, _this$columnRef$curre2;
+        var clonedColumn = document.createElement('div');
+        var computedStyle = window.getComputedStyle(node);
+        node.childNodes.forEach(function (node) {
+          if (_this.sortWrapperRef.current !== 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.ceil(clonedColumn.getBoundingClientRect().width);
+        document.body.removeChild(clonedColumn);
+        var defaultNodeWidth = (_this$columnRef$curre = (_this$columnRef$curre2 = _this.columnRef.current) === null || _this$columnRef$curre2 === void 0 ? void 0 : _this$columnRef$curre2.clientWidth) !== null && _this$columnRef$curre !== void 0 ? _this$columnRef$curre : 0;
+        if (computedWidth >= defaultNodeWidth) {
+          return defaultNodeWidth + SORT_ICON_WIDTH;
+        } else {
+          var freeSpace = defaultNodeWidth - computedWidth;
+          if (freeSpace < SORT_ICON_WIDTH) {
+            return computedWidth + SORT_ICON_WIDTH;
+          }
+        }
+      }
+      return null;
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function () {
+      _this.setState({
+        sortVisible: true
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function () {
+      _this.setState({
+        sortVisible: false
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleBlur", function () {
+      _this.setState({
+        sortVisible: false
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleSortClick", function (e) {
+      var _this$asProps = _this.asProps,
+        sort = _this$asProps.sort,
+        onSortChange = _this$asProps.onSortChange,
+        name = _this$asProps.name;
+      if (sort && onSortChange) {
+        var sortDirection = sort[0] === name ? reversedSortDirection[sort[1]] : DEFAULT_DIRECTION;
+        onSortChange([name, sortDirection], e);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
+      if (e.currentTarget === _this.lockedCell[0]) {
+        var focusableChildren = Array.from(_this.lockedCell[0].children).flatMap(function (node) {
+          return getFocusableIn(node);
+        });
+        if (_this.lockedCell[1]) {
+          if (e.key === 'Escape') {
+            var _this$lockedCell$;
+            (_this$lockedCell$ = _this.lockedCell[0]) === null || _this$lockedCell$ === void 0 ? void 0 : _this$lockedCell$.focus();
+            _this.lockedCell[1] = false;
+          }
+          if (e.key.startsWith('Arrow')) {
+            e.stopPropagation();
+          }
+          if (e.key === 'Tab') {
+            if (e.target === focusableChildren[0] && e.shiftKey) {
+              var _focusableChildren;
+              (_focusableChildren = focusableChildren[focusableChildren.length - 1]) === null || _focusableChildren === void 0 ? void 0 : _focusableChildren.focus();
+              e.preventDefault();
+            } else if (e.target === focusableChildren[focusableChildren.length - 1] && !e.shiftKey) {
+              var _focusableChildren$;
+              (_focusableChildren$ = focusableChildren[0]) === null || _focusableChildren$ === void 0 ? void 0 : _focusableChildren$.focus();
+              e.preventDefault();
+            }
+          }
+        } else if (e.key === 'Enter') {
+          var _focusableChildren$2;
+          _this.lockedCell[1] = true;
+          (_focusableChildren$2 = focusableChildren[0]) === null || _focusableChildren$2 === void 0 ? void 0 : _focusableChildren$2.focus();
+        } else if (e.key === 'Tab') {
+          var _this$lockedCell$2;
+          (_this$lockedCell$2 = _this.lockedCell[0]) === null || _this$lockedCell$2 === void 0 ? void 0 : _this$lockedCell$2.setAttribute('inert', '');
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleFocusCell", function (e) {
+      var cellElement = e.currentTarget;
+      var target = e.target;
+      _this.setState({
+        sortVisible: true
+      }, function () {
+        if (target === cellElement) {
+          var focusableChildren = Array.from(cellElement.children).flatMap(function (node) {
+            return getFocusableIn(node);
+          });
+          if (focusableChildren.length === 1) {
+            focusableChildren[0].focus();
+          } else if (focusableChildren.length > 1) {
+            _this.lockedCell = [cellElement, false];
+          }
+        }
+      });
+    });
+    return _this;
+  }
+  _createClass(Column, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _prevProps$sort, _this$asProps$sort;
+      if (this.asProps.changeSortSize && canUseDOM() && ((_prevProps$sort = prevProps.sort) === null || _prevProps$sort === void 0 ? void 0 : _prevProps$sort[0]) !== ((_this$asProps$sort = this.asProps.sort) === null || _this$asProps$sort === void 0 ? void 0 : _this$asProps$sort[0])) {
+        var _this$asProps$sort2, _this$asProps$sort3;
+        var _this$asProps2 = this.asProps,
+          tableRef = _this$asProps2.tableRef,
+          gridTemplateColumns = _this$asProps2.gridTemplateColumns,
+          columnIndex = _this$asProps2.columnIndex;
+        if (((_this$asProps$sort2 = this.asProps.sort) === null || _this$asProps$sort2 === void 0 ? void 0 : _this$asProps$sort2[0]) === this.asProps.name) {
+          var newWidth = this.calculateActiveColumnMinWidth();
+          setTimeout(function () {
+            if (tableRef.current && newWidth !== null) {
+              tableRef.current.style.setProperty('grid-template-columns', gridTemplateColumns.map(function (gtcWidth, index) {
+                if (index === columnIndex) {
+                  return "".concat(newWidth, "px");
+                }
+                return gtcWidth;
+              }).join(' '));
+            }
+          });
+        } else if (((_this$asProps$sort3 = this.asProps.sort) === null || _this$asProps$sort3 === void 0 ? void 0 : _this$asProps$sort3[0]) !== this.asProps.name) {
+          setTimeout(function () {
+            if (tableRef.current) {
+              tableRef.current.style.setProperty('grid-template-columns', gridTemplateColumns.join(' '));
+            }
+          });
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref2;
+      var SColumn = Flex;
+      var SSortWrapper = 'div';
+      var SSortButton = ButtonLink;
+      var _this$asProps3 = this.asProps,
+        styles = _this$asProps3.styles,
+        sortable = _this$asProps3.sortable,
+        sort = _this$asProps3.sort,
+        uid = _this$asProps3.uid,
+        name = _this$asProps3.name,
+        parent = _this$asProps3.parent,
+        sortableColumnDescribeId = _this$asProps3.sortableColumnDescribeId;
+      var SSortIcon = sort ? SORTING_ICON[sort[1]] : SORTING_ICON['asc'];
+      var isSorted = (sort === null || sort === void 0 ? void 0 : sort[0]) === name;
+      var visibleSort = sortable && (this.state.sortVisible || isSorted);
+      var ariaDescribedBy = [];
+      if (isSorted) {
+        ariaDescribedBy.push(sortableColumnDescribeId);
+      }
+      if (parent) {
+        ariaDescribedBy.push("igc-table-".concat(uid, "-").concat(parent.name, "-group"));
+      }
+      var ariaSortValue = sort !== null && sort !== void 0 && sort[1] ? ARIA_SORT[sort[1]] : undefined;
+      return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SColumn, _ref2.cn("SColumn", _objectSpread({}, _assignProps({
+        "ref": this.columnRef,
+        "role": 'columnheader',
+        "tabIndex": -1,
+        "onMouseEnter": this.handleMouseEnter,
+        "onMouseLeave": this.handleMouseLeave,
+        "onFocus": this.handleFocusCell,
+        "onBlur": this.handleBlur,
+        "onKeyDown": this.handleKeyDown,
+        "visibleSort": visibleSort,
+        "isSorted": isSorted,
+        "innerOutline": true,
+        "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined,
+        "aria-sort": ariaSortValue,
+        "onClick": this.handleSortClick
+      }, _ref))), this.asProps.children, sortable && /*#__PURE__*/React.createElement(SSortWrapper, _ref2.cn("SSortWrapper", {
+        "ref": this.sortWrapperRef
+      }), /*#__PURE__*/React.createElement(SSortButton, _ref2.cn("SSortButton", {
+        "onClick": this.handleSortClick,
+        "aria-label": ariaSortValue,
+        "color": '--intergalactic-icon-primary-neutral'
+      }), /*#__PURE__*/React.createElement(SSortButton.Addon, {
+        tag: SSortIcon
+      }))));
+    }
+  }]);
+  return Column;
+}(Component);
+_defineProperty(Column, "displayName", 'Column');
+_defineProperty(Column, "style", style);
+//# sourceMappingURL=Column.js.map

package/lib/es6/components/Head/Column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Column.js","names":["React","Component","Root","sstyled","Flex","SortDesc","SortAsc","style","_sstyled","insert","ButtonLink","getFocusableIn","SORT_ICON_WIDTH","canUseDOM","SORTING_ICON","desc","asc","ARIA_SORT","DEFAULT_DIRECTION","reversedSortDirection","Column","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","createRef","sortVisible","node","columnRef","current","_this$columnRef$curre","_this$columnRef$curre2","clonedColumn","document","createElement","computedStyle","window","getComputedStyle","childNodes","forEach","sortWrapperRef","append","cloneNode","setProperty","styles","key","getPropertyValue","getPropertyPriority","body","appendChild","computedWidth","Math","ceil","getBoundingClientRect","width","removeChild","defaultNodeWidth","clientWidth","freeSpace","setState","e","_this$asProps","asProps","sort","onSortChange","name","sortDirection","currentTarget","lockedCell","focusableChildren","from","children","flatMap","_this$lockedCell$","focus","startsWith","stopPropagation","target","shiftKey","_focusableChildren","preventDefault","_focusableChildren$","_focusableChildren$2","_this$lockedCell$2","setAttribute","cellElement","_createClass","value","componentDidUpdate","prevProps","_prevProps$sort","_this$asProps$sort","changeSortSize","_this$asProps$sort2","_this$asProps$sort3","_this$asProps2","tableRef","gridTemplateColumns","columnIndex","newWidth","calculateActiveColumnMinWidth","setTimeout","map","gtcWidth","index","join","render","_ref","_ref2","SColumn","SSortWrapper","SSortButton","_this$asProps3","sortable","uid","parent","sortableColumnDescribeId","SSortIcon","isSorted","visibleSort","state","ariaDescribedBy","push","ariaSortValue","undefined","cn","_objectSpread","_assignProps","handleMouseEnter","handleMouseLeave","handleFocusCell","handleBlur","handleKeyDown","handleSortClick","Addon","tag"],"sources":["../../../../src/components/Head/Column.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Component, Root, sstyled } from '@semcore/core';\nimport { ColumnPropsInner, DataTableColumnProps } from './Column.types';\nimport { Flex } from '@semcore/base-components';\nimport SortDesc from '@semcore/icon/SortDesc/m';\nimport SortAsc from '@semcore/icon/SortAsc/m';\n\nimport style from './style.shadow.css';\nimport { ButtonLink } from '@semcore/button';\nimport type { SortDirection } from '../DataTable/DataTable.types';\nimport { getFocusableIn } from '@semcore/core/lib/utils/focus-lock/getFocusableIn';\nimport { SORT_ICON_WIDTH } from '../../Head';\nimport canUseDOM from '@semcore/core/lib/utils/canUseDOM';\n\nconst SORTING_ICON = {\n  desc: SortDesc,\n  asc: SortAsc,\n} as const;\n\nconst ARIA_SORT = {\n  desc: 'descending',\n  asc: 'ascending',\n} as const;\n\nconst DEFAULT_DIRECTION = 'desc';\n\nconst reversedSortDirection: { [direction in SortDirection]: SortDirection } = {\n  desc: 'asc',\n  asc: 'desc',\n};\n\ntype State = {\n  sortVisible: boolean;\n};\n\nexport class Column extends Component<DataTableColumnProps, {}, {}, [], ColumnPropsInner> {\n  static displayName = 'Column';\n  static style = style;\n\n  lockedCell: [HTMLElement | null, boolean] = [null, false];\n\n  columnRef = React.createRef<HTMLDivElement>();\n  sortWrapperRef = React.createRef<HTMLDivElement>();\n\n  state: State = {\n    sortVisible: false,\n  };\n\n  componentDidUpdate(prevProps: DataTableColumnProps & ColumnPropsInner): void {\n    if (\n      this.asProps.changeSortSize &&\n      canUseDOM() &&\n      prevProps.sort?.[0] !== this.asProps.sort?.[0]\n    ) {\n      const { tableRef, gridTemplateColumns, columnIndex } = this.asProps;\n\n      if (this.asProps.sort?.[0] === this.asProps.name) {\n        const newWidth = this.calculateActiveColumnMinWidth();\n\n        setTimeout(() => {\n          if (tableRef.current && newWidth !== null) {\n            tableRef.current.style.setProperty(\n              'grid-template-columns',\n              gridTemplateColumns\n                .map((gtcWidth, index) => {\n                  if (index === columnIndex) {\n                    return `${newWidth}px`;\n                  }\n                  return gtcWidth;\n                })\n                .join(' '),\n            );\n          }\n        });\n      } else if (this.asProps.sort?.[0] !== this.asProps.name) {\n        setTimeout(() => {\n          if (tableRef.current) {\n            tableRef.current.style.setProperty(\n              'grid-template-columns',\n              gridTemplateColumns.join(' '),\n            );\n          }\n        });\n      }\n    }\n  }\n\n  calculateActiveColumnMinWidth = (): number | null => {\n    const node = this.columnRef.current;\n\n    if (node) {\n      const clonedColumn = document.createElement('div');\n      const computedStyle = window.getComputedStyle(node);\n\n      node.childNodes.forEach((node) => {\n        if (this.sortWrapperRef.current !== 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.ceil(clonedColumn.getBoundingClientRect().width);\n\n      document.body.removeChild(clonedColumn);\n\n      const defaultNodeWidth = this.columnRef.current?.clientWidth ?? 0;\n\n      if (computedWidth >= defaultNodeWidth) {\n        return defaultNodeWidth + SORT_ICON_WIDTH;\n      } else {\n        const freeSpace = defaultNodeWidth - computedWidth;\n\n        if (freeSpace < SORT_ICON_WIDTH) {\n          return computedWidth + SORT_ICON_WIDTH;\n        }\n      }\n    }\n\n    return null;\n  };\n\n  handleMouseEnter = () => {\n    this.setState({ sortVisible: true });\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ sortVisible: false });\n  };\n\n  handleBlur = () => {\n    this.setState({ sortVisible: false });\n  };\n\n  handleSortClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n    const { sort, onSortChange, name } = this.asProps;\n\n    if (sort && onSortChange) {\n      const sortDirection = sort[0] === name ? reversedSortDirection[sort[1]] : DEFAULT_DIRECTION;\n\n      onSortChange([name, sortDirection], e);\n    }\n  };\n\n  handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.currentTarget === this.lockedCell[0]) {\n      const focusableChildren = Array.from(this.lockedCell[0].children).flatMap((node) =>\n        getFocusableIn(node as HTMLElement),\n      );\n\n      if (this.lockedCell[1]) {\n        if (e.key === 'Escape') {\n          this.lockedCell[0]?.focus();\n          this.lockedCell[1] = false;\n        }\n        if (e.key.startsWith('Arrow')) {\n          e.stopPropagation();\n        }\n        if (e.key === 'Tab') {\n          if (e.target === focusableChildren[0] && e.shiftKey) {\n            focusableChildren[focusableChildren.length - 1]?.focus();\n            e.preventDefault();\n          } else if (e.target === focusableChildren[focusableChildren.length - 1] && !e.shiftKey) {\n            focusableChildren[0]?.focus();\n            e.preventDefault();\n          }\n        }\n      } else if (e.key === 'Enter') {\n        this.lockedCell[1] = true;\n        focusableChildren[0]?.focus();\n      } else if (e.key === 'Tab') {\n        this.lockedCell[0]?.setAttribute('inert', '');\n      }\n    }\n  };\n\n  handleFocusCell = (e: React.FocusEvent<HTMLElement, HTMLElement>) => {\n    const cellElement = e.currentTarget;\n    const target = e.target;\n\n    this.setState({ sortVisible: true }, () => {\n      if (target === cellElement) {\n        const focusableChildren = Array.from(cellElement.children).flatMap((node) =>\n          getFocusableIn(node as HTMLElement),\n        );\n\n        if (focusableChildren.length === 1) {\n          focusableChildren[0].focus();\n        } else if (focusableChildren.length > 1) {\n          this.lockedCell = [cellElement, false];\n        }\n      }\n    });\n  };\n\n  render() {\n    const SColumn = Root;\n    const SSortWrapper = 'div';\n    const SSortButton = ButtonLink;\n    const { styles, sortable, sort, uid, name, parent, sortableColumnDescribeId } = this.asProps;\n\n    const SSortIcon = sort ? SORTING_ICON[sort[1]] : SORTING_ICON['asc'];\n    const isSorted = sort?.[0] === name;\n    const visibleSort = sortable && (this.state.sortVisible || isSorted);\n\n    const ariaDescribedBy = [];\n    if (isSorted) {\n      ariaDescribedBy.push(sortableColumnDescribeId);\n    }\n    if (parent) {\n      ariaDescribedBy.push(`igc-table-${uid}-${parent.name}-group`);\n    }\n\n    const ariaSortValue = sort?.[1] ? ARIA_SORT[sort[1]] : undefined;\n\n    return sstyled(styles)(\n      <SColumn\n        render={Flex}\n        ref={this.columnRef}\n        role={'columnheader'}\n        tabIndex={-1}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onFocus={this.handleFocusCell}\n        onBlur={this.handleBlur}\n        onKeyDown={this.handleKeyDown}\n        visibleSort={visibleSort}\n        isSorted={isSorted}\n        innerOutline\n        aria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n        aria-sort={ariaSortValue}\n        onClick={this.handleSortClick}\n      >\n        {this.asProps.children}\n\n        {sortable && (\n          <SSortWrapper ref={this.sortWrapperRef}>\n            <SSortButton\n              onClick={this.handleSortClick}\n              aria-label={ariaSortValue}\n              color={'--intergalactic-icon-primary-neutral'}\n            >\n              <SSortButton.Addon tag={SSortIcon} />\n            </SSortButton>\n          </SSortWrapper>\n        )}\n      </SColumn>,\n    );\n  }\n}\n"],"mappings":"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"}

package/lib/es6/components/Head/Column.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Column.types.js.map

package/lib/es6/components/Head/Column.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Column.types.js","names":[],"sources":["../../../../src/components/Head/Column.types.ts"],"sourcesContent":["import { DataTableProps, DTUse } from '../DataTable/DataTable.types';\nimport { Property } from 'csstype';\n\nexport type CommonColumnType = {\n  /**\n   * Name of column for mapping with data\n   */\n  name: string;\n  /**\n   * Flag to define column as sortable\n   */\n  sortable?: boolean;\n  /**\n   * Fixes column to some side of table\n   */\n  fixed?: 'left' | 'right';\n  /**\n   * Adds vertical border(s)\n   */\n  borders?: 'both' | 'left' | 'right';\n  /**\n   * It manages the `flex-wrap` property\n   */\n  flexWrap?: boolean;\n  /**\n   * It manages the `align-items` property\n   */\n  alignItems?: Property.AlignItems;\n  /**\n   * It manages the `align-content` property\n   */\n  alignContent?: Property.AlignContent;\n  /**\n   * CSS `justify-content` property\n   */\n  justifyContent?: Property.JustifyContent;\n};\n\nexport type DTColumn = CommonColumnType & {\n  ref: React.RefCallback<HTMLElement> & { current: HTMLElement | null };\n  /**\n   * Width for grid-template-columns\n   */\n  gridColumnWidth: string;\n\n  /**\n   * Width of column by getBoundaryRect() value\n   */\n  calculatedWidth: number;\n  /**\n   * Height of column by getBoundaryRect() value\n   */\n  calculatedHeight: number;\n\n  parent?: DTColumn;\n  // children?: Array<Omit<DTColumn[], 'children'>>;\n\n  gridArea?: string;\n};\n\nexport type DataTableColumnProps = CommonColumnType & {\n  /**\n   * Value for grid-template-columns for current column\n   */\n  gtcWidth?: string;\n\n  /**\n   * Flag for change column size if sorted by it\n   */\n  changeSortSize?: boolean;\n\n  children?: React.ReactElement[];\n};\n\nexport type ColumnPropsInner = {\n  use: DTUse;\n  borders?: 'both' | 'left' | 'right';\n  sort?: DataTableProps['sort'];\n  onSortChange?: DataTableProps['onSortChange'];\n  uid: string;\n  parent?: DTColumn;\n  sortableColumnDescribeId: string;\n  columnIndex: number;\n  tableRef: React.RefObject<HTMLElement>;\n  gridTemplateColumns: string[];\n  gridTemplateAreas: string[];\n};\n"],"mappings":""}

package/lib/es6/components/Head/Group.js

@@ -0,0 +1,91 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps } from "@semcore/core";
+import * as React from 'react';
+import { Component, Root, sstyled } from '@semcore/core';
+import { Box } from '@semcore/base-components';
+/*__reshadow-styles__:"./style.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SHead_182z1_gg_{display:contents}.___SHead_182z1_gg_.__sticky_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:0;z-index:1}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{top:0}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroupContainer_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:40px;z-index:1}.___SHead_182z1_gg_.__compact_182z1_gg_ .___SColumn_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_182z1_gg_,.___SGroup_182z1_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;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}.___SGroup_182z1_gg_._use_primary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-3x, 12px);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_182z1_gg_._use_secondary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-2x, 8px);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SGroup_182z1_gg_:has(.___SColumn_182z1_gg_.__visibleSort_182z1_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_left_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_left_182z1_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_right_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_right_182z1_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_,.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before,.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before{display:flex;opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_{display:flex;opacity:1}.___SColumn_182z1_gg_.__gridArea_182z1_gg_,.___SGroupTitle_182z1_gg_.__gridArea_182z1_gg_,.___SGroup_182z1_gg_.__gridArea_182z1_gg_{grid-area:var(--gridArea_182z1)}.___SHead_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_ .___SGroup_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{position:sticky;z-index:2}@media (hover:hover){.___SColumn_182z1_gg_.__sortable_182z1_gg_:hover{cursor:pointer}}.___SSortWrapper_182z1_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_182z1_gg_,.___SSortWrapper_182z1_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_182z1_gg_:before{content:\"\";top:0;width:20px;height:100%}.___SSortButton_182z1_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}" /*__inner_css_end__*/, "182z1_gg_") /*__reshadow_css_end__*/, {
+  "__SHead": "___SHead_182z1_gg_",
+  "_sticky": "__sticky_182z1_gg_",
+  "__SColumn": "___SColumn_182z1_gg_",
+  "__SGroup": "___SGroup_182z1_gg_",
+  "__SGroupContainer": "___SGroupContainer_182z1_gg_",
+  "_compact": "__compact_182z1_gg_",
+  "_use_primary": "_use_primary_182z1_gg_",
+  "_use_secondary": "_use_secondary_182z1_gg_",
+  "_visibleSort": "__visibleSort_182z1_gg_",
+  "_borders_both": "_borders_both_182z1_gg_",
+  "_borders_left": "_borders_left_182z1_gg_",
+  "_borders_right": "_borders_right_182z1_gg_",
+  "_gridArea": "__gridArea_182z1_gg_",
+  "__SGroupTitle": "___SGroupTitle_182z1_gg_",
+  "--gridArea": "--gridArea_182z1",
+  "_fixed": "__fixed_182z1_gg_",
+  "_sortable": "__sortable_182z1_gg_",
+  "__SSortWrapper": "___SSortWrapper_182z1_gg_",
+  "__SSortButton": "___SSortButton_182z1_gg_"
+});
+import getOriginChildren from '@semcore/core/lib/utils/getOriginChildren';
+export var Group = /*#__PURE__*/function (_Component) {
+  _inherits(Group, _Component);
+  var _super = _createSuper(Group);
+  function Group() {
+    var _this;
+    _classCallCheck(this, Group);
+    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), "mounted", false);
+    return _this;
+  }
+  _createClass(Group, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.mounted = true;
+      this.forceUpdate();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref2,
+        _children$,
+        _children;
+      var SGroupContainer = Box;
+      var SGroup = Box;
+      var _this$asProps = this.asProps,
+        styles = _this$asProps.styles,
+        Children = _this$asProps.Children,
+        title = _this$asProps.title,
+        fixed = _this$asProps.fixed,
+        fixedColumnsMap = _this$asProps.fixedColumnsMap;
+      var children = getOriginChildren(Children);
+      var firstName = (_children$ = children[0]) === null || _children$ === void 0 ? void 0 : _children$.props.name;
+      var lastName = (_children = children[children.length - 1]) === null || _children === void 0 ? void 0 : _children.props.name;
+      var style = {};
+      if (fixed === 'left' && firstName) {
+        style.left = fixedColumnsMap.get(firstName);
+      }
+      if (fixed === 'right') {
+        style.right = fixedColumnsMap.get(lastName);
+      }
+      return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SGroupContainer, _ref2.cn("SGroupContainer", {
+        "display": 'contents'
+      }), this.mounted && /*#__PURE__*/React.createElement(SGroup, _ref2.cn("SGroup", _objectSpread({}, _assignProps({
+        "style": style
+      }, _ref))), title), /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})));
+    }
+  }]);
+  return Group;
+}(Component);
+_defineProperty(Group, "displayName", 'Group');
+_defineProperty(Group, "style", style);
+//# sourceMappingURL=Group.js.map

package/lib/es6/components/Head/Group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Group.js","names":["React","Component","Root","sstyled","Box","style","_sstyled","insert","getOriginChildren","Group","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","_createClass","key","value","componentDidMount","mounted","forceUpdate","render","_ref","asProps","_ref2","_children$","_children","SGroupContainer","SGroup","_this$asProps","styles","Children","title","fixed","fixedColumnsMap","children","firstName","props","name","lastName","left","get","right","createElement","cn","_objectSpread","_assignProps"],"sources":["../../../../src/components/Head/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Component, Root, sstyled } from '@semcore/core';\nimport { Box } from '@semcore/base-components';\n\nimport style from './style.shadow.css';\nimport { DataTableGroupProps, GroupPropsInner } from './Group.type';\nimport getOriginChildren from '@semcore/core/lib/utils/getOriginChildren';\n\nexport class Group extends Component<DataTableGroupProps, {}, {}, [], GroupPropsInner> {\n  static displayName = 'Group';\n  static style = style;\n\n  mounted = false;\n\n  componentDidMount() {\n    this.mounted = true;\n    this.forceUpdate();\n  }\n\n  render() {\n    const SGroupContainer = Box;\n    const SGroup = Root;\n    const { styles, Children, title, fixed, fixedColumnsMap } = this.asProps;\n    const children = getOriginChildren(Children);\n    const firstName = children[0]?.props.name;\n    const lastName = children[children.length - 1]?.props.name;\n\n    const style: any = {};\n\n    if (fixed === 'left' && firstName) {\n      style.left = fixedColumnsMap.get(firstName);\n    }\n    if (fixed === 'right') {\n      style.right = fixedColumnsMap.get(lastName);\n    }\n\n    return sstyled(styles)(\n      <SGroupContainer display={'contents'}>\n        {this.mounted && (\n          <SGroup render={Box} style={style}>\n            {title}\n          </SGroup>\n        )}\n        <Children />\n      </SGroupContainer>,\n    );\n  }\n}\n"],"mappings":"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"}

package/lib/es6/components/Head/Group.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Group.type.js.map

package/lib/es6/components/Head/Group.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Group.type.js","names":[],"sources":["../../../../src/components/Head/Group.type.ts"],"sourcesContent":["import { DTUse } from '../DataTable/DataTable.types';\n\nexport type DataTableGroupProps = {\n  title: string;\n\n  borders?: 'both' | 'left' | 'right';\n\n  fixed?: 'left' | 'right';\n};\n\nexport type GroupPropsInner = {\n  use: DTUse;\n  fixedColumnsMap: Map<string, any>;\n};\n"],"mappings":""}

package/lib/es6/components/Head/Head.js

@@ -0,0 +1,145 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps } from "@semcore/core";
+import * as React from 'react';
+import { Component, createComponent, Root, sstyled } from '@semcore/core';
+import { Box, ScreenReaderOnly } from '@semcore/base-components';
+/*__reshadow-styles__:"./style.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SHead_182z1_gg_{display:contents}.___SHead_182z1_gg_.__sticky_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:0;z-index:1}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{top:0}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroupContainer_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:40px;z-index:1}.___SHead_182z1_gg_.__compact_182z1_gg_ .___SColumn_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_182z1_gg_,.___SGroup_182z1_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;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}.___SGroup_182z1_gg_._use_primary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-3x, 12px);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_182z1_gg_._use_secondary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-2x, 8px);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SGroup_182z1_gg_:has(.___SColumn_182z1_gg_.__visibleSort_182z1_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_left_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_left_182z1_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_right_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_right_182z1_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_,.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before,.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before{display:flex;opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_{display:flex;opacity:1}.___SColumn_182z1_gg_.__gridArea_182z1_gg_,.___SGroupTitle_182z1_gg_.__gridArea_182z1_gg_,.___SGroup_182z1_gg_.__gridArea_182z1_gg_{grid-area:var(--gridArea_182z1)}.___SHead_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_ .___SGroup_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{position:sticky;z-index:2}@media (hover:hover){.___SColumn_182z1_gg_.__sortable_182z1_gg_:hover{cursor:pointer}}.___SSortWrapper_182z1_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_182z1_gg_,.___SSortWrapper_182z1_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_182z1_gg_:before{content:\"\";top:0;width:20px;height:100%}.___SSortButton_182z1_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}" /*__inner_css_end__*/, "182z1_gg_") /*__reshadow_css_end__*/, {
+  "__SHead": "___SHead_182z1_gg_",
+  "_sticky": "__sticky_182z1_gg_",
+  "__SColumn": "___SColumn_182z1_gg_",
+  "__SGroup": "___SGroup_182z1_gg_",
+  "__SGroupContainer": "___SGroupContainer_182z1_gg_",
+  "_compact": "__compact_182z1_gg_",
+  "_use_primary": "_use_primary_182z1_gg_",
+  "_use_secondary": "_use_secondary_182z1_gg_",
+  "_visibleSort": "__visibleSort_182z1_gg_",
+  "_borders_both": "_borders_both_182z1_gg_",
+  "_borders_left": "_borders_left_182z1_gg_",
+  "_borders_right": "_borders_right_182z1_gg_",
+  "_gridArea": "__gridArea_182z1_gg_",
+  "__SGroupTitle": "___SGroupTitle_182z1_gg_",
+  "--gridArea": "--gridArea_182z1",
+  "_fixed": "__fixed_182z1_gg_",
+  "_sortable": "__sortable_182z1_gg_",
+  "__SSortWrapper": "___SSortWrapper_182z1_gg_",
+  "__SSortButton": "___SSortButton_182z1_gg_"
+});
+import { Column } from './Column';
+import { Group } from './Group';
+import { getFixedStyle, getScrollOffsetValue } from '../../utils';
+var HeadRoot = /*#__PURE__*/function (_Component) {
+  _inherits(HeadRoot, _Component);
+  var _super = _createSuper(HeadRoot);
+  function HeadRoot() {
+    var _this;
+    _classCallCheck(this, HeadRoot);
+    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), "fixedColumnsMap", new Map());
+    return _this;
+  }
+  _createClass(HeadRoot, [{
+    key: "sortableColumnDescribeId",
+    value: function sortableColumnDescribeId() {
+      var uid = this.asProps.uid;
+      return "".concat(uid, "-column-sortable-describer");
+    }
+  }, {
+    key: "getGroupProps",
+    value: function getGroupProps(_, index) {
+      var _this$asProps = this.asProps,
+        use = _this$asProps.use,
+        gridAreaGroupMap = _this$asProps.gridAreaGroupMap;
+      return {
+        use: use,
+        gridArea: gridAreaGroupMap.get(index),
+        fixedColumnsMap: this.fixedColumnsMap
+      };
+    }
+  }, {
+    key: "getColumnProps",
+    value: function getColumnProps(_, index) {
+      var _this$asProps2 = this.asProps,
+        use = _this$asProps2.use,
+        columns = _this$asProps2.columns,
+        sort = _this$asProps2.sort,
+        onSortChange = _this$asProps2.onSortChange,
+        tableRef = _this$asProps2.tableRef,
+        gridTemplateColumns = _this$asProps2.gridTemplateColumns,
+        gridTemplateAreas = _this$asProps2.gridTemplateAreas;
+      var column = columns[index];
+      var _getFixedStyle = getFixedStyle(column, columns),
+        _getFixedStyle2 = _slicedToArray(_getFixedStyle, 2),
+        name = _getFixedStyle2[0],
+        value = _getFixedStyle2[1];
+      var style = {};
+      if (name !== undefined && value !== undefined) {
+        style[name] = value;
+        this.fixedColumnsMap.set(column.name, value);
+      }
+      return {
+        use: use,
+        'aria-colindex': index + 1,
+        ref: function ref(node) {
+          return column.ref(node);
+        },
+        style: style,
+        gridArea: column.gridArea,
+        fixed: column.fixed,
+        borders: column.borders,
+        sort: sort,
+        onSortChange: onSortChange,
+        parent: column.parent,
+        sortableColumnDescribeId: this.sortableColumnDescribeId(),
+        columnIndex: index,
+        tableRef: tableRef,
+        gridTemplateColumns: gridTemplateColumns,
+        gridTemplateAreas: gridTemplateAreas
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref2;
+      var SHead = Box;
+      var _this$asProps3 = this.asProps,
+        Children = _this$asProps3.Children,
+        styles = _this$asProps3.styles,
+        columns = _this$asProps3.columns,
+        tableRef = _this$asProps3.tableRef,
+        withScrollBar = _this$asProps3.withScrollBar,
+        getI18nText = _this$asProps3.getI18nText;
+      var _getScrollOffsetValue = getScrollOffsetValue(columns),
+        _getScrollOffsetValue2 = _slicedToArray(_getScrollOffsetValue, 2),
+        offsetLeftSum = _getScrollOffsetValue2[0],
+        offsetRightSum = _getScrollOffsetValue2[1];
+      return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SHead, _ref2.cn("SHead", _objectSpread({}, _assignProps({
+        "role": 'row',
+        "aria-rowindex": 1
+      }, _ref))), /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {}))), /*#__PURE__*/React.createElement(ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
+        "aria-hidden": true,
+        "id": this.sortableColumnDescribeId()
+      }), getI18nText('sortableColumn')));
+    }
+  }]);
+  return HeadRoot;
+}(Component);
+_defineProperty(HeadRoot, "displayName", 'Head');
+_defineProperty(HeadRoot, "style", style);
+export var Head = createComponent(HeadRoot, {
+  Column: Column,
+  Group: Group
+});
+//# sourceMappingURL=Head.js.map