etudes 1.2.0 → 2.1.0

package/lib/MasonryGrid.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -77,160 +73,68 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
 var spase_1 = require("spase");
-var styled_components_1 = __importDefault(require("styled-components"));
 var useResizeEffect_1 = __importDefault(require("./hooks/useResizeEffect"));
-var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:masonry-grid') : function () { };
+var asClassNameDict_1 = __importDefault(require("./utils/asClassNameDict"));
+var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
+var useDebug_1 = __importDefault(require("./utils/useDebug"));
+var debug = (0, useDebug_1.default)('masonry');
 var BASE_MODIFIER_CLASS_PREFIX = 'base-';
 /**
- * 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.
- *
- * @returns An array consiting of the computed section index and its to-be length if a new item were
- *          to be placed in it.
- */
-function computeNextAvailableSectionAndLengthByBase(currentSectionLengths, base) {
-    var numSections = currentSectionLengths.length;
-    var sectionIdx = NaN;
-    var minLength = Infinity;
-    for (var i = 0; i < numSections; i++) {
-        var length_1 = currentSectionLengths[i];
-        var isShorter = length_1 < minLength;
-        var isEligibleSection = (i + base) <= numSections;
-        var hasRoomInSubsequentSections = true;
-        for (var j = 1; j < base; j++) {
-            if (currentSectionLengths[i + j] > length_1) {
-                hasRoomInSubsequentSections = false;
-            }
-        }
-        if (isShorter && isEligibleSection && hasRoomInSubsequentSections) {
-            sectionIdx = i;
-            minLength = length_1;
-        }
-    }
-    if (isNaN(sectionIdx)) {
-        return [0, computeMaxLength(currentSectionLengths, base)];
-    }
-    else {
-        return [sectionIdx, minLength];
-    }
-}
-/**
- * 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.
- *
- * @returns The max section length.
- */
-function computeMaxLength(currentSectionLengths, base) {
-    var arr = currentSectionLengths;
-    if (base !== undefined && base !== null && !isNaN(base)) {
-        arr = arr.slice(0, Math.max(1, Math.min(base, currentSectionLengths.length)));
-    }
-    return arr.reduce(function (out, curr, i) { return (curr > out) ? curr : out; }, 0);
-}
-/**
- * Computes the base value of an element from its classes.
- *
- * @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.
- */
-function computeBaseFromElement(element, numSections) {
-    var classList = element.classList;
-    for (var i = 0; i < classList.length; i++) {
-        var c = classList[i];
-        if (c.startsWith(BASE_MODIFIER_CLASS_PREFIX)) {
-            var base = parseFloat(c.replace(BASE_MODIFIER_CLASS_PREFIX, ''));
-            if (!isNaN(base))
-                return Math.min(Math.max(base, 1), numSections);
-        }
-    }
-    return 1;
-}
-/**
- * Scans an HTML string and returns all the image sources.
- *
- * @param htmlString The HTML string.
- *
- * @returns The image sources.
- */
-function getAllImageSources(htmlString) {
-    var _a, _b;
-    if (!htmlString)
-        return [];
-    var regexImg = /<img.*?src=("|')(.*?)("|')/g;
-    var regexSrc = /<img.*?src=("|')(.*?)("|')/;
-    var imageTags = (_a = htmlString.match(regexImg)) !== null && _a !== void 0 ? _a : [];
-    var out = [];
-    for (var i = 0; i < imageTags.length; i++) {
-        var tag = imageTags[i];
-        var src = (_b = tag.match(regexSrc)) === null || _b === void 0 ? void 0 : _b[2];
-        if (!src)
-            continue;
-        out.push(src);
-    }
-    return out;
-}
-/**
- * This is a React component that arranges all of its immediate children in a masonry grid. Refrain
- * from assigning CSS styles to it via `className` or `style` property, though they are still
- * handled if absolutely necessary. Customize the grid via its supported properties. The grid can be
- * in either vertical or horizontal orientation. The length of every child element *parallel to the
- * direction of the orientation* is automatically set according to the number of sections specified
- * for the grid. This means that in an horizontally oriented grid, the *width* of each child element
- * is automatically set, whereas in a vertically oriented grid the *height* of each child element is
- * automatically set. Additionally, the *number of sections* corresponds to the maximum the number
- * of child elements present in the direction that is parallel to the orientation of the grid.
- * Hence, in a vertically oriented grid, *number of secitons* refers to the *number of rows*,
- * whereas in a horizontally oriented grid, *number of sections* refers to the *number of columns*.
+ * This is a React component that arranges all of its immediate children in a
+ * masonry grid. Refrain from assigning CSS styles to it via `className` or
+ * `style` property, though they are still handled if absolutely necessary.
+ * Customize the grid via its supported properties. The grid can be in either
+ * vertical or horizontal orientation. The length of every child element
+ * *parallel to the direction of the orientation* is automatically set according
+ * to the number of sections specified for the grid. This means that in an
+ * horizontally oriented grid, the *width* of each child element is
+ * automatically set, whereas in a vertically oriented grid the *height* of each
+ * child element is automatically set. Additionally, the *number of sections*
+ * corresponds to the maximum the number of child elements present in the
+ * direction that is parallel to the orientation of the grid. Hence, in a
+ * vertically oriented grid, *number of secitons* refers to the *number of
+ * rows*, whereas in a horizontally oriented grid, *number of sections* refers
+ * to the *number of columns*.
  */
-function MasonryGrid(_a) {
-    var _b = _a.areSectionsAligned, areSectionsAligned = _b === void 0 ? false : _b, children = _a.children, _c = _a.horizontalSpacing, horizontalSpacing = _c === void 0 ? 0 : _c, _d = _a.isReversed, isReversed = _d === void 0 ? false : _d, _e = _a.orientation, orientation = _e === void 0 ? 'vertical' : _e, _f = _a.sections, sections = _f === void 0 ? 3 : _f, _g = _a.style, style = _g === void 0 ? {} : _g, _h = _a.verticalSpacing, verticalSpacing = _h === void 0 ? 0 : _h, props = __rest(_a, ["areSectionsAligned", "children", "horizontalSpacing", "isReversed", "orientation", "sections", "style", "verticalSpacing"]);
-    var rootRef = (0, react_1.useRef)(null);
-    var _j = __read((0, react_1.useState)(NaN), 2), minWidth = _j[0], setMinWidth = _j[1];
-    var _k = __read((0, react_1.useState)(NaN), 2), minHeight = _k[0], setMinHeight = _k[1];
-    var _l = __read((0, react_1.useState)(NaN), 2), maxWidth = _l[0], setMaxWidth = _l[1];
-    var _m = __read((0, react_1.useState)(NaN), 2), maxHeight = _m[0], setMaxHeight = _m[1];
-    var getCurrentWidth = function () { var _a, _b; return (_b = (_a = spase_1.Rect.from(rootRef.current)) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0; };
-    var getCurrentHeight = function () { var _a, _b; return (_b = (_a = spase_1.Rect.from(rootRef.current)) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0; };
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b = _a.areSectionsAligned, areSectionsAligned = _b === void 0 ? false : _b, children = _a.children, className = _a.className, _c = _a.horizontalSpacing, horizontalSpacing = _c === void 0 ? 0 : _c, _d = _a.isReversed, isReversed = _d === void 0 ? false : _d, _e = _a.orientation, orientation = _e === void 0 ? 'vertical' : _e, _f = _a.sections, sections = _f === void 0 ? 3 : _f, _g = _a.verticalSpacing, verticalSpacing = _g === void 0 ? 0 : _g, props = __rest(_a, ["areSectionsAligned", "children", "className", "horizontalSpacing", "isReversed", "orientation", "sections", "verticalSpacing"]);
+    var bodyRef = (0, react_1.useRef)(null);
+    var _h = __read((0, react_1.useState)(NaN), 2), minWidth = _h[0], setMinWidth = _h[1];
+    var _j = __read((0, react_1.useState)(NaN), 2), minHeight = _j[0], setMinHeight = _j[1];
+    var _k = __read((0, react_1.useState)(NaN), 2), maxWidth = _k[0], setMaxWidth = _k[1];
+    var _l = __read((0, react_1.useState)(NaN), 2), maxHeight = _l[0], setMaxHeight = _l[1];
+    var getCurrentWidth = function () { var _a, _b; return (_b = (_a = spase_1.Rect.from(bodyRef.current)) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0; };
+    var getCurrentHeight = function () { var _a, _b; return (_b = (_a = spase_1.Rect.from(bodyRef.current)) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0; };
     var repositionChildren = function () {
         var _a, _b, _c, _d;
-        var rootNode = rootRef.current;
+        var rootNode = bodyRef.current;
         if (!rootNode)
             return;
         debug('Repositioning children... OK');
-        var children = rootNode.children;
+        var nodes = rootNode.children;
         var numSections = sections;
         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');
         if (orientation === 'vertical') {
             var sectionHeights = __spreadArray([], __read(new Array(numSections)), false).map(function () { return 0; });
-            for (var i = 0; i < children.length; i++) {
-                var child = children[i];
+            for (var i = 0; i < nodes.length; i++) {
+                var child = nodes[i];
                 if (!(child instanceof HTMLElement))
                     continue;
                 var base = computeBaseFromElement(child, sections);
                 var _e = __read(computeNextAvailableSectionAndLengthByBase(sectionHeights, base), 2), colIdx = _e[0], y = _e[1];
                 child.style.position = 'absolute';
-                child.style.width = "calc(".concat(100 / numSections * base, "% - ").concat((horizontalSpacing * (numSections - 1) / numSections) * base, "px + ").concat(horizontalSpacing * (base - 1), "px)");
+                child.style.width = "calc(".concat(100 / numSections * base, "% - ").concat(horizontalSpacing * (numSections - 1) / numSections * base, "px + ").concat(horizontalSpacing * (base - 1), "px)");
                 child.style.height = '';
-                child.style.left = "calc(".concat(100 / numSections * colIdx, "% - ").concat((horizontalSpacing * (numSections - 1) / numSections) * colIdx, "px + ").concat(horizontalSpacing * colIdx, "px)");
+                child.style.left = "calc(".concat(100 / numSections * colIdx, "% - ").concat(horizontalSpacing * (numSections - 1) / numSections * colIdx, "px + ").concat(horizontalSpacing * colIdx, "px)");
                 child.style.top = "".concat(y + (y === 0 ? 0 : verticalSpacing), "px");
                 for (var j = 0; j < base; j++) {
                     sectionHeights[colIdx + j] = y + (y === 0 ? 0 : verticalSpacing) + ((_b = (_a = spase_1.Rect.from(child)) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0);
                 }
-                if (areSectionsAligned && ((colIdx + base) === numSections)) {
+                if (areSectionsAligned && colIdx + base === numSections) {
                     var m = computeMaxLength(sectionHeights);
                     for (var j = 0; j < numSections; j++) {
                         sectionHeights[j] = m;
@@ -244,8 +148,8 @@ function MasonryGrid(_a) {
             if (!isNaN(h))
                 rootNode.style.height = "".concat(h, "px");
             if (isReversed) {
-                for (var i = 0; i < children.length; i++) {
-                    var child = children[i];
+                for (var i = 0; i < nodes.length; i++) {
+                    var child = nodes[i];
                     if (!(child instanceof HTMLElement))
                         continue;
                     var x = parseFloat(child.style.left);
@@ -255,21 +159,21 @@ function MasonryGrid(_a) {
         }
         else {
             var sectionWidths = __spreadArray([], __read(new Array(numSections)), false).map(function () { return 0; });
-            for (var i = 0; i < children.length; i++) {
-                var child = children[i];
+            for (var i = 0; i < nodes.length; i++) {
+                var child = nodes[i];
                 if (!(child instanceof HTMLElement))
                     continue;
                 var base = computeBaseFromElement(child, sections);
                 var _f = __read(computeNextAvailableSectionAndLengthByBase(sectionWidths, base), 2), rowIdx = _f[0], x = _f[1];
                 child.style.position = 'absolute';
                 child.style.width = '';
-                child.style.height = "calc(".concat(100 / numSections * base, "% - ").concat((verticalSpacing * (numSections - 1) / numSections) * base, "px + ").concat(verticalSpacing * (base - 1), "px)");
-                child.style.top = "calc(".concat(100 / numSections * rowIdx, "% - ").concat((verticalSpacing * (numSections - 1) / numSections) * rowIdx, "px + ").concat(verticalSpacing * rowIdx, "px)");
+                child.style.height = "calc(".concat(100 / numSections * base, "% - ").concat(verticalSpacing * (numSections - 1) / numSections * base, "px + ").concat(verticalSpacing * (base - 1), "px)");
+                child.style.top = "calc(".concat(100 / numSections * rowIdx, "% - ").concat(verticalSpacing * (numSections - 1) / numSections * rowIdx, "px + ").concat(verticalSpacing * rowIdx, "px)");
                 child.style.left = "".concat(x + (x === 0 ? 0 : horizontalSpacing), "px");
                 for (var j = 0; j < base; j++) {
                     sectionWidths[rowIdx + j] = x + (x === 0 ? 0 : horizontalSpacing) + ((_d = (_c = spase_1.Rect.from(child)) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : 0);
                 }
-                if (areSectionsAligned && ((rowIdx + base) === numSections)) {
+                if (areSectionsAligned && rowIdx + base === numSections) {
                     var m = computeMaxLength(sectionWidths);
                     for (var j = 0; j < numSections; j++) {
                         sectionWidths[j] = m;
@@ -283,8 +187,8 @@ function MasonryGrid(_a) {
             if (!isNaN(w))
                 rootNode.style.width = "".concat(w, "px");
             if (isReversed) {
-                for (var i = 0; i < children.length; i++) {
-                    var child = children[i];
+                for (var i = 0; i < nodes.length; i++) {
+                    var child = nodes[i];
                     if (!(child instanceof HTMLElement))
                         continue;
                     var y = parseFloat(child.style.top);
@@ -293,11 +197,11 @@ function MasonryGrid(_a) {
             }
         }
     };
-    (0, useResizeEffect_1.default)(rootRef, {
+    (0, useResizeEffect_1.default)(bodyRef, {
         onResize: function (maxSize) {
             var currWidth = getCurrentWidth();
             var currHeight = getCurrentHeight();
-            if ((minWidth !== currWidth) || (minHeight !== currHeight) || (maxSize.width !== maxWidth) || maxSize.height !== maxHeight) {
+            if (minWidth !== currWidth || minHeight !== currHeight || maxSize.width !== maxWidth || maxSize.height !== maxHeight) {
                 repositionChildren();
                 setMaxWidth(maxSize.width);
                 setMaxHeight(maxSize.height);
@@ -306,7 +210,7 @@ function MasonryGrid(_a) {
     }, [areSectionsAligned, horizontalSpacing, isReversed, sections, verticalSpacing]);
     (0, react_1.useEffect)(function () {
         var _a;
-        var imageSources = getAllImageSources((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML);
+        var imageSources = getAllImageSources((_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML);
         if (imageSources.length === 0)
             return repositionChildren();
         var numImages = imageSources.length;
@@ -317,9 +221,120 @@ function MasonryGrid(_a) {
             image.onload = function () { return repositionChildren(); };
         }
     }, [children]);
-    return (react_1.default.createElement(StyledRoot, __assign({}, props, { ref: rootRef, orientation: orientation, style: __assign(__assign({}, style), { flex: '0 0 auto', minHeight: ((orientation === 'vertical' && !isNaN(minHeight)) ? "".concat(minHeight, "px") : ''), minWidth: ((orientation === 'horizontal' && !isNaN(minWidth)) ? "".concat(minWidth, "px") : ''), padding: '0' }) }), children));
+    var fixedClassNames = (0, asClassNameDict_1.default)({
+        root: (0, classnames_1.default)(orientation),
+    });
+    var fixedStyles = (0, asStyleDict_1.default)({
+        body: {
+            height: orientation === 'horizontal' ? '100%' : 'auto',
+            minHeight: orientation === 'vertical' && !isNaN(minHeight) ? "".concat(minHeight, "px") : '',
+            minWidth: orientation === 'horizontal' && !isNaN(minWidth) ? "".concat(minWidth, "px") : '',
+            padding: '0',
+            width: orientation === 'horizontal' ? 'auto' : '100%',
+        },
+    });
+    return (react_1.default.createElement("div", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root) }),
+        react_1.default.createElement("div", { ref: bodyRef, style: fixedStyles.body }, children)));
+});
+/**
+ * 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.
+ *
+ * @returns An array consiting of the computed section index and its to-be
+ *          length if a new item were to be placed in it.
+ */
+function computeNextAvailableSectionAndLengthByBase(currentSectionLengths, base) {
+    var numSections = currentSectionLengths.length;
+    var sectionIdx = NaN;
+    var minLength = Infinity;
+    for (var i = 0; i < numSections; i++) {
+        var length_1 = currentSectionLengths[i];
+        var isShorter = length_1 < minLength;
+        var isEligibleSection = i + base <= numSections;
+        var hasRoomInSubsequentSections = true;
+        for (var j = 1; j < base; j++) {
+            if (currentSectionLengths[i + j] > length_1) {
+                hasRoomInSubsequentSections = false;
+            }
+        }
+        if (isShorter && isEligibleSection && hasRoomInSubsequentSections) {
+            sectionIdx = i;
+            minLength = length_1;
+        }
+    }
+    if (isNaN(sectionIdx)) {
+        return [0, computeMaxLength(currentSectionLengths, base)];
+    }
+    else {
+        return [sectionIdx, minLength];
+    }
+}
+/**
+ * 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.
+ *
+ * @returns The max section length.
+ */
+function computeMaxLength(currentSectionLengths, base) {
+    var arr = currentSectionLengths;
+    if (base !== undefined && base !== null && !isNaN(base)) {
+        arr = arr.slice(0, Math.max(1, Math.min(base, currentSectionLengths.length)));
+    }
+    return arr.reduce(function (out, curr, i) { return curr > out ? curr : out; }, 0);
+}
+/**
+ * Computes the base value of an element from its classes.
+ *
+ * @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.
+ */
+function computeBaseFromElement(element, numSections) {
+    var classList = element.classList;
+    for (var i = 0; i < classList.length; i++) {
+        var c = classList[i];
+        if (c.startsWith(BASE_MODIFIER_CLASS_PREFIX)) {
+            var base = parseFloat(c.replace(BASE_MODIFIER_CLASS_PREFIX, ''));
+            if (!isNaN(base))
+                return Math.min(Math.max(base, 1), numSections);
+        }
+    }
+    return 1;
+}
+/**
+ * Scans an HTML string and returns all the image sources.
+ *
+ * @param htmlString The HTML string.
+ *
+ * @returns The image sources.
+ */
+function getAllImageSources(htmlString) {
+    var _a, _b;
+    if (!htmlString)
+        return [];
+    var regexImg = /<img.*?src=("|')(.*?)("|')/g;
+    var regexSrc = /<img.*?src=("|')(.*?)("|')/;
+    var imageTags = (_a = htmlString.match(regexImg)) !== null && _a !== void 0 ? _a : [];
+    var out = [];
+    for (var i = 0; i < imageTags.length; i++) {
+        var tag = imageTags[i];
+        var src = (_b = tag.match(regexSrc)) === null || _b === void 0 ? void 0 : _b[2];
+        if (!src)
+            continue;
+        out.push(src);
+    }
+    return out;
 }
-exports.default = MasonryGrid;
-var StyledRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n  height: ", ";\n  position: relative;\n  width: ", ";\n"], ["\n  box-sizing: border-box;\n  display: block;\n  height: ", ";\n  position: relative;\n  width: ", ";\n"])), function (props) { return props.orientation === 'vertical' ? 'auto' : '100%'; }, function (props) { return props.orientation === 'horizontal' ? 'auto' : '100%'; });
-var templateObject_1;
 //# sourceMappingURL=MasonryGrid.js.map

package/lib/MasonryGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"MasonryGrid.js","sourceRoot":"/","sources":["MasonryGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled from 'styled-components'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport { Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:masonry-grid') : () => {}\n\nexport type Props = 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 * Computes the index and current length of the next available section for a specific base value,\n * 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 be used to evaluate\n *               the next available section.\n *\n * @returns An array consiting of the computed section index and its to-be length if a new item were\n *          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 lengths. Only the\n * 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 non-numerical values\n *               will be ignored and return value will be based on all sections. A `base` value will\n *               be clamped between 1 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 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\n/**\n * This is a React component that arranges all of its immediate children in a masonry grid. Refrain\n * from assigning CSS styles to it via `className` or `style` property, though they are still\n * handled if absolutely necessary. Customize the grid via its supported properties. The grid can be\n * in either vertical or horizontal orientation. The length of every child element *parallel to the\n * direction of the orientation* is automatically set according to the number of sections specified\n * for the grid. This means that in an horizontally oriented grid, the *width* of each child element\n * is automatically set, whereas in a vertically oriented grid the *height* of each child element is\n * automatically set. Additionally, the *number of sections* corresponds to the maximum the number\n * of child elements present in the direction that is parallel to the orientation of the grid.\n * Hence, in a vertically oriented grid, *number of secitons* refers to the *number of rows*,\n * whereas in a horizontally oriented grid, *number of sections* refers to the *number of columns*.\n */\nexport default function MasonryGrid({\n  areSectionsAligned = false,\n  children,\n  horizontalSpacing= 0,\n  isReversed = false,\n  orientation = 'vertical',\n  sections = 3,\n  style = {},\n  verticalSpacing = 0,\n  ...props\n}: Props) {\n  const rootRef = 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(rootRef.current)?.width ?? 0\n\n  const getCurrentHeight = () => Rect.from(rootRef.current)?.height ?? 0\n\n  const repositionChildren = () => {\n    const rootNode = rootRef.current\n\n    if (!rootNode) return\n\n    debug('Repositioning children... OK')\n\n    const children = 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 < children.length; i++) {\n        const child = children[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 < children.length; i++) {\n          const child = children[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 < children.length; i++) {\n        const child = children[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 < children.length; i++) {\n          const child = children[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(rootRef, {\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(rootRef.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  return (\n    <StyledRoot\n      {...props}\n      ref={rootRef}\n      orientation={orientation}\n      style={{\n        ...style,\n        flex: '0 0 auto',\n        minHeight: ((orientation === 'vertical' && !isNaN(minHeight)) ? `${minHeight}px` : ''),\n        minWidth: ((orientation === 'horizontal' && !isNaN(minWidth)) ? `${minWidth}px` : ''),\n        padding: '0',\n      }}\n    >\n      {children}\n    </StyledRoot>\n  )\n}\n\nconst StyledRoot = styled.div<{\n  orientation: Props['orientation']\n}>`\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.orientation === 'vertical' ? 'auto' : '100%'};\n  position: relative;\n  width: ${props => props.orientation === 'horizontal' ? 'auto' : '100%'};\n`\n"]}
+{"version":3,"file":"MasonryGrid.js","sourceRoot":"/","sources":["MasonryGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAAsF;AACtF,+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, 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"]}