import { default as React } from 'react'; import { Layouts } from '../../helpers'; import { ModalProps, ModalProviderProps } from '../modal'; import { TableOfContentsItemProps } from './table-of-contents-item'; /** * @deprecated Use TableOfContents from `@tedi-design-system/react/tedi` instead. */ export interface TableOfContentsProps { /** * List of items to be shown in the table of contents */ items: TableOfContentsItemProps[]; /** * Heading of the table of contents * @default Value from LabelProvider */ heading?: string; /** * Should component be initially shown. Won't work with open and onToggle. * @default false */ defaultOpen?: boolean; /** * Should the component be open or closed. * Use to handle state outside of component, should use with onToggle prop. */ open?: boolean; /** * Callback when component is toggled. * Use to handle state outside of component, should use with open prop. */ onToggle?: (open: boolean) => void; /** * Show icons before items * @default false */ showIcons?: boolean; /** * When should mobile layout to be used * @default 'mobile' */ breakToMobile?: Layouts; /** * Props passed to ModalProvider */ modalProviderProps?: ModalProviderProps; /** * Props passed to Modal */ modalProps?: ModalProps; /** * Should the component hide on mobile view when the page is scrolled * @default true */ hideOnScroll?: boolean; /** * Open items' id's **/ openItems?: string[]; /** * Additional class name */ className?: string; } interface TableOfContentsContext { openItems?: string[]; showIcons?: boolean; } export declare const TableOfContentsContext: React.Context; /** * TableOfContents is helper component that can be used to show table of contents for long pages or multistep forms. It keeps itself fixed next to the content when scrolled (On desktop).

* When used to link to sections on the same page, make sure to use the same id on the section and the table of contents item Anchor. Setting `tabIndex` on the section is also necessary for the focus to work correctly in some screen-readers. * More info here and here.

* When used to keep track of multistep form progress, usage on `showIcons={true}` is recommended. Keep in mind that `isValid` property is optional and can be undefined to show not validated steps.
* Also it is possible to use disabled-text as item content, to show that user can't skip to next step.

* * @deprecated Use TableOfContents from `@tedi-design-system/react/tedi` instead. */ export declare const TableOfContents: (props: TableOfContentsProps) => import("react/jsx-runtime").JSX.Element; export default TableOfContents;