@synerise/ds-table 0.51.4 → 0.52.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.52.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.51.4...@synerise/ds-table@0.52.0) (2024-05-31)
+
+
+### Features
+
+* **table:** reveal table header in sticky virtual table ([315b0f8](https://github.com/synerise/synerise-design/commit/315b0f8b3068362881f23133966ac0a59003e253))
+
+
+
+
+
 ## [0.51.4](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.51.3...@synerise/ds-table@0.51.4) (2024-05-29)
 
 **Note:** Version bump only for package @synerise/ds-table

package/dist/VirtualTable/VirtualTable.js

@@ -59,18 +59,24 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
   var intl = useIntl();
   var tableLocale = useTableLocale(intl, locale);
   var listRef = useRef(null);
+  var listScrollTopRef = useRef(0);
   var outerListRef = useRef(null);
   var containerRef = useRef(null);
   var horizontalScrollRef = useRef(null);
   var customBodyOnScrollRef = useRef();
+
+  var _useState = useState(false),
+      isHeaderVisible = _useState[0],
+      setIsHeaderVisible = _useState[1];
+
+  var _useState2 = useState(null),
+      firstItem = _useState2[0],
+      setFirstItem = _useState2[1];
+
   var hasInfiniteScroll = Boolean(infiniteScroll);
   var isSticky = Boolean(sticky);
   var stickyScrollThreshold = sticky && sticky.scrollThreshold;
-
-  var _React$useState = React.useState(null),
-      firstItem = _React$useState[0],
-      setFirstItem = _React$useState[1];
-
+  var dataSourceEmpty = dataSource.length === 0;
   var updateFirstItem = useCallback(function (findFirstItem) {
     var prevFirstItemIndex = dataSource.findIndex(findFirstItem);
     setFirstItem(dataSource[0]);
@@ -86,9 +92,14 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
       }
     }
   }, [dataSource, setFirstItem, onScrollToRecordIndex]);
-  React.useEffect(function () {
+  useEffect(function () {
+    if (dataSourceEmpty) {
+      setIsHeaderVisible(false);
+    }
+  }, [dataSourceEmpty]);
+  useEffect(function () {
     try {
-      if (!(infiniteScroll != null && infiniteScroll.prevPage) || dataSource.length === 0) {
+      if (!(infiniteScroll != null && infiniteScroll.prevPage) || dataSourceEmpty) {
         return;
       }
 
@@ -129,8 +140,8 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
     } catch (error) {
       throw new Error('Cannot find firs item');
     }
-  }, [dataSource, dataSource.length, rowKey, firstItem, infiniteScroll, updateFirstItem]);
-  React.useEffect(function () {
+  }, [dataSource, dataSourceEmpty, rowKey, firstItem, infiniteScroll, updateFirstItem]);
+  useEffect(function () {
     var _infiniteScroll$prevP;
 
     if (listRef.current && infiniteScroll != null && (_infiniteScroll$prevP = infiniteScroll.prevPage) != null && _infiniteScroll$prevP.hasMore) {
@@ -147,13 +158,13 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
     };
   });
 
-  var _useState = useState(initialWidth),
-      tableWidth = _useState[0],
-      setTableWidth = _useState[1];
+  var _useState3 = useState(initialWidth),
+      tableWidth = _useState3[0],
+      setTableWidth = _useState3[1];
 
-  var _useState2 = useState(initialWidth),
-      scrollWidth = _useState2[0],
-      setScrollWidth = _useState2[1];
+  var _useState4 = useState(initialWidth),
+      scrollWidth = _useState4[0],
+      setScrollWidth = _useState4[1];
 
   var _useRowStar = useRowStar((rowStar == null ? void 0 : rowStar.starredRowKeys) || []),
       getRowStarColumn = _useRowStar.getRowStarColumn; // deprecated, verify if not used and remove
@@ -219,17 +230,26 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
         limit = _ref3.limit,
         independentSelectionExpandedRows = _ref3.independentSelectionExpandedRows,
         onChange = _ref3.onChange;
+
+    var handleChange = function handleChange(keys, records) {
+      if (isSticky && listScrollTopRef.current) {
+        setIsHeaderVisible(true);
+      }
+
+      onChange(keys, records);
+    };
+
     return /*#__PURE__*/React.createElement(RowSelectionColumn, {
       rowKey: rowKey,
       record: record,
       limit: limit,
       selectedRowKeys: selectedRowKeys,
       independentSelectionExpandedRows: independentSelectionExpandedRows,
-      onChange: onChange,
+      onChange: handleChange,
       selectedRecords: selectedRecords,
       tableLocale: locale
     });
-  }, [locale, rowKey, selectedRecords, selection]);
+  }, [isSticky, locale, rowKey, selectedRecords, selection]);
   var virtualColumns = useMemo(function () {
     return compact([!!selection && {
       width: 64,
@@ -407,6 +427,15 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
         }
 
         var roundedOffset = Math.ceil(scrollOffset);
+        listScrollTopRef.current = roundedOffset;
+
+        if (isSticky && scrollDirection === 'forward' && containerRef.current) {
+          setIsHeaderVisible(false);
+        }
+
+        if (isSticky && scrollDirection === 'backward' && containerRef.current) {
+          setIsHeaderVisible(roundedOffset > 0);
+        }
 
         if (scrollDirection === 'forward' && roundedOffset >= listMaxScroll - LOAD_DATA_OFFSET && typeof (infiniteScroll == null ? void 0 : infiniteScroll.onScrollEndReach) === 'function') {
           infiniteScroll.onScrollEndReach();
@@ -521,7 +550,8 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
     isSticky: isSticky,
     style: isSticky ? {} : relativeInlineStyle,
     key: "relative-container",
-    ref: containerRef
+    ref: containerRef,
+    isHeaderVisible: isHeaderVisible
   }, /*#__PURE__*/React.createElement(ResizeObserver, {
     onResize: function onResize(_ref6) {
       var offsetWidth = _ref6.offsetWidth;

package/dist/VirtualTable/VirtualTable.styles.d.ts

@@ -23,5 +23,6 @@ export declare const StickyScrollbarContent: import("styled-components").StyledC
 export declare const ColWrapper: import("styled-components").StyledComponent<"div", any, ColWrapperProps, never>;
 export declare const VirtualTableWrapper: import("styled-components").StyledComponent<"div", any, {
     isSticky: boolean;
+    isHeaderVisible?: boolean | undefined;
 }, never>;
 export {};

package/dist/VirtualTable/VirtualTable.styles.js

@@ -27,19 +27,19 @@ export var VirtualListWrapper = styled.div.withConfig({
   displayName: "VirtualTablestyles__VirtualListWrapper",
   componentId: "aehkhc-3"
 })(["", " overscroll-behavior-x:contain;"], function (props) {
-  return props.isSticky && css(["width:", "px;overflow:overlay hidden;scrollbar-color:transparent;scrollbar-width:none;::-webkit-scrollbar-thumb{background-color:transparent;}::-webkit-scrollbar{display:none;}:after{content:'';width:10px;height:", "px;display:block;}"], props.listWidth, props.listHeight);
+  return props.isSticky && css(["width:", ";overflow:overlay hidden;scrollbar-color:transparent;scrollbar-width:none;::-webkit-scrollbar-thumb{background-color:transparent;}::-webkit-scrollbar{display:none;}:after{content:'';width:10px;height:", ";display:block;}"], numberToPixels(props.listWidth), numberToPixels(props.listHeight));
 });
 export var StickyScrollbar = styled(Scrollbar).withConfig({
   displayName: "VirtualTablestyles__StickyScrollbar",
   componentId: "aehkhc-4"
-})(["position:sticky;bottom:0;z-index:2;transform:translate(5px,", "px);"], function (props) {
-  return props.offset;
+})(["position:sticky;bottom:0;z-index:2;transform:translate(5px,", ");"], function (props) {
+  return numberToPixels(props.offset);
 });
 export var StickyScrollbarContent = styled.div.withConfig({
   displayName: "VirtualTablestyles__StickyScrollbarContent",
   componentId: "aehkhc-5"
-})(["width:", "px;height:10px;"], function (props) {
-  return props.scrollWidth;
+})(["width:", ";height:10px;"], function (props) {
+  return numberToPixels(props.scrollWidth);
 });
 export var ColWrapper = styled.div.withConfig({
   displayName: "VirtualTablestyles__ColWrapper",
@@ -56,5 +56,5 @@ export var VirtualTableWrapper = styled.div.withConfig({
   displayName: "VirtualTablestyles__VirtualTableWrapper",
   componentId: "aehkhc-7"
 })(["", ""], function (props) {
-  return props.isSticky ? '' : 'position: relative;';
+  return props.isSticky ? css([".ant-table-title{position:sticky;top:-96px;z-index:99;}.ant-table-title,.ant-table-sticky-header{transition:top 0.3s ease-in-out;}", ";"], props.isHeaderVisible && css([".ant-table-title{top:-24px;}.ant-table-sticky-header{top:48px !important;}"])) : css(["position:relative;"]);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table",
-  "version": "0.51.4",
+  "version": "0.52.0",
   "description": "Table UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -38,7 +38,7 @@
     "@synerise/ds-button": "^0.20.1",
     "@synerise/ds-button-group": "^0.7.1",
     "@synerise/ds-checkbox": "^0.12.1",
-    "@synerise/ds-column-manager": "^0.11.56",
+    "@synerise/ds-column-manager": "^0.11.57",
     "@synerise/ds-data-format": "^0.5.0",
     "@synerise/ds-dropdown": "^0.18.0",
     "@synerise/ds-flag": "^0.5.0",
@@ -53,8 +53,8 @@
     "@synerise/ds-search": "^0.8.92",
     "@synerise/ds-select": "^0.16.2",
     "@synerise/ds-skeleton": "^0.6.1",
-    "@synerise/ds-status": "^0.6.7",
-    "@synerise/ds-tags": "^0.8.46",
+    "@synerise/ds-status": "^0.6.8",
+    "@synerise/ds-tags": "^0.9.0",
     "@synerise/ds-tooltip": "^0.14.29",
     "@synerise/ds-typography": "^0.15.0",
     "@synerise/ds-utils": "^0.27.0",
@@ -79,5 +79,5 @@
   "devDependencies": {
     "@testing-library/react": "10.0.1"
   },
-  "gitHead": "6bd94c78745df68ee3b853120a863ab24fc233ef"
+  "gitHead": "9293cda82b432c10af1d230262afcc6f08f3dd99"
 }