@semcore/data-table 17.0.1 → 17.0.2-prerelease.0

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

@@ -6,7 +6,6 @@ import { Box, ScrollArea } from '@semcore/base-components';
 import { Component, createComponent, lastInteraction, Root, sstyled } from '@semcore/core';
 import canUseDOM from '@semcore/core/lib/utils/canUseDOM';
 import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
-import findComponent from '@semcore/core/lib/utils/findComponent';
 import { hasParent } from '@semcore/core/lib/utils/hasParent';
 import trottle from '@semcore/core/lib/utils/rafTrottle';
 import { forkRef } from '@semcore/core/lib/utils/ref';
@@ -15,39 +14,43 @@ import { isFocusInside, hasFocusableIn } from '@semcore/core/lib/utils/use/useFo
 import { NoData } from '@semcore/widget-empty';
 import * as React from 'react';
 /*!__reshadow-styles__:"./dataTable.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDataTable_ldhu1_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content;grid-auto-rows:min-content}.___SDataTable_ldhu1_gg_.__isDataEmpty_ldhu1_gg_{display:block;align-items:initial;min-width:initial}.___SDataTable_ldhu1_gg_.__gridTemplateColumns_ldhu1_gg_{grid-template-columns:var(--gridTemplateColumns_ldhu1)}.___SDataTable_ldhu1_gg_.__gridTemplateAreas_ldhu1_gg_{grid-template-areas:var(--gridTemplateAreas_ldhu1)}.___SDataTable_ldhu1_gg_.__gridTemplateRows_ldhu1_gg_{grid-template-rows:var(--gridTemplateRows_ldhu1)}", /*__inner_css_end__*/"ldhu1_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes moveBarWithScroll_pypp4{0%{transform:translateY(0)}to{transform:translateY(calc(var(--global-scroll-to) - var(--global-header-height)))}}.___SDataTable_pypp4_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content;grid-auto-rows:min-content;scroll-behavior:smooth}.___SDataTable_pypp4_gg_.__isDataEmpty_pypp4_gg_{display:block;align-items:initial;min-width:initial}.___SDataTable_pypp4_gg_.__gridTemplateColumns_pypp4_gg_{grid-template-columns:var(--gridTemplateColumns_pypp4)}.___SDataTable_pypp4_gg_.__gridTemplateAreas_pypp4_gg_{grid-template-areas:var(--gridTemplateAreas_pypp4)}.___SDataTable_pypp4_gg_.__gridTemplateRows_pypp4_gg_{grid-template-rows:var(--gridTemplateRows_pypp4)}.___SScrollAreaBarInHeader_pypp4_gg_.__withAnimation_pypp4_gg_{animation-name:moveBarWithScroll_pypp4;animation-timeline:--table-sticky-timeline;animation-range-start:exit-crossing calc(-1*var(--global-header-top));animation-range-end:exit-crossing calc(100% - var(--global-header-top) - var(--global-header-height));animation-timing-function:linear;animation-fill-mode:both}", /*__inner_css_end__*/"pypp4_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SDataTable": "___SDataTable_ldhu1_gg_",
-  "_isDataEmpty": "__isDataEmpty_ldhu1_gg_",
-  "_gridTemplateColumns": "__gridTemplateColumns_ldhu1_gg_",
-  "--gridTemplateColumns": "--gridTemplateColumns_ldhu1",
-  "_gridTemplateAreas": "__gridTemplateAreas_ldhu1_gg_",
-  "--gridTemplateAreas": "--gridTemplateAreas_ldhu1",
-  "_gridTemplateRows": "__gridTemplateRows_ldhu1_gg_",
-  "--gridTemplateRows": "--gridTemplateRows_ldhu1"
+  "__SDataTable": "___SDataTable_pypp4_gg_",
+  "_isDataEmpty": "__isDataEmpty_pypp4_gg_",
+  "_gridTemplateColumns": "__gridTemplateColumns_pypp4_gg_",
+  "--gridTemplateColumns": "--gridTemplateColumns_pypp4",
+  "_gridTemplateAreas": "__gridTemplateAreas_pypp4_gg_",
+  "--gridTemplateAreas": "--gridTemplateAreas_pypp4",
+  "_gridTemplateRows": "__gridTemplateRows_pypp4_gg_",
+  "--gridTemplateRows": "--gridTemplateRows_pypp4",
+  "__SScrollAreaBarInHeader": "___SScrollAreaBarInHeader_pypp4_gg_",
+  "_withAnimation": "__withAnimation_pypp4_gg_",
+  "@moveBarWithScroll": "moveBarWithScroll_pypp4"
 });
+import { ScrollBars } from './ScrollBars';
 import { SelectableRows } from '../../store/SelectableRows';
 /*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
-const scrollStyles = (/*__reshadow_css_start__*/_sstyled2.insert(/*__inner_css_start__*/".___SScrollArea_15e3j_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_15e3j_gg_ .___SContainer_15e3j_gg_{overflow:visible;overflow:initial}.___SScrollArea_15e3j_gg_ .___SContainer_15e3j_gg_._scrollDirection_both_15e3j_gg_{overflow:auto}.___SScrollArea_15e3j_gg_ .___SContainer_15e3j_gg_._scrollDirection_both_15e3j_gg_.__loading_15e3j_gg_,.___SScrollArea_15e3j_gg_ .___SContainer_15e3j_gg_._scrollDirection_horizontal_15e3j_gg_.__loading_15e3j_gg_,.___SScrollArea_15e3j_gg_ .___SContainer_15e3j_gg_._scrollDirection_vertical_15e3j_gg_.__loading_15e3j_gg_{overflow:hidden}.___SScrollArea_15e3j_gg_ .___SContainer_15e3j_gg_._scrollDirection_horizontal_15e3j_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_15e3j_gg_ .___SContainer_15e3j_gg_._scrollDirection_vertical_15e3j_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_15e3j_gg_ .___SContainer_15e3j_gg_.__headerHeight_15e3j_gg_{scroll-padding-top:var(--headerHeight_15e3j)}.___SScrollArea_15e3j_gg_ .___SContainer_15e3j_gg_.__leftScrollPadding_15e3j_gg_{scroll-padding-left:var(--leftScrollPadding_15e3j)}.___SScrollArea_15e3j_gg_ .___SContainer_15e3j_gg_.__rightScrollPadding_15e3j_gg_{scroll-padding-right:var(--rightScrollPadding_15e3j)}.___SScrollArea_15e3j_gg_ .___SShadowHorizontal_15e3j_gg_::before,.___SScrollArea_15e3j_gg_ .___SShadowHorizontal_15e3j_gg_:after,.___SScrollArea_15e3j_gg_ .___SShadowVertical_15e3j_gg_::after{z-index:20}.___SScrollArea_15e3j_gg_ .___SShadowHorizontal_15e3j_gg_.__leftOffset_15e3j_gg_::before,.___SScrollArea_15e3j_gg_ .___SShadowHorizontal_15e3j_gg_.__rightOffset_15e3j_gg_::after,.___SScrollArea_15e3j_gg_ .___SShadowVertical_15e3j_gg_::before{display:none}", /*__inner_css_end__*/"15e3j_gg_"),
+const scrollStyles = (/*__reshadow_css_start__*/_sstyled2.insert(/*__inner_css_start__*/".___SScrollArea_1aftg_gg_{width:-moz-fit-content;width:fit-content;view-timeline:--table-sticky-timeline block}.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_{overflow:visible;overflow:initial}.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_._scrollDirection_both_1aftg_gg_{overflow:auto}.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_._scrollDirection_both_1aftg_gg_.__loading_1aftg_gg_,.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_._scrollDirection_horizontal_1aftg_gg_.__loading_1aftg_gg_,.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_._scrollDirection_vertical_1aftg_gg_.__loading_1aftg_gg_{overflow:hidden}.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_._scrollDirection_horizontal_1aftg_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_._scrollDirection_vertical_1aftg_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_.__headerHeight_1aftg_gg_{scroll-padding-top:var(--headerHeight_1aftg)}.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_.__leftScrollPadding_1aftg_gg_{scroll-padding-left:var(--leftScrollPadding_1aftg)}.___SScrollArea_1aftg_gg_ .___SContainer_1aftg_gg_.__rightScrollPadding_1aftg_gg_{scroll-padding-right:var(--rightScrollPadding_1aftg)}.___SScrollArea_1aftg_gg_ .___SShadowHorizontal_1aftg_gg_::before,.___SScrollArea_1aftg_gg_ .___SShadowHorizontal_1aftg_gg_:after,.___SScrollArea_1aftg_gg_ .___SShadowVertical_1aftg_gg_::after{z-index:20}.___SScrollArea_1aftg_gg_ .___SShadowHorizontal_1aftg_gg_.__leftOffset_1aftg_gg_::before,.___SScrollArea_1aftg_gg_ .___SShadowHorizontal_1aftg_gg_.__rightOffset_1aftg_gg_::after,.___SScrollArea_1aftg_gg_ .___SShadowVertical_1aftg_gg_::before{display:none}", /*__inner_css_end__*/"1aftg_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SScrollArea": "___SScrollArea_15e3j_gg_",
-  "__SContainer": "___SContainer_15e3j_gg_",
-  "_scrollDirection_both": "_scrollDirection_both_15e3j_gg_",
-  "_loading": "__loading_15e3j_gg_",
-  "_scrollDirection_horizontal": "_scrollDirection_horizontal_15e3j_gg_",
-  "_scrollDirection_vertical": "_scrollDirection_vertical_15e3j_gg_",
-  "_headerHeight": "__headerHeight_15e3j_gg_",
-  "--headerHeight": "--headerHeight_15e3j",
-  "_leftScrollPadding": "__leftScrollPadding_15e3j_gg_",
-  "--leftScrollPadding": "--leftScrollPadding_15e3j",
-  "_rightScrollPadding": "__rightScrollPadding_15e3j_gg_",
-  "--rightScrollPadding": "--rightScrollPadding_15e3j",
-  "__SShadowVertical": "___SShadowVertical_15e3j_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_15e3j_gg_",
-  "_leftOffset": "__leftOffset_15e3j_gg_",
-  "_rightOffset": "__rightOffset_15e3j_gg_"
+  "__SScrollArea": "___SScrollArea_1aftg_gg_",
+  "__SContainer": "___SContainer_1aftg_gg_",
+  "_scrollDirection_both": "_scrollDirection_both_1aftg_gg_",
+  "_loading": "__loading_1aftg_gg_",
+  "_scrollDirection_horizontal": "_scrollDirection_horizontal_1aftg_gg_",
+  "_scrollDirection_vertical": "_scrollDirection_vertical_1aftg_gg_",
+  "_headerHeight": "__headerHeight_1aftg_gg_",
+  "--headerHeight": "--headerHeight_1aftg",
+  "_leftScrollPadding": "__leftScrollPadding_1aftg_gg_",
+  "--leftScrollPadding": "--leftScrollPadding_1aftg",
+  "_rightScrollPadding": "__rightScrollPadding_1aftg_gg_",
+  "--rightScrollPadding": "--rightScrollPadding_1aftg",
+  "__SShadowVertical": "___SShadowVertical_1aftg_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_1aftg_gg_",
+  "_leftOffset": "__leftOffset_1aftg_gg_",
+  "_rightOffset": "__rightOffset_1aftg_gg_"
 });
 import { localizedMessages } from '../../translations/__intergalactic-dynamic-locales';
 import { Body } from '../Body/Body';
@@ -59,10 +62,9 @@ export const ACCORDION = Symbol('accordion');
 export const ROW_GROUP = Symbol('ROW_GROUP');
 export const UNIQ_ROW_KEY = Symbol('UNIQ_ROW_KEY');
 export const IS_EMPTY_DATA_ROW = Symbol('IS_EMPTY_DATA_ROW');
-export const SELECT_ALL = Symbol('SELECT_ALL');
+export const SELECT_ALL = 'SELECT_ALL_ROWS';
 export const ROW_INDEX = Symbol('ROW_INDEX');
 export const GRID_ROW_INDEX = Symbol('GRID_ROW_INDEX');
-const SCROLL_BAR_HEIGHT = 12;
 class DataTableRoot extends Component {
   static getDerivedStateFromProps(props, state) {
     if (props.expandedRows === state.expandedRows || props.expandedRows === undefined) {
@@ -107,30 +109,29 @@ class DataTableRoot extends Component {
     _defineProperty(this, "handleDocumentScroll", trottle(() => {
       const tableContainer = this.tableContainerRef.current;
       if (!tableContainer) return;
-      const tableContainerTop = tableContainer.getBoundingClientRect().top;
+      const tableRect = tableContainer.getBoundingClientRect();
+      const tableContainerTop = tableRect.top;
       const {
         headerProps
       } = this.asProps;
       const headerContainer = this.headerRef.current;
-      const elements = headerContainer?.querySelectorAll('[role="columnheader"], [data-ui-name="Head.Group"]');
       const top = tableContainerTop - (headerProps?.top ?? 0);
       const headerScrollBar = headerProps?.withScrollBar ? this.scrollAreaRef.current?.querySelector(`[role=scrollbar][aria-orientation=horizontal]`) : undefined;
-      if (top && top < 0) {
-        const translate = `translateY(${Math.abs(top)}px)`;
-        elements?.forEach(column => {
-          if (column instanceof HTMLElement) {
-            column.style.setProperty('transform', translate);
-          }
-        });
+      if (top && top < 0 && Math.abs(top) <= tableContainer.clientHeight) {
+        let translate = `translateY(${Math.abs(top)}px)`;
+        if (tableRect.bottom <= this.getHeaderHeight()) {
+          translate = `translateY(${Math.abs(top) - this.getHeaderHeight() - tableRect.bottom}px)`;
+        }
+        if (headerContainer instanceof HTMLElement) {
+          headerContainer.style.setProperty('--global-scroll-translate', `${Math.abs(top)}px`);
+        }
         if (headerScrollBar instanceof HTMLElement) {
           headerScrollBar.style.setProperty('transform', translate);
         }
       } else {
-        elements?.forEach(column => {
-          if (column instanceof HTMLElement) {
-            column.style.removeProperty('transform');
-          }
-        });
+        if (headerContainer instanceof HTMLElement) {
+          headerContainer.style.removeProperty('--global-scroll-translate');
+        }
         if (headerScrollBar instanceof HTMLElement) {
           headerScrollBar.style.removeProperty('transform');
         }
@@ -467,7 +468,10 @@ class DataTableRoot extends Component {
       if (this.containerResizeEndTimeoutId) {
         clearTimeout(this.containerResizeEndTimeoutId);
       }
-      this.containerResizeEndTimeoutId = setTimeout(this.calculateVerticalShadow, 0);
+      this.containerResizeEndTimeoutId = setTimeout(() => {
+        this.calculateVerticalShadow();
+        this.calculateStickyHeaderAnimation();
+      }, 0);
       this.asProps.onResize?.(entries, observer);
     });
     _defineProperty(this, "getScrollOffsetValue", () => {
@@ -553,7 +557,13 @@ class DataTableRoot extends Component {
       });
     }
     if (headerProps?.sticky && canUseDOM() && this.scrollDirection === 'horizontal') {
-      document.addEventListener('scroll', this.handleDocumentScroll);
+      if (!this.withAnimation) {
+        document.addEventListener('scroll', this.handleDocumentScroll, {
+          passive: true
+        });
+      } else {
+        this.calculateStickyHeaderAnimation();
+      }
     }
   }
   componentDidUpdate(prevProps) {
@@ -583,6 +593,29 @@ class DataTableRoot extends Component {
     }
     this.state.expandedRows?.clear();
   }
+  calculateStickyHeaderAnimation() {
+    const {
+      headerProps
+    } = this.asProps;
+    const scrollArea = this.scrollAreaRef.current;
+    const table = this.tableContainerRef.current;
+    if (scrollArea && table) {
+      const currentHeaderHeight = scrollArea.style.getPropertyValue('--global-header-height');
+      const newHeaderHeight = `${this.getHeaderHeight()}px`;
+      scrollArea.style.setProperty('--global-scroll-to', `${table.offsetHeight}px`);
+      scrollArea.style.setProperty('--global-header-top', `${headerProps?.top ?? 0}px`);
+      scrollArea.style.setProperty('--global-header-height', newHeaderHeight);
+      if (currentHeaderHeight && currentHeaderHeight !== newHeaderHeight) {
+        this.forceUpdate();
+      }
+    }
+  }
+  get withAnimation() {
+    if (canUseDOM()) {
+      return CSS.supports('(animation-timeline: view()) and (animation-range: normal)');
+    }
+    return false;
+  }
   get totalRows() {
     const {
       totalRows
@@ -681,7 +714,8 @@ class DataTableRoot extends Component {
       onCellClick: this.handleCellClick,
       shadowVertical,
       scrollDirection: this.scrollDirection,
-      isDataEmpty: this.isDataEmpty
+      isDataEmpty: this.isDataEmpty,
+      withAnimation: this.withAnimation && this.scrollDirection === 'horizontal' && !this.isDataEmpty
     };
   }
   getBodyProps() {
@@ -803,10 +837,8 @@ class DataTableRoot extends Component {
       gridTemplateColumns,
       gridTemplateAreas
     } = this.gridSettings;
-    const Head = findComponent(Children, ['DataTable.Head']);
-    const headerPropsToCheck = headerProps ?? Head?.props;
     const headerHeight = headerProps?.h || this.getHeaderHeight();
-    const topOffset = headerPropsToCheck?.sticky || headerPropsToCheck?.withScrollBar ? headerHeight : undefined;
+    const topOffset = headerProps?.sticky || headerProps?.withScrollBar ? headerHeight : undefined;
     const width = w ?? (this.columns.some(c => c.gtcWidth === 'auto' || c.gtcWidth === '1fr') ? '100%' : undefined);
     let gridTemplateRows = undefined;
     if (virtualScroll && typeof virtualScroll !== 'boolean' && 'rowHeight' in virtualScroll) {
@@ -865,16 +897,11 @@ class DataTableRoot extends Component {
         "use:hMax": undefined,
         "use:hMin": undefined
       }, _ref)
-    }), children ? /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DataTable.Head, null), /*#__PURE__*/React.createElement(DataTable.Body, null)))), headerPropsToCheck?.withScrollBar && topOffset && !loading && /*#__PURE__*/React.createElement(ScrollArea.Bar, {
-      orientation: "horizontal",
-      top: topOffset - SCROLL_BAR_HEIGHT,
-      zIndex: 20
-    }), !loading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollArea.Bar, {
-      orientation: "horizontal",
-      zIndex: 20
-    }), /*#__PURE__*/React.createElement(ScrollArea.Bar, {
-      orientation: "vertical",
-      zIndex: 20
+    }), children ? /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DataTable.Head, null), /*#__PURE__*/React.createElement(DataTable.Body, null)))), /*#__PURE__*/React.createElement(ScrollBars, _ref2.cn("ScrollBars", {
+      "loading": loading,
+      "topOffset": topOffset,
+      "withHeaderScrollBar": headerProps?.withScrollBar,
+      "withAnimation": this.withAnimation
     })), selectedRows !== undefined && !Array.isArray(selectedRows) && /*#__PURE__*/React.createElement(SRReactiveAnnouncer, _ref2.cn("SRReactiveAnnouncer", {
       "selectedRows": selectedRows,
       "getI18nText": getI18nText
@@ -903,7 +930,7 @@ class DataTableRoot extends Component {
     const treeColumns = [];
     if (selectedRows) {
       const column = {
-        name: SELECT_ALL.toString(),
+        name: SELECT_ALL,
         gtcWidth: 'min-content',
         alignItems: 'flex-start',
         children: ''