@videojs/react 10.0.0-beta.31 → 10.0.0-beta.32

package/dist/dev/utils/merge-props.js

@@ -1,19 +1,13 @@
 //#region src/utils/merge-props.ts
-/**
-* Check if a key is an event handler key (on* with capital letter).
-*/
+/** Check if a key is an event handler key (on* with capital letter). */
 function isEventHandlerKey(key) {
 	return key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key.charCodeAt(2) >= 65 && key.charCodeAt(2) <= 90;
 }
-/**
-* Check if a key/value pair is an event handler (includes undefined values).
-*/
+/** Check if a key/value pair is an event handler (includes undefined values). */
 function isEventHandler(key, value) {
 	return isEventHandlerKey(key) && (typeof value === "function" || typeof value === "undefined");
 }
-/**
-* Merge two event handlers - external runs first, ours runs second.
-*/
+/** Merge two event handlers - external runs first, ours runs second. */
 function mergeEventHandlers(ours, theirs) {
 	if (!theirs) return ours;
 	if (!ours) return theirs;
@@ -22,16 +16,12 @@ function mergeEventHandlers(ours, theirs) {
 		ours(event);
 	};
 }
-/**
-* Merge two className values - concatenate strings.
-*/
+/** Merge two className values - concatenate strings. */
 function mergeClassNames(ours, theirs) {
 	if (theirs && ours) return `${theirs} ${ours}`;
 	return theirs || ours;
 }
-/**
-* Merge two style objects - theirs overwrites conflicts.
-*/
+/** Merge two style objects - theirs overwrites conflicts. */
 function mergeStyles(ours, theirs) {
 	if (!theirs) return ours;
 	if (!ours) return theirs;
@@ -40,9 +30,7 @@ function mergeStyles(ours, theirs) {
 		...theirs
 	};
 }
-/**
-* Merge a single props object into accumulated result.
-*/
+/** Merge a single props object into accumulated result. */
 function mergeOne(merged, props) {
 	if (!props) return merged;
 	for (const key in props) {
@@ -57,20 +45,22 @@ function mergeOne(merged, props) {
 /**
 * Merge multiple props objects.
 *
-* - Event handlers (on*): chained - external first, ours second
-* - className: concatenated
-* - style: merged objects (external wins conflicts)
-* - other: last one wins
+* - Event handlers (`on*`): chained right to left
+* - `className`: concatenated right to left
+* - `style`: merged with rightmost values winning conflicts
+* - Other props: rightmost value wins
 *
-* @public
 * @example
-* ```ts
-* const merged = mergeProps(
-*   { onClick: ourHandler, className: 'base' },
-*   { onClick: theirHandler, className: 'custom' }
-* );
-* // { onClick: chainedHandler, className: 'custom base' }
-* ```
+*   ```ts
+*   const merged = mergeProps(
+*     { onClick: ourHandler, className: 'base' },
+*     { onClick: theirHandler, className: 'custom' }
+*   );
+*   // { onClick: chainedHandler, className: 'custom base' }
+*   ```;
+*
+* @param propSets - Props objects to merge in order.
+* @public
 */
 function mergeProps(...propSets) {
 	let merged = {};

package/dist/dev/utils/merge-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"merge-props.js","names":[],"sources":["../../../src/utils/merge-props.ts"],"sourcesContent":["import type { ComponentPropsWithRef, CSSProperties, ElementType, SyntheticEvent } from 'react';\n\ntype Props<T extends ElementType = ElementType> = ComponentPropsWithRef<T>;\n\n/**\n * Check if a key is an event handler key (on* with capital letter).\n */\nfunction isEventHandlerKey(key: string): boolean {\n  return (\n    key.charCodeAt(0) === 111 /* o */ &&\n    key.charCodeAt(1) === 110 /* n */ &&\n    key.charCodeAt(2) >= 65 /* A */ &&\n    key.charCodeAt(2) <= 90 /* Z */\n  );\n}\n\n/**\n * Check if a key/value pair is an event handler (includes undefined values).\n */\nfunction isEventHandler(key: string, value: unknown): boolean {\n  return isEventHandlerKey(key) && (typeof value === 'function' || typeof value === 'undefined');\n}\n\n/**\n * Merge two event handlers - external runs first, ours runs second.\n */\nfunction mergeEventHandlers(\n  ours: ((event: SyntheticEvent) => void) | undefined,\n  theirs: ((event: SyntheticEvent) => void) | undefined\n): ((event: SyntheticEvent) => void) | undefined {\n  if (!theirs) return ours;\n  if (!ours) return theirs;\n\n  return (event: SyntheticEvent) => {\n    theirs(event);\n    ours(event);\n  };\n}\n\n/**\n * Merge two className values - concatenate strings.\n */\nfunction mergeClassNames(ours: string | undefined, theirs: string | undefined): string | undefined {\n  if (theirs && ours) return `${theirs} ${ours}`;\n  return theirs || ours;\n}\n\n/**\n * Merge two style objects - theirs overwrites conflicts.\n */\nfunction mergeStyles(ours: CSSProperties | undefined, theirs: CSSProperties | undefined): CSSProperties | undefined {\n  if (!theirs) return ours;\n  if (!ours) return theirs;\n  return { ...ours, ...theirs };\n}\n\n/**\n * Merge a single props object into accumulated result.\n */\nfunction mergeOne<T extends ElementType>(\n  merged: Record<string, unknown>,\n  props: Props<T> | undefined\n): Record<string, unknown> {\n  if (!props) return merged;\n\n  for (const key in props) {\n    const value = props[key as keyof typeof props];\n\n    if (key === 'className') {\n      merged.className = mergeClassNames(merged.className as string | undefined, value as string);\n    } else if (key === 'style') {\n      merged.style = mergeStyles(merged.style as CSSProperties | undefined, value as CSSProperties);\n    } else if (isEventHandler(key, value)) {\n      merged[key] = mergeEventHandlers(\n        merged[key] as ((event: SyntheticEvent) => void) | undefined,\n        value as (event: SyntheticEvent) => void\n      );\n    } else {\n      merged[key] = value;\n    }\n  }\n\n  return merged;\n}\n\n/**\n * Merge multiple props objects.\n *\n * - Event handlers (on*): chained - external first, ours second\n * - className: concatenated\n * - style: merged objects (external wins conflicts)\n * - other: last one wins\n *\n * @public\n * @example\n * ```ts\n * const merged = mergeProps(\n *   { onClick: ourHandler, className: 'base' },\n *   { onClick: theirHandler, className: 'custom' }\n * );\n * // { onClick: chainedHandler, className: 'custom base' }\n * ```\n */\nexport function mergeProps<T extends ElementType>(...propSets: (Props<T> | undefined)[]): Props<T> {\n  let merged: Record<string, unknown> = {};\n\n  for (const props of propSets) {\n    merged = mergeOne(merged, props);\n  }\n\n  return merged as Props<T>;\n}\n"],"mappings":";;;;AAOA,SAAS,kBAAkB,KAAsB;CAC/C,OACE,IAAI,WAAW,CAAC,MAAM,OACtB,IAAI,WAAW,CAAC,MAAM,OACtB,IAAI,WAAW,CAAC,KAAK,MACrB,IAAI,WAAW,CAAC,KAAK;AAEzB;;;;AAKA,SAAS,eAAe,KAAa,OAAyB;CAC5D,OAAO,kBAAkB,GAAG,MAAM,OAAO,UAAU,cAAc,OAAO,UAAU;AACpF;;;;AAKA,SAAS,mBACP,MACA,QAC+C;CAC/C,IAAI,CAAC,QAAQ,OAAO;CACpB,IAAI,CAAC,MAAM,OAAO;CAElB,QAAQ,UAA0B;EAChC,OAAO,KAAK;EACZ,KAAK,KAAK;CACZ;AACF;;;;AAKA,SAAS,gBAAgB,MAA0B,QAAgD;CACjG,IAAI,UAAU,MAAM,OAAO,GAAG,OAAO,GAAG;CACxC,OAAO,UAAU;AACnB;;;;AAKA,SAAS,YAAY,MAAiC,QAA8D;CAClH,IAAI,CAAC,QAAQ,OAAO;CACpB,IAAI,CAAC,MAAM,OAAO;CAClB,OAAO;EAAE,GAAG;EAAM,GAAG;CAAO;AAC9B;;;;AAKA,SAAS,SACP,QACA,OACyB;CACzB,IAAI,CAAC,OAAO,OAAO;CAEnB,KAAK,MAAM,OAAO,OAAO;EACvB,MAAM,QAAQ,MAAM;EAEpB,IAAI,QAAQ,aACV,OAAO,YAAY,gBAAgB,OAAO,WAAiC,KAAe;OACrF,IAAI,QAAQ,SACjB,OAAO,QAAQ,YAAY,OAAO,OAAoC,KAAsB;OACvF,IAAI,eAAe,KAAK,KAAK,GAClC,OAAO,OAAO,mBACZ,OAAO,MACP,KACF;OAEA,OAAO,OAAO;CAElB;CAEA,OAAO;AACT;;;;;;;;;;;;;;;;;;;AAoBA,SAAgB,WAAkC,GAAG,UAA8C;CACjG,IAAI,SAAkC,CAAC;CAEvC,KAAK,MAAM,SAAS,UAClB,SAAS,SAAS,QAAQ,KAAK;CAGjC,OAAO;AACT"}
+{"version":3,"file":"merge-props.js","names":[],"sources":["../../../src/utils/merge-props.ts"],"sourcesContent":["import type { ComponentPropsWithRef, CSSProperties, ElementType, SyntheticEvent } from 'react';\n\ntype Props<T extends ElementType = ElementType> = ComponentPropsWithRef<T>;\n\n/** Check if a key is an event handler key (on* with capital letter). */\nfunction isEventHandlerKey(key: string): boolean {\n  return (\n    key.charCodeAt(0) === 111 /* o */ &&\n    key.charCodeAt(1) === 110 /* n */ &&\n    key.charCodeAt(2) >= 65 /* A */ &&\n    key.charCodeAt(2) <= 90 /* Z */\n  );\n}\n\n/** Check if a key/value pair is an event handler (includes undefined values). */\nfunction isEventHandler(key: string, value: unknown): boolean {\n  return isEventHandlerKey(key) && (typeof value === 'function' || typeof value === 'undefined');\n}\n\n/** Merge two event handlers - external runs first, ours runs second. */\nfunction mergeEventHandlers(\n  ours: ((event: SyntheticEvent) => void) | undefined,\n  theirs: ((event: SyntheticEvent) => void) | undefined\n): ((event: SyntheticEvent) => void) | undefined {\n  if (!theirs) return ours;\n\n  if (!ours) return theirs;\n\n  return (event: SyntheticEvent) => {\n    theirs(event);\n    ours(event);\n  };\n}\n\n/** Merge two className values - concatenate strings. */\nfunction mergeClassNames(ours: string | undefined, theirs: string | undefined): string | undefined {\n  if (theirs && ours) return `${theirs} ${ours}`;\n\n  return theirs || ours;\n}\n\n/** Merge two style objects - theirs overwrites conflicts. */\nfunction mergeStyles(ours: CSSProperties | undefined, theirs: CSSProperties | undefined): CSSProperties | undefined {\n  if (!theirs) return ours;\n\n  if (!ours) return theirs;\n\n  return { ...ours, ...theirs };\n}\n\n/** Merge a single props object into accumulated result. */\nfunction mergeOne<T extends ElementType>(\n  merged: Record<string, unknown>,\n  props: Props<T> | undefined\n): Record<string, unknown> {\n  if (!props) return merged;\n\n  for (const key in props) {\n    const value = props[key as keyof typeof props];\n\n    if (key === 'className') {\n      merged.className = mergeClassNames(merged.className as string | undefined, value as string);\n    } else if (key === 'style') {\n      merged.style = mergeStyles(merged.style as CSSProperties | undefined, value as CSSProperties);\n    } else if (isEventHandler(key, value)) {\n      merged[key] = mergeEventHandlers(\n        merged[key] as ((event: SyntheticEvent) => void) | undefined,\n        value as (event: SyntheticEvent) => void\n      );\n    } else {\n      merged[key] = value;\n    }\n  }\n\n  return merged;\n}\n\n/**\n * Merge multiple props objects.\n *\n * - Event handlers (`on*`): chained right to left\n * - `className`: concatenated right to left\n * - `style`: merged with rightmost values winning conflicts\n * - Other props: rightmost value wins\n *\n * @example\n *   ```ts\n *   const merged = mergeProps(\n *     { onClick: ourHandler, className: 'base' },\n *     { onClick: theirHandler, className: 'custom' }\n *   );\n *   // { onClick: chainedHandler, className: 'custom base' }\n *   ```;\n *\n * @param propSets - Props objects to merge in order.\n * @public\n */\nexport function mergeProps<T extends ElementType>(...propSets: (Props<T> | undefined)[]): Props<T> {\n  let merged: Record<string, unknown> = {};\n\n  for (const props of propSets) {\n    merged = mergeOne(merged, props);\n  }\n\n  return merged as Props<T>;\n}\n"],"mappings":";;AAKA,SAAS,kBAAkB,KAAsB;CAC/C,OACE,IAAI,WAAW,CAAC,MAAM,OACtB,IAAI,WAAW,CAAC,MAAM,OACtB,IAAI,WAAW,CAAC,KAAK,MACrB,IAAI,WAAW,CAAC,KAAK;AAEzB;;AAGA,SAAS,eAAe,KAAa,OAAyB;CAC5D,OAAO,kBAAkB,GAAG,MAAM,OAAO,UAAU,cAAc,OAAO,UAAU;AACpF;;AAGA,SAAS,mBACP,MACA,QAC+C;CAC/C,IAAI,CAAC,QAAQ,OAAO;CAEpB,IAAI,CAAC,MAAM,OAAO;CAElB,QAAQ,UAA0B;EAChC,OAAO,KAAK;EACZ,KAAK,KAAK;CACZ;AACF;;AAGA,SAAS,gBAAgB,MAA0B,QAAgD;CACjG,IAAI,UAAU,MAAM,OAAO,GAAG,OAAO,GAAG;CAExC,OAAO,UAAU;AACnB;;AAGA,SAAS,YAAY,MAAiC,QAA8D;CAClH,IAAI,CAAC,QAAQ,OAAO;CAEpB,IAAI,CAAC,MAAM,OAAO;CAElB,OAAO;EAAE,GAAG;EAAM,GAAG;CAAO;AAC9B;;AAGA,SAAS,SACP,QACA,OACyB;CACzB,IAAI,CAAC,OAAO,OAAO;CAEnB,KAAK,MAAM,OAAO,OAAO;EACvB,MAAM,QAAQ,MAAM;EAEpB,IAAI,QAAQ,aACV,OAAO,YAAY,gBAAgB,OAAO,WAAiC,KAAe;OACrF,IAAI,QAAQ,SACjB,OAAO,QAAQ,YAAY,OAAO,OAAoC,KAAsB;OACvF,IAAI,eAAe,KAAK,KAAK,GAClC,OAAO,OAAO,mBACZ,OAAO,MACP,KACF;OAEA,OAAO,OAAO;CAElB;CAEA,OAAO;AACT;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,WAAkC,GAAG,UAA8C;CACjG,IAAI,SAAkC,CAAC;CAEvC,KAAK,MAAM,SAAS,UAClB,SAAS,SAAS,QAAQ,KAAK;CAGjC,OAAO;AACT"}

package/dist/dev/utils/types.d.ts

@@ -11,10 +11,8 @@ type RenderProp<State> = ReactElement | RenderFunction<HTMLProps, State>;
 /**
  * Standard props for UI components.
  *
- * Provides consistent API across all UI components:
- * - `className` as string or function of state
- * - `style` as object or function of state
- * - `render` prop for element customization
+ * Provides consistent API across all UI components: - `className` as string or function of state - `style` as object or
+ * function of state - `render` prop for element customization
  */
 type UIComponentProps<TagName extends keyof React.JSX.IntrinsicElements, State> = Omit<React.JSX.IntrinsicElements[TagName], 'className' | 'style'> & {
   /** Class name or function returning class name from state. */

package/dist/dev/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/utils/types.ts"],"mappings":";;;KAGY,UAAU,WAAW,MAAM,eAAe;EACpD,MAAM,MAAM,IAAI;;;KAIN,eAAe,OAAO,UAAU,OAAO,OAAO,OAAO,UAAU;;KAG/D,WAAW,SAAS,eAAe,eAAe,WAAW;;;;;;;;;KAU7D,iBAAiB,sBAAsB,MAAM,IAAI,mBAAmB,SAAS,KACvF,MAAM,IAAI,kBAAkB;;EAI5B,uBAAuB,OAAO;;EAE9B,QAAQ,kBAAkB,OAAO,UAAU;;EAE3C,SAAS,WAAW"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/utils/types.ts"],"mappings":";;;KAGY,UAAU,WAAW,MAAM,eAAe;EACpD,MAAM,MAAM,IAAI;;;KAIN,eAAe,OAAO,UAAU,OAAO,OAAO,OAAO,UAAU;;KAG/D,WAAW,SAAS,eAAe,eAAe,WAAW;;;;;;;KAQ7D,iBAAiB,sBAAsB,MAAM,IAAI,mBAAmB,SAAS,KACvF,MAAM,IAAI,kBAAkB;;EAI5B,uBAAuB,OAAO;;EAE9B,QAAQ,kBAAkB,OAAO,UAAU;;EAE3C,SAAS,WAAW"}

package/dist/dev/utils/use-attach-iframe.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-attach-iframe.js","names":[],"sources":["../../../src/utils/use-attach-iframe.ts"],"sourcesContent":["import type { MediaEngineHost } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\nexport function useAttachIframe<T extends HTMLIFrameElement>(media: MediaEngineHost): RefCallback<T> {\n  return useCallback(\n    (element: T | null) => {\n      if (element) media.attach?.(element);\n      else media.detach?.();\n      return () => media.detach?.();\n    },\n    [media]\n  );\n}\n"],"mappings":";;AAIA,SAAgB,gBAA6C,OAAwC;CACnG,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;EACpB,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}
+{"version":3,"file":"use-attach-iframe.js","names":[],"sources":["../../../src/utils/use-attach-iframe.ts"],"sourcesContent":["import type { MediaEngineHost } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\nexport function useAttachIframe<T extends HTMLIFrameElement>(media: MediaEngineHost): RefCallback<T> {\n  return useCallback(\n    (element: T | null) => {\n      if (element) media.attach?.(element);\n      else media.detach?.();\n\n      return () => media.detach?.();\n    },\n    [media]\n  );\n}\n"],"mappings":";;AAIA,SAAgB,gBAA6C,OAAwC;CACnG,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;EAEpB,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}

package/dist/dev/utils/use-attach-media.d.ts

@@ -1,6 +1,11 @@
 import { MediaEngineHost } from "@videojs/media";
 import { RefCallback } from "react";
 //#region src/utils/use-attach-media.d.ts
+/**
+ * Returns a callback ref that attaches an HTML media element to a media engine host and detaches it during cleanup.
+ *
+ * @param media - Media engine host to attach and detach.
+ */
 declare function useAttachMedia<T extends HTMLMediaElement>(media: MediaEngineHost): RefCallback<T>;
 //#endregion
 export { useAttachMedia };

package/dist/dev/utils/use-attach-media.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-attach-media.d.ts","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"mappings":";;;iBAIgB,eAAe,UAAU,kBAAkB,OAAO,kBAAkB,YAAY"}
+{"version":3,"file":"use-attach-media.d.ts","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"mappings":";;;;;;;;iBASgB,eAAe,UAAU,kBAAkB,OAAO,kBAAkB,YAAY"}

package/dist/dev/utils/use-attach-media.js

@@ -1,5 +1,10 @@
 import { useCallback } from "react";
 //#region src/utils/use-attach-media.ts
+/**
+* Returns a callback ref that attaches an HTML media element to a media engine host and detaches it during cleanup.
+*
+* @param media - Media engine host to attach and detach.
+*/
 function useAttachMedia(media) {
 	return useCallback((element) => {
 		if (element) media.attach?.(element);

package/dist/dev/utils/use-attach-media.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-attach-media.js","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["import type { MediaEngineHost } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\nexport function useAttachMedia<T extends HTMLMediaElement>(media: MediaEngineHost): RefCallback<T> {\n  return useCallback(\n    (element: T | null) => {\n      if (element) media.attach?.(element);\n      else media.detach?.();\n      return () => media.detach?.();\n    },\n    [media]\n  );\n}\n"],"mappings":";;AAIA,SAAgB,eAA2C,OAAwC;CACjG,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;EACpB,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}
+{"version":3,"file":"use-attach-media.js","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["import type { MediaEngineHost } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\n/**\n * Returns a callback ref that attaches an HTML media element to a media engine host and detaches it during cleanup.\n *\n * @param media - Media engine host to attach and detach.\n */\nexport function useAttachMedia<T extends HTMLMediaElement>(media: MediaEngineHost): RefCallback<T> {\n  return useCallback(\n    (element: T | null) => {\n      if (element) media.attach?.(element);\n      else media.detach?.();\n\n      return () => media.detach?.();\n    },\n    [media]\n  );\n}\n"],"mappings":";;;;;;;AASA,SAAgB,eAA2C,OAAwC;CACjG,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;EAEpB,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}

package/dist/dev/utils/use-composed-refs.d.ts

@@ -5,10 +5,10 @@ type OptionalRef<T> = Ref<T> | undefined;
  * Compose multiple refs into a single callback ref.
  *
  * @example
- * ```tsx
- * const composedRef = composeRefs(ref1, ref2, ref3);
- * return <div ref={composedRef} />;
- * ```
+ *   ```tsx
+ *   const composedRef = composeRefs(ref1, ref2, ref3);
+ *   return <div ref={composedRef} />;
+ *   ```;
  */
 declare function composeRefs<T>(...refs: (OptionalRef<T> | OptionalRef<T>[])[]): RefCallback<T>;
 /**
@@ -17,10 +17,12 @@ declare function composeRefs<T>(...refs: (OptionalRef<T> | OptionalRef<T>[])[]):
  * Memoized for stable reference.
  *
  * @example
- * ```tsx
- * const composedRef = useComposedRefs(forwardedRef, localRef);
- * return <div ref={composedRef} />;
- * ```
+ *   ```tsx
+ *   const composedRef = useComposedRefs(forwardedRef, localRef);
+ *   return <div ref={composedRef} />;
+ *   ```;
+ *
+ * @param refs - Refs to update from the returned callback.
  */
 declare function useComposedRefs<T>(...refs: OptionalRef<T>[]): RefCallback<T>;
 //#endregion

package/dist/dev/utils/use-composed-refs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-composed-refs.d.ts","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"mappings":";;KAKK,YAAY,KAAK,IAAI;;;;;;;;;;iBA0BV,YAAY,MAAM,OAAO,YAAY,KAAK,YAAY,UAAU,YAAY;;;;;;;;;;;;iBAkC5E,gBAAgB,MAAM,MAAM,YAAY,OAAO,YAAY"}
+{"version":3,"file":"use-composed-refs.d.ts","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"mappings":";;KAIK,YAAY,KAAK,IAAI;;;;;;;;;;iBA0BV,YAAY,MAAM,OAAO,YAAY,KAAK,YAAY,UAAU,YAAY;;;;;;;;;;;;;;iBAqC5E,gBAAgB,MAAM,MAAM,YAAY,OAAO,YAAY"}

package/dist/dev/utils/use-composed-refs.js

@@ -16,10 +16,10 @@ function setRef(ref, value) {
 * Compose multiple refs into a single callback ref.
 *
 * @example
-* ```tsx
-* const composedRef = composeRefs(ref1, ref2, ref3);
-* return <div ref={composedRef} />;
-* ```
+*   ```tsx
+*   const composedRef = composeRefs(ref1, ref2, ref3);
+*   return <div ref={composedRef} />;
+*   ```;
 */
 function composeRefs(...refs) {
 	const flatRefs = refs.flat();
@@ -40,10 +40,12 @@ function composeRefs(...refs) {
 * Memoized for stable reference.
 *
 * @example
-* ```tsx
-* const composedRef = useComposedRefs(forwardedRef, localRef);
-* return <div ref={composedRef} />;
-* ```
+*   ```tsx
+*   const composedRef = useComposedRefs(forwardedRef, localRef);
+*   return <div ref={composedRef} />;
+*   ```;
+*
+* @param refs - Refs to update from the returned callback.
 */
 function useComposedRefs(...refs) {
 	return useCallback(composeRefs(...refs), [...refs]);

package/dist/dev/utils/use-composed-refs.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-composed-refs.js","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"sourcesContent":["import { isFunction } from '@videojs/utils/predicate';\nimport type { Ref, RefCallback } from 'react';\n\nimport { useCallback } from 'react';\n\ntype OptionalRef<T> = Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value.\n *\n * Handles both callback refs and RefObject(s).\n *\n * @returns Cleanup function if the ref callback returned one (React 19+)\n */\nfunction setRef<T>(ref: OptionalRef<T>, value: T): (() => void) | void | undefined {\n  if (isFunction(ref)) {\n    return ref(value);\n  } else if (ref !== null && ref !== undefined) {\n    ref.current = value;\n  }\n}\n\n/**\n * Compose multiple refs into a single callback ref.\n *\n * @example\n * ```tsx\n * const composedRef = composeRefs(ref1, ref2, ref3);\n * return <div ref={composedRef} />;\n * ```\n */\nexport function composeRefs<T>(...refs: (OptionalRef<T> | OptionalRef<T>[])[]): RefCallback<T> {\n  const flatRefs = refs.flat();\n\n  return (node): (() => void) | void => {\n    const cleanups = flatRefs.map((ref) => setRef(ref, node));\n\n    // Only return cleanup if any refs returned one (React 19+).\n    // React 18 handles cleanup by calling the ref callback with null.\n    if (cleanups.some(isFunction)) {\n      return () => {\n        for (let i = 0; i < cleanups.length; i++) {\n          const cleanup = cleanups[i];\n          if (isFunction(cleanup)) {\n            cleanup();\n          } else {\n            setRef(flatRefs[i], null);\n          }\n        }\n      };\n    }\n  };\n}\n\n/**\n * Hook that composes multiple refs into a single callback ref.\n *\n * Memoized for stable reference.\n *\n * @example\n * ```tsx\n * const composedRef = useComposedRefs(forwardedRef, localRef);\n * return <div ref={composedRef} />;\n * ```\n */\nexport function useComposedRefs<T>(...refs: OptionalRef<T>[]): RefCallback<T> {\n  return useCallback(composeRefs(...refs), [...refs]);\n}\n"],"mappings":";;;;;;;;;;AAcA,SAAS,OAAU,KAAqB,OAA2C;CACjF,IAAI,WAAW,GAAG,GAChB,OAAO,IAAI,KAAK;MACX,IAAI,QAAQ,QAAQ,QAAQ,KAAA,GACjC,IAAI,UAAU;AAElB;;;;;;;;;;AAWA,SAAgB,YAAe,GAAG,MAA6D;CAC7F,MAAM,WAAW,KAAK,KAAK;CAE3B,QAAQ,SAA8B;EACpC,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO,KAAK,IAAI,CAAC;EAIxD,IAAI,SAAS,KAAK,UAAU,GAC1B,aAAa;GACX,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;IACzB,IAAI,WAAW,OAAO,GACpB,QAAQ;SAER,OAAO,SAAS,IAAI,IAAI;GAE5B;EACF;CAEJ;AACF;;;;;;;;;;;;AAaA,SAAgB,gBAAmB,GAAG,MAAwC;CAC5E,OAAO,YAAY,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC;AACpD"}
+{"version":3,"file":"use-composed-refs.js","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"sourcesContent":["import { isFunction } from '@videojs/utils/predicate';\nimport type { Ref, RefCallback } from 'react';\nimport { useCallback } from 'react';\n\ntype OptionalRef<T> = Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value.\n *\n * Handles both callback refs and RefObject(s).\n *\n * @returns Cleanup function if the ref callback returned one (React 19+)\n */\nfunction setRef<T>(ref: OptionalRef<T>, value: T): (() => void) | void | undefined {\n  if (isFunction(ref)) {\n    return ref(value);\n  } else if (ref !== null && ref !== undefined) {\n    ref.current = value;\n  }\n}\n\n/**\n * Compose multiple refs into a single callback ref.\n *\n * @example\n *   ```tsx\n *   const composedRef = composeRefs(ref1, ref2, ref3);\n *   return <div ref={composedRef} />;\n *   ```;\n */\nexport function composeRefs<T>(...refs: (OptionalRef<T> | OptionalRef<T>[])[]): RefCallback<T> {\n  const flatRefs = refs.flat();\n\n  return (node): (() => void) | void => {\n    const cleanups = flatRefs.map((ref) => setRef(ref, node));\n\n    // Only return cleanup if any refs returned one (React 19+).\n    // React 18 handles cleanup by calling the ref callback with null.\n    if (cleanups.some(isFunction)) {\n      return () => {\n        for (let i = 0; i < cleanups.length; i++) {\n          const cleanup = cleanups[i];\n\n          if (isFunction(cleanup)) {\n            cleanup();\n          } else {\n            setRef(flatRefs[i], null);\n          }\n        }\n      };\n    }\n  };\n}\n\n/**\n * Hook that composes multiple refs into a single callback ref.\n *\n * Memoized for stable reference.\n *\n * @example\n *   ```tsx\n *   const composedRef = useComposedRefs(forwardedRef, localRef);\n *   return <div ref={composedRef} />;\n *   ```;\n *\n * @param refs - Refs to update from the returned callback.\n */\nexport function useComposedRefs<T>(...refs: OptionalRef<T>[]): RefCallback<T> {\n  return useCallback(composeRefs(...refs), [...refs]);\n}\n"],"mappings":";;;;;;;;;;AAaA,SAAS,OAAU,KAAqB,OAA2C;CACjF,IAAI,WAAW,GAAG,GAChB,OAAO,IAAI,KAAK;MACX,IAAI,QAAQ,QAAQ,QAAQ,KAAA,GACjC,IAAI,UAAU;AAElB;;;;;;;;;;AAWA,SAAgB,YAAe,GAAG,MAA6D;CAC7F,MAAM,WAAW,KAAK,KAAK;CAE3B,QAAQ,SAA8B;EACpC,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO,KAAK,IAAI,CAAC;EAIxD,IAAI,SAAS,KAAK,UAAU,GAC1B,aAAa;GACX,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;IAEzB,IAAI,WAAW,OAAO,GACpB,QAAQ;SAER,OAAO,SAAS,IAAI,IAAI;GAE5B;EACF;CAEJ;AACF;;;;;;;;;;;;;;AAeA,SAAgB,gBAAmB,GAAG,MAAwC;CAC5E,OAAO,YAAY,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC;AACpD"}

package/dist/dev/utils/use-destroy.d.ts

@@ -3,18 +3,16 @@ interface Destroyable {
   destroy(): void;
 }
 /**
- * Destroy an instance on unmount, deferring destruction to survive React
- * StrictMode's simulated unmount/re-mount cycle.
+ * Destroy an instance on unmount, deferring destruction to survive React StrictMode's simulated unmount/re-mount cycle.
  *
- * StrictMode runs effects, then immediately runs cleanup, then re-runs
- * effects — all synchronously. By deferring `destroy()` to a macrotask,
- * the re-mount effect can cancel it before it fires.
+ * StrictMode runs effects, then immediately runs cleanup, then re-runs effects — all synchronously. By deferring
+ * `destroy()` to a macrotask, the re-mount effect can cancel it before it fires.
  *
  * @param instance - Object with a `destroy()` method.
- * @param setup - Optional setup called on first mount. Skipped on StrictMode
- *   re-mount since the previous setup was never torn down.
- * @param teardown - Optional teardown called right before `destroy()` on real
- *   unmount. Skipped on StrictMode simulated unmount.
+ * @param setup - Optional setup called on first mount. Skipped on StrictMode re-mount since the previous setup was
+ *   never torn down.
+ * @param teardown - Optional teardown called right before `destroy()` on real unmount. Skipped on StrictMode simulated
+ *   unmount.
  */
 declare function useDestroy(instance: Destroyable, setup?: () => void, teardown?: () => void): void;
 //#endregion

package/dist/dev/utils/use-destroy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-destroy.d.ts","names":[],"sources":["../../../src/utils/use-destroy.ts"],"mappings":";UAIU;EACR;;;;;;;;;;;;;;;;iBAiBc,WAAW,UAAU,aAAa,oBAAoB"}
+{"version":3,"file":"use-destroy.d.ts","names":[],"sources":["../../../src/utils/use-destroy.ts"],"mappings":";UAIU;EACR;;;;;;;;;;;;;;iBAec,WAAW,UAAU,aAAa,oBAAoB"}

package/dist/dev/utils/use-destroy.js

@@ -2,18 +2,16 @@ import { useLatestRef } from "./use-latest-ref.js";
 import { useEffect, useRef } from "react";
 //#region src/utils/use-destroy.ts
 /**
-* Destroy an instance on unmount, deferring destruction to survive React
-* StrictMode's simulated unmount/re-mount cycle.
+* Destroy an instance on unmount, deferring destruction to survive React StrictMode's simulated unmount/re-mount cycle.
 *
-* StrictMode runs effects, then immediately runs cleanup, then re-runs
-* effects — all synchronously. By deferring `destroy()` to a macrotask,
-* the re-mount effect can cancel it before it fires.
+* StrictMode runs effects, then immediately runs cleanup, then re-runs effects — all synchronously. By deferring
+* `destroy()` to a macrotask, the re-mount effect can cancel it before it fires.
 *
 * @param instance - Object with a `destroy()` method.
-* @param setup - Optional setup called on first mount. Skipped on StrictMode
-*   re-mount since the previous setup was never torn down.
-* @param teardown - Optional teardown called right before `destroy()` on real
-*   unmount. Skipped on StrictMode simulated unmount.
+* @param setup - Optional setup called on first mount. Skipped on StrictMode re-mount since the previous setup was
+*   never torn down.
+* @param teardown - Optional teardown called right before `destroy()` on real unmount. Skipped on StrictMode simulated
+*   unmount.
 */
 function useDestroy(instance, setup, teardown) {
 	const pendingRef = useRef(null);

package/dist/dev/utils/use-destroy.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-destroy.js","names":[],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport { useLatestRef } from './use-latest-ref';\n\ninterface Destroyable {\n  destroy(): void;\n}\n\n/**\n * Destroy an instance on unmount, deferring destruction to survive React\n * StrictMode's simulated unmount/re-mount cycle.\n *\n * StrictMode runs effects, then immediately runs cleanup, then re-runs\n * effects — all synchronously. By deferring `destroy()` to a macrotask,\n * the re-mount effect can cancel it before it fires.\n *\n * @param instance - Object with a `destroy()` method.\n * @param setup - Optional setup called on first mount. Skipped on StrictMode\n *   re-mount since the previous setup was never torn down.\n * @param teardown - Optional teardown called right before `destroy()` on real\n *   unmount. Skipped on StrictMode simulated unmount.\n */\nexport function useDestroy(instance: Destroyable, setup?: () => void, teardown?: () => void): void {\n  const pendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const setupRef = useLatestRef(setup);\n  const teardownRef = useLatestRef(teardown);\n\n  useEffect(() => {\n    if (pendingRef.current !== null) {\n      clearTimeout(pendingRef.current);\n      pendingRef.current = null;\n    } else {\n      setupRef.current?.();\n    }\n\n    return () => {\n      pendingRef.current = setTimeout(() => {\n        teardownRef.current?.();\n        instance.destroy();\n      }, 0);\n    };\n  }, [instance]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,SAAgB,WAAW,UAAuB,OAAoB,UAA6B;CACjG,MAAM,aAAa,OAA6C,IAAI;CACpE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,cAAc,aAAa,QAAQ;CAEzC,gBAAgB;EACd,IAAI,WAAW,YAAY,MAAM;GAC/B,aAAa,WAAW,OAAO;GAC/B,WAAW,UAAU;EACvB,OACE,SAAS,UAAU;EAGrB,aAAa;GACX,WAAW,UAAU,iBAAiB;IACpC,YAAY,UAAU;IACtB,SAAS,QAAQ;GACnB,GAAG,CAAC;EACN;CACF,GAAG,CAAC,QAAQ,CAAC;AACf"}
+{"version":3,"file":"use-destroy.js","names":[],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport { useLatestRef } from './use-latest-ref';\n\ninterface Destroyable {\n  destroy(): void;\n}\n\n/**\n * Destroy an instance on unmount, deferring destruction to survive React StrictMode's simulated unmount/re-mount cycle.\n *\n * StrictMode runs effects, then immediately runs cleanup, then re-runs effects — all synchronously. By deferring\n * `destroy()` to a macrotask, the re-mount effect can cancel it before it fires.\n *\n * @param instance - Object with a `destroy()` method.\n * @param setup - Optional setup called on first mount. Skipped on StrictMode re-mount since the previous setup was\n *   never torn down.\n * @param teardown - Optional teardown called right before `destroy()` on real unmount. Skipped on StrictMode simulated\n *   unmount.\n */\nexport function useDestroy(instance: Destroyable, setup?: () => void, teardown?: () => void): void {\n  const pendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const setupRef = useLatestRef(setup);\n  const teardownRef = useLatestRef(teardown);\n\n  useEffect(() => {\n    if (pendingRef.current !== null) {\n      clearTimeout(pendingRef.current);\n      pendingRef.current = null;\n    } else {\n      setupRef.current?.();\n    }\n\n    return () => {\n      pendingRef.current = setTimeout(() => {\n        teardownRef.current?.();\n        instance.destroy();\n      }, 0);\n    };\n  }, [instance]);\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,SAAgB,WAAW,UAAuB,OAAoB,UAA6B;CACjG,MAAM,aAAa,OAA6C,IAAI;CACpE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,cAAc,aAAa,QAAQ;CAEzC,gBAAgB;EACd,IAAI,WAAW,YAAY,MAAM;GAC/B,aAAa,WAAW,OAAO;GAC/B,WAAW,UAAU;EACvB,OACE,SAAS,UAAU;EAGrB,aAAa;GACX,WAAW,UAAU,iBAAiB;IACpC,YAAY,UAAU;IACtB,SAAS,QAAQ;GACnB,GAAG,CAAC;EACN;CACF,GAAG,CAAC,QAAQ,CAAC;AACf"}

package/dist/dev/utils/use-force-render.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-force-render.js","names":[],"sources":["../../../src/utils/use-force-render.ts"],"sourcesContent":["import { useReducer } from 'react';\n\nexport function useForceRender() {\n  const [, forceRender] = useReducer((c: number) => c + 1, 0);\n  return forceRender;\n}\n\nexport namespace useForceRender {\n  export type Result = () => void;\n}\n"],"mappings":";;AAEA,SAAgB,iBAAiB;CAC/B,MAAM,GAAG,eAAe,YAAY,MAAc,IAAI,GAAG,CAAC;CAC1D,OAAO;AACT"}
+{"version":3,"file":"use-force-render.js","names":[],"sources":["../../../src/utils/use-force-render.ts"],"sourcesContent":["import { useReducer } from 'react';\n\nexport function useForceRender() {\n  const [, forceRender] = useReducer((c: number) => c + 1, 0);\n\n  return forceRender;\n}\n\nexport namespace useForceRender {\n  export type Result = () => void;\n}\n"],"mappings":";;AAEA,SAAgB,iBAAiB;CAC/B,MAAM,GAAG,eAAe,YAAY,MAAc,IAAI,GAAG,CAAC;CAE1D,OAAO;AACT"}

package/dist/dev/utils/use-latest-ref.d.ts

@@ -2,8 +2,10 @@
 /**
  * Keep a ref that always points to the latest value.
  *
- * Useful for capturing callbacks or derived values inside closures
- * that are created once (e.g. factory callbacks) without stale reads.
+ * Useful for capturing callbacks or derived values inside closures that are created once (e.g. factory callbacks)
+ * without stale reads.
+ *
+ * @param value - Value the ref should expose after each render.
  */
 declare function useLatestRef<Value>(value: Value): Readonly<{
   current: Value;

package/dist/dev/utils/use-latest-ref.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-latest-ref.d.ts","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"mappings":";;;;;;;iBAQgB,aAAa,OAAO,OAAO,QAAQ;EAAW,SAAS;;kBAMtD;OACH,OAAO,SAAS;IAAW,SAAS"}
+{"version":3,"file":"use-latest-ref.d.ts","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"mappings":";;;;;;;;;iBAUgB,aAAa,OAAO,OAAO,QAAQ;EAAW,SAAS;;kBAOtD;OACH,OAAO,SAAS;IAAW,SAAS"}

package/dist/dev/utils/use-latest-ref.js

@@ -3,8 +3,10 @@ import { useRef } from "react";
 /**
 * Keep a ref that always points to the latest value.
 *
-* Useful for capturing callbacks or derived values inside closures
-* that are created once (e.g. factory callbacks) without stale reads.
+* Useful for capturing callbacks or derived values inside closures that are created once (e.g. factory callbacks)
+* without stale reads.
+*
+* @param value - Value the ref should expose after each render.
 */
 function useLatestRef(value) {
 	const ref = useRef(value);

package/dist/dev/utils/use-latest-ref.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-latest-ref.js","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"sourcesContent":["import { useRef } from 'react';\n\n/**\n * Keep a ref that always points to the latest value.\n *\n * Useful for capturing callbacks or derived values inside closures\n * that are created once (e.g. factory callbacks) without stale reads.\n */\nexport function useLatestRef<Value>(value: Value): Readonly<{ current: Value }> {\n  const ref = useRef(value);\n  ref.current = value;\n  return ref;\n}\n\nexport namespace useLatestRef {\n  export type Result<Value> = Readonly<{ current: Value }>;\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,aAAoB,OAA4C;CAC9E,MAAM,MAAM,OAAO,KAAK;CACxB,IAAI,UAAU;CACd,OAAO;AACT"}
+{"version":3,"file":"use-latest-ref.js","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"sourcesContent":["import { useRef } from 'react';\n\n/**\n * Keep a ref that always points to the latest value.\n *\n * Useful for capturing callbacks or derived values inside closures that are created once (e.g. factory callbacks)\n * without stale reads.\n *\n * @param value - Value the ref should expose after each render.\n */\nexport function useLatestRef<Value>(value: Value): Readonly<{ current: Value }> {\n  const ref = useRef(value);\n\n  ref.current = value;\n  return ref;\n}\n\nexport namespace useLatestRef {\n  export type Result<Value> = Readonly<{ current: Value }>;\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,aAAoB,OAA4C;CAC9E,MAAM,MAAM,OAAO,KAAK;CAExB,IAAI,UAAU;CACd,OAAO;AACT"}

package/dist/dev/utils/use-media-component.d.ts

@@ -1,13 +1,14 @@
 import { MediaComponent } from "@videojs/media/dom/media-host";
 //#region src/utils/use-media-component.d.ts
 /**
- * Create a media component (e.g. `GoogleCast`, `MuxData`) and register it
- * with the media provided by the surrounding player context.
+ * Create a media component (e.g. `GoogleCast`, `MuxData`) and register it with the media provided by the surrounding
+ * player context.
  *
- * Instantiates the component class once, registers it when a media host is
- * available, follows the media when it changes, and destroys the component
- * on unmount. Media that is not a media host (e.g. a plain `<video>`
- * element) cannot carry media components and is ignored.
+ * Instantiates the component class once, registers it when a media host is available, follows the media when it
+ * changes, and destroys the component on unmount. Media that is not a media host (e.g. a plain `<video>` element)
+ * cannot carry media components and is ignored.
+ *
+ * @param ComponentClass - Media component class to instantiate and register.
  */
 declare function useMediaComponent<Component extends MediaComponent & {
   destroy(): void;

package/dist/dev/utils/use-media-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-media-component.d.ts","names":[],"sources":["../../../src/utils/use-media-component.ts"],"mappings":";;;;;;;;;;;iBAgBgB,kBAAkB,kBAAkB;EAAmB;GACrE,0BAA0B,YACzB"}
+{"version":3,"file":"use-media-component.d.ts","names":[],"sources":["../../../src/utils/use-media-component.ts"],"mappings":";;;;;;;;;;;;iBAiBgB,kBAAkB,kBAAkB;EAAmB;GACrE,0BAA0B,YACzB"}

package/dist/dev/utils/use-media-component.js

@@ -4,13 +4,14 @@ import { useEffect, useState } from "react";
 import { HTMLMediaElementHost, addMediaComponent } from "@videojs/media/dom/media-host";
 //#region src/utils/use-media-component.ts
 /**
-* Create a media component (e.g. `GoogleCast`, `MuxData`) and register it
-* with the media provided by the surrounding player context.
+* Create a media component (e.g. `GoogleCast`, `MuxData`) and register it with the media provided by the surrounding
+* player context.
 *
-* Instantiates the component class once, registers it when a media host is
-* available, follows the media when it changes, and destroys the component
-* on unmount. Media that is not a media host (e.g. a plain `<video>`
-* element) cannot carry media components and is ignored.
+* Instantiates the component class once, registers it when a media host is available, follows the media when it
+* changes, and destroys the component on unmount. Media that is not a media host (e.g. a plain `<video>` element)
+* cannot carry media components and is ignored.
+*
+* @param ComponentClass - Media component class to instantiate and register.
 */
 function useMediaComponent(ComponentClass) {
 	const media = useMedia();

package/dist/dev/utils/use-media-component.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-media-component.js","names":[],"sources":["../../../src/utils/use-media-component.ts"],"sourcesContent":["import type { HTMLMediaTargetLike, MediaComponent } from '@videojs/media/dom/media-host';\nimport { addMediaComponent, HTMLMediaElementHost } from '@videojs/media/dom/media-host';\nimport { useEffect, useState } from 'react';\n\nimport { useMedia } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create a media component (e.g. `GoogleCast`, `MuxData`) and register it\n * with the media provided by the surrounding player context.\n *\n * Instantiates the component class once, registers it when a media host is\n * available, follows the media when it changes, and destroys the component\n * on unmount. Media that is not a media host (e.g. a plain `<video>`\n * element) cannot carry media components and is ignored.\n */\nexport function useMediaComponent<Component extends MediaComponent & { destroy(): void }>(\n  ComponentClass: new () => Component\n): Component {\n  const media = useMedia();\n  const [component] = useState(() => new ComponentClass());\n\n  useDestroy(component);\n\n  useEffect(() => {\n    if (!(media instanceof HTMLMediaElementHost)) return;\n    return addMediaComponent(media as HTMLMediaElementHost<HTMLMediaTargetLike, any>, component);\n  }, [media, component]);\n\n  return component;\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,SAAgB,kBACd,gBACW;CACX,MAAM,QAAQ,SAAS;CACvB,MAAM,CAAC,aAAa,eAAe,IAAI,eAAe,CAAC;CAEvD,WAAW,SAAS;CAEpB,gBAAgB;EACd,IAAI,EAAE,iBAAiB,uBAAuB;EAC9C,OAAO,kBAAkB,OAAyD,SAAS;CAC7F,GAAG,CAAC,OAAO,SAAS,CAAC;CAErB,OAAO;AACT"}
+{"version":3,"file":"use-media-component.js","names":[],"sources":["../../../src/utils/use-media-component.ts"],"sourcesContent":["import type { HTMLMediaTargetLike, MediaComponent } from '@videojs/media/dom/media-host';\nimport { addMediaComponent, HTMLMediaElementHost } from '@videojs/media/dom/media-host';\nimport { useEffect, useState } from 'react';\n\nimport { useMedia } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create a media component (e.g. `GoogleCast`, `MuxData`) and register it with the media provided by the surrounding\n * player context.\n *\n * Instantiates the component class once, registers it when a media host is available, follows the media when it\n * changes, and destroys the component on unmount. Media that is not a media host (e.g. a plain `<video>` element)\n * cannot carry media components and is ignored.\n *\n * @param ComponentClass - Media component class to instantiate and register.\n */\nexport function useMediaComponent<Component extends MediaComponent & { destroy(): void }>(\n  ComponentClass: new () => Component\n): Component {\n  const media = useMedia();\n  const [component] = useState(() => new ComponentClass());\n\n  useDestroy(component);\n\n  useEffect(() => {\n    if (!(media instanceof HTMLMediaElementHost)) return;\n\n    return addMediaComponent(media as HTMLMediaElementHost<HTMLMediaTargetLike, any>, component);\n  }, [media, component]);\n\n  return component;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,SAAgB,kBACd,gBACW;CACX,MAAM,QAAQ,SAAS;CACvB,MAAM,CAAC,aAAa,eAAe,IAAI,eAAe,CAAC;CAEvD,WAAW,SAAS;CAEpB,gBAAgB;EACd,IAAI,EAAE,iBAAiB,uBAAuB;EAE9C,OAAO,kBAAkB,OAAyD,SAAS;CAC7F,GAAG,CAAC,OAAO,SAAS,CAAC;CAErB,OAAO;AACT"}

package/dist/dev/utils/use-media-instance.d.ts

@@ -3,14 +3,15 @@ import { Media } from "@videojs/media";
 /**
  * Create and manage a media instance lifecycle within a player context.
  *
- * Instantiates the media class once, attaches it to the player on mount,
- * and safely detaches on unmount using a functional updater to avoid race
- * conditions when swapping media components (e.g. DashVideo → HlsJsVideo).
+ * Instantiates the media class once, attaches it to the player on mount, and safely detaches on unmount using a
+ * functional updater to avoid race conditions when swapping media components (e.g. DashVideo → HlsJsVideo).
  *
- * An optional `setup` callback runs once on mount — e.g. to add media
- * components via `addMediaComponent`. Components registered there are destroyed
- * together with the media instance on unmount (`media.destroy()` destroys
- * all of its registered components).
+ * An optional `setup` callback runs once on mount — e.g. to add media components via `addMediaComponent`. Components
+ * registered there are destroyed together with the media instance on unmount (`media.destroy()` destroys all of its
+ * registered components).
+ *
+ * @param MediaClass - Media class to instantiate and attach to the current player.
+ * @param setup - Optional callback run once before the instance is attached.
  */
 declare function useMediaInstance<Instance extends Media & {
   destroy(): void;

package/dist/dev/utils/use-media-instance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-media-instance.d.ts","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"mappings":";;;;;;;;;;;;;;iBAkBgB,iBAAiB,iBAAiB;EAAU;GAC1D,sBAAsB,UACtB,SAAS,OAAO,oBACf"}
+{"version":3,"file":"use-media-instance.d.ts","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"mappings":";;;;;;;;;;;;;;;iBAmBgB,iBAAiB,iBAAiB;EAAU;GAC1D,sBAAsB,UACtB,SAAS,OAAO,oBACf"}

package/dist/dev/utils/use-media-instance.js

@@ -5,14 +5,15 @@ import { useState } from "react";
 /**
 * Create and manage a media instance lifecycle within a player context.
 *
-* Instantiates the media class once, attaches it to the player on mount,
-* and safely detaches on unmount using a functional updater to avoid race
-* conditions when swapping media components (e.g. DashVideo → HlsJsVideo).
+* Instantiates the media class once, attaches it to the player on mount, and safely detaches on unmount using a
+* functional updater to avoid race conditions when swapping media components (e.g. DashVideo → HlsJsVideo).
 *
-* An optional `setup` callback runs once on mount — e.g. to add media
-* components via `addMediaComponent`. Components registered there are destroyed
-* together with the media instance on unmount (`media.destroy()` destroys
-* all of its registered components).
+* An optional `setup` callback runs once on mount — e.g. to add media components via `addMediaComponent`. Components
+* registered there are destroyed together with the media instance on unmount (`media.destroy()` destroys all of its
+* registered components).
+*
+* @param MediaClass - Media class to instantiate and attach to the current player.
+* @param setup - Optional callback run once before the instance is attached.
 */
 function useMediaInstance(MediaClass, setup) {
 	const [instance] = useState(() => new MediaClass());

package/dist/dev/utils/use-media-instance.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-media-instance.js","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"sourcesContent":["import type { Media } from '@videojs/media';\nimport { useState } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create and manage a media instance lifecycle within a player context.\n *\n * Instantiates the media class once, attaches it to the player on mount,\n * and safely detaches on unmount using a functional updater to avoid race\n * conditions when swapping media components (e.g. DashVideo → HlsJsVideo).\n *\n * An optional `setup` callback runs once on mount — e.g. to add media\n * components via `addMediaComponent`. Components registered there are destroyed\n * together with the media instance on unmount (`media.destroy()` destroys\n * all of its registered components).\n */\nexport function useMediaInstance<Instance extends Media & { destroy(): void }>(\n  MediaClass: new () => Instance,\n  setup?: (media: Instance) => void\n): Instance {\n  const [instance] = useState(() => new MediaClass());\n  const setMedia = useMediaAttach();\n\n  useDestroy(\n    instance,\n    () => {\n      setup?.(instance);\n      setMedia?.(instance);\n    },\n    () => setMedia?.((prev) => (prev === instance ? null : prev))\n  );\n\n  return instance;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,SAAgB,iBACd,YACA,OACU;CACV,MAAM,CAAC,YAAY,eAAe,IAAI,WAAW,CAAC;CAClD,MAAM,WAAW,eAAe;CAEhC,WACE,gBACM;EACJ,QAAQ,QAAQ;EAChB,WAAW,QAAQ;CACrB,SACM,YAAY,SAAU,SAAS,WAAW,OAAO,IAAK,CAC9D;CAEA,OAAO;AACT"}
+{"version":3,"file":"use-media-instance.js","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"sourcesContent":["import type { Media } from '@videojs/media';\nimport { useState } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create and manage a media instance lifecycle within a player context.\n *\n * Instantiates the media class once, attaches it to the player on mount, and safely detaches on unmount using a\n * functional updater to avoid race conditions when swapping media components (e.g. DashVideo → HlsJsVideo).\n *\n * An optional `setup` callback runs once on mount — e.g. to add media components via `addMediaComponent`. Components\n * registered there are destroyed together with the media instance on unmount (`media.destroy()` destroys all of its\n * registered components).\n *\n * @param MediaClass - Media class to instantiate and attach to the current player.\n * @param setup - Optional callback run once before the instance is attached.\n */\nexport function useMediaInstance<Instance extends Media & { destroy(): void }>(\n  MediaClass: new () => Instance,\n  setup?: (media: Instance) => void\n): Instance {\n  const [instance] = useState(() => new MediaClass());\n  const setMedia = useMediaAttach();\n\n  useDestroy(\n    instance,\n    () => {\n      setup?.(instance);\n      setMedia?.(instance);\n    },\n    () => setMedia?.((prev) => (prev === instance ? null : prev))\n  );\n\n  return instance;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,SAAgB,iBACd,YACA,OACU;CACV,MAAM,CAAC,YAAY,eAAe,IAAI,WAAW,CAAC;CAClD,MAAM,WAAW,eAAe;CAEhC,WACE,gBACM;EACJ,QAAQ,QAAQ;EAChB,WAAW,QAAQ;CACrB,SACM,YAAY,SAAU,SAAS,WAAW,OAAO,IAAK,CAC9D;CAEA,OAAO;AACT"}

package/dist/dev/utils/use-render.d.ts

@@ -17,22 +17,19 @@ interface UseRenderParameters<State, RenderedElementType extends Element> {
 /**
  * Render a UI component element.
  *
- * Handles:
- * - Default tag rendering
- * - Render prop (element or function)
- * - Props merging (event handlers chained, className concatenated, style merged)
- * - Ref composition
- * - className/style as functions of state
+ * Handles: - Default tag rendering - Render prop (element or function) - Props merging (event handlers chained,
+ * className concatenated, style merged) - Ref composition - className/style as functions of state
  *
- * @public
  * @example
- * ```tsx
- * return renderElement('button', componentProps, {
- *   state,
- *   ref: [forwardedRef, buttonRef],
- *   props: [{ type: 'button' }, elementProps, getButtonProps],
- * });
- * ```
+ *   ```tsx
+ *   return renderElement('button', componentProps, {
+ *     state,
+ *     ref: [forwardedRef, buttonRef],
+ *     props: [{ type: 'button' }, elementProps, getButtonProps],
+ *   });
+ *   ```;
+ *
+ * @public
  */
 declare function renderElement<State extends object, RenderedElementType extends Element, TagName extends IntrinsicTagName>(element: TagName, componentProps: UseRenderComponentProps<State>, params: UseRenderParameters<State, RenderedElementType>): ReactElement | null;
 declare namespace renderElement {

package/dist/dev/utils/use-render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-render.d.ts","names":[],"sources":["../../../src/utils/use-render.tsx"],"mappings":";;;;KAcK,yBAAyB,MAAM,IAAI;UAEvB,wBAAwB;EACvC,uBAAuB,OAAO;EAC9B,QAAQ,kBAAkB,OAAO,UAAU;EAC3C,SAAS,WAAW;;UAGL,oBAAoB,OAAO,4BAA4B;EACtE,OAAO;EACP,MAAM,IAAI,uBAAuB,IAAI;EACrC;EACA,eAAe,aAAa;;;;;;;;;;;;;;;;;;;;;;iBAqCd,cACd,sBACA,4BAA4B,SAC5B,gBAAgB,kBAEhB,SAAS,SACT,gBAAgB,wBAAwB,QACxC,QAAQ,oBAAoB,OAAO,uBAClC;kBAiDc;OACH,eAAe,SAAS,wBAAwB;OAChD,WAAW,OAAO,4BAA4B,WAAW,oBAAoB,OAAO"}
+{"version":3,"file":"use-render.d.ts","names":[],"sources":["../../../src/utils/use-render.tsx"],"mappings":";;;;KAeK,yBAAyB,MAAM,IAAI;UAEvB,wBAAwB;EACvC,uBAAuB,OAAO;EAC9B,QAAQ,kBAAkB,OAAO,UAAU;EAC3C,SAAS,WAAW;;UAGL,oBAAoB,OAAO,4BAA4B;EACtE,OAAO;EACP,MAAM,IAAI,uBAAuB,IAAI;EACrC;EACA,eAAe,aAAa;;;;;;;;;;;;;;;;;;;iBAmCd,cACd,sBACA,4BAA4B,SAC5B,gBAAgB,kBAEhB,SAAS,SACT,gBAAgB,wBAAwB,QACxC,QAAQ,oBAAoB,OAAO,uBAClC;kBAoDc;OACH,eAAe,SAAS,wBAAwB;OAChD,WAAW,OAAO,4BAA4B,WAAW,oBAAoB,OAAO"}

package/dist/dev/utils/use-render.js

@@ -15,29 +15,27 @@ function getElementRef(element) {
 /**
 * Render a UI component element.
 *
-* Handles:
-* - Default tag rendering
-* - Render prop (element or function)
-* - Props merging (event handlers chained, className concatenated, style merged)
-* - Ref composition
-* - className/style as functions of state
+* Handles: - Default tag rendering - Render prop (element or function) - Props merging (event handlers chained,
+* className concatenated, style merged) - Ref composition - className/style as functions of state
 *
-* @public
 * @example
-* ```tsx
-* return renderElement('button', componentProps, {
-*   state,
-*   ref: [forwardedRef, buttonRef],
-*   props: [{ type: 'button' }, elementProps, getButtonProps],
-* });
-* ```
+*   ```tsx
+*   return renderElement('button', componentProps, {
+*     state,
+*     ref: [forwardedRef, buttonRef],
+*     props: [{ type: 'button' }, elementProps, getButtonProps],
+*   });
+*   ```;
+*
+* @public
 */
 function renderElement(element, componentProps, params) {
 	const { className: classNameProp, style: styleProp, render } = componentProps;
 	const { state, ref, props, stateAttrMap } = params;
 	const className = resolveClassName(classNameProp, state);
 	const style = resolveStyle(styleProp, state);
-	const mergedProps = mergeProps(stateAttrMap ? getStateDataAttrs(state, stateAttrMap) : {}, ...Array.isArray(props) ? props : props ? [props] : []);
+	const stateDataAttrs = stateAttrMap ? getStateDataAttrs(state, stateAttrMap) : {};
+	const mergedProps = mergeProps(stateDataAttrs, ...Array.isArray(props) ? props : props ? [props] : []);
 	if (className !== void 0) mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;
 	if (style !== void 0) mergedProps.style = mergedProps.style ? {
 		...mergedProps.style,