diff --git a/apps/examples/src/3-custom-config/CustomConfigExample.tsx b/apps/examples/src/3-custom-config/CustomConfigExample.tsx index 7b37a1a7d..f7ca7a128 100644 --- a/apps/examples/src/3-custom-config/CustomConfigExample.tsx +++ b/apps/examples/src/3-custom-config/CustomConfigExample.tsx @@ -1,4 +1,4 @@ -import { MenuGroup, Tldraw, menuItem, toolbarItem } from '@tldraw/tldraw' +import { TLUiMenuGroup, Tldraw, menuItem, toolbarItem } from '@tldraw/tldraw' import '@tldraw/tldraw/editor.css' import '@tldraw/tldraw/ui.css' import { CardTool } from './CardTool' @@ -44,7 +44,7 @@ export default function CustomConfigExample() { // add it to that before returning the array. const toolsGroup = keyboardShortcutsMenu.find( (group) => group.id === 'shortcuts-dialog.tools' - ) as MenuGroup + ) as TLUiMenuGroup toolsGroup.children.push(menuItem(tools.card)) return keyboardShortcutsMenu }, diff --git a/apps/vscode/editor/src/app.tsx b/apps/vscode/editor/src/app.tsx index 194400591..efbd88f2c 100644 --- a/apps/vscode/editor/src/app.tsx +++ b/apps/vscode/editor/src/app.tsx @@ -9,7 +9,7 @@ import { import { linksUiOverrides } from './utils/links' // eslint-disable-next-line import/no-internal-modules import '@tldraw/editor/editor.css' -import { ContextMenu, MenuSchema, TldrawUi } from '@tldraw/ui' +import { ContextMenu, TLUiMenuSchema, TldrawUi } from '@tldraw/ui' // eslint-disable-next-line import/no-internal-modules import '@tldraw/ui/ui.css' // eslint-disable-next-line import/no-internal-modules @@ -64,7 +64,7 @@ export function WrappedTldrawEditor() { } const menuOverrides = { - menu: (_editor: Editor, schema: MenuSchema, _helpers: any) => { + menu: (_editor: Editor, schema: TLUiMenuSchema, _helpers: any) => { schema.forEach((item) => { if (item.id === 'menu' && item.type === 'group') { item.children = item.children.filter((menuItem) => { diff --git a/apps/vscode/editor/src/utils/links.ts b/apps/vscode/editor/src/utils/links.ts index d8743fca8..8fecce09d 100644 --- a/apps/vscode/editor/src/utils/links.ts +++ b/apps/vscode/editor/src/utils/links.ts @@ -1,4 +1,4 @@ -import { menuGroup, menuItem, TldrawUiOverrides } from '@tldraw/ui' +import { menuGroup, menuItem, TLUiOverrides } from '@tldraw/ui' import { openUrl } from './openUrl' export const GITHUB_URL = 'https://github.com/tldraw/tldraw' @@ -43,7 +43,7 @@ const linksMenuGroup = menuGroup( }) )! -export const linksUiOverrides: TldrawUiOverrides = { +export const linksUiOverrides: TLUiOverrides = { helpMenu(editor, schema) { schema.push(linksMenuGroup) return schema diff --git a/packages/file-format/api-report.md b/packages/file-format/api-report.md index 1667a47ea..400326032 100644 --- a/packages/file-format/api-report.md +++ b/packages/file-format/api-report.md @@ -10,8 +10,8 @@ import { Result } from '@tldraw/utils'; import { SerializedSchema } from '@tldraw/tlstore'; import { TLInstanceId } from '@tldraw/editor'; import { TLStore } from '@tldraw/editor'; -import { TLTranslationKey } from '@tldraw/ui'; -import { ToastsContextType } from '@tldraw/ui'; +import { TLUiToastsContextType } from '@tldraw/ui'; +import { TLUiTranslationKey } from '@tldraw/ui'; import { UnknownRecord } from '@tldraw/tlstore'; // @internal (undocumented) @@ -37,7 +37,7 @@ export interface LegacyTldrawDocument { } // @internal (undocumented) -export function parseAndLoadDocument(editor: Editor, document: string, msg: (id: TLTranslationKey) => string, addToast: ToastsContextType['addToast'], onV1FileLoad?: () => void, forceDarkMode?: boolean): Promise; +export function parseAndLoadDocument(editor: Editor, document: string, msg: (id: TLUiTranslationKey) => string, addToast: TLUiToastsContextType['addToast'], onV1FileLoad?: () => void, forceDarkMode?: boolean): Promise; // @public (undocumented) export function parseTldrawJsonFile({ json, instanceId, store, }: { diff --git a/packages/file-format/src/lib/file.ts b/packages/file-format/src/lib/file.ts index e1d4c06e0..5e6b9b187 100644 --- a/packages/file-format/src/lib/file.ts +++ b/packages/file-format/src/lib/file.ts @@ -16,7 +16,7 @@ import { UnknownRecord, } from '@tldraw/tlstore' import { T } from '@tldraw/tlvalidate' -import { TLTranslationKey, ToastsContextType } from '@tldraw/ui' +import { TLUiToastsContextType, TLUiTranslationKey } from '@tldraw/ui' import { exhaustiveSwitchError, Result } from '@tldraw/utils' import { buildFromV1Document } from './buildFromV1Document' @@ -204,8 +204,8 @@ export async function serializeTldrawJsonBlob(store: TLStore): Promise { export async function parseAndLoadDocument( editor: Editor, document: string, - msg: (id: TLTranslationKey) => string, - addToast: ToastsContextType['addToast'], + msg: (id: TLUiTranslationKey) => string, + addToast: TLUiToastsContextType['addToast'], onV1FileLoad?: () => void, forceDarkMode?: boolean ) { diff --git a/packages/tlschema/api-report.md b/packages/tlschema/api-report.md index e0ec40084..dc6c7d205 100644 --- a/packages/tlschema/api-report.md +++ b/packages/tlschema/api-report.md @@ -364,7 +364,7 @@ export const geoShapeTypeValidator: T.Validator; export const geoValidator: T.Validator<"arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box">; // @public (undocumented) -export function getDefaultTranslationLocale(): TLTranslationLocale; +export function getDefaultTranslationLocale(): TLUiTranslationLocale; // @public (undocumented) export const groupShapeTypeMigrations: Migrations; diff --git a/packages/tlschema/src/translations.ts b/packages/tlschema/src/translations.ts index e53395c80..f2df7e346 100644 --- a/packages/tlschema/src/translations.ts +++ b/packages/tlschema/src/translations.ts @@ -1,21 +1,21 @@ import { LANGUAGES } from './languages' -type TLListedTranslation = { +/** @public */ +export type TLUiLanguage = { readonly locale: string readonly label: string } -type TLListedTranslations = TLListedTranslation[] -type TLTranslationLocale = TLListedTranslations[number]['locale'] +type TLUiTranslationLocale = TLUiLanguage['locale'] /** @public */ -export function getDefaultTranslationLocale(): TLTranslationLocale { +export function getDefaultTranslationLocale(): TLUiTranslationLocale { const locales = typeof window !== 'undefined' ? window.navigator.languages ?? ['en'] : ['en'] return _getDefaultTranslationLocale(locales) } /** @internal */ -export function _getDefaultTranslationLocale(locales: readonly string[]): TLTranslationLocale { +export function _getDefaultTranslationLocale(locales: readonly string[]): TLUiTranslationLocale { for (const locale of locales) { const supportedLocale = getSupportedLocale(locale) if (supportedLocale) { @@ -26,7 +26,7 @@ export function _getDefaultTranslationLocale(locales: readonly string[]): TLTran } /** @public */ -const DEFAULT_LOCALE_REGIONS: { [locale: string]: TLTranslationLocale } = { +const DEFAULT_LOCALE_REGIONS: { [locale: string]: TLUiTranslationLocale } = { zh: 'zh-cn', pt: 'pt-br', ko: 'ko-kr', @@ -34,7 +34,7 @@ const DEFAULT_LOCALE_REGIONS: { [locale: string]: TLTranslationLocale } = { } /** @public */ -function getSupportedLocale(locale: string): TLTranslationLocale | null { +function getSupportedLocale(locale: string): TLUiTranslationLocale | null { // If we have an exact match, return it! // (e.g. if the user has 'fr' and we have 'fr') // (or if the user has 'pt-BR' and we have 'pt-br') diff --git a/packages/ui/api-report.md b/packages/ui/api-report.md index 57ab30093..30266c921 100644 --- a/packages/ui/api-report.md +++ b/packages/ui/api-report.md @@ -6,11 +6,9 @@ /// -import { Context } from 'react'; import { Editor } from '@tldraw/editor'; import { EditorAssetUrls } from '@tldraw/editor'; import { EMBED_DEFINITIONS } from '@tldraw/editor'; -import { MemoExoticComponent } from 'react'; import { NamedExoticComponent } from 'react'; import { default as React_2 } from 'react'; import * as React_3 from 'react'; @@ -18,80 +16,14 @@ import { ReactNode } from 'react'; import { TLCopyType } from '@tldraw/editor'; import { TLExportType } from '@tldraw/editor'; import { TLShapeId } from '@tldraw/editor'; -import { TLStyleItem } from '@tldraw/editor'; -import { TLStyleType } from '@tldraw/editor'; import { VecLike } from '@tldraw/primitives'; -// @public (undocumented) -export interface ActionItem { - // (undocumented) - checkbox?: boolean; - // (undocumented) - contextMenuLabel?: TLTranslationKey; - // (undocumented) - icon?: TLUiIconType; - // (undocumented) - id: string; - // (undocumented) - kbd?: string; - // (undocumented) - label?: TLTranslationKey; - // (undocumented) - menuLabel?: TLTranslationKey; - // (undocumented) - onSelect: (source: TLUiEventSource) => Promise | void; - // (undocumented) - readonlyOk: boolean; - // (undocumented) - shortcutsLabel?: TLTranslationKey; - // (undocumented) - title?: string; -} - -// @public (undocumented) -export const ActionsContext: React_3.Context; - -// @public (undocumented) -export type ActionsContextType = Record; - -// @public (undocumented) -export const ActionsMenuSchemaContext: React_2.Context; - -// @public (undocumented) -export type ActionsMenuSchemaContextType = MenuSchema; - -// @public (undocumented) -export const ActionsMenuSchemaProvider: MemoExoticComponent<({ overrides, children, }: ActionsMenuSchemaProviderProps) => JSX.Element>; - -// @public (undocumented) -export type ActionsMenuSchemaProviderProps = { - overrides?: (editor: Editor, schema: ActionsMenuSchemaContextType, helpers: { - actions: ReturnType; - oneSelected: boolean; - twoSelected: boolean; - threeSelected: boolean; - }) => ActionsMenuSchemaContextType; - children: any; -}; - -// @public (undocumented) -export function ActionsProvider({ overrides, children }: ActionsProviderProps): JSX.Element; - -// @public (undocumented) -export type ActionsProviderProps = { - overrides?: (editor: Editor, actions: ActionsContextType, helpers: undefined) => ActionsContextType; - children: any; -}; - -// @public (undocumented) +// @internal (undocumented) export function AssetUrlsProvider({ assetUrls, children, }: { - assetUrls: UiAssetUrls; + assetUrls: TLUiAssetUrls; children: React.ReactNode; }): JSX.Element; -// @public (undocumented) -export const BASE_URL: string; - // @public (undocumented) function Body_2({ className, children, style, }: { className?: string; @@ -105,54 +37,7 @@ export function BreakPointProvider({ children }: { }): JSX.Element; // @public (undocumented) -export const Button: React_3.ForwardRefExoticComponent>; - -// @public (undocumented) -export const ButtonPicker: React_3.MemoExoticComponent; - -// @public (undocumented) -export interface ButtonPickerProps { - // (undocumented) - 'data-testid'?: string; - // (undocumented) - columns?: 2 | 3 | 4; - // (undocumented) - items: T[]; - // (undocumented) - onValueChange: (item: T, squashing: boolean) => void; - // (undocumented) - styleType: TLStyleType; - // (undocumented) - title: string; - // (undocumented) - value?: null | number | string; -} - -// @public (undocumented) -export interface ButtonProps extends React_3.HTMLAttributes { - // (undocumented) - disabled?: boolean; - // (undocumented) - icon?: TLUiIconType; - // (undocumented) - iconLeft?: TLUiIconType; - // (undocumented) - invertIcon?: boolean; - // (undocumented) - isChecked?: boolean; - // (undocumented) - kbd?: string; - // (undocumented) - label?: TLTranslationKey; - // (undocumented) - loading?: boolean; - // (undocumented) - smallIcon?: boolean; - // (undocumented) - spinner?: boolean; - // (undocumented) - type?: 'danger' | 'normal' | 'primary'; -} +export const Button: React_3.ForwardRefExoticComponent>; // @public (undocumented) function CheckboxItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps): JSX.Element; @@ -177,48 +62,6 @@ export const ContextMenu: ({ children }: { children: any; }) => JSX.Element; -// @public (undocumented) -export interface ContextMenuProps { - // (undocumented) - children: any; -} - -// @public (undocumented) -export const ContextMenuSchemaContext: React_2.Context; - -// @public (undocumented) -export type ContextMenuSchemaContextType = MenuSchema; - -// @public (undocumented) -export const ContextMenuSchemaProvider: MemoExoticComponent<({ overrides, children, }: ContextMenuSchemaProviderProps) => JSX.Element>; - -// @public (undocumented) -export type ContextMenuSchemaProviderProps = { - overrides?: (editor: Editor, schema: ContextMenuSchemaContextType, helpers: { - actions: ReturnType; - oneSelected: boolean; - twoSelected: boolean; - threeSelected: boolean; - showAutoSizeToggle: boolean; - showUngroup: boolean; - onlyFlippableShapeSelected: boolean; - }) => ContextMenuSchemaContextType; - children: any; -}; - -// @public (undocumented) -export type CustomMenuItem = { - id: string; - type: 'custom'; - disabled: boolean; - readonlyOk: boolean; -}; - -// @public (undocumented) -export const DebugPanel: React_3.NamedExoticComponent<{ - renderDebugMenuItems: (() => React_3.ReactNode) | null; -}>; - declare namespace Dialog { export { Header, @@ -230,35 +73,6 @@ declare namespace Dialog { } export { Dialog } -// @public (undocumented) -export interface DialogProps { - // (undocumented) - onClose: () => void; -} - -// @public (undocumented) -export const DialogsContext: Context; - -// @public (undocumented) -export type DialogsContextType = { - addDialog: (dialog: Omit & { - id?: string; - }) => string; - removeDialog: (id: string) => string; - updateDialog: (id: string, newDialogData: Partial) => string; - clearDialogs: () => void; - dialogs: TLDialog[]; -}; - -// @public (undocumented) -export function DialogsProvider({ children }: DialogsProviderProps): JSX.Element; - -// @public (undocumented) -export type DialogsProviderProps = { - overrides?: (editor: Editor) => DialogsContextType; - children: any; -}; - declare namespace DropdownMenu { export { Root, @@ -293,25 +107,13 @@ interface DropdownMenuCheckboxItemProps { } // @public (undocumented) -interface DropdownMenuItemProps extends ButtonProps { +interface DropdownMenuItemProps extends TLUiButtonProps { // (undocumented) noClose?: boolean; } // @public (undocumented) -export const EN_TRANSLATION: TLTranslation; - -// @public (undocumented) -export type EventsProviderProps = { - onEvent?: TLUiEventHandler; - children: any; -}; - -// @public (undocumented) -export function fetchTranslation(locale: TLTranslationLocale, assetUrls: UiAssetUrls): Promise; - -// @public (undocumented) -export function findMenuItem(menu: MenuSchema, path: string[]): MenuChild; +export function findMenuItem(menu: TLUiMenuSchema, path: string[]): TLUiMenuChild; // @public (undocumented) function Footer({ className, children }: { @@ -319,12 +121,6 @@ function Footer({ className, children }: { children: any; }): JSX.Element; -// @public (undocumented) -export const getBaseUrl: () => string; - -// @public (undocumented) -export function getTranslation(locale: TLTranslationLocale, assetUrls: UiAssetUrls): Promise; - // @public (undocumented) function Group({ children, size, }: { children: any; @@ -338,44 +134,230 @@ function Header({ className, children }: { }): JSX.Element; // @public (undocumented) -export const HelpMenu: React_3.NamedExoticComponent; +export const Icon: NamedExoticComponent; // @public (undocumented) -export interface HelpMenuProps { - // (undocumented) - links?: HelpMenuLink[]; -} - -// @internal (undocumented) -export const HelpMenuSchemaContext: React_2.Context; +function Indicator(): JSX.Element; // @public (undocumented) -export const HelpMenuSchemaProvider: MemoExoticComponent<({ overrides, children, }: HelpMenuSchemaProviderProps) => JSX.Element>; +export const Input: React_3.ForwardRefExoticComponent>; // @public (undocumented) -export type HelpMenuSchemaProviderProps = { - overrides?: (editor: Editor, schema: HelpMenuSchemaProviderType, helpers: { - actions: ReturnType; - languages: TLListedTranslations; - currentLanguage: string; - oneSelected: boolean; - twoSelected: boolean; - threeSelected: boolean; - }) => HelpMenuSchemaProviderType; - children: any; +function Item({ noClose, ...props }: DropdownMenuItemProps): JSX.Element; + +// @public (undocumented) +export function menuCustom(id: string, opts?: Partial<{ + readonlyOk: boolean; + disabled: boolean; +}>): { + id: string; + type: "custom"; + disabled: boolean; + readonlyOk: boolean; }; // @public (undocumented) -export type HelpMenuSchemaProviderType = MenuSchema; +export function menuGroup(id: string, ...children: (false | null | TLUiMenuChild)[]): null | TLUiMenuGroup; // @public (undocumented) -export const HTMLCanvas: MemoExoticComponent<() => JSX.Element>; +export function menuItem(actionItem: TLUiActionItem | TLUiToolItem, opts?: Partial<{ + checked: boolean; + disabled: boolean; +}>): TLUiMenuItem; // @public (undocumented) -export const Icon: NamedExoticComponent; +export function menuSubmenu(id: string, label: TLUiTranslationKey, ...children: (false | null | TLUiMenuChild)[]): null | TLUiSubMenu; // @public (undocumented) -export interface IconProps extends React.HTMLProps { +function RadioItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps): JSX.Element; + +// @public (undocumented) +function Root({ id, children, modal, }: { + id: string; + children: any; + modal?: boolean; +}): JSX.Element; + +// @internal (undocumented) +export function setDefaultUiAssetUrls(urls: TLUiAssetUrls): void; + +// @public (undocumented) +function Sub({ id, children }: { + id: string; + children: any; +}): JSX.Element; + +// @public (undocumented) +function SubContent({ alignOffset, sideOffset, children, }: { + alignOffset?: number; + sideOffset?: number; + children: any; +}): JSX.Element; + +// @public (undocumented) +function SubTrigger({ label, 'data-testid': testId, 'data-direction': dataDirection, }: { + label: TLUiTranslationKey; + 'data-testid'?: string; + 'data-direction'?: 'left' | 'right'; +}): JSX.Element; + +// @public (undocumented) +function Title({ className, children }: { + className?: string; + children: any; +}): JSX.Element; + +// @public (undocumented) +export const TldrawUi: React_2.NamedExoticComponent<{ + children?: ReactNode; + hideUi?: boolean | undefined; + shareZone?: ReactNode; + topZone?: ReactNode; + renderDebugMenuItems?: (() => React_2.ReactNode) | undefined; +} & TldrawUiContextProviderProps>; + +// @public (undocumented) +export function TldrawUiContextProvider({ overrides, assetUrls, onUiEvent, children, }: TldrawUiContextProviderProps): JSX.Element; + +// @public (undocumented) +export interface TldrawUiContextProviderProps { + // (undocumented) + assetUrls?: TLUiAssetUrls; + // (undocumented) + children?: any; + // (undocumented) + onUiEvent?: TLUiEventHandler; + // (undocumented) + overrides?: TLUiOverrides | TLUiOverrides[]; +} + +// @public (undocumented) +export type TldrawUiProps = { + children?: ReactNode; + hideUi?: boolean; + shareZone?: ReactNode; + topZone?: ReactNode; + renderDebugMenuItems?: () => React_2.ReactNode; +} & TldrawUiContextProviderProps; + +// @public (undocumented) +export interface TLUiActionItem { + // (undocumented) + checkbox?: boolean; + // (undocumented) + contextMenuLabel?: TLUiTranslationKey; + // (undocumented) + icon?: TLUiIconType; + // (undocumented) + id: string; + // (undocumented) + kbd?: string; + // (undocumented) + label?: TLUiTranslationKey; + // (undocumented) + menuLabel?: TLUiTranslationKey; + // (undocumented) + onSelect: (source: TLUiEventSource) => Promise | void; + // (undocumented) + readonlyOk: boolean; + // (undocumented) + shortcutsLabel?: TLUiTranslationKey; + // (undocumented) + title?: string; +} + +// @public (undocumented) +export type TLUiActionsContextType = Record; + +// @public (undocumented) +export type TLUiActionsMenuSchemaContextType = TLUiMenuSchema; + +// @public (undocumented) +export interface TLUiButtonProps extends React_3.HTMLAttributes { + // (undocumented) + disabled?: boolean; + // (undocumented) + icon?: TLUiIconType; + // (undocumented) + iconLeft?: TLUiIconType; + // (undocumented) + invertIcon?: boolean; + // (undocumented) + isChecked?: boolean; + // (undocumented) + kbd?: string; + // (undocumented) + label?: TLUiTranslationKey; + // (undocumented) + loading?: boolean; + // (undocumented) + smallIcon?: boolean; + // (undocumented) + spinner?: boolean; + // (undocumented) + type?: 'danger' | 'normal' | 'primary'; +} + +// @public (undocumented) +export interface TLUiContextMenuProps { + // (undocumented) + children: any; +} + +// @public (undocumented) +export type TLUiContextTTLUiMenuSchemaContextType = TLUiMenuSchema; + +// @public (undocumented) +export type TLUiCustomMenuItem = { + id: string; + type: 'custom'; + disabled: boolean; + readonlyOk: boolean; +}; + +// @public (undocumented) +export interface TLUiDialog { + // (undocumented) + component: (props: TLUiDialogProps) => any; + // (undocumented) + id: string; + // (undocumented) + onClose?: () => void; +} + +// @public (undocumented) +export interface TLUiDialogProps { + // (undocumented) + onClose: () => void; +} + +// @public (undocumented) +export type TLUiDialogsContextType = { + addDialog: (dialog: Omit & { + id?: string; + }) => string; + removeDialog: (id: string) => string; + updateDialog: (id: string, newDialogData: Partial) => string; + clearDialogs: () => void; + dialogs: TLUiDialog[]; +}; + +// @public (undocumented) +export type TLUiEventContextType = TLUiEventHandler; + +// @public (undocumented) +export type TLUiEventHandler = (name: T, data: Join<{ + source: TLUiEventSource; +}, TLUiEventMap[T]>) => void; + +// @public (undocumented) +export type TLUiEventSource = 'actions-menu' | 'context-menu' | 'debug-panel' | 'dialog' | 'export-menu' | 'help-menu' | 'helper-buttons' | 'kbd' | 'menu' | 'navigation-zone' | 'page-menu' | 'people-menu' | 'quick-actions' | 'share-menu' | 'toolbar' | 'unknown' | 'zoom-menu'; + +// @public (undocumented) +export type TLUiHelpMenuSchemaContextType = TLUiMenuSchema; + +// @public (undocumented) +export interface TLUiIconProps extends React.HTMLProps { // (undocumented) children?: undefined; // (undocumented) @@ -391,13 +373,10 @@ export interface IconProps extends React.HTMLProps { } // @public (undocumented) -function Indicator(): JSX.Element; +export type TLUiIconType = 'align-bottom-center' | 'align-bottom-left' | 'align-bottom-right' | 'align-bottom' | 'align-center-center' | 'align-center-horizontal' | 'align-center-left' | 'align-center-right' | 'align-center-vertical' | 'align-left' | 'align-right' | 'align-top-center' | 'align-top-left' | 'align-top-right' | 'align-top' | 'arrow-left' | 'arrowhead-arrow' | 'arrowhead-bar' | 'arrowhead-diamond' | 'arrowhead-dot' | 'arrowhead-none' | 'arrowhead-square' | 'arrowhead-triangle-inverted' | 'arrowhead-triangle' | 'aspect-ratio' | 'avatar' | 'blob' | 'bring-forward' | 'bring-to-front' | 'check' | 'checkbox-checked' | 'checkbox-empty' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevrons-ne' | 'chevrons-sw' | 'clipboard-copied' | 'clipboard-copy' | 'code' | 'collab' | 'color' | 'comment' | 'cross-2' | 'cross' | 'dash-dashed' | 'dash-dotted' | 'dash-draw' | 'dash-solid' | 'discord' | 'distribute-horizontal' | 'distribute-vertical' | 'dot' | 'dots-horizontal' | 'dots-vertical' | 'drag-handle-dots' | 'duplicate' | 'edit' | 'external-link' | 'file' | 'fill-none' | 'fill-pattern' | 'fill-semi' | 'fill-solid' | 'follow' | 'following' | 'font-draw' | 'font-mono' | 'font-sans' | 'font-serif' | 'geo-arrow-down' | 'geo-arrow-left' | 'geo-arrow-right' | 'geo-arrow-up' | 'geo-check-box' | 'geo-diamond' | 'geo-ellipse' | 'geo-hexagon' | 'geo-octagon' | 'geo-oval' | 'geo-pentagon' | 'geo-rectangle' | 'geo-rhombus-2' | 'geo-rhombus' | 'geo-star' | 'geo-trapezoid' | 'geo-triangle' | 'geo-x-box' | 'github' | 'group' | 'hidden' | 'image' | 'info-circle' | 'leading' | 'link' | 'lock-small' | 'lock' | 'menu' | 'minus' | 'mixed' | 'pack' | 'page' | 'plus' | 'question-mark-circle' | 'question-mark' | 'redo' | 'reset-zoom' | 'rotate-ccw' | 'rotate-cw' | 'ruler' | 'search' | 'send-backward' | 'send-to-back' | 'settings-horizontal' | 'settings-vertical-1' | 'settings-vertical' | 'share-1' | 'share-2' | 'size-extra-large' | 'size-large' | 'size-medium' | 'size-small' | 'spline-cubic' | 'spline-line' | 'stack-horizontal' | 'stack-vertical' | 'stretch-horizontal' | 'stretch-vertical' | 'text-align-center' | 'text-align-justify' | 'text-align-left' | 'text-align-right' | 'tool-arrow' | 'tool-embed' | 'tool-eraser' | 'tool-frame' | 'tool-hand' | 'tool-highlight' | 'tool-laser' | 'tool-line' | 'tool-media' | 'tool-note' | 'tool-pencil' | 'tool-pointer' | 'tool-text' | 'trash' | 'triangle-down' | 'triangle-up' | 'twitter' | 'undo' | 'ungroup' | 'unlock-small' | 'unlock' | 'vertical-align-center' | 'vertical-align-end' | 'vertical-align-start' | 'visible' | 'warning-triangle' | 'zoom-in' | 'zoom-out'; // @public (undocumented) -export const Input: React_3.ForwardRefExoticComponent>; - -// @public (undocumented) -export interface InputProps { +export interface TLUiInputProps { // (undocumented) autofocus?: boolean; // (undocumented) @@ -415,7 +394,7 @@ export interface InputProps { // (undocumented) iconLeft?: TLUiIconType; // (undocumented) - label?: TLTranslationKey; + label?: TLUiTranslationKey; // (undocumented) onBlur?: (value: string) => void; // (undocumented) @@ -432,266 +411,100 @@ export interface InputProps { } // @public (undocumented) -function Item({ noClose, ...props }: DropdownMenuItemProps): JSX.Element; +export type TLUiKeyboardShortcutsSchemaContextType = TLUiMenuSchema; // @public (undocumented) -export function Kbd({ children }: KbdProps): JSX.Element; - -// @public (undocumented) -export function kbd(str: string): string[]; - -// @public (undocumented) -export interface KbdProps { - // (undocumented) - children: string; -} - -// @public (undocumented) -export function kbdStr(str: string): string; - -// @public (undocumented) -export const KeyboardShortcutsSchemaContext: React_2.Context; - -// @public (undocumented) -export type KeyboardShortcutsSchemaContextType = MenuSchema; - -// @public (undocumented) -export const KeyboardShortcutsSchemaProvider: MemoExoticComponent<({ overrides, children, }: KeyboardShortcutsSchemaProviderProps) => JSX.Element>; - -// @public (undocumented) -export type KeyboardShortcutsSchemaProviderProps = { - overrides?: (editor: Editor, schema: KeyboardShortcutsSchemaContextType, more: { - tools: ToolsContextType; - actions: ActionsContextType; - }) => KeyboardShortcutsSchemaContextType; +export type TLUiKeyboardShortcutsSchemaProviderProps = { + overrides?: (editor: Editor, schema: TLUiKeyboardShortcutsSchemaContextType, more: { + tools: TLUiToolsContextType; + actions: TLUiActionsContextType; + }) => TLUiKeyboardShortcutsSchemaContextType; children: any; }; // @public (undocumented) -export type MenuChild = CustomMenuItem | MenuGroup | MenuItem | SubMenu; - -// @public (undocumented) -export function menuCustom(id: string, opts?: Partial<{ - readonlyOk: boolean; - disabled: boolean; -}>): { - id: string; - type: "custom"; - disabled: boolean; - readonlyOk: boolean; -}; - -// @public (undocumented) -export type MenuGroup = { - id: string; - type: 'group'; - checkbox: boolean; - disabled: boolean; - readonlyOk: boolean; - children: MenuChild[]; -}; - -// @public (undocumented) -export function menuGroup(id: string, ...children: (false | MenuChild | null)[]): MenuGroup | null; - -// @public (undocumented) -export type MenuItem = { - id: string; - type: 'item'; - readonlyOk: boolean; - actionItem: ActionItem; - disabled: boolean; - checked: boolean; -}; - -// @public (undocumented) -export function menuItem(actionItem: ActionItem | ToolItem, opts?: Partial<{ - checked: boolean; - disabled: boolean; -}>): MenuItem; - -// @public (undocumented) -export type MenuSchema = (CustomMenuItem | MenuGroup | MenuItem)[]; - -// @public (undocumented) -export const MenuSchemaContext: React_2.Context; - -// @public (undocumented) -export type MenuSchemaContextType = MenuSchema; - -// @public (undocumented) -export function MenuSchemaProvider({ overrides, children }: MenuSchemaProviderProps): JSX.Element; - -// @public (undocumented) -export type MenuSchemaProviderProps = { - overrides?: (editor: Editor, schema: MenuSchemaContextType, helpers: { - actions: ReturnType; - noneSelected: boolean; - oneSelected: boolean; - twoSelected: boolean; - threeSelected: boolean; - }) => MenuSchemaContextType; - children: any; -}; - -// @public (undocumented) -export function menuSubmenu(id: string, label: TLTranslationKey, ...children: (false | MenuChild | null)[]): null | SubMenu; - -// @public (undocumented) -export const NavigationZone: NamedExoticComponent; - -// @public (undocumented) -function RadioItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps): JSX.Element; - -// @public (undocumented) -function Root({ id, children, modal, }: { - id: string; - children: any; - modal?: boolean; -}): JSX.Element; - -// @internal (undocumented) -export function setDefaultUiAssetUrls(urls: UiAssetUrls): void; - -// @public (undocumented) -export function Slider(props: SliderProps): JSX.Element; - -// @public (undocumented) -export interface SliderProps { - // (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 const StylePanel: ({ isMobile }: StylePanelProps) => JSX.Element | null; - -// @public (undocumented) -function Sub({ id, children }: { - id: string; - children: any; -}): JSX.Element; - -// @public (undocumented) -function SubContent({ alignOffset, sideOffset, children, }: { - alignOffset?: number; - sideOffset?: number; - children: any; -}): JSX.Element; - -// @public (undocumented) -export type SubMenu = { - id: string; - type: 'submenu'; - label: TLTranslationKey; - disabled: boolean; - readonlyOk: boolean; - children: MenuChild[]; -}; - -// @public (undocumented) -function SubTrigger({ label, 'data-testid': testId, 'data-direction': dataDirection, }: { - label: TLTranslationKey; - 'data-testid'?: string; - 'data-direction'?: 'left' | 'right'; -}): JSX.Element; - -// @public (undocumented) -function Title({ className, children }: { - className?: string; - children: any; -}): JSX.Element; - -// @public (undocumented) -export interface TLDialog { - // (undocumented) - component: (props: DialogProps) => any; - // (undocumented) - id: string; - // (undocumented) - onClose?: () => void; -} - -// @public (undocumented) -export const TldrawUi: React_2.NamedExoticComponent<{ - children?: ReactNode; - hideUi?: boolean | undefined; - shareZone?: ReactNode; - topZone?: ReactNode; - renderDebugMenuItems?: (() => React_2.ReactNode) | undefined; -} & TldrawUiContextProviderProps>; - -// @public (undocumented) -export const TldrawUiContent: React_2.NamedExoticComponent; - -// @public (undocumented) -export function TldrawUiContextProvider({ overrides, assetUrls, onUiEvent, children, }: TldrawUiContextProviderProps): JSX.Element; - -// @public (undocumented) -export interface TldrawUiContextProviderProps { - // (undocumented) - assetUrls?: UiAssetUrls; - // (undocumented) - children?: any; - // (undocumented) - onUiEvent?: TLUiEventHandler; - // (undocumented) - overrides?: TldrawUiOverrides | TldrawUiOverrides[]; -} - -// @public (undocumented) -export interface TldrawUiOverrides { - // (undocumented) - actions?: WithDefaultHelpers>; - // (undocumented) - actionsMenu?: WithDefaultHelpers>; - // (undocumented) - contextMenu?: WithDefaultHelpers>; - // (undocumented) - helpMenu?: WithDefaultHelpers>; - // (undocumented) - keyboardShortcutsMenu?: WithDefaultHelpers>; - // (undocumented) - menu?: WithDefaultHelpers>; - // (undocumented) - toolbar?: WithDefaultHelpers>; - // (undocumented) - tools?: WithDefaultHelpers>; - // (undocumented) - translations?: TranslationProviderProps['overrides']; -} - -// @public (undocumented) -export type TldrawUiProps = { - children?: ReactNode; - hideUi?: boolean; - shareZone?: ReactNode; - topZone?: ReactNode; - renderDebugMenuItems?: () => React_2.ReactNode; -} & TldrawUiContextProviderProps; - -// @public (undocumented) -export type TLListedTranslation = { +export type TLUiLanguage = { readonly locale: string; readonly label: string; }; // @public (undocumented) -export type TLListedTranslations = readonly TLListedTranslation[]; +export type TLUiMenuChild = TLUiCustomMenuItem | TLUiMenuGroup | TLUiMenuItem | TLUiSubMenu; // @public (undocumented) -export interface TLToast { +export type TLUiMenuGroup = { + id: string; + type: 'group'; + checkbox: boolean; + disabled: boolean; + readonlyOk: boolean; + children: TLUiMenuChild[]; +}; + +// @public (undocumented) +export type TLUiMenuItem = { + id: string; + type: 'item'; + readonlyOk: boolean; + actionItem: TLUiActionItem; + disabled: boolean; + checked: boolean; +}; + +// @public (undocumented) +export type TLUiMenuSchema = (TLUiCustomMenuItem | TLUiMenuGroup | TLUiMenuItem)[]; + +// @public (undocumented) +export type TLUiMenuSchemaContextType = TLUiMenuSchema; + +// @public (undocumented) +export type TLUiMenuSchemaProviderProps = { + overrides?: (editor: Editor, schema: TLUiMenuSchemaContextType, helpers: { + actions: ReturnType; + noneSelected: boolean; + oneSelected: boolean; + twoSelected: boolean; + threeSelected: boolean; + }) => TLUiMenuSchemaContextType; + children: any; +}; + +// @public (undocumented) +export interface TLUiOverrides { // (undocumented) - actions?: TLToastAction[]; + actions?: WithDefaultHelpers>; + // (undocumented) + actionsMenu?: WithDefaultHelpers>; + // (undocumented) + contextMenu?: WithDefaultHelpers>; + // (undocumented) + helpMenu?: WithDefaultHelpers>; + // (undocumented) + keyboardShortcutsMenu?: WithDefaultHelpers>; + // (undocumented) + menu?: WithDefaultHelpers>; + // (undocumented) + toolbar?: WithDefaultHelpers>; + // (undocumented) + tools?: WithDefaultHelpers>; + // (undocumented) + translations?: TLUiTranslationProviderProps['overrides']; +} + +// @public (undocumented) +export type TLUiSubMenu = { + id: string; + type: 'submenu'; + label: TLUiTranslationKey; + disabled: boolean; + readonlyOk: boolean; + children: TLUiMenuChild[]; +}; + +// @public (undocumented) +export interface TLUiToast { + // (undocumented) + actions?: TLUiToastAction[]; // (undocumented) closeLabel?: string; // (undocumented) @@ -707,7 +520,7 @@ export interface TLToast { } // @public (undocumented) -export interface TLToastAction { +export interface TLUiToastAction { // (undocumented) label: string; // (undocumented) @@ -717,90 +530,28 @@ export interface TLToastAction { } // @public (undocumented) -export type TLTranslation = { - readonly locale: string; - readonly label: string; - readonly messages: TLTranslationMessages; -}; - -// @public (undocumented) -export type TLTranslationKey = 'action.align-bottom' | 'action.align-center-horizontal.short' | 'action.align-center-horizontal' | 'action.align-center-vertical.short' | 'action.align-center-vertical' | 'action.align-left' | 'action.align-right' | 'action.align-top' | 'action.back-to-content' | 'action.bring-forward' | 'action.bring-to-front' | 'action.convert-to-bookmark' | 'action.convert-to-embed' | 'action.copy-as-json.short' | 'action.copy-as-json' | 'action.copy-as-png.short' | 'action.copy-as-png' | 'action.copy-as-svg.short' | 'action.copy-as-svg' | 'action.copy' | 'action.cut' | 'action.delete' | 'action.distribute-horizontal.short' | 'action.distribute-horizontal' | 'action.distribute-vertical.short' | 'action.distribute-vertical' | 'action.duplicate' | 'action.edit-link' | 'action.exit-pen-mode' | 'action.export-as-json.short' | 'action.export-as-json' | 'action.export-as-png.short' | 'action.export-as-png' | 'action.export-as-svg.short' | 'action.export-as-svg' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | 'action.fork-project' | 'action.group' | 'action.insert-embed' | 'action.insert-media' | 'action.leave-shared-project' | 'action.new-project' | 'action.new-shared-project' | 'action.open-embed-link' | 'action.open-file' | 'action.pack' | 'action.paste' | 'action.print' | 'action.redo' | 'action.rotate-ccw' | 'action.rotate-cw' | 'action.save-copy' | 'action.select-all' | 'action.select-none' | 'action.send-backward' | 'action.send-to-back' | 'action.share-project' | 'action.stack-horizontal.short' | 'action.stack-horizontal' | 'action.stack-vertical.short' | 'action.stack-vertical' | 'action.stop-following' | 'action.stretch-horizontal.short' | 'action.stretch-horizontal' | 'action.stretch-vertical.short' | 'action.stretch-vertical' | 'action.toggle-auto-size' | 'action.toggle-dark-mode.menu' | 'action.toggle-dark-mode' | 'action.toggle-debug-mode.menu' | 'action.toggle-debug-mode' | 'action.toggle-focus-mode.menu' | 'action.toggle-focus-mode' | 'action.toggle-grid.menu' | 'action.toggle-grid' | 'action.toggle-lock' | 'action.toggle-reduce-motion.menu' | 'action.toggle-reduce-motion' | 'action.toggle-snap-mode.menu' | 'action.toggle-snap-mode' | 'action.toggle-tool-lock.menu' | 'action.toggle-tool-lock' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.undo' | 'action.ungroup' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-to-100' | 'action.zoom-to-fit' | 'action.zoom-to-selection' | 'actions-menu.title' | 'align-style.end' | 'align-style.justify' | 'align-style.middle' | 'align-style.start' | 'arrowheadEnd-style.arrow' | 'arrowheadEnd-style.bar' | 'arrowheadEnd-style.diamond' | 'arrowheadEnd-style.dot' | 'arrowheadEnd-style.inverted' | 'arrowheadEnd-style.none' | 'arrowheadEnd-style.pipe' | 'arrowheadEnd-style.square' | 'arrowheadEnd-style.triangle' | 'arrowheadStart-style.arrow' | 'arrowheadStart-style.bar' | 'arrowheadStart-style.diamond' | 'arrowheadStart-style.dot' | 'arrowheadStart-style.inverted' | 'arrowheadStart-style.none' | 'arrowheadStart-style.pipe' | 'arrowheadStart-style.square' | 'arrowheadStart-style.triangle' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context.pages.new-page' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'debug-panel.more' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'edit-pages-dialog.move-down' | 'edit-pages-dialog.move-up' | 'embed-dialog.back' | 'embed-dialog.cancel' | 'embed-dialog.create' | 'embed-dialog.instruction' | 'embed-dialog.invalid-url' | 'embed-dialog.title' | 'embed-dialog.url' | 'file-system.confirm-clear.cancel' | 'file-system.confirm-clear.continue' | 'file-system.confirm-clear.description' | 'file-system.confirm-clear.dont-show-again' | 'file-system.confirm-clear.title' | 'file-system.confirm-open.cancel' | 'file-system.confirm-open.description' | 'file-system.confirm-open.dont-show-again' | 'file-system.confirm-open.open' | 'file-system.confirm-open.title' | 'file-system.file-open-error.file-format-version-too-new' | 'file-system.file-open-error.generic-corrupted-file' | 'file-system.file-open-error.not-a-tldraw-file' | 'file-system.file-open-error.title' | 'file-system.shared-document-file-open-error.description' | 'file-system.shared-document-file-open-error.title' | 'fill-style.none' | 'fill-style.pattern' | 'fill-style.semi' | 'fill-style.solid' | 'focus-mode.toggle-focus-mode' | 'font-style.draw' | 'font-style.mono' | 'font-style.sans' | 'font-style.serif' | 'geo-style.arrow-down' | 'geo-style.arrow-left' | 'geo-style.arrow-right' | 'geo-style.arrow-up' | 'geo-style.check-box' | 'geo-style.diamond' | 'geo-style.ellipse' | 'geo-style.hexagon' | 'geo-style.octagon' | 'geo-style.oval' | 'geo-style.pentagon' | 'geo-style.rectangle' | 'geo-style.rhombus-2' | 'geo-style.rhombus' | 'geo-style.star' | 'geo-style.trapezoid' | 'geo-style.triangle' | 'geo-style.x-box' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.keyboard-shortcuts' | 'help-menu.title' | 'help-menu.twitter' | 'home-project-dialog.description' | 'home-project-dialog.ok' | 'home-project-dialog.title' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.language' | 'menu.preferences' | 'menu.title' | 'menu.view' | 'navigation-zone.toggle-minimap' | 'navigation-zone.zoom' | 'opacity-style.0.1' | 'opacity-style.0.25' | 'opacity-style.0.5' | 'opacity-style.0.75' | 'opacity-style.1' | 'page-menu.create-new-page' | 'page-menu.edit-done' | 'page-menu.edit-start' | 'page-menu.go-to-page' | 'page-menu.max-page-count-reached' | 'page-menu.new-page-initial-name' | 'page-menu.submenu.delete' | 'page-menu.submenu.duplicate-page' | 'page-menu.submenu.move-down' | 'page-menu.submenu.move-up' | 'page-menu.submenu.rename' | 'page-menu.submenu.title' | 'page-menu.title' | 'people-menu.change-color' | 'people-menu.change-name' | 'people-menu.follow' | 'people-menu.following' | 'people-menu.invite' | 'people-menu.leading' | 'people-menu.title' | 'people-menu.user' | 'rename-project-dialog.cancel' | 'rename-project-dialog.rename' | 'rename-project-dialog.title' | 'share-menu.copy-link-note' | 'share-menu.copy-link' | 'share-menu.copy-readonly-link-note' | 'share-menu.copy-readonly-link' | 'share-menu.create-snapshot-link' | 'share-menu.default-project-name' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | 'share-menu.readonly-link' | 'share-menu.save-note' | 'share-menu.share-project' | 'share-menu.snapshot-link-note' | 'share-menu.title' | 'share-menu.upload-failed' | 'sharing.confirm-leave.cancel' | 'sharing.confirm-leave.description' | 'sharing.confirm-leave.dont-show-again' | 'sharing.confirm-leave.leave' | 'sharing.confirm-leave.title' | 'shortcuts-dialog.edit' | 'shortcuts-dialog.file' | 'shortcuts-dialog.preferences' | 'shortcuts-dialog.title' | 'shortcuts-dialog.tools' | 'shortcuts-dialog.transform' | 'shortcuts-dialog.view' | 'size-style.l' | 'size-style.m' | 'size-style.s' | 'size-style.xl' | 'spline-style.cubic' | 'spline-style.line' | 'style-panel.align' | 'style-panel.arrowhead-end' | 'style-panel.arrowhead-start' | 'style-panel.arrowheads' | 'style-panel.color' | 'style-panel.dash' | 'style-panel.fill' | 'style-panel.font' | 'style-panel.geo' | 'style-panel.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.size' | 'style-panel.spline' | 'style-panel.title' | 'style-panel.vertical-align' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | 'tool-panel.drawing' | 'tool-panel.more' | 'tool-panel.shapes' | 'tool.arrow-down' | 'tool.arrow-left' | 'tool.arrow-right' | 'tool.arrow-up' | 'tool.arrow' | 'tool.asset' | 'tool.check-box' | 'tool.diamond' | 'tool.draw' | 'tool.ellipse' | 'tool.embed' | 'tool.eraser' | 'tool.frame' | 'tool.hand' | 'tool.hexagon' | 'tool.highlight' | 'tool.laser' | 'tool.line' | 'tool.note' | 'tool.octagon' | 'tool.oval' | 'tool.pentagon' | 'tool.rectangle' | 'tool.rhombus' | 'tool.select' | 'tool.star' | 'tool.text' | 'tool.trapezoid' | 'tool.triangle' | 'tool.x-box' | 'vscode.file-open.backup-failed' | 'vscode.file-open.backup-saved' | 'vscode.file-open.backup' | 'vscode.file-open.desc' | 'vscode.file-open.dont-show-again' | 'vscode.file-open.open'; - -// @public (undocumented) -export type TLTranslationLocale = TLTranslations[number]['locale']; - -// @public (undocumented) -export type TLTranslationMessages = Record; - -// @public (undocumented) -export type TLTranslations = TLTranslation[]; - -// @public (undocumented) -export type TLUiEventHandler = (name: T, data: Join<{ - source: TLUiEventSource; -}, TLUiEventMap[T]>) => void; - -// @public (undocumented) -export type TLUiEventSource = 'actions-menu' | 'context-menu' | 'debug-panel' | 'dialog' | 'export-menu' | 'help-menu' | 'helper-buttons' | 'kbd' | 'menu' | 'navigation-zone' | 'page-menu' | 'people-menu' | 'quick-actions' | 'share-menu' | 'toolbar' | 'unknown' | 'zoom-menu'; - -// @public (undocumented) -export type TLUiIconType = 'align-bottom-center' | 'align-bottom-left' | 'align-bottom-right' | 'align-bottom' | 'align-center-center' | 'align-center-horizontal' | 'align-center-left' | 'align-center-right' | 'align-center-vertical' | 'align-left' | 'align-right' | 'align-top-center' | 'align-top-left' | 'align-top-right' | 'align-top' | 'arrow-left' | 'arrowhead-arrow' | 'arrowhead-bar' | 'arrowhead-diamond' | 'arrowhead-dot' | 'arrowhead-none' | 'arrowhead-square' | 'arrowhead-triangle-inverted' | 'arrowhead-triangle' | 'aspect-ratio' | 'avatar' | 'blob' | 'bring-forward' | 'bring-to-front' | 'check' | 'checkbox-checked' | 'checkbox-empty' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevrons-ne' | 'chevrons-sw' | 'clipboard-copied' | 'clipboard-copy' | 'code' | 'collab' | 'color' | 'comment' | 'cross-2' | 'cross' | 'dash-dashed' | 'dash-dotted' | 'dash-draw' | 'dash-solid' | 'discord' | 'distribute-horizontal' | 'distribute-vertical' | 'dot' | 'dots-horizontal' | 'dots-vertical' | 'drag-handle-dots' | 'duplicate' | 'edit' | 'external-link' | 'file' | 'fill-none' | 'fill-pattern' | 'fill-semi' | 'fill-solid' | 'follow' | 'following' | 'font-draw' | 'font-mono' | 'font-sans' | 'font-serif' | 'geo-arrow-down' | 'geo-arrow-left' | 'geo-arrow-right' | 'geo-arrow-up' | 'geo-check-box' | 'geo-diamond' | 'geo-ellipse' | 'geo-hexagon' | 'geo-octagon' | 'geo-oval' | 'geo-pentagon' | 'geo-rectangle' | 'geo-rhombus-2' | 'geo-rhombus' | 'geo-star' | 'geo-trapezoid' | 'geo-triangle' | 'geo-x-box' | 'github' | 'group' | 'hidden' | 'image' | 'info-circle' | 'leading' | 'link' | 'lock-small' | 'lock' | 'menu' | 'minus' | 'mixed' | 'pack' | 'page' | 'plus' | 'question-mark-circle' | 'question-mark' | 'redo' | 'reset-zoom' | 'rotate-ccw' | 'rotate-cw' | 'ruler' | 'search' | 'send-backward' | 'send-to-back' | 'settings-horizontal' | 'settings-vertical-1' | 'settings-vertical' | 'share-1' | 'share-2' | 'size-extra-large' | 'size-large' | 'size-medium' | 'size-small' | 'spline-cubic' | 'spline-line' | 'stack-horizontal' | 'stack-vertical' | 'stretch-horizontal' | 'stretch-vertical' | 'text-align-center' | 'text-align-justify' | 'text-align-left' | 'text-align-right' | 'tool-arrow' | 'tool-embed' | 'tool-eraser' | 'tool-frame' | 'tool-hand' | 'tool-highlight' | 'tool-laser' | 'tool-line' | 'tool-media' | 'tool-note' | 'tool-pencil' | 'tool-pointer' | 'tool-text' | 'trash' | 'triangle-down' | 'triangle-up' | 'twitter' | 'undo' | 'ungroup' | 'unlock-small' | 'unlock' | 'vertical-align-center' | 'vertical-align-end' | 'vertical-align-start' | 'visible' | 'warning-triangle' | 'zoom-in' | 'zoom-out'; - -// @public (undocumented) -export const TLUiIconTypes: readonly ["align-bottom-center", "align-bottom-left", "align-bottom-right", "align-bottom", "align-center-center", "align-center-horizontal", "align-center-left", "align-center-right", "align-center-vertical", "align-left", "align-right", "align-top-center", "align-top-left", "align-top-right", "align-top", "arrow-left", "arrowhead-arrow", "arrowhead-bar", "arrowhead-diamond", "arrowhead-dot", "arrowhead-none", "arrowhead-square", "arrowhead-triangle-inverted", "arrowhead-triangle", "aspect-ratio", "avatar", "blob", "bring-forward", "bring-to-front", "check", "checkbox-checked", "checkbox-empty", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevrons-ne", "chevrons-sw", "clipboard-copied", "clipboard-copy", "code", "collab", "color", "comment", "cross-2", "cross", "dash-dashed", "dash-dotted", "dash-draw", "dash-solid", "discord", "distribute-horizontal", "distribute-vertical", "dot", "dots-horizontal", "dots-vertical", "drag-handle-dots", "duplicate", "edit", "external-link", "file", "fill-none", "fill-pattern", "fill-semi", "fill-solid", "follow", "following", "font-draw", "font-mono", "font-sans", "font-serif", "geo-arrow-down", "geo-arrow-left", "geo-arrow-right", "geo-arrow-up", "geo-check-box", "geo-diamond", "geo-ellipse", "geo-hexagon", "geo-octagon", "geo-oval", "geo-pentagon", "geo-rectangle", "geo-rhombus-2", "geo-rhombus", "geo-star", "geo-trapezoid", "geo-triangle", "geo-x-box", "github", "group", "hidden", "image", "info-circle", "leading", "link", "lock-small", "lock", "menu", "minus", "mixed", "pack", "page", "plus", "question-mark-circle", "question-mark", "redo", "reset-zoom", "rotate-ccw", "rotate-cw", "ruler", "search", "send-backward", "send-to-back", "settings-horizontal", "settings-vertical-1", "settings-vertical", "share-1", "share-2", "size-extra-large", "size-large", "size-medium", "size-small", "spline-cubic", "spline-line", "stack-horizontal", "stack-vertical", "stretch-horizontal", "stretch-vertical", "text-align-center", "text-align-justify", "text-align-left", "text-align-right", "tool-arrow", "tool-embed", "tool-eraser", "tool-frame", "tool-hand", "tool-highlight", "tool-laser", "tool-line", "tool-media", "tool-note", "tool-pencil", "tool-pointer", "tool-text", "trash", "triangle-down", "triangle-up", "twitter", "undo", "ungroup", "unlock-small", "unlock", "vertical-align-center", "vertical-align-end", "vertical-align-start", "visible", "warning-triangle", "zoom-in", "zoom-out"]; - -// @public (undocumented) -export const ToastsContext: Context; - -// @public (undocumented) -export type ToastsContextType = { - addToast: (toast: Omit & { +export type TLUiToastsContextType = { + addToast: (toast: Omit & { id?: string; }) => string; - removeToast: (id: TLToast['id']) => string; + removeToast: (id: TLUiToast['id']) => string; clearToasts: () => void; - toasts: TLToast[]; + toasts: TLUiToast[]; }; // @public (undocumented) -export function ToastsProvider({ children }: ToastsProviderProps): JSX.Element; - -// @public (undocumented) -export type ToastsProviderProps = { - overrides?: (editor: Editor) => ToastsContextType; - children: any; -}; - -// @public (undocumented) -export type ToolbarItem = { +export type TLUiToolbarItem = { id: string; type: 'item'; readonlyOk: boolean; - toolItem: ToolItem; + toolItem: TLUiToolItem; }; // @public (undocumented) -export function toolbarItem(toolItem: ToolItem): ToolbarItem; +export type TLUiToolbarSchemaContextType = TLUiToolbarItem[]; // @public (undocumented) -export const ToolbarSchemaContext: React_2.Context; - -// @public (undocumented) -export type ToolbarSchemaContextType = ToolbarItem[]; - -// @public (undocumented) -export function ToolbarSchemaProvider({ overrides, children }: ToolbarSchemaProviderProps): JSX.Element; - -// @public (undocumented) -export type ToolbarSchemaProviderProps = { - overrides?: (editor: Editor, schema: ToolbarSchemaContextType, more: { - tools: ToolsContextType; - }) => ToolbarSchemaContextType; - children: any; -}; - -// @public (undocumented) -export interface ToolItem { +export interface TLUiToolItem { // (undocumented) icon: TLUiIconType; // (undocumented) @@ -808,7 +559,7 @@ export interface ToolItem { // (undocumented) kbd?: string; // (undocumented) - label: TLTranslationKey; + label: TLUiTranslationKey; // (undocumented) meta?: { [key: string]: any; @@ -818,38 +569,35 @@ export interface ToolItem { // (undocumented) readonlyOk: boolean; // (undocumented) - shortcutsLabel?: TLTranslationKey; + shortcutsLabel?: TLUiTranslationKey; } // @public (undocumented) -export const ToolsContext: React_3.Context; +export type TLUiToolsContextType = Record; // @public (undocumented) -export type ToolsContextType = Record; - -// @public (undocumented) -export function ToolsProvider({ overrides, children }: ToolsProviderProps): JSX.Element; - -// @public (undocumented) -export type ToolsProviderProps = { - overrides?: (editor: Editor, tools: ToolsContextType, helpers: { +export type TLUiToolsProviderProps = { + overrides?: (editor: Editor, tools: TLUiToolsContextType, helpers: { insertMedia: () => void; - }) => ToolsContextType; + }) => TLUiToolsContextType; children: any; }; // @public (undocumented) -export function toStartCase(str: string): string; - -// @public -export const TranslationProvider: MemoExoticComponent<({ overrides, children, }: TranslationProviderProps) => JSX.Element>; +export type TLUiTranslation = { + readonly locale: string; + readonly label: string; + readonly messages: Record; +}; // @public (undocumented) -export interface TranslationProviderProps { - // (undocumented) - children: any; - overrides?: Record>; -} +export type TLUiTranslationContextType = TLUiTranslation; + +// @public (undocumented) +export type TLUiTranslationKey = 'action.align-bottom' | 'action.align-center-horizontal.short' | 'action.align-center-horizontal' | 'action.align-center-vertical.short' | 'action.align-center-vertical' | 'action.align-left' | 'action.align-right' | 'action.align-top' | 'action.back-to-content' | 'action.bring-forward' | 'action.bring-to-front' | 'action.convert-to-bookmark' | 'action.convert-to-embed' | 'action.copy-as-json.short' | 'action.copy-as-json' | 'action.copy-as-png.short' | 'action.copy-as-png' | 'action.copy-as-svg.short' | 'action.copy-as-svg' | 'action.copy' | 'action.cut' | 'action.delete' | 'action.distribute-horizontal.short' | 'action.distribute-horizontal' | 'action.distribute-vertical.short' | 'action.distribute-vertical' | 'action.duplicate' | 'action.edit-link' | 'action.exit-pen-mode' | 'action.export-as-json.short' | 'action.export-as-json' | 'action.export-as-png.short' | 'action.export-as-png' | 'action.export-as-svg.short' | 'action.export-as-svg' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | 'action.fork-project' | 'action.group' | 'action.insert-embed' | 'action.insert-media' | 'action.leave-shared-project' | 'action.new-project' | 'action.new-shared-project' | 'action.open-embed-link' | 'action.open-file' | 'action.pack' | 'action.paste' | 'action.print' | 'action.redo' | 'action.rotate-ccw' | 'action.rotate-cw' | 'action.save-copy' | 'action.select-all' | 'action.select-none' | 'action.send-backward' | 'action.send-to-back' | 'action.share-project' | 'action.stack-horizontal.short' | 'action.stack-horizontal' | 'action.stack-vertical.short' | 'action.stack-vertical' | 'action.stop-following' | 'action.stretch-horizontal.short' | 'action.stretch-horizontal' | 'action.stretch-vertical.short' | 'action.stretch-vertical' | 'action.toggle-auto-size' | 'action.toggle-dark-mode.menu' | 'action.toggle-dark-mode' | 'action.toggle-debug-mode.menu' | 'action.toggle-debug-mode' | 'action.toggle-focus-mode.menu' | 'action.toggle-focus-mode' | 'action.toggle-grid.menu' | 'action.toggle-grid' | 'action.toggle-lock' | 'action.toggle-reduce-motion.menu' | 'action.toggle-reduce-motion' | 'action.toggle-snap-mode.menu' | 'action.toggle-snap-mode' | 'action.toggle-tool-lock.menu' | 'action.toggle-tool-lock' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.undo' | 'action.ungroup' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-to-100' | 'action.zoom-to-fit' | 'action.zoom-to-selection' | 'actions-menu.title' | 'align-style.end' | 'align-style.justify' | 'align-style.middle' | 'align-style.start' | 'arrowheadEnd-style.arrow' | 'arrowheadEnd-style.bar' | 'arrowheadEnd-style.diamond' | 'arrowheadEnd-style.dot' | 'arrowheadEnd-style.inverted' | 'arrowheadEnd-style.none' | 'arrowheadEnd-style.pipe' | 'arrowheadEnd-style.square' | 'arrowheadEnd-style.triangle' | 'arrowheadStart-style.arrow' | 'arrowheadStart-style.bar' | 'arrowheadStart-style.diamond' | 'arrowheadStart-style.dot' | 'arrowheadStart-style.inverted' | 'arrowheadStart-style.none' | 'arrowheadStart-style.pipe' | 'arrowheadStart-style.square' | 'arrowheadStart-style.triangle' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context.pages.new-page' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'debug-panel.more' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'edit-pages-dialog.move-down' | 'edit-pages-dialog.move-up' | 'embed-dialog.back' | 'embed-dialog.cancel' | 'embed-dialog.create' | 'embed-dialog.instruction' | 'embed-dialog.invalid-url' | 'embed-dialog.title' | 'embed-dialog.url' | 'file-system.confirm-clear.cancel' | 'file-system.confirm-clear.continue' | 'file-system.confirm-clear.description' | 'file-system.confirm-clear.dont-show-again' | 'file-system.confirm-clear.title' | 'file-system.confirm-open.cancel' | 'file-system.confirm-open.description' | 'file-system.confirm-open.dont-show-again' | 'file-system.confirm-open.open' | 'file-system.confirm-open.title' | 'file-system.file-open-error.file-format-version-too-new' | 'file-system.file-open-error.generic-corrupted-file' | 'file-system.file-open-error.not-a-tldraw-file' | 'file-system.file-open-error.title' | 'file-system.shared-document-file-open-error.description' | 'file-system.shared-document-file-open-error.title' | 'fill-style.none' | 'fill-style.pattern' | 'fill-style.semi' | 'fill-style.solid' | 'focus-mode.toggle-focus-mode' | 'font-style.draw' | 'font-style.mono' | 'font-style.sans' | 'font-style.serif' | 'geo-style.arrow-down' | 'geo-style.arrow-left' | 'geo-style.arrow-right' | 'geo-style.arrow-up' | 'geo-style.check-box' | 'geo-style.diamond' | 'geo-style.ellipse' | 'geo-style.hexagon' | 'geo-style.octagon' | 'geo-style.oval' | 'geo-style.pentagon' | 'geo-style.rectangle' | 'geo-style.rhombus-2' | 'geo-style.rhombus' | 'geo-style.star' | 'geo-style.trapezoid' | 'geo-style.triangle' | 'geo-style.x-box' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.keyboard-shortcuts' | 'help-menu.title' | 'help-menu.twitter' | 'home-project-dialog.description' | 'home-project-dialog.ok' | 'home-project-dialog.title' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.language' | 'menu.preferences' | 'menu.title' | 'menu.view' | 'navigation-zone.toggle-minimap' | 'navigation-zone.zoom' | 'opacity-style.0.1' | 'opacity-style.0.25' | 'opacity-style.0.5' | 'opacity-style.0.75' | 'opacity-style.1' | 'page-menu.create-new-page' | 'page-menu.edit-done' | 'page-menu.edit-start' | 'page-menu.go-to-page' | 'page-menu.max-page-count-reached' | 'page-menu.new-page-initial-name' | 'page-menu.submenu.delete' | 'page-menu.submenu.duplicate-page' | 'page-menu.submenu.move-down' | 'page-menu.submenu.move-up' | 'page-menu.submenu.rename' | 'page-menu.submenu.title' | 'page-menu.title' | 'people-menu.change-color' | 'people-menu.change-name' | 'people-menu.follow' | 'people-menu.following' | 'people-menu.invite' | 'people-menu.leading' | 'people-menu.title' | 'people-menu.user' | 'rename-project-dialog.cancel' | 'rename-project-dialog.rename' | 'rename-project-dialog.title' | 'share-menu.copy-link-note' | 'share-menu.copy-link' | 'share-menu.copy-readonly-link-note' | 'share-menu.copy-readonly-link' | 'share-menu.create-snapshot-link' | 'share-menu.default-project-name' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | 'share-menu.readonly-link' | 'share-menu.save-note' | 'share-menu.share-project' | 'share-menu.snapshot-link-note' | 'share-menu.title' | 'share-menu.upload-failed' | 'sharing.confirm-leave.cancel' | 'sharing.confirm-leave.description' | 'sharing.confirm-leave.dont-show-again' | 'sharing.confirm-leave.leave' | 'sharing.confirm-leave.title' | 'shortcuts-dialog.edit' | 'shortcuts-dialog.file' | 'shortcuts-dialog.preferences' | 'shortcuts-dialog.title' | 'shortcuts-dialog.tools' | 'shortcuts-dialog.transform' | 'shortcuts-dialog.view' | 'size-style.l' | 'size-style.m' | 'size-style.s' | 'size-style.xl' | 'spline-style.cubic' | 'spline-style.line' | 'style-panel.align' | 'style-panel.arrowhead-end' | 'style-panel.arrowhead-start' | 'style-panel.arrowheads' | 'style-panel.color' | 'style-panel.dash' | 'style-panel.fill' | 'style-panel.font' | 'style-panel.geo' | 'style-panel.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.size' | 'style-panel.spline' | 'style-panel.title' | 'style-panel.vertical-align' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | 'tool-panel.drawing' | 'tool-panel.more' | 'tool-panel.shapes' | 'tool.arrow-down' | 'tool.arrow-left' | 'tool.arrow-right' | 'tool.arrow-up' | 'tool.arrow' | 'tool.asset' | 'tool.check-box' | 'tool.diamond' | 'tool.draw' | 'tool.ellipse' | 'tool.embed' | 'tool.eraser' | 'tool.frame' | 'tool.hand' | 'tool.hexagon' | 'tool.highlight' | 'tool.laser' | 'tool.line' | 'tool.note' | 'tool.octagon' | 'tool.oval' | 'tool.pentagon' | 'tool.rectangle' | 'tool.rhombus' | 'tool.select' | 'tool.star' | 'tool.text' | 'tool.trapezoid' | 'tool.triangle' | 'tool.x-box' | 'vscode.file-open.backup-failed' | 'vscode.file-open.backup-saved' | 'vscode.file-open.backup' | 'vscode.file-open.desc' | 'vscode.file-open.dont-show-again' | 'vscode.file-open.open'; + +// @public (undocumented) +export function toolbarItem(toolItem: TLUiToolItem): TLUiToolbarItem; // @public (undocumented) function Trigger({ children, 'data-testid': testId, }: { @@ -858,19 +606,13 @@ function Trigger({ children, 'data-testid': testId, }: { }): JSX.Element; // @public (undocumented) -export function useActions(): ActionsContextType; +export function useActions(): TLUiActionsContextType; // @public (undocumented) -export function useActionsMenuSchema(): MenuSchema; +export function useActionsMenuSchema(): TLUiMenuSchema; -// @public (undocumented) -export const useAllowGroup: () => boolean; - -// @public (undocumented) -export const useAllowUngroup: () => boolean; - -// @public (undocumented) -export function useAssetUrls(): UiAssetUrls; +// @internal (undocumented) +export function useAssetUrls(): TLUiAssetUrls; // @public (undocumented) export function useBreakpoint(): number; @@ -882,156 +624,45 @@ export function useCanRedo(): boolean; export function useCanUndo(): boolean; // @public (undocumented) -export function useContextMenuSchema(): MenuSchema; +export function useContextMenuSchema(): TLUiMenuSchema; // @public (undocumented) export function useCopyAs(): (ids?: TLShapeId[], format?: TLCopyType) => void; // @public (undocumented) export function useDefaultHelpers(): { - addToast: (toast: Omit & { + addToast: (toast: Omit & { id?: string | undefined; }) => string; removeToast: (id: string) => string; clearToasts: () => void; - addDialog: (dialog: Omit & { + addDialog: (dialog: Omit & { id?: string | undefined; }) => string; clearDialogs: () => void; removeDialog: (id: string) => string; - updateDialog: (id: string, newDialogData: Partial) => string; - msg: (id: TLTranslationKey) => string; + updateDialog: (id: string, newDialogData: Partial) => string; + msg: (id: TLUiTranslationKey) => string; isMobile: boolean; }; // @public (undocumented) -export function useDialogs(): DialogsContextType; +export function useDialogs(): TLUiDialogsContextType; // @public (undocumented) -export function useEditorEvents(): void; - -// @public (undocumented) -export function useEvents(): TLUiEventHandler; +export function useEvents(): TLUiEventContextType; // @public (undocumented) export function useExportAs(): (ids?: TLShapeId[], format?: TLExportType) => Promise; // @public (undocumented) -export function useHelpMenuSchema(): MenuSchema; - -// @public (undocumented) -export function useHighDpiCanvas(ref: React.RefObject, dpr: number): void; +export function useHelpMenuSchema(): TLUiMenuSchema; // @public (undocumented) export function useKeyboardShortcuts(): void; // @public (undocumented) -export function useKeyboardShortcutsSchema(): KeyboardShortcutsSchemaContextType; - -// @public (undocumented) -export function useLanguages(): { - languages: readonly [{ - readonly locale: "ar"; - readonly label: "عربي"; - }, { - readonly locale: "ca"; - readonly label: "Català"; - }, { - readonly locale: "da"; - readonly label: "Danish"; - }, { - readonly locale: "de"; - readonly label: "Deutsch"; - }, { - readonly locale: "en"; - readonly label: "English"; - }, { - readonly locale: "es"; - readonly label: "Español"; - }, { - readonly locale: "fa"; - readonly label: "فارسی"; - }, { - readonly locale: "fi"; - readonly label: "Suomi"; - }, { - readonly locale: "fr"; - readonly label: "Français"; - }, { - readonly locale: "gl"; - readonly label: "Galego"; - }, { - readonly locale: "he"; - readonly label: "עברית"; - }, { - readonly locale: "it"; - readonly label: "Italiano"; - }, { - readonly locale: "ja"; - readonly label: "日本語"; - }, { - readonly locale: "ko-kr"; - readonly label: "한국어"; - }, { - readonly locale: "ku"; - readonly label: "کوردی"; - }, { - readonly locale: "hi-in"; - readonly label: "हिन्दी"; - }, { - readonly locale: "hu"; - readonly label: "Magyar"; - }, { - readonly locale: "my"; - readonly label: "မြန်မာစာ"; - }, { - readonly locale: "ne"; - readonly label: "नेपाली"; - }, { - readonly locale: "no"; - readonly label: "Norwegian"; - }, { - readonly locale: "pl"; - readonly label: "Polski"; - }, { - readonly locale: "pt-br"; - readonly label: "Português - Brasil"; - }, { - readonly locale: "pt-pt"; - readonly label: "Português - Europeu"; - }, { - readonly locale: "ro"; - readonly label: "Română"; - }, { - readonly locale: "ru"; - readonly label: "Russian"; - }, { - readonly locale: "sv"; - readonly label: "Svenska"; - }, { - readonly locale: "te"; - readonly label: "తెలుగు"; - }, { - readonly locale: "th"; - readonly label: "ภาษาไทย"; - }, { - readonly locale: "tr"; - readonly label: "Türkçe"; - }, { - readonly locale: "uk"; - readonly label: "Ukrainian"; - }, { - readonly locale: "vi"; - readonly label: "Tiếng Việt"; - }, { - readonly locale: "zh-cn"; - readonly label: "Chinese - Simplified"; - }, { - readonly locale: "zh-tw"; - readonly label: "繁體中文 (台灣)"; - }]; - currentLanguage: string; -}; +export function useKeyboardShortcutsSchema(): TLUiKeyboardShortcutsSchemaContextType; // @public (undocumented) export function useLocalStorageState(key: string, defaultValue: T): readonly [T, (setter: ((value: T) => T) | T) => void]; @@ -1047,31 +678,25 @@ export function useMenuClipboardEvents(): { export function useMenuIsOpen(id: string, cb?: (isOpen: boolean) => void): readonly [boolean, (isOpen: boolean) => void]; // @public (undocumented) -export function useMenuSchema(): MenuSchema; +export function useMenuSchema(): TLUiMenuSchema; // @public (undocumented) export function useNativeClipboardEvents(): void; -// @public (undocumented) -export function usePrint(): () => Promise; - // @public (undocumented) export function useReadonly(): boolean; // @public (undocumented) -export const useThreeStackableItems: () => boolean; +export function useToasts(): TLUiToastsContextType; // @public (undocumented) -export function useToasts(): ToastsContextType; +export function useToolbarSchema(): TLUiToolbarSchemaContextType; // @public (undocumented) -export function useToolbarSchema(): ToolbarSchemaContextType; - -// @public (undocumented) -export function useTools(): ToolsContextType; +export function useTools(): TLUiToolsContextType; // @public -export function useTranslation(): (id: TLTranslationKey) => string; +export function useTranslation(): (id: TLUiTranslationKey) => string; // (No @packageDocumentation comment for this package) diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 3ee12f27e..27e5c6a0d 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,25 +1,16 @@ import * as Dialog from './lib/components/primitives/Dialog' import * as DropdownMenu from './lib/components/primitives/DropdownMenu' -export { TldrawUi, TldrawUiContent, type TldrawUiProps } from './lib/TldrawUi' +export { TldrawUi, type TldrawUiProps } from './lib/TldrawUi' export { TldrawUiContextProvider, type TldrawUiContextProviderProps, } from './lib/TldrawUiContextProvider' export { setDefaultUiAssetUrls } from './lib/assetUrls' -export { ContextMenu, type ContextMenuProps } from './lib/components/ContextMenu' -export { DebugPanel } from './lib/components/DebugPanel' -export { HTMLCanvas } from './lib/components/HTMLCanvas' -export { HelpMenu, type HelpMenuProps } from './lib/components/HelpMenu' -export { NavigationZone } from './lib/components/NavigationZone/NavigationZone' -export { StylePanel } from './lib/components/StylePanel/StylePanel' -export { Button, type ButtonProps } from './lib/components/primitives/Button' -export { ButtonPicker, type ButtonPickerProps } from './lib/components/primitives/ButtonPicker' -export { Icon, type IconProps } from './lib/components/primitives/Icon' -export { Input, type InputProps } from './lib/components/primitives/Input' -export { Kbd, type KbdProps } from './lib/components/primitives/Kbd' -export { Slider, type SliderProps } from './lib/components/primitives/Slider' -export { BASE_URL, getBaseUrl, kbd, kbdStr, toStartCase } from './lib/components/primitives/shared' +export { ContextMenu, type TLUiContextMenuProps } from './lib/components/ContextMenu' +export { Button, type TLUiButtonProps } from './lib/components/primitives/Button' +export { Icon, type TLUiIconProps } from './lib/components/primitives/Icon' +export { Input, type TLUiInputProps } from './lib/components/primitives/Input' export { compactMenuItems, findMenuItem, @@ -27,30 +18,21 @@ export { menuGroup, menuItem, menuSubmenu, - useAllowGroup, - useAllowUngroup, - useThreeStackableItems, - type CustomMenuItem, - type MenuChild, - type MenuGroup, - type MenuItem, - type MenuSchema, - type SubMenu, + type TLUiCustomMenuItem, + type TLUiMenuChild, + type TLUiMenuGroup, + type TLUiMenuItem, + type TLUiMenuSchema, + type TLUiSubMenu, } from './lib/hooks/menuHelpers' export { - ActionsContext, - ActionsProvider, useActions, - type ActionItem, - type ActionsContextType, - type ActionsProviderProps, + type TLUiActionItem, + type TLUiActionsContextType, } from './lib/hooks/useActions' export { - ActionsMenuSchemaContext, - ActionsMenuSchemaProvider, useActionsMenuSchema, - type ActionsMenuSchemaContextType, - type ActionsMenuSchemaProviderProps, + type TLUiActionsMenuSchemaContextType, } from './lib/hooks/useActionsMenuSchema' export { AssetUrlsProvider, useAssetUrls } from './lib/hooks/useAssetUrls' export { BreakPointProvider, useBreakpoint } from './lib/hooks/useBreakpoint' @@ -58,101 +40,65 @@ export { useCanRedo } from './lib/hooks/useCanRedo' export { useCanUndo } from './lib/hooks/useCanUndo' export { useMenuClipboardEvents, useNativeClipboardEvents } from './lib/hooks/useClipboardEvents' export { - ContextMenuSchemaContext, - ContextMenuSchemaProvider, useContextMenuSchema, - type ContextMenuSchemaContextType, - type ContextMenuSchemaProviderProps, + type TLUiContextTTLUiMenuSchemaContextType, } from './lib/hooks/useContextMenuSchema' export { useCopyAs } from './lib/hooks/useCopyAs' export { - DialogsContext, - DialogsProvider, useDialogs, - type DialogProps, - type DialogsContextType, - type DialogsProviderProps, - type TLDialog, + type TLUiDialog, + type TLUiDialogProps, + type TLUiDialogsContextType, } from './lib/hooks/useDialogsProvider' -export { useEditorEvents } from './lib/hooks/useEditorEvents' export { useEvents, - type EventsProviderProps, + type TLUiEventContextType, type TLUiEventHandler, type TLUiEventSource, } from './lib/hooks/useEventsProvider' export { useExportAs } from './lib/hooks/useExportAs' export { - HelpMenuSchemaContext, - HelpMenuSchemaProvider, useHelpMenuSchema, - type HelpMenuSchemaProviderProps, - type HelpMenuSchemaProviderType, + type TLUiHelpMenuSchemaContextType, } from './lib/hooks/useHelpMenuSchema' -export { useHighDpiCanvas } from './lib/hooks/useHighDpiCanvas' export { useKeyboardShortcuts } from './lib/hooks/useKeyboardShortcuts' export { - KeyboardShortcutsSchemaContext, - KeyboardShortcutsSchemaProvider, useKeyboardShortcutsSchema, - type KeyboardShortcutsSchemaContextType, - type KeyboardShortcutsSchemaProviderProps, + type TLUiKeyboardShortcutsSchemaContextType, + type TLUiKeyboardShortcutsSchemaProviderProps, } from './lib/hooks/useKeyboardShortcutsSchema' export { useLocalStorageState } from './lib/hooks/useLocalStorageState' export { useMenuIsOpen } from './lib/hooks/useMenuIsOpen' export { - MenuSchemaContext, - MenuSchemaProvider, useMenuSchema, - type MenuSchemaContextType, - type MenuSchemaProviderProps, + type TLUiMenuSchemaContextType, + type TLUiMenuSchemaProviderProps, } from './lib/hooks/useMenuSchema' -export { usePrint } from './lib/hooks/usePrint' export { useReadonly } from './lib/hooks/useReadonly' export { - ToastsContext, - ToastsProvider, useToasts, - type TLToast, - type TLToastAction, - type ToastsContextType, - type ToastsProviderProps, + type TLUiToast, + type TLUiToastAction, + type TLUiToastsContextType, } from './lib/hooks/useToastsProvider' export { - ToolbarSchemaContext, - ToolbarSchemaProvider, toolbarItem, useToolbarSchema, - type ToolbarItem, - type ToolbarSchemaContextType, - type ToolbarSchemaProviderProps, + type TLUiToolbarItem, + type TLUiToolbarSchemaContextType, } from './lib/hooks/useToolbarSchema' export { - ToolsContext, - ToolsProvider, useTools, - type ToolItem, - type ToolsContextType, - type ToolsProviderProps, + type TLUiToolItem, + type TLUiToolsContextType, + type TLUiToolsProviderProps, } from './lib/hooks/useTools' -export type { TLTranslationKey } from './lib/hooks/useTranslation/TLTranslationKey' +export { type TLUiTranslationKey } from './lib/hooks/useTranslation/TLUiTranslationKey' +export { type TLUiLanguage, type TLUiTranslation } from './lib/hooks/useTranslation/translations' export { - EN_TRANSLATION, - fetchTranslation, - getTranslation, - type TLListedTranslation, - type TLListedTranslations, - type TLTranslation, - type TLTranslationLocale, - type TLTranslationMessages, - type TLTranslations, -} from './lib/hooks/useTranslation/translations' -export { useLanguages } from './lib/hooks/useTranslation/useLanguages' -export { - TranslationProvider, - useTranslation, - type TranslationProviderProps, + useTranslation as useTranslation, + type TLUiTranslationContextType, } from './lib/hooks/useTranslation/useTranslation' -export { TLUiIconTypes, type TLUiIconType } from './lib/icon-types' -export { useDefaultHelpers, type TldrawUiOverrides } from './lib/overrides' +export { type TLUiIconType } from './lib/icon-types' +export { useDefaultHelpers, type TLUiOverrides } from './lib/overrides' export { Dialog, DropdownMenu } diff --git a/packages/ui/src/lib/TldrawUi.tsx b/packages/ui/src/lib/TldrawUi.tsx index 98f0c10b6..c0ded4c87 100644 --- a/packages/ui/src/lib/TldrawUi.tsx +++ b/packages/ui/src/lib/TldrawUi.tsx @@ -85,8 +85,7 @@ const TldrawUiInner = React.memo(function TldrawUiInner({ ) }) -/** @public */ -export const TldrawUiContent = React.memo(function TldrawUI({ +const TldrawUiContent = React.memo(function TldrawUI({ shareZone, topZone, renderDebugMenuItems, diff --git a/packages/ui/src/lib/TldrawUiContextProvider.tsx b/packages/ui/src/lib/TldrawUiContextProvider.tsx index 5241f3abe..840fcf3dc 100644 --- a/packages/ui/src/lib/TldrawUiContextProvider.tsx +++ b/packages/ui/src/lib/TldrawUiContextProvider.tsx @@ -1,24 +1,24 @@ -import { defaultUiAssetUrls, UiAssetUrls } from './assetUrls' +import { defaultUiAssetUrls, TLUiAssetUrls } from './assetUrls' import { ActionsProvider } from './hooks/useActions' import { ActionsMenuSchemaProvider } from './hooks/useActionsMenuSchema' import { AssetUrlsProvider } from './hooks/useAssetUrls' import { BreakPointProvider } from './hooks/useBreakpoint' -import { ContextMenuSchemaProvider } from './hooks/useContextMenuSchema' +import { TLUiContextMenuSchemaProvider } from './hooks/useContextMenuSchema' import { DialogsProvider } from './hooks/useDialogsProvider' import { EventsProvider, TLUiEventHandler } from './hooks/useEventsProvider' import { HelpMenuSchemaProvider } from './hooks/useHelpMenuSchema' import { KeyboardShortcutsSchemaProvider } from './hooks/useKeyboardShortcutsSchema' -import { MenuSchemaProvider } from './hooks/useMenuSchema' +import { TLUiMenuSchemaProvider } from './hooks/useMenuSchema' import { ToastsProvider } from './hooks/useToastsProvider' import { ToolbarSchemaProvider } from './hooks/useToolbarSchema' import { ToolsProvider } from './hooks/useTools' import { TranslationProvider } from './hooks/useTranslation/useTranslation' -import { TldrawUiOverrides, useMergedOverrides, useMergedTranslationOverrides } from './overrides' +import { TLUiOverrides, useMergedOverrides, useMergedTranslationOverrides } from './overrides' /** @public */ export interface TldrawUiContextProviderProps { - assetUrls?: UiAssetUrls - overrides?: TldrawUiOverrides | TldrawUiOverrides[] + assetUrls?: TLUiAssetUrls + overrides?: TLUiOverrides | TLUiOverrides[] onUiEvent?: TLUiEventHandler children?: any } @@ -57,13 +57,13 @@ function InternalProviders({ - + - + {children} - + - + diff --git a/packages/ui/src/lib/assetUrls.ts b/packages/ui/src/lib/assetUrls.ts index 26eb4f397..cb67aeebf 100644 --- a/packages/ui/src/lib/assetUrls.ts +++ b/packages/ui/src/lib/assetUrls.ts @@ -1,18 +1,19 @@ import { defaultEditorAssetUrls, EditorAssetUrls, EMBED_DEFINITIONS } from '@tldraw/editor' import { LANGUAGES } from './hooks/useTranslation/languages' -import { TLUiIconType, TLUiIconTypes } from './icon-types' +import { iconTypes, TLUiIconType } from './icon-types' -export type UiAssetUrls = EditorAssetUrls & { +export type TLUiAssetUrls = EditorAssetUrls & { icons: Record translations: Record<(typeof LANGUAGES)[number]['locale'], string> embedIcons: Record<(typeof EMBED_DEFINITIONS)[number]['type'], string> } -export let defaultUiAssetUrls: UiAssetUrls = { +export let defaultUiAssetUrls: TLUiAssetUrls = { ...defaultEditorAssetUrls, - icons: Object.fromEntries( - TLUiIconTypes.map((name) => [name, `/icons/icon/${name}.svg`]) - ) as Record, + icons: Object.fromEntries(iconTypes.map((name) => [name, `/icons/icon/${name}.svg`])) as Record< + TLUiIconType, + string + >, translations: Object.fromEntries( LANGUAGES.map((lang) => [lang.locale, `/translations/${lang.locale}.json`]) ) as Record<(typeof LANGUAGES)[number]['locale'], string>, @@ -22,6 +23,6 @@ export let defaultUiAssetUrls: UiAssetUrls = { } /** @internal */ -export function setDefaultUiAssetUrls(urls: UiAssetUrls) { +export function setDefaultUiAssetUrls(urls: TLUiAssetUrls) { defaultUiAssetUrls = urls } diff --git a/packages/ui/src/lib/components/ActionsMenu.tsx b/packages/ui/src/lib/components/ActionsMenu.tsx index 8fe92e141..14582acb1 100644 --- a/packages/ui/src/lib/components/ActionsMenu.tsx +++ b/packages/ui/src/lib/components/ActionsMenu.tsx @@ -1,7 +1,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover' import { useContainer } from '@tldraw/editor' import { memo } from 'react' -import { MenuChild } from '../hooks/menuHelpers' +import { TLUiMenuChild } from '../hooks/menuHelpers' import { useActionsMenuSchema } from '../hooks/useActionsMenuSchema' import { useReadonly } from '../hooks/useReadonly' import { useTranslation } from '../hooks/useTranslation/useTranslation' @@ -15,7 +15,7 @@ export const ActionsMenu = memo(function ActionsMenu() { const menuSchema = useActionsMenuSchema() const isReadonly = useReadonly() - function getActionMenuItem(item: MenuChild) { + function getActionMenuItem(item: TLUiMenuChild) { if (isReadonly && !item.readonlyOk) return null switch (item.type) { diff --git a/packages/ui/src/lib/components/ContextMenu.tsx b/packages/ui/src/lib/components/ContextMenu.tsx index 4deb14c2f..6493a5c24 100644 --- a/packages/ui/src/lib/components/ContextMenu.tsx +++ b/packages/ui/src/lib/components/ContextMenu.tsx @@ -3,7 +3,7 @@ import { Editor, preventDefault, useContainer, useEditor } from '@tldraw/editor' import classNames from 'classnames' import * as React from 'react' import { useValue } from 'signia-react' -import { MenuChild } from '../hooks/menuHelpers' +import { TLUiMenuChild } from '../hooks/menuHelpers' import { useBreakpoint } from '../hooks/useBreakpoint' import { useContextMenuSchema } from '../hooks/useContextMenuSchema' import { useMenuIsOpen } from '../hooks/useMenuIsOpen' @@ -15,7 +15,7 @@ import { Icon } from './primitives/Icon' import { Kbd } from './primitives/Kbd' /** @public */ -export interface ContextMenuProps { +export interface TLUiContextMenuProps { children: any } @@ -23,7 +23,7 @@ export interface ContextMenuProps { export const ContextMenu = function ContextMenu({ children }: { children: any }) { const editor = useEditor() - const contextMenuSchema = useContextMenuSchema() + const contextTLUiMenuSchema = useContextMenuSchema() const cb = (isOpen: boolean) => { if (isOpen) return if (shouldDeselect(editor)) { @@ -37,8 +37,8 @@ export const ContextMenu = function ContextMenu({ children }: { children: any }) const isReadonly = useReadonly() const noItemsToShow = - contextMenuSchema.length === 0 || - (isReadonly && contextMenuSchema.every((item) => !item.readonlyOk)) + contextTLUiMenuSchema.length === 0 || + (isReadonly && contextTLUiMenuSchema.every((item) => !item.readonlyOk)) const selectToolActive = useValue('isSelectToolActive', () => editor.currentToolId === 'select', [ editor, @@ -80,8 +80,8 @@ function ContextMenuContent() { function getContextMenuItem( editor: Editor, - item: MenuChild, - parent: MenuChild | null, + item: TLUiMenuChild, + parent: TLUiMenuChild | null, depth: number ) { if (isReadonly && !item.readonlyOk) return null diff --git a/packages/ui/src/lib/components/DebugPanel.tsx b/packages/ui/src/lib/components/DebugPanel.tsx index 27b2638b2..df757aa00 100644 --- a/packages/ui/src/lib/components/DebugPanel.tsx +++ b/packages/ui/src/lib/components/DebugPanel.tsx @@ -38,7 +38,7 @@ function createNShapes(editor: Editor, n: number) { }) } -/** @public */ +/** @internal */ export const DebugPanel = React.memo(function DebugPanel({ renderDebugMenuItems, }: { @@ -96,7 +96,7 @@ const DebugMenuContent = track(function DebugMenuContent({ // icon?: string // title?: string // description?: string - // actions?: TLToastAction[] + // actions?: TLUiToastAction[] }) }} > diff --git a/packages/ui/src/lib/components/Dialogs.tsx b/packages/ui/src/lib/components/Dialogs.tsx index 61e2eda94..95430d07f 100644 --- a/packages/ui/src/lib/components/Dialogs.tsx +++ b/packages/ui/src/lib/components/Dialogs.tsx @@ -1,9 +1,9 @@ import * as _Dialog from '@radix-ui/react-dialog' import { useContainer } from '@tldraw/editor' import React, { useCallback } from 'react' -import { TLDialog, useDialogs } from '../hooks/useDialogsProvider' +import { TLUiDialog, useDialogs } from '../hooks/useDialogsProvider' -const Dialog = ({ id, component: ModalContent, onClose }: TLDialog) => { +const Dialog = ({ id, component: ModalContent, onClose }: TLUiDialog) => { const { removeDialog } = useDialogs() const container = useContainer() @@ -42,7 +42,7 @@ function _Dialogs() { return ( <> - {dialogs.map((dialog: TLDialog) => ( + {dialogs.map((dialog: TLUiDialog) => ( ))} diff --git a/packages/ui/src/lib/components/EditLinkDialog.tsx b/packages/ui/src/lib/components/EditLinkDialog.tsx index 0a548bca8..affff97b4 100644 --- a/packages/ui/src/lib/components/EditLinkDialog.tsx +++ b/packages/ui/src/lib/components/EditLinkDialog.tsx @@ -1,7 +1,7 @@ import { TLBaseShape, TLBookmarkUtil, useEditor } from '@tldraw/editor' import { useCallback, useRef, useState } from 'react' import { track } from 'signia-react' -import { DialogProps } from '../hooks/useDialogsProvider' +import { TLUiDialogProps } from '../hooks/useDialogsProvider' import { useTranslation } from '../hooks/useTranslation/useTranslation' import { Button } from './primitives/Button' import * as Dialog from './primitives/Dialog' @@ -21,7 +21,7 @@ function validateUrl(url: string) { type ShapeWithUrl = TLBaseShape -export const EditLinkDialog = track(function EditLinkDialog({ onClose }: DialogProps) { +export const EditLinkDialog = track(function EditLinkDialog({ onClose }: TLUiDialogProps) { const editor = useEditor() const selectedShape = editor.onlySelectedShape @@ -38,7 +38,7 @@ export const EditLinkDialog = track(function EditLinkDialog({ onClose }: DialogP export const EditLinkDialogInner = track(function EditLinkDialogInner({ onClose, selectedShape, -}: DialogProps & { selectedShape: ShapeWithUrl }) { +}: TLUiDialogProps & { selectedShape: ShapeWithUrl }) { const editor = useEditor() const msg = useTranslation() diff --git a/packages/ui/src/lib/components/EmbedDialog.tsx b/packages/ui/src/lib/components/EmbedDialog.tsx index 6b6efc4b1..a4a19b169 100644 --- a/packages/ui/src/lib/components/EmbedDialog.tsx +++ b/packages/ui/src/lib/components/EmbedDialog.tsx @@ -3,14 +3,14 @@ import { EMBED_DEFINITIONS, EmbedDefinition } from '@tldraw/tlschema' import { useRef, useState } from 'react' import { track } from 'signia-react' import { useAssetUrls } from '../hooks/useAssetUrls' -import { DialogProps } from '../hooks/useDialogsProvider' +import { TLUiDialogProps } from '../hooks/useDialogsProvider' import { useTranslation } from '../hooks/useTranslation/useTranslation' import { Button } from './primitives/Button' import * as Dialog from './primitives/Dialog' import { Icon } from './primitives/Icon' import { Input } from './primitives/Input' -export const EmbedDialog = track(function EmbedDialog({ onClose }: DialogProps) { +export const EmbedDialog = track(function EmbedDialog({ onClose }: TLUiDialogProps) { const editor = useEditor() const msg = useTranslation() const assetUrls = useAssetUrls() diff --git a/packages/ui/src/lib/components/HTMLCanvas.tsx b/packages/ui/src/lib/components/HTMLCanvas.tsx index a45843c86..b355b0e8d 100644 --- a/packages/ui/src/lib/components/HTMLCanvas.tsx +++ b/packages/ui/src/lib/components/HTMLCanvas.tsx @@ -2,7 +2,7 @@ import { useEditor } from '@tldraw/editor' import * as React from 'react' import { track } from 'signia-react' -/** @public */ +/** @internal */ export const HTMLCanvas = track(function HTMLCanvas() { const editor = useEditor() const rCanvas = React.useRef(null) diff --git a/packages/ui/src/lib/components/HelpMenu.tsx b/packages/ui/src/lib/components/HelpMenu.tsx index 41ee3e61f..f3c6edb0d 100644 --- a/packages/ui/src/lib/components/HelpMenu.tsx +++ b/packages/ui/src/lib/components/HelpMenu.tsx @@ -1,11 +1,11 @@ import { Content, Portal, Root, Trigger } from '@radix-ui/react-dropdown-menu' import { useContainer } from '@tldraw/editor' import * as React from 'react' -import { MenuChild } from '../hooks/menuHelpers' +import { TLUiMenuChild } from '../hooks/menuHelpers' import { useHelpMenuSchema } from '../hooks/useHelpMenuSchema' import { useMenuIsOpen } from '../hooks/useMenuIsOpen' import { useReadonly } from '../hooks/useReadonly' -import { TLTranslationKey } from '../hooks/useTranslation/TLTranslationKey' +import { TLUiTranslationKey } from '../hooks/useTranslation/TLUiTranslationKey' import { useTranslation } from '../hooks/useTranslation/useTranslation' import { TLUiIconType } from '../icon-types' import { LanguageMenu } from './LanguageMenu' @@ -13,17 +13,17 @@ import * as M from './primitives/DropdownMenu' import { Icon } from './primitives/Icon' interface HelpMenuLink { - label: TLTranslationKey + label: TLUiTranslationKey icon: TLUiIconType url: string } -/** @public */ +/** @internal */ export interface HelpMenuProps { links?: HelpMenuLink[] } -/** @public */ +/** @internal */ export const HelpMenu = React.memo(function HelpMenu() { const container = useContainer() const msg = useTranslation() @@ -61,7 +61,7 @@ function HelpMenuContent() { const isReadonly = useReadonly() - function getHelpMenuItem(item: MenuChild) { + function getHelpMenuItem(item: TLUiMenuChild) { if (isReadonly && !item.readonlyOk) return null switch (item.type) { diff --git a/packages/ui/src/lib/components/KeyboardShortcutsDialog.tsx b/packages/ui/src/lib/components/KeyboardShortcutsDialog.tsx index 265b4e1cb..98ea0116c 100644 --- a/packages/ui/src/lib/components/KeyboardShortcutsDialog.tsx +++ b/packages/ui/src/lib/components/KeyboardShortcutsDialog.tsx @@ -1,7 +1,7 @@ -import { MenuChild } from '../hooks/menuHelpers' +import { TLUiMenuChild } from '../hooks/menuHelpers' import { useKeyboardShortcutsSchema } from '../hooks/useKeyboardShortcutsSchema' import { useReadonly } from '../hooks/useReadonly' -import { TLTranslationKey } from '../hooks/useTranslation/TLTranslationKey' +import { TLUiTranslationKey } from '../hooks/useTranslation/TLUiTranslationKey' import { useTranslation } from '../hooks/useTranslation/useTranslation' import * as Dialog from './primitives/Dialog' import { Kbd } from './primitives/Kbd' @@ -11,7 +11,7 @@ export const KeyboardShortcutsDialog = () => { const isReadonly = useReadonly() const shortcutsItems = useKeyboardShortcutsSchema() - function getKeyboardShortcutItem(item: MenuChild) { + function getKeyboardShortcutItem(item: TLUiMenuChild) { if (isReadonly && !item.readonlyOk) return null switch (item.type) { @@ -19,7 +19,7 @@ export const KeyboardShortcutsDialog = () => { return (

- {msg(item.id as TLTranslationKey)} + {msg(item.id as TLUiTranslationKey)}

{item.children diff --git a/packages/ui/src/lib/components/LanguageMenu.tsx b/packages/ui/src/lib/components/LanguageMenu.tsx index a93aafaa0..e93caacf9 100644 --- a/packages/ui/src/lib/components/LanguageMenu.tsx +++ b/packages/ui/src/lib/components/LanguageMenu.tsx @@ -1,6 +1,6 @@ import { useEditor } from '@tldraw/editor' import { useCallback } from 'react' -import { TLTranslationLocale } from '../hooks/useTranslation/translations' +import { TLUiTranslation } from '../hooks/useTranslation/translations' import { useLanguages } from '../hooks/useTranslation/useLanguages' import * as D from './primitives/DropdownMenu' @@ -9,7 +9,7 @@ export function LanguageMenu() { const { languages, currentLanguage } = useLanguages() const handleLanguageSelect = useCallback( - (locale: TLTranslationLocale) => editor.setLocale(locale), + (locale: TLUiTranslation['locale']) => editor.setLocale(locale), [editor] ) diff --git a/packages/ui/src/lib/components/Menu.tsx b/packages/ui/src/lib/components/Menu.tsx index 319a71525..64d089247 100644 --- a/packages/ui/src/lib/components/Menu.tsx +++ b/packages/ui/src/lib/components/Menu.tsx @@ -1,6 +1,6 @@ import { Editor, useEditor } from '@tldraw/editor' import * as React from 'react' -import { MenuChild } from '../hooks/menuHelpers' +import { TLUiMenuChild } from '../hooks/menuHelpers' import { useBreakpoint } from '../hooks/useBreakpoint' import { useMenuSchema } from '../hooks/useMenuSchema' import { useReadonly } from '../hooks/useReadonly' @@ -37,7 +37,12 @@ function MenuContent() { const breakpoint = useBreakpoint() const isReadonly = useReadonly() - function getMenuItem(editor: Editor, item: MenuChild, parent: MenuChild | null, depth: number) { + function getMenuItem( + editor: Editor, + item: TLUiMenuChild, + parent: TLUiMenuChild | null, + depth: number + ) { switch (item.type) { case 'custom': { if (isReadonly && !item.readonlyOk) return null diff --git a/packages/ui/src/lib/components/NavigationZone/NavigationZone.tsx b/packages/ui/src/lib/components/NavigationZone/NavigationZone.tsx index 5b4f304a8..11cca7dc0 100644 --- a/packages/ui/src/lib/components/NavigationZone/NavigationZone.tsx +++ b/packages/ui/src/lib/components/NavigationZone/NavigationZone.tsx @@ -8,7 +8,7 @@ import { Button } from '../primitives/Button' import { kbdStr } from '../primitives/shared' import { ZoomMenu } from './ZoomMenu' -/** @public */ +/** @internal */ export const NavigationZone = memo(function NavigationZone() { const actions = useActions() const msg = useTranslation() diff --git a/packages/ui/src/lib/components/StylePanel/DoubleDropdownPicker.tsx b/packages/ui/src/lib/components/StylePanel/DoubleDropdownPicker.tsx index 73589fa40..8c448c5ee 100644 --- a/packages/ui/src/lib/components/StylePanel/DoubleDropdownPicker.tsx +++ b/packages/ui/src/lib/components/StylePanel/DoubleDropdownPicker.tsx @@ -2,7 +2,7 @@ import { Trigger } from '@radix-ui/react-dropdown-menu' import { Editor, TLStyleItem, TLStyleType } from '@tldraw/editor' import classNames from 'classnames' import * as React from 'react' -import { TLTranslationKey } from '../../hooks/useTranslation/TLTranslationKey' +import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey' import { useTranslation } from '../../hooks/useTranslation/useTranslation' import { TLUiIconType } from '../../icon-types' import { Button } from '../primitives/Button' @@ -11,9 +11,9 @@ import * as DropdownMenu from '../primitives/DropdownMenu' type AllStyles = typeof Editor.styles interface DoubleDropdownPickerProps { - label: TLTranslationKey - labelA: TLTranslationKey - labelB: TLTranslationKey + label: TLUiTranslationKey + labelA: TLUiTranslationKey + labelB: TLUiTranslationKey itemsA: T[] itemsB: T[] styleTypeA: TLStyleType @@ -69,7 +69,7 @@ export const DoubleDropdownPicker = React.memo(function DoubleDropdownPicker< ' — ' + (valueA === null ? msg('style-panel.mixed') - : msg(`${styleTypeA}-style.${valueA}` as TLTranslationKey)) + : msg(`${styleTypeA}-style.${valueA}` as TLUiTranslationKey)) } icon={iconA as any} invertIcon @@ -88,7 +88,9 @@ export const DoubleDropdownPicker = React.memo(function DoubleDropdownPicker< { id: string - label?: TLTranslationKey + label?: TLUiTranslationKey items: T[] styleType: TLStyleType value: T['id'] | null @@ -43,7 +43,7 @@ export const DropdownPicker = React.memo(function DropdownPicker< title={ value === null ? msg('style-panel.mixed') - : msg(`${styleType}-style.${value}` as TLTranslationKey) + : msg(`${styleType}-style.${value}` as TLUiTranslationKey) } label={label} icon={(icon as TLUiIconType) ?? 'mixed'} @@ -62,7 +62,7 @@ export const DropdownPicker = React.memo(function DropdownPicker< onValueChange(item as TLStyleItem, false)} diff --git a/packages/ui/src/lib/components/StylePanel/StylePanel.tsx b/packages/ui/src/lib/components/StylePanel/StylePanel.tsx index f1d476687..8dea88f9e 100644 --- a/packages/ui/src/lib/components/StylePanel/StylePanel.tsx +++ b/packages/ui/src/lib/components/StylePanel/StylePanel.tsx @@ -13,7 +13,7 @@ interface StylePanelProps { isMobile?: boolean } -/** @public */ +/** @internal */ export const StylePanel = function StylePanel({ isMobile }: StylePanelProps) { const editor = useEditor() diff --git a/packages/ui/src/lib/components/Toasts.tsx b/packages/ui/src/lib/components/Toasts.tsx index 922853bf0..efe8a6169 100644 --- a/packages/ui/src/lib/components/Toasts.tsx +++ b/packages/ui/src/lib/components/Toasts.tsx @@ -1,12 +1,12 @@ import * as T from '@radix-ui/react-toast' import * as React from 'react' -import { TLToast, useToasts } from '../hooks/useToastsProvider' +import { TLUiToast, useToasts } from '../hooks/useToastsProvider' import { useTranslation } from '../hooks/useTranslation/useTranslation' import { TLUiIconType } from '../icon-types' import { Button } from './primitives/Button' import { Icon } from './primitives/Icon' -function Toast({ toast }: { toast: TLToast }) { +function Toast({ toast }: { toast: TLUiToast }) { const { removeToast } = useToasts() const msg = useTranslation() diff --git a/packages/ui/src/lib/components/Toolbar/Toolbar.tsx b/packages/ui/src/lib/components/Toolbar/Toolbar.tsx index 3ccfd3c96..dd2dfb536 100644 --- a/packages/ui/src/lib/components/Toolbar/Toolbar.tsx +++ b/packages/ui/src/lib/components/Toolbar/Toolbar.tsx @@ -4,8 +4,8 @@ import React from 'react' import { track, useValue } from 'signia-react' import { useBreakpoint } from '../../hooks/useBreakpoint' import { useReadonly } from '../../hooks/useReadonly' -import { ToolbarItem, useToolbarSchema } from '../../hooks/useToolbarSchema' -import { ToolItem } from '../../hooks/useTools' +import { TLUiToolbarItem, useToolbarSchema } from '../../hooks/useToolbarSchema' +import { TLUiToolItem } from '../../hooks/useTools' import { useTranslation } from '../../hooks/useTranslation/useTranslation' import { ActionsMenu } from '../ActionsMenu' import { DuplicateButton } from '../DuplicateButton' @@ -24,7 +24,7 @@ export const Toolbar = function Toolbar() { const msg = useTranslation() const breakpoint = useBreakpoint() - const rMostRecentlyActiveDropdownItem = React.useRef(undefined) + const rMostRecentlyActiveDropdownItem = React.useRef(undefined) const isReadOnly = useReadonly() const toolbarItems = useToolbarSchema() @@ -38,17 +38,17 @@ export const Toolbar = function Toolbar() { const showEditingTools = !isReadOnly const showExtraActions = !(isReadOnly || isHandTool) - const getTitle = (item: ToolItem) => + const getTitle = (item: TLUiToolItem) => item.label ? `${msg(item.label)} ${item.kbd ? kbdStr(item.kbd) : ''}` : '' - const activeToolbarItem = toolbarItems.find((item) => { - return isActiveToolItem(item.toolItem, activeToolId, geoState) + const activeTLUiToolbarItem = toolbarItems.find((item) => { + return isActiveTLUiToolItem(item.toolItem, activeToolId, geoState) }) const { itemsInPanel, itemsInDropdown, dropdownFirstItem } = React.useMemo(() => { - const itemsInPanel: ToolbarItem[] = [] - const itemsInDropdown: ToolbarItem[] = [] - let dropdownFirstItem: ToolbarItem | undefined + const itemsInPanel: TLUiToolbarItem[] = [] + const itemsInDropdown: TLUiToolbarItem[] = [] + let dropdownFirstItem: TLUiToolbarItem | undefined const overflowIndex = Math.min(8, 5 + breakpoint) @@ -60,7 +60,7 @@ export const Toolbar = function Toolbar() { } else { // Items above will be in the dropdown menu unless the item // is active (or was the most recently selected active item) - if (item === activeToolbarItem) { + if (item === activeTLUiToolbarItem) { // If the dropdown item is active, make it the dropdownFirstItem dropdownFirstItem = item } @@ -103,7 +103,7 @@ export const Toolbar = function Toolbar() { } return { itemsInPanel, itemsInDropdown, dropdownFirstItem } - }, [toolbarItems, activeToolbarItem, breakpoint]) + }, [toolbarItems, activeTLUiToolbarItem, breakpoint]) return (
@@ -139,7 +139,7 @@ export const Toolbar = function Toolbar() { key={toolItem.id} item={toolItem} title={getTitle(toolItem)} - isSelected={isActiveToolItem(toolItem, activeToolId, geoState)} + isSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)} /> ) })} @@ -148,7 +148,7 @@ export const Toolbar = function Toolbar() { key={laserTool.toolItem.id} item={laserTool.toolItem} title={getTitle(laserTool.toolItem)} - isSelected={isActiveToolItem(laserTool.toolItem, activeToolId, geoState)} + isSelected={isActiveTLUiToolItem(laserTool.toolItem, activeToolId, geoState)} /> )} {showEditingTools && ( @@ -160,7 +160,7 @@ export const Toolbar = function Toolbar() { key={toolItem.id} item={toolItem} title={getTitle(toolItem)} - isSelected={isActiveToolItem(toolItem, activeToolId, geoState)} + isSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)} /> ))} {/* Everything Else */} @@ -170,7 +170,7 @@ export const Toolbar = function Toolbar() { key={toolItem.id} item={toolItem} title={getTitle(toolItem)} - isSelected={isActiveToolItem(toolItem, activeToolId, geoState)} + isSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)} /> ))} {/* Overflowing Shapes */} @@ -181,7 +181,7 @@ export const Toolbar = function Toolbar() { key={dropdownFirstItem.toolItem.id} item={dropdownFirstItem.toolItem} title={getTitle(dropdownFirstItem.toolItem)} - isSelected={isActiveToolItem( + isSelected={isActiveTLUiToolItem( dropdownFirstItem.toolItem, activeToolId, geoState @@ -220,7 +220,7 @@ export const Toolbar = function Toolbar() { const OverflowToolsContent = track(function OverflowToolsContent({ toolbarItems, }: { - toolbarItems: ToolbarItem[] + toolbarItems: TLUiToolbarItem[] }) { const msg = useTranslation() @@ -250,7 +250,7 @@ function ToolbarButton({ title, isSelected, }: { - item: ToolItem + item: TLUiToolItem title: string isSelected: boolean }) { @@ -273,8 +273,8 @@ function ToolbarButton({ ) } -const isActiveToolItem = ( - item: ToolItem, +const isActiveTLUiToolItem = ( + item: TLUiToolItem, activeToolId: string | undefined, geoState: string | null | undefined ) => { diff --git a/packages/ui/src/lib/components/primitives/Button.tsx b/packages/ui/src/lib/components/primitives/Button.tsx index eb5cea338..f969210a3 100644 --- a/packages/ui/src/lib/components/primitives/Button.tsx +++ b/packages/ui/src/lib/components/primitives/Button.tsx @@ -1,6 +1,6 @@ import classnames from 'classnames' import * as React from 'react' -import { TLTranslationKey } from '../../hooks/useTranslation/TLTranslationKey' +import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey' import { useTranslation } from '../../hooks/useTranslation/useTranslation' import { TLUiIconType } from '../../icon-types' import { Spinner } from '../Spinner' @@ -8,10 +8,10 @@ import { Icon } from './Icon' import { Kbd } from './Kbd' /** @public */ -export interface ButtonProps extends React.HTMLAttributes { +export interface TLUiButtonProps extends React.HTMLAttributes { loading?: boolean // TODO: loading spinner disabled?: boolean - label?: TLTranslationKey + label?: TLUiTranslationKey icon?: TLUiIconType spinner?: boolean iconLeft?: TLUiIconType @@ -23,7 +23,7 @@ export interface ButtonProps extends React.HTMLAttributes { } /** @public */ -export const Button = React.forwardRef(function Button( +export const Button = React.forwardRef(function Button( { label, icon, diff --git a/packages/ui/src/lib/components/primitives/ButtonPicker.tsx b/packages/ui/src/lib/components/primitives/ButtonPicker.tsx index 451948a65..f86b35683 100644 --- a/packages/ui/src/lib/components/primitives/ButtonPicker.tsx +++ b/packages/ui/src/lib/components/primitives/ButtonPicker.tsx @@ -3,12 +3,12 @@ import { clamp } from '@tldraw/primitives' import classNames from 'classnames' import * as React from 'react' import { useRef } from 'react' -import { TLTranslationKey } from '../../hooks/useTranslation/TLTranslationKey' +import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey' import { useTranslation } from '../../hooks/useTranslation/useTranslation' import { TLUiIconType } from '../../icon-types' import { Button } from './Button' -/** @public */ +/** @internal */ export interface ButtonPickerProps { title: string items: T[] @@ -97,7 +97,7 @@ function _ButtonPicker(props: ButtonPickerProps) { data-testid={`${props['data-testid']}.${item.id}`} aria-label={item.id} data-state={value === item.id ? 'hinted' : undefined} - title={title + ' — ' + msg(`${styleType}-style.${item.id}` as TLTranslationKey)} + title={title + ' — ' + msg(`${styleType}-style.${item.id}` as TLUiTranslationKey)} className={classNames('tlui-button-grid__button')} style={item.type === 'color' ? { color: `var(--palette-${item.id})` } : undefined} onPointerEnter={handleButtonPointerEnter} @@ -111,5 +111,5 @@ function _ButtonPicker(props: ButtonPickerProps) { ) } -/** @public */ +/** @internal */ export const ButtonPicker = React.memo(_ButtonPicker) diff --git a/packages/ui/src/lib/components/primitives/DropdownMenu.tsx b/packages/ui/src/lib/components/primitives/DropdownMenu.tsx index 927042cba..38d958002 100644 --- a/packages/ui/src/lib/components/primitives/DropdownMenu.tsx +++ b/packages/ui/src/lib/components/primitives/DropdownMenu.tsx @@ -1,8 +1,8 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu' import { preventDefault, useContainer } from '@tldraw/editor' import { useMenuIsOpen } from '../../hooks/useMenuIsOpen' -import { TLTranslationKey } from '../../hooks/useTranslation/TLTranslationKey' -import { Button, ButtonProps } from './Button' +import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey' +import { Button, TLUiButtonProps } from './Button' import { Icon } from './Icon' /** @public */ @@ -88,7 +88,7 @@ export function SubTrigger({ 'data-testid': testId, 'data-direction': dataDirection, }: { - label: TLTranslationKey + label: TLUiTranslationKey 'data-testid'?: string 'data-direction'?: 'left' | 'right' }) { @@ -153,7 +153,7 @@ export function Indicator() { } /** @public */ -export interface DropdownMenuItemProps extends ButtonProps { +export interface DropdownMenuItemProps extends TLUiButtonProps { noClose?: boolean } diff --git a/packages/ui/src/lib/components/primitives/Icon.tsx b/packages/ui/src/lib/components/primitives/Icon.tsx index 7b6b7cb29..b4a1043d5 100644 --- a/packages/ui/src/lib/components/primitives/Icon.tsx +++ b/packages/ui/src/lib/components/primitives/Icon.tsx @@ -4,7 +4,7 @@ import { useAssetUrls } from '../../hooks/useAssetUrls' import { TLUiIconType } from '../../icon-types' /** @public */ -export interface IconProps extends React.HTMLProps { +export interface TLUiIconProps extends React.HTMLProps { icon: TLUiIconType small?: boolean color?: string @@ -21,7 +21,7 @@ export const Icon = memo(function Icon({ color, className, ...props -}: IconProps) { +}: TLUiIconProps) { const assetUrls = useAssetUrls() const asset = assetUrls.icons[icon] const ref = useRef(null) diff --git a/packages/ui/src/lib/components/primitives/Input.tsx b/packages/ui/src/lib/components/primitives/Input.tsx index 9f53aa63c..d2deb8673 100644 --- a/packages/ui/src/lib/components/primitives/Input.tsx +++ b/packages/ui/src/lib/components/primitives/Input.tsx @@ -1,14 +1,14 @@ import classNames from 'classnames' import * as React from 'react' -import { TLTranslationKey } from '../../hooks/useTranslation/TLTranslationKey' +import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey' import { useTranslation } from '../../hooks/useTranslation/useTranslation' import { TLUiIconType } from '../../icon-types' import { Icon } from './Icon' /** @public */ -export interface InputProps { +export interface TLUiInputProps { disabled?: boolean - label?: TLTranslationKey + label?: TLUiTranslationKey icon?: TLUiIconType iconLeft?: TLUiIconType autofocus?: boolean @@ -34,7 +34,7 @@ export interface InputProps { } /** @public */ -export const Input = React.forwardRef(function Input( +export const Input = React.forwardRef(function Input( { className, label, diff --git a/packages/ui/src/lib/components/primitives/Kbd.tsx b/packages/ui/src/lib/components/primitives/Kbd.tsx index e0f5e8db3..23747a6de 100644 --- a/packages/ui/src/lib/components/primitives/Kbd.tsx +++ b/packages/ui/src/lib/components/primitives/Kbd.tsx @@ -1,11 +1,11 @@ import { kbd } from './shared' -/** @public */ +/** @internal */ export interface KbdProps { children: string } -/** @public */ +/** @internal */ export function Kbd({ children }: KbdProps) { return ( diff --git a/packages/ui/src/lib/components/primitives/Slider.tsx b/packages/ui/src/lib/components/primitives/Slider.tsx index 1970c93e3..1e6f47ba3 100644 --- a/packages/ui/src/lib/components/primitives/Slider.tsx +++ b/packages/ui/src/lib/components/primitives/Slider.tsx @@ -1,10 +1,10 @@ import { Range, Root, Thumb, Track } from '@radix-ui/react-slider' import { useEditor } from '@tldraw/editor' import { useCallback } from 'react' -import { TLTranslationKey } from '../../hooks/useTranslation/TLTranslationKey' +import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey' import { useTranslation } from '../../hooks/useTranslation/useTranslation' -/** @public */ +/** @internal */ export interface SliderProps { steps: number value: number | null @@ -14,7 +14,7 @@ export interface SliderProps { 'data-testid'?: string } -/** @public */ +/** @internal */ export function Slider(props: SliderProps) { const { title, steps, value, label, onValueChange } = props const editor = useEditor() @@ -50,7 +50,7 @@ export function Slider(props: SliderProps) { onPointerDown={handlePointerDown} onValueChange={handleValueChange} onPointerUp={handlePointerUp} - title={title + ' — ' + msg(label as TLTranslationKey)} + title={title + ' — ' + msg(label as TLUiTranslationKey)} > {value !== null && } diff --git a/packages/ui/src/lib/components/primitives/shared.ts b/packages/ui/src/lib/components/primitives/shared.ts index ab976939b..56c8c0b6a 100644 --- a/packages/ui/src/lib/components/primitives/shared.ts +++ b/packages/ui/src/lib/components/primitives/shared.ts @@ -1,4 +1,4 @@ -/** @public */ +/** @internal */ export function toStartCase(str: string) { return str .split(' ') @@ -13,7 +13,7 @@ const isDarwin = const cmdKey = isDarwin ? '⌘' : 'Ctrl' const altKey = isDarwin ? '⌥' : 'Alt' -/** @public */ +/** @internal */ export function kbd(str: string) { return str .split(',')[0] @@ -24,7 +24,7 @@ export function kbd(str: string) { }) } -/** @public */ +/** @internal */ export function kbdStr(str: string) { return ( '— ' + @@ -38,27 +38,3 @@ export function kbdStr(str: string) { .join(' ') ) } - -/** @public */ -export const getBaseUrl = () => { - if (typeof process === 'undefined') { - return 'http://localhost:5420' - } - - if (process.env.NODE_ENV === 'development') { - return 'http://localhost:3000' - } - - if (process.env.NEXT_PUBLIC_VERCEL_ENV === 'production') { - return 'https://www.tldraw.com' - } - - if (process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') { - return `https://${process.env.NEXT_PUBLIC_VERCEL_URL}` - } - - return 'http://localhost:3000' -} - -/** @public */ -export const BASE_URL = getBaseUrl() diff --git a/packages/ui/src/lib/hooks/menuHelpers.ts b/packages/ui/src/lib/hooks/menuHelpers.ts index 0c73b4b60..950c8669c 100644 --- a/packages/ui/src/lib/hooks/menuHelpers.ts +++ b/packages/ui/src/lib/hooks/menuHelpers.ts @@ -1,15 +1,15 @@ import { Editor, TLArrowUtil, useEditor } from '@tldraw/editor' import { assert, exhaustiveSwitchError } from '@tldraw/utils' import { useValue } from 'signia-react' -import { ActionItem } from './useActions' -import { ToolItem } from './useTools' -import { TLTranslationKey } from './useTranslation/TLTranslationKey' +import { TLUiActionItem } from './useActions' +import { TLUiToolItem } from './useTools' +import { TLUiTranslationKey } from './useTranslation/TLUiTranslationKey' /** @public */ -export type MenuChild = MenuItem | SubMenu | MenuGroup | CustomMenuItem +export type TLUiMenuChild = TLUiMenuItem | TLUiSubMenu | TLUiMenuGroup | TLUiCustomMenuItem /** @public */ -export type CustomMenuItem = { +export type TLUiCustomMenuItem = { id: string type: 'custom' disabled: boolean @@ -17,37 +17,37 @@ export type CustomMenuItem = { } /** @public */ -export type MenuItem = { +export type TLUiMenuItem = { id: string type: 'item' readonlyOk: boolean - actionItem: ActionItem + actionItem: TLUiActionItem disabled: boolean checked: boolean } /** @public */ -export type MenuGroup = { +export type TLUiMenuGroup = { id: string type: 'group' checkbox: boolean disabled: boolean readonlyOk: boolean - children: MenuChild[] + children: TLUiMenuChild[] } /** @public */ -export type SubMenu = { +export type TLUiSubMenu = { id: string type: 'submenu' - label: TLTranslationKey + label: TLUiTranslationKey disabled: boolean readonlyOk: boolean - children: MenuChild[] + children: TLUiMenuChild[] } /** @public */ -export type MenuSchema = (MenuGroup | MenuItem | CustomMenuItem)[] +export type TLUiMenuSchema = (TLUiMenuGroup | TLUiMenuItem | TLUiCustomMenuItem)[] /** @public */ export function compactMenuItems(arr: T[]): Exclude[] { @@ -55,7 +55,10 @@ export function compactMenuItems(arr: T[]): Exclude -): MenuItem { +): TLUiMenuItem { if (!actionItem) { throw Error('No action item provided to menuItem') } @@ -146,19 +149,19 @@ function shapesWithUnboundArrows(editor: Editor) { }) } -/** @public */ +/** @internal */ export const useThreeStackableItems = () => { const editor = useEditor() return useValue('threeStackableItems', () => shapesWithUnboundArrows(editor).length > 2, [editor]) } -/** @public */ +/** @internal */ export const useAllowGroup = () => { const editor = useEditor() return useValue('allowGroup', () => shapesWithUnboundArrows(editor).length > 1, [editor]) } -/** @public */ +/** @internal */ export const useAllowUngroup = () => { const editor = useEditor() return useValue( @@ -169,13 +172,16 @@ export const useAllowUngroup = () => { } /** @public */ -export function findMenuItem(menu: MenuSchema, path: string[]) { +export function findMenuItem(menu: TLUiMenuSchema, path: string[]) { const item = _findMenuItem(menu, path) assert(item, `Menu item ${path.join(' > ')} not found`) return item } -function _findMenuItem(menu: MenuSchema | MenuChild[], path: string[]): MenuChild | null { +function _findMenuItem( + menu: TLUiMenuSchema | TLUiMenuChild[], + path: string[] +): TLUiMenuChild | null { const [next, ...rest] = path if (!next) return null diff --git a/packages/ui/src/lib/hooks/useActions.tsx b/packages/ui/src/lib/hooks/useActions.tsx index 90d7a1ca6..7f05f998d 100644 --- a/packages/ui/src/lib/hooks/useActions.tsx +++ b/packages/ui/src/lib/hooks/useActions.tsx @@ -27,44 +27,44 @@ import { useExportAs } from './useExportAs' import { useInsertMedia } from './useInsertMedia' import { usePrint } from './usePrint' import { useToasts } from './useToastsProvider' -import { TLTranslationKey } from './useTranslation/TLTranslationKey' +import { TLUiTranslationKey } from './useTranslation/TLUiTranslationKey' /** @public */ -export interface ActionItem { +export interface TLUiActionItem { icon?: TLUiIconType id: string kbd?: string title?: string - label?: TLTranslationKey - menuLabel?: TLTranslationKey - shortcutsLabel?: TLTranslationKey - contextMenuLabel?: TLTranslationKey + label?: TLUiTranslationKey + menuLabel?: TLUiTranslationKey + shortcutsLabel?: TLUiTranslationKey + contextMenuLabel?: TLUiTranslationKey readonlyOk: boolean checkbox?: boolean onSelect: (source: TLUiEventSource) => Promise | void } /** @public */ -export type ActionsContextType = Record +export type TLUiActionsContextType = Record -/** @public */ -export const ActionsContext = React.createContext({}) +/** @internal */ +export const ActionsContext = React.createContext({}) /** @public */ export type ActionsProviderProps = { overrides?: ( editor: Editor, - actions: ActionsContextType, + actions: TLUiActionsContextType, helpers: undefined - ) => ActionsContextType + ) => TLUiActionsContextType children: any } -function makeActions(actions: ActionItem[]) { - return Object.fromEntries(actions.map((action) => [action.id, action])) as ActionsContextType +function makeActions(actions: TLUiActionItem[]) { + return Object.fromEntries(actions.map((action) => [action.id, action])) as TLUiActionsContextType } -/** @public */ +/** @internal */ export function ActionsProvider({ overrides, children }: ActionsProviderProps) { const editor = useEditor() @@ -80,7 +80,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) { const trackEvent = useEvents() // should this be a useMemo? looks like it doesn't actually deref any reactive values - const actions = React.useMemo(() => { + const actions = React.useMemo(() => { const actions = makeActions([ { id: 'edit-link', @@ -976,6 +976,6 @@ export function useActions() { return ctx } -function asActions>(actions: T) { - return actions as Record +function asActions>(actions: T) { + return actions as Record } diff --git a/packages/ui/src/lib/hooks/useActionsMenuSchema.tsx b/packages/ui/src/lib/hooks/useActionsMenuSchema.tsx index 75d4edea0..bc32e22ba 100644 --- a/packages/ui/src/lib/hooks/useActionsMenuSchema.tsx +++ b/packages/ui/src/lib/hooks/useActionsMenuSchema.tsx @@ -2,7 +2,7 @@ import { Editor, useEditor } from '@tldraw/editor' import React, { useMemo } from 'react' import { track } from 'signia-react' import { - MenuSchema, + TLUiMenuSchema, menuItem, useAllowGroup, useAllowUngroup, @@ -13,27 +13,27 @@ import { useBreakpoint } from './useBreakpoint' import { useHasLinkShapeSelected } from './useHasLinkShapeSelected' /** @public */ -export type ActionsMenuSchemaContextType = MenuSchema +export type TLUiActionsMenuSchemaContextType = TLUiMenuSchema -/** @public */ -export const ActionsMenuSchemaContext = React.createContext({} as ActionsMenuSchemaContextType) +/** @internal */ +export const ActionsMenuSchemaContext = React.createContext({} as TLUiActionsMenuSchemaContextType) /** @public */ export type ActionsMenuSchemaProviderProps = { overrides?: ( editor: Editor, - schema: ActionsMenuSchemaContextType, + schema: TLUiActionsMenuSchemaContextType, helpers: { actions: ReturnType oneSelected: boolean twoSelected: boolean threeSelected: boolean } - ) => ActionsMenuSchemaContextType + ) => TLUiActionsMenuSchemaContextType children: any } -/** @public */ +/** @internal */ export const ActionsMenuSchemaProvider = track(function ActionsMenuSchemaProvider({ overrides, children, @@ -53,7 +53,7 @@ export const ActionsMenuSchemaProvider = track(function ActionsMenuSchemaProvide const breakpoint = useBreakpoint() const isZoomedTo100 = editor.zoomLevel === 1 - const actionMenuSchema = useMemo(() => { + const actionTLUiMenuSchema = useMemo(() => { const results = [ menuItem(actions['align-left'], { disabled: !twoSelected }), menuItem(actions['align-center-horizontal'], { disabled: !twoSelected }), @@ -104,14 +104,14 @@ export const ActionsMenuSchemaProvider = track(function ActionsMenuSchemaProvide ]) return ( - + {children} ) }) /** @public */ -export function useActionsMenuSchema(): MenuSchema { +export function useActionsMenuSchema(): TLUiMenuSchema { const ctx = React.useContext(ActionsMenuSchemaContext) if (!ctx) { diff --git a/packages/ui/src/lib/hooks/useAssetUrls.tsx b/packages/ui/src/lib/hooks/useAssetUrls.tsx index ebbbb96bd..4fd3b9fd6 100644 --- a/packages/ui/src/lib/hooks/useAssetUrls.tsx +++ b/packages/ui/src/lib/hooks/useAssetUrls.tsx @@ -1,20 +1,23 @@ import { createContext, useContext } from 'react' -import { UiAssetUrls } from '../assetUrls' +import { TLUiAssetUrls } from '../assetUrls' -const AssetUrlsContext = createContext(null) +/** @internal */ +type UiAssetUrlsContextType = TLUiAssetUrls | null -/** @public */ +const AssetUrlsContext = createContext(null) + +/** @internal */ export function AssetUrlsProvider({ assetUrls, children, }: { - assetUrls: UiAssetUrls + assetUrls: TLUiAssetUrls children: React.ReactNode }) { return {children} } -/** @public */ +/** @internal */ export function useAssetUrls() { const assetUrls = useContext(AssetUrlsContext) if (!assetUrls) { diff --git a/packages/ui/src/lib/hooks/useContextMenuSchema.tsx b/packages/ui/src/lib/hooks/useContextMenuSchema.tsx index 49f34e698..ee11ab7a8 100644 --- a/packages/ui/src/lib/hooks/useContextMenuSchema.tsx +++ b/packages/ui/src/lib/hooks/useContextMenuSchema.tsx @@ -2,7 +2,7 @@ import { Editor, TLBookmarkUtil, TLEmbedUtil, getEmbedInfo, useEditor } from '@t import React, { useMemo } from 'react' import { track, useValue } from 'signia-react' import { - MenuSchema, + TLUiMenuSchema, compactMenuItems, menuCustom, menuGroup, @@ -19,16 +19,18 @@ import { useOnlyFlippableShape } from './useOnlyFlippableShape' import { useShowAutoSizeToggle } from './useShowAutoSizeToggle' /** @public */ -export type ContextMenuSchemaContextType = MenuSchema +export type TLUiContextTTLUiMenuSchemaContextType = TLUiMenuSchema + +/** @internal */ +export const TLUiContextMenuSchemaContext = React.createContext( + {} as TLUiContextTTLUiMenuSchemaContextType +) /** @public */ -export const ContextMenuSchemaContext = React.createContext({} as ContextMenuSchemaContextType) - -/** @public */ -export type ContextMenuSchemaProviderProps = { +export type TLUiContextMenuSchemaProviderProps = { overrides?: ( editor: Editor, - schema: ContextMenuSchemaContextType, + schema: TLUiContextTTLUiMenuSchemaContextType, helpers: { actions: ReturnType oneSelected: boolean @@ -38,15 +40,15 @@ export type ContextMenuSchemaProviderProps = { showUngroup: boolean onlyFlippableShapeSelected: boolean } - ) => ContextMenuSchemaContextType + ) => TLUiContextTTLUiMenuSchemaContextType children: any } -/** @public */ -export const ContextMenuSchemaProvider = track(function ContextMenuSchemaProvider({ +/** @internal */ +export const TLUiContextMenuSchemaProvider = track(function TLUiContextMenuSchemaProvider({ overrides, children, -}: ContextMenuSchemaProviderProps) { +}: TLUiContextMenuSchemaProviderProps) { const editor = useEditor() const actions = useActions() @@ -100,8 +102,8 @@ export const ContextMenuSchemaProvider = track(function ContextMenuSchemaProvide const { onlySelectedShape } = editor const isShapeLocked = onlySelectedShape && editor.isShapeOrAncestorLocked(onlySelectedShape) - const contextMenuSchema = useMemo(() => { - let contextMenuSchema: ContextMenuSchemaContextType = compactMenuItems([ + const contextTLUiMenuSchema = useMemo(() => { + let contextTLUiMenuSchema: TLUiContextTTLUiMenuSchemaContextType = compactMenuItems([ menuGroup( 'selection', oneEmbedSelected && menuItem(actions['open-embed-link']), @@ -220,7 +222,7 @@ export const ContextMenuSchemaProvider = track(function ContextMenuSchemaProvide ]) if (overrides) { - contextMenuSchema = overrides(editor, contextMenuSchema, { + contextTLUiMenuSchema = overrides(editor, contextTLUiMenuSchema, { actions, oneSelected, twoSelected, @@ -231,7 +233,7 @@ export const ContextMenuSchemaProvider = track(function ContextMenuSchemaProvide }) } - return contextMenuSchema + return contextTLUiMenuSchema }, [ editor, overrides, @@ -254,18 +256,18 @@ export const ContextMenuSchemaProvider = track(function ContextMenuSchemaProvide ]) return ( - + {children} - + ) }) /** @public */ -export function useContextMenuSchema(): MenuSchema { - const ctx = React.useContext(ContextMenuSchemaContext) +export function useContextMenuSchema(): TLUiMenuSchema { + const ctx = React.useContext(TLUiContextMenuSchemaContext) if (!ctx) { - throw new Error('useContextMenuSchema must be used inside of a ContextMenuSchemaProvider.') + throw new Error('useContextMenuSchema must be used inside of a TLUiContextMenuSchemaProvider.') } return ctx diff --git a/packages/ui/src/lib/hooks/useDialogsProvider.tsx b/packages/ui/src/lib/hooks/useDialogsProvider.tsx index 851f121ba..b253c79bd 100644 --- a/packages/ui/src/lib/hooks/useDialogsProvider.tsx +++ b/packages/ui/src/lib/hooks/useDialogsProvider.tsx @@ -3,44 +3,44 @@ import { createContext, useCallback, useContext, useState } from 'react' import { useEvents } from './useEventsProvider' /** @public */ -export interface DialogProps { +export interface TLUiDialogProps { onClose: () => void } /** @public */ -export interface TLDialog { +export interface TLUiDialog { id: string onClose?: () => void - component: (props: DialogProps) => any + component: (props: TLUiDialogProps) => any } /** @public */ -export type DialogsContextType = { - addDialog: (dialog: Omit & { id?: string }) => string +export type TLUiDialogsContextType = { + addDialog: (dialog: Omit & { id?: string }) => string removeDialog: (id: string) => string - updateDialog: (id: string, newDialogData: Partial) => string + updateDialog: (id: string, newDialogData: Partial) => string clearDialogs: () => void - dialogs: TLDialog[] + dialogs: TLUiDialog[] } -/** @public */ -export const DialogsContext = createContext({} as DialogsContextType) +/** @internal */ +export const DialogsContext = createContext({} as TLUiDialogsContextType) -/** @public */ +/** @internal */ export type DialogsProviderProps = { - overrides?: (editor: Editor) => DialogsContextType + overrides?: (editor: Editor) => TLUiDialogsContextType children: any } -/** @public */ +/** @internal */ export function DialogsProvider({ children }: DialogsProviderProps) { const editor = useEditor() const trackEvent = useEvents() - const [dialogs, setDialogs] = useState([]) + const [dialogs, setDialogs] = useState([]) const addDialog = useCallback( - (dialog: Omit & { id?: string }) => { + (dialog: Omit & { id?: string }) => { const id = dialog.id ?? uniqueId() setDialogs((d) => { return [...d.filter((m) => m.id !== dialog.id), { ...dialog, id }] @@ -55,7 +55,7 @@ export function DialogsProvider({ children }: DialogsProviderProps) { ) const updateDialog = useCallback( - (id: string, newDialogData: Partial) => { + (id: string, newDialogData: Partial) => { setDialogs((d) => d.map((m) => { if (m.id === id) { diff --git a/packages/ui/src/lib/hooks/useEditorEvents.ts b/packages/ui/src/lib/hooks/useEditorEvents.ts index feeddd1de..4c7c1c97e 100644 --- a/packages/ui/src/lib/hooks/useEditorEvents.ts +++ b/packages/ui/src/lib/hooks/useEditorEvents.ts @@ -2,7 +2,7 @@ import { useEditor } from '@tldraw/editor' import { useEffect } from 'react' import { useToasts } from './useToastsProvider' -/** @public */ +/** @internal */ export function useEditorEvents() { const editor = useEditor() const { addToast } = useToasts() diff --git a/packages/ui/src/lib/hooks/useEventsProvider.tsx b/packages/ui/src/lib/hooks/useEventsProvider.tsx index 5d1ee70ca..fd514ed8e 100644 --- a/packages/ui/src/lib/hooks/useEventsProvider.tsx +++ b/packages/ui/src/lib/hooks/useEventsProvider.tsx @@ -96,16 +96,19 @@ export type TLUiEventHandler /** @internal */ const defaultEventHandler: TLUiEventHandler = () => void null -/** @internal */ -export const EventsContext = React.createContext({} as TLUiEventHandler) - /** @public */ +export type TLUiEventContextType = TLUiEventHandler + +/** @internal */ +export const EventsContext = React.createContext({} as TLUiEventContextType) + +/** @internal */ export type EventsProviderProps = { onEvent?: TLUiEventHandler children: any } -/** @public */ +/** @internal */ export function EventsProvider({ onEvent, children }: EventsProviderProps) { return ( @@ -115,6 +118,6 @@ export function EventsProvider({ onEvent, children }: EventsProviderProps) { } /** @public */ -export function useEvents(): TLUiEventHandler { +export function useEvents() { return React.useContext(EventsContext) } diff --git a/packages/ui/src/lib/hooks/useHelpMenuSchema.tsx b/packages/ui/src/lib/hooks/useHelpMenuSchema.tsx index 073e4c13a..def20845a 100644 --- a/packages/ui/src/lib/hooks/useHelpMenuSchema.tsx +++ b/packages/ui/src/lib/hooks/useHelpMenuSchema.tsx @@ -2,41 +2,41 @@ import { Editor, useEditor } from '@tldraw/editor' import { compact } from '@tldraw/utils' import React, { useMemo } from 'react' import { track } from 'signia-react' +import { TLUiLanguage } from '../..' import { KeyboardShortcutsDialog } from '../components/KeyboardShortcutsDialog' -import { MenuSchema, menuCustom, menuGroup, menuItem } from './menuHelpers' +import { TLUiMenuSchema, menuCustom, menuGroup, menuItem } from './menuHelpers' import { useActions } from './useActions' import { useDialogs } from './useDialogsProvider' -import { TLListedTranslations } from './useTranslation/translations' import { useLanguages } from './useTranslation/useLanguages' /** @public */ -export type HelpMenuSchemaProviderType = MenuSchema +export type TLUiHelpMenuSchemaContextType = TLUiMenuSchema /** @internal */ -export const HelpMenuSchemaContext = React.createContext({} as HelpMenuSchemaProviderType) +export const HelpMenuSchemaContext = React.createContext({} as TLUiHelpMenuSchemaContextType) /** @public */ -export type HelpMenuSchemaProviderProps = { +export type TLUiHelpMenuSchemaProviderProps = { overrides?: ( editor: Editor, - schema: HelpMenuSchemaProviderType, + schema: TLUiHelpMenuSchemaContextType, helpers: { actions: ReturnType - languages: TLListedTranslations + languages: readonly TLUiLanguage[] currentLanguage: string oneSelected: boolean twoSelected: boolean threeSelected: boolean } - ) => HelpMenuSchemaProviderType + ) => TLUiHelpMenuSchemaContextType children: any } -/** @public */ +/** @internal */ export const HelpMenuSchemaProvider = track(function HelpMenuSchemaProvider({ overrides, children, -}: HelpMenuSchemaProviderProps) { +}: TLUiHelpMenuSchemaProviderProps) { const editor = useEditor() const actions = useActions() @@ -49,8 +49,8 @@ export const HelpMenuSchemaProvider = track(function HelpMenuSchemaProvider({ const { languages, currentLanguage } = useLanguages() const { addDialog } = useDialogs() - const helpMenuSchema = useMemo(() => { - const helpMenuSchema = compact([ + const helpTLUiMenuSchema = useMemo(() => { + const helpTLUiMenuSchema = compact([ menuGroup( 'top', menuCustom('LANGUAGE_MENU', { readonlyOk: true }), @@ -66,7 +66,7 @@ export const HelpMenuSchemaProvider = track(function HelpMenuSchemaProvider({ ]) if (overrides) { - return overrides(editor, helpMenuSchema, { + return overrides(editor, helpTLUiMenuSchema, { actions, currentLanguage, languages, @@ -76,7 +76,7 @@ export const HelpMenuSchemaProvider = track(function HelpMenuSchemaProvider({ }) } - return helpMenuSchema + return helpTLUiMenuSchema }, [ editor, overrides, @@ -90,18 +90,18 @@ export const HelpMenuSchemaProvider = track(function HelpMenuSchemaProvider({ ]) return ( - + {children} ) }) /** @public */ -export function useHelpMenuSchema(): MenuSchema { +export function useHelpMenuSchema(): TLUiMenuSchema { const ctx = React.useContext(HelpMenuSchemaContext) if (!ctx) { - throw new Error('useHelpMenuSchema must be used inside of a helpMenuSchemaProvider.') + throw new Error('useHelpMenuSchema must be used inside of a helpTLUiMenuSchemaProvider.') } return ctx diff --git a/packages/ui/src/lib/hooks/useHighDpiCanvas.ts b/packages/ui/src/lib/hooks/useHighDpiCanvas.ts index 8087f054e..4ca17ba79 100644 --- a/packages/ui/src/lib/hooks/useHighDpiCanvas.ts +++ b/packages/ui/src/lib/hooks/useHighDpiCanvas.ts @@ -1,6 +1,6 @@ import { useLayoutEffect } from 'react' -/** @public */ +/** @internal */ export function useHighDpiCanvas(ref: React.RefObject, dpr: number) { // Match the resolution of the client useLayoutEffect(() => { diff --git a/packages/ui/src/lib/hooks/useKeyboardShortcutsSchema.tsx b/packages/ui/src/lib/hooks/useKeyboardShortcutsSchema.tsx index 10c2115a0..cda0f0c37 100644 --- a/packages/ui/src/lib/hooks/useKeyboardShortcutsSchema.tsx +++ b/packages/ui/src/lib/hooks/useKeyboardShortcutsSchema.tsx @@ -2,38 +2,38 @@ import { Editor, useEditor } from '@tldraw/editor' import { compact } from '@tldraw/utils' import React, { useMemo } from 'react' import { track } from 'signia-react' -import { MenuSchema, menuGroup, menuItem } from './menuHelpers' -import { ActionsContextType, useActions } from './useActions' -import { ToolsContextType, useTools } from './useTools' +import { TLUiMenuSchema, menuGroup, menuItem } from './menuHelpers' +import { TLUiActionsContextType, useActions } from './useActions' +import { TLUiToolsContextType, useTools } from './useTools' /** @public */ -export type KeyboardShortcutsSchemaContextType = MenuSchema +export type TLUiKeyboardShortcutsSchemaContextType = TLUiMenuSchema -/** @public */ +/** @internal */ export const KeyboardShortcutsSchemaContext = React.createContext( - {} as KeyboardShortcutsSchemaContextType + {} as TLUiKeyboardShortcutsSchemaContextType ) /** @public */ -export type KeyboardShortcutsSchemaProviderProps = { +export type TLUiKeyboardShortcutsSchemaProviderProps = { overrides?: ( editor: Editor, - schema: KeyboardShortcutsSchemaContextType, - more: { tools: ToolsContextType; actions: ActionsContextType } - ) => KeyboardShortcutsSchemaContextType + schema: TLUiKeyboardShortcutsSchemaContextType, + more: { tools: TLUiToolsContextType; actions: TLUiActionsContextType } + ) => TLUiKeyboardShortcutsSchemaContextType children: any } -/** @public */ +/** @internal */ export const KeyboardShortcutsSchemaProvider = track(function KeyboardShortcutsSchemaProvider({ overrides, children, -}: KeyboardShortcutsSchemaProviderProps) { +}: TLUiKeyboardShortcutsSchemaProviderProps) { const editor = useEditor() const tools = useTools() const actions = useActions() - const keyboardShortcutsSchema = useMemo(() => { + const keyboardShortcutsSchema = useMemo(() => { const keyboardShortcutsSchema = compact([ menuGroup( 'shortcuts-dialog.tools', @@ -118,7 +118,7 @@ export const KeyboardShortcutsSchemaProvider = track(function KeyboardShortcutsS }) /** @public */ -export function useKeyboardShortcutsSchema(): KeyboardShortcutsSchemaContextType { +export function useKeyboardShortcutsSchema(): TLUiKeyboardShortcutsSchemaContextType { const ctx = React.useContext(KeyboardShortcutsSchemaContext) if (!ctx) { diff --git a/packages/ui/src/lib/hooks/useMenuSchema.tsx b/packages/ui/src/lib/hooks/useMenuSchema.tsx index c03c57e64..6b01d779b 100644 --- a/packages/ui/src/lib/hooks/useMenuSchema.tsx +++ b/packages/ui/src/lib/hooks/useMenuSchema.tsx @@ -3,7 +3,7 @@ import { compact } from '@tldraw/utils' import React, { useMemo } from 'react' import { useValue } from 'signia-react' import { - MenuSchema, + TLUiMenuSchema, menuCustom, menuGroup, menuItem, @@ -20,16 +20,16 @@ import { useHasLinkShapeSelected } from './useHasLinkShapeSelected' import { useShowAutoSizeToggle } from './useShowAutoSizeToggle' /** @public */ -export type MenuSchemaContextType = MenuSchema +export type TLUiMenuSchemaContextType = TLUiMenuSchema + +/** @internal */ +export const TLUiMenuSchemaContext = React.createContext({} as TLUiMenuSchemaContextType) /** @public */ -export const MenuSchemaContext = React.createContext({} as MenuSchemaContextType) - -/** @public */ -export type MenuSchemaProviderProps = { +export type TLUiMenuSchemaProviderProps = { overrides?: ( editor: Editor, - schema: MenuSchemaContextType, + schema: TLUiMenuSchemaContextType, helpers: { actions: ReturnType noneSelected: boolean @@ -37,12 +37,12 @@ export type MenuSchemaProviderProps = { twoSelected: boolean threeSelected: boolean } - ) => MenuSchemaContextType + ) => TLUiMenuSchemaContextType children: any } -/** @public */ -export function MenuSchemaProvider({ overrides, children }: MenuSchemaProviderProps) { +/** @internal */ +export function TLUiMenuSchemaProvider({ overrides, children }: TLUiMenuSchemaProviderProps) { const editor = useEditor() const actions = useActions() @@ -79,7 +79,7 @@ export function MenuSchemaProvider({ overrides, children }: MenuSchemaProviderPr const canRedo = useCanRedo() const isZoomedTo100 = useValue('isZoomedTo100', () => editor.zoomLevel === 1, [editor]) - const menuSchema = useMemo(() => { + const menuSchema = useMemo(() => { const menuSchema = compact([ menuGroup( 'menu', @@ -221,15 +221,17 @@ export function MenuSchemaProvider({ overrides, children }: MenuSchemaProviderPr isZoomedTo100, ]) - return {children} + return ( + {children} + ) } /** @public */ -export function useMenuSchema(): MenuSchema { - const ctx = React.useContext(MenuSchemaContext) +export function useMenuSchema(): TLUiMenuSchema { + const ctx = React.useContext(TLUiMenuSchemaContext) if (!ctx) { - throw new Error('useMenuSchema must be used inside of a MenuSchemaProvider.') + throw new Error('useMenuSchema must be used inside of a TLUiMenuSchemaProvider.') } return ctx diff --git a/packages/ui/src/lib/hooks/usePreloadIcons.ts b/packages/ui/src/lib/hooks/usePreloadIcons.ts index c0ad87b1f..b1f4845a2 100644 --- a/packages/ui/src/lib/hooks/usePreloadIcons.ts +++ b/packages/ui/src/lib/hooks/usePreloadIcons.ts @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react' -import { TLUiIconTypes } from '../icon-types' +import { iconTypes } from '../icon-types' import { useAssetUrls } from './useAssetUrls' /** @internal */ @@ -16,7 +16,7 @@ export function usePreloadIcons(): boolean { // all of the icons it can so that they're available when we need them. await Promise.allSettled( - TLUiIconTypes.map((icon) => { + iconTypes.map((icon) => { const image = new Image() image.src = assetUrls.icons[icon] return image.decode() diff --git a/packages/ui/src/lib/hooks/usePrint.ts b/packages/ui/src/lib/hooks/usePrint.ts index 3fc176bd8..44b8cc53f 100644 --- a/packages/ui/src/lib/hooks/usePrint.ts +++ b/packages/ui/src/lib/hooks/usePrint.ts @@ -1,7 +1,7 @@ import { uniqueId, useEditor } from '@tldraw/editor' import { useCallback, useRef } from 'react' -/** @public */ +/** @internal */ export function usePrint() { const editor = useEditor() const prevPrintEl = useRef(null) diff --git a/packages/ui/src/lib/hooks/useToastsProvider.tsx b/packages/ui/src/lib/hooks/useToastsProvider.tsx index 4fe610497..86f1fe27a 100644 --- a/packages/ui/src/lib/hooks/useToastsProvider.tsx +++ b/packages/ui/src/lib/hooks/useToastsProvider.tsx @@ -2,45 +2,45 @@ import { Editor, uniqueId } from '@tldraw/editor' import { createContext, useCallback, useContext, useState } from 'react' /** @public */ -export interface TLToast { +export interface TLUiToast { id: string icon?: string title?: string description?: string - actions?: TLToastAction[] + actions?: TLUiToastAction[] keepOpen?: boolean closeLabel?: string } /** @public */ -export interface TLToastAction { +export interface TLUiToastAction { type: 'primary' | 'secondary' | 'warn' label: string onClick: () => void } /** @public */ -export type ToastsContextType = { - addToast: (toast: Omit & { id?: string }) => string - removeToast: (id: TLToast['id']) => string +export type TLUiToastsContextType = { + addToast: (toast: Omit & { id?: string }) => string + removeToast: (id: TLUiToast['id']) => string clearToasts: () => void - toasts: TLToast[] + toasts: TLUiToast[] } -/** @public */ -export const ToastsContext = createContext({} as ToastsContextType) +/** @internal */ +export const ToastsContext = createContext({} as TLUiToastsContextType) -/** @public */ +/** @internal */ export type ToastsProviderProps = { - overrides?: (editor: Editor) => ToastsContextType + overrides?: (editor: Editor) => TLUiToastsContextType children: any } -/** @public */ +/** @internal */ export function ToastsProvider({ children }: ToastsProviderProps) { - const [toasts, setToasts] = useState([]) + const [toasts, setToasts] = useState([]) - const addToast = useCallback((toast: Omit & { id?: string }) => { + const addToast = useCallback((toast: Omit & { id?: string }) => { const id = toast.id ?? uniqueId() setToasts((d) => [...d.filter((m) => m.id !== toast.id), { ...toast, id }]) return id diff --git a/packages/ui/src/lib/hooks/useToolbarSchema.tsx b/packages/ui/src/lib/hooks/useToolbarSchema.tsx index 5bef98b2b..b6b0662e3 100644 --- a/packages/ui/src/lib/hooks/useToolbarSchema.tsx +++ b/packages/ui/src/lib/hooks/useToolbarSchema.tsx @@ -2,18 +2,18 @@ import { Editor, featureFlags, useEditor } from '@tldraw/editor' import { compact } from '@tldraw/utils' import React from 'react' import { useValue } from 'signia-react' -import { ToolItem, ToolsContextType, useTools } from './useTools' +import { TLUiToolItem, TLUiToolsContextType, useTools } from './useTools' /** @public */ -export type ToolbarItem = { +export type TLUiToolbarItem = { id: string type: 'item' readonlyOk: boolean - toolItem: ToolItem + toolItem: TLUiToolItem } /** @public */ -export function toolbarItem(toolItem: ToolItem): ToolbarItem { +export function toolbarItem(toolItem: TLUiToolItem): TLUiToolbarItem { return { id: toolItem.id, type: 'item', @@ -23,30 +23,30 @@ export function toolbarItem(toolItem: ToolItem): ToolbarItem { } /** @public */ -export type ToolbarSchemaContextType = ToolbarItem[] +export type TLUiToolbarSchemaContextType = TLUiToolbarItem[] + +/** @internal */ +export const ToolbarSchemaContext = React.createContext([] as TLUiToolbarSchemaContextType) /** @public */ -export const ToolbarSchemaContext = React.createContext([] as ToolbarSchemaContextType) - -/** @public */ -export type ToolbarSchemaProviderProps = { +export type TLUiToolbarSchemaProviderProps = { overrides?: ( editor: Editor, - schema: ToolbarSchemaContextType, - more: { tools: ToolsContextType } - ) => ToolbarSchemaContextType + schema: TLUiToolbarSchemaContextType, + more: { tools: TLUiToolsContextType } + ) => TLUiToolbarSchemaContextType children: any } -/** @public */ -export function ToolbarSchemaProvider({ overrides, children }: ToolbarSchemaProviderProps) { +/** @internal */ +export function ToolbarSchemaProvider({ overrides, children }: TLUiToolbarSchemaProviderProps) { const editor = useEditor() const tools = useTools() const highlighterEnabled = useValue(featureFlags.highlighterTool) - const toolbarSchema = React.useMemo(() => { - const schema: ToolbarSchemaContextType = compact([ + const toolbarSchema = React.useMemo(() => { + const schema: TLUiToolbarSchemaContextType = compact([ toolbarItem(tools.select), toolbarItem(tools.hand), toolbarItem(tools.draw), diff --git a/packages/ui/src/lib/hooks/useTools.tsx b/packages/ui/src/lib/hooks/useTools.tsx index bfd613eef..11d9750b5 100644 --- a/packages/ui/src/lib/hooks/useTools.tsx +++ b/packages/ui/src/lib/hooks/useTools.tsx @@ -6,13 +6,13 @@ import { TLUiIconType } from '../icon-types' import { useDialogs } from './useDialogsProvider' import { TLUiEventSource, useEvents } from './useEventsProvider' import { useInsertMedia } from './useInsertMedia' -import { TLTranslationKey } from './useTranslation/TLTranslationKey' +import { TLUiTranslationKey } from './useTranslation/TLUiTranslationKey' /** @public */ -export interface ToolItem { +export interface TLUiToolItem { id: string - label: TLTranslationKey - shortcutsLabel?: TLTranslationKey + label: TLUiTranslationKey + shortcutsLabel?: TLUiTranslationKey icon: TLUiIconType onSelect: (source: TLUiEventSource) => void kbd?: string @@ -23,23 +23,23 @@ export interface ToolItem { } /** @public */ -export type ToolsContextType = Record +export type TLUiToolsContextType = Record + +/** @internal */ +export const ToolsContext = React.createContext({} as TLUiToolsContextType) /** @public */ -export const ToolsContext = React.createContext({} as ToolsContextType) - -/** @public */ -export type ToolsProviderProps = { +export type TLUiToolsProviderProps = { overrides?: ( editor: Editor, - tools: ToolsContextType, + tools: TLUiToolsContextType, helpers: { insertMedia: () => void } - ) => ToolsContextType + ) => TLUiToolsContextType children: any } -/** @public */ -export function ToolsProvider({ overrides, children }: ToolsProviderProps) { +/** @internal */ +export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) { const editor = useEditor() const trackEvent = useEvents() @@ -48,8 +48,8 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) { const highlighterEnabled = useValue(featureFlags.highlighterTool) - const tools = React.useMemo(() => { - const toolsArray: ToolItem[] = [ + const tools = React.useMemo(() => { + const toolsArray: TLUiToolItem[] = [ { id: 'select', label: 'tool.select', @@ -96,7 +96,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) { }, ...[...TL_GEO_TYPES].map((id) => ({ id, - label: `tool.${id}` as TLTranslationKey, + label: `tool.${id}` as TLUiTranslationKey, readonlyOk: false, meta: { geo: id, @@ -218,7 +218,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) { }) } - const tools = makeTools(toolsArray) + const tools = Object.fromEntries(toolsArray.map((t) => [t.id, t])) if (overrides) { return overrides(editor, tools, { insertMedia }) @@ -230,10 +230,6 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) { return {children} } -function makeTools(tools: ToolItem[]) { - return Object.fromEntries(tools.map((t) => [t.id, t])) -} - /** @public */ export function useTools() { const ctx = React.useContext(ToolsContext) diff --git a/packages/ui/src/lib/hooks/useTranslation/TLTranslationKey.ts b/packages/ui/src/lib/hooks/useTranslation/TLUiTranslationKey.ts similarity index 99% rename from packages/ui/src/lib/hooks/useTranslation/TLTranslationKey.ts rename to packages/ui/src/lib/hooks/useTranslation/TLUiTranslationKey.ts index e923dc4f2..10e3a5455 100644 --- a/packages/ui/src/lib/hooks/useTranslation/TLTranslationKey.ts +++ b/packages/ui/src/lib/hooks/useTranslation/TLUiTranslationKey.ts @@ -2,7 +2,7 @@ // Do not edit manually. /** @public */ -export type TLTranslationKey = +export type TLUiTranslationKey = | 'action.convert-to-bookmark' | 'action.convert-to-embed' | 'action.open-embed-link' diff --git a/packages/ui/src/lib/hooks/useTranslation/translations.ts b/packages/ui/src/lib/hooks/useTranslation/translations.ts index b4c5c65ad..5e6f7f84d 100644 --- a/packages/ui/src/lib/hooks/useTranslation/translations.ts +++ b/packages/ui/src/lib/hooks/useTranslation/translations.ts @@ -1,7 +1,7 @@ -import { UiAssetUrls } from '../../assetUrls' +import { TLUiAssetUrls } from '../../assetUrls' +import { TLUiTranslationKey } from './TLUiTranslationKey' import { DEFAULT_TRANSLATION } from './defaultTranslation' import { LANGUAGES } from './languages' -import { TLTranslationKey } from './TLTranslationKey' // The default language (english) must have a value for every message. // Other languages may have missing messages. If the application finds @@ -11,42 +11,29 @@ import { TLTranslationKey } from './TLTranslationKey' /* ----------------- (do not change) ---------------- */ /** @public */ -export type TLListedTranslation = { +export type TLUiLanguage = { readonly locale: string readonly label: string } /** @public */ -export type TLListedTranslations = readonly TLListedTranslation[] - -/** @public */ -export type TLTranslationMessages = Record - -/** @public */ -export type TLTranslation = { +export type TLUiTranslation = { readonly locale: string readonly label: string - readonly messages: TLTranslationMessages + readonly messages: Record } -/** @public */ -export type TLTranslations = TLTranslation[] - -/** @public */ -export type TLTranslationLocale = TLTranslations[number]['locale'] - -/** @public */ -export const EN_TRANSLATION: TLTranslation = { +const EN_TRANSLATION: TLUiTranslation = { locale: 'en', label: 'English', - messages: DEFAULT_TRANSLATION as TLTranslationMessages, + messages: DEFAULT_TRANSLATION as TLUiTranslation['messages'], } -/** @public */ +/** @internal */ export async function fetchTranslation( - locale: TLTranslationLocale, - assetUrls: UiAssetUrls -): Promise { + locale: TLUiTranslation['locale'], + assetUrls: TLUiAssetUrls +): Promise { const mainRes = await fetch(assetUrls.translations.en) if (!mainRes.ok) { @@ -66,7 +53,7 @@ export async function fetchTranslation( } const res = await fetch(assetUrls.translations[language.locale]) - const messages: TLTranslationMessages = await res.json() + const messages: TLUiTranslation['messages'] = await res.json() if (!messages) { console.warn(`No messages found for locale ${locale}`) @@ -76,7 +63,7 @@ export async function fetchTranslation( const missing: string[] = [] for (const key in EN_TRANSLATION) { - if (!messages[key as TLTranslationKey]) { + if (!messages[key as TLUiTranslationKey]) { missing.push(key) } } @@ -91,11 +78,3 @@ export async function fetchTranslation( messages: { ...EN_TRANSLATION.messages, ...messages }, } } - -/** @public */ -export async function getTranslation( - locale: TLTranslationLocale, - assetUrls: UiAssetUrls -): Promise { - return await fetchTranslation(locale, assetUrls) -} diff --git a/packages/ui/src/lib/hooks/useTranslation/useLanguages.tsx b/packages/ui/src/lib/hooks/useTranslation/useLanguages.tsx index ea589dcf8..2b1df2573 100644 --- a/packages/ui/src/lib/hooks/useTranslation/useLanguages.tsx +++ b/packages/ui/src/lib/hooks/useTranslation/useLanguages.tsx @@ -1,8 +1,12 @@ import { useEditor } from '@tldraw/editor' import { LANGUAGES } from './languages' +import { TLUiLanguage } from './translations' -/** @public */ +/** @internal */ export function useLanguages() { const editor = useEditor() - return { languages: LANGUAGES, currentLanguage: editor.locale } + return { + languages: LANGUAGES as readonly TLUiLanguage[], + currentLanguage: editor.locale, + } } diff --git a/packages/ui/src/lib/hooks/useTranslation/useTranslation.tsx b/packages/ui/src/lib/hooks/useTranslation/useTranslation.tsx index 5ccc1b2f6..15e87c7b8 100644 --- a/packages/ui/src/lib/hooks/useTranslation/useTranslation.tsx +++ b/packages/ui/src/lib/hooks/useTranslation/useTranslation.tsx @@ -2,12 +2,12 @@ import { useEditor } from '@tldraw/editor' import * as React from 'react' import { track } from 'signia-react' import { useAssetUrls } from '../useAssetUrls' -import { TLTranslationKey } from './TLTranslationKey' +import { TLUiTranslationKey } from './TLUiTranslationKey' import { DEFAULT_TRANSLATION } from './defaultTranslation' -import { TLTranslation, getTranslation } from './translations' +import { TLUiTranslation, fetchTranslation } from './translations' /** @public */ -export interface TranslationProviderProps { +export interface TLUiTranslationProviderProps { children: any /** * (optional) A collection of overrides different locales. @@ -21,24 +21,29 @@ export interface TranslationProviderProps { overrides?: Record> } -const TranslationsContext = React.createContext({} as TLTranslation) +/** @public */ +export type TLUiTranslationContextType = TLUiTranslation + +const TranslationsContext = React.createContext( + {} as TLUiTranslationContextType +) const useCurrentTranslation = () => React.useContext(TranslationsContext) /** * Provides a translation context to the editor. * - * @public + * @internal */ export const TranslationProvider = track(function TranslationProvider({ overrides, children, -}: TranslationProviderProps) { +}: TLUiTranslationProviderProps) { const editor = useEditor() const locale = editor.locale const getAssetUrl = useAssetUrls() - const [currentTranslation, setCurrentTranslation] = React.useState(() => { + const [currentTranslation, setCurrentTranslation] = React.useState(() => { if (overrides && overrides['en']) { return { locale: 'en', @@ -58,7 +63,7 @@ export const TranslationProvider = track(function TranslationProvider({ let isCancelled = false async function loadTranslation() { - const translation = await getTranslation(locale, getAssetUrl) + const translation = await fetchTranslation(locale, getAssetUrl) if (translation && !isCancelled) { if (overrides && overrides[locale]) { @@ -101,7 +106,7 @@ export const TranslationProvider = track(function TranslationProvider({ export function useTranslation() { const translation = useCurrentTranslation() return React.useCallback( - function msg(id: TLTranslationKey) { + function msg(id: TLUiTranslationKey) { return translation.messages[id] ?? id }, [translation] diff --git a/packages/ui/src/lib/icon-types.ts b/packages/ui/src/lib/icon-types.ts index 591145520..92ff2e824 100644 --- a/packages/ui/src/lib/icon-types.ts +++ b/packages/ui/src/lib/icon-types.ts @@ -166,7 +166,7 @@ export type TLUiIconType = | 'zoom-out' /** @public */ -export const TLUiIconTypes = [ +export const iconTypes = [ 'align-bottom-center', 'align-bottom-left', 'align-bottom-right', diff --git a/packages/ui/src/lib/overrides.ts b/packages/ui/src/lib/overrides.ts index 99fe9d6fe..1e88fbe23 100644 --- a/packages/ui/src/lib/overrides.ts +++ b/packages/ui/src/lib/overrides.ts @@ -4,15 +4,15 @@ import { useMemo } from 'react' import { ActionsProviderProps } from './hooks/useActions' import { ActionsMenuSchemaProviderProps } from './hooks/useActionsMenuSchema' import { useBreakpoint } from './hooks/useBreakpoint' -import { ContextMenuSchemaProviderProps } from './hooks/useContextMenuSchema' +import { TLUiContextMenuSchemaProviderProps } from './hooks/useContextMenuSchema' import { useDialogs } from './hooks/useDialogsProvider' -import { HelpMenuSchemaProviderProps } from './hooks/useHelpMenuSchema' -import { KeyboardShortcutsSchemaProviderProps } from './hooks/useKeyboardShortcutsSchema' -import { MenuSchemaProviderProps } from './hooks/useMenuSchema' +import { TLUiHelpMenuSchemaProviderProps } from './hooks/useHelpMenuSchema' +import { TLUiKeyboardShortcutsSchemaProviderProps } from './hooks/useKeyboardShortcutsSchema' +import { TLUiMenuSchemaProviderProps } from './hooks/useMenuSchema' import { useToasts } from './hooks/useToastsProvider' -import { ToolbarSchemaProviderProps } from './hooks/useToolbarSchema' -import { ToolsProviderProps } from './hooks/useTools' -import { TranslationProviderProps, useTranslation } from './hooks/useTranslation/useTranslation' +import { TLUiToolbarSchemaProviderProps } from './hooks/useToolbarSchema' +import { TLUiToolsProviderProps } from './hooks/useTools' +import { TLUiTranslationProviderProps, useTranslation } from './hooks/useTranslation/useTranslation' /** @public */ export function useDefaultHelpers() { @@ -49,51 +49,47 @@ export function useDefaultHelpers() { type DefaultHelpers = ReturnType -export type TldrawUiOverride = ( - editor: Editor, - schema: Type, - helpers: Helpers -) => Type +export type TLUiOverride = (editor: Editor, schema: Type, helpers: Helpers) => Type -type WithDefaultHelpers> = T extends TldrawUiOverride< +type WithDefaultHelpers> = T extends TLUiOverride< infer Type, infer Helpers > - ? TldrawUiOverride + ? TLUiOverride : never /** @public */ -export interface TldrawUiOverrides { +export interface TLUiOverrides { actionsMenu?: WithDefaultHelpers> actions?: WithDefaultHelpers> - contextMenu?: WithDefaultHelpers> - helpMenu?: WithDefaultHelpers> - menu?: WithDefaultHelpers> - toolbar?: WithDefaultHelpers> + contextMenu?: WithDefaultHelpers> + helpMenu?: WithDefaultHelpers> + menu?: WithDefaultHelpers> + toolbar?: WithDefaultHelpers> keyboardShortcutsMenu?: WithDefaultHelpers< - NonNullable + NonNullable > - tools?: WithDefaultHelpers> - translations?: TranslationProviderProps['overrides'] + tools?: WithDefaultHelpers> + translations?: TLUiTranslationProviderProps['overrides'] } -export interface TldrawUiOverridesWithoutDefaults { +export interface TLUiOverridesWithoutDefaults { actionsMenu?: ActionsMenuSchemaProviderProps['overrides'] actions?: ActionsProviderProps['overrides'] - contextMenu?: ContextMenuSchemaProviderProps['overrides'] - helpMenu?: HelpMenuSchemaProviderProps['overrides'] - menu?: MenuSchemaProviderProps['overrides'] - toolbar?: ToolbarSchemaProviderProps['overrides'] - keyboardShortcutsMenu?: KeyboardShortcutsSchemaProviderProps['overrides'] - tools?: ToolsProviderProps['overrides'] - translations?: TranslationProviderProps['overrides'] + contextMenu?: TLUiContextMenuSchemaProviderProps['overrides'] + helpMenu?: TLUiHelpMenuSchemaProviderProps['overrides'] + menu?: TLUiMenuSchemaProviderProps['overrides'] + toolbar?: TLUiToolbarSchemaProviderProps['overrides'] + keyboardShortcutsMenu?: TLUiKeyboardShortcutsSchemaProviderProps['overrides'] + tools?: TLUiToolsProviderProps['overrides'] + translations?: TLUiTranslationProviderProps['overrides'] } export function mergeOverrides( - overrides: TldrawUiOverrides[], + overrides: TLUiOverrides[], defaultHelpers: DefaultHelpers -): TldrawUiOverridesWithoutDefaults { - const mergedTranslations: TranslationProviderProps['overrides'] = {} +): TLUiOverridesWithoutDefaults { + const mergedTranslations: TLUiTranslationProviderProps['overrides'] = {} for (const override of overrides) { if (override.translations) { for (const [key, value] of objectMapEntries(override.translations)) { @@ -180,13 +176,13 @@ function useShallowArrayEquality(array: T): T { } export function useMergedTranslationOverrides( - overrides?: TldrawUiOverrides[] | TldrawUiOverrides -): NonNullable { + overrides?: TLUiOverrides[] | TLUiOverrides +): NonNullable { const overridesArray = useShallowArrayEquality( overrides == null ? [] : Array.isArray(overrides) ? overrides : [overrides] ) return useMemo(() => { - const mergedTranslations: TranslationProviderProps['overrides'] = {} + const mergedTranslations: TLUiTranslationProviderProps['overrides'] = {} for (const override of overridesArray) { if (override.translations) { for (const [key, value] of objectMapEntries(override.translations)) { @@ -203,8 +199,8 @@ export function useMergedTranslationOverrides( } export function useMergedOverrides( - overrides?: TldrawUiOverrides[] | TldrawUiOverrides -): TldrawUiOverridesWithoutDefaults { + overrides?: TLUiOverrides[] | TLUiOverrides +): TLUiOverridesWithoutDefaults { const defaultHelpers = useDefaultHelpers() const overridesArray = useShallowArrayEquality( overrides == null ? [] : Array.isArray(overrides) ? overrides : [overrides] diff --git a/scripts/refresh-assets.ts b/scripts/refresh-assets.ts index b29faabd9..78371177e 100644 --- a/scripts/refresh-assets.ts +++ b/scripts/refresh-assets.ts @@ -85,7 +85,7 @@ async function copyIcons() { ${icons.map((icon) => JSON.stringify(icon.replace('.svg', ''))).join(' | ')} /** @public */ - export const TLUiIconTypes = [ + export const iconTypes = [ ${icons.map((icon) => JSON.stringify(icon.replace('.svg', ''))).join(', ')} ] as const` @@ -239,10 +239,10 @@ async function copyTranslations() { // translationKeys.ts const translationKeys = Object.keys(defaultTranslation).map((key) => `'${key}'`) - const translationKeysFilePath = join(uiPath, 'TLTranslationKey.ts') + const translationKeysFilePath = join(uiPath, 'TLUiTranslationKey.ts') const translationKeysFile = ` /** @public */ - export type TLTranslationKey = ${translationKeys.join(' | ')} + export type TLUiTranslationKey = ${translationKeys.join(' | ')} ` await writeCodeFile( 'scripts/refresh-assets.ts',