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

package/lib/cjs/components/Head/Head.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Head = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@semcore/core");
+var React = _interopRequireWildcard(require("react"));
+var _baseComponents = require("@semcore/base-components");
+var _Column = require("./Column");
+var _Group = require("./Group");
+var _utils = require("../../utils");
+/*__reshadow-styles__:"./style.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_core.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_"
+});
+var HeadRoot = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(HeadRoot, _Component);
+  var _super = (0, _createSuper2["default"])(HeadRoot);
+  function HeadRoot() {
+    var _this;
+    (0, _classCallCheck2["default"])(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));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "fixedColumnsMap", new Map());
+    return _this;
+  }
+  (0, _createClass2["default"])(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 = (0, _utils.getFixedStyle)(column, columns),
+        _getFixedStyle2 = (0, _slicedToArray2["default"])(_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 = _baseComponents.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 = (0, _utils.getScrollOffsetValue)(columns),
+        _getScrollOffsetValue2 = (0, _slicedToArray2["default"])(_getScrollOffsetValue, 2),
+        offsetLeftSum = _getScrollOffsetValue2[0],
+        offsetRightSum = _getScrollOffsetValue2[1];
+      return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SHead, _ref2.cn("SHead", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+        "role": 'row',
+        "aria-rowindex": 1
+      }, _ref))), /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {}))), /*#__PURE__*/React.createElement(_baseComponents.ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
+        "aria-hidden": true,
+        "id": this.sortableColumnDescribeId()
+      }), getI18nText('sortableColumn')));
+    }
+  }]);
+  return HeadRoot;
+}(_core.Component);
+(0, _defineProperty2["default"])(HeadRoot, "displayName", 'Head');
+(0, _defineProperty2["default"])(HeadRoot, "style", style);
+var Head = (0, _core.createComponent)(HeadRoot, {
+  Column: _Column.Column,
+  Group: _Group.Group
+});
+exports.Head = Head;
+//# sourceMappingURL=Head.js.map

package/lib/cjs/components/Head/Head.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Head.js","names":["_core","require","React","_interopRequireWildcard","_baseComponents","_Column","_Group","_utils","style","sstyled","insert","HeadRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","Map","_createClass2","key","value","sortableColumnDescribeId","uid","asProps","getGroupProps","_","index","_this$asProps","use","gridAreaGroupMap","gridArea","get","fixedColumnsMap","getColumnProps","_this$asProps2","columns","sort","onSortChange","tableRef","gridTemplateColumns","gridTemplateAreas","column","_getFixedStyle","getFixedStyle","_getFixedStyle2","_slicedToArray2","name","undefined","set","ref","node","fixed","borders","parent","columnIndex","render","_ref","_ref2","SHead","Box","_this$asProps3","Children","styles","withScrollBar","getI18nText","_getScrollOffsetValue","getScrollOffsetValue","_getScrollOffsetValue2","offsetLeftSum","offsetRightSum","createElement","Fragment","cn","_objectSpread2","assignProps","ScreenReaderOnly","Component","Head","createComponent","Column","Group","exports"],"sources":["../../../../src/components/Head/Head.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Component, createComponent, Intergalactic, Root, sstyled } from '@semcore/core';\nimport { DataTableHeadProps, HeadPropsInner } from './Head.types';\nimport { Box, ScreenReaderOnly, ScrollArea } from '@semcore/base-components';\n\nimport style from './style.shadow.css';\nimport { Column } from './Column';\nimport { Group } from './Group';\nimport { DataTableColumnProps } from './Column.types';\nimport { getFixedStyle, getScrollOffsetValue } from '../../utils';\nimport { DataTableGroupProps } from './Group.type';\n\nclass HeadRoot extends Component<DataTableHeadProps, {}, {}, [], HeadPropsInner> {\n  static displayName = 'Head';\n  static style = style;\n\n  fixedColumnsMap = new Map<string, any>();\n\n  sortableColumnDescribeId() {\n    const { uid } = this.asProps;\n    return `${uid}-column-sortable-describer`;\n  }\n\n  getGroupProps(_: any, index: number) {\n    const { use, gridAreaGroupMap } = this.asProps;\n\n    return {\n      use,\n      gridArea: gridAreaGroupMap.get(index),\n      fixedColumnsMap: this.fixedColumnsMap,\n    };\n  }\n\n  getColumnProps(_: any, index: number) {\n    const { use, columns, sort, onSortChange, tableRef, gridTemplateColumns, gridTemplateAreas } =\n      this.asProps;\n    const column = columns[index];\n    const [name, value] = getFixedStyle(column, columns);\n    const style: any = {};\n\n    if (name !== undefined && value !== undefined) {\n      style[name] = value;\n\n      this.fixedColumnsMap.set(column.name, value);\n    }\n\n    return {\n      use,\n      'aria-colindex': index + 1,\n      ref: (node: HTMLElement | null) => column.ref(node),\n      style,\n      gridArea: column.gridArea,\n      fixed: column.fixed,\n      borders: column.borders,\n      sort,\n      onSortChange,\n      parent: column.parent,\n      sortableColumnDescribeId: this.sortableColumnDescribeId(),\n      columnIndex: index,\n      tableRef,\n      gridTemplateColumns,\n      gridTemplateAreas,\n    };\n  }\n\n  render() {\n    const SHead = Root;\n    const { Children, styles, columns, tableRef, withScrollBar, getI18nText } = this.asProps;\n    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(columns);\n\n    return sstyled(styles)(\n      <>\n        <SHead render={Box} role='row' aria-rowindex={1}>\n          <Children />\n        </SHead>\n\n        {/*{Boolean(withScrollBar) && tableRef.current && (*/}\n        {/*  <Box display={'contents'}>*/}\n        {/*    <ScrollArea.Bar*/}\n        {/*      orientation='horizontal'*/}\n        {/*      container={tableRef}*/}\n        {/*      top={'25px'}*/}\n        {/*      leftOffset={offsetLeftSum}*/}\n        {/*      rightOffset={offsetRightSum}*/}\n        {/*    />*/}\n        {/*  </Box>*/}\n        {/*)}*/}\n\n        <ScreenReaderOnly aria-hidden={true} id={this.sortableColumnDescribeId()}>\n          {getI18nText('sortableColumn')}\n        </ScreenReaderOnly>\n      </>,\n    );\n  }\n}\n\nexport const Head = createComponent(HeadRoot, { Column, Group }) as Intergalactic.Component<\n  'div',\n  DataTableHeadProps\n> & {\n  Column: Intergalactic.Component<'div', DataTableColumnProps>;\n  Group: Intergalactic.Component<'div', DataTableGroupProps>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AADA,IAAAC,KAAA,GAAAC,uBAAA,CAAAF,OAAA;AAGA,IAAAG,eAAA,GAAAH,OAAA;AAGA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AAEA,IAAAM,MAAA,GAAAN,OAAA;AAAkE;AAAA,IAAAO,KAAA,+BAAAR,KAAA,CAAAS,OAAA,CAAAC,MAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IAG5DC,QAAQ,0BAAAC,UAAA;EAAA,IAAAC,UAAA,aAAAF,QAAA,EAAAC,UAAA;EAAA,IAAAE,MAAA,OAAAC,aAAA,aAAAJ,QAAA;EAAA,SAAAA,SAAA;IAAA,IAAAK,KAAA;IAAA,IAAAC,gBAAA,mBAAAN,QAAA;IAAA,SAAAO,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,GAAAF,MAAA,CAAAU,IAAA,CAAAC,KAAA,CAAAX,MAAA,SAAAY,MAAA,CAAAL,IAAA;IAAA,IAAAM,gBAAA,iBAAAC,uBAAA,aAAAZ,KAAA,sBAIM,IAAIa,GAAG,EAAe;IAAA,OAAAb,KAAA;EAAA;EAAA,IAAAc,aAAA,aAAAnB,QAAA;IAAAoB,GAAA;IAAAC,KAAA,EAExC,SAAAC,yBAAA,EAA2B;MACzB,IAAQC,GAAG,GAAK,IAAI,CAACC,OAAO,CAApBD,GAAG;MACX,UAAAR,MAAA,CAAUQ,GAAG;IACf;EAAC;IAAAH,GAAA;IAAAC,KAAA,EAED,SAAAI,cAAcC,CAAM,EAAEC,KAAa,EAAE;MACnC,IAAAC,aAAA,GAAkC,IAAI,CAACJ,OAAO;QAAtCK,GAAG,GAAAD,aAAA,CAAHC,GAAG;QAAEC,gBAAgB,GAAAF,aAAA,CAAhBE,gBAAgB;MAE7B,OAAO;QACLD,GAAG,EAAHA,GAAG;QACHE,QAAQ,EAAED,gBAAgB,CAACE,GAAG,CAACL,KAAK,CAAC;QACrCM,eAAe,EAAE,IAAI,CAACA;MACxB,CAAC;IACH;EAAC;IAAAb,GAAA;IAAAC,KAAA,EAED,SAAAa,eAAeR,CAAM,EAAEC,KAAa,EAAE;MACpC,IAAAQ,cAAA,GACE,IAAI,CAACX,OAAO;QADNK,GAAG,GAAAM,cAAA,CAAHN,GAAG;QAAEO,OAAO,GAAAD,cAAA,CAAPC,OAAO;QAAEC,IAAI,GAAAF,cAAA,CAAJE,IAAI;QAAEC,YAAY,GAAAH,cAAA,CAAZG,YAAY;QAAEC,QAAQ,GAAAJ,cAAA,CAARI,QAAQ;QAAEC,mBAAmB,GAAAL,cAAA,CAAnBK,mBAAmB;QAAEC,iBAAiB,GAAAN,cAAA,CAAjBM,iBAAiB;MAE1F,IAAMC,MAAM,GAAGN,OAAO,CAACT,KAAK,CAAC;MAC7B,IAAAgB,cAAA,GAAsB,IAAAC,oBAAa,EAACF,MAAM,EAAEN,OAAO,CAAC;QAAAS,eAAA,OAAAC,eAAA,aAAAH,cAAA;QAA7CI,IAAI,GAAAF,eAAA;QAAExB,KAAK,GAAAwB,eAAA;MAClB,IAAMhD,KAAU,GAAG,CAAC,CAAC;MAErB,IAAIkD,IAAI,KAAKC,SAAS,IAAI3B,KAAK,KAAK2B,SAAS,EAAE;QAC7CnD,KAAK,CAACkD,IAAI,CAAC,GAAG1B,KAAK;QAEnB,IAAI,CAACY,eAAe,CAACgB,GAAG,CAACP,MAAM,CAACK,IAAI,EAAE1B,KAAK,CAAC;MAC9C;MAEA,OAAO;QACLQ,GAAG,EAAHA,GAAG;QACH,eAAe,EAAEF,KAAK,GAAG,CAAC;QAC1BuB,GAAG,EAAE,SAAAA,IAACC,IAAwB;UAAA,OAAKT,MAAM,CAACQ,GAAG,CAACC,IAAI,CAAC;QAAA;QACnDtD,KAAK,EAALA,KAAK;QACLkC,QAAQ,EAAEW,MAAM,CAACX,QAAQ;QACzBqB,KAAK,EAAEV,MAAM,CAACU,KAAK;QACnBC,OAAO,EAAEX,MAAM,CAACW,OAAO;QACvBhB,IAAI,EAAJA,IAAI;QACJC,YAAY,EAAZA,YAAY;QACZgB,MAAM,EAAEZ,MAAM,CAACY,MAAM;QACrBhC,wBAAwB,EAAE,IAAI,CAACA,wBAAwB,EAAE;QACzDiC,WAAW,EAAE5B,KAAK;QAClBY,QAAQ,EAARA,QAAQ;QACRC,mBAAmB,EAAnBA,mBAAmB;QACnBC,iBAAiB,EAAjBA;MACF,CAAC;IACH;EAAC;IAAArB,GAAA;IAAAC,KAAA,EAED,SAAAmC,OAAA,EAAS;MAAA,IAAAC,IAAA,QAAAjC,OAAA;QAAAkC,KAAA;MACP,IAAMC,KAAK,GAMQC,mBAAG;MALtB,IAAAC,cAAA,GAA4E,IAAI,CAACrC,OAAO;QAAhFsC,QAAQ,GAAAD,cAAA,CAARC,QAAQ;QAAEC,MAAM,GAAAF,cAAA,CAANE,MAAM;QAAE3B,OAAO,GAAAyB,cAAA,CAAPzB,OAAO;QAAEG,QAAQ,GAAAsB,cAAA,CAARtB,QAAQ;QAAEyB,aAAa,GAAAH,cAAA,CAAbG,aAAa;QAAEC,WAAW,GAAAJ,cAAA,CAAXI,WAAW;MACvE,IAAAC,qBAAA,GAAwC,IAAAC,2BAAoB,EAAC/B,OAAO,CAAC;QAAAgC,sBAAA,OAAAtB,eAAA,aAAAoB,qBAAA;QAA9DG,aAAa,GAAAD,sBAAA;QAAEE,cAAc,GAAAF,sBAAA;MAEpC,OAAAV,KAAA,GAAO,IAAA5D,aAAO,EAACiE,MAAM,CAAC,eACpBxE,KAAA,CAAAgF,aAAA,CAAAhF,KAAA,CAAAiF,QAAA,qBACEjF,KAAA,CAAAgF,aAAA,CAACZ,KAAK,EAAAD,KAAA,CAAAe,EAAA,cAAAC,cAAA,qBAAArF,KAAA,CAAAsF,WAAA;QAAA,QAAmB,KAAK;QAAA,iBAAgB;MAAC,GAAAlB,IAAA,kBAC7ClE,KAAA,CAAAgF,aAAA,CAACT,QAAQ,EAAAJ,KAAA,CAAAe,EAAA,iBAAG,CACN,eAcRlF,KAAA,CAAAgF,aAAA,CAAC9E,eAAA,CAAAmF,gBAAgB,EAAAlB,KAAA,CAAAe,EAAA;QAAA,eAAc,IAAI;QAAA,MAAM,IAAI,CAACnD,wBAAwB;MAAE,IACrE2C,WAAW,CAAC,gBAAgB,CAAC,CACb,CAClB;IAEP;EAAC;EAAA,OAAAjE,QAAA;AAAA,EAjFoB6E,eAAS;AAAA,IAAA7D,gBAAA,aAA1BhB,QAAQ,iBACS,MAAM;AAAA,IAAAgB,gBAAA,aADvBhB,QAAQ,WAEGH,KAAK;AAkFf,IAAMiF,IAAI,GAAG,IAAAC,qBAAe,EAAC/E,QAAQ,EAAE;EAAEgF,MAAM,EAANA,cAAM;EAAEC,KAAK,EAALA;AAAM,CAAC,CAM9D;AAACC,OAAA,CAAAJ,IAAA,GAAAA,IAAA"}

package/lib/cjs/components/Head/Head.types.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=Head.types.js.map

package/lib/cjs/components/Head/Head.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Head.types.js","names":[],"sources":["../../../../src/components/Head/Head.types.ts"],"sourcesContent":["import { DataTableData, DataTableProps, DTUse } from '../DataTable/DataTable.types';\nimport { DTColumn } from './Column.types';\n\nexport type DataTableHeadProps = {\n  /**\n   * Sticky header\n   * @default false\n   */\n  sticky?: boolean;\n\n  /** Enable scroll bar element in header */\n  withScrollBar?: boolean;\n};\n\nexport type HeadPropsInner = {\n  use: DTUse;\n  tableRef: React.RefObject<HTMLElement>;\n  columns: DTColumn[];\n  compact: boolean;\n  sort?: DataTableProps['sort'];\n  onSortChange?: DataTableProps['onSortChange'];\n  getI18nText: (key: string) => string;\n  uid: string;\n  ref: React.RefObject<HTMLDivElement>;\n\n  gridAreaGroupMap: Map<number, string>;\n  gridTemplateColumns: string[];\n  gridTemplateAreas: string[];\n};\n"],"mappings":""}

package/lib/cjs/components/Head/style.shadow.css

@@ -0,0 +1,165 @@
+SHead {
+  display: contents;
+}
+
+SHead[sticky] > SColumn, SHead[sticky] SGroup {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+SHead[sticky] SGroupContainer > SColumn {
+  position: sticky;
+  top: 40px;
+  z-index: 1;
+}
+
+SHead[compact] SColumn {
+  padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px);
+}
+
+SGroup, SColumn {
+  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[use='primary'] {
+  justify-content: center;
+  padding: var(--intergalactic-spacing-3x, 12px);
+  background-color: var(--intergalactic-table-th-primary-cell, #f4f5f9);
+}
+SGroup[use='secondary'] {
+  justify-content: center;
+  padding: var(--intergalactic-spacing-2x, 8px);
+  background-color: var(--intergalactic-table-th-secondary-cell, #ffffff);
+}
+
+SGroup:has(SColumn[visibleSort]) {
+  background-color: var(--intergalactic-table-th-primary-cell-hover, #e0e1e9);
+}
+
+SGroup[borders='both'], SColumn[borders='both'], SGroup[borders='left'], SColumn[borders='left'] {
+  border-left: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+}
+
+SGroup[borders='both'], SColumn[borders='both'], SGroup[borders='right'], SColumn[borders='right'] {
+  border-right: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+}
+
+SColumn[use='primary'] {
+  padding: var(--intergalactic-spacing-3x, 12px);
+  border-bottom: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+  background-color: var(--intergalactic-table-th-primary-cell, #f4f5f9);
+
+  SSortWrapper::before {
+    background: linear-gradient(
+      270deg,
+      var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,
+      rgba(224, 225, 233, 0) 105%
+    );
+  }
+
+  &[visibleSort] {
+    background-color: var(--intergalactic-table-th-primary-cell-hover, #e0e1e9);
+
+    SSortWrapper {
+      flex-basis: calc(var(--intergalactic-spacing-1x, 4px) + 16px);
+      opacity: 1;
+
+      &::before {
+        display: flex;
+        opacity: 1;
+      }
+    }
+
+    SSortButton {
+      display: flex;
+      opacity: 1;
+    }
+  }
+}
+
+SColumn[use='secondary'] {
+  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);
+
+  SSortWrapper::before {
+    background: linear-gradient(
+      270deg,
+      var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,
+      rgba(255, 255, 255, 0) 105%
+    );
+  }
+
+  &[visibleSort] {
+    SSortWrapper {
+      flex-basis: calc(var(--intergalactic-spacing-1x, 4px) + 16px);
+      opacity: 1;
+
+      &::before {
+        display: flex;
+        opacity: 1;
+      }
+    }
+
+    SSortButton {
+      display: flex;
+      opacity: 1;
+    }
+  }
+}
+
+SColumn[gridArea], SGroup[gridArea], SGroupTitle[gridArea] {
+  grid-area: var(--gridArea);
+}
+
+SHead[sticky] SColumn[fixed], SHead SColumn[fixed], SHead[sticky] SGroup, SHead SGroup[fixed] {
+  position: sticky;
+  /* because up resizable */
+  z-index: 2;
+}
+
+SColumn[sortable]:hover {
+  cursor: pointer;
+}
+
+SSortWrapper {
+  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;
+}
+
+SSortWrapper:before {
+  display: none;
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 20px;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+SSortButton {
+  display: none;
+  fill: var(--intergalactic-icon-secondary-neutral-hover-active, #878992);
+  position: absolute;
+  top: calc(-1 * (1em * 1.25 - 16px));
+  right: 0;
+  margin-left: var(--intergalactic-spacing-1x, 4px);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}

package/lib/cjs/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  DataTable: true,
+  ACCORDION: true
+};
+Object.defineProperty(exports, "ACCORDION", {
+  enumerable: true,
+  get: function get() {
+    return _DataTable.ACCORDION;
+  }
+});
+Object.defineProperty(exports, "DataTable", {
+  enumerable: true,
+  get: function get() {
+    return _DataTable.DataTable;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _DataTable2["default"];
+  }
+});
+var _DataTable = require("./components/DataTable/DataTable");
+var _DataTable2 = _interopRequireWildcard(require("./DataTable"));
+Object.keys(_DataTable2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DataTable2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DataTable2[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_DataTable","require","_DataTable2","_interopRequireWildcard","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.ts"],"sourcesContent":["import { DataTable, ACCORDION } from './components/DataTable/DataTable';\n\nexport { default } from './DataTable';\nexport * from './DataTable';\n\nexport { DataTable, ACCORDION };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAEA,IAAAC,WAAA,GAAAC,uBAAA,CAAAF,OAAA;AACAG,MAAA,CAAAC,IAAA,CAAAH,WAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAL,WAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAb,WAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}