react-grid-layout 1.5.3 → 2.0.0

package/css/styles.css

@@ -5,6 +5,7 @@
 .react-grid-item {
   transition: all 200ms ease;
   transition-property: left, top, width, height;
+  user-select: none;
 }
 .react-grid-item img {
   pointer-events: none;
@@ -34,10 +35,6 @@
   opacity: 0.2;
   transition-duration: 100ms;
   z-index: 2;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
   user-select: none;
 }
 
@@ -49,6 +46,11 @@
   position: absolute;
   width: 20px;
   height: 20px;
+  opacity: 0;
+}
+
+.react-grid-item:hover > .react-resizable-handle {
+  opacity: 1;
 }
 
 .react-grid-item > .react-resizable-handle::after {

package/dist/ResponsiveGridLayout-CH4s0tKj.d.ts

@@ -0,0 +1,124 @@
+import React__default, { CSSProperties, DragEvent, ReactElement } from 'react';
+import { j as GridConfig, k as DragConfig, l as ResizeConfig, m as DropConfig, i as PositionStrategy, c as Compactor, L as Layout, a as LayoutItem, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-Cxf4nHNr.js';
+
+/**
+ * GridLayout component
+ *
+ * A reactive, fluid grid layout with draggable, resizable components.
+ */
+
+type EventCallback = (layout: Layout, oldItem: LayoutItem | null, newItem: LayoutItem | null, placeholder: LayoutItem | null, event: Event, element?: HTMLElement) => void;
+interface GridLayoutProps {
+    /** Child elements to render in the grid */
+    children: React__default.ReactNode;
+    /** Width of the container in pixels */
+    width: number;
+    /**
+     * Grid measurement configuration.
+     * @see GridConfig
+     */
+    gridConfig?: Partial<GridConfig>;
+    /**
+     * Drag behavior configuration.
+     * @see DragConfig
+     */
+    dragConfig?: Partial<DragConfig>;
+    /**
+     * Resize behavior configuration.
+     * @see ResizeConfig
+     */
+    resizeConfig?: Partial<ResizeConfig>;
+    /**
+     * External drop configuration.
+     * @see DropConfig
+     */
+    dropConfig?: Partial<DropConfig>;
+    /**
+     * CSS positioning strategy.
+     * Use transformStrategy (default), absoluteStrategy, or createScaledStrategy(scale).
+     * @see PositionStrategy
+     */
+    positionStrategy?: PositionStrategy;
+    /**
+     * Layout compaction strategy.
+     * Use verticalCompactor (default), horizontalCompactor, or noCompactor.
+     * @see Compactor
+     */
+    compactor?: Compactor;
+    /** Layout definition */
+    layout?: Layout;
+    /** Item to use when dropping from outside */
+    droppingItem?: LayoutItem;
+    /** Whether to auto-size the container height */
+    autoSize?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Additional styles */
+    style?: CSSProperties;
+    /** Ref to the container element */
+    innerRef?: React__default.Ref<HTMLDivElement>;
+    /** Called when layout changes */
+    onLayoutChange?: (layout: Layout) => void;
+    /** Called when drag starts */
+    onDragStart?: EventCallback;
+    /** Called during drag */
+    onDrag?: EventCallback;
+    /** Called when drag stops */
+    onDragStop?: EventCallback;
+    /** Called when resize starts */
+    onResizeStart?: EventCallback;
+    /** Called during resize */
+    onResize?: EventCallback;
+    /** Called when resize stops */
+    onResizeStop?: EventCallback;
+    /** Called when an item is dropped from outside */
+    onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;
+    /** Called when dragging over the grid */
+    onDropDragOver?: (e: DragEvent) => {
+        w?: number;
+        h?: number;
+    } | false | void;
+}
+/**
+ * GridLayout - A reactive, fluid grid layout with draggable, resizable components.
+ */
+declare function GridLayout(props: GridLayoutProps): ReactElement;
+
+/**
+ * ResponsiveGridLayout component
+ *
+ * A responsive grid layout that automatically adjusts to container width.
+ */
+
+interface ResponsiveGridLayoutProps<B extends Breakpoint = string> extends Omit<GridLayoutProps, "gridConfig" | "layout" | "onLayoutChange"> {
+    /** Current breakpoint (optional, auto-detected from width) */
+    breakpoint?: B;
+    /** Breakpoint definitions (name → min-width) */
+    breakpoints?: Breakpoints<B>;
+    /** Column counts per breakpoint */
+    cols?: Breakpoints<B>;
+    /** Layouts for each breakpoint */
+    layouts?: ResponsiveLayouts<B>;
+    /** Row height (default: 150) */
+    rowHeight?: number;
+    /** Maximum rows (default: Infinity) */
+    maxRows?: number;
+    /** Margin between items - can be fixed or per-breakpoint */
+    margin?: readonly [number, number] | Partial<Record<B, readonly [number, number]>>;
+    /** Container padding - can be fixed or per-breakpoint */
+    containerPadding?: readonly [number, number] | Partial<Record<B, readonly [number, number] | null>> | null;
+    /** Compactor for layout compaction */
+    compactor?: Compactor;
+    /** Called when breakpoint changes */
+    onBreakpointChange?: (newBreakpoint: B, cols: number) => void;
+    /** Called when layout changes */
+    onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;
+    /** Called when width changes */
+    onWidthChange?: (containerWidth: number, margin: readonly [number, number], cols: number, containerPadding: readonly [number, number] | null) => void;
+}
+/**
+ * ResponsiveGridLayout - A responsive grid layout that adjusts to container width.
+ */
+declare function ResponsiveGridLayout<B extends Breakpoint = string>(props: ResponsiveGridLayoutProps<B>): ReactElement;
+
+export { type EventCallback as E, GridLayout as G, ResponsiveGridLayout as R, type GridLayoutProps as a, type ResponsiveGridLayoutProps as b };

package/dist/ResponsiveGridLayout-D6lFRE3f.d.mts

@@ -0,0 +1,124 @@
+import React__default, { CSSProperties, DragEvent, ReactElement } from 'react';
+import { j as GridConfig, k as DragConfig, l as ResizeConfig, m as DropConfig, i as PositionStrategy, c as Compactor, L as Layout, a as LayoutItem, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-Cxf4nHNr.mjs';
+
+/**
+ * GridLayout component
+ *
+ * A reactive, fluid grid layout with draggable, resizable components.
+ */
+
+type EventCallback = (layout: Layout, oldItem: LayoutItem | null, newItem: LayoutItem | null, placeholder: LayoutItem | null, event: Event, element?: HTMLElement) => void;
+interface GridLayoutProps {
+    /** Child elements to render in the grid */
+    children: React__default.ReactNode;
+    /** Width of the container in pixels */
+    width: number;
+    /**
+     * Grid measurement configuration.
+     * @see GridConfig
+     */
+    gridConfig?: Partial<GridConfig>;
+    /**
+     * Drag behavior configuration.
+     * @see DragConfig
+     */
+    dragConfig?: Partial<DragConfig>;
+    /**
+     * Resize behavior configuration.
+     * @see ResizeConfig
+     */
+    resizeConfig?: Partial<ResizeConfig>;
+    /**
+     * External drop configuration.
+     * @see DropConfig
+     */
+    dropConfig?: Partial<DropConfig>;
+    /**
+     * CSS positioning strategy.
+     * Use transformStrategy (default), absoluteStrategy, or createScaledStrategy(scale).
+     * @see PositionStrategy
+     */
+    positionStrategy?: PositionStrategy;
+    /**
+     * Layout compaction strategy.
+     * Use verticalCompactor (default), horizontalCompactor, or noCompactor.
+     * @see Compactor
+     */
+    compactor?: Compactor;
+    /** Layout definition */
+    layout?: Layout;
+    /** Item to use when dropping from outside */
+    droppingItem?: LayoutItem;
+    /** Whether to auto-size the container height */
+    autoSize?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Additional styles */
+    style?: CSSProperties;
+    /** Ref to the container element */
+    innerRef?: React__default.Ref<HTMLDivElement>;
+    /** Called when layout changes */
+    onLayoutChange?: (layout: Layout) => void;
+    /** Called when drag starts */
+    onDragStart?: EventCallback;
+    /** Called during drag */
+    onDrag?: EventCallback;
+    /** Called when drag stops */
+    onDragStop?: EventCallback;
+    /** Called when resize starts */
+    onResizeStart?: EventCallback;
+    /** Called during resize */
+    onResize?: EventCallback;
+    /** Called when resize stops */
+    onResizeStop?: EventCallback;
+    /** Called when an item is dropped from outside */
+    onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;
+    /** Called when dragging over the grid */
+    onDropDragOver?: (e: DragEvent) => {
+        w?: number;
+        h?: number;
+    } | false | void;
+}
+/**
+ * GridLayout - A reactive, fluid grid layout with draggable, resizable components.
+ */
+declare function GridLayout(props: GridLayoutProps): ReactElement;
+
+/**
+ * ResponsiveGridLayout component
+ *
+ * A responsive grid layout that automatically adjusts to container width.
+ */
+
+interface ResponsiveGridLayoutProps<B extends Breakpoint = string> extends Omit<GridLayoutProps, "gridConfig" | "layout" | "onLayoutChange"> {
+    /** Current breakpoint (optional, auto-detected from width) */
+    breakpoint?: B;
+    /** Breakpoint definitions (name → min-width) */
+    breakpoints?: Breakpoints<B>;
+    /** Column counts per breakpoint */
+    cols?: Breakpoints<B>;
+    /** Layouts for each breakpoint */
+    layouts?: ResponsiveLayouts<B>;
+    /** Row height (default: 150) */
+    rowHeight?: number;
+    /** Maximum rows (default: Infinity) */
+    maxRows?: number;
+    /** Margin between items - can be fixed or per-breakpoint */
+    margin?: readonly [number, number] | Partial<Record<B, readonly [number, number]>>;
+    /** Container padding - can be fixed or per-breakpoint */
+    containerPadding?: readonly [number, number] | Partial<Record<B, readonly [number, number] | null>> | null;
+    /** Compactor for layout compaction */
+    compactor?: Compactor;
+    /** Called when breakpoint changes */
+    onBreakpointChange?: (newBreakpoint: B, cols: number) => void;
+    /** Called when layout changes */
+    onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;
+    /** Called when width changes */
+    onWidthChange?: (containerWidth: number, margin: readonly [number, number], cols: number, containerPadding: readonly [number, number] | null) => void;
+}
+/**
+ * ResponsiveGridLayout - A responsive grid layout that adjusts to container width.
+ */
+declare function ResponsiveGridLayout<B extends Breakpoint = string>(props: ResponsiveGridLayoutProps<B>): ReactElement;
+
+export { type EventCallback as E, GridLayout as G, ResponsiveGridLayout as R, type GridLayoutProps as a, type ResponsiveGridLayoutProps as b };

package/dist/calculate-CwYDW8na.d.mts

@@ -0,0 +1,168 @@
+import { P as Position, d as ResizeHandleAxis } from './types-Cxf4nHNr.mjs';
+
+/**
+ * Grid calculation utilities.
+ *
+ * These functions convert between grid units and pixel positions.
+ */
+
+/**
+ * Parameters needed for position calculations.
+ */
+interface PositionParams {
+    readonly margin: readonly [number, number];
+    readonly containerPadding: readonly [number, number];
+    readonly containerWidth: number;
+    readonly cols: number;
+    readonly rowHeight: number;
+    readonly maxRows: number;
+}
+/**
+ * Calculate the width of a single grid column in pixels.
+ *
+ * @param positionParams - Grid parameters
+ * @returns Column width in pixels
+ */
+declare function calcGridColWidth(positionParams: PositionParams): number;
+/**
+ * Calculate the pixel size for a grid unit dimension (width or height).
+ *
+ * Can be called as:
+ * - calcGridItemWHPx(w, colWidth, margin[0]) for width
+ * - calcGridItemWHPx(h, rowHeight, margin[1]) for height
+ *
+ * @param gridUnits - Size in grid units
+ * @param colOrRowSize - Column width or row height in pixels
+ * @param marginPx - Margin between items in pixels
+ * @returns Size in pixels
+ */
+declare function calcGridItemWHPx(gridUnits: number, colOrRowSize: number, marginPx: number): number;
+/**
+ * Calculate pixel position for a grid item.
+ *
+ * Returns left, top, width, height in pixels.
+ *
+ * @param positionParams - Grid parameters
+ * @param x - X coordinate in grid units
+ * @param y - Y coordinate in grid units
+ * @param w - Width in grid units
+ * @param h - Height in grid units
+ * @param dragPosition - If present, use exact left/top from drag callbacks
+ * @param resizePosition - If present, use exact dimensions from resize callbacks
+ * @returns Position in pixels
+ */
+declare function calcGridItemPosition(positionParams: PositionParams, x: number, y: number, w: number, h: number, dragPosition?: {
+    top: number;
+    left: number;
+} | null, resizePosition?: {
+    top: number;
+    left: number;
+    height: number;
+    width: number;
+} | null): Position;
+/**
+ * Translate pixel coordinates to grid units.
+ *
+ * @param positionParams - Grid parameters
+ * @param top - Top position in pixels (relative to parent)
+ * @param left - Left position in pixels (relative to parent)
+ * @param w - Width in grid units (for clamping)
+ * @param h - Height in grid units (for clamping)
+ * @returns x and y in grid units
+ */
+declare function calcXY(positionParams: PositionParams, top: number, left: number, w: number, h: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Calculate grid units from pixel dimensions.
+ *
+ * @param positionParams - Grid parameters
+ * @param width - Width in pixels
+ * @param height - Height in pixels
+ * @param x - X coordinate in grid units (for clamping)
+ * @param y - Y coordinate in grid units (for clamping)
+ * @param handle - Resize handle being used
+ * @returns w, h in grid units
+ */
+declare function calcWH(positionParams: PositionParams, width: number, height: number, x: number, y: number, handle: ResizeHandleAxis): {
+    w: number;
+    h: number;
+};
+/**
+ * Clamp a number between bounds.
+ *
+ * @param num - Number to clamp
+ * @param lowerBound - Minimum value
+ * @param upperBound - Maximum value
+ * @returns Clamped value
+ */
+declare function clamp(num: number, lowerBound: number, upperBound: number): number;
+/**
+ * Grid cell dimension information for rendering backgrounds or overlays.
+ */
+interface GridCellDimensions {
+    /** Width of a single cell in pixels */
+    readonly cellWidth: number;
+    /** Height of a single cell in pixels */
+    readonly cellHeight: number;
+    /** Horizontal offset from container edge to first cell */
+    readonly offsetX: number;
+    /** Vertical offset from container edge to first cell */
+    readonly offsetY: number;
+    /** Horizontal gap between cells */
+    readonly gapX: number;
+    /** Vertical gap between cells */
+    readonly gapY: number;
+    /** Number of columns */
+    readonly cols: number;
+    /** Total container width */
+    readonly containerWidth: number;
+}
+/**
+ * Configuration for grid cell dimension calculation.
+ */
+interface GridCellConfig {
+    /** Container width in pixels */
+    width: number;
+    /** Number of columns */
+    cols: number;
+    /** Row height in pixels */
+    rowHeight: number;
+    /** Margin between items [x, y] */
+    margin?: readonly [number, number];
+    /** Container padding [x, y], defaults to margin if not specified */
+    containerPadding?: readonly [number, number] | null;
+}
+/**
+ * Calculate grid cell dimensions for rendering backgrounds or overlays.
+ *
+ * This function provides all the measurements needed to render a visual
+ * grid background that aligns with the actual grid cells.
+ *
+ * @param config - Grid configuration
+ * @returns Cell dimensions and offsets
+ *
+ * @example
+ * ```tsx
+ * import { calcGridCellDimensions } from 'react-grid-layout/core';
+ *
+ * const dims = calcGridCellDimensions({
+ *   width: 1200,
+ *   cols: 12,
+ *   rowHeight: 30,
+ *   margin: [10, 10],
+ *   containerPadding: [10, 10]
+ * });
+ *
+ * // dims.cellWidth = 88.33...
+ * // dims.cellHeight = 30
+ * // dims.offsetX = 10 (containerPadding[0])
+ * // dims.offsetY = 10 (containerPadding[1])
+ * // dims.gapX = 10 (margin[0])
+ * // dims.gapY = 10 (margin[1])
+ * ```
+ */
+declare function calcGridCellDimensions(config: GridCellConfig): GridCellDimensions;
+
+export { type GridCellDimensions as G, type PositionParams as P, calcXY as a, calcWH as b, calcGridItemPosition as c, type GridCellConfig as d, calcGridColWidth as e, calcGridItemWHPx as f, clamp as g, calcGridCellDimensions as h };

package/dist/calculate-mgLpNJ5O.d.ts

@@ -0,0 +1,168 @@
+import { P as Position, d as ResizeHandleAxis } from './types-Cxf4nHNr.js';
+
+/**
+ * Grid calculation utilities.
+ *
+ * These functions convert between grid units and pixel positions.
+ */
+
+/**
+ * Parameters needed for position calculations.
+ */
+interface PositionParams {
+    readonly margin: readonly [number, number];
+    readonly containerPadding: readonly [number, number];
+    readonly containerWidth: number;
+    readonly cols: number;
+    readonly rowHeight: number;
+    readonly maxRows: number;
+}
+/**
+ * Calculate the width of a single grid column in pixels.
+ *
+ * @param positionParams - Grid parameters
+ * @returns Column width in pixels
+ */
+declare function calcGridColWidth(positionParams: PositionParams): number;
+/**
+ * Calculate the pixel size for a grid unit dimension (width or height).
+ *
+ * Can be called as:
+ * - calcGridItemWHPx(w, colWidth, margin[0]) for width
+ * - calcGridItemWHPx(h, rowHeight, margin[1]) for height
+ *
+ * @param gridUnits - Size in grid units
+ * @param colOrRowSize - Column width or row height in pixels
+ * @param marginPx - Margin between items in pixels
+ * @returns Size in pixels
+ */
+declare function calcGridItemWHPx(gridUnits: number, colOrRowSize: number, marginPx: number): number;
+/**
+ * Calculate pixel position for a grid item.
+ *
+ * Returns left, top, width, height in pixels.
+ *
+ * @param positionParams - Grid parameters
+ * @param x - X coordinate in grid units
+ * @param y - Y coordinate in grid units
+ * @param w - Width in grid units
+ * @param h - Height in grid units
+ * @param dragPosition - If present, use exact left/top from drag callbacks
+ * @param resizePosition - If present, use exact dimensions from resize callbacks
+ * @returns Position in pixels
+ */
+declare function calcGridItemPosition(positionParams: PositionParams, x: number, y: number, w: number, h: number, dragPosition?: {
+    top: number;
+    left: number;
+} | null, resizePosition?: {
+    top: number;
+    left: number;
+    height: number;
+    width: number;
+} | null): Position;
+/**
+ * Translate pixel coordinates to grid units.
+ *
+ * @param positionParams - Grid parameters
+ * @param top - Top position in pixels (relative to parent)
+ * @param left - Left position in pixels (relative to parent)
+ * @param w - Width in grid units (for clamping)
+ * @param h - Height in grid units (for clamping)
+ * @returns x and y in grid units
+ */
+declare function calcXY(positionParams: PositionParams, top: number, left: number, w: number, h: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Calculate grid units from pixel dimensions.
+ *
+ * @param positionParams - Grid parameters
+ * @param width - Width in pixels
+ * @param height - Height in pixels
+ * @param x - X coordinate in grid units (for clamping)
+ * @param y - Y coordinate in grid units (for clamping)
+ * @param handle - Resize handle being used
+ * @returns w, h in grid units
+ */
+declare function calcWH(positionParams: PositionParams, width: number, height: number, x: number, y: number, handle: ResizeHandleAxis): {
+    w: number;
+    h: number;
+};
+/**
+ * Clamp a number between bounds.
+ *
+ * @param num - Number to clamp
+ * @param lowerBound - Minimum value
+ * @param upperBound - Maximum value
+ * @returns Clamped value
+ */
+declare function clamp(num: number, lowerBound: number, upperBound: number): number;
+/**
+ * Grid cell dimension information for rendering backgrounds or overlays.
+ */
+interface GridCellDimensions {
+    /** Width of a single cell in pixels */
+    readonly cellWidth: number;
+    /** Height of a single cell in pixels */
+    readonly cellHeight: number;
+    /** Horizontal offset from container edge to first cell */
+    readonly offsetX: number;
+    /** Vertical offset from container edge to first cell */
+    readonly offsetY: number;
+    /** Horizontal gap between cells */
+    readonly gapX: number;
+    /** Vertical gap between cells */
+    readonly gapY: number;
+    /** Number of columns */
+    readonly cols: number;
+    /** Total container width */
+    readonly containerWidth: number;
+}
+/**
+ * Configuration for grid cell dimension calculation.
+ */
+interface GridCellConfig {
+    /** Container width in pixels */
+    width: number;
+    /** Number of columns */
+    cols: number;
+    /** Row height in pixels */
+    rowHeight: number;
+    /** Margin between items [x, y] */
+    margin?: readonly [number, number];
+    /** Container padding [x, y], defaults to margin if not specified */
+    containerPadding?: readonly [number, number] | null;
+}
+/**
+ * Calculate grid cell dimensions for rendering backgrounds or overlays.
+ *
+ * This function provides all the measurements needed to render a visual
+ * grid background that aligns with the actual grid cells.
+ *
+ * @param config - Grid configuration
+ * @returns Cell dimensions and offsets
+ *
+ * @example
+ * ```tsx
+ * import { calcGridCellDimensions } from 'react-grid-layout/core';
+ *
+ * const dims = calcGridCellDimensions({
+ *   width: 1200,
+ *   cols: 12,
+ *   rowHeight: 30,
+ *   margin: [10, 10],
+ *   containerPadding: [10, 10]
+ * });
+ *
+ * // dims.cellWidth = 88.33...
+ * // dims.cellHeight = 30
+ * // dims.offsetX = 10 (containerPadding[0])
+ * // dims.offsetY = 10 (containerPadding[1])
+ * // dims.gapX = 10 (margin[0])
+ * // dims.gapY = 10 (margin[1])
+ * ```
+ */
+declare function calcGridCellDimensions(config: GridCellConfig): GridCellDimensions;
+
+export { type GridCellDimensions as G, type PositionParams as P, calcXY as a, calcWH as b, calcGridItemPosition as c, type GridCellConfig as d, calcGridColWidth as e, calcGridItemWHPx as f, clamp as g, calcGridCellDimensions as h };