Fix issues with sortable

packages/ui/src/sortable/draggable.tsx

@@ -3,7 +3,8 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { isEqual } from "lodash";
 import { cn } from "../../helpers";
-
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { DropIndicator } from "../drop-indicator";
 type Props = {
   children: React.ReactNode;
   data: any; //@todo make this generic
@@ -14,6 +15,7 @@ const Draggable = ({ children, data, className }: Props) => {
   const [dragging, setDragging] = useState<boolean>(false); // NEW
   const [isDraggedOver, setIsDraggedOver] = useState(false);
 
+  const [closestEdge, setClosestEdge] = useState<string | null>(null);
   useEffect(() => {
     const el = ref.current;
 
@@ -27,19 +29,31 @@ const Draggable = ({ children, data, className }: Props) => {
         }),
         dropTargetForElements({
           element: el,
-          onDragEnter: () => setIsDraggedOver(true),
+          onDragEnter: (args) => {
+            setIsDraggedOver(true);
+            setClosestEdge(extractClosestEdge(args.self.data));
+          },
           onDragLeave: () => setIsDraggedOver(false),
-          onDrop: () => setIsDraggedOver(false),
+          onDrop: () => {
+            setIsDraggedOver(false);
+          },
           canDrop: ({ source }) => !isEqual(source.data, data),
-          getData: () => data,
+          getData: ({ input, element }) =>
+            attachClosestEdge(data, {
+              input,
+              element,
+              allowedEdges: ["top", "bottom"],
+            }),
         })
       );
     }
   }, [data]);
 
   return (
-    <div ref={ref} className={cn(dragging && "opacity-25", isDraggedOver && "bg-custom-background-80", className)}>
+    <div ref={ref} className={cn(dragging && "opacity-25", className)}>
+      {<DropIndicator isVisible={isDraggedOver && closestEdge === "top"} />}
       {children}
+      {<DropIndicator isVisible={isDraggedOver && closestEdge === "bottom"} classNames="absolute w-full" />}
     </div>
   );
 };

packages/ui/src/sortable/sortable.stories.tsx

@@ -13,7 +13,7 @@ type Story = StoryObj<typeof Sortable>;
 
 const data = [
   { id: "1", name: "John Doe" },
-  { id: "2", name: "Jane Doe" },
+  { id: "2", name: "Jane Doe 2" },
   { id: "3", name: "Alice" },
   { id: "4", name: "Bob" },
   { id: "5", name: "Charlie" },
@@ -22,11 +22,11 @@ export const Default: Story = {
   args: {
     data,
     render: (item: any) => (
-      <Draggable data={item} className="rounded-lg">
+      // <Draggable data={item} className="rounded-lg">
-        <div>{item.name}</div>
+      <div className="border ">{item.name}</div>
-      </Draggable>
+      // </Draggable>
     ),
-    onChange: (data) => console.log(data),
+    onChange: (data) => console.log(data.map(({ id }) => id)),
     keyExtractor: (item: any) => item.id,
   },
 };

packages/ui/src/sortable/sortable.tsx

@@ -1,33 +1,55 @@
 import React, { Fragment, useEffect } from "react";
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { Draggable } from "./draggable";
 
 type Props<T> = {
   data: T[];
   render: (item: T, index: number) => React.ReactNode;
   onChange: (data: T[]) => void;
   keyExtractor: (item: T, index: number) => string;
+  containerClassName?: string;
 };
 
-const moveItems = <T,>(data: T[], source: T, destination: T): T[] => {
+const moveItem = <T,>(
+  data: T[],
+  source: T,
+  destination: T & Record<symbol, string>,
+  keyExtractor: (item: T, index: number) => string
+) => {
   const sourceIndex = data.indexOf(source);
-  const destinationIndex = data.indexOf(destination);
+  if (sourceIndex === -1) return data;
 
-  if (sourceIndex === -1 || destinationIndex === -1) return data;
+  const destinationIndex = data.findIndex((item, index) => keyExtractor(item, index) === keyExtractor(destination, 0));
 
+  if (destinationIndex === -1) return data;
+
+  const symbolKey = Reflect.ownKeys(destination).find((key) => key.toString() === "Symbol(closestEdge)");
+  const position = symbolKey ? destination[symbolKey as symbol] : "bottom"; // Add 'as symbol' to cast symbolKey to symbol
   const newData = [...data];
-  newData.splice(sourceIndex, 1);
+  const [movedItem] = newData.splice(sourceIndex, 1);
-  newData.splice(destinationIndex, 0, source);
+
+  let adjustedDestinationIndex = destinationIndex;
+  if (position === "bottom") {
+    adjustedDestinationIndex++;
+  }
+
+  // Prevent moving item out of bounds
+  if (adjustedDestinationIndex > newData.length) {
+    adjustedDestinationIndex = newData.length;
+  }
+
+  newData.splice(adjustedDestinationIndex, 0, movedItem);
 
   return newData;
 };
 
-export const Sortable = <T,>({ data, render, onChange, keyExtractor }: Props<T>) => {
+export const Sortable = <T,>({ data, render, onChange, keyExtractor, containerClassName }: Props<T>) => {
   useEffect(() => {
     const unsubscribe = monitorForElements({
       onDrop({ source, location }) {
         const destination = location?.current?.dropTargets[0];
         if (!destination) return;
-        onChange(moveItems(data, source.data as T, destination.data as T));
+        onChange(moveItem(data, source.data as T, destination.data as T & { closestEdge: string }, keyExtractor));
       },
     });
 
@@ -40,7 +62,9 @@ export const Sortable = <T,>({ data, render, onChange, keyExtractor }: Props<T>)
   return (
     <>
       {data.map((item, index) => (
-        <Fragment key={keyExtractor(item, index)}>{render(item, index)}</Fragment>
+        <Draggable key={keyExtractor(item, index)} data={item} className={containerClassName}>
+          <Fragment>{render(item, index)} </Fragment>
+        </Draggable>
       ))}
     </>
   );

web/components/estimates/points/create-root.tsx

@@ -86,21 +86,19 @@ export const EstimatePointCreateRoot: FC<TEstimatePointCreateRoot> = observer((p
       <Sortable
         data={estimatePoints}
         render={(value: TEstimatePointsObject) => (
-          <Draggable data={value}>
+          <EstimatePointItemPreview
-            <EstimatePointItemPreview
+            workspaceSlug={workspaceSlug}
-              workspaceSlug={workspaceSlug}
+            projectId={projectId}
-              projectId={projectId}
+            estimateId={estimateId}
-              estimateId={estimateId}
+            estimateType={estimateType}
-              estimateType={estimateType}
+            estimatePointId={value?.id}
-              estimatePointId={value?.id}
+            estimatePoints={estimatePoints}
-              estimatePoints={estimatePoints}
+            estimatePoint={value}
-              estimatePoint={value}
+            handleEstimatePointValueUpdate={(estimatePointValue: string) =>
-              handleEstimatePointValueUpdate={(estimatePointValue: string) =>
+              handleEstimatePoint("update", { ...value, value: estimatePointValue })
-                handleEstimatePoint("update", { ...value, value: estimatePointValue })
+            }
-              }
+            handleEstimatePointValueRemove={() => handleEstimatePoint("remove", value)}
-              handleEstimatePointValueRemove={() => handleEstimatePoint("remove", value)}
+          />
-            />
-          </Draggable>
         )}
         onChange={(data: TEstimatePointsObject[]) => handleDragEstimatePoints(data)}
         keyExtractor={(item: TEstimatePointsObject) => item?.id?.toString() || item.value.toString()}

web/components/estimates/points/edit-root.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from "react";
+import { FC, Fragment, useState } from "react";
 import { observer } from "mobx-react";
 import { Plus } from "lucide-react";
 import { TEstimatePointsObject } from "@plane/types";
@@ -74,26 +74,28 @@ export const EstimatePointEditRoot: FC<TEstimatePointEditRoot> = observer((props
   return (
     <div className="space-y-3">
       <div className="text-sm font-medium text-custom-text-200 capitalize">{estimate?.type}</div>
-      <Sortable
+      <div>
-        data={estimatePoints}
+        <Sortable
-        render={(value: TEstimatePointsObject) => (
+          data={estimatePoints}
-          <Draggable data={value}>
+          render={(value: TEstimatePointsObject) => (
-            {value?.id && estimate?.type && (
+            <Fragment>
-              <EstimatePointItemPreview
+              {value?.id && estimate?.type ? (
-                workspaceSlug={workspaceSlug}
+                <EstimatePointItemPreview
-                projectId={projectId}
+                  workspaceSlug={workspaceSlug}
-                estimateId={estimateId}
+                  projectId={projectId}
-                estimatePointId={value?.id}
+                  estimateId={estimateId}
-                estimateType={estimate?.type}
+                  estimatePointId={value?.id}
-                estimatePoint={value}
+                  estimateType={estimate?.type}
-                estimatePoints={estimatePoints}
+                  estimatePoint={value}
-              />
+                  estimatePoints={estimatePoints}
-            )}
+                />
-          </Draggable>
+              ) : null}
-        )}
+            </Fragment>
-        onChange={(data: TEstimatePointsObject[]) => handleDragEstimatePoints(data)}
+          )}
-        keyExtractor={(item: TEstimatePointsObject) => item?.id?.toString() || item.value.toString()}
+          onChange={(data: TEstimatePointsObject[]) => handleDragEstimatePoints(data)}
-      />
+          keyExtractor={(item: TEstimatePointsObject) => item?.id?.toString() || item.value.toString()}
+        />
+      </div>
 
       {estimatePointCreate &&
         estimatePointCreate.map(

web/components/estimates/points/preview.tsx

@@ -43,7 +43,7 @@ export const EstimatePointItemPreview: FC<TEstimatePointItemPreview> = observer(
   return (
     <div>
       {!estimatePointEditToggle && !estimatePointDeleteToggle && (
-        <div className="border border-custom-border-200 rounded relative flex items-center px-2.5 gap-2 text-base">
+        <div className="border border-custom-border-200 rounded relative flex items-center px-2.5 gap-2 text-base  my-1">
           <div className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer">
             <GripVertical size={14} className="text-custom-text-200" />
           </div>