@shohojdhara/atomix 0.3.3 → 0.3.5

package/dist/layout.d.ts

@@ -0,0 +1,300 @@
+import React, { HTMLAttributes, ReactNode } from 'react';
+
+interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content to be rendered within the grid
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Control the horizontal alignment of items
+     */
+    justifyContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+    /**
+     * Control the vertical alignment of items
+     */
+    alignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+    /**
+     * No gutters between columns
+     */
+    noGutters?: boolean;
+    /**
+     * Flex direction
+     */
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    /**
+     * Wrap behavior
+     */
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+}
+/**
+ * Grid component for creating responsive layouts.
+ * Uses the CSS grid system defined in _objects.grid.scss.
+ *
+ * @example
+ * ```tsx
+ * <Grid>
+ *   <GridCol sm={6} md={4} lg={3}>Column content</GridCol>
+ *   <GridCol sm={6} md={4} lg={3}>Column content</GridCol>
+ *   <GridCol sm={6} md={4} lg={3}>Column content</GridCol>
+ * </Grid>
+ * ```
+ */
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+
+interface MasonryGridProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content to be rendered within the masonry grid
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Number of columns at extra small breakpoint (default)
+     */
+    xs?: number;
+    /**
+     * Number of columns at small breakpoint
+     */
+    sm?: number;
+    /**
+     * Number of columns at medium breakpoint
+     */
+    md?: number;
+    /**
+     * Number of columns at large breakpoint
+     */
+    lg?: number;
+    /**
+     * Number of columns at extra large breakpoint
+     */
+    xl?: number;
+    /**
+     * Number of columns at extra extra large breakpoint
+     */
+    xxl?: number;
+    /**
+     * Gap between items (in pixels)
+     */
+    gap?: number;
+    /**
+     * Whether to animate item transitions
+     */
+    animate?: boolean;
+    /**
+     * Whether to handle image loading to prevent layout shifts
+     * When true, items will be shown immediately and positions updated as images load
+     */
+    imagesLoaded?: boolean;
+    /**
+     * Callback fired when all images are loaded and layout is complete
+     */
+    onLayoutComplete?: () => void;
+    /**
+     * Callback fired each time an image loads and layout is updated
+     */
+    onImageLoad?: (loadedCount: number, totalCount: number) => void;
+}
+/**
+ * MasonryGrid component for creating a responsive masonry layout.
+ * Uses JavaScript to position items optimally based on available vertical space,
+ * similar to how a mason fits stones in a wall.
+ *
+ * @example
+ * ```tsx
+ * <MasonryGrid xs={1} sm={2} md={3} lg={4}>
+ *   <MasonryGridItem>Item 1</MasonryGridItem>
+ *   <MasonryGridItem>Item 2</MasonryGridItem>
+ *   <MasonryGridItem>Item 3</MasonryGridItem>
+ * </MasonryGrid>
+ * ```
+ */
+declare const MasonryGrid: React.ForwardRefExoticComponent<MasonryGridProps & React.RefAttributes<HTMLDivElement>>;
+
+interface GridColProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content to be rendered within the column
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Number of columns to span at extra small breakpoint (default)
+     */
+    xs?: number | 'auto' | boolean;
+    /**
+     * Number of columns to span at small breakpoint
+     */
+    sm?: number | 'auto' | boolean;
+    /**
+     * Number of columns to span at medium breakpoint
+     */
+    md?: number | 'auto' | boolean;
+    /**
+     * Number of columns to span at large breakpoint
+     */
+    lg?: number | 'auto' | boolean;
+    /**
+     * Number of columns to span at extra large breakpoint
+     */
+    xl?: number | 'auto' | boolean;
+    /**
+     * Number of columns to span at extra extra large breakpoint
+     */
+    xxl?: number | 'auto' | boolean;
+    /**
+     * Offset at extra small breakpoint
+     */
+    offsetXs?: number;
+    /**
+     * Offset at small breakpoint
+     */
+    offsetSm?: number;
+    /**
+     * Offset at medium breakpoint
+     */
+    offsetMd?: number;
+    /**
+     * Offset at large breakpoint
+     */
+    offsetLg?: number;
+    /**
+     * Offset at extra large breakpoint
+     */
+    offsetXl?: number;
+    /**
+     * Offset at extra extra large breakpoint
+     */
+    offsetXxl?: number;
+    /**
+     * Flex grow property
+     */
+    grow?: boolean;
+    /**
+     * Flex shrink property
+     */
+    shrink?: boolean;
+    /**
+     * Flex basis property
+     */
+    basis?: string;
+    /**
+     * Alignment of the column
+     */
+    align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+}
+/**
+ * GridCol component for creating columns within a Grid.
+ * Uses the CSS grid column classes defined in _objects.grid.scss.
+ */
+declare const GridCol: React.ForwardRefExoticComponent<GridColProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content to be rendered within the container
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Container type:
+     * - undefined: responsive container with max-width at each breakpoint
+     * - 'fluid': full width container
+     * - 'sm', 'md', 'lg', 'xl', 'xxl': responsive container with max-width at specified breakpoint
+     */
+    type?: 'fluid' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+}
+/**
+ * Container component for creating responsive layouts.
+ * Uses the CSS container classes defined in _objects.container.scss.
+ *
+ * @example
+ * ```tsx
+ * <Container>
+ *   Content with responsive max-width
+ * </Container>
+ *
+ * <Container type="fluid">
+ *   Full width content
+ * </Container>
+ *
+ * <Container type="md">
+ *   Content with max-width at md breakpoint
+ * </Container>
+ * ```
+ */
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
+
+interface RowProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content to be rendered within the row
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Control the horizontal alignment of items
+     */
+    justifyContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+    /**
+     * Control the vertical alignment of items
+     */
+    alignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+    /**
+     * No gutters between columns
+     */
+    noGutters?: boolean;
+}
+/**
+ * Row component for creating rows within a Grid or Container.
+ * Uses the CSS row classes defined in _objects.grid.scss.
+ *
+ * @example
+ * ```tsx
+ * <Container>
+ *   <Row justifyContent="between" alignItems="center">
+ *     <GridCol md={6}>Column content</GridCol>
+ *     <GridCol md={6}>Column content</GridCol>
+ *   </Row>
+ * </Container>
+ * ```
+ */
+declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;
+
+interface MasonryGridItemProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content to be rendered within the masonry grid item
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * MasonryGridItem component for creating items within a MasonryGrid.
+ * Each item will be positioned optimally by the parent MasonryGrid component.
+ *
+ * @example
+ * ```tsx
+ * <MasonryGrid>
+ *   <MasonryGridItem>Item 1</MasonryGridItem>
+ *   <MasonryGridItem>Item 2</MasonryGridItem>
+ * </MasonryGrid>
+ * ```
+ */
+declare const MasonryGridItem: React.ForwardRefExoticComponent<MasonryGridItemProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Container, Grid, GridCol, MasonryGrid, MasonryGridItem, Row };
+export type { ContainerProps, GridColProps, GridProps, MasonryGridItemProps, MasonryGridProps, RowProps };

package/dist/layout.js

@@ -0,0 +1,336 @@
+import { jsx } from "react/jsx-runtime";
+
+import React, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useCallback, Children, isValidElement } from "react";
+
+/**
+ * Grid component for creating responsive layouts.
+ * Uses the CSS grid system defined in _objects.grid.scss.
+ *
+ * @example
+ * ```tsx
+ * <Grid>
+ *   <GridCol sm={6} md={4} lg={3}>Column content</GridCol>
+ *   <GridCol sm={6} md={4} lg={3}>Column content</GridCol>
+ *   <GridCol sm={6} md={4} lg={3}>Column content</GridCol>
+ * </Grid>
+ * ```
+ */ const Grid =  forwardRef((({children: children, className: className = "", justifyContent: justifyContent, alignItems: alignItems, noGutters: noGutters, direction: direction, wrap: wrap, ...props}, ref) => {
+    const classes = [ "o-grid" ];
+    return justifyContent && classes.push(`u-justify-content-${justifyContent}`), alignItems && classes.push(`u-align-items-${alignItems}`), 
+    noGutters && classes.push("o-grid--no-gutters"), direction && classes.push(`u-flex-direction-${direction}`), 
+    wrap && classes.push(`u-flex-wrap-${wrap}`), className && classes.push(className), 
+    jsx("div", {
+        ref: ref,
+        className: classes.join(" "),
+        ...props,
+        children: children
+    });
+}));
+
+Grid.displayName = "Grid";
+
+/**
+ * MasonryGrid component for creating a responsive masonry layout.
+ * Uses JavaScript to position items optimally based on available vertical space,
+ * similar to how a mason fits stones in a wall.
+ *
+ * @example
+ * ```tsx
+ * <MasonryGrid xs={1} sm={2} md={3} lg={4}>
+ *   <MasonryGridItem>Item 1</MasonryGridItem>
+ *   <MasonryGridItem>Item 2</MasonryGridItem>
+ *   <MasonryGridItem>Item 3</MasonryGridItem>
+ * </MasonryGrid>
+ * ```
+ */
+const MasonryGrid =  forwardRef((({children: children, className: className = "", xs: xs = 1, sm: sm, md: md, lg: lg, xl: xl, xxl: xxl, gap: gap = 16, animate: animate = !0, imagesLoaded: imagesLoaded = !0, onLayoutComplete: onLayoutComplete, onImageLoad: onImageLoad, ...props}, ref) => {
+    // === REFS & STATE ===
+    const [columns, setColumns] = useState(xs), [positions, setPositions] = useState([]), [layoutComplete, setLayoutComplete] = useState(!1), [loadingImages, setLoadingImages] = useState(!1), containerRef = useRef(null), columnHeights = useRef([]), imagesLoadedCount = useRef(0), totalImagesCount = useRef(0), imageElements = useRef(new Map);
+    useEffect((() => {
+        setLoadingImages(!!imagesLoaded);
+    }), [ columns, imagesLoaded ]), 
+    // Forward ref for parent components
+    useImperativeHandle(ref, (() => containerRef.current));
+    // === HANDLE RESPONSIVE COLUMNS ===
+    const getResponsiveColumns = useCallback((() => {
+        const width = window.innerWidth;
+        return width >= 1400 && void 0 !== xxl ? xxl : width >= 1200 && void 0 !== xl ? xl : width >= 992 && void 0 !== lg ? lg : width >= 768 && void 0 !== md ? md : width >= 576 && void 0 !== sm ? sm : xs;
+    }), [ xs, sm, md, lg, xl, xxl ]);
+    useEffect((() => {
+        const handleResize = () => setColumns(getResponsiveColumns());
+        return handleResize(), // Set on mount
+        window.addEventListener("resize", handleResize), () => window.removeEventListener("resize", handleResize);
+    }), [ getResponsiveColumns ]);
+    // === PREPARE ITEMS WITH REFS ===
+    const [items, setItems] = useState([]);
+    useEffect((() => {
+        const newItems = [];
+        Children.forEach(children, ((child, index) => {
+             isValidElement(child) && newItems.push({
+                id: child.key?.toString() || `masonry-item-${index}`,
+                element: child,
+                position: null,
+                ref:  React.createRef()
+            });
+        })), setItems(newItems);
+    }), [ children ]);
+    // === TRACK & MANAGE IMAGES ===
+    const handleImageLoad = useCallback((img => {
+        if (!imageElements.current.get(img)) {
+            // Add loaded class for animation
+            if (imageElements.current.set(img, !0), imagesLoadedCount.current += 1, containerRef.current && imagesLoaded) {
+                const itemElement = img.closest(".o-masonry-grid > div");
+                itemElement && (itemElement.offsetHeight, itemElement.classList.add("o-masonry-grid__item-loaded"), 
+                itemElement.classList.remove("o-masonry-grid__item-loading"));
+            }
+            // Ensure layout is recalculated after DOM paints the item image (prevents overlap on slow/late image loads)
+                        requestAnimationFrame((() => {
+                requestAnimationFrame((() => {
+                    calculateLayout();
+                }));
+            })), onImageLoad?.(imagesLoadedCount.current, totalImagesCount.current), 
+            // If all images have loaded, update loading state and complete layout
+            imagesLoadedCount.current >= totalImagesCount.current && totalImagesCount.current > 0 && (setLayoutComplete(!0), 
+            setLoadingImages(!1), // This ensures the loading class is removed *immediately* after images load
+            // Force a double requestAnimationFrame for final layout calculation after all images are loaded (guarantees DOM paint)
+            requestAnimationFrame((() => {
+                requestAnimationFrame((() => {
+                    calculateLayout(), 
+                    // As a failsafe, if still present for some render lag, force another setLoadingImages(false)
+                    setLoadingImages(!1);
+                }));
+            })), onLayoutComplete?.());
+        }
+    }), [ onImageLoad, onLayoutComplete, imagesLoaded ]), trackImages = useCallback((() => {
+        if (!imagesLoaded || !containerRef.current) return;
+        imageElements.current.clear(), imagesLoadedCount.current = 0;
+        const images = containerRef.current.querySelectorAll("img");
+        return totalImagesCount.current = images.length, 0 === images.length ? (setLayoutComplete(!0), 
+        setLoadingImages(!1), void onLayoutComplete?.()) : (setLoadingImages(!0), images.forEach((img => {
+            const masonryImg = img, itemElement = img.closest(".o-masonry-grid > div");
+            if (itemElement && itemElement.classList.add("o-masonry-grid__item-loading"), img.complete) handleImageLoad(img); else {
+                const loadHandler = () => handleImageLoad(img);
+                img.addEventListener("load", loadHandler), img.addEventListener("error", loadHandler), 
+                masonryImg._masonryLoadHandler = loadHandler;
+            }
+        })), () => {
+            images.forEach((img => {
+                const masonryImg = img;
+                masonryImg._masonryLoadHandler && (img.removeEventListener("load", masonryImg._masonryLoadHandler), 
+                img.removeEventListener("error", masonryImg._masonryLoadHandler), delete masonryImg._masonryLoadHandler);
+            }));
+        });
+    }), [ imagesLoaded, handleImageLoad, onLayoutComplete ]), calculateLayout = useCallback((() => {
+        if (!containerRef.current || 0 === items.length) return;
+        const colWidth = (containerRef.current.offsetWidth - gap * (columns - 1)) / columns;
+        columnHeights.current = Array(columns).fill(0);
+        const newPositions = [];
+        items.forEach(((item, index) => {
+            if (item.ref.current) {
+                // Find the shortest column
+                const shortestCol = columnHeights.current.indexOf(Math.min(...columnHeights.current)), left = shortestCol * (colWidth + gap), top = columnHeights.current[shortestCol] ?? 0, height = item.ref.current.offsetHeight;
+                columnHeights.current[shortestCol] = top + height + gap, newPositions[index] = {
+                    left: left,
+                    top: top,
+                    width: colWidth,
+                    height: height
+                };
+            }
+        })), setPositions(newPositions);
+    }), [ items, columns, gap ]);
+    // === OBSERVE CONTAINER RESIZE ===
+    useEffect((() => {
+        if (!containerRef.current) return;
+        let animationFrame = null;
+        const observer = new ResizeObserver((() => {
+            animationFrame && cancelAnimationFrame(animationFrame), animationFrame = requestAnimationFrame((() => calculateLayout()));
+        }));
+        return observer.observe(containerRef.current), () => {
+            observer.disconnect(), animationFrame && cancelAnimationFrame(animationFrame);
+        };
+    }), [ calculateLayout ]), 
+    // === LAYOUT EFFECT (REPLACES setTimeout) ===
+    React.useLayoutEffect((() => imagesLoaded ? trackImages() : (calculateLayout(), 
+    setLayoutComplete(!0), void setLoadingImages(!1))
+    // Only reset layoutComplete when items or columns change
+    ), [ items, columns, calculateLayout, imagesLoaded, trackImages ]), 
+    // === NEW: Add ResizeObservers to all grid items for bulletproof image+content measurement ===
+    React.useEffect((() => {
+        // Clean up old observers if items ever change
+        const observers = [];
+        return items.forEach((item => {
+            if (item.ref.current) {
+                const obs = new ResizeObserver((() => {
+                    // Double rAF: ensures layout only runs after DOM/paint/async renders
+                    requestAnimationFrame((() => {
+                        requestAnimationFrame((() => {
+                            calculateLayout();
+                        }));
+                    }));
+                }));
+                obs.observe(item.ref.current), observers.push(obs);
+            }
+        })), () => {
+            observers.forEach((obs => obs.disconnect()));
+        };
+    }), [ items, calculateLayout ]);
+    // Ensure loadingImages state resets when items/columns/imagesLoaded change
+    // === DETERMINE CONTAINER HEIGHT ===
+    const containerHeight = columnHeights.current.length > 0 ? Math.max(...columnHeights.current) : 0, classes = [ "o-masonry-grid", className, animate ? "o-masonry-grid--animate" : "", loadingImages ? "o-masonry-grid--loading-images" : "" ].filter(Boolean).join(" ");
+    // === DETERMINE CLASSES ===
+        // === RENDER ===
+    return jsx("div", {
+        ref: containerRef,
+        className: classes,
+        style: {
+            position: "relative",
+            width: "100%",
+            height: `${containerHeight}px`,
+            ...props.style
+        },
+        ...props,
+        children: items.map(((item, index) => {
+            const position = positions[index];
+            return jsx("div", position ? {
+                ref: item.ref,
+                className: "o-masonry-grid__item",
+                style: {
+                    position: "absolute",
+                    left: `${position.left}px`,
+                    top: `${position.top}px`,
+                    width: `${position.width}px`,
+                    opacity: 1
+                },
+                children: item.element
+            } : {
+                ref: item.ref,
+                style: {
+                    opacity: 0,
+                    position: "absolute"
+                },
+                children: item.element
+            }, item.id);
+        }))
+    });
+}));
+
+MasonryGrid.displayName = "MasonryGrid";
+
+/**
+ * GridCol component for creating columns within a Grid.
+ * Uses the CSS grid column classes defined in _objects.grid.scss.
+ */
+const GridCol =  forwardRef((({children: children, className: className = "", xs: xs, sm: sm, md: md, lg: lg, xl: xl, xxl: xxl, offsetXs: offsetXs, offsetSm: offsetSm, offsetMd: offsetMd, offsetLg: offsetLg, offsetXl: offsetXl, offsetXxl: offsetXxl, grow: grow, shrink: shrink, basis: basis, align: align, ...props}, ref) => {
+    // If no specific size is provided, use auto class
+    const classes = xs || sm || md || lg || xl || xxl ? [ "o-grid__col" ] : [ "o-grid__col", "o-grid__col--auto" ], processResponsiveProp = (value, breakpoint) => {
+        void 0 !== value && (
+        // Handle boolean values
+        !0 !== value ? !1 !== value && (
+        // Handle string/number values
+        "xs" === breakpoint ? "auto" === value ? classes.push("o-grid__col--auto") : classes.push(`o-grid__col--${value}`) : "auto" === value ? classes.push(`o-grid__col--${breakpoint}-auto`) : classes.push(`o-grid__col--${breakpoint}-${value}`)) : classes.push("xs" === breakpoint ? "o-grid__col--auto" : `o-grid__col--${breakpoint}-auto`));
+    };
+    // Add column size classes based on the exact SCSS pattern
+    return processResponsiveProp(xs, "xs"), processResponsiveProp(sm, "sm"), processResponsiveProp(md, "md"), 
+    processResponsiveProp(lg, "lg"), processResponsiveProp(xl, "xl"), processResponsiveProp(xxl, "xxl"), 
+    // Add offset classes based on the exact SCSS pattern
+    offsetXs && classes.push(`o-grid__offset--${offsetXs}`), offsetSm && classes.push(`o-grid__offset--sm-${offsetSm}`), 
+    offsetMd && classes.push(`o-grid__offset--md-${offsetMd}`), offsetLg && classes.push(`o-grid__offset--lg-${offsetLg}`), 
+    offsetXl && classes.push(`o-grid__offset--xl-${offsetXl}`), offsetXxl && classes.push(`o-grid__offset--xxl-${offsetXxl}`), 
+    // Add flex properties
+    void 0 !== grow && classes.push(grow ? "u-flex-grow-1" : "u-flex-grow-0"), void 0 !== shrink && classes.push(shrink ? "u-flex-shrink-1" : "u-flex-shrink-0"), 
+    basis && classes.push(`u-flex-basis-${basis}`), align && classes.push(`u-align-self-${align}`), 
+    className && classes.push(className), jsx("div", {
+        ref: ref,
+        className: classes.join(" "),
+        ...props,
+        children: children
+    });
+}));
+
+GridCol.displayName = "GridCol";
+
+/**
+ * Container component for creating responsive layouts.
+ * Uses the CSS container classes defined in _objects.container.scss.
+ *
+ * @example
+ * ```tsx
+ * <Container>
+ *   Content with responsive max-width
+ * </Container>
+ *
+ * <Container type="fluid">
+ *   Full width content
+ * </Container>
+ *
+ * <Container type="md">
+ *   Content with max-width at md breakpoint
+ * </Container>
+ * ```
+ */
+const Container =  forwardRef((({children: children, className: className = "", type: type, ...props}, ref) => {
+    let containerClass = "o-container";
+    return type && (containerClass = `o-container-${type}`), jsx("div", {
+        ref: ref,
+        className: `${containerClass} ${className}`.trim(),
+        ...props,
+        children: children
+    });
+}));
+
+Container.displayName = "Container";
+
+/**
+ * Row component for creating rows within a Grid or Container.
+ * Uses the CSS row classes defined in _objects.grid.scss.
+ *
+ * @example
+ * ```tsx
+ * <Container>
+ *   <Row justifyContent="between" alignItems="center">
+ *     <GridCol md={6}>Column content</GridCol>
+ *     <GridCol md={6}>Column content</GridCol>
+ *   </Row>
+ * </Container>
+ * ```
+ */
+const Row =  forwardRef((({children: children, className: className = "", justifyContent: justifyContent, alignItems: alignItems, noGutters: noGutters, ...props}, ref) => {
+    const classes = [ "o-grid" ];
+    return justifyContent && classes.push(`u-justify-content-${justifyContent}`), alignItems && classes.push(`u-align-items-${alignItems}`), 
+    noGutters && classes.push("o-grid--no-gutters"), className && classes.push(className), 
+    jsx("div", {
+        ref: ref,
+        className: classes.join(" "),
+        ...props,
+        children: children
+    });
+}));
+
+Row.displayName = "Row";
+
+/**
+ * MasonryGridItem component for creating items within a MasonryGrid.
+ * Each item will be positioned optimally by the parent MasonryGrid component.
+ *
+ * @example
+ * ```tsx
+ * <MasonryGrid>
+ *   <MasonryGridItem>Item 1</MasonryGridItem>
+ *   <MasonryGridItem>Item 2</MasonryGridItem>
+ * </MasonryGrid>
+ * ```
+ */
+const MasonryGridItem =  forwardRef((({children: children, className: className = "", ...props}, ref) => {
+    const classes = [ "o-masonry-grid__item-inner" ];
+    return className && classes.push(className), jsx("div", {
+        ref: ref,
+        className: classes.join(" "),
+        ...props,
+        children: children
+    });
+}));
+
+MasonryGridItem.displayName = "MasonryGridItem";
+
+export { Container, Grid, GridCol, MasonryGrid, MasonryGridItem, Row };
+//# sourceMappingURL=layout.js.map

package/dist/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sources":["../src/layouts/Grid/Grid.tsx","../src/layouts/MasonryGrid/MasonryGrid.tsx","../src/layouts/Grid/GridCol.tsx","../src/layouts/Grid/Container.tsx","../src/layouts/Grid/Row.tsx","../src/layouts/MasonryGrid/MasonryGridItem.tsx"],"sourcesContent":[null,null,null,null,null,null],"names":["Grid","forwardRef","children","className","justifyContent","alignItems","noGutters","direction","wrap","props","ref","classes","push","_jsx","join","displayName","MasonryGrid","xs","sm","md","lg","xl","xxl","gap","animate","imagesLoaded","onLayoutComplete","onImageLoad","columns","setColumns","useState","positions","setPositions","layoutComplete","setLayoutComplete","loadingImages","setLoadingImages","containerRef","useRef","columnHeights","imagesLoadedCount","totalImagesCount","imageElements","Map","useEffect","useImperativeHandle","current","getResponsiveColumns","useCallback","width","window","innerWidth","undefined","handleResize","addEventListener","removeEventListener","items","setItems","newItems","Children","forEach","child","index","isValidElement","id","key","toString","element","position","React","createRef","handleImageLoad","img","get","set","itemElement","closest","offsetHeight","classList","add","remove","requestAnimationFrame","calculateLayout","trackImages","clear","images","querySelectorAll","length","masonryImg","complete","loadHandler","_masonryLoadHandler","colWidth","offsetWidth","Array","fill","newPositions","item","shortestCol","indexOf","Math","min","left","top","height","animationFrame","observer","ResizeObserver","cancelAnimationFrame","observe","disconnect","useLayoutEffect","observers","obs","containerHeight","max","filter","Boolean","style","map","opacity","GridCol","offsetXs","offsetSm","offsetMd","offsetLg","offsetXl","offsetXxl","grow","shrink","basis","align","processResponsiveProp","value","breakpoint","Container","type","containerClass","trim","Row","MasonryGridItem"],"mappings":"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"}