@spaced-out/ui-design-system 0.4.11 → 0.4.13

package/.cspell/custom-words.txt

@@ -82,6 +82,7 @@ noreferrer
 Noronha
 nsfmc
 OPACITYS
+overscan
 Pago
 partialformat
 Paulo

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.4.13](https://github.com/spaced-out/ui-design-system/compare/v0.4.12...v0.4.13) (2025-08-04)
+
+
+### Features
+
+* **table:** [GDS-529] table virtualisation and refactor ([#380](https://github.com/spaced-out/ui-design-system/issues/380)) ([32498d7](https://github.com/spaced-out/ui-design-system/commit/32498d7ccef6430d795781676027d342af664d6c))
+
+### [0.4.12](https://github.com/spaced-out/ui-design-system/compare/v0.4.11...v0.4.12) (2025-07-29)
+
+
+### Bug Fixes
+
+* [filter-overlay] fluid class overrides small and medium class  ([#383](https://github.com/spaced-out/ui-design-system/issues/383)) ([f94c132](https://github.com/spaced-out/ui-design-system/commit/f94c13297c25ff659b343587795919a9a264756c))
+
 ### [0.4.11](https://github.com/spaced-out/ui-design-system/compare/v0.4.10...v0.4.11) (2025-07-28)
 
 

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.js

@@ -96,8 +96,8 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
     }, /*#__PURE__*/React.createElement("div", {
       className: (0, _classify.default)(_FilterButtonOverlayModule.default.overlayWrapper, {
         [_FilterButtonOverlayModule.default.fluid]: isFluid,
-        [_FilterButtonOverlayModule.default.medium]: size === 'medium',
-        [_FilterButtonOverlayModule.default.small]: size === 'small'
+        [_FilterButtonOverlayModule.default.small]: size === 'small',
+        [_FilterButtonOverlayModule.default.medium]: size === 'medium'
       }, classNames?.overlayContainer)
     }, children)))));
   });

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.js.flow

@@ -146,8 +146,8 @@ export const FilterButtonOverlay: React$AbstractComponent<
                         css.overlayWrapper,
                         {
                           [css.fluid]: isFluid,
-                          [css.medium]: size === 'medium',
                           [css.small]: size === 'small',
+                          [css.medium]: size === 'medium',
                         },
                         classNames?.overlayContainer,
                       )}

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.module.css

@@ -19,11 +19,6 @@
   z-index: var(--menu-elevation);
 }
 
-.fluid {
-  width: sizeFluid;
-  min-width: size160;
-}
-
 .medium {
   width: size300;
   min-width: size300;
@@ -34,6 +29,11 @@
   min-width: size240;
 }
 
+.fluid {
+  width: sizeFluid;
+  min-width: size160;
+}
+
 .isFluid {
   width: sizeFluid;
 }

package/lib/components/Table/StaticTable.js

@@ -5,20 +5,137 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BasicTableBody = exports.BasicTable = void 0;
 exports.StaticTable = StaticTable;
+exports.StaticTableVirtualized = StaticTableVirtualized;
 var React = _interopRequireWildcard(require("react"));
+var _reactVirtual = require("@tanstack/react-virtual");
 var _get = _interopRequireDefault(require("lodash/get"));
 var _xor = _interopRequireDefault(require("lodash/xor"));
 var _useWindowSize = require("../../hooks/useWindowSize");
 var _size = require("../../styles/variables/_size");
+var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
+var _CircularLoader = require("../CircularLoader");
 var _DefaultRow = require("./DefaultRow");
 var _DefaultTableHeader = require("./DefaultTableHeader");
 var _TableModule = _interopRequireDefault(require("./Table.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// $FlowFixMe[untyped-import]
 const BasicTable = exports.BasicTable = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultTable, 'table');
 const BasicTableBody = exports.BasicTableBody = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultTableBody, 'tbody');
+function useTableWidth(ref) {
+  const {
+    width
+  } = (0, _useWindowSize.useWindowSize)();
+  const [tableWidth, setTableWidth] = React.useState();
+  React.useEffect(() => {
+    if (ref.current) {
+      setTableWidth(ref.current.offsetWidth);
+    }
+  }, [width]);
+  return tableWidth;
+}
+function useMappedKeys(entries, rowKeys, idName) {
+  return React.useMemo(() => rowKeys ?? entries.map(e => (0, _get.default)(e, idName)), [entries, idName, rowKeys]);
+}
+function useHeaderCheckboxHandler(selectedKeys, entries, idName, onSelect) {
+  if (!selectedKeys) {
+    return undefined;
+  }
+  return _ref => {
+    let {
+      checked
+    } = _ref;
+    const allIds = entries.map(row => (0, _get.default)(row, idName));
+    const newSelection = checked ? allIds : [];
+    onSelect?.(newSelection);
+  };
+}
+function RowRenderer(_ref2) {
+  let {
+    TableRow,
+    data,
+    headers,
+    extras,
+    sortedKeys,
+    selected,
+    disabled,
+    classNames,
+    keyId,
+    onSelect
+  } = _ref2;
+  return TableRow ? /*#__PURE__*/React.createElement(TableRow, {
+    key: keyId,
+    data: data,
+    headers: headers
+    // extras and rowKeys are both 'optional'
+    ,
+    extras: extras,
+    sortedKeys: sortedKeys,
+    selected: selected,
+    disabled: disabled
+  }) : /*#__PURE__*/React.createElement(_DefaultRow.DefaultRow, {
+    key: keyId,
+    data: data,
+    extras: extras,
+    headers: headers,
+    selected: selected,
+    onSelect: onSelect,
+    disabled: disabled,
+    classNames: {
+      tableRow: classNames?.tableRow,
+      checkbox: classNames?.checkbox
+    }
+  });
+}
+function TableWrapper(_ref3) {
+  let {
+    tableRef,
+    classNames,
+    className,
+    tableHeaderClassName,
+    children,
+    wrapperStyle,
+    isLoading = false,
+    emptyText,
+    showHeader = true,
+    stickyHeader = false,
+    sortable,
+    disabled = false,
+    entriesLength = 0,
+    selectedKeys,
+    headers,
+    sortKey,
+    sortDirection,
+    handleSortClick,
+    handleHeaderCheckboxClick
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_TableModule.default.tableContainer, classNames?.wrapper),
+    "data-id": 'table-wrap',
+    ref: tableRef,
+    style: wrapperStyle
+  }, /*#__PURE__*/React.createElement(BasicTable, {
+    "data-id": "basic-table",
+    className: (0, _classify.classify)(className, {
+      [_TableModule.default.fullHeightTable]: isLoading || !entriesLength && !!emptyText
+    }, classNames?.table)
+  }, showHeader && /*#__PURE__*/React.createElement(_DefaultTableHeader.DefaultTableHeader, {
+    className: (0, _classify.classify)(tableHeaderClassName, classNames?.tableHeader),
+    sortable: sortable,
+    columns: headers,
+    handleSortClick: handleSortClick,
+    sortKey: sortKey,
+    sortDirection: sortDirection,
+    disabled: disabled,
+    handleCheckboxClick: handleHeaderCheckboxClick,
+    stickyHeader: stickyHeader,
+    checked: selectedKeys == null || selectedKeys.length === 0 ? 'false' : selectedKeys.length < entriesLength ? 'mixed' : 'true'
+  }), /*#__PURE__*/React.createElement(BasicTableBody, {
+    className: classNames?.tableBody
+  }, children)));
+}
 
 /**
  * A Static Default Table.
@@ -61,59 +178,37 @@ function StaticTable(props) {
 
   // this is a fallback and honestly probably doesn't need the
   // memo'ing
-  const mappedKeys = React.useMemo(() => rowKeys ?? entries.map(e => (0, _get.default)(e, idName)), [entries, idName, rowKeys]);
   const tableRef = React.useRef(null);
-  const {
-    width
-  } = (0, _useWindowSize.useWindowSize)();
-  const [tableWidth, setTableWidth] = React.useState();
-  React.useEffect(() => {
-    if (tableRef.current) {
-      setTableWidth(tableRef.current.offsetWidth);
-    }
-  }, [width]);
+  const mappedKeys = useMappedKeys(entries, rowKeys, idName);
+  const tableWidth = useTableWidth(tableRef);
 
   /**
    * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined in case selectedKeys is not there.
    */
-
-  const handleHeaderCheckboxClick = selectedKeys ? ({
-    checked
-  }) => {
-    let selectedRowIds = [];
-    if (selectedKeys) {
-      if (checked === true) {
-        selectedRowIds = entries.map(singleRowObj => (0, _get.default)(singleRowObj, idName));
-      }
-      onSelect?.(selectedRowIds);
-    }
-  } : undefined;
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.classify)(_TableModule.default.tableContainer, classNames?.wrapper),
-    "data-id": "table-wrap",
-    ref: tableRef,
-    style: {
+  const handleHeaderCheckboxClick = useHeaderCheckboxHandler(selectedKeys, entries, idName, onSelect);
+  return /*#__PURE__*/React.createElement(TableWrapper, {
+    tableRef: tableRef,
+    wrapperStyle: {
       '--border-radius': borderRadius,
       '--table-width': tableWidth ? `${tableWidth}px` : _size.sizeFluid
-    }
-  }, /*#__PURE__*/React.createElement(BasicTable, {
-    "data-id": "basic-table",
-    className: (0, _classify.classify)(className, {
-      [_TableModule.default.fullHeightTable]: isLoading || !entries.length && !!emptyText
-    }, classNames?.table)
-  }, showHeader && /*#__PURE__*/React.createElement(_DefaultTableHeader.DefaultTableHeader, {
-    className: (0, _classify.classify)(tableHeaderClassName, classNames?.tableHeader),
+    },
+    classNames: classNames,
+    className: className,
+    tableHeaderClassName: tableHeaderClassName,
+    borderRadius: borderRadius,
+    isLoading: isLoading,
+    emptyText: emptyText,
+    showHeader: showHeader,
+    stickyHeader: stickyHeader,
     sortable: sortable,
-    columns: headers,
-    handleSortClick: handleSortClick,
+    disabled: false,
+    entriesLength: entries.length,
+    selectedKeys: selectedKeys,
+    headers: headers,
     sortKey: sortKey,
     sortDirection: sortDirection,
-    disabled: disabled,
-    handleCheckboxClick: handleHeaderCheckboxClick,
-    stickyHeader: stickyHeader,
-    checked: selectedKeys == null || selectedKeys.length === 0 ? 'false' : selectedKeys.length < entries.length ? 'mixed' : 'true'
-  }), /*#__PURE__*/React.createElement(BasicTableBody, {
-    className: classNames?.tableBody
+    handleSortClick: handleSortClick,
+    handleHeaderCheckboxClick: handleHeaderCheckboxClick
   }, isLoading || !entries.length ? /*#__PURE__*/React.createElement(_DefaultRow.EmptyRow, {
     isLoading: isLoading,
     emptyText: emptyText,
@@ -124,31 +219,189 @@ function StaticTable(props) {
     if (data == null) {
       return null;
     }
-    data;
     const selected = selectedKeys && Array.isArray(selectedKeys) ? selectedKeys.includes((0, _get.default)(data, idName)) : undefined;
     const isRowDisabled = disabledKeys && Array.isArray(disabledKeys) ? disabledKeys.includes((0, _get.default)(data, idName)) : false;
-    return TableRow ? /*#__PURE__*/React.createElement(TableRow, {
-      key: key,
+    return /*#__PURE__*/React.createElement(RowRenderer, {
+      TableRow: TableRow,
+      keyId: key,
       data: data,
-      headers: headers
-      // extras and rowKeys are both 'optional'
-      ,
+      headers: headers,
       extras: extras,
       sortedKeys: rowKeys ?? mappedKeys,
       selected: selected,
-      disabled: disabled || isRowDisabled
-    }) : /*#__PURE__*/React.createElement(_DefaultRow.DefaultRow, {
-      key: key,
+      disabled: disabled || isRowDisabled,
+      classNames: classNames,
+      onSelect: selectedKeys != null ? _v => onSelect?.((0, _xor.default)(selectedKeys ?? [], [key])) : undefined
+    });
+  }));
+}
+function StaticTableVirtualized(props) {
+  const {
+    classNames,
+    className,
+    TableRow,
+    entries,
+    extras,
+    rowKeys,
+    headers,
+    showHeader = true,
+    tableHeaderClassName,
+    sortable,
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    defaultSortKey,
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    defaultSortDirection = 'original',
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    onSort,
+    handleSortClick,
+    sortKey,
+    sortDirection,
+    selectedKeys,
+    disabledKeys = [],
+    onSelect,
+    isLoading,
+    idName = 'id',
+    emptyText,
+    disabled,
+    customLoader,
+    borderRadius,
+    stickyHeader,
+    virtualizationOptions
+  } = props;
+  const {
+    rowsCount,
+    rowHeight = _size.size48,
+    onEndReached,
+    isEndLoading = false,
+    isAllDataFetched = false
+  } = virtualizationOptions ?? {};
+  const tableRef = React.useRef(null);
+
+  // this is a fallback and honestly probably doesn't need the
+  // memo'ing
+  const mappedKeys = useMappedKeys(entries, rowKeys, idName);
+  const tableWidth = useTableWidth(tableRef);
+  const virtualizer = (0, _reactVirtual.useVirtualizer)({
+    count: entries.length,
+    getScrollElement: () => tableRef.current,
+    estimateSize: () => parseInt(rowHeight),
+    getItemKey: index => entries[index][idName],
+    overscan: 1
+  });
+  const currRows = virtualizer.getVirtualItems();
+  const hasTriggeredRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!tableRef.current || !onEndReached || isAllDataFetched) {
+      return;
+    }
+    const scrollElement = tableRef.current;
+    const handleScroll = () => {
+      const {
+        scrollTop,
+        scrollHeight,
+        clientHeight
+      } = scrollElement;
+      const isAtEnd = scrollTop + clientHeight >= scrollHeight - 100; // buffer
+
+      if (isAtEnd) {
+        if (!hasTriggeredRef.current) {
+          hasTriggeredRef.current = true;
+          onEndReached();
+        }
+      } else {
+        hasTriggeredRef.current = false; // reset when scrolling up
+      }
+    };
+    scrollElement.addEventListener('scroll', handleScroll);
+    return () => {
+      scrollElement.removeEventListener('scroll', handleScroll);
+    };
+  }, [onEndReached, isAllDataFetched]);
+
+  /**
+   * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined in case selectedKeys is not there.
+   */
+
+  const handleHeaderCheckboxClick = useHeaderCheckboxHandler(selectedKeys, entries, idName, onSelect);
+  const VirtualizedStartRow = () => /*#__PURE__*/React.createElement("tr", {
+    style: {
+      height: virtualizer.getVirtualItems()[0]?.start ?? _space.spaceNone,
+      width: _size.sizeFluid
+    }
+  }, /*#__PURE__*/React.createElement("td", {
+    colSpan: headers.length + (handleHeaderCheckboxClick ? 1 : 0),
+    style: {
+      padding: _space.spaceNone,
+      border: 'none',
+      height: '100%'
+    }
+  }));
+  const VirtualizedEndRow = () => /*#__PURE__*/React.createElement("tr", {
+    style: {
+      height: virtualizer.getTotalSize() - (virtualizer.getVirtualItems().at(-1)?.end ?? _space.spaceNone)
+    },
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement("td", {
+    colSpan: headers.length + (handleHeaderCheckboxClick ? 1 : 0),
+    style: {
+      padding: _space.spaceNone,
+      border: 'none',
+      height: '100%'
+    }
+  }));
+  return /*#__PURE__*/React.createElement(TableWrapper, {
+    tableRef: tableRef,
+    wrapperStyle: {
+      '--border-radius': borderRadius,
+      '--table-width': tableWidth ? `${tableWidth}px` : _size.sizeFluid,
+      height: (rowsCount + 1) * parseInt(rowHeight),
+      overflowY: 'auto'
+    },
+    classNames: classNames,
+    className: className,
+    tableHeaderClassName: tableHeaderClassName,
+    borderRadius: borderRadius,
+    isLoading: isLoading,
+    emptyText: emptyText,
+    showHeader: showHeader,
+    stickyHeader: stickyHeader,
+    sortable: sortable,
+    disabled: false,
+    entriesLength: entries.length,
+    selectedKeys: selectedKeys,
+    headers: headers,
+    sortKey: sortKey,
+    sortDirection: sortDirection,
+    handleSortClick: handleSortClick,
+    handleHeaderCheckboxClick: handleHeaderCheckboxClick
+  }, /*#__PURE__*/React.createElement(VirtualizedStartRow, null), isLoading || !entries.length ? /*#__PURE__*/React.createElement(_DefaultRow.EmptyRow, {
+    isLoading: isLoading,
+    emptyText: emptyText,
+    headersLength: handleHeaderCheckboxClick ? headers.length + 1 : headers.length,
+    customLoader: customLoader
+  }) : currRows.map(virtualRow => {
+    const key = virtualRow.key;
+    const data = entries[virtualRow.index];
+    if (data == null) {
+      return null;
+    }
+    const selected = selectedKeys && Array.isArray(selectedKeys) ? selectedKeys.includes((0, _get.default)(data, idName)) : undefined;
+    const isRowDisabled = disabledKeys && Array.isArray(disabledKeys) ? disabledKeys.includes((0, _get.default)(data, idName)) : false;
+    return /*#__PURE__*/React.createElement(RowRenderer, {
+      TableRow: TableRow,
+      keyId: key,
       data: data,
-      extras: extras,
       headers: headers,
+      extras: extras,
+      sortedKeys: rowKeys ?? mappedKeys,
       selected: selected,
-      onSelect: selectedKeys != null ? _v => onSelect?.((0, _xor.default)(selectedKeys ?? [], [key])) : undefined,
       disabled: disabled || isRowDisabled,
-      classNames: {
-        tableRow: classNames?.tableRow,
-        checkbox: classNames?.checkbox
-      }
+      classNames: classNames,
+      onSelect: selectedKeys != null ? _v => onSelect?.((0, _xor.default)(selectedKeys ?? [], [key])) : undefined
     });
-  }))));
+  }), /*#__PURE__*/React.createElement(VirtualizedEndRow, null), isEndLoading && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    colSpan: headers.length + (handleHeaderCheckboxClick ? 1 : 0)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _TableModule.default.fetchMoreLoaderContainer
+  }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, null)))));
 }