etudes 2.7.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/lib/Accordion.d.ts +78 -61
  2. package/lib/Accordion.js +50 -24
  3. package/lib/Accordion.js.map +1 -1
  4. package/lib/Dropdown.d.ts +21 -81
  5. package/lib/Dropdown.js +19 -22
  6. package/lib/Dropdown.js.map +1 -1
  7. package/lib/List.d.ts +50 -42
  8. package/lib/List.js +39 -19
  9. package/lib/List.js.map +1 -1
  10. package/package.json +1 -1
package/lib/Accordion.d.ts CHANGED
@@ -1,36 +1,28 @@
1
1
  import React, { type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
2
- import { type ListItemProps } from './List';
3
- type Orientation = 'horizontal' | 'vertical';
2
+ import { type ListItemProps, type ListProps } from './List';
4
3
  export type AccordionItemProps<T> = ListItemProps<T>;
5
4
  export type AccordionSectionData<T> = {
6
5
  label: string;
7
6
  items: T[];
8
7
  };
9
- export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
8
+ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<T>, 'data' | 'itemComponentType' | 'selectedIndices' | 'onActivateAt' | 'onSelectAt' | 'onDeselectAt'> & PropsWithChildren<{
10
9
  /**
11
- * Data provided to each section.
12
- */
13
- data: AccordionSectionData<T>[];
14
- /**
15
- * Indicates if sections can be toggled, as in, once a section is expanded,
16
- * it collapses when being selected again.
10
+ * Specifies if expanded sections should automatically collapse upon expanding
11
+ * another section.
17
12
  */
18
- isTogglable?: boolean;
13
+ autoCollapse?: boolean;
19
14
  /**
20
- * Index of the section that is selected by default. Any value less than 0
21
- * indicates that no section is selected by default.
15
+ * Data provided to each section.
22
16
  */
23
- defaultExpandedSectionIndex?: number;
17
+ data: AccordionSectionData<T>[];
24
18
  /**
25
- * Length (in pixels) of each item. This does not apply to the section hedaer
26
- * itself. Length refers to the height in vertical orientation and width in
27
- * horizontal orientation.
19
+ * Indices of sections that are expanded.
28
20
  */
29
- itemLength?: number;
21
+ expandedSectionIndices?: number[];
30
22
  /**
31
- * Padding (in pixels) between each item.
23
+ * Indices of selected items per section.
32
24
  */
33
- itemPadding?: number;
25
+ selectedItemIndices?: Record<number, number[]>;
34
26
  /**
35
27
  * Padding (in pixels) between each section.
36
28
  */
@@ -43,15 +35,6 @@ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildr
43
35
  * visible when a section expands.
44
36
  */
45
37
  maxVisibleItems?: number;
46
- /**
47
- * Orientation of the component.
48
- */
49
- orientation?: Orientation;
50
- /**
51
- * Thickness of the border (in pixels) of every item and the section header
52
- * itself. 0 indicates no borders.
53
- */
54
- borderThickness?: number;
55
38
  /**
56
39
  * SVG markup to be put in the section header as the expand icon.
57
40
  */
@@ -65,39 +48,57 @@ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildr
65
48
  */
66
49
  itemComponentType: ComponentType<AccordionItemProps<T>>;
67
50
  /**
68
- * Handler invoked when the selected item index of any section changes.
51
+ * Handler invoked when a section is expanded.
52
+ *
53
+ * @param sectionIndex Section index.
69
54
  */
70
- onItemIndexChange?: (index: number) => void;
55
+ onExpandSectionAt?: (sectionIndex: number) => void;
71
56
  /**
72
- * Handler invoked when the selected section index changes.
57
+ * Handler invoked when a section is collapsed.
58
+ *
59
+ * @param sectionIndex Section index.
73
60
  */
74
- onSectionIndexChange?: (index: number) => void;
75
- }>;
76
- declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
61
+ onCollapseSectionAt?: (sectionIndex: number) => void;
77
62
  /**
78
- * Data provided to each section.
63
+ * Handler invoked when an item is activated in a section.
64
+ *
65
+ * @param sectionIndex Section index.
66
+ * @param itemIndex Item index.
79
67
  */
80
- data: AccordionSectionData<T>[];
68
+ onActivateAt?: (sectionIndex: number, itemIndex: number) => void;
69
+ /**
70
+ * Handler invoked when an item is selected in a section.
71
+ *
72
+ * @param sectionIndex Section index.
73
+ * @param itemIndex Item index.
74
+ */
75
+ onSelectAt?: (sectionIndex: number, itemIndex: number) => void;
81
76
  /**
82
- * Indicates if sections can be toggled, as in, once a section is expanded,
83
- * it collapses when being selected again.
77
+ * Handler invoked when an item is deselected in a section.
78
+ *
79
+ * @param sectionIndex Section index.
80
+ * @param itemIndex Item index.
84
81
  */
85
- isTogglable?: boolean | undefined;
82
+ onDeselectAt?: (sectionIndex: number, itemIndex: number) => void;
83
+ }>;
84
+ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & Omit<ListProps<T>, "data" | "itemComponentType" | "selectedIndices" | "onActivateAt" | "onDeselectAt" | "onSelectAt"> & {
85
+ /**
86
+ * Specifies if expanded sections should automatically collapse upon expanding
87
+ * another section.
88
+ */
89
+ autoCollapse?: boolean | undefined;
86
90
  /**
87
- * Index of the section that is selected by default. Any value less than 0
88
- * indicates that no section is selected by default.
91
+ * Data provided to each section.
89
92
  */
90
- defaultExpandedSectionIndex?: number | undefined;
93
+ data: AccordionSectionData<T>[];
91
94
  /**
92
- * Length (in pixels) of each item. This does not apply to the section hedaer
93
- * itself. Length refers to the height in vertical orientation and width in
94
- * horizontal orientation.
95
+ * Indices of sections that are expanded.
95
96
  */
96
- itemLength?: number | undefined;
97
+ expandedSectionIndices?: number[] | undefined;
97
98
  /**
98
- * Padding (in pixels) between each item.
99
+ * Indices of selected items per section.
99
100
  */
100
- itemPadding?: number | undefined;
101
+ selectedItemIndices?: Record<number, number[]> | undefined;
101
102
  /**
102
103
  * Padding (in pixels) between each section.
103
104
  */
@@ -110,15 +111,6 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
110
111
  * visible when a section expands.
111
112
  */
112
113
  maxVisibleItems?: number | undefined;
113
- /**
114
- * Orientation of the component.
115
- */
116
- orientation?: Orientation | undefined;
117
- /**
118
- * Thickness of the border (in pixels) of every item and the section header
119
- * itself. 0 indicates no borders.
120
- */
121
- borderThickness?: number | undefined;
122
114
  /**
123
115
  * SVG markup to be put in the section header as the expand icon.
124
116
  */
@@ -132,13 +124,38 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
132
124
  */
133
125
  itemComponentType: React.ComponentType<AccordionItemProps<T>>;
134
126
  /**
135
- * Handler invoked when the selected item index of any section changes.
127
+ * Handler invoked when a section is expanded.
128
+ *
129
+ * @param sectionIndex Section index.
130
+ */
131
+ onExpandSectionAt?: ((sectionIndex: number) => void) | undefined;
132
+ /**
133
+ * Handler invoked when a section is collapsed.
134
+ *
135
+ * @param sectionIndex Section index.
136
+ */
137
+ onCollapseSectionAt?: ((sectionIndex: number) => void) | undefined;
138
+ /**
139
+ * Handler invoked when an item is activated in a section.
140
+ *
141
+ * @param sectionIndex Section index.
142
+ * @param itemIndex Item index.
143
+ */
144
+ onActivateAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
145
+ /**
146
+ * Handler invoked when an item is selected in a section.
147
+ *
148
+ * @param sectionIndex Section index.
149
+ * @param itemIndex Item index.
136
150
  */
137
- onItemIndexChange?: ((index: number) => void) | undefined;
151
+ onSelectAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
138
152
  /**
139
- * Handler invoked when the selected section index changes.
153
+ * Handler invoked when an item is deselected in a section.
154
+ *
155
+ * @param sectionIndex Section index.
156
+ * @param itemIndex Item index.
140
157
  */
141
- onSectionIndexChange?: ((index: number) => void) | undefined;
158
+ onDeselectAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
142
159
  } & {
143
160
  children?: React.ReactNode;
144
161
  } & {
package/lib/Accordion.js CHANGED
@@ -75,6 +75,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
75
75
  Object.defineProperty(exports, "__esModule", { value: true });
76
76
  exports.AccordionCollapseIcon = exports.AccordionExpandIcon = exports.AccordionHeader = void 0;
77
77
  var classnames_1 = __importDefault(require("classnames"));
78
+ var fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
78
79
  var react_1 = __importStar(require("react"));
79
80
  var Each_1 = __importDefault(require("./Each"));
80
81
  var FlatSVG_1 = __importDefault(require("./FlatSVG"));
@@ -85,25 +86,58 @@ var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
85
86
  var cloneStyledElement_1 = __importDefault(require("./utils/cloneStyledElement"));
86
87
  var styles_1 = __importDefault(require("./utils/styles"));
87
88
  exports.default = (0, react_1.forwardRef)(function (_a, ref) {
88
- var children = _a.children, className = _a.className, style = _a.style, _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, data = _a.data, _c = _a.defaultExpandedSectionIndex, defaultExpandedSectionIndex = _c === void 0 ? -1 : _c, expandIconSvg = _a.expandIconSvg, collapseIconSvg = _a.collapseIconSvg, _d = _a.isTogglable, isTogglable = _d === void 0 ? true : _d, 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, onItemIndexChange = _a.onItemIndexChange, onSectionIndexChange = _a.onSectionIndexChange, props = __rest(_a, ["children", "className", "style", "borderThickness", "data", "defaultExpandedSectionIndex", "expandIconSvg", "collapseIconSvg", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "sectionPadding", "onItemIndexChange", "onSectionIndexChange"]);
89
- var isSectionSelectedAt = function (index) { return expandedSectionIndex === index; };
90
- var toggleSectionAt = function (index) {
91
- if (isTogglable && isSectionSelectedAt(index)) {
92
- setExpandedSectionIndex(-1);
89
+ var children = _a.children, className = _a.className, style = _a.style, _b = _a.autoCollapse, autoCollapse = _b === void 0 ? false : _b, _c = _a.borderThickness, borderThickness = _c === void 0 ? 0 : _c, collapseIconSvg = _a.collapseIconSvg, data = _a.data, _d = _a.expandedSectionIndices, externalExpandedSectionIndices = _d === void 0 ? [] : _d, expandIconSvg = _a.expandIconSvg, isTogglable = _a.isTogglable, itemComponentType = _a.itemComponentType, _e = _a.itemLength, itemLength = _e === void 0 ? 50 : _e, _f = _a.itemPadding, itemPadding = _f === void 0 ? 0 : _f, _g = _a.maxVisibleItems, maxVisibleItems = _g === void 0 ? -1 : _g, _h = _a.orientation, orientation = _h === void 0 ? 'vertical' : _h, _j = _a.sectionPadding, sectionPadding = _j === void 0 ? 0 : _j, _k = _a.selectedItemIndices, externalSelectedItemIndices = _k === void 0 ? {} : _k, _l = _a.selectionMode, selectionMode = _l === void 0 ? 'single' : _l, onActivateAt = _a.onActivateAt, onSelectAt = _a.onSelectAt, onDeselectAt = _a.onDeselectAt, props = __rest(_a, ["children", "className", "style", "autoCollapse", "borderThickness", "collapseIconSvg", "data", "expandedSectionIndices", "expandIconSvg", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "sectionPadding", "selectedItemIndices", "selectionMode", "onActivateAt", "onSelectAt", "onDeselectAt"]);
90
+ var isSectionExpandedAt = function (idx) { return expandedSectionIndices.indexOf(idx) >= 0; };
91
+ var toggleSectionAt = function (idx) {
92
+ if (isSectionExpandedAt(idx)) {
93
+ setExpandedSectionIndices(function (prev) { return prev.filter(function (t) { return t !== idx; }); });
94
+ }
95
+ else if (autoCollapse) {
96
+ setExpandedSectionIndices([idx]);
93
97
  }
94
98
  else {
95
- setExpandedSectionIndex(index);
99
+ setExpandedSectionIndices(function (prev) { return __spreadArray(__spreadArray([], __read(prev.filter(function (t) { return t !== idx; })), false), [idx], false); });
100
+ }
101
+ };
102
+ var selectAt = function (sectionIdx, itemIdx) {
103
+ var _a;
104
+ switch (selectionMode) {
105
+ case 'multiple':
106
+ setSelectedItemIndices(function (prev) {
107
+ var _a;
108
+ var _b;
109
+ return (__assign(__assign({}, prev), (_a = {}, _a[sectionIdx] = __spreadArray(__spreadArray([], __read(((_b = prev[sectionIdx]) !== null && _b !== void 0 ? _b : []).filter(function (t) { return t !== itemIdx; })), false), [itemIdx], false), _a)));
110
+ });
111
+ onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(sectionIdx, itemIdx);
112
+ break;
113
+ case 'single':
114
+ setSelectedItemIndices((_a = {}, _a[sectionIdx] = [itemIdx], _a));
115
+ onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(sectionIdx, itemIdx);
116
+ break;
117
+ default:
118
+ break;
96
119
  }
97
120
  };
98
- var _k = __read((0, react_1.useState)(defaultExpandedSectionIndex), 2), expandedSectionIndex = _k[0], setExpandedSectionIndex = _k[1];
99
- var _l = __read((0, react_1.useState)(-1), 2), selectedSectionIndex = _l[0], setSelectedSectionIndex = _l[1];
100
- var _m = __read((0, react_1.useState)(-1), 2), selectedItemIndex = _m[0], setSelectedItemIndex = _m[1];
121
+ var deselectAt = function (sectionIdx, itemIdx) {
122
+ setSelectedItemIndices(function (prev) {
123
+ var _a;
124
+ var _b;
125
+ return (__assign(__assign({}, prev), (_a = {}, _a[sectionIdx] = ((_b = prev[sectionIdx]) !== null && _b !== void 0 ? _b : []).filter(function (t) { return t !== itemIdx; }), _a)));
126
+ });
127
+ onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(sectionIdx, itemIdx);
128
+ };
129
+ var _m = __read((0, react_1.useState)(externalExpandedSectionIndices), 2), expandedSectionIndices = _m[0], setExpandedSectionIndices = _m[1];
130
+ var _o = __read((0, react_1.useState)(externalSelectedItemIndices), 2), selectedItemIndices = _o[0], setSelectedItemIndices = _o[1];
101
131
  (0, react_1.useEffect)(function () {
102
- onSectionIndexChange === null || onSectionIndexChange === void 0 ? void 0 : onSectionIndexChange(expandedSectionIndex);
103
- }, [expandedSectionIndex]);
132
+ if ((0, fast_deep_equal_1.default)(expandedSectionIndices, expandedSectionIndices))
133
+ return;
134
+ setExpandedSectionIndices(externalExpandedSectionIndices);
135
+ }, [JSON.stringify(externalExpandedSectionIndices)]);
104
136
  (0, react_1.useEffect)(function () {
105
- onItemIndexChange === null || onItemIndexChange === void 0 ? void 0 : onItemIndexChange(selectedItemIndex);
106
- }, [selectedItemIndex]);
137
+ if ((0, fast_deep_equal_1.default)(externalSelectedItemIndices, selectedItemIndices))
138
+ return;
139
+ setSelectedItemIndices(externalSelectedItemIndices);
140
+ }, [JSON.stringify(externalSelectedItemIndices)]);
107
141
  var components = (0, asComponentDict_1.default)(children, {
108
142
  header: exports.AccordionHeader,
109
143
  expandIcon: exports.AccordionExpandIcon,
@@ -193,11 +227,11 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
193
227
  });
194
228
  return (react_1.default.createElement("div", __assign({}, props, { className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }),
195
229
  react_1.default.createElement(Each_1.default, { in: data }, function (section, sectionIdx) {
196
- var _a, _b, _c;
230
+ var _a, _b, _c, _d;
197
231
  var numItems = section.items.length;
198
232
  var numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems);
199
233
  var menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness;
200
- var isCollapsed = !isSectionSelectedAt(sectionIdx);
234
+ var isCollapsed = !isSectionExpandedAt(sectionIdx);
201
235
  var headerComponent = (_a = components.header) !== null && _a !== void 0 ? _a : react_1.default.createElement(exports.AccordionHeader, { style: defaultStyles.header });
202
236
  var expandIconComponent = (_b = components.expandIcon) !== null && _b !== void 0 ? _b : (expandIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: expandIconSvg, style: defaultStyles.expandIcon }) : react_1.default.createElement(react_1.default.Fragment, null));
203
237
  var collapseIconComponent = (_c = components.collapseIcon) !== null && _c !== void 0 ? _c : (collapseIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: collapseIconSvg, style: defaultStyles.collapseIcon }) : expandIconComponent);
@@ -228,15 +262,7 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
228
262
  marginLeft: isCollapsed ? '0px' : "".concat(itemPadding - borderThickness, "px"),
229
263
  overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',
230
264
  width: isCollapsed ? '0px' : "".concat(menuLength, "px"),
231
- }), borderThickness: borderThickness, data: section.items, isSelectable: true, isTogglable: isTogglable, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, orientation: orientation, selectedIndex: selectedSectionIndex === sectionIdx ? selectedItemIndex : -1, onDeselectAt: function () {
232
- if (selectedSectionIndex !== sectionIdx)
233
- return;
234
- setSelectedSectionIndex(-1);
235
- setSelectedItemIndex(-1);
236
- }, onSelectAt: function (itemIdx) {
237
- setSelectedSectionIndex(sectionIdx);
238
- setSelectedItemIndex(itemIdx);
239
- } })));
265
+ }), borderThickness: borderThickness, data: section.items, selectionMode: selectionMode, isTogglable: isTogglable, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, orientation: orientation, selectedIndices: (_d = selectedItemIndices[sectionIdx]) !== null && _d !== void 0 ? _d : [], onActivateAt: function (itemIdx) { return onActivateAt === null || onActivateAt === void 0 ? void 0 : onActivateAt(sectionIdx, itemIdx); }, onDeselectAt: function (itemIdx) { return deselectAt(sectionIdx, itemIdx); }, onSelectAt: function (itemIdx) { return selectAt(sectionIdx, itemIdx); } })));
240
266
  })));
241
267
  });
242
268
  var AccordionHeader = function (_a) {
package/lib/Accordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps } from './List'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type AccordionItemProps<T> = ListItemProps<T>\n\nexport type AccordionSectionData<T> = {\n label: string\n items: T[]\n}\n\nexport type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n /**\n * Data provided to each section.\n */\n data: AccordionSectionData<T>[]\n\n /**\n * Indicates if sections can be toggled, as in, once a section is expanded,\n * it collapses when being selected again.\n */\n isTogglable?: boolean\n\n /**\n * Index of the section that is selected by default. Any value less than 0\n * indicates that no section is selected by default.\n */\n defaultExpandedSectionIndex?: number\n\n /**\n * Length (in pixels) of each item. This does not apply to the section hedaer\n * itself. Length refers to the height in vertical orientation and width in\n * horizontal orientation.\n */\n itemLength?: number\n\n /**\n * Padding (in pixels) between each item.\n */\n itemPadding?: number\n\n /**\n * Padding (in pixels) between each section.\n */\n sectionPadding?: number\n\n /**\n * Maximum number of items that are viside when a section expands. When a\n * value greater than or equal to 0 is specified, only that number of items\n * will be visible at a time, and a scrollbar will appear to scroll to\n * remaining items. Any value less than 0 indicates that all items will be\n * visible when a section expands.\n */\n maxVisibleItems?: number\n\n /**\n * Orientation of the component.\n */\n orientation?: Orientation\n\n /**\n * Thickness of the border (in pixels) of every item and the section header\n * itself. 0 indicates no borders.\n */\n borderThickness?: number\n\n /**\n * SVG markup to be put in the section header as the expand icon.\n */\n expandIconSvg?: string\n\n /**\n * SVG markup to be put in the section header as the collapse icon.\n */\n collapseIconSvg?: string\n\n /**\n * React component type to be used for generating items inside the component.\n */\n itemComponentType: ComponentType<AccordionItemProps<T>>\n\n /**\n * Handler invoked when the selected item index of any section changes.\n */\n onItemIndexChange?: (index: number) => void\n\n /**\n * Handler invoked when the selected section index changes.\n */\n onSectionIndexChange?: (index: number) => void\n}>\n\nexport default forwardRef(({\n children,\n className,\n style,\n borderThickness = 0,\n data,\n defaultExpandedSectionIndex = -1,\n expandIconSvg,\n collapseIconSvg,\n isTogglable = true,\n itemComponentType,\n itemLength = 50,\n itemPadding = 0,\n maxVisibleItems = -1,\n orientation = 'vertical',\n sectionPadding = 0,\n onItemIndexChange,\n onSectionIndexChange,\n ...props\n}, ref) => {\n const isSectionSelectedAt = (index: number) => expandedSectionIndex === index\n\n const toggleSectionAt = (index: number) => {\n if (isTogglable && isSectionSelectedAt(index)) {\n setExpandedSectionIndex(-1)\n }\n else {\n setExpandedSectionIndex(index)\n }\n }\n\n const [expandedSectionIndex, setExpandedSectionIndex] = useState(defaultExpandedSectionIndex)\n const [selectedSectionIndex, setSelectedSectionIndex] = useState(-1)\n const [selectedItemIndex, setSelectedItemIndex] = useState(-1)\n\n useEffect(() => {\n onSectionIndexChange?.(expandedSectionIndex)\n }, [expandedSectionIndex])\n\n useEffect(() => {\n onItemIndexChange?.(selectedItemIndex)\n }, [selectedItemIndex])\n\n const components = asComponentDict(children, {\n header: AccordionHeader,\n expandIcon: AccordionExpandIcon,\n collapseIcon: AccordionCollapseIcon,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n header: classNames(orientation),\n expandIcon: classNames(orientation),\n collapseIcon: classNames(orientation),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flex: '0 0 auto',\n justifyContent: 'flex-start',\n padding: '0',\n ...orientation === 'vertical' ? {\n flexDirection: 'column',\n height: 'auto',\n } : {\n flexDirection: 'row',\n width: 'auto',\n },\n },\n section: {\n alignItems: 'flex-start',\n display: 'flex',\n flex: '0 0 auto',\n justifyContent: 'flex-start',\n margin: '0',\n padding: '0',\n ...orientation === 'vertical' ? {\n flexDirection: 'column',\n width: '100%',\n } : {\n flexDirection: 'row',\n height: '100%',\n },\n },\n header: {\n borderWidth: `${borderThickness}px`,\n margin: '0',\n outline: 'none',\n ...orientation === 'vertical' ? {\n width: '100%',\n } : {\n height: '100%',\n },\n },\n headerLabel: {\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n transition: 'inherit',\n },\n expandIcon: {\n margin: '0',\n padding: '0',\n },\n collapseIcon: {\n margin: '0',\n padding: '0',\n },\n list: {\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n width: '100%',\n transitionProperty: 'height, margin',\n top: '100%',\n } : {\n height: '100%',\n transitionProperty: 'width, margin',\n left: '100%',\n },\n },\n })\n\n const defaultStyles = asStyleDict({\n header: {\n alignItems: 'center',\n background: '#fff',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: '0 10px',\n transitionDuration: '100ms',\n transitionProperty: 'transform, opacity, background, color',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n height: '50px',\n } : {\n width: '50px',\n },\n },\n expandIcon: {\n boxSizing: 'border-box',\n display: 'block',\n fill: '#000',\n height: '15px',\n transformOrigin: 'center',\n transitionDuration: '100ms',\n transitionProperty: 'transform',\n transitionTimingFunction: 'ease-out',\n width: '15px',\n },\n collapseIcon: {\n boxSizing: 'border-box',\n display: 'block',\n fill: '#000',\n height: '15px',\n transformOrigin: 'center',\n transitionDuration: '100ms',\n transitionProperty: 'transform',\n transitionTimingFunction: 'ease-out',\n width: '15px',\n },\n })\n\n return (\n <div\n {...props}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <Each in={data}>\n {(section, sectionIdx) => {\n const numItems = section.items.length\n const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n const isCollapsed = !isSectionSelectedAt(sectionIdx)\n const headerComponent = components.header ?? <AccordionHeader style={defaultStyles.header}/>\n const expandIconComponent = components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>)\n const collapseIconComponent = components.collapseIcon ?? (collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles.collapseIcon}/> : expandIconComponent)\n\n return (\n <div style={styles(fixedStyles.section, orientation === 'vertical' ? {\n marginTop: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n } : {\n marginLeft: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n })}>\n {cloneStyledElement(headerComponent, {\n className: classNames(fixedClassNames.header, {\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n style: styles(fixedStyles.header),\n onClick: () => toggleSectionAt(sectionIdx),\n }, ...[\n <label style={fixedStyles.headerLabel} dangerouslySetInnerHTML={{ __html: section.label }}/>,\n cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n className: classNames(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),\n style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n }),\n ])}\n <List\n style={styles(fixedStyles.list, orientation === 'vertical' ? {\n height: isCollapsed ? '0px' : `${menuLength}px`,\n marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n } : {\n marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n width: isCollapsed ? '0px' : `${menuLength}px`,\n })}\n borderThickness={borderThickness}\n data={section.items}\n isSelectable={true}\n isTogglable={isTogglable}\n itemComponentType={itemComponentType}\n itemLength={itemLength}\n itemPadding={itemPadding}\n orientation={orientation}\n selectedIndex={selectedSectionIndex === sectionIdx ? selectedItemIndex : -1}\n onDeselectAt={() => {\n if (selectedSectionIndex !== sectionIdx) return\n setSelectedSectionIndex(-1)\n setSelectedItemIndex(-1)\n }}\n onSelectAt={itemIdx => {\n setSelectedSectionIndex(sectionIdx)\n setSelectedItemIndex(itemIdx)\n }}\n />\n </div>\n )\n }}\n </Each>\n </div>\n )\n}) as <T>(props: AccordionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const AccordionHeader = ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => <button {...props}>{children}</button>\n\nexport const AccordionExpandIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n\nexport const AccordionCollapseIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n"]}
1
+ {"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isEqual from 'fast-deep-equal'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps, type ListProps } from './List'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type AccordionItemProps<T> = ListItemProps<T>\n\nexport type AccordionSectionData<T> = {\n label: string\n items: T[]\n}\n\nexport type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<T>, 'data' | 'itemComponentType' | 'selectedIndices' | 'onActivateAt' | 'onSelectAt' | 'onDeselectAt'> & PropsWithChildren<{\n /**\n * Specifies if expanded sections should automatically collapse upon expanding\n * another section.\n */\n autoCollapse?: boolean\n\n /**\n * Data provided to each section.\n */\n data: AccordionSectionData<T>[]\n\n /**\n * Indices of sections that are expanded.\n */\n expandedSectionIndices?: number[]\n\n /**\n * Indices of selected items per section.\n */\n selectedItemIndices?: Record<number, number[]>\n\n /**\n * Padding (in pixels) between each section.\n */\n sectionPadding?: number\n\n /**\n * Maximum number of items that are viside when a section expands. When a\n * value greater than or equal to 0 is specified, only that number of items\n * will be visible at a time, and a scrollbar will appear to scroll to\n * remaining items. Any value less than 0 indicates that all items will be\n * visible when a section expands.\n */\n maxVisibleItems?: number\n\n /**\n * SVG markup to be put in the section header as the expand icon.\n */\n expandIconSvg?: string\n\n /**\n * SVG markup to be put in the section header as the collapse icon.\n */\n collapseIconSvg?: string\n\n /**\n * React component type to be used for generating items inside the component.\n */\n itemComponentType: ComponentType<AccordionItemProps<T>>\n\n /**\n * Handler invoked when a section is expanded.\n *\n * @param sectionIndex Section index.\n */\n onExpandSectionAt?: (sectionIndex: number) => void\n\n /**\n * Handler invoked when a section is collapsed.\n *\n * @param sectionIndex Section index.\n */\n onCollapseSectionAt?: (sectionIndex: number) => void\n\n /**\n * Handler invoked when an item is activated in a section.\n *\n * @param sectionIndex Section index.\n * @param itemIndex Item index.\n */\n onActivateAt?: (sectionIndex: number, itemIndex: number) => void\n\n /**\n * Handler invoked when an item is selected in a section.\n *\n * @param sectionIndex Section index.\n * @param itemIndex Item index.\n */\n onSelectAt?: (sectionIndex: number, itemIndex: number) => void\n\n /**\n * Handler invoked when an item is deselected in a section.\n *\n * @param sectionIndex Section index.\n * @param itemIndex Item index.\n */\n onDeselectAt?: (sectionIndex: number, itemIndex: number) => void\n}>\n\nexport default forwardRef(({\n children,\n className,\n style,\n autoCollapse = false,\n borderThickness = 0,\n collapseIconSvg,\n data,\n expandedSectionIndices: externalExpandedSectionIndices = [],\n expandIconSvg,\n isTogglable,\n itemComponentType,\n itemLength = 50,\n itemPadding = 0,\n maxVisibleItems = -1,\n orientation = 'vertical',\n sectionPadding = 0,\n selectedItemIndices: externalSelectedItemIndices = {},\n selectionMode = 'single',\n onActivateAt,\n onSelectAt,\n onDeselectAt,\n ...props\n}, ref) => {\n const isSectionExpandedAt = (idx: number) => expandedSectionIndices.indexOf(idx) >= 0\n\n const toggleSectionAt = (idx: number) => {\n if (isSectionExpandedAt(idx)) {\n setExpandedSectionIndices(prev => prev.filter(t => t !== idx))\n }\n else if (autoCollapse) {\n setExpandedSectionIndices([idx])\n }\n else {\n setExpandedSectionIndices(prev => [...prev.filter(t => t !== idx), idx])\n }\n }\n\n const selectAt = (sectionIdx: number, itemIdx: number) => {\n switch (selectionMode) {\n case 'multiple':\n setSelectedItemIndices(prev => ({\n ...prev,\n [sectionIdx]: [...(prev[sectionIdx] ?? []).filter(t => t !== itemIdx), itemIdx],\n }))\n\n onSelectAt?.(sectionIdx, itemIdx)\n\n break\n case 'single':\n setSelectedItemIndices({ [sectionIdx]: [itemIdx] })\n onSelectAt?.(sectionIdx, itemIdx)\n\n break\n default:\n break\n }\n }\n\n const deselectAt = (sectionIdx: number, itemIdx: number) => {\n setSelectedItemIndices(prev => ({\n ...prev,\n [sectionIdx]: (prev[sectionIdx] ?? []).filter(t => t !== itemIdx),\n }))\n\n onDeselectAt?.(sectionIdx, itemIdx)\n }\n\n const [expandedSectionIndices, setExpandedSectionIndices] = useState(externalExpandedSectionIndices)\n const [selectedItemIndices, setSelectedItemIndices] = useState(externalSelectedItemIndices)\n\n useEffect(() => {\n if (isEqual(expandedSectionIndices, expandedSectionIndices)) return\n\n setExpandedSectionIndices(externalExpandedSectionIndices)\n }, [JSON.stringify(externalExpandedSectionIndices)])\n\n useEffect(() => {\n if (isEqual(externalSelectedItemIndices, selectedItemIndices)) return\n\n setSelectedItemIndices(externalSelectedItemIndices)\n }, [JSON.stringify(externalSelectedItemIndices)])\n\n const components = asComponentDict(children, {\n header: AccordionHeader,\n expandIcon: AccordionExpandIcon,\n collapseIcon: AccordionCollapseIcon,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n header: classNames(orientation),\n expandIcon: classNames(orientation),\n collapseIcon: classNames(orientation),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flex: '0 0 auto',\n justifyContent: 'flex-start',\n padding: '0',\n ...orientation === 'vertical' ? {\n flexDirection: 'column',\n height: 'auto',\n } : {\n flexDirection: 'row',\n width: 'auto',\n },\n },\n section: {\n alignItems: 'flex-start',\n display: 'flex',\n flex: '0 0 auto',\n justifyContent: 'flex-start',\n margin: '0',\n padding: '0',\n ...orientation === 'vertical' ? {\n flexDirection: 'column',\n width: '100%',\n } : {\n flexDirection: 'row',\n height: '100%',\n },\n },\n header: {\n borderWidth: `${borderThickness}px`,\n margin: '0',\n outline: 'none',\n ...orientation === 'vertical' ? {\n width: '100%',\n } : {\n height: '100%',\n },\n },\n headerLabel: {\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n transition: 'inherit',\n },\n expandIcon: {\n margin: '0',\n padding: '0',\n },\n collapseIcon: {\n margin: '0',\n padding: '0',\n },\n list: {\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n width: '100%',\n transitionProperty: 'height, margin',\n top: '100%',\n } : {\n height: '100%',\n transitionProperty: 'width, margin',\n left: '100%',\n },\n },\n })\n\n const defaultStyles = asStyleDict({\n header: {\n alignItems: 'center',\n background: '#fff',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: '0 10px',\n transitionDuration: '100ms',\n transitionProperty: 'transform, opacity, background, color',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n height: '50px',\n } : {\n width: '50px',\n },\n },\n expandIcon: {\n boxSizing: 'border-box',\n display: 'block',\n fill: '#000',\n height: '15px',\n transformOrigin: 'center',\n transitionDuration: '100ms',\n transitionProperty: 'transform',\n transitionTimingFunction: 'ease-out',\n width: '15px',\n },\n collapseIcon: {\n boxSizing: 'border-box',\n display: 'block',\n fill: '#000',\n height: '15px',\n transformOrigin: 'center',\n transitionDuration: '100ms',\n transitionProperty: 'transform',\n transitionTimingFunction: 'ease-out',\n width: '15px',\n },\n })\n\n return (\n <div\n {...props}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <Each in={data}>\n {(section, sectionIdx) => {\n const numItems = section.items.length\n const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n const isCollapsed = !isSectionExpandedAt(sectionIdx)\n const headerComponent = components.header ?? <AccordionHeader style={defaultStyles.header}/>\n const expandIconComponent = components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>)\n const collapseIconComponent = components.collapseIcon ?? (collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles.collapseIcon}/> : expandIconComponent)\n\n return (\n <div style={styles(fixedStyles.section, orientation === 'vertical' ? {\n marginTop: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n } : {\n marginLeft: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n })}>\n {cloneStyledElement(headerComponent, {\n className: classNames(fixedClassNames.header, {\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n style: styles(fixedStyles.header),\n onClick: () => toggleSectionAt(sectionIdx),\n }, ...[\n <label style={fixedStyles.headerLabel} dangerouslySetInnerHTML={{ __html: section.label }}/>,\n cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n className: classNames(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),\n style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n }),\n ])}\n <List\n style={styles(fixedStyles.list, orientation === 'vertical' ? {\n height: isCollapsed ? '0px' : `${menuLength}px`,\n marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n } : {\n marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n width: isCollapsed ? '0px' : `${menuLength}px`,\n })}\n borderThickness={borderThickness}\n data={section.items}\n selectionMode={selectionMode}\n isTogglable={isTogglable}\n itemComponentType={itemComponentType}\n itemLength={itemLength}\n itemPadding={itemPadding}\n orientation={orientation}\n selectedIndices={selectedItemIndices[sectionIdx] ?? []}\n onActivateAt={itemIdx => onActivateAt?.(sectionIdx, itemIdx)}\n onDeselectAt={itemIdx => deselectAt(sectionIdx, itemIdx)}\n onSelectAt={itemIdx => selectAt(sectionIdx, itemIdx)}\n />\n </div>\n )\n }}\n </Each>\n </div>\n )\n}) as <T>(props: AccordionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const AccordionHeader = ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => <button {...props}>{children}</button>\n\nexport const AccordionExpandIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n\nexport const AccordionCollapseIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n"]}
package/lib/Dropdown.d.ts CHANGED
@@ -1,45 +1,20 @@
1
- import React, { type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
2
- import { type ListItemProps } from './List';
3
- type Orientation = 'horizontal' | 'vertical';
1
+ import React, { type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
2
+ import { type ListItemProps, type ListProps } from './List';
4
3
  export type DropdownData = {
5
4
  label?: string;
6
5
  };
7
6
  export type DropdownItemProps<T extends DropdownData = DropdownData> = ListItemProps<T>;
8
- export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
9
- /**
10
- * Data of every item in the component. This is used to generate individual
11
- * menu items. Data type is generic.
12
- */
13
- data: T[];
7
+ export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttributes<HTMLDivElement> & ListProps<T> & PropsWithChildren<{
14
8
  /**
15
9
  * Indicates if the component is inverted (i.e. "dropup" instead of dropdown).
16
10
  * Supports all orientations.
17
11
  */
18
12
  isInverted?: boolean;
19
13
  /**
20
- * Indicates if items can be toggled, i.e. they can be deselected if selected
21
- * again.
22
- */
23
- isTogglable?: boolean;
24
- /**
25
- * Thickness of the border (in pixels) of every item and the dropdown button
26
- * itself. 0 indicates no borders.
27
- */
28
- borderThickness?: number;
29
- /**
30
- * The index of the default selected item.
31
- */
32
- selectedIndex?: number;
33
- /**
34
- * Length (in pixels) of each item. This does not apply to the dropdown button
35
- * itself. Length refers to the height in vertical orientation and width in
36
- * horizontal orientation.
37
- */
38
- itemLength?: number;
39
- /**
40
- * Padding (in pixels) of each item.
14
+ * Specifies if the dropdown should be collapsed upon selection. This only
15
+ * works if `selectionMode` is `single`.
41
16
  */
42
- itemPadding?: number;
17
+ collapsesOnSelect?: boolean;
43
18
  /**
44
19
  * Maximum number of items that are viside when the component expands. When a
45
20
  * value greater than or equal to 0 is specified, only that number of items
@@ -48,10 +23,6 @@ export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttribute
48
23
  * visible when the component expands.
49
24
  */
50
25
  maxVisibleItems?: number;
51
- /**
52
- * Orientation of the component.
53
- */
54
- orientation?: Orientation;
55
26
  /**
56
27
  * The label to appear on the dropdown button when no items are selected.
57
28
  */
@@ -64,14 +35,6 @@ export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttribute
64
35
  * SVG markup to be put in the dropdown button as the collapse icon.
65
36
  */
66
37
  collapseIconSvg?: string;
67
- /**
68
- * React component type to be used for generating items inside the component.
69
- */
70
- itemComponentType: ComponentType<DropdownItemProps<T>>;
71
- /**
72
- * Handler invoked whenever the selected index changes.
73
- */
74
- onIndexChange?: (index: number) => void;
75
38
  }>;
76
39
  /**
77
40
  * A dropdown menu component that is invertible (i.e. can "dropup" instead) and
@@ -79,40 +42,29 @@ export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttribute
79
42
  * component type to this component to automatically generate menu items.
80
43
  */
81
44
  declare const _default: <T extends DropdownData = DropdownData>(props: React.HTMLAttributes<HTMLDivElement> & {
82
- /**
83
- * Data of every item in the component. This is used to generate individual
84
- * menu items. Data type is generic.
85
- */
45
+ borderThickness?: number | undefined;
86
46
  data: T[];
47
+ isTogglable?: boolean | undefined;
48
+ itemComponentType?: React.ComponentType<ListItemProps<T>> | undefined;
49
+ itemLength?: number | undefined;
50
+ itemPadding?: number | undefined;
51
+ orientation?: ("horizontal" | "vertical") | undefined;
52
+ selectedIndices?: number[] | undefined;
53
+ selectionMode?: "none" | "multiple" | "single" | undefined;
54
+ onActivateAt?: ((index: number) => void) | undefined;
55
+ onDeselectAt?: ((index: number) => void) | undefined;
56
+ onSelectAt?: ((index: number) => void) | undefined;
57
+ } & {
87
58
  /**
88
59
  * Indicates if the component is inverted (i.e. "dropup" instead of dropdown).
89
60
  * Supports all orientations.
90
61
  */
91
62
  isInverted?: boolean | undefined;
92
63
  /**
93
- * Indicates if items can be toggled, i.e. they can be deselected if selected
94
- * again.
64
+ * Specifies if the dropdown should be collapsed upon selection. This only
65
+ * works if `selectionMode` is `single`.
95
66
  */
96
- isTogglable?: boolean | undefined;
97
- /**
98
- * Thickness of the border (in pixels) of every item and the dropdown button
99
- * itself. 0 indicates no borders.
100
- */
101
- borderThickness?: number | undefined;
102
- /**
103
- * The index of the default selected item.
104
- */
105
- selectedIndex?: number | undefined;
106
- /**
107
- * Length (in pixels) of each item. This does not apply to the dropdown button
108
- * itself. Length refers to the height in vertical orientation and width in
109
- * horizontal orientation.
110
- */
111
- itemLength?: number | undefined;
112
- /**
113
- * Padding (in pixels) of each item.
114
- */
115
- itemPadding?: number | undefined;
67
+ collapsesOnSelect?: boolean | undefined;
116
68
  /**
117
69
  * Maximum number of items that are viside when the component expands. When a
118
70
  * value greater than or equal to 0 is specified, only that number of items
@@ -121,10 +73,6 @@ declare const _default: <T extends DropdownData = DropdownData>(props: React.HTM
121
73
  * visible when the component expands.
122
74
  */
123
75
  maxVisibleItems?: number | undefined;
124
- /**
125
- * Orientation of the component.
126
- */
127
- orientation?: Orientation | undefined;
128
76
  /**
129
77
  * The label to appear on the dropdown button when no items are selected.
130
78
  */
@@ -137,14 +85,6 @@ declare const _default: <T extends DropdownData = DropdownData>(props: React.HTM
137
85
  * SVG markup to be put in the dropdown button as the collapse icon.
138
86
  */
139
87
  collapseIconSvg?: string | undefined;
140
- /**
141
- * React component type to be used for generating items inside the component.
142
- */
143
- itemComponentType: React.ComponentType<DropdownItemProps<T>>;
144
- /**
145
- * Handler invoked whenever the selected index changes.
146
- */
147
- onIndexChange?: ((index: number) => void) | undefined;
148
88
  } & {
149
89
  children?: React.ReactNode;
150
90
  } & {
package/lib/Dropdown.js CHANGED
@@ -75,6 +75,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
75
75
  Object.defineProperty(exports, "__esModule", { value: true });
76
76
  exports.DropdownCollapseIcon = exports.DropdownExpandIcon = exports.DropdownToggle = void 0;
77
77
  var classnames_1 = __importDefault(require("classnames"));
78
+ var fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
78
79
  var react_1 = __importStar(require("react"));
79
80
  var FlatSVG_1 = __importDefault(require("./FlatSVG"));
80
81
  var List_1 = __importDefault(require("./List"));
@@ -90,21 +91,15 @@ var styles_1 = __importDefault(require("./utils/styles"));
90
91
  * component type to this component to automatically generate menu items.
91
92
  */
92
93
  exports.default = (0, react_1.forwardRef)(function (_a, ref) {
93
- var _b, _c, _d, _e;
94
- var children = _a.children, className = _a.className, style = _a.style, _f = _a.borderThickness, borderThickness = _f === void 0 ? 0 : _f, data = _a.data, _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.selectedIndex, externalSelectedIndex = _o === void 0 ? -1 : _o, onIndexChange = _a.onIndexChange, props = __rest(_a, ["children", "className", "style", "borderThickness", "data", "defaultLabel", "expandIconSvg", "collapseIconSvg", "isInverted", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "selectedIndex", "onIndexChange"]);
95
- var selectItemAt = function (index) {
96
- setSelectedIndex(index);
97
- setIsCollapsed(true);
98
- };
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, props = __rest(_a, ["children", "className", "style", "borderThickness", "data", "collapsesOnSelect", "defaultLabel", "expandIconSvg", "collapseIconSvg", "isInverted", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "selectionMode", "selectedIndices", "onActivateAt", "onDeselectAt", "onSelectAt"]);
99
96
  var expand = function () {
100
- if (!isCollapsed)
101
- return;
102
- setIsCollapsed(false);
97
+ if (isCollapsed)
98
+ setIsCollapsed(false);
103
99
  };
104
100
  var collapse = function () {
105
- if (isCollapsed)
106
- return;
107
- setIsCollapsed(true);
101
+ if (!isCollapsed)
102
+ setIsCollapsed(true);
108
103
  };
109
104
  var toggle = function () {
110
105
  if (isCollapsed) {
@@ -114,6 +109,11 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
114
109
  collapse();
115
110
  }
116
111
  };
112
+ var selectAtHandler = function (index) {
113
+ onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(index);
114
+ if (selectionMode === 'single' && collapsesOnSelect)
115
+ collapse();
116
+ };
117
117
  var clickOutsideHandler = function (event) {
118
118
  if (isCollapsed)
119
119
  return;
@@ -135,8 +135,8 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
135
135
  collapse();
136
136
  };
137
137
  var bodyRef = (0, react_1.useRef)(null);
138
- var _p = __read((0, react_1.useState)(externalSelectedIndex), 2), selectedIndex = _p[0], setSelectedIndex = _p[1];
139
- var _q = __read((0, react_1.useState)(true), 2), isCollapsed = _q[0], setIsCollapsed = _q[1];
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];
140
140
  var rect = (0, useElementRect_1.default)(bodyRef);
141
141
  (0, react_1.useEffect)(function () {
142
142
  window.addEventListener('click', clickOutsideHandler);
@@ -145,13 +145,10 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
145
145
  };
146
146
  }, [isCollapsed]);
147
147
  (0, react_1.useEffect)(function () {
148
- if (externalSelectedIndex === selectedIndex)
148
+ if ((0, fast_deep_equal_1.default)(externalSelectedIndices, selectedIndices))
149
149
  return;
150
- setSelectedIndex(externalSelectedIndex);
151
- }, [externalSelectedIndex]);
152
- (0, react_1.useEffect)(function () {
153
- onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(selectedIndex);
154
- }, [selectedIndex]);
150
+ setSelectedIndices(externalSelectedIndices);
151
+ }, [JSON.stringify(externalSelectedIndices)]);
155
152
  var itemLength = externalItemLength !== null && externalItemLength !== void 0 ? externalItemLength : (orientation === 'vertical' ? rect.height : rect.width);
156
153
  var numItems = data.length;
157
154
  var numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems);
@@ -268,13 +265,13 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
268
265
  style: (0, styles_1.default)(fixedStyles.toggle),
269
266
  onClick: function () { return toggle(); },
270
267
  }], [
271
- react_1.default.createElement("label", { style: fixedStyles.toggleLabel, dangerouslySetInnerHTML: { __html: selectedIndex === -1 ? defaultLabel : (_e = data[selectedIndex].label) !== null && _e !== void 0 ? _e : '' } }),
268
+ 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 : '' } }),
272
269
  (0, cloneStyledElement_1.default)(isCollapsed ? expandIconComponent : collapseIconComponent, {
273
270
  className: (0, classnames_1.default)(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),
274
271
  style: (0, styles_1.default)(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),
275
272
  }),
276
273
  ], false)),
277
- react_1.default.createElement(List_1.default, { className: fixedClassNames.list, style: (0, styles_1.default)(fixedStyles.list), borderThickness: borderThickness, data: data, isSelectable: true, isTogglable: false, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, orientation: orientation, selectedIndex: selectedIndex, onDeselectAt: function (idx) { return selectItemAt(-1); }, onSelectAt: function (idx) { return selectItemAt(idx); } }))));
274
+ 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 }))));
278
275
  });
279
276
  var DropdownToggle = function (_a) {
280
277
  var children = _a.children, props = __rest(_a, ["children"]);
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 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 } 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\ntype Orientation = 'horizontal' | 'vertical'\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> & PropsWithChildren<{\n /**\n * Data of every item in the component. This is used to generate individual\n * menu items. Data type is generic.\n */\n data: T[]\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 * Indicates if items can be toggled, i.e. they can be deselected if selected\n * again.\n */\n isTogglable?: boolean\n\n /**\n * Thickness of the border (in pixels) of every item and the dropdown button\n * itself. 0 indicates no borders.\n */\n borderThickness?: number\n\n /**\n * The index of the default selected item.\n */\n selectedIndex?: number\n\n /**\n * Length (in pixels) of each item. This does not apply to the dropdown button\n * itself. Length refers to the height in vertical orientation and width in\n * horizontal orientation.\n */\n itemLength?: number\n\n /**\n * Padding (in pixels) of each item.\n */\n itemPadding?: number\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 * Orientation of the component.\n */\n orientation?: Orientation\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 * React component type to be used for generating items inside the component.\n */\n itemComponentType: ComponentType<DropdownItemProps<T>>\n\n /**\n * Handler invoked whenever the selected index changes.\n */\n onIndexChange?: (index: number) => void\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 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 selectedIndex: externalSelectedIndex = -1,\n onIndexChange,\n ...props\n}, ref) => {\n const selectItemAt = (index: number) => {\n setSelectedIndex(index)\n setIsCollapsed(true)\n }\n\n const expand = () => {\n if (!isCollapsed) return\n setIsCollapsed(false)\n }\n\n const collapse = () => {\n if (isCollapsed) return\n setIsCollapsed(true)\n }\n\n const toggle = () => {\n if (isCollapsed) {\n expand()\n }\n else {\n collapse()\n }\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 [selectedIndex, setSelectedIndex] = useState(externalSelectedIndex)\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 (externalSelectedIndex === selectedIndex) return\n setSelectedIndex(externalSelectedIndex)\n }, [externalSelectedIndex])\n\n useEffect(() => {\n onIndexChange?.(selectedIndex)\n }, [selectedIndex])\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 },\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 }, ...[\n <label style={fixedStyles.toggleLabel} dangerouslySetInnerHTML={{ __html: selectedIndex === -1 ? defaultLabel : data[selectedIndex].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 className={fixedClassNames.list}\n style={styles(fixedStyles.list)}\n borderThickness={borderThickness}\n data={data}\n isSelectable={true}\n isTogglable={false}\n itemComponentType={itemComponentType}\n itemLength={itemLength}\n itemPadding={itemPadding}\n orientation={orientation}\n selectedIndex={selectedIndex}\n onDeselectAt={idx => selectItemAt(-1)}\n onSelectAt={idx => selectItemAt(idx)}\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 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 ...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 },\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 }, ...[\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 />\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"]}
package/lib/List.d.ts CHANGED
@@ -16,16 +16,17 @@ export type ListProps<T> = HTMLAttributes<HTMLDivElement> & {
16
16
  */
17
17
  data: T[];
18
18
  /**
19
- * The selected index. Any value below 0 indicates that nothing is
20
- * selected.
19
+ * Indicates if items can be toggled, i.e. they can be deselected if selected
20
+ * again.
21
21
  */
22
- selectedIndex?: number;
22
+ isTogglable?: boolean;
23
23
  /**
24
24
  * React component type to be used to generate items for this list.
25
25
  */
26
26
  itemComponentType?: ComponentType<ListItemProps<T>>;
27
27
  /**
28
- * Optional length of each item.
28
+ * Optional length (in pixels) of each item. Length refers to the height in
29
+ * vertical orientation and width in horizontal orientation.
29
30
  */
30
31
  itemLength?: number;
31
32
  /**
@@ -33,34 +34,37 @@ export type ListProps<T> = HTMLAttributes<HTMLDivElement> & {
33
34
  */
34
35
  itemPadding?: number;
35
36
  /**
36
- * Indicates whether selections are retained. For example, in the case of a
37
- * vertical list of clickable rows, being able to retain a selection means
38
- * when the row is clicked, it becomes and stays selected. Being unable to
39
- * retain a selection means when the row is clicked, it does not become
40
- * selected. It is simply clicked and the subsequent event is dispatched.
37
+ * Orientation of the component.
41
38
  */
42
- isSelectable?: boolean;
39
+ orientation?: Orientation;
43
40
  /**
44
- * Indicates whether selections can be toggled. For example, in the case of a
45
- * vertical list of selectable rows, being able to toggle a row means it gets
46
- * deselected when selected again. Being unable to toggle the row means it
47
- * does not get deselected when selected again.
41
+ * The selected indices. If `selectionMode` is `single`, only only the first
42
+ * value will be used.
48
43
  */
49
- isTogglable?: boolean;
44
+ selectedIndices?: number[];
50
45
  /**
51
- * Orientation of the list.
46
+ * Indicates the selection behavior:
47
+ * - `none`: No selection at all.
48
+ * - `single`: Only one item can be selected at a time.
49
+ * - `multiple`: Multiple items can be selected at the same time.
52
50
  */
53
- orientation?: Orientation;
51
+ selectionMode?: 'none' | 'single' | 'multiple';
54
52
  /**
55
- * Handler invoked when an index is activated.
53
+ * Handler invoked when an item is activated.
54
+ *
55
+ * @param index Item index.
56
56
  */
57
- onActivate?: (index: number) => void;
57
+ onActivateAt?: (index: number) => void;
58
58
  /**
59
- * Handler invoked when an index is deselected.
59
+ * Handler invoked when an item is deselected.
60
+ *
61
+ * @param index Item index.
60
62
  */
61
63
  onDeselectAt?: (index: number) => void;
62
64
  /**
63
- * Handler invoked when an index is selected.
65
+ * Handler invoked when an item is selected.
66
+ *
67
+ * @param index Item index.
64
68
  */
65
69
  onSelectAt?: (index: number) => void;
66
70
  };
@@ -79,16 +83,17 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
79
83
  */
80
84
  data: T[];
81
85
  /**
82
- * The selected index. Any value below 0 indicates that nothing is
83
- * selected.
86
+ * Indicates if items can be toggled, i.e. they can be deselected if selected
87
+ * again.
84
88
  */
85
- selectedIndex?: number | undefined;
89
+ isTogglable?: boolean | undefined;
86
90
  /**
87
91
  * React component type to be used to generate items for this list.
88
92
  */
89
93
  itemComponentType?: React.ComponentType<ListItemProps<T>> | undefined;
90
94
  /**
91
- * Optional length of each item.
95
+ * Optional length (in pixels) of each item. Length refers to the height in
96
+ * vertical orientation and width in horizontal orientation.
92
97
  */
93
98
  itemLength?: number | undefined;
94
99
  /**
@@ -96,34 +101,37 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
96
101
  */
97
102
  itemPadding?: number | undefined;
98
103
  /**
99
- * Indicates whether selections are retained. For example, in the case of a
100
- * vertical list of clickable rows, being able to retain a selection means
101
- * when the row is clicked, it becomes and stays selected. Being unable to
102
- * retain a selection means when the row is clicked, it does not become
103
- * selected. It is simply clicked and the subsequent event is dispatched.
104
+ * Orientation of the component.
104
105
  */
105
- isSelectable?: boolean | undefined;
106
+ orientation?: Orientation | undefined;
106
107
  /**
107
- * Indicates whether selections can be toggled. For example, in the case of a
108
- * vertical list of selectable rows, being able to toggle a row means it gets
109
- * deselected when selected again. Being unable to toggle the row means it
110
- * does not get deselected when selected again.
108
+ * The selected indices. If `selectionMode` is `single`, only only the first
109
+ * value will be used.
111
110
  */
112
- isTogglable?: boolean | undefined;
111
+ selectedIndices?: number[] | undefined;
113
112
  /**
114
- * Orientation of the list.
113
+ * Indicates the selection behavior:
114
+ * - `none`: No selection at all.
115
+ * - `single`: Only one item can be selected at a time.
116
+ * - `multiple`: Multiple items can be selected at the same time.
115
117
  */
116
- orientation?: Orientation | undefined;
118
+ selectionMode?: "none" | "multiple" | "single" | undefined;
117
119
  /**
118
- * Handler invoked when an index is activated.
120
+ * Handler invoked when an item is activated.
121
+ *
122
+ * @param index Item index.
119
123
  */
120
- onActivate?: ((index: number) => void) | undefined;
124
+ onActivateAt?: ((index: number) => void) | undefined;
121
125
  /**
122
- * Handler invoked when an index is deselected.
126
+ * Handler invoked when an item is deselected.
127
+ *
128
+ * @param index Item index.
123
129
  */
124
130
  onDeselectAt?: ((index: number) => void) | undefined;
125
131
  /**
126
- * Handler invoked when an index is selected.
132
+ * Handler invoked when an item is selected.
133
+ *
134
+ * @param index Item index.
127
135
  */
128
136
  onSelectAt?: ((index: number) => void) | undefined;
129
137
  } & {
package/lib/List.js CHANGED
@@ -60,11 +60,21 @@ 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
+ };
63
72
  var __importDefault = (this && this.__importDefault) || function (mod) {
64
73
  return (mod && mod.__esModule) ? mod : { "default": mod };
65
74
  };
66
75
  Object.defineProperty(exports, "__esModule", { value: true });
67
76
  var classnames_1 = __importDefault(require("classnames"));
77
+ var fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
68
78
  var react_1 = __importStar(require("react"));
69
79
  var Each_1 = __importDefault(require("./Each"));
70
80
  var usePrevious_1 = __importDefault(require("./hooks/usePrevious"));
@@ -77,7 +87,7 @@ var styles_1 = __importDefault(require("./utils/styles"));
77
87
  * generic. This component supports both horizontal and vertical orientations.
78
88
  */
79
89
  exports.default = (0, react_1.forwardRef)(function (_a, ref) {
80
- var className = _a.className, style = _a.style, _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, data = _a.data, isSelectable = _a.isSelectable, isTogglable = _a.isTogglable, ItemComponentType = _a.itemComponentType, itemLength = _a.itemLength, _c = _a.itemPadding, itemPadding = _c === void 0 ? 0 : _c, _d = _a.orientation, orientation = _d === void 0 ? 'vertical' : _d, _e = _a.selectedIndex, externalSelectedIndex = _e === void 0 ? -1 : _e, onActivate = _a.onActivate, onDeselectAt = _a.onDeselectAt, onSelectAt = _a.onSelectAt, props = __rest(_a, ["className", "style", "borderThickness", "data", "isSelectable", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "orientation", "selectedIndex", "onActivate", "onDeselectAt", "onSelectAt"]);
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, props = __rest(_a, ["className", "style", "borderThickness", "data", "selectionMode", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "orientation", "selectedIndices", "onActivateAt", "onDeselectAt", "onSelectAt"]);
81
91
  var isIndexOutOfRange = function (index) {
82
92
  if (index >= data.length)
83
93
  return true;
@@ -85,7 +95,7 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
85
95
  return true;
86
96
  return false;
87
97
  };
88
- var isSelectedAt = function (index) { return selectedIndex === index; };
98
+ var isSelectedAt = function (index) { return selectedIndices.indexOf(index) >= 0; };
89
99
  var toggleAt = function (index) {
90
100
  if (isSelectedAt(index)) {
91
101
  deselectAt(index);
@@ -97,15 +107,24 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
97
107
  var selectAt = function (index) {
98
108
  if (isSelectedAt(index))
99
109
  return;
100
- setSelectedIndex(index);
110
+ switch (selectionMode) {
111
+ case 'multiple':
112
+ setSelectedIndices(function (prev) { return __spreadArray(__spreadArray([], __read(prev.filter(function (t) { return t !== index; })), false), [index], false); });
113
+ break;
114
+ case 'single':
115
+ setSelectedIndices([index]);
116
+ break;
117
+ default:
118
+ break;
119
+ }
101
120
  };
102
121
  var deselectAt = function (index) {
103
122
  if (!isSelectedAt(index))
104
123
  return;
105
- setSelectedIndex(-1);
124
+ setSelectedIndices(function (prev) { return prev.filter(function (t) { return t !== index; }); });
106
125
  };
107
- var onClick = function (index) {
108
- if (isSelectable) {
126
+ var activateAt = function (index) {
127
+ if (selectionMode !== 'none') {
109
128
  if (isTogglable) {
110
129
  toggleAt(index);
111
130
  }
@@ -113,23 +132,24 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
113
132
  selectAt(index);
114
133
  }
115
134
  }
116
- onActivate === null || onActivate === void 0 ? void 0 : onActivate(index);
135
+ onActivateAt === null || onActivateAt === void 0 ? void 0 : onActivateAt(index);
117
136
  };
118
- var _f = __read((0, react_1.useState)(externalSelectedIndex), 2), selectedIndex = _f[0], setSelectedIndex = _f[1];
119
- var prevSelectedIndex = (0, usePrevious_1.default)(selectedIndex);
137
+ var _g = __read((0, react_1.useState)(externalSelectedIndices), 2), selectedIndices = _g[0], setSelectedIndices = _g[1];
138
+ var prevSelectedIndices = (0, usePrevious_1.default)(selectedIndices);
120
139
  (0, react_1.useEffect)(function () {
121
- if (externalSelectedIndex === selectedIndex)
140
+ if ((0, fast_deep_equal_1.default)(externalSelectedIndices, selectedIndices))
122
141
  return;
123
- setSelectedIndex(externalSelectedIndex);
124
- }, [externalSelectedIndex]);
142
+ setSelectedIndices(externalSelectedIndices);
143
+ }, [JSON.stringify(externalSelectedIndices)]);
125
144
  (0, react_1.useEffect)(function () {
126
- if (!isSelectable)
145
+ var _a;
146
+ if (selectionMode === 'none')
127
147
  return;
128
- if (!isIndexOutOfRange(prevSelectedIndex !== null && prevSelectedIndex !== void 0 ? prevSelectedIndex : -1))
129
- onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(prevSelectedIndex !== null && prevSelectedIndex !== void 0 ? prevSelectedIndex : -1);
130
- if (!isIndexOutOfRange(selectedIndex))
131
- onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(selectedIndex);
132
- }, [selectedIndex]);
148
+ var deselected = (_a = prevSelectedIndices === null || prevSelectedIndices === void 0 ? void 0 : prevSelectedIndices.filter(function (t) { return !isIndexOutOfRange(t) && selectedIndices.indexOf(t) === -1; })) !== null && _a !== void 0 ? _a : [];
149
+ var selected = selectedIndices.filter(function (t) { return !isIndexOutOfRange(t) && (prevSelectedIndices === null || prevSelectedIndices === void 0 ? void 0 : prevSelectedIndices.indexOf(t)) === -1; });
150
+ deselected.map(function (t) { return onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(t); });
151
+ selected.map(function (t) { return onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(t); });
152
+ }, [selectedIndices]);
133
153
  var fixedClassNames = (0, asClassNameDict_1.default)({
134
154
  root: (0, classnames_1.default)(orientation, {
135
155
  togglable: isTogglable,
@@ -166,6 +186,6 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
166
186
  marginBottom: "".concat(itemPadding, "px"),
167
187
  } : {
168
188
  marginRight: "".concat(itemPadding, "px"),
169
- }))), "data-index": idx, data: val, index: idx, isSelected: isSelectedAt(idx), orientation: orientation, onClick: function () { return onClick(idx); } })); }))));
189
+ }))), "data-index": idx, data: val, index: idx, isSelected: isSelectedAt(idx), orientation: orientation, onClick: function () { return activateAt(idx); } })); }))));
170
190
  });
171
191
  //# sourceMappingURL=List.js.map
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 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 * The selected index. Any value below 0 indicates that nothing is\n * selected.\n */\n selectedIndex?: number\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 of each item.\n */\n itemLength?: number\n\n /**\n * Padding between every item (in pixels).\n */\n itemPadding?: number\n\n /**\n * Indicates whether selections are retained. For example, in the case of a\n * vertical list of clickable rows, being able to retain a selection means\n * when the row is clicked, it becomes and stays selected. Being unable to\n * retain a selection means when the row is clicked, it does not become\n * selected. It is simply clicked and the subsequent event is dispatched.\n */\n isSelectable?: boolean\n\n /**\n * Indicates whether selections can be toggled. For example, in the case of a\n * vertical list of selectable rows, being able to toggle a row means it gets\n * deselected when selected again. Being unable to toggle the row means it\n * does not get deselected when selected again.\n */\n isTogglable?: boolean\n\n /**\n * Orientation of the list.\n */\n orientation?: Orientation\n\n /**\n * Handler invoked when an index is activated.\n */\n onActivate?: (index: number) => void\n\n /**\n * Handler invoked when an index is deselected.\n */\n onDeselectAt?: (index: number) => void\n\n /**\n * Handler invoked when an index is selected.\n */\n onSelectAt?: (index: 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 isSelectable,\n isTogglable,\n itemComponentType: ItemComponentType,\n itemLength,\n itemPadding = 0,\n orientation = 'vertical',\n selectedIndex: externalSelectedIndex = -1,\n onActivate,\n onDeselectAt,\n onSelectAt,\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) => selectedIndex === index\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 setSelectedIndex(index)\n }\n\n const deselectAt = (index: number) => {\n if (!isSelectedAt(index)) return\n setSelectedIndex(-1)\n }\n\n const onClick = (index: number) => {\n if (isSelectable) {\n if (isTogglable) {\n toggleAt(index)\n }\n else {\n selectAt(index)\n }\n }\n\n onActivate?.(index)\n }\n\n const [selectedIndex, setSelectedIndex] = useState(externalSelectedIndex)\n const prevSelectedIndex = usePrevious(selectedIndex)\n\n useEffect(() => {\n if (externalSelectedIndex === selectedIndex) return\n setSelectedIndex(externalSelectedIndex)\n }, [externalSelectedIndex])\n\n useEffect(() => {\n if (!isSelectable) return\n\n if (!isIndexOutOfRange(prevSelectedIndex ?? -1)) onDeselectAt?.(prevSelectedIndex ?? -1)\n if (!isIndexOutOfRange(selectedIndex)) onSelectAt?.(selectedIndex)\n }, [selectedIndex])\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={() => onClick(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/**\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 ...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 }, [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"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "etudes",
3
- "version": "2.7.0",
3
+ "version": "3.0.0",
4
4
  "description": "A study of headless React components",
5
5
  "main": "lib",
6
6
  "scripts": {