vidstack
Version:
Build awesome media experiences on the web.
117 lines (116 loc) • 4.44 kB
TypeScript
/// <reference types="@types/node" />
import { Component, type ComponentInstance, type HTMLCustomElement } from 'maverick.js/element';
import { DOMEvent } from 'maverick.js/std';
import { type MediaContext } from '../../core/api/context';
import { type MenuContext, type MenuObserver } from './menu-context';
import { MenuFocusController } from './menu-focus-controller';
declare global {
interface MaverickElements {
'media-menu': MediaMenuElement;
}
}
/**
* This component is used to display options in a floating panel.
*
* @docs {@link https://www.vidstack.io/docs/player/components/menu/menu}
* @example
* ```html
* <media-menu>
* <media-menu-button aria-label="Settings">
* <media-icon type="settings"></media-icon>
* </media-menu-button>
* <media-menu-items>
* <!-- ... -->
* </media-menu-items>
* </media-menu>
* ```
*/
export declare class Menu extends Component<MenuAPI> {
static el: import("maverick.js/element").CustomElementDefinition<MenuAPI>;
protected _media: MediaContext;
protected _menuId: string;
protected _menuButtonId: string;
protected _expanded: import("maverick.js").WriteSignal<boolean>;
protected _disabled: import("maverick.js").WriteSignal<boolean>;
protected _buttonDisabled: import("maverick.js").WriteSignal<boolean>;
protected _parentMenu?: MenuContext;
protected _submenus: Set<MediaMenuElement>;
protected _menuButton: HTMLElement | null;
protected _menuItems: HTMLElement | null;
protected _menuObserver: MenuObserver | null;
protected _focus: MenuFocusController;
constructor(instance: ComponentInstance<MenuAPI>);
protected onAttach(el: HTMLElement): void;
protected onConnect(el: HTMLElement): void;
protected onDestroy(): void;
protected _removePopupMenu(): void;
protected _watchBreakpoint(): (() => void) | undefined;
protected _watchExpanded(): void;
protected _attachMenuButton(el: HTMLElement): void;
protected _attachMenuItems(el: HTMLElement): void;
protected _attachObserver(observer: MenuObserver): void;
protected _updateMenuItemsHidden(expanded: boolean): void;
protected _disableMenuButton(disabled: boolean): void;
protected _onMenuButtonPress(event: Event): void;
protected _onChange(trigger?: Event): void;
protected _isExpanded(): boolean;
protected _isDisabled(): boolean;
protected _disableBind: (disabled: boolean) => void;
protected _disable(disabled: boolean): void;
protected _onPointerUp(event: PointerEvent): void;
protected _onWindowPointerUp(): NodeJS.Timeout | undefined;
protected _onCloseTargetPress(event: Event): void;
protected _getCloseTarget(): Element | null;
protected _findScrollContainer(): HTMLElement | null;
protected _changeIdleTracking(trigger?: Event): void;
protected _addSubmenu(el: MediaMenuElement): void;
protected _removeSubmenuBind: (el: MediaMenuElement) => void;
protected _removeSubmenu(el: MediaMenuElement): void;
protected _onSubmenuOpenBind: (event: MenuOpenEvent) => void;
protected _onSubmenuOpen(event: MenuOpenEvent): void;
protected _onSubmenuCloseBind: () => void;
protected _onSubmenuClose(): void;
protected _onResize(): void;
/**
* Open this menu. The first menu item will be focused if a `KeyboardEvent` trigger is provided
*/
open(trigger?: Event): void;
/**
* Close this menu. The menu button that controls this menu will be focused if a `KeyboardEvent`
* trigger is provided
*/
close(trigger?: Event): void;
}
export interface MenuAPI {
props: MenuProps;
events: MenuEvents;
}
export type MenuXPosition = 'left' | 'right';
export type MenuYPosition = 'top' | 'bottom';
export type MenuPosition = MenuYPosition | `${MenuYPosition} ${MenuXPosition}`;
export interface MenuProps {
/**
* Specifies the position at which the main menu items are opened.
*
* @example `top left`
*/
position: MenuPosition | null;
}
export interface MenuEvents {
open: MenuOpenEvent;
close: MenuCloseEvent;
}
/**
* Fired when the menu is opened.
*/
export interface MenuOpenEvent extends DOMEvent<void> {
target: MediaMenuElement;
}
/**
* Fired when the menu is closed.
*/
export interface MenuCloseEvent extends DOMEvent<void> {
target: MediaMenuElement;
}
export interface MediaMenuElement extends HTMLCustomElement<Menu> {
}