Fix tooltip label & color contrast (#262)

* Fix tooltip label & color contrast

* adds fix for context menu

* Fix focus within

* Add inline docs

* Fix color for kbd

* Fix for submenu

* tighten up code

* Added onBlur mock function

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

README.md

@@ -12,7 +12,7 @@ This package contains the [tldraw](https://tldraw.com) editor as a React compone
 
 ## Installation
 
-Use your package manager of choice to install `@tldraw/core` and its peer dependencies.
+Use your package manager of choice to install `@tldraw/tldraw` and its peer dependencies.
 
 ```bash
 yarn add @tldraw/tldraw
@@ -154,7 +154,7 @@ const tldocument: TLDrawDocument = {
 }
 ```
 
-**Tip:** TLDraw is built [@tldraw/core](https://github.com/tldraw/core). The pages and pagestates in TLDraw are just objects containing `TLPage` and `TLPageState` objects from the core library. For more about these types, check out the [@tldraw/core](https://github.com/tldraw/core) documentation.
+**Tip:** TLDraw is built on [@tldraw/core](https://github.com/tldraw/core). The pages and pageStates in TLDraw are just objects containing `TLPage` and `TLPageState` objects from the core library. For more about these types, check out the [@tldraw/core](https://github.com/tldraw/core) documentation.
 
 **Important:** In the `pages` object, each `TLPage` object must be keyed under its `id` property. Likewise, each `TLPageState` object must be keyed under its `id`. In addition, each `TLPageState` object must have an `id` that matches its corresponding page.
 

packages/tldraw/src/TLDraw.tsx

@@ -394,10 +394,21 @@ const InnerTLDraw = React.memo(function InnerTLDraw({
     state.changePage(currentPageId)
   }, [currentPageId, state])
 
+  // When the context menu is blurred, close the menu by sending pointer events
+  // to the context menu's ref. This is a hack around the fact that certain shapes
+  // stop event propagation, which causes the menu to stay open even when blurred.
+  const handleContextMenuBlur = React.useCallback<React.FocusEventHandler>((e) => {
+    const elm = rWrapper.current
+    if (!elm) return
+    if (!elm.contains(e.relatedTarget)) return
+    elm.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    elm.dispatchEvent(new Event('pointerup', { bubbles: true }))
+  }, [])
+
   return (
     <StyledLayout ref={rWrapper} tabIndex={0} className={settings.isDarkMode ? dark : ''}>
       <OneOff focusableRef={rWrapper} autofocus={autofocus} />
-      <ContextMenu>
+      <ContextMenu onBlur={handleContextMenuBlur}>
         <Renderer
           id={id}
           containerRef={rWrapper}

packages/tldraw/src/components/ContextMenu/ContextMenu.test.tsx

@@ -5,7 +5,7 @@ import { renderWithContext } from '~test'
 describe('context menu', () => {
   test('mounts component without crashing', () => {
     renderWithContext(
-      <ContextMenu>
+      <ContextMenu onBlur={jest.fn()}>
         <div>Hello</div>
       </ContextMenu>
     )

packages/tldraw/src/components/ContextMenu/ContextMenu.tsx

@@ -44,10 +44,11 @@ const hasGroupSelectedSelector = (s: TLDrawSnapshot) => {
 const preventDefault = (e: Event) => e.stopPropagation()
 
 interface ContextMenuProps {
+  onBlur: React.FocusEventHandler
   children: React.ReactNode
 }
 
-export const ContextMenu = ({ children }: ContextMenuProps): JSX.Element => {
+export const ContextMenu = ({ onBlur, children }: ContextMenuProps): JSX.Element => {
   const { state, useSelector } = useTLDrawContext()
   const hasSelection = useSelector(has1SelectedIdsSelector)
   const hasTwoOrMore = useSelector(has2SelectedIdsSelector)
@@ -120,7 +121,14 @@ export const ContextMenu = ({ children }: ContextMenuProps): JSX.Element => {
   return (
     <RadixContextMenu.Root>
       <RadixContextMenu.Trigger dir="ltr">{children}</RadixContextMenu.Trigger>
-      <RadixContextMenu.Content dir="ltr" ref={rContent} onEscapeKeyDown={preventDefault} asChild>
+      <RadixContextMenu.Content
+        dir="ltr"
+        ref={rContent}
+        onEscapeKeyDown={preventDefault}
+        asChild
+        tabIndex={-1}
+        onBlur={onBlur}
+      >
         <MenuContent>
           {hasSelection ? (
             <>

packages/tldraw/src/components/Kbd/Kbd.tsx

@@ -51,6 +51,7 @@ export const StyledKbd = styled('kbd', {
     variant: {
       tooltip: {
         '& > span': {
+          color: '$tooltipText',
           background: '$overlayContrast',
           boxShadow: '$key',
           width: '20px',

packages/tldraw/src/components/ToolsPanel/PrimaryTools.tsx

@@ -51,7 +51,7 @@ export const PrimaryTools = React.memo(function PrimaryTools(): JSX.Element {
   return (
     <Panel side="center">
       <ToolButtonWithTooltip
-        kbd={'2'}
+        kbd={'1'}
         label={'select'}
         onClick={selectSelectTool}
         isActive={activeTool === 'select'}
@@ -76,7 +76,7 @@ export const PrimaryTools = React.memo(function PrimaryTools(): JSX.Element {
       </ToolButtonWithTooltip>
       <ToolButtonWithTooltip
         kbd={'4'}
-        label={TLDrawShapeType.Draw}
+        label={TLDrawShapeType.Ellipse}
         onClick={selectEllipseTool}
         isActive={activeTool === TLDrawShapeType.Ellipse}
       >