fix: make drawer mode click-through without overlay

Author: dmitryplyaskin

web/src/index.css

@@ -554,6 +554,12 @@ a {
   padding: 0;
 }
 
+.ts-sidebar-modal-content--drawer,
+.ts-sidebar-modal-body--drawer,
+.ts-sidebar-frame--drawer {
+  pointer-events: none;
+}
+
 .ts-sidebar-frame {
   height: 100%;
   background: var(--ts-overlay);
@@ -567,6 +573,7 @@ a {
 .ts-sidebar-frame--drawer {
   display: flex;
   padding: 0;
+  background: transparent;
 }
 
 .ts-sidebar-frame--start {
@@ -597,6 +604,7 @@ a {
   min-height: 0;
   border-radius: 0;
   padding: 16px;
+  pointer-events: auto;
 }
 
 .ts-md {

web/src/ui/drawer-presentation.test.ts

@@ -15,6 +15,9 @@ describe('drawer-presentation', () => {
 			frameClassName: 'ts-sidebar-frame ts-sidebar-frame--drawer ts-sidebar-frame--start',
 			containerClassName: 'ts-sidebar-container ts-sidebar-container--drawer',
 			containerStyle: { width: 560 },
+			modalContentClassName: 'ts-sidebar-modal-content ts-sidebar-modal-content--drawer',
+			modalBodyClassName: 'ts-sidebar-modal-body ts-sidebar-modal-body--drawer',
+			withOverlay: false,
 		});
 	});
 
@@ -30,6 +33,9 @@ describe('drawer-presentation', () => {
 			frameClassName: 'ts-sidebar-frame ts-sidebar-frame--fullscreen',
 			containerClassName: 'ts-sidebar-container ts-sidebar-container--fullscreen',
 			containerStyle: { maxWidth: 1440 },
+			modalContentClassName: 'ts-sidebar-modal-content ts-sidebar-modal-content--fullscreen',
+			modalBodyClassName: 'ts-sidebar-modal-body ts-sidebar-modal-body--fullscreen',
+			withOverlay: true,
 		});
 	});
 
@@ -38,6 +44,9 @@ describe('drawer-presentation', () => {
 			frameClassName: 'ts-sidebar-frame ts-sidebar-frame--fullscreen',
 			containerClassName: 'ts-sidebar-container ts-sidebar-container--fullscreen',
 			containerStyle: { maxWidth: 1320 },
+			modalContentClassName: 'ts-sidebar-modal-content ts-sidebar-modal-content--fullscreen',
+			modalBodyClassName: 'ts-sidebar-modal-body ts-sidebar-modal-body--fullscreen',
+			withOverlay: true,
 		});
 	});
 });

web/src/ui/drawer-presentation.ts

@@ -9,13 +9,19 @@ type DrawerPresentation = {
 	frameClassName: string;
 	containerClassName: string;
 	containerStyle: Record<string, number | string>;
+	modalContentClassName: string;
+	modalBodyClassName: string;
+	withOverlay: boolean;
 };
 
 export function getFullscreenSidebarPresentation(fullscreenContentMaxWidth: number): DrawerPresentation {
 	return {
 		frameClassName: 'ts-sidebar-frame ts-sidebar-frame--fullscreen',
 		containerClassName: 'ts-sidebar-container ts-sidebar-container--fullscreen',
 		containerStyle: { maxWidth: fullscreenContentMaxWidth },
+		modalContentClassName: 'ts-sidebar-modal-content ts-sidebar-modal-content--fullscreen',
+		modalBodyClassName: 'ts-sidebar-modal-body ts-sidebar-modal-body--fullscreen',
+		withOverlay: true,
 	};
 }
 
@@ -33,5 +39,8 @@ export function getDrawerPresentation({
 		frameClassName: `ts-sidebar-frame ts-sidebar-frame--drawer ts-sidebar-frame--${placement}`,
 		containerClassName: 'ts-sidebar-container ts-sidebar-container--drawer',
 		containerStyle: { width: drawerWidth },
+		modalContentClassName: 'ts-sidebar-modal-content ts-sidebar-modal-content--drawer',
+		modalBodyClassName: 'ts-sidebar-modal-body ts-sidebar-modal-body--drawer',
+		withOverlay: false,
 	};
 }

web/src/ui/drawer.tsx

@@ -29,7 +29,14 @@ const drawerWidthBySize: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number> = {
 	xl: 640,
 };
 
-export const Drawer = ({ name, title, children, fullscreenContentMaxWidth = 1440, fixedSize, defaultSize = 'lg' }: Props) => {
+export const Drawer = ({
+	name,
+	title,
+	children,
+	fullscreenContentMaxWidth = 1440,
+	fixedSize,
+	defaultSize = 'lg',
+}: Props) => {
 	const { t } = useTranslation();
 	const sidebar = useStoreMap({
 		store: $sidebars,
@@ -92,11 +99,14 @@ export const Drawer = ({ name, title, children, fullscreenContentMaxWidth = 1440
 			withinPortal={!contained}
 			withCloseButton={false}
 			padding={0}
-			withOverlay={!contained}
+			withOverlay={!contained && presentation.withOverlay}
+			trapFocus={fullScreen}
+			lockScroll={fullScreen}
+			closeOnClickOutside={fullScreen}
 			zIndex={Z_INDEX.overlay.drawer}
 			classNames={{
-				content: 'ts-sidebar-modal-content',
-				body: 'ts-sidebar-modal-body',
+				content: presentation.modalContentClassName,
+				body: presentation.modalBodyClassName,
 			}}
 		>
 			<Box className={`${presentation.frameClassName} ts-scrollbar-thin`}>