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

package/docs/reference/popover.md

@@ -2,6 +2,14 @@
 
 A popover component for displaying contextual content anchored to a trigger
 
+## Import
+
+tsx
+
+```
+import { Popover } from '@videojs/react';
+```
+
 ## Anatomy
 
 tsx
@@ -22,6 +30,8 @@ Displays contextual content anchored to a trigger element. By default, opens on
 
 Set `openOnHover` to open on pointer hover instead of click. Use `delay` and `closeDelay` to control timing for hover interactions.
 
+Popovers inside a [Container](./player-container.md) join its popup group. Opening one closes any other popover or root menu that is open in the same container. A popover outside the container still opens and closes normally, but it is not coordinated with that group.
+
 The `side` and `align` props control the preferred popup placement relative to the trigger. When the preferred side overflows the positioning boundary, the popup uses the opposite side if it has more space.
 
 In React, the component is composed from four parts: `Root` manages state, `Trigger` toggles the popover, `Popup` contains the content, and `Arrow` renders a directional arrow.
@@ -299,51 +309,51 @@ Type
 
 Details
 
-`open`
+`transitionStarting`
 
 `boolean`
 
-`status`
+▸
 
-`'idle' | 'starting' | 'ending'`
+Description
 
-`side`
+Whether the open transition is in progress.
 
-`'top' | 'bottom' | 'left' | 'right'`
+`transitionEnding`
+
+`boolean`
 
 ▸
 
 Description
 
-Preferred side of the trigger for the popup.
+Whether the close transition is in progress.
 
-`align`
+`open`
 
-`'start' | 'center' | 'end'`
+`boolean`
 
-`modal`
+`status`
 
-`boolean | 'trap-focus'`
+`'idle' | 'starting' | 'ending'`
 
-`transitionStarting`
+`side`
 
-`boolean`
+`'top' | 'bottom' | 'left' | 'right'`
 
 ▸
 
 Description
 
-Whether the open transition is in progress.
-
-`transitionEnding`
+Preferred side of the trigger for the popup.
 
-`boolean`
+`align`
 
-▸
+`'start' | 'center' | 'end'`
 
-Description
+`modal`
 
-Whether the close transition is in progress.
+`boolean | 'trap-focus'`
 
 #### Data attributes
 
@@ -363,7 +373,7 @@ Present when the popover is open.
 
 `data-side`
 
-`'left' | 'right' | 'top' | 'bottom'`
+`'top' | 'bottom' | 'left' | 'right'`
 
 ▸
 
@@ -373,7 +383,7 @@ Indicates the rendered side of the popover after collision handling.
 
 `data-align`
 
-`'center' | 'start' | 'end'`
+`'start' | 'center' | 'end'`
 
 ▸
 
@@ -449,12 +459,104 @@ Arrow
 
 Decorative arrow pointing from the popup toward the trigger. Hidden from assistive technology.
 
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`className`
+
+`string | ((state: PopoverState) => string | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Class name or function returning class name from state.
+
+`render`
+
+`ReactElement | ((props: HTMLProps, state: PopoverState) => ReactElement | null)`
+
+`—`
+
+▸
+
+Description
+
+Render prop for custom element.
+
+`style`
+
+`CSSProperties | ((state: PopoverState) => CSSProperties | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Style or function returning style from state.
+
 ### 
 
 Popup
 
 Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback.
 
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`className`
+
+`string | ((state: PopoverState) => string | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Class name or function returning class name from state.
+
+`render`
+
+`ReactElement | ((props: HTMLProps, state: PopoverState) => ReactElement | null)`
+
+`—`
+
+▸
+
+Description
+
+Render prop for custom element.
+
+`style`
+
+`CSSProperties | ((state: PopoverState) => CSSProperties | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Style or function returning style from state.
+
 #### Data attributes
 
 Attribute
@@ -473,7 +575,7 @@ Present when the popover is open.
 
 `data-side`
 
-`'left' | 'right' | 'top' | 'bottom'`
+`'top' | 'bottom' | 'left' | 'right'`
 
 ▸
 
@@ -483,7 +585,7 @@ Indicates the rendered side of the popover after collision handling.
 
 `data-align`
 
-`'center' | 'start' | 'end'`
+`'start' | 'center' | 'end'`
 
 ▸
 
@@ -497,6 +599,52 @@ Trigger
 
 Button that toggles the popover visibility. Renders a `<button>` element.
 
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`className`
+
+`string | ((state: PopoverState) => string | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Class name or function returning class name from state.
+
+`render`
+
+`ReactElement | ((props: HTMLProps, state: PopoverState) => ReactElement | null)`
+
+`—`
+
+▸
+
+Description
+
+Render prop for custom element.
+
+`style`
+
+`CSSProperties | ((state: PopoverState) => CSSProperties | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Style or function returning style from state.
+
 #### Data attributes
 
 Attribute
@@ -515,7 +663,7 @@ Present when the popover is open.
 
 `data-side`
 
-`'left' | 'right' | 'top' | 'bottom'`
+`'top' | 'bottom' | 'left' | 'right'`
 
 ▸
 
@@ -525,7 +673,7 @@ Indicates the rendered side of the popover after collision handling.
 
 `data-align`
 
-`'center' | 'start' | 'end'`
+`'start' | 'center' | 'end'`
 
 ▸
 

package/docs/reference/poster.md

@@ -2,6 +2,14 @@
 
 Poster image component that displays a thumbnail until video playback starts
 
+## Import
+
+tsx
+
+```
+import { Poster } from '@videojs/react';
+```
+
 ## Anatomy
 
 tsx

package/docs/reference/quality-radio-group.md

@@ -4,6 +4,14 @@ A menu radio group for selecting video quality
 
 Creates radio items from the player video rendition state and selects automatic or manual quality.
 
+## Import
+
+tsx
+
+```
+import { QualityRadioGroup } from '@videojs/react';
+```
+
 ## Anatomy
 
 tsx
@@ -90,23 +98,25 @@ function QualityMenu(): ReactNode {
       <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
         Quality
       </Menu.Trigger>
-      <Menu.Content className="menu">
-        <QualityRadioGroup
-          className="menu-group"
-          renderItem={(props, item) => (
-            <Menu.RadioItem {...props} className="menu-item">
-              <span>
-                {item.label}
-                {item.tier ? <sup className="menu-tier">{item.tier}</sup> : null}
-              </span>
-              {item.badge ? <span className="menu-badge">{item.badge}</span> : null}
-              <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
-                ✓
-              </Menu.ItemIndicator>
-            </Menu.RadioItem>
-          )}
-        />
-      </Menu.Content>
+      <Menu.Popup className="menu">
+        <Menu.Content>
+          <QualityRadioGroup
+            className="menu-group"
+            renderItem={(props, item) => (
+              <Menu.RadioItem {...props} className="menu-item">
+                <span>
+                  {item.label}
+                  {item.tier ? <sup className="menu-tier">{item.tier}</sup> : null}
+                </span>
+                {item.badge ? <span className="menu-badge">{item.badge}</span> : null}
+                <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
+                  ✓
+                </Menu.ItemIndicator>
+              </Menu.RadioItem>
+            )}
+          />
+        </Menu.Content>
+      </Menu.Popup>
     </Menu.Root>
   );
 }
@@ -238,7 +248,7 @@ Whether quality selection is disabled.
 
 `formatRendition`
 
-`Text) | function`
+`string) | function`
 
 `formatRenditionLabel`
 
@@ -250,11 +260,11 @@ Custom formatter for visible rendition labels.
 
 Type
 
-`((rendition: MediaVideoRendition) => string | Text)`
+`((rendition: MediaVideoRendition) => Text | string)`
 
 `label`
 
-`Text | string | Text) | function`
+`object`
 
 `''`
 
@@ -266,7 +276,7 @@ Custom label for the options group.
 
 Type
 
-`Text | string | ((state: QualityRadioGroupState) => string | Text)`
+`{ key: string; text: string } | string | ((state: QualityRadioGroupState) => Text | string)`
 
 ### State
 
@@ -278,6 +288,10 @@ Type
 
 Details
 
+`label`
+
+`{ key: string; text: string } | string`
+
 `value`
 
 `string`
@@ -290,7 +304,7 @@ Current radio-group value.
 
 `options`
 
-`QualityRadioGroupOption[]`
+`readonly Option[]`
 
 ▸
 
@@ -328,10 +342,6 @@ Description
 
 Whether the media exposes a meaningful selection.
 
-`label`
-
-`Text | string`
-
 ### Data attributes
 
 Attribute

package/docs/reference/register-i18n.md

@@ -33,7 +33,7 @@ Details
 
 `locale*`
 
-`string & object | 'ar' | 'az' | 'bs' ...`
+`(typeof LOCALES)[number] | string & o...`
 
 `—`
 
@@ -45,7 +45,7 @@ BCP 47 tag (normalized to lowercase; unicode extensions stripped for the registr
 
 Type
 
-`string & object | 'ar' | 'az' | 'bs' | 'bg' | 'bn' | 'ca' | 'cs' | 'cy' | 'da' | 'de' | 'el' | 'es' | 'et' | 'eu' | 'fa' | 'fi' | 'fr' | 'gd' | 'gl' | 'he' | 'hi' | 'hr' | 'hu' | 'id' | 'it' | 'ja' | 'ko' | 'lt' | 'lv' | 'mr' | 'nb' | 'nl' | 'nn' | 'ne' | 'oc' | 'pl' | 'pt-BR' | 'pt-PT' | 'ro' | 'ru' | 'sk' | 'sl' | 'sr' | 'sv' | 'te' | 'th' | 'tr' | 'uk' | 'vi' | 'zh-CN' | 'zh-TW'`
+`(typeof LOCALES)[number] | string & object`
 
 `translations*`
 

package/docs/reference/render-element.md

@@ -181,16 +181,28 @@ Details
 
 `componentProps*`
 
-`UseRenderComponentProps<object>`
+`object`
 
 `—`
 
+▸
+
+Type
+
+`{ className?: string | ((state: State) => string | undefined); style?: CSSProperties | ((state: State) => CSSProperties | undefined); render?: RenderProp<State> }`
+
 `params*`
 
-`UseRenderParameters<object, Element>`
+`object`
 
 `—`
 
+▸
+
+Type
+
+`{ state: State; ref?: Ref<RenderedElementType> | Ref<RenderedElementType>[]; props?: object | object[]; stateAttrMap?: StateAttrMap<State> }`
+
 ### Return Value
 
 `ReactElement | null`

package/docs/reference/seek-button.md

@@ -2,6 +2,14 @@
 
 Accessible seek button for skipping forward or backward by a configurable number of seconds
 
+## Import
+
+tsx
+
+```
+import { SeekButton } from '@videojs/react';
+```
+
 ## Anatomy
 
 tsx
@@ -120,7 +128,7 @@ Whether the button is disabled.
 
 `label`
 
-`Text | string | Text) | function`
+`object`
 
 `''`
 
@@ -132,7 +140,7 @@ Custom label for the button.
 
 Type
 
-`Text | string | ((state: SeekButtonState) => string | Text)`
+`{ key: string; text: string } | string | ((state: SeekButtonState) => Text | string)`
 
 `seconds`
 
@@ -156,6 +164,10 @@ Type
 
 Details
 
+`label`
+
+`{ key: string; text: string } | string`
+
 `seeking`
 
 `boolean`
@@ -176,10 +188,6 @@ Description
 
 Whether the button seeks forward or backward.
 
-`label`
-
-`Text | string`
-
 ### Data attributes
 
 Attribute