@xwadex/fesd-next 0.3.44-beta.21 → 0.3.44-beta.22

package/dist/components/dragBoxs/dragBoxs.d.ts

@@ -0,0 +1,8 @@
+export interface PropsTypes {
+    defaultPosX?: number;
+    defaultPosY?: number;
+    children: React.ReactNode;
+}
+declare const DragBoxsBase: (props: PropsTypes) => import("react/jsx-runtime").JSX.Element;
+declare const DragBoxs: React.MemoExoticComponent<typeof DragBoxsBase>;
+export default DragBoxs;

package/dist/components/dragBoxs/dragBoxs.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useId, useState } from "react";
+import { createPortal } from "react-dom";
+import { DndContext } from "@dnd-kit/core";
+import { DragBoxsContext } from "./dragBoxsContext";
+const DragBoxsBase = (props) => {
+    const { defaultPosX = 0, defaultPosY = 0, children } = props;
+    const id = useId();
+    const [isMounded, setMounded] = useState(false);
+    const [positions, setPositions] = useState({
+        x: defaultPosX,
+        y: defaultPosY
+    });
+    const dragEndEvent = useCallback((event) => {
+        const { delta, active } = event;
+        const id = active.id;
+        setPositions((prev) => ({
+            ...prev,
+            x: prev.x + delta.x,
+            y: prev.y + delta.y,
+        }));
+    }, []);
+    const dragModifiers = useCallback(({ transform, activeNodeRect }) => {
+        if (!activeNodeRect)
+            return transform;
+        const boxWidth = activeNodeRect.width;
+        const boxHeight = activeNodeRect.height;
+        const originalLeft = activeNodeRect.left;
+        const originalTop = activeNodeRect.top;
+        const maxX = window.innerWidth - (originalLeft + boxWidth);
+        const maxY = window.innerHeight - (originalTop + boxHeight);
+        const minX = -originalLeft;
+        const minY = -originalTop;
+        return {
+            x: Math.min(Math.max(transform.x, minX), maxX),
+            y: Math.min(Math.max(transform.y, minY), maxY),
+        };
+    }, []);
+    const resizeNextPositions = useCallback((target, prev) => {
+        if (typeof window !== "undefined" && target) {
+            const { x: currentX = 0, y: currentY = 0 } = prev || {};
+            const { innerWidth, innerHeight } = window;
+            const { clientWidth, clientHeight } = target;
+            const maxX = innerWidth - clientWidth;
+            const maxY = innerHeight - clientHeight;
+            return {
+                x: Math.min(currentX, maxX < 0 ? 0 : maxX),
+                y: Math.min(currentY, maxY < 0 ? 0 : maxY),
+            };
+        }
+        return { ...prev };
+    }, []);
+    const resizeEvent = useCallback(() => {
+        const target = document.getElementById(id);
+        if (target)
+            setPositions((prev) => resizeNextPositions(target, prev));
+    }, []);
+    useEffect(() => {
+        setMounded(true);
+        window.addEventListener("resize", resizeEvent);
+        return () => window.removeEventListener("resize", resizeEvent);
+    }, []);
+    return (_jsx(_Fragment, { children: isMounded
+            ? createPortal(_jsx(DndContext, { onDragEnd: dragEndEvent, modifiers: [dragModifiers], children: _jsx(DragBoxsContext, { value: { id, positions }, children: children }) }), document.body)
+            : null }));
+};
+const DragBoxs = memo(DragBoxsBase);
+DragBoxs.displayName = "DragBoxs";
+export default DragBoxs;

package/dist/components/dragBoxs/dragBoxsContext.d.ts

@@ -0,0 +1,14 @@
+import { useDraggable } from "@dnd-kit/core";
+export type PositionsType = {
+    x?: number;
+    y?: number;
+};
+export interface DragBoxsContextType {
+    id: string;
+    positions: PositionsType;
+}
+export declare const DragBoxsContext: import("react").Context<DragBoxsContextType | undefined> & {
+    displayName: string;
+};
+export declare const useDragBoxsContext: () => DragBoxsContextType;
+export { useDraggable };

package/dist/components/dragBoxs/dragBoxsContext.js

@@ -0,0 +1,10 @@
+import { createContext, use } from 'react';
+import { useDraggable } from "@dnd-kit/core";
+export const DragBoxsContext = Object.assign(createContext(undefined), { displayName: "DragBoxsContext" });
+export const useDragBoxsContext = () => {
+    const context = use(DragBoxsContext);
+    if (context)
+        return context;
+    throw new Error('useDragPanel must be used inside provider');
+};
+export { useDraggable };

package/dist/components/dragBoxs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DragBoxs } from "./dragBoxs";
+export * from "./dragBoxsContext";

package/dist/components/dragBoxs/index.js

@@ -0,0 +1,2 @@
+export { default as DragBoxs } from "./dragBoxs";
+export * from "./dragBoxsContext";

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./dragResize";
 export * from "./dragSortable";
+export * from "./dragBoxs";
 export * from "./accordions";
 export * from "./resizables";
 export * from "./scrollAreas";

package/dist/components/index.js

@@ -1,6 +1,7 @@
 // dev components
 export * from "./dragResize";
 export * from "./dragSortable";
+export * from "./dragBoxs";
 // shadcn Components
 export * from "./accordions";
 export * from "./resizables";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xwadex/fesd-next",
-	"version": "0.3.44-beta.21",
+	"version": "0.3.44-beta.22",
 	"private": false,
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",