({
side={isMobile ? "right" : "bottom"}
align="start"
sideOffset={isMobile ? 8 : 12}
- style={{ zIndex: "var(--zIndex-popup)" }}
+ style={{ zIndex: "var(--zIndex-ui-styles-popup)" }}
onKeyDown={handleKeyDown}
>
setIsOtherShapesMenuOpen(!isOtherShapesMenuOpen)}
+ onToggle={() => {
+ setIsOtherShapesMenuOpen(!isOtherShapesMenuOpen);
+ setAppState({ openMenu: null, openPopup: null });
+ }}
title={t("toolBar.extraTools")}
style={{
width: WIDTH,
diff --git a/packages/excalidraw/components/PropertiesPopover.tsx b/packages/excalidraw/components/PropertiesPopover.tsx
index 2970258a58..c59b031a44 100644
--- a/packages/excalidraw/components/PropertiesPopover.tsx
+++ b/packages/excalidraw/components/PropertiesPopover.tsx
@@ -62,7 +62,9 @@ export const PropertiesPopover = React.forwardRef<
alignOffset={-16}
sideOffset={20}
style={{
- zIndex: "var(--zIndex-popup)",
+ zIndex: "var(--zIndex-ui-styles-popup)",
+ marginLeft:
+ editorInterface.formFactor === "phone" ? "0.5rem" : undefined,
}}
onPointerLeave={onPointerLeave}
onKeyDown={onKeyDown}
diff --git a/packages/excalidraw/components/Sidebar/Sidebar.scss b/packages/excalidraw/components/Sidebar/Sidebar.scss
index c7776d1c69..2fba020ca9 100644
--- a/packages/excalidraw/components/Sidebar/Sidebar.scss
+++ b/packages/excalidraw/components/Sidebar/Sidebar.scss
@@ -9,7 +9,7 @@
top: 0;
bottom: 0;
right: 0;
- z-index: 5;
+ z-index: var(--zIndex-ui-library);
margin: 0;
padding: 0;
box-sizing: border-box;
diff --git a/packages/excalidraw/components/Sidebar/SidebarTrigger.tsx b/packages/excalidraw/components/Sidebar/SidebarTrigger.tsx
index 6e8bf374ce..706a6abe52 100644
--- a/packages/excalidraw/components/Sidebar/SidebarTrigger.tsx
+++ b/packages/excalidraw/components/Sidebar/SidebarTrigger.tsx
@@ -30,7 +30,11 @@ export const SidebarTrigger = ({
.querySelector(".layer-ui__wrapper")
?.classList.remove("animate");
const isOpen = event.target.checked;
- setAppState({ openSidebar: isOpen ? { name, tab } : null });
+ setAppState({
+ openSidebar: isOpen ? { name, tab } : null,
+ openMenu: null,
+ openPopup: null,
+ });
onToggle?.(isOpen);
}}
checked={appState.openSidebar?.name === name}
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss b/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss
index a0a230941d..f6c7d7dc24 100644
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss
@@ -5,6 +5,7 @@
position: absolute;
top: 2.5rem;
margin-top: 0.5rem;
+ max-width: 16rem;
&--placement-top {
top: auto;
@@ -20,10 +21,8 @@
// When main menu is in the top toolbar, position relative to trigger
&.main-menu-dropdown {
min-width: 232px;
- max-width: calc(100vw - var(--editor-container-padding) * 2);
margin-top: 0;
margin-bottom: 0;
- z-index: var(--zIndex-layerUI);
@media screen and (orientation: landscape) {
max-width: 232px;
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuSeparator.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuSeparator.tsx
index ee41960735..1c6d19521d 100644
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenuSeparator.tsx
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuSeparator.tsx
@@ -6,6 +6,7 @@ const MenuSeparator = () => (
height: "1px",
backgroundColor: "var(--default-border-color)",
margin: ".5rem 0",
+ flex: "0 0 auto",
}}
/>
);
diff --git a/packages/excalidraw/components/main-menu/MainMenu.tsx b/packages/excalidraw/components/main-menu/MainMenu.tsx
index 7249ab94df..d028231328 100644
--- a/packages/excalidraw/components/main-menu/MainMenu.tsx
+++ b/packages/excalidraw/components/main-menu/MainMenu.tsx
@@ -30,10 +30,6 @@ const MainMenu = Object.assign(
const editorInterface = useEditorInterface();
const appState = useUIAppState();
const setAppState = useExcalidrawSetAppState();
- const onClickOutside =
- editorInterface.formFactor === "phone"
- ? undefined
- : () => setAppState({ openMenu: null });
return (
@@ -42,6 +38,8 @@ const MainMenu = Object.assign(
onToggle={() => {
setAppState({
openMenu: appState.openMenu === "canvas" ? null : "canvas",
+ openPopup: null,
+ openDialog: null,
});
}}
data-testid="main-menu-trigger"
@@ -50,7 +48,7 @@ const MainMenu = Object.assign(
{HamburgerMenuIcon}
setAppState({ openMenu: null })}
onSelect={composeEventHandlers(onSelect, () => {
setAppState({ openMenu: null });
})}
diff --git a/packages/excalidraw/css/styles.scss b/packages/excalidraw/css/styles.scss
index 679a5c4cd1..72890f206d 100644
--- a/packages/excalidraw/css/styles.scss
+++ b/packages/excalidraw/css/styles.scss
@@ -12,6 +12,11 @@
--zIndex-eyeDropperPreview: 6;
--zIndex-hyperlinkContainer: 7;
+ --zIndex-ui-styles-popup: 40;
+ --zIndex-ui-bottom: 60;
+ --zIndex-ui-library: 80;
+ --zIndex-ui-top: 100;
+
--zIndex-modal: 1000;
--zIndex-popup: 1001;
--zIndex-toast: 999999;
@@ -237,7 +242,7 @@ body.excalidraw-cursor-resize * {
}
.App-top-bar {
- z-index: var(--zIndex-layerUI);
+ z-index: var(--zIndex-ui-top);
display: flex;
flex-direction: column;
}
@@ -255,7 +260,7 @@ body.excalidraw-cursor-resize * {
left: 50%;
transform: translateX(-50%);
--bar-padding: calc(4 * var(--space-factor));
- z-index: var(--zIndex-layerUI);
+ z-index: var(--zIndex-ui-bottom);
display: flex;
flex-direction: column;
@@ -296,6 +301,12 @@ body.excalidraw-cursor-resize * {
.App-toolbar-content {
display: flex;
flex-direction: column;
+
+ pointer-events: none;
+
+ & > * {
+ pointer-events: var(--ui-pointerEvents);
+ }
}
.App-mobile-menu {
diff --git a/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap
index f1a65130ea..d1a1ef77e0 100644
--- a/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap
@@ -414,7 +414,7 @@ exports[` > Test UIOptions prop > Test canvasActions > should rende
> Test UIOptions prop > Test canvasActions > should rende