react-grid-layout 1.5.3 → 2.0.0

package/dist/responsive-CJxefsYw.d.mts

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

package/dist/types-Cxf4nHNr.d.mts

@@ -0,0 +1,375 @@
+/**
+ * Core types for react-grid-layout v2
+ *
+ * These types are framework-agnostic and define the data structures
+ * used by the layout algorithms.
+ */
+/**
+ * Axis identifiers for resize handles.
+ * - Cardinal: 'n', 's', 'e', 'w' (north, south, east, west)
+ * - Diagonal: 'ne', 'nw', 'se', 'sw'
+ */
+type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
+/**
+ * A single item in the grid layout.
+ *
+ * Position (x, y) is in grid units, not pixels.
+ * Size (w, h) is in grid units.
+ */
+interface LayoutItem {
+    /** Unique identifier for this item */
+    i: string;
+    /** X position in grid units (0-indexed from left) */
+    x: number;
+    /** Y position in grid units (0-indexed from top) */
+    y: number;
+    /** Width in grid units */
+    w: number;
+    /** Height in grid units */
+    h: number;
+    /** Minimum width in grid units */
+    minW?: number;
+    /** Minimum height in grid units */
+    minH?: number;
+    /** Maximum width in grid units */
+    maxW?: number;
+    /** Maximum height in grid units */
+    maxH?: number;
+    /**
+     * If true, item cannot be dragged or resized, and other items
+     * will move around it during compaction.
+     */
+    static?: boolean;
+    /**
+     * If false, item cannot be dragged (but may still be resizable).
+     * Overrides grid-level isDraggable for this item.
+     */
+    isDraggable?: boolean;
+    /**
+     * If false, item cannot be resized (but may still be draggable).
+     * Overrides grid-level isResizable for this item.
+     */
+    isResizable?: boolean;
+    /**
+     * Which resize handles to show for this item.
+     * Overrides grid-level resizeHandles for this item.
+     */
+    resizeHandles?: ResizeHandleAxis[];
+    /**
+     * If true, item is constrained to the grid container bounds.
+     * Overrides grid-level isBounded for this item.
+     */
+    isBounded?: boolean;
+    /**
+     * Internal flag set during drag/resize operations to indicate
+     * the item has moved from its original position.
+     * @internal
+     */
+    moved?: boolean;
+}
+/**
+ * A layout is a readonly array of layout items.
+ * Layouts should be treated as immutable.
+ */
+type Layout = readonly LayoutItem[];
+/**
+ * Pixel position and size of an element.
+ */
+interface Position {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+/**
+ * Partial position (just coordinates, no size).
+ */
+interface PartialPosition {
+    left: number;
+    top: number;
+}
+/**
+ * Size in pixels.
+ */
+interface Size {
+    width: number;
+    height: number;
+}
+/**
+ * Position when dropping an external element onto the grid.
+ */
+interface DroppingPosition {
+    left: number;
+    top: number;
+    e: Event;
+}
+/**
+ * Data provided by react-draggable during drag operations.
+ */
+interface ReactDraggableCallbackData {
+    node: HTMLElement;
+    x?: number;
+    y?: number;
+    deltaX: number;
+    deltaY: number;
+    lastX?: number;
+    lastY?: number;
+}
+/**
+ * Grid-level drag event data.
+ */
+interface GridDragEvent {
+    e: Event;
+    node: HTMLElement;
+    newPosition: PartialPosition;
+}
+/**
+ * Grid-level resize event data.
+ */
+interface GridResizeEvent {
+    e: Event;
+    node: HTMLElement;
+    size: Size;
+    handle: ResizeHandleAxis;
+}
+/**
+ * Drag-over event with layer coordinates.
+ */
+interface DragOverEvent extends MouseEvent {
+    nativeEvent: Event & {
+        layerX: number;
+        layerY: number;
+    };
+}
+/**
+ * Type of compaction to apply to the layout.
+ * - 'vertical': Items compact upward (default)
+ * - 'horizontal': Items compact leftward
+ * - null: No compaction (free-form positioning)
+ */
+type CompactType = "horizontal" | "vertical" | null;
+/**
+ * Standard callback signature for layout change events.
+ *
+ * @param layout - The current layout after the change
+ * @param oldItem - The item before the change (null if not applicable)
+ * @param newItem - The item after the change (null if not applicable)
+ * @param placeholder - The placeholder item during drag/resize (null at start)
+ * @param event - The DOM event that triggered the change
+ * @param element - The DOM element being manipulated (null if not applicable)
+ */
+type EventCallback = (layout: Layout, oldItem: LayoutItem | null, newItem: LayoutItem | null, placeholder: LayoutItem | null, event: Event, element: HTMLElement | null) => void;
+/**
+ * Callback when layout changes for any reason.
+ */
+type OnLayoutChangeCallback = (layout: Layout) => void;
+/**
+ * Interface for layout compaction strategies.
+ *
+ * Implement this interface to create custom compaction algorithms.
+ *
+ * @example
+ * ```typescript
+ * const myCompactor: Compactor = {
+ *   type: 'vertical',
+ *   allowOverlap: false,
+ *   compact(layout, cols) {
+ *     // Custom compaction logic
+ *     return compactedLayout;
+ *   },
+ *   onMove(layout, item, x, y, cols) {
+ *     // Handle item movement
+ *     return updatedLayout;
+ *   }
+ * };
+ * ```
+ */
+interface Compactor {
+    /** Compaction type identifier */
+    readonly type: CompactType;
+    /** Whether overlapping items are allowed */
+    readonly allowOverlap: boolean;
+    /** Whether to prevent collisions instead of pushing items */
+    readonly preventCollision?: boolean;
+    /**
+     * Compact the layout.
+     *
+     * @param layout - The layout to compact
+     * @param cols - Number of columns in the grid
+     * @returns The compacted layout
+     */
+    compact(layout: Layout, cols: number): Layout;
+    /**
+     * Handle item movement, returning the updated layout.
+     *
+     * @param layout - Current layout
+     * @param item - The item being moved
+     * @param x - New x position
+     * @param y - New y position
+     * @param cols - Number of columns
+     * @returns Updated layout after the move
+     */
+    onMove(layout: Layout, item: LayoutItem, x: number, y: number, cols: number): Layout;
+}
+/**
+ * Interface for CSS positioning strategies.
+ *
+ * Implement this interface to customize how items are positioned in the DOM.
+ * Built-in strategies: transformStrategy, absoluteStrategy.
+ *
+ * @example
+ * ```typescript
+ * // Use transform-based positioning (default, better performance)
+ * <GridLayout positionStrategy={transformStrategy} />
+ *
+ * // Use top/left positioning (for environments where transforms cause issues)
+ * <GridLayout positionStrategy={absoluteStrategy} />
+ *
+ * // Use scaled transforms (for scaled containers)
+ * <GridLayout positionStrategy={createScaledStrategy(0.5)} />
+ * ```
+ */
+interface PositionStrategy {
+    /** Strategy type identifier */
+    readonly type: "transform" | "absolute";
+    /** Scale factor for drag/resize calculations */
+    readonly scale: number;
+    /**
+     * Convert pixel position to CSS style object.
+     *
+     * @param pos - Position in pixels
+     * @returns CSS properties for positioning the element
+     */
+    calcStyle(pos: Position): React.CSSProperties;
+    /**
+     * Calculate position during drag operations, accounting for transforms and scale.
+     *
+     * @param clientX - Mouse client X position
+     * @param clientY - Mouse client Y position
+     * @param offsetX - Offset from element origin X
+     * @param offsetY - Offset from element origin Y
+     * @returns Adjusted left/top position
+     */
+    calcDragPosition(clientX: number, clientY: number, offsetX: number, offsetY: number): PartialPosition;
+}
+/**
+ * Grid measurement configuration.
+ * Groups all grid metrics (columns, row height, margins).
+ */
+interface GridConfig {
+    /** Number of columns in the grid (default: 12) */
+    cols: number;
+    /** Height of a single row in pixels (default: 150) */
+    rowHeight: number;
+    /** [horizontal, vertical] margin between items in pixels (default: [10, 10]) */
+    margin: readonly [number, number];
+    /** [horizontal, vertical] padding inside the container (default: null, uses margin) */
+    containerPadding: readonly [number, number] | null;
+    /** Maximum number of rows (default: Infinity) */
+    maxRows: number;
+}
+/** Default grid configuration */
+declare const defaultGridConfig: GridConfig;
+/**
+ * Drag behavior configuration.
+ * Groups all drag-related settings.
+ */
+interface DragConfig {
+    /** Whether items can be dragged (default: true) */
+    enabled: boolean;
+    /** Whether items are bounded to the container (default: false) */
+    bounded: boolean;
+    /** CSS selector for drag handle (e.g., '.drag-handle') */
+    handle?: string;
+    /** CSS selector for elements that should not trigger drag */
+    cancel?: string;
+    /**
+     * Minimum pixels to move before drag starts.
+     * Helps distinguish click from drag (fixes #1341, #1401).
+     * @default 3
+     */
+    threshold: number;
+}
+/** Default drag configuration */
+declare const defaultDragConfig: DragConfig;
+/**
+ * Resize behavior configuration.
+ * Groups all resize-related settings.
+ */
+interface ResizeConfig {
+    /** Whether items can be resized (default: true) */
+    enabled: boolean;
+    /** Which resize handles to show (default: ['se']) */
+    handles: readonly ResizeHandleAxis[];
+    /**
+     * Custom resize handle component.
+     * Can be a React node or a function that receives the axis.
+     */
+    handleComponent?: React.ReactNode | ((axis: ResizeHandleAxis, ref: React.Ref<HTMLElement>) => React.ReactNode);
+}
+/** Default resize configuration */
+declare const defaultResizeConfig: ResizeConfig;
+/**
+ * Drop configuration (for dropping external elements).
+ * Groups all drop-related settings.
+ */
+interface DropConfig {
+    /** Whether external elements can be dropped on the grid (default: false) */
+    enabled: boolean;
+    /** Default size for dropped items (default: { w: 1, h: 1 }) */
+    defaultItem: {
+        w: number;
+        h: number;
+    };
+    /**
+     * Called when dragging over the grid.
+     * Return dimensions to override defaultItem, or false to reject the drop.
+     */
+    onDragOver?: (e: DragEvent) => {
+        w?: number;
+        h?: number;
+    } | false | void;
+}
+/** Default drop configuration */
+declare const defaultDropConfig: DropConfig;
+/**
+ * Breakpoint name (e.g., 'lg', 'md', 'sm', 'xs', 'xxs').
+ */
+type Breakpoint = string;
+/**
+ * Map of breakpoint name to pixel width.
+ * Generic type B allows custom breakpoint strings.
+ */
+type Breakpoints<B extends Breakpoint = Breakpoint> = Record<B, number>;
+/**
+ * Map of breakpoint name to number of columns.
+ * Generic type B allows custom breakpoint strings.
+ */
+type BreakpointCols<B extends Breakpoint = Breakpoint> = Record<B, number>;
+/**
+ * Map of breakpoint name to layout.
+ * Generic type B allows custom breakpoint strings.
+ */
+type ResponsiveLayouts<B extends Breakpoint = Breakpoint> = Partial<Record<B, Layout>>;
+/**
+ * Callback when breakpoint changes.
+ */
+type OnBreakpointChangeCallback<B extends Breakpoint = Breakpoint> = (newBreakpoint: B, cols: number) => void;
+/**
+ * Makes all properties in T mutable (removes readonly).
+ */
+type Mutable<T> = {
+    -readonly [P in keyof T]: T[P];
+};
+/**
+ * Deep partial - all properties and nested properties are optional.
+ */
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+/**
+ * Extract the element type from an array type.
+ */
+type ArrayElement<T> = T extends readonly (infer U)[] ? U : never;
+
+export { type ArrayElement as A, type Breakpoint as B, type CompactType as C, type DroppingPosition as D, type EventCallback as E, type GridDragEvent as G, type Layout as L, type Mutable as M, type OnLayoutChangeCallback as O, type Position as P, type ResponsiveLayouts as R, type Size as S, type LayoutItem as a, type Breakpoints as b, type Compactor as c, type ResizeHandleAxis as d, type GridResizeEvent as e, type PartialPosition as f, type ReactDraggableCallbackData as g, type DragOverEvent as h, type PositionStrategy as i, type GridConfig as j, type DragConfig as k, type ResizeConfig as l, type DropConfig as m, type BreakpointCols as n, type OnBreakpointChangeCallback as o, type DeepPartial as p, defaultGridConfig as q, defaultDragConfig as r, defaultResizeConfig as s, defaultDropConfig as t };