@uxf/core-react 11.91.0 → 11.93.0

package/README.md

@@ -395,6 +395,210 @@ import { twScreens } from "@generated/tw-tokens/tw-screens";
 const isDesktop = useMediaQuery(`(min-width: ${twScreens.sm})`);
 ```
 
+## Drag and Drop (DND) Hooks
+
+Provides a set of hooks built on top of [@dnd-kit](https://dndkit.com/) for implementing drag-and-drop functionality with different patterns.
+
+### useSortableCore
+
+Low-level hook that provides the core drag-and-drop functionality. Used as a building block for other sortable hooks.
+
+```tsx
+import { useSortableCore } from "@uxf/core-react/dnd/hooks/use-sortable-core";
+
+const {
+  activeElement,      // Currently dragged element
+  setActiveElement,   // Set active element manually
+  onDragStart,        // Drag start handler
+  onDragCancel,       // Drag cancel handler
+  sensors,            // DND sensors (pointer, keyboard)
+  dropAnimationConfig // Animation configuration for drop
+} = useSortableCore();
+```
+
+---
+### useSortableSingle
+
+Hook for implementing drag-and-drop sorting within a single list. Manages item reordering and state internally.
+
+```tsx
+import { DndContext, DragOverlay } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { useSortableSingle } from "@uxf/core-react/dnd/hooks/use-sortable-single";
+import { SortableItem } from "./sortable-item"; // Your sortable item component
+
+interface Task {
+  id: string;
+  title: string;
+}
+
+function TaskList() {
+  const initialTasks: Task[] = [
+    { id: "1", title: "Write documentation" },
+    { id: "2", title: "Review PR" },
+    { id: "3", title: "Deploy to production" }
+  ];
+
+  const {
+    items,              // Current items state
+    setItems,           // Update items manually
+    activeItem,         // Currently dragged item
+    onDragStart,
+    onDragEnd,
+    onDragCancel,
+    sensors,
+    dropAnimationConfig
+  } = useSortableSingle(
+    initialTasks,
+    (fromIndex, toIndex, updatedList) => {
+      // Optional callback when items are reordered
+      console.log(`Moved from ${fromIndex} to ${toIndex}`, updatedList);
+    }
+  );
+
+  return (
+    <DndContext
+      sensors={sensors}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      onDragCancel={onDragCancel}
+    >
+      <SortableContext items={items.map(item => item.id)} strategy={verticalListSortingStrategy}>
+        {items.map(task => (
+          <SortableItem key={task.id} id={task.id}>
+            {task.title}
+          </SortableItem>
+        ))}
+      </SortableContext>
+
+      <DragOverlay dropAnimation={dropAnimationConfig}>
+        {activeItem ? <div>{activeItem.title}</div> : null}
+      </DragOverlay>
+    </DndContext>
+  );
+}
+```
+
+---
+### useSortableMulti
+
+Hook for implementing drag-and-drop between multiple sections/lists. Ideal for kanban boards, categorized lists, or visible/hidden column management.
+
+```tsx
+import { DndContext, DragOverlay, rectIntersection } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { useSortableMulti } from "@uxf/core-react/dnd/hooks/use-sortable-multi";
+import { SortableItem } from "./sortable-item"; // Your sortable item component
+
+interface Task {
+  id: string;
+  title: string;
+}
+
+interface Sections {
+  todo: Task[];
+  inProgress: Task[];
+  done: Task[];
+}
+
+function KanbanBoard() {
+  const [sections, setSections] = useState<Sections>({
+    todo: [
+      { id: "1", title: "Design UI" },
+      { id: "2", title: "Write tests" }
+    ],
+    inProgress: [
+      { id: "3", title: "Implement feature" }
+    ],
+    done: [
+      { id: "4", title: "Setup project" }
+    ]
+  });
+
+  const {
+    getSectionItemsIds, // Get IDs for a section (handles empty sections)
+    activeItem,         // Currently dragged item
+    onDragStart,
+    onDragEnd,
+    onDragCancel,
+    sensors,
+    dropAnimationConfig
+  } = useSortableMulti<Task, Sections>(
+    sections,
+    setSections,
+    (sourceKey, destKey, fromIndex, toIndex, nextState) => {
+      // Optional callback when items are moved between sections
+      console.log(`Moved from ${String(sourceKey)} to ${String(destKey)}`);
+      // Save to backend, analytics, etc.
+    }
+  );
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={rectIntersection}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      onDragCancel={onDragCancel}
+    >
+      <div className="kanban-board">
+        {(Object.keys(sections) as Array<keyof Sections>).map((sectionKey) => (
+          <div key={sectionKey} className="kanban-column">
+            <h3>{sectionKey}</h3>
+            <SortableContext
+              items={getSectionItemsIds(sectionKey)}
+              strategy={verticalListSortingStrategy}
+            >
+              {sections[sectionKey].map(task => (
+                <SortableItem key={task.id} id={task.id}>
+                  {task.title}
+                </SortableItem>
+              ))}
+            </SortableContext>
+          </div>
+        ))}
+      </div>
+
+      <DragOverlay dropAnimation={dropAnimationConfig}>
+        {activeItem ? <div>{activeItem.title}</div> : null}
+      </DragOverlay>
+    </DndContext>
+  );
+}
+```
+
+**Notes:**
+- Items must have an `id: string` property
+- `getSectionItemsIds` automatically handles empty sections by returning placeholder IDs
+- Use `rectIntersection` collision detection for better multi-section behavior
+- The hook manages item movement between sections automatically
+
+---
+### useSortableItems
+
+Legacy hook for drag-and-drop sorting. Consider using `useSortableSingle` for new implementations.
+
+```tsx
+import { useSortableItems } from "@uxf/core-react/dnd/hooks/use-sortable-items";
+
+const {
+  memoizedSensors,
+  dropAnimationConfig,
+  itemsIds,
+  activeItem,
+  onDragStart,
+  onDragEnd,
+  onDragCancel
+} = useSortableItems({
+  items: myItems,
+  handleDragEnd: (activeIndex, overIndex) => {
+    // Handle reorder
+  }
+});
+```
+
+---
+
 ## Translations
 
 Provides a translation system that can be used in both single-language and multi-language projects.

package/dnd/hooks/use-sortable-core.d.ts

@@ -0,0 +1,9 @@
+import { Active, DragStartEvent } from "@dnd-kit/core";
+export declare const useSortableCore: () => {
+    activeElement: Active | null;
+    setActiveElement: import("react").Dispatch<import("react").SetStateAction<Active | null>>;
+    onDragStart: ({ active }: DragStartEvent) => void;
+    onDragCancel: () => void;
+    sensors: import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
+    dropAnimationConfig: import("@dnd-kit/core/dist/components/DragOverlay/hooks/useDropAnimation").DropAnimationOptions;
+};

package/dnd/hooks/use-sortable-core.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSortableCore = void 0;
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const react_1 = require("react");
+const useSortableCore = () => {
+    const [activeElement, setActiveElement] = (0, react_1.useState)(null);
+    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, {
+        coordinateGetter: sortable_1.sortableKeyboardCoordinates,
+    }));
+    const dropAnimationConfig = {
+        sideEffects: (0, core_1.defaultDropAnimationSideEffects)({
+            styles: { active: { opacity: "0.4" } },
+        }),
+    };
+    const onDragStart = (0, react_1.useCallback)(({ active }) => {
+        setActiveElement(active);
+    }, []);
+    const onDragCancel = (0, react_1.useCallback)(() => {
+        setActiveElement(null);
+    }, []);
+    return {
+        activeElement,
+        setActiveElement,
+        onDragStart,
+        onDragCancel,
+        sensors,
+        dropAnimationConfig,
+    };
+};
+exports.useSortableCore = useSortableCore;

package/dnd/hooks/use-sortable-items.d.ts

@@ -0,0 +1,15 @@
+import { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
+type Props = {
+    items: any[];
+    handleDragEnd: (activeIndex: number, overIndex: number) => void;
+};
+export declare const useSortableItems: ({ items, handleDragEnd }: Props) => {
+    memoizedSensors: import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
+    dropAnimationConfig: import("@dnd-kit/core/dist/components/DragOverlay/hooks/useDropAnimation").DropAnimationOptions;
+    itemsIds: any[];
+    activeItem: any;
+    onDragStart: ({ active }: DragStartEvent) => void;
+    onDragEnd: ({ active, over }: DragEndEvent) => void;
+    onDragCancel: () => void;
+};
+export {};

package/dnd/hooks/use-sortable-items.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSortableItems = void 0;
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const react_1 = require("react");
+const useSortableItems = ({ items, handleDragEnd }) => {
+    const [sortableItems, setSortableItems] = (0, react_1.useState)(items);
+    const [activeElement, setActiveElement] = (0, react_1.useState)(null);
+    const activeItem = (0, react_1.useMemo)(() => sortableItems.find((item) => item.id === (activeElement === null || activeElement === void 0 ? void 0 : activeElement.id)), [activeElement, sortableItems]);
+    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, {
+        coordinateGetter: sortable_1.sortableKeyboardCoordinates,
+    }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const memoizedSensors = (0, react_1.useMemo)(() => sensors, []);
+    const idsStringified = JSON.stringify(sortableItems.map((i) => i.id));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const itemsIds = (0, react_1.useMemo)(() => sortableItems.map((i) => i.id), [idsStringified]);
+    (0, react_1.useEffect)(() => {
+        setSortableItems(items);
+    }, [items]);
+    const dropAnimationConfig = {
+        sideEffects: (0, core_1.defaultDropAnimationSideEffects)({
+            styles: {
+                active: {
+                    opacity: "0.4",
+                },
+            },
+        }),
+    };
+    const onDragStart = (0, react_1.useCallback)(({ active }) => {
+        setActiveElement(active);
+    }, [setActiveElement]);
+    const onDragEnd = (0, react_1.useCallback)(({ active, over }) => {
+        if (over && active.id !== over.id) {
+            const activeIndex = sortableItems.findIndex(({ id }) => id === active.id);
+            const overIndex = sortableItems.findIndex(({ id }) => id === over.id);
+            const resorted = (0, sortable_1.arrayMove)(sortableItems, activeIndex, overIndex);
+            handleDragEnd(activeIndex, overIndex);
+            setSortableItems(resorted);
+        }
+        setActiveElement(null);
+    }, [setActiveElement, setSortableItems, handleDragEnd, sortableItems]);
+    const onDragCancel = (0, react_1.useCallback)(() => {
+        setActiveElement(null);
+    }, [setActiveElement]);
+    return {
+        memoizedSensors,
+        dropAnimationConfig,
+        itemsIds,
+        activeItem,
+        onDragStart,
+        onDragEnd,
+        onDragCancel,
+    };
+};
+exports.useSortableItems = useSortableItems;

package/dnd/hooks/use-sortable-multi.d.ts

@@ -0,0 +1,12 @@
+import { DragEndEvent } from "@dnd-kit/core";
+export declare function useSortableMulti<T extends {
+    id: string;
+}, SectionMap extends Record<string, T[]>>(sections: SectionMap, setSections: (next: SectionMap) => void, onMove?: (source: keyof SectionMap, destination: keyof SectionMap, fromIndex: number, toIndex: number, nextState: SectionMap) => void): {
+    getSectionItemsIds: (section: keyof SectionMap) => string[];
+    activeItem: T | null;
+    onDragStart: ({ active }: import("@dnd-kit/core").DragStartEvent) => void;
+    onDragEnd: ({ active, over }: DragEndEvent) => void;
+    onDragCancel: () => void;
+    sensors: import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
+    dropAnimationConfig: import("@dnd-kit/core/dist/components/DragOverlay/hooks/useDropAnimation").DropAnimationOptions;
+};

package/dnd/hooks/use-sortable-multi.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSortableMulti = useSortableMulti;
+const sortable_1 = require("@dnd-kit/sortable");
+const types_1 = require("@uxf/data-grid/hidden-columns/types");
+const react_1 = require("react");
+const use_sortable_core_1 = require("./use-sortable-core");
+function useSortableMulti(sections, setSections, onMove) {
+    const { activeElement, setActiveElement, onDragStart, onDragCancel, sensors, dropAnimationConfig } = (0, use_sortable_core_1.useSortableCore)();
+    const activeItem = (0, react_1.useMemo)(() => {
+        if (!(activeElement === null || activeElement === void 0 ? void 0 : activeElement.id)) {
+            return null;
+        }
+        for (const items of Object.values(sections)) {
+            const item = items.find((i) => i.id === activeElement.id);
+            if (item) {
+                return item;
+            }
+        }
+        return null;
+    }, [activeElement, sections]);
+    const onDragEnd = (0, react_1.useCallback)(({ active, over }) => {
+        if (!over || active.id === over.id) {
+            setActiveElement(null);
+            return;
+        }
+        const isDroppingToEmptyPlaceholder = over.id === types_1.EMPTY_HIDDEN_COLUMNS_PLACEHOLDER_ID || over.id === types_1.EMPTY_VISIBLE_COLUMNS_PLACEHOLDER_ID;
+        let sourceKey = null;
+        let destKey = null;
+        // Determine source key by checking where the active item currently is
+        for (const key in sections) {
+            if (sections[key].find((item) => item.id === active.id)) {
+                sourceKey = key;
+            }
+        }
+        // Determine destination key based on over.id
+        if (isDroppingToEmptyPlaceholder) {
+            destKey = over.id === types_1.EMPTY_VISIBLE_COLUMNS_PLACEHOLDER_ID ? "visible" : "hidden";
+        }
+        else {
+            for (const key in sections) {
+                if (sections[key].find((item) => item.id === over.id)) {
+                    destKey = key;
+                }
+            }
+        }
+        if (!sourceKey || !destKey) {
+            setActiveElement(null);
+            return;
+        }
+        const sourceList = [...sections[sourceKey]];
+        const destList = [...sections[destKey]];
+        const fromIndex = sourceList.findIndex((item) => item.id === active.id);
+        let toIndex = destList.findIndex((item) => item.id === over.id);
+        // If dropping onto a placeholder or not found in list, append at end
+        if (toIndex === -1 || isDroppingToEmptyPlaceholder) {
+            toIndex = destList.length;
+        }
+        const nextState = { ...sections };
+        if (sourceKey === destKey) {
+            nextState[sourceKey] = (0, sortable_1.arrayMove)(sourceList, fromIndex, toIndex);
+        }
+        else {
+            const [moved] = sourceList.splice(fromIndex, 1);
+            destList.splice(toIndex, 0, moved);
+            nextState[sourceKey] = sourceList;
+            nextState[destKey] = destList;
+        }
+        setSections(nextState);
+        onMove === null || onMove === void 0 ? void 0 : onMove(sourceKey, destKey, fromIndex, toIndex, nextState);
+        setActiveElement(null);
+    }, [sections, setSections, onMove, setActiveElement]);
+    const getSectionItemsIds = (0, react_1.useCallback)((section) => {
+        const ids = sections[section].map((i) => i.id);
+        if (ids.length === 0) {
+            return [
+                section === "visible" ? types_1.EMPTY_VISIBLE_COLUMNS_PLACEHOLDER_ID : types_1.EMPTY_HIDDEN_COLUMNS_PLACEHOLDER_ID,
+            ];
+        }
+        return ids;
+    }, [sections]);
+    return {
+        getSectionItemsIds,
+        activeItem,
+        onDragStart,
+        onDragEnd,
+        onDragCancel,
+        sensors,
+        dropAnimationConfig,
+    };
+}

package/dnd/hooks/use-sortable-single.d.ts

@@ -0,0 +1,13 @@
+import { DragEndEvent } from "@dnd-kit/core";
+export declare const useSortableSingle: <T extends {
+    id: string;
+}>(initialItems: T[], onReorder?: (fromIndex: number, toIndex: number, updatedList: T[]) => void) => {
+    items: T[];
+    setItems: import("react").Dispatch<import("react").SetStateAction<T[]>>;
+    activeItem: T | null;
+    onDragStart: ({ active }: import("@dnd-kit/core").DragStartEvent) => void;
+    onDragEnd: ({ active, over }: DragEndEvent) => void;
+    onDragCancel: () => void;
+    sensors: import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
+    dropAnimationConfig: import("@dnd-kit/core/dist/components/DragOverlay/hooks/useDropAnimation").DropAnimationOptions;
+};

package/dnd/hooks/use-sortable-single.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSortableSingle = void 0;
+const sortable_1 = require("@dnd-kit/sortable");
+const react_1 = require("react");
+const use_sortable_core_1 = require("./use-sortable-core");
+const useSortableSingle = (initialItems, onReorder) => {
+    const [items, setItems] = (0, react_1.useState)(initialItems);
+    const { activeElement, setActiveElement, onDragStart, onDragCancel, sensors, dropAnimationConfig } = (0, use_sortable_core_1.useSortableCore)();
+    (0, react_1.useEffect)(() => {
+        setItems(initialItems);
+    }, [initialItems]);
+    const activeItem = (0, react_1.useMemo)(() => { var _a; return (_a = items.find((item) => item.id === (activeElement === null || activeElement === void 0 ? void 0 : activeElement.id))) !== null && _a !== void 0 ? _a : null; }, [activeElement, items]);
+    const onDragEnd = (0, react_1.useCallback)(({ active, over }) => {
+        if (!over || active.id === over.id) {
+            setActiveElement(null);
+            return;
+        }
+        const fromIndex = items.findIndex((i) => i.id === active.id);
+        const toIndex = items.findIndex((i) => i.id === over.id);
+        const reordered = (0, sortable_1.arrayMove)(items, fromIndex, toIndex);
+        setItems(reordered);
+        onReorder === null || onReorder === void 0 ? void 0 : onReorder(fromIndex, toIndex, reordered);
+        setActiveElement(null);
+    }, [items, setActiveElement, onReorder]);
+    return {
+        items,
+        setItems,
+        activeItem,
+        onDragStart,
+        onDragEnd,
+        onDragCancel,
+        sensors,
+        dropAnimationConfig,
+    };
+};
+exports.useSortableSingle = useSortableSingle;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/core-react",
-    "version": "11.91.0",
+    "version": "11.93.0",
     "description": "UXF Core",
     "author": "UX Fans s.r.o",
     "license": "MIT",
@@ -12,7 +12,9 @@
         "typecheck": "tsc --noEmit --skipLibCheck"
     },
     "dependencies": {
-        "@uxf/core": "11.91.0"
+        "@uxf/core": "11.93.0",
+        "@dnd-kit/core": "6.3.1",
+        "@dnd-kit/sortable": "10.0.0"
     },
     "peerDependencies": {
         "react": ">=18.2.0"