etudes 3.7.0 → 3.7.1

package/lib/Accordion.d.ts

@@ -1,16 +1,17 @@
 import React, { type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
 import { type ListItemProps, type ListProps } from './List';
-export type AccordionItemProps<I> = ListItemProps<I>;
+export type AccordionSectionData<I> = {
+    label: string;
+    items: I[];
+};
+export type AccordionSelection = Record<number, number[]>;
+export type AccordionItemProps<T> = ListItemProps<T>;
 export type AccordionHeaderProps<I, S extends AccordionSectionData<I> = AccordionSectionData<I>> = HTMLAttributes<HTMLElement> & PropsWithChildren<{
-    section: S;
     index: number;
     isCollapsed: boolean;
+    sectionData: S;
     onCustomEvent?: (name: string, info?: any) => void;
 }>;
-export type AccordionSectionData<I> = {
-    label: string;
-    items: I[];
-};
 export type AccordionProps<I, S extends AccordionSectionData<I> = AccordionSectionData<I>> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<I>, 'data' | 'itemComponentType' | 'selectedIndices' | 'onActivateAt' | 'onSelectAt' | 'onDeselectAt' | 'onSelectionChange'> & PropsWithChildren<{
     /**
      * Specifies if expanded sections should automatically collapse upon expanding
@@ -34,13 +35,13 @@ export type AccordionProps<I, S extends AccordionSectionData<I> = AccordionSecti
      */
     expandIconSvg?: string;
     /**
-     * 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
-     * will be visible at a time, and a scrollbar will appear to scroll to
+     * Maximum number of items that are viside per section when a section 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 a section expands.
      */
-    maxVisibleItems?: number;
+    maxVisibleItems?: number[];
     /**
      * Padding (in pixels) between each section.
      */
@@ -48,7 +49,7 @@ export type AccordionProps<I, S extends AccordionSectionData<I> = AccordionSecti
     /**
      * Indices of selected items per section.
      */
-    selectedItemIndices?: Record<number, number[]>;
+    selection?: AccordionSelection;
     /**
      * React component type to be used for generating headers inside the
      * component. When absent, one will be generated automatically.
@@ -58,6 +59,10 @@ export type AccordionProps<I, S extends AccordionSectionData<I> = AccordionSecti
      * React component type to be used for generating items inside the component.
      */
     itemComponentType: ComponentType<AccordionItemProps<I>>;
+    /**
+     * Specifies if the component should use default styles.
+     */
+    useDefaultStyles?: boolean;
     /**
      * Handler invoked when an item is activated in a section.
      *
@@ -87,11 +92,11 @@ export type AccordionProps<I, S extends AccordionSectionData<I> = AccordionSecti
     /**
      * Handler invoked when a custom event is dispatched from a section header.
      *
-     * @param index Index of the section header.
+     * @param sectionIndex Index of the section which the header belongs.
      * @param eventName Name of the dispatched event.
      * @param eventInfo Optional info of the dispatched event.
      */
-    onHeaderCustomEvent?: (index: number, eventName: string, eventInfo?: any) => void;
+    onHeaderCustomEvent?: (sectionIndex: number, eventName: string, eventInfo?: any) => void;
     /**
      * Handler invoked when an item is selected in a section.
      *
@@ -104,7 +109,7 @@ export type AccordionProps<I, S extends AccordionSectionData<I> = AccordionSecti
      *
      * @param selectedIndices Dictionary of indices of selected items per section.
      */
-    onSelectionChange?: (selectedIndices: Record<number, number[]>) => void;
+    onSelectionChange?: (selection: AccordionSelection) => void;
 }>;
 declare const _default: <I, S extends AccordionSectionData<I> = AccordionSectionData<I>>(props: React.HTMLAttributes<HTMLDivElement> & Omit<ListProps<I>, "data" | "selectedIndices" | "itemComponentType" | "onActivateAt" | "onDeselectAt" | "onSelectAt" | "onSelectionChange"> & {
     /**
@@ -129,13 +134,13 @@ declare const _default: <I, S extends AccordionSectionData<I> = AccordionSection
      */
     expandIconSvg?: string | undefined;
     /**
-     * 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
-     * will be visible at a time, and a scrollbar will appear to scroll to
+     * Maximum number of items that are viside per section when a section 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 a section expands.
      */
-    maxVisibleItems?: number | undefined;
+    maxVisibleItems?: number[] | undefined;
     /**
      * Padding (in pixels) between each section.
      */
@@ -143,7 +148,7 @@ declare const _default: <I, S extends AccordionSectionData<I> = AccordionSection
     /**
      * Indices of selected items per section.
      */
-    selectedItemIndices?: Record<number, number[]> | undefined;
+    selection?: AccordionSelection | undefined;
     /**
      * React component type to be used for generating headers inside the
      * component. When absent, one will be generated automatically.
@@ -153,6 +158,10 @@ declare const _default: <I, S extends AccordionSectionData<I> = AccordionSection
      * React component type to be used for generating items inside the component.
      */
     itemComponentType: React.ComponentType<AccordionItemProps<I>>;
+    /**
+     * Specifies if the component should use default styles.
+     */
+    useDefaultStyles?: boolean | undefined;
     /**
      * Handler invoked when an item is activated in a section.
      *
@@ -182,11 +191,11 @@ declare const _default: <I, S extends AccordionSectionData<I> = AccordionSection
     /**
      * Handler invoked when a custom event is dispatched from a section header.
      *
-     * @param index Index of the section header.
+     * @param sectionIndex Index of the section which the header belongs.
      * @param eventName Name of the dispatched event.
      * @param eventInfo Optional info of the dispatched event.
      */
-    onHeaderCustomEvent?: ((index: number, eventName: string, eventInfo?: any) => void) | undefined;
+    onHeaderCustomEvent?: ((sectionIndex: number, eventName: string, eventInfo?: any) => void) | undefined;
     /**
      * Handler invoked when an item is selected in a section.
      *
@@ -199,7 +208,7 @@ declare const _default: <I, S extends AccordionSectionData<I> = AccordionSection
      *
      * @param selectedIndices Dictionary of indices of selected items per section.
      */
-    onSelectionChange?: ((selectedIndices: Record<number, number[]>) => void) | undefined;
+    onSelectionChange?: ((selection: AccordionSelection) => void) | undefined;
 } & {
     children?: React.ReactNode;
 } & {

package/lib/Accordion.js

@@ -85,7 +85,7 @@ 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_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 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, maxVisibleItems = _a.maxVisibleItems, _h = _a.orientation, orientation = _h === void 0 ? 'vertical' : _h, _j = _a.sectionPadding, sectionPadding = _j === void 0 ? 0 : _j, _k = _a.selection, externalSelection = _k === void 0 ? {} : _k, _l = _a.selectionMode, selectionMode = _l === void 0 ? 'single' : _l, _m = _a.useDefaultStyles, useDefaultStyles = _m === void 0 ? false : _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", "selection", "selectionMode", "useDefaultStyles", "headerComponentType", "itemComponentType", "onActivateAt", "onCollapseSectionAt", "onDeselectAt", "onExpandSectionAt", "onHeaderCustomEvent", "onSelectAt", "onSelectionChange"]);
     var isSectionIndexOutOfRange = function (sectionIndex) {
         if (sectionIndex >= data.length)
             return true;
@@ -104,25 +104,22 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
         return false;
     };
     var sanitizeExpandedSectionIndices = function (sectionIndices) { return sectionIndices.sort().filter(function (t) { return !isSectionIndexOutOfRange(t); }); };
-    var sanitizeSelectedItemIndices = function (itemIndices) {
+    var sanitizeSelection = function (selection) {
+        var _a;
         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)
+            if (!Object.prototype.hasOwnProperty.call(data, sectionIndex))
                 return "continue";
-            newValue[sectionIndex] = indices.sort().filter(function (t) { return !isItemIndexOutOfRange(t, Number(sectionIndex)); });
+            var indices = __spreadArray([], __read((_a = selection[sectionIndex]) !== null && _a !== void 0 ? _a : []), false).sort();
+            newValue[Number(sectionIndex)] = indices.sort().filter(function (t) { return !isItemIndexOutOfRange(t, Number(sectionIndex)); });
         };
-        for (var sectionIndex in itemIndices) {
+        for (var sectionIndex in data) {
             _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; }); });
         }
@@ -130,16 +127,14 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
             setExpandedSectionIndices([sectionIndex]);
         }
         else {
-            setExpandedSectionIndices(function (prev) { return __spreadArray(__spreadArray([], __read(prev.filter(function (t) { return t !== sectionIndex; })), false), [sectionIndex], false).sort(); });
+            setExpandedSectionIndices(function (prev) { return __spreadArray(__spreadArray([], __read(prev.filter(function (t) { return t !== sectionIndex; })), false), [sectionIndex], false); });
         }
     };
     var selectAt = function (itemIndex, sectionIndex) {
         var _a;
-        if (isItemIndexOutOfRange(itemIndex, sectionIndex))
-            return;
         switch (selectionMode) {
             case 'multiple':
-                setSelectedItemIndices(function (prev) {
+                setSelection(function (prev) {
                     var _a;
                     var _b;
                     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)));
@@ -147,7 +142,7 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
                 onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(itemIndex, sectionIndex);
                 break;
             case 'single':
-                setSelectedItemIndices((_a = {},
+                setSelection((_a = {},
                     _a[sectionIndex] = [itemIndex],
                     _a));
                 onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(itemIndex, sectionIndex);
@@ -157,22 +152,19 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
         }
     };
     var deselectAt = function (itemIndex, sectionIndex) {
-        if (isItemIndexOutOfRange(itemIndex, sectionIndex))
-            return;
-        setSelectedItemIndices(function (prev) {
-            var _a;
-            var _b = prev, _c = sectionIndex, indices = _b[_c], rest = __rest(_b, [typeof _c === "symbol" ? _c : _c + ""]);
-            var newIndices = (indices !== null && indices !== void 0 ? indices : []).filter(function (t) { return t !== itemIndex; });
-            return newIndices.length > 0 ? __assign(__assign({}, rest), (_a = {}, _a[sectionIndex] = newIndices, _a)) : __assign({}, rest);
+        setSelection(function (prev) {
+            var newValue = __assign({}, prev);
+            newValue[sectionIndex] = prev[sectionIndex].filter(function (t) { return t !== itemIndex; });
+            return newValue;
         });
         onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(itemIndex, sectionIndex);
     };
     var sanitizedExpandedSectionIndices = sanitizeExpandedSectionIndices(externalExpandedSectionIndices);
     var _o = __read((0, react_2.useState)(sanitizedExpandedSectionIndices), 2), expandedSectionIndices = _o[0], setExpandedSectionIndices = _o[1];
     var prevExpandedSectionIndices = (0, usePrevious_1.default)(expandedSectionIndices);
-    var sanitizedExternalSelectedItemIndices = sanitizeSelectedItemIndices(externalSelectedItemIndices);
-    var _p = __read((0, react_2.useState)(sanitizedExternalSelectedItemIndices), 2), selectedItemIndices = _p[0], setSelectedItemIndices = _p[1];
-    var prevSelectedItemIndices = (0, usePrevious_1.default)(selectedItemIndices);
+    var sanitizedExternalSelection = sanitizeSelection(externalSelection);
+    var _p = __read((0, react_2.useState)(sanitizedExternalSelection), 2), selection = _p[0], setSelection = _p[1];
+    var prevSelection = (0, usePrevious_1.default)(selection);
     (0, react_2.useEffect)(function () {
         if ((0, react_1.default)(sanitizedExpandedSectionIndices, expandedSectionIndices))
             return;
@@ -180,7 +172,7 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
     }, [JSON.stringify(sanitizedExpandedSectionIndices)]);
     (0, react_2.useEffect)(function () {
         var _a;
-        if ((0, react_1.default)(expandedSectionIndices, sanitizedExpandedSectionIndices))
+        if (!prevExpandedSectionIndices)
             return;
         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; });
@@ -188,22 +180,62 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
         expanded.map(function (t) { return onExpandSectionAt === null || onExpandSectionAt === void 0 ? void 0 : onExpandSectionAt(t); });
     }, [JSON.stringify(expandedSectionIndices)]);
     (0, react_2.useEffect)(function () {
-        if ((0, react_1.default)(sanitizedExternalSelectedItemIndices, selectedItemIndices))
+        if ((0, react_1.default)(sanitizedExternalSelection, selection))
             return;
-        setSelectedItemIndices(sanitizedExternalSelectedItemIndices);
-    }, [JSON.stringify(sanitizedExternalSelectedItemIndices)]);
+        setSelection(sanitizedExternalSelection);
+    }, [JSON.stringify(sanitizedExternalSelection)]);
     (0, react_2.useEffect)(function () {
-        if (prevSelectedItemIndices === undefined)
+        if (!prevSelection)
             return;
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectedItemIndices);
-    }, [JSON.stringify(selectedItemIndices)]);
-    var fixedClassNames = (0, asClassNameDict_1.default)({
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selection);
+    }, [JSON.stringify(selection)]);
+    var fixedClassNames = getFixedClassNames({ orientation: orientation });
+    var fixedStyles = getFixedStyles({ borderThickness: borderThickness, orientation: orientation });
+    var defaultStyles = useDefaultStyles ? getDefaultStyles({ orientation: orientation }) : {};
+    return (react_2.default.createElement("div", __assign({}, props, { className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root), ref: ref }),
+        react_2.default.createElement(Each_1.default, { in: data }, function (section, sectionIndex) {
+            var _a, _b;
+            var maxVisible = (_a = maxVisibleItems === null || maxVisibleItems === void 0 ? void 0 : maxVisibleItems[sectionIndex]) !== null && _a !== void 0 ? _a : -1;
+            var numItems = section.items.length;
+            var numVisibleItems = maxVisible < 0 ? numItems : Math.min(numItems, maxVisible);
+            var menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness;
+            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: sectionIndex === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
+                }) },
+                HeaderComponent ? (react_2.default.createElement(HeaderComponent, { className: (0, classnames_1.default)(fixedClassNames.header, { collapsed: isCollapsed, expanded: !isCollapsed }), style: (0, styles_1.default)(fixedStyles.header), index: sectionIndex, isCollapsed: isCollapsed, sectionData: section, 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: (0, styles_1.default)(defaultStyles.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_2.default.createElement(List_1.default, { style: (0, styles_1.default)(fixedStyles.list, defaultStyles.list, orientation === 'vertical' ? {
+                        height: isCollapsed ? '0px' : "".concat(menuLength, "px"),
+                        marginTop: isCollapsed ? '0px' : "".concat(itemPadding - borderThickness, "px"),
+                        overflowY: maxVisible < 0 ? 'hidden' : maxVisible < numItems ? 'scroll' : 'hidden',
+                    } : {
+                        marginLeft: isCollapsed ? '0px' : "".concat(itemPadding - borderThickness, "px"),
+                        overflowX: maxVisible < 0 ? 'hidden' : maxVisible < numItems ? 'scroll' : 'hidden',
+                        width: isCollapsed ? '0px' : "".concat(menuLength, "px"),
+                    }), borderThickness: borderThickness, data: section.items, selectionMode: selectionMode, isSelectionTogglable: isSelectionTogglable, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, orientation: orientation, selectedIndices: (_b = selection[sectionIndex]) !== null && _b !== void 0 ? _b : [], 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); } })));
+        })));
+});
+function getFixedClassNames(_a) {
+    var orientation = _a.orientation;
+    return (0, asClassNameDict_1.default)({
         root: (0, classnames_1.default)(orientation),
         header: (0, classnames_1.default)(orientation),
         expandIcon: (0, classnames_1.default)(orientation),
         collapseIcon: (0, classnames_1.default)(orientation),
     });
-    var fixedStyles = (0, asStyleDict_1.default)({
+}
+function getFixedStyles(_a) {
+    var borderThickness = _a.borderThickness, orientation = _a.orientation;
+    return (0, asStyleDict_1.default)({
         root: __assign({ alignItems: 'center', boxSizing: 'border-box', display: 'flex', flex: '0 0 auto', justifyContent: 'flex-start', padding: '0' }, orientation === 'vertical' ? {
             flexDirection: 'column',
             height: 'auto',
@@ -223,16 +255,6 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
         } : {
             height: '100%',
         }),
-        headerLabel: {
-            color: 'inherit',
-            fontFamily: 'inherit',
-            fontSize: 'inherit',
-            fontWeight: 'inherit',
-            letterSpacing: 'inherit',
-            lineHeight: 'inherit',
-            pointerEvents: 'none',
-            transition: 'inherit',
-        },
         expandIcon: {
             margin: '0',
             padding: '0',
@@ -241,22 +263,38 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
             margin: '0',
             padding: '0',
         },
-        list: __assign({ transitionDuration: '100ms', transitionTimingFunction: 'ease-out' }, orientation === 'vertical' ? {
+        list: __assign({}, orientation === 'vertical' ? {
             width: '100%',
-            transitionProperty: 'height, margin',
             top: '100%',
         } : {
             height: '100%',
-            transitionProperty: 'width, margin',
             left: '100%',
         }),
     });
-    var defaultStyles = (0, asStyleDict_1.default)({
+}
+function getDefaultStyles(_a) {
+    var orientation = _a.orientation;
+    return (0, asStyleDict_1.default)({
+        list: __assign({ transitionDuration: '100ms', transitionTimingFunction: 'ease-out' }, orientation === 'vertical' ? {
+            transitionProperty: 'height, margin',
+        } : {
+            transitionProperty: 'width, margin',
+        }),
         header: __assign({ alignItems: 'center', background: '#fff', borderStyle: 'solid', boxSizing: 'border-box', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', padding: '0 10px', transitionDuration: '100ms', transitionProperty: 'transform, opacity, background, color', transitionTimingFunction: 'ease-out' }, orientation === 'vertical' ? {
             height: '50px',
         } : {
             width: '50px',
         }),
+        headerLabel: {
+            color: 'inherit',
+            fontFamily: 'inherit',
+            fontSize: 'inherit',
+            fontWeight: 'inherit',
+            letterSpacing: 'inherit',
+            lineHeight: 'inherit',
+            pointerEvents: 'none',
+            transition: 'inherit',
+        },
         expandIcon: {
             boxSizing: 'border-box',
             display: 'block',
@@ -280,35 +318,5 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
             width: '15px',
         },
     });
-    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(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: sectionIndex === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
-                }) },
-                HeaderComponent ? (react_2.default.createElement(HeaderComponent, { className: (0, classnames_1.default)(fixedClassNames.header, { collapsed: isCollapsed, expanded: !isCollapsed }), style: (0, styles_1.default)(fixedStyles.header), index: sectionIndex, isCollapsed: isCollapsed, section: section, 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_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',
-                    } : {
-                        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, 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 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<I> = ListItemProps<I>\n\nexport type AccordionHeaderProps<I, S extends AccordionSectionData<I> = AccordionSectionData<I>> = HTMLAttributes<HTMLElement> & PropsWithChildren<{\n  section: S\n  index: number\n  isCollapsed: boolean\n  onCustomEvent?: (name: string, info?: any) => void\n}>\n\nexport type AccordionSectionData<I> = {\n  label: string\n  items: I[]\n}\n\nexport type AccordionProps<I, S extends AccordionSectionData<I> = AccordionSectionData<I>> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<I>, '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: S[]\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<I, S>>\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<AccordionItemProps<I>>\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      const { [sectionIndex]: indices, ...rest } = prev\n      const newIndices = (indices ?? []).filter(t => t !== itemIndex)\n\n      return newIndices.length > 0 ? { ...rest, [sectionIndex]: newIndices } : { ...rest }\n    })\n\n    onDeselectAt?.(itemIndex, sectionIndex)\n  }\n\n  const sanitizedExpandedSectionIndices = sanitizeExpandedSectionIndices(externalExpandedSectionIndices)\n  const [expandedSectionIndices, setExpandedSectionIndices] = useState(sanitizedExpandedSectionIndices)\n  const prevExpandedSectionIndices = usePrevious(expandedSectionIndices)\n\n  const sanitizedExternalSelectedItemIndices = sanitizeSelectedItemIndices(externalSelectedItemIndices)\n  const [selectedItemIndices, setSelectedItemIndices] = useState(sanitizedExternalSelectedItemIndices)\n  const prevSelectedItemIndices = usePrevious(selectedItemIndices)\n\n  useEffect(() => {\n    if (isDeepEqual(sanitizedExpandedSectionIndices, expandedSectionIndices)) return\n\n    setExpandedSectionIndices(sanitizedExpandedSectionIndices)\n  }, [JSON.stringify(sanitizedExpandedSectionIndices)])\n\n  useEffect(() => {\n    if (isDeepEqual(expandedSectionIndices, sanitizedExpandedSectionIndices)) return\n\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    if (isDeepEqual(sanitizedExternalSelectedItemIndices, selectedItemIndices)) return\n\n    setSelectedItemIndices(sanitizedExternalSelectedItemIndices)\n  }, [JSON.stringify(sanitizedExternalSelectedItemIndices)])\n\n  useEffect(() => {\n    if (prevSelectedItemIndices === undefined) return\n\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, 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                  index={sectionIndex}\n                  isCollapsed={isCollapsed}\n                  section={section}\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 <I, S extends AccordionSectionData<I> = AccordionSectionData<I>>(props: AccordionProps<I, S> & { 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 ListOrientation, 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 AccordionSectionData<I> = {\n  label: string\n  items: I[]\n}\n\nexport type AccordionSelection = Record<number, number[]>\n\nexport type AccordionItemProps<T> = ListItemProps<T>\n\nexport type AccordionHeaderProps<I, S extends AccordionSectionData<I> = AccordionSectionData<I>> = HTMLAttributes<HTMLElement> & PropsWithChildren<{\n  index: number\n  isCollapsed: boolean\n  sectionData: S\n  onCustomEvent?: (name: string, info?: any) => void\n}>\n\nexport type AccordionProps<I, S extends AccordionSectionData<I> = AccordionSectionData<I>> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<I>, '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: S[]\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 per section when a section expands.\n   * When a value greater than or equal to 0 is specified, only that number of\n   * items 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  selection?: AccordionSelection\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<I, S>>\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<AccordionItemProps<I>>\n\n  /**\n   * Specifies if the component should use default styles.\n   */\n  useDefaultStyles?: boolean\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 sectionIndex Index of the section which the header belongs.\n   * @param eventName Name of the dispatched event.\n   * @param eventInfo Optional info of the dispatched event.\n   */\n  onHeaderCustomEvent?: (sectionIndex: 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?: (selection: AccordionSelection) => void\n}>\n\ntype StylesProps = {\n  borderThickness?: number\n  orientation?: ListOrientation\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,\n  orientation = 'vertical',\n  sectionPadding = 0,\n  selection: externalSelection = {},\n  selectionMode = 'single',\n  useDefaultStyles = false,\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 sanitizeSelection = (selection: AccordionSelection) => {\n    const newValue: AccordionSelection = {}\n\n    for (const sectionIndex in data) {\n      if (!Object.prototype.hasOwnProperty.call(data, sectionIndex)) continue\n\n      const indices = [...selection[sectionIndex] ?? []].sort()\n\n      newValue[Number(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 (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])\n    }\n  }\n\n  const selectAt = (itemIndex: number, sectionIndex: number) => {\n    switch (selectionMode) {\n      case 'multiple':\n        setSelection(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        setSelection({\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    setSelection(prev => {\n      const newValue = { ...prev }\n      newValue[sectionIndex] = prev[sectionIndex].filter(t => t !== itemIndex)\n\n      return newValue\n    })\n\n    onDeselectAt?.(itemIndex, sectionIndex)\n  }\n\n  const sanitizedExpandedSectionIndices = sanitizeExpandedSectionIndices(externalExpandedSectionIndices)\n  const [expandedSectionIndices, setExpandedSectionIndices] = useState(sanitizedExpandedSectionIndices)\n  const prevExpandedSectionIndices = usePrevious(expandedSectionIndices)\n\n  const sanitizedExternalSelection = sanitizeSelection(externalSelection)\n  const [selection, setSelection] = useState(sanitizedExternalSelection)\n  const prevSelection = usePrevious(selection)\n\n  useEffect(() => {\n    if (isDeepEqual(sanitizedExpandedSectionIndices, expandedSectionIndices)) return\n\n    setExpandedSectionIndices(sanitizedExpandedSectionIndices)\n  }, [JSON.stringify(sanitizedExpandedSectionIndices)])\n\n  useEffect(() => {\n    if (!prevExpandedSectionIndices) return\n\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    if (isDeepEqual(sanitizedExternalSelection, selection)) return\n\n    setSelection(sanitizedExternalSelection)\n  }, [JSON.stringify(sanitizedExternalSelection)])\n\n  useEffect(() => {\n    if (!prevSelection) return\n\n    onSelectionChange?.(selection)\n  }, [JSON.stringify(selection)])\n\n  const fixedClassNames = getFixedClassNames({ orientation })\n  const fixedStyles = getFixedStyles({ borderThickness, orientation })\n  const defaultStyles: Record<string, any> = useDefaultStyles ? getDefaultStyles({ orientation }) : {}\n\n  return (\n    <div\n      {...props}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n      ref={ref}\n    >\n      <Each in={data}>\n        {(section, sectionIndex) => {\n          const maxVisible = maxVisibleItems?.[sectionIndex] ?? -1\n          const numItems = section.items.length\n          const numVisibleItems = maxVisible < 0 ? numItems : Math.min(numItems, maxVisible)\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                  index={sectionIndex}\n                  isCollapsed={isCollapsed}\n                  sectionData={section}\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={styles(defaultStyles.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, defaultStyles.list, orientation === 'vertical' ? {\n                  height: isCollapsed ? '0px' : `${menuLength}px`,\n                  marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowY: maxVisible < 0 ? 'hidden' : maxVisible < numItems ? 'scroll' : 'hidden',\n                } : {\n                  marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowX: maxVisible < 0 ? 'hidden' : maxVisible < 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={selection[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 <I, S extends AccordionSectionData<I> = AccordionSectionData<I>>(props: AccordionProps<I, S> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nfunction getFixedClassNames({ orientation }: StylesProps) {\n  return asClassNameDict({\n    root: classNames(orientation),\n    header: classNames(orientation),\n    expandIcon: classNames(orientation),\n    collapseIcon: classNames(orientation),\n  })\n}\n\nfunction getFixedStyles({ borderThickness, orientation }: StylesProps) {\n  return 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    expandIcon: {\n      margin: '0',\n      padding: '0',\n    },\n    collapseIcon: {\n      margin: '0',\n      padding: '0',\n    },\n    list: {\n      ...orientation === 'vertical' ? {\n        width: '100%',\n        top: '100%',\n      } : {\n        height: '100%',\n        left: '100%',\n      },\n    },\n  })\n}\n\nfunction getDefaultStyles({ orientation }: StylesProps) {\n  return asStyleDict({\n    list: {\n      transitionDuration: '100ms',\n      transitionTimingFunction: 'ease-out',\n      ...orientation === 'vertical' ? {\n        transitionProperty: 'height, margin',\n      } : {\n        transitionProperty: 'width, margin',\n      },\n    },\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    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      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"]}

package/lib/Dropdown.d.ts

@@ -1,5 +1,5 @@
 import React, { type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
-import { type ListItemProps, type ListProps } from './List';
+import { type ListItemProps, type ListOrientation, type ListProps } from './List';
 export type DropdownItemData = {
     label?: string;
 };
@@ -38,6 +38,10 @@ export type DropdownProps<T extends DropdownItemData = DropdownItemData> = HTMLA
      * visible when the component expands.
      */
     maxVisibleItems?: number;
+    /**
+     * Specifies if the component should use default styles.
+     */
+    useDefaultStyles?: boolean;
     /**
      * React component type to be used for generating the toggle element inside
      * the component. When absent, one will be generated automatically.
@@ -62,7 +66,7 @@ declare const _default: <T extends DropdownItemData = DropdownItemData>(props: R
     isSelectionTogglable?: boolean | undefined;
     itemLength?: number | undefined;
     itemPadding?: number | undefined;
-    orientation?: ("horizontal" | "vertical") | undefined;
+    orientation?: ListOrientation | undefined;
     selectedIndices?: number[] | undefined;
     selectionMode?: "none" | "multiple" | "single" | undefined;
     itemComponentType?: React.ComponentType<ListItemProps<T>> | undefined;
@@ -102,6 +106,10 @@ declare const _default: <T extends DropdownItemData = DropdownItemData>(props: R
      * visible when the component expands.
      */
     maxVisibleItems?: number | undefined;
+    /**
+     * Specifies if the component should use default styles.
+     */
+    useDefaultStyles?: boolean | undefined;
     /**
      * React component type to be used for generating the toggle element inside
      * the component. When absent, one will be generated automatically.

package/lib/Dropdown.js

@@ -70,6 +70,7 @@ var react_2 = __importStar(require("react"));
 var FlatSVG_1 = __importDefault(require("./FlatSVG"));
 var List_1 = __importDefault(require("./List"));
 var useElementRect_1 = __importDefault(require("./hooks/useElementRect"));
+var usePrevious_1 = __importDefault(require("./hooks/usePrevious"));
 var asClassNameDict_1 = __importDefault(require("./utils/asClassNameDict"));
 var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
 var cloneStyledElement_1 = __importDefault(require("./utils/cloneStyledElement"));
@@ -81,7 +82,7 @@ var styles_1 = __importDefault(require("./utils/styles"));
  */
 exports.default = (0, react_2.forwardRef)(function (_a, ref) {
     var _b;
-    var children = _a.children, className = _a.className, style = _a.style, _c = _a.borderThickness, borderThickness = _c === void 0 ? 0 : _c, collapseIconSvg = _a.collapseIconSvg, _d = _a.collapsesOnSelect, collapsesOnSelect = _d === void 0 ? true : _d, data = _a.data, label = _a.label, expandIconSvg = _a.expandIconSvg, _e = _a.isInverted, isInverted = _e === void 0 ? false : _e, _f = _a.isSelectionTogglable, isSelectionTogglable = _f === void 0 ? false : _f, itemComponentType = _a.itemComponentType, externalItemLength = _a.itemLength, _g = _a.itemPadding, itemPadding = _g === void 0 ? 0 : _g, _h = _a.maxVisibleItems, maxVisibleItems = _h === void 0 ? -1 : _h, _j = _a.orientation, orientation = _j === void 0 ? 'vertical' : _j, _k = _a.selectedIndices, externalSelectedIndices = _k === void 0 ? [] : _k, _l = _a.selectionMode, selectionMode = _l === void 0 ? 'single' : _l, ToggleComponent = _a.toggleComponentType, onActivateAt = _a.onActivateAt, onDeselectAt = _a.onDeselectAt, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, onToggleCustomEvent = _a.onToggleCustomEvent, props = __rest(_a, ["children", "className", "style", "borderThickness", "collapseIconSvg", "collapsesOnSelect", "data", "label", "expandIconSvg", "isInverted", "isSelectionTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "selectedIndices", "selectionMode", "toggleComponentType", "onActivateAt", "onDeselectAt", "onSelectAt", "onSelectionChange", "onToggleCustomEvent"]);
+    var children = _a.children, className = _a.className, style = _a.style, _c = _a.borderThickness, borderThickness = _c === void 0 ? 0 : _c, collapseIconSvg = _a.collapseIconSvg, _d = _a.collapsesOnSelect, collapsesOnSelect = _d === void 0 ? true : _d, data = _a.data, label = _a.label, expandIconSvg = _a.expandIconSvg, _e = _a.isInverted, isInverted = _e === void 0 ? false : _e, _f = _a.isSelectionTogglable, isSelectionTogglable = _f === void 0 ? false : _f, itemComponentType = _a.itemComponentType, externalItemLength = _a.itemLength, _g = _a.itemPadding, itemPadding = _g === void 0 ? 0 : _g, _h = _a.maxVisibleItems, maxVisibleItems = _h === void 0 ? -1 : _h, _j = _a.orientation, orientation = _j === void 0 ? 'vertical' : _j, _k = _a.selectedIndices, externalSelectedIndices = _k === void 0 ? [] : _k, _l = _a.selectionMode, selectionMode = _l === void 0 ? 'single' : _l, _m = _a.useDefaultStyles, useDefaultStyles = _m === void 0 ? false : _m, ToggleComponent = _a.toggleComponentType, onActivateAt = _a.onActivateAt, onDeselectAt = _a.onDeselectAt, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, onToggleCustomEvent = _a.onToggleCustomEvent, props = __rest(_a, ["children", "className", "style", "borderThickness", "collapseIconSvg", "collapsesOnSelect", "data", "label", "expandIconSvg", "isInverted", "isSelectionTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "selectedIndices", "selectionMode", "useDefaultStyles", "toggleComponentType", "onActivateAt", "onDeselectAt", "onSelectAt", "onSelectionChange", "onToggleCustomEvent"]);
     var isIndexOutOfRange = function (index) {
         if (index >= data.length)
             return true;
@@ -138,8 +139,10 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
         collapse();
     };
     var bodyRef = (0, react_2.useRef)(null);
-    var _m = __read((0, react_2.useState)(sanitizeSelectedIndices(externalSelectedIndices)), 2), selectedIndices = _m[0], setSelectedIndices = _m[1];
-    var _o = __read((0, react_2.useState)(true), 2), isCollapsed = _o[0], setIsCollapsed = _o[1];
+    var sanitizedExternalSelectedIndices = sanitizeSelectedIndices(externalSelectedIndices);
+    var _o = __read((0, react_2.useState)(sanitizedExternalSelectedIndices), 2), selectedIndices = _o[0], setSelectedIndices = _o[1];
+    var prevSelectedIndices = (0, usePrevious_1.default)(selectedIndices);
+    var _p = __read((0, react_2.useState)(true), 2), isCollapsed = _p[0], setIsCollapsed = _p[1];
     var rect = (0, useElementRect_1.default)(bodyRef);
     (0, react_2.useEffect)(function () {
         window.addEventListener('click', clickOutsideHandler);
@@ -148,19 +151,37 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
         };
     }, [isCollapsed]);
     (0, react_2.useEffect)(function () {
-        var newValue = sanitizeSelectedIndices(externalSelectedIndices);
-        if ((0, react_1.default)(newValue, selectedIndices))
+        if ((0, react_1.default)(sanitizedExternalSelectedIndices, selectedIndices))
             return;
-        setSelectedIndices(newValue);
-    }, [JSON.stringify(sanitizeSelectedIndices(externalSelectedIndices))]);
+        setSelectedIndices(sanitizedExternalSelectedIndices);
+    }, [JSON.stringify(sanitizedExternalSelectedIndices)]);
     (0, react_2.useEffect)(function () {
+        if (!prevSelectedIndices)
+            return;
         onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectedIndices);
     }, [JSON.stringify(sanitizeSelectedIndices(selectedIndices))]);
     var itemLength = externalItemLength !== null && externalItemLength !== void 0 ? externalItemLength : (orientation === 'vertical' ? rect.height : rect.width);
     var numItems = data.length;
     var numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems);
     var menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness;
-    var fixedClassNames = (0, asClassNameDict_1.default)({
+    var fixedClassNames = getFixedClassNames({ isCollapsed: isCollapsed, isSelectionTogglable: isSelectionTogglable, orientation: orientation });
+    var fixedStyles = getFixedStyles({ borderThickness: borderThickness, isCollapsed: isCollapsed, isInverted: isInverted, itemPadding: itemPadding, maxVisibleItems: maxVisibleItems, menuLength: menuLength, numItems: numItems, orientation: orientation });
+    var defaultStyles = useDefaultStyles ? getDefaultStyles({}) : {};
+    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", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }),
+        react_2.default.createElement("div", { ref: bodyRef, style: (0, styles_1.default)(fixedStyles.body) },
+            ToggleComponent ? (react_2.default.createElement(ToggleComponent, { className: (0, classnames_1.default)(fixedClassNames.toggle), style: (0, styles_1.default)(fixedStyles.toggle), onClick: function () { return toggle(); }, onCustomEvent: function (name, info) { return onToggleCustomEvent === null || onToggleCustomEvent === void 0 ? void 0 : onToggleCustomEvent(name, info); } })) : (react_2.default.createElement("button", { className: (0, classnames_1.default)(fixedClassNames.toggle), style: (0, styles_1.default)(fixedStyles.toggle, defaultStyles.toggle), onClick: function () { return toggle(); } },
+                react_2.default.createElement("label", { style: fixedStyles.toggleLabel, dangerouslySetInnerHTML: { __html: (_b = label === null || label === void 0 ? void 0 : label(selectedIndices)) !== null && _b !== void 0 ? _b : (selectedIndices.length > 0 ? selectedIndices.map(function (t) { return data[t].label; }).join(', ') : '') } }),
+                (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_2.default.createElement(List_1.default, { className: fixedClassNames.list, style: (0, styles_1.default)(fixedStyles.list), borderThickness: borderThickness, data: data, isSelectionTogglable: isSelectionTogglable, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, orientation: orientation, selectedIndices: selectedIndices, selectionMode: selectionMode, onActivateAt: onActivateAt, onDeselectAt: onDeselectAt, onSelectAt: selectAtHandler, onSelectionChange: selectionChangeHandler }))));
+});
+function getFixedClassNames(_a) {
+    var isCollapsed = _a.isCollapsed, isSelectionTogglable = _a.isSelectionTogglable, orientation = _a.orientation;
+    return (0, asClassNameDict_1.default)({
         root: (0, classnames_1.default)(orientation, {
             togglable: isSelectionTogglable,
             collapsed: isCollapsed,
@@ -187,7 +208,10 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
             expanded: !isCollapsed,
         }),
     });
-    var fixedStyles = (0, asStyleDict_1.default)({
+}
+function getFixedStyles(_a) {
+    var _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, isCollapsed = _a.isCollapsed, isInverted = _a.isInverted, _c = _a.itemPadding, itemPadding = _c === void 0 ? 0 : _c, _d = _a.maxVisibleItems, maxVisibleItems = _d === void 0 ? 0 : _d, menuLength = _a.menuLength, _e = _a.numItems, numItems = _e === void 0 ? 0 : _e, orientation = _a.orientation;
+    return (0, asStyleDict_1.default)({
         root: __assign({ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', overflow: 'visible' }, orientation === 'vertical' ? {
             flexDirection: isInverted ? 'column-reverse' : 'column',
         } : {
@@ -233,7 +257,10 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
             marginLeft: "".concat(itemPadding - borderThickness, "px"),
         })),
     });
-    var defaultStyles = (0, asStyleDict_1.default)({
+}
+function getDefaultStyles(_a) {
+    var props = __rest(_a, []);
+    return (0, asStyleDict_1.default)({
         toggle: {
             alignItems: 'center',
             background: '#fff',
@@ -259,16 +286,5 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
             width: '15px',
         },
     });
-    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", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }),
-        react_2.default.createElement("div", { ref: bodyRef, style: (0, styles_1.default)(fixedStyles.body) },
-            ToggleComponent ? (react_2.default.createElement(ToggleComponent, { className: (0, classnames_1.default)(fixedClassNames.toggle), style: (0, styles_1.default)(fixedStyles.toggle), onClick: function () { return toggle(); }, onCustomEvent: function (name, info) { return onToggleCustomEvent === null || onToggleCustomEvent === void 0 ? void 0 : onToggleCustomEvent(name, info); } })) : (react_2.default.createElement("button", { className: (0, classnames_1.default)(fixedClassNames.toggle), style: (0, styles_1.default)(fixedStyles.toggle, defaultStyles.toggle), onClick: function () { return toggle(); } },
-                react_2.default.createElement("label", { style: fixedStyles.toggleLabel, dangerouslySetInnerHTML: { __html: (_b = label === null || label === void 0 ? void 0 : label(selectedIndices)) !== null && _b !== void 0 ? _b : (selectedIndices.length > 0 ? selectedIndices.map(function (t) { return data[t].label; }).join(', ') : '') } }),
-                (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_2.default.createElement(List_1.default, { className: fixedClassNames.list, style: (0, styles_1.default)(fixedStyles.list), borderThickness: borderThickness, data: data, isSelectionTogglable: isSelectionTogglable, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, orientation: orientation, selectedIndices: selectedIndices, selectionMode: selectionMode, onActivateAt: onActivateAt, onDeselectAt: onDeselectAt, onSelectAt: selectAtHandler, onSelectionChange: selectionChangeHandler }))));
-});
+}
 //# sourceMappingURL=Dropdown.js.map

package/lib/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isDeepEqual from 'fast-deep-equal/react'\nimport React, { forwardRef, useEffect, useRef, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps, type ListProps } from './List'\nimport useElementRect from './hooks/useElementRect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type DropdownItemData = {\n  label?: string\n}\n\nexport type DropdownToggleProps = HTMLAttributes<HTMLElement> & {\n  onCustomEvent?: (name: string, info?: any) => void\n}\n\nexport type DropdownItemProps<T extends DropdownItemData = DropdownItemData> = ListItemProps<T>\n\nexport type DropdownProps<T extends DropdownItemData = DropdownItemData> = HTMLAttributes<HTMLDivElement> & ListProps<T> & PropsWithChildren<{\n  /**\n   * SVG markup to be put in the dropdown button as the collapse icon.\n   */\n  collapseIconSvg?: string\n\n  /**\n   * Specifies if the dropdown should be collapsed upon selection. This only\n   * works if `selectionMode` is `single`.\n   */\n  collapsesOnSelect?: boolean\n\n  /**\n   * The label to appear on the dropdown toggle button.\n   */\n  label?: (selectedIndices: number[]) => string\n\n  /**\n   * SVG markup to be put in the dropdown button as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n   * Supports all orientations.\n   */\n  isInverted?: boolean\n\n  /**\n   * Maximum number of items that are viside when the component expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time, and a scrollbar will appear to scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when the component expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * React component type to be used for generating the toggle element inside\n   * the component. When absent, one will be generated automatically.\n   */\n  toggleComponentType?: ComponentType<DropdownToggleProps>\n\n  /**\n   * Handler invoked when the toggle dispatches a custom event.\n   *\n   * @param eventName Name of the dispatched custom event.\n   * @param eventInfo Optional info of the dispatched custom event.\n   */\n  onToggleCustomEvent?: (eventName: string, eventInfo?: any) => 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  collapseIconSvg,\n  collapsesOnSelect = true,\n  data,\n  label,\n  expandIconSvg,\n  isInverted = false,\n  isSelectionTogglable = false,\n  itemComponentType,\n  itemLength: externalItemLength,\n  itemPadding = 0,\n  maxVisibleItems = -1,\n  orientation = 'vertical',\n  selectedIndices: externalSelectedIndices = [],\n  selectionMode = 'single',\n  toggleComponentType: ToggleComponent,\n  onActivateAt,\n  onDeselectAt,\n  onSelectAt,\n  onSelectionChange,\n  onToggleCustomEvent,\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 sanitizeSelectedIndices = (indices: number[]) => indices.sort().filter(t => !isIndexOutOfRange(t))\n\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 selectionChangeHandler = (selection: number[]) => {\n    const newValue = selection.sort()\n\n    if (isDeepEqual(newValue, selectedIndices)) return\n\n    setSelectedIndices(newValue)\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(sanitizeSelectedIndices(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    const newValue = sanitizeSelectedIndices(externalSelectedIndices)\n\n    if (isDeepEqual(newValue, selectedIndices)) return\n\n    setSelectedIndices(newValue)\n  }, [JSON.stringify(sanitizeSelectedIndices(externalSelectedIndices))])\n\n  useEffect(() => {\n    onSelectionChange?.(selectedIndices)\n  }, [JSON.stringify(sanitizeSelectedIndices(selectedIndices))])\n\n  const itemLength = externalItemLength ?? (orientation === 'vertical' ? rect.height : rect.width)\n  const numItems = data.length\n  const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n  const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation, {\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    toggle: classNames(orientation, {\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    expandIcon: classNames(orientation, {\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    collapseIcon: classNames(orientation, {\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    list: classNames({\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      alignItems: 'center',\n      display: 'flex',\n      justifyContent: 'flex-start',\n      overflow: 'visible',\n      ...orientation === 'vertical' ? {\n        flexDirection: isInverted ? 'column-reverse' : 'column',\n      } : {\n        flexDirection: isInverted ? 'row-reverse' : 'row',\n      },\n    },\n    body: {\n      height: '100%',\n      width: '100%',\n    },\n    toggle: {\n      borderWidth: `${borderThickness}px`,\n      cursor: 'pointer',\n      height: '100%',\n      left: '0',\n      margin: '0',\n      outline: 'none',\n      position: 'absolute',\n      top: '0',\n      width: '100%',\n      zIndex: '1',\n    },\n    toggleLabel: {\n      fontFamily: 'inherit',\n      fontSize: 'inherit',\n      fontWeight: 'inherit',\n      letterSpacing: 'inherit',\n      lineHeight: 'inherit',\n      pointerEvents: 'none',\n    },\n    expandIcon: {\n\n    },\n    collapseIcon: {\n\n    },\n    list: {\n      position: 'absolute',\n      ...orientation === 'vertical' ? {\n        transition: 'height 100ms ease-out',\n        width: '100%',\n        height: isCollapsed ? '0px' : `${menuLength}px`,\n        overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginBottom: `${itemPadding - borderThickness}px`,\n          bottom: '100%',\n        } : {\n          top: '100%',\n          marginTop: `${itemPadding - borderThickness}px`,\n        },\n      } : {\n        transition: 'width 100ms ease-out',\n        width: isCollapsed ? '0px' : `${menuLength}px`,\n        height: '100%',\n        overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginRight: `${itemPadding - borderThickness}px`,\n          right: '100%',\n        } : {\n          left: '100%',\n          marginLeft: `${itemPadding - borderThickness}px`,\n        },\n      },\n    },\n  })\n\n  const defaultStyles = asStyleDict({\n    toggle: {\n      alignItems: 'center',\n      background: '#fff',\n      boxSizing: 'border-box',\n      color: '#000',\n      display: 'flex',\n      flexDirection: 'row',\n      fontSize: '16px',\n      justifyContent: 'space-between',\n      margin: '0',\n      padding: '0 10px',\n    },\n    expandIcon: {\n      height: '15px',\n      margin: '0',\n      padding: '0',\n      width: '15px',\n    },\n    collapseIcon: {\n      height: '15px',\n      margin: '0',\n      padding: '0',\n      width: '15px',\n    },\n  })\n\n  const expandIconComponent = expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>\n  const collapseIconComponent = collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles.collapseIcon}/> : expandIconComponent\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      <div ref={bodyRef} style={styles(fixedStyles.body)}>\n        {ToggleComponent ? (\n          <ToggleComponent\n            className={classNames(fixedClassNames.toggle)}\n            style={styles(fixedStyles.toggle)}\n            onClick={() => toggle()}\n            onCustomEvent={(name, info) => onToggleCustomEvent?.(name, info)}\n          />\n        ) : (\n          <button\n            className={classNames(fixedClassNames.toggle)}\n            style={styles(fixedStyles.toggle, defaultStyles.toggle)}\n            onClick={() => toggle()}\n          >\n            <label style={fixedStyles.toggleLabel} dangerouslySetInnerHTML={{ __html: label?.(selectedIndices) ?? (selectedIndices.length > 0 ? selectedIndices.map(t => data[t].label).join(', ') : '') }}/>\n            {cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n              className: classNames(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),\n              style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n            })}\n          </button>\n        )}\n        <List\n          className={fixedClassNames.list}\n          style={styles(fixedStyles.list)}\n          borderThickness={borderThickness}\n          data={data}\n          isSelectionTogglable={isSelectionTogglable}\n          itemComponentType={itemComponentType}\n          itemLength={itemLength}\n          itemPadding={itemPadding}\n          orientation={orientation}\n          selectedIndices={selectedIndices}\n          selectionMode={selectionMode}\n          onActivateAt={onActivateAt}\n          onDeselectAt={onDeselectAt}\n          onSelectAt={selectAtHandler}\n          onSelectionChange={selectionChangeHandler}\n        />\n      </div>\n    </div>\n  )\n}) as <T extends DropdownItemData = DropdownItemData>(props: DropdownProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isDeepEqual from 'fast-deep-equal/react'\nimport React, { forwardRef, useEffect, useRef, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps, type ListOrientation, type ListProps } from './List'\nimport useElementRect from './hooks/useElementRect'\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 DropdownItemData = {\n  label?: string\n}\n\nexport type DropdownToggleProps = HTMLAttributes<HTMLElement> & {\n  onCustomEvent?: (name: string, info?: any) => void\n}\n\nexport type DropdownItemProps<T extends DropdownItemData = DropdownItemData> = ListItemProps<T>\n\nexport type DropdownProps<T extends DropdownItemData = DropdownItemData> = HTMLAttributes<HTMLDivElement> & ListProps<T> & PropsWithChildren<{\n  /**\n   * SVG markup to be put in the dropdown button as the collapse icon.\n   */\n  collapseIconSvg?: string\n\n  /**\n   * Specifies if the dropdown should be collapsed upon selection. This only\n   * works if `selectionMode` is `single`.\n   */\n  collapsesOnSelect?: boolean\n\n  /**\n   * The label to appear on the dropdown toggle button.\n   */\n  label?: (selectedIndices: number[]) => string\n\n  /**\n   * SVG markup to be put in the dropdown button as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n   * Supports all orientations.\n   */\n  isInverted?: boolean\n\n  /**\n   * Maximum number of items that are viside when the component expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time, and a scrollbar will appear to scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when the component expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Specifies if the component should use default styles.\n   */\n  useDefaultStyles?: boolean\n\n  /**\n   * React component type to be used for generating the toggle element inside\n   * the component. When absent, one will be generated automatically.\n   */\n  toggleComponentType?: ComponentType<DropdownToggleProps>\n\n  /**\n   * Handler invoked when the toggle dispatches a custom event.\n   *\n   * @param eventName Name of the dispatched custom event.\n   * @param eventInfo Optional info of the dispatched custom event.\n   */\n  onToggleCustomEvent?: (eventName: string, eventInfo?: any) => void\n}>\n\ntype StylesProps = {\n  borderThickness?: number\n  isCollapsed?: boolean\n  isInverted?: boolean\n  isSelectionTogglable?: boolean\n  itemPadding?: number\n  maxVisibleItems?: number\n  menuLength?: number\n  numItems?: number\n  orientation?: ListOrientation\n}\n\n/**\n * A dropdown menu component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide data and item\n * component type to this component to automatically generate menu items.\n */\nexport default forwardRef(({\n  children,\n  className,\n  style,\n  borderThickness = 0,\n  collapseIconSvg,\n  collapsesOnSelect = true,\n  data,\n  label,\n  expandIconSvg,\n  isInverted = false,\n  isSelectionTogglable = false,\n  itemComponentType,\n  itemLength: externalItemLength,\n  itemPadding = 0,\n  maxVisibleItems = -1,\n  orientation = 'vertical',\n  selectedIndices: externalSelectedIndices = [],\n  selectionMode = 'single',\n  useDefaultStyles = false,\n  toggleComponentType: ToggleComponent,\n  onActivateAt,\n  onDeselectAt,\n  onSelectAt,\n  onSelectionChange,\n  onToggleCustomEvent,\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 sanitizeSelectedIndices = (indices: number[]) => indices.sort().filter(t => !isIndexOutOfRange(t))\n\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 selectionChangeHandler = (selection: number[]) => {\n    const newValue = selection.sort()\n\n    if (isDeepEqual(newValue, selectedIndices)) return\n\n    setSelectedIndices(newValue)\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 sanitizedExternalSelectedIndices = sanitizeSelectedIndices(externalSelectedIndices)\n  const [selectedIndices, setSelectedIndices] = useState(sanitizedExternalSelectedIndices)\n  const prevSelectedIndices = usePrevious(selectedIndices)\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 (isDeepEqual(sanitizedExternalSelectedIndices, selectedIndices)) return\n\n    setSelectedIndices(sanitizedExternalSelectedIndices)\n  }, [JSON.stringify(sanitizedExternalSelectedIndices)])\n\n  useEffect(() => {\n    if (!prevSelectedIndices) return\n\n    onSelectionChange?.(selectedIndices)\n  }, [JSON.stringify(sanitizeSelectedIndices(selectedIndices))])\n\n  const itemLength = externalItemLength ?? (orientation === 'vertical' ? rect.height : rect.width)\n  const numItems = data.length\n  const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n  const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n\n  const fixedClassNames = getFixedClassNames({ isCollapsed, isSelectionTogglable, orientation })\n  const fixedStyles = getFixedStyles({ borderThickness, isCollapsed, isInverted, itemPadding, maxVisibleItems, menuLength, numItems, orientation })\n  const defaultStyles: Record<string, any> = useDefaultStyles ? getDefaultStyles({}) : {}\n\n  const expandIconComponent = expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>\n  const collapseIconComponent = collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles.collapseIcon}/> : expandIconComponent\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      <div ref={bodyRef} style={styles(fixedStyles.body)}>\n        {ToggleComponent ? (\n          <ToggleComponent\n            className={classNames(fixedClassNames.toggle)}\n            style={styles(fixedStyles.toggle)}\n            onClick={() => toggle()}\n            onCustomEvent={(name, info) => onToggleCustomEvent?.(name, info)}\n          />\n        ) : (\n          <button\n            className={classNames(fixedClassNames.toggle)}\n            style={styles(fixedStyles.toggle, defaultStyles.toggle)}\n            onClick={() => toggle()}\n          >\n            <label style={fixedStyles.toggleLabel} dangerouslySetInnerHTML={{ __html: label?.(selectedIndices) ?? (selectedIndices.length > 0 ? selectedIndices.map(t => data[t].label).join(', ') : '') }}/>\n            {cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n              className: classNames(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),\n              style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n            })}\n          </button>\n        )}\n        <List\n          className={fixedClassNames.list}\n          style={styles(fixedStyles.list)}\n          borderThickness={borderThickness}\n          data={data}\n          isSelectionTogglable={isSelectionTogglable}\n          itemComponentType={itemComponentType}\n          itemLength={itemLength}\n          itemPadding={itemPadding}\n          orientation={orientation}\n          selectedIndices={selectedIndices}\n          selectionMode={selectionMode}\n          onActivateAt={onActivateAt}\n          onDeselectAt={onDeselectAt}\n          onSelectAt={selectAtHandler}\n          onSelectionChange={selectionChangeHandler}\n        />\n      </div>\n    </div>\n  )\n}) as <T extends DropdownItemData = DropdownItemData>(props: DropdownProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nfunction getFixedClassNames({ isCollapsed, isSelectionTogglable, orientation }: StylesProps) {\n  return asClassNameDict({\n    root: classNames(orientation, {\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    toggle: classNames(orientation, {\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    expandIcon: classNames(orientation, {\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    collapseIcon: classNames(orientation, {\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    list: classNames({\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n  })\n}\n\nfunction getFixedStyles({ borderThickness = 0, isCollapsed, isInverted, itemPadding = 0, maxVisibleItems = 0, menuLength, numItems = 0, orientation }: StylesProps) {\n  return asStyleDict({\n    root: {\n      alignItems: 'center',\n      display: 'flex',\n      justifyContent: 'flex-start',\n      overflow: 'visible',\n      ...orientation === 'vertical' ? {\n        flexDirection: isInverted ? 'column-reverse' : 'column',\n      } : {\n        flexDirection: isInverted ? 'row-reverse' : 'row',\n      },\n    },\n    body: {\n      height: '100%',\n      width: '100%',\n    },\n    toggle: {\n      borderWidth: `${borderThickness}px`,\n      cursor: 'pointer',\n      height: '100%',\n      left: '0',\n      margin: '0',\n      outline: 'none',\n      position: 'absolute',\n      top: '0',\n      width: '100%',\n      zIndex: '1',\n    },\n    toggleLabel: {\n      fontFamily: 'inherit',\n      fontSize: 'inherit',\n      fontWeight: 'inherit',\n      letterSpacing: 'inherit',\n      lineHeight: 'inherit',\n      pointerEvents: 'none',\n    },\n    expandIcon: {\n\n    },\n    collapseIcon: {\n\n    },\n    list: {\n      position: 'absolute',\n      ...orientation === 'vertical' ? {\n        transition: 'height 100ms ease-out',\n        width: '100%',\n        height: isCollapsed ? '0px' : `${menuLength}px`,\n        overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginBottom: `${itemPadding - borderThickness}px`,\n          bottom: '100%',\n        } : {\n          top: '100%',\n          marginTop: `${itemPadding - borderThickness}px`,\n        },\n      } : {\n        transition: 'width 100ms ease-out',\n        width: isCollapsed ? '0px' : `${menuLength}px`,\n        height: '100%',\n        overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginRight: `${itemPadding - borderThickness}px`,\n          right: '100%',\n        } : {\n          left: '100%',\n          marginLeft: `${itemPadding - borderThickness}px`,\n        },\n      },\n    },\n  })\n}\n\nfunction getDefaultStyles({ ...props }: StylesProps) {\n  return 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"]}

package/lib/List.d.ts

@@ -1,10 +1,10 @@
 import React, { type ComponentType, type HTMLAttributes, type ReactElement, type Ref } from 'react';
-type Orientation = 'horizontal' | 'vertical';
+export type ListOrientation = 'horizontal' | 'vertical';
 export type ListItemProps<T> = HTMLAttributes<HTMLElement> & {
     data: T;
     index: number;
     isSelected: boolean;
-    orientation: Orientation;
+    orientation: ListOrientation;
     onCustomEvent?: (name: string, info?: any) => void;
 };
 export type ListProps<T> = HTMLAttributes<HTMLDivElement> & {
@@ -33,7 +33,7 @@ export type ListProps<T> = HTMLAttributes<HTMLDivElement> & {
     /**
      * Orientation of the component.
      */
-    orientation?: Orientation;
+    orientation?: ListOrientation;
     /**
      * The selected indices. If `selectionMode` is `single`, only only the first
      * value will be used.
@@ -114,7 +114,7 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Orientation of the component.
      */
-    orientation?: Orientation | undefined;
+    orientation?: ListOrientation | undefined;
     /**
      * The selected indices. If `selectionMode` is `single`, only only the first
      * value will be used.

package/lib/List.js

@@ -145,17 +145,35 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
     }, [JSON.stringify(sanitizedExternalSelectedIndices)]);
     (0, react_2.useEffect)(function () {
         var _a;
-        if (selectionMode === 'none')
-            return;
         if (prevSelectedIndices === undefined)
             return;
+        if (selectionMode === 'none')
+            return;
         var deselected = (_a = prevSelectedIndices === null || prevSelectedIndices === void 0 ? void 0 : prevSelectedIndices.filter(function (t) { return selectedIndices.indexOf(t) === -1; })) !== null && _a !== void 0 ? _a : [];
         var selected = selectedIndices.filter(function (t) { return (prevSelectedIndices === null || prevSelectedIndices === void 0 ? void 0 : prevSelectedIndices.indexOf(t)) === -1; });
         deselected.map(function (t) { return onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(t); });
         selected.map(function (t) { return onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(t); });
         onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectedIndices);
     }, [JSON.stringify(selectedIndices)]);
-    var fixedClassNames = (0, asClassNameDict_1.default)({
+    var fixedClassNames = getFixedClassNames({ isSelectionTogglable: isSelectionTogglable, orientation: orientation });
+    var fixedStyles = getFixedStyles({ borderThickness: borderThickness, orientation: orientation });
+    return (react_2.default.createElement("div", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }), ItemComponent && (react_2.default.createElement(Each_1.default, { in: data }, function (val, idx) { return (react_2.default.createElement(ItemComponent, { className: (0, classnames_1.default)(fixedClassNames.item, {
+            selected: isSelectedAt(idx),
+        }), style: (0, styles_1.default)(fixedStyles.item, __assign(__assign({ pointerEvents: isSelectionTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto' }, orientation === 'vertical' ? {
+            height: itemLength !== undefined ? "".concat(itemLength, "px") : undefined,
+            marginTop: "".concat(idx === 0 ? 0 : -borderThickness, "px"),
+        } : {
+            marginLeft: "".concat(idx === 0 ? 0 : -borderThickness, "px"),
+            width: itemLength !== undefined ? "".concat(itemLength, "px") : undefined,
+        }), idx >= data.length - 1 ? {} : __assign({}, orientation === 'vertical' ? {
+            marginBottom: "".concat(itemPadding, "px"),
+        } : {
+            marginRight: "".concat(itemPadding, "px"),
+        }))), "data-index": idx, data: val, index: idx, isSelected: isSelectedAt(idx), orientation: orientation, onCustomEvent: function (name, info) { return onItemCustomEvent === null || onItemCustomEvent === void 0 ? void 0 : onItemCustomEvent(idx, name, info); }, onClick: function () { return activateAt(idx); } })); }))));
+});
+function getFixedClassNames(_a) {
+    var orientation = _a.orientation, isSelectionTogglable = _a.isSelectionTogglable;
+    return (0, asClassNameDict_1.default)({
         root: (0, classnames_1.default)(orientation, {
             togglable: isSelectionTogglable,
         }),
@@ -163,7 +181,10 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
             togglable: isSelectionTogglable,
         }),
     });
-    var fixedStyles = (0, asStyleDict_1.default)({
+}
+function getFixedStyles(_a) {
+    var _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, orientation = _a.orientation;
+    return (0, asStyleDict_1.default)({
         root: {
             alignItems: 'flex-start',
             counterReset: 'item-counter',
@@ -179,18 +200,5 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
             height: '100%',
         }),
     });
-    return (react_2.default.createElement("div", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }), ItemComponent && (react_2.default.createElement(Each_1.default, { in: data }, function (val, idx) { return (react_2.default.createElement(ItemComponent, { className: (0, classnames_1.default)(fixedClassNames.item, {
-            selected: isSelectedAt(idx),
-        }), style: (0, styles_1.default)(fixedStyles.item, __assign(__assign({ pointerEvents: isSelectionTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto' }, orientation === 'vertical' ? {
-            height: itemLength !== undefined ? "".concat(itemLength, "px") : undefined,
-            marginTop: "".concat(idx === 0 ? 0 : -borderThickness, "px"),
-        } : {
-            marginLeft: "".concat(idx === 0 ? 0 : -borderThickness, "px"),
-            width: itemLength !== undefined ? "".concat(itemLength, "px") : undefined,
-        }), idx >= data.length - 1 ? {} : __assign({}, orientation === 'vertical' ? {
-            marginBottom: "".concat(itemPadding, "px"),
-        } : {
-            marginRight: "".concat(itemPadding, "px"),
-        }))), "data-index": idx, data: val, index: idx, isSelected: isSelectedAt(idx), orientation: orientation, onCustomEvent: function (name, info) { return onItemCustomEvent === null || onItemCustomEvent === void 0 ? void 0 : onItemCustomEvent(idx, name, info); }, onClick: function () { return activateAt(idx); } })); }))));
-});
+}
 //# sourceMappingURL=List.js.map

package/lib/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"/","sources":["List.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,gEAA+C;AAC/C,6CAAoI;AACpI,gDAAyB;AACzB,oEAA6C;AAC7C,4EAAqD;AACrD,oEAA6C;AAC7C,0DAAmC;AAsGnC;;;;GAIG;AACH,kBAAe,IAAA,kBAAU,EAAC,UAAC,EAkB1B,EAAE,GAAG;IAjBJ,IAAA,SAAS,eAAA,EACT,KAAK,WAAA,EACL,uBAAmB,EAAnB,eAAe,mBAAG,CAAC,KAAA,EACnB,IAAI,UAAA,EACJ,qBAAsB,EAAtB,aAAa,mBAAG,MAAM,KAAA,EACtB,4BAA4B,EAA5B,oBAAoB,mBAAG,KAAK,KAAA,EAC5B,UAAU,gBAAA,EACV,mBAAe,EAAf,WAAW,mBAAG,CAAC,KAAA,EACf,mBAAwB,EAAxB,WAAW,mBAAG,UAAU,KAAA,EACxB,uBAA6C,EAA5B,uBAAuB,mBAAG,EAAE,KAAA,EAC1B,aAAa,uBAAA,EAChC,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,iBAAiB,uBAAA,EACjB,UAAU,gBAAA,EACV,iBAAiB,uBAAA,EACd,KAAK,cAjBiB,sQAkB1B,CADS;IAER,IAAM,iBAAiB,GAAG,UAAC,KAAa;QACtC,IAAI,KAAK,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAA;QACrC,IAAI,KAAK,GAAG,CAAC;YAAE,OAAO,IAAI,CAAA;QAE1B,OAAO,KAAK,CAAA;IACd,CAAC,CAAA;IAED,IAAM,uBAAuB,GAAG,UAAC,OAAiB,IAAK,OAAA,OAAO,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAArB,CAAqB,CAAC,EAAjD,CAAiD,CAAA;IAExG,IAAM,YAAY,GAAG,UAAC,KAAa,IAAK,OAAA,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,EAAnC,CAAmC,CAAA;IAE3E,IAAM,QAAQ,GAAG,UAAC,KAAa;QAC7B,IAAI,YAAY,CAAC,KAAK,CAAC,EAAE;YACvB,UAAU,CAAC,KAAK,CAAC,CAAA;SAClB;aACI;YACH,QAAQ,CAAC,KAAK,CAAC,CAAA;SAChB;IACH,CAAC,CAAA;IAED,IAAM,QAAQ,GAAG,UAAC,KAAa;QAC7B,IAAI,YAAY,CAAC,KAAK,CAAC;YAAE,OAAM;QAE/B,QAAQ,aAAa,EAAE;YACrB,KAAK,UAAU;gBACb,kBAAkB,CAAC,UAAA,IAAI,IAAI,OAAA,uCAAI,IAAI,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,KAAK,KAAK,EAAX,CAAW,CAAC,YAAE,KAAK,UAAE,IAAI,EAAE,EAAhD,CAAgD,CAAC,CAAA;gBAE5E,MAAK;YACP,KAAK,QAAQ;gBACX,kBAAkB,CAAC,CAAC,KAAK,CAAC,CAAC,CAAA;gBAE3B,MAAK;YACP;gBACE,MAAK;SACR;IACH,CAAC,CAAA;IAED,IAAM,UAAU,GAAG,UAAC,KAAa;QAC/B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;YAAE,OAAM;QAEhC,kBAAkB,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,KAAK,KAAK,EAAX,CAAW,CAAC,EAA7B,CAA6B,CAAC,CAAA;IAC3D,CAAC,CAAA;IAED,IAAM,UAAU,GAAG,UAAC,KAAa;QAC/B,IAAI,aAAa,KAAK,MAAM,EAAE;YAC5B,IAAI,oBAAoB,EAAE;gBACxB,QAAQ,CAAC,KAAK,CAAC,CAAA;aAChB;iBACI;gBACH,QAAQ,CAAC,KAAK,CAAC,CAAA;aAChB;SACF;QAED,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,KAAK,CAAC,CAAA;IACvB,CAAC,CAAA;IAED,IAAM,gCAAgC,GAAG,uBAAuB,CAAC,uBAAuB,CAAC,CAAA;IACnF,IAAA,KAAA,OAAwC,IAAA,gBAAQ,EAAC,gCAAgC,CAAC,IAAA,EAAjF,eAAe,QAAA,EAAE,kBAAkB,QAA8C,CAAA;IACxF,IAAM,mBAAmB,GAAG,IAAA,qBAAW,EAAC,eAAe,CAAC,CAAA;IAExD,IAAA,iBAAS,EAAC;QACR,IAAI,IAAA,eAAW,EAAC,gCAAgC,EAAE,eAAe,CAAC;YAAE,OAAM;QAE1E,kBAAkB,CAAC,gCAAgC,CAAC,CAAA;IACtD,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,gCAAgC,CAAC,CAAC,CAAC,CAAA;IAEtD,IAAA,iBAAS,EAAC;;QACR,IAAI,aAAa,KAAK,MAAM;YAAE,OAAM;QACpC,IAAI,mBAAmB,KAAK,SAAS;YAAE,OAAM;QAE7C,IAAM,UAAU,GAAG,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAjC,CAAiC,CAAC,mCAAI,EAAE,CAAA;QAC5F,IAAM,QAAQ,GAAG,eAAe,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,CAAC,CAAC,CAAC,MAAK,CAAC,CAAC,EAAtC,CAAsC,CAAC,CAAA;QAEpF,UAAU,CAAC,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,CAAC,CAAC,EAAjB,CAAiB,CAAC,CAAA;QACtC,QAAQ,CAAC,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,CAAC,CAAC,EAAf,CAAe,CAAC,CAAA;QAElC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,eAAe,CAAC,CAAA;IACtC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,CAAA;IAErC,IAAM,eAAe,GAAG,IAAA,yBAAe,EAAC;QACtC,IAAI,EAAE,IAAA,oBAAU,EAAC,WAAW,EAAE;YAC5B,SAAS,EAAE,oBAAoB;SAChC,CAAC;QACF,IAAI,EAAE,IAAA,oBAAU,EAAC,WAAW,EAAE;YAC5B,SAAS,EAAE,oBAAoB;SAChC,CAAC;KACH,CAAC,CAAA;IAEF,IAAM,WAAW,GAAG,IAAA,qBAAW,EAAC;QAC9B,IAAI,EAAE;YACJ,UAAU,EAAE,YAAY;YACxB,YAAY,EAAE,cAAc;YAC5B,OAAO,EAAE,MAAM;YACf,IAAI,EAAE,UAAU;YAChB,aAAa,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;YAC9D,cAAc,EAAE,YAAY;YAC5B,SAAS,EAAE,MAAM;SAClB;QACD,IAAI,aACF,WAAW,EAAE,UAAG,eAAe,OAAI,EACnC,gBAAgB,EAAE,cAAc,EAChC,IAAI,EAAE,UAAU,IACb,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,KAAK,EAAE,MAAM;SACd,CAAC,CAAC,CAAC;YACF,MAAM,EAAE,MAAM;SACf,CACF;KACF,CAAC,CAAA;IAEF,OAAO,CACL,kDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,EACtD,KAAK,EAAE,IAAA,gBAAM,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,KAErC,aAAa,IAAI,CAChB,8BAAC,cAAI,IAAC,EAAE,EAAE,IAAI,IACX,UAAC,GAAG,EAAE,GAAG,IAAK,OAAA,CACb,8BAAC,aAAa,IACZ,SAAS,EAAE,IAAA,oBAAU,EAAC,eAAe,CAAC,IAAI,EAAE;YAC1C,QAAQ,EAAE,YAAY,CAAC,GAAG,CAAC;SAC5B,CAAC,EACF,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,IAAI,sBAC5B,aAAa,EAAE,oBAAoB,KAAK,IAAI,IAAI,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,IAChF,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,MAAM,EAAE,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI,CAAC,CAAC,CAAC,SAAS;YAChE,SAAS,EAAE,UAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,OAAI;SACnD,CAAC,CAAC,CAAC;YACF,UAAU,EAAE,UAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,OAAI;YACnD,KAAK,EAAE,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI,CAAC,CAAC,CAAC,SAAS;SAChE,GACE,GAAG,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,cAC3B,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,YAAY,EAAE,UAAG,WAAW,OAAI;SACjC,CAAC,CAAC,CAAC;YACF,WAAW,EAAE,UAAG,WAAW,OAAI;SAChC,CACF,EACD,gBACU,GAAG,EACf,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,GAAG,EACV,UAAU,EAAE,YAAY,CAAC,GAAG,CAAC,EAC7B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,UAAC,IAAI,EAAE,IAAI,IAAK,OAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,EAApC,CAAoC,EACnE,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,GAAG,CAAC,EAAf,CAAe,GAC9B,CACH,EA9Bc,CA8Bd,CACI,CACR,CACG,CACP,CAAA;AACH,CAAC,CAA6E,CAAA","sourcesContent":["import classNames from 'classnames'\nimport isDeepEqual from 'fast-deep-equal/react'\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  onCustomEvent?: (name: string, info?: any) => void\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 item selection can be toggled, i.e. they can be deselected if\n   * selected again.\n   */\n  isSelectionTogglable?: boolean\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   * React component type to be used to generate items for this list.\n   */\n  itemComponentType?: ComponentType<ListItemProps<T>>\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 a custom event is dispatched from the item.\n   *\n   * @param index Index of the item.\n   * @param eventName Name of the dispatched custom event.\n   * @param eventInfo Optional info of the dispatched custom event.\n   */\n  onItemCustomEvent?: (index: number, eventName: string, eventInfo?: any) => void\n\n  /**\n   * Handler invoked when an item is selected.\n   *\n   * @param index Item index.\n   */\n  onSelectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when the selected items changed.\n   *\n   * @param indices Indices of selected items.\n   */\n  onSelectionChange?: (indices: number[]) => void\n}\n\n/**\n * A scrollable list of selectable items. Items are generated based on the\n * provided React component type. The type of data passed to each item is\n * generic. This component supports both horizontal and vertical orientations.\n */\nexport default forwardRef(({\n  className,\n  style,\n  borderThickness = 0,\n  data,\n  selectionMode = 'none',\n  isSelectionTogglable = false,\n  itemLength,\n  itemPadding = 0,\n  orientation = 'vertical',\n  selectedIndices: externalSelectedIndices = [],\n  itemComponentType: ItemComponent,\n  onActivateAt,\n  onDeselectAt,\n  onItemCustomEvent,\n  onSelectAt,\n  onSelectionChange,\n  ...props\n}, ref) => {\n  const isIndexOutOfRange = (index: number) => {\n    if (index >= data.length) return true\n    if (index < 0) return true\n\n    return false\n  }\n\n  const sanitizeSelectedIndices = (indices: number[]) => indices.sort().filter(t => !isIndexOutOfRange(t))\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].sort())\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 (isSelectionTogglable) {\n        toggleAt(index)\n      }\n      else {\n        selectAt(index)\n      }\n    }\n\n    onActivateAt?.(index)\n  }\n\n  const sanitizedExternalSelectedIndices = sanitizeSelectedIndices(externalSelectedIndices)\n  const [selectedIndices, setSelectedIndices] = useState(sanitizedExternalSelectedIndices)\n  const prevSelectedIndices = usePrevious(selectedIndices)\n\n  useEffect(() => {\n    if (isDeepEqual(sanitizedExternalSelectedIndices, selectedIndices)) return\n\n    setSelectedIndices(sanitizedExternalSelectedIndices)\n  }, [JSON.stringify(sanitizedExternalSelectedIndices)])\n\n  useEffect(() => {\n    if (selectionMode === 'none') return\n    if (prevSelectedIndices === undefined) return\n\n    const deselected = prevSelectedIndices?.filter(t => selectedIndices.indexOf(t) === -1) ?? []\n    const selected = selectedIndices.filter(t => prevSelectedIndices?.indexOf(t) === -1)\n\n    deselected.map(t => onDeselectAt?.(t))\n    selected.map(t => onSelectAt?.(t))\n\n    onSelectionChange?.(selectedIndices)\n  }, [JSON.stringify(selectedIndices)])\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation, {\n      togglable: isSelectionTogglable,\n    }),\n    item: classNames(orientation, {\n      togglable: isSelectionTogglable,\n    }),\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      alignItems: 'flex-start',\n      counterReset: 'item-counter',\n      display: 'flex',\n      flex: '0 0 auto',\n      flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n      justifyContent: 'flex-start',\n      listStyle: 'none',\n    },\n    item: {\n      borderWidth: `${borderThickness}px`,\n      counterIncrement: 'item-counter',\n      flex: '0 0 auto',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n      } : {\n        height: '100%',\n      },\n    },\n  })\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      {ItemComponent && (\n        <Each in={data}>\n          {(val, idx) => (\n            <ItemComponent\n              className={classNames(fixedClassNames.item, {\n                selected: isSelectedAt(idx),\n              })}\n              style={styles(fixedStyles.item, {\n                pointerEvents: isSelectionTogglable !== 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              onCustomEvent={(name, info) => onItemCustomEvent?.(idx, name, info)}\n              onClick={() => activateAt(idx)}\n            />\n          )}\n        </Each>\n      )}\n    </div>\n  )\n}) as <T>(props: ListProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n"]}
+{"version":3,"file":"List.js","sourceRoot":"/","sources":["List.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,gEAA+C;AAC/C,6CAAoI;AACpI,gDAAyB;AACzB,oEAA6C;AAC7C,4EAAqD;AACrD,oEAA6C;AAC7C,0DAAmC;AA4GnC;;;;GAIG;AACH,kBAAe,IAAA,kBAAU,EAAC,UAAC,EAkB1B,EAAE,GAAG;IAjBJ,IAAA,SAAS,eAAA,EACT,KAAK,WAAA,EACL,uBAAmB,EAAnB,eAAe,mBAAG,CAAC,KAAA,EACnB,IAAI,UAAA,EACJ,qBAAsB,EAAtB,aAAa,mBAAG,MAAM,KAAA,EACtB,4BAA4B,EAA5B,oBAAoB,mBAAG,KAAK,KAAA,EAC5B,UAAU,gBAAA,EACV,mBAAe,EAAf,WAAW,mBAAG,CAAC,KAAA,EACf,mBAAwB,EAAxB,WAAW,mBAAG,UAAU,KAAA,EACxB,uBAA6C,EAA5B,uBAAuB,mBAAG,EAAE,KAAA,EAC1B,aAAa,uBAAA,EAChC,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,iBAAiB,uBAAA,EACjB,UAAU,gBAAA,EACV,iBAAiB,uBAAA,EACd,KAAK,cAjBiB,sQAkB1B,CADS;IAER,IAAM,iBAAiB,GAAG,UAAC,KAAa;QACtC,IAAI,KAAK,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAA;QACrC,IAAI,KAAK,GAAG,CAAC;YAAE,OAAO,IAAI,CAAA;QAE1B,OAAO,KAAK,CAAA;IACd,CAAC,CAAA;IAED,IAAM,uBAAuB,GAAG,UAAC,OAAiB,IAAK,OAAA,OAAO,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAArB,CAAqB,CAAC,EAAjD,CAAiD,CAAA;IAExG,IAAM,YAAY,GAAG,UAAC,KAAa,IAAK,OAAA,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,EAAnC,CAAmC,CAAA;IAE3E,IAAM,QAAQ,GAAG,UAAC,KAAa;QAC7B,IAAI,YAAY,CAAC,KAAK,CAAC,EAAE;YACvB,UAAU,CAAC,KAAK,CAAC,CAAA;SAClB;aACI;YACH,QAAQ,CAAC,KAAK,CAAC,CAAA;SAChB;IACH,CAAC,CAAA;IAED,IAAM,QAAQ,GAAG,UAAC,KAAa;QAC7B,IAAI,YAAY,CAAC,KAAK,CAAC;YAAE,OAAM;QAE/B,QAAQ,aAAa,EAAE;YACrB,KAAK,UAAU;gBACb,kBAAkB,CAAC,UAAA,IAAI,IAAI,OAAA,uCAAI,IAAI,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,KAAK,KAAK,EAAX,CAAW,CAAC,YAAE,KAAK,UAAE,IAAI,EAAE,EAAhD,CAAgD,CAAC,CAAA;gBAE5E,MAAK;YACP,KAAK,QAAQ;gBACX,kBAAkB,CAAC,CAAC,KAAK,CAAC,CAAC,CAAA;gBAE3B,MAAK;YACP;gBACE,MAAK;SACR;IACH,CAAC,CAAA;IAED,IAAM,UAAU,GAAG,UAAC,KAAa;QAC/B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;YAAE,OAAM;QAEhC,kBAAkB,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,KAAK,KAAK,EAAX,CAAW,CAAC,EAA7B,CAA6B,CAAC,CAAA;IAC3D,CAAC,CAAA;IAED,IAAM,UAAU,GAAG,UAAC,KAAa;QAC/B,IAAI,aAAa,KAAK,MAAM,EAAE;YAC5B,IAAI,oBAAoB,EAAE;gBACxB,QAAQ,CAAC,KAAK,CAAC,CAAA;aAChB;iBACI;gBACH,QAAQ,CAAC,KAAK,CAAC,CAAA;aAChB;SACF;QAED,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,KAAK,CAAC,CAAA;IACvB,CAAC,CAAA;IAED,IAAM,gCAAgC,GAAG,uBAAuB,CAAC,uBAAuB,CAAC,CAAA;IACnF,IAAA,KAAA,OAAwC,IAAA,gBAAQ,EAAC,gCAAgC,CAAC,IAAA,EAAjF,eAAe,QAAA,EAAE,kBAAkB,QAA8C,CAAA;IACxF,IAAM,mBAAmB,GAAG,IAAA,qBAAW,EAAC,eAAe,CAAC,CAAA;IAExD,IAAA,iBAAS,EAAC;QACR,IAAI,IAAA,eAAW,EAAC,gCAAgC,EAAE,eAAe,CAAC;YAAE,OAAM;QAE1E,kBAAkB,CAAC,gCAAgC,CAAC,CAAA;IACtD,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,gCAAgC,CAAC,CAAC,CAAC,CAAA;IAEtD,IAAA,iBAAS,EAAC;;QACR,IAAI,mBAAmB,KAAK,SAAS;YAAE,OAAM;QAC7C,IAAI,aAAa,KAAK,MAAM;YAAE,OAAM;QAEpC,IAAM,UAAU,GAAG,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAjC,CAAiC,CAAC,mCAAI,EAAE,CAAA;QAC5F,IAAM,QAAQ,GAAG,eAAe,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,CAAC,CAAC,CAAC,MAAK,CAAC,CAAC,EAAtC,CAAsC,CAAC,CAAA;QAEpF,UAAU,CAAC,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,CAAC,CAAC,EAAjB,CAAiB,CAAC,CAAA;QACtC,QAAQ,CAAC,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,CAAC,CAAC,EAAf,CAAe,CAAC,CAAA;QAElC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,eAAe,CAAC,CAAA;IACtC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,CAAA;IAErC,IAAM,eAAe,GAAG,kBAAkB,CAAC,EAAE,oBAAoB,sBAAA,EAAE,WAAW,aAAA,EAAE,CAAC,CAAA;IACjF,IAAM,WAAW,GAAG,cAAc,CAAC,EAAE,eAAe,iBAAA,EAAE,WAAW,aAAA,EAAE,CAAC,CAAA;IAEpE,OAAO,CACL,kDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,EACtD,KAAK,EAAE,IAAA,gBAAM,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,KAErC,aAAa,IAAI,CAChB,8BAAC,cAAI,IAAC,EAAE,EAAE,IAAI,IACX,UAAC,GAAG,EAAE,GAAG,IAAK,OAAA,CACb,8BAAC,aAAa,IACZ,SAAS,EAAE,IAAA,oBAAU,EAAC,eAAe,CAAC,IAAI,EAAE;YAC1C,QAAQ,EAAE,YAAY,CAAC,GAAG,CAAC;SAC5B,CAAC,EACF,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,IAAI,sBAC5B,aAAa,EAAE,oBAAoB,KAAK,IAAI,IAAI,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,IAChF,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,MAAM,EAAE,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI,CAAC,CAAC,CAAC,SAAS;YAChE,SAAS,EAAE,UAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,OAAI;SACnD,CAAC,CAAC,CAAC;YACF,UAAU,EAAE,UAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,OAAI;YACnD,KAAK,EAAE,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI,CAAC,CAAC,CAAC,SAAS;SAChE,GACE,GAAG,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,cAC3B,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,YAAY,EAAE,UAAG,WAAW,OAAI;SACjC,CAAC,CAAC,CAAC;YACF,WAAW,EAAE,UAAG,WAAW,OAAI;SAChC,CACF,EACD,gBACU,GAAG,EACf,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,GAAG,EACV,UAAU,EAAE,YAAY,CAAC,GAAG,CAAC,EAC7B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,UAAC,IAAI,EAAE,IAAI,IAAK,OAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,EAApC,CAAoC,EACnE,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,GAAG,CAAC,EAAf,CAAe,GAC9B,CACH,EA9Bc,CA8Bd,CACI,CACR,CACG,CACP,CAAA;AACH,CAAC,CAA6E,CAAA;AAE9E,SAAS,kBAAkB,CAAC,EAAkD;QAAhD,WAAW,iBAAA,EAAE,oBAAoB,0BAAA;IAC7D,OAAO,IAAA,yBAAe,EAAC;QACrB,IAAI,EAAE,IAAA,oBAAU,EAAC,WAAW,EAAE;YAC5B,SAAS,EAAE,oBAAoB;SAChC,CAAC;QACF,IAAI,EAAE,IAAA,oBAAU,EAAC,WAAW,EAAE;YAC5B,SAAS,EAAE,oBAAoB;SAChC,CAAC;KACH,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,EAAiD;QAA/C,uBAAmB,EAAnB,eAAe,mBAAG,CAAC,KAAA,EAAE,WAAW,iBAAA;IACxD,OAAO,IAAA,qBAAW,EAAC;QACjB,IAAI,EAAE;YACJ,UAAU,EAAE,YAAY;YACxB,YAAY,EAAE,cAAc;YAC5B,OAAO,EAAE,MAAM;YACf,IAAI,EAAE,UAAU;YAChB,aAAa,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;YAC9D,cAAc,EAAE,YAAY;YAC5B,SAAS,EAAE,MAAM;SAClB;QACD,IAAI,aACF,WAAW,EAAE,UAAG,eAAe,OAAI,EACnC,gBAAgB,EAAE,cAAc,EAChC,IAAI,EAAE,UAAU,IACb,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,KAAK,EAAE,MAAM;SACd,CAAC,CAAC,CAAC;YACF,MAAM,EAAE,MAAM;SACf,CACF;KACF,CAAC,CAAA;AACJ,CAAC","sourcesContent":["import classNames from 'classnames'\nimport isDeepEqual from 'fast-deep-equal/react'\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\nexport type ListOrientation = 'horizontal' | 'vertical'\n\nexport type ListItemProps<T> = HTMLAttributes<HTMLElement> & {\n  data: T\n  index: number\n  isSelected: boolean\n  orientation: ListOrientation\n  onCustomEvent?: (name: string, info?: any) => void\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 item selection can be toggled, i.e. they can be deselected if\n   * selected again.\n   */\n  isSelectionTogglable?: boolean\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?: ListOrientation\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   * React component type to be used to generate items for this list.\n   */\n  itemComponentType?: ComponentType<ListItemProps<T>>\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 a custom event is dispatched from the item.\n   *\n   * @param index Index of the item.\n   * @param eventName Name of the dispatched custom event.\n   * @param eventInfo Optional info of the dispatched custom event.\n   */\n  onItemCustomEvent?: (index: number, eventName: string, eventInfo?: any) => void\n\n  /**\n   * Handler invoked when an item is selected.\n   *\n   * @param index Item index.\n   */\n  onSelectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when the selected items changed.\n   *\n   * @param indices Indices of selected items.\n   */\n  onSelectionChange?: (indices: number[]) => void\n}\n\ntype StylesProps = {\n  borderThickness?: number\n  isSelectionTogglable?: boolean\n  orientation?: ListOrientation\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  isSelectionTogglable = false,\n  itemLength,\n  itemPadding = 0,\n  orientation = 'vertical',\n  selectedIndices: externalSelectedIndices = [],\n  itemComponentType: ItemComponent,\n  onActivateAt,\n  onDeselectAt,\n  onItemCustomEvent,\n  onSelectAt,\n  onSelectionChange,\n  ...props\n}, ref) => {\n  const isIndexOutOfRange = (index: number) => {\n    if (index >= data.length) return true\n    if (index < 0) return true\n\n    return false\n  }\n\n  const sanitizeSelectedIndices = (indices: number[]) => indices.sort().filter(t => !isIndexOutOfRange(t))\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].sort())\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 (isSelectionTogglable) {\n        toggleAt(index)\n      }\n      else {\n        selectAt(index)\n      }\n    }\n\n    onActivateAt?.(index)\n  }\n\n  const sanitizedExternalSelectedIndices = sanitizeSelectedIndices(externalSelectedIndices)\n  const [selectedIndices, setSelectedIndices] = useState(sanitizedExternalSelectedIndices)\n  const prevSelectedIndices = usePrevious(selectedIndices)\n\n  useEffect(() => {\n    if (isDeepEqual(sanitizedExternalSelectedIndices, selectedIndices)) return\n\n    setSelectedIndices(sanitizedExternalSelectedIndices)\n  }, [JSON.stringify(sanitizedExternalSelectedIndices)])\n\n  useEffect(() => {\n    if (prevSelectedIndices === undefined) return\n    if (selectionMode === 'none') return\n\n    const deselected = prevSelectedIndices?.filter(t => selectedIndices.indexOf(t) === -1) ?? []\n    const selected = selectedIndices.filter(t => prevSelectedIndices?.indexOf(t) === -1)\n\n    deselected.map(t => onDeselectAt?.(t))\n    selected.map(t => onSelectAt?.(t))\n\n    onSelectionChange?.(selectedIndices)\n  }, [JSON.stringify(selectedIndices)])\n\n  const fixedClassNames = getFixedClassNames({ isSelectionTogglable, orientation })\n  const fixedStyles = getFixedStyles({ borderThickness, orientation })\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      {ItemComponent && (\n        <Each in={data}>\n          {(val, idx) => (\n            <ItemComponent\n              className={classNames(fixedClassNames.item, {\n                selected: isSelectedAt(idx),\n              })}\n              style={styles(fixedStyles.item, {\n                pointerEvents: isSelectionTogglable !== 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              onCustomEvent={(name, info) => onItemCustomEvent?.(idx, name, info)}\n              onClick={() => activateAt(idx)}\n            />\n          )}\n        </Each>\n      )}\n    </div>\n  )\n}) as <T>(props: ListProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nfunction getFixedClassNames({ orientation, isSelectionTogglable }: StylesProps) {\n  return asClassNameDict({\n    root: classNames(orientation, {\n      togglable: isSelectionTogglable,\n    }),\n    item: classNames(orientation, {\n      togglable: isSelectionTogglable,\n    }),\n  })\n}\n\nfunction getFixedStyles({ borderThickness = 0, orientation }: StylesProps) {\n  return 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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etudes",
-  "version": "3.7.0",
+  "version": "3.7.1",
   "description": "A study of headless React components",
   "main": "lib",
   "scripts": {
@@ -29,29 +29,29 @@
     "lib"
   ],
   "devDependencies": {
-    "@babel/core": "^7.22.19",
+    "@babel/core": "^7.22.20",
     "@babel/plugin-transform-runtime": "^7.22.15",
-    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.22.15",
     "@types/debug": "^4.1.8",
-    "@types/html-webpack-plugin": "^3.2.6",
+    "@types/html-webpack-plugin": "^3.2.7",
     "@types/node-polyglot": "^2.4.2",
-    "@types/react": "^18.2.21",
+    "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "@types/react-transition-group": "^4.4.6",
     "@types/styled-components": "^5.1.27",
     "@types/webpack": "^5.28.2",
     "@types/webpack-env": "^1.18.1",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
-    "@typescript-eslint/parser": "^6.7.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.2",
+    "@typescript-eslint/parser": "^6.7.2",
     "babel-loader": "^9.1.3",
     "babel-plugin-styled-components": "^2.1.4",
     "concurrently": "^8.2.1",
     "cross-env": "^7.0.3",
     "debug": "^4.3.4",
     "eslint": "^8.49.0",
-    "fast-xml-parser": "^4.2.7",
+    "fast-xml-parser": "^4.3.0",
     "html-webpack-plugin": "^5.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -69,7 +69,7 @@
   "dependencies": {
     "classnames": "^2.3.2",
     "fast-deep-equal": "^3.1.3",
-    "interactjs": "^1.10.18",
+    "interactjs": "^1.10.19",
     "react-transition-group": "^4.4.5",
     "resize-observer-polyfill": "^1.5.1",
     "spase": "^7.0.0"
@@ -78,7 +78,7 @@
     "react": "^18.2.0"
   },
   "optionalDependencies": {
-    "fast-xml-parser": "^4.2.7",
+    "fast-xml-parser": "^4.3.0",
     "react-router": "^6.16.0",
     "react-router-dom": "^6.16.0"
   }