funda-ui 4.5.522 → 4.5.585

package/lib/esm/MasonryLayout/index.tsx

@@ -8,9 +8,9 @@ import {
 
 
 export type MasonryLayoutProps = {
-    columns?: number,
-    gap?: number,
-    breakPoints?: Record<number, number>
+    columns?: number;
+    gap?: number;
+    breakPoints?: Record<number, number>;
     /** -- */
     id?: string;
     tabIndex?: number;
@@ -75,8 +75,21 @@ const MasonryLayout = (props: MasonryLayoutProps) => {
             columnWrapper[`${itemWrapperKey}${i}`] = [];
         }
 
+
         // STEP 3:
         //=================
+        // Calculate the wrapper width based on the gap
+        let wrapperTotalGap: number = 0;
+        for (let i = 0; i < colCount; i++) {
+            if (i > 0) {
+                wrapperTotalGap += GAP;
+            }
+        }
+        if (rootRef.current) rootRef.current.style.width = `calc(100% - ${wrapperTotalGap}px)`;
+
+
+        // STEP 4:
+        //=================
         // Divide the children into columns
         let items: React.ReactNode[] = [];
 
@@ -94,21 +107,21 @@ const MasonryLayout = (props: MasonryLayoutProps) => {
 
         items.forEach((el: React.ReactNode, i: number) => {
             const columnIndex = i % colCount;
+  
             columnWrapper[`${itemWrapperKey}${columnIndex}`].push(
                 <div 
                     key={i} 
-                    className="masonry-item"
                     style={{ 
                         marginBottom: `${GAP}px`
                     }}
                 >
-                    <div style={perBrickWidth > 0 ? {maxWidth: perBrickWidth + 'px'} : undefined}>{el}</div>
+                    <div style={perBrickWidth > 0 ? {width: perBrickWidth + 'px'} : undefined}>{el}</div>
                 </div>
             );
         });
 
 
-        // STEP 4:
+        // STEP 5:
         //=================
         // Wrapping the items in each column with a div and pushing it into the result array
         for (let i = 0; i < colCount; i++) {
@@ -118,14 +131,14 @@ const MasonryLayout = (props: MasonryLayoutProps) => {
                     className="masonry-item"
                     style={{
                         marginLeft: `${i > 0 ? GAP : 0}px`,
-                        flex: 1
+                        flex: '0 1 auto'
                     }}>
                     {columnWrapper[`${itemWrapperKey}${i}`]}
                 </div>
             );
         }
         
-        // STEP 5:
+        // STEP 6:
         //=================
         setItems(result);
         

package/lib/esm/ModalDialog/index.tsx

@@ -13,7 +13,6 @@ import {
 } from 'funda-utils/dist/cjs/bodyScrollLock';
 
 
-
 declare global {
     interface Window {
         curVideo?: any;

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.5.522",
+  "version": "4.5.585",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",

package/MasonryLayout/index.css

@@ -1,6 +0,0 @@
-/* ======================================================
-    <!-- Masonry Layout -->
-/* ====================================================== */
-.masonry__wrapper .masonry-item > * {
-  width: 100%;
-}

package/lib/css/MasonryLayout/index.css

@@ -1,6 +0,0 @@
-/* ======================================================
-    <!-- Masonry Layout -->
-/* ====================================================== */
-.masonry__wrapper .masonry-item > * {
-  width: 100%;
-}

package/lib/esm/MasonryLayout/index.scss

@@ -1,13 +0,0 @@
-/* ======================================================
-    <!-- Masonry Layout -->
-/* ====================================================== */
-
-.masonry__wrapper {
-
-    .masonry-item {
-        > * {
-            width: 100%;
-        }
-    }
-
-}