etudes 0.24.0 → 0.28.0

package/lib/AbstractSelectableCollection.d.ts

@@ -1,94 +1,25 @@
 import { CSSProperties, PureComponent } from 'react';
 export interface Props {
-    /**
-     * Class attribute of the root element.
-     */
     className?: string;
-    /**
-     * Inline style attribute of the root element.
-     */
     style?: CSSProperties;
-    /**
-     * Indicates whether selections can be toggled. For example, in the case of
-     * a vertical list of selectable rows, being able to toggle a row means it
-     * gets deselected when selected again. Being unable to toggle the row means
-     * it does not get deselected when selected again.
-     */
     isTogglable?: boolean;
-    /**
-     * Indicates whether selections are retained. For example, in the case of
-     * a vertical list of clickable rows, being able to retain a selection means
-     * when the row is clicked, it becomes and stays selected. Being unable to
-     * retain a selection means when the row is clicked, it does not become
-     * selected. It is simply clicked and the subsequent event is dispatched.
-     */
     shouldStaySelected?: boolean;
-    /**
-     * The default selected index. Any value below 0 indicates that nothing is
-     * selected.
-     */
     defaultSelectedIndex?: number;
-    /**
-     * Handler invoked when an index is deselected.
-     */
     onDeselectAt?: (index: number) => void;
-    /**
-     * Handler invoked when an index is selected.
-     */
     onSelectAt?: (index: number) => void;
 }
 export interface State {
-    /**
-     * The current selected index. Any value less than 0 indicates that no index
-     * is selected.
-     */
     selectedIndex?: number;
 }
-/**
- * An abstract component that mimics and handles index selection in an abstract
- * collection.
- */
 export default class AbstractSelectableCollection<P extends Props = Props, S extends State = State> extends PureComponent<P, S> {
     constructor(props: P);
     componentDidMount(): void;
     componentDidUpdate(prevProps: P, prevState: S): void;
     render(): JSX.Element;
-    /**
-     * Checks if an index is out of range.
-     *
-     * @param index - The index to check.
-     *
-     * @returns `true` if the index is out of range, `false` otherwise.
-     */
     isIndexOutOfRange(index: number): boolean;
-    /**
-     * Checks if an index is selected.
-     *
-     * @param index - The index to check.
-     *
-     * @returns `true` if the index is selected, `false` otherwise.
-     */
     isSelectedAt(index: number): boolean;
-    /**
-     * Toggles an index, i.e. reverses its selected state.
-     *
-     * @param index - The index to toggle.
-     */
     toggleAt(index: number): void;
-    /**
-     * Selects an index.
-     *
-     * @param index - The index to select.
-     */
     selectAt(index: number): void;
-    /**
-     * Deselects an index if it is currently selected.
-     *
-     * @param index - The index to deselect.
-     */
     deselectAt(index: number): void;
-    /**
-     * Deselects the currently selected index.
-     */
     deselectCurrent(): void;
 }

package/lib/AbstractSelectableCollection.js

@@ -36,11 +36,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:asc') : function () { };
-/**
- * An abstract component that mimics and handles index selection in an abstract
- * collection.
- */
-var AbstractSelectableCollection = /** @class */ (function (_super) {
+var AbstractSelectableCollection = (function (_super) {
     __extends(AbstractSelectableCollection, _super);
     function AbstractSelectableCollection(props) {
         var _a;
@@ -62,7 +58,7 @@ var AbstractSelectableCollection = /** @class */ (function (_super) {
         var prevSelectedIndex = (_a = prevState.selectedIndex) !== null && _a !== void 0 ? _a : -1;
         var selectedIndex = (_b = this.state.selectedIndex) !== null && _b !== void 0 ? _b : -1;
         if (prevState.selectedIndex !== selectedIndex) {
-            debug("Selected index changed: " + selectedIndex);
+            debug("Selected index changed: ".concat(selectedIndex));
             if (shouldStaySelected === true) {
                 if (!this.isIndexOutOfRange(prevSelectedIndex))
                     onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(prevSelectedIndex);
@@ -74,33 +70,14 @@ var AbstractSelectableCollection = /** @class */ (function (_super) {
     AbstractSelectableCollection.prototype.render = function () {
         return react_1.default.createElement(react_1.Fragment, null);
     };
-    /**
-     * Checks if an index is out of range.
-     *
-     * @param index - The index to check.
-     *
-     * @returns `true` if the index is out of range, `false` otherwise.
-     */
     AbstractSelectableCollection.prototype.isIndexOutOfRange = function (index) {
         if (index < 0)
             return true;
         return false;
     };
-    /**
-     * Checks if an index is selected.
-     *
-     * @param index - The index to check.
-     *
-     * @returns `true` if the index is selected, `false` otherwise.
-     */
     AbstractSelectableCollection.prototype.isSelectedAt = function (index) {
         return (this.state.selectedIndex === index);
     };
-    /**
-     * Toggles an index, i.e. reverses its selected state.
-     *
-     * @param index - The index to toggle.
-     */
     AbstractSelectableCollection.prototype.toggleAt = function (index) {
         if (this.props.isTogglable === true && this.isSelectedAt(index)) {
             this.deselectAt(index);
@@ -109,11 +86,6 @@ var AbstractSelectableCollection = /** @class */ (function (_super) {
             this.selectAt(index);
         }
     };
-    /**
-     * Selects an index.
-     *
-     * @param index - The index to select.
-     */
     AbstractSelectableCollection.prototype.selectAt = function (index) {
         if (this.props.shouldStaySelected === true) {
             if (this.isSelectedAt(index))
@@ -124,19 +96,11 @@ var AbstractSelectableCollection = /** @class */ (function (_super) {
             this.props.onSelectAt(index);
         }
     };
-    /**
-     * Deselects an index if it is currently selected.
-     *
-     * @param index - The index to deselect.
-     */
     AbstractSelectableCollection.prototype.deselectAt = function (index) {
         if (!this.isSelectedAt(index))
             return;
         this.setState({ selectedIndex: -1 });
     };
-    /**
-     * Deselects the currently selected index.
-     */
     AbstractSelectableCollection.prototype.deselectCurrent = function () {
         this.setState({ selectedIndex: -1 });
     };

package/lib/AbstractSelectableCollection.js.map

@@ -1 +1 @@
-{"version":3,"file":"AbstractSelectableCollection.js","sourceRoot":"","sources":["../src/AbstractSelectableCollection.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AbstractSelectableCollection.js","sourceRoot":"/","sources":["AbstractSelectableCollection.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { CSSProperties, Fragment, PureComponent } from 'react'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:asc') : () => {}\n\nexport interface Props {\n  /**\n   * Class attribute of the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute of the root element.\n   */\n  style?: CSSProperties\n\n  /**\n   * Indicates whether selections can be toggled. For example, in the case of\n   * a vertical list of selectable rows, being able to toggle a row means it\n   * gets deselected when selected again. Being unable to toggle the row means\n   * it does not get deselected when selected again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Indicates whether selections are retained. For example, in the case of\n   * a vertical list of clickable rows, being able to retain a selection means\n   * when the row is clicked, it becomes and stays selected. Being unable to\n   * retain a selection means when the row is clicked, it does not become\n   * selected. It is simply clicked and the subsequent event is dispatched.\n   */\n  shouldStaySelected?: boolean\n\n  /**\n   * The default selected index. Any value below 0 indicates that nothing is\n   * selected.\n   */\n  defaultSelectedIndex?: number\n\n  /**\n   * Handler invoked when an index is deselected.\n   */\n  onDeselectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when an index is selected.\n   */\n  onSelectAt?: (index: number) => void\n}\n\nexport interface State {\n  /**\n   * The current selected index. Any value less than 0 indicates that no index\n   * is selected.\n   */\n  selectedIndex?: number\n}\n\n/**\n * An abstract component that mimics and handles index selection in an abstract\n * collection.\n */\nexport default class AbstractSelectableCollection<P extends Props = Props, S extends State = State> extends PureComponent<P, S> {\n  constructor(props: P) {\n    super(props)\n\n    this.state = {\n      selectedIndex: this.props.defaultSelectedIndex ?? -1,\n    } as any\n  }\n\n  componentDidMount() {\n    if (this.state.selectedIndex !== undefined && this.state.selectedIndex > -1) {\n      this.props.onSelectAt?.(this.state.selectedIndex ?? -1)\n    }\n  }\n\n  componentDidUpdate(prevProps: P, prevState: S) {\n    const { shouldStaySelected, onSelectAt, onDeselectAt } = this.props\n    const prevSelectedIndex = prevState.selectedIndex ?? -1\n    const selectedIndex = this.state.selectedIndex ?? -1\n\n    if (prevState.selectedIndex !== selectedIndex) {\n      debug(`Selected index changed: ${selectedIndex}`)\n\n      if (shouldStaySelected === true) {\n        if (!this.isIndexOutOfRange(prevSelectedIndex)) onDeselectAt?.(prevSelectedIndex)\n        if (!this.isIndexOutOfRange(selectedIndex)) onSelectAt?.(selectedIndex)\n      }\n    }\n  }\n\n  render() {\n    return <Fragment/>\n  }\n\n  /**\n   * Checks if an index is out of range.\n   *\n   * @param index - The index to check.\n   *\n   * @returns `true` if the index is out of range, `false` otherwise.\n   */\n  isIndexOutOfRange(index: number): boolean {\n    if (index < 0) return true\n    return false\n  }\n\n  /**\n   * Checks if an index is selected.\n   *\n   * @param index - The index to check.\n   *\n   * @returns `true` if the index is selected, `false` otherwise.\n   */\n  isSelectedAt(index: number): boolean {\n    return (this.state.selectedIndex === index)\n  }\n\n  /**\n   * Toggles an index, i.e. reverses its selected state.\n   *\n   * @param index - The index to toggle.\n   */\n  toggleAt(index: number) {\n    if (this.props.isTogglable === true && this.isSelectedAt(index)) {\n      this.deselectAt(index)\n    }\n    else {\n      this.selectAt(index)\n    }\n  }\n\n  /**\n   * Selects an index.\n   *\n   * @param index - The index to select.\n   */\n  selectAt(index: number) {\n    if (this.props.shouldStaySelected === true) {\n      if (this.isSelectedAt(index)) return\n      this.setState({ selectedIndex: index })\n    }\n    else if (this.props.onSelectAt) {\n      this.props.onSelectAt(index)\n    }\n  }\n\n  /**\n   * Deselects an index if it is currently selected.\n   *\n   * @param index - The index to deselect.\n   */\n  deselectAt(index: number) {\n    if (!this.isSelectedAt(index)) return\n    this.setState({ selectedIndex: -1 })\n  }\n\n  /**\n   * Deselects the currently selected index.\n   */\n  deselectCurrent() {\n    this.setState({ selectedIndex: -1 })\n  }\n}\n"]}

package/lib/Accordion.d.ts

@@ -1,10 +1,6 @@
 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;
@@ -18,99 +14,30 @@ export declare type SectionCSSProps = Readonly<{
 }>;
 export interface SectionProps<T = Record<string, never>> {
     label: string;
-    items: Array<T>;
+    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;
-    /**
-     * Data provided to each section.
-     */
-    data: Array<SectionProps<T>>;
-    /**
-     * Indicates if sections can be toggled, as in, once a section is expanded,
-     * it collapses when being selected again.
-     */
+    data: SectionProps<T>[];
     isTogglable?: boolean;
-    /**
-     * Index of the section that is selected by default. Any value less than 0
-     * indicates that no section is selected by default.
-     */
     defaultSelectedSectionIndex?: 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
-     * horizontal orientation.
-     */
     itemLength?: number;
-    /**
-     * Padding (in pixels) between each item.
-     */
     itemPadding?: number;
-    /**
-     * Padding (in pixels) between each section.
-     */
     sectionPadding?: number;
-    /**
-     * 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;
-    /**
-     * 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.
-     */
     borderThickness?: number;
-    /**
-     * SVG markup to be put in the section header as the expand icon.
-     */
     expandIconSvg?: string;
-    /**
-     * React component type to be used for generating items inside the component.
-     */
     itemComponentType: ComponentType<ItemComponentProps<T>>;
-    /**
-     * Handler invoked when the selected item index of any section changes.
-     */
     onItemIndexChange?: (index: number) => void;
-    /**
-     * Handler invoked when the selected section index changes.
-     */
     onSectionIndexChange?: (index: number) => void;
-    /**
-     * 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> {

package/lib/Accordion.js

@@ -48,6 +48,17 @@ 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 };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -56,7 +67,7 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var List_1 = __importDefault(require("./List"));
 var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:accordion') : function () { };
-var Accordion = /** @class */ (function (_super) {
+var Accordion = (function (_super) {
     __extends(Accordion, _super);
     function Accordion(props) {
         var _a;
@@ -78,11 +89,11 @@ var Accordion = /** @class */ (function (_super) {
     Accordion.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a, _b, _c, _d;
         if (prevState.selectedSectionIndex !== this.state.selectedSectionIndex) {
-            debug("Changing section index to " + this.state.selectedSectionIndex + "... OK");
+            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);
         }
         if (prevState.selectedItemIndex !== this.state.selectedItemIndex) {
-            debug("Changing item index to " + this.state.selectedItemIndex + "... OK");
+            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);
         }
     };
@@ -108,28 +119,28 @@ var Accordion = /** @class */ (function (_super) {
             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 = react_1.createRef();
+            var ref = (0, react_1.createRef)();
             _this.nodeRefs.lists.push(ref);
-            return (react_1.default.createElement(StyledSection, { key: "section-" + i, isCollapsed: isCollapsed, orientation: orientation, extendedCSS: (_a = _this.props.sectionCSS) !== null && _a !== void 0 ? _a : (function () { return styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""]))); }), style: orientation === 'vertical' ? {
-                    marginTop: i === 0 ? '0px' : sectionPadding - borderThickness + "px",
+            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"),
                 } : {
-                    marginLeft: i === 0 ? '0px' : 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 styled_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""]))); }) },
+                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: itemLength + "px",
+                        height: "".concat(itemLength, "px"),
                     } : {
-                        width: itemLength + "px",
+                        width: "".concat(itemLength, "px"),
                     }, style: orientation === 'vertical' ? {
-                        height: isCollapsed ? '0px' : menuLength + "px",
-                        marginTop: isCollapsed ? '0px' : itemPadding - borderThickness + "px",
+                        height: isCollapsed ? '0px' : "".concat(menuLength, "px"),
+                        marginTop: isCollapsed ? '0px' : "".concat(itemPadding - borderThickness, "px"),
                         overflowY: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),
                     } : {
-                        marginLeft: isCollapsed ? '0px' : itemPadding - borderThickness + "px",
+                        marginLeft: isCollapsed ? '0px' : "".concat(itemPadding - borderThickness, "px"),
                         overflowX: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),
-                        width: isCollapsed ? '0px' : menuLength + "px",
+                        width: isCollapsed ? '0px' : "".concat(menuLength, "px"),
                     } })));
         })));
     };
@@ -146,24 +157,44 @@ var Accordion = /** @class */ (function (_super) {
         }
     };
     Accordion.prototype.selectSectionAt = function (index) {
-        var _a;
+        var e_1, _a;
+        var _b;
         if (this.isSectionSelectedAt(index))
             return;
-        for (var _i = 0, _b = this.nodeRefs.lists; _i < _b.length; _i++) {
-            var ref = _b[_i];
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setState({ selectedIndex: -1 });
+        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 _a;
+        var e_2, _a;
+        var _b;
         if (!this.isSectionSelectedAt(index))
             return;
-        for (var _i = 0, _b = this.nodeRefs.lists; _i < _b.length; _i++) {
-            var ref = _b[_i];
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setState({ selectedIndex: -1 });
+        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,
@@ -198,13 +229,9 @@ var Accordion = /** @class */ (function (_super) {
     return Accordion;
 }(react_1.PureComponent));
 exports.default = Accordion;
-var StyledItemList = 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' ? 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  "]))) : 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' ? styled_components_1.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    height: 50px;\n    width: 100%;\n    "], ["\n    height: 50px;\n    width: 100%;\n    "]))) : 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' ? 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    "]))) : 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' ? styled_components_1.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    flex-direction: column;\n    "], ["\n    flex-direction: column;\n    "]))) : styled_components_1.css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    flex-direction: row;\n  "], ["\n    flex-direction: row;\n  "]))); });
+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;
 //# sourceMappingURL=Accordion.js.map

package/lib/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../src/Accordion.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAgG;AAChG,qEAA+C;AAC/C,gDAA2E;AAG3E,IAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,cAAO,CAAC,CAAA;AA0ItG;IAAkE,6BAA8B;IAK9F,mBAAY,KAAe;;QAA3B,YACE,kBAAM,KAAK,CAAC,SAMb;QAXD,cAAQ,GAAG;YACT,KAAK,EAAE,EAA0B;SAClC,CAAA;QAKC,KAAI,CAAC,KAAK,GAAG;YACX,oBAAoB,EAAE,MAAA,KAAK,CAAC,2BAA2B,mCAAI,CAAC,CAAC;YAC7D,iBAAiB,EAAE,CAAC,CAAC;SACtB,CAAA;;IACH,CAAC;IAED,qCAAiB,GAAjB;;QACE,MAAA,MAAA,IAAI,CAAC,KAAK,EAAC,oBAAoB,mDAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAA;QAClE,MAAA,MAAA,IAAI,CAAC,KAAK,EAAC,iBAAiB,mDAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAA;IAC9D,CAAC;IAED,sCAAkB,GAAlB,UAAmB,SAAmB,EAAE,SAAgB;;QACtD,IAAI,SAAS,CAAC,oBAAoB,KAAK,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAAE;YACtE,KAAK,CAAC,oCAA6B,IAAI,CAAC,KAAK,CAAC,oBAAoB,WAAQ,CAAC,CAAA;YAC3E,MAAA,MAAA,IAAI,CAAC,KAAK,EAAC,oBAAoB,mDAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAA;SACnE;QAED,IAAI,SAAS,CAAC,iBAAiB,KAAK,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE;YAChE,KAAK,CAAC,iCAA0B,IAAI,CAAC,KAAK,CAAC,iBAAiB,WAAQ,CAAC,CAAA;YACrE,MAAA,MAAA,IAAI,CAAC,KAAK,EAAC,iBAAiB,mDAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAA;SAC7D;IACH,CAAC;IAED,0BAAM,GAAN;QAAA,iBA0FC;;QAzFC,IAAM,WAAW,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,mCAAI,MAAM,CAAA;QACpD,IAAM,eAAe,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,eAAe,mCAAI,CAAC,CAAA;QACvD,IAAM,WAAW,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,mCAAI,IAAI,CAAA;QAClD,IAAM,UAAU,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,mCAAI,EAAE,CAAA;QAC9C,IAAM,WAAW,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,mCAAI,CAAC,CAAA;QAC/C,IAAM,cAAc,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,cAAc,mCAAI,CAAC,CAAA;QACrD,IAAM,eAAe,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,eAAe,mCAAI,CAAC,CAAC,CAAA;QACxD,IAAM,WAAW,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,mCAAI,UAAU,CAAA;QAExD,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,EAAE,CAAA;QAExB,OAAO,CACL,8BAAC,UAAU,IACT,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,WAAW,EAAE,WAAW,EACxB,KAAK,wBACA,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,mCAAI,EAAE,GACtB,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;gBAC/B,MAAM,EAAE,MAAM;aACf,CAAC,CAAC,CAAC;gBACF,KAAK,EAAE,MAAM;aACd,CAAC,KAGH,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,CAAC;;YAC9B,IAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,MAAM,CAAA;YACrC,IAAM,eAAe,GAAG,eAAe,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;YAC5F,IAAM,UAAU,GAAG,CAAC,UAAU,GAAG,eAAe,CAAC,GAAG,eAAe,GAAG,WAAW,GAAG,CAAC,eAAe,GAAG,CAAC,CAAC,GAAG,eAAe,CAAA;YAC3H,IAAM,WAAW,GAAG,CAAC,KAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAA;YAChD,IAAM,GAAG,GAAG,IAAA,iBAAS,GAAW,CAAA;YAEhC,KAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;YAE7B,OAAO,CACL,8BAAC,aAAa,IACZ,GAAG,EAAE,kBAAW,CAAC,CAAE,EACnB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,MAAA,KAAI,CAAC,KAAK,CAAC,UAAU,mCAAI,CAAC,cAAM,WAAA,uBAAG,sEAAA,EAAE,MAAL,CAAK,CAAC,EACnD,KAAK,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;oBAClC,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,cAAc,GAAG,eAAe,OAAI;iBACrE,CAAC,CAAC,CAAC;oBACF,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,cAAc,GAAG,eAAe,OAAI;iBACtE;gBAED,8BAAC,mBAAmB,IAClB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,cAAM,OAAA,KAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAvB,CAAuB,EACtC,WAAW,EAAE,MAAA,KAAI,CAAC,KAAK,CAAC,gBAAgB,mCAAI,CAAC,cAAM,WAAA,uBAAG,sEAAA,EAAE,MAAL,CAAK,CAAC;oBAEzD,6CAAQ,OAAO,CAAC,KAAK,CAAS;oBAC7B,KAAI,CAAC,KAAK,CAAC,aAAa,IAAI,wCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAI,CAAC,KAAK,CAAC,aAAa,EAAE,GAAG,CAC/E;gBACtB,8BAAC,cAAc,IACb,GAAG,EAAE,GAAU,EACf,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,eAAe,EAChC,IAAI,EAAE,OAAO,CAAC,KAAK,EACnB,oBAAoB,EAAE,CAAC,CAAC,EACxB,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,KAAI,CAAC,KAAK,CAAC,iBAAwB,EACtD,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,UAAA,GAAG,IAAI,OAAA,KAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAxB,CAAwB,EAC7C,UAAU,EAAE,UAAA,GAAG,IAAI,OAAA,KAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAtB,CAAsB,EACzC,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,IAAI,EACxB,SAAS,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;wBACtC,MAAM,EAAE,UAAG,UAAU,OAAI;qBAC1B,CAAC,CAAC,CAAC;wBACF,KAAK,EAAE,UAAG,UAAU,OAAI;qBACzB,EACD,KAAK,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;wBAClC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI;wBAC/C,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,WAAW,GAAG,eAAe,OAAI;wBACrE,SAAS,EAAE,CAAC,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;qBACpG,CAAC,CAAC,CAAC;wBACF,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,WAAW,GAAG,eAAe,OAAI;wBACtE,SAAS,EAAE,CAAC,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;wBACnG,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI;qBAC/C,GACD,CACY,CACjB,CAAA;QACH,CAAC,CAAC,CACS,CACd,CAAA;IACH,CAAC;IAEO,uCAAmB,GAA3B,UAA4B,KAAa;QACvC,OAAO,IAAI,CAAC,KAAK,CAAC,oBAAoB,KAAK,KAAK,CAAA;IAClD,CAAC;IAEO,mCAAe,GAAvB,UAAwB,KAAa;;QACnC,IAAI,CAAC,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,mCAAI,IAAI,CAAC,IAAI,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE;YACvE,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAA;SAC9B;aACI;YACH,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;SAC5B;IACH,CAAC;IAEO,mCAAe,GAAvB,UAAwB,KAAa;;;QACnC,IAAI,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC;YAAE,OAAM;;YAE3C,KAAkB,IAAA,KAAA,SAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAA,gBAAA,4BAAE;gBAAlC,IAAM,GAAG,WAAA;gBACZ,MAAA,GAAG,CAAC,OAAO,0CAAE,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,CAAA;aAC7C;;;;;;;;;QAED,IAAI,CAAC,QAAQ,CAAC;YACZ,oBAAoB,EAAE,KAAK;SAC5B,CAAC,CAAA;IACJ,CAAC;IAEO,qCAAiB,GAAzB,UAA0B,KAAa;;;QACrC,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC;YAAE,OAAM;;YAE5C,KAAkB,IAAA,KAAA,SAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAA,gBAAA,4BAAE;gBAAlC,IAAM,GAAG,WAAA;gBACZ,MAAA,GAAG,CAAC,OAAO,0CAAE,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,CAAA;aAC7C;;;;;;;;;QAED,IAAI,CAAC,QAAQ,CAAC;YACZ,oBAAoB,EAAE,CAAC,CAAC;SACzB,CAAC,CAAA;IACJ,CAAC;IAEO,oCAAgB,GAAxB,UAAyB,KAAa;QACpC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,KAAK,KAAK,CAAC,CAAA;IACjD,CAAC;IAEO,gCAAY,GAApB,UAAqB,KAAa;;QAChC,IAAI,CAAC,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,mCAAI,IAAI,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE;YACpE,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;SAC3B;aACI;YACH,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;SACzB;IACH,CAAC;IAEO,gCAAY,GAApB,UAAqB,KAAa;QAChC,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;YAAE,OAAM;QAExC,IAAI,CAAC,QAAQ,CAAC;YACZ,iBAAiB,EAAE,KAAK;SACzB,CAAC,CAAA;IACJ,CAAC;IAEO,kCAAc,GAAtB,UAAuB,KAAa;QAClC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;YAAE,OAAM;QAEzC,IAAI,CAAC,QAAQ,CAAC;YACZ,iBAAiB,EAAE,CAAC,CAAC;SACtB,CAAC,CAAA;IACJ,CAAC;IACH,gBAAC;AAAD,CAAC,AA5LD,CAAkE,qBAAa,GA4L9E;;AAED,IAAM,cAAc,GAAG,IAAA,2BAAM,EAAC,cAAI,CAAC,yJAIjC,gFAIE,EAUD,IACF,KAXG,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,KAAC,uBAAG,wLAAA,oHAKhD,KAAC,CAAC,KAAC,uBAAG,wLAAA,oHAKN,IAAA,EAVU,CAUV,CACF,CAAA;AAED,IAAM,mBAAmB,GAAG,2BAAM,CAAC,MAAM,+tCAAiE,iEAGxF,EAA0B,6CAE1B,EAA8B,0hCA8C5C,EAMD,QAEC,EAAiC,IACpC,KAzDiB,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,EAAjB,CAAiB,EAE1B,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,eAAe,EAArB,CAAqB,EA8C5C,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,KAAC,uBAAG,iHAAA,6CAG9C,KAAC,CAAC,KAAC,uBAAG,+GAAA,2CAGR,IAAA,EANU,CAMV,EAEC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAxB,CAAwB,CACpC,CAAA;AAED,IAAM,aAAa,GAAG,2BAAM,CAAC,OAAO,6QAAqD,wLAUrF,EAMD,QAEC,EAAiC,IACpC,KATG,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,KAAC,uBAAG,2HAAA,uDAG9C,KAAC,CAAC,KAAC,uBAAG,yHAAA,mDAGR,IAAA,EANU,CAMV,EAEC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAxB,CAAwB,CACpC,CAAA;AAED,IAAM,UAAU,GAAG,2BAAM,CAAC,GAAG,iPAE3B,sKASE,EAID,IACF,KALG,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,KAAC,uBAAG,2GAAA,qCAE9C,KAAC,CAAC,KAAC,uBAAG,sGAAA,gCAER,IAAA,EAJU,CAIV,CACF,CAAA","sourcesContent":["import React, { ComponentType, createRef, CSSProperties, PureComponent, RefObject } from 'react'\nimport styled, { css } from 'styled-components'\nimport List, { ItemComponentProps as ListItemComponentProps } from './List'\nimport { ExtendedCSSFunction, ExtendedCSSProps, Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:accordion') : () => {}\n\n/**\n * Interface defining the props of the item component type to be provided to the\n * component. The data type is generic.\n */\nexport type ItemComponentProps<T = Record<string, never>> = ListItemComponentProps<T>\n\nexport type SectionHeaderCSSProps = Readonly<{\n  borderColor: string\n  borderThickness: number\n  isCollapsed: boolean\n  orientation: Orientation\n}>\n\nexport type SectionCSSProps = Readonly<{\n  isCollapsed: boolean\n  orientation: Orientation\n}>\n\nexport interface SectionProps<T = Record<string, never>> {\n  label: string\n  items: T[]\n}\n\nexport interface Props<T = Record<string, never>> {\n  /**\n   * Class attribute to the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute to the element.\n   */\n  style?: CSSProperties\n\n  /**\n   * Data provided to each section.\n   */\n  data: SectionProps<T>[]\n\n  /**\n   * Indicates if sections can be toggled, as in, once a section is expanded,\n   * it collapses when being selected again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Index of the section that is selected by default. Any value less than 0\n   * indicates that no section is selected by default.\n   */\n  defaultSelectedSectionIndex?: number\n\n  /**\n   * Length (in pixels) of each item. This does not apply to the section hedaer\n   * itself. Length refers to the height in vertical orientation and width in\n   * horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding (in pixels) between each item.\n   */\n  itemPadding?: number\n\n  /**\n   * Padding (in pixels) between each section.\n   */\n  sectionPadding?: number\n\n  /**\n   * Maximum number of items that are viside when a section expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time, and a scrollbar will appear to scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when a section expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Orientation of the component.\n   */\n  orientation?: Orientation\n\n  /**\n   * Color of the border of every item and the section header itself.\n   */\n  borderColor?: string\n\n  /**\n   * Thickness of the border (in pixels) of every item and the section header\n   * itself. 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * SVG markup to be put in the section header as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<ItemComponentProps<T>>\n\n  /**\n   * Handler invoked when the selected item index of any section changes.\n   */\n  onItemIndexChange?: (index: number) => void\n\n  /**\n   * Handler invoked when the selected section index changes.\n   */\n  onSectionIndexChange?: (index: number) => void\n\n  /**\n   * Additional CSS to be provided to each section element.\n   */\n  sectionCSS?: ExtendedCSSFunction<SectionCSSProps>\n\n  /**\n   * Additional CSS to be provided to each section header element.\n   */\n  sectionHeaderCSS?: ExtendedCSSFunction<SectionHeaderCSSProps>\n}\n\nexport interface State {\n  /**\n   * Current selected section index.\n   */\n  selectedSectionIndex: number\n\n  /**\n   * Current selected item index of the expanded section.\n   */\n  selectedItemIndex: number\n}\n\nexport default class Accordion<T = Record<string, never>> extends PureComponent<Props<T>, State> {\n  nodeRefs = {\n    lists: [] as RefObject<List<T>>[],\n  }\n\n  constructor(props: Props<T>) {\n    super(props)\n\n    this.state = {\n      selectedSectionIndex: props.defaultSelectedSectionIndex ?? -1,\n      selectedItemIndex: -1,\n    }\n  }\n\n  componentDidMount() {\n    this.props.onSectionIndexChange?.(this.state.selectedSectionIndex)\n    this.props.onItemIndexChange?.(this.state.selectedItemIndex)\n  }\n\n  componentDidUpdate(prevProps: Props<T>, prevState: State) {\n    if (prevState.selectedSectionIndex !== this.state.selectedSectionIndex) {\n      debug(`Changing section index to ${this.state.selectedSectionIndex}... OK`)\n      this.props.onSectionIndexChange?.(this.state.selectedSectionIndex)\n    }\n\n    if (prevState.selectedItemIndex !== this.state.selectedItemIndex) {\n      debug(`Changing item index to ${this.state.selectedItemIndex}... OK`)\n      this.props.onItemIndexChange?.(this.state.selectedItemIndex)\n    }\n  }\n\n  render() {\n    const borderColor = this.props.borderColor ?? '#000'\n    const borderThickness = this.props.borderThickness ?? 0\n    const isTogglable = this.props.isTogglable ?? true\n    const itemLength = this.props.itemLength ?? 50\n    const itemPadding = this.props.itemPadding ?? 0\n    const sectionPadding = this.props.sectionPadding ?? 0\n    const maxVisibleItems = this.props.maxVisibleItems ?? -1\n    const orientation = this.props.orientation ?? 'vertical'\n\n    this.nodeRefs.lists = []\n\n    return (\n      <StyledRoot\n        className={this.props.className}\n        orientation={orientation}\n        style={{\n          ...this.props.style ?? {},\n          ...(orientation === 'vertical' ? {\n            height: 'auto',\n          } : {\n            width: 'auto',\n          }),\n        }}\n      >\n        {this.props.data.map((section, i) => {\n          const numItems = section.items.length\n          const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n          const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n          const isCollapsed = !this.isSectionSelectedAt(i)\n          const ref = createRef<List<T>>()\n\n          this.nodeRefs.lists.push(ref)\n\n          return (\n            <StyledSection\n              key={`section-${i}`}\n              isCollapsed={isCollapsed}\n              orientation={orientation}\n              extendedCSS={this.props.sectionCSS ?? (() => css``)}\n              style={orientation === 'vertical' ? {\n                marginTop: i === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n              } : {\n                marginLeft: i === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n              }}\n            >\n              <StyledSectionHeader\n                borderColor={borderColor}\n                borderThickness={borderThickness}\n                orientation={orientation}\n                isCollapsed={isCollapsed}\n                onClick={() => this.toggleSectionAt(i) }\n                extendedCSS={this.props.sectionHeaderCSS ?? (() => css``)}\n              >\n                <label>{section.label}</label>\n                {this.props.expandIconSvg && <span dangerouslySetInnerHTML={{ __html: this.props.expandIconSvg }}/>}\n              </StyledSectionHeader>\n              <StyledItemList\n                ref={ref as any}\n                borderColor={borderColor}\n                borderThickness={borderThickness}\n                data={section.items}\n                defaultSelectedIndex={-1}\n                isTogglable={isTogglable}\n                itemComponentType={this.props.itemComponentType as any}\n                itemPadding={itemPadding}\n                onDeselectAt={idx => this.deselectItemAt(idx)}\n                onSelectAt={idx => this.selectItemAt(idx)}\n                orientation={orientation}\n                shouldStaySelected={true}\n                itemStyle={orientation === 'vertical' ? {\n                  height: `${itemLength}px`,\n                } : {\n                  width: `${itemLength}px`,\n                }}\n                style={orientation === 'vertical' ? {\n                  height: isCollapsed ? '0px' : `${menuLength}px`,\n                  marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowY: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n                } : {\n                  marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowX: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n                  width: isCollapsed ? '0px' : `${menuLength}px`,\n                }}\n              />\n            </StyledSection>\n          )\n        })}\n      </StyledRoot>\n    )\n  }\n\n  private isSectionSelectedAt(index: number): boolean {\n    return this.state.selectedSectionIndex === index\n  }\n\n  private toggleSectionAt(index: number) {\n    if ((this.props.isTogglable ?? true) && this.isSectionSelectedAt(index)) {\n      this.deselectSectionAt(index)\n    }\n    else {\n      this.selectSectionAt(index)\n    }\n  }\n\n  private selectSectionAt(index: number) {\n    if (this.isSectionSelectedAt(index)) return\n\n    for (const ref of this.nodeRefs.lists) {\n      ref.current?.setState({ selectedIndex: -1 })\n    }\n\n    this.setState({\n      selectedSectionIndex: index,\n    })\n  }\n\n  private deselectSectionAt(index: number) {\n    if (!this.isSectionSelectedAt(index)) return\n\n    for (const ref of this.nodeRefs.lists) {\n      ref.current?.setState({ selectedIndex: -1 })\n    }\n\n    this.setState({\n      selectedSectionIndex: -1,\n    })\n  }\n\n  private isItemSelectedAt(index: number): boolean {\n    return (this.state.selectedItemIndex === index)\n  }\n\n  private toggleItemAt(index: number) {\n    if ((this.props.isTogglable ?? true) && this.isItemSelectedAt(index)) {\n      this.deselectItemAt(index)\n    }\n    else {\n      this.selectItemAt(index)\n    }\n  }\n\n  private selectItemAt(index: number) {\n    if (this.isItemSelectedAt(index)) return\n\n    this.setState({\n      selectedItemIndex: index,\n    })\n  }\n\n  private deselectItemAt(index: number) {\n    if (!this.isItemSelectedAt(index)) return\n\n    this.setState({\n      selectedItemIndex: -1,\n    })\n  }\n}\n\nconst StyledItemList = styled(List)<{\n  itemPadding: number\n  borderThickness: number\n  orientation: Orientation\n}>`\n  transition-duration: 100ms;\n  transition-timing-function: ease-out;\n\n  ${props => props.orientation === 'vertical' ? css`\n    width: 100%;\n    transition-property: height, margin;\n    will-change: height, margin;\n    top: 100%;\n  ` : css`\n    height: 100%;\n    transition-property: width, margin;\n    will-change: width, margin;\n    left: 100%;\n  `}\n`\n\nconst StyledSectionHeader = styled.button<SectionHeaderCSSProps & ExtendedCSSProps<SectionHeaderCSSProps>>`\n  align-items: center;\n  background: #fff;\n  border-color: ${props => props.borderColor};\n  border-style: solid;\n  border-width: ${props => props.borderThickness};\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  ${props => props.orientation === 'vertical' ? css`\n    height: 50px;\n    width: 100%;\n    ` : css`\n    height: 100%;\n    width: 50px;\n  `}\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledSection = styled.section<SectionCSSProps & ExtendedCSSProps<SectionCSSProps>>`\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  ${props => props.orientation === 'vertical' ? css`\n    width: 100%;\n    flex-direction: column;\n    ` : css`\n    height: 100%;\n    flex-direction: row;\n  `}\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledRoot = styled.div<{\n  orientation: Orientation\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  ${props => props.orientation === 'vertical' ? css`\n    flex-direction: column;\n    ` : css`\n    flex-direction: row;\n  `}\n`\n"]}