etudes 5.1.0 → 5.2.0

package/components/Accordion.d.ts

@@ -0,0 +1,219 @@
+import { type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
+import { type CollectionItemProps, type CollectionOrientation, type CollectionProps, type CollectionSelectionMode } from './Collection';
+/**
+ * Type describing the current item selection of {@link Accordion}, composed of
+ * a dictionary whose key corresponds the section index and value corresponds to
+ * an array of selected item indices. If the selection mode of the
+ * {@link Accordion} is `single`, only one key will be present and one index in
+ * the array value.
+ */
+export type AccordionSelection = Record<number, number[]>;
+/**
+ * Type describing the data of each section in {@link Accordion}.
+ */
+export type AccordionSection<T> = Pick<CollectionProps<T>, 'isSelectionTogglable' | 'itemLength' | 'itemPadding' | 'items' | 'layout' | 'numSegments'> & {
+    /**
+     * Padding (in pixels) between the sectionheader and the internal collection.
+     */
+    collectionPadding?: number;
+    /**
+     * Label for the section header.
+     */
+    label: string;
+    /**
+     * Maximum number of visible rows (if section orientation is `vertical`) or
+     * columns (if section orientation is `horizontal`). If number of rows exceeds
+     * the number of visible, a scrollbar will be put in place.
+     */
+    maxVisible?: number;
+};
+/**
+ * Type describing the props of each `ItemComponent` provided to
+ * {@link Accordion}.
+ */
+export type AccordionItemProps<T> = CollectionItemProps<T>;
+/**
+ * Type describing the props of each `HeaderComponent` provided to
+ * {@link Accordion}.
+ */
+export type AccordionHeaderProps<I, S extends AccordionSection<I> = AccordionSection<I>> = HTMLAttributes<HTMLElement> & PropsWithChildren<{
+    /**
+     * The index of the corresponding section.
+     */
+    index: number;
+    /**
+     * Indicates whether the corresponding section is collapsed.
+     */
+    isCollapsed: boolean;
+    /**
+     * Data provided to the corresponding section.
+     */
+    section: S;
+    /**
+     * Handler invoked to dispatch a custom event.
+     *
+     * @param name User-defined name of the custom event.
+     * @param info Optional user-defined info of the custom event.
+     */
+    onCustomEvent?: (name: string, info?: any) => void;
+}>;
+/**
+ * Type describing the props of {@link Accordion}.
+ */
+export type AccordionProps<I, S extends AccordionSection<I> = AccordionSection<I>> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
+    /**
+     * Specifies if expanded sections should automatically collapse upon expanding
+     * another section.
+     */
+    autoCollapseSections?: boolean;
+    /**
+     * SVG markup to use as the collapse icon when a toggle button is
+     * automatically generated (when `HeaderComponent` is absent).
+     */
+    collapseIconSvg?: string;
+    /**
+     * Indices of sections that are expanded. If specified, the component will not
+     * manage expansion states.
+     */
+    expandedSectionIndices?: number[];
+    /**
+     * SVG markup to use as the expand icon when a toggle button is automatically
+     * generated (when `HeaderComponent` is absent).
+     */
+    expandIconSvg?: string;
+    /**
+     * Orientation of this component.
+     *
+     * @see {@link CollectionOrientation}
+     */
+    orientation?: CollectionOrientation;
+    /**
+     * Padding (in pixels) between each section.
+     */
+    sectionPadding?: number;
+    /**
+     * Data provided to each section.
+     */
+    sections: S[];
+    /**
+     * Indices of selected items per section.
+     *
+     * @see {@link AccordionSelection}
+     */
+    selection?: AccordionSelection;
+    /**
+     * Selection mode of each section.
+     *
+     * @see {@link CollectionSelectionMode}
+     */
+    selectionMode?: CollectionSelectionMode;
+    /**
+     * Specifies if the component should use default styles.
+     */
+    usesDefaultStyles?: boolean;
+    /**
+     * Handler invoked when an item is activated in a section. The order of
+     * handlers invoked when any selection changes take place is:
+     *   1. `onActivateAt`
+     *   2. `onDeselectAt`
+     *   3. `onSelectAt`
+     *   4. `onSelectionChange`
+     *
+     * @param itemIndex Item index.
+     * @param sectionIndex Section index.
+     */
+    onActivateAt?: (itemIndex: number, sectionIndex: number) => void;
+    /**
+     * Handler invoked when a section is collapsed. The order of handlers invoked
+     * when any section expansion changes take place is:
+     *   1. `onCollapseSectionAt`
+     *   2. `onExpandSectionAt`
+     *
+     * @param sectionIndex Section index.
+     */
+    onCollapseSectionAt?: (sectionIndex: number) => void;
+    /**
+     * Handler invoked when an item is deselected in a section. The order of
+     * handlers invoked when any selection changes take place is:
+     *   1. `onActivateAt`
+     *   2. `onDeselectAt`
+     *   3. `onSelectAt`
+     *   4. `onSelectionChange`
+     *
+     * @param itemIndex Item index.
+     * @param sectionIndex Section index.
+     */
+    onDeselectAt?: (itemIndex: number, sectionIndex: number) => void;
+    /**
+     * Handler invoked when the expansion state of any section changes.
+     *
+     * @param expandedSectionIndices Indices of sections that are expanded.
+     */
+    onExpandedSectionsChange?: (expandedSectionIndices: number[]) => void;
+    /**
+     * Handler invoked when a section is expanded. The order of handlers invoked
+     * when any section expansion changes take place is:
+     *   1. `onCollapseSectionAt`
+     *   2. `onExpandSectionAt`
+     *
+     * @param sectionIndex Section index.
+     */
+    onExpandSectionAt?: (sectionIndex: number) => void;
+    /**
+     * Handler invoked when a custom event is dispatched from a section header.
+     *
+     * @param sectionIndex Index of the section which the header belongs.
+     * @param eventName User-defined name of the dispatched event.
+     * @param eventInfo Optional user-defined info of the dispatched event.
+     */
+    onHeaderCustomEvent?: (sectionIndex: number, eventName: string, eventInfo?: any) => void;
+    /**
+     * Handler invoked when a custom event is dispatched from an item.
+     *
+     * @param itemIndex Item index.
+     * @param sectionIndex Section index.
+     * @param eventName User-defined name of the dispatched event.
+     * @param eventInfo Optional user-defined info of the dispatched event.
+     */
+    onItemCustomEvent?: (itemIndex: number, sectionIndex: number, eventName: string, eventInfo?: any) => void;
+    /**
+     * Handler invoked when an item is selected in a section. The order of
+     * handlers invoked when any selection changes take place is:
+     *   1. `onActivateAt`
+     *   2. `onDeselectAt`
+     *   3. `onSelectAt`
+     *   4. `onSelectionChange`
+     *
+     * @param itemIndex Item index.
+     * @param sectionIndex Section index.
+     */
+    onSelectAt?: (itemIndex: number, sectionIndex: number) => void;
+    /**
+     * Handler invoked when selected items have changed. The order of handlers
+     * invoked when any selection changes take place is:
+     *   1. `onActivateAt`
+     *   2. `onDeselectAt`
+     *   3. `onSelectAt`
+     *   4. `onSelectionChange`
+     *
+     * @param selectedIndices Dictionary of indices of selected items per section.
+     */
+    onSelectionChange?: (selection: AccordionSelection) => void;
+    /**
+     * Component type for generating section headers inside the component. When
+     * absent, one will be generated automatically.
+     */
+    HeaderComponent?: ComponentType<AccordionHeaderProps<I, S>>;
+    /**
+     * Component type for generating items for each section.
+     */
+    ItemComponent?: ComponentType<AccordionItemProps<I>>;
+}>;
+/**
+ * A collection of selectable items laid out in sections in an accordion. Items
+ * are generated based on the provided `ItemComponent` while each section header
+ * is optionally provided by `HeaderComponent` or generated automatically.
+ */
+export declare const Accordion: <I, S extends AccordionSection<I> = AccordionSection<I>>(props: AccordionProps<I, S> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReactElement;

package/components/Accordion.js

@@ -0,0 +1,319 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var clsx_1 = __importDefault(require("clsx"));
+var react_1 = __importDefault(require("fast-deep-equal/react"));
+var react_2 = require("react");
+var Each_1 = require("../operators/Each");
+var utils_1 = require("../utils");
+var Collection_1 = require("./Collection");
+var FlatSVG_1 = require("./FlatSVG");
+/**
+ * A collection of selectable items laid out in sections in an accordion. Items
+ * are generated based on the provided `ItemComponent` while each section header
+ * is optionally provided by `HeaderComponent` or generated automatically.
+ */
+exports.Accordion = (0, react_2.forwardRef)(function (_a, ref) {
+    var children = _a.children, style = _a.style, _b = _a.autoCollapseSections, autoCollapseSections = _b === void 0 ? false : _b, collapseIconSvg = _a.collapseIconSvg, externalExpandedSectionIndices = _a.expandedSectionIndices, expandIconSvg = _a.expandIconSvg, _c = _a.orientation, orientation = _c === void 0 ? 'vertical' : _c, _d = _a.sectionPadding, sectionPadding = _d === void 0 ? 0 : _d, sections = _a.sections, externalSelection = _a.selection, _e = _a.selectionMode, selectionMode = _e === void 0 ? 'single' : _e, _f = _a.usesDefaultStyles, usesDefaultStyles = _f === void 0 ? false : _f, onActivateAt = _a.onActivateAt, onCollapseSectionAt = _a.onCollapseSectionAt, onDeselectAt = _a.onDeselectAt, onExpandedSectionsChange = _a.onExpandedSectionsChange, onExpandSectionAt = _a.onExpandSectionAt, onHeaderCustomEvent = _a.onHeaderCustomEvent, onItemCustomEvent = _a.onItemCustomEvent, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, HeaderComponent = _a.HeaderComponent, ItemComponent = _a.ItemComponent, props = __rest(_a, ["children", "style", "autoCollapseSections", "collapseIconSvg", "expandedSectionIndices", "expandIconSvg", "orientation", "sectionPadding", "sections", "selection", "selectionMode", "usesDefaultStyles", "onActivateAt", "onCollapseSectionAt", "onDeselectAt", "onExpandedSectionsChange", "onExpandSectionAt", "onHeaderCustomEvent", "onItemCustomEvent", "onSelectAt", "onSelectionChange", "HeaderComponent", "ItemComponent"]);
+    var isSectionIndexOutOfRange = function (sectionIndex) {
+        if (sectionIndex >= sections.length)
+            return true;
+        if (sectionIndex < 0)
+            return true;
+        return false;
+    };
+    var isItemIndexOutOfRange = function (itemIndex, sectionIndex) {
+        if (isSectionIndexOutOfRange(sectionIndex))
+            return true;
+        var items = sections[sectionIndex].items;
+        if (itemIndex >= items.length)
+            return true;
+        if (itemIndex < 0)
+            return true;
+        return false;
+    };
+    var isSelectedAt = function (itemIndex, sectionIndex) { var _a, _b; return ((_b = (_a = selection[sectionIndex]) === null || _a === void 0 ? void 0 : _a.indexOf(itemIndex)) !== null && _b !== void 0 ? _b : -1) >= 0; };
+    var sanitizeExpandedSectionIndices = function (sectionIndices) { return sortIndices(sectionIndices).filter(function (t) { return !isSectionIndexOutOfRange(t); }); };
+    var sanitizeSelection = function (selection) {
+        var _a;
+        var newValue = {};
+        var _loop_1 = function (sectionIndex) {
+            if (!Object.hasOwn(sections, sectionIndex))
+                return "continue";
+            var indices = sortIndices(__spreadArray([], __read((_a = selection[sectionIndex]) !== null && _a !== void 0 ? _a : []), false));
+            newValue[Number(sectionIndex)] = sortIndices(indices).filter(function (t) { return !isItemIndexOutOfRange(t, Number(sectionIndex)); });
+        };
+        for (var sectionIndex in sections) {
+            _loop_1(sectionIndex);
+        }
+        return newValue;
+    };
+    var isSectionExpandedAt = function (sectionIndex) { return expandedSectionIndices.indexOf(sectionIndex) >= 0; };
+    var toggleSectionAt = function (sectionIndex) {
+        var transform;
+        if (isSectionExpandedAt(sectionIndex)) {
+            transform = function (val) { return val.filter(function (t) { return t !== sectionIndex; }); };
+        }
+        else if (autoCollapseSections) {
+            transform = function (val) { return [sectionIndex]; };
+        }
+        else {
+            transform = function (val) { return __spreadArray(__spreadArray([], __read(val.filter(function (t) { return t !== sectionIndex; })), false), [sectionIndex], false); };
+        }
+        handleExpandedSectionsChange(expandedSectionIndices, transform(expandedSectionIndices));
+    };
+    var handleSelectAt = function (itemIndex, sectionIndex) {
+        if (isSelectedAt(itemIndex, sectionIndex))
+            return;
+        var transform;
+        switch (selectionMode) {
+            case 'multiple':
+                transform = function (val) {
+                    var _a;
+                    var _b;
+                    return (__assign(__assign({}, val), (_a = {}, _a[sectionIndex] = sortIndices(__spreadArray(__spreadArray([], __read(((_b = val[sectionIndex]) !== null && _b !== void 0 ? _b : []).filter(function (t) { return t !== itemIndex; })), false), [itemIndex], false)), _a)));
+                };
+                break;
+            case 'single':
+                transform = function (val) {
+                    var _a;
+                    return (_a = {},
+                        _a[sectionIndex] = [itemIndex],
+                        _a);
+                };
+                break;
+            default:
+                return;
+        }
+        var newValue = transform(selection);
+        prevSelectionRef.current = newValue;
+        handleSelectionChange(selection, newValue);
+    };
+    var handleDeselectAt = function (itemIndex, sectionIndex) {
+        if (!isSelectedAt(itemIndex, sectionIndex))
+            return;
+        var transform = function (val) {
+            var _a;
+            var _b;
+            return (__assign(__assign({}, val), (_a = {}, _a[sectionIndex] = ((_b = val[sectionIndex]) !== null && _b !== void 0 ? _b : []).filter(function (t) { return t !== itemIndex; }), _a)));
+        };
+        var newValue = transform(selection);
+        prevSelectionRef.current = newValue;
+        handleSelectionChange(selection, newValue);
+    };
+    var handleExpandedSectionsChange = function (oldValue, newValue) {
+        var _a;
+        if ((0, react_1.default)(oldValue, newValue))
+            return;
+        var collapsed = (_a = oldValue === null || oldValue === void 0 ? void 0 : oldValue.filter(function (t) { return newValue.indexOf(t) === -1; })) !== null && _a !== void 0 ? _a : [];
+        var expanded = newValue.filter(function (t) { return (oldValue === null || oldValue === void 0 ? void 0 : oldValue.indexOf(t)) === -1; });
+        collapsed.forEach(function (t) { return onCollapseSectionAt === null || onCollapseSectionAt === void 0 ? void 0 : onCollapseSectionAt(t); });
+        expanded.forEach(function (t) { return onExpandSectionAt === null || onExpandSectionAt === void 0 ? void 0 : onExpandSectionAt(t); });
+        onExpandedSectionsChange === null || onExpandedSectionsChange === void 0 ? void 0 : onExpandedSectionsChange(newValue);
+    };
+    var handleSelectionChange = function (oldValue, newValue) {
+        var _a, _b;
+        if ((0, react_1.default)(oldValue, newValue))
+            return;
+        var numSections = sections.length;
+        var allDeselected = [];
+        var allSelected = [];
+        var _loop_2 = function (i) {
+            var oldSection = (_a = oldValue === null || oldValue === void 0 ? void 0 : oldValue[i]) !== null && _a !== void 0 ? _a : [];
+            var newSection = (_b = newValue[i]) !== null && _b !== void 0 ? _b : [];
+            var deselected = oldSection.filter(function (t) { return newSection.indexOf(t) === -1; });
+            var selected = newSection.filter(function (t) { return (oldSection === null || oldSection === void 0 ? void 0 : oldSection.indexOf(t)) === -1; });
+            allDeselected = __spreadArray(__spreadArray([], __read(allDeselected), false), __read(deselected.map(function (t) { return [t, i]; })), false);
+            allSelected = __spreadArray(__spreadArray([], __read(allSelected), false), __read(selected.map(function (t) { return [t, i]; })), false);
+        };
+        for (var i = 0; i < numSections; i++) {
+            _loop_2(i);
+        }
+        allDeselected.forEach(function (t) { return onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(t[0], t[1]); });
+        allSelected.forEach(function (t) { return onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(t[0], t[1]); });
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(newValue);
+    };
+    var selection = sanitizeSelection(externalSelection !== null && externalSelection !== void 0 ? externalSelection : {});
+    var expandedSectionIndices = sanitizeExpandedSectionIndices(externalExpandedSectionIndices !== null && externalExpandedSectionIndices !== void 0 ? externalExpandedSectionIndices : []);
+    var fixedStyles = getFixedStyles({ orientation: orientation });
+    var defaultStyles = usesDefaultStyles ? getDefaultStyles({ orientation: orientation }) : undefined;
+    var prevSelectionRef = (0, react_2.useRef)();
+    var prevSelection = prevSelectionRef.current;
+    (0, react_2.useEffect)(function () {
+        prevSelectionRef.current = selection;
+        if (prevSelection === undefined)
+            return;
+        handleSelectionChange(prevSelection, selection);
+    }, [JSON.stringify(selection)]);
+    return ((0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, "data-component": 'accordion', style: (0, utils_1.styles)(style, fixedStyles.root), children: (0, jsx_runtime_1.jsx)(Each_1.Each, { in: sections, children: function (section, sectionIndex) {
+                var _a;
+                var _b = section.collectionPadding, collectionPadding = _b === void 0 ? 0 : _b, items = section.items, _c = section.itemLength, itemLength = _c === void 0 ? 50 : _c, _d = section.itemPadding, itemPadding = _d === void 0 ? 0 : _d, isSelectionTogglable = section.isSelectionTogglable, _e = section.layout, layout = _e === void 0 ? 'list' : _e, _f = section.maxVisible, maxVisible = _f === void 0 ? -1 : _f, _g = section.numSegments, numSegments = _g === void 0 ? 1 : _g;
+                var allVisible = layout === 'list' ? items.length : Math.ceil(items.length / numSegments);
+                var numVisible = maxVisible < 0 ? allVisible : Math.min(allVisible, maxVisible);
+                var maxLength = itemLength * numVisible + itemPadding * (numVisible - 1);
+                var isCollapsed = !isSectionExpandedAt(sectionIndex);
+                var expandIconComponent = expandIconSvg ? (0, jsx_runtime_1.jsx)(FlatSVG_1.FlatSVG, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.expandIcon, svg: expandIconSvg }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                var collapseIconComponent = collapseIconSvg ? (0, jsx_runtime_1.jsx)(FlatSVG_1.FlatSVG, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.collapseIcon, svg: collapseIconSvg }) : expandIconComponent;
+                return ((0, jsx_runtime_1.jsxs)("div", { style: (0, utils_1.styles)(fixedStyles.section, orientation === 'vertical' ? {
+                        marginTop: sectionIndex === 0 ? '0px' : "".concat(sectionPadding, "px"),
+                    } : {
+                        marginLeft: sectionIndex === 0 ? '0px' : "".concat(sectionPadding, "px"),
+                    }), children: [HeaderComponent ? ((0, jsx_runtime_1.jsx)(HeaderComponent, { className: (0, clsx_1.default)({ collapsed: isCollapsed, expanded: !isCollapsed }), "data-child": 'header', index: sectionIndex, isCollapsed: isCollapsed, section: section, style: (0, utils_1.styles)(fixedStyles.header), onClick: function () { return toggleSectionAt(sectionIndex); }, onCustomEvent: function (name, info) { return onHeaderCustomEvent === null || onHeaderCustomEvent === void 0 ? void 0 : onHeaderCustomEvent(sectionIndex, name, info); } })) : ((0, jsx_runtime_1.jsxs)("button", { className: (0, clsx_1.default)({ collapsed: isCollapsed, expanded: !isCollapsed }), "data-child": 'header', style: (0, utils_1.styles)(fixedStyles.header, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.header), onClick: function () { return toggleSectionAt(sectionIndex); }, children: [(0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: section.label }, style: (0, utils_1.styles)(defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.headerLabel) }), (0, utils_1.cloneStyledElement)(isCollapsed ? expandIconComponent : collapseIconComponent, {
+                                    style: (0, utils_1.styles)(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),
+                                })] })), (0, jsx_runtime_1.jsx)(Collection_1.Collection, { className: (0, clsx_1.default)({ collapsed: isCollapsed, expanded: !isCollapsed }), "data-child": 'collection', isSelectionTogglable: isSelectionTogglable, ItemComponent: ItemComponent, itemLength: itemLength, itemPadding: itemPadding, items: items, layout: layout, numSegments: numSegments, orientation: orientation, selection: (_a = selection[sectionIndex]) !== null && _a !== void 0 ? _a : [], selectionMode: selectionMode, style: (0, utils_1.styles)(fixedStyles.list, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.collection, orientation === 'vertical' ? {
+                                width: '100%',
+                                height: isCollapsed ? '0px' : "".concat(maxLength, "px"),
+                                marginTop: isCollapsed ? '0px' : "".concat(collectionPadding, "px"),
+                                overflowY: maxVisible < 0 || maxVisible >= allVisible ? 'hidden' : 'scroll',
+                            } : {
+                                marginLeft: isCollapsed ? '0px' : "".concat(collectionPadding, "px"),
+                                overflowX: maxVisible < 0 || maxVisible >= allVisible ? 'hidden' : 'scroll',
+                                width: isCollapsed ? '0px' : "".concat(maxLength, "px"),
+                                height: '100%',
+                            }), onActivateAt: function (itemIndex) {
+                                onActivateAt === null || onActivateAt === void 0 ? void 0 : onActivateAt(itemIndex, sectionIndex);
+                            }, onDeselectAt: function (itemIndex) {
+                                handleDeselectAt === null || handleDeselectAt === void 0 ? void 0 : handleDeselectAt(itemIndex, sectionIndex);
+                            }, onItemCustomEvent: function (itemIndex, name, info) {
+                                onItemCustomEvent === null || onItemCustomEvent === void 0 ? void 0 : onItemCustomEvent(itemIndex, sectionIndex, name, info);
+                            }, onSelectAt: function (itemIndex) {
+                                handleSelectAt === null || handleSelectAt === void 0 ? void 0 : handleSelectAt(itemIndex, sectionIndex);
+                            } })] }));
+            } }) })));
+});
+Object.defineProperty(exports.Accordion, 'displayName', { value: 'Accordion', writable: false });
+function sortIndices(indices) {
+    return indices.sort(function (a, b) { return a - b; });
+}
+function getFixedStyles(_a) {
+    var _b = _a.orientation, orientation = _b === void 0 ? 'vertical' : _b;
+    return (0, utils_1.asStyleDict)({
+        root: __assign({ alignItems: 'center', boxSizing: 'border-box', display: 'flex', flex: '0 0 auto', justifyContent: 'flex-start', padding: '0' }, orientation === 'vertical' ? {
+            flexDirection: 'column',
+            height: 'auto',
+        } : {
+            flexDirection: 'row',
+            width: 'auto',
+        }),
+        section: __assign({ alignItems: 'flex-start', display: 'flex', flex: '0 0 auto', justifyContent: 'flex-start', margin: '0', padding: '0' }, orientation === 'vertical' ? {
+            flexDirection: 'column',
+            width: '100%',
+        } : {
+            flexDirection: 'row',
+            height: '100%',
+        }),
+        list: {},
+        header: __assign({ cursor: 'pointer', margin: '0' }, orientation === 'vertical' ? {
+            width: '100%',
+        } : {
+            height: '100%',
+        }),
+        expandIcon: {
+            margin: '0',
+            padding: '0',
+        },
+        collapseIcon: {
+            margin: '0',
+            padding: '0',
+        },
+    });
+}
+function getDefaultStyles(_a) {
+    var _b = _a.orientation, orientation = _b === void 0 ? 'vertical' : _b;
+    return (0, utils_1.asStyleDict)({
+        collection: __assign({ transitionDuration: '100ms', transitionTimingFunction: 'ease-out' }, orientation === 'vertical' ? {
+            transitionProperty: 'height, margin',
+        } : {
+            transitionProperty: 'width, margin',
+        }),
+        header: __assign({ border: 'none', outline: 'none', alignItems: 'center', background: '#fff', 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',
+            fill: '#000',
+            height: '15px',
+            transformOrigin: 'center',
+            transitionDuration: '100ms',
+            transitionProperty: 'transform',
+            transitionTimingFunction: 'ease-out',
+            width: '15px',
+        },
+        collapseIcon: {
+            boxSizing: 'border-box',
+            display: 'block',
+            fill: '#000',
+            height: '15px',
+            transformOrigin: 'center',
+            transitionDuration: '100ms',
+            transitionProperty: 'transform',
+            transitionTimingFunction: 'ease-out',
+            width: '15px',
+        },
+    });
+}
+//# sourceMappingURL=Accordion.js.map

package/components/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["components/Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport isDeepEqual from 'fast-deep-equal/react'\nimport { forwardRef, useEffect, useRef, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport { Each } from '../operators/Each'\nimport { asStyleDict, cloneStyledElement, styles } from '../utils'\nimport { Collection, type CollectionItemProps, type CollectionOrientation, type CollectionProps, type CollectionSelectionMode } from './Collection'\nimport { FlatSVG } from './FlatSVG'\n\n/**\n * Type describing the current item selection of {@link Accordion}, composed of\n * a dictionary whose key corresponds the section index and value corresponds to\n * an array of selected item indices. If the selection mode of the\n * {@link Accordion} is `single`, only one key will be present and one index in\n * the array value.\n */\nexport type AccordionSelection = Record<number, number[]>\n\n/**\n * Type describing the data of each section in {@link Accordion}.\n */\nexport type AccordionSection<T> = Pick<CollectionProps<T>, 'isSelectionTogglable' | 'itemLength' | 'itemPadding' | 'items' | 'layout' | 'numSegments'> & {\n  /**\n   * Padding (in pixels) between the sectionheader and the internal collection.\n   */\n  collectionPadding?: number\n\n  /**\n   * Label for the section header.\n   */\n  label: string\n\n  /**\n   * Maximum number of visible rows (if section orientation is `vertical`) or\n   * columns (if section orientation is `horizontal`). If number of rows exceeds\n   * the number of visible, a scrollbar will be put in place.\n   */\n  maxVisible?: number\n}\n\n/**\n * Type describing the props of each `ItemComponent` provided to\n * {@link Accordion}.\n */\nexport type AccordionItemProps<T> = CollectionItemProps<T>\n\n/**\n * Type describing the props of each `HeaderComponent` provided to\n * {@link Accordion}.\n */\nexport type AccordionHeaderProps<I, S extends AccordionSection<I> = AccordionSection<I>> = HTMLAttributes<HTMLElement> & PropsWithChildren<{\n  /**\n   * The index of the corresponding section.\n   */\n  index: number\n\n  /**\n   * Indicates whether the corresponding section is collapsed.\n   */\n  isCollapsed: boolean\n\n  /**\n   * Data provided to the corresponding section.\n   */\n  section: S\n\n  /**\n   * Handler invoked to dispatch a custom event.\n   *\n   * @param name User-defined name of the custom event.\n   * @param info Optional user-defined info of the custom event.\n   */\n  onCustomEvent?: (name: string, info?: any) => void\n}>\n\n/**\n * Type describing the props of {@link Accordion}.\n */\nexport type AccordionProps<I, S extends AccordionSection<I> = AccordionSection<I>> = HTMLAttributes<HTMLDivElement> & 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 use as the collapse icon when a toggle button is\n   * automatically generated (when `HeaderComponent` is absent).\n   */\n  collapseIconSvg?: string\n\n  /**\n   * Indices of sections that are expanded. If specified, the component will not\n   * manage expansion states.\n   */\n  expandedSectionIndices?: number[]\n\n  /**\n   * SVG markup to use as the expand icon when a toggle button is automatically\n   * generated (when `HeaderComponent` is absent).\n   */\n  expandIconSvg?: string\n\n  /**\n   * Orientation of this component.\n   *\n   * @see {@link CollectionOrientation}\n   */\n  orientation?: CollectionOrientation\n\n  /**\n   * Padding (in pixels) between each section.\n   */\n  sectionPadding?: number\n\n  /**\n   * Data provided to each section.\n   */\n  sections: S[]\n\n  /**\n   * Indices of selected items per section.\n   *\n   * @see {@link AccordionSelection}\n   */\n  selection?: AccordionSelection\n\n  /**\n   * Selection mode of each section.\n   *\n   * @see {@link CollectionSelectionMode}\n   */\n  selectionMode?: CollectionSelectionMode\n\n  /**\n   * Specifies if the component should use default styles.\n   */\n  usesDefaultStyles?: boolean\n\n  /**\n   * Handler invoked when an item is activated in a section. The order of\n   * handlers invoked when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\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. The order of handlers invoked\n   * when any section expansion changes take place is:\n   *   1. `onCollapseSectionAt`\n   *   2. `onExpandSectionAt`\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. The order of\n   * handlers invoked when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\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 the expansion state of any section changes.\n   *\n   * @param expandedSectionIndices Indices of sections that are expanded.\n   */\n  onExpandedSectionsChange?: (expandedSectionIndices: number[]) => void\n\n  /**\n   * Handler invoked when a section is expanded. The order of handlers invoked\n   * when any section expansion changes take place is:\n   *   1. `onCollapseSectionAt`\n   *   2. `onExpandSectionAt`\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 User-defined name of the dispatched event.\n   * @param eventInfo Optional user-defined info of the dispatched event.\n   */\n  onHeaderCustomEvent?: (sectionIndex: number, eventName: string, eventInfo?: any) => void\n\n  /**\n   * Handler invoked when a custom event is dispatched from an item.\n   *\n   * @param itemIndex Item index.\n   * @param sectionIndex Section index.\n   * @param eventName User-defined name of the dispatched event.\n   * @param eventInfo Optional user-defined info of the dispatched event.\n   */\n  onItemCustomEvent?: (itemIndex: number, sectionIndex: number, eventName: string, eventInfo?: any) => void\n\n  /**\n   * Handler invoked when an item is selected in a section. The order of\n   * handlers invoked when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\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. The order of handlers\n   * invoked when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\n   *\n   * @param selectedIndices Dictionary of indices of selected items per section.\n   */\n  onSelectionChange?: (selection: AccordionSelection) => void\n\n  /**\n   * Component type for generating section headers inside the component. When\n   * absent, one will be generated automatically.\n   */\n  HeaderComponent?: ComponentType<AccordionHeaderProps<I, S>>\n\n  /**\n   * Component type for generating items for each section.\n   */\n  ItemComponent?: ComponentType<AccordionItemProps<I>>\n}>\n\n/**\n * A collection of selectable items laid out in sections in an accordion. Items\n * are generated based on the provided `ItemComponent` while each section header\n * is optionally provided by `HeaderComponent` or generated automatically.\n */\nexport const Accordion = forwardRef(({\n  children,\n  style,\n  autoCollapseSections = false,\n  collapseIconSvg,\n  expandedSectionIndices: externalExpandedSectionIndices,\n  expandIconSvg,\n  orientation = 'vertical',\n  sectionPadding = 0,\n  sections,\n  selection: externalSelection,\n  selectionMode = 'single',\n  usesDefaultStyles = false,\n  onActivateAt,\n  onCollapseSectionAt,\n  onDeselectAt,\n  onExpandedSectionsChange,\n  onExpandSectionAt,\n  onHeaderCustomEvent,\n  onItemCustomEvent,\n  onSelectAt,\n  onSelectionChange,\n  HeaderComponent,\n  ItemComponent,\n  ...props\n}, ref) => {\n  const isSectionIndexOutOfRange = (sectionIndex: number) => {\n    if (sectionIndex >= sections.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 = sections[sectionIndex].items\n\n    if (itemIndex >= items.length) return true\n    if (itemIndex < 0) return true\n\n    return false\n  }\n\n  const isSelectedAt = (itemIndex: number, sectionIndex: number) => (selection[sectionIndex]?.indexOf(itemIndex) ?? -1) >= 0\n\n  const sanitizeExpandedSectionIndices = (sectionIndices: number[]) => sortIndices(sectionIndices).filter(t => !isSectionIndexOutOfRange(t))\n\n  const sanitizeSelection = (selection: AccordionSelection) => {\n    const newValue: AccordionSelection = {}\n\n    for (const sectionIndex in sections) {\n      if (!Object.hasOwn(sections, sectionIndex)) continue\n\n      const indices = sortIndices([...selection[sectionIndex] ?? []])\n\n      newValue[Number(sectionIndex)] = sortIndices(indices).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    let transform: (val: number[]) => number[]\n\n    if (isSectionExpandedAt(sectionIndex)) {\n      transform = val => val.filter(t => t !== sectionIndex)\n    }\n    else if (autoCollapseSections) {\n      transform = val => [sectionIndex]\n    }\n    else {\n      transform = val => [...val.filter(t => t !== sectionIndex), sectionIndex]\n    }\n\n    handleExpandedSectionsChange(expandedSectionIndices, transform(expandedSectionIndices))\n  }\n\n  const handleSelectAt = (itemIndex: number, sectionIndex: number) => {\n    if (isSelectedAt(itemIndex, sectionIndex)) return\n\n    let transform: (val: AccordionSelection) => AccordionSelection\n\n    switch (selectionMode) {\n      case 'multiple':\n        transform = val => ({\n          ...val,\n          [sectionIndex]: sortIndices([...(val[sectionIndex] ?? []).filter(t => t !== itemIndex), itemIndex]),\n        })\n        break\n      case 'single':\n        transform = val => ({\n          [sectionIndex]: [itemIndex],\n        })\n        break\n      default:\n        return\n    }\n\n    const newValue = transform(selection)\n\n    prevSelectionRef.current = newValue\n    handleSelectionChange(selection, newValue)\n  }\n\n  const handleDeselectAt = (itemIndex: number, sectionIndex: number) => {\n    if (!isSelectedAt(itemIndex, sectionIndex)) return\n\n    const transform = (val: AccordionSelection) => ({\n      ...val,\n      [sectionIndex]: (val[sectionIndex] ?? []).filter(t => t !== itemIndex),\n    })\n\n    const newValue = transform(selection)\n\n    prevSelectionRef.current = newValue\n    handleSelectionChange(selection, newValue)\n  }\n\n  const handleExpandedSectionsChange = (oldValue: number[] | undefined, newValue: number[]) => {\n    if (isDeepEqual(oldValue, newValue)) return\n\n    const collapsed = oldValue?.filter(t => newValue.indexOf(t) === -1) ?? []\n    const expanded = newValue.filter(t => oldValue?.indexOf(t) === -1)\n\n    collapsed.forEach(t => onCollapseSectionAt?.(t))\n    expanded.forEach(t => onExpandSectionAt?.(t))\n\n    onExpandedSectionsChange?.(newValue)\n  }\n\n  const handleSelectionChange = (oldValue: AccordionSelection | undefined, newValue: AccordionSelection) => {\n    if (isDeepEqual(oldValue, newValue)) return\n\n    const numSections = sections.length\n\n    let allDeselected: number[][] = []\n    let allSelected: number[][] = []\n\n    for (let i = 0; i < numSections; i++) {\n      const oldSection = oldValue?.[i] ?? []\n      const newSection = newValue[i] ?? []\n      const deselected = oldSection.filter(t => newSection.indexOf(t) === -1)\n      const selected = newSection.filter(t => oldSection?.indexOf(t) === -1)\n\n      allDeselected = [...allDeselected, ...deselected.map(t => [t, i])]\n      allSelected = [...allSelected, ...selected.map(t => [t, i])]\n    }\n\n    allDeselected.forEach(t => onDeselectAt?.(t[0], t[1]))\n    allSelected.forEach(t => onSelectAt?.(t[0], t[1]))\n\n    onSelectionChange?.(newValue)\n  }\n\n  const selection = sanitizeSelection(externalSelection ?? {})\n  const expandedSectionIndices = sanitizeExpandedSectionIndices(externalExpandedSectionIndices ?? [])\n  const fixedStyles = getFixedStyles({ orientation })\n  const defaultStyles = usesDefaultStyles ? getDefaultStyles({ orientation }) : undefined\n  const prevSelectionRef = useRef<AccordionSelection>()\n  const prevSelection = prevSelectionRef.current\n\n  useEffect(() => {\n    prevSelectionRef.current = selection\n\n    if (prevSelection === undefined) return\n\n    handleSelectionChange(prevSelection, selection)\n  }, [JSON.stringify(selection)])\n\n  return (\n    <div {...props} ref={ref} data-component='accordion' style={styles(style, fixedStyles.root)}>\n      <Each in={sections}>\n        {(section, sectionIndex) => {\n          const { collectionPadding = 0, items, itemLength = 50, itemPadding = 0, isSelectionTogglable, layout = 'list', maxVisible = -1, numSegments = 1 } = section\n          const allVisible = layout === 'list' ? items.length : Math.ceil(items.length / numSegments)\n          const numVisible = maxVisible < 0 ? allVisible : Math.min(allVisible, maxVisible)\n          const maxLength = itemLength * numVisible + itemPadding * (numVisible - 1)\n          const isCollapsed = !isSectionExpandedAt(sectionIndex)\n          const expandIconComponent = expandIconSvg ? <FlatSVG style={defaultStyles?.expandIcon} svg={expandIconSvg}/> : <></>\n          const collapseIconComponent = collapseIconSvg ? <FlatSVG style={defaultStyles?.collapseIcon} svg={collapseIconSvg}/> : expandIconComponent\n\n          return (\n            <div\n              style={styles(fixedStyles.section, orientation === 'vertical' ? {\n                marginTop: sectionIndex === 0 ? '0px' : `${sectionPadding}px`,\n              } : {\n                marginLeft: sectionIndex === 0 ? '0px' : `${sectionPadding}px`,\n              })}\n            >\n              {HeaderComponent ? (\n                <HeaderComponent\n                  className={clsx({ collapsed: isCollapsed, expanded: !isCollapsed })}\n                  data-child='header'\n                  index={sectionIndex}\n                  isCollapsed={isCollapsed}\n                  section={section}\n                  style={styles(fixedStyles.header)}\n                  onClick={() => toggleSectionAt(sectionIndex)}\n                  onCustomEvent={(name, info) => onHeaderCustomEvent?.(sectionIndex, name, info)}\n                />\n              ) : (\n                <button\n                  className={clsx({ collapsed: isCollapsed, expanded: !isCollapsed })}\n                  data-child='header'\n                  style={styles(fixedStyles.header, defaultStyles?.header)}\n                  onClick={() => toggleSectionAt(sectionIndex)}\n                >\n                  <span dangerouslySetInnerHTML={{ __html: section.label }} style={styles(defaultStyles?.headerLabel)}/>\n                  {cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n                    style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n                  })}\n                </button>\n              )}\n              <Collection\n                className={clsx({ collapsed: isCollapsed, expanded: !isCollapsed })}\n                data-child='collection'\n                isSelectionTogglable={isSelectionTogglable}\n                ItemComponent={ItemComponent}\n                itemLength={itemLength}\n                itemPadding={itemPadding}\n                items={items}\n                layout={layout}\n                numSegments={numSegments}\n                orientation={orientation}\n                selection={selection[sectionIndex] ?? []}\n                selectionMode={selectionMode}\n                style={styles(fixedStyles.list, defaultStyles?.collection, orientation === 'vertical' ? {\n                  width: '100%',\n                  height: isCollapsed ? '0px' : `${maxLength}px`,\n                  marginTop: isCollapsed ? '0px' : `${collectionPadding}px`,\n                  overflowY: maxVisible < 0 || maxVisible >= allVisible ? 'hidden' : 'scroll',\n                } : {\n                  marginLeft: isCollapsed ? '0px' : `${collectionPadding}px`,\n                  overflowX: maxVisible < 0 || maxVisible >= allVisible ? 'hidden' : 'scroll',\n                  width: isCollapsed ? '0px' : `${maxLength}px`,\n                  height: '100%',\n                })}\n                onActivateAt={itemIndex => {\n                  onActivateAt?.(itemIndex, sectionIndex)\n                }}\n                onDeselectAt={itemIndex => {\n                  handleDeselectAt?.(itemIndex, sectionIndex)\n                }}\n                onItemCustomEvent={(itemIndex, name, info) => {\n                  onItemCustomEvent?.(itemIndex, sectionIndex, name, info)\n                }}\n                onSelectAt={itemIndex => {\n                  handleSelectAt?.(itemIndex, sectionIndex)\n                }}\n              />\n            </div>\n          )\n        }}\n      </Each>\n    </div>\n  )\n}) as <I, S extends AccordionSection<I> = AccordionSection<I>>(props: AccordionProps<I, S> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nObject.defineProperty(Accordion, 'displayName', { value: 'Accordion', writable: false })\n\nfunction sortIndices(indices: number[]): number[] {\n  return indices.sort((a, b) => a - b)\n}\n\nfunction getFixedStyles({ orientation = 'vertical' }) {\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    list: {\n\n    },\n    header: {\n      cursor: 'pointer',\n      margin: '0',\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  })\n}\n\nfunction getDefaultStyles({ orientation = 'vertical' }) {\n  return asStyleDict({\n    collection: {\n      transitionDuration: '100ms',\n      transitionTimingFunction: 'ease-out',\n      ...orientation === 'vertical' ? {\n        transitionProperty: 'height, margin',\n      } : {\n        transitionProperty: 'width, margin',\n      },\n    },\n    header: {\n      border: 'none',\n      outline: 'none',\n      alignItems: 'center',\n      background: '#fff',\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/components/BurgerButton.d.ts

@@ -0,0 +1,34 @@
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
+export type BurgerButtonProps = HTMLAttributes<HTMLButtonElement> & PropsWithChildren<{
+    height?: number;
+    isActive?: boolean;
+    isDoubleJointed?: boolean;
+    isLastBarHalfWidth?: boolean;
+    thickness?: number;
+    transitionDuration?: number;
+    usesDefaultStyles?: boolean;
+    width?: number;
+    onActivate?: () => void;
+    onDeactivate?: () => void;
+}>;
+/**
+ * Three-striped burger button component that transforms into an "X" when
+ * selected.
+ *
+ * @exports BurgerButtonBar Component for each line on the burger button.
+ */
+export declare const BurgerButton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & {
+    height?: number;
+    isActive?: boolean;
+    isDoubleJointed?: boolean;
+    isLastBarHalfWidth?: boolean;
+    thickness?: number;
+    transitionDuration?: number;
+    usesDefaultStyles?: boolean;
+    width?: number;
+    onActivate?: () => void;
+    onDeactivate?: () => void;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const BurgerButtonBar: ({ ...props }: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;