etudes 4.0.0-rc.8 → 5.0.0

package/{lib → components}/Accordion.d.ts

@@ -1,4 +1,4 @@
-import React, { type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react';
+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
@@ -96,8 +96,7 @@ export type AccordionProps<I, S extends AccordionSection<I> = AccordionSection<I
      */
     sections: S[];
     /**
-     * Indices of selected items per section. If specified, the component will not
-     * manage selection state.
+     * Indices of selected items per section.
      *
      * @see {@link AccordionSelection}
      */
@@ -111,7 +110,7 @@ export type AccordionProps<I, S extends AccordionSection<I> = AccordionSection<I
     /**
      * Specifies if the component should use default styles.
      */
-    useDefaultStyles?: boolean;
+    usesDefaultStyles?: boolean;
     /**
      * Handler invoked when an item is activated in a section. The order of
      * handlers invoked when any selection changes take place is:
@@ -214,165 +213,7 @@ export type AccordionProps<I, S extends AccordionSection<I> = AccordionSection<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.
- *
- * This component automatically determines if it should track selection state
- * and expansion states internally. If the `selection` prop is provided, the
- * component will not initialize the selection state. It will be up to its
- * parent to provide item selection in tandem with the component's
- * `onSelectionChange` handler. Likewise for the omission of the expansion
- * states if `expandedSectionIndices` prop is provided.
  */
-export declare const Accordion: <I, S extends AccordionSection<I> = AccordionSection<I>>(props: React.HTMLAttributes<HTMLDivElement> & {
-    /**
-     * Specifies if expanded sections should automatically collapse upon expanding
-     * another section.
-     */
-    autoCollapseSections?: boolean | undefined;
-    /**
-     * SVG markup to use as the collapse icon when a toggle button is
-     * automatically generated (when `HeaderComponent` is absent).
-     */
-    collapseIconSvg?: string | undefined;
-    /**
-     * Indices of sections that are expanded. If specified, the component will not
-     * manage expansion states.
-     */
-    expandedSectionIndices?: number[] | undefined;
-    /**
-     * SVG markup to use as the expand icon when a toggle button is automatically
-     * generated (when `HeaderComponent` is absent).
-     */
-    expandIconSvg?: string | undefined;
-    /**
-     * Orientation of this component.
-     *
-     * @see {@link CollectionOrientation}
-     */
-    orientation?: CollectionOrientation | undefined;
-    /**
-     * Padding (in pixels) between each section.
-     */
-    sectionPadding?: number | undefined;
-    /**
-     * Data provided to each section.
-     */
-    sections: S[];
-    /**
-     * Indices of selected items per section. If specified, the component will not
-     * manage selection state.
-     *
-     * @see {@link AccordionSelection}
-     */
-    selection?: AccordionSelection | undefined;
-    /**
-     * Selection mode of each section.
-     *
-     * @see {@link CollectionSelectionMode}
-     */
-    selectionMode?: CollectionSelectionMode | undefined;
-    /**
-     * Specifies if the component should use default styles.
-     */
-    useDefaultStyles?: boolean | undefined;
-    /**
-     * 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) | undefined;
-    /**
-     * 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) | undefined;
-    /**
-     * 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) | undefined;
-    /**
-     * Handler invoked when the expansion state of any section changes.
-     *
-     * @param expandedSectionIndices Indices of sections that are expanded.
-     */
-    onExpandedSectionsChange?: ((expandedSectionIndices: number[]) => void) | undefined;
-    /**
-     * 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) | undefined;
-    /**
-     * 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) | undefined;
-    /**
-     * 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) | undefined;
-    /**
-     * 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) | undefined;
-    /**
-     * 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) | undefined;
-    /**
-     * Component type for generating section headers inside the component. When
-     * absent, one will be generated automatically.
-     */
-    HeaderComponent?: React.ComponentType<AccordionHeaderProps<I, S>> | undefined;
-    /**
-     * Component type for generating items for each section.
-     */
-    ItemComponent?: React.ComponentType<AccordionItemProps<I>> | undefined;
-} & {
-    children?: React.ReactNode;
-} & {
-    ref?: React.Ref<HTMLDivElement> | undefined;
+export declare const Accordion: <I, S extends AccordionSection<I> = AccordionSection<I>>(props: AccordionProps<I, S> & {
+    ref?: Ref<HTMLDivElement>;
 }) => ReactElement;

package/{lib → components}/Accordion.js

@@ -74,27 +74,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordion = void 0;
-var classnames_1 = __importDefault(require("classnames"));
+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 Each_1 = require("./Each");
 var FlatSVG_1 = require("./FlatSVG");
-var utils_1 = require("./utils");
 /**
  * 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.
- *
- * This component automatically determines if it should track selection state
- * and expansion states internally. If the `selection` prop is provided, the
- * component will not initialize the selection state. It will be up to its
- * parent to provide item selection in tandem with the component's
- * `onSelectionChange` handler. Likewise for the omission of the expansion
- * states if `expandedSectionIndices` prop is provided.
  */
 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.useDefaultStyles, useDefaultStyles = _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", "useDefaultStyles", "onActivateAt", "onCollapseSectionAt", "onDeselectAt", "onExpandedSectionsChange", "onExpandSectionAt", "onHeaderCustomEvent", "onItemCustomEvent", "onSelectAt", "onSelectionChange", "HeaderComponent", "ItemComponent"]);
+    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;
@@ -113,15 +106,15 @@ exports.Accordion = (0, react_2.forwardRef)(function (_a, ref) {
         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 sectionIndices.sort().filter(function (t) { return !isSectionIndexOutOfRange(t); }); };
+    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.prototype.hasOwnProperty.call(sections, sectionIndex))
+            if (!Object.hasOwn(sections, sectionIndex))
                 return "continue";
-            var indices = __spreadArray([], __read((_a = selection[sectionIndex]) !== null && _a !== void 0 ? _a : []), false).sort();
-            newValue[Number(sectionIndex)] = indices.sort().filter(function (t) { return !isItemIndexOutOfRange(t, Number(sectionIndex)); });
+            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);
@@ -140,12 +133,7 @@ exports.Accordion = (0, react_2.forwardRef)(function (_a, ref) {
         else {
             transform = function (val) { return __spreadArray(__spreadArray([], __read(val.filter(function (t) { return t !== sectionIndex; })), false), [sectionIndex], false); };
         }
-        if (setExpandedSectionIndices) {
-            setExpandedSectionIndices(function (prev) { return transform(prev); });
-        }
-        else {
-            handleExpandedSectionsChange(expandedSectionIndices, transform(expandedSectionIndices));
-        }
+        handleExpandedSectionsChange(expandedSectionIndices, transform(expandedSectionIndices));
     };
     var handleSelectAt = function (itemIndex, sectionIndex) {
         if (isSelectedAt(itemIndex, sectionIndex))
@@ -156,7 +144,7 @@ exports.Accordion = (0, react_2.forwardRef)(function (_a, ref) {
                 transform = function (val) {
                     var _a;
                     var _b;
-                    return (__assign(__assign({}, val), (_a = {}, _a[sectionIndex] = __spreadArray(__spreadArray([], __read(((_b = val[sectionIndex]) !== null && _b !== void 0 ? _b : []).filter(function (t) { return t !== itemIndex; })), false), [itemIndex], false).sort(), _a)));
+                    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':
@@ -170,14 +158,9 @@ exports.Accordion = (0, react_2.forwardRef)(function (_a, ref) {
             default:
                 return;
         }
-        if (setSelection) {
-            setSelection(function (prev) { return transform(prev); });
-        }
-        else {
-            var newValue = transform(selection);
-            prevSelectionRef.current = newValue;
-            handleSelectionChange(selection, newValue);
-        }
+        var newValue = transform(selection);
+        prevSelectionRef.current = newValue;
+        handleSelectionChange(selection, newValue);
     };
     var handleDeselectAt = function (itemIndex, sectionIndex) {
         if (!isSelectedAt(itemIndex, sectionIndex))
@@ -187,14 +170,9 @@ exports.Accordion = (0, react_2.forwardRef)(function (_a, ref) {
             var _b;
             return (__assign(__assign({}, val), (_a = {}, _a[sectionIndex] = ((_b = val[sectionIndex]) !== null && _b !== void 0 ? _b : []).filter(function (t) { return t !== itemIndex; }), _a)));
         };
-        if (setSelection) {
-            setSelection(function (prev) { return transform(prev); });
-        }
-        else {
-            var newValue = transform(selection);
-            prevSelectionRef.current = newValue;
-            handleSelectionChange(selection, newValue);
-        }
+        var newValue = transform(selection);
+        prevSelectionRef.current = newValue;
+        handleSelectionChange(selection, newValue);
     };
     var handleExpandedSectionsChange = function (oldValue, newValue) {
         var _a;
@@ -228,14 +206,10 @@ exports.Accordion = (0, react_2.forwardRef)(function (_a, ref) {
         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 tracksSelectionChanges = externalSelection === undefined && selectionMode !== 'none';
-    var tracksExpansionChanges = externalExpandedSectionIndices === undefined;
-    var sanitizedExternalSelection = sanitizeSelection(externalSelection !== null && externalSelection !== void 0 ? externalSelection : {});
-    var _g = __read(tracksSelectionChanges ? (0, react_2.useState)(sanitizedExternalSelection) : [sanitizedExternalSelection], 2), selection = _g[0], setSelection = _g[1];
-    var sanitizedExternalExpandedSectionIndices = sanitizeExpandedSectionIndices(externalExpandedSectionIndices !== null && externalExpandedSectionIndices !== void 0 ? externalExpandedSectionIndices : []);
-    var _h = __read(tracksExpansionChanges ? (0, react_2.useState)(sanitizedExternalExpandedSectionIndices) : [sanitizedExternalExpandedSectionIndices], 2), expandedSectionIndices = _h[0], setExpandedSectionIndices = _h[1];
+    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 = useDefaultStyles ? getDefaultStyles({ orientation: orientation }) : undefined;
+    var defaultStyles = usesDefaultStyles ? getDefaultStyles({ orientation: orientation }) : undefined;
     var prevSelectionRef = (0, react_2.useRef)();
     var prevSelection = prevSelectionRef.current;
     (0, react_2.useEffect)(function () {
@@ -259,25 +233,36 @@ exports.Accordion = (0, react_2.forwardRef)(function (_a, ref) {
                 } : {
                     marginLeft: sectionIndex === 0 ? '0px' : "".concat(sectionPadding, "px"),
                 }) },
-                HeaderComponent ? (react_2.default.createElement(HeaderComponent, { "data-child": 'header', className: (0, classnames_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, classnames_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); } },
+                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, classnames_1.default)({ collapsed: isCollapsed, expanded: !isCollapsed }), style: (0, utils_1.styles)(fixedStyles.list, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.collection, orientation === 'vertical' ? {
+                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 ? 'hidden' : maxVisible < allVisible ? 'scroll' : 'hidden',
+                        overflowY: maxVisible < 0 || maxVisible >= allVisible ? 'hidden' : 'scroll',
                     } : {
                         marginLeft: isCollapsed ? '0px' : "".concat(collectionPadding, "px"),
-                        overflowX: maxVisible < 0 ? 'hidden' : maxVisible < allVisible ? 'scroll' : 'hidden',
+                        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) { return onActivateAt === null || onActivateAt === void 0 ? void 0 : onActivateAt(itemIndex, sectionIndex); }, onDeselectAt: function (itemIndex) { return handleDeselectAt === null || handleDeselectAt === void 0 ? void 0 : handleDeselectAt(itemIndex, sectionIndex); }, onItemCustomEvent: function (itemIndex, name, info) { return onItemCustomEvent === null || onItemCustomEvent === void 0 ? void 0 : onItemCustomEvent(itemIndex, sectionIndex, name, info); }, onSelectAt: function (itemIndex) { return handleSelectAt === null || handleSelectAt === void 0 ? void 0 : handleSelectAt(itemIndex, sectionIndex); }, ItemComponent: ItemComponent })));
+                    }), 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)({

package/components/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["components/Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport isDeepEqual from 'fast-deep-equal/react'\nimport React, { forwardRef, useEffect, useRef, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport { Each } from '../operators/Each'\nimport { asStyleDict, cloneStyledElement, styles } from '../utils'\nimport { Collection, type CollectionItemProps, type CollectionOrientation, type CollectionProps, type CollectionSelectionMode } from './Collection'\nimport { FlatSVG } from './FlatSVG'\n\n/**\n * Type describing the current item selection of {@link Accordion}, composed of\n * a dictionary whose key corresponds the section index and value corresponds to\n * an array of selected item indices. If the selection mode of the\n * {@link Accordion} is `single`, only one key will be present and one index in\n * the array value.\n */\nexport type AccordionSelection = Record<number, number[]>\n\n/**\n * Type describing the data of each section in {@link Accordion}.\n */\nexport type AccordionSection<T> = Pick<CollectionProps<T>, 'isSelectionTogglable' | 'itemLength' | 'itemPadding' | 'items' | 'layout' | 'numSegments'> & {\n  /**\n   * Padding (in pixels) between the sectionheader and the internal collection.\n   */\n  collectionPadding?: number\n\n  /**\n   * Label for the section header.\n   */\n  label: string\n\n  /**\n   * Maximum number of visible rows (if section orientation is `vertical`) or\n   * columns (if section orientation is `horizontal`). If number of rows exceeds\n   * the number of visible, a scrollbar will be put in place.\n   */\n  maxVisible?: number\n}\n\n/**\n * Type describing the props of each `ItemComponent` provided to\n * {@link Accordion}.\n */\nexport type AccordionItemProps<T> = CollectionItemProps<T>\n\n/**\n * Type describing the props of each `HeaderComponent` provided to\n * {@link Accordion}.\n */\nexport type AccordionHeaderProps<I, S extends AccordionSection<I> = AccordionSection<I>> = HTMLAttributes<HTMLElement> & PropsWithChildren<{\n  /**\n   * The index of the corresponding section.\n   */\n  index: number\n\n  /**\n   * Indicates whether the corresponding section is collapsed.\n   */\n  isCollapsed: boolean\n\n  /**\n   * Data provided to the corresponding section.\n   */\n  section: S\n\n  /**\n   * Handler invoked to dispatch a custom event.\n   *\n   * @param name User-defined name of the custom event.\n   * @param info Optional user-defined info of the custom event.\n   */\n  onCustomEvent?: (name: string, info?: any) => void\n}>\n\n/**\n * Type describing the props of {@link Accordion}.\n */\nexport type AccordionProps<I, S extends AccordionSection<I> = AccordionSection<I>> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  /**\n   * Specifies if expanded sections should automatically collapse upon expanding\n   * another section.\n   */\n  autoCollapseSections?: boolean\n\n  /**\n   * SVG markup to use as the collapse icon when a toggle button is\n   * automatically generated (when `HeaderComponent` is absent).\n   */\n  collapseIconSvg?: string\n\n  /**\n   * Indices of sections that are expanded. If specified, the component will not\n   * manage expansion states.\n   */\n  expandedSectionIndices?: number[]\n\n  /**\n   * SVG markup to use as the expand icon when a toggle button is automatically\n   * generated (when `HeaderComponent` is absent).\n   */\n  expandIconSvg?: string\n\n  /**\n   * Orientation of this component.\n   *\n   * @see {@link CollectionOrientation}\n   */\n  orientation?: CollectionOrientation\n\n  /**\n   * Padding (in pixels) between each section.\n   */\n  sectionPadding?: number\n\n  /**\n   * Data provided to each section.\n   */\n  sections: S[]\n\n  /**\n   * Indices of selected items per section.\n   *\n   * @see {@link AccordionSelection}\n   */\n  selection?: AccordionSelection\n\n  /**\n   * Selection mode of each section.\n   *\n   * @see {@link CollectionSelectionMode}\n   */\n  selectionMode?: CollectionSelectionMode\n\n  /**\n   * Specifies if the component should use default styles.\n   */\n  usesDefaultStyles?: boolean\n\n  /**\n   * Handler invoked when an item is activated in a section. The order of\n   * handlers invoked when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\n   *\n   * @param itemIndex Item index.\n   * @param sectionIndex Section index.\n   */\n  onActivateAt?: (itemIndex: number, sectionIndex: number) => void\n\n  /**\n   * Handler invoked when a section is collapsed. The order of handlers invoked\n   * when any section expansion changes take place is:\n   *   1. `onCollapseSectionAt`\n   *   2. `onExpandSectionAt`\n   *\n   * @param sectionIndex Section index.\n   */\n  onCollapseSectionAt?: (sectionIndex: number) => void\n\n  /**\n   * Handler invoked when an item is deselected in a section. The order of\n   * handlers invoked when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\n   *\n   * @param itemIndex Item index.\n   * @param sectionIndex Section index.\n   */\n  onDeselectAt?: (itemIndex: number, sectionIndex: number) => void\n\n  /**\n   * Handler invoked when the expansion state of any section changes.\n   *\n   * @param expandedSectionIndices Indices of sections that are expanded.\n   */\n  onExpandedSectionsChange?: (expandedSectionIndices: number[]) => void\n\n  /**\n   * Handler invoked when a section is expanded. The order of handlers invoked\n   * when any section expansion changes take place is:\n   *   1. `onCollapseSectionAt`\n   *   2. `onExpandSectionAt`\n   *\n   * @param sectionIndex Section index.\n   */\n  onExpandSectionAt?: (sectionIndex: number) => void\n\n  /**\n   * Handler invoked when a custom event is dispatched from a section header.\n   *\n   * @param sectionIndex Index of the section which the header belongs.\n   * @param eventName User-defined name of the dispatched event.\n   * @param eventInfo Optional user-defined info of the dispatched event.\n   */\n  onHeaderCustomEvent?: (sectionIndex: number, eventName: string, eventInfo?: any) => void\n\n  /**\n   * Handler invoked when a custom event is dispatched from an item.\n   *\n   * @param itemIndex Item index.\n   * @param sectionIndex Section index.\n   * @param eventName User-defined name of the dispatched event.\n   * @param eventInfo Optional user-defined info of the dispatched event.\n   */\n  onItemCustomEvent?: (itemIndex: number, sectionIndex: number, eventName: string, eventInfo?: any) => void\n\n  /**\n   * Handler invoked when an item is selected in a section. The order of\n   * handlers invoked when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\n   *\n   * @param itemIndex Item index.\n   * @param sectionIndex Section index.\n   */\n  onSelectAt?: (itemIndex: number, sectionIndex: number) => void\n\n  /**\n   * Handler invoked when selected items have changed. The order of handlers\n   * invoked when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\n   *\n   * @param selectedIndices Dictionary of indices of selected items per section.\n   */\n  onSelectionChange?: (selection: AccordionSelection) => void\n\n  /**\n   * Component type for generating section headers inside the component. When\n   * absent, one will be generated automatically.\n   */\n  HeaderComponent?: ComponentType<AccordionHeaderProps<I, S>>\n\n  /**\n   * Component type for generating items for each section.\n   */\n  ItemComponent?: ComponentType<AccordionItemProps<I>>\n}>\n\n/**\n * A collection of selectable items laid out in sections in an accordion. Items\n * are generated based on the provided `ItemComponent` while each section header\n * is optionally provided by `HeaderComponent` or generated automatically.\n */\nexport const Accordion = forwardRef(({\n  children,\n  style,\n  autoCollapseSections = false,\n  collapseIconSvg,\n  expandedSectionIndices: externalExpandedSectionIndices,\n  expandIconSvg,\n  orientation = 'vertical',\n  sectionPadding = 0,\n  sections,\n  selection: externalSelection,\n  selectionMode = 'single',\n  usesDefaultStyles = false,\n  onActivateAt,\n  onCollapseSectionAt,\n  onDeselectAt,\n  onExpandedSectionsChange,\n  onExpandSectionAt,\n  onHeaderCustomEvent,\n  onItemCustomEvent,\n  onSelectAt,\n  onSelectionChange,\n  HeaderComponent,\n  ItemComponent,\n  ...props\n}, ref) => {\n  const isSectionIndexOutOfRange = (sectionIndex: number) => {\n    if (sectionIndex >= sections.length) return true\n    if (sectionIndex < 0) return true\n\n    return false\n  }\n\n  const isItemIndexOutOfRange = (itemIndex: number, sectionIndex: number) => {\n    if (isSectionIndexOutOfRange(sectionIndex)) return true\n\n    const items = sections[sectionIndex].items\n\n    if (itemIndex >= items.length) return true\n    if (itemIndex < 0) return true\n\n    return false\n  }\n\n  const isSelectedAt = (itemIndex: number, sectionIndex: number) => (selection[sectionIndex]?.indexOf(itemIndex) ?? -1) >= 0\n\n  const sanitizeExpandedSectionIndices = (sectionIndices: number[]) => sortIndices(sectionIndices).filter(t => !isSectionIndexOutOfRange(t))\n\n  const sanitizeSelection = (selection: AccordionSelection) => {\n    const newValue: AccordionSelection = {}\n\n    for (const sectionIndex in sections) {\n      if (!Object.hasOwn(sections, sectionIndex)) continue\n\n      const indices = sortIndices([...selection[sectionIndex] ?? []])\n\n      newValue[Number(sectionIndex)] = sortIndices(indices).filter(t => !isItemIndexOutOfRange(t, Number(sectionIndex)))\n    }\n\n    return newValue\n  }\n\n  const isSectionExpandedAt = (sectionIndex: number) => expandedSectionIndices.indexOf(sectionIndex) >= 0\n\n  const toggleSectionAt = (sectionIndex: number) => {\n    let transform: (val: number[]) => number[]\n\n    if (isSectionExpandedAt(sectionIndex)) {\n      transform = val => val.filter(t => t !== sectionIndex)\n    }\n    else if (autoCollapseSections) {\n      transform = val => [sectionIndex]\n    }\n    else {\n      transform = val => [...val.filter(t => t !== sectionIndex), sectionIndex]\n    }\n\n    handleExpandedSectionsChange(expandedSectionIndices, transform(expandedSectionIndices))\n  }\n\n  const handleSelectAt = (itemIndex: number, sectionIndex: number) => {\n    if (isSelectedAt(itemIndex, sectionIndex)) return\n\n    let transform: (val: AccordionSelection) => AccordionSelection\n\n    switch (selectionMode) {\n      case 'multiple':\n        transform = val => ({\n          ...val,\n          [sectionIndex]: sortIndices([...(val[sectionIndex] ?? []).filter(t => t !== itemIndex), itemIndex]),\n        })\n        break\n      case 'single':\n        transform = val => ({\n          [sectionIndex]: [itemIndex],\n        })\n        break\n      default:\n        return\n    }\n\n    const newValue = transform(selection)\n\n    prevSelectionRef.current = newValue\n    handleSelectionChange(selection, newValue)\n  }\n\n  const handleDeselectAt = (itemIndex: number, sectionIndex: number) => {\n    if (!isSelectedAt(itemIndex, sectionIndex)) return\n\n    const transform = (val: AccordionSelection) => ({\n      ...val,\n      [sectionIndex]: (val[sectionIndex] ?? []).filter(t => t !== itemIndex),\n    })\n\n    const newValue = transform(selection)\n\n    prevSelectionRef.current = newValue\n    handleSelectionChange(selection, newValue)\n  }\n\n  const handleExpandedSectionsChange = (oldValue: number[] | undefined, newValue: number[]) => {\n    if (isDeepEqual(oldValue, newValue)) return\n\n    const collapsed = oldValue?.filter(t => newValue.indexOf(t) === -1) ?? []\n    const expanded = newValue.filter(t => oldValue?.indexOf(t) === -1)\n\n    collapsed.forEach(t => onCollapseSectionAt?.(t))\n    expanded.forEach(t => onExpandSectionAt?.(t))\n\n    onExpandedSectionsChange?.(newValue)\n  }\n\n  const handleSelectionChange = (oldValue: AccordionSelection | undefined, newValue: AccordionSelection) => {\n    if (isDeepEqual(oldValue, newValue)) return\n\n    const numSections = sections.length\n\n    let allDeselected: number[][] = []\n    let allSelected: number[][] = []\n\n    for (let i = 0; i < numSections; i++) {\n      const oldSection = oldValue?.[i] ?? []\n      const newSection = newValue[i] ?? []\n      const deselected = oldSection.filter(t => newSection.indexOf(t) === -1)\n      const selected = newSection.filter(t => oldSection?.indexOf(t) === -1)\n\n      allDeselected = [...allDeselected, ...deselected.map(t => [t, i])]\n      allSelected = [...allSelected, ...selected.map(t => [t, i])]\n    }\n\n    allDeselected.forEach(t => onDeselectAt?.(t[0], t[1]))\n    allSelected.forEach(t => onSelectAt?.(t[0], t[1]))\n\n    onSelectionChange?.(newValue)\n  }\n\n  const selection = sanitizeSelection(externalSelection ?? {})\n  const expandedSectionIndices = sanitizeExpandedSectionIndices(externalExpandedSectionIndices ?? [])\n  const fixedStyles = getFixedStyles({ orientation })\n  const defaultStyles = usesDefaultStyles ? getDefaultStyles({ orientation }) : undefined\n  const prevSelectionRef = useRef<AccordionSelection>()\n  const prevSelection = prevSelectionRef.current\n\n  useEffect(() => {\n    prevSelectionRef.current = selection\n\n    if (prevSelection === undefined) return\n\n    handleSelectionChange(prevSelection, selection)\n  }, [JSON.stringify(selection)])\n\n  return (\n    <div {...props} data-component='accordion' style={styles(style, fixedStyles.root)} ref={ref}>\n      <Each in={sections}>\n        {(section, sectionIndex) => {\n          const { collectionPadding = 0, items, itemLength = 50, itemPadding = 0, isSelectionTogglable, layout = 'list', maxVisible = -1, numSegments = 1 } = section\n          const allVisible = layout === 'list' ? items.length : Math.ceil(items.length / numSegments)\n          const numVisible = maxVisible < 0 ? allVisible : Math.min(allVisible, maxVisible)\n          const maxLength = itemLength * numVisible + itemPadding * (numVisible - 1)\n          const isCollapsed = !isSectionExpandedAt(sectionIndex)\n          const expandIconComponent = expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles?.expandIcon}/> : <></>\n          const collapseIconComponent = collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles?.collapseIcon}/> : expandIconComponent\n\n          return (\n            <div style={styles(fixedStyles.section, orientation === 'vertical' ? {\n              marginTop: sectionIndex === 0 ? '0px' : `${sectionPadding}px`,\n            } : {\n              marginLeft: sectionIndex === 0 ? '0px' : `${sectionPadding}px`,\n            })}>\n              {HeaderComponent ? (\n                <HeaderComponent\n                  data-child='header'\n                  className={clsx({ collapsed: isCollapsed, expanded: !isCollapsed })}\n                  style={styles(fixedStyles.header)}\n                  index={sectionIndex}\n                  isCollapsed={isCollapsed}\n                  section={section}\n                  onClick={() => toggleSectionAt(sectionIndex)}\n                  onCustomEvent={(name, info) => onHeaderCustomEvent?.(sectionIndex, name, info)}\n                />\n              ) : (\n                <button\n                  data-child='header'\n                  className={clsx({ collapsed: isCollapsed, expanded: !isCollapsed })}\n                  style={styles(fixedStyles.header, defaultStyles?.header)}\n                  onClick={() => toggleSectionAt(sectionIndex)}\n                >\n                  <span style={styles(defaultStyles?.headerLabel)} dangerouslySetInnerHTML={{ __html: section.label }}/>\n                  {cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n                    style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n                  })}\n                </button>\n              )}\n              <Collection\n                data-child='collection'\n                className={clsx({ collapsed: isCollapsed, expanded: !isCollapsed })}\n                style={styles(fixedStyles.list, defaultStyles?.collection, orientation === 'vertical' ? {\n                  width: '100%',\n                  height: isCollapsed ? '0px' : `${maxLength}px`,\n                  marginTop: isCollapsed ? '0px' : `${collectionPadding}px`,\n                  overflowY: maxVisible < 0 || maxVisible >= allVisible ? 'hidden' : 'scroll',\n                } : {\n                  marginLeft: isCollapsed ? '0px' : `${collectionPadding}px`,\n                  overflowX: maxVisible < 0 || maxVisible >= allVisible ? 'hidden' : 'scroll',\n                  width: isCollapsed ? '0px' : `${maxLength}px`,\n                  height: '100%',\n                })}\n                selectionMode={selectionMode}\n                isSelectionTogglable={isSelectionTogglable}\n                itemLength={itemLength}\n                itemPadding={itemPadding}\n                items={items}\n                orientation={orientation}\n                layout={layout}\n                numSegments={numSegments}\n                selection={selection[sectionIndex] ?? []}\n                onActivateAt={itemIndex => {\n                  onActivateAt?.(itemIndex, sectionIndex)\n                }}\n                onDeselectAt={itemIndex => {\n                  handleDeselectAt?.(itemIndex, sectionIndex)\n                }}\n                onItemCustomEvent={(itemIndex, name, info) => {\n                  onItemCustomEvent?.(itemIndex, sectionIndex, name, info)\n                }}\n                onSelectAt={itemIndex => {\n                  handleSelectAt?.(itemIndex, sectionIndex)\n                }}\n                ItemComponent={ItemComponent}\n              />\n            </div>\n          )\n        }}\n      </Each>\n    </div>\n  )\n}) as <I, S extends AccordionSection<I> = AccordionSection<I>>(props: AccordionProps<I, S> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nObject.defineProperty(Accordion, 'displayName', { value: 'Accordion', writable: false })\n\nfunction sortIndices(indices: number[]): number[] {\n  return indices.sort((a, b) => a - b)\n}\n\nfunction getFixedStyles({ orientation = 'vertical' }) {\n  return asStyleDict({\n    root: {\n      alignItems: 'center',\n      boxSizing: 'border-box',\n      display: 'flex',\n      flex: '0 0 auto',\n      justifyContent: 'flex-start',\n      padding: '0',\n      ...orientation === 'vertical' ? {\n        flexDirection: 'column',\n        height: 'auto',\n      } : {\n        flexDirection: 'row',\n        width: 'auto',\n      },\n    },\n    section: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      flex: '0 0 auto',\n      justifyContent: 'flex-start',\n      margin: '0',\n      padding: '0',\n      ...orientation === 'vertical' ? {\n        flexDirection: 'column',\n        width: '100%',\n      } : {\n        flexDirection: 'row',\n        height: '100%',\n      },\n    },\n    list: {\n\n    },\n    header: {\n      cursor: 'pointer',\n      margin: '0',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n      } : {\n        height: '100%',\n      },\n    },\n    expandIcon: {\n      margin: '0',\n      padding: '0',\n    },\n    collapseIcon: {\n      margin: '0',\n      padding: '0',\n    },\n  })\n}\n\nfunction getDefaultStyles({ orientation = 'vertical' }) {\n  return asStyleDict({\n    collection: {\n      transitionDuration: '100ms',\n      transitionTimingFunction: 'ease-out',\n      ...orientation === 'vertical' ? {\n        transitionProperty: 'height, margin',\n      } : {\n        transitionProperty: 'width, margin',\n      },\n    },\n    header: {\n      border: 'none',\n      outline: 'none',\n      alignItems: 'center',\n      background: '#fff',\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      padding: '0 10px',\n      transitionDuration: '100ms',\n      transitionProperty: 'transform, opacity, background, color',\n      transitionTimingFunction: 'ease-out',\n      ...orientation === 'vertical' ? {\n        height: '50px',\n      } : {\n        width: '50px',\n      },\n    },\n    headerLabel: {\n      color: 'inherit',\n      fontFamily: 'inherit',\n      fontSize: 'inherit',\n      fontWeight: 'inherit',\n      letterSpacing: 'inherit',\n      lineHeight: 'inherit',\n      pointerEvents: 'none',\n      transition: 'inherit',\n    },\n    expandIcon: {\n      boxSizing: 'border-box',\n      display: 'block',\n      fill: '#000',\n      height: '15px',\n      transformOrigin: 'center',\n      transitionDuration: '100ms',\n      transitionProperty: 'transform',\n      transitionTimingFunction: 'ease-out',\n      width: '15px',\n    },\n    collapseIcon: {\n      boxSizing: 'border-box',\n      display: 'block',\n      fill: '#000',\n      height: '15px',\n      transformOrigin: 'center',\n      transitionDuration: '100ms',\n      transitionProperty: 'transform',\n      transitionTimingFunction: 'ease-out',\n      width: '15px',\n    },\n  })\n}\n"]}

package/{lib → components}/BurgerButton.d.ts

@@ -6,6 +6,7 @@ export type BurgerButtonProps = HTMLAttributes<HTMLButtonElement> & PropsWithChi
     isLastBarHalfWidth?: boolean;
     thickness?: number;
     transitionDuration?: number;
+    usesDefaultStyles?: boolean;
     width?: number;
     onActivate?: () => void;
     onDeactivate?: () => void;
@@ -23,6 +24,7 @@ export declare const BurgerButton: React.ForwardRefExoticComponent<React.HTMLAtt
     isLastBarHalfWidth?: boolean | undefined;
     thickness?: number | undefined;
     transitionDuration?: number | undefined;
+    usesDefaultStyles?: boolean | undefined;
     width?: number | undefined;
     onActivate?: (() => void) | undefined;
     onDeactivate?: (() => void) | undefined;

package/{lib → components}/BurgerButton.js

@@ -65,10 +65,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BurgerButtonBar = exports.BurgerButton = void 0;
-var classnames_1 = __importDefault(require("classnames"));
+var clsx_1 = __importDefault(require("clsx"));
 var react_1 = __importStar(require("react"));
-var Repeat_1 = require("./Repeat");
-var utils_1 = require("./utils");
+var Repeat_1 = require("../operators/Repeat");
+var utils_1 = require("../utils");
 /**
  * Three-striped burger button component that transforms into an "X" when
  * selected.
@@ -76,8 +76,8 @@ var utils_1 = require("./utils");
  * @exports BurgerButtonBar Component for each line on the burger button.
  */
 exports.BurgerButton = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, className = _a.className, style = _a.style, _b = _a.height, height = _b === void 0 ? 20 : _b, _c = _a.isActive, externalIsActive = _c === void 0 ? false : _c, _d = _a.isDoubleJointed, isDoubleJointed = _d === void 0 ? false : _d, _e = _a.isLastBarHalfWidth, isLastBarHalfWidth = _e === void 0 ? false : _e, _f = _a.thickness, thickness = _f === void 0 ? 2 : _f, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? 200 : _g, _h = _a.width, width = _h === void 0 ? 20 : _h, onActivate = _a.onActivate, onDeactivate = _a.onDeactivate, props = __rest(_a, ["children", "className", "style", "height", "isActive", "isDoubleJointed", "isLastBarHalfWidth", "thickness", "transitionDuration", "width", "onActivate", "onDeactivate"]);
-    var _j = __read((0, react_1.useState)(externalIsActive), 2), isActive = _j[0], setIsActive = _j[1];
+    var children = _a.children, className = _a.className, style = _a.style, _b = _a.height, height = _b === void 0 ? 20 : _b, _c = _a.isActive, externalIsActive = _c === void 0 ? false : _c, _d = _a.isDoubleJointed, isDoubleJointed = _d === void 0 ? false : _d, _e = _a.isLastBarHalfWidth, isLastBarHalfWidth = _e === void 0 ? false : _e, _f = _a.thickness, thickness = _f === void 0 ? 2 : _f, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? 200 : _g, _h = _a.usesDefaultStyles, usesDefaultStyles = _h === void 0 ? false : _h, _j = _a.width, width = _j === void 0 ? 20 : _j, onActivate = _a.onActivate, onDeactivate = _a.onDeactivate, props = __rest(_a, ["children", "className", "style", "height", "isActive", "isDoubleJointed", "isLastBarHalfWidth", "thickness", "transitionDuration", "usesDefaultStyles", "width", "onActivate", "onDeactivate"]);
+    var _k = __read((0, react_1.useState)(externalIsActive), 2), isActive = _k[0], setIsActive = _k[1];
     (0, react_1.useEffect)(function () {
         if (isActive === externalIsActive)
             return;
@@ -95,14 +95,35 @@ exports.BurgerButton = (0, react_1.forwardRef)(function (_a, ref) {
         bar: exports.BurgerButtonBar,
     });
     var fixedClassNames = (0, utils_1.asClassNameDict)({
-        root: (0, classnames_1.default)({
+        root: (0, clsx_1.default)({
             active: isActive,
         }),
-        bar: (0, classnames_1.default)({
+        bar: (0, clsx_1.default)({
             active: isActive,
         }),
     });
-    var fixedStyles = (0, utils_1.asStyleDict)({
+    var fixedStyles = getFixedStyles({ height: height, width: width, isDoubleJointed: isDoubleJointed, thickness: thickness, isActive: isActive, isLastBarHalfWidth: isLastBarHalfWidth });
+    var defaultStyles = usesDefaultStyles ? getDefaultStyles() : undefined;
+    return (react_1.default.createElement("button", __assign({}, props, { ref: ref, className: (0, clsx_1.default)(className, fixedClassNames.root), style: (0, utils_1.styles)(style, fixedStyles.root), "data-component": 'burger-button', onClick: function () { return setIsActive(!isActive); } }),
+        react_1.default.createElement(Repeat_1.Repeat, { count: isDoubleJointed ? 2 : 1 }, function (j) { return (react_1.default.createElement("div", { style: (0, utils_1.styles)(fixedStyles.joint, fixedStyles["joint".concat(j)]), "data-child": 'joint' },
+            react_1.default.createElement(Repeat_1.Repeat, { count: 3 }, function (i) {
+                var _a;
+                return (0, utils_1.cloneStyledElement)((_a = components.bar) !== null && _a !== void 0 ? _a : react_1.default.createElement(exports.BurgerButtonBar, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.bar }), {
+                    'className': (0, clsx_1.default)(fixedClassNames.bar),
+                    'style': (0, utils_1.styles)(fixedStyles.bar, fixedStyles["bar".concat(j).concat(i)]),
+                    'data-index': i,
+                });
+            }))); })));
+});
+Object.defineProperty(exports.BurgerButton, 'displayName', { value: 'BurgerButton', writable: false });
+var BurgerButtonBar = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("span", __assign({}, props, { "data-child": 'bar' }));
+};
+exports.BurgerButtonBar = BurgerButtonBar;
+function getFixedStyles(_a) {
+    var _b = _a.height, height = _b === void 0 ? 0 : _b, _c = _a.width, width = _c === void 0 ? 0 : _c, _d = _a.isDoubleJointed, isDoubleJointed = _d === void 0 ? false : _d, _e = _a.thickness, thickness = _e === void 0 ? 0 : _e, _f = _a.isActive, isActive = _f === void 0 ? false : _f, _g = _a.isLastBarHalfWidth, isLastBarHalfWidth = _g === void 0 ? false : _g;
+    return (0, utils_1.asStyleDict)({
         root: {
             background: 'transparent',
             border: 'none',
@@ -170,7 +191,9 @@ exports.BurgerButton = (0, react_1.forwardRef)(function (_a, ref) {
             width: isLastBarHalfWidth && !isActive ? '0' : '100%',
         },
     });
-    var defaultStyles = (0, utils_1.asStyleDict)({
+}
+function getDefaultStyles() {
+    return (0, utils_1.asStyleDict)({
         bar: {
             background: '#fff',
             transitionDuration: '100ms',
@@ -178,21 +201,5 @@ exports.BurgerButton = (0, react_1.forwardRef)(function (_a, ref) {
             transitionTimingFunction: 'ease-out',
         },
     });
-    return (react_1.default.createElement("button", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, utils_1.styles)(style, fixedStyles.root), onClick: function () { return setIsActive(!isActive); } }),
-        react_1.default.createElement(Repeat_1.Repeat, { count: isDoubleJointed ? 2 : 1 }, function (j) { return (react_1.default.createElement("div", { style: (0, utils_1.styles)(fixedStyles.joint, fixedStyles["joint".concat(j)]) },
-            react_1.default.createElement(Repeat_1.Repeat, { count: 3 }, function (i) {
-                var _a;
-                return (0, utils_1.cloneStyledElement)((_a = components.bar) !== null && _a !== void 0 ? _a : react_1.default.createElement(exports.BurgerButtonBar, { style: defaultStyles.bar }), {
-                    'className': (0, classnames_1.default)(fixedClassNames.bar),
-                    'style': (0, utils_1.styles)(fixedStyles.bar, fixedStyles["bar".concat(j).concat(i)]),
-                    'data-index': i,
-                });
-            }))); })));
-});
-Object.defineProperty(exports.BurgerButton, 'displayName', { value: 'BurgerButton', writable: false });
-var BurgerButtonBar = function (_a) {
-    var props = __rest(_a, []);
-    return react_1.default.createElement("span", __assign({}, props));
-};
-exports.BurgerButtonBar = BurgerButtonBar;
+}
 //# sourceMappingURL=BurgerButton.js.map

package/components/BurgerButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BurgerButton.js","sourceRoot":"/","sources":["components/BurgerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport React, { forwardRef, useEffect, useState, type HTMLAttributes, type PropsWithChildren } from 'react'\nimport { Repeat } from '../operators/Repeat'\nimport { asClassNameDict, asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils'\n\nexport type BurgerButtonProps = HTMLAttributes<HTMLButtonElement> & PropsWithChildren<{\n  height?: number\n  isActive?: boolean\n  isDoubleJointed?: boolean\n  isLastBarHalfWidth?: boolean\n  thickness?: number\n  transitionDuration?: number\n  usesDefaultStyles?: boolean\n  width?: number\n  onActivate?: () => void\n  onDeactivate?: () => void\n}>\n\n/**\n * Three-striped burger button component that transforms into an \"X\" when\n * selected.\n *\n * @exports BurgerButtonBar Component for each line on the burger button.\n */\nexport const BurgerButton = forwardRef<HTMLButtonElement, BurgerButtonProps>(({\n  children,\n  className,\n  style,\n  height = 20,\n  isActive: externalIsActive = false,\n  isDoubleJointed = false,\n  isLastBarHalfWidth = false,\n  thickness = 2,\n  transitionDuration = 200,\n  usesDefaultStyles = false,\n  width = 20,\n  onActivate,\n  onDeactivate,\n  ...props\n}, ref) => {\n  const [isActive, setIsActive] = useState(externalIsActive)\n\n  useEffect(() => {\n    if (isActive === externalIsActive) return\n\n    setIsActive(externalIsActive)\n  }, [externalIsActive])\n\n  useEffect(() => {\n    if (isActive) {\n      onActivate?.()\n    }\n    else {\n      onDeactivate?.()\n    }\n  }, [isActive])\n\n  const components = asComponentDict(children, {\n    bar: BurgerButtonBar,\n  })\n\n  const fixedClassNames = asClassNameDict({\n    root: clsx({\n      active: isActive,\n    }),\n    bar: clsx({\n      active: isActive,\n    }),\n  })\n\n  const fixedStyles = getFixedStyles({ height, width, isDoubleJointed, thickness, isActive, isLastBarHalfWidth })\n  const defaultStyles = usesDefaultStyles ? getDefaultStyles() : undefined\n\n  return (\n    <button\n      {...props}\n      ref={ref}\n      className={clsx(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n      data-component='burger-button'\n      onClick={() => setIsActive(!isActive)}\n    >\n      <Repeat count={isDoubleJointed ? 2 : 1}>\n        {j => (\n          <div style={styles(fixedStyles.joint, (fixedStyles as any)[`joint${j}`])} data-child='joint'>\n            <Repeat count={3}>\n              {i => cloneStyledElement(components.bar ?? <BurgerButtonBar style={defaultStyles?.bar}/>, {\n                'className': clsx(fixedClassNames.bar),\n                'style': styles(fixedStyles.bar, (fixedStyles as any)[`bar${j}${i}`]),\n                'data-index': i,\n              })}\n            </Repeat>\n          </div>\n        )}\n      </Repeat>\n    </button>\n  )\n})\n\nObject.defineProperty(BurgerButton, 'displayName', { value: 'BurgerButton', writable: false })\n\nexport const BurgerButtonBar = ({ ...props }: HTMLAttributes<HTMLSpanElement>) => <span {...props} data-child='bar'/>\n\nfunction getFixedStyles({ height = 0, width = 0, isDoubleJointed = false, thickness = 0, isActive = false, isLastBarHalfWidth = false }) {\n  return asStyleDict({\n    root: {\n      background: 'transparent',\n      border: 'none',\n      display: 'block',\n      height: `${height}px`,\n      outline: 'none',\n      width: `${width}px`,\n    },\n    joint: {\n      height: '100%',\n      position: 'absolute',\n      width: isDoubleJointed ? '50%' : '100%',\n    },\n    joint0: {\n      left: '0',\n      top: '0',\n    },\n    joint1: {\n      right: '0',\n      top: '0',\n    },\n    bar: {\n      height: `${thickness}px`,\n      margin: '0',\n      padding: '0',\n      position: 'absolute',\n      width: '100%',\n    },\n    bar00: {\n      left: '0',\n      top: '0',\n      transform: isActive ? `translate3d(0, ${height * 0.5 - thickness * 0.5}px, 0) rotate(45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n      transformOrigin: isDoubleJointed ? 'right center' : 'center',\n    },\n    bar01: {\n      left: '0',\n      top: `${height * 0.5 - thickness * 0.5}px`,\n      transform: isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)',\n      transformOrigin: isDoubleJointed ? 'right center' : 'center',\n    },\n    bar02: {\n      left: '0',\n      top: `${height - thickness}px`,\n      transform: isActive ? `translate3d(0, ${thickness * 0.5 - height * 0.5}px, 0) rotate(-45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n      transformOrigin: isDoubleJointed ? 'right center' : 'center',\n      width: isActive || isDoubleJointed ? '100%' : `${isLastBarHalfWidth ? '50%' : '100%'}`,\n    },\n    bar10: {\n      left: '0',\n      top: '0',\n      transform: isActive ? `translate3d(0, ${height * 0.5 - thickness * 0.5}px, 0) rotate(-45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n      transformOrigin: 'left center',\n    },\n    bar11: {\n      left: '0',\n      top: `${height * 0.5 - thickness * 0.5}px`,\n      transform: isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)',\n      transformOrigin: 'left center',\n    },\n    bar12: {\n      left: '0',\n      top: `${height - thickness}px`,\n      transform: isActive ? `translate3d(0, ${thickness * 0.5 - height * 0.5}px, 0) rotate(45deg)` : 'translate3d(0, 0, 0) rotate(0deg)',\n      transformOrigin: 'left center',\n      width: isLastBarHalfWidth && !isActive ? '0' : '100%',\n    },\n  })\n}\n\nfunction getDefaultStyles() {\n  return asStyleDict({\n    bar: {\n      background: '#fff',\n      transitionDuration: '100ms',\n      transitionProperty: 'width, height, transform, opacity, background',\n      transitionTimingFunction: 'ease-out',\n    },\n  })\n}\n"]}