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/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}
)