react-grid-layout
Version:
A draggable and resizable grid layout with responsive breakpoints, for React.
161 lines (157 loc) • 7.54 kB
TypeScript
import { f as LayoutConstraint, d as LayoutItem, g as ConstraintContext, R as ResizeHandleAxis } from './types-jd8MiKM1.js';
export { A as ArrayElement, B as Breakpoint, h as BreakpointCols, a as Breakpoints, C as CompactType, b as Compactor, i as DeepPartial, j as DragConfig, k as DragOverEvent, l as DropConfig, D as DroppingPosition, E as EventCallback, m as GridConfig, G as GridDragEvent, c as GridResizeEvent, L as Layout, M as Mutable, O as OnBreakpointChangeCallback, n as OnLayoutChangeCallback, o as PartialPosition, P as Position, p as PositionStrategy, q as ReactDraggableCallbackData, r as ResizeConfig, e as ResponsiveLayouts, S as Size, s as defaultDragConfig, t as defaultDropConfig, u as defaultGridConfig, v as defaultResizeConfig } from './types-jd8MiKM1.js';
export { c as collides, f as findOrGenerateResponsiveLayout, g as getAllCollisions, a as getBreakpointFromWidth, b as getColsFromBreakpoint, d as getFirstCollision, i as getIndentationValue, j as sortBreakpoints, s as sortLayoutItems, e as sortLayoutItemsByColRow, h as sortLayoutItemsByRowCol } from './responsive-C_YtBQYq.js';
export { i as absoluteStrategy, b as bottom, c as cloneLayout, a as cloneLayoutItem, j as compactItemHorizontal, k as compactItemVertical, l as correctBounds, o as createScaledStrategy, p as defaultPositionStrategy, g as getCompactor, d as getLayoutItem, q as getStatics, h as horizontalCompactor, r as horizontalOverlapCompactor, t as modifyLayout, m as moveElement, u as moveElementAwayFromCollision, n as noCompactor, w as noOverlapCompactor, x as perc, y as resizeItemInDirection, z as resolveCompactionCollision, s as setTopLeft, e as setTransform, A as transformStrategy, v as validateLayout, f as verticalCompactor, B as verticalOverlapCompactor, C as withLayoutItem } from './position-CSgQSjwQ.js';
export { G as GridCellConfig, d as GridCellDimensions, P as PositionParams, e as calcGridCellDimensions, f as calcGridColWidth, c as calcGridItemPosition, g as calcGridItemWHPx, a as calcWH, h as calcWHRaw, b as calcXY, i as calcXYRaw, j as clamp } from './calculate-rP3DHexe.js';
/**
* Pluggable layout constraints for react-grid-layout v2
*
* Constraints control position and size limits during drag/resize operations.
* They are composable, tree-shakeable, and can be applied at grid or item level.
*/
/**
* Grid boundary constraint.
*
* Ensures items stay within the grid bounds (0 to cols-w for x, 0 to maxRows-h for y).
* This is the default position constraint.
*/
declare const gridBounds: LayoutConstraint;
/**
* Min/max size constraint.
*
* Enforces per-item minW/maxW/minH/maxH properties.
* This is applied by default after gridBounds.
*/
declare const minMaxSize: LayoutConstraint;
/**
* Container bounds constraint.
*
* Constrains items to stay within the visible container.
* Use this as a replacement for the legacy `isBounded` prop.
*
* Unlike gridBounds which uses maxRows (which may be Infinity),
* this constraint calculates visible rows from the actual container height.
* Falls back to maxRows if containerHeight is 0 (auto-height grids).
*/
declare const containerBounds: LayoutConstraint;
/**
* Bounded X constraint.
*
* Only constrains horizontal position (x-axis).
* Items can move freely in the vertical direction.
*/
declare const boundedX: LayoutConstraint;
/**
* Bounded Y constraint.
*
* Only constrains vertical position (y-axis).
* Items can move freely in the horizontal direction.
*/
declare const boundedY: LayoutConstraint;
/**
* Create an aspect ratio constraint.
*
* Maintains a fixed width-to-height ratio **in pixels** during resize operations.
* Accounts for the different pixel sizes of grid columns vs rows.
*
* @param ratio - Width-to-height ratio (e.g., 16/9 for widescreen, 1 for square)
* @returns A constraint that enforces the aspect ratio
*
* @example
* ```typescript
* // 16:9 aspect ratio (actual pixel proportions)
* const layout = [
* { i: 'video', x: 0, y: 0, w: 4, h: 2, constraints: [aspectRatio(16/9)] }
* ];
*
* // Square items (in pixels, not grid units)
* <GridLayout constraints={[gridBounds, minMaxSize, aspectRatio(1)]} />
* ```
*/
declare function aspectRatio(ratio: number): LayoutConstraint;
/**
* Create a snap-to-grid constraint.
*
* Snaps positions to multiples of the specified step values.
* Useful for aligning items to a coarser grid.
*
* @param stepX - Horizontal snap step in grid units
* @param stepY - Vertical snap step in grid units (defaults to stepX)
* @returns A constraint that snaps positions to the grid
*
* @example
* ```typescript
* // Snap to every 2 grid units
* <GridLayout constraints={[snapToGrid(2), gridBounds]} />
*
* // Different horizontal and vertical snap
* <GridLayout constraints={[snapToGrid(2, 3), gridBounds]} />
* ```
*/
declare function snapToGrid(stepX: number, stepY?: number): LayoutConstraint;
/**
* Create a minimum size constraint.
*
* Sets minimum width and height for all items using this constraint.
* Useful for grid-wide minimums without setting minW/minH on each item.
*
* @param minW - Minimum width in grid units
* @param minH - Minimum height in grid units
* @returns A constraint that enforces minimum size
*/
declare function minSize(minW: number, minH: number): LayoutConstraint;
/**
* Create a maximum size constraint.
*
* Sets maximum width and height for all items using this constraint.
* Useful for grid-wide maximums without setting maxW/maxH on each item.
*
* @param maxW - Maximum width in grid units
* @param maxH - Maximum height in grid units
* @returns A constraint that enforces maximum size
*/
declare function maxSize(maxW: number, maxH: number): LayoutConstraint;
/**
* Default constraints applied when none are specified.
*
* Includes:
* - gridBounds: Keep items within the grid
* - minMaxSize: Respect per-item min/max constraints
*/
declare const defaultConstraints: LayoutConstraint[];
/**
* Apply position constraints to a proposed position.
*
* Constraints are applied in array order, allowing composition.
* Grid-level constraints are applied first, then per-item constraints.
*
* @param constraints - Array of constraints to apply
* @param item - The layout item being positioned
* @param x - Proposed x position
* @param y - Proposed y position
* @param context - Grid context (cols, maxRows, etc.)
* @returns Constrained position
*/
declare function applyPositionConstraints(constraints: LayoutConstraint[], item: LayoutItem, x: number, y: number, context: ConstraintContext): {
x: number;
y: number;
};
/**
* Apply size constraints to a proposed size.
*
* Constraints are applied in array order, allowing composition.
* Grid-level constraints are applied first, then per-item constraints.
*
* @param constraints - Array of constraints to apply
* @param item - The layout item being resized
* @param w - Proposed width
* @param h - Proposed height
* @param handle - Which resize handle is being used
* @param context - Grid context (cols, maxRows, etc.)
* @returns Constrained size
*/
declare function applySizeConstraints(constraints: LayoutConstraint[], item: LayoutItem, w: number, h: number, handle: ResizeHandleAxis, context: ConstraintContext): {
w: number;
h: number;
};
export { ConstraintContext, LayoutConstraint, LayoutItem, ResizeHandleAxis, applyPositionConstraints, applySizeConstraints, aspectRatio, boundedX, boundedY, containerBounds, defaultConstraints, gridBounds, maxSize, minMaxSize, minSize, snapToGrid };