@semcore/data-table 16.0.0-prerelease.2 → 16.0.0-prerelease.21

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

@@ -0,0 +1,109 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+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__*/".___SGroupContainer_ah4hc_gg_,.___SHead_ah4hc_gg_{display:contents}.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SColumn_ah4hc_gg_{position:sticky;top:0;z-index:2}.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SGroup_ah4hc_gg_{top:0}.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SGroupContainer_ah4hc_gg_>.___SColumn_ah4hc_gg_{position:sticky;z-index:2}.___SHead_ah4hc_gg_.__compact_ah4hc_gg_ .___SColumn_ah4hc_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_ah4hc_gg_,.___SGroup_ah4hc_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;overflow:hidden}.___SGroup_ah4hc_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_ah4hc_gg_._use_primary_ah4hc_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_ah4hc_gg_._use_primary_ah4hc_gg_:has(~.___SColumn_ah4hc_gg_.__visibleSort_ah4hc_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_ah4hc_gg_._use_secondary_ah4hc_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_ah4hc_gg_._borders_both_ah4hc_gg_,.___SColumn_ah4hc_gg_._borders_left_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_both_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_left_ah4hc_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_ah4hc_gg_._borders_both_ah4hc_gg_,.___SColumn_ah4hc_gg_._borders_right_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_both_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_right_ah4hc_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_ah4hc_gg_._use_primary_ah4hc_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_ah4hc_gg_._use_primary_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortButton_ah4hc_gg_,.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before,.___SColumn_ah4hc_gg_._use_secondary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before{display:flex;opacity:1}.___SColumn_ah4hc_gg_._use_secondary_ah4hc_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_ah4hc_gg_._use_secondary_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_ah4hc_gg_._use_secondary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_ah4hc_gg_._use_secondary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortButton_ah4hc_gg_{display:flex;opacity:1}.___SColumn_ah4hc_gg_.__gridArea_ah4hc_gg_,.___SGroupTitle_ah4hc_gg_.__gridArea_ah4hc_gg_,.___SGroup_ah4hc_gg_.__gridArea_ah4hc_gg_{grid-area:var(--gridArea_ah4hc)}.___SHead_ah4hc_gg_ .___SColumn_ah4hc_gg_.__fixed_ah4hc_gg_,.___SHead_ah4hc_gg_ .___SGroup_ah4hc_gg_.__fixed_ah4hc_gg_,.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SColumn_ah4hc_gg_.__fixed_ah4hc_gg_,.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SGroup_ah4hc_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_ah4hc_gg_.__sortable_ah4hc_gg_:hover{cursor:pointer}}.___SSortWrapper_ah4hc_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_ah4hc_gg_,.___SSortWrapper_ah4hc_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_ah4hc_gg_:before{content:\"\";top:0;width:20px;height:100%}.___SSortButton_ah4hc_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_ah4hc_gg_._sideIndents_wide_ah4hc_gg_ .___SColumn_ah4hc_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_ah4hc_gg_._sideIndents_wide_ah4hc_gg_ .___SColumn_ah4hc_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_ah4hc_gg_{cursor:pointer}", /*__inner_css_end__*/"ah4hc_gg_"),
+/*__reshadow_css_end__*/
+{
+  "__SHead": "___SHead_ah4hc_gg_",
+  "__SGroupContainer": "___SGroupContainer_ah4hc_gg_",
+  "_sticky": "__sticky_ah4hc_gg_",
+  "__SColumn": "___SColumn_ah4hc_gg_",
+  "__SGroup": "___SGroup_ah4hc_gg_",
+  "_compact": "__compact_ah4hc_gg_",
+  "_use_secondary": "_use_secondary_ah4hc_gg_",
+  "_borders_both": "_borders_both_ah4hc_gg_",
+  "_borders_left": "_borders_left_ah4hc_gg_",
+  "_borders_right": "_borders_right_ah4hc_gg_",
+  "_gridArea": "__gridArea_ah4hc_gg_",
+  "__SGroupTitle": "___SGroupTitle_ah4hc_gg_",
+  "--gridArea": "--gridArea_ah4hc",
+  "_fixed": "__fixed_ah4hc_gg_",
+  "_sortable": "__sortable_ah4hc_gg_",
+  "__SSortWrapper": "___SSortWrapper_ah4hc_gg_",
+  "__SSortButton": "___SSortButton_ah4hc_gg_",
+  "__SHeadCheckboxCol": "___SHeadCheckboxCol_ah4hc_gg_",
+  "_use_primary": "_use_primary_ah4hc_gg_",
+  "_visibleSort": "__visibleSort_ah4hc_gg_",
+  "_sideIndents_wide": "_sideIndents_wide_ah4hc_gg_"
+});
+import getOriginChildren from '@semcore/core/lib/utils/getOriginChildren';
+import { DataTableInternal } from '../DataTable/DataTable';
+import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
+export var Group = /*#__PURE__*/function (_Component) {
+  _inherits(Group, _Component);
+  var _super = _createSuper(Group);
+  function Group() {
+    _classCallCheck(this, Group);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Group, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.forceUpdate();
+    }
+  }, {
+    key: "groupId",
+    get: function get() {
+      var uid = this.asProps.uid;
+      return "".concat(uid, "_columns_group");
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref2,
+        _groupColumns$,
+        _children$,
+        _groupColumns,
+        _children,
+        _this = this;
+      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,
+        columns = _this$asProps.columns,
+        withConfig = _this$asProps.withConfig;
+      var groupColumns = columns !== null && columns !== void 0 ? columns : [];
+      var children = getOriginChildren(Children);
+      var firstName = withConfig ? (_groupColumns$ = groupColumns[0]) === null || _groupColumns$ === void 0 ? void 0 : _groupColumns$.name : (_children$ = children[0]) === null || _children$ === void 0 ? void 0 : _children$.props.name;
+      var lastName = withConfig ? (_groupColumns = groupColumns[groupColumns.length - 1]) === null || _groupColumns === void 0 ? void 0 : _groupColumns.name : (_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", {}), /*#__PURE__*/React.createElement(SGroup, _ref2.cn("SGroup", _objectSpread({}, _assignProps({
+        "style": style,
+        "__excludeProps": ['title'],
+        "id": this.groupId
+      }, _ref))), withConfig ? children : title), withConfig ? groupColumns.map(function (column, i) {
+        return /*#__PURE__*/React.createElement(DataTableInternal.Head.Column, _extends({
+          key: column.name
+        }, column, {
+          "aria-describedby": _this.groupId
+        }));
+      }) : /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})));
+    }
+  }]);
+  return Group;
+}(Component);
+_defineProperty(Group, "displayName", 'Group');
+_defineProperty(Group, "style", style);
+_defineProperty(Group, "enhance", [uniqueIDEnhancement()]);
+//# 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","DataTableInternal","uniqueIDEnhancement","Group","_Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","componentDidMount","forceUpdate","get","uid","asProps","concat","render","_ref","_ref2","_groupColumns$","_children$","_groupColumns","_children","_this","SGroupContainer","SGroup","_this$asProps","styles","Children","title","fixed","fixedColumnsMap","columns","withConfig","groupColumns","children","firstName","name","props","lastName","length","left","right","createElement","cn","_objectSpread","_assignProps","groupId","map","column","i","Head","Column","_extends","_defineProperty"],"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';\nimport { DataTableInternal } from '../DataTable/DataTable';\nimport uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';\n\nexport class Group extends Component<\n  DataTableGroupProps,\n  {},\n  {},\n  typeof Group.enhance,\n  GroupPropsInner\n> {\n  static displayName = 'Group';\n  static style = style;\n  static enhance = [uniqueIDEnhancement()] as const;\n\n  componentDidMount() {\n    this.forceUpdate();\n  }\n\n  get groupId() {\n    const { uid } = this.asProps;\n\n    return `${uid}_columns_group`;\n  }\n\n  render() {\n    const SGroupContainer = Box;\n    const SGroup = Root;\n    const { styles, Children, title, fixed, fixedColumnsMap, columns, withConfig } = this.asProps;\n    const groupColumns = columns ?? [];\n    const children = getOriginChildren(Children);\n\n    const firstName = withConfig ? groupColumns[0]?.name : children[0]?.props.name;\n    const lastName = withConfig\n      ? groupColumns[groupColumns.length - 1]?.name\n      : 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>\n        <SGroup render={Box} style={style} __excludeProps={['title']} id={this.groupId}>\n          {withConfig ? children : title}\n        </SGroup>\n        {withConfig ? (\n          groupColumns.map((column, i) => {\n            return (\n              <DataTableInternal.Head.Column\n                key={column.name}\n                {...column}\n                aria-describedby={this.groupId}\n              />\n            );\n          })\n        ) : (\n          <Children />\n        )}\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';\nimport { ReactElement } from 'react';\nimport { DataTableColumnProps, DTColumn } from './Column.types';\n\nexport type DataTableGroupProps = {\n  title: React.ReactNode;\n\n  borders?: 'both' | 'left' | 'right';\n\n  fixed?: 'left' | 'right';\n\n  children: Array<ReactElement<DataTableColumnProps>>;\n\n  name?: string;\n  columns?: DTColumn[];\n};\n\nexport type GroupPropsInner = {\n  use: DTUse;\n  fixedColumnsMap: Map<string, any>;\n  withConfig: boolean;\n};\n"],"mappings":""}

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

@@ -0,0 +1,201 @@
+import _extends from "@babel/runtime/helpers/extends";
+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__*/".___SGroupContainer_ah4hc_gg_,.___SHead_ah4hc_gg_{display:contents}.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SColumn_ah4hc_gg_{position:sticky;top:0;z-index:2}.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SGroup_ah4hc_gg_{top:0}.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SGroupContainer_ah4hc_gg_>.___SColumn_ah4hc_gg_{position:sticky;z-index:2}.___SHead_ah4hc_gg_.__compact_ah4hc_gg_ .___SColumn_ah4hc_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_ah4hc_gg_,.___SGroup_ah4hc_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;overflow:hidden}.___SGroup_ah4hc_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_ah4hc_gg_._use_primary_ah4hc_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_ah4hc_gg_._use_primary_ah4hc_gg_:has(~.___SColumn_ah4hc_gg_.__visibleSort_ah4hc_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_ah4hc_gg_._use_secondary_ah4hc_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_ah4hc_gg_._borders_both_ah4hc_gg_,.___SColumn_ah4hc_gg_._borders_left_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_both_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_left_ah4hc_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_ah4hc_gg_._borders_both_ah4hc_gg_,.___SColumn_ah4hc_gg_._borders_right_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_both_ah4hc_gg_,.___SGroup_ah4hc_gg_._borders_right_ah4hc_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_ah4hc_gg_._use_primary_ah4hc_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_ah4hc_gg_._use_primary_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortButton_ah4hc_gg_,.___SColumn_ah4hc_gg_._use_primary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before,.___SColumn_ah4hc_gg_._use_secondary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before{display:flex;opacity:1}.___SColumn_ah4hc_gg_._use_secondary_ah4hc_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_ah4hc_gg_._use_secondary_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_ah4hc_gg_._use_secondary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortWrapper_ah4hc_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_ah4hc_gg_._use_secondary_ah4hc_gg_.__visibleSort_ah4hc_gg_ .___SSortButton_ah4hc_gg_{display:flex;opacity:1}.___SColumn_ah4hc_gg_.__gridArea_ah4hc_gg_,.___SGroupTitle_ah4hc_gg_.__gridArea_ah4hc_gg_,.___SGroup_ah4hc_gg_.__gridArea_ah4hc_gg_{grid-area:var(--gridArea_ah4hc)}.___SHead_ah4hc_gg_ .___SColumn_ah4hc_gg_.__fixed_ah4hc_gg_,.___SHead_ah4hc_gg_ .___SGroup_ah4hc_gg_.__fixed_ah4hc_gg_,.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SColumn_ah4hc_gg_.__fixed_ah4hc_gg_,.___SHead_ah4hc_gg_.__sticky_ah4hc_gg_ .___SGroup_ah4hc_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_ah4hc_gg_.__sortable_ah4hc_gg_:hover{cursor:pointer}}.___SSortWrapper_ah4hc_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_ah4hc_gg_,.___SSortWrapper_ah4hc_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_ah4hc_gg_:before{content:\"\";top:0;width:20px;height:100%}.___SSortButton_ah4hc_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_ah4hc_gg_._sideIndents_wide_ah4hc_gg_ .___SColumn_ah4hc_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_ah4hc_gg_._sideIndents_wide_ah4hc_gg_ .___SColumn_ah4hc_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_ah4hc_gg_{cursor:pointer}", /*__inner_css_end__*/"ah4hc_gg_"),
+/*__reshadow_css_end__*/
+{
+  "__SHead": "___SHead_ah4hc_gg_",
+  "__SGroupContainer": "___SGroupContainer_ah4hc_gg_",
+  "_sticky": "__sticky_ah4hc_gg_",
+  "__SColumn": "___SColumn_ah4hc_gg_",
+  "__SGroup": "___SGroup_ah4hc_gg_",
+  "_compact": "__compact_ah4hc_gg_",
+  "_use_secondary": "_use_secondary_ah4hc_gg_",
+  "_borders_both": "_borders_both_ah4hc_gg_",
+  "_borders_left": "_borders_left_ah4hc_gg_",
+  "_borders_right": "_borders_right_ah4hc_gg_",
+  "_gridArea": "__gridArea_ah4hc_gg_",
+  "__SGroupTitle": "___SGroupTitle_ah4hc_gg_",
+  "--gridArea": "--gridArea_ah4hc",
+  "_fixed": "__fixed_ah4hc_gg_",
+  "_sortable": "__sortable_ah4hc_gg_",
+  "__SSortWrapper": "___SSortWrapper_ah4hc_gg_",
+  "__SSortButton": "___SSortButton_ah4hc_gg_",
+  "__SHeadCheckboxCol": "___SHeadCheckboxCol_ah4hc_gg_",
+  "_use_primary": "_use_primary_ah4hc_gg_",
+  "_visibleSort": "__visibleSort_ah4hc_gg_",
+  "_sideIndents_wide": "_sideIndents_wide_ah4hc_gg_"
+});
+import { Column } from './Column';
+import { Group } from './Group';
+import { DataTableInternal } from '../DataTable/DataTable';
+import { SELECT_ALL } from '../DataTable/DataTable';
+import Checkbox from '@semcore/checkbox';
+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());
+    _defineProperty(_assertThisInitialized(_this), "handleSelectAll", function (value, event) {
+      var _this$asProps$onChang, _this$asProps;
+      (_this$asProps$onChang = (_this$asProps = _this.asProps).onChangeSelectAll) === null || _this$asProps$onChang === void 0 ? void 0 : _this$asProps$onChang.call(_this$asProps, value, event);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleClickSelectAll", function (value) {
+      return function (event) {
+        var _this$asProps$onChang2, _this$asProps2;
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        (_this$asProps$onChang2 = (_this$asProps2 = _this.asProps).onChangeSelectAll) === null || _this$asProps$onChang2 === void 0 ? void 0 : _this$asProps$onChang2.call(_this$asProps2, value, event);
+      };
+    });
+    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$asProps3 = this.asProps,
+        use = _this$asProps3.use,
+        gridAreaGroupMap = _this$asProps3.gridAreaGroupMap,
+        children = _this$asProps3.children;
+      return {
+        use: use,
+        gridArea: gridAreaGroupMap.get(index),
+        fixedColumnsMap: this.fixedColumnsMap,
+        withConfig: children === undefined
+      };
+    }
+  }, {
+    key: "getColumnProps",
+    value: function getColumnProps(_, index) {
+      var _this$asProps4 = this.asProps,
+        use = _this$asProps4.use,
+        columns = _this$asProps4.columns,
+        sort = _this$asProps4.sort,
+        onSortChange = _this$asProps4.onSortChange,
+        tableRef = _this$asProps4.tableRef,
+        gridTemplateColumns = _this$asProps4.gridTemplateColumns,
+        gridTemplateAreas = _this$asProps4.gridTemplateAreas,
+        sticky = _this$asProps4.sticky,
+        top = _this$asProps4.top,
+        selectedRows = _this$asProps4.selectedRows,
+        h = _this$asProps4.h,
+        getFixedStyle = _this$asProps4.getFixedStyle;
+      var column = columns[index];
+      if (index === 0 && selectedRows && columns[index + 1].fixed) {
+        column.fixed = 'left';
+      }
+      var _getFixedStyle = getFixedStyle(column),
+        _getFixedStyle2 = _slicedToArray(_getFixedStyle, 2),
+        name = _getFixedStyle2[0],
+        value = _getFixedStyle2[1];
+      var style = {};
+      if (top) {
+        style.top = "".concat(top, "px");
+      }
+      if (name !== undefined && value !== undefined) {
+        style[name] = value;
+        this.fixedColumnsMap.set(column.name, value);
+      }
+      return {
+        use: use,
+        'aria-colindex': index + 1,
+        style: style,
+        gridArea: column.gridArea,
+        fixed: column.fixed,
+        sticky: sticky,
+        borders: column.borders,
+        sort: sort,
+        onSortChange: onSortChange,
+        parent: column.parent,
+        sortableColumnDescribeId: this.sortableColumnDescribeId(),
+        columnIndex: index,
+        tableRef: tableRef,
+        gridTemplateColumns: gridTemplateColumns,
+        gridTemplateAreas: gridTemplateAreas,
+        h: h
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref2;
+      var SHead = Box;
+      var SHeadCheckboxCol = Head.Column;
+      var _this$asProps5 = this.asProps,
+        Children = _this$asProps5.Children,
+        styles = _this$asProps5.styles,
+        getI18nText = _this$asProps5.getI18nText,
+        children = _this$asProps5.children,
+        treeColumns = _this$asProps5.treeColumns,
+        selectedRows = _this$asProps5.selectedRows,
+        totalRows = _this$asProps5.totalRows;
+      var checked = selectedRows && selectedRows.length === totalRows && totalRows > 0;
+      var indeterminate = selectedRows && selectedRows.length > 0 && !checked;
+      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))), selectedRows && /*#__PURE__*/React.createElement(SHeadCheckboxCol, _ref2.cn("SHeadCheckboxCol", {
+        "name": SELECT_ALL.toString(),
+        "onClick": this.handleClickSelectAll(!checked)
+      }), /*#__PURE__*/React.createElement(Checkbox, _ref2.cn("Checkbox", {
+        "checked": checked,
+        "indeterminate": indeterminate,
+        "aria-label": getI18nText('DataTable.Header.selectAllCheckbox:aria-label'),
+        "onChange": this.handleSelectAll
+      }), /*#__PURE__*/React.createElement(Checkbox.Value, null, /*#__PURE__*/React.createElement(Checkbox.Value.Control, null), /*#__PURE__*/React.createElement(Checkbox.Value.CheckMark, {
+        mt: 0
+      })))), children ? /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, treeColumns.map(function (column, i) {
+        if ('columns' in column) {
+          var _column$columns;
+          return /*#__PURE__*/React.createElement(DataTableInternal.Head.Group, _extends({
+            key: column.name
+          }, column, {
+            name: (_column$columns = column.columns) === null || _column$columns === void 0 ? void 0 : _column$columns.map(function (c) {
+              return c.name;
+            }).join('/'),
+            title: ''
+          }));
+        }
+        return /*#__PURE__*/React.createElement(DataTableInternal.Head.Column, _extends({
+          key: column.name
+        }, column));
+      }))), /*#__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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Head.js","names":["React","Component","createComponent","Root","sstyled","Box","ScreenReaderOnly","style","_sstyled","insert","Column","Group","DataTableInternal","SELECT_ALL","Checkbox","HeadRoot","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","Map","value","event","_this$asProps$onChang","_this$asProps","asProps","onChangeSelectAll","_this$asProps$onChang2","_this$asProps2","preventDefault","stopPropagation","_createClass","key","sortableColumnDescribeId","uid","getGroupProps","_","index","_this$asProps3","use","gridAreaGroupMap","children","gridArea","get","fixedColumnsMap","withConfig","undefined","getColumnProps","_this$asProps4","columns","sort","onSortChange","tableRef","gridTemplateColumns","gridTemplateAreas","sticky","top","selectedRows","h","getFixedStyle","column","fixed","_getFixedStyle","_getFixedStyle2","_slicedToArray","name","set","borders","parent","columnIndex","render","_ref","_ref2","SHead","SHeadCheckboxCol","Head","_this$asProps5","Children","styles","getI18nText","treeColumns","totalRows","checked","indeterminate","createElement","Fragment","cn","_objectSpread","_assignProps","toString","handleClickSelectAll","handleSelectAll","Value","Control","CheckMark","mt","map","i","_column$columns","_extends","c","join","title"],"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 } from '@semcore/base-components';\nimport type Tooltip from '@semcore/tooltip';\n\nimport style from './style.shadow.css';\nimport { Column } from './Column';\nimport { Group } from './Group';\nimport { DataTableColumnProps } from './Column.types';\nimport { DataTableGroupProps } from './Group.type';\nimport { DataTableData } from '../DataTable/DataTable.types';\nimport { DataTableInternal } from '../DataTable/DataTable';\nimport { SELECT_ALL } from '../DataTable/DataTable';\nimport Checkbox from '@semcore/checkbox';\n\nclass HeadRoot<D extends DataTableData> extends Component<\n  DataTableHeadProps,\n  {},\n  {},\n  [],\n  HeadPropsInner<D>\n> {\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, children } = this.asProps;\n\n    return {\n      use,\n      gridArea: gridAreaGroupMap.get(index),\n      fixedColumnsMap: this.fixedColumnsMap,\n      withConfig: children === undefined,\n    };\n  }\n\n  getColumnProps(_: any, index: number) {\n    const {\n      use,\n      columns,\n      sort,\n      onSortChange,\n      tableRef,\n      gridTemplateColumns,\n      gridTemplateAreas,\n      sticky,\n      top,\n      selectedRows,\n      h,\n      getFixedStyle,\n    } = this.asProps;\n    const column = columns[index];\n\n    if (index === 0 && selectedRows && columns[index + 1].fixed) {\n      column.fixed = 'left';\n    }\n\n    const [name, value] = getFixedStyle(column);\n    const style: any = {};\n\n    if (top) {\n      style.top = `${top}px`;\n    }\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      style,\n      gridArea: column.gridArea,\n      fixed: column.fixed,\n      sticky,\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      h,\n    };\n  }\n\n  handleSelectAll = (value: boolean, event?: React.SyntheticEvent<HTMLElement>) => {\n    this.asProps.onChangeSelectAll?.(value, event);\n  };\n\n  handleClickSelectAll = (value: boolean) => (event?: React.SyntheticEvent<HTMLElement>) => {\n    event?.preventDefault();\n    event?.stopPropagation();\n    this.asProps.onChangeSelectAll?.(value, event);\n  };\n\n  render() {\n    const SHead = Root;\n    const SHeadCheckboxCol = Head.Column;\n    const { Children, styles, getI18nText, children, treeColumns, selectedRows, totalRows } =\n      this.asProps;\n\n    const checked = selectedRows && selectedRows.length === totalRows && totalRows > 0;\n    const indeterminate = selectedRows && selectedRows.length > 0 && !checked;\n\n    return sstyled(styles)(\n      <>\n        <SHead render={Box} role='row' aria-rowindex={1}>\n          {selectedRows && (\n            <SHeadCheckboxCol\n              name={SELECT_ALL.toString()}\n              onClick={this.handleClickSelectAll(!checked)}\n            >\n              <Checkbox\n                checked={checked}\n                indeterminate={indeterminate}\n                aria-label={getI18nText('DataTable.Header.selectAllCheckbox:aria-label')}\n                onChange={this.handleSelectAll}\n              >\n                <Checkbox.Value>\n                  <Checkbox.Value.Control />\n                  <Checkbox.Value.CheckMark mt={0} />\n                </Checkbox.Value>\n              </Checkbox>\n            </SHeadCheckboxCol>\n          )}\n\n          {children ? (\n            <Children />\n          ) : (\n            <>\n              {treeColumns.map((column, i) => {\n                if ('columns' in column) {\n                  return (\n                    <DataTableInternal.Head.Group\n                      key={column.name}\n                      {...column}\n                      name={column.columns?.map((c) => c.name).join('/')}\n                      title={''}\n                    />\n                  );\n                }\n\n                return <DataTableInternal.Head.Column key={column.name} {...column} />;\n              })}\n            </>\n          )}\n        </SHead>\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: <Tag extends 'div' | typeof Tooltip = 'div'>(\n    props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableColumnProps, {}, []>,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults;\n  Group: <Tag extends 'div' | typeof Tooltip = 'div'>(\n    props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableGroupProps, {}, []>,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults;\n};\n"],"mappings":"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"}

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

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

package/lib/es6/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  /**\n   * offset for sticky header\n   */\n  top?: number;\n\n  /**\n   * Height of header in px\n   */\n  h?: number;\n\n  /** Enable scroll bar element in header */\n  withScrollBar?: boolean;\n};\n\nexport type HeadPropsInner<D extends DataTableData> = {\n  use: DTUse;\n  tableRef: React.RefObject<HTMLElement>;\n  columns: DTColumn[];\n  treeColumns: DTColumn[];\n  compact: boolean;\n  sort?: DataTableProps<D>['sort'];\n  onSortChange?: DataTableProps<D>['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  sideIndents?: 'wide';\n\n  totalRows: number;\n  selectedRows?: number[];\n  onChangeSelectAll?: (value: boolean, event?: React.SyntheticEvent<HTMLElement>) => void;\n\n  getFixedStyle: (\n    cell: Pick<DTColumn, 'name' | 'fixed'>,\n  ) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];\n};\n"],"mappings":""}

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

@@ -0,0 +1,180 @@
+SHead, SGroupContainer {
+  display: contents;
+}
+
+SHead[sticky] SColumn, SHead[sticky] SGroup {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+SHead[sticky] SGroupContainer > SColumn {
+  position: sticky;
+  z-index: 2;
+}
+
+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;
+  overflow: hidden;
+}
+
+SGroup {
+  justify-content: center;
+  text-align: center;
+  background-color: var(--intergalactic-table-th-primary-cell, #f4f5f9);
+}
+
+SGroup[use='primary'] {
+  padding: var(--intergalactic-spacing-3x, 12px);
+
+  &:has(~ SColumn[visibleSort]) {
+    background-color: var(--intergalactic-table-th-primary-cell-hover, #e0e1e9);
+  }
+}
+SGroup[use='secondary'] {
+  padding: var(--intergalactic-spacing-2x, 8px);
+}
+
+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: 3;
+}
+
+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;
+}
+
+SHead[sideIndents='wide'] {
+  SColumn:first-child {
+    padding-left: var(--intergalactic-spacing-5x, 20px);
+  }
+  SColumn:last-child {
+    padding-right: var(--intergalactic-spacing-5x, 20px);
+  }
+}
+
+SHeadCheckboxCol {
+  cursor: pointer;
+}

package/lib/es6/index.js

@@ -1,3 +1,6 @@
-export { default } from './DataTable';
-export * from './DataTable';
+import { DataTable, ACCORDION, ROW_GROUP, UNIQ_ROW_KEY } from './components/DataTable/DataTable';
+var wrapDataTable = function wrapDataTable(wrapper) {
+  return wrapper;
+};
+export { DataTable, ACCORDION, ROW_GROUP, UNIQ_ROW_KEY, wrapDataTable };
 //# sourceMappingURL=index.js.map

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.ts"],"sourcesContent":["export { default } from './DataTable';\nexport * from './DataTable';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,aAAa;AACrC,cAAc,aAAa"}
+{"version":3,"file":"index.js","names":["DataTable","ACCORDION","ROW_GROUP","UNIQ_ROW_KEY","wrapDataTable","wrapper"],"sources":["../../src/index.ts"],"sourcesContent":["import { DataTable, ACCORDION, ROW_GROUP, UNIQ_ROW_KEY } from './components/DataTable/DataTable';\nimport type {\n  DataTableSort,\n  DataTableType,\n  DataTableData,\n} from './components/DataTable/DataTable.types';\nimport { Intergalactic } from '@semcore/core';\nimport React from 'react';\n\nconst wrapDataTable = <PropsExtending extends {}>(\n  wrapper: (\n    props: Intergalactic.InternalTypings.UntypeRefAndTag<\n      Intergalactic.InternalTypings.ComponentPropsNesting<DataTableType>\n    > &\n      PropsExtending,\n  ) => React.ReactNode,\n): DataTableType => wrapper as any;\n\nexport { DataTable, ACCORDION, ROW_GROUP, UNIQ_ROW_KEY, wrapDataTable };\nexport type { DataTableSort, DataTableData };\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,SAAS,EAAEC,SAAS,EAAEC,YAAY,QAAQ,kCAAkC;AAShG,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CACjBC,OAKoB;EAAA,OACFA,OAAO;AAAA,CAAO;AAElC,SAASL,SAAS,EAAEC,SAAS,EAAEC,SAAS,EAAEC,YAAY,EAAEC,aAAa"}

package/lib/es6/style/scroll-shadows.shadow.css

@@ -1,7 +1,47 @@
-SShadowHorizontal,
-SShadowVertical {
-  &:before,
-  &:after {
-    z-index: 1;
+SScrollArea {
+  width: fit-content;
+
+  SContainer {
+    overflow: unset;
+
+    &[scrollDirection='both'] {
+      overflow: auto;
+    }
+    &[scrollDirection='horizontal'] {
+      overflow-x: auto;
+      overflow-y: unset;
+    }
+    &[scrollDirection='vertical'] {
+      overflow-x: unset;
+      overflow-y: auto;
+    }
+    &[loading] {
+      overflow: hidden;
+    }
+
+    &[headerHeight] {
+      scroll-padding-top: var(--headerHeight);
+    }
+    &[leftScrollPadding] {
+      scroll-padding-left: var(--leftScrollPadding);
+    }
+    &[rightScrollPadding] {
+      scroll-padding-right: var(--rightScrollPadding);
+    }
+  }
+
+  SShadowVertical {
+    &:before {
+      display: none;
+    }
+    &:after {
+      z-index: 2;
+    }
+  }
+  SShadowHorizontal {
+    &:before,
+    &:after {
+      z-index: 2;
+    }
   }
 }

package/lib/es6/translations/en.json

@@ -1,3 +1,8 @@
 {
-  "sortableColumn": "Sortable"
+  "sortableColumn": "Sortable",
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Show details",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Hide details",
+  "DataTable.Header.selectAllCheckbox:aria-label": "All items",
+  "DataTable.allItemsSelected:aria-live": "All items selected",
+  "DataTable.allItemsDeselected:aria-live": "All items deselected"
 }