From 8d36f1c5db9186f507d996c4bea7a40b85dd1567 Mon Sep 17 00:00:00 2001
From: Eugene Chybisov <imchybisov@gmail.com>
Date: Fri, 15 Jul 2022 19:36:54 +0100
Subject: [PATCH] fix: propagate width props to drawer mode

---
 packages/widget/src/AppDrawer.style.tsx | 36 ++++++++++++++++++++++---
 packages/widget/src/AppDrawer.tsx       |  8 ++++++
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/packages/widget/src/AppDrawer.style.tsx b/packages/widget/src/AppDrawer.style.tsx
index 5fcd45f36..4bd54ee5c 100644
--- a/packages/widget/src/AppDrawer.style.tsx
+++ b/packages/widget/src/AppDrawer.style.tsx
@@ -1,9 +1,35 @@
 import { Button, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
+const getButtonTransformWidth = (
+  drawerWidth?: number | string,
+  drawerMaxWidth?: number | string,
+) => {
+  if (typeof drawerWidth === 'number') {
+    return `${drawerWidth}px`;
+  }
+  if (typeof drawerWidth === 'string' && !drawerWidth.includes('%')) {
+    return drawerWidth;
+  }
+  if (typeof drawerMaxWidth === 'number') {
+    return `${drawerMaxWidth}px`;
+  }
+  if (typeof drawerMaxWidth === 'string' && !drawerMaxWidth.includes('%')) {
+    return drawerMaxWidth;
+  }
+  return '392px';
+};
+
 export const DrawerButton = styled(Button, {
-  shouldForwardProp: (prop) => prop !== 'open',
-})<{ open?: boolean }>(({ theme, open }) => ({
+  shouldForwardProp: (prop) =>
+    !['open', 'drawerProps'].includes(prop as string),
+})<{
+  open?: boolean;
+  drawerProps?: {
+    width?: number | string;
+    maxWidth?: number | string;
+  };
+}>(({ theme, open, drawerProps }) => ({
   background:
     theme.palette.mode === 'light'
       ? theme.palette.common.black
@@ -23,7 +49,11 @@ export const DrawerButton = styled(Button, {
   position: 'absolute',
   right: 0,
   top: 'calc(50% - 74px)',
-  transform: `translate3d(calc(${open ? '392px' : '0px'} * -1), 0, 0)`,
+  transform: `translate3d(calc(${
+    open
+      ? getButtonTransformWidth(drawerProps?.width, drawerProps?.maxWidth)
+      : '0px'
+  } * -1), 0, 0)`,
   transition: theme.transitions.create(['transform'], {
     duration: theme.transitions.duration.enteringScreen,
     easing: theme.transitions.easing.easeOut,
diff --git a/packages/widget/src/AppDrawer.tsx b/packages/widget/src/AppDrawer.tsx
index a9570a09c..7c7098933 100644
--- a/packages/widget/src/AppDrawer.tsx
+++ b/packages/widget/src/AppDrawer.tsx
@@ -64,6 +64,7 @@ export const AppDrawer = forwardRef<AppDrawerBase, AppDrawerProps>(
           variant="contained"
           onClick={toggleDrawer}
           open={drawerOpen}
+          drawerProps={config?.containerStyle}
           disableElevation
         >
           {drawerOpen ? <KeyboardArrowRightIcon /> : <KeyboardArrowLeftIcon />}
@@ -82,6 +83,13 @@ export const AppDrawer = forwardRef<AppDrawerBase, AppDrawerProps>(
               backdropFilter: 'blur(3px)',
             },
           }}
+          PaperProps={{
+            sx: {
+              width: config?.containerStyle?.width ?? '100%',
+              minWidth: config?.containerStyle?.minWidth ?? 375,
+              maxWidth: config?.containerStyle?.maxWidth ?? 392,
+            },
+          }}
           keepMounted
         >
           <AppDefault />