fix(video-player): compose root event handlers

.changeset/clean-owls-merge.md

@@ -0,0 +1,5 @@
+---
+"@bazza-ui/react": patch
+---
+
+Compose video player root event handlers so consumer handlers run before internal behavior and can opt out with preventBaseUIHandler.

packages/react/src/utils/types.ts

@@ -15,6 +15,29 @@ export type HTMLProps<T = any> = React.HTMLAttributes<T> & {
   ref?: React.Ref<T> | undefined
 }
 
+/**
+ * React synthetic event augmented by Base UI's mergeProps utility.
+ */
+export type PreventableBaseHandlerEvent<
+  E extends React.SyntheticEvent<Element, Event>,
+> = E & {
+  preventBaseUIHandler: () => void
+  readonly baseUIHandlerPrevented?: boolean
+}
+
+type WithPreventableBaseHandler<T> = T extends (event: infer E) => infer R
+  ? E extends React.SyntheticEvent<Element, Event>
+    ? (event: PreventableBaseHandlerEvent<E>) => R
+    : T
+  : T
+
+/**
+ * Adds Base UI's preventBaseUIHandler event typing to React event handlers.
+ */
+export type WithPreventableBaseHandlers<T> = {
+  [K in keyof T]: WithPreventableBaseHandler<T[K]>
+}
+
 /**
  * Props shared by all Bazza UI components.
  * Includes className (string or state-based function), render prop, and style (object or state-based function).

packages/react/src/video-player/components/root/root.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { mergeProps } from '@base-ui/react/merge-props'
 import * as React from 'react'
 import { VideoPlayerContext } from '../../contexts/video-player-context.js'
 import { useKeyboardShortcuts } from '../../hooks/use-keyboard-shortcuts.js'
@@ -966,6 +967,16 @@ const VideoPlayerRootImpl = React.forwardRef<
     context.resetIdle()
   }, [context])
 
+  const rootProps = mergeProps<'div'>(
+    {
+      onMouseMove: handleMouseMove,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+    },
+    divProps,
+  )
+
   // Data attributes for styling
   const dataAttributes = {
     [RootDataAttributes.playing]: context.playing || undefined,
@@ -992,17 +1003,13 @@ const VideoPlayerRootImpl = React.forwardRef<
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: allowed
     <div
+      {...rootProps}
       ref={composedRef}
       tabIndex={keyboardShortcuts === 'focused' ? 0 : undefined}
       className={className}
       style={style}
       data-video-player-scope={scopeId}
       {...dataAttributes}
-      {...divProps}
-      onMouseMove={handleMouseMove}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      onClick={handleClick}
     >
       {/* Inject scoped style to hide cursor - uses !important to override child styles */}
       {shouldHideCursor && (

packages/react/src/video-player/types.ts

@@ -1,5 +1,7 @@
 import type * as React from 'react'
 
+import type { WithPreventableBaseHandlers } from '../utils/types.js'
+
 // ============================================================================
 // Playback Status & Intent
 // ============================================================================
@@ -216,7 +218,7 @@ export interface VideoPlayerExternalActions {
 
 // Omit conflicting native event handlers
 type DivPropsWithoutConflicts = Omit<
-  React.ComponentPropsWithRef<'div'>,
+  WithPreventableBaseHandlers<React.ComponentPropsWithRef<'div'>>,
   'onVolumeChange' | 'onEnded' | 'onWaiting' | 'onSeeking' | 'onSeeked'
 >