release v1.11.4 - right column pinning fixes

KevinVandy · May 19, 2023 · 5e8add9 · 5e8add9 · vercel · May 19, 2023
1 parent 7c4a802
commit 5e8add9
Show file tree

Hide file tree

Showing 25 changed files with 355 additions and 41 deletions.
diff --git a/apps/material-react-table-docs/example-groups/LocaleExamples.tsx b/apps/material-react-table-docs/example-groups/LocaleExamples.tsx
@@ -8,6 +8,7 @@ import ES_Table from '../examples/localization-i18n-es';
 import FA_Table from '../examples/localization-i18n-fa';
 import FI_Table from '../examples/localization-i18n-fi';
 import FR_Table from '../examples/localization-i18n-fr';
+import HU_Table from '../examples/localization-i18n-hu';
 import ID_Table from '../examples/localization-i18n-id';
 import IT_Table from '../examples/localization-i18n-it';
 import JA_Table from '../examples/localization-i18n-ja';
@@ -36,6 +37,7 @@ const supportedLocales = [
   'fa',
   'fi',
   'fr',
+  'hu',
   'id',
   'it',
   'ja',
@@ -88,6 +90,7 @@ const LocaleExamples = () => {
       {currentLocale === 'fa' && <FA_Table />}
       {currentLocale === 'fi' && <FI_Table />}
       {currentLocale === 'fr' && <FR_Table />}
+      {currentLocale === 'hu' && <HU_Table />}
       {currentLocale === 'id' && <ID_Table />}
       {currentLocale === 'it' && <IT_Table />}
       {currentLocale === 'ja' && <JA_Table />}

diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/index.tsx b/apps/material-react-table-docs/examples/localization-i18n-hu/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { SourceCodeSnippet } from '../../components/mdx/SourceCodeSnippet';
+import Example from './sandbox/src/TS';
+const JS = require('!!raw-loader!./sandbox/src/JS.js').default;
+const TS = require('!!raw-loader!./sandbox/src/TS.tsx').default;
+
+const ExampleTable = () => {
+  return (
+    <SourceCodeSnippet
+      Component={Example}
+      javaScriptCode={JS}
+      typeScriptCode={TS}
+      tableId="localization-i18n-hu"
+    />
+  );
+};
+
+export default ExampleTable;
diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/.gitignore b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/README.md b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/index.html b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Material React Table Example</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/package.json b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "material-react-table-example-localization-i18n-hu",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3001",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.12.1",
+    "material-react-table": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^4.0.0",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.1"
+  }
+}
diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/JS.js b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/JS.js
@@ -0,0 +1,62 @@
+import React from 'react';
+
+//Import Material React Table and its Types
+import MaterialReactTable from 'material-react-table';
+
+//Import Material React Table Translations
+import { MRT_Localization_HU } from 'material-react-table/locales/hu';
+
+//mock data
+import { data } from './makeData';
+
+const columns = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'Keresztnév',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Vezetéknév',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Kor',
+  },
+  //end
+];
+
+const Example = () => {
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableColumnFilterModes
+      enableColumnOrdering
+      enableEditing
+      enablePinning
+      enableRowActions
+      enableRowSelection
+      enableSelectAll={false}
+      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+      localization={MRT_Localization_HU}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { huHU } from '@mui/material/locale';
+
+const ExampleWithThemeProvider = () => {
+  const theme = useTheme(); //replace with your theme/createTheme
+  return (
+    //Setting Material UI locale as best practice to result in better accessibility
+    <ThemeProvider theme={createTheme(theme, huHU)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;
diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/TS.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+//Import Material React Table and its Types
+import MaterialReactTable, { type MRT_ColumnDef } from 'material-react-table';
+
+//Import Material React Table Translations
+import { MRT_Localization_HU } from 'material-react-table/locales/hu';
+
+//mock data
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'Keresztnév',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Vezetéknév',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Kor',
+  },
+  //end
+];
+
+const Example = () => {
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableColumnFilterModes
+      enableColumnOrdering
+      enableEditing
+      enablePinning
+      enableRowActions
+      enableRowSelection
+      enableSelectAll={false}
+      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+      localization={MRT_Localization_HU}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { huHU } from '@mui/material/locale';
+
+const ExampleWithThemeProvider = () => {
+  const theme = useTheme(); //replace with your theme/createTheme
+  return (
+    //Setting Material UI locale as best practice to result in better accessibility
+    <ThemeProvider theme={createTheme(theme, huHU)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;
diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/main.tsx b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Example from './TS';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <Example />
+  </React.StrictMode>,
+);
diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/makeData.ts b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/makeData.ts
@@ -0,0 +1,23 @@
+export type Person = {
+  firstName: string;
+  lastName: string;
+  age: number;
+};
+
+export const data: Person[] = [
+  {
+    firstName: 'Kevin',
+    lastName: 'Vandy',
+    age: 26,
+  },
+  {
+    firstName: 'Theodore',
+    lastName: 'Browne',
+    age: 28,
+  },
+  {
+    firstName: 'Tanner',
+    lastName: 'Linsley',
+    age: 33,
+  },
+];
diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/vite.env.d.ts b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/vite.env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/tsconfig.json b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/tsconfig.node.json b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node"
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/vite.config.js b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
diff --git 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.11.4 (2023-05-19)
+
+- Fixed right column pinning spacing issues
+- Implemented `enableSortingRemoval` in column actions menu
+- Internal virtualization specific logic for Firefox vs Chrome
+- Exported new `MRT_FilterFnsState` type
+- Exported `MRT_TableHeadCellFilterContainer` component
+- Added hu translations that can be imported from `'material-react-table/locales/hu'`
+
 #### v1.11.3 (2023-05-07)
 
 - Removed internal `measureElement` virtualizer option to prevent firefox from crashing with virtualization enabled

diff --git a/apps/material-react-table-docs/pages/docs/guides/localization.mdx b/apps/material-react-table-docs/pages/docs/guides/localization.mdx
@@ -22,7 +22,7 @@ Material React Table has full support for localization (i18n). Some locales are
 
 The following locales are included and can be imported from `'material-react-table/locales/'`:
 
-`cs`, `da`, `de`, `en`, `es`, `fa`, `fi`, `fr`, `id`, `it`, `nl`, `ja`, `pl`, `pt`, `pt-BR`, `ro`, `ru`, `sk`, `sr-Cryl-RS`, `sr-Latn-RS`, `sv`, `tr`, `uk`, `vi`, `zh-Hans`, `zh-Hant`
+`cs`, `da`, `de`, `en`, `es`, `fa`, `fi`, `fr`, `hu`, `id`, `it`, `nl`, `ja`, `pl`, `pt`, `pt-BR`, `ro`, `ru`, `sk`, `sr-Cryl-RS`, `sr-Latn-RS`, `sv`, `tr`, `uk`, `vi`, `zh-Hans`, `zh-Hant`
 
 > If your language is not yet supported, please consider making a PR to add it to the library! See [here on GitHub](https://github.com/KevinVandy/material-react-table/tree/main/packages/material-react-table/src/_locales).
 

diff --git a/apps/material-react-table-docs/pages/docs/guides/sorting.mdx b/apps/material-react-table-docs/pages/docs/guides/sorting.mdx
@@ -25,6 +25,7 @@ Material React Table supports almost any sorting scenario you may have. Client-s
       'enableGlobalFilterRankedResults',
       'enableMultiSort',
       'enableSorting',
+      'enableSortingRemoval',
       'getSortedRowModel',
       'isMultiSortEvent',
       'manualSorting',
@@ -118,6 +119,18 @@ Multi-sorting is also enabled by default, which means you can sort by multiple c
 
 You can limit the number of columns that can be sorted at once by setting the `maxMultiSortColCount` prop, or you can disable multi-sorting entirely by setting the `enableMultiSort` prop to `false`.
 
+#### Sorting Removal
+
+By default, users can remove a sort on a column by clicking through the sort direction options or selecting "Clear Sort" from the column actions menu. You can disable this feature by setting the `enableSortingRemoval` prop to `false`.
+
+```jsx
+<MaterialReactTable
+  columns={columns}
+  data={data}
+  enableSortingRemoval={false} //users will not be able to remove a sort on a column
+/>
+```
+
 #### Sort Direction
 
 By default, columns with `string` datatypes will sort alphabetically in ascending order, but columns with `number` datatypes will sort numerically in descending order. You can change the default sort direction per column by specifying the `sortDescFirst` column option to either `true` or `false`. You can also change the default sort direction globally by setting the `sortDescFirst` prop to either `true` or `false`.

diff --git a/apps/material-react-table-storybook/stories/features/Sorting.stories.tsx b/apps/material-react-table-storybook/stories/features/Sorting.stories.tsx
@@ -85,6 +85,14 @@ export const DisableMultiSorting = () => (
   <MaterialReactTable columns={columns} data={data} enableMultiSort={false} />
 );
 
+export const DisableSortingRemoval = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enableSortingRemoval={false}
+  />
+);
+
 export const SortRanking = () => (
   <MaterialReactTable
     columns={[

diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.11.3",
+  "version": "1.11.4",
   "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/rollup-locales.config.mjs b/packages/material-react-table/rollup-locales.config.mjs
@@ -10,6 +10,7 @@ const supportedLocales = [
   'fa',
   'fi',
   'fr',
+  'hu',
   'id',
   'it',
   'ja',