masonry-snap-grid-layout 1.0.11 → 1.0.13

package/README.md

@@ -8,10 +8,13 @@
 
 A performant masonry grid layout library with smooth animations, customizable gutter, columns, and dynamic item content.
 
-![Masonry Grid Demo](https://i.imgur.com/JQZ4L7C.gif)
 
 ---
+## Demo Video
 
+[![Watch the video](https://img.youtube.com/vi/mHK_6z9WEWs/hqdefault.jpg)](https://www.youtube.com/watch?v=mHK_6z9WEWs)
+    
+---
 ## 🚀 Features
 
 - **Dynamic Columns & Gutter**: Automatically adapts to container width

package/dist/MasonrySnapGridLayout-CPmdhc_q.d.cts

@@ -0,0 +1,123 @@
+/**
+ * CSS class names used by MasonrySnapGridLayout for styling.
+ */
+interface MasonrySnapGridLayoutClassNames {
+    /** CSS class applied to the container element. */
+    container?: string;
+    /** CSS class applied to each item element. */
+    item?: string;
+}
+/**
+ * Options for configuring a MasonrySnapGridLayout instance.
+ *
+ * @template T - The type of items being rendered in the masonry grid.
+ */
+interface MasonrySnapGridLayoutOptions<T = unknown> {
+    /**
+     * Space between grid items in pixels.
+     * @default 16
+     */
+    gutter?: number;
+    /**
+     * Minimum width (in pixels) of each column before layout will add another column.
+     * @default 250
+     */
+    minColWidth?: number;
+    /**
+     * Whether to animate item movement when the layout changes.
+     * @default true
+     */
+    animate?: boolean;
+    /**
+     * Duration of the item movement animation (in milliseconds).
+     * Only applies if `animate` is true.
+     * @default 400
+     */
+    transitionDuration?: number;
+    /**
+     * Data items to be rendered in the grid.
+     */
+    items: T[];
+    /**
+     * Function that renders a single item into a DOM element.
+     *
+     * @param item - The data item to render.
+     * @returns A DOM element representing the rendered item.
+     */
+    renderItem: (item: T) => HTMLElement;
+    /**
+     * Optional custom class names for the container and items.
+     */
+    classNames?: MasonrySnapGridLayoutClassNames;
+}
+/**
+ * Ref object shape for accessing a MasonrySnapGridLayout instance
+ * when used inside a React component.
+ */
+interface MasonrySnapGridRef {
+    /** Reference to the underlying MasonrySnapGridLayout instance. */
+    layout: MasonrySnapGridLayout | null;
+}
+
+/**
+ * MasonrySnapGridLayout
+ *
+ * A lightweight, generic TypeScript implementation of a responsive Masonry-style grid layout
+ * with optional animations, custom rendering, and automatic re-layout on resize.
+ *
+ * @template T - The type of data items that will be rendered into grid elements.
+ */
+declare class MasonrySnapGridLayout<T = any> {
+    /** The container element where the Masonry grid will be rendered. */
+    private readonly container;
+    /** Fully resolved options object with defaults merged. */
+    private readonly options;
+    /** A reference to all grid item elements currently rendered. */
+    private items;
+    /** Tracks the current heights of each column to position new items. */
+    private columnHeights;
+    /** Observes container resizing to trigger re-layout. */
+    private resizeObserver;
+    /** Stores requestAnimationFrame ID for layout updates to prevent redundant calls. */
+    private rafId;
+    /**
+     * Creates a new MasonrySnapGridLayout instance.
+     *
+     * @param container - The HTML element that will act as the grid container.
+     * @param options - Partial configuration object for layout behavior and rendering.
+     */
+    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>);
+    /**
+     * Renders the provided items into the container.
+     * Clears previous items and re-builds DOM structure.
+     */
+    private renderItems;
+    /**
+     * Sets up a ResizeObserver to re-calculate layout when container size changes.
+     */
+    private setupResizeObserver;
+    /**
+     * Calculates item positions and updates their transforms.
+     * Also adjusts the container height to fit all items.
+     */
+    private updateLayout;
+    /**
+     * Finds the index of the column with the smallest total height.
+     *
+     * @returns Index of the shortest column.
+     */
+    private findShortestColumn;
+    /**
+     * Replaces current items with a new set and re-renders the layout.
+     *
+     * @param newItems - New set of data items to render.
+     */
+    updateItems(newItems: T[]): void;
+    /**
+     * Cleans up event listeners, observers, and DOM modifications.
+     * This should be called before discarding the instance.
+     */
+    destroy(): void;
+}
+
+export { MasonrySnapGridLayout as M, type MasonrySnapGridLayoutOptions as a, type MasonrySnapGridRef as b };

package/dist/MasonrySnapGridLayout-CPmdhc_q.d.ts

@@ -0,0 +1,123 @@
+/**
+ * CSS class names used by MasonrySnapGridLayout for styling.
+ */
+interface MasonrySnapGridLayoutClassNames {
+    /** CSS class applied to the container element. */
+    container?: string;
+    /** CSS class applied to each item element. */
+    item?: string;
+}
+/**
+ * Options for configuring a MasonrySnapGridLayout instance.
+ *
+ * @template T - The type of items being rendered in the masonry grid.
+ */
+interface MasonrySnapGridLayoutOptions<T = unknown> {
+    /**
+     * Space between grid items in pixels.
+     * @default 16
+     */
+    gutter?: number;
+    /**
+     * Minimum width (in pixels) of each column before layout will add another column.
+     * @default 250
+     */
+    minColWidth?: number;
+    /**
+     * Whether to animate item movement when the layout changes.
+     * @default true
+     */
+    animate?: boolean;
+    /**
+     * Duration of the item movement animation (in milliseconds).
+     * Only applies if `animate` is true.
+     * @default 400
+     */
+    transitionDuration?: number;
+    /**
+     * Data items to be rendered in the grid.
+     */
+    items: T[];
+    /**
+     * Function that renders a single item into a DOM element.
+     *
+     * @param item - The data item to render.
+     * @returns A DOM element representing the rendered item.
+     */
+    renderItem: (item: T) => HTMLElement;
+    /**
+     * Optional custom class names for the container and items.
+     */
+    classNames?: MasonrySnapGridLayoutClassNames;
+}
+/**
+ * Ref object shape for accessing a MasonrySnapGridLayout instance
+ * when used inside a React component.
+ */
+interface MasonrySnapGridRef {
+    /** Reference to the underlying MasonrySnapGridLayout instance. */
+    layout: MasonrySnapGridLayout | null;
+}
+
+/**
+ * MasonrySnapGridLayout
+ *
+ * A lightweight, generic TypeScript implementation of a responsive Masonry-style grid layout
+ * with optional animations, custom rendering, and automatic re-layout on resize.
+ *
+ * @template T - The type of data items that will be rendered into grid elements.
+ */
+declare class MasonrySnapGridLayout<T = any> {
+    /** The container element where the Masonry grid will be rendered. */
+    private readonly container;
+    /** Fully resolved options object with defaults merged. */
+    private readonly options;
+    /** A reference to all grid item elements currently rendered. */
+    private items;
+    /** Tracks the current heights of each column to position new items. */
+    private columnHeights;
+    /** Observes container resizing to trigger re-layout. */
+    private resizeObserver;
+    /** Stores requestAnimationFrame ID for layout updates to prevent redundant calls. */
+    private rafId;
+    /**
+     * Creates a new MasonrySnapGridLayout instance.
+     *
+     * @param container - The HTML element that will act as the grid container.
+     * @param options - Partial configuration object for layout behavior and rendering.
+     */
+    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>);
+    /**
+     * Renders the provided items into the container.
+     * Clears previous items and re-builds DOM structure.
+     */
+    private renderItems;
+    /**
+     * Sets up a ResizeObserver to re-calculate layout when container size changes.
+     */
+    private setupResizeObserver;
+    /**
+     * Calculates item positions and updates their transforms.
+     * Also adjusts the container height to fit all items.
+     */
+    private updateLayout;
+    /**
+     * Finds the index of the column with the smallest total height.
+     *
+     * @returns Index of the shortest column.
+     */
+    private findShortestColumn;
+    /**
+     * Replaces current items with a new set and re-renders the layout.
+     *
+     * @param newItems - New set of data items to render.
+     */
+    updateItems(newItems: T[]): void;
+    /**
+     * Cleans up event listeners, observers, and DOM modifications.
+     * This should be called before discarding the instance.
+     */
+    destroy(): void;
+}
+
+export { MasonrySnapGridLayout as M, type MasonrySnapGridLayoutOptions as a, type MasonrySnapGridRef as b };

package/dist/esm/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.css"],"sourcesContent":[".masonry-snap-grid-container {\n    position: relative;\n    width: 100%;\n    transition: height 0.4s ease-out;\n    overflow: hidden;\n}\n\n.masonry-snap-grid-item {\n    position: absolute;\n    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: transform;\n    box-sizing: border-box;\n    transform-origin: top left;\n    backface-visibility: hidden;\n    perspective: 1000px;\n}"],"mappings":";AAAA,CAAC;AACG,YAAU;AACV,SAAO;AACP,cAAY,OAAO,KAAK;AACxB,YAAU;AACd;AAEA,CAAC;AACG,YAAU;AACV,cAAY,UAAU,KAAK,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;AACrD,eAAa;AACb,cAAY;AACZ,oBAAkB,IAAI;AACtB,uBAAqB;AACrB,eAAa;AACjB;","names":[]}
+{"version":3,"sources":["../../src/index.css"],"sourcesContent":["/* \n====================================================================\nMasonrySnapGridLayout - Base Styles\n====================================================================\nThese styles define the core visual and positional behavior of the \nmasonry grid container and its items. They are minimal to allow \nflexibility for custom themes while ensuring smooth layout animations.\n====================================================================\n*/\n\n/* \nContainer styles:\n- Acts as the positioning context for masonry items (position: relative).\n- Takes full available width.\n- Smoothly animates height changes when items reflow.\n- Hides overflow to prevent content from spilling outside the layout.\n*/\n.masonry-snap-grid-container {\n    position: relative;\n    width: 100%;\n    transition: height 0.4s ease-out;\n    overflow: hidden;\n}\n\n/* \nItem styles:\n- Absolutely positioned within the container.\n- Animates transform changes for smooth reordering.\n- Uses GPU-accelerated transform optimizations (`will-change`, `backface-visibility`).\n- Sets `box-sizing: border-box` for consistent sizing with padding/border.\n- `transform-origin` ensures scaling/rotation pivot from the top-left corner.\n- `perspective` enables subtle 3D rendering improvements on some browsers.\n*/\n.masonry-snap-grid-item {\n    position: absolute;\n    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: transform;\n    box-sizing: border-box;\n    transform-origin: top left;\n    backface-visibility: hidden;\n    perspective: 1000px;\n}\n"],"mappings":";AAiBA,CAAC;AACG,YAAU;AACV,SAAO;AACP,cAAY,OAAO,KAAK;AACxB,YAAU;AACd;AAWA,CAAC;AACG,YAAU;AACV,cAAY,UAAU,KAAK,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;AACrD,eAAa;AACb,cAAY;AACZ,oBAAkB,IAAI;AACtB,uBAAqB;AACrB,eAAa;AACjB;","names":[]}

package/dist/esm/index.js

@@ -1,8 +1,17 @@
 // src/MasonrySnapGridLayout.ts
 var MasonrySnapGridLayout = class {
+  /**
+   * Creates a new MasonrySnapGridLayout instance.
+   *
+   * @param container - The HTML element that will act as the grid container.
+   * @param options - Partial configuration object for layout behavior and rendering.
+   */
   constructor(container, options) {
+    /** A reference to all grid item elements currently rendered. */
     this.items = [];
+    /** Tracks the current heights of each column to position new items. */
     this.columnHeights = [];
+    /** Stores requestAnimationFrame ID for layout updates to prevent redundant calls. */
     this.rafId = null;
     this.container = container;
     this.options = {
@@ -20,6 +29,10 @@ var MasonrySnapGridLayout = class {
     this.renderItems();
     this.setupResizeObserver();
   }
+  /**
+   * Renders the provided items into the container.
+   * Clears previous items and re-builds DOM structure.
+   */
   renderItems() {
     this.items.forEach((item) => item.remove());
     this.items = [];
@@ -33,6 +46,9 @@ var MasonrySnapGridLayout = class {
     this.container.appendChild(fragment);
     this.updateLayout();
   }
+  /**
+   * Sets up a ResizeObserver to re-calculate layout when container size changes.
+   */
   setupResizeObserver() {
     this.resizeObserver = new ResizeObserver(() => {
       if (this.rafId) cancelAnimationFrame(this.rafId);
@@ -40,6 +56,10 @@ var MasonrySnapGridLayout = class {
     });
     this.resizeObserver.observe(this.container);
   }
+  /**
+   * Calculates item positions and updates their transforms.
+   * Also adjusts the container height to fit all items.
+   */
   updateLayout() {
     const { gutter, minColWidth, animate, transitionDuration } = this.options;
     const containerWidth = this.container.clientWidth;
@@ -59,13 +79,27 @@ var MasonrySnapGridLayout = class {
     const maxHeight = Math.max(...this.columnHeights);
     this.container.style.height = `${maxHeight}px`;
   }
+  /**
+   * Finds the index of the column with the smallest total height.
+   *
+   * @returns Index of the shortest column.
+   */
   findShortestColumn() {
     return this.columnHeights.indexOf(Math.min(...this.columnHeights));
   }
+  /**
+   * Replaces current items with a new set and re-renders the layout.
+   *
+   * @param newItems - New set of data items to render.
+   */
   updateItems(newItems) {
     this.options.items = newItems;
     this.renderItems();
   }
+  /**
+   * Cleans up event listeners, observers, and DOM modifications.
+   * This should be called before discarding the instance.
+   */
   destroy() {
     this.resizeObserver?.disconnect();
     if (this.rafId) cancelAnimationFrame(this.rafId);

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MasonrySnapGridLayout.ts","../../src/index.ts"],"sourcesContent":["import { MasonrySnapGridLayoutOptions } from './types';\n\nexport default class MasonrySnapGridLayout<T = any> {\n    private readonly container: HTMLElement;\n    private readonly options: Required<MasonrySnapGridLayoutOptions<T>>;\n    private items: HTMLElement[] = [];\n    private columnHeights: number[] = [];\n    private resizeObserver: ResizeObserver | undefined;\n    private rafId: number | null = null;\n\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>) {\n        this.container = container;\n        this.options = {\n            gutter: 16,\n            minColWidth: 250,\n            animate: true,\n            transitionDuration: 400,\n            classNames: {\n                container: 'masonry-snap-grid-container',\n                item: 'masonry-snap-grid-item',\n            },\n            ...options,\n        };\n\n        // Apply container class\n        this.container.classList.add(this.options.classNames.container || \"\");\n\n        // Initialize\n        this.renderItems();\n        this.setupResizeObserver();\n    }\n\n    private renderItems() {\n        // Clear existing items\n        this.items.forEach(item => item.remove());\n        this.items = [];\n\n        // Create fragment for batch DOM insertion\n        const fragment = document.createDocumentFragment();\n\n        // Create and append items\n        this.options.items.forEach(itemData => {\n            const itemElement = this.options.renderItem(itemData);\n            itemElement.classList.add(this.options.classNames.item|| \"\");\n            fragment.appendChild(itemElement);\n            this.items.push(itemElement);\n        });\n\n        this.container.appendChild(fragment);\n        this.updateLayout();\n    }\n\n    private setupResizeObserver() {\n        this.resizeObserver = new ResizeObserver(() => {\n            if (this.rafId) cancelAnimationFrame(this.rafId);\n            this.rafId = requestAnimationFrame(() => this.updateLayout());\n        });\n        this.resizeObserver.observe(this.container);\n    }\n\n    private updateLayout() {\n        const { gutter, minColWidth, animate, transitionDuration } = this.options;\n        const containerWidth = this.container.clientWidth;\n\n        // Calculate columns\n        const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\n        const colWidth = (containerWidth - (columns - 1) * gutter) / columns;\n\n        // Reset column heights\n        this.columnHeights = new Array(columns).fill(0);\n\n        // Position items\n        this.items.forEach((item) => {\n            const height = item.offsetHeight;\n            const minCol = this.findShortestColumn();\n            const x = minCol * (colWidth + gutter);\n            const y = this.columnHeights[minCol];\n\n            // Apply position and size\n            item.style.width = `${colWidth}px`;\n            item.style.transform = `translate3d(${x}px, ${y}px, 0)`;\n            item.style.transition = animate\n                ? `transform ${transitionDuration}ms ease`\n                : 'none';\n\n            // Update column height\n            this.columnHeights[minCol] += height + gutter;\n        });\n\n        // Set container height\n        const maxHeight = Math.max(...this.columnHeights);\n        this.container.style.height = `${maxHeight}px`;\n    }\n\n    private findShortestColumn(): number {\n        return this.columnHeights.indexOf(Math.min(...this.columnHeights));\n    }\n\n    public updateItems(newItems: T[]) {\n        this.options.items = newItems;\n        this.renderItems();\n    }\n\n    public destroy() {\n        this.resizeObserver?.disconnect();\n        if (this.rafId) cancelAnimationFrame(this.rafId);\n        this.container.innerHTML = '';\n        this.container.removeAttribute('style');\n        this.container.classList.remove(this.options.classNames.container || \"\");\n    }\n}","import './index.css';\nimport MasonrySnapGridLayout  from './MasonrySnapGridLayout';\nimport {MasonrySnapGridLayoutOptions}  from './types';\n\nexport default MasonrySnapGridLayout;\nexport { MasonrySnapGridLayout, MasonrySnapGridLayoutOptions };"],"mappings":";AAEA,IAAqB,wBAArB,MAAoD;AAAA,EAQhD,YAAY,WAAwB,SAA0C;AAL9E,SAAQ,QAAuB,CAAC;AAChC,SAAQ,gBAA0B,CAAC;AAEnC,SAAQ,QAAuB;AAG3B,SAAK,YAAY;AACjB,SAAK,UAAU;AAAA,MACX,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT,oBAAoB;AAAA,MACpB,YAAY;AAAA,QACR,WAAW;AAAA,QACX,MAAM;AAAA,MACV;AAAA,MACA,GAAG;AAAA,IACP;AAGA,SAAK,UAAU,UAAU,IAAI,KAAK,QAAQ,WAAW,aAAa,EAAE;AAGpE,SAAK,YAAY;AACjB,SAAK,oBAAoB;AAAA,EAC7B;AAAA,EAEQ,cAAc;AAElB,SAAK,MAAM,QAAQ,UAAQ,KAAK,OAAO,CAAC;AACxC,SAAK,QAAQ,CAAC;AAGd,UAAM,WAAW,SAAS,uBAAuB;AAGjD,SAAK,QAAQ,MAAM,QAAQ,cAAY;AACnC,YAAM,cAAc,KAAK,QAAQ,WAAW,QAAQ;AACpD,kBAAY,UAAU,IAAI,KAAK,QAAQ,WAAW,QAAO,EAAE;AAC3D,eAAS,YAAY,WAAW;AAChC,WAAK,MAAM,KAAK,WAAW;AAAA,IAC/B,CAAC;AAED,SAAK,UAAU,YAAY,QAAQ;AACnC,SAAK,aAAa;AAAA,EACtB;AAAA,EAEQ,sBAAsB;AAC1B,SAAK,iBAAiB,IAAI,eAAe,MAAM;AAC3C,UAAI,KAAK,MAAO,sBAAqB,KAAK,KAAK;AAC/C,WAAK,QAAQ,sBAAsB,MAAM,KAAK,aAAa,CAAC;AAAA,IAChE,CAAC;AACD,SAAK,eAAe,QAAQ,KAAK,SAAS;AAAA,EAC9C;AAAA,EAEQ,eAAe;AACnB,UAAM,EAAE,QAAQ,aAAa,SAAS,mBAAmB,IAAI,KAAK;AAClE,UAAM,iBAAiB,KAAK,UAAU;AAGtC,UAAM,UAAU,KAAK,IAAI,GAAG,KAAK,OAAO,iBAAiB,WAAW,cAAc,OAAO,CAAC;AAC1F,UAAM,YAAY,kBAAkB,UAAU,KAAK,UAAU;AAG7D,SAAK,gBAAgB,IAAI,MAAM,OAAO,EAAE,KAAK,CAAC;AAG9C,SAAK,MAAM,QAAQ,CAAC,SAAS;AACzB,YAAM,SAAS,KAAK;AACpB,YAAM,SAAS,KAAK,mBAAmB;AACvC,YAAM,IAAI,UAAU,WAAW;AAC/B,YAAM,IAAI,KAAK,cAAc,MAAM;AAGnC,WAAK,MAAM,QAAQ,GAAG,QAAQ;AAC9B,WAAK,MAAM,YAAY,eAAe,CAAC,OAAO,CAAC;AAC/C,WAAK,MAAM,aAAa,UAClB,aAAa,kBAAkB,YAC/B;AAGN,WAAK,cAAc,MAAM,KAAK,SAAS;AAAA,IAC3C,CAAC;AAGD,UAAM,YAAY,KAAK,IAAI,GAAG,KAAK,aAAa;AAChD,SAAK,UAAU,MAAM,SAAS,GAAG,SAAS;AAAA,EAC9C;AAAA,EAEQ,qBAA6B;AACjC,WAAO,KAAK,cAAc,QAAQ,KAAK,IAAI,GAAG,KAAK,aAAa,CAAC;AAAA,EACrE;AAAA,EAEO,YAAY,UAAe;AAC9B,SAAK,QAAQ,QAAQ;AACrB,SAAK,YAAY;AAAA,EACrB;AAAA,EAEO,UAAU;AACb,SAAK,gBAAgB,WAAW;AAChC,QAAI,KAAK,MAAO,sBAAqB,KAAK,KAAK;AAC/C,SAAK,UAAU,YAAY;AAC3B,SAAK,UAAU,gBAAgB,OAAO;AACtC,SAAK,UAAU,UAAU,OAAO,KAAK,QAAQ,WAAW,aAAa,EAAE;AAAA,EAC3E;AACJ;;;AC1GA,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../../src/MasonrySnapGridLayout.ts","../../src/index.ts"],"sourcesContent":["import { MasonrySnapGridLayoutOptions } from './types';\n\n/**\n * MasonrySnapGridLayout\n *\n * A lightweight, generic TypeScript implementation of a responsive Masonry-style grid layout\n * with optional animations, custom rendering, and automatic re-layout on resize.\n *\n * @template T - The type of data items that will be rendered into grid elements.\n */\nexport default class MasonrySnapGridLayout<T = any> {\n    /** The container element where the Masonry grid will be rendered. */\n    private readonly container: HTMLElement;\n\n    /** Fully resolved options object with defaults merged. */\n    private readonly options: Required<MasonrySnapGridLayoutOptions<T>>;\n\n    /** A reference to all grid item elements currently rendered. */\n    private items: HTMLElement[] = [];\n\n    /** Tracks the current heights of each column to position new items. */\n    private columnHeights: number[] = [];\n\n    /** Observes container resizing to trigger re-layout. */\n    private resizeObserver: ResizeObserver | undefined;\n\n    /** Stores requestAnimationFrame ID for layout updates to prevent redundant calls. */\n    private rafId: number | null = null;\n\n    /**\n     * Creates a new MasonrySnapGridLayout instance.\n     *\n     * @param container - The HTML element that will act as the grid container.\n     * @param options - Partial configuration object for layout behavior and rendering.\n     */\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>) {\n        this.container = container;\n\n        // Merge default settings with user-provided options\n        this.options = {\n            gutter: 16,\n            minColWidth: 250,\n            animate: true,\n            transitionDuration: 400,\n            classNames: {\n                container: 'masonry-snap-grid-container',\n                item: 'masonry-snap-grid-item',\n            },\n            ...options,\n        };\n\n        // Apply base container class for styling\n        this.container.classList.add(this.options.classNames.container || \"\");\n\n        // Initial rendering and layout setup\n        this.renderItems();\n        this.setupResizeObserver();\n    }\n\n    /**\n     * Renders the provided items into the container.\n     * Clears previous items and re-builds DOM structure.\n     */\n    private renderItems() {\n        // Remove any previously rendered items\n        this.items.forEach(item => item.remove());\n        this.items = [];\n\n        // Use DocumentFragment for efficient DOM updates\n        const fragment = document.createDocumentFragment();\n\n        // Create elements for each item and append to fragment\n        this.options.items.forEach(itemData => {\n            const itemElement = this.options.renderItem(itemData);\n            itemElement.classList.add(this.options.classNames.item || \"\");\n            fragment.appendChild(itemElement);\n            this.items.push(itemElement);\n        });\n\n        // Append all items to container at once\n        this.container.appendChild(fragment);\n\n        // Trigger layout positioning\n        this.updateLayout();\n    }\n\n    /**\n     * Sets up a ResizeObserver to re-calculate layout when container size changes.\n     */\n    private setupResizeObserver() {\n        this.resizeObserver = new ResizeObserver(() => {\n            // Throttle updates to animation frame to avoid layout thrashing\n            if (this.rafId) cancelAnimationFrame(this.rafId);\n            this.rafId = requestAnimationFrame(() => this.updateLayout());\n        });\n        this.resizeObserver.observe(this.container);\n    }\n\n    /**\n     * Calculates item positions and updates their transforms.\n     * Also adjusts the container height to fit all items.\n     */\n    private updateLayout() {\n        const { gutter, minColWidth, animate, transitionDuration } = this.options;\n        const containerWidth = this.container.clientWidth;\n\n        // Determine number of columns based on available width and minColWidth\n        const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\n\n        // Calculate actual column width including gutters\n        const colWidth = (containerWidth - (columns - 1) * gutter) / columns;\n\n        // Reset heights for all columns\n        this.columnHeights = new Array(columns).fill(0);\n\n        // Position each item in the shortest column\n        this.items.forEach((item) => {\n            const height = item.offsetHeight;\n            const minCol = this.findShortestColumn();\n            const x = minCol * (colWidth + gutter);\n            const y = this.columnHeights[minCol];\n\n            // Apply positioning and animation\n            item.style.width = `${colWidth}px`;\n            item.style.transform = `translate3d(${x}px, ${y}px, 0)`;\n            item.style.transition = animate\n                ? `transform ${transitionDuration}ms ease`\n                : 'none';\n\n            // Update column height to account for this item\n            this.columnHeights[minCol] += height + gutter;\n        });\n\n        // Set container height to the tallest column\n        const maxHeight = Math.max(...this.columnHeights);\n        this.container.style.height = `${maxHeight}px`;\n    }\n\n    /**\n     * Finds the index of the column with the smallest total height.\n     *\n     * @returns Index of the shortest column.\n     */\n    private findShortestColumn(): number {\n        return this.columnHeights.indexOf(Math.min(...this.columnHeights));\n    }\n\n    /**\n     * Replaces current items with a new set and re-renders the layout.\n     *\n     * @param newItems - New set of data items to render.\n     */\n    public updateItems(newItems: T[]) {\n        this.options.items = newItems;\n        this.renderItems();\n    }\n\n    /**\n     * Cleans up event listeners, observers, and DOM modifications.\n     * This should be called before discarding the instance.\n     */\n    public destroy() {\n        this.resizeObserver?.disconnect();\n        if (this.rafId) cancelAnimationFrame(this.rafId);\n        this.container.innerHTML = '';\n        this.container.removeAttribute('style');\n        this.container.classList.remove(this.options.classNames.container || \"\");\n    }\n}\n","import './index.css'; // Base CSS styles for MasonrySnapGridLayout\nimport MasonrySnapGridLayout from './MasonrySnapGridLayout';\nimport { MasonrySnapGridLayoutOptions } from './types';\n\n/**\n * Entry point for the MasonrySnapGridLayout package.\n *\n * - Imports the default styles for the layout (`index.css`).\n * - Re-exports the core class and associated type definitions.\n * - This allows consumers to either:\n *    - Import the default class directly.\n *    - Or import named exports for more flexibility.\n */\n\nexport default MasonrySnapGridLayout;\nexport {\n    MasonrySnapGridLayout,\n    MasonrySnapGridLayoutOptions\n};\n"],"mappings":"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","names":[]}

package/dist/esm/react.js

@@ -8,9 +8,18 @@ import ReactDOM from "react-dom/client";
 
 // src/MasonrySnapGridLayout.ts
 var MasonrySnapGridLayout = class {
+  /**
+   * Creates a new MasonrySnapGridLayout instance.
+   *
+   * @param container - The HTML element that will act as the grid container.
+   * @param options - Partial configuration object for layout behavior and rendering.
+   */
   constructor(container, options) {
+    /** A reference to all grid item elements currently rendered. */
     this.items = [];
+    /** Tracks the current heights of each column to position new items. */
     this.columnHeights = [];
+    /** Stores requestAnimationFrame ID for layout updates to prevent redundant calls. */
     this.rafId = null;
     this.container = container;
     this.options = {
@@ -28,6 +37,10 @@ var MasonrySnapGridLayout = class {
     this.renderItems();
     this.setupResizeObserver();
   }
+  /**
+   * Renders the provided items into the container.
+   * Clears previous items and re-builds DOM structure.
+   */
   renderItems() {
     this.items.forEach((item) => item.remove());
     this.items = [];
@@ -41,6 +54,9 @@ var MasonrySnapGridLayout = class {
     this.container.appendChild(fragment);
     this.updateLayout();
   }
+  /**
+   * Sets up a ResizeObserver to re-calculate layout when container size changes.
+   */
   setupResizeObserver() {
     this.resizeObserver = new ResizeObserver(() => {
       if (this.rafId) cancelAnimationFrame(this.rafId);
@@ -48,6 +64,10 @@ var MasonrySnapGridLayout = class {
     });
     this.resizeObserver.observe(this.container);
   }
+  /**
+   * Calculates item positions and updates their transforms.
+   * Also adjusts the container height to fit all items.
+   */
   updateLayout() {
     const { gutter, minColWidth, animate, transitionDuration } = this.options;
     const containerWidth = this.container.clientWidth;
@@ -67,13 +87,27 @@ var MasonrySnapGridLayout = class {
     const maxHeight = Math.max(...this.columnHeights);
     this.container.style.height = `${maxHeight}px`;
   }
+  /**
+   * Finds the index of the column with the smallest total height.
+   *
+   * @returns Index of the shortest column.
+   */
   findShortestColumn() {
     return this.columnHeights.indexOf(Math.min(...this.columnHeights));
   }
+  /**
+   * Replaces current items with a new set and re-renders the layout.
+   *
+   * @param newItems - New set of data items to render.
+   */
   updateItems(newItems) {
     this.options.items = newItems;
     this.renderItems();
   }
+  /**
+   * Cleans up event listeners, observers, and DOM modifications.
+   * This should be called before discarding the instance.
+   */
   destroy() {
     this.resizeObserver?.disconnect();
     if (this.rafId) cancelAnimationFrame(this.rafId);

package/dist/esm/react.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react.tsx","../../src/MasonrySnapGridLayout.ts"],"sourcesContent":["import React, {\n    useEffect,\n    useRef,\n    forwardRef,\n    useImperativeHandle,\n} from 'react';\nimport ReactDOM from 'react-dom/client';\nimport MasonrySnapGridLayout from './MasonrySnapGridLayout';\nimport {\n    MasonrySnapGridLayoutOptions,\n    MasonrySnapGridRef,\n} from './types';\n\ninterface MasonrySnapGridProps<T>\n    extends Omit<MasonrySnapGridLayoutOptions<T>, 'items' | 'renderItem'> {\n    items: T[];\n    renderItem: (item: T) => React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst MasonrySnapGridInner = <T,>(\n    {\n        items,\n        renderItem,\n        className,\n        style,\n        ...options\n    }: MasonrySnapGridProps<T>,\n    ref: React.ForwardedRef<MasonrySnapGridRef>\n) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const masonryRef = useRef<MasonrySnapGridLayout<T> | null>(null);\n    const rootsRef = useRef<Map<HTMLElement, ReactDOM.Root>>(new Map());\n\n    // Initialize masonry layout\n    useEffect(() => {\n        if (!containerRef.current) return;\n\n        masonryRef.current = new MasonrySnapGridLayout(containerRef.current, {\n            ...options,\n            items,\n            renderItem: (item) => {\n                const div = document.createElement('div');\n                const root = ReactDOM.createRoot(div);\n                root.render(renderItem(item));\n                rootsRef.current.set(div, root);\n                return div;\n            },\n        });\n\n        return () => {\n            // Proper cleanup\n            rootsRef.current.forEach((root, div) => {\n                root.unmount();\n                div.remove();\n            });\n            rootsRef.current.clear();\n            masonryRef.current?.destroy();\n            masonryRef.current = null;\n        };\n    }, [options, renderItem]);\n\n    // Update items on change\n    useEffect(() => {\n        if (masonryRef.current) {\n            masonryRef.current.updateItems(items);\n        }\n    }, [items]);\n\n\n    return (\n        <div\n            ref={containerRef}\n            className={className}\n            style={{ position: 'relative', width: '100%', ...style }}\n        />\n    );\n};\n\n// Properly typed forwardRef component\nconst MasonrySnapGrid = forwardRef(MasonrySnapGridInner) as <T>(\n    props: MasonrySnapGridProps<T> & { ref?: React.ForwardedRef<MasonrySnapGridRef> }\n) => ReturnType<typeof MasonrySnapGridInner>;\n\nexport default MasonrySnapGrid;","import { MasonrySnapGridLayoutOptions } from './types';\n\nexport default class MasonrySnapGridLayout<T = any> {\n    private readonly container: HTMLElement;\n    private readonly options: Required<MasonrySnapGridLayoutOptions<T>>;\n    private items: HTMLElement[] = [];\n    private columnHeights: number[] = [];\n    private resizeObserver: ResizeObserver | undefined;\n    private rafId: number | null = null;\n\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>) {\n        this.container = container;\n        this.options = {\n            gutter: 16,\n            minColWidth: 250,\n            animate: true,\n            transitionDuration: 400,\n            classNames: {\n                container: 'masonry-snap-grid-container',\n                item: 'masonry-snap-grid-item',\n            },\n            ...options,\n        };\n\n        // Apply container class\n        this.container.classList.add(this.options.classNames.container || \"\");\n\n        // Initialize\n        this.renderItems();\n        this.setupResizeObserver();\n    }\n\n    private renderItems() {\n        // Clear existing items\n        this.items.forEach(item => item.remove());\n        this.items = [];\n\n        // Create fragment for batch DOM insertion\n        const fragment = document.createDocumentFragment();\n\n        // Create and append items\n        this.options.items.forEach(itemData => {\n            const itemElement = this.options.renderItem(itemData);\n            itemElement.classList.add(this.options.classNames.item|| \"\");\n            fragment.appendChild(itemElement);\n            this.items.push(itemElement);\n        });\n\n        this.container.appendChild(fragment);\n        this.updateLayout();\n    }\n\n    private setupResizeObserver() {\n        this.resizeObserver = new ResizeObserver(() => {\n            if (this.rafId) cancelAnimationFrame(this.rafId);\n            this.rafId = requestAnimationFrame(() => this.updateLayout());\n        });\n        this.resizeObserver.observe(this.container);\n    }\n\n    private updateLayout() {\n        const { gutter, minColWidth, animate, transitionDuration } = this.options;\n        const containerWidth = this.container.clientWidth;\n\n        // Calculate columns\n        const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\n        const colWidth = (containerWidth - (columns - 1) * gutter) / columns;\n\n        // Reset column heights\n        this.columnHeights = new Array(columns).fill(0);\n\n        // Position items\n        this.items.forEach((item) => {\n            const height = item.offsetHeight;\n            const minCol = this.findShortestColumn();\n            const x = minCol * (colWidth + gutter);\n            const y = this.columnHeights[minCol];\n\n            // Apply position and size\n            item.style.width = `${colWidth}px`;\n            item.style.transform = `translate3d(${x}px, ${y}px, 0)`;\n            item.style.transition = animate\n                ? `transform ${transitionDuration}ms ease`\n                : 'none';\n\n            // Update column height\n            this.columnHeights[minCol] += height + gutter;\n        });\n\n        // Set container height\n        const maxHeight = Math.max(...this.columnHeights);\n        this.container.style.height = `${maxHeight}px`;\n    }\n\n    private findShortestColumn(): number {\n        return this.columnHeights.indexOf(Math.min(...this.columnHeights));\n    }\n\n    public updateItems(newItems: T[]) {\n        this.options.items = newItems;\n        this.renderItems();\n    }\n\n    public destroy() {\n        this.resizeObserver?.disconnect();\n        if (this.rafId) cancelAnimationFrame(this.rafId);\n        this.container.innerHTML = '';\n        this.container.removeAttribute('style');\n        this.container.classList.remove(this.options.classNames.container || \"\");\n    }\n}"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/react.tsx","../../src/MasonrySnapGridLayout.ts"],"sourcesContent":["import React, {\n    useEffect,\n    useRef,\n    forwardRef,\n    useImperativeHandle,\n} from 'react';\nimport ReactDOM from 'react-dom/client';\nimport MasonrySnapGridLayout from './MasonrySnapGridLayout';\nimport {\n    MasonrySnapGridLayoutOptions,\n    MasonrySnapGridRef,\n} from './types';\n\n/**\n * Props for the MasonrySnapGrid React component.\n *\n * @template T - The type of items in the masonry layout.\n */\ninterface MasonrySnapGridProps<T>\n    extends Omit<MasonrySnapGridLayoutOptions<T>, 'items' | 'renderItem'> {\n    /** Array of data items to be rendered into the masonry grid. */\n    items: T[];\n\n    /** Function that renders a single data item as a React node. */\n    renderItem: (item: T) => React.ReactNode;\n\n    /** Optional class name for the container. */\n    className?: string;\n\n    /** Optional inline styles for the container. */\n    style?: React.CSSProperties;\n}\n\n/**\n * Internal component that bridges MasonrySnapGridLayout with React.\n *\n * - Manages lifecycle of the underlying MasonrySnapGridLayout instance.\n * - Uses ReactDOM.createRoot to render React nodes into non-React DOM elements.\n * - Handles cleanup to avoid memory leaks.\n */\nconst MasonrySnapGridInner = <T,>(\n    {\n        items,\n        renderItem,\n        className,\n        style,\n        ...options\n    }: MasonrySnapGridProps<T>,\n    ref: React.ForwardedRef<MasonrySnapGridRef>\n) => {\n    /** Ref to the container DOM element where MasonrySnapGridLayout will operate. */\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    /** Ref to the MasonrySnapGridLayout instance (non-React logic). */\n    const masonryRef = useRef<MasonrySnapGridLayout<T> | null>(null);\n\n    /** Tracks all mounted React roots for cleanup. */\n    const rootsRef = useRef<Map<HTMLElement, ReactDOM.Root>>(new Map());\n\n    // Initialize masonry layout when container mounts\n    useEffect(() => {\n        if (!containerRef.current) return;\n\n        masonryRef.current = new MasonrySnapGridLayout(containerRef.current, {\n            ...options,\n            items,\n            renderItem: (item) => {\n                // Create a standalone DOM element for each item\n                const div = document.createElement('div');\n\n                // Render React content into this element\n                const root = ReactDOM.createRoot(div);\n                root.render(renderItem(item));\n\n                // Keep track of the React root for later cleanup\n                rootsRef.current.set(div, root);\n\n                return div;\n            },\n        });\n\n        return () => {\n            // Clean up all React roots and remove their DOM nodes\n            rootsRef.current.forEach((root, div) => {\n                root.unmount();\n                div.remove();\n            });\n            rootsRef.current.clear();\n\n            // Destroy the Masonry instance\n            masonryRef.current?.destroy();\n            masonryRef.current = null;\n        };\n    }, [options, renderItem]);\n\n    // Update only the items when the data changes (avoid full re-initialization)\n    useEffect(() => {\n        if (masonryRef.current) {\n            masonryRef.current.updateItems(items);\n        }\n    }, [items]);\n\n    return (\n        <div\n            ref={containerRef}\n            className={className}\n            style={{ position: 'relative', width: '100%', ...style }}\n        />\n    );\n};\n\n/**\n * MasonrySnapGrid\n *\n * React wrapper component for MasonrySnapGridLayout.\n *\n * @template T - The type of items in the masonry layout.\n */\nconst MasonrySnapGrid = forwardRef(MasonrySnapGridInner) as <T>(\n    props: MasonrySnapGridProps<T> & { ref?: React.ForwardedRef<MasonrySnapGridRef> }\n) => ReturnType<typeof MasonrySnapGridInner>;\n\nexport default MasonrySnapGrid;\n","import { MasonrySnapGridLayoutOptions } from './types';\n\n/**\n * MasonrySnapGridLayout\n *\n * A lightweight, generic TypeScript implementation of a responsive Masonry-style grid layout\n * with optional animations, custom rendering, and automatic re-layout on resize.\n *\n * @template T - The type of data items that will be rendered into grid elements.\n */\nexport default class MasonrySnapGridLayout<T = any> {\n    /** The container element where the Masonry grid will be rendered. */\n    private readonly container: HTMLElement;\n\n    /** Fully resolved options object with defaults merged. */\n    private readonly options: Required<MasonrySnapGridLayoutOptions<T>>;\n\n    /** A reference to all grid item elements currently rendered. */\n    private items: HTMLElement[] = [];\n\n    /** Tracks the current heights of each column to position new items. */\n    private columnHeights: number[] = [];\n\n    /** Observes container resizing to trigger re-layout. */\n    private resizeObserver: ResizeObserver | undefined;\n\n    /** Stores requestAnimationFrame ID for layout updates to prevent redundant calls. */\n    private rafId: number | null = null;\n\n    /**\n     * Creates a new MasonrySnapGridLayout instance.\n     *\n     * @param container - The HTML element that will act as the grid container.\n     * @param options - Partial configuration object for layout behavior and rendering.\n     */\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>) {\n        this.container = container;\n\n        // Merge default settings with user-provided options\n        this.options = {\n            gutter: 16,\n            minColWidth: 250,\n            animate: true,\n            transitionDuration: 400,\n            classNames: {\n                container: 'masonry-snap-grid-container',\n                item: 'masonry-snap-grid-item',\n            },\n            ...options,\n        };\n\n        // Apply base container class for styling\n        this.container.classList.add(this.options.classNames.container || \"\");\n\n        // Initial rendering and layout setup\n        this.renderItems();\n        this.setupResizeObserver();\n    }\n\n    /**\n     * Renders the provided items into the container.\n     * Clears previous items and re-builds DOM structure.\n     */\n    private renderItems() {\n        // Remove any previously rendered items\n        this.items.forEach(item => item.remove());\n        this.items = [];\n\n        // Use DocumentFragment for efficient DOM updates\n        const fragment = document.createDocumentFragment();\n\n        // Create elements for each item and append to fragment\n        this.options.items.forEach(itemData => {\n            const itemElement = this.options.renderItem(itemData);\n            itemElement.classList.add(this.options.classNames.item || \"\");\n            fragment.appendChild(itemElement);\n            this.items.push(itemElement);\n        });\n\n        // Append all items to container at once\n        this.container.appendChild(fragment);\n\n        // Trigger layout positioning\n        this.updateLayout();\n    }\n\n    /**\n     * Sets up a ResizeObserver to re-calculate layout when container size changes.\n     */\n    private setupResizeObserver() {\n        this.resizeObserver = new ResizeObserver(() => {\n            // Throttle updates to animation frame to avoid layout thrashing\n            if (this.rafId) cancelAnimationFrame(this.rafId);\n            this.rafId = requestAnimationFrame(() => this.updateLayout());\n        });\n        this.resizeObserver.observe(this.container);\n    }\n\n    /**\n     * Calculates item positions and updates their transforms.\n     * Also adjusts the container height to fit all items.\n     */\n    private updateLayout() {\n        const { gutter, minColWidth, animate, transitionDuration } = this.options;\n        const containerWidth = this.container.clientWidth;\n\n        // Determine number of columns based on available width and minColWidth\n        const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\n\n        // Calculate actual column width including gutters\n        const colWidth = (containerWidth - (columns - 1) * gutter) / columns;\n\n        // Reset heights for all columns\n        this.columnHeights = new Array(columns).fill(0);\n\n        // Position each item in the shortest column\n        this.items.forEach((item) => {\n            const height = item.offsetHeight;\n            const minCol = this.findShortestColumn();\n            const x = minCol * (colWidth + gutter);\n            const y = this.columnHeights[minCol];\n\n            // Apply positioning and animation\n            item.style.width = `${colWidth}px`;\n            item.style.transform = `translate3d(${x}px, ${y}px, 0)`;\n            item.style.transition = animate\n                ? `transform ${transitionDuration}ms ease`\n                : 'none';\n\n            // Update column height to account for this item\n            this.columnHeights[minCol] += height + gutter;\n        });\n\n        // Set container height to the tallest column\n        const maxHeight = Math.max(...this.columnHeights);\n        this.container.style.height = `${maxHeight}px`;\n    }\n\n    /**\n     * Finds the index of the column with the smallest total height.\n     *\n     * @returns Index of the shortest column.\n     */\n    private findShortestColumn(): number {\n        return this.columnHeights.indexOf(Math.min(...this.columnHeights));\n    }\n\n    /**\n     * Replaces current items with a new set and re-renders the layout.\n     *\n     * @param newItems - New set of data items to render.\n     */\n    public updateItems(newItems: T[]) {\n        this.options.items = newItems;\n        this.renderItems();\n    }\n\n    /**\n     * Cleans up event listeners, observers, and DOM modifications.\n     * This should be called before discarding the instance.\n     */\n    public destroy() {\n        this.resizeObserver?.disconnect();\n        if (this.rafId) cancelAnimationFrame(this.rafId);\n        this.container.innerHTML = '';\n        this.container.removeAttribute('style');\n        this.container.classList.remove(this.options.classNames.container || \"\");\n    }\n}\n"],"mappings":"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","names":[]}

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.css"],"sourcesContent":[".masonry-snap-grid-container {\n    position: relative;\n    width: 100%;\n    transition: height 0.4s ease-out;\n    overflow: hidden;\n}\n\n.masonry-snap-grid-item {\n    position: absolute;\n    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: transform;\n    box-sizing: border-box;\n    transform-origin: top left;\n    backface-visibility: hidden;\n    perspective: 1000px;\n}"],"mappings":";AAAA,CAAC;AACG,YAAU;AACV,SAAO;AACP,cAAY,OAAO,KAAK;AACxB,YAAU;AACd;AAEA,CAAC;AACG,YAAU;AACV,cAAY,UAAU,KAAK,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;AACrD,eAAa;AACb,cAAY;AACZ,oBAAkB,IAAI;AACtB,uBAAqB;AACrB,eAAa;AACjB;","names":[]}
+{"version":3,"sources":["../src/index.css"],"sourcesContent":["/* \n====================================================================\nMasonrySnapGridLayout - Base Styles\n====================================================================\nThese styles define the core visual and positional behavior of the \nmasonry grid container and its items. They are minimal to allow \nflexibility for custom themes while ensuring smooth layout animations.\n====================================================================\n*/\n\n/* \nContainer styles:\n- Acts as the positioning context for masonry items (position: relative).\n- Takes full available width.\n- Smoothly animates height changes when items reflow.\n- Hides overflow to prevent content from spilling outside the layout.\n*/\n.masonry-snap-grid-container {\n    position: relative;\n    width: 100%;\n    transition: height 0.4s ease-out;\n    overflow: hidden;\n}\n\n/* \nItem styles:\n- Absolutely positioned within the container.\n- Animates transform changes for smooth reordering.\n- Uses GPU-accelerated transform optimizations (`will-change`, `backface-visibility`).\n- Sets `box-sizing: border-box` for consistent sizing with padding/border.\n- `transform-origin` ensures scaling/rotation pivot from the top-left corner.\n- `perspective` enables subtle 3D rendering improvements on some browsers.\n*/\n.masonry-snap-grid-item {\n    position: absolute;\n    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: transform;\n    box-sizing: border-box;\n    transform-origin: top left;\n    backface-visibility: hidden;\n    perspective: 1000px;\n}\n"],"mappings":";AAiBA,CAAC;AACG,YAAU;AACV,SAAO;AACP,cAAY,OAAO,KAAK;AACxB,YAAU;AACd;AAWA,CAAC;AACG,YAAU;AACV,cAAY,UAAU,KAAK,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;AACrD,eAAa;AACb,cAAY;AACZ,oBAAkB,IAAI;AACtB,uBAAqB;AACrB,eAAa;AACjB;","names":[]}

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { M as MasonrySnapGridLayout } from './MasonrySnapGridLayout-D7ctVJaF.cjs';
-export { a as MasonrySnapGridLayoutOptions } from './MasonrySnapGridLayout-D7ctVJaF.cjs';
+import { M as MasonrySnapGridLayout } from './MasonrySnapGridLayout-CPmdhc_q.cjs';
+export { a as MasonrySnapGridLayoutOptions } from './MasonrySnapGridLayout-CPmdhc_q.cjs';
 
 
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { M as MasonrySnapGridLayout } from './MasonrySnapGridLayout-D7ctVJaF.js';
-export { a as MasonrySnapGridLayoutOptions } from './MasonrySnapGridLayout-D7ctVJaF.js';
+import { M as MasonrySnapGridLayout } from './MasonrySnapGridLayout-CPmdhc_q.js';
+export { a as MasonrySnapGridLayoutOptions } from './MasonrySnapGridLayout-CPmdhc_q.js';
 
 
 

package/dist/index.js

@@ -27,9 +27,18 @@ module.exports = __toCommonJS(index_exports);
 
 // src/MasonrySnapGridLayout.ts
 var MasonrySnapGridLayout = class {
+  /**
+   * Creates a new MasonrySnapGridLayout instance.
+   *
+   * @param container - The HTML element that will act as the grid container.
+   * @param options - Partial configuration object for layout behavior and rendering.
+   */
   constructor(container, options) {
+    /** A reference to all grid item elements currently rendered. */
     this.items = [];
+    /** Tracks the current heights of each column to position new items. */
     this.columnHeights = [];
+    /** Stores requestAnimationFrame ID for layout updates to prevent redundant calls. */
     this.rafId = null;
     this.container = container;
     this.options = {
@@ -47,6 +56,10 @@ var MasonrySnapGridLayout = class {
     this.renderItems();
     this.setupResizeObserver();
   }
+  /**
+   * Renders the provided items into the container.
+   * Clears previous items and re-builds DOM structure.
+   */
   renderItems() {
     this.items.forEach((item) => item.remove());
     this.items = [];
@@ -60,6 +73,9 @@ var MasonrySnapGridLayout = class {
     this.container.appendChild(fragment);
     this.updateLayout();
   }
+  /**
+   * Sets up a ResizeObserver to re-calculate layout when container size changes.
+   */
   setupResizeObserver() {
     this.resizeObserver = new ResizeObserver(() => {
       if (this.rafId) cancelAnimationFrame(this.rafId);
@@ -67,6 +83,10 @@ var MasonrySnapGridLayout = class {
     });
     this.resizeObserver.observe(this.container);
   }
+  /**
+   * Calculates item positions and updates their transforms.
+   * Also adjusts the container height to fit all items.
+   */
   updateLayout() {
     const { gutter, minColWidth, animate, transitionDuration } = this.options;
     const containerWidth = this.container.clientWidth;
@@ -86,13 +106,27 @@ var MasonrySnapGridLayout = class {
     const maxHeight = Math.max(...this.columnHeights);
     this.container.style.height = `${maxHeight}px`;
   }
+  /**
+   * Finds the index of the column with the smallest total height.
+   *
+   * @returns Index of the shortest column.
+   */
   findShortestColumn() {
     return this.columnHeights.indexOf(Math.min(...this.columnHeights));
   }
+  /**
+   * Replaces current items with a new set and re-renders the layout.
+   *
+   * @param newItems - New set of data items to render.
+   */
   updateItems(newItems) {
     this.options.items = newItems;
     this.renderItems();
   }
+  /**
+   * Cleans up event listeners, observers, and DOM modifications.
+   * This should be called before discarding the instance.
+   */
   destroy() {
     this.resizeObserver?.disconnect();
     if (this.rafId) cancelAnimationFrame(this.rafId);

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/MasonrySnapGridLayout.ts"],"sourcesContent":["import './index.css';\nimport MasonrySnapGridLayout  from './MasonrySnapGridLayout';\nimport {MasonrySnapGridLayoutOptions}  from './types';\n\nexport default MasonrySnapGridLayout;\nexport { MasonrySnapGridLayout, MasonrySnapGridLayoutOptions };","import { MasonrySnapGridLayoutOptions } from './types';\n\nexport default class MasonrySnapGridLayout<T = any> {\n    private readonly container: HTMLElement;\n    private readonly options: Required<MasonrySnapGridLayoutOptions<T>>;\n    private items: HTMLElement[] = [];\n    private columnHeights: number[] = [];\n    private resizeObserver: ResizeObserver | undefined;\n    private rafId: number | null = null;\n\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>) {\n        this.container = container;\n        this.options = {\n            gutter: 16,\n            minColWidth: 250,\n            animate: true,\n            transitionDuration: 400,\n            classNames: {\n                container: 'masonry-snap-grid-container',\n                item: 'masonry-snap-grid-item',\n            },\n            ...options,\n        };\n\n        // Apply container class\n        this.container.classList.add(this.options.classNames.container || \"\");\n\n        // Initialize\n        this.renderItems();\n        this.setupResizeObserver();\n    }\n\n    private renderItems() {\n        // Clear existing items\n        this.items.forEach(item => item.remove());\n        this.items = [];\n\n        // Create fragment for batch DOM insertion\n        const fragment = document.createDocumentFragment();\n\n        // Create and append items\n        this.options.items.forEach(itemData => {\n            const itemElement = this.options.renderItem(itemData);\n            itemElement.classList.add(this.options.classNames.item|| \"\");\n            fragment.appendChild(itemElement);\n            this.items.push(itemElement);\n        });\n\n        this.container.appendChild(fragment);\n        this.updateLayout();\n    }\n\n    private setupResizeObserver() {\n        this.resizeObserver = new ResizeObserver(() => {\n            if (this.rafId) cancelAnimationFrame(this.rafId);\n            this.rafId = requestAnimationFrame(() => this.updateLayout());\n        });\n        this.resizeObserver.observe(this.container);\n    }\n\n    private updateLayout() {\n        const { gutter, minColWidth, animate, transitionDuration } = this.options;\n        const containerWidth = this.container.clientWidth;\n\n        // Calculate columns\n        const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\n        const colWidth = (containerWidth - (columns - 1) * gutter) / columns;\n\n        // Reset column heights\n        this.columnHeights = new Array(columns).fill(0);\n\n        // Position items\n        this.items.forEach((item) => {\n            const height = item.offsetHeight;\n            const minCol = this.findShortestColumn();\n            const x = minCol * (colWidth + gutter);\n            const y = this.columnHeights[minCol];\n\n            // Apply position and size\n            item.style.width = `${colWidth}px`;\n            item.style.transform = `translate3d(${x}px, ${y}px, 0)`;\n            item.style.transition = animate\n                ? `transform ${transitionDuration}ms ease`\n                : 'none';\n\n            // Update column height\n            this.columnHeights[minCol] += height + gutter;\n        });\n\n        // Set container height\n        const maxHeight = Math.max(...this.columnHeights);\n        this.container.style.height = `${maxHeight}px`;\n    }\n\n    private findShortestColumn(): number {\n        return this.columnHeights.indexOf(Math.min(...this.columnHeights));\n    }\n\n    public updateItems(newItems: T[]) {\n        this.options.items = newItems;\n        this.renderItems();\n    }\n\n    public destroy() {\n        this.resizeObserver?.disconnect();\n        if (this.rafId) cancelAnimationFrame(this.rafId);\n        this.container.innerHTML = '';\n        this.container.removeAttribute('style');\n        this.container.classList.remove(this.options.classNames.container || \"\");\n    }\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,IAAqB,wBAArB,MAAoD;AAAA,EAQhD,YAAY,WAAwB,SAA0C;AAL9E,SAAQ,QAAuB,CAAC;AAChC,SAAQ,gBAA0B,CAAC;AAEnC,SAAQ,QAAuB;AAG3B,SAAK,YAAY;AACjB,SAAK,UAAU;AAAA,MACX,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT,oBAAoB;AAAA,MACpB,YAAY;AAAA,QACR,WAAW;AAAA,QACX,MAAM;AAAA,MACV;AAAA,MACA,GAAG;AAAA,IACP;AAGA,SAAK,UAAU,UAAU,IAAI,KAAK,QAAQ,WAAW,aAAa,EAAE;AAGpE,SAAK,YAAY;AACjB,SAAK,oBAAoB;AAAA,EAC7B;AAAA,EAEQ,cAAc;AAElB,SAAK,MAAM,QAAQ,UAAQ,KAAK,OAAO,CAAC;AACxC,SAAK,QAAQ,CAAC;AAGd,UAAM,WAAW,SAAS,uBAAuB;AAGjD,SAAK,QAAQ,MAAM,QAAQ,cAAY;AACnC,YAAM,cAAc,KAAK,QAAQ,WAAW,QAAQ;AACpD,kBAAY,UAAU,IAAI,KAAK,QAAQ,WAAW,QAAO,EAAE;AAC3D,eAAS,YAAY,WAAW;AAChC,WAAK,MAAM,KAAK,WAAW;AAAA,IAC/B,CAAC;AAED,SAAK,UAAU,YAAY,QAAQ;AACnC,SAAK,aAAa;AAAA,EACtB;AAAA,EAEQ,sBAAsB;AAC1B,SAAK,iBAAiB,IAAI,eAAe,MAAM;AAC3C,UAAI,KAAK,MAAO,sBAAqB,KAAK,KAAK;AAC/C,WAAK,QAAQ,sBAAsB,MAAM,KAAK,aAAa,CAAC;AAAA,IAChE,CAAC;AACD,SAAK,eAAe,QAAQ,KAAK,SAAS;AAAA,EAC9C;AAAA,EAEQ,eAAe;AACnB,UAAM,EAAE,QAAQ,aAAa,SAAS,mBAAmB,IAAI,KAAK;AAClE,UAAM,iBAAiB,KAAK,UAAU;AAGtC,UAAM,UAAU,KAAK,IAAI,GAAG,KAAK,OAAO,iBAAiB,WAAW,cAAc,OAAO,CAAC;AAC1F,UAAM,YAAY,kBAAkB,UAAU,KAAK,UAAU;AAG7D,SAAK,gBAAgB,IAAI,MAAM,OAAO,EAAE,KAAK,CAAC;AAG9C,SAAK,MAAM,QAAQ,CAAC,SAAS;AACzB,YAAM,SAAS,KAAK;AACpB,YAAM,SAAS,KAAK,mBAAmB;AACvC,YAAM,IAAI,UAAU,WAAW;AAC/B,YAAM,IAAI,KAAK,cAAc,MAAM;AAGnC,WAAK,MAAM,QAAQ,GAAG,QAAQ;AAC9B,WAAK,MAAM,YAAY,eAAe,CAAC,OAAO,CAAC;AAC/C,WAAK,MAAM,aAAa,UAClB,aAAa,kBAAkB,YAC/B;AAGN,WAAK,cAAc,MAAM,KAAK,SAAS;AAAA,IAC3C,CAAC;AAGD,UAAM,YAAY,KAAK,IAAI,GAAG,KAAK,aAAa;AAChD,SAAK,UAAU,MAAM,SAAS,GAAG,SAAS;AAAA,EAC9C;AAAA,EAEQ,qBAA6B;AACjC,WAAO,KAAK,cAAc,QAAQ,KAAK,IAAI,GAAG,KAAK,aAAa,CAAC;AAAA,EACrE;AAAA,EAEO,YAAY,UAAe;AAC9B,SAAK,QAAQ,QAAQ;AACrB,SAAK,YAAY;AAAA,EACrB;AAAA,EAEO,UAAU;AACb,SAAK,gBAAgB,WAAW;AAChC,QAAI,KAAK,MAAO,sBAAqB,KAAK,KAAK;AAC/C,SAAK,UAAU,YAAY;AAC3B,SAAK,UAAU,gBAAgB,OAAO;AACtC,SAAK,UAAU,UAAU,OAAO,KAAK,QAAQ,WAAW,aAAa,EAAE;AAAA,EAC3E;AACJ;;;AD1GA,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/MasonrySnapGridLayout.ts"],"sourcesContent":["import './index.css'; // Base CSS styles for MasonrySnapGridLayout\nimport MasonrySnapGridLayout from './MasonrySnapGridLayout';\nimport { MasonrySnapGridLayoutOptions } from './types';\n\n/**\n * Entry point for the MasonrySnapGridLayout package.\n *\n * - Imports the default styles for the layout (`index.css`).\n * - Re-exports the core class and associated type definitions.\n * - This allows consumers to either:\n *    - Import the default class directly.\n *    - Or import named exports for more flexibility.\n */\n\nexport default MasonrySnapGridLayout;\nexport {\n    MasonrySnapGridLayout,\n    MasonrySnapGridLayoutOptions\n};\n","import { MasonrySnapGridLayoutOptions } from './types';\n\n/**\n * MasonrySnapGridLayout\n *\n * A lightweight, generic TypeScript implementation of a responsive Masonry-style grid layout\n * with optional animations, custom rendering, and automatic re-layout on resize.\n *\n * @template T - The type of data items that will be rendered into grid elements.\n */\nexport default class MasonrySnapGridLayout<T = any> {\n    /** The container element where the Masonry grid will be rendered. */\n    private readonly container: HTMLElement;\n\n    /** Fully resolved options object with defaults merged. */\n    private readonly options: Required<MasonrySnapGridLayoutOptions<T>>;\n\n    /** A reference to all grid item elements currently rendered. */\n    private items: HTMLElement[] = [];\n\n    /** Tracks the current heights of each column to position new items. */\n    private columnHeights: number[] = [];\n\n    /** Observes container resizing to trigger re-layout. */\n    private resizeObserver: ResizeObserver | undefined;\n\n    /** Stores requestAnimationFrame ID for layout updates to prevent redundant calls. */\n    private rafId: number | null = null;\n\n    /**\n     * Creates a new MasonrySnapGridLayout instance.\n     *\n     * @param container - The HTML element that will act as the grid container.\n     * @param options - Partial configuration object for layout behavior and rendering.\n     */\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>) {\n        this.container = container;\n\n        // Merge default settings with user-provided options\n        this.options = {\n            gutter: 16,\n            minColWidth: 250,\n            animate: true,\n            transitionDuration: 400,\n            classNames: {\n                container: 'masonry-snap-grid-container',\n                item: 'masonry-snap-grid-item',\n            },\n            ...options,\n        };\n\n        // Apply base container class for styling\n        this.container.classList.add(this.options.classNames.container || \"\");\n\n        // Initial rendering and layout setup\n        this.renderItems();\n        this.setupResizeObserver();\n    }\n\n    /**\n     * Renders the provided items into the container.\n     * Clears previous items and re-builds DOM structure.\n     */\n    private renderItems() {\n        // Remove any previously rendered items\n        this.items.forEach(item => item.remove());\n        this.items = [];\n\n        // Use DocumentFragment for efficient DOM updates\n        const fragment = document.createDocumentFragment();\n\n        // Create elements for each item and append to fragment\n        this.options.items.forEach(itemData => {\n            const itemElement = this.options.renderItem(itemData);\n            itemElement.classList.add(this.options.classNames.item || \"\");\n            fragment.appendChild(itemElement);\n            this.items.push(itemElement);\n        });\n\n        // Append all items to container at once\n        this.container.appendChild(fragment);\n\n        // Trigger layout positioning\n        this.updateLayout();\n    }\n\n    /**\n     * Sets up a ResizeObserver to re-calculate layout when container size changes.\n     */\n    private setupResizeObserver() {\n        this.resizeObserver = new ResizeObserver(() => {\n            // Throttle updates to animation frame to avoid layout thrashing\n            if (this.rafId) cancelAnimationFrame(this.rafId);\n            this.rafId = requestAnimationFrame(() => this.updateLayout());\n        });\n        this.resizeObserver.observe(this.container);\n    }\n\n    /**\n     * Calculates item positions and updates their transforms.\n     * Also adjusts the container height to fit all items.\n     */\n    private updateLayout() {\n        const { gutter, minColWidth, animate, transitionDuration } = this.options;\n        const containerWidth = this.container.clientWidth;\n\n        // Determine number of columns based on available width and minColWidth\n        const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\n\n        // Calculate actual column width including gutters\n        const colWidth = (containerWidth - (columns - 1) * gutter) / columns;\n\n        // Reset heights for all columns\n        this.columnHeights = new Array(columns).fill(0);\n\n        // Position each item in the shortest column\n        this.items.forEach((item) => {\n            const height = item.offsetHeight;\n            const minCol = this.findShortestColumn();\n            const x = minCol * (colWidth + gutter);\n            const y = this.columnHeights[minCol];\n\n            // Apply positioning and animation\n            item.style.width = `${colWidth}px`;\n            item.style.transform = `translate3d(${x}px, ${y}px, 0)`;\n            item.style.transition = animate\n                ? `transform ${transitionDuration}ms ease`\n                : 'none';\n\n            // Update column height to account for this item\n            this.columnHeights[minCol] += height + gutter;\n        });\n\n        // Set container height to the tallest column\n        const maxHeight = Math.max(...this.columnHeights);\n        this.container.style.height = `${maxHeight}px`;\n    }\n\n    /**\n     * Finds the index of the column with the smallest total height.\n     *\n     * @returns Index of the shortest column.\n     */\n    private findShortestColumn(): number {\n        return this.columnHeights.indexOf(Math.min(...this.columnHeights));\n    }\n\n    /**\n     * Replaces current items with a new set and re-renders the layout.\n     *\n     * @param newItems - New set of data items to render.\n     */\n    public updateItems(newItems: T[]) {\n        this.options.items = newItems;\n        this.renderItems();\n    }\n\n    /**\n     * Cleans up event listeners, observers, and DOM modifications.\n     * This should be called before discarding the instance.\n     */\n    public destroy() {\n        this.resizeObserver?.disconnect();\n        if (this.rafId) cancelAnimationFrame(this.rafId);\n        this.container.innerHTML = '';\n        this.container.removeAttribute('style');\n        this.container.classList.remove(this.options.classNames.container || \"\");\n    }\n}\n"],"mappings":"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","names":[]}

package/dist/react.d.cts

@@ -1,14 +1,37 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as MasonrySnapGridLayoutOptions, b as MasonrySnapGridRef } from './MasonrySnapGridLayout-D7ctVJaF.cjs';
+import { a as MasonrySnapGridLayoutOptions, b as MasonrySnapGridRef } from './MasonrySnapGridLayout-CPmdhc_q.cjs';
 
+/**
+ * Props for the MasonrySnapGrid React component.
+ *
+ * @template T - The type of items in the masonry layout.
+ */
 interface MasonrySnapGridProps<T> extends Omit<MasonrySnapGridLayoutOptions<T>, 'items' | 'renderItem'> {
+    /** Array of data items to be rendered into the masonry grid. */
     items: T[];
+    /** Function that renders a single data item as a React node. */
     renderItem: (item: T) => React.ReactNode;
+    /** Optional class name for the container. */
     className?: string;
+    /** Optional inline styles for the container. */
     style?: React.CSSProperties;
 }
+/**
+ * Internal component that bridges MasonrySnapGridLayout with React.
+ *
+ * - Manages lifecycle of the underlying MasonrySnapGridLayout instance.
+ * - Uses ReactDOM.createRoot to render React nodes into non-React DOM elements.
+ * - Handles cleanup to avoid memory leaks.
+ */
 declare const MasonrySnapGridInner: <T>({ items, renderItem, className, style, ...options }: MasonrySnapGridProps<T>, ref: React.ForwardedRef<MasonrySnapGridRef>) => react_jsx_runtime.JSX.Element;
+/**
+ * MasonrySnapGrid
+ *
+ * React wrapper component for MasonrySnapGridLayout.
+ *
+ * @template T - The type of items in the masonry layout.
+ */
 declare const MasonrySnapGrid: <T>(props: MasonrySnapGridProps<T> & {
     ref?: React.ForwardedRef<MasonrySnapGridRef>;
 }) => ReturnType<typeof MasonrySnapGridInner>;

package/dist/react.d.ts

@@ -1,14 +1,37 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as MasonrySnapGridLayoutOptions, b as MasonrySnapGridRef } from './MasonrySnapGridLayout-D7ctVJaF.js';
+import { a as MasonrySnapGridLayoutOptions, b as MasonrySnapGridRef } from './MasonrySnapGridLayout-CPmdhc_q.js';
 
+/**
+ * Props for the MasonrySnapGrid React component.
+ *
+ * @template T - The type of items in the masonry layout.
+ */
 interface MasonrySnapGridProps<T> extends Omit<MasonrySnapGridLayoutOptions<T>, 'items' | 'renderItem'> {
+    /** Array of data items to be rendered into the masonry grid. */
     items: T[];
+    /** Function that renders a single data item as a React node. */
     renderItem: (item: T) => React.ReactNode;
+    /** Optional class name for the container. */
     className?: string;
+    /** Optional inline styles for the container. */
     style?: React.CSSProperties;
 }
+/**
+ * Internal component that bridges MasonrySnapGridLayout with React.
+ *
+ * - Manages lifecycle of the underlying MasonrySnapGridLayout instance.
+ * - Uses ReactDOM.createRoot to render React nodes into non-React DOM elements.
+ * - Handles cleanup to avoid memory leaks.
+ */
 declare const MasonrySnapGridInner: <T>({ items, renderItem, className, style, ...options }: MasonrySnapGridProps<T>, ref: React.ForwardedRef<MasonrySnapGridRef>) => react_jsx_runtime.JSX.Element;
+/**
+ * MasonrySnapGrid
+ *
+ * React wrapper component for MasonrySnapGridLayout.
+ *
+ * @template T - The type of items in the masonry layout.
+ */
 declare const MasonrySnapGrid: <T>(props: MasonrySnapGridProps<T> & {
     ref?: React.ForwardedRef<MasonrySnapGridRef>;
 }) => ReturnType<typeof MasonrySnapGridInner>;

package/dist/react.js

@@ -38,9 +38,18 @@ var import_client = __toESM(require("react-dom/client"), 1);
 
 // src/MasonrySnapGridLayout.ts
 var MasonrySnapGridLayout = class {
+  /**
+   * Creates a new MasonrySnapGridLayout instance.
+   *
+   * @param container - The HTML element that will act as the grid container.
+   * @param options - Partial configuration object for layout behavior and rendering.
+   */
   constructor(container, options) {
+    /** A reference to all grid item elements currently rendered. */
     this.items = [];
+    /** Tracks the current heights of each column to position new items. */
     this.columnHeights = [];
+    /** Stores requestAnimationFrame ID for layout updates to prevent redundant calls. */
     this.rafId = null;
     this.container = container;
     this.options = {
@@ -58,6 +67,10 @@ var MasonrySnapGridLayout = class {
     this.renderItems();
     this.setupResizeObserver();
   }
+  /**
+   * Renders the provided items into the container.
+   * Clears previous items and re-builds DOM structure.
+   */
   renderItems() {
     this.items.forEach((item) => item.remove());
     this.items = [];
@@ -71,6 +84,9 @@ var MasonrySnapGridLayout = class {
     this.container.appendChild(fragment);
     this.updateLayout();
   }
+  /**
+   * Sets up a ResizeObserver to re-calculate layout when container size changes.
+   */
   setupResizeObserver() {
     this.resizeObserver = new ResizeObserver(() => {
       if (this.rafId) cancelAnimationFrame(this.rafId);
@@ -78,6 +94,10 @@ var MasonrySnapGridLayout = class {
     });
     this.resizeObserver.observe(this.container);
   }
+  /**
+   * Calculates item positions and updates their transforms.
+   * Also adjusts the container height to fit all items.
+   */
   updateLayout() {
     const { gutter, minColWidth, animate, transitionDuration } = this.options;
     const containerWidth = this.container.clientWidth;
@@ -97,13 +117,27 @@ var MasonrySnapGridLayout = class {
     const maxHeight = Math.max(...this.columnHeights);
     this.container.style.height = `${maxHeight}px`;
   }
+  /**
+   * Finds the index of the column with the smallest total height.
+   *
+   * @returns Index of the shortest column.
+   */
   findShortestColumn() {
     return this.columnHeights.indexOf(Math.min(...this.columnHeights));
   }
+  /**
+   * Replaces current items with a new set and re-renders the layout.
+   *
+   * @param newItems - New set of data items to render.
+   */
   updateItems(newItems) {
     this.options.items = newItems;
     this.renderItems();
   }
+  /**
+   * Cleans up event listeners, observers, and DOM modifications.
+   * This should be called before discarding the instance.
+   */
   destroy() {
     this.resizeObserver?.disconnect();
     if (this.rafId) cancelAnimationFrame(this.rafId);

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/react.tsx","../src/MasonrySnapGridLayout.ts"],"sourcesContent":["import React, {\n    useEffect,\n    useRef,\n    forwardRef,\n    useImperativeHandle,\n} from 'react';\nimport ReactDOM from 'react-dom/client';\nimport MasonrySnapGridLayout from './MasonrySnapGridLayout';\nimport {\n    MasonrySnapGridLayoutOptions,\n    MasonrySnapGridRef,\n} from './types';\n\ninterface MasonrySnapGridProps<T>\n    extends Omit<MasonrySnapGridLayoutOptions<T>, 'items' | 'renderItem'> {\n    items: T[];\n    renderItem: (item: T) => React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst MasonrySnapGridInner = <T,>(\n    {\n        items,\n        renderItem,\n        className,\n        style,\n        ...options\n    }: MasonrySnapGridProps<T>,\n    ref: React.ForwardedRef<MasonrySnapGridRef>\n) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const masonryRef = useRef<MasonrySnapGridLayout<T> | null>(null);\n    const rootsRef = useRef<Map<HTMLElement, ReactDOM.Root>>(new Map());\n\n    // Initialize masonry layout\n    useEffect(() => {\n        if (!containerRef.current) return;\n\n        masonryRef.current = new MasonrySnapGridLayout(containerRef.current, {\n            ...options,\n            items,\n            renderItem: (item) => {\n                const div = document.createElement('div');\n                const root = ReactDOM.createRoot(div);\n                root.render(renderItem(item));\n                rootsRef.current.set(div, root);\n                return div;\n            },\n        });\n\n        return () => {\n            // Proper cleanup\n            rootsRef.current.forEach((root, div) => {\n                root.unmount();\n                div.remove();\n            });\n            rootsRef.current.clear();\n            masonryRef.current?.destroy();\n            masonryRef.current = null;\n        };\n    }, [options, renderItem]);\n\n    // Update items on change\n    useEffect(() => {\n        if (masonryRef.current) {\n            masonryRef.current.updateItems(items);\n        }\n    }, [items]);\n\n\n    return (\n        <div\n            ref={containerRef}\n            className={className}\n            style={{ position: 'relative', width: '100%', ...style }}\n        />\n    );\n};\n\n// Properly typed forwardRef component\nconst MasonrySnapGrid = forwardRef(MasonrySnapGridInner) as <T>(\n    props: MasonrySnapGridProps<T> & { ref?: React.ForwardedRef<MasonrySnapGridRef> }\n) => ReturnType<typeof MasonrySnapGridInner>;\n\nexport default MasonrySnapGrid;","import { MasonrySnapGridLayoutOptions } from './types';\n\nexport default class MasonrySnapGridLayout<T = any> {\n    private readonly container: HTMLElement;\n    private readonly options: Required<MasonrySnapGridLayoutOptions<T>>;\n    private items: HTMLElement[] = [];\n    private columnHeights: number[] = [];\n    private resizeObserver: ResizeObserver | undefined;\n    private rafId: number | null = null;\n\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>) {\n        this.container = container;\n        this.options = {\n            gutter: 16,\n            minColWidth: 250,\n            animate: true,\n            transitionDuration: 400,\n            classNames: {\n                container: 'masonry-snap-grid-container',\n                item: 'masonry-snap-grid-item',\n            },\n            ...options,\n        };\n\n        // Apply container class\n        this.container.classList.add(this.options.classNames.container || \"\");\n\n        // Initialize\n        this.renderItems();\n        this.setupResizeObserver();\n    }\n\n    private renderItems() {\n        // Clear existing items\n        this.items.forEach(item => item.remove());\n        this.items = [];\n\n        // Create fragment for batch DOM insertion\n        const fragment = document.createDocumentFragment();\n\n        // Create and append items\n        this.options.items.forEach(itemData => {\n            const itemElement = this.options.renderItem(itemData);\n            itemElement.classList.add(this.options.classNames.item|| \"\");\n            fragment.appendChild(itemElement);\n            this.items.push(itemElement);\n        });\n\n        this.container.appendChild(fragment);\n        this.updateLayout();\n    }\n\n    private setupResizeObserver() {\n        this.resizeObserver = new ResizeObserver(() => {\n            if (this.rafId) cancelAnimationFrame(this.rafId);\n            this.rafId = requestAnimationFrame(() => this.updateLayout());\n        });\n        this.resizeObserver.observe(this.container);\n    }\n\n    private updateLayout() {\n        const { gutter, minColWidth, animate, transitionDuration } = this.options;\n        const containerWidth = this.container.clientWidth;\n\n        // Calculate columns\n        const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\n        const colWidth = (containerWidth - (columns - 1) * gutter) / columns;\n\n        // Reset column heights\n        this.columnHeights = new Array(columns).fill(0);\n\n        // Position items\n        this.items.forEach((item) => {\n            const height = item.offsetHeight;\n            const minCol = this.findShortestColumn();\n            const x = minCol * (colWidth + gutter);\n            const y = this.columnHeights[minCol];\n\n            // Apply position and size\n            item.style.width = `${colWidth}px`;\n            item.style.transform = `translate3d(${x}px, ${y}px, 0)`;\n            item.style.transition = animate\n                ? `transform ${transitionDuration}ms ease`\n                : 'none';\n\n            // Update column height\n            this.columnHeights[minCol] += height + gutter;\n        });\n\n        // Set container height\n        const maxHeight = Math.max(...this.columnHeights);\n        this.container.style.height = `${maxHeight}px`;\n    }\n\n    private findShortestColumn(): number {\n        return this.columnHeights.indexOf(Math.min(...this.columnHeights));\n    }\n\n    public updateItems(newItems: T[]) {\n        this.options.items = newItems;\n        this.renderItems();\n    }\n\n    public destroy() {\n        this.resizeObserver?.disconnect();\n        if (this.rafId) cancelAnimationFrame(this.rafId);\n        this.container.innerHTML = '';\n        this.container.removeAttribute('style');\n        this.container.classList.remove(this.options.classNames.container || \"\");\n    }\n}"],"mappings":"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","names":["ReactDOM"]}
+{"version":3,"sources":["../src/react.tsx","../src/MasonrySnapGridLayout.ts"],"sourcesContent":["import React, {\n    useEffect,\n    useRef,\n    forwardRef,\n    useImperativeHandle,\n} from 'react';\nimport ReactDOM from 'react-dom/client';\nimport MasonrySnapGridLayout from './MasonrySnapGridLayout';\nimport {\n    MasonrySnapGridLayoutOptions,\n    MasonrySnapGridRef,\n} from './types';\n\n/**\n * Props for the MasonrySnapGrid React component.\n *\n * @template T - The type of items in the masonry layout.\n */\ninterface MasonrySnapGridProps<T>\n    extends Omit<MasonrySnapGridLayoutOptions<T>, 'items' | 'renderItem'> {\n    /** Array of data items to be rendered into the masonry grid. */\n    items: T[];\n\n    /** Function that renders a single data item as a React node. */\n    renderItem: (item: T) => React.ReactNode;\n\n    /** Optional class name for the container. */\n    className?: string;\n\n    /** Optional inline styles for the container. */\n    style?: React.CSSProperties;\n}\n\n/**\n * Internal component that bridges MasonrySnapGridLayout with React.\n *\n * - Manages lifecycle of the underlying MasonrySnapGridLayout instance.\n * - Uses ReactDOM.createRoot to render React nodes into non-React DOM elements.\n * - Handles cleanup to avoid memory leaks.\n */\nconst MasonrySnapGridInner = <T,>(\n    {\n        items,\n        renderItem,\n        className,\n        style,\n        ...options\n    }: MasonrySnapGridProps<T>,\n    ref: React.ForwardedRef<MasonrySnapGridRef>\n) => {\n    /** Ref to the container DOM element where MasonrySnapGridLayout will operate. */\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    /** Ref to the MasonrySnapGridLayout instance (non-React logic). */\n    const masonryRef = useRef<MasonrySnapGridLayout<T> | null>(null);\n\n    /** Tracks all mounted React roots for cleanup. */\n    const rootsRef = useRef<Map<HTMLElement, ReactDOM.Root>>(new Map());\n\n    // Initialize masonry layout when container mounts\n    useEffect(() => {\n        if (!containerRef.current) return;\n\n        masonryRef.current = new MasonrySnapGridLayout(containerRef.current, {\n            ...options,\n            items,\n            renderItem: (item) => {\n                // Create a standalone DOM element for each item\n                const div = document.createElement('div');\n\n                // Render React content into this element\n                const root = ReactDOM.createRoot(div);\n                root.render(renderItem(item));\n\n                // Keep track of the React root for later cleanup\n                rootsRef.current.set(div, root);\n\n                return div;\n            },\n        });\n\n        return () => {\n            // Clean up all React roots and remove their DOM nodes\n            rootsRef.current.forEach((root, div) => {\n                root.unmount();\n                div.remove();\n            });\n            rootsRef.current.clear();\n\n            // Destroy the Masonry instance\n            masonryRef.current?.destroy();\n            masonryRef.current = null;\n        };\n    }, [options, renderItem]);\n\n    // Update only the items when the data changes (avoid full re-initialization)\n    useEffect(() => {\n        if (masonryRef.current) {\n            masonryRef.current.updateItems(items);\n        }\n    }, [items]);\n\n    return (\n        <div\n            ref={containerRef}\n            className={className}\n            style={{ position: 'relative', width: '100%', ...style }}\n        />\n    );\n};\n\n/**\n * MasonrySnapGrid\n *\n * React wrapper component for MasonrySnapGridLayout.\n *\n * @template T - The type of items in the masonry layout.\n */\nconst MasonrySnapGrid = forwardRef(MasonrySnapGridInner) as <T>(\n    props: MasonrySnapGridProps<T> & { ref?: React.ForwardedRef<MasonrySnapGridRef> }\n) => ReturnType<typeof MasonrySnapGridInner>;\n\nexport default MasonrySnapGrid;\n","import { MasonrySnapGridLayoutOptions } from './types';\n\n/**\n * MasonrySnapGridLayout\n *\n * A lightweight, generic TypeScript implementation of a responsive Masonry-style grid layout\n * with optional animations, custom rendering, and automatic re-layout on resize.\n *\n * @template T - The type of data items that will be rendered into grid elements.\n */\nexport default class MasonrySnapGridLayout<T = any> {\n    /** The container element where the Masonry grid will be rendered. */\n    private readonly container: HTMLElement;\n\n    /** Fully resolved options object with defaults merged. */\n    private readonly options: Required<MasonrySnapGridLayoutOptions<T>>;\n\n    /** A reference to all grid item elements currently rendered. */\n    private items: HTMLElement[] = [];\n\n    /** Tracks the current heights of each column to position new items. */\n    private columnHeights: number[] = [];\n\n    /** Observes container resizing to trigger re-layout. */\n    private resizeObserver: ResizeObserver | undefined;\n\n    /** Stores requestAnimationFrame ID for layout updates to prevent redundant calls. */\n    private rafId: number | null = null;\n\n    /**\n     * Creates a new MasonrySnapGridLayout instance.\n     *\n     * @param container - The HTML element that will act as the grid container.\n     * @param options - Partial configuration object for layout behavior and rendering.\n     */\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>) {\n        this.container = container;\n\n        // Merge default settings with user-provided options\n        this.options = {\n            gutter: 16,\n            minColWidth: 250,\n            animate: true,\n            transitionDuration: 400,\n            classNames: {\n                container: 'masonry-snap-grid-container',\n                item: 'masonry-snap-grid-item',\n            },\n            ...options,\n        };\n\n        // Apply base container class for styling\n        this.container.classList.add(this.options.classNames.container || \"\");\n\n        // Initial rendering and layout setup\n        this.renderItems();\n        this.setupResizeObserver();\n    }\n\n    /**\n     * Renders the provided items into the container.\n     * Clears previous items and re-builds DOM structure.\n     */\n    private renderItems() {\n        // Remove any previously rendered items\n        this.items.forEach(item => item.remove());\n        this.items = [];\n\n        // Use DocumentFragment for efficient DOM updates\n        const fragment = document.createDocumentFragment();\n\n        // Create elements for each item and append to fragment\n        this.options.items.forEach(itemData => {\n            const itemElement = this.options.renderItem(itemData);\n            itemElement.classList.add(this.options.classNames.item || \"\");\n            fragment.appendChild(itemElement);\n            this.items.push(itemElement);\n        });\n\n        // Append all items to container at once\n        this.container.appendChild(fragment);\n\n        // Trigger layout positioning\n        this.updateLayout();\n    }\n\n    /**\n     * Sets up a ResizeObserver to re-calculate layout when container size changes.\n     */\n    private setupResizeObserver() {\n        this.resizeObserver = new ResizeObserver(() => {\n            // Throttle updates to animation frame to avoid layout thrashing\n            if (this.rafId) cancelAnimationFrame(this.rafId);\n            this.rafId = requestAnimationFrame(() => this.updateLayout());\n        });\n        this.resizeObserver.observe(this.container);\n    }\n\n    /**\n     * Calculates item positions and updates their transforms.\n     * Also adjusts the container height to fit all items.\n     */\n    private updateLayout() {\n        const { gutter, minColWidth, animate, transitionDuration } = this.options;\n        const containerWidth = this.container.clientWidth;\n\n        // Determine number of columns based on available width and minColWidth\n        const columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\n\n        // Calculate actual column width including gutters\n        const colWidth = (containerWidth - (columns - 1) * gutter) / columns;\n\n        // Reset heights for all columns\n        this.columnHeights = new Array(columns).fill(0);\n\n        // Position each item in the shortest column\n        this.items.forEach((item) => {\n            const height = item.offsetHeight;\n            const minCol = this.findShortestColumn();\n            const x = minCol * (colWidth + gutter);\n            const y = this.columnHeights[minCol];\n\n            // Apply positioning and animation\n            item.style.width = `${colWidth}px`;\n            item.style.transform = `translate3d(${x}px, ${y}px, 0)`;\n            item.style.transition = animate\n                ? `transform ${transitionDuration}ms ease`\n                : 'none';\n\n            // Update column height to account for this item\n            this.columnHeights[minCol] += height + gutter;\n        });\n\n        // Set container height to the tallest column\n        const maxHeight = Math.max(...this.columnHeights);\n        this.container.style.height = `${maxHeight}px`;\n    }\n\n    /**\n     * Finds the index of the column with the smallest total height.\n     *\n     * @returns Index of the shortest column.\n     */\n    private findShortestColumn(): number {\n        return this.columnHeights.indexOf(Math.min(...this.columnHeights));\n    }\n\n    /**\n     * Replaces current items with a new set and re-renders the layout.\n     *\n     * @param newItems - New set of data items to render.\n     */\n    public updateItems(newItems: T[]) {\n        this.options.items = newItems;\n        this.renderItems();\n    }\n\n    /**\n     * Cleans up event listeners, observers, and DOM modifications.\n     * This should be called before discarding the instance.\n     */\n    public destroy() {\n        this.resizeObserver?.disconnect();\n        if (this.rafId) cancelAnimationFrame(this.rafId);\n        this.container.innerHTML = '';\n        this.container.removeAttribute('style');\n        this.container.classList.remove(this.options.classNames.container || \"\");\n    }\n}\n"],"mappings":"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","names":["ReactDOM"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masonry-snap-grid-layout",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "A performant, responsive masonry layout library with smooth animations, dynamic columns, and zero dependencies.",
   "keywords": [
     "masonry",

package/dist/MasonrySnapGridLayout-D7ctVJaF.d.cts

@@ -1,34 +0,0 @@
-interface MasonrySnapGridLayoutClassNames {
-    container?: string;
-    item?: string;
-}
-interface MasonrySnapGridLayoutOptions<T = unknown> {
-    gutter?: number;
-    minColWidth?: number;
-    animate?: boolean;
-    transitionDuration?: number;
-    items: T[];
-    renderItem: (item: T) => HTMLElement;
-    classNames?: MasonrySnapGridLayoutClassNames;
-}
-interface MasonrySnapGridRef {
-    layout: MasonrySnapGridLayout | null;
-}
-
-declare class MasonrySnapGridLayout<T = any> {
-    private readonly container;
-    private readonly options;
-    private items;
-    private columnHeights;
-    private resizeObserver;
-    private rafId;
-    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>);
-    private renderItems;
-    private setupResizeObserver;
-    private updateLayout;
-    private findShortestColumn;
-    updateItems(newItems: T[]): void;
-    destroy(): void;
-}
-
-export { MasonrySnapGridLayout as M, type MasonrySnapGridLayoutOptions as a, type MasonrySnapGridRef as b };

package/dist/MasonrySnapGridLayout-D7ctVJaF.d.ts

@@ -1,34 +0,0 @@
-interface MasonrySnapGridLayoutClassNames {
-    container?: string;
-    item?: string;
-}
-interface MasonrySnapGridLayoutOptions<T = unknown> {
-    gutter?: number;
-    minColWidth?: number;
-    animate?: boolean;
-    transitionDuration?: number;
-    items: T[];
-    renderItem: (item: T) => HTMLElement;
-    classNames?: MasonrySnapGridLayoutClassNames;
-}
-interface MasonrySnapGridRef {
-    layout: MasonrySnapGridLayout | null;
-}
-
-declare class MasonrySnapGridLayout<T = any> {
-    private readonly container;
-    private readonly options;
-    private items;
-    private columnHeights;
-    private resizeObserver;
-    private rafId;
-    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions<T>);
-    private renderItems;
-    private setupResizeObserver;
-    private updateLayout;
-    private findShortestColumn;
-    updateItems(newItems: T[]): void;
-    destroy(): void;
-}
-
-export { MasonrySnapGridLayout as M, type MasonrySnapGridLayoutOptions as a, type MasonrySnapGridRef as b };