🚨 Latest Research:Tanstack npm Packages Compromised in Ongoing Mini Shai-Hulud Supply-Chain Attack.Learn More
Socket
Book a DemoSign in
Socket

react-grid-layout

Package Overview
Dependencies
Maintainers
1
Versions
115
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-grid-layout - npm Package Compare versions

Comparing version
2.0.0
to
2.1.0
+196
dist/calculate-DsVTldEE.d.ts
import { P as Position, d as ResizeHandleAxis } from './types-CokovIMH.js';
/**
* Grid calculation utilities.
*
* These functions convert between grid units and pixel positions.
*/
/**
* Parameters needed for position calculations.
*/
interface PositionParams {
readonly margin: readonly [number, number];
readonly containerPadding: readonly [number, number];
readonly containerWidth: number;
readonly cols: number;
readonly rowHeight: number;
readonly maxRows: number;
}
/**
* Calculate the width of a single grid column in pixels.
*
* @param positionParams - Grid parameters
* @returns Column width in pixels
*/
declare function calcGridColWidth(positionParams: PositionParams): number;
/**
* Calculate the pixel size for a grid unit dimension (width or height).
*
* Can be called as:
* - calcGridItemWHPx(w, colWidth, margin[0]) for width
* - calcGridItemWHPx(h, rowHeight, margin[1]) for height
*
* @param gridUnits - Size in grid units
* @param colOrRowSize - Column width or row height in pixels
* @param marginPx - Margin between items in pixels
* @returns Size in pixels
*/
declare function calcGridItemWHPx(gridUnits: number, colOrRowSize: number, marginPx: number): number;
/**
* Calculate pixel position for a grid item.
*
* Returns left, top, width, height in pixels.
*
* @param positionParams - Grid parameters
* @param x - X coordinate in grid units
* @param y - Y coordinate in grid units
* @param w - Width in grid units
* @param h - Height in grid units
* @param dragPosition - If present, use exact left/top from drag callbacks
* @param resizePosition - If present, use exact dimensions from resize callbacks
* @returns Position in pixels
*/
declare function calcGridItemPosition(positionParams: PositionParams, x: number, y: number, w: number, h: number, dragPosition?: {
top: number;
left: number;
} | null, resizePosition?: {
top: number;
left: number;
height: number;
width: number;
} | null): Position;
/**
* Translate pixel coordinates to grid units.
*
* @param positionParams - Grid parameters
* @param top - Top position in pixels (relative to parent)
* @param left - Left position in pixels (relative to parent)
* @param w - Width in grid units (for clamping)
* @param h - Height in grid units (for clamping)
* @returns x and y in grid units
*/
declare function calcXY(positionParams: PositionParams, top: number, left: number, w: number, h: number): {
x: number;
y: number;
};
/**
* Translate pixel coordinates to grid units without clamping.
*
* Use this with the constraint system for custom boundary control.
*
* @param positionParams - Grid parameters
* @param top - Top position in pixels (relative to parent)
* @param left - Left position in pixels (relative to parent)
* @returns x and y in grid units (unclamped)
*/
declare function calcXYRaw(positionParams: PositionParams, top: number, left: number): {
x: number;
y: number;
};
/**
* Calculate grid units from pixel dimensions.
*
* @param positionParams - Grid parameters
* @param width - Width in pixels
* @param height - Height in pixels
* @param x - X coordinate in grid units (for clamping)
* @param y - Y coordinate in grid units (for clamping)
* @param handle - Resize handle being used
* @returns w, h in grid units
*/
declare function calcWH(positionParams: PositionParams, width: number, height: number, x: number, y: number, handle: ResizeHandleAxis): {
w: number;
h: number;
};
/**
* Calculate grid units from pixel dimensions without clamping.
*
* Use this with the constraint system for custom size control.
*
* @param positionParams - Grid parameters
* @param width - Width in pixels
* @param height - Height in pixels
* @returns w, h in grid units (unclamped, minimum 1)
*/
declare function calcWHRaw(positionParams: PositionParams, width: number, height: number): {
w: number;
h: number;
};
/**
* Clamp a number between bounds.
*
* @param num - Number to clamp
* @param lowerBound - Minimum value
* @param upperBound - Maximum value
* @returns Clamped value
*/
declare function clamp(num: number, lowerBound: number, upperBound: number): number;
/**
* Grid cell dimension information for rendering backgrounds or overlays.
*/
interface GridCellDimensions {
/** Width of a single cell in pixels */
readonly cellWidth: number;
/** Height of a single cell in pixels */
readonly cellHeight: number;
/** Horizontal offset from container edge to first cell */
readonly offsetX: number;
/** Vertical offset from container edge to first cell */
readonly offsetY: number;
/** Horizontal gap between cells */
readonly gapX: number;
/** Vertical gap between cells */
readonly gapY: number;
/** Number of columns */
readonly cols: number;
/** Total container width */
readonly containerWidth: number;
}
/**
* Configuration for grid cell dimension calculation.
*/
interface GridCellConfig {
/** Container width in pixels */
width: number;
/** Number of columns */
cols: number;
/** Row height in pixels */
rowHeight: number;
/** Margin between items [x, y] */
margin?: readonly [number, number];
/** Container padding [x, y], defaults to margin if not specified */
containerPadding?: readonly [number, number] | null;
}
/**
* Calculate grid cell dimensions for rendering backgrounds or overlays.
*
* This function provides all the measurements needed to render a visual
* grid background that aligns with the actual grid cells.
*
* @param config - Grid configuration
* @returns Cell dimensions and offsets
*
* @example
* ```tsx
* import { calcGridCellDimensions } from 'react-grid-layout/core';
*
* const dims = calcGridCellDimensions({
* width: 1200,
* cols: 12,
* rowHeight: 30,
* margin: [10, 10],
* containerPadding: [10, 10]
* });
*
* // dims.cellWidth = 88.33...
* // dims.cellHeight = 30
* // dims.offsetX = 10 (containerPadding[0])
* // dims.offsetY = 10 (containerPadding[1])
* // dims.gapX = 10 (margin[0])
* // dims.gapY = 10 (margin[1])
* ```
*/
declare function calcGridCellDimensions(config: GridCellConfig): GridCellDimensions;
export { type GridCellDimensions as G, type PositionParams as P, calcXY as a, calcWH as b, calcGridItemPosition as c, type GridCellConfig as d, calcGridColWidth as e, calcGridItemWHPx as f, calcXYRaw as g, calcWHRaw as h, clamp as i, calcGridCellDimensions as j };
import { P as Position, d as ResizeHandleAxis } from './types-CokovIMH.mjs';
/**
* Grid calculation utilities.
*
* These functions convert between grid units and pixel positions.
*/
/**
* Parameters needed for position calculations.
*/
interface PositionParams {
readonly margin: readonly [number, number];
readonly containerPadding: readonly [number, number];
readonly containerWidth: number;
readonly cols: number;
readonly rowHeight: number;
readonly maxRows: number;
}
/**
* Calculate the width of a single grid column in pixels.
*
* @param positionParams - Grid parameters
* @returns Column width in pixels
*/
declare function calcGridColWidth(positionParams: PositionParams): number;
/**
* Calculate the pixel size for a grid unit dimension (width or height).
*
* Can be called as:
* - calcGridItemWHPx(w, colWidth, margin[0]) for width
* - calcGridItemWHPx(h, rowHeight, margin[1]) for height
*
* @param gridUnits - Size in grid units
* @param colOrRowSize - Column width or row height in pixels
* @param marginPx - Margin between items in pixels
* @returns Size in pixels
*/
declare function calcGridItemWHPx(gridUnits: number, colOrRowSize: number, marginPx: number): number;
/**
* Calculate pixel position for a grid item.
*
* Returns left, top, width, height in pixels.
*
* @param positionParams - Grid parameters
* @param x - X coordinate in grid units
* @param y - Y coordinate in grid units
* @param w - Width in grid units
* @param h - Height in grid units
* @param dragPosition - If present, use exact left/top from drag callbacks
* @param resizePosition - If present, use exact dimensions from resize callbacks
* @returns Position in pixels
*/
declare function calcGridItemPosition(positionParams: PositionParams, x: number, y: number, w: number, h: number, dragPosition?: {
top: number;
left: number;
} | null, resizePosition?: {
top: number;
left: number;
height: number;
width: number;
} | null): Position;
/**
* Translate pixel coordinates to grid units.
*
* @param positionParams - Grid parameters
* @param top - Top position in pixels (relative to parent)
* @param left - Left position in pixels (relative to parent)
* @param w - Width in grid units (for clamping)
* @param h - Height in grid units (for clamping)
* @returns x and y in grid units
*/
declare function calcXY(positionParams: PositionParams, top: number, left: number, w: number, h: number): {
x: number;
y: number;
};
/**
* Translate pixel coordinates to grid units without clamping.
*
* Use this with the constraint system for custom boundary control.
*
* @param positionParams - Grid parameters
* @param top - Top position in pixels (relative to parent)
* @param left - Left position in pixels (relative to parent)
* @returns x and y in grid units (unclamped)
*/
declare function calcXYRaw(positionParams: PositionParams, top: number, left: number): {
x: number;
y: number;
};
/**
* Calculate grid units from pixel dimensions.
*
* @param positionParams - Grid parameters
* @param width - Width in pixels
* @param height - Height in pixels
* @param x - X coordinate in grid units (for clamping)
* @param y - Y coordinate in grid units (for clamping)
* @param handle - Resize handle being used
* @returns w, h in grid units
*/
declare function calcWH(positionParams: PositionParams, width: number, height: number, x: number, y: number, handle: ResizeHandleAxis): {
w: number;
h: number;
};
/**
* Calculate grid units from pixel dimensions without clamping.
*
* Use this with the constraint system for custom size control.
*
* @param positionParams - Grid parameters
* @param width - Width in pixels
* @param height - Height in pixels
* @returns w, h in grid units (unclamped, minimum 1)
*/
declare function calcWHRaw(positionParams: PositionParams, width: number, height: number): {
w: number;
h: number;
};
/**
* Clamp a number between bounds.
*
* @param num - Number to clamp
* @param lowerBound - Minimum value
* @param upperBound - Maximum value
* @returns Clamped value
*/
declare function clamp(num: number, lowerBound: number, upperBound: number): number;
/**
* Grid cell dimension information for rendering backgrounds or overlays.
*/
interface GridCellDimensions {
/** Width of a single cell in pixels */
readonly cellWidth: number;
/** Height of a single cell in pixels */
readonly cellHeight: number;
/** Horizontal offset from container edge to first cell */
readonly offsetX: number;
/** Vertical offset from container edge to first cell */
readonly offsetY: number;
/** Horizontal gap between cells */
readonly gapX: number;
/** Vertical gap between cells */
readonly gapY: number;
/** Number of columns */
readonly cols: number;
/** Total container width */
readonly containerWidth: number;
}
/**
* Configuration for grid cell dimension calculation.
*/
interface GridCellConfig {
/** Container width in pixels */
width: number;
/** Number of columns */
cols: number;
/** Row height in pixels */
rowHeight: number;
/** Margin between items [x, y] */
margin?: readonly [number, number];
/** Container padding [x, y], defaults to margin if not specified */
containerPadding?: readonly [number, number] | null;
}
/**
* Calculate grid cell dimensions for rendering backgrounds or overlays.
*
* This function provides all the measurements needed to render a visual
* grid background that aligns with the actual grid cells.
*
* @param config - Grid configuration
* @returns Cell dimensions and offsets
*
* @example
* ```tsx
* import { calcGridCellDimensions } from 'react-grid-layout/core';
*
* const dims = calcGridCellDimensions({
* width: 1200,
* cols: 12,
* rowHeight: 30,
* margin: [10, 10],
* containerPadding: [10, 10]
* });
*
* // dims.cellWidth = 88.33...
* // dims.cellHeight = 30
* // dims.offsetX = 10 (containerPadding[0])
* // dims.offsetY = 10 (containerPadding[1])
* // dims.gapX = 10 (margin[0])
* // dims.gapY = 10 (margin[1])
* ```
*/
declare function calcGridCellDimensions(config: GridCellConfig): GridCellDimensions;
export { type GridCellDimensions as G, type PositionParams as P, calcXY as a, calcWH as b, calcGridItemPosition as c, type GridCellConfig as d, calcGridColWidth as e, calcGridItemWHPx as f, calcXYRaw as g, calcWHRaw as h, clamp as i, calcGridCellDimensions as j };
import { bottom, sortLayoutItems, cloneLayoutItem, getStatics, collides, getFirstCollision, cloneLayout, sortLayoutItemsByRowCol, sortLayoutItemsByColRow, correctBounds } from './chunk-AWM66AWF.mjs';
// src/core/constraints.ts
function clamp(value, min, max) {
return Math.max(min, Math.min(max, value));
}
var gridBounds = {
name: "gridBounds",
constrainPosition(item, x, y, { cols, maxRows }) {
return {
x: clamp(x, 0, Math.max(0, cols - item.w)),
y: clamp(y, 0, Math.max(0, maxRows - item.h))
};
},
constrainSize(item, w, h, handle, { cols, maxRows }) {
const maxW = handle === "w" || handle === "nw" || handle === "sw" ? item.x + item.w : cols - item.x;
const maxH = handle === "n" || handle === "nw" || handle === "ne" ? item.y + item.h : maxRows - item.y;
return {
w: clamp(w, 1, Math.max(1, maxW)),
h: clamp(h, 1, Math.max(1, maxH))
};
}
};
var minMaxSize = {
name: "minMaxSize",
constrainSize(item, w, h) {
return {
w: clamp(w, item.minW ?? 1, item.maxW ?? Infinity),
h: clamp(h, item.minH ?? 1, item.maxH ?? Infinity)
};
}
};
var containerBounds = {
name: "containerBounds",
constrainPosition(item, x, y, { cols, maxRows, containerHeight, rowHeight, margin }) {
const visibleRows = containerHeight > 0 ? Math.floor((containerHeight + margin[1]) / (rowHeight + margin[1])) : maxRows;
return {
x: clamp(x, 0, Math.max(0, cols - item.w)),
y: clamp(y, 0, Math.max(0, visibleRows - item.h))
};
}
};
var boundedX = {
name: "boundedX",
constrainPosition(item, x, y, { cols }) {
return {
x: clamp(x, 0, Math.max(0, cols - item.w)),
y
};
}
};
var boundedY = {
name: "boundedY",
constrainPosition(item, x, y, { maxRows }) {
return {
x,
y: clamp(y, 0, Math.max(0, maxRows - item.h))
};
}
};
function aspectRatio(ratio) {
return {
name: `aspectRatio(${ratio})`,
constrainSize(_item, w, _h, _handle, context) {
const { cols, containerWidth, rowHeight, margin } = context;
const colWidth = (containerWidth - margin[0] * (cols - 1)) / cols;
const pixelWidth = colWidth * w + margin[0] * Math.max(0, w - 1);
const pixelHeight = pixelWidth / ratio;
const h = Math.max(
1,
Math.round((pixelHeight + margin[1]) / (rowHeight + margin[1]))
);
return { w, h };
}
};
}
function snapToGrid(stepX, stepY = stepX) {
if (stepX <= 0 || stepY <= 0) {
throw new Error(
`snapToGrid: step values must be positive (got stepX=${stepX}, stepY=${stepY})`
);
}
return {
name: `snapToGrid(${stepX}, ${stepY})`,
constrainPosition(_item, x, y) {
return {
x: Math.round(x / stepX) * stepX,
y: Math.round(y / stepY) * stepY
};
}
};
}
function minSize(minW, minH) {
return {
name: `minSize(${minW}, ${minH})`,
constrainSize(_item, w, h) {
return {
w: Math.max(minW, w),
h: Math.max(minH, h)
};
}
};
}
function maxSize(maxW, maxH) {
return {
name: `maxSize(${maxW}, ${maxH})`,
constrainSize(_item, w, h) {
return {
w: Math.min(maxW, w),
h: Math.min(maxH, h)
};
}
};
}
var defaultConstraints = [gridBounds, minMaxSize];
function applyPositionConstraints(constraints, item, x, y, context) {
let result = { x, y };
for (const constraint of constraints) {
if (constraint.constrainPosition) {
result = constraint.constrainPosition(item, result.x, result.y, context);
}
}
if (item.constraints) {
for (const constraint of item.constraints) {
if (constraint.constrainPosition) {
result = constraint.constrainPosition(
item,
result.x,
result.y,
context
);
}
}
}
return result;
}
function applySizeConstraints(constraints, item, w, h, handle, context) {
let result = { w, h };
for (const constraint of constraints) {
if (constraint.constrainSize) {
result = constraint.constrainSize(
item,
result.w,
result.h,
handle,
context
);
}
}
if (item.constraints) {
for (const constraint of item.constraints) {
if (constraint.constrainSize) {
result = constraint.constrainSize(
item,
result.w,
result.h,
handle,
context
);
}
}
}
return result;
}
// src/core/position.ts
function setTransform({
top,
left,
width,
height
}) {
const translate = `translate(${left}px,${top}px)`;
return {
transform: translate,
WebkitTransform: translate,
MozTransform: translate,
msTransform: translate,
OTransform: translate,
width: `${width}px`,
height: `${height}px`,
position: "absolute"
};
}
function setTopLeft({
top,
left,
width,
height
}) {
return {
top: `${top}px`,
left: `${left}px`,
width: `${width}px`,
height: `${height}px`,
position: "absolute"
};
}
function perc(num) {
return num * 100 + "%";
}
function constrainWidth(left, currentWidth, newWidth, containerWidth) {
return left + newWidth > containerWidth ? currentWidth : newWidth;
}
function constrainHeight(top, currentHeight, newHeight) {
return top < 0 ? currentHeight : newHeight;
}
function constrainLeft(left) {
return Math.max(0, left);
}
function constrainTop(top) {
return Math.max(0, top);
}
var resizeNorth = (currentSize, newSize, _containerWidth) => {
const { left, height, width } = newSize;
const top = currentSize.top - (height - currentSize.height);
return {
left,
width,
height: constrainHeight(top, currentSize.height, height),
top: constrainTop(top)
};
};
var resizeEast = (currentSize, newSize, containerWidth) => {
const { top, left, height, width } = newSize;
return {
top,
height,
width: constrainWidth(
currentSize.left,
currentSize.width,
width,
containerWidth
),
left: constrainLeft(left)
};
};
var resizeWest = (currentSize, newSize, _containerWidth) => {
const { top, height, width } = newSize;
const left = currentSize.left + currentSize.width - width;
if (left < 0) {
return {
height,
width: currentSize.left + currentSize.width,
top: constrainTop(top),
left: 0
};
}
return {
height,
width,
top: constrainTop(top),
left
};
};
var resizeSouth = (currentSize, newSize, _containerWidth) => {
const { top, left, height, width } = newSize;
return {
width,
left,
height: constrainHeight(top, currentSize.height, height),
top: constrainTop(top)
};
};
var resizeNorthEast = (currentSize, newSize, containerWidth) => resizeNorth(
currentSize,
resizeEast(currentSize, newSize, containerWidth));
var resizeNorthWest = (currentSize, newSize, containerWidth) => resizeNorth(
currentSize,
resizeWest(currentSize, newSize));
var resizeSouthEast = (currentSize, newSize, containerWidth) => resizeSouth(
currentSize,
resizeEast(currentSize, newSize, containerWidth));
var resizeSouthWest = (currentSize, newSize, containerWidth) => resizeSouth(
currentSize,
resizeWest(currentSize, newSize));
var resizeHandlerMap = {
n: resizeNorth,
ne: resizeNorthEast,
e: resizeEast,
se: resizeSouthEast,
s: resizeSouth,
sw: resizeSouthWest,
w: resizeWest,
nw: resizeNorthWest
};
function resizeItemInDirection(direction, currentSize, newSize, containerWidth) {
const handler = resizeHandlerMap[direction];
if (!handler) {
return newSize;
}
return handler(currentSize, { ...currentSize, ...newSize }, containerWidth);
}
var transformStrategy = {
type: "transform",
scale: 1,
calcStyle(pos) {
return setTransform(pos);
},
calcDragPosition(clientX, clientY, offsetX, offsetY) {
return {
left: clientX - offsetX,
top: clientY - offsetY
};
}
};
var absoluteStrategy = {
type: "absolute",
scale: 1,
calcStyle(pos) {
return setTopLeft(pos);
},
calcDragPosition(clientX, clientY, offsetX, offsetY) {
return {
left: clientX - offsetX,
top: clientY - offsetY
};
}
};
function createScaledStrategy(scale) {
return {
type: "transform",
scale,
calcStyle(pos) {
return setTransform(pos);
},
calcDragPosition(clientX, clientY, offsetX, offsetY) {
return {
left: (clientX - offsetX) / scale,
top: (clientY - offsetY) / scale
};
}
};
}
var defaultPositionStrategy = transformStrategy;
// src/core/types.ts
var defaultGridConfig = {
cols: 12,
rowHeight: 150,
margin: [10, 10],
containerPadding: null,
maxRows: Infinity
};
var defaultDragConfig = {
enabled: true,
bounded: false,
threshold: 3
};
var defaultResizeConfig = {
enabled: true,
handles: ["se"]
};
var defaultDropConfig = {
enabled: false,
defaultItem: { w: 1, h: 1 }
};
// src/core/compact-compat.ts
function getStatics2(layout) {
return layout.filter((l) => l.static);
}
var heightWidth = { x: "w", y: "h" };
function resolveCompactionCollision(layout, item, moveToCoord, axis, hasStatics) {
const sizeProp = heightWidth[axis];
item[axis] += 1;
const itemIndex = layout.findIndex((l) => l.i === item.i);
const layoutHasStatics = hasStatics ?? getStatics2(layout).length > 0;
for (let i = itemIndex + 1; i < layout.length; i++) {
const otherItem = layout[i];
if (otherItem === void 0) continue;
if (otherItem.static) continue;
if (!layoutHasStatics && otherItem.y > item.y + item.h) break;
if (collides(item, otherItem)) {
resolveCompactionCollision(
layout,
otherItem,
moveToCoord + item[sizeProp],
axis,
layoutHasStatics
);
}
}
item[axis] = moveToCoord;
}
function compactItemInternal(compareWith, l, compactType, cols, fullLayout, allowOverlap, b) {
const compactV = compactType === "vertical";
const compactH = compactType === "horizontal";
if (compactV) {
if (typeof b === "number") {
l.y = Math.min(b, l.y);
} else {
l.y = Math.min(bottom(compareWith), l.y);
}
while (l.y > 0 && !getFirstCollision(compareWith, l)) {
l.y--;
}
} else if (compactH) {
while (l.x > 0 && !getFirstCollision(compareWith, l)) {
l.x--;
}
}
let collision;
while ((collision = getFirstCollision(compareWith, l)) !== void 0 && !(compactType === null && allowOverlap)) {
if (compactH) {
resolveCompactionCollision(fullLayout, l, collision.x + collision.w, "x");
} else {
resolveCompactionCollision(fullLayout, l, collision.y + collision.h, "y");
}
if (compactH && l.x + l.w > cols) {
l.x = cols - l.w;
l.y++;
while (l.x > 0 && !getFirstCollision(compareWith, l)) {
l.x--;
}
}
}
l.y = Math.max(l.y, 0);
l.x = Math.max(l.x, 0);
return l;
}
function compact(layout, compactType, cols, allowOverlap) {
const compareWith = getStatics2(layout);
let b = bottom(compareWith);
const sorted = sortLayoutItems(layout, compactType);
const out = new Array(layout.length);
for (let i = 0; i < sorted.length; i++) {
const sortedItem = sorted[i];
if (sortedItem === void 0) continue;
let l = cloneLayoutItem(sortedItem);
if (!l.static) {
l = compactItemInternal(
compareWith,
l,
compactType,
cols,
sorted,
allowOverlap,
b
);
b = Math.max(b, l.y + l.h);
compareWith.push(l);
}
const originalIndex = layout.indexOf(sortedItem);
out[originalIndex] = l;
l.moved = false;
}
return out;
}
function compactItem(compareWith, l, compactType, cols, fullLayout, allowOverlap, maxY) {
return compactItemInternal(
compareWith,
cloneLayoutItem(l),
compactType,
cols,
fullLayout,
allowOverlap,
maxY
);
}
// src/core/compactors.ts
function resolveCompactionCollision2(layout, item, moveToCoord, axis, hasStatics) {
const sizeProp = axis === "x" ? "w" : "h";
item[axis] += 1;
const itemIndex = layout.findIndex((l) => l.i === item.i);
const layoutHasStatics = hasStatics ?? getStatics(layout).length > 0;
for (let i = itemIndex + 1; i < layout.length; i++) {
const otherItem = layout[i];
if (otherItem === void 0) continue;
if (otherItem.static) continue;
if (!layoutHasStatics && otherItem.y > item.y + item.h) break;
if (collides(item, otherItem)) {
resolveCompactionCollision2(
layout,
otherItem,
moveToCoord + item[sizeProp],
axis,
layoutHasStatics
);
}
}
item[axis] = moveToCoord;
}
function compactItemVertical(compareWith, l, fullLayout, maxY) {
l.y = Math.min(maxY, l.y);
while (l.y > 0 && !getFirstCollision(compareWith, l)) {
l.y--;
}
let collision;
while ((collision = getFirstCollision(compareWith, l)) !== void 0) {
resolveCompactionCollision2(fullLayout, l, collision.y + collision.h, "y");
}
l.y = Math.max(l.y, 0);
return l;
}
function compactItemHorizontal(compareWith, l, cols, fullLayout) {
while (l.x > 0 && !getFirstCollision(compareWith, l)) {
l.x--;
}
let collision;
while ((collision = getFirstCollision(compareWith, l)) !== void 0) {
resolveCompactionCollision2(fullLayout, l, collision.x + collision.w, "x");
if (l.x + l.w > cols) {
l.x = cols - l.w;
l.y++;
while (l.x > 0 && !getFirstCollision(compareWith, l)) {
l.x--;
}
}
}
l.x = Math.max(l.x, 0);
return l;
}
var verticalCompactor = {
type: "vertical",
allowOverlap: false,
compact(layout, _cols) {
const compareWith = getStatics(layout);
let maxY = bottom(compareWith);
const sorted = sortLayoutItemsByRowCol(layout);
const out = new Array(layout.length);
for (let i = 0; i < sorted.length; i++) {
const sortedItem = sorted[i];
if (sortedItem === void 0) continue;
let l = cloneLayoutItem(sortedItem);
if (!l.static) {
l = compactItemVertical(compareWith, l, sorted, maxY);
maxY = Math.max(maxY, l.y + l.h);
compareWith.push(l);
}
const originalIndex = layout.indexOf(sortedItem);
out[originalIndex] = l;
l.moved = false;
}
return out;
},
onMove(layout, item, x, y, _cols) {
const newLayout = cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (movedItem) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
}
return newLayout;
}
};
var horizontalCompactor = {
type: "horizontal",
allowOverlap: false,
compact(layout, cols) {
const compareWith = getStatics(layout);
const sorted = sortLayoutItemsByColRow(layout);
const out = new Array(layout.length);
for (let i = 0; i < sorted.length; i++) {
const sortedItem = sorted[i];
if (sortedItem === void 0) continue;
let l = cloneLayoutItem(sortedItem);
if (!l.static) {
l = compactItemHorizontal(compareWith, l, cols, sorted);
compareWith.push(l);
}
const originalIndex = layout.indexOf(sortedItem);
out[originalIndex] = l;
l.moved = false;
}
return out;
},
onMove(layout, item, x, y, _cols) {
const newLayout = cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (movedItem) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
}
return newLayout;
}
};
var noCompactor = {
type: null,
allowOverlap: false,
compact(layout, _cols) {
return cloneLayout(layout);
},
onMove(layout, item, x, y, _cols) {
const newLayout = cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (movedItem) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
}
return newLayout;
}
};
var verticalOverlapCompactor = {
...verticalCompactor,
allowOverlap: true,
compact(layout, _cols) {
return cloneLayout(layout);
}
};
var horizontalOverlapCompactor = {
...horizontalCompactor,
allowOverlap: true,
compact(layout, _cols) {
return cloneLayout(layout);
}
};
function getCompactor(compactType, allowOverlap = false, preventCollision = false) {
let baseCompactor;
if (allowOverlap) {
if (compactType === "vertical") baseCompactor = verticalOverlapCompactor;
else if (compactType === "horizontal")
baseCompactor = horizontalOverlapCompactor;
else baseCompactor = noCompactor;
} else {
if (compactType === "vertical") baseCompactor = verticalCompactor;
else if (compactType === "horizontal") baseCompactor = horizontalCompactor;
else baseCompactor = noCompactor;
}
if (preventCollision) {
return { ...baseCompactor, preventCollision };
}
return baseCompactor;
}
// src/core/responsive.ts
function sortBreakpoints(breakpoints) {
const keys = Object.keys(breakpoints);
return keys.sort((a, b) => breakpoints[a] - breakpoints[b]);
}
function getBreakpointFromWidth(breakpoints, width) {
const sorted = sortBreakpoints(breakpoints);
let matching = sorted[0];
if (matching === void 0) {
throw new Error("No breakpoints defined");
}
for (let i = 1; i < sorted.length; i++) {
const breakpointName = sorted[i];
if (breakpointName === void 0) continue;
const breakpointWidth = breakpoints[breakpointName];
if (width > breakpointWidth) {
matching = breakpointName;
}
}
return matching;
}
function getColsFromBreakpoint(breakpoint, cols) {
const colCount = cols[breakpoint];
if (colCount === void 0) {
throw new Error(
`ResponsiveReactGridLayout: \`cols\` entry for breakpoint ${String(breakpoint)} is missing!`
);
}
return colCount;
}
function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBreakpoint, cols, compactType) {
const existingLayout = layouts[breakpoint];
if (existingLayout) {
return cloneLayout(existingLayout);
}
let layout = layouts[lastBreakpoint];
const breakpointsSorted = sortBreakpoints(breakpoints);
const breakpointsAbove = breakpointsSorted.slice(
breakpointsSorted.indexOf(breakpoint)
);
for (let i = 0; i < breakpointsAbove.length; i++) {
const b = breakpointsAbove[i];
if (b === void 0) continue;
const layoutForBreakpoint = layouts[b];
if (layoutForBreakpoint) {
layout = layoutForBreakpoint;
break;
}
}
const clonedLayout = cloneLayout(layout || []);
return compact(correctBounds(clonedLayout, { cols }), compactType, cols);
}
function getIndentationValue(value, breakpoint) {
if (Array.isArray(value)) {
return value;
}
const breakpointMap = value;
const breakpointValue = breakpointMap[breakpoint];
if (breakpointValue !== void 0) {
return breakpointValue;
}
const keys = Object.keys(breakpointMap);
for (const key of keys) {
const v = breakpointMap[key];
if (v !== void 0) {
return v;
}
}
return [10, 10];
}
export { absoluteStrategy, applyPositionConstraints, applySizeConstraints, aspectRatio, boundedX, boundedY, compact, compactItem, compactItemHorizontal, compactItemVertical, containerBounds, createScaledStrategy, defaultConstraints, defaultDragConfig, defaultDropConfig, defaultGridConfig, defaultPositionStrategy, defaultResizeConfig, findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, getCompactor, getIndentationValue, gridBounds, horizontalCompactor, horizontalOverlapCompactor, maxSize, minMaxSize, minSize, noCompactor, perc, resizeItemInDirection, resolveCompactionCollision2 as resolveCompactionCollision, setTopLeft, setTransform, snapToGrid, sortBreakpoints, transformStrategy, verticalCompactor, verticalOverlapCompactor };
//# sourceMappingURL=chunk-2O3ZME4Q.mjs.map
//# sourceMappingURL=chunk-2O3ZME4Q.mjs.map

Sorry, the diff of this file is too big to display

//# sourceMappingURL=chunk-526JND3R.mjs.map
//# sourceMappingURL=chunk-526JND3R.mjs.map
{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-526JND3R.mjs"}
'use strict';
//# sourceMappingURL=chunk-7ELO5FRW.js.map
//# sourceMappingURL=chunk-7ELO5FRW.js.map
{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-7ELO5FRW.js"}
// src/core/calculate.ts
function calcGridColWidth(positionParams) {
const { margin, containerPadding, containerWidth, cols } = positionParams;
return (containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols;
}
function calcGridItemWHPx(gridUnits, colOrRowSize, marginPx) {
if (!Number.isFinite(gridUnits)) return gridUnits;
return Math.round(
colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx
);
}
function calcGridItemPosition(positionParams, x, y, w, h, dragPosition, resizePosition) {
const { margin, containerPadding, rowHeight } = positionParams;
const colWidth = calcGridColWidth(positionParams);
let width;
let height;
let top;
let left;
if (resizePosition) {
width = Math.round(resizePosition.width);
height = Math.round(resizePosition.height);
} else {
width = calcGridItemWHPx(w, colWidth, margin[0]);
height = calcGridItemWHPx(h, rowHeight, margin[1]);
}
if (dragPosition) {
top = Math.round(dragPosition.top);
left = Math.round(dragPosition.left);
} else if (resizePosition) {
top = Math.round(resizePosition.top);
left = Math.round(resizePosition.left);
} else {
top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);
left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);
}
if (!dragPosition && !resizePosition) {
if (Number.isFinite(w)) {
const siblingLeft = Math.round(
(colWidth + margin[0]) * (x + w) + containerPadding[0]
);
const actualMarginRight = siblingLeft - left - width;
if (actualMarginRight !== margin[0]) {
width += actualMarginRight - margin[0];
}
}
if (Number.isFinite(h)) {
const siblingTop = Math.round(
(rowHeight + margin[1]) * (y + h) + containerPadding[1]
);
const actualMarginBottom = siblingTop - top - height;
if (actualMarginBottom !== margin[1]) {
height += actualMarginBottom - margin[1];
}
}
}
return { top, left, width, height };
}
function calcXY(positionParams, top, left, w, h) {
const { margin, containerPadding, cols, rowHeight, maxRows } = positionParams;
const colWidth = calcGridColWidth(positionParams);
let x = Math.round((left - containerPadding[0]) / (colWidth + margin[0]));
let y = Math.round((top - containerPadding[1]) / (rowHeight + margin[1]));
x = clamp(x, 0, cols - w);
y = clamp(y, 0, maxRows - h);
return { x, y };
}
function calcXYRaw(positionParams, top, left) {
const { margin, containerPadding, rowHeight } = positionParams;
const colWidth = calcGridColWidth(positionParams);
const x = Math.round((left - containerPadding[0]) / (colWidth + margin[0]));
const y = Math.round((top - containerPadding[1]) / (rowHeight + margin[1]));
return { x, y };
}
function calcWH(positionParams, width, height, x, y, handle) {
const { margin, maxRows, cols, rowHeight } = positionParams;
const colWidth = calcGridColWidth(positionParams);
const w = Math.round((width + margin[0]) / (colWidth + margin[0]));
const h = Math.round((height + margin[1]) / (rowHeight + margin[1]));
let _w = clamp(w, 0, cols - x);
let _h = clamp(h, 0, maxRows - y);
if (handle === "sw" || handle === "w" || handle === "nw") {
_w = clamp(w, 0, cols);
}
if (handle === "nw" || handle === "n" || handle === "ne") {
_h = clamp(h, 0, maxRows);
}
return { w: _w, h: _h };
}
function calcWHRaw(positionParams, width, height) {
const { margin, rowHeight } = positionParams;
const colWidth = calcGridColWidth(positionParams);
const w = Math.max(
1,
Math.round((width + margin[0]) / (colWidth + margin[0]))
);
const h = Math.max(
1,
Math.round((height + margin[1]) / (rowHeight + margin[1]))
);
return { w, h };
}
function clamp(num, lowerBound, upperBound) {
return Math.max(Math.min(num, upperBound), lowerBound);
}
function calcGridCellDimensions(config) {
const {
width,
cols,
rowHeight,
margin = [10, 10],
containerPadding
} = config;
const padding = containerPadding ?? margin;
const cellWidth = (width - padding[0] * 2 - margin[0] * (cols - 1)) / cols;
const cellHeight = rowHeight;
return {
cellWidth,
cellHeight,
offsetX: padding[0],
offsetY: padding[1],
gapX: margin[0],
gapY: margin[1],
cols,
containerWidth: width
};
}
// src/core/collision.ts
function collides(l1, l2) {
if (l1.i === l2.i) return false;
if (l1.x + l1.w <= l2.x) return false;
if (l1.x >= l2.x + l2.w) return false;
if (l1.y + l1.h <= l2.y) return false;
if (l1.y >= l2.y + l2.h) return false;
return true;
}
function getFirstCollision(layout, layoutItem) {
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0 && collides(item, layoutItem)) {
return item;
}
}
return void 0;
}
function getAllCollisions(layout, layoutItem) {
return layout.filter((l) => collides(l, layoutItem));
}
// src/core/sort.ts
function sortLayoutItems(layout, compactType) {
if (compactType === "horizontal") {
return sortLayoutItemsByColRow(layout);
}
if (compactType === "vertical") {
return sortLayoutItemsByRowCol(layout);
}
if (compactType === "wrap") {
return sortLayoutItemsByRowCol(layout);
}
return [...layout];
}
function sortLayoutItemsByRowCol(layout) {
return [...layout].sort((a, b) => {
if (a.y !== b.y) {
return a.y - b.y;
}
return a.x - b.x;
});
}
function sortLayoutItemsByColRow(layout) {
return [...layout].sort((a, b) => {
if (a.x !== b.x) {
return a.x - b.x;
}
return a.y - b.y;
});
}
// src/core/layout.ts
function bottom(layout) {
let max = 0;
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0) {
const bottomY = item.y + item.h;
if (bottomY > max) max = bottomY;
}
}
return max;
}
function getLayoutItem(layout, id) {
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0 && item.i === id) {
return item;
}
}
return void 0;
}
function getStatics(layout) {
return layout.filter((l) => l.static === true);
}
function cloneLayoutItem(layoutItem) {
return {
i: layoutItem.i,
x: layoutItem.x,
y: layoutItem.y,
w: layoutItem.w,
h: layoutItem.h,
minW: layoutItem.minW,
maxW: layoutItem.maxW,
minH: layoutItem.minH,
maxH: layoutItem.maxH,
moved: Boolean(layoutItem.moved),
static: Boolean(layoutItem.static),
isDraggable: layoutItem.isDraggable,
isResizable: layoutItem.isResizable,
resizeHandles: layoutItem.resizeHandles,
constraints: layoutItem.constraints,
isBounded: layoutItem.isBounded
};
}
function cloneLayout(layout) {
const newLayout = new Array(layout.length);
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0) {
newLayout[i] = cloneLayoutItem(item);
}
}
return newLayout;
}
function modifyLayout(layout, layoutItem) {
const newLayout = new Array(layout.length);
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0) {
if (layoutItem.i === item.i) {
newLayout[i] = layoutItem;
} else {
newLayout[i] = item;
}
}
}
return newLayout;
}
function withLayoutItem(layout, itemKey, cb) {
let item = getLayoutItem(layout, itemKey);
if (!item) {
return [[...layout], null];
}
item = cb(cloneLayoutItem(item));
const newLayout = modifyLayout(layout, item);
return [newLayout, item];
}
function correctBounds(layout, bounds) {
const collidesWith = getStatics(layout);
for (let i = 0; i < layout.length; i++) {
const l = layout[i];
if (l === void 0) continue;
if (l.x + l.w > bounds.cols) {
l.x = bounds.cols - l.w;
}
if (l.x < 0) {
l.x = 0;
l.w = bounds.cols;
}
if (!l.static) {
collidesWith.push(l);
} else {
while (getFirstCollision(collidesWith, l)) {
l.y++;
}
}
}
return layout;
}
function moveElement(layout, l, x, y, isUserAction, preventCollision, compactType, cols, allowOverlap) {
if (l.static && l.isDraggable !== true) {
return [...layout];
}
if (l.y === y && l.x === x) {
return [...layout];
}
const oldX = l.x;
const oldY = l.y;
if (typeof x === "number") l.x = x;
if (typeof y === "number") l.y = y;
l.moved = true;
let sorted = sortLayoutItems(layout, compactType);
const movingUp = compactType === "vertical" && typeof y === "number" ? oldY >= y : compactType === "horizontal" && typeof x === "number" ? oldX >= x : false;
if (movingUp) {
sorted = sorted.reverse();
}
const collisions = getAllCollisions(sorted, l);
const hasCollisions = collisions.length > 0;
if (hasCollisions && allowOverlap) {
return cloneLayout(layout);
}
if (hasCollisions && preventCollision) {
l.x = oldX;
l.y = oldY;
l.moved = false;
return layout;
}
let resultLayout = [...layout];
for (let i = 0; i < collisions.length; i++) {
const collision = collisions[i];
if (collision === void 0) continue;
if (collision.moved) continue;
if (collision.static) {
resultLayout = moveElementAwayFromCollision(
resultLayout,
collision,
l,
isUserAction,
compactType);
} else {
resultLayout = moveElementAwayFromCollision(
resultLayout,
l,
collision,
isUserAction,
compactType);
}
}
return resultLayout;
}
function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAction, compactType, cols) {
const compactH = compactType === "horizontal";
const compactV = compactType === "vertical";
const preventCollision = collidesWith.static;
if (isUserAction) {
isUserAction = false;
const fakeItem = {
x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,
y: compactV ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
w: itemToMove.w,
h: itemToMove.h,
i: "-1"
};
const firstCollision = getFirstCollision(layout, fakeItem);
const collisionNorth = firstCollision !== void 0 && firstCollision.y + firstCollision.h > collidesWith.y;
const collisionWest = firstCollision !== void 0 && collidesWith.x + collidesWith.w > firstCollision.x;
if (!firstCollision) {
return moveElement(
layout,
itemToMove,
compactH ? fakeItem.x : void 0,
compactV ? fakeItem.y : void 0,
isUserAction,
preventCollision,
compactType);
}
if (collisionNorth && compactV) {
return moveElement(
layout,
itemToMove,
void 0,
itemToMove.y + 1,
isUserAction,
preventCollision,
compactType);
}
if (collisionNorth && compactType === null) {
collidesWith.y = itemToMove.y;
itemToMove.y = itemToMove.y + itemToMove.h;
return [...layout];
}
if (collisionWest && compactH) {
return moveElement(
layout,
collidesWith,
itemToMove.x,
void 0,
isUserAction,
preventCollision,
compactType);
}
}
const newX = compactH ? itemToMove.x + 1 : void 0;
const newY = compactV ? itemToMove.y + 1 : void 0;
if (newX === void 0 && newY === void 0) {
return [...layout];
}
return moveElement(
layout,
itemToMove,
newX,
newY,
isUserAction,
preventCollision,
compactType);
}
function validateLayout(layout, contextName = "Layout") {
const requiredProps = ["x", "y", "w", "h"];
if (!Array.isArray(layout)) {
throw new Error(`${contextName} must be an array!`);
}
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item === void 0) continue;
for (const key of requiredProps) {
const value = item[key];
if (typeof value !== "number" || Number.isNaN(value)) {
throw new Error(
`ReactGridLayout: ${contextName}[${i}].${key} must be a number! Received: ${String(value)} (${typeof value})`
);
}
}
if (item.i !== void 0 && typeof item.i !== "string") {
throw new Error(
`ReactGridLayout: ${contextName}[${i}].i must be a string! Received: ${String(item.i)} (${typeof item.i})`
);
}
}
}
export { bottom, calcGridCellDimensions, calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcWHRaw, calcXY, calcXYRaw, clamp, cloneLayout, cloneLayoutItem, collides, correctBounds, getAllCollisions, getFirstCollision, getLayoutItem, getStatics, modifyLayout, moveElement, moveElementAwayFromCollision, sortLayoutItems, sortLayoutItemsByColRow, sortLayoutItemsByRowCol, validateLayout, withLayoutItem };
//# sourceMappingURL=chunk-AWM66AWF.mjs.map
//# sourceMappingURL=chunk-AWM66AWF.mjs.map
{"version":3,"sources":["../src/core/calculate.ts","../src/core/collision.ts","../src/core/sort.ts","../src/core/layout.ts"],"names":[],"mappings":"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","file":"chunk-AWM66AWF.mjs","sourcesContent":["/**\n * Grid calculation utilities.\n *\n * These functions convert between grid units and pixel positions.\n */\n\nimport type { Position, ResizeHandleAxis } from \"./types.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Parameters needed for position calculations.\n */\nexport interface PositionParams {\n readonly margin: readonly [number, number];\n readonly containerPadding: readonly [number, number];\n readonly containerWidth: number;\n readonly cols: number;\n readonly rowHeight: number;\n readonly maxRows: number;\n}\n\n// ============================================================================\n// Grid Column/Row Calculations\n// ============================================================================\n\n/**\n * Calculate the width of a single grid column in pixels.\n *\n * @param positionParams - Grid parameters\n * @returns Column width in pixels\n */\nexport function calcGridColWidth(positionParams: PositionParams): number {\n const { margin, containerPadding, containerWidth, cols } = positionParams;\n return (\n (containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols\n );\n}\n\n/**\n * Calculate the pixel size for a grid unit dimension (width or height).\n *\n * Can be called as:\n * - calcGridItemWHPx(w, colWidth, margin[0]) for width\n * - calcGridItemWHPx(h, rowHeight, margin[1]) for height\n *\n * @param gridUnits - Size in grid units\n * @param colOrRowSize - Column width or row height in pixels\n * @param marginPx - Margin between items in pixels\n * @returns Size in pixels\n */\nexport function calcGridItemWHPx(\n gridUnits: number,\n colOrRowSize: number,\n marginPx: number\n): number {\n // 0 * Infinity === NaN, which causes problems with resize constraints\n if (!Number.isFinite(gridUnits)) return gridUnits;\n return Math.round(\n colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx\n );\n}\n\n// ============================================================================\n// Position Calculations\n// ============================================================================\n\n/**\n * Calculate pixel position for a grid item.\n *\n * Returns left, top, width, height in pixels.\n *\n * @param positionParams - Grid parameters\n * @param x - X coordinate in grid units\n * @param y - Y coordinate in grid units\n * @param w - Width in grid units\n * @param h - Height in grid units\n * @param dragPosition - If present, use exact left/top from drag callbacks\n * @param resizePosition - If present, use exact dimensions from resize callbacks\n * @returns Position in pixels\n */\nexport function calcGridItemPosition(\n positionParams: PositionParams,\n x: number,\n y: number,\n w: number,\n h: number,\n dragPosition?: { top: number; left: number } | null,\n resizePosition?: {\n top: number;\n left: number;\n height: number;\n width: number;\n } | null\n): Position {\n const { margin, containerPadding, rowHeight } = positionParams;\n const colWidth = calcGridColWidth(positionParams);\n\n let width: number;\n let height: number;\n let top: number;\n let left: number;\n\n // If resizing, use the exact width and height from resize callbacks\n if (resizePosition) {\n width = Math.round(resizePosition.width);\n height = Math.round(resizePosition.height);\n } else {\n // Calculate from grid units\n width = calcGridItemWHPx(w, colWidth, margin[0]);\n height = calcGridItemWHPx(h, rowHeight, margin[1]);\n }\n\n // If dragging, use the exact left/top from drag callbacks\n if (dragPosition) {\n top = Math.round(dragPosition.top);\n left = Math.round(dragPosition.left);\n } else if (resizePosition) {\n // If resizing, use the exact left/top from resize position\n top = Math.round(resizePosition.top);\n left = Math.round(resizePosition.left);\n } else {\n // Calculate from grid units\n top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);\n left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);\n }\n\n // When not dragging or resizing, fix margin inconsistencies caused by rounding.\n // Due to Math.round(), the gap between adjacent items can differ from the\n // expected margin (e.g., 0px or 2px instead of 1px). We fix this by comparing\n // where the next sibling would start vs where this item ends, and adjusting\n // the width/height to maintain consistent margins.\n if (!dragPosition && !resizePosition) {\n if (Number.isFinite(w)) {\n // Calculate where the next column's item would start\n const siblingLeft = Math.round(\n (colWidth + margin[0]) * (x + w) + containerPadding[0]\n );\n // Calculate actual margin: sibling start - (our left + our width)\n const actualMarginRight = siblingLeft - left - width;\n // Adjust width if margin doesn't match\n if (actualMarginRight !== margin[0]) {\n width += actualMarginRight - margin[0];\n }\n }\n\n if (Number.isFinite(h)) {\n // Calculate where the next row's item would start\n const siblingTop = Math.round(\n (rowHeight + margin[1]) * (y + h) + containerPadding[1]\n );\n // Calculate actual margin: sibling start - (our top + our height)\n const actualMarginBottom = siblingTop - top - height;\n // Adjust height if margin doesn't match\n if (actualMarginBottom !== margin[1]) {\n height += actualMarginBottom - margin[1];\n }\n }\n }\n\n return { top, left, width, height };\n}\n\n/**\n * Translate pixel coordinates to grid units.\n *\n * @param positionParams - Grid parameters\n * @param top - Top position in pixels (relative to parent)\n * @param left - Left position in pixels (relative to parent)\n * @param w - Width in grid units (for clamping)\n * @param h - Height in grid units (for clamping)\n * @returns x and y in grid units\n */\nexport function calcXY(\n positionParams: PositionParams,\n top: number,\n left: number,\n w: number,\n h: number\n): { x: number; y: number } {\n const { margin, containerPadding, cols, rowHeight, maxRows } = positionParams;\n const colWidth = calcGridColWidth(positionParams);\n\n // left = containerPaddingX + x * (colWidth + marginX)\n // x = (left - containerPaddingX) / (colWidth + marginX)\n let x = Math.round((left - containerPadding[0]) / (colWidth + margin[0]));\n let y = Math.round((top - containerPadding[1]) / (rowHeight + margin[1]));\n\n // Clamp to grid bounds\n x = clamp(x, 0, cols - w);\n y = clamp(y, 0, maxRows - h);\n\n return { x, y };\n}\n\n/**\n * Translate pixel coordinates to grid units without clamping.\n *\n * Use this with the constraint system for custom boundary control.\n *\n * @param positionParams - Grid parameters\n * @param top - Top position in pixels (relative to parent)\n * @param left - Left position in pixels (relative to parent)\n * @returns x and y in grid units (unclamped)\n */\nexport function calcXYRaw(\n positionParams: PositionParams,\n top: number,\n left: number\n): { x: number; y: number } {\n const { margin, containerPadding, rowHeight } = positionParams;\n const colWidth = calcGridColWidth(positionParams);\n\n const x = Math.round((left - containerPadding[0]) / (colWidth + margin[0]));\n const y = Math.round((top - containerPadding[1]) / (rowHeight + margin[1]));\n\n return { x, y };\n}\n\n/**\n * Calculate grid units from pixel dimensions.\n *\n * @param positionParams - Grid parameters\n * @param width - Width in pixels\n * @param height - Height in pixels\n * @param x - X coordinate in grid units (for clamping)\n * @param y - Y coordinate in grid units (for clamping)\n * @param handle - Resize handle being used\n * @returns w, h in grid units\n */\nexport function calcWH(\n positionParams: PositionParams,\n width: number,\n height: number,\n x: number,\n y: number,\n handle: ResizeHandleAxis\n): { w: number; h: number } {\n const { margin, maxRows, cols, rowHeight } = positionParams;\n const colWidth = calcGridColWidth(positionParams);\n\n // width = colWidth * w - (margin * (w - 1))\n // w = (width + margin) / (colWidth + margin)\n const w = Math.round((width + margin[0]) / (colWidth + margin[0]));\n const h = Math.round((height + margin[1]) / (rowHeight + margin[1]));\n\n // Clamp based on resize handle direction\n let _w = clamp(w, 0, cols - x);\n let _h = clamp(h, 0, maxRows - y);\n\n // West handles can resize to full width\n if (handle === \"sw\" || handle === \"w\" || handle === \"nw\") {\n _w = clamp(w, 0, cols);\n }\n\n // North handles can resize to full height\n if (handle === \"nw\" || handle === \"n\" || handle === \"ne\") {\n _h = clamp(h, 0, maxRows);\n }\n\n return { w: _w, h: _h };\n}\n\n/**\n * Calculate grid units from pixel dimensions without clamping.\n *\n * Use this with the constraint system for custom size control.\n *\n * @param positionParams - Grid parameters\n * @param width - Width in pixels\n * @param height - Height in pixels\n * @returns w, h in grid units (unclamped, minimum 1)\n */\nexport function calcWHRaw(\n positionParams: PositionParams,\n width: number,\n height: number\n): { w: number; h: number } {\n const { margin, rowHeight } = positionParams;\n const colWidth = calcGridColWidth(positionParams);\n\n // width = colWidth * w - (margin * (w - 1))\n // w = (width + margin) / (colWidth + margin)\n const w = Math.max(\n 1,\n Math.round((width + margin[0]) / (colWidth + margin[0]))\n );\n const h = Math.max(\n 1,\n Math.round((height + margin[1]) / (rowHeight + margin[1]))\n );\n\n return { w, h };\n}\n\n// ============================================================================\n// Utility Functions\n// ============================================================================\n\n/**\n * Clamp a number between bounds.\n *\n * @param num - Number to clamp\n * @param lowerBound - Minimum value\n * @param upperBound - Maximum value\n * @returns Clamped value\n */\nexport function clamp(\n num: number,\n lowerBound: number,\n upperBound: number\n): number {\n return Math.max(Math.min(num, upperBound), lowerBound);\n}\n\n// ============================================================================\n// Grid Background Calculations\n// ============================================================================\n\n/**\n * Grid cell dimension information for rendering backgrounds or overlays.\n */\nexport interface GridCellDimensions {\n /** Width of a single cell in pixels */\n readonly cellWidth: number;\n /** Height of a single cell in pixels */\n readonly cellHeight: number;\n /** Horizontal offset from container edge to first cell */\n readonly offsetX: number;\n /** Vertical offset from container edge to first cell */\n readonly offsetY: number;\n /** Horizontal gap between cells */\n readonly gapX: number;\n /** Vertical gap between cells */\n readonly gapY: number;\n /** Number of columns */\n readonly cols: number;\n /** Total container width */\n readonly containerWidth: number;\n}\n\n/**\n * Configuration for grid cell dimension calculation.\n */\nexport interface GridCellConfig {\n /** Container width in pixels */\n width: number;\n /** Number of columns */\n cols: number;\n /** Row height in pixels */\n rowHeight: number;\n /** Margin between items [x, y] */\n margin?: readonly [number, number];\n /** Container padding [x, y], defaults to margin if not specified */\n containerPadding?: readonly [number, number] | null;\n}\n\n/**\n * Calculate grid cell dimensions for rendering backgrounds or overlays.\n *\n * This function provides all the measurements needed to render a visual\n * grid background that aligns with the actual grid cells.\n *\n * @param config - Grid configuration\n * @returns Cell dimensions and offsets\n *\n * @example\n * ```tsx\n * import { calcGridCellDimensions } from 'react-grid-layout/core';\n *\n * const dims = calcGridCellDimensions({\n * width: 1200,\n * cols: 12,\n * rowHeight: 30,\n * margin: [10, 10],\n * containerPadding: [10, 10]\n * });\n *\n * // dims.cellWidth = 88.33...\n * // dims.cellHeight = 30\n * // dims.offsetX = 10 (containerPadding[0])\n * // dims.offsetY = 10 (containerPadding[1])\n * // dims.gapX = 10 (margin[0])\n * // dims.gapY = 10 (margin[1])\n * ```\n */\nexport function calcGridCellDimensions(\n config: GridCellConfig\n): GridCellDimensions {\n const {\n width,\n cols,\n rowHeight,\n margin = [10, 10],\n containerPadding\n } = config;\n\n // Container padding defaults to margin if not specified\n const padding = containerPadding ?? margin;\n\n // Calculate cell width: total width minus padding and gaps, divided by columns\n // Formula: width = 2*padding + cols*cellWidth + (cols-1)*gap\n // Solving for cellWidth: cellWidth = (width - 2*padding - (cols-1)*gap) / cols\n const cellWidth = (width - padding[0] * 2 - margin[0] * (cols - 1)) / cols;\n const cellHeight = rowHeight;\n\n return {\n cellWidth,\n cellHeight,\n offsetX: padding[0],\n offsetY: padding[1],\n gapX: margin[0],\n gapY: margin[1],\n cols,\n containerWidth: width\n };\n}\n","/**\n * Collision detection utilities for grid layouts.\n *\n * These functions determine if and where layout items overlap.\n */\n\nimport type { Layout, LayoutItem } from \"./types.js\";\n\n/**\n * Check if two layout items collide (overlap).\n *\n * Two items collide if their bounding boxes overlap and they are\n * not the same item.\n *\n * @param l1 - First layout item\n * @param l2 - Second layout item\n * @returns true if the items collide\n */\nexport function collides(l1: LayoutItem, l2: LayoutItem): boolean {\n // Same element - can't collide with itself\n if (l1.i === l2.i) return false;\n\n // Check if bounding boxes don't overlap (any gap means no collision)\n if (l1.x + l1.w <= l2.x) return false; // l1 is completely left of l2\n if (l1.x >= l2.x + l2.w) return false; // l1 is completely right of l2\n if (l1.y + l1.h <= l2.y) return false; // l1 is completely above l2\n if (l1.y >= l2.y + l2.h) return false; // l1 is completely below l2\n\n // Bounding boxes overlap\n return true;\n}\n\n/**\n * Find the first item in the layout that collides with the given item.\n *\n * @param layout - Layout to search\n * @param layoutItem - Item to check for collisions\n * @returns The first colliding item, or undefined if none\n */\nexport function getFirstCollision(\n layout: Layout,\n layoutItem: LayoutItem\n): LayoutItem | undefined {\n for (let i = 0; i < layout.length; i++) {\n const item = layout[i];\n if (item !== undefined && collides(item, layoutItem)) {\n return item;\n }\n }\n return undefined;\n}\n\n/**\n * Find all items in the layout that collide with the given item.\n *\n * @param layout - Layout to search\n * @param layoutItem - Item to check for collisions\n * @returns Array of all colliding items (may be empty)\n */\nexport function getAllCollisions(\n layout: Layout,\n layoutItem: LayoutItem\n): LayoutItem[] {\n return layout.filter((l): l is LayoutItem => collides(l, layoutItem));\n}\n","/**\n * Sorting utilities for grid layouts.\n *\n * These functions sort layout items for compaction and iteration.\n */\n\nimport type { CompactType, Layout, LayoutItem } from \"./types.js\";\n\n/**\n * Sort layout items based on the compaction type.\n *\n * - Vertical compaction: sort by row (y) then column (x)\n * - Horizontal compaction: sort by column (x) then row (y)\n * - No compaction (null): return original order\n *\n * Does not modify the original layout.\n *\n * @param layout - Layout to sort\n * @param compactType - Type of compaction\n * @returns Sorted layout\n */\nexport function sortLayoutItems(\n layout: Layout,\n compactType: CompactType\n): LayoutItem[] {\n if (compactType === \"horizontal\") {\n return sortLayoutItemsByColRow(layout);\n }\n if (compactType === \"vertical\") {\n return sortLayoutItemsByRowCol(layout);\n }\n if (compactType === \"wrap\") {\n // Wrap mode uses row-col order (reading order: left-to-right, top-to-bottom)\n return sortLayoutItemsByRowCol(layout);\n }\n // No compaction - return a copy to maintain immutability\n return [...layout];\n}\n\n/**\n * Sort layout items by row ascending, then column ascending.\n *\n * Items are ordered from top-left to bottom-right, row by row.\n * This is the natural reading order for vertical compaction.\n *\n * Does not modify the original layout.\n *\n * @param layout - Layout to sort\n * @returns Sorted array of layout items\n */\nexport function sortLayoutItemsByRowCol(layout: Layout): LayoutItem[] {\n return [...layout].sort((a, b) => {\n // Primary sort by row (y)\n if (a.y !== b.y) {\n return a.y - b.y;\n }\n // Secondary sort by column (x)\n return a.x - b.x;\n });\n}\n\n/**\n * Sort layout items by column ascending, then row ascending.\n *\n * Items are ordered from top-left to bottom-right, column by column.\n * This is the natural order for horizontal compaction.\n *\n * Does not modify the original layout.\n *\n * @param layout - Layout to sort\n * @returns Sorted array of layout items\n */\nexport function sortLayoutItemsByColRow(layout: Layout): LayoutItem[] {\n return [...layout].sort((a, b) => {\n // Primary sort by column (x)\n if (a.x !== b.x) {\n return a.x - b.x;\n }\n // Secondary sort by row (y)\n return a.y - b.y;\n });\n}\n","/**\n * Core layout manipulation utilities.\n *\n * These functions create, modify, and query grid layouts.\n * All functions treat layouts as immutable - they return new arrays/objects.\n */\n\nimport type { CompactType, Layout, LayoutItem, Mutable } from \"./types.js\";\nimport { getAllCollisions, getFirstCollision } from \"./collision.js\";\nimport { sortLayoutItems } from \"./sort.js\";\n\n// ============================================================================\n// Layout Queries\n// ============================================================================\n\n/**\n * Get the bottom-most Y coordinate of the layout.\n *\n * This is the Y position plus height of the lowest item.\n *\n * @param layout - Layout to measure\n * @returns The bottom Y coordinate (0 if layout is empty)\n */\nexport function bottom(layout: Layout): number {\n let max = 0;\n for (let i = 0; i < layout.length; i++) {\n const item = layout[i];\n if (item !== undefined) {\n const bottomY = item.y + item.h;\n if (bottomY > max) max = bottomY;\n }\n }\n return max;\n}\n\n/**\n * Get a layout item by its ID.\n *\n * @param layout - Layout to search\n * @param id - Item ID to find\n * @returns The layout item, or undefined if not found\n */\nexport function getLayoutItem(\n layout: Layout,\n id: string\n): LayoutItem | undefined {\n for (let i = 0; i < layout.length; i++) {\n const item = layout[i];\n if (item !== undefined && item.i === id) {\n return item;\n }\n }\n return undefined;\n}\n\n/**\n * Get all static items from the layout.\n *\n * Static items cannot be moved or resized by the user.\n *\n * @param layout - Layout to filter\n * @returns Array of static layout items\n */\nexport function getStatics(layout: Layout): LayoutItem[] {\n return layout.filter((l): l is LayoutItem => l.static === true);\n}\n\n// ============================================================================\n// Layout Cloning\n// ============================================================================\n\n/**\n * Clone a layout item.\n *\n * Creates a shallow copy with all properties preserved.\n * Boolean properties are normalized (undefined becomes false).\n *\n * @param layoutItem - Item to clone\n * @returns A new layout item with the same properties\n */\nexport function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem {\n return {\n i: layoutItem.i,\n x: layoutItem.x,\n y: layoutItem.y,\n w: layoutItem.w,\n h: layoutItem.h,\n minW: layoutItem.minW,\n maxW: layoutItem.maxW,\n minH: layoutItem.minH,\n maxH: layoutItem.maxH,\n moved: Boolean(layoutItem.moved),\n static: Boolean(layoutItem.static),\n isDraggable: layoutItem.isDraggable,\n isResizable: layoutItem.isResizable,\n resizeHandles: layoutItem.resizeHandles,\n constraints: layoutItem.constraints,\n isBounded: layoutItem.isBounded\n };\n}\n\n/**\n * Clone an entire layout.\n *\n * Creates a new array with cloned items.\n *\n * @param layout - Layout to clone\n * @returns A new layout with cloned items\n */\nexport function cloneLayout(layout: Layout): LayoutItem[] {\n const newLayout: LayoutItem[] = new Array(layout.length);\n for (let i = 0; i < layout.length; i++) {\n const item = layout[i];\n if (item !== undefined) {\n newLayout[i] = cloneLayoutItem(item);\n }\n }\n return newLayout;\n}\n\n// ============================================================================\n// Layout Modification\n// ============================================================================\n\n/**\n * Replace a layout item in a layout.\n *\n * Returns a new layout with the item replaced. Other items are not cloned.\n *\n * @param layout - Layout to modify\n * @param layoutItem - New item (matched by `i` property)\n * @returns New layout with the item replaced\n */\nexport function modifyLayout(\n layout: Layout,\n layoutItem: LayoutItem\n): LayoutItem[] {\n const newLayout: LayoutItem[] = new Array(layout.length);\n for (let i = 0; i < layout.length; i++) {\n const item = layout[i];\n if (item !== undefined) {\n if (layoutItem.i === item.i) {\n newLayout[i] = layoutItem;\n } else {\n newLayout[i] = item;\n }\n }\n }\n return newLayout;\n}\n\n/**\n * Apply a transformation to a layout item.\n *\n * Finds the item by key, clones it, applies the callback, and returns\n * a new layout with the modified item.\n *\n * @param layout - Layout to modify\n * @param itemKey - Key of the item to modify\n * @param cb - Callback that receives the cloned item and returns the modified item\n * @returns Tuple of [new layout, modified item or null if not found]\n */\nexport function withLayoutItem(\n layout: Layout,\n itemKey: string,\n cb: (item: LayoutItem) => LayoutItem\n): [LayoutItem[], LayoutItem | null] {\n let item = getLayoutItem(layout, itemKey);\n if (!item) {\n return [[...layout], null];\n }\n\n // Clone, then modify via callback\n item = cb(cloneLayoutItem(item));\n const newLayout = modifyLayout(layout, item);\n\n return [newLayout, item];\n}\n\n// ============================================================================\n// Bounds Correction\n// ============================================================================\n\n/**\n * Ensure all layout items fit within the grid bounds.\n *\n * - Items overflowing right are moved left\n * - Items overflowing left are moved to x=0 and clamped to grid width\n * - Static items that collide with other statics are moved down\n *\n * **IMPORTANT**: This function mutates the layout items in place for performance.\n * The type signature uses `Mutable<LayoutItem>[]` to make this explicit.\n * Clone the layout first (e.g., with `cloneLayout()`) if you need immutability.\n *\n * @param layout - Layout to correct (items WILL be mutated)\n * @param bounds - Grid bounds\n * @returns The same layout array (for chaining)\n */\nexport function correctBounds(\n layout: Mutable<LayoutItem>[],\n bounds: { cols: number }\n): LayoutItem[] {\n const collidesWith = getStatics(layout);\n\n for (let i = 0; i < layout.length; i++) {\n const l = layout[i];\n if (l === undefined) continue;\n\n // Overflows right\n if (l.x + l.w > bounds.cols) {\n l.x = bounds.cols - l.w;\n }\n\n // Overflows left\n if (l.x < 0) {\n l.x = 0;\n l.w = bounds.cols;\n }\n\n if (!l.static) {\n collidesWith.push(l);\n } else {\n // Static items that collide with other statics must be moved down\n while (getFirstCollision(collidesWith, l)) {\n l.y++;\n }\n }\n }\n\n return layout;\n}\n\n// ============================================================================\n// Move Operations\n// ============================================================================\n\n/**\n * Move a layout element to a new position.\n *\n * Handles collision detection and cascading movements.\n * Does not compact the layout - call `compact()` separately.\n *\n * **Note**: This function mutates the `l` parameter directly for performance.\n * The item's x, y, and moved properties will be modified. Callers should\n * ideally pass a cloned item if they need to preserve the original.\n *\n * @param layout - Full layout\n * @param l - Item to move (will be mutated)\n * @param x - New X position (or undefined to keep current)\n * @param y - New Y position (or undefined to keep current)\n * @param isUserAction - True if this is a direct user action (affects collision resolution)\n * @param preventCollision - True to block movement into occupied space (item snaps back). No effect if allowOverlap is true.\n * @param compactType - Compaction type for collision resolution\n * @param cols - Number of columns in the grid\n * @param allowOverlap - True to allow items to stack on top of each other\n * @returns The updated layout\n */\nexport function moveElement(\n layout: Layout,\n l: LayoutItem,\n x: number | undefined,\n y: number | undefined,\n isUserAction: boolean | undefined,\n preventCollision: boolean | undefined,\n compactType: CompactType,\n cols: number,\n allowOverlap?: boolean\n): LayoutItem[] {\n // Static items can't be moved unless explicitly draggable\n if (l.static && l.isDraggable !== true) {\n return [...layout];\n }\n\n // Short-circuit if position unchanged\n if (l.y === y && l.x === x) {\n return [...layout];\n }\n\n const oldX = l.x;\n const oldY = l.y;\n\n // Update position (mutates l directly - see JSDoc note)\n if (typeof x === \"number\") (l as Mutable<LayoutItem>).x = x;\n if (typeof y === \"number\") (l as Mutable<LayoutItem>).y = y;\n (l as Mutable<LayoutItem>).moved = true;\n\n // Sort for proper collision detection order\n let sorted = sortLayoutItems(layout, compactType);\n const movingUp =\n compactType === \"vertical\" && typeof y === \"number\"\n ? oldY >= y\n : compactType === \"horizontal\" && typeof x === \"number\"\n ? oldX >= x\n : false;\n\n if (movingUp) {\n sorted = sorted.reverse();\n }\n\n const collisions = getAllCollisions(sorted, l);\n const hasCollisions = collisions.length > 0;\n\n // Handle overlap mode - just clone and return\n if (hasCollisions && allowOverlap) {\n return cloneLayout(layout);\n }\n\n // Handle prevent collision mode - revert position\n // Return same reference to signal no change occurred\n if (hasCollisions && preventCollision) {\n (l as Mutable<LayoutItem>).x = oldX;\n (l as Mutable<LayoutItem>).y = oldY;\n (l as Mutable<LayoutItem>).moved = false;\n return layout as LayoutItem[];\n }\n\n // Resolve collisions by moving other items\n let resultLayout: LayoutItem[] = [...layout];\n for (let i = 0; i < collisions.length; i++) {\n const collision = collisions[i];\n if (collision === undefined) continue;\n\n // Skip already-moved items to prevent infinite loops\n if (collision.moved) continue;\n\n // Static items can't be moved - move the dragged item instead\n if (collision.static) {\n resultLayout = moveElementAwayFromCollision(\n resultLayout,\n collision,\n l,\n isUserAction,\n compactType,\n cols\n );\n } else {\n resultLayout = moveElementAwayFromCollision(\n resultLayout,\n l,\n collision,\n isUserAction,\n compactType,\n cols\n );\n }\n }\n\n return resultLayout;\n}\n\n/**\n * Move an item away from a collision.\n *\n * Attempts to move the item up/left first if there's room,\n * otherwise moves it down/right.\n *\n * @param layout - Full layout\n * @param collidesWith - The item being collided with\n * @param itemToMove - The item to move away\n * @param isUserAction - True if this is a direct user action\n * @param compactType - Compaction type\n * @param cols - Number of columns\n * @returns Updated layout\n */\nexport function moveElementAwayFromCollision(\n layout: Layout,\n collidesWith: LayoutItem,\n itemToMove: LayoutItem,\n isUserAction: boolean | undefined,\n compactType: CompactType,\n cols: number\n): LayoutItem[] {\n const compactH = compactType === \"horizontal\";\n const compactV = compactType === \"vertical\";\n const preventCollision = collidesWith.static;\n\n // Try to move up/left first (only on primary collision from user action)\n if (isUserAction) {\n isUserAction = false; // Only try this once\n\n // Create a fake item to test if there's room above/left\n const fakeItem: LayoutItem = {\n x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,\n y: compactV ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,\n w: itemToMove.w,\n h: itemToMove.h,\n i: \"-1\"\n };\n\n const firstCollision = getFirstCollision(layout, fakeItem);\n const collisionNorth =\n firstCollision !== undefined &&\n firstCollision.y + firstCollision.h > collidesWith.y;\n const collisionWest =\n firstCollision !== undefined &&\n collidesWith.x + collidesWith.w > firstCollision.x;\n\n // No collision above/left - we can move there\n if (!firstCollision) {\n return moveElement(\n layout,\n itemToMove,\n compactH ? fakeItem.x : undefined,\n compactV ? fakeItem.y : undefined,\n isUserAction,\n preventCollision,\n compactType,\n cols\n );\n }\n\n // Handle specific collision cases\n if (collisionNorth && compactV) {\n return moveElement(\n layout,\n itemToMove,\n undefined,\n itemToMove.y + 1,\n isUserAction,\n preventCollision,\n compactType,\n cols\n );\n }\n\n if (collisionNorth && compactType === null) {\n // Swap positions in free-form mode\n (collidesWith as Mutable<LayoutItem>).y = itemToMove.y;\n (itemToMove as Mutable<LayoutItem>).y = itemToMove.y + itemToMove.h;\n return [...layout];\n }\n\n if (collisionWest && compactH) {\n return moveElement(\n layout,\n collidesWith,\n itemToMove.x,\n undefined,\n isUserAction,\n preventCollision,\n compactType,\n cols\n );\n }\n }\n\n // Default: move down/right by 1\n const newX = compactH ? itemToMove.x + 1 : undefined;\n const newY = compactV ? itemToMove.y + 1 : undefined;\n\n if (newX === undefined && newY === undefined) {\n return [...layout];\n }\n\n return moveElement(\n layout,\n itemToMove,\n newX,\n newY,\n isUserAction,\n preventCollision,\n compactType,\n cols\n );\n}\n\n// ============================================================================\n// Validation\n// ============================================================================\n\n/**\n * Validate that a layout has the required properties.\n *\n * @param layout - Layout to validate\n * @param contextName - Name for error messages\n * @throws Error if layout is invalid\n */\nexport function validateLayout(\n layout: Layout,\n contextName: string = \"Layout\"\n): void {\n const requiredProps = [\"x\", \"y\", \"w\", \"h\"] as const;\n\n if (!Array.isArray(layout)) {\n throw new Error(`${contextName} must be an array!`);\n }\n\n for (let i = 0; i < layout.length; i++) {\n const item = layout[i];\n if (item === undefined) continue;\n\n for (const key of requiredProps) {\n const value = item[key];\n if (typeof value !== \"number\" || Number.isNaN(value)) {\n throw new Error(\n `ReactGridLayout: ${contextName}[${i}].${key} must be a number! ` +\n `Received: ${String(value)} (${typeof value})`\n );\n }\n }\n\n if (item.i !== undefined && typeof item.i !== \"string\") {\n throw new Error(\n `ReactGridLayout: ${contextName}[${i}].i must be a string! ` +\n `Received: ${String(item.i)} (${typeof item.i})`\n );\n }\n }\n}\n"]}
'use strict';
// src/core/calculate.ts
function calcGridColWidth(positionParams) {
const { margin, containerPadding, containerWidth, cols } = positionParams;
return (containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols;
}
function calcGridItemWHPx(gridUnits, colOrRowSize, marginPx) {
if (!Number.isFinite(gridUnits)) return gridUnits;
return Math.round(
colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx
);
}
function calcGridItemPosition(positionParams, x, y, w, h, dragPosition, resizePosition) {
const { margin, containerPadding, rowHeight } = positionParams;
const colWidth = calcGridColWidth(positionParams);
let width;
let height;
let top;
let left;
if (resizePosition) {
width = Math.round(resizePosition.width);
height = Math.round(resizePosition.height);
} else {
width = calcGridItemWHPx(w, colWidth, margin[0]);
height = calcGridItemWHPx(h, rowHeight, margin[1]);
}
if (dragPosition) {
top = Math.round(dragPosition.top);
left = Math.round(dragPosition.left);
} else if (resizePosition) {
top = Math.round(resizePosition.top);
left = Math.round(resizePosition.left);
} else {
top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);
left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);
}
if (!dragPosition && !resizePosition) {
if (Number.isFinite(w)) {
const siblingLeft = Math.round(
(colWidth + margin[0]) * (x + w) + containerPadding[0]
);
const actualMarginRight = siblingLeft - left - width;
if (actualMarginRight !== margin[0]) {
width += actualMarginRight - margin[0];
}
}
if (Number.isFinite(h)) {
const siblingTop = Math.round(
(rowHeight + margin[1]) * (y + h) + containerPadding[1]
);
const actualMarginBottom = siblingTop - top - height;
if (actualMarginBottom !== margin[1]) {
height += actualMarginBottom - margin[1];
}
}
}
return { top, left, width, height };
}
function calcXY(positionParams, top, left, w, h) {
const { margin, containerPadding, cols, rowHeight, maxRows } = positionParams;
const colWidth = calcGridColWidth(positionParams);
let x = Math.round((left - containerPadding[0]) / (colWidth + margin[0]));
let y = Math.round((top - containerPadding[1]) / (rowHeight + margin[1]));
x = clamp(x, 0, cols - w);
y = clamp(y, 0, maxRows - h);
return { x, y };
}
function calcXYRaw(positionParams, top, left) {
const { margin, containerPadding, rowHeight } = positionParams;
const colWidth = calcGridColWidth(positionParams);
const x = Math.round((left - containerPadding[0]) / (colWidth + margin[0]));
const y = Math.round((top - containerPadding[1]) / (rowHeight + margin[1]));
return { x, y };
}
function calcWH(positionParams, width, height, x, y, handle) {
const { margin, maxRows, cols, rowHeight } = positionParams;
const colWidth = calcGridColWidth(positionParams);
const w = Math.round((width + margin[0]) / (colWidth + margin[0]));
const h = Math.round((height + margin[1]) / (rowHeight + margin[1]));
let _w = clamp(w, 0, cols - x);
let _h = clamp(h, 0, maxRows - y);
if (handle === "sw" || handle === "w" || handle === "nw") {
_w = clamp(w, 0, cols);
}
if (handle === "nw" || handle === "n" || handle === "ne") {
_h = clamp(h, 0, maxRows);
}
return { w: _w, h: _h };
}
function calcWHRaw(positionParams, width, height) {
const { margin, rowHeight } = positionParams;
const colWidth = calcGridColWidth(positionParams);
const w = Math.max(
1,
Math.round((width + margin[0]) / (colWidth + margin[0]))
);
const h = Math.max(
1,
Math.round((height + margin[1]) / (rowHeight + margin[1]))
);
return { w, h };
}
function clamp(num, lowerBound, upperBound) {
return Math.max(Math.min(num, upperBound), lowerBound);
}
function calcGridCellDimensions(config) {
const {
width,
cols,
rowHeight,
margin = [10, 10],
containerPadding
} = config;
const padding = containerPadding ?? margin;
const cellWidth = (width - padding[0] * 2 - margin[0] * (cols - 1)) / cols;
const cellHeight = rowHeight;
return {
cellWidth,
cellHeight,
offsetX: padding[0],
offsetY: padding[1],
gapX: margin[0],
gapY: margin[1],
cols,
containerWidth: width
};
}
// src/core/collision.ts
function collides(l1, l2) {
if (l1.i === l2.i) return false;
if (l1.x + l1.w <= l2.x) return false;
if (l1.x >= l2.x + l2.w) return false;
if (l1.y + l1.h <= l2.y) return false;
if (l1.y >= l2.y + l2.h) return false;
return true;
}
function getFirstCollision(layout, layoutItem) {
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0 && collides(item, layoutItem)) {
return item;
}
}
return void 0;
}
function getAllCollisions(layout, layoutItem) {
return layout.filter((l) => collides(l, layoutItem));
}
// src/core/sort.ts
function sortLayoutItems(layout, compactType) {
if (compactType === "horizontal") {
return sortLayoutItemsByColRow(layout);
}
if (compactType === "vertical") {
return sortLayoutItemsByRowCol(layout);
}
if (compactType === "wrap") {
return sortLayoutItemsByRowCol(layout);
}
return [...layout];
}
function sortLayoutItemsByRowCol(layout) {
return [...layout].sort((a, b) => {
if (a.y !== b.y) {
return a.y - b.y;
}
return a.x - b.x;
});
}
function sortLayoutItemsByColRow(layout) {
return [...layout].sort((a, b) => {
if (a.x !== b.x) {
return a.x - b.x;
}
return a.y - b.y;
});
}
// src/core/layout.ts
function bottom(layout) {
let max = 0;
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0) {
const bottomY = item.y + item.h;
if (bottomY > max) max = bottomY;
}
}
return max;
}
function getLayoutItem(layout, id) {
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0 && item.i === id) {
return item;
}
}
return void 0;
}
function getStatics(layout) {
return layout.filter((l) => l.static === true);
}
function cloneLayoutItem(layoutItem) {
return {
i: layoutItem.i,
x: layoutItem.x,
y: layoutItem.y,
w: layoutItem.w,
h: layoutItem.h,
minW: layoutItem.minW,
maxW: layoutItem.maxW,
minH: layoutItem.minH,
maxH: layoutItem.maxH,
moved: Boolean(layoutItem.moved),
static: Boolean(layoutItem.static),
isDraggable: layoutItem.isDraggable,
isResizable: layoutItem.isResizable,
resizeHandles: layoutItem.resizeHandles,
constraints: layoutItem.constraints,
isBounded: layoutItem.isBounded
};
}
function cloneLayout(layout) {
const newLayout = new Array(layout.length);
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0) {
newLayout[i] = cloneLayoutItem(item);
}
}
return newLayout;
}
function modifyLayout(layout, layoutItem) {
const newLayout = new Array(layout.length);
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0) {
if (layoutItem.i === item.i) {
newLayout[i] = layoutItem;
} else {
newLayout[i] = item;
}
}
}
return newLayout;
}
function withLayoutItem(layout, itemKey, cb) {
let item = getLayoutItem(layout, itemKey);
if (!item) {
return [[...layout], null];
}
item = cb(cloneLayoutItem(item));
const newLayout = modifyLayout(layout, item);
return [newLayout, item];
}
function correctBounds(layout, bounds) {
const collidesWith = getStatics(layout);
for (let i = 0; i < layout.length; i++) {
const l = layout[i];
if (l === void 0) continue;
if (l.x + l.w > bounds.cols) {
l.x = bounds.cols - l.w;
}
if (l.x < 0) {
l.x = 0;
l.w = bounds.cols;
}
if (!l.static) {
collidesWith.push(l);
} else {
while (getFirstCollision(collidesWith, l)) {
l.y++;
}
}
}
return layout;
}
function moveElement(layout, l, x, y, isUserAction, preventCollision, compactType, cols, allowOverlap) {
if (l.static && l.isDraggable !== true) {
return [...layout];
}
if (l.y === y && l.x === x) {
return [...layout];
}
const oldX = l.x;
const oldY = l.y;
if (typeof x === "number") l.x = x;
if (typeof y === "number") l.y = y;
l.moved = true;
let sorted = sortLayoutItems(layout, compactType);
const movingUp = compactType === "vertical" && typeof y === "number" ? oldY >= y : compactType === "horizontal" && typeof x === "number" ? oldX >= x : false;
if (movingUp) {
sorted = sorted.reverse();
}
const collisions = getAllCollisions(sorted, l);
const hasCollisions = collisions.length > 0;
if (hasCollisions && allowOverlap) {
return cloneLayout(layout);
}
if (hasCollisions && preventCollision) {
l.x = oldX;
l.y = oldY;
l.moved = false;
return layout;
}
let resultLayout = [...layout];
for (let i = 0; i < collisions.length; i++) {
const collision = collisions[i];
if (collision === void 0) continue;
if (collision.moved) continue;
if (collision.static) {
resultLayout = moveElementAwayFromCollision(
resultLayout,
collision,
l,
isUserAction,
compactType);
} else {
resultLayout = moveElementAwayFromCollision(
resultLayout,
l,
collision,
isUserAction,
compactType);
}
}
return resultLayout;
}
function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAction, compactType, cols) {
const compactH = compactType === "horizontal";
const compactV = compactType === "vertical";
const preventCollision = collidesWith.static;
if (isUserAction) {
isUserAction = false;
const fakeItem = {
x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,
y: compactV ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
w: itemToMove.w,
h: itemToMove.h,
i: "-1"
};
const firstCollision = getFirstCollision(layout, fakeItem);
const collisionNorth = firstCollision !== void 0 && firstCollision.y + firstCollision.h > collidesWith.y;
const collisionWest = firstCollision !== void 0 && collidesWith.x + collidesWith.w > firstCollision.x;
if (!firstCollision) {
return moveElement(
layout,
itemToMove,
compactH ? fakeItem.x : void 0,
compactV ? fakeItem.y : void 0,
isUserAction,
preventCollision,
compactType);
}
if (collisionNorth && compactV) {
return moveElement(
layout,
itemToMove,
void 0,
itemToMove.y + 1,
isUserAction,
preventCollision,
compactType);
}
if (collisionNorth && compactType === null) {
collidesWith.y = itemToMove.y;
itemToMove.y = itemToMove.y + itemToMove.h;
return [...layout];
}
if (collisionWest && compactH) {
return moveElement(
layout,
collidesWith,
itemToMove.x,
void 0,
isUserAction,
preventCollision,
compactType);
}
}
const newX = compactH ? itemToMove.x + 1 : void 0;
const newY = compactV ? itemToMove.y + 1 : void 0;
if (newX === void 0 && newY === void 0) {
return [...layout];
}
return moveElement(
layout,
itemToMove,
newX,
newY,
isUserAction,
preventCollision,
compactType);
}
function validateLayout(layout, contextName = "Layout") {
const requiredProps = ["x", "y", "w", "h"];
if (!Array.isArray(layout)) {
throw new Error(`${contextName} must be an array!`);
}
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item === void 0) continue;
for (const key of requiredProps) {
const value = item[key];
if (typeof value !== "number" || Number.isNaN(value)) {
throw new Error(
`ReactGridLayout: ${contextName}[${i}].${key} must be a number! Received: ${String(value)} (${typeof value})`
);
}
}
if (item.i !== void 0 && typeof item.i !== "string") {
throw new Error(
`ReactGridLayout: ${contextName}[${i}].i must be a string! Received: ${String(item.i)} (${typeof item.i})`
);
}
}
}
exports.bottom = bottom;
exports.calcGridCellDimensions = calcGridCellDimensions;
exports.calcGridColWidth = calcGridColWidth;
exports.calcGridItemPosition = calcGridItemPosition;
exports.calcGridItemWHPx = calcGridItemWHPx;
exports.calcWH = calcWH;
exports.calcWHRaw = calcWHRaw;
exports.calcXY = calcXY;
exports.calcXYRaw = calcXYRaw;
exports.clamp = clamp;
exports.cloneLayout = cloneLayout;
exports.cloneLayoutItem = cloneLayoutItem;
exports.collides = collides;
exports.correctBounds = correctBounds;
exports.getAllCollisions = getAllCollisions;
exports.getFirstCollision = getFirstCollision;
exports.getLayoutItem = getLayoutItem;
exports.getStatics = getStatics;
exports.modifyLayout = modifyLayout;
exports.moveElement = moveElement;
exports.moveElementAwayFromCollision = moveElementAwayFromCollision;
exports.sortLayoutItems = sortLayoutItems;
exports.sortLayoutItemsByColRow = sortLayoutItemsByColRow;
exports.sortLayoutItemsByRowCol = sortLayoutItemsByRowCol;
exports.validateLayout = validateLayout;
exports.withLayoutItem = withLayoutItem;
//# sourceMappingURL=chunk-BJFPTW5Q.js.map
//# sourceMappingURL=chunk-BJFPTW5Q.js.map
{"version":3,"sources":["../src/core/calculate.ts","../src/core/collision.ts","../src/core/sort.ts","../src/core/layout.ts"],"names":[],"mappings":"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","file":"chunk-BJFPTW5Q.js","sourcesContent":["/**\n * Grid calculation utilities.\n *\n * These functions convert between grid units and pixel positions.\n */\n\nimport type { Position, ResizeHandleAxis } from \"./types.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Parameters needed for position calculations.\n */\nexport interface PositionParams {\n readonly margin: readonly [number, number];\n readonly containerPadding: readonly [number, number];\n readonly containerWidth: number;\n readonly cols: number;\n readonly rowHeight: number;\n readonly maxRows: number;\n}\n\n// ============================================================================\n// Grid Column/Row Calculations\n// ============================================================================\n\n/**\n * Calculate the width of a single grid column in pixels.\n *\n * @param positionParams - Grid parameters\n * @returns Column width in pixels\n */\nexport function calcGridColWidth(positionParams: PositionParams): number {\n const { margin, containerPadding, containerWidth, cols } = positionParams;\n return (\n (containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols\n );\n}\n\n/**\n * Calculate the pixel size for a grid unit dimension (width or height).\n *\n * Can be called as:\n * - calcGridItemWHPx(w, colWidth, margin[0]) for width\n * - calcGridItemWHPx(h, rowHeight, margin[1]) for height\n *\n * @param gridUnits - Size in grid units\n * @param colOrRowSize - Column width or row height in pixels\n * @param marginPx - Margin between items in pixels\n * @returns Size in pixels\n */\nexport function calcGridItemWHPx(\n gridUnits: number,\n colOrRowSize: number,\n marginPx: number\n): number {\n // 0 * Infinity === NaN, which causes problems with resize constraints\n if (!Number.isFinite(gridUnits)) return gridUnits;\n return Math.round(\n colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx\n );\n}\n\n// ============================================================================\n// Position Calculations\n// ============================================================================\n\n/**\n * Calculate pixel position for a grid item.\n *\n * Returns left, top, width, height in pixels.\n *\n * @param positionParams - Grid parameters\n * @param x - X coordinate in grid units\n * @param y - Y coordinate in grid units\n * @param w - Width in grid units\n * @param h - Height in grid units\n * @param dragPosition - If present, use exact left/top from drag callbacks\n * @param resizePosition - If present, use exact dimensions from resize callbacks\n * @returns Position in pixels\n */\nexport function calcGridItemPosition(\n positionParams: PositionParams,\n x: number,\n y: number,\n w: number,\n h: number,\n dragPosition?: { top: number; left: number } | null,\n resizePosition?: {\n top: number;\n left: number;\n height: number;\n width: number;\n } | null\n): Position {\n const { margin, containerPadding, rowHeight } = positionParams;\n const colWidth = calcGridColWidth(positionParams);\n\n let width: number;\n let height: number;\n let top: number;\n let left: number;\n\n // If resizing, use the exact width and height from resize callbacks\n if (resizePosition) {\n width = Math.round(resizePosition.width);\n height = Math.round(resizePosition.height);\n } else {\n // Calculate from grid units\n width = calcGridItemWHPx(w, colWidth, margin[0]);\n height = calcGridItemWHPx(h, rowHeight, margin[1]);\n }\n\n // If dragging, use the exact left/top from drag callbacks\n if (dragPosition) {\n top = Math.round(dragPosition.top);\n left = Math.round(dragPosition.left);\n } else if (resizePosition) {\n // If resizing, use the exact left/top from resize position\n top = Math.round(resizePosition.top);\n left = Math.round(resizePosition.left);\n } else {\n // Calculate from grid units\n top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);\n left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);\n }\n\n // When not dragging or resizing, fix margin inconsistencies caused by rounding.\n // Due to Math.round(), the gap between adjacent items can differ from the\n // expected margin (e.g., 0px or 2px instead of 1px). We fix this by comparing\n // where the next sibling would start vs where this item ends, and adjusting\n // the width/height to maintain consistent margins.\n if (!dragPosition && !resizePosition) {\n if (Number.isFinite(w)) {\n // Calculate where the next column's item would start\n const siblingLeft = Math.round(\n (colWidth + margin[0]) * (x + w) + containerPadding[0]\n );\n // Calculate actual margin: sibling start - (our left + our width)\n const actualMarginRight = siblingLeft - left - width;\n // Adjust width if margin doesn't match\n if (actualMarginRight !== margin[0]) {\n width += actualMarginRight - margin[0];\n }\n }\n\n if (Number.isFinite(h)) {\n // Calculate where the next row's item would start\n const siblingTop = Math.round(\n (rowHeight + margin[1]) * (y + h) + containerPadding[1]\n );\n // Calculate actual margin: sibling start - (our top + our height)\n const actualMarginBottom = siblingTop - top - height;\n // Adjust height if margin doesn't match\n if (actualMarginBottom !== margin[1]) {\n height += actualMarginBottom - margin[1];\n }\n }\n }\n\n return { top, left, width, height };\n}\n\n/**\n * Translate pixel coordinates to grid units.\n *\n * @param positionParams - Grid parameters\n * @param top - Top position in pixels (relative to parent)\n * @param left - Left position in pixels (relative to parent)\n * @param w - Width in grid units (for clamping)\n * @param h - Height in grid units (for clamping)\n * @returns x and y in grid units\n */\nexport function calcXY(\n positionParams: PositionParams,\n top: number,\n left: number,\n w: number,\n h: number\n): { x: number; y: number } {\n const { margin, containerPadding, cols, rowHeight, maxRows } = positionParams;\n const colWidth = calcGridColWidth(positionParams);\n\n // left = containerPaddingX + x * (colWidth + marginX)\n // x = (left - containerPaddingX) / (colWidth + marginX)\n let x = Math.round((left - containerPadding[0]) / (colWidth + margin[0]));\n let y = Math.round((top - containerPadding[1]) / (rowHeight + margin[1]));\n\n // Clamp to grid bounds\n x = clamp(x, 0, cols - w);\n y = clamp(y, 0, maxRows - h);\n\n return { x, y };\n}\n\n/**\n * Translate pixel coordinates to grid units without clamping.\n *\n * Use this with the constraint system for custom boundary control.\n *\n * @param positionParams - Grid parameters\n * @param top - Top position in pixels (relative to parent)\n * @param left - Left position in pixels (relative to parent)\n * @returns x and y in grid units (unclamped)\n */\nexport function calcXYRaw(\n positionParams: PositionParams,\n top: number,\n left: number\n): { x: number; y: number } {\n const { margin, containerPadding, rowHeight } = positionParams;\n const colWidth = calcGridColWidth(positionParams);\n\n const x = Math.round((left - containerPadding[0]) / (colWidth + margin[0]));\n const y = Math.round((top - containerPadding[1]) / (rowHeight + margin[1]));\n\n return { x, y };\n}\n\n/**\n * Calculate grid units from pixel dimensions.\n *\n * @param positionParams - Grid parameters\n * @param width - Width in pixels\n * @param height - Height in pixels\n * @param x - X coordinate in grid units (for clamping)\n * @param y - Y coordinate in grid units (for clamping)\n * @param handle - Resize handle being used\n * @returns w, h in grid units\n */\nexport function calcWH(\n positionParams: PositionParams,\n width: number,\n height: number,\n x: number,\n y: number,\n handle: ResizeHandleAxis\n): { w: number; h: number } {\n const { margin, maxRows, cols, rowHeight } = positionParams;\n const colWidth = calcGridColWidth(positionParams);\n\n // width = colWidth * w - (margin * (w - 1))\n // w = (width + margin) / (colWidth + margin)\n const w = Math.round((width + margin[0]) / (colWidth + margin[0]));\n const h = Math.round((height + margin[1]) / (rowHeight + margin[1]));\n\n // Clamp based on resize handle direction\n let _w = clamp(w, 0, cols - x);\n let _h = clamp(h, 0, maxRows - y);\n\n // West handles can resize to full width\n if (handle === \"sw\" || handle === \"w\" || handle === \"nw\") {\n _w = clamp(w, 0, cols);\n }\n\n // North handles can resize to full height\n if (handle === \"nw\" || handle === \"n\" || handle === \"ne\") {\n _h = clamp(h, 0, maxRows);\n }\n\n return { w: _w, h: _h };\n}\n\n/**\n * Calculate grid units from pixel dimensions without clamping.\n *\n * Use this with the constraint system for custom size control.\n *\n * @param positionParams - Grid parameters\n * @param width - Width in pixels\n * @param height - Height in pixels\n * @returns w, h in grid units (unclamped, minimum 1)\n */\nexport function calcWHRaw(\n positionParams: PositionParams,\n width: number,\n height: number\n): { w: number; h: number } {\n const { margin, rowHeight } = positionParams;\n const colWidth = calcGridColWidth(positionParams);\n\n // width = colWidth * w - (margin * (w - 1))\n // w = (width + margin) / (colWidth + margin)\n const w = Math.max(\n 1,\n Math.round((width + margin[0]) / (colWidth + margin[0]))\n );\n const h = Math.max(\n 1,\n Math.round((height + margin[1]) / (rowHeight + margin[1]))\n );\n\n return { w, h };\n}\n\n// ============================================================================\n// Utility Functions\n// ============================================================================\n\n/**\n * Clamp a number between bounds.\n *\n * @param num - Number to clamp\n * @param lowerBound - Minimum value\n * @param upperBound - Maximum value\n * @returns Clamped value\n */\nexport function clamp(\n num: number,\n lowerBound: number,\n upperBound: number\n): number {\n return Math.max(Math.min(num, upperBound), lowerBound);\n}\n\n// ============================================================================\n// Grid Background Calculations\n// ============================================================================\n\n/**\n * Grid cell dimension information for rendering backgrounds or overlays.\n */\nexport interface GridCellDimensions {\n /** Width of a single cell in pixels */\n readonly cellWidth: number;\n /** Height of a single cell in pixels */\n readonly cellHeight: number;\n /** Horizontal offset from container edge to first cell */\n readonly offsetX: number;\n /** Vertical offset from container edge to first cell */\n readonly offsetY: number;\n /** Horizontal gap between cells */\n readonly gapX: number;\n /** Vertical gap between cells */\n readonly gapY: number;\n /** Number of columns */\n readonly cols: number;\n /** Total container width */\n readonly containerWidth: number;\n}\n\n/**\n * Configuration for grid cell dimension calculation.\n */\nexport interface GridCellConfig {\n /** Container width in pixels */\n width: number;\n /** Number of columns */\n cols: number;\n /** Row height in pixels */\n rowHeight: number;\n /** Margin between items [x, y] */\n margin?: readonly [number, number];\n /** Container padding [x, y], defaults to margin if not specified */\n containerPadding?: readonly [number, number] | null;\n}\n\n/**\n * Calculate grid cell dimensions for rendering backgrounds or overlays.\n *\n * This function provides all the measurements needed to render a visual\n * grid background that aligns with the actual grid cells.\n *\n * @param config - Grid configuration\n * @returns Cell dimensions and offsets\n *\n * @example\n * ```tsx\n * import { calcGridCellDimensions } from 'react-grid-layout/core';\n *\n * const dims = calcGridCellDimensions({\n * width: 1200,\n * cols: 12,\n * rowHeight: 30,\n * margin: [10, 10],\n * containerPadding: [10, 10]\n * });\n *\n * // dims.cellWidth = 88.33...\n * // dims.cellHeight = 30\n * // dims.offsetX = 10 (containerPadding[0])\n * // dims.offsetY = 10 (containerPadding[1])\n * // dims.gapX = 10 (margin[0])\n * // dims.gapY = 10 (margin[1])\n * ```\n */\nexport function calcGridCellDimensions(\n config: GridCellConfig\n): GridCellDimensions {\n const {\n width,\n cols,\n rowHeight,\n margin = [10, 10],\n containerPadding\n } = config;\n\n // Container padding defaults to margin if not specified\n const padding = containerPadding ?? margin;\n\n // Calculate cell width: total width minus padding and gaps, divided by columns\n // Formula: width = 2*padding + cols*cellWidth + (cols-1)*gap\n // Solving for cellWidth: cellWidth = (width - 2*padding - (cols-1)*gap) / cols\n const cellWidth = (width - padding[0] * 2 - margin[0] * (cols - 1)) / cols;\n const cellHeight = rowHeight;\n\n return {\n cellWidth,\n cellHeight,\n offsetX: padding[0],\n offsetY: padding[1],\n gapX: margin[0],\n gapY: margin[1],\n cols,\n containerWidth: width\n };\n}\n","/**\n * Collision detection utilities for grid layouts.\n *\n * These functions determine if and where layout items overlap.\n */\n\nimport type { Layout, LayoutItem } from \"./types.js\";\n\n/**\n * Check if two layout items collide (overlap).\n *\n * Two items collide if their bounding boxes overlap and they are\n * not the same item.\n *\n * @param l1 - First layout item\n * @param l2 - Second layout item\n * @returns true if the items collide\n */\nexport function collides(l1: LayoutItem, l2: LayoutItem): boolean {\n // Same element - can't collide with itself\n if (l1.i === l2.i) return false;\n\n // Check if bounding boxes don't overlap (any gap means no collision)\n if (l1.x + l1.w <= l2.x) return false; // l1 is completely left of l2\n if (l1.x >= l2.x + l2.w) return false; // l1 is completely right of l2\n if (l1.y + l1.h <= l2.y) return false; // l1 is completely above l2\n if (l1.y >= l2.y + l2.h) return false; // l1 is completely below l2\n\n // Bounding boxes overlap\n return true;\n}\n\n/**\n * Find the first item in the layout that collides with the given item.\n *\n * @param layout - Layout to search\n * @param layoutItem - Item to check for collisions\n * @returns The first colliding item, or undefined if none\n */\nexport function getFirstCollision(\n layout: Layout,\n layoutItem: LayoutItem\n): LayoutItem | undefined {\n for (let i = 0; i < layout.length; i++) {\n const item = layout[i];\n if (item !== undefined && collides(item, layoutItem)) {\n return item;\n }\n }\n return undefined;\n}\n\n/**\n * Find all items in the layout that collide with the given item.\n *\n * @param layout - Layout to search\n * @param layoutItem - Item to check for collisions\n * @returns Array of all colliding items (may be empty)\n */\nexport function getAllCollisions(\n layout: Layout,\n layoutItem: LayoutItem\n): LayoutItem[] {\n return layout.filter((l): l is LayoutItem => collides(l, layoutItem));\n}\n","/**\n * Sorting utilities for grid layouts.\n *\n * These functions sort layout items for compaction and iteration.\n */\n\nimport type { CompactType, Layout, LayoutItem } from \"./types.js\";\n\n/**\n * Sort layout items based on the compaction type.\n *\n * - Vertical compaction: sort by row (y) then column (x)\n * - Horizontal compaction: sort by column (x) then row (y)\n * - No compaction (null): return original order\n *\n * Does not modify the original layout.\n *\n * @param layout - Layout to sort\n * @param compactType - Type of compaction\n * @returns Sorted layout\n */\nexport function sortLayoutItems(\n layout: Layout,\n compactType: CompactType\n): LayoutItem[] {\n if (compactType === \"horizontal\") {\n return sortLayoutItemsByColRow(layout);\n }\n if (compactType === \"vertical\") {\n return sortLayoutItemsByRowCol(layout);\n }\n if (compactType === \"wrap\") {\n // Wrap mode uses row-col order (reading order: left-to-right, top-to-bottom)\n return sortLayoutItemsByRowCol(layout);\n }\n // No compaction - return a copy to maintain immutability\n return [...layout];\n}\n\n/**\n * Sort layout items by row ascending, then column ascending.\n *\n * Items are ordered from top-left to bottom-right, row by row.\n * This is the natural reading order for vertical compaction.\n *\n * Does not modify the original layout.\n *\n * @param layout - Layout to sort\n * @returns Sorted array of layout items\n */\nexport function sortLayoutItemsByRowCol(layout: Layout): LayoutItem[] {\n return [...layout].sort((a, b) => {\n // Primary sort by row (y)\n if (a.y !== b.y) {\n return a.y - b.y;\n }\n // Secondary sort by column (x)\n return a.x - b.x;\n });\n}\n\n/**\n * Sort layout items by column ascending, then row ascending.\n *\n * Items are ordered from top-left to bottom-right, column by column.\n * This is the natural order for horizontal compaction.\n *\n * Does not modify the original layout.\n *\n * @param layout - Layout to sort\n * @returns Sorted array of layout items\n */\nexport function sortLayoutItemsByColRow(layout: Layout): LayoutItem[] {\n return [...layout].sort((a, b) => {\n // Primary sort by column (x)\n if (a.x !== b.x) {\n return a.x - b.x;\n }\n // Secondary sort by row (y)\n return a.y - b.y;\n });\n}\n","/**\n * Core layout manipulation utilities.\n *\n * These functions create, modify, and query grid layouts.\n * All functions treat layouts as immutable - they return new arrays/objects.\n */\n\nimport type { CompactType, Layout, LayoutItem, Mutable } from \"./types.js\";\nimport { getAllCollisions, getFirstCollision } from \"./collision.js\";\nimport { sortLayoutItems } from \"./sort.js\";\n\n// ============================================================================\n// Layout Queries\n// ============================================================================\n\n/**\n * Get the bottom-most Y coordinate of the layout.\n *\n * This is the Y position plus height of the lowest item.\n *\n * @param layout - Layout to measure\n * @returns The bottom Y coordinate (0 if layout is empty)\n */\nexport function bottom(layout: Layout): number {\n let max = 0;\n for (let i = 0; i < layout.length; i++) {\n const item = layout[i];\n if (item !== undefined) {\n const bottomY = item.y + item.h;\n if (bottomY > max) max = bottomY;\n }\n }\n return max;\n}\n\n/**\n * Get a layout item by its ID.\n *\n * @param layout - Layout to search\n * @param id - Item ID to find\n * @returns The layout item, or undefined if not found\n */\nexport function getLayoutItem(\n layout: Layout,\n id: string\n): LayoutItem | undefined {\n for (let i = 0; i < layout.length; i++) {\n const item = layout[i];\n if (item !== undefined && item.i === id) {\n return item;\n }\n }\n return undefined;\n}\n\n/**\n * Get all static items from the layout.\n *\n * Static items cannot be moved or resized by the user.\n *\n * @param layout - Layout to filter\n * @returns Array of static layout items\n */\nexport function getStatics(layout: Layout): LayoutItem[] {\n return layout.filter((l): l is LayoutItem => l.static === true);\n}\n\n// ============================================================================\n// Layout Cloning\n// ============================================================================\n\n/**\n * Clone a layout item.\n *\n * Creates a shallow copy with all properties preserved.\n * Boolean properties are normalized (undefined becomes false).\n *\n * @param layoutItem - Item to clone\n * @returns A new layout item with the same properties\n */\nexport function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem {\n return {\n i: layoutItem.i,\n x: layoutItem.x,\n y: layoutItem.y,\n w: layoutItem.w,\n h: layoutItem.h,\n minW: layoutItem.minW,\n maxW: layoutItem.maxW,\n minH: layoutItem.minH,\n maxH: layoutItem.maxH,\n moved: Boolean(layoutItem.moved),\n static: Boolean(layoutItem.static),\n isDraggable: layoutItem.isDraggable,\n isResizable: layoutItem.isResizable,\n resizeHandles: layoutItem.resizeHandles,\n constraints: layoutItem.constraints,\n isBounded: layoutItem.isBounded\n };\n}\n\n/**\n * Clone an entire layout.\n *\n * Creates a new array with cloned items.\n *\n * @param layout - Layout to clone\n * @returns A new layout with cloned items\n */\nexport function cloneLayout(layout: Layout): LayoutItem[] {\n const newLayout: LayoutItem[] = new Array(layout.length);\n for (let i = 0; i < layout.length; i++) {\n const item = layout[i];\n if (item !== undefined) {\n newLayout[i] = cloneLayoutItem(item);\n }\n }\n return newLayout;\n}\n\n// ============================================================================\n// Layout Modification\n// ============================================================================\n\n/**\n * Replace a layout item in a layout.\n *\n * Returns a new layout with the item replaced. Other items are not cloned.\n *\n * @param layout - Layout to modify\n * @param layoutItem - New item (matched by `i` property)\n * @returns New layout with the item replaced\n */\nexport function modifyLayout(\n layout: Layout,\n layoutItem: LayoutItem\n): LayoutItem[] {\n const newLayout: LayoutItem[] = new Array(layout.length);\n for (let i = 0; i < layout.length; i++) {\n const item = layout[i];\n if (item !== undefined) {\n if (layoutItem.i === item.i) {\n newLayout[i] = layoutItem;\n } else {\n newLayout[i] = item;\n }\n }\n }\n return newLayout;\n}\n\n/**\n * Apply a transformation to a layout item.\n *\n * Finds the item by key, clones it, applies the callback, and returns\n * a new layout with the modified item.\n *\n * @param layout - Layout to modify\n * @param itemKey - Key of the item to modify\n * @param cb - Callback that receives the cloned item and returns the modified item\n * @returns Tuple of [new layout, modified item or null if not found]\n */\nexport function withLayoutItem(\n layout: Layout,\n itemKey: string,\n cb: (item: LayoutItem) => LayoutItem\n): [LayoutItem[], LayoutItem | null] {\n let item = getLayoutItem(layout, itemKey);\n if (!item) {\n return [[...layout], null];\n }\n\n // Clone, then modify via callback\n item = cb(cloneLayoutItem(item));\n const newLayout = modifyLayout(layout, item);\n\n return [newLayout, item];\n}\n\n// ============================================================================\n// Bounds Correction\n// ============================================================================\n\n/**\n * Ensure all layout items fit within the grid bounds.\n *\n * - Items overflowing right are moved left\n * - Items overflowing left are moved to x=0 and clamped to grid width\n * - Static items that collide with other statics are moved down\n *\n * **IMPORTANT**: This function mutates the layout items in place for performance.\n * The type signature uses `Mutable<LayoutItem>[]` to make this explicit.\n * Clone the layout first (e.g., with `cloneLayout()`) if you need immutability.\n *\n * @param layout - Layout to correct (items WILL be mutated)\n * @param bounds - Grid bounds\n * @returns The same layout array (for chaining)\n */\nexport function correctBounds(\n layout: Mutable<LayoutItem>[],\n bounds: { cols: number }\n): LayoutItem[] {\n const collidesWith = getStatics(layout);\n\n for (let i = 0; i < layout.length; i++) {\n const l = layout[i];\n if (l === undefined) continue;\n\n // Overflows right\n if (l.x + l.w > bounds.cols) {\n l.x = bounds.cols - l.w;\n }\n\n // Overflows left\n if (l.x < 0) {\n l.x = 0;\n l.w = bounds.cols;\n }\n\n if (!l.static) {\n collidesWith.push(l);\n } else {\n // Static items that collide with other statics must be moved down\n while (getFirstCollision(collidesWith, l)) {\n l.y++;\n }\n }\n }\n\n return layout;\n}\n\n// ============================================================================\n// Move Operations\n// ============================================================================\n\n/**\n * Move a layout element to a new position.\n *\n * Handles collision detection and cascading movements.\n * Does not compact the layout - call `compact()` separately.\n *\n * **Note**: This function mutates the `l` parameter directly for performance.\n * The item's x, y, and moved properties will be modified. Callers should\n * ideally pass a cloned item if they need to preserve the original.\n *\n * @param layout - Full layout\n * @param l - Item to move (will be mutated)\n * @param x - New X position (or undefined to keep current)\n * @param y - New Y position (or undefined to keep current)\n * @param isUserAction - True if this is a direct user action (affects collision resolution)\n * @param preventCollision - True to block movement into occupied space (item snaps back). No effect if allowOverlap is true.\n * @param compactType - Compaction type for collision resolution\n * @param cols - Number of columns in the grid\n * @param allowOverlap - True to allow items to stack on top of each other\n * @returns The updated layout\n */\nexport function moveElement(\n layout: Layout,\n l: LayoutItem,\n x: number | undefined,\n y: number | undefined,\n isUserAction: boolean | undefined,\n preventCollision: boolean | undefined,\n compactType: CompactType,\n cols: number,\n allowOverlap?: boolean\n): LayoutItem[] {\n // Static items can't be moved unless explicitly draggable\n if (l.static && l.isDraggable !== true) {\n return [...layout];\n }\n\n // Short-circuit if position unchanged\n if (l.y === y && l.x === x) {\n return [...layout];\n }\n\n const oldX = l.x;\n const oldY = l.y;\n\n // Update position (mutates l directly - see JSDoc note)\n if (typeof x === \"number\") (l as Mutable<LayoutItem>).x = x;\n if (typeof y === \"number\") (l as Mutable<LayoutItem>).y = y;\n (l as Mutable<LayoutItem>).moved = true;\n\n // Sort for proper collision detection order\n let sorted = sortLayoutItems(layout, compactType);\n const movingUp =\n compactType === \"vertical\" && typeof y === \"number\"\n ? oldY >= y\n : compactType === \"horizontal\" && typeof x === \"number\"\n ? oldX >= x\n : false;\n\n if (movingUp) {\n sorted = sorted.reverse();\n }\n\n const collisions = getAllCollisions(sorted, l);\n const hasCollisions = collisions.length > 0;\n\n // Handle overlap mode - just clone and return\n if (hasCollisions && allowOverlap) {\n return cloneLayout(layout);\n }\n\n // Handle prevent collision mode - revert position\n // Return same reference to signal no change occurred\n if (hasCollisions && preventCollision) {\n (l as Mutable<LayoutItem>).x = oldX;\n (l as Mutable<LayoutItem>).y = oldY;\n (l as Mutable<LayoutItem>).moved = false;\n return layout as LayoutItem[];\n }\n\n // Resolve collisions by moving other items\n let resultLayout: LayoutItem[] = [...layout];\n for (let i = 0; i < collisions.length; i++) {\n const collision = collisions[i];\n if (collision === undefined) continue;\n\n // Skip already-moved items to prevent infinite loops\n if (collision.moved) continue;\n\n // Static items can't be moved - move the dragged item instead\n if (collision.static) {\n resultLayout = moveElementAwayFromCollision(\n resultLayout,\n collision,\n l,\n isUserAction,\n compactType,\n cols\n );\n } else {\n resultLayout = moveElementAwayFromCollision(\n resultLayout,\n l,\n collision,\n isUserAction,\n compactType,\n cols\n );\n }\n }\n\n return resultLayout;\n}\n\n/**\n * Move an item away from a collision.\n *\n * Attempts to move the item up/left first if there's room,\n * otherwise moves it down/right.\n *\n * @param layout - Full layout\n * @param collidesWith - The item being collided with\n * @param itemToMove - The item to move away\n * @param isUserAction - True if this is a direct user action\n * @param compactType - Compaction type\n * @param cols - Number of columns\n * @returns Updated layout\n */\nexport function moveElementAwayFromCollision(\n layout: Layout,\n collidesWith: LayoutItem,\n itemToMove: LayoutItem,\n isUserAction: boolean | undefined,\n compactType: CompactType,\n cols: number\n): LayoutItem[] {\n const compactH = compactType === \"horizontal\";\n const compactV = compactType === \"vertical\";\n const preventCollision = collidesWith.static;\n\n // Try to move up/left first (only on primary collision from user action)\n if (isUserAction) {\n isUserAction = false; // Only try this once\n\n // Create a fake item to test if there's room above/left\n const fakeItem: LayoutItem = {\n x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,\n y: compactV ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,\n w: itemToMove.w,\n h: itemToMove.h,\n i: \"-1\"\n };\n\n const firstCollision = getFirstCollision(layout, fakeItem);\n const collisionNorth =\n firstCollision !== undefined &&\n firstCollision.y + firstCollision.h > collidesWith.y;\n const collisionWest =\n firstCollision !== undefined &&\n collidesWith.x + collidesWith.w > firstCollision.x;\n\n // No collision above/left - we can move there\n if (!firstCollision) {\n return moveElement(\n layout,\n itemToMove,\n compactH ? fakeItem.x : undefined,\n compactV ? fakeItem.y : undefined,\n isUserAction,\n preventCollision,\n compactType,\n cols\n );\n }\n\n // Handle specific collision cases\n if (collisionNorth && compactV) {\n return moveElement(\n layout,\n itemToMove,\n undefined,\n itemToMove.y + 1,\n isUserAction,\n preventCollision,\n compactType,\n cols\n );\n }\n\n if (collisionNorth && compactType === null) {\n // Swap positions in free-form mode\n (collidesWith as Mutable<LayoutItem>).y = itemToMove.y;\n (itemToMove as Mutable<LayoutItem>).y = itemToMove.y + itemToMove.h;\n return [...layout];\n }\n\n if (collisionWest && compactH) {\n return moveElement(\n layout,\n collidesWith,\n itemToMove.x,\n undefined,\n isUserAction,\n preventCollision,\n compactType,\n cols\n );\n }\n }\n\n // Default: move down/right by 1\n const newX = compactH ? itemToMove.x + 1 : undefined;\n const newY = compactV ? itemToMove.y + 1 : undefined;\n\n if (newX === undefined && newY === undefined) {\n return [...layout];\n }\n\n return moveElement(\n layout,\n itemToMove,\n newX,\n newY,\n isUserAction,\n preventCollision,\n compactType,\n cols\n );\n}\n\n// ============================================================================\n// Validation\n// ============================================================================\n\n/**\n * Validate that a layout has the required properties.\n *\n * @param layout - Layout to validate\n * @param contextName - Name for error messages\n * @throws Error if layout is invalid\n */\nexport function validateLayout(\n layout: Layout,\n contextName: string = \"Layout\"\n): void {\n const requiredProps = [\"x\", \"y\", \"w\", \"h\"] as const;\n\n if (!Array.isArray(layout)) {\n throw new Error(`${contextName} must be an array!`);\n }\n\n for (let i = 0; i < layout.length; i++) {\n const item = layout[i];\n if (item === undefined) continue;\n\n for (const key of requiredProps) {\n const value = item[key];\n if (typeof value !== \"number\" || Number.isNaN(value)) {\n throw new Error(\n `ReactGridLayout: ${contextName}[${i}].${key} must be a number! ` +\n `Received: ${String(value)} (${typeof value})`\n );\n }\n }\n\n if (item.i !== undefined && typeof item.i !== \"string\") {\n throw new Error(\n `ReactGridLayout: ${contextName}[${i}].i must be a string! ` +\n `Received: ${String(item.i)} (${typeof item.i})`\n );\n }\n }\n}\n"]}
'use strict';
var chunkBJFPTW5Q_js = require('./chunk-BJFPTW5Q.js');
// src/core/constraints.ts
function clamp(value, min, max) {
return Math.max(min, Math.min(max, value));
}
var gridBounds = {
name: "gridBounds",
constrainPosition(item, x, y, { cols, maxRows }) {
return {
x: clamp(x, 0, Math.max(0, cols - item.w)),
y: clamp(y, 0, Math.max(0, maxRows - item.h))
};
},
constrainSize(item, w, h, handle, { cols, maxRows }) {
const maxW = handle === "w" || handle === "nw" || handle === "sw" ? item.x + item.w : cols - item.x;
const maxH = handle === "n" || handle === "nw" || handle === "ne" ? item.y + item.h : maxRows - item.y;
return {
w: clamp(w, 1, Math.max(1, maxW)),
h: clamp(h, 1, Math.max(1, maxH))
};
}
};
var minMaxSize = {
name: "minMaxSize",
constrainSize(item, w, h) {
return {
w: clamp(w, item.minW ?? 1, item.maxW ?? Infinity),
h: clamp(h, item.minH ?? 1, item.maxH ?? Infinity)
};
}
};
var containerBounds = {
name: "containerBounds",
constrainPosition(item, x, y, { cols, maxRows, containerHeight, rowHeight, margin }) {
const visibleRows = containerHeight > 0 ? Math.floor((containerHeight + margin[1]) / (rowHeight + margin[1])) : maxRows;
return {
x: clamp(x, 0, Math.max(0, cols - item.w)),
y: clamp(y, 0, Math.max(0, visibleRows - item.h))
};
}
};
var boundedX = {
name: "boundedX",
constrainPosition(item, x, y, { cols }) {
return {
x: clamp(x, 0, Math.max(0, cols - item.w)),
y
};
}
};
var boundedY = {
name: "boundedY",
constrainPosition(item, x, y, { maxRows }) {
return {
x,
y: clamp(y, 0, Math.max(0, maxRows - item.h))
};
}
};
function aspectRatio(ratio) {
return {
name: `aspectRatio(${ratio})`,
constrainSize(_item, w, _h, _handle, context) {
const { cols, containerWidth, rowHeight, margin } = context;
const colWidth = (containerWidth - margin[0] * (cols - 1)) / cols;
const pixelWidth = colWidth * w + margin[0] * Math.max(0, w - 1);
const pixelHeight = pixelWidth / ratio;
const h = Math.max(
1,
Math.round((pixelHeight + margin[1]) / (rowHeight + margin[1]))
);
return { w, h };
}
};
}
function snapToGrid(stepX, stepY = stepX) {
if (stepX <= 0 || stepY <= 0) {
throw new Error(
`snapToGrid: step values must be positive (got stepX=${stepX}, stepY=${stepY})`
);
}
return {
name: `snapToGrid(${stepX}, ${stepY})`,
constrainPosition(_item, x, y) {
return {
x: Math.round(x / stepX) * stepX,
y: Math.round(y / stepY) * stepY
};
}
};
}
function minSize(minW, minH) {
return {
name: `minSize(${minW}, ${minH})`,
constrainSize(_item, w, h) {
return {
w: Math.max(minW, w),
h: Math.max(minH, h)
};
}
};
}
function maxSize(maxW, maxH) {
return {
name: `maxSize(${maxW}, ${maxH})`,
constrainSize(_item, w, h) {
return {
w: Math.min(maxW, w),
h: Math.min(maxH, h)
};
}
};
}
var defaultConstraints = [gridBounds, minMaxSize];
function applyPositionConstraints(constraints, item, x, y, context) {
let result = { x, y };
for (const constraint of constraints) {
if (constraint.constrainPosition) {
result = constraint.constrainPosition(item, result.x, result.y, context);
}
}
if (item.constraints) {
for (const constraint of item.constraints) {
if (constraint.constrainPosition) {
result = constraint.constrainPosition(
item,
result.x,
result.y,
context
);
}
}
}
return result;
}
function applySizeConstraints(constraints, item, w, h, handle, context) {
let result = { w, h };
for (const constraint of constraints) {
if (constraint.constrainSize) {
result = constraint.constrainSize(
item,
result.w,
result.h,
handle,
context
);
}
}
if (item.constraints) {
for (const constraint of item.constraints) {
if (constraint.constrainSize) {
result = constraint.constrainSize(
item,
result.w,
result.h,
handle,
context
);
}
}
}
return result;
}
// src/core/position.ts
function setTransform({
top,
left,
width,
height
}) {
const translate = `translate(${left}px,${top}px)`;
return {
transform: translate,
WebkitTransform: translate,
MozTransform: translate,
msTransform: translate,
OTransform: translate,
width: `${width}px`,
height: `${height}px`,
position: "absolute"
};
}
function setTopLeft({
top,
left,
width,
height
}) {
return {
top: `${top}px`,
left: `${left}px`,
width: `${width}px`,
height: `${height}px`,
position: "absolute"
};
}
function perc(num) {
return num * 100 + "%";
}
function constrainWidth(left, currentWidth, newWidth, containerWidth) {
return left + newWidth > containerWidth ? currentWidth : newWidth;
}
function constrainHeight(top, currentHeight, newHeight) {
return top < 0 ? currentHeight : newHeight;
}
function constrainLeft(left) {
return Math.max(0, left);
}
function constrainTop(top) {
return Math.max(0, top);
}
var resizeNorth = (currentSize, newSize, _containerWidth) => {
const { left, height, width } = newSize;
const top = currentSize.top - (height - currentSize.height);
return {
left,
width,
height: constrainHeight(top, currentSize.height, height),
top: constrainTop(top)
};
};
var resizeEast = (currentSize, newSize, containerWidth) => {
const { top, left, height, width } = newSize;
return {
top,
height,
width: constrainWidth(
currentSize.left,
currentSize.width,
width,
containerWidth
),
left: constrainLeft(left)
};
};
var resizeWest = (currentSize, newSize, _containerWidth) => {
const { top, height, width } = newSize;
const left = currentSize.left + currentSize.width - width;
if (left < 0) {
return {
height,
width: currentSize.left + currentSize.width,
top: constrainTop(top),
left: 0
};
}
return {
height,
width,
top: constrainTop(top),
left
};
};
var resizeSouth = (currentSize, newSize, _containerWidth) => {
const { top, left, height, width } = newSize;
return {
width,
left,
height: constrainHeight(top, currentSize.height, height),
top: constrainTop(top)
};
};
var resizeNorthEast = (currentSize, newSize, containerWidth) => resizeNorth(
currentSize,
resizeEast(currentSize, newSize, containerWidth));
var resizeNorthWest = (currentSize, newSize, containerWidth) => resizeNorth(
currentSize,
resizeWest(currentSize, newSize));
var resizeSouthEast = (currentSize, newSize, containerWidth) => resizeSouth(
currentSize,
resizeEast(currentSize, newSize, containerWidth));
var resizeSouthWest = (currentSize, newSize, containerWidth) => resizeSouth(
currentSize,
resizeWest(currentSize, newSize));
var resizeHandlerMap = {
n: resizeNorth,
ne: resizeNorthEast,
e: resizeEast,
se: resizeSouthEast,
s: resizeSouth,
sw: resizeSouthWest,
w: resizeWest,
nw: resizeNorthWest
};
function resizeItemInDirection(direction, currentSize, newSize, containerWidth) {
const handler = resizeHandlerMap[direction];
if (!handler) {
return newSize;
}
return handler(currentSize, { ...currentSize, ...newSize }, containerWidth);
}
var transformStrategy = {
type: "transform",
scale: 1,
calcStyle(pos) {
return setTransform(pos);
},
calcDragPosition(clientX, clientY, offsetX, offsetY) {
return {
left: clientX - offsetX,
top: clientY - offsetY
};
}
};
var absoluteStrategy = {
type: "absolute",
scale: 1,
calcStyle(pos) {
return setTopLeft(pos);
},
calcDragPosition(clientX, clientY, offsetX, offsetY) {
return {
left: clientX - offsetX,
top: clientY - offsetY
};
}
};
function createScaledStrategy(scale) {
return {
type: "transform",
scale,
calcStyle(pos) {
return setTransform(pos);
},
calcDragPosition(clientX, clientY, offsetX, offsetY) {
return {
left: (clientX - offsetX) / scale,
top: (clientY - offsetY) / scale
};
}
};
}
var defaultPositionStrategy = transformStrategy;
// src/core/types.ts
var defaultGridConfig = {
cols: 12,
rowHeight: 150,
margin: [10, 10],
containerPadding: null,
maxRows: Infinity
};
var defaultDragConfig = {
enabled: true,
bounded: false,
threshold: 3
};
var defaultResizeConfig = {
enabled: true,
handles: ["se"]
};
var defaultDropConfig = {
enabled: false,
defaultItem: { w: 1, h: 1 }
};
// src/core/compact-compat.ts
function getStatics2(layout) {
return layout.filter((l) => l.static);
}
var heightWidth = { x: "w", y: "h" };
function resolveCompactionCollision(layout, item, moveToCoord, axis, hasStatics) {
const sizeProp = heightWidth[axis];
item[axis] += 1;
const itemIndex = layout.findIndex((l) => l.i === item.i);
const layoutHasStatics = hasStatics ?? getStatics2(layout).length > 0;
for (let i = itemIndex + 1; i < layout.length; i++) {
const otherItem = layout[i];
if (otherItem === void 0) continue;
if (otherItem.static) continue;
if (!layoutHasStatics && otherItem.y > item.y + item.h) break;
if (chunkBJFPTW5Q_js.collides(item, otherItem)) {
resolveCompactionCollision(
layout,
otherItem,
moveToCoord + item[sizeProp],
axis,
layoutHasStatics
);
}
}
item[axis] = moveToCoord;
}
function compactItemInternal(compareWith, l, compactType, cols, fullLayout, allowOverlap, b) {
const compactV = compactType === "vertical";
const compactH = compactType === "horizontal";
if (compactV) {
if (typeof b === "number") {
l.y = Math.min(b, l.y);
} else {
l.y = Math.min(chunkBJFPTW5Q_js.bottom(compareWith), l.y);
}
while (l.y > 0 && !chunkBJFPTW5Q_js.getFirstCollision(compareWith, l)) {
l.y--;
}
} else if (compactH) {
while (l.x > 0 && !chunkBJFPTW5Q_js.getFirstCollision(compareWith, l)) {
l.x--;
}
}
let collision;
while ((collision = chunkBJFPTW5Q_js.getFirstCollision(compareWith, l)) !== void 0 && !(compactType === null && allowOverlap)) {
if (compactH) {
resolveCompactionCollision(fullLayout, l, collision.x + collision.w, "x");
} else {
resolveCompactionCollision(fullLayout, l, collision.y + collision.h, "y");
}
if (compactH && l.x + l.w > cols) {
l.x = cols - l.w;
l.y++;
while (l.x > 0 && !chunkBJFPTW5Q_js.getFirstCollision(compareWith, l)) {
l.x--;
}
}
}
l.y = Math.max(l.y, 0);
l.x = Math.max(l.x, 0);
return l;
}
function compact(layout, compactType, cols, allowOverlap) {
const compareWith = getStatics2(layout);
let b = chunkBJFPTW5Q_js.bottom(compareWith);
const sorted = chunkBJFPTW5Q_js.sortLayoutItems(layout, compactType);
const out = new Array(layout.length);
for (let i = 0; i < sorted.length; i++) {
const sortedItem = sorted[i];
if (sortedItem === void 0) continue;
let l = chunkBJFPTW5Q_js.cloneLayoutItem(sortedItem);
if (!l.static) {
l = compactItemInternal(
compareWith,
l,
compactType,
cols,
sorted,
allowOverlap,
b
);
b = Math.max(b, l.y + l.h);
compareWith.push(l);
}
const originalIndex = layout.indexOf(sortedItem);
out[originalIndex] = l;
l.moved = false;
}
return out;
}
function compactItem(compareWith, l, compactType, cols, fullLayout, allowOverlap, maxY) {
return compactItemInternal(
compareWith,
chunkBJFPTW5Q_js.cloneLayoutItem(l),
compactType,
cols,
fullLayout,
allowOverlap,
maxY
);
}
// src/core/compactors.ts
function resolveCompactionCollision2(layout, item, moveToCoord, axis, hasStatics) {
const sizeProp = axis === "x" ? "w" : "h";
item[axis] += 1;
const itemIndex = layout.findIndex((l) => l.i === item.i);
const layoutHasStatics = hasStatics ?? chunkBJFPTW5Q_js.getStatics(layout).length > 0;
for (let i = itemIndex + 1; i < layout.length; i++) {
const otherItem = layout[i];
if (otherItem === void 0) continue;
if (otherItem.static) continue;
if (!layoutHasStatics && otherItem.y > item.y + item.h) break;
if (chunkBJFPTW5Q_js.collides(item, otherItem)) {
resolveCompactionCollision2(
layout,
otherItem,
moveToCoord + item[sizeProp],
axis,
layoutHasStatics
);
}
}
item[axis] = moveToCoord;
}
function compactItemVertical(compareWith, l, fullLayout, maxY) {
l.y = Math.min(maxY, l.y);
while (l.y > 0 && !chunkBJFPTW5Q_js.getFirstCollision(compareWith, l)) {
l.y--;
}
let collision;
while ((collision = chunkBJFPTW5Q_js.getFirstCollision(compareWith, l)) !== void 0) {
resolveCompactionCollision2(fullLayout, l, collision.y + collision.h, "y");
}
l.y = Math.max(l.y, 0);
return l;
}
function compactItemHorizontal(compareWith, l, cols, fullLayout) {
while (l.x > 0 && !chunkBJFPTW5Q_js.getFirstCollision(compareWith, l)) {
l.x--;
}
let collision;
while ((collision = chunkBJFPTW5Q_js.getFirstCollision(compareWith, l)) !== void 0) {
resolveCompactionCollision2(fullLayout, l, collision.x + collision.w, "x");
if (l.x + l.w > cols) {
l.x = cols - l.w;
l.y++;
while (l.x > 0 && !chunkBJFPTW5Q_js.getFirstCollision(compareWith, l)) {
l.x--;
}
}
}
l.x = Math.max(l.x, 0);
return l;
}
var verticalCompactor = {
type: "vertical",
allowOverlap: false,
compact(layout, _cols) {
const compareWith = chunkBJFPTW5Q_js.getStatics(layout);
let maxY = chunkBJFPTW5Q_js.bottom(compareWith);
const sorted = chunkBJFPTW5Q_js.sortLayoutItemsByRowCol(layout);
const out = new Array(layout.length);
for (let i = 0; i < sorted.length; i++) {
const sortedItem = sorted[i];
if (sortedItem === void 0) continue;
let l = chunkBJFPTW5Q_js.cloneLayoutItem(sortedItem);
if (!l.static) {
l = compactItemVertical(compareWith, l, sorted, maxY);
maxY = Math.max(maxY, l.y + l.h);
compareWith.push(l);
}
const originalIndex = layout.indexOf(sortedItem);
out[originalIndex] = l;
l.moved = false;
}
return out;
},
onMove(layout, item, x, y, _cols) {
const newLayout = chunkBJFPTW5Q_js.cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (movedItem) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
}
return newLayout;
}
};
var horizontalCompactor = {
type: "horizontal",
allowOverlap: false,
compact(layout, cols) {
const compareWith = chunkBJFPTW5Q_js.getStatics(layout);
const sorted = chunkBJFPTW5Q_js.sortLayoutItemsByColRow(layout);
const out = new Array(layout.length);
for (let i = 0; i < sorted.length; i++) {
const sortedItem = sorted[i];
if (sortedItem === void 0) continue;
let l = chunkBJFPTW5Q_js.cloneLayoutItem(sortedItem);
if (!l.static) {
l = compactItemHorizontal(compareWith, l, cols, sorted);
compareWith.push(l);
}
const originalIndex = layout.indexOf(sortedItem);
out[originalIndex] = l;
l.moved = false;
}
return out;
},
onMove(layout, item, x, y, _cols) {
const newLayout = chunkBJFPTW5Q_js.cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (movedItem) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
}
return newLayout;
}
};
var noCompactor = {
type: null,
allowOverlap: false,
compact(layout, _cols) {
return chunkBJFPTW5Q_js.cloneLayout(layout);
},
onMove(layout, item, x, y, _cols) {
const newLayout = chunkBJFPTW5Q_js.cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (movedItem) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
}
return newLayout;
}
};
var verticalOverlapCompactor = {
...verticalCompactor,
allowOverlap: true,
compact(layout, _cols) {
return chunkBJFPTW5Q_js.cloneLayout(layout);
}
};
var horizontalOverlapCompactor = {
...horizontalCompactor,
allowOverlap: true,
compact(layout, _cols) {
return chunkBJFPTW5Q_js.cloneLayout(layout);
}
};
function getCompactor(compactType, allowOverlap = false, preventCollision = false) {
let baseCompactor;
if (allowOverlap) {
if (compactType === "vertical") baseCompactor = verticalOverlapCompactor;
else if (compactType === "horizontal")
baseCompactor = horizontalOverlapCompactor;
else baseCompactor = noCompactor;
} else {
if (compactType === "vertical") baseCompactor = verticalCompactor;
else if (compactType === "horizontal") baseCompactor = horizontalCompactor;
else baseCompactor = noCompactor;
}
if (preventCollision) {
return { ...baseCompactor, preventCollision };
}
return baseCompactor;
}
// src/core/responsive.ts
function sortBreakpoints(breakpoints) {
const keys = Object.keys(breakpoints);
return keys.sort((a, b) => breakpoints[a] - breakpoints[b]);
}
function getBreakpointFromWidth(breakpoints, width) {
const sorted = sortBreakpoints(breakpoints);
let matching = sorted[0];
if (matching === void 0) {
throw new Error("No breakpoints defined");
}
for (let i = 1; i < sorted.length; i++) {
const breakpointName = sorted[i];
if (breakpointName === void 0) continue;
const breakpointWidth = breakpoints[breakpointName];
if (width > breakpointWidth) {
matching = breakpointName;
}
}
return matching;
}
function getColsFromBreakpoint(breakpoint, cols) {
const colCount = cols[breakpoint];
if (colCount === void 0) {
throw new Error(
`ResponsiveReactGridLayout: \`cols\` entry for breakpoint ${String(breakpoint)} is missing!`
);
}
return colCount;
}
function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBreakpoint, cols, compactType) {
const existingLayout = layouts[breakpoint];
if (existingLayout) {
return chunkBJFPTW5Q_js.cloneLayout(existingLayout);
}
let layout = layouts[lastBreakpoint];
const breakpointsSorted = sortBreakpoints(breakpoints);
const breakpointsAbove = breakpointsSorted.slice(
breakpointsSorted.indexOf(breakpoint)
);
for (let i = 0; i < breakpointsAbove.length; i++) {
const b = breakpointsAbove[i];
if (b === void 0) continue;
const layoutForBreakpoint = layouts[b];
if (layoutForBreakpoint) {
layout = layoutForBreakpoint;
break;
}
}
const clonedLayout = chunkBJFPTW5Q_js.cloneLayout(layout || []);
return compact(chunkBJFPTW5Q_js.correctBounds(clonedLayout, { cols }), compactType, cols);
}
function getIndentationValue(value, breakpoint) {
if (Array.isArray(value)) {
return value;
}
const breakpointMap = value;
const breakpointValue = breakpointMap[breakpoint];
if (breakpointValue !== void 0) {
return breakpointValue;
}
const keys = Object.keys(breakpointMap);
for (const key of keys) {
const v = breakpointMap[key];
if (v !== void 0) {
return v;
}
}
return [10, 10];
}
exports.absoluteStrategy = absoluteStrategy;
exports.applyPositionConstraints = applyPositionConstraints;
exports.applySizeConstraints = applySizeConstraints;
exports.aspectRatio = aspectRatio;
exports.boundedX = boundedX;
exports.boundedY = boundedY;
exports.compact = compact;
exports.compactItem = compactItem;
exports.compactItemHorizontal = compactItemHorizontal;
exports.compactItemVertical = compactItemVertical;
exports.containerBounds = containerBounds;
exports.createScaledStrategy = createScaledStrategy;
exports.defaultConstraints = defaultConstraints;
exports.defaultDragConfig = defaultDragConfig;
exports.defaultDropConfig = defaultDropConfig;
exports.defaultGridConfig = defaultGridConfig;
exports.defaultPositionStrategy = defaultPositionStrategy;
exports.defaultResizeConfig = defaultResizeConfig;
exports.findOrGenerateResponsiveLayout = findOrGenerateResponsiveLayout;
exports.getBreakpointFromWidth = getBreakpointFromWidth;
exports.getColsFromBreakpoint = getColsFromBreakpoint;
exports.getCompactor = getCompactor;
exports.getIndentationValue = getIndentationValue;
exports.gridBounds = gridBounds;
exports.horizontalCompactor = horizontalCompactor;
exports.horizontalOverlapCompactor = horizontalOverlapCompactor;
exports.maxSize = maxSize;
exports.minMaxSize = minMaxSize;
exports.minSize = minSize;
exports.noCompactor = noCompactor;
exports.perc = perc;
exports.resizeItemInDirection = resizeItemInDirection;
exports.resolveCompactionCollision = resolveCompactionCollision2;
exports.setTopLeft = setTopLeft;
exports.setTransform = setTransform;
exports.snapToGrid = snapToGrid;
exports.sortBreakpoints = sortBreakpoints;
exports.transformStrategy = transformStrategy;
exports.verticalCompactor = verticalCompactor;
exports.verticalOverlapCompactor = verticalOverlapCompactor;
//# sourceMappingURL=chunk-FN6MIZ24.js.map
//# sourceMappingURL=chunk-FN6MIZ24.js.map

Sorry, the diff of this file is too big to display

'use strict';
var chunkFN6MIZ24_js = require('./chunk-FN6MIZ24.js');
var chunkBJFPTW5Q_js = require('./chunk-BJFPTW5Q.js');
var react = require('react');
var fastEquals = require('fast-equals');
function useContainerWidth(options = {}) {
const { measureBeforeMount = false, initialWidth = 1280 } = options;
const [width, setWidth] = react.useState(initialWidth);
const [mounted, setMounted] = react.useState(!measureBeforeMount);
const containerRef = react.useRef(null);
const observerRef = react.useRef(null);
const measureWidth = react.useCallback(() => {
const node = containerRef.current;
if (node) {
const newWidth = node.offsetWidth;
setWidth(newWidth);
if (!mounted) {
setMounted(true);
}
}
}, [mounted]);
react.useEffect(() => {
const node = containerRef.current;
if (!node) return;
measureWidth();
if (typeof ResizeObserver !== "undefined") {
observerRef.current = new ResizeObserver((entries) => {
const entry = entries[0];
if (entry) {
const newWidth = entry.contentRect.width;
setWidth(newWidth);
}
});
observerRef.current.observe(node);
}
return () => {
if (observerRef.current) {
observerRef.current.disconnect();
observerRef.current = null;
}
};
}, [measureWidth]);
return {
width,
mounted,
containerRef,
measureWidth
};
}
function useGridLayout(options) {
const {
layout: propsLayout,
cols,
compactType = "vertical",
allowOverlap = false,
preventCollision = false,
onLayoutChange
} = options;
const compactor = react.useMemo(
() => chunkFN6MIZ24_js.getCompactor(compactType, allowOverlap),
[compactType, allowOverlap]
);
const isDraggingRef = react.useRef(false);
const [layout, setLayoutState] = react.useState(() => {
const corrected = chunkBJFPTW5Q_js.correctBounds(chunkBJFPTW5Q_js.cloneLayout(propsLayout), { cols });
return chunkFN6MIZ24_js.compact(corrected, compactType, cols, allowOverlap);
});
const [dragState, setDragState] = react.useState({
activeDrag: null,
oldDragItem: null,
oldLayout: null
});
const [resizeState, setResizeState] = react.useState({
resizing: false,
oldResizeItem: null,
oldLayout: null
});
const [dropState, setDropState] = react.useState({
droppingDOMNode: null,
droppingPosition: null
});
const prevLayoutRef = react.useRef(layout);
const setLayout = react.useCallback(
(newLayout) => {
const corrected = chunkBJFPTW5Q_js.correctBounds(chunkBJFPTW5Q_js.cloneLayout(newLayout), { cols });
const compacted = chunkFN6MIZ24_js.compact(corrected, compactType, cols, allowOverlap);
setLayoutState(compacted);
},
[cols, compactType, allowOverlap]
);
react.useEffect(() => {
if (isDraggingRef.current) return;
if (!fastEquals.deepEqual(propsLayout, prevLayoutRef.current)) {
setLayout(propsLayout);
}
}, [propsLayout, setLayout]);
react.useEffect(() => {
if (!fastEquals.deepEqual(layout, prevLayoutRef.current)) {
prevLayoutRef.current = layout;
onLayoutChange?.(layout);
}
}, [layout, onLayoutChange]);
const onDragStart = react.useCallback(
(itemId, x, y) => {
const item = chunkBJFPTW5Q_js.getLayoutItem(layout, itemId);
if (!item) return null;
isDraggingRef.current = true;
const placeholder = {
...chunkBJFPTW5Q_js.cloneLayoutItem(item),
x,
y,
static: false,
moved: false
};
setDragState({
activeDrag: placeholder,
oldDragItem: chunkBJFPTW5Q_js.cloneLayoutItem(item),
oldLayout: chunkBJFPTW5Q_js.cloneLayout(layout)
});
return placeholder;
},
[layout]
);
const onDrag = react.useCallback(
(itemId, x, y) => {
const item = chunkBJFPTW5Q_js.getLayoutItem(layout, itemId);
if (!item) return;
setDragState((prev) => ({
...prev,
activeDrag: prev.activeDrag ? { ...prev.activeDrag, x, y } : null
}));
const newLayout = chunkBJFPTW5Q_js.moveElement(
layout,
item,
x,
y,
true,
// isUserAction
preventCollision,
compactType,
cols,
allowOverlap
);
const compacted = allowOverlap ? newLayout : chunkFN6MIZ24_js.compact(newLayout, compactType, cols);
setLayoutState(compacted);
},
[layout, cols, compactType, preventCollision, allowOverlap]
);
const onDragStop = react.useCallback(
(itemId, x, y) => {
const item = chunkBJFPTW5Q_js.getLayoutItem(layout, itemId);
if (!item) return;
const newLayout = chunkBJFPTW5Q_js.moveElement(
layout,
item,
x,
y,
true,
preventCollision,
compactType,
cols,
allowOverlap
);
const compacted = chunkFN6MIZ24_js.compact(newLayout, compactType, cols, allowOverlap);
isDraggingRef.current = false;
setDragState({
activeDrag: null,
oldDragItem: null,
oldLayout: null
});
setLayoutState(compacted);
},
[layout, cols, compactType, preventCollision, allowOverlap]
);
const onResizeStart = react.useCallback(
(itemId) => {
const item = chunkBJFPTW5Q_js.getLayoutItem(layout, itemId);
if (!item) return null;
setResizeState({
resizing: true,
oldResizeItem: chunkBJFPTW5Q_js.cloneLayoutItem(item),
oldLayout: chunkBJFPTW5Q_js.cloneLayout(layout)
});
return item;
},
[layout]
);
const onResize = react.useCallback(
(itemId, w, h, x, y) => {
const newLayout = layout.map((item) => {
if (item.i === itemId) {
const updated = {
...item,
w,
h
};
if (x !== void 0) updated.x = x;
if (y !== void 0) updated.y = y;
return updated;
}
return item;
});
const corrected = chunkBJFPTW5Q_js.correctBounds(newLayout, { cols });
const compacted = chunkFN6MIZ24_js.compact(corrected, compactType, cols, allowOverlap);
setLayoutState(compacted);
},
[layout, cols, compactType, allowOverlap]
);
const onResizeStop = react.useCallback(
(itemId, w, h) => {
onResize(itemId, w, h);
setResizeState({
resizing: false,
oldResizeItem: null,
oldLayout: null
});
},
[onResize]
);
const onDropDragOver = react.useCallback(
(droppingItem, position) => {
const existingItem = chunkBJFPTW5Q_js.getLayoutItem(layout, droppingItem.i);
if (!existingItem) {
const newLayout = [...layout, droppingItem];
const corrected = chunkBJFPTW5Q_js.correctBounds(newLayout, { cols });
const compacted = chunkFN6MIZ24_js.compact(corrected, compactType, cols, allowOverlap);
setLayoutState(compacted);
}
setDropState({
droppingDOMNode: null,
// Will be set by component
droppingPosition: position
});
},
[layout, cols, compactType, allowOverlap]
);
const onDropDragLeave = react.useCallback(() => {
const newLayout = layout.filter((item) => item.i !== "__dropping-elem__");
setLayoutState(newLayout);
setDropState({
droppingDOMNode: null,
droppingPosition: null
});
}, [layout]);
const onDrop = react.useCallback(
(droppingItem) => {
const newLayout = layout.map((item) => {
if (item.i === "__dropping-elem__") {
return {
...item,
i: droppingItem.i,
static: false
};
}
return item;
});
const corrected = chunkBJFPTW5Q_js.correctBounds(newLayout, { cols });
const compacted = chunkFN6MIZ24_js.compact(corrected, compactType, cols, allowOverlap);
setLayoutState(compacted);
setDropState({
droppingDOMNode: null,
droppingPosition: null
});
},
[layout, cols, compactType, allowOverlap]
);
const containerHeight = react.useMemo(() => chunkBJFPTW5Q_js.bottom(layout), [layout]);
const isInteracting = dragState.activeDrag !== null || resizeState.resizing || dropState.droppingPosition !== null;
return {
layout,
setLayout,
dragState,
resizeState,
dropState,
onDragStart,
onDrag,
onDragStop,
onResizeStart,
onResize,
onResizeStop,
onDropDragOver,
onDropDragLeave,
onDrop,
containerHeight,
isInteracting,
compactor
};
}
var DEFAULT_BREAKPOINTS = {
lg: 1200,
md: 996,
sm: 768,
xs: 480,
xxs: 0
};
var DEFAULT_COLS = {
lg: 12,
md: 10,
sm: 6,
xs: 4,
xxs: 2
};
function useResponsiveLayout(options) {
const {
width,
breakpoints = DEFAULT_BREAKPOINTS,
cols: colsConfig = DEFAULT_COLS,
layouts: propsLayouts = {},
compactType = "vertical",
onBreakpointChange,
onLayoutChange,
onWidthChange
} = options;
const sortedBreakpoints = react.useMemo(
() => chunkFN6MIZ24_js.sortBreakpoints(breakpoints),
[breakpoints]
);
const initialBreakpoint = react.useMemo(
() => chunkFN6MIZ24_js.getBreakpointFromWidth(breakpoints, width),
// Only calculate on mount, not on width changes
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
);
const initialCols = react.useMemo(
() => chunkFN6MIZ24_js.getColsFromBreakpoint(initialBreakpoint, colsConfig),
[initialBreakpoint, colsConfig]
);
const [breakpoint, setBreakpoint] = react.useState(initialBreakpoint);
const [cols, setCols] = react.useState(initialCols);
const [layouts, setLayoutsState] = react.useState(() => {
const cloned = {};
for (const bp of sortedBreakpoints) {
const layout2 = propsLayouts[bp];
if (layout2) {
cloned[bp] = chunkBJFPTW5Q_js.cloneLayout(layout2);
}
}
return cloned;
});
const prevWidthRef = react.useRef(width);
const prevBreakpointRef = react.useRef(breakpoint);
const prevLayoutsRef = react.useRef(layouts);
const layout = react.useMemo(() => {
return chunkFN6MIZ24_js.findOrGenerateResponsiveLayout(
layouts,
breakpoints,
breakpoint,
prevBreakpointRef.current,
cols,
compactType
);
}, [layouts, breakpoints, breakpoint, cols, compactType]);
const setLayoutForBreakpoint = react.useCallback((bp, newLayout) => {
setLayoutsState((prev) => ({
...prev,
[bp]: chunkBJFPTW5Q_js.cloneLayout(newLayout)
}));
}, []);
const setLayouts = react.useCallback((newLayouts) => {
const cloned = {};
for (const bp of Object.keys(newLayouts)) {
const layoutForBp = newLayouts[bp];
if (layoutForBp) {
cloned[bp] = chunkBJFPTW5Q_js.cloneLayout(layoutForBp);
}
}
setLayoutsState(cloned);
}, []);
react.useEffect(() => {
if (prevWidthRef.current === width) return;
prevWidthRef.current = width;
const newBreakpoint = chunkFN6MIZ24_js.getBreakpointFromWidth(breakpoints, width);
const newCols = chunkFN6MIZ24_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
onWidthChange?.(width, [10, 10], newCols, null);
if (newBreakpoint !== breakpoint) {
const newLayout = chunkFN6MIZ24_js.findOrGenerateResponsiveLayout(
layouts,
breakpoints,
newBreakpoint,
breakpoint,
newCols,
compactType
);
const updatedLayouts = {
...layouts,
[newBreakpoint]: newLayout
};
setLayoutsState(updatedLayouts);
setBreakpoint(newBreakpoint);
setCols(newCols);
onBreakpointChange?.(newBreakpoint, newCols);
prevBreakpointRef.current = newBreakpoint;
}
}, [
width,
breakpoints,
colsConfig,
breakpoint,
layouts,
compactType,
onBreakpointChange,
onWidthChange
]);
react.useEffect(() => {
if (!fastEquals.deepEqual(propsLayouts, prevLayoutsRef.current)) {
setLayouts(propsLayouts);
prevLayoutsRef.current = propsLayouts;
}
}, [propsLayouts, setLayouts]);
react.useEffect(() => {
if (!fastEquals.deepEqual(layouts, prevLayoutsRef.current)) {
prevLayoutsRef.current = layouts;
onLayoutChange?.(layout, layouts);
}
}, [layout, layouts, onLayoutChange]);
return {
layout,
layouts,
breakpoint,
cols,
setLayoutForBreakpoint,
setLayouts,
sortedBreakpoints
};
}
exports.DEFAULT_BREAKPOINTS = DEFAULT_BREAKPOINTS;
exports.DEFAULT_COLS = DEFAULT_COLS;
exports.useContainerWidth = useContainerWidth;
exports.useGridLayout = useGridLayout;
exports.useResponsiveLayout = useResponsiveLayout;
//# sourceMappingURL=chunk-GPZBANOK.js.map
//# sourceMappingURL=chunk-GPZBANOK.js.map
{"version":3,"sources":["../src/react/hooks/useContainerWidth.ts","../src/react/hooks/useGridLayout.ts","../src/react/hooks/useResponsiveLayout.ts"],"names":["useState","useRef","useCallback","useEffect","useMemo","getCompactor","correctBounds","cloneLayout","compact","deepEqual","getLayoutItem","cloneLayoutItem","moveElement","bottom","sortBreakpoints","getBreakpointFromWidth","getColsFromBreakpoint","layout","findOrGenerateResponsiveLayout"],"mappings":"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","file":"chunk-GPZBANOK.js","sourcesContent":["/**\n * useContainerWidth hook\n *\n * Observes container width using ResizeObserver and provides\n * reactive width updates for responsive layouts.\n */\n\nimport {\n useState,\n useEffect,\n useRef,\n useCallback,\n type RefObject\n} from \"react\";\n\nexport interface UseContainerWidthOptions {\n /**\n * If true, delays initial render until width is measured.\n * Useful for SSR or when you need accurate initial measurements.\n */\n measureBeforeMount?: boolean;\n\n /**\n * Initial width to use before measurement.\n * Defaults to 1280.\n */\n initialWidth?: number;\n}\n\nexport interface UseContainerWidthResult {\n /**\n * Current container width in pixels.\n */\n width: number;\n\n /**\n * Whether the container has been measured at least once.\n */\n mounted: boolean;\n\n /**\n * Ref to attach to the container element.\n */\n containerRef: RefObject<HTMLDivElement | null>;\n\n /**\n * Manually trigger a width measurement.\n * Useful when the container size might change without a resize event.\n */\n measureWidth: () => void;\n}\n\n/**\n * Hook to observe and track container width.\n *\n * Replaces the WidthProvider HOC with a more composable approach.\n *\n * @example\n * ```tsx\n * function MyGrid() {\n * const { width, containerRef, mounted } = useContainerWidth();\n *\n * return (\n * <div ref={containerRef}>\n * {mounted && <GridLayout width={width} {...props} />}\n * </div>\n * );\n * }\n * ```\n */\nexport function useContainerWidth(\n options: UseContainerWidthOptions = {}\n): UseContainerWidthResult {\n const { measureBeforeMount = false, initialWidth = 1280 } = options;\n\n const [width, setWidth] = useState(initialWidth);\n const [mounted, setMounted] = useState(!measureBeforeMount);\n const containerRef = useRef<HTMLDivElement | null>(null);\n const observerRef = useRef<ResizeObserver | null>(null);\n\n const measureWidth = useCallback(() => {\n const node = containerRef.current;\n if (node) {\n const newWidth = node.offsetWidth;\n setWidth(newWidth);\n if (!mounted) {\n setMounted(true);\n }\n }\n }, [mounted]);\n\n useEffect(() => {\n const node = containerRef.current;\n if (!node) return;\n\n // Initial measurement\n measureWidth();\n\n // Set up ResizeObserver\n if (typeof ResizeObserver !== \"undefined\") {\n observerRef.current = new ResizeObserver(entries => {\n const entry = entries[0];\n if (entry) {\n // Use contentRect.width for consistent measurements\n const newWidth = entry.contentRect.width;\n setWidth(newWidth);\n }\n });\n\n observerRef.current.observe(node);\n }\n\n return () => {\n if (observerRef.current) {\n observerRef.current.disconnect();\n observerRef.current = null;\n }\n };\n }, [measureWidth]);\n\n return {\n width,\n mounted,\n containerRef,\n measureWidth\n };\n}\n\nexport default useContainerWidth;\n","/**\n * useGridLayout hook\n *\n * Core hook for managing grid layout state, including drag, resize, and drop operations.\n * This extracts the state management logic from ReactGridLayout into a reusable hook.\n */\n\nimport { useState, useCallback, useMemo, useRef, useEffect } from \"react\";\nimport { deepEqual } from \"fast-equals\";\nimport type {\n Layout,\n LayoutItem,\n CompactType,\n DroppingPosition,\n Compactor,\n Mutable\n} from \"../../core/types.js\";\nimport {\n cloneLayout,\n cloneLayoutItem,\n moveElement,\n correctBounds,\n bottom,\n getLayoutItem\n} from \"../../core/layout.js\";\nimport { compact } from \"../../core/compact-compat.js\";\nimport { getCompactor } from \"../../core/compactors.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DragState {\n /** Currently dragging item placeholder */\n activeDrag: LayoutItem | null;\n /** Original item before drag started */\n oldDragItem: LayoutItem | null;\n /** Layout before drag started */\n oldLayout: Layout | null;\n}\n\nexport interface ResizeState {\n /** Whether a resize is in progress */\n resizing: boolean;\n /** Original item before resize started */\n oldResizeItem: LayoutItem | null;\n /** Layout before resize started */\n oldLayout: Layout | null;\n}\n\nexport interface DropState {\n /** DOM node for the dropping placeholder */\n droppingDOMNode: React.ReactElement | null;\n /** Current drop position */\n droppingPosition: DroppingPosition | null;\n}\n\nexport interface UseGridLayoutOptions {\n /** Initial layout */\n layout: Layout;\n /** Number of columns */\n cols: number;\n /** Compaction type: 'vertical', 'horizontal', or null */\n compactType?: CompactType;\n /** Allow items to overlap */\n allowOverlap?: boolean;\n /** Prevent collisions when moving items */\n preventCollision?: boolean;\n /** Called when layout changes */\n onLayoutChange?: (layout: Layout) => void;\n}\n\nexport interface UseGridLayoutResult {\n /** Current layout */\n layout: Layout;\n /** Set layout directly */\n setLayout: (layout: Layout) => void;\n /** Drag state */\n dragState: DragState;\n /** Resize state */\n resizeState: ResizeState;\n /** Drop state */\n dropState: DropState;\n /** Start dragging an item */\n onDragStart: (itemId: string, x: number, y: number) => LayoutItem | null;\n /** Update drag position */\n onDrag: (itemId: string, x: number, y: number) => void;\n /** Stop dragging */\n onDragStop: (itemId: string, x: number, y: number) => void;\n /** Start resizing an item */\n onResizeStart: (itemId: string) => LayoutItem | null;\n /** Update resize dimensions */\n onResize: (\n itemId: string,\n w: number,\n h: number,\n x?: number,\n y?: number\n ) => void;\n /** Stop resizing */\n onResizeStop: (itemId: string, w: number, h: number) => void;\n /** Start dropping (external drag-in) */\n onDropDragOver: (\n droppingItem: LayoutItem,\n position: DroppingPosition\n ) => void;\n /** Update drop position */\n onDropDragLeave: () => void;\n /** Complete drop */\n onDrop: (droppingItem: LayoutItem) => void;\n /** Container height in rows */\n containerHeight: number;\n /** Whether any drag/resize is active */\n isInteracting: boolean;\n /** Get the compactor being used */\n compactor: Compactor;\n}\n\n// ============================================================================\n// Hook Implementation\n// ============================================================================\n\n/**\n * Hook for managing grid layout state.\n *\n * Handles all layout state including drag, resize, and drop operations.\n * Uses immutable updates and provides callbacks for all interactions.\n *\n * @example\n * ```tsx\n * function MyGrid() {\n * const {\n * layout,\n * onDragStart,\n * onDrag,\n * onDragStop,\n * containerHeight\n * } = useGridLayout({\n * layout: initialLayout,\n * cols: 12,\n * compactType: 'vertical'\n * });\n *\n * return (\n * <div style={{ height: containerHeight }}>\n * {layout.map(item => (\n * <GridItem\n * key={item.i}\n * {...item}\n * onDragStart={() => onDragStart(item.i, item.x, item.y)}\n * />\n * ))}\n * </div>\n * );\n * }\n * ```\n */\nexport function useGridLayout(\n options: UseGridLayoutOptions\n): UseGridLayoutResult {\n const {\n layout: propsLayout,\n cols,\n compactType = \"vertical\",\n allowOverlap = false,\n preventCollision = false,\n onLayoutChange\n } = options;\n\n // Get the appropriate compactor\n const compactor = useMemo(\n () => getCompactor(compactType, allowOverlap),\n [compactType, allowOverlap]\n );\n\n // Track if we're currently dragging to block prop updates\n const isDraggingRef = useRef(false);\n\n // Initialize layout with compaction\n const [layout, setLayoutState] = useState<Layout>(() => {\n const corrected = correctBounds(cloneLayout(propsLayout), { cols });\n return compact(corrected, compactType, cols, allowOverlap);\n });\n\n // Drag state\n const [dragState, setDragState] = useState<DragState>({\n activeDrag: null,\n oldDragItem: null,\n oldLayout: null\n });\n\n // Resize state\n const [resizeState, setResizeState] = useState<ResizeState>({\n resizing: false,\n oldResizeItem: null,\n oldLayout: null\n });\n\n // Drop state\n const [dropState, setDropState] = useState<DropState>({\n droppingDOMNode: null,\n droppingPosition: null\n });\n\n // Track previous layout for change detection\n const prevLayoutRef = useRef<Layout>(layout);\n\n // Set layout with optional compaction\n const setLayout = useCallback(\n (newLayout: Layout) => {\n const corrected = correctBounds(cloneLayout(newLayout), { cols });\n const compacted = compact(corrected, compactType, cols, allowOverlap);\n setLayoutState(compacted);\n },\n [cols, compactType, allowOverlap]\n );\n\n // Sync layout from props when not dragging\n useEffect(() => {\n if (isDraggingRef.current) return;\n\n if (!deepEqual(propsLayout, prevLayoutRef.current)) {\n setLayout(propsLayout);\n }\n }, [propsLayout, setLayout]);\n\n // Notify layout changes\n useEffect(() => {\n if (!deepEqual(layout, prevLayoutRef.current)) {\n prevLayoutRef.current = layout;\n onLayoutChange?.(layout);\n }\n }, [layout, onLayoutChange]);\n\n // ============================================================================\n // Drag Handlers\n // ============================================================================\n\n const onDragStart = useCallback(\n (itemId: string, x: number, y: number): LayoutItem | null => {\n const item = getLayoutItem(layout, itemId);\n if (!item) return null;\n\n isDraggingRef.current = true;\n\n const placeholder: LayoutItem = {\n ...cloneLayoutItem(item),\n x,\n y,\n static: false,\n moved: false\n };\n\n setDragState({\n activeDrag: placeholder,\n oldDragItem: cloneLayoutItem(item),\n oldLayout: cloneLayout(layout)\n });\n\n return placeholder;\n },\n [layout]\n );\n\n const onDrag = useCallback(\n (itemId: string, x: number, y: number) => {\n const item = getLayoutItem(layout, itemId);\n if (!item) return;\n\n // Update placeholder position\n setDragState(prev => ({\n ...prev,\n activeDrag: prev.activeDrag ? { ...prev.activeDrag, x, y } : null\n }));\n\n // Move element and update layout\n const newLayout = moveElement(\n layout,\n item,\n x,\n y,\n true, // isUserAction\n preventCollision,\n compactType,\n cols,\n allowOverlap\n );\n\n // Compact layout\n const compacted = allowOverlap\n ? newLayout\n : compact(newLayout, compactType, cols);\n\n setLayoutState(compacted);\n },\n [layout, cols, compactType, preventCollision, allowOverlap]\n );\n\n const onDragStop = useCallback(\n (itemId: string, x: number, y: number) => {\n const item = getLayoutItem(layout, itemId);\n if (!item) return;\n\n // Final move\n const newLayout = moveElement(\n layout,\n item,\n x,\n y,\n true,\n preventCollision,\n compactType,\n cols,\n allowOverlap\n );\n\n // Compact and finalize\n const compacted = compact(newLayout, compactType, cols, allowOverlap);\n\n isDraggingRef.current = false;\n\n setDragState({\n activeDrag: null,\n oldDragItem: null,\n oldLayout: null\n });\n\n setLayoutState(compacted);\n },\n [layout, cols, compactType, preventCollision, allowOverlap]\n );\n\n // ============================================================================\n // Resize Handlers\n // ============================================================================\n\n const onResizeStart = useCallback(\n (itemId: string): LayoutItem | null => {\n const item = getLayoutItem(layout, itemId);\n if (!item) return null;\n\n setResizeState({\n resizing: true,\n oldResizeItem: cloneLayoutItem(item),\n oldLayout: cloneLayout(layout)\n });\n\n return item;\n },\n [layout]\n );\n\n const onResize = useCallback(\n (itemId: string, w: number, h: number, x?: number, y?: number) => {\n const newLayout = layout.map(item => {\n if (item.i === itemId) {\n const updated: LayoutItem = {\n ...item,\n w,\n h\n };\n if (x !== undefined) (updated as Mutable<LayoutItem>).x = x;\n if (y !== undefined) (updated as Mutable<LayoutItem>).y = y;\n return updated;\n }\n return item;\n });\n\n // Correct bounds and compact\n const corrected = correctBounds(newLayout, { cols });\n const compacted = compact(corrected, compactType, cols, allowOverlap);\n\n setLayoutState(compacted);\n },\n [layout, cols, compactType, allowOverlap]\n );\n\n const onResizeStop = useCallback(\n (itemId: string, w: number, h: number) => {\n // Apply final resize\n onResize(itemId, w, h);\n\n setResizeState({\n resizing: false,\n oldResizeItem: null,\n oldLayout: null\n });\n },\n [onResize]\n );\n\n // ============================================================================\n // Drop Handlers\n // ============================================================================\n\n const onDropDragOver = useCallback(\n (droppingItem: LayoutItem, position: DroppingPosition) => {\n // Check if item already exists in layout\n const existingItem = getLayoutItem(layout, droppingItem.i);\n\n if (!existingItem) {\n // Add dropping item to layout\n const newLayout = [...layout, droppingItem];\n const corrected = correctBounds(newLayout, { cols });\n const compacted = compact(corrected, compactType, cols, allowOverlap);\n setLayoutState(compacted);\n }\n\n setDropState({\n droppingDOMNode: null, // Will be set by component\n droppingPosition: position\n });\n },\n [layout, cols, compactType, allowOverlap]\n );\n\n const onDropDragLeave = useCallback(() => {\n // Remove dropping placeholder from layout\n const newLayout = layout.filter(item => item.i !== \"__dropping-elem__\");\n setLayoutState(newLayout);\n\n setDropState({\n droppingDOMNode: null,\n droppingPosition: null\n });\n }, [layout]);\n\n const onDrop = useCallback(\n (droppingItem: LayoutItem) => {\n // Replace placeholder with actual item\n const newLayout = layout.map(item => {\n if (item.i === \"__dropping-elem__\") {\n return {\n ...item,\n i: droppingItem.i,\n static: false\n };\n }\n return item;\n });\n\n const corrected = correctBounds(newLayout, { cols });\n const compacted = compact(corrected, compactType, cols, allowOverlap);\n setLayoutState(compacted);\n\n setDropState({\n droppingDOMNode: null,\n droppingPosition: null\n });\n },\n [layout, cols, compactType, allowOverlap]\n );\n\n // ============================================================================\n // Computed Values\n // ============================================================================\n\n const containerHeight = useMemo(() => bottom(layout), [layout]);\n\n const isInteracting =\n dragState.activeDrag !== null ||\n resizeState.resizing ||\n dropState.droppingPosition !== null;\n\n return {\n layout,\n setLayout,\n dragState,\n resizeState,\n dropState,\n onDragStart,\n onDrag,\n onDragStop,\n onResizeStart,\n onResize,\n onResizeStop,\n onDropDragOver,\n onDropDragLeave,\n onDrop,\n containerHeight,\n isInteracting,\n compactor\n };\n}\n\nexport default useGridLayout;\n","/**\n * useResponsiveLayout hook\n *\n * Manages responsive breakpoints and layout generation for different screen sizes.\n * Extracts state management from ResponsiveReactGridLayout into a reusable hook.\n */\n\nimport { useState, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { deepEqual } from \"fast-equals\";\nimport type {\n Layout,\n Breakpoint,\n Breakpoints,\n ResponsiveLayouts,\n CompactType\n} from \"../../core/types.js\";\nimport { cloneLayout } from \"../../core/layout.js\";\nimport {\n getBreakpointFromWidth,\n getColsFromBreakpoint,\n findOrGenerateResponsiveLayout,\n sortBreakpoints\n} from \"../../core/responsive.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/** Default breakpoint names */\nexport type DefaultBreakpoints = \"lg\" | \"md\" | \"sm\" | \"xs\" | \"xxs\";\n\n/** Default breakpoint widths */\nexport const DEFAULT_BREAKPOINTS: Breakpoints<DefaultBreakpoints> = {\n lg: 1200,\n md: 996,\n sm: 768,\n xs: 480,\n xxs: 0\n};\n\n/** Default column counts per breakpoint */\nexport const DEFAULT_COLS: Breakpoints<DefaultBreakpoints> = {\n lg: 12,\n md: 10,\n sm: 6,\n xs: 4,\n xxs: 2\n};\n\nexport interface UseResponsiveLayoutOptions<\n B extends Breakpoint = DefaultBreakpoints\n> {\n /** Current container width */\n width: number;\n /** Breakpoint definitions (name → min-width) */\n breakpoints?: Breakpoints<B>;\n /** Column counts per breakpoint */\n cols?: Breakpoints<B>;\n /** Layouts for each breakpoint */\n layouts?: ResponsiveLayouts<B>;\n /** Compaction type */\n compactType?: CompactType;\n /** Called when breakpoint changes */\n onBreakpointChange?: (newBreakpoint: B, cols: number) => void;\n /** Called when layout changes */\n onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;\n /** Called when width changes */\n onWidthChange?: (\n width: number,\n margin: readonly [number, number],\n cols: number,\n containerPadding: readonly [number, number] | null\n ) => void;\n}\n\nexport interface UseResponsiveLayoutResult<\n B extends Breakpoint = DefaultBreakpoints\n> {\n /** Current layout for the active breakpoint */\n layout: Layout;\n /** All layouts by breakpoint */\n layouts: ResponsiveLayouts<B>;\n /** Current active breakpoint */\n breakpoint: B;\n /** Column count for the current breakpoint */\n cols: number;\n /** Update layouts for a specific breakpoint */\n setLayoutForBreakpoint: (breakpoint: B, layout: Layout) => void;\n /** Update all layouts */\n setLayouts: (layouts: ResponsiveLayouts<B>) => void;\n /** Sorted array of breakpoint names (smallest to largest) */\n sortedBreakpoints: B[];\n}\n\n// ============================================================================\n// Hook Implementation\n// ============================================================================\n\n/**\n * Hook for managing responsive grid layouts.\n *\n * Automatically selects the appropriate layout based on container width\n * and generates layouts for new breakpoints from existing ones.\n *\n * @example\n * ```tsx\n * function MyResponsiveGrid() {\n * const { width, containerRef } = useContainerWidth();\n * const { layout, breakpoint, cols } = useResponsiveLayout({\n * width,\n * layouts: {\n * lg: [...],\n * md: [...],\n * sm: [...]\n * }\n * });\n *\n * return (\n * <div ref={containerRef}>\n * <GridLayout\n * width={width}\n * cols={cols}\n * layout={layout}\n * />\n * </div>\n * );\n * }\n * ```\n */\nexport function useResponsiveLayout<B extends Breakpoint = DefaultBreakpoints>(\n options: UseResponsiveLayoutOptions<B>\n): UseResponsiveLayoutResult<B> {\n const {\n width,\n breakpoints = DEFAULT_BREAKPOINTS as unknown as Breakpoints<B>,\n cols: colsConfig = DEFAULT_COLS as unknown as Breakpoints<B>,\n layouts: propsLayouts = {} as ResponsiveLayouts<B>,\n compactType = \"vertical\",\n onBreakpointChange,\n onLayoutChange,\n onWidthChange\n } = options;\n\n // Sorted breakpoints for consistent ordering\n const sortedBreakpoints = useMemo(\n () => sortBreakpoints(breakpoints),\n [breakpoints]\n );\n\n // Calculate initial breakpoint and cols\n const initialBreakpoint = useMemo(\n () => getBreakpointFromWidth(breakpoints, width),\n // Only calculate on mount, not on width changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n []\n );\n\n const initialCols = useMemo(\n () => getColsFromBreakpoint(initialBreakpoint, colsConfig),\n [initialBreakpoint, colsConfig]\n );\n\n // State\n const [breakpoint, setBreakpoint] = useState<B>(initialBreakpoint);\n const [cols, setCols] = useState<number>(initialCols);\n const [layouts, setLayoutsState] = useState<ResponsiveLayouts<B>>(() => {\n // Clone initial layouts\n const cloned = {} as ResponsiveLayouts<B>;\n for (const bp of sortedBreakpoints) {\n const layout = propsLayouts[bp];\n if (layout) {\n (cloned as Record<B, Layout>)[bp] = cloneLayout(layout);\n }\n }\n return cloned;\n });\n\n // Track previous values for change detection\n const prevWidthRef = useRef(width);\n const prevBreakpointRef = useRef(breakpoint);\n const prevLayoutsRef = useRef(layouts);\n\n // Current layout for the active breakpoint\n const layout = useMemo(() => {\n return findOrGenerateResponsiveLayout(\n layouts,\n breakpoints,\n breakpoint,\n prevBreakpointRef.current,\n cols,\n compactType\n );\n }, [layouts, breakpoints, breakpoint, cols, compactType]);\n\n // Set layout for a specific breakpoint\n const setLayoutForBreakpoint = useCallback((bp: B, newLayout: Layout) => {\n setLayoutsState((prev: ResponsiveLayouts<B>) => ({\n ...prev,\n [bp]: cloneLayout(newLayout)\n }));\n }, []);\n\n // Set all layouts\n const setLayouts = useCallback((newLayouts: ResponsiveLayouts<B>) => {\n const cloned = {} as ResponsiveLayouts<B>;\n for (const bp of Object.keys(newLayouts) as B[]) {\n const layoutForBp = newLayouts[bp];\n if (layoutForBp) {\n (cloned as Record<B, Layout>)[bp] = cloneLayout(layoutForBp);\n }\n }\n setLayoutsState(cloned);\n }, []);\n\n // Handle width changes\n useEffect(() => {\n if (prevWidthRef.current === width) return;\n prevWidthRef.current = width;\n\n // Determine new breakpoint\n const newBreakpoint = getBreakpointFromWidth(breakpoints, width);\n const newCols = getColsFromBreakpoint(newBreakpoint, colsConfig);\n\n // Notify width change\n onWidthChange?.(width, [10, 10], newCols, null);\n\n // Check if breakpoint changed\n if (newBreakpoint !== breakpoint) {\n // Generate layout for new breakpoint\n const newLayout = findOrGenerateResponsiveLayout(\n layouts,\n breakpoints,\n newBreakpoint,\n breakpoint,\n newCols,\n compactType\n );\n\n // Update layouts with the new breakpoint layout\n const updatedLayouts: ResponsiveLayouts<B> = {\n ...layouts,\n [newBreakpoint]: newLayout\n };\n\n setLayoutsState(updatedLayouts);\n setBreakpoint(newBreakpoint);\n setCols(newCols);\n\n // Notify breakpoint change\n onBreakpointChange?.(newBreakpoint, newCols);\n\n prevBreakpointRef.current = newBreakpoint;\n }\n }, [\n width,\n breakpoints,\n colsConfig,\n breakpoint,\n layouts,\n compactType,\n onBreakpointChange,\n onWidthChange\n ]);\n\n // Sync with prop layouts when they change\n useEffect(() => {\n if (!deepEqual(propsLayouts, prevLayoutsRef.current)) {\n setLayouts(propsLayouts);\n prevLayoutsRef.current = propsLayouts;\n }\n }, [propsLayouts, setLayouts]);\n\n // Notify layout changes\n useEffect(() => {\n if (!deepEqual(layouts, prevLayoutsRef.current)) {\n prevLayoutsRef.current = layouts;\n onLayoutChange?.(layout, layouts);\n }\n }, [layout, layouts, onLayoutChange]);\n\n return {\n layout,\n layouts,\n breakpoint,\n cols,\n setLayoutForBreakpoint,\n setLayouts,\n sortedBreakpoints\n };\n}\n\nexport default useResponsiveLayout;\n"]}
import { getCompactor, compact, sortBreakpoints, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout } from './chunk-2O3ZME4Q.mjs';
import { correctBounds, cloneLayout, getLayoutItem, cloneLayoutItem, moveElement, bottom } from './chunk-AWM66AWF.mjs';
import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
import { deepEqual } from 'fast-equals';
function useContainerWidth(options = {}) {
const { measureBeforeMount = false, initialWidth = 1280 } = options;
const [width, setWidth] = useState(initialWidth);
const [mounted, setMounted] = useState(!measureBeforeMount);
const containerRef = useRef(null);
const observerRef = useRef(null);
const measureWidth = useCallback(() => {
const node = containerRef.current;
if (node) {
const newWidth = node.offsetWidth;
setWidth(newWidth);
if (!mounted) {
setMounted(true);
}
}
}, [mounted]);
useEffect(() => {
const node = containerRef.current;
if (!node) return;
measureWidth();
if (typeof ResizeObserver !== "undefined") {
observerRef.current = new ResizeObserver((entries) => {
const entry = entries[0];
if (entry) {
const newWidth = entry.contentRect.width;
setWidth(newWidth);
}
});
observerRef.current.observe(node);
}
return () => {
if (observerRef.current) {
observerRef.current.disconnect();
observerRef.current = null;
}
};
}, [measureWidth]);
return {
width,
mounted,
containerRef,
measureWidth
};
}
function useGridLayout(options) {
const {
layout: propsLayout,
cols,
compactType = "vertical",
allowOverlap = false,
preventCollision = false,
onLayoutChange
} = options;
const compactor = useMemo(
() => getCompactor(compactType, allowOverlap),
[compactType, allowOverlap]
);
const isDraggingRef = useRef(false);
const [layout, setLayoutState] = useState(() => {
const corrected = correctBounds(cloneLayout(propsLayout), { cols });
return compact(corrected, compactType, cols, allowOverlap);
});
const [dragState, setDragState] = useState({
activeDrag: null,
oldDragItem: null,
oldLayout: null
});
const [resizeState, setResizeState] = useState({
resizing: false,
oldResizeItem: null,
oldLayout: null
});
const [dropState, setDropState] = useState({
droppingDOMNode: null,
droppingPosition: null
});
const prevLayoutRef = useRef(layout);
const setLayout = useCallback(
(newLayout) => {
const corrected = correctBounds(cloneLayout(newLayout), { cols });
const compacted = compact(corrected, compactType, cols, allowOverlap);
setLayoutState(compacted);
},
[cols, compactType, allowOverlap]
);
useEffect(() => {
if (isDraggingRef.current) return;
if (!deepEqual(propsLayout, prevLayoutRef.current)) {
setLayout(propsLayout);
}
}, [propsLayout, setLayout]);
useEffect(() => {
if (!deepEqual(layout, prevLayoutRef.current)) {
prevLayoutRef.current = layout;
onLayoutChange?.(layout);
}
}, [layout, onLayoutChange]);
const onDragStart = useCallback(
(itemId, x, y) => {
const item = getLayoutItem(layout, itemId);
if (!item) return null;
isDraggingRef.current = true;
const placeholder = {
...cloneLayoutItem(item),
x,
y,
static: false,
moved: false
};
setDragState({
activeDrag: placeholder,
oldDragItem: cloneLayoutItem(item),
oldLayout: cloneLayout(layout)
});
return placeholder;
},
[layout]
);
const onDrag = useCallback(
(itemId, x, y) => {
const item = getLayoutItem(layout, itemId);
if (!item) return;
setDragState((prev) => ({
...prev,
activeDrag: prev.activeDrag ? { ...prev.activeDrag, x, y } : null
}));
const newLayout = moveElement(
layout,
item,
x,
y,
true,
// isUserAction
preventCollision,
compactType,
cols,
allowOverlap
);
const compacted = allowOverlap ? newLayout : compact(newLayout, compactType, cols);
setLayoutState(compacted);
},
[layout, cols, compactType, preventCollision, allowOverlap]
);
const onDragStop = useCallback(
(itemId, x, y) => {
const item = getLayoutItem(layout, itemId);
if (!item) return;
const newLayout = moveElement(
layout,
item,
x,
y,
true,
preventCollision,
compactType,
cols,
allowOverlap
);
const compacted = compact(newLayout, compactType, cols, allowOverlap);
isDraggingRef.current = false;
setDragState({
activeDrag: null,
oldDragItem: null,
oldLayout: null
});
setLayoutState(compacted);
},
[layout, cols, compactType, preventCollision, allowOverlap]
);
const onResizeStart = useCallback(
(itemId) => {
const item = getLayoutItem(layout, itemId);
if (!item) return null;
setResizeState({
resizing: true,
oldResizeItem: cloneLayoutItem(item),
oldLayout: cloneLayout(layout)
});
return item;
},
[layout]
);
const onResize = useCallback(
(itemId, w, h, x, y) => {
const newLayout = layout.map((item) => {
if (item.i === itemId) {
const updated = {
...item,
w,
h
};
if (x !== void 0) updated.x = x;
if (y !== void 0) updated.y = y;
return updated;
}
return item;
});
const corrected = correctBounds(newLayout, { cols });
const compacted = compact(corrected, compactType, cols, allowOverlap);
setLayoutState(compacted);
},
[layout, cols, compactType, allowOverlap]
);
const onResizeStop = useCallback(
(itemId, w, h) => {
onResize(itemId, w, h);
setResizeState({
resizing: false,
oldResizeItem: null,
oldLayout: null
});
},
[onResize]
);
const onDropDragOver = useCallback(
(droppingItem, position) => {
const existingItem = getLayoutItem(layout, droppingItem.i);
if (!existingItem) {
const newLayout = [...layout, droppingItem];
const corrected = correctBounds(newLayout, { cols });
const compacted = compact(corrected, compactType, cols, allowOverlap);
setLayoutState(compacted);
}
setDropState({
droppingDOMNode: null,
// Will be set by component
droppingPosition: position
});
},
[layout, cols, compactType, allowOverlap]
);
const onDropDragLeave = useCallback(() => {
const newLayout = layout.filter((item) => item.i !== "__dropping-elem__");
setLayoutState(newLayout);
setDropState({
droppingDOMNode: null,
droppingPosition: null
});
}, [layout]);
const onDrop = useCallback(
(droppingItem) => {
const newLayout = layout.map((item) => {
if (item.i === "__dropping-elem__") {
return {
...item,
i: droppingItem.i,
static: false
};
}
return item;
});
const corrected = correctBounds(newLayout, { cols });
const compacted = compact(corrected, compactType, cols, allowOverlap);
setLayoutState(compacted);
setDropState({
droppingDOMNode: null,
droppingPosition: null
});
},
[layout, cols, compactType, allowOverlap]
);
const containerHeight = useMemo(() => bottom(layout), [layout]);
const isInteracting = dragState.activeDrag !== null || resizeState.resizing || dropState.droppingPosition !== null;
return {
layout,
setLayout,
dragState,
resizeState,
dropState,
onDragStart,
onDrag,
onDragStop,
onResizeStart,
onResize,
onResizeStop,
onDropDragOver,
onDropDragLeave,
onDrop,
containerHeight,
isInteracting,
compactor
};
}
var DEFAULT_BREAKPOINTS = {
lg: 1200,
md: 996,
sm: 768,
xs: 480,
xxs: 0
};
var DEFAULT_COLS = {
lg: 12,
md: 10,
sm: 6,
xs: 4,
xxs: 2
};
function useResponsiveLayout(options) {
const {
width,
breakpoints = DEFAULT_BREAKPOINTS,
cols: colsConfig = DEFAULT_COLS,
layouts: propsLayouts = {},
compactType = "vertical",
onBreakpointChange,
onLayoutChange,
onWidthChange
} = options;
const sortedBreakpoints = useMemo(
() => sortBreakpoints(breakpoints),
[breakpoints]
);
const initialBreakpoint = useMemo(
() => getBreakpointFromWidth(breakpoints, width),
// Only calculate on mount, not on width changes
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
);
const initialCols = useMemo(
() => getColsFromBreakpoint(initialBreakpoint, colsConfig),
[initialBreakpoint, colsConfig]
);
const [breakpoint, setBreakpoint] = useState(initialBreakpoint);
const [cols, setCols] = useState(initialCols);
const [layouts, setLayoutsState] = useState(() => {
const cloned = {};
for (const bp of sortedBreakpoints) {
const layout2 = propsLayouts[bp];
if (layout2) {
cloned[bp] = cloneLayout(layout2);
}
}
return cloned;
});
const prevWidthRef = useRef(width);
const prevBreakpointRef = useRef(breakpoint);
const prevLayoutsRef = useRef(layouts);
const layout = useMemo(() => {
return findOrGenerateResponsiveLayout(
layouts,
breakpoints,
breakpoint,
prevBreakpointRef.current,
cols,
compactType
);
}, [layouts, breakpoints, breakpoint, cols, compactType]);
const setLayoutForBreakpoint = useCallback((bp, newLayout) => {
setLayoutsState((prev) => ({
...prev,
[bp]: cloneLayout(newLayout)
}));
}, []);
const setLayouts = useCallback((newLayouts) => {
const cloned = {};
for (const bp of Object.keys(newLayouts)) {
const layoutForBp = newLayouts[bp];
if (layoutForBp) {
cloned[bp] = cloneLayout(layoutForBp);
}
}
setLayoutsState(cloned);
}, []);
useEffect(() => {
if (prevWidthRef.current === width) return;
prevWidthRef.current = width;
const newBreakpoint = getBreakpointFromWidth(breakpoints, width);
const newCols = getColsFromBreakpoint(newBreakpoint, colsConfig);
onWidthChange?.(width, [10, 10], newCols, null);
if (newBreakpoint !== breakpoint) {
const newLayout = findOrGenerateResponsiveLayout(
layouts,
breakpoints,
newBreakpoint,
breakpoint,
newCols,
compactType
);
const updatedLayouts = {
...layouts,
[newBreakpoint]: newLayout
};
setLayoutsState(updatedLayouts);
setBreakpoint(newBreakpoint);
setCols(newCols);
onBreakpointChange?.(newBreakpoint, newCols);
prevBreakpointRef.current = newBreakpoint;
}
}, [
width,
breakpoints,
colsConfig,
breakpoint,
layouts,
compactType,
onBreakpointChange,
onWidthChange
]);
useEffect(() => {
if (!deepEqual(propsLayouts, prevLayoutsRef.current)) {
setLayouts(propsLayouts);
prevLayoutsRef.current = propsLayouts;
}
}, [propsLayouts, setLayouts]);
useEffect(() => {
if (!deepEqual(layouts, prevLayoutsRef.current)) {
prevLayoutsRef.current = layouts;
onLayoutChange?.(layout, layouts);
}
}, [layout, layouts, onLayoutChange]);
return {
layout,
layouts,
breakpoint,
cols,
setLayoutForBreakpoint,
setLayouts,
sortedBreakpoints
};
}
export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, useContainerWidth, useGridLayout, useResponsiveLayout };
//# sourceMappingURL=chunk-LWF5EYMO.mjs.map
//# sourceMappingURL=chunk-LWF5EYMO.mjs.map
{"version":3,"sources":["../src/react/hooks/useContainerWidth.ts","../src/react/hooks/useGridLayout.ts","../src/react/hooks/useResponsiveLayout.ts"],"names":["useRef","useState","useCallback","useEffect","useMemo","layout","deepEqual"],"mappings":"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","file":"chunk-LWF5EYMO.mjs","sourcesContent":["/**\n * useContainerWidth hook\n *\n * Observes container width using ResizeObserver and provides\n * reactive width updates for responsive layouts.\n */\n\nimport {\n useState,\n useEffect,\n useRef,\n useCallback,\n type RefObject\n} from \"react\";\n\nexport interface UseContainerWidthOptions {\n /**\n * If true, delays initial render until width is measured.\n * Useful for SSR or when you need accurate initial measurements.\n */\n measureBeforeMount?: boolean;\n\n /**\n * Initial width to use before measurement.\n * Defaults to 1280.\n */\n initialWidth?: number;\n}\n\nexport interface UseContainerWidthResult {\n /**\n * Current container width in pixels.\n */\n width: number;\n\n /**\n * Whether the container has been measured at least once.\n */\n mounted: boolean;\n\n /**\n * Ref to attach to the container element.\n */\n containerRef: RefObject<HTMLDivElement | null>;\n\n /**\n * Manually trigger a width measurement.\n * Useful when the container size might change without a resize event.\n */\n measureWidth: () => void;\n}\n\n/**\n * Hook to observe and track container width.\n *\n * Replaces the WidthProvider HOC with a more composable approach.\n *\n * @example\n * ```tsx\n * function MyGrid() {\n * const { width, containerRef, mounted } = useContainerWidth();\n *\n * return (\n * <div ref={containerRef}>\n * {mounted && <GridLayout width={width} {...props} />}\n * </div>\n * );\n * }\n * ```\n */\nexport function useContainerWidth(\n options: UseContainerWidthOptions = {}\n): UseContainerWidthResult {\n const { measureBeforeMount = false, initialWidth = 1280 } = options;\n\n const [width, setWidth] = useState(initialWidth);\n const [mounted, setMounted] = useState(!measureBeforeMount);\n const containerRef = useRef<HTMLDivElement | null>(null);\n const observerRef = useRef<ResizeObserver | null>(null);\n\n const measureWidth = useCallback(() => {\n const node = containerRef.current;\n if (node) {\n const newWidth = node.offsetWidth;\n setWidth(newWidth);\n if (!mounted) {\n setMounted(true);\n }\n }\n }, [mounted]);\n\n useEffect(() => {\n const node = containerRef.current;\n if (!node) return;\n\n // Initial measurement\n measureWidth();\n\n // Set up ResizeObserver\n if (typeof ResizeObserver !== \"undefined\") {\n observerRef.current = new ResizeObserver(entries => {\n const entry = entries[0];\n if (entry) {\n // Use contentRect.width for consistent measurements\n const newWidth = entry.contentRect.width;\n setWidth(newWidth);\n }\n });\n\n observerRef.current.observe(node);\n }\n\n return () => {\n if (observerRef.current) {\n observerRef.current.disconnect();\n observerRef.current = null;\n }\n };\n }, [measureWidth]);\n\n return {\n width,\n mounted,\n containerRef,\n measureWidth\n };\n}\n\nexport default useContainerWidth;\n","/**\n * useGridLayout hook\n *\n * Core hook for managing grid layout state, including drag, resize, and drop operations.\n * This extracts the state management logic from ReactGridLayout into a reusable hook.\n */\n\nimport { useState, useCallback, useMemo, useRef, useEffect } from \"react\";\nimport { deepEqual } from \"fast-equals\";\nimport type {\n Layout,\n LayoutItem,\n CompactType,\n DroppingPosition,\n Compactor,\n Mutable\n} from \"../../core/types.js\";\nimport {\n cloneLayout,\n cloneLayoutItem,\n moveElement,\n correctBounds,\n bottom,\n getLayoutItem\n} from \"../../core/layout.js\";\nimport { compact } from \"../../core/compact-compat.js\";\nimport { getCompactor } from \"../../core/compactors.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DragState {\n /** Currently dragging item placeholder */\n activeDrag: LayoutItem | null;\n /** Original item before drag started */\n oldDragItem: LayoutItem | null;\n /** Layout before drag started */\n oldLayout: Layout | null;\n}\n\nexport interface ResizeState {\n /** Whether a resize is in progress */\n resizing: boolean;\n /** Original item before resize started */\n oldResizeItem: LayoutItem | null;\n /** Layout before resize started */\n oldLayout: Layout | null;\n}\n\nexport interface DropState {\n /** DOM node for the dropping placeholder */\n droppingDOMNode: React.ReactElement | null;\n /** Current drop position */\n droppingPosition: DroppingPosition | null;\n}\n\nexport interface UseGridLayoutOptions {\n /** Initial layout */\n layout: Layout;\n /** Number of columns */\n cols: number;\n /** Compaction type: 'vertical', 'horizontal', or null */\n compactType?: CompactType;\n /** Allow items to overlap */\n allowOverlap?: boolean;\n /** Prevent collisions when moving items */\n preventCollision?: boolean;\n /** Called when layout changes */\n onLayoutChange?: (layout: Layout) => void;\n}\n\nexport interface UseGridLayoutResult {\n /** Current layout */\n layout: Layout;\n /** Set layout directly */\n setLayout: (layout: Layout) => void;\n /** Drag state */\n dragState: DragState;\n /** Resize state */\n resizeState: ResizeState;\n /** Drop state */\n dropState: DropState;\n /** Start dragging an item */\n onDragStart: (itemId: string, x: number, y: number) => LayoutItem | null;\n /** Update drag position */\n onDrag: (itemId: string, x: number, y: number) => void;\n /** Stop dragging */\n onDragStop: (itemId: string, x: number, y: number) => void;\n /** Start resizing an item */\n onResizeStart: (itemId: string) => LayoutItem | null;\n /** Update resize dimensions */\n onResize: (\n itemId: string,\n w: number,\n h: number,\n x?: number,\n y?: number\n ) => void;\n /** Stop resizing */\n onResizeStop: (itemId: string, w: number, h: number) => void;\n /** Start dropping (external drag-in) */\n onDropDragOver: (\n droppingItem: LayoutItem,\n position: DroppingPosition\n ) => void;\n /** Update drop position */\n onDropDragLeave: () => void;\n /** Complete drop */\n onDrop: (droppingItem: LayoutItem) => void;\n /** Container height in rows */\n containerHeight: number;\n /** Whether any drag/resize is active */\n isInteracting: boolean;\n /** Get the compactor being used */\n compactor: Compactor;\n}\n\n// ============================================================================\n// Hook Implementation\n// ============================================================================\n\n/**\n * Hook for managing grid layout state.\n *\n * Handles all layout state including drag, resize, and drop operations.\n * Uses immutable updates and provides callbacks for all interactions.\n *\n * @example\n * ```tsx\n * function MyGrid() {\n * const {\n * layout,\n * onDragStart,\n * onDrag,\n * onDragStop,\n * containerHeight\n * } = useGridLayout({\n * layout: initialLayout,\n * cols: 12,\n * compactType: 'vertical'\n * });\n *\n * return (\n * <div style={{ height: containerHeight }}>\n * {layout.map(item => (\n * <GridItem\n * key={item.i}\n * {...item}\n * onDragStart={() => onDragStart(item.i, item.x, item.y)}\n * />\n * ))}\n * </div>\n * );\n * }\n * ```\n */\nexport function useGridLayout(\n options: UseGridLayoutOptions\n): UseGridLayoutResult {\n const {\n layout: propsLayout,\n cols,\n compactType = \"vertical\",\n allowOverlap = false,\n preventCollision = false,\n onLayoutChange\n } = options;\n\n // Get the appropriate compactor\n const compactor = useMemo(\n () => getCompactor(compactType, allowOverlap),\n [compactType, allowOverlap]\n );\n\n // Track if we're currently dragging to block prop updates\n const isDraggingRef = useRef(false);\n\n // Initialize layout with compaction\n const [layout, setLayoutState] = useState<Layout>(() => {\n const corrected = correctBounds(cloneLayout(propsLayout), { cols });\n return compact(corrected, compactType, cols, allowOverlap);\n });\n\n // Drag state\n const [dragState, setDragState] = useState<DragState>({\n activeDrag: null,\n oldDragItem: null,\n oldLayout: null\n });\n\n // Resize state\n const [resizeState, setResizeState] = useState<ResizeState>({\n resizing: false,\n oldResizeItem: null,\n oldLayout: null\n });\n\n // Drop state\n const [dropState, setDropState] = useState<DropState>({\n droppingDOMNode: null,\n droppingPosition: null\n });\n\n // Track previous layout for change detection\n const prevLayoutRef = useRef<Layout>(layout);\n\n // Set layout with optional compaction\n const setLayout = useCallback(\n (newLayout: Layout) => {\n const corrected = correctBounds(cloneLayout(newLayout), { cols });\n const compacted = compact(corrected, compactType, cols, allowOverlap);\n setLayoutState(compacted);\n },\n [cols, compactType, allowOverlap]\n );\n\n // Sync layout from props when not dragging\n useEffect(() => {\n if (isDraggingRef.current) return;\n\n if (!deepEqual(propsLayout, prevLayoutRef.current)) {\n setLayout(propsLayout);\n }\n }, [propsLayout, setLayout]);\n\n // Notify layout changes\n useEffect(() => {\n if (!deepEqual(layout, prevLayoutRef.current)) {\n prevLayoutRef.current = layout;\n onLayoutChange?.(layout);\n }\n }, [layout, onLayoutChange]);\n\n // ============================================================================\n // Drag Handlers\n // ============================================================================\n\n const onDragStart = useCallback(\n (itemId: string, x: number, y: number): LayoutItem | null => {\n const item = getLayoutItem(layout, itemId);\n if (!item) return null;\n\n isDraggingRef.current = true;\n\n const placeholder: LayoutItem = {\n ...cloneLayoutItem(item),\n x,\n y,\n static: false,\n moved: false\n };\n\n setDragState({\n activeDrag: placeholder,\n oldDragItem: cloneLayoutItem(item),\n oldLayout: cloneLayout(layout)\n });\n\n return placeholder;\n },\n [layout]\n );\n\n const onDrag = useCallback(\n (itemId: string, x: number, y: number) => {\n const item = getLayoutItem(layout, itemId);\n if (!item) return;\n\n // Update placeholder position\n setDragState(prev => ({\n ...prev,\n activeDrag: prev.activeDrag ? { ...prev.activeDrag, x, y } : null\n }));\n\n // Move element and update layout\n const newLayout = moveElement(\n layout,\n item,\n x,\n y,\n true, // isUserAction\n preventCollision,\n compactType,\n cols,\n allowOverlap\n );\n\n // Compact layout\n const compacted = allowOverlap\n ? newLayout\n : compact(newLayout, compactType, cols);\n\n setLayoutState(compacted);\n },\n [layout, cols, compactType, preventCollision, allowOverlap]\n );\n\n const onDragStop = useCallback(\n (itemId: string, x: number, y: number) => {\n const item = getLayoutItem(layout, itemId);\n if (!item) return;\n\n // Final move\n const newLayout = moveElement(\n layout,\n item,\n x,\n y,\n true,\n preventCollision,\n compactType,\n cols,\n allowOverlap\n );\n\n // Compact and finalize\n const compacted = compact(newLayout, compactType, cols, allowOverlap);\n\n isDraggingRef.current = false;\n\n setDragState({\n activeDrag: null,\n oldDragItem: null,\n oldLayout: null\n });\n\n setLayoutState(compacted);\n },\n [layout, cols, compactType, preventCollision, allowOverlap]\n );\n\n // ============================================================================\n // Resize Handlers\n // ============================================================================\n\n const onResizeStart = useCallback(\n (itemId: string): LayoutItem | null => {\n const item = getLayoutItem(layout, itemId);\n if (!item) return null;\n\n setResizeState({\n resizing: true,\n oldResizeItem: cloneLayoutItem(item),\n oldLayout: cloneLayout(layout)\n });\n\n return item;\n },\n [layout]\n );\n\n const onResize = useCallback(\n (itemId: string, w: number, h: number, x?: number, y?: number) => {\n const newLayout = layout.map(item => {\n if (item.i === itemId) {\n const updated: LayoutItem = {\n ...item,\n w,\n h\n };\n if (x !== undefined) (updated as Mutable<LayoutItem>).x = x;\n if (y !== undefined) (updated as Mutable<LayoutItem>).y = y;\n return updated;\n }\n return item;\n });\n\n // Correct bounds and compact\n const corrected = correctBounds(newLayout, { cols });\n const compacted = compact(corrected, compactType, cols, allowOverlap);\n\n setLayoutState(compacted);\n },\n [layout, cols, compactType, allowOverlap]\n );\n\n const onResizeStop = useCallback(\n (itemId: string, w: number, h: number) => {\n // Apply final resize\n onResize(itemId, w, h);\n\n setResizeState({\n resizing: false,\n oldResizeItem: null,\n oldLayout: null\n });\n },\n [onResize]\n );\n\n // ============================================================================\n // Drop Handlers\n // ============================================================================\n\n const onDropDragOver = useCallback(\n (droppingItem: LayoutItem, position: DroppingPosition) => {\n // Check if item already exists in layout\n const existingItem = getLayoutItem(layout, droppingItem.i);\n\n if (!existingItem) {\n // Add dropping item to layout\n const newLayout = [...layout, droppingItem];\n const corrected = correctBounds(newLayout, { cols });\n const compacted = compact(corrected, compactType, cols, allowOverlap);\n setLayoutState(compacted);\n }\n\n setDropState({\n droppingDOMNode: null, // Will be set by component\n droppingPosition: position\n });\n },\n [layout, cols, compactType, allowOverlap]\n );\n\n const onDropDragLeave = useCallback(() => {\n // Remove dropping placeholder from layout\n const newLayout = layout.filter(item => item.i !== \"__dropping-elem__\");\n setLayoutState(newLayout);\n\n setDropState({\n droppingDOMNode: null,\n droppingPosition: null\n });\n }, [layout]);\n\n const onDrop = useCallback(\n (droppingItem: LayoutItem) => {\n // Replace placeholder with actual item\n const newLayout = layout.map(item => {\n if (item.i === \"__dropping-elem__\") {\n return {\n ...item,\n i: droppingItem.i,\n static: false\n };\n }\n return item;\n });\n\n const corrected = correctBounds(newLayout, { cols });\n const compacted = compact(corrected, compactType, cols, allowOverlap);\n setLayoutState(compacted);\n\n setDropState({\n droppingDOMNode: null,\n droppingPosition: null\n });\n },\n [layout, cols, compactType, allowOverlap]\n );\n\n // ============================================================================\n // Computed Values\n // ============================================================================\n\n const containerHeight = useMemo(() => bottom(layout), [layout]);\n\n const isInteracting =\n dragState.activeDrag !== null ||\n resizeState.resizing ||\n dropState.droppingPosition !== null;\n\n return {\n layout,\n setLayout,\n dragState,\n resizeState,\n dropState,\n onDragStart,\n onDrag,\n onDragStop,\n onResizeStart,\n onResize,\n onResizeStop,\n onDropDragOver,\n onDropDragLeave,\n onDrop,\n containerHeight,\n isInteracting,\n compactor\n };\n}\n\nexport default useGridLayout;\n","/**\n * useResponsiveLayout hook\n *\n * Manages responsive breakpoints and layout generation for different screen sizes.\n * Extracts state management from ResponsiveReactGridLayout into a reusable hook.\n */\n\nimport { useState, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { deepEqual } from \"fast-equals\";\nimport type {\n Layout,\n Breakpoint,\n Breakpoints,\n ResponsiveLayouts,\n CompactType\n} from \"../../core/types.js\";\nimport { cloneLayout } from \"../../core/layout.js\";\nimport {\n getBreakpointFromWidth,\n getColsFromBreakpoint,\n findOrGenerateResponsiveLayout,\n sortBreakpoints\n} from \"../../core/responsive.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/** Default breakpoint names */\nexport type DefaultBreakpoints = \"lg\" | \"md\" | \"sm\" | \"xs\" | \"xxs\";\n\n/** Default breakpoint widths */\nexport const DEFAULT_BREAKPOINTS: Breakpoints<DefaultBreakpoints> = {\n lg: 1200,\n md: 996,\n sm: 768,\n xs: 480,\n xxs: 0\n};\n\n/** Default column counts per breakpoint */\nexport const DEFAULT_COLS: Breakpoints<DefaultBreakpoints> = {\n lg: 12,\n md: 10,\n sm: 6,\n xs: 4,\n xxs: 2\n};\n\nexport interface UseResponsiveLayoutOptions<\n B extends Breakpoint = DefaultBreakpoints\n> {\n /** Current container width */\n width: number;\n /** Breakpoint definitions (name → min-width) */\n breakpoints?: Breakpoints<B>;\n /** Column counts per breakpoint */\n cols?: Breakpoints<B>;\n /** Layouts for each breakpoint */\n layouts?: ResponsiveLayouts<B>;\n /** Compaction type */\n compactType?: CompactType;\n /** Called when breakpoint changes */\n onBreakpointChange?: (newBreakpoint: B, cols: number) => void;\n /** Called when layout changes */\n onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;\n /** Called when width changes */\n onWidthChange?: (\n width: number,\n margin: readonly [number, number],\n cols: number,\n containerPadding: readonly [number, number] | null\n ) => void;\n}\n\nexport interface UseResponsiveLayoutResult<\n B extends Breakpoint = DefaultBreakpoints\n> {\n /** Current layout for the active breakpoint */\n layout: Layout;\n /** All layouts by breakpoint */\n layouts: ResponsiveLayouts<B>;\n /** Current active breakpoint */\n breakpoint: B;\n /** Column count for the current breakpoint */\n cols: number;\n /** Update layouts for a specific breakpoint */\n setLayoutForBreakpoint: (breakpoint: B, layout: Layout) => void;\n /** Update all layouts */\n setLayouts: (layouts: ResponsiveLayouts<B>) => void;\n /** Sorted array of breakpoint names (smallest to largest) */\n sortedBreakpoints: B[];\n}\n\n// ============================================================================\n// Hook Implementation\n// ============================================================================\n\n/**\n * Hook for managing responsive grid layouts.\n *\n * Automatically selects the appropriate layout based on container width\n * and generates layouts for new breakpoints from existing ones.\n *\n * @example\n * ```tsx\n * function MyResponsiveGrid() {\n * const { width, containerRef } = useContainerWidth();\n * const { layout, breakpoint, cols } = useResponsiveLayout({\n * width,\n * layouts: {\n * lg: [...],\n * md: [...],\n * sm: [...]\n * }\n * });\n *\n * return (\n * <div ref={containerRef}>\n * <GridLayout\n * width={width}\n * cols={cols}\n * layout={layout}\n * />\n * </div>\n * );\n * }\n * ```\n */\nexport function useResponsiveLayout<B extends Breakpoint = DefaultBreakpoints>(\n options: UseResponsiveLayoutOptions<B>\n): UseResponsiveLayoutResult<B> {\n const {\n width,\n breakpoints = DEFAULT_BREAKPOINTS as unknown as Breakpoints<B>,\n cols: colsConfig = DEFAULT_COLS as unknown as Breakpoints<B>,\n layouts: propsLayouts = {} as ResponsiveLayouts<B>,\n compactType = \"vertical\",\n onBreakpointChange,\n onLayoutChange,\n onWidthChange\n } = options;\n\n // Sorted breakpoints for consistent ordering\n const sortedBreakpoints = useMemo(\n () => sortBreakpoints(breakpoints),\n [breakpoints]\n );\n\n // Calculate initial breakpoint and cols\n const initialBreakpoint = useMemo(\n () => getBreakpointFromWidth(breakpoints, width),\n // Only calculate on mount, not on width changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n []\n );\n\n const initialCols = useMemo(\n () => getColsFromBreakpoint(initialBreakpoint, colsConfig),\n [initialBreakpoint, colsConfig]\n );\n\n // State\n const [breakpoint, setBreakpoint] = useState<B>(initialBreakpoint);\n const [cols, setCols] = useState<number>(initialCols);\n const [layouts, setLayoutsState] = useState<ResponsiveLayouts<B>>(() => {\n // Clone initial layouts\n const cloned = {} as ResponsiveLayouts<B>;\n for (const bp of sortedBreakpoints) {\n const layout = propsLayouts[bp];\n if (layout) {\n (cloned as Record<B, Layout>)[bp] = cloneLayout(layout);\n }\n }\n return cloned;\n });\n\n // Track previous values for change detection\n const prevWidthRef = useRef(width);\n const prevBreakpointRef = useRef(breakpoint);\n const prevLayoutsRef = useRef(layouts);\n\n // Current layout for the active breakpoint\n const layout = useMemo(() => {\n return findOrGenerateResponsiveLayout(\n layouts,\n breakpoints,\n breakpoint,\n prevBreakpointRef.current,\n cols,\n compactType\n );\n }, [layouts, breakpoints, breakpoint, cols, compactType]);\n\n // Set layout for a specific breakpoint\n const setLayoutForBreakpoint = useCallback((bp: B, newLayout: Layout) => {\n setLayoutsState((prev: ResponsiveLayouts<B>) => ({\n ...prev,\n [bp]: cloneLayout(newLayout)\n }));\n }, []);\n\n // Set all layouts\n const setLayouts = useCallback((newLayouts: ResponsiveLayouts<B>) => {\n const cloned = {} as ResponsiveLayouts<B>;\n for (const bp of Object.keys(newLayouts) as B[]) {\n const layoutForBp = newLayouts[bp];\n if (layoutForBp) {\n (cloned as Record<B, Layout>)[bp] = cloneLayout(layoutForBp);\n }\n }\n setLayoutsState(cloned);\n }, []);\n\n // Handle width changes\n useEffect(() => {\n if (prevWidthRef.current === width) return;\n prevWidthRef.current = width;\n\n // Determine new breakpoint\n const newBreakpoint = getBreakpointFromWidth(breakpoints, width);\n const newCols = getColsFromBreakpoint(newBreakpoint, colsConfig);\n\n // Notify width change\n onWidthChange?.(width, [10, 10], newCols, null);\n\n // Check if breakpoint changed\n if (newBreakpoint !== breakpoint) {\n // Generate layout for new breakpoint\n const newLayout = findOrGenerateResponsiveLayout(\n layouts,\n breakpoints,\n newBreakpoint,\n breakpoint,\n newCols,\n compactType\n );\n\n // Update layouts with the new breakpoint layout\n const updatedLayouts: ResponsiveLayouts<B> = {\n ...layouts,\n [newBreakpoint]: newLayout\n };\n\n setLayoutsState(updatedLayouts);\n setBreakpoint(newBreakpoint);\n setCols(newCols);\n\n // Notify breakpoint change\n onBreakpointChange?.(newBreakpoint, newCols);\n\n prevBreakpointRef.current = newBreakpoint;\n }\n }, [\n width,\n breakpoints,\n colsConfig,\n breakpoint,\n layouts,\n compactType,\n onBreakpointChange,\n onWidthChange\n ]);\n\n // Sync with prop layouts when they change\n useEffect(() => {\n if (!deepEqual(propsLayouts, prevLayoutsRef.current)) {\n setLayouts(propsLayouts);\n prevLayoutsRef.current = propsLayouts;\n }\n }, [propsLayouts, setLayouts]);\n\n // Notify layout changes\n useEffect(() => {\n if (!deepEqual(layouts, prevLayoutsRef.current)) {\n prevLayoutsRef.current = layouts;\n onLayoutChange?.(layout, layouts);\n }\n }, [layout, layouts, onLayoutChange]);\n\n return {\n layout,\n layouts,\n breakpoint,\n cols,\n setLayoutForBreakpoint,\n setLayouts,\n sortedBreakpoints\n };\n}\n\nexport default useResponsiveLayout;\n"]}
import { defaultConstraints, setTransform, setTopLeft, perc, applyPositionConstraints, resizeItemInDirection, applySizeConstraints, defaultPositionStrategy, defaultGridConfig, defaultDragConfig, defaultResizeConfig, defaultDropConfig, getCompactor, compact, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout, getIndentationValue } from './chunk-2O3ZME4Q.mjs';
import { calcXYRaw, calcGridItemWHPx, clamp, calcGridColWidth, calcWHRaw, calcGridItemPosition, bottom, getLayoutItem, cloneLayoutItem, moveElement, withLayoutItem, getAllCollisions, calcXY, cloneLayout, correctBounds } from './chunk-AWM66AWF.mjs';
import React2, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
import { DraggableCore } from 'react-draggable';
import { Resizable } from 'react-resizable';
import clsx from 'clsx';
import { jsx, jsxs } from 'react/jsx-runtime';
import { deepEqual } from 'fast-equals';
function GridItem(props) {
const {
children,
cols,
containerWidth,
margin,
containerPadding,
rowHeight,
maxRows,
isDraggable,
isResizable,
isBounded,
static: isStatic,
useCSSTransforms = true,
usePercentages = false,
transformScale = 1,
droppingPosition,
className = "",
style,
handle = "",
cancel = "",
x,
y,
w,
h,
minW = 1,
maxW = Infinity,
minH = 1,
maxH = Infinity,
i,
resizeHandles,
resizeHandle,
constraints = defaultConstraints,
layoutItem,
layout = [],
onDragStart: onDragStartProp,
onDrag: onDragProp,
onDragStop: onDragStopProp,
onResizeStart: onResizeStartProp,
onResize: onResizeProp,
onResizeStop: onResizeStopProp
} = props;
const [dragging, setDragging] = useState(false);
const [resizing, setResizing] = useState(false);
const elementRef = useRef(null);
const dragPositionRef = useRef({ left: 0, top: 0 });
const resizePositionRef = useRef({
top: 0,
left: 0,
width: 0,
height: 0
});
const prevDroppingPositionRef = useRef(
void 0
);
const positionParams = useMemo(
() => ({
cols,
containerPadding,
containerWidth,
margin,
maxRows,
rowHeight
}),
[cols, containerPadding, containerWidth, margin, maxRows, rowHeight]
);
const constraintContext = useMemo(
() => ({
cols,
maxRows,
containerWidth,
containerHeight: 0,
// Auto-height grids don't have a fixed container height
rowHeight,
margin,
layout
}),
[cols, maxRows, containerWidth, rowHeight, margin, layout]
);
const effectiveLayoutItem = useMemo(
() => layoutItem ?? {
i,
x,
y,
w,
h,
minW,
maxW,
minH,
maxH
},
[layoutItem, i, x, y, w, h, minW, maxW, minH, maxH]
);
const createStyle = useCallback(
(pos2) => {
if (useCSSTransforms) {
return setTransform(pos2);
}
const styleObj = setTopLeft(pos2);
if (usePercentages) {
return {
...styleObj,
left: perc(pos2.left / containerWidth),
width: perc(pos2.width / containerWidth)
};
}
return styleObj;
},
[useCSSTransforms, usePercentages, containerWidth]
);
const onDragStart = useCallback(
(e, { node }) => {
if (!onDragStartProp) return;
const { offsetParent } = node;
if (!offsetParent) return;
const parentRect = offsetParent.getBoundingClientRect();
const clientRect = node.getBoundingClientRect();
const cLeft = clientRect.left / transformScale;
const pLeft = parentRect.left / transformScale;
const cTop = clientRect.top / transformScale;
const pTop = parentRect.top / transformScale;
const newPosition = {
left: cLeft - pLeft + offsetParent.scrollLeft,
top: cTop - pTop + offsetParent.scrollTop
};
dragPositionRef.current = newPosition;
setDragging(true);
const rawPos = calcXYRaw(
positionParams,
newPosition.top,
newPosition.left
);
const { x: newX, y: newY } = applyPositionConstraints(
constraints,
effectiveLayoutItem,
rawPos.x,
rawPos.y,
constraintContext
);
onDragStartProp(i, newX, newY, {
e,
node,
newPosition
});
},
[
onDragStartProp,
transformScale,
positionParams,
constraints,
effectiveLayoutItem,
constraintContext,
i
]
);
const onDrag = useCallback(
(e, { node, deltaX, deltaY }) => {
if (!onDragProp || !dragging) return;
let top = dragPositionRef.current.top + deltaY;
let left = dragPositionRef.current.left + deltaX;
if (isBounded) {
const { offsetParent } = node;
if (offsetParent) {
const bottomBoundary = offsetParent.clientHeight - calcGridItemWHPx(h, rowHeight, margin[1]);
top = clamp(top, 0, bottomBoundary);
const colWidth = calcGridColWidth(positionParams);
const rightBoundary = containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
left = clamp(left, 0, rightBoundary);
}
}
const newPosition = { top, left };
dragPositionRef.current = newPosition;
const rawPos = calcXYRaw(positionParams, top, left);
const { x: newX, y: newY } = applyPositionConstraints(
constraints,
effectiveLayoutItem,
rawPos.x,
rawPos.y,
constraintContext
);
onDragProp(i, newX, newY, {
e,
node,
newPosition
});
},
[
onDragProp,
dragging,
isBounded,
h,
rowHeight,
margin,
positionParams,
containerWidth,
w,
i,
constraints,
effectiveLayoutItem,
constraintContext
]
);
const onDragStop = useCallback(
(e, { node }) => {
if (!onDragStopProp || !dragging) return;
const { left, top } = dragPositionRef.current;
const newPosition = { top, left };
setDragging(false);
dragPositionRef.current = { left: 0, top: 0 };
const rawPos = calcXYRaw(positionParams, top, left);
const { x: newX, y: newY } = applyPositionConstraints(
constraints,
effectiveLayoutItem,
rawPos.x,
rawPos.y,
constraintContext
);
onDragStopProp(i, newX, newY, {
e,
node,
newPosition
});
},
[
onDragStopProp,
dragging,
positionParams,
constraints,
effectiveLayoutItem,
constraintContext,
i
]
);
const onResizeHandler = useCallback(
(e, { node, size, handle: resizeHandle2 }, position, handlerName) => {
const handler = handlerName === "onResizeStart" ? onResizeStartProp : handlerName === "onResize" ? onResizeProp : onResizeStopProp;
if (!handler) return;
let updatedSize;
if (node) {
updatedSize = resizeItemInDirection(
resizeHandle2,
position,
size,
containerWidth
);
} else {
updatedSize = {
...size,
top: position.top,
left: position.left
};
}
resizePositionRef.current = updatedSize;
const rawSize = calcWHRaw(
positionParams,
updatedSize.width,
updatedSize.height
);
const { w: newW, h: newH } = applySizeConstraints(
constraints,
effectiveLayoutItem,
rawSize.w,
rawSize.h,
resizeHandle2,
constraintContext
);
handler(i, newW, newH, {
e: e.nativeEvent,
node,
size: updatedSize,
handle: resizeHandle2
});
},
[
onResizeStartProp,
onResizeProp,
onResizeStopProp,
containerWidth,
positionParams,
x,
y,
i,
constraints,
effectiveLayoutItem,
constraintContext
]
);
const handleResizeStart = useCallback(
(e, data) => {
setResizing(true);
const pos2 = calcGridItemPosition(positionParams, x, y, w, h);
const typedData = {
...data,
handle: data.handle
};
onResizeHandler(e, typedData, pos2, "onResizeStart");
},
[onResizeHandler, positionParams, x, y, w, h]
);
const handleResize = useCallback(
(e, data) => {
const pos2 = calcGridItemPosition(positionParams, x, y, w, h);
const typedData = {
...data,
handle: data.handle
};
onResizeHandler(e, typedData, pos2, "onResize");
},
[onResizeHandler, positionParams, x, y, w, h]
);
const handleResizeStop = useCallback(
(e, data) => {
setResizing(false);
resizePositionRef.current = { top: 0, left: 0, width: 0, height: 0 };
const pos2 = calcGridItemPosition(positionParams, x, y, w, h);
const typedData = {
...data,
handle: data.handle
};
onResizeHandler(e, typedData, pos2, "onResizeStop");
},
[onResizeHandler, positionParams, x, y, w, h]
);
useEffect(() => {
if (!droppingPosition) return;
const node = elementRef.current;
if (!node) return;
const prevDroppingPosition = prevDroppingPositionRef.current || {
left: 0,
top: 0
};
const shouldDrag = dragging && (droppingPosition.left !== prevDroppingPosition.left || droppingPosition.top !== prevDroppingPosition.top);
if (!dragging) {
const fakeData = {
node,
deltaX: droppingPosition.left,
deltaY: droppingPosition.top,
lastX: 0,
lastY: 0,
x: droppingPosition.left,
y: droppingPosition.top
};
onDragStart(droppingPosition.e, fakeData);
} else if (shouldDrag) {
const deltaX = droppingPosition.left - dragPositionRef.current.left;
const deltaY = droppingPosition.top - dragPositionRef.current.top;
const fakeData = {
node,
deltaX,
deltaY,
lastX: dragPositionRef.current.left,
lastY: dragPositionRef.current.top,
x: droppingPosition.left,
y: droppingPosition.top
};
onDrag(droppingPosition.e, fakeData);
}
prevDroppingPositionRef.current = droppingPosition;
}, [droppingPosition, dragging, onDragStart, onDrag]);
const pos = calcGridItemPosition(
positionParams,
x,
y,
w,
h,
dragging ? dragPositionRef.current : null,
resizing ? resizePositionRef.current : null
);
const child = React2.Children.only(children);
const minGridUnit = calcGridItemPosition(positionParams, 0, 0, 1, 1);
const minConstraints = [
minGridUnit.width,
minGridUnit.height
];
const maxConstraints = [Infinity, Infinity];
const childProps = child.props;
const childClassName = childProps["className"];
const childStyle = childProps["style"];
let newChild = React2.cloneElement(child, {
ref: elementRef,
className: clsx("react-grid-item", childClassName, className, {
static: isStatic,
resizing,
"react-draggable": isDraggable,
"react-draggable-dragging": dragging,
dropping: Boolean(droppingPosition),
cssTransforms: useCSSTransforms
}),
style: {
...style,
...childStyle,
...createStyle(pos)
}
});
const resizableHandle = resizeHandle;
newChild = /* @__PURE__ */ jsx(
Resizable,
{
draggableOpts: { disabled: !isResizable },
className: isResizable ? void 0 : "react-resizable-hide",
width: pos.width,
height: pos.height,
minConstraints,
maxConstraints,
onResizeStart: handleResizeStart,
onResize: handleResize,
onResizeStop: handleResizeStop,
transformScale,
resizeHandles,
handle: resizableHandle,
children: newChild
}
);
newChild = /* @__PURE__ */ jsx(
DraggableCore,
{
disabled: !isDraggable,
onStart: onDragStart,
onDrag,
onStop: onDragStop,
handle,
cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""),
scale: transformScale,
nodeRef: elementRef,
children: newChild
}
);
return newChild;
}
var noop = () => {
};
var layoutClassName = "react-grid-layout";
var isFirefox = false;
try {
isFirefox = /firefox/i.test(navigator.userAgent);
} catch {
}
function childrenEqual(a, b) {
const aArr = React2.Children.toArray(a);
const bArr = React2.Children.toArray(b);
if (aArr.length !== bArr.length) return false;
for (let i = 0; i < aArr.length; i++) {
const aChild = aArr[i];
const bChild = bArr[i];
if (aChild?.key !== bChild?.key) return false;
}
return true;
}
function synchronizeLayoutWithChildren(initialLayout, children, cols, compactType, allowOverlap) {
const layout = [];
const childKeys = /* @__PURE__ */ new Set();
React2.Children.forEach(children, (child) => {
if (!React2.isValidElement(child) || child.key === null) return;
const key = String(child.key);
childKeys.add(key);
const existingItem = initialLayout.find((l) => l.i === key);
if (existingItem) {
layout.push(cloneLayoutItem(existingItem));
} else {
const childProps = child.props;
const dataGrid = childProps["data-grid"];
if (dataGrid) {
layout.push({
i: key,
x: dataGrid.x ?? 0,
y: dataGrid.y ?? 0,
w: dataGrid.w ?? 1,
h: dataGrid.h ?? 1,
minW: dataGrid.minW,
maxW: dataGrid.maxW,
minH: dataGrid.minH,
maxH: dataGrid.maxH,
static: dataGrid.static,
isDraggable: dataGrid.isDraggable,
isResizable: dataGrid.isResizable,
resizeHandles: dataGrid.resizeHandles,
isBounded: dataGrid.isBounded
});
} else {
layout.push({
i: key,
x: 0,
y: bottom(layout),
w: 1,
h: 1
});
}
}
});
const corrected = correctBounds(layout, { cols });
return compact(corrected, compactType, cols, allowOverlap);
}
function GridLayout(props) {
const {
// Required
children,
width,
// Composable config interfaces
gridConfig: gridConfigProp,
dragConfig: dragConfigProp,
resizeConfig: resizeConfigProp,
dropConfig: dropConfigProp,
positionStrategy = defaultPositionStrategy,
compactor: compactorProp,
constraints = defaultConstraints,
// Layout data
layout: propsLayout = [],
droppingItem: droppingItemProp,
// Container props
autoSize = true,
className = "",
style = {},
innerRef,
// Callbacks
onLayoutChange = noop,
onDragStart: onDragStartProp = noop,
onDrag: onDragProp = noop,
onDragStop: onDragStopProp = noop,
onResizeStart: onResizeStartProp = noop,
onResize: onResizeProp = noop,
onResizeStop: onResizeStopProp = noop,
onDrop: onDropProp = noop,
onDropDragOver: onDropDragOverProp = noop
} = props;
const gridConfig = useMemo(
() => ({ ...defaultGridConfig, ...gridConfigProp }),
[gridConfigProp]
);
const dragConfig = useMemo(
() => ({ ...defaultDragConfig, ...dragConfigProp }),
[dragConfigProp]
);
const resizeConfig = useMemo(
() => ({ ...defaultResizeConfig, ...resizeConfigProp }),
[resizeConfigProp]
);
const dropConfig = useMemo(
() => ({ ...defaultDropConfig, ...dropConfigProp }),
[dropConfigProp]
);
const { cols, rowHeight, maxRows, margin, containerPadding } = gridConfig;
const {
enabled: isDraggable,
bounded: isBounded,
handle: draggableHandle,
cancel: draggableCancel
} = dragConfig;
const {
enabled: isResizable,
handles: resizeHandles,
handleComponent: resizeHandle
} = resizeConfig;
const { enabled: isDroppable, defaultItem: defaultDropItem } = dropConfig;
const compactor = compactorProp ?? getCompactor("vertical");
const compactType = compactor.type;
const allowOverlap = compactor.allowOverlap;
const preventCollision = compactor.preventCollision ?? false;
const droppingItem = useMemo(
() => droppingItemProp ?? {
i: "__dropping-elem__",
...defaultDropItem
},
[droppingItemProp, defaultDropItem]
);
const useCSSTransforms = positionStrategy.type === "transform";
const transformScale = positionStrategy.scale;
const effectiveContainerPadding = containerPadding ?? margin;
const [mounted, setMounted] = useState(false);
const [layout, setLayout] = useState(
() => synchronizeLayoutWithChildren(
propsLayout,
children,
cols,
compactType,
allowOverlap
)
);
const [activeDrag, setActiveDrag] = useState(null);
const [resizing, setResizing] = useState(false);
const [droppingDOMNode, setDroppingDOMNode] = useState(
null
);
const [droppingPosition, setDroppingPosition] = useState();
const oldDragItemRef = useRef(null);
const oldResizeItemRef = useRef(null);
const oldLayoutRef = useRef(null);
const dragEnterCounterRef = useRef(0);
const prevLayoutRef = useRef(layout);
const prevPropsLayoutRef = useRef(propsLayout);
const prevChildrenRef = useRef(children);
const prevCompactTypeRef = useRef(compactType);
useEffect(() => {
setMounted(true);
if (!deepEqual(layout, propsLayout)) {
onLayoutChange(layout);
}
}, []);
useEffect(() => {
if (activeDrag) return;
const layoutChanged = !deepEqual(propsLayout, prevPropsLayoutRef.current);
const childrenChanged = !childrenEqual(children, prevChildrenRef.current);
const compactTypeChanged = compactType !== prevCompactTypeRef.current;
if (layoutChanged || childrenChanged || compactTypeChanged) {
const baseLayout = layoutChanged ? propsLayout : layout;
const newLayout = synchronizeLayoutWithChildren(
baseLayout,
children,
cols,
compactType,
allowOverlap
);
setLayout(newLayout);
}
prevPropsLayoutRef.current = propsLayout;
prevChildrenRef.current = children;
prevCompactTypeRef.current = compactType;
}, [
propsLayout,
children,
cols,
compactType,
allowOverlap,
activeDrag,
layout
]);
useEffect(() => {
if (!activeDrag && !deepEqual(layout, prevLayoutRef.current)) {
prevLayoutRef.current = layout;
onLayoutChange(layout);
}
}, [layout, activeDrag, onLayoutChange]);
const containerHeight = useMemo(() => {
if (!autoSize) return void 0;
const nbRow = bottom(layout);
const containerPaddingY = effectiveContainerPadding[1];
return nbRow * rowHeight + (nbRow - 1) * margin[1] + containerPaddingY * 2 + "px";
}, [autoSize, layout, rowHeight, margin, effectiveContainerPadding]);
const onDragStart = useCallback(
(i, _x, _y, data) => {
const l = getLayoutItem(layout, i);
if (!l) return;
const placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i
};
oldDragItemRef.current = cloneLayoutItem(l);
oldLayoutRef.current = layout;
setActiveDrag(placeholder);
onDragStartProp(layout, l, l, null, data.e, data.node);
},
[layout, onDragStartProp]
);
const onDrag = useCallback(
(i, x, y, data) => {
const oldDragItem = oldDragItemRef.current;
const l = getLayoutItem(layout, i);
if (!l) return;
const placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i
};
const newLayout = moveElement(
layout,
l,
x,
y,
true,
preventCollision,
compactType,
cols,
allowOverlap
);
onDragProp(newLayout, oldDragItem, l, placeholder, data.e, data.node);
setLayout(
allowOverlap ? newLayout : compact(newLayout, compactType, cols)
);
setActiveDrag(placeholder);
},
[layout, preventCollision, compactType, cols, allowOverlap, onDragProp]
);
const onDragStop = useCallback(
(i, x, y, data) => {
if (!activeDrag) return;
const oldDragItem = oldDragItemRef.current;
const l = getLayoutItem(layout, i);
if (!l) return;
const newLayout = moveElement(
layout,
l,
x,
y,
true,
preventCollision,
compactType,
cols,
allowOverlap
);
const finalLayout = allowOverlap ? newLayout : compact(newLayout, compactType, cols);
onDragStopProp(finalLayout, oldDragItem, l, null, data.e, data.node);
const oldLayout = oldLayoutRef.current;
oldDragItemRef.current = null;
oldLayoutRef.current = null;
setActiveDrag(null);
setLayout(finalLayout);
if (oldLayout && !deepEqual(oldLayout, finalLayout)) {
onLayoutChange(finalLayout);
}
},
[
activeDrag,
layout,
preventCollision,
compactType,
cols,
allowOverlap,
onDragStopProp,
onLayoutChange
]
);
const onResizeStart = useCallback(
(i, _w, _h, data) => {
const l = getLayoutItem(layout, i);
if (!l) return;
oldResizeItemRef.current = cloneLayoutItem(l);
oldLayoutRef.current = layout;
setResizing(true);
onResizeStartProp(layout, l, l, null, data.e, data.node);
},
[layout, onResizeStartProp]
);
const onResize = useCallback(
(i, w, h, data) => {
const oldResizeItem = oldResizeItemRef.current;
const { handle } = data;
let shouldMoveItem = false;
let newX;
let newY;
const [newLayout, l] = withLayoutItem(layout, i, (item) => {
newX = item.x;
newY = item.y;
if (["sw", "w", "nw", "n", "ne"].includes(handle)) {
if (["sw", "nw", "w"].includes(handle)) {
newX = item.x + (item.w - w);
w = item.x !== newX && newX < 0 ? item.w : w;
newX = newX < 0 ? 0 : newX;
}
if (["ne", "n", "nw"].includes(handle)) {
newY = item.y + (item.h - h);
h = item.y !== newY && newY < 0 ? item.h : h;
newY = newY < 0 ? 0 : newY;
}
shouldMoveItem = true;
}
if (preventCollision && !allowOverlap) {
const collisions = getAllCollisions(layout, {
...item,
w,
h,
x: newX ?? item.x,
y: newY ?? item.y
}).filter((layoutItem) => layoutItem.i !== item.i);
if (collisions.length > 0) {
newY = item.y;
h = item.h;
newX = item.x;
w = item.w;
shouldMoveItem = false;
}
}
item.w = w;
item.h = h;
return item;
});
if (!l) return;
let finalLayout = newLayout;
if (shouldMoveItem && newX !== void 0 && newY !== void 0) {
finalLayout = moveElement(
newLayout,
l,
newX,
newY,
true,
preventCollision,
compactType,
cols,
allowOverlap
);
}
const placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i,
static: true
};
onResizeProp(
finalLayout,
oldResizeItem,
l,
placeholder,
data.e,
data.node
);
setLayout(
allowOverlap ? finalLayout : compact(finalLayout, compactType, cols)
);
setActiveDrag(placeholder);
},
[layout, preventCollision, allowOverlap, compactType, cols, onResizeProp]
);
const onResizeStop = useCallback(
(i, _w, _h, data) => {
const oldResizeItem = oldResizeItemRef.current;
const l = getLayoutItem(layout, i);
const finalLayout = allowOverlap ? layout : compact(layout, compactType, cols);
onResizeStopProp(
finalLayout,
oldResizeItem,
l ?? null,
null,
data.e,
data.node
);
const oldLayout = oldLayoutRef.current;
oldResizeItemRef.current = null;
oldLayoutRef.current = null;
setActiveDrag(null);
setResizing(false);
setLayout(finalLayout);
if (oldLayout && !deepEqual(oldLayout, finalLayout)) {
onLayoutChange(finalLayout);
}
},
[layout, allowOverlap, compactType, cols, onResizeStopProp, onLayoutChange]
);
const removeDroppingPlaceholder = useCallback(() => {
const newLayout = compact(
layout.filter((l) => l.i !== droppingItem.i),
compactType,
cols,
allowOverlap
);
setLayout(newLayout);
setDroppingDOMNode(null);
setActiveDrag(null);
setDroppingPosition(void 0);
}, [layout, droppingItem.i, compactType, cols, allowOverlap]);
const handleDragOver = useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
if (isFirefox && !e.nativeEvent.target?.classList.contains(
layoutClassName
)) {
return false;
}
const rawResult = onDropDragOverProp(e);
if (rawResult === false) {
if (droppingDOMNode) {
removeDroppingPlaceholder();
}
return false;
}
const {
dragOffsetX = 0,
dragOffsetY = 0,
...onDragOverResult
} = rawResult ?? {};
const finalDroppingItem = { ...droppingItem, ...onDragOverResult };
const gridRect = e.currentTarget.getBoundingClientRect();
const positionParams = {
cols,
margin,
maxRows,
rowHeight,
containerWidth: width,
containerPadding: effectiveContainerPadding
};
const actualColWidth = calcGridColWidth(positionParams);
const itemPixelWidth = calcGridItemWHPx(
finalDroppingItem.w,
actualColWidth,
margin[0]
);
const itemPixelHeight = calcGridItemWHPx(
finalDroppingItem.h,
rowHeight,
margin[1]
);
const itemCenterOffsetX = itemPixelWidth / 2;
const itemCenterOffsetY = itemPixelHeight / 2;
const rawGridX = e.clientX - gridRect.left + dragOffsetX - itemCenterOffsetX;
const rawGridY = e.clientY - gridRect.top + dragOffsetY - itemCenterOffsetY;
const clampedGridX = Math.max(0, rawGridX);
const clampedGridY = Math.max(0, rawGridY);
const newDroppingPosition = {
left: clampedGridX / transformScale,
top: clampedGridY / transformScale,
e: e.nativeEvent
};
if (!droppingDOMNode) {
const calculatedPosition = calcXY(
positionParams,
clampedGridY,
clampedGridX,
finalDroppingItem.w,
finalDroppingItem.h
);
setDroppingDOMNode(/* @__PURE__ */ jsx("div", {}, finalDroppingItem.i));
setDroppingPosition(newDroppingPosition);
setLayout([
...layout,
{
...finalDroppingItem,
x: calculatedPosition.x,
y: calculatedPosition.y,
static: false,
isDraggable: true
}
]);
} else if (droppingPosition) {
const shouldUpdate = droppingPosition.left !== newDroppingPosition.left || droppingPosition.top !== newDroppingPosition.top;
if (shouldUpdate) {
setDroppingPosition(newDroppingPosition);
}
}
},
[
droppingDOMNode,
droppingPosition,
droppingItem,
onDropDragOverProp,
removeDroppingPlaceholder,
transformScale,
cols,
margin,
maxRows,
rowHeight,
width,
effectiveContainerPadding,
layout
]
);
const handleDragLeave = useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
dragEnterCounterRef.current--;
if (dragEnterCounterRef.current === 0) {
removeDroppingPlaceholder();
}
},
[removeDroppingPlaceholder]
);
const handleDragEnter = useCallback((e) => {
e.preventDefault();
e.stopPropagation();
dragEnterCounterRef.current++;
}, []);
const handleDrop = useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
const item = layout.find((l) => l.i === droppingItem.i);
dragEnterCounterRef.current = 0;
removeDroppingPlaceholder();
onDropProp(layout, item, e.nativeEvent);
},
[layout, droppingItem.i, removeDroppingPlaceholder, onDropProp]
);
const processGridItem = useCallback(
(child, isDroppingItem) => {
if (!child || !child.key) return null;
const l = getLayoutItem(layout, String(child.key));
if (!l) return null;
const draggable = typeof l.isDraggable === "boolean" ? l.isDraggable : !l.static && isDraggable;
const resizable = typeof l.isResizable === "boolean" ? l.isResizable : !l.static && isResizable;
const resizeHandlesOptions = l.resizeHandles || [...resizeHandles];
const bounded = draggable && isBounded && l.isBounded !== false;
const resizeHandleElement = resizeHandle;
return /* @__PURE__ */ jsx(
GridItem,
{
containerWidth: width,
cols,
margin,
containerPadding: effectiveContainerPadding,
maxRows,
rowHeight,
cancel: draggableCancel,
handle: draggableHandle,
onDragStart,
onDrag,
onDragStop,
onResizeStart,
onResize,
onResizeStop,
isDraggable: draggable,
isResizable: resizable,
isBounded: bounded,
useCSSTransforms: useCSSTransforms && mounted,
usePercentages: !mounted,
transformScale,
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i: l.i,
minH: l.minH,
minW: l.minW,
maxH: l.maxH,
maxW: l.maxW,
static: l.static,
droppingPosition: isDroppingItem ? droppingPosition : void 0,
resizeHandles: resizeHandlesOptions,
resizeHandle: resizeHandleElement,
constraints,
layoutItem: l,
layout,
children: child
},
l.i
);
},
[
layout,
width,
cols,
margin,
effectiveContainerPadding,
maxRows,
rowHeight,
draggableCancel,
draggableHandle,
onDragStart,
onDrag,
onDragStop,
onResizeStart,
onResize,
onResizeStop,
isDraggable,
isResizable,
isBounded,
useCSSTransforms,
mounted,
transformScale,
droppingPosition,
resizeHandles,
resizeHandle,
constraints
]
);
const renderPlaceholder = () => {
if (!activeDrag) return null;
return /* @__PURE__ */ jsx(
GridItem,
{
w: activeDrag.w,
h: activeDrag.h,
x: activeDrag.x,
y: activeDrag.y,
i: activeDrag.i,
className: `react-grid-placeholder ${resizing ? "placeholder-resizing" : ""}`,
containerWidth: width,
cols,
margin,
containerPadding: effectiveContainerPadding,
maxRows,
rowHeight,
isDraggable: false,
isResizable: false,
isBounded: false,
useCSSTransforms,
transformScale,
constraints,
layout,
children: /* @__PURE__ */ jsx("div", {})
}
);
};
const mergedClassName = clsx(layoutClassName, className);
const mergedStyle = {
height: containerHeight,
...style
};
return /* @__PURE__ */ jsxs(
"div",
{
ref: innerRef,
className: mergedClassName,
style: mergedStyle,
onDrop: isDroppable ? handleDrop : void 0,
onDragLeave: isDroppable ? handleDragLeave : void 0,
onDragEnter: isDroppable ? handleDragEnter : void 0,
onDragOver: isDroppable ? handleDragOver : void 0,
children: [
React2.Children.map(children, (child) => {
if (!React2.isValidElement(child)) return null;
return processGridItem(child);
}),
isDroppable && droppingDOMNode && processGridItem(droppingDOMNode, true),
renderPlaceholder()
]
}
);
}
var DEFAULT_BREAKPOINTS = {
lg: 1200,
md: 996,
sm: 768,
xs: 480,
xxs: 0
};
var DEFAULT_COLS = {
lg: 12,
md: 10,
sm: 6,
xs: 4,
xxs: 2
};
var noop2 = () => {
};
function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactType, allowOverlap) {
const layout = [];
React2.Children.forEach(children, (child) => {
if (!React2.isValidElement(child) || child.key === null) return;
const key = String(child.key);
const existingItem = initialLayout.find((l) => l.i === key);
if (existingItem) {
layout.push({
...existingItem,
i: key
});
} else {
const childProps = child.props;
const dataGrid = childProps["data-grid"];
if (dataGrid) {
layout.push({
i: key,
x: dataGrid.x ?? 0,
y: dataGrid.y ?? 0,
w: dataGrid.w ?? 1,
h: dataGrid.h ?? 1,
minW: dataGrid.minW,
maxW: dataGrid.maxW,
minH: dataGrid.minH,
maxH: dataGrid.maxH,
static: dataGrid.static,
isDraggable: dataGrid.isDraggable,
isResizable: dataGrid.isResizable,
resizeHandles: dataGrid.resizeHandles,
isBounded: dataGrid.isBounded
});
} else {
layout.push({
i: key,
x: 0,
y: bottom(layout),
w: 1,
h: 1
});
}
}
});
const corrected = correctBounds(layout, { cols });
return compact(corrected, compactType, cols, allowOverlap);
}
function ResponsiveGridLayout(props) {
const {
children,
width,
breakpoint: propBreakpoint,
breakpoints = DEFAULT_BREAKPOINTS,
cols: colsConfig = DEFAULT_COLS,
layouts: propsLayouts = {},
rowHeight = 150,
maxRows = Infinity,
margin: propMargin = [10, 10],
containerPadding: propContainerPadding = null,
compactor: compactorProp,
onBreakpointChange = noop2,
onLayoutChange = noop2,
onWidthChange = noop2,
...restProps
} = props;
const compactor = compactorProp ?? getCompactor("vertical");
const compactType = compactor.type;
const allowOverlap = compactor.allowOverlap;
const initialBreakpoint = useMemo(() => {
return propBreakpoint ?? getBreakpointFromWidth(breakpoints, width);
}, []);
const initialCols = useMemo(() => {
return getColsFromBreakpoint(initialBreakpoint, colsConfig);
}, [initialBreakpoint, colsConfig]);
const initialLayout = useMemo(() => {
return findOrGenerateResponsiveLayout(
propsLayouts,
breakpoints,
initialBreakpoint,
initialBreakpoint,
initialCols,
compactType
);
}, []);
const [breakpoint, setBreakpoint] = useState(initialBreakpoint);
const [cols, setCols] = useState(initialCols);
const [layout, setLayout] = useState(initialLayout);
const [layouts, setLayouts] = useState(propsLayouts);
const prevWidthRef = useRef(width);
const prevBreakpointRef = useRef(propBreakpoint);
const prevBreakpointsRef = useRef(breakpoints);
const prevColsRef = useRef(colsConfig);
const prevLayoutsRef = useRef(propsLayouts);
const prevCompactTypeRef = useRef(compactType);
const layoutsRef = useRef(layouts);
useEffect(() => {
layoutsRef.current = layouts;
}, [layouts]);
const derivedLayout = useMemo(() => {
if (!deepEqual(propsLayouts, prevLayoutsRef.current)) {
return findOrGenerateResponsiveLayout(
propsLayouts,
breakpoints,
breakpoint,
breakpoint,
cols,
compactType
);
}
return null;
}, [propsLayouts, breakpoints, breakpoint, cols, compactType]);
const effectiveLayout = derivedLayout ?? layout;
useEffect(() => {
if (derivedLayout !== null) {
setLayout(derivedLayout);
setLayouts(propsLayouts);
layoutsRef.current = propsLayouts;
prevLayoutsRef.current = propsLayouts;
}
}, [derivedLayout, propsLayouts]);
useEffect(() => {
if (compactType !== prevCompactTypeRef.current) {
const newLayout = compact(
cloneLayout(effectiveLayout),
compactType,
cols,
allowOverlap
);
const newLayouts = {
...layoutsRef.current,
[breakpoint]: newLayout
};
setLayout(newLayout);
setLayouts(newLayouts);
layoutsRef.current = newLayouts;
onLayoutChange(newLayout, newLayouts);
prevCompactTypeRef.current = compactType;
}
}, [
compactType,
effectiveLayout,
cols,
allowOverlap,
breakpoint,
onLayoutChange
]);
useEffect(() => {
const widthChanged = width !== prevWidthRef.current;
const breakpointPropChanged = propBreakpoint !== prevBreakpointRef.current;
const breakpointsChanged = !deepEqual(
breakpoints,
prevBreakpointsRef.current
);
const colsChanged = !deepEqual(colsConfig, prevColsRef.current);
if (widthChanged || breakpointPropChanged || breakpointsChanged || colsChanged) {
const newBreakpoint = propBreakpoint ?? getBreakpointFromWidth(breakpoints, width);
const newCols = getColsFromBreakpoint(newBreakpoint, colsConfig);
const lastBreakpoint = breakpoint;
if (lastBreakpoint !== newBreakpoint || breakpointsChanged || colsChanged) {
const newLayouts = { ...layoutsRef.current };
if (!newLayouts[lastBreakpoint]) {
newLayouts[lastBreakpoint] = cloneLayout(layout);
}
let newLayout = findOrGenerateResponsiveLayout(
newLayouts,
breakpoints,
newBreakpoint,
lastBreakpoint,
newCols,
compactType
);
newLayout = synchronizeLayoutWithChildren2(
newLayout,
children,
newCols,
compactType,
allowOverlap
);
newLayouts[newBreakpoint] = newLayout;
setBreakpoint(newBreakpoint);
setCols(newCols);
setLayout(newLayout);
setLayouts(newLayouts);
layoutsRef.current = newLayouts;
onBreakpointChange(newBreakpoint, newCols);
onLayoutChange(newLayout, newLayouts);
}
const currentMargin2 = getIndentationValue(
propMargin,
newBreakpoint
);
const currentPadding = propContainerPadding ? getIndentationValue(
propContainerPadding,
newBreakpoint
) : null;
onWidthChange(width, currentMargin2, newCols, currentPadding);
prevWidthRef.current = width;
prevBreakpointRef.current = propBreakpoint;
prevBreakpointsRef.current = breakpoints;
prevColsRef.current = colsConfig;
}
}, [
width,
propBreakpoint,
breakpoints,
colsConfig,
breakpoint,
cols,
layout,
children,
compactType,
allowOverlap,
propMargin,
propContainerPadding,
onBreakpointChange,
onLayoutChange,
onWidthChange
]);
const handleLayoutChange = useCallback(
(newLayout) => {
const currentLayouts = layoutsRef.current;
const newLayouts = {
...currentLayouts,
[breakpoint]: newLayout
};
setLayout(newLayout);
setLayouts(newLayouts);
layoutsRef.current = newLayouts;
onLayoutChange(newLayout, newLayouts);
},
[breakpoint, onLayoutChange]
);
const currentMargin = useMemo(() => {
return getIndentationValue(
propMargin,
breakpoint
);
}, [propMargin, breakpoint]);
const currentContainerPadding = useMemo(() => {
if (propContainerPadding === null) return null;
return getIndentationValue(
propContainerPadding,
breakpoint
);
}, [propContainerPadding, breakpoint]);
const gridConfig = useMemo(
() => ({
cols,
rowHeight,
maxRows,
margin: currentMargin,
containerPadding: currentContainerPadding
}),
[cols, rowHeight, maxRows, currentMargin, currentContainerPadding]
);
return /* @__PURE__ */ jsx(
GridLayout,
{
...restProps,
width,
gridConfig,
compactor,
onLayoutChange: handleLayoutChange,
layout: effectiveLayout,
children
}
);
}
export { GridItem, GridLayout, ResponsiveGridLayout };
//# sourceMappingURL=chunk-MXXN7GUE.mjs.map
//# sourceMappingURL=chunk-MXXN7GUE.mjs.map

Sorry, the diff of this file is too big to display

'use strict';
var chunkFN6MIZ24_js = require('./chunk-FN6MIZ24.js');
var chunkBJFPTW5Q_js = require('./chunk-BJFPTW5Q.js');
var React2 = require('react');
var reactDraggable = require('react-draggable');
var reactResizable = require('react-resizable');
var clsx = require('clsx');
var jsxRuntime = require('react/jsx-runtime');
var fastEquals = require('fast-equals');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React2__default = /*#__PURE__*/_interopDefault(React2);
var clsx__default = /*#__PURE__*/_interopDefault(clsx);
function GridItem(props) {
const {
children,
cols,
containerWidth,
margin,
containerPadding,
rowHeight,
maxRows,
isDraggable,
isResizable,
isBounded,
static: isStatic,
useCSSTransforms = true,
usePercentages = false,
transformScale = 1,
droppingPosition,
className = "",
style,
handle = "",
cancel = "",
x,
y,
w,
h,
minW = 1,
maxW = Infinity,
minH = 1,
maxH = Infinity,
i,
resizeHandles,
resizeHandle,
constraints = chunkFN6MIZ24_js.defaultConstraints,
layoutItem,
layout = [],
onDragStart: onDragStartProp,
onDrag: onDragProp,
onDragStop: onDragStopProp,
onResizeStart: onResizeStartProp,
onResize: onResizeProp,
onResizeStop: onResizeStopProp
} = props;
const [dragging, setDragging] = React2.useState(false);
const [resizing, setResizing] = React2.useState(false);
const elementRef = React2.useRef(null);
const dragPositionRef = React2.useRef({ left: 0, top: 0 });
const resizePositionRef = React2.useRef({
top: 0,
left: 0,
width: 0,
height: 0
});
const prevDroppingPositionRef = React2.useRef(
void 0
);
const positionParams = React2.useMemo(
() => ({
cols,
containerPadding,
containerWidth,
margin,
maxRows,
rowHeight
}),
[cols, containerPadding, containerWidth, margin, maxRows, rowHeight]
);
const constraintContext = React2.useMemo(
() => ({
cols,
maxRows,
containerWidth,
containerHeight: 0,
// Auto-height grids don't have a fixed container height
rowHeight,
margin,
layout
}),
[cols, maxRows, containerWidth, rowHeight, margin, layout]
);
const effectiveLayoutItem = React2.useMemo(
() => layoutItem ?? {
i,
x,
y,
w,
h,
minW,
maxW,
minH,
maxH
},
[layoutItem, i, x, y, w, h, minW, maxW, minH, maxH]
);
const createStyle = React2.useCallback(
(pos2) => {
if (useCSSTransforms) {
return chunkFN6MIZ24_js.setTransform(pos2);
}
const styleObj = chunkFN6MIZ24_js.setTopLeft(pos2);
if (usePercentages) {
return {
...styleObj,
left: chunkFN6MIZ24_js.perc(pos2.left / containerWidth),
width: chunkFN6MIZ24_js.perc(pos2.width / containerWidth)
};
}
return styleObj;
},
[useCSSTransforms, usePercentages, containerWidth]
);
const onDragStart = React2.useCallback(
(e, { node }) => {
if (!onDragStartProp) return;
const { offsetParent } = node;
if (!offsetParent) return;
const parentRect = offsetParent.getBoundingClientRect();
const clientRect = node.getBoundingClientRect();
const cLeft = clientRect.left / transformScale;
const pLeft = parentRect.left / transformScale;
const cTop = clientRect.top / transformScale;
const pTop = parentRect.top / transformScale;
const newPosition = {
left: cLeft - pLeft + offsetParent.scrollLeft,
top: cTop - pTop + offsetParent.scrollTop
};
dragPositionRef.current = newPosition;
setDragging(true);
const rawPos = chunkBJFPTW5Q_js.calcXYRaw(
positionParams,
newPosition.top,
newPosition.left
);
const { x: newX, y: newY } = chunkFN6MIZ24_js.applyPositionConstraints(
constraints,
effectiveLayoutItem,
rawPos.x,
rawPos.y,
constraintContext
);
onDragStartProp(i, newX, newY, {
e,
node,
newPosition
});
},
[
onDragStartProp,
transformScale,
positionParams,
constraints,
effectiveLayoutItem,
constraintContext,
i
]
);
const onDrag = React2.useCallback(
(e, { node, deltaX, deltaY }) => {
if (!onDragProp || !dragging) return;
let top = dragPositionRef.current.top + deltaY;
let left = dragPositionRef.current.left + deltaX;
if (isBounded) {
const { offsetParent } = node;
if (offsetParent) {
const bottomBoundary = offsetParent.clientHeight - chunkBJFPTW5Q_js.calcGridItemWHPx(h, rowHeight, margin[1]);
top = chunkBJFPTW5Q_js.clamp(top, 0, bottomBoundary);
const colWidth = chunkBJFPTW5Q_js.calcGridColWidth(positionParams);
const rightBoundary = containerWidth - chunkBJFPTW5Q_js.calcGridItemWHPx(w, colWidth, margin[0]);
left = chunkBJFPTW5Q_js.clamp(left, 0, rightBoundary);
}
}
const newPosition = { top, left };
dragPositionRef.current = newPosition;
const rawPos = chunkBJFPTW5Q_js.calcXYRaw(positionParams, top, left);
const { x: newX, y: newY } = chunkFN6MIZ24_js.applyPositionConstraints(
constraints,
effectiveLayoutItem,
rawPos.x,
rawPos.y,
constraintContext
);
onDragProp(i, newX, newY, {
e,
node,
newPosition
});
},
[
onDragProp,
dragging,
isBounded,
h,
rowHeight,
margin,
positionParams,
containerWidth,
w,
i,
constraints,
effectiveLayoutItem,
constraintContext
]
);
const onDragStop = React2.useCallback(
(e, { node }) => {
if (!onDragStopProp || !dragging) return;
const { left, top } = dragPositionRef.current;
const newPosition = { top, left };
setDragging(false);
dragPositionRef.current = { left: 0, top: 0 };
const rawPos = chunkBJFPTW5Q_js.calcXYRaw(positionParams, top, left);
const { x: newX, y: newY } = chunkFN6MIZ24_js.applyPositionConstraints(
constraints,
effectiveLayoutItem,
rawPos.x,
rawPos.y,
constraintContext
);
onDragStopProp(i, newX, newY, {
e,
node,
newPosition
});
},
[
onDragStopProp,
dragging,
positionParams,
constraints,
effectiveLayoutItem,
constraintContext,
i
]
);
const onResizeHandler = React2.useCallback(
(e, { node, size, handle: resizeHandle2 }, position, handlerName) => {
const handler = handlerName === "onResizeStart" ? onResizeStartProp : handlerName === "onResize" ? onResizeProp : onResizeStopProp;
if (!handler) return;
let updatedSize;
if (node) {
updatedSize = chunkFN6MIZ24_js.resizeItemInDirection(
resizeHandle2,
position,
size,
containerWidth
);
} else {
updatedSize = {
...size,
top: position.top,
left: position.left
};
}
resizePositionRef.current = updatedSize;
const rawSize = chunkBJFPTW5Q_js.calcWHRaw(
positionParams,
updatedSize.width,
updatedSize.height
);
const { w: newW, h: newH } = chunkFN6MIZ24_js.applySizeConstraints(
constraints,
effectiveLayoutItem,
rawSize.w,
rawSize.h,
resizeHandle2,
constraintContext
);
handler(i, newW, newH, {
e: e.nativeEvent,
node,
size: updatedSize,
handle: resizeHandle2
});
},
[
onResizeStartProp,
onResizeProp,
onResizeStopProp,
containerWidth,
positionParams,
x,
y,
i,
constraints,
effectiveLayoutItem,
constraintContext
]
);
const handleResizeStart = React2.useCallback(
(e, data) => {
setResizing(true);
const pos2 = chunkBJFPTW5Q_js.calcGridItemPosition(positionParams, x, y, w, h);
const typedData = {
...data,
handle: data.handle
};
onResizeHandler(e, typedData, pos2, "onResizeStart");
},
[onResizeHandler, positionParams, x, y, w, h]
);
const handleResize = React2.useCallback(
(e, data) => {
const pos2 = chunkBJFPTW5Q_js.calcGridItemPosition(positionParams, x, y, w, h);
const typedData = {
...data,
handle: data.handle
};
onResizeHandler(e, typedData, pos2, "onResize");
},
[onResizeHandler, positionParams, x, y, w, h]
);
const handleResizeStop = React2.useCallback(
(e, data) => {
setResizing(false);
resizePositionRef.current = { top: 0, left: 0, width: 0, height: 0 };
const pos2 = chunkBJFPTW5Q_js.calcGridItemPosition(positionParams, x, y, w, h);
const typedData = {
...data,
handle: data.handle
};
onResizeHandler(e, typedData, pos2, "onResizeStop");
},
[onResizeHandler, positionParams, x, y, w, h]
);
React2.useEffect(() => {
if (!droppingPosition) return;
const node = elementRef.current;
if (!node) return;
const prevDroppingPosition = prevDroppingPositionRef.current || {
left: 0,
top: 0
};
const shouldDrag = dragging && (droppingPosition.left !== prevDroppingPosition.left || droppingPosition.top !== prevDroppingPosition.top);
if (!dragging) {
const fakeData = {
node,
deltaX: droppingPosition.left,
deltaY: droppingPosition.top,
lastX: 0,
lastY: 0,
x: droppingPosition.left,
y: droppingPosition.top
};
onDragStart(droppingPosition.e, fakeData);
} else if (shouldDrag) {
const deltaX = droppingPosition.left - dragPositionRef.current.left;
const deltaY = droppingPosition.top - dragPositionRef.current.top;
const fakeData = {
node,
deltaX,
deltaY,
lastX: dragPositionRef.current.left,
lastY: dragPositionRef.current.top,
x: droppingPosition.left,
y: droppingPosition.top
};
onDrag(droppingPosition.e, fakeData);
}
prevDroppingPositionRef.current = droppingPosition;
}, [droppingPosition, dragging, onDragStart, onDrag]);
const pos = chunkBJFPTW5Q_js.calcGridItemPosition(
positionParams,
x,
y,
w,
h,
dragging ? dragPositionRef.current : null,
resizing ? resizePositionRef.current : null
);
const child = React2__default.default.Children.only(children);
const minGridUnit = chunkBJFPTW5Q_js.calcGridItemPosition(positionParams, 0, 0, 1, 1);
const minConstraints = [
minGridUnit.width,
minGridUnit.height
];
const maxConstraints = [Infinity, Infinity];
const childProps = child.props;
const childClassName = childProps["className"];
const childStyle = childProps["style"];
let newChild = React2__default.default.cloneElement(child, {
ref: elementRef,
className: clsx__default.default("react-grid-item", childClassName, className, {
static: isStatic,
resizing,
"react-draggable": isDraggable,
"react-draggable-dragging": dragging,
dropping: Boolean(droppingPosition),
cssTransforms: useCSSTransforms
}),
style: {
...style,
...childStyle,
...createStyle(pos)
}
});
const resizableHandle = resizeHandle;
newChild = /* @__PURE__ */ jsxRuntime.jsx(
reactResizable.Resizable,
{
draggableOpts: { disabled: !isResizable },
className: isResizable ? void 0 : "react-resizable-hide",
width: pos.width,
height: pos.height,
minConstraints,
maxConstraints,
onResizeStart: handleResizeStart,
onResize: handleResize,
onResizeStop: handleResizeStop,
transformScale,
resizeHandles,
handle: resizableHandle,
children: newChild
}
);
newChild = /* @__PURE__ */ jsxRuntime.jsx(
reactDraggable.DraggableCore,
{
disabled: !isDraggable,
onStart: onDragStart,
onDrag,
onStop: onDragStop,
handle,
cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""),
scale: transformScale,
nodeRef: elementRef,
children: newChild
}
);
return newChild;
}
var noop = () => {
};
var layoutClassName = "react-grid-layout";
var isFirefox = false;
try {
isFirefox = /firefox/i.test(navigator.userAgent);
} catch {
}
function childrenEqual(a, b) {
const aArr = React2__default.default.Children.toArray(a);
const bArr = React2__default.default.Children.toArray(b);
if (aArr.length !== bArr.length) return false;
for (let i = 0; i < aArr.length; i++) {
const aChild = aArr[i];
const bChild = bArr[i];
if (aChild?.key !== bChild?.key) return false;
}
return true;
}
function synchronizeLayoutWithChildren(initialLayout, children, cols, compactType, allowOverlap) {
const layout = [];
const childKeys = /* @__PURE__ */ new Set();
React2__default.default.Children.forEach(children, (child) => {
if (!React2__default.default.isValidElement(child) || child.key === null) return;
const key = String(child.key);
childKeys.add(key);
const existingItem = initialLayout.find((l) => l.i === key);
if (existingItem) {
layout.push(chunkBJFPTW5Q_js.cloneLayoutItem(existingItem));
} else {
const childProps = child.props;
const dataGrid = childProps["data-grid"];
if (dataGrid) {
layout.push({
i: key,
x: dataGrid.x ?? 0,
y: dataGrid.y ?? 0,
w: dataGrid.w ?? 1,
h: dataGrid.h ?? 1,
minW: dataGrid.minW,
maxW: dataGrid.maxW,
minH: dataGrid.minH,
maxH: dataGrid.maxH,
static: dataGrid.static,
isDraggable: dataGrid.isDraggable,
isResizable: dataGrid.isResizable,
resizeHandles: dataGrid.resizeHandles,
isBounded: dataGrid.isBounded
});
} else {
layout.push({
i: key,
x: 0,
y: chunkBJFPTW5Q_js.bottom(layout),
w: 1,
h: 1
});
}
}
});
const corrected = chunkBJFPTW5Q_js.correctBounds(layout, { cols });
return chunkFN6MIZ24_js.compact(corrected, compactType, cols, allowOverlap);
}
function GridLayout(props) {
const {
// Required
children,
width,
// Composable config interfaces
gridConfig: gridConfigProp,
dragConfig: dragConfigProp,
resizeConfig: resizeConfigProp,
dropConfig: dropConfigProp,
positionStrategy = chunkFN6MIZ24_js.defaultPositionStrategy,
compactor: compactorProp,
constraints = chunkFN6MIZ24_js.defaultConstraints,
// Layout data
layout: propsLayout = [],
droppingItem: droppingItemProp,
// Container props
autoSize = true,
className = "",
style = {},
innerRef,
// Callbacks
onLayoutChange = noop,
onDragStart: onDragStartProp = noop,
onDrag: onDragProp = noop,
onDragStop: onDragStopProp = noop,
onResizeStart: onResizeStartProp = noop,
onResize: onResizeProp = noop,
onResizeStop: onResizeStopProp = noop,
onDrop: onDropProp = noop,
onDropDragOver: onDropDragOverProp = noop
} = props;
const gridConfig = React2.useMemo(
() => ({ ...chunkFN6MIZ24_js.defaultGridConfig, ...gridConfigProp }),
[gridConfigProp]
);
const dragConfig = React2.useMemo(
() => ({ ...chunkFN6MIZ24_js.defaultDragConfig, ...dragConfigProp }),
[dragConfigProp]
);
const resizeConfig = React2.useMemo(
() => ({ ...chunkFN6MIZ24_js.defaultResizeConfig, ...resizeConfigProp }),
[resizeConfigProp]
);
const dropConfig = React2.useMemo(
() => ({ ...chunkFN6MIZ24_js.defaultDropConfig, ...dropConfigProp }),
[dropConfigProp]
);
const { cols, rowHeight, maxRows, margin, containerPadding } = gridConfig;
const {
enabled: isDraggable,
bounded: isBounded,
handle: draggableHandle,
cancel: draggableCancel
} = dragConfig;
const {
enabled: isResizable,
handles: resizeHandles,
handleComponent: resizeHandle
} = resizeConfig;
const { enabled: isDroppable, defaultItem: defaultDropItem } = dropConfig;
const compactor = compactorProp ?? chunkFN6MIZ24_js.getCompactor("vertical");
const compactType = compactor.type;
const allowOverlap = compactor.allowOverlap;
const preventCollision = compactor.preventCollision ?? false;
const droppingItem = React2.useMemo(
() => droppingItemProp ?? {
i: "__dropping-elem__",
...defaultDropItem
},
[droppingItemProp, defaultDropItem]
);
const useCSSTransforms = positionStrategy.type === "transform";
const transformScale = positionStrategy.scale;
const effectiveContainerPadding = containerPadding ?? margin;
const [mounted, setMounted] = React2.useState(false);
const [layout, setLayout] = React2.useState(
() => synchronizeLayoutWithChildren(
propsLayout,
children,
cols,
compactType,
allowOverlap
)
);
const [activeDrag, setActiveDrag] = React2.useState(null);
const [resizing, setResizing] = React2.useState(false);
const [droppingDOMNode, setDroppingDOMNode] = React2.useState(
null
);
const [droppingPosition, setDroppingPosition] = React2.useState();
const oldDragItemRef = React2.useRef(null);
const oldResizeItemRef = React2.useRef(null);
const oldLayoutRef = React2.useRef(null);
const dragEnterCounterRef = React2.useRef(0);
const prevLayoutRef = React2.useRef(layout);
const prevPropsLayoutRef = React2.useRef(propsLayout);
const prevChildrenRef = React2.useRef(children);
const prevCompactTypeRef = React2.useRef(compactType);
React2.useEffect(() => {
setMounted(true);
if (!fastEquals.deepEqual(layout, propsLayout)) {
onLayoutChange(layout);
}
}, []);
React2.useEffect(() => {
if (activeDrag) return;
const layoutChanged = !fastEquals.deepEqual(propsLayout, prevPropsLayoutRef.current);
const childrenChanged = !childrenEqual(children, prevChildrenRef.current);
const compactTypeChanged = compactType !== prevCompactTypeRef.current;
if (layoutChanged || childrenChanged || compactTypeChanged) {
const baseLayout = layoutChanged ? propsLayout : layout;
const newLayout = synchronizeLayoutWithChildren(
baseLayout,
children,
cols,
compactType,
allowOverlap
);
setLayout(newLayout);
}
prevPropsLayoutRef.current = propsLayout;
prevChildrenRef.current = children;
prevCompactTypeRef.current = compactType;
}, [
propsLayout,
children,
cols,
compactType,
allowOverlap,
activeDrag,
layout
]);
React2.useEffect(() => {
if (!activeDrag && !fastEquals.deepEqual(layout, prevLayoutRef.current)) {
prevLayoutRef.current = layout;
onLayoutChange(layout);
}
}, [layout, activeDrag, onLayoutChange]);
const containerHeight = React2.useMemo(() => {
if (!autoSize) return void 0;
const nbRow = chunkBJFPTW5Q_js.bottom(layout);
const containerPaddingY = effectiveContainerPadding[1];
return nbRow * rowHeight + (nbRow - 1) * margin[1] + containerPaddingY * 2 + "px";
}, [autoSize, layout, rowHeight, margin, effectiveContainerPadding]);
const onDragStart = React2.useCallback(
(i, _x, _y, data) => {
const l = chunkBJFPTW5Q_js.getLayoutItem(layout, i);
if (!l) return;
const placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i
};
oldDragItemRef.current = chunkBJFPTW5Q_js.cloneLayoutItem(l);
oldLayoutRef.current = layout;
setActiveDrag(placeholder);
onDragStartProp(layout, l, l, null, data.e, data.node);
},
[layout, onDragStartProp]
);
const onDrag = React2.useCallback(
(i, x, y, data) => {
const oldDragItem = oldDragItemRef.current;
const l = chunkBJFPTW5Q_js.getLayoutItem(layout, i);
if (!l) return;
const placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i
};
const newLayout = chunkBJFPTW5Q_js.moveElement(
layout,
l,
x,
y,
true,
preventCollision,
compactType,
cols,
allowOverlap
);
onDragProp(newLayout, oldDragItem, l, placeholder, data.e, data.node);
setLayout(
allowOverlap ? newLayout : chunkFN6MIZ24_js.compact(newLayout, compactType, cols)
);
setActiveDrag(placeholder);
},
[layout, preventCollision, compactType, cols, allowOverlap, onDragProp]
);
const onDragStop = React2.useCallback(
(i, x, y, data) => {
if (!activeDrag) return;
const oldDragItem = oldDragItemRef.current;
const l = chunkBJFPTW5Q_js.getLayoutItem(layout, i);
if (!l) return;
const newLayout = chunkBJFPTW5Q_js.moveElement(
layout,
l,
x,
y,
true,
preventCollision,
compactType,
cols,
allowOverlap
);
const finalLayout = allowOverlap ? newLayout : chunkFN6MIZ24_js.compact(newLayout, compactType, cols);
onDragStopProp(finalLayout, oldDragItem, l, null, data.e, data.node);
const oldLayout = oldLayoutRef.current;
oldDragItemRef.current = null;
oldLayoutRef.current = null;
setActiveDrag(null);
setLayout(finalLayout);
if (oldLayout && !fastEquals.deepEqual(oldLayout, finalLayout)) {
onLayoutChange(finalLayout);
}
},
[
activeDrag,
layout,
preventCollision,
compactType,
cols,
allowOverlap,
onDragStopProp,
onLayoutChange
]
);
const onResizeStart = React2.useCallback(
(i, _w, _h, data) => {
const l = chunkBJFPTW5Q_js.getLayoutItem(layout, i);
if (!l) return;
oldResizeItemRef.current = chunkBJFPTW5Q_js.cloneLayoutItem(l);
oldLayoutRef.current = layout;
setResizing(true);
onResizeStartProp(layout, l, l, null, data.e, data.node);
},
[layout, onResizeStartProp]
);
const onResize = React2.useCallback(
(i, w, h, data) => {
const oldResizeItem = oldResizeItemRef.current;
const { handle } = data;
let shouldMoveItem = false;
let newX;
let newY;
const [newLayout, l] = chunkBJFPTW5Q_js.withLayoutItem(layout, i, (item) => {
newX = item.x;
newY = item.y;
if (["sw", "w", "nw", "n", "ne"].includes(handle)) {
if (["sw", "nw", "w"].includes(handle)) {
newX = item.x + (item.w - w);
w = item.x !== newX && newX < 0 ? item.w : w;
newX = newX < 0 ? 0 : newX;
}
if (["ne", "n", "nw"].includes(handle)) {
newY = item.y + (item.h - h);
h = item.y !== newY && newY < 0 ? item.h : h;
newY = newY < 0 ? 0 : newY;
}
shouldMoveItem = true;
}
if (preventCollision && !allowOverlap) {
const collisions = chunkBJFPTW5Q_js.getAllCollisions(layout, {
...item,
w,
h,
x: newX ?? item.x,
y: newY ?? item.y
}).filter((layoutItem) => layoutItem.i !== item.i);
if (collisions.length > 0) {
newY = item.y;
h = item.h;
newX = item.x;
w = item.w;
shouldMoveItem = false;
}
}
item.w = w;
item.h = h;
return item;
});
if (!l) return;
let finalLayout = newLayout;
if (shouldMoveItem && newX !== void 0 && newY !== void 0) {
finalLayout = chunkBJFPTW5Q_js.moveElement(
newLayout,
l,
newX,
newY,
true,
preventCollision,
compactType,
cols,
allowOverlap
);
}
const placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i,
static: true
};
onResizeProp(
finalLayout,
oldResizeItem,
l,
placeholder,
data.e,
data.node
);
setLayout(
allowOverlap ? finalLayout : chunkFN6MIZ24_js.compact(finalLayout, compactType, cols)
);
setActiveDrag(placeholder);
},
[layout, preventCollision, allowOverlap, compactType, cols, onResizeProp]
);
const onResizeStop = React2.useCallback(
(i, _w, _h, data) => {
const oldResizeItem = oldResizeItemRef.current;
const l = chunkBJFPTW5Q_js.getLayoutItem(layout, i);
const finalLayout = allowOverlap ? layout : chunkFN6MIZ24_js.compact(layout, compactType, cols);
onResizeStopProp(
finalLayout,
oldResizeItem,
l ?? null,
null,
data.e,
data.node
);
const oldLayout = oldLayoutRef.current;
oldResizeItemRef.current = null;
oldLayoutRef.current = null;
setActiveDrag(null);
setResizing(false);
setLayout(finalLayout);
if (oldLayout && !fastEquals.deepEqual(oldLayout, finalLayout)) {
onLayoutChange(finalLayout);
}
},
[layout, allowOverlap, compactType, cols, onResizeStopProp, onLayoutChange]
);
const removeDroppingPlaceholder = React2.useCallback(() => {
const newLayout = chunkFN6MIZ24_js.compact(
layout.filter((l) => l.i !== droppingItem.i),
compactType,
cols,
allowOverlap
);
setLayout(newLayout);
setDroppingDOMNode(null);
setActiveDrag(null);
setDroppingPosition(void 0);
}, [layout, droppingItem.i, compactType, cols, allowOverlap]);
const handleDragOver = React2.useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
if (isFirefox && !e.nativeEvent.target?.classList.contains(
layoutClassName
)) {
return false;
}
const rawResult = onDropDragOverProp(e);
if (rawResult === false) {
if (droppingDOMNode) {
removeDroppingPlaceholder();
}
return false;
}
const {
dragOffsetX = 0,
dragOffsetY = 0,
...onDragOverResult
} = rawResult ?? {};
const finalDroppingItem = { ...droppingItem, ...onDragOverResult };
const gridRect = e.currentTarget.getBoundingClientRect();
const positionParams = {
cols,
margin,
maxRows,
rowHeight,
containerWidth: width,
containerPadding: effectiveContainerPadding
};
const actualColWidth = chunkBJFPTW5Q_js.calcGridColWidth(positionParams);
const itemPixelWidth = chunkBJFPTW5Q_js.calcGridItemWHPx(
finalDroppingItem.w,
actualColWidth,
margin[0]
);
const itemPixelHeight = chunkBJFPTW5Q_js.calcGridItemWHPx(
finalDroppingItem.h,
rowHeight,
margin[1]
);
const itemCenterOffsetX = itemPixelWidth / 2;
const itemCenterOffsetY = itemPixelHeight / 2;
const rawGridX = e.clientX - gridRect.left + dragOffsetX - itemCenterOffsetX;
const rawGridY = e.clientY - gridRect.top + dragOffsetY - itemCenterOffsetY;
const clampedGridX = Math.max(0, rawGridX);
const clampedGridY = Math.max(0, rawGridY);
const newDroppingPosition = {
left: clampedGridX / transformScale,
top: clampedGridY / transformScale,
e: e.nativeEvent
};
if (!droppingDOMNode) {
const calculatedPosition = chunkBJFPTW5Q_js.calcXY(
positionParams,
clampedGridY,
clampedGridX,
finalDroppingItem.w,
finalDroppingItem.h
);
setDroppingDOMNode(/* @__PURE__ */ jsxRuntime.jsx("div", {}, finalDroppingItem.i));
setDroppingPosition(newDroppingPosition);
setLayout([
...layout,
{
...finalDroppingItem,
x: calculatedPosition.x,
y: calculatedPosition.y,
static: false,
isDraggable: true
}
]);
} else if (droppingPosition) {
const shouldUpdate = droppingPosition.left !== newDroppingPosition.left || droppingPosition.top !== newDroppingPosition.top;
if (shouldUpdate) {
setDroppingPosition(newDroppingPosition);
}
}
},
[
droppingDOMNode,
droppingPosition,
droppingItem,
onDropDragOverProp,
removeDroppingPlaceholder,
transformScale,
cols,
margin,
maxRows,
rowHeight,
width,
effectiveContainerPadding,
layout
]
);
const handleDragLeave = React2.useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
dragEnterCounterRef.current--;
if (dragEnterCounterRef.current === 0) {
removeDroppingPlaceholder();
}
},
[removeDroppingPlaceholder]
);
const handleDragEnter = React2.useCallback((e) => {
e.preventDefault();
e.stopPropagation();
dragEnterCounterRef.current++;
}, []);
const handleDrop = React2.useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
const item = layout.find((l) => l.i === droppingItem.i);
dragEnterCounterRef.current = 0;
removeDroppingPlaceholder();
onDropProp(layout, item, e.nativeEvent);
},
[layout, droppingItem.i, removeDroppingPlaceholder, onDropProp]
);
const processGridItem = React2.useCallback(
(child, isDroppingItem) => {
if (!child || !child.key) return null;
const l = chunkBJFPTW5Q_js.getLayoutItem(layout, String(child.key));
if (!l) return null;
const draggable = typeof l.isDraggable === "boolean" ? l.isDraggable : !l.static && isDraggable;
const resizable = typeof l.isResizable === "boolean" ? l.isResizable : !l.static && isResizable;
const resizeHandlesOptions = l.resizeHandles || [...resizeHandles];
const bounded = draggable && isBounded && l.isBounded !== false;
const resizeHandleElement = resizeHandle;
return /* @__PURE__ */ jsxRuntime.jsx(
GridItem,
{
containerWidth: width,
cols,
margin,
containerPadding: effectiveContainerPadding,
maxRows,
rowHeight,
cancel: draggableCancel,
handle: draggableHandle,
onDragStart,
onDrag,
onDragStop,
onResizeStart,
onResize,
onResizeStop,
isDraggable: draggable,
isResizable: resizable,
isBounded: bounded,
useCSSTransforms: useCSSTransforms && mounted,
usePercentages: !mounted,
transformScale,
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i: l.i,
minH: l.minH,
minW: l.minW,
maxH: l.maxH,
maxW: l.maxW,
static: l.static,
droppingPosition: isDroppingItem ? droppingPosition : void 0,
resizeHandles: resizeHandlesOptions,
resizeHandle: resizeHandleElement,
constraints,
layoutItem: l,
layout,
children: child
},
l.i
);
},
[
layout,
width,
cols,
margin,
effectiveContainerPadding,
maxRows,
rowHeight,
draggableCancel,
draggableHandle,
onDragStart,
onDrag,
onDragStop,
onResizeStart,
onResize,
onResizeStop,
isDraggable,
isResizable,
isBounded,
useCSSTransforms,
mounted,
transformScale,
droppingPosition,
resizeHandles,
resizeHandle,
constraints
]
);
const renderPlaceholder = () => {
if (!activeDrag) return null;
return /* @__PURE__ */ jsxRuntime.jsx(
GridItem,
{
w: activeDrag.w,
h: activeDrag.h,
x: activeDrag.x,
y: activeDrag.y,
i: activeDrag.i,
className: `react-grid-placeholder ${resizing ? "placeholder-resizing" : ""}`,
containerWidth: width,
cols,
margin,
containerPadding: effectiveContainerPadding,
maxRows,
rowHeight,
isDraggable: false,
isResizable: false,
isBounded: false,
useCSSTransforms,
transformScale,
constraints,
layout,
children: /* @__PURE__ */ jsxRuntime.jsx("div", {})
}
);
};
const mergedClassName = clsx__default.default(layoutClassName, className);
const mergedStyle = {
height: containerHeight,
...style
};
return /* @__PURE__ */ jsxRuntime.jsxs(
"div",
{
ref: innerRef,
className: mergedClassName,
style: mergedStyle,
onDrop: isDroppable ? handleDrop : void 0,
onDragLeave: isDroppable ? handleDragLeave : void 0,
onDragEnter: isDroppable ? handleDragEnter : void 0,
onDragOver: isDroppable ? handleDragOver : void 0,
children: [
React2__default.default.Children.map(children, (child) => {
if (!React2__default.default.isValidElement(child)) return null;
return processGridItem(child);
}),
isDroppable && droppingDOMNode && processGridItem(droppingDOMNode, true),
renderPlaceholder()
]
}
);
}
var DEFAULT_BREAKPOINTS = {
lg: 1200,
md: 996,
sm: 768,
xs: 480,
xxs: 0
};
var DEFAULT_COLS = {
lg: 12,
md: 10,
sm: 6,
xs: 4,
xxs: 2
};
var noop2 = () => {
};
function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactType, allowOverlap) {
const layout = [];
React2__default.default.Children.forEach(children, (child) => {
if (!React2__default.default.isValidElement(child) || child.key === null) return;
const key = String(child.key);
const existingItem = initialLayout.find((l) => l.i === key);
if (existingItem) {
layout.push({
...existingItem,
i: key
});
} else {
const childProps = child.props;
const dataGrid = childProps["data-grid"];
if (dataGrid) {
layout.push({
i: key,
x: dataGrid.x ?? 0,
y: dataGrid.y ?? 0,
w: dataGrid.w ?? 1,
h: dataGrid.h ?? 1,
minW: dataGrid.minW,
maxW: dataGrid.maxW,
minH: dataGrid.minH,
maxH: dataGrid.maxH,
static: dataGrid.static,
isDraggable: dataGrid.isDraggable,
isResizable: dataGrid.isResizable,
resizeHandles: dataGrid.resizeHandles,
isBounded: dataGrid.isBounded
});
} else {
layout.push({
i: key,
x: 0,
y: chunkBJFPTW5Q_js.bottom(layout),
w: 1,
h: 1
});
}
}
});
const corrected = chunkBJFPTW5Q_js.correctBounds(layout, { cols });
return chunkFN6MIZ24_js.compact(corrected, compactType, cols, allowOverlap);
}
function ResponsiveGridLayout(props) {
const {
children,
width,
breakpoint: propBreakpoint,
breakpoints = DEFAULT_BREAKPOINTS,
cols: colsConfig = DEFAULT_COLS,
layouts: propsLayouts = {},
rowHeight = 150,
maxRows = Infinity,
margin: propMargin = [10, 10],
containerPadding: propContainerPadding = null,
compactor: compactorProp,
onBreakpointChange = noop2,
onLayoutChange = noop2,
onWidthChange = noop2,
...restProps
} = props;
const compactor = compactorProp ?? chunkFN6MIZ24_js.getCompactor("vertical");
const compactType = compactor.type;
const allowOverlap = compactor.allowOverlap;
const initialBreakpoint = React2.useMemo(() => {
return propBreakpoint ?? chunkFN6MIZ24_js.getBreakpointFromWidth(breakpoints, width);
}, []);
const initialCols = React2.useMemo(() => {
return chunkFN6MIZ24_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
}, [initialBreakpoint, colsConfig]);
const initialLayout = React2.useMemo(() => {
return chunkFN6MIZ24_js.findOrGenerateResponsiveLayout(
propsLayouts,
breakpoints,
initialBreakpoint,
initialBreakpoint,
initialCols,
compactType
);
}, []);
const [breakpoint, setBreakpoint] = React2.useState(initialBreakpoint);
const [cols, setCols] = React2.useState(initialCols);
const [layout, setLayout] = React2.useState(initialLayout);
const [layouts, setLayouts] = React2.useState(propsLayouts);
const prevWidthRef = React2.useRef(width);
const prevBreakpointRef = React2.useRef(propBreakpoint);
const prevBreakpointsRef = React2.useRef(breakpoints);
const prevColsRef = React2.useRef(colsConfig);
const prevLayoutsRef = React2.useRef(propsLayouts);
const prevCompactTypeRef = React2.useRef(compactType);
const layoutsRef = React2.useRef(layouts);
React2.useEffect(() => {
layoutsRef.current = layouts;
}, [layouts]);
const derivedLayout = React2.useMemo(() => {
if (!fastEquals.deepEqual(propsLayouts, prevLayoutsRef.current)) {
return chunkFN6MIZ24_js.findOrGenerateResponsiveLayout(
propsLayouts,
breakpoints,
breakpoint,
breakpoint,
cols,
compactType
);
}
return null;
}, [propsLayouts, breakpoints, breakpoint, cols, compactType]);
const effectiveLayout = derivedLayout ?? layout;
React2.useEffect(() => {
if (derivedLayout !== null) {
setLayout(derivedLayout);
setLayouts(propsLayouts);
layoutsRef.current = propsLayouts;
prevLayoutsRef.current = propsLayouts;
}
}, [derivedLayout, propsLayouts]);
React2.useEffect(() => {
if (compactType !== prevCompactTypeRef.current) {
const newLayout = chunkFN6MIZ24_js.compact(
chunkBJFPTW5Q_js.cloneLayout(effectiveLayout),
compactType,
cols,
allowOverlap
);
const newLayouts = {
...layoutsRef.current,
[breakpoint]: newLayout
};
setLayout(newLayout);
setLayouts(newLayouts);
layoutsRef.current = newLayouts;
onLayoutChange(newLayout, newLayouts);
prevCompactTypeRef.current = compactType;
}
}, [
compactType,
effectiveLayout,
cols,
allowOverlap,
breakpoint,
onLayoutChange
]);
React2.useEffect(() => {
const widthChanged = width !== prevWidthRef.current;
const breakpointPropChanged = propBreakpoint !== prevBreakpointRef.current;
const breakpointsChanged = !fastEquals.deepEqual(
breakpoints,
prevBreakpointsRef.current
);
const colsChanged = !fastEquals.deepEqual(colsConfig, prevColsRef.current);
if (widthChanged || breakpointPropChanged || breakpointsChanged || colsChanged) {
const newBreakpoint = propBreakpoint ?? chunkFN6MIZ24_js.getBreakpointFromWidth(breakpoints, width);
const newCols = chunkFN6MIZ24_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
const lastBreakpoint = breakpoint;
if (lastBreakpoint !== newBreakpoint || breakpointsChanged || colsChanged) {
const newLayouts = { ...layoutsRef.current };
if (!newLayouts[lastBreakpoint]) {
newLayouts[lastBreakpoint] = chunkBJFPTW5Q_js.cloneLayout(layout);
}
let newLayout = chunkFN6MIZ24_js.findOrGenerateResponsiveLayout(
newLayouts,
breakpoints,
newBreakpoint,
lastBreakpoint,
newCols,
compactType
);
newLayout = synchronizeLayoutWithChildren2(
newLayout,
children,
newCols,
compactType,
allowOverlap
);
newLayouts[newBreakpoint] = newLayout;
setBreakpoint(newBreakpoint);
setCols(newCols);
setLayout(newLayout);
setLayouts(newLayouts);
layoutsRef.current = newLayouts;
onBreakpointChange(newBreakpoint, newCols);
onLayoutChange(newLayout, newLayouts);
}
const currentMargin2 = chunkFN6MIZ24_js.getIndentationValue(
propMargin,
newBreakpoint
);
const currentPadding = propContainerPadding ? chunkFN6MIZ24_js.getIndentationValue(
propContainerPadding,
newBreakpoint
) : null;
onWidthChange(width, currentMargin2, newCols, currentPadding);
prevWidthRef.current = width;
prevBreakpointRef.current = propBreakpoint;
prevBreakpointsRef.current = breakpoints;
prevColsRef.current = colsConfig;
}
}, [
width,
propBreakpoint,
breakpoints,
colsConfig,
breakpoint,
cols,
layout,
children,
compactType,
allowOverlap,
propMargin,
propContainerPadding,
onBreakpointChange,
onLayoutChange,
onWidthChange
]);
const handleLayoutChange = React2.useCallback(
(newLayout) => {
const currentLayouts = layoutsRef.current;
const newLayouts = {
...currentLayouts,
[breakpoint]: newLayout
};
setLayout(newLayout);
setLayouts(newLayouts);
layoutsRef.current = newLayouts;
onLayoutChange(newLayout, newLayouts);
},
[breakpoint, onLayoutChange]
);
const currentMargin = React2.useMemo(() => {
return chunkFN6MIZ24_js.getIndentationValue(
propMargin,
breakpoint
);
}, [propMargin, breakpoint]);
const currentContainerPadding = React2.useMemo(() => {
if (propContainerPadding === null) return null;
return chunkFN6MIZ24_js.getIndentationValue(
propContainerPadding,
breakpoint
);
}, [propContainerPadding, breakpoint]);
const gridConfig = React2.useMemo(
() => ({
cols,
rowHeight,
maxRows,
margin: currentMargin,
containerPadding: currentContainerPadding
}),
[cols, rowHeight, maxRows, currentMargin, currentContainerPadding]
);
return /* @__PURE__ */ jsxRuntime.jsx(
GridLayout,
{
...restProps,
width,
gridConfig,
compactor,
onLayoutChange: handleLayoutChange,
layout: effectiveLayout,
children
}
);
}
exports.GridItem = GridItem;
exports.GridLayout = GridLayout;
exports.ResponsiveGridLayout = ResponsiveGridLayout;
//# sourceMappingURL=chunk-QRW3ND4U.js.map
//# sourceMappingURL=chunk-QRW3ND4U.js.map

Sorry, the diff of this file is too big to display

import { L as Layout, a as LayoutItem, C as CompactType, M as Mutable, c as Compactor, P as Position, d as ResizeHandleAxis, k as PositionStrategy } from './types-CokovIMH.mjs';
/**
* Core layout manipulation utilities.
*
* These functions create, modify, and query grid layouts.
* All functions treat layouts as immutable - they return new arrays/objects.
*/
/**
* Get the bottom-most Y coordinate of the layout.
*
* This is the Y position plus height of the lowest item.
*
* @param layout - Layout to measure
* @returns The bottom Y coordinate (0 if layout is empty)
*/
declare function bottom(layout: Layout): number;
/**
* Get a layout item by its ID.
*
* @param layout - Layout to search
* @param id - Item ID to find
* @returns The layout item, or undefined if not found
*/
declare function getLayoutItem(layout: Layout, id: string): LayoutItem | undefined;
/**
* Get all static items from the layout.
*
* Static items cannot be moved or resized by the user.
*
* @param layout - Layout to filter
* @returns Array of static layout items
*/
declare function getStatics(layout: Layout): LayoutItem[];
/**
* Clone a layout item.
*
* Creates a shallow copy with all properties preserved.
* Boolean properties are normalized (undefined becomes false).
*
* @param layoutItem - Item to clone
* @returns A new layout item with the same properties
*/
declare function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem;
/**
* Clone an entire layout.
*
* Creates a new array with cloned items.
*
* @param layout - Layout to clone
* @returns A new layout with cloned items
*/
declare function cloneLayout(layout: Layout): LayoutItem[];
/**
* Replace a layout item in a layout.
*
* Returns a new layout with the item replaced. Other items are not cloned.
*
* @param layout - Layout to modify
* @param layoutItem - New item (matched by `i` property)
* @returns New layout with the item replaced
*/
declare function modifyLayout(layout: Layout, layoutItem: LayoutItem): LayoutItem[];
/**
* Apply a transformation to a layout item.
*
* Finds the item by key, clones it, applies the callback, and returns
* a new layout with the modified item.
*
* @param layout - Layout to modify
* @param itemKey - Key of the item to modify
* @param cb - Callback that receives the cloned item and returns the modified item
* @returns Tuple of [new layout, modified item or null if not found]
*/
declare function withLayoutItem(layout: Layout, itemKey: string, cb: (item: LayoutItem) => LayoutItem): [LayoutItem[], LayoutItem | null];
/**
* Ensure all layout items fit within the grid bounds.
*
* - Items overflowing right are moved left
* - Items overflowing left are moved to x=0 and clamped to grid width
* - Static items that collide with other statics are moved down
*
* **IMPORTANT**: This function mutates the layout items in place for performance.
* The type signature uses `Mutable<LayoutItem>[]` to make this explicit.
* Clone the layout first (e.g., with `cloneLayout()`) if you need immutability.
*
* @param layout - Layout to correct (items WILL be mutated)
* @param bounds - Grid bounds
* @returns The same layout array (for chaining)
*/
declare function correctBounds(layout: Mutable<LayoutItem>[], bounds: {
cols: number;
}): LayoutItem[];
/**
* Move a layout element to a new position.
*
* Handles collision detection and cascading movements.
* Does not compact the layout - call `compact()` separately.
*
* **Note**: This function mutates the `l` parameter directly for performance.
* The item's x, y, and moved properties will be modified. Callers should
* ideally pass a cloned item if they need to preserve the original.
*
* @param layout - Full layout
* @param l - Item to move (will be mutated)
* @param x - New X position (or undefined to keep current)
* @param y - New Y position (or undefined to keep current)
* @param isUserAction - True if this is a direct user action (affects collision resolution)
* @param preventCollision - True to block movement into occupied space (item snaps back). No effect if allowOverlap is true.
* @param compactType - Compaction type for collision resolution
* @param cols - Number of columns in the grid
* @param allowOverlap - True to allow items to stack on top of each other
* @returns The updated layout
*/
declare function moveElement(layout: Layout, l: LayoutItem, x: number | undefined, y: number | undefined, isUserAction: boolean | undefined, preventCollision: boolean | undefined, compactType: CompactType, cols: number, allowOverlap?: boolean): LayoutItem[];
/**
* Move an item away from a collision.
*
* Attempts to move the item up/left first if there's room,
* otherwise moves it down/right.
*
* @param layout - Full layout
* @param collidesWith - The item being collided with
* @param itemToMove - The item to move away
* @param isUserAction - True if this is a direct user action
* @param compactType - Compaction type
* @param cols - Number of columns
* @returns Updated layout
*/
declare function moveElementAwayFromCollision(layout: Layout, collidesWith: LayoutItem, itemToMove: LayoutItem, isUserAction: boolean | undefined, compactType: CompactType, cols: number): LayoutItem[];
/**
* Validate that a layout has the required properties.
*
* @param layout - Layout to validate
* @param contextName - Name for error messages
* @throws Error if layout is invalid
*/
declare function validateLayout(layout: Layout, contextName?: string): void;
/**
* Compactor implementations.
*
* Compactors are pluggable strategies for removing gaps between grid items.
* Use the Compactor interface to create custom compaction algorithms.
*/
/**
* Resolve a compaction collision by moving items.
*
* Before moving an item to a position, checks if that movement would
* cause collisions and recursively moves those items first.
*
* Useful for implementing custom compactors.
*
* @param layout - Full layout (must be sorted for optimization)
* @param item - Item being moved (will be mutated)
* @param moveToCoord - Target coordinate
* @param axis - Which axis to move on ('x' or 'y')
* @param hasStatics - Whether layout contains static items (disables early break optimization)
*/
declare function resolveCompactionCollision(layout: Layout, item: LayoutItem, moveToCoord: number, axis: "x" | "y", hasStatics?: boolean): void;
/**
* Compact a single item vertically (move up).
*
* Moves the item as far up as possible without colliding.
* Useful for implementing custom vertical compactors.
*
* @param compareWith - Items to check for collisions
* @param l - Item to compact (will be mutated)
* @param fullLayout - Full layout for collision resolution
* @param maxY - Maximum Y to start from
* @returns The compacted item
*/
declare function compactItemVertical(compareWith: Layout, l: LayoutItem, fullLayout: Layout, maxY: number): LayoutItem;
/**
* Compact a single item horizontally (move left).
*
* Moves the item as far left as possible without colliding.
* Wraps to the next row if it overflows.
* Useful for implementing custom horizontal compactors.
*
* @param compareWith - Items to check for collisions
* @param l - Item to compact (will be mutated)
* @param cols - Number of columns in the grid
* @param fullLayout - Full layout for collision resolution
* @returns The compacted item
*/
declare function compactItemHorizontal(compareWith: Layout, l: LayoutItem, cols: number, fullLayout: Layout): LayoutItem;
/**
* Vertical compactor - moves items up to fill gaps.
*
* Items are sorted by row then column, and each item is moved
* as far up as possible without overlapping other items.
*
* This is the default compaction mode for react-grid-layout.
*/
declare const verticalCompactor: Compactor;
/**
* Horizontal compactor - moves items left to fill gaps.
*
* Items are sorted by column then row, and each item is moved
* as far left as possible without overlapping other items.
*/
declare const horizontalCompactor: Compactor;
/**
* No compaction - items stay where placed.
*
* Use this for free-form layouts where items can be placed anywhere.
* Items will not automatically move to fill gaps.
*/
declare const noCompactor: Compactor;
/**
* Vertical compactor that allows overlapping items.
*
* Items compact upward but are allowed to overlap each other.
* Useful for layered layouts or when collision detection is handled externally.
*/
declare const verticalOverlapCompactor: Compactor;
/**
* Horizontal compactor that allows overlapping items.
*/
declare const horizontalOverlapCompactor: Compactor;
/**
* Get a compactor by type.
*
* This is a convenience function for backwards compatibility with the
* string-based compactType API.
*
* Note: For 'wrap' mode, import `wrapCompactor` from 'react-grid-layout/extras'
* and pass it directly to the `compactor` prop. This function returns
* `noCompactor` for 'wrap' type since the wrap compactor is tree-shakeable.
*
* @param compactType - 'vertical', 'horizontal', 'wrap', or null
* @param allowOverlap - Whether to allow overlapping items
* @returns The appropriate Compactor
*/
declare function getCompactor(compactType: CompactType, allowOverlap?: boolean, preventCollision?: boolean): Compactor;
/**
* Position calculation utilities.
*
* These functions convert between grid units and pixel positions,
* and generate CSS styles for grid items.
*/
/**
* Generate CSS transform-based positioning styles.
*
* Using transforms is more performant than top/left positioning
* because it doesn't trigger layout recalculations.
*
* @param position - Position in pixels
* @returns CSS style object
*/
declare function setTransform({ top, left, width, height }: Position): Record<string, string>;
/**
* Generate CSS top/left positioning styles.
*
* Use this when transforms are not suitable (e.g., for printing
* or when transform causes issues with child elements).
*
* @param position - Position in pixels
* @returns CSS style object
*/
declare function setTopLeft({ top, left, width, height }: Position): Record<string, string>;
/**
* Convert a number to a percentage string.
*
* @param num - Number to convert (0-1 range typically)
* @returns Percentage string (e.g., "50%")
*/
declare function perc(num: number): string;
/**
* Resize an item in a specific direction, clamping to container bounds.
*
* This handles the complex logic of resizing from different edges/corners,
* ensuring the item doesn't overflow the container.
*
* @param direction - Which edge/corner is being dragged
* @param currentSize - Current position and size
* @param newSize - Requested new position and size
* @param containerWidth - Width of the container
* @returns Constrained position and size
*/
declare function resizeItemInDirection(direction: ResizeHandleAxis, currentSize: Position, newSize: Position, containerWidth: number): Position;
/**
* CSS transform-based positioning strategy.
*
* Uses CSS transforms for positioning, which is more performant
* as it doesn't trigger layout recalculations.
*
* This is the default strategy.
*/
declare const transformStrategy: PositionStrategy;
/**
* Absolute (top/left) positioning strategy.
*
* Uses CSS top/left for positioning. Use this when CSS transforms
* cause issues (e.g., printing, certain child element positioning).
*/
declare const absoluteStrategy: PositionStrategy;
/**
* Create a scaled transform strategy.
*
* Use this when the grid container is inside a scaled element
* (e.g., `transform: scale(0.5)`). The scale factor adjusts
* drag/resize calculations to account for the parent transform.
*
* @param scale - Scale factor (e.g., 0.5 for half size)
* @returns Position strategy with scaled calculations
*
* @example
* ```tsx
* <div style={{ transform: 'scale(0.5)' }}>
* <GridLayout positionStrategy={createScaledStrategy(0.5)} />
* </div>
* ```
*/
declare function createScaledStrategy(scale: number): PositionStrategy;
/** Default position strategy (transform-based) */
declare const defaultPositionStrategy: PositionStrategy;
export { createScaledStrategy as A, defaultPositionStrategy as B, cloneLayoutItem as a, bottom as b, cloneLayout as c, getCompactor as d, verticalCompactor as e, setTopLeft as f, getLayoutItem as g, horizontalCompactor as h, getStatics as i, modifyLayout as j, correctBounds as k, moveElementAwayFromCollision as l, moveElement as m, noCompactor as n, verticalOverlapCompactor as o, horizontalOverlapCompactor as p, compactItemVertical as q, resolveCompactionCollision as r, setTransform as s, compactItemHorizontal as t, perc as u, validateLayout as v, withLayoutItem as w, resizeItemInDirection as x, transformStrategy as y, absoluteStrategy as z };
import { L as Layout, a as LayoutItem, C as CompactType, M as Mutable, c as Compactor, P as Position, d as ResizeHandleAxis, k as PositionStrategy } from './types-CokovIMH.js';
/**
* Core layout manipulation utilities.
*
* These functions create, modify, and query grid layouts.
* All functions treat layouts as immutable - they return new arrays/objects.
*/
/**
* Get the bottom-most Y coordinate of the layout.
*
* This is the Y position plus height of the lowest item.
*
* @param layout - Layout to measure
* @returns The bottom Y coordinate (0 if layout is empty)
*/
declare function bottom(layout: Layout): number;
/**
* Get a layout item by its ID.
*
* @param layout - Layout to search
* @param id - Item ID to find
* @returns The layout item, or undefined if not found
*/
declare function getLayoutItem(layout: Layout, id: string): LayoutItem | undefined;
/**
* Get all static items from the layout.
*
* Static items cannot be moved or resized by the user.
*
* @param layout - Layout to filter
* @returns Array of static layout items
*/
declare function getStatics(layout: Layout): LayoutItem[];
/**
* Clone a layout item.
*
* Creates a shallow copy with all properties preserved.
* Boolean properties are normalized (undefined becomes false).
*
* @param layoutItem - Item to clone
* @returns A new layout item with the same properties
*/
declare function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem;
/**
* Clone an entire layout.
*
* Creates a new array with cloned items.
*
* @param layout - Layout to clone
* @returns A new layout with cloned items
*/
declare function cloneLayout(layout: Layout): LayoutItem[];
/**
* Replace a layout item in a layout.
*
* Returns a new layout with the item replaced. Other items are not cloned.
*
* @param layout - Layout to modify
* @param layoutItem - New item (matched by `i` property)
* @returns New layout with the item replaced
*/
declare function modifyLayout(layout: Layout, layoutItem: LayoutItem): LayoutItem[];
/**
* Apply a transformation to a layout item.
*
* Finds the item by key, clones it, applies the callback, and returns
* a new layout with the modified item.
*
* @param layout - Layout to modify
* @param itemKey - Key of the item to modify
* @param cb - Callback that receives the cloned item and returns the modified item
* @returns Tuple of [new layout, modified item or null if not found]
*/
declare function withLayoutItem(layout: Layout, itemKey: string, cb: (item: LayoutItem) => LayoutItem): [LayoutItem[], LayoutItem | null];
/**
* Ensure all layout items fit within the grid bounds.
*
* - Items overflowing right are moved left
* - Items overflowing left are moved to x=0 and clamped to grid width
* - Static items that collide with other statics are moved down
*
* **IMPORTANT**: This function mutates the layout items in place for performance.
* The type signature uses `Mutable<LayoutItem>[]` to make this explicit.
* Clone the layout first (e.g., with `cloneLayout()`) if you need immutability.
*
* @param layout - Layout to correct (items WILL be mutated)
* @param bounds - Grid bounds
* @returns The same layout array (for chaining)
*/
declare function correctBounds(layout: Mutable<LayoutItem>[], bounds: {
cols: number;
}): LayoutItem[];
/**
* Move a layout element to a new position.
*
* Handles collision detection and cascading movements.
* Does not compact the layout - call `compact()` separately.
*
* **Note**: This function mutates the `l` parameter directly for performance.
* The item's x, y, and moved properties will be modified. Callers should
* ideally pass a cloned item if they need to preserve the original.
*
* @param layout - Full layout
* @param l - Item to move (will be mutated)
* @param x - New X position (or undefined to keep current)
* @param y - New Y position (or undefined to keep current)
* @param isUserAction - True if this is a direct user action (affects collision resolution)
* @param preventCollision - True to block movement into occupied space (item snaps back). No effect if allowOverlap is true.
* @param compactType - Compaction type for collision resolution
* @param cols - Number of columns in the grid
* @param allowOverlap - True to allow items to stack on top of each other
* @returns The updated layout
*/
declare function moveElement(layout: Layout, l: LayoutItem, x: number | undefined, y: number | undefined, isUserAction: boolean | undefined, preventCollision: boolean | undefined, compactType: CompactType, cols: number, allowOverlap?: boolean): LayoutItem[];
/**
* Move an item away from a collision.
*
* Attempts to move the item up/left first if there's room,
* otherwise moves it down/right.
*
* @param layout - Full layout
* @param collidesWith - The item being collided with
* @param itemToMove - The item to move away
* @param isUserAction - True if this is a direct user action
* @param compactType - Compaction type
* @param cols - Number of columns
* @returns Updated layout
*/
declare function moveElementAwayFromCollision(layout: Layout, collidesWith: LayoutItem, itemToMove: LayoutItem, isUserAction: boolean | undefined, compactType: CompactType, cols: number): LayoutItem[];
/**
* Validate that a layout has the required properties.
*
* @param layout - Layout to validate
* @param contextName - Name for error messages
* @throws Error if layout is invalid
*/
declare function validateLayout(layout: Layout, contextName?: string): void;
/**
* Compactor implementations.
*
* Compactors are pluggable strategies for removing gaps between grid items.
* Use the Compactor interface to create custom compaction algorithms.
*/
/**
* Resolve a compaction collision by moving items.
*
* Before moving an item to a position, checks if that movement would
* cause collisions and recursively moves those items first.
*
* Useful for implementing custom compactors.
*
* @param layout - Full layout (must be sorted for optimization)
* @param item - Item being moved (will be mutated)
* @param moveToCoord - Target coordinate
* @param axis - Which axis to move on ('x' or 'y')
* @param hasStatics - Whether layout contains static items (disables early break optimization)
*/
declare function resolveCompactionCollision(layout: Layout, item: LayoutItem, moveToCoord: number, axis: "x" | "y", hasStatics?: boolean): void;
/**
* Compact a single item vertically (move up).
*
* Moves the item as far up as possible without colliding.
* Useful for implementing custom vertical compactors.
*
* @param compareWith - Items to check for collisions
* @param l - Item to compact (will be mutated)
* @param fullLayout - Full layout for collision resolution
* @param maxY - Maximum Y to start from
* @returns The compacted item
*/
declare function compactItemVertical(compareWith: Layout, l: LayoutItem, fullLayout: Layout, maxY: number): LayoutItem;
/**
* Compact a single item horizontally (move left).
*
* Moves the item as far left as possible without colliding.
* Wraps to the next row if it overflows.
* Useful for implementing custom horizontal compactors.
*
* @param compareWith - Items to check for collisions
* @param l - Item to compact (will be mutated)
* @param cols - Number of columns in the grid
* @param fullLayout - Full layout for collision resolution
* @returns The compacted item
*/
declare function compactItemHorizontal(compareWith: Layout, l: LayoutItem, cols: number, fullLayout: Layout): LayoutItem;
/**
* Vertical compactor - moves items up to fill gaps.
*
* Items are sorted by row then column, and each item is moved
* as far up as possible without overlapping other items.
*
* This is the default compaction mode for react-grid-layout.
*/
declare const verticalCompactor: Compactor;
/**
* Horizontal compactor - moves items left to fill gaps.
*
* Items are sorted by column then row, and each item is moved
* as far left as possible without overlapping other items.
*/
declare const horizontalCompactor: Compactor;
/**
* No compaction - items stay where placed.
*
* Use this for free-form layouts where items can be placed anywhere.
* Items will not automatically move to fill gaps.
*/
declare const noCompactor: Compactor;
/**
* Vertical compactor that allows overlapping items.
*
* Items compact upward but are allowed to overlap each other.
* Useful for layered layouts or when collision detection is handled externally.
*/
declare const verticalOverlapCompactor: Compactor;
/**
* Horizontal compactor that allows overlapping items.
*/
declare const horizontalOverlapCompactor: Compactor;
/**
* Get a compactor by type.
*
* This is a convenience function for backwards compatibility with the
* string-based compactType API.
*
* Note: For 'wrap' mode, import `wrapCompactor` from 'react-grid-layout/extras'
* and pass it directly to the `compactor` prop. This function returns
* `noCompactor` for 'wrap' type since the wrap compactor is tree-shakeable.
*
* @param compactType - 'vertical', 'horizontal', 'wrap', or null
* @param allowOverlap - Whether to allow overlapping items
* @returns The appropriate Compactor
*/
declare function getCompactor(compactType: CompactType, allowOverlap?: boolean, preventCollision?: boolean): Compactor;
/**
* Position calculation utilities.
*
* These functions convert between grid units and pixel positions,
* and generate CSS styles for grid items.
*/
/**
* Generate CSS transform-based positioning styles.
*
* Using transforms is more performant than top/left positioning
* because it doesn't trigger layout recalculations.
*
* @param position - Position in pixels
* @returns CSS style object
*/
declare function setTransform({ top, left, width, height }: Position): Record<string, string>;
/**
* Generate CSS top/left positioning styles.
*
* Use this when transforms are not suitable (e.g., for printing
* or when transform causes issues with child elements).
*
* @param position - Position in pixels
* @returns CSS style object
*/
declare function setTopLeft({ top, left, width, height }: Position): Record<string, string>;
/**
* Convert a number to a percentage string.
*
* @param num - Number to convert (0-1 range typically)
* @returns Percentage string (e.g., "50%")
*/
declare function perc(num: number): string;
/**
* Resize an item in a specific direction, clamping to container bounds.
*
* This handles the complex logic of resizing from different edges/corners,
* ensuring the item doesn't overflow the container.
*
* @param direction - Which edge/corner is being dragged
* @param currentSize - Current position and size
* @param newSize - Requested new position and size
* @param containerWidth - Width of the container
* @returns Constrained position and size
*/
declare function resizeItemInDirection(direction: ResizeHandleAxis, currentSize: Position, newSize: Position, containerWidth: number): Position;
/**
* CSS transform-based positioning strategy.
*
* Uses CSS transforms for positioning, which is more performant
* as it doesn't trigger layout recalculations.
*
* This is the default strategy.
*/
declare const transformStrategy: PositionStrategy;
/**
* Absolute (top/left) positioning strategy.
*
* Uses CSS top/left for positioning. Use this when CSS transforms
* cause issues (e.g., printing, certain child element positioning).
*/
declare const absoluteStrategy: PositionStrategy;
/**
* Create a scaled transform strategy.
*
* Use this when the grid container is inside a scaled element
* (e.g., `transform: scale(0.5)`). The scale factor adjusts
* drag/resize calculations to account for the parent transform.
*
* @param scale - Scale factor (e.g., 0.5 for half size)
* @returns Position strategy with scaled calculations
*
* @example
* ```tsx
* <div style={{ transform: 'scale(0.5)' }}>
* <GridLayout positionStrategy={createScaledStrategy(0.5)} />
* </div>
* ```
*/
declare function createScaledStrategy(scale: number): PositionStrategy;
/** Default position strategy (transform-based) */
declare const defaultPositionStrategy: PositionStrategy;
export { createScaledStrategy as A, defaultPositionStrategy as B, cloneLayoutItem as a, bottom as b, cloneLayout as c, getCompactor as d, verticalCompactor as e, setTopLeft as f, getLayoutItem as g, horizontalCompactor as h, getStatics as i, modifyLayout as j, correctBounds as k, moveElementAwayFromCollision as l, moveElement as m, noCompactor as n, verticalOverlapCompactor as o, horizontalOverlapCompactor as p, compactItemVertical as q, resolveCompactionCollision as r, setTransform as s, compactItemHorizontal as t, perc as u, validateLayout as v, withLayoutItem as w, resizeItemInDirection as x, transformStrategy as y, absoluteStrategy as z };
import { a as LayoutItem, L as Layout, C as CompactType, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-CokovIMH.mjs';
/**
* Collision detection utilities for grid layouts.
*
* These functions determine if and where layout items overlap.
*/
/**
* Check if two layout items collide (overlap).
*
* Two items collide if their bounding boxes overlap and they are
* not the same item.
*
* @param l1 - First layout item
* @param l2 - Second layout item
* @returns true if the items collide
*/
declare function collides(l1: LayoutItem, l2: LayoutItem): boolean;
/**
* Find the first item in the layout that collides with the given item.
*
* @param layout - Layout to search
* @param layoutItem - Item to check for collisions
* @returns The first colliding item, or undefined if none
*/
declare function getFirstCollision(layout: Layout, layoutItem: LayoutItem): LayoutItem | undefined;
/**
* Find all items in the layout that collide with the given item.
*
* @param layout - Layout to search
* @param layoutItem - Item to check for collisions
* @returns Array of all colliding items (may be empty)
*/
declare function getAllCollisions(layout: Layout, layoutItem: LayoutItem): LayoutItem[];
/**
* Sorting utilities for grid layouts.
*
* These functions sort layout items for compaction and iteration.
*/
/**
* Sort layout items based on the compaction type.
*
* - Vertical compaction: sort by row (y) then column (x)
* - Horizontal compaction: sort by column (x) then row (y)
* - No compaction (null): return original order
*
* Does not modify the original layout.
*
* @param layout - Layout to sort
* @param compactType - Type of compaction
* @returns Sorted layout
*/
declare function sortLayoutItems(layout: Layout, compactType: CompactType): LayoutItem[];
/**
* Sort layout items by row ascending, then column ascending.
*
* Items are ordered from top-left to bottom-right, row by row.
* This is the natural reading order for vertical compaction.
*
* Does not modify the original layout.
*
* @param layout - Layout to sort
* @returns Sorted array of layout items
*/
declare function sortLayoutItemsByRowCol(layout: Layout): LayoutItem[];
/**
* Sort layout items by column ascending, then row ascending.
*
* Items are ordered from top-left to bottom-right, column by column.
* This is the natural order for horizontal compaction.
*
* Does not modify the original layout.
*
* @param layout - Layout to sort
* @returns Sorted array of layout items
*/
declare function sortLayoutItemsByColRow(layout: Layout): LayoutItem[];
/**
* Responsive layout utilities.
*
* Functions for handling responsive breakpoints and layout generation.
*/
/**
* Sort breakpoints by width (ascending).
*
* Returns an array of breakpoint names sorted from smallest to largest.
* E.g., ['xxs', 'xs', 'sm', 'md', 'lg']
*
* @param breakpoints - Map of breakpoint names to widths
* @returns Sorted array of breakpoint names
*/
declare function sortBreakpoints<B extends Breakpoint>(breakpoints: Breakpoints<B>): B[];
/**
* Get the active breakpoint for a given width.
*
* Returns the highest breakpoint that is valid for the width (width > breakpoint).
*
* @param breakpoints - Map of breakpoint names to widths
* @param width - Container width in pixels
* @returns Active breakpoint name
*/
declare function getBreakpointFromWidth<B extends Breakpoint>(breakpoints: Breakpoints<B>, width: number): B;
/**
* Get the column count for a breakpoint.
*
* @param breakpoint - Breakpoint name
* @param cols - Map of breakpoint names to column counts
* @returns Number of columns for the breakpoint
* @throws Error if breakpoint is not defined in cols
*/
declare function getColsFromBreakpoint<B extends Breakpoint>(breakpoint: B, cols: Breakpoints<B>): number;
/**
* Find or generate a layout for a breakpoint.
*
* If a layout exists for the breakpoint, returns a clone.
* Otherwise, generates a new layout from the nearest larger breakpoint.
*
* @param layouts - Existing layouts by breakpoint
* @param breakpoints - Breakpoint definitions
* @param breakpoint - Target breakpoint
* @param lastBreakpoint - Previous breakpoint (for fallback)
* @param cols - Column count for the target breakpoint
* @param compactType - Compaction type
* @returns Layout for the breakpoint
*/
declare function findOrGenerateResponsiveLayout<B extends Breakpoint>(layouts: ResponsiveLayouts<B>, breakpoints: Breakpoints<B>, breakpoint: B, lastBreakpoint: B, cols: number, compactType: CompactType): Layout;
type IndentationValue<B extends Breakpoint> = readonly [number, number] | Partial<Record<B, readonly [number, number]>>;
/**
* Get margin or padding value for a breakpoint.
*
* Supports both fixed values ([x, y]) and breakpoint-specific values
* ({ lg: [x, y], md: [x, y], ... }).
*
* @param value - Fixed value or breakpoint-specific map
* @param breakpoint - Current breakpoint
* @returns Margin/padding tuple [x, y]
*/
declare function getIndentationValue<B extends Breakpoint>(value: IndentationValue<B>, breakpoint: B): readonly [number, number];
export { getAllCollisions as a, sortLayoutItemsByRowCol as b, collides as c, sortLayoutItemsByColRow as d, getBreakpointFromWidth as e, getColsFromBreakpoint as f, getFirstCollision as g, findOrGenerateResponsiveLayout as h, sortBreakpoints as i, getIndentationValue as j, sortLayoutItems as s };
import { a as LayoutItem, L as Layout, C as CompactType, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-CokovIMH.js';
/**
* Collision detection utilities for grid layouts.
*
* These functions determine if and where layout items overlap.
*/
/**
* Check if two layout items collide (overlap).
*
* Two items collide if their bounding boxes overlap and they are
* not the same item.
*
* @param l1 - First layout item
* @param l2 - Second layout item
* @returns true if the items collide
*/
declare function collides(l1: LayoutItem, l2: LayoutItem): boolean;
/**
* Find the first item in the layout that collides with the given item.
*
* @param layout - Layout to search
* @param layoutItem - Item to check for collisions
* @returns The first colliding item, or undefined if none
*/
declare function getFirstCollision(layout: Layout, layoutItem: LayoutItem): LayoutItem | undefined;
/**
* Find all items in the layout that collide with the given item.
*
* @param layout - Layout to search
* @param layoutItem - Item to check for collisions
* @returns Array of all colliding items (may be empty)
*/
declare function getAllCollisions(layout: Layout, layoutItem: LayoutItem): LayoutItem[];
/**
* Sorting utilities for grid layouts.
*
* These functions sort layout items for compaction and iteration.
*/
/**
* Sort layout items based on the compaction type.
*
* - Vertical compaction: sort by row (y) then column (x)
* - Horizontal compaction: sort by column (x) then row (y)
* - No compaction (null): return original order
*
* Does not modify the original layout.
*
* @param layout - Layout to sort
* @param compactType - Type of compaction
* @returns Sorted layout
*/
declare function sortLayoutItems(layout: Layout, compactType: CompactType): LayoutItem[];
/**
* Sort layout items by row ascending, then column ascending.
*
* Items are ordered from top-left to bottom-right, row by row.
* This is the natural reading order for vertical compaction.
*
* Does not modify the original layout.
*
* @param layout - Layout to sort
* @returns Sorted array of layout items
*/
declare function sortLayoutItemsByRowCol(layout: Layout): LayoutItem[];
/**
* Sort layout items by column ascending, then row ascending.
*
* Items are ordered from top-left to bottom-right, column by column.
* This is the natural order for horizontal compaction.
*
* Does not modify the original layout.
*
* @param layout - Layout to sort
* @returns Sorted array of layout items
*/
declare function sortLayoutItemsByColRow(layout: Layout): LayoutItem[];
/**
* Responsive layout utilities.
*
* Functions for handling responsive breakpoints and layout generation.
*/
/**
* Sort breakpoints by width (ascending).
*
* Returns an array of breakpoint names sorted from smallest to largest.
* E.g., ['xxs', 'xs', 'sm', 'md', 'lg']
*
* @param breakpoints - Map of breakpoint names to widths
* @returns Sorted array of breakpoint names
*/
declare function sortBreakpoints<B extends Breakpoint>(breakpoints: Breakpoints<B>): B[];
/**
* Get the active breakpoint for a given width.
*
* Returns the highest breakpoint that is valid for the width (width > breakpoint).
*
* @param breakpoints - Map of breakpoint names to widths
* @param width - Container width in pixels
* @returns Active breakpoint name
*/
declare function getBreakpointFromWidth<B extends Breakpoint>(breakpoints: Breakpoints<B>, width: number): B;
/**
* Get the column count for a breakpoint.
*
* @param breakpoint - Breakpoint name
* @param cols - Map of breakpoint names to column counts
* @returns Number of columns for the breakpoint
* @throws Error if breakpoint is not defined in cols
*/
declare function getColsFromBreakpoint<B extends Breakpoint>(breakpoint: B, cols: Breakpoints<B>): number;
/**
* Find or generate a layout for a breakpoint.
*
* If a layout exists for the breakpoint, returns a clone.
* Otherwise, generates a new layout from the nearest larger breakpoint.
*
* @param layouts - Existing layouts by breakpoint
* @param breakpoints - Breakpoint definitions
* @param breakpoint - Target breakpoint
* @param lastBreakpoint - Previous breakpoint (for fallback)
* @param cols - Column count for the target breakpoint
* @param compactType - Compaction type
* @returns Layout for the breakpoint
*/
declare function findOrGenerateResponsiveLayout<B extends Breakpoint>(layouts: ResponsiveLayouts<B>, breakpoints: Breakpoints<B>, breakpoint: B, lastBreakpoint: B, cols: number, compactType: CompactType): Layout;
type IndentationValue<B extends Breakpoint> = readonly [number, number] | Partial<Record<B, readonly [number, number]>>;
/**
* Get margin or padding value for a breakpoint.
*
* Supports both fixed values ([x, y]) and breakpoint-specific values
* ({ lg: [x, y], md: [x, y], ... }).
*
* @param value - Fixed value or breakpoint-specific map
* @param breakpoint - Current breakpoint
* @returns Margin/padding tuple [x, y]
*/
declare function getIndentationValue<B extends Breakpoint>(value: IndentationValue<B>, breakpoint: B): readonly [number, number];
export { getAllCollisions as a, sortLayoutItemsByRowCol as b, collides as c, sortLayoutItemsByColRow as d, getBreakpointFromWidth as e, getColsFromBreakpoint as f, getFirstCollision as g, findOrGenerateResponsiveLayout as h, sortBreakpoints as i, getIndentationValue as j, sortLayoutItems as s };
import React__default, { CSSProperties, DragEvent, ReactElement } from 'react';
import { l as GridConfig, m as DragConfig, n as ResizeConfig, o as DropConfig, k as PositionStrategy, c as Compactor, f as LayoutConstraint, L as Layout, a as LayoutItem, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-CokovIMH.mjs';
/**
* GridLayout component
*
* A reactive, fluid grid layout with draggable, resizable components.
*/
type EventCallback = (layout: Layout, oldItem: LayoutItem | null, newItem: LayoutItem | null, placeholder: LayoutItem | null, event: Event, element?: HTMLElement) => void;
interface GridLayoutProps {
/** Child elements to render in the grid */
children: React__default.ReactNode;
/** Width of the container in pixels */
width: number;
/**
* Grid measurement configuration.
* @see GridConfig
*/
gridConfig?: Partial<GridConfig>;
/**
* Drag behavior configuration.
* @see DragConfig
*/
dragConfig?: Partial<DragConfig>;
/**
* Resize behavior configuration.
* @see ResizeConfig
*/
resizeConfig?: Partial<ResizeConfig>;
/**
* External drop configuration.
* @see DropConfig
*/
dropConfig?: Partial<DropConfig>;
/**
* CSS positioning strategy.
* Use transformStrategy (default), absoluteStrategy, or createScaledStrategy(scale).
* @see PositionStrategy
*/
positionStrategy?: PositionStrategy;
/**
* Layout compaction strategy.
* Use verticalCompactor (default), horizontalCompactor, or noCompactor.
* @see Compactor
*/
compactor?: Compactor;
/**
* Layout constraints for position and size limiting.
* Applied during drag/resize operations.
* Default: [gridBounds, minMaxSize]
* @see LayoutConstraint
*/
constraints?: LayoutConstraint[];
/** Layout definition */
layout?: Layout;
/** Item to use when dropping from outside */
droppingItem?: LayoutItem;
/** Whether to auto-size the container height */
autoSize?: boolean;
/** Additional class name */
className?: string;
/** Additional styles */
style?: CSSProperties;
/** Ref to the container element */
innerRef?: React__default.Ref<HTMLDivElement>;
/** Called when layout changes */
onLayoutChange?: (layout: Layout) => void;
/** Called when drag starts */
onDragStart?: EventCallback;
/** Called during drag */
onDrag?: EventCallback;
/** Called when drag stops */
onDragStop?: EventCallback;
/** Called when resize starts */
onResizeStart?: EventCallback;
/** Called during resize */
onResize?: EventCallback;
/** Called when resize stops */
onResizeStop?: EventCallback;
/** Called when an item is dropped from outside */
onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;
/** Called when dragging over the grid */
onDropDragOver?: (e: DragEvent) => {
w?: number;
h?: number;
dragOffsetX?: number;
dragOffsetY?: number;
} | false | void;
}
/**
* GridLayout - A reactive, fluid grid layout with draggable, resizable components.
*/
declare function GridLayout(props: GridLayoutProps): ReactElement;
/**
* ResponsiveGridLayout component
*
* A responsive grid layout that automatically adjusts to container width.
*/
interface ResponsiveGridLayoutProps<B extends Breakpoint = string> extends Omit<GridLayoutProps, "gridConfig" | "layout" | "onLayoutChange"> {
/** Current breakpoint (optional, auto-detected from width) */
breakpoint?: B;
/** Breakpoint definitions (name → min-width) */
breakpoints?: Breakpoints<B>;
/** Column counts per breakpoint */
cols?: Breakpoints<B>;
/** Layouts for each breakpoint */
layouts?: ResponsiveLayouts<B>;
/** Row height (default: 150) */
rowHeight?: number;
/** Maximum rows (default: Infinity) */
maxRows?: number;
/** Margin between items - can be fixed or per-breakpoint */
margin?: readonly [number, number] | Partial<Record<B, readonly [number, number]>>;
/** Container padding - can be fixed or per-breakpoint */
containerPadding?: readonly [number, number] | Partial<Record<B, readonly [number, number] | null>> | null;
/** Compactor for layout compaction */
compactor?: Compactor;
/** Called when breakpoint changes */
onBreakpointChange?: (newBreakpoint: B, cols: number) => void;
/** Called when layout changes */
onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;
/** Called when width changes */
onWidthChange?: (containerWidth: number, margin: readonly [number, number], cols: number, containerPadding: readonly [number, number] | null) => void;
}
/**
* ResponsiveGridLayout - A responsive grid layout that adjusts to container width.
*/
declare function ResponsiveGridLayout<B extends Breakpoint = string>(props: ResponsiveGridLayoutProps<B>): ReactElement;
export { type EventCallback as E, GridLayout as G, ResponsiveGridLayout as R, type GridLayoutProps as a, type ResponsiveGridLayoutProps as b };
import React__default, { CSSProperties, DragEvent, ReactElement } from 'react';
import { l as GridConfig, m as DragConfig, n as ResizeConfig, o as DropConfig, k as PositionStrategy, c as Compactor, f as LayoutConstraint, L as Layout, a as LayoutItem, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-CokovIMH.js';
/**
* GridLayout component
*
* A reactive, fluid grid layout with draggable, resizable components.
*/
type EventCallback = (layout: Layout, oldItem: LayoutItem | null, newItem: LayoutItem | null, placeholder: LayoutItem | null, event: Event, element?: HTMLElement) => void;
interface GridLayoutProps {
/** Child elements to render in the grid */
children: React__default.ReactNode;
/** Width of the container in pixels */
width: number;
/**
* Grid measurement configuration.
* @see GridConfig
*/
gridConfig?: Partial<GridConfig>;
/**
* Drag behavior configuration.
* @see DragConfig
*/
dragConfig?: Partial<DragConfig>;
/**
* Resize behavior configuration.
* @see ResizeConfig
*/
resizeConfig?: Partial<ResizeConfig>;
/**
* External drop configuration.
* @see DropConfig
*/
dropConfig?: Partial<DropConfig>;
/**
* CSS positioning strategy.
* Use transformStrategy (default), absoluteStrategy, or createScaledStrategy(scale).
* @see PositionStrategy
*/
positionStrategy?: PositionStrategy;
/**
* Layout compaction strategy.
* Use verticalCompactor (default), horizontalCompactor, or noCompactor.
* @see Compactor
*/
compactor?: Compactor;
/**
* Layout constraints for position and size limiting.
* Applied during drag/resize operations.
* Default: [gridBounds, minMaxSize]
* @see LayoutConstraint
*/
constraints?: LayoutConstraint[];
/** Layout definition */
layout?: Layout;
/** Item to use when dropping from outside */
droppingItem?: LayoutItem;
/** Whether to auto-size the container height */
autoSize?: boolean;
/** Additional class name */
className?: string;
/** Additional styles */
style?: CSSProperties;
/** Ref to the container element */
innerRef?: React__default.Ref<HTMLDivElement>;
/** Called when layout changes */
onLayoutChange?: (layout: Layout) => void;
/** Called when drag starts */
onDragStart?: EventCallback;
/** Called during drag */
onDrag?: EventCallback;
/** Called when drag stops */
onDragStop?: EventCallback;
/** Called when resize starts */
onResizeStart?: EventCallback;
/** Called during resize */
onResize?: EventCallback;
/** Called when resize stops */
onResizeStop?: EventCallback;
/** Called when an item is dropped from outside */
onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;
/** Called when dragging over the grid */
onDropDragOver?: (e: DragEvent) => {
w?: number;
h?: number;
dragOffsetX?: number;
dragOffsetY?: number;
} | false | void;
}
/**
* GridLayout - A reactive, fluid grid layout with draggable, resizable components.
*/
declare function GridLayout(props: GridLayoutProps): ReactElement;
/**
* ResponsiveGridLayout component
*
* A responsive grid layout that automatically adjusts to container width.
*/
interface ResponsiveGridLayoutProps<B extends Breakpoint = string> extends Omit<GridLayoutProps, "gridConfig" | "layout" | "onLayoutChange"> {
/** Current breakpoint (optional, auto-detected from width) */
breakpoint?: B;
/** Breakpoint definitions (name → min-width) */
breakpoints?: Breakpoints<B>;
/** Column counts per breakpoint */
cols?: Breakpoints<B>;
/** Layouts for each breakpoint */
layouts?: ResponsiveLayouts<B>;
/** Row height (default: 150) */
rowHeight?: number;
/** Maximum rows (default: Infinity) */
maxRows?: number;
/** Margin between items - can be fixed or per-breakpoint */
margin?: readonly [number, number] | Partial<Record<B, readonly [number, number]>>;
/** Container padding - can be fixed or per-breakpoint */
containerPadding?: readonly [number, number] | Partial<Record<B, readonly [number, number] | null>> | null;
/** Compactor for layout compaction */
compactor?: Compactor;
/** Called when breakpoint changes */
onBreakpointChange?: (newBreakpoint: B, cols: number) => void;
/** Called when layout changes */
onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;
/** Called when width changes */
onWidthChange?: (containerWidth: number, margin: readonly [number, number], cols: number, containerPadding: readonly [number, number] | null) => void;
}
/**
* ResponsiveGridLayout - A responsive grid layout that adjusts to container width.
*/
declare function ResponsiveGridLayout<B extends Breakpoint = string>(props: ResponsiveGridLayoutProps<B>): ReactElement;
export { type EventCallback as E, GridLayout as G, ResponsiveGridLayout as R, type GridLayoutProps as a, type ResponsiveGridLayoutProps as b };
/**
* Core types for react-grid-layout v2
*
* These types are framework-agnostic and define the data structures
* used by the layout algorithms.
*/
/**
* Axis identifiers for resize handles.
* - Cardinal: 'n', 's', 'e', 'w' (north, south, east, west)
* - Diagonal: 'ne', 'nw', 'se', 'sw'
*/
type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
/**
* A single item in the grid layout.
*
* Position (x, y) is in grid units, not pixels.
* Size (w, h) is in grid units.
*/
interface LayoutItem {
/** Unique identifier for this item */
i: string;
/** X position in grid units (0-indexed from left) */
x: number;
/** Y position in grid units (0-indexed from top) */
y: number;
/** Width in grid units */
w: number;
/** Height in grid units */
h: number;
/** Minimum width in grid units */
minW?: number;
/** Minimum height in grid units */
minH?: number;
/** Maximum width in grid units */
maxW?: number;
/** Maximum height in grid units */
maxH?: number;
/**
* If true, item cannot be dragged or resized, and other items
* will move around it during compaction.
*/
static?: boolean;
/**
* If false, item cannot be dragged (but may still be resizable).
* Overrides grid-level isDraggable for this item.
*/
isDraggable?: boolean;
/**
* If false, item cannot be resized (but may still be draggable).
* Overrides grid-level isResizable for this item.
*/
isResizable?: boolean;
/**
* Which resize handles to show for this item.
* Overrides grid-level resizeHandles for this item.
*/
resizeHandles?: ResizeHandleAxis[];
/**
* If true, item is constrained to the grid container bounds.
* Overrides grid-level isBounded for this item.
*/
isBounded?: boolean;
/**
* Internal flag set during drag/resize operations to indicate
* the item has moved from its original position.
* @internal
*/
moved?: boolean;
/**
* Per-item layout constraints.
* Applied in addition to grid-level constraints.
*/
constraints?: LayoutConstraint[];
}
/**
* A layout is a readonly array of layout items.
* Layouts should be treated as immutable.
*/
type Layout = readonly LayoutItem[];
/**
* Pixel position and size of an element.
*/
interface Position {
left: number;
top: number;
width: number;
height: number;
}
/**
* Partial position (just coordinates, no size).
*/
interface PartialPosition {
left: number;
top: number;
}
/**
* Size in pixels.
*/
interface Size {
width: number;
height: number;
}
/**
* Position when dropping an external element onto the grid.
*/
interface DroppingPosition {
left: number;
top: number;
e: Event;
}
/**
* Data provided by react-draggable during drag operations.
*/
interface ReactDraggableCallbackData {
node: HTMLElement;
x?: number;
y?: number;
deltaX: number;
deltaY: number;
lastX?: number;
lastY?: number;
}
/**
* Grid-level drag event data.
*/
interface GridDragEvent {
e: Event;
node: HTMLElement;
newPosition: PartialPosition;
}
/**
* Grid-level resize event data.
*/
interface GridResizeEvent {
e: Event;
node: HTMLElement;
size: Size;
handle: ResizeHandleAxis;
}
/**
* Drag-over event with layer coordinates.
*/
interface DragOverEvent extends MouseEvent {
nativeEvent: Event & {
layerX: number;
layerY: number;
};
}
/**
* Type of compaction to apply to the layout.
* - 'vertical': Items compact upward (default)
* - 'horizontal': Items compact leftward
* - 'wrap': Items arranged in wrapped-paragraph style (like words in text)
* - null: No compaction (free-form positioning)
*/
type CompactType = "horizontal" | "vertical" | "wrap" | null;
/**
* Standard callback signature for layout change events.
*
* @param layout - The current layout after the change
* @param oldItem - The item before the change (null if not applicable)
* @param newItem - The item after the change (null if not applicable)
* @param placeholder - The placeholder item during drag/resize (null at start)
* @param event - The DOM event that triggered the change
* @param element - The DOM element being manipulated (null if not applicable)
*/
type EventCallback = (layout: Layout, oldItem: LayoutItem | null, newItem: LayoutItem | null, placeholder: LayoutItem | null, event: Event, element: HTMLElement | null) => void;
/**
* Callback when layout changes for any reason.
*/
type OnLayoutChangeCallback = (layout: Layout) => void;
/**
* Interface for layout compaction strategies.
*
* Implement this interface to create custom compaction algorithms.
*
* @example
* ```typescript
* const myCompactor: Compactor = {
* type: 'vertical',
* allowOverlap: false,
* compact(layout, cols) {
* // Custom compaction logic
* return compactedLayout;
* },
* onMove(layout, item, x, y, cols) {
* // Handle item movement
* return updatedLayout;
* }
* };
* ```
*/
interface Compactor {
/** Compaction type identifier */
readonly type: CompactType;
/**
* Whether items can overlap (stack on top of each other).
*
* When true:
* - Items can be placed on top of other items
* - Dragging into another item does NOT push it away
* - Compaction is skipped after drag/resize
*/
readonly allowOverlap: boolean;
/**
* Whether to block movement that would cause collision.
*
* When true (and allowOverlap is false):
* - Dragging into another item is blocked (item snaps back)
* - Other items are NOT pushed away
* - Only affects drag/resize, not compaction
*
* Has no effect when allowOverlap is true.
*/
readonly preventCollision?: boolean;
/**
* Compact the layout.
*
* @param layout - The layout to compact
* @param cols - Number of columns in the grid
* @returns The compacted layout
*/
compact(layout: Layout, cols: number): Layout;
/**
* Handle item movement, returning the updated layout.
*
* @param layout - Current layout
* @param item - The item being moved
* @param x - New x position
* @param y - New y position
* @param cols - Number of columns
* @returns Updated layout after the move
*/
onMove(layout: Layout, item: LayoutItem, x: number, y: number, cols: number): Layout;
}
/**
* Interface for CSS positioning strategies.
*
* Implement this interface to customize how items are positioned in the DOM.
* Built-in strategies: transformStrategy, absoluteStrategy.
*
* @example
* ```typescript
* // Use transform-based positioning (default, better performance)
* <GridLayout positionStrategy={transformStrategy} />
*
* // Use top/left positioning (for environments where transforms cause issues)
* <GridLayout positionStrategy={absoluteStrategy} />
*
* // Use scaled transforms (for scaled containers)
* <GridLayout positionStrategy={createScaledStrategy(0.5)} />
* ```
*/
interface PositionStrategy {
/** Strategy type identifier */
readonly type: "transform" | "absolute";
/** Scale factor for drag/resize calculations */
readonly scale: number;
/**
* Convert pixel position to CSS style object.
*
* @param pos - Position in pixels
* @returns CSS properties for positioning the element
*/
calcStyle(pos: Position): React.CSSProperties;
/**
* Calculate position during drag operations, accounting for transforms and scale.
*
* @param clientX - Mouse client X position
* @param clientY - Mouse client Y position
* @param offsetX - Offset from element origin X
* @param offsetY - Offset from element origin Y
* @returns Adjusted left/top position
*/
calcDragPosition(clientX: number, clientY: number, offsetX: number, offsetY: number): PartialPosition;
}
/**
* Context provided to constraint functions during drag/resize operations.
*/
interface ConstraintContext {
/** Number of columns in the grid */
cols: number;
/** Maximum number of rows (Infinity if unbounded) */
maxRows: number;
/** Container width in pixels */
containerWidth: number;
/** Container height in pixels (may be 0 if auto-height) */
containerHeight: number;
/** Row height in pixels */
rowHeight: number;
/** Margin between items [x, y] in pixels */
margin: readonly [number, number];
/** Current layout state */
layout: Layout;
}
/**
* Interface for layout constraints.
*
* Implement this interface to create custom position/size constraints.
* Built-in constraints: gridBounds, minMaxSize, containerBounds, boundedX, boundedY.
*
* @example
* ```typescript
* // Grid-level constraints
* <GridLayout constraints={[gridBounds, minMaxSize, aspectRatio(16/9)]} />
*
* // Per-item constraints
* const layout = [
* { i: 'video', x: 0, y: 0, w: 4, h: 2, constraints: [aspectRatio(16/9)] }
* ];
* ```
*/
interface LayoutConstraint {
/** Constraint identifier for debugging */
readonly name: string;
/**
* Constrain position during drag operations.
* Called after grid unit conversion, before layout update.
*
* @param item - The item being dragged
* @param x - Proposed x position in grid units
* @param y - Proposed y position in grid units
* @param context - Grid context (cols, maxRows, etc.)
* @returns Constrained x, y position
*/
constrainPosition?(item: LayoutItem, x: number, y: number, context: ConstraintContext): {
x: number;
y: number;
};
/**
* Constrain size during resize operations.
* Called after grid unit conversion, before layout update.
*
* @param item - The item being resized
* @param w - Proposed width in grid units
* @param h - Proposed height in grid units
* @param handle - Which resize handle is being used
* @param context - Grid context (cols, maxRows, etc.)
* @returns Constrained w, h size
*/
constrainSize?(item: LayoutItem, w: number, h: number, handle: ResizeHandleAxis, context: ConstraintContext): {
w: number;
h: number;
};
}
/**
* Grid measurement configuration.
* Groups all grid metrics (columns, row height, margins).
*/
interface GridConfig {
/** Number of columns in the grid (default: 12) */
cols: number;
/** Height of a single row in pixels (default: 150) */
rowHeight: number;
/** [horizontal, vertical] margin between items in pixels (default: [10, 10]) */
margin: readonly [number, number];
/** [horizontal, vertical] padding inside the container (default: null, uses margin) */
containerPadding: readonly [number, number] | null;
/** Maximum number of rows (default: Infinity) */
maxRows: number;
}
/** Default grid configuration */
declare const defaultGridConfig: GridConfig;
/**
* Drag behavior configuration.
* Groups all drag-related settings.
*/
interface DragConfig {
/** Whether items can be dragged (default: true) */
enabled: boolean;
/** Whether items are bounded to the container (default: false) */
bounded: boolean;
/** CSS selector for drag handle (e.g., '.drag-handle') */
handle?: string;
/** CSS selector for elements that should not trigger drag */
cancel?: string;
/**
* Minimum pixels to move before drag starts.
* Helps distinguish click from drag (fixes #1341, #1401).
* @default 3
*/
threshold: number;
}
/** Default drag configuration */
declare const defaultDragConfig: DragConfig;
/**
* Resize behavior configuration.
* Groups all resize-related settings.
*/
interface ResizeConfig {
/** Whether items can be resized (default: true) */
enabled: boolean;
/** Which resize handles to show (default: ['se']) */
handles: readonly ResizeHandleAxis[];
/**
* Custom resize handle component.
* Can be a React node or a function that receives the axis.
*/
handleComponent?: React.ReactNode | ((axis: ResizeHandleAxis, ref: React.Ref<HTMLElement>) => React.ReactNode);
}
/** Default resize configuration */
declare const defaultResizeConfig: ResizeConfig;
/**
* Drop configuration (for dropping external elements).
* Groups all drop-related settings.
*/
interface DropConfig {
/** Whether external elements can be dropped on the grid (default: false) */
enabled: boolean;
/** Default size for dropped items (default: { w: 1, h: 1 }) */
defaultItem: {
w: number;
h: number;
};
/**
* Called when dragging over the grid.
* Return dimensions to override defaultItem, or false to reject the drop.
* Can also return dragOffsetX/dragOffsetY to specify cursor offset for centering.
*/
onDragOver?: (e: DragEvent) => {
w?: number;
h?: number;
dragOffsetX?: number;
dragOffsetY?: number;
} | false | void;
}
/** Default drop configuration */
declare const defaultDropConfig: DropConfig;
/**
* Breakpoint name (e.g., 'lg', 'md', 'sm', 'xs', 'xxs').
*/
type Breakpoint = string;
/**
* Map of breakpoint name to pixel width.
* Generic type B allows custom breakpoint strings.
*/
type Breakpoints<B extends Breakpoint = Breakpoint> = Record<B, number>;
/**
* Map of breakpoint name to number of columns.
* Generic type B allows custom breakpoint strings.
*/
type BreakpointCols<B extends Breakpoint = Breakpoint> = Record<B, number>;
/**
* Map of breakpoint name to layout.
* Generic type B allows custom breakpoint strings.
*/
type ResponsiveLayouts<B extends Breakpoint = Breakpoint> = Partial<Record<B, Layout>>;
/**
* Callback when breakpoint changes.
*/
type OnBreakpointChangeCallback<B extends Breakpoint = Breakpoint> = (newBreakpoint: B, cols: number) => void;
/**
* Makes all properties in T mutable (removes readonly).
*/
type Mutable<T> = {
-readonly [P in keyof T]: T[P];
};
/**
* Deep partial - all properties and nested properties are optional.
*/
type DeepPartial<T> = {
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};
/**
* Extract the element type from an array type.
*/
type ArrayElement<T> = T extends readonly (infer U)[] ? U : never;
export { type ArrayElement as A, type Breakpoint as B, type CompactType as C, type DroppingPosition as D, type EventCallback as E, type GridDragEvent as G, type Layout as L, type Mutable as M, type OnLayoutChangeCallback as O, type Position as P, type ResponsiveLayouts as R, type Size as S, type LayoutItem as a, type Breakpoints as b, type Compactor as c, type ResizeHandleAxis as d, type GridResizeEvent as e, type LayoutConstraint as f, type ConstraintContext as g, type PartialPosition as h, type ReactDraggableCallbackData as i, type DragOverEvent as j, type PositionStrategy as k, type GridConfig as l, type DragConfig as m, type ResizeConfig as n, type DropConfig as o, type BreakpointCols as p, type OnBreakpointChangeCallback as q, type DeepPartial as r, defaultGridConfig as s, defaultDragConfig as t, defaultResizeConfig as u, defaultDropConfig as v };
/**
* Core types for react-grid-layout v2
*
* These types are framework-agnostic and define the data structures
* used by the layout algorithms.
*/
/**
* Axis identifiers for resize handles.
* - Cardinal: 'n', 's', 'e', 'w' (north, south, east, west)
* - Diagonal: 'ne', 'nw', 'se', 'sw'
*/
type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
/**
* A single item in the grid layout.
*
* Position (x, y) is in grid units, not pixels.
* Size (w, h) is in grid units.
*/
interface LayoutItem {
/** Unique identifier for this item */
i: string;
/** X position in grid units (0-indexed from left) */
x: number;
/** Y position in grid units (0-indexed from top) */
y: number;
/** Width in grid units */
w: number;
/** Height in grid units */
h: number;
/** Minimum width in grid units */
minW?: number;
/** Minimum height in grid units */
minH?: number;
/** Maximum width in grid units */
maxW?: number;
/** Maximum height in grid units */
maxH?: number;
/**
* If true, item cannot be dragged or resized, and other items
* will move around it during compaction.
*/
static?: boolean;
/**
* If false, item cannot be dragged (but may still be resizable).
* Overrides grid-level isDraggable for this item.
*/
isDraggable?: boolean;
/**
* If false, item cannot be resized (but may still be draggable).
* Overrides grid-level isResizable for this item.
*/
isResizable?: boolean;
/**
* Which resize handles to show for this item.
* Overrides grid-level resizeHandles for this item.
*/
resizeHandles?: ResizeHandleAxis[];
/**
* If true, item is constrained to the grid container bounds.
* Overrides grid-level isBounded for this item.
*/
isBounded?: boolean;
/**
* Internal flag set during drag/resize operations to indicate
* the item has moved from its original position.
* @internal
*/
moved?: boolean;
/**
* Per-item layout constraints.
* Applied in addition to grid-level constraints.
*/
constraints?: LayoutConstraint[];
}
/**
* A layout is a readonly array of layout items.
* Layouts should be treated as immutable.
*/
type Layout = readonly LayoutItem[];
/**
* Pixel position and size of an element.
*/
interface Position {
left: number;
top: number;
width: number;
height: number;
}
/**
* Partial position (just coordinates, no size).
*/
interface PartialPosition {
left: number;
top: number;
}
/**
* Size in pixels.
*/
interface Size {
width: number;
height: number;
}
/**
* Position when dropping an external element onto the grid.
*/
interface DroppingPosition {
left: number;
top: number;
e: Event;
}
/**
* Data provided by react-draggable during drag operations.
*/
interface ReactDraggableCallbackData {
node: HTMLElement;
x?: number;
y?: number;
deltaX: number;
deltaY: number;
lastX?: number;
lastY?: number;
}
/**
* Grid-level drag event data.
*/
interface GridDragEvent {
e: Event;
node: HTMLElement;
newPosition: PartialPosition;
}
/**
* Grid-level resize event data.
*/
interface GridResizeEvent {
e: Event;
node: HTMLElement;
size: Size;
handle: ResizeHandleAxis;
}
/**
* Drag-over event with layer coordinates.
*/
interface DragOverEvent extends MouseEvent {
nativeEvent: Event & {
layerX: number;
layerY: number;
};
}
/**
* Type of compaction to apply to the layout.
* - 'vertical': Items compact upward (default)
* - 'horizontal': Items compact leftward
* - 'wrap': Items arranged in wrapped-paragraph style (like words in text)
* - null: No compaction (free-form positioning)
*/
type CompactType = "horizontal" | "vertical" | "wrap" | null;
/**
* Standard callback signature for layout change events.
*
* @param layout - The current layout after the change
* @param oldItem - The item before the change (null if not applicable)
* @param newItem - The item after the change (null if not applicable)
* @param placeholder - The placeholder item during drag/resize (null at start)
* @param event - The DOM event that triggered the change
* @param element - The DOM element being manipulated (null if not applicable)
*/
type EventCallback = (layout: Layout, oldItem: LayoutItem | null, newItem: LayoutItem | null, placeholder: LayoutItem | null, event: Event, element: HTMLElement | null) => void;
/**
* Callback when layout changes for any reason.
*/
type OnLayoutChangeCallback = (layout: Layout) => void;
/**
* Interface for layout compaction strategies.
*
* Implement this interface to create custom compaction algorithms.
*
* @example
* ```typescript
* const myCompactor: Compactor = {
* type: 'vertical',
* allowOverlap: false,
* compact(layout, cols) {
* // Custom compaction logic
* return compactedLayout;
* },
* onMove(layout, item, x, y, cols) {
* // Handle item movement
* return updatedLayout;
* }
* };
* ```
*/
interface Compactor {
/** Compaction type identifier */
readonly type: CompactType;
/**
* Whether items can overlap (stack on top of each other).
*
* When true:
* - Items can be placed on top of other items
* - Dragging into another item does NOT push it away
* - Compaction is skipped after drag/resize
*/
readonly allowOverlap: boolean;
/**
* Whether to block movement that would cause collision.
*
* When true (and allowOverlap is false):
* - Dragging into another item is blocked (item snaps back)
* - Other items are NOT pushed away
* - Only affects drag/resize, not compaction
*
* Has no effect when allowOverlap is true.
*/
readonly preventCollision?: boolean;
/**
* Compact the layout.
*
* @param layout - The layout to compact
* @param cols - Number of columns in the grid
* @returns The compacted layout
*/
compact(layout: Layout, cols: number): Layout;
/**
* Handle item movement, returning the updated layout.
*
* @param layout - Current layout
* @param item - The item being moved
* @param x - New x position
* @param y - New y position
* @param cols - Number of columns
* @returns Updated layout after the move
*/
onMove(layout: Layout, item: LayoutItem, x: number, y: number, cols: number): Layout;
}
/**
* Interface for CSS positioning strategies.
*
* Implement this interface to customize how items are positioned in the DOM.
* Built-in strategies: transformStrategy, absoluteStrategy.
*
* @example
* ```typescript
* // Use transform-based positioning (default, better performance)
* <GridLayout positionStrategy={transformStrategy} />
*
* // Use top/left positioning (for environments where transforms cause issues)
* <GridLayout positionStrategy={absoluteStrategy} />
*
* // Use scaled transforms (for scaled containers)
* <GridLayout positionStrategy={createScaledStrategy(0.5)} />
* ```
*/
interface PositionStrategy {
/** Strategy type identifier */
readonly type: "transform" | "absolute";
/** Scale factor for drag/resize calculations */
readonly scale: number;
/**
* Convert pixel position to CSS style object.
*
* @param pos - Position in pixels
* @returns CSS properties for positioning the element
*/
calcStyle(pos: Position): React.CSSProperties;
/**
* Calculate position during drag operations, accounting for transforms and scale.
*
* @param clientX - Mouse client X position
* @param clientY - Mouse client Y position
* @param offsetX - Offset from element origin X
* @param offsetY - Offset from element origin Y
* @returns Adjusted left/top position
*/
calcDragPosition(clientX: number, clientY: number, offsetX: number, offsetY: number): PartialPosition;
}
/**
* Context provided to constraint functions during drag/resize operations.
*/
interface ConstraintContext {
/** Number of columns in the grid */
cols: number;
/** Maximum number of rows (Infinity if unbounded) */
maxRows: number;
/** Container width in pixels */
containerWidth: number;
/** Container height in pixels (may be 0 if auto-height) */
containerHeight: number;
/** Row height in pixels */
rowHeight: number;
/** Margin between items [x, y] in pixels */
margin: readonly [number, number];
/** Current layout state */
layout: Layout;
}
/**
* Interface for layout constraints.
*
* Implement this interface to create custom position/size constraints.
* Built-in constraints: gridBounds, minMaxSize, containerBounds, boundedX, boundedY.
*
* @example
* ```typescript
* // Grid-level constraints
* <GridLayout constraints={[gridBounds, minMaxSize, aspectRatio(16/9)]} />
*
* // Per-item constraints
* const layout = [
* { i: 'video', x: 0, y: 0, w: 4, h: 2, constraints: [aspectRatio(16/9)] }
* ];
* ```
*/
interface LayoutConstraint {
/** Constraint identifier for debugging */
readonly name: string;
/**
* Constrain position during drag operations.
* Called after grid unit conversion, before layout update.
*
* @param item - The item being dragged
* @param x - Proposed x position in grid units
* @param y - Proposed y position in grid units
* @param context - Grid context (cols, maxRows, etc.)
* @returns Constrained x, y position
*/
constrainPosition?(item: LayoutItem, x: number, y: number, context: ConstraintContext): {
x: number;
y: number;
};
/**
* Constrain size during resize operations.
* Called after grid unit conversion, before layout update.
*
* @param item - The item being resized
* @param w - Proposed width in grid units
* @param h - Proposed height in grid units
* @param handle - Which resize handle is being used
* @param context - Grid context (cols, maxRows, etc.)
* @returns Constrained w, h size
*/
constrainSize?(item: LayoutItem, w: number, h: number, handle: ResizeHandleAxis, context: ConstraintContext): {
w: number;
h: number;
};
}
/**
* Grid measurement configuration.
* Groups all grid metrics (columns, row height, margins).
*/
interface GridConfig {
/** Number of columns in the grid (default: 12) */
cols: number;
/** Height of a single row in pixels (default: 150) */
rowHeight: number;
/** [horizontal, vertical] margin between items in pixels (default: [10, 10]) */
margin: readonly [number, number];
/** [horizontal, vertical] padding inside the container (default: null, uses margin) */
containerPadding: readonly [number, number] | null;
/** Maximum number of rows (default: Infinity) */
maxRows: number;
}
/** Default grid configuration */
declare const defaultGridConfig: GridConfig;
/**
* Drag behavior configuration.
* Groups all drag-related settings.
*/
interface DragConfig {
/** Whether items can be dragged (default: true) */
enabled: boolean;
/** Whether items are bounded to the container (default: false) */
bounded: boolean;
/** CSS selector for drag handle (e.g., '.drag-handle') */
handle?: string;
/** CSS selector for elements that should not trigger drag */
cancel?: string;
/**
* Minimum pixels to move before drag starts.
* Helps distinguish click from drag (fixes #1341, #1401).
* @default 3
*/
threshold: number;
}
/** Default drag configuration */
declare const defaultDragConfig: DragConfig;
/**
* Resize behavior configuration.
* Groups all resize-related settings.
*/
interface ResizeConfig {
/** Whether items can be resized (default: true) */
enabled: boolean;
/** Which resize handles to show (default: ['se']) */
handles: readonly ResizeHandleAxis[];
/**
* Custom resize handle component.
* Can be a React node or a function that receives the axis.
*/
handleComponent?: React.ReactNode | ((axis: ResizeHandleAxis, ref: React.Ref<HTMLElement>) => React.ReactNode);
}
/** Default resize configuration */
declare const defaultResizeConfig: ResizeConfig;
/**
* Drop configuration (for dropping external elements).
* Groups all drop-related settings.
*/
interface DropConfig {
/** Whether external elements can be dropped on the grid (default: false) */
enabled: boolean;
/** Default size for dropped items (default: { w: 1, h: 1 }) */
defaultItem: {
w: number;
h: number;
};
/**
* Called when dragging over the grid.
* Return dimensions to override defaultItem, or false to reject the drop.
* Can also return dragOffsetX/dragOffsetY to specify cursor offset for centering.
*/
onDragOver?: (e: DragEvent) => {
w?: number;
h?: number;
dragOffsetX?: number;
dragOffsetY?: number;
} | false | void;
}
/** Default drop configuration */
declare const defaultDropConfig: DropConfig;
/**
* Breakpoint name (e.g., 'lg', 'md', 'sm', 'xs', 'xxs').
*/
type Breakpoint = string;
/**
* Map of breakpoint name to pixel width.
* Generic type B allows custom breakpoint strings.
*/
type Breakpoints<B extends Breakpoint = Breakpoint> = Record<B, number>;
/**
* Map of breakpoint name to number of columns.
* Generic type B allows custom breakpoint strings.
*/
type BreakpointCols<B extends Breakpoint = Breakpoint> = Record<B, number>;
/**
* Map of breakpoint name to layout.
* Generic type B allows custom breakpoint strings.
*/
type ResponsiveLayouts<B extends Breakpoint = Breakpoint> = Partial<Record<B, Layout>>;
/**
* Callback when breakpoint changes.
*/
type OnBreakpointChangeCallback<B extends Breakpoint = Breakpoint> = (newBreakpoint: B, cols: number) => void;
/**
* Makes all properties in T mutable (removes readonly).
*/
type Mutable<T> = {
-readonly [P in keyof T]: T[P];
};
/**
* Deep partial - all properties and nested properties are optional.
*/
type DeepPartial<T> = {
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};
/**
* Extract the element type from an array type.
*/
type ArrayElement<T> = T extends readonly (infer U)[] ? U : never;
export { type ArrayElement as A, type Breakpoint as B, type CompactType as C, type DroppingPosition as D, type EventCallback as E, type GridDragEvent as G, type Layout as L, type Mutable as M, type OnLayoutChangeCallback as O, type Position as P, type ResponsiveLayouts as R, type Size as S, type LayoutItem as a, type Breakpoints as b, type Compactor as c, type ResizeHandleAxis as d, type GridResizeEvent as e, type LayoutConstraint as f, type ConstraintContext as g, type PartialPosition as h, type ReactDraggableCallbackData as i, type DragOverEvent as j, type PositionStrategy as k, type GridConfig as l, type DragConfig as m, type ResizeConfig as n, type DropConfig as o, type BreakpointCols as p, type OnBreakpointChangeCallback as q, type DeepPartial as r, defaultGridConfig as s, defaultDragConfig as t, defaultResizeConfig as u, defaultDropConfig as v };
+0
-1

@@ -8,3 +8,2 @@ .react-grid-layout {

transition-property: left, top, width, height;
user-select: none;
}

@@ -11,0 +10,0 @@ .react-grid-item img {

@@ -1,6 +0,6 @@

import { L as Layout, C as CompactType, a as LayoutItem } from './types-Cxf4nHNr.mjs';
export { A as ArrayElement, B as Breakpoint, n as BreakpointCols, b as Breakpoints, c as Compactor, p as DeepPartial, k as DragConfig, h as DragOverEvent, m as DropConfig, D as DroppingPosition, E as EventCallback, j as GridConfig, G as GridDragEvent, e as GridResizeEvent, M as Mutable, o as OnBreakpointChangeCallback, O as OnLayoutChangeCallback, f as PartialPosition, P as Position, i as PositionStrategy, g as ReactDraggableCallbackData, l as ResizeConfig, d as ResizeHandleAxis, R as ResponsiveLayouts, S as Size, r as defaultDragConfig, t as defaultDropConfig, q as defaultGridConfig, s as defaultResizeConfig } from './types-Cxf4nHNr.mjs';
export { c as collides, h as findOrGenerateResponsiveLayout, a as getAllCollisions, e as getBreakpointFromWidth, f as getColsFromBreakpoint, g as getFirstCollision, j as getIndentationValue, i as sortBreakpoints, s as sortLayoutItems, d as sortLayoutItemsByColRow, b as sortLayoutItemsByRowCol } from './responsive-CJxefsYw.mjs';
export { z as absoluteStrategy, b as bottom, c as cloneLayout, a as cloneLayoutItem, t as compactItemHorizontal, q as compactItemVertical, k as correctBounds, A as createScaledStrategy, B as defaultPositionStrategy, d as getCompactor, g as getLayoutItem, i as getStatics, h as horizontalCompactor, p as horizontalOverlapCompactor, j as modifyLayout, m as moveElement, l as moveElementAwayFromCollision, n as noCompactor, u as perc, x as resizeItemInDirection, r as resolveCompactionCollision, f as setTopLeft, s as setTransform, y as transformStrategy, v as validateLayout, e as verticalCompactor, o as verticalOverlapCompactor, w as withLayoutItem } from './position-BmN1z36J.mjs';
export { d as GridCellConfig, G as GridCellDimensions, P as PositionParams, h as calcGridCellDimensions, e as calcGridColWidth, c as calcGridItemPosition, f as calcGridItemWHPx, b as calcWH, a as calcXY, g as clamp } from './calculate-CwYDW8na.mjs';
import { L as Layout, C as CompactType, a as LayoutItem, f as LayoutConstraint, g as ConstraintContext, d as ResizeHandleAxis } from './types-CokovIMH.mjs';
export { A as ArrayElement, B as Breakpoint, p as BreakpointCols, b as Breakpoints, c as Compactor, r as DeepPartial, m as DragConfig, j as DragOverEvent, o as DropConfig, D as DroppingPosition, E as EventCallback, l as GridConfig, G as GridDragEvent, e as GridResizeEvent, M as Mutable, q as OnBreakpointChangeCallback, O as OnLayoutChangeCallback, h as PartialPosition, P as Position, k as PositionStrategy, i as ReactDraggableCallbackData, n as ResizeConfig, R as ResponsiveLayouts, S as Size, t as defaultDragConfig, v as defaultDropConfig, s as defaultGridConfig, u as defaultResizeConfig } from './types-CokovIMH.mjs';
export { c as collides, h as findOrGenerateResponsiveLayout, a as getAllCollisions, e as getBreakpointFromWidth, f as getColsFromBreakpoint, g as getFirstCollision, j as getIndentationValue, i as sortBreakpoints, s as sortLayoutItems, d as sortLayoutItemsByColRow, b as sortLayoutItemsByRowCol } from './responsive-BB5d98xz.mjs';
export { z as absoluteStrategy, b as bottom, c as cloneLayout, a as cloneLayoutItem, t as compactItemHorizontal, q as compactItemVertical, k as correctBounds, A as createScaledStrategy, B as defaultPositionStrategy, d as getCompactor, g as getLayoutItem, i as getStatics, h as horizontalCompactor, p as horizontalOverlapCompactor, j as modifyLayout, m as moveElement, l as moveElementAwayFromCollision, n as noCompactor, u as perc, x as resizeItemInDirection, r as resolveCompactionCollision, f as setTopLeft, s as setTransform, y as transformStrategy, v as validateLayout, e as verticalCompactor, o as verticalOverlapCompactor, w as withLayoutItem } from './position-C8a5g6bb.mjs';
export { d as GridCellConfig, G as GridCellDimensions, P as PositionParams, j as calcGridCellDimensions, e as calcGridColWidth, c as calcGridItemPosition, f as calcGridItemWHPx, b as calcWH, h as calcWHRaw, a as calcXY, g as calcXYRaw, i as clamp } from './calculate-DwbL1D06.mjs';

@@ -33,2 +33,155 @@ /**

export { CompactType, Layout, LayoutItem, compact, compactItem };
/**
* Pluggable layout constraints for react-grid-layout v2
*
* Constraints control position and size limits during drag/resize operations.
* They are composable, tree-shakeable, and can be applied at grid or item level.
*/
/**
* Grid boundary constraint.
*
* Ensures items stay within the grid bounds (0 to cols-w for x, 0 to maxRows-h for y).
* This is the default position constraint.
*/
declare const gridBounds: LayoutConstraint;
/**
* Min/max size constraint.
*
* Enforces per-item minW/maxW/minH/maxH properties.
* This is applied by default after gridBounds.
*/
declare const minMaxSize: LayoutConstraint;
/**
* Container bounds constraint.
*
* Constrains items to stay within the visible container.
* Use this as a replacement for the legacy `isBounded` prop.
*
* Unlike gridBounds which uses maxRows (which may be Infinity),
* this constraint calculates visible rows from the actual container height.
* Falls back to maxRows if containerHeight is 0 (auto-height grids).
*/
declare const containerBounds: LayoutConstraint;
/**
* Bounded X constraint.
*
* Only constrains horizontal position (x-axis).
* Items can move freely in the vertical direction.
*/
declare const boundedX: LayoutConstraint;
/**
* Bounded Y constraint.
*
* Only constrains vertical position (y-axis).
* Items can move freely in the horizontal direction.
*/
declare const boundedY: LayoutConstraint;
/**
* Create an aspect ratio constraint.
*
* Maintains a fixed width-to-height ratio **in pixels** during resize operations.
* Accounts for the different pixel sizes of grid columns vs rows.
*
* @param ratio - Width-to-height ratio (e.g., 16/9 for widescreen, 1 for square)
* @returns A constraint that enforces the aspect ratio
*
* @example
* ```typescript
* // 16:9 aspect ratio (actual pixel proportions)
* const layout = [
* { i: 'video', x: 0, y: 0, w: 4, h: 2, constraints: [aspectRatio(16/9)] }
* ];
*
* // Square items (in pixels, not grid units)
* <GridLayout constraints={[gridBounds, minMaxSize, aspectRatio(1)]} />
* ```
*/
declare function aspectRatio(ratio: number): LayoutConstraint;
/**
* Create a snap-to-grid constraint.
*
* Snaps positions to multiples of the specified step values.
* Useful for aligning items to a coarser grid.
*
* @param stepX - Horizontal snap step in grid units
* @param stepY - Vertical snap step in grid units (defaults to stepX)
* @returns A constraint that snaps positions to the grid
*
* @example
* ```typescript
* // Snap to every 2 grid units
* <GridLayout constraints={[snapToGrid(2), gridBounds]} />
*
* // Different horizontal and vertical snap
* <GridLayout constraints={[snapToGrid(2, 3), gridBounds]} />
* ```
*/
declare function snapToGrid(stepX: number, stepY?: number): LayoutConstraint;
/**
* Create a minimum size constraint.
*
* Sets minimum width and height for all items using this constraint.
* Useful for grid-wide minimums without setting minW/minH on each item.
*
* @param minW - Minimum width in grid units
* @param minH - Minimum height in grid units
* @returns A constraint that enforces minimum size
*/
declare function minSize(minW: number, minH: number): LayoutConstraint;
/**
* Create a maximum size constraint.
*
* Sets maximum width and height for all items using this constraint.
* Useful for grid-wide maximums without setting maxW/maxH on each item.
*
* @param maxW - Maximum width in grid units
* @param maxH - Maximum height in grid units
* @returns A constraint that enforces maximum size
*/
declare function maxSize(maxW: number, maxH: number): LayoutConstraint;
/**
* Default constraints applied when none are specified.
*
* Includes:
* - gridBounds: Keep items within the grid
* - minMaxSize: Respect per-item min/max constraints
*/
declare const defaultConstraints: LayoutConstraint[];
/**
* Apply position constraints to a proposed position.
*
* Constraints are applied in array order, allowing composition.
* Grid-level constraints are applied first, then per-item constraints.
*
* @param constraints - Array of constraints to apply
* @param item - The layout item being positioned
* @param x - Proposed x position
* @param y - Proposed y position
* @param context - Grid context (cols, maxRows, etc.)
* @returns Constrained position
*/
declare function applyPositionConstraints(constraints: LayoutConstraint[], item: LayoutItem, x: number, y: number, context: ConstraintContext): {
x: number;
y: number;
};
/**
* Apply size constraints to a proposed size.
*
* Constraints are applied in array order, allowing composition.
* Grid-level constraints are applied first, then per-item constraints.
*
* @param constraints - Array of constraints to apply
* @param item - The layout item being resized
* @param w - Proposed width
* @param h - Proposed height
* @param handle - Which resize handle is being used
* @param context - Grid context (cols, maxRows, etc.)
* @returns Constrained size
*/
declare function applySizeConstraints(constraints: LayoutConstraint[], item: LayoutItem, w: number, h: number, handle: ResizeHandleAxis, context: ConstraintContext): {
w: number;
h: number;
};
export { CompactType, ConstraintContext, Layout, LayoutConstraint, LayoutItem, ResizeHandleAxis, applyPositionConstraints, applySizeConstraints, aspectRatio, boundedX, boundedY, compact, compactItem, containerBounds, defaultConstraints, gridBounds, maxSize, minMaxSize, minSize, snapToGrid };

@@ -1,6 +0,6 @@

import { L as Layout, C as CompactType, a as LayoutItem } from './types-Cxf4nHNr.js';
export { A as ArrayElement, B as Breakpoint, n as BreakpointCols, b as Breakpoints, c as Compactor, p as DeepPartial, k as DragConfig, h as DragOverEvent, m as DropConfig, D as DroppingPosition, E as EventCallback, j as GridConfig, G as GridDragEvent, e as GridResizeEvent, M as Mutable, o as OnBreakpointChangeCallback, O as OnLayoutChangeCallback, f as PartialPosition, P as Position, i as PositionStrategy, g as ReactDraggableCallbackData, l as ResizeConfig, d as ResizeHandleAxis, R as ResponsiveLayouts, S as Size, r as defaultDragConfig, t as defaultDropConfig, q as defaultGridConfig, s as defaultResizeConfig } from './types-Cxf4nHNr.js';
export { c as collides, h as findOrGenerateResponsiveLayout, a as getAllCollisions, e as getBreakpointFromWidth, f as getColsFromBreakpoint, g as getFirstCollision, j as getIndentationValue, i as sortBreakpoints, s as sortLayoutItems, d as sortLayoutItemsByColRow, b as sortLayoutItemsByRowCol } from './responsive-C4L1ESlm.js';
export { z as absoluteStrategy, b as bottom, c as cloneLayout, a as cloneLayoutItem, t as compactItemHorizontal, q as compactItemVertical, k as correctBounds, A as createScaledStrategy, B as defaultPositionStrategy, d as getCompactor, g as getLayoutItem, i as getStatics, h as horizontalCompactor, p as horizontalOverlapCompactor, j as modifyLayout, m as moveElement, l as moveElementAwayFromCollision, n as noCompactor, u as perc, x as resizeItemInDirection, r as resolveCompactionCollision, f as setTopLeft, s as setTransform, y as transformStrategy, v as validateLayout, e as verticalCompactor, o as verticalOverlapCompactor, w as withLayoutItem } from './position-Dk2b4ZMS.js';
export { d as GridCellConfig, G as GridCellDimensions, P as PositionParams, h as calcGridCellDimensions, e as calcGridColWidth, c as calcGridItemPosition, f as calcGridItemWHPx, b as calcWH, a as calcXY, g as clamp } from './calculate-mgLpNJ5O.js';
import { L as Layout, C as CompactType, a as LayoutItem, f as LayoutConstraint, g as ConstraintContext, d as ResizeHandleAxis } from './types-CokovIMH.js';
export { A as ArrayElement, B as Breakpoint, p as BreakpointCols, b as Breakpoints, c as Compactor, r as DeepPartial, m as DragConfig, j as DragOverEvent, o as DropConfig, D as DroppingPosition, E as EventCallback, l as GridConfig, G as GridDragEvent, e as GridResizeEvent, M as Mutable, q as OnBreakpointChangeCallback, O as OnLayoutChangeCallback, h as PartialPosition, P as Position, k as PositionStrategy, i as ReactDraggableCallbackData, n as ResizeConfig, R as ResponsiveLayouts, S as Size, t as defaultDragConfig, v as defaultDropConfig, s as defaultGridConfig, u as defaultResizeConfig } from './types-CokovIMH.js';
export { c as collides, h as findOrGenerateResponsiveLayout, a as getAllCollisions, e as getBreakpointFromWidth, f as getColsFromBreakpoint, g as getFirstCollision, j as getIndentationValue, i as sortBreakpoints, s as sortLayoutItems, d as sortLayoutItemsByColRow, b as sortLayoutItemsByRowCol } from './responsive-BXI-GCXG.js';
export { z as absoluteStrategy, b as bottom, c as cloneLayout, a as cloneLayoutItem, t as compactItemHorizontal, q as compactItemVertical, k as correctBounds, A as createScaledStrategy, B as defaultPositionStrategy, d as getCompactor, g as getLayoutItem, i as getStatics, h as horizontalCompactor, p as horizontalOverlapCompactor, j as modifyLayout, m as moveElement, l as moveElementAwayFromCollision, n as noCompactor, u as perc, x as resizeItemInDirection, r as resolveCompactionCollision, f as setTopLeft, s as setTransform, y as transformStrategy, v as validateLayout, e as verticalCompactor, o as verticalOverlapCompactor, w as withLayoutItem } from './position-H8tBL91b.js';
export { d as GridCellConfig, G as GridCellDimensions, P as PositionParams, j as calcGridCellDimensions, e as calcGridColWidth, c as calcGridItemPosition, f as calcGridItemWHPx, b as calcWH, h as calcWHRaw, a as calcXY, g as calcXYRaw, i as clamp } from './calculate-DsVTldEE.js';

@@ -33,2 +33,155 @@ /**

export { CompactType, Layout, LayoutItem, compact, compactItem };
/**
* Pluggable layout constraints for react-grid-layout v2
*
* Constraints control position and size limits during drag/resize operations.
* They are composable, tree-shakeable, and can be applied at grid or item level.
*/
/**
* Grid boundary constraint.
*
* Ensures items stay within the grid bounds (0 to cols-w for x, 0 to maxRows-h for y).
* This is the default position constraint.
*/
declare const gridBounds: LayoutConstraint;
/**
* Min/max size constraint.
*
* Enforces per-item minW/maxW/minH/maxH properties.
* This is applied by default after gridBounds.
*/
declare const minMaxSize: LayoutConstraint;
/**
* Container bounds constraint.
*
* Constrains items to stay within the visible container.
* Use this as a replacement for the legacy `isBounded` prop.
*
* Unlike gridBounds which uses maxRows (which may be Infinity),
* this constraint calculates visible rows from the actual container height.
* Falls back to maxRows if containerHeight is 0 (auto-height grids).
*/
declare const containerBounds: LayoutConstraint;
/**
* Bounded X constraint.
*
* Only constrains horizontal position (x-axis).
* Items can move freely in the vertical direction.
*/
declare const boundedX: LayoutConstraint;
/**
* Bounded Y constraint.
*
* Only constrains vertical position (y-axis).
* Items can move freely in the horizontal direction.
*/
declare const boundedY: LayoutConstraint;
/**
* Create an aspect ratio constraint.
*
* Maintains a fixed width-to-height ratio **in pixels** during resize operations.
* Accounts for the different pixel sizes of grid columns vs rows.
*
* @param ratio - Width-to-height ratio (e.g., 16/9 for widescreen, 1 for square)
* @returns A constraint that enforces the aspect ratio
*
* @example
* ```typescript
* // 16:9 aspect ratio (actual pixel proportions)
* const layout = [
* { i: 'video', x: 0, y: 0, w: 4, h: 2, constraints: [aspectRatio(16/9)] }
* ];
*
* // Square items (in pixels, not grid units)
* <GridLayout constraints={[gridBounds, minMaxSize, aspectRatio(1)]} />
* ```
*/
declare function aspectRatio(ratio: number): LayoutConstraint;
/**
* Create a snap-to-grid constraint.
*
* Snaps positions to multiples of the specified step values.
* Useful for aligning items to a coarser grid.
*
* @param stepX - Horizontal snap step in grid units
* @param stepY - Vertical snap step in grid units (defaults to stepX)
* @returns A constraint that snaps positions to the grid
*
* @example
* ```typescript
* // Snap to every 2 grid units
* <GridLayout constraints={[snapToGrid(2), gridBounds]} />
*
* // Different horizontal and vertical snap
* <GridLayout constraints={[snapToGrid(2, 3), gridBounds]} />
* ```
*/
declare function snapToGrid(stepX: number, stepY?: number): LayoutConstraint;
/**
* Create a minimum size constraint.
*
* Sets minimum width and height for all items using this constraint.
* Useful for grid-wide minimums without setting minW/minH on each item.
*
* @param minW - Minimum width in grid units
* @param minH - Minimum height in grid units
* @returns A constraint that enforces minimum size
*/
declare function minSize(minW: number, minH: number): LayoutConstraint;
/**
* Create a maximum size constraint.
*
* Sets maximum width and height for all items using this constraint.
* Useful for grid-wide maximums without setting maxW/maxH on each item.
*
* @param maxW - Maximum width in grid units
* @param maxH - Maximum height in grid units
* @returns A constraint that enforces maximum size
*/
declare function maxSize(maxW: number, maxH: number): LayoutConstraint;
/**
* Default constraints applied when none are specified.
*
* Includes:
* - gridBounds: Keep items within the grid
* - minMaxSize: Respect per-item min/max constraints
*/
declare const defaultConstraints: LayoutConstraint[];
/**
* Apply position constraints to a proposed position.
*
* Constraints are applied in array order, allowing composition.
* Grid-level constraints are applied first, then per-item constraints.
*
* @param constraints - Array of constraints to apply
* @param item - The layout item being positioned
* @param x - Proposed x position
* @param y - Proposed y position
* @param context - Grid context (cols, maxRows, etc.)
* @returns Constrained position
*/
declare function applyPositionConstraints(constraints: LayoutConstraint[], item: LayoutItem, x: number, y: number, context: ConstraintContext): {
x: number;
y: number;
};
/**
* Apply size constraints to a proposed size.
*
* Constraints are applied in array order, allowing composition.
* Grid-level constraints are applied first, then per-item constraints.
*
* @param constraints - Array of constraints to apply
* @param item - The layout item being resized
* @param w - Proposed width
* @param h - Proposed height
* @param handle - Which resize handle is being used
* @param context - Grid context (cols, maxRows, etc.)
* @returns Constrained size
*/
declare function applySizeConstraints(constraints: LayoutConstraint[], item: LayoutItem, w: number, h: number, handle: ResizeHandleAxis, context: ConstraintContext): {
w: number;
h: number;
};
export { CompactType, ConstraintContext, Layout, LayoutConstraint, LayoutItem, ResizeHandleAxis, applyPositionConstraints, applySizeConstraints, aspectRatio, boundedX, boundedY, compact, compactItem, containerBounds, defaultConstraints, gridBounds, maxSize, minMaxSize, minSize, snapToGrid };
'use strict';
require('./chunk-PBQSHIID.js');
var chunk3WO4SAYB_js = require('./chunk-3WO4SAYB.js');
var chunkF6NQPYKT_js = require('./chunk-F6NQPYKT.js');
require('./chunk-7ELO5FRW.js');
var chunkFN6MIZ24_js = require('./chunk-FN6MIZ24.js');
var chunkBJFPTW5Q_js = require('./chunk-BJFPTW5Q.js');

@@ -11,209 +11,265 @@

enumerable: true,
get: function () { return chunk3WO4SAYB_js.absoluteStrategy; }
get: function () { return chunkFN6MIZ24_js.absoluteStrategy; }
});
Object.defineProperty(exports, "bottom", {
Object.defineProperty(exports, "applyPositionConstraints", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.bottom; }
get: function () { return chunkFN6MIZ24_js.applyPositionConstraints; }
});
Object.defineProperty(exports, "cloneLayout", {
Object.defineProperty(exports, "applySizeConstraints", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.cloneLayout; }
get: function () { return chunkFN6MIZ24_js.applySizeConstraints; }
});
Object.defineProperty(exports, "cloneLayoutItem", {
Object.defineProperty(exports, "aspectRatio", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.cloneLayoutItem; }
get: function () { return chunkFN6MIZ24_js.aspectRatio; }
});
Object.defineProperty(exports, "collides", {
Object.defineProperty(exports, "boundedX", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.collides; }
get: function () { return chunkFN6MIZ24_js.boundedX; }
});
Object.defineProperty(exports, "boundedY", {
enumerable: true,
get: function () { return chunkFN6MIZ24_js.boundedY; }
});
Object.defineProperty(exports, "compact", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.compact; }
get: function () { return chunkFN6MIZ24_js.compact; }
});
Object.defineProperty(exports, "compactItem", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.compactItem; }
get: function () { return chunkFN6MIZ24_js.compactItem; }
});
Object.defineProperty(exports, "compactItemHorizontal", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.compactItemHorizontal; }
get: function () { return chunkFN6MIZ24_js.compactItemHorizontal; }
});
Object.defineProperty(exports, "compactItemVertical", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.compactItemVertical; }
get: function () { return chunkFN6MIZ24_js.compactItemVertical; }
});
Object.defineProperty(exports, "correctBounds", {
Object.defineProperty(exports, "containerBounds", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.correctBounds; }
get: function () { return chunkFN6MIZ24_js.containerBounds; }
});
Object.defineProperty(exports, "createScaledStrategy", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.createScaledStrategy; }
get: function () { return chunkFN6MIZ24_js.createScaledStrategy; }
});
Object.defineProperty(exports, "defaultConstraints", {
enumerable: true,
get: function () { return chunkFN6MIZ24_js.defaultConstraints; }
});
Object.defineProperty(exports, "defaultDragConfig", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.defaultDragConfig; }
get: function () { return chunkFN6MIZ24_js.defaultDragConfig; }
});
Object.defineProperty(exports, "defaultDropConfig", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.defaultDropConfig; }
get: function () { return chunkFN6MIZ24_js.defaultDropConfig; }
});
Object.defineProperty(exports, "defaultGridConfig", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.defaultGridConfig; }
get: function () { return chunkFN6MIZ24_js.defaultGridConfig; }
});
Object.defineProperty(exports, "defaultPositionStrategy", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.defaultPositionStrategy; }
get: function () { return chunkFN6MIZ24_js.defaultPositionStrategy; }
});
Object.defineProperty(exports, "defaultResizeConfig", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.defaultResizeConfig; }
get: function () { return chunkFN6MIZ24_js.defaultResizeConfig; }
});
Object.defineProperty(exports, "findOrGenerateResponsiveLayout", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.findOrGenerateResponsiveLayout; }
get: function () { return chunkFN6MIZ24_js.findOrGenerateResponsiveLayout; }
});
Object.defineProperty(exports, "getAllCollisions", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.getAllCollisions; }
});
Object.defineProperty(exports, "getBreakpointFromWidth", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.getBreakpointFromWidth; }
get: function () { return chunkFN6MIZ24_js.getBreakpointFromWidth; }
});
Object.defineProperty(exports, "getColsFromBreakpoint", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.getColsFromBreakpoint; }
get: function () { return chunkFN6MIZ24_js.getColsFromBreakpoint; }
});
Object.defineProperty(exports, "getCompactor", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.getCompactor; }
get: function () { return chunkFN6MIZ24_js.getCompactor; }
});
Object.defineProperty(exports, "getFirstCollision", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.getFirstCollision; }
});
Object.defineProperty(exports, "getIndentationValue", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.getIndentationValue; }
get: function () { return chunkFN6MIZ24_js.getIndentationValue; }
});
Object.defineProperty(exports, "getLayoutItem", {
Object.defineProperty(exports, "gridBounds", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.getLayoutItem; }
get: function () { return chunkFN6MIZ24_js.gridBounds; }
});
Object.defineProperty(exports, "getStatics", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.getStatics; }
});
Object.defineProperty(exports, "horizontalCompactor", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.horizontalCompactor; }
get: function () { return chunkFN6MIZ24_js.horizontalCompactor; }
});
Object.defineProperty(exports, "horizontalOverlapCompactor", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.horizontalOverlapCompactor; }
get: function () { return chunkFN6MIZ24_js.horizontalOverlapCompactor; }
});
Object.defineProperty(exports, "modifyLayout", {
Object.defineProperty(exports, "maxSize", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.modifyLayout; }
get: function () { return chunkFN6MIZ24_js.maxSize; }
});
Object.defineProperty(exports, "moveElement", {
Object.defineProperty(exports, "minMaxSize", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.moveElement; }
get: function () { return chunkFN6MIZ24_js.minMaxSize; }
});
Object.defineProperty(exports, "moveElementAwayFromCollision", {
Object.defineProperty(exports, "minSize", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.moveElementAwayFromCollision; }
get: function () { return chunkFN6MIZ24_js.minSize; }
});
Object.defineProperty(exports, "noCompactor", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.noCompactor; }
get: function () { return chunkFN6MIZ24_js.noCompactor; }
});
Object.defineProperty(exports, "perc", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.perc; }
get: function () { return chunkFN6MIZ24_js.perc; }
});
Object.defineProperty(exports, "resizeItemInDirection", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.resizeItemInDirection; }
get: function () { return chunkFN6MIZ24_js.resizeItemInDirection; }
});
Object.defineProperty(exports, "resolveCompactionCollision", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.resolveCompactionCollision; }
get: function () { return chunkFN6MIZ24_js.resolveCompactionCollision; }
});
Object.defineProperty(exports, "setTopLeft", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.setTopLeft; }
get: function () { return chunkFN6MIZ24_js.setTopLeft; }
});
Object.defineProperty(exports, "setTransform", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.setTransform; }
get: function () { return chunkFN6MIZ24_js.setTransform; }
});
Object.defineProperty(exports, "sortBreakpoints", {
Object.defineProperty(exports, "snapToGrid", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.sortBreakpoints; }
get: function () { return chunkFN6MIZ24_js.snapToGrid; }
});
Object.defineProperty(exports, "sortLayoutItems", {
Object.defineProperty(exports, "sortBreakpoints", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.sortLayoutItems; }
get: function () { return chunkFN6MIZ24_js.sortBreakpoints; }
});
Object.defineProperty(exports, "sortLayoutItemsByColRow", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.sortLayoutItemsByColRow; }
});
Object.defineProperty(exports, "sortLayoutItemsByRowCol", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.sortLayoutItemsByRowCol; }
});
Object.defineProperty(exports, "transformStrategy", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.transformStrategy; }
get: function () { return chunkFN6MIZ24_js.transformStrategy; }
});
Object.defineProperty(exports, "validateLayout", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.validateLayout; }
});
Object.defineProperty(exports, "verticalCompactor", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.verticalCompactor; }
get: function () { return chunkFN6MIZ24_js.verticalCompactor; }
});
Object.defineProperty(exports, "verticalOverlapCompactor", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.verticalOverlapCompactor; }
get: function () { return chunkFN6MIZ24_js.verticalOverlapCompactor; }
});
Object.defineProperty(exports, "withLayoutItem", {
Object.defineProperty(exports, "bottom", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.withLayoutItem; }
get: function () { return chunkBJFPTW5Q_js.bottom; }
});
Object.defineProperty(exports, "calcGridCellDimensions", {
enumerable: true,
get: function () { return chunkF6NQPYKT_js.calcGridCellDimensions; }
get: function () { return chunkBJFPTW5Q_js.calcGridCellDimensions; }
});
Object.defineProperty(exports, "calcGridColWidth", {
enumerable: true,
get: function () { return chunkF6NQPYKT_js.calcGridColWidth; }
get: function () { return chunkBJFPTW5Q_js.calcGridColWidth; }
});
Object.defineProperty(exports, "calcGridItemPosition", {
enumerable: true,
get: function () { return chunkF6NQPYKT_js.calcGridItemPosition; }
get: function () { return chunkBJFPTW5Q_js.calcGridItemPosition; }
});
Object.defineProperty(exports, "calcGridItemWHPx", {
enumerable: true,
get: function () { return chunkF6NQPYKT_js.calcGridItemWHPx; }
get: function () { return chunkBJFPTW5Q_js.calcGridItemWHPx; }
});
Object.defineProperty(exports, "calcWH", {
enumerable: true,
get: function () { return chunkF6NQPYKT_js.calcWH; }
get: function () { return chunkBJFPTW5Q_js.calcWH; }
});
Object.defineProperty(exports, "calcWHRaw", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.calcWHRaw; }
});
Object.defineProperty(exports, "calcXY", {
enumerable: true,
get: function () { return chunkF6NQPYKT_js.calcXY; }
get: function () { return chunkBJFPTW5Q_js.calcXY; }
});
Object.defineProperty(exports, "calcXYRaw", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.calcXYRaw; }
});
Object.defineProperty(exports, "clamp", {
enumerable: true,
get: function () { return chunkF6NQPYKT_js.clamp; }
get: function () { return chunkBJFPTW5Q_js.clamp; }
});
Object.defineProperty(exports, "cloneLayout", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.cloneLayout; }
});
Object.defineProperty(exports, "cloneLayoutItem", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.cloneLayoutItem; }
});
Object.defineProperty(exports, "collides", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.collides; }
});
Object.defineProperty(exports, "correctBounds", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.correctBounds; }
});
Object.defineProperty(exports, "getAllCollisions", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.getAllCollisions; }
});
Object.defineProperty(exports, "getFirstCollision", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.getFirstCollision; }
});
Object.defineProperty(exports, "getLayoutItem", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.getLayoutItem; }
});
Object.defineProperty(exports, "getStatics", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.getStatics; }
});
Object.defineProperty(exports, "modifyLayout", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.modifyLayout; }
});
Object.defineProperty(exports, "moveElement", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.moveElement; }
});
Object.defineProperty(exports, "moveElementAwayFromCollision", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.moveElementAwayFromCollision; }
});
Object.defineProperty(exports, "sortLayoutItems", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.sortLayoutItems; }
});
Object.defineProperty(exports, "sortLayoutItemsByColRow", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.sortLayoutItemsByColRow; }
});
Object.defineProperty(exports, "sortLayoutItemsByRowCol", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.sortLayoutItemsByRowCol; }
});
Object.defineProperty(exports, "validateLayout", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.validateLayout; }
});
Object.defineProperty(exports, "withLayoutItem", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.withLayoutItem; }
});
//# sourceMappingURL=core.js.map
//# sourceMappingURL=core.js.map

@@ -1,5 +0,5 @@

import './chunk-ZWN22PS2.mjs';
export { absoluteStrategy, bottom, cloneLayout, cloneLayoutItem, collides, compact, compactItem, compactItemHorizontal, compactItemVertical, correctBounds, createScaledStrategy, defaultDragConfig, defaultDropConfig, defaultGridConfig, defaultPositionStrategy, defaultResizeConfig, findOrGenerateResponsiveLayout, getAllCollisions, getBreakpointFromWidth, getColsFromBreakpoint, getCompactor, getFirstCollision, getIndentationValue, getLayoutItem, getStatics, horizontalCompactor, horizontalOverlapCompactor, modifyLayout, moveElement, moveElementAwayFromCollision, noCompactor, perc, resizeItemInDirection, resolveCompactionCollision, setTopLeft, setTransform, sortBreakpoints, sortLayoutItems, sortLayoutItemsByColRow, sortLayoutItemsByRowCol, transformStrategy, validateLayout, verticalCompactor, verticalOverlapCompactor, withLayoutItem } from './chunk-4HNUMWQK.mjs';
export { calcGridCellDimensions, calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp } from './chunk-2KUHNJXF.mjs';
import './chunk-526JND3R.mjs';
export { absoluteStrategy, applyPositionConstraints, applySizeConstraints, aspectRatio, boundedX, boundedY, compact, compactItem, compactItemHorizontal, compactItemVertical, containerBounds, createScaledStrategy, defaultConstraints, defaultDragConfig, defaultDropConfig, defaultGridConfig, defaultPositionStrategy, defaultResizeConfig, findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, getCompactor, getIndentationValue, gridBounds, horizontalCompactor, horizontalOverlapCompactor, maxSize, minMaxSize, minSize, noCompactor, perc, resizeItemInDirection, resolveCompactionCollision, setTopLeft, setTransform, snapToGrid, sortBreakpoints, transformStrategy, verticalCompactor, verticalOverlapCompactor } from './chunk-2O3ZME4Q.mjs';
export { bottom, calcGridCellDimensions, calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcWHRaw, calcXY, calcXYRaw, clamp, cloneLayout, cloneLayoutItem, collides, correctBounds, getAllCollisions, getFirstCollision, getLayoutItem, getStatics, modifyLayout, moveElement, moveElementAwayFromCollision, sortLayoutItems, sortLayoutItemsByColRow, sortLayoutItemsByRowCol, validateLayout, withLayoutItem } from './chunk-AWM66AWF.mjs';
//# sourceMappingURL=core.mjs.map
//# sourceMappingURL=core.mjs.map
import * as React from 'react';
import { d as GridCellConfig } from './calculate-CwYDW8na.mjs';
import './types-Cxf4nHNr.mjs';
import { d as GridCellConfig } from './calculate-DwbL1D06.mjs';
import { c as Compactor } from './types-CokovIMH.mjs';

@@ -78,2 +78,132 @@ /**

export { GridBackground, type GridBackgroundProps };
/**
* Fast Vertical Compactor
*
* An optimized vertical compaction algorithm using a "rising tide" approach.
* This algorithm has O(n log n) complexity (dominated by sorting) compared to
* the default vertical compactor which can have O(n²) complexity due to
* recursive collision resolution.
*
* Best suited for large layouts (200+ items) where compaction performance
* is critical. For smaller layouts, the difference is negligible.
*
* Based on the algorithm from PR #2152 by Morris Brodersen (@morris).
*
* @example
* ```tsx
* import { fastVerticalCompactor } from 'react-grid-layout/extras';
*
* <GridLayout
* compactor={fastVerticalCompactor}
* layout={layout}
* // ...
* />
* ```
*/
/**
* Fast vertical compactor - optimized for large layouts.
*
* Uses a "rising tide" algorithm that achieves O(n log n) complexity
* instead of the potentially O(n²) recursive collision resolution.
*
* Best suited for layouts with 200+ items where compaction performance
* becomes noticeable. For smaller layouts, the standard verticalCompactor
* works equally well.
*/
declare const fastVerticalCompactor: Compactor;
/**
* Fast vertical compactor that allows overlapping items.
*
* Compacts items upward but allows them to overlap each other.
*/
declare const fastVerticalOverlapCompactor: Compactor;
/**
* Fast Horizontal Compactor
*
* An optimized horizontal compaction algorithm using a "sweeping tide" approach.
* This algorithm has O(n log n) complexity (dominated by sorting) compared to
* the default horizontal compactor which can have O(n²) complexity due to
* recursive collision resolution.
*
* Best suited for large layouts (200+ items) where compaction performance
* is critical. For smaller layouts, the difference is negligible.
*
* Adapted from the vertical fast compactor algorithm from PR #2152 by Morris Brodersen (@morris).
*
* @example
* ```tsx
* import { fastHorizontalCompactor } from 'react-grid-layout/extras';
*
* <GridLayout
* compactor={fastHorizontalCompactor}
* layout={layout}
* // ...
* />
* ```
*/
/**
* Fast horizontal compactor - optimized for large layouts.
*
* Uses a "sweeping tide" algorithm that achieves O(n log n) complexity
* instead of the potentially O(n²) recursive collision resolution.
*
* Best suited for layouts with 200+ items where compaction performance
* becomes noticeable. For smaller layouts, the standard horizontalCompactor
* works equally well.
*/
declare const fastHorizontalCompactor: Compactor;
/**
* Fast horizontal compactor that allows overlapping items.
*
* Compacts items leftward but allows them to overlap each other.
*/
declare const fastHorizontalOverlapCompactor: Compactor;
/**
* Wrap Compactor
*
* A compaction algorithm that treats grid items like words in a paragraph.
* Items flow left-to-right, wrapping to the next row when they reach
* the grid edge.
*
* When dragging:
* - Moving an item earlier in the sequence shifts other items down/right
* - Moving an item later in the sequence shifts other items up/left
*
* This creates a natural reordering behavior similar to drag-and-drop
* in file managers or card layouts.
*
* Based on the algorithm from PR #1773 by John Thomson (@JohnThomson).
*
* @example
* ```tsx
* import { wrapCompactor } from 'react-grid-layout/extras';
*
* <GridLayout
* compactor={wrapCompactor}
* layout={layout}
* // ...
* />
* ```
*/
/**
* Wrap compactor - arranges items like words in a paragraph.
*
* Items flow left-to-right and wrap to the next row when they
* reach the grid edge. Dragging an item reorders the sequence,
* with other items shifting to maintain the flow.
*
* Works best with uniformly-sized items (especially 1x1), but
* handles larger items by ensuring they fit within row bounds.
*/
declare const wrapCompactor: Compactor;
/**
* Wrap compactor that allows overlapping items.
*/
declare const wrapOverlapCompactor: Compactor;
export { GridBackground, type GridBackgroundProps, fastHorizontalCompactor, fastHorizontalOverlapCompactor, fastVerticalCompactor, fastVerticalOverlapCompactor, wrapCompactor, wrapOverlapCompactor };
import * as React from 'react';
import { d as GridCellConfig } from './calculate-mgLpNJ5O.js';
import './types-Cxf4nHNr.js';
import { d as GridCellConfig } from './calculate-DsVTldEE.js';
import { c as Compactor } from './types-CokovIMH.js';

@@ -78,2 +78,132 @@ /**

export { GridBackground, type GridBackgroundProps };
/**
* Fast Vertical Compactor
*
* An optimized vertical compaction algorithm using a "rising tide" approach.
* This algorithm has O(n log n) complexity (dominated by sorting) compared to
* the default vertical compactor which can have O(n²) complexity due to
* recursive collision resolution.
*
* Best suited for large layouts (200+ items) where compaction performance
* is critical. For smaller layouts, the difference is negligible.
*
* Based on the algorithm from PR #2152 by Morris Brodersen (@morris).
*
* @example
* ```tsx
* import { fastVerticalCompactor } from 'react-grid-layout/extras';
*
* <GridLayout
* compactor={fastVerticalCompactor}
* layout={layout}
* // ...
* />
* ```
*/
/**
* Fast vertical compactor - optimized for large layouts.
*
* Uses a "rising tide" algorithm that achieves O(n log n) complexity
* instead of the potentially O(n²) recursive collision resolution.
*
* Best suited for layouts with 200+ items where compaction performance
* becomes noticeable. For smaller layouts, the standard verticalCompactor
* works equally well.
*/
declare const fastVerticalCompactor: Compactor;
/**
* Fast vertical compactor that allows overlapping items.
*
* Compacts items upward but allows them to overlap each other.
*/
declare const fastVerticalOverlapCompactor: Compactor;
/**
* Fast Horizontal Compactor
*
* An optimized horizontal compaction algorithm using a "sweeping tide" approach.
* This algorithm has O(n log n) complexity (dominated by sorting) compared to
* the default horizontal compactor which can have O(n²) complexity due to
* recursive collision resolution.
*
* Best suited for large layouts (200+ items) where compaction performance
* is critical. For smaller layouts, the difference is negligible.
*
* Adapted from the vertical fast compactor algorithm from PR #2152 by Morris Brodersen (@morris).
*
* @example
* ```tsx
* import { fastHorizontalCompactor } from 'react-grid-layout/extras';
*
* <GridLayout
* compactor={fastHorizontalCompactor}
* layout={layout}
* // ...
* />
* ```
*/
/**
* Fast horizontal compactor - optimized for large layouts.
*
* Uses a "sweeping tide" algorithm that achieves O(n log n) complexity
* instead of the potentially O(n²) recursive collision resolution.
*
* Best suited for layouts with 200+ items where compaction performance
* becomes noticeable. For smaller layouts, the standard horizontalCompactor
* works equally well.
*/
declare const fastHorizontalCompactor: Compactor;
/**
* Fast horizontal compactor that allows overlapping items.
*
* Compacts items leftward but allows them to overlap each other.
*/
declare const fastHorizontalOverlapCompactor: Compactor;
/**
* Wrap Compactor
*
* A compaction algorithm that treats grid items like words in a paragraph.
* Items flow left-to-right, wrapping to the next row when they reach
* the grid edge.
*
* When dragging:
* - Moving an item earlier in the sequence shifts other items down/right
* - Moving an item later in the sequence shifts other items up/left
*
* This creates a natural reordering behavior similar to drag-and-drop
* in file managers or card layouts.
*
* Based on the algorithm from PR #1773 by John Thomson (@JohnThomson).
*
* @example
* ```tsx
* import { wrapCompactor } from 'react-grid-layout/extras';
*
* <GridLayout
* compactor={wrapCompactor}
* layout={layout}
* // ...
* />
* ```
*/
/**
* Wrap compactor - arranges items like words in a paragraph.
*
* Items flow left-to-right and wrap to the next row when they
* reach the grid edge. Dragging an item reorders the sequence,
* with other items shifting to maintain the flow.
*
* Works best with uniformly-sized items (especially 1x1), but
* handles larger items by ensuring they fit within row bounds.
*/
declare const wrapCompactor: Compactor;
/**
* Wrap compactor that allows overlapping items.
*/
declare const wrapOverlapCompactor: Compactor;
export { GridBackground, type GridBackgroundProps, fastHorizontalCompactor, fastHorizontalOverlapCompactor, fastVerticalCompactor, fastVerticalOverlapCompactor, wrapCompactor, wrapOverlapCompactor };
'use strict';
var chunkF6NQPYKT_js = require('./chunk-F6NQPYKT.js');
var chunkBJFPTW5Q_js = require('./chunk-BJFPTW5Q.js');
var react = require('react');

@@ -21,3 +21,3 @@ var jsxRuntime = require('react/jsx-runtime');

const dims = react.useMemo(
() => chunkF6NQPYKT_js.calcGridCellDimensions({
() => chunkBJFPTW5Q_js.calcGridCellDimensions({
width,

@@ -90,4 +90,375 @@ cols,

// src/extras/fastVerticalCompactor.ts
function collides(l1, l2) {
if (l1.i === l2.i) return false;
return l1.x < l2.x + l2.w && l1.x + l1.w > l2.x && l1.y < l2.y + l2.h && l1.y + l1.h > l2.y;
}
function compactVerticalFast(layout, cols, allowOverlap) {
const numItems = layout.length;
layout.sort((a, b) => {
if (a.y < b.y) return -1;
if (a.y > b.y) return 1;
if (a.x < b.x) return -1;
if (a.x > b.x) return 1;
if (a.static && !b.static) return -1;
if (!a.static && b.static) return 1;
return 0;
});
const tide = new Array(cols).fill(0);
const staticItems = layout.filter((item) => item.static);
const numStatics = staticItems.length;
let staticOffset = 0;
for (let i = 0; i < numItems; i++) {
const item = layout[i];
let x2 = item.x + item.w;
if (x2 > cols) {
x2 = cols;
}
if (item.static) {
++staticOffset;
} else {
let minGap = Infinity;
for (let x = item.x; x < x2; ++x) {
const tideValue = tide[x] ?? 0;
const gap = item.y - tideValue;
if (gap < minGap) {
minGap = gap;
}
}
if (!allowOverlap || minGap > 0) {
item.y -= minGap;
}
for (let j = staticOffset; !allowOverlap && j < numStatics; ++j) {
const staticItem = staticItems[j];
if (staticItem === void 0) continue;
if (staticItem.y >= item.y + item.h) {
break;
}
if (collides(item, staticItem)) {
item.y = staticItem.y + staticItem.h;
if (j > staticOffset) {
j = staticOffset;
}
}
}
item.moved = false;
}
const t = item.y + item.h;
for (let x = item.x; x < x2; ++x) {
const currentTide = tide[x] ?? 0;
if (currentTide < t) {
tide[x] = t;
}
}
}
}
var fastVerticalCompactor = {
type: "vertical",
allowOverlap: false,
compact(layout, cols) {
const out = chunkBJFPTW5Q_js.cloneLayout(layout);
compactVerticalFast(out, cols, false);
return out;
},
onMove(layout, item, x, y, _cols) {
const newLayout = chunkBJFPTW5Q_js.cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (movedItem) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
}
return newLayout;
}
};
var fastVerticalOverlapCompactor = {
...fastVerticalCompactor,
allowOverlap: true,
compact(layout, cols) {
const out = chunkBJFPTW5Q_js.cloneLayout(layout);
compactVerticalFast(out, cols, true);
return out;
}
};
// src/extras/fastHorizontalCompactor.ts
function ensureTideRows(tide, neededRows) {
while (tide.length < neededRows) {
tide.push(0);
}
}
function getMaxTideForItem(tide, y, h) {
let maxTide = 0;
for (let row = y; row < y + h; row++) {
const tideValue = tide[row] ?? 0;
if (tideValue > maxTide) {
maxTide = tideValue;
}
}
return maxTide;
}
function canPlaceAt(item, x, y, staticItems, cols) {
if (x + item.w > cols) return false;
for (const staticItem of staticItems) {
if (x < staticItem.x + staticItem.w && x + item.w > staticItem.x && y < staticItem.y + staticItem.h && y + item.h > staticItem.y) {
return false;
}
}
return true;
}
function compactHorizontalFast(layout, cols, allowOverlap) {
const numItems = layout.length;
if (numItems === 0) return;
layout.sort((a, b) => {
if (a.x !== b.x) return a.x - b.x;
if (a.y !== b.y) return a.y - b.y;
if (a.static !== b.static) return a.static ? -1 : 1;
return 0;
});
let maxRow = 0;
for (let i = 0; i < numItems; i++) {
const item = layout[i];
if (item !== void 0) {
const bottom = item.y + item.h;
if (bottom > maxRow) maxRow = bottom;
}
}
const tide = new Array(maxRow).fill(0);
const staticItems = layout.filter((item) => item.static);
const maxRowLimit = Math.max(1e4, numItems * 100);
for (let i = 0; i < numItems; i++) {
const item = layout[i];
if (item.static) {
ensureTideRows(tide, item.y + item.h);
const t2 = item.x + item.w;
for (let y = item.y; y < item.y + item.h; y++) {
if ((tide[y] ?? 0) < t2) {
tide[y] = t2;
}
}
continue;
}
let targetY = item.y;
let targetX = 0;
let placed = false;
while (!placed) {
ensureTideRows(tide, targetY + item.h);
const maxTide = getMaxTideForItem(tide, targetY, item.h);
targetX = maxTide;
if (targetX + item.w <= cols) {
if (allowOverlap || canPlaceAt(item, targetX, targetY, staticItems, cols)) {
placed = true;
} else {
let maxStaticRight = targetX;
let foundCollision = false;
for (const staticItem of staticItems) {
if (targetX < staticItem.x + staticItem.w && targetX + item.w > staticItem.x && targetY < staticItem.y + staticItem.h && targetY + item.h > staticItem.y) {
maxStaticRight = Math.max(
maxStaticRight,
staticItem.x + staticItem.w
);
foundCollision = true;
}
}
if (foundCollision) {
targetX = maxStaticRight;
}
if (foundCollision && targetX + item.w <= cols) {
if (canPlaceAt(item, targetX, targetY, staticItems, cols)) {
placed = true;
} else {
targetY++;
}
} else if (foundCollision) {
targetY++;
} else {
placed = true;
}
}
} else {
targetY++;
}
if (targetY > maxRowLimit) {
if (typeof console !== "undefined" && console.warn) {
console.warn(
`Fast horizontal compactor: Item "${item.i}" exceeded max row limit (${targetY}). This may indicate a layout that cannot be compacted within grid bounds.`
);
}
targetX = 0;
placed = true;
}
}
item.x = targetX;
item.y = targetY;
item.moved = false;
ensureTideRows(tide, targetY + item.h);
const t = targetX + item.w;
for (let y = targetY; y < targetY + item.h; y++) {
if ((tide[y] ?? 0) < t) {
tide[y] = t;
}
}
}
}
var fastHorizontalCompactor = {
type: "horizontal",
allowOverlap: false,
compact(layout, cols) {
const out = chunkBJFPTW5Q_js.cloneLayout(layout);
compactHorizontalFast(out, cols, false);
return out;
},
onMove(layout, item, x, y, _cols) {
const newLayout = chunkBJFPTW5Q_js.cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (movedItem) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
}
return newLayout;
}
};
var fastHorizontalOverlapCompactor = {
...fastHorizontalCompactor,
allowOverlap: true,
compact(layout, cols) {
const out = chunkBJFPTW5Q_js.cloneLayout(layout);
compactHorizontalFast(out, cols, true);
return out;
}
};
// src/extras/wrapCompactor.ts
function sortByWrapOrder(layout) {
return [...layout].sort((a, b) => {
if (a.y !== b.y) return a.y - b.y;
return a.x - b.x;
});
}
function getWrapPosition(item, cols) {
return item.y * cols + item.x;
}
function fromWrapPosition(pos, cols) {
return {
x: pos % cols,
y: Math.floor(pos / cols)
};
}
function compactWrap(layout, cols) {
if (layout.length === 0) return [];
const sorted = sortByWrapOrder(layout);
const out = new Array(layout.length);
const statics = sorted.filter((item) => item.static);
const staticPositions = /* @__PURE__ */ new Set();
for (const s of statics) {
for (let dy = 0; dy < s.h; dy++) {
for (let dx = 0; dx < s.w; dx++) {
staticPositions.add((s.y + dy) * cols + (s.x + dx));
}
}
}
let nextPos = 0;
for (let i = 0; i < sorted.length; i++) {
const sortedItem = sorted[i];
if (sortedItem === void 0) continue;
const l = chunkBJFPTW5Q_js.cloneLayoutItem(sortedItem);
if (l.static) {
const originalIndex2 = layout.indexOf(sortedItem);
out[originalIndex2] = l;
l.moved = false;
continue;
}
while (staticPositions.has(nextPos)) {
nextPos++;
}
const { x, y } = fromWrapPosition(nextPos, cols);
if (x + l.w > cols) {
nextPos = (y + 1) * cols;
while (staticPositions.has(nextPos)) {
nextPos++;
}
}
const newCoords = fromWrapPosition(nextPos, cols);
l.x = newCoords.x;
l.y = newCoords.y;
nextPos += l.w;
const originalIndex = layout.indexOf(sortedItem);
out[originalIndex] = l;
l.moved = false;
}
return out;
}
function moveInWrapMode(layout, item, x, y, cols) {
const newLayout = chunkBJFPTW5Q_js.cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (!movedItem) {
return newLayout;
}
const oldPos = getWrapPosition(movedItem, cols);
const newPos = getWrapPosition({ ...movedItem, x, y }, cols);
if (oldPos === newPos) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
return newLayout;
}
const isMovingEarlier = newPos < oldPos;
const sortedItems = newLayout.filter((l) => !l.static).sort((a, b) => getWrapPosition(a, cols) - getWrapPosition(b, cols));
if (isMovingEarlier) {
for (const l of sortedItems) {
const pos = getWrapPosition(l, cols);
if (l.i === item.i) continue;
if (pos >= newPos && pos < oldPos) {
const shiftedPos = pos + 1;
const coords = fromWrapPosition(shiftedPos, cols);
l.x = coords.x;
l.y = coords.y;
l.moved = true;
}
}
} else {
for (const l of sortedItems) {
const pos = getWrapPosition(l, cols);
if (l.i === item.i) continue;
if (pos > oldPos && pos <= newPos) {
const shiftedPos = pos - 1;
const coords = fromWrapPosition(shiftedPos, cols);
l.x = coords.x;
l.y = coords.y;
l.moved = true;
}
}
}
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
return newLayout;
}
var wrapCompactor = {
type: "wrap",
allowOverlap: false,
compact(layout, cols) {
return compactWrap(layout, cols);
},
onMove(layout, item, x, y, cols) {
return moveInWrapMode(layout, item, x, y, cols);
}
};
var wrapOverlapCompactor = {
...wrapCompactor,
allowOverlap: true,
compact(layout, _cols) {
return chunkBJFPTW5Q_js.cloneLayout(layout);
}
};
exports.GridBackground = GridBackground;
exports.fastHorizontalCompactor = fastHorizontalCompactor;
exports.fastHorizontalOverlapCompactor = fastHorizontalOverlapCompactor;
exports.fastVerticalCompactor = fastVerticalCompactor;
exports.fastVerticalOverlapCompactor = fastVerticalOverlapCompactor;
exports.wrapCompactor = wrapCompactor;
exports.wrapOverlapCompactor = wrapOverlapCompactor;
//# sourceMappingURL=extras.js.map
//# sourceMappingURL=extras.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../src/extras/GridBackground.tsx"],"names":["useMemo","calcGridCellDimensions","jsx"],"mappings":";;;;;;AAkFO,SAAS,cAAA,CAAe;AAAA,EAC7B,KAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA,GAAS,CAAC,EAAA,EAAI,EAAE,CAAA;AAAA,EAChB,gBAAA;AAAA,EACA,IAAA,GAAO,EAAA;AAAA,EACP,MAAA;AAAA,EACA,KAAA,GAAQ,SAAA;AAAA,EACR,YAAA,GAAe,CAAA;AAAA,EACf,SAAA;AAAA,EACA;AACF,CAAA,EAA4C;AAC1C,EAAA,MAAM,IAAA,GAAOA,aAAA;AAAA,IACX,MACEC,uCAAA,CAAuB;AAAA,MACrB,KAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA,IACH,CAAC,KAAA,EAAO,IAAA,EAAM,SAAA,EAAW,QAAQ,gBAAgB;AAAA,GACnD;AAGA,EAAA,MAAM,QAAA,GAAWD,cAAQ,MAAM;AAC7B,IAAA,IAAI,IAAA,KAAS,QAAQ,OAAO,IAAA;AAC5B,IAAA,IAAI,MAAA,EAAQ;AAEV,MAAA,MAAM,UAAU,gBAAA,IAAoB,MAAA;AACpC,MAAA,OAAO,IAAA,CAAK,IAAA;AAAA,QAAA,CACT,MAAA,GAAS,OAAA,CAAQ,CAAC,CAAA,GAAI,CAAA,GAAI,OAAO,CAAC,CAAA,KAAM,SAAA,GAAY,MAAA,CAAO,CAAC,CAAA;AAAA,OAC/D;AAAA,IACF;AACA,IAAA,OAAO,EAAA;AAAA,EACT,GAAG,CAAC,IAAA,EAAM,QAAQ,SAAA,EAAW,MAAA,EAAQ,gBAAgB,CAAC,CAAA;AAGtD,EAAA,MAAM,WAAA,GAAcA,cAAQ,MAAM;AAChC,IAAA,MAAM,UAAU,gBAAA,IAAoB,MAAA;AACpC,IAAA,OAAO,OAAA,CAAQ,CAAC,CAAA,GAAI,CAAA,GAAI,WAAW,SAAA,GAAA,CAAa,QAAA,GAAW,CAAA,IAAK,MAAA,CAAO,CAAC,CAAA;AAAA,EAC1E,GAAG,CAAC,QAAA,EAAU,SAAA,EAAW,MAAA,EAAQ,gBAAgB,CAAC,CAAA;AAGlD,EAAA,MAAM,KAAA,GAAQA,cAAQ,MAAM;AAC1B,IAAA,MAAM,QAA8B,EAAC;AACrC,IAAA,MAAM,EAAE,SAAA,EAAW,UAAA,EAAY,SAAS,OAAA,EAAS,IAAA,EAAM,MAAK,GAAI,IAAA;AAEhE,IAAA,KAAA,IAAS,GAAA,GAAM,CAAA,EAAG,GAAA,GAAM,QAAA,EAAU,GAAA,EAAA,EAAO;AACvC,MAAA,KAAA,IAAS,GAAA,GAAM,CAAA,EAAG,GAAA,GAAM,IAAA,EAAM,GAAA,EAAA,EAAO;AACnC,QAAA,MAAM,CAAA,GAAI,OAAA,GAAU,GAAA,IAAO,SAAA,GAAY,IAAA,CAAA;AACvC,QAAA,MAAM,CAAA,GAAI,OAAA,GAAU,GAAA,IAAO,UAAA,GAAa,IAAA,CAAA;AAExC,QAAA,KAAA,CAAM,IAAA;AAAA,0BACJE,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cAEC,CAAA;AAAA,cACA,CAAA;AAAA,cACA,KAAA,EAAO,SAAA;AAAA,cACP,MAAA,EAAQ,UAAA;AAAA,cACR,EAAA,EAAI,YAAA;AAAA,cACJ,EAAA,EAAI,YAAA;AAAA,cACJ,IAAA,EAAM;AAAA,aAAA;AAAA,YAPD,CAAA,EAAG,GAAG,CAAA,CAAA,EAAI,GAAG,CAAA;AAAA;AAQpB,SACF;AAAA,MACF;AAAA,IACF;AAEA,IAAA,OAAO,KAAA;AAAA,EACT,GAAG,CAAC,IAAA,EAAM,UAAU,IAAA,EAAM,YAAA,EAAc,KAAK,CAAC,CAAA;AAE9C,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACL,QAAA,EAAU,UAAA;AAAA,QACV,GAAA,EAAK,CAAA;AAAA,QACL,IAAA,EAAM,CAAA;AAAA,QACN,KAAA;AAAA,QACA,MAAA,EAAQ,WAAA;AAAA,QACR,aAAA,EAAe,MAAA;AAAA,QACf,GAAG;AAAA,OACL;AAAA,MACA,aAAA,EAAY,MAAA;AAAA,MAEX,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"extras.js","sourcesContent":["/**\n * GridBackground component\n *\n * Renders an SVG grid background that aligns with GridLayout cells.\n * Use this to visualize the grid structure behind your layout.\n */\n\nimport * as React from \"react\";\nimport { useMemo } from \"react\";\nimport { calcGridCellDimensions } from \"../core/calculate.js\";\nimport type { GridCellConfig } from \"../core/calculate.js\";\n\nexport interface GridBackgroundProps extends GridCellConfig {\n /**\n * Number of rows to display. If \"auto\", calculates based on height.\n * @default 10\n */\n rows?: number | \"auto\";\n\n /**\n * Height of the background in pixels. Used when rows=\"auto\".\n */\n height?: number;\n\n /**\n * Color of the grid cell backgrounds.\n * @default \"#e0e0e0\"\n */\n color?: string;\n\n /**\n * Border radius of grid cells in pixels.\n * @default 4\n */\n borderRadius?: number;\n\n /**\n * Additional CSS class name.\n */\n className?: string;\n\n /**\n * Additional inline styles.\n */\n style?: React.CSSProperties;\n}\n\n/**\n * SVG grid background component.\n *\n * Renders a visual grid that aligns with GridLayout cells. Position this\n * behind your GridLayout using CSS positioning.\n *\n * @example\n * ```tsx\n * import { GridBackground } from 'react-grid-layout/extras';\n *\n * function MyGrid() {\n * const { width, containerRef, mounted } = useContainerWidth();\n *\n * return (\n * <div ref={containerRef} style={{ position: 'relative' }}>\n * {mounted && (\n * <>\n * <GridBackground\n * width={width}\n * cols={12}\n * rowHeight={30}\n * margin={[10, 10]}\n * rows={10}\n * color=\"#f0f0f0\"\n * />\n * <GridLayout width={width} gridConfig={{ cols: 12, rowHeight: 30 }}>\n * {children}\n * </GridLayout>\n * </>\n * )}\n * </div>\n * );\n * }\n * ```\n */\nexport function GridBackground({\n width,\n cols,\n rowHeight,\n margin = [10, 10],\n containerPadding,\n rows = 10,\n height,\n color = \"#e0e0e0\",\n borderRadius = 4,\n className,\n style\n}: GridBackgroundProps): React.ReactElement {\n const dims = useMemo(\n () =>\n calcGridCellDimensions({\n width,\n cols,\n rowHeight,\n margin,\n containerPadding\n }),\n [width, cols, rowHeight, margin, containerPadding]\n );\n\n // Calculate number of rows\n const rowCount = useMemo(() => {\n if (rows !== \"auto\") return rows;\n if (height) {\n // Calculate rows that fit in the given height\n const padding = containerPadding ?? margin;\n return Math.ceil(\n (height - padding[1] * 2 + margin[1]) / (rowHeight + margin[1])\n );\n }\n return 10;\n }, [rows, height, rowHeight, margin, containerPadding]);\n\n // Calculate total height\n const totalHeight = useMemo(() => {\n const padding = containerPadding ?? margin;\n return padding[1] * 2 + rowCount * rowHeight + (rowCount - 1) * margin[1];\n }, [rowCount, rowHeight, margin, containerPadding]);\n\n // Generate cell rectangles\n const cells = useMemo(() => {\n const rects: React.ReactElement[] = [];\n const { cellWidth, cellHeight, offsetX, offsetY, gapX, gapY } = dims;\n\n for (let row = 0; row < rowCount; row++) {\n for (let col = 0; col < cols; col++) {\n const x = offsetX + col * (cellWidth + gapX);\n const y = offsetY + row * (cellHeight + gapY);\n\n rects.push(\n <rect\n key={`${row}-${col}`}\n x={x}\n y={y}\n width={cellWidth}\n height={cellHeight}\n rx={borderRadius}\n ry={borderRadius}\n fill={color}\n />\n );\n }\n }\n\n return rects;\n }, [dims, rowCount, cols, borderRadius, color]);\n\n return (\n <svg\n className={className}\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n width: width,\n height: totalHeight,\n pointerEvents: \"none\",\n ...style\n }}\n aria-hidden=\"true\"\n >\n {cells}\n </svg>\n );\n}\n\nexport default GridBackground;\n"]}
{"version":3,"sources":["../src/extras/GridBackground.tsx","../src/extras/fastVerticalCompactor.ts","../src/extras/fastHorizontalCompactor.ts","../src/extras/wrapCompactor.ts"],"names":["useMemo","calcGridCellDimensions","jsx","cloneLayout","t","cloneLayoutItem","originalIndex"],"mappings":"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","file":"extras.js","sourcesContent":["/**\n * GridBackground component\n *\n * Renders an SVG grid background that aligns with GridLayout cells.\n * Use this to visualize the grid structure behind your layout.\n */\n\nimport * as React from \"react\";\nimport { useMemo } from \"react\";\nimport { calcGridCellDimensions } from \"../core/calculate.js\";\nimport type { GridCellConfig } from \"../core/calculate.js\";\n\nexport interface GridBackgroundProps extends GridCellConfig {\n /**\n * Number of rows to display. If \"auto\", calculates based on height.\n * @default 10\n */\n rows?: number | \"auto\";\n\n /**\n * Height of the background in pixels. Used when rows=\"auto\".\n */\n height?: number;\n\n /**\n * Color of the grid cell backgrounds.\n * @default \"#e0e0e0\"\n */\n color?: string;\n\n /**\n * Border radius of grid cells in pixels.\n * @default 4\n */\n borderRadius?: number;\n\n /**\n * Additional CSS class name.\n */\n className?: string;\n\n /**\n * Additional inline styles.\n */\n style?: React.CSSProperties;\n}\n\n/**\n * SVG grid background component.\n *\n * Renders a visual grid that aligns with GridLayout cells. Position this\n * behind your GridLayout using CSS positioning.\n *\n * @example\n * ```tsx\n * import { GridBackground } from 'react-grid-layout/extras';\n *\n * function MyGrid() {\n * const { width, containerRef, mounted } = useContainerWidth();\n *\n * return (\n * <div ref={containerRef} style={{ position: 'relative' }}>\n * {mounted && (\n * <>\n * <GridBackground\n * width={width}\n * cols={12}\n * rowHeight={30}\n * margin={[10, 10]}\n * rows={10}\n * color=\"#f0f0f0\"\n * />\n * <GridLayout width={width} gridConfig={{ cols: 12, rowHeight: 30 }}>\n * {children}\n * </GridLayout>\n * </>\n * )}\n * </div>\n * );\n * }\n * ```\n */\nexport function GridBackground({\n width,\n cols,\n rowHeight,\n margin = [10, 10],\n containerPadding,\n rows = 10,\n height,\n color = \"#e0e0e0\",\n borderRadius = 4,\n className,\n style\n}: GridBackgroundProps): React.ReactElement {\n const dims = useMemo(\n () =>\n calcGridCellDimensions({\n width,\n cols,\n rowHeight,\n margin,\n containerPadding\n }),\n [width, cols, rowHeight, margin, containerPadding]\n );\n\n // Calculate number of rows\n const rowCount = useMemo(() => {\n if (rows !== \"auto\") return rows;\n if (height) {\n // Calculate rows that fit in the given height\n const padding = containerPadding ?? margin;\n return Math.ceil(\n (height - padding[1] * 2 + margin[1]) / (rowHeight + margin[1])\n );\n }\n return 10;\n }, [rows, height, rowHeight, margin, containerPadding]);\n\n // Calculate total height\n const totalHeight = useMemo(() => {\n const padding = containerPadding ?? margin;\n return padding[1] * 2 + rowCount * rowHeight + (rowCount - 1) * margin[1];\n }, [rowCount, rowHeight, margin, containerPadding]);\n\n // Generate cell rectangles\n const cells = useMemo(() => {\n const rects: React.ReactElement[] = [];\n const { cellWidth, cellHeight, offsetX, offsetY, gapX, gapY } = dims;\n\n for (let row = 0; row < rowCount; row++) {\n for (let col = 0; col < cols; col++) {\n const x = offsetX + col * (cellWidth + gapX);\n const y = offsetY + row * (cellHeight + gapY);\n\n rects.push(\n <rect\n key={`${row}-${col}`}\n x={x}\n y={y}\n width={cellWidth}\n height={cellHeight}\n rx={borderRadius}\n ry={borderRadius}\n fill={color}\n />\n );\n }\n }\n\n return rects;\n }, [dims, rowCount, cols, borderRadius, color]);\n\n return (\n <svg\n className={className}\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n width: width,\n height: totalHeight,\n pointerEvents: \"none\",\n ...style\n }}\n aria-hidden=\"true\"\n >\n {cells}\n </svg>\n );\n}\n\nexport default GridBackground;\n","/**\n * Fast Vertical Compactor\n *\n * An optimized vertical compaction algorithm using a \"rising tide\" approach.\n * This algorithm has O(n log n) complexity (dominated by sorting) compared to\n * the default vertical compactor which can have O(n²) complexity due to\n * recursive collision resolution.\n *\n * Best suited for large layouts (200+ items) where compaction performance\n * is critical. For smaller layouts, the difference is negligible.\n *\n * Based on the algorithm from PR #2152 by Morris Brodersen (@morris).\n *\n * @example\n * ```tsx\n * import { fastVerticalCompactor } from 'react-grid-layout/extras';\n *\n * <GridLayout\n * compactor={fastVerticalCompactor}\n * layout={layout}\n * // ...\n * />\n * ```\n */\n\nimport type { Compactor, Layout, LayoutItem, Mutable } from \"../core/types.js\";\nimport { cloneLayout } from \"../core/layout.js\";\n\n/**\n * Check if two layout items collide (overlap).\n */\nfunction collides(l1: LayoutItem, l2: LayoutItem): boolean {\n if (l1.i === l2.i) return false;\n return (\n l1.x < l2.x + l2.w &&\n l1.x + l1.w > l2.x &&\n l1.y < l2.y + l2.h &&\n l1.y + l1.h > l2.y\n );\n}\n\n/**\n * Fast vertical compaction using a \"rising tide\" algorithm.\n *\n * The algorithm works by:\n * 1. Sorting items by (y, x, static) - top-to-bottom, left-to-right\n * 2. Maintaining a \"tide\" array that tracks the highest occupied row per column\n * 3. For each item, moving it up to meet the tide (closing gaps)\n * 4. Checking for collisions with static items and adjusting as needed\n *\n * This avoids recursive collision resolution, making it O(n log n) overall.\n *\n * @param layout - The layout to compact (will be modified in place)\n * @param cols - Number of columns in the grid\n * @param allowOverlap - Whether to allow overlapping items\n */\nfunction compactVerticalFast(\n layout: LayoutItem[],\n cols: number,\n allowOverlap: boolean\n): void {\n const numItems = layout.length;\n\n // Sort items by position: top-to-bottom, left-to-right\n // Static items are sorted first at each position to reduce collision checks\n layout.sort((a, b) => {\n if (a.y < b.y) return -1;\n if (a.y > b.y) return 1;\n if (a.x < b.x) return -1;\n if (a.x > b.x) return 1;\n // Static items sorted first to reduce collision checks\n if (a.static && !b.static) return -1;\n if (!a.static && b.static) return 1;\n return 0;\n });\n\n // \"Rising tide\" - tracks the highest blocked row per column\n const tide: number[] = new Array(cols).fill(0);\n\n // Collect static items for collision checking\n const staticItems = layout.filter(item => item.static);\n const numStatics = staticItems.length;\n let staticOffset = 0;\n\n for (let i = 0; i < numItems; i++) {\n const item = layout[i] as Mutable<LayoutItem>;\n\n // Clamp x2 to grid bounds\n let x2 = item.x + item.w;\n if (x2 > cols) {\n x2 = cols;\n }\n\n if (item.static) {\n // Static items don't move; they become part of the tide\n // and don't need collision checks against themselves\n ++staticOffset;\n } else {\n // Find the minimum gap between the item and the tide\n let minGap = Infinity;\n for (let x = item.x; x < x2; ++x) {\n const tideValue = tide[x] ?? 0;\n const gap = item.y - tideValue;\n if (gap < minGap) {\n minGap = gap;\n }\n }\n\n // Close the gap (move item up to meet the tide)\n if (!allowOverlap || minGap > 0) {\n item.y -= minGap;\n }\n\n // Handle collisions with static items\n for (let j = staticOffset; !allowOverlap && j < numStatics; ++j) {\n const staticItem = staticItems[j];\n if (staticItem === undefined) continue;\n\n // Early exit: if static item is below current item, no more collisions possible\n if (staticItem.y >= item.y + item.h) {\n break;\n }\n\n if (collides(item, staticItem)) {\n // Move current item below the static item\n item.y = staticItem.y + staticItem.h;\n\n if (j > staticOffset) {\n // Item was moved; need to recheck with earlier static items\n // Note: j = staticOffset means after ++j we start at staticOffset + 1,\n // but staticItems[staticOffset] was already checked or is above us\n j = staticOffset;\n }\n }\n }\n\n // Reset moved flag\n item.moved = false;\n }\n\n // Update tide: mark columns as blocked up to item's bottom\n const t = item.y + item.h;\n for (let x = item.x; x < x2; ++x) {\n const currentTide = tide[x] ?? 0;\n if (currentTide < t) {\n tide[x] = t;\n }\n }\n }\n}\n\n/**\n * Fast vertical compactor - optimized for large layouts.\n *\n * Uses a \"rising tide\" algorithm that achieves O(n log n) complexity\n * instead of the potentially O(n²) recursive collision resolution.\n *\n * Best suited for layouts with 200+ items where compaction performance\n * becomes noticeable. For smaller layouts, the standard verticalCompactor\n * works equally well.\n */\nexport const fastVerticalCompactor: Compactor = {\n type: \"vertical\",\n allowOverlap: false,\n\n compact(layout: Layout, cols: number): Layout {\n // Clone the layout since we modify in place\n const out = cloneLayout(layout) as LayoutItem[];\n compactVerticalFast(out, cols, false);\n return out;\n },\n\n onMove(\n layout: Layout,\n item: LayoutItem,\n x: number,\n y: number,\n _cols: number\n ): Layout {\n // Simple move - compact() will be called after\n const newLayout = cloneLayout(layout) as Mutable<LayoutItem>[];\n const movedItem = newLayout.find(l => l.i === item.i);\n if (movedItem) {\n movedItem.x = x;\n movedItem.y = y;\n movedItem.moved = true;\n }\n return newLayout;\n }\n};\n\n/**\n * Fast vertical compactor that allows overlapping items.\n *\n * Compacts items upward but allows them to overlap each other.\n */\nexport const fastVerticalOverlapCompactor: Compactor = {\n ...fastVerticalCompactor,\n allowOverlap: true,\n\n compact(layout: Layout, cols: number): Layout {\n const out = cloneLayout(layout) as LayoutItem[];\n compactVerticalFast(out, cols, true);\n return out;\n }\n};\n","/**\n * Fast Horizontal Compactor\n *\n * An optimized horizontal compaction algorithm using a \"sweeping tide\" approach.\n * This algorithm has O(n log n) complexity (dominated by sorting) compared to\n * the default horizontal compactor which can have O(n²) complexity due to\n * recursive collision resolution.\n *\n * Best suited for large layouts (200+ items) where compaction performance\n * is critical. For smaller layouts, the difference is negligible.\n *\n * Adapted from the vertical fast compactor algorithm from PR #2152 by Morris Brodersen (@morris).\n *\n * @example\n * ```tsx\n * import { fastHorizontalCompactor } from 'react-grid-layout/extras';\n *\n * <GridLayout\n * compactor={fastHorizontalCompactor}\n * layout={layout}\n * // ...\n * />\n * ```\n */\n\nimport type { Compactor, Layout, LayoutItem, Mutable } from \"../core/types.js\";\nimport { cloneLayout } from \"../core/layout.js\";\n\n/**\n * Ensure the tide array has enough rows.\n */\nfunction ensureTideRows(tide: number[], neededRows: number): void {\n while (tide.length < neededRows) {\n tide.push(0);\n }\n}\n\n/**\n * Find the maximum tide value for a range of rows.\n */\nfunction getMaxTideForItem(tide: number[], y: number, h: number): number {\n let maxTide = 0;\n for (let row = y; row < y + h; row++) {\n const tideValue = tide[row] ?? 0;\n if (tideValue > maxTide) {\n maxTide = tideValue;\n }\n }\n return maxTide;\n}\n\n/**\n * Check if an item can be placed at a given position without colliding with static items.\n */\nfunction canPlaceAt(\n item: LayoutItem,\n x: number,\n y: number,\n staticItems: LayoutItem[],\n cols: number\n): boolean {\n // Check grid bounds\n if (x + item.w > cols) return false;\n\n // Check static collisions\n for (const staticItem of staticItems) {\n if (\n x < staticItem.x + staticItem.w &&\n x + item.w > staticItem.x &&\n y < staticItem.y + staticItem.h &&\n y + item.h > staticItem.y\n ) {\n return false;\n }\n }\n return true;\n}\n\n/**\n * Fast horizontal compaction using a \"sweeping tide\" algorithm with row wrapping.\n *\n * The algorithm works by:\n * 1. Sorting items by (y, x, static) - top-to-bottom, left-to-right (like standard compactor)\n * 2. Maintaining a \"tide\" array that tracks the rightmost occupied column per row\n * 3. For each item, finding the leftmost position it can occupy\n * 4. If the item doesn't fit in its current row, wrapping to the next row\n * 5. Checking for collisions with static items and adjusting as needed\n *\n * This avoids recursive collision resolution, making it O(n log n) overall.\n *\n * @param layout - The layout to compact (will be modified in place)\n * @param cols - Number of columns in the grid\n * @param allowOverlap - Whether to allow overlapping items\n */\nfunction compactHorizontalFast(\n layout: LayoutItem[],\n cols: number,\n allowOverlap: boolean\n): void {\n const numItems = layout.length;\n if (numItems === 0) return;\n\n // Sort items by column then row (same as standard horizontal compactor)\n // Static items are sorted first at each position to reduce collision checks\n layout.sort((a, b) => {\n if (a.x !== b.x) return a.x - b.x;\n if (a.y !== b.y) return a.y - b.y;\n if (a.static !== b.static) return a.static ? -1 : 1;\n return 0;\n });\n\n // Calculate max row extent for pre-allocation\n let maxRow = 0;\n for (let i = 0; i < numItems; i++) {\n const item = layout[i];\n if (item !== undefined) {\n const bottom = item.y + item.h;\n if (bottom > maxRow) maxRow = bottom;\n }\n }\n\n // \"Sweeping tide\" - tracks the rightmost blocked column per row\n // Pre-allocate based on max row extent to avoid repeated reallocations\n const tide: number[] = new Array(maxRow).fill(0);\n\n // Collect static items for collision checking\n const staticItems = layout.filter(item => item.static);\n\n // Safety limit for row wrapping (prevents infinite loops)\n // Use a limit relative to layout size (at least 10_000, or 100x the number of items)\n const maxRowLimit = Math.max(10_000, numItems * 100);\n\n for (let i = 0; i < numItems; i++) {\n const item = layout[i] as Mutable<LayoutItem>;\n\n if (item.static) {\n // Static items don't move; they become part of the tide\n ensureTideRows(tide, item.y + item.h);\n const t = item.x + item.w;\n for (let y = item.y; y < item.y + item.h; y++) {\n if ((tide[y] ?? 0) < t) {\n tide[y] = t;\n }\n }\n continue;\n }\n\n // For non-static items, find the best position\n let targetY = item.y;\n let targetX = 0;\n let placed = false;\n\n // Try to place the item, wrapping to lower rows if needed\n while (!placed) {\n ensureTideRows(tide, targetY + item.h);\n\n // Find the maximum tide across the rows this item spans\n const maxTide = getMaxTideForItem(tide, targetY, item.h);\n\n // Try to place at the tide position\n targetX = maxTide;\n\n // Check if item fits within grid bounds\n if (targetX + item.w <= cols) {\n // Check for static item collisions\n if (\n allowOverlap ||\n canPlaceAt(item, targetX, targetY, staticItems, cols)\n ) {\n placed = true;\n } else {\n // Find the rightmost static collision and try past it\n let maxStaticRight = targetX;\n let foundCollision = false;\n for (const staticItem of staticItems) {\n if (\n targetX < staticItem.x + staticItem.w &&\n targetX + item.w > staticItem.x &&\n targetY < staticItem.y + staticItem.h &&\n targetY + item.h > staticItem.y\n ) {\n maxStaticRight = Math.max(\n maxStaticRight,\n staticItem.x + staticItem.w\n );\n foundCollision = true;\n }\n }\n if (foundCollision) {\n targetX = maxStaticRight;\n }\n\n // After moving past static, check if we still fit\n if (foundCollision && targetX + item.w <= cols) {\n // Verify no more collisions at new position\n if (canPlaceAt(item, targetX, targetY, staticItems, cols)) {\n placed = true;\n } else {\n // Can't fit in this row, wrap to next\n targetY++;\n }\n } else if (foundCollision) {\n // Pushed past grid edge, wrap to next row\n targetY++;\n } else {\n // No collision but can't place - shouldn't happen\n placed = true;\n }\n }\n } else {\n // Doesn't fit in this row, wrap to next\n targetY++;\n }\n\n // Safety check to prevent infinite loops\n if (targetY > maxRowLimit) {\n if (typeof console !== \"undefined\" && console.warn) {\n console.warn(\n `Fast horizontal compactor: Item \"${item.i}\" exceeded max row limit (${targetY}). ` +\n `This may indicate a layout that cannot be compacted within grid bounds.`\n );\n }\n // Give up and place at current position\n targetX = 0;\n placed = true;\n }\n }\n\n // Update item position\n item.x = targetX;\n item.y = targetY;\n item.moved = false;\n\n // Update tide: mark rows as blocked up to item's right edge\n ensureTideRows(tide, targetY + item.h);\n const t = targetX + item.w;\n for (let y = targetY; y < targetY + item.h; y++) {\n if ((tide[y] ?? 0) < t) {\n tide[y] = t;\n }\n }\n }\n}\n\n/**\n * Fast horizontal compactor - optimized for large layouts.\n *\n * Uses a \"sweeping tide\" algorithm that achieves O(n log n) complexity\n * instead of the potentially O(n²) recursive collision resolution.\n *\n * Best suited for layouts with 200+ items where compaction performance\n * becomes noticeable. For smaller layouts, the standard horizontalCompactor\n * works equally well.\n */\nexport const fastHorizontalCompactor: Compactor = {\n type: \"horizontal\",\n allowOverlap: false,\n\n compact(layout: Layout, cols: number): Layout {\n // Clone the layout since we modify in place\n const out = cloneLayout(layout) as LayoutItem[];\n compactHorizontalFast(out, cols, false);\n return out;\n },\n\n onMove(\n layout: Layout,\n item: LayoutItem,\n x: number,\n y: number,\n _cols: number\n ): Layout {\n // Simple move - compact() will be called after\n const newLayout = cloneLayout(layout) as Mutable<LayoutItem>[];\n const movedItem = newLayout.find(l => l.i === item.i);\n if (movedItem) {\n movedItem.x = x;\n movedItem.y = y;\n movedItem.moved = true;\n }\n return newLayout;\n }\n};\n\n/**\n * Fast horizontal compactor that allows overlapping items.\n *\n * Compacts items leftward but allows them to overlap each other.\n */\nexport const fastHorizontalOverlapCompactor: Compactor = {\n ...fastHorizontalCompactor,\n allowOverlap: true,\n\n compact(layout: Layout, cols: number): Layout {\n const out = cloneLayout(layout) as LayoutItem[];\n compactHorizontalFast(out, cols, true);\n return out;\n }\n};\n","/**\n * Wrap Compactor\n *\n * A compaction algorithm that treats grid items like words in a paragraph.\n * Items flow left-to-right, wrapping to the next row when they reach\n * the grid edge.\n *\n * When dragging:\n * - Moving an item earlier in the sequence shifts other items down/right\n * - Moving an item later in the sequence shifts other items up/left\n *\n * This creates a natural reordering behavior similar to drag-and-drop\n * in file managers or card layouts.\n *\n * Based on the algorithm from PR #1773 by John Thomson (@JohnThomson).\n *\n * @example\n * ```tsx\n * import { wrapCompactor } from 'react-grid-layout/extras';\n *\n * <GridLayout\n * compactor={wrapCompactor}\n * layout={layout}\n * // ...\n * />\n * ```\n */\n\nimport type { Compactor, Layout, LayoutItem, Mutable } from \"../core/types.js\";\nimport { cloneLayout, cloneLayoutItem } from \"../core/layout.js\";\n\n/**\n * Sort items in wrap order: left-to-right, top-to-bottom.\n * This is the visual reading order for wrapped content.\n */\nfunction sortByWrapOrder(layout: Layout): LayoutItem[] {\n return [...layout].sort((a, b) => {\n // Primary: top-to-bottom (by row)\n if (a.y !== b.y) return a.y - b.y;\n // Secondary: left-to-right (by column)\n return a.x - b.x;\n });\n}\n\n/**\n * Get the linear position of an item in wrap order.\n * Position 0 is top-left, increasing left-to-right then top-to-bottom.\n */\nfunction getWrapPosition(item: LayoutItem, cols: number): number {\n return item.y * cols + item.x;\n}\n\n/**\n * Convert a linear wrap position back to x,y coordinates.\n */\nfunction fromWrapPosition(pos: number, cols: number): { x: number; y: number } {\n return {\n x: pos % cols,\n y: Math.floor(pos / cols)\n };\n}\n\n/**\n * Compact items in wrap order, filling gaps from left-to-right, top-to-bottom.\n * All items are assumed to be 1x1 for wrap mode to work correctly.\n */\nfunction compactWrap(layout: Layout, cols: number): LayoutItem[] {\n if (layout.length === 0) return [];\n\n const sorted = sortByWrapOrder(layout);\n const out: LayoutItem[] = new Array(layout.length);\n const statics = sorted.filter(item => item.static);\n\n // Track which positions are occupied by static items\n const staticPositions = new Set<number>();\n for (const s of statics) {\n // For static items, mark all cells they occupy\n for (let dy = 0; dy < s.h; dy++) {\n for (let dx = 0; dx < s.w; dx++) {\n staticPositions.add((s.y + dy) * cols + (s.x + dx));\n }\n }\n }\n\n let nextPos = 0;\n\n for (let i = 0; i < sorted.length; i++) {\n const sortedItem = sorted[i];\n if (sortedItem === undefined) continue;\n\n const l = cloneLayoutItem(sortedItem);\n\n if (l.static) {\n // Static items stay in place\n const originalIndex = layout.indexOf(sortedItem);\n out[originalIndex] = l;\n l.moved = false;\n continue;\n }\n\n // Find next available position that doesn't conflict with statics\n while (staticPositions.has(nextPos)) {\n nextPos++;\n }\n\n // For items larger than 1x1, we need to check if the full item fits\n const { x, y } = fromWrapPosition(nextPos, cols);\n\n // Check if item would overflow the row\n if (x + l.w > cols) {\n // Move to start of next row\n nextPos = (y + 1) * cols;\n // Skip any static positions on the new row\n while (staticPositions.has(nextPos)) {\n nextPos++;\n }\n }\n\n const newCoords = fromWrapPosition(nextPos, cols);\n (l as Mutable<LayoutItem>).x = newCoords.x;\n (l as Mutable<LayoutItem>).y = newCoords.y;\n\n // Advance past this item\n nextPos += l.w;\n\n const originalIndex = layout.indexOf(sortedItem);\n out[originalIndex] = l;\n l.moved = false;\n }\n\n return out;\n}\n\n/**\n * Move an item in wrap mode, shifting other items to maintain sequence.\n *\n * When moving an item:\n * - If moving to an earlier position: items between shift right/down\n * - If moving to a later position: items between shift left/up\n */\nfunction moveInWrapMode(\n layout: Layout,\n item: LayoutItem,\n x: number,\n y: number,\n cols: number\n): Layout {\n const newLayout = cloneLayout(layout) as Mutable<LayoutItem>[];\n const movedItem = newLayout.find(l => l.i === item.i);\n\n if (!movedItem) {\n return newLayout;\n }\n\n const oldPos = getWrapPosition(movedItem, cols);\n const newPos = getWrapPosition({ ...movedItem, x, y }, cols);\n\n if (oldPos === newPos) {\n // No actual movement in wrap order\n movedItem.x = x;\n movedItem.y = y;\n movedItem.moved = true;\n return newLayout;\n }\n\n const isMovingEarlier = newPos < oldPos;\n\n // Get all non-static items sorted by wrap position\n const sortedItems = newLayout\n .filter(l => !l.static)\n .sort((a, b) => getWrapPosition(a, cols) - getWrapPosition(b, cols));\n\n if (isMovingEarlier) {\n // Moving item earlier: shift items in [newPos, oldPos) to the right\n for (const l of sortedItems) {\n const pos = getWrapPosition(l, cols);\n if (l.i === item.i) continue;\n\n if (pos >= newPos && pos < oldPos) {\n // Shift this item right by 1 position in wrap order\n const shiftedPos = pos + 1;\n const coords = fromWrapPosition(shiftedPos, cols);\n l.x = coords.x;\n l.y = coords.y;\n l.moved = true;\n }\n }\n } else {\n // Moving item later: shift items in (oldPos, newPos] to the left\n for (const l of sortedItems) {\n const pos = getWrapPosition(l, cols);\n if (l.i === item.i) continue;\n\n if (pos > oldPos && pos <= newPos) {\n // Shift this item left by 1 position in wrap order\n const shiftedPos = pos - 1;\n const coords = fromWrapPosition(shiftedPos, cols);\n l.x = coords.x;\n l.y = coords.y;\n l.moved = true;\n }\n }\n }\n\n // Finally, move the dragged item to its new position\n movedItem.x = x;\n movedItem.y = y;\n movedItem.moved = true;\n\n return newLayout;\n}\n\n/**\n * Wrap compactor - arranges items like words in a paragraph.\n *\n * Items flow left-to-right and wrap to the next row when they\n * reach the grid edge. Dragging an item reorders the sequence,\n * with other items shifting to maintain the flow.\n *\n * Works best with uniformly-sized items (especially 1x1), but\n * handles larger items by ensuring they fit within row bounds.\n */\nexport const wrapCompactor: Compactor = {\n type: \"wrap\",\n allowOverlap: false,\n\n compact(layout: Layout, cols: number): Layout {\n return compactWrap(layout, cols);\n },\n\n onMove(\n layout: Layout,\n item: LayoutItem,\n x: number,\n y: number,\n cols: number\n ): Layout {\n return moveInWrapMode(layout, item, x, y, cols);\n }\n};\n\n/**\n * Wrap compactor that allows overlapping items.\n */\nexport const wrapOverlapCompactor: Compactor = {\n ...wrapCompactor,\n allowOverlap: true,\n\n compact(layout: Layout, _cols: number): Layout {\n // With overlap allowed, just clone without compacting\n return cloneLayout(layout);\n }\n};\n"]}

@@ -1,2 +0,2 @@

import { calcGridCellDimensions } from './chunk-2KUHNJXF.mjs';
import { calcGridCellDimensions, cloneLayout, cloneLayoutItem } from './chunk-AWM66AWF.mjs';
import { useMemo } from 'react';

@@ -87,4 +87,369 @@ import { jsx } from 'react/jsx-runtime';

export { GridBackground };
// src/extras/fastVerticalCompactor.ts
function collides(l1, l2) {
if (l1.i === l2.i) return false;
return l1.x < l2.x + l2.w && l1.x + l1.w > l2.x && l1.y < l2.y + l2.h && l1.y + l1.h > l2.y;
}
function compactVerticalFast(layout, cols, allowOverlap) {
const numItems = layout.length;
layout.sort((a, b) => {
if (a.y < b.y) return -1;
if (a.y > b.y) return 1;
if (a.x < b.x) return -1;
if (a.x > b.x) return 1;
if (a.static && !b.static) return -1;
if (!a.static && b.static) return 1;
return 0;
});
const tide = new Array(cols).fill(0);
const staticItems = layout.filter((item) => item.static);
const numStatics = staticItems.length;
let staticOffset = 0;
for (let i = 0; i < numItems; i++) {
const item = layout[i];
let x2 = item.x + item.w;
if (x2 > cols) {
x2 = cols;
}
if (item.static) {
++staticOffset;
} else {
let minGap = Infinity;
for (let x = item.x; x < x2; ++x) {
const tideValue = tide[x] ?? 0;
const gap = item.y - tideValue;
if (gap < minGap) {
minGap = gap;
}
}
if (!allowOverlap || minGap > 0) {
item.y -= minGap;
}
for (let j = staticOffset; !allowOverlap && j < numStatics; ++j) {
const staticItem = staticItems[j];
if (staticItem === void 0) continue;
if (staticItem.y >= item.y + item.h) {
break;
}
if (collides(item, staticItem)) {
item.y = staticItem.y + staticItem.h;
if (j > staticOffset) {
j = staticOffset;
}
}
}
item.moved = false;
}
const t = item.y + item.h;
for (let x = item.x; x < x2; ++x) {
const currentTide = tide[x] ?? 0;
if (currentTide < t) {
tide[x] = t;
}
}
}
}
var fastVerticalCompactor = {
type: "vertical",
allowOverlap: false,
compact(layout, cols) {
const out = cloneLayout(layout);
compactVerticalFast(out, cols, false);
return out;
},
onMove(layout, item, x, y, _cols) {
const newLayout = cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (movedItem) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
}
return newLayout;
}
};
var fastVerticalOverlapCompactor = {
...fastVerticalCompactor,
allowOverlap: true,
compact(layout, cols) {
const out = cloneLayout(layout);
compactVerticalFast(out, cols, true);
return out;
}
};
// src/extras/fastHorizontalCompactor.ts
function ensureTideRows(tide, neededRows) {
while (tide.length < neededRows) {
tide.push(0);
}
}
function getMaxTideForItem(tide, y, h) {
let maxTide = 0;
for (let row = y; row < y + h; row++) {
const tideValue = tide[row] ?? 0;
if (tideValue > maxTide) {
maxTide = tideValue;
}
}
return maxTide;
}
function canPlaceAt(item, x, y, staticItems, cols) {
if (x + item.w > cols) return false;
for (const staticItem of staticItems) {
if (x < staticItem.x + staticItem.w && x + item.w > staticItem.x && y < staticItem.y + staticItem.h && y + item.h > staticItem.y) {
return false;
}
}
return true;
}
function compactHorizontalFast(layout, cols, allowOverlap) {
const numItems = layout.length;
if (numItems === 0) return;
layout.sort((a, b) => {
if (a.x !== b.x) return a.x - b.x;
if (a.y !== b.y) return a.y - b.y;
if (a.static !== b.static) return a.static ? -1 : 1;
return 0;
});
let maxRow = 0;
for (let i = 0; i < numItems; i++) {
const item = layout[i];
if (item !== void 0) {
const bottom = item.y + item.h;
if (bottom > maxRow) maxRow = bottom;
}
}
const tide = new Array(maxRow).fill(0);
const staticItems = layout.filter((item) => item.static);
const maxRowLimit = Math.max(1e4, numItems * 100);
for (let i = 0; i < numItems; i++) {
const item = layout[i];
if (item.static) {
ensureTideRows(tide, item.y + item.h);
const t2 = item.x + item.w;
for (let y = item.y; y < item.y + item.h; y++) {
if ((tide[y] ?? 0) < t2) {
tide[y] = t2;
}
}
continue;
}
let targetY = item.y;
let targetX = 0;
let placed = false;
while (!placed) {
ensureTideRows(tide, targetY + item.h);
const maxTide = getMaxTideForItem(tide, targetY, item.h);
targetX = maxTide;
if (targetX + item.w <= cols) {
if (allowOverlap || canPlaceAt(item, targetX, targetY, staticItems, cols)) {
placed = true;
} else {
let maxStaticRight = targetX;
let foundCollision = false;
for (const staticItem of staticItems) {
if (targetX < staticItem.x + staticItem.w && targetX + item.w > staticItem.x && targetY < staticItem.y + staticItem.h && targetY + item.h > staticItem.y) {
maxStaticRight = Math.max(
maxStaticRight,
staticItem.x + staticItem.w
);
foundCollision = true;
}
}
if (foundCollision) {
targetX = maxStaticRight;
}
if (foundCollision && targetX + item.w <= cols) {
if (canPlaceAt(item, targetX, targetY, staticItems, cols)) {
placed = true;
} else {
targetY++;
}
} else if (foundCollision) {
targetY++;
} else {
placed = true;
}
}
} else {
targetY++;
}
if (targetY > maxRowLimit) {
if (typeof console !== "undefined" && console.warn) {
console.warn(
`Fast horizontal compactor: Item "${item.i}" exceeded max row limit (${targetY}). This may indicate a layout that cannot be compacted within grid bounds.`
);
}
targetX = 0;
placed = true;
}
}
item.x = targetX;
item.y = targetY;
item.moved = false;
ensureTideRows(tide, targetY + item.h);
const t = targetX + item.w;
for (let y = targetY; y < targetY + item.h; y++) {
if ((tide[y] ?? 0) < t) {
tide[y] = t;
}
}
}
}
var fastHorizontalCompactor = {
type: "horizontal",
allowOverlap: false,
compact(layout, cols) {
const out = cloneLayout(layout);
compactHorizontalFast(out, cols, false);
return out;
},
onMove(layout, item, x, y, _cols) {
const newLayout = cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (movedItem) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
}
return newLayout;
}
};
var fastHorizontalOverlapCompactor = {
...fastHorizontalCompactor,
allowOverlap: true,
compact(layout, cols) {
const out = cloneLayout(layout);
compactHorizontalFast(out, cols, true);
return out;
}
};
// src/extras/wrapCompactor.ts
function sortByWrapOrder(layout) {
return [...layout].sort((a, b) => {
if (a.y !== b.y) return a.y - b.y;
return a.x - b.x;
});
}
function getWrapPosition(item, cols) {
return item.y * cols + item.x;
}
function fromWrapPosition(pos, cols) {
return {
x: pos % cols,
y: Math.floor(pos / cols)
};
}
function compactWrap(layout, cols) {
if (layout.length === 0) return [];
const sorted = sortByWrapOrder(layout);
const out = new Array(layout.length);
const statics = sorted.filter((item) => item.static);
const staticPositions = /* @__PURE__ */ new Set();
for (const s of statics) {
for (let dy = 0; dy < s.h; dy++) {
for (let dx = 0; dx < s.w; dx++) {
staticPositions.add((s.y + dy) * cols + (s.x + dx));
}
}
}
let nextPos = 0;
for (let i = 0; i < sorted.length; i++) {
const sortedItem = sorted[i];
if (sortedItem === void 0) continue;
const l = cloneLayoutItem(sortedItem);
if (l.static) {
const originalIndex2 = layout.indexOf(sortedItem);
out[originalIndex2] = l;
l.moved = false;
continue;
}
while (staticPositions.has(nextPos)) {
nextPos++;
}
const { x, y } = fromWrapPosition(nextPos, cols);
if (x + l.w > cols) {
nextPos = (y + 1) * cols;
while (staticPositions.has(nextPos)) {
nextPos++;
}
}
const newCoords = fromWrapPosition(nextPos, cols);
l.x = newCoords.x;
l.y = newCoords.y;
nextPos += l.w;
const originalIndex = layout.indexOf(sortedItem);
out[originalIndex] = l;
l.moved = false;
}
return out;
}
function moveInWrapMode(layout, item, x, y, cols) {
const newLayout = cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (!movedItem) {
return newLayout;
}
const oldPos = getWrapPosition(movedItem, cols);
const newPos = getWrapPosition({ ...movedItem, x, y }, cols);
if (oldPos === newPos) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
return newLayout;
}
const isMovingEarlier = newPos < oldPos;
const sortedItems = newLayout.filter((l) => !l.static).sort((a, b) => getWrapPosition(a, cols) - getWrapPosition(b, cols));
if (isMovingEarlier) {
for (const l of sortedItems) {
const pos = getWrapPosition(l, cols);
if (l.i === item.i) continue;
if (pos >= newPos && pos < oldPos) {
const shiftedPos = pos + 1;
const coords = fromWrapPosition(shiftedPos, cols);
l.x = coords.x;
l.y = coords.y;
l.moved = true;
}
}
} else {
for (const l of sortedItems) {
const pos = getWrapPosition(l, cols);
if (l.i === item.i) continue;
if (pos > oldPos && pos <= newPos) {
const shiftedPos = pos - 1;
const coords = fromWrapPosition(shiftedPos, cols);
l.x = coords.x;
l.y = coords.y;
l.moved = true;
}
}
}
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
return newLayout;
}
var wrapCompactor = {
type: "wrap",
allowOverlap: false,
compact(layout, cols) {
return compactWrap(layout, cols);
},
onMove(layout, item, x, y, cols) {
return moveInWrapMode(layout, item, x, y, cols);
}
};
var wrapOverlapCompactor = {
...wrapCompactor,
allowOverlap: true,
compact(layout, _cols) {
return cloneLayout(layout);
}
};
export { GridBackground, fastHorizontalCompactor, fastHorizontalOverlapCompactor, fastVerticalCompactor, fastVerticalOverlapCompactor, wrapCompactor, wrapOverlapCompactor };
//# sourceMappingURL=extras.mjs.map
//# sourceMappingURL=extras.mjs.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["../src/extras/GridBackground.tsx"],"names":[],"mappings":";;;;AAkFO,SAAS,cAAA,CAAe;AAAA,EAC7B,KAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA,GAAS,CAAC,EAAA,EAAI,EAAE,CAAA;AAAA,EAChB,gBAAA;AAAA,EACA,IAAA,GAAO,EAAA;AAAA,EACP,MAAA;AAAA,EACA,KAAA,GAAQ,SAAA;AAAA,EACR,YAAA,GAAe,CAAA;AAAA,EACf,SAAA;AAAA,EACA;AACF,CAAA,EAA4C;AAC1C,EAAA,MAAM,IAAA,GAAO,OAAA;AAAA,IACX,MACE,sBAAA,CAAuB;AAAA,MACrB,KAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA,IACH,CAAC,KAAA,EAAO,IAAA,EAAM,SAAA,EAAW,QAAQ,gBAAgB;AAAA,GACnD;AAGA,EAAA,MAAM,QAAA,GAAW,QAAQ,MAAM;AAC7B,IAAA,IAAI,IAAA,KAAS,QAAQ,OAAO,IAAA;AAC5B,IAAA,IAAI,MAAA,EAAQ;AAEV,MAAA,MAAM,UAAU,gBAAA,IAAoB,MAAA;AACpC,MAAA,OAAO,IAAA,CAAK,IAAA;AAAA,QAAA,CACT,MAAA,GAAS,OAAA,CAAQ,CAAC,CAAA,GAAI,CAAA,GAAI,OAAO,CAAC,CAAA,KAAM,SAAA,GAAY,MAAA,CAAO,CAAC,CAAA;AAAA,OAC/D;AAAA,IACF;AACA,IAAA,OAAO,EAAA;AAAA,EACT,GAAG,CAAC,IAAA,EAAM,QAAQ,SAAA,EAAW,MAAA,EAAQ,gBAAgB,CAAC,CAAA;AAGtD,EAAA,MAAM,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,MAAM,UAAU,gBAAA,IAAoB,MAAA;AACpC,IAAA,OAAO,OAAA,CAAQ,CAAC,CAAA,GAAI,CAAA,GAAI,WAAW,SAAA,GAAA,CAAa,QAAA,GAAW,CAAA,IAAK,MAAA,CAAO,CAAC,CAAA;AAAA,EAC1E,GAAG,CAAC,QAAA,EAAU,SAAA,EAAW,MAAA,EAAQ,gBAAgB,CAAC,CAAA;AAGlD,EAAA,MAAM,KAAA,GAAQ,QAAQ,MAAM;AAC1B,IAAA,MAAM,QAA8B,EAAC;AACrC,IAAA,MAAM,EAAE,SAAA,EAAW,UAAA,EAAY,SAAS,OAAA,EAAS,IAAA,EAAM,MAAK,GAAI,IAAA;AAEhE,IAAA,KAAA,IAAS,GAAA,GAAM,CAAA,EAAG,GAAA,GAAM,QAAA,EAAU,GAAA,EAAA,EAAO;AACvC,MAAA,KAAA,IAAS,GAAA,GAAM,CAAA,EAAG,GAAA,GAAM,IAAA,EAAM,GAAA,EAAA,EAAO;AACnC,QAAA,MAAM,CAAA,GAAI,OAAA,GAAU,GAAA,IAAO,SAAA,GAAY,IAAA,CAAA;AACvC,QAAA,MAAM,CAAA,GAAI,OAAA,GAAU,GAAA,IAAO,UAAA,GAAa,IAAA,CAAA;AAExC,QAAA,KAAA,CAAM,IAAA;AAAA,0BACJ,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cAEC,CAAA;AAAA,cACA,CAAA;AAAA,cACA,KAAA,EAAO,SAAA;AAAA,cACP,MAAA,EAAQ,UAAA;AAAA,cACR,EAAA,EAAI,YAAA;AAAA,cACJ,EAAA,EAAI,YAAA;AAAA,cACJ,IAAA,EAAM;AAAA,aAAA;AAAA,YAPD,CAAA,EAAG,GAAG,CAAA,CAAA,EAAI,GAAG,CAAA;AAAA;AAQpB,SACF;AAAA,MACF;AAAA,IACF;AAEA,IAAA,OAAO,KAAA;AAAA,EACT,GAAG,CAAC,IAAA,EAAM,UAAU,IAAA,EAAM,YAAA,EAAc,KAAK,CAAC,CAAA;AAE9C,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACL,QAAA,EAAU,UAAA;AAAA,QACV,GAAA,EAAK,CAAA;AAAA,QACL,IAAA,EAAM,CAAA;AAAA,QACN,KAAA;AAAA,QACA,MAAA,EAAQ,WAAA;AAAA,QACR,aAAA,EAAe,MAAA;AAAA,QACf,GAAG;AAAA,OACL;AAAA,MACA,aAAA,EAAY,MAAA;AAAA,MAEX,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"extras.mjs","sourcesContent":["/**\n * GridBackground component\n *\n * Renders an SVG grid background that aligns with GridLayout cells.\n * Use this to visualize the grid structure behind your layout.\n */\n\nimport * as React from \"react\";\nimport { useMemo } from \"react\";\nimport { calcGridCellDimensions } from \"../core/calculate.js\";\nimport type { GridCellConfig } from \"../core/calculate.js\";\n\nexport interface GridBackgroundProps extends GridCellConfig {\n /**\n * Number of rows to display. If \"auto\", calculates based on height.\n * @default 10\n */\n rows?: number | \"auto\";\n\n /**\n * Height of the background in pixels. Used when rows=\"auto\".\n */\n height?: number;\n\n /**\n * Color of the grid cell backgrounds.\n * @default \"#e0e0e0\"\n */\n color?: string;\n\n /**\n * Border radius of grid cells in pixels.\n * @default 4\n */\n borderRadius?: number;\n\n /**\n * Additional CSS class name.\n */\n className?: string;\n\n /**\n * Additional inline styles.\n */\n style?: React.CSSProperties;\n}\n\n/**\n * SVG grid background component.\n *\n * Renders a visual grid that aligns with GridLayout cells. Position this\n * behind your GridLayout using CSS positioning.\n *\n * @example\n * ```tsx\n * import { GridBackground } from 'react-grid-layout/extras';\n *\n * function MyGrid() {\n * const { width, containerRef, mounted } = useContainerWidth();\n *\n * return (\n * <div ref={containerRef} style={{ position: 'relative' }}>\n * {mounted && (\n * <>\n * <GridBackground\n * width={width}\n * cols={12}\n * rowHeight={30}\n * margin={[10, 10]}\n * rows={10}\n * color=\"#f0f0f0\"\n * />\n * <GridLayout width={width} gridConfig={{ cols: 12, rowHeight: 30 }}>\n * {children}\n * </GridLayout>\n * </>\n * )}\n * </div>\n * );\n * }\n * ```\n */\nexport function GridBackground({\n width,\n cols,\n rowHeight,\n margin = [10, 10],\n containerPadding,\n rows = 10,\n height,\n color = \"#e0e0e0\",\n borderRadius = 4,\n className,\n style\n}: GridBackgroundProps): React.ReactElement {\n const dims = useMemo(\n () =>\n calcGridCellDimensions({\n width,\n cols,\n rowHeight,\n margin,\n containerPadding\n }),\n [width, cols, rowHeight, margin, containerPadding]\n );\n\n // Calculate number of rows\n const rowCount = useMemo(() => {\n if (rows !== \"auto\") return rows;\n if (height) {\n // Calculate rows that fit in the given height\n const padding = containerPadding ?? margin;\n return Math.ceil(\n (height - padding[1] * 2 + margin[1]) / (rowHeight + margin[1])\n );\n }\n return 10;\n }, [rows, height, rowHeight, margin, containerPadding]);\n\n // Calculate total height\n const totalHeight = useMemo(() => {\n const padding = containerPadding ?? margin;\n return padding[1] * 2 + rowCount * rowHeight + (rowCount - 1) * margin[1];\n }, [rowCount, rowHeight, margin, containerPadding]);\n\n // Generate cell rectangles\n const cells = useMemo(() => {\n const rects: React.ReactElement[] = [];\n const { cellWidth, cellHeight, offsetX, offsetY, gapX, gapY } = dims;\n\n for (let row = 0; row < rowCount; row++) {\n for (let col = 0; col < cols; col++) {\n const x = offsetX + col * (cellWidth + gapX);\n const y = offsetY + row * (cellHeight + gapY);\n\n rects.push(\n <rect\n key={`${row}-${col}`}\n x={x}\n y={y}\n width={cellWidth}\n height={cellHeight}\n rx={borderRadius}\n ry={borderRadius}\n fill={color}\n />\n );\n }\n }\n\n return rects;\n }, [dims, rowCount, cols, borderRadius, color]);\n\n return (\n <svg\n className={className}\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n width: width,\n height: totalHeight,\n pointerEvents: \"none\",\n ...style\n }}\n aria-hidden=\"true\"\n >\n {cells}\n </svg>\n );\n}\n\nexport default GridBackground;\n"]}
{"version":3,"sources":["../src/extras/GridBackground.tsx","../src/extras/fastVerticalCompactor.ts","../src/extras/fastHorizontalCompactor.ts","../src/extras/wrapCompactor.ts"],"names":["t","originalIndex"],"mappings":"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","file":"extras.mjs","sourcesContent":["/**\n * GridBackground component\n *\n * Renders an SVG grid background that aligns with GridLayout cells.\n * Use this to visualize the grid structure behind your layout.\n */\n\nimport * as React from \"react\";\nimport { useMemo } from \"react\";\nimport { calcGridCellDimensions } from \"../core/calculate.js\";\nimport type { GridCellConfig } from \"../core/calculate.js\";\n\nexport interface GridBackgroundProps extends GridCellConfig {\n /**\n * Number of rows to display. If \"auto\", calculates based on height.\n * @default 10\n */\n rows?: number | \"auto\";\n\n /**\n * Height of the background in pixels. Used when rows=\"auto\".\n */\n height?: number;\n\n /**\n * Color of the grid cell backgrounds.\n * @default \"#e0e0e0\"\n */\n color?: string;\n\n /**\n * Border radius of grid cells in pixels.\n * @default 4\n */\n borderRadius?: number;\n\n /**\n * Additional CSS class name.\n */\n className?: string;\n\n /**\n * Additional inline styles.\n */\n style?: React.CSSProperties;\n}\n\n/**\n * SVG grid background component.\n *\n * Renders a visual grid that aligns with GridLayout cells. Position this\n * behind your GridLayout using CSS positioning.\n *\n * @example\n * ```tsx\n * import { GridBackground } from 'react-grid-layout/extras';\n *\n * function MyGrid() {\n * const { width, containerRef, mounted } = useContainerWidth();\n *\n * return (\n * <div ref={containerRef} style={{ position: 'relative' }}>\n * {mounted && (\n * <>\n * <GridBackground\n * width={width}\n * cols={12}\n * rowHeight={30}\n * margin={[10, 10]}\n * rows={10}\n * color=\"#f0f0f0\"\n * />\n * <GridLayout width={width} gridConfig={{ cols: 12, rowHeight: 30 }}>\n * {children}\n * </GridLayout>\n * </>\n * )}\n * </div>\n * );\n * }\n * ```\n */\nexport function GridBackground({\n width,\n cols,\n rowHeight,\n margin = [10, 10],\n containerPadding,\n rows = 10,\n height,\n color = \"#e0e0e0\",\n borderRadius = 4,\n className,\n style\n}: GridBackgroundProps): React.ReactElement {\n const dims = useMemo(\n () =>\n calcGridCellDimensions({\n width,\n cols,\n rowHeight,\n margin,\n containerPadding\n }),\n [width, cols, rowHeight, margin, containerPadding]\n );\n\n // Calculate number of rows\n const rowCount = useMemo(() => {\n if (rows !== \"auto\") return rows;\n if (height) {\n // Calculate rows that fit in the given height\n const padding = containerPadding ?? margin;\n return Math.ceil(\n (height - padding[1] * 2 + margin[1]) / (rowHeight + margin[1])\n );\n }\n return 10;\n }, [rows, height, rowHeight, margin, containerPadding]);\n\n // Calculate total height\n const totalHeight = useMemo(() => {\n const padding = containerPadding ?? margin;\n return padding[1] * 2 + rowCount * rowHeight + (rowCount - 1) * margin[1];\n }, [rowCount, rowHeight, margin, containerPadding]);\n\n // Generate cell rectangles\n const cells = useMemo(() => {\n const rects: React.ReactElement[] = [];\n const { cellWidth, cellHeight, offsetX, offsetY, gapX, gapY } = dims;\n\n for (let row = 0; row < rowCount; row++) {\n for (let col = 0; col < cols; col++) {\n const x = offsetX + col * (cellWidth + gapX);\n const y = offsetY + row * (cellHeight + gapY);\n\n rects.push(\n <rect\n key={`${row}-${col}`}\n x={x}\n y={y}\n width={cellWidth}\n height={cellHeight}\n rx={borderRadius}\n ry={borderRadius}\n fill={color}\n />\n );\n }\n }\n\n return rects;\n }, [dims, rowCount, cols, borderRadius, color]);\n\n return (\n <svg\n className={className}\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n width: width,\n height: totalHeight,\n pointerEvents: \"none\",\n ...style\n }}\n aria-hidden=\"true\"\n >\n {cells}\n </svg>\n );\n}\n\nexport default GridBackground;\n","/**\n * Fast Vertical Compactor\n *\n * An optimized vertical compaction algorithm using a \"rising tide\" approach.\n * This algorithm has O(n log n) complexity (dominated by sorting) compared to\n * the default vertical compactor which can have O(n²) complexity due to\n * recursive collision resolution.\n *\n * Best suited for large layouts (200+ items) where compaction performance\n * is critical. For smaller layouts, the difference is negligible.\n *\n * Based on the algorithm from PR #2152 by Morris Brodersen (@morris).\n *\n * @example\n * ```tsx\n * import { fastVerticalCompactor } from 'react-grid-layout/extras';\n *\n * <GridLayout\n * compactor={fastVerticalCompactor}\n * layout={layout}\n * // ...\n * />\n * ```\n */\n\nimport type { Compactor, Layout, LayoutItem, Mutable } from \"../core/types.js\";\nimport { cloneLayout } from \"../core/layout.js\";\n\n/**\n * Check if two layout items collide (overlap).\n */\nfunction collides(l1: LayoutItem, l2: LayoutItem): boolean {\n if (l1.i === l2.i) return false;\n return (\n l1.x < l2.x + l2.w &&\n l1.x + l1.w > l2.x &&\n l1.y < l2.y + l2.h &&\n l1.y + l1.h > l2.y\n );\n}\n\n/**\n * Fast vertical compaction using a \"rising tide\" algorithm.\n *\n * The algorithm works by:\n * 1. Sorting items by (y, x, static) - top-to-bottom, left-to-right\n * 2. Maintaining a \"tide\" array that tracks the highest occupied row per column\n * 3. For each item, moving it up to meet the tide (closing gaps)\n * 4. Checking for collisions with static items and adjusting as needed\n *\n * This avoids recursive collision resolution, making it O(n log n) overall.\n *\n * @param layout - The layout to compact (will be modified in place)\n * @param cols - Number of columns in the grid\n * @param allowOverlap - Whether to allow overlapping items\n */\nfunction compactVerticalFast(\n layout: LayoutItem[],\n cols: number,\n allowOverlap: boolean\n): void {\n const numItems = layout.length;\n\n // Sort items by position: top-to-bottom, left-to-right\n // Static items are sorted first at each position to reduce collision checks\n layout.sort((a, b) => {\n if (a.y < b.y) return -1;\n if (a.y > b.y) return 1;\n if (a.x < b.x) return -1;\n if (a.x > b.x) return 1;\n // Static items sorted first to reduce collision checks\n if (a.static && !b.static) return -1;\n if (!a.static && b.static) return 1;\n return 0;\n });\n\n // \"Rising tide\" - tracks the highest blocked row per column\n const tide: number[] = new Array(cols).fill(0);\n\n // Collect static items for collision checking\n const staticItems = layout.filter(item => item.static);\n const numStatics = staticItems.length;\n let staticOffset = 0;\n\n for (let i = 0; i < numItems; i++) {\n const item = layout[i] as Mutable<LayoutItem>;\n\n // Clamp x2 to grid bounds\n let x2 = item.x + item.w;\n if (x2 > cols) {\n x2 = cols;\n }\n\n if (item.static) {\n // Static items don't move; they become part of the tide\n // and don't need collision checks against themselves\n ++staticOffset;\n } else {\n // Find the minimum gap between the item and the tide\n let minGap = Infinity;\n for (let x = item.x; x < x2; ++x) {\n const tideValue = tide[x] ?? 0;\n const gap = item.y - tideValue;\n if (gap < minGap) {\n minGap = gap;\n }\n }\n\n // Close the gap (move item up to meet the tide)\n if (!allowOverlap || minGap > 0) {\n item.y -= minGap;\n }\n\n // Handle collisions with static items\n for (let j = staticOffset; !allowOverlap && j < numStatics; ++j) {\n const staticItem = staticItems[j];\n if (staticItem === undefined) continue;\n\n // Early exit: if static item is below current item, no more collisions possible\n if (staticItem.y >= item.y + item.h) {\n break;\n }\n\n if (collides(item, staticItem)) {\n // Move current item below the static item\n item.y = staticItem.y + staticItem.h;\n\n if (j > staticOffset) {\n // Item was moved; need to recheck with earlier static items\n // Note: j = staticOffset means after ++j we start at staticOffset + 1,\n // but staticItems[staticOffset] was already checked or is above us\n j = staticOffset;\n }\n }\n }\n\n // Reset moved flag\n item.moved = false;\n }\n\n // Update tide: mark columns as blocked up to item's bottom\n const t = item.y + item.h;\n for (let x = item.x; x < x2; ++x) {\n const currentTide = tide[x] ?? 0;\n if (currentTide < t) {\n tide[x] = t;\n }\n }\n }\n}\n\n/**\n * Fast vertical compactor - optimized for large layouts.\n *\n * Uses a \"rising tide\" algorithm that achieves O(n log n) complexity\n * instead of the potentially O(n²) recursive collision resolution.\n *\n * Best suited for layouts with 200+ items where compaction performance\n * becomes noticeable. For smaller layouts, the standard verticalCompactor\n * works equally well.\n */\nexport const fastVerticalCompactor: Compactor = {\n type: \"vertical\",\n allowOverlap: false,\n\n compact(layout: Layout, cols: number): Layout {\n // Clone the layout since we modify in place\n const out = cloneLayout(layout) as LayoutItem[];\n compactVerticalFast(out, cols, false);\n return out;\n },\n\n onMove(\n layout: Layout,\n item: LayoutItem,\n x: number,\n y: number,\n _cols: number\n ): Layout {\n // Simple move - compact() will be called after\n const newLayout = cloneLayout(layout) as Mutable<LayoutItem>[];\n const movedItem = newLayout.find(l => l.i === item.i);\n if (movedItem) {\n movedItem.x = x;\n movedItem.y = y;\n movedItem.moved = true;\n }\n return newLayout;\n }\n};\n\n/**\n * Fast vertical compactor that allows overlapping items.\n *\n * Compacts items upward but allows them to overlap each other.\n */\nexport const fastVerticalOverlapCompactor: Compactor = {\n ...fastVerticalCompactor,\n allowOverlap: true,\n\n compact(layout: Layout, cols: number): Layout {\n const out = cloneLayout(layout) as LayoutItem[];\n compactVerticalFast(out, cols, true);\n return out;\n }\n};\n","/**\n * Fast Horizontal Compactor\n *\n * An optimized horizontal compaction algorithm using a \"sweeping tide\" approach.\n * This algorithm has O(n log n) complexity (dominated by sorting) compared to\n * the default horizontal compactor which can have O(n²) complexity due to\n * recursive collision resolution.\n *\n * Best suited for large layouts (200+ items) where compaction performance\n * is critical. For smaller layouts, the difference is negligible.\n *\n * Adapted from the vertical fast compactor algorithm from PR #2152 by Morris Brodersen (@morris).\n *\n * @example\n * ```tsx\n * import { fastHorizontalCompactor } from 'react-grid-layout/extras';\n *\n * <GridLayout\n * compactor={fastHorizontalCompactor}\n * layout={layout}\n * // ...\n * />\n * ```\n */\n\nimport type { Compactor, Layout, LayoutItem, Mutable } from \"../core/types.js\";\nimport { cloneLayout } from \"../core/layout.js\";\n\n/**\n * Ensure the tide array has enough rows.\n */\nfunction ensureTideRows(tide: number[], neededRows: number): void {\n while (tide.length < neededRows) {\n tide.push(0);\n }\n}\n\n/**\n * Find the maximum tide value for a range of rows.\n */\nfunction getMaxTideForItem(tide: number[], y: number, h: number): number {\n let maxTide = 0;\n for (let row = y; row < y + h; row++) {\n const tideValue = tide[row] ?? 0;\n if (tideValue > maxTide) {\n maxTide = tideValue;\n }\n }\n return maxTide;\n}\n\n/**\n * Check if an item can be placed at a given position without colliding with static items.\n */\nfunction canPlaceAt(\n item: LayoutItem,\n x: number,\n y: number,\n staticItems: LayoutItem[],\n cols: number\n): boolean {\n // Check grid bounds\n if (x + item.w > cols) return false;\n\n // Check static collisions\n for (const staticItem of staticItems) {\n if (\n x < staticItem.x + staticItem.w &&\n x + item.w > staticItem.x &&\n y < staticItem.y + staticItem.h &&\n y + item.h > staticItem.y\n ) {\n return false;\n }\n }\n return true;\n}\n\n/**\n * Fast horizontal compaction using a \"sweeping tide\" algorithm with row wrapping.\n *\n * The algorithm works by:\n * 1. Sorting items by (y, x, static) - top-to-bottom, left-to-right (like standard compactor)\n * 2. Maintaining a \"tide\" array that tracks the rightmost occupied column per row\n * 3. For each item, finding the leftmost position it can occupy\n * 4. If the item doesn't fit in its current row, wrapping to the next row\n * 5. Checking for collisions with static items and adjusting as needed\n *\n * This avoids recursive collision resolution, making it O(n log n) overall.\n *\n * @param layout - The layout to compact (will be modified in place)\n * @param cols - Number of columns in the grid\n * @param allowOverlap - Whether to allow overlapping items\n */\nfunction compactHorizontalFast(\n layout: LayoutItem[],\n cols: number,\n allowOverlap: boolean\n): void {\n const numItems = layout.length;\n if (numItems === 0) return;\n\n // Sort items by column then row (same as standard horizontal compactor)\n // Static items are sorted first at each position to reduce collision checks\n layout.sort((a, b) => {\n if (a.x !== b.x) return a.x - b.x;\n if (a.y !== b.y) return a.y - b.y;\n if (a.static !== b.static) return a.static ? -1 : 1;\n return 0;\n });\n\n // Calculate max row extent for pre-allocation\n let maxRow = 0;\n for (let i = 0; i < numItems; i++) {\n const item = layout[i];\n if (item !== undefined) {\n const bottom = item.y + item.h;\n if (bottom > maxRow) maxRow = bottom;\n }\n }\n\n // \"Sweeping tide\" - tracks the rightmost blocked column per row\n // Pre-allocate based on max row extent to avoid repeated reallocations\n const tide: number[] = new Array(maxRow).fill(0);\n\n // Collect static items for collision checking\n const staticItems = layout.filter(item => item.static);\n\n // Safety limit for row wrapping (prevents infinite loops)\n // Use a limit relative to layout size (at least 10_000, or 100x the number of items)\n const maxRowLimit = Math.max(10_000, numItems * 100);\n\n for (let i = 0; i < numItems; i++) {\n const item = layout[i] as Mutable<LayoutItem>;\n\n if (item.static) {\n // Static items don't move; they become part of the tide\n ensureTideRows(tide, item.y + item.h);\n const t = item.x + item.w;\n for (let y = item.y; y < item.y + item.h; y++) {\n if ((tide[y] ?? 0) < t) {\n tide[y] = t;\n }\n }\n continue;\n }\n\n // For non-static items, find the best position\n let targetY = item.y;\n let targetX = 0;\n let placed = false;\n\n // Try to place the item, wrapping to lower rows if needed\n while (!placed) {\n ensureTideRows(tide, targetY + item.h);\n\n // Find the maximum tide across the rows this item spans\n const maxTide = getMaxTideForItem(tide, targetY, item.h);\n\n // Try to place at the tide position\n targetX = maxTide;\n\n // Check if item fits within grid bounds\n if (targetX + item.w <= cols) {\n // Check for static item collisions\n if (\n allowOverlap ||\n canPlaceAt(item, targetX, targetY, staticItems, cols)\n ) {\n placed = true;\n } else {\n // Find the rightmost static collision and try past it\n let maxStaticRight = targetX;\n let foundCollision = false;\n for (const staticItem of staticItems) {\n if (\n targetX < staticItem.x + staticItem.w &&\n targetX + item.w > staticItem.x &&\n targetY < staticItem.y + staticItem.h &&\n targetY + item.h > staticItem.y\n ) {\n maxStaticRight = Math.max(\n maxStaticRight,\n staticItem.x + staticItem.w\n );\n foundCollision = true;\n }\n }\n if (foundCollision) {\n targetX = maxStaticRight;\n }\n\n // After moving past static, check if we still fit\n if (foundCollision && targetX + item.w <= cols) {\n // Verify no more collisions at new position\n if (canPlaceAt(item, targetX, targetY, staticItems, cols)) {\n placed = true;\n } else {\n // Can't fit in this row, wrap to next\n targetY++;\n }\n } else if (foundCollision) {\n // Pushed past grid edge, wrap to next row\n targetY++;\n } else {\n // No collision but can't place - shouldn't happen\n placed = true;\n }\n }\n } else {\n // Doesn't fit in this row, wrap to next\n targetY++;\n }\n\n // Safety check to prevent infinite loops\n if (targetY > maxRowLimit) {\n if (typeof console !== \"undefined\" && console.warn) {\n console.warn(\n `Fast horizontal compactor: Item \"${item.i}\" exceeded max row limit (${targetY}). ` +\n `This may indicate a layout that cannot be compacted within grid bounds.`\n );\n }\n // Give up and place at current position\n targetX = 0;\n placed = true;\n }\n }\n\n // Update item position\n item.x = targetX;\n item.y = targetY;\n item.moved = false;\n\n // Update tide: mark rows as blocked up to item's right edge\n ensureTideRows(tide, targetY + item.h);\n const t = targetX + item.w;\n for (let y = targetY; y < targetY + item.h; y++) {\n if ((tide[y] ?? 0) < t) {\n tide[y] = t;\n }\n }\n }\n}\n\n/**\n * Fast horizontal compactor - optimized for large layouts.\n *\n * Uses a \"sweeping tide\" algorithm that achieves O(n log n) complexity\n * instead of the potentially O(n²) recursive collision resolution.\n *\n * Best suited for layouts with 200+ items where compaction performance\n * becomes noticeable. For smaller layouts, the standard horizontalCompactor\n * works equally well.\n */\nexport const fastHorizontalCompactor: Compactor = {\n type: \"horizontal\",\n allowOverlap: false,\n\n compact(layout: Layout, cols: number): Layout {\n // Clone the layout since we modify in place\n const out = cloneLayout(layout) as LayoutItem[];\n compactHorizontalFast(out, cols, false);\n return out;\n },\n\n onMove(\n layout: Layout,\n item: LayoutItem,\n x: number,\n y: number,\n _cols: number\n ): Layout {\n // Simple move - compact() will be called after\n const newLayout = cloneLayout(layout) as Mutable<LayoutItem>[];\n const movedItem = newLayout.find(l => l.i === item.i);\n if (movedItem) {\n movedItem.x = x;\n movedItem.y = y;\n movedItem.moved = true;\n }\n return newLayout;\n }\n};\n\n/**\n * Fast horizontal compactor that allows overlapping items.\n *\n * Compacts items leftward but allows them to overlap each other.\n */\nexport const fastHorizontalOverlapCompactor: Compactor = {\n ...fastHorizontalCompactor,\n allowOverlap: true,\n\n compact(layout: Layout, cols: number): Layout {\n const out = cloneLayout(layout) as LayoutItem[];\n compactHorizontalFast(out, cols, true);\n return out;\n }\n};\n","/**\n * Wrap Compactor\n *\n * A compaction algorithm that treats grid items like words in a paragraph.\n * Items flow left-to-right, wrapping to the next row when they reach\n * the grid edge.\n *\n * When dragging:\n * - Moving an item earlier in the sequence shifts other items down/right\n * - Moving an item later in the sequence shifts other items up/left\n *\n * This creates a natural reordering behavior similar to drag-and-drop\n * in file managers or card layouts.\n *\n * Based on the algorithm from PR #1773 by John Thomson (@JohnThomson).\n *\n * @example\n * ```tsx\n * import { wrapCompactor } from 'react-grid-layout/extras';\n *\n * <GridLayout\n * compactor={wrapCompactor}\n * layout={layout}\n * // ...\n * />\n * ```\n */\n\nimport type { Compactor, Layout, LayoutItem, Mutable } from \"../core/types.js\";\nimport { cloneLayout, cloneLayoutItem } from \"../core/layout.js\";\n\n/**\n * Sort items in wrap order: left-to-right, top-to-bottom.\n * This is the visual reading order for wrapped content.\n */\nfunction sortByWrapOrder(layout: Layout): LayoutItem[] {\n return [...layout].sort((a, b) => {\n // Primary: top-to-bottom (by row)\n if (a.y !== b.y) return a.y - b.y;\n // Secondary: left-to-right (by column)\n return a.x - b.x;\n });\n}\n\n/**\n * Get the linear position of an item in wrap order.\n * Position 0 is top-left, increasing left-to-right then top-to-bottom.\n */\nfunction getWrapPosition(item: LayoutItem, cols: number): number {\n return item.y * cols + item.x;\n}\n\n/**\n * Convert a linear wrap position back to x,y coordinates.\n */\nfunction fromWrapPosition(pos: number, cols: number): { x: number; y: number } {\n return {\n x: pos % cols,\n y: Math.floor(pos / cols)\n };\n}\n\n/**\n * Compact items in wrap order, filling gaps from left-to-right, top-to-bottom.\n * All items are assumed to be 1x1 for wrap mode to work correctly.\n */\nfunction compactWrap(layout: Layout, cols: number): LayoutItem[] {\n if (layout.length === 0) return [];\n\n const sorted = sortByWrapOrder(layout);\n const out: LayoutItem[] = new Array(layout.length);\n const statics = sorted.filter(item => item.static);\n\n // Track which positions are occupied by static items\n const staticPositions = new Set<number>();\n for (const s of statics) {\n // For static items, mark all cells they occupy\n for (let dy = 0; dy < s.h; dy++) {\n for (let dx = 0; dx < s.w; dx++) {\n staticPositions.add((s.y + dy) * cols + (s.x + dx));\n }\n }\n }\n\n let nextPos = 0;\n\n for (let i = 0; i < sorted.length; i++) {\n const sortedItem = sorted[i];\n if (sortedItem === undefined) continue;\n\n const l = cloneLayoutItem(sortedItem);\n\n if (l.static) {\n // Static items stay in place\n const originalIndex = layout.indexOf(sortedItem);\n out[originalIndex] = l;\n l.moved = false;\n continue;\n }\n\n // Find next available position that doesn't conflict with statics\n while (staticPositions.has(nextPos)) {\n nextPos++;\n }\n\n // For items larger than 1x1, we need to check if the full item fits\n const { x, y } = fromWrapPosition(nextPos, cols);\n\n // Check if item would overflow the row\n if (x + l.w > cols) {\n // Move to start of next row\n nextPos = (y + 1) * cols;\n // Skip any static positions on the new row\n while (staticPositions.has(nextPos)) {\n nextPos++;\n }\n }\n\n const newCoords = fromWrapPosition(nextPos, cols);\n (l as Mutable<LayoutItem>).x = newCoords.x;\n (l as Mutable<LayoutItem>).y = newCoords.y;\n\n // Advance past this item\n nextPos += l.w;\n\n const originalIndex = layout.indexOf(sortedItem);\n out[originalIndex] = l;\n l.moved = false;\n }\n\n return out;\n}\n\n/**\n * Move an item in wrap mode, shifting other items to maintain sequence.\n *\n * When moving an item:\n * - If moving to an earlier position: items between shift right/down\n * - If moving to a later position: items between shift left/up\n */\nfunction moveInWrapMode(\n layout: Layout,\n item: LayoutItem,\n x: number,\n y: number,\n cols: number\n): Layout {\n const newLayout = cloneLayout(layout) as Mutable<LayoutItem>[];\n const movedItem = newLayout.find(l => l.i === item.i);\n\n if (!movedItem) {\n return newLayout;\n }\n\n const oldPos = getWrapPosition(movedItem, cols);\n const newPos = getWrapPosition({ ...movedItem, x, y }, cols);\n\n if (oldPos === newPos) {\n // No actual movement in wrap order\n movedItem.x = x;\n movedItem.y = y;\n movedItem.moved = true;\n return newLayout;\n }\n\n const isMovingEarlier = newPos < oldPos;\n\n // Get all non-static items sorted by wrap position\n const sortedItems = newLayout\n .filter(l => !l.static)\n .sort((a, b) => getWrapPosition(a, cols) - getWrapPosition(b, cols));\n\n if (isMovingEarlier) {\n // Moving item earlier: shift items in [newPos, oldPos) to the right\n for (const l of sortedItems) {\n const pos = getWrapPosition(l, cols);\n if (l.i === item.i) continue;\n\n if (pos >= newPos && pos < oldPos) {\n // Shift this item right by 1 position in wrap order\n const shiftedPos = pos + 1;\n const coords = fromWrapPosition(shiftedPos, cols);\n l.x = coords.x;\n l.y = coords.y;\n l.moved = true;\n }\n }\n } else {\n // Moving item later: shift items in (oldPos, newPos] to the left\n for (const l of sortedItems) {\n const pos = getWrapPosition(l, cols);\n if (l.i === item.i) continue;\n\n if (pos > oldPos && pos <= newPos) {\n // Shift this item left by 1 position in wrap order\n const shiftedPos = pos - 1;\n const coords = fromWrapPosition(shiftedPos, cols);\n l.x = coords.x;\n l.y = coords.y;\n l.moved = true;\n }\n }\n }\n\n // Finally, move the dragged item to its new position\n movedItem.x = x;\n movedItem.y = y;\n movedItem.moved = true;\n\n return newLayout;\n}\n\n/**\n * Wrap compactor - arranges items like words in a paragraph.\n *\n * Items flow left-to-right and wrap to the next row when they\n * reach the grid edge. Dragging an item reorders the sequence,\n * with other items shifting to maintain the flow.\n *\n * Works best with uniformly-sized items (especially 1x1), but\n * handles larger items by ensuring they fit within row bounds.\n */\nexport const wrapCompactor: Compactor = {\n type: \"wrap\",\n allowOverlap: false,\n\n compact(layout: Layout, cols: number): Layout {\n return compactWrap(layout, cols);\n },\n\n onMove(\n layout: Layout,\n item: LayoutItem,\n x: number,\n y: number,\n cols: number\n ): Layout {\n return moveInWrapMode(layout, item, x, y, cols);\n }\n};\n\n/**\n * Wrap compactor that allows overlapping items.\n */\nexport const wrapOverlapCompactor: Compactor = {\n ...wrapCompactor,\n allowOverlap: true,\n\n compact(layout: Layout, _cols: number): Layout {\n // With overlap allowed, just clone without compacting\n return cloneLayout(layout);\n }\n};\n"]}
export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, DefaultBreakpoints, DragState, DropState, GridItem, GridItemCallback, GridItemProps, ResizeHandle, ResizeState, UseContainerWidthOptions, UseContainerWidthResult, UseGridLayoutOptions, UseGridLayoutResult, UseResponsiveLayoutOptions, UseResponsiveLayoutResult, useContainerWidth, useGridLayout, useResponsiveLayout } from './react.mjs';
export { G as GridLayout, a as GridLayoutProps, G as ReactGridLayout, a as ReactGridLayoutProps, R as Responsive, R as ResponsiveGridLayout, b as ResponsiveGridLayoutProps, b as ResponsiveProps, G as default } from './ResponsiveGridLayout-D6lFRE3f.mjs';
export { B as Breakpoint, b as Breakpoints, C as CompactType, c as Compactor, D as DroppingPosition, E as EventCallback, G as GridDragEvent, e as GridResizeEvent, L as Layout, a as LayoutItem, P as Position, d as ResizeHandleAxis, R as ResponsiveLayouts } from './types-Cxf4nHNr.mjs';
export { c as collides, h as findOrGenerateResponsiveLayout, a as getAllCollisions, e as getBreakpointFromWidth, f as getColsFromBreakpoint, g as getFirstCollision, s as sortLayoutItems, d as sortLayoutItemsByColRow, b as sortLayoutItemsByRowCol } from './responsive-CJxefsYw.mjs';
export { b as bottom, c as cloneLayout, a as cloneLayoutItem, d as getCompactor, g as getLayoutItem, h as horizontalCompactor, m as moveElement, n as noCompactor, f as setTopLeft, s as setTransform, v as validateLayout, e as verticalCompactor } from './position-BmN1z36J.mjs';
export { c as calcGridItemPosition, b as calcWH, a as calcXY } from './calculate-CwYDW8na.mjs';
export { G as GridLayout, a as GridLayoutProps, G as ReactGridLayout, a as ReactGridLayoutProps, R as Responsive, R as ResponsiveGridLayout, b as ResponsiveGridLayoutProps, b as ResponsiveProps, G as default } from './ResponsiveGridLayout-BkHF9YHa.mjs';
export { B as Breakpoint, b as Breakpoints, C as CompactType, c as Compactor, D as DroppingPosition, E as EventCallback, G as GridDragEvent, e as GridResizeEvent, L as Layout, a as LayoutItem, P as Position, d as ResizeHandleAxis, R as ResponsiveLayouts } from './types-CokovIMH.mjs';
export { c as collides, h as findOrGenerateResponsiveLayout, a as getAllCollisions, e as getBreakpointFromWidth, f as getColsFromBreakpoint, g as getFirstCollision, s as sortLayoutItems, d as sortLayoutItemsByColRow, b as sortLayoutItemsByRowCol } from './responsive-BB5d98xz.mjs';
export { b as bottom, c as cloneLayout, a as cloneLayoutItem, d as getCompactor, g as getLayoutItem, h as horizontalCompactor, m as moveElement, n as noCompactor, f as setTopLeft, s as setTransform, v as validateLayout, e as verticalCompactor } from './position-C8a5g6bb.mjs';
export { c as calcGridItemPosition, b as calcWH, a as calcXY } from './calculate-DwbL1D06.mjs';
import 'react';
export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, DefaultBreakpoints, DragState, DropState, GridItem, GridItemCallback, GridItemProps, ResizeHandle, ResizeState, UseContainerWidthOptions, UseContainerWidthResult, UseGridLayoutOptions, UseGridLayoutResult, UseResponsiveLayoutOptions, UseResponsiveLayoutResult, useContainerWidth, useGridLayout, useResponsiveLayout } from './react.js';
export { G as GridLayout, a as GridLayoutProps, G as ReactGridLayout, a as ReactGridLayoutProps, R as Responsive, R as ResponsiveGridLayout, b as ResponsiveGridLayoutProps, b as ResponsiveProps, G as default } from './ResponsiveGridLayout-CH4s0tKj.js';
export { B as Breakpoint, b as Breakpoints, C as CompactType, c as Compactor, D as DroppingPosition, E as EventCallback, G as GridDragEvent, e as GridResizeEvent, L as Layout, a as LayoutItem, P as Position, d as ResizeHandleAxis, R as ResponsiveLayouts } from './types-Cxf4nHNr.js';
export { c as collides, h as findOrGenerateResponsiveLayout, a as getAllCollisions, e as getBreakpointFromWidth, f as getColsFromBreakpoint, g as getFirstCollision, s as sortLayoutItems, d as sortLayoutItemsByColRow, b as sortLayoutItemsByRowCol } from './responsive-C4L1ESlm.js';
export { b as bottom, c as cloneLayout, a as cloneLayoutItem, d as getCompactor, g as getLayoutItem, h as horizontalCompactor, m as moveElement, n as noCompactor, f as setTopLeft, s as setTransform, v as validateLayout, e as verticalCompactor } from './position-Dk2b4ZMS.js';
export { c as calcGridItemPosition, b as calcWH, a as calcXY } from './calculate-mgLpNJ5O.js';
export { G as GridLayout, a as GridLayoutProps, G as ReactGridLayout, a as ReactGridLayoutProps, R as Responsive, R as ResponsiveGridLayout, b as ResponsiveGridLayoutProps, b as ResponsiveProps, G as default } from './ResponsiveGridLayout-CLn16-X3.js';
export { B as Breakpoint, b as Breakpoints, C as CompactType, c as Compactor, D as DroppingPosition, E as EventCallback, G as GridDragEvent, e as GridResizeEvent, L as Layout, a as LayoutItem, P as Position, d as ResizeHandleAxis, R as ResponsiveLayouts } from './types-CokovIMH.js';
export { c as collides, h as findOrGenerateResponsiveLayout, a as getAllCollisions, e as getBreakpointFromWidth, f as getColsFromBreakpoint, g as getFirstCollision, s as sortLayoutItems, d as sortLayoutItemsByColRow, b as sortLayoutItemsByRowCol } from './responsive-BXI-GCXG.js';
export { b as bottom, c as cloneLayout, a as cloneLayoutItem, d as getCompactor, g as getLayoutItem, h as horizontalCompactor, m as moveElement, n as noCompactor, f as setTopLeft, s as setTransform, v as validateLayout, e as verticalCompactor } from './position-H8tBL91b.js';
export { c as calcGridItemPosition, b as calcWH, a as calcXY } from './calculate-DsVTldEE.js';
import 'react';

@@ -5,7 +5,7 @@ 'use strict';

var chunkH5KMDLY3_js = require('./chunk-H5KMDLY3.js');
require('./chunk-PBQSHIID.js');
var chunkBFTKGAP3_js = require('./chunk-BFTKGAP3.js');
var chunk3WO4SAYB_js = require('./chunk-3WO4SAYB.js');
var chunkF6NQPYKT_js = require('./chunk-F6NQPYKT.js');
var chunkGPZBANOK_js = require('./chunk-GPZBANOK.js');
require('./chunk-7ELO5FRW.js');
var chunkQRW3ND4U_js = require('./chunk-QRW3ND4U.js');
var chunkFN6MIZ24_js = require('./chunk-FN6MIZ24.js');
var chunkBJFPTW5Q_js = require('./chunk-BJFPTW5Q.js');

@@ -16,141 +16,141 @@

enumerable: true,
get: function () { return chunkH5KMDLY3_js.DEFAULT_BREAKPOINTS; }
get: function () { return chunkGPZBANOK_js.DEFAULT_BREAKPOINTS; }
});
Object.defineProperty(exports, "DEFAULT_COLS", {
enumerable: true,
get: function () { return chunkH5KMDLY3_js.DEFAULT_COLS; }
get: function () { return chunkGPZBANOK_js.DEFAULT_COLS; }
});
Object.defineProperty(exports, "useContainerWidth", {
enumerable: true,
get: function () { return chunkH5KMDLY3_js.useContainerWidth; }
get: function () { return chunkGPZBANOK_js.useContainerWidth; }
});
Object.defineProperty(exports, "useGridLayout", {
enumerable: true,
get: function () { return chunkH5KMDLY3_js.useGridLayout; }
get: function () { return chunkGPZBANOK_js.useGridLayout; }
});
Object.defineProperty(exports, "useResponsiveLayout", {
enumerable: true,
get: function () { return chunkH5KMDLY3_js.useResponsiveLayout; }
get: function () { return chunkGPZBANOK_js.useResponsiveLayout; }
});
Object.defineProperty(exports, "GridItem", {
enumerable: true,
get: function () { return chunkBFTKGAP3_js.GridItem; }
get: function () { return chunkQRW3ND4U_js.GridItem; }
});
Object.defineProperty(exports, "GridLayout", {
enumerable: true,
get: function () { return chunkBFTKGAP3_js.GridLayout; }
get: function () { return chunkQRW3ND4U_js.GridLayout; }
});
Object.defineProperty(exports, "ReactGridLayout", {
enumerable: true,
get: function () { return chunkBFTKGAP3_js.GridLayout; }
get: function () { return chunkQRW3ND4U_js.GridLayout; }
});
Object.defineProperty(exports, "Responsive", {
enumerable: true,
get: function () { return chunkBFTKGAP3_js.ResponsiveGridLayout; }
get: function () { return chunkQRW3ND4U_js.ResponsiveGridLayout; }
});
Object.defineProperty(exports, "ResponsiveGridLayout", {
enumerable: true,
get: function () { return chunkBFTKGAP3_js.ResponsiveGridLayout; }
get: function () { return chunkQRW3ND4U_js.ResponsiveGridLayout; }
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function () { return chunkBFTKGAP3_js.GridLayout; }
get: function () { return chunkQRW3ND4U_js.GridLayout; }
});
Object.defineProperty(exports, "bottom", {
Object.defineProperty(exports, "findOrGenerateResponsiveLayout", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.bottom; }
get: function () { return chunkFN6MIZ24_js.findOrGenerateResponsiveLayout; }
});
Object.defineProperty(exports, "cloneLayout", {
Object.defineProperty(exports, "getBreakpointFromWidth", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.cloneLayout; }
get: function () { return chunkFN6MIZ24_js.getBreakpointFromWidth; }
});
Object.defineProperty(exports, "cloneLayoutItem", {
Object.defineProperty(exports, "getColsFromBreakpoint", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.cloneLayoutItem; }
get: function () { return chunkFN6MIZ24_js.getColsFromBreakpoint; }
});
Object.defineProperty(exports, "collides", {
Object.defineProperty(exports, "getCompactor", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.collides; }
get: function () { return chunkFN6MIZ24_js.getCompactor; }
});
Object.defineProperty(exports, "findOrGenerateResponsiveLayout", {
Object.defineProperty(exports, "horizontalCompactor", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.findOrGenerateResponsiveLayout; }
get: function () { return chunkFN6MIZ24_js.horizontalCompactor; }
});
Object.defineProperty(exports, "getAllCollisions", {
Object.defineProperty(exports, "noCompactor", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.getAllCollisions; }
get: function () { return chunkFN6MIZ24_js.noCompactor; }
});
Object.defineProperty(exports, "getBreakpointFromWidth", {
Object.defineProperty(exports, "setTopLeft", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.getBreakpointFromWidth; }
get: function () { return chunkFN6MIZ24_js.setTopLeft; }
});
Object.defineProperty(exports, "getColsFromBreakpoint", {
Object.defineProperty(exports, "setTransform", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.getColsFromBreakpoint; }
get: function () { return chunkFN6MIZ24_js.setTransform; }
});
Object.defineProperty(exports, "getCompactor", {
Object.defineProperty(exports, "verticalCompactor", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.getCompactor; }
get: function () { return chunkFN6MIZ24_js.verticalCompactor; }
});
Object.defineProperty(exports, "getFirstCollision", {
Object.defineProperty(exports, "bottom", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.getFirstCollision; }
get: function () { return chunkBJFPTW5Q_js.bottom; }
});
Object.defineProperty(exports, "getLayoutItem", {
Object.defineProperty(exports, "calcGridItemPosition", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.getLayoutItem; }
get: function () { return chunkBJFPTW5Q_js.calcGridItemPosition; }
});
Object.defineProperty(exports, "horizontalCompactor", {
Object.defineProperty(exports, "calcWH", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.horizontalCompactor; }
get: function () { return chunkBJFPTW5Q_js.calcWH; }
});
Object.defineProperty(exports, "moveElement", {
Object.defineProperty(exports, "calcXY", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.moveElement; }
get: function () { return chunkBJFPTW5Q_js.calcXY; }
});
Object.defineProperty(exports, "noCompactor", {
Object.defineProperty(exports, "cloneLayout", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.noCompactor; }
get: function () { return chunkBJFPTW5Q_js.cloneLayout; }
});
Object.defineProperty(exports, "setTopLeft", {
Object.defineProperty(exports, "cloneLayoutItem", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.setTopLeft; }
get: function () { return chunkBJFPTW5Q_js.cloneLayoutItem; }
});
Object.defineProperty(exports, "setTransform", {
Object.defineProperty(exports, "collides", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.setTransform; }
get: function () { return chunkBJFPTW5Q_js.collides; }
});
Object.defineProperty(exports, "sortLayoutItems", {
Object.defineProperty(exports, "getAllCollisions", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.sortLayoutItems; }
get: function () { return chunkBJFPTW5Q_js.getAllCollisions; }
});
Object.defineProperty(exports, "sortLayoutItemsByColRow", {
Object.defineProperty(exports, "getFirstCollision", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.sortLayoutItemsByColRow; }
get: function () { return chunkBJFPTW5Q_js.getFirstCollision; }
});
Object.defineProperty(exports, "sortLayoutItemsByRowCol", {
Object.defineProperty(exports, "getLayoutItem", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.sortLayoutItemsByRowCol; }
get: function () { return chunkBJFPTW5Q_js.getLayoutItem; }
});
Object.defineProperty(exports, "validateLayout", {
Object.defineProperty(exports, "moveElement", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.validateLayout; }
get: function () { return chunkBJFPTW5Q_js.moveElement; }
});
Object.defineProperty(exports, "verticalCompactor", {
Object.defineProperty(exports, "sortLayoutItems", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.verticalCompactor; }
get: function () { return chunkBJFPTW5Q_js.sortLayoutItems; }
});
Object.defineProperty(exports, "calcGridItemPosition", {
Object.defineProperty(exports, "sortLayoutItemsByColRow", {
enumerable: true,
get: function () { return chunkF6NQPYKT_js.calcGridItemPosition; }
get: function () { return chunkBJFPTW5Q_js.sortLayoutItemsByColRow; }
});
Object.defineProperty(exports, "calcWH", {
Object.defineProperty(exports, "sortLayoutItemsByRowCol", {
enumerable: true,
get: function () { return chunkF6NQPYKT_js.calcWH; }
get: function () { return chunkBJFPTW5Q_js.sortLayoutItemsByRowCol; }
});
Object.defineProperty(exports, "calcXY", {
Object.defineProperty(exports, "validateLayout", {
enumerable: true,
get: function () { return chunkF6NQPYKT_js.calcXY; }
get: function () { return chunkBJFPTW5Q_js.validateLayout; }
});
//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map

@@ -1,7 +0,7 @@

export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, useContainerWidth, useGridLayout, useResponsiveLayout } from './chunk-ZCXE6SR5.mjs';
import './chunk-ZWN22PS2.mjs';
export { GridItem, GridLayout, GridLayout as ReactGridLayout, ResponsiveGridLayout as Responsive, ResponsiveGridLayout, GridLayout as default } from './chunk-R35HZZTA.mjs';
export { bottom, cloneLayout, cloneLayoutItem, collides, findOrGenerateResponsiveLayout, getAllCollisions, getBreakpointFromWidth, getColsFromBreakpoint, getCompactor, getFirstCollision, getLayoutItem, horizontalCompactor, moveElement, noCompactor, setTopLeft, setTransform, sortLayoutItems, sortLayoutItemsByColRow, sortLayoutItemsByRowCol, validateLayout, verticalCompactor } from './chunk-4HNUMWQK.mjs';
export { calcGridItemPosition, calcWH, calcXY } from './chunk-2KUHNJXF.mjs';
export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, useContainerWidth, useGridLayout, useResponsiveLayout } from './chunk-LWF5EYMO.mjs';
import './chunk-526JND3R.mjs';
export { GridItem, GridLayout, GridLayout as ReactGridLayout, ResponsiveGridLayout as Responsive, ResponsiveGridLayout, GridLayout as default } from './chunk-MXXN7GUE.mjs';
export { findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, getCompactor, horizontalCompactor, noCompactor, setTopLeft, setTransform, verticalCompactor } from './chunk-2O3ZME4Q.mjs';
export { bottom, calcGridItemPosition, calcWH, calcXY, cloneLayout, cloneLayoutItem, collides, getAllCollisions, getFirstCollision, getLayoutItem, moveElement, sortLayoutItems, sortLayoutItemsByColRow, sortLayoutItemsByRowCol, validateLayout } from './chunk-AWM66AWF.mjs';
//# sourceMappingURL=index.mjs.map
//# sourceMappingURL=index.mjs.map
import * as react_jsx_runtime from 'react/jsx-runtime';
import React__default, { ComponentType } from 'react';
import { a as GridLayoutProps, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-D6lFRE3f.mjs';
import { L as Layout, a as LayoutItem, C as CompactType, d as ResizeHandleAxis, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-Cxf4nHNr.mjs';
import { a as GridLayoutProps, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-BkHF9YHa.mjs';
import { L as Layout, a as LayoutItem, C as CompactType, d as ResizeHandleAxis, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-CokovIMH.mjs';

@@ -6,0 +6,0 @@ /**

import * as react_jsx_runtime from 'react/jsx-runtime';
import React__default, { ComponentType } from 'react';
import { a as GridLayoutProps, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-CH4s0tKj.js';
import { L as Layout, a as LayoutItem, C as CompactType, d as ResizeHandleAxis, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-Cxf4nHNr.js';
import { a as GridLayoutProps, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-CLn16-X3.js';
import { L as Layout, a as LayoutItem, C as CompactType, d as ResizeHandleAxis, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-CokovIMH.js';

@@ -6,0 +6,0 @@ /**

@@ -5,5 +5,5 @@ 'use strict';

var chunkBFTKGAP3_js = require('./chunk-BFTKGAP3.js');
var chunk3WO4SAYB_js = require('./chunk-3WO4SAYB.js');
require('./chunk-F6NQPYKT.js');
var chunkQRW3ND4U_js = require('./chunk-QRW3ND4U.js');
var chunkFN6MIZ24_js = require('./chunk-FN6MIZ24.js');
require('./chunk-BJFPTW5Q.js');
var react = require('react');

@@ -98,11 +98,12 @@ var jsxRuntime = require('react/jsx-runtime');

if (!useCSSTransforms) {
positionStrategy = chunk3WO4SAYB_js.absoluteStrategy;
positionStrategy = chunkFN6MIZ24_js.absoluteStrategy;
} else if (transformScale !== 1) {
positionStrategy = chunk3WO4SAYB_js.createScaledStrategy(transformScale);
positionStrategy = chunkFN6MIZ24_js.createScaledStrategy(transformScale);
} else {
positionStrategy = chunk3WO4SAYB_js.transformStrategy;
positionStrategy = chunkFN6MIZ24_js.transformStrategy;
}
const compactor = chunk3WO4SAYB_js.getCompactor(compactType, allowOverlap, preventCollision);
const compactor = chunkFN6MIZ24_js.getCompactor(compactType, allowOverlap, preventCollision);
const constraints = isBounded ? [...chunkFN6MIZ24_js.defaultConstraints, chunkFN6MIZ24_js.containerBounds] : chunkFN6MIZ24_js.defaultConstraints;
return /* @__PURE__ */ jsxRuntime.jsx(
chunkBFTKGAP3_js.GridLayout,
chunkQRW3ND4U_js.GridLayout,
{

@@ -116,2 +117,3 @@ width,

compactor,
constraints,
layout,

@@ -217,11 +219,11 @@ droppingItem,

if (!useCSSTransforms) {
positionStrategy = chunk3WO4SAYB_js.absoluteStrategy;
positionStrategy = chunkFN6MIZ24_js.absoluteStrategy;
} else if (transformScale !== 1) {
positionStrategy = chunk3WO4SAYB_js.createScaledStrategy(transformScale);
positionStrategy = chunkFN6MIZ24_js.createScaledStrategy(transformScale);
} else {
positionStrategy = chunk3WO4SAYB_js.transformStrategy;
positionStrategy = chunkFN6MIZ24_js.transformStrategy;
}
const compactor = chunk3WO4SAYB_js.getCompactor(compactType, allowOverlap, preventCollision);
const compactor = chunkFN6MIZ24_js.getCompactor(compactType, allowOverlap, preventCollision);
return /* @__PURE__ */ jsxRuntime.jsx(
chunkBFTKGAP3_js.ResponsiveGridLayout,
chunkQRW3ND4U_js.ResponsiveGridLayout,
{

@@ -274,5 +276,8 @@ width,

setMounted(true);
resizeObserverRef.current = new ResizeObserver((entries) => {
const node2 = elementRef.current;
if (node2 instanceof HTMLElement && entries[0]) {
}, []);
react.useEffect(() => {
const node = elementRef.current;
if (!(node instanceof HTMLElement)) return;
const observer = new ResizeObserver((entries) => {
if (entries[0]) {
const newWidth = entries[0].contentRect.width;

@@ -282,13 +287,9 @@ setWidth(newWidth);

});
const node = elementRef.current;
if (node instanceof HTMLElement) {
resizeObserverRef.current.observe(node);
}
observer.observe(node);
resizeObserverRef.current = observer;
return () => {
if (node instanceof HTMLElement && resizeObserverRef.current) {
resizeObserverRef.current.unobserve(node);
}
resizeObserverRef.current?.disconnect();
observer.unobserve(node);
observer.disconnect();
};
}, []);
}, [mounted]);
if (measureBeforeMount && !mounted) {

@@ -295,0 +296,0 @@ return /* @__PURE__ */ jsxRuntime.jsx(

@@ -1,1 +0,1 @@

{"version":3,"sources":["../src/legacy/ReactGridLayout.tsx","../src/legacy/ResponsiveReactGridLayout.tsx","../src/react/components/WidthProvider.tsx"],"names":["absoluteStrategy","createScaledStrategy","transformStrategy","getCompactor","jsx","GridLayout","ResponsiveGridLayout","useState","useRef","useEffect","node","clsx"],"mappings":"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","file":"legacy.js","sourcesContent":["/**\n * Legacy ReactGridLayout wrapper\n *\n * This component wraps the new TypeScript GridLayout to provide\n * backwards compatibility with the v1 API by converting flat props\n * to the new composable interface format.\n */\n\nimport React from \"react\";\nimport {\n GridLayout,\n type GridLayoutProps\n} from \"../react/components/GridLayout.js\";\nimport type {\n Layout,\n LayoutItem,\n CompactType,\n ResizeHandleAxis,\n GridConfig,\n DragConfig,\n ResizeConfig,\n DropConfig,\n PositionStrategy\n} from \"../core/types.js\";\nimport { getCompactor } from \"../core/compactors.js\";\nimport {\n transformStrategy,\n absoluteStrategy,\n createScaledStrategy\n} from \"../core/position.js\";\n\n// ============================================================================\n// Legacy Props Interface\n// ============================================================================\n\n/**\n * Legacy props interface for backwards compatibility with v1 API.\n * These flat props are converted to composable interfaces internally.\n */\nexport interface LegacyReactGridLayoutProps {\n // Required\n children: React.ReactNode;\n width: number;\n\n // Grid measurement (→ gridConfig)\n cols?: number;\n rowHeight?: number;\n maxRows?: number;\n margin?: readonly [number, number];\n containerPadding?: readonly [number, number] | null;\n\n // Layout data\n layout?: Layout;\n droppingItem?: LayoutItem;\n\n // Compaction (→ compactor)\n compactType?: CompactType;\n preventCollision?: boolean;\n allowOverlap?: boolean;\n /** @deprecated Use compactType instead */\n verticalCompact?: boolean;\n\n // Drag behavior (→ dragConfig)\n isDraggable?: boolean;\n isBounded?: boolean;\n draggableHandle?: string;\n draggableCancel?: string;\n\n // Resize behavior (→ resizeConfig)\n isResizable?: boolean;\n resizeHandles?: ResizeHandleAxis[];\n resizeHandle?:\n | React.ReactElement\n | ((\n axis: ResizeHandleAxis,\n ref: React.Ref<HTMLElement>\n ) => React.ReactElement);\n\n // Drop behavior (→ dropConfig)\n isDroppable?: boolean;\n\n // Position (→ positionStrategy)\n useCSSTransforms?: boolean;\n transformScale?: number;\n\n // Container props (passed through)\n autoSize?: boolean;\n className?: string;\n style?: React.CSSProperties;\n innerRef?: React.Ref<HTMLDivElement>;\n\n // Callbacks (passed through)\n onLayoutChange?: (layout: Layout) => void;\n onDragStart?: GridLayoutProps[\"onDragStart\"];\n onDrag?: GridLayoutProps[\"onDrag\"];\n onDragStop?: GridLayoutProps[\"onDragStop\"];\n onResizeStart?: GridLayoutProps[\"onResizeStart\"];\n onResize?: GridLayoutProps[\"onResize\"];\n onResizeStop?: GridLayoutProps[\"onResizeStop\"];\n onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;\n onDropDragOver?: (\n e: React.DragEvent\n ) => { w?: number; h?: number } | false | void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * ReactGridLayout - Legacy wrapper component\n *\n * Converts v1 flat props to v2 composable interfaces for backwards compatibility.\n */\nfunction ReactGridLayout(props: LegacyReactGridLayoutProps) {\n const {\n // Required\n children,\n width,\n\n // Grid measurement\n cols = 12,\n rowHeight = 150,\n maxRows = Infinity,\n margin = [10, 10],\n containerPadding = null,\n\n // Layout data\n layout,\n droppingItem,\n\n // Compaction\n compactType: compactTypeProp,\n preventCollision = false,\n allowOverlap = false,\n verticalCompact,\n\n // Drag behavior\n isDraggable = true,\n isBounded = false,\n draggableHandle,\n draggableCancel,\n\n // Resize behavior\n isResizable = true,\n resizeHandles = [\"se\"],\n resizeHandle,\n\n // Drop behavior\n isDroppable = false,\n\n // Position\n useCSSTransforms = true,\n transformScale = 1,\n\n // Container props\n autoSize,\n className,\n style,\n innerRef,\n\n // Callbacks\n onLayoutChange,\n onDragStart,\n onDrag,\n onDragStop,\n onResizeStart,\n onResize,\n onResizeStop,\n onDrop,\n onDropDragOver\n } = props;\n\n // Handle deprecated verticalCompact prop\n let compactType: CompactType =\n compactTypeProp === undefined ? \"vertical\" : compactTypeProp;\n if (verticalCompact === false) {\n if (process.env[\"NODE_ENV\"] !== \"production\") {\n console.warn(\n \"`verticalCompact` on <ReactGridLayout> is deprecated and will be removed soon. \" +\n 'Use `compactType`: \"horizontal\" | \"vertical\" | null.'\n );\n }\n compactType = null;\n }\n\n // Convert flat props to composable interfaces\n\n const gridConfig: Partial<GridConfig> = {\n cols,\n rowHeight,\n maxRows,\n margin,\n containerPadding\n };\n\n const dragConfig: Partial<DragConfig> = {\n enabled: isDraggable,\n bounded: isBounded,\n handle: draggableHandle,\n cancel: draggableCancel\n };\n\n const resizeConfig: Partial<ResizeConfig> = {\n enabled: isResizable,\n handles: resizeHandles,\n handleComponent: resizeHandle\n };\n\n const dropConfig: Partial<DropConfig> = {\n enabled: isDroppable\n };\n\n // Build position strategy\n let positionStrategy: PositionStrategy;\n if (!useCSSTransforms) {\n positionStrategy = absoluteStrategy;\n } else if (transformScale !== 1) {\n positionStrategy = createScaledStrategy(transformScale);\n } else {\n positionStrategy = transformStrategy;\n }\n\n // Get compactor from type and options\n const compactor = getCompactor(compactType, allowOverlap, preventCollision);\n\n return (\n <GridLayout\n width={width}\n gridConfig={gridConfig}\n dragConfig={dragConfig}\n resizeConfig={resizeConfig}\n dropConfig={dropConfig}\n positionStrategy={positionStrategy}\n compactor={compactor}\n layout={layout}\n droppingItem={droppingItem}\n autoSize={autoSize}\n className={className}\n style={style}\n innerRef={innerRef}\n onLayoutChange={onLayoutChange}\n onDragStart={onDragStart}\n onDrag={onDrag}\n onDragStop={onDragStop}\n onResizeStart={onResizeStart}\n onResize={onResize}\n onResizeStop={onResizeStop}\n onDrop={onDrop}\n onDropDragOver={onDropDragOver}\n >\n {children}\n </GridLayout>\n );\n}\n\n// Static properties for backwards compatibility\nReactGridLayout.displayName = \"ReactGridLayout\";\n\nexport default ReactGridLayout;\nexport { ReactGridLayout };\n","/**\n * Legacy ResponsiveReactGridLayout wrapper\n *\n * This component wraps the new TypeScript ResponsiveGridLayout to provide\n * backwards compatibility with the v1 API by converting flat props\n * to the new composable interface format.\n */\n\nimport React from \"react\";\nimport {\n ResponsiveGridLayout,\n type ResponsiveGridLayoutProps\n} from \"../react/components/ResponsiveGridLayout.js\";\nimport type {\n Layout,\n LayoutItem,\n CompactType,\n Breakpoint,\n Breakpoints,\n ResponsiveLayouts,\n ResizeHandleAxis,\n DragConfig,\n ResizeConfig,\n DropConfig,\n PositionStrategy\n} from \"../core/types.js\";\nimport { getCompactor } from \"../core/compactors.js\";\nimport {\n transformStrategy,\n absoluteStrategy,\n createScaledStrategy\n} from \"../core/position.js\";\n\n// ============================================================================\n// Legacy Props Interface\n// ============================================================================\n\n/**\n * Legacy props interface for backwards compatibility with v1 API.\n * These flat props are converted to composable interfaces internally.\n */\nexport interface LegacyResponsiveReactGridLayoutProps<\n B extends Breakpoint = string\n> {\n // Required\n children: React.ReactNode;\n width: number;\n\n // Responsive-specific\n breakpoint?: B;\n breakpoints?: Breakpoints<B>;\n cols?: Breakpoints<B>;\n layouts?: ResponsiveLayouts<B>;\n onBreakpointChange?: (newBreakpoint: B, cols: number) => void;\n onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;\n onWidthChange?: (\n containerWidth: number,\n margin: readonly [number, number],\n cols: number,\n containerPadding: readonly [number, number] | null\n ) => void;\n\n // Grid measurement\n rowHeight?: number;\n maxRows?: number;\n margin?:\n | readonly [number, number]\n | Partial<Record<B, readonly [number, number]>>;\n containerPadding?:\n | readonly [number, number]\n | Partial<Record<B, readonly [number, number] | null>>\n | null;\n\n // Layout data\n droppingItem?: LayoutItem;\n\n // Compaction (→ compactor)\n compactType?: CompactType;\n preventCollision?: boolean;\n allowOverlap?: boolean;\n /** @deprecated Use compactType instead */\n verticalCompact?: boolean;\n\n // Drag behavior (→ dragConfig)\n isDraggable?: boolean;\n isBounded?: boolean;\n draggableHandle?: string;\n draggableCancel?: string;\n\n // Resize behavior (→ resizeConfig)\n isResizable?: boolean;\n resizeHandles?: ResizeHandleAxis[];\n resizeHandle?:\n | React.ReactElement\n | ((\n axis: ResizeHandleAxis,\n ref: React.Ref<HTMLElement>\n ) => React.ReactElement);\n\n // Drop behavior (→ dropConfig)\n isDroppable?: boolean;\n\n // Position (→ positionStrategy)\n useCSSTransforms?: boolean;\n transformScale?: number;\n\n // Container props (passed through)\n autoSize?: boolean;\n className?: string;\n style?: React.CSSProperties;\n innerRef?: React.Ref<HTMLDivElement>;\n\n // Callbacks (passed through)\n onDragStart?: ResponsiveGridLayoutProps<B>[\"onDragStart\"];\n onDrag?: ResponsiveGridLayoutProps<B>[\"onDrag\"];\n onDragStop?: ResponsiveGridLayoutProps<B>[\"onDragStop\"];\n onResizeStart?: ResponsiveGridLayoutProps<B>[\"onResizeStart\"];\n onResize?: ResponsiveGridLayoutProps<B>[\"onResize\"];\n onResizeStop?: ResponsiveGridLayoutProps<B>[\"onResizeStop\"];\n onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;\n onDropDragOver?: (\n e: React.DragEvent\n ) => { w?: number; h?: number } | false | void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * ResponsiveReactGridLayout - Legacy wrapper component\n *\n * Converts v1 flat props to v2 composable interfaces for backwards compatibility.\n */\nfunction ResponsiveReactGridLayout<B extends Breakpoint = string>(\n props: LegacyResponsiveReactGridLayoutProps<B>\n) {\n const {\n // Required\n children,\n width,\n\n // Responsive-specific\n breakpoint,\n breakpoints,\n cols,\n layouts,\n onBreakpointChange,\n onLayoutChange,\n onWidthChange,\n\n // Grid measurement\n rowHeight,\n maxRows,\n margin,\n containerPadding,\n\n // Layout data\n droppingItem,\n\n // Compaction\n compactType: compactTypeProp,\n preventCollision = false,\n allowOverlap = false,\n verticalCompact,\n\n // Drag behavior\n isDraggable = true,\n isBounded = false,\n draggableHandle,\n draggableCancel,\n\n // Resize behavior\n isResizable = true,\n resizeHandles = [\"se\"],\n resizeHandle,\n\n // Drop behavior\n isDroppable = false,\n\n // Position\n useCSSTransforms = true,\n transformScale = 1,\n\n // Container props\n autoSize,\n className,\n style,\n innerRef,\n\n // Callbacks\n onDragStart,\n onDrag,\n onDragStop,\n onResizeStart,\n onResize,\n onResizeStop,\n onDrop,\n onDropDragOver\n } = props;\n\n // Handle deprecated verticalCompact prop\n let compactType: CompactType =\n compactTypeProp === undefined ? \"vertical\" : compactTypeProp;\n if (verticalCompact === false) {\n if (process.env[\"NODE_ENV\"] !== \"production\") {\n console.warn(\n \"`verticalCompact` on <ResponsiveReactGridLayout> is deprecated and will be removed soon. \" +\n 'Use `compactType`: \"horizontal\" | \"vertical\" | null.'\n );\n }\n compactType = null;\n }\n\n // Convert flat props to composable interfaces\n\n const dragConfig: Partial<DragConfig> = {\n enabled: isDraggable,\n bounded: isBounded,\n handle: draggableHandle,\n cancel: draggableCancel\n };\n\n const resizeConfig: Partial<ResizeConfig> = {\n enabled: isResizable,\n handles: resizeHandles,\n handleComponent: resizeHandle\n };\n\n const dropConfig: Partial<DropConfig> = {\n enabled: isDroppable\n };\n\n // Build position strategy\n let positionStrategy: PositionStrategy;\n if (!useCSSTransforms) {\n positionStrategy = absoluteStrategy;\n } else if (transformScale !== 1) {\n positionStrategy = createScaledStrategy(transformScale);\n } else {\n positionStrategy = transformStrategy;\n }\n\n // Get compactor from type and options\n const compactor = getCompactor(compactType, allowOverlap, preventCollision);\n\n return (\n <ResponsiveGridLayout<B>\n width={width}\n breakpoint={breakpoint}\n breakpoints={breakpoints}\n cols={cols}\n layouts={layouts}\n rowHeight={rowHeight}\n maxRows={maxRows}\n margin={margin}\n containerPadding={containerPadding}\n compactor={compactor}\n dragConfig={dragConfig}\n resizeConfig={resizeConfig}\n dropConfig={dropConfig}\n positionStrategy={positionStrategy}\n droppingItem={droppingItem}\n autoSize={autoSize}\n className={className}\n style={style}\n innerRef={innerRef}\n onBreakpointChange={onBreakpointChange}\n onLayoutChange={onLayoutChange}\n onWidthChange={onWidthChange}\n onDragStart={onDragStart}\n onDrag={onDrag}\n onDragStop={onDragStop}\n onResizeStart={onResizeStart}\n onResize={onResize}\n onResizeStop={onResizeStop}\n onDrop={onDrop}\n onDropDragOver={onDropDragOver}\n >\n {children}\n </ResponsiveGridLayout>\n );\n}\n\n// Static properties for backwards compatibility\nResponsiveReactGridLayout.displayName = \"ResponsiveReactGridLayout\";\n\nexport default ResponsiveReactGridLayout;\nexport { ResponsiveReactGridLayout, ResponsiveReactGridLayout as Responsive };\n","/**\n * WidthProvider HOC\n *\n * A Higher-Order Component that provides width measurement to grid layouts.\n * This wraps any component and provides the container width as a prop.\n */\n\nimport React, { useState, useRef, useEffect, type ComponentType } from \"react\";\nimport clsx from \"clsx\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WidthProviderProps {\n /** If true, will not render children until mounted */\n measureBeforeMount?: boolean;\n /** Additional class name */\n className?: string;\n /** Additional styles */\n style?: React.CSSProperties;\n}\n\ntype WithWidthProps<P> = Omit<P, \"width\"> & WidthProviderProps;\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst layoutClassName = \"react-grid-layout\";\n\n// ============================================================================\n// WidthProvider HOC\n// ============================================================================\n\n/**\n * WidthProvider - HOC that provides container width\n *\n * A simple HOC that provides facility for listening to container resizes.\n * Wraps the provided component and passes down a `width` prop.\n *\n * @example\n * ```tsx\n * import { GridLayout, WidthProvider } from 'react-grid-layout';\n *\n * const GridLayoutWithWidth = WidthProvider(GridLayout);\n *\n * function MyGrid() {\n * return (\n * <GridLayoutWithWidth cols={12} rowHeight={30}>\n * <div key=\"a\">a</div>\n * </GridLayoutWithWidth>\n * );\n * }\n * ```\n */\nexport function WidthProvider<P extends { width: number }>(\n ComposedComponent: ComponentType<P>\n): ComponentType<WithWidthProps<P>> {\n function WidthProviderWrapper(props: WithWidthProps<P>) {\n const { measureBeforeMount = false, className, style, ...rest } = props;\n\n const [width, setWidth] = useState(1280);\n const [mounted, setMounted] = useState(false);\n const elementRef = useRef<HTMLDivElement>(null);\n const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n useEffect(() => {\n setMounted(true);\n\n // Set up ResizeObserver\n resizeObserverRef.current = new ResizeObserver(entries => {\n const node = elementRef.current;\n if (node instanceof HTMLElement && entries[0]) {\n const newWidth = entries[0].contentRect.width;\n setWidth(newWidth);\n }\n });\n\n const node = elementRef.current;\n if (node instanceof HTMLElement) {\n resizeObserverRef.current.observe(node);\n }\n\n return () => {\n if (node instanceof HTMLElement && resizeObserverRef.current) {\n resizeObserverRef.current.unobserve(node);\n }\n resizeObserverRef.current?.disconnect();\n };\n }, []);\n\n // If measureBeforeMount is true and not yet mounted, render placeholder\n if (measureBeforeMount && !mounted) {\n return (\n <div\n className={clsx(className, layoutClassName)}\n style={style}\n ref={elementRef}\n />\n );\n }\n\n return (\n <ComposedComponent\n innerRef={elementRef}\n className={className}\n style={style}\n {...(rest as unknown as P)}\n width={width}\n />\n );\n }\n\n WidthProviderWrapper.displayName = `WidthProvider(${ComposedComponent.displayName || ComposedComponent.name || \"Component\"})`;\n\n return WidthProviderWrapper;\n}\n\nexport default WidthProvider;\n"]}
{"version":3,"sources":["../src/legacy/ReactGridLayout.tsx","../src/legacy/ResponsiveReactGridLayout.tsx","../src/react/components/WidthProvider.tsx"],"names":["absoluteStrategy","createScaledStrategy","transformStrategy","getCompactor","defaultConstraints","containerBounds","jsx","GridLayout","ResponsiveGridLayout","useState","useRef","useEffect","clsx"],"mappings":"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","file":"legacy.js","sourcesContent":["/**\n * Legacy ReactGridLayout wrapper\n *\n * This component wraps the new TypeScript GridLayout to provide\n * backwards compatibility with the v1 API by converting flat props\n * to the new composable interface format.\n */\n\nimport React from \"react\";\nimport {\n GridLayout,\n type GridLayoutProps\n} from \"../react/components/GridLayout.js\";\nimport type {\n Layout,\n LayoutItem,\n CompactType,\n ResizeHandleAxis,\n GridConfig,\n DragConfig,\n ResizeConfig,\n DropConfig,\n PositionStrategy,\n LayoutConstraint\n} from \"../core/types.js\";\nimport { getCompactor } from \"../core/compactors.js\";\nimport {\n transformStrategy,\n absoluteStrategy,\n createScaledStrategy\n} from \"../core/position.js\";\nimport { defaultConstraints, containerBounds } from \"../core/constraints.js\";\n\n// ============================================================================\n// Legacy Props Interface\n// ============================================================================\n\n/**\n * Legacy props interface for backwards compatibility with v1 API.\n * These flat props are converted to composable interfaces internally.\n */\nexport interface LegacyReactGridLayoutProps {\n // Required\n children: React.ReactNode;\n width: number;\n\n // Grid measurement (→ gridConfig)\n cols?: number;\n rowHeight?: number;\n maxRows?: number;\n margin?: readonly [number, number];\n containerPadding?: readonly [number, number] | null;\n\n // Layout data\n layout?: Layout;\n droppingItem?: LayoutItem;\n\n // Compaction (→ compactor)\n compactType?: CompactType;\n preventCollision?: boolean;\n allowOverlap?: boolean;\n /** @deprecated Use compactType instead */\n verticalCompact?: boolean;\n\n // Drag behavior (→ dragConfig)\n isDraggable?: boolean;\n isBounded?: boolean;\n draggableHandle?: string;\n draggableCancel?: string;\n\n // Resize behavior (→ resizeConfig)\n isResizable?: boolean;\n resizeHandles?: ResizeHandleAxis[];\n resizeHandle?:\n | React.ReactElement\n | ((\n axis: ResizeHandleAxis,\n ref: React.Ref<HTMLElement>\n ) => React.ReactElement);\n\n // Drop behavior (→ dropConfig)\n isDroppable?: boolean;\n\n // Position (→ positionStrategy)\n useCSSTransforms?: boolean;\n transformScale?: number;\n\n // Container props (passed through)\n autoSize?: boolean;\n className?: string;\n style?: React.CSSProperties;\n innerRef?: React.Ref<HTMLDivElement>;\n\n // Callbacks (passed through)\n onLayoutChange?: (layout: Layout) => void;\n onDragStart?: GridLayoutProps[\"onDragStart\"];\n onDrag?: GridLayoutProps[\"onDrag\"];\n onDragStop?: GridLayoutProps[\"onDragStop\"];\n onResizeStart?: GridLayoutProps[\"onResizeStart\"];\n onResize?: GridLayoutProps[\"onResize\"];\n onResizeStop?: GridLayoutProps[\"onResizeStop\"];\n onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;\n onDropDragOver?: (\n e: React.DragEvent\n ) => { w?: number; h?: number } | false | void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * ReactGridLayout - Legacy wrapper component\n *\n * Converts v1 flat props to v2 composable interfaces for backwards compatibility.\n */\nfunction ReactGridLayout(props: LegacyReactGridLayoutProps) {\n const {\n // Required\n children,\n width,\n\n // Grid measurement\n cols = 12,\n rowHeight = 150,\n maxRows = Infinity,\n margin = [10, 10],\n containerPadding = null,\n\n // Layout data\n layout,\n droppingItem,\n\n // Compaction\n compactType: compactTypeProp,\n preventCollision = false,\n allowOverlap = false,\n verticalCompact,\n\n // Drag behavior\n isDraggable = true,\n isBounded = false,\n draggableHandle,\n draggableCancel,\n\n // Resize behavior\n isResizable = true,\n resizeHandles = [\"se\"],\n resizeHandle,\n\n // Drop behavior\n isDroppable = false,\n\n // Position\n useCSSTransforms = true,\n transformScale = 1,\n\n // Container props\n autoSize,\n className,\n style,\n innerRef,\n\n // Callbacks\n onLayoutChange,\n onDragStart,\n onDrag,\n onDragStop,\n onResizeStart,\n onResize,\n onResizeStop,\n onDrop,\n onDropDragOver\n } = props;\n\n // Handle deprecated verticalCompact prop\n let compactType: CompactType =\n compactTypeProp === undefined ? \"vertical\" : compactTypeProp;\n if (verticalCompact === false) {\n if (process.env[\"NODE_ENV\"] !== \"production\") {\n console.warn(\n \"`verticalCompact` on <ReactGridLayout> is deprecated and will be removed soon. \" +\n 'Use `compactType`: \"horizontal\" | \"vertical\" | null.'\n );\n }\n compactType = null;\n }\n\n // Convert flat props to composable interfaces\n\n const gridConfig: Partial<GridConfig> = {\n cols,\n rowHeight,\n maxRows,\n margin,\n containerPadding\n };\n\n const dragConfig: Partial<DragConfig> = {\n enabled: isDraggable,\n bounded: isBounded,\n handle: draggableHandle,\n cancel: draggableCancel\n };\n\n const resizeConfig: Partial<ResizeConfig> = {\n enabled: isResizable,\n handles: resizeHandles,\n handleComponent: resizeHandle\n };\n\n const dropConfig: Partial<DropConfig> = {\n enabled: isDroppable\n };\n\n // Build position strategy\n let positionStrategy: PositionStrategy;\n if (!useCSSTransforms) {\n positionStrategy = absoluteStrategy;\n } else if (transformScale !== 1) {\n positionStrategy = createScaledStrategy(transformScale);\n } else {\n positionStrategy = transformStrategy;\n }\n\n // Get compactor from type and options\n const compactor = getCompactor(compactType, allowOverlap, preventCollision);\n\n // Build constraints array based on legacy props\n // When isBounded is true, add containerBounds constraint\n const constraints: LayoutConstraint[] = isBounded\n ? [...defaultConstraints, containerBounds]\n : defaultConstraints;\n\n return (\n <GridLayout\n width={width}\n gridConfig={gridConfig}\n dragConfig={dragConfig}\n resizeConfig={resizeConfig}\n dropConfig={dropConfig}\n positionStrategy={positionStrategy}\n compactor={compactor}\n constraints={constraints}\n layout={layout}\n droppingItem={droppingItem}\n autoSize={autoSize}\n className={className}\n style={style}\n innerRef={innerRef}\n onLayoutChange={onLayoutChange}\n onDragStart={onDragStart}\n onDrag={onDrag}\n onDragStop={onDragStop}\n onResizeStart={onResizeStart}\n onResize={onResize}\n onResizeStop={onResizeStop}\n onDrop={onDrop}\n onDropDragOver={onDropDragOver}\n >\n {children}\n </GridLayout>\n );\n}\n\n// Static properties for backwards compatibility\nReactGridLayout.displayName = \"ReactGridLayout\";\n\nexport default ReactGridLayout;\nexport { ReactGridLayout };\n","/**\n * Legacy ResponsiveReactGridLayout wrapper\n *\n * This component wraps the new TypeScript ResponsiveGridLayout to provide\n * backwards compatibility with the v1 API by converting flat props\n * to the new composable interface format.\n */\n\nimport React from \"react\";\nimport {\n ResponsiveGridLayout,\n type ResponsiveGridLayoutProps\n} from \"../react/components/ResponsiveGridLayout.js\";\nimport type {\n Layout,\n LayoutItem,\n CompactType,\n Breakpoint,\n Breakpoints,\n ResponsiveLayouts,\n ResizeHandleAxis,\n DragConfig,\n ResizeConfig,\n DropConfig,\n PositionStrategy\n} from \"../core/types.js\";\nimport { getCompactor } from \"../core/compactors.js\";\nimport {\n transformStrategy,\n absoluteStrategy,\n createScaledStrategy\n} from \"../core/position.js\";\n\n// ============================================================================\n// Legacy Props Interface\n// ============================================================================\n\n/**\n * Legacy props interface for backwards compatibility with v1 API.\n * These flat props are converted to composable interfaces internally.\n */\nexport interface LegacyResponsiveReactGridLayoutProps<\n B extends Breakpoint = string\n> {\n // Required\n children: React.ReactNode;\n width: number;\n\n // Responsive-specific\n breakpoint?: B;\n breakpoints?: Breakpoints<B>;\n cols?: Breakpoints<B>;\n layouts?: ResponsiveLayouts<B>;\n onBreakpointChange?: (newBreakpoint: B, cols: number) => void;\n onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;\n onWidthChange?: (\n containerWidth: number,\n margin: readonly [number, number],\n cols: number,\n containerPadding: readonly [number, number] | null\n ) => void;\n\n // Grid measurement\n rowHeight?: number;\n maxRows?: number;\n margin?:\n | readonly [number, number]\n | Partial<Record<B, readonly [number, number]>>;\n containerPadding?:\n | readonly [number, number]\n | Partial<Record<B, readonly [number, number] | null>>\n | null;\n\n // Layout data\n droppingItem?: LayoutItem;\n\n // Compaction (→ compactor)\n compactType?: CompactType;\n preventCollision?: boolean;\n allowOverlap?: boolean;\n /** @deprecated Use compactType instead */\n verticalCompact?: boolean;\n\n // Drag behavior (→ dragConfig)\n isDraggable?: boolean;\n isBounded?: boolean;\n draggableHandle?: string;\n draggableCancel?: string;\n\n // Resize behavior (→ resizeConfig)\n isResizable?: boolean;\n resizeHandles?: ResizeHandleAxis[];\n resizeHandle?:\n | React.ReactElement\n | ((\n axis: ResizeHandleAxis,\n ref: React.Ref<HTMLElement>\n ) => React.ReactElement);\n\n // Drop behavior (→ dropConfig)\n isDroppable?: boolean;\n\n // Position (→ positionStrategy)\n useCSSTransforms?: boolean;\n transformScale?: number;\n\n // Container props (passed through)\n autoSize?: boolean;\n className?: string;\n style?: React.CSSProperties;\n innerRef?: React.Ref<HTMLDivElement>;\n\n // Callbacks (passed through)\n onDragStart?: ResponsiveGridLayoutProps<B>[\"onDragStart\"];\n onDrag?: ResponsiveGridLayoutProps<B>[\"onDrag\"];\n onDragStop?: ResponsiveGridLayoutProps<B>[\"onDragStop\"];\n onResizeStart?: ResponsiveGridLayoutProps<B>[\"onResizeStart\"];\n onResize?: ResponsiveGridLayoutProps<B>[\"onResize\"];\n onResizeStop?: ResponsiveGridLayoutProps<B>[\"onResizeStop\"];\n onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;\n onDropDragOver?: (\n e: React.DragEvent\n ) => { w?: number; h?: number } | false | void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * ResponsiveReactGridLayout - Legacy wrapper component\n *\n * Converts v1 flat props to v2 composable interfaces for backwards compatibility.\n */\nfunction ResponsiveReactGridLayout<B extends Breakpoint = string>(\n props: LegacyResponsiveReactGridLayoutProps<B>\n) {\n const {\n // Required\n children,\n width,\n\n // Responsive-specific\n breakpoint,\n breakpoints,\n cols,\n layouts,\n onBreakpointChange,\n onLayoutChange,\n onWidthChange,\n\n // Grid measurement\n rowHeight,\n maxRows,\n margin,\n containerPadding,\n\n // Layout data\n droppingItem,\n\n // Compaction\n compactType: compactTypeProp,\n preventCollision = false,\n allowOverlap = false,\n verticalCompact,\n\n // Drag behavior\n isDraggable = true,\n isBounded = false,\n draggableHandle,\n draggableCancel,\n\n // Resize behavior\n isResizable = true,\n resizeHandles = [\"se\"],\n resizeHandle,\n\n // Drop behavior\n isDroppable = false,\n\n // Position\n useCSSTransforms = true,\n transformScale = 1,\n\n // Container props\n autoSize,\n className,\n style,\n innerRef,\n\n // Callbacks\n onDragStart,\n onDrag,\n onDragStop,\n onResizeStart,\n onResize,\n onResizeStop,\n onDrop,\n onDropDragOver\n } = props;\n\n // Handle deprecated verticalCompact prop\n let compactType: CompactType =\n compactTypeProp === undefined ? \"vertical\" : compactTypeProp;\n if (verticalCompact === false) {\n if (process.env[\"NODE_ENV\"] !== \"production\") {\n console.warn(\n \"`verticalCompact` on <ResponsiveReactGridLayout> is deprecated and will be removed soon. \" +\n 'Use `compactType`: \"horizontal\" | \"vertical\" | null.'\n );\n }\n compactType = null;\n }\n\n // Convert flat props to composable interfaces\n\n const dragConfig: Partial<DragConfig> = {\n enabled: isDraggable,\n bounded: isBounded,\n handle: draggableHandle,\n cancel: draggableCancel\n };\n\n const resizeConfig: Partial<ResizeConfig> = {\n enabled: isResizable,\n handles: resizeHandles,\n handleComponent: resizeHandle\n };\n\n const dropConfig: Partial<DropConfig> = {\n enabled: isDroppable\n };\n\n // Build position strategy\n let positionStrategy: PositionStrategy;\n if (!useCSSTransforms) {\n positionStrategy = absoluteStrategy;\n } else if (transformScale !== 1) {\n positionStrategy = createScaledStrategy(transformScale);\n } else {\n positionStrategy = transformStrategy;\n }\n\n // Get compactor from type and options\n const compactor = getCompactor(compactType, allowOverlap, preventCollision);\n\n return (\n <ResponsiveGridLayout<B>\n width={width}\n breakpoint={breakpoint}\n breakpoints={breakpoints}\n cols={cols}\n layouts={layouts}\n rowHeight={rowHeight}\n maxRows={maxRows}\n margin={margin}\n containerPadding={containerPadding}\n compactor={compactor}\n dragConfig={dragConfig}\n resizeConfig={resizeConfig}\n dropConfig={dropConfig}\n positionStrategy={positionStrategy}\n droppingItem={droppingItem}\n autoSize={autoSize}\n className={className}\n style={style}\n innerRef={innerRef}\n onBreakpointChange={onBreakpointChange}\n onLayoutChange={onLayoutChange}\n onWidthChange={onWidthChange}\n onDragStart={onDragStart}\n onDrag={onDrag}\n onDragStop={onDragStop}\n onResizeStart={onResizeStart}\n onResize={onResize}\n onResizeStop={onResizeStop}\n onDrop={onDrop}\n onDropDragOver={onDropDragOver}\n >\n {children}\n </ResponsiveGridLayout>\n );\n}\n\n// Static properties for backwards compatibility\nResponsiveReactGridLayout.displayName = \"ResponsiveReactGridLayout\";\n\nexport default ResponsiveReactGridLayout;\nexport { ResponsiveReactGridLayout, ResponsiveReactGridLayout as Responsive };\n","/**\n * WidthProvider HOC\n *\n * A Higher-Order Component that provides width measurement to grid layouts.\n * This wraps any component and provides the container width as a prop.\n */\n\nimport React, { useState, useRef, useEffect, type ComponentType } from \"react\";\nimport clsx from \"clsx\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WidthProviderProps {\n /** If true, will not render children until mounted */\n measureBeforeMount?: boolean;\n /** Additional class name */\n className?: string;\n /** Additional styles */\n style?: React.CSSProperties;\n}\n\ntype WithWidthProps<P> = Omit<P, \"width\"> & WidthProviderProps;\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst layoutClassName = \"react-grid-layout\";\n\n// ============================================================================\n// WidthProvider HOC\n// ============================================================================\n\n/**\n * WidthProvider - HOC that provides container width\n *\n * A simple HOC that provides facility for listening to container resizes.\n * Wraps the provided component and passes down a `width` prop.\n *\n * @example\n * ```tsx\n * import { GridLayout, WidthProvider } from 'react-grid-layout';\n *\n * const GridLayoutWithWidth = WidthProvider(GridLayout);\n *\n * function MyGrid() {\n * return (\n * <GridLayoutWithWidth cols={12} rowHeight={30}>\n * <div key=\"a\">a</div>\n * </GridLayoutWithWidth>\n * );\n * }\n * ```\n */\nexport function WidthProvider<P extends { width: number }>(\n ComposedComponent: ComponentType<P>\n): ComponentType<WithWidthProps<P>> {\n function WidthProviderWrapper(props: WithWidthProps<P>) {\n const { measureBeforeMount = false, className, style, ...rest } = props;\n\n const [width, setWidth] = useState(1280);\n const [mounted, setMounted] = useState(false);\n const elementRef = useRef<HTMLDivElement>(null);\n const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n // Set mounted state on first render\n useEffect(() => {\n setMounted(true);\n }, []);\n\n // Set up ResizeObserver - re-runs when mounted changes to observe the new element\n // This fixes measureBeforeMount where the ref changes from placeholder to composed component\n useEffect(() => {\n const node = elementRef.current;\n if (!(node instanceof HTMLElement)) return;\n\n const observer = new ResizeObserver(entries => {\n if (entries[0]) {\n const newWidth = entries[0].contentRect.width;\n setWidth(newWidth);\n }\n });\n\n observer.observe(node);\n resizeObserverRef.current = observer;\n\n return () => {\n observer.unobserve(node);\n observer.disconnect();\n };\n }, [mounted]);\n\n // If measureBeforeMount is true and not yet mounted, render placeholder\n if (measureBeforeMount && !mounted) {\n return (\n <div\n className={clsx(className, layoutClassName)}\n style={style}\n ref={elementRef}\n />\n );\n }\n\n return (\n <ComposedComponent\n innerRef={elementRef}\n className={className}\n style={style}\n {...(rest as unknown as P)}\n width={width}\n />\n );\n }\n\n WidthProviderWrapper.displayName = `WidthProvider(${ComposedComponent.displayName || ComposedComponent.name || \"Component\"})`;\n\n return WidthProviderWrapper;\n}\n\nexport default WidthProvider;\n"]}

@@ -1,4 +0,4 @@

import { GridLayout, ResponsiveGridLayout } from './chunk-R35HZZTA.mjs';
import { createScaledStrategy, getCompactor, absoluteStrategy, transformStrategy } from './chunk-4HNUMWQK.mjs';
import './chunk-2KUHNJXF.mjs';
import { GridLayout, ResponsiveGridLayout } from './chunk-MXXN7GUE.mjs';
import { createScaledStrategy, getCompactor, defaultConstraints, containerBounds, absoluteStrategy, transformStrategy } from './chunk-2O3ZME4Q.mjs';
import './chunk-AWM66AWF.mjs';
import { useState, useRef, useEffect } from 'react';

@@ -96,2 +96,3 @@ import { jsx } from 'react/jsx-runtime';

const compactor = getCompactor(compactType, allowOverlap, preventCollision);
const constraints = isBounded ? [...defaultConstraints, containerBounds] : defaultConstraints;
return /* @__PURE__ */ jsx(

@@ -107,2 +108,3 @@ GridLayout,

compactor,
constraints,
layout,

@@ -264,5 +266,8 @@ droppingItem,

setMounted(true);
resizeObserverRef.current = new ResizeObserver((entries) => {
const node2 = elementRef.current;
if (node2 instanceof HTMLElement && entries[0]) {
}, []);
useEffect(() => {
const node = elementRef.current;
if (!(node instanceof HTMLElement)) return;
const observer = new ResizeObserver((entries) => {
if (entries[0]) {
const newWidth = entries[0].contentRect.width;

@@ -272,13 +277,9 @@ setWidth(newWidth);

});
const node = elementRef.current;
if (node instanceof HTMLElement) {
resizeObserverRef.current.observe(node);
}
observer.observe(node);
resizeObserverRef.current = observer;
return () => {
if (node instanceof HTMLElement && resizeObserverRef.current) {
resizeObserverRef.current.unobserve(node);
}
resizeObserverRef.current?.disconnect();
observer.unobserve(node);
observer.disconnect();
};
}, []);
}, [mounted]);
if (measureBeforeMount && !mounted) {

@@ -285,0 +286,0 @@ return /* @__PURE__ */ jsx(

@@ -1,1 +0,1 @@

{"version":3,"sources":["../src/legacy/ReactGridLayout.tsx","../src/legacy/ResponsiveReactGridLayout.tsx","../src/react/components/WidthProvider.tsx"],"names":["jsx","node"],"mappings":"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","file":"legacy.mjs","sourcesContent":["/**\n * Legacy ReactGridLayout wrapper\n *\n * This component wraps the new TypeScript GridLayout to provide\n * backwards compatibility with the v1 API by converting flat props\n * to the new composable interface format.\n */\n\nimport React from \"react\";\nimport {\n GridLayout,\n type GridLayoutProps\n} from \"../react/components/GridLayout.js\";\nimport type {\n Layout,\n LayoutItem,\n CompactType,\n ResizeHandleAxis,\n GridConfig,\n DragConfig,\n ResizeConfig,\n DropConfig,\n PositionStrategy\n} from \"../core/types.js\";\nimport { getCompactor } from \"../core/compactors.js\";\nimport {\n transformStrategy,\n absoluteStrategy,\n createScaledStrategy\n} from \"../core/position.js\";\n\n// ============================================================================\n// Legacy Props Interface\n// ============================================================================\n\n/**\n * Legacy props interface for backwards compatibility with v1 API.\n * These flat props are converted to composable interfaces internally.\n */\nexport interface LegacyReactGridLayoutProps {\n // Required\n children: React.ReactNode;\n width: number;\n\n // Grid measurement (→ gridConfig)\n cols?: number;\n rowHeight?: number;\n maxRows?: number;\n margin?: readonly [number, number];\n containerPadding?: readonly [number, number] | null;\n\n // Layout data\n layout?: Layout;\n droppingItem?: LayoutItem;\n\n // Compaction (→ compactor)\n compactType?: CompactType;\n preventCollision?: boolean;\n allowOverlap?: boolean;\n /** @deprecated Use compactType instead */\n verticalCompact?: boolean;\n\n // Drag behavior (→ dragConfig)\n isDraggable?: boolean;\n isBounded?: boolean;\n draggableHandle?: string;\n draggableCancel?: string;\n\n // Resize behavior (→ resizeConfig)\n isResizable?: boolean;\n resizeHandles?: ResizeHandleAxis[];\n resizeHandle?:\n | React.ReactElement\n | ((\n axis: ResizeHandleAxis,\n ref: React.Ref<HTMLElement>\n ) => React.ReactElement);\n\n // Drop behavior (→ dropConfig)\n isDroppable?: boolean;\n\n // Position (→ positionStrategy)\n useCSSTransforms?: boolean;\n transformScale?: number;\n\n // Container props (passed through)\n autoSize?: boolean;\n className?: string;\n style?: React.CSSProperties;\n innerRef?: React.Ref<HTMLDivElement>;\n\n // Callbacks (passed through)\n onLayoutChange?: (layout: Layout) => void;\n onDragStart?: GridLayoutProps[\"onDragStart\"];\n onDrag?: GridLayoutProps[\"onDrag\"];\n onDragStop?: GridLayoutProps[\"onDragStop\"];\n onResizeStart?: GridLayoutProps[\"onResizeStart\"];\n onResize?: GridLayoutProps[\"onResize\"];\n onResizeStop?: GridLayoutProps[\"onResizeStop\"];\n onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;\n onDropDragOver?: (\n e: React.DragEvent\n ) => { w?: number; h?: number } | false | void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * ReactGridLayout - Legacy wrapper component\n *\n * Converts v1 flat props to v2 composable interfaces for backwards compatibility.\n */\nfunction ReactGridLayout(props: LegacyReactGridLayoutProps) {\n const {\n // Required\n children,\n width,\n\n // Grid measurement\n cols = 12,\n rowHeight = 150,\n maxRows = Infinity,\n margin = [10, 10],\n containerPadding = null,\n\n // Layout data\n layout,\n droppingItem,\n\n // Compaction\n compactType: compactTypeProp,\n preventCollision = false,\n allowOverlap = false,\n verticalCompact,\n\n // Drag behavior\n isDraggable = true,\n isBounded = false,\n draggableHandle,\n draggableCancel,\n\n // Resize behavior\n isResizable = true,\n resizeHandles = [\"se\"],\n resizeHandle,\n\n // Drop behavior\n isDroppable = false,\n\n // Position\n useCSSTransforms = true,\n transformScale = 1,\n\n // Container props\n autoSize,\n className,\n style,\n innerRef,\n\n // Callbacks\n onLayoutChange,\n onDragStart,\n onDrag,\n onDragStop,\n onResizeStart,\n onResize,\n onResizeStop,\n onDrop,\n onDropDragOver\n } = props;\n\n // Handle deprecated verticalCompact prop\n let compactType: CompactType =\n compactTypeProp === undefined ? \"vertical\" : compactTypeProp;\n if (verticalCompact === false) {\n if (process.env[\"NODE_ENV\"] !== \"production\") {\n console.warn(\n \"`verticalCompact` on <ReactGridLayout> is deprecated and will be removed soon. \" +\n 'Use `compactType`: \"horizontal\" | \"vertical\" | null.'\n );\n }\n compactType = null;\n }\n\n // Convert flat props to composable interfaces\n\n const gridConfig: Partial<GridConfig> = {\n cols,\n rowHeight,\n maxRows,\n margin,\n containerPadding\n };\n\n const dragConfig: Partial<DragConfig> = {\n enabled: isDraggable,\n bounded: isBounded,\n handle: draggableHandle,\n cancel: draggableCancel\n };\n\n const resizeConfig: Partial<ResizeConfig> = {\n enabled: isResizable,\n handles: resizeHandles,\n handleComponent: resizeHandle\n };\n\n const dropConfig: Partial<DropConfig> = {\n enabled: isDroppable\n };\n\n // Build position strategy\n let positionStrategy: PositionStrategy;\n if (!useCSSTransforms) {\n positionStrategy = absoluteStrategy;\n } else if (transformScale !== 1) {\n positionStrategy = createScaledStrategy(transformScale);\n } else {\n positionStrategy = transformStrategy;\n }\n\n // Get compactor from type and options\n const compactor = getCompactor(compactType, allowOverlap, preventCollision);\n\n return (\n <GridLayout\n width={width}\n gridConfig={gridConfig}\n dragConfig={dragConfig}\n resizeConfig={resizeConfig}\n dropConfig={dropConfig}\n positionStrategy={positionStrategy}\n compactor={compactor}\n layout={layout}\n droppingItem={droppingItem}\n autoSize={autoSize}\n className={className}\n style={style}\n innerRef={innerRef}\n onLayoutChange={onLayoutChange}\n onDragStart={onDragStart}\n onDrag={onDrag}\n onDragStop={onDragStop}\n onResizeStart={onResizeStart}\n onResize={onResize}\n onResizeStop={onResizeStop}\n onDrop={onDrop}\n onDropDragOver={onDropDragOver}\n >\n {children}\n </GridLayout>\n );\n}\n\n// Static properties for backwards compatibility\nReactGridLayout.displayName = \"ReactGridLayout\";\n\nexport default ReactGridLayout;\nexport { ReactGridLayout };\n","/**\n * Legacy ResponsiveReactGridLayout wrapper\n *\n * This component wraps the new TypeScript ResponsiveGridLayout to provide\n * backwards compatibility with the v1 API by converting flat props\n * to the new composable interface format.\n */\n\nimport React from \"react\";\nimport {\n ResponsiveGridLayout,\n type ResponsiveGridLayoutProps\n} from \"../react/components/ResponsiveGridLayout.js\";\nimport type {\n Layout,\n LayoutItem,\n CompactType,\n Breakpoint,\n Breakpoints,\n ResponsiveLayouts,\n ResizeHandleAxis,\n DragConfig,\n ResizeConfig,\n DropConfig,\n PositionStrategy\n} from \"../core/types.js\";\nimport { getCompactor } from \"../core/compactors.js\";\nimport {\n transformStrategy,\n absoluteStrategy,\n createScaledStrategy\n} from \"../core/position.js\";\n\n// ============================================================================\n// Legacy Props Interface\n// ============================================================================\n\n/**\n * Legacy props interface for backwards compatibility with v1 API.\n * These flat props are converted to composable interfaces internally.\n */\nexport interface LegacyResponsiveReactGridLayoutProps<\n B extends Breakpoint = string\n> {\n // Required\n children: React.ReactNode;\n width: number;\n\n // Responsive-specific\n breakpoint?: B;\n breakpoints?: Breakpoints<B>;\n cols?: Breakpoints<B>;\n layouts?: ResponsiveLayouts<B>;\n onBreakpointChange?: (newBreakpoint: B, cols: number) => void;\n onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;\n onWidthChange?: (\n containerWidth: number,\n margin: readonly [number, number],\n cols: number,\n containerPadding: readonly [number, number] | null\n ) => void;\n\n // Grid measurement\n rowHeight?: number;\n maxRows?: number;\n margin?:\n | readonly [number, number]\n | Partial<Record<B, readonly [number, number]>>;\n containerPadding?:\n | readonly [number, number]\n | Partial<Record<B, readonly [number, number] | null>>\n | null;\n\n // Layout data\n droppingItem?: LayoutItem;\n\n // Compaction (→ compactor)\n compactType?: CompactType;\n preventCollision?: boolean;\n allowOverlap?: boolean;\n /** @deprecated Use compactType instead */\n verticalCompact?: boolean;\n\n // Drag behavior (→ dragConfig)\n isDraggable?: boolean;\n isBounded?: boolean;\n draggableHandle?: string;\n draggableCancel?: string;\n\n // Resize behavior (→ resizeConfig)\n isResizable?: boolean;\n resizeHandles?: ResizeHandleAxis[];\n resizeHandle?:\n | React.ReactElement\n | ((\n axis: ResizeHandleAxis,\n ref: React.Ref<HTMLElement>\n ) => React.ReactElement);\n\n // Drop behavior (→ dropConfig)\n isDroppable?: boolean;\n\n // Position (→ positionStrategy)\n useCSSTransforms?: boolean;\n transformScale?: number;\n\n // Container props (passed through)\n autoSize?: boolean;\n className?: string;\n style?: React.CSSProperties;\n innerRef?: React.Ref<HTMLDivElement>;\n\n // Callbacks (passed through)\n onDragStart?: ResponsiveGridLayoutProps<B>[\"onDragStart\"];\n onDrag?: ResponsiveGridLayoutProps<B>[\"onDrag\"];\n onDragStop?: ResponsiveGridLayoutProps<B>[\"onDragStop\"];\n onResizeStart?: ResponsiveGridLayoutProps<B>[\"onResizeStart\"];\n onResize?: ResponsiveGridLayoutProps<B>[\"onResize\"];\n onResizeStop?: ResponsiveGridLayoutProps<B>[\"onResizeStop\"];\n onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;\n onDropDragOver?: (\n e: React.DragEvent\n ) => { w?: number; h?: number } | false | void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * ResponsiveReactGridLayout - Legacy wrapper component\n *\n * Converts v1 flat props to v2 composable interfaces for backwards compatibility.\n */\nfunction ResponsiveReactGridLayout<B extends Breakpoint = string>(\n props: LegacyResponsiveReactGridLayoutProps<B>\n) {\n const {\n // Required\n children,\n width,\n\n // Responsive-specific\n breakpoint,\n breakpoints,\n cols,\n layouts,\n onBreakpointChange,\n onLayoutChange,\n onWidthChange,\n\n // Grid measurement\n rowHeight,\n maxRows,\n margin,\n containerPadding,\n\n // Layout data\n droppingItem,\n\n // Compaction\n compactType: compactTypeProp,\n preventCollision = false,\n allowOverlap = false,\n verticalCompact,\n\n // Drag behavior\n isDraggable = true,\n isBounded = false,\n draggableHandle,\n draggableCancel,\n\n // Resize behavior\n isResizable = true,\n resizeHandles = [\"se\"],\n resizeHandle,\n\n // Drop behavior\n isDroppable = false,\n\n // Position\n useCSSTransforms = true,\n transformScale = 1,\n\n // Container props\n autoSize,\n className,\n style,\n innerRef,\n\n // Callbacks\n onDragStart,\n onDrag,\n onDragStop,\n onResizeStart,\n onResize,\n onResizeStop,\n onDrop,\n onDropDragOver\n } = props;\n\n // Handle deprecated verticalCompact prop\n let compactType: CompactType =\n compactTypeProp === undefined ? \"vertical\" : compactTypeProp;\n if (verticalCompact === false) {\n if (process.env[\"NODE_ENV\"] !== \"production\") {\n console.warn(\n \"`verticalCompact` on <ResponsiveReactGridLayout> is deprecated and will be removed soon. \" +\n 'Use `compactType`: \"horizontal\" | \"vertical\" | null.'\n );\n }\n compactType = null;\n }\n\n // Convert flat props to composable interfaces\n\n const dragConfig: Partial<DragConfig> = {\n enabled: isDraggable,\n bounded: isBounded,\n handle: draggableHandle,\n cancel: draggableCancel\n };\n\n const resizeConfig: Partial<ResizeConfig> = {\n enabled: isResizable,\n handles: resizeHandles,\n handleComponent: resizeHandle\n };\n\n const dropConfig: Partial<DropConfig> = {\n enabled: isDroppable\n };\n\n // Build position strategy\n let positionStrategy: PositionStrategy;\n if (!useCSSTransforms) {\n positionStrategy = absoluteStrategy;\n } else if (transformScale !== 1) {\n positionStrategy = createScaledStrategy(transformScale);\n } else {\n positionStrategy = transformStrategy;\n }\n\n // Get compactor from type and options\n const compactor = getCompactor(compactType, allowOverlap, preventCollision);\n\n return (\n <ResponsiveGridLayout<B>\n width={width}\n breakpoint={breakpoint}\n breakpoints={breakpoints}\n cols={cols}\n layouts={layouts}\n rowHeight={rowHeight}\n maxRows={maxRows}\n margin={margin}\n containerPadding={containerPadding}\n compactor={compactor}\n dragConfig={dragConfig}\n resizeConfig={resizeConfig}\n dropConfig={dropConfig}\n positionStrategy={positionStrategy}\n droppingItem={droppingItem}\n autoSize={autoSize}\n className={className}\n style={style}\n innerRef={innerRef}\n onBreakpointChange={onBreakpointChange}\n onLayoutChange={onLayoutChange}\n onWidthChange={onWidthChange}\n onDragStart={onDragStart}\n onDrag={onDrag}\n onDragStop={onDragStop}\n onResizeStart={onResizeStart}\n onResize={onResize}\n onResizeStop={onResizeStop}\n onDrop={onDrop}\n onDropDragOver={onDropDragOver}\n >\n {children}\n </ResponsiveGridLayout>\n );\n}\n\n// Static properties for backwards compatibility\nResponsiveReactGridLayout.displayName = \"ResponsiveReactGridLayout\";\n\nexport default ResponsiveReactGridLayout;\nexport { ResponsiveReactGridLayout, ResponsiveReactGridLayout as Responsive };\n","/**\n * WidthProvider HOC\n *\n * A Higher-Order Component that provides width measurement to grid layouts.\n * This wraps any component and provides the container width as a prop.\n */\n\nimport React, { useState, useRef, useEffect, type ComponentType } from \"react\";\nimport clsx from \"clsx\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WidthProviderProps {\n /** If true, will not render children until mounted */\n measureBeforeMount?: boolean;\n /** Additional class name */\n className?: string;\n /** Additional styles */\n style?: React.CSSProperties;\n}\n\ntype WithWidthProps<P> = Omit<P, \"width\"> & WidthProviderProps;\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst layoutClassName = \"react-grid-layout\";\n\n// ============================================================================\n// WidthProvider HOC\n// ============================================================================\n\n/**\n * WidthProvider - HOC that provides container width\n *\n * A simple HOC that provides facility for listening to container resizes.\n * Wraps the provided component and passes down a `width` prop.\n *\n * @example\n * ```tsx\n * import { GridLayout, WidthProvider } from 'react-grid-layout';\n *\n * const GridLayoutWithWidth = WidthProvider(GridLayout);\n *\n * function MyGrid() {\n * return (\n * <GridLayoutWithWidth cols={12} rowHeight={30}>\n * <div key=\"a\">a</div>\n * </GridLayoutWithWidth>\n * );\n * }\n * ```\n */\nexport function WidthProvider<P extends { width: number }>(\n ComposedComponent: ComponentType<P>\n): ComponentType<WithWidthProps<P>> {\n function WidthProviderWrapper(props: WithWidthProps<P>) {\n const { measureBeforeMount = false, className, style, ...rest } = props;\n\n const [width, setWidth] = useState(1280);\n const [mounted, setMounted] = useState(false);\n const elementRef = useRef<HTMLDivElement>(null);\n const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n useEffect(() => {\n setMounted(true);\n\n // Set up ResizeObserver\n resizeObserverRef.current = new ResizeObserver(entries => {\n const node = elementRef.current;\n if (node instanceof HTMLElement && entries[0]) {\n const newWidth = entries[0].contentRect.width;\n setWidth(newWidth);\n }\n });\n\n const node = elementRef.current;\n if (node instanceof HTMLElement) {\n resizeObserverRef.current.observe(node);\n }\n\n return () => {\n if (node instanceof HTMLElement && resizeObserverRef.current) {\n resizeObserverRef.current.unobserve(node);\n }\n resizeObserverRef.current?.disconnect();\n };\n }, []);\n\n // If measureBeforeMount is true and not yet mounted, render placeholder\n if (measureBeforeMount && !mounted) {\n return (\n <div\n className={clsx(className, layoutClassName)}\n style={style}\n ref={elementRef}\n />\n );\n }\n\n return (\n <ComposedComponent\n innerRef={elementRef}\n className={className}\n style={style}\n {...(rest as unknown as P)}\n width={width}\n />\n );\n }\n\n WidthProviderWrapper.displayName = `WidthProvider(${ComposedComponent.displayName || ComposedComponent.name || \"Component\"})`;\n\n return WidthProviderWrapper;\n}\n\nexport default WidthProvider;\n"]}
{"version":3,"sources":["../src/legacy/ReactGridLayout.tsx","../src/legacy/ResponsiveReactGridLayout.tsx","../src/react/components/WidthProvider.tsx"],"names":["jsx"],"mappings":"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","file":"legacy.mjs","sourcesContent":["/**\n * Legacy ReactGridLayout wrapper\n *\n * This component wraps the new TypeScript GridLayout to provide\n * backwards compatibility with the v1 API by converting flat props\n * to the new composable interface format.\n */\n\nimport React from \"react\";\nimport {\n GridLayout,\n type GridLayoutProps\n} from \"../react/components/GridLayout.js\";\nimport type {\n Layout,\n LayoutItem,\n CompactType,\n ResizeHandleAxis,\n GridConfig,\n DragConfig,\n ResizeConfig,\n DropConfig,\n PositionStrategy,\n LayoutConstraint\n} from \"../core/types.js\";\nimport { getCompactor } from \"../core/compactors.js\";\nimport {\n transformStrategy,\n absoluteStrategy,\n createScaledStrategy\n} from \"../core/position.js\";\nimport { defaultConstraints, containerBounds } from \"../core/constraints.js\";\n\n// ============================================================================\n// Legacy Props Interface\n// ============================================================================\n\n/**\n * Legacy props interface for backwards compatibility with v1 API.\n * These flat props are converted to composable interfaces internally.\n */\nexport interface LegacyReactGridLayoutProps {\n // Required\n children: React.ReactNode;\n width: number;\n\n // Grid measurement (→ gridConfig)\n cols?: number;\n rowHeight?: number;\n maxRows?: number;\n margin?: readonly [number, number];\n containerPadding?: readonly [number, number] | null;\n\n // Layout data\n layout?: Layout;\n droppingItem?: LayoutItem;\n\n // Compaction (→ compactor)\n compactType?: CompactType;\n preventCollision?: boolean;\n allowOverlap?: boolean;\n /** @deprecated Use compactType instead */\n verticalCompact?: boolean;\n\n // Drag behavior (→ dragConfig)\n isDraggable?: boolean;\n isBounded?: boolean;\n draggableHandle?: string;\n draggableCancel?: string;\n\n // Resize behavior (→ resizeConfig)\n isResizable?: boolean;\n resizeHandles?: ResizeHandleAxis[];\n resizeHandle?:\n | React.ReactElement\n | ((\n axis: ResizeHandleAxis,\n ref: React.Ref<HTMLElement>\n ) => React.ReactElement);\n\n // Drop behavior (→ dropConfig)\n isDroppable?: boolean;\n\n // Position (→ positionStrategy)\n useCSSTransforms?: boolean;\n transformScale?: number;\n\n // Container props (passed through)\n autoSize?: boolean;\n className?: string;\n style?: React.CSSProperties;\n innerRef?: React.Ref<HTMLDivElement>;\n\n // Callbacks (passed through)\n onLayoutChange?: (layout: Layout) => void;\n onDragStart?: GridLayoutProps[\"onDragStart\"];\n onDrag?: GridLayoutProps[\"onDrag\"];\n onDragStop?: GridLayoutProps[\"onDragStop\"];\n onResizeStart?: GridLayoutProps[\"onResizeStart\"];\n onResize?: GridLayoutProps[\"onResize\"];\n onResizeStop?: GridLayoutProps[\"onResizeStop\"];\n onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;\n onDropDragOver?: (\n e: React.DragEvent\n ) => { w?: number; h?: number } | false | void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * ReactGridLayout - Legacy wrapper component\n *\n * Converts v1 flat props to v2 composable interfaces for backwards compatibility.\n */\nfunction ReactGridLayout(props: LegacyReactGridLayoutProps) {\n const {\n // Required\n children,\n width,\n\n // Grid measurement\n cols = 12,\n rowHeight = 150,\n maxRows = Infinity,\n margin = [10, 10],\n containerPadding = null,\n\n // Layout data\n layout,\n droppingItem,\n\n // Compaction\n compactType: compactTypeProp,\n preventCollision = false,\n allowOverlap = false,\n verticalCompact,\n\n // Drag behavior\n isDraggable = true,\n isBounded = false,\n draggableHandle,\n draggableCancel,\n\n // Resize behavior\n isResizable = true,\n resizeHandles = [\"se\"],\n resizeHandle,\n\n // Drop behavior\n isDroppable = false,\n\n // Position\n useCSSTransforms = true,\n transformScale = 1,\n\n // Container props\n autoSize,\n className,\n style,\n innerRef,\n\n // Callbacks\n onLayoutChange,\n onDragStart,\n onDrag,\n onDragStop,\n onResizeStart,\n onResize,\n onResizeStop,\n onDrop,\n onDropDragOver\n } = props;\n\n // Handle deprecated verticalCompact prop\n let compactType: CompactType =\n compactTypeProp === undefined ? \"vertical\" : compactTypeProp;\n if (verticalCompact === false) {\n if (process.env[\"NODE_ENV\"] !== \"production\") {\n console.warn(\n \"`verticalCompact` on <ReactGridLayout> is deprecated and will be removed soon. \" +\n 'Use `compactType`: \"horizontal\" | \"vertical\" | null.'\n );\n }\n compactType = null;\n }\n\n // Convert flat props to composable interfaces\n\n const gridConfig: Partial<GridConfig> = {\n cols,\n rowHeight,\n maxRows,\n margin,\n containerPadding\n };\n\n const dragConfig: Partial<DragConfig> = {\n enabled: isDraggable,\n bounded: isBounded,\n handle: draggableHandle,\n cancel: draggableCancel\n };\n\n const resizeConfig: Partial<ResizeConfig> = {\n enabled: isResizable,\n handles: resizeHandles,\n handleComponent: resizeHandle\n };\n\n const dropConfig: Partial<DropConfig> = {\n enabled: isDroppable\n };\n\n // Build position strategy\n let positionStrategy: PositionStrategy;\n if (!useCSSTransforms) {\n positionStrategy = absoluteStrategy;\n } else if (transformScale !== 1) {\n positionStrategy = createScaledStrategy(transformScale);\n } else {\n positionStrategy = transformStrategy;\n }\n\n // Get compactor from type and options\n const compactor = getCompactor(compactType, allowOverlap, preventCollision);\n\n // Build constraints array based on legacy props\n // When isBounded is true, add containerBounds constraint\n const constraints: LayoutConstraint[] = isBounded\n ? [...defaultConstraints, containerBounds]\n : defaultConstraints;\n\n return (\n <GridLayout\n width={width}\n gridConfig={gridConfig}\n dragConfig={dragConfig}\n resizeConfig={resizeConfig}\n dropConfig={dropConfig}\n positionStrategy={positionStrategy}\n compactor={compactor}\n constraints={constraints}\n layout={layout}\n droppingItem={droppingItem}\n autoSize={autoSize}\n className={className}\n style={style}\n innerRef={innerRef}\n onLayoutChange={onLayoutChange}\n onDragStart={onDragStart}\n onDrag={onDrag}\n onDragStop={onDragStop}\n onResizeStart={onResizeStart}\n onResize={onResize}\n onResizeStop={onResizeStop}\n onDrop={onDrop}\n onDropDragOver={onDropDragOver}\n >\n {children}\n </GridLayout>\n );\n}\n\n// Static properties for backwards compatibility\nReactGridLayout.displayName = \"ReactGridLayout\";\n\nexport default ReactGridLayout;\nexport { ReactGridLayout };\n","/**\n * Legacy ResponsiveReactGridLayout wrapper\n *\n * This component wraps the new TypeScript ResponsiveGridLayout to provide\n * backwards compatibility with the v1 API by converting flat props\n * to the new composable interface format.\n */\n\nimport React from \"react\";\nimport {\n ResponsiveGridLayout,\n type ResponsiveGridLayoutProps\n} from \"../react/components/ResponsiveGridLayout.js\";\nimport type {\n Layout,\n LayoutItem,\n CompactType,\n Breakpoint,\n Breakpoints,\n ResponsiveLayouts,\n ResizeHandleAxis,\n DragConfig,\n ResizeConfig,\n DropConfig,\n PositionStrategy\n} from \"../core/types.js\";\nimport { getCompactor } from \"../core/compactors.js\";\nimport {\n transformStrategy,\n absoluteStrategy,\n createScaledStrategy\n} from \"../core/position.js\";\n\n// ============================================================================\n// Legacy Props Interface\n// ============================================================================\n\n/**\n * Legacy props interface for backwards compatibility with v1 API.\n * These flat props are converted to composable interfaces internally.\n */\nexport interface LegacyResponsiveReactGridLayoutProps<\n B extends Breakpoint = string\n> {\n // Required\n children: React.ReactNode;\n width: number;\n\n // Responsive-specific\n breakpoint?: B;\n breakpoints?: Breakpoints<B>;\n cols?: Breakpoints<B>;\n layouts?: ResponsiveLayouts<B>;\n onBreakpointChange?: (newBreakpoint: B, cols: number) => void;\n onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;\n onWidthChange?: (\n containerWidth: number,\n margin: readonly [number, number],\n cols: number,\n containerPadding: readonly [number, number] | null\n ) => void;\n\n // Grid measurement\n rowHeight?: number;\n maxRows?: number;\n margin?:\n | readonly [number, number]\n | Partial<Record<B, readonly [number, number]>>;\n containerPadding?:\n | readonly [number, number]\n | Partial<Record<B, readonly [number, number] | null>>\n | null;\n\n // Layout data\n droppingItem?: LayoutItem;\n\n // Compaction (→ compactor)\n compactType?: CompactType;\n preventCollision?: boolean;\n allowOverlap?: boolean;\n /** @deprecated Use compactType instead */\n verticalCompact?: boolean;\n\n // Drag behavior (→ dragConfig)\n isDraggable?: boolean;\n isBounded?: boolean;\n draggableHandle?: string;\n draggableCancel?: string;\n\n // Resize behavior (→ resizeConfig)\n isResizable?: boolean;\n resizeHandles?: ResizeHandleAxis[];\n resizeHandle?:\n | React.ReactElement\n | ((\n axis: ResizeHandleAxis,\n ref: React.Ref<HTMLElement>\n ) => React.ReactElement);\n\n // Drop behavior (→ dropConfig)\n isDroppable?: boolean;\n\n // Position (→ positionStrategy)\n useCSSTransforms?: boolean;\n transformScale?: number;\n\n // Container props (passed through)\n autoSize?: boolean;\n className?: string;\n style?: React.CSSProperties;\n innerRef?: React.Ref<HTMLDivElement>;\n\n // Callbacks (passed through)\n onDragStart?: ResponsiveGridLayoutProps<B>[\"onDragStart\"];\n onDrag?: ResponsiveGridLayoutProps<B>[\"onDrag\"];\n onDragStop?: ResponsiveGridLayoutProps<B>[\"onDragStop\"];\n onResizeStart?: ResponsiveGridLayoutProps<B>[\"onResizeStart\"];\n onResize?: ResponsiveGridLayoutProps<B>[\"onResize\"];\n onResizeStop?: ResponsiveGridLayoutProps<B>[\"onResizeStop\"];\n onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;\n onDropDragOver?: (\n e: React.DragEvent\n ) => { w?: number; h?: number } | false | void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * ResponsiveReactGridLayout - Legacy wrapper component\n *\n * Converts v1 flat props to v2 composable interfaces for backwards compatibility.\n */\nfunction ResponsiveReactGridLayout<B extends Breakpoint = string>(\n props: LegacyResponsiveReactGridLayoutProps<B>\n) {\n const {\n // Required\n children,\n width,\n\n // Responsive-specific\n breakpoint,\n breakpoints,\n cols,\n layouts,\n onBreakpointChange,\n onLayoutChange,\n onWidthChange,\n\n // Grid measurement\n rowHeight,\n maxRows,\n margin,\n containerPadding,\n\n // Layout data\n droppingItem,\n\n // Compaction\n compactType: compactTypeProp,\n preventCollision = false,\n allowOverlap = false,\n verticalCompact,\n\n // Drag behavior\n isDraggable = true,\n isBounded = false,\n draggableHandle,\n draggableCancel,\n\n // Resize behavior\n isResizable = true,\n resizeHandles = [\"se\"],\n resizeHandle,\n\n // Drop behavior\n isDroppable = false,\n\n // Position\n useCSSTransforms = true,\n transformScale = 1,\n\n // Container props\n autoSize,\n className,\n style,\n innerRef,\n\n // Callbacks\n onDragStart,\n onDrag,\n onDragStop,\n onResizeStart,\n onResize,\n onResizeStop,\n onDrop,\n onDropDragOver\n } = props;\n\n // Handle deprecated verticalCompact prop\n let compactType: CompactType =\n compactTypeProp === undefined ? \"vertical\" : compactTypeProp;\n if (verticalCompact === false) {\n if (process.env[\"NODE_ENV\"] !== \"production\") {\n console.warn(\n \"`verticalCompact` on <ResponsiveReactGridLayout> is deprecated and will be removed soon. \" +\n 'Use `compactType`: \"horizontal\" | \"vertical\" | null.'\n );\n }\n compactType = null;\n }\n\n // Convert flat props to composable interfaces\n\n const dragConfig: Partial<DragConfig> = {\n enabled: isDraggable,\n bounded: isBounded,\n handle: draggableHandle,\n cancel: draggableCancel\n };\n\n const resizeConfig: Partial<ResizeConfig> = {\n enabled: isResizable,\n handles: resizeHandles,\n handleComponent: resizeHandle\n };\n\n const dropConfig: Partial<DropConfig> = {\n enabled: isDroppable\n };\n\n // Build position strategy\n let positionStrategy: PositionStrategy;\n if (!useCSSTransforms) {\n positionStrategy = absoluteStrategy;\n } else if (transformScale !== 1) {\n positionStrategy = createScaledStrategy(transformScale);\n } else {\n positionStrategy = transformStrategy;\n }\n\n // Get compactor from type and options\n const compactor = getCompactor(compactType, allowOverlap, preventCollision);\n\n return (\n <ResponsiveGridLayout<B>\n width={width}\n breakpoint={breakpoint}\n breakpoints={breakpoints}\n cols={cols}\n layouts={layouts}\n rowHeight={rowHeight}\n maxRows={maxRows}\n margin={margin}\n containerPadding={containerPadding}\n compactor={compactor}\n dragConfig={dragConfig}\n resizeConfig={resizeConfig}\n dropConfig={dropConfig}\n positionStrategy={positionStrategy}\n droppingItem={droppingItem}\n autoSize={autoSize}\n className={className}\n style={style}\n innerRef={innerRef}\n onBreakpointChange={onBreakpointChange}\n onLayoutChange={onLayoutChange}\n onWidthChange={onWidthChange}\n onDragStart={onDragStart}\n onDrag={onDrag}\n onDragStop={onDragStop}\n onResizeStart={onResizeStart}\n onResize={onResize}\n onResizeStop={onResizeStop}\n onDrop={onDrop}\n onDropDragOver={onDropDragOver}\n >\n {children}\n </ResponsiveGridLayout>\n );\n}\n\n// Static properties for backwards compatibility\nResponsiveReactGridLayout.displayName = \"ResponsiveReactGridLayout\";\n\nexport default ResponsiveReactGridLayout;\nexport { ResponsiveReactGridLayout, ResponsiveReactGridLayout as Responsive };\n","/**\n * WidthProvider HOC\n *\n * A Higher-Order Component that provides width measurement to grid layouts.\n * This wraps any component and provides the container width as a prop.\n */\n\nimport React, { useState, useRef, useEffect, type ComponentType } from \"react\";\nimport clsx from \"clsx\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WidthProviderProps {\n /** If true, will not render children until mounted */\n measureBeforeMount?: boolean;\n /** Additional class name */\n className?: string;\n /** Additional styles */\n style?: React.CSSProperties;\n}\n\ntype WithWidthProps<P> = Omit<P, \"width\"> & WidthProviderProps;\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst layoutClassName = \"react-grid-layout\";\n\n// ============================================================================\n// WidthProvider HOC\n// ============================================================================\n\n/**\n * WidthProvider - HOC that provides container width\n *\n * A simple HOC that provides facility for listening to container resizes.\n * Wraps the provided component and passes down a `width` prop.\n *\n * @example\n * ```tsx\n * import { GridLayout, WidthProvider } from 'react-grid-layout';\n *\n * const GridLayoutWithWidth = WidthProvider(GridLayout);\n *\n * function MyGrid() {\n * return (\n * <GridLayoutWithWidth cols={12} rowHeight={30}>\n * <div key=\"a\">a</div>\n * </GridLayoutWithWidth>\n * );\n * }\n * ```\n */\nexport function WidthProvider<P extends { width: number }>(\n ComposedComponent: ComponentType<P>\n): ComponentType<WithWidthProps<P>> {\n function WidthProviderWrapper(props: WithWidthProps<P>) {\n const { measureBeforeMount = false, className, style, ...rest } = props;\n\n const [width, setWidth] = useState(1280);\n const [mounted, setMounted] = useState(false);\n const elementRef = useRef<HTMLDivElement>(null);\n const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n // Set mounted state on first render\n useEffect(() => {\n setMounted(true);\n }, []);\n\n // Set up ResizeObserver - re-runs when mounted changes to observe the new element\n // This fixes measureBeforeMount where the ref changes from placeholder to composed component\n useEffect(() => {\n const node = elementRef.current;\n if (!(node instanceof HTMLElement)) return;\n\n const observer = new ResizeObserver(entries => {\n if (entries[0]) {\n const newWidth = entries[0].contentRect.width;\n setWidth(newWidth);\n }\n });\n\n observer.observe(node);\n resizeObserverRef.current = observer;\n\n return () => {\n observer.unobserve(node);\n observer.disconnect();\n };\n }, [mounted]);\n\n // If measureBeforeMount is true and not yet mounted, render placeholder\n if (measureBeforeMount && !mounted) {\n return (\n <div\n className={clsx(className, layoutClassName)}\n style={style}\n ref={elementRef}\n />\n );\n }\n\n return (\n <ComposedComponent\n innerRef={elementRef}\n className={className}\n style={style}\n {...(rest as unknown as P)}\n width={width}\n />\n );\n }\n\n WidthProviderWrapper.displayName = `WidthProvider(${ComposedComponent.displayName || ComposedComponent.name || \"Component\"})`;\n\n return WidthProviderWrapper;\n}\n\nexport default WidthProvider;\n"]}
import React__default, { ReactElement, CSSProperties, RefObject } from 'react';
import { D as DroppingPosition, d as ResizeHandleAxis, G as GridDragEvent, e as GridResizeEvent, L as Layout, C as CompactType, a as LayoutItem, c as Compactor, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-Cxf4nHNr.mjs';
export { P as Position } from './types-Cxf4nHNr.mjs';
export { E as EventCallback, G as GridLayout, a as GridLayoutProps, R as ResponsiveGridLayout, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-D6lFRE3f.mjs';
export { b as bottom, c as cloneLayout, a as cloneLayoutItem, d as getCompactor, g as getLayoutItem, h as horizontalCompactor, n as noCompactor, f as setTopLeft, s as setTransform, e as verticalCompactor } from './position-BmN1z36J.mjs';
export { c as calcGridItemPosition, b as calcWH, a as calcXY } from './calculate-CwYDW8na.mjs';
import { D as DroppingPosition, d as ResizeHandleAxis, f as LayoutConstraint, a as LayoutItem, L as Layout, G as GridDragEvent, e as GridResizeEvent, C as CompactType, c as Compactor, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-CokovIMH.mjs';
export { P as Position } from './types-CokovIMH.mjs';
export { E as EventCallback, G as GridLayout, a as GridLayoutProps, R as ResponsiveGridLayout, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-BkHF9YHa.mjs';
export { b as bottom, c as cloneLayout, a as cloneLayoutItem, d as getCompactor, g as getLayoutItem, h as horizontalCompactor, n as noCompactor, f as setTopLeft, s as setTransform, e as verticalCompactor } from './position-C8a5g6bb.mjs';
export { c as calcGridItemPosition, b as calcWH, a as calcXY } from './calculate-DwbL1D06.mjs';

@@ -77,2 +77,8 @@ /**

resizeHandle?: ResizeHandle;
/** Layout constraints for position/size limiting */
constraints?: LayoutConstraint[];
/** The layout item data (for per-item constraints) */
layoutItem?: LayoutItem;
/** Current layout (for constraint context) */
layout?: Layout;
/** Called when drag starts */

@@ -79,0 +85,0 @@ onDragStart?: GridItemCallback<GridDragEvent>;

import React__default, { ReactElement, CSSProperties, RefObject } from 'react';
import { D as DroppingPosition, d as ResizeHandleAxis, G as GridDragEvent, e as GridResizeEvent, L as Layout, C as CompactType, a as LayoutItem, c as Compactor, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-Cxf4nHNr.js';
export { P as Position } from './types-Cxf4nHNr.js';
export { E as EventCallback, G as GridLayout, a as GridLayoutProps, R as ResponsiveGridLayout, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-CH4s0tKj.js';
export { b as bottom, c as cloneLayout, a as cloneLayoutItem, d as getCompactor, g as getLayoutItem, h as horizontalCompactor, n as noCompactor, f as setTopLeft, s as setTransform, e as verticalCompactor } from './position-Dk2b4ZMS.js';
export { c as calcGridItemPosition, b as calcWH, a as calcXY } from './calculate-mgLpNJ5O.js';
import { D as DroppingPosition, d as ResizeHandleAxis, f as LayoutConstraint, a as LayoutItem, L as Layout, G as GridDragEvent, e as GridResizeEvent, C as CompactType, c as Compactor, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-CokovIMH.js';
export { P as Position } from './types-CokovIMH.js';
export { E as EventCallback, G as GridLayout, a as GridLayoutProps, R as ResponsiveGridLayout, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-CLn16-X3.js';
export { b as bottom, c as cloneLayout, a as cloneLayoutItem, d as getCompactor, g as getLayoutItem, h as horizontalCompactor, n as noCompactor, f as setTopLeft, s as setTransform, e as verticalCompactor } from './position-H8tBL91b.js';
export { c as calcGridItemPosition, b as calcWH, a as calcXY } from './calculate-DsVTldEE.js';

@@ -77,2 +77,8 @@ /**

resizeHandle?: ResizeHandle;
/** Layout constraints for position/size limiting */
constraints?: LayoutConstraint[];
/** The layout item data (for per-item constraints) */
layoutItem?: LayoutItem;
/** Current layout (for constraint context) */
layout?: Layout;
/** Called when drag starts */

@@ -79,0 +85,0 @@ onDragStart?: GridItemCallback<GridDragEvent>;

'use strict';
var chunkH5KMDLY3_js = require('./chunk-H5KMDLY3.js');
require('./chunk-PBQSHIID.js');
var chunkBFTKGAP3_js = require('./chunk-BFTKGAP3.js');
var chunk3WO4SAYB_js = require('./chunk-3WO4SAYB.js');
var chunkF6NQPYKT_js = require('./chunk-F6NQPYKT.js');
var chunkGPZBANOK_js = require('./chunk-GPZBANOK.js');
require('./chunk-7ELO5FRW.js');
var chunkQRW3ND4U_js = require('./chunk-QRW3ND4U.js');
var chunkFN6MIZ24_js = require('./chunk-FN6MIZ24.js');
var chunkBJFPTW5Q_js = require('./chunk-BJFPTW5Q.js');

@@ -13,85 +13,85 @@

enumerable: true,
get: function () { return chunkH5KMDLY3_js.DEFAULT_BREAKPOINTS; }
get: function () { return chunkGPZBANOK_js.DEFAULT_BREAKPOINTS; }
});
Object.defineProperty(exports, "DEFAULT_COLS", {
enumerable: true,
get: function () { return chunkH5KMDLY3_js.DEFAULT_COLS; }
get: function () { return chunkGPZBANOK_js.DEFAULT_COLS; }
});
Object.defineProperty(exports, "useContainerWidth", {
enumerable: true,
get: function () { return chunkH5KMDLY3_js.useContainerWidth; }
get: function () { return chunkGPZBANOK_js.useContainerWidth; }
});
Object.defineProperty(exports, "useGridLayout", {
enumerable: true,
get: function () { return chunkH5KMDLY3_js.useGridLayout; }
get: function () { return chunkGPZBANOK_js.useGridLayout; }
});
Object.defineProperty(exports, "useResponsiveLayout", {
enumerable: true,
get: function () { return chunkH5KMDLY3_js.useResponsiveLayout; }
get: function () { return chunkGPZBANOK_js.useResponsiveLayout; }
});
Object.defineProperty(exports, "GridItem", {
enumerable: true,
get: function () { return chunkBFTKGAP3_js.GridItem; }
get: function () { return chunkQRW3ND4U_js.GridItem; }
});
Object.defineProperty(exports, "GridLayout", {
enumerable: true,
get: function () { return chunkBFTKGAP3_js.GridLayout; }
get: function () { return chunkQRW3ND4U_js.GridLayout; }
});
Object.defineProperty(exports, "ResponsiveGridLayout", {
enumerable: true,
get: function () { return chunkBFTKGAP3_js.ResponsiveGridLayout; }
get: function () { return chunkQRW3ND4U_js.ResponsiveGridLayout; }
});
Object.defineProperty(exports, "bottom", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.bottom; }
});
Object.defineProperty(exports, "cloneLayout", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.cloneLayout; }
});
Object.defineProperty(exports, "cloneLayoutItem", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.cloneLayoutItem; }
});
Object.defineProperty(exports, "getCompactor", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.getCompactor; }
get: function () { return chunkFN6MIZ24_js.getCompactor; }
});
Object.defineProperty(exports, "getLayoutItem", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.getLayoutItem; }
});
Object.defineProperty(exports, "horizontalCompactor", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.horizontalCompactor; }
get: function () { return chunkFN6MIZ24_js.horizontalCompactor; }
});
Object.defineProperty(exports, "noCompactor", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.noCompactor; }
get: function () { return chunkFN6MIZ24_js.noCompactor; }
});
Object.defineProperty(exports, "setTopLeft", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.setTopLeft; }
get: function () { return chunkFN6MIZ24_js.setTopLeft; }
});
Object.defineProperty(exports, "setTransform", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.setTransform; }
get: function () { return chunkFN6MIZ24_js.setTransform; }
});
Object.defineProperty(exports, "verticalCompactor", {
enumerable: true,
get: function () { return chunk3WO4SAYB_js.verticalCompactor; }
get: function () { return chunkFN6MIZ24_js.verticalCompactor; }
});
Object.defineProperty(exports, "bottom", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.bottom; }
});
Object.defineProperty(exports, "calcGridItemPosition", {
enumerable: true,
get: function () { return chunkF6NQPYKT_js.calcGridItemPosition; }
get: function () { return chunkBJFPTW5Q_js.calcGridItemPosition; }
});
Object.defineProperty(exports, "calcWH", {
enumerable: true,
get: function () { return chunkF6NQPYKT_js.calcWH; }
get: function () { return chunkBJFPTW5Q_js.calcWH; }
});
Object.defineProperty(exports, "calcXY", {
enumerable: true,
get: function () { return chunkF6NQPYKT_js.calcXY; }
get: function () { return chunkBJFPTW5Q_js.calcXY; }
});
Object.defineProperty(exports, "cloneLayout", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.cloneLayout; }
});
Object.defineProperty(exports, "cloneLayoutItem", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.cloneLayoutItem; }
});
Object.defineProperty(exports, "getLayoutItem", {
enumerable: true,
get: function () { return chunkBJFPTW5Q_js.getLayoutItem; }
});
//# sourceMappingURL=react.js.map
//# sourceMappingURL=react.js.map

@@ -1,7 +0,7 @@

export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, useContainerWidth, useGridLayout, useResponsiveLayout } from './chunk-ZCXE6SR5.mjs';
import './chunk-ZWN22PS2.mjs';
export { GridItem, GridLayout, ResponsiveGridLayout } from './chunk-R35HZZTA.mjs';
export { bottom, cloneLayout, cloneLayoutItem, getCompactor, getLayoutItem, horizontalCompactor, noCompactor, setTopLeft, setTransform, verticalCompactor } from './chunk-4HNUMWQK.mjs';
export { calcGridItemPosition, calcWH, calcXY } from './chunk-2KUHNJXF.mjs';
export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, useContainerWidth, useGridLayout, useResponsiveLayout } from './chunk-LWF5EYMO.mjs';
import './chunk-526JND3R.mjs';
export { GridItem, GridLayout, ResponsiveGridLayout } from './chunk-MXXN7GUE.mjs';
export { getCompactor, horizontalCompactor, noCompactor, setTopLeft, setTransform, verticalCompactor } from './chunk-2O3ZME4Q.mjs';
export { bottom, calcGridItemPosition, calcWH, calcXY, cloneLayout, cloneLayoutItem, getLayoutItem } from './chunk-AWM66AWF.mjs';
//# sourceMappingURL=react.mjs.map
//# sourceMappingURL=react.mjs.map
// Development entry point - uses new TypeScript source directly
// Legacy API (default)
module.exports = require("./src/legacy/ReactGridLayout").default;

@@ -9,1 +11,15 @@ module.exports.utils = require("./src/legacy/utils-compat");

module.exports.WidthProvider = require("./src/legacy/WidthProvider").default;
// v2 API additions
module.exports.useContainerWidth =
require("./src/react/hooks/useContainerWidth").useContainerWidth;
module.exports.GridLayout =
require("./src/react/components/GridLayout").GridLayout;
module.exports.ResponsiveGridLayout =
require("./src/react/components/ResponsiveGridLayout").ResponsiveGridLayout;
// Constraint exports
Object.assign(module.exports, require("./src/core/constraints"));
// Compactor exports
Object.assign(module.exports, require("./src/core/compactors"));
{
"name": "react-grid-layout",
"version": "2.0.0",
"version": "2.1.0",
"description": "A draggable and resizable grid layout with responsive breakpoints, for React.",

@@ -73,2 +73,3 @@ "main": "dist/index.js",

"test": "make test",
"test:match": "NODE_ENV=test npx jest --testPathPatterns",
"build": "make build",

@@ -75,0 +76,0 @@ "build:ts": "tsup",

+97
-25

@@ -60,11 +60,11 @@ # React-Grid-Layout

| Change | Description |
| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| [`width` prop required](./rfcs/0001-v2-typescript-rewrite.md#breaking-changes-in-v2) | Use `useContainerWidth` hook or provide your own measurement |
| [`onDragStart` threshold](./rfcs/0001-v2-typescript-rewrite.md#1-ondragstart-no-longer-fires-on-click-only-events) | Now fires after 3px movement, not on mousedown. Use `onMouseDown` for immediate response |
| [Immutable callbacks](./rfcs/0001-v2-typescript-rewrite.md#2-immutable-callback-parameters) | Callback parameters are read-only. Use `onLayoutChange` or constraints instead of mutation |
| [`data-grid` in legacy only](./rfcs/0001-v2-typescript-rewrite.md#3-data-grid-prop-only-available-in-legacy-wrapper) | v2 requires explicit `layout` prop. Use legacy wrapper for `data-grid` |
| [Fast compaction](./rfcs/0001-v2-typescript-rewrite.md#4-fast-compaction-algorithm-by-default) | O(n log n) algorithm may differ in edge cases. Use `compact()` from `/core` for exact v1 behavior |
| UMD bundle removed | Use a bundler (Vite, webpack, esbuild) |
| `verticalCompact` removed | Use `compactType={null}` or `compactor={noCompactor}` |
| Change | Description |
| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| [`width` prop required](./rfcs/0001-v2-typescript-rewrite.md#breaking-changes-in-v2) | Use `useContainerWidth` hook or provide your own measurement |
| [`onDragStart` threshold](./rfcs/0001-v2-typescript-rewrite.md#1-ondragstart-no-longer-fires-on-click-only-events) | Now fires after 3px movement, not on mousedown. Use `onMouseDown` for immediate response |
| [Immutable callbacks](./rfcs/0001-v2-typescript-rewrite.md#2-immutable-callback-parameters) | Callback parameters are read-only. Use `onLayoutChange` or constraints instead of mutation |
| [`data-grid` in legacy only](./rfcs/0001-v2-typescript-rewrite.md#3-data-grid-prop-only-available-in-legacy-wrapper) | v2 requires explicit `layout` prop. Use legacy wrapper for `data-grid` |
| [Pluggable compaction](./rfcs/0001-v2-typescript-rewrite.md#4-pluggable-compaction-algorithms) | Compaction is now pluggable via `Compactor` interface. Optional fast O(n log n) algorithm in `/extras` |
| UMD bundle removed | Use a bundler (Vite, webpack, esbuild) |
| `verticalCompact` removed | Use `compactType={null}` or `compactor={noCompactor}` |

@@ -128,13 +128,13 @@ ## Migrating from v1

1. [Dynamic Minimum and Maximum Width/Height](https://react-grid-layout.github.io/react-grid-layout/examples/10-dynamic-min-max-wh.html)
1. [No Vertical Compacting (Free Movement)](https://react-grid-layout.github.io/react-grid-layout/examples/11-no-vertical-compact.html)
1. [Prevent Collision](https://react-grid-layout.github.io/react-grid-layout/examples/12-prevent-collision.html)
1. [Error Case](https://react-grid-layout.github.io/react-grid-layout/examples/13-error-case.html)
1. [Toolbox](https://react-grid-layout.github.io/react-grid-layout/examples/14-toolbox.html)
1. [Drag From Outside](https://react-grid-layout.github.io/react-grid-layout/examples/15-drag-from-outside.html)
1. [Bounded Layout](https://react-grid-layout.github.io/react-grid-layout/examples/16-bounded.html)
1. [Responsive Bootstrap-style Layout](https://react-grid-layout.github.io/react-grid-layout/examples/17-responsive-bootstrap-style.html)
1. [Scaled Containers](https://react-grid-layout.github.io/react-grid-layout/examples/18-scale.html)
1. [Allow Overlap](https://react-grid-layout.github.io/react-grid-layout/examples/19-allow-overlap.html)
1. [All Resizable Handles](https://react-grid-layout.github.io/react-grid-layout/examples/20-resizable-handles.html)
1. [Single Row Horizontal](https://react-grid-layout.github.io/react-grid-layout/examples/21-horizontal.html)
1. [Toolbox](https://react-grid-layout.github.io/react-grid-layout/examples/11-toolbox.html)
1. [Drag From Outside](https://react-grid-layout.github.io/react-grid-layout/examples/12-drag-from-outside.html)
1. [Bounded Layout](https://react-grid-layout.github.io/react-grid-layout/examples/13-bounded.html)
1. [Responsive Bootstrap-style Layout](https://react-grid-layout.github.io/react-grid-layout/examples/14-responsive-bootstrap-style.html)
1. [Scaled Containers](https://react-grid-layout.github.io/react-grid-layout/examples/15-scale.html)
1. [Allow Overlap](https://react-grid-layout.github.io/react-grid-layout/examples/16-allow-overlap.html)
1. [All Resizable Handles](https://react-grid-layout.github.io/react-grid-layout/examples/17-resizable-handles.html)
1. [Compactor Showcase](https://react-grid-layout.github.io/react-grid-layout/examples/18-compactors.html)
1. [Pluggable Constraints](https://react-grid-layout.github.io/react-grid-layout/examples/19-constraints.html)
1. [Aspect Ratio Constraints](https://react-grid-layout.github.io/react-grid-layout/examples/20-aspect-ratio.html)
1. [Custom Constraints](https://react-grid-layout.github.io/react-grid-layout/examples/21-custom-constraints.html)

@@ -454,5 +454,5 @@ #### Projects Using React-Grid-Layout

compactType?: CompactType;
/** Allow items to overlap */
/** Allow items to overlap (stack on top of each other) */
allowOverlap?: boolean;
/** Prevent collisions when moving items */
/** Block movement into occupied space instead of pushing items (no effect if allowOverlap is true) */
preventCollision?: boolean;

@@ -817,6 +817,26 @@ /** Called when layout changes */

/** Whether this compactor allows overlapping items */
/**
* Whether items can overlap each other.
*
* When true:
* - Items can be placed on top of other items
* - Dragging into another item does NOT push it away
* - Compaction is skipped after drag/resize
*
* Use for: layered dashboards, free-form layouts
*/
allowOverlap: boolean;
/** Prevent items from moving when another item is dragged into them */
/**
* Whether to block movement that would cause collision.
*
* When true (and allowOverlap is false):
* - Dragging into another item is blocked (item snaps back)
* - Other items are NOT pushed away
* - Only affects movement, not compaction
*
* Use with noCompactor for: fixed grids, slot-based layouts
*
* Note: Has no effect when allowOverlap is true.
*/
preventCollision?: boolean;

@@ -1097,3 +1117,3 @@

> Based on [PR #2175](https://github.com/react-grid-layout/react-grid-layout/pull/2175) by [@nicosayer](https://github.com/nicosayer).
> Based on [PR #2175](https://github.com/react-grid-layout/react-grid-layout/pull/2175) by [@dmj900501](https://github.com/dmj900501).

@@ -1154,2 +1174,54 @@ ```tsx

### Fast Compactors
For large layouts (200+ items), the standard compactors can become slow due to O(n²) collision resolution. The fast compactors use optimized algorithms with O(n log n) complexity.
> Based on the "rising tide" algorithm from [PR #2152](https://github.com/react-grid-layout/react-grid-layout/pull/2152) by [@morris](https://github.com/morris).
```tsx
import {
fastVerticalCompactor,
fastHorizontalCompactor,
fastVerticalOverlapCompactor,
fastHorizontalOverlapCompactor
} from "react-grid-layout/extras";
<ReactGridLayout
compactor={fastVerticalCompactor}
// or compactor={fastHorizontalCompactor}
layout={layout}
width={width}
/>;
```
**Performance Benchmarks:**
| Items | Standard Vertical | Fast Vertical | Speedup |
| ----- | ----------------- | ------------- | ------- |
| 50 | 112 µs | 19 µs | **6x** |
| 100 | 203 µs | 36 µs | **6x** |
| 200 | 821 µs | 51 µs | **16x** |
| 500 | 5.7 ms | 129 µs | **45x** |
| Items | Standard Horizontal | Fast Horizontal | Speedup |
| ----- | ------------------- | --------------- | ------- |
| 50 | 164 µs | 12 µs | **14x** |
| 100 | 477 µs | 25 µs | **19x** |
| 200 | 1.1 ms | 42 µs | **26x** |
| 500 | 9.5 ms | 128 µs | **74x** |
**Correctness:**
The fast compactors produce layouts identical to the standard compactors:
- **Vertical**: 0% height difference on deterministic 100-item layouts
- **Horizontal**: 0% width difference on deterministic 100-item layouts
- Both pass all correctness tests: no overlaps, idempotent, static item handling
**When to use:**
- Use fast compactors for dashboards with 200+ widgets
- For smaller layouts (<100 items), standard compactors work equally well
- Both standard and fast compactors produce valid, non-overlapping layouts
### calcGridCellDimensions (Core Utility)

@@ -1156,0 +1228,0 @@

import { P as Position, d as ResizeHandleAxis } from './types-Cxf4nHNr.mjs';
/**
* Grid calculation utilities.
*
* These functions convert between grid units and pixel positions.
*/
/**
* Parameters needed for position calculations.
*/
interface PositionParams {
readonly margin: readonly [number, number];
readonly containerPadding: readonly [number, number];
readonly containerWidth: number;
readonly cols: number;
readonly rowHeight: number;
readonly maxRows: number;
}
/**
* Calculate the width of a single grid column in pixels.
*
* @param positionParams - Grid parameters
* @returns Column width in pixels
*/
declare function calcGridColWidth(positionParams: PositionParams): number;
/**
* Calculate the pixel size for a grid unit dimension (width or height).
*
* Can be called as:
* - calcGridItemWHPx(w, colWidth, margin[0]) for width
* - calcGridItemWHPx(h, rowHeight, margin[1]) for height
*
* @param gridUnits - Size in grid units
* @param colOrRowSize - Column width or row height in pixels
* @param marginPx - Margin between items in pixels
* @returns Size in pixels
*/
declare function calcGridItemWHPx(gridUnits: number, colOrRowSize: number, marginPx: number): number;
/**
* Calculate pixel position for a grid item.
*
* Returns left, top, width, height in pixels.
*
* @param positionParams - Grid parameters
* @param x - X coordinate in grid units
* @param y - Y coordinate in grid units
* @param w - Width in grid units
* @param h - Height in grid units
* @param dragPosition - If present, use exact left/top from drag callbacks
* @param resizePosition - If present, use exact dimensions from resize callbacks
* @returns Position in pixels
*/
declare function calcGridItemPosition(positionParams: PositionParams, x: number, y: number, w: number, h: number, dragPosition?: {
top: number;
left: number;
} | null, resizePosition?: {
top: number;
left: number;
height: number;
width: number;
} | null): Position;
/**
* Translate pixel coordinates to grid units.
*
* @param positionParams - Grid parameters
* @param top - Top position in pixels (relative to parent)
* @param left - Left position in pixels (relative to parent)
* @param w - Width in grid units (for clamping)
* @param h - Height in grid units (for clamping)
* @returns x and y in grid units
*/
declare function calcXY(positionParams: PositionParams, top: number, left: number, w: number, h: number): {
x: number;
y: number;
};
/**
* Calculate grid units from pixel dimensions.
*
* @param positionParams - Grid parameters
* @param width - Width in pixels
* @param height - Height in pixels
* @param x - X coordinate in grid units (for clamping)
* @param y - Y coordinate in grid units (for clamping)
* @param handle - Resize handle being used
* @returns w, h in grid units
*/
declare function calcWH(positionParams: PositionParams, width: number, height: number, x: number, y: number, handle: ResizeHandleAxis): {
w: number;
h: number;
};
/**
* Clamp a number between bounds.
*
* @param num - Number to clamp
* @param lowerBound - Minimum value
* @param upperBound - Maximum value
* @returns Clamped value
*/
declare function clamp(num: number, lowerBound: number, upperBound: number): number;
/**
* Grid cell dimension information for rendering backgrounds or overlays.
*/
interface GridCellDimensions {
/** Width of a single cell in pixels */
readonly cellWidth: number;
/** Height of a single cell in pixels */
readonly cellHeight: number;
/** Horizontal offset from container edge to first cell */
readonly offsetX: number;
/** Vertical offset from container edge to first cell */
readonly offsetY: number;
/** Horizontal gap between cells */
readonly gapX: number;
/** Vertical gap between cells */
readonly gapY: number;
/** Number of columns */
readonly cols: number;
/** Total container width */
readonly containerWidth: number;
}
/**
* Configuration for grid cell dimension calculation.
*/
interface GridCellConfig {
/** Container width in pixels */
width: number;
/** Number of columns */
cols: number;
/** Row height in pixels */
rowHeight: number;
/** Margin between items [x, y] */
margin?: readonly [number, number];
/** Container padding [x, y], defaults to margin if not specified */
containerPadding?: readonly [number, number] | null;
}
/**
* Calculate grid cell dimensions for rendering backgrounds or overlays.
*
* This function provides all the measurements needed to render a visual
* grid background that aligns with the actual grid cells.
*
* @param config - Grid configuration
* @returns Cell dimensions and offsets
*
* @example
* ```tsx
* import { calcGridCellDimensions } from 'react-grid-layout/core';
*
* const dims = calcGridCellDimensions({
* width: 1200,
* cols: 12,
* rowHeight: 30,
* margin: [10, 10],
* containerPadding: [10, 10]
* });
*
* // dims.cellWidth = 88.33...
* // dims.cellHeight = 30
* // dims.offsetX = 10 (containerPadding[0])
* // dims.offsetY = 10 (containerPadding[1])
* // dims.gapX = 10 (margin[0])
* // dims.gapY = 10 (margin[1])
* ```
*/
declare function calcGridCellDimensions(config: GridCellConfig): GridCellDimensions;
export { type GridCellDimensions as G, type PositionParams as P, calcXY as a, calcWH as b, calcGridItemPosition as c, type GridCellConfig as d, calcGridColWidth as e, calcGridItemWHPx as f, clamp as g, calcGridCellDimensions as h };
import { P as Position, d as ResizeHandleAxis } from './types-Cxf4nHNr.js';
/**
* Grid calculation utilities.
*
* These functions convert between grid units and pixel positions.
*/
/**
* Parameters needed for position calculations.
*/
interface PositionParams {
readonly margin: readonly [number, number];
readonly containerPadding: readonly [number, number];
readonly containerWidth: number;
readonly cols: number;
readonly rowHeight: number;
readonly maxRows: number;
}
/**
* Calculate the width of a single grid column in pixels.
*
* @param positionParams - Grid parameters
* @returns Column width in pixels
*/
declare function calcGridColWidth(positionParams: PositionParams): number;
/**
* Calculate the pixel size for a grid unit dimension (width or height).
*
* Can be called as:
* - calcGridItemWHPx(w, colWidth, margin[0]) for width
* - calcGridItemWHPx(h, rowHeight, margin[1]) for height
*
* @param gridUnits - Size in grid units
* @param colOrRowSize - Column width or row height in pixels
* @param marginPx - Margin between items in pixels
* @returns Size in pixels
*/
declare function calcGridItemWHPx(gridUnits: number, colOrRowSize: number, marginPx: number): number;
/**
* Calculate pixel position for a grid item.
*
* Returns left, top, width, height in pixels.
*
* @param positionParams - Grid parameters
* @param x - X coordinate in grid units
* @param y - Y coordinate in grid units
* @param w - Width in grid units
* @param h - Height in grid units
* @param dragPosition - If present, use exact left/top from drag callbacks
* @param resizePosition - If present, use exact dimensions from resize callbacks
* @returns Position in pixels
*/
declare function calcGridItemPosition(positionParams: PositionParams, x: number, y: number, w: number, h: number, dragPosition?: {
top: number;
left: number;
} | null, resizePosition?: {
top: number;
left: number;
height: number;
width: number;
} | null): Position;
/**
* Translate pixel coordinates to grid units.
*
* @param positionParams - Grid parameters
* @param top - Top position in pixels (relative to parent)
* @param left - Left position in pixels (relative to parent)
* @param w - Width in grid units (for clamping)
* @param h - Height in grid units (for clamping)
* @returns x and y in grid units
*/
declare function calcXY(positionParams: PositionParams, top: number, left: number, w: number, h: number): {
x: number;
y: number;
};
/**
* Calculate grid units from pixel dimensions.
*
* @param positionParams - Grid parameters
* @param width - Width in pixels
* @param height - Height in pixels
* @param x - X coordinate in grid units (for clamping)
* @param y - Y coordinate in grid units (for clamping)
* @param handle - Resize handle being used
* @returns w, h in grid units
*/
declare function calcWH(positionParams: PositionParams, width: number, height: number, x: number, y: number, handle: ResizeHandleAxis): {
w: number;
h: number;
};
/**
* Clamp a number between bounds.
*
* @param num - Number to clamp
* @param lowerBound - Minimum value
* @param upperBound - Maximum value
* @returns Clamped value
*/
declare function clamp(num: number, lowerBound: number, upperBound: number): number;
/**
* Grid cell dimension information for rendering backgrounds or overlays.
*/
interface GridCellDimensions {
/** Width of a single cell in pixels */
readonly cellWidth: number;
/** Height of a single cell in pixels */
readonly cellHeight: number;
/** Horizontal offset from container edge to first cell */
readonly offsetX: number;
/** Vertical offset from container edge to first cell */
readonly offsetY: number;
/** Horizontal gap between cells */
readonly gapX: number;
/** Vertical gap between cells */
readonly gapY: number;
/** Number of columns */
readonly cols: number;
/** Total container width */
readonly containerWidth: number;
}
/**
* Configuration for grid cell dimension calculation.
*/
interface GridCellConfig {
/** Container width in pixels */
width: number;
/** Number of columns */
cols: number;
/** Row height in pixels */
rowHeight: number;
/** Margin between items [x, y] */
margin?: readonly [number, number];
/** Container padding [x, y], defaults to margin if not specified */
containerPadding?: readonly [number, number] | null;
}
/**
* Calculate grid cell dimensions for rendering backgrounds or overlays.
*
* This function provides all the measurements needed to render a visual
* grid background that aligns with the actual grid cells.
*
* @param config - Grid configuration
* @returns Cell dimensions and offsets
*
* @example
* ```tsx
* import { calcGridCellDimensions } from 'react-grid-layout/core';
*
* const dims = calcGridCellDimensions({
* width: 1200,
* cols: 12,
* rowHeight: 30,
* margin: [10, 10],
* containerPadding: [10, 10]
* });
*
* // dims.cellWidth = 88.33...
* // dims.cellHeight = 30
* // dims.offsetX = 10 (containerPadding[0])
* // dims.offsetY = 10 (containerPadding[1])
* // dims.gapX = 10 (margin[0])
* // dims.gapY = 10 (margin[1])
* ```
*/
declare function calcGridCellDimensions(config: GridCellConfig): GridCellDimensions;
export { type GridCellDimensions as G, type PositionParams as P, calcXY as a, calcWH as b, calcGridItemPosition as c, type GridCellConfig as d, calcGridColWidth as e, calcGridItemWHPx as f, clamp as g, calcGridCellDimensions as h };
// src/core/calculate.ts
function calcGridColWidth(positionParams) {
const { margin, containerPadding, containerWidth, cols } = positionParams;
return (containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols;
}
function calcGridItemWHPx(gridUnits, colOrRowSize, marginPx) {
if (!Number.isFinite(gridUnits)) return gridUnits;
return Math.round(
colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx
);
}
function calcGridItemPosition(positionParams, x, y, w, h, dragPosition, resizePosition) {
const { margin, containerPadding, rowHeight } = positionParams;
const colWidth = calcGridColWidth(positionParams);
let width;
let height;
let top;
let left;
if (resizePosition) {
width = Math.round(resizePosition.width);
height = Math.round(resizePosition.height);
} else {
width = calcGridItemWHPx(w, colWidth, margin[0]);
height = calcGridItemWHPx(h, rowHeight, margin[1]);
}
if (dragPosition) {
top = Math.round(dragPosition.top);
left = Math.round(dragPosition.left);
} else if (resizePosition) {
top = Math.round(resizePosition.top);
left = Math.round(resizePosition.left);
} else {
top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);
left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);
}
return { top, left, width, height };
}
function calcXY(positionParams, top, left, w, h) {
const { margin, containerPadding, cols, rowHeight, maxRows } = positionParams;
const colWidth = calcGridColWidth(positionParams);
let x = Math.round((left - containerPadding[0]) / (colWidth + margin[0]));
let y = Math.round((top - containerPadding[1]) / (rowHeight + margin[1]));
x = clamp(x, 0, cols - w);
y = clamp(y, 0, maxRows - h);
return { x, y };
}
function calcWH(positionParams, width, height, x, y, handle) {
const { margin, maxRows, cols, rowHeight } = positionParams;
const colWidth = calcGridColWidth(positionParams);
const w = Math.round((width + margin[0]) / (colWidth + margin[0]));
const h = Math.round((height + margin[1]) / (rowHeight + margin[1]));
let _w = clamp(w, 0, cols - x);
let _h = clamp(h, 0, maxRows - y);
if (handle === "sw" || handle === "w" || handle === "nw") {
_w = clamp(w, 0, cols);
}
if (handle === "nw" || handle === "n" || handle === "ne") {
_h = clamp(h, 0, maxRows);
}
return { w: _w, h: _h };
}
function clamp(num, lowerBound, upperBound) {
return Math.max(Math.min(num, upperBound), lowerBound);
}
function calcGridCellDimensions(config) {
const {
width,
cols,
rowHeight,
margin = [10, 10],
containerPadding
} = config;
const padding = containerPadding ?? margin;
const cellWidth = (width - padding[0] * 2 - margin[0] * (cols - 1)) / cols;
const cellHeight = rowHeight;
return {
cellWidth,
cellHeight,
offsetX: padding[0],
offsetY: padding[1],
gapX: margin[0],
gapY: margin[1],
cols,
containerWidth: width
};
}
export { calcGridCellDimensions, calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp };
//# sourceMappingURL=chunk-2KUHNJXF.mjs.map
//# sourceMappingURL=chunk-2KUHNJXF.mjs.map
{"version":3,"sources":["../src/core/calculate.ts"],"names":[],"mappings":"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","file":"chunk-2KUHNJXF.mjs","sourcesContent":["/**\n * Grid calculation utilities.\n *\n * These functions convert between grid units and pixel positions.\n */\n\nimport type { Position, ResizeHandleAxis } from \"./types.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Parameters needed for position calculations.\n */\nexport interface PositionParams {\n readonly margin: readonly [number, number];\n readonly containerPadding: readonly [number, number];\n readonly containerWidth: number;\n readonly cols: number;\n readonly rowHeight: number;\n readonly maxRows: number;\n}\n\n// ============================================================================\n// Grid Column/Row Calculations\n// ============================================================================\n\n/**\n * Calculate the width of a single grid column in pixels.\n *\n * @param positionParams - Grid parameters\n * @returns Column width in pixels\n */\nexport function calcGridColWidth(positionParams: PositionParams): number {\n const { margin, containerPadding, containerWidth, cols } = positionParams;\n return (\n (containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols\n );\n}\n\n/**\n * Calculate the pixel size for a grid unit dimension (width or height).\n *\n * Can be called as:\n * - calcGridItemWHPx(w, colWidth, margin[0]) for width\n * - calcGridItemWHPx(h, rowHeight, margin[1]) for height\n *\n * @param gridUnits - Size in grid units\n * @param colOrRowSize - Column width or row height in pixels\n * @param marginPx - Margin between items in pixels\n * @returns Size in pixels\n */\nexport function calcGridItemWHPx(\n gridUnits: number,\n colOrRowSize: number,\n marginPx: number\n): number {\n // 0 * Infinity === NaN, which causes problems with resize constraints\n if (!Number.isFinite(gridUnits)) return gridUnits;\n return Math.round(\n colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx\n );\n}\n\n// ============================================================================\n// Position Calculations\n// ============================================================================\n\n/**\n * Calculate pixel position for a grid item.\n *\n * Returns left, top, width, height in pixels.\n *\n * @param positionParams - Grid parameters\n * @param x - X coordinate in grid units\n * @param y - Y coordinate in grid units\n * @param w - Width in grid units\n * @param h - Height in grid units\n * @param dragPosition - If present, use exact left/top from drag callbacks\n * @param resizePosition - If present, use exact dimensions from resize callbacks\n * @returns Position in pixels\n */\nexport function calcGridItemPosition(\n positionParams: PositionParams,\n x: number,\n y: number,\n w: number,\n h: number,\n dragPosition?: { top: number; left: number } | null,\n resizePosition?: {\n top: number;\n left: number;\n height: number;\n width: number;\n } | null\n): Position {\n const { margin, containerPadding, rowHeight } = positionParams;\n const colWidth = calcGridColWidth(positionParams);\n\n let width: number;\n let height: number;\n let top: number;\n let left: number;\n\n // If resizing, use the exact width and height from resize callbacks\n if (resizePosition) {\n width = Math.round(resizePosition.width);\n height = Math.round(resizePosition.height);\n } else {\n // Calculate from grid units\n width = calcGridItemWHPx(w, colWidth, margin[0]);\n height = calcGridItemWHPx(h, rowHeight, margin[1]);\n }\n\n // If dragging, use the exact left/top from drag callbacks\n if (dragPosition) {\n top = Math.round(dragPosition.top);\n left = Math.round(dragPosition.left);\n } else if (resizePosition) {\n // If resizing, use the exact left/top from resize position\n top = Math.round(resizePosition.top);\n left = Math.round(resizePosition.left);\n } else {\n // Calculate from grid units\n top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);\n left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);\n }\n\n return { top, left, width, height };\n}\n\n/**\n * Translate pixel coordinates to grid units.\n *\n * @param positionParams - Grid parameters\n * @param top - Top position in pixels (relative to parent)\n * @param left - Left position in pixels (relative to parent)\n * @param w - Width in grid units (for clamping)\n * @param h - Height in grid units (for clamping)\n * @returns x and y in grid units\n */\nexport function calcXY(\n positionParams: PositionParams,\n top: number,\n left: number,\n w: number,\n h: number\n): { x: number; y: number } {\n const { margin, containerPadding, cols, rowHeight, maxRows } = positionParams;\n const colWidth = calcGridColWidth(positionParams);\n\n // left = containerPaddingX + x * (colWidth + marginX)\n // x = (left - containerPaddingX) / (colWidth + marginX)\n let x = Math.round((left - containerPadding[0]) / (colWidth + margin[0]));\n let y = Math.round((top - containerPadding[1]) / (rowHeight + margin[1]));\n\n // Clamp to grid bounds\n x = clamp(x, 0, cols - w);\n y = clamp(y, 0, maxRows - h);\n\n return { x, y };\n}\n\n/**\n * Calculate grid units from pixel dimensions.\n *\n * @param positionParams - Grid parameters\n * @param width - Width in pixels\n * @param height - Height in pixels\n * @param x - X coordinate in grid units (for clamping)\n * @param y - Y coordinate in grid units (for clamping)\n * @param handle - Resize handle being used\n * @returns w, h in grid units\n */\nexport function calcWH(\n positionParams: PositionParams,\n width: number,\n height: number,\n x: number,\n y: number,\n handle: ResizeHandleAxis\n): { w: number; h: number } {\n const { margin, maxRows, cols, rowHeight } = positionParams;\n const colWidth = calcGridColWidth(positionParams);\n\n // width = colWidth * w - (margin * (w - 1))\n // w = (width + margin) / (colWidth + margin)\n const w = Math.round((width + margin[0]) / (colWidth + margin[0]));\n const h = Math.round((height + margin[1]) / (rowHeight + margin[1]));\n\n // Clamp based on resize handle direction\n let _w = clamp(w, 0, cols - x);\n let _h = clamp(h, 0, maxRows - y);\n\n // West handles can resize to full width\n if (handle === \"sw\" || handle === \"w\" || handle === \"nw\") {\n _w = clamp(w, 0, cols);\n }\n\n // North handles can resize to full height\n if (handle === \"nw\" || handle === \"n\" || handle === \"ne\") {\n _h = clamp(h, 0, maxRows);\n }\n\n return { w: _w, h: _h };\n}\n\n// ============================================================================\n// Utility Functions\n// ============================================================================\n\n/**\n * Clamp a number between bounds.\n *\n * @param num - Number to clamp\n * @param lowerBound - Minimum value\n * @param upperBound - Maximum value\n * @returns Clamped value\n */\nexport function clamp(\n num: number,\n lowerBound: number,\n upperBound: number\n): number {\n return Math.max(Math.min(num, upperBound), lowerBound);\n}\n\n// ============================================================================\n// Grid Background Calculations\n// ============================================================================\n\n/**\n * Grid cell dimension information for rendering backgrounds or overlays.\n */\nexport interface GridCellDimensions {\n /** Width of a single cell in pixels */\n readonly cellWidth: number;\n /** Height of a single cell in pixels */\n readonly cellHeight: number;\n /** Horizontal offset from container edge to first cell */\n readonly offsetX: number;\n /** Vertical offset from container edge to first cell */\n readonly offsetY: number;\n /** Horizontal gap between cells */\n readonly gapX: number;\n /** Vertical gap between cells */\n readonly gapY: number;\n /** Number of columns */\n readonly cols: number;\n /** Total container width */\n readonly containerWidth: number;\n}\n\n/**\n * Configuration for grid cell dimension calculation.\n */\nexport interface GridCellConfig {\n /** Container width in pixels */\n width: number;\n /** Number of columns */\n cols: number;\n /** Row height in pixels */\n rowHeight: number;\n /** Margin between items [x, y] */\n margin?: readonly [number, number];\n /** Container padding [x, y], defaults to margin if not specified */\n containerPadding?: readonly [number, number] | null;\n}\n\n/**\n * Calculate grid cell dimensions for rendering backgrounds or overlays.\n *\n * This function provides all the measurements needed to render a visual\n * grid background that aligns with the actual grid cells.\n *\n * @param config - Grid configuration\n * @returns Cell dimensions and offsets\n *\n * @example\n * ```tsx\n * import { calcGridCellDimensions } from 'react-grid-layout/core';\n *\n * const dims = calcGridCellDimensions({\n * width: 1200,\n * cols: 12,\n * rowHeight: 30,\n * margin: [10, 10],\n * containerPadding: [10, 10]\n * });\n *\n * // dims.cellWidth = 88.33...\n * // dims.cellHeight = 30\n * // dims.offsetX = 10 (containerPadding[0])\n * // dims.offsetY = 10 (containerPadding[1])\n * // dims.gapX = 10 (margin[0])\n * // dims.gapY = 10 (margin[1])\n * ```\n */\nexport function calcGridCellDimensions(\n config: GridCellConfig\n): GridCellDimensions {\n const {\n width,\n cols,\n rowHeight,\n margin = [10, 10],\n containerPadding\n } = config;\n\n // Container padding defaults to margin if not specified\n const padding = containerPadding ?? margin;\n\n // Calculate cell width: total width minus padding and gaps, divided by columns\n // Formula: width = 2*padding + cols*cellWidth + (cols-1)*gap\n // Solving for cellWidth: cellWidth = (width - 2*padding - (cols-1)*gap) / cols\n const cellWidth = (width - padding[0] * 2 - margin[0] * (cols - 1)) / cols;\n const cellHeight = rowHeight;\n\n return {\n cellWidth,\n cellHeight,\n offsetX: padding[0],\n offsetY: padding[1],\n gapX: margin[0],\n gapY: margin[1],\n cols,\n containerWidth: width\n };\n}\n"]}
'use strict';
// src/core/position.ts
function setTransform({
top,
left,
width,
height
}) {
const translate = `translate(${left}px,${top}px)`;
return {
transform: translate,
WebkitTransform: translate,
MozTransform: translate,
msTransform: translate,
OTransform: translate,
width: `${width}px`,
height: `${height}px`,
position: "absolute"
};
}
function setTopLeft({
top,
left,
width,
height
}) {
return {
top: `${top}px`,
left: `${left}px`,
width: `${width}px`,
height: `${height}px`,
position: "absolute"
};
}
function perc(num) {
return num * 100 + "%";
}
function constrainWidth(left, currentWidth, newWidth, containerWidth) {
return left + newWidth > containerWidth ? currentWidth : newWidth;
}
function constrainHeight(top, currentHeight, newHeight) {
return top < 0 ? currentHeight : newHeight;
}
function constrainLeft(left) {
return Math.max(0, left);
}
function constrainTop(top) {
return Math.max(0, top);
}
var resizeNorth = (currentSize, newSize, _containerWidth) => {
const { left, height, width } = newSize;
const top = currentSize.top - (height - currentSize.height);
return {
left,
width,
height: constrainHeight(top, currentSize.height, height),
top: constrainTop(top)
};
};
var resizeEast = (currentSize, newSize, containerWidth) => {
const { top, left, height, width } = newSize;
return {
top,
height,
width: constrainWidth(
currentSize.left,
currentSize.width,
width,
containerWidth
),
left: constrainLeft(left)
};
};
var resizeWest = (currentSize, newSize, _containerWidth) => {
const { top, height, width } = newSize;
const left = currentSize.left + currentSize.width - width;
if (left < 0) {
return {
height,
width: currentSize.left + currentSize.width,
top: constrainTop(top),
left: 0
};
}
return {
height,
width,
top: constrainTop(top),
left
};
};
var resizeSouth = (currentSize, newSize, _containerWidth) => {
const { top, left, height, width } = newSize;
return {
width,
left,
height: constrainHeight(top, currentSize.height, height),
top: constrainTop(top)
};
};
var resizeNorthEast = (currentSize, newSize, containerWidth) => resizeNorth(
currentSize,
resizeEast(currentSize, newSize, containerWidth));
var resizeNorthWest = (currentSize, newSize, containerWidth) => resizeNorth(
currentSize,
resizeWest(currentSize, newSize));
var resizeSouthEast = (currentSize, newSize, containerWidth) => resizeSouth(
currentSize,
resizeEast(currentSize, newSize, containerWidth));
var resizeSouthWest = (currentSize, newSize, containerWidth) => resizeSouth(
currentSize,
resizeWest(currentSize, newSize));
var resizeHandlerMap = {
n: resizeNorth,
ne: resizeNorthEast,
e: resizeEast,
se: resizeSouthEast,
s: resizeSouth,
sw: resizeSouthWest,
w: resizeWest,
nw: resizeNorthWest
};
function resizeItemInDirection(direction, currentSize, newSize, containerWidth) {
const handler = resizeHandlerMap[direction];
if (!handler) {
return newSize;
}
return handler(currentSize, { ...currentSize, ...newSize }, containerWidth);
}
var transformStrategy = {
type: "transform",
scale: 1,
calcStyle(pos) {
return setTransform(pos);
},
calcDragPosition(clientX, clientY, offsetX, offsetY) {
return {
left: clientX - offsetX,
top: clientY - offsetY
};
}
};
var absoluteStrategy = {
type: "absolute",
scale: 1,
calcStyle(pos) {
return setTopLeft(pos);
},
calcDragPosition(clientX, clientY, offsetX, offsetY) {
return {
left: clientX - offsetX,
top: clientY - offsetY
};
}
};
function createScaledStrategy(scale) {
return {
type: "transform",
scale,
calcStyle(pos) {
return setTransform(pos);
},
calcDragPosition(clientX, clientY, offsetX, offsetY) {
return {
left: (clientX - offsetX) / scale,
top: (clientY - offsetY) / scale
};
}
};
}
var defaultPositionStrategy = transformStrategy;
// src/core/types.ts
var defaultGridConfig = {
cols: 12,
rowHeight: 150,
margin: [10, 10],
containerPadding: null,
maxRows: Infinity
};
var defaultDragConfig = {
enabled: true,
bounded: false,
threshold: 3
};
var defaultResizeConfig = {
enabled: true,
handles: ["se"]
};
var defaultDropConfig = {
enabled: false,
defaultItem: { w: 1, h: 1 }
};
// src/core/collision.ts
function collides(l1, l2) {
if (l1.i === l2.i) return false;
if (l1.x + l1.w <= l2.x) return false;
if (l1.x >= l2.x + l2.w) return false;
if (l1.y + l1.h <= l2.y) return false;
if (l1.y >= l2.y + l2.h) return false;
return true;
}
function getFirstCollision(layout, layoutItem) {
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0 && collides(item, layoutItem)) {
return item;
}
}
return void 0;
}
function getAllCollisions(layout, layoutItem) {
return layout.filter((l) => collides(l, layoutItem));
}
// src/core/sort.ts
function sortLayoutItems(layout, compactType) {
if (compactType === "horizontal") {
return sortLayoutItemsByColRow(layout);
}
if (compactType === "vertical") {
return sortLayoutItemsByRowCol(layout);
}
return [...layout];
}
function sortLayoutItemsByRowCol(layout) {
return [...layout].sort((a, b) => {
if (a.y !== b.y) {
return a.y - b.y;
}
return a.x - b.x;
});
}
function sortLayoutItemsByColRow(layout) {
return [...layout].sort((a, b) => {
if (a.x !== b.x) {
return a.x - b.x;
}
return a.y - b.y;
});
}
// src/core/layout.ts
function bottom(layout) {
let max = 0;
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0) {
const bottomY = item.y + item.h;
if (bottomY > max) max = bottomY;
}
}
return max;
}
function getLayoutItem(layout, id) {
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0 && item.i === id) {
return item;
}
}
return void 0;
}
function getStatics(layout) {
return layout.filter((l) => l.static === true);
}
function cloneLayoutItem(layoutItem) {
return {
i: layoutItem.i,
x: layoutItem.x,
y: layoutItem.y,
w: layoutItem.w,
h: layoutItem.h,
minW: layoutItem.minW,
maxW: layoutItem.maxW,
minH: layoutItem.minH,
maxH: layoutItem.maxH,
moved: Boolean(layoutItem.moved),
static: Boolean(layoutItem.static),
isDraggable: layoutItem.isDraggable,
isResizable: layoutItem.isResizable,
resizeHandles: layoutItem.resizeHandles,
isBounded: layoutItem.isBounded
};
}
function cloneLayout(layout) {
const newLayout = new Array(layout.length);
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0) {
newLayout[i] = cloneLayoutItem(item);
}
}
return newLayout;
}
function modifyLayout(layout, layoutItem) {
const newLayout = new Array(layout.length);
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0) {
if (layoutItem.i === item.i) {
newLayout[i] = layoutItem;
} else {
newLayout[i] = item;
}
}
}
return newLayout;
}
function withLayoutItem(layout, itemKey, cb) {
let item = getLayoutItem(layout, itemKey);
if (!item) {
return [[...layout], null];
}
item = cb(cloneLayoutItem(item));
const newLayout = modifyLayout(layout, item);
return [newLayout, item];
}
function correctBounds(layout, bounds) {
const collidesWith = getStatics(layout);
for (let i = 0; i < layout.length; i++) {
const l = layout[i];
if (l === void 0) continue;
if (l.x + l.w > bounds.cols) {
l.x = bounds.cols - l.w;
}
if (l.x < 0) {
l.x = 0;
l.w = bounds.cols;
}
if (!l.static) {
collidesWith.push(l);
} else {
while (getFirstCollision(collidesWith, l)) {
l.y++;
}
}
}
return layout;
}
function moveElement(layout, l, x, y, isUserAction, preventCollision, compactType, cols, allowOverlap) {
if (l.static && l.isDraggable !== true) {
return [...layout];
}
if (l.y === y && l.x === x) {
return [...layout];
}
const oldX = l.x;
const oldY = l.y;
if (typeof x === "number") l.x = x;
if (typeof y === "number") l.y = y;
l.moved = true;
let sorted = sortLayoutItems(layout, compactType);
const movingUp = compactType === "vertical" && typeof y === "number" ? oldY >= y : compactType === "horizontal" && typeof x === "number" ? oldX >= x : false;
if (movingUp) {
sorted = sorted.reverse();
}
const collisions = getAllCollisions(sorted, l);
const hasCollisions = collisions.length > 0;
if (hasCollisions && allowOverlap) {
return cloneLayout(layout);
}
if (hasCollisions && preventCollision) {
l.x = oldX;
l.y = oldY;
l.moved = false;
return layout;
}
let resultLayout = [...layout];
for (let i = 0; i < collisions.length; i++) {
const collision = collisions[i];
if (collision === void 0) continue;
if (collision.moved) continue;
if (collision.static) {
resultLayout = moveElementAwayFromCollision(
resultLayout,
collision,
l,
isUserAction,
compactType);
} else {
resultLayout = moveElementAwayFromCollision(
resultLayout,
l,
collision,
isUserAction,
compactType);
}
}
return resultLayout;
}
function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAction, compactType, cols) {
const compactH = compactType === "horizontal";
const compactV = compactType === "vertical";
const preventCollision = collidesWith.static;
if (isUserAction) {
isUserAction = false;
const fakeItem = {
x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,
y: compactV ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
w: itemToMove.w,
h: itemToMove.h,
i: "-1"
};
const firstCollision = getFirstCollision(layout, fakeItem);
const collisionNorth = firstCollision !== void 0 && firstCollision.y + firstCollision.h > collidesWith.y;
const collisionWest = firstCollision !== void 0 && collidesWith.x + collidesWith.w > firstCollision.x;
if (!firstCollision) {
return moveElement(
layout,
itemToMove,
compactH ? fakeItem.x : void 0,
compactV ? fakeItem.y : void 0,
isUserAction,
preventCollision,
compactType);
}
if (collisionNorth && compactV) {
return moveElement(
layout,
itemToMove,
void 0,
itemToMove.y + 1,
isUserAction,
preventCollision,
compactType);
}
if (collisionNorth && compactType === null) {
collidesWith.y = itemToMove.y;
itemToMove.y = itemToMove.y + itemToMove.h;
return [...layout];
}
if (collisionWest && compactH) {
return moveElement(
layout,
collidesWith,
itemToMove.x,
void 0,
isUserAction,
preventCollision,
compactType);
}
}
const newX = compactH ? itemToMove.x + 1 : void 0;
const newY = compactV ? itemToMove.y + 1 : void 0;
if (newX === void 0 && newY === void 0) {
return [...layout];
}
return moveElement(
layout,
itemToMove,
newX,
newY,
isUserAction,
preventCollision,
compactType);
}
function validateLayout(layout, contextName = "Layout") {
const requiredProps = ["x", "y", "w", "h"];
if (!Array.isArray(layout)) {
throw new Error(`${contextName} must be an array!`);
}
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item === void 0) continue;
for (const key of requiredProps) {
const value = item[key];
if (typeof value !== "number" || Number.isNaN(value)) {
throw new Error(
`ReactGridLayout: ${contextName}[${i}].${key} must be a number! Received: ${String(value)} (${typeof value})`
);
}
}
if (item.i !== void 0 && typeof item.i !== "string") {
throw new Error(
`ReactGridLayout: ${contextName}[${i}].i must be a string! Received: ${String(item.i)} (${typeof item.i})`
);
}
}
}
// src/core/compact-compat.ts
function getStatics2(layout) {
return layout.filter((l) => l.static);
}
var heightWidth = { x: "w", y: "h" };
function resolveCompactionCollision(layout, item, moveToCoord, axis) {
const sizeProp = heightWidth[axis];
item[axis] += 1;
const itemIndex = layout.findIndex((l) => l.i === item.i);
for (let i = itemIndex + 1; i < layout.length; i++) {
const otherItem = layout[i];
if (otherItem === void 0) continue;
if (otherItem.static) continue;
if (otherItem.y > item.y + item.h) break;
if (collides(item, otherItem)) {
resolveCompactionCollision(
layout,
otherItem,
moveToCoord + item[sizeProp],
axis
);
}
}
item[axis] = moveToCoord;
}
function compactItemInternal(compareWith, l, compactType, cols, fullLayout, allowOverlap, b) {
const compactV = compactType === "vertical";
const compactH = compactType === "horizontal";
if (compactV) {
if (typeof b === "number") {
l.y = Math.min(b, l.y);
} else {
l.y = Math.min(bottom(compareWith), l.y);
}
while (l.y > 0 && !getFirstCollision(compareWith, l)) {
l.y--;
}
} else if (compactH) {
while (l.x > 0 && !getFirstCollision(compareWith, l)) {
l.x--;
}
}
let collision;
while ((collision = getFirstCollision(compareWith, l)) !== void 0 && !(compactType === null && allowOverlap)) {
if (compactH) {
resolveCompactionCollision(fullLayout, l, collision.x + collision.w, "x");
} else {
resolveCompactionCollision(fullLayout, l, collision.y + collision.h, "y");
}
if (compactH && l.x + l.w > cols) {
l.x = cols - l.w;
l.y++;
while (l.x > 0 && !getFirstCollision(compareWith, l)) {
l.x--;
}
}
}
l.y = Math.max(l.y, 0);
l.x = Math.max(l.x, 0);
return l;
}
function compact(layout, compactType, cols, allowOverlap) {
const compareWith = getStatics2(layout);
let b = bottom(compareWith);
const sorted = sortLayoutItems(layout, compactType);
const out = new Array(layout.length);
for (let i = 0; i < sorted.length; i++) {
const sortedItem = sorted[i];
if (sortedItem === void 0) continue;
let l = cloneLayoutItem(sortedItem);
if (!l.static) {
l = compactItemInternal(
compareWith,
l,
compactType,
cols,
sorted,
allowOverlap,
b
);
b = Math.max(b, l.y + l.h);
compareWith.push(l);
}
const originalIndex = layout.indexOf(sortedItem);
out[originalIndex] = l;
l.moved = false;
}
return out;
}
function compactItem(compareWith, l, compactType, cols, fullLayout, allowOverlap, maxY) {
return compactItemInternal(
compareWith,
cloneLayoutItem(l),
compactType,
cols,
fullLayout,
allowOverlap,
maxY
);
}
// src/core/compactors.ts
function resolveCompactionCollision2(layout, item, moveToCoord, axis) {
const sizeProp = axis === "x" ? "w" : "h";
item[axis] += 1;
const itemIndex = layout.findIndex((l) => l.i === item.i);
for (let i = itemIndex + 1; i < layout.length; i++) {
const otherItem = layout[i];
if (otherItem === void 0) continue;
if (otherItem.static) continue;
if (otherItem.y > item.y + item.h) break;
if (collides(item, otherItem)) {
resolveCompactionCollision2(
layout,
otherItem,
moveToCoord + item[sizeProp],
axis
);
}
}
item[axis] = moveToCoord;
}
function compactItemVertical(compareWith, l, fullLayout, maxY) {
l.y = Math.min(maxY, l.y);
while (l.y > 0 && !getFirstCollision(compareWith, l)) {
l.y--;
}
let collision;
while ((collision = getFirstCollision(compareWith, l)) !== void 0) {
resolveCompactionCollision2(fullLayout, l, collision.y + collision.h, "y");
}
l.y = Math.max(l.y, 0);
return l;
}
function compactItemHorizontal(compareWith, l, cols, fullLayout) {
while (l.x > 0 && !getFirstCollision(compareWith, l)) {
l.x--;
}
let collision;
while ((collision = getFirstCollision(compareWith, l)) !== void 0) {
resolveCompactionCollision2(fullLayout, l, collision.x + collision.w, "x");
if (l.x + l.w > cols) {
l.x = cols - l.w;
l.y++;
while (l.x > 0 && !getFirstCollision(compareWith, l)) {
l.x--;
}
}
}
l.x = Math.max(l.x, 0);
return l;
}
var verticalCompactor = {
type: "vertical",
allowOverlap: false,
compact(layout, _cols) {
const compareWith = getStatics(layout);
let maxY = bottom(compareWith);
const sorted = sortLayoutItemsByRowCol(layout);
const out = new Array(layout.length);
for (let i = 0; i < sorted.length; i++) {
const sortedItem = sorted[i];
if (sortedItem === void 0) continue;
let l = cloneLayoutItem(sortedItem);
if (!l.static) {
l = compactItemVertical(compareWith, l, sorted, maxY);
maxY = Math.max(maxY, l.y + l.h);
compareWith.push(l);
}
const originalIndex = layout.indexOf(sortedItem);
out[originalIndex] = l;
l.moved = false;
}
return out;
},
onMove(layout, item, x, y, _cols) {
const newLayout = cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (movedItem) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
}
return newLayout;
}
};
var horizontalCompactor = {
type: "horizontal",
allowOverlap: false,
compact(layout, cols) {
const compareWith = getStatics(layout);
const sorted = sortLayoutItemsByColRow(layout);
const out = new Array(layout.length);
for (let i = 0; i < sorted.length; i++) {
const sortedItem = sorted[i];
if (sortedItem === void 0) continue;
let l = cloneLayoutItem(sortedItem);
if (!l.static) {
l = compactItemHorizontal(compareWith, l, cols, sorted);
compareWith.push(l);
}
const originalIndex = layout.indexOf(sortedItem);
out[originalIndex] = l;
l.moved = false;
}
return out;
},
onMove(layout, item, x, y, _cols) {
const newLayout = cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (movedItem) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
}
return newLayout;
}
};
var noCompactor = {
type: null,
allowOverlap: false,
compact(layout, _cols) {
return cloneLayout(layout);
},
onMove(layout, item, x, y, _cols) {
const newLayout = cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (movedItem) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
}
return newLayout;
}
};
var verticalOverlapCompactor = {
...verticalCompactor,
allowOverlap: true,
compact(layout, _cols) {
return cloneLayout(layout);
}
};
var horizontalOverlapCompactor = {
...horizontalCompactor,
allowOverlap: true,
compact(layout, _cols) {
return cloneLayout(layout);
}
};
function getCompactor(compactType, allowOverlap = false, preventCollision = false) {
let baseCompactor;
if (allowOverlap) {
if (compactType === "vertical") baseCompactor = verticalOverlapCompactor;
else if (compactType === "horizontal")
baseCompactor = horizontalOverlapCompactor;
else baseCompactor = noCompactor;
} else {
if (compactType === "vertical") baseCompactor = verticalCompactor;
else if (compactType === "horizontal") baseCompactor = horizontalCompactor;
else baseCompactor = noCompactor;
}
if (preventCollision) {
return { ...baseCompactor, preventCollision };
}
return baseCompactor;
}
// src/core/responsive.ts
function sortBreakpoints(breakpoints) {
const keys = Object.keys(breakpoints);
return keys.sort((a, b) => breakpoints[a] - breakpoints[b]);
}
function getBreakpointFromWidth(breakpoints, width) {
const sorted = sortBreakpoints(breakpoints);
let matching = sorted[0];
if (matching === void 0) {
throw new Error("No breakpoints defined");
}
for (let i = 1; i < sorted.length; i++) {
const breakpointName = sorted[i];
if (breakpointName === void 0) continue;
const breakpointWidth = breakpoints[breakpointName];
if (width > breakpointWidth) {
matching = breakpointName;
}
}
return matching;
}
function getColsFromBreakpoint(breakpoint, cols) {
const colCount = cols[breakpoint];
if (colCount === void 0) {
throw new Error(
`ResponsiveReactGridLayout: \`cols\` entry for breakpoint ${String(breakpoint)} is missing!`
);
}
return colCount;
}
function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBreakpoint, cols, compactType) {
const existingLayout = layouts[breakpoint];
if (existingLayout) {
return cloneLayout(existingLayout);
}
let layout = layouts[lastBreakpoint];
const breakpointsSorted = sortBreakpoints(breakpoints);
const breakpointsAbove = breakpointsSorted.slice(
breakpointsSorted.indexOf(breakpoint)
);
for (let i = 0; i < breakpointsAbove.length; i++) {
const b = breakpointsAbove[i];
if (b === void 0) continue;
const layoutForBreakpoint = layouts[b];
if (layoutForBreakpoint) {
layout = layoutForBreakpoint;
break;
}
}
const clonedLayout = cloneLayout(layout || []);
return compact(correctBounds(clonedLayout, { cols }), compactType, cols);
}
function getIndentationValue(value, breakpoint) {
if (Array.isArray(value)) {
return value;
}
const breakpointMap = value;
const breakpointValue = breakpointMap[breakpoint];
if (breakpointValue !== void 0) {
return breakpointValue;
}
const keys = Object.keys(breakpointMap);
for (const key of keys) {
const v = breakpointMap[key];
if (v !== void 0) {
return v;
}
}
return [10, 10];
}
exports.absoluteStrategy = absoluteStrategy;
exports.bottom = bottom;
exports.cloneLayout = cloneLayout;
exports.cloneLayoutItem = cloneLayoutItem;
exports.collides = collides;
exports.compact = compact;
exports.compactItem = compactItem;
exports.compactItemHorizontal = compactItemHorizontal;
exports.compactItemVertical = compactItemVertical;
exports.correctBounds = correctBounds;
exports.createScaledStrategy = createScaledStrategy;
exports.defaultDragConfig = defaultDragConfig;
exports.defaultDropConfig = defaultDropConfig;
exports.defaultGridConfig = defaultGridConfig;
exports.defaultPositionStrategy = defaultPositionStrategy;
exports.defaultResizeConfig = defaultResizeConfig;
exports.findOrGenerateResponsiveLayout = findOrGenerateResponsiveLayout;
exports.getAllCollisions = getAllCollisions;
exports.getBreakpointFromWidth = getBreakpointFromWidth;
exports.getColsFromBreakpoint = getColsFromBreakpoint;
exports.getCompactor = getCompactor;
exports.getFirstCollision = getFirstCollision;
exports.getIndentationValue = getIndentationValue;
exports.getLayoutItem = getLayoutItem;
exports.getStatics = getStatics;
exports.horizontalCompactor = horizontalCompactor;
exports.horizontalOverlapCompactor = horizontalOverlapCompactor;
exports.modifyLayout = modifyLayout;
exports.moveElement = moveElement;
exports.moveElementAwayFromCollision = moveElementAwayFromCollision;
exports.noCompactor = noCompactor;
exports.perc = perc;
exports.resizeItemInDirection = resizeItemInDirection;
exports.resolveCompactionCollision = resolveCompactionCollision2;
exports.setTopLeft = setTopLeft;
exports.setTransform = setTransform;
exports.sortBreakpoints = sortBreakpoints;
exports.sortLayoutItems = sortLayoutItems;
exports.sortLayoutItemsByColRow = sortLayoutItemsByColRow;
exports.sortLayoutItemsByRowCol = sortLayoutItemsByRowCol;
exports.transformStrategy = transformStrategy;
exports.validateLayout = validateLayout;
exports.verticalCompactor = verticalCompactor;
exports.verticalOverlapCompactor = verticalOverlapCompactor;
exports.withLayoutItem = withLayoutItem;
//# sourceMappingURL=chunk-3WO4SAYB.js.map
//# sourceMappingURL=chunk-3WO4SAYB.js.map

Sorry, the diff of this file is too big to display

// src/core/position.ts
function setTransform({
top,
left,
width,
height
}) {
const translate = `translate(${left}px,${top}px)`;
return {
transform: translate,
WebkitTransform: translate,
MozTransform: translate,
msTransform: translate,
OTransform: translate,
width: `${width}px`,
height: `${height}px`,
position: "absolute"
};
}
function setTopLeft({
top,
left,
width,
height
}) {
return {
top: `${top}px`,
left: `${left}px`,
width: `${width}px`,
height: `${height}px`,
position: "absolute"
};
}
function perc(num) {
return num * 100 + "%";
}
function constrainWidth(left, currentWidth, newWidth, containerWidth) {
return left + newWidth > containerWidth ? currentWidth : newWidth;
}
function constrainHeight(top, currentHeight, newHeight) {
return top < 0 ? currentHeight : newHeight;
}
function constrainLeft(left) {
return Math.max(0, left);
}
function constrainTop(top) {
return Math.max(0, top);
}
var resizeNorth = (currentSize, newSize, _containerWidth) => {
const { left, height, width } = newSize;
const top = currentSize.top - (height - currentSize.height);
return {
left,
width,
height: constrainHeight(top, currentSize.height, height),
top: constrainTop(top)
};
};
var resizeEast = (currentSize, newSize, containerWidth) => {
const { top, left, height, width } = newSize;
return {
top,
height,
width: constrainWidth(
currentSize.left,
currentSize.width,
width,
containerWidth
),
left: constrainLeft(left)
};
};
var resizeWest = (currentSize, newSize, _containerWidth) => {
const { top, height, width } = newSize;
const left = currentSize.left + currentSize.width - width;
if (left < 0) {
return {
height,
width: currentSize.left + currentSize.width,
top: constrainTop(top),
left: 0
};
}
return {
height,
width,
top: constrainTop(top),
left
};
};
var resizeSouth = (currentSize, newSize, _containerWidth) => {
const { top, left, height, width } = newSize;
return {
width,
left,
height: constrainHeight(top, currentSize.height, height),
top: constrainTop(top)
};
};
var resizeNorthEast = (currentSize, newSize, containerWidth) => resizeNorth(
currentSize,
resizeEast(currentSize, newSize, containerWidth));
var resizeNorthWest = (currentSize, newSize, containerWidth) => resizeNorth(
currentSize,
resizeWest(currentSize, newSize));
var resizeSouthEast = (currentSize, newSize, containerWidth) => resizeSouth(
currentSize,
resizeEast(currentSize, newSize, containerWidth));
var resizeSouthWest = (currentSize, newSize, containerWidth) => resizeSouth(
currentSize,
resizeWest(currentSize, newSize));
var resizeHandlerMap = {
n: resizeNorth,
ne: resizeNorthEast,
e: resizeEast,
se: resizeSouthEast,
s: resizeSouth,
sw: resizeSouthWest,
w: resizeWest,
nw: resizeNorthWest
};
function resizeItemInDirection(direction, currentSize, newSize, containerWidth) {
const handler = resizeHandlerMap[direction];
if (!handler) {
return newSize;
}
return handler(currentSize, { ...currentSize, ...newSize }, containerWidth);
}
var transformStrategy = {
type: "transform",
scale: 1,
calcStyle(pos) {
return setTransform(pos);
},
calcDragPosition(clientX, clientY, offsetX, offsetY) {
return {
left: clientX - offsetX,
top: clientY - offsetY
};
}
};
var absoluteStrategy = {
type: "absolute",
scale: 1,
calcStyle(pos) {
return setTopLeft(pos);
},
calcDragPosition(clientX, clientY, offsetX, offsetY) {
return {
left: clientX - offsetX,
top: clientY - offsetY
};
}
};
function createScaledStrategy(scale) {
return {
type: "transform",
scale,
calcStyle(pos) {
return setTransform(pos);
},
calcDragPosition(clientX, clientY, offsetX, offsetY) {
return {
left: (clientX - offsetX) / scale,
top: (clientY - offsetY) / scale
};
}
};
}
var defaultPositionStrategy = transformStrategy;
// src/core/types.ts
var defaultGridConfig = {
cols: 12,
rowHeight: 150,
margin: [10, 10],
containerPadding: null,
maxRows: Infinity
};
var defaultDragConfig = {
enabled: true,
bounded: false,
threshold: 3
};
var defaultResizeConfig = {
enabled: true,
handles: ["se"]
};
var defaultDropConfig = {
enabled: false,
defaultItem: { w: 1, h: 1 }
};
// src/core/collision.ts
function collides(l1, l2) {
if (l1.i === l2.i) return false;
if (l1.x + l1.w <= l2.x) return false;
if (l1.x >= l2.x + l2.w) return false;
if (l1.y + l1.h <= l2.y) return false;
if (l1.y >= l2.y + l2.h) return false;
return true;
}
function getFirstCollision(layout, layoutItem) {
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0 && collides(item, layoutItem)) {
return item;
}
}
return void 0;
}
function getAllCollisions(layout, layoutItem) {
return layout.filter((l) => collides(l, layoutItem));
}
// src/core/sort.ts
function sortLayoutItems(layout, compactType) {
if (compactType === "horizontal") {
return sortLayoutItemsByColRow(layout);
}
if (compactType === "vertical") {
return sortLayoutItemsByRowCol(layout);
}
return [...layout];
}
function sortLayoutItemsByRowCol(layout) {
return [...layout].sort((a, b) => {
if (a.y !== b.y) {
return a.y - b.y;
}
return a.x - b.x;
});
}
function sortLayoutItemsByColRow(layout) {
return [...layout].sort((a, b) => {
if (a.x !== b.x) {
return a.x - b.x;
}
return a.y - b.y;
});
}
// src/core/layout.ts
function bottom(layout) {
let max = 0;
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0) {
const bottomY = item.y + item.h;
if (bottomY > max) max = bottomY;
}
}
return max;
}
function getLayoutItem(layout, id) {
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0 && item.i === id) {
return item;
}
}
return void 0;
}
function getStatics(layout) {
return layout.filter((l) => l.static === true);
}
function cloneLayoutItem(layoutItem) {
return {
i: layoutItem.i,
x: layoutItem.x,
y: layoutItem.y,
w: layoutItem.w,
h: layoutItem.h,
minW: layoutItem.minW,
maxW: layoutItem.maxW,
minH: layoutItem.minH,
maxH: layoutItem.maxH,
moved: Boolean(layoutItem.moved),
static: Boolean(layoutItem.static),
isDraggable: layoutItem.isDraggable,
isResizable: layoutItem.isResizable,
resizeHandles: layoutItem.resizeHandles,
isBounded: layoutItem.isBounded
};
}
function cloneLayout(layout) {
const newLayout = new Array(layout.length);
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0) {
newLayout[i] = cloneLayoutItem(item);
}
}
return newLayout;
}
function modifyLayout(layout, layoutItem) {
const newLayout = new Array(layout.length);
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item !== void 0) {
if (layoutItem.i === item.i) {
newLayout[i] = layoutItem;
} else {
newLayout[i] = item;
}
}
}
return newLayout;
}
function withLayoutItem(layout, itemKey, cb) {
let item = getLayoutItem(layout, itemKey);
if (!item) {
return [[...layout], null];
}
item = cb(cloneLayoutItem(item));
const newLayout = modifyLayout(layout, item);
return [newLayout, item];
}
function correctBounds(layout, bounds) {
const collidesWith = getStatics(layout);
for (let i = 0; i < layout.length; i++) {
const l = layout[i];
if (l === void 0) continue;
if (l.x + l.w > bounds.cols) {
l.x = bounds.cols - l.w;
}
if (l.x < 0) {
l.x = 0;
l.w = bounds.cols;
}
if (!l.static) {
collidesWith.push(l);
} else {
while (getFirstCollision(collidesWith, l)) {
l.y++;
}
}
}
return layout;
}
function moveElement(layout, l, x, y, isUserAction, preventCollision, compactType, cols, allowOverlap) {
if (l.static && l.isDraggable !== true) {
return [...layout];
}
if (l.y === y && l.x === x) {
return [...layout];
}
const oldX = l.x;
const oldY = l.y;
if (typeof x === "number") l.x = x;
if (typeof y === "number") l.y = y;
l.moved = true;
let sorted = sortLayoutItems(layout, compactType);
const movingUp = compactType === "vertical" && typeof y === "number" ? oldY >= y : compactType === "horizontal" && typeof x === "number" ? oldX >= x : false;
if (movingUp) {
sorted = sorted.reverse();
}
const collisions = getAllCollisions(sorted, l);
const hasCollisions = collisions.length > 0;
if (hasCollisions && allowOverlap) {
return cloneLayout(layout);
}
if (hasCollisions && preventCollision) {
l.x = oldX;
l.y = oldY;
l.moved = false;
return layout;
}
let resultLayout = [...layout];
for (let i = 0; i < collisions.length; i++) {
const collision = collisions[i];
if (collision === void 0) continue;
if (collision.moved) continue;
if (collision.static) {
resultLayout = moveElementAwayFromCollision(
resultLayout,
collision,
l,
isUserAction,
compactType);
} else {
resultLayout = moveElementAwayFromCollision(
resultLayout,
l,
collision,
isUserAction,
compactType);
}
}
return resultLayout;
}
function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAction, compactType, cols) {
const compactH = compactType === "horizontal";
const compactV = compactType === "vertical";
const preventCollision = collidesWith.static;
if (isUserAction) {
isUserAction = false;
const fakeItem = {
x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,
y: compactV ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
w: itemToMove.w,
h: itemToMove.h,
i: "-1"
};
const firstCollision = getFirstCollision(layout, fakeItem);
const collisionNorth = firstCollision !== void 0 && firstCollision.y + firstCollision.h > collidesWith.y;
const collisionWest = firstCollision !== void 0 && collidesWith.x + collidesWith.w > firstCollision.x;
if (!firstCollision) {
return moveElement(
layout,
itemToMove,
compactH ? fakeItem.x : void 0,
compactV ? fakeItem.y : void 0,
isUserAction,
preventCollision,
compactType);
}
if (collisionNorth && compactV) {
return moveElement(
layout,
itemToMove,
void 0,
itemToMove.y + 1,
isUserAction,
preventCollision,
compactType);
}
if (collisionNorth && compactType === null) {
collidesWith.y = itemToMove.y;
itemToMove.y = itemToMove.y + itemToMove.h;
return [...layout];
}
if (collisionWest && compactH) {
return moveElement(
layout,
collidesWith,
itemToMove.x,
void 0,
isUserAction,
preventCollision,
compactType);
}
}
const newX = compactH ? itemToMove.x + 1 : void 0;
const newY = compactV ? itemToMove.y + 1 : void 0;
if (newX === void 0 && newY === void 0) {
return [...layout];
}
return moveElement(
layout,
itemToMove,
newX,
newY,
isUserAction,
preventCollision,
compactType);
}
function validateLayout(layout, contextName = "Layout") {
const requiredProps = ["x", "y", "w", "h"];
if (!Array.isArray(layout)) {
throw new Error(`${contextName} must be an array!`);
}
for (let i = 0; i < layout.length; i++) {
const item = layout[i];
if (item === void 0) continue;
for (const key of requiredProps) {
const value = item[key];
if (typeof value !== "number" || Number.isNaN(value)) {
throw new Error(
`ReactGridLayout: ${contextName}[${i}].${key} must be a number! Received: ${String(value)} (${typeof value})`
);
}
}
if (item.i !== void 0 && typeof item.i !== "string") {
throw new Error(
`ReactGridLayout: ${contextName}[${i}].i must be a string! Received: ${String(item.i)} (${typeof item.i})`
);
}
}
}
// src/core/compact-compat.ts
function getStatics2(layout) {
return layout.filter((l) => l.static);
}
var heightWidth = { x: "w", y: "h" };
function resolveCompactionCollision(layout, item, moveToCoord, axis) {
const sizeProp = heightWidth[axis];
item[axis] += 1;
const itemIndex = layout.findIndex((l) => l.i === item.i);
for (let i = itemIndex + 1; i < layout.length; i++) {
const otherItem = layout[i];
if (otherItem === void 0) continue;
if (otherItem.static) continue;
if (otherItem.y > item.y + item.h) break;
if (collides(item, otherItem)) {
resolveCompactionCollision(
layout,
otherItem,
moveToCoord + item[sizeProp],
axis
);
}
}
item[axis] = moveToCoord;
}
function compactItemInternal(compareWith, l, compactType, cols, fullLayout, allowOverlap, b) {
const compactV = compactType === "vertical";
const compactH = compactType === "horizontal";
if (compactV) {
if (typeof b === "number") {
l.y = Math.min(b, l.y);
} else {
l.y = Math.min(bottom(compareWith), l.y);
}
while (l.y > 0 && !getFirstCollision(compareWith, l)) {
l.y--;
}
} else if (compactH) {
while (l.x > 0 && !getFirstCollision(compareWith, l)) {
l.x--;
}
}
let collision;
while ((collision = getFirstCollision(compareWith, l)) !== void 0 && !(compactType === null && allowOverlap)) {
if (compactH) {
resolveCompactionCollision(fullLayout, l, collision.x + collision.w, "x");
} else {
resolveCompactionCollision(fullLayout, l, collision.y + collision.h, "y");
}
if (compactH && l.x + l.w > cols) {
l.x = cols - l.w;
l.y++;
while (l.x > 0 && !getFirstCollision(compareWith, l)) {
l.x--;
}
}
}
l.y = Math.max(l.y, 0);
l.x = Math.max(l.x, 0);
return l;
}
function compact(layout, compactType, cols, allowOverlap) {
const compareWith = getStatics2(layout);
let b = bottom(compareWith);
const sorted = sortLayoutItems(layout, compactType);
const out = new Array(layout.length);
for (let i = 0; i < sorted.length; i++) {
const sortedItem = sorted[i];
if (sortedItem === void 0) continue;
let l = cloneLayoutItem(sortedItem);
if (!l.static) {
l = compactItemInternal(
compareWith,
l,
compactType,
cols,
sorted,
allowOverlap,
b
);
b = Math.max(b, l.y + l.h);
compareWith.push(l);
}
const originalIndex = layout.indexOf(sortedItem);
out[originalIndex] = l;
l.moved = false;
}
return out;
}
function compactItem(compareWith, l, compactType, cols, fullLayout, allowOverlap, maxY) {
return compactItemInternal(
compareWith,
cloneLayoutItem(l),
compactType,
cols,
fullLayout,
allowOverlap,
maxY
);
}
// src/core/compactors.ts
function resolveCompactionCollision2(layout, item, moveToCoord, axis) {
const sizeProp = axis === "x" ? "w" : "h";
item[axis] += 1;
const itemIndex = layout.findIndex((l) => l.i === item.i);
for (let i = itemIndex + 1; i < layout.length; i++) {
const otherItem = layout[i];
if (otherItem === void 0) continue;
if (otherItem.static) continue;
if (otherItem.y > item.y + item.h) break;
if (collides(item, otherItem)) {
resolveCompactionCollision2(
layout,
otherItem,
moveToCoord + item[sizeProp],
axis
);
}
}
item[axis] = moveToCoord;
}
function compactItemVertical(compareWith, l, fullLayout, maxY) {
l.y = Math.min(maxY, l.y);
while (l.y > 0 && !getFirstCollision(compareWith, l)) {
l.y--;
}
let collision;
while ((collision = getFirstCollision(compareWith, l)) !== void 0) {
resolveCompactionCollision2(fullLayout, l, collision.y + collision.h, "y");
}
l.y = Math.max(l.y, 0);
return l;
}
function compactItemHorizontal(compareWith, l, cols, fullLayout) {
while (l.x > 0 && !getFirstCollision(compareWith, l)) {
l.x--;
}
let collision;
while ((collision = getFirstCollision(compareWith, l)) !== void 0) {
resolveCompactionCollision2(fullLayout, l, collision.x + collision.w, "x");
if (l.x + l.w > cols) {
l.x = cols - l.w;
l.y++;
while (l.x > 0 && !getFirstCollision(compareWith, l)) {
l.x--;
}
}
}
l.x = Math.max(l.x, 0);
return l;
}
var verticalCompactor = {
type: "vertical",
allowOverlap: false,
compact(layout, _cols) {
const compareWith = getStatics(layout);
let maxY = bottom(compareWith);
const sorted = sortLayoutItemsByRowCol(layout);
const out = new Array(layout.length);
for (let i = 0; i < sorted.length; i++) {
const sortedItem = sorted[i];
if (sortedItem === void 0) continue;
let l = cloneLayoutItem(sortedItem);
if (!l.static) {
l = compactItemVertical(compareWith, l, sorted, maxY);
maxY = Math.max(maxY, l.y + l.h);
compareWith.push(l);
}
const originalIndex = layout.indexOf(sortedItem);
out[originalIndex] = l;
l.moved = false;
}
return out;
},
onMove(layout, item, x, y, _cols) {
const newLayout = cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (movedItem) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
}
return newLayout;
}
};
var horizontalCompactor = {
type: "horizontal",
allowOverlap: false,
compact(layout, cols) {
const compareWith = getStatics(layout);
const sorted = sortLayoutItemsByColRow(layout);
const out = new Array(layout.length);
for (let i = 0; i < sorted.length; i++) {
const sortedItem = sorted[i];
if (sortedItem === void 0) continue;
let l = cloneLayoutItem(sortedItem);
if (!l.static) {
l = compactItemHorizontal(compareWith, l, cols, sorted);
compareWith.push(l);
}
const originalIndex = layout.indexOf(sortedItem);
out[originalIndex] = l;
l.moved = false;
}
return out;
},
onMove(layout, item, x, y, _cols) {
const newLayout = cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (movedItem) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
}
return newLayout;
}
};
var noCompactor = {
type: null,
allowOverlap: false,
compact(layout, _cols) {
return cloneLayout(layout);
},
onMove(layout, item, x, y, _cols) {
const newLayout = cloneLayout(layout);
const movedItem = newLayout.find((l) => l.i === item.i);
if (movedItem) {
movedItem.x = x;
movedItem.y = y;
movedItem.moved = true;
}
return newLayout;
}
};
var verticalOverlapCompactor = {
...verticalCompactor,
allowOverlap: true,
compact(layout, _cols) {
return cloneLayout(layout);
}
};
var horizontalOverlapCompactor = {
...horizontalCompactor,
allowOverlap: true,
compact(layout, _cols) {
return cloneLayout(layout);
}
};
function getCompactor(compactType, allowOverlap = false, preventCollision = false) {
let baseCompactor;
if (allowOverlap) {
if (compactType === "vertical") baseCompactor = verticalOverlapCompactor;
else if (compactType === "horizontal")
baseCompactor = horizontalOverlapCompactor;
else baseCompactor = noCompactor;
} else {
if (compactType === "vertical") baseCompactor = verticalCompactor;
else if (compactType === "horizontal") baseCompactor = horizontalCompactor;
else baseCompactor = noCompactor;
}
if (preventCollision) {
return { ...baseCompactor, preventCollision };
}
return baseCompactor;
}
// src/core/responsive.ts
function sortBreakpoints(breakpoints) {
const keys = Object.keys(breakpoints);
return keys.sort((a, b) => breakpoints[a] - breakpoints[b]);
}
function getBreakpointFromWidth(breakpoints, width) {
const sorted = sortBreakpoints(breakpoints);
let matching = sorted[0];
if (matching === void 0) {
throw new Error("No breakpoints defined");
}
for (let i = 1; i < sorted.length; i++) {
const breakpointName = sorted[i];
if (breakpointName === void 0) continue;
const breakpointWidth = breakpoints[breakpointName];
if (width > breakpointWidth) {
matching = breakpointName;
}
}
return matching;
}
function getColsFromBreakpoint(breakpoint, cols) {
const colCount = cols[breakpoint];
if (colCount === void 0) {
throw new Error(
`ResponsiveReactGridLayout: \`cols\` entry for breakpoint ${String(breakpoint)} is missing!`
);
}
return colCount;
}
function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBreakpoint, cols, compactType) {
const existingLayout = layouts[breakpoint];
if (existingLayout) {
return cloneLayout(existingLayout);
}
let layout = layouts[lastBreakpoint];
const breakpointsSorted = sortBreakpoints(breakpoints);
const breakpointsAbove = breakpointsSorted.slice(
breakpointsSorted.indexOf(breakpoint)
);
for (let i = 0; i < breakpointsAbove.length; i++) {
const b = breakpointsAbove[i];
if (b === void 0) continue;
const layoutForBreakpoint = layouts[b];
if (layoutForBreakpoint) {
layout = layoutForBreakpoint;
break;
}
}
const clonedLayout = cloneLayout(layout || []);
return compact(correctBounds(clonedLayout, { cols }), compactType, cols);
}
function getIndentationValue(value, breakpoint) {
if (Array.isArray(value)) {
return value;
}
const breakpointMap = value;
const breakpointValue = breakpointMap[breakpoint];
if (breakpointValue !== void 0) {
return breakpointValue;
}
const keys = Object.keys(breakpointMap);
for (const key of keys) {
const v = breakpointMap[key];
if (v !== void 0) {
return v;
}
}
return [10, 10];
}
export { absoluteStrategy, bottom, cloneLayout, cloneLayoutItem, collides, compact, compactItem, compactItemHorizontal, compactItemVertical, correctBounds, createScaledStrategy, defaultDragConfig, defaultDropConfig, defaultGridConfig, defaultPositionStrategy, defaultResizeConfig, findOrGenerateResponsiveLayout, getAllCollisions, getBreakpointFromWidth, getColsFromBreakpoint, getCompactor, getFirstCollision, getIndentationValue, getLayoutItem, getStatics, horizontalCompactor, horizontalOverlapCompactor, modifyLayout, moveElement, moveElementAwayFromCollision, noCompactor, perc, resizeItemInDirection, resolveCompactionCollision2 as resolveCompactionCollision, setTopLeft, setTransform, sortBreakpoints, sortLayoutItems, sortLayoutItemsByColRow, sortLayoutItemsByRowCol, transformStrategy, validateLayout, verticalCompactor, verticalOverlapCompactor, withLayoutItem };
//# sourceMappingURL=chunk-4HNUMWQK.mjs.map
//# sourceMappingURL=chunk-4HNUMWQK.mjs.map

Sorry, the diff of this file is too big to display

'use strict';
var chunk3WO4SAYB_js = require('./chunk-3WO4SAYB.js');
var chunkF6NQPYKT_js = require('./chunk-F6NQPYKT.js');
var React2 = require('react');
var reactDraggable = require('react-draggable');
var reactResizable = require('react-resizable');
var clsx = require('clsx');
var jsxRuntime = require('react/jsx-runtime');
var fastEquals = require('fast-equals');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React2__default = /*#__PURE__*/_interopDefault(React2);
var clsx__default = /*#__PURE__*/_interopDefault(clsx);
function GridItem(props) {
const {
children,
cols,
containerWidth,
margin,
containerPadding,
rowHeight,
maxRows,
isDraggable,
isResizable,
isBounded,
static: isStatic,
useCSSTransforms = true,
usePercentages = false,
transformScale = 1,
droppingPosition,
className = "",
style,
handle = "",
cancel = "",
x,
y,
w,
h,
minW = 1,
maxW = Infinity,
minH = 1,
maxH = Infinity,
i,
resizeHandles,
resizeHandle,
onDragStart: onDragStartProp,
onDrag: onDragProp,
onDragStop: onDragStopProp,
onResizeStart: onResizeStartProp,
onResize: onResizeProp,
onResizeStop: onResizeStopProp
} = props;
const [dragging, setDragging] = React2.useState(false);
const [resizing, setResizing] = React2.useState(false);
const elementRef = React2.useRef(null);
const dragPositionRef = React2.useRef({ left: 0, top: 0 });
const resizePositionRef = React2.useRef({
top: 0,
left: 0,
width: 0,
height: 0
});
const prevDroppingPositionRef = React2.useRef(
void 0
);
const positionParams = React2.useMemo(
() => ({
cols,
containerPadding,
containerWidth,
margin,
maxRows,
rowHeight
}),
[cols, containerPadding, containerWidth, margin, maxRows, rowHeight]
);
const createStyle = React2.useCallback(
(pos2) => {
if (useCSSTransforms) {
return chunk3WO4SAYB_js.setTransform(pos2);
}
const styleObj = chunk3WO4SAYB_js.setTopLeft(pos2);
if (usePercentages) {
return {
...styleObj,
left: chunk3WO4SAYB_js.perc(pos2.left / containerWidth),
width: chunk3WO4SAYB_js.perc(pos2.width / containerWidth)
};
}
return styleObj;
},
[useCSSTransforms, usePercentages, containerWidth]
);
const onDragStart = React2.useCallback(
(e, { node }) => {
if (!onDragStartProp) return;
const { offsetParent } = node;
if (!offsetParent) return;
const parentRect = offsetParent.getBoundingClientRect();
const clientRect = node.getBoundingClientRect();
const cLeft = clientRect.left / transformScale;
const pLeft = parentRect.left / transformScale;
const cTop = clientRect.top / transformScale;
const pTop = parentRect.top / transformScale;
const newPosition = {
left: cLeft - pLeft + offsetParent.scrollLeft,
top: cTop - pTop + offsetParent.scrollTop
};
dragPositionRef.current = newPosition;
setDragging(true);
const { x: newX, y: newY } = chunkF6NQPYKT_js.calcXY(
positionParams,
newPosition.top,
newPosition.left,
w,
h
);
onDragStartProp(i, newX, newY, {
e,
node,
newPosition
});
},
[onDragStartProp, transformScale, positionParams, w, h, i]
);
const onDrag = React2.useCallback(
(e, { node, deltaX, deltaY }) => {
if (!onDragProp || !dragging) return;
let top = dragPositionRef.current.top + deltaY;
let left = dragPositionRef.current.left + deltaX;
if (isBounded) {
const { offsetParent } = node;
if (offsetParent) {
const bottomBoundary = offsetParent.clientHeight - chunkF6NQPYKT_js.calcGridItemWHPx(h, rowHeight, margin[1]);
top = chunkF6NQPYKT_js.clamp(top, 0, bottomBoundary);
const colWidth = chunkF6NQPYKT_js.calcGridColWidth(positionParams);
const rightBoundary = containerWidth - chunkF6NQPYKT_js.calcGridItemWHPx(w, colWidth, margin[0]);
left = chunkF6NQPYKT_js.clamp(left, 0, rightBoundary);
}
}
const newPosition = { top, left };
dragPositionRef.current = newPosition;
const { x: newX, y: newY } = chunkF6NQPYKT_js.calcXY(positionParams, top, left, w, h);
onDragProp(i, newX, newY, {
e,
node,
newPosition
});
},
[
onDragProp,
dragging,
isBounded,
h,
rowHeight,
margin,
positionParams,
containerWidth,
w,
i
]
);
const onDragStop = React2.useCallback(
(e, { node }) => {
if (!onDragStopProp || !dragging) return;
const { left, top } = dragPositionRef.current;
const newPosition = { top, left };
setDragging(false);
dragPositionRef.current = { left: 0, top: 0 };
const { x: newX, y: newY } = chunkF6NQPYKT_js.calcXY(positionParams, top, left, w, h);
onDragStopProp(i, newX, newY, {
e,
node,
newPosition
});
},
[onDragStopProp, dragging, positionParams, w, h, i]
);
const onResizeHandler = React2.useCallback(
(e, { node, size, handle: resizeHandle2 }, position, handlerName) => {
const handler = handlerName === "onResizeStart" ? onResizeStartProp : handlerName === "onResize" ? onResizeProp : onResizeStopProp;
if (!handler) return;
let updatedSize;
if (node) {
updatedSize = chunk3WO4SAYB_js.resizeItemInDirection(
resizeHandle2,
position,
size,
containerWidth
);
} else {
updatedSize = {
...size,
top: position.top,
left: position.left
};
}
resizePositionRef.current = updatedSize;
let { w: newW, h: newH } = chunkF6NQPYKT_js.calcWH(
positionParams,
updatedSize.width,
updatedSize.height,
x,
y,
resizeHandle2
);
newW = chunkF6NQPYKT_js.clamp(newW, Math.max(minW, 1), maxW);
newH = chunkF6NQPYKT_js.clamp(newH, minH, maxH);
handler(i, newW, newH, {
e: e.nativeEvent,
node,
size: updatedSize,
handle: resizeHandle2
});
},
[
onResizeStartProp,
onResizeProp,
onResizeStopProp,
containerWidth,
positionParams,
x,
y,
minW,
maxW,
minH,
maxH,
i
]
);
const handleResizeStart = React2.useCallback(
(e, data) => {
setResizing(true);
const pos2 = chunkF6NQPYKT_js.calcGridItemPosition(positionParams, x, y, w, h);
const typedData = {
...data,
handle: data.handle
};
onResizeHandler(e, typedData, pos2, "onResizeStart");
},
[onResizeHandler, positionParams, x, y, w, h]
);
const handleResize = React2.useCallback(
(e, data) => {
const pos2 = chunkF6NQPYKT_js.calcGridItemPosition(positionParams, x, y, w, h);
const typedData = {
...data,
handle: data.handle
};
onResizeHandler(e, typedData, pos2, "onResize");
},
[onResizeHandler, positionParams, x, y, w, h]
);
const handleResizeStop = React2.useCallback(
(e, data) => {
setResizing(false);
resizePositionRef.current = { top: 0, left: 0, width: 0, height: 0 };
const pos2 = chunkF6NQPYKT_js.calcGridItemPosition(positionParams, x, y, w, h);
const typedData = {
...data,
handle: data.handle
};
onResizeHandler(e, typedData, pos2, "onResizeStop");
},
[onResizeHandler, positionParams, x, y, w, h]
);
React2.useEffect(() => {
if (!droppingPosition) return;
const node = elementRef.current;
if (!node) return;
const prevDroppingPosition = prevDroppingPositionRef.current || {
left: 0,
top: 0
};
const shouldDrag = dragging && (droppingPosition.left !== prevDroppingPosition.left || droppingPosition.top !== prevDroppingPosition.top);
if (!dragging) {
const fakeData = {
node,
deltaX: droppingPosition.left,
deltaY: droppingPosition.top,
lastX: 0,
lastY: 0,
x: droppingPosition.left,
y: droppingPosition.top
};
onDragStart(droppingPosition.e, fakeData);
} else if (shouldDrag) {
const deltaX = droppingPosition.left - dragPositionRef.current.left;
const deltaY = droppingPosition.top - dragPositionRef.current.top;
const fakeData = {
node,
deltaX,
deltaY,
lastX: dragPositionRef.current.left,
lastY: dragPositionRef.current.top,
x: droppingPosition.left,
y: droppingPosition.top
};
onDrag(droppingPosition.e, fakeData);
}
prevDroppingPositionRef.current = droppingPosition;
}, [droppingPosition, dragging, onDragStart, onDrag]);
const pos = chunkF6NQPYKT_js.calcGridItemPosition(
positionParams,
x,
y,
w,
h,
dragging ? dragPositionRef.current : null,
resizing ? resizePositionRef.current : null
);
const child = React2__default.default.Children.only(children);
const maxWidth = chunkF6NQPYKT_js.calcGridItemPosition(positionParams, 0, 0, cols, 0).width;
const mins = chunkF6NQPYKT_js.calcGridItemPosition(positionParams, 0, 0, minW, minH);
const maxes = chunkF6NQPYKT_js.calcGridItemPosition(positionParams, 0, 0, maxW, maxH);
const minConstraints = [mins.width, mins.height];
const maxConstraints = [
Math.min(maxes.width, maxWidth),
Math.min(maxes.height, Infinity)
];
const childProps = child.props;
const childClassName = childProps["className"];
const childStyle = childProps["style"];
let newChild = React2__default.default.cloneElement(child, {
ref: elementRef,
className: clsx__default.default("react-grid-item", childClassName, className, {
static: isStatic,
resizing,
"react-draggable": isDraggable,
"react-draggable-dragging": dragging,
dropping: Boolean(droppingPosition),
cssTransforms: useCSSTransforms
}),
style: {
...style,
...childStyle,
...createStyle(pos)
}
});
const resizableHandle = resizeHandle;
newChild = /* @__PURE__ */ jsxRuntime.jsx(
reactResizable.Resizable,
{
draggableOpts: { disabled: !isResizable },
className: isResizable ? void 0 : "react-resizable-hide",
width: pos.width,
height: pos.height,
minConstraints,
maxConstraints,
onResizeStart: handleResizeStart,
onResize: handleResize,
onResizeStop: handleResizeStop,
transformScale,
resizeHandles,
handle: resizableHandle,
children: newChild
}
);
newChild = /* @__PURE__ */ jsxRuntime.jsx(
reactDraggable.DraggableCore,
{
disabled: !isDraggable,
onStart: onDragStart,
onDrag,
onStop: onDragStop,
handle,
cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""),
scale: transformScale,
nodeRef: elementRef,
children: newChild
}
);
return newChild;
}
var noop = () => {
};
var layoutClassName = "react-grid-layout";
var isFirefox = false;
try {
isFirefox = /firefox/i.test(navigator.userAgent);
} catch {
}
function childrenEqual(a, b) {
const aArr = React2__default.default.Children.toArray(a);
const bArr = React2__default.default.Children.toArray(b);
if (aArr.length !== bArr.length) return false;
for (let i = 0; i < aArr.length; i++) {
const aChild = aArr[i];
const bChild = bArr[i];
if (aChild?.key !== bChild?.key) return false;
}
return true;
}
function synchronizeLayoutWithChildren(initialLayout, children, cols, compactType, allowOverlap) {
const layout = [];
const childKeys = /* @__PURE__ */ new Set();
React2__default.default.Children.forEach(children, (child) => {
if (!React2__default.default.isValidElement(child) || child.key === null) return;
const key = String(child.key);
childKeys.add(key);
const existingItem = initialLayout.find((l) => l.i === key);
if (existingItem) {
layout.push(chunk3WO4SAYB_js.cloneLayoutItem(existingItem));
} else {
const childProps = child.props;
const dataGrid = childProps["data-grid"];
if (dataGrid) {
layout.push({
i: key,
x: dataGrid.x ?? 0,
y: dataGrid.y ?? 0,
w: dataGrid.w ?? 1,
h: dataGrid.h ?? 1,
minW: dataGrid.minW,
maxW: dataGrid.maxW,
minH: dataGrid.minH,
maxH: dataGrid.maxH,
static: dataGrid.static,
isDraggable: dataGrid.isDraggable,
isResizable: dataGrid.isResizable,
resizeHandles: dataGrid.resizeHandles,
isBounded: dataGrid.isBounded
});
} else {
layout.push({
i: key,
x: 0,
y: chunk3WO4SAYB_js.bottom(layout),
w: 1,
h: 1
});
}
}
});
const corrected = chunk3WO4SAYB_js.correctBounds(layout, { cols });
return chunk3WO4SAYB_js.compact(corrected, compactType, cols, allowOverlap);
}
function GridLayout(props) {
const {
// Required
children,
width,
// Composable config interfaces
gridConfig: gridConfigProp,
dragConfig: dragConfigProp,
resizeConfig: resizeConfigProp,
dropConfig: dropConfigProp,
positionStrategy = chunk3WO4SAYB_js.defaultPositionStrategy,
compactor: compactorProp,
// Layout data
layout: propsLayout = [],
droppingItem: droppingItemProp,
// Container props
autoSize = true,
className = "",
style = {},
innerRef,
// Callbacks
onLayoutChange = noop,
onDragStart: onDragStartProp = noop,
onDrag: onDragProp = noop,
onDragStop: onDragStopProp = noop,
onResizeStart: onResizeStartProp = noop,
onResize: onResizeProp = noop,
onResizeStop: onResizeStopProp = noop,
onDrop: onDropProp = noop,
onDropDragOver: onDropDragOverProp = noop
} = props;
const gridConfig = React2.useMemo(
() => ({ ...chunk3WO4SAYB_js.defaultGridConfig, ...gridConfigProp }),
[gridConfigProp]
);
const dragConfig = React2.useMemo(
() => ({ ...chunk3WO4SAYB_js.defaultDragConfig, ...dragConfigProp }),
[dragConfigProp]
);
const resizeConfig = React2.useMemo(
() => ({ ...chunk3WO4SAYB_js.defaultResizeConfig, ...resizeConfigProp }),
[resizeConfigProp]
);
const dropConfig = React2.useMemo(
() => ({ ...chunk3WO4SAYB_js.defaultDropConfig, ...dropConfigProp }),
[dropConfigProp]
);
const { cols, rowHeight, maxRows, margin, containerPadding } = gridConfig;
const {
enabled: isDraggable,
bounded: isBounded,
handle: draggableHandle,
cancel: draggableCancel
} = dragConfig;
const {
enabled: isResizable,
handles: resizeHandles,
handleComponent: resizeHandle
} = resizeConfig;
const { enabled: isDroppable, defaultItem: defaultDropItem } = dropConfig;
const compactor = compactorProp ?? chunk3WO4SAYB_js.getCompactor("vertical");
const compactType = compactor.type;
const allowOverlap = compactor.allowOverlap;
const preventCollision = compactor.preventCollision ?? false;
const droppingItem = React2.useMemo(
() => droppingItemProp ?? {
i: "__dropping-elem__",
...defaultDropItem
},
[droppingItemProp, defaultDropItem]
);
const useCSSTransforms = positionStrategy.type === "transform";
const transformScale = positionStrategy.scale;
const effectiveContainerPadding = containerPadding ?? margin;
const [mounted, setMounted] = React2.useState(false);
const [layout, setLayout] = React2.useState(
() => synchronizeLayoutWithChildren(
propsLayout,
children,
cols,
compactType,
allowOverlap
)
);
const [activeDrag, setActiveDrag] = React2.useState(null);
const [resizing, setResizing] = React2.useState(false);
const [droppingDOMNode, setDroppingDOMNode] = React2.useState(
null
);
const [droppingPosition, setDroppingPosition] = React2.useState();
const oldDragItemRef = React2.useRef(null);
const oldResizeItemRef = React2.useRef(null);
const oldLayoutRef = React2.useRef(null);
const dragEnterCounterRef = React2.useRef(0);
const prevLayoutRef = React2.useRef(layout);
const prevPropsLayoutRef = React2.useRef(propsLayout);
const prevChildrenRef = React2.useRef(children);
const prevCompactTypeRef = React2.useRef(compactType);
React2.useEffect(() => {
setMounted(true);
if (!fastEquals.deepEqual(layout, propsLayout)) {
onLayoutChange(layout);
}
}, []);
React2.useEffect(() => {
if (activeDrag) return;
const layoutChanged = !fastEquals.deepEqual(propsLayout, prevPropsLayoutRef.current);
const childrenChanged = !childrenEqual(children, prevChildrenRef.current);
const compactTypeChanged = compactType !== prevCompactTypeRef.current;
if (layoutChanged || childrenChanged || compactTypeChanged) {
const baseLayout = layoutChanged ? propsLayout : layout;
const newLayout = synchronizeLayoutWithChildren(
baseLayout,
children,
cols,
compactType,
allowOverlap
);
setLayout(newLayout);
}
prevPropsLayoutRef.current = propsLayout;
prevChildrenRef.current = children;
prevCompactTypeRef.current = compactType;
}, [
propsLayout,
children,
cols,
compactType,
allowOverlap,
activeDrag,
layout
]);
React2.useEffect(() => {
if (!activeDrag && !fastEquals.deepEqual(layout, prevLayoutRef.current)) {
prevLayoutRef.current = layout;
onLayoutChange(layout);
}
}, [layout, activeDrag, onLayoutChange]);
const containerHeight = React2.useMemo(() => {
if (!autoSize) return void 0;
const nbRow = chunk3WO4SAYB_js.bottom(layout);
const containerPaddingY = effectiveContainerPadding[1];
return nbRow * rowHeight + (nbRow - 1) * margin[1] + containerPaddingY * 2 + "px";
}, [autoSize, layout, rowHeight, margin, effectiveContainerPadding]);
const onDragStart = React2.useCallback(
(i, _x, _y, data) => {
const l = chunk3WO4SAYB_js.getLayoutItem(layout, i);
if (!l) return;
const placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i
};
oldDragItemRef.current = chunk3WO4SAYB_js.cloneLayoutItem(l);
oldLayoutRef.current = layout;
setActiveDrag(placeholder);
onDragStartProp(layout, l, l, null, data.e, data.node);
},
[layout, onDragStartProp]
);
const onDrag = React2.useCallback(
(i, x, y, data) => {
const oldDragItem = oldDragItemRef.current;
const l = chunk3WO4SAYB_js.getLayoutItem(layout, i);
if (!l) return;
const placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i
};
const newLayout = chunk3WO4SAYB_js.moveElement(
layout,
l,
x,
y,
true,
preventCollision,
compactType,
cols,
allowOverlap
);
onDragProp(newLayout, oldDragItem, l, placeholder, data.e, data.node);
setLayout(
allowOverlap ? newLayout : chunk3WO4SAYB_js.compact(newLayout, compactType, cols)
);
setActiveDrag(placeholder);
},
[layout, preventCollision, compactType, cols, allowOverlap, onDragProp]
);
const onDragStop = React2.useCallback(
(i, x, y, data) => {
if (!activeDrag) return;
const oldDragItem = oldDragItemRef.current;
const l = chunk3WO4SAYB_js.getLayoutItem(layout, i);
if (!l) return;
const newLayout = chunk3WO4SAYB_js.moveElement(
layout,
l,
x,
y,
true,
preventCollision,
compactType,
cols,
allowOverlap
);
const finalLayout = allowOverlap ? newLayout : chunk3WO4SAYB_js.compact(newLayout, compactType, cols);
onDragStopProp(finalLayout, oldDragItem, l, null, data.e, data.node);
const oldLayout = oldLayoutRef.current;
oldDragItemRef.current = null;
oldLayoutRef.current = null;
setActiveDrag(null);
setLayout(finalLayout);
if (oldLayout && !fastEquals.deepEqual(oldLayout, finalLayout)) {
onLayoutChange(finalLayout);
}
},
[
activeDrag,
layout,
preventCollision,
compactType,
cols,
allowOverlap,
onDragStopProp,
onLayoutChange
]
);
const onResizeStart = React2.useCallback(
(i, _w, _h, data) => {
const l = chunk3WO4SAYB_js.getLayoutItem(layout, i);
if (!l) return;
oldResizeItemRef.current = chunk3WO4SAYB_js.cloneLayoutItem(l);
oldLayoutRef.current = layout;
setResizing(true);
onResizeStartProp(layout, l, l, null, data.e, data.node);
},
[layout, onResizeStartProp]
);
const onResize = React2.useCallback(
(i, w, h, data) => {
const oldResizeItem = oldResizeItemRef.current;
const { handle } = data;
let shouldMoveItem = false;
let newX;
let newY;
const [newLayout, l] = chunk3WO4SAYB_js.withLayoutItem(layout, i, (item) => {
newX = item.x;
newY = item.y;
if (["sw", "w", "nw", "n", "ne"].includes(handle)) {
if (["sw", "nw", "w"].includes(handle)) {
newX = item.x + (item.w - w);
w = item.x !== newX && newX < 0 ? item.w : w;
newX = newX < 0 ? 0 : newX;
}
if (["ne", "n", "nw"].includes(handle)) {
newY = item.y + (item.h - h);
h = item.y !== newY && newY < 0 ? item.h : h;
newY = newY < 0 ? 0 : newY;
}
shouldMoveItem = true;
}
if (preventCollision && !allowOverlap) {
const collisions = chunk3WO4SAYB_js.getAllCollisions(layout, {
...item,
w,
h,
x: newX ?? item.x,
y: newY ?? item.y
}).filter((layoutItem) => layoutItem.i !== item.i);
if (collisions.length > 0) {
newY = item.y;
h = item.h;
newX = item.x;
w = item.w;
shouldMoveItem = false;
}
}
item.w = w;
item.h = h;
return item;
});
if (!l) return;
let finalLayout = newLayout;
if (shouldMoveItem && newX !== void 0 && newY !== void 0) {
finalLayout = chunk3WO4SAYB_js.moveElement(
newLayout,
l,
newX,
newY,
true,
preventCollision,
compactType,
cols,
allowOverlap
);
}
const placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i,
static: true
};
onResizeProp(
finalLayout,
oldResizeItem,
l,
placeholder,
data.e,
data.node
);
setLayout(
allowOverlap ? finalLayout : chunk3WO4SAYB_js.compact(finalLayout, compactType, cols)
);
setActiveDrag(placeholder);
},
[layout, preventCollision, allowOverlap, compactType, cols, onResizeProp]
);
const onResizeStop = React2.useCallback(
(i, _w, _h, data) => {
const oldResizeItem = oldResizeItemRef.current;
const l = chunk3WO4SAYB_js.getLayoutItem(layout, i);
const finalLayout = allowOverlap ? layout : chunk3WO4SAYB_js.compact(layout, compactType, cols);
onResizeStopProp(
finalLayout,
oldResizeItem,
l ?? null,
null,
data.e,
data.node
);
const oldLayout = oldLayoutRef.current;
oldResizeItemRef.current = null;
oldLayoutRef.current = null;
setActiveDrag(null);
setResizing(false);
setLayout(finalLayout);
if (oldLayout && !fastEquals.deepEqual(oldLayout, finalLayout)) {
onLayoutChange(finalLayout);
}
},
[layout, allowOverlap, compactType, cols, onResizeStopProp, onLayoutChange]
);
const removeDroppingPlaceholder = React2.useCallback(() => {
const newLayout = chunk3WO4SAYB_js.compact(
layout.filter((l) => l.i !== droppingItem.i),
compactType,
cols,
allowOverlap
);
setLayout(newLayout);
setDroppingDOMNode(null);
setActiveDrag(null);
setDroppingPosition(void 0);
}, [layout, droppingItem.i, compactType, cols, allowOverlap]);
const handleDragOver = React2.useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
if (isFirefox && !e.nativeEvent.target?.classList.contains(
layoutClassName
)) {
return false;
}
const onDragOverResult = onDropDragOverProp(e);
if (onDragOverResult === false) {
if (droppingDOMNode) {
removeDroppingPlaceholder();
}
return false;
}
const finalDroppingItem = { ...droppingItem, ...onDragOverResult };
const gridRect = e.currentTarget.getBoundingClientRect();
const layerX = e.clientX - gridRect.left;
const layerY = e.clientY - gridRect.top;
const newDroppingPosition = {
left: layerX / transformScale,
top: layerY / transformScale,
e: e.nativeEvent
};
if (!droppingDOMNode) {
const positionParams = {
cols,
margin,
maxRows,
rowHeight,
containerWidth: width,
containerPadding: effectiveContainerPadding
};
const calculatedPosition = chunkF6NQPYKT_js.calcXY(
positionParams,
layerY,
layerX,
finalDroppingItem.w,
finalDroppingItem.h
);
setDroppingDOMNode(/* @__PURE__ */ jsxRuntime.jsx("div", {}, finalDroppingItem.i));
setDroppingPosition(newDroppingPosition);
setLayout([
...layout,
{
...finalDroppingItem,
x: calculatedPosition.x,
y: calculatedPosition.y,
static: false,
isDraggable: true
}
]);
} else if (droppingPosition) {
const shouldUpdate = droppingPosition.left !== layerX || droppingPosition.top !== layerY;
if (shouldUpdate) {
setDroppingPosition(newDroppingPosition);
}
}
},
[
droppingDOMNode,
droppingPosition,
droppingItem,
onDropDragOverProp,
removeDroppingPlaceholder,
transformScale,
cols,
margin,
maxRows,
rowHeight,
width,
effectiveContainerPadding,
layout
]
);
const handleDragLeave = React2.useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
dragEnterCounterRef.current--;
if (dragEnterCounterRef.current === 0) {
removeDroppingPlaceholder();
}
},
[removeDroppingPlaceholder]
);
const handleDragEnter = React2.useCallback((e) => {
e.preventDefault();
e.stopPropagation();
dragEnterCounterRef.current++;
}, []);
const handleDrop = React2.useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
const item = layout.find((l) => l.i === droppingItem.i);
dragEnterCounterRef.current = 0;
removeDroppingPlaceholder();
onDropProp(layout, item, e.nativeEvent);
},
[layout, droppingItem.i, removeDroppingPlaceholder, onDropProp]
);
const processGridItem = React2.useCallback(
(child, isDroppingItem) => {
if (!child || !child.key) return null;
const l = chunk3WO4SAYB_js.getLayoutItem(layout, String(child.key));
if (!l) return null;
const draggable = typeof l.isDraggable === "boolean" ? l.isDraggable : !l.static && isDraggable;
const resizable = typeof l.isResizable === "boolean" ? l.isResizable : !l.static && isResizable;
const resizeHandlesOptions = l.resizeHandles || [...resizeHandles];
const bounded = draggable && isBounded && l.isBounded !== false;
const resizeHandleElement = resizeHandle;
return /* @__PURE__ */ jsxRuntime.jsx(
GridItem,
{
containerWidth: width,
cols,
margin,
containerPadding: effectiveContainerPadding,
maxRows,
rowHeight,
cancel: draggableCancel,
handle: draggableHandle,
onDragStart,
onDrag,
onDragStop,
onResizeStart,
onResize,
onResizeStop,
isDraggable: draggable,
isResizable: resizable,
isBounded: bounded,
useCSSTransforms: useCSSTransforms && mounted,
usePercentages: !mounted,
transformScale,
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i: l.i,
minH: l.minH,
minW: l.minW,
maxH: l.maxH,
maxW: l.maxW,
static: l.static,
droppingPosition: isDroppingItem ? droppingPosition : void 0,
resizeHandles: resizeHandlesOptions,
resizeHandle: resizeHandleElement,
children: child
},
l.i
);
},
[
layout,
width,
cols,
margin,
effectiveContainerPadding,
maxRows,
rowHeight,
draggableCancel,
draggableHandle,
onDragStart,
onDrag,
onDragStop,
onResizeStart,
onResize,
onResizeStop,
isDraggable,
isResizable,
isBounded,
useCSSTransforms,
mounted,
transformScale,
droppingPosition,
resizeHandles,
resizeHandle
]
);
const renderPlaceholder = () => {
if (!activeDrag) return null;
return /* @__PURE__ */ jsxRuntime.jsx(
GridItem,
{
w: activeDrag.w,
h: activeDrag.h,
x: activeDrag.x,
y: activeDrag.y,
i: activeDrag.i,
className: `react-grid-placeholder ${resizing ? "placeholder-resizing" : ""}`,
containerWidth: width,
cols,
margin,
containerPadding: effectiveContainerPadding,
maxRows,
rowHeight,
isDraggable: false,
isResizable: false,
isBounded: false,
useCSSTransforms,
transformScale,
children: /* @__PURE__ */ jsxRuntime.jsx("div", {})
}
);
};
const mergedClassName = clsx__default.default(layoutClassName, className);
const mergedStyle = {
height: containerHeight,
...style
};
return /* @__PURE__ */ jsxRuntime.jsxs(
"div",
{
ref: innerRef,
className: mergedClassName,
style: mergedStyle,
onDrop: isDroppable ? handleDrop : void 0,
onDragLeave: isDroppable ? handleDragLeave : void 0,
onDragEnter: isDroppable ? handleDragEnter : void 0,
onDragOver: isDroppable ? handleDragOver : void 0,
children: [
React2__default.default.Children.map(children, (child) => {
if (!React2__default.default.isValidElement(child)) return null;
return processGridItem(child);
}),
isDroppable && droppingDOMNode && processGridItem(droppingDOMNode, true),
renderPlaceholder()
]
}
);
}
var DEFAULT_BREAKPOINTS = {
lg: 1200,
md: 996,
sm: 768,
xs: 480,
xxs: 0
};
var DEFAULT_COLS = {
lg: 12,
md: 10,
sm: 6,
xs: 4,
xxs: 2
};
var noop2 = () => {
};
function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactType, allowOverlap) {
const layout = [];
React2__default.default.Children.forEach(children, (child) => {
if (!React2__default.default.isValidElement(child) || child.key === null) return;
const key = String(child.key);
const existingItem = initialLayout.find((l) => l.i === key);
if (existingItem) {
layout.push({
...existingItem,
i: key
});
} else {
const childProps = child.props;
const dataGrid = childProps["data-grid"];
if (dataGrid) {
layout.push({
i: key,
x: dataGrid.x ?? 0,
y: dataGrid.y ?? 0,
w: dataGrid.w ?? 1,
h: dataGrid.h ?? 1,
minW: dataGrid.minW,
maxW: dataGrid.maxW,
minH: dataGrid.minH,
maxH: dataGrid.maxH,
static: dataGrid.static,
isDraggable: dataGrid.isDraggable,
isResizable: dataGrid.isResizable,
resizeHandles: dataGrid.resizeHandles,
isBounded: dataGrid.isBounded
});
} else {
layout.push({
i: key,
x: 0,
y: chunk3WO4SAYB_js.bottom(layout),
w: 1,
h: 1
});
}
}
});
const corrected = chunk3WO4SAYB_js.correctBounds(layout, { cols });
return chunk3WO4SAYB_js.compact(corrected, compactType, cols, allowOverlap);
}
function ResponsiveGridLayout(props) {
const {
children,
width,
breakpoint: propBreakpoint,
breakpoints = DEFAULT_BREAKPOINTS,
cols: colsConfig = DEFAULT_COLS,
layouts: propsLayouts = {},
rowHeight = 150,
maxRows = Infinity,
margin: propMargin = [10, 10],
containerPadding: propContainerPadding = null,
compactor: compactorProp,
onBreakpointChange = noop2,
onLayoutChange = noop2,
onWidthChange = noop2,
...restProps
} = props;
const compactor = compactorProp ?? chunk3WO4SAYB_js.getCompactor("vertical");
const compactType = compactor.type;
const allowOverlap = compactor.allowOverlap;
const initialBreakpoint = React2.useMemo(() => {
return propBreakpoint ?? chunk3WO4SAYB_js.getBreakpointFromWidth(breakpoints, width);
}, []);
const initialCols = React2.useMemo(() => {
return chunk3WO4SAYB_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
}, [initialBreakpoint, colsConfig]);
const initialLayout = React2.useMemo(() => {
return chunk3WO4SAYB_js.findOrGenerateResponsiveLayout(
propsLayouts,
breakpoints,
initialBreakpoint,
initialBreakpoint,
initialCols,
compactType
);
}, []);
const [breakpoint, setBreakpoint] = React2.useState(initialBreakpoint);
const [cols, setCols] = React2.useState(initialCols);
const [layout, setLayout] = React2.useState(initialLayout);
const [layouts, setLayouts] = React2.useState(propsLayouts);
const prevWidthRef = React2.useRef(width);
const prevBreakpointRef = React2.useRef(propBreakpoint);
const prevBreakpointsRef = React2.useRef(breakpoints);
const prevColsRef = React2.useRef(colsConfig);
const prevLayoutsRef = React2.useRef(propsLayouts);
const prevCompactTypeRef = React2.useRef(compactType);
React2.useEffect(() => {
if (!fastEquals.deepEqual(propsLayouts, prevLayoutsRef.current)) {
const newLayout = chunk3WO4SAYB_js.findOrGenerateResponsiveLayout(
propsLayouts,
breakpoints,
breakpoint,
breakpoint,
cols,
compactType
);
setLayout(newLayout);
setLayouts(propsLayouts);
prevLayoutsRef.current = propsLayouts;
}
}, [propsLayouts, breakpoints, breakpoint, cols, compactType]);
React2.useEffect(() => {
if (compactType !== prevCompactTypeRef.current) {
const newLayout = chunk3WO4SAYB_js.compact(
chunk3WO4SAYB_js.cloneLayout(layout),
compactType,
cols,
allowOverlap
);
const newLayouts = {
...layouts,
[breakpoint]: newLayout
};
setLayout(newLayout);
setLayouts(newLayouts);
onLayoutChange(newLayout, newLayouts);
prevCompactTypeRef.current = compactType;
}
}, [
compactType,
layout,
cols,
allowOverlap,
layouts,
breakpoint,
onLayoutChange
]);
React2.useEffect(() => {
const widthChanged = width !== prevWidthRef.current;
const breakpointPropChanged = propBreakpoint !== prevBreakpointRef.current;
const breakpointsChanged = !fastEquals.deepEqual(
breakpoints,
prevBreakpointsRef.current
);
const colsChanged = !fastEquals.deepEqual(colsConfig, prevColsRef.current);
if (widthChanged || breakpointPropChanged || breakpointsChanged || colsChanged) {
const newBreakpoint = propBreakpoint ?? chunk3WO4SAYB_js.getBreakpointFromWidth(breakpoints, width);
const newCols = chunk3WO4SAYB_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
const lastBreakpoint = breakpoint;
if (lastBreakpoint !== newBreakpoint || breakpointsChanged || colsChanged) {
const newLayouts = { ...layouts };
if (!newLayouts[lastBreakpoint]) {
newLayouts[lastBreakpoint] = chunk3WO4SAYB_js.cloneLayout(layout);
}
let newLayout = chunk3WO4SAYB_js.findOrGenerateResponsiveLayout(
newLayouts,
breakpoints,
newBreakpoint,
lastBreakpoint,
newCols,
compactType
);
newLayout = synchronizeLayoutWithChildren2(
newLayout,
children,
newCols,
compactType,
allowOverlap
);
newLayouts[newBreakpoint] = newLayout;
setBreakpoint(newBreakpoint);
setCols(newCols);
setLayout(newLayout);
setLayouts(newLayouts);
onBreakpointChange(newBreakpoint, newCols);
onLayoutChange(newLayout, newLayouts);
}
const currentMargin2 = chunk3WO4SAYB_js.getIndentationValue(
propMargin,
newBreakpoint
);
const currentPadding = propContainerPadding ? chunk3WO4SAYB_js.getIndentationValue(
propContainerPadding,
newBreakpoint
) : null;
onWidthChange(width, currentMargin2, newCols, currentPadding);
prevWidthRef.current = width;
prevBreakpointRef.current = propBreakpoint;
prevBreakpointsRef.current = breakpoints;
prevColsRef.current = colsConfig;
}
}, [
width,
propBreakpoint,
breakpoints,
colsConfig,
breakpoint,
cols,
layout,
layouts,
children,
compactType,
allowOverlap,
propMargin,
propContainerPadding,
onBreakpointChange,
onLayoutChange,
onWidthChange
]);
const handleLayoutChange = React2.useCallback(
(newLayout) => {
const newLayouts = {
...layouts,
[breakpoint]: newLayout
};
setLayout(newLayout);
setLayouts(newLayouts);
onLayoutChange(newLayout, newLayouts);
},
[layouts, breakpoint, onLayoutChange]
);
const currentMargin = React2.useMemo(() => {
return chunk3WO4SAYB_js.getIndentationValue(
propMargin,
breakpoint
);
}, [propMargin, breakpoint]);
const currentContainerPadding = React2.useMemo(() => {
if (propContainerPadding === null) return null;
return chunk3WO4SAYB_js.getIndentationValue(
propContainerPadding,
breakpoint
);
}, [propContainerPadding, breakpoint]);
const gridConfig = React2.useMemo(
() => ({
cols,
rowHeight,
maxRows,
margin: currentMargin,
containerPadding: currentContainerPadding
}),
[cols, rowHeight, maxRows, currentMargin, currentContainerPadding]
);
return /* @__PURE__ */ jsxRuntime.jsx(
GridLayout,
{
...restProps,
width,
gridConfig,
compactor,
onLayoutChange: handleLayoutChange,
layout,
children
}
);
}
exports.GridItem = GridItem;
exports.GridLayout = GridLayout;
exports.ResponsiveGridLayout = ResponsiveGridLayout;
//# sourceMappingURL=chunk-BFTKGAP3.js.map
//# sourceMappingURL=chunk-BFTKGAP3.js.map

Sorry, the diff of this file is too big to display

'use strict';
// src/core/calculate.ts
function calcGridColWidth(positionParams) {
const { margin, containerPadding, containerWidth, cols } = positionParams;
return (containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols;
}
function calcGridItemWHPx(gridUnits, colOrRowSize, marginPx) {
if (!Number.isFinite(gridUnits)) return gridUnits;
return Math.round(
colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx
);
}
function calcGridItemPosition(positionParams, x, y, w, h, dragPosition, resizePosition) {
const { margin, containerPadding, rowHeight } = positionParams;
const colWidth = calcGridColWidth(positionParams);
let width;
let height;
let top;
let left;
if (resizePosition) {
width = Math.round(resizePosition.width);
height = Math.round(resizePosition.height);
} else {
width = calcGridItemWHPx(w, colWidth, margin[0]);
height = calcGridItemWHPx(h, rowHeight, margin[1]);
}
if (dragPosition) {
top = Math.round(dragPosition.top);
left = Math.round(dragPosition.left);
} else if (resizePosition) {
top = Math.round(resizePosition.top);
left = Math.round(resizePosition.left);
} else {
top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);
left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);
}
return { top, left, width, height };
}
function calcXY(positionParams, top, left, w, h) {
const { margin, containerPadding, cols, rowHeight, maxRows } = positionParams;
const colWidth = calcGridColWidth(positionParams);
let x = Math.round((left - containerPadding[0]) / (colWidth + margin[0]));
let y = Math.round((top - containerPadding[1]) / (rowHeight + margin[1]));
x = clamp(x, 0, cols - w);
y = clamp(y, 0, maxRows - h);
return { x, y };
}
function calcWH(positionParams, width, height, x, y, handle) {
const { margin, maxRows, cols, rowHeight } = positionParams;
const colWidth = calcGridColWidth(positionParams);
const w = Math.round((width + margin[0]) / (colWidth + margin[0]));
const h = Math.round((height + margin[1]) / (rowHeight + margin[1]));
let _w = clamp(w, 0, cols - x);
let _h = clamp(h, 0, maxRows - y);
if (handle === "sw" || handle === "w" || handle === "nw") {
_w = clamp(w, 0, cols);
}
if (handle === "nw" || handle === "n" || handle === "ne") {
_h = clamp(h, 0, maxRows);
}
return { w: _w, h: _h };
}
function clamp(num, lowerBound, upperBound) {
return Math.max(Math.min(num, upperBound), lowerBound);
}
function calcGridCellDimensions(config) {
const {
width,
cols,
rowHeight,
margin = [10, 10],
containerPadding
} = config;
const padding = containerPadding ?? margin;
const cellWidth = (width - padding[0] * 2 - margin[0] * (cols - 1)) / cols;
const cellHeight = rowHeight;
return {
cellWidth,
cellHeight,
offsetX: padding[0],
offsetY: padding[1],
gapX: margin[0],
gapY: margin[1],
cols,
containerWidth: width
};
}
exports.calcGridCellDimensions = calcGridCellDimensions;
exports.calcGridColWidth = calcGridColWidth;
exports.calcGridItemPosition = calcGridItemPosition;
exports.calcGridItemWHPx = calcGridItemWHPx;
exports.calcWH = calcWH;
exports.calcXY = calcXY;
exports.clamp = clamp;
//# sourceMappingURL=chunk-F6NQPYKT.js.map
//# sourceMappingURL=chunk-F6NQPYKT.js.map
{"version":3,"sources":["../src/core/calculate.ts"],"names":[],"mappings":"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","file":"chunk-F6NQPYKT.js","sourcesContent":["/**\n * Grid calculation utilities.\n *\n * These functions convert between grid units and pixel positions.\n */\n\nimport type { Position, ResizeHandleAxis } from \"./types.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Parameters needed for position calculations.\n */\nexport interface PositionParams {\n readonly margin: readonly [number, number];\n readonly containerPadding: readonly [number, number];\n readonly containerWidth: number;\n readonly cols: number;\n readonly rowHeight: number;\n readonly maxRows: number;\n}\n\n// ============================================================================\n// Grid Column/Row Calculations\n// ============================================================================\n\n/**\n * Calculate the width of a single grid column in pixels.\n *\n * @param positionParams - Grid parameters\n * @returns Column width in pixels\n */\nexport function calcGridColWidth(positionParams: PositionParams): number {\n const { margin, containerPadding, containerWidth, cols } = positionParams;\n return (\n (containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols\n );\n}\n\n/**\n * Calculate the pixel size for a grid unit dimension (width or height).\n *\n * Can be called as:\n * - calcGridItemWHPx(w, colWidth, margin[0]) for width\n * - calcGridItemWHPx(h, rowHeight, margin[1]) for height\n *\n * @param gridUnits - Size in grid units\n * @param colOrRowSize - Column width or row height in pixels\n * @param marginPx - Margin between items in pixels\n * @returns Size in pixels\n */\nexport function calcGridItemWHPx(\n gridUnits: number,\n colOrRowSize: number,\n marginPx: number\n): number {\n // 0 * Infinity === NaN, which causes problems with resize constraints\n if (!Number.isFinite(gridUnits)) return gridUnits;\n return Math.round(\n colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx\n );\n}\n\n// ============================================================================\n// Position Calculations\n// ============================================================================\n\n/**\n * Calculate pixel position for a grid item.\n *\n * Returns left, top, width, height in pixels.\n *\n * @param positionParams - Grid parameters\n * @param x - X coordinate in grid units\n * @param y - Y coordinate in grid units\n * @param w - Width in grid units\n * @param h - Height in grid units\n * @param dragPosition - If present, use exact left/top from drag callbacks\n * @param resizePosition - If present, use exact dimensions from resize callbacks\n * @returns Position in pixels\n */\nexport function calcGridItemPosition(\n positionParams: PositionParams,\n x: number,\n y: number,\n w: number,\n h: number,\n dragPosition?: { top: number; left: number } | null,\n resizePosition?: {\n top: number;\n left: number;\n height: number;\n width: number;\n } | null\n): Position {\n const { margin, containerPadding, rowHeight } = positionParams;\n const colWidth = calcGridColWidth(positionParams);\n\n let width: number;\n let height: number;\n let top: number;\n let left: number;\n\n // If resizing, use the exact width and height from resize callbacks\n if (resizePosition) {\n width = Math.round(resizePosition.width);\n height = Math.round(resizePosition.height);\n } else {\n // Calculate from grid units\n width = calcGridItemWHPx(w, colWidth, margin[0]);\n height = calcGridItemWHPx(h, rowHeight, margin[1]);\n }\n\n // If dragging, use the exact left/top from drag callbacks\n if (dragPosition) {\n top = Math.round(dragPosition.top);\n left = Math.round(dragPosition.left);\n } else if (resizePosition) {\n // If resizing, use the exact left/top from resize position\n top = Math.round(resizePosition.top);\n left = Math.round(resizePosition.left);\n } else {\n // Calculate from grid units\n top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);\n left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);\n }\n\n return { top, left, width, height };\n}\n\n/**\n * Translate pixel coordinates to grid units.\n *\n * @param positionParams - Grid parameters\n * @param top - Top position in pixels (relative to parent)\n * @param left - Left position in pixels (relative to parent)\n * @param w - Width in grid units (for clamping)\n * @param h - Height in grid units (for clamping)\n * @returns x and y in grid units\n */\nexport function calcXY(\n positionParams: PositionParams,\n top: number,\n left: number,\n w: number,\n h: number\n): { x: number; y: number } {\n const { margin, containerPadding, cols, rowHeight, maxRows } = positionParams;\n const colWidth = calcGridColWidth(positionParams);\n\n // left = containerPaddingX + x * (colWidth + marginX)\n // x = (left - containerPaddingX) / (colWidth + marginX)\n let x = Math.round((left - containerPadding[0]) / (colWidth + margin[0]));\n let y = Math.round((top - containerPadding[1]) / (rowHeight + margin[1]));\n\n // Clamp to grid bounds\n x = clamp(x, 0, cols - w);\n y = clamp(y, 0, maxRows - h);\n\n return { x, y };\n}\n\n/**\n * Calculate grid units from pixel dimensions.\n *\n * @param positionParams - Grid parameters\n * @param width - Width in pixels\n * @param height - Height in pixels\n * @param x - X coordinate in grid units (for clamping)\n * @param y - Y coordinate in grid units (for clamping)\n * @param handle - Resize handle being used\n * @returns w, h in grid units\n */\nexport function calcWH(\n positionParams: PositionParams,\n width: number,\n height: number,\n x: number,\n y: number,\n handle: ResizeHandleAxis\n): { w: number; h: number } {\n const { margin, maxRows, cols, rowHeight } = positionParams;\n const colWidth = calcGridColWidth(positionParams);\n\n // width = colWidth * w - (margin * (w - 1))\n // w = (width + margin) / (colWidth + margin)\n const w = Math.round((width + margin[0]) / (colWidth + margin[0]));\n const h = Math.round((height + margin[1]) / (rowHeight + margin[1]));\n\n // Clamp based on resize handle direction\n let _w = clamp(w, 0, cols - x);\n let _h = clamp(h, 0, maxRows - y);\n\n // West handles can resize to full width\n if (handle === \"sw\" || handle === \"w\" || handle === \"nw\") {\n _w = clamp(w, 0, cols);\n }\n\n // North handles can resize to full height\n if (handle === \"nw\" || handle === \"n\" || handle === \"ne\") {\n _h = clamp(h, 0, maxRows);\n }\n\n return { w: _w, h: _h };\n}\n\n// ============================================================================\n// Utility Functions\n// ============================================================================\n\n/**\n * Clamp a number between bounds.\n *\n * @param num - Number to clamp\n * @param lowerBound - Minimum value\n * @param upperBound - Maximum value\n * @returns Clamped value\n */\nexport function clamp(\n num: number,\n lowerBound: number,\n upperBound: number\n): number {\n return Math.max(Math.min(num, upperBound), lowerBound);\n}\n\n// ============================================================================\n// Grid Background Calculations\n// ============================================================================\n\n/**\n * Grid cell dimension information for rendering backgrounds or overlays.\n */\nexport interface GridCellDimensions {\n /** Width of a single cell in pixels */\n readonly cellWidth: number;\n /** Height of a single cell in pixels */\n readonly cellHeight: number;\n /** Horizontal offset from container edge to first cell */\n readonly offsetX: number;\n /** Vertical offset from container edge to first cell */\n readonly offsetY: number;\n /** Horizontal gap between cells */\n readonly gapX: number;\n /** Vertical gap between cells */\n readonly gapY: number;\n /** Number of columns */\n readonly cols: number;\n /** Total container width */\n readonly containerWidth: number;\n}\n\n/**\n * Configuration for grid cell dimension calculation.\n */\nexport interface GridCellConfig {\n /** Container width in pixels */\n width: number;\n /** Number of columns */\n cols: number;\n /** Row height in pixels */\n rowHeight: number;\n /** Margin between items [x, y] */\n margin?: readonly [number, number];\n /** Container padding [x, y], defaults to margin if not specified */\n containerPadding?: readonly [number, number] | null;\n}\n\n/**\n * Calculate grid cell dimensions for rendering backgrounds or overlays.\n *\n * This function provides all the measurements needed to render a visual\n * grid background that aligns with the actual grid cells.\n *\n * @param config - Grid configuration\n * @returns Cell dimensions and offsets\n *\n * @example\n * ```tsx\n * import { calcGridCellDimensions } from 'react-grid-layout/core';\n *\n * const dims = calcGridCellDimensions({\n * width: 1200,\n * cols: 12,\n * rowHeight: 30,\n * margin: [10, 10],\n * containerPadding: [10, 10]\n * });\n *\n * // dims.cellWidth = 88.33...\n * // dims.cellHeight = 30\n * // dims.offsetX = 10 (containerPadding[0])\n * // dims.offsetY = 10 (containerPadding[1])\n * // dims.gapX = 10 (margin[0])\n * // dims.gapY = 10 (margin[1])\n * ```\n */\nexport function calcGridCellDimensions(\n config: GridCellConfig\n): GridCellDimensions {\n const {\n width,\n cols,\n rowHeight,\n margin = [10, 10],\n containerPadding\n } = config;\n\n // Container padding defaults to margin if not specified\n const padding = containerPadding ?? margin;\n\n // Calculate cell width: total width minus padding and gaps, divided by columns\n // Formula: width = 2*padding + cols*cellWidth + (cols-1)*gap\n // Solving for cellWidth: cellWidth = (width - 2*padding - (cols-1)*gap) / cols\n const cellWidth = (width - padding[0] * 2 - margin[0] * (cols - 1)) / cols;\n const cellHeight = rowHeight;\n\n return {\n cellWidth,\n cellHeight,\n offsetX: padding[0],\n offsetY: padding[1],\n gapX: margin[0],\n gapY: margin[1],\n cols,\n containerWidth: width\n };\n}\n"]}
'use strict';
var chunk3WO4SAYB_js = require('./chunk-3WO4SAYB.js');
var react = require('react');
var fastEquals = require('fast-equals');
function useContainerWidth(options = {}) {
const { measureBeforeMount = false, initialWidth = 1280 } = options;
const [width, setWidth] = react.useState(initialWidth);
const [mounted, setMounted] = react.useState(!measureBeforeMount);
const containerRef = react.useRef(null);
const observerRef = react.useRef(null);
const measureWidth = react.useCallback(() => {
const node = containerRef.current;
if (node) {
const newWidth = node.offsetWidth;
setWidth(newWidth);
if (!mounted) {
setMounted(true);
}
}
}, [mounted]);
react.useEffect(() => {
const node = containerRef.current;
if (!node) return;
measureWidth();
if (typeof ResizeObserver !== "undefined") {
observerRef.current = new ResizeObserver((entries) => {
const entry = entries[0];
if (entry) {
const newWidth = entry.contentRect.width;
setWidth(newWidth);
}
});
observerRef.current.observe(node);
}
return () => {
if (observerRef.current) {
observerRef.current.disconnect();
observerRef.current = null;
}
};
}, [measureWidth]);
return {
width,
mounted,
containerRef,
measureWidth
};
}
function useGridLayout(options) {
const {
layout: propsLayout,
cols,
compactType = "vertical",
allowOverlap = false,
preventCollision = false,
onLayoutChange
} = options;
const compactor = react.useMemo(
() => chunk3WO4SAYB_js.getCompactor(compactType, allowOverlap),
[compactType, allowOverlap]
);
const isDraggingRef = react.useRef(false);
const [layout, setLayoutState] = react.useState(() => {
const corrected = chunk3WO4SAYB_js.correctBounds(chunk3WO4SAYB_js.cloneLayout(propsLayout), { cols });
return chunk3WO4SAYB_js.compact(corrected, compactType, cols, allowOverlap);
});
const [dragState, setDragState] = react.useState({
activeDrag: null,
oldDragItem: null,
oldLayout: null
});
const [resizeState, setResizeState] = react.useState({
resizing: false,
oldResizeItem: null,
oldLayout: null
});
const [dropState, setDropState] = react.useState({
droppingDOMNode: null,
droppingPosition: null
});
const prevLayoutRef = react.useRef(layout);
const setLayout = react.useCallback(
(newLayout) => {
const corrected = chunk3WO4SAYB_js.correctBounds(chunk3WO4SAYB_js.cloneLayout(newLayout), { cols });
const compacted = chunk3WO4SAYB_js.compact(corrected, compactType, cols, allowOverlap);
setLayoutState(compacted);
},
[cols, compactType, allowOverlap]
);
react.useEffect(() => {
if (isDraggingRef.current) return;
if (!fastEquals.deepEqual(propsLayout, prevLayoutRef.current)) {
setLayout(propsLayout);
}
}, [propsLayout, setLayout]);
react.useEffect(() => {
if (!fastEquals.deepEqual(layout, prevLayoutRef.current)) {
prevLayoutRef.current = layout;
onLayoutChange?.(layout);
}
}, [layout, onLayoutChange]);
const onDragStart = react.useCallback(
(itemId, x, y) => {
const item = chunk3WO4SAYB_js.getLayoutItem(layout, itemId);
if (!item) return null;
isDraggingRef.current = true;
const placeholder = {
...chunk3WO4SAYB_js.cloneLayoutItem(item),
x,
y,
static: false,
moved: false
};
setDragState({
activeDrag: placeholder,
oldDragItem: chunk3WO4SAYB_js.cloneLayoutItem(item),
oldLayout: chunk3WO4SAYB_js.cloneLayout(layout)
});
return placeholder;
},
[layout]
);
const onDrag = react.useCallback(
(itemId, x, y) => {
const item = chunk3WO4SAYB_js.getLayoutItem(layout, itemId);
if (!item) return;
setDragState((prev) => ({
...prev,
activeDrag: prev.activeDrag ? { ...prev.activeDrag, x, y } : null
}));
const newLayout = chunk3WO4SAYB_js.moveElement(
layout,
item,
x,
y,
true,
// isUserAction
preventCollision,
compactType,
cols,
allowOverlap
);
const compacted = allowOverlap ? newLayout : chunk3WO4SAYB_js.compact(newLayout, compactType, cols);
setLayoutState(compacted);
},
[layout, cols, compactType, preventCollision, allowOverlap]
);
const onDragStop = react.useCallback(
(itemId, x, y) => {
const item = chunk3WO4SAYB_js.getLayoutItem(layout, itemId);
if (!item) return;
const newLayout = chunk3WO4SAYB_js.moveElement(
layout,
item,
x,
y,
true,
preventCollision,
compactType,
cols,
allowOverlap
);
const compacted = chunk3WO4SAYB_js.compact(newLayout, compactType, cols, allowOverlap);
isDraggingRef.current = false;
setDragState({
activeDrag: null,
oldDragItem: null,
oldLayout: null
});
setLayoutState(compacted);
},
[layout, cols, compactType, preventCollision, allowOverlap]
);
const onResizeStart = react.useCallback(
(itemId) => {
const item = chunk3WO4SAYB_js.getLayoutItem(layout, itemId);
if (!item) return null;
setResizeState({
resizing: true,
oldResizeItem: chunk3WO4SAYB_js.cloneLayoutItem(item),
oldLayout: chunk3WO4SAYB_js.cloneLayout(layout)
});
return item;
},
[layout]
);
const onResize = react.useCallback(
(itemId, w, h, x, y) => {
const newLayout = layout.map((item) => {
if (item.i === itemId) {
const updated = {
...item,
w,
h
};
if (x !== void 0) updated.x = x;
if (y !== void 0) updated.y = y;
return updated;
}
return item;
});
const corrected = chunk3WO4SAYB_js.correctBounds(newLayout, { cols });
const compacted = chunk3WO4SAYB_js.compact(corrected, compactType, cols, allowOverlap);
setLayoutState(compacted);
},
[layout, cols, compactType, allowOverlap]
);
const onResizeStop = react.useCallback(
(itemId, w, h) => {
onResize(itemId, w, h);
setResizeState({
resizing: false,
oldResizeItem: null,
oldLayout: null
});
},
[onResize]
);
const onDropDragOver = react.useCallback(
(droppingItem, position) => {
const existingItem = chunk3WO4SAYB_js.getLayoutItem(layout, droppingItem.i);
if (!existingItem) {
const newLayout = [...layout, droppingItem];
const corrected = chunk3WO4SAYB_js.correctBounds(newLayout, { cols });
const compacted = chunk3WO4SAYB_js.compact(corrected, compactType, cols, allowOverlap);
setLayoutState(compacted);
}
setDropState({
droppingDOMNode: null,
// Will be set by component
droppingPosition: position
});
},
[layout, cols, compactType, allowOverlap]
);
const onDropDragLeave = react.useCallback(() => {
const newLayout = layout.filter((item) => item.i !== "__dropping-elem__");
setLayoutState(newLayout);
setDropState({
droppingDOMNode: null,
droppingPosition: null
});
}, [layout]);
const onDrop = react.useCallback(
(droppingItem) => {
const newLayout = layout.map((item) => {
if (item.i === "__dropping-elem__") {
return {
...item,
i: droppingItem.i,
static: false
};
}
return item;
});
const corrected = chunk3WO4SAYB_js.correctBounds(newLayout, { cols });
const compacted = chunk3WO4SAYB_js.compact(corrected, compactType, cols, allowOverlap);
setLayoutState(compacted);
setDropState({
droppingDOMNode: null,
droppingPosition: null
});
},
[layout, cols, compactType, allowOverlap]
);
const containerHeight = react.useMemo(() => chunk3WO4SAYB_js.bottom(layout), [layout]);
const isInteracting = dragState.activeDrag !== null || resizeState.resizing || dropState.droppingPosition !== null;
return {
layout,
setLayout,
dragState,
resizeState,
dropState,
onDragStart,
onDrag,
onDragStop,
onResizeStart,
onResize,
onResizeStop,
onDropDragOver,
onDropDragLeave,
onDrop,
containerHeight,
isInteracting,
compactor
};
}
var DEFAULT_BREAKPOINTS = {
lg: 1200,
md: 996,
sm: 768,
xs: 480,
xxs: 0
};
var DEFAULT_COLS = {
lg: 12,
md: 10,
sm: 6,
xs: 4,
xxs: 2
};
function useResponsiveLayout(options) {
const {
width,
breakpoints = DEFAULT_BREAKPOINTS,
cols: colsConfig = DEFAULT_COLS,
layouts: propsLayouts = {},
compactType = "vertical",
onBreakpointChange,
onLayoutChange,
onWidthChange
} = options;
const sortedBreakpoints = react.useMemo(
() => chunk3WO4SAYB_js.sortBreakpoints(breakpoints),
[breakpoints]
);
const initialBreakpoint = react.useMemo(
() => chunk3WO4SAYB_js.getBreakpointFromWidth(breakpoints, width),
// Only calculate on mount, not on width changes
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
);
const initialCols = react.useMemo(
() => chunk3WO4SAYB_js.getColsFromBreakpoint(initialBreakpoint, colsConfig),
[initialBreakpoint, colsConfig]
);
const [breakpoint, setBreakpoint] = react.useState(initialBreakpoint);
const [cols, setCols] = react.useState(initialCols);
const [layouts, setLayoutsState] = react.useState(() => {
const cloned = {};
for (const bp of sortedBreakpoints) {
const layout2 = propsLayouts[bp];
if (layout2) {
cloned[bp] = chunk3WO4SAYB_js.cloneLayout(layout2);
}
}
return cloned;
});
const prevWidthRef = react.useRef(width);
const prevBreakpointRef = react.useRef(breakpoint);
const prevLayoutsRef = react.useRef(layouts);
const layout = react.useMemo(() => {
return chunk3WO4SAYB_js.findOrGenerateResponsiveLayout(
layouts,
breakpoints,
breakpoint,
prevBreakpointRef.current,
cols,
compactType
);
}, [layouts, breakpoints, breakpoint, cols, compactType]);
const setLayoutForBreakpoint = react.useCallback((bp, newLayout) => {
setLayoutsState((prev) => ({
...prev,
[bp]: chunk3WO4SAYB_js.cloneLayout(newLayout)
}));
}, []);
const setLayouts = react.useCallback((newLayouts) => {
const cloned = {};
for (const bp of Object.keys(newLayouts)) {
const layoutForBp = newLayouts[bp];
if (layoutForBp) {
cloned[bp] = chunk3WO4SAYB_js.cloneLayout(layoutForBp);
}
}
setLayoutsState(cloned);
}, []);
react.useEffect(() => {
if (prevWidthRef.current === width) return;
prevWidthRef.current = width;
const newBreakpoint = chunk3WO4SAYB_js.getBreakpointFromWidth(breakpoints, width);
const newCols = chunk3WO4SAYB_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
onWidthChange?.(width, [10, 10], newCols, null);
if (newBreakpoint !== breakpoint) {
const newLayout = chunk3WO4SAYB_js.findOrGenerateResponsiveLayout(
layouts,
breakpoints,
newBreakpoint,
breakpoint,
newCols,
compactType
);
const updatedLayouts = {
...layouts,
[newBreakpoint]: newLayout
};
setLayoutsState(updatedLayouts);
setBreakpoint(newBreakpoint);
setCols(newCols);
onBreakpointChange?.(newBreakpoint, newCols);
prevBreakpointRef.current = newBreakpoint;
}
}, [
width,
breakpoints,
colsConfig,
breakpoint,
layouts,
compactType,
onBreakpointChange,
onWidthChange
]);
react.useEffect(() => {
if (!fastEquals.deepEqual(propsLayouts, prevLayoutsRef.current)) {
setLayouts(propsLayouts);
prevLayoutsRef.current = propsLayouts;
}
}, [propsLayouts, setLayouts]);
react.useEffect(() => {
if (!fastEquals.deepEqual(layouts, prevLayoutsRef.current)) {
prevLayoutsRef.current = layouts;
onLayoutChange?.(layout, layouts);
}
}, [layout, layouts, onLayoutChange]);
return {
layout,
layouts,
breakpoint,
cols,
setLayoutForBreakpoint,
setLayouts,
sortedBreakpoints
};
}
exports.DEFAULT_BREAKPOINTS = DEFAULT_BREAKPOINTS;
exports.DEFAULT_COLS = DEFAULT_COLS;
exports.useContainerWidth = useContainerWidth;
exports.useGridLayout = useGridLayout;
exports.useResponsiveLayout = useResponsiveLayout;
//# sourceMappingURL=chunk-H5KMDLY3.js.map
//# sourceMappingURL=chunk-H5KMDLY3.js.map
{"version":3,"sources":["../src/react/hooks/useContainerWidth.ts","../src/react/hooks/useGridLayout.ts","../src/react/hooks/useResponsiveLayout.ts"],"names":["useState","useRef","useCallback","useEffect","useMemo","getCompactor","correctBounds","cloneLayout","compact","deepEqual","getLayoutItem","cloneLayoutItem","moveElement","bottom","sortBreakpoints","getBreakpointFromWidth","getColsFromBreakpoint","layout","findOrGenerateResponsiveLayout"],"mappings":"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","file":"chunk-H5KMDLY3.js","sourcesContent":["/**\n * useContainerWidth hook\n *\n * Observes container width using ResizeObserver and provides\n * reactive width updates for responsive layouts.\n */\n\nimport {\n useState,\n useEffect,\n useRef,\n useCallback,\n type RefObject\n} from \"react\";\n\nexport interface UseContainerWidthOptions {\n /**\n * If true, delays initial render until width is measured.\n * Useful for SSR or when you need accurate initial measurements.\n */\n measureBeforeMount?: boolean;\n\n /**\n * Initial width to use before measurement.\n * Defaults to 1280.\n */\n initialWidth?: number;\n}\n\nexport interface UseContainerWidthResult {\n /**\n * Current container width in pixels.\n */\n width: number;\n\n /**\n * Whether the container has been measured at least once.\n */\n mounted: boolean;\n\n /**\n * Ref to attach to the container element.\n */\n containerRef: RefObject<HTMLDivElement | null>;\n\n /**\n * Manually trigger a width measurement.\n * Useful when the container size might change without a resize event.\n */\n measureWidth: () => void;\n}\n\n/**\n * Hook to observe and track container width.\n *\n * Replaces the WidthProvider HOC with a more composable approach.\n *\n * @example\n * ```tsx\n * function MyGrid() {\n * const { width, containerRef, mounted } = useContainerWidth();\n *\n * return (\n * <div ref={containerRef}>\n * {mounted && <GridLayout width={width} {...props} />}\n * </div>\n * );\n * }\n * ```\n */\nexport function useContainerWidth(\n options: UseContainerWidthOptions = {}\n): UseContainerWidthResult {\n const { measureBeforeMount = false, initialWidth = 1280 } = options;\n\n const [width, setWidth] = useState(initialWidth);\n const [mounted, setMounted] = useState(!measureBeforeMount);\n const containerRef = useRef<HTMLDivElement | null>(null);\n const observerRef = useRef<ResizeObserver | null>(null);\n\n const measureWidth = useCallback(() => {\n const node = containerRef.current;\n if (node) {\n const newWidth = node.offsetWidth;\n setWidth(newWidth);\n if (!mounted) {\n setMounted(true);\n }\n }\n }, [mounted]);\n\n useEffect(() => {\n const node = containerRef.current;\n if (!node) return;\n\n // Initial measurement\n measureWidth();\n\n // Set up ResizeObserver\n if (typeof ResizeObserver !== \"undefined\") {\n observerRef.current = new ResizeObserver(entries => {\n const entry = entries[0];\n if (entry) {\n // Use contentRect.width for consistent measurements\n const newWidth = entry.contentRect.width;\n setWidth(newWidth);\n }\n });\n\n observerRef.current.observe(node);\n }\n\n return () => {\n if (observerRef.current) {\n observerRef.current.disconnect();\n observerRef.current = null;\n }\n };\n }, [measureWidth]);\n\n return {\n width,\n mounted,\n containerRef,\n measureWidth\n };\n}\n\nexport default useContainerWidth;\n","/**\n * useGridLayout hook\n *\n * Core hook for managing grid layout state, including drag, resize, and drop operations.\n * This extracts the state management logic from ReactGridLayout into a reusable hook.\n */\n\nimport { useState, useCallback, useMemo, useRef, useEffect } from \"react\";\nimport { deepEqual } from \"fast-equals\";\nimport type {\n Layout,\n LayoutItem,\n CompactType,\n DroppingPosition,\n Compactor,\n Mutable\n} from \"../../core/types.js\";\nimport {\n cloneLayout,\n cloneLayoutItem,\n moveElement,\n correctBounds,\n bottom,\n getLayoutItem\n} from \"../../core/layout.js\";\nimport { compact } from \"../../core/compact-compat.js\";\nimport { getCompactor } from \"../../core/compactors.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DragState {\n /** Currently dragging item placeholder */\n activeDrag: LayoutItem | null;\n /** Original item before drag started */\n oldDragItem: LayoutItem | null;\n /** Layout before drag started */\n oldLayout: Layout | null;\n}\n\nexport interface ResizeState {\n /** Whether a resize is in progress */\n resizing: boolean;\n /** Original item before resize started */\n oldResizeItem: LayoutItem | null;\n /** Layout before resize started */\n oldLayout: Layout | null;\n}\n\nexport interface DropState {\n /** DOM node for the dropping placeholder */\n droppingDOMNode: React.ReactElement | null;\n /** Current drop position */\n droppingPosition: DroppingPosition | null;\n}\n\nexport interface UseGridLayoutOptions {\n /** Initial layout */\n layout: Layout;\n /** Number of columns */\n cols: number;\n /** Compaction type: 'vertical', 'horizontal', or null */\n compactType?: CompactType;\n /** Allow items to overlap */\n allowOverlap?: boolean;\n /** Prevent collisions when moving items */\n preventCollision?: boolean;\n /** Called when layout changes */\n onLayoutChange?: (layout: Layout) => void;\n}\n\nexport interface UseGridLayoutResult {\n /** Current layout */\n layout: Layout;\n /** Set layout directly */\n setLayout: (layout: Layout) => void;\n /** Drag state */\n dragState: DragState;\n /** Resize state */\n resizeState: ResizeState;\n /** Drop state */\n dropState: DropState;\n /** Start dragging an item */\n onDragStart: (itemId: string, x: number, y: number) => LayoutItem | null;\n /** Update drag position */\n onDrag: (itemId: string, x: number, y: number) => void;\n /** Stop dragging */\n onDragStop: (itemId: string, x: number, y: number) => void;\n /** Start resizing an item */\n onResizeStart: (itemId: string) => LayoutItem | null;\n /** Update resize dimensions */\n onResize: (\n itemId: string,\n w: number,\n h: number,\n x?: number,\n y?: number\n ) => void;\n /** Stop resizing */\n onResizeStop: (itemId: string, w: number, h: number) => void;\n /** Start dropping (external drag-in) */\n onDropDragOver: (\n droppingItem: LayoutItem,\n position: DroppingPosition\n ) => void;\n /** Update drop position */\n onDropDragLeave: () => void;\n /** Complete drop */\n onDrop: (droppingItem: LayoutItem) => void;\n /** Container height in rows */\n containerHeight: number;\n /** Whether any drag/resize is active */\n isInteracting: boolean;\n /** Get the compactor being used */\n compactor: Compactor;\n}\n\n// ============================================================================\n// Hook Implementation\n// ============================================================================\n\n/**\n * Hook for managing grid layout state.\n *\n * Handles all layout state including drag, resize, and drop operations.\n * Uses immutable updates and provides callbacks for all interactions.\n *\n * @example\n * ```tsx\n * function MyGrid() {\n * const {\n * layout,\n * onDragStart,\n * onDrag,\n * onDragStop,\n * containerHeight\n * } = useGridLayout({\n * layout: initialLayout,\n * cols: 12,\n * compactType: 'vertical'\n * });\n *\n * return (\n * <div style={{ height: containerHeight }}>\n * {layout.map(item => (\n * <GridItem\n * key={item.i}\n * {...item}\n * onDragStart={() => onDragStart(item.i, item.x, item.y)}\n * />\n * ))}\n * </div>\n * );\n * }\n * ```\n */\nexport function useGridLayout(\n options: UseGridLayoutOptions\n): UseGridLayoutResult {\n const {\n layout: propsLayout,\n cols,\n compactType = \"vertical\",\n allowOverlap = false,\n preventCollision = false,\n onLayoutChange\n } = options;\n\n // Get the appropriate compactor\n const compactor = useMemo(\n () => getCompactor(compactType, allowOverlap),\n [compactType, allowOverlap]\n );\n\n // Track if we're currently dragging to block prop updates\n const isDraggingRef = useRef(false);\n\n // Initialize layout with compaction\n const [layout, setLayoutState] = useState<Layout>(() => {\n const corrected = correctBounds(cloneLayout(propsLayout), { cols });\n return compact(corrected, compactType, cols, allowOverlap);\n });\n\n // Drag state\n const [dragState, setDragState] = useState<DragState>({\n activeDrag: null,\n oldDragItem: null,\n oldLayout: null\n });\n\n // Resize state\n const [resizeState, setResizeState] = useState<ResizeState>({\n resizing: false,\n oldResizeItem: null,\n oldLayout: null\n });\n\n // Drop state\n const [dropState, setDropState] = useState<DropState>({\n droppingDOMNode: null,\n droppingPosition: null\n });\n\n // Track previous layout for change detection\n const prevLayoutRef = useRef<Layout>(layout);\n\n // Set layout with optional compaction\n const setLayout = useCallback(\n (newLayout: Layout) => {\n const corrected = correctBounds(cloneLayout(newLayout), { cols });\n const compacted = compact(corrected, compactType, cols, allowOverlap);\n setLayoutState(compacted);\n },\n [cols, compactType, allowOverlap]\n );\n\n // Sync layout from props when not dragging\n useEffect(() => {\n if (isDraggingRef.current) return;\n\n if (!deepEqual(propsLayout, prevLayoutRef.current)) {\n setLayout(propsLayout);\n }\n }, [propsLayout, setLayout]);\n\n // Notify layout changes\n useEffect(() => {\n if (!deepEqual(layout, prevLayoutRef.current)) {\n prevLayoutRef.current = layout;\n onLayoutChange?.(layout);\n }\n }, [layout, onLayoutChange]);\n\n // ============================================================================\n // Drag Handlers\n // ============================================================================\n\n const onDragStart = useCallback(\n (itemId: string, x: number, y: number): LayoutItem | null => {\n const item = getLayoutItem(layout, itemId);\n if (!item) return null;\n\n isDraggingRef.current = true;\n\n const placeholder: LayoutItem = {\n ...cloneLayoutItem(item),\n x,\n y,\n static: false,\n moved: false\n };\n\n setDragState({\n activeDrag: placeholder,\n oldDragItem: cloneLayoutItem(item),\n oldLayout: cloneLayout(layout)\n });\n\n return placeholder;\n },\n [layout]\n );\n\n const onDrag = useCallback(\n (itemId: string, x: number, y: number) => {\n const item = getLayoutItem(layout, itemId);\n if (!item) return;\n\n // Update placeholder position\n setDragState(prev => ({\n ...prev,\n activeDrag: prev.activeDrag ? { ...prev.activeDrag, x, y } : null\n }));\n\n // Move element and update layout\n const newLayout = moveElement(\n layout,\n item,\n x,\n y,\n true, // isUserAction\n preventCollision,\n compactType,\n cols,\n allowOverlap\n );\n\n // Compact layout\n const compacted = allowOverlap\n ? newLayout\n : compact(newLayout, compactType, cols);\n\n setLayoutState(compacted);\n },\n [layout, cols, compactType, preventCollision, allowOverlap]\n );\n\n const onDragStop = useCallback(\n (itemId: string, x: number, y: number) => {\n const item = getLayoutItem(layout, itemId);\n if (!item) return;\n\n // Final move\n const newLayout = moveElement(\n layout,\n item,\n x,\n y,\n true,\n preventCollision,\n compactType,\n cols,\n allowOverlap\n );\n\n // Compact and finalize\n const compacted = compact(newLayout, compactType, cols, allowOverlap);\n\n isDraggingRef.current = false;\n\n setDragState({\n activeDrag: null,\n oldDragItem: null,\n oldLayout: null\n });\n\n setLayoutState(compacted);\n },\n [layout, cols, compactType, preventCollision, allowOverlap]\n );\n\n // ============================================================================\n // Resize Handlers\n // ============================================================================\n\n const onResizeStart = useCallback(\n (itemId: string): LayoutItem | null => {\n const item = getLayoutItem(layout, itemId);\n if (!item) return null;\n\n setResizeState({\n resizing: true,\n oldResizeItem: cloneLayoutItem(item),\n oldLayout: cloneLayout(layout)\n });\n\n return item;\n },\n [layout]\n );\n\n const onResize = useCallback(\n (itemId: string, w: number, h: number, x?: number, y?: number) => {\n const newLayout = layout.map(item => {\n if (item.i === itemId) {\n const updated: LayoutItem = {\n ...item,\n w,\n h\n };\n if (x !== undefined) (updated as Mutable<LayoutItem>).x = x;\n if (y !== undefined) (updated as Mutable<LayoutItem>).y = y;\n return updated;\n }\n return item;\n });\n\n // Correct bounds and compact\n const corrected = correctBounds(newLayout, { cols });\n const compacted = compact(corrected, compactType, cols, allowOverlap);\n\n setLayoutState(compacted);\n },\n [layout, cols, compactType, allowOverlap]\n );\n\n const onResizeStop = useCallback(\n (itemId: string, w: number, h: number) => {\n // Apply final resize\n onResize(itemId, w, h);\n\n setResizeState({\n resizing: false,\n oldResizeItem: null,\n oldLayout: null\n });\n },\n [onResize]\n );\n\n // ============================================================================\n // Drop Handlers\n // ============================================================================\n\n const onDropDragOver = useCallback(\n (droppingItem: LayoutItem, position: DroppingPosition) => {\n // Check if item already exists in layout\n const existingItem = getLayoutItem(layout, droppingItem.i);\n\n if (!existingItem) {\n // Add dropping item to layout\n const newLayout = [...layout, droppingItem];\n const corrected = correctBounds(newLayout, { cols });\n const compacted = compact(corrected, compactType, cols, allowOverlap);\n setLayoutState(compacted);\n }\n\n setDropState({\n droppingDOMNode: null, // Will be set by component\n droppingPosition: position\n });\n },\n [layout, cols, compactType, allowOverlap]\n );\n\n const onDropDragLeave = useCallback(() => {\n // Remove dropping placeholder from layout\n const newLayout = layout.filter(item => item.i !== \"__dropping-elem__\");\n setLayoutState(newLayout);\n\n setDropState({\n droppingDOMNode: null,\n droppingPosition: null\n });\n }, [layout]);\n\n const onDrop = useCallback(\n (droppingItem: LayoutItem) => {\n // Replace placeholder with actual item\n const newLayout = layout.map(item => {\n if (item.i === \"__dropping-elem__\") {\n return {\n ...item,\n i: droppingItem.i,\n static: false\n };\n }\n return item;\n });\n\n const corrected = correctBounds(newLayout, { cols });\n const compacted = compact(corrected, compactType, cols, allowOverlap);\n setLayoutState(compacted);\n\n setDropState({\n droppingDOMNode: null,\n droppingPosition: null\n });\n },\n [layout, cols, compactType, allowOverlap]\n );\n\n // ============================================================================\n // Computed Values\n // ============================================================================\n\n const containerHeight = useMemo(() => bottom(layout), [layout]);\n\n const isInteracting =\n dragState.activeDrag !== null ||\n resizeState.resizing ||\n dropState.droppingPosition !== null;\n\n return {\n layout,\n setLayout,\n dragState,\n resizeState,\n dropState,\n onDragStart,\n onDrag,\n onDragStop,\n onResizeStart,\n onResize,\n onResizeStop,\n onDropDragOver,\n onDropDragLeave,\n onDrop,\n containerHeight,\n isInteracting,\n compactor\n };\n}\n\nexport default useGridLayout;\n","/**\n * useResponsiveLayout hook\n *\n * Manages responsive breakpoints and layout generation for different screen sizes.\n * Extracts state management from ResponsiveReactGridLayout into a reusable hook.\n */\n\nimport { useState, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { deepEqual } from \"fast-equals\";\nimport type {\n Layout,\n Breakpoint,\n Breakpoints,\n ResponsiveLayouts,\n CompactType\n} from \"../../core/types.js\";\nimport { cloneLayout } from \"../../core/layout.js\";\nimport {\n getBreakpointFromWidth,\n getColsFromBreakpoint,\n findOrGenerateResponsiveLayout,\n sortBreakpoints\n} from \"../../core/responsive.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/** Default breakpoint names */\nexport type DefaultBreakpoints = \"lg\" | \"md\" | \"sm\" | \"xs\" | \"xxs\";\n\n/** Default breakpoint widths */\nexport const DEFAULT_BREAKPOINTS: Breakpoints<DefaultBreakpoints> = {\n lg: 1200,\n md: 996,\n sm: 768,\n xs: 480,\n xxs: 0\n};\n\n/** Default column counts per breakpoint */\nexport const DEFAULT_COLS: Breakpoints<DefaultBreakpoints> = {\n lg: 12,\n md: 10,\n sm: 6,\n xs: 4,\n xxs: 2\n};\n\nexport interface UseResponsiveLayoutOptions<\n B extends Breakpoint = DefaultBreakpoints\n> {\n /** Current container width */\n width: number;\n /** Breakpoint definitions (name → min-width) */\n breakpoints?: Breakpoints<B>;\n /** Column counts per breakpoint */\n cols?: Breakpoints<B>;\n /** Layouts for each breakpoint */\n layouts?: ResponsiveLayouts<B>;\n /** Compaction type */\n compactType?: CompactType;\n /** Called when breakpoint changes */\n onBreakpointChange?: (newBreakpoint: B, cols: number) => void;\n /** Called when layout changes */\n onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;\n /** Called when width changes */\n onWidthChange?: (\n width: number,\n margin: readonly [number, number],\n cols: number,\n containerPadding: readonly [number, number] | null\n ) => void;\n}\n\nexport interface UseResponsiveLayoutResult<\n B extends Breakpoint = DefaultBreakpoints\n> {\n /** Current layout for the active breakpoint */\n layout: Layout;\n /** All layouts by breakpoint */\n layouts: ResponsiveLayouts<B>;\n /** Current active breakpoint */\n breakpoint: B;\n /** Column count for the current breakpoint */\n cols: number;\n /** Update layouts for a specific breakpoint */\n setLayoutForBreakpoint: (breakpoint: B, layout: Layout) => void;\n /** Update all layouts */\n setLayouts: (layouts: ResponsiveLayouts<B>) => void;\n /** Sorted array of breakpoint names (smallest to largest) */\n sortedBreakpoints: B[];\n}\n\n// ============================================================================\n// Hook Implementation\n// ============================================================================\n\n/**\n * Hook for managing responsive grid layouts.\n *\n * Automatically selects the appropriate layout based on container width\n * and generates layouts for new breakpoints from existing ones.\n *\n * @example\n * ```tsx\n * function MyResponsiveGrid() {\n * const { width, containerRef } = useContainerWidth();\n * const { layout, breakpoint, cols } = useResponsiveLayout({\n * width,\n * layouts: {\n * lg: [...],\n * md: [...],\n * sm: [...]\n * }\n * });\n *\n * return (\n * <div ref={containerRef}>\n * <GridLayout\n * width={width}\n * cols={cols}\n * layout={layout}\n * />\n * </div>\n * );\n * }\n * ```\n */\nexport function useResponsiveLayout<B extends Breakpoint = DefaultBreakpoints>(\n options: UseResponsiveLayoutOptions<B>\n): UseResponsiveLayoutResult<B> {\n const {\n width,\n breakpoints = DEFAULT_BREAKPOINTS as unknown as Breakpoints<B>,\n cols: colsConfig = DEFAULT_COLS as unknown as Breakpoints<B>,\n layouts: propsLayouts = {} as ResponsiveLayouts<B>,\n compactType = \"vertical\",\n onBreakpointChange,\n onLayoutChange,\n onWidthChange\n } = options;\n\n // Sorted breakpoints for consistent ordering\n const sortedBreakpoints = useMemo(\n () => sortBreakpoints(breakpoints),\n [breakpoints]\n );\n\n // Calculate initial breakpoint and cols\n const initialBreakpoint = useMemo(\n () => getBreakpointFromWidth(breakpoints, width),\n // Only calculate on mount, not on width changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n []\n );\n\n const initialCols = useMemo(\n () => getColsFromBreakpoint(initialBreakpoint, colsConfig),\n [initialBreakpoint, colsConfig]\n );\n\n // State\n const [breakpoint, setBreakpoint] = useState<B>(initialBreakpoint);\n const [cols, setCols] = useState<number>(initialCols);\n const [layouts, setLayoutsState] = useState<ResponsiveLayouts<B>>(() => {\n // Clone initial layouts\n const cloned = {} as ResponsiveLayouts<B>;\n for (const bp of sortedBreakpoints) {\n const layout = propsLayouts[bp];\n if (layout) {\n (cloned as Record<B, Layout>)[bp] = cloneLayout(layout);\n }\n }\n return cloned;\n });\n\n // Track previous values for change detection\n const prevWidthRef = useRef(width);\n const prevBreakpointRef = useRef(breakpoint);\n const prevLayoutsRef = useRef(layouts);\n\n // Current layout for the active breakpoint\n const layout = useMemo(() => {\n return findOrGenerateResponsiveLayout(\n layouts,\n breakpoints,\n breakpoint,\n prevBreakpointRef.current,\n cols,\n compactType\n );\n }, [layouts, breakpoints, breakpoint, cols, compactType]);\n\n // Set layout for a specific breakpoint\n const setLayoutForBreakpoint = useCallback((bp: B, newLayout: Layout) => {\n setLayoutsState((prev: ResponsiveLayouts<B>) => ({\n ...prev,\n [bp]: cloneLayout(newLayout)\n }));\n }, []);\n\n // Set all layouts\n const setLayouts = useCallback((newLayouts: ResponsiveLayouts<B>) => {\n const cloned = {} as ResponsiveLayouts<B>;\n for (const bp of Object.keys(newLayouts) as B[]) {\n const layoutForBp = newLayouts[bp];\n if (layoutForBp) {\n (cloned as Record<B, Layout>)[bp] = cloneLayout(layoutForBp);\n }\n }\n setLayoutsState(cloned);\n }, []);\n\n // Handle width changes\n useEffect(() => {\n if (prevWidthRef.current === width) return;\n prevWidthRef.current = width;\n\n // Determine new breakpoint\n const newBreakpoint = getBreakpointFromWidth(breakpoints, width);\n const newCols = getColsFromBreakpoint(newBreakpoint, colsConfig);\n\n // Notify width change\n onWidthChange?.(width, [10, 10], newCols, null);\n\n // Check if breakpoint changed\n if (newBreakpoint !== breakpoint) {\n // Generate layout for new breakpoint\n const newLayout = findOrGenerateResponsiveLayout(\n layouts,\n breakpoints,\n newBreakpoint,\n breakpoint,\n newCols,\n compactType\n );\n\n // Update layouts with the new breakpoint layout\n const updatedLayouts: ResponsiveLayouts<B> = {\n ...layouts,\n [newBreakpoint]: newLayout\n };\n\n setLayoutsState(updatedLayouts);\n setBreakpoint(newBreakpoint);\n setCols(newCols);\n\n // Notify breakpoint change\n onBreakpointChange?.(newBreakpoint, newCols);\n\n prevBreakpointRef.current = newBreakpoint;\n }\n }, [\n width,\n breakpoints,\n colsConfig,\n breakpoint,\n layouts,\n compactType,\n onBreakpointChange,\n onWidthChange\n ]);\n\n // Sync with prop layouts when they change\n useEffect(() => {\n if (!deepEqual(propsLayouts, prevLayoutsRef.current)) {\n setLayouts(propsLayouts);\n prevLayoutsRef.current = propsLayouts;\n }\n }, [propsLayouts, setLayouts]);\n\n // Notify layout changes\n useEffect(() => {\n if (!deepEqual(layouts, prevLayoutsRef.current)) {\n prevLayoutsRef.current = layouts;\n onLayoutChange?.(layout, layouts);\n }\n }, [layout, layouts, onLayoutChange]);\n\n return {\n layout,\n layouts,\n breakpoint,\n cols,\n setLayoutForBreakpoint,\n setLayouts,\n sortedBreakpoints\n };\n}\n\nexport default useResponsiveLayout;\n"]}
'use strict';
//# sourceMappingURL=chunk-PBQSHIID.js.map
//# sourceMappingURL=chunk-PBQSHIID.js.map
{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-PBQSHIID.js"}
import { setTransform, setTopLeft, perc, resizeItemInDirection, defaultPositionStrategy, defaultGridConfig, defaultDragConfig, defaultResizeConfig, defaultDropConfig, getCompactor, bottom, getLayoutItem, cloneLayoutItem, moveElement, compact, withLayoutItem, getAllCollisions, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout, cloneLayout, getIndentationValue, correctBounds } from './chunk-4HNUMWQK.mjs';
import { calcXY, calcGridItemWHPx, clamp, calcGridColWidth, calcWH, calcGridItemPosition } from './chunk-2KUHNJXF.mjs';
import React2, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
import { DraggableCore } from 'react-draggable';
import { Resizable } from 'react-resizable';
import clsx from 'clsx';
import { jsx, jsxs } from 'react/jsx-runtime';
import { deepEqual } from 'fast-equals';
function GridItem(props) {
const {
children,
cols,
containerWidth,
margin,
containerPadding,
rowHeight,
maxRows,
isDraggable,
isResizable,
isBounded,
static: isStatic,
useCSSTransforms = true,
usePercentages = false,
transformScale = 1,
droppingPosition,
className = "",
style,
handle = "",
cancel = "",
x,
y,
w,
h,
minW = 1,
maxW = Infinity,
minH = 1,
maxH = Infinity,
i,
resizeHandles,
resizeHandle,
onDragStart: onDragStartProp,
onDrag: onDragProp,
onDragStop: onDragStopProp,
onResizeStart: onResizeStartProp,
onResize: onResizeProp,
onResizeStop: onResizeStopProp
} = props;
const [dragging, setDragging] = useState(false);
const [resizing, setResizing] = useState(false);
const elementRef = useRef(null);
const dragPositionRef = useRef({ left: 0, top: 0 });
const resizePositionRef = useRef({
top: 0,
left: 0,
width: 0,
height: 0
});
const prevDroppingPositionRef = useRef(
void 0
);
const positionParams = useMemo(
() => ({
cols,
containerPadding,
containerWidth,
margin,
maxRows,
rowHeight
}),
[cols, containerPadding, containerWidth, margin, maxRows, rowHeight]
);
const createStyle = useCallback(
(pos2) => {
if (useCSSTransforms) {
return setTransform(pos2);
}
const styleObj = setTopLeft(pos2);
if (usePercentages) {
return {
...styleObj,
left: perc(pos2.left / containerWidth),
width: perc(pos2.width / containerWidth)
};
}
return styleObj;
},
[useCSSTransforms, usePercentages, containerWidth]
);
const onDragStart = useCallback(
(e, { node }) => {
if (!onDragStartProp) return;
const { offsetParent } = node;
if (!offsetParent) return;
const parentRect = offsetParent.getBoundingClientRect();
const clientRect = node.getBoundingClientRect();
const cLeft = clientRect.left / transformScale;
const pLeft = parentRect.left / transformScale;
const cTop = clientRect.top / transformScale;
const pTop = parentRect.top / transformScale;
const newPosition = {
left: cLeft - pLeft + offsetParent.scrollLeft,
top: cTop - pTop + offsetParent.scrollTop
};
dragPositionRef.current = newPosition;
setDragging(true);
const { x: newX, y: newY } = calcXY(
positionParams,
newPosition.top,
newPosition.left,
w,
h
);
onDragStartProp(i, newX, newY, {
e,
node,
newPosition
});
},
[onDragStartProp, transformScale, positionParams, w, h, i]
);
const onDrag = useCallback(
(e, { node, deltaX, deltaY }) => {
if (!onDragProp || !dragging) return;
let top = dragPositionRef.current.top + deltaY;
let left = dragPositionRef.current.left + deltaX;
if (isBounded) {
const { offsetParent } = node;
if (offsetParent) {
const bottomBoundary = offsetParent.clientHeight - calcGridItemWHPx(h, rowHeight, margin[1]);
top = clamp(top, 0, bottomBoundary);
const colWidth = calcGridColWidth(positionParams);
const rightBoundary = containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
left = clamp(left, 0, rightBoundary);
}
}
const newPosition = { top, left };
dragPositionRef.current = newPosition;
const { x: newX, y: newY } = calcXY(positionParams, top, left, w, h);
onDragProp(i, newX, newY, {
e,
node,
newPosition
});
},
[
onDragProp,
dragging,
isBounded,
h,
rowHeight,
margin,
positionParams,
containerWidth,
w,
i
]
);
const onDragStop = useCallback(
(e, { node }) => {
if (!onDragStopProp || !dragging) return;
const { left, top } = dragPositionRef.current;
const newPosition = { top, left };
setDragging(false);
dragPositionRef.current = { left: 0, top: 0 };
const { x: newX, y: newY } = calcXY(positionParams, top, left, w, h);
onDragStopProp(i, newX, newY, {
e,
node,
newPosition
});
},
[onDragStopProp, dragging, positionParams, w, h, i]
);
const onResizeHandler = useCallback(
(e, { node, size, handle: resizeHandle2 }, position, handlerName) => {
const handler = handlerName === "onResizeStart" ? onResizeStartProp : handlerName === "onResize" ? onResizeProp : onResizeStopProp;
if (!handler) return;
let updatedSize;
if (node) {
updatedSize = resizeItemInDirection(
resizeHandle2,
position,
size,
containerWidth
);
} else {
updatedSize = {
...size,
top: position.top,
left: position.left
};
}
resizePositionRef.current = updatedSize;
let { w: newW, h: newH } = calcWH(
positionParams,
updatedSize.width,
updatedSize.height,
x,
y,
resizeHandle2
);
newW = clamp(newW, Math.max(minW, 1), maxW);
newH = clamp(newH, minH, maxH);
handler(i, newW, newH, {
e: e.nativeEvent,
node,
size: updatedSize,
handle: resizeHandle2
});
},
[
onResizeStartProp,
onResizeProp,
onResizeStopProp,
containerWidth,
positionParams,
x,
y,
minW,
maxW,
minH,
maxH,
i
]
);
const handleResizeStart = useCallback(
(e, data) => {
setResizing(true);
const pos2 = calcGridItemPosition(positionParams, x, y, w, h);
const typedData = {
...data,
handle: data.handle
};
onResizeHandler(e, typedData, pos2, "onResizeStart");
},
[onResizeHandler, positionParams, x, y, w, h]
);
const handleResize = useCallback(
(e, data) => {
const pos2 = calcGridItemPosition(positionParams, x, y, w, h);
const typedData = {
...data,
handle: data.handle
};
onResizeHandler(e, typedData, pos2, "onResize");
},
[onResizeHandler, positionParams, x, y, w, h]
);
const handleResizeStop = useCallback(
(e, data) => {
setResizing(false);
resizePositionRef.current = { top: 0, left: 0, width: 0, height: 0 };
const pos2 = calcGridItemPosition(positionParams, x, y, w, h);
const typedData = {
...data,
handle: data.handle
};
onResizeHandler(e, typedData, pos2, "onResizeStop");
},
[onResizeHandler, positionParams, x, y, w, h]
);
useEffect(() => {
if (!droppingPosition) return;
const node = elementRef.current;
if (!node) return;
const prevDroppingPosition = prevDroppingPositionRef.current || {
left: 0,
top: 0
};
const shouldDrag = dragging && (droppingPosition.left !== prevDroppingPosition.left || droppingPosition.top !== prevDroppingPosition.top);
if (!dragging) {
const fakeData = {
node,
deltaX: droppingPosition.left,
deltaY: droppingPosition.top,
lastX: 0,
lastY: 0,
x: droppingPosition.left,
y: droppingPosition.top
};
onDragStart(droppingPosition.e, fakeData);
} else if (shouldDrag) {
const deltaX = droppingPosition.left - dragPositionRef.current.left;
const deltaY = droppingPosition.top - dragPositionRef.current.top;
const fakeData = {
node,
deltaX,
deltaY,
lastX: dragPositionRef.current.left,
lastY: dragPositionRef.current.top,
x: droppingPosition.left,
y: droppingPosition.top
};
onDrag(droppingPosition.e, fakeData);
}
prevDroppingPositionRef.current = droppingPosition;
}, [droppingPosition, dragging, onDragStart, onDrag]);
const pos = calcGridItemPosition(
positionParams,
x,
y,
w,
h,
dragging ? dragPositionRef.current : null,
resizing ? resizePositionRef.current : null
);
const child = React2.Children.only(children);
const maxWidth = calcGridItemPosition(positionParams, 0, 0, cols, 0).width;
const mins = calcGridItemPosition(positionParams, 0, 0, minW, minH);
const maxes = calcGridItemPosition(positionParams, 0, 0, maxW, maxH);
const minConstraints = [mins.width, mins.height];
const maxConstraints = [
Math.min(maxes.width, maxWidth),
Math.min(maxes.height, Infinity)
];
const childProps = child.props;
const childClassName = childProps["className"];
const childStyle = childProps["style"];
let newChild = React2.cloneElement(child, {
ref: elementRef,
className: clsx("react-grid-item", childClassName, className, {
static: isStatic,
resizing,
"react-draggable": isDraggable,
"react-draggable-dragging": dragging,
dropping: Boolean(droppingPosition),
cssTransforms: useCSSTransforms
}),
style: {
...style,
...childStyle,
...createStyle(pos)
}
});
const resizableHandle = resizeHandle;
newChild = /* @__PURE__ */ jsx(
Resizable,
{
draggableOpts: { disabled: !isResizable },
className: isResizable ? void 0 : "react-resizable-hide",
width: pos.width,
height: pos.height,
minConstraints,
maxConstraints,
onResizeStart: handleResizeStart,
onResize: handleResize,
onResizeStop: handleResizeStop,
transformScale,
resizeHandles,
handle: resizableHandle,
children: newChild
}
);
newChild = /* @__PURE__ */ jsx(
DraggableCore,
{
disabled: !isDraggable,
onStart: onDragStart,
onDrag,
onStop: onDragStop,
handle,
cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""),
scale: transformScale,
nodeRef: elementRef,
children: newChild
}
);
return newChild;
}
var noop = () => {
};
var layoutClassName = "react-grid-layout";
var isFirefox = false;
try {
isFirefox = /firefox/i.test(navigator.userAgent);
} catch {
}
function childrenEqual(a, b) {
const aArr = React2.Children.toArray(a);
const bArr = React2.Children.toArray(b);
if (aArr.length !== bArr.length) return false;
for (let i = 0; i < aArr.length; i++) {
const aChild = aArr[i];
const bChild = bArr[i];
if (aChild?.key !== bChild?.key) return false;
}
return true;
}
function synchronizeLayoutWithChildren(initialLayout, children, cols, compactType, allowOverlap) {
const layout = [];
const childKeys = /* @__PURE__ */ new Set();
React2.Children.forEach(children, (child) => {
if (!React2.isValidElement(child) || child.key === null) return;
const key = String(child.key);
childKeys.add(key);
const existingItem = initialLayout.find((l) => l.i === key);
if (existingItem) {
layout.push(cloneLayoutItem(existingItem));
} else {
const childProps = child.props;
const dataGrid = childProps["data-grid"];
if (dataGrid) {
layout.push({
i: key,
x: dataGrid.x ?? 0,
y: dataGrid.y ?? 0,
w: dataGrid.w ?? 1,
h: dataGrid.h ?? 1,
minW: dataGrid.minW,
maxW: dataGrid.maxW,
minH: dataGrid.minH,
maxH: dataGrid.maxH,
static: dataGrid.static,
isDraggable: dataGrid.isDraggable,
isResizable: dataGrid.isResizable,
resizeHandles: dataGrid.resizeHandles,
isBounded: dataGrid.isBounded
});
} else {
layout.push({
i: key,
x: 0,
y: bottom(layout),
w: 1,
h: 1
});
}
}
});
const corrected = correctBounds(layout, { cols });
return compact(corrected, compactType, cols, allowOverlap);
}
function GridLayout(props) {
const {
// Required
children,
width,
// Composable config interfaces
gridConfig: gridConfigProp,
dragConfig: dragConfigProp,
resizeConfig: resizeConfigProp,
dropConfig: dropConfigProp,
positionStrategy = defaultPositionStrategy,
compactor: compactorProp,
// Layout data
layout: propsLayout = [],
droppingItem: droppingItemProp,
// Container props
autoSize = true,
className = "",
style = {},
innerRef,
// Callbacks
onLayoutChange = noop,
onDragStart: onDragStartProp = noop,
onDrag: onDragProp = noop,
onDragStop: onDragStopProp = noop,
onResizeStart: onResizeStartProp = noop,
onResize: onResizeProp = noop,
onResizeStop: onResizeStopProp = noop,
onDrop: onDropProp = noop,
onDropDragOver: onDropDragOverProp = noop
} = props;
const gridConfig = useMemo(
() => ({ ...defaultGridConfig, ...gridConfigProp }),
[gridConfigProp]
);
const dragConfig = useMemo(
() => ({ ...defaultDragConfig, ...dragConfigProp }),
[dragConfigProp]
);
const resizeConfig = useMemo(
() => ({ ...defaultResizeConfig, ...resizeConfigProp }),
[resizeConfigProp]
);
const dropConfig = useMemo(
() => ({ ...defaultDropConfig, ...dropConfigProp }),
[dropConfigProp]
);
const { cols, rowHeight, maxRows, margin, containerPadding } = gridConfig;
const {
enabled: isDraggable,
bounded: isBounded,
handle: draggableHandle,
cancel: draggableCancel
} = dragConfig;
const {
enabled: isResizable,
handles: resizeHandles,
handleComponent: resizeHandle
} = resizeConfig;
const { enabled: isDroppable, defaultItem: defaultDropItem } = dropConfig;
const compactor = compactorProp ?? getCompactor("vertical");
const compactType = compactor.type;
const allowOverlap = compactor.allowOverlap;
const preventCollision = compactor.preventCollision ?? false;
const droppingItem = useMemo(
() => droppingItemProp ?? {
i: "__dropping-elem__",
...defaultDropItem
},
[droppingItemProp, defaultDropItem]
);
const useCSSTransforms = positionStrategy.type === "transform";
const transformScale = positionStrategy.scale;
const effectiveContainerPadding = containerPadding ?? margin;
const [mounted, setMounted] = useState(false);
const [layout, setLayout] = useState(
() => synchronizeLayoutWithChildren(
propsLayout,
children,
cols,
compactType,
allowOverlap
)
);
const [activeDrag, setActiveDrag] = useState(null);
const [resizing, setResizing] = useState(false);
const [droppingDOMNode, setDroppingDOMNode] = useState(
null
);
const [droppingPosition, setDroppingPosition] = useState();
const oldDragItemRef = useRef(null);
const oldResizeItemRef = useRef(null);
const oldLayoutRef = useRef(null);
const dragEnterCounterRef = useRef(0);
const prevLayoutRef = useRef(layout);
const prevPropsLayoutRef = useRef(propsLayout);
const prevChildrenRef = useRef(children);
const prevCompactTypeRef = useRef(compactType);
useEffect(() => {
setMounted(true);
if (!deepEqual(layout, propsLayout)) {
onLayoutChange(layout);
}
}, []);
useEffect(() => {
if (activeDrag) return;
const layoutChanged = !deepEqual(propsLayout, prevPropsLayoutRef.current);
const childrenChanged = !childrenEqual(children, prevChildrenRef.current);
const compactTypeChanged = compactType !== prevCompactTypeRef.current;
if (layoutChanged || childrenChanged || compactTypeChanged) {
const baseLayout = layoutChanged ? propsLayout : layout;
const newLayout = synchronizeLayoutWithChildren(
baseLayout,
children,
cols,
compactType,
allowOverlap
);
setLayout(newLayout);
}
prevPropsLayoutRef.current = propsLayout;
prevChildrenRef.current = children;
prevCompactTypeRef.current = compactType;
}, [
propsLayout,
children,
cols,
compactType,
allowOverlap,
activeDrag,
layout
]);
useEffect(() => {
if (!activeDrag && !deepEqual(layout, prevLayoutRef.current)) {
prevLayoutRef.current = layout;
onLayoutChange(layout);
}
}, [layout, activeDrag, onLayoutChange]);
const containerHeight = useMemo(() => {
if (!autoSize) return void 0;
const nbRow = bottom(layout);
const containerPaddingY = effectiveContainerPadding[1];
return nbRow * rowHeight + (nbRow - 1) * margin[1] + containerPaddingY * 2 + "px";
}, [autoSize, layout, rowHeight, margin, effectiveContainerPadding]);
const onDragStart = useCallback(
(i, _x, _y, data) => {
const l = getLayoutItem(layout, i);
if (!l) return;
const placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i
};
oldDragItemRef.current = cloneLayoutItem(l);
oldLayoutRef.current = layout;
setActiveDrag(placeholder);
onDragStartProp(layout, l, l, null, data.e, data.node);
},
[layout, onDragStartProp]
);
const onDrag = useCallback(
(i, x, y, data) => {
const oldDragItem = oldDragItemRef.current;
const l = getLayoutItem(layout, i);
if (!l) return;
const placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i
};
const newLayout = moveElement(
layout,
l,
x,
y,
true,
preventCollision,
compactType,
cols,
allowOverlap
);
onDragProp(newLayout, oldDragItem, l, placeholder, data.e, data.node);
setLayout(
allowOverlap ? newLayout : compact(newLayout, compactType, cols)
);
setActiveDrag(placeholder);
},
[layout, preventCollision, compactType, cols, allowOverlap, onDragProp]
);
const onDragStop = useCallback(
(i, x, y, data) => {
if (!activeDrag) return;
const oldDragItem = oldDragItemRef.current;
const l = getLayoutItem(layout, i);
if (!l) return;
const newLayout = moveElement(
layout,
l,
x,
y,
true,
preventCollision,
compactType,
cols,
allowOverlap
);
const finalLayout = allowOverlap ? newLayout : compact(newLayout, compactType, cols);
onDragStopProp(finalLayout, oldDragItem, l, null, data.e, data.node);
const oldLayout = oldLayoutRef.current;
oldDragItemRef.current = null;
oldLayoutRef.current = null;
setActiveDrag(null);
setLayout(finalLayout);
if (oldLayout && !deepEqual(oldLayout, finalLayout)) {
onLayoutChange(finalLayout);
}
},
[
activeDrag,
layout,
preventCollision,
compactType,
cols,
allowOverlap,
onDragStopProp,
onLayoutChange
]
);
const onResizeStart = useCallback(
(i, _w, _h, data) => {
const l = getLayoutItem(layout, i);
if (!l) return;
oldResizeItemRef.current = cloneLayoutItem(l);
oldLayoutRef.current = layout;
setResizing(true);
onResizeStartProp(layout, l, l, null, data.e, data.node);
},
[layout, onResizeStartProp]
);
const onResize = useCallback(
(i, w, h, data) => {
const oldResizeItem = oldResizeItemRef.current;
const { handle } = data;
let shouldMoveItem = false;
let newX;
let newY;
const [newLayout, l] = withLayoutItem(layout, i, (item) => {
newX = item.x;
newY = item.y;
if (["sw", "w", "nw", "n", "ne"].includes(handle)) {
if (["sw", "nw", "w"].includes(handle)) {
newX = item.x + (item.w - w);
w = item.x !== newX && newX < 0 ? item.w : w;
newX = newX < 0 ? 0 : newX;
}
if (["ne", "n", "nw"].includes(handle)) {
newY = item.y + (item.h - h);
h = item.y !== newY && newY < 0 ? item.h : h;
newY = newY < 0 ? 0 : newY;
}
shouldMoveItem = true;
}
if (preventCollision && !allowOverlap) {
const collisions = getAllCollisions(layout, {
...item,
w,
h,
x: newX ?? item.x,
y: newY ?? item.y
}).filter((layoutItem) => layoutItem.i !== item.i);
if (collisions.length > 0) {
newY = item.y;
h = item.h;
newX = item.x;
w = item.w;
shouldMoveItem = false;
}
}
item.w = w;
item.h = h;
return item;
});
if (!l) return;
let finalLayout = newLayout;
if (shouldMoveItem && newX !== void 0 && newY !== void 0) {
finalLayout = moveElement(
newLayout,
l,
newX,
newY,
true,
preventCollision,
compactType,
cols,
allowOverlap
);
}
const placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i,
static: true
};
onResizeProp(
finalLayout,
oldResizeItem,
l,
placeholder,
data.e,
data.node
);
setLayout(
allowOverlap ? finalLayout : compact(finalLayout, compactType, cols)
);
setActiveDrag(placeholder);
},
[layout, preventCollision, allowOverlap, compactType, cols, onResizeProp]
);
const onResizeStop = useCallback(
(i, _w, _h, data) => {
const oldResizeItem = oldResizeItemRef.current;
const l = getLayoutItem(layout, i);
const finalLayout = allowOverlap ? layout : compact(layout, compactType, cols);
onResizeStopProp(
finalLayout,
oldResizeItem,
l ?? null,
null,
data.e,
data.node
);
const oldLayout = oldLayoutRef.current;
oldResizeItemRef.current = null;
oldLayoutRef.current = null;
setActiveDrag(null);
setResizing(false);
setLayout(finalLayout);
if (oldLayout && !deepEqual(oldLayout, finalLayout)) {
onLayoutChange(finalLayout);
}
},
[layout, allowOverlap, compactType, cols, onResizeStopProp, onLayoutChange]
);
const removeDroppingPlaceholder = useCallback(() => {
const newLayout = compact(
layout.filter((l) => l.i !== droppingItem.i),
compactType,
cols,
allowOverlap
);
setLayout(newLayout);
setDroppingDOMNode(null);
setActiveDrag(null);
setDroppingPosition(void 0);
}, [layout, droppingItem.i, compactType, cols, allowOverlap]);
const handleDragOver = useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
if (isFirefox && !e.nativeEvent.target?.classList.contains(
layoutClassName
)) {
return false;
}
const onDragOverResult = onDropDragOverProp(e);
if (onDragOverResult === false) {
if (droppingDOMNode) {
removeDroppingPlaceholder();
}
return false;
}
const finalDroppingItem = { ...droppingItem, ...onDragOverResult };
const gridRect = e.currentTarget.getBoundingClientRect();
const layerX = e.clientX - gridRect.left;
const layerY = e.clientY - gridRect.top;
const newDroppingPosition = {
left: layerX / transformScale,
top: layerY / transformScale,
e: e.nativeEvent
};
if (!droppingDOMNode) {
const positionParams = {
cols,
margin,
maxRows,
rowHeight,
containerWidth: width,
containerPadding: effectiveContainerPadding
};
const calculatedPosition = calcXY(
positionParams,
layerY,
layerX,
finalDroppingItem.w,
finalDroppingItem.h
);
setDroppingDOMNode(/* @__PURE__ */ jsx("div", {}, finalDroppingItem.i));
setDroppingPosition(newDroppingPosition);
setLayout([
...layout,
{
...finalDroppingItem,
x: calculatedPosition.x,
y: calculatedPosition.y,
static: false,
isDraggable: true
}
]);
} else if (droppingPosition) {
const shouldUpdate = droppingPosition.left !== layerX || droppingPosition.top !== layerY;
if (shouldUpdate) {
setDroppingPosition(newDroppingPosition);
}
}
},
[
droppingDOMNode,
droppingPosition,
droppingItem,
onDropDragOverProp,
removeDroppingPlaceholder,
transformScale,
cols,
margin,
maxRows,
rowHeight,
width,
effectiveContainerPadding,
layout
]
);
const handleDragLeave = useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
dragEnterCounterRef.current--;
if (dragEnterCounterRef.current === 0) {
removeDroppingPlaceholder();
}
},
[removeDroppingPlaceholder]
);
const handleDragEnter = useCallback((e) => {
e.preventDefault();
e.stopPropagation();
dragEnterCounterRef.current++;
}, []);
const handleDrop = useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
const item = layout.find((l) => l.i === droppingItem.i);
dragEnterCounterRef.current = 0;
removeDroppingPlaceholder();
onDropProp(layout, item, e.nativeEvent);
},
[layout, droppingItem.i, removeDroppingPlaceholder, onDropProp]
);
const processGridItem = useCallback(
(child, isDroppingItem) => {
if (!child || !child.key) return null;
const l = getLayoutItem(layout, String(child.key));
if (!l) return null;
const draggable = typeof l.isDraggable === "boolean" ? l.isDraggable : !l.static && isDraggable;
const resizable = typeof l.isResizable === "boolean" ? l.isResizable : !l.static && isResizable;
const resizeHandlesOptions = l.resizeHandles || [...resizeHandles];
const bounded = draggable && isBounded && l.isBounded !== false;
const resizeHandleElement = resizeHandle;
return /* @__PURE__ */ jsx(
GridItem,
{
containerWidth: width,
cols,
margin,
containerPadding: effectiveContainerPadding,
maxRows,
rowHeight,
cancel: draggableCancel,
handle: draggableHandle,
onDragStart,
onDrag,
onDragStop,
onResizeStart,
onResize,
onResizeStop,
isDraggable: draggable,
isResizable: resizable,
isBounded: bounded,
useCSSTransforms: useCSSTransforms && mounted,
usePercentages: !mounted,
transformScale,
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i: l.i,
minH: l.minH,
minW: l.minW,
maxH: l.maxH,
maxW: l.maxW,
static: l.static,
droppingPosition: isDroppingItem ? droppingPosition : void 0,
resizeHandles: resizeHandlesOptions,
resizeHandle: resizeHandleElement,
children: child
},
l.i
);
},
[
layout,
width,
cols,
margin,
effectiveContainerPadding,
maxRows,
rowHeight,
draggableCancel,
draggableHandle,
onDragStart,
onDrag,
onDragStop,
onResizeStart,
onResize,
onResizeStop,
isDraggable,
isResizable,
isBounded,
useCSSTransforms,
mounted,
transformScale,
droppingPosition,
resizeHandles,
resizeHandle
]
);
const renderPlaceholder = () => {
if (!activeDrag) return null;
return /* @__PURE__ */ jsx(
GridItem,
{
w: activeDrag.w,
h: activeDrag.h,
x: activeDrag.x,
y: activeDrag.y,
i: activeDrag.i,
className: `react-grid-placeholder ${resizing ? "placeholder-resizing" : ""}`,
containerWidth: width,
cols,
margin,
containerPadding: effectiveContainerPadding,
maxRows,
rowHeight,
isDraggable: false,
isResizable: false,
isBounded: false,
useCSSTransforms,
transformScale,
children: /* @__PURE__ */ jsx("div", {})
}
);
};
const mergedClassName = clsx(layoutClassName, className);
const mergedStyle = {
height: containerHeight,
...style
};
return /* @__PURE__ */ jsxs(
"div",
{
ref: innerRef,
className: mergedClassName,
style: mergedStyle,
onDrop: isDroppable ? handleDrop : void 0,
onDragLeave: isDroppable ? handleDragLeave : void 0,
onDragEnter: isDroppable ? handleDragEnter : void 0,
onDragOver: isDroppable ? handleDragOver : void 0,
children: [
React2.Children.map(children, (child) => {
if (!React2.isValidElement(child)) return null;
return processGridItem(child);
}),
isDroppable && droppingDOMNode && processGridItem(droppingDOMNode, true),
renderPlaceholder()
]
}
);
}
var DEFAULT_BREAKPOINTS = {
lg: 1200,
md: 996,
sm: 768,
xs: 480,
xxs: 0
};
var DEFAULT_COLS = {
lg: 12,
md: 10,
sm: 6,
xs: 4,
xxs: 2
};
var noop2 = () => {
};
function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactType, allowOverlap) {
const layout = [];
React2.Children.forEach(children, (child) => {
if (!React2.isValidElement(child) || child.key === null) return;
const key = String(child.key);
const existingItem = initialLayout.find((l) => l.i === key);
if (existingItem) {
layout.push({
...existingItem,
i: key
});
} else {
const childProps = child.props;
const dataGrid = childProps["data-grid"];
if (dataGrid) {
layout.push({
i: key,
x: dataGrid.x ?? 0,
y: dataGrid.y ?? 0,
w: dataGrid.w ?? 1,
h: dataGrid.h ?? 1,
minW: dataGrid.minW,
maxW: dataGrid.maxW,
minH: dataGrid.minH,
maxH: dataGrid.maxH,
static: dataGrid.static,
isDraggable: dataGrid.isDraggable,
isResizable: dataGrid.isResizable,
resizeHandles: dataGrid.resizeHandles,
isBounded: dataGrid.isBounded
});
} else {
layout.push({
i: key,
x: 0,
y: bottom(layout),
w: 1,
h: 1
});
}
}
});
const corrected = correctBounds(layout, { cols });
return compact(corrected, compactType, cols, allowOverlap);
}
function ResponsiveGridLayout(props) {
const {
children,
width,
breakpoint: propBreakpoint,
breakpoints = DEFAULT_BREAKPOINTS,
cols: colsConfig = DEFAULT_COLS,
layouts: propsLayouts = {},
rowHeight = 150,
maxRows = Infinity,
margin: propMargin = [10, 10],
containerPadding: propContainerPadding = null,
compactor: compactorProp,
onBreakpointChange = noop2,
onLayoutChange = noop2,
onWidthChange = noop2,
...restProps
} = props;
const compactor = compactorProp ?? getCompactor("vertical");
const compactType = compactor.type;
const allowOverlap = compactor.allowOverlap;
const initialBreakpoint = useMemo(() => {
return propBreakpoint ?? getBreakpointFromWidth(breakpoints, width);
}, []);
const initialCols = useMemo(() => {
return getColsFromBreakpoint(initialBreakpoint, colsConfig);
}, [initialBreakpoint, colsConfig]);
const initialLayout = useMemo(() => {
return findOrGenerateResponsiveLayout(
propsLayouts,
breakpoints,
initialBreakpoint,
initialBreakpoint,
initialCols,
compactType
);
}, []);
const [breakpoint, setBreakpoint] = useState(initialBreakpoint);
const [cols, setCols] = useState(initialCols);
const [layout, setLayout] = useState(initialLayout);
const [layouts, setLayouts] = useState(propsLayouts);
const prevWidthRef = useRef(width);
const prevBreakpointRef = useRef(propBreakpoint);
const prevBreakpointsRef = useRef(breakpoints);
const prevColsRef = useRef(colsConfig);
const prevLayoutsRef = useRef(propsLayouts);
const prevCompactTypeRef = useRef(compactType);
useEffect(() => {
if (!deepEqual(propsLayouts, prevLayoutsRef.current)) {
const newLayout = findOrGenerateResponsiveLayout(
propsLayouts,
breakpoints,
breakpoint,
breakpoint,
cols,
compactType
);
setLayout(newLayout);
setLayouts(propsLayouts);
prevLayoutsRef.current = propsLayouts;
}
}, [propsLayouts, breakpoints, breakpoint, cols, compactType]);
useEffect(() => {
if (compactType !== prevCompactTypeRef.current) {
const newLayout = compact(
cloneLayout(layout),
compactType,
cols,
allowOverlap
);
const newLayouts = {
...layouts,
[breakpoint]: newLayout
};
setLayout(newLayout);
setLayouts(newLayouts);
onLayoutChange(newLayout, newLayouts);
prevCompactTypeRef.current = compactType;
}
}, [
compactType,
layout,
cols,
allowOverlap,
layouts,
breakpoint,
onLayoutChange
]);
useEffect(() => {
const widthChanged = width !== prevWidthRef.current;
const breakpointPropChanged = propBreakpoint !== prevBreakpointRef.current;
const breakpointsChanged = !deepEqual(
breakpoints,
prevBreakpointsRef.current
);
const colsChanged = !deepEqual(colsConfig, prevColsRef.current);
if (widthChanged || breakpointPropChanged || breakpointsChanged || colsChanged) {
const newBreakpoint = propBreakpoint ?? getBreakpointFromWidth(breakpoints, width);
const newCols = getColsFromBreakpoint(newBreakpoint, colsConfig);
const lastBreakpoint = breakpoint;
if (lastBreakpoint !== newBreakpoint || breakpointsChanged || colsChanged) {
const newLayouts = { ...layouts };
if (!newLayouts[lastBreakpoint]) {
newLayouts[lastBreakpoint] = cloneLayout(layout);
}
let newLayout = findOrGenerateResponsiveLayout(
newLayouts,
breakpoints,
newBreakpoint,
lastBreakpoint,
newCols,
compactType
);
newLayout = synchronizeLayoutWithChildren2(
newLayout,
children,
newCols,
compactType,
allowOverlap
);
newLayouts[newBreakpoint] = newLayout;
setBreakpoint(newBreakpoint);
setCols(newCols);
setLayout(newLayout);
setLayouts(newLayouts);
onBreakpointChange(newBreakpoint, newCols);
onLayoutChange(newLayout, newLayouts);
}
const currentMargin2 = getIndentationValue(
propMargin,
newBreakpoint
);
const currentPadding = propContainerPadding ? getIndentationValue(
propContainerPadding,
newBreakpoint
) : null;
onWidthChange(width, currentMargin2, newCols, currentPadding);
prevWidthRef.current = width;
prevBreakpointRef.current = propBreakpoint;
prevBreakpointsRef.current = breakpoints;
prevColsRef.current = colsConfig;
}
}, [
width,
propBreakpoint,
breakpoints,
colsConfig,
breakpoint,
cols,
layout,
layouts,
children,
compactType,
allowOverlap,
propMargin,
propContainerPadding,
onBreakpointChange,
onLayoutChange,
onWidthChange
]);
const handleLayoutChange = useCallback(
(newLayout) => {
const newLayouts = {
...layouts,
[breakpoint]: newLayout
};
setLayout(newLayout);
setLayouts(newLayouts);
onLayoutChange(newLayout, newLayouts);
},
[layouts, breakpoint, onLayoutChange]
);
const currentMargin = useMemo(() => {
return getIndentationValue(
propMargin,
breakpoint
);
}, [propMargin, breakpoint]);
const currentContainerPadding = useMemo(() => {
if (propContainerPadding === null) return null;
return getIndentationValue(
propContainerPadding,
breakpoint
);
}, [propContainerPadding, breakpoint]);
const gridConfig = useMemo(
() => ({
cols,
rowHeight,
maxRows,
margin: currentMargin,
containerPadding: currentContainerPadding
}),
[cols, rowHeight, maxRows, currentMargin, currentContainerPadding]
);
return /* @__PURE__ */ jsx(
GridLayout,
{
...restProps,
width,
gridConfig,
compactor,
onLayoutChange: handleLayoutChange,
layout,
children
}
);
}
export { GridItem, GridLayout, ResponsiveGridLayout };
//# sourceMappingURL=chunk-R35HZZTA.mjs.map
//# sourceMappingURL=chunk-R35HZZTA.mjs.map

Sorry, the diff of this file is too big to display

import { getCompactor, correctBounds, cloneLayout, compact, getLayoutItem, cloneLayoutItem, moveElement, bottom, sortBreakpoints, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout } from './chunk-4HNUMWQK.mjs';
import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
import { deepEqual } from 'fast-equals';
function useContainerWidth(options = {}) {
const { measureBeforeMount = false, initialWidth = 1280 } = options;
const [width, setWidth] = useState(initialWidth);
const [mounted, setMounted] = useState(!measureBeforeMount);
const containerRef = useRef(null);
const observerRef = useRef(null);
const measureWidth = useCallback(() => {
const node = containerRef.current;
if (node) {
const newWidth = node.offsetWidth;
setWidth(newWidth);
if (!mounted) {
setMounted(true);
}
}
}, [mounted]);
useEffect(() => {
const node = containerRef.current;
if (!node) return;
measureWidth();
if (typeof ResizeObserver !== "undefined") {
observerRef.current = new ResizeObserver((entries) => {
const entry = entries[0];
if (entry) {
const newWidth = entry.contentRect.width;
setWidth(newWidth);
}
});
observerRef.current.observe(node);
}
return () => {
if (observerRef.current) {
observerRef.current.disconnect();
observerRef.current = null;
}
};
}, [measureWidth]);
return {
width,
mounted,
containerRef,
measureWidth
};
}
function useGridLayout(options) {
const {
layout: propsLayout,
cols,
compactType = "vertical",
allowOverlap = false,
preventCollision = false,
onLayoutChange
} = options;
const compactor = useMemo(
() => getCompactor(compactType, allowOverlap),
[compactType, allowOverlap]
);
const isDraggingRef = useRef(false);
const [layout, setLayoutState] = useState(() => {
const corrected = correctBounds(cloneLayout(propsLayout), { cols });
return compact(corrected, compactType, cols, allowOverlap);
});
const [dragState, setDragState] = useState({
activeDrag: null,
oldDragItem: null,
oldLayout: null
});
const [resizeState, setResizeState] = useState({
resizing: false,
oldResizeItem: null,
oldLayout: null
});
const [dropState, setDropState] = useState({
droppingDOMNode: null,
droppingPosition: null
});
const prevLayoutRef = useRef(layout);
const setLayout = useCallback(
(newLayout) => {
const corrected = correctBounds(cloneLayout(newLayout), { cols });
const compacted = compact(corrected, compactType, cols, allowOverlap);
setLayoutState(compacted);
},
[cols, compactType, allowOverlap]
);
useEffect(() => {
if (isDraggingRef.current) return;
if (!deepEqual(propsLayout, prevLayoutRef.current)) {
setLayout(propsLayout);
}
}, [propsLayout, setLayout]);
useEffect(() => {
if (!deepEqual(layout, prevLayoutRef.current)) {
prevLayoutRef.current = layout;
onLayoutChange?.(layout);
}
}, [layout, onLayoutChange]);
const onDragStart = useCallback(
(itemId, x, y) => {
const item = getLayoutItem(layout, itemId);
if (!item) return null;
isDraggingRef.current = true;
const placeholder = {
...cloneLayoutItem(item),
x,
y,
static: false,
moved: false
};
setDragState({
activeDrag: placeholder,
oldDragItem: cloneLayoutItem(item),
oldLayout: cloneLayout(layout)
});
return placeholder;
},
[layout]
);
const onDrag = useCallback(
(itemId, x, y) => {
const item = getLayoutItem(layout, itemId);
if (!item) return;
setDragState((prev) => ({
...prev,
activeDrag: prev.activeDrag ? { ...prev.activeDrag, x, y } : null
}));
const newLayout = moveElement(
layout,
item,
x,
y,
true,
// isUserAction
preventCollision,
compactType,
cols,
allowOverlap
);
const compacted = allowOverlap ? newLayout : compact(newLayout, compactType, cols);
setLayoutState(compacted);
},
[layout, cols, compactType, preventCollision, allowOverlap]
);
const onDragStop = useCallback(
(itemId, x, y) => {
const item = getLayoutItem(layout, itemId);
if (!item) return;
const newLayout = moveElement(
layout,
item,
x,
y,
true,
preventCollision,
compactType,
cols,
allowOverlap
);
const compacted = compact(newLayout, compactType, cols, allowOverlap);
isDraggingRef.current = false;
setDragState({
activeDrag: null,
oldDragItem: null,
oldLayout: null
});
setLayoutState(compacted);
},
[layout, cols, compactType, preventCollision, allowOverlap]
);
const onResizeStart = useCallback(
(itemId) => {
const item = getLayoutItem(layout, itemId);
if (!item) return null;
setResizeState({
resizing: true,
oldResizeItem: cloneLayoutItem(item),
oldLayout: cloneLayout(layout)
});
return item;
},
[layout]
);
const onResize = useCallback(
(itemId, w, h, x, y) => {
const newLayout = layout.map((item) => {
if (item.i === itemId) {
const updated = {
...item,
w,
h
};
if (x !== void 0) updated.x = x;
if (y !== void 0) updated.y = y;
return updated;
}
return item;
});
const corrected = correctBounds(newLayout, { cols });
const compacted = compact(corrected, compactType, cols, allowOverlap);
setLayoutState(compacted);
},
[layout, cols, compactType, allowOverlap]
);
const onResizeStop = useCallback(
(itemId, w, h) => {
onResize(itemId, w, h);
setResizeState({
resizing: false,
oldResizeItem: null,
oldLayout: null
});
},
[onResize]
);
const onDropDragOver = useCallback(
(droppingItem, position) => {
const existingItem = getLayoutItem(layout, droppingItem.i);
if (!existingItem) {
const newLayout = [...layout, droppingItem];
const corrected = correctBounds(newLayout, { cols });
const compacted = compact(corrected, compactType, cols, allowOverlap);
setLayoutState(compacted);
}
setDropState({
droppingDOMNode: null,
// Will be set by component
droppingPosition: position
});
},
[layout, cols, compactType, allowOverlap]
);
const onDropDragLeave = useCallback(() => {
const newLayout = layout.filter((item) => item.i !== "__dropping-elem__");
setLayoutState(newLayout);
setDropState({
droppingDOMNode: null,
droppingPosition: null
});
}, [layout]);
const onDrop = useCallback(
(droppingItem) => {
const newLayout = layout.map((item) => {
if (item.i === "__dropping-elem__") {
return {
...item,
i: droppingItem.i,
static: false
};
}
return item;
});
const corrected = correctBounds(newLayout, { cols });
const compacted = compact(corrected, compactType, cols, allowOverlap);
setLayoutState(compacted);
setDropState({
droppingDOMNode: null,
droppingPosition: null
});
},
[layout, cols, compactType, allowOverlap]
);
const containerHeight = useMemo(() => bottom(layout), [layout]);
const isInteracting = dragState.activeDrag !== null || resizeState.resizing || dropState.droppingPosition !== null;
return {
layout,
setLayout,
dragState,
resizeState,
dropState,
onDragStart,
onDrag,
onDragStop,
onResizeStart,
onResize,
onResizeStop,
onDropDragOver,
onDropDragLeave,
onDrop,
containerHeight,
isInteracting,
compactor
};
}
var DEFAULT_BREAKPOINTS = {
lg: 1200,
md: 996,
sm: 768,
xs: 480,
xxs: 0
};
var DEFAULT_COLS = {
lg: 12,
md: 10,
sm: 6,
xs: 4,
xxs: 2
};
function useResponsiveLayout(options) {
const {
width,
breakpoints = DEFAULT_BREAKPOINTS,
cols: colsConfig = DEFAULT_COLS,
layouts: propsLayouts = {},
compactType = "vertical",
onBreakpointChange,
onLayoutChange,
onWidthChange
} = options;
const sortedBreakpoints = useMemo(
() => sortBreakpoints(breakpoints),
[breakpoints]
);
const initialBreakpoint = useMemo(
() => getBreakpointFromWidth(breakpoints, width),
// Only calculate on mount, not on width changes
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
);
const initialCols = useMemo(
() => getColsFromBreakpoint(initialBreakpoint, colsConfig),
[initialBreakpoint, colsConfig]
);
const [breakpoint, setBreakpoint] = useState(initialBreakpoint);
const [cols, setCols] = useState(initialCols);
const [layouts, setLayoutsState] = useState(() => {
const cloned = {};
for (const bp of sortedBreakpoints) {
const layout2 = propsLayouts[bp];
if (layout2) {
cloned[bp] = cloneLayout(layout2);
}
}
return cloned;
});
const prevWidthRef = useRef(width);
const prevBreakpointRef = useRef(breakpoint);
const prevLayoutsRef = useRef(layouts);
const layout = useMemo(() => {
return findOrGenerateResponsiveLayout(
layouts,
breakpoints,
breakpoint,
prevBreakpointRef.current,
cols,
compactType
);
}, [layouts, breakpoints, breakpoint, cols, compactType]);
const setLayoutForBreakpoint = useCallback((bp, newLayout) => {
setLayoutsState((prev) => ({
...prev,
[bp]: cloneLayout(newLayout)
}));
}, []);
const setLayouts = useCallback((newLayouts) => {
const cloned = {};
for (const bp of Object.keys(newLayouts)) {
const layoutForBp = newLayouts[bp];
if (layoutForBp) {
cloned[bp] = cloneLayout(layoutForBp);
}
}
setLayoutsState(cloned);
}, []);
useEffect(() => {
if (prevWidthRef.current === width) return;
prevWidthRef.current = width;
const newBreakpoint = getBreakpointFromWidth(breakpoints, width);
const newCols = getColsFromBreakpoint(newBreakpoint, colsConfig);
onWidthChange?.(width, [10, 10], newCols, null);
if (newBreakpoint !== breakpoint) {
const newLayout = findOrGenerateResponsiveLayout(
layouts,
breakpoints,
newBreakpoint,
breakpoint,
newCols,
compactType
);
const updatedLayouts = {
...layouts,
[newBreakpoint]: newLayout
};
setLayoutsState(updatedLayouts);
setBreakpoint(newBreakpoint);
setCols(newCols);
onBreakpointChange?.(newBreakpoint, newCols);
prevBreakpointRef.current = newBreakpoint;
}
}, [
width,
breakpoints,
colsConfig,
breakpoint,
layouts,
compactType,
onBreakpointChange,
onWidthChange
]);
useEffect(() => {
if (!deepEqual(propsLayouts, prevLayoutsRef.current)) {
setLayouts(propsLayouts);
prevLayoutsRef.current = propsLayouts;
}
}, [propsLayouts, setLayouts]);
useEffect(() => {
if (!deepEqual(layouts, prevLayoutsRef.current)) {
prevLayoutsRef.current = layouts;
onLayoutChange?.(layout, layouts);
}
}, [layout, layouts, onLayoutChange]);
return {
layout,
layouts,
breakpoint,
cols,
setLayoutForBreakpoint,
setLayouts,
sortedBreakpoints
};
}
export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, useContainerWidth, useGridLayout, useResponsiveLayout };
//# sourceMappingURL=chunk-ZCXE6SR5.mjs.map
//# sourceMappingURL=chunk-ZCXE6SR5.mjs.map
{"version":3,"sources":["../src/react/hooks/useContainerWidth.ts","../src/react/hooks/useGridLayout.ts","../src/react/hooks/useResponsiveLayout.ts"],"names":["useRef","useState","useCallback","useEffect","useMemo","layout","deepEqual"],"mappings":"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","file":"chunk-ZCXE6SR5.mjs","sourcesContent":["/**\n * useContainerWidth hook\n *\n * Observes container width using ResizeObserver and provides\n * reactive width updates for responsive layouts.\n */\n\nimport {\n useState,\n useEffect,\n useRef,\n useCallback,\n type RefObject\n} from \"react\";\n\nexport interface UseContainerWidthOptions {\n /**\n * If true, delays initial render until width is measured.\n * Useful for SSR or when you need accurate initial measurements.\n */\n measureBeforeMount?: boolean;\n\n /**\n * Initial width to use before measurement.\n * Defaults to 1280.\n */\n initialWidth?: number;\n}\n\nexport interface UseContainerWidthResult {\n /**\n * Current container width in pixels.\n */\n width: number;\n\n /**\n * Whether the container has been measured at least once.\n */\n mounted: boolean;\n\n /**\n * Ref to attach to the container element.\n */\n containerRef: RefObject<HTMLDivElement | null>;\n\n /**\n * Manually trigger a width measurement.\n * Useful when the container size might change without a resize event.\n */\n measureWidth: () => void;\n}\n\n/**\n * Hook to observe and track container width.\n *\n * Replaces the WidthProvider HOC with a more composable approach.\n *\n * @example\n * ```tsx\n * function MyGrid() {\n * const { width, containerRef, mounted } = useContainerWidth();\n *\n * return (\n * <div ref={containerRef}>\n * {mounted && <GridLayout width={width} {...props} />}\n * </div>\n * );\n * }\n * ```\n */\nexport function useContainerWidth(\n options: UseContainerWidthOptions = {}\n): UseContainerWidthResult {\n const { measureBeforeMount = false, initialWidth = 1280 } = options;\n\n const [width, setWidth] = useState(initialWidth);\n const [mounted, setMounted] = useState(!measureBeforeMount);\n const containerRef = useRef<HTMLDivElement | null>(null);\n const observerRef = useRef<ResizeObserver | null>(null);\n\n const measureWidth = useCallback(() => {\n const node = containerRef.current;\n if (node) {\n const newWidth = node.offsetWidth;\n setWidth(newWidth);\n if (!mounted) {\n setMounted(true);\n }\n }\n }, [mounted]);\n\n useEffect(() => {\n const node = containerRef.current;\n if (!node) return;\n\n // Initial measurement\n measureWidth();\n\n // Set up ResizeObserver\n if (typeof ResizeObserver !== \"undefined\") {\n observerRef.current = new ResizeObserver(entries => {\n const entry = entries[0];\n if (entry) {\n // Use contentRect.width for consistent measurements\n const newWidth = entry.contentRect.width;\n setWidth(newWidth);\n }\n });\n\n observerRef.current.observe(node);\n }\n\n return () => {\n if (observerRef.current) {\n observerRef.current.disconnect();\n observerRef.current = null;\n }\n };\n }, [measureWidth]);\n\n return {\n width,\n mounted,\n containerRef,\n measureWidth\n };\n}\n\nexport default useContainerWidth;\n","/**\n * useGridLayout hook\n *\n * Core hook for managing grid layout state, including drag, resize, and drop operations.\n * This extracts the state management logic from ReactGridLayout into a reusable hook.\n */\n\nimport { useState, useCallback, useMemo, useRef, useEffect } from \"react\";\nimport { deepEqual } from \"fast-equals\";\nimport type {\n Layout,\n LayoutItem,\n CompactType,\n DroppingPosition,\n Compactor,\n Mutable\n} from \"../../core/types.js\";\nimport {\n cloneLayout,\n cloneLayoutItem,\n moveElement,\n correctBounds,\n bottom,\n getLayoutItem\n} from \"../../core/layout.js\";\nimport { compact } from \"../../core/compact-compat.js\";\nimport { getCompactor } from \"../../core/compactors.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DragState {\n /** Currently dragging item placeholder */\n activeDrag: LayoutItem | null;\n /** Original item before drag started */\n oldDragItem: LayoutItem | null;\n /** Layout before drag started */\n oldLayout: Layout | null;\n}\n\nexport interface ResizeState {\n /** Whether a resize is in progress */\n resizing: boolean;\n /** Original item before resize started */\n oldResizeItem: LayoutItem | null;\n /** Layout before resize started */\n oldLayout: Layout | null;\n}\n\nexport interface DropState {\n /** DOM node for the dropping placeholder */\n droppingDOMNode: React.ReactElement | null;\n /** Current drop position */\n droppingPosition: DroppingPosition | null;\n}\n\nexport interface UseGridLayoutOptions {\n /** Initial layout */\n layout: Layout;\n /** Number of columns */\n cols: number;\n /** Compaction type: 'vertical', 'horizontal', or null */\n compactType?: CompactType;\n /** Allow items to overlap */\n allowOverlap?: boolean;\n /** Prevent collisions when moving items */\n preventCollision?: boolean;\n /** Called when layout changes */\n onLayoutChange?: (layout: Layout) => void;\n}\n\nexport interface UseGridLayoutResult {\n /** Current layout */\n layout: Layout;\n /** Set layout directly */\n setLayout: (layout: Layout) => void;\n /** Drag state */\n dragState: DragState;\n /** Resize state */\n resizeState: ResizeState;\n /** Drop state */\n dropState: DropState;\n /** Start dragging an item */\n onDragStart: (itemId: string, x: number, y: number) => LayoutItem | null;\n /** Update drag position */\n onDrag: (itemId: string, x: number, y: number) => void;\n /** Stop dragging */\n onDragStop: (itemId: string, x: number, y: number) => void;\n /** Start resizing an item */\n onResizeStart: (itemId: string) => LayoutItem | null;\n /** Update resize dimensions */\n onResize: (\n itemId: string,\n w: number,\n h: number,\n x?: number,\n y?: number\n ) => void;\n /** Stop resizing */\n onResizeStop: (itemId: string, w: number, h: number) => void;\n /** Start dropping (external drag-in) */\n onDropDragOver: (\n droppingItem: LayoutItem,\n position: DroppingPosition\n ) => void;\n /** Update drop position */\n onDropDragLeave: () => void;\n /** Complete drop */\n onDrop: (droppingItem: LayoutItem) => void;\n /** Container height in rows */\n containerHeight: number;\n /** Whether any drag/resize is active */\n isInteracting: boolean;\n /** Get the compactor being used */\n compactor: Compactor;\n}\n\n// ============================================================================\n// Hook Implementation\n// ============================================================================\n\n/**\n * Hook for managing grid layout state.\n *\n * Handles all layout state including drag, resize, and drop operations.\n * Uses immutable updates and provides callbacks for all interactions.\n *\n * @example\n * ```tsx\n * function MyGrid() {\n * const {\n * layout,\n * onDragStart,\n * onDrag,\n * onDragStop,\n * containerHeight\n * } = useGridLayout({\n * layout: initialLayout,\n * cols: 12,\n * compactType: 'vertical'\n * });\n *\n * return (\n * <div style={{ height: containerHeight }}>\n * {layout.map(item => (\n * <GridItem\n * key={item.i}\n * {...item}\n * onDragStart={() => onDragStart(item.i, item.x, item.y)}\n * />\n * ))}\n * </div>\n * );\n * }\n * ```\n */\nexport function useGridLayout(\n options: UseGridLayoutOptions\n): UseGridLayoutResult {\n const {\n layout: propsLayout,\n cols,\n compactType = \"vertical\",\n allowOverlap = false,\n preventCollision = false,\n onLayoutChange\n } = options;\n\n // Get the appropriate compactor\n const compactor = useMemo(\n () => getCompactor(compactType, allowOverlap),\n [compactType, allowOverlap]\n );\n\n // Track if we're currently dragging to block prop updates\n const isDraggingRef = useRef(false);\n\n // Initialize layout with compaction\n const [layout, setLayoutState] = useState<Layout>(() => {\n const corrected = correctBounds(cloneLayout(propsLayout), { cols });\n return compact(corrected, compactType, cols, allowOverlap);\n });\n\n // Drag state\n const [dragState, setDragState] = useState<DragState>({\n activeDrag: null,\n oldDragItem: null,\n oldLayout: null\n });\n\n // Resize state\n const [resizeState, setResizeState] = useState<ResizeState>({\n resizing: false,\n oldResizeItem: null,\n oldLayout: null\n });\n\n // Drop state\n const [dropState, setDropState] = useState<DropState>({\n droppingDOMNode: null,\n droppingPosition: null\n });\n\n // Track previous layout for change detection\n const prevLayoutRef = useRef<Layout>(layout);\n\n // Set layout with optional compaction\n const setLayout = useCallback(\n (newLayout: Layout) => {\n const corrected = correctBounds(cloneLayout(newLayout), { cols });\n const compacted = compact(corrected, compactType, cols, allowOverlap);\n setLayoutState(compacted);\n },\n [cols, compactType, allowOverlap]\n );\n\n // Sync layout from props when not dragging\n useEffect(() => {\n if (isDraggingRef.current) return;\n\n if (!deepEqual(propsLayout, prevLayoutRef.current)) {\n setLayout(propsLayout);\n }\n }, [propsLayout, setLayout]);\n\n // Notify layout changes\n useEffect(() => {\n if (!deepEqual(layout, prevLayoutRef.current)) {\n prevLayoutRef.current = layout;\n onLayoutChange?.(layout);\n }\n }, [layout, onLayoutChange]);\n\n // ============================================================================\n // Drag Handlers\n // ============================================================================\n\n const onDragStart = useCallback(\n (itemId: string, x: number, y: number): LayoutItem | null => {\n const item = getLayoutItem(layout, itemId);\n if (!item) return null;\n\n isDraggingRef.current = true;\n\n const placeholder: LayoutItem = {\n ...cloneLayoutItem(item),\n x,\n y,\n static: false,\n moved: false\n };\n\n setDragState({\n activeDrag: placeholder,\n oldDragItem: cloneLayoutItem(item),\n oldLayout: cloneLayout(layout)\n });\n\n return placeholder;\n },\n [layout]\n );\n\n const onDrag = useCallback(\n (itemId: string, x: number, y: number) => {\n const item = getLayoutItem(layout, itemId);\n if (!item) return;\n\n // Update placeholder position\n setDragState(prev => ({\n ...prev,\n activeDrag: prev.activeDrag ? { ...prev.activeDrag, x, y } : null\n }));\n\n // Move element and update layout\n const newLayout = moveElement(\n layout,\n item,\n x,\n y,\n true, // isUserAction\n preventCollision,\n compactType,\n cols,\n allowOverlap\n );\n\n // Compact layout\n const compacted = allowOverlap\n ? newLayout\n : compact(newLayout, compactType, cols);\n\n setLayoutState(compacted);\n },\n [layout, cols, compactType, preventCollision, allowOverlap]\n );\n\n const onDragStop = useCallback(\n (itemId: string, x: number, y: number) => {\n const item = getLayoutItem(layout, itemId);\n if (!item) return;\n\n // Final move\n const newLayout = moveElement(\n layout,\n item,\n x,\n y,\n true,\n preventCollision,\n compactType,\n cols,\n allowOverlap\n );\n\n // Compact and finalize\n const compacted = compact(newLayout, compactType, cols, allowOverlap);\n\n isDraggingRef.current = false;\n\n setDragState({\n activeDrag: null,\n oldDragItem: null,\n oldLayout: null\n });\n\n setLayoutState(compacted);\n },\n [layout, cols, compactType, preventCollision, allowOverlap]\n );\n\n // ============================================================================\n // Resize Handlers\n // ============================================================================\n\n const onResizeStart = useCallback(\n (itemId: string): LayoutItem | null => {\n const item = getLayoutItem(layout, itemId);\n if (!item) return null;\n\n setResizeState({\n resizing: true,\n oldResizeItem: cloneLayoutItem(item),\n oldLayout: cloneLayout(layout)\n });\n\n return item;\n },\n [layout]\n );\n\n const onResize = useCallback(\n (itemId: string, w: number, h: number, x?: number, y?: number) => {\n const newLayout = layout.map(item => {\n if (item.i === itemId) {\n const updated: LayoutItem = {\n ...item,\n w,\n h\n };\n if (x !== undefined) (updated as Mutable<LayoutItem>).x = x;\n if (y !== undefined) (updated as Mutable<LayoutItem>).y = y;\n return updated;\n }\n return item;\n });\n\n // Correct bounds and compact\n const corrected = correctBounds(newLayout, { cols });\n const compacted = compact(corrected, compactType, cols, allowOverlap);\n\n setLayoutState(compacted);\n },\n [layout, cols, compactType, allowOverlap]\n );\n\n const onResizeStop = useCallback(\n (itemId: string, w: number, h: number) => {\n // Apply final resize\n onResize(itemId, w, h);\n\n setResizeState({\n resizing: false,\n oldResizeItem: null,\n oldLayout: null\n });\n },\n [onResize]\n );\n\n // ============================================================================\n // Drop Handlers\n // ============================================================================\n\n const onDropDragOver = useCallback(\n (droppingItem: LayoutItem, position: DroppingPosition) => {\n // Check if item already exists in layout\n const existingItem = getLayoutItem(layout, droppingItem.i);\n\n if (!existingItem) {\n // Add dropping item to layout\n const newLayout = [...layout, droppingItem];\n const corrected = correctBounds(newLayout, { cols });\n const compacted = compact(corrected, compactType, cols, allowOverlap);\n setLayoutState(compacted);\n }\n\n setDropState({\n droppingDOMNode: null, // Will be set by component\n droppingPosition: position\n });\n },\n [layout, cols, compactType, allowOverlap]\n );\n\n const onDropDragLeave = useCallback(() => {\n // Remove dropping placeholder from layout\n const newLayout = layout.filter(item => item.i !== \"__dropping-elem__\");\n setLayoutState(newLayout);\n\n setDropState({\n droppingDOMNode: null,\n droppingPosition: null\n });\n }, [layout]);\n\n const onDrop = useCallback(\n (droppingItem: LayoutItem) => {\n // Replace placeholder with actual item\n const newLayout = layout.map(item => {\n if (item.i === \"__dropping-elem__\") {\n return {\n ...item,\n i: droppingItem.i,\n static: false\n };\n }\n return item;\n });\n\n const corrected = correctBounds(newLayout, { cols });\n const compacted = compact(corrected, compactType, cols, allowOverlap);\n setLayoutState(compacted);\n\n setDropState({\n droppingDOMNode: null,\n droppingPosition: null\n });\n },\n [layout, cols, compactType, allowOverlap]\n );\n\n // ============================================================================\n // Computed Values\n // ============================================================================\n\n const containerHeight = useMemo(() => bottom(layout), [layout]);\n\n const isInteracting =\n dragState.activeDrag !== null ||\n resizeState.resizing ||\n dropState.droppingPosition !== null;\n\n return {\n layout,\n setLayout,\n dragState,\n resizeState,\n dropState,\n onDragStart,\n onDrag,\n onDragStop,\n onResizeStart,\n onResize,\n onResizeStop,\n onDropDragOver,\n onDropDragLeave,\n onDrop,\n containerHeight,\n isInteracting,\n compactor\n };\n}\n\nexport default useGridLayout;\n","/**\n * useResponsiveLayout hook\n *\n * Manages responsive breakpoints and layout generation for different screen sizes.\n * Extracts state management from ResponsiveReactGridLayout into a reusable hook.\n */\n\nimport { useState, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { deepEqual } from \"fast-equals\";\nimport type {\n Layout,\n Breakpoint,\n Breakpoints,\n ResponsiveLayouts,\n CompactType\n} from \"../../core/types.js\";\nimport { cloneLayout } from \"../../core/layout.js\";\nimport {\n getBreakpointFromWidth,\n getColsFromBreakpoint,\n findOrGenerateResponsiveLayout,\n sortBreakpoints\n} from \"../../core/responsive.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/** Default breakpoint names */\nexport type DefaultBreakpoints = \"lg\" | \"md\" | \"sm\" | \"xs\" | \"xxs\";\n\n/** Default breakpoint widths */\nexport const DEFAULT_BREAKPOINTS: Breakpoints<DefaultBreakpoints> = {\n lg: 1200,\n md: 996,\n sm: 768,\n xs: 480,\n xxs: 0\n};\n\n/** Default column counts per breakpoint */\nexport const DEFAULT_COLS: Breakpoints<DefaultBreakpoints> = {\n lg: 12,\n md: 10,\n sm: 6,\n xs: 4,\n xxs: 2\n};\n\nexport interface UseResponsiveLayoutOptions<\n B extends Breakpoint = DefaultBreakpoints\n> {\n /** Current container width */\n width: number;\n /** Breakpoint definitions (name → min-width) */\n breakpoints?: Breakpoints<B>;\n /** Column counts per breakpoint */\n cols?: Breakpoints<B>;\n /** Layouts for each breakpoint */\n layouts?: ResponsiveLayouts<B>;\n /** Compaction type */\n compactType?: CompactType;\n /** Called when breakpoint changes */\n onBreakpointChange?: (newBreakpoint: B, cols: number) => void;\n /** Called when layout changes */\n onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;\n /** Called when width changes */\n onWidthChange?: (\n width: number,\n margin: readonly [number, number],\n cols: number,\n containerPadding: readonly [number, number] | null\n ) => void;\n}\n\nexport interface UseResponsiveLayoutResult<\n B extends Breakpoint = DefaultBreakpoints\n> {\n /** Current layout for the active breakpoint */\n layout: Layout;\n /** All layouts by breakpoint */\n layouts: ResponsiveLayouts<B>;\n /** Current active breakpoint */\n breakpoint: B;\n /** Column count for the current breakpoint */\n cols: number;\n /** Update layouts for a specific breakpoint */\n setLayoutForBreakpoint: (breakpoint: B, layout: Layout) => void;\n /** Update all layouts */\n setLayouts: (layouts: ResponsiveLayouts<B>) => void;\n /** Sorted array of breakpoint names (smallest to largest) */\n sortedBreakpoints: B[];\n}\n\n// ============================================================================\n// Hook Implementation\n// ============================================================================\n\n/**\n * Hook for managing responsive grid layouts.\n *\n * Automatically selects the appropriate layout based on container width\n * and generates layouts for new breakpoints from existing ones.\n *\n * @example\n * ```tsx\n * function MyResponsiveGrid() {\n * const { width, containerRef } = useContainerWidth();\n * const { layout, breakpoint, cols } = useResponsiveLayout({\n * width,\n * layouts: {\n * lg: [...],\n * md: [...],\n * sm: [...]\n * }\n * });\n *\n * return (\n * <div ref={containerRef}>\n * <GridLayout\n * width={width}\n * cols={cols}\n * layout={layout}\n * />\n * </div>\n * );\n * }\n * ```\n */\nexport function useResponsiveLayout<B extends Breakpoint = DefaultBreakpoints>(\n options: UseResponsiveLayoutOptions<B>\n): UseResponsiveLayoutResult<B> {\n const {\n width,\n breakpoints = DEFAULT_BREAKPOINTS as unknown as Breakpoints<B>,\n cols: colsConfig = DEFAULT_COLS as unknown as Breakpoints<B>,\n layouts: propsLayouts = {} as ResponsiveLayouts<B>,\n compactType = \"vertical\",\n onBreakpointChange,\n onLayoutChange,\n onWidthChange\n } = options;\n\n // Sorted breakpoints for consistent ordering\n const sortedBreakpoints = useMemo(\n () => sortBreakpoints(breakpoints),\n [breakpoints]\n );\n\n // Calculate initial breakpoint and cols\n const initialBreakpoint = useMemo(\n () => getBreakpointFromWidth(breakpoints, width),\n // Only calculate on mount, not on width changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n []\n );\n\n const initialCols = useMemo(\n () => getColsFromBreakpoint(initialBreakpoint, colsConfig),\n [initialBreakpoint, colsConfig]\n );\n\n // State\n const [breakpoint, setBreakpoint] = useState<B>(initialBreakpoint);\n const [cols, setCols] = useState<number>(initialCols);\n const [layouts, setLayoutsState] = useState<ResponsiveLayouts<B>>(() => {\n // Clone initial layouts\n const cloned = {} as ResponsiveLayouts<B>;\n for (const bp of sortedBreakpoints) {\n const layout = propsLayouts[bp];\n if (layout) {\n (cloned as Record<B, Layout>)[bp] = cloneLayout(layout);\n }\n }\n return cloned;\n });\n\n // Track previous values for change detection\n const prevWidthRef = useRef(width);\n const prevBreakpointRef = useRef(breakpoint);\n const prevLayoutsRef = useRef(layouts);\n\n // Current layout for the active breakpoint\n const layout = useMemo(() => {\n return findOrGenerateResponsiveLayout(\n layouts,\n breakpoints,\n breakpoint,\n prevBreakpointRef.current,\n cols,\n compactType\n );\n }, [layouts, breakpoints, breakpoint, cols, compactType]);\n\n // Set layout for a specific breakpoint\n const setLayoutForBreakpoint = useCallback((bp: B, newLayout: Layout) => {\n setLayoutsState((prev: ResponsiveLayouts<B>) => ({\n ...prev,\n [bp]: cloneLayout(newLayout)\n }));\n }, []);\n\n // Set all layouts\n const setLayouts = useCallback((newLayouts: ResponsiveLayouts<B>) => {\n const cloned = {} as ResponsiveLayouts<B>;\n for (const bp of Object.keys(newLayouts) as B[]) {\n const layoutForBp = newLayouts[bp];\n if (layoutForBp) {\n (cloned as Record<B, Layout>)[bp] = cloneLayout(layoutForBp);\n }\n }\n setLayoutsState(cloned);\n }, []);\n\n // Handle width changes\n useEffect(() => {\n if (prevWidthRef.current === width) return;\n prevWidthRef.current = width;\n\n // Determine new breakpoint\n const newBreakpoint = getBreakpointFromWidth(breakpoints, width);\n const newCols = getColsFromBreakpoint(newBreakpoint, colsConfig);\n\n // Notify width change\n onWidthChange?.(width, [10, 10], newCols, null);\n\n // Check if breakpoint changed\n if (newBreakpoint !== breakpoint) {\n // Generate layout for new breakpoint\n const newLayout = findOrGenerateResponsiveLayout(\n layouts,\n breakpoints,\n newBreakpoint,\n breakpoint,\n newCols,\n compactType\n );\n\n // Update layouts with the new breakpoint layout\n const updatedLayouts: ResponsiveLayouts<B> = {\n ...layouts,\n [newBreakpoint]: newLayout\n };\n\n setLayoutsState(updatedLayouts);\n setBreakpoint(newBreakpoint);\n setCols(newCols);\n\n // Notify breakpoint change\n onBreakpointChange?.(newBreakpoint, newCols);\n\n prevBreakpointRef.current = newBreakpoint;\n }\n }, [\n width,\n breakpoints,\n colsConfig,\n breakpoint,\n layouts,\n compactType,\n onBreakpointChange,\n onWidthChange\n ]);\n\n // Sync with prop layouts when they change\n useEffect(() => {\n if (!deepEqual(propsLayouts, prevLayoutsRef.current)) {\n setLayouts(propsLayouts);\n prevLayoutsRef.current = propsLayouts;\n }\n }, [propsLayouts, setLayouts]);\n\n // Notify layout changes\n useEffect(() => {\n if (!deepEqual(layouts, prevLayoutsRef.current)) {\n prevLayoutsRef.current = layouts;\n onLayoutChange?.(layout, layouts);\n }\n }, [layout, layouts, onLayoutChange]);\n\n return {\n layout,\n layouts,\n breakpoint,\n cols,\n setLayoutForBreakpoint,\n setLayouts,\n sortedBreakpoints\n };\n}\n\nexport default useResponsiveLayout;\n"]}
//# sourceMappingURL=chunk-ZWN22PS2.mjs.map
//# sourceMappingURL=chunk-ZWN22PS2.mjs.map
{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-ZWN22PS2.mjs"}
import { L as Layout, a as LayoutItem, C as CompactType, M as Mutable, c as Compactor, P as Position, d as ResizeHandleAxis, i as PositionStrategy } from './types-Cxf4nHNr.mjs';
/**
* Core layout manipulation utilities.
*
* These functions create, modify, and query grid layouts.
* All functions treat layouts as immutable - they return new arrays/objects.
*/
/**
* Get the bottom-most Y coordinate of the layout.
*
* This is the Y position plus height of the lowest item.
*
* @param layout - Layout to measure
* @returns The bottom Y coordinate (0 if layout is empty)
*/
declare function bottom(layout: Layout): number;
/**
* Get a layout item by its ID.
*
* @param layout - Layout to search
* @param id - Item ID to find
* @returns The layout item, or undefined if not found
*/
declare function getLayoutItem(layout: Layout, id: string): LayoutItem | undefined;
/**
* Get all static items from the layout.
*
* Static items cannot be moved or resized by the user.
*
* @param layout - Layout to filter
* @returns Array of static layout items
*/
declare function getStatics(layout: Layout): LayoutItem[];
/**
* Clone a layout item.
*
* Creates a shallow copy with all properties preserved.
* Boolean properties are normalized (undefined becomes false).
*
* @param layoutItem - Item to clone
* @returns A new layout item with the same properties
*/
declare function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem;
/**
* Clone an entire layout.
*
* Creates a new array with cloned items.
*
* @param layout - Layout to clone
* @returns A new layout with cloned items
*/
declare function cloneLayout(layout: Layout): LayoutItem[];
/**
* Replace a layout item in a layout.
*
* Returns a new layout with the item replaced. Other items are not cloned.
*
* @param layout - Layout to modify
* @param layoutItem - New item (matched by `i` property)
* @returns New layout with the item replaced
*/
declare function modifyLayout(layout: Layout, layoutItem: LayoutItem): LayoutItem[];
/**
* Apply a transformation to a layout item.
*
* Finds the item by key, clones it, applies the callback, and returns
* a new layout with the modified item.
*
* @param layout - Layout to modify
* @param itemKey - Key of the item to modify
* @param cb - Callback that receives the cloned item and returns the modified item
* @returns Tuple of [new layout, modified item or null if not found]
*/
declare function withLayoutItem(layout: Layout, itemKey: string, cb: (item: LayoutItem) => LayoutItem): [LayoutItem[], LayoutItem | null];
/**
* Ensure all layout items fit within the grid bounds.
*
* - Items overflowing right are moved left
* - Items overflowing left are moved to x=0 and clamped to grid width
* - Static items that collide with other statics are moved down
*
* **IMPORTANT**: This function mutates the layout items in place for performance.
* The type signature uses `Mutable<LayoutItem>[]` to make this explicit.
* Clone the layout first (e.g., with `cloneLayout()`) if you need immutability.
*
* @param layout - Layout to correct (items WILL be mutated)
* @param bounds - Grid bounds
* @returns The same layout array (for chaining)
*/
declare function correctBounds(layout: Mutable<LayoutItem>[], bounds: {
cols: number;
}): LayoutItem[];
/**
* Move a layout element to a new position.
*
* Handles collision detection and cascading movements.
* Does not compact the layout - call `compact()` separately.
*
* **Note**: This function mutates the `l` parameter directly for performance.
* The item's x, y, and moved properties will be modified. Callers should
* ideally pass a cloned item if they need to preserve the original.
*
* @param layout - Full layout
* @param l - Item to move (will be mutated)
* @param x - New X position (or undefined to keep current)
* @param y - New Y position (or undefined to keep current)
* @param isUserAction - True if this is a direct user action (affects collision resolution)
* @param preventCollision - True to prevent movement if it causes collision
* @param compactType - Compaction type for collision resolution
* @param cols - Number of columns in the grid
* @param allowOverlap - True to allow items to overlap
* @returns The updated layout
*/
declare function moveElement(layout: Layout, l: LayoutItem, x: number | undefined, y: number | undefined, isUserAction: boolean | undefined, preventCollision: boolean | undefined, compactType: CompactType, cols: number, allowOverlap?: boolean): LayoutItem[];
/**
* Move an item away from a collision.
*
* Attempts to move the item up/left first if there's room,
* otherwise moves it down/right.
*
* @param layout - Full layout
* @param collidesWith - The item being collided with
* @param itemToMove - The item to move away
* @param isUserAction - True if this is a direct user action
* @param compactType - Compaction type
* @param cols - Number of columns
* @returns Updated layout
*/
declare function moveElementAwayFromCollision(layout: Layout, collidesWith: LayoutItem, itemToMove: LayoutItem, isUserAction: boolean | undefined, compactType: CompactType, cols: number): LayoutItem[];
/**
* Validate that a layout has the required properties.
*
* @param layout - Layout to validate
* @param contextName - Name for error messages
* @throws Error if layout is invalid
*/
declare function validateLayout(layout: Layout, contextName?: string): void;
/**
* Compactor implementations.
*
* Compactors are pluggable strategies for removing gaps between grid items.
* Use the Compactor interface to create custom compaction algorithms.
*/
/**
* Resolve a compaction collision by moving items.
*
* Before moving an item to a position, checks if that movement would
* cause collisions and recursively moves those items first.
*
* Useful for implementing custom compactors.
*
* @param layout - Full layout (must be sorted for optimization)
* @param item - Item being moved (will be mutated)
* @param moveToCoord - Target coordinate
* @param axis - Which axis to move on ('x' or 'y')
*/
declare function resolveCompactionCollision(layout: Layout, item: LayoutItem, moveToCoord: number, axis: "x" | "y"): void;
/**
* Compact a single item vertically (move up).
*
* Moves the item as far up as possible without colliding.
* Useful for implementing custom vertical compactors.
*
* @param compareWith - Items to check for collisions
* @param l - Item to compact (will be mutated)
* @param fullLayout - Full layout for collision resolution
* @param maxY - Maximum Y to start from
* @returns The compacted item
*/
declare function compactItemVertical(compareWith: Layout, l: LayoutItem, fullLayout: Layout, maxY: number): LayoutItem;
/**
* Compact a single item horizontally (move left).
*
* Moves the item as far left as possible without colliding.
* Wraps to the next row if it overflows.
* Useful for implementing custom horizontal compactors.
*
* @param compareWith - Items to check for collisions
* @param l - Item to compact (will be mutated)
* @param cols - Number of columns in the grid
* @param fullLayout - Full layout for collision resolution
* @returns The compacted item
*/
declare function compactItemHorizontal(compareWith: Layout, l: LayoutItem, cols: number, fullLayout: Layout): LayoutItem;
/**
* Vertical compactor - moves items up to fill gaps.
*
* Items are sorted by row then column, and each item is moved
* as far up as possible without overlapping other items.
*
* This is the default compaction mode for react-grid-layout.
*/
declare const verticalCompactor: Compactor;
/**
* Horizontal compactor - moves items left to fill gaps.
*
* Items are sorted by column then row, and each item is moved
* as far left as possible without overlapping other items.
*/
declare const horizontalCompactor: Compactor;
/**
* No compaction - items stay where placed.
*
* Use this for free-form layouts where items can be placed anywhere.
* Items will not automatically move to fill gaps.
*/
declare const noCompactor: Compactor;
/**
* Vertical compactor that allows overlapping items.
*
* Items compact upward but are allowed to overlap each other.
* Useful for layered layouts or when collision detection is handled externally.
*/
declare const verticalOverlapCompactor: Compactor;
/**
* Horizontal compactor that allows overlapping items.
*/
declare const horizontalOverlapCompactor: Compactor;
/**
* Get a compactor by type.
*
* This is a convenience function for backwards compatibility with the
* string-based compactType API.
*
* @param compactType - 'vertical', 'horizontal', or null
* @param allowOverlap - Whether to allow overlapping items
* @returns The appropriate Compactor
*/
declare function getCompactor(compactType: "vertical" | "horizontal" | null, allowOverlap?: boolean, preventCollision?: boolean): Compactor;
/**
* Position calculation utilities.
*
* These functions convert between grid units and pixel positions,
* and generate CSS styles for grid items.
*/
/**
* Generate CSS transform-based positioning styles.
*
* Using transforms is more performant than top/left positioning
* because it doesn't trigger layout recalculations.
*
* @param position - Position in pixels
* @returns CSS style object
*/
declare function setTransform({ top, left, width, height }: Position): Record<string, string>;
/**
* Generate CSS top/left positioning styles.
*
* Use this when transforms are not suitable (e.g., for printing
* or when transform causes issues with child elements).
*
* @param position - Position in pixels
* @returns CSS style object
*/
declare function setTopLeft({ top, left, width, height }: Position): Record<string, string>;
/**
* Convert a number to a percentage string.
*
* @param num - Number to convert (0-1 range typically)
* @returns Percentage string (e.g., "50%")
*/
declare function perc(num: number): string;
/**
* Resize an item in a specific direction, clamping to container bounds.
*
* This handles the complex logic of resizing from different edges/corners,
* ensuring the item doesn't overflow the container.
*
* @param direction - Which edge/corner is being dragged
* @param currentSize - Current position and size
* @param newSize - Requested new position and size
* @param containerWidth - Width of the container
* @returns Constrained position and size
*/
declare function resizeItemInDirection(direction: ResizeHandleAxis, currentSize: Position, newSize: Position, containerWidth: number): Position;
/**
* CSS transform-based positioning strategy.
*
* Uses CSS transforms for positioning, which is more performant
* as it doesn't trigger layout recalculations.
*
* This is the default strategy.
*/
declare const transformStrategy: PositionStrategy;
/**
* Absolute (top/left) positioning strategy.
*
* Uses CSS top/left for positioning. Use this when CSS transforms
* cause issues (e.g., printing, certain child element positioning).
*/
declare const absoluteStrategy: PositionStrategy;
/**
* Create a scaled transform strategy.
*
* Use this when the grid container is inside a scaled element
* (e.g., `transform: scale(0.5)`). The scale factor adjusts
* drag/resize calculations to account for the parent transform.
*
* @param scale - Scale factor (e.g., 0.5 for half size)
* @returns Position strategy with scaled calculations
*
* @example
* ```tsx
* <div style={{ transform: 'scale(0.5)' }}>
* <GridLayout positionStrategy={createScaledStrategy(0.5)} />
* </div>
* ```
*/
declare function createScaledStrategy(scale: number): PositionStrategy;
/** Default position strategy (transform-based) */
declare const defaultPositionStrategy: PositionStrategy;
export { createScaledStrategy as A, defaultPositionStrategy as B, cloneLayoutItem as a, bottom as b, cloneLayout as c, getCompactor as d, verticalCompactor as e, setTopLeft as f, getLayoutItem as g, horizontalCompactor as h, getStatics as i, modifyLayout as j, correctBounds as k, moveElementAwayFromCollision as l, moveElement as m, noCompactor as n, verticalOverlapCompactor as o, horizontalOverlapCompactor as p, compactItemVertical as q, resolveCompactionCollision as r, setTransform as s, compactItemHorizontal as t, perc as u, validateLayout as v, withLayoutItem as w, resizeItemInDirection as x, transformStrategy as y, absoluteStrategy as z };
import { L as Layout, a as LayoutItem, C as CompactType, M as Mutable, c as Compactor, P as Position, d as ResizeHandleAxis, i as PositionStrategy } from './types-Cxf4nHNr.js';
/**
* Core layout manipulation utilities.
*
* These functions create, modify, and query grid layouts.
* All functions treat layouts as immutable - they return new arrays/objects.
*/
/**
* Get the bottom-most Y coordinate of the layout.
*
* This is the Y position plus height of the lowest item.
*
* @param layout - Layout to measure
* @returns The bottom Y coordinate (0 if layout is empty)
*/
declare function bottom(layout: Layout): number;
/**
* Get a layout item by its ID.
*
* @param layout - Layout to search
* @param id - Item ID to find
* @returns The layout item, or undefined if not found
*/
declare function getLayoutItem(layout: Layout, id: string): LayoutItem | undefined;
/**
* Get all static items from the layout.
*
* Static items cannot be moved or resized by the user.
*
* @param layout - Layout to filter
* @returns Array of static layout items
*/
declare function getStatics(layout: Layout): LayoutItem[];
/**
* Clone a layout item.
*
* Creates a shallow copy with all properties preserved.
* Boolean properties are normalized (undefined becomes false).
*
* @param layoutItem - Item to clone
* @returns A new layout item with the same properties
*/
declare function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem;
/**
* Clone an entire layout.
*
* Creates a new array with cloned items.
*
* @param layout - Layout to clone
* @returns A new layout with cloned items
*/
declare function cloneLayout(layout: Layout): LayoutItem[];
/**
* Replace a layout item in a layout.
*
* Returns a new layout with the item replaced. Other items are not cloned.
*
* @param layout - Layout to modify
* @param layoutItem - New item (matched by `i` property)
* @returns New layout with the item replaced
*/
declare function modifyLayout(layout: Layout, layoutItem: LayoutItem): LayoutItem[];
/**
* Apply a transformation to a layout item.
*
* Finds the item by key, clones it, applies the callback, and returns
* a new layout with the modified item.
*
* @param layout - Layout to modify
* @param itemKey - Key of the item to modify
* @param cb - Callback that receives the cloned item and returns the modified item
* @returns Tuple of [new layout, modified item or null if not found]
*/
declare function withLayoutItem(layout: Layout, itemKey: string, cb: (item: LayoutItem) => LayoutItem): [LayoutItem[], LayoutItem | null];
/**
* Ensure all layout items fit within the grid bounds.
*
* - Items overflowing right are moved left
* - Items overflowing left are moved to x=0 and clamped to grid width
* - Static items that collide with other statics are moved down
*
* **IMPORTANT**: This function mutates the layout items in place for performance.
* The type signature uses `Mutable<LayoutItem>[]` to make this explicit.
* Clone the layout first (e.g., with `cloneLayout()`) if you need immutability.
*
* @param layout - Layout to correct (items WILL be mutated)
* @param bounds - Grid bounds
* @returns The same layout array (for chaining)
*/
declare function correctBounds(layout: Mutable<LayoutItem>[], bounds: {
cols: number;
}): LayoutItem[];
/**
* Move a layout element to a new position.
*
* Handles collision detection and cascading movements.
* Does not compact the layout - call `compact()` separately.
*
* **Note**: This function mutates the `l` parameter directly for performance.
* The item's x, y, and moved properties will be modified. Callers should
* ideally pass a cloned item if they need to preserve the original.
*
* @param layout - Full layout
* @param l - Item to move (will be mutated)
* @param x - New X position (or undefined to keep current)
* @param y - New Y position (or undefined to keep current)
* @param isUserAction - True if this is a direct user action (affects collision resolution)
* @param preventCollision - True to prevent movement if it causes collision
* @param compactType - Compaction type for collision resolution
* @param cols - Number of columns in the grid
* @param allowOverlap - True to allow items to overlap
* @returns The updated layout
*/
declare function moveElement(layout: Layout, l: LayoutItem, x: number | undefined, y: number | undefined, isUserAction: boolean | undefined, preventCollision: boolean | undefined, compactType: CompactType, cols: number, allowOverlap?: boolean): LayoutItem[];
/**
* Move an item away from a collision.
*
* Attempts to move the item up/left first if there's room,
* otherwise moves it down/right.
*
* @param layout - Full layout
* @param collidesWith - The item being collided with
* @param itemToMove - The item to move away
* @param isUserAction - True if this is a direct user action
* @param compactType - Compaction type
* @param cols - Number of columns
* @returns Updated layout
*/
declare function moveElementAwayFromCollision(layout: Layout, collidesWith: LayoutItem, itemToMove: LayoutItem, isUserAction: boolean | undefined, compactType: CompactType, cols: number): LayoutItem[];
/**
* Validate that a layout has the required properties.
*
* @param layout - Layout to validate
* @param contextName - Name for error messages
* @throws Error if layout is invalid
*/
declare function validateLayout(layout: Layout, contextName?: string): void;
/**
* Compactor implementations.
*
* Compactors are pluggable strategies for removing gaps between grid items.
* Use the Compactor interface to create custom compaction algorithms.
*/
/**
* Resolve a compaction collision by moving items.
*
* Before moving an item to a position, checks if that movement would
* cause collisions and recursively moves those items first.
*
* Useful for implementing custom compactors.
*
* @param layout - Full layout (must be sorted for optimization)
* @param item - Item being moved (will be mutated)
* @param moveToCoord - Target coordinate
* @param axis - Which axis to move on ('x' or 'y')
*/
declare function resolveCompactionCollision(layout: Layout, item: LayoutItem, moveToCoord: number, axis: "x" | "y"): void;
/**
* Compact a single item vertically (move up).
*
* Moves the item as far up as possible without colliding.
* Useful for implementing custom vertical compactors.
*
* @param compareWith - Items to check for collisions
* @param l - Item to compact (will be mutated)
* @param fullLayout - Full layout for collision resolution
* @param maxY - Maximum Y to start from
* @returns The compacted item
*/
declare function compactItemVertical(compareWith: Layout, l: LayoutItem, fullLayout: Layout, maxY: number): LayoutItem;
/**
* Compact a single item horizontally (move left).
*
* Moves the item as far left as possible without colliding.
* Wraps to the next row if it overflows.
* Useful for implementing custom horizontal compactors.
*
* @param compareWith - Items to check for collisions
* @param l - Item to compact (will be mutated)
* @param cols - Number of columns in the grid
* @param fullLayout - Full layout for collision resolution
* @returns The compacted item
*/
declare function compactItemHorizontal(compareWith: Layout, l: LayoutItem, cols: number, fullLayout: Layout): LayoutItem;
/**
* Vertical compactor - moves items up to fill gaps.
*
* Items are sorted by row then column, and each item is moved
* as far up as possible without overlapping other items.
*
* This is the default compaction mode for react-grid-layout.
*/
declare const verticalCompactor: Compactor;
/**
* Horizontal compactor - moves items left to fill gaps.
*
* Items are sorted by column then row, and each item is moved
* as far left as possible without overlapping other items.
*/
declare const horizontalCompactor: Compactor;
/**
* No compaction - items stay where placed.
*
* Use this for free-form layouts where items can be placed anywhere.
* Items will not automatically move to fill gaps.
*/
declare const noCompactor: Compactor;
/**
* Vertical compactor that allows overlapping items.
*
* Items compact upward but are allowed to overlap each other.
* Useful for layered layouts or when collision detection is handled externally.
*/
declare const verticalOverlapCompactor: Compactor;
/**
* Horizontal compactor that allows overlapping items.
*/
declare const horizontalOverlapCompactor: Compactor;
/**
* Get a compactor by type.
*
* This is a convenience function for backwards compatibility with the
* string-based compactType API.
*
* @param compactType - 'vertical', 'horizontal', or null
* @param allowOverlap - Whether to allow overlapping items
* @returns The appropriate Compactor
*/
declare function getCompactor(compactType: "vertical" | "horizontal" | null, allowOverlap?: boolean, preventCollision?: boolean): Compactor;
/**
* Position calculation utilities.
*
* These functions convert between grid units and pixel positions,
* and generate CSS styles for grid items.
*/
/**
* Generate CSS transform-based positioning styles.
*
* Using transforms is more performant than top/left positioning
* because it doesn't trigger layout recalculations.
*
* @param position - Position in pixels
* @returns CSS style object
*/
declare function setTransform({ top, left, width, height }: Position): Record<string, string>;
/**
* Generate CSS top/left positioning styles.
*
* Use this when transforms are not suitable (e.g., for printing
* or when transform causes issues with child elements).
*
* @param position - Position in pixels
* @returns CSS style object
*/
declare function setTopLeft({ top, left, width, height }: Position): Record<string, string>;
/**
* Convert a number to a percentage string.
*
* @param num - Number to convert (0-1 range typically)
* @returns Percentage string (e.g., "50%")
*/
declare function perc(num: number): string;
/**
* Resize an item in a specific direction, clamping to container bounds.
*
* This handles the complex logic of resizing from different edges/corners,
* ensuring the item doesn't overflow the container.
*
* @param direction - Which edge/corner is being dragged
* @param currentSize - Current position and size
* @param newSize - Requested new position and size
* @param containerWidth - Width of the container
* @returns Constrained position and size
*/
declare function resizeItemInDirection(direction: ResizeHandleAxis, currentSize: Position, newSize: Position, containerWidth: number): Position;
/**
* CSS transform-based positioning strategy.
*
* Uses CSS transforms for positioning, which is more performant
* as it doesn't trigger layout recalculations.
*
* This is the default strategy.
*/
declare const transformStrategy: PositionStrategy;
/**
* Absolute (top/left) positioning strategy.
*
* Uses CSS top/left for positioning. Use this when CSS transforms
* cause issues (e.g., printing, certain child element positioning).
*/
declare const absoluteStrategy: PositionStrategy;
/**
* Create a scaled transform strategy.
*
* Use this when the grid container is inside a scaled element
* (e.g., `transform: scale(0.5)`). The scale factor adjusts
* drag/resize calculations to account for the parent transform.
*
* @param scale - Scale factor (e.g., 0.5 for half size)
* @returns Position strategy with scaled calculations
*
* @example
* ```tsx
* <div style={{ transform: 'scale(0.5)' }}>
* <GridLayout positionStrategy={createScaledStrategy(0.5)} />
* </div>
* ```
*/
declare function createScaledStrategy(scale: number): PositionStrategy;
/** Default position strategy (transform-based) */
declare const defaultPositionStrategy: PositionStrategy;
export { createScaledStrategy as A, defaultPositionStrategy as B, cloneLayoutItem as a, bottom as b, cloneLayout as c, getCompactor as d, verticalCompactor as e, setTopLeft as f, getLayoutItem as g, horizontalCompactor as h, getStatics as i, modifyLayout as j, correctBounds as k, moveElementAwayFromCollision as l, moveElement as m, noCompactor as n, verticalOverlapCompactor as o, horizontalOverlapCompactor as p, compactItemVertical as q, resolveCompactionCollision as r, setTransform as s, compactItemHorizontal as t, perc as u, validateLayout as v, withLayoutItem as w, resizeItemInDirection as x, transformStrategy as y, absoluteStrategy as z };
import { a as LayoutItem, L as Layout, C as CompactType, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-Cxf4nHNr.js';
/**
* Collision detection utilities for grid layouts.
*
* These functions determine if and where layout items overlap.
*/
/**
* Check if two layout items collide (overlap).
*
* Two items collide if their bounding boxes overlap and they are
* not the same item.
*
* @param l1 - First layout item
* @param l2 - Second layout item
* @returns true if the items collide
*/
declare function collides(l1: LayoutItem, l2: LayoutItem): boolean;
/**
* Find the first item in the layout that collides with the given item.
*
* @param layout - Layout to search
* @param layoutItem - Item to check for collisions
* @returns The first colliding item, or undefined if none
*/
declare function getFirstCollision(layout: Layout, layoutItem: LayoutItem): LayoutItem | undefined;
/**
* Find all items in the layout that collide with the given item.
*
* @param layout - Layout to search
* @param layoutItem - Item to check for collisions
* @returns Array of all colliding items (may be empty)
*/
declare function getAllCollisions(layout: Layout, layoutItem: LayoutItem): LayoutItem[];
/**
* Sorting utilities for grid layouts.
*
* These functions sort layout items for compaction and iteration.
*/
/**
* Sort layout items based on the compaction type.
*
* - Vertical compaction: sort by row (y) then column (x)
* - Horizontal compaction: sort by column (x) then row (y)
* - No compaction (null): return original order
*
* Does not modify the original layout.
*
* @param layout - Layout to sort
* @param compactType - Type of compaction
* @returns Sorted layout
*/
declare function sortLayoutItems(layout: Layout, compactType: CompactType): LayoutItem[];
/**
* Sort layout items by row ascending, then column ascending.
*
* Items are ordered from top-left to bottom-right, row by row.
* This is the natural reading order for vertical compaction.
*
* Does not modify the original layout.
*
* @param layout - Layout to sort
* @returns Sorted array of layout items
*/
declare function sortLayoutItemsByRowCol(layout: Layout): LayoutItem[];
/**
* Sort layout items by column ascending, then row ascending.
*
* Items are ordered from top-left to bottom-right, column by column.
* This is the natural order for horizontal compaction.
*
* Does not modify the original layout.
*
* @param layout - Layout to sort
* @returns Sorted array of layout items
*/
declare function sortLayoutItemsByColRow(layout: Layout): LayoutItem[];
/**
* Responsive layout utilities.
*
* Functions for handling responsive breakpoints and layout generation.
*/
/**
* Sort breakpoints by width (ascending).
*
* Returns an array of breakpoint names sorted from smallest to largest.
* E.g., ['xxs', 'xs', 'sm', 'md', 'lg']
*
* @param breakpoints - Map of breakpoint names to widths
* @returns Sorted array of breakpoint names
*/
declare function sortBreakpoints<B extends Breakpoint>(breakpoints: Breakpoints<B>): B[];
/**
* Get the active breakpoint for a given width.
*
* Returns the highest breakpoint that is valid for the width (width > breakpoint).
*
* @param breakpoints - Map of breakpoint names to widths
* @param width - Container width in pixels
* @returns Active breakpoint name
*/
declare function getBreakpointFromWidth<B extends Breakpoint>(breakpoints: Breakpoints<B>, width: number): B;
/**
* Get the column count for a breakpoint.
*
* @param breakpoint - Breakpoint name
* @param cols - Map of breakpoint names to column counts
* @returns Number of columns for the breakpoint
* @throws Error if breakpoint is not defined in cols
*/
declare function getColsFromBreakpoint<B extends Breakpoint>(breakpoint: B, cols: Breakpoints<B>): number;
/**
* Find or generate a layout for a breakpoint.
*
* If a layout exists for the breakpoint, returns a clone.
* Otherwise, generates a new layout from the nearest larger breakpoint.
*
* @param layouts - Existing layouts by breakpoint
* @param breakpoints - Breakpoint definitions
* @param breakpoint - Target breakpoint
* @param lastBreakpoint - Previous breakpoint (for fallback)
* @param cols - Column count for the target breakpoint
* @param compactType - Compaction type
* @returns Layout for the breakpoint
*/
declare function findOrGenerateResponsiveLayout<B extends Breakpoint>(layouts: ResponsiveLayouts<B>, breakpoints: Breakpoints<B>, breakpoint: B, lastBreakpoint: B, cols: number, compactType: CompactType): Layout;
type IndentationValue<B extends Breakpoint> = readonly [number, number] | Partial<Record<B, readonly [number, number]>>;
/**
* Get margin or padding value for a breakpoint.
*
* Supports both fixed values ([x, y]) and breakpoint-specific values
* ({ lg: [x, y], md: [x, y], ... }).
*
* @param value - Fixed value or breakpoint-specific map
* @param breakpoint - Current breakpoint
* @returns Margin/padding tuple [x, y]
*/
declare function getIndentationValue<B extends Breakpoint>(value: IndentationValue<B>, breakpoint: B): readonly [number, number];
export { getAllCollisions as a, sortLayoutItemsByRowCol as b, collides as c, sortLayoutItemsByColRow as d, getBreakpointFromWidth as e, getColsFromBreakpoint as f, getFirstCollision as g, findOrGenerateResponsiveLayout as h, sortBreakpoints as i, getIndentationValue as j, sortLayoutItems as s };
import { a as LayoutItem, L as Layout, C as CompactType, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-Cxf4nHNr.mjs';
/**
* Collision detection utilities for grid layouts.
*
* These functions determine if and where layout items overlap.
*/
/**
* Check if two layout items collide (overlap).
*
* Two items collide if their bounding boxes overlap and they are
* not the same item.
*
* @param l1 - First layout item
* @param l2 - Second layout item
* @returns true if the items collide
*/
declare function collides(l1: LayoutItem, l2: LayoutItem): boolean;
/**
* Find the first item in the layout that collides with the given item.
*
* @param layout - Layout to search
* @param layoutItem - Item to check for collisions
* @returns The first colliding item, or undefined if none
*/
declare function getFirstCollision(layout: Layout, layoutItem: LayoutItem): LayoutItem | undefined;
/**
* Find all items in the layout that collide with the given item.
*
* @param layout - Layout to search
* @param layoutItem - Item to check for collisions
* @returns Array of all colliding items (may be empty)
*/
declare function getAllCollisions(layout: Layout, layoutItem: LayoutItem): LayoutItem[];
/**
* Sorting utilities for grid layouts.
*
* These functions sort layout items for compaction and iteration.
*/
/**
* Sort layout items based on the compaction type.
*
* - Vertical compaction: sort by row (y) then column (x)
* - Horizontal compaction: sort by column (x) then row (y)
* - No compaction (null): return original order
*
* Does not modify the original layout.
*
* @param layout - Layout to sort
* @param compactType - Type of compaction
* @returns Sorted layout
*/
declare function sortLayoutItems(layout: Layout, compactType: CompactType): LayoutItem[];
/**
* Sort layout items by row ascending, then column ascending.
*
* Items are ordered from top-left to bottom-right, row by row.
* This is the natural reading order for vertical compaction.
*
* Does not modify the original layout.
*
* @param layout - Layout to sort
* @returns Sorted array of layout items
*/
declare function sortLayoutItemsByRowCol(layout: Layout): LayoutItem[];
/**
* Sort layout items by column ascending, then row ascending.
*
* Items are ordered from top-left to bottom-right, column by column.
* This is the natural order for horizontal compaction.
*
* Does not modify the original layout.
*
* @param layout - Layout to sort
* @returns Sorted array of layout items
*/
declare function sortLayoutItemsByColRow(layout: Layout): LayoutItem[];
/**
* Responsive layout utilities.
*
* Functions for handling responsive breakpoints and layout generation.
*/
/**
* Sort breakpoints by width (ascending).
*
* Returns an array of breakpoint names sorted from smallest to largest.
* E.g., ['xxs', 'xs', 'sm', 'md', 'lg']
*
* @param breakpoints - Map of breakpoint names to widths
* @returns Sorted array of breakpoint names
*/
declare function sortBreakpoints<B extends Breakpoint>(breakpoints: Breakpoints<B>): B[];
/**
* Get the active breakpoint for a given width.
*
* Returns the highest breakpoint that is valid for the width (width > breakpoint).
*
* @param breakpoints - Map of breakpoint names to widths
* @param width - Container width in pixels
* @returns Active breakpoint name
*/
declare function getBreakpointFromWidth<B extends Breakpoint>(breakpoints: Breakpoints<B>, width: number): B;
/**
* Get the column count for a breakpoint.
*
* @param breakpoint - Breakpoint name
* @param cols - Map of breakpoint names to column counts
* @returns Number of columns for the breakpoint
* @throws Error if breakpoint is not defined in cols
*/
declare function getColsFromBreakpoint<B extends Breakpoint>(breakpoint: B, cols: Breakpoints<B>): number;
/**
* Find or generate a layout for a breakpoint.
*
* If a layout exists for the breakpoint, returns a clone.
* Otherwise, generates a new layout from the nearest larger breakpoint.
*
* @param layouts - Existing layouts by breakpoint
* @param breakpoints - Breakpoint definitions
* @param breakpoint - Target breakpoint
* @param lastBreakpoint - Previous breakpoint (for fallback)
* @param cols - Column count for the target breakpoint
* @param compactType - Compaction type
* @returns Layout for the breakpoint
*/
declare function findOrGenerateResponsiveLayout<B extends Breakpoint>(layouts: ResponsiveLayouts<B>, breakpoints: Breakpoints<B>, breakpoint: B, lastBreakpoint: B, cols: number, compactType: CompactType): Layout;
type IndentationValue<B extends Breakpoint> = readonly [number, number] | Partial<Record<B, readonly [number, number]>>;
/**
* Get margin or padding value for a breakpoint.
*
* Supports both fixed values ([x, y]) and breakpoint-specific values
* ({ lg: [x, y], md: [x, y], ... }).
*
* @param value - Fixed value or breakpoint-specific map
* @param breakpoint - Current breakpoint
* @returns Margin/padding tuple [x, y]
*/
declare function getIndentationValue<B extends Breakpoint>(value: IndentationValue<B>, breakpoint: B): readonly [number, number];
export { getAllCollisions as a, sortLayoutItemsByRowCol as b, collides as c, sortLayoutItemsByColRow as d, getBreakpointFromWidth as e, getColsFromBreakpoint as f, getFirstCollision as g, findOrGenerateResponsiveLayout as h, sortBreakpoints as i, getIndentationValue as j, sortLayoutItems as s };
import React__default, { CSSProperties, DragEvent, ReactElement } from 'react';
import { j as GridConfig, k as DragConfig, l as ResizeConfig, m as DropConfig, i as PositionStrategy, c as Compactor, L as Layout, a as LayoutItem, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-Cxf4nHNr.js';
/**
* GridLayout component
*
* A reactive, fluid grid layout with draggable, resizable components.
*/
type EventCallback = (layout: Layout, oldItem: LayoutItem | null, newItem: LayoutItem | null, placeholder: LayoutItem | null, event: Event, element?: HTMLElement) => void;
interface GridLayoutProps {
/** Child elements to render in the grid */
children: React__default.ReactNode;
/** Width of the container in pixels */
width: number;
/**
* Grid measurement configuration.
* @see GridConfig
*/
gridConfig?: Partial<GridConfig>;
/**
* Drag behavior configuration.
* @see DragConfig
*/
dragConfig?: Partial<DragConfig>;
/**
* Resize behavior configuration.
* @see ResizeConfig
*/
resizeConfig?: Partial<ResizeConfig>;
/**
* External drop configuration.
* @see DropConfig
*/
dropConfig?: Partial<DropConfig>;
/**
* CSS positioning strategy.
* Use transformStrategy (default), absoluteStrategy, or createScaledStrategy(scale).
* @see PositionStrategy
*/
positionStrategy?: PositionStrategy;
/**
* Layout compaction strategy.
* Use verticalCompactor (default), horizontalCompactor, or noCompactor.
* @see Compactor
*/
compactor?: Compactor;
/** Layout definition */
layout?: Layout;
/** Item to use when dropping from outside */
droppingItem?: LayoutItem;
/** Whether to auto-size the container height */
autoSize?: boolean;
/** Additional class name */
className?: string;
/** Additional styles */
style?: CSSProperties;
/** Ref to the container element */
innerRef?: React__default.Ref<HTMLDivElement>;
/** Called when layout changes */
onLayoutChange?: (layout: Layout) => void;
/** Called when drag starts */
onDragStart?: EventCallback;
/** Called during drag */
onDrag?: EventCallback;
/** Called when drag stops */
onDragStop?: EventCallback;
/** Called when resize starts */
onResizeStart?: EventCallback;
/** Called during resize */
onResize?: EventCallback;
/** Called when resize stops */
onResizeStop?: EventCallback;
/** Called when an item is dropped from outside */
onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;
/** Called when dragging over the grid */
onDropDragOver?: (e: DragEvent) => {
w?: number;
h?: number;
} | false | void;
}
/**
* GridLayout - A reactive, fluid grid layout with draggable, resizable components.
*/
declare function GridLayout(props: GridLayoutProps): ReactElement;
/**
* ResponsiveGridLayout component
*
* A responsive grid layout that automatically adjusts to container width.
*/
interface ResponsiveGridLayoutProps<B extends Breakpoint = string> extends Omit<GridLayoutProps, "gridConfig" | "layout" | "onLayoutChange"> {
/** Current breakpoint (optional, auto-detected from width) */
breakpoint?: B;
/** Breakpoint definitions (name → min-width) */
breakpoints?: Breakpoints<B>;
/** Column counts per breakpoint */
cols?: Breakpoints<B>;
/** Layouts for each breakpoint */
layouts?: ResponsiveLayouts<B>;
/** Row height (default: 150) */
rowHeight?: number;
/** Maximum rows (default: Infinity) */
maxRows?: number;
/** Margin between items - can be fixed or per-breakpoint */
margin?: readonly [number, number] | Partial<Record<B, readonly [number, number]>>;
/** Container padding - can be fixed or per-breakpoint */
containerPadding?: readonly [number, number] | Partial<Record<B, readonly [number, number] | null>> | null;
/** Compactor for layout compaction */
compactor?: Compactor;
/** Called when breakpoint changes */
onBreakpointChange?: (newBreakpoint: B, cols: number) => void;
/** Called when layout changes */
onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;
/** Called when width changes */
onWidthChange?: (containerWidth: number, margin: readonly [number, number], cols: number, containerPadding: readonly [number, number] | null) => void;
}
/**
* ResponsiveGridLayout - A responsive grid layout that adjusts to container width.
*/
declare function ResponsiveGridLayout<B extends Breakpoint = string>(props: ResponsiveGridLayoutProps<B>): ReactElement;
export { type EventCallback as E, GridLayout as G, ResponsiveGridLayout as R, type GridLayoutProps as a, type ResponsiveGridLayoutProps as b };
import React__default, { CSSProperties, DragEvent, ReactElement } from 'react';
import { j as GridConfig, k as DragConfig, l as ResizeConfig, m as DropConfig, i as PositionStrategy, c as Compactor, L as Layout, a as LayoutItem, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-Cxf4nHNr.mjs';
/**
* GridLayout component
*
* A reactive, fluid grid layout with draggable, resizable components.
*/
type EventCallback = (layout: Layout, oldItem: LayoutItem | null, newItem: LayoutItem | null, placeholder: LayoutItem | null, event: Event, element?: HTMLElement) => void;
interface GridLayoutProps {
/** Child elements to render in the grid */
children: React__default.ReactNode;
/** Width of the container in pixels */
width: number;
/**
* Grid measurement configuration.
* @see GridConfig
*/
gridConfig?: Partial<GridConfig>;
/**
* Drag behavior configuration.
* @see DragConfig
*/
dragConfig?: Partial<DragConfig>;
/**
* Resize behavior configuration.
* @see ResizeConfig
*/
resizeConfig?: Partial<ResizeConfig>;
/**
* External drop configuration.
* @see DropConfig
*/
dropConfig?: Partial<DropConfig>;
/**
* CSS positioning strategy.
* Use transformStrategy (default), absoluteStrategy, or createScaledStrategy(scale).
* @see PositionStrategy
*/
positionStrategy?: PositionStrategy;
/**
* Layout compaction strategy.
* Use verticalCompactor (default), horizontalCompactor, or noCompactor.
* @see Compactor
*/
compactor?: Compactor;
/** Layout definition */
layout?: Layout;
/** Item to use when dropping from outside */
droppingItem?: LayoutItem;
/** Whether to auto-size the container height */
autoSize?: boolean;
/** Additional class name */
className?: string;
/** Additional styles */
style?: CSSProperties;
/** Ref to the container element */
innerRef?: React__default.Ref<HTMLDivElement>;
/** Called when layout changes */
onLayoutChange?: (layout: Layout) => void;
/** Called when drag starts */
onDragStart?: EventCallback;
/** Called during drag */
onDrag?: EventCallback;
/** Called when drag stops */
onDragStop?: EventCallback;
/** Called when resize starts */
onResizeStart?: EventCallback;
/** Called during resize */
onResize?: EventCallback;
/** Called when resize stops */
onResizeStop?: EventCallback;
/** Called when an item is dropped from outside */
onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;
/** Called when dragging over the grid */
onDropDragOver?: (e: DragEvent) => {
w?: number;
h?: number;
} | false | void;
}
/**
* GridLayout - A reactive, fluid grid layout with draggable, resizable components.
*/
declare function GridLayout(props: GridLayoutProps): ReactElement;
/**
* ResponsiveGridLayout component
*
* A responsive grid layout that automatically adjusts to container width.
*/
interface ResponsiveGridLayoutProps<B extends Breakpoint = string> extends Omit<GridLayoutProps, "gridConfig" | "layout" | "onLayoutChange"> {
/** Current breakpoint (optional, auto-detected from width) */
breakpoint?: B;
/** Breakpoint definitions (name → min-width) */
breakpoints?: Breakpoints<B>;
/** Column counts per breakpoint */
cols?: Breakpoints<B>;
/** Layouts for each breakpoint */
layouts?: ResponsiveLayouts<B>;
/** Row height (default: 150) */
rowHeight?: number;
/** Maximum rows (default: Infinity) */
maxRows?: number;
/** Margin between items - can be fixed or per-breakpoint */
margin?: readonly [number, number] | Partial<Record<B, readonly [number, number]>>;
/** Container padding - can be fixed or per-breakpoint */
containerPadding?: readonly [number, number] | Partial<Record<B, readonly [number, number] | null>> | null;
/** Compactor for layout compaction */
compactor?: Compactor;
/** Called when breakpoint changes */
onBreakpointChange?: (newBreakpoint: B, cols: number) => void;
/** Called when layout changes */
onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;
/** Called when width changes */
onWidthChange?: (containerWidth: number, margin: readonly [number, number], cols: number, containerPadding: readonly [number, number] | null) => void;
}
/**
* ResponsiveGridLayout - A responsive grid layout that adjusts to container width.
*/
declare function ResponsiveGridLayout<B extends Breakpoint = string>(props: ResponsiveGridLayoutProps<B>): ReactElement;
export { type EventCallback as E, GridLayout as G, ResponsiveGridLayout as R, type GridLayoutProps as a, type ResponsiveGridLayoutProps as b };
/**
* Core types for react-grid-layout v2
*
* These types are framework-agnostic and define the data structures
* used by the layout algorithms.
*/
/**
* Axis identifiers for resize handles.
* - Cardinal: 'n', 's', 'e', 'w' (north, south, east, west)
* - Diagonal: 'ne', 'nw', 'se', 'sw'
*/
type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
/**
* A single item in the grid layout.
*
* Position (x, y) is in grid units, not pixels.
* Size (w, h) is in grid units.
*/
interface LayoutItem {
/** Unique identifier for this item */
i: string;
/** X position in grid units (0-indexed from left) */
x: number;
/** Y position in grid units (0-indexed from top) */
y: number;
/** Width in grid units */
w: number;
/** Height in grid units */
h: number;
/** Minimum width in grid units */
minW?: number;
/** Minimum height in grid units */
minH?: number;
/** Maximum width in grid units */
maxW?: number;
/** Maximum height in grid units */
maxH?: number;
/**
* If true, item cannot be dragged or resized, and other items
* will move around it during compaction.
*/
static?: boolean;
/**
* If false, item cannot be dragged (but may still be resizable).
* Overrides grid-level isDraggable for this item.
*/
isDraggable?: boolean;
/**
* If false, item cannot be resized (but may still be draggable).
* Overrides grid-level isResizable for this item.
*/
isResizable?: boolean;
/**
* Which resize handles to show for this item.
* Overrides grid-level resizeHandles for this item.
*/
resizeHandles?: ResizeHandleAxis[];
/**
* If true, item is constrained to the grid container bounds.
* Overrides grid-level isBounded for this item.
*/
isBounded?: boolean;
/**
* Internal flag set during drag/resize operations to indicate
* the item has moved from its original position.
* @internal
*/
moved?: boolean;
}
/**
* A layout is a readonly array of layout items.
* Layouts should be treated as immutable.
*/
type Layout = readonly LayoutItem[];
/**
* Pixel position and size of an element.
*/
interface Position {
left: number;
top: number;
width: number;
height: number;
}
/**
* Partial position (just coordinates, no size).
*/
interface PartialPosition {
left: number;
top: number;
}
/**
* Size in pixels.
*/
interface Size {
width: number;
height: number;
}
/**
* Position when dropping an external element onto the grid.
*/
interface DroppingPosition {
left: number;
top: number;
e: Event;
}
/**
* Data provided by react-draggable during drag operations.
*/
interface ReactDraggableCallbackData {
node: HTMLElement;
x?: number;
y?: number;
deltaX: number;
deltaY: number;
lastX?: number;
lastY?: number;
}
/**
* Grid-level drag event data.
*/
interface GridDragEvent {
e: Event;
node: HTMLElement;
newPosition: PartialPosition;
}
/**
* Grid-level resize event data.
*/
interface GridResizeEvent {
e: Event;
node: HTMLElement;
size: Size;
handle: ResizeHandleAxis;
}
/**
* Drag-over event with layer coordinates.
*/
interface DragOverEvent extends MouseEvent {
nativeEvent: Event & {
layerX: number;
layerY: number;
};
}
/**
* Type of compaction to apply to the layout.
* - 'vertical': Items compact upward (default)
* - 'horizontal': Items compact leftward
* - null: No compaction (free-form positioning)
*/
type CompactType = "horizontal" | "vertical" | null;
/**
* Standard callback signature for layout change events.
*
* @param layout - The current layout after the change
* @param oldItem - The item before the change (null if not applicable)
* @param newItem - The item after the change (null if not applicable)
* @param placeholder - The placeholder item during drag/resize (null at start)
* @param event - The DOM event that triggered the change
* @param element - The DOM element being manipulated (null if not applicable)
*/
type EventCallback = (layout: Layout, oldItem: LayoutItem | null, newItem: LayoutItem | null, placeholder: LayoutItem | null, event: Event, element: HTMLElement | null) => void;
/**
* Callback when layout changes for any reason.
*/
type OnLayoutChangeCallback = (layout: Layout) => void;
/**
* Interface for layout compaction strategies.
*
* Implement this interface to create custom compaction algorithms.
*
* @example
* ```typescript
* const myCompactor: Compactor = {
* type: 'vertical',
* allowOverlap: false,
* compact(layout, cols) {
* // Custom compaction logic
* return compactedLayout;
* },
* onMove(layout, item, x, y, cols) {
* // Handle item movement
* return updatedLayout;
* }
* };
* ```
*/
interface Compactor {
/** Compaction type identifier */
readonly type: CompactType;
/** Whether overlapping items are allowed */
readonly allowOverlap: boolean;
/** Whether to prevent collisions instead of pushing items */
readonly preventCollision?: boolean;
/**
* Compact the layout.
*
* @param layout - The layout to compact
* @param cols - Number of columns in the grid
* @returns The compacted layout
*/
compact(layout: Layout, cols: number): Layout;
/**
* Handle item movement, returning the updated layout.
*
* @param layout - Current layout
* @param item - The item being moved
* @param x - New x position
* @param y - New y position
* @param cols - Number of columns
* @returns Updated layout after the move
*/
onMove(layout: Layout, item: LayoutItem, x: number, y: number, cols: number): Layout;
}
/**
* Interface for CSS positioning strategies.
*
* Implement this interface to customize how items are positioned in the DOM.
* Built-in strategies: transformStrategy, absoluteStrategy.
*
* @example
* ```typescript
* // Use transform-based positioning (default, better performance)
* <GridLayout positionStrategy={transformStrategy} />
*
* // Use top/left positioning (for environments where transforms cause issues)
* <GridLayout positionStrategy={absoluteStrategy} />
*
* // Use scaled transforms (for scaled containers)
* <GridLayout positionStrategy={createScaledStrategy(0.5)} />
* ```
*/
interface PositionStrategy {
/** Strategy type identifier */
readonly type: "transform" | "absolute";
/** Scale factor for drag/resize calculations */
readonly scale: number;
/**
* Convert pixel position to CSS style object.
*
* @param pos - Position in pixels
* @returns CSS properties for positioning the element
*/
calcStyle(pos: Position): React.CSSProperties;
/**
* Calculate position during drag operations, accounting for transforms and scale.
*
* @param clientX - Mouse client X position
* @param clientY - Mouse client Y position
* @param offsetX - Offset from element origin X
* @param offsetY - Offset from element origin Y
* @returns Adjusted left/top position
*/
calcDragPosition(clientX: number, clientY: number, offsetX: number, offsetY: number): PartialPosition;
}
/**
* Grid measurement configuration.
* Groups all grid metrics (columns, row height, margins).
*/
interface GridConfig {
/** Number of columns in the grid (default: 12) */
cols: number;
/** Height of a single row in pixels (default: 150) */
rowHeight: number;
/** [horizontal, vertical] margin between items in pixels (default: [10, 10]) */
margin: readonly [number, number];
/** [horizontal, vertical] padding inside the container (default: null, uses margin) */
containerPadding: readonly [number, number] | null;
/** Maximum number of rows (default: Infinity) */
maxRows: number;
}
/** Default grid configuration */
declare const defaultGridConfig: GridConfig;
/**
* Drag behavior configuration.
* Groups all drag-related settings.
*/
interface DragConfig {
/** Whether items can be dragged (default: true) */
enabled: boolean;
/** Whether items are bounded to the container (default: false) */
bounded: boolean;
/** CSS selector for drag handle (e.g., '.drag-handle') */
handle?: string;
/** CSS selector for elements that should not trigger drag */
cancel?: string;
/**
* Minimum pixels to move before drag starts.
* Helps distinguish click from drag (fixes #1341, #1401).
* @default 3
*/
threshold: number;
}
/** Default drag configuration */
declare const defaultDragConfig: DragConfig;
/**
* Resize behavior configuration.
* Groups all resize-related settings.
*/
interface ResizeConfig {
/** Whether items can be resized (default: true) */
enabled: boolean;
/** Which resize handles to show (default: ['se']) */
handles: readonly ResizeHandleAxis[];
/**
* Custom resize handle component.
* Can be a React node or a function that receives the axis.
*/
handleComponent?: React.ReactNode | ((axis: ResizeHandleAxis, ref: React.Ref<HTMLElement>) => React.ReactNode);
}
/** Default resize configuration */
declare const defaultResizeConfig: ResizeConfig;
/**
* Drop configuration (for dropping external elements).
* Groups all drop-related settings.
*/
interface DropConfig {
/** Whether external elements can be dropped on the grid (default: false) */
enabled: boolean;
/** Default size for dropped items (default: { w: 1, h: 1 }) */
defaultItem: {
w: number;
h: number;
};
/**
* Called when dragging over the grid.
* Return dimensions to override defaultItem, or false to reject the drop.
*/
onDragOver?: (e: DragEvent) => {
w?: number;
h?: number;
} | false | void;
}
/** Default drop configuration */
declare const defaultDropConfig: DropConfig;
/**
* Breakpoint name (e.g., 'lg', 'md', 'sm', 'xs', 'xxs').
*/
type Breakpoint = string;
/**
* Map of breakpoint name to pixel width.
* Generic type B allows custom breakpoint strings.
*/
type Breakpoints<B extends Breakpoint = Breakpoint> = Record<B, number>;
/**
* Map of breakpoint name to number of columns.
* Generic type B allows custom breakpoint strings.
*/
type BreakpointCols<B extends Breakpoint = Breakpoint> = Record<B, number>;
/**
* Map of breakpoint name to layout.
* Generic type B allows custom breakpoint strings.
*/
type ResponsiveLayouts<B extends Breakpoint = Breakpoint> = Partial<Record<B, Layout>>;
/**
* Callback when breakpoint changes.
*/
type OnBreakpointChangeCallback<B extends Breakpoint = Breakpoint> = (newBreakpoint: B, cols: number) => void;
/**
* Makes all properties in T mutable (removes readonly).
*/
type Mutable<T> = {
-readonly [P in keyof T]: T[P];
};
/**
* Deep partial - all properties and nested properties are optional.
*/
type DeepPartial<T> = {
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};
/**
* Extract the element type from an array type.
*/
type ArrayElement<T> = T extends readonly (infer U)[] ? U : never;
export { type ArrayElement as A, type Breakpoint as B, type CompactType as C, type DroppingPosition as D, type EventCallback as E, type GridDragEvent as G, type Layout as L, type Mutable as M, type OnLayoutChangeCallback as O, type Position as P, type ResponsiveLayouts as R, type Size as S, type LayoutItem as a, type Breakpoints as b, type Compactor as c, type ResizeHandleAxis as d, type GridResizeEvent as e, type PartialPosition as f, type ReactDraggableCallbackData as g, type DragOverEvent as h, type PositionStrategy as i, type GridConfig as j, type DragConfig as k, type ResizeConfig as l, type DropConfig as m, type BreakpointCols as n, type OnBreakpointChangeCallback as o, type DeepPartial as p, defaultGridConfig as q, defaultDragConfig as r, defaultResizeConfig as s, defaultDropConfig as t };
/**
* Core types for react-grid-layout v2
*
* These types are framework-agnostic and define the data structures
* used by the layout algorithms.
*/
/**
* Axis identifiers for resize handles.
* - Cardinal: 'n', 's', 'e', 'w' (north, south, east, west)
* - Diagonal: 'ne', 'nw', 'se', 'sw'
*/
type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
/**
* A single item in the grid layout.
*
* Position (x, y) is in grid units, not pixels.
* Size (w, h) is in grid units.
*/
interface LayoutItem {
/** Unique identifier for this item */
i: string;
/** X position in grid units (0-indexed from left) */
x: number;
/** Y position in grid units (0-indexed from top) */
y: number;
/** Width in grid units */
w: number;
/** Height in grid units */
h: number;
/** Minimum width in grid units */
minW?: number;
/** Minimum height in grid units */
minH?: number;
/** Maximum width in grid units */
maxW?: number;
/** Maximum height in grid units */
maxH?: number;
/**
* If true, item cannot be dragged or resized, and other items
* will move around it during compaction.
*/
static?: boolean;
/**
* If false, item cannot be dragged (but may still be resizable).
* Overrides grid-level isDraggable for this item.
*/
isDraggable?: boolean;
/**
* If false, item cannot be resized (but may still be draggable).
* Overrides grid-level isResizable for this item.
*/
isResizable?: boolean;
/**
* Which resize handles to show for this item.
* Overrides grid-level resizeHandles for this item.
*/
resizeHandles?: ResizeHandleAxis[];
/**
* If true, item is constrained to the grid container bounds.
* Overrides grid-level isBounded for this item.
*/
isBounded?: boolean;
/**
* Internal flag set during drag/resize operations to indicate
* the item has moved from its original position.
* @internal
*/
moved?: boolean;
}
/**
* A layout is a readonly array of layout items.
* Layouts should be treated as immutable.
*/
type Layout = readonly LayoutItem[];
/**
* Pixel position and size of an element.
*/
interface Position {
left: number;
top: number;
width: number;
height: number;
}
/**
* Partial position (just coordinates, no size).
*/
interface PartialPosition {
left: number;
top: number;
}
/**
* Size in pixels.
*/
interface Size {
width: number;
height: number;
}
/**
* Position when dropping an external element onto the grid.
*/
interface DroppingPosition {
left: number;
top: number;
e: Event;
}
/**
* Data provided by react-draggable during drag operations.
*/
interface ReactDraggableCallbackData {
node: HTMLElement;
x?: number;
y?: number;
deltaX: number;
deltaY: number;
lastX?: number;
lastY?: number;
}
/**
* Grid-level drag event data.
*/
interface GridDragEvent {
e: Event;
node: HTMLElement;
newPosition: PartialPosition;
}
/**
* Grid-level resize event data.
*/
interface GridResizeEvent {
e: Event;
node: HTMLElement;
size: Size;
handle: ResizeHandleAxis;
}
/**
* Drag-over event with layer coordinates.
*/
interface DragOverEvent extends MouseEvent {
nativeEvent: Event & {
layerX: number;
layerY: number;
};
}
/**
* Type of compaction to apply to the layout.
* - 'vertical': Items compact upward (default)
* - 'horizontal': Items compact leftward
* - null: No compaction (free-form positioning)
*/
type CompactType = "horizontal" | "vertical" | null;
/**
* Standard callback signature for layout change events.
*
* @param layout - The current layout after the change
* @param oldItem - The item before the change (null if not applicable)
* @param newItem - The item after the change (null if not applicable)
* @param placeholder - The placeholder item during drag/resize (null at start)
* @param event - The DOM event that triggered the change
* @param element - The DOM element being manipulated (null if not applicable)
*/
type EventCallback = (layout: Layout, oldItem: LayoutItem | null, newItem: LayoutItem | null, placeholder: LayoutItem | null, event: Event, element: HTMLElement | null) => void;
/**
* Callback when layout changes for any reason.
*/
type OnLayoutChangeCallback = (layout: Layout) => void;
/**
* Interface for layout compaction strategies.
*
* Implement this interface to create custom compaction algorithms.
*
* @example
* ```typescript
* const myCompactor: Compactor = {
* type: 'vertical',
* allowOverlap: false,
* compact(layout, cols) {
* // Custom compaction logic
* return compactedLayout;
* },
* onMove(layout, item, x, y, cols) {
* // Handle item movement
* return updatedLayout;
* }
* };
* ```
*/
interface Compactor {
/** Compaction type identifier */
readonly type: CompactType;
/** Whether overlapping items are allowed */
readonly allowOverlap: boolean;
/** Whether to prevent collisions instead of pushing items */
readonly preventCollision?: boolean;
/**
* Compact the layout.
*
* @param layout - The layout to compact
* @param cols - Number of columns in the grid
* @returns The compacted layout
*/
compact(layout: Layout, cols: number): Layout;
/**
* Handle item movement, returning the updated layout.
*
* @param layout - Current layout
* @param item - The item being moved
* @param x - New x position
* @param y - New y position
* @param cols - Number of columns
* @returns Updated layout after the move
*/
onMove(layout: Layout, item: LayoutItem, x: number, y: number, cols: number): Layout;
}
/**
* Interface for CSS positioning strategies.
*
* Implement this interface to customize how items are positioned in the DOM.
* Built-in strategies: transformStrategy, absoluteStrategy.
*
* @example
* ```typescript
* // Use transform-based positioning (default, better performance)
* <GridLayout positionStrategy={transformStrategy} />
*
* // Use top/left positioning (for environments where transforms cause issues)
* <GridLayout positionStrategy={absoluteStrategy} />
*
* // Use scaled transforms (for scaled containers)
* <GridLayout positionStrategy={createScaledStrategy(0.5)} />
* ```
*/
interface PositionStrategy {
/** Strategy type identifier */
readonly type: "transform" | "absolute";
/** Scale factor for drag/resize calculations */
readonly scale: number;
/**
* Convert pixel position to CSS style object.
*
* @param pos - Position in pixels
* @returns CSS properties for positioning the element
*/
calcStyle(pos: Position): React.CSSProperties;
/**
* Calculate position during drag operations, accounting for transforms and scale.
*
* @param clientX - Mouse client X position
* @param clientY - Mouse client Y position
* @param offsetX - Offset from element origin X
* @param offsetY - Offset from element origin Y
* @returns Adjusted left/top position
*/
calcDragPosition(clientX: number, clientY: number, offsetX: number, offsetY: number): PartialPosition;
}
/**
* Grid measurement configuration.
* Groups all grid metrics (columns, row height, margins).
*/
interface GridConfig {
/** Number of columns in the grid (default: 12) */
cols: number;
/** Height of a single row in pixels (default: 150) */
rowHeight: number;
/** [horizontal, vertical] margin between items in pixels (default: [10, 10]) */
margin: readonly [number, number];
/** [horizontal, vertical] padding inside the container (default: null, uses margin) */
containerPadding: readonly [number, number] | null;
/** Maximum number of rows (default: Infinity) */
maxRows: number;
}
/** Default grid configuration */
declare const defaultGridConfig: GridConfig;
/**
* Drag behavior configuration.
* Groups all drag-related settings.
*/
interface DragConfig {
/** Whether items can be dragged (default: true) */
enabled: boolean;
/** Whether items are bounded to the container (default: false) */
bounded: boolean;
/** CSS selector for drag handle (e.g., '.drag-handle') */
handle?: string;
/** CSS selector for elements that should not trigger drag */
cancel?: string;
/**
* Minimum pixels to move before drag starts.
* Helps distinguish click from drag (fixes #1341, #1401).
* @default 3
*/
threshold: number;
}
/** Default drag configuration */
declare const defaultDragConfig: DragConfig;
/**
* Resize behavior configuration.
* Groups all resize-related settings.
*/
interface ResizeConfig {
/** Whether items can be resized (default: true) */
enabled: boolean;
/** Which resize handles to show (default: ['se']) */
handles: readonly ResizeHandleAxis[];
/**
* Custom resize handle component.
* Can be a React node or a function that receives the axis.
*/
handleComponent?: React.ReactNode | ((axis: ResizeHandleAxis, ref: React.Ref<HTMLElement>) => React.ReactNode);
}
/** Default resize configuration */
declare const defaultResizeConfig: ResizeConfig;
/**
* Drop configuration (for dropping external elements).
* Groups all drop-related settings.
*/
interface DropConfig {
/** Whether external elements can be dropped on the grid (default: false) */
enabled: boolean;
/** Default size for dropped items (default: { w: 1, h: 1 }) */
defaultItem: {
w: number;
h: number;
};
/**
* Called when dragging over the grid.
* Return dimensions to override defaultItem, or false to reject the drop.
*/
onDragOver?: (e: DragEvent) => {
w?: number;
h?: number;
} | false | void;
}
/** Default drop configuration */
declare const defaultDropConfig: DropConfig;
/**
* Breakpoint name (e.g., 'lg', 'md', 'sm', 'xs', 'xxs').
*/
type Breakpoint = string;
/**
* Map of breakpoint name to pixel width.
* Generic type B allows custom breakpoint strings.
*/
type Breakpoints<B extends Breakpoint = Breakpoint> = Record<B, number>;
/**
* Map of breakpoint name to number of columns.
* Generic type B allows custom breakpoint strings.
*/
type BreakpointCols<B extends Breakpoint = Breakpoint> = Record<B, number>;
/**
* Map of breakpoint name to layout.
* Generic type B allows custom breakpoint strings.
*/
type ResponsiveLayouts<B extends Breakpoint = Breakpoint> = Partial<Record<B, Layout>>;
/**
* Callback when breakpoint changes.
*/
type OnBreakpointChangeCallback<B extends Breakpoint = Breakpoint> = (newBreakpoint: B, cols: number) => void;
/**
* Makes all properties in T mutable (removes readonly).
*/
type Mutable<T> = {
-readonly [P in keyof T]: T[P];
};
/**
* Deep partial - all properties and nested properties are optional.
*/
type DeepPartial<T> = {
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};
/**
* Extract the element type from an array type.
*/
type ArrayElement<T> = T extends readonly (infer U)[] ? U : never;
export { type ArrayElement as A, type Breakpoint as B, type CompactType as C, type DroppingPosition as D, type EventCallback as E, type GridDragEvent as G, type Layout as L, type Mutable as M, type OnLayoutChangeCallback as O, type Position as P, type ResponsiveLayouts as R, type Size as S, type LayoutItem as a, type Breakpoints as b, type Compactor as c, type ResizeHandleAxis as d, type GridResizeEvent as e, type PartialPosition as f, type ReactDraggableCallbackData as g, type DragOverEvent as h, type PositionStrategy as i, type GridConfig as j, type DragConfig as k, type ResizeConfig as l, type DropConfig as m, type BreakpointCols as n, type OnBreakpointChangeCallback as o, type DeepPartial as p, defaultGridConfig as q, defaultDragConfig as r, defaultResizeConfig as s, defaultDropConfig as t };