@carbon/react 1.31.2 → 1.32.0-rc.0

package/es/components/Tabs/Tabs.d.ts

@@ -0,0 +1,303 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import React, { type ReactNode, type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ComponentType, type ReactHTML } from 'react';
+type DivAttributes = HTMLAttributes<HTMLDivElement>;
+/**
+ * Tabs
+ */
+export interface TabsProps {
+    /**
+     * Provide child elements to be rendered inside the `Tabs`.
+     * These elements should render either `TabsList` or `TabsPanels`
+     */
+    children?: ReactNode;
+    /**
+     * Specify which content tab should be initially selected when the component
+     * is first rendered
+     */
+    defaultSelectedIndex?: number;
+    /**
+     * Whether the rendered Tab children should be dismissable.
+     */
+    dismissable?: boolean;
+    /**
+     * Provide an optional function which is called
+     * whenever the state of the `Tabs` changes
+     */
+    onChange?(state: {
+        selectedIndex: number;
+    }): void;
+    /**
+     * If specifying the `onTabCloseRequest` prop, provide a callback function
+     * responsible for removing the tab when close button is pressed on one of the Tab elements
+     */
+    onTabCloseRequest?(tabIndex: number): void;
+    /**
+     * Control which content panel is currently selected. This puts the component
+     * in a controlled mode and should be used along with `onChange`
+     */
+    selectedIndex?: number;
+}
+declare function Tabs({ children, defaultSelectedIndex, onChange, selectedIndex: controlledSelectedIndex, dismissable, onTabCloseRequest, }: TabsProps): JSX.Element;
+declare namespace Tabs {
+    var propTypes: {
+        /**
+         * Provide child elements to be rendered inside the `Tabs`.
+         * These elements should render either `TabsList` or `TabsPanels`
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify which content tab should be initially selected when the component
+         * is first rendered
+         */
+        defaultSelectedIndex: PropTypes.Requireable<number>;
+        /**
+         * Whether the render Tab children should be dismissable.
+         */
+        dismissable: PropTypes.Requireable<boolean>;
+        /**
+         * Provide an optional function which is called whenever the state of the
+         * `Tabs` changes
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * If specifying the `onTabCloseRequest` prop, provide a callback function
+         * responsible for removing the tab when close button is pressed on one of the Tab elements
+         */
+        onTabCloseRequest: (props: any) => Error | undefined;
+        /**
+         * Control which content panel is currently selected. This puts the component
+         * in a controlled mode and should be used along with `onChange`
+         */
+        selectedIndex: PropTypes.Requireable<number>;
+    };
+}
+/**
+ * TabList
+ */
+export interface TabListProps extends DivAttributes {
+    /**
+     * Specify whether the content tab should be activated automatically or
+     * manually
+     */
+    activation?: 'automatic' | 'manual';
+    /**
+     * Provide an accessible label to be read when a user interacts with this
+     * component
+     */
+    'aria-label': string;
+    /**
+     * Provide child elements to be rendered inside `ContentTabs`.
+     * These elements should render a `ContentTab`
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be added to the container node
+     */
+    className?: string;
+    /**
+     * Specify whether component is contained type
+     */
+    contained?: boolean;
+    /**
+     * If using `IconTab`, specify the size of the icon being used.
+     */
+    iconSize?: 'default' | 'lg';
+    /**
+     * Provide the props that describe the left overflow button
+     */
+    leftOverflowButtonProps: HTMLAttributes<HTMLButtonElement>;
+    /**
+     * Specify whether to use the light component variant
+     */
+    light?: boolean;
+    /**
+     * Provide the props that describe the right overflow button
+     */
+    rightOverflowButtonProps: HTMLAttributes<HTMLButtonElement>;
+    /**
+     * Optionally provide a delay (in milliseconds) passed to the lodash
+     * debounce of the onScroll handler. This will impact the responsiveness
+     * of scroll arrow buttons rendering when scrolling to the first or last tab.
+     */
+    scrollDebounceWait?: number;
+    /**
+     * Choose whether to automatically scroll to newly selected tabs
+     * on component rerender
+     */
+    scrollIntoView?: boolean;
+}
+declare function TabList({ activation, 'aria-label': label, children, className: customClassName, contained, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait, scrollIntoView, ...rest }: TabListProps): JSX.Element;
+declare namespace TabList {
+    var propTypes: {
+        /**
+         * Specify whether the content tab should be activated automatically or
+         * manually
+         */
+        activation: PropTypes.Requireable<string>;
+        /**
+         * Provide an accessible label to be read when a user interacts with this
+         * component
+         */
+        'aria-label': PropTypes.Validator<string>;
+        /**
+         * Provide child elements to be rendered inside `ContentTabs`.
+         * These elements should render a `ContentTab`
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be added to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether component is contained type
+         */
+        contained: PropTypes.Requireable<boolean>;
+        /**
+         * If using `IconTab`, specify the size of the icon being used.
+         */
+        iconSize: PropTypes.Requireable<string>;
+        /**
+         * Provide the props that describe the left overflow button
+         */
+        leftOverflowButtonProps: PropTypes.Requireable<object>;
+        /**
+         * Specify whether to use the light component variant
+         */
+        light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Provide the props that describe the right overflow button
+         */
+        rightOverflowButtonProps: PropTypes.Requireable<object>;
+        /**
+         * Optionally provide a delay (in milliseconds) passed to the lodash
+         * debounce of the onScroll handler. This will impact the responsiveness
+         * of scroll arrow buttons rendering when scrolling to the first or last tab.
+         */
+        scrollDebounceWait: PropTypes.Requireable<number>;
+        /**
+         * Choose whether to automatically scroll
+         * to newly selected tabs on component rerender
+         */
+        scrollIntoView: PropTypes.Requireable<boolean>;
+    };
+}
+/**
+ * Tab
+ */
+export interface TabProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Provide a custom element to render instead of the default button
+     */
+    as?: keyof ReactHTML | ComponentType;
+    /**
+     * Provide child elements to be rendered inside `Tab`.
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be added to your Tab
+     */
+    className?: string;
+    /**
+     * Whether your Tab is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Provide a handler that is invoked when a user clicks on the control
+     */
+    onClick?(event: MouseEvent): void;
+    /**
+     * Provide a handler that is invoked on the key down event for the control
+     */
+    onKeyDown?(event: KeyboardEvent): void;
+    /**
+     * An optional parameter to allow overriding the anchor rendering.
+     * Useful for using Tab along with react-router or other client
+     * side router libraries.
+     */
+    renderButton?(): ReactNode;
+    /**
+     * Optional prop to render an icon next to the label.
+     * Can be a React component class
+     */
+    renderIcon?: ComponentType<{
+        size: number;
+    }>;
+    /**
+     * An optional label to render under the primary tab label.
+     * Only useful for conained tabs.
+     */
+    secondaryLabel?: string;
+}
+declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement>>;
+/**
+ * IconTab
+ */
+export interface IconTabProps extends DivAttributes {
+    /**
+     * Provide an icon to be rendered inside `IconTab` as the visual label for Tab.
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be added to your Tab
+     */
+    className?: string;
+    /**
+     * Specify whether the tooltip for the icon should be open when it first renders
+     */
+    defaultOpen?: boolean;
+    /**
+     * Specify the duration in milliseconds to delay before displaying the tooltip for the icon.
+     */
+    enterDelayMs?: number;
+    /**
+     * Provide the label to be rendered inside the Tooltip. The label will use
+     * `aria-labelledby` and will fully describe the child node that is provided.
+     * This means that if you have text in the child node it will not be
+     * announced to the screen reader.
+     */
+    label: ReactNode;
+    /**
+     * Specify the duration in milliseconds to delay before hiding the tooltip
+     */
+    leaveDelayMs?: number;
+}
+declare const IconTab: React.ForwardRefExoticComponent<IconTabProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * TabPanel
+ */
+export interface TabPanelProps extends DivAttributes {
+    /**
+     * Provide child elements to be rendered inside `TabPanel`.
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be added to TabPanel.
+     */
+    className?: string;
+}
+declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * TabPanels
+ */
+export interface TabPanelsProps {
+    /**
+     * Provide child elements to be rendered inside `TabPanels`.
+     */
+    children?: ReactNode;
+}
+declare function TabPanels({ children }: TabPanelsProps): JSX.Element[] | null | undefined;
+declare namespace TabPanels {
+    var propTypes: {
+        /**
+         * Provide child elements to be rendered inside `TabPanels`.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+}
+export { Tabs, Tab, IconTab, TabPanel, TabPanels, TabList };