From 5c450c89f5ba1ca904dda1765eaf894e821f2bc0 Mon Sep 17 00:00:00 2001
From: Kevin Vandy <kevinvandy656@gmail.com>
Date: Thu, 9 Mar 2023 01:25:31 -0600
Subject: [PATCH] release v1.8.5 - various col size fixes

---
 apps/material-react-table-docs/pages/changelog.mdx   |  9 +++++++++
 .../pages/docs/guides/table-state-management.mdx     |  2 +-
 packages/material-react-table/package.json           |  2 +-
 .../material-react-table/src/MaterialReactTable.tsx  |  6 ++++--
 .../src/buttons/MRT_ExpandButton.tsx                 | 11 +++++++----
 .../src/buttons/MRT_GrabHandleButton.tsx             |  2 +-
 packages/material-react-table/src/column.utils.ts    | 12 ++++--------
 .../src/head/MRT_TableHeadCellResizeHandle.tsx       |  2 ++
 packages/material-react-table/src/index.tsx          | 12 ++++++++----
 .../material-react-table/src/table/MRT_Table.tsx     |  6 +++---
 10 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/apps/material-react-table-docs/pages/changelog.mdx b/apps/material-react-table-docs/pages/changelog.mdx
index 6e68f36f2..eca06f18a 100644
--- a/apps/material-react-table-docs/pages/changelog.mdx
+++ b/apps/material-react-table-docs/pages/changelog.mdx
@@ -12,6 +12,15 @@ import Head from 'next/head';
 
 ### Version 1 (Latest)
 
+#### v1.8.5 (2023-03-09)
+
+- Used more comprehensive regex to create css vars for column resizing from column ids/accessorKeys
+- Fixed more column resizing issues with nested column groups
+- Added official css classNames for column resizing elements
+- Added exports for `MRT_ExpandButton` and `MRT_GrabHandleButton` components
+- Exported `MRT_Updater` type so it does not have to be imported from `@tanstack/react-table`
+- zh locale row vs column translation tweaks
+
 #### v1.8.4 (2023-03-02)
 
 - Fixed column resizing issues with nested column groups
diff --git a/apps/material-react-table-docs/pages/docs/guides/table-state-management.mdx b/apps/material-react-table-docs/pages/docs/guides/table-state-management.mdx
index 4cf1d3870..d906c758d 100644
--- a/apps/material-react-table-docs/pages/docs/guides/table-state-management.mdx
+++ b/apps/material-react-table-docs/pages/docs/guides/table-state-management.mdx
@@ -146,7 +146,7 @@ const [pagination, setPagination] = useState({
   pageSize: 15,
 });
 
-const handlePaginationChange = (updater: Updater<PaginationState>) => {//Updater is a type from @tanstack/react-table
+const handlePaginationChange = (updater: MRT_Updater<PaginationState>) => {//MRT_Updater is a type from @tanstack/react-table
   //TanStack Table requires this strange syntax since updater can be a function to update the state or the new state itself
   setPagination((prevPagination) => updater instanceof Function ? updater(prevPagination) : updater);
 
diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json
index aa681a782..74d4cdf34 100644
--- a/packages/material-react-table/package.json
+++ b/packages/material-react-table/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.8.4",
+  "version": "1.8.5",
   "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.",
diff --git a/packages/material-react-table/src/MaterialReactTable.tsx b/packages/material-react-table/src/MaterialReactTable.tsx
index 238735938..40f74113b 100644
--- a/packages/material-react-table/src/MaterialReactTable.tsx
+++ b/packages/material-react-table/src/MaterialReactTable.tsx
@@ -49,7 +49,8 @@ import type {
   Table,
   TableOptions,
   TableState,
-  VisibilityState,
+  Updater,
+  VisibilityState
 } from '@tanstack/react-table';
 import type {
   VirtualizerOptions,
@@ -87,6 +88,7 @@ export type {
   PaginationState as MRT_PaginationState,
   RowSelectionState as MRT_RowSelectionState,
   SortingState as MRT_SortingState,
+  Updater as MRT_Updater,
   VirtualItem as MRT_VirtualItem,
   Virtualizer as MRT_Virtualizer,
   VirtualizerOptions as MRT_VirtualizerOptions,
@@ -841,7 +843,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
             headerGroup: MRT_HeaderGroup<TData>;
           }) => TableRowProps);
       muiTablePaginationProps?:
-        | Partial<TablePaginationProps>
+        | Partial<Omit<TablePaginationProps, 'rowsPerPage'>>
         | ((props: {
             table: MRT_TableInstance<TData>;
           }) => Partial<TablePaginationProps>);
diff --git a/packages/material-react-table/src/buttons/MRT_ExpandButton.tsx b/packages/material-react-table/src/buttons/MRT_ExpandButton.tsx
index a7a857e45..2525bf69c 100644
--- a/packages/material-react-table/src/buttons/MRT_ExpandButton.tsx
+++ b/packages/material-react-table/src/buttons/MRT_ExpandButton.tsx
@@ -3,12 +3,15 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
-interface Props {
-  row: MRT_Row;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ExpandButton = ({ row, table }: Props) => {
+export const MRT_ExpandButton = <TData extends Record<string, any> = {}>({
+  row,
+  table,
+}: Props<TData>) => {
   const {
     getState,
     options: {
diff --git a/packages/material-react-table/src/buttons/MRT_GrabHandleButton.tsx b/packages/material-react-table/src/buttons/MRT_GrabHandleButton.tsx
index 95be0af0a..e3e880ebf 100644
--- a/packages/material-react-table/src/buttons/MRT_GrabHandleButton.tsx
+++ b/packages/material-react-table/src/buttons/MRT_GrabHandleButton.tsx
@@ -1,7 +1,7 @@
 import React, { DragEventHandler } from 'react';
 import IconButton from '@mui/material/IconButton';
-import type { IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
+import type { IconButtonProps } from '@mui/material/IconButton';
 import type { MRT_TableInstance } from '..';
 
 interface Props<TData extends Record<string, any> = {}> {
diff --git a/packages/material-react-table/src/column.utils.ts b/packages/material-react-table/src/column.utils.ts
index b4332a1ae..83906f2b5 100644
--- a/packages/material-react-table/src/column.utils.ts
+++ b/packages/material-react-table/src/column.utils.ts
@@ -264,7 +264,9 @@ export const getCommonCellStyles = ({
   display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell',
   flex:
     table.options.layoutMode === 'grid'
-      ? `var(--col-${parseCSSVarId(header?.id ?? column.id)}-size) 0 auto`
+      ? `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+          header?.id ?? column.id,
+        )}-size) 0 auto`
       : undefined,
   left:
     column.getIsPinned() === 'left'
@@ -337,10 +339,4 @@ export const MRT_DefaultDisplayColumn = {
   enableSorting: false,
 } as const;
 
-export const parseCSSVarId = (id: string) =>
-  id
-    .replaceAll('.', '_')
-    .replaceAll(' ', '_')
-    .replaceAll('+', '_')
-    .replaceAll('(', '_')
-    .replaceAll(')', '_');
+export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
diff --git a/packages/material-react-table/src/head/MRT_TableHeadCellResizeHandle.tsx b/packages/material-react-table/src/head/MRT_TableHeadCellResizeHandle.tsx
index 1e623974f..e8660a1b9 100644
--- a/packages/material-react-table/src/head/MRT_TableHeadCellResizeHandle.tsx
+++ b/packages/material-react-table/src/head/MRT_TableHeadCellResizeHandle.tsx
@@ -19,6 +19,7 @@ export const MRT_TableHeadCellResizeHandle = ({ header, table }: Props) => {
 
   return (
     <Box
+      className="Mui-TableHeadCell-ResizeHandle-Wrapper"
       onDoubleClick={() => {
         setColumnSizingInfo((old) => ({
           ...old,
@@ -47,6 +48,7 @@ export const MRT_TableHeadCellResizeHandle = ({ header, table }: Props) => {
       }}
     >
       <Divider
+        className="Mui-TableHeadCell-ResizeHandle-Divider"
         flexItem
         orientation="vertical"
         sx={{
diff --git a/packages/material-react-table/src/index.tsx b/packages/material-react-table/src/index.tsx
index 847bfbc03..5cb9125c6 100644
--- a/packages/material-react-table/src/index.tsx
+++ b/packages/material-react-table/src/index.tsx
@@ -5,38 +5,42 @@ export * from './MaterialReactTable';
 import type { MRT_Icons } from './icons';
 export type { MRT_Icons };
 
+import { MRT_BottomToolbar } from './toolbar/MRT_BottomToolbar';
 import { MRT_CopyButton } from './buttons/MRT_CopyButton';
 import { MRT_EditActionButtons } from './buttons/MRT_EditActionButtons';
+import { MRT_ExpandButton } from './buttons/MRT_ExpandButton';
 import { MRT_FilterOptionMenu } from './menus/MRT_FilterOptionMenu';
 import { MRT_FullScreenToggleButton } from './buttons/MRT_FullScreenToggleButton';
+import { MRT_GrabHandleButton } from './buttons/MRT_GrabHandleButton';
 import { MRT_GlobalFilterTextField } from './inputs/MRT_GlobalFilterTextField';
 import { MRT_ShowHideColumnsButton } from './buttons/MRT_ShowHideColumnsButton';
 import { MRT_TablePagination } from './toolbar/MRT_TablePagination';
 import { MRT_ToggleDensePaddingButton } from './buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from './buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleGlobalFilterButton } from './buttons/MRT_ToggleGlobalFilterButton';
+import { MRT_ToggleRowActionMenuButton } from './buttons/MRT_ToggleRowActionMenuButton';
 import { MRT_ToolbarAlertBanner } from './toolbar/MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './toolbar/MRT_ToolbarDropZone';
 import { MRT_ToolbarInternalButtons } from './toolbar/MRT_ToolbarInternalButtons';
-import { MRT_ToggleRowActionMenuButton } from './buttons/MRT_ToggleRowActionMenuButton';
 import { MRT_TopToolbar } from './toolbar/MRT_TopToolbar';
-import { MRT_BottomToolbar } from './toolbar/MRT_BottomToolbar';
 
 export {
+  MRT_BottomToolbar,
   MRT_CopyButton,
   MRT_EditActionButtons,
+  MRT_ExpandButton,
   MRT_FilterOptionMenu,
   MRT_FullScreenToggleButton,
+  MRT_GrabHandleButton,
   MRT_GlobalFilterTextField,
   MRT_ShowHideColumnsButton,
   MRT_TablePagination,
   MRT_ToggleDensePaddingButton,
   MRT_ToggleFiltersButton,
   MRT_ToggleGlobalFilterButton,
+  MRT_ToggleRowActionMenuButton,
   MRT_ToolbarAlertBanner,
   MRT_ToolbarDropZone,
   MRT_ToolbarInternalButtons,
-  MRT_ToggleRowActionMenuButton,
   MRT_TopToolbar,
-  MRT_BottomToolbar,
 };
diff --git a/packages/material-react-table/src/table/MRT_Table.tsx b/packages/material-react-table/src/table/MRT_Table.tsx
index c5a0dddbe..3dfb49e95 100644
--- a/packages/material-react-table/src/table/MRT_Table.tsx
+++ b/packages/material-react-table/src/table/MRT_Table.tsx
@@ -59,9 +59,9 @@ export const MRT_Table = ({ table }: Props) => {
     const colSizes: { [key: string]: number } = {};
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
-      colSizes[`--header-${parseCSSVarId(header.id)}-size`] = header.getSize();
-      colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] =
-        header.column.getSize();
+      const colSize = header.getSize();
+      colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
+      colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
     }
     return colSizes;
   }, [columns, columnSizing, columnSizingInfo, columnVisibility]);