@itwin/itwinui-react
Version:
A react component library for iTwinUI
336 lines (335 loc) • 10.3 kB
TypeScript
import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
type TabsOrientationProps = {
/**
* Orientation of the tabs.
* @default 'horizontal'
*/
orientation?: 'horizontal';
/**
* Type of the tabs.
*
* If `orientation = 'vertical'`, `pill` is not applicable.
* @default 'default'
*/
type?: 'default' | 'borderless' | 'pill';
} | {
orientation: 'vertical';
type?: 'default' | 'borderless';
};
type TabsWrapperOwnProps = {
/**
* Color of the bar on the active tab.
* @default 'blue'
*/
color?: 'blue' | 'green';
/**
* Control whether focusing tabs (using arrow keys) should automatically select them.
* Use 'manual' if tab panel content is not preloaded.
* @default 'auto'
*/
focusActivationMode?: 'auto' | 'manual';
/**
* Value of the tab that should be active on initial render.
*
* Should be used for uncontrolled state (when no `value` passed).
*
* If not specified, then first tab will be active by default.
*/
defaultValue?: string;
/**
* Value of the active tab for controlled state.
*/
value?: string;
/**
* Function that gets called when active tab *changes* (uncontrolled mode) or should *change* (controlled mode).
*
* Should be used alongside `value` prop.
*
* If need to listen to each tab click, use `onClick` prop on `Tabs.Tab`.
* Similarly, for each focus, use `onFocus` prop on `Tabs.Tab`.
*/
onValueChange?: (value: string) => void;
/**
* @deprecated Do not use.
*/
defaultChecked?: never;
} & TabsOrientationProps;
type TabsWrapperPresentationOwnProps = {
orientation?: 'horizontal' | 'vertical';
};
type TabListOwnProps = {
/**
* Tab items.
*/
children: React.ReactNode[];
};
type TabListPresentationOwnProps = {
type?: 'default' | 'borderless' | 'pill';
color?: 'blue' | 'green';
orientation?: 'horizontal' | 'vertical';
size?: 'default' | 'large';
};
type TabOwnProps = {
/**
* Value used to associate the tab with a given panel.
*/
value: string;
/**
* Tab label used for simple Tab construction.
* Cannot be used with tabs that have icons or descriptions.
*/
label?: string | React.ReactNode;
/**
* @deprecated Don't pass `id`, as it will be automatically set.
*/
id?: string;
};
type TabsActionsOwnProps = {
/**
* Passes props to the wrapper component for the actions
*/
wrapperProps?: React.ComponentPropsWithRef<'div'>;
};
type TabsPanelOwnProps = {
/**
* Value used to associate the panel with a given tab.
*/
value: string;
/**
* @deprecated Don't pass `id`, as it will be automatically set.
*/
id?: string;
};
type TabsLegacyProps = {
/**
* Content displayed to the right/bottom of the horizontal/vertical tabs
*
* If `type = 'pill'`, `actions` is not applicable.
*/
actions?: React.ReactNode[];
/**
* Elements shown for each tab.
* Recommended to pass an array of `Tab` components.
*/
labels: React.ReactNode[];
/**
* Handler for activating a tab.
*/
onTabSelected?: (index: number) => void;
/**
* Index of the active tab.
*/
activeIndex?: number;
/**
* Control whether focusing tabs (using arrow keys) should automatically select them.
* Use 'manual' if tab panel content is not preloaded.
* @default 'auto'
*/
focusActivationMode?: 'auto' | 'manual';
/**
* Color of the bar on the active tab.
* @default 'blue'
*/
color?: 'blue' | 'green';
/**
* Custom CSS class name for tabs.
*/
tabsClassName?: string;
/**
* Custom CSS class name for tab panel.
*/
contentClassName?: string;
/**
* Custom CSS class name for the tabs wrapper.
*/
wrapperClassName?: string;
/**
* Content inside the tab panel.
*/
children?: React.ReactNode;
/**
* @deprecated Tabs will now overflow by default, so this prop does nothing.
*/
overflowOptions?: {
/**
* @deprecated Tabs will now overflow by default, so this prop does nothing.
*/
useOverflow?: boolean;
};
defaultValue?: never;
defaultChecked?: never;
} & TabsOrientationProps;
type TabLegacyProps = {
/**
* The main label shown in the tab.
*/
label?: React.ReactNode;
/**
* Secondary label shown below the main label.
*/
sublabel?: React.ReactNode;
/**
* Svg icon shown before the labels.
*/
startIcon?: React.JSX.Element;
/**
* Control whether the tab is disabled.
*/
disabled?: boolean;
/**
* Custom content appended to the tab.
*/
children?: React.ReactNode;
/**
* `value` of the tab.
*
* Will be set by parent `Tabs` component.
*/
value?: string;
};
/**
* Legacy Tab component.
* For full functionality use composition API.
*
* Individual tab component to be used in the `labels` prop of `Tabs`.
* @example
* const tabs = [
* <Tab label='Label 1' sublabel='Description 1' />,
* <Tab label='Label 2' startIcon={<SvgPlaceholder />} />,
* ];
*/
declare const LegacyTab: PolymorphicForwardRefComponent<"button", TabLegacyProps>;
export { LegacyTab as Tab };
/**
* Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
* `Tabs.Tab` and `Tabs.Panel` can be associated with each other by passing them the same `value`.
* @example
* <Tabs.Wrapper>
* <Tabs.TabList>
* <Tabs.Tab value='tab1' label='Label 1' />
* <Tabs.Tab value='tab2' label='Label 2' />
* <Tabs.Tab value='tab3' label='Label 3' />
* </Tabs.TabList>
* <Tabs.Actions>
* <Button>Sample Button</Button>
* </Tabs.Actions>
* <Tabs.Panel value='tab1'>Content 1</Tabs.Panel>
* <Tabs.Panel value='tab2'>Content 2</Tabs.Panel>
* <Tabs.Panel value='tab3'>Content 3</Tabs.Panel>
* </Tabs.Wrapper>
*
* @example
* <Tabs orientation='vertical'/>
*
* @example
* <Tabs.Wrapper focusActivationMode='manual'>
* <Tabs.Tab value='sample'>
* <Tabs.TabIcon>
* <SvgPlaceholder />
* </Tabs.TabIcon>
* <Tabs.TabLabel>Sample Label</Tabs.TabLabel>
* <Tabs.TabDescription>Sample Description</Tabs.TabDescription>
* </Tabs.Tab>
* </Tabs.Wrapper>
*/
export declare const Tabs: PolymorphicForwardRefComponent<"div", TabsLegacyProps> & {
/**
* A wrapper component for Tabs
*/
Wrapper: PolymorphicForwardRefComponent<"div", TabsWrapperOwnProps>;
/**
* Tablist subcomponent which contains all of the tab subcomponents.
* @example
* <Tabs.TabList>
* <Tabs.Tab value='tab1' label='Label 1' />
* <Tabs.Tab value='tab2' label='Label 2' />
* <Tabs.Tab value='tab3' label='Label 3' />
* </Tabs.TabList>
*
* @example
* <Tabs.TabList>
* <Tabs.Tab value='tab1' label='Green Tab' />
* </Tabs.TabList>
*
* @example
* <Tabs.TabList focusActivationMode='manual'>
* <Tabs.Tab value='tab1' label='Manual Focus Tab' />
* </Tabs.TabList>
*/
TabList: PolymorphicForwardRefComponent<"div", TabListOwnProps>;
/**
* Tab subcomponent which is used for each of the tabs.
* @example
* <Tabs.Tab value='tab1' label='Label 1' />
*
* @example
* <Tabs.Tab value='sample'>
* <Tabs.TabIcon>
* <SvgPlaceholder />
* </Tabs.TabIcon>
* <Tabs.TabLabel>Sample Label</Tabs.TabLabel>
* <Tabs.TabDescription>Sample Description</Tabs.TabDescription>
* </Tabs.Tab>
*
*/
Tab: PolymorphicForwardRefComponent<"button", TabOwnProps>;
/**
* Tab icon subcomponent which places an icon on the left side of the tab.
*/
TabIcon: PolymorphicForwardRefComponent<"span", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
size?: "auto" | "small" | "medium" | "large" | import("../../utils/types.js").AnyString;
fill?: "default" | "positive" | "informational" | "negative" | "warning" | import("../../utils/types.js").AnyString;
padded?: boolean;
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
as?: "span" | undefined;
}>;
/**
* Tab label subcomponent which holds the tab's label.
*/
TabLabel: PolymorphicForwardRefComponent<"span", {}>;
/**
* Tab description subcomponent which places a description under the tab label.
*/
TabDescription: PolymorphicForwardRefComponent<"span", {}>;
/**
* Tab actions subcomponent which contains action buttons that are placed at the end of the tabs.
*/
Actions: PolymorphicForwardRefComponent<"div", TabsActionsOwnProps>;
/**
* Tab panel subcomponent which contains the tab's content.
* @example
* <Tabs.Panel value='tab1'>
* Sample Panel
* </Tabs.Panel>
*/
Panel: PolymorphicForwardRefComponent<"div", TabsPanelOwnProps>;
};
/**
* Presentational version of `Tabs`. It renders purely static elements, without any associated behaviors.
*/
export declare const unstable_TabsPresentation: {
Wrapper: PolymorphicForwardRefComponent<"div", TabsWrapperPresentationOwnProps>;
/**
* This could be used with `role="list"` or `role="tablist"`.
*/
TabList: PolymorphicForwardRefComponent<"div", TabListPresentationOwnProps>;
/**
* This renders a button without any role by default. The rendered element can be changed using the `as` prop
* (e.g. `as="a"` or `as="div"`)
*
* When _not_ using `role="tab"`, the selected state can be set using `aria-current="true"` (or `aria-current="page"`).
*
* When using `role="tab"`, the selected state can be set using `aria-selected="true"`.
*
* Example:
* ```jsx
* <TabsPresentation.Tab
* as="a"
* href=""
* aria-current="true"
* />
* ```
*/
Tab: PolymorphicForwardRefComponent<"button", {}>;
};