diff --git a/apps/examples/src/examples/canvas-events/CanvasEventsExample.tsx b/apps/examples/src/examples/canvas-events/CanvasEventsExample.tsx index d06997ccb..ba10c4cc5 100644 --- 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()} >
{JSON.stringify(events, undefined, 2)}
diff --git a/apps/examples/src/examples/inline/InlineExample.tsx b/apps/examples/src/examples/inline/InlineExample.tsx index d6570b6c6..fc25f3c4e 100644 --- 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, }} > - - - + + + ) diff --git a/apps/examples/src/examples/store-events/StoreEventsExample.tsx b/apps/examples/src/examples/store-events/StoreEventsExample.tsx index d21ea245f..5f7e237f1 100644 --- 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()} >
{storeEvents}
diff --git a/apps/examples/src/examples/ui-events/UiEventsExample.tsx b/apps/examples/src/examples/ui-events/UiEventsExample.tsx index cc9821a5d..9f9c77857 100644 --- 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((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) => ( diff --git a/lerna.json b/lerna.json index 02e7ed5a8..d20966cc6 100644 --- 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" } diff --git a/packages/tldraw/api-report.md b/packages/tldraw/api-report.md index e7fbee7ba..2f58b78cd 100644 --- a/packages/tldraw/api-report.md +++ b/packages/tldraw/api-report.md @@ -1326,7 +1326,7 @@ export const TldrawUiIcon: NamedExoticComponent; export const TldrawUiInput: React_3.ForwardRefExoticComponent>; // @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({ id, kbd, label, readonlyOk, onSelect, disabled, checked, }: TLUiMenuCheckboxItemProps): JSX_2.Element | null; @@ -1809,6 +1809,8 @@ export interface TLUiInputProps { export interface TLUiKbdProps { // (undocumented) children: string; + // (undocumented) + visibleOnMobileLayout?: boolean; } // @public (undocumented) diff --git a/packages/tldraw/api/api.json b/packages/tldraw/api/api.json index 5d1993538..255e2780d 100644 --- 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": [] diff --git a/packages/tldraw/src/lib/ui.css b/packages/tldraw/src/lib/ui.css index a91a3a526..bbf9054b0 100644 --- 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 { diff --git a/packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.tsx b/packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.tsx index b0f3823e8..dcbd87e59 100644 --- 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 ?? @@ -29,7 +33,12 @@ export const DefaultKeyboardShortcutsDialog = memo(function DefaultKeyboardShort {msg('shortcuts-dialog.title')} - + {content} diff --git a/packages/tldraw/src/lib/ui/components/primitives/TldrawUiKbd.tsx b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiKbd.tsx index 0be460cde..9e5a84751 100644 --- 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(children).map((k, i) => ( diff --git a/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx b/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx index e22da3606..5a59ac675 100644 --- 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<
{labelStr}
- {kbd} + {kbd}
)