@primer/react-brand/lib/hooks/useTabs.d.ts

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

import { type KeyboardEvent, type Ref } from 'react';
export type OnTabActivate = (id: string, activeTabRef?: HTMLElement) => void;
type Orientation = 'horizontal' | 'vertical';
type TabId = `tabs-${string}-tab-${string}`;
type TabPanelId = `tabs-${string}-panel-${string}`;
export type UseTabsOptions = {
    defaultTab?: string;
    autoActivate?: boolean;
    onTabActivate?: OnTabActivate;
    orientation?: Orientation;
};
export type TabState = {
    activeTab: string | null;
    focusedTab: string | null;
    tabs: Set<string>;
};
type TabListProps = {
    role: 'tablist';
    'aria-orientation': Orientation;
};
type TabProps = {
    role: 'tab';
    id: TabId;
    'aria-controls': TabPanelId;
    'aria-selected': boolean;
    tabIndex: 0 | -1;
    onClick: () => void;
    onKeyDown: (event: KeyboardEvent) => void;
    onFocus: () => void;
    ref: (element: HTMLElement | null) => void;
};
type TabPanelProps = {
    role: 'tabpanel';
    id: TabPanelId;
    'aria-labelledby': TabId;
    hidden: boolean;
    tabIndex: 0;
};
type LabelOrLabelledBy = {
    label: string;
    labelledBy?: never;
} | {
    labelledBy: string;
    label?: never;
};
export type UseTabs = {
    activeTab: string | null;
    focusedTab: string | null;
    activateTab: (id: string) => void;
    focusTab: (id: string) => void;
    getTabListProps: (props: LabelOrLabelledBy) => TabListProps;
    getTabProps: <T extends HTMLElement = HTMLElement>(id: string, externalRef?: Ref<T>) => TabProps;
    getTabPanelProps: (id: string) => TabPanelProps;
};
export declare const useTabs: ({ defaultTab, autoActivate, orientation, onTabActivate, }?: UseTabsOptions) => UseTabs;
export {};