| 1 | import * as React from "react";
|
| 2 | import { type IconName } from "@blueprintjs/icons";
|
| 3 | import { Elevation } from "../../common";
|
| 4 | import { type HTMLDivProps, type MaybeElement, type Props } from "../../common/props";
|
| 5 | import { type 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?: React.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?: React.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?: React.JSX.Element | string;
|
| 78 | /**
|
| 79 | * Optional title renderer function. If provided, it is recommended to include a Blueprint `<H6>` element
|
| 80 | * as part of the title. The render function is supplied with `className` and `id` attributes which you must
|
| 81 | * forward to the DOM. The `title` prop is also passed along to this renderer via `props.children`.
|
| 82 | *
|
| 83 | * @default H6
|
| 84 | */
|
| 85 | titleRenderer?: React.FC<React.HTMLAttributes<HTMLElement>>;
|
| 86 | }
|
| 87 | /**
|
| 88 | * Section component.
|
| 89 | *
|
| 90 | * @see https://blueprintjs.com/docs/#core/components/section
|
| 91 | */
|
| 92 | export declare const Section: React.FC<SectionProps>;
|