npm - etudes - Versions diffs - 2.6.0 → 2.7.0 - Mend

etudes 2.6.0 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/lib/Accordion.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import React, { type ComponentType, type HTMLAttributes, type PropsWithChildren,
 import { type ListItemProps } from './List';
 type Orientation = 'horizontal' | 'vertical';
 export type AccordionItemProps<T> = ListItemProps<T>;
-export type SectionData<T> = {
+export type AccordionSectionData<T> = {
     label: string;
     items: T[];
 };
@@ -10,7 +10,7 @@ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildr
     /**
      * Data provided to each section.
      */
-    data: SectionData<T>[];
+    data: AccordionSectionData<T>[];
     /**
      * Indicates if sections can be toggled, as in, once a section is expanded,
      * it collapses when being selected again.
@@ -56,6 +56,10 @@ export type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildr
      * SVG markup to be put in the section header as the expand icon.
      */
     expandIconSvg?: string;
+    /**
+     * SVG markup to be put in the section header as the collapse icon.
+     */
+    collapseIconSvg?: string;
     /**
      * React component type to be used for generating items inside the component.
      */
@@ -73,7 +77,7 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Data provided to each section.
      */
-    data: SectionData<T>[];
+    data: AccordionSectionData<T>[];
     /**
      * Indicates if sections can be toggled, as in, once a section is expanded,
      * it collapses when being selected again.
@@ -119,6 +123,10 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
      * SVG markup to be put in the section header as the expand icon.
      */
     expandIconSvg?: string | undefined;
+    /**
+     * SVG markup to be put in the section header as the collapse icon.
+     */
+    collapseIconSvg?: string | undefined;
     /**
      * React component type to be used for generating items inside the component.
      */
@@ -137,5 +145,6 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement> | undefined;
 }) => ReactElement;
 export default _default;
-export declare const AccordionHeader: ({ ...props }: HTMLAttributes<HTMLButtonElement>) => React.JSX.Element;
-export declare const AccordionExpandIcon: ({ ...props }: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+export declare const AccordionHeader: ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => React.JSX.Element;
+export declare const AccordionExpandIcon: ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => React.JSX.Element;
+export declare const AccordionCollapseIcon: ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => React.JSX.Element;

package/lib/Accordion.js CHANGED Viewed

@@ -73,7 +73,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccordionExpandIcon = exports.AccordionHeader = void 0;
+exports.AccordionCollapseIcon = exports.AccordionExpandIcon = exports.AccordionHeader = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
 var Each_1 = __importDefault(require("./Each"));
@@ -85,7 +85,7 @@ var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
 var cloneStyledElement_1 = __importDefault(require("./utils/cloneStyledElement"));
 var styles_1 = __importDefault(require("./utils/styles"));
 exports.default = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, className = _a.className, style = _a.style, _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, data = _a.data, _c = _a.defaultExpandedSectionIndex, defaultExpandedSectionIndex = _c === void 0 ? -1 : _c, expandIconSvg = _a.expandIconSvg, _d = _a.isTogglable, isTogglable = _d === void 0 ? true : _d, itemComponentType = _a.itemComponentType, _e = _a.itemLength, itemLength = _e === void 0 ? 50 : _e, _f = _a.itemPadding, itemPadding = _f === void 0 ? 0 : _f, _g = _a.maxVisibleItems, maxVisibleItems = _g === void 0 ? -1 : _g, _h = _a.orientation, orientation = _h === void 0 ? 'vertical' : _h, _j = _a.sectionPadding, sectionPadding = _j === void 0 ? 0 : _j, onItemIndexChange = _a.onItemIndexChange, onSectionIndexChange = _a.onSectionIndexChange, props = __rest(_a, ["children", "className", "style", "borderThickness", "data", "defaultExpandedSectionIndex", "expandIconSvg", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "sectionPadding", "onItemIndexChange", "onSectionIndexChange"]);
+    var children = _a.children, className = _a.className, style = _a.style, _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, data = _a.data, _c = _a.defaultExpandedSectionIndex, defaultExpandedSectionIndex = _c === void 0 ? -1 : _c, expandIconSvg = _a.expandIconSvg, collapseIconSvg = _a.collapseIconSvg, _d = _a.isTogglable, isTogglable = _d === void 0 ? true : _d, itemComponentType = _a.itemComponentType, _e = _a.itemLength, itemLength = _e === void 0 ? 50 : _e, _f = _a.itemPadding, itemPadding = _f === void 0 ? 0 : _f, _g = _a.maxVisibleItems, maxVisibleItems = _g === void 0 ? -1 : _g, _h = _a.orientation, orientation = _h === void 0 ? 'vertical' : _h, _j = _a.sectionPadding, sectionPadding = _j === void 0 ? 0 : _j, onItemIndexChange = _a.onItemIndexChange, onSectionIndexChange = _a.onSectionIndexChange, props = __rest(_a, ["children", "className", "style", "borderThickness", "data", "defaultExpandedSectionIndex", "expandIconSvg", "collapseIconSvg", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "sectionPadding", "onItemIndexChange", "onSectionIndexChange"]);
     var isSectionSelectedAt = function (index) { return expandedSectionIndex === index; };
     var toggleSectionAt = function (index) {
         if (isTogglable && isSectionSelectedAt(index)) {
@@ -107,11 +107,13 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
     var components = (0, asComponentDict_1.default)(children, {
         header: exports.AccordionHeader,
         expandIcon: exports.AccordionExpandIcon,
+        collapseIcon: exports.AccordionCollapseIcon,
     });
     var fixedClassNames = (0, asClassNameDict_1.default)({
         root: (0, classnames_1.default)(orientation),
         header: (0, classnames_1.default)(orientation),
         expandIcon: (0, classnames_1.default)(orientation),
+        collapseIcon: (0, classnames_1.default)(orientation),
     });
     var fixedStyles = (0, asStyleDict_1.default)({
         root: __assign({ alignItems: 'center', boxSizing: 'border-box', display: 'flex', flex: '0 0 auto', justifyContent: 'flex-start', padding: '0' }, orientation === 'vertical' ? {
@@ -146,6 +148,10 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
             margin: '0',
             padding: '0',
         },
+        collapseIcon: {
+            margin: '0',
+            padding: '0',
+        },
         list: __assign({ transitionDuration: '100ms', transitionTimingFunction: 'ease-out' }, orientation === 'vertical' ? {
             width: '100%',
             transitionProperty: 'height, margin',
@@ -173,20 +179,34 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
             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',
+        },
     });
     return (react_1.default.createElement("div", __assign({}, props, { className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }),
         react_1.default.createElement(Each_1.default, { in: data }, function (section, sectionIdx) {
-            var _a, _b;
+            var _a, _b, _c;
             var numItems = section.items.length;
             var numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems);
             var menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness;
             var isCollapsed = !isSectionSelectedAt(sectionIdx);
+            var headerComponent = (_a = components.header) !== null && _a !== void 0 ? _a : react_1.default.createElement(exports.AccordionHeader, { style: defaultStyles.header });
+            var expandIconComponent = (_b = components.expandIcon) !== null && _b !== void 0 ? _b : (expandIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: expandIconSvg, style: defaultStyles.expandIcon }) : react_1.default.createElement(react_1.default.Fragment, null));
+            var collapseIconComponent = (_c = components.collapseIcon) !== null && _c !== void 0 ? _c : (collapseIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: collapseIconSvg, style: defaultStyles.collapseIcon }) : expandIconComponent);
             return (react_1.default.createElement("div", { style: (0, styles_1.default)(fixedStyles.section, orientation === 'vertical' ? {
                     marginTop: sectionIdx === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
                 } : {
                     marginLeft: sectionIdx === 0 ? '0px' : "".concat(sectionPadding - borderThickness, "px"),
                 }) },
-                cloneStyledElement_1.default.apply(void 0, __spreadArray([(_a = components.header) !== null && _a !== void 0 ? _a : react_1.default.createElement(exports.AccordionHeader, { style: defaultStyles.header }), {
+                cloneStyledElement_1.default.apply(void 0, __spreadArray([headerComponent, {
                         className: (0, classnames_1.default)(fixedClassNames.header, {
                             collapsed: isCollapsed,
                             expanded: !isCollapsed,
@@ -195,9 +215,9 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
                         onClick: function () { return toggleSectionAt(sectionIdx); },
                     }], [
                     react_1.default.createElement("label", { style: fixedStyles.headerLabel, dangerouslySetInnerHTML: { __html: section.label } }),
-                    (0, cloneStyledElement_1.default)((_b = components.expandIcon) !== null && _b !== void 0 ? _b : (expandIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: expandIconSvg, style: defaultStyles.expandIcon }) : react_1.default.createElement(react_1.default.Fragment, null)), {
-                        className: (0, classnames_1.default)(fixedClassNames.expandIcon),
-                        style: (0, styles_1.default)(fixedStyles.expandIcon),
+                    (0, cloneStyledElement_1.default)(isCollapsed ? expandIconComponent : collapseIconComponent, {
+                        className: (0, classnames_1.default)(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),
+                        style: (0, styles_1.default)(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),
                     }),
                 ], false)),
                 react_1.default.createElement(List_1.default, { style: (0, styles_1.default)(fixedStyles.list, orientation === 'vertical' ? {
@@ -220,13 +240,18 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
         })));
 });
 var AccordionHeader = function (_a) {
-    var props = __rest(_a, []);
-    return react_1.default.createElement("button", __assign({}, props));
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return react_1.default.createElement("button", __assign({}, props), children);
 };
 exports.AccordionHeader = AccordionHeader;
 var AccordionExpandIcon = function (_a) {
-    var props = __rest(_a, []);
-    return react_1.default.createElement("div", __assign({}, props));
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return react_1.default.createElement("div", __assign({}, props), children);
 };
 exports.AccordionExpandIcon = AccordionExpandIcon;
+var AccordionCollapseIcon = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return react_1.default.createElement("div", __assign({}, props), children);
+};
+exports.AccordionCollapseIcon = AccordionCollapseIcon;
 //# sourceMappingURL=Accordion.js.map

package/lib/Accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps } from './List'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' \| 'vertical'\n\nexport type AccordionItemProps<T> = ListItemProps<T>\n\nexport type SectionData<T> = {\n label: string\n items: T[]\n}\n\nexport type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n /*\n Data provided to each section.\n /\n data: SectionData<T>[]\n\n /\n Indicates if sections can be toggled, as in, once a section is expanded,\n * it collapses when being selected again.\n /\n isTogglable?: boolean\n\n /\n Index of the section that is selected by default. Any value less than 0\n * indicates that no section is selected by default.\n /\n defaultExpandedSectionIndex?: number\n\n /\n Length (in pixels) of each item. This does not apply to the section hedaer\n * itself. Length refers to the height in vertical orientation and width in\n * horizontal orientation.\n /\n itemLength?: number\n\n /\n Padding (in pixels) between each item.\n /\n itemPadding?: number\n\n /\n Padding (in pixels) between each section.\n /\n sectionPadding?: number\n\n /\n Maximum number of items that are viside when a section expands. When a\n * value greater than or equal to 0 is specified, only that number of items\n * will be visible at a time, and a scrollbar will appear to scroll to\n * remaining items. Any value less than 0 indicates that all items will be\n * visible when a section expands.\n /\n maxVisibleItems?: number\n\n /\n Orientation of the component.\n /\n orientation?: Orientation\n\n /\n Thickness of the border (in pixels) of every item and the section header\n * itself. 0 indicates no borders.\n /\n borderThickness?: number\n\n /\n SVG markup to be put in the section header as the expand icon.\n /\n expandIconSvg?: string\n\n /\n React component type to be used for generating items inside the component.\n /\n itemComponentType: ComponentType<AccordionItemProps<T>>\n\n /\n Handler invoked when the selected item index of any section changes.\n /\n onItemIndexChange?: (index: number) => void\n\n /\n Handler invoked when the selected section index changes.\n /\n onSectionIndexChange?: (index: number) => void\n}>\n\nexport default forwardRef(({\n children,\n className,\n style,\n borderThickness = 0,\n data,\n defaultExpandedSectionIndex = -1,\n expandIconSvg,\n isTogglable = true,\n itemComponentType,\n itemLength = 50,\n itemPadding = 0,\n maxVisibleItems = -1,\n orientation = 'vertical',\n sectionPadding = 0,\n onItemIndexChange,\n onSectionIndexChange,\n ...props\n}, ref) => {\n const isSectionSelectedAt = (index: number) => expandedSectionIndex === index\n\n const toggleSectionAt = (index: number) => {\n if (isTogglable && isSectionSelectedAt(index)) {\n setExpandedSectionIndex(-1)\n }\n else {\n setExpandedSectionIndex(index)\n }\n }\n\n const [expandedSectionIndex, setExpandedSectionIndex] = useState(defaultExpandedSectionIndex)\n const [selectedSectionIndex, setSelectedSectionIndex] = useState(-1)\n const [selectedItemIndex, setSelectedItemIndex] = useState(-1)\n\n useEffect(() => {\n onSectionIndexChange?.(expandedSectionIndex)\n }, [expandedSectionIndex])\n\n useEffect(() => {\n onItemIndexChange?.(selectedItemIndex)\n }, [selectedItemIndex])\n\n const components = asComponentDict(children, {\n header: AccordionHeader,\n expandIcon: AccordionExpandIcon,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n header: classNames(orientation),\n expandIcon: classNames(orientation),\n })\n\n const fixedStyles = 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 header: {\n borderWidth: `${borderThickness}px`,\n margin: '0',\n outline: 'none',\n ...orientation === 'vertical' ? {\n width: '100%',\n } : {\n height: '100%',\n },\n },\n headerLabel: {\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n transition: 'inherit',\n },\n expandIcon: {\n margin: '0',\n padding: '0',\n },\n list: {\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n width: '100%',\n transitionProperty: 'height, margin',\n top: '100%',\n } : {\n height: '100%',\n transitionProperty: 'width, margin',\n left: '100%',\n },\n },\n })\n\n const defaultStyles = asStyleDict({\n header: {\n alignItems: 'center',\n background: '#fff',\n borderStyle: 'solid',\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 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 })\n\n return (\n <div\n {...props}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <Each in={data}>\n {(section, sectionIdx) => {\n const numItems = section.items.length\n const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n const menuLength = (itemLength - borderThickness) numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n const isCollapsed = !isSectionSelectedAt(sectionIdx)\n\n return (\n <div style={styles(fixedStyles.section, orientation === 'vertical' ? {\n marginTop: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n } : {\n marginLeft: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n })}>\n {cloneStyledElement(components.header ?? <AccordionHeader style={defaultStyles.header}/>, {\n className: classNames(fixedClassNames.header, {\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n style: styles(fixedStyles.header),\n onClick: () => toggleSectionAt(sectionIdx),\n }, ...[\n <label style={fixedStyles.headerLabel} dangerouslySetInnerHTML={{ __html: section.label }}/>,\n cloneStyledElement(components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>), {\n className: classNames(fixedClassNames.expandIcon),\n style: styles(fixedStyles.expandIcon),\n }),\n ])}\n <List\n style={styles(fixedStyles.list, orientation === 'vertical' ? {\n height: isCollapsed ? '0px' : `${menuLength}px`,\n marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n } : {\n marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n width: isCollapsed ? '0px' : `${menuLength}px`,\n })}\n borderThickness={borderThickness}\n data={section.items}\n isSelectable={true}\n isTogglable={isTogglable}\n itemComponentType={itemComponentType}\n itemLength={itemLength}\n itemPadding={itemPadding}\n orientation={orientation}\n selectedIndex={selectedSectionIndex === sectionIdx ? selectedItemIndex : -1}\n onDeselectAt={() => {\n if (selectedSectionIndex !== sectionIdx) return\n setSelectedSectionIndex(-1)\n setSelectedItemIndex(-1)\n }}\n onSelectAt={itemIdx => {\n setSelectedSectionIndex(sectionIdx)\n setSelectedItemIndex(itemIdx)\n }}\n />\n </div>\n )\n }}\n </Each>\n </div>\n )\n}) as <T>(props: AccordionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const AccordionHeader = ({ ...props }: HTMLAttributes<HTMLButtonElement>) => <button {...props}/>\n\nexport const AccordionExpandIcon = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}
1	+ {"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAA4J;AAC5J,gDAAyB;AACzB,sDAA+B;AAC/B,gDAAiD;AACjD,4EAAqD;AACrD,4EAAqD;AACrD,oEAA6C;AAC7C,kFAA2D;AAC3D,0DAAmC;AA4FnC,kBAAe,IAAA,kBAAU,EAAC,UAAC,EAmB1B,EAAE,GAAG;IAlBJ,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,KAAK,WAAA,EACL,uBAAmB,EAAnB,eAAe,mBAAG,CAAC,KAAA,EACnB,IAAI,UAAA,EACJ,mCAAgC,EAAhC,2BAA2B,mBAAG,CAAC,CAAC,KAAA,EAChC,aAAa,mBAAA,EACb,eAAe,qBAAA,EACf,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA,EAClB,iBAAiB,uBAAA,EACjB,kBAAe,EAAf,UAAU,mBAAG,EAAE,KAAA,EACf,mBAAe,EAAf,WAAW,mBAAG,CAAC,KAAA,EACf,uBAAoB,EAApB,eAAe,mBAAG,CAAC,CAAC,KAAA,EACpB,mBAAwB,EAAxB,WAAW,mBAAG,UAAU,KAAA,EACxB,sBAAkB,EAAlB,cAAc,mBAAG,CAAC,KAAA,EAClB,iBAAiB,uBAAA,EACjB,oBAAoB,0BAAA,EACjB,KAAK,cAlBiB,kSAmB1B,CADS;IAER,IAAM,mBAAmB,GAAG,UAAC,KAAa,IAAK,OAAA,oBAAoB,KAAK,KAAK,EAA9B,CAA8B,CAAA;IAE7E,IAAM,eAAe,GAAG,UAAC,KAAa;QACpC,IAAI,WAAW,IAAI,mBAAmB,CAAC,KAAK,CAAC,EAAE;YAC7C,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAA;SAC5B;aACI;YACH,uBAAuB,CAAC,KAAK,CAAC,CAAA;SAC/B;IACH,CAAC,CAAA;IAEK,IAAA,KAAA,OAAkD,IAAA,gBAAQ,EAAC,2BAA2B,CAAC,IAAA,EAAtF,oBAAoB,QAAA,EAAE,uBAAuB,QAAyC,CAAA;IACvF,IAAA,KAAA,OAAkD,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC,IAAA,EAA7D,oBAAoB,QAAA,EAAE,uBAAuB,QAAgB,CAAA;IAC9D,IAAA,KAAA,OAA4C,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC,IAAA,EAAvD,iBAAiB,QAAA,EAAE,oBAAoB,QAAgB,CAAA;IAE9D,IAAA,iBAAS,EAAC;QACR,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAG,oBAAoB,CAAC,CAAA;IAC9C,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAA;IAE1B,IAAA,iBAAS,EAAC;QACR,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,iBAAiB,CAAC,CAAA;IACxC,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAA;IAEvB,IAAM,UAAU,GAAG,IAAA,yBAAe,EAAC,QAAQ,EAAE;QAC3C,MAAM,EAAE,uBAAe;QACvB,UAAU,EAAE,2BAAmB;QAC/B,YAAY,EAAE,6BAAqB;KACpC,CAAC,CAAA;IAEF,IAAM,eAAe,GAAG,IAAA,yBAAe,EAAC;QACtC,IAAI,EAAE,IAAA,oBAAU,EAAC,WAAW,CAAC;QAC7B,MAAM,EAAE,IAAA,oBAAU,EAAC,WAAW,CAAC;QAC/B,UAAU,EAAE,IAAA,oBAAU,EAAC,WAAW,CAAC;QACnC,YAAY,EAAE,IAAA,oBAAU,EAAC,WAAW,CAAC;KACtC,CAAC,CAAA;IAEF,IAAM,WAAW,GAAG,IAAA,qBAAW,EAAC;QAC9B,IAAI,aACF,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,UAAU,EAChB,cAAc,EAAE,YAAY,EAC5B,OAAO,EAAE,GAAG,IACT,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,aAAa,EAAE,QAAQ;YACvB,MAAM,EAAE,MAAM;SACf,CAAC,CAAC,CAAC;YACF,aAAa,EAAE,KAAK;YACpB,KAAK,EAAE,MAAM;SACd,CACF;QACD,OAAO,aACL,UAAU,EAAE,YAAY,EACxB,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,UAAU,EAChB,cAAc,EAAE,YAAY,EAC5B,MAAM,EAAE,GAAG,EACX,OAAO,EAAE,GAAG,IACT,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,aAAa,EAAE,QAAQ;YACvB,KAAK,EAAE,MAAM;SACd,CAAC,CAAC,CAAC;YACF,aAAa,EAAE,KAAK;YACpB,MAAM,EAAE,MAAM;SACf,CACF;QACD,MAAM,aACJ,WAAW,EAAE,UAAG,eAAe,OAAI,EACnC,MAAM,EAAE,GAAG,EACX,OAAO,EAAE,MAAM,IACZ,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,KAAK,EAAE,MAAM;SACd,CAAC,CAAC,CAAC;YACF,MAAM,EAAE,MAAM;SACf,CACF;QACD,WAAW,EAAE;YACX,KAAK,EAAE,SAAS;YAChB,UAAU,EAAE,SAAS;YACrB,QAAQ,EAAE,SAAS;YACnB,UAAU,EAAE,SAAS;YACrB,aAAa,EAAE,SAAS;YACxB,UAAU,EAAE,SAAS;YACrB,UAAU,EAAE,SAAS;SACtB;QACD,UAAU,EAAE;YACV,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,GAAG;SACb;QACD,YAAY,EAAE;YACZ,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,GAAG;SACb;QACD,IAAI,aACF,kBAAkB,EAAE,OAAO,EAC3B,wBAAwB,EAAE,UAAU,IACjC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,KAAK,EAAE,MAAM;YACb,kBAAkB,EAAE,gBAAgB;YACpC,GAAG,EAAE,MAAM;SACZ,CAAC,CAAC,CAAC;YACF,MAAM,EAAE,MAAM;YACd,kBAAkB,EAAE,eAAe;YACnC,IAAI,EAAE,MAAM;SACb,CACF;KACF,CAAC,CAAA;IAEF,IAAM,aAAa,GAAG,IAAA,qBAAW,EAAC;QAChC,MAAM,aACJ,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,OAAO,EACpB,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,KAAK,EACpB,cAAc,EAAE,eAAe,EAC/B,OAAO,EAAE,QAAQ,EACjB,kBAAkB,EAAE,OAAO,EAC3B,kBAAkB,EAAE,uCAAuC,EAC3D,wBAAwB,EAAE,UAAU,IACjC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,MAAM,EAAE,MAAM;SACf,CAAC,CAAC,CAAC;YACF,KAAK,EAAE,MAAM;SACd,CACF;QACD,UAAU,EAAE;YACV,SAAS,EAAE,YAAY;YACvB,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,MAAM;YACd,eAAe,EAAE,QAAQ;YACzB,kBAAkB,EAAE,OAAO;YAC3B,kBAAkB,EAAE,WAAW;YAC/B,wBAAwB,EAAE,UAAU;YACpC,KAAK,EAAE,MAAM;SACd;QACD,YAAY,EAAE;YACZ,SAAS,EAAE,YAAY;YACvB,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,MAAM;YACd,eAAe,EAAE,QAAQ;YACzB,kBAAkB,EAAE,OAAO;YAC3B,kBAAkB,EAAE,WAAW;YAC/B,wBAAwB,EAAE,UAAU;YACpC,KAAK,EAAE,MAAM;SACd;KACF,CAAC,CAAA;IAEF,OAAO,CACL,kDACM,KAAK,IACT,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,EACtD,KAAK,EAAE,IAAA,gBAAM,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC;QAEtC,8BAAC,cAAI,IAAC,EAAE,EAAE,IAAI,IACX,UAAC,OAAO,EAAE,UAAU;;YACnB,IAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,MAAM,CAAA;YACrC,IAAM,eAAe,GAAG,eAAe,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;YAC5F,IAAM,UAAU,GAAG,CAAC,UAAU,GAAG,eAAe,CAAC,GAAG,eAAe,GAAG,WAAW,GAAG,CAAC,eAAe,GAAG,CAAC,CAAC,GAAG,eAAe,CAAA;YAC3H,IAAM,WAAW,GAAG,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAA;YACpD,IAAM,eAAe,GAAG,MAAA,UAAU,CAAC,MAAM,mCAAI,8BAAC,uBAAe,IAAC,KAAK,EAAE,aAAa,CAAC,MAAM,GAAG,CAAA;YAC5F,IAAM,mBAAmB,GAAG,MAAA,UAAU,CAAC,UAAU,mCAAI,CAAC,aAAa,CAAC,CAAC,CAAC,8BAAC,iBAAO,IAAC,GAAG,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,6DAAK,CAAC,CAAA;YAC9I,IAAM,qBAAqB,GAAG,MAAA,UAAU,CAAC,YAAY,mCAAI,CAAC,eAAe,CAAC,CAAC,CAAC,8BAAC,iBAAO,IAAC,GAAG,EAAE,eAAe,EAAE,KAAK,EAAE,aAAa,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAA;YAEtK,OAAO,CACL,uCAAK,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,OAAO,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;oBACnE,SAAS,EAAE,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,cAAc,GAAG,eAAe,OAAI;iBAC9E,CAAC,CAAC,CAAC;oBACF,UAAU,EAAE,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,cAAc,GAAG,eAAe,OAAI;iBAC/E,CAAC;gBACC,4BAAkB,8BAAC,eAAe,EAAE;wBACnC,SAAS,EAAE,IAAA,oBAAU,EAAC,eAAe,CAAC,MAAM,EAAE;4BAC5C,SAAS,EAAE,WAAW;4BACtB,QAAQ,EAAE,CAAC,WAAW;yBACvB,CAAC;wBACF,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,MAAM,CAAC;wBACjC,OAAO,EAAE,cAAM,OAAA,eAAe,CAAC,UAAU,CAAC,EAA3B,CAA2B;qBAC3C,GAAK;oBACJ,yCAAO,KAAK,EAAE,WAAW,CAAC,WAAW,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,KAAK,EAAE,GAAG;oBAC5F,IAAA,4BAAkB,EAAC,WAAW,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,EAAE;wBAC5E,SAAS,EAAE,IAAA,oBAAU,EAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,YAAY,CAAC;wBAC9F,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC;qBAC/E,CAAC;iBACH;gBACD,8BAAC,cAAI,IACH,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,IAAI,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;wBAC3D,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI;wBAC/C,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,WAAW,GAAG,eAAe,OAAI;wBACrE,SAAS,EAAE,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;qBAChG,CAAC,CAAC,CAAC;wBACF,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,WAAW,GAAG,eAAe,OAAI;wBACtE,SAAS,EAAE,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;wBAC/F,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI;qBAC/C,CAAC,EACF,eAAe,EAAE,eAAe,EAChC,IAAI,EAAE,OAAO,CAAC,KAAK,EACnB,YAAY,EAAE,IAAI,EAClB,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,oBAAoB,KAAK,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3E,YAAY,EAAE;wBACZ,IAAI,oBAAoB,KAAK,UAAU;4BAAE,OAAM;wBAC/C,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAA;wBAC3B,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAA;oBAC1B,CAAC,EACD,UAAU,EAAE,UAAA,OAAO;wBACjB,uBAAuB,CAAC,UAAU,CAAC,CAAA;wBACnC,oBAAoB,CAAC,OAAO,CAAC,CAAA;oBAC/B,CAAC,GACD,CACE,CACP,CAAA;QACH,CAAC,CACI,CACH,CACP,CAAA;AACH,CAAC,CAAkF,CAAA;AAE5E,IAAM,eAAe,GAAG,UAAC,EAA6E;IAA3E,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAA8D,OAAA,qDAAY,KAAK,GAAG,QAAQ,CAAU,CAAA;CAAA,CAAA;AAA3I,QAAA,eAAe,mBAA4H;AAEjJ,IAAM,mBAAmB,GAAG,UAAC,EAA0E;IAAxE,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAA2D,OAAA,kDAAS,KAAK,GAAG,QAAQ,CAAO,CAAA;CAAA,CAAA;AAAtI,QAAA,mBAAmB,uBAAmH;AAE5I,IAAM,qBAAqB,GAAG,UAAC,EAA0E;IAAxE,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAA2D,OAAA,kDAAS,KAAK,GAAG,QAAQ,CAAO,CAAA;CAAA,CAAA;AAAxI,QAAA,qBAAqB,yBAAmH","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps } from './List'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' \| 'vertical'\n\nexport type AccordionItemProps<T> = ListItemProps<T>\n\nexport type AccordionSectionData<T> = {\n label: string\n items: T[]\n}\n\nexport type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n /*\n Data provided to each section.\n /\n data: AccordionSectionData<T>[]\n\n /\n Indicates if sections can be toggled, as in, once a section is expanded,\n * it collapses when being selected again.\n /\n isTogglable?: boolean\n\n /\n Index of the section that is selected by default. Any value less than 0\n * indicates that no section is selected by default.\n /\n defaultExpandedSectionIndex?: number\n\n /\n Length (in pixels) of each item. This does not apply to the section hedaer\n * itself. Length refers to the height in vertical orientation and width in\n * horizontal orientation.\n /\n itemLength?: number\n\n /\n Padding (in pixels) between each item.\n /\n itemPadding?: number\n\n /\n Padding (in pixels) between each section.\n /\n sectionPadding?: number\n\n /\n Maximum number of items that are viside when a section expands. When a\n * value greater than or equal to 0 is specified, only that number of items\n * will be visible at a time, and a scrollbar will appear to scroll to\n * remaining items. Any value less than 0 indicates that all items will be\n * visible when a section expands.\n /\n maxVisibleItems?: number\n\n /\n Orientation of the component.\n /\n orientation?: Orientation\n\n /\n Thickness of the border (in pixels) of every item and the section header\n * itself. 0 indicates no borders.\n /\n borderThickness?: number\n\n /\n SVG markup to be put in the section header as the expand icon.\n /\n expandIconSvg?: string\n\n /\n SVG markup to be put in the section header as the collapse icon.\n /\n collapseIconSvg?: string\n\n /\n React component type to be used for generating items inside the component.\n /\n itemComponentType: ComponentType<AccordionItemProps<T>>\n\n /\n Handler invoked when the selected item index of any section changes.\n /\n onItemIndexChange?: (index: number) => void\n\n /\n Handler invoked when the selected section index changes.\n /\n onSectionIndexChange?: (index: number) => void\n}>\n\nexport default forwardRef(({\n children,\n className,\n style,\n borderThickness = 0,\n data,\n defaultExpandedSectionIndex = -1,\n expandIconSvg,\n collapseIconSvg,\n isTogglable = true,\n itemComponentType,\n itemLength = 50,\n itemPadding = 0,\n maxVisibleItems = -1,\n orientation = 'vertical',\n sectionPadding = 0,\n onItemIndexChange,\n onSectionIndexChange,\n ...props\n}, ref) => {\n const isSectionSelectedAt = (index: number) => expandedSectionIndex === index\n\n const toggleSectionAt = (index: number) => {\n if (isTogglable && isSectionSelectedAt(index)) {\n setExpandedSectionIndex(-1)\n }\n else {\n setExpandedSectionIndex(index)\n }\n }\n\n const [expandedSectionIndex, setExpandedSectionIndex] = useState(defaultExpandedSectionIndex)\n const [selectedSectionIndex, setSelectedSectionIndex] = useState(-1)\n const [selectedItemIndex, setSelectedItemIndex] = useState(-1)\n\n useEffect(() => {\n onSectionIndexChange?.(expandedSectionIndex)\n }, [expandedSectionIndex])\n\n useEffect(() => {\n onItemIndexChange?.(selectedItemIndex)\n }, [selectedItemIndex])\n\n const components = asComponentDict(children, {\n header: AccordionHeader,\n expandIcon: AccordionExpandIcon,\n collapseIcon: AccordionCollapseIcon,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n header: classNames(orientation),\n expandIcon: classNames(orientation),\n collapseIcon: classNames(orientation),\n })\n\n const fixedStyles = 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 header: {\n borderWidth: `${borderThickness}px`,\n margin: '0',\n outline: 'none',\n ...orientation === 'vertical' ? {\n width: '100%',\n } : {\n height: '100%',\n },\n },\n headerLabel: {\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n transition: 'inherit',\n },\n expandIcon: {\n margin: '0',\n padding: '0',\n },\n collapseIcon: {\n margin: '0',\n padding: '0',\n },\n list: {\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n width: '100%',\n transitionProperty: 'height, margin',\n top: '100%',\n } : {\n height: '100%',\n transitionProperty: 'width, margin',\n left: '100%',\n },\n },\n })\n\n const defaultStyles = asStyleDict({\n header: {\n alignItems: 'center',\n background: '#fff',\n borderStyle: 'solid',\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 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 return (\n <div\n {...props}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <Each in={data}>\n {(section, sectionIdx) => {\n const numItems = section.items.length\n const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n const menuLength = (itemLength - borderThickness) numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n const isCollapsed = !isSectionSelectedAt(sectionIdx)\n const headerComponent = components.header ?? <AccordionHeader style={defaultStyles.header}/>\n const expandIconComponent = components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>)\n const collapseIconComponent = components.collapseIcon ?? (collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles.collapseIcon}/> : expandIconComponent)\n\n return (\n <div style={styles(fixedStyles.section, orientation === 'vertical' ? {\n marginTop: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n } : {\n marginLeft: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n })}>\n {cloneStyledElement(headerComponent, {\n className: classNames(fixedClassNames.header, {\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n style: styles(fixedStyles.header),\n onClick: () => toggleSectionAt(sectionIdx),\n }, ...[\n <label style={fixedStyles.headerLabel} dangerouslySetInnerHTML={{ __html: section.label }}/>,\n cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n className: classNames(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),\n style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n }),\n ])}\n <List\n style={styles(fixedStyles.list, orientation === 'vertical' ? {\n height: isCollapsed ? '0px' : `${menuLength}px`,\n marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n } : {\n marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n width: isCollapsed ? '0px' : `${menuLength}px`,\n })}\n borderThickness={borderThickness}\n data={section.items}\n isSelectable={true}\n isTogglable={isTogglable}\n itemComponentType={itemComponentType}\n itemLength={itemLength}\n itemPadding={itemPadding}\n orientation={orientation}\n selectedIndex={selectedSectionIndex === sectionIdx ? selectedItemIndex : -1}\n onDeselectAt={() => {\n if (selectedSectionIndex !== sectionIdx) return\n setSelectedSectionIndex(-1)\n setSelectedItemIndex(-1)\n }}\n onSelectAt={itemIdx => {\n setSelectedSectionIndex(sectionIdx)\n setSelectedItemIndex(itemIdx)\n }}\n />\n </div>\n )\n }}\n </Each>\n </div>\n )\n}) as <T>(props: AccordionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const AccordionHeader = ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => <button {...props}>{children}</button>\n\nexport const AccordionExpandIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n\nexport const AccordionCollapseIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n"]}

package/lib/Dropdown.d.ts CHANGED Viewed

@@ -60,6 +60,10 @@ export type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttribute
      * SVG markup to be put in the dropdown button as the expand icon.
      */
     expandIconSvg?: string;
+    /**
+     * SVG markup to be put in the dropdown button as the collapse icon.
+     */
+    collapseIconSvg?: string;
     /**
      * React component type to be used for generating items inside the component.
      */
@@ -129,6 +133,10 @@ declare const _default: <T extends DropdownData = DropdownData>(props: React.HTM
      * SVG markup to be put in the dropdown button as the expand icon.
      */
     expandIconSvg?: string | undefined;
+    /**
+     * SVG markup to be put in the dropdown button as the collapse icon.
+     */
+    collapseIconSvg?: string | undefined;
     /**
      * React component type to be used for generating items inside the component.
      */
@@ -143,5 +151,6 @@ declare const _default: <T extends DropdownData = DropdownData>(props: React.HTM
     ref?: React.Ref<HTMLDivElement> | undefined;
 }) => ReactElement;
 export default _default;
-export declare const DropdownToggle: ({ ...props }: HTMLAttributes<HTMLButtonElement>) => React.JSX.Element;
-export declare const DropdownExpandIcon: ({ ...props }: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+export declare const DropdownToggle: ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => React.JSX.Element;
+export declare const DropdownExpandIcon: ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => React.JSX.Element;
+export declare const DropdownCollapseIcon: ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => React.JSX.Element;

package/lib/Dropdown.js CHANGED Viewed

@@ -73,7 +73,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownExpandIcon = exports.DropdownToggle = void 0;
+exports.DropdownCollapseIcon = exports.DropdownExpandIcon = exports.DropdownToggle = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
 var FlatSVG_1 = __importDefault(require("./FlatSVG"));
@@ -90,8 +90,8 @@ var styles_1 = __importDefault(require("./utils/styles"));
  * component type to this component to automatically generate menu items.
  */
 exports.default = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b, _c, _d;
-    var children = _a.children, className = _a.className, style = _a.style, _e = _a.borderThickness, borderThickness = _e === void 0 ? 0 : _e, data = _a.data, _f = _a.defaultLabel, defaultLabel = _f === void 0 ? 'Select' : _f, expandIconSvg = _a.expandIconSvg, _g = _a.isInverted, isInverted = _g === void 0 ? false : _g, _h = _a.isTogglable, isTogglable = _h === void 0 ? false : _h, itemComponentType = _a.itemComponentType, externalItemLength = _a.itemLength, _j = _a.itemPadding, itemPadding = _j === void 0 ? 0 : _j, _k = _a.maxVisibleItems, maxVisibleItems = _k === void 0 ? -1 : _k, _l = _a.orientation, orientation = _l === void 0 ? 'vertical' : _l, _m = _a.selectedIndex, externalSelectedIndex = _m === void 0 ? -1 : _m, onIndexChange = _a.onIndexChange, props = __rest(_a, ["children", "className", "style", "borderThickness", "data", "defaultLabel", "expandIconSvg", "isInverted", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "selectedIndex", "onIndexChange"]);
+    var _b, _c, _d, _e;
+    var children = _a.children, className = _a.className, style = _a.style, _f = _a.borderThickness, borderThickness = _f === void 0 ? 0 : _f, data = _a.data, _g = _a.defaultLabel, defaultLabel = _g === void 0 ? 'Select' : _g, expandIconSvg = _a.expandIconSvg, collapseIconSvg = _a.collapseIconSvg, _h = _a.isInverted, isInverted = _h === void 0 ? false : _h, _j = _a.isTogglable, isTogglable = _j === void 0 ? false : _j, itemComponentType = _a.itemComponentType, externalItemLength = _a.itemLength, _k = _a.itemPadding, itemPadding = _k === void 0 ? 0 : _k, _l = _a.maxVisibleItems, maxVisibleItems = _l === void 0 ? -1 : _l, _m = _a.orientation, orientation = _m === void 0 ? 'vertical' : _m, _o = _a.selectedIndex, externalSelectedIndex = _o === void 0 ? -1 : _o, onIndexChange = _a.onIndexChange, props = __rest(_a, ["children", "className", "style", "borderThickness", "data", "defaultLabel", "expandIconSvg", "collapseIconSvg", "isInverted", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "selectedIndex", "onIndexChange"]);
     var selectItemAt = function (index) {
         setSelectedIndex(index);
         setIsCollapsed(true);
@@ -135,8 +135,8 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
         collapse();
     };
     var bodyRef = (0, react_1.useRef)(null);
-    var _o = __read((0, react_1.useState)(externalSelectedIndex), 2), selectedIndex = _o[0], setSelectedIndex = _o[1];
-    var _p = __read((0, react_1.useState)(true), 2), isCollapsed = _p[0], setIsCollapsed = _p[1];
+    var _p = __read((0, react_1.useState)(externalSelectedIndex), 2), selectedIndex = _p[0], setSelectedIndex = _p[1];
+    var _q = __read((0, react_1.useState)(true), 2), isCollapsed = _q[0], setIsCollapsed = _q[1];
     var rect = (0, useElementRect_1.default)(bodyRef);
     (0, react_1.useEffect)(function () {
         window.addEventListener('click', clickOutsideHandler);
@@ -159,6 +159,7 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
     var components = (0, asComponentDict_1.default)(children, {
         toggle: exports.DropdownToggle,
         expandIcon: exports.DropdownExpandIcon,
+        collapseIcon: exports.DropdownCollapseIcon,
     });
     var fixedClassNames = (0, asClassNameDict_1.default)({
         root: (0, classnames_1.default)(orientation, {
@@ -176,6 +177,11 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
             collapsed: isCollapsed,
             expanded: !isCollapsed,
         }),
+        collapseIcon: (0, classnames_1.default)(orientation, {
+            togglable: isTogglable,
+            collapsed: isCollapsed,
+            expanded: !isCollapsed,
+        }),
         list: (0, classnames_1.default)({
             togglable: isTogglable,
             collapsed: isCollapsed,
@@ -211,6 +217,7 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
             lineHeight: 'inherit',
         },
         expandIcon: {},
+        collapseIcon: {},
         list: __assign({ position: 'absolute' }, orientation === 'vertical' ? __assign({ transition: 'height 100ms ease-out', width: '100%', height: isCollapsed ? '0px' : "".concat(menuLength, "px"), overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden' }, isInverted ? {
             marginBottom: "".concat(itemPadding - borderThickness, "px"),
             bottom: '100%',
@@ -244,30 +251,44 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
             padding: '0',
             width: '15px',
         },
+        collapseIcon: {
+            height: '15px',
+            margin: '0',
+            padding: '0',
+            width: '15px',
+        },
     });
+    var toggleComponent = (_b = components.toggle) !== null && _b !== void 0 ? _b : react_1.default.createElement("button", { style: defaultStyles.toggle });
+    var expandIconComponent = (_c = components.expandIcon) !== null && _c !== void 0 ? _c : (expandIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: expandIconSvg, style: defaultStyles.expandIcon }) : react_1.default.createElement(react_1.default.Fragment, null));
+    var collapseIconComponent = (_d = components.collapseIcon) !== null && _d !== void 0 ? _d : (collapseIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: collapseIconSvg, style: defaultStyles.collapseIcon }) : expandIconComponent);
     return (react_1.default.createElement("div", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }),
         react_1.default.createElement("div", { ref: bodyRef, style: (0, styles_1.default)(fixedStyles.body) },
-            cloneStyledElement_1.default.apply(void 0, __spreadArray([(_b = components.toggle) !== null && _b !== void 0 ? _b : react_1.default.createElement("button", { style: defaultStyles.toggle }), {
+            cloneStyledElement_1.default.apply(void 0, __spreadArray([toggleComponent, {
                     className: (0, classnames_1.default)(fixedClassNames.toggle),
                     style: (0, styles_1.default)(fixedStyles.toggle),
                     onClick: function () { return toggle(); },
                 }], [
-                react_1.default.createElement("label", { style: fixedStyles.toggleLabel, dangerouslySetInnerHTML: { __html: selectedIndex === -1 ? defaultLabel : (_c = data[selectedIndex].label) !== null && _c !== void 0 ? _c : '' } }),
-                (0, cloneStyledElement_1.default)((_d = components.expandIcon) !== null && _d !== void 0 ? _d : (expandIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: expandIconSvg, style: defaultStyles.expandIcon }) : react_1.default.createElement(react_1.default.Fragment, null)), {
-                    className: (0, classnames_1.default)(fixedClassNames.expandIcon),
-                    style: (0, styles_1.default)(fixedStyles.expandIcon),
+                react_1.default.createElement("label", { style: fixedStyles.toggleLabel, dangerouslySetInnerHTML: { __html: selectedIndex === -1 ? defaultLabel : (_e = data[selectedIndex].label) !== null && _e !== void 0 ? _e : '' } }),
+                (0, cloneStyledElement_1.default)(isCollapsed ? expandIconComponent : collapseIconComponent, {
+                    className: (0, classnames_1.default)(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),
+                    style: (0, styles_1.default)(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),
                 }),
             ], false)),
             react_1.default.createElement(List_1.default, { className: fixedClassNames.list, style: (0, styles_1.default)(fixedStyles.list), borderThickness: borderThickness, data: data, isSelectable: true, isTogglable: false, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, orientation: orientation, selectedIndex: selectedIndex, onDeselectAt: function (idx) { return selectItemAt(-1); }, onSelectAt: function (idx) { return selectItemAt(idx); } }))));
 });
 var DropdownToggle = function (_a) {
-    var props = __rest(_a, []);
-    return react_1.default.createElement("button", __assign({}, props));
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return react_1.default.createElement("button", __assign({}, props), children);
 };
 exports.DropdownToggle = DropdownToggle;
 var DropdownExpandIcon = function (_a) {
-    var props = __rest(_a, []);
-    return react_1.default.createElement("div", __assign({}, props));
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return react_1.default.createElement("div", __assign({}, props), children);
 };
 exports.DropdownExpandIcon = DropdownExpandIcon;
+var DropdownCollapseIcon = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return react_1.default.createElement("div", __assign({}, props), children);
+};
+exports.DropdownCollapseIcon = DropdownCollapseIcon;
 //# sourceMappingURL=Dropdown.js.map

package/lib/Dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useRef, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps } from './List'\nimport useElementRect from './hooks/useElementRect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' \| 'vertical'\n\nexport type DropdownData = {\n label?: string\n}\n\nexport type DropdownItemProps<T extends DropdownData = DropdownData> = ListItemProps<T>\n\nexport type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n /*\n Data of every item in the component. This is used to generate individual\n * menu items. Data type is generic.\n /\n data: T[]\n\n /\n Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n * Supports all orientations.\n /\n isInverted?: boolean\n\n /\n Indicates if items can be toggled, i.e. they can be deselected if selected\n * again.\n /\n isTogglable?: boolean\n\n /\n Thickness of the border (in pixels) of every item and the dropdown button\n * itself. 0 indicates no borders.\n /\n borderThickness?: number\n\n /\n The index of the default selected item.\n /\n selectedIndex?: number\n\n /\n Length (in pixels) of each item. This does not apply to the dropdown button\n * itself. Length refers to the height in vertical orientation and width in\n * horizontal orientation.\n /\n itemLength?: number\n\n /\n Padding (in pixels) of each item.\n /\n itemPadding?: number\n\n /\n Maximum number of items that are viside when the component expands. When a\n * value greater than or equal to 0 is specified, only that number of items\n * will be visible at a time, and a scrollbar will appear to scroll to\n * remaining items. Any value less than 0 indicates that all items will be\n * visible when the component expands.\n /\n maxVisibleItems?: number\n\n /\n Orientation of the component.\n /\n orientation?: Orientation\n\n /\n The label to appear on the dropdown button when no items are selected.\n /\n defaultLabel?: string\n\n /\n SVG markup to be put in the dropdown button as the expand icon.\n /\n expandIconSvg?: string\n\n /\n React component type to be used for generating items inside the component.\n /\n itemComponentType: ComponentType<DropdownItemProps<T>>\n\n /\n Handler invoked whenever the selected index changes.\n /\n onIndexChange?: (index: number) => void\n}>\n\n/\n A dropdown menu component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide data and item\n * component type to this component to automatically generate menu items.\n /\nexport default forwardRef(({\n children,\n className,\n style,\n borderThickness = 0,\n data,\n defaultLabel = 'Select',\n expandIconSvg,\n isInverted = false,\n isTogglable = false,\n itemComponentType,\n itemLength: externalItemLength,\n itemPadding = 0,\n maxVisibleItems = -1,\n orientation = 'vertical',\n selectedIndex: externalSelectedIndex = -1,\n onIndexChange,\n ...props\n}, ref) => {\n const selectItemAt = (index: number) => {\n setSelectedIndex(index)\n setIsCollapsed(true)\n }\n\n const expand = () => {\n if (!isCollapsed) return\n setIsCollapsed(false)\n }\n\n const collapse = () => {\n if (isCollapsed) return\n setIsCollapsed(true)\n }\n\n const toggle = () => {\n if (isCollapsed) {\n expand()\n }\n else {\n collapse()\n }\n }\n\n const clickOutsideHandler = (event: MouseEvent) => {\n if (isCollapsed) return\n if (!(event.target instanceof Node)) return\n\n let isOutside = true\n let node = event.target\n\n while (node) {\n if (node === bodyRef.current) {\n isOutside = false\n break\n }\n\n if (!node.parentNode) break\n\n node = node.parentNode\n }\n\n if (!isOutside) return\n\n collapse()\n }\n\n const bodyRef = useRef<HTMLDivElement>(null)\n const [selectedIndex, setSelectedIndex] = useState(externalSelectedIndex)\n const [isCollapsed, setIsCollapsed] = useState(true)\n const rect = useElementRect(bodyRef)\n\n useEffect(() => {\n window.addEventListener('click', clickOutsideHandler)\n\n return () => {\n window.removeEventListener('click', clickOutsideHandler)\n }\n }, [isCollapsed])\n\n useEffect(() => {\n if (externalSelectedIndex === selectedIndex) return\n setSelectedIndex(externalSelectedIndex)\n }, [externalSelectedIndex])\n\n useEffect(() => {\n onIndexChange?.(selectedIndex)\n }, [selectedIndex])\n\n const itemLength = externalItemLength ?? (orientation === 'vertical' ? rect.height : rect.width)\n const numItems = data.length\n const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n const menuLength = (itemLength - borderThickness) numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n\n const components = asComponentDict(children, {\n toggle: DropdownToggle,\n expandIcon: DropdownExpandIcon,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n toggle: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n expandIcon: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n list: classNames({\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-start',\n overflow: 'visible',\n ...orientation === 'vertical' ? {\n flexDirection: isInverted ? 'column-reverse' : 'column',\n } : {\n flexDirection: isInverted ? 'row-reverse' : 'row',\n },\n },\n body: {\n height: '100%',\n width: '100%',\n },\n toggle: {\n borderWidth: `${borderThickness}px`,\n height: '100%',\n left: '0',\n margin: '0',\n outline: 'none',\n position: 'absolute',\n top: '0',\n width: '100%',\n zIndex: '1',\n },\n toggleLabel: {\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n },\n expandIcon: {\n\n },\n list: {\n position: 'absolute',\n ...orientation === 'vertical' ? {\n transition: 'height 100ms ease-out',\n width: '100%',\n height: isCollapsed ? '0px' : `${menuLength}px`,\n overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n ...isInverted ? {\n marginBottom: `${itemPadding - borderThickness}px`,\n bottom: '100%',\n } : {\n top: '100%',\n marginTop: `${itemPadding - borderThickness}px`,\n },\n } : {\n transition: 'width 100ms ease-out',\n width: isCollapsed ? '0px' : `${menuLength}px`,\n height: '100%',\n overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n ...isInverted ? {\n marginRight: `${itemPadding - borderThickness}px`,\n right: '100%',\n } : {\n left: '100%',\n marginLeft: `${itemPadding - borderThickness}px`,\n },\n },\n },\n })\n\n const defaultStyles = asStyleDict({\n toggle: {\n alignItems: 'center',\n background: '#fff',\n boxSizing: 'border-box',\n color: '#000',\n display: 'flex',\n flexDirection: 'row',\n fontSize: '16px',\n justifyContent: 'space-between',\n margin: '0',\n padding: '0 10px',\n },\n expandIcon: {\n height: '15px',\n margin: '0',\n padding: '0',\n width: '15px',\n },\n })\n\n return (\n <div\n {...props}\n ref={ref}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <div ref={bodyRef} style={styles(fixedStyles.body)}>\n {cloneStyledElement(components.toggle ?? <button style={defaultStyles.toggle}/>, {\n className: classNames(fixedClassNames.toggle),\n style: styles(fixedStyles.toggle),\n onClick: () => toggle(),\n }, ...[\n <label style={fixedStyles.toggleLabel} dangerouslySetInnerHTML={{ __html: selectedIndex === -1 ? defaultLabel : data[selectedIndex].label ?? '' }}/>,\n cloneStyledElement(components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>), {\n className: classNames(fixedClassNames.expandIcon),\n style: styles(fixedStyles.expandIcon),\n }),\n ])}\n <List\n className={fixedClassNames.list}\n style={styles(fixedStyles.list)}\n borderThickness={borderThickness}\n data={data}\n isSelectable={true}\n isTogglable={false}\n itemComponentType={itemComponentType}\n itemLength={itemLength}\n itemPadding={itemPadding}\n orientation={orientation}\n selectedIndex={selectedIndex}\n onDeselectAt={idx => selectItemAt(-1)}\n onSelectAt={idx => selectItemAt(idx)}\n />\n </div>\n </div>\n )\n}) as <T extends DropdownData = DropdownData>(props: DropdownProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const DropdownToggle = ({ ...props }: HTMLAttributes<HTMLButtonElement>) => <button {...props}/>\n\nexport const DropdownExpandIcon = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}
1	+ {"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useRef, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps } from './List'\nimport useElementRect from './hooks/useElementRect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' \| 'vertical'\n\nexport type DropdownData = {\n label?: string\n}\n\nexport type DropdownItemProps<T extends DropdownData = DropdownData> = ListItemProps<T>\n\nexport type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n /*\n Data of every item in the component. This is used to generate individual\n * menu items. Data type is generic.\n /\n data: T[]\n\n /\n Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n * Supports all orientations.\n /\n isInverted?: boolean\n\n /\n Indicates if items can be toggled, i.e. they can be deselected if selected\n * again.\n /\n isTogglable?: boolean\n\n /\n Thickness of the border (in pixels) of every item and the dropdown button\n * itself. 0 indicates no borders.\n /\n borderThickness?: number\n\n /\n The index of the default selected item.\n /\n selectedIndex?: number\n\n /\n Length (in pixels) of each item. This does not apply to the dropdown button\n * itself. Length refers to the height in vertical orientation and width in\n * horizontal orientation.\n /\n itemLength?: number\n\n /\n Padding (in pixels) of each item.\n /\n itemPadding?: number\n\n /\n Maximum number of items that are viside when the component expands. When a\n * value greater than or equal to 0 is specified, only that number of items\n * will be visible at a time, and a scrollbar will appear to scroll to\n * remaining items. Any value less than 0 indicates that all items will be\n * visible when the component expands.\n /\n maxVisibleItems?: number\n\n /\n Orientation of the component.\n /\n orientation?: Orientation\n\n /\n The label to appear on the dropdown button when no items are selected.\n /\n defaultLabel?: string\n\n /\n SVG markup to be put in the dropdown button as the expand icon.\n /\n expandIconSvg?: string\n\n /\n SVG markup to be put in the dropdown button as the collapse icon.\n /\n collapseIconSvg?: string\n\n /\n React component type to be used for generating items inside the component.\n /\n itemComponentType: ComponentType<DropdownItemProps<T>>\n\n /\n Handler invoked whenever the selected index changes.\n /\n onIndexChange?: (index: number) => void\n}>\n\n/\n A dropdown menu component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide data and item\n * component type to this component to automatically generate menu items.\n /\nexport default forwardRef(({\n children,\n className,\n style,\n borderThickness = 0,\n data,\n defaultLabel = 'Select',\n expandIconSvg,\n collapseIconSvg,\n isInverted = false,\n isTogglable = false,\n itemComponentType,\n itemLength: externalItemLength,\n itemPadding = 0,\n maxVisibleItems = -1,\n orientation = 'vertical',\n selectedIndex: externalSelectedIndex = -1,\n onIndexChange,\n ...props\n}, ref) => {\n const selectItemAt = (index: number) => {\n setSelectedIndex(index)\n setIsCollapsed(true)\n }\n\n const expand = () => {\n if (!isCollapsed) return\n setIsCollapsed(false)\n }\n\n const collapse = () => {\n if (isCollapsed) return\n setIsCollapsed(true)\n }\n\n const toggle = () => {\n if (isCollapsed) {\n expand()\n }\n else {\n collapse()\n }\n }\n\n const clickOutsideHandler = (event: MouseEvent) => {\n if (isCollapsed) return\n if (!(event.target instanceof Node)) return\n\n let isOutside = true\n let node = event.target\n\n while (node) {\n if (node === bodyRef.current) {\n isOutside = false\n break\n }\n\n if (!node.parentNode) break\n\n node = node.parentNode\n }\n\n if (!isOutside) return\n\n collapse()\n }\n\n const bodyRef = useRef<HTMLDivElement>(null)\n const [selectedIndex, setSelectedIndex] = useState(externalSelectedIndex)\n const [isCollapsed, setIsCollapsed] = useState(true)\n const rect = useElementRect(bodyRef)\n\n useEffect(() => {\n window.addEventListener('click', clickOutsideHandler)\n\n return () => {\n window.removeEventListener('click', clickOutsideHandler)\n }\n }, [isCollapsed])\n\n useEffect(() => {\n if (externalSelectedIndex === selectedIndex) return\n setSelectedIndex(externalSelectedIndex)\n }, [externalSelectedIndex])\n\n useEffect(() => {\n onIndexChange?.(selectedIndex)\n }, [selectedIndex])\n\n const itemLength = externalItemLength ?? (orientation === 'vertical' ? rect.height : rect.width)\n const numItems = data.length\n const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n const menuLength = (itemLength - borderThickness) numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n\n const components = asComponentDict(children, {\n toggle: DropdownToggle,\n expandIcon: DropdownExpandIcon,\n collapseIcon: DropdownCollapseIcon,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n toggle: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n expandIcon: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n collapseIcon: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n list: classNames({\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-start',\n overflow: 'visible',\n ...orientation === 'vertical' ? {\n flexDirection: isInverted ? 'column-reverse' : 'column',\n } : {\n flexDirection: isInverted ? 'row-reverse' : 'row',\n },\n },\n body: {\n height: '100%',\n width: '100%',\n },\n toggle: {\n borderWidth: `${borderThickness}px`,\n height: '100%',\n left: '0',\n margin: '0',\n outline: 'none',\n position: 'absolute',\n top: '0',\n width: '100%',\n zIndex: '1',\n },\n toggleLabel: {\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n },\n expandIcon: {\n\n },\n collapseIcon: {\n\n },\n list: {\n position: 'absolute',\n ...orientation === 'vertical' ? {\n transition: 'height 100ms ease-out',\n width: '100%',\n height: isCollapsed ? '0px' : `${menuLength}px`,\n overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n ...isInverted ? {\n marginBottom: `${itemPadding - borderThickness}px`,\n bottom: '100%',\n } : {\n top: '100%',\n marginTop: `${itemPadding - borderThickness}px`,\n },\n } : {\n transition: 'width 100ms ease-out',\n width: isCollapsed ? '0px' : `${menuLength}px`,\n height: '100%',\n overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n ...isInverted ? {\n marginRight: `${itemPadding - borderThickness}px`,\n right: '100%',\n } : {\n left: '100%',\n marginLeft: `${itemPadding - borderThickness}px`,\n },\n },\n },\n })\n\n const defaultStyles = asStyleDict({\n toggle: {\n alignItems: 'center',\n background: '#fff',\n boxSizing: 'border-box',\n color: '#000',\n display: 'flex',\n flexDirection: 'row',\n fontSize: '16px',\n justifyContent: 'space-between',\n margin: '0',\n padding: '0 10px',\n },\n expandIcon: {\n height: '15px',\n margin: '0',\n padding: '0',\n width: '15px',\n },\n collapseIcon: {\n height: '15px',\n margin: '0',\n padding: '0',\n width: '15px',\n },\n })\n\n const toggleComponent = components.toggle ?? <button style={defaultStyles.toggle}/>\n const expandIconComponent = components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>)\n const collapseIconComponent = components.collapseIcon ?? (collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles.collapseIcon}/> : expandIconComponent)\n\n return (\n <div\n {...props}\n ref={ref}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <div ref={bodyRef} style={styles(fixedStyles.body)}>\n {cloneStyledElement(toggleComponent, {\n className: classNames(fixedClassNames.toggle),\n style: styles(fixedStyles.toggle),\n onClick: () => toggle(),\n }, ...[\n <label style={fixedStyles.toggleLabel} dangerouslySetInnerHTML={{ __html: selectedIndex === -1 ? defaultLabel : data[selectedIndex].label ?? '' }}/>,\n cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n className: classNames(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),\n style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n }),\n ])}\n <List\n className={fixedClassNames.list}\n style={styles(fixedStyles.list)}\n borderThickness={borderThickness}\n data={data}\n isSelectable={true}\n isTogglable={false}\n itemComponentType={itemComponentType}\n itemLength={itemLength}\n itemPadding={itemPadding}\n orientation={orientation}\n selectedIndex={selectedIndex}\n onDeselectAt={idx => selectItemAt(-1)}\n onSelectAt={idx => selectItemAt(idx)}\n />\n </div>\n </div>\n )\n}) as <T extends DropdownData = DropdownData>(props: DropdownProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const DropdownToggle = ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => <button {...props}>{children}</button>\n\nexport const DropdownExpandIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n\nexport const DropdownCollapseIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "etudes",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "A study of headless React components",
   "main": "lib",
   "scripts": {
@@ -29,7 +29,7 @@
     "lib"
   ],
   "devDependencies": {
-    "@babel/core": "^7.22.17",
+    "@babel/core": "^7.22.19",
     "@babel/plugin-transform-runtime": "^7.22.15",
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
@@ -40,11 +40,11 @@
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/react-transition-group": "^4.4.6",
-    "@types/styled-components": "^5.1.26",
+    "@types/styled-components": "^5.1.27",
     "@types/webpack": "^5.28.2",
     "@types/webpack-env": "^1.18.1",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^6.6.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-styled-components": "^2.1.4",
     "concurrently": "^8.2.1",
@@ -55,10 +55,10 @@
     "html-webpack-plugin": "^5.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router": "^6.15.0",
-    "react-router-dom": "^6.15.0",
+    "react-router": "^6.16.0",
+    "react-router-dom": "^6.16.0",
     "rimraf": "^5.0.1",
-    "styled-components": "^6.0.7",
+    "styled-components": "^6.0.8",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",
     "wait-on": "^7.0.1",
@@ -79,7 +79,7 @@
   },
   "optionalDependencies": {
     "fast-xml-parser": "^4.2.7",
-    "react-router": "^6.15.0",
-    "react-router-dom": "^6.15.0"
+    "react-router": "^6.16.0",
+    "react-router-dom": "^6.16.0"
   }
 }