@videojs/react 10.0.0-rc.1 → 10.0.0-rc.2

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

@@ -1 +0,0 @@
-{"version":3,"file":"dialog-root.js","names":[],"sources":["../../../../src/ui/dialog/dialog-root.tsx"],"sourcesContent":["import { DialogCore, type DialogProps } from '@videojs/core';\nimport type { ReactNode } from 'react';\n\nimport { DialogContextProvider } from './context';\nimport { useDialogRoot } from './use-dialog-root';\n\nexport interface DialogRootProps extends DialogProps {\n  /** Called when the open state changes, before animations complete. */\n  onOpenChange?: (open: boolean) => void;\n  /** Called after open or close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n/** Manages dialog state and provides it to the compound parts. */\nexport function DialogRoot(props: DialogRootProps): ReactNode {\n  const context = useDialogRoot({ ...props, coreFactory: createDialogCore });\n\n  return <DialogContextProvider value={context}>{props.children}</DialogContextProvider>;\n}\n\nfunction createDialogCore(): DialogCore {\n  return new DialogCore();\n}\n\nexport namespace DialogRoot {\n  export type Props = DialogRootProps;\n}\n"],"mappings":";;;;;;AAeA,SAAgB,WAAW,OAAmC;CAC5D,MAAM,UAAU,cAAc;EAAE,GAAG;EAAO,aAAa;CAAiB,CAAC;CAEzE,OAAO,oBAAC,uBAAD;EAAuB,OAAO;EAAU,UAAA,MAAM;CAAgC,CAAA;AACvF;AAEA,SAAS,mBAA+B;CACtC,OAAO,IAAI,WAAW;AACxB"}

package/dist/default/ui/dialog/dialog-title.js

@@ -1,14 +0,0 @@
-import { useDialogContext } from "./context.js";
-import { createContextPart } from "../create-context-part.js";
-//#region src/ui/dialog/dialog-title.tsx
-/** Renders the heading that labels the dialog. */
-const DialogTitle = createContextPart({
-	displayName: "DialogTitle",
-	tag: "h2",
-	useContext: useDialogContext,
-	getProps: (state) => ({ id: state.titleId })
-});
-//#endregion
-export { DialogTitle };
-
-//# sourceMappingURL=dialog-title.js.map

package/dist/default/ui/dialog/dialog-title.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dialog-title.js","names":[],"sources":["../../../../src/ui/dialog/dialog-title.tsx"],"sourcesContent":["import type { DialogCore } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useDialogContext } from './context';\n\nexport interface DialogTitleProps extends UIComponentProps<'h2', DialogCore.State> {}\n\n/** Renders the heading that labels the dialog. */\nexport const DialogTitle = createContextPart<DialogTitleProps, DialogCore.State>({\n  displayName: 'DialogTitle',\n  tag: 'h2',\n  useContext: useDialogContext,\n  getProps: (state) => ({ id: state.titleId }),\n});\n\nexport namespace DialogTitle {\n  export type Props = DialogTitleProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;AASA,MAAa,cAAc,kBAAsD;CAC/E,aAAa;CACb,KAAK;CACL,YAAY;CACZ,WAAW,WAAW,EAAE,IAAI,MAAM,QAAQ;AAC5C,CAAC"}

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

@@ -1,30 +0,0 @@
-import { renderElement } from "../../utils/use-render.js";
-import { useDialogContext } from "./context.js";
-import { forwardRef, useCallback } from "react";
-//#region src/ui/dialog/dialog-trigger.tsx
-/** Renders a button that opens the dialog. */
-const DialogTrigger = forwardRef(function DialogTrigger({ render, className, style, ...elementProps }, forwardedRef) {
-	const { core, dialog, state, stateAttrMap, popupId } = useDialogContext();
-	const triggerRef = useCallback((element) => dialog.setTriggerElement(element), [dialog]);
-	return renderElement("button", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap,
-		ref: [forwardedRef, triggerRef],
-		props: [
-			{
-				type: "button",
-				...core.getTriggerAttrs(state, popupId)
-			},
-			dialog.triggerProps,
-			elementProps
-		]
-	});
-});
-//#endregion
-export { DialogTrigger };
-
-//# sourceMappingURL=dialog-trigger.js.map

package/dist/default/ui/dialog/dialog-trigger.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dialog-trigger.js","names":[],"sources":["../../../../src/ui/dialog/dialog-trigger.tsx"],"sourcesContent":["import type { DialogCore } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from './context';\n\nexport interface DialogTriggerProps extends UIComponentProps<'button', DialogCore.State> {}\n\n/** Renders a button that opens the dialog. */\nexport const DialogTrigger = forwardRef<HTMLButtonElement, DialogTriggerProps>(function DialogTrigger(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, dialog, state, stateAttrMap, popupId } = useDialogContext();\n\n  const triggerRef = useCallback((element: HTMLButtonElement | null) => dialog.setTriggerElement(element), [dialog]);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, triggerRef],\n      props: [{ type: 'button' as const, ...core.getTriggerAttrs(state, popupId) }, dialog.triggerProps, elementProps],\n    }\n  );\n});\n\nexport namespace DialogTrigger {\n  export type Props = DialogTriggerProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;AAUA,MAAa,gBAAgB,WAAkD,SAAS,cACtF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,QAAQ,OAAO,cAAc,YAAY,iBAAiB;CAExE,MAAM,aAAa,aAAa,YAAsC,OAAO,kBAAkB,OAAO,GAAG,CAAC,MAAM,CAAC;CAEjH,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC;IAAE,MAAM;IAAmB,GAAG,KAAK,gBAAgB,OAAO,OAAO;GAAE;GAAG,OAAO;GAAc;EAAY;CACjH,CACF;AACF,CAAC"}

package/dist/default/ui/error-dialog/error-dialog-close.js

@@ -1,36 +0,0 @@
-import { useTranslator } from "../../i18n/context.js";
-import { renderElement } from "../../utils/use-render.js";
-import { useDialogContext } from "../dialog/context.js";
-import { getErrorDialogDismissText } from "@videojs/core";
-import { translateText } from "@videojs/core/i18n";
-import { forwardRef, useCallback } from "react";
-//#region src/ui/error-dialog/error-dialog-close.tsx
-/** Renders a localized button that closes the dialog and dismisses the player error. */
-const ErrorDialogClose = forwardRef(function ErrorDialogClose({ render, className, style, disabled, children, ...elementProps }, forwardedRef) {
-	const t = useTranslator();
-	const { dialog, state, stateAttrMap } = useDialogContext();
-	const handleClick = useCallback(() => {
-		if (disabled) return;
-		dialog.close();
-	}, [dialog, disabled]);
-	const content = children ?? translateText(getErrorDialogDismissText(), t);
-	return renderElement("button", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap,
-		ref: forwardedRef,
-		props: [{
-			type: "button",
-			disabled,
-			onClick: handleClick,
-			children: content
-		}, elementProps]
-	});
-});
-//#endregion
-export { ErrorDialogClose };
-
-//# sourceMappingURL=error-dialog-close.js.map

package/dist/default/ui/error-dialog/error-dialog-close.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"error-dialog-close.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-close.tsx"],"sourcesContent":["import { type DialogCore, getErrorDialogDismissText } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode, useCallback } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from '../dialog/context';\n\nexport interface ErrorDialogCloseProps extends UIComponentProps<'button', DialogCore.State> {}\n\n/** Renders a localized button that closes the dialog and dismisses the player error. */\nexport const ErrorDialogClose = forwardRef<HTMLButtonElement, ErrorDialogCloseProps>(function ErrorDialogClose(\n  { render, className, style, disabled, children, ...elementProps },\n  forwardedRef\n) {\n  const t = useTranslator();\n  const { dialog, state, stateAttrMap } = useDialogContext();\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\n\n    dialog.close();\n  }, [dialog, disabled]);\n\n  const content: ReactNode = children ?? translateText(getErrorDialogDismissText(), t);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [{ type: 'button' as const, disabled, onClick: handleClick, children: content }, elementProps],\n    }\n  );\n});\n\nexport namespace ErrorDialogClose {\n  export type Props = ErrorDialogCloseProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,mBAAmB,WAAqD,SAAS,iBAC5F,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,GAAG,gBACnD,cACA;CACA,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,QAAQ,OAAO,iBAAiB,iBAAiB;CAEzD,MAAM,cAAc,kBAAkB;EACpC,IAAI,UAAU;EAEd,OAAO,MAAM;CACf,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAErB,MAAM,UAAqB,YAAY,cAAc,0BAA0B,GAAG,CAAC;CAEnF,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,MAAM;GAAmB;GAAU,SAAS;GAAa,UAAU;EAAQ,GAAG,YAAY;CACtG,CACF;AACF,CAAC"}

package/dist/default/ui/error-dialog/error-dialog-description.js

@@ -1,33 +0,0 @@
-import { useTranslator } from "../../i18n/context.js";
-import { renderElement } from "../../utils/use-render.js";
-import { useDialogContext } from "../dialog/context.js";
-import { useErrorDialogContext } from "./context.js";
-import { resolveErrorDialogDescription } from "@videojs/core";
-import { translateText } from "@videojs/core/i18n";
-import { forwardRef } from "react";
-//#region src/ui/error-dialog/error-dialog-description.tsx
-/** Renders the localized playback error message, or authored children when provided. */
-const ErrorDialogDescription = forwardRef(function ErrorDialogDescription({ render, className, style, children, ...elementProps }, forwardedRef) {
-	const t = useTranslator();
-	const { state, stateAttrMap } = useDialogContext();
-	const { lastError } = useErrorDialogContext();
-	const description = resolveErrorDialogDescription(lastError);
-	const content = children ?? translateText(description, t);
-	return renderElement("p", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap,
-		ref: forwardedRef,
-		props: [{
-			id: state.descriptionId,
-			children: content
-		}, elementProps]
-	});
-});
-//#endregion
-export { ErrorDialogDescription };
-
-//# sourceMappingURL=error-dialog-description.js.map

package/dist/default/ui/error-dialog/error-dialog-description.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"error-dialog-description.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-description.tsx"],"sourcesContent":["import { type DialogCore, resolveErrorDialogDescription } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from '../dialog/context';\nimport { useErrorDialogContext } from './context';\n\nexport interface ErrorDialogDescriptionProps extends UIComponentProps<'p', DialogCore.State> {}\n\n/** Renders the localized playback error message, or authored children when provided. */\nexport const ErrorDialogDescription = forwardRef<HTMLParagraphElement, ErrorDialogDescriptionProps>(\n  function ErrorDialogDescription({ render, className, style, children, ...elementProps }, forwardedRef) {\n    const t = useTranslator();\n    const { state, stateAttrMap } = useDialogContext();\n    const { lastError } = useErrorDialogContext();\n    const description = resolveErrorDialogDescription(lastError);\n    const content: ReactNode = children ?? translateText(description, t);\n\n    return renderElement(\n      'p',\n      { render, className, style },\n      {\n        state,\n        stateAttrMap,\n        ref: forwardedRef,\n        props: [{ id: state.descriptionId, children: content }, elementProps],\n      }\n    );\n  }\n);\n\nexport namespace ErrorDialogDescription {\n  export type Props = ErrorDialogDescriptionProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;;;;;AAaA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBAAgB,cAAc;CACrG,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,OAAO,iBAAiB,iBAAiB;CACjD,MAAM,EAAE,cAAc,sBAAsB;CAC5C,MAAM,cAAc,8BAA8B,SAAS;CAC3D,MAAM,UAAqB,YAAY,cAAc,aAAa,CAAC;CAEnE,OAAO,cACL,KACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,IAAI,MAAM;GAAe,UAAU;EAAQ,GAAG,YAAY;CACtE,CACF;AACF,CACF"}

package/dist/default/ui/error-dialog/error-dialog-root.js

@@ -1,43 +0,0 @@
-import { useContainer, usePlayer } from "../../player/context.js";
-import { useLatestRef } from "../../utils/use-latest-ref.js";
-import { DialogContextProvider } from "../dialog/context.js";
-import { useDialogRoot } from "../dialog/use-dialog-root.js";
-import { ErrorDialogContextProvider } from "./context.js";
-import { ErrorDialogCore, ErrorDialogDataAttrs } from "@videojs/core";
-import { selectError } from "@videojs/core/dom";
-import { useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/ui/error-dialog/error-dialog-root.tsx
-/** Opens from player error state and provides it to the shared dialog parts. */
-function ErrorDialogRoot({ children }) {
-	const errorState = usePlayer(selectError);
-	const container = useContainer();
-	const lastError = useRef(errorState?.error ?? null);
-	if (errorState?.error) lastError.current = errorState.error;
-	const errorStateRef = useLatestRef(errorState);
-	const dialogContext = useDialogRoot({
-		open: Boolean(errorState?.error),
-		onOpenChange(nextOpen) {
-			if (!nextOpen) errorStateRef.current?.dismissError();
-		},
-		coreFactory: createErrorDialogCore,
-		stateAttrMap: ErrorDialogDataAttrs,
-		idPrefix: "error-dialog",
-		interactionRoot: container
-	});
-	if (!errorState) return null;
-	return /* @__PURE__ */ jsx(ErrorDialogContextProvider, {
-		value: { lastError: lastError.current },
-		children: /* @__PURE__ */ jsx(DialogContextProvider, {
-			value: dialogContext,
-			children
-		})
-	});
-}
-function createErrorDialogCore() {
-	return new ErrorDialogCore();
-}
-//#endregion
-export { ErrorDialogRoot };
-
-//# sourceMappingURL=error-dialog-root.js.map

package/dist/default/ui/error-dialog/error-dialog-root.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"error-dialog-root.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-root.tsx"],"sourcesContent":["import { ErrorDialogCore, ErrorDialogDataAttrs } from '@videojs/core';\nimport { selectError } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useRef } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { DialogContextProvider } from '../dialog/context';\nimport { useDialogRoot } from '../dialog/use-dialog-root';\nimport { ErrorDialogContextProvider } from './context';\n\nexport interface ErrorDialogRootProps {\n  children?: ReactNode;\n}\n\n/** Opens from player error state and provides it to the shared dialog parts. */\nexport function ErrorDialogRoot({ children }: ErrorDialogRootProps): ReactNode {\n  const errorState = usePlayer(selectError);\n  const container = useContainer();\n  const lastError = useRef(errorState?.error ?? null);\n\n  if (errorState?.error) lastError.current = errorState.error;\n\n  const errorStateRef = useLatestRef(errorState);\n  const dialogContext = useDialogRoot({\n    open: Boolean(errorState?.error),\n    onOpenChange(nextOpen) {\n      if (!nextOpen) errorStateRef.current?.dismissError();\n    },\n    coreFactory: createErrorDialogCore,\n    stateAttrMap: ErrorDialogDataAttrs,\n    idPrefix: 'error-dialog',\n    interactionRoot: container,\n  });\n\n  if (!errorState) return null;\n\n  return (\n    <ErrorDialogContextProvider value={{ lastError: lastError.current }}>\n      <DialogContextProvider value={dialogContext}>{children}</DialogContextProvider>\n    </ErrorDialogContextProvider>\n  );\n}\n\nfunction createErrorDialogCore(): ErrorDialogCore {\n  return new ErrorDialogCore();\n}\n\nexport namespace ErrorDialogRoot {\n  export type Props = ErrorDialogRootProps;\n}\n"],"mappings":";;;;;;;;;;;AAgBA,SAAgB,gBAAgB,EAAE,YAA6C;CAC7E,MAAM,aAAa,UAAU,WAAW;CACxC,MAAM,YAAY,aAAa;CAC/B,MAAM,YAAY,OAAO,YAAY,SAAS,IAAI;CAElD,IAAI,YAAY,OAAO,UAAU,UAAU,WAAW;CAEtD,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,gBAAgB,cAAc;EAClC,MAAM,QAAQ,YAAY,KAAK;EAC/B,aAAa,UAAU;GACrB,IAAI,CAAC,UAAU,cAAc,SAAS,aAAa;EACrD;EACA,aAAa;EACb,cAAc;EACd,UAAU;EACV,iBAAiB;CACnB,CAAC;CAED,IAAI,CAAC,YAAY,OAAO;CAExB,OACE,oBAAC,4BAAD;EAA4B,OAAO,EAAE,WAAW,UAAU,QAAQ;EAChE,UAAA,oBAAC,uBAAD;GAAuB,OAAO;GAAgB;EAAgC,CAAA;CACpD,CAAA;AAEhC;AAEA,SAAS,wBAAyC;CAChD,OAAO,IAAI,gBAAgB;AAC7B"}

package/dist/default/ui/error-dialog/error-dialog-title.js

@@ -1,30 +0,0 @@
-import { useTranslator } from "../../i18n/context.js";
-import { renderElement } from "../../utils/use-render.js";
-import { useDialogContext } from "../dialog/context.js";
-import { getErrorDialogTitleText } from "@videojs/core";
-import { translateText } from "@videojs/core/i18n";
-import { forwardRef } from "react";
-//#region src/ui/error-dialog/error-dialog-title.tsx
-/** Renders the localized error dialog heading, or authored children when provided. */
-const ErrorDialogTitle = forwardRef(function ErrorDialogTitle({ render, className, style, children, ...elementProps }, forwardedRef) {
-	const t = useTranslator();
-	const { state, stateAttrMap } = useDialogContext();
-	const content = children ?? translateText(getErrorDialogTitleText(), t);
-	return renderElement("h2", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap,
-		ref: forwardedRef,
-		props: [{
-			id: state.titleId,
-			children: content
-		}, elementProps]
-	});
-});
-//#endregion
-export { ErrorDialogTitle };
-
-//# sourceMappingURL=error-dialog-title.js.map

package/dist/default/ui/error-dialog/error-dialog-title.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"error-dialog-title.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-title.tsx"],"sourcesContent":["import { type DialogCore, getErrorDialogTitleText } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from '../dialog/context';\n\nexport interface ErrorDialogTitleProps extends UIComponentProps<'h2', DialogCore.State> {}\n\n/** Renders the localized error dialog heading, or authored children when provided. */\nexport const ErrorDialogTitle = forwardRef<HTMLHeadingElement, ErrorDialogTitleProps>(function ErrorDialogTitle(\n  { render, className, style, children, ...elementProps },\n  forwardedRef\n) {\n  const t = useTranslator();\n  const { state, stateAttrMap } = useDialogContext();\n  const content: ReactNode = children ?? translateText(getErrorDialogTitleText(), t);\n\n  return renderElement(\n    'h2',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [{ id: state.titleId, children: content }, elementProps],\n    }\n  );\n});\n\nexport namespace ErrorDialogTitle {\n  export type Props = ErrorDialogTitleProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,mBAAmB,WAAsD,SAAS,iBAC7F,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,OAAO,iBAAiB,iBAAiB;CACjD,MAAM,UAAqB,YAAY,cAAc,wBAAwB,GAAG,CAAC;CAEjF,OAAO,cACL,MACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,IAAI,MAAM;GAAS,UAAU;EAAQ,GAAG,YAAY;CAChE,CACF;AACF,CAAC"}

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

@@ -1,19 +0,0 @@
-import { createMediaButton } from "../create-media-button.js";
-import { FullscreenButtonCore, FullscreenButtonDataAttrs } from "@videojs/core";
-import { selectFullscreen } from "@videojs/core/dom";
-//#region src/ui/fullscreen-button/fullscreen-button.tsx
-/** A button that toggles fullscreen. */
-const FullscreenButton = createMediaButton({
-	displayName: "FullscreenButton",
-	core: FullscreenButtonCore,
-	stateAttrMap: FullscreenButtonDataAttrs,
-	selector: selectFullscreen,
-	action: (core, state) => core.toggle(state),
-	hotkeyAction: "toggleFullscreen",
-	isSupported: (state) => !state.hidden,
-	focusContainerOnPointerActivation: true
-});
-//#endregion
-export { FullscreenButton };
-
-//# sourceMappingURL=fullscreen-button.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"fullscreen-button.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"sourcesContent":["import { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';\nimport { selectFullscreen } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface FullscreenButtonProps\n  extends UIComponentProps<'button', FullscreenButtonCore.State>, FullscreenButtonCore.Props {}\n\n/** A button that toggles fullscreen. */\nexport const FullscreenButton = createMediaButton<FullscreenButtonCore, FullscreenButtonProps>({\n  displayName: 'FullscreenButton',\n  core: FullscreenButtonCore,\n  stateAttrMap: FullscreenButtonDataAttrs,\n  selector: selectFullscreen,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'toggleFullscreen',\n  isSupported: (state) => !state.hidden,\n  focusContainerOnPointerActivation: true,\n});\n\nexport namespace FullscreenButton {\n  export type Props = FullscreenButtonProps;\n  export type State = FullscreenButtonCore.State;\n}\n"],"mappings":";;;;;AAUA,MAAa,mBAAmB,kBAA+D;CAC7F,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;CACd,cAAc,UAAU,CAAC,MAAM;CAC/B,mCAAmC;AACrC,CAAC"}

package/dist/default/ui/gesture/gesture.js

@@ -1,45 +0,0 @@
-import { useContainer, usePlayer } from "../../player/context.js";
-import { createDoubleTapGesture, createTapGesture, getGestureActionValue, resolveGestureAction } from "@videojs/core/dom";
-import { useEffect } from "react";
-//#region src/ui/gesture/gesture.tsx
-function Gesture({ type, action, value, pointer, region, disabled }) {
-	const store = usePlayer();
-	const container = useContainer();
-	useEffect(() => {
-		if (!container || !type || !action || disabled) return;
-		const resolver = resolveGestureAction(action);
-		if (!resolver) return;
-		const actionValue = getGestureActionValue(action, region, value);
-		const onActivate = (event) => {
-			resolver({
-				store,
-				value: actionValue,
-				event
-			});
-		};
-		const options = {
-			pointer,
-			region,
-			action,
-			value: actionValue
-		};
-		if (type === "doubletap") return createDoubleTapGesture(container, onActivate, options);
-		if (type === "tap") return createTapGesture(container, onActivate, options);
-	}, [
-		container,
-		store,
-		type,
-		action,
-		value,
-		pointer,
-		region,
-		disabled
-	]);
-	return null;
-}
-/** @deprecated Use `Gesture` instead. */
-const MediaGesture = Gesture;
-//#endregion
-export { Gesture, MediaGesture };
-
-//# sourceMappingURL=gesture.js.map

package/dist/default/ui/gesture/gesture.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"gesture.js","names":[],"sources":["../../../../src/ui/gesture/gesture.tsx"],"sourcesContent":["import type { GestureProps as CoreGestureProps } from '@videojs/core';\nimport type { AnyPlayerStore } from '@videojs/core/dom';\nimport {\n  createDoubleTapGesture,\n  createTapGesture,\n  getGestureActionValue,\n  resolveGestureAction,\n} from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface GestureProps extends CoreGestureProps {}\n\nexport function Gesture({ type, action, value, pointer, region, disabled }: GestureProps): ReactNode {\n  const store = usePlayer() as AnyPlayerStore;\n  const container = useContainer();\n\n  useEffect(() => {\n    if (!container || !type || !action || disabled) return;\n\n    const resolver = resolveGestureAction(action);\n    if (!resolver) return;\n\n    const actionValue = getGestureActionValue(action, region, value);\n\n    const onActivate = (event: PointerEvent) => {\n      resolver({ store, value: actionValue, event });\n    };\n\n    const options = { pointer, region, action, value: actionValue };\n\n    if (type === 'doubletap') {\n      return createDoubleTapGesture(container, onActivate, options);\n    }\n\n    if (type === 'tap') return createTapGesture(container, onActivate, options);\n\n    return;\n  }, [container, store, type, action, value, pointer, region, disabled]);\n\n  return null;\n}\n\nexport namespace Gesture {\n  export type Props = GestureProps;\n}\n\n/** @deprecated Use `GestureProps` instead. */\nexport type MediaGestureProps = GestureProps;\n\n/** @deprecated Use `Gesture` instead. */\nexport const MediaGesture = Gesture;\n"],"mappings":";;;;AAeA,SAAgB,QAAQ,EAAE,MAAM,QAAQ,OAAO,SAAS,QAAQ,YAAqC;CACnG,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAE/B,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,UAAU;EAEhD,MAAM,WAAW,qBAAqB,MAAM;EAC5C,IAAI,CAAC,UAAU;EAEf,MAAM,cAAc,sBAAsB,QAAQ,QAAQ,KAAK;EAE/D,MAAM,cAAc,UAAwB;GAC1C,SAAS;IAAE;IAAO,OAAO;IAAa;GAAM,CAAC;EAC/C;EAEA,MAAM,UAAU;GAAE;GAAS;GAAQ;GAAQ,OAAO;EAAY;EAE9D,IAAI,SAAS,aACX,OAAO,uBAAuB,WAAW,YAAY,OAAO;EAG9D,IAAI,SAAS,OAAO,OAAO,iBAAiB,WAAW,YAAY,OAAO;CAG5E,GAAG;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAS;EAAQ;CAAQ,CAAC;CAErE,OAAO;AACT;;AAUA,MAAa,eAAe"}

package/dist/default/ui/hotkey/hotkey.js

@@ -1,43 +0,0 @@
-import { useContainer, usePlayer } from "../../player/context.js";
-import { createHotkey, isHotkeyToggleAction, resolveHotkeyAction } from "@videojs/core/dom";
-import { useEffect } from "react";
-//#region src/ui/hotkey/hotkey.tsx
-function Hotkey({ keys, action, value, disabled, target }) {
-	const store = usePlayer();
-	const container = useContainer();
-	useEffect(() => {
-		if (!container || !keys || !action || disabled) return;
-		const resolver = resolveHotkeyAction(action);
-		if (!resolver) return;
-		return createHotkey(container, {
-			keys,
-			action,
-			value,
-			target,
-			disabled,
-			repeatable: !isHotkeyToggleAction(action),
-			onActivate: (_event, key) => {
-				resolver({
-					store,
-					key,
-					value
-				});
-			}
-		});
-	}, [
-		container,
-		store,
-		keys,
-		action,
-		value,
-		disabled,
-		target
-	]);
-	return null;
-}
-/** @deprecated Use `Hotkey` instead. */
-const MediaHotkey = Hotkey;
-//#endregion
-export { Hotkey, MediaHotkey };
-
-//# sourceMappingURL=hotkey.js.map

package/dist/default/ui/hotkey/hotkey.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hotkey.js","names":[],"sources":["../../../../src/ui/hotkey/hotkey.tsx"],"sourcesContent":["import type { HotkeyProps as CoreHotkeyProps } from '@videojs/core';\nimport type { AnyPlayerStore } from '@videojs/core/dom';\nimport { createHotkey, isHotkeyToggleAction, resolveHotkeyAction } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface HotkeyProps extends CoreHotkeyProps {}\n\nexport function Hotkey({ keys, action, value, disabled, target }: HotkeyProps): ReactNode {\n  const store = usePlayer() as AnyPlayerStore;\n  const container = useContainer();\n\n  useEffect(() => {\n    if (!container || !keys || !action || disabled) return;\n\n    const resolver = resolveHotkeyAction(action);\n    if (!resolver) return;\n\n    return createHotkey(container, {\n      keys,\n      action,\n      value,\n      target,\n      disabled,\n      repeatable: !isHotkeyToggleAction(action),\n      onActivate: (_event, key) => {\n        resolver({ store, key, value });\n      },\n    });\n  }, [container, store, keys, action, value, disabled, target]);\n\n  return null;\n}\n\nexport namespace Hotkey {\n  export type Props = HotkeyProps;\n}\n\n/** @deprecated Use `HotkeyProps` instead. */\nexport type MediaHotkeyProps = HotkeyProps;\n\n/** @deprecated Use `Hotkey` instead. */\nexport const MediaHotkey = Hotkey;\n"],"mappings":";;;;AAUA,SAAgB,OAAO,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAkC;CACxF,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAE/B,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,UAAU;EAEhD,MAAM,WAAW,oBAAoB,MAAM;EAC3C,IAAI,CAAC,UAAU;EAEf,OAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA;GACA,YAAY,CAAC,qBAAqB,MAAM;GACxC,aAAa,QAAQ,QAAQ;IAC3B,SAAS;KAAE;KAAO;KAAK;IAAM,CAAC;GAChC;EACF,CAAC;CACH,GAAG;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAU;CAAM,CAAC;CAE5D,OAAO;AACT;;AAUA,MAAa,cAAc"}

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

@@ -1,89 +0,0 @@
-import { useTranslator } from "../../i18n/context.js";
-import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
-import { useButton } from "../hooks/use-button.js";
-import { useOptionalTooltipContext } from "../tooltip/context.js";
-import { LiveButtonCore, LiveButtonDataAttrs } from "@videojs/core";
-import { selectBuffer, selectLive, selectTime } from "@videojs/core/dom";
-import { translateText } from "@videojs/core/i18n";
-import { forwardRef, useLayoutEffect, useState } from "react";
-//#region src/ui/live-button/live-button.tsx
-const DISPLAY_NAME = "LiveButton";
-/**
-* A button that indicates live status and seeks to the live edge when pressed. Exposes `data-live` while the stream is
-* live (or DVR) and `data-live-edge` while playing at the live edge so skins can style a red-dot ↔ grey-dot treatment.
-*
-* Selects from `live`, `time`, and `buffer` features and composes them itself rather than going through
-* `createMediaButton`, since the LiveButton needs three feature slices to detect the live edge and seek.
-*
-* Displays the translated live badge when no children are provided.
-*
-* @example
-*   ```tsx
-*   <LiveButton />;
-*   ```;
-*
-* @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md
-*/
-const LiveButton = forwardRef(function LiveButton(componentProps, forwardedRef) {
-	const { children, render, className, style, label, disabled, ...elementProps } = componentProps;
-	const live = usePlayer(selectLive);
-	const time = usePlayer(selectTime);
-	const buffer = usePlayer(selectBuffer);
-	const media = live && time && buffer ? {
-		currentTime: time.currentTime,
-		seek: time.seek,
-		seekable: buffer.seekable,
-		liveEdgeStart: live.liveEdgeStart,
-		targetLiveWindow: live.targetLiveWindow
-	} : null;
-	const tooltipCtx = useOptionalTooltipContext();
-	const translator = useTranslator();
-	const [core] = useState(() => new LiveButtonCore());
-	core.setProps({
-		label,
-		disabled
-	});
-	const { getButtonProps, buttonRef } = useButton({
-		displayName: DISPLAY_NAME,
-		onActivate: () => {
-			if (media) core.seekToLive(media);
-		},
-		isDisabled: () => !!disabled || !media
-	});
-	if (media) core.setMedia(media);
-	const state = media ? core.getState() : null;
-	const labelText = state ? translateText(core.getLabel(state), translator) : void 0;
-	useLayoutEffect(() => {
-		if (!tooltipCtx) return;
-		tooltipCtx.setContent(labelText ? { label: labelText } : void 0);
-		return () => tooltipCtx.setContent(void 0);
-	}, [tooltipCtx, labelText]);
-	if (!media || !state) return null;
-	const attrs = core.getAttrs(state);
-	const labelAttr = attrs["aria-label"];
-	const content = children ?? translateText(LiveButtonCore.defaultText, translator);
-	return renderElement("button", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap: LiveButtonDataAttrs,
-		ref: [forwardedRef, buttonRef],
-		props: [
-			attrs,
-			{
-				children: content,
-				...elementProps,
-				"aria-label": labelAttr ? translateText(labelAttr, translator) : labelAttr
-			},
-			getButtonProps()
-		]
-	});
-});
-LiveButton.displayName = DISPLAY_NAME;
-//#endregion
-export { LiveButton };
-
-//# sourceMappingURL=live-button.js.map

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

@@ -1 +0,0 @@
-{"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 pressed. Exposes `data-live` while the stream is\n * live (or DVR) and `data-live-edge` while playing at the live edge so skins can style a red-dot ↔ grey-dot treatment.\n *\n * Selects from `live`, `time`, and `buffer` features and composes them itself rather than going through\n * `createMediaButton`, since the LiveButton 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\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\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\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\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;;;;;;;;;;;;;;;;;AAoBrB,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;CAElD,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;CAE9B,MAAM,QAAQ,QAAQ,KAAK,SAAS,IAAI;CACxC,MAAM,YAAY,QAAQ,cAAc,KAAK,SAAS,KAAK,GAAG,UAAU,IAAI,KAAA;CAE5E,sBAAsB;EACpB,IAAI,CAAC,YAAY;EAEjB,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,OAGb,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/menu-checkbox-item.js

@@ -1,51 +0,0 @@
-import { renderElement } from "../../utils/use-render.js";
-import { useMenuContext } from "./context.js";
-import { forwardRef, useCallback, useEffect, useRef } from "react";
-//#region src/ui/menu/menu-checkbox-item.tsx
-/** A checkbox-style menu item. Renders a `<div>` with `role="menuitemcheckbox"`. */
-const MenuCheckboxItem = forwardRef(function MenuCheckboxItem({ render, className, style, checked, onCheckedChange, disabled, onClick, ...elementProps }, forwardedRef) {
-	const { menu, state } = useMenuContext();
-	const elementRef = useRef(null);
-	useEffect(() => {
-		const element = elementRef.current;
-		if (!element) return;
-		return menu.registerItem(element);
-	}, [menu]);
-	const handleClick = useCallback((event) => {
-		if (disabled) return;
-		onClick?.(event);
-		onCheckedChange(!checked);
-	}, [
-		disabled,
-		onClick,
-		onCheckedChange,
-		checked
-	]);
-	const handlePointerEnter = useCallback(() => {
-		const element = elementRef.current;
-		if (!element || disabled) return;
-		menu.highlight(element, {
-			focus: false,
-			pointer: true
-		});
-	}, [menu, disabled]);
-	return renderElement("div", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		ref: [forwardedRef, elementRef],
-		props: [{
-			role: "menuitemcheckbox",
-			"aria-checked": checked,
-			"aria-disabled": disabled ? true : void 0,
-			onClick: handleClick,
-			onPointerEnter: handlePointerEnter
-		}, elementProps]
-	});
-});
-//#endregion
-export { MenuCheckboxItem };
-
-//# sourceMappingURL=menu-checkbox-item.js.map

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

@@ -1 +0,0 @@
-{"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\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n\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\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;EAEd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;EAEd,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;EAE1B,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,95 +0,0 @@
-import { useComposedRefs } from "../../utils/use-composed-refs.js";
-import { renderElement } from "../../utils/use-render.js";
-import { useMenuContext, useMenuPopupContext } from "./context.js";
-import { callKeyDownHandler, preventMenuKeyDefault } from "./menu-keyboard.js";
-import { MenuContentDataAttrs } from "@videojs/core";
-import { isMenuNavigationKey } from "@videojs/core/dom";
-import { forwardRef, useCallback, useLayoutEffect, useRef } from "react";
-import { createPortal } from "react-dom";
-//#region src/ui/menu/menu-content.tsx
-/** Accessible item and focus scope for exactly one root or nested menu page. */
-const MenuContent = forwardRef(function MenuContent({ render, className, style, onKeyDown, onBlur, ...elementProps }, forwardedRef) {
-	const { core, menu, parent, state, contentId } = useMenuContext();
-	const { popup, element: popupElement } = useMenuPopupContext();
-	const isSubmenu = parent !== null;
-	const isActive = isSubmenu && state.open;
-	const wasActiveRef = useRef(false);
-	const cleanupRegistrationRef = useRef(null);
-	useLayoutEffect(() => {
-		if (!isSubmenu) return void 0;
-		const wasActive = wasActiveRef.current;
-		wasActiveRef.current = isActive;
-		if (isActive && !wasActive) {
-			const frame = requestAnimationFrame(() => menu.highlightFirstItem({ preventScroll: true }));
-			return () => cancelAnimationFrame(frame);
-		}
-	}, [
-		isActive,
-		isSubmenu,
-		menu
-	]);
-	const setContentElement = useCallback((element) => {
-		cleanupRegistrationRef.current?.();
-		cleanupRegistrationRef.current = null;
-		if (!element) {
-			if (isSubmenu) menu.setPopupElement(null);
-			return;
-		}
-		if (isSubmenu) menu.setPopupElement(element);
-		cleanupRegistrationRef.current = popup.registerContent({
-			menu,
-			parent: parent?.menu ?? null,
-			element
-		});
-	}, [
-		isSubmenu,
-		menu,
-		parent?.menu,
-		popup
-	]);
-	const composedRef = useComposedRefs(forwardedRef, setContentElement);
-	const handleKeyDown = useCallback((event) => {
-		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
-		const isNavigationKey = isMenuNavigationKey(event);
-		menu.contentProps.onKeyDown(event);
-		if (isSubmenu && (event.key === "ArrowLeft" || event.key === "Escape") && !defaultPreventedByUser) {
-			event.preventDefault();
-			menu.close("escape");
-		}
-		if (event.key !== "Escape" && isNavigationKey) event.stopPropagation();
-	}, [
-		isSubmenu,
-		menu,
-		onKeyDown
-	]);
-	if (isSubmenu && !isActive && state.status !== "ending") return null;
-	const contentNode = renderElement("div", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap: MenuContentDataAttrs,
-		ref: composedRef,
-		props: [
-			{
-				id: contentId,
-				...core.getContentAttrs()
-			},
-			{
-				onKeyDownCapture: preventMenuKeyDefault,
-				onKeyDown: handleKeyDown,
-				onBlur: (event) => {
-					onBlur?.(event);
-					if (isSubmenu) menu.contentProps.onFocusOut(event);
-				}
-			},
-			elementProps
-		]
-	});
-	return isSubmenu && popupElement ? createPortal(contentNode, popupElement) : contentNode;
-});
-//#endregion
-export { MenuContent };
-
-//# sourceMappingURL=menu-content.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"menu-content.js","names":[],"sources":["../../../../src/ui/menu/menu-content.tsx"],"sourcesContent":["import { MenuContentDataAttrs, type MenuState } from '@videojs/core';\nimport { isMenuNavigationKey } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useLayoutEffect, 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 { useMenuContext, useMenuPopupContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './menu-keyboard';\n\nexport interface MenuContentProps extends UIComponentProps<'div', MenuState> {}\n\n/** Accessible item and focus scope for exactly one root or nested menu page. */\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(function MenuContent(\n  { render, className, style, onKeyDown, onBlur, ...elementProps },\n  forwardedRef\n) {\n  const { core, menu, parent, state, contentId } = useMenuContext();\n  const { popup, element: popupElement } = useMenuPopupContext();\n  const isSubmenu = parent !== null;\n  const isActive = isSubmenu && state.open;\n  const wasActiveRef = useRef(false);\n  const cleanupRegistrationRef = useRef<(() => void) | null>(null);\n\n  useLayoutEffect(() => {\n    if (!isSubmenu) return undefined;\n\n    const wasActive = wasActiveRef.current;\n\n    wasActiveRef.current = isActive;\n\n    if (isActive && !wasActive) {\n      const frame = requestAnimationFrame(() => menu.highlightFirstItem({ preventScroll: true }));\n\n      return () => cancelAnimationFrame(frame);\n    }\n\n    return undefined;\n  }, [isActive, isSubmenu, menu]);\n\n  const setContentElement = useCallback(\n    (element: HTMLDivElement | null) => {\n      cleanupRegistrationRef.current?.();\n      cleanupRegistrationRef.current = null;\n\n      if (!element) {\n        if (isSubmenu) menu.setPopupElement(null);\n\n        return;\n      }\n\n      if (isSubmenu) menu.setPopupElement(element);\n\n      cleanupRegistrationRef.current = popup.registerContent({\n        menu,\n        parent: parent?.menu ?? null,\n        element,\n      });\n    },\n    [isSubmenu, menu, parent?.menu, popup]\n  );\n  const composedRef = useComposedRefs(forwardedRef, setContentElement);\n\n  const handleKeyDown = 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\n      menu.contentProps.onKeyDown(event);\n\n      if (isSubmenu && (event.key === 'ArrowLeft' || event.key === 'Escape') && !defaultPreventedByUser) {\n        event.preventDefault();\n        menu.close('escape');\n      }\n\n      if (event.key !== 'Escape' && isNavigationKey) event.stopPropagation();\n    },\n    [isSubmenu, menu, onKeyDown]\n  );\n\n  const inactive = isSubmenu && !isActive && state.status !== 'ending';\n  if (inactive) return null;\n\n  const contentNode = renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: MenuContentDataAttrs,\n      ref: composedRef,\n      props: [\n        { id: contentId, ...core.getContentAttrs() },\n        {\n          onKeyDownCapture: preventMenuKeyDefault,\n          onKeyDown: handleKeyDown,\n          onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n            onBlur?.(event);\n\n            if (isSubmenu) menu.contentProps.onFocusOut(event);\n          },\n        },\n        elementProps,\n      ],\n    }\n  );\n\n  return isSubmenu && popupElement ? createPortal(contentNode, popupElement) : contentNode;\n});\n\nexport namespace MenuContent {\n  export type Props = MenuContentProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;;;;AAcA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,QAAQ,WAAW,OAAO,WAAW,QAAQ,GAAG,gBAClD,cACA;CACA,MAAM,EAAE,MAAM,MAAM,QAAQ,OAAO,cAAc,eAAe;CAChE,MAAM,EAAE,OAAO,SAAS,iBAAiB,oBAAoB;CAC7D,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,eAAe,OAAO,KAAK;CACjC,MAAM,yBAAyB,OAA4B,IAAI;CAE/D,sBAAsB;EACpB,IAAI,CAAC,WAAW,OAAO,KAAA;EAEvB,MAAM,YAAY,aAAa;EAE/B,aAAa,UAAU;EAEvB,IAAI,YAAY,CAAC,WAAW;GAC1B,MAAM,QAAQ,4BAA4B,KAAK,mBAAmB,EAAE,eAAe,KAAK,CAAC,CAAC;GAE1F,aAAa,qBAAqB,KAAK;EACzC;CAGF,GAAG;EAAC;EAAU;EAAW;CAAI,CAAC;CAE9B,MAAM,oBAAoB,aACvB,YAAmC;EAClC,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;EAEjC,IAAI,CAAC,SAAS;GACZ,IAAI,WAAW,KAAK,gBAAgB,IAAI;GAExC;EACF;EAEA,IAAI,WAAW,KAAK,gBAAgB,OAAO;EAE3C,uBAAuB,UAAU,MAAM,gBAAgB;GACrD;GACA,QAAQ,QAAQ,QAAQ;GACxB;EACF,CAAC;CACH,GACA;EAAC;EAAW;EAAM,QAAQ;EAAM;CAAK,CACvC;CACA,MAAM,cAAc,gBAAgB,cAAc,iBAAiB;CAEnE,MAAM,gBAAgB,aACnB,UAA+C;EAC9C,MAAM,yBAAyB,mBAC7B,WACA,KACF;EACA,MAAM,kBAAkB,oBAAoB,KAAK;EAEjD,KAAK,aAAa,UAAU,KAAK;EAEjC,IAAI,cAAc,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAAa,CAAC,wBAAwB;GACjG,MAAM,eAAe;GACrB,KAAK,MAAM,QAAQ;EACrB;EAEA,IAAI,MAAM,QAAQ,YAAY,iBAAiB,MAAM,gBAAgB;CACvE,GACA;EAAC;EAAW;EAAM;CAAS,CAC7B;CAGA,IADiB,aAAa,CAAC,YAAY,MAAM,WAAW,UAC9C,OAAO;CAErB,MAAM,cAAc,cAClB,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK;EACL,OAAO;GACL;IAAE,IAAI;IAAW,GAAG,KAAK,gBAAgB;GAAE;GAC3C;IACE,kBAAkB;IAClB,WAAW;IACX,SAAS,UAA4C;KACnD,SAAS,KAAK;KAEd,IAAI,WAAW,KAAK,aAAa,WAAW,KAAK;IACnD;GACF;GACA;EACF;CACF,CACF;CAEA,OAAO,aAAa,eAAe,aAAa,aAAa,YAAY,IAAI;AAC/E,CAAC"}