fix (#968)

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

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

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

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}

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}

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
 }