react-grid-layout - npm Package Compare versions

+709

dist/chunk-FLITZMQC.mjs

		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 (!allowOverlap) {
		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 && !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);
		}
		};
		var noOverlapCompactor = {
		...noCompactor,
		allowOverlap: true
		};
		function getCompactor(compactType, allowOverlap = false, preventCollision = false) {
		let baseCompactor;
		if (allowOverlap) {
		if (compactType === "vertical") baseCompactor = verticalOverlapCompactor;
		else if (compactType === "horizontal")
		baseCompactor = horizontalOverlapCompactor;
		else baseCompactor = noOverlapCompactor;
		} 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, noOverlapCompactor, perc, resizeItemInDirection, resolveCompactionCollision2 as resolveCompactionCollision, setTopLeft, setTransform, snapToGrid, sortBreakpoints, transformStrategy, verticalCompactor, verticalOverlapCompactor };
		//# sourceMappingURL=chunk-FLITZMQC.mjs.map
		//# sourceMappingURL=chunk-FLITZMQC.mjs.map

dist/chunk-FLITZMQC.mjs.map

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

+430

dist/chunk-LIKX67MZ.mjs

		import { getCompactor, compact, sortBreakpoints, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout } from './chunk-FLITZMQC.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 prevPropsLayoutsRef = useRef(propsLayouts);
		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, prevPropsLayoutsRef.current)) {
		setLayouts(propsLayouts);
		prevPropsLayoutsRef.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-LIKX67MZ.mjs.map
		//# sourceMappingURL=chunk-LIKX67MZ.mjs.map

+1

dist/chunk-LIKX67MZ.mjs.map

+1418

dist/chunk-PLWMASMX.mjs

		import { defaultConstraints, setTransform, setTopLeft, perc, applyPositionConstraints, resizeItemInDirection, applySizeConstraints, defaultPositionStrategy, defaultGridConfig, defaultDragConfig, defaultResizeConfig, defaultDropConfig, getCompactor, compact, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout, getIndentationValue } from './chunk-FLITZMQC.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);
		const layoutRef = useRef(layout);
		layoutRef.current = layout;
		useEffect(() => {
		setMounted(true);
		if (!deepEqual(layout, propsLayout)) {
		onLayoutChange(layout);
		}
		}, []);
		useEffect(() => {
		if (activeDrag) return;
		if (droppingDOMNode) 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,
		droppingDOMNode,
		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 currentLayout = layoutRef.current;
		const l = getLayoutItem(currentLayout, 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 = currentLayout;
		setActiveDrag(placeholder);
		onDragStartProp(currentLayout, l, l, null, data.e, data.node);
		},
		[onDragStartProp]
		);
		const onDrag = useCallback(
		(i, x, y, data) => {
		const currentLayout = layoutRef.current;
		const oldDragItem = oldDragItemRef.current;
		const l = getLayoutItem(currentLayout, i);
		if (!l) return;
		const placeholder = {
		w: l.w,
		h: l.h,
		x: l.x,
		y: l.y,
		i
		};
		const newLayout = moveElement(
		currentLayout,
		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);
		},
		[preventCollision, compactType, cols, allowOverlap, onDragProp]
		);
		const onDragStop = useCallback(
		(i, x, y, data) => {
		if (!activeDrag) return;
		const currentLayout = layoutRef.current;
		const oldDragItem = oldDragItemRef.current;
		const l = getLayoutItem(currentLayout, i);
		if (!l) return;
		const newLayout = moveElement(
		currentLayout,
		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,
		preventCollision,
		compactType,
		cols,
		allowOverlap,
		onDragStopProp,
		onLayoutChange
		]
		);
		const onResizeStart = useCallback(
		(i, _w, _h, data) => {
		const currentLayout = layoutRef.current;
		const l = getLayoutItem(currentLayout, i);
		if (!l) return;
		oldResizeItemRef.current = cloneLayoutItem(l);
		oldLayoutRef.current = currentLayout;
		setResizing(true);
		onResizeStartProp(currentLayout, l, l, null, data.e, data.node);
		},
		[onResizeStartProp]
		);
		const onResize = useCallback(
		(i, w, h, data) => {
		const currentLayout = layoutRef.current;
		const oldResizeItem = oldResizeItemRef.current;
		const { handle } = data;
		let shouldMoveItem = false;
		let newX;
		let newY;
		const [newLayout, l] = withLayoutItem(currentLayout, 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(currentLayout, {
		...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);
		},
		[preventCollision, allowOverlap, compactType, cols, onResizeProp]
		);
		const onResizeStop = useCallback(
		(i, _w, _h, data) => {
		const currentLayout = layoutRef.current;
		const oldResizeItem = oldResizeItemRef.current;
		const l = getLayoutItem(currentLayout, i);
		const finalLayout = allowOverlap ? currentLayout : compact(currentLayout, 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);
		}
		},
		[allowOverlap, compactType, cols, onResizeStopProp, onLayoutChange]
		);
		const removeDroppingPlaceholder = useCallback(() => {
		const currentLayout = layoutRef.current;
		const newLayout = compact(
		currentLayout.filter((l) => l.i !== droppingItem.i),
		compactType,
		cols,
		allowOverlap
		);
		setLayout(newLayout);
		setDroppingDOMNode(null);
		setActiveDrag(null);
		setDroppingPosition(void 0);
		}, [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([
		...layoutRef.current,
		{
		...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
		]
		);
		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 currentLayout = layoutRef.current;
		const item = currentLayout.find((l) => l.i === droppingItem.i);
		dragEnterCounterRef.current = 0;
		removeDroppingPlaceholder();
		onDropProp(currentLayout, item, e.nativeEvent);
		},
		[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-PLWMASMX.mjs.map
		//# sourceMappingURL=chunk-PLWMASMX.mjs.map

dist/chunk-PLWMASMX.mjs.map

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

+1427

dist/chunk-RB2IKK5B.js

		'use strict';

		var chunkWWS3M5Y3_js = require('./chunk-WWS3M5Y3.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 = chunkWWS3M5Y3_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 chunkWWS3M5Y3_js.setTransform(pos2);
		}
		const styleObj = chunkWWS3M5Y3_js.setTopLeft(pos2);
		if (usePercentages) {
		return {
		...styleObj,
		left: chunkWWS3M5Y3_js.perc(pos2.left / containerWidth),
		width: chunkWWS3M5Y3_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 } = chunkWWS3M5Y3_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 } = chunkWWS3M5Y3_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 } = chunkWWS3M5Y3_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 = chunkWWS3M5Y3_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 } = chunkWWS3M5Y3_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 chunkWWS3M5Y3_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 = chunkWWS3M5Y3_js.defaultPositionStrategy,
		compactor: compactorProp,
		constraints = chunkWWS3M5Y3_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(
		() => ({ ...chunkWWS3M5Y3_js.defaultGridConfig, ...gridConfigProp }),
		[gridConfigProp]
		);
		const dragConfig = React2.useMemo(
		() => ({ ...chunkWWS3M5Y3_js.defaultDragConfig, ...dragConfigProp }),
		[dragConfigProp]
		);
		const resizeConfig = React2.useMemo(
		() => ({ ...chunkWWS3M5Y3_js.defaultResizeConfig, ...resizeConfigProp }),
		[resizeConfigProp]
		);
		const dropConfig = React2.useMemo(
		() => ({ ...chunkWWS3M5Y3_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 ?? chunkWWS3M5Y3_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);
		const layoutRef = React2.useRef(layout);
		layoutRef.current = layout;
		React2.useEffect(() => {
		setMounted(true);
		if (!fastEquals.deepEqual(layout, propsLayout)) {
		onLayoutChange(layout);
		}
		}, []);
		React2.useEffect(() => {
		if (activeDrag) return;
		if (droppingDOMNode) 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,
		droppingDOMNode,
		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 currentLayout = layoutRef.current;
		const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, 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 = currentLayout;
		setActiveDrag(placeholder);
		onDragStartProp(currentLayout, l, l, null, data.e, data.node);
		},
		[onDragStartProp]
		);
		const onDrag = React2.useCallback(
		(i, x, y, data) => {
		const currentLayout = layoutRef.current;
		const oldDragItem = oldDragItemRef.current;
		const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
		if (!l) return;
		const placeholder = {
		w: l.w,
		h: l.h,
		x: l.x,
		y: l.y,
		i
		};
		const newLayout = chunkBJFPTW5Q_js.moveElement(
		currentLayout,
		l,
		x,
		y,
		true,
		preventCollision,
		compactType,
		cols,
		allowOverlap
		);
		onDragProp(newLayout, oldDragItem, l, placeholder, data.e, data.node);
		setLayout(
		allowOverlap ? newLayout : chunkWWS3M5Y3_js.compact(newLayout, compactType, cols)
		);
		setActiveDrag(placeholder);
		},
		[preventCollision, compactType, cols, allowOverlap, onDragProp]
		);
		const onDragStop = React2.useCallback(
		(i, x, y, data) => {
		if (!activeDrag) return;
		const currentLayout = layoutRef.current;
		const oldDragItem = oldDragItemRef.current;
		const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
		if (!l) return;
		const newLayout = chunkBJFPTW5Q_js.moveElement(
		currentLayout,
		l,
		x,
		y,
		true,
		preventCollision,
		compactType,
		cols,
		allowOverlap
		);
		const finalLayout = allowOverlap ? newLayout : chunkWWS3M5Y3_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,
		preventCollision,
		compactType,
		cols,
		allowOverlap,
		onDragStopProp,
		onLayoutChange
		]
		);
		const onResizeStart = React2.useCallback(
		(i, _w, _h, data) => {
		const currentLayout = layoutRef.current;
		const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
		if (!l) return;
		oldResizeItemRef.current = chunkBJFPTW5Q_js.cloneLayoutItem(l);
		oldLayoutRef.current = currentLayout;
		setResizing(true);
		onResizeStartProp(currentLayout, l, l, null, data.e, data.node);
		},
		[onResizeStartProp]
		);
		const onResize = React2.useCallback(
		(i, w, h, data) => {
		const currentLayout = layoutRef.current;
		const oldResizeItem = oldResizeItemRef.current;
		const { handle } = data;
		let shouldMoveItem = false;
		let newX;
		let newY;
		const [newLayout, l] = chunkBJFPTW5Q_js.withLayoutItem(currentLayout, 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(currentLayout, {
		...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 : chunkWWS3M5Y3_js.compact(finalLayout, compactType, cols)
		);
		setActiveDrag(placeholder);
		},
		[preventCollision, allowOverlap, compactType, cols, onResizeProp]
		);
		const onResizeStop = React2.useCallback(
		(i, _w, _h, data) => {
		const currentLayout = layoutRef.current;
		const oldResizeItem = oldResizeItemRef.current;
		const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
		const finalLayout = allowOverlap ? currentLayout : chunkWWS3M5Y3_js.compact(currentLayout, 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);
		}
		},
		[allowOverlap, compactType, cols, onResizeStopProp, onLayoutChange]
		);
		const removeDroppingPlaceholder = React2.useCallback(() => {
		const currentLayout = layoutRef.current;
		const newLayout = chunkWWS3M5Y3_js.compact(
		currentLayout.filter((l) => l.i !== droppingItem.i),
		compactType,
		cols,
		allowOverlap
		);
		setLayout(newLayout);
		setDroppingDOMNode(null);
		setActiveDrag(null);
		setDroppingPosition(void 0);
		}, [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([
		...layoutRef.current,
		{
		...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
		]
		);
		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 currentLayout = layoutRef.current;
		const item = currentLayout.find((l) => l.i === droppingItem.i);
		dragEnterCounterRef.current = 0;
		removeDroppingPlaceholder();
		onDropProp(currentLayout, item, e.nativeEvent);
		},
		[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 chunkWWS3M5Y3_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 ?? chunkWWS3M5Y3_js.getCompactor("vertical");
		const compactType = compactor.type;
		const allowOverlap = compactor.allowOverlap;
		const initialBreakpoint = React2.useMemo(() => {
		return propBreakpoint ?? chunkWWS3M5Y3_js.getBreakpointFromWidth(breakpoints, width);
		}, []);
		const initialCols = React2.useMemo(() => {
		return chunkWWS3M5Y3_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
		}, [initialBreakpoint, colsConfig]);
		const initialLayout = React2.useMemo(() => {
		return chunkWWS3M5Y3_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 chunkWWS3M5Y3_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 = chunkWWS3M5Y3_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 ?? chunkWWS3M5Y3_js.getBreakpointFromWidth(breakpoints, width);
		const newCols = chunkWWS3M5Y3_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 = chunkWWS3M5Y3_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 = chunkWWS3M5Y3_js.getIndentationValue(
		propMargin,
		newBreakpoint
		);
		const currentPadding = propContainerPadding ? chunkWWS3M5Y3_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 chunkWWS3M5Y3_js.getIndentationValue(
		propMargin,
		breakpoint
		);
		}, [propMargin, breakpoint]);
		const currentContainerPadding = React2.useMemo(() => {
		if (propContainerPadding === null) return null;
		return chunkWWS3M5Y3_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-RB2IKK5B.js.map
		//# sourceMappingURL=chunk-RB2IKK5B.js.map

dist/chunk-RB2IKK5B.js.map

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

+751

dist/chunk-WWS3M5Y3.js

		'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 (!allowOverlap) {
		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 && !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);
		}
		};
		var noOverlapCompactor = {
		...noCompactor,
		allowOverlap: true
		};
		function getCompactor(compactType, allowOverlap = false, preventCollision = false) {
		let baseCompactor;
		if (allowOverlap) {
		if (compactType === "vertical") baseCompactor = verticalOverlapCompactor;
		else if (compactType === "horizontal")
		baseCompactor = horizontalOverlapCompactor;
		else baseCompactor = noOverlapCompactor;
		} 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.noOverlapCompactor = noOverlapCompactor;
		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-WWS3M5Y3.js.map
		//# sourceMappingURL=chunk-WWS3M5Y3.js.map

dist/chunk-WWS3M5Y3.js.map

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

+436

dist/chunk-YQQYHEEG.js

		'use strict';

		var chunkWWS3M5Y3_js = require('./chunk-WWS3M5Y3.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(
		() => chunkWWS3M5Y3_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 chunkWWS3M5Y3_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 = chunkWWS3M5Y3_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 : chunkWWS3M5Y3_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 = chunkWWS3M5Y3_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 = chunkWWS3M5Y3_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 = chunkWWS3M5Y3_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 = chunkWWS3M5Y3_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(
		() => chunkWWS3M5Y3_js.sortBreakpoints(breakpoints),
		[breakpoints]
		);
		const initialBreakpoint = react.useMemo(
		() => chunkWWS3M5Y3_js.getBreakpointFromWidth(breakpoints, width),
		// Only calculate on mount, not on width changes
		// eslint-disable-next-line react-hooks/exhaustive-deps
		[]
		);
		const initialCols = react.useMemo(
		() => chunkWWS3M5Y3_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 prevPropsLayoutsRef = react.useRef(propsLayouts);
		const prevLayoutsRef = react.useRef(layouts);
		const layout = react.useMemo(() => {
		return chunkWWS3M5Y3_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 = chunkWWS3M5Y3_js.getBreakpointFromWidth(breakpoints, width);
		const newCols = chunkWWS3M5Y3_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
		onWidthChange?.(width, [10, 10], newCols, null);
		if (newBreakpoint !== breakpoint) {
		const newLayout = chunkWWS3M5Y3_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, prevPropsLayoutsRef.current)) {
		setLayouts(propsLayouts);
		prevPropsLayoutsRef.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-YQQYHEEG.js.map
		//# sourceMappingURL=chunk-YQQYHEEG.js.map

+1

dist/chunk-YQQYHEEG.js.map

+330

dist/position-CXNzFxI0.d.mts

		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;
		/**
		* No compaction, with overlapping allowed.
		*
		* Items stay where placed and can overlap each other.
		*/
		declare const noOverlapCompactor: 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 { absoluteStrategy as A, createScaledStrategy as B, defaultPositionStrategy as C, 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, noOverlapCompactor as q, resolveCompactionCollision as r, setTransform as s, compactItemVertical as t, compactItemHorizontal as u, validateLayout as v, withLayoutItem as w, perc as x, resizeItemInDirection as y, transformStrategy as z };

+330

dist/position-Dk0FRWA9.d.ts

		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;
		/**
		* No compaction, with overlapping allowed.
		*
		* Items stay where placed and can overlap each other.
		*/
		declare const noOverlapCompactor: 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 { absoluteStrategy as A, createScaledStrategy as B, defaultPositionStrategy as C, 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, noOverlapCompactor as q, resolveCompactionCollision as r, setTransform as s, compactItemVertical as t, compactItemHorizontal as u, validateLayout as v, withLayoutItem as w, perc as x, resizeItemInDirection as y, transformStrategy as z };

+1

-1

dist/core.d.mts

		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 { A as absoluteStrategy, b as bottom, c as cloneLayout, a as cloneLayoutItem, u as compactItemHorizontal, t as compactItemVertical, k as correctBounds, B as createScaledStrategy, C 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, q as noOverlapCompactor, x as perc, y as resizeItemInDirection, r as resolveCompactionCollision, f as setTopLeft, s as setTransform, z as transformStrategy, v as validateLayout, e as verticalCompactor, o as verticalOverlapCompactor, w as withLayoutItem } from './position-CXNzFxI0.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';
		@@ -6,0 +6,0 @@

+1

-1

dist/core.d.ts

		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 { A as absoluteStrategy, b as bottom, c as cloneLayout, a as cloneLayoutItem, u as compactItemHorizontal, t as compactItemVertical, k as correctBounds, B as createScaledStrategy, C 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, q as noOverlapCompactor, x as perc, y as resizeItemInDirection, r as resolveCompactionCollision, f as setTopLeft, s as setTransform, z as transformStrategy, v as validateLayout, e as verticalCompactor, o as verticalOverlapCompactor, w as withLayoutItem } from './position-Dk0FRWA9.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';
		@@ -6,0 +6,0 @@

+45

-41

dist/core.js

		'use strict';

		require('./chunk-7ELO5FRW.js');
		var chunkFN6MIZ24_js = require('./chunk-FN6MIZ24.js');
		var chunkWWS3M5Y3_js = require('./chunk-WWS3M5Y3.js');
		var chunkBJFPTW5Q_js = require('./chunk-BJFPTW5Q.js');
		@@ -11,159 +11,163 @@
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.absoluteStrategy; }
		get: function () { return chunkWWS3M5Y3_js.absoluteStrategy; }
		});
		Object.defineProperty(exports, "applyPositionConstraints", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.applyPositionConstraints; }
		get: function () { return chunkWWS3M5Y3_js.applyPositionConstraints; }
		});
		Object.defineProperty(exports, "applySizeConstraints", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.applySizeConstraints; }
		get: function () { return chunkWWS3M5Y3_js.applySizeConstraints; }
		});
		Object.defineProperty(exports, "aspectRatio", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.aspectRatio; }
		get: function () { return chunkWWS3M5Y3_js.aspectRatio; }
		});
		Object.defineProperty(exports, "boundedX", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.boundedX; }
		get: function () { return chunkWWS3M5Y3_js.boundedX; }
		});
		Object.defineProperty(exports, "boundedY", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.boundedY; }
		get: function () { return chunkWWS3M5Y3_js.boundedY; }
		});
		Object.defineProperty(exports, "compact", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.compact; }
		get: function () { return chunkWWS3M5Y3_js.compact; }
		});
		Object.defineProperty(exports, "compactItem", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.compactItem; }
		get: function () { return chunkWWS3M5Y3_js.compactItem; }
		});
		Object.defineProperty(exports, "compactItemHorizontal", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.compactItemHorizontal; }
		get: function () { return chunkWWS3M5Y3_js.compactItemHorizontal; }
		});
		Object.defineProperty(exports, "compactItemVertical", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.compactItemVertical; }
		get: function () { return chunkWWS3M5Y3_js.compactItemVertical; }
		});
		Object.defineProperty(exports, "containerBounds", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.containerBounds; }
		get: function () { return chunkWWS3M5Y3_js.containerBounds; }
		});
		Object.defineProperty(exports, "createScaledStrategy", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.createScaledStrategy; }
		get: function () { return chunkWWS3M5Y3_js.createScaledStrategy; }
		});
		Object.defineProperty(exports, "defaultConstraints", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.defaultConstraints; }
		get: function () { return chunkWWS3M5Y3_js.defaultConstraints; }
		});
		Object.defineProperty(exports, "defaultDragConfig", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.defaultDragConfig; }
		get: function () { return chunkWWS3M5Y3_js.defaultDragConfig; }
		});
		Object.defineProperty(exports, "defaultDropConfig", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.defaultDropConfig; }
		get: function () { return chunkWWS3M5Y3_js.defaultDropConfig; }
		});
		Object.defineProperty(exports, "defaultGridConfig", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.defaultGridConfig; }
		get: function () { return chunkWWS3M5Y3_js.defaultGridConfig; }
		});
		Object.defineProperty(exports, "defaultPositionStrategy", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.defaultPositionStrategy; }
		get: function () { return chunkWWS3M5Y3_js.defaultPositionStrategy; }
		});
		Object.defineProperty(exports, "defaultResizeConfig", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.defaultResizeConfig; }
		get: function () { return chunkWWS3M5Y3_js.defaultResizeConfig; }
		});
		Object.defineProperty(exports, "findOrGenerateResponsiveLayout", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.findOrGenerateResponsiveLayout; }
		get: function () { return chunkWWS3M5Y3_js.findOrGenerateResponsiveLayout; }
		});
		Object.defineProperty(exports, "getBreakpointFromWidth", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.getBreakpointFromWidth; }
		get: function () { return chunkWWS3M5Y3_js.getBreakpointFromWidth; }
		});
		Object.defineProperty(exports, "getColsFromBreakpoint", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.getColsFromBreakpoint; }
		get: function () { return chunkWWS3M5Y3_js.getColsFromBreakpoint; }
		});
		Object.defineProperty(exports, "getCompactor", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.getCompactor; }
		get: function () { return chunkWWS3M5Y3_js.getCompactor; }
		});
		Object.defineProperty(exports, "getIndentationValue", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.getIndentationValue; }
		get: function () { return chunkWWS3M5Y3_js.getIndentationValue; }
		});
		Object.defineProperty(exports, "gridBounds", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.gridBounds; }
		get: function () { return chunkWWS3M5Y3_js.gridBounds; }
		});
		Object.defineProperty(exports, "horizontalCompactor", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.horizontalCompactor; }
		get: function () { return chunkWWS3M5Y3_js.horizontalCompactor; }
		});
		Object.defineProperty(exports, "horizontalOverlapCompactor", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.horizontalOverlapCompactor; }
		get: function () { return chunkWWS3M5Y3_js.horizontalOverlapCompactor; }
		});
		Object.defineProperty(exports, "maxSize", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.maxSize; }
		get: function () { return chunkWWS3M5Y3_js.maxSize; }
		});
		Object.defineProperty(exports, "minMaxSize", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.minMaxSize; }
		get: function () { return chunkWWS3M5Y3_js.minMaxSize; }
		});
		Object.defineProperty(exports, "minSize", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.minSize; }
		get: function () { return chunkWWS3M5Y3_js.minSize; }
		});
		Object.defineProperty(exports, "noCompactor", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.noCompactor; }
		get: function () { return chunkWWS3M5Y3_js.noCompactor; }
		});
		Object.defineProperty(exports, "noOverlapCompactor", {
		enumerable: true,
		get: function () { return chunkWWS3M5Y3_js.noOverlapCompactor; }
		});
		Object.defineProperty(exports, "perc", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.perc; }
		get: function () { return chunkWWS3M5Y3_js.perc; }
		});
		Object.defineProperty(exports, "resizeItemInDirection", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.resizeItemInDirection; }
		get: function () { return chunkWWS3M5Y3_js.resizeItemInDirection; }
		});
		Object.defineProperty(exports, "resolveCompactionCollision", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.resolveCompactionCollision; }
		get: function () { return chunkWWS3M5Y3_js.resolveCompactionCollision; }
		});
		Object.defineProperty(exports, "setTopLeft", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.setTopLeft; }
		get: function () { return chunkWWS3M5Y3_js.setTopLeft; }
		});
		Object.defineProperty(exports, "setTransform", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.setTransform; }
		get: function () { return chunkWWS3M5Y3_js.setTransform; }
		});
		Object.defineProperty(exports, "snapToGrid", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.snapToGrid; }
		get: function () { return chunkWWS3M5Y3_js.snapToGrid; }
		});
		Object.defineProperty(exports, "sortBreakpoints", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.sortBreakpoints; }
		get: function () { return chunkWWS3M5Y3_js.sortBreakpoints; }
		});
		Object.defineProperty(exports, "transformStrategy", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.transformStrategy; }
		get: function () { return chunkWWS3M5Y3_js.transformStrategy; }
		});
		Object.defineProperty(exports, "verticalCompactor", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.verticalCompactor; }
		get: function () { return chunkWWS3M5Y3_js.verticalCompactor; }
		});
		Object.defineProperty(exports, "verticalOverlapCompactor", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.verticalOverlapCompactor; }
		get: function () { return chunkWWS3M5Y3_js.verticalOverlapCompactor; }
		});
		@@ -170,0 +174,0 @@ Object.defineProperty(exports, "bottom", {

+1

-1

dist/core.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 { 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, noOverlapCompactor, perc, resizeItemInDirection, resolveCompactionCollision, setTopLeft, setTransform, snapToGrid, sortBreakpoints, transformStrategy, verticalCompactor, verticalOverlapCompactor } from './chunk-FLITZMQC.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

+1

-1

dist/index.d.mts

		@@ -5,4 +5,4 @@ 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 { 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 { 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-CXNzFxI0.mjs';
		export { c as calcGridItemPosition, b as calcWH, a as calcXY } from './calculate-DwbL1D06.mjs';
		import 'react';

+1

-1

dist/index.d.ts

		@@ -5,4 +5,4 @@ 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 { 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 { 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-Dk0FRWA9.js';
		export { c as calcGridItemPosition, b as calcWH, a as calcXY } from './calculate-DsVTldEE.js';
		import 'react';

+23

-23

dist/index.js

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

		var chunkGPZBANOK_js = require('./chunk-GPZBANOK.js');
		var chunkYQQYHEEG_js = require('./chunk-YQQYHEEG.js');
		require('./chunk-7ELO5FRW.js');
		var chunkQRW3ND4U_js = require('./chunk-QRW3ND4U.js');
		var chunkFN6MIZ24_js = require('./chunk-FN6MIZ24.js');
		var chunkRB2IKK5B_js = require('./chunk-RB2IKK5B.js');
		var chunkWWS3M5Y3_js = require('./chunk-WWS3M5Y3.js');
		var chunkBJFPTW5Q_js = require('./chunk-BJFPTW5Q.js');
		@@ -16,79 +16,79 @@
		enumerable: true,
		get: function () { return chunkGPZBANOK_js.DEFAULT_BREAKPOINTS; }
		get: function () { return chunkYQQYHEEG_js.DEFAULT_BREAKPOINTS; }
		});
		Object.defineProperty(exports, "DEFAULT_COLS", {
		enumerable: true,
		get: function () { return chunkGPZBANOK_js.DEFAULT_COLS; }
		get: function () { return chunkYQQYHEEG_js.DEFAULT_COLS; }
		});
		Object.defineProperty(exports, "useContainerWidth", {
		enumerable: true,
		get: function () { return chunkGPZBANOK_js.useContainerWidth; }
		get: function () { return chunkYQQYHEEG_js.useContainerWidth; }
		});
		Object.defineProperty(exports, "useGridLayout", {
		enumerable: true,
		get: function () { return chunkGPZBANOK_js.useGridLayout; }
		get: function () { return chunkYQQYHEEG_js.useGridLayout; }
		});
		Object.defineProperty(exports, "useResponsiveLayout", {
		enumerable: true,
		get: function () { return chunkGPZBANOK_js.useResponsiveLayout; }
		get: function () { return chunkYQQYHEEG_js.useResponsiveLayout; }
		});
		Object.defineProperty(exports, "GridItem", {
		enumerable: true,
		get: function () { return chunkQRW3ND4U_js.GridItem; }
		get: function () { return chunkRB2IKK5B_js.GridItem; }
		});
		Object.defineProperty(exports, "GridLayout", {
		enumerable: true,
		get: function () { return chunkQRW3ND4U_js.GridLayout; }
		get: function () { return chunkRB2IKK5B_js.GridLayout; }
		});
		Object.defineProperty(exports, "ReactGridLayout", {
		enumerable: true,
		get: function () { return chunkQRW3ND4U_js.GridLayout; }
		get: function () { return chunkRB2IKK5B_js.GridLayout; }
		});
		Object.defineProperty(exports, "Responsive", {
		enumerable: true,
		get: function () { return chunkQRW3ND4U_js.ResponsiveGridLayout; }
		get: function () { return chunkRB2IKK5B_js.ResponsiveGridLayout; }
		});
		Object.defineProperty(exports, "ResponsiveGridLayout", {
		enumerable: true,
		get: function () { return chunkQRW3ND4U_js.ResponsiveGridLayout; }
		get: function () { return chunkRB2IKK5B_js.ResponsiveGridLayout; }
		});
		Object.defineProperty(exports, "default", {
		enumerable: true,
		get: function () { return chunkQRW3ND4U_js.GridLayout; }
		get: function () { return chunkRB2IKK5B_js.GridLayout; }
		});
		Object.defineProperty(exports, "findOrGenerateResponsiveLayout", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.findOrGenerateResponsiveLayout; }
		get: function () { return chunkWWS3M5Y3_js.findOrGenerateResponsiveLayout; }
		});
		Object.defineProperty(exports, "getBreakpointFromWidth", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.getBreakpointFromWidth; }
		get: function () { return chunkWWS3M5Y3_js.getBreakpointFromWidth; }
		});
		Object.defineProperty(exports, "getColsFromBreakpoint", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.getColsFromBreakpoint; }
		get: function () { return chunkWWS3M5Y3_js.getColsFromBreakpoint; }
		});
		Object.defineProperty(exports, "getCompactor", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.getCompactor; }
		get: function () { return chunkWWS3M5Y3_js.getCompactor; }
		});
		Object.defineProperty(exports, "horizontalCompactor", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.horizontalCompactor; }
		get: function () { return chunkWWS3M5Y3_js.horizontalCompactor; }
		});
		Object.defineProperty(exports, "noCompactor", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.noCompactor; }
		get: function () { return chunkWWS3M5Y3_js.noCompactor; }
		});
		Object.defineProperty(exports, "setTopLeft", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.setTopLeft; }
		get: function () { return chunkWWS3M5Y3_js.setTopLeft; }
		});
		Object.defineProperty(exports, "setTransform", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.setTransform; }
		get: function () { return chunkWWS3M5Y3_js.setTransform; }
		});
		Object.defineProperty(exports, "verticalCompactor", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.verticalCompactor; }
		get: function () { return chunkWWS3M5Y3_js.verticalCompactor; }
		});
		@@ -95,0 +95,0 @@ Object.defineProperty(exports, "bottom", {

+3

-3

dist/index.mjs

		@@ -1,7 +0,7 @@
		export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, useContainerWidth, useGridLayout, useResponsiveLayout } from './chunk-LWF5EYMO.mjs';
		export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, useContainerWidth, useGridLayout, useResponsiveLayout } from './chunk-LIKX67MZ.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 { GridItem, GridLayout, GridLayout as ReactGridLayout, ResponsiveGridLayout as Responsive, ResponsiveGridLayout, GridLayout as default } from './chunk-PLWMASMX.mjs';
		export { findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, getCompactor, horizontalCompactor, noCompactor, setTopLeft, setTransform, verticalCompactor } from './chunk-FLITZMQC.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

+13

-13

dist/legacy.js

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

		var chunkQRW3ND4U_js = require('./chunk-QRW3ND4U.js');
		var chunkFN6MIZ24_js = require('./chunk-FN6MIZ24.js');
		var chunkRB2IKK5B_js = require('./chunk-RB2IKK5B.js');
		var chunkWWS3M5Y3_js = require('./chunk-WWS3M5Y3.js');
		require('./chunk-BJFPTW5Q.js');
		@@ -98,12 +98,12 @@ var react = require('react');
		if (!useCSSTransforms) {
		positionStrategy = chunkFN6MIZ24_js.absoluteStrategy;
		positionStrategy = chunkWWS3M5Y3_js.absoluteStrategy;
		} else if (transformScale !== 1) {
		positionStrategy = chunkFN6MIZ24_js.createScaledStrategy(transformScale);
		positionStrategy = chunkWWS3M5Y3_js.createScaledStrategy(transformScale);
		} else {
		positionStrategy = chunkFN6MIZ24_js.transformStrategy;
		positionStrategy = chunkWWS3M5Y3_js.transformStrategy;
		}
		const compactor = chunkFN6MIZ24_js.getCompactor(compactType, allowOverlap, preventCollision);
		const constraints = isBounded ? [...chunkFN6MIZ24_js.defaultConstraints, chunkFN6MIZ24_js.containerBounds] : chunkFN6MIZ24_js.defaultConstraints;
		const compactor = chunkWWS3M5Y3_js.getCompactor(compactType, allowOverlap, preventCollision);
		const constraints = isBounded ? [...chunkWWS3M5Y3_js.defaultConstraints, chunkWWS3M5Y3_js.containerBounds] : chunkWWS3M5Y3_js.defaultConstraints;
		return /* @__PURE__ */ jsxRuntime.jsx(
		chunkQRW3ND4U_js.GridLayout,
		chunkRB2IKK5B_js.GridLayout,
		{
		@@ -218,11 +218,11 @@ width,
		if (!useCSSTransforms) {
		positionStrategy = chunkFN6MIZ24_js.absoluteStrategy;
		positionStrategy = chunkWWS3M5Y3_js.absoluteStrategy;
		} else if (transformScale !== 1) {
		positionStrategy = chunkFN6MIZ24_js.createScaledStrategy(transformScale);
		positionStrategy = chunkWWS3M5Y3_js.createScaledStrategy(transformScale);
		} else {
		positionStrategy = chunkFN6MIZ24_js.transformStrategy;
		positionStrategy = chunkWWS3M5Y3_js.transformStrategy;
		}
		const compactor = chunkFN6MIZ24_js.getCompactor(compactType, allowOverlap, preventCollision);
		const compactor = chunkWWS3M5Y3_js.getCompactor(compactType, allowOverlap, preventCollision);
		return /* @__PURE__ */ jsxRuntime.jsx(
		chunkQRW3ND4U_js.ResponsiveGridLayout,
		chunkRB2IKK5B_js.ResponsiveGridLayout,
		{
		@@ -229,0 +229,0 @@ width,

+2

-2

dist/legacy.mjs

		@@ -1,3 +0,3 @@
		import { GridLayout, ResponsiveGridLayout } from './chunk-MXXN7GUE.mjs';
		import { createScaledStrategy, getCompactor, defaultConstraints, containerBounds, absoluteStrategy, transformStrategy } from './chunk-2O3ZME4Q.mjs';
		import { GridLayout, ResponsiveGridLayout } from './chunk-PLWMASMX.mjs';
		import { createScaledStrategy, getCompactor, defaultConstraints, containerBounds, absoluteStrategy, transformStrategy } from './chunk-FLITZMQC.mjs';
		import './chunk-AWM66AWF.mjs';
		@@ -4,0 +4,0 @@ import { useState, useRef, useEffect } from 'react';

+1

-1

dist/react.d.mts

		@@ -5,3 +5,3 @@ import React__default, { ReactElement, CSSProperties, RefObject } from 'react';
		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 { 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-CXNzFxI0.mjs';
		export { c as calcGridItemPosition, b as calcWH, a as calcXY } from './calculate-DwbL1D06.mjs';
		@@ -8,0 +8,0 @@

+1

-1

dist/react.d.ts

		@@ -5,3 +5,3 @@ import React__default, { ReactElement, CSSProperties, RefObject } from 'react';
		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 { 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-Dk0FRWA9.js';
		export { c as calcGridItemPosition, b as calcWH, a as calcXY } from './calculate-DsVTldEE.js';
		@@ -8,0 +8,0 @@

+17

-17

dist/react.js

		'use strict';

		var chunkGPZBANOK_js = require('./chunk-GPZBANOK.js');
		var chunkYQQYHEEG_js = require('./chunk-YQQYHEEG.js');
		require('./chunk-7ELO5FRW.js');
		var chunkQRW3ND4U_js = require('./chunk-QRW3ND4U.js');
		var chunkFN6MIZ24_js = require('./chunk-FN6MIZ24.js');
		var chunkRB2IKK5B_js = require('./chunk-RB2IKK5B.js');
		var chunkWWS3M5Y3_js = require('./chunk-WWS3M5Y3.js');
		var chunkBJFPTW5Q_js = require('./chunk-BJFPTW5Q.js');
		@@ -13,55 +13,55 @@
		enumerable: true,
		get: function () { return chunkGPZBANOK_js.DEFAULT_BREAKPOINTS; }
		get: function () { return chunkYQQYHEEG_js.DEFAULT_BREAKPOINTS; }
		});
		Object.defineProperty(exports, "DEFAULT_COLS", {
		enumerable: true,
		get: function () { return chunkGPZBANOK_js.DEFAULT_COLS; }
		get: function () { return chunkYQQYHEEG_js.DEFAULT_COLS; }
		});
		Object.defineProperty(exports, "useContainerWidth", {
		enumerable: true,
		get: function () { return chunkGPZBANOK_js.useContainerWidth; }
		get: function () { return chunkYQQYHEEG_js.useContainerWidth; }
		});
		Object.defineProperty(exports, "useGridLayout", {
		enumerable: true,
		get: function () { return chunkGPZBANOK_js.useGridLayout; }
		get: function () { return chunkYQQYHEEG_js.useGridLayout; }
		});
		Object.defineProperty(exports, "useResponsiveLayout", {
		enumerable: true,
		get: function () { return chunkGPZBANOK_js.useResponsiveLayout; }
		get: function () { return chunkYQQYHEEG_js.useResponsiveLayout; }
		});
		Object.defineProperty(exports, "GridItem", {
		enumerable: true,
		get: function () { return chunkQRW3ND4U_js.GridItem; }
		get: function () { return chunkRB2IKK5B_js.GridItem; }
		});
		Object.defineProperty(exports, "GridLayout", {
		enumerable: true,
		get: function () { return chunkQRW3ND4U_js.GridLayout; }
		get: function () { return chunkRB2IKK5B_js.GridLayout; }
		});
		Object.defineProperty(exports, "ResponsiveGridLayout", {
		enumerable: true,
		get: function () { return chunkQRW3ND4U_js.ResponsiveGridLayout; }
		get: function () { return chunkRB2IKK5B_js.ResponsiveGridLayout; }
		});
		Object.defineProperty(exports, "getCompactor", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.getCompactor; }
		get: function () { return chunkWWS3M5Y3_js.getCompactor; }
		});
		Object.defineProperty(exports, "horizontalCompactor", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.horizontalCompactor; }
		get: function () { return chunkWWS3M5Y3_js.horizontalCompactor; }
		});
		Object.defineProperty(exports, "noCompactor", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.noCompactor; }
		get: function () { return chunkWWS3M5Y3_js.noCompactor; }
		});
		Object.defineProperty(exports, "setTopLeft", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.setTopLeft; }
		get: function () { return chunkWWS3M5Y3_js.setTopLeft; }
		});
		Object.defineProperty(exports, "setTransform", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.setTransform; }
		get: function () { return chunkWWS3M5Y3_js.setTransform; }
		});
		Object.defineProperty(exports, "verticalCompactor", {
		enumerable: true,
		get: function () { return chunkFN6MIZ24_js.verticalCompactor; }
		get: function () { return chunkWWS3M5Y3_js.verticalCompactor; }
		});
		@@ -68,0 +68,0 @@ Object.defineProperty(exports, "bottom", {

+3

-3

dist/react.mjs

		@@ -1,7 +0,7 @@
		export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, useContainerWidth, useGridLayout, useResponsiveLayout } from './chunk-LWF5EYMO.mjs';
		export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, useContainerWidth, useGridLayout, useResponsiveLayout } from './chunk-LIKX67MZ.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 { GridItem, GridLayout, ResponsiveGridLayout } from './chunk-PLWMASMX.mjs';
		export { getCompactor, horizontalCompactor, noCompactor, setTopLeft, setTransform, verticalCompactor } from './chunk-FLITZMQC.mjs';
		export { bottom, calcGridItemPosition, calcWH, calcXY, cloneLayout, cloneLayoutItem, getLayoutItem } from './chunk-AWM66AWF.mjs';
		//# sourceMappingURL=react.mjs.map
		//# sourceMappingURL=react.mjs.map

+4

-3

package.json

		{
		"name": "react-grid-layout",
		"version": "2.1.0",
		"version": "2.1.1",
		"description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
		@@ -81,2 +81,3 @@ "main": "dist/index.js",
		"dev": "make dev",
		"prepare": "husky",
		"prepublishOnly": "make build",
		@@ -226,4 +227,4 @@ "validate": "npm ls",
		"lint-staged": {
		"*.{js,jsx}": [
		"eslint --ext .js,.jsx --fix"
		"*.{js,jsx,ts,tsx}": [
		"eslint --fix"
		],
		@@ -230,0 +231,0 @@ "*": [

+20

-3

README.md

		@@ -18,3 +18,3 @@ # React-Grid-Layout

		[[Demo](https://react-grid-layout.github.io/react-grid-layout/) \| [Changelog](/CHANGELOG.md) \| [CodeSandbox Editable demo](https://codesandbox.io/s/5wy3rz5z1x?module=%2Fsrc%2FShowcaseLayout.js)]
		[[Demo](https://react-grid-layout.github.io/react-grid-layout/) \| [Changelog](/CHANGELOG.md) \| [CodeSandbox Editable demo](https://codesandbox.io/p/sandbox/5ywf7c)]

		@@ -80,4 +80,21 @@ ## Table of Contents

		This provides 100% API compatibility with v1.
		This provides 100% runtime API compatibility with v1.

		TypeScript users: If you were using `@types/react-grid-layout`, note that v2 includes its own types with some naming changes:

		\| Old (`@types/react-grid-layout`) \| New (v2) \| Notes \|
		\| -------------------------------- \| ------------------- \| ----------------------- \|
		\| `RGL.Layout` \| `LayoutItem` \| Single grid item \|
		\| `RGL.Layout[]` \| `Layout` \| Array of items \|
		\| `RGL.Layouts` \| `ResponsiveLayouts` \| Breakpoint → layout map \|

		```diff
		- import RGL from 'react-grid-layout';
		- const item: RGL.Layout = { i: 'a', x: 0, y: 0, w: 1, h: 1 };
		- const layouts: RGL.Layouts = { lg: [item] };
		+ import { LayoutItem, ResponsiveLayouts } from 'react-grid-layout/legacy';
		+ const item: LayoutItem = { i: 'a', x: 0, y: 0, w: 1, h: 1 };
		+ const layouts: ResponsiveLayouts = { lg: [item] };
		```

		Full migration - adopt the v2 API for new features and better tree-shaking:
		@@ -1338,3 +1355,3 @@

		If you have a bug to report, please reproduce the bug in [CodeSandbox](https://codesandbox.io/s/staging-bush-3lvt7?file=/src/ShowcaseLayout.js) to help
		If you have a bug to report, please reproduce the bug in [CodeSandbox](https://codesandbox.io/p/sandbox/5ywf7c) to help
		us easily isolate it.

-703

dist/chunk-2O3ZME4Q.mjs

		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

dist/chunk-2O3ZME4Q.mjs.map

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

-744

dist/chunk-FN6MIZ24.js

		'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

dist/chunk-FN6MIZ24.js.map

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

-435

dist/chunk-GPZBANOK.js

		'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

-1

dist/chunk-GPZBANOK.js.map

-429

dist/chunk-LWF5EYMO.mjs

		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

-1

dist/chunk-LWF5EYMO.mjs.map

-1408

dist/chunk-MXXN7GUE.mjs

		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

dist/chunk-MXXN7GUE.mjs.map

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

-1417

dist/chunk-QRW3ND4U.js

		'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

dist/chunk-QRW3ND4U.js.map

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

-324

dist/position-C8a5g6bb.d.mts

		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 };

-324

dist/position-H8tBL91b.d.ts

		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 };

react-grid-layout - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics