etudes 5.0.0 → 5.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etudes",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "A study of headless React components",
   "main": "lib",
   "scripts": {
@@ -11,7 +11,7 @@
     "predemo": "npm run clean",
     "demo": "concurrently \"cross-env NODE_ENV=production tsc -w --diagnostics false\" \"wait-on lib && cross-env NODE_ENV=development webpack-cli serve --mode development --hot --config demo/config/build.conf.ts\"",
     "test": "echo \"No tests yet :)\"",
-    "lint": "eslint --ext .ts --ext .tsx src demo",
+    "lint": "eslint",
     "lint:fix": "npm run lint -- --fix",
     "scan": "dotenv -- sh -c 'sonar-scanner -Dsonar.projectKey=$SONAR_PROJECT_KEY -Dsonar.sources=. -Dsonar.host.url=$SONAR_HOST_URL -Dsonar.token=$SONAR_TOKEN'"
   },
@@ -35,55 +35,59 @@
     "utils"
   ],
   "devDependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.4",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
+    "@babel/core": "^7.24.7",
+    "@babel/plugin-transform-runtime": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@eslint/js": "^9.4.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@stylistic/eslint-plugin": "^2.1.0",
     "@types/debug": "^4.1.12",
     "@types/html-webpack-plugin": "^3.2.9",
     "@types/node-polyglot": "^2.5.0",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",
     "@types/webpack": "^5.28.5",
-    "@types/webpack-env": "^1.18.4",
-    "@typescript-eslint/eslint-plugin": "^7.7.0",
-    "@typescript-eslint/parser": "^7.7.0",
+    "@types/webpack-env": "^1.18.5",
     "babel-loader": "^9.1.3",
     "babel-plugin-styled-components": "^2.1.4",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
-    "debug": "^4.3.4",
-    "dotenv-cli": "^7.4.1",
-    "eslint": "^8.56.0",
+    "debug": "^4.3.5",
+    "dotenv-cli": "^7.4.2",
+    "eslint": "^9.4.0",
     "html-webpack-plugin": "^5.6.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router": "^6.22.3",
-    "react-router-dom": "^6.22.3",
-    "rimraf": "^5.0.5",
-    "styled-components": "^6.1.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router": "^6.23.1",
+    "react-router-dom": "^6.23.1",
+    "rimraf": "^5.0.7",
+    "semantic-release": "^24.0.0",
+    "styled-components": "^6.1.11",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5",
+    "typescript-eslint": "^8.0.0-alpha.10",
     "wait-on": "^7.2.0",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.0.4"
   },
   "dependencies": {
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "fast-deep-equal": "^3.1.3",
-    "fast-xml-parser": "^4.3.6",
+    "fast-xml-parser": "^4.4.0",
     "interactjs": "^1.10.27",
     "resize-observer-polyfill": "^1.5.1",
-    "spase": "^7.1.0"
+    "spase": "^7.2.1"
   },
   "peerDependencies": {
     "react": "^18.2.0"
   },
   "optionalDependencies": {
-    "react-router": "^6.22.3",
-    "react-router-dom": "^6.22.3"
+    "react-router": "^6.23.1",
+    "react-router-dom": "^6.23.1"
   }
 }

package/components/Accordion.d.ts

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

package/components/Accordion.js

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