@neo4j-ndl/react/lib/types/tabs/Tabs.d.ts

React implementation of Neo4j Design System

/**
 *
 *  Copyright (c) "Neo4j"
 *  Neo4j Sweden AB [http://neo4j.com]
 *
 *  This file is part of Neo4j.
 *
 *  Neo4j is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import React from 'react';
import { type CommonProps, type PolymorphicCommonProps, type TooltipObjectProps } from '../_common/types';
type TabId = string;
type Size = 'small' | 'large';
type Fill = 'underline' | 'filled';
type BaseTabsProps<T extends TabId> = {
    /** The currently active tabId */
    value: T;
    /** Callback function triggered when a new tab is selected */
    onChange: (e: T) => void;
    /** The content dislayed in the tabs */
    children: React.ReactNode | string;
    /** The fill type of the tabs */
    fill?: Fill;
    /**  The size of the tabs */
    size?: Size;
    /** What background the Tabs is placed on. This affects the gradient background of the scroll navigation buttons. */
    onBackground?: 'weak' | 'default';
};
type TabProps<T extends TabId> = {
    /** The id of the tab */
    id: T;
    /** The content of the tab */
    children: React.ReactNode | string;
    /** A string that will be shown as a tooltip when hovering over the button  it also acts as an aria-label- {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label} */
    description?: string;
    /** Props for the tooltip component. */
    tooltipProps?: TooltipObjectProps;
    /** Additional class name */
    className?: string;
    /** Whether the tab is disabled */
    isDisabled?: boolean;
};
type TabPanelProps = {
    /** The content displayed in the tab panel */
    children: React.ReactNode;
    /** The currently selected tabId. The tab is visible if the value is equal to the tabId */
    value: TabId;
    /** The id of the tab panel */
    tabId: TabId;
    /** Additional class name */
    className?: string;
};
type TabBadgeProps = {
    /** The content of the badge */
    children: React.ReactNode;
};
declare const Tabs: {
    <U extends TabId, T extends React.ElementType = "div">({ children, size, fill, onChange, value, onBackground, className, style, as, htmlAttributes, ref, ...restProps }: PolymorphicCommonProps<T, BaseTabsProps<U>>): import("react/jsx-runtime").JSX.Element;
    displayName: string;
} & {
    Badge: ({ children, ref, htmlAttributes, style, className, ...restProps }: CommonProps<"span", TabBadgeProps>) => import("react/jsx-runtime").JSX.Element;
    Tab: {
        <U extends TabId = string, T extends React.ElementType = "button">({ children, id: tabId, isDisabled, className, description, tooltipProps, style, as, htmlAttributes, ref, ...restProps }: PolymorphicCommonProps<T, TabProps<U>>): import("react/jsx-runtime").JSX.Element;
        displayName: string;
    };
    TabPanel: {
        <T extends React.ElementType = "div">({ as, children, value, tabId, style, className, htmlAttributes, ref, ...restProps }: PolymorphicCommonProps<T, TabPanelProps>): import("react/jsx-runtime").JSX.Element;
        displayName: string;
    };
};
export { Tabs };
//# sourceMappingURL=Tabs.d.ts.map