etudes 2.6.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/Accordion.d.ts +90 -64
- package/lib/Accordion.js +84 -33
- package/lib/Accordion.js.map +1 -1
- package/lib/Dropdown.d.ts +28 -79
- package/lib/Dropdown.js +48 -30
- package/lib/Dropdown.js.map +1 -1
- package/lib/List.d.ts +50 -42
- package/lib/List.js +39 -19
- package/lib/List.js.map +1 -1
- package/package.json +10 -10
package/lib/Accordion.d.ts
CHANGED
|
@@ -1,36 +1,28 @@
|
|
|
1
1
|
import React, { type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
|
|
2
|
-
import { type ListItemProps } from './List';
|
|
3
|
-
type Orientation = 'horizontal' | 'vertical';
|
|
2
|
+
import { type ListItemProps, type ListProps } from './List';
|
|
4
3
|
export type AccordionItemProps<T> = ListItemProps<T>;
|
|
5
|
-
export type
|
|
4
|
+
export type AccordionSectionData<T> = {
|
|
6
5
|
label: string;
|
|
7
6
|
items: T[];
|
|
8
7
|
};
|
|
9
|
-
export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
|
|
8
|
+
export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<T>, 'data' | 'itemComponentType' | 'selectedIndices' | 'onActivateAt' | 'onSelectAt' | 'onDeselectAt'> & PropsWithChildren<{
|
|
10
9
|
/**
|
|
11
|
-
*
|
|
12
|
-
|
|
13
|
-
data: SectionData<T>[];
|
|
14
|
-
/**
|
|
15
|
-
* Indicates if sections can be toggled, as in, once a section is expanded,
|
|
16
|
-
* it collapses when being selected again.
|
|
10
|
+
* Specifies if expanded sections should automatically collapse upon expanding
|
|
11
|
+
* another section.
|
|
17
12
|
*/
|
|
18
|
-
|
|
13
|
+
autoCollapse?: boolean;
|
|
19
14
|
/**
|
|
20
|
-
*
|
|
21
|
-
* indicates that no section is selected by default.
|
|
15
|
+
* Data provided to each section.
|
|
22
16
|
*/
|
|
23
|
-
|
|
17
|
+
data: AccordionSectionData<T>[];
|
|
24
18
|
/**
|
|
25
|
-
*
|
|
26
|
-
* itself. Length refers to the height in vertical orientation and width in
|
|
27
|
-
* horizontal orientation.
|
|
19
|
+
* Indices of sections that are expanded.
|
|
28
20
|
*/
|
|
29
|
-
|
|
21
|
+
expandedSectionIndices?: number[];
|
|
30
22
|
/**
|
|
31
|
-
*
|
|
23
|
+
* Indices of selected items per section.
|
|
32
24
|
*/
|
|
33
|
-
|
|
25
|
+
selectedItemIndices?: Record<number, number[]>;
|
|
34
26
|
/**
|
|
35
27
|
* Padding (in pixels) between each section.
|
|
36
28
|
*/
|
|
@@ -43,57 +35,70 @@ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildr
|
|
|
43
35
|
* visible when a section expands.
|
|
44
36
|
*/
|
|
45
37
|
maxVisibleItems?: number;
|
|
46
|
-
/**
|
|
47
|
-
* Orientation of the component.
|
|
48
|
-
*/
|
|
49
|
-
orientation?: Orientation;
|
|
50
|
-
/**
|
|
51
|
-
* Thickness of the border (in pixels) of every item and the section header
|
|
52
|
-
* itself. 0 indicates no borders.
|
|
53
|
-
*/
|
|
54
|
-
borderThickness?: number;
|
|
55
38
|
/**
|
|
56
39
|
* SVG markup to be put in the section header as the expand icon.
|
|
57
40
|
*/
|
|
58
41
|
expandIconSvg?: string;
|
|
42
|
+
/**
|
|
43
|
+
* SVG markup to be put in the section header as the collapse icon.
|
|
44
|
+
*/
|
|
45
|
+
collapseIconSvg?: string;
|
|
59
46
|
/**
|
|
60
47
|
* React component type to be used for generating items inside the component.
|
|
61
48
|
*/
|
|
62
49
|
itemComponentType: ComponentType<AccordionItemProps<T>>;
|
|
63
50
|
/**
|
|
64
|
-
* Handler invoked when
|
|
51
|
+
* Handler invoked when a section is expanded.
|
|
52
|
+
*
|
|
53
|
+
* @param sectionIndex Section index.
|
|
65
54
|
*/
|
|
66
|
-
|
|
55
|
+
onExpandSectionAt?: (sectionIndex: number) => void;
|
|
67
56
|
/**
|
|
68
|
-
* Handler invoked when
|
|
57
|
+
* Handler invoked when a section is collapsed.
|
|
58
|
+
*
|
|
59
|
+
* @param sectionIndex Section index.
|
|
69
60
|
*/
|
|
70
|
-
|
|
71
|
-
}>;
|
|
72
|
-
declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
|
|
61
|
+
onCollapseSectionAt?: (sectionIndex: number) => void;
|
|
73
62
|
/**
|
|
74
|
-
*
|
|
63
|
+
* Handler invoked when an item is activated in a section.
|
|
64
|
+
*
|
|
65
|
+
* @param sectionIndex Section index.
|
|
66
|
+
* @param itemIndex Item index.
|
|
67
|
+
*/
|
|
68
|
+
onActivateAt?: (sectionIndex: number, itemIndex: number) => void;
|
|
69
|
+
/**
|
|
70
|
+
* Handler invoked when an item is selected in a section.
|
|
71
|
+
*
|
|
72
|
+
* @param sectionIndex Section index.
|
|
73
|
+
* @param itemIndex Item index.
|
|
74
|
+
*/
|
|
75
|
+
onSelectAt?: (sectionIndex: number, itemIndex: number) => void;
|
|
76
|
+
/**
|
|
77
|
+
* Handler invoked when an item is deselected in a section.
|
|
78
|
+
*
|
|
79
|
+
* @param sectionIndex Section index.
|
|
80
|
+
* @param itemIndex Item index.
|
|
75
81
|
*/
|
|
76
|
-
|
|
82
|
+
onDeselectAt?: (sectionIndex: number, itemIndex: number) => void;
|
|
83
|
+
}>;
|
|
84
|
+
declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & Omit<ListProps<T>, "data" | "itemComponentType" | "selectedIndices" | "onActivateAt" | "onDeselectAt" | "onSelectAt"> & {
|
|
77
85
|
/**
|
|
78
|
-
*
|
|
79
|
-
*
|
|
86
|
+
* Specifies if expanded sections should automatically collapse upon expanding
|
|
87
|
+
* another section.
|
|
80
88
|
*/
|
|
81
|
-
|
|
89
|
+
autoCollapse?: boolean | undefined;
|
|
82
90
|
/**
|
|
83
|
-
*
|
|
84
|
-
* indicates that no section is selected by default.
|
|
91
|
+
* Data provided to each section.
|
|
85
92
|
*/
|
|
86
|
-
|
|
93
|
+
data: AccordionSectionData<T>[];
|
|
87
94
|
/**
|
|
88
|
-
*
|
|
89
|
-
* itself. Length refers to the height in vertical orientation and width in
|
|
90
|
-
* horizontal orientation.
|
|
95
|
+
* Indices of sections that are expanded.
|
|
91
96
|
*/
|
|
92
|
-
|
|
97
|
+
expandedSectionIndices?: number[] | undefined;
|
|
93
98
|
/**
|
|
94
|
-
*
|
|
99
|
+
* Indices of selected items per section.
|
|
95
100
|
*/
|
|
96
|
-
|
|
101
|
+
selectedItemIndices?: Record<number, number[]> | undefined;
|
|
97
102
|
/**
|
|
98
103
|
* Padding (in pixels) between each section.
|
|
99
104
|
*/
|
|
@@ -106,36 +111,57 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
|
|
|
106
111
|
* visible when a section expands.
|
|
107
112
|
*/
|
|
108
113
|
maxVisibleItems?: number | undefined;
|
|
109
|
-
/**
|
|
110
|
-
* Orientation of the component.
|
|
111
|
-
*/
|
|
112
|
-
orientation?: Orientation | undefined;
|
|
113
|
-
/**
|
|
114
|
-
* Thickness of the border (in pixels) of every item and the section header
|
|
115
|
-
* itself. 0 indicates no borders.
|
|
116
|
-
*/
|
|
117
|
-
borderThickness?: number | undefined;
|
|
118
114
|
/**
|
|
119
115
|
* SVG markup to be put in the section header as the expand icon.
|
|
120
116
|
*/
|
|
121
117
|
expandIconSvg?: string | undefined;
|
|
118
|
+
/**
|
|
119
|
+
* SVG markup to be put in the section header as the collapse icon.
|
|
120
|
+
*/
|
|
121
|
+
collapseIconSvg?: string | undefined;
|
|
122
122
|
/**
|
|
123
123
|
* React component type to be used for generating items inside the component.
|
|
124
124
|
*/
|
|
125
125
|
itemComponentType: React.ComponentType<AccordionItemProps<T>>;
|
|
126
126
|
/**
|
|
127
|
-
* Handler invoked when
|
|
127
|
+
* Handler invoked when a section is expanded.
|
|
128
|
+
*
|
|
129
|
+
* @param sectionIndex Section index.
|
|
130
|
+
*/
|
|
131
|
+
onExpandSectionAt?: ((sectionIndex: number) => void) | undefined;
|
|
132
|
+
/**
|
|
133
|
+
* Handler invoked when a section is collapsed.
|
|
134
|
+
*
|
|
135
|
+
* @param sectionIndex Section index.
|
|
136
|
+
*/
|
|
137
|
+
onCollapseSectionAt?: ((sectionIndex: number) => void) | undefined;
|
|
138
|
+
/**
|
|
139
|
+
* Handler invoked when an item is activated in a section.
|
|
140
|
+
*
|
|
141
|
+
* @param sectionIndex Section index.
|
|
142
|
+
* @param itemIndex Item index.
|
|
143
|
+
*/
|
|
144
|
+
onActivateAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
|
|
145
|
+
/**
|
|
146
|
+
* Handler invoked when an item is selected in a section.
|
|
147
|
+
*
|
|
148
|
+
* @param sectionIndex Section index.
|
|
149
|
+
* @param itemIndex Item index.
|
|
128
150
|
*/
|
|
129
|
-
|
|
151
|
+
onSelectAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
|
|
130
152
|
/**
|
|
131
|
-
* Handler invoked when
|
|
153
|
+
* Handler invoked when an item is deselected in a section.
|
|
154
|
+
*
|
|
155
|
+
* @param sectionIndex Section index.
|
|
156
|
+
* @param itemIndex Item index.
|
|
132
157
|
*/
|
|
133
|
-
|
|
158
|
+
onDeselectAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
|
|
134
159
|
} & {
|
|
135
160
|
children?: React.ReactNode;
|
|
136
161
|
} & {
|
|
137
162
|
ref?: React.Ref<HTMLDivElement> | undefined;
|
|
138
163
|
}) => ReactElement;
|
|
139
164
|
export default _default;
|
|
140
|
-
export declare const AccordionHeader: ({ ...props }: HTMLAttributes<HTMLButtonElement>) => React.JSX.Element;
|
|
141
|
-
export declare const AccordionExpandIcon: ({ ...props }: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
|
|
165
|
+
export declare const AccordionHeader: ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => React.JSX.Element;
|
|
166
|
+
export declare const AccordionExpandIcon: ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => React.JSX.Element;
|
|
167
|
+
export declare const AccordionCollapseIcon: ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => React.JSX.Element;
|
package/lib/Accordion.js
CHANGED
|
@@ -73,8 +73,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
73
73
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
74
74
|
};
|
|
75
75
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
76
|
-
exports.AccordionExpandIcon = exports.AccordionHeader = void 0;
|
|
76
|
+
exports.AccordionCollapseIcon = exports.AccordionExpandIcon = exports.AccordionHeader = void 0;
|
|
77
77
|
var classnames_1 = __importDefault(require("classnames"));
|
|
78
|
+
var fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
|
|
78
79
|
var react_1 = __importStar(require("react"));
|
|
79
80
|
var Each_1 = __importDefault(require("./Each"));
|
|
80
81
|
var FlatSVG_1 = __importDefault(require("./FlatSVG"));
|
|
@@ -85,33 +86,68 @@ var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
|
|
|
85
86
|
var cloneStyledElement_1 = __importDefault(require("./utils/cloneStyledElement"));
|
|
86
87
|
var styles_1 = __importDefault(require("./utils/styles"));
|
|
87
88
|
exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
88
|
-
var children = _a.children, className = _a.className, style = _a.style, _b = _a.
|
|
89
|
-
var
|
|
90
|
-
var toggleSectionAt = function (
|
|
91
|
-
if (
|
|
92
|
-
|
|
89
|
+
var children = _a.children, className = _a.className, style = _a.style, _b = _a.autoCollapse, autoCollapse = _b === void 0 ? false : _b, _c = _a.borderThickness, borderThickness = _c === void 0 ? 0 : _c, collapseIconSvg = _a.collapseIconSvg, data = _a.data, _d = _a.expandedSectionIndices, externalExpandedSectionIndices = _d === void 0 ? [] : _d, expandIconSvg = _a.expandIconSvg, isTogglable = _a.isTogglable, itemComponentType = _a.itemComponentType, _e = _a.itemLength, itemLength = _e === void 0 ? 50 : _e, _f = _a.itemPadding, itemPadding = _f === void 0 ? 0 : _f, _g = _a.maxVisibleItems, maxVisibleItems = _g === void 0 ? -1 : _g, _h = _a.orientation, orientation = _h === void 0 ? 'vertical' : _h, _j = _a.sectionPadding, sectionPadding = _j === void 0 ? 0 : _j, _k = _a.selectedItemIndices, externalSelectedItemIndices = _k === void 0 ? {} : _k, _l = _a.selectionMode, selectionMode = _l === void 0 ? 'single' : _l, onActivateAt = _a.onActivateAt, onSelectAt = _a.onSelectAt, onDeselectAt = _a.onDeselectAt, props = __rest(_a, ["children", "className", "style", "autoCollapse", "borderThickness", "collapseIconSvg", "data", "expandedSectionIndices", "expandIconSvg", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "sectionPadding", "selectedItemIndices", "selectionMode", "onActivateAt", "onSelectAt", "onDeselectAt"]);
|
|
90
|
+
var isSectionExpandedAt = function (idx) { return expandedSectionIndices.indexOf(idx) >= 0; };
|
|
91
|
+
var toggleSectionAt = function (idx) {
|
|
92
|
+
if (isSectionExpandedAt(idx)) {
|
|
93
|
+
setExpandedSectionIndices(function (prev) { return prev.filter(function (t) { return t !== idx; }); });
|
|
94
|
+
}
|
|
95
|
+
else if (autoCollapse) {
|
|
96
|
+
setExpandedSectionIndices([idx]);
|
|
93
97
|
}
|
|
94
98
|
else {
|
|
95
|
-
|
|
99
|
+
setExpandedSectionIndices(function (prev) { return __spreadArray(__spreadArray([], __read(prev.filter(function (t) { return t !== idx; })), false), [idx], false); });
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
var selectAt = function (sectionIdx, itemIdx) {
|
|
103
|
+
var _a;
|
|
104
|
+
switch (selectionMode) {
|
|
105
|
+
case 'multiple':
|
|
106
|
+
setSelectedItemIndices(function (prev) {
|
|
107
|
+
var _a;
|
|
108
|
+
var _b;
|
|
109
|
+
return (__assign(__assign({}, prev), (_a = {}, _a[sectionIdx] = __spreadArray(__spreadArray([], __read(((_b = prev[sectionIdx]) !== null && _b !== void 0 ? _b : []).filter(function (t) { return t !== itemIdx; })), false), [itemIdx], false), _a)));
|
|
110
|
+
});
|
|
111
|
+
onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(sectionIdx, itemIdx);
|
|
112
|
+
break;
|
|
113
|
+
case 'single':
|
|
114
|
+
setSelectedItemIndices((_a = {}, _a[sectionIdx] = [itemIdx], _a));
|
|
115
|
+
onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(sectionIdx, itemIdx);
|
|
116
|
+
break;
|
|
117
|
+
default:
|
|
118
|
+
break;
|
|
96
119
|
}
|
|
97
120
|
};
|
|
98
|
-
var
|
|
99
|
-
|
|
100
|
-
|
|
121
|
+
var deselectAt = function (sectionIdx, itemIdx) {
|
|
122
|
+
setSelectedItemIndices(function (prev) {
|
|
123
|
+
var _a;
|
|
124
|
+
var _b;
|
|
125
|
+
return (__assign(__assign({}, prev), (_a = {}, _a[sectionIdx] = ((_b = prev[sectionIdx]) !== null && _b !== void 0 ? _b : []).filter(function (t) { return t !== itemIdx; }), _a)));
|
|
126
|
+
});
|
|
127
|
+
onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(sectionIdx, itemIdx);
|
|
128
|
+
};
|
|
129
|
+
var _m = __read((0, react_1.useState)(externalExpandedSectionIndices), 2), expandedSectionIndices = _m[0], setExpandedSectionIndices = _m[1];
|
|
130
|
+
var _o = __read((0, react_1.useState)(externalSelectedItemIndices), 2), selectedItemIndices = _o[0], setSelectedItemIndices = _o[1];
|
|
101
131
|
(0, react_1.useEffect)(function () {
|
|
102
|
-
|
|
103
|
-
|
|
132
|
+
if ((0, fast_deep_equal_1.default)(expandedSectionIndices, expandedSectionIndices))
|
|
133
|
+
return;
|
|
134
|
+
setExpandedSectionIndices(externalExpandedSectionIndices);
|
|
135
|
+
}, [JSON.stringify(externalExpandedSectionIndices)]);
|
|
104
136
|
(0, react_1.useEffect)(function () {
|
|
105
|
-
|
|
106
|
-
|
|
137
|
+
if ((0, fast_deep_equal_1.default)(externalSelectedItemIndices, selectedItemIndices))
|
|
138
|
+
return;
|
|
139
|
+
setSelectedItemIndices(externalSelectedItemIndices);
|
|
140
|
+
}, [JSON.stringify(externalSelectedItemIndices)]);
|
|
107
141
|
var components = (0, asComponentDict_1.default)(children, {
|
|
108
142
|
header: exports.AccordionHeader,
|
|
109
143
|
expandIcon: exports.AccordionExpandIcon,
|
|
144
|
+
collapseIcon: exports.AccordionCollapseIcon,
|
|
110
145
|
});
|
|
111
146
|
var fixedClassNames = (0, asClassNameDict_1.default)({
|
|
112
147
|
root: (0, classnames_1.default)(orientation),
|
|
113
148
|
header: (0, classnames_1.default)(orientation),
|
|
114
149
|
expandIcon: (0, classnames_1.default)(orientation),
|
|
150
|
+
collapseIcon: (0, classnames_1.default)(orientation),
|
|
115
151
|
});
|
|
116
152
|
var fixedStyles = (0, asStyleDict_1.default)({
|
|
117
153
|
root: __assign({ alignItems: 'center', boxSizing: 'border-box', display: 'flex', flex: '0 0 auto', justifyContent: 'flex-start', padding: '0' }, orientation === 'vertical' ? {
|
|
@@ -146,6 +182,10 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
146
182
|
margin: '0',
|
|
147
183
|
padding: '0',
|
|
148
184
|
},
|
|
185
|
+
collapseIcon: {
|
|
186
|
+
margin: '0',
|
|
187
|
+
padding: '0',
|
|
188
|
+
},
|
|
149
189
|
list: __assign({ transitionDuration: '100ms', transitionTimingFunction: 'ease-out' }, orientation === 'vertical' ? {
|
|
150
190
|
width: '100%',
|
|
151
191
|
transitionProperty: 'height, margin',
|
|
@@ -173,20 +213,34 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
173
213
|
transitionTimingFunction: 'ease-out',
|
|
174
214
|
width: '15px',
|
|
175
215
|
},
|
|
216
|
+
collapseIcon: {
|
|
217
|
+
boxSizing: 'border-box',
|
|
218
|
+
display: 'block',
|
|
219
|
+
fill: '#000',
|
|
220
|
+
height: '15px',
|
|
221
|
+
transformOrigin: 'center',
|
|
222
|
+
transitionDuration: '100ms',
|
|
223
|
+
transitionProperty: 'transform',
|
|
224
|
+
transitionTimingFunction: 'ease-out',
|
|
225
|
+
width: '15px',
|
|
226
|
+
},
|
|
176
227
|
});
|
|
177
228
|
return (react_1.default.createElement("div", __assign({}, props, { className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }),
|
|
178
229
|
react_1.default.createElement(Each_1.default, { in: data }, function (section, sectionIdx) {
|
|
179
|
-
var _a, _b;
|
|
230
|
+
var _a, _b, _c, _d;
|
|
180
231
|
var numItems = section.items.length;
|
|
181
232
|
var numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems);
|
|
182
233
|
var menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness;
|
|
183
|
-
var isCollapsed = !
|
|
234
|
+
var isCollapsed = !isSectionExpandedAt(sectionIdx);
|
|
235
|
+
var headerComponent = (_a = components.header) !== null && _a !== void 0 ? _a : react_1.default.createElement(exports.AccordionHeader, { style: defaultStyles.header });
|
|
236
|
+
var expandIconComponent = (_b = components.expandIcon) !== null && _b !== void 0 ? _b : (expandIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: expandIconSvg, style: defaultStyles.expandIcon }) : react_1.default.createElement(react_1.default.Fragment, null));
|
|
237
|
+
var collapseIconComponent = (_c = components.collapseIcon) !== null && _c !== void 0 ? _c : (collapseIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: collapseIconSvg, style: defaultStyles.collapseIcon }) : expandIconComponent);
|
|
184
238
|
return (react_1.default.createElement("div", { style: (0, styles_1.default)(fixedStyles.section, orientation === 'vertical' ? {
|
|
185
239
|
marginTop: sectionIdx === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
|
|
186
240
|
} : {
|
|
187
241
|
marginLeft: sectionIdx === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
|
|
188
242
|
}) },
|
|
189
|
-
cloneStyledElement_1.default.apply(void 0, __spreadArray([
|
|
243
|
+
cloneStyledElement_1.default.apply(void 0, __spreadArray([headerComponent, {
|
|
190
244
|
className: (0, classnames_1.default)(fixedClassNames.header, {
|
|
191
245
|
collapsed: isCollapsed,
|
|
192
246
|
expanded: !isCollapsed,
|
|
@@ -195,9 +249,9 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
195
249
|
onClick: function () { return toggleSectionAt(sectionIdx); },
|
|
196
250
|
}], [
|
|
197
251
|
react_1.default.createElement("label", { style: fixedStyles.headerLabel, dangerouslySetInnerHTML: { __html: section.label } }),
|
|
198
|
-
(0, cloneStyledElement_1.default)(
|
|
199
|
-
className: (0, classnames_1.default)(fixedClassNames.expandIcon),
|
|
200
|
-
style: (0, styles_1.default)(fixedStyles.expandIcon),
|
|
252
|
+
(0, cloneStyledElement_1.default)(isCollapsed ? expandIconComponent : collapseIconComponent, {
|
|
253
|
+
className: (0, classnames_1.default)(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),
|
|
254
|
+
style: (0, styles_1.default)(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),
|
|
201
255
|
}),
|
|
202
256
|
], false)),
|
|
203
257
|
react_1.default.createElement(List_1.default, { style: (0, styles_1.default)(fixedStyles.list, orientation === 'vertical' ? {
|
|
@@ -208,25 +262,22 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
208
262
|
marginLeft: isCollapsed ? '0px' : "".concat(itemPadding - borderThickness, "px"),
|
|
209
263
|
overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',
|
|
210
264
|
width: isCollapsed ? '0px' : "".concat(menuLength, "px"),
|
|
211
|
-
}), borderThickness: borderThickness, data: section.items,
|
|
212
|
-
if (selectedSectionIndex !== sectionIdx)
|
|
213
|
-
return;
|
|
214
|
-
setSelectedSectionIndex(-1);
|
|
215
|
-
setSelectedItemIndex(-1);
|
|
216
|
-
}, onSelectAt: function (itemIdx) {
|
|
217
|
-
setSelectedSectionIndex(sectionIdx);
|
|
218
|
-
setSelectedItemIndex(itemIdx);
|
|
219
|
-
} })));
|
|
265
|
+
}), borderThickness: borderThickness, data: section.items, selectionMode: selectionMode, isTogglable: isTogglable, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, orientation: orientation, selectedIndices: (_d = selectedItemIndices[sectionIdx]) !== null && _d !== void 0 ? _d : [], onActivateAt: function (itemIdx) { return onActivateAt === null || onActivateAt === void 0 ? void 0 : onActivateAt(sectionIdx, itemIdx); }, onDeselectAt: function (itemIdx) { return deselectAt(sectionIdx, itemIdx); }, onSelectAt: function (itemIdx) { return selectAt(sectionIdx, itemIdx); } })));
|
|
220
266
|
})));
|
|
221
267
|
});
|
|
222
268
|
var AccordionHeader = function (_a) {
|
|
223
|
-
var props = __rest(_a, []);
|
|
224
|
-
return react_1.default.createElement("button", __assign({}, props));
|
|
269
|
+
var children = _a.children, props = __rest(_a, ["children"]);
|
|
270
|
+
return react_1.default.createElement("button", __assign({}, props), children);
|
|
225
271
|
};
|
|
226
272
|
exports.AccordionHeader = AccordionHeader;
|
|
227
273
|
var AccordionExpandIcon = function (_a) {
|
|
228
|
-
var props = __rest(_a, []);
|
|
229
|
-
return react_1.default.createElement("div", __assign({}, props));
|
|
274
|
+
var children = _a.children, props = __rest(_a, ["children"]);
|
|
275
|
+
return react_1.default.createElement("div", __assign({}, props), children);
|
|
230
276
|
};
|
|
231
277
|
exports.AccordionExpandIcon = AccordionExpandIcon;
|
|
278
|
+
var AccordionCollapseIcon = function (_a) {
|
|
279
|
+
var children = _a.children, props = __rest(_a, ["children"]);
|
|
280
|
+
return react_1.default.createElement("div", __assign({}, props), children);
|
|
281
|
+
};
|
|
282
|
+
exports.AccordionCollapseIcon = AccordionCollapseIcon;
|
|
232
283
|
//# sourceMappingURL=Accordion.js.map
|
package/lib/Accordion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps } from './List'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type AccordionItemProps<T> = ListItemProps<T>\n\nexport type SectionData<T> = {\n label: string\n items: T[]\n}\n\nexport type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n /**\n * Data provided to each section.\n */\n data: SectionData<T>[]\n\n /**\n * Indicates if sections can be toggled, as in, once a section is expanded,\n * it collapses when being selected again.\n */\n isTogglable?: boolean\n\n /**\n * Index of the section that is selected by default. Any value less than 0\n * indicates that no section is selected by default.\n */\n defaultExpandedSectionIndex?: number\n\n /**\n * Length (in pixels) of each item. This does not apply to the section hedaer\n * itself. Length refers to the height in vertical orientation and width in\n * horizontal orientation.\n */\n itemLength?: number\n\n /**\n * Padding (in pixels) between each item.\n */\n itemPadding?: number\n\n /**\n * Padding (in pixels) between each section.\n */\n sectionPadding?: number\n\n /**\n * Maximum number of items that are viside when a section expands. When a\n * value greater than or equal to 0 is specified, only that number of items\n * will be visible at a time, and a scrollbar will appear to scroll to\n * remaining items. Any value less than 0 indicates that all items will be\n * visible when a section expands.\n */\n maxVisibleItems?: number\n\n /**\n * Orientation of the component.\n */\n orientation?: Orientation\n\n /**\n * Thickness of the border (in pixels) of every item and the section header\n * itself. 0 indicates no borders.\n */\n borderThickness?: number\n\n /**\n * SVG markup to be put in the section header as the expand icon.\n */\n expandIconSvg?: string\n\n /**\n * React component type to be used for generating items inside the component.\n */\n itemComponentType: ComponentType<AccordionItemProps<T>>\n\n /**\n * Handler invoked when the selected item index of any section changes.\n */\n onItemIndexChange?: (index: number) => void\n\n /**\n * Handler invoked when the selected section index changes.\n */\n onSectionIndexChange?: (index: number) => void\n}>\n\nexport default forwardRef(({\n children,\n className,\n style,\n borderThickness = 0,\n data,\n defaultExpandedSectionIndex = -1,\n expandIconSvg,\n isTogglable = true,\n itemComponentType,\n itemLength = 50,\n itemPadding = 0,\n maxVisibleItems = -1,\n orientation = 'vertical',\n sectionPadding = 0,\n onItemIndexChange,\n onSectionIndexChange,\n ...props\n}, ref) => {\n const isSectionSelectedAt = (index: number) => expandedSectionIndex === index\n\n const toggleSectionAt = (index: number) => {\n if (isTogglable && isSectionSelectedAt(index)) {\n setExpandedSectionIndex(-1)\n }\n else {\n setExpandedSectionIndex(index)\n }\n }\n\n const [expandedSectionIndex, setExpandedSectionIndex] = useState(defaultExpandedSectionIndex)\n const [selectedSectionIndex, setSelectedSectionIndex] = useState(-1)\n const [selectedItemIndex, setSelectedItemIndex] = useState(-1)\n\n useEffect(() => {\n onSectionIndexChange?.(expandedSectionIndex)\n }, [expandedSectionIndex])\n\n useEffect(() => {\n onItemIndexChange?.(selectedItemIndex)\n }, [selectedItemIndex])\n\n const components = asComponentDict(children, {\n header: AccordionHeader,\n expandIcon: AccordionExpandIcon,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n header: classNames(orientation),\n expandIcon: classNames(orientation),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flex: '0 0 auto',\n justifyContent: 'flex-start',\n padding: '0',\n ...orientation === 'vertical' ? {\n flexDirection: 'column',\n height: 'auto',\n } : {\n flexDirection: 'row',\n width: 'auto',\n },\n },\n section: {\n alignItems: 'flex-start',\n display: 'flex',\n flex: '0 0 auto',\n justifyContent: 'flex-start',\n margin: '0',\n padding: '0',\n ...orientation === 'vertical' ? {\n flexDirection: 'column',\n width: '100%',\n } : {\n flexDirection: 'row',\n height: '100%',\n },\n },\n header: {\n borderWidth: `${borderThickness}px`,\n margin: '0',\n outline: 'none',\n ...orientation === 'vertical' ? {\n width: '100%',\n } : {\n height: '100%',\n },\n },\n headerLabel: {\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n transition: 'inherit',\n },\n expandIcon: {\n margin: '0',\n padding: '0',\n },\n list: {\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n width: '100%',\n transitionProperty: 'height, margin',\n top: '100%',\n } : {\n height: '100%',\n transitionProperty: 'width, margin',\n left: '100%',\n },\n },\n })\n\n const defaultStyles = asStyleDict({\n header: {\n alignItems: 'center',\n background: '#fff',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: '0 10px',\n transitionDuration: '100ms',\n transitionProperty: 'transform, opacity, background, color',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n height: '50px',\n } : {\n width: '50px',\n },\n },\n expandIcon: {\n boxSizing: 'border-box',\n display: 'block',\n fill: '#000',\n height: '15px',\n transformOrigin: 'center',\n transitionDuration: '100ms',\n transitionProperty: 'transform',\n transitionTimingFunction: 'ease-out',\n width: '15px',\n },\n })\n\n return (\n <div\n {...props}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <Each in={data}>\n {(section, sectionIdx) => {\n const numItems = section.items.length\n const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n const isCollapsed = !isSectionSelectedAt(sectionIdx)\n\n return (\n <div style={styles(fixedStyles.section, orientation === 'vertical' ? {\n marginTop: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n } : {\n marginLeft: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n })}>\n {cloneStyledElement(components.header ?? <AccordionHeader style={defaultStyles.header}/>, {\n className: classNames(fixedClassNames.header, {\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n style: styles(fixedStyles.header),\n onClick: () => toggleSectionAt(sectionIdx),\n }, ...[\n <label style={fixedStyles.headerLabel} dangerouslySetInnerHTML={{ __html: section.label }}/>,\n cloneStyledElement(components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>), {\n className: classNames(fixedClassNames.expandIcon),\n style: styles(fixedStyles.expandIcon),\n }),\n ])}\n <List\n style={styles(fixedStyles.list, orientation === 'vertical' ? {\n height: isCollapsed ? '0px' : `${menuLength}px`,\n marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n } : {\n marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n width: isCollapsed ? '0px' : `${menuLength}px`,\n })}\n borderThickness={borderThickness}\n data={section.items}\n isSelectable={true}\n isTogglable={isTogglable}\n itemComponentType={itemComponentType}\n itemLength={itemLength}\n itemPadding={itemPadding}\n orientation={orientation}\n selectedIndex={selectedSectionIndex === sectionIdx ? selectedItemIndex : -1}\n onDeselectAt={() => {\n if (selectedSectionIndex !== sectionIdx) return\n setSelectedSectionIndex(-1)\n setSelectedItemIndex(-1)\n }}\n onSelectAt={itemIdx => {\n setSelectedSectionIndex(sectionIdx)\n setSelectedItemIndex(itemIdx)\n }}\n />\n </div>\n )\n }}\n </Each>\n </div>\n )\n}) as <T>(props: AccordionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const AccordionHeader = ({ ...props }: HTMLAttributes<HTMLButtonElement>) => <button {...props}/>\n\nexport const AccordionExpandIcon = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}
|
|
1
|
+
{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,oEAAqC;AACrC,6CAA4J;AAC5J,gDAAyB;AACzB,sDAA+B;AAC/B,gDAAiE;AACjE,4EAAqD;AACrD,4EAAqD;AACrD,oEAA6C;AAC7C,kFAA2D;AAC3D,0DAAmC;AAmGnC,kBAAe,IAAA,kBAAU,EAAC,UAAC,EAuB1B,EAAE,GAAG;IAtBJ,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,KAAK,WAAA,EACL,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACpB,uBAAmB,EAAnB,eAAe,mBAAG,CAAC,KAAA,EACnB,eAAe,qBAAA,EACf,IAAI,UAAA,EACJ,8BAA2D,EAAnC,8BAA8B,mBAAG,EAAE,KAAA,EAC3D,aAAa,mBAAA,EACb,WAAW,iBAAA,EACX,iBAAiB,uBAAA,EACjB,kBAAe,EAAf,UAAU,mBAAG,EAAE,KAAA,EACf,mBAAe,EAAf,WAAW,mBAAG,CAAC,KAAA,EACf,uBAAoB,EAApB,eAAe,mBAAG,CAAC,CAAC,KAAA,EACpB,mBAAwB,EAAxB,WAAW,mBAAG,UAAU,KAAA,EACxB,sBAAkB,EAAlB,cAAc,mBAAG,CAAC,KAAA,EAClB,2BAAqD,EAAhC,2BAA2B,mBAAG,EAAE,KAAA,EACrD,qBAAwB,EAAxB,aAAa,mBAAG,QAAQ,KAAA,EACxB,YAAY,kBAAA,EACZ,UAAU,gBAAA,EACV,YAAY,kBAAA,EACT,KAAK,cAtBiB,sVAuB1B,CADS;IAER,IAAM,mBAAmB,GAAG,UAAC,GAAW,IAAK,OAAA,sBAAsB,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAxC,CAAwC,CAAA;IAErF,IAAM,eAAe,GAAG,UAAC,GAAW;QAClC,IAAI,mBAAmB,CAAC,GAAG,CAAC,EAAE;YAC5B,yBAAyB,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,KAAK,GAAG,EAAT,CAAS,CAAC,EAA3B,CAA2B,CAAC,CAAA;SAC/D;aACI,IAAI,YAAY,EAAE;YACrB,yBAAyB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;SACjC;aACI;YACH,yBAAyB,CAAC,UAAA,IAAI,IAAI,8CAAI,IAAI,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,KAAK,GAAG,EAAT,CAAS,CAAC,YAAE,GAAG,WAApC,CAAqC,CAAC,CAAA;SACzE;IACH,CAAC,CAAA;IAED,IAAM,QAAQ,GAAG,UAAC,UAAkB,EAAE,OAAe;;QACnD,QAAQ,aAAa,EAAE;YACrB,KAAK,UAAU;gBACb,sBAAsB,CAAC,UAAA,IAAI;;;oBAAI,OAAA,uBAC1B,IAAI,gBACN,UAAU,2CAAO,CAAC,MAAA,IAAI,CAAC,UAAU,CAAC,mCAAI,EAAE,CAAC,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,KAAK,OAAO,EAAb,CAAa,CAAC,YAAE,OAAO,gBAC9E,CAAA;iBAAA,CAAC,CAAA;gBAEH,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,UAAU,EAAE,OAAO,CAAC,CAAA;gBAEjC,MAAK;YACP,KAAK,QAAQ;gBACX,sBAAsB,WAAG,GAAC,UAAU,IAAG,CAAC,OAAO,CAAC,MAAG,CAAA;gBACnD,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,UAAU,EAAE,OAAO,CAAC,CAAA;gBAEjC,MAAK;YACP;gBACE,MAAK;SACR;IACH,CAAC,CAAA;IAED,IAAM,UAAU,GAAG,UAAC,UAAkB,EAAE,OAAe;QACrD,sBAAsB,CAAC,UAAA,IAAI;;;YAAI,OAAA,uBAC1B,IAAI,gBACN,UAAU,IAAG,CAAC,MAAA,IAAI,CAAC,UAAU,CAAC,mCAAI,EAAE,CAAC,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,KAAK,OAAO,EAAb,CAAa,CAAC,OACjE,CAAA;SAAA,CAAC,CAAA;QAEH,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,UAAU,EAAE,OAAO,CAAC,CAAA;IACrC,CAAC,CAAA;IAEK,IAAA,KAAA,OAAsD,IAAA,gBAAQ,EAAC,8BAA8B,CAAC,IAAA,EAA7F,sBAAsB,QAAA,EAAE,yBAAyB,QAA4C,CAAA;IAC9F,IAAA,KAAA,OAAgD,IAAA,gBAAQ,EAAC,2BAA2B,CAAC,IAAA,EAApF,mBAAmB,QAAA,EAAE,sBAAsB,QAAyC,CAAA;IAE3F,IAAA,iBAAS,EAAC;QACR,IAAI,IAAA,yBAAO,EAAC,sBAAsB,EAAE,sBAAsB,CAAC;YAAE,OAAM;QAEnE,yBAAyB,CAAC,8BAA8B,CAAC,CAAA;IAC3D,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,8BAA8B,CAAC,CAAC,CAAC,CAAA;IAEpD,IAAA,iBAAS,EAAC;QACR,IAAI,IAAA,yBAAO,EAAC,2BAA2B,EAAE,mBAAmB,CAAC;YAAE,OAAM;QAErE,sBAAsB,CAAC,2BAA2B,CAAC,CAAA;IACrD,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC,CAAC,CAAA;IAEjD,IAAM,UAAU,GAAG,IAAA,yBAAe,EAAC,QAAQ,EAAE;QAC3C,MAAM,EAAE,uBAAe;QACvB,UAAU,EAAE,2BAAmB;QAC/B,YAAY,EAAE,6BAAqB;KACpC,CAAC,CAAA;IAEF,IAAM,eAAe,GAAG,IAAA,yBAAe,EAAC;QACtC,IAAI,EAAE,IAAA,oBAAU,EAAC,WAAW,CAAC;QAC7B,MAAM,EAAE,IAAA,oBAAU,EAAC,WAAW,CAAC;QAC/B,UAAU,EAAE,IAAA,oBAAU,EAAC,WAAW,CAAC;QACnC,YAAY,EAAE,IAAA,oBAAU,EAAC,WAAW,CAAC;KACtC,CAAC,CAAA;IAEF,IAAM,WAAW,GAAG,IAAA,qBAAW,EAAC;QAC9B,IAAI,aACF,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,UAAU,EAChB,cAAc,EAAE,YAAY,EAC5B,OAAO,EAAE,GAAG,IACT,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,aAAa,EAAE,QAAQ;YACvB,MAAM,EAAE,MAAM;SACf,CAAC,CAAC,CAAC;YACF,aAAa,EAAE,KAAK;YACpB,KAAK,EAAE,MAAM;SACd,CACF;QACD,OAAO,aACL,UAAU,EAAE,YAAY,EACxB,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,UAAU,EAChB,cAAc,EAAE,YAAY,EAC5B,MAAM,EAAE,GAAG,EACX,OAAO,EAAE,GAAG,IACT,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,aAAa,EAAE,QAAQ;YACvB,KAAK,EAAE,MAAM;SACd,CAAC,CAAC,CAAC;YACF,aAAa,EAAE,KAAK;YACpB,MAAM,EAAE,MAAM;SACf,CACF;QACD,MAAM,aACJ,WAAW,EAAE,UAAG,eAAe,OAAI,EACnC,MAAM,EAAE,GAAG,EACX,OAAO,EAAE,MAAM,IACZ,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,KAAK,EAAE,MAAM;SACd,CAAC,CAAC,CAAC;YACF,MAAM,EAAE,MAAM;SACf,CACF;QACD,WAAW,EAAE;YACX,KAAK,EAAE,SAAS;YAChB,UAAU,EAAE,SAAS;YACrB,QAAQ,EAAE,SAAS;YACnB,UAAU,EAAE,SAAS;YACrB,aAAa,EAAE,SAAS;YACxB,UAAU,EAAE,SAAS;YACrB,UAAU,EAAE,SAAS;SACtB;QACD,UAAU,EAAE;YACV,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,GAAG;SACb;QACD,YAAY,EAAE;YACZ,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,GAAG;SACb;QACD,IAAI,aACF,kBAAkB,EAAE,OAAO,EAC3B,wBAAwB,EAAE,UAAU,IACjC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,KAAK,EAAE,MAAM;YACb,kBAAkB,EAAE,gBAAgB;YACpC,GAAG,EAAE,MAAM;SACZ,CAAC,CAAC,CAAC;YACF,MAAM,EAAE,MAAM;YACd,kBAAkB,EAAE,eAAe;YACnC,IAAI,EAAE,MAAM;SACb,CACF;KACF,CAAC,CAAA;IAEF,IAAM,aAAa,GAAG,IAAA,qBAAW,EAAC;QAChC,MAAM,aACJ,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,OAAO,EACpB,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,KAAK,EACpB,cAAc,EAAE,eAAe,EAC/B,OAAO,EAAE,QAAQ,EACjB,kBAAkB,EAAE,OAAO,EAC3B,kBAAkB,EAAE,uCAAuC,EAC3D,wBAAwB,EAAE,UAAU,IACjC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,MAAM,EAAE,MAAM;SACf,CAAC,CAAC,CAAC;YACF,KAAK,EAAE,MAAM;SACd,CACF;QACD,UAAU,EAAE;YACV,SAAS,EAAE,YAAY;YACvB,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,MAAM;YACd,eAAe,EAAE,QAAQ;YACzB,kBAAkB,EAAE,OAAO;YAC3B,kBAAkB,EAAE,WAAW;YAC/B,wBAAwB,EAAE,UAAU;YACpC,KAAK,EAAE,MAAM;SACd;QACD,YAAY,EAAE;YACZ,SAAS,EAAE,YAAY;YACvB,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,MAAM;YACd,eAAe,EAAE,QAAQ;YACzB,kBAAkB,EAAE,OAAO;YAC3B,kBAAkB,EAAE,WAAW;YAC/B,wBAAwB,EAAE,UAAU;YACpC,KAAK,EAAE,MAAM;SACd;KACF,CAAC,CAAA;IAEF,OAAO,CACL,kDACM,KAAK,IACT,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,EACtD,KAAK,EAAE,IAAA,gBAAM,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC;QAEtC,8BAAC,cAAI,IAAC,EAAE,EAAE,IAAI,IACX,UAAC,OAAO,EAAE,UAAU;;YACnB,IAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,MAAM,CAAA;YACrC,IAAM,eAAe,GAAG,eAAe,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;YAC5F,IAAM,UAAU,GAAG,CAAC,UAAU,GAAG,eAAe,CAAC,GAAG,eAAe,GAAG,WAAW,GAAG,CAAC,eAAe,GAAG,CAAC,CAAC,GAAG,eAAe,CAAA;YAC3H,IAAM,WAAW,GAAG,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAA;YACpD,IAAM,eAAe,GAAG,MAAA,UAAU,CAAC,MAAM,mCAAI,8BAAC,uBAAe,IAAC,KAAK,EAAE,aAAa,CAAC,MAAM,GAAG,CAAA;YAC5F,IAAM,mBAAmB,GAAG,MAAA,UAAU,CAAC,UAAU,mCAAI,CAAC,aAAa,CAAC,CAAC,CAAC,8BAAC,iBAAO,IAAC,GAAG,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,6DAAK,CAAC,CAAA;YAC9I,IAAM,qBAAqB,GAAG,MAAA,UAAU,CAAC,YAAY,mCAAI,CAAC,eAAe,CAAC,CAAC,CAAC,8BAAC,iBAAO,IAAC,GAAG,EAAE,eAAe,EAAE,KAAK,EAAE,aAAa,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAA;YAEtK,OAAO,CACL,uCAAK,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,OAAO,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;oBACnE,SAAS,EAAE,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,cAAc,GAAG,eAAe,OAAI;iBAC9E,CAAC,CAAC,CAAC;oBACF,UAAU,EAAE,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,cAAc,GAAG,eAAe,OAAI;iBAC/E,CAAC;gBACC,4BAAkB,8BAAC,eAAe,EAAE;wBACnC,SAAS,EAAE,IAAA,oBAAU,EAAC,eAAe,CAAC,MAAM,EAAE;4BAC5C,SAAS,EAAE,WAAW;4BACtB,QAAQ,EAAE,CAAC,WAAW;yBACvB,CAAC;wBACF,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,MAAM,CAAC;wBACjC,OAAO,EAAE,cAAM,OAAA,eAAe,CAAC,UAAU,CAAC,EAA3B,CAA2B;qBAC3C,GAAK;oBACJ,yCAAO,KAAK,EAAE,WAAW,CAAC,WAAW,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,KAAK,EAAE,GAAG;oBAC5F,IAAA,4BAAkB,EAAC,WAAW,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,EAAE;wBAC5E,SAAS,EAAE,IAAA,oBAAU,EAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,YAAY,CAAC;wBAC9F,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC;qBAC/E,CAAC;iBACH;gBACD,8BAAC,cAAI,IACH,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,IAAI,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;wBAC3D,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI;wBAC/C,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,WAAW,GAAG,eAAe,OAAI;wBACrE,SAAS,EAAE,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;qBAChG,CAAC,CAAC,CAAC;wBACF,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,WAAW,GAAG,eAAe,OAAI;wBACtE,SAAS,EAAE,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;wBAC/F,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI;qBAC/C,CAAC,EACF,eAAe,EAAE,eAAe,EAChC,IAAI,EAAE,OAAO,CAAC,KAAK,EACnB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,MAAA,mBAAmB,CAAC,UAAU,CAAC,mCAAI,EAAE,EACtD,YAAY,EAAE,UAAA,OAAO,IAAI,OAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,UAAU,EAAE,OAAO,CAAC,EAAnC,CAAmC,EAC5D,YAAY,EAAE,UAAA,OAAO,IAAI,OAAA,UAAU,CAAC,UAAU,EAAE,OAAO,CAAC,EAA/B,CAA+B,EACxD,UAAU,EAAE,UAAA,OAAO,IAAI,OAAA,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC,EAA7B,CAA6B,GACpD,CACE,CACP,CAAA;QACH,CAAC,CACI,CACH,CACP,CAAA;AACH,CAAC,CAAkF,CAAA;AAE5E,IAAM,eAAe,GAAG,UAAC,EAA6E;IAA3E,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAA8D,OAAA,qDAAY,KAAK,GAAG,QAAQ,CAAU,CAAA;CAAA,CAAA;AAA3I,QAAA,eAAe,mBAA4H;AAEjJ,IAAM,mBAAmB,GAAG,UAAC,EAA0E;IAAxE,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAA2D,OAAA,kDAAS,KAAK,GAAG,QAAQ,CAAO,CAAA;CAAA,CAAA;AAAtI,QAAA,mBAAmB,uBAAmH;AAE5I,IAAM,qBAAqB,GAAG,UAAC,EAA0E;IAAxE,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAA2D,OAAA,kDAAS,KAAK,GAAG,QAAQ,CAAO,CAAA;CAAA,CAAA;AAAxI,QAAA,qBAAqB,yBAAmH","sourcesContent":["import classNames from 'classnames'\nimport isEqual from 'fast-deep-equal'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps, type ListProps } from './List'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type AccordionItemProps<T> = ListItemProps<T>\n\nexport type AccordionSectionData<T> = {\n label: string\n items: T[]\n}\n\nexport type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<T>, 'data' | 'itemComponentType' | 'selectedIndices' | 'onActivateAt' | 'onSelectAt' | 'onDeselectAt'> & PropsWithChildren<{\n /**\n * Specifies if expanded sections should automatically collapse upon expanding\n * another section.\n */\n autoCollapse?: boolean\n\n /**\n * Data provided to each section.\n */\n data: AccordionSectionData<T>[]\n\n /**\n * Indices of sections that are expanded.\n */\n expandedSectionIndices?: number[]\n\n /**\n * Indices of selected items per section.\n */\n selectedItemIndices?: Record<number, number[]>\n\n /**\n * Padding (in pixels) between each section.\n */\n sectionPadding?: number\n\n /**\n * Maximum number of items that are viside when a section expands. When a\n * value greater than or equal to 0 is specified, only that number of items\n * will be visible at a time, and a scrollbar will appear to scroll to\n * remaining items. Any value less than 0 indicates that all items will be\n * visible when a section expands.\n */\n maxVisibleItems?: number\n\n /**\n * SVG markup to be put in the section header as the expand icon.\n */\n expandIconSvg?: string\n\n /**\n * SVG markup to be put in the section header as the collapse icon.\n */\n collapseIconSvg?: string\n\n /**\n * React component type to be used for generating items inside the component.\n */\n itemComponentType: ComponentType<AccordionItemProps<T>>\n\n /**\n * Handler invoked when a section is expanded.\n *\n * @param sectionIndex Section index.\n */\n onExpandSectionAt?: (sectionIndex: number) => void\n\n /**\n * Handler invoked when a section is collapsed.\n *\n * @param sectionIndex Section index.\n */\n onCollapseSectionAt?: (sectionIndex: number) => void\n\n /**\n * Handler invoked when an item is activated in a section.\n *\n * @param sectionIndex Section index.\n * @param itemIndex Item index.\n */\n onActivateAt?: (sectionIndex: number, itemIndex: number) => void\n\n /**\n * Handler invoked when an item is selected in a section.\n *\n * @param sectionIndex Section index.\n * @param itemIndex Item index.\n */\n onSelectAt?: (sectionIndex: number, itemIndex: number) => void\n\n /**\n * Handler invoked when an item is deselected in a section.\n *\n * @param sectionIndex Section index.\n * @param itemIndex Item index.\n */\n onDeselectAt?: (sectionIndex: number, itemIndex: number) => void\n}>\n\nexport default forwardRef(({\n children,\n className,\n style,\n autoCollapse = false,\n borderThickness = 0,\n collapseIconSvg,\n data,\n expandedSectionIndices: externalExpandedSectionIndices = [],\n expandIconSvg,\n isTogglable,\n itemComponentType,\n itemLength = 50,\n itemPadding = 0,\n maxVisibleItems = -1,\n orientation = 'vertical',\n sectionPadding = 0,\n selectedItemIndices: externalSelectedItemIndices = {},\n selectionMode = 'single',\n onActivateAt,\n onSelectAt,\n onDeselectAt,\n ...props\n}, ref) => {\n const isSectionExpandedAt = (idx: number) => expandedSectionIndices.indexOf(idx) >= 0\n\n const toggleSectionAt = (idx: number) => {\n if (isSectionExpandedAt(idx)) {\n setExpandedSectionIndices(prev => prev.filter(t => t !== idx))\n }\n else if (autoCollapse) {\n setExpandedSectionIndices([idx])\n }\n else {\n setExpandedSectionIndices(prev => [...prev.filter(t => t !== idx), idx])\n }\n }\n\n const selectAt = (sectionIdx: number, itemIdx: number) => {\n switch (selectionMode) {\n case 'multiple':\n setSelectedItemIndices(prev => ({\n ...prev,\n [sectionIdx]: [...(prev[sectionIdx] ?? []).filter(t => t !== itemIdx), itemIdx],\n }))\n\n onSelectAt?.(sectionIdx, itemIdx)\n\n break\n case 'single':\n setSelectedItemIndices({ [sectionIdx]: [itemIdx] })\n onSelectAt?.(sectionIdx, itemIdx)\n\n break\n default:\n break\n }\n }\n\n const deselectAt = (sectionIdx: number, itemIdx: number) => {\n setSelectedItemIndices(prev => ({\n ...prev,\n [sectionIdx]: (prev[sectionIdx] ?? []).filter(t => t !== itemIdx),\n }))\n\n onDeselectAt?.(sectionIdx, itemIdx)\n }\n\n const [expandedSectionIndices, setExpandedSectionIndices] = useState(externalExpandedSectionIndices)\n const [selectedItemIndices, setSelectedItemIndices] = useState(externalSelectedItemIndices)\n\n useEffect(() => {\n if (isEqual(expandedSectionIndices, expandedSectionIndices)) return\n\n setExpandedSectionIndices(externalExpandedSectionIndices)\n }, [JSON.stringify(externalExpandedSectionIndices)])\n\n useEffect(() => {\n if (isEqual(externalSelectedItemIndices, selectedItemIndices)) return\n\n setSelectedItemIndices(externalSelectedItemIndices)\n }, [JSON.stringify(externalSelectedItemIndices)])\n\n const components = asComponentDict(children, {\n header: AccordionHeader,\n expandIcon: AccordionExpandIcon,\n collapseIcon: AccordionCollapseIcon,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n header: classNames(orientation),\n expandIcon: classNames(orientation),\n collapseIcon: classNames(orientation),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flex: '0 0 auto',\n justifyContent: 'flex-start',\n padding: '0',\n ...orientation === 'vertical' ? {\n flexDirection: 'column',\n height: 'auto',\n } : {\n flexDirection: 'row',\n width: 'auto',\n },\n },\n section: {\n alignItems: 'flex-start',\n display: 'flex',\n flex: '0 0 auto',\n justifyContent: 'flex-start',\n margin: '0',\n padding: '0',\n ...orientation === 'vertical' ? {\n flexDirection: 'column',\n width: '100%',\n } : {\n flexDirection: 'row',\n height: '100%',\n },\n },\n header: {\n borderWidth: `${borderThickness}px`,\n margin: '0',\n outline: 'none',\n ...orientation === 'vertical' ? {\n width: '100%',\n } : {\n height: '100%',\n },\n },\n headerLabel: {\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n transition: 'inherit',\n },\n expandIcon: {\n margin: '0',\n padding: '0',\n },\n collapseIcon: {\n margin: '0',\n padding: '0',\n },\n list: {\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n width: '100%',\n transitionProperty: 'height, margin',\n top: '100%',\n } : {\n height: '100%',\n transitionProperty: 'width, margin',\n left: '100%',\n },\n },\n })\n\n const defaultStyles = asStyleDict({\n header: {\n alignItems: 'center',\n background: '#fff',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: '0 10px',\n transitionDuration: '100ms',\n transitionProperty: 'transform, opacity, background, color',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n height: '50px',\n } : {\n width: '50px',\n },\n },\n expandIcon: {\n boxSizing: 'border-box',\n display: 'block',\n fill: '#000',\n height: '15px',\n transformOrigin: 'center',\n transitionDuration: '100ms',\n transitionProperty: 'transform',\n transitionTimingFunction: 'ease-out',\n width: '15px',\n },\n collapseIcon: {\n boxSizing: 'border-box',\n display: 'block',\n fill: '#000',\n height: '15px',\n transformOrigin: 'center',\n transitionDuration: '100ms',\n transitionProperty: 'transform',\n transitionTimingFunction: 'ease-out',\n width: '15px',\n },\n })\n\n return (\n <div\n {...props}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <Each in={data}>\n {(section, sectionIdx) => {\n const numItems = section.items.length\n const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n const isCollapsed = !isSectionExpandedAt(sectionIdx)\n const headerComponent = components.header ?? <AccordionHeader style={defaultStyles.header}/>\n const expandIconComponent = components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>)\n const collapseIconComponent = components.collapseIcon ?? (collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles.collapseIcon}/> : expandIconComponent)\n\n return (\n <div style={styles(fixedStyles.section, orientation === 'vertical' ? {\n marginTop: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n } : {\n marginLeft: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n })}>\n {cloneStyledElement(headerComponent, {\n className: classNames(fixedClassNames.header, {\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n style: styles(fixedStyles.header),\n onClick: () => toggleSectionAt(sectionIdx),\n }, ...[\n <label style={fixedStyles.headerLabel} dangerouslySetInnerHTML={{ __html: section.label }}/>,\n cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n className: classNames(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),\n style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n }),\n ])}\n <List\n style={styles(fixedStyles.list, orientation === 'vertical' ? {\n height: isCollapsed ? '0px' : `${menuLength}px`,\n marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n } : {\n marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n width: isCollapsed ? '0px' : `${menuLength}px`,\n })}\n borderThickness={borderThickness}\n data={section.items}\n selectionMode={selectionMode}\n isTogglable={isTogglable}\n itemComponentType={itemComponentType}\n itemLength={itemLength}\n itemPadding={itemPadding}\n orientation={orientation}\n selectedIndices={selectedItemIndices[sectionIdx] ?? []}\n onActivateAt={itemIdx => onActivateAt?.(sectionIdx, itemIdx)}\n onDeselectAt={itemIdx => deselectAt(sectionIdx, itemIdx)}\n onSelectAt={itemIdx => selectAt(sectionIdx, itemIdx)}\n />\n </div>\n )\n }}\n </Each>\n </div>\n )\n}) as <T>(props: AccordionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const AccordionHeader = ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => <button {...props}>{children}</button>\n\nexport const AccordionExpandIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n\nexport const AccordionCollapseIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n"]}
|