@eccenca/gui-elements/dist/types/components/ContentGroup/ContentGroup.d.ts

GUI elements based on other libraries, usable in React application, written in Typescript.

import React from "react";
import { TestableComponent } from "../../components/interfaces";
import { StickyTargetProps } from "../index";
export interface ContentGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, TestableComponent {
    /**
     * Title of the content group.
     */
    title?: string;
    /**
     * Level of the content group.
     */
    level?: number;
    /**
     * Context information to display in the header.
     */
    contextInfo?: React.ReactElement | React.ReactElement[];
    /**
     * Annotation to display in the content.
     */
    annotation?: React.ReactElement | React.ReactElement[];
    /**
     * Action options to display in the header.
     */
    actionOptions?: React.ReactElement | React.ReactElement[];
    /**
     * Flag to collapse the content group.
     */
    isCollapsed?: boolean;
    /**
     * Text to display when the callapse button is hovered.
     * If not set then it uses "Show more" or "Show less".
     */
    textToggleCollapse?: string;
    /**
     * Event handler to toggle the collapse state.
     */
    handlerToggleCollapse?: () => void;
    /**
     * Use a border on the left side to visually connect the whole content content group.
     */
    borderMainConnection?: boolean;
    /**
     * Use a border on the left side to visually emphase the content group.
     * If it is set to an array of color codes then the border is multi colored.
     */
    borderSubConnection?: boolean | string[];
    /**
     * Whitespace size between header and the content.
     */
    whitespaceSize?: "tiny" | "small" | "medium" | "large" | "xlarge";
    /**
     * Title minimum headline level.
     */
    minimumHeadlineLevel?: 1 | 2 | 3 | 4 | 5 | 6;
    /**
     * Props to pass to `StickyTarget`.
     */
    stickyHeaderProps?: Omit<StickyTargetProps, "children">;
    /**
     * Description of the content group.
     * Added as tooltip to an info icon placed in the content group header.
     */
    description?: string;
    /**
     * Flag to hide the group divider.
     */
    hideGroupDivider?: boolean;
    /**
     * Additional props to pass to the content container.
     */
    contentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
}
/**
 * Manage display of a grouped content section.
 * Add info, actions and context annotations by using its properties.
 * Can be nested into each other.
 */
export declare const ContentGroup: ({ children, className, title, contextInfo, annotation, actionOptions, isCollapsed, textToggleCollapse, handlerToggleCollapse, borderMainConnection, borderSubConnection, level, minimumHeadlineLevel, whitespaceSize, style, stickyHeaderProps, description, hideGroupDivider, contentProps, ...otherContentWrapperProps }: ContentGroupProps) => React.JSX.Element;