etudes 1.2.0 → 2.0.0

package/README.md

@@ -1,3 +1,3 @@
 # Études [![npm](https://img.shields.io/npm/v/etudes.svg)](https://www.npmjs.com/package/etudes) [![CI](https://github.com/andrewscwei/etudes/workflows/CI/badge.svg)](https://github.com/andrewscwei/etudes/actions?query=workflow%3ACI) [![CD](https://github.com/andrewscwei/etudes/workflows/CD/badge.svg)](https://github.com/andrewscwei/etudes/actions?query=workflow%3ACD)
 
-A study of styled React components.
+A study of headless React components.

package/lib/Accordion.d.ts

@@ -1,38 +1,16 @@
-import React, { ComponentType, CSSProperties, PureComponent } from 'react';
-import List, { ItemComponentProps as ListItemComponentProps } from './List';
-import { ExtendedCSSFunction, Orientation } from './types';
-/**
- * Interface defining the props of the item component type to be provided to the
- * component. The data type is generic.
- */
-export declare type ItemComponentProps<T = Record<string, never>> = ListItemComponentProps<T>;
-export declare type SectionHeaderCSSProps = Readonly<{
-    borderColor: string;
-    borderThickness: number;
-    isCollapsed: boolean;
-    orientation: Orientation;
-}>;
-export declare type SectionCSSProps = Readonly<{
-    isCollapsed: boolean;
-    orientation: Orientation;
-}>;
-export interface SectionProps<T = Record<string, never>> {
+import React, { ComponentType, HTMLAttributes, PropsWithChildren, ReactElement, Ref } from 'react';
+import { ListItemProps } from './List';
+declare type Orientation = 'horizontal' | 'vertical';
+export declare type AccordionItemProps<T> = ListItemProps<T>;
+export declare type SectionData<T> = {
     label: string;
     items: T[];
-}
-export interface Props<T = Record<string, never>> {
-    /**
-     * Class attribute to the root element.
-     */
-    className?: string;
-    /**
-     * Inline style attribute to the element.
-     */
-    style?: CSSProperties;
+};
+export declare type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
      * Data provided to each section.
      */
-    data: SectionProps<T>[];
+    data: SectionData<T>[];
     /**
      * Indicates if sections can be toggled, as in, once a section is expanded,
      * it collapses when being selected again.
@@ -42,7 +20,7 @@ export interface Props<T = Record<string, never>> {
      * Index of the section that is selected by default. Any value less than 0
      * indicates that no section is selected by default.
      */
-    defaultSelectedSectionIndex?: number;
+    defaultExpandedSectionIndex?: number;
     /**
      * Length (in pixels) of each item. This does not apply to the section hedaer
      * itself. Length refers to the height in vertical orientation and width in
@@ -69,10 +47,6 @@ export interface Props<T = Record<string, never>> {
      * Orientation of the component.
      */
     orientation?: Orientation;
-    /**
-     * Color of the border of every item and the section header itself.
-     */
-    borderColor?: string;
     /**
      * Thickness of the border (in pixels) of every item and the section header
      * itself. 0 indicates no borders.
@@ -85,7 +59,7 @@ export interface Props<T = Record<string, never>> {
     /**
      * React component type to be used for generating items inside the component.
      */
-    itemComponentType: ComponentType<ItemComponentProps<T>>;
+    itemComponentType: ComponentType<AccordionItemProps<T>>;
     /**
      * Handler invoked when the selected item index of any section changes.
      */
@@ -94,39 +68,74 @@ export interface Props<T = Record<string, never>> {
      * Handler invoked when the selected section index changes.
      */
     onSectionIndexChange?: (index: number) => void;
+}>;
+declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Data provided to each section.
+     */
+    data: SectionData<T>[];
+    /**
+     * Indicates if sections can be toggled, as in, once a section is expanded,
+     * it collapses when being selected again.
+     */
+    isTogglable?: boolean | undefined;
+    /**
+     * Index of the section that is selected by default. Any value less than 0
+     * indicates that no section is selected by default.
+     */
+    defaultExpandedSectionIndex?: number | undefined;
+    /**
+     * Length (in pixels) of each item. This does not apply to the section hedaer
+     * itself. Length refers to the height in vertical orientation and width in
+     * horizontal orientation.
+     */
+    itemLength?: number | undefined;
+    /**
+     * Padding (in pixels) between each item.
+     */
+    itemPadding?: number | undefined;
     /**
-     * Additional CSS to be provided to each section element.
-     */
-    sectionCSS?: ExtendedCSSFunction<SectionCSSProps>;
-    /**
-     * Additional CSS to be provided to each section header element.
-     */
-    sectionHeaderCSS?: ExtendedCSSFunction<SectionHeaderCSSProps>;
-}
-export interface State {
-    /**
-     * Current selected section index.
-     */
-    selectedSectionIndex: number;
-    /**
-     * Current selected item index of the expanded section.
-     */
-    selectedItemIndex: number;
-}
-export default class Accordion<T = Record<string, never>> extends PureComponent<Props<T>, State> {
-    nodeRefs: {
-        lists: React.RefObject<List<T>>[];
-    };
-    constructor(props: Props<T>);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Props<T>, prevState: State): void;
-    render(): JSX.Element;
-    private isSectionSelectedAt;
-    private toggleSectionAt;
-    private selectSectionAt;
-    private deselectSectionAt;
-    private isItemSelectedAt;
-    private toggleItemAt;
-    private selectItemAt;
-    private deselectItemAt;
-}
+     * Padding (in pixels) between each section.
+     */
+    sectionPadding?: number | 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.
+     */
+    maxVisibleItems?: number | undefined;
+    /**
+     * Orientation of the component.
+     */
+    orientation?: Orientation | undefined;
+    /**
+     * Thickness of the border (in pixels) of every item and the section header
+     * itself. 0 indicates no borders.
+     */
+    borderThickness?: number | undefined;
+    /**
+     * SVG markup to be put in the section header as the expand icon.
+     */
+    expandIconSvg?: string | undefined;
+    /**
+     * React component type to be used for generating items inside the component.
+     */
+    itemComponentType: React.ComponentType<AccordionItemProps<T>>;
+    /**
+     * Handler invoked when the selected item index of any section changes.
+     */
+    onItemIndexChange?: ((index: number) => void) | undefined;
+    /**
+     * Handler invoked when the selected section index changes.
+     */
+    onSectionIndexChange?: ((index: number) => void) | undefined;
+} & {
+    children?: React.ReactNode;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => ReactElement;
+export default _default;
+export declare const AccordionHeader: ({ ...props }: HTMLAttributes<HTMLButtonElement>) => JSX.Element;
+export declare const AccordionExpandIcon: ({ ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;

package/lib/Accordion.js

@@ -1,23 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -52,191 +33,200 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
+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]];
         }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    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.AccordionExpandIcon = exports.AccordionHeader = void 0;
+var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
+var Each_1 = __importDefault(require("./Each"));
+var FlatSVG_1 = __importDefault(require("./FlatSVG"));
 var List_1 = __importDefault(require("./List"));
-var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:accordion') : function () { };
-var Accordion = /** @class */ (function (_super) {
-    __extends(Accordion, _super);
-    function Accordion(props) {
-        var _this = this;
-        var _a;
-        _this = _super.call(this, props) || this;
-        _this.nodeRefs = {
-            lists: [],
-        };
-        _this.state = {
-            selectedSectionIndex: (_a = props.defaultSelectedSectionIndex) !== null && _a !== void 0 ? _a : -1,
-            selectedItemIndex: -1,
-        };
-        return _this;
-    }
-    Accordion.prototype.componentDidMount = function () {
-        var _a, _b, _c, _d;
-        (_b = (_a = this.props).onSectionIndexChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.selectedSectionIndex);
-        (_d = (_c = this.props).onItemIndexChange) === null || _d === void 0 ? void 0 : _d.call(_c, this.state.selectedItemIndex);
-    };
-    Accordion.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a, _b, _c, _d;
-        if (prevState.selectedSectionIndex !== this.state.selectedSectionIndex) {
-            debug("Changing section index to ".concat(this.state.selectedSectionIndex, "... OK"));
-            (_b = (_a = this.props).onSectionIndexChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.selectedSectionIndex);
+var asClassNameDict_1 = __importDefault(require("./utils/asClassNameDict"));
+var asComponentDict_1 = __importDefault(require("./utils/asComponentDict"));
+var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
+var cloneStyledElement_1 = __importDefault(require("./utils/cloneStyledElement"));
+var styles_1 = __importDefault(require("./utils/styles"));
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, style = _a.style, _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, data = _a.data, _c = _a.defaultExpandedSectionIndex, defaultExpandedSectionIndex = _c === void 0 ? -1 : _c, expandIconSvg = _a.expandIconSvg, _d = _a.isTogglable, isTogglable = _d === void 0 ? true : _d, itemComponentType = _a.itemComponentType, _e = _a.itemLength, itemLength = _e === void 0 ? 50 : _e, _f = _a.itemPadding, itemPadding = _f === void 0 ? 0 : _f, _g = _a.maxVisibleItems, maxVisibleItems = _g === void 0 ? -1 : _g, _h = _a.orientation, orientation = _h === void 0 ? 'vertical' : _h, _j = _a.sectionPadding, sectionPadding = _j === void 0 ? 0 : _j, onItemIndexChange = _a.onItemIndexChange, onSectionIndexChange = _a.onSectionIndexChange, props = __rest(_a, ["children", "className", "style", "borderThickness", "data", "defaultExpandedSectionIndex", "expandIconSvg", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "sectionPadding", "onItemIndexChange", "onSectionIndexChange"]);
+    var isSectionSelectedAt = function (index) { return expandedSectionIndex === index; };
+    var toggleSectionAt = function (index) {
+        if (isTogglable && isSectionSelectedAt(index)) {
+            setExpandedSectionIndex(-1);
         }
-        if (prevState.selectedItemIndex !== this.state.selectedItemIndex) {
-            debug("Changing item index to ".concat(this.state.selectedItemIndex, "... OK"));
-            (_d = (_c = this.props).onItemIndexChange) === null || _d === void 0 ? void 0 : _d.call(_c, this.state.selectedItemIndex);
+        else {
+            setExpandedSectionIndex(index);
         }
     };
-    Accordion.prototype.render = function () {
-        var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        var borderColor = (_a = this.props.borderColor) !== null && _a !== void 0 ? _a : '#000';
-        var borderThickness = (_b = this.props.borderThickness) !== null && _b !== void 0 ? _b : 0;
-        var isTogglable = (_c = this.props.isTogglable) !== null && _c !== void 0 ? _c : true;
-        var itemLength = (_d = this.props.itemLength) !== null && _d !== void 0 ? _d : 50;
-        var itemPadding = (_e = this.props.itemPadding) !== null && _e !== void 0 ? _e : 0;
-        var sectionPadding = (_f = this.props.sectionPadding) !== null && _f !== void 0 ? _f : 0;
-        var maxVisibleItems = (_g = this.props.maxVisibleItems) !== null && _g !== void 0 ? _g : -1;
-        var orientation = (_h = this.props.orientation) !== null && _h !== void 0 ? _h : 'vertical';
-        this.nodeRefs.lists = [];
-        return (react_1.default.createElement(StyledRoot, { className: this.props.className, orientation: orientation, style: __assign(__assign({}, (_j = this.props.style) !== null && _j !== void 0 ? _j : {}), (orientation === 'vertical' ? {
-                height: 'auto',
-            } : {
-                width: 'auto',
-            })) }, this.props.data.map(function (section, i) {
+    var _k = __read((0, react_1.useState)(defaultExpandedSectionIndex), 2), expandedSectionIndex = _k[0], setExpandedSectionIndex = _k[1];
+    var _l = __read((0, react_1.useState)(-1), 2), selectedSectionIndex = _l[0], setSelectedSectionIndex = _l[1];
+    var _m = __read((0, react_1.useState)(-1), 2), selectedItemIndex = _m[0], setSelectedItemIndex = _m[1];
+    (0, react_1.useEffect)(function () {
+        onSectionIndexChange === null || onSectionIndexChange === void 0 ? void 0 : onSectionIndexChange(expandedSectionIndex);
+    }, [expandedSectionIndex]);
+    (0, react_1.useEffect)(function () {
+        onItemIndexChange === null || onItemIndexChange === void 0 ? void 0 : onItemIndexChange(selectedItemIndex);
+    }, [selectedItemIndex]);
+    var components = (0, asComponentDict_1.default)(children, {
+        header: exports.AccordionHeader,
+        expandIcon: exports.AccordionExpandIcon,
+    });
+    var fixedClassNames = (0, asClassNameDict_1.default)({
+        root: (0, classnames_1.default)(orientation),
+        header: (0, classnames_1.default)(orientation),
+        expandIcon: (0, classnames_1.default)(orientation),
+    });
+    var fixedStyles = (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',
+        } : {
+            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%',
+        }),
+        header: __assign({ borderWidth: "".concat(borderThickness, "px"), margin: '0', outline: 'none' }, orientation === 'vertical' ? {
+            width: '100%',
+        } : {
+            height: '100%',
+        }),
+        headerLabel: {
+            color: 'inherit',
+            fontFamily: 'inherit',
+            fontSize: 'inherit',
+            fontWeight: 'inherit',
+            letterSpacing: 'inherit',
+            lineHeight: 'inherit',
+            transition: 'inherit',
+        },
+        expandIcon: {
+            margin: '0',
+            padding: '0',
+        },
+        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' ? {
+            height: '50px',
+        } : {
+            width: '50px',
+        }),
+        expandIcon: {
+            boxSizing: 'border-box',
+            display: 'block',
+            fill: '#000',
+            height: '15px',
+            transformOrigin: 'center',
+            transitionDuration: '100ms',
+            transitionProperty: 'transform',
+            transitionTimingFunction: 'ease-out',
+            width: '15px',
+        },
+    });
+    return (react_1.default.createElement("div", __assign({}, props, { className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }),
+        react_1.default.createElement(Each_1.default, { in: data }, function (section, sectionIdx) {
             var _a, _b;
             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 = !_this.isSectionSelectedAt(i);
-            var ref = (0, react_1.createRef)();
-            _this.nodeRefs.lists.push(ref);
-            return (react_1.default.createElement(StyledSection, { key: "section-".concat(i), isCollapsed: isCollapsed, orientation: orientation, extendedCSS: (_a = _this.props.sectionCSS) !== null && _a !== void 0 ? _a : (function () { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""]))); }), style: orientation === 'vertical' ? {
-                    marginTop: i === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
+            var isCollapsed = !isSectionSelectedAt(sectionIdx);
+            return (react_1.default.createElement("div", { style: (0, styles_1.default)(fixedStyles.section, orientation === 'vertical' ? {
+                    marginTop: sectionIdx === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
                 } : {
-                    marginLeft: i === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
-                } },
-                react_1.default.createElement(StyledSectionHeader, { borderColor: borderColor, borderThickness: borderThickness, orientation: orientation, isCollapsed: isCollapsed, onClick: function () { return _this.toggleSectionAt(i); }, extendedCSS: (_b = _this.props.sectionHeaderCSS) !== null && _b !== void 0 ? _b : (function () { return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""]))); }) },
-                    react_1.default.createElement("label", null, section.label),
-                    _this.props.expandIconSvg && react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: _this.props.expandIconSvg } })),
-                react_1.default.createElement(StyledItemList, { ref: ref, borderColor: borderColor, borderThickness: borderThickness, data: section.items, defaultSelectedIndex: -1, isTogglable: isTogglable, itemComponentType: _this.props.itemComponentType, itemPadding: itemPadding, onDeselectAt: function (idx) { return _this.deselectItemAt(idx); }, onSelectAt: function (idx) { return _this.selectItemAt(idx); }, orientation: orientation, shouldStaySelected: true, itemStyle: orientation === 'vertical' ? {
-                        height: "".concat(itemLength, "px"),
-                    } : {
-                        width: "".concat(itemLength, "px"),
-                    }, style: orientation === 'vertical' ? {
+                    marginLeft: sectionIdx === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
+                }) },
+                cloneStyledElement_1.default.apply(void 0, __spreadArray([(_a = components.header) !== null && _a !== void 0 ? _a : react_1.default.createElement(exports.AccordionHeader, { style: defaultStyles.header }), {
+                        className: (0, classnames_1.default)(fixedClassNames.header, {
+                            collapsed: isCollapsed,
+                            expanded: !isCollapsed,
+                        }),
+                        style: (0, styles_1.default)(fixedStyles.header),
+                        onClick: function () { return toggleSectionAt(sectionIdx); },
+                    }], [
+                    react_1.default.createElement("label", { style: fixedStyles.headerLabel, dangerouslySetInnerHTML: { __html: section.label } }),
+                    (0, cloneStyledElement_1.default)((_b = components.expandIcon) !== null && _b !== void 0 ? _b : (expandIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: expandIconSvg, style: defaultStyles.expandIcon }) : react_1.default.createElement(react_1.default.Fragment, null)), {
+                        className: (0, classnames_1.default)(fixedClassNames.expandIcon),
+                        style: (0, styles_1.default)(fixedStyles.expandIcon),
+                    }),
+                ], false)),
+                react_1.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'),
+                        overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',
                     } : {
                         marginLeft: isCollapsed ? '0px' : "".concat(itemPadding - borderThickness, "px"),
-                        overflowX: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),
+                        overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',
                         width: isCollapsed ? '0px' : "".concat(menuLength, "px"),
+                    }), borderThickness: borderThickness, data: section.items, isSelectable: true, isTogglable: isTogglable, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, orientation: orientation, selectedIndex: selectedSectionIndex === sectionIdx ? selectedItemIndex : -1, onDeselectAt: function () {
+                        if (selectedSectionIndex !== sectionIdx)
+                            return;
+                        setSelectedSectionIndex(-1);
+                        setSelectedItemIndex(-1);
+                    }, onSelectAt: function (itemIdx) {
+                        setSelectedSectionIndex(sectionIdx);
+                        setSelectedItemIndex(itemIdx);
                     } })));
         })));
-    };
-    Accordion.prototype.isSectionSelectedAt = function (index) {
-        return this.state.selectedSectionIndex === index;
-    };
-    Accordion.prototype.toggleSectionAt = function (index) {
-        var _a;
-        if (((_a = this.props.isTogglable) !== null && _a !== void 0 ? _a : true) && this.isSectionSelectedAt(index)) {
-            this.deselectSectionAt(index);
-        }
-        else {
-            this.selectSectionAt(index);
-        }
-    };
-    Accordion.prototype.selectSectionAt = function (index) {
-        var e_1, _a;
-        var _b;
-        if (this.isSectionSelectedAt(index))
-            return;
-        try {
-            for (var _c = __values(this.nodeRefs.lists), _d = _c.next(); !_d.done; _d = _c.next()) {
-                var ref = _d.value;
-                (_b = ref.current) === null || _b === void 0 ? void 0 : _b.setState({ selectedIndex: -1 });
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        this.setState({
-            selectedSectionIndex: index,
-        });
-    };
-    Accordion.prototype.deselectSectionAt = function (index) {
-        var e_2, _a;
-        var _b;
-        if (!this.isSectionSelectedAt(index))
-            return;
-        try {
-            for (var _c = __values(this.nodeRefs.lists), _d = _c.next(); !_d.done; _d = _c.next()) {
-                var ref = _d.value;
-                (_b = ref.current) === null || _b === void 0 ? void 0 : _b.setState({ selectedIndex: -1 });
-            }
-        }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
-        finally {
-            try {
-                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
-            }
-            finally { if (e_2) throw e_2.error; }
-        }
-        this.setState({
-            selectedSectionIndex: -1,
-        });
-    };
-    Accordion.prototype.isItemSelectedAt = function (index) {
-        return (this.state.selectedItemIndex === index);
-    };
-    Accordion.prototype.toggleItemAt = function (index) {
-        var _a;
-        if (((_a = this.props.isTogglable) !== null && _a !== void 0 ? _a : true) && this.isItemSelectedAt(index)) {
-            this.deselectItemAt(index);
-        }
-        else {
-            this.selectItemAt(index);
-        }
-    };
-    Accordion.prototype.selectItemAt = function (index) {
-        if (this.isItemSelectedAt(index))
-            return;
-        this.setState({
-            selectedItemIndex: index,
-        });
-    };
-    Accordion.prototype.deselectItemAt = function (index) {
-        if (!this.isItemSelectedAt(index))
-            return;
-        this.setState({
-            selectedItemIndex: -1,
-        });
-    };
-    return Accordion;
-}(react_1.PureComponent));
-exports.default = Accordion;
-var StyledItemList = (0, styled_components_1.default)(List_1.default)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  transition-duration: 100ms;\n  transition-timing-function: ease-out;\n\n  ", "\n"], ["\n  transition-duration: 100ms;\n  transition-timing-function: ease-out;\n\n  ", "\n"])), function (props) { return props.orientation === 'vertical' ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 100%;\n    transition-property: height, margin;\n    will-change: height, margin;\n    top: 100%;\n  "], ["\n    width: 100%;\n    transition-property: height, margin;\n    will-change: height, margin;\n    top: 100%;\n  "]))) : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    height: 100%;\n    transition-property: width, margin;\n    will-change: width, margin;\n    left: 100%;\n  "], ["\n    height: 100%;\n    transition-property: width, margin;\n    will-change: width, margin;\n    left: 100%;\n  "]))); });
-var StyledSectionHeader = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  background: #fff;\n  border-color: ", ";\n  border-style: solid;\n  border-width: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin: 0;\n  padding: 0 10px;\n  transition-duration: 100ms;\n  transition-property: transform, opacity, background, color;\n  transition-timing-function: ease-out;\n  will-change: transform, opacity, background, color;\n\n  label {\n    color: #000;\n    transition-duration: 100ms;\n    transition-property: color;\n    transition-timing-function: ease-out;\n    will-change: color;\n  }\n\n  span {\n    box-sizing: border-box;\n    display: block;\n    fill: #000;\n    height: 15px;\n    transform-origin: center;\n    transition-duration: 100ms;\n    transition-property: transform;\n    transition-timing-function: ease-out;\n    width: 15px;\n    will-change: transform;\n\n    svg {\n      width: 100%;\n      height: 100%;\n      fill: inherit;\n\n      * {\n        fill: inherit;\n        transition-duration: 100ms;\n        transition-property: fill;\n        transition-timing-function: ease-out;\n      }\n    }\n  }\n\n  ", "\n\n  ", "\n"], ["\n  align-items: center;\n  background: #fff;\n  border-color: ", ";\n  border-style: solid;\n  border-width: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin: 0;\n  padding: 0 10px;\n  transition-duration: 100ms;\n  transition-property: transform, opacity, background, color;\n  transition-timing-function: ease-out;\n  will-change: transform, opacity, background, color;\n\n  label {\n    color: #000;\n    transition-duration: 100ms;\n    transition-property: color;\n    transition-timing-function: ease-out;\n    will-change: color;\n  }\n\n  span {\n    box-sizing: border-box;\n    display: block;\n    fill: #000;\n    height: 15px;\n    transform-origin: center;\n    transition-duration: 100ms;\n    transition-property: transform;\n    transition-timing-function: ease-out;\n    width: 15px;\n    will-change: transform;\n\n    svg {\n      width: 100%;\n      height: 100%;\n      fill: inherit;\n\n      * {\n        fill: inherit;\n        transition-duration: 100ms;\n        transition-property: fill;\n        transition-timing-function: ease-out;\n      }\n    }\n  }\n\n  ", "\n\n  ", "\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderThickness; }, function (props) { return props.orientation === 'vertical' ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    height: 50px;\n    width: 100%;\n    "], ["\n    height: 50px;\n    width: 100%;\n    "]))) : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    height: 100%;\n    width: 50px;\n  "], ["\n    height: 100%;\n    width: 50px;\n  "]))); }, function (props) { return props.extendedCSS(props); });
-var StyledSection = styled_components_1.default.section(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: flex-start;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: flex-start;\n  margin: 0;\n  padding: 0;\n  position: relative;\n\n  ", "\n\n  ", "\n"], ["\n  align-items: flex-start;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: flex-start;\n  margin: 0;\n  padding: 0;\n  position: relative;\n\n  ", "\n\n  ", "\n"])), function (props) { return props.orientation === 'vertical' ? (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    width: 100%;\n    flex-direction: column;\n    "], ["\n    width: 100%;\n    flex-direction: column;\n    "]))) : (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    height: 100%;\n    flex-direction: row;\n  "], ["\n    height: 100%;\n    flex-direction: row;\n  "]))); }, function (props) { return props.extendedCSS(props); });
-var StyledRoot = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: flex-start;\n  padding: 0;\n  position: relative;\n\n  ", "\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: flex-start;\n  padding: 0;\n  position: relative;\n\n  ", "\n"])), function (props) { return props.orientation === 'vertical' ? (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    flex-direction: column;\n    "], ["\n    flex-direction: column;\n    "]))) : (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    flex-direction: row;\n  "], ["\n    flex-direction: row;\n  "]))); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
+});
+var AccordionHeader = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("button", __assign({}, props));
+};
+exports.AccordionHeader = AccordionHeader;
+var AccordionExpandIcon = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("div", __assign({}, props));
+};
+exports.AccordionExpandIcon = AccordionExpandIcon;
 //# sourceMappingURL=Accordion.js.map