lucid-ui/dist/components/Tabs/Tabs.d.ts

A UI component library from AppNexus.

import React from 'react';
import { StandardProps, Overwrite } from '../../util/component-types';
import * as reducers from './Tabs.reducers';
interface ITitleProps extends StandardProps {
}
interface ITabProps extends StandardProps {
    /** The index of this \`Tab\` within the list of \`Tabs\`. */
    index?: number;
    /**Styles a \`Tab\` as disabled. This is typically used with
            \`isProgressive\` to disable steps that have not been completed and
            should not be selected until the current step has been completed. */
    isDisabled?: boolean;
    /** If \`true\`, this \`Tab\` is the last \`Tab\` in the list of \`Tabs\`. */
    isLastTab?: boolean;
    /** If \`true\` then the active \`Tab\` will appear open on the bottom. */
    isOpen?: boolean;
    /** If \`true\`, the \`Tab\` will appear as a \`Progressive\` tab. */
    isProgressive?: boolean;
    /** If \`true\`, the \`Tab\` will appear selected. */
    isSelected?: boolean;
    /** Callback for when the user clicks a \`Tab\`. Called with the index of the
            \`Tab\` that was clicked. */
    onSelect?: (index: number, tabProps: ITabProps, event: React.MouseEvent<HTMLLIElement>) => void;
    /** The content to be rendered as the \`Title\` of the \`Tab\`. */
    Title?: string | React.ReactNode & {
        props: ITitleProps;
    };
    /** Optional prop that will show a count number next to the tab's title. */
    count?: number | string;
    /** Defaults to false.
            Allows the count bubble to grow large. Useful if working with huge numbers. */
    isVariableCountWidth?: boolean;
}
interface ITabsProps extends StandardProps {
    /** Indicates which of the \`Tabs.Tab\` children is currently selected. The
    index of the last \`Tabs.Tab\` child with \`isSelected\` equal to
    \`true\` takes precedence over this prop. */
    selectedIndex: number;
    /** Callback for when the user clicks a tab. Called with the index of the tab
    that was clicked. */
    onSelect: (index: number, { props, event, }: {
        props: ITabProps;
        event: React.MouseEvent<HTMLLIElement>;
    }) => void;
    /** If \`true\` then the active tab will appear open on the bottom. */
    isOpen: boolean;
    /** Style the tabs as a progression. This is typically used for a work flow
    where the user needs to move forward and backward through a series of
    steps. */
    isProgressive: boolean;
    /** Provides a small bottom border that offers a barrier between the tab
    group and the rest of the page.
    Useful if the tabs are not anchored to anything. */
    isFloating: boolean;
    /** Set the multiline className. This is typically used for styling the
    Tab.Title bar for improved readability when there are multiple React
    elements in the tab headers. */
    hasMultilineTitle: boolean;
    /** If \`true\` the width will be evenly distributed to all tabs.  \`False\`
    typically used in conjunction with \`Tab.width\` */
    hasFullWidthTabs: boolean;
    /** *Child Element* Can be used to define one or more individual \`Tab\`s in
    the sequence of \`Tabs\`. */
    Tab?: string | React.ReactNode & {
        props: ITabProps;
    };
    Title?: string | React.ReactNode & {
        props: ITitleProps;
    };
}
declare type ITabsPropsWithPassThroughs = Overwrite<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ITabsProps>;
export interface ITabsState {
    selectedIndex: number;
}
declare class Tabs extends React.Component<ITabsPropsWithPassThroughs, ITabsState> {
    static displayName: string;
    static Title: {
        (props: ITitleProps): null;
        peek: {
            description: string;
        };
        displayName: string;
        propName: string;
    };
    static Tab: {
        (props: Overwrite<React.DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>, ITabProps>): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
        peek: {
            description: string;
        };
        displayName: string;
        propName: string;
        propTypes: {
            className: any;
            index: any;
            isDisabled: any;
            isLastTab: any;
            isOpen: any;
            isProgressive: any;
            isSelected: any;
            onSelect: any;
            Title: any;
            count: any;
            isVariableCountWidth: any;
        };
    };
    static reducers: typeof reducers;
    static peek: {
        description: string;
        categories: string[];
    };
    static propTypes: {
        className: any;
        selectedIndex: any;
        onSelect: any;
        isOpen: any;
        isProgressive: any;
        isFloating: any;
        hasMultilineTitle: any;
        hasFullWidthTabs: any;
        Tab: any;
    };
    static defaultProps: {
        selectedIndex: number;
        onSelect: (...args: any[]) => void;
        isOpen: boolean;
        isProgressive: boolean;
        isFloating: boolean;
        hasMultilineTitle: boolean;
        hasFullWidthTabs: boolean;
    };
    handleClicked: (index: number, tabProps: ITabProps, event: React.MouseEvent<HTMLLIElement>) => void;
    render(): JSX.Element;
}
declare const _default: typeof Tabs & import("../../util/state-management").IHybridComponent<ITabsProps, ITabsState>;
export default _default;
export { Tabs as TabsDumb };