etudes 3.2.0 → 3.3.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.
Files changed (9) hide show
  1. package/lib/Accordion.d.ts +57 -45
  2. package/lib/Accordion.js +18 -40
  3. package/lib/Accordion.js.map +1 -1
  4. package/lib/Dropdown.d.ts +49 -31
  5. package/lib/Dropdown.js +8 -45
  6. package/lib/Dropdown.js.map +1 -1
  7. package/lib/List.js +3 -3
  8. package/lib/List.js.map +1 -1
  9. package/package.json +1 -1
package/lib/Accordion.d.ts CHANGED
@@ -1,6 +1,11 @@
1
1
  import React, { type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
2
2
  import { type ListItemProps, type ListProps } from './List';
3
3
  export type AccordionItemProps<T> = ListItemProps<T>;
4
+ export type AccordionHeaderProps<T> = HTMLAttributes<HTMLElement> & PropsWithChildren<{
5
+ data: AccordionSectionData<T>;
6
+ index: number;
7
+ isCollapsed: boolean;
8
+ }>;
4
9
  export type AccordionSectionData<T> = {
5
10
  label: string;
6
11
  items: T[];
@@ -11,6 +16,10 @@ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<
11
16
  * another section.
12
17
  */
13
18
  autoCollapse?: boolean;
19
+ /**
20
+ * SVG markup to be put in the section header as the collapse icon.
21
+ */
22
+ collapseIconSvg?: string;
14
23
  /**
15
24
  * Data provided to each section.
16
25
  */
@@ -20,13 +29,18 @@ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<
20
29
  */
21
30
  expandedSectionIndices?: number[];
22
31
  /**
23
- * Indices of selected items per section.
32
+ * SVG markup to be put in the section header as the expand icon.
24
33
  */
25
- selectedItemIndices?: Record<number, number[]>;
34
+ expandIconSvg?: string;
26
35
  /**
27
- * Padding (in pixels) between each section.
36
+ * React component type to be used for generating headers inside the
37
+ * component. When absent, one will be generated automatically.
28
38
  */
29
- sectionPadding?: number;
39
+ headerComponentType?: ComponentType<AccordionHeaderProps<T>>;
40
+ /**
41
+ * React component type to be used for generating items inside the component.
42
+ */
43
+ itemComponentType: ComponentType<AccordionItemProps<T>>;
30
44
  /**
31
45
  * Maximum number of items that are viside when a section expands. When a
32
46
  * value greater than or equal to 0 is specified, only that number of items
@@ -36,23 +50,20 @@ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<
36
50
  */
37
51
  maxVisibleItems?: number;
38
52
  /**
39
- * SVG markup to be put in the section header as the expand icon.
40
- */
41
- expandIconSvg?: string;
42
- /**
43
- * SVG markup to be put in the section header as the collapse icon.
53
+ * Padding (in pixels) between each section.
44
54
  */
45
- collapseIconSvg?: string;
55
+ sectionPadding?: number;
46
56
  /**
47
- * React component type to be used for generating items inside the component.
57
+ * Indices of selected items per section.
48
58
  */
49
- itemComponentType: ComponentType<AccordionItemProps<T>>;
59
+ selectedItemIndices?: Record<number, number[]>;
50
60
  /**
51
- * Handler invoked when a section is expanded.
61
+ * Handler invoked when an item is activated in a section.
52
62
  *
53
63
  * @param sectionIndex Section index.
64
+ * @param itemIndex Item index.
54
65
  */
55
- onExpandSectionAt?: (sectionIndex: number) => void;
66
+ onActivateAt?: (sectionIndex: number, itemIndex: number) => void;
56
67
  /**
57
68
  * Handler invoked when a section is collapsed.
58
69
  *
@@ -60,26 +71,25 @@ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<
60
71
  */
61
72
  onCollapseSectionAt?: (sectionIndex: number) => void;
62
73
  /**
63
- * Handler invoked when an item is activated in a section.
74
+ * Handler invoked when an item is deselected in a section.
64
75
  *
65
76
  * @param sectionIndex Section index.
66
77
  * @param itemIndex Item index.
67
78
  */
68
- onActivateAt?: (sectionIndex: number, itemIndex: number) => void;
79
+ onDeselectAt?: (sectionIndex: number, itemIndex: number) => void;
69
80
  /**
70
- * Handler invoked when an item is selected in a section.
81
+ * Handler invoked when a section is expanded.
71
82
  *
72
83
  * @param sectionIndex Section index.
73
- * @param itemIndex Item index.
74
84
  */
75
- onSelectAt?: (sectionIndex: number, itemIndex: number) => void;
85
+ onExpandSectionAt?: (sectionIndex: number) => void;
76
86
  /**
77
- * Handler invoked when an item is deselected in a section.
87
+ * Handler invoked when an item is selected in a section.
78
88
  *
79
89
  * @param sectionIndex Section index.
80
90
  * @param itemIndex Item index.
81
91
  */
82
- onDeselectAt?: (sectionIndex: number, itemIndex: number) => void;
92
+ onSelectAt?: (sectionIndex: number, itemIndex: number) => void;
83
93
  /**
84
94
  * Handler invoked when selected items have changed.
85
95
  *
@@ -93,6 +103,10 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & Omit<L
93
103
  * another section.
94
104
  */
95
105
  autoCollapse?: boolean | undefined;
106
+ /**
107
+ * SVG markup to be put in the section header as the collapse icon.
108
+ */
109
+ collapseIconSvg?: string | undefined;
96
110
  /**
97
111
  * Data provided to each section.
98
112
  */
@@ -102,13 +116,18 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & Omit<L
102
116
  */
103
117
  expandedSectionIndices?: number[] | undefined;
104
118
  /**
105
- * Indices of selected items per section.
119
+ * SVG markup to be put in the section header as the expand icon.
106
120
  */
107
- selectedItemIndices?: Record<number, number[]> | undefined;
121
+ expandIconSvg?: string | undefined;
108
122
  /**
109
- * Padding (in pixels) between each section.
123
+ * React component type to be used for generating headers inside the
124
+ * component. When absent, one will be generated automatically.
110
125
  */
111
- sectionPadding?: number | undefined;
126
+ headerComponentType?: React.ComponentType<AccordionHeaderProps<T>> | undefined;
127
+ /**
128
+ * React component type to be used for generating items inside the component.
129
+ */
130
+ itemComponentType: React.ComponentType<AccordionItemProps<T>>;
112
131
  /**
113
132
  * Maximum number of items that are viside when a section expands. When a
114
133
  * value greater than or equal to 0 is specified, only that number of items
@@ -118,23 +137,20 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & Omit<L
118
137
  */
119
138
  maxVisibleItems?: number | undefined;
120
139
  /**
121
- * SVG markup to be put in the section header as the expand icon.
122
- */
123
- expandIconSvg?: string | undefined;
124
- /**
125
- * SVG markup to be put in the section header as the collapse icon.
140
+ * Padding (in pixels) between each section.
126
141
  */
127
- collapseIconSvg?: string | undefined;
142
+ sectionPadding?: number | undefined;
128
143
  /**
129
- * React component type to be used for generating items inside the component.
144
+ * Indices of selected items per section.
130
145
  */
131
- itemComponentType: React.ComponentType<AccordionItemProps<T>>;
146
+ selectedItemIndices?: Record<number, number[]> | undefined;
132
147
  /**
133
- * Handler invoked when a section is expanded.
148
+ * Handler invoked when an item is activated in a section.
134
149
  *
135
150
  * @param sectionIndex Section index.
151
+ * @param itemIndex Item index.
136
152
  */
137
- onExpandSectionAt?: ((sectionIndex: number) => void) | undefined;
153
+ onActivateAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
138
154
  /**
139
155
  * Handler invoked when a section is collapsed.
140
156
  *
@@ -142,26 +158,25 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & Omit<L
142
158
  */
143
159
  onCollapseSectionAt?: ((sectionIndex: number) => void) | undefined;
144
160
  /**
145
- * Handler invoked when an item is activated in a section.
161
+ * Handler invoked when an item is deselected in a section.
146
162
  *
147
163
  * @param sectionIndex Section index.
148
164
  * @param itemIndex Item index.
149
165
  */
150
- onActivateAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
166
+ onDeselectAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
151
167
  /**
152
- * Handler invoked when an item is selected in a section.
168
+ * Handler invoked when a section is expanded.
153
169
  *
154
170
  * @param sectionIndex Section index.
155
- * @param itemIndex Item index.
156
171
  */
157
- onSelectAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
172
+ onExpandSectionAt?: ((sectionIndex: number) => void) | undefined;
158
173
  /**
159
- * Handler invoked when an item is deselected in a section.
174
+ * Handler invoked when an item is selected in a section.
160
175
  *
161
176
  * @param sectionIndex Section index.
162
177
  * @param itemIndex Item index.
163
178
  */
164
- onDeselectAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
179
+ onSelectAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
165
180
  /**
166
181
  * Handler invoked when selected items have changed.
167
182
  *
@@ -174,6 +189,3 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & Omit<L
174
189
  ref?: React.Ref<HTMLDivElement> | undefined;
175
190
  }) => ReactElement;
176
191
  export default _default;
177
- export declare const AccordionHeader: ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => React.JSX.Element;
178
- export declare const AccordionExpandIcon: ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => React.JSX.Element;
179
- export declare const AccordionCollapseIcon: ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => React.JSX.Element;
package/lib/Accordion.js CHANGED
@@ -73,20 +73,19 @@ 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.AccordionCollapseIcon = exports.AccordionExpandIcon = exports.AccordionHeader = void 0;
77
76
  var classnames_1 = __importDefault(require("classnames"));
78
77
  var fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
79
78
  var react_1 = __importStar(require("react"));
80
79
  var Each_1 = __importDefault(require("./Each"));
81
80
  var FlatSVG_1 = __importDefault(require("./FlatSVG"));
82
81
  var List_1 = __importDefault(require("./List"));
82
+ var usePrevious_1 = __importDefault(require("./hooks/usePrevious"));
83
83
  var asClassNameDict_1 = __importDefault(require("./utils/asClassNameDict"));
84
- var asComponentDict_1 = __importDefault(require("./utils/asComponentDict"));
85
84
  var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
86
85
  var cloneStyledElement_1 = __importDefault(require("./utils/cloneStyledElement"));
87
86
  var styles_1 = __importDefault(require("./utils/styles"));
88
87
  exports.default = (0, react_1.forwardRef)(function (_a, ref) {
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"]);
88
+ 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, HeaderComponent = _a.headerComponentType, 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, onCollapseSectionAt = _a.onCollapseSectionAt, onDeselectAt = _a.onDeselectAt, onExpandSectionAt = _a.onExpandSectionAt, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, props = __rest(_a, ["children", "className", "style", "autoCollapse", "borderThickness", "collapseIconSvg", "data", "expandedSectionIndices", "expandIconSvg", "headerComponentType", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "sectionPadding", "selectedItemIndices", "selectionMode", "onActivateAt", "onCollapseSectionAt", "onDeselectAt", "onExpandSectionAt", "onSelectAt", "onSelectionChange"]);
90
89
  var isSectionExpandedAt = function (idx) { return expandedSectionIndices.indexOf(idx) >= 0; };
91
90
  var toggleSectionAt = function (idx) {
92
91
  if (isSectionExpandedAt(idx)) {
@@ -127,9 +126,10 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
127
126
  onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(sectionIdx, itemIdx);
128
127
  };
129
128
  var _m = __read((0, react_1.useState)(externalExpandedSectionIndices), 2), expandedSectionIndices = _m[0], setExpandedSectionIndices = _m[1];
129
+ var prevExpandedSectionIndices = (0, usePrevious_1.default)(expandedSectionIndices);
130
130
  var _o = __read((0, react_1.useState)(externalSelectedItemIndices), 2), selectedItemIndices = _o[0], setSelectedItemIndices = _o[1];
131
131
  (0, react_1.useEffect)(function () {
132
- if ((0, fast_deep_equal_1.default)(expandedSectionIndices, expandedSectionIndices))
132
+ if ((0, fast_deep_equal_1.default)(externalExpandedSectionIndices, expandedSectionIndices))
133
133
  return;
134
134
  setExpandedSectionIndices(externalExpandedSectionIndices);
135
135
  }, [JSON.stringify(externalExpandedSectionIndices)]);
@@ -138,14 +138,16 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
138
138
  return;
139
139
  setSelectedItemIndices(externalSelectedItemIndices);
140
140
  }, [JSON.stringify(externalSelectedItemIndices)]);
141
+ (0, react_1.useEffect)(function () {
142
+ var _a;
143
+ var collapsed = (_a = prevExpandedSectionIndices === null || prevExpandedSectionIndices === void 0 ? void 0 : prevExpandedSectionIndices.filter(function (t) { return expandedSectionIndices.indexOf(t) === -1; })) !== null && _a !== void 0 ? _a : [];
144
+ var expanded = expandedSectionIndices.filter(function (t) { return (prevExpandedSectionIndices === null || prevExpandedSectionIndices === void 0 ? void 0 : prevExpandedSectionIndices.indexOf(t)) === -1; });
145
+ collapsed.map(function (t) { return onCollapseSectionAt === null || onCollapseSectionAt === void 0 ? void 0 : onCollapseSectionAt(t); });
146
+ expanded.map(function (t) { return onExpandSectionAt === null || onExpandSectionAt === void 0 ? void 0 : onExpandSectionAt(t); });
147
+ }, [JSON.stringify(expandedSectionIndices)]);
141
148
  (0, react_1.useEffect)(function () {
142
149
  onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectedItemIndices);
143
150
  }, [JSON.stringify(selectedItemIndices)]);
144
- var components = (0, asComponentDict_1.default)(children, {
145
- header: exports.AccordionHeader,
146
- expandIcon: exports.AccordionExpandIcon,
147
- collapseIcon: exports.AccordionCollapseIcon,
148
- });
149
151
  var fixedClassNames = (0, asClassNameDict_1.default)({
150
152
  root: (0, classnames_1.default)(orientation),
151
153
  header: (0, classnames_1.default)(orientation),
@@ -167,7 +169,7 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
167
169
  flexDirection: 'row',
168
170
  height: '100%',
169
171
  }),
170
- header: __assign({ borderWidth: "".concat(borderThickness, "px"), margin: '0', outline: 'none' }, orientation === 'vertical' ? {
172
+ header: __assign({ borderWidth: "".concat(borderThickness, "px"), cursor: 'pointer', margin: '0', outline: 'none' }, orientation === 'vertical' ? {
171
173
  width: '100%',
172
174
  } : {
173
175
  height: '100%',
@@ -231,33 +233,24 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
231
233
  });
232
234
  return (react_1.default.createElement("div", __assign({}, props, { className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }),
233
235
  react_1.default.createElement(Each_1.default, { in: data }, function (section, sectionIdx) {
234
- var _a, _b, _c, _d;
236
+ var _a;
235
237
  var numItems = section.items.length;
236
238
  var numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems);
237
239
  var menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness;
238
240
  var isCollapsed = !isSectionExpandedAt(sectionIdx);
239
- var headerComponent = (_a = components.header) !== null && _a !== void 0 ? _a : react_1.default.createElement(exports.AccordionHeader, { style: defaultStyles.header });
240
- 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));
241
- var collapseIconComponent = (_c = components.collapseIcon) !== null && _c !== void 0 ? _c : (collapseIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: collapseIconSvg, style: defaultStyles.collapseIcon }) : expandIconComponent);
241
+ var expandIconComponent = expandIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: expandIconSvg, style: defaultStyles.expandIcon }) : react_1.default.createElement(react_1.default.Fragment, null);
242
+ var collapseIconComponent = collapseIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: collapseIconSvg, style: defaultStyles.collapseIcon }) : expandIconComponent;
242
243
  return (react_1.default.createElement("div", { style: (0, styles_1.default)(fixedStyles.section, orientation === 'vertical' ? {
243
244
  marginTop: sectionIdx === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
244
245
  } : {
245
246
  marginLeft: sectionIdx === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
246
247
  }) },
247
- cloneStyledElement_1.default.apply(void 0, __spreadArray([headerComponent, {
248
- className: (0, classnames_1.default)(fixedClassNames.header, {
249
- collapsed: isCollapsed,
250
- expanded: !isCollapsed,
251
- }),
252
- style: (0, styles_1.default)(fixedStyles.header),
253
- onClick: function () { return toggleSectionAt(sectionIdx); },
254
- }], __read(components.header ? [] : [
248
+ HeaderComponent ? (react_1.default.createElement(HeaderComponent, { className: (0, classnames_1.default)(fixedClassNames.header, { collapsed: isCollapsed, expanded: !isCollapsed }), style: (0, styles_1.default)(fixedStyles.header), data: section, index: sectionIdx, isCollapsed: isCollapsed, onClick: function () { return toggleSectionAt(sectionIdx); } })) : (react_1.default.createElement("button", { className: (0, classnames_1.default)(fixedClassNames.header, { collapsed: isCollapsed, expanded: !isCollapsed }), style: (0, styles_1.default)(fixedStyles.header, defaultStyles.header), onClick: function () { return toggleSectionAt(sectionIdx); } },
255
249
  react_1.default.createElement("label", { style: fixedStyles.headerLabel, dangerouslySetInnerHTML: { __html: section.label } }),
256
250
  (0, cloneStyledElement_1.default)(isCollapsed ? expandIconComponent : collapseIconComponent, {
257
251
  className: (0, classnames_1.default)(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),
258
252
  style: (0, styles_1.default)(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),
259
- }),
260
- ]), false)),
253
+ }))),
261
254
  react_1.default.createElement(List_1.default, { style: (0, styles_1.default)(fixedStyles.list, orientation === 'vertical' ? {
262
255
  height: isCollapsed ? '0px' : "".concat(menuLength, "px"),
263
256
  marginTop: isCollapsed ? '0px' : "".concat(itemPadding - borderThickness, "px"),
@@ -266,22 +259,7 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
266
259
  marginLeft: isCollapsed ? '0px' : "".concat(itemPadding - borderThickness, "px"),
267
260
  overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',
268
261
  width: isCollapsed ? '0px' : "".concat(menuLength, "px"),
269
- }), 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); } })));
262
+ }), borderThickness: borderThickness, data: section.items, selectionMode: selectionMode, isTogglable: isTogglable, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, orientation: orientation, selectedIndices: (_a = selectedItemIndices[sectionIdx]) !== null && _a !== void 0 ? _a : [], 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); } })));
270
263
  })));
271
264
  });
272
- var AccordionHeader = function (_a) {
273
- var children = _a.children, props = __rest(_a, ["children"]);
274
- return react_1.default.createElement("button", __assign({}, props), children);
275
- };
276
- exports.AccordionHeader = AccordionHeader;
277
- var AccordionExpandIcon = function (_a) {
278
- var children = _a.children, props = __rest(_a, ["children"]);
279
- return react_1.default.createElement("div", __assign({}, props), children);
280
- };
281
- exports.AccordionExpandIcon = AccordionExpandIcon;
282
- var AccordionCollapseIcon = function (_a) {
283
- var children = _a.children, props = __rest(_a, ["children"]);
284
- return react_1.default.createElement("div", __assign({}, props), children);
285
- };
286
- exports.AccordionCollapseIcon = AccordionCollapseIcon;
287
265
  //# sourceMappingURL=Accordion.js.map
package/lib/Accordion.js.map CHANGED
@@ -1 +1 @@
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;AA0GnC,kBAAe,IAAA,kBAAU,EAAC,UAAC,EAwB1B,EAAE,GAAG;IAvBJ,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,EACZ,iBAAiB,uBAAA,EACd,KAAK,cAvBiB,2WAwB1B,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,IAAA,iBAAS,EAAC;QACR,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,mBAAmB,CAAC,CAAA;IAC1C,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAA;IAEzC,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,aAAa,EAAE,MAAM;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,UAAK,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;oBAC7B,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 /**\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 pointerEvents: 'none',\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 }, ...components.header ? [] : [\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"]}
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 usePrevious from './hooks/usePrevious'\nimport asClassNameDict from './utils/asClassNameDict'\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 AccordionHeaderProps<T> = HTMLAttributes<HTMLElement> & PropsWithChildren<{\n data: AccordionSectionData<T>\n index: number\n isCollapsed: boolean\n}>\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 * SVG markup to be put in the section header as the collapse icon.\n */\n collapseIconSvg?: string\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 * 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 headers inside the\n * component. When absent, one will be generated automatically.\n */\n headerComponentType?: ComponentType<AccordionHeaderProps<T>>\n\n /**\n * React component type to be used for generating items inside the component.\n */\n itemComponentType: ComponentType<AccordionItemProps<T>>\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 * Padding (in pixels) between each section.\n */\n sectionPadding?: number\n\n /**\n * Indices of selected items per section.\n */\n selectedItemIndices?: Record<number, number[]>\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 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 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 a section is expanded.\n *\n * @param sectionIndex Section index.\n */\n onExpandSectionAt?: (sectionIndex: 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 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 headerComponentType: HeaderComponent,\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 onCollapseSectionAt,\n onDeselectAt,\n onExpandSectionAt,\n onSelectAt,\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 prevExpandedSectionIndices = usePrevious(expandedSectionIndices)\n const [selectedItemIndices, setSelectedItemIndices] = useState(externalSelectedItemIndices)\n\n useEffect(() => {\n if (isEqual(externalExpandedSectionIndices, 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 const collapsed = prevExpandedSectionIndices?.filter(t => expandedSectionIndices.indexOf(t) === -1) ?? []\n const expanded = expandedSectionIndices.filter(t => prevExpandedSectionIndices?.indexOf(t) === -1)\n\n collapsed.map(t => onCollapseSectionAt?.(t))\n expanded.map(t => onExpandSectionAt?.(t))\n }, [JSON.stringify(expandedSectionIndices)])\n\n useEffect(() => {\n onSelectionChange?.(selectedItemIndices)\n }, [JSON.stringify(selectedItemIndices)])\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 cursor: 'pointer',\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 pointerEvents: 'none',\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 expandIconComponent = expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>\n const collapseIconComponent = 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 {HeaderComponent ? (\n <HeaderComponent\n className={classNames(fixedClassNames.header, { collapsed: isCollapsed, expanded: !isCollapsed })}\n style={styles(fixedStyles.header)}\n data={section}\n index={sectionIdx}\n isCollapsed={isCollapsed}\n onClick={() => toggleSectionAt(sectionIdx)}\n />\n ) : (\n <button\n className={classNames(fixedClassNames.header, { collapsed: isCollapsed, expanded: !isCollapsed })}\n style={styles(fixedStyles.header, defaultStyles.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 </button>\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"]}
package/lib/Dropdown.d.ts CHANGED
@@ -1,28 +1,20 @@
1
- import React, { type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
1
+ import React, { type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
2
2
  import { type ListItemProps, type ListProps } from './List';
3
3
  export type DropdownData = {
4
4
  label?: string;
5
5
  };
6
+ export type DropdownToggleProps = HTMLAttributes<HTMLElement> & PropsWithChildren;
6
7
  export type DropdownItemProps<T extends DropdownData = DropdownData> = ListItemProps<T>;
7
8
  export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttributes<HTMLDivElement> & ListProps<T> & PropsWithChildren<{
8
9
  /**
9
- * Indicates if the component is inverted (i.e. "dropup" instead of dropdown).
10
- * Supports all orientations.
10
+ * SVG markup to be put in the dropdown button as the collapse icon.
11
11
  */
12
- isInverted?: boolean;
12
+ collapseIconSvg?: string;
13
13
  /**
14
14
  * Specifies if the dropdown should be collapsed upon selection. This only
15
15
  * works if `selectionMode` is `single`.
16
16
  */
17
17
  collapsesOnSelect?: boolean;
18
- /**
19
- * Maximum number of items that are viside when the component expands. When a
20
- * value greater than or equal to 0 is specified, only that number of items
21
- * will be visible at a time, and a scrollbar will appear to scroll to
22
- * remaining items. Any value less than 0 indicates that all items will be
23
- * visible when the component expands.
24
- */
25
- maxVisibleItems?: number;
26
18
  /**
27
19
  * The label to appear on the dropdown button when no items are selected.
28
20
  */
@@ -32,9 +24,23 @@ export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttribute
32
24
  */
33
25
  expandIconSvg?: string;
34
26
  /**
35
- * SVG markup to be put in the dropdown button as the collapse icon.
27
+ * Indicates if the component is inverted (i.e. "dropup" instead of dropdown).
28
+ * Supports all orientations.
36
29
  */
37
- collapseIconSvg?: string;
30
+ isInverted?: boolean;
31
+ /**
32
+ * Maximum number of items that are viside when the component expands. When a
33
+ * value greater than or equal to 0 is specified, only that number of items
34
+ * will be visible at a time, and a scrollbar will appear to scroll to
35
+ * remaining items. Any value less than 0 indicates that all items will be
36
+ * visible when the component expands.
37
+ */
38
+ maxVisibleItems?: number;
39
+ /**
40
+ * React component type to be used for generating the toggle element inside
41
+ * the component. When absent, one will be generated automatically.
42
+ */
43
+ toggleComponentType?: ComponentType<DropdownToggleProps>;
38
44
  }>;
39
45
  /**
40
46
  * A dropdown menu component that is invertible (i.e. can "dropup" instead) and
@@ -48,8 +54,18 @@ declare const _default: <T extends DropdownData = DropdownData>(props: React.HTM
48
54
  itemComponentType?: React.ComponentType<ListItemProps<T>> | undefined;
49
55
  itemLength?: number | undefined;
50
56
  itemPadding?: number | undefined;
51
- orientation?: ("horizontal" | "vertical") | undefined;
57
+ orientation?: ("horizontal" | "vertical") | undefined; /**
58
+ * Indicates if the component is inverted (i.e. "dropup" instead of dropdown).
59
+ * Supports all orientations.
60
+ */
52
61
  selectedIndices?: number[] | undefined;
62
+ /**
63
+ * Maximum number of items that are viside when the component expands. When a
64
+ * value greater than or equal to 0 is specified, only that number of items
65
+ * will be visible at a time, and a scrollbar will appear to scroll to
66
+ * remaining items. Any value less than 0 indicates that all items will be
67
+ * visible when the component expands.
68
+ */
53
69
  selectionMode?: "none" | "multiple" | "single" | undefined;
54
70
  onActivateAt?: ((index: number) => void) | undefined;
55
71
  onDeselectAt?: ((index: number) => void) | undefined;
@@ -57,23 +73,14 @@ declare const _default: <T extends DropdownData = DropdownData>(props: React.HTM
57
73
  onSelectionChange?: ((indices: number[]) => void) | undefined;
58
74
  } & {
59
75
  /**
60
- * Indicates if the component is inverted (i.e. "dropup" instead of dropdown).
61
- * Supports all orientations.
76
+ * SVG markup to be put in the dropdown button as the collapse icon.
62
77
  */
63
- isInverted?: boolean | undefined;
78
+ collapseIconSvg?: string | undefined;
64
79
  /**
65
80
  * Specifies if the dropdown should be collapsed upon selection. This only
66
81
  * works if `selectionMode` is `single`.
67
82
  */
68
83
  collapsesOnSelect?: boolean | undefined;
69
- /**
70
- * Maximum number of items that are viside when the component expands. When a
71
- * value greater than or equal to 0 is specified, only that number of items
72
- * will be visible at a time, and a scrollbar will appear to scroll to
73
- * remaining items. Any value less than 0 indicates that all items will be
74
- * visible when the component expands.
75
- */
76
- maxVisibleItems?: number | undefined;
77
84
  /**
78
85
  * The label to appear on the dropdown button when no items are selected.
79
86
  */
@@ -83,15 +90,26 @@ declare const _default: <T extends DropdownData = DropdownData>(props: React.HTM
83
90
  */
84
91
  expandIconSvg?: string | undefined;
85
92
  /**
86
- * SVG markup to be put in the dropdown button as the collapse icon.
93
+ * Indicates if the component is inverted (i.e. "dropup" instead of dropdown).
94
+ * Supports all orientations.
87
95
  */
88
- collapseIconSvg?: string | undefined;
96
+ isInverted?: boolean | undefined;
97
+ /**
98
+ * Maximum number of items that are viside when the component expands. When a
99
+ * value greater than or equal to 0 is specified, only that number of items
100
+ * will be visible at a time, and a scrollbar will appear to scroll to
101
+ * remaining items. Any value less than 0 indicates that all items will be
102
+ * visible when the component expands.
103
+ */
104
+ maxVisibleItems?: number | undefined;
105
+ /**
106
+ * React component type to be used for generating the toggle element inside
107
+ * the component. When absent, one will be generated automatically.
108
+ */
109
+ toggleComponentType?: React.ComponentType<DropdownToggleProps> | undefined;
89
110
  } & {
90
111
  children?: React.ReactNode;
91
112
  } & {
92
113
  ref?: React.Ref<HTMLDivElement> | undefined;
93
114
  }) => ReactElement;
94
115
  export default _default;
95
- export declare const DropdownToggle: ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => React.JSX.Element;
96
- export declare const DropdownExpandIcon: ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => React.JSX.Element;
97
- export declare const DropdownCollapseIcon: ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => React.JSX.Element;
package/lib/Dropdown.js CHANGED
@@ -60,20 +60,10 @@ var __read = (this && this.__read) || function (o, n) {
60
60
  }
61
61
  return ar;
62
62
  };
63
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
64
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
65
- if (ar || !(i in from)) {
66
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
67
- ar[i] = from[i];
68
- }
69
- }
70
- return to.concat(ar || Array.prototype.slice.call(from));
71
- };
72
63
  var __importDefault = (this && this.__importDefault) || function (mod) {
73
64
  return (mod && mod.__esModule) ? mod : { "default": mod };
74
65
  };
75
66
  Object.defineProperty(exports, "__esModule", { value: true });
76
- exports.DropdownCollapseIcon = exports.DropdownExpandIcon = exports.DropdownToggle = void 0;
77
67
  var classnames_1 = __importDefault(require("classnames"));
78
68
  var fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
79
69
  var react_1 = __importStar(require("react"));
@@ -81,7 +71,6 @@ var FlatSVG_1 = __importDefault(require("./FlatSVG"));
81
71
  var List_1 = __importDefault(require("./List"));
82
72
  var useElementRect_1 = __importDefault(require("./hooks/useElementRect"));
83
73
  var asClassNameDict_1 = __importDefault(require("./utils/asClassNameDict"));
84
- var asComponentDict_1 = __importDefault(require("./utils/asComponentDict"));
85
74
  var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
86
75
  var cloneStyledElement_1 = __importDefault(require("./utils/cloneStyledElement"));
87
76
  var styles_1 = __importDefault(require("./utils/styles"));
@@ -91,8 +80,7 @@ var styles_1 = __importDefault(require("./utils/styles"));
91
80
  * component type to this component to automatically generate menu items.
92
81
  */
93
82
  exports.default = (0, react_1.forwardRef)(function (_a, ref) {
94
- var _b, _c, _d;
95
- var children = _a.children, className = _a.className, style = _a.style, _e = _a.borderThickness, borderThickness = _e === void 0 ? 0 : _e, data = _a.data, _f = _a.collapsesOnSelect, collapsesOnSelect = _f === void 0 ? true : _f, _g = _a.defaultLabel, defaultLabel = _g === void 0 ? 'Select' : _g, expandIconSvg = _a.expandIconSvg, collapseIconSvg = _a.collapseIconSvg, _h = _a.isInverted, isInverted = _h === void 0 ? false : _h, _j = _a.isTogglable, isTogglable = _j === void 0 ? false : _j, itemComponentType = _a.itemComponentType, externalItemLength = _a.itemLength, _k = _a.itemPadding, itemPadding = _k === void 0 ? 0 : _k, _l = _a.maxVisibleItems, maxVisibleItems = _l === void 0 ? -1 : _l, _m = _a.orientation, orientation = _m === void 0 ? 'vertical' : _m, _o = _a.selectionMode, selectionMode = _o === void 0 ? 'single' : _o, _p = _a.selectedIndices, externalSelectedIndices = _p === void 0 ? [] : _p, onActivateAt = _a.onActivateAt, onDeselectAt = _a.onDeselectAt, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, props = __rest(_a, ["children", "className", "style", "borderThickness", "data", "collapsesOnSelect", "defaultLabel", "expandIconSvg", "collapseIconSvg", "isInverted", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "selectionMode", "selectedIndices", "onActivateAt", "onDeselectAt", "onSelectAt", "onSelectionChange"]);
83
+ var children = _a.children, className = _a.className, style = _a.style, _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, collapseIconSvg = _a.collapseIconSvg, _c = _a.collapsesOnSelect, collapsesOnSelect = _c === void 0 ? true : _c, data = _a.data, _d = _a.defaultLabel, defaultLabel = _d === void 0 ? 'Select' : _d, expandIconSvg = _a.expandIconSvg, _e = _a.isInverted, isInverted = _e === void 0 ? false : _e, _f = _a.isTogglable, isTogglable = _f === void 0 ? false : _f, itemComponentType = _a.itemComponentType, externalItemLength = _a.itemLength, _g = _a.itemPadding, itemPadding = _g === void 0 ? 0 : _g, _h = _a.maxVisibleItems, maxVisibleItems = _h === void 0 ? -1 : _h, _j = _a.orientation, orientation = _j === void 0 ? 'vertical' : _j, _k = _a.selectedIndices, externalSelectedIndices = _k === void 0 ? [] : _k, _l = _a.selectionMode, selectionMode = _l === void 0 ? 'single' : _l, ToggleComponent = _a.toggleComponentType, onActivateAt = _a.onActivateAt, onDeselectAt = _a.onDeselectAt, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, props = __rest(_a, ["children", "className", "style", "borderThickness", "collapseIconSvg", "collapsesOnSelect", "data", "defaultLabel", "expandIconSvg", "isInverted", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "selectedIndices", "selectionMode", "toggleComponentType", "onActivateAt", "onDeselectAt", "onSelectAt", "onSelectionChange"]);
96
84
  var expand = function () {
97
85
  if (isCollapsed)
98
86
  setIsCollapsed(false);
@@ -135,8 +123,8 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
135
123
  collapse();
136
124
  };
137
125
  var bodyRef = (0, react_1.useRef)(null);
138
- var _q = __read((0, react_1.useState)(externalSelectedIndices), 2), selectedIndices = _q[0], setSelectedIndices = _q[1];
139
- var _r = __read((0, react_1.useState)(true), 2), isCollapsed = _r[0], setIsCollapsed = _r[1];
126
+ var _m = __read((0, react_1.useState)(externalSelectedIndices), 2), selectedIndices = _m[0], setSelectedIndices = _m[1];
127
+ var _o = __read((0, react_1.useState)(true), 2), isCollapsed = _o[0], setIsCollapsed = _o[1];
140
128
  var rect = (0, useElementRect_1.default)(bodyRef);
141
129
  (0, react_1.useEffect)(function () {
142
130
  window.addEventListener('click', clickOutsideHandler);
@@ -153,11 +141,6 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
153
141
  var numItems = data.length;
154
142
  var numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems);
155
143
  var menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness;
156
- var components = (0, asComponentDict_1.default)(children, {
157
- toggle: exports.DropdownToggle,
158
- expandIcon: exports.DropdownExpandIcon,
159
- collapseIcon: exports.DropdownCollapseIcon,
160
- });
161
144
  var fixedClassNames = (0, asClassNameDict_1.default)({
162
145
  root: (0, classnames_1.default)(orientation, {
163
146
  togglable: isTogglable,
@@ -197,6 +180,7 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
197
180
  },
198
181
  toggle: {
199
182
  borderWidth: "".concat(borderThickness, "px"),
183
+ cursor: 'pointer',
200
184
  height: '100%',
201
185
  left: '0',
202
186
  margin: '0',
@@ -256,37 +240,16 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
256
240
  width: '15px',
257
241
  },
258
242
  });
259
- var toggleComponent = (_b = components.toggle) !== null && _b !== void 0 ? _b : react_1.default.createElement("button", { style: defaultStyles.toggle });
260
- var expandIconComponent = (_c = components.expandIcon) !== null && _c !== void 0 ? _c : (expandIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: expandIconSvg, style: defaultStyles.expandIcon }) : react_1.default.createElement(react_1.default.Fragment, null));
261
- var collapseIconComponent = (_d = components.collapseIcon) !== null && _d !== void 0 ? _d : (collapseIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: collapseIconSvg, style: defaultStyles.collapseIcon }) : expandIconComponent);
243
+ var expandIconComponent = expandIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: expandIconSvg, style: defaultStyles.expandIcon }) : react_1.default.createElement(react_1.default.Fragment, null);
244
+ var collapseIconComponent = collapseIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: collapseIconSvg, style: defaultStyles.collapseIcon }) : expandIconComponent;
262
245
  return (react_1.default.createElement("div", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }),
263
246
  react_1.default.createElement("div", { ref: bodyRef, style: (0, styles_1.default)(fixedStyles.body) },
264
- cloneStyledElement_1.default.apply(void 0, __spreadArray([toggleComponent, {
265
- className: (0, classnames_1.default)(fixedClassNames.toggle),
266
- style: (0, styles_1.default)(fixedStyles.toggle),
267
- onClick: function () { return toggle(); },
268
- }], __read(components.toggle ? [] : [
247
+ ToggleComponent ? (react_1.default.createElement(ToggleComponent, { className: (0, classnames_1.default)(fixedClassNames.toggle), style: (0, styles_1.default)(fixedStyles.toggle), onClick: function () { return toggle(); } })) : (react_1.default.createElement("button", { className: (0, classnames_1.default)(fixedClassNames.toggle), style: (0, styles_1.default)(fixedStyles.toggle, defaultStyles.toggle), onClick: function () { return toggle(); } },
269
248
  react_1.default.createElement("label", { style: fixedStyles.toggleLabel, dangerouslySetInnerHTML: { __html: selectedIndices.length > 0 ? selectedIndices.map(function (t) { return data[t].label; }).join(', ') : defaultLabel !== null && defaultLabel !== void 0 ? defaultLabel : '' } }),
270
249
  (0, cloneStyledElement_1.default)(isCollapsed ? expandIconComponent : collapseIconComponent, {
271
250
  className: (0, classnames_1.default)(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),
272
251
  style: (0, styles_1.default)(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),
273
- }),
274
- ]), false)),
252
+ }))),
275
253
  react_1.default.createElement(List_1.default, { className: fixedClassNames.list, style: (0, styles_1.default)(fixedStyles.list), borderThickness: borderThickness, data: data, isTogglable: isTogglable, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, orientation: orientation, selectedIndices: selectedIndices, selectionMode: selectionMode, onActivateAt: onActivateAt, onDeselectAt: onDeselectAt, onSelectAt: selectAtHandler, onSelectionChange: onSelectionChange }))));
276
254
  });
277
- var DropdownToggle = function (_a) {
278
- var children = _a.children, props = __rest(_a, ["children"]);
279
- return react_1.default.createElement("button", __assign({}, props), children);
280
- };
281
- exports.DropdownToggle = DropdownToggle;
282
- var DropdownExpandIcon = function (_a) {
283
- var children = _a.children, props = __rest(_a, ["children"]);
284
- return react_1.default.createElement("div", __assign({}, props), children);
285
- };
286
- exports.DropdownExpandIcon = DropdownExpandIcon;
287
- var DropdownCollapseIcon = function (_a) {
288
- var children = _a.children, props = __rest(_a, ["children"]);
289
- return react_1.default.createElement("div", __assign({}, props), children);
290
- };
291
- exports.DropdownCollapseIcon = DropdownCollapseIcon;
292
255
  //# sourceMappingURL=Dropdown.js.map
package/lib/Dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isEqual from 'fast-deep-equal'\nimport React, { forwardRef, useEffect, useRef, useState, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps, type ListProps } from './List'\nimport useElementRect from './hooks/useElementRect'\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 DropdownData = {\n label?: string\n}\n\nexport type DropdownItemProps<T extends DropdownData = DropdownData> = ListItemProps<T>\n\nexport type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttributes<HTMLDivElement> & ListProps<T> & PropsWithChildren<{\n /**\n * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n * Supports all orientations.\n */\n isInverted?: boolean\n\n /**\n * Specifies if the dropdown should be collapsed upon selection. This only\n * works if `selectionMode` is `single`.\n */\n collapsesOnSelect?: boolean\n\n /**\n * Maximum number of items that are viside when the component 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 the component expands.\n */\n maxVisibleItems?: number\n\n /**\n * The label to appear on the dropdown button when no items are selected.\n */\n defaultLabel?: string\n\n /**\n * SVG markup to be put in the dropdown button as the expand icon.\n */\n expandIconSvg?: string\n\n /**\n * SVG markup to be put in the dropdown button as the collapse icon.\n */\n collapseIconSvg?: string\n}>\n\n/**\n * A dropdown menu component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide data and item\n * component type to this component to automatically generate menu items.\n */\nexport default forwardRef(({\n children,\n className,\n style,\n borderThickness = 0,\n data,\n collapsesOnSelect = true,\n defaultLabel = 'Select',\n expandIconSvg,\n collapseIconSvg,\n isInverted = false,\n isTogglable = false,\n itemComponentType,\n itemLength: externalItemLength,\n itemPadding = 0,\n maxVisibleItems = -1,\n orientation = 'vertical',\n selectionMode = 'single',\n selectedIndices: externalSelectedIndices = [],\n onActivateAt,\n onDeselectAt,\n onSelectAt,\n onSelectionChange,\n ...props\n}, ref) => {\n const expand = () => {\n if (isCollapsed) setIsCollapsed(false)\n }\n\n const collapse = () => {\n if (!isCollapsed) setIsCollapsed(true)\n }\n\n const toggle = () => {\n if (isCollapsed) {\n expand()\n }\n else {\n collapse()\n }\n }\n\n const selectAtHandler = (index: number) => {\n onSelectAt?.(index)\n\n if (selectionMode === 'single' && collapsesOnSelect) collapse()\n }\n\n const clickOutsideHandler = (event: MouseEvent) => {\n if (isCollapsed) return\n if (!(event.target instanceof Node)) return\n\n let isOutside = true\n let node = event.target\n\n while (node) {\n if (node === bodyRef.current) {\n isOutside = false\n break\n }\n\n if (!node.parentNode) break\n\n node = node.parentNode\n }\n\n if (!isOutside) return\n\n collapse()\n }\n\n const bodyRef = useRef<HTMLDivElement>(null)\n const [selectedIndices, setSelectedIndices] = useState(externalSelectedIndices)\n const [isCollapsed, setIsCollapsed] = useState(true)\n const rect = useElementRect(bodyRef)\n\n useEffect(() => {\n window.addEventListener('click', clickOutsideHandler)\n\n return () => {\n window.removeEventListener('click', clickOutsideHandler)\n }\n }, [isCollapsed])\n\n useEffect(() => {\n if (isEqual(externalSelectedIndices, selectedIndices)) return\n\n setSelectedIndices(externalSelectedIndices)\n }, [JSON.stringify(externalSelectedIndices)])\n\n const itemLength = externalItemLength ?? (orientation === 'vertical' ? rect.height : rect.width)\n const numItems = data.length\n const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n\n const components = asComponentDict(children, {\n toggle: DropdownToggle,\n expandIcon: DropdownExpandIcon,\n collapseIcon: DropdownCollapseIcon,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n toggle: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n expandIcon: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n collapseIcon: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n list: classNames({\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-start',\n overflow: 'visible',\n ...orientation === 'vertical' ? {\n flexDirection: isInverted ? 'column-reverse' : 'column',\n } : {\n flexDirection: isInverted ? 'row-reverse' : 'row',\n },\n },\n body: {\n height: '100%',\n width: '100%',\n },\n toggle: {\n borderWidth: `${borderThickness}px`,\n height: '100%',\n left: '0',\n margin: '0',\n outline: 'none',\n position: 'absolute',\n top: '0',\n width: '100%',\n zIndex: '1',\n },\n toggleLabel: {\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n pointerEvents: 'none',\n },\n expandIcon: {\n\n },\n collapseIcon: {\n\n },\n list: {\n position: 'absolute',\n ...orientation === 'vertical' ? {\n transition: 'height 100ms ease-out',\n width: '100%',\n height: isCollapsed ? '0px' : `${menuLength}px`,\n overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n ...isInverted ? {\n marginBottom: `${itemPadding - borderThickness}px`,\n bottom: '100%',\n } : {\n top: '100%',\n marginTop: `${itemPadding - borderThickness}px`,\n },\n } : {\n transition: 'width 100ms ease-out',\n width: isCollapsed ? '0px' : `${menuLength}px`,\n height: '100%',\n overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n ...isInverted ? {\n marginRight: `${itemPadding - borderThickness}px`,\n right: '100%',\n } : {\n left: '100%',\n marginLeft: `${itemPadding - borderThickness}px`,\n },\n },\n },\n })\n\n const defaultStyles = asStyleDict({\n toggle: {\n alignItems: 'center',\n background: '#fff',\n boxSizing: 'border-box',\n color: '#000',\n display: 'flex',\n flexDirection: 'row',\n fontSize: '16px',\n justifyContent: 'space-between',\n margin: '0',\n padding: '0 10px',\n },\n expandIcon: {\n height: '15px',\n margin: '0',\n padding: '0',\n width: '15px',\n },\n collapseIcon: {\n height: '15px',\n margin: '0',\n padding: '0',\n width: '15px',\n },\n })\n\n const toggleComponent = components.toggle ?? <button style={defaultStyles.toggle}/>\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\n {...props}\n ref={ref}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <div ref={bodyRef} style={styles(fixedStyles.body)}>\n {cloneStyledElement(toggleComponent, {\n className: classNames(fixedClassNames.toggle),\n style: styles(fixedStyles.toggle),\n onClick: () => toggle(),\n }, ...components.toggle ? [] : [\n <label style={fixedStyles.toggleLabel} dangerouslySetInnerHTML={{ __html: selectedIndices.length > 0 ? selectedIndices.map(t => data[t].label).join(', ') : defaultLabel ?? '' }}/>,\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 className={fixedClassNames.list}\n style={styles(fixedStyles.list)}\n borderThickness={borderThickness}\n data={data}\n isTogglable={isTogglable}\n itemComponentType={itemComponentType}\n itemLength={itemLength}\n itemPadding={itemPadding}\n orientation={orientation}\n selectedIndices={selectedIndices}\n selectionMode={selectionMode}\n onActivateAt={onActivateAt}\n onDeselectAt={onDeselectAt}\n onSelectAt={selectAtHandler}\n onSelectionChange={onSelectionChange}\n />\n </div>\n </div>\n )\n}) as <T extends DropdownData = DropdownData>(props: DropdownProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const DropdownToggle = ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => <button {...props}>{children}</button>\n\nexport const DropdownExpandIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n\nexport const DropdownCollapseIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n"]}
1
+ {"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isEqual from 'fast-deep-equal'\nimport React, { forwardRef, useEffect, useRef, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps, type ListProps } from './List'\nimport useElementRect from './hooks/useElementRect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type DropdownData = {\n label?: string\n}\n\nexport type DropdownToggleProps = HTMLAttributes<HTMLElement> & PropsWithChildren\n\nexport type DropdownItemProps<T extends DropdownData = DropdownData> = ListItemProps<T>\n\nexport type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttributes<HTMLDivElement> & ListProps<T> & PropsWithChildren<{\n /**\n * SVG markup to be put in the dropdown button as the collapse icon.\n */\n collapseIconSvg?: string\n\n /**\n * Specifies if the dropdown should be collapsed upon selection. This only\n * works if `selectionMode` is `single`.\n */\n collapsesOnSelect?: boolean\n\n /**\n * The label to appear on the dropdown button when no items are selected.\n */\n defaultLabel?: string\n\n /**\n * SVG markup to be put in the dropdown button as the expand icon.\n */\n expandIconSvg?: string\n\n /**\n * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n * Supports all orientations.\n */\n isInverted?: boolean\n\n /**\n * Maximum number of items that are viside when the component 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 the component expands.\n */\n maxVisibleItems?: number\n\n /**\n * React component type to be used for generating the toggle element inside\n * the component. When absent, one will be generated automatically.\n */\n toggleComponentType?: ComponentType<DropdownToggleProps>\n}>\n\n/**\n * A dropdown menu component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide data and item\n * component type to this component to automatically generate menu items.\n */\nexport default forwardRef(({\n children,\n className,\n style,\n borderThickness = 0,\n collapseIconSvg,\n collapsesOnSelect = true,\n data,\n defaultLabel = 'Select',\n expandIconSvg,\n isInverted = false,\n isTogglable = false,\n itemComponentType,\n itemLength: externalItemLength,\n itemPadding = 0,\n maxVisibleItems = -1,\n orientation = 'vertical',\n selectedIndices: externalSelectedIndices = [],\n selectionMode = 'single',\n toggleComponentType: ToggleComponent,\n onActivateAt,\n onDeselectAt,\n onSelectAt,\n onSelectionChange,\n ...props\n}, ref) => {\n const expand = () => {\n if (isCollapsed) setIsCollapsed(false)\n }\n\n const collapse = () => {\n if (!isCollapsed) setIsCollapsed(true)\n }\n\n const toggle = () => {\n if (isCollapsed) {\n expand()\n }\n else {\n collapse()\n }\n }\n\n const selectAtHandler = (index: number) => {\n onSelectAt?.(index)\n\n if (selectionMode === 'single' && collapsesOnSelect) collapse()\n }\n\n const clickOutsideHandler = (event: MouseEvent) => {\n if (isCollapsed) return\n if (!(event.target instanceof Node)) return\n\n let isOutside = true\n let node = event.target\n\n while (node) {\n if (node === bodyRef.current) {\n isOutside = false\n break\n }\n\n if (!node.parentNode) break\n\n node = node.parentNode\n }\n\n if (!isOutside) return\n\n collapse()\n }\n\n const bodyRef = useRef<HTMLDivElement>(null)\n const [selectedIndices, setSelectedIndices] = useState(externalSelectedIndices)\n const [isCollapsed, setIsCollapsed] = useState(true)\n const rect = useElementRect(bodyRef)\n\n useEffect(() => {\n window.addEventListener('click', clickOutsideHandler)\n\n return () => {\n window.removeEventListener('click', clickOutsideHandler)\n }\n }, [isCollapsed])\n\n useEffect(() => {\n if (isEqual(externalSelectedIndices, selectedIndices)) return\n\n setSelectedIndices(externalSelectedIndices)\n }, [JSON.stringify(externalSelectedIndices)])\n\n const itemLength = externalItemLength ?? (orientation === 'vertical' ? rect.height : rect.width)\n const numItems = data.length\n const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n toggle: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n expandIcon: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n collapseIcon: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n list: classNames({\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-start',\n overflow: 'visible',\n ...orientation === 'vertical' ? {\n flexDirection: isInverted ? 'column-reverse' : 'column',\n } : {\n flexDirection: isInverted ? 'row-reverse' : 'row',\n },\n },\n body: {\n height: '100%',\n width: '100%',\n },\n toggle: {\n borderWidth: `${borderThickness}px`,\n cursor: 'pointer',\n height: '100%',\n left: '0',\n margin: '0',\n outline: 'none',\n position: 'absolute',\n top: '0',\n width: '100%',\n zIndex: '1',\n },\n toggleLabel: {\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n pointerEvents: 'none',\n },\n expandIcon: {\n\n },\n collapseIcon: {\n\n },\n list: {\n position: 'absolute',\n ...orientation === 'vertical' ? {\n transition: 'height 100ms ease-out',\n width: '100%',\n height: isCollapsed ? '0px' : `${menuLength}px`,\n overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n ...isInverted ? {\n marginBottom: `${itemPadding - borderThickness}px`,\n bottom: '100%',\n } : {\n top: '100%',\n marginTop: `${itemPadding - borderThickness}px`,\n },\n } : {\n transition: 'width 100ms ease-out',\n width: isCollapsed ? '0px' : `${menuLength}px`,\n height: '100%',\n overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n ...isInverted ? {\n marginRight: `${itemPadding - borderThickness}px`,\n right: '100%',\n } : {\n left: '100%',\n marginLeft: `${itemPadding - borderThickness}px`,\n },\n },\n },\n })\n\n const defaultStyles = asStyleDict({\n toggle: {\n alignItems: 'center',\n background: '#fff',\n boxSizing: 'border-box',\n color: '#000',\n display: 'flex',\n flexDirection: 'row',\n fontSize: '16px',\n justifyContent: 'space-between',\n margin: '0',\n padding: '0 10px',\n },\n expandIcon: {\n height: '15px',\n margin: '0',\n padding: '0',\n width: '15px',\n },\n collapseIcon: {\n height: '15px',\n margin: '0',\n padding: '0',\n width: '15px',\n },\n })\n\n const expandIconComponent = expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>\n const collapseIconComponent = collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles.collapseIcon}/> : expandIconComponent\n\n return (\n <div\n {...props}\n ref={ref}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <div ref={bodyRef} style={styles(fixedStyles.body)}>\n {ToggleComponent ? (\n <ToggleComponent\n className={classNames(fixedClassNames.toggle)}\n style={styles(fixedStyles.toggle)}\n onClick={() => toggle()}\n />\n ) : (\n <button\n className={classNames(fixedClassNames.toggle)}\n style={styles(fixedStyles.toggle, defaultStyles.toggle)}\n onClick={() => toggle()}\n >\n <label style={fixedStyles.toggleLabel} dangerouslySetInnerHTML={{ __html: selectedIndices.length > 0 ? selectedIndices.map(t => data[t].label).join(', ') : defaultLabel ?? '' }}/>\n {cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n className: classNames(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),\n style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n })}\n </button>\n )}\n <List\n className={fixedClassNames.list}\n style={styles(fixedStyles.list)}\n borderThickness={borderThickness}\n data={data}\n isTogglable={isTogglable}\n itemComponentType={itemComponentType}\n itemLength={itemLength}\n itemPadding={itemPadding}\n orientation={orientation}\n selectedIndices={selectedIndices}\n selectionMode={selectionMode}\n onActivateAt={onActivateAt}\n onDeselectAt={onDeselectAt}\n onSelectAt={selectAtHandler}\n onSelectionChange={onSelectionChange}\n />\n </div>\n </div>\n )\n}) as <T extends DropdownData = DropdownData>(props: DropdownProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n"]}
package/lib/List.js CHANGED
@@ -87,7 +87,7 @@ var styles_1 = __importDefault(require("./utils/styles"));
87
87
  * generic. This component supports both horizontal and vertical orientations.
88
88
  */
89
89
  exports.default = (0, react_1.forwardRef)(function (_a, ref) {
90
- var className = _a.className, style = _a.style, _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, data = _a.data, _c = _a.selectionMode, selectionMode = _c === void 0 ? 'none' : _c, isTogglable = _a.isTogglable, ItemComponentType = _a.itemComponentType, itemLength = _a.itemLength, _d = _a.itemPadding, itemPadding = _d === void 0 ? 0 : _d, _e = _a.orientation, orientation = _e === void 0 ? 'vertical' : _e, _f = _a.selectedIndices, externalSelectedIndices = _f === void 0 ? [] : _f, onActivateAt = _a.onActivateAt, onDeselectAt = _a.onDeselectAt, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, props = __rest(_a, ["className", "style", "borderThickness", "data", "selectionMode", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "orientation", "selectedIndices", "onActivateAt", "onDeselectAt", "onSelectAt", "onSelectionChange"]);
90
+ var className = _a.className, style = _a.style, _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, data = _a.data, _c = _a.selectionMode, selectionMode = _c === void 0 ? 'none' : _c, isTogglable = _a.isTogglable, ItemComponent = _a.itemComponentType, itemLength = _a.itemLength, _d = _a.itemPadding, itemPadding = _d === void 0 ? 0 : _d, _e = _a.orientation, orientation = _e === void 0 ? 'vertical' : _e, _f = _a.selectedIndices, externalSelectedIndices = _f === void 0 ? [] : _f, onActivateAt = _a.onActivateAt, onDeselectAt = _a.onDeselectAt, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, props = __rest(_a, ["className", "style", "borderThickness", "data", "selectionMode", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "orientation", "selectedIndices", "onActivateAt", "onDeselectAt", "onSelectAt", "onSelectionChange"]);
91
91
  var isIndexOutOfRange = function (index) {
92
92
  if (index >= data.length)
93
93
  return true;
@@ -150,7 +150,7 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
150
150
  deselected.map(function (t) { return onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(t); });
151
151
  selected.map(function (t) { return onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(t); });
152
152
  onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectedIndices);
153
- }, [selectedIndices]);
153
+ }, [JSON.stringify(selectedIndices)]);
154
154
  var fixedClassNames = (0, asClassNameDict_1.default)({
155
155
  root: (0, classnames_1.default)(orientation, {
156
156
  togglable: isTogglable,
@@ -175,7 +175,7 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
175
175
  height: '100%',
176
176
  }),
177
177
  });
178
- return (react_1.default.createElement("div", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }), ItemComponentType && (react_1.default.createElement(Each_1.default, { in: data }, function (val, idx) { return (react_1.default.createElement(ItemComponentType, { className: (0, classnames_1.default)(fixedClassNames.item, {
178
+ return (react_1.default.createElement("div", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }), ItemComponent && (react_1.default.createElement(Each_1.default, { in: data }, function (val, idx) { return (react_1.default.createElement(ItemComponent, { className: (0, classnames_1.default)(fixedClassNames.item, {
179
179
  selected: isSelectedAt(idx),
180
180
  }), style: (0, styles_1.default)(fixedStyles.item, __assign(__assign({ pointerEvents: isTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto' }, orientation === 'vertical' ? {
181
181
  height: itemLength !== undefined ? "".concat(itemLength, "px") : undefined,
package/lib/List.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"List.js","sourceRoot":"/","sources":["List.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 ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport usePrevious from './hooks/usePrevious'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type ListItemProps<T> = HTMLAttributes<HTMLElement> & {\n data: T\n index: number\n isSelected: boolean\n orientation: Orientation\n}\n\nexport type ListProps<T> = HTMLAttributes<HTMLDivElement> & {\n /**\n * Thickness of item borders (in pixels). 0 indicates no borders.\n */\n borderThickness?: number\n\n /**\n * Generically typed data of each item.\n */\n data: T[]\n\n /**\n * Indicates if items can be toggled, i.e. they can be deselected if selected\n * again.\n */\n isTogglable?: boolean\n\n /**\n * React component type to be used to generate items for this list.\n */\n itemComponentType?: ComponentType<ListItemProps<T>>\n\n /**\n * Optional length (in pixels) of each item. Length refers to the height in\n * vertical orientation and width in horizontal orientation.\n */\n itemLength?: number\n\n /**\n * Padding between every item (in pixels).\n */\n itemPadding?: number\n\n /**\n * Orientation of the component.\n */\n orientation?: Orientation\n\n /**\n * The selected indices. If `selectionMode` is `single`, only only the first\n * value will be used.\n */\n selectedIndices?: number[]\n\n /**\n * Indicates the selection behavior:\n * - `none`: No selection at all.\n * - `single`: Only one item can be selected at a time.\n * - `multiple`: Multiple items can be selected at the same time.\n */\n selectionMode?: 'none' | 'single' | 'multiple'\n\n /**\n * Handler invoked when an item is activated.\n *\n * @param index Item index.\n */\n onActivateAt?: (index: number) => void\n\n /**\n * Handler invoked when an item is deselected.\n *\n * @param index Item index.\n */\n onDeselectAt?: (index: number) => void\n\n /**\n * Handler invoked when an item is selected.\n *\n * @param index Item index.\n */\n onSelectAt?: (index: number) => void\n\n /**\n * Handler invoked when the selected items changed.\n *\n * @param indices Indices of selected items.\n */\n onSelectionChange?: (indices: number[]) => void\n}\n\n/**\n * A scrollable list of selectable items. Items are generated based on the\n * provided React component type. The type of data passed to each item is\n * generic. This component supports both horizontal and vertical orientations.\n */\nexport default forwardRef(({\n className,\n style,\n borderThickness = 0,\n data,\n selectionMode = 'none',\n isTogglable,\n itemComponentType: ItemComponentType,\n itemLength,\n itemPadding = 0,\n orientation = 'vertical',\n selectedIndices: externalSelectedIndices = [],\n onActivateAt,\n onDeselectAt,\n onSelectAt,\n onSelectionChange,\n ...props\n}, ref) => {\n const isIndexOutOfRange = (index: number) => {\n if (index >= data.length) return true\n if (index < 0) return true\n\n return false\n }\n\n const isSelectedAt = (index: number) => selectedIndices.indexOf(index) >= 0\n\n const toggleAt = (index: number) => {\n if (isSelectedAt(index)) {\n deselectAt(index)\n }\n else {\n selectAt(index)\n }\n }\n\n const selectAt = (index: number) => {\n if (isSelectedAt(index)) return\n\n switch (selectionMode) {\n case 'multiple':\n setSelectedIndices(prev => [...prev.filter(t => t !== index), index])\n\n break\n case 'single':\n setSelectedIndices([index])\n\n break\n default:\n break\n }\n }\n\n const deselectAt = (index: number) => {\n if (!isSelectedAt(index)) return\n\n setSelectedIndices(prev => prev.filter(t => t !== index))\n }\n\n const activateAt = (index: number) => {\n if (selectionMode !== 'none') {\n if (isTogglable) {\n toggleAt(index)\n }\n else {\n selectAt(index)\n }\n }\n\n onActivateAt?.(index)\n }\n\n const [selectedIndices, setSelectedIndices] = useState(externalSelectedIndices)\n const prevSelectedIndices = usePrevious(selectedIndices)\n\n useEffect(() => {\n if (isEqual(externalSelectedIndices, selectedIndices)) return\n\n setSelectedIndices(externalSelectedIndices)\n }, [JSON.stringify(externalSelectedIndices)])\n\n useEffect(() => {\n if (selectionMode === 'none') return\n\n const deselected = prevSelectedIndices?.filter(t => !isIndexOutOfRange(t) && selectedIndices.indexOf(t) === -1) ?? []\n const selected = selectedIndices.filter(t => !isIndexOutOfRange(t) && prevSelectedIndices?.indexOf(t) === -1)\n\n deselected.map(t => onDeselectAt?.(t))\n selected.map(t => onSelectAt?.(t))\n\n onSelectionChange?.(selectedIndices)\n }, [selectedIndices])\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation, {\n togglable: isTogglable,\n }),\n item: classNames(orientation, {\n togglable: isTogglable,\n }),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'flex-start',\n counterReset: 'item-counter',\n display: 'flex',\n flex: '0 0 auto',\n flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n justifyContent: 'flex-start',\n listStyle: 'none',\n },\n item: {\n borderWidth: `${borderThickness}px`,\n counterIncrement: 'item-counter',\n flex: '0 0 auto',\n ...orientation === 'vertical' ? {\n width: '100%',\n } : {\n height: '100%',\n },\n },\n })\n\n return (\n <div\n {...props}\n ref={ref}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n {ItemComponentType && (\n <Each in={data}>\n {(val, idx) => (\n <ItemComponentType\n className={classNames(fixedClassNames.item, {\n selected: isSelectedAt(idx),\n })}\n style={styles(fixedStyles.item, {\n pointerEvents: isTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto',\n ...orientation === 'vertical' ? {\n height: itemLength !== undefined ? `${itemLength}px` : undefined,\n marginTop: `${idx === 0 ? 0 : -borderThickness}px`,\n } : {\n marginLeft: `${idx === 0 ? 0 : -borderThickness}px`,\n width: itemLength !== undefined ? `${itemLength}px` : undefined,\n },\n ...idx >= data.length - 1 ? {} : {\n ...orientation === 'vertical' ? {\n marginBottom: `${itemPadding}px`,\n } : {\n marginRight: `${itemPadding}px`,\n },\n },\n })}\n data-index={idx}\n data={val}\n index={idx}\n isSelected={isSelectedAt(idx)}\n orientation={orientation}\n onClick={() => activateAt(idx)}\n />\n )}\n </Each>\n )}\n </div>\n )\n}) as <T>(props: ListProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n"]}
1
+ {"version":3,"file":"List.js","sourceRoot":"/","sources":["List.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 ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport usePrevious from './hooks/usePrevious'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type ListItemProps<T> = HTMLAttributes<HTMLElement> & {\n data: T\n index: number\n isSelected: boolean\n orientation: Orientation\n}\n\nexport type ListProps<T> = HTMLAttributes<HTMLDivElement> & {\n /**\n * Thickness of item borders (in pixels). 0 indicates no borders.\n */\n borderThickness?: number\n\n /**\n * Generically typed data of each item.\n */\n data: T[]\n\n /**\n * Indicates if items can be toggled, i.e. they can be deselected if selected\n * again.\n */\n isTogglable?: boolean\n\n /**\n * React component type to be used to generate items for this list.\n */\n itemComponentType?: ComponentType<ListItemProps<T>>\n\n /**\n * Optional length (in pixels) of each item. Length refers to the height in\n * vertical orientation and width in horizontal orientation.\n */\n itemLength?: number\n\n /**\n * Padding between every item (in pixels).\n */\n itemPadding?: number\n\n /**\n * Orientation of the component.\n */\n orientation?: Orientation\n\n /**\n * The selected indices. If `selectionMode` is `single`, only only the first\n * value will be used.\n */\n selectedIndices?: number[]\n\n /**\n * Indicates the selection behavior:\n * - `none`: No selection at all.\n * - `single`: Only one item can be selected at a time.\n * - `multiple`: Multiple items can be selected at the same time.\n */\n selectionMode?: 'none' | 'single' | 'multiple'\n\n /**\n * Handler invoked when an item is activated.\n *\n * @param index Item index.\n */\n onActivateAt?: (index: number) => void\n\n /**\n * Handler invoked when an item is deselected.\n *\n * @param index Item index.\n */\n onDeselectAt?: (index: number) => void\n\n /**\n * Handler invoked when an item is selected.\n *\n * @param index Item index.\n */\n onSelectAt?: (index: number) => void\n\n /**\n * Handler invoked when the selected items changed.\n *\n * @param indices Indices of selected items.\n */\n onSelectionChange?: (indices: number[]) => void\n}\n\n/**\n * A scrollable list of selectable items. Items are generated based on the\n * provided React component type. The type of data passed to each item is\n * generic. This component supports both horizontal and vertical orientations.\n */\nexport default forwardRef(({\n className,\n style,\n borderThickness = 0,\n data,\n selectionMode = 'none',\n isTogglable,\n itemComponentType: ItemComponent,\n itemLength,\n itemPadding = 0,\n orientation = 'vertical',\n selectedIndices: externalSelectedIndices = [],\n onActivateAt,\n onDeselectAt,\n onSelectAt,\n onSelectionChange,\n ...props\n}, ref) => {\n const isIndexOutOfRange = (index: number) => {\n if (index >= data.length) return true\n if (index < 0) return true\n\n return false\n }\n\n const isSelectedAt = (index: number) => selectedIndices.indexOf(index) >= 0\n\n const toggleAt = (index: number) => {\n if (isSelectedAt(index)) {\n deselectAt(index)\n }\n else {\n selectAt(index)\n }\n }\n\n const selectAt = (index: number) => {\n if (isSelectedAt(index)) return\n\n switch (selectionMode) {\n case 'multiple':\n setSelectedIndices(prev => [...prev.filter(t => t !== index), index])\n\n break\n case 'single':\n setSelectedIndices([index])\n\n break\n default:\n break\n }\n }\n\n const deselectAt = (index: number) => {\n if (!isSelectedAt(index)) return\n\n setSelectedIndices(prev => prev.filter(t => t !== index))\n }\n\n const activateAt = (index: number) => {\n if (selectionMode !== 'none') {\n if (isTogglable) {\n toggleAt(index)\n }\n else {\n selectAt(index)\n }\n }\n\n onActivateAt?.(index)\n }\n\n const [selectedIndices, setSelectedIndices] = useState(externalSelectedIndices)\n const prevSelectedIndices = usePrevious(selectedIndices)\n\n useEffect(() => {\n if (isEqual(externalSelectedIndices, selectedIndices)) return\n\n setSelectedIndices(externalSelectedIndices)\n }, [JSON.stringify(externalSelectedIndices)])\n\n useEffect(() => {\n if (selectionMode === 'none') return\n\n const deselected = prevSelectedIndices?.filter(t => !isIndexOutOfRange(t) && selectedIndices.indexOf(t) === -1) ?? []\n const selected = selectedIndices.filter(t => !isIndexOutOfRange(t) && prevSelectedIndices?.indexOf(t) === -1)\n\n deselected.map(t => onDeselectAt?.(t))\n selected.map(t => onSelectAt?.(t))\n\n onSelectionChange?.(selectedIndices)\n }, [JSON.stringify(selectedIndices)])\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation, {\n togglable: isTogglable,\n }),\n item: classNames(orientation, {\n togglable: isTogglable,\n }),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'flex-start',\n counterReset: 'item-counter',\n display: 'flex',\n flex: '0 0 auto',\n flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n justifyContent: 'flex-start',\n listStyle: 'none',\n },\n item: {\n borderWidth: `${borderThickness}px`,\n counterIncrement: 'item-counter',\n flex: '0 0 auto',\n ...orientation === 'vertical' ? {\n width: '100%',\n } : {\n height: '100%',\n },\n },\n })\n\n return (\n <div\n {...props}\n ref={ref}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n {ItemComponent && (\n <Each in={data}>\n {(val, idx) => (\n <ItemComponent\n className={classNames(fixedClassNames.item, {\n selected: isSelectedAt(idx),\n })}\n style={styles(fixedStyles.item, {\n pointerEvents: isTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto',\n ...orientation === 'vertical' ? {\n height: itemLength !== undefined ? `${itemLength}px` : undefined,\n marginTop: `${idx === 0 ? 0 : -borderThickness}px`,\n } : {\n marginLeft: `${idx === 0 ? 0 : -borderThickness}px`,\n width: itemLength !== undefined ? `${itemLength}px` : undefined,\n },\n ...idx >= data.length - 1 ? {} : {\n ...orientation === 'vertical' ? {\n marginBottom: `${itemPadding}px`,\n } : {\n marginRight: `${itemPadding}px`,\n },\n },\n })}\n data-index={idx}\n data={val}\n index={idx}\n isSelected={isSelectedAt(idx)}\n orientation={orientation}\n onClick={() => activateAt(idx)}\n />\n )}\n </Each>\n )}\n </div>\n )\n}) as <T>(props: ListProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "etudes",
3
- "version": "3.2.0",
3
+ "version": "3.3.0",
4
4
  "description": "A study of headless React components",
5
5
  "main": "lib",
6
6
  "scripts": {