@payloadcms/next 3.80.0-internal-debug.7019cc9 → 3.80.0-internal.0311fce

package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.js

@@ -2,72 +2,79 @@ import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerCompo
 import React from 'react';
 import { extractLocaleData } from '../utils/localeUtils.js';
 /**
-   * Instance-specific data for this widget
-   */ /**
-   * The slug of the widget to render
-   */ /**
  * Server function to render a widget on-demand.
  * Similar to render-field but specifically for dashboard widgets.
- */ export const renderWidgetHandler = ({ cookies, locale, permissions, req, widgetData, widgetSlug })=>{
-    if (!req.user) {
-        throw new Error('Unauthorized');
-    }
-    const { widgets } = req.payload.config.admin.dashboard;
-    const { importMap } = req.payload;
-    // Find the widget configuration
-    const widgetConfig = widgets.find((widget)=>widget.slug === widgetSlug);
-    if (!widgetConfig) {
-        return {
-            component: React.createElement('div', {
-                style: {
-                    background: 'var(--theme-elevation-50)',
-                    border: '1px solid var(--theme-elevation-200)',
-                    borderRadius: '4px',
-                    color: 'var(--theme-text)',
-                    padding: '20px',
-                    textAlign: 'center'
-                }
-            }, `Widget "${widgetSlug}" not found`)
-        };
-    }
-    try {
-        const localeFilteredData = widgetConfig.fields?.length ? extractLocaleData(widgetData || {}, req.locale || 'en', widgetConfig.fields) : widgetData || {};
-        const serverProps = {
-            cookies,
-            locale,
-            permissions,
-            req,
-            widgetData: localeFilteredData,
-            widgetSlug
-        };
-        // Render the widget server component
-        const component = RenderServerComponent({
-            Component: widgetConfig.Component,
-            importMap,
-            serverProps
-        });
-        return {
-            component
-        };
-    } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : String(error);
-        req.payload.logger.error({
-            err: error,
-            msg: `Error rendering widget "${widgetSlug}": ${errorMessage}`
-        });
-        return {
-            component: React.createElement('div', {
-                style: {
-                    background: 'var(--theme-error-50)',
-                    border: '1px solid var(--theme-error-200)',
-                    borderRadius: '4px',
-                    color: 'var(--theme-error-text)',
-                    padding: '20px',
-                    textAlign: 'center'
-                }
-            }, 'Error loading widget')
-        };
-    }
+ */
+export const renderWidgetHandler = ({
+  cookies,
+  locale,
+  permissions,
+  req,
+  widgetData,
+  widgetSlug
+}) => {
+  if (!req.user) {
+    throw new Error('Unauthorized');
+  }
+  const {
+    widgets
+  } = req.payload.config.admin.dashboard;
+  const {
+    importMap
+  } = req.payload;
+  // Find the widget configuration
+  const widgetConfig = widgets.find(widget => widget.slug === widgetSlug);
+  if (!widgetConfig) {
+    return {
+      component: React.createElement('div', {
+        style: {
+          background: 'var(--theme-elevation-50)',
+          border: '1px solid var(--theme-elevation-200)',
+          borderRadius: '4px',
+          color: 'var(--theme-text)',
+          padding: '20px',
+          textAlign: 'center'
+        }
+      }, `Widget "${widgetSlug}" not found`)
+    };
+  }
+  try {
+    const localeFilteredData = widgetConfig.fields?.length ? extractLocaleData(widgetData || {}, req.locale || 'en', widgetConfig.fields) : widgetData || {};
+    const serverProps = {
+      cookies,
+      locale,
+      permissions,
+      req,
+      widgetData: localeFilteredData,
+      widgetSlug
+    };
+    // Render the widget server component
+    const component = RenderServerComponent({
+      Component: widgetConfig.Component,
+      importMap,
+      serverProps
+    });
+    return {
+      component
+    };
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    req.payload.logger.error({
+      err: error,
+      msg: `Error rendering widget "${widgetSlug}": ${errorMessage}`
+    });
+    return {
+      component: React.createElement('div', {
+        style: {
+          background: 'var(--theme-error-50)',
+          border: '1px solid var(--theme-error-200)',
+          borderRadius: '4px',
+          color: 'var(--theme-error-text)',
+          padding: '20px',
+          textAlign: 'center'
+        }
+      }, 'Error loading widget')
+    };
+  }
 };
-
 //# sourceMappingURL=renderWidgetServerFn.js.map

package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.ts"],"sourcesContent":["import type { Field, ServerFunction, WidgetServerProps } from 'payload'\n\nimport { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'\nimport React from 'react'\n\nimport { extractLocaleData } from '../utils/localeUtils.js'\n\nexport type RenderWidgetServerFnArgs = {\n  /**\n   * Instance-specific data for this widget\n   */\n  widgetData?: Record<string, unknown>\n  /**\n   * The slug of the widget to render\n   */\n  widgetSlug: string\n}\n\nexport type RenderWidgetServerFnReturnType = {\n  component: React.ReactNode\n}\n\n/**\n * Server function to render a widget on-demand.\n * Similar to render-field but specifically for dashboard widgets.\n */\nexport const renderWidgetHandler: ServerFunction<\n  RenderWidgetServerFnArgs,\n  RenderWidgetServerFnReturnType\n> = ({ cookies, locale, permissions, req, widgetData, widgetSlug }) => {\n  if (!req.user) {\n    throw new Error('Unauthorized')\n  }\n\n  const { widgets } = req.payload.config.admin.dashboard\n  const { importMap } = req.payload\n\n  // Find the widget configuration\n  const widgetConfig = widgets.find((widget) => widget.slug === widgetSlug)\n\n  if (!widgetConfig) {\n    return {\n      component: React.createElement(\n        'div',\n        {\n          style: {\n            background: 'var(--theme-elevation-50)',\n            border: '1px solid var(--theme-elevation-200)',\n            borderRadius: '4px',\n            color: 'var(--theme-text)',\n            padding: '20px',\n            textAlign: 'center',\n          },\n        },\n        `Widget \"${widgetSlug}\" not found`,\n      ),\n    }\n  }\n\n  try {\n    const localeFilteredData = widgetConfig.fields?.length\n      ? extractLocaleData(widgetData || {}, req.locale || 'en', widgetConfig.fields as Field[])\n      : widgetData || {}\n\n    const serverProps: WidgetServerProps = {\n      cookies,\n      locale,\n      permissions,\n      req,\n      widgetData: localeFilteredData,\n      widgetSlug,\n    }\n\n    // Render the widget server component\n    const component = RenderServerComponent({\n      Component: widgetConfig.Component,\n      importMap,\n      serverProps,\n    })\n\n    return { component }\n  } catch (error) {\n    const errorMessage = error instanceof Error ? error.message : String(error)\n\n    req.payload.logger.error({\n      err: error,\n      msg: `Error rendering widget \"${widgetSlug}\": ${errorMessage}`,\n    })\n\n    return {\n      component: React.createElement(\n        'div',\n        {\n          style: {\n            background: 'var(--theme-error-50)',\n            border: '1px solid var(--theme-error-200)',\n            borderRadius: '4px',\n            color: 'var(--theme-error-text)',\n            padding: '20px',\n            textAlign: 'center',\n          },\n        },\n        'Error loading widget',\n      ),\n    }\n  }\n}\n"],"names":["RenderServerComponent","React","extractLocaleData","renderWidgetHandler","cookies","locale","permissions","req","widgetData","widgetSlug","user","Error","widgets","payload","config","admin","dashboard","importMap","widgetConfig","find","widget","slug","component","createElement","style","background","border","borderRadius","color","padding","textAlign","localeFilteredData","fields","length","serverProps","Component","error","errorMessage","message","String","logger","err","msg"],"mappings":"AAEA,SAASA,qBAAqB,QAAQ,gDAA+C;AACrF,OAAOC,WAAW,QAAO;AAEzB,SAASC,iBAAiB,QAAQ,0BAAyB;AAGzD;;GAEC,GAED;;GAEC,GAQH;;;CAGC,GACD,OAAO,MAAMC,sBAGT,CAAC,EAAEC,OAAO,EAAEC,MAAM,EAAEC,WAAW,EAAEC,GAAG,EAAEC,UAAU,EAAEC,UAAU,EAAE;IAChE,IAAI,CAACF,IAAIG,IAAI,EAAE;QACb,MAAM,IAAIC,MAAM;IAClB;IAEA,MAAM,EAAEC,OAAO,EAAE,GAAGL,IAAIM,OAAO,CAACC,MAAM,CAACC,KAAK,CAACC,SAAS;IACtD,MAAM,EAAEC,SAAS,EAAE,GAAGV,IAAIM,OAAO;IAEjC,gCAAgC;IAChC,MAAMK,eAAeN,QAAQO,IAAI,CAAC,CAACC,SAAWA,OAAOC,IAAI,KAAKZ;IAE9D,IAAI,CAACS,cAAc;QACjB,OAAO;YACLI,WAAWrB,MAAMsB,aAAa,CAC5B,OACA;gBACEC,OAAO;oBACLC,YAAY;oBACZC,QAAQ;oBACRC,cAAc;oBACdC,OAAO;oBACPC,SAAS;oBACTC,WAAW;gBACb;YACF,GACA,CAAC,QAAQ,EAAErB,WAAW,WAAW,CAAC;QAEtC;IACF;IAEA,IAAI;QACF,MAAMsB,qBAAqBb,aAAac,MAAM,EAAEC,SAC5C/B,kBAAkBM,cAAc,CAAC,GAAGD,IAAIF,MAAM,IAAI,MAAMa,aAAac,MAAM,IAC3ExB,cAAc,CAAC;QAEnB,MAAM0B,cAAiC;YACrC9B;YACAC;YACAC;YACAC;YACAC,YAAYuB;YACZtB;QACF;QAEA,qCAAqC;QACrC,MAAMa,YAAYtB,sBAAsB;YACtCmC,WAAWjB,aAAaiB,SAAS;YACjClB;YACAiB;QACF;QAEA,OAAO;YAAEZ;QAAU;IACrB,EAAE,OAAOc,OAAO;QACd,MAAMC,eAAeD,iBAAiBzB,QAAQyB,MAAME,OAAO,GAAGC,OAAOH;QAErE7B,IAAIM,OAAO,CAAC2B,MAAM,CAACJ,KAAK,CAAC;YACvBK,KAAKL;YACLM,KAAK,CAAC,wBAAwB,EAAEjC,WAAW,GAAG,EAAE4B,cAAc;QAChE;QAEA,OAAO;YACLf,WAAWrB,MAAMsB,aAAa,CAC5B,OACA;gBACEC,OAAO;oBACLC,YAAY;oBACZC,QAAQ;oBACRC,cAAc;oBACdC,OAAO;oBACPC,SAAS;oBACTC,WAAW;gBACb;YACF,GACA;QAEJ;IACF;AACF,EAAC"}
+{"version":3,"file":"renderWidgetServerFn.js","names":["RenderServerComponent","React","extractLocaleData","renderWidgetHandler","cookies","locale","permissions","req","widgetData","widgetSlug","user","Error","widgets","payload","config","admin","dashboard","importMap","widgetConfig","find","widget","slug","component","createElement","style","background","border","borderRadius","color","padding","textAlign","localeFilteredData","fields","length","serverProps","Component","error","errorMessage","message","String","logger","err","msg"],"sources":["../../../../../../src/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.ts"],"sourcesContent":["import type { Field, ServerFunction, WidgetServerProps } from 'payload'\n\nimport { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'\nimport React from 'react'\n\nimport { extractLocaleData } from '../utils/localeUtils.js'\n\nexport type RenderWidgetServerFnArgs = {\n  /**\n   * Instance-specific data for this widget\n   */\n  widgetData?: Record<string, unknown>\n  /**\n   * The slug of the widget to render\n   */\n  widgetSlug: string\n}\n\nexport type RenderWidgetServerFnReturnType = {\n  component: React.ReactNode\n}\n\n/**\n * Server function to render a widget on-demand.\n * Similar to render-field but specifically for dashboard widgets.\n */\nexport const renderWidgetHandler: ServerFunction<\n  RenderWidgetServerFnArgs,\n  RenderWidgetServerFnReturnType\n> = ({ cookies, locale, permissions, req, widgetData, widgetSlug }) => {\n  if (!req.user) {\n    throw new Error('Unauthorized')\n  }\n\n  const { widgets } = req.payload.config.admin.dashboard\n  const { importMap } = req.payload\n\n  // Find the widget configuration\n  const widgetConfig = widgets.find((widget) => widget.slug === widgetSlug)\n\n  if (!widgetConfig) {\n    return {\n      component: React.createElement(\n        'div',\n        {\n          style: {\n            background: 'var(--theme-elevation-50)',\n            border: '1px solid var(--theme-elevation-200)',\n            borderRadius: '4px',\n            color: 'var(--theme-text)',\n            padding: '20px',\n            textAlign: 'center',\n          },\n        },\n        `Widget \"${widgetSlug}\" not found`,\n      ),\n    }\n  }\n\n  try {\n    const localeFilteredData = widgetConfig.fields?.length\n      ? extractLocaleData(widgetData || {}, req.locale || 'en', widgetConfig.fields as Field[])\n      : widgetData || {}\n\n    const serverProps: WidgetServerProps = {\n      cookies,\n      locale,\n      permissions,\n      req,\n      widgetData: localeFilteredData,\n      widgetSlug,\n    }\n\n    // Render the widget server component\n    const component = RenderServerComponent({\n      Component: widgetConfig.Component,\n      importMap,\n      serverProps,\n    })\n\n    return { component }\n  } catch (error) {\n    const errorMessage = error instanceof Error ? error.message : String(error)\n\n    req.payload.logger.error({\n      err: error,\n      msg: `Error rendering widget \"${widgetSlug}\": ${errorMessage}`,\n    })\n\n    return {\n      component: React.createElement(\n        'div',\n        {\n          style: {\n            background: 'var(--theme-error-50)',\n            border: '1px solid var(--theme-error-200)',\n            borderRadius: '4px',\n            color: 'var(--theme-error-text)',\n            padding: '20px',\n            textAlign: 'center',\n          },\n        },\n        'Error loading widget',\n      ),\n    }\n  }\n}\n"],"mappings":"AAEA,SAASA,qBAAqB,QAAQ;AACtC,OAAOC,KAAA,MAAW;AAElB,SAASC,iBAAiB,QAAQ;AAiBlC;;;;AAIA,OAAO,MAAMC,mBAAA,GAGTA,CAAC;EAAEC,OAAO;EAAEC,MAAM;EAAEC,WAAW;EAAEC,GAAG;EAAEC,UAAU;EAAEC;AAAU,CAAE;EAChE,IAAI,CAACF,GAAA,CAAIG,IAAI,EAAE;IACb,MAAM,IAAIC,KAAA,CAAM;EAClB;EAEA,MAAM;IAAEC;EAAO,CAAE,GAAGL,GAAA,CAAIM,OAAO,CAACC,MAAM,CAACC,KAAK,CAACC,SAAS;EACtD,MAAM;IAAEC;EAAS,CAAE,GAAGV,GAAA,CAAIM,OAAO;EAEjC;EACA,MAAMK,YAAA,GAAeN,OAAA,CAAQO,IAAI,CAAEC,MAAA,IAAWA,MAAA,CAAOC,IAAI,KAAKZ,UAAA;EAE9D,IAAI,CAACS,YAAA,EAAc;IACjB,OAAO;MACLI,SAAA,EAAWrB,KAAA,CAAMsB,aAAa,CAC5B,OACA;QACEC,KAAA,EAAO;UACLC,UAAA,EAAY;UACZC,MAAA,EAAQ;UACRC,YAAA,EAAc;UACdC,KAAA,EAAO;UACPC,OAAA,EAAS;UACTC,SAAA,EAAW;QACb;MACF,GACA,WAAWrB,UAAA,aAAuB;IAEtC;EACF;EAEA,IAAI;IACF,MAAMsB,kBAAA,GAAqBb,YAAA,CAAac,MAAM,EAAEC,MAAA,GAC5C/B,iBAAA,CAAkBM,UAAA,IAAc,CAAC,GAAGD,GAAA,CAAIF,MAAM,IAAI,MAAMa,YAAA,CAAac,MAAM,IAC3ExB,UAAA,IAAc,CAAC;IAEnB,MAAM0B,WAAA,GAAiC;MACrC9B,OAAA;MACAC,MAAA;MACAC,WAAA;MACAC,GAAA;MACAC,UAAA,EAAYuB,kBAAA;MACZtB;IACF;IAEA;IACA,MAAMa,SAAA,GAAYtB,qBAAA,CAAsB;MACtCmC,SAAA,EAAWjB,YAAA,CAAaiB,SAAS;MACjClB,SAAA;MACAiB;IACF;IAEA,OAAO;MAAEZ;IAAU;EACrB,EAAE,OAAOc,KAAA,EAAO;IACd,MAAMC,YAAA,GAAeD,KAAA,YAAiBzB,KAAA,GAAQyB,KAAA,CAAME,OAAO,GAAGC,MAAA,CAAOH,KAAA;IAErE7B,GAAA,CAAIM,OAAO,CAAC2B,MAAM,CAACJ,KAAK,CAAC;MACvBK,GAAA,EAAKL,KAAA;MACLM,GAAA,EAAK,2BAA2BjC,UAAA,MAAgB4B,YAAA;IAClD;IAEA,OAAO;MACLf,SAAA,EAAWrB,KAAA,CAAMsB,aAAa,CAC5B,OACA;QACEC,KAAA,EAAO;UACLC,UAAA,EAAY;UACZC,MAAA,EAAQ;UACRC,YAAA,EAAc;UACdC,KAAA,EAAO;UACPC,OAAA,EAAS;UACTC,SAAA,EAAW;QACb;MACF,GACA;IAEJ;EACF;AACF","ignoreList":[]}

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

@@ -4,203 +4,185 @@ 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();
-    const { t } = useTranslation();
-    // Sync state when initialLayout prop changes (e.g., when query params change and server component re-renders)
-    useEffect(()=>{
-        if (!isEditing) {
-            setCurrentLayout(initialLayout);
-        }
-    }, // do not sync while editing. Depending on `isEditing` in this effect causes an
+  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();
+  const {
+    t
+  } = useTranslation();
+  // Sync state when initialLayout prop changes (e.g., when query params change and server component re-renders)
+  useEffect(() => {
+    if (!isEditing) {
+      setCurrentLayout(initialLayout);
+    }
+    // do not sync while editing. Depending on `isEditing` in this effect causes an
     // unintended rollback when toggling from editing -> view mode after save.
-    [
-        initialLayout
-    ]);
-    const saveLayout = useCallback(async ()=>{
-        try {
-            const layoutData = currentLayout.map((item)=>item.item);
-            setIsEditing(false);
-            await setLayoutPreference(layoutData);
-        } catch  {
-            setIsEditing(true);
-            toast.error(t('error:failedToSaveLayout'));
-        }
-    }, [
-        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(t('error:failedToResetLayout'));
-        }
-    }, [
-        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 || JSON.stringify(widget.item.data || {}) !== JSON.stringify(initialWidget.item.data || {});
-        });
-        // 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, {
-                widgetData: {},
-                widgetId
-            }),
-            item: {
-                id: widgetId,
-                data: {},
-                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 updateWidgetData = useCallback((widgetId, data)=>{
-        if (!isEditing) {
-            return;
-        }
-        setCurrentLayout((prev)=>prev.map((item)=>item.item.id === widgetId ? {
-                    component: React.createElement(RenderWidget, {
-                        widgetData: data,
-                        widgetId
-                    }),
-                    item: {
-                        ...item.item,
-                        data
-                    }
-                } : item));
-    }, [
-        isEditing
-    ]);
-    const cancelModal = React.createElement(ConfirmationModal, {
-        body: t('dashboard:discardMessage'),
-        confirmLabel: t('dashboard:discardConfirmLabel'),
-        heading: t('dashboard:discardTitle'),
-        modalSlug: cancelModalSlug,
-        onConfirm: performCancel
+  }, [initialLayout]);
+  const saveLayout = useCallback(async () => {
+    try {
+      const layoutData = currentLayout.map(item => item.item);
+      setIsEditing(false);
+      await setLayoutPreference(layoutData);
+    } catch {
+      setIsEditing(true);
+      toast.error(t('error:failedToSaveLayout'));
+    }
+  }, [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(t('error:failedToResetLayout'));
+    }
+  }, [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 || JSON.stringify(widget.item.data || {}) !== JSON.stringify(initialWidget.item.data || {});
     });
-    return {
-        addWidget,
-        cancel,
-        cancelModal,
-        currentLayout,
-        deleteWidget,
-        isEditing,
-        moveWidget,
-        resetLayout,
-        resizeWidget,
-        saveLayout,
-        setIsEditing,
-        updateWidgetData
+    // 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, {
+        widgetData: {},
+        widgetId
+      }),
+      item: {
+        id: widgetId,
+        data: {},
+        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 updateWidgetData = useCallback((widgetId, data) => {
+    if (!isEditing) {
+      return;
+    }
+    setCurrentLayout(prev => prev.map(item => item.item.id === widgetId ? {
+      component: React.createElement(RenderWidget, {
+        widgetData: data,
+        widgetId
+      }),
+      item: {
+        ...item.item,
+        data
+      }
+    } : item));
+  }, [isEditing]);
+  const cancelModal = React.createElement(ConfirmationModal, {
+    body: t('dashboard:discardMessage'),
+    confirmLabel: t('dashboard:discardConfirmLabel'),
+    heading: t('dashboard:discardTitle'),
+    modalSlug: cancelModalSlug,
+    onConfirm: performCancel
+  });
+  return {
+    addWidget,
+    cancel,
+    cancelModal,
+    currentLayout,
+    deleteWidget,
+    isEditing,
+    moveWidget,
+    resetLayout,
+    resizeWidget,
+    saveLayout,
+    setIsEditing,
+    updateWidgetData
+  };
 }
 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,"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  useTranslation,\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  const { t } = useTranslation()\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    // do not sync while editing. Depending on `isEditing` in this effect causes an\n    // unintended rollback when toggling from editing -> view mode after save.\n  }, [initialLayout])\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(t('error:failedToSaveLayout'))\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(t('error:failedToResetLayout'))\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          JSON.stringify(widget.item.data || {}) !== JSON.stringify(initialWidget.item.data || {})\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          widgetData: {},\n          widgetId,\n        }),\n        item: {\n          id: widgetId,\n          data: {},\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 updateWidgetData = useCallback(\n    (widgetId: string, data: Record<string, unknown>) => {\n      if (!isEditing) {\n        return\n      }\n\n      setCurrentLayout((prev) =>\n        prev.map((item) =>\n          item.item.id === widgetId\n            ? {\n                component: React.createElement(RenderWidget, {\n                  widgetData: data,\n                  widgetId,\n                }),\n                item: {\n                  ...item.item,\n                  data,\n                } satisfies WidgetItem,\n              }\n            : item,\n        ),\n      )\n    },\n    [isEditing],\n  )\n\n  const cancelModal = React.createElement(ConfirmationModal, {\n    body: t('dashboard:discardMessage'),\n    confirmLabel: t('dashboard:discardConfirmLabel'),\n    heading: t('dashboard:discardTitle'),\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    updateWidgetData,\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","useTranslation","PREFERENCE_KEYS","React","useCallback","useEffect","useState","RenderWidget","useDashboardLayout","initialLayout","setLayoutPreference","useSetLayoutPreference","isEditing","setIsEditing","widgets","config","admin","dashboard","currentLayout","setCurrentLayout","openModal","cancelModalSlug","serverFunction","t","saveLayout","layoutData","map","item","error","resetLayout","result","name","args","layout","performCancel","cancel","hasChanges","length","some","widget","index","initialWidget","id","width","JSON","stringify","data","moveWidget","moveFromIndex","moveToIndex","prev","addWidget","widgetSlug","widgetId","Date","now","find","slug","newWidgetInstance","component","createElement","widgetData","maxWidth","minWidth","setTimeout","element","document","getElementById","scrollIntoView","behavior","block","closest","classList","add","remove","deleteWidget","filter","resizeWidget","newWidth","updateWidgetData","cancelModal","body","confirmLabel","heading","modalSlug","onConfirm","setPreference","DASHBOARD_LAYOUT","layouts"],"mappings":"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"}
+{"version":3,"file":"useDashboardLayout.js","names":["arrayMove","ConfirmationModal","toast","useConfig","useModal","usePreferences","useServerFunctions","useTranslation","PREFERENCE_KEYS","React","useCallback","useEffect","useState","RenderWidget","useDashboardLayout","initialLayout","setLayoutPreference","useSetLayoutPreference","isEditing","setIsEditing","widgets","config","admin","dashboard","currentLayout","setCurrentLayout","openModal","cancelModalSlug","serverFunction","t","saveLayout","layoutData","map","item","error","resetLayout","result","name","args","layout","performCancel","cancel","hasChanges","length","some","widget","index","initialWidget","id","width","JSON","stringify","data","moveWidget","moveFromIndex","moveToIndex","prev","addWidget","widgetSlug","widgetId","Date","now","find","slug","newWidgetInstance","component","createElement","widgetData","maxWidth","minWidth","setTimeout","element","document","getElementById","scrollIntoView","behavior","block","closest","classList","add","remove","deleteWidget","filter","resizeWidget","newWidth","updateWidgetData","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  useTranslation,\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  const { t } = useTranslation()\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    // do not sync while editing. Depending on `isEditing` in this effect causes an\n    // unintended rollback when toggling from editing -> view mode after save.\n  }, [initialLayout])\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(t('error:failedToSaveLayout'))\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(t('error:failedToResetLayout'))\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          JSON.stringify(widget.item.data || {}) !== JSON.stringify(initialWidget.item.data || {})\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          widgetData: {},\n          widgetId,\n        }),\n        item: {\n          id: widgetId,\n          data: {},\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 updateWidgetData = useCallback(\n    (widgetId: string, data: Record<string, unknown>) => {\n      if (!isEditing) {\n        return\n      }\n\n      setCurrentLayout((prev) =>\n        prev.map((item) =>\n          item.item.id === widgetId\n            ? {\n                component: React.createElement(RenderWidget, {\n                  widgetData: data,\n                  widgetId,\n                }),\n                item: {\n                  ...item.item,\n                  data,\n                } satisfies WidgetItem,\n              }\n            : item,\n        ),\n      )\n    },\n    [isEditing],\n  )\n\n  const cancelModal = React.createElement(ConfirmationModal, {\n    body: t('dashboard:discardMessage'),\n    confirmLabel: t('dashboard:discardConfirmLabel'),\n    heading: t('dashboard:discardTitle'),\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    updateWidgetData,\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":[]}