@primer/react-brand/esm/MediaPlaylist/useMediaPlaylist.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React from 'react';
import type { PaginationPageType } from '../Pagination/model';
type UseMediaPlaylistProps = {
    children: React.ReactNode;
    components: MediaPlaylistComponentTypes;
    defaultSelectedIndex: number;
    onChange?: (selectedIndex: number) => void;
    selectedIndex?: number;
};
/**
 * Internal only hook used by MediaPlaylist to manage state and behavior.
 * @private
 * @internal
 */
export type MediaPlaylistComponentTypes = {
    Heading: React.ElementType;
    Item: React.ElementType;
    ItemHeading: React.ElementType;
    ItemContent: React.ElementType;
    ItemMedia: React.ElementType;
};
type MediaPlaylistHeadingChildProps = {
    activeIndex?: number | null;
    id?: string;
    itemCount?: number;
};
type MediaPlaylistItemChildProps = React.PropsWithChildren<Record<string, unknown>>;
type MediaPlaylistItemChild = React.ReactElement<MediaPlaylistItemChildProps>;
type MediaPlaylistItemData = {
    className?: string;
    content: MediaPlaylistItemChild;
    heading: MediaPlaylistItemChild;
    media: MediaPlaylistItemChild;
    thumbnail?: React.ReactNode;
};
/**
 * Internal only hook used by MediaPlaylist to manage state and behavior.
 * @private
 * @internal
 */
export declare function useMediaPlaylist({ children, components, defaultSelectedIndex, onChange, selectedIndex, }: UseMediaPlaylistProps): {
    activeIndex: number | null;
    currentItemPage: number;
    getPaginationAttributes: (pageNumber: number, page: PaginationPageType) => {
        [key: string]: string;
    };
    getTabListProps: (props: {
        label: string;
        labelledBy?: never;
    } | {
        labelledBy: string;
        label?: never;
    }) => {
        role: "tablist";
        'aria-orientation': "horizontal" | "vertical";
    };
    getTabPanelProps: (id: string) => {
        role: "tabpanel";
        id: `tabs-${string}-panel-${string}`;
        'aria-labelledby': `tabs-${string}-tab-${string}`;
        hidden: boolean;
        tabIndex: 0;
    };
    getTabProps: <T extends HTMLElement = HTMLElement>(id: string, externalRef?: React.Ref<T>) => {
        role: "tab";
        id: `tabs-${string}-tab-${string}`;
        'aria-controls': `tabs-${string}-panel-${string}`;
        'aria-selected': boolean;
        tabIndex: 0 | -1;
        onClick: () => void;
        onKeyDown: (event: React.KeyboardEvent) => void;
        onFocus: () => void;
        ref: (element: HTMLElement | null) => void;
    };
    handlePageChange: (event: React.MouseEvent, page: number) => void;
    hasOverflowItems: boolean;
    headingChild: React.ReactElement<MediaPlaylistHeadingChildProps, string | React.JSXElementConstructor<any>> | null;
    isItemSelected: (index: number) => boolean;
    items: MediaPlaylistItemData[];
    setItemRef: (index: number, element: HTMLDivElement | null) => void;
    tabListRef: React.RefObject<HTMLDivElement | null>;
};
export {};
//# sourceMappingURL=useMediaPlaylist.d.ts.map