Function GridItem

src/react/components/GridItem.tsx:194–881

(props: GridItemProps)

 * Wraps a child element with drag and resize functionality.
 */
export function GridItem(props: GridItemProps): ReactElement {
  const {
    children,
    cols,
    containerWidth,
    margin,
    containerPadding,
    rowHeight,
    maxRows,
    isDraggable,
    isResizable,
    isBounded,
    static: isStatic,
    useCSSTransforms = true,
    usePercentages = false,
    transformScale = 1,
    positionStrategy,
    dragThreshold = 0,
    droppingPosition,
    className = "",
    style,
    handle = "",
    cancel = "",
    x,
    y,
    w,
    h,
    minW = 1,
    maxW = Infinity,
    minH = 1,
    maxH = Infinity,
    i,
    resizeHandles,
    resizeHandle,
    constraints = defaultConstraints,
    layoutItem,
    layout = [],
    onDragStart: onDragStartProp,
    onDrag: onDragProp,
    onDragStop: onDragStopProp,
    onResizeStart: onResizeStartProp,
    onResize: onResizeProp,
    onResizeStop: onResizeStopProp
  } = props;

  // State
  const [dragging, setDragging] = useState(false);
  const [resizing, setResizing] = useState(false);

  // Refs for position tracking (avoid state for React 18 batching)
  const elementRef = useRef<HTMLDivElement>(null);
  const dragPositionRef = useRef<PartialPosition>({ left: 0, top: 0 });
  const resizePositionRef = useRef<Position>({
    top: 0,
    left: 0,
    width: 0,
    height: 0
  });