@equinor/apollo-components 3.1.2 → 3.1.3-beta.0

package/dist/index.js

@@ -662,7 +662,7 @@ function TableHeader({ table, sticky }) {
 
 // src/DataTable/DataTable.tsx
 var import_react_table3 = require("@tanstack/react-table");
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/DataTable/components/BasicTable.tsx
@@ -704,11 +704,19 @@ var TableBody = (0, import_styled_components12.default)(import_eds_core_react12.
 var import_eds_core_react13 = require("@equinor/eds-core-react");
 var import_styled_components13 = __toESM(require("styled-components"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
-function TableRow({ row, rowConfig, cellConfig }) {
+function TableRow({
+  row,
+  rowConfig,
+  cellConfig,
+  measureElement,
+  index
+}) {
   var _a;
   const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
   const tableRowContent = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StyledTableRow, {
     active: row.getIsSelected(),
+    "data-index": index,
+    ref: measureElement,
     style: {
       cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial",
       backgroundColor: (_a = rowConfig == null ? void 0 : rowConfig.getRowBackground) == null ? void 0 : _a.call(rowConfig, row)
@@ -945,6 +953,7 @@ function VirtualTable({
     count: rows.length,
     estimateSize: () => 48,
     getScrollElement: () => containerRef.current,
+    measureElement: (element) => element == null ? void 0 : element.getBoundingClientRect().height,
     overscan: 5
   });
   const virtualRows = rowVirtualizer.getVirtualItems();
@@ -970,7 +979,9 @@ function VirtualTable({
             return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableRow, {
               row,
               rowConfig,
-              cellConfig
+              cellConfig,
+              index: virtualRow.index,
+              measureElement: rowVirtualizer.measureElement
             }, row.id);
           }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PlaceholderRow, {
             isLoading: props.isLoading
@@ -1013,6 +1024,13 @@ function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
   return onTableContainerScroll;
 }
 
+// src/DataTable/hooks/useForceRerender.ts
+var import_react6 = require("react");
+function useForceRerender() {
+  const [, setTick] = (0, import_react6.useState)(0);
+  return (0, import_react6.useCallback)(() => setTick((tick) => tick + 1), []);
+}
+
 // src/DataTable/DataTable.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var DataTableWrapper = import_styled_components16.default.div`
@@ -1020,14 +1038,14 @@ var DataTableWrapper = import_styled_components16.default.div`
 
   .--table-container {
     height: ${(props) => props.height ?? "100%"};
-    width: ${(props) => props.width ?? "100%"};
+    width: '100%';
     overflow: auto;
 
     table {
       width: 100%;
 
       // The following attribute is important for fixed column width
-      // CHANGE THES WITH CAUTION
+      // CHANGE THIS WITH CAUTION
       table-layout: ${(props) => props.tableLayout ?? "auto"};
     }
   }
@@ -1035,12 +1053,12 @@ var DataTableWrapper = import_styled_components16.default.div`
 function DataTable(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
   const { columns, data, bannerConfig, cellConfig, sorting } = props;
-  const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react6.useState)({});
+  const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react7.useState)({});
   const [columnVisibility, setColumnVisibility] = [
     ((_a = props.columnVisibility) == null ? void 0 : _a.state) ?? internalColumnVisibility,
     ((_b = props.columnVisibility) == null ? void 0 : _b.onChange) ?? setInternalColumnVisibility
   ];
-  const [internalGlobalFilterState, setInternalGlobalFilterState] = (0, import_react6.useState)("");
+  const [internalGlobalFilterState, setInternalGlobalFilterState] = (0, import_react7.useState)("");
   const [globalFilterState, setGlobalFilterState] = [
     ((_c = props.globalFilter) == null ? void 0 : _c.state) ?? internalGlobalFilterState,
     ((_d = props.globalFilter) == null ? void 0 : _d.onChange) ?? setInternalGlobalFilterState
@@ -1049,17 +1067,17 @@ function DataTable(props) {
   function enableGlobalFilter(value) {
     return enableOrUndefined(shouldEnableGlobalFilter, value);
   }
-  const [internalSortingState, setInternalSortingState] = (0, import_react6.useState)([]);
+  const [internalSortingState, setInternalSortingState] = (0, import_react7.useState)([]);
   const [sortingState, setSortingState] = [
     ((_f = props.sorting) == null ? void 0 : _f.state) ?? internalSortingState,
     ((_g = props.sorting) == null ? void 0 : _g.onChange) ?? setInternalSortingState
   ];
-  const [internalRowSelectionState, setInternalRowSelectionState] = (0, import_react6.useState)({});
+  const [internalRowSelectionState, setInternalRowSelectionState] = (0, import_react7.useState)({});
   const [rowSelectionState, setRowSelectionState] = [
     ((_h = props.rowSelection) == null ? void 0 : _h.state) ?? internalRowSelectionState,
     ((_i = props.rowSelection) == null ? void 0 : _i.onChange) ?? setInternalRowSelectionState
   ];
-  const [internalExpandedState, setInternalExpandedState] = (0, import_react6.useState)({});
+  const [internalExpandedState, setInternalExpandedState] = (0, import_react7.useState)({});
   const [expandedState, setExpandedState] = [
     ((_j = props.expansion) == null ? void 0 : _j.state) ?? internalExpandedState,
     ((_k = props.expansion) == null ? void 0 : _k.onChange) ?? setInternalExpandedState
@@ -1102,18 +1120,23 @@ function DataTable(props) {
     getSubRows: props == null ? void 0 : props.getSubRows,
     getRowId: props == null ? void 0 : props.getRowId
   });
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     var _a2;
     if ((_a2 = props.expansion) == null ? void 0 : _a2.expandAllByDefault) {
       table.toggleAllRowsExpanded();
     }
   }, [table, (_p = props.expansion) == null ? void 0 : _p.expandAllByDefault]);
   const { isLoading, rowConfig } = props;
-  const tableContainerRef = (0, import_react6.useRef)(null);
+  const tableContainerRef = (0, import_react7.useRef)(null);
   const onTableContainerScroll = useFetchMoreOnBottomReached(
     tableContainerRef,
     props.infiniteScroll
   );
+  const forceRerender = useForceRerender();
+  (0, import_react7.useEffect)(() => {
+    if (Boolean(tableContainerRef.current))
+      forceRerender();
+  }, [tableContainerRef.current === null]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DataTableWrapper, {
     height: props == null ? void 0 : props.height,
     width: props == null ? void 0 : props.width,
@@ -1127,7 +1150,8 @@ function DataTable(props) {
       }),
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", {
         ...props.tableContainerProps,
-        className: "--table-container " + ((_q = props.tableContainerProps) == null ? void 0 : _q.className),
+        className: "--table-container " + (((_q = props.tableContainerProps) == null ? void 0 : _q.className) ?? ""),
+        style: { contain: "strict" },
         onScroll: ((_r = props.tableContainerProps) == null ? void 0 : _r.onScroll) ?? onTableContainerScroll,
         ref: (node) => {
           var _a2;

package/dist/index.mjs

@@ -619,7 +619,7 @@ import {
   getSortedRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
 import styled16 from "styled-components";
 
 // src/DataTable/components/BasicTable.tsx
@@ -661,11 +661,19 @@ var TableBody = styled12(Table6.Body)`
 import { Table as Table7 } from "@equinor/eds-core-react";
 import styled13 from "styled-components";
 import { jsx as jsx13 } from "react/jsx-runtime";
-function TableRow({ row, rowConfig, cellConfig }) {
+function TableRow({
+  row,
+  rowConfig,
+  cellConfig,
+  measureElement,
+  index
+}) {
   var _a;
   const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
   const tableRowContent = /* @__PURE__ */ jsx13(StyledTableRow, {
     active: row.getIsSelected(),
+    "data-index": index,
+    ref: measureElement,
     style: {
       cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial",
       backgroundColor: (_a = rowConfig == null ? void 0 : rowConfig.getRowBackground) == null ? void 0 : _a.call(rowConfig, row)
@@ -902,6 +910,7 @@ function VirtualTable({
     count: rows.length,
     estimateSize: () => 48,
     getScrollElement: () => containerRef.current,
+    measureElement: (element) => element == null ? void 0 : element.getBoundingClientRect().height,
     overscan: 5
   });
   const virtualRows = rowVirtualizer.getVirtualItems();
@@ -927,7 +936,9 @@ function VirtualTable({
             return /* @__PURE__ */ jsx18(TableRow, {
               row,
               rowConfig,
-              cellConfig
+              cellConfig,
+              index: virtualRow.index,
+              measureElement: rowVirtualizer.measureElement
             }, row.id);
           }) : /* @__PURE__ */ jsx18(PlaceholderRow, {
             isLoading: props.isLoading
@@ -970,6 +981,13 @@ function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
   return onTableContainerScroll;
 }
 
+// src/DataTable/hooks/useForceRerender.ts
+import { useCallback as useCallback2, useState as useState5 } from "react";
+function useForceRerender() {
+  const [, setTick] = useState5(0);
+  return useCallback2(() => setTick((tick) => tick + 1), []);
+}
+
 // src/DataTable/DataTable.tsx
 import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var DataTableWrapper = styled16.div`
@@ -977,14 +995,14 @@ var DataTableWrapper = styled16.div`
 
   .--table-container {
     height: ${(props) => props.height ?? "100%"};
-    width: ${(props) => props.width ?? "100%"};
+    width: '100%';
     overflow: auto;
 
     table {
       width: 100%;
 
       // The following attribute is important for fixed column width
-      // CHANGE THES WITH CAUTION
+      // CHANGE THIS WITH CAUTION
       table-layout: ${(props) => props.tableLayout ?? "auto"};
     }
   }
@@ -992,12 +1010,12 @@ var DataTableWrapper = styled16.div`
 function DataTable(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
   const { columns, data, bannerConfig, cellConfig, sorting } = props;
-  const [internalColumnVisibility, setInternalColumnVisibility] = useState5({});
+  const [internalColumnVisibility, setInternalColumnVisibility] = useState6({});
   const [columnVisibility, setColumnVisibility] = [
     ((_a = props.columnVisibility) == null ? void 0 : _a.state) ?? internalColumnVisibility,
     ((_b = props.columnVisibility) == null ? void 0 : _b.onChange) ?? setInternalColumnVisibility
   ];
-  const [internalGlobalFilterState, setInternalGlobalFilterState] = useState5("");
+  const [internalGlobalFilterState, setInternalGlobalFilterState] = useState6("");
   const [globalFilterState, setGlobalFilterState] = [
     ((_c = props.globalFilter) == null ? void 0 : _c.state) ?? internalGlobalFilterState,
     ((_d = props.globalFilter) == null ? void 0 : _d.onChange) ?? setInternalGlobalFilterState
@@ -1006,17 +1024,17 @@ function DataTable(props) {
   function enableGlobalFilter(value) {
     return enableOrUndefined(shouldEnableGlobalFilter, value);
   }
-  const [internalSortingState, setInternalSortingState] = useState5([]);
+  const [internalSortingState, setInternalSortingState] = useState6([]);
   const [sortingState, setSortingState] = [
     ((_f = props.sorting) == null ? void 0 : _f.state) ?? internalSortingState,
     ((_g = props.sorting) == null ? void 0 : _g.onChange) ?? setInternalSortingState
   ];
-  const [internalRowSelectionState, setInternalRowSelectionState] = useState5({});
+  const [internalRowSelectionState, setInternalRowSelectionState] = useState6({});
   const [rowSelectionState, setRowSelectionState] = [
     ((_h = props.rowSelection) == null ? void 0 : _h.state) ?? internalRowSelectionState,
     ((_i = props.rowSelection) == null ? void 0 : _i.onChange) ?? setInternalRowSelectionState
   ];
-  const [internalExpandedState, setInternalExpandedState] = useState5({});
+  const [internalExpandedState, setInternalExpandedState] = useState6({});
   const [expandedState, setExpandedState] = [
     ((_j = props.expansion) == null ? void 0 : _j.state) ?? internalExpandedState,
     ((_k = props.expansion) == null ? void 0 : _k.onChange) ?? setInternalExpandedState
@@ -1071,6 +1089,11 @@ function DataTable(props) {
     tableContainerRef,
     props.infiniteScroll
   );
+  const forceRerender = useForceRerender();
+  useEffect3(() => {
+    if (Boolean(tableContainerRef.current))
+      forceRerender();
+  }, [tableContainerRef.current === null]);
   return /* @__PURE__ */ jsxs11(DataTableWrapper, {
     height: props == null ? void 0 : props.height,
     width: props == null ? void 0 : props.width,
@@ -1084,7 +1107,8 @@ function DataTable(props) {
       }),
       /* @__PURE__ */ jsx19("div", {
         ...props.tableContainerProps,
-        className: "--table-container " + ((_q = props.tableContainerProps) == null ? void 0 : _q.className),
+        className: "--table-container " + (((_q = props.tableContainerProps) == null ? void 0 : _q.className) ?? ""),
+        style: { contain: "strict" },
         onScroll: ((_r = props.tableContainerProps) == null ? void 0 : _r.onScroll) ?? onTableContainerScroll,
         ref: (node) => {
           var _a2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/apollo-components",
-  "version": "3.1.2",
+  "version": "3.1.3-beta.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -21,15 +21,15 @@
     "@equinor/eds-tokens": "^0.9.0",
     "@tanstack/match-sorter-utils": "^8.7.6",
     "@tanstack/react-table": "^8.7.6",
-    "@tanstack/react-virtual": "^3.0.0-beta.23",
+    "@tanstack/react-virtual": "^3.0.0-beta.54",
     "tsup": "^6.3.0",
     "type-fest": "^3.6.1"
   },
   "peerDependencies": {
     "@equinor/eds-core-react": "^0.27.0",
-    "styled-components": "^5.3.7",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.7"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.0.0-alpha.38",