Merge branch 'point-docs-to-dev-example' of https://github.com/tldraw/tldraw into point-docs-to-dev-example

2024-02-22 16:39:41 +00:00 · 2024-02-22 16:39:41 +00:00 · afa292a774
commit afa292a774
--- a/apps/examples/src/examples/canvas-events/CanvasEventsExample.tsx
+++ b/apps/examples/src/examples/canvas-events/CanvasEventsExample.tsx
@ -48,6 +48,7 @@ export default function CanvasEventsExample() {
 					overflow: 'auto',
 					whiteSpace: 'pre-wrap',
 				}}
+				onCopy={(event) => event.stopPropagation()}
 			>
 				<div>{JSON.stringify(events, undefined, 2)}</div>
 			</div>
--- a/apps/examples/src/examples/inline/InlineExample.tsx
+++ b/apps/examples/src/examples/inline/InlineExample.tsx
@ -23,10 +23,10 @@ export default function InlineExample() {
 					gap: 12,
 				}}
 			>
-				<InlineEditor width={900} height={600} />
-				<InlineEditor width={700} height={500} />
-				<InlineEditor width={600} height={400} />
 				<InlineEditor width={500} height={300} />
+				<InlineEditor width={600} height={400} />
+				<InlineEditor width={700} height={500} />
+				<InlineEditor width={900} height={600} />
 			</div>
 		</FocusedEditorContext.Provider>
 	)
--- a/apps/examples/src/examples/store-events/StoreEventsExample.tsx
+++ b/apps/examples/src/examples/store-events/StoreEventsExample.tsx
@ -92,6 +92,7 @@ export default function StoreEventsExample() {
 					flexDirection: 'column-reverse',
 					overflow: 'auto',
 				}}
+				onCopy={(event) => event.stopPropagation()}
 			>
 				<pre>{storeEvents}</pre>
 			</div>
--- a/apps/examples/src/examples/ui-events/UiEventsExample.tsx
+++ b/apps/examples/src/examples/ui-events/UiEventsExample.tsx
@ -11,8 +11,8 @@ export default function UiEventsExample() {
 	const handleUiEvent = useCallback<TLUiEventHandler>((name, data: any) => {
 		const codeSnippet = getCodeSnippet(name, data)
 		setUiEvents((events) => [
-			`event: ${name} ${JSON.stringify(data)}${codeSnippet && `\ncode:  ${codeSnippet}`}`,
 			...events,
+			`event: ${name} ${JSON.stringify(data)}${codeSnippet && `\ncode:  ${codeSnippet}`}`,
 		])
 	}, [])

@ -31,10 +31,9 @@ export default function UiEventsExample() {
 					fontFamily: 'monospace',
 					fontSize: 12,
 					borderLeft: 'solid 2px #333',
-					display: 'flex',
-					flexDirection: 'column-reverse',
 					overflow: 'auto',
 				}}
+				onCopy={(event) => event.stopPropagation()}
 			>
 				{uiEvents.map((t, i) => (
 					<Fragment key={i}>
--- a/lerna.json
+++ b/lerna.json
@ -1,7 +1,5 @@
 {
 	"$schema": "node_modules/lerna/schemas/lerna-schema.json",
-	"packages": [
-		"packages/*"
-	],
+	"packages": ["packages/*"],
 	"version": "2.0.0-beta.4"
 }
--- a/packages/tldraw/api-report.md
+++ b/packages/tldraw/api-report.md
@ -1326,7 +1326,7 @@ export const TldrawUiIcon: NamedExoticComponent<TLUiIconProps>;
 export const TldrawUiInput: React_3.ForwardRefExoticComponent<TLUiInputProps & React_3.RefAttributes<HTMLInputElement>>;

 // @public (undocumented)
-export function TldrawUiKbd({ children }: TLUiKbdProps): JSX_2.Element | null;
+export function TldrawUiKbd({ children, visibleOnMobileLayout }: TLUiKbdProps): JSX_2.Element | null;

 // @public (undocumented)
 export function TldrawUiMenuCheckboxItem<TranslationKey extends string = string, IconType extends string = string>({ id, kbd, label, readonlyOk, onSelect, disabled, checked, }: TLUiMenuCheckboxItemProps<TranslationKey, IconType>): JSX_2.Element | null;
@ -1809,6 +1809,8 @@ export interface TLUiInputProps {
 export interface TLUiKbdProps {
    // (undocumented)
    children: string;
+    // (undocumented)
+    visibleOnMobileLayout?: boolean;
 }

 // @public (undocumented)
--- a/packages/tldraw/api/api.json
+++ b/packages/tldraw/api/api.json
@ -15826,7 +15826,7 @@
          "excerptTokens": [
            {
              "kind": "Content",
-              "text": "export declare function TldrawUiKbd({ children }: "
+              "text": "export declare function TldrawUiKbd({ children, visibleOnMobileLayout }: "
            },
            {
              "kind": "Reference",
@ -15864,7 +15864,7 @@
          "overloadIndex": 1,
          "parameters": [
            {
-              "parameterName": "{ children }",
+              "parameterName": "{ children, visibleOnMobileLayout }",
              "parameterTypeTokenRange": {
                "startIndex": 1,
                "endIndex": 2
@ -20948,6 +20948,33 @@
                "startIndex": 1,
                "endIndex": 2
              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@tldraw/tldraw!TLUiKbdProps#visibleOnMobileLayout:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "visibleOnMobileLayout?: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "visibleOnMobileLayout",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
            }
          ],
          "extendsTokenRanges": []
--- a/packages/tldraw/src/lib/ui.css
+++ b/packages/tldraw/src/lib/ui.css
@ -748,8 +748,8 @@
 	font-size: 12px;
 	overflow: hidden;
 	min-width: 300px;
-	max-width: 80vw;
-	max-height: 80vh;
+	max-width: 80%;
+	max-height: 80%;
 }

 .tlui-dialog__header {
@ -1488,26 +1488,18 @@

 .tlui-shortcuts-dialog__body {
 	position: relative;
-	columns: 1;
+	columns: 3;
 	column-gap: var(--space-9);
 	pointer-events: all;
 	touch-action: auto;
 }

-/* TODO: refactor shortcuts dialog to make it work in small inline components */
-@media (min-width: 475px) {
-	.tlui-shortcuts-dialog__body {
-		columns: 2;
-		column-gap: var(--space-9);
-	}
+.tlui-shortcuts-dialog__body__tablet {
+	columns: 2;
 }

-/* TODO: refactor shortcuts dialog to make it work in small inline components */
-@media (min-width: 960px) {
-	.tlui-shortcuts-dialog__body {
-		columns: 3;
-		column-gap: var(--space-9);
-	}
+.tlui-shortcuts-dialog__body__mobile {
+	columns: 1;
 }

 .tlui-shortcuts-dialog__group {
--- a/packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.tsx
+++ b/packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.tsx
@ -1,4 +1,7 @@
+import classNames from 'classnames'
 import { memo } from 'react'
+import { PORTRAIT_BREAKPOINT } from '../../constants'
+import { useBreakpoint } from '../../context/breakpoints'
 import { TLUiDialogProps } from '../../context/dialogs'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import {
@ -20,6 +23,7 @@ export const DefaultKeyboardShortcutsDialog = memo(function DefaultKeyboardShort
 	children,
 }: TLUiKeyboardShortcutsDialogProps) {
 	const msg = useTranslation()
+	const breakpoint = useBreakpoint()

 	const content = children ?? <DefaultKeyboardShortcutsDialogContent />

@ -29,7 +33,12 @@ export const DefaultKeyboardShortcutsDialog = memo(function DefaultKeyboardShort
 				<TldrawUiDialogTitle>{msg('shortcuts-dialog.title')}</TldrawUiDialogTitle>
 				<TldrawUiDialogCloseButton />
 			</TldrawUiDialogHeader>
-			<TldrawUiDialogBody className="tlui-shortcuts-dialog__body">
+			<TldrawUiDialogBody
+				className={classNames('tlui-shortcuts-dialog__body', {
+					'tlui-shortcuts-dialog__body__mobile': breakpoint <= PORTRAIT_BREAKPOINT.MOBILE_XS,
+					'tlui-shortcuts-dialog__body__tablet': breakpoint <= PORTRAIT_BREAKPOINT.TABLET,
+				})}
+			>
 				<TldrawUiMenuContextProvider type="keyboard-shortcuts" sourceId="kbd">
 					{content}
 				</TldrawUiMenuContextProvider>
--- a/packages/tldraw/src/lib/ui/components/primitives/TldrawUiKbd.tsx
+++ b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiKbd.tsx
@ -5,12 +5,13 @@ import { kbd } from '../../kbd-utils'
 /** @public */
 export interface TLUiKbdProps {
 	children: string
+	visibleOnMobileLayout?: boolean
 }

 /** @public */
-export function TldrawUiKbd({ children }: TLUiKbdProps) {
+export function TldrawUiKbd({ children, visibleOnMobileLayout = false }: TLUiKbdProps) {
 	const breakpoint = useBreakpoint()
-	if (breakpoint < PORTRAIT_BREAKPOINT.MOBILE) return null
+	if (!visibleOnMobileLayout && breakpoint < PORTRAIT_BREAKPOINT.MOBILE) return null
 	return (
 		<kbd className="tlui-kbd">
 			{kbd(children).map((k, i) => (
--- a/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx
+++ b/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx
@ -183,7 +183,7 @@ export function TldrawUiMenuItem<
 				<div className="tlui-shortcuts-dialog__key-pair" data-testid={`${sourceId}.${id}`}>
 					<div className="tlui-shortcuts-dialog__key-pair__key">{labelStr}</div>
 					<div className="tlui-shortcuts-dialog__key-pair__value">
-						<TldrawUiKbd>{kbd}</TldrawUiKbd>
+						<TldrawUiKbd visibleOnMobileLayout>{kbd}</TldrawUiKbd>
 					</div>
 				</div>
 			)