etudes 3.7.0 → 3.8.0

package/lib/Accordion.d.ts

@@ -1,17 +1,26 @@
 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 AccordionHeaderProps<I, S extends AccordionSectionData<I> = AccordionSectionData<I>> = HTMLAttributes<HTMLElement> & PropsWithChildren<{
-    section: S;
+import { type ListItemProps, type ListOrientation, type ListProps, type ListSelectionMode } from './List';
+export type AccordionSectionProps<I> = Omit<ListProps<I>, 'orientation' | 'selection' | 'selectionMode' | 'onActivateAt' | 'onSelectAt' | 'onDeselectAt' | 'onSelectionChange'> & {
+    /**
+     * Label for the 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;
+};
+export type AccordionSelection = Record<number, number[]>;
+export type AccordionItemProps<T> = ListItemProps<T>;
+export type AccordionHeaderProps<I, S extends AccordionSectionProps<I> = AccordionSectionProps<I>> = HTMLAttributes<HTMLElement> & PropsWithChildren<{
     index: number;
     isCollapsed: boolean;
+    section: 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<{
+export type AccordionProps<I, S extends AccordionSectionProps<I> = AccordionSectionProps<I>> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
      * Specifies if expanded sections should automatically collapse upon expanding
      * another section.
@@ -34,13 +43,9 @@ 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
-     * remaining items. Any value less than 0 indicates that all items will be
-     * visible when a section expands.
+     * Orientation of this component.
      */
-    maxVisibleItems?: number;
+    orientation?: ListOrientation;
     /**
      * Padding (in pixels) between each section.
      */
@@ -48,16 +53,20 @@ export type AccordionProps<I, S extends AccordionSectionData<I> = AccordionSecti
     /**
      * Indices of selected items per section.
      */
-    selectedItemIndices?: Record<number, number[]>;
+    selection?: AccordionSelection;
+    /**
+     * Selection mode of each section.
+     */
+    selectionMode?: ListSelectionMode;
     /**
      * React component type to be used for generating headers inside the
      * component. When absent, one will be generated automatically.
      */
     headerComponentType?: ComponentType<AccordionHeaderProps<I, S>>;
     /**
-     * React component type to be used for generating items inside the component.
+     * Specifies if the component should use default styles.
      */
-    itemComponentType: ComponentType<AccordionItemProps<I>>;
+    useDefaultStyles?: boolean;
     /**
      * Handler invoked when an item is activated in a section.
      *
@@ -87,11 +96,20 @@ 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?: (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 Name of the dispatched event.
      * @param eventInfo Optional info of the dispatched event.
      */
-    onHeaderCustomEvent?: (index: number, eventName: string, eventInfo?: any) => void;
+    onItemCustomEvent?: (itemIndex: number, sectionIndex: number, eventName: string, eventInfo?: any) => void;
     /**
      * Handler invoked when an item is selected in a section.
      *
@@ -104,9 +122,9 @@ 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"> & {
+declare const _default: <I, S extends AccordionSectionProps<I> = AccordionSectionProps<I>>(props: React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Specifies if expanded sections should automatically collapse upon expanding
      * another section.
@@ -129,13 +147,9 @@ 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
-     * remaining items. Any value less than 0 indicates that all items will be
-     * visible when a section expands.
+     * Orientation of this component.
      */
-    maxVisibleItems?: number | undefined;
+    orientation?: ListOrientation | undefined;
     /**
      * Padding (in pixels) between each section.
      */
@@ -143,16 +157,20 @@ declare const _default: <I, S extends AccordionSectionData<I> = AccordionSection
     /**
      * Indices of selected items per section.
      */
-    selectedItemIndices?: Record<number, number[]> | undefined;
+    selection?: AccordionSelection | undefined;
+    /**
+     * Selection mode of each section.
+     */
+    selectionMode?: ListSelectionMode | undefined;
     /**
      * React component type to be used for generating headers inside the
      * component. When absent, one will be generated automatically.
      */
     headerComponentType?: React.ComponentType<AccordionHeaderProps<I, S>> | undefined;
     /**
-     * React component type to be used for generating items inside the component.
+     * Specifies if the component should use default styles.
      */
-    itemComponentType: React.ComponentType<AccordionItemProps<I>>;
+    useDefaultStyles?: boolean | undefined;
     /**
      * Handler invoked when an item is activated in a section.
      *
@@ -182,11 +200,20 @@ 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?: ((sectionIndex: number, eventName: string, eventInfo?: any) => void) | undefined;
+    /**
+     * Handler invoked when a custom event is dispatched from an item.
+     *
+     * @param itemIndex Item index.
+     * @param sectionIndex Section index.
      * @param eventName Name of the dispatched event.
      * @param eventInfo Optional info of the dispatched event.
      */
-    onHeaderCustomEvent?: ((index: number, eventName: string, eventInfo?: any) => void) | undefined;
+    onItemCustomEvent?: ((itemIndex: number, sectionIndex: number, eventName: string, eventInfo?: any) => void) | undefined;
     /**
      * Handler invoked when an item is selected in a section.
      *
@@ -199,7 +226,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, collapseIconSvg = _a.collapseIconSvg, data = _a.data, _c = _a.expandedSectionIndices, externalExpandedSectionIndices = _c === void 0 ? [] : _c, expandIconSvg = _a.expandIconSvg, _d = _a.orientation, orientation = _d === void 0 ? 'vertical' : _d, _e = _a.sectionPadding, sectionPadding = _e === void 0 ? 0 : _e, _f = _a.selection, externalSelection = _f === void 0 ? {} : _f, _g = _a.selectionMode, selectionMode = _g === void 0 ? 'single' : _g, _h = _a.useDefaultStyles, useDefaultStyles = _h === void 0 ? false : _h, HeaderComponent = _a.headerComponentType, onActivateAt = _a.onActivateAt, onCollapseSectionAt = _a.onCollapseSectionAt, onDeselectAt = _a.onDeselectAt, onExpandSectionAt = _a.onExpandSectionAt, onHeaderCustomEvent = _a.onHeaderCustomEvent, onItemCustomEvent = _a.onItemCustomEvent, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, props = __rest(_a, ["children", "className", "style", "autoCollapseSections", "collapseIconSvg", "data", "expandedSectionIndices", "expandIconSvg", "orientation", "sectionPadding", "selection", "selectionMode", "useDefaultStyles", "headerComponentType", "onActivateAt", "onCollapseSectionAt", "onDeselectAt", "onExpandSectionAt", "onHeaderCustomEvent", "onItemCustomEvent", "onSelectAt", "onSelectionChange"]);
     var isSectionIndexOutOfRange = function (sectionIndex) {
         if (sectionIndex >= data.length)
             return true;
@@ -96,7 +96,7 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
     var isItemIndexOutOfRange = function (itemIndex, sectionIndex) {
         if (isSectionIndexOutOfRange(sectionIndex))
             return true;
-        var items = data[sectionIndex].items;
+        var items = data[sectionIndex].data;
         if (itemIndex >= items.length)
             return true;
         if (itemIndex < 0)
@@ -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,18 @@ 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 _j = __read((0, react_2.useState)(sanitizedExpandedSectionIndices), 2), expandedSectionIndices = _j[0], setExpandedSectionIndices = _j[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 _k = __read((0, react_2.useState)(sanitizedExternalSelection), 2), selection = _k[0], setSelection = _k[1];
     (0, react_2.useEffect)(function () {
         if ((0, react_1.default)(sanitizedExpandedSectionIndices, expandedSectionIndices))
             return;
@@ -180,7 +171,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 +179,64 @@ 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)
-            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({ 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;
+            var sectionData = section.data, _b = section.itemLength, itemLength = _b === void 0 ? 50 : _b, _c = section.itemPadding, itemPadding = _c === void 0 ? 0 : _c, isSelectionTogglable = section.isSelectionTogglable, itemComponentType = section.itemComponentType, _d = section.layout, layout = _d === void 0 ? 'list' : _d, _e = section.maxVisible, maxVisible = _e === void 0 ? -1 : _e, _f = section.numSegments, numSegments = _f === void 0 ? 1 : _f;
+            var allVisible = layout === 'list' ? sectionData.length : Math.ceil(sectionData.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 ? 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, "px"),
+                } : {
+                    marginLeft: sectionIndex === 0 ? '0px' : "".concat(sectionPadding, "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: (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' ? {
+                        width: '100%',
+                        top: '100%',
+                        height: isCollapsed ? '0px' : "".concat(maxLength, "px"),
+                        marginTop: isCollapsed ? '0px' : "".concat(itemPadding, "px"),
+                        overflowY: maxVisible < 0 ? 'hidden' : maxVisible < allVisible ? 'scroll' : 'hidden',
+                    } : {
+                        marginLeft: isCollapsed ? '0px' : "".concat(itemPadding, "px"),
+                        overflowX: maxVisible < 0 ? 'hidden' : maxVisible < allVisible ? 'scroll' : 'hidden',
+                        width: isCollapsed ? '0px' : "".concat(maxLength, "px"),
+                        height: '100%',
+                        left: '100%',
+                    }), data: sectionData, selectionMode: selectionMode, isSelectionTogglable: isSelectionTogglable, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, orientation: orientation, layout: layout, numSegments: numSegments, selection: (_a = selection[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); }, onItemCustomEvent: function (itemIndex, eventName, eventInfo) { return onItemCustomEvent === null || onItemCustomEvent === void 0 ? void 0 : onItemCustomEvent(itemIndex, sectionIndex, eventName, eventInfo); }, 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 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',
@@ -218,21 +251,12 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
             flexDirection: 'row',
             height: '100%',
         }),
-        header: __assign({ borderWidth: "".concat(borderThickness, "px"), cursor: 'pointer', margin: '0', outline: 'none' }, orientation === 'vertical' ? {
+        list: {},
+        header: __assign({ border: 'none', cursor: 'pointer', margin: '0', outline: 'none' }, orientation === 'vertical' ? {
             width: '100%',
         } : {
             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 +265,31 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
             margin: '0',
             padding: '0',
         },
+    });
+}
+function getDefaultStyles(_a) {
+    var orientation = _a.orientation;
+    return (0, asStyleDict_1.default)({
         list: __assign({ transitionDuration: '100ms', transitionTimingFunction: 'ease-out' }, orientation === 'vertical' ? {
-            width: '100%',
             transitionProperty: 'height, margin',
-            top: '100%',
         } : {
-            height: '100%',
             transitionProperty: 'width, margin',
-            left: '100%',
         }),
-    });
-    var defaultStyles = (0, asStyleDict_1.default)({
-        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' ? {
+        header: __assign({ 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',
@@ -280,35 +313,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