@payloadcms/next 3.80.0-canary.3 → 3.80.0-internal-debug.daef79f

package/dist/views/Dashboard/Default/ModularDashboard/index.client.js

@@ -1,7 +1,5 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { DndContext, DragOverlay, useDraggable, useDroppable } from '@dnd-kit/core';
 import { snapCenterToCursor } from '@dnd-kit/modifiers';
 import { ChevronIcon, Popup, PopupList, useTranslation, XIcon } from '@payloadcms/ui';
@@ -9,433 +7,456 @@ import React, { useMemo, useState } from 'react';
 /**
  * Custom modifier that only applies snapCenterToCursor for pointer events.
  * During keyboard navigation, we handle positioning ourselves via the coordinate getter.
- */
-const snapCenterToCursorOnlyForPointer = args => {
-  const {
-    activatorEvent
-  } = args;
-  // Only apply snap for pointer events (mouse/touch), not keyboard
-  // Check activatorEvent.type since KeyboardEvent may not exist on server
-  if (activatorEvent && 'key' in activatorEvent) {
-    return args.transform;
-  }
-  return snapCenterToCursor(args);
+ */ const snapCenterToCursorOnlyForPointer = (args)=>{
+    const { activatorEvent } = args;
+    // Only apply snap for pointer events (mouse/touch), not keyboard
+    // Check activatorEvent.type since KeyboardEvent may not exist on server
+    if (activatorEvent && 'key' in activatorEvent) {
+        return args.transform;
+    }
+    return snapCenterToCursor(args);
 };
 import { DashboardStepNav } from './DashboardStepNav.js';
 import { useDashboardLayout } from './useDashboardLayout.js';
 import { closestInXAxis } from './utils/collisionDetection.js';
 import { useDashboardSensors } from './utils/sensors.js';
 import { WidgetEditControl } from './WidgetEditControl.js';
-/* eslint-disable perfectionist/sort-objects */
-const WIDTH_TO_PERCENTAGE = {
-  'x-small': 25,
-  small: 1 / 3 * 100,
-  medium: 50,
-  large: 2 / 3 * 100,
-  'x-large': 75,
-  full: 100
+/* eslint-disable perfectionist/sort-objects */ const WIDTH_TO_PERCENTAGE = {
+    'x-small': 25,
+    small: 1 / 3 * 100,
+    medium: 50,
+    large: 2 / 3 * 100,
+    'x-large': 75,
+    full: 100
 };
-export function ModularDashboardClient(t0) {
-  const $ = _c(22);
-  const {
-    clientLayout: initialLayout,
-    widgets
-  } = t0;
-  const {
-    t
-  } = useTranslation();
-  const {
-    addWidget,
-    cancel,
-    cancelModal,
-    currentLayout,
-    deleteWidget,
-    isEditing,
-    moveWidget,
-    resetLayout,
-    resizeWidget,
-    saveLayout,
-    setIsEditing,
-    updateWidgetData
-  } = useDashboardLayout(initialLayout);
-  const [activeDragId, setActiveDragId] = useState(null);
-  const sensors = useDashboardSensors();
-  let t1;
-  if ($[0] !== activeDragId || $[1] !== addWidget || $[2] !== cancel || $[3] !== cancelModal || $[4] !== currentLayout || $[5] !== deleteWidget || $[6] !== isEditing || $[7] !== moveWidget || $[8] !== resetLayout || $[9] !== resizeWidget || $[10] !== saveLayout || $[11] !== sensors || $[12] !== setIsEditing || $[13] !== t || $[14] !== updateWidgetData || $[15] !== widgets) {
-    let t2;
-    if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-      t2 = () => {
-        setActiveDragId(null);
-      };
-      $[17] = t2;
-    } else {
-      t2 = $[17];
-    }
-    let t3;
-    if ($[18] !== currentLayout || $[19] !== moveWidget) {
-      t3 = event => {
-        if (!event.over) {
-          setActiveDragId(null);
-          return;
-        }
-        const droppableId = event.over.id;
-        const i = droppableId.lastIndexOf("-");
-        const slug = droppableId.slice(0, i);
-        const position = droppableId.slice(i + 1);
-        if (slug === event.active.id) {
-          return;
-        }
-        const moveFromIndex = currentLayout?.findIndex(widget => widget.item.id === event.active.id);
-        let moveToIndex = currentLayout?.findIndex(widget_0 => widget_0.item.id === slug);
-        if (moveFromIndex < moveToIndex) {
-          moveToIndex--;
-        }
-        if (position === "after") {
-          moveToIndex++;
-        }
-        moveWidget({
-          moveFromIndex,
-          moveToIndex
-        });
-        setActiveDragId(null);
-      };
-      $[18] = currentLayout;
-      $[19] = moveWidget;
-      $[20] = t3;
-    } else {
-      t3 = $[20];
-    }
-    let t4;
-    if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-      t4 = event_0 => {
-        setActiveDragId(event_0.active.id);
-      };
-      $[21] = t4;
-    } else {
-      t4 = $[21];
-    }
-    t1 = _jsxs("div", {
-      children: [_jsx(DndContext, {
-        autoScroll: {
-          enabled: true,
-          threshold: {
-            x: 0,
-            y: 0.2
-          }
-        },
-        collisionDetection: closestInXAxis,
-        id: "dashboard-dnd-context",
-        onDragCancel: t2,
-        onDragEnd: t3,
-        onDragStart: t4,
-        sensors,
-        children: _jsxs("div", {
-          className: `modular-dashboard ${isEditing ? "editing" : ""}`,
-          style: {
-            display: "flex",
-            flexWrap: "wrap"
-          },
-          children: [currentLayout?.length === 0 && _jsx("div", {
-            className: "modular-dashboard__empty",
-            children: _jsx("p", {
-              children: t("dashboard:noItems")
-            })
-          }), currentLayout?.map((widget_1, _index) => _jsx(React.Fragment, {
-            children: _jsx(DraggableItem, {
-              disabled: !isEditing,
-              id: widget_1.item.id,
-              style: {
-                width: `${WIDTH_TO_PERCENTAGE[widget_1.item.width]}%`,
-                padding: "6px"
-              },
-              width: widget_1.item.width,
-              children: _jsxs("div", {
-                className: `widget-wrapper ${isEditing ? "widget-wrapper--editing" : ""}`,
-                children: [_jsx("div", {
-                  "aria-hidden": isEditing,
-                  className: "widget-content",
-                  inert: isEditing,
-                  children: widget_1.component
-                }), isEditing && _jsxs("div", {
-                  className: "widget-wrapper__controls",
-                  onPointerDown: _temp,
-                  children: [_jsx(WidgetEditControl, {
-                    onSave: data => {
-                      updateWidgetData(widget_1.item.id, data);
-                    },
-                    widgetData: widget_1.item.data,
-                    widgetID: widget_1.item.id
-                  }), _jsx(WidgetWidthDropdown, {
-                    currentWidth: widget_1.item.width,
-                    maxWidth: widget_1.item.maxWidth,
-                    minWidth: widget_1.item.minWidth,
-                    onResize: width => resizeWidget(widget_1.item.id, width)
-                  }), _jsxs("button", {
-                    className: "widget-wrapper__delete-btn",
-                    onClick: () => deleteWidget(widget_1.item.id),
-                    type: "button",
-                    children: [_jsx("span", {
-                      className: "sr-only",
-                      children: t("dashboard:deleteWidget", {
-                        id: widget_1.item.id
-                      })
-                    }), _jsx(XIcon, {})]
-                  })]
-                })]
-              })
-            })
-          }, widget_1.item.id)), _jsx(DragOverlay, {
-            className: "drag-overlay",
-            dropAnimation: {
-              duration: 100
-            },
-            modifiers: [snapCenterToCursorOnlyForPointer],
-            children: activeDragId ? (() => {
-              const draggedWidget = currentLayout?.find(widget_2 => widget_2.item.id === activeDragId);
-              return draggedWidget ? _jsx("div", {
-                style: {
-                  transform: "scale(0.25)"
+export function ModularDashboardClient({ clientLayout: initialLayout, widgets }) {
+    const { t } = useTranslation();
+    const { addWidget, cancel, cancelModal, currentLayout, deleteWidget, isEditing, moveWidget, resetLayout, resizeWidget, saveLayout, setIsEditing, updateWidgetData } = useDashboardLayout(initialLayout);
+    const [activeDragId, setActiveDragId] = useState(null);
+    const sensors = useDashboardSensors();
+    return /*#__PURE__*/ _jsxDEV("div", {
+        children: [
+            /*#__PURE__*/ _jsxDEV(DndContext, {
+                autoScroll: {
+                    enabled: true,
+                    threshold: {
+                        x: 0,
+                        // No horizontal scroll
+                        y: 0.2
+                    }
                 },
-                children: _jsx("div", {
-                  className: `widget-wrapper ${isEditing ? "widget-wrapper--editing" : ""}`,
-                  children: _jsx("div", {
-                    className: "widget-content",
-                    children: draggedWidget.component
-                  })
-                })
-              }) : null;
-            })() : null
-          })]
-        })
-      }), _jsx(DashboardStepNav, {
-        addWidget,
-        cancel,
-        isEditing,
-        resetLayout,
-        saveLayout,
-        setIsEditing,
-        widgets
-      }), cancelModal]
-    });
-    $[0] = activeDragId;
-    $[1] = addWidget;
-    $[2] = cancel;
-    $[3] = cancelModal;
-    $[4] = currentLayout;
-    $[5] = deleteWidget;
-    $[6] = isEditing;
-    $[7] = moveWidget;
-    $[8] = resetLayout;
-    $[9] = resizeWidget;
-    $[10] = saveLayout;
-    $[11] = sensors;
-    $[12] = setIsEditing;
-    $[13] = t;
-    $[14] = updateWidgetData;
-    $[15] = widgets;
-    $[16] = t1;
-  } else {
-    t1 = $[16];
-  }
-  return t1;
-}
-function _temp(e) {
-  return e.stopPropagation();
+                // Allow vertical scroll at 20% from edge
+                collisionDetection: closestInXAxis,
+                // https://github.com/clauderic/dnd-kit/issues/926#issuecomment-1640115665
+                id: "dashboard-dnd-context",
+                onDragCancel: ()=>{
+                    setActiveDragId(null);
+                },
+                onDragEnd: (event)=>{
+                    if (!event.over) {
+                        setActiveDragId(null);
+                        return;
+                    }
+                    const droppableId = event.over.id;
+                    const i = droppableId.lastIndexOf('-');
+                    const slug = droppableId.slice(0, i);
+                    const position = droppableId.slice(i + 1);
+                    if (slug === event.active.id) {
+                        return;
+                    }
+                    const moveFromIndex = currentLayout?.findIndex((widget)=>widget.item.id === event.active.id);
+                    let moveToIndex = currentLayout?.findIndex((widget)=>widget.item.id === slug);
+                    if (moveFromIndex < moveToIndex) {
+                        moveToIndex--;
+                    }
+                    if (position === 'after') {
+                        moveToIndex++;
+                    }
+                    moveWidget({
+                        moveFromIndex,
+                        moveToIndex
+                    });
+                    setActiveDragId(null);
+                },
+                onDragStart: (event)=>{
+                    setActiveDragId(event.active.id);
+                },
+                sensors: sensors,
+                children: /*#__PURE__*/ _jsxDEV("div", {
+                    className: `modular-dashboard ${isEditing ? 'editing' : ''}`,
+                    style: {
+                        display: 'flex',
+                        flexWrap: 'wrap'
+                    },
+                    children: [
+                        // Don't add gap here! We need to use padding on the widgets instead
+                        // to make sure all rows have the same width always.
+                        currentLayout?.length === 0 && /*#__PURE__*/ _jsxDEV("div", {
+                            className: "modular-dashboard__empty",
+                            children: /*#__PURE__*/ _jsxDEV("p", {
+                                children: t('dashboard:noItems')
+                            }, void 0, false, {
+                                fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                                lineNumber: 146,
+                                columnNumber: 15
+                            }, this)
+                        }, void 0, false, {
+                            fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                            lineNumber: 145,
+                            columnNumber: 13
+                        }, this),
+                        currentLayout?.map((widget, _index)=>/*#__PURE__*/ _jsxDEV(React.Fragment, {
+                                children: /*#__PURE__*/ _jsxDEV(DraggableItem, {
+                                    disabled: !isEditing,
+                                    id: widget.item.id,
+                                    style: {
+                                        width: `${WIDTH_TO_PERCENTAGE[widget.item.width]}%`,
+                                        padding: '6px'
+                                    },
+                                    width: widget.item.width,
+                                    children: /*#__PURE__*/ _jsxDEV("div", {
+                                        className: `widget-wrapper ${isEditing ? 'widget-wrapper--editing' : ''}`,
+                                        children: [
+                                            /*#__PURE__*/ _jsxDEV("div", {
+                                                "aria-hidden": isEditing,
+                                                className: "widget-content",
+                                                inert: isEditing,
+                                                children: widget.component
+                                            }, void 0, false, {
+                                                fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                                                lineNumber: 161,
+                                                columnNumber: 19
+                                            }, this),
+                                            isEditing && /*#__PURE__*/ _jsxDEV("div", {
+                                                className: "widget-wrapper__controls",
+                                                onPointerDown: (e)=>e.stopPropagation(),
+                                                children: [
+                                                    /*#__PURE__*/ _jsxDEV(WidgetEditControl, {
+                                                        onSave: (data)=>{
+                                                            updateWidgetData(widget.item.id, data);
+                                                        },
+                                                        widgetData: widget.item.data,
+                                                        widgetID: widget.item.id
+                                                    }, void 0, false, {
+                                                        fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                                                        lineNumber: 169,
+                                                        columnNumber: 23
+                                                    }, this),
+                                                    /*#__PURE__*/ _jsxDEV(WidgetWidthDropdown, {
+                                                        currentWidth: widget.item.width,
+                                                        maxWidth: widget.item.maxWidth,
+                                                        minWidth: widget.item.minWidth,
+                                                        onResize: (width)=>resizeWidget(widget.item.id, width)
+                                                    }, void 0, false, {
+                                                        fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                                                        lineNumber: 176,
+                                                        columnNumber: 23
+                                                    }, this),
+                                                    /*#__PURE__*/ _jsxDEV("button", {
+                                                        className: "widget-wrapper__delete-btn",
+                                                        onClick: ()=>deleteWidget(widget.item.id),
+                                                        type: "button",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsxDEV("span", {
+                                                                className: "sr-only",
+                                                                children: t('dashboard:deleteWidget', {
+                                                                    id: widget.item.id
+                                                                })
+                                                            }, void 0, false, {
+                                                                fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                                                                lineNumber: 187,
+                                                                columnNumber: 25
+                                                            }, this),
+                                                            /*#__PURE__*/ _jsxDEV(XIcon, {}, void 0, false, {
+                                                                fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                                                                lineNumber: 190,
+                                                                columnNumber: 25
+                                                            }, this)
+                                                        ]
+                                                    }, void 0, true, {
+                                                        fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                                                        lineNumber: 182,
+                                                        columnNumber: 23
+                                                    }, this)
+                                                ]
+                                            }, void 0, true, {
+                                                fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                                                lineNumber: 165,
+                                                columnNumber: 21
+                                            }, this)
+                                        ]
+                                    }, void 0, true, {
+                                        fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                                        lineNumber: 160,
+                                        columnNumber: 17
+                                    }, this)
+                                }, void 0, false, {
+                                    fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                                    lineNumber: 151,
+                                    columnNumber: 15
+                                }, this)
+                            }, widget.item.id, false, {
+                                fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                                lineNumber: 150,
+                                columnNumber: 13
+                            }, this)),
+                        /*#__PURE__*/ _jsxDEV(DragOverlay, {
+                            className: "drag-overlay",
+                            dropAnimation: {
+                                duration: 100
+                            },
+                            // Uses custom modifier that only applies for pointer, not keyboard navigation.
+                            modifiers: [
+                                snapCenterToCursorOnlyForPointer
+                            ],
+                            children: activeDragId ? (()=>{
+                                const draggedWidget = currentLayout?.find((widget)=>widget.item.id === activeDragId);
+                                return draggedWidget ? /*#__PURE__*/ _jsxDEV("div", {
+                                    style: {
+                                        transform: 'scale(0.25)'
+                                    },
+                                    children: /*#__PURE__*/ _jsxDEV("div", {
+                                        className: `widget-wrapper ${isEditing ? 'widget-wrapper--editing' : ''}`,
+                                        children: /*#__PURE__*/ _jsxDEV("div", {
+                                            className: "widget-content",
+                                            children: draggedWidget.component
+                                        }, void 0, false, {
+                                            fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                                            lineNumber: 220,
+                                            columnNumber: 25
+                                        }, this)
+                                    }, void 0, false, {
+                                        fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                                        lineNumber: 217,
+                                        columnNumber: 23
+                                    }, this)
+                                }, void 0, false, {
+                                    fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                                    lineNumber: 212,
+                                    columnNumber: 21
+                                }, this) : null;
+                            })() : null
+                        }, void 0, false, {
+                            fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                            lineNumber: 198,
+                            columnNumber: 11
+                        }, this)
+                    ]
+                }, void 0, true, {
+                    fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                    lineNumber: 135,
+                    columnNumber: 9
+                }, this)
+            }, void 0, false, {
+                fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                lineNumber: 89,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV(DashboardStepNav, {
+                addWidget: addWidget,
+                cancel: cancel,
+                isEditing: isEditing,
+                resetLayout: resetLayout,
+                saveLayout: saveLayout,
+                setIsEditing: setIsEditing,
+                widgets: widgets
+            }, void 0, false, {
+                fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                lineNumber: 229,
+                columnNumber: 7
+            }, this),
+            cancelModal
+        ]
+    }, void 0, true, {
+        fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+        lineNumber: 88,
+        columnNumber: 5
+    }, this);
 }
-function WidgetWidthDropdown({
-  currentWidth,
-  maxWidth,
-  minWidth,
-  onResize
-}) {
-  // Filter options based on minWidth and maxWidth
-  const validOptions = useMemo(() => {
-    const minPercentage = WIDTH_TO_PERCENTAGE[minWidth];
-    const maxPercentage = WIDTH_TO_PERCENTAGE[maxWidth];
-    return Object.entries(WIDTH_TO_PERCENTAGE).map(([key, value]) => ({
-      width: key,
-      percentage: value
-    })).filter(option => option.percentage >= minPercentage && option.percentage <= maxPercentage);
-  }, [minWidth, maxWidth]);
-  const isDisabled = validOptions.length <= 1;
-  if (isDisabled) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(Popup, {
-    button: /*#__PURE__*/_jsxs("button", {
-      className: "widget-wrapper__size-btn",
-      onPointerDown: e => e.stopPropagation(),
-      type: "button",
-      children: [/*#__PURE__*/_jsx("span", {
-        className: "widget-wrapper__size-btn-text",
-        children: currentWidth
-      }), /*#__PURE__*/_jsx(ChevronIcon, {
-        className: "widget-wrapper__size-btn-icon"
-      })]
-    }),
-    buttonType: "custom",
-    render: ({
-      close
-    }) => /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
-      children: validOptions.map(option_0 => {
-        const isSelected = option_0.width === currentWidth;
-        return /*#__PURE__*/_jsxs(PopupList.Button, {
-          active: isSelected,
-          onClick: () => {
-            onResize(option_0.width);
-            close();
-          },
-          children: [/*#__PURE__*/_jsx("span", {
-            className: "widget-wrapper__size-btn-label",
-            children: option_0.width
-          }), /*#__PURE__*/_jsxs("span", {
-            className: "widget-wrapper__size-btn-percentage",
-            children: [option_0.percentage.toFixed(0), "%"]
-          })]
-        }, option_0.width);
-      })
-    }),
-    size: "small",
-    verticalAlign: "bottom"
-  });
+function WidgetWidthDropdown({ currentWidth, maxWidth, minWidth, onResize }) {
+    // Filter options based on minWidth and maxWidth
+    const validOptions = useMemo(()=>{
+        const minPercentage = WIDTH_TO_PERCENTAGE[minWidth];
+        const maxPercentage = WIDTH_TO_PERCENTAGE[maxWidth];
+        return Object.entries(WIDTH_TO_PERCENTAGE).map(([key, value])=>({
+                width: key,
+                percentage: value
+            })).filter((option)=>option.percentage >= minPercentage && option.percentage <= maxPercentage);
+    }, [
+        minWidth,
+        maxWidth
+    ]);
+    const isDisabled = validOptions.length <= 1;
+    if (isDisabled) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsxDEV(Popup, {
+        button: /*#__PURE__*/ _jsxDEV("button", {
+            className: "widget-wrapper__size-btn",
+            onPointerDown: (e)=>e.stopPropagation(),
+            type: "button",
+            children: [
+                /*#__PURE__*/ _jsxDEV("span", {
+                    className: "widget-wrapper__size-btn-text",
+                    children: currentWidth
+                }, void 0, false, {
+                    fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                    lineNumber: 281,
+                    columnNumber: 11
+                }, void 0),
+                /*#__PURE__*/ _jsxDEV(ChevronIcon, {
+                    className: "widget-wrapper__size-btn-icon"
+                }, void 0, false, {
+                    fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                    lineNumber: 282,
+                    columnNumber: 11
+                }, void 0)
+            ]
+        }, void 0, true, {
+            fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+            lineNumber: 276,
+            columnNumber: 9
+        }, void 0),
+        buttonType: "custom",
+        render: ({ close })=>/*#__PURE__*/ _jsxDEV(PopupList.ButtonGroup, {
+                children: validOptions.map((option)=>{
+                    const isSelected = option.width === currentWidth;
+                    return /*#__PURE__*/ _jsxDEV(PopupList.Button, {
+                        active: isSelected,
+                        onClick: ()=>{
+                            onResize(option.width);
+                            close();
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxDEV("span", {
+                                className: "widget-wrapper__size-btn-label",
+                                children: option.width
+                            }, void 0, false, {
+                                fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                                lineNumber: 299,
+                                columnNumber: 17
+                            }, void 0),
+                            /*#__PURE__*/ _jsxDEV("span", {
+                                className: "widget-wrapper__size-btn-percentage",
+                                children: [
+                                    option.percentage.toFixed(0),
+                                    "%"
+                                ]
+                            }, void 0, true, {
+                                fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                                lineNumber: 300,
+                                columnNumber: 17
+                            }, void 0)
+                        ]
+                    }, option.width, true, {
+                        fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                        lineNumber: 291,
+                        columnNumber: 15
+                    }, void 0);
+                })
+            }, void 0, false, {
+                fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                lineNumber: 287,
+                columnNumber: 9
+            }, void 0),
+        size: "small",
+        verticalAlign: "bottom"
+    }, void 0, false, {
+        fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+        lineNumber: 274,
+        columnNumber: 5
+    }, this);
 }
 function DraggableItem(props) {
-  const $ = _c(13);
-  let t0;
-  if ($[0] !== props.disabled || $[1] !== props.id) {
-    t0 = {
-      id: props.id,
-      disabled: props.disabled
-    };
-    $[0] = props.disabled;
-    $[1] = props.id;
-    $[2] = t0;
-  } else {
-    t0 = $[2];
-  }
-  const {
-    attributes,
-    isDragging,
-    listeners,
-    setNodeRef
-  } = useDraggable(t0);
-  const t1 = isDragging ? 0.3 : 1;
-  let t2;
-  if ($[3] !== attributes || $[4] !== listeners || $[5] !== props.children || $[6] !== props.disabled || $[7] !== props.id || $[8] !== props.style || $[9] !== props.width || $[10] !== setNodeRef || $[11] !== t1) {
+    const { attributes, isDragging, listeners, setNodeRef } = useDraggable({
+        id: props.id,
+        disabled: props.disabled
+    });
     const mergedStyles = {
-      ...props.style,
-      opacity: t1,
-      position: "relative"
+        ...props.style,
+        opacity: isDragging ? 0.3 : 1,
+        position: 'relative'
     };
+    // Only apply draggable attributes and listeners when not disabled
+    // to prevent disabling interactive elements inside the widget
     const draggableProps = props.disabled ? {} : {
-      ...listeners,
-      ...attributes
+        ...listeners,
+        ...attributes
     };
-    t2 = _jsxs("div", {
-      className: "widget",
-      "data-slug": props.id,
-      "data-width": props.width,
-      style: mergedStyles,
-      children: [_jsx(DroppableItem, {
-        id: props.id,
-        position: "before"
-      }), _jsx("div", {
-        className: "draggable",
-        id: props.id,
-        ref: setNodeRef,
-        ...draggableProps,
-        style: {
-          width: "100%",
-          height: "100%"
-        },
-        children: props.children
-      }), _jsx(DroppableItem, {
-        id: props.id,
-        position: "after"
-      })]
-    });
-    $[3] = attributes;
-    $[4] = listeners;
-    $[5] = props.children;
-    $[6] = props.disabled;
-    $[7] = props.id;
-    $[8] = props.style;
-    $[9] = props.width;
-    $[10] = setNodeRef;
-    $[11] = t1;
-    $[12] = t2;
-  } else {
-    t2 = $[12];
-  }
-  return t2;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: "widget",
+        "data-slug": props.id,
+        "data-width": props.width,
+        style: mergedStyles,
+        children: [
+            /*#__PURE__*/ _jsxDEV(DroppableItem, {
+                id: props.id,
+                position: "before"
+            }, void 0, false, {
+                fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                lineNumber: 338,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: "draggable",
+                id: props.id,
+                ref: setNodeRef,
+                ...draggableProps,
+                style: {
+                    width: '100%',
+                    height: '100%'
+                },
+                children: props.children
+            }, void 0, false, {
+                fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                lineNumber: 339,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV(DroppableItem, {
+                id: props.id,
+                position: "after"
+            }, void 0, false, {
+                fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+                lineNumber: 351,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+        lineNumber: 337,
+        columnNumber: 5
+    }, this);
 }
-function DroppableItem(t0) {
-  const $ = _c(11);
-  const {
-    id,
-    position
-  } = t0;
-  const t1 = `${id}-${position}`;
-  let t2;
-  if ($[0] !== position) {
-    t2 = {
-      position
-    };
-    $[0] = position;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
-  let t3;
-  if ($[2] !== t1 || $[3] !== t2) {
-    t3 = {
-      id: t1,
-      data: t2
-    };
-    $[2] = t1;
-    $[3] = t2;
-    $[4] = t3;
-  } else {
-    t3 = $[4];
-  }
-  const {
-    setNodeRef,
-    isOver
-  } = useDroppable(t3);
-  const t4 = `${id}-${position}`;
-  const t5 = position === "before" ? -2 : "auto";
-  const t6 = position === "after" ? -2 : "auto";
-  const t7 = isOver ? "var(--theme-success-400)" : "transparent";
-  let t8;
-  if ($[5] !== setNodeRef || $[6] !== t4 || $[7] !== t5 || $[8] !== t6 || $[9] !== t7) {
-    t8 = _jsx("div", {
-      className: "droppable-widget",
-      "data-testid": t4,
-      ref: setNodeRef,
-      style: {
-        position: "absolute",
-        left: t5,
-        right: t6,
-        top: 0,
-        bottom: 0,
-        borderRadius: "1000px",
-        width: "4px",
-        backgroundColor: t7,
-        marginBottom: "10px",
-        marginTop: "10px",
-        pointerEvents: "none",
-        zIndex: 1000
-      }
+function DroppableItem({ id, position }) {
+    const { setNodeRef, isOver } = useDroppable({
+        id: `${id}-${position}`,
+        data: {
+            position
+        }
     });
-    $[5] = setNodeRef;
-    $[6] = t4;
-    $[7] = t5;
-    $[8] = t6;
-    $[9] = t7;
-    $[10] = t8;
-  } else {
-    t8 = $[10];
-  }
-  return t8;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: "droppable-widget",
+        "data-testid": `${id}-${position}`,
+        ref: setNodeRef,
+        style: {
+            position: 'absolute',
+            left: position === 'before' ? -2 : 'auto',
+            right: position === 'after' ? -2 : 'auto',
+            top: 0,
+            bottom: 0,
+            borderRadius: '1000px',
+            width: '4px',
+            backgroundColor: isOver ? 'var(--theme-success-400)' : 'transparent',
+            marginBottom: '10px',
+            marginTop: '10px',
+            pointerEvents: 'none',
+            zIndex: 1000
+        }
+    }, void 0, false, {
+        fileName: "src/views/Dashboard/Default/ModularDashboard/index.client.tsx",
+        lineNumber: 360,
+        columnNumber: 5
+    }, this);
 }
+
 //# sourceMappingURL=index.client.js.map