[WEB-5423] revert: update imports for pragmatic-drag-and-drop to use cjs entry points and add TypeScript error handling (#8118)

This commit is contained in:
Prateek Shourya 2025-11-14 19:04:49 +05:30 committed by GitHub
parent 19a0ef490b
commit c04ae51d20
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 18 additions and 4 deletions

View file

@ -1,6 +1,15 @@
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
// @ts-expect-error Due to live server dependencies
import { combine } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/combine.js";
import {
draggable,
dropTargetForElements,
// @ts-expect-error Due to live server dependencies
} from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
import {
attachClosestEdge,
extractClosestEdge,
// @ts-expect-error Due to live server dependencies
} from "@atlaskit/pragmatic-drag-and-drop-hitbox/dist/cjs/closest-edge.js";
import { isEqual } from "lodash-es";
import React, { useEffect, useRef, useState } from "react";
import { DropIndicator } from "../drop-indicator";
@ -30,6 +39,7 @@ const Draggable = ({ children, data, className }: Props) => {
}),
dropTargetForElements({
element: el,
// @ts-expect-error Due to live server dependencies
onDragEnter: (args) => {
setIsDraggedOver(true);
setClosestEdge(extractClosestEdge(args.self.data));
@ -38,7 +48,9 @@ const Draggable = ({ children, data, className }: Props) => {
onDrop: () => {
setIsDraggedOver(false);
},
// @ts-expect-error Due to live server dependencies
canDrop: ({ source }) => !isEqual(source.data, data) && source.data.__uuid__ === data.__uuid__,
// @ts-expect-error Due to live server dependencies
getData: ({ input, element }) =>
attachClosestEdge(data, {
input,

View file

@ -1,4 +1,5 @@
import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
// @ts-expect-error Due to live server dependencies
import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
import React, { Fragment, useEffect, useMemo } from "react";
import { Draggable } from "./draggable";
@ -61,6 +62,7 @@ const moveItem = <T,>(
export const Sortable = <T,>({ data, render, onChange, keyExtractor, containerClassName, id }: Props<T>) => {
useEffect(() => {
const unsubscribe = monitorForElements({
// @ts-expect-error Due to live server dependencies
onDrop({ source, location }) {
const destination = location?.current?.dropTargets[0];
if (!destination) return;