bumps stitches to 1.0.0, allows move events to propagate correctly

packages/core/package.json

@@ -48,6 +48,11 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@radix-ui/react-primitive": "^0.0.15",
+    "@typescript-eslint/eslint-plugin": "^4.19.0",
+    "@typescript-eslint/parser": "^4.19.0",
     "deepmerge": "^4.2.2",
     "ismobilejs": "^1.1.1",
     "react-use-gesture": "^9.1.3"

packages/core/src/hooks/useBoundsEvents.tsx

@@ -41,8 +41,6 @@ export function useBoundsEvents() {
 
   const onPointerMove = React.useCallback(
     (e: React.PointerEvent) => {
-      e.stopPropagation()
-
       if (inputs.pointer && e.pointerId !== inputs.pointer.pointerId) return
 
       if (e.currentTarget.hasPointerCapture(e.pointerId)) {

packages/core/src/hooks/useBoundsHandleEvents.tsx

@@ -42,7 +42,6 @@ export function useBoundsHandleEvents(id: TLBoundsCorner | TLBoundsEdge | 'rotat
 
   const onPointerMove = React.useCallback(
     (e: React.PointerEvent) => {
-      e.stopPropagation()
       if (e.currentTarget.hasPointerCapture(e.pointerId)) {
         callbacks.onDragBoundsHandle?.(inputs.pointerMove(e, id), e)
       }

packages/core/src/hooks/useCanvasEvents.tsx

@@ -21,7 +21,6 @@ export function useCanvasEvents() {
 
   const onPointerMove = React.useCallback(
     (e: React.PointerEvent) => {
-      e.stopPropagation()
       if (e.currentTarget.hasPointerCapture(e.pointerId)) {
         const info = inputs.pointerMove(e, 'canvas')
         callbacks.onDragCanvas?.(info, e)

packages/core/src/hooks/useHandleEvents.tsx

@@ -41,7 +41,6 @@ export function useHandleEvents(id: string) {
 
   const onPointerMove = React.useCallback(
     (e: React.PointerEvent) => {
-      e.stopPropagation()
       if (e.currentTarget.hasPointerCapture(e.pointerId)) {
         const info = inputs.pointerMove(e, id)
         callbacks.onDragHandle?.(info, e)

packages/core/src/hooks/useShapeEvents.tsx

@@ -66,7 +66,6 @@ export function useShapeEvents(id: string, disable = false) {
   const onPointerMove = React.useCallback(
     (e: React.PointerEvent) => {
       if (disable) return
-      e.stopPropagation()
 
       if (inputs.pointer && e.pointerId !== inputs.pointer.pointerId) return
 

packages/tldraw/package.json

@@ -50,14 +50,14 @@
   },
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^0.0.20",
-    "@radix-ui/react-checkbox": "^0.0.16",
-    "@radix-ui/react-context-menu": "^0.0.23",
-    "@radix-ui/react-dropdown-menu": "^0.0.22",
+    "@radix-ui/react-checkbox": "^0.0.17",
+    "@radix-ui/react-context-menu": "^0.0.24",
+    "@radix-ui/react-dropdown-menu": "^0.0.23",
     "@radix-ui/react-icons": "^1.0.3",
     "@radix-ui/react-id": "^0.0.6",
-    "@radix-ui/react-radio-group": "^0.0.18",
-    "@radix-ui/react-tooltip": "^0.0.20",
-    "@stitches/react": "^0.2.3",
+    "@radix-ui/react-radio-group": "^0.0.19",
+    "@radix-ui/react-tooltip": "^0.0.21",
+    "@stitches/react": "^1.0.0",
     "@tldraw/core": "^0.0.57",
     "ismobilejs": "^1.1.1",
     "perfect-freehand": "^0.5.3",

packages/tldraw/src/styles/stitches.config.ts

@@ -1,6 +1,6 @@
-import { createCss, defaultThemeMap } from '@stitches/react'
+import { createStitches, defaultThemeMap } from '@stitches/react'
 
-const { styled, css, theme, getCssString } = createCss({
+const { styled, css, createTheme, getCssText } = createStitches({
   themeMap: {
     ...defaultThemeMap,
   },
@@ -99,7 +99,7 @@ const { styled, css, theme, getCssString } = createCss({
   },
 })
 
-const dark = theme({
+const dark = createTheme({
   colors: {
     brushFill: 'rgba(180, 180, 180, .05)',
     brushStroke: 'rgba(180, 180, 180, .25)',
@@ -136,4 +136,4 @@ const dark = theme({
 
 export default styled
 
-export { css, getCssString, dark }
+export { css, getCssText, dark }