Skip to content

Commit 61037fc

Browse files
KevinVandyKevinVandy
committed
release v3.0.0-beta.2
1 parent 792222e commit 61037fc

File tree

16 files changed

+357
-197
lines changed

16 files changed

+357
-197
lines changed

‎apps/material-react-table-docs/components/mdx/SourceCodeSnippet.tsx

+15-20
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,13 @@ import { EthicalAd } from './EthicalAd';
3636

3737
export interface Props {
3838
Component?: any;
39-
apiCode?: string;
4039
tableId: string;
4140
typeScriptCode: string;
4241
showTopRow?: boolean;
4342
}
4443

4544
export const SourceCodeSnippet = ({
4645
Component,
47-
apiCode,
4846
tableId,
4947
typeScriptCode,
5048
showTopRow = true,
@@ -58,6 +56,7 @@ export const SourceCodeSnippet = ({
5856
setSecondaryColor,
5957
primaryColor,
6058
setPrimaryColor,
59+
setIsSandboxOpen,
6160
} = useThemeContext();
6261
const isMobile = useMediaQuery('(max-width: 720px)');
6362
const [codeTab, setCodeTab] = useState<
@@ -75,16 +74,21 @@ export const SourceCodeSnippet = ({
7574
}
7675
}, []);
7776

77+
useEffect(() => {
78+
setIsSandboxOpen(['stackblitz', 'sandbox'].includes(codeTab));
79+
return () => {
80+
setIsSandboxOpen(false);
81+
};
82+
}, [codeTab]);
83+
7884
const handleDismissV2Alert = () => {
7985
localStorage.setItem('v2AlertDismissed', 'true');
8086
setShowV2Alert(false);
8187
plausible('dismiss-v2-alert');
8288
};
8389

8490
const handleCopy = () => {
85-
navigator.clipboard.writeText(
86-
(codeTab === 'ts' ? typeScriptCode : apiCode) ?? '',
87-
);
91+
navigator.clipboard.writeText(typeScriptCode ?? '');
8892
setIsCopied(true);
8993
setTimeout(() => setIsCopied(false), 3000);
9094
};
@@ -227,7 +231,9 @@ export const SourceCodeSnippet = ({
227231
</Box>
228232
</Box>
229233
)}
230-
<Component />
234+
<Collapse in={!['stackblitz', 'sandbox'].includes(codeTab)}>
235+
<Component />
236+
</Collapse>
231237
</>
232238
)}
233239
<div>
@@ -291,19 +297,6 @@ export const SourceCodeSnippet = ({
291297
>
292298
{isMobile ? 'TS' : 'TypeScript'}
293299
</ToggleButton>
294-
{apiCode && (
295-
<ToggleButton
296-
onClick={() => {
297-
setCodeTab('api');
298-
plausible('toggle-to-api');
299-
}}
300-
value="api"
301-
selected={codeTab === 'api'}
302-
sx={{ textTransform: 'none' }}
303-
>
304-
{isMobile ? 'API' : 'Back-end API'}
305-
</ToggleButton>
306-
)}
307300
<ToggleButton
308301
onClick={() => {
309302
setCodeTab('stackblitz');
@@ -340,6 +333,7 @@ export const SourceCodeSnippet = ({
340333
border: '0',
341334
borderRadius: '4px',
342335
overflow: 'hidden',
336+
padding: '1rem 0',
343337
}}
344338
title="stackblitz"
345339
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
@@ -357,6 +351,7 @@ export const SourceCodeSnippet = ({
357351
border: '0',
358352
borderRadius: '4px',
359353
overflow: 'hidden',
354+
padding: '1rem 0',
360355
}}
361356
title="codesandbox"
362357
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
@@ -366,7 +361,7 @@ export const SourceCodeSnippet = ({
366361
{['ts', 'api'].includes(codeTab) && (
367362
<Paper elevation={3}>
368363
<Highlight
369-
code={(codeTab === 'ts' ? typeScriptCode : apiCode) ?? ''}
364+
code={typeScriptCode ?? ''}
370365
language={'tsx'}
371366
theme={
372367
theme.palette.mode === 'dark'

‎apps/material-react-table-docs/components/navigation/Layout.tsx

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { useRouter } from 'next/router';
2+
import { useState } from 'react';
3+
import { Box, useMediaQuery } from '@mui/material';
4+
import { BreadCrumbs } from './BreadCrumbs';
5+
import { MiniNav } from './MiniNav';
6+
import { Footer } from './Footer';
7+
import { TopBar } from './TopBar';
8+
import { SideBar } from './Sidebar';
9+
import { useThemeContext } from '../../styles/ThemeContext';
10+
11+
interface LayoutProps {
12+
children: React.ReactNode;
13+
}
14+
15+
export const Layout = ({ children }: LayoutProps) => {
16+
const { pathname } = useRouter();
17+
18+
const { isSandboxOpen } = useThemeContext();
19+
20+
const showBreadCrumbs = pathname !== '/';
21+
const showMiniNav =
22+
pathname.includes('/docs/getting-started') ||
23+
pathname.includes('/docs/api/mrt') ||
24+
pathname.includes('/docs/guides/') ||
25+
pathname.includes('/migrating') ||
26+
pathname === '/about' ||
27+
pathname === '/changelog' ||
28+
pathname === '/roadmap';
29+
30+
const isMobile = useMediaQuery('(max-width: 900px)');
31+
const isDesktop = useMediaQuery('(min-width: 1500px)');
32+
const isXLDesktop = useMediaQuery('(min-width: 1800px)');
33+
34+
const [navOpen, setNavOpen] = useState(false);
35+
return (
36+
<>
37+
<TopBar
38+
navOpen={navOpen || (isDesktop && !isSandboxOpen)}
39+
setNavOpen={setNavOpen}
40+
/>
41+
<SideBar
42+
navOpen={navOpen || (isDesktop && !isSandboxOpen)}
43+
setNavOpen={setNavOpen}
44+
/>
45+
<Box
46+
component="main"
47+
sx={(theme) => ({
48+
backgroundColor: theme.palette.background.default,
49+
color: theme.palette.text.primary,
50+
minHeight: '100vh',
51+
p: `64px ${showMiniNav && isXLDesktop ? '264px' : '32px'} 0 ${
52+
(navOpen || (isDesktop && !isSandboxOpen)) && !isMobile
53+
? '320px'
54+
: '32px'
55+
}`,
56+
transition: 'all 100ms ease-in-out',
57+
})}
58+
>
59+
<Box
60+
sx={{
61+
maxWidth: isSandboxOpen ? '100%' : '1200px',
62+
margin: 'auto',
63+
transition: 'all 100ms ease-in-out',
64+
width: '100%',
65+
}}
66+
>
67+
{showBreadCrumbs && <BreadCrumbs />}
68+
{showMiniNav && !isXLDesktop && <MiniNav />}
69+
{pathname === '/' ? children : <article>{children}</article>}
70+
<Footer />
71+
</Box>
72+
{showMiniNav && isXLDesktop && <MiniNav />}
73+
</Box>
74+
</>
75+
);
76+
};

‎apps/material-react-table-docs/components/prop-tables/tableOptions.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -493,7 +493,7 @@ export const tableOptions: TableOption[] = [
493493
type: 'boolean',
494494
},
495495
{
496-
tableOption: 'enableCellNavigation',
496+
tableOption: 'enableKeyboardShortcuts',
497497
defaultValue: 'true',
498498
description: '',
499499
link: '',

‎apps/material-react-table-docs/examples/minimal/sandbox/src/TS.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const Example = () => {
3838
const table = useMaterialReactTable({
3939
columns,
4040
data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
41-
enableCellNavigation: false,
41+
enableKeyboardShortcuts: false,
4242
enableColumnActions: false,
4343
enableColumnFilters: false,
4444
enablePagination: false,

‎apps/material-react-table-docs/pages/_app.tsx

+4-58
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,16 @@
11
import '../styles/globals.css';
2-
import { useState } from 'react';
32
import { type AppProps } from 'next/app';
43
import Head from 'next/head';
54
import PlausibleProvider from 'next-plausible';
65
import { useRouter } from 'next/router';
76
import { MDXProvider } from '@mdx-js/react';
8-
import { Box, useMediaQuery } from '@mui/material';
97
import { ThemeContextProvider } from '../styles/ThemeContext';
108
import { mdxComponents } from '../components/mdx/mdxComponents';
11-
import { TopBar } from '../components/navigation/TopBar';
12-
import { SideBar } from '../components/navigation/Sidebar';
13-
import { BreadCrumbs } from '../components/navigation/BreadCrumbs';
14-
import { MiniNav } from '../components/navigation/MiniNav';
15-
import { Footer } from '../components/navigation/Footer';
9+
import { Layout } from '../components/navigation/Layout';
1610

1711
function App({ Component, pageProps }: AppProps) {
1812
const { pathname } = useRouter();
1913

20-
const showBreadCrumbs = pathname !== '/';
21-
const showMiniNav =
22-
pathname.includes('/docs/getting-started') ||
23-
pathname.includes('/docs/api/mrt') ||
24-
pathname.includes('/docs/guides/') ||
25-
pathname.includes('/migrating') ||
26-
pathname === '/about' ||
27-
pathname === '/changelog' ||
28-
pathname === '/roadmap';
29-
30-
const isMobile = useMediaQuery('(max-width: 900px)');
31-
const isDesktop = useMediaQuery('(min-width: 1500px)');
32-
const isXLDesktop = useMediaQuery('(min-width: 1800px)');
33-
34-
const [navOpen, setNavOpen] = useState(false);
35-
3614
return (
3715
<>
3816
<Head>
@@ -71,41 +49,9 @@ function App({ Component, pageProps }: AppProps) {
7149
>
7250
<ThemeContextProvider>
7351
<MDXProvider components={mdxComponents}>
74-
<TopBar navOpen={navOpen || isDesktop} setNavOpen={setNavOpen} />
75-
<SideBar navOpen={navOpen || isDesktop} setNavOpen={setNavOpen} />
76-
<Box
77-
component="main"
78-
sx={(theme) => ({
79-
backgroundColor: theme.palette.background.default,
80-
color: theme.palette.text.primary,
81-
minHeight: '100vh',
82-
p: `64px ${showMiniNav && isXLDesktop ? '250px' : '32px'} 0 ${
83-
(navOpen || isDesktop) && !isMobile ? '320px' : '32px'
84-
}`,
85-
transition: 'all 100ms ease-in-out',
86-
})}
87-
>
88-
<Box
89-
sx={{
90-
maxWidth: '1200px',
91-
margin: 'auto',
92-
transition: 'all 100ms ease-in-out',
93-
width: '100%',
94-
}}
95-
>
96-
{showBreadCrumbs && <BreadCrumbs />}
97-
{showMiniNav && !isXLDesktop && <MiniNav />}
98-
{pathname === '/' ? (
99-
<Component {...pageProps} />
100-
) : (
101-
<article>
102-
<Component {...pageProps} />
103-
</article>
104-
)}
105-
<Footer />
106-
</Box>
107-
{showMiniNav && isXLDesktop && <MiniNav />}
108-
</Box>
52+
<Layout>
53+
<Component {...pageProps} />
54+
</Layout>
10955
</MDXProvider>
11056
</ThemeContextProvider>
11157
</PlausibleProvider>

‎apps/material-react-table-docs/pages/docs/getting-started/migrating-to-v3.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ You should now be on Material React Table V3! Look for any code or type errors i
5555

5656
- `@mui/material` and `@mui/icons-material` v6.0.0 are now minimum required versions of Material UI packages (you might be able to get away with lower MUI versions for a while, but eventually MUI V6 APIs will be used internally by MRT and your project will break)
5757
- `@mui/x-date-pickers` v7.15.0 is now a minimum required dependency
58+
- Keyboard navigation for table cells in now enabled by default. If you had added your own custom keyboard shortcuts, you may want to set `enableKeyboardShortcuts` to `false` or remove your custom shortcuts.
5859
- Removed deprecated `MRT_Virtualizer` type in favor of separate `MRT_RowVirtualizer` and `MRT_ColumnVirtualizer` types
5960
- Removed deprecated `text` in favor of the more consistent `label` type in dropdown/autocomplete/select option types.
6061
- Deprecated several `mui*Props` table options that were column-specific. These table options should either be specified in column defs or in the `defaultColumn` table option.

0 commit comments

Comments
 (0)