@primer/react/dist/experimental/Tabs/Tabs.d.ts

An implementation of GitHub's Primer Design System using React

import React, { type AriaAttributes, type PropsWithChildren } from 'react';
/**
 * Props to be used when the Tabs component's state is controlled by the parent
 */
type ControlledTabsProps = {
    /**
     * Specify the selected tab
     */
    value: string;
    /**
     * `defaultValue` can only be used in the uncontrolled variant of the component
     * If you need to use `defaultValue`, please switch to the uncontrolled variant by removing the `value` prop.
     */
    defaultValue?: never;
    /**
     * Provide an optional callback that is called when the selected tab changes
     */
    onValueChange: ({ value }: {
        value: string;
    }) => void;
};
/**
 * Props to be used when the Tabs component is managing its own state
 */
type UncontrolledTabsProps = {
    /**
     * Specify the default selected tab
     */
    defaultValue: string;
    /**
     * `value` can only be used in the controlled variant of the component
     * If you need to use `value`, please switch to the controlled variant by removing the `defaultValue` prop.
     */
    value?: never;
    /**
     * Provide an optional callback that is called when the selected tab changes
     */
    onValueChange?: ({ value }: {
        value: string;
    }) => void;
};
type TabsProps = PropsWithChildren<ControlledTabsProps | UncontrolledTabsProps>;
/**
 * The Tabs component provides the base structure for a tabbed interface, without providing any formal requirement on DOM structure or styling.
 * It manages the state of the selected tab, handles tab ordering/selection and provides context to its child components to ensure an accessible experience.
 *
 * This is intended to be used in conjunction with the `useTab`, `useTabList`, and `useTabPanel` hooks to build a fully accessible tabs component.
 * The `Tab`, `TabList`, and `TabPanel` components are provided for convenience to showcase the API & implementation.
 */
declare function Tabs(props: TabsProps): React.JSX.Element;
type Label = {
    'aria-label': string;
};
type LabelledBy = {
    'aria-labelledby': string;
};
type Labelled = Label | LabelledBy;
type TabListProps = Labelled & React.HTMLAttributes<HTMLElement>;
declare function useTabList<T extends HTMLElement>(props: TabListProps & {
    /** Optional ref to use for the tablist. If none is provided, one will be generated automatically */
    ref?: React.RefObject<T>;
}): {
    /** Props to be spread onto the tablist element */
    tabListProps: {
        onKeyDown: React.KeyboardEventHandler<T>;
        'aria-orientation': AriaAttributes['aria-orientation'];
        'aria-label': AriaAttributes['aria-label'];
        'aria-labelledby': AriaAttributes['aria-labelledby'];
        ref: React.RefObject<T | null>;
        role: 'tablist';
    };
};
declare function TabList({ children, ...rest }: TabListProps): React.JSX.Element;
type TabProps = React.ComponentPropsWithoutRef<'button'> & {
    /**
     * Specify whether the tab is disabled
     */
    disabled?: boolean;
    /**
     * Provide a value that uniquely identifies the tab. This should mirror the
     * value provided to the corresponding TabPanel
     */
    value: string;
};
/**
 * A custom hook that provides the props needed for a tab component.
 * The props returned should be spread onto the component (typically a button) with the `role=tab`, under a `tablist`.
 */
declare function useTab<T extends HTMLElement>(props: Pick<TabProps, 'disabled' | 'value'>): {
    /** Props to be spread onto the tab component */
    tabProps: Pick<React.HTMLProps<T>, 'aria-controls' | 'aria-disabled' | 'aria-selected' | 'id' | 'tabIndex' | 'onKeyDown' | 'onMouseDown' | 'onFocus'> & {
        role: 'tab';
    };
};
declare const Tab: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
    /**
     * Specify whether the tab is disabled
     */
    disabled?: boolean;
    /**
     * Provide a value that uniquely identifies the tab. This should mirror the
     * value provided to the corresponding TabPanel
     */
    value: string;
} & React.RefAttributes<HTMLButtonElement>>;
type TabPanelProps = {
    /**
     * Provide a value that uniquely identifies the tab panel. This should mirror
     * the value set for the corresponding tab
     */
    value: string;
};
/** Utility hook for tab panels */
declare function useTabPanel<T extends HTMLElement>(props: TabPanelProps): {
    /** Props to be spread onto the tabpanel component */
    tabPanelProps: Pick<React.HTMLProps<T>, 'aria-labelledby' | 'id' | 'hidden'> & {
        /**
         * An identifier to aid in styling when this panel is selected & active
         */
        'data-selected': string | undefined;
        role: 'tabpanel';
    };
};
declare function TabPanel({ children, value, ...rest }: React.HTMLAttributes<HTMLDivElement> & TabPanelProps): React.JSX.Element;
export { Tabs, TabList, Tab, TabPanel, useTab, useTabList, useTabPanel };
export type { TabsProps, TabListProps, TabProps, TabPanelProps };
//# sourceMappingURL=Tabs.d.ts.map