Add multidimensional Reorder support

[mattgperry]

Summary

• add axis=\"xy\" support to Reorder.Group and automatically detect one- or two-dimensional layouts when axis is omitted
• reorder by the grid cell containing the dragged item's center while preserving unmeasured values
• cover grid behavior with unit tests and React 18/19 browser tests

Root cause

Reorder only stored one scalar layout axis and only compared adjacent items on that axis, so wrapped layouts had no cross-axis measurements or target selection.

Test plan

• yarn build
• targeted Reorder Jest tests (8 tests)
• Cypress reorder-grid.ts with React 18
• Cypress reorder-grid.ts with React 19
• ESLint and Prettier checks for changed files

Fixes #1400

Made with Cursor

[greptile-apps]

Greptile Summary

The PR extends Reorder to support explicit and automatically detected two-dimensional layouts.

• Stores complete item layout boxes and infers "x", "y", or "xy" from measured geometry.
• Uses dragged-item center hit-testing to select grid targets while retaining unmeasured values.
• Enables two-axis dragging and velocity-based auto-scroll axis selection.
• Adds unit and browser coverage for grid reordering.

Confidence Score: 5/5

The PR appears safe to merge, with no concrete changed-code defect identified.

The new axis detection, two-dimensional drag wiring, grid target selection, and preservation of unmeasured values form a consistent flow covered by focused unit and browser tests.

Important Files Changed

Filename	Overview
packages/framer-motion/src/components/Reorder/Group.tsx	Replaces scalar, render-local ordering with persistent full-box measurements, automatic axis detection, and measured-value remapping.
packages/framer-motion/src/components/Reorder/Item.tsx	Enables two-axis dragging and forwards point offsets and velocity vectors into reorder selection.
packages/framer-motion/src/components/Reorder/utils/check-reorder.ts	Retains adjacent midpoint logic for one-dimensional lists and adds center-in-cell targeting for grids.
packages/framer-motion/src/components/Reorder/utils/detect-axis.ts	Infers horizontal, vertical, or two-dimensional layout from separation among measured item boxes.
packages/framer-motion/src/components/Reorder/tests/index.test.tsx	Updates context calls for point vectors and verifies explicit and inferred grid reordering.
packages/framer-motion/src/components/Reorder/utils/tests/check-reorder.test.ts	Covers axis inference, grid target selection, and preservation of single-axis thresholds.
packages/framer-motion/cypress/integration/reorder-grid.ts	Adds browser coverage demonstrating automatic two-dimensional reorder behavior.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  A["Reorder.Item layout measurement"] --> B["Reorder.Group layout map"]
  B --> C["Detect x, y, or xy axis"]
  D["Drag offset and velocity"] --> E["checkReorder"]
  C --> E
  E --> F{"Single-axis or grid?"}
  F -->|x / y| G["Cross adjacent item midpoint"]
  F -->|xy| H["Find cell containing dragged center"]
  G --> I["Remap measured values into full values array"]
  H --> I
  I --> J["onReorder(newValues)"]

Loading

_{Reviews (1): Last reviewed commit: "Fix #1400: Add multidimensional Reorder ..." | Re-trigger Greptile}