apphouse/dist/components/panel/Panel.d.ts

Component library for React that uses observable state management and theme-able components.

import React from 'react';
import { CSSProperties } from 'glamor';
import { ApphouseComponent } from '../component.interfaces';
import { TextStyles } from '../Text';
import { BoxSizeStyles } from '../../styles/defaults/themes.interface';
/**
 * Interface for styles to be applied to the panel component
 */
export interface PanelStyles {
    container?: CSSProperties;
    content?: CSSProperties;
    title?: TextStyles;
    titlePanel?: CSSProperties;
    titleWrapper?: CSSProperties;
}
/**
 * Interface for the Panel component
 */
export interface PanelProps extends ApphouseComponent<PanelStyles> {
    /**
     * Controls whether the panel is expanded or collapsed externally
     * If not provided, the panel will be controlled internally
     * @optional
     * @default false
     */
    expanded?: boolean;
    /**
     * A callback function that is called when the panel is expanded
     * @returns void
     */
    onExpand?: (expanded: boolean) => void;
    /**
     * The title of the panel
     */
    title: React.ReactNode | JSX.Element;
    /**
     * If provided, the panel will have a max height and will be scrollable
     * @optional
     * @default auto
     */
    maxContentHeight?: number;
    /**
     * If provided, the panel will have a min height when the panel is collapsed
     * @optional
     * @default auto
     */
    minContentHeight?: number;
    /**
     * The content of the panel
     */
    children?: any;
    /**
     * A complementary component to be displayed on the right side of the title
     * @optional
     * @default null
     */
    complementaryComponent?: React.ReactNode | JSX.Element;
    /**
     * If true, the icon will on the left hidden
     * @optional
     * @default false - the icon will be displayed on the left
     */
    hideIcon?: boolean;
    /**
     * The overall size of the Panel
     * @default 'm'
     */
    size?: keyof BoxSizeStyles;
    /**
     * If true, the panel will have no border
     */
    borderless?: boolean;
}
/**
 * A minimalistic panel component that can be used to display content
 * in a panel that can be expanded and collapsed
 */
export declare const Panel: (props: PanelProps) => import("react/jsx-runtime").JSX.Element;