etudes 5.2.0 → 5.3.1

package/components/Accordion.js

@@ -1,264 +1,214 @@
-"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");
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import isDeepEqual from 'fast-deep-equal/react';
+import { forwardRef, useEffect, useRef } from 'react';
+import { Each } from '../operators/Each.js';
+import { asStyleDict, cloneStyledElement, styles } from '../utils/index.js';
+import { Collection } from './Collection.js';
+import { FlatSVG } from './FlatSVG.js';
 /**
  * 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) {
+export const Accordion = forwardRef(({ children, style, autoCollapseSections = false, collapseIconSvg, expandedSectionIndices: externalExpandedSectionIndices, expandIconSvg, orientation = 'vertical', sectionPadding = 0, sections, selection: externalSelection, selectionMode = 'single', usesDefaultStyles = false, onActivateAt, onCollapseSectionAt, onDeselectAt, onExpandedSectionsChange, onExpandSectionAt, onHeaderCustomEvent, onItemCustomEvent, onSelectAt, onSelectionChange, HeaderComponent, ItemComponent, ...props }, ref) => {
+    const isSectionIndexOutOfRange = (sectionIndex) => {
         if (sectionIndex >= sections.length)
             return true;
         if (sectionIndex < 0)
             return true;
         return false;
     };
-    var isItemIndexOutOfRange = function (itemIndex, sectionIndex) {
+    const isItemIndexOutOfRange = (itemIndex, sectionIndex) => {
         if (isSectionIndexOutOfRange(sectionIndex))
             return true;
-        var items = sections[sectionIndex].items;
+        const 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) {
+    const isSelectedAt = (itemIndex, sectionIndex) => (selection[sectionIndex]?.indexOf(itemIndex) ?? -1) >= 0;
+    const sanitizeExpandedSectionIndices = (sectionIndices) => sortIndices(sectionIndices).filter(t => !isSectionIndexOutOfRange(t));
+    const sanitizeSelection = (selection) => {
+        const newValue = {};
+        for (const sectionIndex in sections) {
             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);
+                continue;
+            const indices = sortIndices([...selection[sectionIndex] ?? []]);
+            newValue[Number(sectionIndex)] = sortIndices(indices).filter(t => !isItemIndexOutOfRange(t, Number(sectionIndex)));
         }
         return newValue;
     };
-    var isSectionExpandedAt = function (sectionIndex) { return expandedSectionIndices.indexOf(sectionIndex) >= 0; };
-    var toggleSectionAt = function (sectionIndex) {
-        var transform;
+    const isSectionExpandedAt = (sectionIndex) => expandedSectionIndices.indexOf(sectionIndex) >= 0;
+    const toggleSectionAt = (sectionIndex) => {
+        let transform;
         if (isSectionExpandedAt(sectionIndex)) {
-            transform = function (val) { return val.filter(function (t) { return t !== sectionIndex; }); };
+            transform = val => val.filter(t => t !== sectionIndex);
         }
         else if (autoCollapseSections) {
-            transform = function (val) { return [sectionIndex]; };
+            transform = val => [sectionIndex];
         }
         else {
-            transform = function (val) { return __spreadArray(__spreadArray([], __read(val.filter(function (t) { return t !== sectionIndex; })), false), [sectionIndex], false); };
+            transform = val => [...val.filter(t => t !== sectionIndex), sectionIndex];
         }
         handleExpandedSectionsChange(expandedSectionIndices, transform(expandedSectionIndices));
     };
-    var handleSelectAt = function (itemIndex, sectionIndex) {
+    const handleSelectAt = (itemIndex, sectionIndex) => {
         if (isSelectedAt(itemIndex, sectionIndex))
             return;
-        var transform;
+        let 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)));
-                };
+                transform = val => ({
+                    ...val,
+                    [sectionIndex]: sortIndices([...(val[sectionIndex] ?? []).filter(t => t !== itemIndex), itemIndex]),
+                });
                 break;
             case 'single':
-                transform = function (val) {
-                    var _a;
-                    return (_a = {},
-                        _a[sectionIndex] = [itemIndex],
-                        _a);
-                };
+                transform = val => ({
+                    [sectionIndex]: [itemIndex],
+                });
                 break;
             default:
                 return;
         }
-        var newValue = transform(selection);
+        const newValue = transform(selection);
         prevSelectionRef.current = newValue;
         handleSelectionChange(selection, newValue);
     };
-    var handleDeselectAt = function (itemIndex, sectionIndex) {
+    const handleDeselectAt = (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);
+        const transform = (val) => ({
+            ...val,
+            [sectionIndex]: (val[sectionIndex] ?? []).filter(t => t !== itemIndex),
+        });
+        const newValue = transform(selection);
         prevSelectionRef.current = newValue;
         handleSelectionChange(selection, newValue);
     };
-    var handleExpandedSectionsChange = function (oldValue, newValue) {
-        var _a;
-        if ((0, react_1.default)(oldValue, newValue))
+    const handleExpandedSectionsChange = (oldValue, newValue) => {
+        if (isDeepEqual(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);
+        const collapsed = oldValue?.filter(t => newValue.indexOf(t) === -1) ?? [];
+        const expanded = newValue.filter(t => oldValue?.indexOf(t) === -1);
+        collapsed.forEach(t => onCollapseSectionAt?.(t));
+        expanded.forEach(t => onExpandSectionAt?.(t));
+        onExpandedSectionsChange?.(newValue);
     };
-    var handleSelectionChange = function (oldValue, newValue) {
-        var _a, _b;
-        if ((0, react_1.default)(oldValue, newValue))
+    const handleSelectionChange = (oldValue, newValue) => {
+        if (isDeepEqual(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);
+        const numSections = sections.length;
+        let allDeselected = [];
+        let allSelected = [];
+        for (let i = 0; i < numSections; i++) {
+            const oldSection = oldValue?.[i] ?? [];
+            const newSection = newValue[i] ?? [];
+            const deselected = oldSection.filter(t => newSection.indexOf(t) === -1);
+            const selected = newSection.filter(t => oldSection?.indexOf(t) === -1);
+            allDeselected = [...allDeselected, ...deselected.map(t => [t, i])];
+            allSelected = [...allSelected, ...selected.map(t => [t, 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);
+        allDeselected.forEach(t => onDeselectAt?.(t[0], t[1]));
+        allSelected.forEach(t => onSelectAt?.(t[0], t[1]));
+        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 () {
+    const selection = sanitizeSelection(externalSelection ?? {});
+    const expandedSectionIndices = sanitizeExpandedSectionIndices(externalExpandedSectionIndices ?? []);
+    const fixedStyles = getFixedStyles({ orientation });
+    const defaultStyles = usesDefaultStyles ? getDefaultStyles({ orientation }) : undefined;
+    const prevSelectionRef = useRef();
+    const prevSelection = prevSelectionRef.current;
+    useEffect(() => {
         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"),
+    return (_jsx("div", { ...props, ref: ref, "data-component": 'accordion', style: styles(style, fixedStyles.root), children: _jsx(Each, { in: sections, children: (section, sectionIndex) => {
+                const { collectionPadding = 0, items, itemLength = 50, itemPadding = 0, isSelectionTogglable, layout = 'list', maxVisible = -1, numSegments = 1 } = section;
+                const allVisible = layout === 'list' ? items.length : Math.ceil(items.length / numSegments);
+                const numVisible = maxVisible < 0 ? allVisible : Math.min(allVisible, maxVisible);
+                const maxLength = itemLength * numVisible + itemPadding * (numVisible - 1);
+                const isCollapsed = !isSectionExpandedAt(sectionIndex);
+                const expandIconComponent = expandIconSvg ? _jsx(FlatSVG, { style: defaultStyles?.expandIcon, svg: expandIconSvg }) : _jsx(_Fragment, {});
+                const collapseIconComponent = collapseIconSvg ? _jsx(FlatSVG, { style: defaultStyles?.collapseIcon, svg: collapseIconSvg }) : expandIconComponent;
+                return (_jsxs("div", { style: styles(fixedStyles.section, orientation === 'vertical' ? {
+                        marginTop: sectionIndex === 0 ? '0px' : `${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' ? {
+                        marginLeft: sectionIndex === 0 ? '0px' : `${sectionPadding}px`,
+                    }), children: [HeaderComponent ? (_jsx(HeaderComponent, { className: clsx({ collapsed: isCollapsed, expanded: !isCollapsed }), "data-child": 'header', index: sectionIndex, isCollapsed: isCollapsed, section: section, style: styles(fixedStyles.header), onClick: () => toggleSectionAt(sectionIndex), onCustomEvent: (name, info) => onHeaderCustomEvent?.(sectionIndex, name, info) })) : (_jsxs("button", { className: clsx({ collapsed: isCollapsed, expanded: !isCollapsed }), "data-child": 'header', style: styles(fixedStyles.header, defaultStyles?.header), onClick: () => toggleSectionAt(sectionIndex), children: [_jsx("span", { dangerouslySetInnerHTML: { __html: section.label }, style: styles(defaultStyles?.headerLabel) }), cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {
+                                    style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),
+                                })] })), _jsx(Collection, { className: clsx({ collapsed: isCollapsed, expanded: !isCollapsed }), "data-child": 'collection', isSelectionTogglable: isSelectionTogglable, ItemComponent: ItemComponent, itemLength: itemLength, itemPadding: itemPadding, items: items, layout: layout, numSegments: numSegments, orientation: orientation, selection: selection[sectionIndex] ?? [], selectionMode: selectionMode, style: styles(fixedStyles.list, defaultStyles?.collection, orientation === 'vertical' ? {
                                 width: '100%',
-                                height: isCollapsed ? '0px' : "".concat(maxLength, "px"),
-                                marginTop: isCollapsed ? '0px' : "".concat(collectionPadding, "px"),
+                                height: isCollapsed ? '0px' : `${maxLength}px`,
+                                marginTop: isCollapsed ? '0px' : `${collectionPadding}px`,
                                 overflowY: maxVisible < 0 || maxVisible >= allVisible ? 'hidden' : 'scroll',
                             } : {
-                                marginLeft: isCollapsed ? '0px' : "".concat(collectionPadding, "px"),
+                                marginLeft: isCollapsed ? '0px' : `${collectionPadding}px`,
                                 overflowX: maxVisible < 0 || maxVisible >= allVisible ? 'hidden' : 'scroll',
-                                width: isCollapsed ? '0px' : "".concat(maxLength, "px"),
+                                width: isCollapsed ? '0px' : `${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);
+                            }), onActivateAt: itemIndex => {
+                                onActivateAt?.(itemIndex, sectionIndex);
+                            }, onDeselectAt: itemIndex => {
+                                handleDeselectAt?.(itemIndex, sectionIndex);
+                            }, onItemCustomEvent: (itemIndex, name, info) => {
+                                onItemCustomEvent?.(itemIndex, sectionIndex, name, info);
+                            }, onSelectAt: itemIndex => {
+                                handleSelectAt?.(itemIndex, sectionIndex);
                             } })] }));
-            } }) })));
+            } }) }));
 });
-Object.defineProperty(exports.Accordion, 'displayName', { value: 'Accordion', writable: false });
+Object.defineProperty(Accordion, 'displayName', { value: 'Accordion', writable: false });
 function sortIndices(indices) {
-    return indices.sort(function (a, b) { return a - b; });
+    return indices.sort((a, b) => 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%',
-        }),
+function getFixedStyles({ orientation = 'vertical' }) {
+    return asStyleDict({
+        root: {
+            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: {
+            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%',
-        }),
+        header: {
+            cursor: 'pointer',
+            margin: '0',
+            ...orientation === 'vertical' ? {
+                width: '100%',
+            } : {
+                height: '100%',
+            },
+        },
         expandIcon: {
             margin: '0',
             padding: '0',
@@ -269,19 +219,36 @@ function getFixedStyles(_a) {
         },
     });
 }
-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',
-        }),
+function getDefaultStyles({ orientation = 'vertical' }) {
+    return asStyleDict({
+        collection: {
+            transitionDuration: '100ms',
+            transitionTimingFunction: 'ease-out',
+            ...orientation === 'vertical' ? {
+                transitionProperty: 'height, margin',
+            } : {
+                transitionProperty: 'width, margin',
+            },
+        },
+        header: {
+            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',
@@ -316,4 +283,3 @@ function getDefaultStyles(_a) {
         },
     });
 }
-//# sourceMappingURL=Accordion.js.map