@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.5e065b3

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.client.js","names":["c","_c","DndContext","DragOverlay","useDraggable","useDroppable","snapCenterToCursor","getTranslation","toWords","React","useEffect","useMemo","useState","Button","Popup","PopupList","ChevronIcon","useTranslation","DashboardStepNav","useDashboardLayout","closestInXAxis","useDashboardSensors","WidgetContent","WidgetEditControl","snapCenterToCursorOnlyForPointer","args","activatorEvent","transform","WIDTH_TO_PERCENTAGE","small","medium","large","full","ModularDashboardClient","t0","$","clientLayout","initialLayout","widgets","i18n","t","addWidget","cancel","cancelModal","currentLayout","deleteWidget","isEditing","moveWidget","resetLayout","resizeWidget","saveLayout","setIsEditing","updateWidgetData","activeDragId","setActiveDragId","activeControlsWidgetID","setActiveControlsWidgetID","sensors","t1","t2","t3","t4","Symbol","for","t5","event","over","droppableId","id","i","lastIndexOf","slug","slice","position","active","moveFromIndex","findIndex","widget","item","moveToIndex","widget_0","t6","event_0","_jsxs","children","_jsx","autoScroll","enabled","threshold","x","y","collisionDetection","onDragCancel","onDragEnd","onDragStart","className","style","display","flexWrap","length","map","widget_1","slug_0","label","find","widgetConfig","DraggableItem","disabled","width","t7","dragHandle","filter","Boolean","join","component","onSave","data","widgetData","widgetID","widgetLabel","WidgetWidthDropdown","currentWidth","maxWidth","minWidth","onOpenChange","isOpen","onResize","buttonStyle","extraButtonProps","tabIndex","icon","margin","onClick","round","dropAnimation","duration","modifiers","draggedWidget","widget_2","inert","validOptions","minPercentage","maxPercentage","Object","entries","key","value","percentage","option","isDisabled","onToggleClose","onToggleOpen","popupType","render","close","ButtonGroup","isSelected","toFixed","renderButton","_active","onKeyDown","ariaProps","size","selected","verticalAlign","props","attributes","isDragging","listeners","setActivatorNodeRef","setNodeRef","mergedStyles","opacity","DroppableItem","undefined","ref","role","height","type","isOver","t8","left","right","top","bottom","borderRadius","backgroundColor","marginBottom","marginTop","pointerEvents","zIndex"],"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/index.client.tsx"],"sourcesContent":["'use client'\n\nimport type { Modifier } from '@dnd-kit/core'\nimport type { ClientWidget, WidgetWidth } from 'payload'\n\nimport { DndContext, DragOverlay, useDraggable, useDroppable } from '@dnd-kit/core'\nimport { snapCenterToCursor } from '@dnd-kit/modifiers'\nimport { getTranslation } from '@payloadcms/translations'\nimport { toWords } from 'payload/shared'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport { Button } from '../../../../elements/Button/index.js'\nimport { Popup } from '../../../../elements/Popup/index.js'\nimport * as PopupList from '../../../../elements/Popup/PopupButtonList/index.js'\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { DashboardStepNav } from './DashboardStepNav.js'\nimport { useDashboardLayout } from './useDashboardLayout.js'\nimport { closestInXAxis } from './utils/collisionDetection.js'\nimport { useDashboardSensors } from './utils/sensors.js'\nimport { WidgetContent } from './WidgetContent/index.js'\nimport { WidgetEditControl } from './WidgetEditControl.js'\n\n/**\n * Custom modifier that only applies snapCenterToCursor for pointer events.\n * During keyboard navigation, we handle positioning ourselves via the coordinate getter.\n */\nconst snapCenterToCursorOnlyForPointer: Modifier = (args) => {\n  const { activatorEvent } = args\n\n  // Only apply snap for pointer events (mouse/touch), not keyboard\n  // Check activatorEvent.type since KeyboardEvent may not exist on server\n  if (activatorEvent && 'key' in activatorEvent) {\n    return args.transform\n  }\n\n  return snapCenterToCursor(args)\n}\n\nexport type WidgetItem = {\n  data?: Record<string, unknown>\n  id: string\n  maxWidth: WidgetWidth\n  minWidth: WidgetWidth\n  width: WidgetWidth\n}\n\nexport type WidgetInstanceClient = {\n  component: React.ReactNode\n  item: WidgetItem\n}\n\nexport type DropTargetWidget = {\n  position: 'after' | 'before'\n  widget: WidgetInstanceClient\n} | null\n\n/* eslint-disable perfectionist/sort-objects */\nconst WIDTH_TO_PERCENTAGE = {\n  'x-small': 25,\n  small: (1 / 3) * 100,\n  medium: 50,\n  large: (2 / 3) * 100,\n  'x-large': 75,\n  full: 100,\n} as const\n\nexport function ModularDashboardClient({\n  clientLayout: initialLayout,\n  widgets,\n}: {\n  clientLayout: WidgetInstanceClient[]\n  widgets: ClientWidget[]\n}) {\n  const { i18n, t } = useTranslation()\n  const {\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  } = useDashboardLayout(initialLayout)\n\n  const [activeDragId, setActiveDragId] = useState<null | string>(null)\n  const [activeControlsWidgetID, setActiveControlsWidgetID] = useState<null | string>(null)\n  const sensors = useDashboardSensors()\n\n  useEffect(() => {\n    if (!isEditing) {\n      setActiveControlsWidgetID(null)\n    }\n  }, [isEditing])\n\n  return (\n    <div>\n      <DndContext\n        autoScroll={{\n          enabled: true,\n          threshold: {\n            x: 0, // No horizontal scroll\n            y: 0.2, // Allow vertical scroll at 20% from edge\n          },\n        }}\n        collisionDetection={closestInXAxis}\n        // https://github.com/clauderic/dnd-kit/issues/926#issuecomment-1640115665\n        id=\"dashboard-dnd-context\"\n        onDragCancel={() => {\n          setActiveDragId(null)\n        }}\n        onDragEnd={(event) => {\n          setActiveDragId(null)\n\n          if (!event.over) {\n            return\n          }\n          const droppableId = event.over.id as string\n          const i = droppableId.lastIndexOf('-')\n          const slug = droppableId.slice(0, i)\n          const position = droppableId.slice(i + 1)\n\n          if (slug === event.active.id) {\n            return\n          }\n\n          const moveFromIndex = currentLayout?.findIndex(\n            (widget) => widget.item.id === event.active.id,\n          )\n          let moveToIndex = currentLayout?.findIndex((widget) => widget.item.id === slug)\n          if (moveFromIndex < moveToIndex) {\n            moveToIndex--\n          }\n          if (position === 'after') {\n            moveToIndex++\n          }\n          moveWidget({ moveFromIndex, moveToIndex })\n        }}\n        onDragStart={(event) => {\n          setActiveDragId(event.active.id as string)\n        }}\n        sensors={sensors}\n      >\n        <div\n          className={`modular-dashboard ${isEditing ? 'editing' : ''}`}\n          style={{\n            display: 'flex',\n            flexWrap: 'wrap',\n            // Don't add gap here! We need to use padding on the widgets instead\n            // to make sure all rows have the same width always.\n          }}\n        >\n          {currentLayout?.length === 0 && (\n            <div className=\"modular-dashboard__empty\">\n              <p>{t('dashboard:noItems')}</p>\n            </div>\n          )}\n          {currentLayout?.map((widget) => {\n            const slug = widget.item.id.slice(0, widget.item.id.lastIndexOf('-'))\n            const label = getTranslation(\n              widgets.find((widgetConfig) => widgetConfig.slug === slug)?.label ?? toWords(slug),\n              i18n,\n            )\n\n            return (\n              <DraggableItem\n                disabled={!isEditing}\n                id={widget.item.id}\n                key={widget.item.id}\n                label={label}\n                style={{\n                  width: `${WIDTH_TO_PERCENTAGE[widget.item.width]}%`,\n                }}\n                width={widget.item.width}\n              >\n                {({ dragHandle }) => (\n                  <div\n                    className={[\n                      'widget-wrapper',\n                      isEditing ? 'widget-wrapper--editing' : '',\n                      activeControlsWidgetID === widget.item.id\n                        ? 'widget-wrapper--controls-active'\n                        : '',\n                    ]\n                      .filter(Boolean)\n                      .join(' ')}\n                  >\n                    <WidgetContent id={`${widget.item.id}-content`} isEditing={isEditing}>\n                      {widget.component}\n                    </WidgetContent>\n                    {dragHandle}\n                    {isEditing && (\n                      <div className=\"widget-wrapper__controls\">\n                        <WidgetEditControl\n                          onSave={(data) => {\n                            updateWidgetData(widget.item.id, data)\n                          }}\n                          widgetData={widget.item.data}\n                          widgetID={widget.item.id}\n                          widgetLabel={label}\n                        />\n                        <WidgetWidthDropdown\n                          currentWidth={widget.item.width}\n                          maxWidth={widget.item.maxWidth}\n                          minWidth={widget.item.minWidth}\n                          onOpenChange={(isOpen) => {\n                            setActiveControlsWidgetID(isOpen ? widget.item.id : null)\n                          }}\n                          onResize={(width) => resizeWidget(widget.item.id, width)}\n                          widgetLabel={label}\n                        />\n                        <Button\n                          aria-label={t('general:deleteLabel', { label })}\n                          buttonStyle=\"destructive\"\n                          className=\"widget-wrapper__delete-btn\"\n                          extraButtonProps={{ tabIndex: 0 }}\n                          icon=\"x\"\n                          margin={false}\n                          onClick={() => deleteWidget(widget.item.id)}\n                          round\n                        />\n                      </div>\n                    )}\n                  </div>\n                )}\n              </DraggableItem>\n            )\n          })}\n          <DragOverlay\n            className=\"drag-overlay\"\n            dropAnimation={{\n              duration: 100,\n            }}\n            // Uses custom modifier that only applies for pointer, not keyboard navigation.\n            modifiers={[snapCenterToCursorOnlyForPointer]}\n          >\n            {activeDragId\n              ? (() => {\n                  const draggedWidget = currentLayout?.find(\n                    (widget) => widget.item.id === activeDragId,\n                  )\n                  return draggedWidget ? (\n                    <div\n                      aria-hidden=\"true\"\n                      inert\n                      style={{\n                        transform: 'scale(0.25)',\n                      }}\n                    >\n                      <div\n                        className={`widget-wrapper ${isEditing ? 'widget-wrapper--editing' : ''}`}\n                      >\n                        <div className=\"widget-content\">{draggedWidget.component}</div>\n                      </div>\n                    </div>\n                  ) : null\n                })()\n              : null}\n          </DragOverlay>\n        </div>\n      </DndContext>\n      <DashboardStepNav\n        addWidget={addWidget}\n        cancel={cancel}\n        isEditing={isEditing}\n        resetLayout={resetLayout}\n        saveLayout={saveLayout}\n        setIsEditing={setIsEditing}\n        widgets={widgets}\n      />\n      {cancelModal}\n    </div>\n  )\n}\n\nfunction WidgetWidthDropdown({\n  currentWidth,\n  maxWidth,\n  minWidth,\n  onOpenChange,\n  onResize,\n  widgetLabel,\n}: {\n  currentWidth: WidgetWidth\n  maxWidth: WidgetWidth\n  minWidth: WidgetWidth\n  onOpenChange: (isOpen: boolean) => void\n  onResize: (width: WidgetWidth) => void\n  widgetLabel: string\n}) {\n  const { t } = useTranslation()\n\n  // Filter options based on minWidth and maxWidth\n  const validOptions = useMemo(() => {\n    const minPercentage = WIDTH_TO_PERCENTAGE[minWidth]\n    const maxPercentage = WIDTH_TO_PERCENTAGE[maxWidth]\n\n    return Object.entries(WIDTH_TO_PERCENTAGE)\n      .map(([key, value]) => ({\n        width: key as WidgetWidth,\n        percentage: value,\n      }))\n      .filter((option) => option.percentage >= minPercentage && option.percentage <= maxPercentage)\n  }, [minWidth, maxWidth])\n\n  const isDisabled = validOptions.length <= 1\n\n  if (isDisabled) {\n    return null\n  }\n\n  return (\n    <Popup\n      onToggleClose={() => onOpenChange(false)}\n      onToggleOpen={onOpenChange}\n      popupType=\"menu\"\n      render={({ close }) => (\n        <PopupList.ButtonGroup>\n          {validOptions.map((option) => {\n            const isSelected = option.width === currentWidth\n            return (\n              <PopupList.Button\n                active={isSelected}\n                key={option.width}\n                onClick={() => {\n                  onResize(option.width)\n                  close()\n                }}\n              >\n                <span className=\"widget-wrapper__size-btn-label\">{option.width}</span>\n                <span className=\"widget-wrapper__size-btn-percentage\">\n                  {option.percentage.toFixed(0)}%\n                </span>\n              </PopupList.Button>\n            )\n          })}\n        </PopupList.ButtonGroup>\n      )}\n      renderButton={({ active: _active, onClick, onKeyDown, ...ariaProps }) => (\n        <Button\n          aria-label={t('dashboard:resizeWidget', { label: widgetLabel, size: currentWidth })}\n          buttonStyle=\"secondary\"\n          className=\"widget-wrapper__size-btn\"\n          extraButtonProps={{\n            onKeyDown,\n            ...ariaProps,\n            tabIndex: 0,\n          }}\n          icon={<ChevronIcon className=\"widget-wrapper__size-btn-icon\" size={16} />}\n          margin={false}\n          onClick={onClick}\n          selected={_active}\n        >\n          {currentWidth}\n        </Button>\n      )}\n      size=\"small\"\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n\nfunction DraggableItem(props: {\n  children: (args: { dragHandle: React.ReactNode }) => React.ReactNode\n  disabled?: boolean\n  id: string\n  label: string\n  style?: React.CSSProperties\n  width: WidgetWidth\n}) {\n  const { t } = useTranslation()\n  const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef } = useDraggable({\n    id: props.id,\n    disabled: props.disabled,\n  })\n\n  const mergedStyles: React.CSSProperties = {\n    ...props.style,\n    opacity: isDragging ? 0.3 : 1,\n    position: 'relative',\n  }\n\n  return (\n    <div className=\"widget\" data-slug={props.id} data-width={props.width} style={mergedStyles}>\n      <DroppableItem id={props.id} position=\"before\" />\n      <div\n        aria-label={props.label}\n        aria-labelledby={props.disabled ? undefined : `${props.id}-content`}\n        className=\"draggable\"\n        id={props.id}\n        ref={setNodeRef}\n        role=\"group\"\n        style={{\n          width: '100%',\n          height: '100%',\n          position: 'relative',\n        }}\n        tabIndex={props.disabled ? undefined : 0}\n      >\n        {props.children({\n          dragHandle: !props.disabled && (\n            <button\n              {...attributes}\n              {...listeners}\n              aria-describedby={[attributes['aria-describedby'], `${props.id}-content`]\n                .filter(Boolean)\n                .join(' ')}\n              aria-label={t('general:dragToReorder')}\n              className=\"widget-wrapper__edit-overlay widget-wrapper__drag-btn\"\n              ref={setActivatorNodeRef}\n              type=\"button\"\n            />\n          ),\n        })}\n      </div>\n      <DroppableItem id={props.id} position=\"after\" />\n    </div>\n  )\n}\n\nfunction DroppableItem({ id, position }: { id: string; position: 'after' | 'before' }) {\n  const { setNodeRef, isOver } = useDroppable({ id: `${id}-${position}`, data: { position } })\n\n  return (\n    <div\n      className=\"droppable-widget\"\n      data-testid={`${id}-${position}`}\n      ref={setNodeRef}\n      style={{\n        position: 'absolute',\n        left: position === 'before' ? -2 : 'auto',\n        right: position === 'after' ? -2 : 'auto',\n        top: 0,\n        bottom: 0,\n        borderRadius: '1000px',\n        width: '4px',\n        backgroundColor: isOver ? 'var(--color-bg-brand-secondary)' : 'transparent',\n        marginBottom: '10px',\n        marginTop: '10px',\n        pointerEvents: 'none',\n        zIndex: 1000,\n      }}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Dashboard/Default/ModularDashboard/index.css

@@ -0,0 +1,191 @@
+@layer payload-default {
+  .modular-dashboard {
+    margin: calc(var(--spacer-4) / -2);
+    width: calc(100% + var(--spacer-4));
+    padding-block-end: var(--spacer-6);
+  }
+
+  .modular-dashboard .widget {
+    padding: calc(var(--spacer-4) / 2);
+  }
+
+  .modular-dashboard .widget-content {
+    height: 100%;
+  }
+
+  .widget-config-drawer__content {
+    height: 100%;
+    padding-top: var(--gutter-v);
+    padding-bottom: var(--gutter-v);
+
+    .form-submit {
+      margin-top: var(--spacer-2-5);
+
+      .btn {
+        width: auto;
+      }
+    }
+  }
+
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
+  @media (max-width: 768px) {
+    .modular-dashboard .widget {
+      /* stylelint-disable-next-line plugin/no-important -- TODO: pre-existing; revisit whether specificity can win instead */
+      width: 100% !important;
+    }
+
+    .modular-dashboard .widget-wrapper__size-btn {
+      display: none;
+    }
+  }
+
+  .modular-dashboard.editing .widget-content {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .modular-dashboard.editing .widget-wrapper__drag-btn {
+    cursor: grab;
+  }
+
+  .modular-dashboard .drag-overlay {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .modular-dashboard__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    padding: var(--spacer-4);
+  }
+
+  body:has(.drag-overlay) * {
+    cursor: grabbing;
+  }
+
+  .widget-wrapper__controls {
+    opacity: 0;
+  }
+
+  .widget:focus-visible .widget-wrapper__controls,
+  .widget:has(:focus-visible) .widget-wrapper__controls {
+    opacity: 1;
+  }
+
+  @keyframes widget-highlight {
+    0% {
+      box-shadow: 0 0 0 3px rgba(255, 208, 0, 0.9);
+    }
+    100% {
+      box-shadow: 0 0 0 3px rgba(255, 208, 0, 0);
+    }
+  }
+
+  .widget--highlight {
+    animation: widget-highlight 1.5s ease-out forwards;
+    border-radius: var(--radius-medium);
+  }
+
+  .widget-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+
+  .widget-wrapper--editing .widget-wrapper__controls {
+    transition: opacity 0.2s ease;
+  }
+
+  .widget-wrapper--editing:hover .widget-wrapper__controls,
+  .widget-wrapper--editing:has(:focus-visible) .widget-wrapper__controls,
+  .widget-wrapper--controls-active .widget-wrapper__controls {
+    opacity: 1;
+  }
+
+  .widget-wrapper__edit-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 5;
+    border: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.35);
+    outline: var(--accessibility-outline);
+    outline-offset: var(--accessibility-outline-offset);
+    border-radius: var(--radius-medium);
+    box-sizing: border-box;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  .widget-wrapper--editing:hover .widget-wrapper__edit-overlay,
+  .widget-wrapper--editing:has(:focus-visible) .widget-wrapper__edit-overlay,
+  .widget-wrapper--controls-active .widget-wrapper__edit-overlay {
+    opacity: 1;
+  }
+
+  .widget-wrapper__controls {
+    position: absolute;
+    top: var(--spacer-3);
+    right: var(--spacer-3);
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+
+  .widget-wrapper__size-btn {
+    min-width: auto;
+
+    & .btn__content {
+      gap: var(--spacer-1);
+    }
+  }
+
+  .widget-wrapper__size-btn-percentage {
+    margin-left: var(--spacer-1);
+    color: var(--color-text-tertiary);
+  }
+
+  .step-nav .dashboard-breadcrumb-dropdown .btn {
+    padding-right: var(--spacer-1);
+  }
+
+  .step-nav .dashboard-breadcrumb-dropdown__editing {
+    align-items: center;
+    display: flex;
+    gap: var(--spacer-2-5);
+
+    > span:first-child {
+      padding-left: var(--spacer-1);
+    }
+  }
+
+  .step-nav .dashboard-breadcrumb-dropdown__actions {
+    display: flex;
+    gap: var(--spacer-2);
+  }
+
+  .step-nav .dashboard-breadcrumb-dropdown__label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+  }
+
+  .step-nav .drawer-toggler--unstyled {
+    background: transparent;
+    margin: 0;
+    padding: 0;
+    outline: none;
+    box-shadow: none;
+
+    &:hover,
+    &:focus {
+      background: transparent;
+    }
+  }
+}

package/dist/views/Dashboard/Default/ModularDashboard/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { DashboardViewServerProps } from '../index.js';
+import './index.css';
+export declare function ModularDashboard(props: DashboardViewServerProps): Promise<React.JSX.Element>;
+//# sourceMappingURL=index.d.ts.map

package/dist/views/Dashboard/Default/ModularDashboard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAA;AAS3D,OAAO,aAAa,CAAA;AAIpB,wBAAsB,gBAAgB,CAAC,KAAK,EAAE,wBAAwB,8BAkDrE"}

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

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { RenderServerComponent } from '../../../../elements/RenderServerComponent/index.js';
+// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports/client bundle for proper client boundary in prod builds
+import { ModularDashboardClient } from '../../../../exports/client/index.js';
+import { getItemsFromConfig } from './utils/getItemsFromConfig.js';
+import { getItemsFromPreferences } from './utils/getItemsFromPreferences.js';
+import { extractLocaleData } from './utils/localeUtils.js';
+import './index.css';
+export async function ModularDashboard(props) {
+  const {
+    defaultLayout = [],
+    widgets = []
+  } = props.payload.config.admin.dashboard || {};
+  const {
+    importMap
+  } = props.payload;
+  const {
+    user
+  } = props;
+  const {
+    cookies,
+    locale,
+    permissions,
+    req
+  } = props.initPageResult;
+  const {
+    i18n
+  } = req;
+  const layout = (await getItemsFromPreferences(props.payload, user)) ?? (await getItemsFromConfig(defaultLayout, req, widgets));
+  const serverLayout = layout.map(layoutItem => {
+    const widgetSlug = layoutItem.id.slice(0, layoutItem.id.lastIndexOf('-'));
+    const widgetConfig = widgets.find(widget => widget.slug === widgetSlug);
+    const widgetData = widgetConfig?.fields?.length ? extractLocaleData(layoutItem.data || {}, req.locale || 'en', widgetConfig.fields) : layoutItem.data || {};
+    return {
+      component: RenderServerComponent({
+        Component: widgetConfig?.Component,
+        importMap,
+        serverProps: {
+          cookies,
+          locale,
+          permissions,
+          req,
+          user,
+          widgetData,
+          widgetSlug
+        }
+      }),
+      item: layoutItem
+    };
+  });
+  // Resolve function labels to static labels for client components
+  const clientWidgets = widgets.map(widget => {
+    const {
+      Component: _,
+      fields: __,
+      label,
+      ...rest
+    } = widget;
+    return {
+      ...rest,
+      label: typeof label === 'function' ? label({
+        i18n,
+        t: i18n.t
+      }) : label
+    };
+  });
+  return /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(ModularDashboardClient, {
+      clientLayout: serverLayout,
+      widgets: clientWidgets
+    })
+  });
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","RenderServerComponent","ModularDashboardClient","getItemsFromConfig","getItemsFromPreferences","extractLocaleData","ModularDashboard","props","defaultLayout","widgets","payload","config","admin","dashboard","importMap","user","cookies","locale","permissions","req","initPageResult","i18n","layout","serverLayout","map","layoutItem","widgetSlug","id","slice","lastIndexOf","widgetConfig","find","widget","slug","widgetData","fields","length","data","component","Component","serverProps","item","clientWidgets","_","__","label","rest","t","_jsx","clientLayout"],"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/index.tsx"],"sourcesContent":["import type { TFunction } from '@payloadcms/translations'\nimport type { ClientWidget, Field, WidgetServerProps } from 'payload'\n\nimport React from 'react'\n\nimport type { DashboardViewServerProps } from '../index.js'\nimport type { WidgetInstanceClient } from './index.client.js'\n\nimport { RenderServerComponent } from '../../../../elements/RenderServerComponent/index.js'\n// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports/client bundle for proper client boundary in prod builds\nimport { ModularDashboardClient } from '../../../../exports/client/index.js'\nimport { getItemsFromConfig } from './utils/getItemsFromConfig.js'\nimport { getItemsFromPreferences } from './utils/getItemsFromPreferences.js'\nimport { extractLocaleData } from './utils/localeUtils.js'\nimport './index.css'\n\ntype ServerLayout = WidgetInstanceClient[]\n\nexport async function ModularDashboard(props: DashboardViewServerProps) {\n  const { defaultLayout = [], widgets = [] } = props.payload.config.admin.dashboard || {}\n  const { importMap } = props.payload\n  const { user } = props\n  const { cookies, locale, permissions, req } = props.initPageResult\n  const { i18n } = req\n\n  const layout =\n    (await getItemsFromPreferences(props.payload, user)) ??\n    (await getItemsFromConfig(defaultLayout, req, widgets))\n\n  const serverLayout: ServerLayout = layout.map((layoutItem) => {\n    const widgetSlug = layoutItem.id.slice(0, layoutItem.id.lastIndexOf('-'))\n    const widgetConfig = widgets.find((widget) => widget.slug === widgetSlug)\n    const widgetData = widgetConfig?.fields?.length\n      ? extractLocaleData(layoutItem.data || {}, req.locale || 'en', widgetConfig.fields)\n      : layoutItem.data || {}\n\n    return {\n      component: RenderServerComponent({\n        Component: widgetConfig?.Component,\n        importMap,\n        serverProps: {\n          cookies,\n          locale,\n          permissions,\n          req,\n          user,\n          widgetData,\n          widgetSlug,\n        } satisfies WidgetServerProps,\n      }),\n      item: layoutItem,\n    }\n  })\n\n  // Resolve function labels to static labels for client components\n  const clientWidgets: ClientWidget[] = widgets.map((widget) => {\n    const { Component: _, fields: __, label, ...rest } = widget\n    return {\n      ...rest,\n      label: typeof label === 'function' ? label({ i18n, t: i18n.t as TFunction }) : label,\n    }\n  })\n\n  return (\n    <div>\n      <ModularDashboardClient clientLayout={serverLayout} widgets={clientWidgets} />\n    </div>\n  )\n}\n"],"mappings":";AAGA,OAAOA,KAAA,MAAW;AAKlB,SAASC,qBAAqB,QAAQ;AACtC;AACA,SAASC,sBAAsB,QAAQ;AACvC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,iBAAiB,QAAQ;AAClC,OAAO;AAIP,OAAO,eAAeC,iBAAiBC,KAA+B;EACpE,MAAM;IAAEC,aAAA,GAAgB,EAAE;IAAEC,OAAA,GAAU;EAAE,CAAE,GAAGF,KAAA,CAAMG,OAAO,CAACC,MAAM,CAACC,KAAK,CAACC,SAAS,IAAI,CAAC;EACtF,MAAM;IAAEC;EAAS,CAAE,GAAGP,KAAA,CAAMG,OAAO;EACnC,MAAM;IAAEK;EAAI,CAAE,GAAGR,KAAA;EACjB,MAAM;IAAES,OAAO;IAAEC,MAAM;IAAEC,WAAW;IAAEC;EAAG,CAAE,GAAGZ,KAAA,CAAMa,cAAc;EAClE,MAAM;IAAEC;EAAI,CAAE,GAAGF,GAAA;EAEjB,MAAMG,MAAA,GACJ,OAAOlB,uBAAA,CAAwBG,KAAA,CAAMG,OAAO,EAAEK,IAAA,OAC7C,MAAMZ,kBAAA,CAAmBK,aAAA,EAAeW,GAAA,EAAKV,OAAA;EAEhD,MAAMc,YAAA,GAA6BD,MAAA,CAAOE,GAAG,CAAEC,UAAA;IAC7C,MAAMC,UAAA,GAAaD,UAAA,CAAWE,EAAE,CAACC,KAAK,CAAC,GAAGH,UAAA,CAAWE,EAAE,CAACE,WAAW,CAAC;IACpE,MAAMC,YAAA,GAAerB,OAAA,CAAQsB,IAAI,CAAEC,MAAA,IAAWA,MAAA,CAAOC,IAAI,KAAKP,UAAA;IAC9D,MAAMQ,UAAA,GAAaJ,YAAA,EAAcK,MAAA,EAAQC,MAAA,GACrC/B,iBAAA,CAAkBoB,UAAA,CAAWY,IAAI,IAAI,CAAC,GAAGlB,GAAA,CAAIF,MAAM,IAAI,MAAMa,YAAA,CAAaK,MAAM,IAChFV,UAAA,CAAWY,IAAI,IAAI,CAAC;IAExB,OAAO;MACLC,SAAA,EAAWrC,qBAAA,CAAsB;QAC/BsC,SAAA,EAAWT,YAAA,EAAcS,SAAA;QACzBzB,SAAA;QACA0B,WAAA,EAAa;UACXxB,OAAA;UACAC,MAAA;UACAC,WAAA;UACAC,GAAA;UACAJ,IAAA;UACAmB,UAAA;UACAR;QACF;MACF;MACAe,IAAA,EAAMhB;IACR;EACF;EAEA;EACA,MAAMiB,aAAA,GAAgCjC,OAAA,CAAQe,GAAG,CAAEQ,MAAA;IACjD,MAAM;MAAEO,SAAA,EAAWI,CAAC;MAAER,MAAA,EAAQS,EAAE;MAAEC,KAAK;MAAE,GAAGC;IAAA,CAAM,GAAGd,MAAA;IACrD,OAAO;MACL,GAAGc,IAAI;MACPD,KAAA,EAAO,OAAOA,KAAA,KAAU,aAAaA,KAAA,CAAM;QAAExB,IAAA;QAAM0B,CAAA,EAAG1B,IAAA,CAAK0B;MAAe,KAAKF;IACjF;EACF;EAEA,oBACEG,IAAA,CAAC;cACC,aAAAA,IAAA,CAAC9C,sBAAA;MAAuB+C,YAAA,EAAc1B,YAAA;MAAcd,OAAA,EAASiC;;;AAGnE","ignoreList":[]}

package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * Utility to render a widget on-demand on the client.
+ */
+export declare const RenderWidget: React.FC<{
+    /**
+     * Instance-specific data for this widget
+     */
+    widgetData?: Record<string, unknown>;
+    /**
+     * Unique ID for this widget instance (format: "slug-timestamp")
+     */
+    widgetId: string;
+}>;
+//# sourceMappingURL=RenderWidget.d.ts.map

package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAU7D;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACpC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAA;CACjB,CAgEA,CAAA"}

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

@@ -0,0 +1,107 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useRef } from 'react';
+import { ShimmerEffect } from '../../../../../elements/ShimmerEffect/index.js';
+import { useServerFunctions } from '../../../../../providers/ServerFunctions/index.js';
+/**
+ * Utility to render a widget on-demand on the client.
+ */
+export const RenderWidget = t0 => {
+  const $ = _c(10);
+  const {
+    widgetData,
+    widgetId
+  } = t0;
+  const [Component, setComponent] = React.useState(null);
+  const {
+    serverFunction
+  } = useServerFunctions();
+  const requestIDRef = useRef(0);
+  let t1;
+  if ($[0] !== serverFunction || $[1] !== widgetData || $[2] !== widgetId) {
+    t1 = () => {
+      const render = async function render() {
+        const requestID = requestIDRef.current = requestIDRef.current + 1;
+        setComponent(null);
+        ;
+        try {
+          const widgetSlug = widgetId.slice(0, widgetId.lastIndexOf("-"));
+          const result = await serverFunction({
+            name: "render-widget",
+            args: {
+              widgetData,
+              widgetSlug
+            }
+          });
+          if (requestID !== requestIDRef.current) {
+            return;
+          }
+          setComponent(result.component);
+        } catch (t2) {
+          if (requestID !== requestIDRef.current) {
+            return;
+          }
+          setComponent(React.createElement("div", {
+            style: {
+              background: "var(--color-bg-danger-tertiary)",
+              border: "var(--stroke-width-small) solid var(--color-border-danger)",
+              borderRadius: "var(--radius-medium)",
+              color: "var(--color-text-danger)",
+              padding: "var(--spacer-3)",
+              textAlign: "center"
+            }
+          }, "Failed to load widget. Please try again later."));
+        }
+      };
+      render();
+    };
+    $[0] = serverFunction;
+    $[1] = widgetData;
+    $[2] = widgetId;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const renderWidget = t1;
+  let t2;
+  let t3;
+  if ($[4] !== renderWidget) {
+    t2 = () => {
+      renderWidget();
+    };
+    t3 = [renderWidget];
+    $[4] = renderWidget;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t2 = $[5];
+    t3 = $[6];
+  }
+  useEffect(t2, t3);
+  if (!Component) {
+    let t4;
+    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = _jsx(ShimmerEffect, {
+        height: "100%"
+      });
+      $[7] = t4;
+    } else {
+      t4 = $[7];
+    }
+    return t4;
+  }
+  let t4;
+  if ($[8] !== Component) {
+    t4 = _jsx(_Fragment, {
+      children: Component
+    });
+    $[8] = Component;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
+};
+//# sourceMappingURL=RenderWidget.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RenderWidget.js","names":["c","_c","React","useCallback","useEffect","useRef","ShimmerEffect","useServerFunctions","RenderWidget","t0","$","widgetData","widgetId","Component","setComponent","useState","serverFunction","requestIDRef","t1","render","requestID","current","widgetSlug","slice","lastIndexOf","result","name","args","component","t2","createElement","style","background","border","borderRadius","color","padding","textAlign","renderWidget","t3","t4","Symbol","for","_jsx","height","_Fragment","children"],"sources":["../../../../../../src/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useEffect, useRef } from 'react'\n\nimport type {\n  RenderWidgetServerFnArgs,\n  RenderWidgetServerFnReturnType,\n} from './renderWidgetServerFn.js'\n\nimport { ShimmerEffect } from '../../../../../elements/ShimmerEffect/index.js'\nimport { useServerFunctions } from '../../../../../providers/ServerFunctions/index.js'\n\n/**\n * Utility to render a widget on-demand on the client.\n */\nexport const RenderWidget: React.FC<{\n  /**\n   * Instance-specific data for this widget\n   */\n  widgetData?: Record<string, unknown>\n  /**\n   * Unique ID for this widget instance (format: \"slug-timestamp\")\n   */\n  widgetId: string\n}> = ({ widgetData, widgetId }) => {\n  const [Component, setComponent] = React.useState<null | React.ReactNode>(null)\n  const { serverFunction } = useServerFunctions()\n  const requestIDRef = useRef(0)\n\n  const renderWidget = useCallback(() => {\n    async function render() {\n      const requestID = ++requestIDRef.current\n      setComponent(null)\n\n      try {\n        const widgetSlug = widgetId.slice(0, widgetId.lastIndexOf('-'))\n\n        const result = (await serverFunction({\n          name: 'render-widget',\n          args: {\n            widgetData,\n            widgetSlug,\n          } as RenderWidgetServerFnArgs,\n        })) as RenderWidgetServerFnReturnType\n\n        if (requestID !== requestIDRef.current) {\n          return\n        }\n\n        setComponent(result.component)\n      } catch (_error) {\n        if (requestID !== requestIDRef.current) {\n          return\n        }\n\n        // Log error but don't expose details to console in production\n\n        // Fallback error component\n        setComponent(\n          React.createElement(\n            'div',\n            {\n              style: {\n                background: 'var(--color-bg-danger-tertiary)',\n                border: 'var(--stroke-width-small) solid var(--color-border-danger)',\n                borderRadius: 'var(--radius-medium)',\n                color: 'var(--color-text-danger)',\n                padding: 'var(--spacer-3)',\n                textAlign: 'center',\n              },\n            },\n            'Failed to load widget. Please try again later.',\n          ),\n        )\n      }\n    }\n    void render()\n  }, [serverFunction, widgetData, widgetId])\n\n  useEffect(() => {\n    void renderWidget()\n  }, [renderWidget])\n\n  if (!Component) {\n    return <ShimmerEffect height=\"100%\" />\n  }\n\n  return <>{Component}</>\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ;AAOtD,SAASC,aAAa,QAAQ;AAC9B,SAASC,kBAAkB,QAAQ;AAEnC;;;AAGA,OAAO,MAAMC,YAAA,GASRC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,UAAA;IAAAC;EAAA,IAAAH,EAAwB;EAC5B,OAAAI,SAAA,EAAAC,YAAA,IAAkCZ,KAAA,CAAAa,QAAA,KAAuC;EACzE;IAAAC;EAAA,IAA2BT,kBAAA;EAC3B,MAAAU,YAAA,GAAqBZ,MAAA,EAAO;EAAA,IAAAa,EAAA;EAAA,IAAAR,CAAA,QAAAM,cAAA,IAAAN,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAE,QAAA;IAEKM,EAAA,GAAAA,CAAA;MAC/B,MAAAC,MAAA,kBAAAA,OAAA;QACE,MAAAC,SAAA,GAAoBH,YAAA,CAAAI,OAAA,GAAAJ,YAAA,CAAAI,OAAA,IAAoB;QACxCP,YAAA,KAAa;QAAA;QAAA;UAGX,MAAAQ,UAAA,GAAmBV,QAAA,CAAAW,KAAA,IAAkBX,QAAA,CAAAY,WAAA,CAAqB;UAE1D,MAAAC,MAAA,SAAsBT,cAAA;YAAAU,IAAA,EACd;YAAAC,IAAA;cAAAhB,UAAA;cAAAW;YAAA;UAAA,CAKR;UAAA,IAEIF,SAAA,KAAcH,YAAA,CAAAI,OAAoB;YAAA;UAAA;UAItCP,YAAA,CAAaW,MAAA,CAAAG,SAAgB;QAAA,SAAAC,EAAA;UAAA,IAEzBT,SAAA,KAAcH,YAAA,CAAAI,OAAoB;YAAA;UAAA;UAOtCP,YAAA,CACEZ,KAAA,CAAA4B,aAAA,CACE;YAAAC,KAAA;cAAAC,UAAA,EAGgB;cAAAC,MAAA,EACJ;cAAAC,YAAA,EACM;cAAAC,KAAA,EACP;cAAAC,OAAA,EACE;cAAAC,SAAA,EACE;YAAA;UAAA,GAGf;QAAA;MAAA;MAKHlB,MAAA;IAAA;IACPT,CAAA,MAAAM,cAAA;IAAAN,CAAA,MAAAC,UAAA;IAAAD,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAhDA,MAAA4B,YAAA,GAAqBpB,EAgDoB;EAAA,IAAAW,EAAA;EAAA,IAAAU,EAAA;EAAA,IAAA7B,CAAA,QAAA4B,YAAA;IAE/BT,EAAA,GAAAA,CAAA;MACHS,YAAA;IAAA;IACJC,EAAA,IAACD,YAAA;IAAa5B,CAAA,MAAA4B,YAAA;IAAA5B,CAAA,MAAAmB,EAAA;IAAAnB,CAAA,MAAA6B,EAAA;EAAA;IAAAV,EAAA,GAAAnB,CAAA;IAAA6B,EAAA,GAAA7B,CAAA;EAAA;EAFjBN,SAAA,CAAUyB,EAEV,EAAGU,EAAc;EAAA,KAEZ1B,SAAA;IAAA,IAAA2B,EAAA;IAAA,IAAA9B,CAAA,QAAA+B,MAAA,CAAAC,GAAA;MACIF,EAAA,GAAAG,IAAA,CAAArC,aAAA;QAAAsC,MAAA,EAAsB;MAAA,C;;;;;WAAtBJ,E;;;;IAGFA,EAAA,GAAAG,IAAA,CAAAE,SAAA;MAAAC,QAAA,EAAGjC;IAAA,C;;;;;;SAAH2B,E;CACT","ignoreList":[]}

package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.d.ts

@@ -0,0 +1,12 @@
+import type { ServerFunction } from 'payload';
+import type { WidgetInstanceClient } from '../index.client.js';
+export type GetDefaultLayoutServerFnArgs = Record<string, never>;
+export type GetDefaultLayoutServerFnReturnType = {
+    layout: WidgetInstanceClient[];
+};
+/**
+ * Server function to get the default dashboard layout on-demand.
+ * Used when resetting the dashboard to its default configuration.
+ */
+export declare const getDefaultLayoutHandler: ServerFunction<GetDefaultLayoutServerFnArgs, Promise<GetDefaultLayoutServerFnReturnType>>;
+//# sourceMappingURL=getDefaultLayoutServerFn.d.ts.map

package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDefaultLayoutServerFn.d.ts","sourceRoot":"","sources":["../../../../../../src/views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,cAAc,EAGf,MAAM,SAAS,CAAA;AAEhB,OAAO,KAAK,EAAE,oBAAoB,EAAc,MAAM,oBAAoB,CAAA;AAI1E,MAAM,MAAM,4BAA4B,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;AAEhE,MAAM,MAAM,kCAAkC,GAAG;IAC/C,MAAM,EAAE,oBAAoB,EAAE,CAAA;CAC/B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,cAAc,CAClD,4BAA4B,EAC5B,OAAO,CAAC,kCAAkC,CAAC,CAgC5C,CAAA"}

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

@@ -0,0 +1,67 @@
+import { RenderServerComponent } from '../../../../../elements/RenderServerComponent/index.js';
+/**
+ * Server function to get the default dashboard layout on-demand.
+ * Used when resetting the dashboard to its default configuration.
+ */
+export const getDefaultLayoutHandler = async ({
+  cookies,
+  locale,
+  permissions,
+  req,
+  user
+}) => {
+  if (!req.user) {
+    throw new Error('Unauthorized');
+  }
+  const {
+    defaultLayout = [],
+    widgets = []
+  } = req.payload.config.admin.dashboard || {};
+  const {
+    importMap
+  } = req.payload;
+  const layoutItems = await getItemsFromConfig(defaultLayout, req, widgets);
+  const layout = layoutItems.map(layoutItem => {
+    const widgetSlug = layoutItem.id.slice(0, layoutItem.id.lastIndexOf('-'));
+    return {
+      component: RenderServerComponent({
+        Component: widgets.find(widget => widget.slug === widgetSlug)?.Component,
+        importMap,
+        serverProps: {
+          cookies,
+          locale,
+          permissions,
+          req,
+          user,
+          widgetData: layoutItem.data || {},
+          widgetSlug
+        }
+      }),
+      item: layoutItem
+    };
+  });
+  return {
+    layout
+  };
+};
+async function getItemsFromConfig(defaultLayout, req, widgets) {
+  let widgetInstances;
+  if (typeof defaultLayout === 'function') {
+    widgetInstances = await defaultLayout({
+      req
+    });
+  } else {
+    widgetInstances = defaultLayout;
+  }
+  return widgetInstances.map((widgetInstance, index) => {
+    const widget = widgets.find(w => w.slug === widgetInstance.widgetSlug);
+    return {
+      id: `${widgetInstance.widgetSlug}-${index}`,
+      data: widgetInstance.data,
+      maxWidth: widget?.maxWidth ?? 'full',
+      minWidth: widget?.minWidth ?? 'x-small',
+      width: widgetInstance.width || 'x-small'
+    };
+  });
+}
+//# sourceMappingURL=getDefaultLayoutServerFn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getDefaultLayoutServerFn.js","names":["RenderServerComponent","getDefaultLayoutHandler","cookies","locale","permissions","req","user","Error","defaultLayout","widgets","payload","config","admin","dashboard","importMap","layoutItems","getItemsFromConfig","layout","map","layoutItem","widgetSlug","id","slice","lastIndexOf","component","Component","find","widget","slug","serverProps","widgetData","data","item","widgetInstances","widgetInstance","index","w","maxWidth","minWidth","width"],"sources":["../../../../../../src/views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.ts"],"sourcesContent":["import type {\n  DashboardConfig,\n  PayloadRequest,\n  ServerFunction,\n  Widget,\n  WidgetServerProps,\n} from 'payload'\n\nimport type { WidgetInstanceClient, WidgetItem } from '../index.client.js'\n\nimport { RenderServerComponent } from '../../../../../elements/RenderServerComponent/index.js'\n\nexport type GetDefaultLayoutServerFnArgs = Record<string, never>\n\nexport type GetDefaultLayoutServerFnReturnType = {\n  layout: WidgetInstanceClient[]\n}\n\n/**\n * Server function to get the default dashboard layout on-demand.\n * Used when resetting the dashboard to its default configuration.\n */\nexport const getDefaultLayoutHandler: ServerFunction<\n  GetDefaultLayoutServerFnArgs,\n  Promise<GetDefaultLayoutServerFnReturnType>\n> = async ({ cookies, locale, permissions, req, user }) => {\n  if (!req.user) {\n    throw new Error('Unauthorized')\n  }\n\n  const { defaultLayout = [], widgets = [] } = req.payload.config.admin.dashboard || {}\n  const { importMap } = req.payload\n\n  const layoutItems = await getItemsFromConfig(defaultLayout, req, widgets)\n\n  const layout: WidgetInstanceClient[] = layoutItems.map((layoutItem) => {\n    const widgetSlug = layoutItem.id.slice(0, layoutItem.id.lastIndexOf('-'))\n    return {\n      component: RenderServerComponent({\n        Component: widgets.find((widget) => widget.slug === widgetSlug)?.Component,\n        importMap,\n        serverProps: {\n          cookies,\n          locale,\n          permissions,\n          req,\n          user,\n          widgetData: layoutItem.data || {},\n          widgetSlug,\n        } satisfies WidgetServerProps,\n      }),\n      item: layoutItem,\n    }\n  })\n\n  return { layout }\n}\n\nasync function getItemsFromConfig(\n  defaultLayout: NonNullable<DashboardConfig['defaultLayout']>,\n  req: PayloadRequest,\n  widgets: Pick<Widget, 'maxWidth' | 'minWidth' | 'slug'>[],\n): Promise<WidgetItem[]> {\n  let widgetInstances\n  if (typeof defaultLayout === 'function') {\n    widgetInstances = await defaultLayout({ req })\n  } else {\n    widgetInstances = defaultLayout\n  }\n\n  return widgetInstances.map((widgetInstance, index) => {\n    const widget = widgets.find((w) => w.slug === widgetInstance.widgetSlug)\n    return {\n      id: `${widgetInstance.widgetSlug}-${index}`,\n      data: widgetInstance.data,\n      maxWidth: widget?.maxWidth ?? 'full',\n      minWidth: widget?.minWidth ?? 'x-small',\n      width: widgetInstance.width || 'x-small',\n    }\n  })\n}\n"],"mappings":"AAUA,SAASA,qBAAqB,QAAQ;AAQtC;;;;AAIA,OAAO,MAAMC,uBAAA,GAGT,MAAAA,CAAO;EAAEC,OAAO;EAAEC,MAAM;EAAEC,WAAW;EAAEC,GAAG;EAAEC;AAAI,CAAE;EACpD,IAAI,CAACD,GAAA,CAAIC,IAAI,EAAE;IACb,MAAM,IAAIC,KAAA,CAAM;EAClB;EAEA,MAAM;IAAEC,aAAA,GAAgB,EAAE;IAAEC,OAAA,GAAU;EAAE,CAAE,GAAGJ,GAAA,CAAIK,OAAO,CAACC,MAAM,CAACC,KAAK,CAACC,SAAS,IAAI,CAAC;EACpF,MAAM;IAAEC;EAAS,CAAE,GAAGT,GAAA,CAAIK,OAAO;EAEjC,MAAMK,WAAA,GAAc,MAAMC,kBAAA,CAAmBR,aAAA,EAAeH,GAAA,EAAKI,OAAA;EAEjE,MAAMQ,MAAA,GAAiCF,WAAA,CAAYG,GAAG,CAAEC,UAAA;IACtD,MAAMC,UAAA,GAAaD,UAAA,CAAWE,EAAE,CAACC,KAAK,CAAC,GAAGH,UAAA,CAAWE,EAAE,CAACE,WAAW,CAAC;IACpE,OAAO;MACLC,SAAA,EAAWxB,qBAAA,CAAsB;QAC/ByB,SAAA,EAAWhB,OAAA,CAAQiB,IAAI,CAAEC,MAAA,IAAWA,MAAA,CAAOC,IAAI,KAAKR,UAAA,GAAaK,SAAA;QACjEX,SAAA;QACAe,WAAA,EAAa;UACX3B,OAAA;UACAC,MAAA;UACAC,WAAA;UACAC,GAAA;UACAC,IAAA;UACAwB,UAAA,EAAYX,UAAA,CAAWY,IAAI,IAAI,CAAC;UAChCX;QACF;MACF;MACAY,IAAA,EAAMb;IACR;EACF;EAEA,OAAO;IAAEF;EAAO;AAClB;AAEA,eAAeD,mBACbR,aAA4D,EAC5DH,GAAmB,EACnBI,OAAyD;EAEzD,IAAIwB,eAAA;EACJ,IAAI,OAAOzB,aAAA,KAAkB,YAAY;IACvCyB,eAAA,GAAkB,MAAMzB,aAAA,CAAc;MAAEH;IAAI;EAC9C,OAAO;IACL4B,eAAA,GAAkBzB,aAAA;EACpB;EAEA,OAAOyB,eAAA,CAAgBf,GAAG,CAAC,CAACgB,cAAA,EAAgBC,KAAA;IAC1C,MAAMR,MAAA,GAASlB,OAAA,CAAQiB,IAAI,CAAEU,CAAA,IAAMA,CAAA,CAAER,IAAI,KAAKM,cAAA,CAAed,UAAU;IACvE,OAAO;MACLC,EAAA,EAAI,GAAGa,cAAA,CAAed,UAAU,IAAIe,KAAA,EAAO;MAC3CJ,IAAA,EAAMG,cAAA,CAAeH,IAAI;MACzBM,QAAA,EAAUV,MAAA,EAAQU,QAAA,IAAY;MAC9BC,QAAA,EAAUX,MAAA,EAAQW,QAAA,IAAY;MAC9BC,KAAA,EAAOL,cAAA,CAAeK,KAAK,IAAI;IACjC;EACF;AACF","ignoreList":[]}

package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.d.ts

@@ -0,0 +1,21 @@
+import type { ServerFunction } from 'payload';
+import React from 'react';
+export type RenderWidgetServerFnArgs = {
+    /**
+     * Instance-specific data for this widget
+     */
+    widgetData?: Record<string, unknown>;
+    /**
+     * The slug of the widget to render
+     */
+    widgetSlug: string;
+};
+export type RenderWidgetServerFnReturnType = {
+    component: React.ReactNode;
+};
+/**
+ * Server function to render a widget on-demand.
+ * Similar to render-field but specifically for dashboard widgets.
+ */
+export declare const renderWidgetHandler: ServerFunction<RenderWidgetServerFnArgs, RenderWidgetServerFnReturnType>;
+//# sourceMappingURL=renderWidgetServerFn.d.ts.map

package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderWidgetServerFn.d.ts","sourceRoot":"","sources":["../../../../../../src/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAS,cAAc,EAAqB,MAAM,SAAS,CAAA;AAEvE,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACpC;;OAEG;IACH,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,8BAA8B,GAAG;IAC3C,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,cAAc,CAC9C,wBAAwB,EACxB,8BAA8B,CA+E/B,CAAA"}