@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
133 lines (132 loc) • 6.16 kB
TypeScript
/**
* Web Tabs Component
*
*/
import React from 'react';
import type { DynamicElement, InnerSpaceType, SpaceType, SpacingProps } from '../../shared/types';
import CustomContent from './TabsCustomContent';
import ContentWrapper from './TabsContentWrapper';
import type { ButtonProps } from '../Button';
import type { AnchorAllProps } from '../Anchor';
import type { SectionVariants } from '../Section';
import type { SkeletonShow } from '../Skeleton';
export type TabsData = string | {
title: string | React.ReactNode | (() => React.ReactNode);
key: string | number;
selected?: boolean;
disabled?: boolean;
content?: TabsContent;
}[] | any;
export type TabsContent = Record<string, unknown> | React.ReactNode | ((key: TabsSelectedKey) => React.ReactNode);
export type TabsTabElement = DynamicElement<null, ButtonProps | AnchorAllProps>;
export type TabsSelectedKey = string | number;
export type TabsAlign = 'left' | 'center' | 'right';
export type TabsChildren = Record<string, unknown> | React.ReactNode | ((key: TabsSelectedKey) => React.ReactNode);
export type TabsProps = Omit<React.HTMLProps<HTMLElement>, 'ref' | 'data' | 'content' | 'children' | 'label' | 'onChange' | 'onClick' | 'onFocus' | 'onMouseEnter'> & SpacingProps & {
data?: TabsData;
/**
* the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.
*/
content?: TabsContent;
/**
* To enable the visual helper `.dnb-section` on to the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.
*/
contentStyle?: SectionVariants | string;
/**
* To modify the inner space of the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `{ top: 'large' }`.
*/
contentInnerSpace?: InnerSpaceType | boolean;
label?: string;
/**
* Define what HTML element should be used. You can provide e.g. `tabElement={GatsbyLink}` – you may then provide the `to` property inside every entry (`data={[{ to: '/url', ... }]}`). Defaults to `<button>`.
*/
tabElement?: TabsTabElement;
/**
* In case one of the tabs should be opened by a `key`.
*/
selectedKey?: TabsSelectedKey;
/**
* To align the tab list on the right side `align="right"`. Defaults to `left`.
*/
align?: TabsAlign;
/**
* To enable the visual helper `.dnb-section` inside the tabs list. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.
*/
tabsStyle?: SectionVariants | string;
/**
* To modify the top padding of the tab list. Only applies `paddingTop`. Defaults to `undefined`.
*/
tabsInnerSpace?: SpaceType | boolean;
/**
* If set to `true`, the default horizontal border line under the tablist will be removed. Defaults to `false`.
*/
noBorder?: boolean;
/**
* If set to `false`, the default horizontal border line under the tablist remains inside the parent boundaries. Defaults to `true`.
*/
breakout?: boolean;
/**
* If set to `true`, the navigation icons will have a straight border at their outside. This feature is meant to be used when the Tabs component goes all the way to the browser window. Defaults to `false`.
*/
navButtonEdge?: boolean;
onOpenTabNavigationFn?: (selectedKey: TabsSelectedKey) => void;
/**
* If set to `true`, the Tabs content will pre-render all contents. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Defaults to `false`.
*/
keepInDOM?: boolean;
/**
* If set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `keepInDOM`, but in contrast, the content will render once the user is activating a tab. Defaults to `false`.
*/
preventRerender?: boolean;
/**
* If set to `true`, the content will scroll on tab change, until all tabs will be visible on the upper side of the browser window view. Defaults to `false`.
*/
scroll?: boolean;
/**
* If set to `true`, an overlaying skeleton with animation will be shown.
*/
skeleton?: SkeletonShow;
id?: string;
className?: string;
/**
* the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.
*/
children?: TabsChildren;
render?: (components: TabsRenderComponents) => React.ReactNode;
onChange?: (event: TabsEvent) => void;
onMouseEnter?: (event: TabsEvent) => void;
onClick?: (event: TabsEvent) => void | boolean;
onFocus?: (event: TabsEvent) => void;
};
export type TabsEvent = {
key: TabsSelectedKey;
selectedKey: TabsSelectedKey;
focusKey: TabsSelectedKey;
title: string | React.ReactNode;
event?: React.SyntheticEvent;
};
export type TabsRenderComponents = {
Wrapper: React.ComponentType<React.PropsWithChildren<{
className?: string;
} & Record<string, unknown>>>;
Content: React.ComponentType<Record<string, unknown>>;
TabsList: React.ComponentType<React.PropsWithChildren<{
className?: string;
} & Record<string, unknown>>>;
Tabs: React.ComponentType<Record<string, unknown>>;
};
export type TabsDummyProps = {
/**
* the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.
*/
children: React.ReactNode;
};
type TabsWithStatics = React.FC<TabsProps> & {
Content: typeof CustomContent;
ContentWrapper: typeof ContentWrapper;
};
declare const Tabs: TabsWithStatics;
export default Tabs;
export declare const Dummy: ({ children }: {
children: React.ReactNode;
}) => import("react/jsx-runtime").JSX.Element;