etudes 3.3.1 → 3.4.0

package/lib/Accordion.d.ts

@@ -1,10 +1,12 @@
 import React, { type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
 import { type ListItemProps, type ListProps } from './List';
 export type AccordionItemProps<T> = ListItemProps<T>;
-export type AccordionHeaderProps<T> = HTMLAttributes<HTMLElement> & PropsWithChildren<{
+export type AccordionHeaderProps<T, A = never> = HTMLAttributes<HTMLElement> & PropsWithChildren<{
+    attributes?: A;
     data: AccordionSectionData<T>;
     index: number;
     isCollapsed: boolean;
+    onCustomEvent?: (name: string, info?: any) => void;
 }>;
 export type AccordionSectionData<T> = {
     label: string;
@@ -15,7 +17,7 @@ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<
      * Specifies if expanded sections should automatically collapse upon expanding
      * another section.
      */
-    autoCollapse?: boolean;
+    autoCollapseSections?: boolean;
     /**
      * SVG markup to be put in the section header as the collapse icon.
      */
@@ -32,15 +34,6 @@ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<
      * SVG markup to be put in the section header as the expand icon.
      */
     expandIconSvg?: string;
-    /**
-     * React component type to be used for generating headers inside the
-     * component. When absent, one will be generated automatically.
-     */
-    headerComponentType?: ComponentType<AccordionHeaderProps<T>>;
-    /**
-     * React component type to be used for generating items inside the component.
-     */
-    itemComponentType: ComponentType<AccordionItemProps<T>>;
     /**
      * Maximum number of items that are viside when a section expands. When a
      * value greater than or equal to 0 is specified, only that number of items
@@ -57,13 +50,22 @@ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<
      * Indices of selected items per section.
      */
     selectedItemIndices?: Record<number, number[]>;
+    /**
+     * React component type to be used for generating headers inside the
+     * component. When absent, one will be generated automatically.
+     */
+    headerComponentType?: ComponentType<AccordionHeaderProps<T>>;
+    /**
+     * React component type to be used for generating items inside the component.
+     */
+    itemComponentType: ComponentType<AccordionItemProps<T>>;
     /**
      * Handler invoked when an item is activated in a section.
      *
-     * @param sectionIndex Section index.
      * @param itemIndex Item index.
+     * @param sectionIndex Section index.
      */
-    onActivateAt?: (sectionIndex: number, itemIndex: number) => void;
+    onActivateAt?: (itemIndex: number, sectionIndex: number) => void;
     /**
      * Handler invoked when a section is collapsed.
      *
@@ -73,23 +75,31 @@ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<
     /**
      * Handler invoked when an item is deselected in a section.
      *
-     * @param sectionIndex Section index.
      * @param itemIndex Item index.
+     * @param sectionIndex Section index.
      */
-    onDeselectAt?: (sectionIndex: number, itemIndex: number) => void;
+    onDeselectAt?: (itemIndex: number, sectionIndex: number) => void;
     /**
      * Handler invoked when a section is expanded.
      *
      * @param sectionIndex Section index.
      */
     onExpandSectionAt?: (sectionIndex: number) => void;
+    /**
+     * Handler invoked when a custom event is dispatched from a section header.
+     *
+     * @param index Index of the section header.
+     * @param eventName Name of the dispatched event.
+     * @param eventInfo Optional info of the dispatched event.
+     */
+    onHeaderCustomEvent?: (index: number, eventName: string, eventInfo?: any) => void;
     /**
      * Handler invoked when an item is selected in a section.
      *
-     * @param sectionIndex Section index.
      * @param itemIndex Item index.
+     * @param sectionIndex Section index.
      */
-    onSelectAt?: (sectionIndex: number, itemIndex: number) => void;
+    onSelectAt?: (itemIndex: number, sectionIndex: number) => void;
     /**
      * Handler invoked when selected items have changed.
      *
@@ -97,12 +107,12 @@ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<
      */
     onSelectionChange?: (selectedIndices: Record<number, number[]>) => void;
 }>;
-declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & Omit<ListProps<T>, "data" | "itemComponentType" | "selectedIndices" | "onActivateAt" | "onDeselectAt" | "onSelectAt" | "onSelectionChange"> & {
+declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & Omit<ListProps<T>, "data" | "selectedIndices" | "itemComponentType" | "onActivateAt" | "onDeselectAt" | "onSelectAt" | "onSelectionChange"> & {
     /**
      * Specifies if expanded sections should automatically collapse upon expanding
      * another section.
      */
-    autoCollapse?: boolean | undefined;
+    autoCollapseSections?: boolean | undefined;
     /**
      * SVG markup to be put in the section header as the collapse icon.
      */
@@ -119,15 +129,6 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & Omit<L
      * SVG markup to be put in the section header as the expand icon.
      */
     expandIconSvg?: string | undefined;
-    /**
-     * React component type to be used for generating headers inside the
-     * component. When absent, one will be generated automatically.
-     */
-    headerComponentType?: React.ComponentType<AccordionHeaderProps<T>> | undefined;
-    /**
-     * React component type to be used for generating items inside the component.
-     */
-    itemComponentType: React.ComponentType<AccordionItemProps<T>>;
     /**
      * Maximum number of items that are viside when a section expands. When a
      * value greater than or equal to 0 is specified, only that number of items
@@ -144,13 +145,22 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & Omit<L
      * Indices of selected items per section.
      */
     selectedItemIndices?: Record<number, number[]> | undefined;
+    /**
+     * React component type to be used for generating headers inside the
+     * component. When absent, one will be generated automatically.
+     */
+    headerComponentType?: React.ComponentType<AccordionHeaderProps<T, never>> | undefined;
+    /**
+     * React component type to be used for generating items inside the component.
+     */
+    itemComponentType: React.ComponentType<AccordionItemProps<T>>;
     /**
      * Handler invoked when an item is activated in a section.
      *
-     * @param sectionIndex Section index.
      * @param itemIndex Item index.
+     * @param sectionIndex Section index.
      */
-    onActivateAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
+    onActivateAt?: ((itemIndex: number, sectionIndex: number) => void) | undefined;
     /**
      * Handler invoked when a section is collapsed.
      *
@@ -160,23 +170,31 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & Omit<L
     /**
      * Handler invoked when an item is deselected in a section.
      *
-     * @param sectionIndex Section index.
      * @param itemIndex Item index.
+     * @param sectionIndex Section index.
      */
-    onDeselectAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
+    onDeselectAt?: ((itemIndex: number, sectionIndex: number) => void) | undefined;
     /**
      * Handler invoked when a section is expanded.
      *
      * @param sectionIndex Section index.
      */
     onExpandSectionAt?: ((sectionIndex: number) => void) | undefined;
+    /**
+     * Handler invoked when a custom event is dispatched from a section header.
+     *
+     * @param index Index of the section header.
+     * @param eventName Name of the dispatched event.
+     * @param eventInfo Optional info of the dispatched event.
+     */
+    onHeaderCustomEvent?: ((index: number, eventName: string, eventInfo?: any) => void) | undefined;
     /**
      * Handler invoked when an item is selected in a section.
      *
-     * @param sectionIndex Section index.
      * @param itemIndex Item index.
+     * @param sectionIndex Section index.
      */
-    onSelectAt?: ((sectionIndex: number, itemIndex: number) => void) | undefined;
+    onSelectAt?: ((itemIndex: number, sectionIndex: number) => void) | undefined;
     /**
      * Handler invoked when selected items have changed.
      *

package/lib/Accordion.js

@@ -74,8 +74,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var classnames_1 = __importDefault(require("classnames"));
-var fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(require("fast-deep-equal/react"));
+var react_2 = __importStar(require("react"));
 var Each_1 = __importDefault(require("./Each"));
 var FlatSVG_1 = __importDefault(require("./FlatSVG"));
 var List_1 = __importDefault(require("./List"));
@@ -84,70 +84,113 @@ var asClassNameDict_1 = __importDefault(require("./utils/asClassNameDict"));
 var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
 var cloneStyledElement_1 = __importDefault(require("./utils/cloneStyledElement"));
 var styles_1 = __importDefault(require("./utils/styles"));
-exports.default = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, className = _a.className, style = _a.style, _b = _a.autoCollapse, autoCollapse = _b === void 0 ? false : _b, _c = _a.borderThickness, borderThickness = _c === void 0 ? 0 : _c, collapseIconSvg = _a.collapseIconSvg, data = _a.data, _d = _a.expandedSectionIndices, externalExpandedSectionIndices = _d === void 0 ? [] : _d, expandIconSvg = _a.expandIconSvg, HeaderComponent = _a.headerComponentType, isTogglable = _a.isTogglable, itemComponentType = _a.itemComponentType, _e = _a.itemLength, itemLength = _e === void 0 ? 50 : _e, _f = _a.itemPadding, itemPadding = _f === void 0 ? 0 : _f, _g = _a.maxVisibleItems, maxVisibleItems = _g === void 0 ? -1 : _g, _h = _a.orientation, orientation = _h === void 0 ? 'vertical' : _h, _j = _a.sectionPadding, sectionPadding = _j === void 0 ? 0 : _j, _k = _a.selectedItemIndices, externalSelectedItemIndices = _k === void 0 ? {} : _k, _l = _a.selectionMode, selectionMode = _l === void 0 ? 'single' : _l, onActivateAt = _a.onActivateAt, onCollapseSectionAt = _a.onCollapseSectionAt, onDeselectAt = _a.onDeselectAt, onExpandSectionAt = _a.onExpandSectionAt, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, props = __rest(_a, ["children", "className", "style", "autoCollapse", "borderThickness", "collapseIconSvg", "data", "expandedSectionIndices", "expandIconSvg", "headerComponentType", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "sectionPadding", "selectedItemIndices", "selectionMode", "onActivateAt", "onCollapseSectionAt", "onDeselectAt", "onExpandSectionAt", "onSelectAt", "onSelectionChange"]);
-    var isSectionExpandedAt = function (idx) { return expandedSectionIndices.indexOf(idx) >= 0; };
-    var toggleSectionAt = function (idx) {
-        if (isSectionExpandedAt(idx)) {
-            setExpandedSectionIndices(function (prev) { return prev.filter(function (t) { return t !== idx; }); });
+exports.default = (0, react_2.forwardRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, style = _a.style, _b = _a.autoCollapseSections, autoCollapseSections = _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, _e = _a.isSelectionTogglable, isSelectionTogglable = _e === void 0 ? false : _e, _f = _a.itemLength, itemLength = _f === void 0 ? 50 : _f, _g = _a.itemPadding, itemPadding = _g === void 0 ? 0 : _g, _h = _a.maxVisibleItems, maxVisibleItems = _h === void 0 ? -1 : _h, _j = _a.orientation, orientation = _j === void 0 ? 'vertical' : _j, _k = _a.sectionPadding, sectionPadding = _k === void 0 ? 0 : _k, _l = _a.selectedItemIndices, externalSelectedItemIndices = _l === void 0 ? {} : _l, _m = _a.selectionMode, selectionMode = _m === void 0 ? 'single' : _m, HeaderComponent = _a.headerComponentType, itemComponentType = _a.itemComponentType, onActivateAt = _a.onActivateAt, onCollapseSectionAt = _a.onCollapseSectionAt, onDeselectAt = _a.onDeselectAt, onExpandSectionAt = _a.onExpandSectionAt, onHeaderCustomEvent = _a.onHeaderCustomEvent, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, props = __rest(_a, ["children", "className", "style", "autoCollapseSections", "borderThickness", "collapseIconSvg", "data", "expandedSectionIndices", "expandIconSvg", "isSelectionTogglable", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "sectionPadding", "selectedItemIndices", "selectionMode", "headerComponentType", "itemComponentType", "onActivateAt", "onCollapseSectionAt", "onDeselectAt", "onExpandSectionAt", "onHeaderCustomEvent", "onSelectAt", "onSelectionChange"]);
+    var isSectionIndexOutOfRange = function (sectionIndex) {
+        if (sectionIndex >= data.length)
+            return true;
+        if (sectionIndex < 0)
+            return true;
+        return false;
+    };
+    var isItemIndexOutOfRange = function (itemIndex, sectionIndex) {
+        if (isSectionIndexOutOfRange(sectionIndex))
+            return true;
+        var items = data[sectionIndex].items;
+        if (itemIndex >= items.length)
+            return true;
+        if (itemIndex < 0)
+            return true;
+        return false;
+    };
+    var sanitizeExpandedSectionIndices = function (sectionIndices) { return sectionIndices.sort().filter(function (t) { return !isSectionIndexOutOfRange(t); }); };
+    var sanitizeSelectedItemIndices = function (itemIndices) {
+        var newValue = {};
+        var _loop_1 = function (sectionIndex) {
+            if (!Object.prototype.hasOwnProperty.call(itemIndices, sectionIndex))
+                return "continue";
+            var indices = itemIndices[sectionIndex];
+            if (!indices || !(indices instanceof Array) || indices.length === 0)
+                return "continue";
+            newValue[sectionIndex] = indices.sort().filter(function (t) { return !isItemIndexOutOfRange(t, Number(sectionIndex)); });
+        };
+        for (var sectionIndex in itemIndices) {
+            _loop_1(sectionIndex);
+        }
+        return newValue;
+    };
+    var isSectionExpandedAt = function (sectionIndex) { return expandedSectionIndices.indexOf(sectionIndex) >= 0; };
+    var toggleSectionAt = function (sectionIndex) {
+        if (isSectionIndexOutOfRange(sectionIndex))
+            return;
+        if (isSectionExpandedAt(sectionIndex)) {
+            setExpandedSectionIndices(function (prev) { return prev.filter(function (t) { return t !== sectionIndex; }); });
         }
-        else if (autoCollapse) {
-            setExpandedSectionIndices([idx]);
+        else if (autoCollapseSections) {
+            setExpandedSectionIndices([sectionIndex]);
         }
         else {
-            setExpandedSectionIndices(function (prev) { return __spreadArray(__spreadArray([], __read(prev.filter(function (t) { return t !== idx; })), false), [idx], false); });
+            setExpandedSectionIndices(function (prev) { return __spreadArray(__spreadArray([], __read(prev.filter(function (t) { return t !== sectionIndex; })), false), [sectionIndex], false).sort(); });
         }
     };
-    var selectAt = function (sectionIdx, itemIdx) {
+    var selectAt = function (itemIndex, sectionIndex) {
         var _a;
+        if (isItemIndexOutOfRange(itemIndex, sectionIndex))
+            return;
         switch (selectionMode) {
             case 'multiple':
                 setSelectedItemIndices(function (prev) {
                     var _a;
                     var _b;
-                    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)));
+                    return (__assign(__assign({}, prev), (_a = {}, _a[sectionIndex] = __spreadArray(__spreadArray([], __read(((_b = prev[sectionIndex]) !== null && _b !== void 0 ? _b : []).filter(function (t) { return t !== itemIndex; })), false), [itemIndex], false).sort(), _a)));
                 });
-                onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(sectionIdx, itemIdx);
+                onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(itemIndex, sectionIndex);
                 break;
             case 'single':
-                setSelectedItemIndices((_a = {}, _a[sectionIdx] = [itemIdx], _a));
-                onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(sectionIdx, itemIdx);
+                setSelectedItemIndices((_a = {},
+                    _a[sectionIndex] = [itemIndex],
+                    _a));
+                onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(itemIndex, sectionIndex);
                 break;
             default:
                 break;
         }
     };
-    var deselectAt = function (sectionIdx, itemIdx) {
+    var deselectAt = function (itemIndex, sectionIndex) {
+        if (isItemIndexOutOfRange(itemIndex, sectionIndex))
+            return;
         setSelectedItemIndices(function (prev) {
             var _a;
             var _b;
-            return (__assign(__assign({}, prev), (_a = {}, _a[sectionIdx] = ((_b = prev[sectionIdx]) !== null && _b !== void 0 ? _b : []).filter(function (t) { return t !== itemIdx; }), _a)));
+            return (__assign(__assign({}, prev), (_a = {}, _a[sectionIndex] = ((_b = prev[sectionIndex]) !== null && _b !== void 0 ? _b : []).filter(function (t) { return t !== itemIndex; }), _a)));
         });
-        onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(sectionIdx, itemIdx);
+        onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(itemIndex, sectionIndex);
     };
-    var _m = __read((0, react_1.useState)(externalExpandedSectionIndices), 2), expandedSectionIndices = _m[0], setExpandedSectionIndices = _m[1];
+    var _o = __read((0, react_2.useState)(sanitizeExpandedSectionIndices(externalExpandedSectionIndices)), 2), expandedSectionIndices = _o[0], setExpandedSectionIndices = _o[1];
     var prevExpandedSectionIndices = (0, usePrevious_1.default)(expandedSectionIndices);
-    var _o = __read((0, react_1.useState)(externalSelectedItemIndices), 2), selectedItemIndices = _o[0], setSelectedItemIndices = _o[1];
-    (0, react_1.useEffect)(function () {
-        if ((0, fast_deep_equal_1.default)(externalExpandedSectionIndices, expandedSectionIndices))
+    var _p = __read((0, react_2.useState)(externalSelectedItemIndices), 2), selectedItemIndices = _p[0], setSelectedItemIndices = _p[1];
+    (0, react_2.useEffect)(function () {
+        var newValue = sanitizeExpandedSectionIndices(externalExpandedSectionIndices);
+        if ((0, react_1.default)(newValue, expandedSectionIndices))
             return;
-        setExpandedSectionIndices(externalExpandedSectionIndices);
-    }, [JSON.stringify(externalExpandedSectionIndices)]);
-    (0, react_1.useEffect)(function () {
-        if ((0, fast_deep_equal_1.default)(externalSelectedItemIndices, selectedItemIndices))
-            return;
-        setSelectedItemIndices(externalSelectedItemIndices);
-    }, [JSON.stringify(externalSelectedItemIndices)]);
-    (0, react_1.useEffect)(function () {
+        setExpandedSectionIndices(newValue);
+    }, [JSON.stringify(sanitizeExpandedSectionIndices(externalExpandedSectionIndices))]);
+    (0, react_2.useEffect)(function () {
         var _a;
         var collapsed = (_a = prevExpandedSectionIndices === null || prevExpandedSectionIndices === void 0 ? void 0 : prevExpandedSectionIndices.filter(function (t) { return expandedSectionIndices.indexOf(t) === -1; })) !== null && _a !== void 0 ? _a : [];
         var expanded = expandedSectionIndices.filter(function (t) { return (prevExpandedSectionIndices === null || prevExpandedSectionIndices === void 0 ? void 0 : prevExpandedSectionIndices.indexOf(t)) === -1; });
         collapsed.map(function (t) { return onCollapseSectionAt === null || onCollapseSectionAt === void 0 ? void 0 : onCollapseSectionAt(t); });
         expanded.map(function (t) { return onExpandSectionAt === null || onExpandSectionAt === void 0 ? void 0 : onExpandSectionAt(t); });
-    }, [JSON.stringify(expandedSectionIndices)]);
-    (0, react_1.useEffect)(function () {
+    }, [JSON.stringify(sanitizeExpandedSectionIndices(expandedSectionIndices))]);
+    (0, react_2.useEffect)(function () {
+        var newValue = sanitizeSelectedItemIndices(externalSelectedItemIndices);
+        if ((0, react_1.default)(newValue, selectedItemIndices))
+            return;
+        setSelectedItemIndices(newValue);
+    }, [JSON.stringify(sanitizeSelectedItemIndices(externalSelectedItemIndices))]);
+    (0, react_2.useEffect)(function () {
         onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectedItemIndices);
-    }, [JSON.stringify(selectedItemIndices)]);
+    }, [JSON.stringify(sanitizeSelectedItemIndices(selectedItemIndices))]);
     var fixedClassNames = (0, asClassNameDict_1.default)({
         root: (0, classnames_1.default)(orientation),
         header: (0, classnames_1.default)(orientation),
@@ -231,27 +274,27 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
             width: '15px',
         },
     });
-    return (react_1.default.createElement("div", __assign({}, props, { className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }),
-        react_1.default.createElement(Each_1.default, { in: data }, function (section, sectionIdx) {
+    return (react_2.default.createElement("div", __assign({}, props, { className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }),
+        react_2.default.createElement(Each_1.default, { in: data }, function (section, sectionIndex) {
             var _a;
             var numItems = section.items.length;
             var numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems);
             var menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness;
-            var isCollapsed = !isSectionExpandedAt(sectionIdx);
-            var expandIconComponent = expandIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: expandIconSvg, style: defaultStyles.expandIcon }) : react_1.default.createElement(react_1.default.Fragment, null);
-            var collapseIconComponent = collapseIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: collapseIconSvg, style: defaultStyles.collapseIcon }) : expandIconComponent;
-            return (react_1.default.createElement("div", { style: (0, styles_1.default)(fixedStyles.section, orientation === 'vertical' ? {
-                    marginTop: sectionIdx === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
+            var isCollapsed = !isSectionExpandedAt(sectionIndex);
+            var expandIconComponent = expandIconSvg ? react_2.default.createElement(FlatSVG_1.default, { svg: expandIconSvg, style: defaultStyles.expandIcon }) : react_2.default.createElement(react_2.default.Fragment, null);
+            var collapseIconComponent = collapseIconSvg ? react_2.default.createElement(FlatSVG_1.default, { svg: collapseIconSvg, style: defaultStyles.collapseIcon }) : expandIconComponent;
+            return (react_2.default.createElement("div", { style: (0, styles_1.default)(fixedStyles.section, orientation === 'vertical' ? {
+                    marginTop: sectionIndex === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
                 } : {
-                    marginLeft: sectionIdx === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
+                    marginLeft: sectionIndex === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
                 }) },
-                HeaderComponent ? (react_1.default.createElement(HeaderComponent, { className: (0, classnames_1.default)(fixedClassNames.header, { collapsed: isCollapsed, expanded: !isCollapsed }), style: (0, styles_1.default)(fixedStyles.header), data: section, index: sectionIdx, isCollapsed: isCollapsed, onClick: function () { return toggleSectionAt(sectionIdx); } })) : (react_1.default.createElement("button", { className: (0, classnames_1.default)(fixedClassNames.header, { collapsed: isCollapsed, expanded: !isCollapsed }), style: (0, styles_1.default)(fixedStyles.header, defaultStyles.header), onClick: function () { return toggleSectionAt(sectionIdx); } },
-                    react_1.default.createElement("label", { style: fixedStyles.headerLabel, dangerouslySetInnerHTML: { __html: section.label } }),
+                HeaderComponent ? (react_2.default.createElement(HeaderComponent, { className: (0, classnames_1.default)(fixedClassNames.header, { collapsed: isCollapsed, expanded: !isCollapsed }), style: (0, styles_1.default)(fixedStyles.header), data: section, index: sectionIndex, isCollapsed: isCollapsed, onClick: function () { return toggleSectionAt(sectionIndex); }, onCustomEvent: function (name, info) { return onHeaderCustomEvent === null || onHeaderCustomEvent === void 0 ? void 0 : onHeaderCustomEvent(sectionIndex, name, info); } })) : (react_2.default.createElement("button", { className: (0, classnames_1.default)(fixedClassNames.header, { collapsed: isCollapsed, expanded: !isCollapsed }), style: (0, styles_1.default)(fixedStyles.header, defaultStyles.header), onClick: function () { return toggleSectionAt(sectionIndex); } },
+                    react_2.default.createElement("label", { style: fixedStyles.headerLabel, dangerouslySetInnerHTML: { __html: section.label } }),
                     (0, cloneStyledElement_1.default)(isCollapsed ? expandIconComponent : collapseIconComponent, {
                         className: (0, classnames_1.default)(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),
                         style: (0, styles_1.default)(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),
                     }))),
-                react_1.default.createElement(List_1.default, { style: (0, styles_1.default)(fixedStyles.list, orientation === 'vertical' ? {
+                react_2.default.createElement(List_1.default, { style: (0, styles_1.default)(fixedStyles.list, orientation === 'vertical' ? {
                         height: isCollapsed ? '0px' : "".concat(menuLength, "px"),
                         marginTop: isCollapsed ? '0px' : "".concat(itemPadding - borderThickness, "px"),
                         overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',
@@ -259,7 +302,7 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
                         marginLeft: isCollapsed ? '0px' : "".concat(itemPadding - borderThickness, "px"),
                         overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',
                         width: isCollapsed ? '0px' : "".concat(menuLength, "px"),
-                    }), borderThickness: borderThickness, data: section.items, selectionMode: selectionMode, isTogglable: isTogglable, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, orientation: orientation, selectedIndices: (_a = selectedItemIndices[sectionIdx]) !== null && _a !== void 0 ? _a : [], onActivateAt: function (itemIdx) { return onActivateAt === null || onActivateAt === void 0 ? void 0 : onActivateAt(sectionIdx, itemIdx); }, onDeselectAt: function (itemIdx) { return deselectAt(sectionIdx, itemIdx); }, onSelectAt: function (itemIdx) { return selectAt(sectionIdx, itemIdx); } })));
+                    }), borderThickness: borderThickness, data: section.items, selectionMode: selectionMode, isSelectionTogglable: isSelectionTogglable, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, orientation: orientation, selectedIndices: (_a = selectedItemIndices[sectionIndex]) !== null && _a !== void 0 ? _a : [], onActivateAt: function (itemIndex) { return onActivateAt === null || onActivateAt === void 0 ? void 0 : onActivateAt(itemIndex, sectionIndex); }, onDeselectAt: function (itemIndex) { return deselectAt(itemIndex, sectionIndex); }, onSelectAt: function (itemIndex) { return selectAt(itemIndex, sectionIndex); } })));
         })));
 });
 //# sourceMappingURL=Accordion.js.map

package/lib/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isEqual from 'fast-deep-equal'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps, type ListProps } from './List'\nimport usePrevious from './hooks/usePrevious'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type AccordionItemProps<T> = ListItemProps<T>\n\nexport type AccordionHeaderProps<T> = HTMLAttributes<HTMLElement> & PropsWithChildren<{\n  data: AccordionSectionData<T>\n  index: number\n  isCollapsed: boolean\n}>\n\nexport type AccordionSectionData<T> = {\n  label: string\n  items: T[]\n}\n\nexport type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<T>, 'data' | 'itemComponentType' | 'selectedIndices' | 'onActivateAt' | 'onSelectAt' | 'onDeselectAt' | 'onSelectionChange'> & PropsWithChildren<{\n  /**\n   * Specifies if expanded sections should automatically collapse upon expanding\n   * another section.\n   */\n  autoCollapse?: boolean\n\n  /**\n   * SVG markup to be put in the section header as the collapse icon.\n   */\n  collapseIconSvg?: string\n\n  /**\n   * Data provided to each section.\n   */\n  data: AccordionSectionData<T>[]\n\n  /**\n   * Indices of sections that are expanded.\n   */\n  expandedSectionIndices?: number[]\n\n  /**\n   * SVG markup to be put in the section header as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * React component type to be used for generating headers inside the\n   * component. When absent, one will be generated automatically.\n   */\n  headerComponentType?: ComponentType<AccordionHeaderProps<T>>\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<AccordionItemProps<T>>\n\n  /**\n   * Maximum number of items that are viside when a section expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time, and a scrollbar will appear to scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when a section expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Padding (in pixels) between each section.\n   */\n  sectionPadding?: number\n\n  /**\n   * Indices of selected items per section.\n   */\n  selectedItemIndices?: Record<number, number[]>\n\n  /**\n   * Handler invoked when an item is activated in a section.\n   *\n   * @param sectionIndex Section index.\n   * @param itemIndex Item index.\n   */\n  onActivateAt?: (sectionIndex: number, itemIndex: number) => void\n\n  /**\n   * Handler invoked when a section is collapsed.\n   *\n   * @param sectionIndex Section index.\n   */\n  onCollapseSectionAt?: (sectionIndex: number) => void\n\n  /**\n   * Handler invoked when an item is deselected in a section.\n   *\n   * @param sectionIndex Section index.\n   * @param itemIndex Item index.\n   */\n  onDeselectAt?: (sectionIndex: number, itemIndex: number) => void\n\n  /**\n   * Handler invoked when a section is expanded.\n   *\n   * @param sectionIndex Section index.\n   */\n  onExpandSectionAt?: (sectionIndex: number) => void\n\n  /**\n   * Handler invoked when an item is selected in a section.\n   *\n   * @param sectionIndex Section index.\n   * @param itemIndex Item index.\n   */\n  onSelectAt?: (sectionIndex: number, itemIndex: number) => void\n\n  /**\n   * Handler invoked when selected items have changed.\n   *\n   * @param selectedIndices Dictionary of indices of selected items per section.\n   */\n  onSelectionChange?: (selectedIndices: Record<number, number[]>) => void\n}>\n\nexport default forwardRef(({\n  children,\n  className,\n  style,\n  autoCollapse = false,\n  borderThickness = 0,\n  collapseIconSvg,\n  data,\n  expandedSectionIndices: externalExpandedSectionIndices = [],\n  expandIconSvg,\n  headerComponentType: HeaderComponent,\n  isTogglable,\n  itemComponentType,\n  itemLength = 50,\n  itemPadding = 0,\n  maxVisibleItems = -1,\n  orientation = 'vertical',\n  sectionPadding = 0,\n  selectedItemIndices: externalSelectedItemIndices = {},\n  selectionMode = 'single',\n  onActivateAt,\n  onCollapseSectionAt,\n  onDeselectAt,\n  onExpandSectionAt,\n  onSelectAt,\n  onSelectionChange,\n  ...props\n}, ref) => {\n  const isSectionExpandedAt = (idx: number) => expandedSectionIndices.indexOf(idx) >= 0\n\n  const toggleSectionAt = (idx: number) => {\n    if (isSectionExpandedAt(idx)) {\n      setExpandedSectionIndices(prev => prev.filter(t => t !== idx))\n    }\n    else if (autoCollapse) {\n      setExpandedSectionIndices([idx])\n    }\n    else {\n      setExpandedSectionIndices(prev => [...prev.filter(t => t !== idx), idx])\n    }\n  }\n\n  const selectAt = (sectionIdx: number, itemIdx: number) => {\n    switch (selectionMode) {\n      case 'multiple':\n        setSelectedItemIndices(prev => ({\n          ...prev,\n          [sectionIdx]: [...(prev[sectionIdx] ?? []).filter(t => t !== itemIdx), itemIdx],\n        }))\n\n        onSelectAt?.(sectionIdx, itemIdx)\n\n        break\n      case 'single':\n        setSelectedItemIndices({ [sectionIdx]: [itemIdx] })\n        onSelectAt?.(sectionIdx, itemIdx)\n\n        break\n      default:\n        break\n    }\n  }\n\n  const deselectAt = (sectionIdx: number, itemIdx: number) => {\n    setSelectedItemIndices(prev => ({\n      ...prev,\n      [sectionIdx]: (prev[sectionIdx] ?? []).filter(t => t !== itemIdx),\n    }))\n\n    onDeselectAt?.(sectionIdx, itemIdx)\n  }\n\n  const [expandedSectionIndices, setExpandedSectionIndices] = useState(externalExpandedSectionIndices)\n  const prevExpandedSectionIndices = usePrevious(expandedSectionIndices)\n  const [selectedItemIndices, setSelectedItemIndices] = useState(externalSelectedItemIndices)\n\n  useEffect(() => {\n    if (isEqual(externalExpandedSectionIndices, expandedSectionIndices)) return\n\n    setExpandedSectionIndices(externalExpandedSectionIndices)\n  }, [JSON.stringify(externalExpandedSectionIndices)])\n\n  useEffect(() => {\n    if (isEqual(externalSelectedItemIndices, selectedItemIndices)) return\n\n    setSelectedItemIndices(externalSelectedItemIndices)\n  }, [JSON.stringify(externalSelectedItemIndices)])\n\n  useEffect(() => {\n    const collapsed = prevExpandedSectionIndices?.filter(t => expandedSectionIndices.indexOf(t) === -1) ?? []\n    const expanded = expandedSectionIndices.filter(t => prevExpandedSectionIndices?.indexOf(t) === -1)\n\n    collapsed.map(t => onCollapseSectionAt?.(t))\n    expanded.map(t => onExpandSectionAt?.(t))\n  }, [JSON.stringify(expandedSectionIndices)])\n\n  useEffect(() => {\n    onSelectionChange?.(selectedItemIndices)\n  }, [JSON.stringify(selectedItemIndices)])\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation),\n    header: classNames(orientation),\n    expandIcon: classNames(orientation),\n    collapseIcon: classNames(orientation),\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      alignItems: 'center',\n      boxSizing: 'border-box',\n      display: 'flex',\n      flex: '0 0 auto',\n      justifyContent: 'flex-start',\n      padding: '0',\n      ...orientation === 'vertical' ? {\n        flexDirection: 'column',\n        height: 'auto',\n      } : {\n        flexDirection: 'row',\n        width: 'auto',\n      },\n    },\n    section: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      flex: '0 0 auto',\n      justifyContent: 'flex-start',\n      margin: '0',\n      padding: '0',\n      ...orientation === 'vertical' ? {\n        flexDirection: 'column',\n        width: '100%',\n      } : {\n        flexDirection: 'row',\n        height: '100%',\n      },\n    },\n    header: {\n      borderWidth: `${borderThickness}px`,\n      cursor: 'pointer',\n      margin: '0',\n      outline: 'none',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n      } : {\n        height: '100%',\n      },\n    },\n    headerLabel: {\n      color: 'inherit',\n      fontFamily: 'inherit',\n      fontSize: 'inherit',\n      fontWeight: 'inherit',\n      letterSpacing: 'inherit',\n      lineHeight: 'inherit',\n      pointerEvents: 'none',\n      transition: 'inherit',\n    },\n    expandIcon: {\n      margin: '0',\n      padding: '0',\n    },\n    collapseIcon: {\n      margin: '0',\n      padding: '0',\n    },\n    list: {\n      transitionDuration: '100ms',\n      transitionTimingFunction: 'ease-out',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n        transitionProperty: 'height, margin',\n        top: '100%',\n      } : {\n        height: '100%',\n        transitionProperty: 'width, margin',\n        left: '100%',\n      },\n    },\n  })\n\n  const defaultStyles = asStyleDict({\n    header: {\n      alignItems: 'center',\n      background: '#fff',\n      borderStyle: 'solid',\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      padding: '0 10px',\n      transitionDuration: '100ms',\n      transitionProperty: 'transform, opacity, background, color',\n      transitionTimingFunction: 'ease-out',\n      ...orientation === 'vertical' ? {\n        height: '50px',\n      } : {\n        width: '50px',\n      },\n    },\n    expandIcon: {\n      boxSizing: 'border-box',\n      display: 'block',\n      fill: '#000',\n      height: '15px',\n      transformOrigin: 'center',\n      transitionDuration: '100ms',\n      transitionProperty: 'transform',\n      transitionTimingFunction: 'ease-out',\n      width: '15px',\n    },\n    collapseIcon: {\n      boxSizing: 'border-box',\n      display: 'block',\n      fill: '#000',\n      height: '15px',\n      transformOrigin: 'center',\n      transitionDuration: '100ms',\n      transitionProperty: 'transform',\n      transitionTimingFunction: 'ease-out',\n      width: '15px',\n    },\n  })\n\n  return (\n    <div\n      {...props}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      <Each in={data}>\n        {(section, sectionIdx) => {\n          const numItems = section.items.length\n          const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n          const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n          const isCollapsed = !isSectionExpandedAt(sectionIdx)\n          const expandIconComponent = expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>\n          const collapseIconComponent = collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles.collapseIcon}/> : expandIconComponent\n\n          return (\n            <div style={styles(fixedStyles.section, orientation === 'vertical' ? {\n              marginTop: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n            } : {\n              marginLeft: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n            })}>\n              {HeaderComponent ? (\n                <HeaderComponent\n                  className={classNames(fixedClassNames.header, { collapsed: isCollapsed, expanded: !isCollapsed })}\n                  style={styles(fixedStyles.header)}\n                  data={section}\n                  index={sectionIdx}\n                  isCollapsed={isCollapsed}\n                  onClick={() => toggleSectionAt(sectionIdx)}\n                />\n              ) : (\n                <button\n                  className={classNames(fixedClassNames.header, { collapsed: isCollapsed, expanded: !isCollapsed })}\n                  style={styles(fixedStyles.header, defaultStyles.header)}\n                  onClick={() => toggleSectionAt(sectionIdx)}\n                >\n                  <label style={fixedStyles.headerLabel} dangerouslySetInnerHTML={{ __html: section.label }}/>\n                  {cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n                    className: classNames(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),\n                    style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n                  })}\n                </button>\n              )}\n              <List\n                style={styles(fixedStyles.list, orientation === 'vertical' ? {\n                  height: isCollapsed ? '0px' : `${menuLength}px`,\n                  marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n                } : {\n                  marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n                  width: isCollapsed ? '0px' : `${menuLength}px`,\n                })}\n                borderThickness={borderThickness}\n                data={section.items}\n                selectionMode={selectionMode}\n                isTogglable={isTogglable}\n                itemComponentType={itemComponentType}\n                itemLength={itemLength}\n                itemPadding={itemPadding}\n                orientation={orientation}\n                selectedIndices={selectedItemIndices[sectionIdx] ?? []}\n                onActivateAt={itemIdx => onActivateAt?.(sectionIdx, itemIdx)}\n                onDeselectAt={itemIdx => deselectAt(sectionIdx, itemIdx)}\n                onSelectAt={itemIdx => selectAt(sectionIdx, itemIdx)}\n              />\n            </div>\n          )\n        }}\n      </Each>\n    </div>\n  )\n}) as <T>(props: AccordionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n"]}
+{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isDeepEqual from 'fast-deep-equal/react'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps, type ListProps } from './List'\nimport usePrevious from './hooks/usePrevious'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type AccordionItemProps<T> = ListItemProps<T>\n\nexport type AccordionHeaderProps<T, A = never> = HTMLAttributes<HTMLElement> & PropsWithChildren<{\n  attributes?: A\n  data: AccordionSectionData<T>\n  index: number\n  isCollapsed: boolean\n  onCustomEvent?: (name: string, info?: any) => void\n}>\n\nexport type AccordionSectionData<T> = {\n  label: string\n  items: T[]\n}\n\nexport type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<T>, 'data' | 'itemComponentType' | 'selectedIndices' | 'onActivateAt' | 'onSelectAt' | 'onDeselectAt' | 'onSelectionChange'> & PropsWithChildren<{\n  /**\n   * Specifies if expanded sections should automatically collapse upon expanding\n   * another section.\n   */\n  autoCollapseSections?: boolean\n\n  /**\n   * SVG markup to be put in the section header as the collapse icon.\n   */\n  collapseIconSvg?: string\n\n  /**\n   * Data provided to each section.\n   */\n  data: AccordionSectionData<T>[]\n\n  /**\n   * Indices of sections that are expanded.\n   */\n  expandedSectionIndices?: number[]\n\n  /**\n   * SVG markup to be put in the section header as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * Maximum number of items that are viside when a section expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time, and a scrollbar will appear to scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when a section expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Padding (in pixels) between each section.\n   */\n  sectionPadding?: number\n\n  /**\n   * Indices of selected items per section.\n   */\n  selectedItemIndices?: Record<number, number[]>\n\n  /**\n   * React component type to be used for generating headers inside the\n   * component. When absent, one will be generated automatically.\n   */\n  headerComponentType?: ComponentType<AccordionHeaderProps<T>>\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<AccordionItemProps<T>>\n\n  /**\n   * Handler invoked when an item is activated in a section.\n   *\n   * @param itemIndex Item index.\n   * @param sectionIndex Section index.\n   */\n  onActivateAt?: (itemIndex: number, 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 deselected in a section.\n   *\n   * @param itemIndex Item index.\n   * @param sectionIndex Section index.\n   */\n  onDeselectAt?: (itemIndex: number, sectionIndex: number) => void\n\n  /**\n   * Handler invoked when a section is expanded.\n   *\n   * @param sectionIndex Section index.\n   */\n  onExpandSectionAt?: (sectionIndex: number) => void\n\n  /**\n   * Handler invoked when a custom event is dispatched from a section header.\n   *\n   * @param index Index of the section header.\n   * @param eventName Name of the dispatched event.\n   * @param eventInfo Optional info of the dispatched event.\n   */\n  onHeaderCustomEvent?: (index: number, eventName: string, eventInfo?: any) => void\n\n  /**\n   * Handler invoked when an item is selected in a section.\n   *\n   * @param itemIndex Item index.\n   * @param sectionIndex Section index.\n   */\n  onSelectAt?: (itemIndex: number, sectionIndex: number) => void\n\n  /**\n   * Handler invoked when selected items have changed.\n   *\n   * @param selectedIndices Dictionary of indices of selected items per section.\n   */\n  onSelectionChange?: (selectedIndices: Record<number, number[]>) => void\n}>\n\nexport default forwardRef(({\n  children,\n  className,\n  style,\n  autoCollapseSections = false,\n  borderThickness = 0,\n  collapseIconSvg,\n  data,\n  expandedSectionIndices: externalExpandedSectionIndices = [],\n  expandIconSvg,\n  isSelectionTogglable = false,\n  itemLength = 50,\n  itemPadding = 0,\n  maxVisibleItems = -1,\n  orientation = 'vertical',\n  sectionPadding = 0,\n  selectedItemIndices: externalSelectedItemIndices = {},\n  selectionMode = 'single',\n  headerComponentType: HeaderComponent,\n  itemComponentType,\n  onActivateAt,\n  onCollapseSectionAt,\n  onDeselectAt,\n  onExpandSectionAt,\n  onHeaderCustomEvent,\n  onSelectAt,\n  onSelectionChange,\n  ...props\n}, ref) => {\n  const isSectionIndexOutOfRange = (sectionIndex: number) => {\n    if (sectionIndex >= data.length) return true\n    if (sectionIndex < 0) return true\n\n    return false\n  }\n\n  const isItemIndexOutOfRange = (itemIndex: number, sectionIndex: number) => {\n    if (isSectionIndexOutOfRange(sectionIndex)) return true\n\n    const items = data[sectionIndex].items\n\n    if (itemIndex >= items.length) return true\n    if (itemIndex < 0) return true\n\n    return false\n  }\n\n  const sanitizeExpandedSectionIndices = (sectionIndices: number[]) => sectionIndices.sort().filter(t => !isSectionIndexOutOfRange(t))\n\n  const sanitizeSelectedItemIndices = (itemIndices: Record<number, number[]>) => {\n    const newValue: Record<number, number[]> = {}\n\n    for (const sectionIndex in itemIndices) {\n      if (!Object.prototype.hasOwnProperty.call(itemIndices, sectionIndex)) continue\n\n      const indices = itemIndices[sectionIndex]\n\n      if (!indices || !(indices instanceof Array) || indices.length === 0) continue\n\n      newValue[sectionIndex] = indices.sort().filter(t => !isItemIndexOutOfRange(t, Number(sectionIndex)))\n    }\n\n    return newValue\n  }\n\n  const isSectionExpandedAt = (sectionIndex: number) => expandedSectionIndices.indexOf(sectionIndex) >= 0\n\n  const toggleSectionAt = (sectionIndex: number) => {\n    if (isSectionIndexOutOfRange(sectionIndex)) return\n\n    if (isSectionExpandedAt(sectionIndex)) {\n      setExpandedSectionIndices(prev => prev.filter(t => t !== sectionIndex))\n    }\n    else if (autoCollapseSections) {\n      setExpandedSectionIndices([sectionIndex])\n    }\n    else {\n      setExpandedSectionIndices(prev => [...prev.filter(t => t !== sectionIndex), sectionIndex].sort())\n    }\n  }\n\n  const selectAt = (itemIndex: number, sectionIndex: number) => {\n    if (isItemIndexOutOfRange(itemIndex, sectionIndex)) return\n\n    switch (selectionMode) {\n      case 'multiple':\n        setSelectedItemIndices(prev => ({\n          ...prev,\n          [sectionIndex]: [...(prev[sectionIndex] ?? []).filter(t => t !== itemIndex), itemIndex].sort(),\n        }))\n\n        onSelectAt?.(itemIndex, sectionIndex)\n\n        break\n      case 'single':\n        setSelectedItemIndices({\n          [sectionIndex]: [itemIndex],\n        })\n\n        onSelectAt?.(itemIndex, sectionIndex)\n\n        break\n      default:\n        break\n    }\n  }\n\n  const deselectAt = (itemIndex: number, sectionIndex: number) => {\n    if (isItemIndexOutOfRange(itemIndex, sectionIndex)) return\n\n    setSelectedItemIndices(prev => ({\n      ...prev,\n      [sectionIndex]: (prev[sectionIndex] ?? []).filter(t => t !== itemIndex),\n    }))\n\n    onDeselectAt?.(itemIndex, sectionIndex)\n  }\n\n  const [expandedSectionIndices, setExpandedSectionIndices] = useState(sanitizeExpandedSectionIndices(externalExpandedSectionIndices))\n  const prevExpandedSectionIndices = usePrevious(expandedSectionIndices)\n  const [selectedItemIndices, setSelectedItemIndices] = useState(externalSelectedItemIndices)\n\n  useEffect(() => {\n    const newValue = sanitizeExpandedSectionIndices(externalExpandedSectionIndices)\n\n    if (isDeepEqual(newValue, expandedSectionIndices)) return\n\n    setExpandedSectionIndices(newValue)\n  }, [JSON.stringify(sanitizeExpandedSectionIndices(externalExpandedSectionIndices))])\n\n  useEffect(() => {\n    const collapsed = prevExpandedSectionIndices?.filter(t => expandedSectionIndices.indexOf(t) === -1) ?? []\n    const expanded = expandedSectionIndices.filter(t => prevExpandedSectionIndices?.indexOf(t) === -1)\n\n    collapsed.map(t => onCollapseSectionAt?.(t))\n    expanded.map(t => onExpandSectionAt?.(t))\n  }, [JSON.stringify(sanitizeExpandedSectionIndices(expandedSectionIndices))])\n\n  useEffect(() => {\n    const newValue = sanitizeSelectedItemIndices(externalSelectedItemIndices)\n\n    if (isDeepEqual(newValue, selectedItemIndices)) return\n\n    setSelectedItemIndices(newValue)\n  }, [JSON.stringify(sanitizeSelectedItemIndices(externalSelectedItemIndices))])\n\n  useEffect(() => {\n    onSelectionChange?.(selectedItemIndices)\n  }, [JSON.stringify(sanitizeSelectedItemIndices(selectedItemIndices))])\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation),\n    header: classNames(orientation),\n    expandIcon: classNames(orientation),\n    collapseIcon: classNames(orientation),\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      alignItems: 'center',\n      boxSizing: 'border-box',\n      display: 'flex',\n      flex: '0 0 auto',\n      justifyContent: 'flex-start',\n      padding: '0',\n      ...orientation === 'vertical' ? {\n        flexDirection: 'column',\n        height: 'auto',\n      } : {\n        flexDirection: 'row',\n        width: 'auto',\n      },\n    },\n    section: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      flex: '0 0 auto',\n      justifyContent: 'flex-start',\n      margin: '0',\n      padding: '0',\n      ...orientation === 'vertical' ? {\n        flexDirection: 'column',\n        width: '100%',\n      } : {\n        flexDirection: 'row',\n        height: '100%',\n      },\n    },\n    header: {\n      borderWidth: `${borderThickness}px`,\n      cursor: 'pointer',\n      margin: '0',\n      outline: 'none',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n      } : {\n        height: '100%',\n      },\n    },\n    headerLabel: {\n      color: 'inherit',\n      fontFamily: 'inherit',\n      fontSize: 'inherit',\n      fontWeight: 'inherit',\n      letterSpacing: 'inherit',\n      lineHeight: 'inherit',\n      pointerEvents: 'none',\n      transition: 'inherit',\n    },\n    expandIcon: {\n      margin: '0',\n      padding: '0',\n    },\n    collapseIcon: {\n      margin: '0',\n      padding: '0',\n    },\n    list: {\n      transitionDuration: '100ms',\n      transitionTimingFunction: 'ease-out',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n        transitionProperty: 'height, margin',\n        top: '100%',\n      } : {\n        height: '100%',\n        transitionProperty: 'width, margin',\n        left: '100%',\n      },\n    },\n  })\n\n  const defaultStyles = asStyleDict({\n    header: {\n      alignItems: 'center',\n      background: '#fff',\n      borderStyle: 'solid',\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      padding: '0 10px',\n      transitionDuration: '100ms',\n      transitionProperty: 'transform, opacity, background, color',\n      transitionTimingFunction: 'ease-out',\n      ...orientation === 'vertical' ? {\n        height: '50px',\n      } : {\n        width: '50px',\n      },\n    },\n    expandIcon: {\n      boxSizing: 'border-box',\n      display: 'block',\n      fill: '#000',\n      height: '15px',\n      transformOrigin: 'center',\n      transitionDuration: '100ms',\n      transitionProperty: 'transform',\n      transitionTimingFunction: 'ease-out',\n      width: '15px',\n    },\n    collapseIcon: {\n      boxSizing: 'border-box',\n      display: 'block',\n      fill: '#000',\n      height: '15px',\n      transformOrigin: 'center',\n      transitionDuration: '100ms',\n      transitionProperty: 'transform',\n      transitionTimingFunction: 'ease-out',\n      width: '15px',\n    },\n  })\n\n  return (\n    <div\n      {...props}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      <Each in={data}>\n        {(section, sectionIndex) => {\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(sectionIndex)\n          const expandIconComponent = expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>\n          const collapseIconComponent = collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles.collapseIcon}/> : expandIconComponent\n\n          return (\n            <div style={styles(fixedStyles.section, orientation === 'vertical' ? {\n              marginTop: sectionIndex === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n            } : {\n              marginLeft: sectionIndex === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n            })}>\n              {HeaderComponent ? (\n                <HeaderComponent\n                  className={classNames(fixedClassNames.header, { collapsed: isCollapsed, expanded: !isCollapsed })}\n                  style={styles(fixedStyles.header)}\n                  data={section}\n                  index={sectionIndex}\n                  isCollapsed={isCollapsed}\n                  onClick={() => toggleSectionAt(sectionIndex)}\n                  onCustomEvent={(name, info) => onHeaderCustomEvent?.(sectionIndex, name, info)}\n                />\n              ) : (\n                <button\n                  className={classNames(fixedClassNames.header, { collapsed: isCollapsed, expanded: !isCollapsed })}\n                  style={styles(fixedStyles.header, defaultStyles.header)}\n                  onClick={() => toggleSectionAt(sectionIndex)}\n                >\n                  <label style={fixedStyles.headerLabel} dangerouslySetInnerHTML={{ __html: section.label }}/>\n                  {cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n                    className: classNames(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),\n                    style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n                  })}\n                </button>\n              )}\n              <List\n                style={styles(fixedStyles.list, orientation === 'vertical' ? {\n                  height: isCollapsed ? '0px' : `${menuLength}px`,\n                  marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n                } : {\n                  marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n                  width: isCollapsed ? '0px' : `${menuLength}px`,\n                })}\n                borderThickness={borderThickness}\n                data={section.items}\n                selectionMode={selectionMode}\n                isSelectionTogglable={isSelectionTogglable}\n                itemComponentType={itemComponentType}\n                itemLength={itemLength}\n                itemPadding={itemPadding}\n                orientation={orientation}\n                selectedIndices={selectedItemIndices[sectionIndex] ?? []}\n                onActivateAt={itemIndex => onActivateAt?.(itemIndex, sectionIndex)}\n                onDeselectAt={itemIndex => deselectAt(itemIndex, sectionIndex)}\n                onSelectAt={itemIndex => selectAt(itemIndex, sectionIndex)}\n              />\n            </div>\n          )\n        }}\n      </Each>\n    </div>\n  )\n}) as <T>(props: AccordionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n"]}

package/lib/Dropdown.d.ts

@@ -3,7 +3,9 @@ import { type ListItemProps, type ListProps } from './List';
 export type DropdownData = {
     label?: string;
 };
-export type DropdownToggleProps = HTMLAttributes<HTMLElement> & PropsWithChildren;
+export type DropdownToggleProps = HTMLAttributes<HTMLElement> & {
+    onCustomEvent?: (name: string, info?: any) => void;
+};
 export type DropdownItemProps<T extends DropdownData = DropdownData> = ListItemProps<T>;
 export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttributes<HTMLDivElement> & ListProps<T> & PropsWithChildren<{
     /**
@@ -41,6 +43,13 @@ export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttribute
      * the component. When absent, one will be generated automatically.
      */
     toggleComponentType?: ComponentType<DropdownToggleProps>;
+    /**
+     * Handler invoked when the toggle dispatches a custom event.
+     *
+     * @param eventName Name of the dispatched custom event.
+     * @param eventInfo Optional info of the dispatched custom event.
+     */
+    onToggleCustomEvent?: (eventName: string, eventInfo?: any) => void;
 }>;
 /**
  * A dropdown menu component that is invertible (i.e. can "dropup" instead) and
@@ -50,25 +59,16 @@ export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttribute
 declare const _default: <T extends DropdownData = DropdownData>(props: React.HTMLAttributes<HTMLDivElement> & {
     borderThickness?: number | undefined;
     data: T[];
-    isTogglable?: boolean | undefined;
-    itemComponentType?: React.ComponentType<ListItemProps<T>> | undefined;
+    isSelectionTogglable?: boolean | undefined;
     itemLength?: number | undefined;
     itemPadding?: number | undefined;
-    orientation?: ("horizontal" | "vertical") | undefined; /**
-     * Indicates if the component is inverted (i.e. "dropup" instead of dropdown).
-     * Supports all orientations.
-     */
+    orientation?: ("horizontal" | "vertical") | undefined;
     selectedIndices?: number[] | undefined;
-    /**
-     * Maximum number of items that are viside when the component expands. When a
-     * value greater than or equal to 0 is specified, only that number of items
-     * will be visible at a time, and a scrollbar will appear to scroll to
-     * remaining items. Any value less than 0 indicates that all items will be
-     * visible when the component expands.
-     */
     selectionMode?: "none" | "multiple" | "single" | undefined;
+    itemComponentType?: React.ComponentType<ListItemProps<T>> | undefined;
     onActivateAt?: ((index: number) => void) | undefined;
     onDeselectAt?: ((index: number) => void) | undefined;
+    onItemCustomEvent?: ((index: number, eventName: string, eventInfo?: any) => void) | undefined;
     onSelectAt?: ((index: number) => void) | undefined;
     onSelectionChange?: ((indices: number[]) => void) | undefined;
 } & {
@@ -107,6 +107,13 @@ declare const _default: <T extends DropdownData = DropdownData>(props: React.HTM
      * the component. When absent, one will be generated automatically.
      */
     toggleComponentType?: React.ComponentType<DropdownToggleProps> | undefined;
+    /**
+     * Handler invoked when the toggle dispatches a custom event.
+     *
+     * @param eventName Name of the dispatched custom event.
+     * @param eventInfo Optional info of the dispatched custom event.
+     */
+    onToggleCustomEvent?: ((eventName: string, eventInfo?: any) => void) | undefined;
 } & {
     children?: React.ReactNode;
 } & {