react-grid-layout/dist/legacy.d.mts

A draggable and resizable grid layout with responsive breakpoints, for React.

import * as react_jsx_runtime from 'react/jsx-runtime';
import React__default, { ComponentType } from 'react';
import { a as GridLayoutProps, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-DqK__izz.mjs';
import { L as Layout, a as LayoutItem, C as CompactType, d as ResizeHandleAxis, B as Breakpoint, b as Breakpoints, R as ResponsiveLayouts } from './types-BiXsdXr7.mjs';

/**
 * Legacy props interface for backwards compatibility with v1 API.
 * These flat props are converted to composable interfaces internally.
 */
interface LegacyReactGridLayoutProps {
    children: React__default.ReactNode;
    width: number;
    cols?: number;
    rowHeight?: number;
    maxRows?: number;
    margin?: readonly [number, number];
    containerPadding?: readonly [number, number] | null;
    layout?: Layout;
    droppingItem?: LayoutItem;
    compactType?: CompactType;
    preventCollision?: boolean;
    allowOverlap?: boolean;
    /** @deprecated Use compactType instead */
    verticalCompact?: boolean;
    isDraggable?: boolean;
    isBounded?: boolean;
    draggableHandle?: string;
    draggableCancel?: string;
    isResizable?: boolean;
    resizeHandles?: ResizeHandleAxis[];
    resizeHandle?: React__default.ReactElement | ((axis: ResizeHandleAxis, ref: React__default.Ref<HTMLElement>) => React__default.ReactElement);
    isDroppable?: boolean;
    useCSSTransforms?: boolean;
    transformScale?: number;
    autoSize?: boolean;
    className?: string;
    style?: React__default.CSSProperties;
    innerRef?: React__default.Ref<HTMLDivElement>;
    onLayoutChange?: (layout: Layout) => void;
    onDragStart?: GridLayoutProps["onDragStart"];
    onDrag?: GridLayoutProps["onDrag"];
    onDragStop?: GridLayoutProps["onDragStop"];
    onResizeStart?: GridLayoutProps["onResizeStart"];
    onResize?: GridLayoutProps["onResize"];
    onResizeStop?: GridLayoutProps["onResizeStop"];
    onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;
    onDropDragOver?: (e: React__default.DragEvent) => {
        w?: number;
        h?: number;
    } | false | void;
}
/**
 * ReactGridLayout - Legacy wrapper component
 *
 * Converts v1 flat props to v2 composable interfaces for backwards compatibility.
 */
declare function ReactGridLayout(props: LegacyReactGridLayoutProps): react_jsx_runtime.JSX.Element;
declare namespace ReactGridLayout {
    var displayName: string;
}

/**
 * Legacy props interface for backwards compatibility with v1 API.
 * These flat props are converted to composable interfaces internally.
 */
interface LegacyResponsiveReactGridLayoutProps<B extends Breakpoint = string> {
    children: React__default.ReactNode;
    width: number;
    breakpoint?: B;
    breakpoints?: Breakpoints<B>;
    cols?: Breakpoints<B>;
    layouts?: ResponsiveLayouts<B>;
    onBreakpointChange?: (newBreakpoint: B, cols: number) => void;
    onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;
    onWidthChange?: (containerWidth: number, margin: readonly [number, number], cols: number, containerPadding: readonly [number, number] | null) => void;
    rowHeight?: number;
    maxRows?: number;
    margin?: readonly [number, number] | Partial<Record<B, readonly [number, number]>>;
    containerPadding?: readonly [number, number] | Partial<Record<B, readonly [number, number] | null>> | null;
    droppingItem?: LayoutItem;
    compactType?: CompactType;
    preventCollision?: boolean;
    allowOverlap?: boolean;
    /** @deprecated Use compactType instead */
    verticalCompact?: boolean;
    isDraggable?: boolean;
    isBounded?: boolean;
    draggableHandle?: string;
    draggableCancel?: string;
    isResizable?: boolean;
    resizeHandles?: ResizeHandleAxis[];
    resizeHandle?: React__default.ReactElement | ((axis: ResizeHandleAxis, ref: React__default.Ref<HTMLElement>) => React__default.ReactElement);
    isDroppable?: boolean;
    useCSSTransforms?: boolean;
    transformScale?: number;
    autoSize?: boolean;
    className?: string;
    style?: React__default.CSSProperties;
    innerRef?: React__default.Ref<HTMLDivElement>;
    onDragStart?: ResponsiveGridLayoutProps<B>["onDragStart"];
    onDrag?: ResponsiveGridLayoutProps<B>["onDrag"];
    onDragStop?: ResponsiveGridLayoutProps<B>["onDragStop"];
    onResizeStart?: ResponsiveGridLayoutProps<B>["onResizeStart"];
    onResize?: ResponsiveGridLayoutProps<B>["onResize"];
    onResizeStop?: ResponsiveGridLayoutProps<B>["onResizeStop"];
    onDrop?: (layout: Layout, item: LayoutItem | undefined, e: Event) => void;
    onDropDragOver?: (e: React__default.DragEvent) => {
        w?: number;
        h?: number;
    } | false | void;
}
/**
 * ResponsiveReactGridLayout - Legacy wrapper component
 *
 * Converts v1 flat props to v2 composable interfaces for backwards compatibility.
 */
declare function ResponsiveReactGridLayout<B extends Breakpoint = string>(props: LegacyResponsiveReactGridLayoutProps<B>): react_jsx_runtime.JSX.Element;
declare namespace ResponsiveReactGridLayout {
    var displayName: string;
}

/**
 * WidthProvider HOC
 *
 * A Higher-Order Component that provides width measurement to grid layouts.
 * This wraps any component and provides the container width as a prop.
 */

interface WidthProviderProps {
    /** If true, will not render children until mounted */
    measureBeforeMount?: boolean;
    /** Additional class name */
    className?: string;
    /** Additional styles */
    style?: React__default.CSSProperties;
}
type WithWidthProps<P> = Omit<P, "width"> & WidthProviderProps;
/**
 * WidthProvider - HOC that provides container width
 *
 * A simple HOC that provides facility for listening to container resizes.
 * Wraps the provided component and passes down a `width` prop.
 *
 * @example
 * ```tsx
 * import { GridLayout, WidthProvider } from 'react-grid-layout';
 *
 * const GridLayoutWithWidth = WidthProvider(GridLayout);
 *
 * function MyGrid() {
 *   return (
 *     <GridLayoutWithWidth cols={12} rowHeight={30}>
 *       <div key="a">a</div>
 *     </GridLayoutWithWidth>
 *   );
 * }
 * ```
 */
declare function WidthProvider<P extends {
    width: number;
}>(ComposedComponent: ComponentType<P>): ComponentType<WithWidthProps<P>>;

export { Breakpoint, Breakpoints, CompactType, Layout, LayoutItem, type LegacyReactGridLayoutProps, type LegacyResponsiveReactGridLayoutProps, ReactGridLayout, ResizeHandleAxis, ResponsiveReactGridLayout as Responsive, ResponsiveLayouts, ResponsiveReactGridLayout, WidthProvider, ReactGridLayout as default };