diff --git a/apps/dotcom/src/components/LocalEditor.tsx b/apps/dotcom/src/components/LocalEditor.tsx index c60a79e6d..255baf306 100644 --- a/apps/dotcom/src/components/LocalEditor.tsx +++ b/apps/dotcom/src/components/LocalEditor.tsx @@ -67,6 +67,13 @@ const components: TLComponents = { ) }, + SharePanel: () => { + return ( +
+ +
+ ) + }, } export function LocalEditor() { @@ -88,11 +95,6 @@ export function LocalEditor() { overrides={[sharingUiOverrides, fileSystemUiOverrides]} onUiEvent={handleUiEvent} components={components} - shareZone={ -
- -
- } inferDarkMode > diff --git a/apps/dotcom/src/components/MultiplayerEditor.tsx b/apps/dotcom/src/components/MultiplayerEditor.tsx index ec17cd2be..d55bdae82 100644 --- a/apps/dotcom/src/components/MultiplayerEditor.tsx +++ b/apps/dotcom/src/components/MultiplayerEditor.tsx @@ -13,8 +13,10 @@ import { Tldraw, TldrawUiMenuGroup, TldrawUiMenuItem, + atom, lns, useActions, + useValue, } from '@tldraw/tldraw' import { useCallback, useEffect } from 'react' import { useRemoteSyncClient } from '../hooks/useRemoteSyncClient' @@ -39,6 +41,8 @@ import { SneakyOnDropOverride } from './SneakyOnDropOverride' import { StoreErrorScreen } from './StoreErrorScreen' import { ThemeUpdater } from './ThemeUpdater/ThemeUpdater' +const shittyOfflineAtom = atom('shitty offline atom', false) + const components: TLComponents = { ErrorFallback: ({ error }) => { throw error @@ -78,6 +82,19 @@ const components: TLComponents = { ) }, + TopPanel: () => { + const isOffline = useValue('offline', () => shittyOfflineAtom.get(), []) + if (!isOffline) return null + return + }, + SharePanel: () => { + return ( +
+ + +
+ ) + }, } export function MultiplayerEditor({ @@ -96,6 +113,12 @@ export function MultiplayerEditor({ roomId, }) + const isOffline = + storeWithStatus.status === 'synced-remote' && storeWithStatus.connectionStatus === 'offline' + useEffect(() => { + shittyOfflineAtom.set(isOffline) + }, [isOffline]) + const isEmbedded = useIsEmbedded(roomSlug) const sharingUiOverrides = useSharing() const fileSystemUiOverrides = useFileSystem({ isMultiplayer: true }) @@ -118,9 +141,6 @@ export function MultiplayerEditor({ return } - const isOffline = - storeWithStatus.status === 'synced-remote' && storeWithStatus.connectionStatus === 'offline' - return (
} - shareZone={ -
- - -
- } autoFocus inferDarkMode > diff --git a/apps/dotcom/src/components/PeopleMenu/PeopleMenu.tsx b/apps/dotcom/src/components/PeopleMenu/PeopleMenu.tsx index 811177a63..dc536766d 100644 --- a/apps/dotcom/src/components/PeopleMenu/PeopleMenu.tsx +++ b/apps/dotcom/src/components/PeopleMenu/PeopleMenu.tsx @@ -1,6 +1,8 @@ import * as Popover from '@radix-ui/react-popover' import { - Button, + TldrawUiButton, + TldrawUiButtonIcon, + TldrawUiButtonLabel, track, useContainer, useEditor, @@ -73,13 +75,16 @@ export const PeopleMenu = track(function PeopleMenu({ )} {!hideShareMenu && (
-
)}
diff --git a/apps/dotcom/src/components/PeopleMenu/PeopleMenuItem.tsx b/apps/dotcom/src/components/PeopleMenu/PeopleMenuItem.tsx index ddddd32e4..ca6a599da 100644 --- a/apps/dotcom/src/components/PeopleMenu/PeopleMenuItem.tsx +++ b/apps/dotcom/src/components/PeopleMenu/PeopleMenuItem.tsx @@ -1,6 +1,7 @@ import { - Button, - Icon, + TldrawUiButton, + TldrawUiButtonIcon, + TldrawUiIcon, track, useEditor, usePresence, @@ -34,16 +35,16 @@ export const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId return (
- -
) }) diff --git a/apps/dotcom/src/components/PeopleMenu/UserPresenceColorPicker.tsx b/apps/dotcom/src/components/PeopleMenu/UserPresenceColorPicker.tsx index a3427a0fa..955b3664b 100644 --- a/apps/dotcom/src/components/PeopleMenu/UserPresenceColorPicker.tsx +++ b/apps/dotcom/src/components/PeopleMenu/UserPresenceColorPicker.tsx @@ -1,6 +1,7 @@ import * as Popover from '@radix-ui/react-popover' import { - Button, + TldrawUiButton, + TldrawUiButtonIcon, USER_COLORS, track, useContainer, @@ -88,13 +89,14 @@ export const UserPresenceColorPicker = track(function UserPresenceColorPicker() return ( - - + Download original + + + Continue + diff --git a/apps/dotcom/src/utils/shouldClearDocument.tsx b/apps/dotcom/src/utils/shouldClearDocument.tsx index 2512aece6..12d150de5 100644 --- a/apps/dotcom/src/utils/shouldClearDocument.tsx +++ b/apps/dotcom/src/utils/shouldClearDocument.tsx @@ -1,11 +1,13 @@ import { - Button, - DialogBody, - DialogCloseButton, - DialogFooter, - DialogHeader, - DialogTitle, TLUiDialogsContextType, + TldrawUiButton, + TldrawUiButtonCheck, + TldrawUiButtonLabel, + TldrawUiDialogBody, + TldrawUiDialogCloseButton, + TldrawUiDialogFooter, + TldrawUiDialogHeader, + TldrawUiDialogTitle, useTranslation, } from '@tldraw/tldraw' import { useState } from 'react' @@ -49,26 +51,28 @@ function ConfirmClearDialog({ const [dontShowAgain, setDontShowAgain] = useState(false) return ( <> - - {msg('file-system.confirm-clear.title')} - - - + + {msg('file-system.confirm-clear.title')} + + + {msg('file-system.confirm-clear.description')} - - - - - - + {msg('file-system.confirm-clear.continue')} + + ) } diff --git a/apps/dotcom/src/utils/shouldLeaveSharedProject.tsx b/apps/dotcom/src/utils/shouldLeaveSharedProject.tsx index 10a8b4e4e..5d12e1f82 100644 --- a/apps/dotcom/src/utils/shouldLeaveSharedProject.tsx +++ b/apps/dotcom/src/utils/shouldLeaveSharedProject.tsx @@ -1,11 +1,13 @@ import { - Button, - DialogBody, - DialogCloseButton, - DialogFooter, - DialogHeader, - DialogTitle, TLUiDialogsContextType, + TldrawUiButton, + TldrawUiButtonCheck, + TldrawUiButtonLabel, + TldrawUiDialogBody, + TldrawUiDialogCloseButton, + TldrawUiDialogFooter, + TldrawUiDialogHeader, + TldrawUiDialogTitle, useLocalStorageState, useTranslation, } from '@tldraw/tldraw' @@ -50,24 +52,26 @@ function ConfirmLeaveDialog({ return ( <> - - {msg('sharing.confirm-leave.title')} - - - {msg('sharing.confirm-leave.description')} - - - - - + {msg('sharing.confirm-leave.leave')} + + ) } diff --git a/apps/dotcom/src/utils/shouldOverrideDocument.tsx b/apps/dotcom/src/utils/shouldOverrideDocument.tsx index bb5d0dee0..5c4c6efbf 100644 --- a/apps/dotcom/src/utils/shouldOverrideDocument.tsx +++ b/apps/dotcom/src/utils/shouldOverrideDocument.tsx @@ -1,11 +1,13 @@ import { - Button, - DialogBody, - DialogCloseButton, - DialogFooter, - DialogHeader, - DialogTitle, TLUiDialogsContextType, + TldrawUiButton, + TldrawUiButtonCheck, + TldrawUiButtonLabel, + TldrawUiDialogBody, + TldrawUiDialogCloseButton, + TldrawUiDialogFooter, + TldrawUiDialogHeader, + TldrawUiDialogTitle, useTranslation, } from '@tldraw/tldraw' import { useState } from 'react' @@ -49,26 +51,28 @@ function ConfirmOpenDialog({ const [dontShowAgain, setDontShowAgain] = useState(false) return ( <> - - {msg('file-system.confirm-open.title')} - - - + + {msg('file-system.confirm-open.title')} + + + {msg('file-system.confirm-open.description')} - - - - - - + {msg('file-system.confirm-open.open')} + + ) } diff --git a/apps/examples/src/examples/context-toolbar/ContextToolbar.tsx b/apps/examples/src/examples/context-toolbar/ContextToolbar.tsx index 78f57bf86..2b0380dbc 100644 --- a/apps/examples/src/examples/context-toolbar/ContextToolbar.tsx +++ b/apps/examples/src/examples/context-toolbar/ContextToolbar.tsx @@ -1,8 +1,8 @@ import { DefaultSizeStyle, - Icon, SharedStyleMap, Tldraw, + TldrawUiIcon, TLEditorComponents, track, useEditor, @@ -85,7 +85,7 @@ const ContextToolbarComponent = track(() => { editor.setStyleForSelectedShapes(DefaultSizeStyle, value, { squashing: false }) } > - + ) })} diff --git a/apps/examples/src/examples/custom-quick-actions/CustomQuickActions.tsx b/apps/examples/src/examples/custom-quick-actions/CustomQuickActions.tsx index 9924b7023..472b438e5 100644 --- a/apps/examples/src/examples/custom-quick-actions/CustomQuickActions.tsx +++ b/apps/examples/src/examples/custom-quick-actions/CustomQuickActions.tsx @@ -1,9 +1,9 @@ import { - Button, DefaultQuickActions, DefaultQuickActionsContent, TLComponents, Tldraw, + TldrawUiMenuItem, } from '@tldraw/tldraw' import '@tldraw/tldraw/tldraw.css' @@ -11,7 +11,7 @@ function CustomQuickActions() { return ( - - + Green + ) diff --git a/apps/examples/src/examples/ui-components-hidden/UiComponentsHiddenExample.tsx b/apps/examples/src/examples/ui-components-hidden/UiComponentsHiddenExample.tsx index 386ba933c..2f19d0c34 100644 --- a/apps/examples/src/examples/ui-components-hidden/UiComponentsHiddenExample.tsx +++ b/apps/examples/src/examples/ui-components-hidden/UiComponentsHiddenExample.tsx @@ -17,6 +17,9 @@ const components: Required = { QuickActions: null, HelperButtons: null, DebugMenu: null, + SharePanel: null, + MenuPanel: null, + TopPanel: null, } export default function UiComponentsHiddenExample() { diff --git a/apps/examples/src/examples/zones/ZonesExample.tsx b/apps/examples/src/examples/zones/ZonesExample.tsx index 34b2c2492..3d9b21d50 100644 --- a/apps/examples/src/examples/zones/ZonesExample.tsx +++ b/apps/examples/src/examples/zones/ZonesExample.tsx @@ -1,13 +1,18 @@ -import { Tldraw } from '@tldraw/tldraw' +import { TLComponents, Tldraw } from '@tldraw/tldraw' import '@tldraw/tldraw/tldraw.css' // There's a guide at the bottom of this file! +const components: TLComponents = { + SharePanel: CustomShareZone, + TopPanel: CustomTopZone, +} + // [1] export default function Example() { return (
- } shareZone={} /> +
) } @@ -46,8 +51,8 @@ function CustomShareZone() { } /* -This example shows how to pass in a custom component to the share zone and top zone. -The share zone is in the top right corner above the style menu, the top zone is in +This example shows how to pass in a custom component to the share panel and top panel. +The share panel is in the top right corner above the style menu, the top panel is in the top center. [1] diff --git a/packages/tldraw/api-report.md b/packages/tldraw/api-report.md index 4d3949fa2..3d632559e 100644 --- a/packages/tldraw/api-report.md +++ b/packages/tldraw/api-report.md @@ -28,6 +28,7 @@ import { JSX as JSX_2 } from 'react/jsx-runtime'; import { LANGUAGES } from '@tldraw/editor'; import { Mat } from '@tldraw/editor'; import { MatModel } from '@tldraw/editor'; +import { MemoExoticComponent } from 'react'; import { MigrationFailureReason } from '@tldraw/editor'; import { Migrations } from '@tldraw/editor'; import { NamedExoticComponent } from 'react'; @@ -49,6 +50,7 @@ import { ShapeUtil } from '@tldraw/editor'; import { SharedStyle } from '@tldraw/editor'; import { StateNode } from '@tldraw/editor'; import { StoreSnapshot } from '@tldraw/editor'; +import { StyleProp } from '@tldraw/editor'; import { SvgExportContext } from '@tldraw/editor'; import { T } from '@tldraw/editor'; import { TLAnyShapeUtilConstructor } from '@tldraw/editor'; @@ -265,9 +267,6 @@ export function BreakPointProvider({ forceMobile, children, }: { // @internal (undocumented) export function buildFromV1Document(editor: Editor, document: LegacyTldrawDocument): void; -// @public (undocumented) -export const Button: React_3.ForwardRefExoticComponent>; - // @public export function containBoxSize(originalSize: BoxWidthHeight, containBoxSize: BoxWidthHeight): BoxWidthHeight; @@ -360,21 +359,6 @@ export const DefaultZoomMenu: NamedExoticComponent; // @public (undocumented) export function DefaultZoomMenuContent(): JSX_2.Element; -// @public (undocumented) -export function DialogBody({ className, children, style }: TLUiDialogBodyProps): JSX_2.Element; - -// @public (undocumented) -export function DialogCloseButton(): JSX_2.Element; - -// @public (undocumented) -export function DialogFooter({ className, children }: TLUiDialogFooterProps): JSX_2.Element; - -// @public (undocumented) -export function DialogHeader({ className, children }: TLUiDialogHeaderProps): JSX_2.Element; - -// @public (undocumented) -export function DialogTitle({ className, children }: TLUiDialogTitleProps): JSX_2.Element; - // @public export function downsizeImage(blob: Blob, width: number, height: number, opts?: { type?: string | undefined; @@ -439,36 +423,6 @@ export class DrawShapeUtil extends ShapeUtil { static type: "draw"; } -// @public (undocumented) -export function DropdownMenuCheckboxItem({ children, onSelect, ...rest }: TLUiDropdownMenuCheckboxItemProps): JSX_2.Element; - -// @public (undocumented) -export function DropdownMenuContent({ side, align, sideOffset, alignOffset, children, }: TLUiDropdownMenuContentProps): JSX_2.Element; - -// @public (undocumented) -export function DropdownMenuGroup({ children, size }: TLUiDropdownMenuGroupProps): JSX_2.Element; - -// @public (undocumented) -export function DropdownMenuIndicator(): JSX_2.Element; - -// @public (undocumented) -export function DropdownMenuItem({ noClose, ...props }: TLUiDropdownMenuItemProps): JSX_2.Element; - -// @public (undocumented) -export function DropdownMenuRadioItem({ children, ...rest }: TLUiDropdownMenuRadioItemProps): JSX_2.Element; - -// @public (undocumented) -export function DropdownMenuRoot({ id, children, modal, debugOpen, }: TLUiDropdownMenuRootProps): JSX_2.Element; - -// @public (undocumented) -export function DropdownMenuSub({ id, children }: TLUiDropdownMenuSubProps): JSX_2.Element; - -// @public (undocumented) -export function DropdownMenuSubTrigger({ label, title, disabled, }: TLUiDropdownMenuSubTriggerProps): JSX_2.Element; - -// @public (undocumented) -export function DropdownMenuTrigger({ children, ...rest }: TLUiDropdownMenuTriggerProps): JSX_2.Element; - // @public (undocumented) export class EmbedShapeUtil extends BaseBoxShapeUtil { // (undocumented) @@ -815,9 +769,6 @@ export class HighlightShapeUtil extends ShapeUtil { static type: "highlight"; } -// @public (undocumented) -export const Icon: NamedExoticComponent; - // @public (undocumented) export class ImageShapeUtil extends BaseBoxShapeUtil { // (undocumented) @@ -856,9 +807,6 @@ export class ImageShapeUtil extends BaseBoxShapeUtil { static type: "image"; } -// @public (undocumented) -export const Input: React_3.ForwardRefExoticComponent>; - // @public (undocumented) export function isGifAnimated(file: Blob): Promise; @@ -1059,15 +1007,6 @@ export function parseTldrawJsonFile({ json, schema, }: { json: string; }): Result; -// @public (undocumented) -export function Popover({ id, children, onOpenChange, open }: TLUiPopoverProps): JSX_2.Element; - -// @public (undocumented) -export function PopoverContent({ side, children, align, sideOffset, alignOffset, }: TLUiPopoverContentProps): JSX_2.Element; - -// @public (undocumented) -export function PopoverTrigger({ children, ...rest }: TLUiPopoverTriggerProps): JSX_2.Element; - // @public export function removeFrame(editor: Editor, ids: TLShapeId[]): void; @@ -1292,13 +1231,25 @@ export interface TldrawUiBaseProps { components?: TLUiComponents; hideUi?: boolean; renderDebugMenuItems?: () => React_2.ReactNode; - shareZone?: ReactNode; - // @internal - topZone?: ReactNode; } // @public (undocumented) -export function TldrawUiComponentsProvider({ overrides, children, }: ComponentsContextProviderProps): JSX_2.Element; +export const TldrawUiButton: React_3.ForwardRefExoticComponent>; + +// @public (undocumented) +export function TldrawUiButtonCheck({ checked }: TLUiButtonCheckProps): JSX_2.Element; + +// @public (undocumented) +export function TldrawUiButtonIcon({ icon, small, invertIcon }: TLUiButtonIconProps): JSX_2.Element; + +// @public (undocumented) +export function TldrawUiButtonLabel({ children }: TLUiButtonLabelProps): JSX_2.Element; + +// @public (undocumented) +export const TldrawUiButtonPicker: MemoExoticComponent<((props: TLUiButtonPickerProps) => JSX_2.Element)>; + +// @public (undocumented) +export function TldrawUiComponentsProvider({ overrides, children, }: TLUiComponentsProviderProps): JSX_2.Element; // @public (undocumented) export function TldrawUiContextProvider({ overrides, components, assetUrls, onUiEvent, forceMobile, children, }: TldrawUiContextProviderProps): JSX_2.Element; @@ -1313,6 +1264,57 @@ export interface TldrawUiContextProviderProps { overrides?: TLUiOverrides | TLUiOverrides[]; } +// @public (undocumented) +export function TldrawUiDialogBody({ className, children, style }: TLUiDialogBodyProps): JSX_2.Element; + +// @public (undocumented) +export function TldrawUiDialogCloseButton(): JSX_2.Element; + +// @public (undocumented) +export function TldrawUiDialogFooter({ className, children }: TLUiDialogFooterProps): JSX_2.Element; + +// @public (undocumented) +export function TldrawUiDialogHeader({ className, children }: TLUiDialogHeaderProps): JSX_2.Element; + +// @public (undocumented) +export function TldrawUiDialogTitle({ className, children }: TLUiDialogTitleProps): JSX_2.Element; + +// @public (undocumented) +export function TldrawUiDropdownMenuCheckboxItem({ children, onSelect, ...rest }: TLUiDropdownMenuCheckboxItemProps): JSX_2.Element; + +// @public (undocumented) +export function TldrawUiDropdownMenuContent({ side, align, sideOffset, alignOffset, children, }: TLUiDropdownMenuContentProps): JSX_2.Element; + +// @public (undocumented) +export function TldrawUiDropdownMenuGroup({ children, size, }: TLUiDropdownMenuGroupProps): JSX_2.Element; + +// @public (undocumented) +export function TldrawUiDropdownMenuIndicator(): JSX_2.Element; + +// @public (undocumented) +export function TldrawUiDropdownMenuItem({ noClose, children }: TLUiDropdownMenuItemProps): JSX_2.Element; + +// @public (undocumented) +export function TldrawUiDropdownMenuRoot({ id, children, modal, debugOpen, }: TLUiDropdownMenuRootProps): JSX_2.Element; + +// @public (undocumented) +export function TldrawUiDropdownMenuSub({ id, children }: TLUiDropdownMenuSubProps): JSX_2.Element; + +// @public (undocumented) +export function TldrawUiDropdownMenuSubTrigger({ label, title, disabled, }: TLUiDropdownMenuSubTriggerProps): JSX_2.Element; + +// @public (undocumented) +export function TldrawUiDropdownMenuTrigger({ children, ...rest }: TLUiDropdownMenuTriggerProps): JSX_2.Element; + +// @public (undocumented) +export const TldrawUiIcon: NamedExoticComponent; + +// @public (undocumented) +export const TldrawUiInput: React_3.ForwardRefExoticComponent>; + +// @public (undocumented) +export function TldrawUiKbd({ children }: TLUiKbdProps): JSX_2.Element | null; + // @public (undocumented) export function TldrawUiMenuCheckboxItem({ id, kbd, label, readonlyOk, onSelect, disabled, checked, }: TLUiMenuCheckboxItemProps): JSX_2.Element | null; @@ -1328,9 +1330,21 @@ export function TldrawUiMenuItem({ id, disabled, label, size, children, }: TLUiMenuSubmenuProps): any; +// @public (undocumented) +export function TldrawUiPopover({ id, children, onOpenChange, open }: TLUiPopoverProps): JSX_2.Element; + +// @public (undocumented) +export function TldrawUiPopoverContent({ side, children, align, sideOffset, alignOffset, }: TLUiPopoverContentProps): JSX_2.Element; + +// @public (undocumented) +export function TldrawUiPopoverTrigger({ children }: TLUiPopoverTriggerProps): JSX_2.Element; + // @public export type TldrawUiProps = TldrawUiBaseProps & TldrawUiContextProviderProps; +// @internal (undocumented) +export const TldrawUiSlider: NamedExoticComponent; + // @public (undocumented) export interface TLUiActionItem { // (undocumented) @@ -1364,29 +1378,44 @@ export type TLUiActionsMenuProps = { // @public (undocumented) export type TLUiAssetUrlOverrides = RecursivePartial; +// @public (undocumented) +export type TLUiButtonCheckProps = { + checked: boolean; +}; + +// @public (undocumented) +export type TLUiButtonIconProps = { + icon: string; + small?: boolean; + invertIcon?: boolean; +}; + +// @public (undocumented) +export type TLUiButtonLabelProps = { + children?: any; +}; + +// @public (undocumented) +export interface TLUiButtonPickerProps { + // (undocumented) + items: StyleValuesForUi; + // (undocumented) + onValueChange: (style: StyleProp, value: T, squashing: boolean) => void; + // (undocumented) + style: StyleProp; + // (undocumented) + title: string; + // (undocumented) + uiType: string; + // (undocumented) + value: SharedStyle; +} + // @public (undocumented) export interface TLUiButtonProps extends React_3.HTMLAttributes { // (undocumented) disabled?: boolean; // (undocumented) - icon?: Exclude | TLUiIconType; - // (undocumented) - iconLeft?: Exclude | TLUiIconType; - // (undocumented) - invertIcon?: boolean; - // (undocumented) - isChecked?: boolean; - // (undocumented) - kbd?: string; - // (undocumented) - label?: Exclude | TLUiTranslationKey; - // (undocumented) - loading?: boolean; - // (undocumented) - smallIcon?: boolean; - // (undocumented) - spinner?: boolean; - // (undocumented) type: 'danger' | 'help' | 'icon' | 'low' | 'menu' | 'normal' | 'primary' | 'tool'; } @@ -1395,6 +1424,12 @@ export type TLUiComponents = Partial<{ [K in keyof BaseTLUiComponents]: BaseTLUiComponents[K] | null; }>; +// @public (undocumented) +export type TLUiComponentsProviderProps = { + overrides?: TLUiComponents; + children: any; +}; + // @public (undocumented) export interface TLUiContextMenuProps { // (undocumented) @@ -1491,23 +1526,11 @@ export type TLUiDropdownMenuGroupProps = { }; // @public (undocumented) -export interface TLUiDropdownMenuItemProps extends TLUiButtonProps { - // (undocumented) - noClose?: boolean; -} - -// @public (undocumented) -export interface TLUiDropdownMenuRadioItemProps { - // (undocumented) - checked?: boolean; +export interface TLUiDropdownMenuItemProps { // (undocumented) children: any; // (undocumented) - disabled?: boolean; - // (undocumented) - onSelect?: (e: Event) => void; - // (undocumented) - title: string; + noClose?: boolean; } // @public (undocumented) @@ -1533,7 +1556,7 @@ export type TLUiDropdownMenuSubTriggerProps = { }; // @public (undocumented) -export interface TLUiDropdownMenuTriggerProps extends TLUiButtonProps { +export interface TLUiDropdownMenuTriggerProps { // (undocumented) children?: any; } @@ -1772,6 +1795,12 @@ export interface TLUiInputProps { value?: string; } +// @public (undocumented) +export interface TLUiKbdProps { + // (undocumented) + children: string; +} + // @public (undocumented) export type TLUiKeyboardShortcutsDialogProps = TLUiDialogProps & { children?: any; @@ -1867,7 +1896,7 @@ export type TLUiPopoverProps = { }; // @public (undocumented) -export interface TLUiPopoverTriggerProps extends TLUiButtonProps { +export interface TLUiPopoverTriggerProps { // (undocumented) children?: React_2.ReactNode; } @@ -1877,6 +1906,22 @@ export type TLUiQuickActionsProps = { children?: any; }; +// @internal (undocumented) +export interface TLUiSliderProps { + // (undocumented) + 'data-testid'?: string; + // (undocumented) + label: string; + // (undocumented) + onValueChange: (value: number, emphemeral: boolean) => void; + // (undocumented) + steps: number; + // (undocumented) + title: string; + // (undocumented) + value: null | number; +} + // @public (undocumented) export type TLUiStylePanelContentProps = { relevantStyles: ReturnType; @@ -2080,6 +2125,9 @@ export function useTldrawUiComponents(): Partial<{ QuickActions: ComponentType | null; HelperButtons: ComponentType | null; DebugMenu: ComponentType | null; + MenuPanel: ComponentType | null; + TopPanel: ComponentType | null; + SharePanel: ComponentType | null; }>; // @public (undocumented) diff --git a/packages/tldraw/api/api.json b/packages/tldraw/api/api.json index 640e4f115..d1ad4826d 100644 --- a/packages/tldraw/api/api.json +++ b/packages/tldraw/api/api.json @@ -2109,61 +2109,6 @@ ], "name": "BreakPointProvider" }, - { - "kind": "Variable", - "canonicalReference": "@tldraw/tldraw!Button:var", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "Button: " - }, - { - "kind": "Reference", - "text": "React.ForwardRefExoticComponent", - "canonicalReference": "@types/react!React.ForwardRefExoticComponent:interface" - }, - { - "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "TLUiButtonProps", - "canonicalReference": "@tldraw/tldraw!TLUiButtonProps:interface" - }, - { - "kind": "Content", - "text": " & " - }, - { - "kind": "Reference", - "text": "React.RefAttributes", - "canonicalReference": "@types/react!React.RefAttributes:interface" - }, - { - "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "HTMLButtonElement", - "canonicalReference": "!HTMLButtonElement:interface" - }, - { - "kind": "Content", - "text": ">>" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Button.tsx", - "isReadonly": true, - "releaseTag": "Public", - "name": "Button", - "variableTypeTokenRange": { - "startIndex": 1, - "endIndex": 9 - } - }, { "kind": "Function", "canonicalReference": "@tldraw/tldraw!containBoxSize:function(1)", @@ -3458,243 +3403,6 @@ "parameters": [], "name": "DefaultZoomMenuContent" }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!DialogBody:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function DialogBody({ className, children, style }: " - }, - { - "kind": "Reference", - "text": "TLUiDialogBodyProps", - "canonicalReference": "@tldraw/tldraw!TLUiDialogBodyProps:type" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Dialog.tsx", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ className, children, style }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "DialogBody" - }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!DialogCloseButton:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function DialogCloseButton(): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Dialog.tsx", - "returnTypeTokenRange": { - "startIndex": 1, - "endIndex": 3 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [], - "name": "DialogCloseButton" - }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!DialogFooter:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function DialogFooter({ className, children }: " - }, - { - "kind": "Reference", - "text": "TLUiDialogFooterProps", - "canonicalReference": "@tldraw/tldraw!TLUiDialogFooterProps:type" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Dialog.tsx", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ className, children }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "DialogFooter" - }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!DialogHeader:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function DialogHeader({ className, children }: " - }, - { - "kind": "Reference", - "text": "TLUiDialogHeaderProps", - "canonicalReference": "@tldraw/tldraw!TLUiDialogHeaderProps:type" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Dialog.tsx", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ className, children }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "DialogHeader" - }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!DialogTitle:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function DialogTitle({ className, children }: " - }, - { - "kind": "Reference", - "text": "TLUiDialogTitleProps", - "canonicalReference": "@tldraw/tldraw!TLUiDialogTitleProps:type" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Dialog.tsx", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ className, children }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "DialogTitle" - }, { "kind": "Function", "canonicalReference": "@tldraw/tldraw!downsizeImage:function(1)", @@ -4740,498 +4448,6 @@ }, "implementsTokenRanges": [] }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!DropdownMenuCheckboxItem:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function DropdownMenuCheckboxItem({ children, onSelect, ...rest }: " - }, - { - "kind": "Reference", - "text": "TLUiDropdownMenuCheckboxItemProps", - "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuCheckboxItemProps:interface" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ children, onSelect, ...rest }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "DropdownMenuCheckboxItem" - }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!DropdownMenuContent:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function DropdownMenuContent({ side, align, sideOffset, alignOffset, children, }: " - }, - { - "kind": "Reference", - "text": "TLUiDropdownMenuContentProps", - "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuContentProps:type" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ side, align, sideOffset, alignOffset, children, }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "DropdownMenuContent" - }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!DropdownMenuGroup:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function DropdownMenuGroup({ children, size }: " - }, - { - "kind": "Reference", - "text": "TLUiDropdownMenuGroupProps", - "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuGroupProps:type" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ children, size }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "DropdownMenuGroup" - }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!DropdownMenuIndicator:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function DropdownMenuIndicator(): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", - "returnTypeTokenRange": { - "startIndex": 1, - "endIndex": 3 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [], - "name": "DropdownMenuIndicator" - }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!DropdownMenuItem:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function DropdownMenuItem({ noClose, ...props }: " - }, - { - "kind": "Reference", - "text": "TLUiDropdownMenuItemProps", - "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuItemProps:interface" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ noClose, ...props }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "DropdownMenuItem" - }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!DropdownMenuRadioItem:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function DropdownMenuRadioItem({ children, ...rest }: " - }, - { - "kind": "Reference", - "text": "TLUiDropdownMenuRadioItemProps", - "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuRadioItemProps:interface" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ children, ...rest }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "DropdownMenuRadioItem" - }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!DropdownMenuRoot:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function DropdownMenuRoot({ id, children, modal, debugOpen, }: " - }, - { - "kind": "Reference", - "text": "TLUiDropdownMenuRootProps", - "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuRootProps:type" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ id, children, modal, debugOpen, }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "DropdownMenuRoot" - }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!DropdownMenuSub:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function DropdownMenuSub({ id, children }: " - }, - { - "kind": "Reference", - "text": "TLUiDropdownMenuSubProps", - "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuSubProps:type" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ id, children }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "DropdownMenuSub" - }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!DropdownMenuSubTrigger:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function DropdownMenuSubTrigger({ label, title, disabled, }: " - }, - { - "kind": "Reference", - "text": "TLUiDropdownMenuSubTriggerProps", - "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuSubTriggerProps:type" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ label, title, disabled, }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "DropdownMenuSubTrigger" - }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!DropdownMenuTrigger:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function DropdownMenuTrigger({ children, ...rest }: " - }, - { - "kind": "Reference", - "text": "TLUiDropdownMenuTriggerProps", - "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuTriggerProps:interface" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ children, ...rest }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "DropdownMenuTrigger" - }, { "kind": "Class", "canonicalReference": "@tldraw/tldraw!EmbedShapeUtil:class", @@ -9659,47 +8875,6 @@ }, "implementsTokenRanges": [] }, - { - "kind": "Variable", - "canonicalReference": "@tldraw/tldraw!Icon:var", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "Icon: " - }, - { - "kind": "Content", - "text": "import(\"react\")." - }, - { - "kind": "Reference", - "text": "NamedExoticComponent", - "canonicalReference": "@types/react!React.NamedExoticComponent:interface" - }, - { - "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "TLUiIconProps", - "canonicalReference": "@tldraw/tldraw!TLUiIconProps:interface" - }, - { - "kind": "Content", - "text": ">" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Icon.tsx", - "isReadonly": true, - "releaseTag": "Public", - "name": "Icon", - "variableTypeTokenRange": { - "startIndex": 1, - "endIndex": 6 - } - }, { "kind": "Class", "canonicalReference": "@tldraw/tldraw!ImageShapeUtil:class", @@ -10323,61 +9498,6 @@ }, "implementsTokenRanges": [] }, - { - "kind": "Variable", - "canonicalReference": "@tldraw/tldraw!Input:var", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "Input: " - }, - { - "kind": "Reference", - "text": "React.ForwardRefExoticComponent", - "canonicalReference": "@types/react!React.ForwardRefExoticComponent:interface" - }, - { - "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "TLUiInputProps", - "canonicalReference": "@tldraw/tldraw!TLUiInputProps:interface" - }, - { - "kind": "Content", - "text": " & " - }, - { - "kind": "Reference", - "text": "React.RefAttributes", - "canonicalReference": "@types/react!React.RefAttributes:interface" - }, - { - "kind": "Content", - "text": "<" - }, - { - "kind": "Reference", - "text": "HTMLInputElement", - "canonicalReference": "!HTMLInputElement:interface" - }, - { - "kind": "Content", - "text": ">>" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Input.tsx", - "isReadonly": true, - "releaseTag": "Public", - "name": "Input", - "variableTypeTokenRange": { - "startIndex": 1, - "endIndex": 9 - } - }, { "kind": "Function", "canonicalReference": "@tldraw/tldraw!isGifAnimated:function(1)", @@ -12698,159 +11818,6 @@ ], "name": "parseTldrawJsonFile" }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!Popover:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function Popover({ id, children, onOpenChange, open }: " - }, - { - "kind": "Reference", - "text": "TLUiPopoverProps", - "canonicalReference": "@tldraw/tldraw!TLUiPopoverProps:type" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Popover.tsx", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ id, children, onOpenChange, open }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "Popover" - }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!PopoverContent:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function PopoverContent({ side, children, align, sideOffset, alignOffset, }: " - }, - { - "kind": "Reference", - "text": "TLUiPopoverContentProps", - "canonicalReference": "@tldraw/tldraw!TLUiPopoverContentProps:type" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Popover.tsx", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ side, children, align, sideOffset, alignOffset, }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "PopoverContent" - }, - { - "kind": "Function", - "canonicalReference": "@tldraw/tldraw!PopoverTrigger:function(1)", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export declare function PopoverTrigger({ children, ...rest }: " - }, - { - "kind": "Reference", - "text": "TLUiPopoverTriggerProps", - "canonicalReference": "@tldraw/tldraw!TLUiPopoverTriggerProps:interface" - }, - { - "kind": "Content", - "text": "): " - }, - { - "kind": "Content", - "text": "import(\"react/jsx-runtime\")." - }, - { - "kind": "Reference", - "text": "JSX.Element", - "canonicalReference": "@types/react!JSX.Element:interface" - }, - { - "kind": "Content", - "text": ";" - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Popover.tsx", - "returnTypeTokenRange": { - "startIndex": 3, - "endIndex": 5 - }, - "releaseTag": "Public", - "overloadIndex": 1, - "parameters": [ - { - "parameterName": "{ children, ...rest }", - "parameterTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - }, - "isOptional": false - } - ], - "name": "PopoverTrigger" - }, { "kind": "Function", "canonicalReference": "@tldraw/tldraw!removeFrame:function(1)", @@ -15354,38 +14321,268 @@ "startIndex": 1, "endIndex": 3 } - }, - { - "kind": "PropertySignature", - "canonicalReference": "@tldraw/tldraw!TldrawUiBaseProps#shareZone:member", - "docComment": "/**\n * A component to use for the share zone (will be deprecated)\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "shareZone?: " - }, - { - "kind": "Reference", - "text": "ReactNode", - "canonicalReference": "@types/react!React.ReactNode:type" - }, - { - "kind": "Content", - "text": ";" - } - ], - "isReadonly": false, - "isOptional": true, - "releaseTag": "Public", - "name": "shareZone", - "propertyTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - } } ], "extendsTokenRanges": [] }, + { + "kind": "Variable", + "canonicalReference": "@tldraw/tldraw!TldrawUiButton:var", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "TldrawUiButton: " + }, + { + "kind": "Reference", + "text": "React.ForwardRefExoticComponent", + "canonicalReference": "@types/react!React.ForwardRefExoticComponent:interface" + }, + { + "kind": "Content", + "text": "<" + }, + { + "kind": "Reference", + "text": "TLUiButtonProps", + "canonicalReference": "@tldraw/tldraw!TLUiButtonProps:interface" + }, + { + "kind": "Content", + "text": " & " + }, + { + "kind": "Reference", + "text": "React.RefAttributes", + "canonicalReference": "@types/react!React.RefAttributes:interface" + }, + { + "kind": "Content", + "text": "<" + }, + { + "kind": "Reference", + "text": "HTMLButtonElement", + "canonicalReference": "!HTMLButtonElement:interface" + }, + { + "kind": "Content", + "text": ">>" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButton.tsx", + "isReadonly": true, + "releaseTag": "Public", + "name": "TldrawUiButton", + "variableTypeTokenRange": { + "startIndex": 1, + "endIndex": 9 + } + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiButtonCheck:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiButtonCheck({ checked }: " + }, + { + "kind": "Reference", + "text": "TLUiButtonCheckProps", + "canonicalReference": "@tldraw/tldraw!TLUiButtonCheckProps:type" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonCheck.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ checked }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiButtonCheck" + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiButtonIcon:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiButtonIcon({ icon, small, invertIcon }: " + }, + { + "kind": "Reference", + "text": "TLUiButtonIconProps", + "canonicalReference": "@tldraw/tldraw!TLUiButtonIconProps:type" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ icon, small, invertIcon }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiButtonIcon" + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiButtonLabel:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiButtonLabel({ children }: " + }, + { + "kind": "Reference", + "text": "TLUiButtonLabelProps", + "canonicalReference": "@tldraw/tldraw!TLUiButtonLabelProps:type" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonLabel.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ children }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiButtonLabel" + }, + { + "kind": "Variable", + "canonicalReference": "@tldraw/tldraw!TldrawUiButtonPicker:var", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "TldrawUiButtonPicker: " + }, + { + "kind": "Content", + "text": "import(\"react\")." + }, + { + "kind": "Reference", + "text": "MemoExoticComponent", + "canonicalReference": "@types/react!React.MemoExoticComponent:type" + }, + { + "kind": "Content", + "text": "<((props: " + }, + { + "kind": "Reference", + "text": "TLUiButtonPickerProps", + "canonicalReference": "@tldraw/tldraw!TLUiButtonPickerProps:interface" + }, + { + "kind": "Content", + "text": ") => import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ")>" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx", + "isReadonly": true, + "releaseTag": "Public", + "name": "TldrawUiButtonPicker", + "variableTypeTokenRange": { + "startIndex": 1, + "endIndex": 8 + } + }, { "kind": "Function", "canonicalReference": "@tldraw/tldraw!TldrawUiComponentsProvider:function(1)", @@ -15397,8 +14594,8 @@ }, { "kind": "Reference", - "text": "ComponentsContextProviderProps", - "canonicalReference": "@tldraw/tldraw!~ComponentsContextProviderProps:type" + "text": "TLUiComponentsProviderProps", + "canonicalReference": "@tldraw/tldraw!TLUiComponentsProviderProps:type" }, { "kind": "Content", @@ -15698,6 +14895,835 @@ ], "extendsTokenRanges": [] }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiDialogBody:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiDialogBody({ className, children, style }: " + }, + { + "kind": "Reference", + "text": "TLUiDialogBodyProps", + "canonicalReference": "@tldraw/tldraw!TLUiDialogBodyProps:type" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDialog.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ className, children, style }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiDialogBody" + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiDialogCloseButton:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiDialogCloseButton(): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDialog.tsx", + "returnTypeTokenRange": { + "startIndex": 1, + "endIndex": 3 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [], + "name": "TldrawUiDialogCloseButton" + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiDialogFooter:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiDialogFooter({ className, children }: " + }, + { + "kind": "Reference", + "text": "TLUiDialogFooterProps", + "canonicalReference": "@tldraw/tldraw!TLUiDialogFooterProps:type" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDialog.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ className, children }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiDialogFooter" + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiDialogHeader:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiDialogHeader({ className, children }: " + }, + { + "kind": "Reference", + "text": "TLUiDialogHeaderProps", + "canonicalReference": "@tldraw/tldraw!TLUiDialogHeaderProps:type" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDialog.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ className, children }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiDialogHeader" + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiDialogTitle:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiDialogTitle({ className, children }: " + }, + { + "kind": "Reference", + "text": "TLUiDialogTitleProps", + "canonicalReference": "@tldraw/tldraw!TLUiDialogTitleProps:type" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDialog.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ className, children }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiDialogTitle" + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiDropdownMenuCheckboxItem:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiDropdownMenuCheckboxItem({ children, onSelect, ...rest }: " + }, + { + "kind": "Reference", + "text": "TLUiDropdownMenuCheckboxItemProps", + "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuCheckboxItemProps:interface" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ children, onSelect, ...rest }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiDropdownMenuCheckboxItem" + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiDropdownMenuContent:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiDropdownMenuContent({ side, align, sideOffset, alignOffset, children, }: " + }, + { + "kind": "Reference", + "text": "TLUiDropdownMenuContentProps", + "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuContentProps:type" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ side, align, sideOffset, alignOffset, children, }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiDropdownMenuContent" + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiDropdownMenuGroup:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiDropdownMenuGroup({ children, size, }: " + }, + { + "kind": "Reference", + "text": "TLUiDropdownMenuGroupProps", + "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuGroupProps:type" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ children, size, }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiDropdownMenuGroup" + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiDropdownMenuIndicator:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiDropdownMenuIndicator(): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx", + "returnTypeTokenRange": { + "startIndex": 1, + "endIndex": 3 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [], + "name": "TldrawUiDropdownMenuIndicator" + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiDropdownMenuItem:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiDropdownMenuItem({ noClose, children }: " + }, + { + "kind": "Reference", + "text": "TLUiDropdownMenuItemProps", + "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuItemProps:interface" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ noClose, children }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiDropdownMenuItem" + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiDropdownMenuRoot:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiDropdownMenuRoot({ id, children, modal, debugOpen, }: " + }, + { + "kind": "Reference", + "text": "TLUiDropdownMenuRootProps", + "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuRootProps:type" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ id, children, modal, debugOpen, }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiDropdownMenuRoot" + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiDropdownMenuSub:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiDropdownMenuSub({ id, children }: " + }, + { + "kind": "Reference", + "text": "TLUiDropdownMenuSubProps", + "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuSubProps:type" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ id, children }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiDropdownMenuSub" + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiDropdownMenuSubTrigger:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiDropdownMenuSubTrigger({ label, title, disabled, }: " + }, + { + "kind": "Reference", + "text": "TLUiDropdownMenuSubTriggerProps", + "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuSubTriggerProps:type" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ label, title, disabled, }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiDropdownMenuSubTrigger" + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiDropdownMenuTrigger:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiDropdownMenuTrigger({ children, ...rest }: " + }, + { + "kind": "Reference", + "text": "TLUiDropdownMenuTriggerProps", + "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuTriggerProps:interface" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ children, ...rest }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiDropdownMenuTrigger" + }, + { + "kind": "Variable", + "canonicalReference": "@tldraw/tldraw!TldrawUiIcon:var", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "TldrawUiIcon: " + }, + { + "kind": "Content", + "text": "import(\"react\")." + }, + { + "kind": "Reference", + "text": "NamedExoticComponent", + "canonicalReference": "@types/react!React.NamedExoticComponent:interface" + }, + { + "kind": "Content", + "text": "<" + }, + { + "kind": "Reference", + "text": "TLUiIconProps", + "canonicalReference": "@tldraw/tldraw!TLUiIconProps:interface" + }, + { + "kind": "Content", + "text": ">" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiIcon.tsx", + "isReadonly": true, + "releaseTag": "Public", + "name": "TldrawUiIcon", + "variableTypeTokenRange": { + "startIndex": 1, + "endIndex": 6 + } + }, + { + "kind": "Variable", + "canonicalReference": "@tldraw/tldraw!TldrawUiInput:var", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "TldrawUiInput: " + }, + { + "kind": "Reference", + "text": "React.ForwardRefExoticComponent", + "canonicalReference": "@types/react!React.ForwardRefExoticComponent:interface" + }, + { + "kind": "Content", + "text": "<" + }, + { + "kind": "Reference", + "text": "TLUiInputProps", + "canonicalReference": "@tldraw/tldraw!TLUiInputProps:interface" + }, + { + "kind": "Content", + "text": " & " + }, + { + "kind": "Reference", + "text": "React.RefAttributes", + "canonicalReference": "@types/react!React.RefAttributes:interface" + }, + { + "kind": "Content", + "text": "<" + }, + { + "kind": "Reference", + "text": "HTMLInputElement", + "canonicalReference": "!HTMLInputElement:interface" + }, + { + "kind": "Content", + "text": ">>" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiInput.tsx", + "isReadonly": true, + "releaseTag": "Public", + "name": "TldrawUiInput", + "variableTypeTokenRange": { + "startIndex": 1, + "endIndex": 9 + } + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiKbd:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiKbd({ children }: " + }, + { + "kind": "Reference", + "text": "TLUiKbdProps", + "canonicalReference": "@tldraw/tldraw!TLUiKbdProps:interface" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": " | null" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiKbd.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 6 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ children }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiKbd" + }, { "kind": "Function", "canonicalReference": "@tldraw/tldraw!TldrawUiMenuCheckboxItem:function(1)", @@ -15770,7 +15796,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuCheckboxItem.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx", "returnTypeTokenRange": { "startIndex": 12, "endIndex": 15 @@ -15845,7 +15871,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuContext.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx", "returnTypeTokenRange": { "startIndex": 3, "endIndex": 5 @@ -15891,7 +15917,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuGroup.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx", "returnTypeTokenRange": { "startIndex": 3, "endIndex": 4 @@ -15982,7 +16008,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuItem.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx", "returnTypeTokenRange": { "startIndex": 12, "endIndex": 15 @@ -16072,7 +16098,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuSubmenu.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.tsx", "returnTypeTokenRange": { "startIndex": 8, "endIndex": 9 @@ -16104,6 +16130,159 @@ ], "name": "TldrawUiMenuSubmenu" }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiPopover:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiPopover({ id, children, onOpenChange, open }: " + }, + { + "kind": "Reference", + "text": "TLUiPopoverProps", + "canonicalReference": "@tldraw/tldraw!TLUiPopoverProps:type" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiPopover.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ id, children, onOpenChange, open }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiPopover" + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiPopoverContent:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiPopoverContent({ side, children, align, sideOffset, alignOffset, }: " + }, + { + "kind": "Reference", + "text": "TLUiPopoverContentProps", + "canonicalReference": "@tldraw/tldraw!TLUiPopoverContentProps:type" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiPopover.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ side, children, align, sideOffset, alignOffset, }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiPopoverContent" + }, + { + "kind": "Function", + "canonicalReference": "@tldraw/tldraw!TldrawUiPopoverTrigger:function(1)", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export declare function TldrawUiPopoverTrigger({ children }: " + }, + { + "kind": "Reference", + "text": "TLUiPopoverTriggerProps", + "canonicalReference": "@tldraw/tldraw!TLUiPopoverTriggerProps:interface" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Content", + "text": "import(\"react/jsx-runtime\")." + }, + { + "kind": "Reference", + "text": "JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiPopover.tsx", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 5 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ children }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "TldrawUiPopoverTrigger" + }, { "kind": "TypeAlias", "canonicalReference": "@tldraw/tldraw!TldrawUiProps:type", @@ -16554,6 +16733,309 @@ "endIndex": 5 } }, + { + "kind": "TypeAlias", + "canonicalReference": "@tldraw/tldraw!TLUiButtonCheckProps:type", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export type TLUiButtonCheckProps = " + }, + { + "kind": "Content", + "text": "{\n checked: boolean;\n}" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonCheck.tsx", + "releaseTag": "Public", + "name": "TLUiButtonCheckProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "TypeAlias", + "canonicalReference": "@tldraw/tldraw!TLUiButtonIconProps:type", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export type TLUiButtonIconProps = " + }, + { + "kind": "Content", + "text": "{\n icon: string;\n small?: boolean;\n invertIcon?: boolean;\n}" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx", + "releaseTag": "Public", + "name": "TLUiButtonIconProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "TypeAlias", + "canonicalReference": "@tldraw/tldraw!TLUiButtonLabelProps:type", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export type TLUiButtonLabelProps = " + }, + { + "kind": "Content", + "text": "{\n children?: any;\n}" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonLabel.tsx", + "releaseTag": "Public", + "name": "TLUiButtonLabelProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "Interface", + "canonicalReference": "@tldraw/tldraw!TLUiButtonPickerProps:interface", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export interface TLUiButtonPickerProps " + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx", + "releaseTag": "Public", + "typeParameters": [ + { + "typeParameterName": "T", + "constraintTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "defaultTypeTokenRange": { + "startIndex": 0, + "endIndex": 0 + } + } + ], + "name": "TLUiButtonPickerProps", + "preserveMemberOrder": false, + "members": [ + { + "kind": "PropertySignature", + "canonicalReference": "@tldraw/tldraw!TLUiButtonPickerProps#items:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "items: " + }, + { + "kind": "Reference", + "text": "StyleValuesForUi", + "canonicalReference": "@tldraw/tldraw!~StyleValuesForUi:type" + }, + { + "kind": "Content", + "text": "" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": false, + "releaseTag": "Public", + "name": "items", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 3 + } + }, + { + "kind": "PropertySignature", + "canonicalReference": "@tldraw/tldraw!TLUiButtonPickerProps#onValueChange:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "onValueChange: " + }, + { + "kind": "Content", + "text": "(style: " + }, + { + "kind": "Reference", + "text": "StyleProp", + "canonicalReference": "@tldraw/tlschema!StyleProp:class" + }, + { + "kind": "Content", + "text": ", value: T, squashing: boolean) => void" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": false, + "releaseTag": "Public", + "name": "onValueChange", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 4 + } + }, + { + "kind": "PropertySignature", + "canonicalReference": "@tldraw/tldraw!TLUiButtonPickerProps#style:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "style: " + }, + { + "kind": "Reference", + "text": "StyleProp", + "canonicalReference": "@tldraw/tlschema!StyleProp:class" + }, + { + "kind": "Content", + "text": "" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": false, + "releaseTag": "Public", + "name": "style", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 3 + } + }, + { + "kind": "PropertySignature", + "canonicalReference": "@tldraw/tldraw!TLUiButtonPickerProps#title:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "title: " + }, + { + "kind": "Content", + "text": "string" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": false, + "releaseTag": "Public", + "name": "title", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "PropertySignature", + "canonicalReference": "@tldraw/tldraw!TLUiButtonPickerProps#uiType:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "uiType: " + }, + { + "kind": "Content", + "text": "string" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": false, + "releaseTag": "Public", + "name": "uiType", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "PropertySignature", + "canonicalReference": "@tldraw/tldraw!TLUiButtonPickerProps#value:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "value: " + }, + { + "kind": "Reference", + "text": "SharedStyle", + "canonicalReference": "@tldraw/editor!SharedStyle:type" + }, + { + "kind": "Content", + "text": "" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": false, + "releaseTag": "Public", + "name": "value", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 3 + } + } + ], + "extendsTokenRanges": [] + }, { "kind": "Interface", "canonicalReference": "@tldraw/tldraw!TLUiButtonProps:interface", @@ -16586,7 +17068,7 @@ "text": " " } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Button.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButton.tsx", "releaseTag": "Public", "name": "TLUiButtonProps", "preserveMemberOrder": false, @@ -16618,306 +17100,6 @@ "endIndex": 2 } }, - { - "kind": "PropertySignature", - "canonicalReference": "@tldraw/tldraw!TLUiButtonProps#icon:member", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "icon?: " - }, - { - "kind": "Reference", - "text": "Exclude", - "canonicalReference": "!Exclude:type" - }, - { - "kind": "Content", - "text": " | " - }, - { - "kind": "Reference", - "text": "TLUiIconType", - "canonicalReference": "@tldraw/tldraw!TLUiIconType:type" - }, - { - "kind": "Content", - "text": ";" - } - ], - "isReadonly": false, - "isOptional": true, - "releaseTag": "Public", - "name": "icon", - "propertyTypeTokenRange": { - "startIndex": 1, - "endIndex": 6 - } - }, - { - "kind": "PropertySignature", - "canonicalReference": "@tldraw/tldraw!TLUiButtonProps#iconLeft:member", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "iconLeft?: " - }, - { - "kind": "Reference", - "text": "Exclude", - "canonicalReference": "!Exclude:type" - }, - { - "kind": "Content", - "text": " | " - }, - { - "kind": "Reference", - "text": "TLUiIconType", - "canonicalReference": "@tldraw/tldraw!TLUiIconType:type" - }, - { - "kind": "Content", - "text": ";" - } - ], - "isReadonly": false, - "isOptional": true, - "releaseTag": "Public", - "name": "iconLeft", - "propertyTypeTokenRange": { - "startIndex": 1, - "endIndex": 6 - } - }, - { - "kind": "PropertySignature", - "canonicalReference": "@tldraw/tldraw!TLUiButtonProps#invertIcon:member", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "invertIcon?: " - }, - { - "kind": "Content", - "text": "boolean" - }, - { - "kind": "Content", - "text": ";" - } - ], - "isReadonly": false, - "isOptional": true, - "releaseTag": "Public", - "name": "invertIcon", - "propertyTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - } - }, - { - "kind": "PropertySignature", - "canonicalReference": "@tldraw/tldraw!TLUiButtonProps#isChecked:member", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "isChecked?: " - }, - { - "kind": "Content", - "text": "boolean" - }, - { - "kind": "Content", - "text": ";" - } - ], - "isReadonly": false, - "isOptional": true, - "releaseTag": "Public", - "name": "isChecked", - "propertyTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - } - }, - { - "kind": "PropertySignature", - "canonicalReference": "@tldraw/tldraw!TLUiButtonProps#kbd:member", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "kbd?: " - }, - { - "kind": "Content", - "text": "string" - }, - { - "kind": "Content", - "text": ";" - } - ], - "isReadonly": false, - "isOptional": true, - "releaseTag": "Public", - "name": "kbd", - "propertyTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - } - }, - { - "kind": "PropertySignature", - "canonicalReference": "@tldraw/tldraw!TLUiButtonProps#label:member", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "label?: " - }, - { - "kind": "Reference", - "text": "Exclude", - "canonicalReference": "!Exclude:type" - }, - { - "kind": "Content", - "text": " | " - }, - { - "kind": "Reference", - "text": "TLUiTranslationKey", - "canonicalReference": "@tldraw/tldraw!TLUiTranslationKey:type" - }, - { - "kind": "Content", - "text": ";" - } - ], - "isReadonly": false, - "isOptional": true, - "releaseTag": "Public", - "name": "label", - "propertyTypeTokenRange": { - "startIndex": 1, - "endIndex": 6 - } - }, - { - "kind": "PropertySignature", - "canonicalReference": "@tldraw/tldraw!TLUiButtonProps#loading:member", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "loading?: " - }, - { - "kind": "Content", - "text": "boolean" - }, - { - "kind": "Content", - "text": ";" - } - ], - "isReadonly": false, - "isOptional": true, - "releaseTag": "Public", - "name": "loading", - "propertyTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - } - }, - { - "kind": "PropertySignature", - "canonicalReference": "@tldraw/tldraw!TLUiButtonProps#smallIcon:member", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "smallIcon?: " - }, - { - "kind": "Content", - "text": "boolean" - }, - { - "kind": "Content", - "text": ";" - } - ], - "isReadonly": false, - "isOptional": true, - "releaseTag": "Public", - "name": "smallIcon", - "propertyTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - } - }, - { - "kind": "PropertySignature", - "canonicalReference": "@tldraw/tldraw!TLUiButtonProps#spinner:member", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "spinner?: " - }, - { - "kind": "Content", - "text": "boolean" - }, - { - "kind": "Content", - "text": ";" - } - ], - "isReadonly": false, - "isOptional": true, - "releaseTag": "Public", - "name": "spinner", - "propertyTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - } - }, { "kind": "PropertySignature", "canonicalReference": "@tldraw/tldraw!TLUiButtonProps#type:member", @@ -17002,6 +17184,41 @@ "endIndex": 7 } }, + { + "kind": "TypeAlias", + "canonicalReference": "@tldraw/tldraw!TLUiComponentsProviderProps:type", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export type TLUiComponentsProviderProps = " + }, + { + "kind": "Content", + "text": "{\n overrides?: " + }, + { + "kind": "Reference", + "text": "TLUiComponents", + "canonicalReference": "@tldraw/tldraw!TLUiComponents:type" + }, + { + "kind": "Content", + "text": ";\n children: any;\n}" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/context/components.tsx", + "releaseTag": "Public", + "name": "TLUiComponentsProviderProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 4 + } + }, { "kind": "Interface", "canonicalReference": "@tldraw/tldraw!TLUiContextMenuProps:interface", @@ -17242,7 +17459,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Dialog.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDialog.tsx", "releaseTag": "Public", "name": "TLUiDialogBodyProps", "typeTokenRange": { @@ -17268,7 +17485,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Dialog.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDialog.tsx", "releaseTag": "Public", "name": "TLUiDialogFooterProps", "typeTokenRange": { @@ -17294,7 +17511,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/.tsbuild-api/lib/ui/components/primitives/Dialog.d.ts", + "fileUrlPath": "packages/tldraw/.tsbuild-api/lib/ui/components/primitives/TldrawUiDialog.d.ts", "releaseTag": "Public", "name": "TLUiDialogHeaderProps", "typeTokenRange": { @@ -17436,7 +17653,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Dialog.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDialog.tsx", "releaseTag": "Public", "name": "TLUiDialogTitleProps", "typeTokenRange": { @@ -17454,7 +17671,7 @@ "text": "export interface TLUiDropdownMenuCheckboxItemProps " } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx", "releaseTag": "Public", "name": "TLUiDropdownMenuCheckboxItemProps", "preserveMemberOrder": false, @@ -17624,7 +17841,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx", "releaseTag": "Public", "name": "TLUiDropdownMenuContentProps", "typeTokenRange": { @@ -17650,7 +17867,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx", "releaseTag": "Public", "name": "TLUiDropdownMenuGroupProps", "typeTokenRange": { @@ -17665,23 +17882,41 @@ "excerptTokens": [ { "kind": "Content", - "text": "export interface TLUiDropdownMenuItemProps extends " - }, - { - "kind": "Reference", - "text": "TLUiButtonProps", - "canonicalReference": "@tldraw/tldraw!TLUiButtonProps:interface" - }, - { - "kind": "Content", - "text": " " + "text": "export interface TLUiDropdownMenuItemProps " } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx", "releaseTag": "Public", "name": "TLUiDropdownMenuItemProps", "preserveMemberOrder": false, "members": [ + { + "kind": "PropertySignature", + "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuItemProps#children:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "children: " + }, + { + "kind": "Content", + "text": "any" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": false, + "releaseTag": "Public", + "name": "children", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, { "kind": "PropertySignature", "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuItemProps#noClose:member", @@ -17710,173 +17945,6 @@ } } ], - "extendsTokenRanges": [ - { - "startIndex": 1, - "endIndex": 2 - } - ] - }, - { - "kind": "Interface", - "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuRadioItemProps:interface", - "docComment": "/**\n * @public\n */\n", - "excerptTokens": [ - { - "kind": "Content", - "text": "export interface TLUiDropdownMenuRadioItemProps " - } - ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", - "releaseTag": "Public", - "name": "TLUiDropdownMenuRadioItemProps", - "preserveMemberOrder": false, - "members": [ - { - "kind": "PropertySignature", - "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuRadioItemProps#checked:member", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "checked?: " - }, - { - "kind": "Content", - "text": "boolean" - }, - { - "kind": "Content", - "text": ";" - } - ], - "isReadonly": false, - "isOptional": true, - "releaseTag": "Public", - "name": "checked", - "propertyTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - } - }, - { - "kind": "PropertySignature", - "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuRadioItemProps#children:member", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "children: " - }, - { - "kind": "Content", - "text": "any" - }, - { - "kind": "Content", - "text": ";" - } - ], - "isReadonly": false, - "isOptional": false, - "releaseTag": "Public", - "name": "children", - "propertyTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - } - }, - { - "kind": "PropertySignature", - "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuRadioItemProps#disabled:member", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "disabled?: " - }, - { - "kind": "Content", - "text": "boolean" - }, - { - "kind": "Content", - "text": ";" - } - ], - "isReadonly": false, - "isOptional": true, - "releaseTag": "Public", - "name": "disabled", - "propertyTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - } - }, - { - "kind": "PropertySignature", - "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuRadioItemProps#onSelect:member", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "onSelect?: " - }, - { - "kind": "Content", - "text": "(e: " - }, - { - "kind": "Reference", - "text": "Event", - "canonicalReference": "!Event:interface" - }, - { - "kind": "Content", - "text": ") => void" - }, - { - "kind": "Content", - "text": ";" - } - ], - "isReadonly": false, - "isOptional": true, - "releaseTag": "Public", - "name": "onSelect", - "propertyTypeTokenRange": { - "startIndex": 1, - "endIndex": 4 - } - }, - { - "kind": "PropertySignature", - "canonicalReference": "@tldraw/tldraw!TLUiDropdownMenuRadioItemProps#title:member", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "title: " - }, - { - "kind": "Content", - "text": "string" - }, - { - "kind": "Content", - "text": ";" - } - ], - "isReadonly": false, - "isOptional": false, - "releaseTag": "Public", - "name": "title", - "propertyTypeTokenRange": { - "startIndex": 1, - "endIndex": 2 - } - } - ], "extendsTokenRanges": [] }, { @@ -17897,7 +17965,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx", "releaseTag": "Public", "name": "TLUiDropdownMenuRootProps", "typeTokenRange": { @@ -17923,7 +17991,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx", "releaseTag": "Public", "name": "TLUiDropdownMenuSubProps", "typeTokenRange": { @@ -17949,7 +18017,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx", "releaseTag": "Public", "name": "TLUiDropdownMenuSubTriggerProps", "typeTokenRange": { @@ -17964,19 +18032,10 @@ "excerptTokens": [ { "kind": "Content", - "text": "export interface TLUiDropdownMenuTriggerProps extends " - }, - { - "kind": "Reference", - "text": "TLUiButtonProps", - "canonicalReference": "@tldraw/tldraw!TLUiButtonProps:interface" - }, - { - "kind": "Content", - "text": " " + "text": "export interface TLUiDropdownMenuTriggerProps " } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx", "releaseTag": "Public", "name": "TLUiDropdownMenuTriggerProps", "preserveMemberOrder": false, @@ -18009,12 +18068,7 @@ } } ], - "extendsTokenRanges": [ - { - "startIndex": 1, - "endIndex": 2 - } - ] + "extendsTokenRanges": [] }, { "kind": "TypeAlias", @@ -20004,7 +20058,7 @@ "text": " " } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Icon.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiIcon.tsx", "releaseTag": "Public", "name": "TLUiIconProps", "preserveMemberOrder": false, @@ -20234,7 +20288,7 @@ "text": "export interface TLUiInputProps " } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Input.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiInput.tsx", "releaseTag": "Public", "name": "TLUiInputProps", "preserveMemberOrder": false, @@ -20731,6 +20785,51 @@ ], "extendsTokenRanges": [] }, + { + "kind": "Interface", + "canonicalReference": "@tldraw/tldraw!TLUiKbdProps:interface", + "docComment": "/**\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export interface TLUiKbdProps " + } + ], + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiKbd.tsx", + "releaseTag": "Public", + "name": "TLUiKbdProps", + "preserveMemberOrder": false, + "members": [ + { + "kind": "PropertySignature", + "canonicalReference": "@tldraw/tldraw!TLUiKbdProps#children:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "children: " + }, + { + "kind": "Content", + "text": "string" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": false, + "releaseTag": "Public", + "name": "children", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + } + ], + "extendsTokenRanges": [] + }, { "kind": "TypeAlias", "canonicalReference": "@tldraw/tldraw!TLUiKeyboardShortcutsDialogProps:type", @@ -20856,7 +20955,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuCheckboxItem.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx", "releaseTag": "Public", "name": "TLUiMenuCheckboxItemProps", "typeParameters": [ @@ -20933,7 +21032,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuContext.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx", "releaseTag": "Public", "name": "TLUiMenuContextProviderProps", "typeTokenRange": { @@ -20975,7 +21074,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuGroup.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx", "releaseTag": "Public", "name": "TLUiMenuGroupProps", "typeParameters": [ @@ -21064,7 +21163,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuItem.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx", "releaseTag": "Public", "name": "TLUiMenuItemProps", "typeParameters": [ @@ -21130,7 +21229,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuSubmenu.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.tsx", "releaseTag": "Public", "name": "TLUiMenuSubmenuProps", "typeParameters": [ @@ -21299,7 +21398,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Popover.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiPopover.tsx", "releaseTag": "Public", "name": "TLUiPopoverContentProps", "typeTokenRange": { @@ -21334,7 +21433,7 @@ "text": ";" } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Popover.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiPopover.tsx", "releaseTag": "Public", "name": "TLUiPopoverProps", "typeTokenRange": { @@ -21349,19 +21448,10 @@ "excerptTokens": [ { "kind": "Content", - "text": "export interface TLUiPopoverTriggerProps extends " - }, - { - "kind": "Reference", - "text": "TLUiButtonProps", - "canonicalReference": "@tldraw/tldraw!TLUiButtonProps:interface" - }, - { - "kind": "Content", - "text": " " + "text": "export interface TLUiPopoverTriggerProps " } ], - "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/Popover.tsx", + "fileUrlPath": "packages/tldraw/src/lib/ui/components/primitives/TldrawUiPopover.tsx", "releaseTag": "Public", "name": "TLUiPopoverTriggerProps", "preserveMemberOrder": false, @@ -21395,12 +21485,7 @@ } } ], - "extendsTokenRanges": [ - { - "startIndex": 1, - "endIndex": 2 - } - ] + "extendsTokenRanges": [] }, { "kind": "TypeAlias", @@ -23530,6 +23615,33 @@ "text": "ComponentType", "canonicalReference": "@types/react!React.ComponentType:type" }, + { + "kind": "Content", + "text": " | null;\n MenuPanel: " + }, + { + "kind": "Reference", + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" + }, + { + "kind": "Content", + "text": " | null;\n TopPanel: " + }, + { + "kind": "Reference", + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" + }, + { + "kind": "Content", + "text": " | null;\n SharePanel: " + }, + { + "kind": "Reference", + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" + }, { "kind": "Content", "text": " | null;\n}>" @@ -23542,7 +23654,7 @@ "fileUrlPath": "packages/tldraw/src/lib/ui/context/components.tsx", "returnTypeTokenRange": { "startIndex": 1, - "endIndex": 49 + "endIndex": 55 }, "releaseTag": "Public", "overloadIndex": 1, diff --git a/packages/tldraw/src/index.ts b/packages/tldraw/src/index.ts index 480d28eb0..df6b9044e 100644 --- a/packages/tldraw/src/index.ts +++ b/packages/tldraw/src/index.ts @@ -42,9 +42,6 @@ export { TldrawUi, type TldrawUiBaseProps, type TldrawUiProps } from './lib/ui/T export { setDefaultUiAssetUrls, type TLUiAssetUrlOverrides } from './lib/ui/assetUrls' export { OfflineIndicator } from './lib/ui/components/OfflineIndicator/OfflineIndicator' export { Spinner } from './lib/ui/components/Spinner' -export { Button, type TLUiButtonProps } from './lib/ui/components/primitives/Button' -export { Icon, type TLUiIconProps } from './lib/ui/components/primitives/Icon' -export { Input, type TLUiInputProps } from './lib/ui/components/primitives/Input' export { TldrawUiContextProvider, type TldrawUiContextProviderProps, @@ -99,7 +96,7 @@ export { export { type TLUiTranslationKey } from './lib/ui/hooks/useTranslation/TLUiTranslationKey' export { type TLUiTranslation } from './lib/ui/hooks/useTranslation/translations' export { - useTranslation as useTranslation, + useTranslation, type TLUiTranslationContextType, } from './lib/ui/hooks/useTranslation/useTranslation' export { type TLUiIconType } from './lib/ui/icon-types' @@ -137,35 +134,13 @@ export { DefaultMinimap } from './lib/ui/components/Minimap/DefaultMinimap' // Helper to unwrap label from action items export { unwrapLabel } from './lib/ui/context/actions' -// General UI components for building menus -export { - TldrawUiMenuCheckboxItem, - type TLUiMenuCheckboxItemProps, -} from './lib/ui/components/menus/TldrawUiMenuCheckboxItem' -export { - TldrawUiMenuContextProvider, - type TLUiMenuContextProviderProps, -} from './lib/ui/components/menus/TldrawUiMenuContext' -export { - TldrawUiMenuGroup, - type TLUiMenuGroupProps, -} from './lib/ui/components/menus/TldrawUiMenuGroup' -export { - TldrawUiMenuItem, - type TLUiMenuItemProps, -} from './lib/ui/components/menus/TldrawUiMenuItem' -export { - TldrawUiMenuSubmenu, - type TLUiMenuSubmenuProps, -} from './lib/ui/components/menus/TldrawUiMenuSubmenu' - export { TldrawUiComponentsProvider, useTldrawUiComponents, type TLUiComponents, + type TLUiComponentsProviderProps, } from './lib/ui/context/components' -// Menus / UI elements that can be customized export { DefaultPageMenu } from './lib/ui/components/PageMenu/DefaultPageMenu' export { @@ -236,45 +211,108 @@ export { DefaultToolbar } from './lib/ui/components/Toolbar/DefaultToolbar' export { type TLComponents } from './lib/Tldraw' +/* ------------------- Primitives ------------------- */ + +// Button export { - DialogBody, - DialogCloseButton, - DialogFooter, - DialogHeader, - DialogTitle, + TldrawUiButton, + type TLUiButtonProps, +} from './lib/ui/components/primitives/Button/TldrawUiButton' +export { + TldrawUiButtonCheck, + type TLUiButtonCheckProps, +} from './lib/ui/components/primitives/Button/TldrawUiButtonCheck' +export { + TldrawUiButtonIcon, + type TLUiButtonIconProps, +} from './lib/ui/components/primitives/Button/TldrawUiButtonIcon' +export { + TldrawUiButtonLabel, + type TLUiButtonLabelProps, +} from './lib/ui/components/primitives/Button/TldrawUiButtonLabel' + +// Button picker +export { + TldrawUiButtonPicker, + type TLUiButtonPickerProps, +} from './lib/ui/components/primitives/TldrawUiButtonPicker' + +// Dialog +export { + TldrawUiDialogBody, + TldrawUiDialogCloseButton, + TldrawUiDialogFooter, + TldrawUiDialogHeader, + TldrawUiDialogTitle, type TLUiDialogBodyProps, type TLUiDialogFooterProps, type TLUiDialogHeaderProps, type TLUiDialogTitleProps, -} from './lib/ui/components/primitives/Dialog' +} from './lib/ui/components/primitives/TldrawUiDialog' +// Dropdown Menu export { - DropdownMenuCheckboxItem, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuIndicator, - DropdownMenuItem, - DropdownMenuRadioItem, - DropdownMenuRoot, - DropdownMenuSub, - DropdownMenuSubTrigger, - DropdownMenuTrigger, + TldrawUiDropdownMenuCheckboxItem, + TldrawUiDropdownMenuContent, + TldrawUiDropdownMenuGroup, + TldrawUiDropdownMenuIndicator, + TldrawUiDropdownMenuItem, + TldrawUiDropdownMenuRoot, + TldrawUiDropdownMenuSub, + TldrawUiDropdownMenuSubTrigger, + TldrawUiDropdownMenuTrigger, type TLUiDropdownMenuCheckboxItemProps, type TLUiDropdownMenuContentProps, type TLUiDropdownMenuGroupProps, type TLUiDropdownMenuItemProps, - type TLUiDropdownMenuRadioItemProps, type TLUiDropdownMenuRootProps, type TLUiDropdownMenuSubProps, type TLUiDropdownMenuSubTriggerProps, type TLUiDropdownMenuTriggerProps, -} from './lib/ui/components/primitives/DropdownMenu' +} from './lib/ui/components/primitives/TldrawUiDropdownMenu' +// Icon +export { TldrawUiIcon, type TLUiIconProps } from './lib/ui/components/primitives/TldrawUiIcon' + +// Input +export { TldrawUiInput, type TLUiInputProps } from './lib/ui/components/primitives/TldrawUiInput' + +// Kbd +export { TldrawUiKbd, type TLUiKbdProps } from './lib/ui/components/primitives/TldrawUiKbd' + +// Popover export { - Popover, - PopoverContent, - PopoverTrigger, + TldrawUiPopover, + TldrawUiPopoverContent, + TldrawUiPopoverTrigger, type TLUiPopoverContentProps, type TLUiPopoverProps, type TLUiPopoverTriggerProps, -} from './lib/ui/components/primitives/Popover' +} from './lib/ui/components/primitives/TldrawUiPopover' + +// Slider +export { TldrawUiSlider, type TLUiSliderProps } from './lib/ui/components/primitives/TldrawUiSlider' + +/* ----------------- Menu Primitives ---------------- */ + +// General UI components for building menus +export { + TldrawUiMenuCheckboxItem, + type TLUiMenuCheckboxItemProps, +} from './lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem' +export { + TldrawUiMenuContextProvider, + type TLUiMenuContextProviderProps, +} from './lib/ui/components/primitives/menus/TldrawUiMenuContext' +export { + TldrawUiMenuGroup, + type TLUiMenuGroupProps, +} from './lib/ui/components/primitives/menus/TldrawUiMenuGroup' +export { + TldrawUiMenuItem, + type TLUiMenuItemProps, +} from './lib/ui/components/primitives/menus/TldrawUiMenuItem' +export { + TldrawUiMenuSubmenu, + type TLUiMenuSubmenuProps, +} from './lib/ui/components/primitives/menus/TldrawUiMenuSubmenu' diff --git a/packages/tldraw/src/lib/ui/components/StylePanel/styles.tsx b/packages/tldraw/src/lib/styles.tsx similarity index 99% rename from packages/tldraw/src/lib/ui/components/StylePanel/styles.tsx rename to packages/tldraw/src/lib/styles.tsx index 4c8ed7be9..6a4f2b684 100644 --- a/packages/tldraw/src/lib/ui/components/StylePanel/styles.tsx +++ b/packages/tldraw/src/lib/styles.tsx @@ -3,6 +3,7 @@ export type StyleValuesForUi = readonly { readonly icon: string }[] +// todo: default styles prop? export const STYLES = { color: [ { value: 'black', icon: 'color' }, diff --git a/packages/tldraw/src/lib/ui.css b/packages/tldraw/src/lib/ui.css index ed9f1219e..089d0b787 100644 --- a/packages/tldraw/src/lib/ui.css +++ b/packages/tldraw/src/lib/ui.css @@ -75,6 +75,10 @@ opacity: 1; } +.tlui-button__icon + .tlui-button__label { + margin-left: var(--space-2); +} + @media (hover: hover) { .tlui-button::after { background-color: var(--color-muted-2); @@ -127,46 +131,6 @@ position: relative; } -/* Icon button */ - -.tlui-button__icon { - height: 40px; - width: 40px; - min-height: 40px; - min-width: 40px; - padding: 0px; -} - -.tlui-button__icon-left { - margin-right: var(--space-2); -} - -/* Hinted */ - -.tlui-button__icon[data-state='hinted']::after { - background: var(--color-hint); - opacity: 1; - /* box-shadow: inset 0 0 0 1px var(--color-muted-1); */ -} - -.tlui-button__icon[data-state='hinted']:not(:disabled, :focus-visible):active::after { - background: var(--color-hint); - opacity: 1; - /* box-shadow: inset 0 0 0 1px var(--color-text-3); */ -} - -@media (hover: hover) { - .tlui-button__icon::after { - inset: 4px; - border-radius: var(--radius-2); - } - - .tlui-button__icon[data-state='hinted']:not(:disabled, :focus-visible):hover::after { - background: var(--color-hint); - /* box-shadow: inset 0 0 0 1px var(--color-text-3); */ - } -} - /* Menu button */ .tlui-button__menu { @@ -1225,11 +1189,6 @@ width: 128px; } -.tlui-page-menu__trigger > span { - flex-grow: 2; - margin-right: var(--space-4); -} - .tlui-page-menu__header { display: flex; flex-direction: row; @@ -1373,17 +1332,29 @@ .tlui-page_menu__item__submenu[data-isediting='true'] { display: block; + opacity: 1; +} + +.tlui-page_menu__item__submenu > .tlui-button { + opacity: 0; +} + +.tlui-page-menu__item__button .tlui-button__icon { + margin-right: 4px; } @media (hover: hover) { .tlui-page_menu__item__submenu { - opacity: 0; display: block; } - .tlui-page_menu__item__submenu:hover, - .tlui-page-menu__item:focus-within > .tlui-page_menu__item__submenu, - .tlui-page_menu__item__sortable:focus-within > .tlui-page_menu__item__submenu { + .tlui-page_menu__item__submenu[data-isediting='true'] > .tlui-button { + opacity: 0; + } + + .tlui-page_menu__item__submenu > .tlui-button[data-state='open'], + .tlui-page_menu__item__submenu:hover > .tlui-button, + .tlui-page_menu__item__sortable:focus-within > .tlui-page_menu__item__submenu > .tlui-button { opacity: 1; } } diff --git a/packages/tldraw/src/lib/ui/TldrawUi.tsx b/packages/tldraw/src/lib/ui/TldrawUi.tsx index 6369270f1..3901bee98 100644 --- a/packages/tldraw/src/lib/ui/TldrawUi.tsx +++ b/packages/tldraw/src/lib/ui/TldrawUi.tsx @@ -6,9 +6,9 @@ import { TLUiAssetUrlOverrides } from './assetUrls' import { DebugPanel } from './components/DebugPanel' import { Dialogs } from './components/Dialogs' import { FollowingIndicator } from './components/FollowingIndicator' -import { MenuZone } from './components/MenuZone' import { ToastViewport, Toasts } from './components/Toasts' -import { Button } from './components/primitives/Button' +import { TldrawUiButton } from './components/primitives/Button/TldrawUiButton' +import { TldrawUiButtonIcon } from './components/primitives/Button/TldrawUiButtonIcon' import { PORTRAIT_BREAKPOINT } from './constants' import { TldrawUiContextProvider, @@ -20,6 +20,7 @@ import { TLUiComponents, useTldrawUiComponents } from './context/components' import { useNativeClipboardEvents } from './hooks/useClipboardEvents' import { useEditorEvents } from './hooks/useEditorEvents' import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts' +import { useReadonly } from './hooks/useReadonly' import { useRelevantStyles } from './hooks/useRevelantStyles' import { useTranslation } from './hooks/useTranslation/useTranslation' @@ -51,17 +52,6 @@ export interface TldrawUiBaseProps { */ components?: TLUiComponents - /** - * A component to use for the share zone (will be deprecated) - */ - shareZone?: ReactNode - - /** - * A component to use for the top zone (will be deprecated) - * @internal - */ - topZone?: ReactNode - /** * Additional items to add to the debug menu (will be deprecated) */ @@ -75,8 +65,6 @@ export interface TldrawUiBaseProps { * @public */ export const TldrawUi = React.memo(function TldrawUi({ - shareZone, - topZone, renderDebugMenuItems, children, hideUi, @@ -85,12 +73,7 @@ export const TldrawUi = React.memo(function TldrawUi({ }: TldrawUiProps) { return ( - + {children} @@ -121,17 +104,24 @@ const TldrawUiInner = React.memo(function TldrawUiInner({ ) }) -const TldrawUiContent = React.memo(function TldrawUI({ shareZone, topZone }: TldrawUiContentProps) { +const TldrawUiContent = React.memo(function TldrawUI() { const editor = useEditor() const msg = useTranslation() const breakpoint = useBreakpoint() - const isReadonlyMode = useValue('isReadonlyMode', () => editor.getInstanceState().isReadonly, [ - editor, - ]) + const isReadonlyMode = useReadonly() const isFocusMode = useValue('focus', () => editor.getInstanceState().isFocusMode, [editor]) const isDebugMode = useValue('debug', () => editor.getInstanceState().isDebugMode, [editor]) - const { StylePanel, Toolbar, HelpMenu, NavigationPanel, HelperButtons } = useTldrawUiComponents() + const { + SharePanel, + TopPanel, + MenuPanel, + StylePanel, + Toolbar, + HelpMenu, + NavigationPanel, + HelperButtons, + } = useTldrawUiComponents() useKeyboardShortcuts() useNativeClipboardEvents() @@ -149,24 +139,25 @@ const TldrawUiContent = React.memo(function TldrawUI({ shareZone, topZone }: Tld > {isFocusMode ? (
-
) : ( <>
- + {MenuPanel && } {HelperButtons && }
-
{topZone}
+
{TopPanel && }
- {shareZone} + {SharePanel && } {StylePanel && breakpoint >= PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && ( <_StylePanel /> )} diff --git a/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx b/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx index 48f7a91ba..1d21d9b60 100644 --- a/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx @@ -4,8 +4,14 @@ import { PORTRAIT_BREAKPOINT } from '../../constants' import { useBreakpoint } from '../../context/breakpoints' import { useReadonly } from '../../hooks/useReadonly' import { useTranslation } from '../../hooks/useTranslation/useTranslation' -import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext' -import { Popover, PopoverContent, PopoverTrigger } from '../primitives/Popover' +import { TldrawUiButton } from '../primitives/Button/TldrawUiButton' +import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon' +import { + TldrawUiPopover, + TldrawUiPopoverContent, + TldrawUiPopoverTrigger, +} from '../primitives/TldrawUiPopover' +import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext' import { DefaultActionsMenuContent } from './DefaultActionsMenuContent' /** @public */ @@ -37,16 +43,17 @@ export const DefaultActionsMenu = memo(function DefaultActionsMenu({ if (isReadonlyMode && !isInAcceptableReadonlyState) return return ( - - - + + + + + + = PORTRAIT_BREAKPOINT.TABLET ? 'bottom' : 'top'} sideOffset={6} > @@ -55,7 +62,7 @@ export const DefaultActionsMenu = memo(function DefaultActionsMenu({ {content}
- - + + ) }) diff --git a/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx b/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx index 4c55d3ee2..2e02b2d7d 100644 --- a/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx +++ b/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx @@ -9,7 +9,7 @@ import { useThreeStackableItems, useUnlockedSelectedShapesCount, } from '../../hooks/menu-hooks' -import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem' +import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem' /** @public */ export function DefaultActionsMenuContent() { diff --git a/packages/tldraw/src/lib/ui/components/ContextMenu/DefaultContextMenu.tsx b/packages/tldraw/src/lib/ui/components/ContextMenu/DefaultContextMenu.tsx index f333a4653..ac5abb240 100644 --- a/packages/tldraw/src/lib/ui/components/ContextMenu/DefaultContextMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/ContextMenu/DefaultContextMenu.tsx @@ -2,7 +2,7 @@ import * as _ContextMenu from '@radix-ui/react-context-menu' import { preventDefault, useContainer, useEditor } from '@tldraw/editor' import { memo, useCallback } from 'react' import { useMenuIsOpen } from '../../hooks/useMenuIsOpen' -import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext' +import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext' import { DefaultContextMenuContent } from './DefaultContextMenuContent' /** @public */ diff --git a/packages/tldraw/src/lib/ui/components/ContextMenu/DefaultContextMenuContent.tsx b/packages/tldraw/src/lib/ui/components/ContextMenu/DefaultContextMenuContent.tsx index f321d11bf..ef3e2fe07 100644 --- a/packages/tldraw/src/lib/ui/components/ContextMenu/DefaultContextMenuContent.tsx +++ b/packages/tldraw/src/lib/ui/components/ContextMenu/DefaultContextMenuContent.tsx @@ -17,7 +17,7 @@ import { ToggleLockMenuItem, UngroupMenuItem, } from '../menu-items' -import { TldrawUiMenuGroup } from '../menus/TldrawUiMenuGroup' +import { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup' /** @public */ export function DefaultContextMenuContent() { diff --git a/packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenu.tsx b/packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenu.tsx index a747fc1fd..a579b3c3d 100644 --- a/packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenu.tsx @@ -1,10 +1,12 @@ import { useTranslation } from '../../hooks/useTranslation/useTranslation' -import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext' +import { TldrawUiButton } from '../primitives/Button/TldrawUiButton' +import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon' import { - DropdownMenuContent, - DropdownMenuRoot, - DropdownMenuTrigger, -} from '../primitives/DropdownMenu' + TldrawUiDropdownMenuContent, + TldrawUiDropdownMenuRoot, + TldrawUiDropdownMenuTrigger, +} from '../primitives/TldrawUiDropdownMenu' +import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext' import { DefaultDebugMenuContent } from './DefaultDebugMenuContent' /** @public */ @@ -18,13 +20,17 @@ export function DefaultDebugMenu({ children }: TLUiDebugMenuProps) { const content = children ?? return ( - - - + + + + + + + {content} - - + + ) } diff --git a/packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx b/packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx index 4ffdc509d..3fdc54dfd 100644 --- a/packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx +++ b/packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx @@ -1,4 +1,3 @@ -import { DialogTitle } from '@radix-ui/react-dialog' import { DebugFlag, Editor, @@ -15,12 +14,20 @@ import React from 'react' import { useDialogs } from '../../context/dialogs' import { useToasts } from '../../context/toasts' import { untranslated } from '../../hooks/useTranslation/useTranslation' -import { TldrawUiMenuCheckboxItem } from '../menus/TldrawUiMenuCheckboxItem' -import { TldrawUiMenuGroup } from '../menus/TldrawUiMenuGroup' -import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem' -import { TldrawUiMenuSubmenu } from '../menus/TldrawUiMenuSubmenu' -import { Button } from '../primitives/Button' -import { DialogBody, DialogCloseButton, DialogFooter, DialogHeader } from '../primitives/Dialog' +import { TldrawUiButton } from '../primitives/Button/TldrawUiButton' +import { TldrawUiButtonCheck } from '../primitives/Button/TldrawUiButtonCheck' +import { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel' +import { + TldrawUiDialogBody, + TldrawUiDialogCloseButton, + TldrawUiDialogFooter, + TldrawUiDialogHeader, + TldrawUiDialogTitle, +} from '../primitives/TldrawUiDialog' +import { TldrawUiMenuCheckboxItem } from '../primitives/menus/TldrawUiMenuCheckboxItem' +import { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup' +import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem' +import { TldrawUiMenuSubmenu } from '../primitives/menus/TldrawUiMenuSubmenu' /** @public */ export function DefaultDebugMenuContent() { @@ -225,29 +232,29 @@ function ExampleDialog({ return ( <> - - {title} - - - {body} - + + {title} + + + {body} + {displayDontShowAgain && ( - + + Don't show again + )} - - - + + {cancel} + + onContinue()}> + {confirm} + + ) } diff --git a/packages/tldraw/src/lib/ui/components/EditLinkDialog.tsx b/packages/tldraw/src/lib/ui/components/EditLinkDialog.tsx index 3609cb4fe..7ce1f0600 100644 --- a/packages/tldraw/src/lib/ui/components/EditLinkDialog.tsx +++ b/packages/tldraw/src/lib/ui/components/EditLinkDialog.tsx @@ -3,9 +3,15 @@ import { T, TLBaseShape, track, useEditor } from '@tldraw/editor' import { useCallback, useEffect, useRef, useState } from 'react' import { TLUiDialogProps } from '../context/dialogs' import { useTranslation } from '../hooks/useTranslation/useTranslation' -import { Button } from './primitives/Button' -import { DialogBody, DialogCloseButton, DialogFooter, DialogHeader } from './primitives/Dialog' -import { Input } from './primitives/Input' +import { TldrawUiButton } from './primitives/Button/TldrawUiButton' +import { TldrawUiButtonLabel } from './primitives/Button/TldrawUiButtonLabel' +import { + TldrawUiDialogBody, + TldrawUiDialogCloseButton, + TldrawUiDialogFooter, + TldrawUiDialogHeader, +} from './primitives/TldrawUiDialog' +import { TldrawUiInput } from './primitives/TldrawUiInput' // A url can either be invalid, or valid with a protocol, or valid without a protocol. // For example, "aol.com" would be valid with a protocol () @@ -134,13 +140,13 @@ export const EditLinkDialogInner = track(function EditLinkDialogInner({ return ( <> - + {msg('edit-link-title')} - - - + + +
-
{urlInputState.valid ? msg('edit-link-detail') : msg('edit-link-invalid-url')}
- - - + + + + {msg('edit-link-cancel')} + {isRemoving ? ( - + + {msg('edit-link-clear')} + ) : ( - + {msg('edit-link-save')} + )} - + ) }) diff --git a/packages/tldraw/src/lib/ui/components/EmbedDialog.tsx b/packages/tldraw/src/lib/ui/components/EmbedDialog.tsx index 5376225d0..d0cf3b87f 100644 --- a/packages/tldraw/src/lib/ui/components/EmbedDialog.tsx +++ b/packages/tldraw/src/lib/ui/components/EmbedDialog.tsx @@ -5,10 +5,16 @@ import { TLEmbedResult, getEmbedInfo } from '../../utils/embeds/embeds' import { useAssetUrls } from '../context/asset-urls' import { TLUiDialogProps } from '../context/dialogs' import { untranslated, useTranslation } from '../hooks/useTranslation/useTranslation' -import { Button } from './primitives/Button' -import { DialogBody, DialogCloseButton, DialogFooter, DialogHeader } from './primitives/Dialog' -import { Icon } from './primitives/Icon' -import { Input } from './primitives/Input' +import { TldrawUiButton } from './primitives/Button/TldrawUiButton' +import { TldrawUiButtonLabel } from './primitives/Button/TldrawUiButtonLabel' +import { + TldrawUiDialogBody, + TldrawUiDialogCloseButton, + TldrawUiDialogFooter, + TldrawUiDialogHeader, +} from './primitives/TldrawUiDialog' +import { TldrawUiIcon } from './primitives/TldrawUiIcon' +import { TldrawUiInput } from './primitives/TldrawUiInput' export const EmbedDialog = track(function EmbedDialog({ onClose }: TLUiDialogProps) { const editor = useEditor() @@ -30,18 +36,18 @@ export const EmbedDialog = track(function EmbedDialog({ onClose }: TLUiDialogPro return ( <> - + {embedDefinition ? `${msg('embed-title')} — ${embedDefinition.title}` : msg('embed-title')} - - + + {embedDefinition ? ( <> - - + Learn more. - + )}
@@ -86,23 +92,25 @@ export const EmbedDialog = track(function EmbedDialog({ onClose }: TLUiDialogPro {showError ? msg('embed-invalid-url') : '\xa0'} )} - - - + ) })} - + )} diff --git a/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenu.tsx b/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenu.tsx index f07176f1f..6ff3a9842 100644 --- a/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenu.tsx @@ -2,12 +2,14 @@ import { memo } from 'react' import { PORTRAIT_BREAKPOINT } from '../../constants' import { useBreakpoint } from '../../context/breakpoints' import { useTranslation } from '../../hooks/useTranslation/useTranslation' -import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext' +import { TldrawUiButton } from '../primitives/Button/TldrawUiButton' +import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon' import { - DropdownMenuContent, - DropdownMenuRoot, - DropdownMenuTrigger, -} from '../primitives/DropdownMenu' + TldrawUiDropdownMenuContent, + TldrawUiDropdownMenuRoot, + TldrawUiDropdownMenuTrigger, +} from '../primitives/TldrawUiDropdownMenu' +import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext' import { DefaultHelpMenuContent } from './DefaultHelpMenuContent' /** @public */ @@ -29,19 +31,18 @@ export const DefaultHelpMenu = memo(function DefaultHelpMenu({ children }: TLUiH return (
- - - + + + + + + + {content} - - + +
) }) diff --git a/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenuContent.tsx b/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenuContent.tsx index 00e1d6247..5bee1d632 100644 --- a/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenuContent.tsx +++ b/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenuContent.tsx @@ -1,7 +1,7 @@ import { useTldrawUiComponents } from '../../context/components' import { useDialogs } from '../../context/dialogs' import { LanguageMenu } from '../LanguageMenu' -import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem' +import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem' /** @public */ export function DefaultHelpMenuContent() { diff --git a/packages/tldraw/src/lib/ui/components/HelperButtons/BackToContent.tsx b/packages/tldraw/src/lib/ui/components/HelperButtons/BackToContent.tsx index 5d63bec95..f2968a86f 100644 --- a/packages/tldraw/src/lib/ui/components/HelperButtons/BackToContent.tsx +++ b/packages/tldraw/src/lib/ui/components/HelperButtons/BackToContent.tsx @@ -1,7 +1,7 @@ import { useEditor } from '@tldraw/editor' import { useEffect, useState } from 'react' import { useActions } from '../../context/actions' -import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem' +import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem' export function BackToContent() { const editor = useEditor() diff --git a/packages/tldraw/src/lib/ui/components/HelperButtons/DefaultHelperButtons.tsx b/packages/tldraw/src/lib/ui/components/HelperButtons/DefaultHelperButtons.tsx index 27cd436ae..6196a4448 100644 --- a/packages/tldraw/src/lib/ui/components/HelperButtons/DefaultHelperButtons.tsx +++ b/packages/tldraw/src/lib/ui/components/HelperButtons/DefaultHelperButtons.tsx @@ -1,4 +1,4 @@ -import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext' +import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext' import { DefaultHelperButtonsContent } from './DefaultHelperButtonsContent' /** @public */ diff --git a/packages/tldraw/src/lib/ui/components/HelperButtons/ExitPenMode.tsx b/packages/tldraw/src/lib/ui/components/HelperButtons/ExitPenMode.tsx index 941c9719f..87c852d8a 100644 --- a/packages/tldraw/src/lib/ui/components/HelperButtons/ExitPenMode.tsx +++ b/packages/tldraw/src/lib/ui/components/HelperButtons/ExitPenMode.tsx @@ -1,6 +1,6 @@ import { useEditor, useValue } from '@tldraw/editor' import { useActions } from '../../context/actions' -import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem' +import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem' export function ExitPenMode() { const editor = useEditor() diff --git a/packages/tldraw/src/lib/ui/components/HelperButtons/StopFollowing.tsx b/packages/tldraw/src/lib/ui/components/HelperButtons/StopFollowing.tsx index 6542c64ef..aceb89c0f 100644 --- a/packages/tldraw/src/lib/ui/components/HelperButtons/StopFollowing.tsx +++ b/packages/tldraw/src/lib/ui/components/HelperButtons/StopFollowing.tsx @@ -1,6 +1,6 @@ import { useEditor, useValue } from '@tldraw/editor' import { useActions } from '../../context/actions' -import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem' +import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem' export function StopFollowing() { const editor = useEditor() diff --git a/packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.tsx b/packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.tsx index afa321595..3db99d2c5 100644 --- a/packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.tsx +++ b/packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.tsx @@ -2,8 +2,12 @@ import { DialogTitle } from '@radix-ui/react-dialog' import { memo } from 'react' import { TLUiDialogProps } from '../../context/dialogs' import { useTranslation } from '../../hooks/useTranslation/useTranslation' -import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext' -import { DialogBody, DialogCloseButton, DialogHeader } from '../primitives/Dialog' +import { + TldrawUiDialogBody, + TldrawUiDialogCloseButton, + TldrawUiDialogHeader, +} from '../primitives/TldrawUiDialog' +import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext' import { DefaultKeyboardShortcutsDialogContent } from './DefaultKeyboardShortcutsDialogContent' /** @public */ @@ -21,15 +25,15 @@ export const DefaultKeyboardShortcutsDialog = memo(function DefaultKeyboardShort return ( <> - + {msg('shortcuts-title')} - - - + + + {content} - +
) diff --git a/packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx b/packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx index 45bf77108..f27a8c75e 100644 --- a/packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +++ b/packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx @@ -1,7 +1,7 @@ import { useActions } from '../../context/actions' import { useTools } from '../../hooks/useTools' -import { TldrawUiMenuGroup } from '../menus/TldrawUiMenuGroup' -import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem' +import { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup' +import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem' /** @public */ export function DefaultKeyboardShortcutsDialogContent() { diff --git a/packages/tldraw/src/lib/ui/components/LanguageMenu.tsx b/packages/tldraw/src/lib/ui/components/LanguageMenu.tsx index b3262a822..f4a8c8db5 100644 --- a/packages/tldraw/src/lib/ui/components/LanguageMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/LanguageMenu.tsx @@ -1,9 +1,9 @@ import { useEditor } from '@tldraw/editor' import { useUiEvents } from '../context/events' import { useLanguages } from '../hooks/useTranslation/useLanguages' -import { TldrawUiMenuCheckboxItem } from './menus/TldrawUiMenuCheckboxItem' -import { TldrawUiMenuGroup } from './menus/TldrawUiMenuGroup' -import { TldrawUiMenuSubmenu } from './menus/TldrawUiMenuSubmenu' +import { TldrawUiMenuCheckboxItem } from './primitives/menus/TldrawUiMenuCheckboxItem' +import { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup' +import { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu' export function LanguageMenu() { const editor = useEditor() diff --git a/packages/tldraw/src/lib/ui/components/MainMenu/DefaultMainMenu.tsx b/packages/tldraw/src/lib/ui/components/MainMenu/DefaultMainMenu.tsx index aa44e6233..9075ef22f 100644 --- a/packages/tldraw/src/lib/ui/components/MainMenu/DefaultMainMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/MainMenu/DefaultMainMenu.tsx @@ -3,8 +3,9 @@ import { useContainer } from '@tldraw/editor' import { memo } from 'react' import { useMenuIsOpen } from '../../hooks/useMenuIsOpen' import { useTranslation } from '../../hooks/useTranslation/useTranslation' -import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext' -import { Button } from '../primitives/Button' +import { TldrawUiButton } from '../primitives/Button/TldrawUiButton' +import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon' +import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext' import { DefaultMainMenuContent } from './DefaultMainMenuContent' /** @public */ @@ -26,14 +27,9 @@ export const DefaultMainMenu = memo(function DefaultMainMenu({ children }: TLUiM return ( <_Dropdown.Root dir="ltr" open={isOpen} onOpenChange={onOpenChange} modal={false}> <_Dropdown.Trigger asChild dir="ltr"> -
)} @@ -314,24 +319,25 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() { transform: `translate(0px, ${position.y + position.offsetY}px)`, }} > - + + {page.name} + ) : (
- + + {page.name} + {!isReadonlyMode && (
- - + + ) }) diff --git a/packages/tldraw/src/lib/ui/components/PageMenu/PageItemInput.tsx b/packages/tldraw/src/lib/ui/components/PageMenu/PageItemInput.tsx index adbe71b39..7ba5999d2 100644 --- a/packages/tldraw/src/lib/ui/components/PageMenu/PageItemInput.tsx +++ b/packages/tldraw/src/lib/ui/components/PageMenu/PageItemInput.tsx @@ -1,6 +1,6 @@ import { TLPageId, useEditor } from '@tldraw/editor' import { useCallback, useRef } from 'react' -import { Input } from '../primitives/Input' +import { TldrawUiInput } from '../primitives/TldrawUiInput' export const PageItemInput = function PageItemInput({ name, @@ -31,7 +31,7 @@ export const PageItemInput = function PageItemInput({ ) return ( - (rInput.current = el)} defaultValue={name} diff --git a/packages/tldraw/src/lib/ui/components/PageMenu/PageItemSubmenu.tsx b/packages/tldraw/src/lib/ui/components/PageMenu/PageItemSubmenu.tsx index eb49acd06..c867baa59 100644 --- a/packages/tldraw/src/lib/ui/components/PageMenu/PageItemSubmenu.tsx +++ b/packages/tldraw/src/lib/ui/components/PageMenu/PageItemSubmenu.tsx @@ -1,14 +1,16 @@ import { MAX_PAGES, PageRecordType, TLPageId, track, useEditor } from '@tldraw/editor' import { useCallback } from 'react' import { useTranslation } from '../../hooks/useTranslation/useTranslation' -import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext' -import { TldrawUiMenuGroup } from '../menus/TldrawUiMenuGroup' -import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem' +import { TldrawUiButton } from '../primitives/Button/TldrawUiButton' +import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon' import { - DropdownMenuContent, - DropdownMenuRoot, - DropdownMenuTrigger, -} from '../primitives/DropdownMenu' + TldrawUiDropdownMenuContent, + TldrawUiDropdownMenuRoot, + TldrawUiDropdownMenuTrigger, +} from '../primitives/TldrawUiDropdownMenu' +import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext' +import { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup' +import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem' import { onMovePage } from './edit-pages-shared' export interface PageItemSubmenuProps { @@ -48,13 +50,13 @@ export const PageItemSubmenu = track(function PageItemSubmenu({ }, [editor, item]) return ( - - - + + + + + + + {onRename && ( @@ -87,7 +89,7 @@ export const PageItemSubmenu = track(function PageItemSubmenu({ )} - - + + ) }) diff --git a/packages/tldraw/src/lib/ui/components/QuickActions/DefaultQuickActions.tsx b/packages/tldraw/src/lib/ui/components/QuickActions/DefaultQuickActions.tsx index 31421c493..dd567949b 100644 --- a/packages/tldraw/src/lib/ui/components/QuickActions/DefaultQuickActions.tsx +++ b/packages/tldraw/src/lib/ui/components/QuickActions/DefaultQuickActions.tsx @@ -1,5 +1,5 @@ import { memo } from 'react' -import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext' +import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext' import { DefaultQuickActionsContent } from './DefaultQuickActionsContent' /** @public */ diff --git a/packages/tldraw/src/lib/ui/components/QuickActions/DefaultQuickActionsContent.tsx b/packages/tldraw/src/lib/ui/components/QuickActions/DefaultQuickActionsContent.tsx index a99762cbd..c755f7e12 100644 --- a/packages/tldraw/src/lib/ui/components/QuickActions/DefaultQuickActionsContent.tsx +++ b/packages/tldraw/src/lib/ui/components/QuickActions/DefaultQuickActionsContent.tsx @@ -2,7 +2,7 @@ import { useEditor, useValue } from '@tldraw/editor' import { useActions } from '../../context/actions' import { useCanRedo, useCanUndo, useUnlockedSelectedShapesCount } from '../../hooks/menu-hooks' import { useReadonly } from '../../hooks/useReadonly' -import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem' +import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem' /** @public */ export function DefaultQuickActionsContent() { diff --git a/packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx b/packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx index a200d2cbb..b516a7c64 100644 --- a/packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx +++ b/packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx @@ -33,7 +33,7 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({ return (
diff --git a/packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx b/packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx index 7f0a105d7..43fa0013e 100644 --- a/packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +++ b/packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx @@ -17,15 +17,16 @@ import { useEditor, } from '@tldraw/editor' import React from 'react' +import { STYLES } from '../../../styles' import { useUiEvents } from '../../context/events' import { useRelevantStyles } from '../../hooks/useRevelantStyles' import { useTranslation } from '../../hooks/useTranslation/useTranslation' -import { Button } from '../primitives/Button' -import { ButtonPicker } from '../primitives/ButtonPicker' -import { Slider } from '../primitives/Slider' +import { TldrawUiButton } from '../primitives/Button/TldrawUiButton' +import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon' +import { TldrawUiButtonPicker } from '../primitives/TldrawUiButtonPicker' +import { TldrawUiSlider } from '../primitives/TldrawUiSlider' import { DoubleDropdownPicker } from './DoubleDropdownPicker' import { DropdownPicker } from './DropdownPicker' -import { STYLES } from './styles' /** @public */ export type TLUiStylePanelContentProps = { @@ -137,7 +138,7 @@ function CommonStylePickerSet({ aria-label="style panel styles" > {color === undefined ? null : ( - )} {opacity === undefined ? null : ( - = 0 ? opacityIndex : tldrawSupportedOpacities.length - 1} label={ @@ -162,7 +163,7 @@ function CommonStylePickerSet({ {showPickers && (
{fill === undefined ? null : ( - )} {dash === undefined ? null : ( - )} {size === undefined ? null : ( - {font === undefined ? null : ( - -
{verticalAlign === undefined ? ( -
) diff --git a/packages/tldraw/src/lib/ui/components/StylePanel/DropdownPicker.tsx b/packages/tldraw/src/lib/ui/components/StylePanel/DropdownPicker.tsx index c8e6d7517..0137cf668 100644 --- a/packages/tldraw/src/lib/ui/components/StylePanel/DropdownPicker.tsx +++ b/packages/tldraw/src/lib/ui/components/StylePanel/DropdownPicker.tsx @@ -1,16 +1,18 @@ import { SharedStyle, StyleProp } from '@tldraw/editor' import * as React from 'react' +import { StyleValuesForUi } from '../../../styles' import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey' import { useTranslation } from '../../hooks/useTranslation/useTranslation' import { TLUiIconType } from '../../icon-types' -import { TLUiButtonProps } from '../primitives/Button' +import { TLUiButtonProps, TldrawUiButton } from '../primitives/Button/TldrawUiButton' +import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon' +import { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel' import { - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuRoot, - DropdownMenuTrigger, -} from '../primitives/DropdownMenu' -import { StyleValuesForUi } from './styles' + TldrawUiDropdownMenuContent, + TldrawUiDropdownMenuItem, + TldrawUiDropdownMenuRoot, + TldrawUiDropdownMenuTrigger, +} from '../primitives/TldrawUiDropdownMenu' interface DropdownPickerProps { id: string @@ -40,35 +42,38 @@ export const DropdownPicker = React.memo(function DropdownPicker - - + + + + {labelStr} + + + +
{items.map((item) => { return ( - onValueChange(style, item.value, false)} - /> + + onValueChange(style, item.value, false)} + > + + + ) })}
- - + + ) }) diff --git a/packages/tldraw/src/lib/ui/components/Toasts.tsx b/packages/tldraw/src/lib/ui/components/Toasts.tsx index c848a64ff..51906ba96 100644 --- a/packages/tldraw/src/lib/ui/components/Toasts.tsx +++ b/packages/tldraw/src/lib/ui/components/Toasts.tsx @@ -3,8 +3,9 @@ import * as React from 'react' import { TLUiToast, useToasts } from '../context/toasts' import { useTranslation } from '../hooks/useTranslation/useTranslation' import { TLUiIconType } from '../icon-types' -import { Button } from './primitives/Button' -import { Icon } from './primitives/Icon' +import { TldrawUiButton } from './primitives/Button/TldrawUiButton' +import { TldrawUiButtonLabel } from './primitives/Button/TldrawUiButtonLabel' +import { TldrawUiIcon } from './primitives/TldrawUiIcon' function Toast({ toast }: { toast: TLUiToast }) { const { removeToast } = useToasts() @@ -26,7 +27,7 @@ function Toast({ toast }: { toast: TLUiToast }) { > {toast.icon && (
- +
)}
@@ -40,22 +41,28 @@ function Toast({ toast }: { toast: TLUiToast }) {
{toast.actions.map((action, i) => ( - + + {action.label} + ))} - + + {toast.closeLabel ?? msg('toast.close')} +
)}
{!hasActions && ( - + + {toast.closeLabel ?? msg('toast.close')} + )} diff --git a/packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbar.tsx b/packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbar.tsx index 1d83a7b3d..4cabc4353 100644 --- a/packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbar.tsx +++ b/packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbar.tsx @@ -10,15 +10,16 @@ import { useReadonly } from '../../hooks/useReadonly' import { TLUiToolbarItem, useToolbarSchema } from '../../hooks/useToolbarSchema' import { TLUiToolItem } from '../../hooks/useTools' import { useTranslation } from '../../hooks/useTranslation/useTranslation' +import { kbdStr } from '../../kbd-utils' import { MobileStylePanel } from '../MobileStylePanel' -import { Button } from '../primitives/Button' +import { TldrawUiButton } from '../primitives/Button/TldrawUiButton' +import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon' import { - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuRoot, - DropdownMenuTrigger, -} from '../primitives/DropdownMenu' -import { kbdStr } from '../primitives/shared' + TldrawUiDropdownMenuContent, + TldrawUiDropdownMenuItem, + TldrawUiDropdownMenuRoot, + TldrawUiDropdownMenuTrigger, +} from '../primitives/TldrawUiDropdownMenu' import { ToggleToolLockedButton } from './ToggleToolLockedButton' /** @public */ @@ -143,18 +144,21 @@ export const DefaultToolbar = memo(function DefaultToolbar() { )} /> {/* The dropdown to select everything else */} - - - + + + + + + + - - + + ) : null}
@@ -180,18 +184,22 @@ const OverflowToolsContent = track(function OverflowToolsContent({
{toolbarItems.map(({ toolItem: { id, meta, kbd, label, onSelect, icon } }) => { return ( - onSelect('toolbar')} - title={label ? `${msg(label)} ${kbd ? kbdStr(kbd) : ''}` : ''} - icon={icon} - /> + > + onSelect('toolbar')} + data-testid={`tools.more.${id}`} + title={label ? `${msg(label)} ${kbd ? kbdStr(kbd) : ''}` : ''} + > + + + ) })}
@@ -208,21 +216,22 @@ function ToolbarButton({ isSelected: boolean }) { return ( - + ) } ) diff --git a/packages/tldraw/src/lib/ui/components/ZoomMenu/DefaultZoomMenuContent.tsx b/packages/tldraw/src/lib/ui/components/ZoomMenu/DefaultZoomMenuContent.tsx index aaefb4949..3d94f2498 100644 --- a/packages/tldraw/src/lib/ui/components/ZoomMenu/DefaultZoomMenuContent.tsx +++ b/packages/tldraw/src/lib/ui/components/ZoomMenu/DefaultZoomMenuContent.tsx @@ -1,6 +1,6 @@ import { useActions } from '../../context/actions' import { ZoomTo100MenuItem, ZoomToFitMenuItem, ZoomToSelectionMenuItem } from '../menu-items' -import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem' +import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem' /** @public */ export function DefaultZoomMenuContent() { diff --git a/packages/tldraw/src/lib/ui/components/menu-items.tsx b/packages/tldraw/src/lib/ui/components/menu-items.tsx index 652fa2ff6..b7fcd8bf7 100644 --- a/packages/tldraw/src/lib/ui/components/menu-items.tsx +++ b/packages/tldraw/src/lib/ui/components/menu-items.tsx @@ -21,10 +21,10 @@ import { useThreeStackableItems, useUnlockedSelectedShapesCount, } from '../hooks/menu-hooks' -import { TldrawUiMenuCheckboxItem } from './menus/TldrawUiMenuCheckboxItem' -import { TldrawUiMenuGroup } from './menus/TldrawUiMenuGroup' -import { TldrawUiMenuItem } from './menus/TldrawUiMenuItem' -import { TldrawUiMenuSubmenu } from './menus/TldrawUiMenuSubmenu' +import { TldrawUiMenuCheckboxItem } from './primitives/menus/TldrawUiMenuCheckboxItem' +import { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup' +import { TldrawUiMenuItem } from './primitives/menus/TldrawUiMenuItem' +import { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu' /* -------------------- Selection ------------------- */ diff --git a/packages/tldraw/src/lib/ui/components/primitives/Button.tsx b/packages/tldraw/src/lib/ui/components/primitives/Button.tsx deleted file mode 100644 index b3d405f03..000000000 --- a/packages/tldraw/src/lib/ui/components/primitives/Button.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { useEditor } from '@tldraw/editor' -import classnames from 'classnames' -import * as React from 'react' -import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey' -import { useTranslation } from '../../hooks/useTranslation/useTranslation' -import { TLUiIconType } from '../../icon-types' -import { Spinner } from '../Spinner' -import { Icon } from './Icon' -import { Kbd } from './Kbd' - -/** @public */ -export interface TLUiButtonProps extends React.HTMLAttributes { - loading?: boolean // TODO: loading spinner - disabled?: boolean - label?: TLUiTranslationKey | Exclude - icon?: TLUiIconType | Exclude - spinner?: boolean - iconLeft?: TLUiIconType | Exclude - smallIcon?: boolean - kbd?: string - isChecked?: boolean - invertIcon?: boolean - type: 'normal' | 'primary' | 'danger' | 'low' | 'icon' | 'tool' | 'menu' | 'help' -} - -/** @public */ -export const Button = React.forwardRef(function Button( - { - label, - icon, - invertIcon, - iconLeft, - smallIcon, - kbd, - isChecked = false, - type, - children, - spinner, - disabled, - ...props - }, - ref -) { - const msg = useTranslation() - const labelStr = label ? msg(label) : '' - const editor = useEditor() - - // If the button is getting disabled while it's focused, move focus to the editor - // so that the user can continue using keyboard shortcuts - const current = (ref as React.MutableRefObject)?.current - if (disabled && current === document.activeElement) { - editor.getContainer().focus() - } - - return ( - - ) -}) diff --git a/packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButton.tsx b/packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButton.tsx new file mode 100644 index 000000000..73681b403 --- /dev/null +++ b/packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButton.tsx @@ -0,0 +1,36 @@ +import { useEditor } from '@tldraw/editor' +import classnames from 'classnames' +import * as React from 'react' + +/** @public */ +export interface TLUiButtonProps extends React.HTMLAttributes { + disabled?: boolean + type: 'normal' | 'primary' | 'danger' | 'low' | 'icon' | 'tool' | 'menu' | 'help' +} + +/** @public */ +export const TldrawUiButton = React.forwardRef( + function TldrawUiButton({ children, disabled, type, ...props }, ref) { + const editor = useEditor() + + // If the button is getting disabled while it's focused, move focus to the editor + // so that the user can continue using keyboard shortcuts + const current = (ref as React.MutableRefObject)?.current + if (disabled && current === document.activeElement) { + editor.getContainer().focus() + } + + return ( + + ) + } +) diff --git a/packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonCheck.tsx b/packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonCheck.tsx new file mode 100644 index 000000000..8909cd0b3 --- /dev/null +++ b/packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonCheck.tsx @@ -0,0 +1,11 @@ +import { TldrawUiIcon } from '../TldrawUiIcon' + +/** @public */ +export type TLUiButtonCheckProps = { checked: boolean } + +/** @public */ +export function TldrawUiButtonCheck({ checked }: TLUiButtonCheckProps) { + return ( + + ) +} diff --git a/packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx b/packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx new file mode 100644 index 000000000..93e9736bf --- /dev/null +++ b/packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx @@ -0,0 +1,15 @@ +import { TldrawUiIcon } from '../TldrawUiIcon' + +/** @public */ +export type TLUiButtonIconProps = { + icon: string + small?: boolean + invertIcon?: boolean +} + +/** @public */ +export function TldrawUiButtonIcon({ icon, small, invertIcon }: TLUiButtonIconProps) { + return ( + + ) +} diff --git a/packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonLabel.tsx b/packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonLabel.tsx new file mode 100644 index 000000000..7687e9426 --- /dev/null +++ b/packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonLabel.tsx @@ -0,0 +1,7 @@ +/** @public */ +export type TLUiButtonLabelProps = { children?: any } + +/** @public */ +export function TldrawUiButtonLabel({ children }: TLUiButtonLabelProps) { + return {children} +} diff --git a/packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonSpinner.tsx b/packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonSpinner.tsx new file mode 100644 index 000000000..266505356 --- /dev/null +++ b/packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonSpinner.tsx @@ -0,0 +1,6 @@ +import { Spinner } from '../../Spinner' + +/** @public */ +export function TldrawUiButtonSpinner() { + return +} diff --git a/packages/tldraw/src/lib/ui/components/primitives/Input.tsx b/packages/tldraw/src/lib/ui/components/primitives/Input.tsx deleted file mode 100644 index fe4b528c7..000000000 --- a/packages/tldraw/src/lib/ui/components/primitives/Input.tsx +++ /dev/null @@ -1,165 +0,0 @@ -import { stopEventPropagation, useEditor } from '@tldraw/editor' -import classNames from 'classnames' -import * as React from 'react' -import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey' -import { useTranslation } from '../../hooks/useTranslation/useTranslation' -import { TLUiIconType } from '../../icon-types' -import { Icon } from './Icon' - -/** @public */ -export interface TLUiInputProps { - disabled?: boolean - label?: TLUiTranslationKey | Exclude - icon?: TLUiIconType | Exclude - iconLeft?: TLUiIconType | Exclude - autofocus?: boolean - autoselect?: boolean - children?: any - defaultValue?: string - placeholder?: string - onComplete?: (value: string) => void - onValueChange?: (value: string) => void - onCancel?: (value: string) => void - onBlur?: (value: string) => void - className?: string - /** - * Usually on iOS when you focus an input, the browser will adjust the viewport to bring the input - * into view. Sometimes this doesn't work properly though - for example, if the input is newly - * created, iOS seems to have a hard time adjusting the viewport for it. This prop allows you to - * opt-in to some extra code to manually bring the input into view when the visual viewport of the - * browser changes, but we don't want to use it everywhere because generally the native behavior - * looks nicer in scenarios where it's sufficient. - */ - shouldManuallyMaintainScrollPositionWhenFocused?: boolean - value?: string -} - -/** @public */ -export const Input = React.forwardRef(function Input( - { - className, - label, - icon, - iconLeft, - autoselect = false, - autofocus = false, - defaultValue, - placeholder, - onComplete, - onValueChange, - onCancel, - onBlur, - shouldManuallyMaintainScrollPositionWhenFocused = false, - children, - value, - }, - ref -) { - const editor = useEditor() - const rInputRef = React.useRef(null) - - // combine rInputRef and ref - React.useImperativeHandle(ref, () => rInputRef.current as HTMLInputElement) - - const msg = useTranslation() - const rInitialValue = React.useRef(defaultValue ?? '') - const rCurrentValue = React.useRef(defaultValue ?? '') - - const [isFocused, setIsFocused] = React.useState(false) - const handleFocus = React.useCallback( - (e: React.FocusEvent) => { - setIsFocused(true) - const elm = e.currentTarget as HTMLInputElement - rCurrentValue.current = elm.value - requestAnimationFrame(() => { - if (autoselect) { - elm.select() - } - }) - }, - [autoselect] - ) - - const handleChange = React.useCallback( - (e: React.ChangeEvent) => { - const value = e.currentTarget.value - rCurrentValue.current = value - onValueChange?.(value) - }, - [onValueChange] - ) - - const handleKeyUp = React.useCallback( - (e: React.KeyboardEvent) => { - switch (e.key) { - case 'Enter': { - e.currentTarget.blur() - stopEventPropagation(e) - onComplete?.(e.currentTarget.value) - break - } - case 'Escape': { - e.currentTarget.value = rInitialValue.current - e.currentTarget.blur() - stopEventPropagation(e) - onCancel?.(e.currentTarget.value) - break - } - } - }, - [onComplete, onCancel] - ) - - const handleBlur = React.useCallback( - (e: React.FocusEvent) => { - setIsFocused(false) - const value = e.currentTarget.value - onBlur?.(value) - }, - [onBlur] - ) - - React.useEffect(() => { - if (!editor.environment.isIos) return - - const visualViewport = window.visualViewport - if (isFocused && shouldManuallyMaintainScrollPositionWhenFocused && visualViewport) { - const onViewportChange = () => { - rInputRef.current?.scrollIntoView({ block: 'center' }) - } - visualViewport.addEventListener('resize', onViewportChange) - visualViewport.addEventListener('scroll', onViewportChange) - - requestAnimationFrame(() => { - rInputRef.current?.scrollIntoView({ block: 'center' }) - }) - - return () => { - visualViewport.removeEventListener('resize', onViewportChange) - visualViewport.removeEventListener('scroll', onViewportChange) - } - } - }, [editor, isFocused, shouldManuallyMaintainScrollPositionWhenFocused]) - - return ( -
- {children} - {label && } - {iconLeft && } - - {icon && } -
- ) -}) diff --git a/packages/tldraw/src/lib/ui/components/primitives/ButtonPicker.tsx b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx similarity index 84% rename from packages/tldraw/src/lib/ui/components/primitives/ButtonPicker.tsx rename to packages/tldraw/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx index a4a332a69..f4d435a75 100644 --- a/packages/tldraw/src/lib/ui/components/primitives/ButtonPicker.tsx +++ b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx @@ -8,16 +8,15 @@ import { useValue, } from '@tldraw/editor' import classNames from 'classnames' -import * as React from 'react' -import { useRef } from 'react' +import { memo, useMemo, useRef } from 'react' +import { StyleValuesForUi } from '../../../styles' import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey' import { useTranslation } from '../../hooks/useTranslation/useTranslation' -import { TLUiIconType } from '../../icon-types' -import { StyleValuesForUi } from '../StylePanel/styles' -import { Button } from './Button' +import { TldrawUiButton } from './Button/TldrawUiButton' +import { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon' -/** @internal */ -export interface ButtonPickerProps { +/** @public */ +export interface TLUiButtonPickerProps { title: string uiType: string style: StyleProp @@ -26,7 +25,10 @@ export interface ButtonPickerProps { onValueChange: (style: StyleProp, value: T, squashing: boolean) => void } -function _ButtonPicker(props: ButtonPickerProps) { +/** @public */ +export const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker( + props: TLUiButtonPickerProps +) { const { uiType, items, @@ -46,7 +48,7 @@ function _ButtonPicker(props: ButtonPickerProps) { handleButtonPointerDown, handleButtonPointerEnter, handleButtonPointerUp, - } = React.useMemo(() => { + } = useMemo(() => { const handlePointerUp = () => { rPointing.current = false window.removeEventListener('pointerup', handlePointerUp) @@ -99,7 +101,7 @@ function _ButtonPicker(props: ButtonPickerProps) { return (
{items.map((item) => ( -
) -} - -/** @internal */ -export const ButtonPicker = React.memo(_ButtonPicker) as typeof _ButtonPicker +}) diff --git a/packages/tldraw/src/lib/ui/components/primitives/Dialog.tsx b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiDialog.tsx similarity index 67% rename from packages/tldraw/src/lib/ui/components/primitives/Dialog.tsx rename to packages/tldraw/src/lib/ui/components/primitives/TldrawUiDialog.tsx index 98f10e3fa..ffc2f7f81 100644 --- a/packages/tldraw/src/lib/ui/components/primitives/Dialog.tsx +++ b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiDialog.tsx @@ -1,7 +1,7 @@ import * as _Dialog from '@radix-ui/react-dialog' import classNames from 'classnames' -import { Button } from './Button' -import { Icon } from './Icon' +import { TldrawUiButton } from './Button/TldrawUiButton' +import { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon' /** @public */ export type TLUiDialogHeaderProps = { @@ -10,7 +10,7 @@ export type TLUiDialogHeaderProps = { } /** @public */ -export function DialogHeader({ className, children }: TLUiDialogHeaderProps) { +export function TldrawUiDialogHeader({ className, children }: TLUiDialogHeaderProps) { return
{children}
} @@ -21,7 +21,7 @@ export type TLUiDialogTitleProps = { } /** @public */ -export function DialogTitle({ className, children }: TLUiDialogTitleProps) { +export function TldrawUiDialogTitle({ className, children }: TLUiDialogTitleProps) { return ( <_Dialog.DialogTitle dir="ltr" className={classNames('tlui-dialog__header__title', className)}> {children} @@ -30,17 +30,17 @@ export function DialogTitle({ className, children }: TLUiDialogTitleProps) { } /** @public */ -export function DialogCloseButton() { +export function TldrawUiDialogCloseButton() { return (
<_Dialog.DialogClose data-testid="dialog.close" dir="ltr" asChild> - + +
) @@ -54,7 +54,7 @@ export type TLUiDialogBodyProps = { } /** @public */ -export function DialogBody({ className, children, style }: TLUiDialogBodyProps) { +export function TldrawUiDialogBody({ className, children, style }: TLUiDialogBodyProps) { return (
{children} @@ -69,6 +69,6 @@ export type TLUiDialogFooterProps = { } /** @public */ -export function DialogFooter({ className, children }: TLUiDialogFooterProps) { +export function TldrawUiDialogFooter({ className, children }: TLUiDialogFooterProps) { return
{children}
} diff --git a/packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx similarity index 68% rename from packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx rename to packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx index 43097555e..61694ca2e 100644 --- a/packages/tldraw/src/lib/ui/components/primitives/DropdownMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx @@ -1,8 +1,10 @@ import * as _DropdownMenu from '@radix-ui/react-dropdown-menu' import { preventDefault, useContainer } from '@tldraw/editor' import { useMenuIsOpen } from '../../hooks/useMenuIsOpen' -import { Button, TLUiButtonProps } from './Button' -import { Icon } from './Icon' +import { TldrawUiButton } from './Button/TldrawUiButton' +import { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon' +import { TldrawUiButtonLabel } from './Button/TldrawUiButtonLabel' +import { TldrawUiIcon } from './TldrawUiIcon' /** @public */ export type TLUiDropdownMenuRootProps = { @@ -13,7 +15,7 @@ export type TLUiDropdownMenuRootProps = { } /** @public */ -export function DropdownMenuRoot({ +export function TldrawUiDropdownMenuRoot({ id, children, modal = false, @@ -34,20 +36,21 @@ export function DropdownMenuRoot({ } /** @public */ -export interface TLUiDropdownMenuTriggerProps extends TLUiButtonProps { +export interface TLUiDropdownMenuTriggerProps { children?: any } /** @public */ -export function DropdownMenuTrigger({ children, ...rest }: TLUiDropdownMenuTriggerProps) { +export function TldrawUiDropdownMenuTrigger({ children, ...rest }: TLUiDropdownMenuTriggerProps) { return ( <_DropdownMenu.Trigger dir="ltr" asChild // Firefox fix: Stop the dropdown immediately closing after touch onTouchEnd={(e) => preventDefault(e)} + {...rest} > - + {children} ) } @@ -63,7 +66,7 @@ export type TLUiDropdownMenuContentProps = { } /** @public */ -export function DropdownMenuContent({ +export function TldrawUiDropdownMenuContent({ side = 'bottom', align = 'start', sideOffset = 8, @@ -92,7 +95,7 @@ export function DropdownMenuContent({ export type TLUiDropdownMenuSubProps = { id: string; children: any } /** @public */ -export function DropdownMenuSub({ id, children }: TLUiDropdownMenuSubProps) { +export function TldrawUiDropdownMenuSub({ id, children }: TLUiDropdownMenuSubProps) { const [open, onOpenChange] = useMenuIsOpen(id) return ( @@ -111,21 +114,22 @@ export type TLUiDropdownMenuSubTriggerProps = { } /** @public */ -export function DropdownMenuSubTrigger({ +export function TldrawUiDropdownMenuSubTrigger({ label, title, disabled, }: TLUiDropdownMenuSubTriggerProps) { return ( <_DropdownMenu.SubTrigger dir="ltr" asChild> - + {children} ) } @@ -50,7 +49,7 @@ export type TLUiPopoverContentProps = { } /** @public */ -export function PopoverContent({ +export function TldrawUiPopoverContent({ side, children, align = 'center', diff --git a/packages/tldraw/src/lib/ui/components/primitives/Slider.tsx b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiSlider.tsx similarity index 93% rename from packages/tldraw/src/lib/ui/components/primitives/Slider.tsx rename to packages/tldraw/src/lib/ui/components/primitives/TldrawUiSlider.tsx index 420fd30fe..e7174e734 100644 --- a/packages/tldraw/src/lib/ui/components/primitives/Slider.tsx +++ b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiSlider.tsx @@ -5,7 +5,7 @@ import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKe import { useTranslation } from '../../hooks/useTranslation/useTranslation' /** @internal */ -export interface SliderProps { +export interface TLUiSliderProps { steps: number value: number | null label: string @@ -15,7 +15,7 @@ export interface SliderProps { } /** @internal */ -export const Slider = memo(function Slider(props: SliderProps) { +export const TldrawUiSlider = memo(function Slider(props: TLUiSliderProps) { const { title, steps, value, label, onValueChange } = props const editor = useEditor() const msg = useTranslation() diff --git a/packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuCheckboxItem.tsx b/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx similarity index 77% rename from packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuCheckboxItem.tsx rename to packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx index d828a1903..3b362ed7f 100644 --- a/packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuCheckboxItem.tsx +++ b/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx @@ -1,13 +1,13 @@ import * as _ContextMenu from '@radix-ui/react-context-menu' import * as _DropdownMenu from '@radix-ui/react-dropdown-menu' import { preventDefault } from '@tldraw/editor' -import { unwrapLabel } from '../../context/actions' -import { TLUiEventSource } from '../../context/events' -import { useReadonly } from '../../hooks/useReadonly' -import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey' -import { useTranslation } from '../../hooks/useTranslation/useTranslation' -import { Icon } from '../primitives/Icon' -import { Kbd } from '../primitives/Kbd' +import { unwrapLabel } from '../../../context/actions' +import { TLUiEventSource } from '../../../context/events' +import { useReadonly } from '../../../hooks/useReadonly' +import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey' +import { useTranslation } from '../../../hooks/useTranslation/useTranslation' +import { TldrawUiIcon } from '../TldrawUiIcon' +import { TldrawUiKbd } from '../TldrawUiKbd' import { useTldrawUiMenuContext } from './TldrawUiMenuContext' /** @public */ @@ -63,13 +63,13 @@ export function TldrawUiMenuCheckboxItem< disabled={disabled} checked={checked} > - + {labelStr && ( {labelStr} )} - {kbd && {kbd}} + {kbd && {kbd}} ) } @@ -87,13 +87,13 @@ export function TldrawUiMenuCheckboxItem< disabled={disabled} checked={checked} > - + {labelStr && ( {labelStr} )} - {kbd && {kbd}} + {kbd && {kbd}} ) } diff --git a/packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuContext.tsx b/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx similarity index 93% rename from packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuContext.tsx rename to packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx index 2d4442333..a7e63158e 100644 --- a/packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuContext.tsx +++ b/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx @@ -1,5 +1,5 @@ import { createContext, useContext } from 'react' -import { TLUiEventSource } from '../../context/events' +import { TLUiEventSource } from '../../../context/events' /** @public */ export type TldrawUiMenuContextType = diff --git a/packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuGroup.tsx b/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx similarity index 79% rename from packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuGroup.tsx rename to packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx index a02e5aafc..1b9533959 100644 --- a/packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuGroup.tsx +++ b/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx @@ -1,8 +1,8 @@ import { ContextMenuGroup } from '@radix-ui/react-context-menu' -import { unwrapLabel } from '../../context/actions' -import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey' -import { useTranslation } from '../../hooks/useTranslation/useTranslation' -import { DropdownMenuGroup } from '../primitives/DropdownMenu' +import { unwrapLabel } from '../../../context/actions' +import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey' +import { useTranslation } from '../../../hooks/useTranslation/useTranslation' +import { TldrawUiDropdownMenuGroup } from '../TldrawUiDropdownMenu' import { useTldrawUiMenuContext } from './TldrawUiMenuContext' /** @public */ @@ -33,9 +33,12 @@ export function TldrawUiMenuGroup({ id, label, small = false, children }: TLUiMe } case 'menu': { return ( - + {children} - + ) } case 'context-menu': { diff --git a/packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuItem.tsx b/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx similarity index 66% rename from packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuItem.tsx rename to packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx index ac6738fc1..f5b104d92 100644 --- a/packages/tldraw/src/lib/ui/components/menus/TldrawUiMenuItem.tsx +++ b/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx @@ -1,16 +1,18 @@ import { ContextMenuItem } from '@radix-ui/react-context-menu' import { preventDefault } from '@tldraw/editor' import { useState } from 'react' -import { unwrapLabel } from '../../context/actions' -import { TLUiEventSource } from '../../context/events' -import { useReadonly } from '../../hooks/useReadonly' -import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey' -import { useTranslation } from '../../hooks/useTranslation/useTranslation' -import { Spinner } from '../Spinner' -import { Button } from '../primitives/Button' -import { DropdownMenuItem } from '../primitives/DropdownMenu' -import { Kbd } from '../primitives/Kbd' -import { kbdStr } from '../primitives/shared' +import { unwrapLabel } from '../../../context/actions' +import { TLUiEventSource } from '../../../context/events' +import { useReadonly } from '../../../hooks/useReadonly' +import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey' +import { useTranslation } from '../../../hooks/useTranslation/useTranslation' +import { kbdStr } from '../../../kbd-utils' +import { Spinner } from '../../Spinner' +import { TldrawUiButton } from '../Button/TldrawUiButton' +import { TldrawUiButtonIcon } from '../Button/TldrawUiButtonIcon' +import { TldrawUiButtonLabel } from '../Button/TldrawUiButtonLabel' +import { TldrawUiDropdownMenuItem } from '../TldrawUiDropdownMenu' +import { TldrawUiKbd } from '../TldrawUiKbd' import { useTldrawUiMenuContext } from './TldrawUiMenuContext' /** @public */ @@ -90,24 +92,27 @@ export function TldrawUiMenuItem< switch (menuType) { case 'menu': { return ( - { - if (noClose) { - preventDefault(e) - } - if (disableClicks) { - setDisableClicks(false) - } else { - onSelect(sourceId) - } - }} - /> + + { + if (noClose) { + preventDefault(e) + } + if (disableClicks) { + setDisableClicks(false) + } else { + onSelect(sourceId) + } + }} + > + {labelStr} + {kbd && {kbd}} + + ) } case 'context-menu': { @@ -133,37 +138,37 @@ export function TldrawUiMenuItem< {labelStr} - {kbd && {kbd}} + {kbd && {kbd}} {spinner && } ) } case 'panel': { return ( -