etudes 2.5.0 → 2.7.0

package/lib/Dropdown.js

@@ -73,12 +73,12 @@ 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"));
-var useElementRect_1 = __importDefault(require("./hooks/useElementRect"));
 var List_1 = __importDefault(require("./List"));
+var useElementRect_1 = __importDefault(require("./hooks/useElementRect"));
 var asClassNameDict_1 = __importDefault(require("./utils/asClassNameDict"));
 var asComponentDict_1 = __importDefault(require("./utils/asComponentDict"));
 var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
@@ -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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { ComponentType, forwardRef, HTMLAttributes, PropsWithChildren, ReactElement, Ref, useEffect, useRef, useState } from 'react'\nimport FlatSVG from './FlatSVG'\nimport useElementRect from './hooks/useElementRect'\nimport List, { 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 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"]}
+{"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/lib/Each.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export type EachProps<T> = {
     children?: ReactNode | ((value: T, index: number) => ReactNode);
     in?: T[];

package/lib/Each.js.map

@@ -1 +1 @@
-{"version":3,"file":"Each.js","sourceRoot":"/","sources":["Each.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkD;AAQlD,SAAwB,IAAI,CAAI,EAIjB;QAHT,KAAK,QAAA,EACT,QAAQ,cAAA,EACR,MAAM,YAAA;IAEN,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,6DAAK,CAAA;IACvD,IAAI,CAAC,CAAC,KAAK,YAAY,KAAK,CAAC;QAAE,MAAM,SAAS,CAAC,yBAAkB,KAAK,sBAAmB,CAAC,CAAA;IAE1F,OAAO,CACL,8DACG,KAAK,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CACnB,8BAAC,gBAAQ,IAAC,GAAG,EAAE,eAAQ,CAAC,CAAE,IACvB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAC1E,CACZ,EAJoB,CAIpB,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAjBD,uBAiBC","sourcesContent":["import React, { Fragment, ReactNode } from 'react'\n\nexport type EachProps<T> = {\n  children?: ReactNode | ((value: T, index: number) => ReactNode)\n  in?: T[]\n  render?: (value: T, index: number) => ReactNode\n}\n\nexport default function Each<T>({\n  in: array,\n  children,\n  render,\n}: EachProps<T>) {\n  if (array === undefined || array === null) return <></>\n  if (!(array instanceof Array)) throw TypeError(`Provided list <${array}> is not an array`)\n\n  return (\n    <>\n      {array.map((v, i) => (\n        <Fragment key={`item-${i}`}>\n          {render ? render(v, i) : typeof children === 'function' ? children(v, i) : children}\n        </Fragment>\n      ))}\n    </>\n  )\n}\n"]}
+{"version":3,"file":"Each.js","sourceRoot":"/","sources":["Each.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuD;AAQvD,SAAwB,IAAI,CAAI,EAIjB;QAHT,KAAK,QAAA,EACT,QAAQ,cAAA,EACR,MAAM,YAAA;IAEN,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,6DAAK,CAAA;IACvD,IAAI,CAAC,CAAC,KAAK,YAAY,KAAK,CAAC;QAAE,MAAM,SAAS,CAAC,yBAAkB,KAAK,sBAAmB,CAAC,CAAA;IAE1F,OAAO,CACL,8DACG,KAAK,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CACnB,8BAAC,gBAAQ,IAAC,GAAG,EAAE,eAAQ,CAAC,CAAE,IACvB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAC1E,CACZ,EAJoB,CAIpB,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAjBD,uBAiBC","sourcesContent":["import React, { Fragment, type ReactNode } from 'react'\n\nexport type EachProps<T> = {\n  children?: ReactNode | ((value: T, index: number) => ReactNode)\n  in?: T[]\n  render?: (value: T, index: number) => ReactNode\n}\n\nexport default function Each<T>({\n  in: array,\n  children,\n  render,\n}: EachProps<T>) {\n  if (array === undefined || array === null) return <></>\n  if (!(array instanceof Array)) throw TypeError(`Provided list <${array}> is not an array`)\n\n  return (\n    <>\n      {array.map((v, i) => (\n        <Fragment key={`item-${i}`}>\n          {render ? render(v, i) : typeof children === 'function' ? children(v, i) : children}\n        </Fragment>\n      ))}\n    </>\n  )\n}\n"]}

package/lib/ExtractChild.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { type HTMLAttributes } from 'react';
 export type ExtractChildProps = HTMLAttributes<HTMLElement>;
 /**
  * Extracts a single child of a parent component into its own component. If the

package/lib/ExtractChild.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExtractChild.js","sourceRoot":"/","sources":["ExtractChild.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAmF;AACnF,kFAA2D;AAI3D;;;;GAIG;AACH,kBAAe,IAAA,kBAAU,EAAiC,UAAC,EAG1D,EAAE,GAAG;IAFJ,IAAA,QAAQ,cAAA,EACL,KAAK,cAFiD,YAG1D,CADS;IAER,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QAC3B,OAAO,CAAC,KAAK,CAAC,uEAAgE,QAAQ,CAAC,MAAM,sEAAmE,CAAC,CAAA;KAClK;IAED,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,GAAG;QACjC,IAAI,GAAG,GAAG,CAAC,EAAE;YACX,OAAO,SAAS,CAAA;SACjB;aACI,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YAC9B,OAAO,IAAA,4BAAkB,EAAC,KAAK,EAAE,sBAAK,KAAK,KAAE,GAAG,KAAA,GAAS,CAAC,CAAA;SAC3D;aACI;YACH,OAAO,KAAK,CAAA;SACb;IACH,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import React, { Children, forwardRef, HTMLAttributes, isValidElement } from 'react'\nimport cloneStyledElement from './utils/cloneStyledElement'\n\nexport type ExtractChildProps = HTMLAttributes<HTMLElement>\n\n/**\n * Extracts a single child of a parent component into its own component. If the\n * parent component has multiple children, only the first one will be extracted,\n * the rest will be ignored.\n */\nexport default forwardRef<HTMLElement, ExtractChildProps>(({\n  children,\n  ...props\n}, ref) => {\n  if (Array.isArray(children)) {\n    console.error(`[etudes::ExtractChild] Only one child is expected, but found ${children.length}. Only the first child is extracted while the rest are discarded.`)\n  }\n\n  return (\n    <>\n      {Children.map(children, (child, idx) => {\n        if (idx > 0) {\n          return undefined\n        }\n        else if (isValidElement(child)) {\n          return cloneStyledElement(child, { ...props, ref } as any)\n        }\n        else {\n          return child\n        }\n      })}\n    </>\n  )\n})\n"]}
+{"version":3,"file":"ExtractChild.js","sourceRoot":"/","sources":["ExtractChild.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwF;AACxF,kFAA2D;AAI3D;;;;GAIG;AACH,kBAAe,IAAA,kBAAU,EAAiC,UAAC,EAG1D,EAAE,GAAG;IAFJ,IAAA,QAAQ,cAAA,EACL,KAAK,cAFiD,YAG1D,CADS;IAER,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QAC3B,OAAO,CAAC,KAAK,CAAC,uEAAgE,QAAQ,CAAC,MAAM,sEAAmE,CAAC,CAAA;KAClK;IAED,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,GAAG;QACjC,IAAI,GAAG,GAAG,CAAC,EAAE;YACX,OAAO,SAAS,CAAA;SACjB;aACI,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YAC9B,OAAO,IAAA,4BAAkB,EAAC,KAAK,EAAE,sBAAK,KAAK,KAAE,GAAG,KAAA,GAAS,CAAC,CAAA;SAC3D;aACI;YACH,OAAO,KAAK,CAAA;SACb;IACH,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import React, { Children, forwardRef, isValidElement, type HTMLAttributes } from 'react'\nimport cloneStyledElement from './utils/cloneStyledElement'\n\nexport type ExtractChildProps = HTMLAttributes<HTMLElement>\n\n/**\n * Extracts a single child of a parent component into its own component. If the\n * parent component has multiple children, only the first one will be extracted,\n * the rest will be ignored.\n */\nexport default forwardRef<HTMLElement, ExtractChildProps>(({\n  children,\n  ...props\n}, ref) => {\n  if (Array.isArray(children)) {\n    console.error(`[etudes::ExtractChild] Only one child is expected, but found ${children.length}. Only the first child is extracted while the rest are discarded.`)\n  }\n\n  return (\n    <>\n      {Children.map(children, (child, idx) => {\n        if (idx > 0) {\n          return undefined\n        }\n        else if (isValidElement(child)) {\n          return cloneStyledElement(child, { ...props, ref } as any)\n        }\n        else {\n          return child\n        }\n      })}\n    </>\n  )\n})\n"]}

package/lib/ExtractChildren.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { type HTMLAttributes } from 'react';
 export type ExtractChildrenProps = HTMLAttributes<HTMLElement>;
 /**
  * Extracts all children of a parent component into its own component.

package/lib/ExtractChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExtractChildren.js","sourceRoot":"/","sources":["ExtractChildren.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuE;AACvE,kFAA2D;AAI3D;;GAEG;AACH,SAAwB,eAAe,CAAC,EAGjB;IAFrB,IAAA,QAAQ,cAAA,EACL,KAAK,cAF8B,YAGvC,CADS;IAER,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAA,KAAK;QAC3B,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YACzB,OAAO,IAAA,4BAAkB,EAAC,KAAK,eAAO,KAAK,EAAG,CAAA;SAC/C;aACI;YACH,OAAO,KAAK,CAAA;SACb;IACH,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAhBD,kCAgBC","sourcesContent":["import React, { Children, HTMLAttributes, isValidElement } from 'react'\nimport cloneStyledElement from './utils/cloneStyledElement'\n\nexport type ExtractChildrenProps = HTMLAttributes<HTMLElement>\n\n/**\n * Extracts all children of a parent component into its own component.\n */\nexport default function ExtractChildren({\n  children,\n  ...props\n}: ExtractChildrenProps) {\n  return (\n    <>\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneStyledElement(child, { ...props })\n        }\n        else {\n          return child\n        }\n      })}\n    </>\n  )\n}\n"]}
+{"version":3,"file":"ExtractChildren.js","sourceRoot":"/","sources":["ExtractChildren.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA4E;AAC5E,kFAA2D;AAI3D;;GAEG;AACH,SAAwB,eAAe,CAAC,EAGjB;IAFrB,IAAA,QAAQ,cAAA,EACL,KAAK,cAF8B,YAGvC,CADS;IAER,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAA,KAAK;QAC3B,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YACzB,OAAO,IAAA,4BAAkB,EAAC,KAAK,eAAO,KAAK,EAAG,CAAA;SAC/C;aACI;YACH,OAAO,KAAK,CAAA;SACb;IACH,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAhBD,kCAgBC","sourcesContent":["import React, { Children, isValidElement, type HTMLAttributes } from 'react'\nimport cloneStyledElement from './utils/cloneStyledElement'\n\nexport type ExtractChildrenProps = HTMLAttributes<HTMLElement>\n\n/**\n * Extracts all children of a parent component into its own component.\n */\nexport default function ExtractChildren({\n  children,\n  ...props\n}: ExtractChildrenProps) {\n  return (\n    <>\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneStyledElement(child, { ...props })\n        }\n        else {\n          return child\n        }\n      })}\n    </>\n  )\n}\n"]}

package/lib/FlatSVG.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { type HTMLAttributes } from 'react';
 export type FlatSVGProps = HTMLAttributes<HTMLDivElement> & {
     /**
      * The SVG string markup, i.e. "<svg>...</svg>".

package/lib/FlatSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["FlatSVG.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAAuD;AACvD,6CAAyD;AAyCzD;;;;GAIG;AACH,kBAAe,IAAA,kBAAU,EAA+B,UAAC,EAQxD,EAAE,GAAG;IAPJ,IAAA,GAAG,SAAA,EACH,oBAAmB,EAAnB,YAAY,mBAAG,IAAI,KAAA,EACnB,iCAAgC,EAAhC,yBAAyB,mBAAG,IAAI,KAAA,EAChC,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA,EAClB,6BAAmC,EAAnC,qBAAqB,mBAAG,CAAC,SAAS,CAAC,KAAA,EAChC,KAAK,cAP+C,wGAQxD,CADS;IAER,IAAM,mBAAmB,GAAG,IAAI,CAAA;IAEhC,IAAM,eAAe,GAAG;QACtB,IAAM,MAAM,GAAG,IAAI,2BAAS,CAAC;YAC3B,mBAAmB,qBAAA;YACnB,gBAAgB,EAAE,KAAK;YACvB,iBAAiB,EAAE,IAAI;YACvB,YAAY,EAAE,IAAI;YAClB,cAAc,EAAE,IAAI;YACpB,UAAU,EAAE,IAAI;YAChB,SAAS,EAAE,UAAC,OAAO,EAAE,KAAK,EAAE,KAAK;;gBAC/B,IAAI,WAAW,IAAI,OAAO,KAAK,OAAO;oBAAE,OAAO,KAAK,CAAA;gBAEpD,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;;oBAEpC,KAAuB,IAAA,cAAA,SAAA,SAAS,CAAA,oCAAA,2DAAE;wBAA7B,IAAM,QAAQ,sBAAA;wBACjB,IAAI,QAAQ,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,OAAI;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;wBAC7F,IAAI,YAAY,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,UAAO;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;wBACpG,IAAI,WAAW,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,UAAO;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;qBACpG;;;;;;;;;gBAED,OAAO,OAAO,CAAA;YAChB,CAAC;SACF,CAAC,CAAA;QAEF,IAAM,OAAO,GAAG,IAAI,4BAAU,CAAC;YAC7B,mBAAmB,qBAAA;YACnB,MAAM,EAAE,IAAI;YACZ,gBAAgB,EAAE,KAAK;SACxB,CAAC,CAAA;QAEF,IAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAE7B,OAAO,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAC3B,CAAC,CAAA;IAED,OAAO,CACL,qDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,IACtD,CACH,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import { XMLBuilder, XMLParser } from 'fast-xml-parser'\nimport React, { HTMLAttributes, forwardRef } from 'react'\n\nexport type FlatSVGProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The SVG string markup, i.e. \"<svg>...</svg>\".\n   */\n  svg: string\n\n  /**\n   * Specifies whether the 'class' should be removed in the SVG root node and\n   * all of its child nodes.\n   */\n  stripClasses?: boolean\n\n  /**\n   * Specifies whether extraneous attributes should be removed from the SVG root\n   * node. The `whitelistedAttributes` prop defines what attributes should be\n   * kept.\n   */\n  stripExtraneousAttributes?: boolean\n\n  /**\n   * Specifies whether the 'id' attribute should be removed in the SVG root node\n   * and all of its child nodes.\n   */\n  stripIds?: boolean\n\n  /**\n   * Specifies whether the 'style' atribute and any <style> nodes should be\n   * removed in the SVG root node and all of its child nodes.\n   */\n  stripStyles?: boolean\n\n  /**\n   * Specifies attribute names to exclude from being stripped if\n   * `stripExtraneousAttributes` is enabled. By default, only `viewBox` is\n   * whitelisted.\n   */\n  whitelistedAttributes?: string[]\n}\n\n/**\n * A component whose root element wraps an SVG markup. When wrapping the SVG, it\n * will attempt to sanitize the markup (i.e. stripping useless attributes)\n * according to the props specified.\n */\nexport default forwardRef<HTMLDivElement, FlatSVGProps>(({\n  svg,\n  stripClasses = true,\n  stripExtraneousAttributes = true,\n  stripIds = true,\n  stripStyles = true,\n  whitelistedAttributes = ['viewBox'],\n  ...props\n}, ref) => {\n  const attributeNamePrefix = '@_'\n\n  const sanitizedMarkup = () => {\n    const parser = new XMLParser({\n      attributeNamePrefix,\n      ignoreAttributes: false,\n      ignoreDeclaration: true,\n      ignorePiTags: true,\n      removeNSPrefix: true,\n      trimValues: true,\n      updateTag: (tagName, jPath, attrs) => {\n        if (stripStyles && tagName === 'style') return false\n\n        const attrNames = Object.keys(attrs)\n\n        for (const attrName of attrNames) {\n          if (stripIds && attrName.toLowerCase() === `${attributeNamePrefix}id`) delete attrs[attrName]\n          if (stripClasses && attrName.toLowerCase() === `${attributeNamePrefix}class`) delete attrs[attrName]\n          if (stripStyles && attrName.toLowerCase() === `${attributeNamePrefix}style`) delete attrs[attrName]\n        }\n\n        return tagName\n      },\n    })\n\n    const builder = new XMLBuilder({\n      attributeNamePrefix,\n      format: true,\n      ignoreAttributes: false,\n    })\n\n    const xml = parser.parse(svg)\n\n    return builder.build(xml)\n  }\n\n  return (\n    <figure\n      {...props}\n      ref={ref}\n      dangerouslySetInnerHTML={{ __html: sanitizedMarkup() }}\n    />\n  )\n})\n"]}
+{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["FlatSVG.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAAuD;AACvD,6CAA8D;AAyC9D;;;;GAIG;AACH,kBAAe,IAAA,kBAAU,EAA+B,UAAC,EAQxD,EAAE,GAAG;IAPJ,IAAA,GAAG,SAAA,EACH,oBAAmB,EAAnB,YAAY,mBAAG,IAAI,KAAA,EACnB,iCAAgC,EAAhC,yBAAyB,mBAAG,IAAI,KAAA,EAChC,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA,EAClB,6BAAmC,EAAnC,qBAAqB,mBAAG,CAAC,SAAS,CAAC,KAAA,EAChC,KAAK,cAP+C,wGAQxD,CADS;IAER,IAAM,mBAAmB,GAAG,IAAI,CAAA;IAEhC,IAAM,eAAe,GAAG;QACtB,IAAM,MAAM,GAAG,IAAI,2BAAS,CAAC;YAC3B,mBAAmB,qBAAA;YACnB,gBAAgB,EAAE,KAAK;YACvB,iBAAiB,EAAE,IAAI;YACvB,YAAY,EAAE,IAAI;YAClB,cAAc,EAAE,IAAI;YACpB,UAAU,EAAE,IAAI;YAChB,SAAS,EAAE,UAAC,OAAO,EAAE,KAAK,EAAE,KAAK;;gBAC/B,IAAI,WAAW,IAAI,OAAO,KAAK,OAAO;oBAAE,OAAO,KAAK,CAAA;gBAEpD,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;;oBAEpC,KAAuB,IAAA,cAAA,SAAA,SAAS,CAAA,oCAAA,2DAAE;wBAA7B,IAAM,QAAQ,sBAAA;wBACjB,IAAI,QAAQ,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,OAAI;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;wBAC7F,IAAI,YAAY,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,UAAO;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;wBACpG,IAAI,WAAW,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,UAAO;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;qBACpG;;;;;;;;;gBAED,OAAO,OAAO,CAAA;YAChB,CAAC;SACF,CAAC,CAAA;QAEF,IAAM,OAAO,GAAG,IAAI,4BAAU,CAAC;YAC7B,mBAAmB,qBAAA;YACnB,MAAM,EAAE,IAAI;YACZ,gBAAgB,EAAE,KAAK;SACxB,CAAC,CAAA;QAEF,IAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAE7B,OAAO,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAC3B,CAAC,CAAA;IAED,OAAO,CACL,qDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,IACtD,CACH,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import { XMLBuilder, XMLParser } from 'fast-xml-parser'\nimport React, { forwardRef, type HTMLAttributes } from 'react'\n\nexport type FlatSVGProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The SVG string markup, i.e. \"<svg>...</svg>\".\n   */\n  svg: string\n\n  /**\n   * Specifies whether the 'class' should be removed in the SVG root node and\n   * all of its child nodes.\n   */\n  stripClasses?: boolean\n\n  /**\n   * Specifies whether extraneous attributes should be removed from the SVG root\n   * node. The `whitelistedAttributes` prop defines what attributes should be\n   * kept.\n   */\n  stripExtraneousAttributes?: boolean\n\n  /**\n   * Specifies whether the 'id' attribute should be removed in the SVG root node\n   * and all of its child nodes.\n   */\n  stripIds?: boolean\n\n  /**\n   * Specifies whether the 'style' atribute and any <style> nodes should be\n   * removed in the SVG root node and all of its child nodes.\n   */\n  stripStyles?: boolean\n\n  /**\n   * Specifies attribute names to exclude from being stripped if\n   * `stripExtraneousAttributes` is enabled. By default, only `viewBox` is\n   * whitelisted.\n   */\n  whitelistedAttributes?: string[]\n}\n\n/**\n * A component whose root element wraps an SVG markup. When wrapping the SVG, it\n * will attempt to sanitize the markup (i.e. stripping useless attributes)\n * according to the props specified.\n */\nexport default forwardRef<HTMLDivElement, FlatSVGProps>(({\n  svg,\n  stripClasses = true,\n  stripExtraneousAttributes = true,\n  stripIds = true,\n  stripStyles = true,\n  whitelistedAttributes = ['viewBox'],\n  ...props\n}, ref) => {\n  const attributeNamePrefix = '@_'\n\n  const sanitizedMarkup = () => {\n    const parser = new XMLParser({\n      attributeNamePrefix,\n      ignoreAttributes: false,\n      ignoreDeclaration: true,\n      ignorePiTags: true,\n      removeNSPrefix: true,\n      trimValues: true,\n      updateTag: (tagName, jPath, attrs) => {\n        if (stripStyles && tagName === 'style') return false\n\n        const attrNames = Object.keys(attrs)\n\n        for (const attrName of attrNames) {\n          if (stripIds && attrName.toLowerCase() === `${attributeNamePrefix}id`) delete attrs[attrName]\n          if (stripClasses && attrName.toLowerCase() === `${attributeNamePrefix}class`) delete attrs[attrName]\n          if (stripStyles && attrName.toLowerCase() === `${attributeNamePrefix}style`) delete attrs[attrName]\n        }\n\n        return tagName\n      },\n    })\n\n    const builder = new XMLBuilder({\n      attributeNamePrefix,\n      format: true,\n      ignoreAttributes: false,\n    })\n\n    const xml = parser.parse(svg)\n\n    return builder.build(xml)\n  }\n\n  return (\n    <figure\n      {...props}\n      ref={ref}\n      dangerouslySetInnerHTML={{ __html: sanitizedMarkup() }}\n    />\n  )\n})\n"]}

package/lib/List.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentType, HTMLAttributes, ReactElement, Ref } from 'react';
+import React, { type ComponentType, type HTMLAttributes, type ReactElement, type Ref } from 'react';
 type Orientation = 'horizontal' | 'vertical';
 export type ListItemProps<T> = HTMLAttributes<HTMLElement> & {
     data: T;

package/lib/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"/","sources":["List.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { ComponentType, forwardRef, HTMLAttributes, ReactElement, Ref, useEffect, useState } from 'react'\nimport Each from './Each'\nimport usePrevious from './hooks/usePrevious'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type ListItemProps<T> = HTMLAttributes<HTMLElement> & {\n  data: T\n  index: number\n  isSelected: boolean\n  orientation: Orientation\n}\n\nexport type ListProps<T> = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Thickness of item borders (in pixels). 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * Generically typed data of each item.\n   */\n  data: T[]\n\n  /**\n   * The selected index. Any value below 0 indicates that nothing is\n   * selected.\n   */\n  selectedIndex?: number\n\n  /**\n   * React component type to be used to generate items for this list.\n   */\n  itemComponentType?: ComponentType<ListItemProps<T>>\n\n  /**\n   * Optional length of each item.\n   */\n  itemLength?: number\n\n  /**\n   * Padding between every item (in pixels).\n   */\n  itemPadding?: number\n\n  /**\n   * Indicates whether selections are retained. For example, in the case of a\n   * vertical list of clickable rows, being able to retain a selection means\n   * when the row is clicked, it becomes and stays selected. Being unable to\n   * retain a selection means when the row is clicked, it does not become\n   * selected. It is simply clicked and the subsequent event is dispatched.\n   */\n  isSelectable?: boolean\n\n  /**\n   * Indicates whether selections can be toggled. For example, in the case of a\n   * vertical list of selectable rows, being able to toggle a row means it gets\n   * deselected when selected again. Being unable to toggle the row means it\n   * does not get deselected when selected again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Orientation of the list.\n   */\n  orientation?: Orientation\n\n  /**\n   * Handler invoked when an index is activated.\n   */\n  onActivate?: (index: number) => void\n\n  /**\n   * Handler invoked when an index is deselected.\n   */\n  onDeselectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when an index is selected.\n   */\n  onSelectAt?: (index: number) => void\n}\n\n/**\n * A scrollable list of selectable items. Items are generated based on the\n * provided React component type. The type of data passed to each item is\n * generic. This component supports both horizontal and vertical orientations.\n */\nexport default forwardRef(({\n  className,\n  style,\n  borderThickness = 0,\n  data,\n  isSelectable,\n  isTogglable,\n  itemComponentType: ItemComponentType,\n  itemLength,\n  itemPadding = 0,\n  orientation = 'vertical',\n  selectedIndex: externalSelectedIndex = -1,\n  onActivate,\n  onDeselectAt,\n  onSelectAt,\n  ...props\n}, ref) => {\n  const isIndexOutOfRange = (index: number) => {\n    if (index >= data.length) return true\n    if (index < 0) return true\n\n    return false\n  }\n\n  const isSelectedAt = (index: number) => selectedIndex === index\n\n  const toggleAt = (index: number) => {\n    if (isSelectedAt(index)) {\n      deselectAt(index)\n    }\n    else {\n      selectAt(index)\n    }\n  }\n\n  const selectAt = (index: number) => {\n    if (isSelectedAt(index)) return\n    setSelectedIndex(index)\n  }\n\n  const deselectAt = (index: number) => {\n    if (!isSelectedAt(index)) return\n    setSelectedIndex(-1)\n  }\n\n  const onClick = (index: number) => {\n    if (isSelectable) {\n      if (isTogglable) {\n        toggleAt(index)\n      }\n      else {\n        selectAt(index)\n      }\n    }\n\n    onActivate?.(index)\n  }\n\n  const [selectedIndex, setSelectedIndex] = useState(externalSelectedIndex)\n  const prevSelectedIndex = usePrevious(selectedIndex)\n\n  useEffect(() => {\n    if (externalSelectedIndex === selectedIndex) return\n    setSelectedIndex(externalSelectedIndex)\n  }, [externalSelectedIndex])\n\n  useEffect(() => {\n    if (!isSelectable) return\n\n    if (!isIndexOutOfRange(prevSelectedIndex ?? -1)) onDeselectAt?.(prevSelectedIndex ?? -1)\n    if (!isIndexOutOfRange(selectedIndex)) onSelectAt?.(selectedIndex)\n  }, [selectedIndex])\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation, {\n      togglable: isTogglable,\n    }),\n    item: classNames(orientation, {\n      togglable: isTogglable,\n    }),\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      alignItems: 'flex-start',\n      counterReset: 'item-counter',\n      display: 'flex',\n      flex: '0 0 auto',\n      flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n      justifyContent: 'flex-start',\n      listStyle: 'none',\n    },\n    item: {\n      borderWidth: `${borderThickness}px`,\n      counterIncrement: 'item-counter',\n      flex: '0 0 auto',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n      } : {\n        height: '100%',\n      },\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      {ItemComponentType && (\n        <Each in={data}>\n          {(val, idx) => (\n            <ItemComponentType\n              className={classNames(fixedClassNames.item, {\n                selected: isSelectedAt(idx),\n              })}\n              style={styles(fixedStyles.item, {\n                pointerEvents: isTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto',\n                ...orientation === 'vertical' ? {\n                  height: itemLength !== undefined ? `${itemLength}px` : undefined,\n                  marginTop: `${idx === 0 ? 0 : -borderThickness}px`,\n                } : {\n                  marginLeft: `${idx === 0 ? 0 : -borderThickness}px`,\n                  width: itemLength !== undefined ? `${itemLength}px` : undefined,\n                },\n                ...idx >= data.length - 1 ? {} : {\n                  ...orientation === 'vertical' ? {\n                    marginBottom: `${itemPadding}px`,\n                  } : {\n                    marginRight: `${itemPadding}px`,\n                  },\n                },\n              })}\n              data-index={idx}\n              data={val}\n              index={idx}\n              isSelected={isSelectedAt(idx)}\n              orientation={orientation}\n              onClick={() => onClick(idx)}\n            />\n          )}\n        </Each>\n      )}\n    </div>\n  )\n}) as <T>(props: ListProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n"]}
+{"version":3,"file":"List.js","sourceRoot":"/","sources":["List.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport usePrevious from './hooks/usePrevious'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type ListItemProps<T> = HTMLAttributes<HTMLElement> & {\n  data: T\n  index: number\n  isSelected: boolean\n  orientation: Orientation\n}\n\nexport type ListProps<T> = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Thickness of item borders (in pixels). 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * Generically typed data of each item.\n   */\n  data: T[]\n\n  /**\n   * The selected index. Any value below 0 indicates that nothing is\n   * selected.\n   */\n  selectedIndex?: number\n\n  /**\n   * React component type to be used to generate items for this list.\n   */\n  itemComponentType?: ComponentType<ListItemProps<T>>\n\n  /**\n   * Optional length of each item.\n   */\n  itemLength?: number\n\n  /**\n   * Padding between every item (in pixels).\n   */\n  itemPadding?: number\n\n  /**\n   * Indicates whether selections are retained. For example, in the case of a\n   * vertical list of clickable rows, being able to retain a selection means\n   * when the row is clicked, it becomes and stays selected. Being unable to\n   * retain a selection means when the row is clicked, it does not become\n   * selected. It is simply clicked and the subsequent event is dispatched.\n   */\n  isSelectable?: boolean\n\n  /**\n   * Indicates whether selections can be toggled. For example, in the case of a\n   * vertical list of selectable rows, being able to toggle a row means it gets\n   * deselected when selected again. Being unable to toggle the row means it\n   * does not get deselected when selected again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Orientation of the list.\n   */\n  orientation?: Orientation\n\n  /**\n   * Handler invoked when an index is activated.\n   */\n  onActivate?: (index: number) => void\n\n  /**\n   * Handler invoked when an index is deselected.\n   */\n  onDeselectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when an index is selected.\n   */\n  onSelectAt?: (index: number) => void\n}\n\n/**\n * A scrollable list of selectable items. Items are generated based on the\n * provided React component type. The type of data passed to each item is\n * generic. This component supports both horizontal and vertical orientations.\n */\nexport default forwardRef(({\n  className,\n  style,\n  borderThickness = 0,\n  data,\n  isSelectable,\n  isTogglable,\n  itemComponentType: ItemComponentType,\n  itemLength,\n  itemPadding = 0,\n  orientation = 'vertical',\n  selectedIndex: externalSelectedIndex = -1,\n  onActivate,\n  onDeselectAt,\n  onSelectAt,\n  ...props\n}, ref) => {\n  const isIndexOutOfRange = (index: number) => {\n    if (index >= data.length) return true\n    if (index < 0) return true\n\n    return false\n  }\n\n  const isSelectedAt = (index: number) => selectedIndex === index\n\n  const toggleAt = (index: number) => {\n    if (isSelectedAt(index)) {\n      deselectAt(index)\n    }\n    else {\n      selectAt(index)\n    }\n  }\n\n  const selectAt = (index: number) => {\n    if (isSelectedAt(index)) return\n    setSelectedIndex(index)\n  }\n\n  const deselectAt = (index: number) => {\n    if (!isSelectedAt(index)) return\n    setSelectedIndex(-1)\n  }\n\n  const onClick = (index: number) => {\n    if (isSelectable) {\n      if (isTogglable) {\n        toggleAt(index)\n      }\n      else {\n        selectAt(index)\n      }\n    }\n\n    onActivate?.(index)\n  }\n\n  const [selectedIndex, setSelectedIndex] = useState(externalSelectedIndex)\n  const prevSelectedIndex = usePrevious(selectedIndex)\n\n  useEffect(() => {\n    if (externalSelectedIndex === selectedIndex) return\n    setSelectedIndex(externalSelectedIndex)\n  }, [externalSelectedIndex])\n\n  useEffect(() => {\n    if (!isSelectable) return\n\n    if (!isIndexOutOfRange(prevSelectedIndex ?? -1)) onDeselectAt?.(prevSelectedIndex ?? -1)\n    if (!isIndexOutOfRange(selectedIndex)) onSelectAt?.(selectedIndex)\n  }, [selectedIndex])\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation, {\n      togglable: isTogglable,\n    }),\n    item: classNames(orientation, {\n      togglable: isTogglable,\n    }),\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      alignItems: 'flex-start',\n      counterReset: 'item-counter',\n      display: 'flex',\n      flex: '0 0 auto',\n      flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n      justifyContent: 'flex-start',\n      listStyle: 'none',\n    },\n    item: {\n      borderWidth: `${borderThickness}px`,\n      counterIncrement: 'item-counter',\n      flex: '0 0 auto',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n      } : {\n        height: '100%',\n      },\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      {ItemComponentType && (\n        <Each in={data}>\n          {(val, idx) => (\n            <ItemComponentType\n              className={classNames(fixedClassNames.item, {\n                selected: isSelectedAt(idx),\n              })}\n              style={styles(fixedStyles.item, {\n                pointerEvents: isTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto',\n                ...orientation === 'vertical' ? {\n                  height: itemLength !== undefined ? `${itemLength}px` : undefined,\n                  marginTop: `${idx === 0 ? 0 : -borderThickness}px`,\n                } : {\n                  marginLeft: `${idx === 0 ? 0 : -borderThickness}px`,\n                  width: itemLength !== undefined ? `${itemLength}px` : undefined,\n                },\n                ...idx >= data.length - 1 ? {} : {\n                  ...orientation === 'vertical' ? {\n                    marginBottom: `${itemPadding}px`,\n                  } : {\n                    marginRight: `${itemPadding}px`,\n                  },\n                },\n              })}\n              data-index={idx}\n              data={val}\n              index={idx}\n              isSelected={isSelectedAt(idx)}\n              orientation={orientation}\n              onClick={() => onClick(idx)}\n            />\n          )}\n        </Each>\n      )}\n    </div>\n  )\n}) as <T>(props: ListProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n"]}

package/lib/MasonryGrid.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { type HTMLAttributes } from 'react';
 type Orientation = 'horizontal' | 'vertical';
 export type MasonryGridProps = HTMLAttributes<HTMLDivElement> & {
     areSectionsAligned?: boolean;

package/lib/MasonryGrid.js

@@ -240,9 +240,9 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
  * Computes the index and current length of the next available section for a
  * specific base value, based on a provided array of existing section lengths.
  *
- * @param currentSectionLengths - An array of the current section lengths.
- * @param base - The base value of the item to be inserted into the grid, and to
- *               be used to evaluate the next available section.
+ * @param currentSectionLengths An array of the current section lengths.
+ * @param base The base value of the item to be inserted into the grid, and to
+ *             be used to evaluate the next available section.
  *
  * @returns An array consiting of the computed section index and its to-be
  *          length if a new item were to be placed in it.
@@ -277,11 +277,11 @@ function computeNextAvailableSectionAndLengthByBase(currentSectionLengths, base)
  * A helper function that computes the max section length of an array of section
  * lengths. Only the first n = `base` sections are inspected.
  *
- * @param currentSectionLengths - An array of section lengths.
- * @param base - The number representing the first n sections to inspect. Any
- *               non-numerical values will be ignored and return value will be
- *               based on all sections. A `base` value will be clamped between 1
- *               and the maximum length of the array of section lengths.
+ * @param currentSectionLengths An array of section lengths.
+ * @param base The number representing the first n sections to inspect. Any
+ *             non-numerical values will be ignored and return value will be
+ *             based on all sections. A `base` value will be clamped between 1
+ *             and the maximum length of the array of section lengths.
  *
  * @returns The max section length.
  */
@@ -295,8 +295,8 @@ function computeMaxLength(currentSectionLengths, base) {
 /**
  * Computes the base value of an element from its classes.
  *
- * @param element - The HTML element.
- * @param numSections - Total number of sections.
+ * @param element The HTML element.
+ * @param numSections Total number of sections.
  *
  * @returns The computed base value that is clamped between 1 and max number of
  *          sections.

package/lib/MasonryGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"MasonryGrid.js","sourceRoot":"/","sources":["MasonryGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport useDebug from './utils/useDebug'\n\nconst debug = useDebug('masonry')\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type MasonryGridProps = HTMLAttributes<HTMLDivElement> & {\n  areSectionsAligned?: boolean\n  horizontalSpacing?: number\n  isReversed?: boolean\n  orientation?: Orientation\n  sections?: number\n  verticalSpacing?: number\n}\n\nconst BASE_MODIFIER_CLASS_PREFIX = 'base-'\n\n/**\n * This is a React component that arranges all of its immediate children in a\n * masonry grid. Refrain from assigning CSS styles to it via `className` or\n * `style` property, though they are still handled if absolutely necessary.\n * Customize the grid via its supported properties. The grid can be in either\n * vertical or horizontal orientation. The length of every child element\n * *parallel to the direction of the orientation* is automatically set according\n * to the number of sections specified for the grid. This means that in an\n * horizontally oriented grid, the *width* of each child element is\n * automatically set, whereas in a vertically oriented grid the *height* of each\n * child element is automatically set. Additionally, the *number of sections*\n * corresponds to the maximum the number of child elements present in the\n * direction that is parallel to the orientation of the grid. Hence, in a\n * vertically oriented grid, *number of secitons* refers to the *number of\n * rows*, whereas in a horizontally oriented grid, *number of sections* refers\n * to the *number of columns*.\n */\nexport default forwardRef<HTMLDivElement, MasonryGridProps>(({\n  areSectionsAligned = false,\n  children,\n  className,\n  horizontalSpacing = 0,\n  isReversed = false,\n  orientation = 'vertical',\n  sections = 3,\n  verticalSpacing = 0,\n  ...props\n}, ref) => {\n  const bodyRef = useRef<HTMLDivElement>(null)\n\n  const [minWidth, setMinWidth] = useState(NaN)\n  const [minHeight, setMinHeight] = useState(NaN)\n  const [maxWidth, setMaxWidth] = useState(NaN)\n  const [maxHeight, setMaxHeight] = useState(NaN)\n\n  const getCurrentWidth = () => Rect.from(bodyRef.current)?.width ?? 0\n\n  const getCurrentHeight = () => Rect.from(bodyRef.current)?.height ?? 0\n\n  const repositionChildren = () => {\n    const rootNode = bodyRef.current\n\n    if (!rootNode) return\n\n    debug('Repositioning children... OK')\n\n    const nodes = rootNode.children\n    const numSections = sections\n\n    if (numSections <= 0) throw new Error('You must specifiy a minimum of 1 section(s) (a.k.a. row(s) for horizontal orientation, column(s) for vertical orientation) for a MasonryGrid instance')\n\n    if (orientation === 'vertical') {\n      const sectionHeights: number[] = [...new Array(numSections)].map(() => 0)\n\n      for (let i = 0; i < nodes.length; i++) {\n        const child = nodes[i]\n\n        if (!(child instanceof HTMLElement)) continue\n\n        const base = computeBaseFromElement(child, sections)\n        const [colIdx, y] = computeNextAvailableSectionAndLengthByBase(sectionHeights, base)\n\n        child.style.position = 'absolute'\n        child.style.width = `calc(${100 / numSections * base}% - ${horizontalSpacing * (numSections - 1) / numSections * base}px + ${horizontalSpacing * (base - 1)}px)`\n        child.style.height = ''\n        child.style.left = `calc(${100 / numSections * colIdx}% - ${horizontalSpacing * (numSections - 1) / numSections * colIdx}px + ${horizontalSpacing * colIdx}px)`\n        child.style.top = `${y + (y === 0 ? 0 : verticalSpacing)}px`\n\n        for (let j = 0; j < base; j++) {\n          sectionHeights[colIdx + j] = y + (y === 0 ? 0 : verticalSpacing) + (Rect.from(child)?.height ?? 0)\n        }\n\n        if (areSectionsAligned && colIdx + base === numSections) {\n          const m = computeMaxLength(sectionHeights)\n\n          for (let j = 0; j < numSections; j++) {\n            sectionHeights[j] = m\n          }\n        }\n      }\n\n      const w = getCurrentWidth()\n      const h = computeMaxLength(sectionHeights, numSections)\n\n      setMinWidth(w)\n      setMinHeight(h)\n\n      if (!isNaN(h)) rootNode.style.height = `${h}px`\n\n      if (isReversed) {\n        for (let i = 0; i < nodes.length; i++) {\n          const child = nodes[i]\n\n          if (!(child instanceof HTMLElement)) continue\n\n          const x = parseFloat(child.style.left)\n\n          child.style.left = `${w - x - parseFloat(child.style.width)}px`\n        }\n      }\n    }\n    else {\n      const sectionWidths: number[] = [...new Array(numSections)].map(() => 0)\n\n      for (let i = 0; i < nodes.length; i++) {\n        const child = nodes[i]\n\n        if (!(child instanceof HTMLElement)) continue\n\n        const base = computeBaseFromElement(child, sections)\n        const [rowIdx, x] = computeNextAvailableSectionAndLengthByBase(sectionWidths, base)\n\n        child.style.position = 'absolute'\n        child.style.width = ''\n        child.style.height = `calc(${100 / numSections * base}% - ${verticalSpacing * (numSections - 1) / numSections * base}px + ${verticalSpacing * (base - 1)}px)`\n        child.style.top = `calc(${100 / numSections * rowIdx}% - ${verticalSpacing * (numSections - 1) / numSections * rowIdx}px + ${verticalSpacing * rowIdx}px)`\n        child.style.left = `${x + (x === 0 ? 0 : horizontalSpacing)}px`\n\n        for (let j = 0; j < base; j++) {\n          sectionWidths[rowIdx + j] = x + (x === 0 ? 0 : horizontalSpacing) + (Rect.from(child)?.width ?? 0)\n        }\n\n        if (areSectionsAligned && rowIdx + base === numSections) {\n          const m = computeMaxLength(sectionWidths)\n\n          for (let j = 0; j < numSections; j++) {\n            sectionWidths[j] = m\n          }\n        }\n      }\n\n      const h = getCurrentHeight()\n      const w = computeMaxLength(sectionWidths, numSections)\n\n      setMinHeight(h)\n      setMinWidth(w)\n\n      if (!isNaN(w)) rootNode.style.width = `${w}px`\n\n      if (isReversed) {\n        for (let i = 0; i < nodes.length; i++) {\n          const child = nodes[i]\n\n          if (!(child instanceof HTMLElement)) continue\n\n          const y = parseFloat(child.style.top)\n\n          child.style.top = `${h - y - parseFloat(child.style.height)}px`\n        }\n      }\n    }\n  }\n\n  useResizeEffect(bodyRef, {\n    onResize: maxSize => {\n      const currWidth = getCurrentWidth()\n      const currHeight = getCurrentHeight()\n\n      if (minWidth !== currWidth || minHeight !== currHeight || maxSize.width !== maxWidth || maxSize.height !== maxHeight) {\n        repositionChildren()\n        setMaxWidth(maxSize.width)\n        setMaxHeight(maxSize.height)\n      }\n    },\n  }, [areSectionsAligned, horizontalSpacing, isReversed, sections, verticalSpacing])\n\n  useEffect(() => {\n    const imageSources = getAllImageSources(bodyRef.current?.innerHTML)\n\n    if (imageSources.length === 0) return repositionChildren()\n\n    const numImages = imageSources.length\n\n    for (let i = 0; i < numImages; i++) {\n      const src = imageSources[i]\n      const image = new Image()\n      image.src = src\n      image.onload = () => repositionChildren()\n    }\n  }, [children])\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation),\n  })\n\n  const fixedStyles = asStyleDict({\n    body: {\n      height: orientation === 'horizontal' ? '100%' : 'auto',\n      minHeight: orientation === 'vertical' && !isNaN(minHeight) ? `${minHeight}px` : '',\n      minWidth: orientation === 'horizontal' && !isNaN(minWidth) ? `${minWidth}px` : '',\n      padding: '0',\n      width: orientation === 'horizontal' ? 'auto' : '100%',\n    },\n  })\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n    >\n      <div ref={bodyRef} style={fixedStyles.body}>\n        {children}\n      </div>\n    </div>\n  )\n})\n\n/**\n * Computes the index and current length of the next available section for a\n * specific base value, based on a provided array of existing section lengths.\n *\n * @param currentSectionLengths - An array of the current section lengths.\n * @param base - The base value of the item to be inserted into the grid, and to\n *               be used to evaluate the next available section.\n *\n * @returns An array consiting of the computed section index and its to-be\n *          length if a new item were to be placed in it.\n */\nfunction computeNextAvailableSectionAndLengthByBase(currentSectionLengths: number[], base: number): [number, number] {\n  const numSections = currentSectionLengths.length\n\n  let sectionIdx = NaN\n  let minLength = Infinity\n\n  for (let i = 0; i < numSections; i++) {\n    const length = currentSectionLengths[i]\n    const isShorter = length < minLength\n    const isEligibleSection = i + base <= numSections\n    let hasRoomInSubsequentSections = true\n\n    for (let j = 1; j < base; j++) {\n      if (currentSectionLengths[i + j] > length) {\n        hasRoomInSubsequentSections = false\n      }\n    }\n\n    if (isShorter && isEligibleSection && hasRoomInSubsequentSections) {\n      sectionIdx = i\n      minLength = length\n    }\n  }\n\n  if (isNaN(sectionIdx)) {\n    return [0, computeMaxLength(currentSectionLengths, base)]\n  }\n  else {\n    return [sectionIdx, minLength]\n  }\n}\n\n/**\n * A helper function that computes the max section length of an array of section\n * lengths. Only the first n = `base` sections are inspected.\n *\n * @param currentSectionLengths - An array of section lengths.\n * @param base - The number representing the first n sections to inspect. Any\n *               non-numerical values will be ignored and return value will be\n *               based on all sections. A `base` value will be clamped between 1\n *               and the maximum length of the array of section lengths.\n *\n * @returns The max section length.\n */\nfunction computeMaxLength(currentSectionLengths: number[], base?: number): number {\n  let arr = currentSectionLengths\n\n  if (base !== undefined && base !== null && !isNaN(base)) {\n    arr = arr.slice(0, Math.max(1, Math.min(base, currentSectionLengths.length)))\n  }\n\n  return arr.reduce((out, curr, i) => curr > out ? curr : out, 0)\n}\n\n/**\n * Computes the base value of an element from its classes.\n *\n * @param element - The HTML element.\n * @param numSections - Total number of sections.\n *\n * @returns The computed base value that is clamped between 1 and max number of\n *          sections.\n */\nfunction computeBaseFromElement(element: HTMLElement, numSections: number): number {\n  const classList = element.classList\n\n  for (let i = 0; i < classList.length; i++) {\n    const c = classList[i]\n\n    if (c.startsWith(BASE_MODIFIER_CLASS_PREFIX)) {\n      const base = parseFloat(c.replace(BASE_MODIFIER_CLASS_PREFIX, ''))\n      if (!isNaN(base)) return Math.min(Math.max(base, 1), numSections)\n    }\n  }\n\n  return 1\n}\n\n/**\n * Scans an HTML string and returns all the image sources.\n *\n * @param htmlString The HTML string.\n *\n * @returns The image sources.\n */\nfunction getAllImageSources(htmlString?: string): string[] {\n  if (!htmlString) return []\n\n  const regexImg = /<img.*?src=(\"|')(.*?)(\"|')/g\n  const regexSrc = /<img.*?src=(\"|')(.*?)(\"|')/\n  const imageTags = htmlString.match(regexImg) ?? []\n\n  const out: string[] = []\n\n  for (let i = 0; i < imageTags.length; i++) {\n    const tag = imageTags[i]\n    const src = tag.match(regexSrc)?.[2]\n\n    if (!src) continue\n\n    out.push(src)\n  }\n\n  return out\n}\n"]}
+{"version":3,"file":"MasonryGrid.js","sourceRoot":"/","sources":["MasonryGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAA2F;AAC3F,+BAA4B;AAC5B,4EAAqD;AACrD,4EAAqD;AACrD,oEAA6C;AAC7C,8DAAuC;AAEvC,IAAM,KAAK,GAAG,IAAA,kBAAQ,EAAC,SAAS,CAAC,CAAA;AAajC,IAAM,0BAA0B,GAAG,OAAO,CAAA;AAE1C;;;;;;;;;;;;;;;;GAgBG;AACH,kBAAe,IAAA,kBAAU,EAAmC,UAAC,EAU5D,EAAE,GAAG;IATJ,IAAA,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAC1B,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,yBAAqB,EAArB,iBAAiB,mBAAG,CAAC,KAAA,EACrB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,mBAAwB,EAAxB,WAAW,mBAAG,UAAU,KAAA,EACxB,gBAAY,EAAZ,QAAQ,mBAAG,CAAC,KAAA,EACZ,uBAAmB,EAAnB,eAAe,mBAAG,CAAC,KAAA,EAChB,KAAK,cATmD,gIAU5D,CADS;IAER,IAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAA;IAEtC,IAAA,KAAA,OAA0B,IAAA,gBAAQ,EAAC,GAAG,CAAC,IAAA,EAAtC,QAAQ,QAAA,EAAE,WAAW,QAAiB,CAAA;IACvC,IAAA,KAAA,OAA4B,IAAA,gBAAQ,EAAC,GAAG,CAAC,IAAA,EAAxC,SAAS,QAAA,EAAE,YAAY,QAAiB,CAAA;IACzC,IAAA,KAAA,OAA0B,IAAA,gBAAQ,EAAC,GAAG,CAAC,IAAA,EAAtC,QAAQ,QAAA,EAAE,WAAW,QAAiB,CAAA;IACvC,IAAA,KAAA,OAA4B,IAAA,gBAAQ,EAAC,GAAG,CAAC,IAAA,EAAxC,SAAS,QAAA,EAAE,YAAY,QAAiB,CAAA;IAE/C,IAAM,eAAe,GAAG,0BAAM,OAAA,MAAA,MAAA,YAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,0CAAE,KAAK,mCAAI,CAAC,CAAA,EAAA,CAAA;IAEpE,IAAM,gBAAgB,GAAG,0BAAM,OAAA,MAAA,MAAA,YAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,0CAAE,MAAM,mCAAI,CAAC,CAAA,EAAA,CAAA;IAEtE,IAAM,kBAAkB,GAAG;;QACzB,IAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAA;QAEhC,IAAI,CAAC,QAAQ;YAAE,OAAM;QAErB,KAAK,CAAC,8BAA8B,CAAC,CAAA;QAErC,IAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,CAAA;QAC/B,IAAM,WAAW,GAAG,QAAQ,CAAA;QAE5B,IAAI,WAAW,IAAI,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,uJAAuJ,CAAC,CAAA;QAE9L,IAAI,WAAW,KAAK,UAAU,EAAE;YAC9B,IAAM,cAAc,GAAa,yBAAI,IAAI,KAAK,CAAC,WAAW,CAAC,UAAE,GAAG,CAAC,cAAM,OAAA,CAAC,EAAD,CAAC,CAAC,CAAA;YAEzE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACrC,IAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;gBAEtB,IAAI,CAAC,CAAC,KAAK,YAAY,WAAW,CAAC;oBAAE,SAAQ;gBAE7C,IAAM,IAAI,GAAG,sBAAsB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;gBAC9C,IAAA,KAAA,OAAc,0CAA0C,CAAC,cAAc,EAAE,IAAI,CAAC,IAAA,EAA7E,MAAM,QAAA,EAAE,CAAC,QAAoE,CAAA;gBAEpF,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAA;gBACjC,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,eAAQ,GAAG,GAAG,WAAW,GAAG,IAAI,iBAAO,iBAAiB,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,IAAI,kBAAQ,iBAAiB,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,QAAK,CAAA;gBAChK,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAA;gBACvB,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,eAAQ,GAAG,GAAG,WAAW,GAAG,MAAM,iBAAO,iBAAiB,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,MAAM,kBAAQ,iBAAiB,GAAG,MAAM,QAAK,CAAA;gBAC/J,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,UAAG,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,OAAI,CAAA;gBAE5D,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE;oBAC7B,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,MAAA,MAAA,YAAI,CAAC,IAAI,CAAC,KAAK,CAAC,0CAAE,MAAM,mCAAI,CAAC,CAAC,CAAA;iBACnG;gBAED,IAAI,kBAAkB,IAAI,MAAM,GAAG,IAAI,KAAK,WAAW,EAAE;oBACvD,IAAM,CAAC,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAA;oBAE1C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,EAAE,CAAC,EAAE,EAAE;wBACpC,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;qBACtB;iBACF;aACF;YAED,IAAM,CAAC,GAAG,eAAe,EAAE,CAAA;YAC3B,IAAM,CAAC,GAAG,gBAAgB,CAAC,cAAc,EAAE,WAAW,CAAC,CAAA;YAEvD,WAAW,CAAC,CAAC,CAAC,CAAA;YACd,YAAY,CAAC,CAAC,CAAC,CAAA;YAEf,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBAAE,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,UAAG,CAAC,OAAI,CAAA;YAE/C,IAAI,UAAU,EAAE;gBACd,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACrC,IAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;oBAEtB,IAAI,CAAC,CAAC,KAAK,YAAY,WAAW,CAAC;wBAAE,SAAQ;oBAE7C,IAAM,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;oBAEtC,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,UAAG,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAI,CAAA;iBAChE;aACF;SACF;aACI;YACH,IAAM,aAAa,GAAa,yBAAI,IAAI,KAAK,CAAC,WAAW,CAAC,UAAE,GAAG,CAAC,cAAM,OAAA,CAAC,EAAD,CAAC,CAAC,CAAA;YAExE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACrC,IAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;gBAEtB,IAAI,CAAC,CAAC,KAAK,YAAY,WAAW,CAAC;oBAAE,SAAQ;gBAE7C,IAAM,IAAI,GAAG,sBAAsB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;gBAC9C,IAAA,KAAA,OAAc,0CAA0C,CAAC,aAAa,EAAE,IAAI,CAAC,IAAA,EAA5E,MAAM,QAAA,EAAE,CAAC,QAAmE,CAAA;gBAEnF,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAA;gBACjC,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;gBACtB,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,eAAQ,GAAG,GAAG,WAAW,GAAG,IAAI,iBAAO,eAAe,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,IAAI,kBAAQ,eAAe,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,QAAK,CAAA;gBAC7J,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,eAAQ,GAAG,GAAG,WAAW,GAAG,MAAM,iBAAO,eAAe,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,MAAM,kBAAQ,eAAe,GAAG,MAAM,QAAK,CAAA;gBAC1J,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,UAAG,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,OAAI,CAAA;gBAE/D,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE;oBAC7B,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,GAAG,CAAC,MAAA,MAAA,YAAI,CAAC,IAAI,CAAC,KAAK,CAAC,0CAAE,KAAK,mCAAI,CAAC,CAAC,CAAA;iBACnG;gBAED,IAAI,kBAAkB,IAAI,MAAM,GAAG,IAAI,KAAK,WAAW,EAAE;oBACvD,IAAM,CAAC,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAA;oBAEzC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,EAAE,CAAC,EAAE,EAAE;wBACpC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;qBACrB;iBACF;aACF;YAED,IAAM,CAAC,GAAG,gBAAgB,EAAE,CAAA;YAC5B,IAAM,CAAC,GAAG,gBAAgB,CAAC,aAAa,EAAE,WAAW,CAAC,CAAA;YAEtD,YAAY,CAAC,CAAC,CAAC,CAAA;YACf,WAAW,CAAC,CAAC,CAAC,CAAA;YAEd,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBAAE,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,UAAG,CAAC,OAAI,CAAA;YAE9C,IAAI,UAAU,EAAE;gBACd,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACrC,IAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;oBAEtB,IAAI,CAAC,CAAC,KAAK,YAAY,WAAW,CAAC;wBAAE,SAAQ;oBAE7C,IAAM,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;oBAErC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,UAAG,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAI,CAAA;iBAChE;aACF;SACF;IACH,CAAC,CAAA;IAED,IAAA,yBAAe,EAAC,OAAO,EAAE;QACvB,QAAQ,EAAE,UAAA,OAAO;YACf,IAAM,SAAS,GAAG,eAAe,EAAE,CAAA;YACnC,IAAM,UAAU,GAAG,gBAAgB,EAAE,CAAA;YAErC,IAAI,QAAQ,KAAK,SAAS,IAAI,SAAS,KAAK,UAAU,IAAI,OAAO,CAAC,KAAK,KAAK,QAAQ,IAAI,OAAO,CAAC,MAAM,KAAK,SAAS,EAAE;gBACpH,kBAAkB,EAAE,CAAA;gBACpB,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;gBAC1B,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;aAC7B;QACH,CAAC;KACF,EAAE,CAAC,kBAAkB,EAAE,iBAAiB,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAA;IAElF,IAAA,iBAAS,EAAC;;QACR,IAAM,YAAY,GAAG,kBAAkB,CAAC,MAAA,OAAO,CAAC,OAAO,0CAAE,SAAS,CAAC,CAAA;QAEnE,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,kBAAkB,EAAE,CAAA;QAE1D,IAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAA;QAErC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,EAAE;YAClC,IAAM,GAAG,GAAG,YAAY,CAAC,CAAC,CAAC,CAAA;YAC3B,IAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAA;YACzB,KAAK,CAAC,GAAG,GAAG,GAAG,CAAA;YACf,KAAK,CAAC,MAAM,GAAG,cAAM,OAAA,kBAAkB,EAAE,EAApB,CAAoB,CAAA;SAC1C;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,IAAM,eAAe,GAAG,IAAA,yBAAe,EAAC;QACtC,IAAI,EAAE,IAAA,oBAAU,EAAC,WAAW,CAAC;KAC9B,CAAC,CAAA;IAEF,IAAM,WAAW,GAAG,IAAA,qBAAW,EAAC;QAC9B,IAAI,EAAE;YACJ,MAAM,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;YACtD,SAAS,EAAE,WAAW,KAAK,UAAU,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,UAAG,SAAS,OAAI,CAAC,CAAC,CAAC,EAAE;YAClF,QAAQ,EAAE,WAAW,KAAK,YAAY,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,UAAG,QAAQ,OAAI,CAAC,CAAC,CAAC,EAAE;YACjF,OAAO,EAAE,GAAG;YACZ,KAAK,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SACtD;KACF,CAAC,CAAA;IAEF,OAAO,CACL,kDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC;QAEtD,uCAAK,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI,IACvC,QAAQ,CACL,CACF,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF;;;;;;;;;;GAUG;AACH,SAAS,0CAA0C,CAAC,qBAA+B,EAAE,IAAY;IAC/F,IAAM,WAAW,GAAG,qBAAqB,CAAC,MAAM,CAAA;IAEhD,IAAI,UAAU,GAAG,GAAG,CAAA;IACpB,IAAI,SAAS,GAAG,QAAQ,CAAA;IAExB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,EAAE,CAAC,EAAE,EAAE;QACpC,IAAM,QAAM,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;QACvC,IAAM,SAAS,GAAG,QAAM,GAAG,SAAS,CAAA;QACpC,IAAM,iBAAiB,GAAG,CAAC,GAAG,IAAI,IAAI,WAAW,CAAA;QACjD,IAAI,2BAA2B,GAAG,IAAI,CAAA;QAEtC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE;YAC7B,IAAI,qBAAqB,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,QAAM,EAAE;gBACzC,2BAA2B,GAAG,KAAK,CAAA;aACpC;SACF;QAED,IAAI,SAAS,IAAI,iBAAiB,IAAI,2BAA2B,EAAE;YACjE,UAAU,GAAG,CAAC,CAAA;YACd,SAAS,GAAG,QAAM,CAAA;SACnB;KACF;IAED,IAAI,KAAK,CAAC,UAAU,CAAC,EAAE;QACrB,OAAO,CAAC,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC,CAAA;KAC1D;SACI;QACH,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,CAAA;KAC/B;AACH,CAAC;AAED;;;;;;;;;;;GAWG;AACH,SAAS,gBAAgB,CAAC,qBAA+B,EAAE,IAAa;IACtE,IAAI,GAAG,GAAG,qBAAqB,CAAA;IAE/B,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;QACvD,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;KAC9E;IAED,OAAO,GAAG,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,IAAI,EAAE,CAAC,IAAK,OAAA,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAvB,CAAuB,EAAE,CAAC,CAAC,CAAA;AACjE,CAAC;AAED;;;;;;;;GAQG;AACH,SAAS,sBAAsB,CAAC,OAAoB,EAAE,WAAmB;IACvE,IAAM,SAAS,GAAG,OAAO,CAAC,SAAS,CAAA;IAEnC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACzC,IAAM,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;QAEtB,IAAI,CAAC,CAAC,UAAU,CAAC,0BAA0B,CAAC,EAAE;YAC5C,IAAM,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,0BAA0B,EAAE,EAAE,CAAC,CAAC,CAAA;YAClE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;gBAAE,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,CAAA;SAClE;KACF;IAED,OAAO,CAAC,CAAA;AACV,CAAC;AAED;;;;;;GAMG;AACH,SAAS,kBAAkB,CAAC,UAAmB;;IAC7C,IAAI,CAAC,UAAU;QAAE,OAAO,EAAE,CAAA;IAE1B,IAAM,QAAQ,GAAG,6BAA6B,CAAA;IAC9C,IAAM,QAAQ,GAAG,4BAA4B,CAAA;IAC7C,IAAM,SAAS,GAAG,MAAA,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,mCAAI,EAAE,CAAA;IAElD,IAAM,GAAG,GAAa,EAAE,CAAA;IAExB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACzC,IAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;QACxB,IAAM,GAAG,GAAG,MAAA,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,0CAAG,CAAC,CAAC,CAAA;QAEpC,IAAI,CAAC,GAAG;YAAE,SAAQ;QAElB,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;KACd;IAED,OAAO,GAAG,CAAA;AACZ,CAAC","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useRef, useState, type HTMLAttributes } from 'react'\nimport { Rect } from 'spase'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport useDebug from './utils/useDebug'\n\nconst debug = useDebug('masonry')\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type MasonryGridProps = HTMLAttributes<HTMLDivElement> & {\n  areSectionsAligned?: boolean\n  horizontalSpacing?: number\n  isReversed?: boolean\n  orientation?: Orientation\n  sections?: number\n  verticalSpacing?: number\n}\n\nconst BASE_MODIFIER_CLASS_PREFIX = 'base-'\n\n/**\n * This is a React component that arranges all of its immediate children in a\n * masonry grid. Refrain from assigning CSS styles to it via `className` or\n * `style` property, though they are still handled if absolutely necessary.\n * Customize the grid via its supported properties. The grid can be in either\n * vertical or horizontal orientation. The length of every child element\n * *parallel to the direction of the orientation* is automatically set according\n * to the number of sections specified for the grid. This means that in an\n * horizontally oriented grid, the *width* of each child element is\n * automatically set, whereas in a vertically oriented grid the *height* of each\n * child element is automatically set. Additionally, the *number of sections*\n * corresponds to the maximum the number of child elements present in the\n * direction that is parallel to the orientation of the grid. Hence, in a\n * vertically oriented grid, *number of secitons* refers to the *number of\n * rows*, whereas in a horizontally oriented grid, *number of sections* refers\n * to the *number of columns*.\n */\nexport default forwardRef<HTMLDivElement, MasonryGridProps>(({\n  areSectionsAligned = false,\n  children,\n  className,\n  horizontalSpacing = 0,\n  isReversed = false,\n  orientation = 'vertical',\n  sections = 3,\n  verticalSpacing = 0,\n  ...props\n}, ref) => {\n  const bodyRef = useRef<HTMLDivElement>(null)\n\n  const [minWidth, setMinWidth] = useState(NaN)\n  const [minHeight, setMinHeight] = useState(NaN)\n  const [maxWidth, setMaxWidth] = useState(NaN)\n  const [maxHeight, setMaxHeight] = useState(NaN)\n\n  const getCurrentWidth = () => Rect.from(bodyRef.current)?.width ?? 0\n\n  const getCurrentHeight = () => Rect.from(bodyRef.current)?.height ?? 0\n\n  const repositionChildren = () => {\n    const rootNode = bodyRef.current\n\n    if (!rootNode) return\n\n    debug('Repositioning children... OK')\n\n    const nodes = rootNode.children\n    const numSections = sections\n\n    if (numSections <= 0) throw new Error('You must specifiy a minimum of 1 section(s) (a.k.a. row(s) for horizontal orientation, column(s) for vertical orientation) for a MasonryGrid instance')\n\n    if (orientation === 'vertical') {\n      const sectionHeights: number[] = [...new Array(numSections)].map(() => 0)\n\n      for (let i = 0; i < nodes.length; i++) {\n        const child = nodes[i]\n\n        if (!(child instanceof HTMLElement)) continue\n\n        const base = computeBaseFromElement(child, sections)\n        const [colIdx, y] = computeNextAvailableSectionAndLengthByBase(sectionHeights, base)\n\n        child.style.position = 'absolute'\n        child.style.width = `calc(${100 / numSections * base}% - ${horizontalSpacing * (numSections - 1) / numSections * base}px + ${horizontalSpacing * (base - 1)}px)`\n        child.style.height = ''\n        child.style.left = `calc(${100 / numSections * colIdx}% - ${horizontalSpacing * (numSections - 1) / numSections * colIdx}px + ${horizontalSpacing * colIdx}px)`\n        child.style.top = `${y + (y === 0 ? 0 : verticalSpacing)}px`\n\n        for (let j = 0; j < base; j++) {\n          sectionHeights[colIdx + j] = y + (y === 0 ? 0 : verticalSpacing) + (Rect.from(child)?.height ?? 0)\n        }\n\n        if (areSectionsAligned && colIdx + base === numSections) {\n          const m = computeMaxLength(sectionHeights)\n\n          for (let j = 0; j < numSections; j++) {\n            sectionHeights[j] = m\n          }\n        }\n      }\n\n      const w = getCurrentWidth()\n      const h = computeMaxLength(sectionHeights, numSections)\n\n      setMinWidth(w)\n      setMinHeight(h)\n\n      if (!isNaN(h)) rootNode.style.height = `${h}px`\n\n      if (isReversed) {\n        for (let i = 0; i < nodes.length; i++) {\n          const child = nodes[i]\n\n          if (!(child instanceof HTMLElement)) continue\n\n          const x = parseFloat(child.style.left)\n\n          child.style.left = `${w - x - parseFloat(child.style.width)}px`\n        }\n      }\n    }\n    else {\n      const sectionWidths: number[] = [...new Array(numSections)].map(() => 0)\n\n      for (let i = 0; i < nodes.length; i++) {\n        const child = nodes[i]\n\n        if (!(child instanceof HTMLElement)) continue\n\n        const base = computeBaseFromElement(child, sections)\n        const [rowIdx, x] = computeNextAvailableSectionAndLengthByBase(sectionWidths, base)\n\n        child.style.position = 'absolute'\n        child.style.width = ''\n        child.style.height = `calc(${100 / numSections * base}% - ${verticalSpacing * (numSections - 1) / numSections * base}px + ${verticalSpacing * (base - 1)}px)`\n        child.style.top = `calc(${100 / numSections * rowIdx}% - ${verticalSpacing * (numSections - 1) / numSections * rowIdx}px + ${verticalSpacing * rowIdx}px)`\n        child.style.left = `${x + (x === 0 ? 0 : horizontalSpacing)}px`\n\n        for (let j = 0; j < base; j++) {\n          sectionWidths[rowIdx + j] = x + (x === 0 ? 0 : horizontalSpacing) + (Rect.from(child)?.width ?? 0)\n        }\n\n        if (areSectionsAligned && rowIdx + base === numSections) {\n          const m = computeMaxLength(sectionWidths)\n\n          for (let j = 0; j < numSections; j++) {\n            sectionWidths[j] = m\n          }\n        }\n      }\n\n      const h = getCurrentHeight()\n      const w = computeMaxLength(sectionWidths, numSections)\n\n      setMinHeight(h)\n      setMinWidth(w)\n\n      if (!isNaN(w)) rootNode.style.width = `${w}px`\n\n      if (isReversed) {\n        for (let i = 0; i < nodes.length; i++) {\n          const child = nodes[i]\n\n          if (!(child instanceof HTMLElement)) continue\n\n          const y = parseFloat(child.style.top)\n\n          child.style.top = `${h - y - parseFloat(child.style.height)}px`\n        }\n      }\n    }\n  }\n\n  useResizeEffect(bodyRef, {\n    onResize: maxSize => {\n      const currWidth = getCurrentWidth()\n      const currHeight = getCurrentHeight()\n\n      if (minWidth !== currWidth || minHeight !== currHeight || maxSize.width !== maxWidth || maxSize.height !== maxHeight) {\n        repositionChildren()\n        setMaxWidth(maxSize.width)\n        setMaxHeight(maxSize.height)\n      }\n    },\n  }, [areSectionsAligned, horizontalSpacing, isReversed, sections, verticalSpacing])\n\n  useEffect(() => {\n    const imageSources = getAllImageSources(bodyRef.current?.innerHTML)\n\n    if (imageSources.length === 0) return repositionChildren()\n\n    const numImages = imageSources.length\n\n    for (let i = 0; i < numImages; i++) {\n      const src = imageSources[i]\n      const image = new Image()\n      image.src = src\n      image.onload = () => repositionChildren()\n    }\n  }, [children])\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation),\n  })\n\n  const fixedStyles = asStyleDict({\n    body: {\n      height: orientation === 'horizontal' ? '100%' : 'auto',\n      minHeight: orientation === 'vertical' && !isNaN(minHeight) ? `${minHeight}px` : '',\n      minWidth: orientation === 'horizontal' && !isNaN(minWidth) ? `${minWidth}px` : '',\n      padding: '0',\n      width: orientation === 'horizontal' ? 'auto' : '100%',\n    },\n  })\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n    >\n      <div ref={bodyRef} style={fixedStyles.body}>\n        {children}\n      </div>\n    </div>\n  )\n})\n\n/**\n * Computes the index and current length of the next available section for a\n * specific base value, based on a provided array of existing section lengths.\n *\n * @param currentSectionLengths An array of the current section lengths.\n * @param base The base value of the item to be inserted into the grid, and to\n *             be used to evaluate the next available section.\n *\n * @returns An array consiting of the computed section index and its to-be\n *          length if a new item were to be placed in it.\n */\nfunction computeNextAvailableSectionAndLengthByBase(currentSectionLengths: number[], base: number): [number, number] {\n  const numSections = currentSectionLengths.length\n\n  let sectionIdx = NaN\n  let minLength = Infinity\n\n  for (let i = 0; i < numSections; i++) {\n    const length = currentSectionLengths[i]\n    const isShorter = length < minLength\n    const isEligibleSection = i + base <= numSections\n    let hasRoomInSubsequentSections = true\n\n    for (let j = 1; j < base; j++) {\n      if (currentSectionLengths[i + j] > length) {\n        hasRoomInSubsequentSections = false\n      }\n    }\n\n    if (isShorter && isEligibleSection && hasRoomInSubsequentSections) {\n      sectionIdx = i\n      minLength = length\n    }\n  }\n\n  if (isNaN(sectionIdx)) {\n    return [0, computeMaxLength(currentSectionLengths, base)]\n  }\n  else {\n    return [sectionIdx, minLength]\n  }\n}\n\n/**\n * A helper function that computes the max section length of an array of section\n * lengths. Only the first n = `base` sections are inspected.\n *\n * @param currentSectionLengths An array of section lengths.\n * @param base The number representing the first n sections to inspect. Any\n *             non-numerical values will be ignored and return value will be\n *             based on all sections. A `base` value will be clamped between 1\n *             and the maximum length of the array of section lengths.\n *\n * @returns The max section length.\n */\nfunction computeMaxLength(currentSectionLengths: number[], base?: number): number {\n  let arr = currentSectionLengths\n\n  if (base !== undefined && base !== null && !isNaN(base)) {\n    arr = arr.slice(0, Math.max(1, Math.min(base, currentSectionLengths.length)))\n  }\n\n  return arr.reduce((out, curr, i) => curr > out ? curr : out, 0)\n}\n\n/**\n * Computes the base value of an element from its classes.\n *\n * @param element The HTML element.\n * @param numSections Total number of sections.\n *\n * @returns The computed base value that is clamped between 1 and max number of\n *          sections.\n */\nfunction computeBaseFromElement(element: HTMLElement, numSections: number): number {\n  const classList = element.classList\n\n  for (let i = 0; i < classList.length; i++) {\n    const c = classList[i]\n\n    if (c.startsWith(BASE_MODIFIER_CLASS_PREFIX)) {\n      const base = parseFloat(c.replace(BASE_MODIFIER_CLASS_PREFIX, ''))\n      if (!isNaN(base)) return Math.min(Math.max(base, 1), numSections)\n    }\n  }\n\n  return 1\n}\n\n/**\n * Scans an HTML string and returns all the image sources.\n *\n * @param htmlString The HTML string.\n *\n * @returns The image sources.\n */\nfunction getAllImageSources(htmlString?: string): string[] {\n  if (!htmlString) return []\n\n  const regexImg = /<img.*?src=(\"|')(.*?)(\"|')/g\n  const regexSrc = /<img.*?src=(\"|')(.*?)(\"|')/\n  const imageTags = htmlString.match(regexImg) ?? []\n\n  const out: string[] = []\n\n  for (let i = 0; i < imageTags.length; i++) {\n    const tag = imageTags[i]\n    const src = tag.match(regexSrc)?.[2]\n\n    if (!src) continue\n\n    out.push(src)\n  }\n\n  return out\n}\n"]}