toolbar: fix missing title attributes (#3244)

The `title` attribute is currently missing in production. It was using
`title` when it should have been using `titleStr`
This also nixes the `title` attribute which is used just twice in the
codebase — probably not necessary to have a different title/label but
lemme know if you disagree.

Adds this behavior back in:
<img width="204" alt="Screenshot 2024-03-22 at 18 15 42"
src="https://github.com/tldraw/tldraw/assets/469604/f9b6d8d7-07ea-4f2f-8b45-e650ede18ae4">


### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Release Notes

- Fix title's being missing on toolbar items.

---------

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

apps/dotcom/src/utils/migration/DebugMenuItems.tsx

@@ -8,8 +8,7 @@ export function DebugMenuItems() {
 		<TldrawUiMenuGroup id="release">
 			<TldrawUiMenuItem
 				id="release-info"
-				title={`${RELEASE_INFO}`}
-				label="Version"
+				label={`Version ${RELEASE_INFO}`}
 				onSelect={() => {
 					window.alert(`${RELEASE_INFO}`)
 				}}

packages/tldraw/api-report.md

@@ -1675,7 +1675,7 @@ export function TldrawUiMenuContextProvider({ type, sourceId, children, }: TLUiM
 export function TldrawUiMenuGroup({ id, label, children }: TLUiMenuGroupProps): boolean | JSX_2.Element | Iterable<ReactNode> | null | number | string | undefined;
 
 // @public (undocumented)
-export function TldrawUiMenuItem<TranslationKey extends string = string, IconType extends string = string>({ disabled, spinner, readonlyOk, id, kbd, label, icon, onSelect, noClose, title, isSelected, }: TLUiMenuItemProps<TranslationKey, IconType>): JSX_2.Element | null;
+export function TldrawUiMenuItem<TranslationKey extends string = string, IconType extends string = string>({ disabled, spinner, readonlyOk, id, kbd, label, icon, onSelect, noClose, isSelected, }: TLUiMenuItemProps<TranslationKey, IconType>): JSX_2.Element | null;
 
 // @public (undocumented)
 export function TldrawUiMenuSubmenu<Translation extends string = string>({ id, disabled, label, size, children, }: TLUiMenuSubmenuProps<Translation>): boolean | JSX_2.Element | Iterable<ReactNode> | null | number | string | undefined;
@@ -1713,8 +1713,6 @@ export interface TLUiActionItem<TransationKey extends string = string, IconType
     onSelect: (source: TLUiEventSource) => Promise<void> | void;
     // (undocumented)
     readonlyOk?: boolean;
-    // (undocumented)
-    title?: string;
 }
 
 // @public (undocumented)
@@ -2204,7 +2202,6 @@ export type TLUiMenuItemProps<TranslationKey extends string = string, IconType e
     id: string;
     icon?: IconType;
     kbd?: string;
-    title?: string;
     label?: {
         [key: string]: TranslationKey;
     } | TranslationKey;

packages/tldraw/api/api.json

@@ -19531,7 +19531,7 @@
             },
             {
               "kind": "Content",
-              "text": ">({ disabled, spinner, readonlyOk, id, kbd, label, icon, onSelect, noClose, title, isSelected, }: "
+              "text": ">({ disabled, spinner, readonlyOk, id, kbd, label, icon, onSelect, noClose, isSelected, }: "
             },
             {
               "kind": "Reference",
@@ -19573,7 +19573,7 @@
           "overloadIndex": 1,
           "parameters": [
             {
-              "parameterName": "{ disabled, spinner, readonlyOk, id, kbd, label, icon, onSelect, noClose, title, isSelected, }",
+              "parameterName": "{ disabled, spinner, readonlyOk, id, kbd, label, icon, onSelect, noClose, isSelected, }",
               "parameterTypeTokenRange": {
                 "startIndex": 9,
                 "endIndex": 11
@@ -20192,33 +20192,6 @@
                 "startIndex": 1,
                 "endIndex": 2
               }
-            },
-            {
-              "kind": "PropertySignature",
-              "canonicalReference": "tldraw!TLUiActionItem#title:member",
-              "docComment": "",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "title?: "
-                },
-                {
-                  "kind": "Content",
-                  "text": "string"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isReadonly": false,
-              "isOptional": true,
-              "releaseTag": "Public",
-              "name": "title",
-              "propertyTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              }
             }
           ],
           "extendsTokenRanges": []
@@ -24972,7 +24945,7 @@
             },
             {
               "kind": "Content",
-              "text": "{\n    id: string;\n    icon?: IconType;\n    kbd?: string;\n    title?: string;\n    label?: {\n        [key: string]: TranslationKey;\n    } | TranslationKey;\n    readonlyOk?: boolean;\n    onSelect: (source: "
+              "text": "{\n    id: string;\n    icon?: IconType;\n    kbd?: string;\n    label?: {\n        [key: string]: TranslationKey;\n    } | TranslationKey;\n    readonlyOk?: boolean;\n    onSelect: (source: "
             },
             {
               "kind": "Reference",

packages/tldraw/src/lib/ui/components/menu-items.tsx

@@ -430,7 +430,6 @@ export function MoveToPageMenu() {
 							}
 							trackEvent('move-to-page', { source: 'context-menu' })
 						}}
-						title={page.name}
 					/>
 				))}
 			</TldrawUiMenuGroup>

packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx

@@ -29,10 +29,6 @@ export type TLUiMenuItemProps<
 	 * The keyboard shortcut to display on the item.
 	 */
 	kbd?: string
-	/**
-	 * The title to display on the item.
-	 */
-	title?: string
 	/**
 	 * The label to display on the item. If it's a string, it will be translated. If it's an object, the keys will be used as the language keys and the values will be translated.
 	 */
@@ -77,7 +73,6 @@ export function TldrawUiMenuItem<
 	icon,
 	onSelect,
 	noClose,
-	title,
 	isSelected,
 }: TLUiMenuItemProps<TranslationKey, IconType>) {
 	const { type: menuType, sourceId } = useTldrawUiMenuContext()
@@ -210,7 +205,7 @@ export function TldrawUiMenuItem<
 					aria-label={labelToUse}
 					data-value={id}
 					onClick={() => onSelect('toolbar')}
-					title={title}
+					title={titleStr}
 					onTouchStart={(e) => {
 						preventDefault(e)
 						onSelect('toolbar')
@@ -232,7 +227,7 @@ export function TldrawUiMenuItem<
 							onSelect('toolbar')
 						}}
 						data-testid={`tools.more.${id}`}
-						title={title}
+						title={titleStr}
 						role="radio"
 						aria-checked={isSelected ? 'true' : 'false'}
 						data-value={id}

packages/tldraw/src/lib/ui/context/actions.tsx

@@ -43,7 +43,6 @@ export interface TLUiActionItem<
 	icon?: IconType
 	id: string
 	kbd?: string
-	title?: string
 	label?: TransationKey | { [key: string]: TransationKey }
 	readonlyOk?: boolean
 	checkbox?: boolean