material-react-table 2.0.0-beta.3 → 2.0.0-beta.5

package/locales/sv/index.d.ts

@@ -0,0 +1,3 @@
+import { type MRT_Localization } from '../..';
+  export declare const MRT_Localization_SV: MRT_Localization;
+  

package/locales/sv/index.esm.d.ts

@@ -0,0 +1,3 @@
+import { type MRT_Localization } from '../..';
+  export declare const MRT_Localization_SV: MRT_Localization;
+  

package/locales/{sv.esm.js → sv/index.esm.js}

@@ -91,4 +91,3 @@ const MRT_Localization_SV = {
 };
 
 export { MRT_Localization_SV };
-//# sourceMappingURL=sv.esm.js.map

package/locales/{sv.js → sv/index.js}

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const MRT_Localization_SV = {
     actions: 'Åtgärder',
     and: 'och',
@@ -95,4 +93,3 @@ const MRT_Localization_SV = {
 };
 
 exports.MRT_Localization_SV = MRT_Localization_SV;
-//# sourceMappingURL=sv.js.map

package/locales/sv/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "./index.js",
+  "module": "./index.esm.js",
+  "sideEffects": false,
+  "types": "./index.d.ts"
+}

package/locales/tr/index.d.ts

@@ -0,0 +1,3 @@
+import { type MRT_Localization } from '../..';
+  export declare const MRT_Localization_TR: MRT_Localization;
+  

package/locales/tr/index.esm.d.ts

@@ -0,0 +1,3 @@
+import { type MRT_Localization } from '../..';
+  export declare const MRT_Localization_TR: MRT_Localization;
+  

package/locales/{tr.esm.js → tr/index.esm.js}

@@ -91,4 +91,3 @@ const MRT_Localization_TR = {
 };
 
 export { MRT_Localization_TR };
-//# sourceMappingURL=tr.esm.js.map

package/locales/{tr.js → tr/index.js}

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const MRT_Localization_TR = {
     actions: 'İşlemler',
     and: 've',
@@ -95,4 +93,3 @@ const MRT_Localization_TR = {
 };
 
 exports.MRT_Localization_TR = MRT_Localization_TR;
-//# sourceMappingURL=tr.js.map

package/locales/tr/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "./index.js",
+  "module": "./index.esm.js",
+  "sideEffects": false,
+  "types": "./index.d.ts"
+}

package/locales/uk/index.d.ts

@@ -0,0 +1,3 @@
+import { type MRT_Localization } from '../..';
+  export declare const MRT_Localization_UK: MRT_Localization;
+  

package/locales/uk/index.esm.d.ts

@@ -0,0 +1,3 @@
+import { type MRT_Localization } from '../..';
+  export declare const MRT_Localization_UK: MRT_Localization;
+  

package/locales/{uk.esm.js → uk/index.esm.js}

@@ -91,4 +91,3 @@ const MRT_Localization_UK = {
 };
 
 export { MRT_Localization_UK };
-//# sourceMappingURL=uk.esm.js.map

package/locales/{uk.js → uk/index.js}

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const MRT_Localization_UK = {
     actions: 'Дії',
     and: 'і',
@@ -95,4 +93,3 @@ const MRT_Localization_UK = {
 };
 
 exports.MRT_Localization_UK = MRT_Localization_UK;
-//# sourceMappingURL=uk.js.map

package/locales/uk/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "./index.js",
+  "module": "./index.esm.js",
+  "sideEffects": false,
+  "types": "./index.d.ts"
+}

package/locales/vi/index.d.ts

@@ -0,0 +1,3 @@
+import { type MRT_Localization } from '../..';
+  export declare const MRT_Localization_VI: MRT_Localization;
+  

package/locales/vi/index.esm.d.ts

@@ -0,0 +1,3 @@
+import { type MRT_Localization } from '../..';
+  export declare const MRT_Localization_VI: MRT_Localization;
+  

package/locales/{vi.esm.js → vi/index.esm.js}

@@ -91,4 +91,3 @@ const MRT_Localization_VI = {
 };
 
 export { MRT_Localization_VI };
-//# sourceMappingURL=vi.esm.js.map

package/locales/{vi.js → vi/index.js}

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const MRT_Localization_VI = {
     actions: 'Thao tác',
     and: 'và',
@@ -95,4 +93,3 @@ const MRT_Localization_VI = {
 };
 
 exports.MRT_Localization_VI = MRT_Localization_VI;
-//# sourceMappingURL=vi.js.map

package/locales/vi/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "./index.js",
+  "module": "./index.esm.js",
+  "sideEffects": false,
+  "types": "./index.d.ts"
+}

package/locales/zh-Hans/index.d.ts

@@ -0,0 +1,3 @@
+import { type MRT_Localization } from '../..';
+  export declare const MRT_Localization_ZH_HANS: MRT_Localization;
+  

package/locales/zh-Hans/index.esm.d.ts

@@ -0,0 +1,3 @@
+import { type MRT_Localization } from '../..';
+  export declare const MRT_Localization_ZH_HANS: MRT_Localization;
+  

package/locales/{zh-Hans.esm.js → zh-Hans/index.esm.js}

@@ -91,4 +91,3 @@ const MRT_Localization_ZH_HANS = {
 };
 
 export { MRT_Localization_ZH_HANS };
-//# sourceMappingURL=zh-Hans.esm.js.map

package/locales/{zh-Hans.js → zh-Hans/index.js}

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const MRT_Localization_ZH_HANS = {
     actions: '动作',
     and: '与',
@@ -95,4 +93,3 @@ const MRT_Localization_ZH_HANS = {
 };
 
 exports.MRT_Localization_ZH_HANS = MRT_Localization_ZH_HANS;
-//# sourceMappingURL=zh-Hans.js.map

package/locales/zh-Hans/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "./index.js",
+  "module": "./index.esm.js",
+  "sideEffects": false,
+  "types": "./index.d.ts"
+}

package/locales/zh-Hant/index.d.ts

@@ -0,0 +1,3 @@
+import { type MRT_Localization } from '../..';
+  export declare const MRT_Localization_ZH_HANT: MRT_Localization;
+  

package/locales/zh-Hant/index.esm.d.ts

@@ -0,0 +1,3 @@
+import { type MRT_Localization } from '../..';
+  export declare const MRT_Localization_ZH_HANT: MRT_Localization;
+  

package/locales/{zh-Hant.esm.js → zh-Hant/index.esm.js}

@@ -91,4 +91,3 @@ const MRT_Localization_ZH_HANT = {
 };
 
 export { MRT_Localization_ZH_HANT };
-//# sourceMappingURL=zh-Hant.esm.js.map

package/locales/{zh-Hant.js → zh-Hant/index.js}

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const MRT_Localization_ZH_HANT = {
     actions: '動作',
     and: '與',
@@ -95,4 +93,3 @@ const MRT_Localization_ZH_HANT = {
 };
 
 exports.MRT_Localization_ZH_HANT = MRT_Localization_ZH_HANT;
-//# sourceMappingURL=zh-Hant.js.map

package/locales/zh-Hant/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "./index.js",
+  "module": "./index.esm.js",
+  "sideEffects": false,
+  "types": "./index.d.ts"
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.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.",
@@ -23,9 +23,19 @@
   "bugs": {
     "url": "https://github.com/KevinVandy/material-react-table/issues"
   },
+  "sideEffects": false,
   "main": "dist/cjs/index.js",
   "module": "dist/esm/material-react-table.esm.js",
   "typings": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/material-react-table.esm.js",
+      "default": "./dist/cjs/index.js"
+    },
+    "./package.json": "./package.json",
+    "./locales/*": "./locales/*"
+  },
   "files": [
     "dist",
     "locales",
@@ -42,16 +52,16 @@
     }
   ],
   "engines": {
-    "node": ">=14"
+    "node": ">=16"
   },
   "scripts": {
     "build": "pnpm lib:build",
     "build-locales": "pnpm lib:build-locales",
-    "build-no-locales": "pnpm lib:build-no-locales",
+    "build-lib": "pnpm lib:build-lib",
     "dev": "pnpm lib:dev",
-    "lib:build": "rm -rf dist && pnpm build-no-locales && pnpm build-locales",
+    "lib:build": "rm -rf dist && pnpm build-lib && pnpm build-locales && rm -rf dist/cjs/types dist/esm/types",
     "lib:build-locales": "rm -rf locales && node build-locales.mjs",
-    "lib:build-no-locales": "rm -rf dist && rollup -c rollup.config.mjs && size-limit",
+    "lib:build-lib": "rm -rf dist && rollup -c rollup.config.mjs && size-limit",
     "lib:dev": "rollup -c rollup.config.mjs --watch",
     "lint": "eslint .",
     "size": "size-limit",
@@ -64,46 +74,45 @@
     "@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.13",
-    "@mui/material": "^5.14.13",
+    "@faker-js/faker": "^8.2.0",
+    "@mui/icons-material": "^5.14.14",
+    "@mui/material": "^5.14.14",
     "@mui/x-date-pickers": "^6.16.2",
     "@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.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/addon-a11y": "^7.5.0",
+    "@storybook/addon-essentials": "^7.5.0",
+    "@storybook/addon-interactions": "^7.5.0",
+    "@storybook/addon-links": "^7.5.0",
+    "@storybook/addon-storysource": "^7.5.0",
+    "@storybook/blocks": "^7.5.0",
+    "@storybook/react": "^7.5.0",
+    "@storybook/react-vite": "^7.5.0",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.8.5",
-    "@types/react": "^18.2.28",
-    "@types/react-dom": "^18.2.13",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.7.5",
+    "@types/node": "^20.8.7",
+    "@types/react": "^18.2.29",
+    "@types/react-dom": "^18.2.14",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
     "@vitejs/plugin-react": "^4.1.0",
     "eslint": "^8.51.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
-    "eslint-plugin-perfectionist": "^2.1.0",
+    "eslint-plugin-perfectionist": "^2.2.0",
     "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": "^4.1.4",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^9.0.0",
-    "storybook": "^7.4.6",
+    "storybook": "^7.5.0",
     "storybook-dark-mode": "^3.0.1",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
-    "vite": "^4.4.11"
+    "vite": "^4.5.0"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11",
@@ -116,8 +125,8 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.10.6",
-    "@tanstack/react-virtual": "3.0.0-beta.65",
+    "@tanstack/react-table": "8.10.7",
+    "@tanstack/react-virtual": "3.0.0-beta.66",
     "highlight-words": "1.2.2"
   }
 }

package/src/body/MRT_TableBody.tsx

@@ -5,7 +5,7 @@ import {
   type Virtualizer,
   useVirtualizer,
 } from '@tanstack/react-virtual';
-import TableBody from '@mui/material/TableBody';
+import TableBody, { type TableBodyProps } from '@mui/material/TableBody';
 import Typography from '@mui/material/Typography';
 import { MRT_TableBodyRow, Memo_MRT_TableBodyRow } from './MRT_TableBodyRow';
 import {
@@ -20,7 +20,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableBodyProps {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
@@ -34,6 +34,7 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
+  ...rest
 }: Props<TData>) => {
   const {
     getBottomRows,
@@ -80,7 +81,10 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
     sorting,
   } = getState();
 
-  const tableBodyProps = parseFromValuesOrFunc(muiTableBodyProps, { table });
+  const tableBodyProps = {
+    ...parseFromValuesOrFunc(muiTableBodyProps, { table }),
+    ...rest,
+  };
   const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
     table,
   });
@@ -241,9 +245,7 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
               <td
                 colSpan={table.getVisibleLeafColumns().length}
                 style={{
-                  display: layoutMode?.startsWith('grid')
-                    ? 'grid'
-                    : 'table-cell',
+                  display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
                 }}
               >
                 {renderEmptyRowsFallback?.({ table }) ?? (

package/src/body/MRT_TableBodyCell.tsx

@@ -7,34 +7,33 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { type VirtualItem } from '@tanstack/react-virtual';
 import Skeleton from '@mui/material/Skeleton';
-import TableCell from '@mui/material/TableCell';
+import TableCell, { type TableCellProps } from '@mui/material/TableCell';
 import { useTheme } from '@mui/material/styles';
 import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
 import { MRT_TableBodyRowGrabHandle } from './MRT_TableBodyRowGrabHandle';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import {
-  getCommonCellStyles,
   getIsFirstColumn,
   getIsLastColumn,
   parseFromValuesOrFunc,
 } from '../column.utils';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
+import { getCommonMRTCellStyles, getMRTTheme } from '../style.utils';
 import {
   type MRT_Cell,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableCellProps {
   cell: MRT_Cell<TData>;
   measureElement?: (element: HTMLTableCellElement) => void;
   numRows?: number;
   rowIndex: number;
   rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance<TData>;
-  virtualCell?: VirtualItem;
+  virtualIndex?: number;
 }
 
 export const MRT_TableBodyCell = <TData extends MRT_RowData>({
@@ -44,7 +43,8 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   rowIndex,
   rowRef,
   table,
-  virtualCell,
+  virtualIndex,
+  ...rest
 }: Props<TData>) => {
   const theme = useTheme();
   const {
@@ -83,19 +83,11 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
+  const args = { cell, column, row, table };
   const tableCellProps = {
-    ...parseFromValuesOrFunc(muiTableBodyCellProps, {
-      cell,
-      column,
-      row,
-      table,
-    }),
-    ...parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, {
-      cell,
-      column,
-      row,
-      table,
-    }),
+    ...parseFromValuesOrFunc(muiTableBodyCellProps, args),
+    ...parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, args),
+    ...rest,
   };
 
   const skeletonProps = parseFromValuesOrFunc(muiSkeletonProps, {
@@ -105,6 +97,8 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     table,
   });
 
+  const { draggingBorderColor } = getMRTTheme(table, theme);
+
   const [skeletonWidth, setSkeletonWidth] = useState(100);
   useEffect(() => {
     if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return;
@@ -127,13 +121,13 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
 
     const borderStyle =
       columnSizingInfo.isResizingColumn === column.id
-        ? `2px solid ${theme.palette.primary.main} !important`
+        ? `2px solid ${draggingBorderColor} !important`
         : isDraggingColumn || isDraggingRow
-        ? `1px dashed ${theme.palette.text.secondary} !important`
+        ? `1px dashed ${theme.palette.grey[500]} !important`
         : isHoveredColumn ||
           isHoveredRow ||
           columnSizingInfo.isResizingColumn === column.id
-        ? `2px dashed ${theme.palette.primary.main} !important`
+        ? `2px dashed ${draggingBorderColor} !important`
         : undefined;
 
     if (columnSizingInfo.isResizingColumn === column.id) {
@@ -213,7 +207,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
 
   return (
     <TableCell
-      data-index={virtualCell?.index}
+      data-index={virtualIndex}
       ref={(node: HTMLTableCellElement) => {
         if (node) {
           measureElement?.(node);
@@ -224,9 +218,10 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       onDragEnter={handleDragEnter}
       sx={(theme) => ({
         '&:hover': {
-          outline: ['cell', 'table'].includes(editDisplayMode ?? '')
-            ? `1px solid ${theme.palette.text.secondary}`
-            : undefined,
+          outline:
+            ['cell', 'table'].includes(editDisplayMode ?? '') && isEditable
+              ? `1px solid ${theme.palette.grey[500]}`
+              : undefined,
           outlineOffset: '-1px',
           textOverflow: 'clip',
         },
@@ -265,7 +260,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
           row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal',
         zIndex:
           draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
-        ...getCommonCellStyles({
+        ...getCommonMRTCellStyles({
           column,
           table,
           tableCellProps,
@@ -274,47 +269,53 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
         ...draggingBorders,
       })}
     >
-      <>
-        {cell.getIsPlaceholder() ? (
-          columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null
-        ) : isLoading || showSkeletons ? (
-          <Skeleton
-            animation="wave"
-            height={20}
-            width={skeletonWidth}
-            {...skeletonProps}
-          />
-        ) : enableRowNumbers &&
-          rowNumberMode === 'static' &&
-          column.id === 'mrt-row-numbers' ? (
-          rowIndex + 1
-        ) : column.id === 'mrt-row-drag' ? (
-          <MRT_TableBodyRowGrabHandle row={row} rowRef={rowRef} table={table} />
-        ) : columnDefType === 'display' &&
-          (column.id === 'mrt-row-select' ||
-            column.id === 'mrt-row-expand' ||
-            !row.getIsGrouped()) ? (
-          columnDef.Cell?.({
-            cell,
-            column,
-            renderedCellValue: cell.renderValue() as any,
-            row,
-            table,
-          })
-        ) : isCreating || isEditing ? (
-          <MRT_EditCellTextField cell={cell} table={table} />
-        ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
-          columnDef.enableClickToCopy !== false ? (
-          <MRT_CopyButton cell={cell} table={table}>
+      {tableCellProps.children ?? (
+        <>
+          {cell.getIsPlaceholder() ? (
+            columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null
+          ) : showSkeletons !== false && (isLoading || showSkeletons) ? (
+            <Skeleton
+              animation="wave"
+              height={20}
+              width={skeletonWidth}
+              {...skeletonProps}
+            />
+          ) : enableRowNumbers &&
+            rowNumberMode === 'static' &&
+            column.id === 'mrt-row-numbers' ? (
+            rowIndex + 1
+          ) : column.id === 'mrt-row-drag' ? (
+            <MRT_TableBodyRowGrabHandle
+              row={row}
+              rowRef={rowRef}
+              table={table}
+            />
+          ) : columnDefType === 'display' &&
+            (column.id === 'mrt-row-select' ||
+              column.id === 'mrt-row-expand' ||
+              !row.getIsGrouped()) ? (
+            columnDef.Cell?.({
+              cell,
+              column,
+              renderedCellValue: cell.renderValue() as any,
+              row,
+              table,
+            })
+          ) : isCreating || isEditing ? (
+            <MRT_EditCellTextField cell={cell} table={table} />
+          ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
+            columnDef.enableClickToCopy !== false ? (
+            <MRT_CopyButton cell={cell} table={table}>
+              <MRT_TableBodyCellValue cell={cell} table={table} />
+            </MRT_CopyButton>
+          ) : (
             <MRT_TableBodyCellValue cell={cell} table={table} />
-          </MRT_CopyButton>
-        ) : (
-          <MRT_TableBodyCellValue cell={cell} table={table} />
-        )}
-        {cell.getIsGrouped() && !columnDef.GroupedCell && (
-          <> ({row.subRows?.length})</>
-        )}
-      </>
+          )}
+          {cell.getIsGrouped() && !columnDef.GroupedCell && (
+            <> ({row.subRows?.length})</>
+          )}
+        </>
+      )}
     </TableCell>
   );
 };