@nordicsemiconductor/pc-nrfconnect-shared 109.0.0 → 110.0.0

package/Changelog.md

@@ -7,6 +7,12 @@ This project does _not_ adhere to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html) but contrary to it
 every new version is a new major version.
 
+## 110 - 2023-09-22
+
+### Fixed
+
+-   `MasonryLayout` dropdown component forced cards on different row to shift.
+
 ## 109 - 2023-09-21
 
 ### Changed

package/coverage/cobertura-coverage.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" ?>
 <!DOCTYPE coverage SYSTEM "http://cobertura.sourceforge.net/xml/coverage-04.dtd">
-<coverage lines-valid="3207" lines-covered="1788" line-rate="0.5575" branches-valid="1532" branches-covered="448" branch-rate="0.2924" timestamp="1695307913420" complexity="0" version="0.1">
+<coverage lines-valid="3207" lines-covered="1788" line-rate="0.5575" branches-valid="1532" branches-covered="448" branch-rate="0.2924" timestamp="1695373602458" complexity="0" version="0.1">
   <sources>
     <source>/home/vsts/work/1/s</source>
   </sources>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nordicsemiconductor/pc-nrfconnect-shared",
-    "version": "109.0.0",
+    "version": "110.0.0",
     "description": "Shared commodities for developing pc-nrfconnect-* packages",
     "repository": {
         "type": "git",

package/src/MasonryLayout/MasonryLayout.tsx

@@ -102,7 +102,8 @@ export default ({
 
         const generateMetaData = (col: number) => {
             let child = masonryLayoutRef.current?.firstElementChild;
-            const heightMatrix: number[][] = [];
+            const offsetHeightMatrix: number[][] = [];
+            const scrollHeightMatrix: number[][] = [];
             const zeroHeightChildren: boolean[] = [];
 
             let i = 0;
@@ -111,11 +112,14 @@ export default ({
                     if (!child.hasAttribute('data-filler')) {
                         const rowIndex = Math.floor(i / col);
 
-                        if (heightMatrix[rowIndex] === undefined) {
-                            heightMatrix[rowIndex] = [];
+                        if (offsetHeightMatrix[rowIndex] === undefined) {
+                            offsetHeightMatrix[rowIndex] = [];
+                            scrollHeightMatrix[rowIndex] = [];
                         }
 
-                        const row = heightMatrix[rowIndex];
+                        const offsetHeightRow = offsetHeightMatrix[rowIndex];
+                        const scrollHeightRow = scrollHeightMatrix[rowIndex];
+                        let scrollHeightRowDiff = 0;
                         const columnIndex = i % col;
 
                         i += 1;
@@ -123,19 +127,34 @@ export default ({
                             child.offsetHeight <=
                             Number.parseInt(styles.margin, 10)
                         ) {
-                            row[columnIndex] = 0;
+                            offsetHeightRow[columnIndex] = 0;
                             zeroHeightChildren.push(true);
                         } else {
-                            row[columnIndex] = child.scrollHeight + 9; // 8 border bottom + 1px to round as value might be decimal
+                            offsetHeightRow[columnIndex] =
+                                child.offsetHeight + 1; // 1px to round as value might be decimal
+                            scrollHeightRowDiff =
+                                child.scrollHeight +
+                                9 -
+                                offsetHeightRow[columnIndex]; // 8 border bottom + 1px to round as value might be decimal
                             zeroHeightChildren.push(false);
                         }
+
+                        scrollHeightRow[columnIndex] =
+                            offsetHeightMatrix.reduce(
+                                (p, c) => p + c[columnIndex],
+                                0
+                            ) + scrollHeightRowDiff;
                     }
 
                     child = child.nextElementSibling;
                 }
             }
 
-            return { heightMatrix, hiddenChildren: zeroHeightChildren };
+            return {
+                offsetHeightMatrix,
+                scrollHeightMatrix,
+                hiddenChildren: zeroHeightChildren,
+            };
         };
 
         const calcData = (col: number) => {
@@ -143,7 +162,7 @@ export default ({
             const heights: number[] = Array(col).fill(0);
             const newOrder: number[] = [];
 
-            metaData.heightMatrix.forEach(row => {
+            metaData.offsetHeightMatrix.forEach(row => {
                 row.forEach(itemHeight => {
                     const smallest =
                         heights.findIndex(h => h === Math.min(...heights)) ?? 0;
@@ -153,7 +172,10 @@ export default ({
             });
 
             return {
-                maxHeight: Math.max(...heights, 0),
+                maxHeight: Math.max(
+                    ...heights,
+                    ...metaData.scrollHeightMatrix.flat()
+                ),
                 order: newOrder,
                 columnHeights: heights,
                 columns: Math.min(

package/typings/generated/src/MasonryLayout/MasonryLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MasonryLayout.d.ts","sourceRoot":"","sources":["../../../../src/MasonryLayout/MasonryLayout.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAM9E,UAAU,uBAAuB;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAiED;;;;;;GAMG;6DAKA,kBAAkB,uBAAuB,CAAC;AAJ7C,wBA2IE"}
+{"version":3,"file":"MasonryLayout.d.ts","sourceRoot":"","sources":["../../../../src/MasonryLayout/MasonryLayout.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAM9E,UAAU,uBAAuB;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAiED;;;;;;GAMG;6DAKA,kBAAkB,uBAAuB,CAAC;AAJ7C,wBAiKE"}