Merge pull request #405 from icflorescu/next

Fix #404

CHANGELOG.md

@@ -3,6 +3,10 @@
 The following is a list of notable changes to the Mantine DataTable component.  
 Minor versions that are not listed in the changelog are bug fixes and small improvements.
 
+## 2.9.10 (2023-08-11)
+
+- Use a custom `useElementOuterSize` hook instead of Mantine's `useElementSize` to avoid [this bug](https://github.com/icflorescu/mantine-datatable/issues/404)
+
 ## 2.9.9 (2023-08-10)
 
 - Fix `@mantine/core` & `@mantine/hooks` peer dependencies version numbers in `package.json` to `>=6 <=6.0.17 || >=6.0.19`

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable-docs",
-  "version": "2.9.9",
+  "version": "2.9.10",
   "description": "Docs website for mantine-datatable; see ../package/package.json for more info",
   "private": true,
   "scripts": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable-turborepo",
-  "version": "2.9.9",
+  "version": "2.9.10",
   "description": "Monorepo for mantine-datatable; see package/package.json for more info",
   "private": true,
   "workspaces": [
@@ -30,7 +30,7 @@
     "@typescript-eslint/eslint-plugin": "^6.3.0",
     "@typescript-eslint/parser": "^6.3.0",
     "babel-jest": "^29.6.2",
-    "eslint": "^8.46.0",
+    "eslint": "^8.47.0",
     "eslint-config-next": "^13.4.13",
     "eslint-config-prettier": "^9.0.0",
     "jest": "^29.6.2",

package/DataTable.tsx

@@ -1,5 +1,5 @@
 import { Box, MantineSize, Portal, Table, createStyles, packSx, type MantineTheme } from '@mantine/core';
-import { useElementSize, useMergedRef } from '@mantine/hooks';
+import { useMergedRef } from '@mantine/hooks';
 import {
   useCallback,
   useMemo,
@@ -20,7 +20,7 @@ import DataTableRowMenu from './DataTableRowMenu';
 import DataTableRowMenuDivider from './DataTableRowMenuDivider';
 import DataTableRowMenuItem from './DataTableRowMenuItem';
 import DataTableScrollArea from './DataTableScrollArea';
-import { useLastSelectionChangeIndex, useRowContextMenu, useRowExpansion } from './hooks';
+import { useElementOuterSize, useLastSelectionChangeIndex, useRowContextMenu, useRowExpansion } from './hooks';
 import type { DataTableProps } from './types';
 import { differenceBy, getRecordId, humanize, uniqBy, useIsomorphicLayoutEffect } from './utils';
 
@@ -196,16 +196,16 @@ export default function DataTable<T>({
     ref: scrollViewportRef,
     width: scrollViewportWidth,
     height: scrollViewportHeight,
-  } = useElementSize<HTMLDivElement>();
+  } = useElementOuterSize<HTMLDivElement>();
 
   const effectiveColumns = useMemo(() => {
     return groups?.flatMap((group) => group.columns) ?? columns!;
   }, [columns, groups]);
 
-  const { ref: headerRef, height: headerHeight } = useElementSize<HTMLTableSectionElement>();
-  const { ref: tableRef, width: tableWidth, height: tableHeight } = useElementSize<HTMLTableElement>();
-  const { ref: footerRef, height: footerHeight } = useElementSize<HTMLTableSectionElement>();
-  const { ref: paginationRef, height: paginationHeight } = useElementSize<HTMLDivElement>();
+  const { ref: headerRef, height: headerHeight } = useElementOuterSize<HTMLTableSectionElement>();
+  const { ref: tableRef, width: tableWidth, height: tableHeight } = useElementOuterSize<HTMLTableElement>();
+  const { ref: footerRef, height: footerHeight } = useElementOuterSize<HTMLTableSectionElement>();
+  const { ref: paginationRef, height: paginationHeight } = useElementOuterSize<HTMLDivElement>();
 
   const [scrolledToTop, setScrolledToTop] = useState(true);
   const [scrolledToBottom, setScrolledToBottom] = useState(true);

package/DataTableRowMenu.tsx

@@ -1,7 +1,8 @@
 import type { MantineNumberSize, MantineShadow } from '@mantine/core';
 import { Paper, createStyles, px } from '@mantine/core';
-import { useClickOutside, useElementSize, useMergedRef, useWindowEvent } from '@mantine/hooks';
+import { useClickOutside, useMergedRef, useWindowEvent } from '@mantine/hooks';
 import type { ReactNode } from 'react';
+import { useElementOuterSize } from './hooks';
 
 const useStyles = createStyles((theme) => ({
   root: {
@@ -34,7 +35,7 @@ export default function DataTableRowMenu({
   useWindowEvent('resize', onDestroy);
   useWindowEvent('scroll', onDestroy);
   const clickOutsideRef = useClickOutside<HTMLDivElement>(onDestroy);
-  const { ref: sizeRef, width, height } = useElementSize();
+  const { ref: sizeRef, width, height } = useElementOuterSize<HTMLDivElement>();
   const ref = useMergedRef(clickOutsideRef, sizeRef);
 
   const { innerWidth: windowWidth, innerHeight: windowHeight } = window;

package/hooks.ts

@@ -1,4 +1,4 @@
-import { useTimeout } from '@mantine/hooks';
+import { useResizeObserver, useTimeout } from '@mantine/hooks';
 import { useEffect, useState, type Key } from 'react';
 import type { DataTableRowExpansionProps } from './types';
 import { getRecordId } from './utils';
@@ -100,3 +100,8 @@ export function useRowExpansionStatus(open: boolean, transitionDuration?: number
 
   return { expanded, visible };
 }
+
+export function useElementOuterSize<T extends HTMLElement>() {
+  const [ref] = useResizeObserver<T>();
+  return { ref, width: ref.current?.offsetWidth || 0, height: ref.current?.offsetHeight || 0 };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "2.9.9",
+  "version": "2.9.10",
   "description": "The dependency-free datatable component for Mantine UI, featuring asynchronous data loading support, pagination, multple rows selection, column sorting, custom cell data rendering, row context menu, row expansion and more",
   "keywords": [
     "mantine",

yarn.lock

@@ -1416,10 +1416,10 @@
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.6.2.tgz#1816b5f6948029c5eaacb0703b850ee0cb37d8f8"
   integrity sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==
 
-"@eslint/eslintrc@^2.1.1":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.1.tgz#18d635e24ad35f7276e8a49d135c7d3ca6a46f93"
-  integrity sha512-9t7ZA7NGGK8ckelF0PQCfcxIUzs1Md5rrO6U/c+FIQNanea5UZC0wqKXH4vHBccmu4ZJgZ2idtPeW7+Q2npOEA==
+"@eslint/eslintrc@^2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.2.tgz#c6936b4b328c64496692f76944e755738be62396"
+  integrity sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
@@ -1431,10 +1431,10 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@^8.46.0":
-  version "8.46.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.46.0.tgz#3f7802972e8b6fe3f88ed1aabc74ec596c456db6"
-  integrity sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==
+"@eslint/js@^8.47.0":
+  version "8.47.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.47.0.tgz#5478fdf443ff8158f9de171c704ae45308696c7d"
+  integrity sha512-P6omY1zv5MItm93kLM8s2vr1HICJH8v0dvddDhysbIuZ+vcjOHg5Zbkf1mTkcmi2JA9oBG2anOkRnW8WJTS8Og==
 
 "@faker-js/faker@^8.0.2":
   version "8.0.2"
@@ -3833,20 +3833,25 @@ eslint-scope@^7.2.2:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
-eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.2:
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz#8c2095440eca8c933bedcadf16fefa44dbe9ba5f"
   integrity sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==
 
-eslint@^8.46.0:
-  version "8.46.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.46.0.tgz#a06a0ff6974e53e643acc42d1dcf2e7f797b3552"
-  integrity sha512-cIO74PvbW0qU8e0mIvk5IV3ToWdCq5FYG6gWPHHkx6gNdjlbAYvtfHmlCMXxjcoVaIdwy/IAt3+mDkZkfvb2Dg==
+eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+eslint@^8.47.0:
+  version "8.47.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.47.0.tgz#c95f9b935463fb4fad7005e626c7621052e90806"
+  integrity sha512-spUQWrdPt+pRVP1TTJLmfRNJJHHZryFmptzcafwSvHsceV81djHOdnEeDmkdotZyLNjDhrOasNK8nikkoG1O8Q==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@eslint-community/regexpp" "^4.6.1"
-    "@eslint/eslintrc" "^2.1.1"
-    "@eslint/js" "^8.46.0"
+    "@eslint/eslintrc" "^2.1.2"
+    "@eslint/js" "^8.47.0"
     "@humanwhocodes/config-array" "^0.11.10"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
@@ -3857,7 +3862,7 @@ eslint@^8.46.0:
     doctrine "^3.0.0"
     escape-string-regexp "^4.0.0"
     eslint-scope "^7.2.2"
-    eslint-visitor-keys "^3.4.2"
+    eslint-visitor-keys "^3.4.3"
     espree "^9.6.1"
     esquery "^1.4.2"
     esutils "^2.0.2"