@itwin/itwinui-react/esm/core/ExpandableBlock/ExpandableBlock.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
type ExpandableBlockOwnProps = {
    /**
     * Status of the block.
     * When set, a colored status icon is shown at the end of the main text.
     */
    status?: 'positive' | 'negative' | 'warning' | 'informational';
    /**
     * Whether or not to show the block's content.
     * @default false
     */
    isExpanded?: boolean;
    /**
     * Callback function for toggling an expansion state.
     */
    onToggle?: (isExpanding: boolean) => void;
    /**
     * Content in the expandable block.
     */
    children: React.ReactNode;
    /**
     * Modify size of the ExpandableBlock.
     * @default 'default'
     */
    size?: 'default' | 'small';
    /**
     * Style of the ExpandableBlock.
     * Use 'borderless' to hide outline.
     * @default 'default'
     */
    styleType?: 'default' | 'borderless';
    /**
     * Disables ExpandableBlock.
     * @default false
     */
    disabled?: boolean;
};
export declare const ExpandableBlockWrapper: PolymorphicForwardRefComponent<"div", ExpandableBlockOwnProps>;
type ExpandableBlockTriggerOwnProps = {
    label?: React.ReactNode;
    caption?: React.ReactNode;
    expandIcon?: React.ReactNode;
    endIcon?: React.ReactNode;
};
export declare const ExpandableBlockTrigger: PolymorphicForwardRefComponent<"div", ExpandableBlockTriggerOwnProps>;
type ExpandableBlockContentOwnProps = {
    innerProps?: React.ComponentPropsWithoutRef<'div'>;
};
export declare const ExpandableBlockContent: PolymorphicForwardRefComponent<"div", ExpandableBlockContentOwnProps>;
/**
 * Expandable block with customizable Title, Caption, Content and EndIcon subcomponents.
 * @example
 *  <ExpandableBlock.Wrapper>
 *    <ExpandableBlock.Trigger>
 *      <ExpandableBlock.ExpandIcon/>
 *      <ExpandableBlock.LabelArea>
 *        <ExpandableBlock.Title/>
 *        <ExpandableBlock.Caption/>
 *      </ExpandableBlock.LabelArea>
 *      <ExpandableBlock.EndIcon/>
 *    </ExpandableBlock.Trigger>
 *    <ExpandableBlock.Content/>
 *  </ExpandableBlock.Wrapper>
 */
export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", ExpandableBlockOwnProps & {
    title?: React.ReactNode;
} & Pick<ExpandableBlockTriggerOwnProps, "caption" | "endIcon">> & {
    Wrapper: PolymorphicForwardRefComponent<"div", ExpandableBlockOwnProps>;
    /**
     * `Header` container that contains `ExpandIcon`, `LabelArea` and `EndIcon` subcomponents
     * @example
     * <ExpandableBlock.Trigger>
     *    <ExpandableBlock.ExpandIcon/>
     *    <ExpandableBlock.LabelArea/>
     *    <ExpandableBlock.EndIcon/>
     * </ExpandableBlock.Trigger>
     */
    Trigger: PolymorphicForwardRefComponent<"div", ExpandableBlockTriggerOwnProps>;
    /**
     * The expanding icon on the left of header
     */
    ExpandIcon: PolymorphicForwardRefComponent<"span", {}>;
    /**
     * `LabelArea` subcomponent that contains `Title` and `Caption`
     * @example
     * <ExpandableBlock.LabelArea>
     *    <ExpandableBLock.Title> Title </ExpandableBlock.Title>
     *    <ExpandableBlock.Caption> Caption </ExpandableBlock.Caption>
     * </ExpandableBlock.LabelArea>
     */
    LabelArea: PolymorphicForwardRefComponent<"span", {}>;
    /**
     * The main text displayed on the block header, regardless of state.
     */
    Title: PolymorphicForwardRefComponent<"button", {}>;
    /**
     * Small note displayed below title, regardless of state.
     */
    Caption: PolymorphicForwardRefComponent<"div", {}>;
    /**
     * Svg icon displayed at the end of the main text.
     * Will override status icon if specified. Used inside `Header` subcomponent.
     * @example
     * <ExpandableBlock.Trigger>
     *    <ExpandableBlock.EndIcon> <SvgIcon/> </ExpandableBlock.EndIcon>
     * <ExpandableBlock.Trigger/>
     */
    EndIcon: PolymorphicForwardRefComponent<"span", Omit<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;
    }, "ref">>;
    /**
     * Content shown in the block's body when fully expanded.
     * @example
     * <ExpandableBlock.Wrapper>
     *    <ExpandableBlock.Content> Content </ExpandableBlock.Content>
     * </ExpandableBlock.Wrapper>
     */
    Content: PolymorphicForwardRefComponent<"div", ExpandableBlockContentOwnProps>;
};
export {};