etudes 0.56.0 → 0.59.0

package/lib/MasonryGrid.d.ts

@@ -1,104 +1,24 @@
-import { DirtyInfo } from 'dirty-dom';
-import { CSSProperties, PureComponent, ReactNode } from 'react';
+import { HTMLAttributes, PropsWithChildren } from 'react';
 import { Orientation } from './types';
-export interface Props {
-    className?: string;
-    style: CSSProperties;
-    children?: ReactNode | ReactNode[];
-    areSectionsAligned: boolean;
-    isReversed: boolean;
-    horizontalSpacing: number;
-    orientation: Orientation;
-    sections: number;
-    verticalSpacing: number;
-    height?: string;
-    width?: string;
-}
+export declare type Props = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
+    areSectionsAligned?: boolean;
+    horizontalSpacing?: number;
+    isReversed?: boolean;
+    orientation?: Orientation;
+    sections?: number;
+    verticalSpacing?: number;
+}>;
 /**
- * This is a React component that aligns all of its immediate children in a
- * masonry grid. Refrain from assigning CSS styles to it via `className` or
- * `style` property, although they are 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*
- * means maximum the number of child elements present in the direction that is
- * parallel to the orientation of the grid. This means that 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*.
  */
-declare class MasonryGrid extends PureComponent<Props> {
-    static defaultProps: Props;
-    static BASE_MODIFIER_CLASS_PREFIX: string;
-    private nodeRefs;
-    private minWidth;
-    private maxWidth;
-    private minHeight;
-    private maxHeight;
-    private updateDelegate?;
-    get width(): number;
-    get height(): number;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Props): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-    update(info: DirtyInfo): void;
-    /**
-     * Repositions all the child elements of the grid.
-     */
-    private repositionChildren;
-    /**
-     * 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.
-     */
-    private computeNextAvailableSectionAndLengthByBase;
-    /**
-     * 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.
-     */
-    private computeMaxLength;
-    /**
-     * Computes the base value of an element from its classes.
-     *
-     * @param element - The HTML element.
-     *
-     * @returns The computed base value that is clamped between 1 and max number
-     *          of sections.
-     */
-    private computeBaseFromElement;
-    /**
-     * Reinitializes the update delegate. If there are images within the body
-     * of the masonry grid, the initialization will be deferred until all images
-     * are loaded.
-     */
-    private reconfigureUpdateDelegate;
-    /**
-     * Scans an HTML string and returns all the image sources.
-     *
-     * @param htmlString The HTML string.
-     *
-     * @returns The image sources.
-     */
-    private getAllImageSources;
-}
-export default MasonryGrid;
+export default function MasonryGrid({ areSectionsAligned, children, horizontalSpacing, isReversed, orientation, sections, style, verticalSpacing, ...props }: Props): JSX.Element;

package/lib/MasonryGrid.js

@@ -1,19 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -52,6 +37,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -81,128 +77,179 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var dirty_dom_1 = require("dirty-dom");
 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 BASE_MODIFIER_CLASS_PREFIX = 'base-';
 /**
- * This is a React component that aligns all of its immediate children in a
- * masonry grid. Refrain from assigning CSS styles to it via `className` or
- * `style` property, although they are 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*
- * means maximum the number of child elements present in the direction that is
- * parallel to the orientation of the grid. This means that 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*.
+ * 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.
  */
-var MasonryGrid = /** @class */ (function (_super) {
-    __extends(MasonryGrid, _super);
-    function MasonryGrid() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.nodeRefs = {
-            root: (0, react_1.createRef)(),
-        };
-        _this.minWidth = NaN;
-        _this.maxWidth = NaN;
-        _this.minHeight = NaN;
-        _this.maxHeight = NaN;
-        _this.updateDelegate = undefined;
-        return _this;
-    }
-    Object.defineProperty(MasonryGrid.prototype, "width", {
-        get: function () {
-            var _a, _b;
-            return (_b = (_a = spase_1.Rect.from(this.nodeRefs.root.current)) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MasonryGrid.prototype, "height", {
-        get: function () {
-            var _a, _b;
-            return (_b = (_a = spase_1.Rect.from(this.nodeRefs.root.current)) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    MasonryGrid.prototype.componentDidMount = function () {
-        this.reconfigureUpdateDelegate();
-    };
-    MasonryGrid.prototype.componentDidUpdate = function (prevProps) {
-        this.reconfigureUpdateDelegate();
-    };
-    MasonryGrid.prototype.componentWillUnmount = function () {
-        var _a;
-        (_a = this.updateDelegate) === null || _a === void 0 ? void 0 : _a.deinit();
-    };
-    MasonryGrid.prototype.render = function () {
-        var _a, _b;
-        return (react_1.default.createElement(StyledRoot, { ref: this.nodeRefs.root, className: this.props.className, orientation: this.props.orientation, style: __assign(__assign({}, this.props.style), { height: (_a = this.props.height) !== null && _a !== void 0 ? _a : ((this.props.orientation === 'vertical' && !isNaN(this.minHeight)) ? "".concat(this.minHeight, "px") : ''), width: (_b = this.props.width) !== null && _b !== void 0 ? _b : ((this.props.orientation === 'horizontal' && !isNaN(this.minWidth)) ? "".concat(this.minWidth, "px") : ''), flex: '0 0 auto', padding: '0' }) }, this.props.children));
-    };
-    MasonryGrid.prototype.update = function (info) {
-        var _a = info, _b = dirty_dom_1.DirtyType.SIZE, dirtySize = _a[_b];
-        if (dirtySize) {
-            if ((this.minWidth !== this.width) || (this.minHeight !== this.height) || (dirtySize.maxSize.width !== this.maxWidth) || dirtySize.maxSize.height !== this.maxHeight) {
-                this.repositionChildren();
-                this.maxWidth = dirtySize.maxSize.width;
-                this.maxHeight = dirtySize.maxSize.height;
+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;
             }
         }
-    };
-    /**
-     * Repositions all the child elements of the grid.
-     */
-    MasonryGrid.prototype.repositionChildren = function () {
+        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*.
+ */
+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; };
+    var repositionChildren = function () {
         var _a, _b, _c, _d;
-        var rootNode = this.nodeRefs.root.current;
+        var rootNode = rootRef.current;
         if (!rootNode)
             return;
         debug('Repositioning children... OK');
         var children = rootNode.children;
-        var numSections = this.props.sections;
+        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 (this.props.orientation === 'vertical') {
+        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];
                 if (!(child instanceof HTMLElement))
                     continue;
-                var base = this.computeBaseFromElement(child);
-                var _e = __read(this.computeNextAvailableSectionAndLengthByBase(sectionHeights, base), 2), colIdx = _e[0], y = _e[1];
+                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((this.props.horizontalSpacing * (numSections - 1) / numSections) * base, "px + ").concat(this.props.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((this.props.horizontalSpacing * (numSections - 1) / numSections) * colIdx, "px + ").concat(this.props.horizontalSpacing * colIdx, "px)");
-                child.style.top = "".concat(y + (y === 0 ? 0 : this.props.verticalSpacing), "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 : this.props.verticalSpacing) + ((_b = (_a = spase_1.Rect.from(child)) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0);
+                    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 (this.props.areSectionsAligned && ((colIdx + base) === numSections)) {
-                    var m = this.computeMaxLength(sectionHeights);
+                if (areSectionsAligned && ((colIdx + base) === numSections)) {
+                    var m = computeMaxLength(sectionHeights);
                     for (var j = 0; j < numSections; j++) {
                         sectionHeights[j] = m;
                     }
                 }
             }
-            this.minWidth = this.width;
-            this.minHeight = this.computeMaxLength(sectionHeights, numSections);
-            rootNode.style.height = "".concat(this.minHeight, "px");
-            if (this.props.isReversed) {
+            var w = getCurrentWidth();
+            var h = computeMaxLength(sectionHeights, numSections);
+            setMinWidth(w);
+            setMinHeight(h);
+            if (!isNaN(h))
+                rootNode.style.height = "".concat(h, "px");
+            if (isReversed) {
                 for (var i = 0; i < children.length; i++) {
                     var child = children[i];
                     if (!(child instanceof HTMLElement))
                         continue;
                     var x = parseFloat(child.style.left);
-                    child.style.left = "".concat(this.width - x - parseFloat(child.style.width), "px");
+                    child.style.left = "".concat(w - x - parseFloat(child.style.width), "px");
                 }
             }
         }
@@ -212,185 +259,66 @@ var MasonryGrid = /** @class */ (function (_super) {
                 var child = children[i];
                 if (!(child instanceof HTMLElement))
                     continue;
-                var base = this.computeBaseFromElement(child);
-                var _f = __read(this.computeNextAvailableSectionAndLengthByBase(sectionWidths, base), 2), rowIdx = _f[0], x = _f[1];
+                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((this.props.verticalSpacing * (numSections - 1) / numSections) * base, "px + ").concat(this.props.verticalSpacing * (base - 1), "px)");
-                child.style.top = "calc(".concat(100 / numSections * rowIdx, "% - ").concat((this.props.verticalSpacing * (numSections - 1) / numSections) * rowIdx, "px + ").concat(this.props.verticalSpacing * rowIdx, "px)");
-                child.style.left = "".concat(x + (x === 0 ? 0 : this.props.horizontalSpacing), "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 : this.props.horizontalSpacing) + ((_d = (_c = spase_1.Rect.from(child)) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : 0);
+                    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 (this.props.areSectionsAligned && ((rowIdx + base) === numSections)) {
-                    var m = this.computeMaxLength(sectionWidths);
+                if (areSectionsAligned && ((rowIdx + base) === numSections)) {
+                    var m = computeMaxLength(sectionWidths);
                     for (var j = 0; j < numSections; j++) {
                         sectionWidths[j] = m;
                     }
                 }
             }
-            this.minHeight = this.height;
-            this.minWidth = this.computeMaxLength(sectionWidths, numSections);
-            if (!isNaN(this.minWidth))
-                rootNode.style.width = "".concat(this.minWidth, "px");
-            if (this.props.isReversed) {
+            var h = getCurrentHeight();
+            var w = computeMaxLength(sectionWidths, numSections);
+            setMinHeight(h);
+            setMinWidth(w);
+            if (!isNaN(w))
+                rootNode.style.width = "".concat(w, "px");
+            if (isReversed) {
                 for (var i = 0; i < children.length; i++) {
                     var child = children[i];
                     if (!(child instanceof HTMLElement))
                         continue;
                     var y = parseFloat(child.style.top);
-                    child.style.top = "".concat(this.height - y - parseFloat(child.style.height), "px");
+                    child.style.top = "".concat(h - y - parseFloat(child.style.height), "px");
                 }
             }
         }
     };
-    /**
-     * 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.
-     */
-    MasonryGrid.prototype.computeNextAvailableSectionAndLengthByBase = function (currentSectionLengths, base) {
-        if (currentSectionLengths.length !== this.props.sections)
-            throw new Error('Unmatched number of provided section lengths');
-        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;
+    (0, useResizeEffect_1.default)(rootRef, {
+        onResize: function (maxSize) {
+            var currWidth = getCurrentWidth();
+            var currHeight = getCurrentHeight();
+            if ((minWidth !== currWidth) || (minHeight !== currHeight) || (maxSize.width !== maxWidth) || maxSize.height !== maxHeight) {
+                repositionChildren();
+                setMaxWidth(maxSize.width);
+                setMaxHeight(maxSize.height);
             }
-        }
-        if (isNaN(sectionIdx)) {
-            return [0, this.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.
-     */
-    MasonryGrid.prototype.computeMaxLength = function (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.
-     *
-     * @returns The computed base value that is clamped between 1 and max number
-     *          of sections.
-     */
-    MasonryGrid.prototype.computeBaseFromElement = function (element) {
-        var classList = element.classList;
-        for (var i = 0; i < classList.length; i++) {
-            var c = classList[i];
-            if (c.startsWith(MasonryGrid.BASE_MODIFIER_CLASS_PREFIX)) {
-                var base = parseFloat(c.replace(MasonryGrid.BASE_MODIFIER_CLASS_PREFIX, ''));
-                if (!isNaN(base))
-                    return Math.min(Math.max(base, 1), this.props.sections);
-            }
-        }
-        return 1;
-    };
-    /**
-     * Reinitializes the update delegate. If there are images within the body
-     * of the masonry grid, the initialization will be deferred until all images
-     * are loaded.
-     */
-    MasonryGrid.prototype.reconfigureUpdateDelegate = function () {
+        },
+    }, [areSectionsAligned, horizontalSpacing, isReversed, sections, verticalSpacing]);
+    (0, react_1.useEffect)(function () {
         var _a;
-        var _this = this;
-        var _b, _c, _d;
-        (_b = this.updateDelegate) === null || _b === void 0 ? void 0 : _b.deinit();
-        this.updateDelegate = new dirty_dom_1.UpdateDelegate(function (info) { return _this.update(info); }, (_a = {},
-            _a[dirty_dom_1.EventType.RESIZE] = true,
-            _a));
-        var imageSources = this.getAllImageSources((_c = this.nodeRefs.root.current) === null || _c === void 0 ? void 0 : _c.innerHTML);
-        if (imageSources.length > 0) {
-            var loaded_1 = 0;
-            var numImages_1 = imageSources.length;
-            for (var i = 0; i < numImages_1; i++) {
-                var src = imageSources[i];
-                var image = new Image();
-                image.src = src;
-                image.onload = function () {
-                    var _a;
-                    if (++loaded_1 === numImages_1)
-                        (_a = _this.updateDelegate) === null || _a === void 0 ? void 0 : _a.init();
-                };
-            }
-        }
-        else {
-            (_d = this.updateDelegate) === null || _d === void 0 ? void 0 : _d.init();
-        }
-    };
-    /**
-     * Scans an HTML string and returns all the image sources.
-     *
-     * @param htmlString The HTML string.
-     *
-     * @returns The image sources.
-     */
-    MasonryGrid.prototype.getAllImageSources = function (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);
+        var imageSources = getAllImageSources((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML);
+        if (imageSources.length === 0)
+            return;
+        var numImages = imageSources.length;
+        for (var i = 0; i < numImages; i++) {
+            var src = imageSources[i];
+            var image = new Image();
+            image.src = src;
+            image.onload = function () { return repositionChildren(); };
         }
-        return out;
-    };
-    MasonryGrid.defaultProps = {
-        areSectionsAligned: false,
-        horizontalSpacing: 0,
-        isReversed: false,
-        orientation: 'vertical',
-        sections: 3,
-        style: {},
-        verticalSpacing: 0,
-    };
-    MasonryGrid.BASE_MODIFIER_CLASS_PREFIX = 'base-';
-    return MasonryGrid;
-}(react_1.PureComponent));
+    }, []);
+    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));
+}
 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;

package/lib/MasonryGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"MasonryGrid.js","sourceRoot":"/","sources":["MasonryGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DirtyInfo, DirtyType, EventType, UpdateDelegate } from 'dirty-dom'\nimport React, { createRef, CSSProperties, PureComponent, ReactNode } from 'react'\nimport { Rect } from 'spase'\nimport styled from 'styled-components'\nimport { Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:masonry-grid') : () => {}\n\nexport interface Props {\n  className?: string\n  style: CSSProperties\n  children?: ReactNode | ReactNode[]\n  areSectionsAligned: boolean\n  isReversed: boolean\n  horizontalSpacing: number\n  orientation: Orientation\n  sections: number\n  verticalSpacing: number\n  height?: string\n  width?: string\n}\n\n/**\n * This is a React component that aligns all of its immediate children in a\n * masonry grid. Refrain from assigning CSS styles to it via `className` or\n * `style` property, although they are 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 * means maximum the number of child elements present in the direction that is\n * parallel to the orientation of the grid. This means that in a vertically\n * oriented grid, *number of secitons* refers to the *number of rows*, whereas\n * in a horizontally oriented grid, *number of sections* refers to the *number\n * of columns*.\n */\nclass MasonryGrid extends PureComponent<Props> {\n  static defaultProps: Props = {\n    areSectionsAligned: false,\n    horizontalSpacing: 0,\n    isReversed: false,\n    orientation: 'vertical',\n    sections: 3,\n    style: {},\n    verticalSpacing: 0,\n  }\n\n  static BASE_MODIFIER_CLASS_PREFIX = 'base-'\n\n  private nodeRefs = {\n    root: createRef<HTMLDivElement>(),\n  }\n\n  private minWidth = NaN\n  private maxWidth = NaN\n  private minHeight = NaN\n  private maxHeight = NaN\n\n  private updateDelegate?: UpdateDelegate = undefined\n\n  get width(): number {\n    return Rect.from(this.nodeRefs.root.current)?.width ?? 0\n  }\n\n  get height(): number {\n    return Rect.from(this.nodeRefs.root.current)?.height ?? 0\n  }\n\n  componentDidMount() {\n    this.reconfigureUpdateDelegate()\n  }\n\n  componentDidUpdate(prevProps: Props) {\n    this.reconfigureUpdateDelegate()\n  }\n\n  componentWillUnmount() {\n    this.updateDelegate?.deinit()\n  }\n\n  render() {\n    return (\n      <StyledRoot\n        ref={this.nodeRefs.root}\n        className={this.props.className}\n        orientation={this.props.orientation}\n        style={{\n          ...this.props.style,\n          height: this.props.height ?? ((this.props.orientation === 'vertical' && !isNaN(this.minHeight)) ? `${this.minHeight}px` : ''),\n          width: this.props.width ?? ((this.props.orientation === 'horizontal' && !isNaN(this.minWidth)) ? `${this.minWidth}px` : ''),\n          flex: '0 0 auto',\n          padding: '0',\n        }}\n      >\n        {this.props.children}\n      </StyledRoot>\n    )\n  }\n\n  update(info: DirtyInfo) {\n    const { [DirtyType.SIZE]: dirtySize } = info\n\n    if (dirtySize) {\n      if ((this.minWidth !== this.width) || (this.minHeight !== this.height) || (dirtySize.maxSize.width !== this.maxWidth) || dirtySize.maxSize.height !== this.maxHeight) {\n        this.repositionChildren()\n        this.maxWidth = dirtySize.maxSize.width\n        this.maxHeight = dirtySize.maxSize.height\n      }\n    }\n  }\n\n  /**\n   * Repositions all the child elements of the grid.\n   */\n  private repositionChildren() {\n    const rootNode = this.nodeRefs.root.current\n\n    if (!rootNode) return\n\n    debug('Repositioning children... OK')\n\n    const children = rootNode.children\n    const numSections = this.props.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 (this.props.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 = this.computeBaseFromElement(child)\n        const [colIdx, y] = this.computeNextAvailableSectionAndLengthByBase(sectionHeights, base)\n\n        child.style.position = 'absolute'\n        child.style.width = `calc(${100 / numSections * base}% - ${(this.props.horizontalSpacing * (numSections - 1) / numSections) * base}px + ${this.props.horizontalSpacing * (base - 1)}px)`\n        child.style.height = ''\n        child.style.left = `calc(${100 / numSections * colIdx}% - ${(this.props.horizontalSpacing * (numSections - 1) / numSections) * colIdx}px + ${this.props.horizontalSpacing * colIdx}px)`\n        child.style.top = `${y + (y === 0 ? 0 : this.props.verticalSpacing)}px`\n\n        for (let j = 0; j < base; j++) {\n          sectionHeights[colIdx + j] = y + (y === 0 ? 0 : this.props.verticalSpacing) + (Rect.from(child)?.height ?? 0)\n        }\n\n        if (this.props.areSectionsAligned && ((colIdx + base) === numSections)) {\n          const m = this.computeMaxLength(sectionHeights)\n\n          for (let j = 0; j < numSections; j++) {\n            sectionHeights[j] = m\n          }\n        }\n      }\n\n      this.minWidth = this.width\n      this.minHeight = this.computeMaxLength(sectionHeights, numSections)\n      rootNode.style.height = `${this.minHeight}px`\n\n      if (this.props.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 = `${this.width - 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 = this.computeBaseFromElement(child)\n        const [rowIdx, x] = this.computeNextAvailableSectionAndLengthByBase(sectionWidths, base)\n\n        child.style.position = 'absolute'\n        child.style.width = ''\n        child.style.height = `calc(${100 / numSections * base}% - ${(this.props.verticalSpacing * (numSections - 1) / numSections) * base}px + ${this.props.verticalSpacing * (base - 1)}px)`\n        child.style.top = `calc(${100 / numSections * rowIdx}% - ${(this.props.verticalSpacing * (numSections - 1) / numSections) * rowIdx}px + ${this.props.verticalSpacing * rowIdx}px)`\n        child.style.left = `${x + (x === 0 ? 0 : this.props.horizontalSpacing)}px`\n\n        for (let j = 0; j < base; j++) {\n          sectionWidths[rowIdx + j] = x + (x === 0 ? 0 : this.props.horizontalSpacing) + (Rect.from(child)?.width ?? 0)\n        }\n\n        if (this.props.areSectionsAligned && ((rowIdx + base) === numSections)) {\n          const m = this.computeMaxLength(sectionWidths)\n\n          for (let j = 0; j < numSections; j++) {\n            sectionWidths[j] = m\n          }\n        }\n      }\n\n      this.minHeight = this.height\n      this.minWidth = this.computeMaxLength(sectionWidths, numSections)\n      if (!isNaN(this.minWidth)) rootNode.style.width = `${this.minWidth}px`\n\n      if (this.props.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 = `${this.height - y - parseFloat(child.style.height)}px`\n        }\n      }\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\n   *               to 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   */\n  private computeNextAvailableSectionAndLengthByBase(currentSectionLengths: number[], base: number): [number, number] {\n    if (currentSectionLengths.length !== this.props.sections) throw new Error('Unmatched number of provided section lengths')\n\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, this.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\n   * section 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.\n   *               Any non-numerical values will be ignored and return value\n   *               will be based on all sections. A `base` value will be clamped\n   *               between 1 and the maximum length of the array of section\n   *               lengths.\n   *\n   * @returns The max section length.\n   */\n  private 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   *\n   * @returns The computed base value that is clamped between 1 and max number\n   *          of sections.\n   */\n  private computeBaseFromElement(element: HTMLElement): 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(MasonryGrid.BASE_MODIFIER_CLASS_PREFIX)) {\n        const base = parseFloat(c.replace(MasonryGrid.BASE_MODIFIER_CLASS_PREFIX, ''))\n        if (!isNaN(base)) return Math.min(Math.max(base, 1), this.props.sections)\n      }\n    }\n\n    return 1\n  }\n\n  /**\n   * Reinitializes the update delegate. If there are images within the body\n   * of the masonry grid, the initialization will be deferred until all images\n   * are loaded.\n   */\n  private reconfigureUpdateDelegate() {\n    this.updateDelegate?.deinit()\n\n    this.updateDelegate = new UpdateDelegate(info => this.update(info), {\n      [EventType.RESIZE]: true,\n    })\n\n    const imageSources = this.getAllImageSources(this.nodeRefs.root.current?.innerHTML)\n\n    if (imageSources.length > 0) {\n      let loaded = 0\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 = () => {\n          if (++loaded === numImages) this.updateDelegate?.init()\n        }\n      }\n    }\n    else {\n      this.updateDelegate?.init()\n    }\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   */\n  private 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\nexport default MasonryGrid\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":"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","sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, 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> & PropsWithChildren<{\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\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  }, [])\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"]}

package/lib/hooks/useSearchParamState.d.ts

@@ -2,22 +2,30 @@ import { Dispatch, SetStateAction } from 'react';
 export declare type Options<T> = {
     /**
      * Function for transforming the search param value to the value of the mapped state.
+     *
+     * @param value - The search param value. `undefined` means the value is unavailable.
+     *
+     * @returns The equivalent state value.
      */
-    mapSearchParamToState?: (value: string | null) => NonNullable<T> | null;
+    mapSearchParamToState?: (value?: string) => T;
     /**
      * Function for transforming the value of the mapped state to the search param value.
+     *
+     * @param state - The state value.
+     *
+     * @returns The equivalent search param value.
      */
-    mapStateToSearchParam?: (state: T | null) => string | null;
+    mapStateToSearchParam?: (state: T) => string | undefined;
 };
 /**
  * Hook for mapping a search param to a state. Whenever the value of the target search param
  * changes, the mapped state will change as well, and vice versa.
  *
  * @param param - The search param key.
- * @param initialState - The initial value of the state.
+ * @param defaultValue - The default value of the state.
  * @param options - See {@link Options}.
  *
  * @returns A tuple consisting of a stateful value representing the current value of the mapped
  *          state and a function that updates it.
  */
-export default function useSearchParamState<T>(param: string, initialState?: T | null, { mapSearchParamToState, mapStateToSearchParam }?: Options<T>): [NonNullable<T> | null, Dispatch<SetStateAction<NonNullable<T> | null>>];
+export default function useSearchParamState<T>(param: string, defaultValue: T, { mapSearchParamToState, mapStateToSearchParam }?: Options<T>): [T, Dispatch<SetStateAction<T>>];

package/lib/hooks/useSearchParamState.js

@@ -24,20 +24,21 @@ var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:ho
  * changes, the mapped state will change as well, and vice versa.
  *
  * @param param - The search param key.
- * @param initialState - The initial value of the state.
+ * @param defaultValue - The default value of the state.
  * @param options - See {@link Options}.
  *
  * @returns A tuple consisting of a stateful value representing the current value of the mapped
  *          state and a function that updates it.
  */
-function useSearchParamState(param, initialState, _a) {
-    var _b = _a === void 0 ? {} : _a, mapSearchParamToState = _b.mapSearchParamToState, mapStateToSearchParam = _b.mapStateToSearchParam;
-    var _mapSearchParamToState = function (value, initialState) {
+function useSearchParamState(param, defaultValue, _a) {
+    var _b;
+    var _c = _a === void 0 ? {} : _a, mapSearchParamToState = _c.mapSearchParamToState, mapStateToSearchParam = _c.mapStateToSearchParam;
+    var _mapSearchParamToState = function (value, defaultValue) {
         if (mapSearchParamToState) {
             return mapSearchParamToState(value);
         }
-        else if (value === null) {
-            return initialState !== null && initialState !== void 0 ? initialState : null;
+        else if (!value) {
+            return defaultValue;
         }
         else {
             return value;
@@ -47,23 +48,23 @@ function useSearchParamState(param, initialState, _a) {
         if (mapStateToSearchParam) {
             return mapStateToSearchParam(state);
         }
-        else if (state === null) {
-            return null;
+        else if (state === defaultValue) {
+            return undefined;
         }
         else {
             return "".concat(state);
         }
     };
-    var _c = __read((0, react_router_dom_1.useSearchParams)(), 2), searchParams = _c[0], setSearchParams = _c[1];
-    var currentState = _mapSearchParamToState(searchParams.get(param), initialState);
-    var _d = __read((0, react_1.useState)(currentState), 2), state = _d[0], setState = _d[1];
-    debug('Using search param state...', 'OK', "param=".concat(param, ", initialState=").concat(currentState));
+    var _d = __read((0, react_router_dom_1.useSearchParams)(), 2), searchParams = _d[0], setSearchParams = _d[1];
+    var currentState = _mapSearchParamToState((_b = searchParams.get(param)) !== null && _b !== void 0 ? _b : undefined, defaultValue);
+    var _e = __read((0, react_1.useState)(currentState), 2), state = _e[0], setState = _e[1];
+    debug('Using search param state...', 'OK', "param=".concat(param, ", defaultValue=").concat(currentState));
     (0, react_1.useEffect)(function () {
         var value = searchParams.get(param);
         var newValue = _mapStateToSearchParam(state);
         if (newValue === value)
             return;
-        if (newValue === null) {
+        if (!newValue) {
             searchParams.delete(param);
         }
         else {

package/lib/hooks/useSearchParamState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSearchParamState.js","sourceRoot":"/","sources":["hooks/useSearchParamState.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,+BAAqE;AACrE,qDAAkD;AAElD,IAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAO,CAAC,CAAA;AAclG;;;;;;;;;;GAUG;AACH,SAAwB,mBAAmB,CAAI,KAAa,EAAE,YAAuB,EAAE,EAAiE;QAAjE,qBAA+D,EAAE,KAAA,EAA/D,qBAAqB,2BAAA,EAAE,qBAAqB,2BAAA;IACnI,IAAM,sBAAsB,GAAG,UAAC,KAAoB,EAAE,YAAuB;QAC3E,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,KAAK,KAAK,IAAI,EAAE;YACvB,OAAO,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,IAAI,CAAA;SAC5B;aACI;YACH,OAAO,KAAkC,CAAA;SAC1C;IACH,CAAC,CAAA;IAED,IAAM,sBAAsB,GAAG,UAAC,KAAe;QAC7C,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,KAAK,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAA;SACZ;aACI;YACH,OAAO,UAAG,KAAK,CAAE,CAAA;SAClB;IACH,CAAC,CAAA;IAEK,IAAA,KAAA,OAAkC,IAAA,kCAAe,GAAE,IAAA,EAAlD,YAAY,QAAA,EAAE,eAAe,QAAqB,CAAA;IACzD,IAAM,YAAY,GAAG,sBAAsB,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,CAAA;IAC5E,IAAA,KAAA,OAAoB,IAAA,gBAAQ,EAAC,YAAY,CAAC,IAAA,EAAzC,KAAK,QAAA,EAAE,QAAQ,QAA0B,CAAA;IAEhD,KAAK,CAAC,6BAA6B,EAAE,IAAI,EAAE,gBAAS,KAAK,4BAAkB,YAAY,CAAE,CAAC,CAAA;IAE1F,IAAA,iBAAS,EAAC;QACR,IAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QACrC,IAAM,QAAQ,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAA;QAE9C,IAAI,QAAQ,KAAK,KAAK;YAAE,OAAM;QAE9B,IAAI,QAAQ,KAAK,IAAI,EAAE;YACrB,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;SAC3B;aACI;YACH,YAAY,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;SAClC;QAED,KAAK,CAAC,0BAA0B,EAAE,IAAI,EAAE,gBAAS,KAAK,wBAAc,KAAK,wBAAc,QAAQ,CAAE,CAAC,CAAA;QAElG,eAAe,CAAC,YAAY,CAAC,CAAA;IAC/B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;AAC1B,CAAC;AAlDD,sCAkDC","sourcesContent":["import { Dispatch, SetStateAction, useEffect, useState } from 'react'\nimport { useSearchParams } from 'react-router-dom'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:hooks') : () => {}\n\nexport type Options<T> = {\n  /**\n   * Function for transforming the search param value to the value of the mapped state.\n   */\n  mapSearchParamToState?: (value: string | null) => NonNullable<T> | null\n\n  /**\n   * Function for transforming the value of the mapped state to the search param value.\n   */\n  mapStateToSearchParam?: (state: T | null) => string | null\n}\n\n/**\n * Hook for mapping a search param to a state. Whenever the value of the target search param\n * changes, the mapped state will change as well, and vice versa.\n *\n * @param param - The search param key.\n * @param initialState - The initial value of the state.\n * @param options - See {@link Options}.\n *\n * @returns A tuple consisting of a stateful value representing the current value of the mapped\n *          state and a function that updates it.\n */\nexport default function useSearchParamState<T>(param: string, initialState?: T | null, { mapSearchParamToState, mapStateToSearchParam }: Options<T> = {}): [NonNullable<T> | null, Dispatch<SetStateAction<NonNullable<T> | null>>] {\n  const _mapSearchParamToState = (value: string | null, initialState?: T | null): NonNullable<T> | null => {\n    if (mapSearchParamToState) {\n      return mapSearchParamToState(value)\n    }\n    else if (value === null) {\n      return initialState ?? null\n    }\n    else {\n      return value as unknown as NonNullable<T>\n    }\n  }\n\n  const _mapStateToSearchParam = (state: T | null): string | null => {\n    if (mapStateToSearchParam) {\n      return mapStateToSearchParam(state)\n    }\n    else if (state === null) {\n      return null\n    }\n    else {\n      return `${state}`\n    }\n  }\n\n  const [searchParams, setSearchParams] = useSearchParams()\n  const currentState = _mapSearchParamToState(searchParams.get(param), initialState)\n  const [state, setState] = useState(currentState)\n\n  debug('Using search param state...', 'OK', `param=${param}, initialState=${currentState}`)\n\n  useEffect(() => {\n    const value = searchParams.get(param)\n    const newValue = _mapStateToSearchParam(state)\n\n    if (newValue === value) return\n\n    if (newValue === null) {\n      searchParams.delete(param)\n    }\n    else {\n      searchParams.set(param, newValue)\n    }\n\n    debug('Handling state change...', 'OK', `state=${state}, oldValue=${value}, newValue=${newValue}`)\n\n    setSearchParams(searchParams)\n  }, [state])\n\n  return [state, setState]\n}\n"]}
+{"version":3,"file":"useSearchParamState.js","sourceRoot":"/","sources":["hooks/useSearchParamState.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,+BAAqE;AACrE,qDAAkD;AAElD,IAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAO,CAAC,CAAA;AAsBlG;;;;;;;;;;GAUG;AACH,SAAwB,mBAAmB,CAAI,KAAa,EAAE,YAAe,EAAE,EAAiE;;QAAjE,qBAA+D,EAAE,KAAA,EAA/D,qBAAqB,2BAAA,EAAE,qBAAqB,2BAAA;IAC3H,IAAM,sBAAsB,GAAG,UAAC,KAAyB,EAAE,YAAe;QACxE,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,CAAC,KAAK,EAAE;YACf,OAAO,YAAY,CAAA;SACpB;aACI;YACH,OAAO,KAAkC,CAAA;SAC1C;IACH,CAAC,CAAA;IAED,IAAM,sBAAsB,GAAG,UAAC,KAAQ;QACtC,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,KAAK,KAAK,YAAY,EAAE;YAC/B,OAAO,SAAS,CAAA;SACjB;aACI;YACH,OAAO,UAAG,KAAK,CAAE,CAAA;SAClB;IACH,CAAC,CAAA;IAEK,IAAA,KAAA,OAAkC,IAAA,kCAAe,GAAE,IAAA,EAAlD,YAAY,QAAA,EAAE,eAAe,QAAqB,CAAA;IACzD,IAAM,YAAY,GAAG,sBAAsB,CAAC,MAAA,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,mCAAI,SAAS,EAAE,YAAY,CAAC,CAAA;IACzF,IAAA,KAAA,OAAoB,IAAA,gBAAQ,EAAC,YAAY,CAAC,IAAA,EAAzC,KAAK,QAAA,EAAE,QAAQ,QAA0B,CAAA;IAEhD,KAAK,CAAC,6BAA6B,EAAE,IAAI,EAAE,gBAAS,KAAK,4BAAkB,YAAY,CAAE,CAAC,CAAA;IAE1F,IAAA,iBAAS,EAAC;QACR,IAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QACrC,IAAM,QAAQ,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAA;QAE9C,IAAI,QAAQ,KAAK,KAAK;YAAE,OAAM;QAE9B,IAAI,CAAC,QAAQ,EAAE;YACb,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;SAC3B;aACI;YACH,YAAY,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;SAClC;QAED,KAAK,CAAC,0BAA0B,EAAE,IAAI,EAAE,gBAAS,KAAK,wBAAc,KAAK,wBAAc,QAAQ,CAAE,CAAC,CAAA;QAElG,eAAe,CAAC,YAAY,CAAC,CAAA;IAC/B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;AAC1B,CAAC;AAlDD,sCAkDC","sourcesContent":["import { Dispatch, SetStateAction, useEffect, useState } from 'react'\nimport { useSearchParams } from 'react-router-dom'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:hooks') : () => {}\n\nexport type Options<T> = {\n  /**\n   * Function for transforming the search param value to the value of the mapped state.\n   *\n   * @param value - The search param value. `undefined` means the value is unavailable.\n   *\n   * @returns The equivalent state value.\n   */\n  mapSearchParamToState?: (value?: string) => T\n\n  /**\n   * Function for transforming the value of the mapped state to the search param value.\n   *\n   * @param state - The state value.\n   *\n   * @returns The equivalent search param value.\n   */\n  mapStateToSearchParam?: (state: T) => string | undefined\n}\n\n/**\n * Hook for mapping a search param to a state. Whenever the value of the target search param\n * changes, the mapped state will change as well, and vice versa.\n *\n * @param param - The search param key.\n * @param defaultValue - The default value of the state.\n * @param options - See {@link Options}.\n *\n * @returns A tuple consisting of a stateful value representing the current value of the mapped\n *          state and a function that updates it.\n */\nexport default function useSearchParamState<T>(param: string, defaultValue: T, { mapSearchParamToState, mapStateToSearchParam }: Options<T> = {}): [T, Dispatch<SetStateAction<T>>] {\n  const _mapSearchParamToState = (value: string | undefined, defaultValue: T): T => {\n    if (mapSearchParamToState) {\n      return mapSearchParamToState(value)\n    }\n    else if (!value) {\n      return defaultValue\n    }\n    else {\n      return value as unknown as NonNullable<T>\n    }\n  }\n\n  const _mapStateToSearchParam = (state: T): string | undefined => {\n    if (mapStateToSearchParam) {\n      return mapStateToSearchParam(state)\n    }\n    else if (state === defaultValue) {\n      return undefined\n    }\n    else {\n      return `${state}`\n    }\n  }\n\n  const [searchParams, setSearchParams] = useSearchParams()\n  const currentState = _mapSearchParamToState(searchParams.get(param) ?? undefined, defaultValue)\n  const [state, setState] = useState(currentState)\n\n  debug('Using search param state...', 'OK', `param=${param}, defaultValue=${currentState}`)\n\n  useEffect(() => {\n    const value = searchParams.get(param)\n    const newValue = _mapStateToSearchParam(state)\n\n    if (newValue === value) return\n\n    if (!newValue) {\n      searchParams.delete(param)\n    }\n    else {\n      searchParams.set(param, newValue)\n    }\n\n    debug('Handling state change...', 'OK', `state=${state}, oldValue=${value}, newValue=${newValue}`)\n\n    setSearchParams(searchParams)\n  }, [state])\n\n  return [state, setState]\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etudes",
-  "version": "0.56.0",
+  "version": "0.59.0",
   "description": "A study of styled React components",
   "main": "lib",
   "scripts": {
@@ -29,31 +29,31 @@
     "lib"
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.5",
+    "@babel/core": "^7.17.8",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-decorators": "^7.17.2",
+    "@babel/plugin-proposal-decorators": "^7.17.8",
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@babel/runtime": "^7.17.2",
+    "@babel/runtime": "^7.17.8",
     "@types/debug": "^4.1.7",
     "@types/html-webpack-plugin": "^3.2.6",
-    "@types/lodash": "^4.14.179",
-    "@types/react": "^17.0.39",
+    "@types/lodash": "^4.14.180",
+    "@types/react": "^17.0.40",
     "@types/react-dom": "^17.0.13",
     "@types/react-transition-group": "^4.4.4",
     "@types/styled-components": "^5.1.24",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^5.13.0",
-    "@typescript-eslint/parser": "^5.13.0",
+    "@typescript-eslint/eslint-plugin": "^5.15.0",
+    "@typescript-eslint/parser": "^5.15.0",
     "babel-loader": "^8.2.3",
     "babel-plugin-styled-components": "^2.0.6",
     "concurrently": "^7.0.0",
     "cross-env": "^7.0.3",
-    "debug": "^4.3.3",
-    "eslint": "^8.10.0",
+    "debug": "^4.3.4",
+    "eslint": "^8.11.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "promptu": "^5.7.0",
@@ -65,8 +65,8 @@
     "react-router-dom": "^6.2.2",
     "rimraf": "^3.0.2",
     "styled-components": "^5.3.3",
-    "ts-loader": "^9.2.7",
-    "ts-node": "^10.6.0",
+    "ts-loader": "^9.2.8",
+    "ts-node": "^10.7.0",
     "typescript": "^4.6.2",
     "url-loader": "^4.1.1",
     "wait-on": "^6.0.1",