1 | import * as React from "react";
|
2 | import { BoxProps } from "../Box";
|
3 | import { PseudoBoxProps } from "../PseudoBox";
|
4 | import { CollapseProps } from "../Collapse";
|
5 | import { IconProps } from "../Icon";
|
6 | import { Omit } from "../common-types";
|
7 |
|
8 | interface IAccordion {
|
9 | /**
|
10 | * If `true`, multiple accordion items can be expanded at once.
|
11 | */
|
12 | allowMultiple?: boolean;
|
13 | /**
|
14 | * If `true`, any expanded accordion item can be collapsed again.
|
15 | */
|
16 | allowToggle?: boolean;
|
17 | /**
|
18 | * The index(es) of the expanded accordion item
|
19 | */
|
20 | index?: number | number[];
|
21 | /**
|
22 | * The initial index(es) of the expanded accordion item
|
23 | */
|
24 | defaultIndex?: number | number[];
|
25 | /**
|
26 | * The callback invoked when accordion items are expanded or collapsed.
|
27 | */
|
28 | onChange?: (expandedIndex?: number | number[]) => void;
|
29 | /**
|
30 | * The content of the accordion. Must be `AccordionItem`
|
31 | */
|
32 | children: React.ReactNode;
|
33 | }
|
34 |
|
35 | type AccordionProps = IAccordion & Omit<BoxProps, "onChange">;
|
36 |
|
37 | /**
|
38 | * The accordion component delivers large amounts of content in a small space through progressive disclosure.
|
39 | *
|
40 | * By default, only one item may be expanded and it can only be collapsed again by expanding another.
|
41 | */
|
42 | export const Accordion: React.FC<AccordionProps>;
|
43 |
|
44 | /////////////////////////////////////////////////////////////
|
45 |
|
46 | interface IAccordionItemRenderProps {
|
47 | isExpanded?: boolean;
|
48 | isDisabled?: boolean;
|
49 | }
|
50 |
|
51 | /**
|
52 | * The content of the accordion.
|
53 | * The children must be the `AccordionHeader` and `AccordionPanel` components.
|
54 | */
|
55 | type AccordionItemChildren =
|
56 | | { children(props: IAccordionItemRenderProps): React.ReactNode }
|
57 | | { children: React.ReactNode };
|
58 |
|
59 | interface IAccordionItem {
|
60 | /**
|
61 | * If `true`, expands the accordion in the controlled mode.
|
62 | */
|
63 | isOpen?: boolean;
|
64 | /**
|
65 | * If `true`, expands the accordion by on initial mount.
|
66 | */
|
67 | defaultIsOpen?: boolean;
|
68 | /**
|
69 | * If `true`, the accordion header will be disabled.
|
70 | */
|
71 | isDisabled?: boolean;
|
72 | /**
|
73 | * A unique id for the accordion item.
|
74 | */
|
75 | id?: string;
|
76 | /**
|
77 | * The callback fired when the accordion is expanded/collapsed.
|
78 | */
|
79 | onChange?: (isOpen: boolean) => void;
|
80 | }
|
81 |
|
82 | export type AccordionItemProps = IAccordionItem &
|
83 | AccordionItemChildren &
|
84 | PseudoBoxProps;
|
85 |
|
86 | /**
|
87 | * Accordions allow users to expand and collapse sections of content.
|
88 | * It composes `Box` component.
|
89 | */
|
90 | export const AccordionItem: React.FC<AccordionItemProps>;
|
91 |
|
92 | /////////////////////////////////////////////////////////////
|
93 |
|
94 | export type AccordionHeaderProps = PseudoBoxProps &
|
95 | React.ButtonHTMLAttributes<any>;
|
96 | /**
|
97 | * AccordionHeader component composes `PseudoBox`, this means you can use
|
98 | * the `_expanded`, `_disabled`, `_hover`, etc. props to style them
|
99 | */
|
100 | export const AccordionHeader: React.FC<AccordionHeaderProps>;
|
101 |
|
102 | /////////////////////////////////////////////////////////////
|
103 |
|
104 | /**
|
105 | * AccordionPanel component composes `Collapse` to provide the height animation
|
106 | */
|
107 | export const AccordionPanel: React.FC<CollapseProps>;
|
108 | export const AccordionIcon: React.FC<IconProps>;
|