@videojs/react 10.0.0-beta.27 → 10.0.0-beta.29

package/dist/default/ui/input-indicator/use-input-action-subscription.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-input-action-subscription.js","names":[],"sources":["../../../../src/ui/input-indicator/use-input-action-subscription.ts"],"sourcesContent":["'use client';\n\nimport type { InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport { getMediaSnapshot, subscribeToInputActions } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useInputActionSubscription(callback: (event: InputActionEvent, snapshot: MediaSnapshot) => void): void {\n  const container = useContainer();\n  const store = usePlayer();\n  const callbackRef = useLatestRef(callback);\n  const storeRef = useLatestRef(store);\n\n  useEffect(() => {\n    if (!container) return;\n\n    return subscribeToInputActions(container, (event) => {\n      callbackRef.current(event, getMediaSnapshot(storeRef.current));\n    });\n  }, [container]);\n}\n"],"mappings":";;;;;;AASA,SAAgB,2BAA2B,UAA4E;CACrH,MAAM,YAAY,aAAa;CAC/B,MAAM,QAAQ,UAAU;CACxB,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,WAAW,aAAa,KAAK;CAEnC,gBAAgB;EACd,IAAI,CAAC,WAAW;EAEhB,OAAO,wBAAwB,YAAY,UAAU;GACnD,YAAY,QAAQ,OAAO,iBAAiB,SAAS,OAAO,CAAC;EAC/D,CAAC;CACH,GAAG,CAAC,SAAS,CAAC;AAChB"}
+{"version":3,"file":"use-input-action-subscription.js","names":[],"sources":["../../../../src/ui/input-indicator/use-input-action-subscription.ts"],"sourcesContent":["import type { InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport { getMediaSnapshot, subscribeToInputActions } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useInputActionSubscription(callback: (event: InputActionEvent, snapshot: MediaSnapshot) => void): void {\n  const container = useContainer();\n  const store = usePlayer();\n  const callbackRef = useLatestRef(callback);\n  const storeRef = useLatestRef(store);\n\n  useEffect(() => {\n    if (!container) return;\n\n    return subscribeToInputActions(container, (event) => {\n      callbackRef.current(event, getMediaSnapshot(storeRef.current));\n    });\n  }, [container]);\n}\n"],"mappings":";;;;;AAOA,SAAgB,2BAA2B,UAA4E;CACrH,MAAM,YAAY,aAAa;CAC/B,MAAM,QAAQ,UAAU;CACxB,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,WAAW,aAAa,KAAK;CAEnC,gBAAgB;EACd,IAAI,CAAC,WAAW;EAEhB,OAAO,wBAAwB,YAAY,UAAU;GACnD,YAAY,QAAQ,OAAO,iBAAiB,SAAS,OAAO,CAAC;EAC/D,CAAC;CACH,GAAG,CAAC,SAAS,CAAC;AAChB"}

package/dist/default/ui/input-indicator/use-input-indicator-root.js

@@ -1,4 +1,3 @@
-"use client";
 import { useDestroy } from "../../utils/use-destroy.js";
 import { useIndicatorVisibility } from "./use-indicator-visibility.js";
 import { useInputActionSubscription } from "./use-input-action-subscription.js";

package/dist/default/ui/input-indicator/use-input-indicator-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-input-indicator-root.js","names":[],"sources":["../../../../src/ui/input-indicator/use-input-indicator-root.ts"],"sourcesContent":["'use client';\n\nimport type { IndicatorLifecycleState, InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport type { State as StoreState } from '@videojs/store';\nimport { useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useIndicatorVisibility } from './use-indicator-visibility';\nimport { useInputActionSubscription } from './use-input-action-subscription';\nimport { type RenderedIndicatorOptions, useRenderedIndicatorState } from './use-rendered-indicator-state';\n\ninterface InputIndicatorRootCore<IndicatorState extends IndicatorLifecycleState, Props> {\n  readonly state: StoreState<IndicatorState>;\n  setProps(props: Props): void;\n  destroy(): void;\n  close(): void;\n  processEvent(event: InputActionEvent, snapshot: MediaSnapshot): boolean;\n}\n\nexport function useInputIndicatorRoot<IndicatorState extends IndicatorLifecycleState, Props>(\n  createCore: () => InputIndicatorRootCore<IndicatorState, Props>,\n  props: Props,\n  options?: RenderedIndicatorOptions\n) {\n  const [core] = useState(createCore);\n  useDestroy(core);\n  core.setProps(props);\n  const showIndicator = useIndicatorVisibility(() => core.close());\n\n  useInputActionSubscription((event, snapshot) => {\n    if (core.processEvent(event, snapshot)) showIndicator();\n  });\n\n  const currentState = useSyncExternalStore(\n    (callback) => core.state.subscribe(callback),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  return useRenderedIndicatorState(currentState, options);\n}\n"],"mappings":";;;;;;;AAmBA,SAAgB,sBACd,YACA,OACA,SACA;CACA,MAAM,CAAC,QAAQ,SAAS,UAAU;CAClC,WAAW,IAAI;CACf,KAAK,SAAS,KAAK;CACnB,MAAM,gBAAgB,6BAA6B,KAAK,MAAM,CAAC;CAE/D,4BAA4B,OAAO,aAAa;EAC9C,IAAI,KAAK,aAAa,OAAO,QAAQ,GAAG,cAAc;CACxD,CAAC;CAQD,OAAO,0BANc,sBAClB,aAAa,KAAK,MAAM,UAAU,QAAQ,SACrC,KAAK,MAAM,eACX,KAAK,MAAM,OAGyB,GAAG,OAAO;AACxD"}
+{"version":3,"file":"use-input-indicator-root.js","names":[],"sources":["../../../../src/ui/input-indicator/use-input-indicator-root.ts"],"sourcesContent":["import type { IndicatorLifecycleState, InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport type { State as StoreState } from '@videojs/store';\nimport { useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useIndicatorVisibility } from './use-indicator-visibility';\nimport { useInputActionSubscription } from './use-input-action-subscription';\nimport { type RenderedIndicatorOptions, useRenderedIndicatorState } from './use-rendered-indicator-state';\n\ninterface InputIndicatorRootCore<IndicatorState extends IndicatorLifecycleState, Props> {\n  readonly state: StoreState<IndicatorState>;\n  setProps(props: Props): void;\n  destroy(): void;\n  close(): void;\n  processEvent(event: InputActionEvent, snapshot: MediaSnapshot): boolean;\n}\n\nexport function useInputIndicatorRoot<IndicatorState extends IndicatorLifecycleState, Props>(\n  createCore: () => InputIndicatorRootCore<IndicatorState, Props>,\n  props: Props,\n  options?: RenderedIndicatorOptions\n) {\n  const [core] = useState(createCore);\n  useDestroy(core);\n  core.setProps(props);\n  const showIndicator = useIndicatorVisibility(() => core.close());\n\n  useInputActionSubscription((event, snapshot) => {\n    if (core.processEvent(event, snapshot)) showIndicator();\n  });\n\n  const currentState = useSyncExternalStore(\n    (callback) => core.state.subscribe(callback),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  return useRenderedIndicatorState(currentState, options);\n}\n"],"mappings":";;;;;;AAiBA,SAAgB,sBACd,YACA,OACA,SACA;CACA,MAAM,CAAC,QAAQ,SAAS,UAAU;CAClC,WAAW,IAAI;CACf,KAAK,SAAS,KAAK;CACnB,MAAM,gBAAgB,6BAA6B,KAAK,MAAM,CAAC;CAE/D,4BAA4B,OAAO,aAAa;EAC9C,IAAI,KAAK,aAAa,OAAO,QAAQ,GAAG,cAAc;CACxD,CAAC;CAQD,OAAO,0BANc,sBAClB,aAAa,KAAK,MAAM,UAAU,QAAQ,SACrC,KAAK,MAAM,eACX,KAAK,MAAM,OAGyB,GAAG,OAAO;AACxD"}

package/dist/default/ui/input-indicator/use-rendered-indicator-state.js

@@ -1,4 +1,3 @@
-"use client";
 import { useDestroy } from "../../utils/use-destroy.js";
 import { createTransition } from "@videojs/core/dom";
 import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";

package/dist/default/ui/input-indicator/use-rendered-indicator-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-rendered-indicator-state.js","names":[],"sources":["../../../../src/ui/input-indicator/use-rendered-indicator-state.ts"],"sourcesContent":["'use client';\n\nimport { getRenderedIndicatorState, type IndicatorLifecycleState, isIndicatorPresent } from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport { useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\n\nexport interface RenderedIndicatorOptions {\n  replayOnUpdate?: boolean | undefined;\n}\n\nexport function useRenderedIndicatorState<State extends IndicatorLifecycleState>(\n  currentState: State,\n  options: RenderedIndicatorOptions = {}\n) {\n  const elementRef = useRef<HTMLElement>(null);\n  const currentStateRef = useRef(currentState);\n  const snapshotRef = useRef(currentState);\n  const [transition] = useState(() => createTransition());\n  useDestroy(transition);\n  currentStateRef.current = currentState;\n\n  const transitionState = useSyncExternalStore(\n    (callback) => transition.state.subscribe(callback),\n    () => transition.state.current,\n    () => transition.state.current\n  );\n\n  const { generation, open } = currentState;\n\n  useLayoutEffect(() => {\n    if (open) {\n      const nextState = currentStateRef.current;\n      if (nextState.generation !== generation) return;\n\n      snapshotRef.current = nextState;\n      const transitionState = transition.state.current;\n      if (!transitionState.active || options.replayOnUpdate !== false) {\n        void transition.open(elementRef.current);\n      } else if (transitionState.status === 'ending') {\n        transition.cancel();\n      }\n      return;\n    }\n\n    const { active, status } = transition.state.current;\n    if (active && status !== 'ending') {\n      void transition.close(elementRef.current);\n    }\n  }, [generation, open, options.replayOnUpdate, transition]);\n\n  return {\n    elementRef,\n    present: isIndicatorPresent(currentState, transitionState),\n    state: getRenderedIndicatorState(currentState, snapshotRef.current, transitionState),\n  };\n}\n"],"mappings":";;;;;;AAYA,SAAgB,0BACd,cACA,UAAoC,CAAC,GACrC;CACA,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,kBAAkB,OAAO,YAAY;CAC3C,MAAM,cAAc,OAAO,YAAY;CACvC,MAAM,CAAC,cAAc,eAAe,iBAAiB,CAAC;CACtD,WAAW,UAAU;CACrB,gBAAgB,UAAU;CAE1B,MAAM,kBAAkB,sBACrB,aAAa,WAAW,MAAM,UAAU,QAAQ,SAC3C,WAAW,MAAM,eACjB,WAAW,MAAM,OACzB;CAEA,MAAM,EAAE,YAAY,SAAS;CAE7B,sBAAsB;EACpB,IAAI,MAAM;GACR,MAAM,YAAY,gBAAgB;GAClC,IAAI,UAAU,eAAe,YAAY;GAEzC,YAAY,UAAU;GACtB,MAAM,kBAAkB,WAAW,MAAM;GACzC,IAAI,CAAC,gBAAgB,UAAU,QAAQ,mBAAmB,OACxD,WAAgB,KAAK,WAAW,OAAO;QAClC,IAAI,gBAAgB,WAAW,UACpC,WAAW,OAAO;GAEpB;EACF;EAEA,MAAM,EAAE,QAAQ,WAAW,WAAW,MAAM;EAC5C,IAAI,UAAU,WAAW,UACvB,WAAgB,MAAM,WAAW,OAAO;CAE5C,GAAG;EAAC;EAAY;EAAM,QAAQ;EAAgB;CAAU,CAAC;CAEzD,OAAO;EACL;EACA,SAAS,mBAAmB,cAAc,eAAe;EACzD,OAAO,0BAA0B,cAAc,YAAY,SAAS,eAAe;CACrF;AACF"}
+{"version":3,"file":"use-rendered-indicator-state.js","names":[],"sources":["../../../../src/ui/input-indicator/use-rendered-indicator-state.ts"],"sourcesContent":["import { getRenderedIndicatorState, type IndicatorLifecycleState, isIndicatorPresent } from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport { useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\n\nexport interface RenderedIndicatorOptions {\n  replayOnUpdate?: boolean | undefined;\n}\n\nexport function useRenderedIndicatorState<State extends IndicatorLifecycleState>(\n  currentState: State,\n  options: RenderedIndicatorOptions = {}\n) {\n  const elementRef = useRef<HTMLElement>(null);\n  const currentStateRef = useRef(currentState);\n  const snapshotRef = useRef(currentState);\n  const [transition] = useState(() => createTransition());\n  useDestroy(transition);\n  currentStateRef.current = currentState;\n\n  const transitionState = useSyncExternalStore(\n    (callback) => transition.state.subscribe(callback),\n    () => transition.state.current,\n    () => transition.state.current\n  );\n\n  const { generation, open } = currentState;\n\n  useLayoutEffect(() => {\n    if (open) {\n      const nextState = currentStateRef.current;\n      if (nextState.generation !== generation) return;\n\n      snapshotRef.current = nextState;\n      const transitionState = transition.state.current;\n      if (!transitionState.active || options.replayOnUpdate !== false) {\n        void transition.open(elementRef.current);\n      } else if (transitionState.status === 'ending') {\n        transition.cancel();\n      }\n      return;\n    }\n\n    const { active, status } = transition.state.current;\n    if (active && status !== 'ending') {\n      void transition.close(elementRef.current);\n    }\n  }, [generation, open, options.replayOnUpdate, transition]);\n\n  return {\n    elementRef,\n    present: isIndicatorPresent(currentState, transitionState),\n    state: getRenderedIndicatorState(currentState, snapshotRef.current, transitionState),\n  };\n}\n"],"mappings":";;;;;AAUA,SAAgB,0BACd,cACA,UAAoC,CAAC,GACrC;CACA,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,kBAAkB,OAAO,YAAY;CAC3C,MAAM,cAAc,OAAO,YAAY;CACvC,MAAM,CAAC,cAAc,eAAe,iBAAiB,CAAC;CACtD,WAAW,UAAU;CACrB,gBAAgB,UAAU;CAE1B,MAAM,kBAAkB,sBACrB,aAAa,WAAW,MAAM,UAAU,QAAQ,SAC3C,WAAW,MAAM,eACjB,WAAW,MAAM,OACzB;CAEA,MAAM,EAAE,YAAY,SAAS;CAE7B,sBAAsB;EACpB,IAAI,MAAM;GACR,MAAM,YAAY,gBAAgB;GAClC,IAAI,UAAU,eAAe,YAAY;GAEzC,YAAY,UAAU;GACtB,MAAM,kBAAkB,WAAW,MAAM;GACzC,IAAI,CAAC,gBAAgB,UAAU,QAAQ,mBAAmB,OACxD,WAAgB,KAAK,WAAW,OAAO;QAClC,IAAI,gBAAgB,WAAW,UACpC,WAAW,OAAO;GAEpB;EACF;EAEA,MAAM,EAAE,QAAQ,WAAW,WAAW,MAAM;EAC5C,IAAI,UAAU,WAAW,UACvB,WAAgB,MAAM,WAAW,OAAO;CAE5C,GAAG;EAAC;EAAY;EAAM,QAAQ;EAAgB;CAAU,CAAC;CAEzD,OAAO;EACL;EACA,SAAS,mBAAmB,cAAc,eAAe;EACzD,OAAO,0BAA0B,cAAc,YAAY,SAAS,eAAe;CACrF;AACF"}

package/dist/default/ui/live-button/live-button.js

@@ -1,4 +1,3 @@
-"use client";
 import { useTranslator } from "../../i18n/context.js";
 import { usePlayer } from "../../player/context.js";
 import { renderElement } from "../../utils/use-render.js";

package/dist/default/ui/live-button/live-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"live-button.js","names":[],"sources":["../../../../src/ui/live-button/live-button.tsx"],"sourcesContent":["'use client';\n\nimport { LiveButtonCore, LiveButtonDataAttrs, type LiveButtonMediaState } from '@videojs/core';\nimport { logMissingFeature, selectBuffer, selectLive, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode, useLayoutEffect, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\nimport { useOptionalTooltipContext } from '../tooltip/context';\n\nconst DISPLAY_NAME = 'LiveButton';\n\nexport interface LiveButtonProps extends UIComponentProps<'button', LiveButtonCore.State>, LiveButtonCore.Props {}\n\n/**\n * A button that indicates live status and seeks to the live edge when\n * pressed. Exposes `data-live` while the stream is live (or DVR) and\n * `data-live-edge` while playing at the live edge so skins can style a\n * red-dot ↔ grey-dot treatment.\n *\n * Selects from `live`, `time`, and `buffer` features and composes them\n * itself rather than going through `createMediaButton`, since the LiveButton\n * needs three feature slices to detect the live edge and seek.\n *\n * Displays the translated live badge when no children are provided.\n *\n * @example\n * ```tsx\n * <LiveButton />\n * ```\n *\n * @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md\n */\nexport const LiveButton = forwardRef<HTMLButtonElement, LiveButtonProps>(\n  function LiveButton(componentProps, forwardedRef): ReactNode {\n    const { children, render, className, style, label, disabled, ...elementProps } = componentProps;\n\n    const live = usePlayer(selectLive);\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n\n    const media: LiveButtonMediaState | null =\n      live && time && buffer\n        ? {\n            currentTime: time.currentTime,\n            seek: time.seek,\n            seekable: buffer.seekable,\n            liveEdgeStart: live.liveEdgeStart,\n            targetLiveWindow: live.targetLiveWindow,\n          }\n        : null;\n\n    const tooltipCtx = useOptionalTooltipContext();\n    const translator = useTranslator();\n    const [core] = useState(() => new LiveButtonCore());\n    core.setProps({ label, disabled });\n\n    const { getButtonProps, buttonRef } = useButton({\n      displayName: DISPLAY_NAME,\n      onActivate: () => {\n        if (media) core.seekToLive(media);\n      },\n      isDisabled: () => !!disabled || !media,\n    });\n\n    if (media) core.setMedia(media);\n    const state = media ? core.getState() : null;\n    const labelText = state ? translateText(core.getLabel(state), translator) : undefined;\n\n    useLayoutEffect(() => {\n      if (!tooltipCtx) return;\n      tooltipCtx.setContent(labelText ? { label: labelText } : undefined);\n      return () => tooltipCtx.setContent(undefined);\n    }, [tooltipCtx, labelText]);\n\n    if (!media || !state) {\n      if (__DEV__) logMissingFeature(DISPLAY_NAME, selectLive.displayName ?? 'live');\n      return null;\n    }\n\n    const attrs = core.getAttrs(state);\n    const labelAttr = attrs['aria-label'];\n    const content = children ?? translateText(LiveButtonCore.defaultText, translator);\n\n    return renderElement(\n      'button',\n      { render, className, style },\n      {\n        state,\n        stateAttrMap: LiveButtonDataAttrs,\n        ref: [forwardedRef, buttonRef],\n        props: [\n          attrs,\n          {\n            children: content,\n            ...elementProps,\n            'aria-label': labelAttr ? translateText(labelAttr, translator) : labelAttr,\n          },\n          getButtonProps(),\n        ],\n      }\n    );\n  }\n);\n\nLiveButton.displayName = DISPLAY_NAME;\n\nexport namespace LiveButton {\n  export type Props = LiveButtonProps;\n  export type State = LiveButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;AAuBrB,MAAa,aAAa,WACxB,SAAS,WAAW,gBAAgB,cAAyB;CAC3D,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEjF,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,SAAS,UAAU,YAAY;CAErC,MAAM,QACJ,QAAQ,QAAQ,SACZ;EACE,aAAa,KAAK;EAClB,MAAM,KAAK;EACX,UAAU,OAAO;EACjB,eAAe,KAAK;EACpB,kBAAkB,KAAK;CACzB,IACA;CAEN,MAAM,aAAa,0BAA0B;CAC7C,MAAM,aAAa,cAAc;CACjC,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;CAClD,KAAK,SAAS;EAAE;EAAO;CAAS,CAAC;CAEjC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB;GAChB,IAAI,OAAO,KAAK,WAAW,KAAK;EAClC;EACA,kBAAkB,CAAC,CAAC,YAAY,CAAC;CACnC,CAAC;CAED,IAAI,OAAO,KAAK,SAAS,KAAK;CAC9B,MAAM,QAAQ,QAAQ,KAAK,SAAS,IAAI;CACxC,MAAM,YAAY,QAAQ,cAAc,KAAK,SAAS,KAAK,GAAG,UAAU,IAAI,KAAA;CAE5E,sBAAsB;EACpB,IAAI,CAAC,YAAY;EACjB,WAAW,WAAW,YAAY,EAAE,OAAO,UAAU,IAAI,KAAA,CAAS;EAClE,aAAa,WAAW,WAAW,KAAA,CAAS;CAC9C,GAAG,CAAC,YAAY,SAAS,CAAC;CAE1B,IAAI,CAAC,SAAS,CAAC,OAEb,OAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,KAAK;CACjC,MAAM,YAAY,MAAM;CACxB,MAAM,UAAU,YAAY,cAAc,eAAe,aAAa,UAAU;CAEhF,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,SAAS;EAC7B,OAAO;GACL;GACA;IACE,UAAU;IACV,GAAG;IACH,cAAc,YAAY,cAAc,WAAW,UAAU,IAAI;GACnE;GACA,eAAe;EACjB;CACF,CACF;AACF,CACF;AAEA,WAAW,cAAc"}
+{"version":3,"file":"live-button.js","names":[],"sources":["../../../../src/ui/live-button/live-button.tsx"],"sourcesContent":["import { LiveButtonCore, LiveButtonDataAttrs, type LiveButtonMediaState } from '@videojs/core';\nimport { logMissingFeature, selectBuffer, selectLive, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode, useLayoutEffect, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\nimport { useOptionalTooltipContext } from '../tooltip/context';\n\nconst DISPLAY_NAME = 'LiveButton';\n\nexport interface LiveButtonProps extends UIComponentProps<'button', LiveButtonCore.State>, LiveButtonCore.Props {}\n\n/**\n * A button that indicates live status and seeks to the live edge when\n * pressed. Exposes `data-live` while the stream is live (or DVR) and\n * `data-live-edge` while playing at the live edge so skins can style a\n * red-dot ↔ grey-dot treatment.\n *\n * Selects from `live`, `time`, and `buffer` features and composes them\n * itself rather than going through `createMediaButton`, since the LiveButton\n * needs three feature slices to detect the live edge and seek.\n *\n * Displays the translated live badge when no children are provided.\n *\n * @example\n * ```tsx\n * <LiveButton />\n * ```\n *\n * @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md\n */\nexport const LiveButton = forwardRef<HTMLButtonElement, LiveButtonProps>(\n  function LiveButton(componentProps, forwardedRef): ReactNode {\n    const { children, render, className, style, label, disabled, ...elementProps } = componentProps;\n\n    const live = usePlayer(selectLive);\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n\n    const media: LiveButtonMediaState | null =\n      live && time && buffer\n        ? {\n            currentTime: time.currentTime,\n            seek: time.seek,\n            seekable: buffer.seekable,\n            liveEdgeStart: live.liveEdgeStart,\n            targetLiveWindow: live.targetLiveWindow,\n          }\n        : null;\n\n    const tooltipCtx = useOptionalTooltipContext();\n    const translator = useTranslator();\n    const [core] = useState(() => new LiveButtonCore());\n    core.setProps({ label, disabled });\n\n    const { getButtonProps, buttonRef } = useButton({\n      displayName: DISPLAY_NAME,\n      onActivate: () => {\n        if (media) core.seekToLive(media);\n      },\n      isDisabled: () => !!disabled || !media,\n    });\n\n    if (media) core.setMedia(media);\n    const state = media ? core.getState() : null;\n    const labelText = state ? translateText(core.getLabel(state), translator) : undefined;\n\n    useLayoutEffect(() => {\n      if (!tooltipCtx) return;\n      tooltipCtx.setContent(labelText ? { label: labelText } : undefined);\n      return () => tooltipCtx.setContent(undefined);\n    }, [tooltipCtx, labelText]);\n\n    if (!media || !state) {\n      if (__DEV__) logMissingFeature(DISPLAY_NAME, selectLive.displayName ?? 'live');\n      return null;\n    }\n\n    const attrs = core.getAttrs(state);\n    const labelAttr = attrs['aria-label'];\n    const content = children ?? translateText(LiveButtonCore.defaultText, translator);\n\n    return renderElement(\n      'button',\n      { render, className, style },\n      {\n        state,\n        stateAttrMap: LiveButtonDataAttrs,\n        ref: [forwardedRef, buttonRef],\n        props: [\n          attrs,\n          {\n            children: content,\n            ...elementProps,\n            'aria-label': labelAttr ? translateText(labelAttr, translator) : labelAttr,\n          },\n          getButtonProps(),\n        ],\n      }\n    );\n  }\n);\n\nLiveButton.displayName = DISPLAY_NAME;\n\nexport namespace LiveButton {\n  export type Props = LiveButtonProps;\n  export type State = LiveButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;AAYA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;AAuBrB,MAAa,aAAa,WACxB,SAAS,WAAW,gBAAgB,cAAyB;CAC3D,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEjF,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,SAAS,UAAU,YAAY;CAErC,MAAM,QACJ,QAAQ,QAAQ,SACZ;EACE,aAAa,KAAK;EAClB,MAAM,KAAK;EACX,UAAU,OAAO;EACjB,eAAe,KAAK;EACpB,kBAAkB,KAAK;CACzB,IACA;CAEN,MAAM,aAAa,0BAA0B;CAC7C,MAAM,aAAa,cAAc;CACjC,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;CAClD,KAAK,SAAS;EAAE;EAAO;CAAS,CAAC;CAEjC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB;GAChB,IAAI,OAAO,KAAK,WAAW,KAAK;EAClC;EACA,kBAAkB,CAAC,CAAC,YAAY,CAAC;CACnC,CAAC;CAED,IAAI,OAAO,KAAK,SAAS,KAAK;CAC9B,MAAM,QAAQ,QAAQ,KAAK,SAAS,IAAI;CACxC,MAAM,YAAY,QAAQ,cAAc,KAAK,SAAS,KAAK,GAAG,UAAU,IAAI,KAAA;CAE5E,sBAAsB;EACpB,IAAI,CAAC,YAAY;EACjB,WAAW,WAAW,YAAY,EAAE,OAAO,UAAU,IAAI,KAAA,CAAS;EAClE,aAAa,WAAW,WAAW,KAAA,CAAS;CAC9C,GAAG,CAAC,YAAY,SAAS,CAAC;CAE1B,IAAI,CAAC,SAAS,CAAC,OAEb,OAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,KAAK;CACjC,MAAM,YAAY,MAAM;CACxB,MAAM,UAAU,YAAY,cAAc,eAAe,aAAa,UAAU;CAEhF,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,SAAS;EAC7B,OAAO;GACL;GACA;IACE,UAAU;IACV,GAAG;IACH,cAAc,YAAY,cAAc,WAAW,UAAU,IAAI;GACnE;GACA,eAAe;EACjB;CACF,CACF;AACF,CACF;AAEA,WAAW,cAAc"}

package/dist/default/ui/menu/context.js

@@ -1,4 +1,3 @@
-"use client";
 import { createContext, useContext } from "react";
 //#region src/ui/menu/context.tsx
 const MenuContext = createContext(null);
@@ -23,12 +22,17 @@ function useMenuRadioGroupContext() {
 	if (!ctx) throw new Error("Menu.RadioItem must be used within a Menu.RadioGroup");
 	return ctx;
 }
+const MenuRadioItemContext = createContext(false);
+const MenuRadioItemContextProvider = MenuRadioItemContext.Provider;
+function useOptionalMenuRadioItemContext() {
+	return useContext(MenuRadioItemContext);
+}
 const MenuTriggerChildContext = createContext(false);
 const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;
 function useOptionalMenuTriggerChildContext() {
 	return useContext(MenuTriggerChildContext);
 }
 //#endregion
-export { MenuContextProvider, MenuGroupContextProvider, MenuRadioGroupContextProvider, MenuTriggerChildContextProvider, useMenuContext, useMenuGroupContext, useMenuRadioGroupContext, useOptionalMenuContext, useOptionalMenuTriggerChildContext };
+export { MenuContextProvider, MenuGroupContextProvider, MenuRadioGroupContextProvider, MenuRadioItemContextProvider, MenuTriggerChildContextProvider, useMenuContext, useMenuGroupContext, useMenuRadioGroupContext, useOptionalMenuContext, useOptionalMenuRadioItemContext, useOptionalMenuTriggerChildContext };
 
 //# sourceMappingURL=context.js.map

package/dist/default/ui/menu/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuCore, MenuState, StateAttrMap } from '@videojs/core';\nimport type { MediaContainer, MenuApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface MenuContextValue {\n  core: MenuCore;\n  menu: MenuApi;\n  parent: MenuContextValue | null;\n  state: MenuState;\n  preferredSide: MenuState['side'];\n  setPositionedSide: (side: MenuState['side']) => void;\n  stateAttrMap: StateAttrMap<MenuState>;\n  contentId: string;\n  anchorName: string;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nexport const MenuContextProvider = MenuContext.Provider;\n\nexport function useMenuContext(): MenuContextValue {\n  const ctx = useContext(MenuContext);\n  if (!ctx) throw new Error('Menu compound components must be used within a Menu.Root');\n  return ctx;\n}\n\nexport function useOptionalMenuContext(): MenuContextValue | null {\n  return useContext(MenuContext);\n}\n\n// ---------------------------------------------------------------------------\n// Group context — shared by group-like parts and MenuGroupLabel\n// ---------------------------------------------------------------------------\n\nexport interface MenuGroupContextValue {\n  registerLabel: (id: string) => () => void;\n}\n\nconst MenuGroupContext = createContext<MenuGroupContextValue | null>(null);\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\n\nexport function useMenuGroupContext(): MenuGroupContextValue | null {\n  return useContext(MenuGroupContext);\n}\n\n// ---------------------------------------------------------------------------\n// Radio group context — shared between MenuRadioGroup and MenuRadioItem\n// ---------------------------------------------------------------------------\n\nexport interface MenuRadioGroupContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext<MenuRadioGroupContextValue | null>(null);\n\nexport const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;\n\nexport function useMenuRadioGroupContext(): MenuRadioGroupContextValue {\n  const ctx = useContext(MenuRadioGroupContext);\n  if (!ctx) throw new Error('Menu.RadioItem must be used within a Menu.RadioGroup');\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Root trigger render context — provided by Menu.Trigger for render children.\n// ---------------------------------------------------------------------------\n\nconst MenuTriggerChildContext = createContext(false);\n\nexport const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;\n\nexport function useOptionalMenuTriggerChildContext(): boolean {\n  return useContext(MenuTriggerChildContext);\n}\n"],"mappings":";;;AAoBA,MAAM,cAAc,cAAuC,IAAI;AAE/D,MAAa,sBAAsB,YAAY;AAE/C,SAAgB,iBAAmC;CACjD,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0DAA0D;CACpF,OAAO;AACT;AAEA,SAAgB,yBAAkD;CAChE,OAAO,WAAW,WAAW;AAC/B;AAUA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAWA,MAAM,wBAAwB,cAAiD,IAAI;AAEnF,MAAa,gCAAgC,sBAAsB;AAEnE,SAAgB,2BAAuD;CACrE,MAAM,MAAM,WAAW,qBAAqB;CAC5C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,sDAAsD;CAChF,OAAO;AACT;AAMA,MAAM,0BAA0B,cAAc,KAAK;AAEnD,MAAa,kCAAkC,wBAAwB;AAEvE,SAAgB,qCAA8C;CAC5D,OAAO,WAAW,uBAAuB;AAC3C"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"sourcesContent":["import type { MenuCore, MenuState, StateAttrMap } from '@videojs/core';\nimport type { MediaContainer, MenuApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface MenuContextValue {\n  core: MenuCore;\n  menu: MenuApi;\n  parent: MenuContextValue | null;\n  state: MenuState;\n  preferredSide: MenuState['side'];\n  setPositionedSide: (side: MenuState['side']) => void;\n  stateAttrMap: StateAttrMap<MenuState>;\n  contentId: string;\n  anchorName: string;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nexport const MenuContextProvider = MenuContext.Provider;\n\nexport function useMenuContext(): MenuContextValue {\n  const ctx = useContext(MenuContext);\n  if (!ctx) throw new Error('Menu compound components must be used within a Menu.Root');\n  return ctx;\n}\n\nexport function useOptionalMenuContext(): MenuContextValue | null {\n  return useContext(MenuContext);\n}\n\n// ---------------------------------------------------------------------------\n// Group context — shared by group-like parts and MenuGroupLabel\n// ---------------------------------------------------------------------------\n\nexport interface MenuGroupContextValue {\n  registerLabel: (id: string) => () => void;\n}\n\nconst MenuGroupContext = createContext<MenuGroupContextValue | null>(null);\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\n\nexport function useMenuGroupContext(): MenuGroupContextValue | null {\n  return useContext(MenuGroupContext);\n}\n\n// ---------------------------------------------------------------------------\n// Radio group context — shared between MenuRadioGroup and MenuRadioItem\n// ---------------------------------------------------------------------------\n\nexport interface MenuRadioGroupContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext<MenuRadioGroupContextValue | null>(null);\n\nexport const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;\n\nexport function useMenuRadioGroupContext(): MenuRadioGroupContextValue {\n  const ctx = useContext(MenuRadioGroupContext);\n  if (!ctx) throw new Error('Menu.RadioItem must be used within a Menu.RadioGroup');\n  return ctx;\n}\n\nconst MenuRadioItemContext = createContext(false);\n\nexport const MenuRadioItemContextProvider = MenuRadioItemContext.Provider;\n\nexport function useOptionalMenuRadioItemContext(): boolean {\n  return useContext(MenuRadioItemContext);\n}\n\n// ---------------------------------------------------------------------------\n// Root trigger render context — provided by Menu.Trigger for render children.\n// ---------------------------------------------------------------------------\n\nconst MenuTriggerChildContext = createContext(false);\n\nexport const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;\n\nexport function useOptionalMenuTriggerChildContext(): boolean {\n  return useContext(MenuTriggerChildContext);\n}\n"],"mappings":";;AAkBA,MAAM,cAAc,cAAuC,IAAI;AAE/D,MAAa,sBAAsB,YAAY;AAE/C,SAAgB,iBAAmC;CACjD,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0DAA0D;CACpF,OAAO;AACT;AAEA,SAAgB,yBAAkD;CAChE,OAAO,WAAW,WAAW;AAC/B;AAUA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAWA,MAAM,wBAAwB,cAAiD,IAAI;AAEnF,MAAa,gCAAgC,sBAAsB;AAEnE,SAAgB,2BAAuD;CACrE,MAAM,MAAM,WAAW,qBAAqB;CAC5C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,sDAAsD;CAChF,OAAO;AACT;AAEA,MAAM,uBAAuB,cAAc,KAAK;AAEhD,MAAa,+BAA+B,qBAAqB;AAEjE,SAAgB,kCAA2C;CACzD,OAAO,WAAW,oBAAoB;AACxC;AAMA,MAAM,0BAA0B,cAAc,KAAK;AAEnD,MAAa,kCAAkC,wBAAwB;AAEvE,SAAgB,qCAA8C;CAC5D,OAAO,WAAW,uBAAuB;AAC3C"}

package/dist/default/ui/menu/menu-checkbox-item.js

@@ -1,4 +1,3 @@
-"use client";
 import { renderElement } from "../../utils/use-render.js";
 import { useMenuContext } from "./context.js";
 import { forwardRef, useCallback, useEffect, useRef } from "react";

package/dist/default/ui/menu/menu-checkbox-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-checkbox-item.js","names":[],"sources":["../../../../src/ui/menu/menu-checkbox-item.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuCheckboxItemProps extends UIComponentProps<'div', MenuState> {\n  /** Whether the item is currently checked. */\n  checked: boolean;\n  /** Called when the checked state should change. */\n  onCheckedChange: (checked: boolean) => void;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A checkbox-style menu item. Renders a `<div>` with `role=\"menuitemcheckbox\"`. */\nexport const MenuCheckboxItem = forwardRef<HTMLDivElement, MenuCheckboxItemProps>(function MenuCheckboxItem(\n  { render, className, style, checked, onCheckedChange, disabled, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state } = useMenuContext();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      onClick?.(event);\n      onCheckedChange(!checked);\n    },\n    [disabled, onClick, onCheckedChange, checked]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n    menu.highlight(element, { focus: false, pointer: true });\n  }, [menu, disabled]);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef],\n      props: [\n        {\n          role: 'menuitemcheckbox' as const,\n          'aria-checked': checked,\n          'aria-disabled': disabled ? true : undefined,\n          onClick: handleClick,\n          onPointerEnter: handlePointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuCheckboxItem {\n  export type Props = MenuCheckboxItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAmBA,MAAa,mBAAmB,WAAkD,SAAS,iBACzF,EAAE,QAAQ,WAAW,OAAO,SAAS,iBAAiB,UAAU,SAAS,GAAG,gBAC5E,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,aAAa,OAAuB,IAAI;CAE9C,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EACd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;EACd,UAAU,KAAK;EACf,gBAAgB,CAAC,OAAO;CAC1B,GACA;EAAC;EAAU;EAAS;EAAiB;CAAO,CAC9C;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;EAC1B,KAAK,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CACzD,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,gBAAgB;GAChB,iBAAiB,WAAW,OAAO,KAAA;GACnC,SAAS;GACT,gBAAgB;EAClB,GACA,YACF;CACF,CACF;AACF,CAAC"}
+{"version":3,"file":"menu-checkbox-item.js","names":[],"sources":["../../../../src/ui/menu/menu-checkbox-item.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuCheckboxItemProps extends UIComponentProps<'div', MenuState> {\n  /** Whether the item is currently checked. */\n  checked: boolean;\n  /** Called when the checked state should change. */\n  onCheckedChange: (checked: boolean) => void;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A checkbox-style menu item. Renders a `<div>` with `role=\"menuitemcheckbox\"`. */\nexport const MenuCheckboxItem = forwardRef<HTMLDivElement, MenuCheckboxItemProps>(function MenuCheckboxItem(\n  { render, className, style, checked, onCheckedChange, disabled, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state } = useMenuContext();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      onClick?.(event);\n      onCheckedChange(!checked);\n    },\n    [disabled, onClick, onCheckedChange, checked]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n    menu.highlight(element, { focus: false, pointer: true });\n  }, [menu, disabled]);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef],\n      props: [\n        {\n          role: 'menuitemcheckbox' as const,\n          'aria-checked': checked,\n          'aria-disabled': disabled ? true : undefined,\n          onClick: handleClick,\n          onPointerEnter: handlePointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuCheckboxItem {\n  export type Props = MenuCheckboxItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;AAiBA,MAAa,mBAAmB,WAAkD,SAAS,iBACzF,EAAE,QAAQ,WAAW,OAAO,SAAS,iBAAiB,UAAU,SAAS,GAAG,gBAC5E,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,aAAa,OAAuB,IAAI;CAE9C,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EACd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;EACd,UAAU,KAAK;EACf,gBAAgB,CAAC,OAAO;CAC1B,GACA;EAAC;EAAU;EAAS;EAAiB;CAAO,CAC9C;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;EAC1B,KAAK,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CACzD,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,gBAAgB;GAChB,iBAAiB,WAAW,OAAO,KAAA;GACnC,SAAS;GACT,gBAAgB;EAClB,GACA,YACF;CACF,CACF;AACF,CAAC"}

package/dist/default/ui/menu/menu-content.js

@@ -1,4 +1,3 @@
-"use client";
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useMenuContext } from "./context.js";

package/dist/default/ui/menu/menu-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-content.js","names":[],"sources":["../../../../src/ui/menu/menu-content.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport {\n  getRootPositionOptions,\n  isMenuNavigationKey,\n  MenuPositioningCSSVars,\n  observeMenuSize,\n  syncMenuSizeChain,\n} from '@videojs/core/dom';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopupPosition } from '../popover/use-popup-position';\nimport { useMenuContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './menu-keyboard';\n\nexport interface MenuContentProps extends UIComponentProps<'div', MenuState> {}\n\n/** Container for menu items. Positioned relative to the trigger at root level; renders in-place as a submenu panel when nested. */\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(function MenuContent(\n  { render, className, style, onKeyDown, onBlur, ...elementProps },\n  forwardedRef\n) {\n  const {\n    core,\n    menu,\n    parent,\n    state,\n    preferredSide,\n    setPositionedSide,\n    stateAttrMap,\n    anchorName,\n    contentId,\n    boundary,\n    container,\n  } = useMenuContext();\n  const isSubmenu = state.isSubmenu;\n  const isActive = isSubmenu && state.open;\n  const wasActiveRef = useRef(false);\n\n  useLayoutEffect(() => {\n    if (!isSubmenu) return undefined;\n\n    const wasActive = wasActiveRef.current;\n    wasActiveRef.current = isActive;\n\n    if (isActive && !wasActive) {\n      const frame = requestAnimationFrame(() => menu.highlightFirstItem({ preventScroll: true }));\n      return () => cancelAnimationFrame(frame);\n    }\n\n    return undefined;\n  }, [isActive, isSubmenu, menu]);\n\n  const setSubmenuContentElement = useCallback(\n    (element: HTMLDivElement | null) => {\n      menu.setContentElement(element);\n      if (!element) {\n        requestAnimationFrame(() => {\n          syncMenuSizeChain(parent?.menu.contentElement ?? null);\n          if (!menu.input.current.active) menu.restoreFocus({ preventScroll: true });\n        });\n      }\n    },\n    [menu, parent]\n  );\n\n  const handleSubMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(\n        onKeyDown as React.KeyboardEventHandler<HTMLDivElement> | undefined,\n        event\n      );\n      const isNavigationKey = isMenuNavigationKey(event);\n      menu.contentProps.onKeyDown(event);\n      const isBackNavigationKey = event.key === 'ArrowLeft' || event.key === 'Escape';\n\n      if (isBackNavigationKey && !defaultPreventedByUser) {\n        event.preventDefault();\n        menu.close('escape');\n      }\n\n      if (isNavigationKey) event.stopPropagation();\n    },\n    [onKeyDown, menu]\n  );\n\n  const handleRootMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      (onKeyDown as React.KeyboardEventHandler<HTMLDivElement> | undefined)?.(event);\n      menu.contentProps.onKeyDown(event);\n      if (event.key === 'Escape') return;\n      if (isMenuNavigationKey(event)) event.stopPropagation();\n    },\n    [onKeyDown, menu]\n  );\n\n  const handleRootMenuBlur = useCallback(\n    (event: React.FocusEvent<HTMLDivElement>) => {\n      (onBlur as React.FocusEventHandler<HTMLDivElement> | undefined)?.(event);\n      menu.contentProps.onFocusOut(event);\n    },\n    [onBlur, menu]\n  );\n\n  const handleSubMenuBlur = useCallback(\n    (event: React.FocusEvent<HTMLDivElement>) => {\n      (onBlur as React.FocusEventHandler<HTMLDivElement> | undefined)?.(event);\n      menu.contentProps.onFocusOut(event);\n    },\n    [onBlur, menu]\n  );\n\n  const internalRef = useRef<HTMLDivElement>(null);\n  const contentRef = useCallback(\n    (element: HTMLDivElement | null) => {\n      if (!isSubmenu) menu.setContentElement(element);\n    },\n    [isSubmenu, menu]\n  );\n  const rootComposedRef = useComposedRefs(forwardedRef, contentRef, internalRef);\n  const submenuComposedRef = useComposedRefs(forwardedRef, setSubmenuContentElement);\n  const positionOptions = useMemo(\n    () => getRootPositionOptions(preferredSide, state.align),\n    [preferredSide, state.align]\n  );\n  const positioningStyle = usePopupPosition({\n    open: state.open && !isSubmenu,\n    anchorName,\n    position: positionOptions,\n    triggerSource: menu,\n    popupRef: internalRef,\n    boundary,\n    container,\n    cssVars: MenuPositioningCSSVars,\n    onSideChange: setPositionedSide,\n  });\n\n  useLayoutEffect(() => {\n    if (isSubmenu || !state.open) return;\n\n    const contentElement = internalRef.current;\n    if (!contentElement) return;\n\n    const sync = () => syncMenuSizeChain(contentElement);\n    sync();\n    const frame = requestAnimationFrame(sync);\n    const stopObserving = observeMenuSize(contentElement, sync);\n\n    return () => {\n      cancelAnimationFrame(frame);\n      stopObserving();\n    };\n  }, [isSubmenu, state.open]);\n\n  useLayoutEffect(() => {\n    if (!isSubmenu) return;\n\n    const isEnding = state.status === 'ending';\n    const parentContentElement = parent?.menu.contentElement ?? null;\n    const sync = () => syncMenuSizeChain(parentContentElement);\n    sync();\n    const frame = requestAnimationFrame(sync);\n    const stopObserving =\n      state.open && !isEnding && parentContentElement ? observeMenuSize(parentContentElement, sync) : null;\n\n    return () => {\n      cancelAnimationFrame(frame);\n      stopObserving?.();\n    };\n  }, [isSubmenu, parent, state.open, state.status]);\n\n  if (isSubmenu) {\n    if (!isActive && state.status !== 'ending') return null;\n\n    const subMenuContent = renderElement(\n      'div',\n      { render, className, style },\n      {\n        state,\n        stateAttrMap,\n        ref: submenuComposedRef,\n        props: [\n          {\n            id: contentId,\n            role: 'menu' as const,\n            tabIndex: -1,\n            onKeyDownCapture: preventMenuKeyDefault,\n            onKeyDown: handleSubMenuKeyDown,\n            onBlur: handleSubMenuBlur,\n          },\n          elementProps,\n        ],\n      }\n    );\n\n    const parentContentElement = parent?.menu.contentElement ?? null;\n    return parentContentElement ? createPortal(subMenuContent, parentContentElement) : subMenuContent;\n  }\n\n  if (!state.open && state.status !== 'ending') return null;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: rootComposedRef,\n      props: [\n        {\n          id: contentId,\n          style: positioningStyle,\n          ...core.getContentAttrs(state),\n        },\n        { onKeyDownCapture: preventMenuKeyDefault, onKeyDown: handleRootMenuKeyDown, onBlur: handleRootMenuBlur },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuContent {\n  export type Props = MenuContentProps;\n  export type State = MenuState;\n}\n"],"mappings":"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"}
+{"version":3,"file":"menu-content.js","names":[],"sources":["../../../../src/ui/menu/menu-content.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport {\n  getRootPositionOptions,\n  isMenuNavigationKey,\n  MenuPositioningCSSVars,\n  observeMenuSize,\n  syncMenuSizeChain,\n} from '@videojs/core/dom';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopupPosition } from '../popover/use-popup-position';\nimport { useMenuContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './menu-keyboard';\n\nexport interface MenuContentProps extends UIComponentProps<'div', MenuState> {}\n\n/** Container for menu items. Positioned relative to the trigger at root level; renders in-place as a submenu panel when nested. */\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(function MenuContent(\n  { render, className, style, onKeyDown, onBlur, ...elementProps },\n  forwardedRef\n) {\n  const {\n    core,\n    menu,\n    parent,\n    state,\n    preferredSide,\n    setPositionedSide,\n    stateAttrMap,\n    anchorName,\n    contentId,\n    boundary,\n    container,\n  } = useMenuContext();\n  const isSubmenu = state.isSubmenu;\n  const isActive = isSubmenu && state.open;\n  const wasActiveRef = useRef(false);\n\n  useLayoutEffect(() => {\n    if (!isSubmenu) return undefined;\n\n    const wasActive = wasActiveRef.current;\n    wasActiveRef.current = isActive;\n\n    if (isActive && !wasActive) {\n      const frame = requestAnimationFrame(() => menu.highlightFirstItem({ preventScroll: true }));\n      return () => cancelAnimationFrame(frame);\n    }\n\n    return undefined;\n  }, [isActive, isSubmenu, menu]);\n\n  const setSubmenuContentElement = useCallback(\n    (element: HTMLDivElement | null) => {\n      menu.setContentElement(element);\n      if (!element) {\n        requestAnimationFrame(() => {\n          syncMenuSizeChain(parent?.menu.contentElement ?? null);\n          if (!menu.input.current.active) menu.restoreFocus({ preventScroll: true });\n        });\n      }\n    },\n    [menu, parent]\n  );\n\n  const handleSubMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(\n        onKeyDown as React.KeyboardEventHandler<HTMLDivElement> | undefined,\n        event\n      );\n      const isNavigationKey = isMenuNavigationKey(event);\n      menu.contentProps.onKeyDown(event);\n      const isBackNavigationKey = event.key === 'ArrowLeft' || event.key === 'Escape';\n\n      if (isBackNavigationKey && !defaultPreventedByUser) {\n        event.preventDefault();\n        menu.close('escape');\n      }\n\n      if (isNavigationKey) event.stopPropagation();\n    },\n    [onKeyDown, menu]\n  );\n\n  const handleRootMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      (onKeyDown as React.KeyboardEventHandler<HTMLDivElement> | undefined)?.(event);\n      menu.contentProps.onKeyDown(event);\n      if (event.key === 'Escape') return;\n      if (isMenuNavigationKey(event)) event.stopPropagation();\n    },\n    [onKeyDown, menu]\n  );\n\n  const handleRootMenuBlur = useCallback(\n    (event: React.FocusEvent<HTMLDivElement>) => {\n      (onBlur as React.FocusEventHandler<HTMLDivElement> | undefined)?.(event);\n      menu.contentProps.onFocusOut(event);\n    },\n    [onBlur, menu]\n  );\n\n  const handleSubMenuBlur = useCallback(\n    (event: React.FocusEvent<HTMLDivElement>) => {\n      (onBlur as React.FocusEventHandler<HTMLDivElement> | undefined)?.(event);\n      menu.contentProps.onFocusOut(event);\n    },\n    [onBlur, menu]\n  );\n\n  const internalRef = useRef<HTMLDivElement>(null);\n  const contentRef = useCallback(\n    (element: HTMLDivElement | null) => {\n      if (!isSubmenu) menu.setContentElement(element);\n    },\n    [isSubmenu, menu]\n  );\n  const rootComposedRef = useComposedRefs(forwardedRef, contentRef, internalRef);\n  const submenuComposedRef = useComposedRefs(forwardedRef, setSubmenuContentElement);\n  const positionOptions = useMemo(\n    () => getRootPositionOptions(preferredSide, state.align),\n    [preferredSide, state.align]\n  );\n  const positioningStyle = usePopupPosition({\n    open: state.open && !isSubmenu,\n    anchorName,\n    position: positionOptions,\n    triggerSource: menu,\n    popupRef: internalRef,\n    boundary,\n    container,\n    cssVars: MenuPositioningCSSVars,\n    onSideChange: setPositionedSide,\n  });\n\n  useLayoutEffect(() => {\n    if (isSubmenu || !state.open) return;\n\n    const contentElement = internalRef.current;\n    if (!contentElement) return;\n\n    const sync = () => syncMenuSizeChain(contentElement);\n    sync();\n    const frame = requestAnimationFrame(sync);\n    const stopObserving = observeMenuSize(contentElement, sync);\n\n    return () => {\n      cancelAnimationFrame(frame);\n      stopObserving();\n    };\n  }, [isSubmenu, state.open]);\n\n  useLayoutEffect(() => {\n    if (!isSubmenu) return;\n\n    const isEnding = state.status === 'ending';\n    const parentContentElement = parent?.menu.contentElement ?? null;\n    const sync = () => syncMenuSizeChain(parentContentElement);\n    sync();\n    const frame = requestAnimationFrame(sync);\n    const stopObserving =\n      state.open && !isEnding && parentContentElement ? observeMenuSize(parentContentElement, sync) : null;\n\n    return () => {\n      cancelAnimationFrame(frame);\n      stopObserving?.();\n    };\n  }, [isSubmenu, parent, state.open, state.status]);\n\n  if (isSubmenu) {\n    if (!isActive && state.status !== 'ending') return null;\n\n    const subMenuContent = renderElement(\n      'div',\n      { render, className, style },\n      {\n        state,\n        stateAttrMap,\n        ref: submenuComposedRef,\n        props: [\n          {\n            id: contentId,\n            role: 'menu' as const,\n            tabIndex: -1,\n            onKeyDownCapture: preventMenuKeyDefault,\n            onKeyDown: handleSubMenuKeyDown,\n            onBlur: handleSubMenuBlur,\n          },\n          elementProps,\n        ],\n      }\n    );\n\n    const parentContentElement = parent?.menu.contentElement ?? null;\n    return parentContentElement ? createPortal(subMenuContent, parentContentElement) : subMenuContent;\n  }\n\n  if (!state.open && state.status !== 'ending') return null;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: rootComposedRef,\n      props: [\n        {\n          id: contentId,\n          style: positioningStyle,\n          ...core.getContentAttrs(state),\n        },\n        { onKeyDownCapture: preventMenuKeyDefault, onKeyDown: handleRootMenuKeyDown, onBlur: handleRootMenuBlur },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuContent {\n  export type Props = MenuContentProps;\n  export type State = MenuState;\n}\n"],"mappings":"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"}

package/dist/default/ui/menu/menu-group-label.js

@@ -1,4 +1,3 @@
-"use client";
 import { renderElement } from "../../utils/use-render.js";
 import { useMenuContext, useMenuGroupContext } from "./context.js";
 import { useSafeId } from "../../utils/use-safe-id.js";

package/dist/default/ui/menu/menu-group-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-group-label.js","names":[],"sources":["../../../../src/ui/menu/menu-group-label.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef, useLayoutEffect } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useMenuContext, useMenuGroupContext } from './context';\n\nexport interface MenuGroupLabelProps extends UIComponentProps<'div', MenuState> {}\n\n/** Non-interactive label for a group of items. Renders a `<div>`. */\nexport const MenuGroupLabel = forwardRef<HTMLDivElement, MenuGroupLabelProps>(function MenuGroupLabel(\n  { render, className, style, id: idProp, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n  const group = useMenuGroupContext();\n  const generatedId = useSafeId('menu-group-label');\n  const id = idProp ?? generatedId;\n\n  useLayoutEffect(() => {\n    return group?.registerLabel(id);\n  }, [group, id]);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ id }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuGroupLabel {\n  export type Props = MenuGroupLabelProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAaA,MAAa,iBAAiB,WAAgD,SAAS,eACrF,EAAE,QAAQ,WAAW,OAAO,IAAI,QAAQ,GAAG,gBAC3C,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CACjC,MAAM,QAAQ,oBAAoB;CAClC,MAAM,cAAc,UAAU,kBAAkB;CAChD,MAAM,KAAK,UAAU;CAErB,sBAAsB;EACpB,OAAO,OAAO,cAAc,EAAE;CAChC,GAAG,CAAC,OAAO,EAAE,CAAC;CAEd,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,GAAG,GAAG,YAAY;CAC9B,CACF;AACF,CAAC"}
+{"version":3,"file":"menu-group-label.js","names":[],"sources":["../../../../src/ui/menu/menu-group-label.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { forwardRef, useLayoutEffect } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useMenuContext, useMenuGroupContext } from './context';\n\nexport interface MenuGroupLabelProps extends UIComponentProps<'div', MenuState> {}\n\n/** Non-interactive label for a group of items. Renders a `<div>`. */\nexport const MenuGroupLabel = forwardRef<HTMLDivElement, MenuGroupLabelProps>(function MenuGroupLabel(\n  { render, className, style, id: idProp, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n  const group = useMenuGroupContext();\n  const generatedId = useSafeId('menu-group-label');\n  const id = idProp ?? generatedId;\n\n  useLayoutEffect(() => {\n    return group?.registerLabel(id);\n  }, [group, id]);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ id }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuGroupLabel {\n  export type Props = MenuGroupLabelProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAWA,MAAa,iBAAiB,WAAgD,SAAS,eACrF,EAAE,QAAQ,WAAW,OAAO,IAAI,QAAQ,GAAG,gBAC3C,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CACjC,MAAM,QAAQ,oBAAoB;CAClC,MAAM,cAAc,UAAU,kBAAkB;CAChD,MAAM,KAAK,UAAU;CAErB,sBAAsB;EACpB,OAAO,OAAO,cAAc,EAAE;CAChC,GAAG,CAAC,OAAO,EAAE,CAAC;CAEd,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,GAAG,GAAG,YAAY;CAC9B,CACF;AACF,CAAC"}

package/dist/default/ui/menu/menu-group.js

@@ -1,4 +1,3 @@
-"use client";
 import { renderElement } from "../../utils/use-render.js";
 import { useMenuContext } from "./context.js";
 import { MenuGroupProvider, getMenuGroupProps } from "./use-menu-group.js";

package/dist/default/ui/menu/menu-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-group.js","names":[],"sources":["../../../../src/ui/menu/menu-group.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\nimport { getMenuGroupProps, MenuGroupProvider } from './use-menu-group';\n\nexport interface MenuGroupProps extends UIComponentProps<'div', MenuState> {}\n\n/** Groups related menu items. Renders a `<div>` with `role=\"group\"`. */\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  return (\n    <MenuGroupProvider>\n      {(labelId) =>\n        renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            ref: [forwardedRef],\n            props: [getMenuGroupProps(labelId, elementProps), elementProps],\n          }\n        )\n      }\n    </MenuGroupProvider>\n  );\n});\n\nexport namespace MenuGroup {\n  export type Props = MenuGroupProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CAEjC,OACE,oBAAC,mBAAD,EAAA,WACI,YACA,cACE,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,kBAAkB,SAAS,YAAY,GAAG,YAAY;CAChE,CACF,EAEe,CAAA;AAEvB,CAAC"}
+{"version":3,"file":"menu-group.js","names":[],"sources":["../../../../src/ui/menu/menu-group.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\nimport { getMenuGroupProps, MenuGroupProvider } from './use-menu-group';\n\nexport interface MenuGroupProps extends UIComponentProps<'div', MenuState> {}\n\n/** Groups related menu items. Renders a `<div>` with `role=\"group\"`. */\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  return (\n    <MenuGroupProvider>\n      {(labelId) =>\n        renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            ref: [forwardedRef],\n            props: [getMenuGroupProps(labelId, elementProps), elementProps],\n          }\n        )\n      }\n    </MenuGroupProvider>\n  );\n});\n\nexport namespace MenuGroup {\n  export type Props = MenuGroupProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAWA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CAEjC,OACE,oBAAC,mBAAD,EAAA,WACI,YACA,cACE,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,kBAAkB,SAAS,YAAY,GAAG,YAAY;CAChE,CACF,EAEe,CAAA;AAEvB,CAAC"}

package/dist/default/ui/menu/menu-item-indicator.js

@@ -1,12 +1,12 @@
-"use client";
 import { renderElement } from "../../utils/use-render.js";
-import { useMenuContext } from "./context.js";
+import { useMenuContext, useOptionalMenuRadioItemContext } from "./context.js";
 import { forwardRef } from "react";
 //#region src/ui/menu/menu-item-indicator.tsx
 /** Visual indicator for a checked state. Only renders when `checked` is `true` (or `forceMount` is set). */
 const MenuItemIndicator = forwardRef(function MenuItemIndicator({ render, className, style, checked, forceMount = false, ...elementProps }, forwardedRef) {
 	const { state } = useMenuContext();
-	if (!checked && !forceMount) return null;
+	const itemChecked = useOptionalMenuRadioItemContext();
+	if (!(checked ?? itemChecked) && !forceMount) return null;
 	return renderElement("span", {
 		render,
 		className,

package/dist/default/ui/menu/menu-item-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item-indicator.js","names":[],"sources":["../../../../src/ui/menu/menu-item-indicator.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuItemIndicatorProps extends UIComponentProps<'span', MenuState> {\n  /** Whether the indicator is currently shown. Typically bound to the parent item's checked state. */\n  checked?: boolean;\n  /** When `true`, renders even when unchecked (useful for animating out). Defaults to `false`. */\n  forceMount?: boolean;\n}\n\n/** Visual indicator for a checked state. Only renders when `checked` is `true` (or `forceMount` is set). */\nexport const MenuItemIndicator = forwardRef<HTMLSpanElement, MenuItemIndicatorProps>(function MenuItemIndicator(\n  { render, className, style, checked, forceMount = false, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  if (!checked && !forceMount) return null;\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ 'aria-hidden': true }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuItemIndicator {\n  export type Props = MenuItemIndicatorProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAiBA,MAAa,oBAAoB,WAAoD,SAAS,kBAC5F,EAAE,QAAQ,WAAW,OAAO,SAAS,aAAa,OAAO,GAAG,gBAC5D,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CAEjC,IAAI,CAAC,WAAW,CAAC,YAAY,OAAO;CAEpC,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,eAAe,KAAK,GAAG,YAAY;CAC/C,CACF;AACF,CAAC"}
+{"version":3,"file":"menu-item-indicator.js","names":[],"sources":["../../../../src/ui/menu/menu-item-indicator.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext, useOptionalMenuRadioItemContext } from './context';\n\nexport interface MenuItemIndicatorProps extends UIComponentProps<'span', MenuState> {\n  /** Whether the indicator is currently shown. Typically bound to the parent item's checked state. */\n  checked?: boolean;\n  /** When `true`, renders even when unchecked (useful for animating out). Defaults to `false`. */\n  forceMount?: boolean;\n}\n\n/** Visual indicator for a checked state. Only renders when `checked` is `true` (or `forceMount` is set). */\nexport const MenuItemIndicator = forwardRef<HTMLSpanElement, MenuItemIndicatorProps>(function MenuItemIndicator(\n  { render, className, style, checked, forceMount = false, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n  const itemChecked = useOptionalMenuRadioItemContext();\n  const resolvedChecked = checked ?? itemChecked;\n\n  if (!resolvedChecked && !forceMount) return null;\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ 'aria-hidden': true }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuItemIndicator {\n  export type Props = MenuItemIndicatorProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;AAeA,MAAa,oBAAoB,WAAoD,SAAS,kBAC5F,EAAE,QAAQ,WAAW,OAAO,SAAS,aAAa,OAAO,GAAG,gBAC5D,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CACjC,MAAM,cAAc,gCAAgC;CAGpD,IAAI,EAFoB,WAAW,gBAEX,CAAC,YAAY,OAAO;CAE5C,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,eAAe,KAAK,GAAG,YAAY;CAC/C,CACF;AACF,CAAC"}

package/dist/default/ui/menu/menu-item.js

@@ -1,4 +1,3 @@
-"use client";
 import { renderElement } from "../../utils/use-render.js";
 import { useMenuContext } from "./context.js";
 import { completeMenuItemSelection } from "@videojs/core/dom";

package/dist/default/ui/menu/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","names":[],"sources":["../../../../src/ui/menu/menu-item.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { completeMenuItemSelection } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuItemProps extends UIComponentProps<'div', MenuState> {\n  /** Called when the item is selected. */\n  onSelect?: () => void;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A single action in the menu. Renders a `<div>` with `role=\"menuitem\"`. */\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(\n  { render, className, style, onSelect, disabled, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state } = useMenuContext();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      onClick?.(event);\n      if (event.defaultPrevented) return;\n      onSelect?.();\n      completeMenuItemSelection(menu);\n    },\n    [disabled, onClick, onSelect, menu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n    menu.highlight(element, { focus: false, pointer: true });\n  }, [menu, disabled]);\n\n  return (\n    <MenuItemContent\n      disabled={disabled}\n      elementProps={elementProps}\n      onClick={handleClick}\n      onPointerEnter={handlePointerEnter}\n      render={render}\n      className={className}\n      style={style}\n      state={state}\n      forwardedRef={forwardedRef}\n      elementRef={elementRef}\n    />\n  );\n});\n\ninterface MenuItemContentProps {\n  disabled: boolean | undefined;\n  elementProps: Record<string, unknown>;\n  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onPointerEnter: () => void;\n  render: MenuItemProps['render'];\n  className: MenuItemProps['className'];\n  style: MenuItemProps['style'];\n  state: MenuState;\n  forwardedRef: React.ForwardedRef<HTMLDivElement>;\n  elementRef: React.RefObject<HTMLDivElement | null>;\n}\n\nfunction MenuItemContent({\n  disabled,\n  elementProps,\n  onClick,\n  onPointerEnter,\n  render,\n  className,\n  style,\n  state,\n  forwardedRef,\n  elementRef,\n}: MenuItemContentProps) {\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef],\n      props: [\n        {\n          role: 'menuitem' as const,\n          'aria-disabled': disabled ? true : undefined,\n          onClick,\n          onPointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n}\n\nexport namespace MenuItem {\n  export type Props = MenuItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;;AAkBA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,SAAS,GAAG,gBAC5D,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,aAAa,OAAuB,IAAI;CAE9C,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EACd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAmBT,OACE,oBAAC,iBAAD;EACY;EACI;EACd,SArBgB,aACjB,UAA4C;GAC3C,IAAI,UAAU;GACd,UAAU,KAAK;GACf,IAAI,MAAM,kBAAkB;GAC5B,WAAW;GACX,0BAA0B,IAAI;EAChC,GACA;GAAC;GAAU;GAAS;GAAU;EAAI,CAab;EACnB,gBAXuB,kBAAkB;GAC3C,MAAM,UAAU,WAAW;GAC3B,IAAI,CAAC,WAAW,UAAU;GAC1B,KAAK,UAAU,SAAS;IAAE,OAAO;IAAO,SAAS;GAAK,CAAC;EACzD,GAAG,CAAC,MAAM,QAAQ,CAOmB;EACzB;EACG;EACJ;EACA;EACO;EACF;CACb,CAAA;AAEL,CAAC;AAeD,SAAS,gBAAgB,EACvB,UACA,cACA,SACA,gBACA,QACA,WACA,OACA,OACA,cACA,cACuB;CACvB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,iBAAiB,WAAW,OAAO,KAAA;GACnC;GACA;EACF,GACA,YACF;CACF,CACF;AACF"}
+{"version":3,"file":"menu-item.js","names":[],"sources":["../../../../src/ui/menu/menu-item.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { completeMenuItemSelection } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuItemProps extends UIComponentProps<'div', MenuState> {\n  /** Called when the item is selected. */\n  onSelect?: () => void;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A single action in the menu. Renders a `<div>` with `role=\"menuitem\"`. */\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(\n  { render, className, style, onSelect, disabled, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state } = useMenuContext();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      onClick?.(event);\n      if (event.defaultPrevented) return;\n      onSelect?.();\n      completeMenuItemSelection(menu);\n    },\n    [disabled, onClick, onSelect, menu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n    menu.highlight(element, { focus: false, pointer: true });\n  }, [menu, disabled]);\n\n  return (\n    <MenuItemContent\n      disabled={disabled}\n      elementProps={elementProps}\n      onClick={handleClick}\n      onPointerEnter={handlePointerEnter}\n      render={render}\n      className={className}\n      style={style}\n      state={state}\n      forwardedRef={forwardedRef}\n      elementRef={elementRef}\n    />\n  );\n});\n\ninterface MenuItemContentProps {\n  disabled: boolean | undefined;\n  elementProps: Record<string, unknown>;\n  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onPointerEnter: () => void;\n  render: MenuItemProps['render'];\n  className: MenuItemProps['className'];\n  style: MenuItemProps['style'];\n  state: MenuState;\n  forwardedRef: React.ForwardedRef<HTMLDivElement>;\n  elementRef: React.RefObject<HTMLDivElement | null>;\n}\n\nfunction MenuItemContent({\n  disabled,\n  elementProps,\n  onClick,\n  onPointerEnter,\n  render,\n  className,\n  style,\n  state,\n  forwardedRef,\n  elementRef,\n}: MenuItemContentProps) {\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef],\n      props: [\n        {\n          role: 'menuitem' as const,\n          'aria-disabled': disabled ? true : undefined,\n          onClick,\n          onPointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n}\n\nexport namespace MenuItem {\n  export type Props = MenuItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAgBA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,SAAS,GAAG,gBAC5D,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,aAAa,OAAuB,IAAI;CAE9C,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EACd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAmBT,OACE,oBAAC,iBAAD;EACY;EACI;EACd,SArBgB,aACjB,UAA4C;GAC3C,IAAI,UAAU;GACd,UAAU,KAAK;GACf,IAAI,MAAM,kBAAkB;GAC5B,WAAW;GACX,0BAA0B,IAAI;EAChC,GACA;GAAC;GAAU;GAAS;GAAU;EAAI,CAab;EACnB,gBAXuB,kBAAkB;GAC3C,MAAM,UAAU,WAAW;GAC3B,IAAI,CAAC,WAAW,UAAU;GAC1B,KAAK,UAAU,SAAS;IAAE,OAAO;IAAO,SAAS;GAAK,CAAC;EACzD,GAAG,CAAC,MAAM,QAAQ,CAOmB;EACzB;EACG;EACJ;EACA;EACO;EACF;CACb,CAAA;AAEL,CAAC;AAeD,SAAS,gBAAgB,EACvB,UACA,cACA,SACA,gBACA,QACA,WACA,OACA,OACA,cACA,cACuB;CACvB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,iBAAiB,WAAW,OAAO,KAAA;GACnC;GACA;EACF,GACA,YACF;CACF,CACF;AACF"}

package/dist/default/ui/menu/menu-radio-group.js

@@ -1,4 +1,3 @@
-"use client";
 import { renderElement } from "../../utils/use-render.js";
 import { MenuRadioGroupContextProvider, useMenuContext } from "./context.js";
 import { MenuGroupProvider, getMenuGroupProps } from "./use-menu-group.js";

package/dist/default/ui/menu/menu-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-radio-group.js","names":[],"sources":["../../../../src/ui/menu/menu-radio-group.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { MenuRadioGroupContextProvider, useMenuContext } from './context';\nimport { getMenuGroupProps, MenuGroupProvider } from './use-menu-group';\n\nexport interface MenuRadioGroupProps extends UIComponentProps<'div', MenuState> {\n  /** The currently selected value. */\n  value: string;\n  /** Called when the user selects a radio item. */\n  onValueChange: (value: string) => void;\n}\n\n/** A group of mutually exclusive radio items. Renders a `<div>` with `role=\"group\"`. */\nexport const MenuRadioGroup = forwardRef<HTMLDivElement, MenuRadioGroupProps>(function MenuRadioGroup(\n  { render, className, style, value, onValueChange, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  return (\n    <MenuGroupProvider>\n      {(labelId) => (\n        <MenuRadioGroupContextProvider value={{ value, onValueChange }}>\n          {renderElement(\n            'div',\n            { render, className, style },\n            {\n              state,\n              ref: [forwardedRef],\n              props: [getMenuGroupProps(labelId, elementProps), elementProps],\n            }\n          )}\n        </MenuRadioGroupContextProvider>\n      )}\n    </MenuGroupProvider>\n  );\n});\n\nexport namespace MenuRadioGroup {\n  export type Props = MenuRadioGroupProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;;AAkBA,MAAa,iBAAiB,WAAgD,SAAS,eACrF,EAAE,QAAQ,WAAW,OAAO,OAAO,eAAe,GAAG,gBACrD,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CAEjC,OACE,oBAAC,mBAAD,EAAA,WACI,YACA,oBAAC,+BAAD;EAA+B,OAAO;GAAE;GAAO;EAAc;EAC1D,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,KAAK,CAAC,YAAY;GAClB,OAAO,CAAC,kBAAkB,SAAS,YAAY,GAAG,YAAY;EAChE,CACF;CAC6B,CAAA,EAEhB,CAAA;AAEvB,CAAC"}
+{"version":3,"file":"menu-radio-group.js","names":[],"sources":["../../../../src/ui/menu/menu-radio-group.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { MenuRadioGroupContextProvider, useMenuContext } from './context';\nimport { getMenuGroupProps, MenuGroupProvider } from './use-menu-group';\n\nexport interface MenuRadioGroupProps extends UIComponentProps<'div', MenuState> {\n  /** The currently selected value. */\n  value: string;\n  /** Called when the user selects a radio item. */\n  onValueChange: (value: string) => void;\n}\n\n/** A group of mutually exclusive radio items. Renders a `<div>` with `role=\"group\"`. */\nexport const MenuRadioGroup = forwardRef<HTMLDivElement, MenuRadioGroupProps>(function MenuRadioGroup(\n  { render, className, style, value, onValueChange, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  return (\n    <MenuGroupProvider>\n      {(labelId) => (\n        <MenuRadioGroupContextProvider value={{ value, onValueChange }}>\n          {renderElement(\n            'div',\n            { render, className, style },\n            {\n              state,\n              ref: [forwardedRef],\n              props: [getMenuGroupProps(labelId, elementProps), elementProps],\n            }\n          )}\n        </MenuRadioGroupContextProvider>\n      )}\n    </MenuGroupProvider>\n  );\n});\n\nexport namespace MenuRadioGroup {\n  export type Props = MenuRadioGroupProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAgBA,MAAa,iBAAiB,WAAgD,SAAS,eACrF,EAAE,QAAQ,WAAW,OAAO,OAAO,eAAe,GAAG,gBACrD,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CAEjC,OACE,oBAAC,mBAAD,EAAA,WACI,YACA,oBAAC,+BAAD;EAA+B,OAAO;GAAE;GAAO;EAAc;EAC1D,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,KAAK,CAAC,YAAY;GAClB,OAAO,CAAC,kBAAkB,SAAS,YAAY,GAAG,YAAY;EAChE,CACF;CAC6B,CAAA,EAEhB,CAAA;AAEvB,CAAC"}

package/dist/default/ui/menu/menu-radio-item.js

@@ -1,8 +1,8 @@
-"use client";
 import { renderElement } from "../../utils/use-render.js";
-import { useMenuContext, useMenuRadioGroupContext } from "./context.js";
+import { MenuRadioItemContextProvider, useMenuContext, useMenuRadioGroupContext } from "./context.js";
 import { completeMenuItemSelection } from "@videojs/core/dom";
 import { forwardRef, useCallback, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/ui/menu/menu-radio-item.tsx
 /** A radio-style menu item. Renders a `<div>` with `role="menuitemradio"`. */
 const MenuRadioItem = forwardRef(function MenuRadioItem({ render, className, style, value, disabled, onClick, ...elementProps }, forwardedRef) {
@@ -36,20 +36,23 @@ const MenuRadioItem = forwardRef(function MenuRadioItem({ render, className, sty
 			pointer: true
 		});
 	}, [menu, disabled]);
-	return renderElement("div", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		ref: [forwardedRef, elementRef],
-		props: [{
-			role: "menuitemradio",
-			"aria-checked": checked,
-			"aria-disabled": disabled ? true : void 0,
-			onClick: handleClick,
-			onPointerEnter: handlePointerEnter
-		}, elementProps]
+	return /* @__PURE__ */ jsx(MenuRadioItemContextProvider, {
+		value: checked,
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			ref: [forwardedRef, elementRef],
+			props: [{
+				role: "menuitemradio",
+				"aria-checked": checked,
+				"aria-disabled": disabled ? true : void 0,
+				onClick: handleClick,
+				onPointerEnter: handlePointerEnter
+			}, elementProps]
+		})
 	});
 });
 //#endregion

package/dist/default/ui/menu/menu-radio-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-radio-item.js","names":[],"sources":["../../../../src/ui/menu/menu-radio-item.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { completeMenuItemSelection } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext, useMenuRadioGroupContext } from './context';\n\nexport interface MenuRadioItemProps extends UIComponentProps<'div', MenuState> {\n  /** The value this item represents. */\n  value: string;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A radio-style menu item. Renders a `<div>` with `role=\"menuitemradio\"`. */\nexport const MenuRadioItem = forwardRef<HTMLDivElement, MenuRadioItemProps>(function MenuRadioItem(\n  { render, className, style, value, disabled, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state } = useMenuContext();\n  const { value: groupValue, onValueChange } = useMenuRadioGroupContext();\n  const elementRef = useRef<HTMLDivElement>(null);\n  const checked = groupValue === value;\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      onClick?.(event);\n      if (event.defaultPrevented) return;\n      onValueChange(value);\n      completeMenuItemSelection(menu);\n    },\n    [disabled, onClick, onValueChange, value, menu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n    menu.highlight(element, { focus: false, pointer: true });\n  }, [menu, disabled]);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef],\n      props: [\n        {\n          role: 'menuitemradio' as const,\n          'aria-checked': checked,\n          'aria-disabled': disabled ? true : undefined,\n          onClick: handleClick,\n          onPointerEnter: handlePointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuRadioItem {\n  export type Props = MenuRadioItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAkBA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,SAAS,GAAG,gBACzD,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,EAAE,OAAO,YAAY,kBAAkB,yBAAyB;CACtE,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,UAAU,eAAe;CAE/B,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EACd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;EACd,UAAU,KAAK;EACf,IAAI,MAAM,kBAAkB;EAC5B,cAAc,KAAK;EACnB,0BAA0B,IAAI;CAChC,GACA;EAAC;EAAU;EAAS;EAAe;EAAO;CAAI,CAChD;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;EAC1B,KAAK,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CACzD,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,gBAAgB;GAChB,iBAAiB,WAAW,OAAO,KAAA;GACnC,SAAS;GACT,gBAAgB;EAClB,GACA,YACF;CACF,CACF;AACF,CAAC"}
+{"version":3,"file":"menu-radio-item.js","names":[],"sources":["../../../../src/ui/menu/menu-radio-item.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { completeMenuItemSelection } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { MenuRadioItemContextProvider, useMenuContext, useMenuRadioGroupContext } from './context';\n\nexport interface MenuRadioItemProps extends UIComponentProps<'div', MenuState> {\n  /** The value this item represents. */\n  value: string;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A radio-style menu item. Renders a `<div>` with `role=\"menuitemradio\"`. */\nexport const MenuRadioItem = forwardRef<HTMLDivElement, MenuRadioItemProps>(function MenuRadioItem(\n  { render, className, style, value, disabled, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state } = useMenuContext();\n  const { value: groupValue, onValueChange } = useMenuRadioGroupContext();\n  const elementRef = useRef<HTMLDivElement>(null);\n  const checked = groupValue === value;\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      onClick?.(event);\n      if (event.defaultPrevented) return;\n      onValueChange(value);\n      completeMenuItemSelection(menu);\n    },\n    [disabled, onClick, onValueChange, value, menu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n    menu.highlight(element, { focus: false, pointer: true });\n  }, [menu, disabled]);\n\n  return (\n    <MenuRadioItemContextProvider value={checked}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          ref: [forwardedRef, elementRef],\n          props: [\n            {\n              role: 'menuitemradio' as const,\n              'aria-checked': checked,\n              'aria-disabled': disabled ? true : undefined,\n              onClick: handleClick,\n              onPointerEnter: handlePointerEnter,\n            },\n            elementProps,\n          ],\n        }\n      )}\n    </MenuRadioItemContextProvider>\n  );\n});\n\nexport namespace MenuRadioItem {\n  export type Props = MenuRadioItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAgBA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,SAAS,GAAG,gBACzD,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,EAAE,OAAO,YAAY,kBAAkB,yBAAyB;CACtE,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,UAAU,eAAe;CAE/B,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EACd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;EACd,UAAU,KAAK;EACf,IAAI,MAAM,kBAAkB;EAC5B,cAAc,KAAK;EACnB,0BAA0B,IAAI;CAChC,GACA;EAAC;EAAU;EAAS;EAAe;EAAO;CAAI,CAChD;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;EAC1B,KAAK,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CACzD,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OACE,oBAAC,8BAAD;EAA8B,OAAO;EAClC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CACL;IACE,MAAM;IACN,gBAAgB;IAChB,iBAAiB,WAAW,OAAO,KAAA;IACnC,SAAS;IACT,gBAAgB;GAClB,GACA,YACF;EACF,CACF;CAC4B,CAAA;AAElC,CAAC"}

package/dist/default/ui/menu/menu-root.js

@@ -1,4 +1,3 @@
-"use client";
 import { useOptionalContainer, useOptionalPlayer } from "../../player/context.js";
 import { useOptionalPopupGroup } from "../../player/popup-group-context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
@@ -21,10 +20,7 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 	const popupGroup = useOptionalPopupGroup();
 	const isSubmenu = parentMenu !== null;
 	const { side, align, closeOnEscape, closeOnOutsideClick } = coreProps;
-	const [core] = useState(() => new MenuCore({
-		...coreProps,
-		isSubmenu
-	}));
+	const [core] = useState(() => new MenuCore(coreProps));
 	const isControlled = controlledOpen !== void 0;
 	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
 	const resolvedOpen = controlledOpen ?? uncontrolledOpen;
@@ -78,10 +74,12 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 			side,
 			align,
 			closeOnEscape,
-			closeOnOutsideClick,
+			closeOnOutsideClick
+		});
+		core.setInput({
+			...input,
 			isSubmenu
 		});
-		core.setInput(input);
 		return core.getState();
 	}, [
 		core,

package/dist/default/ui/menu/menu-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-root.js","names":[],"sources":["../../../../src/ui/menu/menu-root.tsx"],"sourcesContent":["'use client';\n\nimport { MenuCore, MenuDataAttrs } from '@videojs/core';\nimport {\n  createMenu,\n  createTransition,\n  type MenuChangeDetails,\n  type PositioningBoundary,\n  selectControls,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { useOptionalContainer, useOptionalPlayer } from '../../player/context';\nimport { useOptionalPopupGroup } from '../../player/popup-group-context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { usePositionedState } from '../hooks/use-positioned-state';\nimport { MenuContextProvider, useOptionalMenuContext } from './context';\n\nexport interface MenuRootProps extends MenuCore.Props {\n  /** Boundary used to constrain the root menu popup size. */\n  boundary?: PositioningBoundary;\n  /** Called when the menu open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean, details: MenuChangeDetails) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function MenuRoot({\n  open: controlledOpen,\n  defaultOpen = MenuCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  boundary = 'container',\n  children,\n  ...coreProps\n}: MenuRootProps): ReactNode {\n  // Detect if we are nested inside a parent Menu.Content — if so, operate as\n  // a submenu: no popover positioning, Trigger acts as a parent item.\n  const parentMenu = useOptionalMenuContext();\n  const controls = useOptionalControlsContext();\n  const controlsState = useOptionalPlayer(selectControls);\n  const container = useOptionalContainer();\n  const popupGroup = useOptionalPopupGroup();\n  const isSubmenu = parentMenu !== null;\n  const { side, align, closeOnEscape, closeOnOutsideClick } = coreProps;\n\n  const [core] = useState(() => new MenuCore({ ...coreProps, isSubmenu }));\n\n  const isControlled = controlledOpen !== undefined;\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const resolvedOpen = controlledOpen ?? uncontrolledOpen;\n\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const closeOnEscapeRef = useLatestRef(closeOnEscape);\n  const closeOnOutsideClickRef = useLatestRef(closeOnOutsideClick);\n  const popupGroupRef = useLatestRef(popupGroup);\n  const isSubmenuRef = useLatestRef(isSubmenu);\n\n  const [menu] = useState(() => {\n    const instance = createMenu({\n      transition: createTransition(),\n      onOpenChange(nextOpen, details) {\n        if (!isControlled) setUncontrolledOpen(nextOpen);\n        onOpenChangeRef.current?.(nextOpen, details);\n      },\n      onOpenChangeComplete(nextOpen) {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n      closeOnEscape: () => closeOnEscapeRef.current ?? MenuCore.defaultProps.closeOnEscape,\n      closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? MenuCore.defaultProps.closeOnOutsideClick,\n      group: () => (isSubmenuRef.current ? undefined : popupGroupRef.current),\n    });\n\n    return instance;\n  });\n\n  const anchorName = useSafeId();\n  const contentId = useSafeId('menu');\n\n  useLayoutEffect(() => parentMenu?.menu.registerSubmenu(menu), [menu, parentMenu?.menu]);\n\n  // Commit only the open state resolved by controlled/uncontrolled ownership.\n  useLayoutEffect(() => {\n    menu.syncOpen(resolvedOpen);\n  }, [menu, resolvedOpen]);\n\n  useEffect(() => {\n    if (isSubmenu || controls?.state.visible !== false) return;\n\n    menu.close('imperative-action');\n  }, [controls?.state.visible, isSubmenu, menu]);\n\n  useDestroy(menu);\n\n  const input = useSnapshot(menu.input);\n\n  useEffect(() => {\n    if (!input.active || isSubmenu) return;\n\n    return controlsState?.requestControlsLock();\n  }, [controlsState?.requestControlsLock, input.active, isSubmenu]);\n\n  const preferredState = useMemo(() => {\n    core.setProps({ side, align, closeOnEscape, closeOnOutsideClick, isSubmenu });\n    core.setInput(input);\n    return core.getState();\n  }, [core, input, side, align, closeOnEscape, closeOnOutsideClick, isSubmenu]);\n  const { state, preferredSide, setPositionedSide } = usePositionedState(preferredState);\n\n  const contextValue = useMemo(\n    () => ({\n      core,\n      menu,\n      parent: parentMenu,\n      state,\n      preferredSide,\n      setPositionedSide,\n      stateAttrMap: MenuDataAttrs,\n      contentId,\n      anchorName,\n      boundary,\n      container,\n    }),\n    [core, menu, parentMenu, state, preferredSide, setPositionedSide, contentId, anchorName, boundary, container]\n  );\n\n  return <MenuContextProvider value={contextValue}>{children}</MenuContextProvider>;\n}\n\nexport namespace MenuRoot {\n  export type Props = MenuRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAgCA,SAAgB,SAAS,EACvB,MAAM,gBACN,cAAc,SAAS,aAAa,aACpC,cAAc,kBACd,sBAAsB,0BACtB,WAAW,aACX,UACA,GAAG,aACwB;CAG3B,MAAM,aAAa,uBAAuB;CAC1C,MAAM,WAAW,2BAA2B;CAC5C,MAAM,gBAAgB,kBAAkB,cAAc;CACtD,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,YAAY,eAAe;CACjC,MAAM,EAAE,MAAM,OAAO,eAAe,wBAAwB;CAE5D,MAAM,CAAC,QAAQ,eAAe,IAAI,SAAS;EAAE,GAAG;EAAW;CAAU,CAAC,CAAC;CAEvE,MAAM,eAAe,mBAAmB,KAAA;CACxC,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,WAAW;CACpE,MAAM,eAAe,kBAAkB;CAEvC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CACrE,MAAM,mBAAmB,aAAa,aAAa;CACnD,MAAM,yBAAyB,aAAa,mBAAmB;CAC/D,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,eAAe,aAAa,SAAS;CAE3C,MAAM,CAAC,QAAQ,eAAe;EAe5B,OAdiB,WAAW;GAC1B,YAAY,iBAAiB;GAC7B,aAAa,UAAU,SAAS;IAC9B,IAAI,CAAC,cAAc,oBAAoB,QAAQ;IAC/C,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,qBAAqB,UAAU;IAC7B,wBAAwB,UAAU,QAAQ;GAC5C;GACA,qBAAqB,iBAAiB,WAAW,SAAS,aAAa;GACvE,2BAA2B,uBAAuB,WAAW,SAAS,aAAa;GACnF,aAAc,aAAa,UAAU,KAAA,IAAY,cAAc;EACjE,CAEc;CAChB,CAAC;CAED,MAAM,aAAa,UAAU;CAC7B,MAAM,YAAY,UAAU,MAAM;CAElC,sBAAsB,YAAY,KAAK,gBAAgB,IAAI,GAAG,CAAC,MAAM,YAAY,IAAI,CAAC;CAGtF,sBAAsB;EACpB,KAAK,SAAS,YAAY;CAC5B,GAAG,CAAC,MAAM,YAAY,CAAC;CAEvB,gBAAgB;EACd,IAAI,aAAa,UAAU,MAAM,YAAY,OAAO;EAEpD,KAAK,MAAM,mBAAmB;CAChC,GAAG;EAAC,UAAU,MAAM;EAAS;EAAW;CAAI,CAAC;CAE7C,WAAW,IAAI;CAEf,MAAM,QAAQ,YAAY,KAAK,KAAK;CAEpC,gBAAgB;EACd,IAAI,CAAC,MAAM,UAAU,WAAW;EAEhC,OAAO,eAAe,oBAAoB;CAC5C,GAAG;EAAC,eAAe;EAAqB,MAAM;EAAQ;CAAS,CAAC;CAOhE,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAL7B,cAAc;EACnC,KAAK,SAAS;GAAE;GAAM;GAAO;GAAe;GAAqB;EAAU,CAAC;EAC5E,KAAK,SAAS,KAAK;EACnB,OAAO,KAAK,SAAS;CACvB,GAAG;EAAC;EAAM;EAAO;EAAM;EAAO;EAAe;EAAqB;CAAS,CACS,CAAC;CAmBrF,OAAO,oBAAC,qBAAD;EAAqB,OAjBP,eACZ;GACL;GACA;GACA,QAAQ;GACR;GACA;GACA;GACA,cAAc;GACd;GACA;GACA;GACA;EACF,IACA;GAAC;GAAM;GAAM;GAAY;GAAO;GAAe;GAAmB;GAAW;GAAY;GAAU;EAAS,CAGhE;EAAI;CAA8B,CAAA;AAClF"}
+{"version":3,"file":"menu-root.js","names":[],"sources":["../../../../src/ui/menu/menu-root.tsx"],"sourcesContent":["import { MenuCore, MenuDataAttrs } from '@videojs/core';\nimport {\n  createMenu,\n  createTransition,\n  type MenuChangeDetails,\n  type PositioningBoundary,\n  selectControls,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { useOptionalContainer, useOptionalPlayer } from '../../player/context';\nimport { useOptionalPopupGroup } from '../../player/popup-group-context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { usePositionedState } from '../hooks/use-positioned-state';\nimport { MenuContextProvider, useOptionalMenuContext } from './context';\n\nexport interface MenuRootProps extends MenuCore.Props {\n  /** Boundary used to constrain the root menu popup size. */\n  boundary?: PositioningBoundary;\n  /** Called when the menu open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean, details: MenuChangeDetails) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function MenuRoot({\n  open: controlledOpen,\n  defaultOpen = MenuCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  boundary = 'container',\n  children,\n  ...coreProps\n}: MenuRootProps): ReactNode {\n  // Detect if we are nested inside a parent Menu.Content — if so, operate as\n  // a submenu: no popover positioning, Trigger acts as a parent item.\n  const parentMenu = useOptionalMenuContext();\n  const controls = useOptionalControlsContext();\n  const controlsState = useOptionalPlayer(selectControls);\n  const container = useOptionalContainer();\n  const popupGroup = useOptionalPopupGroup();\n  const isSubmenu = parentMenu !== null;\n  const { side, align, closeOnEscape, closeOnOutsideClick } = coreProps;\n\n  const [core] = useState(() => new MenuCore(coreProps));\n\n  const isControlled = controlledOpen !== undefined;\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const resolvedOpen = controlledOpen ?? uncontrolledOpen;\n\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const closeOnEscapeRef = useLatestRef(closeOnEscape);\n  const closeOnOutsideClickRef = useLatestRef(closeOnOutsideClick);\n  const popupGroupRef = useLatestRef(popupGroup);\n  const isSubmenuRef = useLatestRef(isSubmenu);\n\n  const [menu] = useState(() => {\n    const instance = createMenu({\n      transition: createTransition(),\n      onOpenChange(nextOpen, details) {\n        if (!isControlled) setUncontrolledOpen(nextOpen);\n        onOpenChangeRef.current?.(nextOpen, details);\n      },\n      onOpenChangeComplete(nextOpen) {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n      closeOnEscape: () => closeOnEscapeRef.current ?? MenuCore.defaultProps.closeOnEscape,\n      closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? MenuCore.defaultProps.closeOnOutsideClick,\n      group: () => (isSubmenuRef.current ? undefined : popupGroupRef.current),\n    });\n\n    return instance;\n  });\n\n  const anchorName = useSafeId();\n  const contentId = useSafeId('menu');\n\n  useLayoutEffect(() => parentMenu?.menu.registerSubmenu(menu), [menu, parentMenu?.menu]);\n\n  // Commit only the open state resolved by controlled/uncontrolled ownership.\n  useLayoutEffect(() => {\n    menu.syncOpen(resolvedOpen);\n  }, [menu, resolvedOpen]);\n\n  useEffect(() => {\n    if (isSubmenu || controls?.state.visible !== false) return;\n\n    menu.close('imperative-action');\n  }, [controls?.state.visible, isSubmenu, menu]);\n\n  useDestroy(menu);\n\n  const input = useSnapshot(menu.input);\n\n  useEffect(() => {\n    if (!input.active || isSubmenu) return;\n\n    return controlsState?.requestControlsLock();\n  }, [controlsState?.requestControlsLock, input.active, isSubmenu]);\n\n  const preferredState = useMemo(() => {\n    core.setProps({ side, align, closeOnEscape, closeOnOutsideClick });\n    core.setInput({ ...input, isSubmenu });\n    return core.getState();\n  }, [core, input, side, align, closeOnEscape, closeOnOutsideClick, isSubmenu]);\n  const { state, preferredSide, setPositionedSide } = usePositionedState(preferredState);\n\n  const contextValue = useMemo(\n    () => ({\n      core,\n      menu,\n      parent: parentMenu,\n      state,\n      preferredSide,\n      setPositionedSide,\n      stateAttrMap: MenuDataAttrs,\n      contentId,\n      anchorName,\n      boundary,\n      container,\n    }),\n    [core, menu, parentMenu, state, preferredSide, setPositionedSide, contentId, anchorName, boundary, container]\n  );\n\n  return <MenuContextProvider value={contextValue}>{children}</MenuContextProvider>;\n}\n\nexport namespace MenuRoot {\n  export type Props = MenuRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;AA8BA,SAAgB,SAAS,EACvB,MAAM,gBACN,cAAc,SAAS,aAAa,aACpC,cAAc,kBACd,sBAAsB,0BACtB,WAAW,aACX,UACA,GAAG,aACwB;CAG3B,MAAM,aAAa,uBAAuB;CAC1C,MAAM,WAAW,2BAA2B;CAC5C,MAAM,gBAAgB,kBAAkB,cAAc;CACtD,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,YAAY,eAAe;CACjC,MAAM,EAAE,MAAM,OAAO,eAAe,wBAAwB;CAE5D,MAAM,CAAC,QAAQ,eAAe,IAAI,SAAS,SAAS,CAAC;CAErD,MAAM,eAAe,mBAAmB,KAAA;CACxC,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,WAAW;CACpE,MAAM,eAAe,kBAAkB;CAEvC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CACrE,MAAM,mBAAmB,aAAa,aAAa;CACnD,MAAM,yBAAyB,aAAa,mBAAmB;CAC/D,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,eAAe,aAAa,SAAS;CAE3C,MAAM,CAAC,QAAQ,eAAe;EAe5B,OAdiB,WAAW;GAC1B,YAAY,iBAAiB;GAC7B,aAAa,UAAU,SAAS;IAC9B,IAAI,CAAC,cAAc,oBAAoB,QAAQ;IAC/C,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,qBAAqB,UAAU;IAC7B,wBAAwB,UAAU,QAAQ;GAC5C;GACA,qBAAqB,iBAAiB,WAAW,SAAS,aAAa;GACvE,2BAA2B,uBAAuB,WAAW,SAAS,aAAa;GACnF,aAAc,aAAa,UAAU,KAAA,IAAY,cAAc;EACjE,CAEc;CAChB,CAAC;CAED,MAAM,aAAa,UAAU;CAC7B,MAAM,YAAY,UAAU,MAAM;CAElC,sBAAsB,YAAY,KAAK,gBAAgB,IAAI,GAAG,CAAC,MAAM,YAAY,IAAI,CAAC;CAGtF,sBAAsB;EACpB,KAAK,SAAS,YAAY;CAC5B,GAAG,CAAC,MAAM,YAAY,CAAC;CAEvB,gBAAgB;EACd,IAAI,aAAa,UAAU,MAAM,YAAY,OAAO;EAEpD,KAAK,MAAM,mBAAmB;CAChC,GAAG;EAAC,UAAU,MAAM;EAAS;EAAW;CAAI,CAAC;CAE7C,WAAW,IAAI;CAEf,MAAM,QAAQ,YAAY,KAAK,KAAK;CAEpC,gBAAgB;EACd,IAAI,CAAC,MAAM,UAAU,WAAW;EAEhC,OAAO,eAAe,oBAAoB;CAC5C,GAAG;EAAC,eAAe;EAAqB,MAAM;EAAQ;CAAS,CAAC;CAOhE,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAL7B,cAAc;EACnC,KAAK,SAAS;GAAE;GAAM;GAAO;GAAe;EAAoB,CAAC;EACjE,KAAK,SAAS;GAAE,GAAG;GAAO;EAAU,CAAC;EACrC,OAAO,KAAK,SAAS;CACvB,GAAG;EAAC;EAAM;EAAO;EAAM;EAAO;EAAe;EAAqB;CAAS,CACS,CAAC;CAmBrF,OAAO,oBAAC,qBAAD;EAAqB,OAjBP,eACZ;GACL;GACA;GACA,QAAQ;GACR;GACA;GACA;GACA,cAAc;GACd;GACA;GACA;GACA;EACF,IACA;GAAC;GAAM;GAAM;GAAY;GAAO;GAAe;GAAmB;GAAW;GAAY;GAAU;EAAS,CAGhE;EAAI;CAA8B,CAAA;AAClF"}

package/dist/default/ui/menu/menu-separator.js

@@ -1,4 +1,3 @@
-"use client";
 import { renderElement } from "../../utils/use-render.js";
 import { useMenuContext } from "./context.js";
 import { forwardRef } from "react";

package/dist/default/ui/menu/menu-separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-separator.js","names":[],"sources":["../../../../src/ui/menu/menu-separator.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuSeparatorProps extends UIComponentProps<'div', MenuState> {}\n\n/** Visual divider between groups of items. Renders a `<div>` with `role=\"separator\"`. */\nexport const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(function MenuSeparator(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ role: 'separator' as const }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuSeparator {\n  export type Props = MenuSeparatorProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAYA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CAEjC,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,MAAM,YAAqB,GAAG,YAAY;CACtD,CACF;AACF,CAAC"}
+{"version":3,"file":"menu-separator.js","names":[],"sources":["../../../../src/ui/menu/menu-separator.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuSeparatorProps extends UIComponentProps<'div', MenuState> {}\n\n/** Visual divider between groups of items. Renders a `<div>` with `role=\"separator\"`. */\nexport const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(function MenuSeparator(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ role: 'separator' as const }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuSeparator {\n  export type Props = MenuSeparatorProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;AAUA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CAEjC,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,MAAM,YAAqB,GAAG,YAAY;CACtD,CACF;AACF,CAAC"}

package/dist/default/ui/menu/menu-trigger.js

@@ -1,10 +1,10 @@
-"use client";
 import { renderElement } from "../../utils/use-render.js";
 import { MenuTriggerChildContextProvider, useMenuContext } from "./context.js";
 import { useSafeId } from "../../utils/use-safe-id.js";
 import { callKeyDownHandler, preventMenuKeyDefault } from "./menu-keyboard.js";
 import { isMenuNavigationKey } from "@videojs/core/dom";
 import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
+import { isInteractiveActivation } from "@videojs/utils/dom";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/menu/menu-trigger.tsx
 /**
@@ -65,17 +65,31 @@ const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style,
 	const triggerRef = useCallback((element) => {
 		menu.setTriggerElement(element);
 	}, [menu]);
-	const rootTriggerProps = useMemo(() => {
-		if (!disabled) return menu.triggerProps;
-		return {
-			onClick: (event) => {
-				event.preventDefault();
-			},
-			onKeyDown: (event) => {
-				if (event.key === "Enter" || event.key === " " || isMenuNavigationKey(event)) event.preventDefault();
-			}
-		};
-	}, [disabled, menu.triggerProps]);
+	const handleRootKeyDown = useCallback((event) => {
+		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
+		if (disabled || defaultPreventedByUser) {
+			if (disabled && isMenuNavigationKey(event)) event.preventDefault();
+			return;
+		}
+		if (isInteractiveActivation(event.nativeEvent)) {
+			event.preventDefault();
+			menu.triggerProps.onClick(event.nativeEvent);
+			return;
+		}
+		menu.triggerProps.onKeyDown(event);
+	}, [
+		disabled,
+		menu.triggerProps,
+		onKeyDown
+	]);
+	const rootTriggerProps = useMemo(() => ({
+		onClick: disabled ? (event) => event.preventDefault() : menu.triggerProps.onClick,
+		onKeyDown: handleRootKeyDown
+	}), [
+		disabled,
+		handleRootKeyDown,
+		menu.triggerProps
+	]);
 	if (isSubMenuTrigger) return /* @__PURE__ */ jsx(MenuTriggerSubmenu, {
 		render,
 		className,