react-justified-layout-ts 2.1.5 → 2.2.1

package/dist/stories/JustifiedLayout.stories.js

@@ -7,7 +7,6 @@ exports.SingleWithDiv = exports.Single = exports.Divs = exports.Secondary = expo
 const ConfiguredJustifiedLayout_1 = require("./ConfiguredJustifiedLayout");
 const react_1 = __importDefault(require("react"));
 const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
-require("react-loading-skeleton/dist/skeleton.css");
 const meta = {
     title: 'JustifiedLayout/Basic',
     component: ConfiguredJustifiedLayout_1.ConfiguredJustifiedLayout,
@@ -132,7 +131,7 @@ const displayedImages = [
 exports.Primary = {
     name: "Complex Elements",
     args: {
-        width: 491,
+        width: 1920,
         showWidows: true,
         targetRowHeight: undefined,
         rowSpacing: undefined,
@@ -151,7 +150,7 @@ exports.Primary = {
 exports.Secondary = {
     name: "Image Tag Elements",
     args: {
-        width: 847,
+        width: 1920,
         showWidows: true,
         targetRowHeight: undefined,
         rowSpacing: undefined,
@@ -164,7 +163,7 @@ exports.Secondary = {
 exports.Divs = {
     name: "Divs Only",
     args: {
-        width: 847,
+        width: 1920,
         showWidows: true,
         targetRowHeight: undefined,
         rowSpacing: undefined,
@@ -178,7 +177,7 @@ exports.Single = {
     name: "Single Elements",
     args: {
         children: [react_1.default.createElement("img", { src: 'https://alcorsiteartbucket.s3.amazonaws.com/webp/alcor_wow.webp' })],
-        width: 847,
+        width: 1920,
         showWidows: true,
         targetRowHeight: undefined,
         rowSpacing: undefined,
@@ -192,7 +191,7 @@ exports.SingleWithDiv = {
     args: {
         children: [react_1.default.createElement("div", null,
                 react_1.default.createElement("img", { src: 'https://alcorsiteartbucket.s3.amazonaws.com/webp/alcor_wow.webp' }))],
-        width: 847,
+        width: 1920,
         showWidows: true,
         targetRowHeight: undefined,
         rowSpacing: undefined,

package/package.json

@@ -1,49 +1,43 @@
-{
-  "name": "react-justified-layout-ts",
-  "version": "2.1.5",
-  "description": "A component based off Flickr's justified layout that is compatible with Typescript",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "typescript": "tsc && copyfiles -u 1 src/**/*.css dist/",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "keywords": [],
-  "author": "Alan19",
-  "license": "MIT",
-  "dependencies": {
-    "@types/node": "^24.0.3",
-    "lodash": "^4.17.21",
-    "react-use": "^17.6.0",
-    "react-use-measure": "^2.1.7"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.7",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-onboarding": "^8.6.14",
-    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-webpack5": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@types/lodash": "^4.17.18",
-    "@types/react": "^19.1.8",
-    "copyfiles": "^2.4.1",
-    "react": "^19.1.0",
-    "react-loading-skeleton": "^3.5.0",
-    "rimraf": "^6.0.1",
-    "storybook": "^8.6.14",
-    "typescript": "^5.8.3"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Alan19/react-justified-layout-ts.git"
-  }
-}
+{
+  "name": "react-justified-layout-ts",
+  "version": "2.2.1",
+  "description": "A component based off Flickr's justified layout that is compatible with Typescript",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "typescript": "tsc && copyfiles -u 1 src/**/*.css dist/",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "Alan19",
+  "license": "MIT",
+  "dependencies": {
+    "@types/node": "^25.5.2",
+    "lodash": "^4.18.1",
+    "react-use": "^17.6.0",
+    "react-use-measure": "^2.1.7"
+  },
+  "devDependencies": {
+    "copyfiles": "^2.4.1",
+    "react": "^19.2.4",
+    "react-loading-skeleton": "^3.5.0",
+    "rimraf": "^6.1.3",
+    "typescript": "^6.0.2",
+    "storybook": "^10.3.4",
+    "@storybook/react-vite": "^10.3.4",
+    "@chromatic-com/storybook": "^5.1.1",
+    "@storybook/addon-vitest": "^10.3.4",
+    "@storybook/addon-a11y": "^10.3.4",
+    "@storybook/addon-docs": "^10.3.4",
+    "@storybook/addon-onboarding": "^10.3.4",
+    "vitest": "4.1.2",
+    "playwright": "^1.59.1",
+    "@vitest/browser-playwright": "4.1.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Alan19/react-justified-layout-ts.git"
+  }
+}

package/src/components/JustifiedGrid.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import './layout.css';
+export interface JustifiedGridProps {
+    aspectRatioList: number[];
+    itemSpacing?: number;
+    rowSpacing?: number;
+    targetRowHeight?: number;
+    targetRowHeightTolerance?: number;
+    width: number;
+    children: React.JSX.Element[];
+    containerStyle?: React.CSSProperties;
+}
+export declare function JustifiedGrid(props: Readonly<JustifiedGridProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=JustifiedGrid.d.ts.map

package/src/components/JustifiedGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JustifiedGrid.d.ts","sourceRoot":"","sources":["JustifiedGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,cAAc,CAAA;AAErB,MAAM,WAAW,kBAAkB;IAC/B,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACxC;AAoCD,wBAAgB,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CA8BhE"}

package/src/components/JustifiedGrid.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JustifiedGrid = JustifiedGrid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lodash_1 = __importDefault(require("lodash"));
+require("./layout.css");
+function getJustifiedGridRowConfiguration(width, targetRowHeightTolerance, aspectRatioList, targetRowHeight, itemSpacing) {
+    let buffer = [];
+    const rows = [];
+    // We assume that the row will have the specified height, which allows us to convert aspect ratios into widths
+    const minRowWidth = width * (1 / (1 + targetRowHeightTolerance));
+    const maxRowWidth = width * (1 / (1 - targetRowHeightTolerance));
+    aspectRatioList.forEach((aspectRatio, index) => {
+        let currentRowWidth = (lodash_1.default.sum(buffer) * targetRowHeight + aspectRatio * targetRowHeight + itemSpacing * (buffer.length));
+        // If the new item's width would cause it to fall between the tolerances for max widths, finish the row
+        // If the new item's width would cause it to exceed the tolerances for the row, add it to a new row
+        if (buffer.length === 0 || currentRowWidth < maxRowWidth) {
+            buffer.push(aspectRatio);
+            if (currentRowWidth > minRowWidth) {
+                rows.push(buffer);
+                buffer = [];
+            }
+            // If we're handling the last item, and it doesn't exceed the minimum tolerance for the row width, we add a "dummy" item to make the rest of the row now take up the whole width
+            else if (index === aspectRatioList.length - 1) {
+                buffer.push((width - lodash_1.default.sum(buffer) * targetRowHeight - itemSpacing * (buffer.length - 1)) / targetRowHeight);
+            }
+        }
+        else {
+            rows.push(buffer);
+            buffer = [aspectRatio];
+        }
+    });
+    if (buffer.length !== 0) {
+        rows.push(buffer);
+    }
+    return rows;
+}
+function JustifiedGrid(props) {
+    const { targetRowHeightTolerance = .25, width, targetRowHeight = 320, itemSpacing = 8, rowSpacing = 8, children, containerStyle, aspectRatioList } = props;
+    const rows = getJustifiedGridRowConfiguration(width, targetRowHeightTolerance, aspectRatioList, targetRowHeight, itemSpacing);
+    let childNodeCounter = -1;
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rowSpacing
+        }, children: rows.map((value) => {
+            return (0, jsx_runtime_1.jsx)("div", { className: 'justified-row', style: {
+                    display: "flex",
+                    flexDirection: "row",
+                    gap: itemSpacing,
+                }, children: value.map((aspectRatio) => {
+                    childNodeCounter++;
+                    return (0, jsx_runtime_1.jsx)("div", { style: {
+                            flex: value.length === 1 ? 1 : aspectRatio,
+                            ...containerStyle
+                        }, children: children[childNodeCounter] });
+                }) });
+        }) }));
+}
+//# sourceMappingURL=JustifiedGrid.js.map

package/src/components/JustifiedGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JustifiedGrid.js","sourceRoot":"","sources":["JustifiedGrid.tsx"],"names":[],"mappings":"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"}

package/src/components/JustifiedGrid.tsx

@@ -1,79 +1,80 @@
-import React from "react";
-import _ from "lodash";
-import './layout.css'
-
-export interface JustifiedGridProps {
-    aspectRatioList: number[];
-    itemSpacing?: number;
-    rowSpacing?: number;
-    targetRowHeight?: number;
-    targetRowHeightTolerance?: number;
-    width: number;
-    children: React.JSX.Element[];
-    containerStyle?: React.CSSProperties;
-}
-
-function getJustifiedGridRowConfiguration(width: number, targetRowHeightTolerance: number, aspectRatioList: number[], targetRowHeight: number, itemSpacing: number): number[][] {
-    let buffer: number[] = []
-    const rows: number[][] = []
-
-    // We assume that the row will have the specified height, which allows us to convert aspect ratios into widths
-    const minRowWidth = width * (1 / (1 + targetRowHeightTolerance));
-    const maxRowWidth = width * (1 / (1 - targetRowHeightTolerance));
-    aspectRatioList.forEach((aspectRatio, index) => {
-        let currentRowWidth = (_.sum(buffer) * targetRowHeight + aspectRatio * targetRowHeight + itemSpacing * (buffer.length));
-        // If the new item's width would cause it to fall between the tolerances for max widths, finish the row
-        // If the new item's width would cause it to exceed the tolerances for the row, add it to a new row
-        if (buffer.length === 0 || currentRowWidth < maxRowWidth) {
-            buffer.push(aspectRatio);
-            if (currentRowWidth > minRowWidth) {
-                rows.push(buffer)
-                buffer = []
-            }
-            // If we're handling the last item, and it doesn't exceed the minimum tolerance for the row width, we add a "dummy" item to make the rest of the row now take up the whole width
-            else if (index === aspectRatioList.length - 1) {
-                buffer.push((width - _.sum(buffer) * targetRowHeight - itemSpacing * (buffer.length - 1)) / targetRowHeight);
-            }
-        }
-        else {
-            rows.push(buffer)
-            buffer = [aspectRatio];
-        }
-    })
-
-    if (buffer.length !== 0) {
-        rows.push(buffer)
-    }
-    return rows;
-}
-
-export function JustifiedGrid(props: Readonly<JustifiedGridProps>) {
-    const {targetRowHeightTolerance = .25, width, targetRowHeight = 320, itemSpacing = 8, rowSpacing = 8, children, containerStyle, aspectRatioList} = props;
-    const rows = getJustifiedGridRowConfiguration(width, targetRowHeightTolerance, aspectRatioList, targetRowHeight, itemSpacing);
-
-    let childNodeCounter = -1;
-
-    function renderRowItem(value: number[], aspectRatio: number) {
-        childNodeCounter++;
-        return <div style={{flex: value.length === 1 ? 1 : aspectRatio, ...containerStyle}}>
-            {children[childNodeCounter]}
-        </div>;
-    }
-
-    return (
-        <div style={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: rowSpacing
-        }}>
-            {rows.map(value =>
-                <div className={'justified-row'} style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    gap: itemSpacing,
-                }}>
-                    {value.map(aspectRatio => renderRowItem(value, aspectRatio))}
-                </div>)}
-        </div>
-    );
+import React from "react";
+import _ from "lodash";
+import './layout.css'
+
+export interface JustifiedGridProps {
+    aspectRatioList: number[];
+    itemSpacing?: number;
+    rowSpacing?: number;
+    targetRowHeight?: number;
+    targetRowHeightTolerance?: number;
+    width: number;
+    children: React.JSX.Element[];
+    containerStyle?: React.CSSProperties;
+}
+
+function getJustifiedGridRowConfiguration(width: number, targetRowHeightTolerance: number, aspectRatioList: number[], targetRowHeight: number, itemSpacing: number): number[][] {
+    let buffer: number[] = []
+    const rows: number[][] = []
+
+    // We assume that the row will have the specified height, which allows us to convert aspect ratios into widths
+    const minRowWidth = width * (1 / (1 + targetRowHeightTolerance));
+    const maxRowWidth = width * (1 / (1 - targetRowHeightTolerance));
+    aspectRatioList.forEach((aspectRatio, index) => {
+        let currentRowWidth = (_.sum(buffer) * targetRowHeight + aspectRatio * targetRowHeight + itemSpacing * (buffer.length));
+        // If the new item's width would cause it to fall between the tolerances for max widths, finish the row
+        // If the new item's width would cause it to exceed the tolerances for the row, add it to a new row
+        if (buffer.length === 0 || currentRowWidth < maxRowWidth) {
+            buffer.push(aspectRatio);
+            if (currentRowWidth > minRowWidth) {
+                rows.push(buffer)
+                buffer = []
+            }
+            // If we're handling the last item, and it doesn't exceed the minimum tolerance for the row width, we add a "dummy" item to make the rest of the row now take up the whole width
+            else if (index === aspectRatioList.length - 1) {
+                buffer.push((width - _.sum(buffer) * targetRowHeight - itemSpacing * (buffer.length - 1)) / targetRowHeight);
+            }
+        }
+        else {
+            rows.push(buffer)
+            buffer = [aspectRatio];
+        }
+    })
+
+    if (buffer.length !== 0) {
+        rows.push(buffer)
+    }
+    return rows;
+}
+
+export function JustifiedGrid(props: Readonly<JustifiedGridProps>) {
+    const {targetRowHeightTolerance = .25, width, targetRowHeight = 320, itemSpacing = 8, rowSpacing = 8, children, containerStyle, aspectRatioList} = props;
+    const rows = getJustifiedGridRowConfiguration(width, targetRowHeightTolerance, aspectRatioList, targetRowHeight, itemSpacing);
+
+    let childNodeCounter = -1;
+    return (
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rowSpacing
+        }}>
+            {rows.map((value) => {
+                return <div className={'justified-row'} style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    gap: itemSpacing,
+                }}>
+                    {value.map((aspectRatio) => {
+                        childNodeCounter++;
+                        return <div style={{
+                            flex: value.length === 1 ? 1 : aspectRatio,
+                            ...containerStyle
+                        }}>
+                            {children[childNodeCounter]}
+                        </div>;
+                    })}
+                </div>
+            })}
+        </div>
+    );
 }

package/src/components/TSJustifiedLayout.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import './layout.css';
+export interface TSJustifiedLayoutProps {
+    aspectRatioList: number[];
+    itemSpacing?: number;
+    rowSpacing?: number;
+    targetRowHeight?: number;
+    targetRowHeightTolerance?: number;
+    width: number;
+    children: React.JSX.Element[];
+    showWidows?: boolean;
+    containerStyle?: React.CSSProperties;
+}
+/**
+ * @deprecated Use the new {@link JustifiedGrid} component instead as it has better handling for heights of widow rows and future work will be done there
+ */
+declare function TSJustifiedLayout({ children, aspectRatioList, itemSpacing, rowSpacing, showWidows, targetRowHeight, targetRowHeightTolerance, width, containerStyle }: Readonly<TSJustifiedLayoutProps>): import("react/jsx-runtime").JSX.Element;
+export { TSJustifiedLayout, TSJustifiedLayout as JustifiedGrid };
+//# sourceMappingURL=TSJustifiedLayout.d.ts.map

package/src/components/TSJustifiedLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSJustifiedLayout.d.ts","sourceRoot":"","sources":["TSJustifiedLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAA;AAIrB,MAAM,WAAW,sBAAsB;IACnC,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAKxC;AAED;;GAEG;AACH,iBAAS,iBAAiB,CAAC,EACI,QAAQ,EACR,eAAe,EACf,WAAgB,EAChB,UAAe,EACf,UAAiB,EACjB,eAAqB,EACrB,wBAA8B,EAC9B,KAAK,EACL,cAAc,EACjB,EAAE,QAAQ,CAAC,sBAAsB,CAAC,2CAuG7D;AAED,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,IAAI,aAAa,EAAC,CAAA"}

package/src/components/TSJustifiedLayout.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TSJustifiedLayout = TSJustifiedLayout;
+exports.JustifiedGrid = TSJustifiedLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./layout.css");
+/**
+ * @deprecated Use the new {@link JustifiedGrid} component instead as it has better handling for heights of widow rows and future work will be done there
+ */
+function TSJustifiedLayout({ children, aspectRatioList, itemSpacing = 10, rowSpacing = 10, showWidows = true, targetRowHeight = 320, targetRowHeightTolerance = .25, width, containerStyle }) {
+    const minAspectRatio = width / targetRowHeight * (1 - targetRowHeightTolerance);
+    const maxAspectRatio = width / targetRowHeight * (1 + targetRowHeightTolerance);
+    const rows = [];
+    let rowBuffer = [];
+    /**
+     * Attempts to add an item to the current row buffer
+     * @param value The new aspect ratio to be checked
+     * @return If the buffer can accept the new value
+     * */
+    function addItem(value) {
+        const newItems = rowBuffer.concat(value);
+        const newAspectRatio = newItems.reduce((previousValue, currentValue) => previousValue + currentValue, 0);
+        const rowWidthMinusSpacing = width - (newItems.length - 1) * itemSpacing;
+        const targetAspectRatio = rowWidthMinusSpacing / targetRowHeight;
+        // Row still has space
+        if (newAspectRatio < minAspectRatio) {
+            rowBuffer.push(value);
+        }
+        // Row ran out of space, and the new item is larger than the max aspect ratio for the row
+        else if (newAspectRatio > maxAspectRatio) {
+            // Always accept if it's just 1 item
+            if (rowBuffer.length === 0) {
+                rowBuffer.push(value);
+                rows.push({ items: rowBuffer, height: rowWidthMinusSpacing / newAspectRatio });
+                rowBuffer = [];
+            }
+            else {
+                // Calculate width/aspect ratio for row before adding new item
+                const previousRowWidthWithoutSpacing = width - (rowBuffer.length - 1) * itemSpacing;
+                const previousAspectRatio = rowBuffer.reduce((previousValue, currentValue) => previousValue + currentValue, 0);
+                const previousTargetAspectRatio = previousRowWidthWithoutSpacing / targetRowHeight;
+                // If the new aspect ratio is farther from the target after the insert, then push row buffer and insert new item into the next row
+                if (Math.abs(newAspectRatio - targetAspectRatio) > Math.abs(previousAspectRatio - previousTargetAspectRatio)) {
+                    rows.push({ items: rowBuffer, height: previousRowWidthWithoutSpacing / previousAspectRatio });
+                    rowBuffer = [value];
+                }
+                // If the new aspect ratio is closer to the target aspect ratio, then insert item and push row buffer
+                else {
+                    rowBuffer.push(value);
+                    rows.push({ items: rowBuffer, height: rowWidthMinusSpacing / newAspectRatio });
+                    rowBuffer = [];
+                }
+            }
+        }
+        else {
+            // New aspect ratio is within aspect ratio tolerance, so we finish off the row
+            rowBuffer.push(value);
+            rows.push({ items: rowBuffer, height: rowWidthMinusSpacing / newAspectRatio });
+            rowBuffer = [];
+        }
+    }
+    aspectRatioList.forEach((value) => {
+        addItem(value);
+    });
+    // Handle leftover content
+    if (showWidows && rowBuffer.length !== 0) {
+        rows.push({ items: rowBuffer, height: rows.length === 0 ? targetRowHeight : rows.at(-1)?.height });
+    }
+    let childNodeCounter = -1;
+    /**
+     * Clone the children element, and inject the height of the element as a prop
+     */
+    function renderRowItem(aspectRatio, isSoloRow, lastRowWithinTolerance, fakeElementAspectRatio) {
+        childNodeCounter++;
+        return (0, jsx_runtime_1.jsxs)("div", { style: {
+                flex: isSoloRow ? 1 : aspectRatio,
+                ...containerStyle
+            }, children: [children[childNodeCounter], lastRowWithinTolerance && (0, jsx_runtime_1.jsx)("div", { style: { flex: fakeElementAspectRatio } })] });
+    }
+    // TODO Figure out how to eliminate the tiny gap between div and actual image height
+    // TODO Make bottom row respect length restrictions
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rowSpacing
+        }, children: rows.map((value, index, array) => {
+            let isLastRow = index === array.length - 1 && showWidows;
+            let rowAspectRatioSum = value.items.reduce((previousValue, currentValue) => previousValue + currentValue, 0);
+            const isLastRowWithinTolerance = isLastRow && rowAspectRatioSum * value.height + (value.items.length - 1) * itemSpacing < minAspectRatio * value.height;
+            const fakeElementAspectRatio = (width - rowAspectRatioSum * value.height - (value.items.length - 1) * itemSpacing) / value.height;
+            return (0, jsx_runtime_1.jsx)("div", { className: 'justified-row', style: {
+                    display: "flex",
+                    flexDirection: "row",
+                    gap: itemSpacing,
+                }, children: value.items.map((aspectRatio) => renderRowItem(aspectRatio, value.items.length === 1, isLastRowWithinTolerance, fakeElementAspectRatio)) });
+        }) }));
+}
+//# sourceMappingURL=TSJustifiedLayout.js.map

package/src/components/TSJustifiedLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSJustifiedLayout.js","sourceRoot":"","sources":["TSJustifiedLayout.tsx"],"names":[],"mappings":"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"}