| 1 | import * as React from "react";
|
| 2 | import { IconName } from "@blueprintjs/icons";
|
| 3 | import { Elevation } from "../../common";
|
| 4 | import { HTMLDivProps, MaybeElement, Props } from "../../common/props";
|
| 5 | import { CollapseProps } from "../collapse/collapse";
|
| 6 | /**
|
| 7 | * Subset of {@link Elevation} options which are visually supported by the {@link Section} component.
|
| 8 | *
|
| 9 | * Note that an elevation greater than 1 creates too much visual clutter/noise in the UI, especially when
|
| 10 | * multiple Sections are shown on a single page.
|
| 11 | */
|
| 12 | export type SectionElevation = typeof Elevation.ZERO | typeof Elevation.ONE;
|
| 13 | export interface SectionCollapseProps extends Pick<CollapseProps, "className" | "isOpen" | "keepChildrenMounted" | "transitionDuration"> {
|
| 14 | /**
|
| 15 | * Whether the component is initially open or closed.
|
| 16 | *
|
| 17 | * This prop has no effect if `collapsible={false}` or the component is in controlled mode,
|
| 18 | * i.e. when `isOpen` is **not** `undefined`.
|
| 19 | *
|
| 20 | * @default true
|
| 21 | */
|
| 22 | defaultIsOpen?: boolean;
|
| 23 | /**
|
| 24 | * Whether the component is open or closed.
|
| 25 | *
|
| 26 | * Passing a boolean value to `isOpen` will enabled controlled mode for the component.
|
| 27 | */
|
| 28 | isOpen?: boolean;
|
| 29 | /**
|
| 30 | * Callback invoked in controlled mode when the collapse toggle element is clicked.
|
| 31 | */
|
| 32 | onToggle?: () => void;
|
| 33 | }
|
| 34 | export interface SectionProps extends Props, Omit<HTMLDivProps, "title">, React.RefAttributes<HTMLDivElement> {
|
| 35 | /**
|
| 36 | * Whether this section's contents should be collapsible.
|
| 37 | *
|
| 38 | * @default false
|
| 39 | */
|
| 40 | collapsible?: boolean;
|
| 41 | /**
|
| 42 | * Subset of props to forward to the underlying {@link Collapse} component, with the addition of a
|
| 43 | * `defaultIsOpen` option which sets the default open state of the component when in uncontrolled mode.
|
| 44 | */
|
| 45 | collapseProps?: SectionCollapseProps;
|
| 46 | /**
|
| 47 | * Whether this section should use compact styles.
|
| 48 | *
|
| 49 | * @default false
|
| 50 | */
|
| 51 | compact?: boolean;
|
| 52 | /**
|
| 53 | * Visual elevation of this container element.
|
| 54 | *
|
| 55 | * @default Elevation.ZERO
|
| 56 | */
|
| 57 | elevation?: SectionElevation;
|
| 58 | /**
|
| 59 | * Name of a Blueprint UI icon (or an icon element) to render in the section's header.
|
| 60 | * Note that the header will only be rendered if `title` is provided.
|
| 61 | */
|
| 62 | icon?: IconName | MaybeElement;
|
| 63 | /**
|
| 64 | * Element to render on the right side of the section header.
|
| 65 | * Note that the header will only be rendered if `title` is provided.
|
| 66 | */
|
| 67 | rightElement?: JSX.Element;
|
| 68 | /**
|
| 69 | * Sub-title of the section.
|
| 70 | * Note that the header will only be rendered if `title` is provided.
|
| 71 | */
|
| 72 | subtitle?: JSX.Element | string;
|
| 73 | /**
|
| 74 | * Title of the section.
|
| 75 | * Note that the header will only be rendered if `title` is provided.
|
| 76 | */
|
| 77 | title?: JSX.Element | string;
|
| 78 | }
|
| 79 | /**
|
| 80 | * Section component.
|
| 81 | *
|
| 82 | * @see https://blueprintjs.com/docs/#core/components/section
|
| 83 | */
|
| 84 | export declare const Section: React.FC<SectionProps>;
|