react-grid-layout 1.5.2 → 2.0.0

package/dist/position-Dk2b4ZMS.d.ts

@@ -0,0 +1,319 @@
+import { L as Layout, a as LayoutItem, C as CompactType, M as Mutable, c as Compactor, P as Position, d as ResizeHandleAxis, i as PositionStrategy } from './types-Cxf4nHNr.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 prevent movement if it causes collision
+ * @param compactType - Compaction type for collision resolution
+ * @param cols - Number of columns in the grid
+ * @param allowOverlap - True to allow items to overlap
+ * @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')
+ */
+declare function resolveCompactionCollision(layout: Layout, item: LayoutItem, moveToCoord: number, axis: "x" | "y"): 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.
+ *
+ * @param compactType - 'vertical', 'horizontal', or null
+ * @param allowOverlap - Whether to allow overlapping items
+ * @returns The appropriate Compactor
+ */
+declare function getCompactor(compactType: "vertical" | "horizontal" | null, 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 };

package/dist/react.d.mts

@@ -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.mjs';
+export { P as Position } from './types-Cxf4nHNr.mjs';
+export { E as EventCallback, G as GridLayout, a as GridLayoutProps, R as ResponsiveGridLayout, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-D6lFRE3f.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-BmN1z36J.mjs';
+export { c as calcGridItemPosition, b as calcWH, a as calcXY } from './calculate-CwYDW8na.mjs';
+
+/**
+ * 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 };