feat(ui): expose typed overlay handles

packages/ui/src/components/alert-dialog.tsx

@@ -4,11 +4,21 @@ import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog
 import { cn } from "../lib/utils"
 import { Button } from "./button"
 
-function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+type AlertDialogHandle<Payload> = AlertDialogPrimitive.Handle<Payload>
+
+function createAlertDialogHandle<Payload>(): AlertDialogHandle<Payload> {
+  return AlertDialogPrimitive.createHandle<Payload>()
+}
+
+function AlertDialog<Payload = unknown>({
+  ...props
+}: AlertDialogPrimitive.Root.Props<Payload>) {
   return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
 }
 
-function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+function AlertDialogTrigger<Payload = unknown>({
+  ...props
+}: AlertDialogPrimitive.Trigger.Props<Payload>) {
   return (
     <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
   )
@@ -170,6 +180,7 @@ function AlertDialogCancel({
 }
 
 export {
+  type AlertDialogHandle,
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
@@ -182,4 +193,5 @@ export {
   AlertDialogPortal,
   AlertDialogTitle,
   AlertDialogTrigger,
+  createAlertDialogHandle,
 }

packages/ui/src/components/drawer.tsx

@@ -30,13 +30,13 @@ function createDrawerHandle<Payload>(): DrawerHandle<Payload> {
   return DrawerPrimitive.createHandle<Payload>()
 }
 
-function Drawer({
+function Drawer<Payload = unknown>({
   modal = true,
   showSwipeHandle = false,
   snapPoints,
   swipeDirection = "down",
   ...props
-}: DrawerPrimitive.Root.Props & {
+}: DrawerPrimitive.Root.Props<Payload> & {
   showSwipeHandle?: boolean
 }) {
   const hasSnapPoints = snapPoints != null && snapPoints.length > 0
@@ -58,7 +58,9 @@ function Drawer({
   )
 }
 
-function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
+function DrawerTrigger<Payload = unknown>({
+  ...props
+}: DrawerPrimitive.Trigger.Props<Payload>) {
   return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
 }
 
@@ -217,6 +219,7 @@ function DrawerDescription({
 }
 
 export {
+  type DrawerHandle,
   Drawer,
   DrawerPortal,
   DrawerOverlay,

packages/ui/src/components/sheet.tsx

@@ -8,15 +8,21 @@ import { Button } from "./button"
 import { XIcon } from "./icon"
 import { LocalizedText, uiMessages } from "./i18n"
 
-function createSheetHandle<Payload>(): SheetPrimitive.Handle<Payload> {
+type SheetHandle<Payload> = SheetPrimitive.Handle<Payload>
+
+function createSheetHandle<Payload>(): SheetHandle<Payload> {
   return SheetPrimitive.createHandle<Payload>()
 }
 
-function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+function Sheet<Payload = unknown>({
+  ...props
+}: SheetPrimitive.Root.Props<Payload>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />
 }
 
-function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+function SheetTrigger<Payload = unknown>({
+  ...props
+}: SheetPrimitive.Trigger.Props<Payload>) {
   return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
 }
 
@@ -130,6 +136,7 @@ function SheetDescription({
 }
 
 export {
+  type SheetHandle,
   Sheet,
   SheetTrigger,
   SheetClose,