Export Events stuff (#1360)

This PR exports the `TLUiEventSource` type from ui.

### Change Type

- [x] `patch` — Bug Fix
- [ ] `minor` — New Feature
- [ ] `major` — Breaking Change

### Release Notes

- [ui] export the `TLUiEventSource` type
- [ui] export the `EventsProviderProps ` type
- [ui] export the `useEvents ` hook

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<TLTranslation>;
 
@@ -733,6 +739,9 @@ export type TLUiEventHandler<T extends keyof TLUiEventMap = keyof TLUiEventMap>
     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<keyof TLUiEventMap>;
+
 // @public (undocumented)
 export function useExportAs(): (ids?: TLShapeId[], format?: TLExportType) => Promise<void>;
 

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,

packages/ui/src/lib/TldrawUiContextProvider.tsx

@@ -33,15 +33,15 @@ export function TldrawUiContextProvider({
 	return (
 		<AssetUrlsProvider assetUrls={assetUrls ?? defaultUiAssetUrls}>
 			<TranslationProvider overrides={useMergedTranslationOverrides(overrides)}>
-				<ToastsProvider>
+				<EventsProvider onEvent={onUiEvent}>
-					<DialogsProvider>
+					<ToastsProvider>
-						<BreakPointProvider>
+						<DialogsProvider>
-							<EventsProvider onEvent={onUiEvent}>
+							<BreakPointProvider>
 								<InternalProviders overrides={overrides}>{children}</InternalProviders>
-							</EventsProvider>
+							</BreakPointProvider>
-						</BreakPointProvider>
+						</DialogsProvider>
-					</DialogsProvider>
+					</ToastsProvider>
-				</ToastsProvider>
+				</EventsProvider>
 			</TranslationProvider>
 		</AssetUrlsProvider>
 	)