@payloadcms/next 3.77.0 → 3.78.0-internal-debug.f663370

package/dist/views/Dashboard/Default/ModularDashboard/useDashboardLayout.js

@@ -4,162 +4,182 @@ import { PREFERENCE_KEYS } from 'payload/shared';
 import React, { useCallback, useEffect, useState } from 'react';
 import { RenderWidget } from './renderWidget/RenderWidget.js';
 export function useDashboardLayout(initialLayout) {
-  const setLayoutPreference = useSetLayoutPreference();
-  const [isEditing, setIsEditing] = useState(false);
-  const {
-    widgets = []
-  } = useConfig().config.admin.dashboard ?? {};
-  const [currentLayout, setCurrentLayout] = useState(initialLayout);
-  const {
-    openModal
-  } = useModal();
-  const cancelModalSlug = 'cancel-dashboard-changes';
-  const {
-    serverFunction
-  } = useServerFunctions();
-  // Sync state when initialLayout prop changes (e.g., when query params change and server component re-renders)
-  useEffect(() => {
-    if (!isEditing) {
-      setCurrentLayout(initialLayout);
-    }
-  }, [initialLayout, isEditing]);
-  const saveLayout = useCallback(async () => {
-    try {
-      const layoutData = currentLayout.map(item => item.item);
-      setIsEditing(false);
-      await setLayoutPreference(layoutData);
-    } catch {
-      setIsEditing(true);
-      toast.error('Failed to save layout');
-    }
-  }, [setLayoutPreference, currentLayout]);
-  const resetLayout = useCallback(async () => {
-    try {
-      await setLayoutPreference(null);
-      const result = await serverFunction({
-        name: 'get-default-layout',
-        args: {}
-      });
-      setCurrentLayout(result.layout);
-      setIsEditing(false);
-    } catch {
-      toast.error('Failed to reset layout');
-    }
-  }, [setLayoutPreference, serverFunction]);
-  const performCancel = useCallback(() => {
-    setCurrentLayout(initialLayout);
-    setIsEditing(false);
-  }, [initialLayout]);
-  const cancel = useCallback(() => {
-    // Check if layout has changed
-    const hasChanges = currentLayout.length !== initialLayout.length || currentLayout.some((widget, index) => {
-      const initialWidget = initialLayout[index];
-      return !initialWidget || widget.item.id !== initialWidget.item.id || widget.item.width !== initialWidget.item.width;
-    });
-    // If there are changes, show confirmation modal
-    if (hasChanges) {
-      openModal(cancelModalSlug);
-    } else {
-      performCancel();
-    }
-  }, [currentLayout, initialLayout, openModal, cancelModalSlug, performCancel]);
-  const moveWidget = useCallback(({
-    moveFromIndex,
-    moveToIndex
-  }) => {
-    if (moveFromIndex === moveToIndex || moveFromIndex < 0 || moveToIndex < 0) {
-      return;
-    }
-    setCurrentLayout(prev => {
-      return arrayMove(prev, moveFromIndex, moveToIndex);
-    });
-  }, []);
-  const addWidget = useCallback(widgetSlug => {
-    if (!isEditing) {
-      return;
-    }
-    const widgetId = `${widgetSlug}-${Date.now()}`;
-    const widget = widgets.find(widget => widget.slug === widgetSlug);
-    // Create a new widget instance using RenderWidget
-    const newWidgetInstance = {
-      component: React.createElement(RenderWidget, {
-        widgetId
-      }),
-      item: {
-        id: widgetId,
-        maxWidth: widget?.maxWidth ?? 'full',
-        minWidth: widget?.minWidth ?? 'x-small',
-        width: widget?.minWidth ?? 'x-small'
-      }
-    };
-    setCurrentLayout(prev => [...prev, newWidgetInstance]);
-    // Scroll to the newly added widget after it's rendered and highlight it
-    setTimeout(() => {
-      const element = document.getElementById(widgetId);
-      if (element) {
-        element.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center'
+    const setLayoutPreference = useSetLayoutPreference();
+    const [isEditing, setIsEditing] = useState(false);
+    const { widgets = [] } = useConfig().config.admin.dashboard ?? {};
+    const [currentLayout, setCurrentLayout] = useState(initialLayout);
+    const { openModal } = useModal();
+    const cancelModalSlug = 'cancel-dashboard-changes';
+    const { serverFunction } = useServerFunctions();
+    // Sync state when initialLayout prop changes (e.g., when query params change and server component re-renders)
+    useEffect(()=>{
+        if (!isEditing) {
+            setCurrentLayout(initialLayout);
+        }
+    }, [
+        initialLayout,
+        isEditing
+    ]);
+    const saveLayout = useCallback(async ()=>{
+        try {
+            const layoutData = currentLayout.map((item)=>item.item);
+            setIsEditing(false);
+            await setLayoutPreference(layoutData);
+        } catch  {
+            setIsEditing(true);
+            toast.error('Failed to save layout');
+        }
+    }, [
+        setLayoutPreference,
+        currentLayout
+    ]);
+    const resetLayout = useCallback(async ()=>{
+        try {
+            await setLayoutPreference(null);
+            const result = await serverFunction({
+                name: 'get-default-layout',
+                args: {}
+            });
+            setCurrentLayout(result.layout);
+            setIsEditing(false);
+        } catch  {
+            toast.error('Failed to reset layout');
+        }
+    }, [
+        setLayoutPreference,
+        serverFunction
+    ]);
+    const performCancel = useCallback(()=>{
+        setCurrentLayout(initialLayout);
+        setIsEditing(false);
+    }, [
+        initialLayout
+    ]);
+    const cancel = useCallback(()=>{
+        // Check if layout has changed
+        const hasChanges = currentLayout.length !== initialLayout.length || currentLayout.some((widget, index)=>{
+            const initialWidget = initialLayout[index];
+            return !initialWidget || widget.item.id !== initialWidget.item.id || widget.item.width !== initialWidget.item.width;
         });
-        // Add highlight animation to the widget element
-        const widget = element.closest('.widget');
-        if (widget) {
-          widget.classList.add('widget--highlight');
-          // Remove the class after animation completes (1.5s fade out)
-          setTimeout(() => {
-            widget.classList.remove('widget--highlight');
-          }, 1500);
+        // If there are changes, show confirmation modal
+        if (hasChanges) {
+            openModal(cancelModalSlug);
+        } else {
+            performCancel();
+        }
+    }, [
+        currentLayout,
+        initialLayout,
+        openModal,
+        cancelModalSlug,
+        performCancel
+    ]);
+    const moveWidget = useCallback(({ moveFromIndex, moveToIndex })=>{
+        if (moveFromIndex === moveToIndex || moveFromIndex < 0 || moveToIndex < 0) {
+            return;
         }
-      }
-    }, 100);
-  }, [isEditing, widgets]);
-  const deleteWidget = useCallback(widgetId => {
-    if (!isEditing) {
-      return;
-    }
-    setCurrentLayout(prev => prev.filter(item => item.item.id !== widgetId));
-  }, [isEditing]);
-  const resizeWidget = useCallback((widgetId, newWidth) => {
-    if (!isEditing) {
-      return;
-    }
-    setCurrentLayout(prev => prev.map(item => item.item.id === widgetId ? {
-      ...item,
-      item: {
-        ...item.item,
-        width: newWidth
-      }
-    } : item));
-  }, [isEditing]);
-  const cancelModal = React.createElement(ConfirmationModal, {
-    body: 'You have unsaved changes to your dashboard layout. Are you sure you want to discard them?',
-    confirmLabel: 'Discard',
-    heading: 'Discard changes?',
-    modalSlug: cancelModalSlug,
-    onConfirm: performCancel
-  });
-  return {
-    addWidget,
-    cancel,
-    cancelModal,
-    currentLayout,
-    deleteWidget,
-    isEditing,
-    moveWidget,
-    resetLayout,
-    resizeWidget,
-    saveLayout,
-    setIsEditing
-  };
+        setCurrentLayout((prev)=>{
+            return arrayMove(prev, moveFromIndex, moveToIndex);
+        });
+    }, []);
+    const addWidget = useCallback((widgetSlug)=>{
+        if (!isEditing) {
+            return;
+        }
+        const widgetId = `${widgetSlug}-${Date.now()}`;
+        const widget = widgets.find((widget)=>widget.slug === widgetSlug);
+        // Create a new widget instance using RenderWidget
+        const newWidgetInstance = {
+            component: React.createElement(RenderWidget, {
+                widgetId
+            }),
+            // TODO: widgetData can be added here for custom props
+            item: {
+                id: widgetId,
+                maxWidth: widget?.maxWidth ?? 'full',
+                minWidth: widget?.minWidth ?? 'x-small',
+                width: widget?.minWidth ?? 'x-small'
+            }
+        };
+        setCurrentLayout((prev)=>[
+                ...prev,
+                newWidgetInstance
+            ]);
+        // Scroll to the newly added widget after it's rendered and highlight it
+        setTimeout(()=>{
+            const element = document.getElementById(widgetId);
+            if (element) {
+                element.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center'
+                });
+                // Add highlight animation to the widget element
+                const widget = element.closest('.widget');
+                if (widget) {
+                    widget.classList.add('widget--highlight');
+                    // Remove the class after animation completes (1.5s fade out)
+                    setTimeout(()=>{
+                        widget.classList.remove('widget--highlight');
+                    }, 1500);
+                }
+            }
+        }, 100);
+    }, [
+        isEditing,
+        widgets
+    ]);
+    const deleteWidget = useCallback((widgetId)=>{
+        if (!isEditing) {
+            return;
+        }
+        setCurrentLayout((prev)=>prev.filter((item)=>item.item.id !== widgetId));
+    }, [
+        isEditing
+    ]);
+    const resizeWidget = useCallback((widgetId, newWidth)=>{
+        if (!isEditing) {
+            return;
+        }
+        setCurrentLayout((prev)=>prev.map((item)=>item.item.id === widgetId ? {
+                    ...item,
+                    item: {
+                        ...item.item,
+                        width: newWidth
+                    }
+                } : item));
+    }, [
+        isEditing
+    ]);
+    const cancelModal = React.createElement(ConfirmationModal, {
+        body: 'You have unsaved changes to your dashboard layout. Are you sure you want to discard them?',
+        confirmLabel: 'Discard',
+        heading: 'Discard changes?',
+        modalSlug: cancelModalSlug,
+        onConfirm: performCancel
+    });
+    return {
+        addWidget,
+        cancel,
+        cancelModal,
+        currentLayout,
+        deleteWidget,
+        isEditing,
+        moveWidget,
+        resetLayout,
+        resizeWidget,
+        saveLayout,
+        setIsEditing
+    };
 }
 function useSetLayoutPreference() {
-  const {
-    setPreference
-  } = usePreferences();
-  return useCallback(async layout => {
-    await setPreference(PREFERENCE_KEYS.DASHBOARD_LAYOUT, {
-      layouts: layout
-    }, false);
-  }, [setPreference]);
+    const { setPreference } = usePreferences();
+    return useCallback(async (layout)=>{
+        await setPreference(PREFERENCE_KEYS.DASHBOARD_LAYOUT, {
+            layouts: layout
+        }, false);
+    }, [
+        setPreference
+    ]);
 }
+
 //# sourceMappingURL=useDashboardLayout.js.map

package/dist/views/Dashboard/Default/ModularDashboard/useDashboardLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDashboardLayout.js","names":["arrayMove","ConfirmationModal","toast","useConfig","useModal","usePreferences","useServerFunctions","PREFERENCE_KEYS","React","useCallback","useEffect","useState","RenderWidget","useDashboardLayout","initialLayout","setLayoutPreference","useSetLayoutPreference","isEditing","setIsEditing","widgets","config","admin","dashboard","currentLayout","setCurrentLayout","openModal","cancelModalSlug","serverFunction","saveLayout","layoutData","map","item","error","resetLayout","result","name","args","layout","performCancel","cancel","hasChanges","length","some","widget","index","initialWidget","id","width","moveWidget","moveFromIndex","moveToIndex","prev","addWidget","widgetSlug","widgetId","Date","now","find","slug","newWidgetInstance","component","createElement","maxWidth","minWidth","setTimeout","element","document","getElementById","scrollIntoView","behavior","block","closest","classList","add","remove","deleteWidget","filter","resizeWidget","newWidth","cancelModal","body","confirmLabel","heading","modalSlug","onConfirm","setPreference","DASHBOARD_LAYOUT","layouts"],"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/useDashboardLayout.ts"],"sourcesContent":["import type { WidgetWidth } from 'payload'\n\nimport { arrayMove } from '@dnd-kit/sortable'\nimport {\n  ConfirmationModal,\n  toast,\n  useConfig,\n  useModal,\n  usePreferences,\n  useServerFunctions,\n} from '@payloadcms/ui'\nimport { PREFERENCE_KEYS } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { WidgetInstanceClient, WidgetItem } from './index.client.js'\nimport type { GetDefaultLayoutServerFnReturnType } from './renderWidget/getDefaultLayoutServerFn.js'\n\nimport { RenderWidget } from './renderWidget/RenderWidget.js'\n\nexport function useDashboardLayout(initialLayout: WidgetInstanceClient[]) {\n  const setLayoutPreference = useSetLayoutPreference()\n  const [isEditing, setIsEditing] = useState(false)\n  const { widgets = [] } = useConfig().config.admin.dashboard ?? {}\n  const [currentLayout, setCurrentLayout] = useState<WidgetInstanceClient[]>(initialLayout)\n  const { openModal } = useModal()\n  const cancelModalSlug = 'cancel-dashboard-changes'\n  const { serverFunction } = useServerFunctions()\n\n  // Sync state when initialLayout prop changes (e.g., when query params change and server component re-renders)\n  useEffect(() => {\n    if (!isEditing) {\n      setCurrentLayout(initialLayout)\n    }\n  }, [initialLayout, isEditing])\n\n  const saveLayout = useCallback(async () => {\n    try {\n      const layoutData: WidgetItem[] = currentLayout.map((item) => item.item)\n      setIsEditing(false)\n      await setLayoutPreference(layoutData)\n    } catch {\n      setIsEditing(true)\n      toast.error('Failed to save layout')\n    }\n  }, [setLayoutPreference, currentLayout])\n\n  const resetLayout = useCallback(async () => {\n    try {\n      await setLayoutPreference(null)\n\n      const result = (await serverFunction({\n        name: 'get-default-layout',\n        args: {},\n      })) as GetDefaultLayoutServerFnReturnType\n\n      setCurrentLayout(result.layout)\n      setIsEditing(false)\n    } catch {\n      toast.error('Failed to reset layout')\n    }\n  }, [setLayoutPreference, serverFunction])\n\n  const performCancel = useCallback(() => {\n    setCurrentLayout(initialLayout)\n    setIsEditing(false)\n  }, [initialLayout])\n\n  const cancel = useCallback(() => {\n    // Check if layout has changed\n    const hasChanges =\n      currentLayout.length !== initialLayout.length ||\n      currentLayout.some((widget, index) => {\n        const initialWidget = initialLayout[index]\n        return (\n          !initialWidget ||\n          widget.item.id !== initialWidget.item.id ||\n          widget.item.width !== initialWidget.item.width\n        )\n      })\n\n    // If there are changes, show confirmation modal\n    if (hasChanges) {\n      openModal(cancelModalSlug)\n    } else {\n      performCancel()\n    }\n  }, [currentLayout, initialLayout, openModal, cancelModalSlug, performCancel])\n\n  const moveWidget = useCallback(\n    ({ moveFromIndex, moveToIndex }: { moveFromIndex: number; moveToIndex: number }) => {\n      if (moveFromIndex === moveToIndex || moveFromIndex < 0 || moveToIndex < 0) {\n        return\n      }\n\n      setCurrentLayout((prev) => {\n        return arrayMove(prev, moveFromIndex, moveToIndex)\n      })\n    },\n    [],\n  )\n\n  const addWidget = useCallback(\n    (widgetSlug: string) => {\n      if (!isEditing) {\n        return\n      }\n\n      const widgetId = `${widgetSlug}-${Date.now()}`\n      const widget = widgets.find((widget) => widget.slug === widgetSlug)\n\n      // Create a new widget instance using RenderWidget\n      const newWidgetInstance: WidgetInstanceClient = {\n        component: React.createElement(RenderWidget, {\n          widgetId,\n          // TODO: widgetData can be added here for custom props\n        }),\n        item: {\n          id: widgetId,\n          maxWidth: widget?.maxWidth ?? 'full',\n          minWidth: widget?.minWidth ?? 'x-small',\n          width: widget?.minWidth ?? 'x-small',\n        },\n      }\n\n      setCurrentLayout((prev) => [...prev, newWidgetInstance])\n\n      // Scroll to the newly added widget after it's rendered and highlight it\n      setTimeout(() => {\n        const element = document.getElementById(widgetId)\n        if (element) {\n          element.scrollIntoView({\n            behavior: 'smooth',\n            block: 'center',\n          })\n\n          // Add highlight animation to the widget element\n          const widget = element.closest('.widget')\n          if (widget) {\n            widget.classList.add('widget--highlight')\n            // Remove the class after animation completes (1.5s fade out)\n            setTimeout(() => {\n              widget.classList.remove('widget--highlight')\n            }, 1500)\n          }\n        }\n      }, 100)\n    },\n    [isEditing, widgets],\n  )\n\n  const deleteWidget = useCallback(\n    (widgetId: string) => {\n      if (!isEditing) {\n        return\n      }\n      setCurrentLayout((prev) => prev.filter((item) => item.item.id !== widgetId))\n    },\n    [isEditing],\n  )\n\n  const resizeWidget = useCallback(\n    (widgetId: string, newWidth: WidgetWidth) => {\n      if (!isEditing) {\n        return\n      }\n      setCurrentLayout((prev) =>\n        prev.map((item) =>\n          item.item.id === widgetId\n            ? {\n                ...item,\n                item: {\n                  ...item.item,\n                  width: newWidth,\n                } satisfies WidgetItem,\n              }\n            : item,\n        ),\n      )\n    },\n    [isEditing],\n  )\n\n  const cancelModal = React.createElement(ConfirmationModal, {\n    body: 'You have unsaved changes to your dashboard layout. Are you sure you want to discard them?',\n    confirmLabel: 'Discard',\n    heading: 'Discard changes?',\n    modalSlug: cancelModalSlug,\n    onConfirm: performCancel,\n  })\n\n  return {\n    addWidget,\n    cancel,\n    cancelModal,\n    currentLayout,\n    deleteWidget,\n    isEditing,\n    moveWidget,\n    resetLayout,\n    resizeWidget,\n    saveLayout,\n    setIsEditing,\n  }\n}\n\nfunction useSetLayoutPreference() {\n  const { setPreference } = usePreferences()\n  return useCallback(\n    async (layout: null | WidgetItem[]) => {\n      await setPreference(PREFERENCE_KEYS.DASHBOARD_LAYOUT, { layouts: layout }, false)\n    },\n    [setPreference],\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/useDashboardLayout.ts"],"sourcesContent":["import type { WidgetWidth } from 'payload'\n\nimport { arrayMove } from '@dnd-kit/sortable'\nimport {\n  ConfirmationModal,\n  toast,\n  useConfig,\n  useModal,\n  usePreferences,\n  useServerFunctions,\n} from '@payloadcms/ui'\nimport { PREFERENCE_KEYS } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { WidgetInstanceClient, WidgetItem } from './index.client.js'\nimport type { GetDefaultLayoutServerFnReturnType } from './renderWidget/getDefaultLayoutServerFn.js'\n\nimport { RenderWidget } from './renderWidget/RenderWidget.js'\n\nexport function useDashboardLayout(initialLayout: WidgetInstanceClient[]) {\n  const setLayoutPreference = useSetLayoutPreference()\n  const [isEditing, setIsEditing] = useState(false)\n  const { widgets = [] } = useConfig().config.admin.dashboard ?? {}\n  const [currentLayout, setCurrentLayout] = useState<WidgetInstanceClient[]>(initialLayout)\n  const { openModal } = useModal()\n  const cancelModalSlug = 'cancel-dashboard-changes'\n  const { serverFunction } = useServerFunctions()\n\n  // Sync state when initialLayout prop changes (e.g., when query params change and server component re-renders)\n  useEffect(() => {\n    if (!isEditing) {\n      setCurrentLayout(initialLayout)\n    }\n  }, [initialLayout, isEditing])\n\n  const saveLayout = useCallback(async () => {\n    try {\n      const layoutData: WidgetItem[] = currentLayout.map((item) => item.item)\n      setIsEditing(false)\n      await setLayoutPreference(layoutData)\n    } catch {\n      setIsEditing(true)\n      toast.error('Failed to save layout')\n    }\n  }, [setLayoutPreference, currentLayout])\n\n  const resetLayout = useCallback(async () => {\n    try {\n      await setLayoutPreference(null)\n\n      const result = (await serverFunction({\n        name: 'get-default-layout',\n        args: {},\n      })) as GetDefaultLayoutServerFnReturnType\n\n      setCurrentLayout(result.layout)\n      setIsEditing(false)\n    } catch {\n      toast.error('Failed to reset layout')\n    }\n  }, [setLayoutPreference, serverFunction])\n\n  const performCancel = useCallback(() => {\n    setCurrentLayout(initialLayout)\n    setIsEditing(false)\n  }, [initialLayout])\n\n  const cancel = useCallback(() => {\n    // Check if layout has changed\n    const hasChanges =\n      currentLayout.length !== initialLayout.length ||\n      currentLayout.some((widget, index) => {\n        const initialWidget = initialLayout[index]\n        return (\n          !initialWidget ||\n          widget.item.id !== initialWidget.item.id ||\n          widget.item.width !== initialWidget.item.width\n        )\n      })\n\n    // If there are changes, show confirmation modal\n    if (hasChanges) {\n      openModal(cancelModalSlug)\n    } else {\n      performCancel()\n    }\n  }, [currentLayout, initialLayout, openModal, cancelModalSlug, performCancel])\n\n  const moveWidget = useCallback(\n    ({ moveFromIndex, moveToIndex }: { moveFromIndex: number; moveToIndex: number }) => {\n      if (moveFromIndex === moveToIndex || moveFromIndex < 0 || moveToIndex < 0) {\n        return\n      }\n\n      setCurrentLayout((prev) => {\n        return arrayMove(prev, moveFromIndex, moveToIndex)\n      })\n    },\n    [],\n  )\n\n  const addWidget = useCallback(\n    (widgetSlug: string) => {\n      if (!isEditing) {\n        return\n      }\n\n      const widgetId = `${widgetSlug}-${Date.now()}`\n      const widget = widgets.find((widget) => widget.slug === widgetSlug)\n\n      // Create a new widget instance using RenderWidget\n      const newWidgetInstance: WidgetInstanceClient = {\n        component: React.createElement(RenderWidget, {\n          widgetId,\n          // TODO: widgetData can be added here for custom props\n        }),\n        item: {\n          id: widgetId,\n          maxWidth: widget?.maxWidth ?? 'full',\n          minWidth: widget?.minWidth ?? 'x-small',\n          width: widget?.minWidth ?? 'x-small',\n        },\n      }\n\n      setCurrentLayout((prev) => [...prev, newWidgetInstance])\n\n      // Scroll to the newly added widget after it's rendered and highlight it\n      setTimeout(() => {\n        const element = document.getElementById(widgetId)\n        if (element) {\n          element.scrollIntoView({\n            behavior: 'smooth',\n            block: 'center',\n          })\n\n          // Add highlight animation to the widget element\n          const widget = element.closest('.widget')\n          if (widget) {\n            widget.classList.add('widget--highlight')\n            // Remove the class after animation completes (1.5s fade out)\n            setTimeout(() => {\n              widget.classList.remove('widget--highlight')\n            }, 1500)\n          }\n        }\n      }, 100)\n    },\n    [isEditing, widgets],\n  )\n\n  const deleteWidget = useCallback(\n    (widgetId: string) => {\n      if (!isEditing) {\n        return\n      }\n      setCurrentLayout((prev) => prev.filter((item) => item.item.id !== widgetId))\n    },\n    [isEditing],\n  )\n\n  const resizeWidget = useCallback(\n    (widgetId: string, newWidth: WidgetWidth) => {\n      if (!isEditing) {\n        return\n      }\n      setCurrentLayout((prev) =>\n        prev.map((item) =>\n          item.item.id === widgetId\n            ? {\n                ...item,\n                item: {\n                  ...item.item,\n                  width: newWidth,\n                } satisfies WidgetItem,\n              }\n            : item,\n        ),\n      )\n    },\n    [isEditing],\n  )\n\n  const cancelModal = React.createElement(ConfirmationModal, {\n    body: 'You have unsaved changes to your dashboard layout. Are you sure you want to discard them?',\n    confirmLabel: 'Discard',\n    heading: 'Discard changes?',\n    modalSlug: cancelModalSlug,\n    onConfirm: performCancel,\n  })\n\n  return {\n    addWidget,\n    cancel,\n    cancelModal,\n    currentLayout,\n    deleteWidget,\n    isEditing,\n    moveWidget,\n    resetLayout,\n    resizeWidget,\n    saveLayout,\n    setIsEditing,\n  }\n}\n\nfunction useSetLayoutPreference() {\n  const { setPreference } = usePreferences()\n  return useCallback(\n    async (layout: null | WidgetItem[]) => {\n      await setPreference(PREFERENCE_KEYS.DASHBOARD_LAYOUT, { layouts: layout }, false)\n    },\n    [setPreference],\n  )\n}\n"],"names":["arrayMove","ConfirmationModal","toast","useConfig","useModal","usePreferences","useServerFunctions","PREFERENCE_KEYS","React","useCallback","useEffect","useState","RenderWidget","useDashboardLayout","initialLayout","setLayoutPreference","useSetLayoutPreference","isEditing","setIsEditing","widgets","config","admin","dashboard","currentLayout","setCurrentLayout","openModal","cancelModalSlug","serverFunction","saveLayout","layoutData","map","item","error","resetLayout","result","name","args","layout","performCancel","cancel","hasChanges","length","some","widget","index","initialWidget","id","width","moveWidget","moveFromIndex","moveToIndex","prev","addWidget","widgetSlug","widgetId","Date","now","find","slug","newWidgetInstance","component","createElement","maxWidth","minWidth","setTimeout","element","document","getElementById","scrollIntoView","behavior","block","closest","classList","add","remove","deleteWidget","filter","resizeWidget","newWidth","cancelModal","body","confirmLabel","heading","modalSlug","onConfirm","setPreference","DASHBOARD_LAYOUT","layouts"],"mappings":"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"}

package/dist/views/Dashboard/Default/ModularDashboard/utils/collisionDetection.js

@@ -1,38 +1,39 @@
 /**
  * Collision detection that considers the X
  * axis only with respect to the position of the pointer (or collisionRect for keyboard)
- */export const closestInXAxis = args => {
-  const collisions = [];
-  // Use pointer coordinates if available (mouse/touch), otherwise use collisionRect center (keyboard)
-  let x;
-  let y;
-  if (args.pointerCoordinates) {
-    x = args.pointerCoordinates.x;
-    y = args.pointerCoordinates.y;
-  } else if (args.collisionRect) {
-    // For keyboard navigation, use the center of the collisionRect
-    x = args.collisionRect.left + args.collisionRect.width / 2;
-    y = args.collisionRect.top + args.collisionRect.height / 2;
-  } else {
-    return [];
-  }
-  for (const container of args.droppableContainers) {
-    const rect = args.droppableRects.get(container.id);
-    if (!rect) {
-      continue;
+ */ export const closestInXAxis = (args)=>{
+    const collisions = [];
+    // Use pointer coordinates if available (mouse/touch), otherwise use collisionRect center (keyboard)
+    let x;
+    let y;
+    if (args.pointerCoordinates) {
+        x = args.pointerCoordinates.x;
+        y = args.pointerCoordinates.y;
+    } else if (args.collisionRect) {
+        // For keyboard navigation, use the center of the collisionRect
+        x = args.collisionRect.left + args.collisionRect.width / 2;
+        y = args.collisionRect.top + args.collisionRect.height / 2;
+    } else {
+        return [];
     }
-    // Only consider widgets in the same row (same Y axis)
-    if (y >= rect.top && y <= rect.bottom) {
-      const centerX = rect.left + rect.width / 2;
-      const distance = Math.abs(x - centerX);
-      collisions.push({
-        id: String(container.id),
-        data: {
-          value: distance
+    for (const container of args.droppableContainers){
+        const rect = args.droppableRects.get(container.id);
+        if (!rect) {
+            continue;
+        }
+        // Only consider widgets in the same row (same Y axis)
+        if (y >= rect.top && y <= rect.bottom) {
+            const centerX = rect.left + rect.width / 2;
+            const distance = Math.abs(x - centerX);
+            collisions.push({
+                id: String(container.id),
+                data: {
+                    value: distance
+                }
+            });
         }
-      });
     }
-  }
-  return collisions.sort((a, b) => a.data.value - b.data.value);
+    return collisions.sort((a, b)=>a.data.value - b.data.value);
 };
+
 //# sourceMappingURL=collisionDetection.js.map

package/dist/views/Dashboard/Default/ModularDashboard/utils/collisionDetection.js.map

@@ -1 +1 @@
-{"version":3,"file":"collisionDetection.js","names":["closestInXAxis","args","collisions","x","y","pointerCoordinates","collisionRect","left","width","top","height","container","droppableContainers","rect","droppableRects","get","id","bottom","centerX","distance","Math","abs","push","String","data","value","sort","a","b"],"sources":["../../../../../../src/views/Dashboard/Default/ModularDashboard/utils/collisionDetection.ts"],"sourcesContent":["import type { CollisionDetection } from '@dnd-kit/core'\n\n/**\n * Collision detection that considers the X\n * axis only with respect to the position of the pointer (or collisionRect for keyboard)\n */\nexport const closestInXAxis: CollisionDetection = (args) => {\n  const collisions: Array<{ data: { value: number }; id: string }> = []\n\n  // Use pointer coordinates if available (mouse/touch), otherwise use collisionRect center (keyboard)\n  let x: number\n  let y: number\n\n  if (args.pointerCoordinates) {\n    x = args.pointerCoordinates.x\n    y = args.pointerCoordinates.y\n  } else if (args.collisionRect) {\n    // For keyboard navigation, use the center of the collisionRect\n    x = args.collisionRect.left + args.collisionRect.width / 2\n    y = args.collisionRect.top + args.collisionRect.height / 2\n  } else {\n    return []\n  }\n\n  for (const container of args.droppableContainers) {\n    const rect = args.droppableRects.get(container.id)\n    if (!rect) {\n      continue\n    }\n\n    // Only consider widgets in the same row (same Y axis)\n    if (y >= rect.top && y <= rect.bottom) {\n      const centerX = rect.left + rect.width / 2\n      const distance = Math.abs(x - centerX)\n      collisions.push({ id: String(container.id), data: { value: distance } })\n    }\n  }\n\n  return collisions.sort((a, b) => a.data.value - b.data.value)\n}\n"],"mappings":"AAEA;;;GAIA,OAAO,MAAMA,cAAA,GAAsCC,IAAA;EACjD,MAAMC,UAAA,GAA6D,EAAE;EAErE;EACA,IAAIC,CAAA;EACJ,IAAIC,CAAA;EAEJ,IAAIH,IAAA,CAAKI,kBAAkB,EAAE;IAC3BF,CAAA,GAAIF,IAAA,CAAKI,kBAAkB,CAACF,CAAC;IAC7BC,CAAA,GAAIH,IAAA,CAAKI,kBAAkB,CAACD,CAAC;EAC/B,OAAO,IAAIH,IAAA,CAAKK,aAAa,EAAE;IAC7B;IACAH,CAAA,GAAIF,IAAA,CAAKK,aAAa,CAACC,IAAI,GAAGN,IAAA,CAAKK,aAAa,CAACE,KAAK,GAAG;IACzDJ,CAAA,GAAIH,IAAA,CAAKK,aAAa,CAACG,GAAG,GAAGR,IAAA,CAAKK,aAAa,CAACI,MAAM,GAAG;EAC3D,OAAO;IACL,OAAO,EAAE;EACX;EAEA,KAAK,MAAMC,SAAA,IAAaV,IAAA,CAAKW,mBAAmB,EAAE;IAChD,MAAMC,IAAA,GAAOZ,IAAA,CAAKa,cAAc,CAACC,GAAG,CAACJ,SAAA,CAAUK,EAAE;IACjD,IAAI,CAACH,IAAA,EAAM;MACT;IACF;IAEA;IACA,IAAIT,CAAA,IAAKS,IAAA,CAAKJ,GAAG,IAAIL,CAAA,IAAKS,IAAA,CAAKI,MAAM,EAAE;MACrC,MAAMC,OAAA,GAAUL,IAAA,CAAKN,IAAI,GAAGM,IAAA,CAAKL,KAAK,GAAG;MACzC,MAAMW,QAAA,GAAWC,IAAA,CAAKC,GAAG,CAAClB,CAAA,GAAIe,OAAA;MAC9BhB,UAAA,CAAWoB,IAAI,CAAC;QAAEN,EAAA,EAAIO,MAAA,CAAOZ,SAAA,CAAUK,EAAE;QAAGQ,IAAA,EAAM;UAAEC,KAAA,EAAON;QAAS;MAAE;IACxE;EACF;EAEA,OAAOjB,UAAA,CAAWwB,IAAI,CAAC,CAACC,CAAA,EAAGC,CAAA,KAAMD,CAAA,CAAEH,IAAI,CAACC,KAAK,GAAGG,CAAA,CAAEJ,IAAI,CAACC,KAAK;AAC9D","ignoreList":[]}
+{"version":3,"sources":["../../../../../../src/views/Dashboard/Default/ModularDashboard/utils/collisionDetection.ts"],"sourcesContent":["import type { CollisionDetection } from '@dnd-kit/core'\n\n/**\n * Collision detection that considers the X\n * axis only with respect to the position of the pointer (or collisionRect for keyboard)\n */\nexport const closestInXAxis: CollisionDetection = (args) => {\n  const collisions: Array<{ data: { value: number }; id: string }> = []\n\n  // Use pointer coordinates if available (mouse/touch), otherwise use collisionRect center (keyboard)\n  let x: number\n  let y: number\n\n  if (args.pointerCoordinates) {\n    x = args.pointerCoordinates.x\n    y = args.pointerCoordinates.y\n  } else if (args.collisionRect) {\n    // For keyboard navigation, use the center of the collisionRect\n    x = args.collisionRect.left + args.collisionRect.width / 2\n    y = args.collisionRect.top + args.collisionRect.height / 2\n  } else {\n    return []\n  }\n\n  for (const container of args.droppableContainers) {\n    const rect = args.droppableRects.get(container.id)\n    if (!rect) {\n      continue\n    }\n\n    // Only consider widgets in the same row (same Y axis)\n    if (y >= rect.top && y <= rect.bottom) {\n      const centerX = rect.left + rect.width / 2\n      const distance = Math.abs(x - centerX)\n      collisions.push({ id: String(container.id), data: { value: distance } })\n    }\n  }\n\n  return collisions.sort((a, b) => a.data.value - b.data.value)\n}\n"],"names":["closestInXAxis","args","collisions","x","y","pointerCoordinates","collisionRect","left","width","top","height","container","droppableContainers","rect","droppableRects","get","id","bottom","centerX","distance","Math","abs","push","String","data","value","sort","a","b"],"mappings":"AAEA;;;CAGC,GACD,OAAO,MAAMA,iBAAqC,CAACC;IACjD,MAAMC,aAA6D,EAAE;IAErE,oGAAoG;IACpG,IAAIC;IACJ,IAAIC;IAEJ,IAAIH,KAAKI,kBAAkB,EAAE;QAC3BF,IAAIF,KAAKI,kBAAkB,CAACF,CAAC;QAC7BC,IAAIH,KAAKI,kBAAkB,CAACD,CAAC;IAC/B,OAAO,IAAIH,KAAKK,aAAa,EAAE;QAC7B,+DAA+D;QAC/DH,IAAIF,KAAKK,aAAa,CAACC,IAAI,GAAGN,KAAKK,aAAa,CAACE,KAAK,GAAG;QACzDJ,IAAIH,KAAKK,aAAa,CAACG,GAAG,GAAGR,KAAKK,aAAa,CAACI,MAAM,GAAG;IAC3D,OAAO;QACL,OAAO,EAAE;IACX;IAEA,KAAK,MAAMC,aAAaV,KAAKW,mBAAmB,CAAE;QAChD,MAAMC,OAAOZ,KAAKa,cAAc,CAACC,GAAG,CAACJ,UAAUK,EAAE;QACjD,IAAI,CAACH,MAAM;YACT;QACF;QAEA,sDAAsD;QACtD,IAAIT,KAAKS,KAAKJ,GAAG,IAAIL,KAAKS,KAAKI,MAAM,EAAE;YACrC,MAAMC,UAAUL,KAAKN,IAAI,GAAGM,KAAKL,KAAK,GAAG;YACzC,MAAMW,WAAWC,KAAKC,GAAG,CAAClB,IAAIe;YAC9BhB,WAAWoB,IAAI,CAAC;gBAAEN,IAAIO,OAAOZ,UAAUK,EAAE;gBAAGQ,MAAM;oBAAEC,OAAON;gBAAS;YAAE;QACxE;IACF;IAEA,OAAOjB,WAAWwB,IAAI,CAAC,CAACC,GAAGC,IAAMD,EAAEH,IAAI,CAACC,KAAK,GAAGG,EAAEJ,IAAI,CAACC,KAAK;AAC9D,EAAC"}