From 5fea5b4c69a27cd8e02744ecbadac0b7d5030461 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Thu, 8 Sep 2022 13:33:04 +0100
Subject: [PATCH] fix (#968)

---
 package.json                                              | 8 +++-----
 packages/tldraw/src/components/ToolsPanel/HelpPanel.tsx   | 2 +-
 .../src/components/ToolsPanel/keyboardShortcutDialog.tsx  | 3 +++
 .../src/components/TopPanel/LanguageMenu/LanguageMenu.tsx | 2 +-
 .../TopPanel/PreferencesMenu/PreferencesMenu.tsx          | 4 ++--
 packages/tldraw/src/hooks/useTldrawApp.tsx                | 6 ++++++
 6 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 7e78c89a1..8e3f9a1bb 100644
--- a/package.json
+++ b/package.json
@@ -63,14 +63,12 @@
     "tslib": "^2.4.0",
     "turbo": "^1.3.4",
     "typescript": "^4.7.3",
-    "webpack": "^5.68.0"
+    "webpack": "^5.68.0",
+    "@changesets/cli": "^2.20.0"
   },
   "lint-staged": {
     "*": "prettier --ignore-unknown --write",
     "*.{ts,tsx}": "eslint --fix"
   },
-  "packageManager": "yarn@1.22.17",
-  "dependencies": {
-    "@changesets/cli": "^2.20.0"
-  }
+  "packageManager": "yarn@1.22.17"
 }
diff --git a/packages/tldraw/src/components/ToolsPanel/HelpPanel.tsx b/packages/tldraw/src/components/ToolsPanel/HelpPanel.tsx
index eab1592ac..acdd70e25 100644
--- a/packages/tldraw/src/components/ToolsPanel/HelpPanel.tsx
+++ b/packages/tldraw/src/components/ToolsPanel/HelpPanel.tsx
@@ -18,7 +18,7 @@ import { breakpoints } from '~components/breakpoints'
 import { useTldrawApp } from '~hooks'
 import { styled } from '~styles'
 import { TDSnapshot } from '~types'
-import { KeyboardShortcutDialog } from './keyboardShortcutDialog'
+import { KeyboardShortcutDialog } from './KeyboardShortcutDialog'
 
 const isDebugModeSelector = (s: TDSnapshot) => s.settings.isDebugMode
 const dockPositionState = (s: TDSnapshot) => s.settings.dockPosition
diff --git a/packages/tldraw/src/components/ToolsPanel/keyboardShortcutDialog.tsx b/packages/tldraw/src/components/ToolsPanel/keyboardShortcutDialog.tsx
index 1b8bd64f6..54f17b719 100644
--- a/packages/tldraw/src/components/ToolsPanel/keyboardShortcutDialog.tsx
+++ b/packages/tldraw/src/components/ToolsPanel/keyboardShortcutDialog.tsx
@@ -173,6 +173,8 @@ const DialogContent = styled(Dialog.Content, {
   maxHeight: '74vh',
   overflowY: 'auto',
   padding: 25,
+  zIndex: 9999,
+  pointerEvents: 'all',
   background: '$panel',
   '&:focus': { outline: 'none' },
 })
@@ -211,6 +213,7 @@ const DialogOverlay = styled(Dialog.Overlay, {
   backgroundColor: '$overlay',
   position: 'fixed',
   inset: 0,
+  zIndex: 9998,
 })
 
 const DialogIconButton = styled(IconButton, {
diff --git a/packages/tldraw/src/components/TopPanel/LanguageMenu/LanguageMenu.tsx b/packages/tldraw/src/components/TopPanel/LanguageMenu/LanguageMenu.tsx
index f3bafa7a5..1f803795a 100644
--- a/packages/tldraw/src/components/TopPanel/LanguageMenu/LanguageMenu.tsx
+++ b/packages/tldraw/src/components/TopPanel/LanguageMenu/LanguageMenu.tsx
@@ -22,7 +22,7 @@ export const LanguageMenu = () => {
   )
 
   return (
-    <DMContent variant="menu" overflow={true} id="language-menu" side="left" sideOffset={8}>
+    <DMContent variant="menu" overflow id="language-menu" side="left" sideOffset={8}>
       {TRANSLATIONS.map(({ locale, label }) => (
         <DMCheckboxItem
           key={locale}
diff --git a/packages/tldraw/src/components/TopPanel/PreferencesMenu/PreferencesMenu.tsx b/packages/tldraw/src/components/TopPanel/PreferencesMenu/PreferencesMenu.tsx
index e82ec7744..965b5e53a 100644
--- a/packages/tldraw/src/components/TopPanel/PreferencesMenu/PreferencesMenu.tsx
+++ b/packages/tldraw/src/components/TopPanel/PreferencesMenu/PreferencesMenu.tsx
@@ -102,7 +102,7 @@ export function PreferencesMenu() {
       >
         <FormattedMessage id="preferences.keep.stylemenu.open" />
       </DMCheckboxItem>
-      <DMSubMenu label={intl.formatMessage({ id: 'dock.position' })} overflow={false}>
+      <DMSubMenu label={intl.formatMessage({ id: 'dock.position' })}>
         {DockPosition.map((position) => (
           <DMCheckboxItem
             key={position}
@@ -116,7 +116,7 @@ export function PreferencesMenu() {
           </DMCheckboxItem>
         ))}
       </DMSubMenu>
-      <DMSubMenu label={intl.formatMessage({ id: 'export.background' })} overflow={false}>
+      <DMSubMenu label={intl.formatMessage({ id: 'export.background' })}>
         {Object.values(TDExportBackground).map((exportBackground) => (
           <DMCheckboxItem
             key={exportBackground}
diff --git a/packages/tldraw/src/hooks/useTldrawApp.tsx b/packages/tldraw/src/hooks/useTldrawApp.tsx
index a72dea1e8..fdcb02079 100644
--- a/packages/tldraw/src/hooks/useTldrawApp.tsx
+++ b/packages/tldraw/src/hooks/useTldrawApp.tsx
@@ -3,6 +3,11 @@ import type { TldrawApp } from '~state'
 
 export const TldrawContext = React.createContext<TldrawApp>({} as TldrawApp)
 
+const useForceUpdate = () => {
+  const [_state, setState] = React.useState(0)
+  React.useEffect(() => setState(1))
+}
+
 export function useTldrawApp() {
   const context = React.useContext(TldrawContext)
   return context
@@ -12,5 +17,6 @@ export const ContainerContext = React.createContext({} as React.RefObject<HTMLDi
 
 export function useContainer() {
   const context = React.useContext(ContainerContext)
+  useForceUpdate()
   return context
 }