@equinor/apollo-components 3.1.2-rowfix.18 → 3.1.2-rowfix.2

package/dist/index.js

@@ -663,7 +663,7 @@ function TableHeader({ table, sticky }) {
 // src/DataTable/DataTable.tsx
 var import_eds_core_react18 = require("@equinor/eds-core-react");
 var import_react_table3 = require("@tanstack/react-table");
-var import_react7 = require("react");
+var import_react6 = require("react");
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/DataTable/components/BasicTable.tsx
@@ -924,7 +924,6 @@ function TableBanner({
 
 // src/DataTable/components/VirtualTableBody.tsx
 var import_react_virtual = require("@tanstack/react-virtual");
-var import_react5 = require("react");
 
 // src/DataTable/components/PaddingRow.tsx
 var import_eds_core_react17 = require("@equinor/eds-core-react");
@@ -945,7 +944,6 @@ function VirtualTableBody({
   table,
   rowConfig,
   cellConfig,
-  hasRef,
   containerRef,
   ...props
 }) {
@@ -961,7 +959,6 @@ function VirtualTableBody({
   if (!rowVirtualizer)
     return null;
   const virtualRows = rowVirtualizer.getVirtualItems();
-  console.log("VirtualTableBody", { container: containerRef.current, virtualRows, hasRef });
   const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(TableBody, {
@@ -988,15 +985,11 @@ function VirtualTableBody({
     ]
   });
 }
-var Memo_VirtualTableBody = (0, import_react5.memo)(
-  VirtualTableBody,
-  (prev, next) => prev.containerRef.current === next.containerRef.current
-);
 
 // src/DataTable/hooks/useFetchMoreOnBottomReached.tsx
-var import_react6 = require("react");
+var import_react5 = require("react");
 function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
-  const fetchMoreOnBottomReached = (0, import_react6.useCallback)(
+  const fetchMoreOnBottomReached = (0, import_react5.useCallback)(
     (tableContainer) => {
       if (!infiniteScrollConfig)
         return;
@@ -1010,11 +1003,11 @@ function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
     },
     [infiniteScrollConfig]
   );
-  const onTableContainerScroll = (0, import_react6.useCallback)(
+  const onTableContainerScroll = (0, import_react5.useCallback)(
     (event) => fetchMoreOnBottomReached(event.target),
     [fetchMoreOnBottomReached]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!infiniteScrollConfig)
       return;
     fetchMoreOnBottomReached(tableContainerRef.current);
@@ -1042,14 +1035,14 @@ 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, _s;
+  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_react7.useState)({});
+  const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react6.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_react7.useState)("");
+  const [internalGlobalFilterState, setInternalGlobalFilterState] = (0, import_react6.useState)("");
   const [globalFilterState, setGlobalFilterState] = [
     ((_c = props.globalFilter) == null ? void 0 : _c.state) ?? internalGlobalFilterState,
     ((_d = props.globalFilter) == null ? void 0 : _d.onChange) ?? setInternalGlobalFilterState
@@ -1058,17 +1051,17 @@ function DataTable(props) {
   function enableGlobalFilter(value) {
     return enableOrUndefined(shouldEnableGlobalFilter, value);
   }
-  const [internalSortingState, setInternalSortingState] = (0, import_react7.useState)([]);
+  const [internalSortingState, setInternalSortingState] = (0, import_react6.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_react7.useState)({});
+  const [internalRowSelectionState, setInternalRowSelectionState] = (0, import_react6.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_react7.useState)({});
+  const [internalExpandedState, setInternalExpandedState] = (0, import_react6.useState)({});
   const [expandedState, setExpandedState] = [
     ((_j = props.expansion) == null ? void 0 : _j.state) ?? internalExpandedState,
     ((_k = props.expansion) == null ? void 0 : _k.onChange) ?? setInternalExpandedState
@@ -1111,23 +1104,18 @@ function DataTable(props) {
     getSubRows: props == null ? void 0 : props.getSubRows,
     getRowId: props == null ? void 0 : props.getRowId
   });
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.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_react7.useRef)(null);
-  console.log("DataTable", { container: tableContainerRef.current });
+  const tableContainerRef = (0, import_react6.useRef)(null);
   const onTableContainerScroll = useFetchMoreOnBottomReached(
     tableContainerRef,
     props.infiniteScroll
   );
-  const [hasRef, setHasRef] = (0, import_react7.useState)(false);
-  (0, import_react7.useEffect)(() => {
-    setHasRef(Boolean(tableContainerRef.current));
-  }, [(_q = tableContainerRef.current) == null ? void 0 : _q.toString()]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DataTableWrapper, {
     height: props == null ? void 0 : props.height,
     width: props == null ? void 0 : props.width,
@@ -1141,12 +1129,10 @@ function DataTable(props) {
       }),
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", {
         ...props.tableContainerProps,
-        className: "--table-container " + (((_r = props.tableContainerProps) == null ? void 0 : _r.className) ?? ""),
-        style: { contain: "strict" },
-        onScroll: ((_s = props.tableContainerProps) == null ? void 0 : _s.onScroll) ?? onTableContainerScroll,
+        className: "--table-container " + ((_q = props.tableContainerProps) == null ? void 0 : _q.className),
+        onScroll: ((_r = props.tableContainerProps) == null ? void 0 : _r.onScroll) ?? onTableContainerScroll,
         ref: (node) => {
           var _a2;
-          console.log({ node });
           if (node) {
             tableContainerRef.current = node;
             if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
@@ -1164,7 +1150,7 @@ function DataTable(props) {
               sticky: props.stickyHeader,
               table
             }),
-            tableContainerRef.current !== null && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(VirtualTableBody, {
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(VirtualTableBody, {
               containerRef: tableContainerRef,
               tableCaption: props.tableCaption,
               table,

package/dist/index.mjs

@@ -881,7 +881,6 @@ function TableBanner({
 
 // src/DataTable/components/VirtualTableBody.tsx
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { memo } from "react";
 
 // src/DataTable/components/PaddingRow.tsx
 import { Table as Table8 } from "@equinor/eds-core-react";
@@ -902,7 +901,6 @@ function VirtualTableBody({
   table,
   rowConfig,
   cellConfig,
-  hasRef,
   containerRef,
   ...props
 }) {
@@ -918,7 +916,6 @@ function VirtualTableBody({
   if (!rowVirtualizer)
     return null;
   const virtualRows = rowVirtualizer.getVirtualItems();
-  console.log("VirtualTableBody", { container: containerRef.current, virtualRows, hasRef });
   const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
   return /* @__PURE__ */ jsxs10(TableBody, {
@@ -945,10 +942,6 @@ function VirtualTableBody({
     ]
   });
 }
-var Memo_VirtualTableBody = memo(
-  VirtualTableBody,
-  (prev, next) => prev.containerRef.current === next.containerRef.current
-);
 
 // src/DataTable/hooks/useFetchMoreOnBottomReached.tsx
 import { useCallback, useEffect as useEffect2 } from "react";
@@ -999,7 +992,7 @@ 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, _s;
+  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 [columnVisibility, setColumnVisibility] = [
@@ -1076,15 +1069,10 @@ function DataTable(props) {
   }, [table, (_p = props.expansion) == null ? void 0 : _p.expandAllByDefault]);
   const { isLoading, rowConfig } = props;
   const tableContainerRef = useRef3(null);
-  console.log("DataTable", { container: tableContainerRef.current });
   const onTableContainerScroll = useFetchMoreOnBottomReached(
     tableContainerRef,
     props.infiniteScroll
   );
-  const [hasRef, setHasRef] = useState5(false);
-  useEffect3(() => {
-    setHasRef(Boolean(tableContainerRef.current));
-  }, [(_q = tableContainerRef.current) == null ? void 0 : _q.toString()]);
   return /* @__PURE__ */ jsxs11(DataTableWrapper, {
     height: props == null ? void 0 : props.height,
     width: props == null ? void 0 : props.width,
@@ -1098,12 +1086,10 @@ function DataTable(props) {
       }),
       /* @__PURE__ */ jsx19("div", {
         ...props.tableContainerProps,
-        className: "--table-container " + (((_r = props.tableContainerProps) == null ? void 0 : _r.className) ?? ""),
-        style: { contain: "strict" },
-        onScroll: ((_s = props.tableContainerProps) == null ? void 0 : _s.onScroll) ?? onTableContainerScroll,
+        className: "--table-container " + ((_q = props.tableContainerProps) == null ? void 0 : _q.className),
+        onScroll: ((_r = props.tableContainerProps) == null ? void 0 : _r.onScroll) ?? onTableContainerScroll,
         ref: (node) => {
           var _a2;
-          console.log({ node });
           if (node) {
             tableContainerRef.current = node;
             if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
@@ -1121,7 +1107,7 @@ function DataTable(props) {
               sticky: props.stickyHeader,
               table
             }),
-            tableContainerRef.current !== null && /* @__PURE__ */ jsx19(VirtualTableBody, {
+            /* @__PURE__ */ jsx19(VirtualTableBody, {
               containerRef: tableContainerRef,
               tableCaption: props.tableCaption,
               table,

package/package.json

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