@equinor/apollo-components 1.12.2 → 1.12.3

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { IconData } from '@equinor/eds-icons';
 import * as react from 'react';
-import { ReactNode, ReactElement, ComponentProps } from 'react';
+import { ReactNode, ReactElement, HTMLProps, MutableRefObject, ComponentProps } from 'react';
 import { Cell, CellContext, Table, Row, SortingState, OnChangeFn, ColumnDef, VisibilityState, RowSelectionState, HeaderContext } from '@tanstack/react-table';
 import { ColumnDef as ColumnDef$1 } from '@tanstack/table-core';
 import * as styled_components from 'styled-components';
@@ -108,6 +108,15 @@ interface ExpansionConfig {
     expandAllByDefault?: boolean;
     hideExpandControls?: boolean;
 }
+interface HTMLPropsRef<T extends HTMLElement> extends HTMLProps<T> {
+    ref?: MutableRefObject<T | null> | null;
+}
+interface InfiniteScrollConfig {
+    /** Called on scroll below offset. */
+    onBottomScroll: () => void;
+    /** Pixels above bottom. Defines when the onBottomScroll should be called. Defaults to `300`. */
+    offset?: number;
+}
 interface DataTableCommonProps<T> {
     isLoading?: boolean;
     className?: string;
@@ -117,6 +126,8 @@ interface DataTableCommonProps<T> {
     sortConfig?: SortConfig;
     filters?: FilterConfig;
     header?: HeaderConfig;
+    tableContainerProps?: HTMLPropsRef<HTMLDivElement>;
+    infiniteScroll?: InfiniteScrollConfig;
 }
 interface DataTableProps<T> extends DataTableCommonProps<T> {
     data: T[];
@@ -180,4 +191,4 @@ declare type TypographyProps = {
 } & TypographyProps$1;
 declare const TypographyCustom: (props: TypographyProps) => JSX.Element;
 
-export { AppShell, AppSidebar, CellConfig, ChipsCell, ColumnSelect, DataTable, DataTableCommonProps, DataTableConfig, DataTableProps, DataTableRawProps, DynamicCell, FilterConfig, HeaderConfig, HierarchyCell, RowConfig, RowSelectionMode, SelectColumnDef, SortConfig, StickyCell, TableHeader, TableLayout, TableRowWrapper, TableRowWrapperProps, TruncateMode, TypographyCustom, capitalizeHeader, columnVisibilityAtom, globalFilterAtom, prependSelectColumn, rowSelectionAtom, tableSortingAtom };
+export { AppShell, AppSidebar, CellConfig, ChipsCell, ColumnSelect, DataTable, DataTableCommonProps, DataTableConfig, DataTableProps, DataTableRawProps, DynamicCell, FilterConfig, HTMLPropsRef, HeaderConfig, HierarchyCell, InfiniteScrollConfig, RowConfig, RowSelectionMode, SelectColumnDef, SortConfig, StickyCell, TableHeader, TableLayout, TableRowWrapper, TableRowWrapperProps, TruncateMode, TypographyCustom, capitalizeHeader, columnVisibilityAtom, globalFilterAtom, prependSelectColumn, rowSelectionAtom, tableSortingAtom };

package/dist/index.js

@@ -405,7 +405,7 @@ function SelectColumnDef(props = {}) {
 }
 
 // src/DataTable/DataTableRaw.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/DataTable/components/BasicTable.tsx
@@ -918,6 +918,35 @@ function VirtualTable({
   });
 }
 
+// src/DataTable/hooks/useFetchMoreOnBottomReached.tsx
+var import_react4 = require("react");
+function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
+  const fetchMoreOnBottomReached = (0, import_react4.useCallback)(
+    (tableContainer) => {
+      if (!infiniteScrollConfig)
+        return;
+      if (!tableContainer)
+        return;
+      const { onBottomScroll, offset = 300 } = infiniteScrollConfig;
+      const { scrollHeight, scrollTop, clientHeight } = tableContainer;
+      if (scrollHeight - scrollTop - clientHeight < offset) {
+        onBottomScroll();
+      }
+    },
+    [infiniteScrollConfig]
+  );
+  const onTableContainerScroll = (0, import_react4.useCallback)(
+    (event) => fetchMoreOnBottomReached(event.target),
+    [fetchMoreOnBottomReached]
+  );
+  (0, import_react4.useEffect)(() => {
+    if (!infiniteScrollConfig)
+      return;
+    fetchMoreOnBottomReached(tableContainerRef.current);
+  }, [fetchMoreOnBottomReached]);
+  return onTableContainerScroll;
+}
+
 // src/DataTable/DataTableRaw.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var DataTableWrapper = import_styled_components16.default.div`
@@ -931,16 +960,20 @@ var DataTableWrapper = import_styled_components16.default.div`
     table {
       width: 100%;
 
-      // The following attributes are important for fixed column width
+      // The following attribute is important for fixed column width
       // CHANGE THES WITH CAUTION
-      overflow: auto;
       table-layout: ${(props) => props.tableLayout ?? "auto"};
     }
   }
 `;
 function DataTableRaw(props) {
+  var _a, _b;
   const { isLoading, header, filters, config, rowConfig, cellConfig, table } = props;
-  const tableContainerRef = (0, import_react4.useRef)(null);
+  const tableContainerRef = (0, import_react5.useRef)(null);
+  const onTableContainerScroll = useFetchMoreOnBottomReached(
+    tableContainerRef,
+    props.infiniteScroll
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DataTableWrapper, {
     captionPadding: header == null ? void 0 : header.captionPadding,
     height: config == null ? void 0 : config.height,
@@ -954,8 +987,18 @@ function DataTableRaw(props) {
         config: filters
       }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", {
-        ref: tableContainerRef,
-        className: "--table-container",
+        ...props.tableContainerProps,
+        className: "--table-container " + ((_a = props.tableContainerProps) == null ? void 0 : _a.className),
+        onScroll: ((_b = props.tableContainerProps) == null ? void 0 : _b.onScroll) ?? onTableContainerScroll,
+        ref: (node) => {
+          var _a2;
+          if (node) {
+            tableContainerRef.current = node;
+            if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
+              props.tableContainerProps.ref.current = node;
+            }
+          }
+        },
         children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VirtualTable, {
           containerRef: tableContainerRef,
           table,
@@ -978,7 +1021,7 @@ function DataTableRaw(props) {
 // src/DataTable/useDataTable.tsx
 var import_react_table3 = require("@tanstack/react-table");
 var import_jotai3 = require("jotai");
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function useDataTable(props) {
   const { columns, data, filters, config, cellConfig, sortConfig } = props;
@@ -1028,7 +1071,7 @@ function useDataTable(props) {
     getSubRows: config == null ? void 0 : config.getSubRows,
     getRowId: config == null ? void 0 : config.getRowId
   });
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (config && config.expandAllByDefault) {
       table.toggleAllRowsExpanded();
     }

package/dist/index.mjs

@@ -872,6 +872,35 @@ function VirtualTable({
   });
 }
 
+// src/DataTable/hooks/useFetchMoreOnBottomReached.tsx
+import { useCallback, useEffect as useEffect2 } from "react";
+function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
+  const fetchMoreOnBottomReached = useCallback(
+    (tableContainer) => {
+      if (!infiniteScrollConfig)
+        return;
+      if (!tableContainer)
+        return;
+      const { onBottomScroll, offset = 300 } = infiniteScrollConfig;
+      const { scrollHeight, scrollTop, clientHeight } = tableContainer;
+      if (scrollHeight - scrollTop - clientHeight < offset) {
+        onBottomScroll();
+      }
+    },
+    [infiniteScrollConfig]
+  );
+  const onTableContainerScroll = useCallback(
+    (event) => fetchMoreOnBottomReached(event.target),
+    [fetchMoreOnBottomReached]
+  );
+  useEffect2(() => {
+    if (!infiniteScrollConfig)
+      return;
+    fetchMoreOnBottomReached(tableContainerRef.current);
+  }, [fetchMoreOnBottomReached]);
+  return onTableContainerScroll;
+}
+
 // src/DataTable/DataTableRaw.tsx
 import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 var DataTableWrapper = styled16.div`
@@ -885,16 +914,20 @@ var DataTableWrapper = styled16.div`
     table {
       width: 100%;
 
-      // The following attributes are important for fixed column width
+      // The following attribute is important for fixed column width
       // CHANGE THES WITH CAUTION
-      overflow: auto;
       table-layout: ${(props) => props.tableLayout ?? "auto"};
     }
   }
 `;
 function DataTableRaw(props) {
+  var _a, _b;
   const { isLoading, header, filters, config, rowConfig, cellConfig, table } = props;
   const tableContainerRef = useRef2(null);
+  const onTableContainerScroll = useFetchMoreOnBottomReached(
+    tableContainerRef,
+    props.infiniteScroll
+  );
   return /* @__PURE__ */ jsxs10(DataTableWrapper, {
     captionPadding: header == null ? void 0 : header.captionPadding,
     height: config == null ? void 0 : config.height,
@@ -908,8 +941,18 @@ function DataTableRaw(props) {
         config: filters
       }),
       /* @__PURE__ */ jsx18("div", {
-        ref: tableContainerRef,
-        className: "--table-container",
+        ...props.tableContainerProps,
+        className: "--table-container " + ((_a = props.tableContainerProps) == null ? void 0 : _a.className),
+        onScroll: ((_b = props.tableContainerProps) == null ? void 0 : _b.onScroll) ?? onTableContainerScroll,
+        ref: (node) => {
+          var _a2;
+          if (node) {
+            tableContainerRef.current = node;
+            if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
+              props.tableContainerProps.ref.current = node;
+            }
+          }
+        },
         children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ jsx18(VirtualTable, {
           containerRef: tableContainerRef,
           table,
@@ -938,7 +981,7 @@ import {
   useReactTable
 } from "@tanstack/react-table";
 import { useAtom as useAtom2 } from "jotai";
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 function useDataTable(props) {
   const { columns, data, filters, config, cellConfig, sortConfig } = props;
@@ -988,7 +1031,7 @@ function useDataTable(props) {
     getSubRows: config == null ? void 0 : config.getSubRows,
     getRowId: config == null ? void 0 : config.getRowId
   });
-  useEffect2(() => {
+  useEffect3(() => {
     if (config && config.expandAllByDefault) {
       table.toggleAllRowsExpanded();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/apollo-components",
-  "version": "1.12.2",
+  "version": "1.12.3",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",