release v1.15.1 - backport v2 bugfixes

#fixes #594 #721 #713 #659 #686
KevinVandy · Oct 15, 2023 · 9bcfb86 · 9bcfb86 · vercel · Oct 15, 2023
1 parent a116412
commit 9bcfb86
Show file tree

Hide file tree

Showing 13 changed files with 1,399 additions and 1,757 deletions.
diff --git a/apps/material-react-table-docs/package.json b/apps/material-react-table-docs/package.json
@@ -22,29 +22,29 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@mui/icons-material": "^5.14.9",
-    "@mui/material": "^5.14.10",
-    "@mui/x-date-pickers": "^6.15.0",
-    "@next/mdx": "^13.5.3",
-    "@tanstack/react-query": "^4.35.3",
-    "@types/mdx": "^2.0.7",
+    "@mui/icons-material": "^5.14.13",
+    "@mui/material": "^5.14.13",
+    "@mui/x-date-pickers": "^6.16.2",
+    "@next/mdx": "^13.5.4",
+    "@tanstack/react-query": "^4.36.1",
+    "@types/mdx": "^2.0.8",
     "dayjs": "^1.11.10",
     "export-to-csv": "^0.2.1",
     "material-react-table": "workspace:*",
-    "next": "13.5.3",
+    "next": "13.5.4",
     "next-sitemap": "^4.2.3",
-    "prism-react-renderer": "^2.0.6",
+    "prism-react-renderer": "^2.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.7.0",
-    "@types/react": "^18.2.22",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^6.7.3",
-    "eslint": "8.50.0",
-    "eslint-config-next": "13.5.3",
+    "@types/node": "^20.8.6",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
+    "eslint": "8.51.0",
+    "eslint-config-next": "13.5.4",
     "next-plausible": "^3.11.1",
     "raw-loader": "^4.0.2",
     "typescript": "5.2.2"

diff --git a/apps/material-react-table-docs/pages/changelog.mdx b/apps/material-react-table-docs/pages/changelog.mdx
@@ -22,7 +22,7 @@ As of June 2023, most feature development is complete for MRT Version 1. MRT Ver
   <AlertTitle>
     MRT V2 is now in <b>Beta!</b>
   </AlertTitle>
-  <Typography variant='overline'>October 13, 2023</Typography>
+  <Typography variant="overline">October 13, 2023</Typography>
   <Typography>
     Material React Table V2 is now in beta. The library is mostly stable and
     ready for use, but the documentation is still being updated.
@@ -45,7 +45,16 @@ As of June 2023, most feature development is complete for MRT Version 1. MRT Ver
 
 ## Changelog
 
-### Version 1 (Latest)
+### Version 1
+
+#### v1.15.1 (2023-10-15) - V2 Backported fixes
+
+- Replaced `"Unsorted"` tooltip on header sort icon buttons with sort by next sort direction tooltip
+- Fixed accessorFn being called during loading and other undefined data states during loading
+- Fixed some button tooltips titles were not overridable
+- Fixed virtualized nested column header groups to not crash
+- Upgraded to latest TanStack Table `v8.10.7` various performance improvements and bug fixes
+- Upgraded to latest TanStack Virtual `v3.0.0-beta.65` for various bug fixes
 
 #### v1.15.0 (2023-09-25) - TanStack version bumps
 

diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "prettier": "^3.0.3",
-    "turbo": "^1.10.14"
+    "turbo": "^1.10.15"
   },
   "engines": {
     "node": ">=14.0.0"

diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.15.0",
+  "version": "1.15.1",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -60,48 +60,48 @@
     "storybook:dev": "storybook dev -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.0",
+    "@babel/core": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.1.0",
-    "@mui/icons-material": "^5.14.9",
-    "@mui/material": "^5.14.10",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@rollup/plugin-typescript": "^11.1.4",
+    "@mui/icons-material": "^5.14.13",
+    "@mui/material": "^5.14.13",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
     "@size-limit/preset-small-lib": "^9.0.0",
-    "@storybook/addon-a11y": "^7.4.5",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-interactions": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/addon-storysource": "^7.4.5",
-    "@storybook/blocks": "^7.4.5",
-    "@storybook/react": "^7.4.5",
-    "@storybook/react-vite": "^7.4.5",
-    "@storybook/testing-library": "^0.2.1",
-    "@types/node": "^20.7.0",
-    "@types/react": "^18.2.22",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^6.7.3",
+    "@storybook/addon-a11y": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-storysource": "^7.4.6",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-vite": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/node": "^20.8.6",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
     "@vitejs/plugin-react": "^4.1.0",
-    "eslint": "^8.50.0",
+    "eslint": "^8.51.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rollup": "^2.79.1",
     "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-dts": "^6.0.2",
+    "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^9.0.0",
-    "storybook": "^7.4.5",
+    "storybook": "^7.4.6",
     "storybook-dark-mode": "^3.0.1",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9"
+    "vite": "^4.4.11"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",
@@ -113,8 +113,8 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.10.3",
-    "@tanstack/react-virtual": "3.0.0-beta.60",
+    "@tanstack/react-table": "8.10.7",
+    "@tanstack/react-virtual": "3.0.0-beta.65",
     "highlight-words": "1.2.2"
   }
 }
diff --git a/packages/material-react-table/src/body/MRT_TableBodyCell.tsx b/packages/material-react-table/src/body/MRT_TableBodyCell.tsx
@@ -253,7 +253,7 @@ export const MRT_TableBodyCell = ({
       <>
         {cell.getIsPlaceholder() ? (
           columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null
-        ) : (isLoading || showSkeletons) && cell.getValue() === null ? (
+        ) : isLoading || showSkeletons ? (
           <Skeleton
             animation="wave"
             height={20}

diff --git a/packages/material-react-table/src/body/MRT_TableBodyRow.tsx b/packages/material-react-table/src/body/MRT_TableBodyRow.tsx
@@ -120,16 +120,18 @@ export const MRT_TableBodyRow = ({
               ? (cellOrVirtualCell as VirtualItem)
               : undefined,
           };
-          return memoMode === 'cells' &&
+          return cell ? (
+            memoMode === 'cells' &&
             cell.column.columnDef.columnDefType === 'data' &&
             !draggingColumn &&
             !draggingRow &&
             editingCell?.id !== cell.id &&
             editingRow?.id !== row.id ? (
-            <Memo_MRT_TableBodyCell key={cell.id} {...props} />
-          ) : (
-            <MRT_TableBodyCell key={cell.id} {...props} />
-          );
+              <Memo_MRT_TableBodyCell key={cell.id} {...props} />
+            ) : (
+              <MRT_TableBodyCell key={cell.id} {...props} />
+            )
+          ) : null;
         })}
         {virtualPaddingRight ? (
           <td style={{ display: 'flex', width: virtualPaddingRight }} />

diff --git a/packages/material-react-table/src/buttons/MRT_ExpandAllButton.tsx b/packages/material-react-table/src/buttons/MRT_ExpandAllButton.tsx
@@ -35,9 +35,8 @@ export const MRT_ExpandAllButton = ({ table }: Props) => {
       enterDelay={1000}
       enterNextDelay={1000}
       title={
-        iconButtonProps?.title ?? isAllRowsExpanded
-          ? localization.collapseAll
-          : localization.expandAll
+        iconButtonProps?.title ??
+        (isAllRowsExpanded ? localization.collapseAll : localization.expandAll)
       }
     >
       <span>

diff --git a/packages/material-react-table/src/buttons/MRT_ExpandButton.tsx b/packages/material-react-table/src/buttons/MRT_ExpandButton.tsx
@@ -44,9 +44,8 @@ export const MRT_ExpandButton = <TData extends Record<string, any> = {}>({
       enterDelay={1000}
       enterNextDelay={1000}
       title={
-        iconButtonProps?.title ?? isExpanded
-          ? localization.collapse
-          : localization.expand
+        iconButtonProps?.title ??
+        (isExpanded ? localization.collapse : localization.expand)
       }
     >
       <span>

diff --git a/packages/material-react-table/src/buttons/MRT_FullScreenToggleButton.tsx b/packages/material-react-table/src/buttons/MRT_FullScreenToggleButton.tsx
@@ -31,7 +31,7 @@ export const MRT_FullScreenToggleButton = <
   return (
     <Tooltip arrow title={rest?.title ?? localization.toggleFullScreen}>
       <IconButton
-        aria-label={localization.showHideFilters}
+        aria-label={localization.toggleFullScreen}
         onClick={handleToggleFullScreen}
         {...rest}
         title={undefined}

diff --git a/packages/material-react-table/src/footer/MRT_TableFooterRow.tsx b/packages/material-react-table/src/footer/MRT_TableFooterRow.tsx
@@ -63,9 +63,9 @@ export const MRT_TableFooterRow = ({
           ? footerGroup.headers[footerOrVirtualFooter.index]
           : (footerOrVirtualFooter as MRT_Header);
 
-        return (
+        return footer ? (
           <MRT_TableFooterCell footer={footer} key={footer.id} table={table} />
-        );
+        ) : null;
       })}
       {virtualPaddingRight ? (
         <th style={{ display: 'flex', width: virtualPaddingRight }} />

diff --git a/packages/material-react-table/src/head/MRT_TableHeadCellSortLabel.tsx b/packages/material-react-table/src/head/MRT_TableHeadCellSortLabel.tsx
@@ -25,12 +25,15 @@ export const MRT_TableHeadCellSortLabel = ({
   const { column } = header;
   const { columnDef } = column;
   const { sorting } = getState();
+  const sorted = column.getIsSorted();
 
-  const sortTooltip = column.getIsSorted()
-    ? column.getIsSorted() === 'desc'
+  const sortTooltip = sorted
+    ? sorted === 'desc'
       ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
       : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
-    : localization.unsorted;
+    : column.getNextSortingOrder() === 'desc'
+    ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
+    : localization.sortByColumnAsc.replace('{column}', columnDef.header);
 
   return (
     <Tooltip arrow placement="top" title={sortTooltip}>
@@ -40,12 +43,8 @@ export const MRT_TableHeadCellSortLabel = ({
       >
         <TableSortLabel
           aria-label={sortTooltip}
-          active={!!column.getIsSorted()}
-          direction={
-            column.getIsSorted()
-              ? (column.getIsSorted() as 'asc' | 'desc')
-              : undefined
-          }
+          active={!!sorted}
+          direction={sorted ? (sorted as 'asc' | 'desc') : undefined}
           sx={{
             flex: '0 0',
             width: '2.4ch',

diff --git a/packages/material-react-table/src/head/MRT_TableHeadRow.tsx b/packages/material-react-table/src/head/MRT_TableHeadRow.tsx
@@ -53,9 +53,9 @@ export const MRT_TableHeadRow = ({
           ? headerGroup.headers[headerOrVirtualHeader.index]
           : (headerOrVirtualHeader as MRT_Header);
 
-        return (
+        return header ? (
           <MRT_TableHeadCell header={header} key={header.id} table={table} />
-        );
+        ) : null;
       })}
       {virtualPaddingRight ? (
         <th style={{ display: 'flex', width: virtualPaddingRight }} />