diff --git a/.changeset/calm-trainers-taste.md b/.changeset/calm-trainers-taste.md new file mode 100644 index 0000000000..9c73bf4886 --- /dev/null +++ b/.changeset/calm-trainers-taste.md @@ -0,0 +1,5 @@ +--- +'@toptal/picasso-drawer': patch +--- + +- use Picasso Backdrop to remove `React does not recognize the `transitionDuration` prop on a DOM element` error diff --git a/packages/base/Drawer/package.json b/packages/base/Drawer/package.json index caee5f9f81..f80768970f 100644 --- a/packages/base/Drawer/package.json +++ b/packages/base/Drawer/package.json @@ -22,6 +22,7 @@ }, "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme", "dependencies": { + "@toptal/picasso-backdrop": "1.0.4", "@toptal/picasso-button": "2.1.0", "@toptal/picasso-container": "1.0.3", "@toptal/picasso-icons": "1.4.0", diff --git a/packages/base/Drawer/src/Drawer/Drawer.tsx b/packages/base/Drawer/src/Drawer/Drawer.tsx index 4c395b9f47..8caa5eb3d8 100644 --- a/packages/base/Drawer/src/Drawer/Drawer.tsx +++ b/packages/base/Drawer/src/Drawer/Drawer.tsx @@ -1,4 +1,5 @@ import { Drawer as MUIDrawer } from '@material-ui/core' +import type { BackdropProps } from '@material-ui/core' import type { Theme } from '@material-ui/core/styles' import { makeStyles, useTheme } from '@material-ui/core/styles' import cx from 'classnames' @@ -8,6 +9,7 @@ import type { ReactNode } from 'react' import React from 'react' import { CloseMinor16 } from '@toptal/picasso-icons' import { ButtonCircular } from '@toptal/picasso-button' +import { Backdrop } from '@toptal/picasso-backdrop' import { Container } from '@toptal/picasso-container' import { useIsomorphicLayoutEffect, @@ -90,7 +92,11 @@ export const Drawer = (props: Props) => { {...rest} open={open} onClose={handleOnClose} - BackdropComponent={disableBackdrop ? () => null : undefined} + BackdropComponent={ + disableBackdrop + ? () => null + : (Backdrop as React.ElementType) + } BackdropProps={{ invisible: transparentBackdrop }} disablePortal={disablePortal} container={container} diff --git a/packages/base/Drawer/tsconfig.json b/packages/base/Drawer/tsconfig.json index ee8a5fa774..275d70c6c0 100644 --- a/packages/base/Drawer/tsconfig.json +++ b/packages/base/Drawer/tsconfig.json @@ -4,6 +4,7 @@ "include": ["src"], "references": [ { "path": "../../picasso-provider" }, + { "path": "../Backdrop" }, { "path": "../Button" }, { "path": "../Container" }, { "path": "../Icons" },