From 6af50e44671b381daac67e590d18d3a58319d7bf Mon Sep 17 00:00:00 2001 From: Gil Obradors Date: Sun, 8 Dec 2024 19:40:24 +0100 Subject: [PATCH 1/3] fix: hasDrawerTransition's logics disable the CSS transitions only for the temporary sidebar that shows on mobile devices, but also not needed when CollapsibleSidebar is disabled. Signed-off-by: Gil Obradors --- packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx index da545108989..96513a533cb 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx @@ -240,8 +240,7 @@ function DashboardLayout(props: DashboardLayoutProps) { [toggleNavigationExpanded], ); - const hasDrawerTransitions = - isOverSmViewport && (disableCollapsibleSidebar || !isUnderMdViewport); + const hasDrawerTransitions = isOverSmViewport && !disableCollapsibleSidebar; const ToolbarActionsSlot = slots?.toolbarActions ?? ToolbarActions; const ToolbarAccountSlot = slots?.toolbarAccount ?? Account; From 36308daf4c9d7d03c6905f8d29409fe29d569b49 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Tue, 24 Dec 2024 17:06:07 +0000 Subject: [PATCH 2/3] there --- .../src/DashboardLayout/DashboardLayout.tsx | 24 +++++++++--------- pnpm-lock.yaml | 25 +++++++++++++++---- 2 files changed, 32 insertions(+), 17 deletions(-) diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx index 96513a533cb..8c77d13569a 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx @@ -143,32 +143,32 @@ function DashboardLayout(props: DashboardLayoutProps) { React.useState(!defaultSidebarCollapsed); const [isMobileNavigationExpanded, setIsMobileNavigationExpanded] = React.useState(false); - const isUnderMdViewport = useMediaQuery( - theme.breakpoints.down('md'), + const isOverSmViewport = useMediaQuery( + theme.breakpoints.up('sm'), appWindowContext && { matchMedia: appWindowContext.matchMedia, }, ); - const isOverSmViewport = useMediaQuery( - theme.breakpoints.up('sm'), + const isOverMdViewport = useMediaQuery( + theme.breakpoints.up('md'), appWindowContext && { matchMedia: appWindowContext.matchMedia, }, ); - const isNavigationExpanded = isUnderMdViewport - ? isMobileNavigationExpanded - : isDesktopNavigationExpanded; + const isNavigationExpanded = isOverMdViewport + ? isDesktopNavigationExpanded + : isMobileNavigationExpanded; const setIsNavigationExpanded = React.useCallback( (newExpanded: boolean) => { - if (isUnderMdViewport) { - setIsMobileNavigationExpanded(newExpanded); - } else { + if (isOverMdViewport) { setIsDesktopNavigationExpanded(newExpanded); + } else { + setIsMobileNavigationExpanded(newExpanded); } }, - [isUnderMdViewport], + [isOverMdViewport], ); const [isNavigationFullyExpanded, setIsNavigationFullyExpanded] = @@ -240,7 +240,7 @@ function DashboardLayout(props: DashboardLayoutProps) { [toggleNavigationExpanded], ); - const hasDrawerTransitions = isOverSmViewport && !disableCollapsibleSidebar; + const hasDrawerTransitions = isOverSmViewport && (!disableCollapsibleSidebar || isOverMdViewport); const ToolbarActionsSlot = slots?.toolbarActions ?? ToolbarActions; const ToolbarAccountSlot = slots?.toolbarAccount ?? Account; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c91e1271ffc..6a1414c89f6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -195,7 +195,7 @@ importers: version: 7.37.2(eslint@8.57.1) eslint-plugin-react-compiler: specifier: latest - version: 19.0.0-beta-df7b47d-20241124(eslint@8.57.1) + version: 19.0.0-beta-b2e8e9c-20241220(eslint@8.57.1) eslint-plugin-react-hooks: specifier: 5.0.0 version: 5.0.0(eslint@8.57.1) @@ -1632,6 +1632,13 @@ packages: peerDependencies: '@babel/core': ^7.0.0 + '@babel/plugin-proposal-private-methods@7.18.6': + resolution: {integrity: sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==} + engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead. + peerDependencies: + '@babel/core': ^7.0.0-0 + '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2': resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==} engines: {node: '>=6.9.0'} @@ -6057,8 +6064,8 @@ packages: peerDependencies: eslint: '>=7.0.0' - eslint-plugin-react-compiler@19.0.0-beta-df7b47d-20241124: - resolution: {integrity: sha512-82PfnllC8jP/68KdLAbpWuYTcfmtGLzkqy2IW85WopKMTr+4rdQpp+lfliQ/QE79wWrv/dRoADrk3Pdhq25nTw==} + eslint-plugin-react-compiler@19.0.0-beta-b2e8e9c-20241220: + resolution: {integrity: sha512-STVaOQyivSBv0un6/ujYOPntKcCaD0qXIG8siBEs9QcWmQ7q3J3ozuAE86SlSc7ElIZgPoL9HoSN3EONS47nqQ==} engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0} peerDependencies: eslint: '>=7' @@ -10913,6 +10920,14 @@ snapshots: transitivePeerDependencies: - supports-color + '@babel/plugin-proposal-private-methods@7.18.6(@babel/core@7.26.0)': + dependencies: + '@babel/core': 7.26.0 + '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.0) + '@babel/helper-plugin-utils': 7.25.9 + transitivePeerDependencies: + - supports-color + '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.26.0)': dependencies: '@babel/core': 7.26.0 @@ -15900,11 +15915,11 @@ snapshots: globals: 13.24.0 rambda: 7.5.0 - eslint-plugin-react-compiler@19.0.0-beta-df7b47d-20241124(eslint@8.57.1): + eslint-plugin-react-compiler@19.0.0-beta-b2e8e9c-20241220(eslint@8.57.1): dependencies: '@babel/core': 7.26.0 '@babel/parser': 7.26.2 - '@babel/plugin-transform-private-methods': 7.25.9(@babel/core@7.26.0) + '@babel/plugin-proposal-private-methods': 7.18.6(@babel/core@7.26.0) eslint: 8.57.1 hermes-parser: 0.25.1 zod: 3.23.8 From e6d7250a0ec3ebd3fbb439af87b0ed4b4325b495 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Tue, 24 Dec 2024 17:50:25 +0000 Subject: [PATCH 3/3] Fix tests --- package.json | 1 + .../DashboardLayout/DashboardLayout.test.tsx | 2 +- pnpm-lock.yaml | 8 ++++++ test/setupVitest.ts | 27 ++++++++++++------- 4 files changed, 27 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index b6d4dd03ed9..dcc79114c93 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "babel-plugin-transform-react-remove-prop-types": "0.4.24", "chalk": "5.3.0", "concurrently": "9.1.0", + "css-mediaquery": "^0.1.2", "eslint": "8.57.1", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "18.0.0", diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx index 8881519cc84..dde3582feed 100644 --- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx +++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx @@ -322,7 +322,7 @@ describe('DashboardLayout', () => { action:
Action 1
, }, { - title: 'Item', + title: 'Item 2', segment: 'item2', icon: , action:
Action 2
, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 392fe07bfa2..7b50e36286a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -160,6 +160,9 @@ importers: concurrently: specifier: 9.1.0 version: 9.1.0 + css-mediaquery: + specifier: ^0.1.2 + version: 0.1.2 eslint: specifier: 8.57.1 version: 8.57.1 @@ -5485,6 +5488,9 @@ packages: resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==} engines: {node: '>=4'} + css-mediaquery@0.1.2: + resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==} + css-to-react-native@3.2.0: resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==} @@ -15219,6 +15225,8 @@ snapshots: css-color-keywords@1.0.0: {} + css-mediaquery@0.1.2: {} + css-to-react-native@3.2.0: dependencies: camelize: 1.0.1 diff --git a/test/setupVitest.ts b/test/setupVitest.ts index b5cb10f1dbb..a87edcb99a0 100644 --- a/test/setupVitest.ts +++ b/test/setupVitest.ts @@ -1,6 +1,7 @@ import { afterEach, vi } from 'vitest'; import failOnConsole from 'vitest-fail-on-console'; import { cleanup } from '@testing-library/react'; +import mediaQuery from 'css-mediaquery'; failOnConsole({ silenceMessage: (errorMessage) => { @@ -16,18 +17,24 @@ afterEach(cleanup); // Mocks +function createMatchMedia(width: number) { + return (query: string) => ({ + matches: mediaQuery.match(query, { + width, + }), + media: query, + onchange: null, + addListener: vi.fn(), // deprecated + removeListener: vi.fn(), // deprecated + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + dispatchEvent: vi.fn(), + }); +} + if (typeof window !== 'undefined' && !window.matchMedia) { Object.defineProperty(window, 'matchMedia', { writable: true, - value: vi.fn().mockImplementation((query) => ({ - matches: false, - media: query, - onchange: null, - addListener: vi.fn(), // deprecated - removeListener: vi.fn(), // deprecated - addEventListener: vi.fn(), - removeEventListener: vi.fn(), - dispatchEvent: vi.fn(), - })), + value: createMatchMedia(window.innerWidth), }); }