etudes 2.7.0 → 3.1.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 -61
- package/lib/Accordion.js +53 -24
- package/lib/Accordion.js.map +1 -1
- package/lib/Dropdown.d.ts +22 -81
- package/lib/Dropdown.js +19 -22
- package/lib/Dropdown.js.map +1 -1
- package/lib/List.d.ts +62 -42
- package/lib/List.js +40 -19
- package/lib/List.js.map +1 -1
- package/lib/StepwiseSlider.js +1 -1
- package/lib/StepwiseSlider.js.map +1 -1
- package/package.json +1 -1
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
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
|
-
*
|
|
10
|
+
* Specifies if expanded sections should automatically collapse upon expanding
|
|
11
|
+
* another section.
|
|
12
12
|
*/
|
|
13
|
-
|
|
13
|
+
autoCollapse?: boolean;
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
16
|
-
* it collapses when being selected again.
|
|
17
|
-
*/
|
|
18
|
-
isTogglable?: boolean;
|
|
19
|
-
/**
|
|
20
|
-
* Index of the section that is selected by default. Any value less than 0
|
|
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,15 +35,6 @@ 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
|
*/
|
|
@@ -65,39 +48,63 @@ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildr
|
|
|
65
48
|
*/
|
|
66
49
|
itemComponentType: ComponentType<AccordionItemProps<T>>;
|
|
67
50
|
/**
|
|
68
|
-
* Handler invoked when
|
|
51
|
+
* Handler invoked when a section is expanded.
|
|
52
|
+
*
|
|
53
|
+
* @param sectionIndex Section index.
|
|
69
54
|
*/
|
|
70
|
-
|
|
55
|
+
onExpandSectionAt?: (sectionIndex: number) => void;
|
|
71
56
|
/**
|
|
72
|
-
* Handler invoked when
|
|
57
|
+
* Handler invoked when a section is collapsed.
|
|
58
|
+
*
|
|
59
|
+
* @param sectionIndex Section index.
|
|
73
60
|
*/
|
|
74
|
-
|
|
75
|
-
}>;
|
|
76
|
-
declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
|
|
61
|
+
onCollapseSectionAt?: (sectionIndex: number) => void;
|
|
77
62
|
/**
|
|
78
|
-
*
|
|
63
|
+
* Handler invoked when an item is activated in a section.
|
|
64
|
+
*
|
|
65
|
+
* @param sectionIndex Section index.
|
|
66
|
+
* @param itemIndex Item index.
|
|
79
67
|
*/
|
|
80
|
-
|
|
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.
|
|
81
|
+
*/
|
|
82
|
+
onDeselectAt?: (sectionIndex: number, itemIndex: number) => void;
|
|
81
83
|
/**
|
|
82
|
-
*
|
|
83
|
-
*
|
|
84
|
+
* Handler invoked when selected items have changed.
|
|
85
|
+
*
|
|
86
|
+
* @param selectedIndices Dictionary of indices of selected items per section.
|
|
84
87
|
*/
|
|
85
|
-
|
|
88
|
+
onSelectionChange?: (selectedIndices: Record<number, number[]>) => void;
|
|
89
|
+
}>;
|
|
90
|
+
declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & Omit<ListProps<T>, "data" | "itemComponentType" | "selectedIndices" | "onActivateAt" | "onDeselectAt" | "onSelectAt"> & {
|
|
86
91
|
/**
|
|
87
|
-
*
|
|
88
|
-
*
|
|
92
|
+
* Specifies if expanded sections should automatically collapse upon expanding
|
|
93
|
+
* another section.
|
|
89
94
|
*/
|
|
90
|
-
|
|
95
|
+
autoCollapse?: boolean | undefined;
|
|
96
|
+
/**
|
|
97
|
+
* Data provided to each section.
|
|
98
|
+
*/
|
|
99
|
+
data: AccordionSectionData<T>[];
|
|
91
100
|
/**
|
|
92
|
-
*
|
|
93
|
-
* itself. Length refers to the height in vertical orientation and width in
|
|
94
|
-
* horizontal orientation.
|
|
101
|
+
* Indices of sections that are expanded.
|
|
95
102
|
*/
|
|
96
|
-
|
|
103
|
+
expandedSectionIndices?: number[] | undefined;
|
|
97
104
|
/**
|
|
98
|
-
*
|
|
105
|
+
* Indices of selected items per section.
|
|
99
106
|
*/
|
|
100
|
-
|
|
107
|
+
selectedItemIndices?: Record<number, number[]> | undefined;
|
|
101
108
|
/**
|
|
102
109
|
* Padding (in pixels) between each section.
|
|
103
110
|
*/
|
|
@@ -110,15 +117,6 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
|
|
|
110
117
|
* visible when a section expands.
|
|
111
118
|
*/
|
|
112
119
|
maxVisibleItems?: number | undefined;
|
|
113
|
-
/**
|
|
114
|
-
* Orientation of the component.
|
|
115
|
-
*/
|
|
116
|
-
orientation?: Orientation | undefined;
|
|
117
|
-
/**
|
|
118
|
-
* Thickness of the border (in pixels) of every item and the section header
|
|
119
|
-
* itself. 0 indicates no borders.
|
|
120
|
-
*/
|
|
121
|
-
borderThickness?: number | undefined;
|
|
122
120
|
/**
|
|
123
121
|
* SVG markup to be put in the section header as the expand icon.
|
|
124
122
|
*/
|
|
@@ -132,13 +130,44 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
|
|
|
132
130
|
*/
|
|
133
131
|
itemComponentType: React.ComponentType<AccordionItemProps<T>>;
|
|
134
132
|
/**
|
|
135
|
-
* Handler invoked when
|
|
133
|
+
* Handler invoked when a section is expanded.
|
|
134
|
+
*
|
|
135
|
+
* @param sectionIndex Section index.
|
|
136
|
+
*/
|
|
137
|
+
onExpandSectionAt?: ((sectionIndex: number) => void) | undefined;
|
|
138
|
+
/**
|
|
139
|
+
* Handler invoked when a section is collapsed.
|
|
140
|
+
*
|
|
141
|
+
* @param sectionIndex Section index.
|
|
142
|
+
*/
|
|
143
|
+
onCollapseSectionAt?: ((sectionIndex: number) => void) | undefined;
|
|
144
|
+
/**
|
|
145
|
+
* Handler invoked when an item is activated in a section.
|
|
146
|
+
*
|
|
147
|
+
* @param sectionIndex Section index.
|
|
148
|
+
* @param itemIndex Item index.
|
|
149
|
+
*/
|
|
150
|
+
onActivateAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
|
|
151
|
+
/**
|
|
152
|
+
* Handler invoked when an item is selected in a section.
|
|
153
|
+
*
|
|
154
|
+
* @param sectionIndex Section index.
|
|
155
|
+
* @param itemIndex Item index.
|
|
156
|
+
*/
|
|
157
|
+
onSelectAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
|
|
158
|
+
/**
|
|
159
|
+
* Handler invoked when an item is deselected in a section.
|
|
160
|
+
*
|
|
161
|
+
* @param sectionIndex Section index.
|
|
162
|
+
* @param itemIndex Item index.
|
|
136
163
|
*/
|
|
137
|
-
|
|
164
|
+
onDeselectAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
|
|
138
165
|
/**
|
|
139
|
-
* Handler invoked when
|
|
166
|
+
* Handler invoked when selected items have changed.
|
|
167
|
+
*
|
|
168
|
+
* @param selectedIndices Dictionary of indices of selected items per section.
|
|
140
169
|
*/
|
|
141
|
-
|
|
170
|
+
onSelectionChange?: ((selectedIndices: Record<number, number[]>) => void) | undefined;
|
|
142
171
|
} & {
|
|
143
172
|
children?: React.ReactNode;
|
|
144
173
|
} & {
|
package/lib/Accordion.js
CHANGED
|
@@ -75,6 +75,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
75
75
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
76
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,25 +86,61 @@ 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, onSelectionChange = _a.onSelectionChange, props = __rest(_a, ["children", "className", "style", "autoCollapse", "borderThickness", "collapseIconSvg", "data", "expandedSectionIndices", "expandIconSvg", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "sectionPadding", "selectedItemIndices", "selectionMode", "onActivateAt", "onSelectAt", "onDeselectAt", "onSelectionChange"]);
|
|
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];
|
|
131
|
+
(0, react_1.useEffect)(function () {
|
|
132
|
+
if ((0, fast_deep_equal_1.default)(expandedSectionIndices, expandedSectionIndices))
|
|
133
|
+
return;
|
|
134
|
+
setExpandedSectionIndices(externalExpandedSectionIndices);
|
|
135
|
+
}, [JSON.stringify(externalExpandedSectionIndices)]);
|
|
101
136
|
(0, react_1.useEffect)(function () {
|
|
102
|
-
|
|
103
|
-
|
|
137
|
+
if ((0, fast_deep_equal_1.default)(externalSelectedItemIndices, selectedItemIndices))
|
|
138
|
+
return;
|
|
139
|
+
setSelectedItemIndices(externalSelectedItemIndices);
|
|
140
|
+
}, [JSON.stringify(externalSelectedItemIndices)]);
|
|
104
141
|
(0, react_1.useEffect)(function () {
|
|
105
|
-
|
|
106
|
-
}, [
|
|
142
|
+
onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectedItemIndices);
|
|
143
|
+
}, [JSON.stringify(selectedItemIndices)]);
|
|
107
144
|
var components = (0, asComponentDict_1.default)(children, {
|
|
108
145
|
header: exports.AccordionHeader,
|
|
109
146
|
expandIcon: exports.AccordionExpandIcon,
|
|
@@ -193,11 +230,11 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
193
230
|
});
|
|
194
231
|
return (react_1.default.createElement("div", __assign({}, props, { className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }),
|
|
195
232
|
react_1.default.createElement(Each_1.default, { in: data }, function (section, sectionIdx) {
|
|
196
|
-
var _a, _b, _c;
|
|
233
|
+
var _a, _b, _c, _d;
|
|
197
234
|
var numItems = section.items.length;
|
|
198
235
|
var numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems);
|
|
199
236
|
var menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness;
|
|
200
|
-
var isCollapsed = !
|
|
237
|
+
var isCollapsed = !isSectionExpandedAt(sectionIdx);
|
|
201
238
|
var headerComponent = (_a = components.header) !== null && _a !== void 0 ? _a : react_1.default.createElement(exports.AccordionHeader, { style: defaultStyles.header });
|
|
202
239
|
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));
|
|
203
240
|
var collapseIconComponent = (_c = components.collapseIcon) !== null && _c !== void 0 ? _c : (collapseIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: collapseIconSvg, style: defaultStyles.collapseIcon }) : expandIconComponent);
|
|
@@ -228,15 +265,7 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
228
265
|
marginLeft: isCollapsed ? '0px' : "".concat(itemPadding - borderThickness, "px"),
|
|
229
266
|
overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',
|
|
230
267
|
width: isCollapsed ? '0px' : "".concat(menuLength, "px"),
|
|
231
|
-
}), borderThickness: borderThickness, data: section.items,
|
|
232
|
-
if (selectedSectionIndex !== sectionIdx)
|
|
233
|
-
return;
|
|
234
|
-
setSelectedSectionIndex(-1);
|
|
235
|
-
setSelectedItemIndex(-1);
|
|
236
|
-
}, onSelectAt: function (itemIdx) {
|
|
237
|
-
setSelectedSectionIndex(sectionIdx);
|
|
238
|
-
setSelectedItemIndex(itemIdx);
|
|
239
|
-
} })));
|
|
268
|
+
}), 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); } })));
|
|
240
269
|
})));
|
|
241
270
|
});
|
|
242
271
|
var AccordionHeader = function (_a) {
|
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 AccordionSectionData<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: AccordionSectionData<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 * 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 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 collapseIconSvg,\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 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 = !isSectionSelectedAt(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 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 = ({ 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"]}
|
|
1
|
+
{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","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 /**\n * Handler invoked when selected items have changed.\n *\n * @param selectedIndices Dictionary of indices of selected items per section.\n */\n onSelectionChange?: (selectedIndices: Record<number, 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 onSelectionChange,\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 useEffect(() => {\n onSelectionChange?.(selectedItemIndices)\n }, [JSON.stringify(selectedItemIndices)])\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"]}
|
package/lib/Dropdown.d.ts
CHANGED
|
@@ -1,45 +1,20 @@
|
|
|
1
|
-
import React, { type
|
|
2
|
-
import { type ListItemProps } from './List';
|
|
3
|
-
type Orientation = 'horizontal' | 'vertical';
|
|
1
|
+
import React, { type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
|
|
2
|
+
import { type ListItemProps, type ListProps } from './List';
|
|
4
3
|
export type DropdownData = {
|
|
5
4
|
label?: string;
|
|
6
5
|
};
|
|
7
6
|
export type DropdownItemProps<T extends DropdownData = DropdownData> = ListItemProps<T>;
|
|
8
|
-
export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
|
|
9
|
-
/**
|
|
10
|
-
* Data of every item in the component. This is used to generate individual
|
|
11
|
-
* menu items. Data type is generic.
|
|
12
|
-
*/
|
|
13
|
-
data: T[];
|
|
7
|
+
export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttributes<HTMLDivElement> & ListProps<T> & PropsWithChildren<{
|
|
14
8
|
/**
|
|
15
9
|
* Indicates if the component is inverted (i.e. "dropup" instead of dropdown).
|
|
16
10
|
* Supports all orientations.
|
|
17
11
|
*/
|
|
18
12
|
isInverted?: boolean;
|
|
19
13
|
/**
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*/
|
|
23
|
-
isTogglable?: boolean;
|
|
24
|
-
/**
|
|
25
|
-
* Thickness of the border (in pixels) of every item and the dropdown button
|
|
26
|
-
* itself. 0 indicates no borders.
|
|
27
|
-
*/
|
|
28
|
-
borderThickness?: number;
|
|
29
|
-
/**
|
|
30
|
-
* The index of the default selected item.
|
|
31
|
-
*/
|
|
32
|
-
selectedIndex?: number;
|
|
33
|
-
/**
|
|
34
|
-
* Length (in pixels) of each item. This does not apply to the dropdown button
|
|
35
|
-
* itself. Length refers to the height in vertical orientation and width in
|
|
36
|
-
* horizontal orientation.
|
|
37
|
-
*/
|
|
38
|
-
itemLength?: number;
|
|
39
|
-
/**
|
|
40
|
-
* Padding (in pixels) of each item.
|
|
14
|
+
* Specifies if the dropdown should be collapsed upon selection. This only
|
|
15
|
+
* works if `selectionMode` is `single`.
|
|
41
16
|
*/
|
|
42
|
-
|
|
17
|
+
collapsesOnSelect?: boolean;
|
|
43
18
|
/**
|
|
44
19
|
* Maximum number of items that are viside when the component expands. When a
|
|
45
20
|
* value greater than or equal to 0 is specified, only that number of items
|
|
@@ -48,10 +23,6 @@ export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttribute
|
|
|
48
23
|
* visible when the component expands.
|
|
49
24
|
*/
|
|
50
25
|
maxVisibleItems?: number;
|
|
51
|
-
/**
|
|
52
|
-
* Orientation of the component.
|
|
53
|
-
*/
|
|
54
|
-
orientation?: Orientation;
|
|
55
26
|
/**
|
|
56
27
|
* The label to appear on the dropdown button when no items are selected.
|
|
57
28
|
*/
|
|
@@ -64,14 +35,6 @@ export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttribute
|
|
|
64
35
|
* SVG markup to be put in the dropdown button as the collapse icon.
|
|
65
36
|
*/
|
|
66
37
|
collapseIconSvg?: string;
|
|
67
|
-
/**
|
|
68
|
-
* React component type to be used for generating items inside the component.
|
|
69
|
-
*/
|
|
70
|
-
itemComponentType: ComponentType<DropdownItemProps<T>>;
|
|
71
|
-
/**
|
|
72
|
-
* Handler invoked whenever the selected index changes.
|
|
73
|
-
*/
|
|
74
|
-
onIndexChange?: (index: number) => void;
|
|
75
38
|
}>;
|
|
76
39
|
/**
|
|
77
40
|
* A dropdown menu component that is invertible (i.e. can "dropup" instead) and
|
|
@@ -79,40 +42,30 @@ export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttribute
|
|
|
79
42
|
* component type to this component to automatically generate menu items.
|
|
80
43
|
*/
|
|
81
44
|
declare const _default: <T extends DropdownData = DropdownData>(props: React.HTMLAttributes<HTMLDivElement> & {
|
|
82
|
-
|
|
83
|
-
* Data of every item in the component. This is used to generate individual
|
|
84
|
-
* menu items. Data type is generic.
|
|
85
|
-
*/
|
|
45
|
+
borderThickness?: number | undefined;
|
|
86
46
|
data: T[];
|
|
47
|
+
isTogglable?: boolean | undefined;
|
|
48
|
+
itemComponentType?: React.ComponentType<ListItemProps<T>> | undefined;
|
|
49
|
+
itemLength?: number | undefined;
|
|
50
|
+
itemPadding?: number | undefined;
|
|
51
|
+
orientation?: ("horizontal" | "vertical") | undefined;
|
|
52
|
+
selectedIndices?: number[] | undefined;
|
|
53
|
+
selectionMode?: "none" | "multiple" | "single" | undefined;
|
|
54
|
+
onActivateAt?: ((index: number) => void) | undefined;
|
|
55
|
+
onDeselectAt?: ((index: number) => void) | undefined;
|
|
56
|
+
onSelectAt?: ((index: number) => void) | undefined;
|
|
57
|
+
onSelectionChange?: ((indices: number[]) => void) | undefined;
|
|
58
|
+
} & {
|
|
87
59
|
/**
|
|
88
60
|
* Indicates if the component is inverted (i.e. "dropup" instead of dropdown).
|
|
89
61
|
* Supports all orientations.
|
|
90
62
|
*/
|
|
91
63
|
isInverted?: boolean | undefined;
|
|
92
64
|
/**
|
|
93
|
-
*
|
|
94
|
-
*
|
|
65
|
+
* Specifies if the dropdown should be collapsed upon selection. This only
|
|
66
|
+
* works if `selectionMode` is `single`.
|
|
95
67
|
*/
|
|
96
|
-
|
|
97
|
-
/**
|
|
98
|
-
* Thickness of the border (in pixels) of every item and the dropdown button
|
|
99
|
-
* itself. 0 indicates no borders.
|
|
100
|
-
*/
|
|
101
|
-
borderThickness?: number | undefined;
|
|
102
|
-
/**
|
|
103
|
-
* The index of the default selected item.
|
|
104
|
-
*/
|
|
105
|
-
selectedIndex?: number | undefined;
|
|
106
|
-
/**
|
|
107
|
-
* Length (in pixels) of each item. This does not apply to the dropdown button
|
|
108
|
-
* itself. Length refers to the height in vertical orientation and width in
|
|
109
|
-
* horizontal orientation.
|
|
110
|
-
*/
|
|
111
|
-
itemLength?: number | undefined;
|
|
112
|
-
/**
|
|
113
|
-
* Padding (in pixels) of each item.
|
|
114
|
-
*/
|
|
115
|
-
itemPadding?: number | undefined;
|
|
68
|
+
collapsesOnSelect?: boolean | undefined;
|
|
116
69
|
/**
|
|
117
70
|
* Maximum number of items that are viside when the component expands. When a
|
|
118
71
|
* value greater than or equal to 0 is specified, only that number of items
|
|
@@ -121,10 +74,6 @@ declare const _default: <T extends DropdownData = DropdownData>(props: React.HTM
|
|
|
121
74
|
* visible when the component expands.
|
|
122
75
|
*/
|
|
123
76
|
maxVisibleItems?: number | undefined;
|
|
124
|
-
/**
|
|
125
|
-
* Orientation of the component.
|
|
126
|
-
*/
|
|
127
|
-
orientation?: Orientation | undefined;
|
|
128
77
|
/**
|
|
129
78
|
* The label to appear on the dropdown button when no items are selected.
|
|
130
79
|
*/
|
|
@@ -137,14 +86,6 @@ declare const _default: <T extends DropdownData = DropdownData>(props: React.HTM
|
|
|
137
86
|
* SVG markup to be put in the dropdown button as the collapse icon.
|
|
138
87
|
*/
|
|
139
88
|
collapseIconSvg?: string | undefined;
|
|
140
|
-
/**
|
|
141
|
-
* React component type to be used for generating items inside the component.
|
|
142
|
-
*/
|
|
143
|
-
itemComponentType: React.ComponentType<DropdownItemProps<T>>;
|
|
144
|
-
/**
|
|
145
|
-
* Handler invoked whenever the selected index changes.
|
|
146
|
-
*/
|
|
147
|
-
onIndexChange?: ((index: number) => void) | undefined;
|
|
148
89
|
} & {
|
|
149
90
|
children?: React.ReactNode;
|
|
150
91
|
} & {
|