@synerise/ds-table 0.49.8 → 0.50.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.49.8...@synerise/ds-table@0.50.0) (2024-05-08)
+
+
+### Bug Fixes
+
+* **table:** avatar label cell styles ([9613e00](https://github.com/synerise/synerise-design/commit/9613e008950ebd402e754ea6157dd155d681f5eb))
+
+
+### Features
+
+* **table:** virtual table - responsive columns ([a43786e](https://github.com/synerise/synerise-design/commit/a43786e3dc0acbda31eae62efb0cc6e5f838d344))
+
+
+
+
+
 ## [0.49.8](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.49.7...@synerise/ds-table@0.49.8) (2024-04-29)
 
 

package/dist/Cell/AvatarLabel/AvatarLabel.styles.js

@@ -15,7 +15,7 @@ export var Avatar = styled.div.withConfig({
 export var Description = styled.div.withConfig({
   displayName: "AvatarLabelstyles__Description",
   componentId: "sc-1485c9p-2"
-})(["display:flex;min-width:0;flex-direction:column;align-items:flex-start;justify-content:center;max-height:40px;overflow:hidden;"]);
+})(["display:flex;min-width:0;flex-direction:column;align-items:flex-start;justify-content:center;"]);
 export var AvatarLink = styled.a.withConfig({
   displayName: "AvatarLabelstyles__AvatarLink",
   componentId: "sc-1485c9p-3"
@@ -31,10 +31,12 @@ export var Title = styled(Text).withConfig({
 export var Labels = styled.span.withConfig({
   displayName: "AvatarLabelstyles__Labels",
   componentId: "sc-1485c9p-5"
-})(["font-size:13px;line-height:1.38;font-weight:400;color:", ";", ";"], function (props) {
+})(["font-size:13px;line-height:1.38;font-weight:400;color:", ";", ";color:", ";"], function (props) {
   return props.theme.palette['grey-700'];
 }, function (props) {
   return props.ellipsis && css(["text-overflow:ellipsis;overflow:hidden;max-width:", ";"], props.maxWidth ? props.maxWidth + "px" : '100%');
+}, function (props) {
+  return props.theme.palette['grey-700'];
 });
 export var Label = styled.span.withConfig({
   displayName: "AvatarLabelstyles__Label",

package/dist/VirtualTable/VirtualTable.js

@@ -21,7 +21,7 @@ import OuterListElement from '../InfiniteScroll/OuterListElement';
 import DSTable from '../Table';
 import VirtualTableRow, { INFINITE_LOADED_ITEM_HEIGHT } from './VirtualTableRow';
 import * as S from './VirtualTable.styles';
-import { useTableLocale, calculatePixels } from '../utils';
+import { useTableLocale, calculateColumnWidths } from '../utils';
 import { useRowKey } from '../hooks/useRowKey';
 import { useRowStar } from '../hooks/useRowStar';
 import { RowSelectionColumn } from '../RowSelection';
@@ -239,61 +239,46 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
     }, !!rowStar && rowStarColumn].concat(columns));
   }, [selection, renderRowSelection, rowStar, rowStarColumn, columns]);
   var mergedColumns = useMemo(function () {
-    var widthColumnCount = virtualColumns.filter(function (_ref4) {
-      var width = _ref4.width;
-      return !width;
-    }).length;
-    var definedWidth = virtualColumns.reduce(function (total, _ref5) {
-      var width = _ref5.width;
-      var widthInPx = calculatePixels(width) || 0;
-      return total + widthInPx;
-    }, 0);
-    var columnsWithWidth = virtualColumns == null ? void 0 : virtualColumns.map(function (column) {
-      if (column.width) {
-        return _objectSpread({}, column, {
-          width: calculatePixels(column.width)
-        });
-      }
-
-      var calculatedWidth = Math.floor((tableWidth - definedWidth) / widthColumnCount);
-      return _objectSpread({}, column, {
-        width: calculatedWidth > 0 ? calculatedWidth : 1
-      });
-    });
+    var columnWidths = calculateColumnWidths(virtualColumns, tableWidth);
     var cumulativeRightOffset = 0;
     var cumulativeLeftOffset = 0;
+    var firstFixedRightFound = false;
 
-    var _columnsWithWidth$red = columnsWithWidth.reduce(function (prev, column, index) {
+    var _virtualColumns$reduc = virtualColumns.reduce(function (prev, column, index) {
       var left = cumulativeLeftOffset;
       var right = cumulativeRightOffset;
+      var width = columnWidths[index];
 
       if (column.fixed === 'right') {
-        if (column.width) {
-          cumulativeRightOffset += column.width;
+        cumulativeRightOffset += width;
+        var fixedFirst = !firstFixedRightFound;
+
+        if (!firstFixedRightFound) {
+          firstFixedRightFound = true;
         }
 
         return _objectSpread({}, prev, {
           fixedRight: [].concat(prev.fixedRight, [_objectSpread({}, column, {
-            fixedFirst: index === columnsWithWidth.length - 1,
-            right: right
+            fixedFirst: fixedFirst,
+            right: right,
+            width: width
           })])
         });
       }
 
       if (column.fixed === 'left') {
-        if (column.width) {
-          cumulativeLeftOffset += column.width;
-        }
-
+        cumulativeLeftOffset += width;
         var prevFixedLeft = prev.fixedLeft;
         var newFixedLeft = prevFixedLeft.length ? [].concat(prevFixedLeft, [_objectSpread({}, prevFixedLeft.pop(), {
           fixedFirst: false
         }), _objectSpread({}, column, {
           fixedFirst: true,
-          left: left
+          left: left,
+          width: width
         })]) : [].concat(prevFixedLeft, [_objectSpread({}, column, {
           fixedFirst: true,
-          left: left
+          left: left,
+          width: width
         })]);
         return _objectSpread({}, prev, {
           fixedLeft: newFixedLeft
@@ -301,19 +286,21 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
       }
 
       return _objectSpread({}, prev, {
-        remaining: [].concat(prev.remaining, [column])
+        remaining: [].concat(prev.remaining, [_objectSpread({}, column, {
+          width: width
+        })])
       });
     }, {
       fixedLeft: [],
       fixedRight: [],
       remaining: []
     }),
-        fixedLeft = _columnsWithWidth$red.fixedLeft,
-        remaining = _columnsWithWidth$red.remaining,
-        fixedRight = _columnsWithWidth$red.fixedRight;
+        fixedLeft = _virtualColumns$reduc.fixedLeft,
+        remaining = _virtualColumns$reduc.remaining,
+        fixedRight = _virtualColumns$reduc.fixedRight;
 
     return [].concat(fixedLeft, remaining, fixedRight);
-  }, [virtualColumns, tableWidth]);
+  }, [tableWidth, virtualColumns]);
   var infiniteLoaderOffset = useMemo(function () {
     var _infiniteScroll$prevP3;
 
@@ -323,9 +310,9 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
 
     return infiniteLoaderItemHeight;
   }, [isSticky, infiniteScroll == null || (_infiniteScroll$prevP4 = infiniteScroll.prevPage) == null ? void 0 : _infiniteScroll$prevP4.hasMore]);
-  var listInnerElementType = forwardRef(function (_ref6, innerElementRef) {
-    var style = _ref6.style,
-        rest = _objectWithoutPropertiesLoose(_ref6, _excluded);
+  var listInnerElementType = forwardRef(function (_ref4, innerElementRef) {
+    var style = _ref4.style,
+        rest = _objectWithoutPropertiesLoose(_ref4, _excluded);
 
     return /*#__PURE__*/React.createElement(S.InnerListElement, _extends({
       ref: innerElementRef,
@@ -358,7 +345,7 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
       cellHeight: cellHeight,
       defaultTableProps: defaultTableProps
     };
-  }, [cellHeight, infiniteScroll, mergedColumns, onRowClick, rowStar, selection]);
+  }, [mergedColumns, selection, rowStar, onRowClick, infiniteScroll, cellHeight]);
   var offsetScroll = sticky && sticky !== true ? sticky.offsetScroll : 0;
   var connectObject = useMemo(function () {
     var obj = {};
@@ -411,9 +398,9 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
       var listHeight = data.length * cellHeight - scroll.y + infiniteLoaderOffset;
       var listMaxScroll = stickyScrollThreshold && infiniteScroll != null && infiniteScroll.maxScroll ? (infiniteScroll == null ? void 0 : infiniteScroll.maxScroll) - stickyScrollThreshold : listHeight;
 
-      var handleListScroll = function handleListScroll(_ref7) {
-        var scrollOffset = _ref7.scrollOffset,
-            scrollDirection = _ref7.scrollDirection;
+      var handleListScroll = function handleListScroll(_ref5) {
+        var scrollOffset = _ref5.scrollOffset,
+            scrollDirection = _ref5.scrollDirection;
 
         if (loading || listMaxScroll <= 0) {
           return;
@@ -473,7 +460,7 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
         layout: "vertical",
         itemCount: data.length,
         itemSize: cellHeight,
-        width: "100%",
+        width: scrollWidth,
         itemData: itemData,
         itemKey: function itemKey(index) {
           var key = getRowKey(data[index]); // @ts-ignore
@@ -507,7 +494,7 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
     }
 
     return renderVirtualList(rawData);
-  }, [connectObject, expandable == null ? void 0 : expandable.expandedRowKeys, cellHeight, scroll.y, isSticky, stickyScrollThreshold, infiniteScroll, createItemData, tableWidth, onItemsRendered, outerElement, listInnerElementType, loading, offsetScroll, getRowKey, infiniteLoaderOffset]);
+  }, [connectObject, expandable == null ? void 0 : expandable.expandedRowKeys, cellHeight, scroll.y, isSticky, stickyScrollThreshold, infiniteScroll, createItemData, tableWidth, scrollWidth, onItemsRendered, outerElement, listInnerElementType, loading, offsetScroll, getRowKey, infiniteLoaderOffset]);
   var columnsSliceStartIndex = Number(!!selection) + Number(!!rowStar);
   var scrollValue = !dataSource || (dataSource == null ? void 0 : dataSource.length) === 0 ? undefined : scroll;
   var classNames = React.useMemo(function () {
@@ -518,9 +505,9 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
   var finalColumns = mergedColumns.slice(columnsSliceStartIndex);
   useEffect(function () {
     // trigger body component onScroll to toggle .ant-table-ping-left / .ant-table-ping-right classes that indicate where columns overflow
-    if (customBodyOnScrollRef.current && outerListRef.current) {
+    if (customBodyOnScrollRef.current && outerListRef.current && outerListRef.current.parentElement) {
       customBodyOnScrollRef.current({
-        currentTarget: outerListRef.current
+        currentTarget: outerListRef.current.parentElement
       });
     }
   }, [tableWidth, scrollWidth]);
@@ -536,8 +523,8 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
     key: "relative-container",
     ref: containerRef
   }, /*#__PURE__*/React.createElement(ResizeObserver, {
-    onResize: function onResize(_ref8) {
-      var offsetWidth = _ref8.offsetWidth;
+    onResize: function onResize(_ref6) {
+      var offsetWidth = _ref6.offsetWidth;
       setTableWidth(offsetWidth);
     }
   }, /*#__PURE__*/React.createElement(DSTable, _extends({}, props, {

package/dist/VirtualTable/VirtualTable.styles.js

@@ -5,19 +5,7 @@ var numberToPixels = function numberToPixels(num) {
   return num + "px";
 };
 
-var getColumnMaxWidth = function getColumnMaxWidth(props) {
-  if (props.maxWidth) {
-    return numberToPixels(props.maxWidth);
-  }
-
-  return props.width ? numberToPixels(props.width) : 'initial';
-};
-
-var getColumnMinWidth = function getColumnMinWidth(props) {
-  if (props.minWidth) {
-    return numberToPixels(props.minWidth);
-  }
-
+var getColumnWidth = function getColumnWidth(props) {
   return props.width ? numberToPixels(props.width) : 'initial';
 };
 
@@ -56,16 +44,13 @@ export var StickyScrollbarContent = styled.div.withConfig({
 export var ColWrapper = styled.div.withConfig({
   displayName: "VirtualTablestyles__ColWrapper",
   componentId: "aehkhc-6"
-})(["display:table-cell;vertical-align:middle;", ";", ";width:", ";min-width:", ";max-width:", ";padding:0 24px;&.virtual-table-cell.ant-table-selection-column{padding:0 8px 0 24px;width:auto;}&.virtual-table-cell.ds-table-star-column{padding:0 8px 0 24px;width:auto;& > button{display:flex;}}&.virtual-table-cell.ant-table-selection-column + .virtual-table-cell.ds-table-star-column{padding-left:0;}"], function (props) {
+})(["display:table-cell;vertical-align:middle;", ";", ";", " padding:0 24px;&.virtual-table-cell.ant-table-selection-column{padding:0 8px 0 24px;}&.virtual-table-cell.ds-table-star-column{padding:0 8px 0 24px;& > button{display:flex;}}&.virtual-table-cell.ant-table-selection-column + .virtual-table-cell.ds-table-star-column{padding-left:0;}"], function (props) {
   return props.left !== undefined && "left: " + numberToPixels(props.left);
 }, function (props) {
   return props.right !== undefined && "right: " + numberToPixels(props.right);
 }, function (props) {
-  return props.width !== undefined && props.width !== null ? numberToPixels(props.width) : 'initial';
-}, function (props) {
-  return getColumnMinWidth(props);
-}, function (props) {
-  return getColumnMaxWidth(props);
+  var width = getColumnWidth(props);
+  return css(["width:", ";min-width:", ";max-width:", ";"], width, width, width);
 });
 export var VirtualTableWrapper = styled.div.withConfig({
   displayName: "VirtualTablestyles__VirtualTableWrapper",

package/dist/index.d.ts

@@ -7,4 +7,4 @@ export { default } from './Table';
 export { GroupedTable, VirtualTable, TableCell, ItemsMenu, TreeTable };
 export { default as BackToTopButton } from './InfiniteScroll/BackToTopButton';
 export type { Props as VirtualTableProps, VirtualTableRef, VirtualColumnType } from './VirtualTable/VirtualTable.types';
-export type { RowSelection, SingleColumnSort, OnSortFn, Locale } from './Table.types';
+export type { RowSelection, RowType, SingleColumnSort, OnSortFn, Locale, DSColumnType, DSTableProps, ScrollProxyType, Selection, SelectionItem, CustomizeScrollBodyInfo, } from './Table.types';

package/dist/utils/calculateColumnWidths.d.ts

@@ -0,0 +1,2 @@
+import { VirtualColumnType } from '../VirtualTable/VirtualTable.types';
+export declare const calculateColumnWidths: <T extends object>(columns: VirtualColumnType<T>[], availableSpace: number) => number[];

package/dist/utils/calculateColumnWidths.js

@@ -0,0 +1,43 @@
+import { calculatePixels } from './calculatePixels';
+export var calculateColumnWidths = function calculateColumnWidths(columns, availableSpace) {
+  var baseSum = 0;
+  var flexibleColumnCount = 0;
+  var noMaxColumnCount = 0;
+  var baseWidths = columns.map(function (column) {
+    var baseWidth = calculatePixels(column.width || column.minWidth) || 0;
+    flexibleColumnCount += Number(!column.width);
+    noMaxColumnCount += Number(!column.width && !column.maxWidth);
+    baseSum += baseWidth;
+    return baseWidth;
+  });
+
+  if (!flexibleColumnCount) {
+    return baseWidths;
+  }
+
+  if (baseSum < availableSpace) {
+    // split remaining space across columns with minWidth
+    var extraWidth = (availableSpace - baseSum) / flexibleColumnCount;
+    var interimSum = 0;
+    columns.forEach(function (column, index) {
+      if (!column.width) {
+        var maxWidthAsNumber = calculatePixels(column.maxWidth);
+        baseWidths[index] = maxWidthAsNumber !== undefined ? Math.min(maxWidthAsNumber, baseWidths[index] + extraWidth) : baseWidths[index] + extraWidth;
+      }
+
+      interimSum += baseWidths[index];
+    });
+
+    if (interimSum < availableSpace) {
+      // split the remainder across columns with no maxWidth
+      var extraWidth2 = (availableSpace - interimSum) / noMaxColumnCount;
+      columns.forEach(function (column, index) {
+        if (!column.width && !column.maxWidth) {
+          baseWidths[index] += extraWidth2;
+        }
+      });
+    }
+  }
+
+  return baseWidths;
+};

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './getValueFromPath';
 export * from './locale';
 export * from './calculatePixels';
+export * from './calculateColumnWidths';

package/dist/utils/index.js

@@ -1,3 +1,4 @@
 export * from './getValueFromPath';
 export * from './locale';
-export * from './calculatePixels';
+export * from './calculatePixels';
+export * from './calculateColumnWidths';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table",
-  "version": "0.49.8",
+  "version": "0.50.0",
   "description": "Table UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -38,12 +38,12 @@
     "@synerise/ds-button": "^0.19.7",
     "@synerise/ds-button-group": "^0.6.47",
     "@synerise/ds-checkbox": "^0.11.64",
-    "@synerise/ds-column-manager": "^0.11.48",
+    "@synerise/ds-column-manager": "^0.11.49",
     "@synerise/ds-data-format": "^0.4.8",
-    "@synerise/ds-dropdown": "^0.17.106",
+    "@synerise/ds-dropdown": "^0.17.107",
     "@synerise/ds-flag": "^0.4.3",
     "@synerise/ds-icon": "^0.60.7",
-    "@synerise/ds-input": "^0.20.7",
+    "@synerise/ds-input": "^0.21.0",
     "@synerise/ds-loader": "^0.3.5",
     "@synerise/ds-menu": "^0.18.20",
     "@synerise/ds-modal": "^0.17.26",
@@ -51,10 +51,10 @@
     "@synerise/ds-result": "^0.6.52",
     "@synerise/ds-scrollbar": "^0.10.2",
     "@synerise/ds-search": "^0.8.88",
-    "@synerise/ds-select": "^0.15.47",
+    "@synerise/ds-select": "^0.15.48",
     "@synerise/ds-skeleton": "^0.5.6",
-    "@synerise/ds-status": "^0.6.1",
-    "@synerise/ds-tags": "^0.8.40",
+    "@synerise/ds-status": "^0.6.2",
+    "@synerise/ds-tags": "^0.8.41",
     "@synerise/ds-tooltip": "^0.14.25",
     "@synerise/ds-typography": "^0.15.0",
     "@synerise/ds-utils": "^0.26.3",
@@ -79,5 +79,5 @@
   "devDependencies": {
     "@testing-library/react": "10.0.1"
   },
-  "gitHead": "6f0dc42ae79cea009e60fdb1f91ef72dcc82998e"
+  "gitHead": "700312e731dcbedacd206fd1d3389e5725c80d24"
 }