diff --git a/packages/ui/api-report.md b/packages/ui/api-report.md index bf95a9231..d90068c26 100644 --- a/packages/ui/api-report.md +++ b/packages/ui/api-report.md @@ -310,6 +310,12 @@ export type EmbedInfo = { // @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; @@ -733,6 +739,9 @@ export type TLUiEventHandler source: TLUiEventSource; }, TLUiEventMap[T]>) => void; +// @public (undocumented) +export type TLUiEventSource = 'actions-menu' | 'context-menu' | 'debug-panel' | 'dialog' | '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-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-highlighter' | 'tool-line' | 'tool-media' | 'tool-note' | 'tool-pencil' | 'tool-pointer' | 'tool-text' | 'trash' | 'triangle-down' | 'triangle-up' | 'twitter' | 'undo' | 'ungroup' | 'unlock-small' | 'unlock' | 'visible' | 'warning-triangle' | 'zoom-in' | 'zoom-out'; @@ -900,6 +909,9 @@ export function useDefaultHelpers(): { // @public (undocumented) export function useDialogs(): DialogsContextType; +// @public (undocumented) +export function useEvents(): TLUiEventHandler; + // @public (undocumented) export function useExportAs(): (ids?: TLShapeId[], format?: TLExportType) => Promise; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 5d272c970..898136871 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -79,7 +79,12 @@ export { type DialogsProviderProps, type TLDialog, } from './lib/hooks/useDialogsProvider' -export { type TLUiEventHandler } from './lib/hooks/useEventsProvider' +export { + useEvents, + type EventsProviderProps, + type TLUiEventHandler, + type TLUiEventSource, +} from './lib/hooks/useEventsProvider' export { useExportAs } from './lib/hooks/useExportAs' export { HelpMenuSchemaContext, diff --git a/packages/ui/src/lib/TldrawUiContextProvider.tsx b/packages/ui/src/lib/TldrawUiContextProvider.tsx index deceaf043..5241f3abe 100644 --- a/packages/ui/src/lib/TldrawUiContextProvider.tsx +++ b/packages/ui/src/lib/TldrawUiContextProvider.tsx @@ -33,15 +33,15 @@ export function TldrawUiContextProvider({ return ( - - - - + + + + {children} - - - - + + + + )