react-grid-layout 1.5.3 → 2.0.0

package/dist/react.d.ts

@@ -0,0 +1,351 @@
+import React__default, { ReactElement, CSSProperties, RefObject } from 'react';
+import { D as DroppingPosition, d as ResizeHandleAxis, G as GridDragEvent, e as GridResizeEvent, L as Layout, C as CompactType, a as LayoutItem, c as Compactor, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-Cxf4nHNr.js';
+export { P as Position } from './types-Cxf4nHNr.js';
+export { E as EventCallback, G as GridLayout, a as GridLayoutProps, R as ResponsiveGridLayout, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-CH4s0tKj.js';
+export { b as bottom, c as cloneLayout, a as cloneLayoutItem, d as getCompactor, g as getLayoutItem, h as horizontalCompactor, n as noCompactor, f as setTopLeft, s as setTransform, e as verticalCompactor } from './position-Dk2b4ZMS.js';
+export { c as calcGridItemPosition, b as calcWH, a as calcXY } from './calculate-mgLpNJ5O.js';
+
+/**
+ * GridItem component
+ *
+ * An individual item within a grid layout. Handles dragging and resizing.
+ */
+
+type GridItemCallback<Data extends GridDragEvent | GridResizeEvent> = (i: string, w: number, h: number, data: Data) => void;
+type ResizeHandle = ReactElement | ((resizeHandleAxis: ResizeHandleAxis, ref: React__default.Ref<HTMLElement>) => ReactElement);
+interface GridItemProps {
+    /** Child element to render */
+    children: ReactElement;
+    /** Number of columns in the grid */
+    cols: number;
+    /** Width of the container in pixels */
+    containerWidth: number;
+    /** Margin between items [x, y] */
+    margin: readonly [number, number];
+    /** Padding inside the container [x, y] */
+    containerPadding: readonly [number, number];
+    /** Height of each row in pixels */
+    rowHeight: number;
+    /** Maximum number of rows */
+    maxRows: number;
+    /** Whether the item can be dragged */
+    isDraggable: boolean;
+    /** Whether the item can be resized */
+    isResizable: boolean;
+    /** Whether the item is bounded within the container */
+    isBounded: boolean;
+    /** Whether the item is static (can't be moved/resized) */
+    static?: boolean;
+    /** Use CSS transforms instead of top/left */
+    useCSSTransforms?: boolean;
+    /** Use percentage widths for server rendering */
+    usePercentages?: boolean;
+    /** Scale factor for transforms */
+    transformScale?: number;
+    /** Current position of a dropping element */
+    droppingPosition?: DroppingPosition;
+    /** Additional class name */
+    className?: string;
+    /** Additional styles */
+    style?: CSSProperties;
+    /** CSS selector for draggable handle */
+    handle?: string;
+    /** CSS selector for cancel handle */
+    cancel?: string;
+    /** X position in grid units */
+    x: number;
+    /** Y position in grid units */
+    y: number;
+    /** Width in grid units */
+    w: number;
+    /** Height in grid units */
+    h: number;
+    /** Minimum width in grid units */
+    minW?: number;
+    /** Maximum width in grid units */
+    maxW?: number;
+    /** Minimum height in grid units */
+    minH?: number;
+    /** Maximum height in grid units */
+    maxH?: number;
+    /** Unique identifier */
+    i: string;
+    /** Which resize handles to show */
+    resizeHandles?: ResizeHandleAxis[];
+    /** Custom resize handle */
+    resizeHandle?: ResizeHandle;
+    /** Called when drag starts */
+    onDragStart?: GridItemCallback<GridDragEvent>;
+    /** Called during drag */
+    onDrag?: GridItemCallback<GridDragEvent>;
+    /** Called when drag stops */
+    onDragStop?: GridItemCallback<GridDragEvent>;
+    /** Called when resize starts */
+    onResizeStart?: GridItemCallback<GridResizeEvent>;
+    /** Called during resize */
+    onResize?: GridItemCallback<GridResizeEvent>;
+    /** Called when resize stops */
+    onResizeStop?: GridItemCallback<GridResizeEvent>;
+}
+/**
+ * GridItem - An individual item within a grid layout.
+ *
+ * Wraps a child element with drag and resize functionality.
+ */
+declare function GridItem(props: GridItemProps): ReactElement;
+
+/**
+ * useContainerWidth hook
+ *
+ * Observes container width using ResizeObserver and provides
+ * reactive width updates for responsive layouts.
+ */
+
+interface UseContainerWidthOptions {
+    /**
+     * If true, delays initial render until width is measured.
+     * Useful for SSR or when you need accurate initial measurements.
+     */
+    measureBeforeMount?: boolean;
+    /**
+     * Initial width to use before measurement.
+     * Defaults to 1280.
+     */
+    initialWidth?: number;
+}
+interface UseContainerWidthResult {
+    /**
+     * Current container width in pixels.
+     */
+    width: number;
+    /**
+     * Whether the container has been measured at least once.
+     */
+    mounted: boolean;
+    /**
+     * Ref to attach to the container element.
+     */
+    containerRef: RefObject<HTMLDivElement | null>;
+    /**
+     * Manually trigger a width measurement.
+     * Useful when the container size might change without a resize event.
+     */
+    measureWidth: () => void;
+}
+/**
+ * Hook to observe and track container width.
+ *
+ * Replaces the WidthProvider HOC with a more composable approach.
+ *
+ * @example
+ * ```tsx
+ * function MyGrid() {
+ *   const { width, containerRef, mounted } = useContainerWidth();
+ *
+ *   return (
+ *     <div ref={containerRef}>
+ *       {mounted && <GridLayout width={width} {...props} />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useContainerWidth(options?: UseContainerWidthOptions): UseContainerWidthResult;
+
+/**
+ * useGridLayout hook
+ *
+ * Core hook for managing grid layout state, including drag, resize, and drop operations.
+ * This extracts the state management logic from ReactGridLayout into a reusable hook.
+ */
+
+interface DragState {
+    /** Currently dragging item placeholder */
+    activeDrag: LayoutItem | null;
+    /** Original item before drag started */
+    oldDragItem: LayoutItem | null;
+    /** Layout before drag started */
+    oldLayout: Layout | null;
+}
+interface ResizeState {
+    /** Whether a resize is in progress */
+    resizing: boolean;
+    /** Original item before resize started */
+    oldResizeItem: LayoutItem | null;
+    /** Layout before resize started */
+    oldLayout: Layout | null;
+}
+interface DropState {
+    /** DOM node for the dropping placeholder */
+    droppingDOMNode: React.ReactElement | null;
+    /** Current drop position */
+    droppingPosition: DroppingPosition | null;
+}
+interface UseGridLayoutOptions {
+    /** Initial layout */
+    layout: Layout;
+    /** Number of columns */
+    cols: number;
+    /** Compaction type: 'vertical', 'horizontal', or null */
+    compactType?: CompactType;
+    /** Allow items to overlap */
+    allowOverlap?: boolean;
+    /** Prevent collisions when moving items */
+    preventCollision?: boolean;
+    /** Called when layout changes */
+    onLayoutChange?: (layout: Layout) => void;
+}
+interface UseGridLayoutResult {
+    /** Current layout */
+    layout: Layout;
+    /** Set layout directly */
+    setLayout: (layout: Layout) => void;
+    /** Drag state */
+    dragState: DragState;
+    /** Resize state */
+    resizeState: ResizeState;
+    /** Drop state */
+    dropState: DropState;
+    /** Start dragging an item */
+    onDragStart: (itemId: string, x: number, y: number) => LayoutItem | null;
+    /** Update drag position */
+    onDrag: (itemId: string, x: number, y: number) => void;
+    /** Stop dragging */
+    onDragStop: (itemId: string, x: number, y: number) => void;
+    /** Start resizing an item */
+    onResizeStart: (itemId: string) => LayoutItem | null;
+    /** Update resize dimensions */
+    onResize: (itemId: string, w: number, h: number, x?: number, y?: number) => void;
+    /** Stop resizing */
+    onResizeStop: (itemId: string, w: number, h: number) => void;
+    /** Start dropping (external drag-in) */
+    onDropDragOver: (droppingItem: LayoutItem, position: DroppingPosition) => void;
+    /** Update drop position */
+    onDropDragLeave: () => void;
+    /** Complete drop */
+    onDrop: (droppingItem: LayoutItem) => void;
+    /** Container height in rows */
+    containerHeight: number;
+    /** Whether any drag/resize is active */
+    isInteracting: boolean;
+    /** Get the compactor being used */
+    compactor: Compactor;
+}
+/**
+ * Hook for managing grid layout state.
+ *
+ * Handles all layout state including drag, resize, and drop operations.
+ * Uses immutable updates and provides callbacks for all interactions.
+ *
+ * @example
+ * ```tsx
+ * function MyGrid() {
+ *   const {
+ *     layout,
+ *     onDragStart,
+ *     onDrag,
+ *     onDragStop,
+ *     containerHeight
+ *   } = useGridLayout({
+ *     layout: initialLayout,
+ *     cols: 12,
+ *     compactType: 'vertical'
+ *   });
+ *
+ *   return (
+ *     <div style={{ height: containerHeight }}>
+ *       {layout.map(item => (
+ *         <GridItem
+ *           key={item.i}
+ *           {...item}
+ *           onDragStart={() => onDragStart(item.i, item.x, item.y)}
+ *         />
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useGridLayout(options: UseGridLayoutOptions): UseGridLayoutResult;
+
+/**
+ * useResponsiveLayout hook
+ *
+ * Manages responsive breakpoints and layout generation for different screen sizes.
+ * Extracts state management from ResponsiveReactGridLayout into a reusable hook.
+ */
+
+/** Default breakpoint names */
+type DefaultBreakpoints = "lg" | "md" | "sm" | "xs" | "xxs";
+/** Default breakpoint widths */
+declare const DEFAULT_BREAKPOINTS: Breakpoints<DefaultBreakpoints>;
+/** Default column counts per breakpoint */
+declare const DEFAULT_COLS: Breakpoints<DefaultBreakpoints>;
+interface UseResponsiveLayoutOptions<B extends Breakpoint = DefaultBreakpoints> {
+    /** Current container width */
+    width: number;
+    /** Breakpoint definitions (name → min-width) */
+    breakpoints?: Breakpoints<B>;
+    /** Column counts per breakpoint */
+    cols?: Breakpoints<B>;
+    /** Layouts for each breakpoint */
+    layouts?: ResponsiveLayouts<B>;
+    /** Compaction type */
+    compactType?: CompactType;
+    /** 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?: (width: number, margin: readonly [number, number], cols: number, containerPadding: readonly [number, number] | null) => void;
+}
+interface UseResponsiveLayoutResult<B extends Breakpoint = DefaultBreakpoints> {
+    /** Current layout for the active breakpoint */
+    layout: Layout;
+    /** All layouts by breakpoint */
+    layouts: ResponsiveLayouts<B>;
+    /** Current active breakpoint */
+    breakpoint: B;
+    /** Column count for the current breakpoint */
+    cols: number;
+    /** Update layouts for a specific breakpoint */
+    setLayoutForBreakpoint: (breakpoint: B, layout: Layout) => void;
+    /** Update all layouts */
+    setLayouts: (layouts: ResponsiveLayouts<B>) => void;
+    /** Sorted array of breakpoint names (smallest to largest) */
+    sortedBreakpoints: B[];
+}
+/**
+ * Hook for managing responsive grid layouts.
+ *
+ * Automatically selects the appropriate layout based on container width
+ * and generates layouts for new breakpoints from existing ones.
+ *
+ * @example
+ * ```tsx
+ * function MyResponsiveGrid() {
+ *   const { width, containerRef } = useContainerWidth();
+ *   const { layout, breakpoint, cols } = useResponsiveLayout({
+ *     width,
+ *     layouts: {
+ *       lg: [...],
+ *       md: [...],
+ *       sm: [...]
+ *     }
+ *   });
+ *
+ *   return (
+ *     <div ref={containerRef}>
+ *       <GridLayout
+ *         width={width}
+ *         cols={cols}
+ *         layout={layout}
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useResponsiveLayout<B extends Breakpoint = DefaultBreakpoints>(options: UseResponsiveLayoutOptions<B>): UseResponsiveLayoutResult<B>;
+
+export { Breakpoint, Breakpoints, CompactType, Compactor, DEFAULT_BREAKPOINTS, DEFAULT_COLS, type DefaultBreakpoints, type DragState, type DropState, DroppingPosition, GridDragEvent, GridItem, type GridItemCallback, type GridItemProps, GridResizeEvent, Layout, LayoutItem, type ResizeHandle, ResizeHandleAxis, type ResizeState, ResponsiveLayouts, type UseContainerWidthOptions, type UseContainerWidthResult, type UseGridLayoutOptions, type UseGridLayoutResult, type UseResponsiveLayoutOptions, type UseResponsiveLayoutResult, useContainerWidth, useGridLayout, useResponsiveLayout };

package/dist/react.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var chunkH5KMDLY3_js = require('./chunk-H5KMDLY3.js');
+require('./chunk-PBQSHIID.js');
+var chunkBFTKGAP3_js = require('./chunk-BFTKGAP3.js');
+var chunk3WO4SAYB_js = require('./chunk-3WO4SAYB.js');
+var chunkF6NQPYKT_js = require('./chunk-F6NQPYKT.js');
+
+
+
+Object.defineProperty(exports, "DEFAULT_BREAKPOINTS", {
+  enumerable: true,
+  get: function () { return chunkH5KMDLY3_js.DEFAULT_BREAKPOINTS; }
+});
+Object.defineProperty(exports, "DEFAULT_COLS", {
+  enumerable: true,
+  get: function () { return chunkH5KMDLY3_js.DEFAULT_COLS; }
+});
+Object.defineProperty(exports, "useContainerWidth", {
+  enumerable: true,
+  get: function () { return chunkH5KMDLY3_js.useContainerWidth; }
+});
+Object.defineProperty(exports, "useGridLayout", {
+  enumerable: true,
+  get: function () { return chunkH5KMDLY3_js.useGridLayout; }
+});
+Object.defineProperty(exports, "useResponsiveLayout", {
+  enumerable: true,
+  get: function () { return chunkH5KMDLY3_js.useResponsiveLayout; }
+});
+Object.defineProperty(exports, "GridItem", {
+  enumerable: true,
+  get: function () { return chunkBFTKGAP3_js.GridItem; }
+});
+Object.defineProperty(exports, "GridLayout", {
+  enumerable: true,
+  get: function () { return chunkBFTKGAP3_js.GridLayout; }
+});
+Object.defineProperty(exports, "ResponsiveGridLayout", {
+  enumerable: true,
+  get: function () { return chunkBFTKGAP3_js.ResponsiveGridLayout; }
+});
+Object.defineProperty(exports, "bottom", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.bottom; }
+});
+Object.defineProperty(exports, "cloneLayout", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.cloneLayout; }
+});
+Object.defineProperty(exports, "cloneLayoutItem", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.cloneLayoutItem; }
+});
+Object.defineProperty(exports, "getCompactor", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.getCompactor; }
+});
+Object.defineProperty(exports, "getLayoutItem", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.getLayoutItem; }
+});
+Object.defineProperty(exports, "horizontalCompactor", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.horizontalCompactor; }
+});
+Object.defineProperty(exports, "noCompactor", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.noCompactor; }
+});
+Object.defineProperty(exports, "setTopLeft", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.setTopLeft; }
+});
+Object.defineProperty(exports, "setTransform", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.setTransform; }
+});
+Object.defineProperty(exports, "verticalCompactor", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.verticalCompactor; }
+});
+Object.defineProperty(exports, "calcGridItemPosition", {
+  enumerable: true,
+  get: function () { return chunkF6NQPYKT_js.calcGridItemPosition; }
+});
+Object.defineProperty(exports, "calcWH", {
+  enumerable: true,
+  get: function () { return chunkF6NQPYKT_js.calcWH; }
+});
+Object.defineProperty(exports, "calcXY", {
+  enumerable: true,
+  get: function () { return chunkF6NQPYKT_js.calcXY; }
+});
+//# sourceMappingURL=react.js.map
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"react.js"}

package/dist/react.mjs

@@ -0,0 +1,7 @@
+export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, useContainerWidth, useGridLayout, useResponsiveLayout } from './chunk-ZCXE6SR5.mjs';
+import './chunk-ZWN22PS2.mjs';
+export { GridItem, GridLayout, ResponsiveGridLayout } from './chunk-R35HZZTA.mjs';
+export { bottom, cloneLayout, cloneLayoutItem, getCompactor, getLayoutItem, horizontalCompactor, noCompactor, setTopLeft, setTransform, verticalCompactor } from './chunk-4HNUMWQK.mjs';
+export { calcGridItemPosition, calcWH, calcXY } from './chunk-2KUHNJXF.mjs';
+//# sourceMappingURL=react.mjs.map
+//# sourceMappingURL=react.mjs.map

package/dist/react.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"react.mjs"}

package/dist/responsive-C4L1ESlm.d.ts

@@ -0,0 +1,145 @@
+import { a as LayoutItem, L as Layout, C as CompactType, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-Cxf4nHNr.js';
+
+/**
+ * Collision detection utilities for grid layouts.
+ *
+ * These functions determine if and where layout items overlap.
+ */
+
+/**
+ * Check if two layout items collide (overlap).
+ *
+ * Two items collide if their bounding boxes overlap and they are
+ * not the same item.
+ *
+ * @param l1 - First layout item
+ * @param l2 - Second layout item
+ * @returns true if the items collide
+ */
+declare function collides(l1: LayoutItem, l2: LayoutItem): boolean;
+/**
+ * Find the first item in the layout that collides with the given item.
+ *
+ * @param layout - Layout to search
+ * @param layoutItem - Item to check for collisions
+ * @returns The first colliding item, or undefined if none
+ */
+declare function getFirstCollision(layout: Layout, layoutItem: LayoutItem): LayoutItem | undefined;
+/**
+ * Find all items in the layout that collide with the given item.
+ *
+ * @param layout - Layout to search
+ * @param layoutItem - Item to check for collisions
+ * @returns Array of all colliding items (may be empty)
+ */
+declare function getAllCollisions(layout: Layout, layoutItem: LayoutItem): LayoutItem[];
+
+/**
+ * Sorting utilities for grid layouts.
+ *
+ * These functions sort layout items for compaction and iteration.
+ */
+
+/**
+ * Sort layout items based on the compaction type.
+ *
+ * - Vertical compaction: sort by row (y) then column (x)
+ * - Horizontal compaction: sort by column (x) then row (y)
+ * - No compaction (null): return original order
+ *
+ * Does not modify the original layout.
+ *
+ * @param layout - Layout to sort
+ * @param compactType - Type of compaction
+ * @returns Sorted layout
+ */
+declare function sortLayoutItems(layout: Layout, compactType: CompactType): LayoutItem[];
+/**
+ * Sort layout items by row ascending, then column ascending.
+ *
+ * Items are ordered from top-left to bottom-right, row by row.
+ * This is the natural reading order for vertical compaction.
+ *
+ * Does not modify the original layout.
+ *
+ * @param layout - Layout to sort
+ * @returns Sorted array of layout items
+ */
+declare function sortLayoutItemsByRowCol(layout: Layout): LayoutItem[];
+/**
+ * Sort layout items by column ascending, then row ascending.
+ *
+ * Items are ordered from top-left to bottom-right, column by column.
+ * This is the natural order for horizontal compaction.
+ *
+ * Does not modify the original layout.
+ *
+ * @param layout - Layout to sort
+ * @returns Sorted array of layout items
+ */
+declare function sortLayoutItemsByColRow(layout: Layout): LayoutItem[];
+
+/**
+ * Responsive layout utilities.
+ *
+ * Functions for handling responsive breakpoints and layout generation.
+ */
+
+/**
+ * Sort breakpoints by width (ascending).
+ *
+ * Returns an array of breakpoint names sorted from smallest to largest.
+ * E.g., ['xxs', 'xs', 'sm', 'md', 'lg']
+ *
+ * @param breakpoints - Map of breakpoint names to widths
+ * @returns Sorted array of breakpoint names
+ */
+declare function sortBreakpoints<B extends Breakpoint>(breakpoints: Breakpoints<B>): B[];
+/**
+ * Get the active breakpoint for a given width.
+ *
+ * Returns the highest breakpoint that is valid for the width (width > breakpoint).
+ *
+ * @param breakpoints - Map of breakpoint names to widths
+ * @param width - Container width in pixels
+ * @returns Active breakpoint name
+ */
+declare function getBreakpointFromWidth<B extends Breakpoint>(breakpoints: Breakpoints<B>, width: number): B;
+/**
+ * Get the column count for a breakpoint.
+ *
+ * @param breakpoint - Breakpoint name
+ * @param cols - Map of breakpoint names to column counts
+ * @returns Number of columns for the breakpoint
+ * @throws Error if breakpoint is not defined in cols
+ */
+declare function getColsFromBreakpoint<B extends Breakpoint>(breakpoint: B, cols: Breakpoints<B>): number;
+/**
+ * Find or generate a layout for a breakpoint.
+ *
+ * If a layout exists for the breakpoint, returns a clone.
+ * Otherwise, generates a new layout from the nearest larger breakpoint.
+ *
+ * @param layouts - Existing layouts by breakpoint
+ * @param breakpoints - Breakpoint definitions
+ * @param breakpoint - Target breakpoint
+ * @param lastBreakpoint - Previous breakpoint (for fallback)
+ * @param cols - Column count for the target breakpoint
+ * @param compactType - Compaction type
+ * @returns Layout for the breakpoint
+ */
+declare function findOrGenerateResponsiveLayout<B extends Breakpoint>(layouts: ResponsiveLayouts<B>, breakpoints: Breakpoints<B>, breakpoint: B, lastBreakpoint: B, cols: number, compactType: CompactType): Layout;
+type IndentationValue<B extends Breakpoint> = readonly [number, number] | Partial<Record<B, readonly [number, number]>>;
+/**
+ * Get margin or padding value for a breakpoint.
+ *
+ * Supports both fixed values ([x, y]) and breakpoint-specific values
+ * ({ lg: [x, y], md: [x, y], ... }).
+ *
+ * @param value - Fixed value or breakpoint-specific map
+ * @param breakpoint - Current breakpoint
+ * @returns Margin/padding tuple [x, y]
+ */
+declare function getIndentationValue<B extends Breakpoint>(value: IndentationValue<B>, breakpoint: B): readonly [number, number];
+
+export { getAllCollisions as a, sortLayoutItemsByRowCol as b, collides as c, sortLayoutItemsByColRow as d, getBreakpointFromWidth as e, getColsFromBreakpoint as f, getFirstCollision as g, findOrGenerateResponsiveLayout as h, sortBreakpoints as i, getIndentationValue as j, sortLayoutItems as s };