@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
39 lines (38 loc) • 1.98 kB
TypeScript
import { Dispatch, HTMLAttributes, JSX, SetStateAction } from 'react';
import { SelectedAriaAttributes } from '../../../types';
import { NavigationTab } from '../../NavigationTabs/NavigationTabs';
import { Tab } from '../Tabs';
import { TabsAlignment } from '../Tabs.utils';
import { TabListAriaAttributes } from './TabList.utils';
export type TabListProps<IsNavigation extends boolean> = {
/** ARIA attributes to enhance accessibility
* `{'aria-label'? string;`
* `'aria-labelledby'?: string;}`
* */
aria: SelectedAriaAttributes<TabListAriaAttributes>;
selectedTabIndex: number;
setSelectedTabIndex: Dispatch<SetStateAction<number>>;
/** An array of Tab Objects containing the id, content, label, and other optional parameters.
* `{id: string; content: React.ReactNode; label: string; iconName?: IconName; numberIndicatorValue?: string;}[]`*/
tabs: IsNavigation extends true ? NavigationTab[] : Tab[];
/** Alignment of the Tabs.
* @default 'left'
*/
alignment?: TabsAlignment;
/** Index of the tab to be selected when Tabs are rendered the first time.
* @default 0
* */
defaultSelectedTabIndex?: number;
/** Sets the TabList to navigation mode, using links instead of buttons */
isNavigation?: boolean;
/** Callback function called when the selected tab changes. */
onTabChange?: (selectedTabIndex: number) => void;
} & HTMLAttributes<HTMLDivElement> & (IsNavigation extends false ? {
id: string;
} : unknown);
/**
*
* The TabList component is an internal component used in DSTabs and DSNavigationTabs.
* It dynamically renders either a div with role="tablist" or a nav element based on the isNavigation prop.
*/
export declare const TabList: <IsNavigation extends boolean>({ aria, id: tabListId, selectedTabIndex, setSelectedTabIndex, tabs, alignment, className, defaultSelectedTabIndex, isNavigation, onTabChange, ...rest }: TabListProps<IsNavigation>) => JSX.Element;