feat(draggable-list): add-flags-to-disable-drag-and-deletion

Author: tractorss

src/lib/draggable-list/index.tsx

@@ -30,6 +30,10 @@ interface IDraggableList
     | "onSelectionChange"
   > {
   items: ListItem[];
+  /** Flag to disable drag operations in list. */
+  dragDisabled?: boolean;
+  /** Flag to disable delete operations in list. */
+  deletionDisabled?: boolean;
   /** Returns the updated list after a delete or move operation. */
   updateCallback?: (updatedItems: ListItem[]) => void;
   /** Returns the selected item. */
@@ -45,6 +49,8 @@ function DraggableList({
   selectionCallback,
   className,
   renderDragPreview,
+  dragDisabled = false,
+  deletionDisabled = false,
   ...props
 }: Readonly<IDraggableList>) {
   const list = useListData({
@@ -76,7 +82,7 @@ function DraggableList({
       aria-label={props["aria-label"] ?? "Reorderable list"}
       selectionMode="single"
       items={list.items}
-      dragAndDropHooks={dragAndDropHooks}
+      dragAndDropHooks={dragDisabled ? undefined : dragAndDropHooks}
       onSelectionChange={(keys) => {
         const keyArr = Array.from(keys);
         const selectedItem = list.getItem(keyArr[0]);
@@ -106,11 +112,13 @@ function DraggableList({
         >
           {({ isHovered }) => (
             <>
-              <DragAndDropIcon className="size-4 cursor-grab" />
+              {dragDisabled ? null : (
+                <DragAndDropIcon className="size-4 cursor-grab" />
+              )}
               <span className="text-klerosUIComponentsPrimaryText flex-1 text-base">
                 {item.name}
               </span>
-              {isHovered ? (
+              {isHovered && !deletionDisabled ? (
                 <Button
                   className={"cursor-pointer hover:scale-105"}
                   onPress={() => {

src/stories/draggable-list.stories.tsx

@@ -9,6 +9,14 @@ const meta = {
   component: DraggableList,
   title: "Draggable List",
   tags: ["autodocs"],
+  argTypes: {
+    dragDisabled: {
+      control: "boolean",
+    },
+    deletionDisabled: {
+      control: "boolean",
+    },
+  },
 } satisfies Meta<typeof DraggableList>;
 
 export default meta;
@@ -30,6 +38,22 @@ export const Default: Story = {
   },
 };
 
+/** Drag operations can be disabled with `dragDisabled ` */
+export const DragDisabled: Story = {
+  args: {
+    ...Default.args,
+    dragDisabled: true,
+  },
+};
+
+/** Delete operation can be disabled with `deletionDisabled ` */
+export const DeletionDisabled: Story = {
+  args: {
+    ...Default.args,
+    deletionDisabled: true,
+  },
+};
+
 export const CustomDragPreview: Story = {
   args: {
     themeUI: "light",