react-grid-layout/dist/legacy.mjs

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

import { GridLayout, ResponsiveGridLayout } from './chunk-XM2M6TC6.mjs';
import { createScaledStrategy, getCompactor, defaultConstraints, containerBounds, absoluteStrategy, transformStrategy } from './chunk-XYPIYYYQ.mjs';
import './chunk-AWM66AWF.mjs';
import { useState, useRef, useEffect } from 'react';
import { jsx } from 'react/jsx-runtime';
import clsx from 'clsx';

function ReactGridLayout(props) {
  const {
    // Required
    children,
    width,
    // Grid measurement
    cols = 12,
    rowHeight = 150,
    maxRows = Infinity,
    margin = [10, 10],
    containerPadding = null,
    // Layout data
    layout,
    droppingItem,
    // Compaction
    compactType: compactTypeProp,
    preventCollision = false,
    allowOverlap = false,
    verticalCompact,
    // Drag behavior
    isDraggable = true,
    isBounded = false,
    draggableHandle,
    draggableCancel,
    // Resize behavior
    isResizable = true,
    resizeHandles = ["se"],
    resizeHandle,
    // Drop behavior
    isDroppable = false,
    // Position
    useCSSTransforms = true,
    transformScale = 1,
    // Container props
    autoSize,
    className,
    style,
    innerRef,
    // Callbacks
    onLayoutChange,
    onDragStart,
    onDrag,
    onDragStop,
    onResizeStart,
    onResize,
    onResizeStop,
    onDrop,
    onDropDragOver
  } = props;
  let compactType = compactTypeProp === void 0 ? "vertical" : compactTypeProp;
  if (verticalCompact === false) {
    if (process.env["NODE_ENV"] !== "production") {
      console.warn(
        '`verticalCompact` on <ReactGridLayout> is deprecated and will be removed soon. Use `compactType`: "horizontal" | "vertical" | null.'
      );
    }
    compactType = null;
  }
  const gridConfig = {
    cols,
    rowHeight,
    maxRows,
    margin,
    containerPadding
  };
  const dragConfig = {
    enabled: isDraggable,
    bounded: isBounded,
    handle: draggableHandle,
    cancel: draggableCancel,
    // Set threshold to 0 for backwards compatibility with v1 API
    // v2 API defaults to 3px threshold (fixes #1341, #1401)
    threshold: 0
  };
  const resizeConfig = {
    enabled: isResizable,
    handles: resizeHandles,
    handleComponent: resizeHandle
  };
  const dropConfig = {
    enabled: isDroppable
  };
  let positionStrategy;
  if (!useCSSTransforms) {
    positionStrategy = absoluteStrategy;
  } else if (transformScale !== 1) {
    positionStrategy = createScaledStrategy(transformScale);
  } else {
    positionStrategy = transformStrategy;
  }
  const compactor = getCompactor(compactType, allowOverlap, preventCollision);
  const constraints = isBounded ? [...defaultConstraints, containerBounds] : defaultConstraints;
  return /* @__PURE__ */ jsx(
    GridLayout,
    {
      width,
      gridConfig,
      dragConfig,
      resizeConfig,
      dropConfig,
      positionStrategy,
      compactor,
      constraints,
      layout,
      droppingItem,
      autoSize,
      className,
      style,
      innerRef,
      onLayoutChange,
      onDragStart,
      onDrag,
      onDragStop,
      onResizeStart,
      onResize,
      onResizeStop,
      onDrop,
      onDropDragOver,
      children
    }
  );
}
ReactGridLayout.displayName = "ReactGridLayout";
var ReactGridLayout_default = ReactGridLayout;
function ResponsiveReactGridLayout(props) {
  const {
    // Required
    children,
    width,
    // Responsive-specific
    breakpoint,
    breakpoints,
    cols,
    layouts,
    onBreakpointChange,
    onLayoutChange,
    onWidthChange,
    // Grid measurement
    rowHeight,
    maxRows,
    margin,
    containerPadding,
    // Layout data
    droppingItem,
    // Compaction
    compactType: compactTypeProp,
    preventCollision = false,
    allowOverlap = false,
    verticalCompact,
    // Drag behavior
    isDraggable = true,
    isBounded = false,
    draggableHandle,
    draggableCancel,
    // Resize behavior
    isResizable = true,
    resizeHandles = ["se"],
    resizeHandle,
    // Drop behavior
    isDroppable = false,
    // Position
    useCSSTransforms = true,
    transformScale = 1,
    // Container props
    autoSize,
    className,
    style,
    innerRef,
    // Callbacks
    onDragStart,
    onDrag,
    onDragStop,
    onResizeStart,
    onResize,
    onResizeStop,
    onDrop,
    onDropDragOver
  } = props;
  let compactType = compactTypeProp === void 0 ? "vertical" : compactTypeProp;
  if (verticalCompact === false) {
    if (process.env["NODE_ENV"] !== "production") {
      console.warn(
        '`verticalCompact` on <ResponsiveReactGridLayout> is deprecated and will be removed soon. Use `compactType`: "horizontal" | "vertical" | null.'
      );
    }
    compactType = null;
  }
  const dragConfig = {
    enabled: isDraggable,
    bounded: isBounded,
    handle: draggableHandle,
    cancel: draggableCancel
  };
  const resizeConfig = {
    enabled: isResizable,
    handles: resizeHandles,
    handleComponent: resizeHandle
  };
  const dropConfig = {
    enabled: isDroppable
  };
  let positionStrategy;
  if (!useCSSTransforms) {
    positionStrategy = absoluteStrategy;
  } else if (transformScale !== 1) {
    positionStrategy = createScaledStrategy(transformScale);
  } else {
    positionStrategy = transformStrategy;
  }
  const compactor = getCompactor(compactType, allowOverlap, preventCollision);
  return /* @__PURE__ */ jsx(
    ResponsiveGridLayout,
    {
      width,
      breakpoint,
      breakpoints,
      cols,
      layouts,
      rowHeight,
      maxRows,
      margin,
      containerPadding,
      compactor,
      dragConfig,
      resizeConfig,
      dropConfig,
      positionStrategy,
      droppingItem,
      autoSize,
      className,
      style,
      innerRef,
      onBreakpointChange,
      onLayoutChange,
      onWidthChange,
      onDragStart,
      onDrag,
      onDragStop,
      onResizeStart,
      onResize,
      onResizeStop,
      onDrop,
      onDropDragOver,
      children
    }
  );
}
ResponsiveReactGridLayout.displayName = "ResponsiveReactGridLayout";
var ResponsiveReactGridLayout_default = ResponsiveReactGridLayout;
var layoutClassName = "react-grid-layout";
function WidthProvider(ComposedComponent) {
  function WidthProviderWrapper(props) {
    const { measureBeforeMount = false, className, style, ...rest } = props;
    const [width, setWidth] = useState(1280);
    const [mounted, setMounted] = useState(false);
    const elementRef = useRef(null);
    const resizeObserverRef = useRef(null);
    useEffect(() => {
      setMounted(true);
    }, []);
    useEffect(() => {
      const node = elementRef.current;
      if (!(node instanceof HTMLElement)) return;
      const observer = new ResizeObserver((entries) => {
        if (entries[0]) {
          const newWidth = entries[0].contentRect.width;
          setWidth(newWidth);
        }
      });
      observer.observe(node);
      resizeObserverRef.current = observer;
      return () => {
        observer.unobserve(node);
        observer.disconnect();
      };
    }, [mounted]);
    if (measureBeforeMount && !mounted) {
      return /* @__PURE__ */ jsx(
        "div",
        {
          className: clsx(className, layoutClassName),
          style,
          ref: elementRef
        }
      );
    }
    return /* @__PURE__ */ jsx(
      ComposedComponent,
      {
        innerRef: elementRef,
        className,
        style,
        ...rest,
        width
      }
    );
  }
  WidthProviderWrapper.displayName = `WidthProvider(${ComposedComponent.displayName || ComposedComponent.name || "Component"})`;
  return WidthProviderWrapper;
}

export { ReactGridLayout, ResponsiveReactGridLayout_default as Responsive, ResponsiveReactGridLayout, WidthProvider, ReactGridLayout_default as default };
//# sourceMappingURL=legacy.mjs.map
//# sourceMappingURL=legacy.mjs.map