Use our Backdrop

.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

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",

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>)
+      }
       BackdropProps={{ invisible: transparentBackdrop }}
       disablePortal={disablePortal}
       container={container}

packages/base/Drawer/tsconfig.json

@@ -4,6 +4,7 @@
   "include": ["src"],
   "references": [
     { "path": "../../picasso-provider" },
+    { "path": "../Backdrop" },
     { "path": "../Button" },
     { "path": "../Container" },
     { "path": "../Icons" },