react-grid-layout 1.5.2 → 2.0.0

package/dist/types-Cxf4nHNr.d.ts

@@ -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 };

package/index-dev.js

@@ -0,0 +1,8 @@
+// Development entry point - uses new TypeScript source directly
+module.exports = require("./src/legacy/ReactGridLayout").default;
+module.exports.utils = require("./src/legacy/utils-compat");
+module.exports.calculateUtils = require("./src/legacy/calculate-compat");
+module.exports.Responsive =
+  require("./src/legacy/ResponsiveReactGridLayout").default;
+module.exports.Responsive.utils = require("./src/legacy/responsive-compat");
+module.exports.WidthProvider = require("./src/legacy/WidthProvider").default;

package/package.json

@@ -1,18 +1,84 @@
 {
   "name": "react-grid-layout",
-  "version": "1.5.2",
+  "version": "2.0.0",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./core": {
+      "import": {
+        "types": "./dist/core.d.mts",
+        "default": "./dist/core.mjs"
+      },
+      "require": {
+        "types": "./dist/core.d.ts",
+        "default": "./dist/core.js"
+      }
+    },
+    "./react": {
+      "import": {
+        "types": "./dist/react.d.mts",
+        "default": "./dist/react.mjs"
+      },
+      "require": {
+        "types": "./dist/react.d.ts",
+        "default": "./dist/react.js"
+      }
+    },
+    "./legacy": {
+      "import": {
+        "types": "./dist/legacy.d.mts",
+        "default": "./dist/legacy.mjs"
+      },
+      "require": {
+        "types": "./dist/legacy.d.ts",
+        "default": "./dist/legacy.js"
+      }
+    },
+    "./extras": {
+      "import": {
+        "types": "./dist/extras.d.mts",
+        "default": "./dist/extras.mjs"
+      },
+      "require": {
+        "types": "./dist/extras.d.ts",
+        "default": "./dist/extras.js"
+      }
+    },
+    "./css/styles.css": "./css/styles.css"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "css",
+    "index.js",
+    "index-dev.js"
+  ],
   "scripts": {
     "lint": "make lint",
     "test": "make test",
     "build": "make build",
+    "build:ts": "tsup",
+    "build:ts:watch": "tsup --watch",
+    "typecheck": "tsc --noEmit",
     "build-example": "make build-example",
     "view-example": "make view-example",
     "dev": "make dev",
     "prepublishOnly": "make build",
     "validate": "npm ls",
-    "flow": "flow",
     "fmt": "prettier --write .",
     "fmt:check": "prettier --check ."
   },
@@ -33,9 +99,9 @@
   "author": "Samuel Reed <samuel.trace.reed@gmail.com> (http://strml.net/)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/STRML/react-grid-layout/issues"
+    "url": "https://github.com/react-grid-layout/react-grid-layout/issues"
   },
-  "homepage": "https://github.com/STRML/react-grid-layout",
+  "homepage": "https://github.com/react-grid-layout/react-grid-layout",
   "dependencies": {
     "clsx": "^2.1.1",
     "fast-equals": "^4.0.3",
@@ -52,44 +118,51 @@
     "@babel/core": "^7.27.4",
     "@babel/eslint-parser": "^7.27.5",
     "@babel/plugin-transform-class-properties": "^7.18.6",
-    "@babel/plugin-transform-flow-comments": "^7.27.3",
     "@babel/preset-env": "^7.27.2",
-    "@babel/preset-flow": "^7.27.1",
     "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.28.5",
     "@babel/register": "^7.27.1",
-    "@webpack-cli/serve": "^2.0.5",
-    "babel-jest": "^29.7.0",
-    "babel-loader": "^9.1.3",
+    "@eslint/compat": "^1.2.0",
+    "@eslint/js": "^9.0.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@webpack-cli/serve": "^3.0.1",
+    "babel-jest": "^30.2.0",
+    "babel-loader": "^10.0.0",
     "babel-plugin-preval": "^5.1.0",
-    "css-loader": "^6.8.1",
+    "css-loader": "^7.1.2",
     "ejs": "^3.1.10",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.8",
-    "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.54.0",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-mocha": "^10.2.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-mocha": "^11.2.0",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-unicorn": "^49.0.0",
-    "exports-loader": "^4.0.0",
-    "flow-bin": "^0.172.0",
-    "husky": "^8.0.3",
-    "imports-loader": "^4.0.1",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^15.1.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-unicorn": "^62.0.0",
+    "exports-loader": "^5.0.0",
+    "globals": "^16.0.0",
+    "husky": "^9.1.7",
+    "imports-loader": "^5.0.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "lint-staged": "^16.2.7",
     "lodash": "^4.17.21",
     "opener": "^1.5.2",
     "prettier": "^3.1.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-grab": "^0.0.71",
     "react-hot-loader": "^4.13.1",
     "react-transform-hmr": "^1.0.2",
-    "style-loader": "^3.3.3",
+    "style-loader": "^4.0.0",
     "timsort": "^0.3.0",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.49.0",
+    "webpack": "^5.92.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
   },
   "resolutions": {
     "**/cheerio": "npm:cheerio@1.0.0-rc.12"
@@ -108,11 +181,10 @@
     "setupFilesAfterEnv": [
       "<rootDir>test/util/setupTests.js"
     ],
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ],
     "testMatch": [
-      "<rootDir>/test/spec/*.js"
+      "<rootDir>/test/spec/*.js",
+      "<rootDir>/test/spec/*.ts",
+      "<rootDir>/test/spec/*.tsx"
     ],
     "testEnvironment": "jsdom",
     "testEnvironmentOptions": {
@@ -120,11 +192,32 @@
     },
     "coverageThreshold": {
       "global": {
-        "statements": 77,
-        "branches": 72,
-        "functions": 77,
-        "lines": 78
+        "statements": 65,
+        "branches": 60,
+        "functions": 65,
+        "lines": 65
       }
+    },
+    "transform": {
+      "^.+\\.(js|jsx)$": "babel-jest",
+      "^.+\\.(ts|tsx)$": [
+        "babel-jest",
+        {
+          "presets": [
+            "@babel/preset-typescript"
+          ]
+        }
+      ]
+    },
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json"
+    ],
+    "moduleNameMapper": {
+      "^(\\.{1,2}/.*)\\.js$": "$1"
     }
   },
   "lint-staged": {

package/.babelrc.js

@@ -1,22 +0,0 @@
-// @flow
-
-const es6Compat =
-  process.env.BABEL_ES_COMPAT === "6" || process.env.NODE_ENV === "test";
-
-module.exports = {
-  presets: [
-    [
-      "@babel/preset-env",
-      {
-        targets: es6Compat ? "maintained node versions" : "> 0.25%, not dead"
-      }
-    ],
-    "@babel/react",
-    "@babel/preset-flow"
-  ],
-  plugins: [
-    "@babel/plugin-transform-flow-comments",
-    "@babel/plugin-transform-class-properties",
-    "babel-plugin-preval"
-  ]
-};

package/.browserslistrc

@@ -1,3 +0,0 @@
-> 0.25%
-ie 11
-not dead

package/.eslintignore

@@ -1,4 +0,0 @@
-node_modules/**/*
-build
-dist
-flow-typed

package/.flowconfig

@@ -1,20 +0,0 @@
-[version]
-^0.172.0
-
-[ignore]
-<PROJECT_ROOT>/build/.*
-<PROJECT_ROOT>/dist/.*
-<PROJECT_ROOT>/node_modules/resolve/.*
-<PROJECT_ROOT>/node_modules/.*/resolve/.*
-# Speeds parsing:
-.*/node_modules/@babel.*
-.*/node_modules/babel.*
-
-[include]
-
-[libs]
-flow-typed/
-
-[options]
-emoji=true
-module.use_strict=true

package/.prettierignore

@@ -1,4 +0,0 @@
-dist/
-examples/
-__mocks__/
-flow-typed/

package/.prettierrc

@@ -1,17 +0,0 @@
-{
-  "printWidth": 80,
-  "tabWidth": 2,
-  "useTabs": false,
-  "semi": true,
-  "singleQuote": false,
-  "quoteProps": "as-needed",
-  "jsxSingleQuote": false,
-  "trailingComma": "none",
-  "bracketSpacing": true,
-  "arrowParens": "avoid",
-  "requirePragma": false,
-  "insertPragma": false,
-  "proseWrap": "preserve",
-  "htmlWhitespaceSensitivity": "css",
-  "endOfLine": "auto"
-}