@payfit/unity-components
Version:
40 lines (39 loc) • 1.55 kB
TypeScript
import { ReactNode } from 'react';
/**
* @description
* The CollapsibleTitle component renders the clickable header of a Collapsible component.
* It displays a title with an icon that rotates based on the expanded state.
* @example
* ```tsx
* <Collapsible>
* <CollapsibleTitle>Section Title</CollapsibleTitle>
* <CollapsibleContent>Content</CollapsibleContent>
* </Collapsible>
* ```
* @component
* @see {@link Collapsible} - The parent component
* @see {@link CollapsibleContent} - The content component that is shown/hidden
*/
interface CollapsibleTitleProps {
/**
* The content of the collapsible title.
*/
children: ReactNode;
/**
* Optional content to display after the title.
*/
suffix?: ReactNode;
}
/**
* The title component for a Collapsible.
*
* This component renders a heading with a button that toggles the expanded state of the parent Collapsible.
* It displays an icon that rotates based on the expanded state to indicate the current state.
* @param {CollapsibleTitleProps} props - The component props
* @param {ReactNode} props.children - The content of the title
* @param {ReactNode} [props.suffix] - Optional content to display after the title
* @param {React.Ref<HTMLDivElement>} ref - A ref to the underlying HTML div element
* @returns {JSX.Element} The rendered CollapsibleTitle component
*/
declare const CollapsibleTitle: import('react').ForwardRefExoticComponent<CollapsibleTitleProps & import('react').RefAttributes<HTMLDivElement>>;
export { CollapsibleTitle };