@payloadcms/next 3.71.0-canary.2 → 3.71.0-internal-debug.dea9d74

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

@@ -1 +1 @@
-{"version":3,"file":"index.client.js","names":["c","_c","DndContext","DragOverlay","useDraggable","useDroppable","snapCenterToCursor","ChevronIcon","Popup","PopupList","useTranslation","XIcon","React","useMemo","useState","snapCenterToCursorOnlyForPointer","args","activatorEvent","transform","DashboardStepNav","useDashboardLayout","closestInXAxis","useDashboardSensors","WIDTH_TO_PERCENTAGE","small","medium","large","full","ModularDashboardClient","t0","$","clientLayout","initialLayout","widgets","t","addWidget","cancel","cancelModal","currentLayout","deleteWidget","isEditing","moveWidget","resetLayout","resizeWidget","saveLayout","setIsEditing","activeDragId","setActiveDragId","sensors","t1","t2","Symbol","for","t3","event","over","droppableId","id","i","lastIndexOf","slug","slice","position","active","moveFromIndex","findIndex","widget","item","moveToIndex","widget_0","t4","event_0","_jsxs","children","_jsx","autoScroll","enabled","threshold","x","y","collisionDetection","onDragCancel","onDragEnd","onDragStart","className","style","display","flexWrap","length","map","widget_1","_index","Fragment","DraggableItem","disabled","width","padding","inert","component","onPointerDown","_temp","WidgetWidthDropdown","currentWidth","maxWidth","minWidth","onResize","onClick","type","dropAnimation","duration","modifiers","draggedWidget","find","widget_2","e","stopPropagation","validOptions","minPercentage","maxPercentage","Object","entries","key","value","percentage","filter","option","isDisabled","button","buttonType","render","close","ButtonGroup","isSelected","Button","toFixed","size","verticalAlign","props","attributes","isDragging","listeners","setNodeRef","mergedStyles","opacity","draggableProps","DroppableItem","ref","height","data","isOver","t5","t6","t7","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 { ChevronIcon, Popup, PopupList, useTranslation, XIcon } from '@payloadcms/ui'\nimport React, { useMemo, useState } from 'react'\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\nimport { DashboardStepNav } from './DashboardStepNav.js'\nimport { useDashboardLayout } from './useDashboardLayout.js'\nimport { closestInXAxis } from './utils/collisionDetection.js'\nimport { useDashboardSensors } from './utils/sensors.js'\n\nexport type WidgetItem = {\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 { 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  } = useDashboardLayout(initialLayout)\n\n  const [activeDragId, setActiveDragId] = useState<null | string>(null)\n  const sensors = useDashboardSensors()\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          if (!event.over) {\n            setActiveDragId(null)\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          setActiveDragId(null)\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>\n                There are no widgets on your dashboard. You can add them from the \"Dashboard\" menu\n                located in the top bar.\n              </p>\n            </div>\n          )}\n          {currentLayout?.map((widget, _index) => (\n            <React.Fragment key={widget.item.id}>\n              <DraggableItem\n                disabled={!isEditing}\n                id={widget.item.id}\n                style={{\n                  width: `${WIDTH_TO_PERCENTAGE[widget.item.width]}%`,\n                  padding: '6px',\n                }}\n                width={widget.item.width}\n              >\n                <div className={`widget-wrapper ${isEditing ? 'widget-wrapper--editing' : ''}`}>\n                  <div aria-hidden={isEditing} className=\"widget-content\" inert={isEditing}>\n                    {widget.component}\n                  </div>\n                  {isEditing && (\n                    <div\n                      className=\"widget-wrapper__controls\"\n                      onPointerDown={(e) => e.stopPropagation()}\n                    >\n                      <WidgetWidthDropdown\n                        currentWidth={widget.item.width}\n                        maxWidth={widget.item.maxWidth}\n                        minWidth={widget.item.minWidth}\n                        onResize={(width) => resizeWidget(widget.item.id, width)}\n                      />\n                      <button\n                        className=\"widget-wrapper__delete-btn\"\n                        onClick={() => deleteWidget(widget.item.id)}\n                        type=\"button\"\n                      >\n                        <span className=\"sr-only\">\n                          {t('dashboard:deleteWidget', { id: widget.item.id })}\n                        </span>\n                        <XIcon />\n                      </button>\n                    </div>\n                  )}\n                </div>\n              </DraggableItem>\n            </React.Fragment>\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                      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  onResize,\n}: {\n  currentWidth: WidgetWidth\n  maxWidth: WidgetWidth\n  minWidth: WidgetWidth\n  onResize: (width: WidgetWidth) => void\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  return (\n    <Popup\n      button={\n        <button\n          className=\"widget-wrapper__size-btn\"\n          disabled={isDisabled}\n          onPointerDown={(e) => e.stopPropagation()}\n          type=\"button\"\n        >\n          <span className=\"widget-wrapper__size-btn-text\">{currentWidth}</span>\n          <ChevronIcon className=\"widget-wrapper__size-btn-icon\" />\n        </button>\n      }\n      buttonType=\"custom\"\n      disabled={isDisabled}\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      size=\"small\"\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n\nfunction DraggableItem(props: {\n  children: React.ReactNode\n  disabled?: boolean\n  id: string\n  style?: React.CSSProperties\n  width: WidgetWidth\n}) {\n  const { attributes, isDragging, listeners, 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  // Only apply draggable attributes and listeners when not disabled\n  // to prevent disabling interactive elements inside the widget\n  const draggableProps = props.disabled ? {} : { ...listeners, ...attributes }\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        className=\"draggable\"\n        id={props.id}\n        ref={setNodeRef}\n        {...draggableProps}\n        style={{\n          width: '100%',\n          height: '100%',\n        }}\n      >\n        {props.children}\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(--theme-success-400)' : 'transparent',\n        marginBottom: '10px',\n        marginTop: '10px',\n        pointerEvents: 'none',\n        zIndex: 1000,\n      }}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"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 { ChevronIcon, Popup, PopupList, useTranslation, XIcon } from '@payloadcms/ui'\nimport React, { useMemo, useState } from 'react'\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\nimport { DashboardStepNav } from './DashboardStepNav.js'\nimport { useDashboardLayout } from './useDashboardLayout.js'\nimport { closestInXAxis } from './utils/collisionDetection.js'\nimport { useDashboardSensors } from './utils/sensors.js'\n\nexport type WidgetItem = {\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 { 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  } = useDashboardLayout(initialLayout)\n\n  const [activeDragId, setActiveDragId] = useState<null | string>(null)\n  const sensors = useDashboardSensors()\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          if (!event.over) {\n            setActiveDragId(null)\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          setActiveDragId(null)\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>\n                There are no widgets on your dashboard. You can add them from the \"Dashboard\" menu\n                located in the top bar.\n              </p>\n            </div>\n          )}\n          {currentLayout?.map((widget, _index) => (\n            <React.Fragment key={widget.item.id}>\n              <DraggableItem\n                disabled={!isEditing}\n                id={widget.item.id}\n                style={{\n                  width: `${WIDTH_TO_PERCENTAGE[widget.item.width]}%`,\n                  padding: '6px',\n                }}\n                width={widget.item.width}\n              >\n                <div className={`widget-wrapper ${isEditing ? 'widget-wrapper--editing' : ''}`}>\n                  <div aria-hidden={isEditing} className=\"widget-content\" inert={isEditing}>\n                    {widget.component}\n                  </div>\n                  {isEditing && (\n                    <div\n                      className=\"widget-wrapper__controls\"\n                      onPointerDown={(e) => e.stopPropagation()}\n                    >\n                      <WidgetWidthDropdown\n                        currentWidth={widget.item.width}\n                        maxWidth={widget.item.maxWidth}\n                        minWidth={widget.item.minWidth}\n                        onResize={(width) => resizeWidget(widget.item.id, width)}\n                      />\n                      <button\n                        className=\"widget-wrapper__delete-btn\"\n                        onClick={() => deleteWidget(widget.item.id)}\n                        type=\"button\"\n                      >\n                        <span className=\"sr-only\">\n                          {t('dashboard:deleteWidget', { id: widget.item.id })}\n                        </span>\n                        <XIcon />\n                      </button>\n                    </div>\n                  )}\n                </div>\n              </DraggableItem>\n            </React.Fragment>\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                      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  onResize,\n}: {\n  currentWidth: WidgetWidth\n  maxWidth: WidgetWidth\n  minWidth: WidgetWidth\n  onResize: (width: WidgetWidth) => void\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  return (\n    <Popup\n      button={\n        <button\n          className=\"widget-wrapper__size-btn\"\n          disabled={isDisabled}\n          onPointerDown={(e) => e.stopPropagation()}\n          type=\"button\"\n        >\n          <span className=\"widget-wrapper__size-btn-text\">{currentWidth}</span>\n          <ChevronIcon className=\"widget-wrapper__size-btn-icon\" />\n        </button>\n      }\n      buttonType=\"custom\"\n      disabled={isDisabled}\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      size=\"small\"\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n\nfunction DraggableItem(props: {\n  children: React.ReactNode\n  disabled?: boolean\n  id: string\n  style?: React.CSSProperties\n  width: WidgetWidth\n}) {\n  const { attributes, isDragging, listeners, 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  // Only apply draggable attributes and listeners when not disabled\n  // to prevent disabling interactive elements inside the widget\n  const draggableProps = props.disabled ? {} : { ...listeners, ...attributes }\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        className=\"draggable\"\n        id={props.id}\n        ref={setNodeRef}\n        {...draggableProps}\n        style={{\n          width: '100%',\n          height: '100%',\n        }}\n      >\n        {props.children}\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(--theme-success-400)' : 'transparent',\n        marginBottom: '10px',\n        marginTop: '10px',\n        pointerEvents: 'none',\n        zIndex: 1000,\n      }}\n    />\n  )\n}\n"],"names":["DndContext","DragOverlay","useDraggable","useDroppable","snapCenterToCursor","ChevronIcon","Popup","PopupList","useTranslation","XIcon","React","useMemo","useState","snapCenterToCursorOnlyForPointer","args","activatorEvent","transform","DashboardStepNav","useDashboardLayout","closestInXAxis","useDashboardSensors","WIDTH_TO_PERCENTAGE","small","medium","large","full","ModularDashboardClient","clientLayout","initialLayout","widgets","t","addWidget","cancel","cancelModal","currentLayout","deleteWidget","isEditing","moveWidget","resetLayout","resizeWidget","saveLayout","setIsEditing","activeDragId","setActiveDragId","sensors","div","autoScroll","enabled","threshold","x","y","collisionDetection","id","onDragCancel","onDragEnd","event","over","droppableId","i","lastIndexOf","slug","slice","position","active","moveFromIndex","findIndex","widget","item","moveToIndex","onDragStart","className","style","display","flexWrap","length","p","map","_index","Fragment","DraggableItem","disabled","width","padding","aria-hidden","inert","component","onPointerDown","e","stopPropagation","WidgetWidthDropdown","currentWidth","maxWidth","minWidth","onResize","button","onClick","type","span","dropAnimation","duration","modifiers","draggedWidget","find","validOptions","minPercentage","maxPercentage","Object","entries","key","value","percentage","filter","option","isDisabled","buttonType","render","close","ButtonGroup","isSelected","Button","toFixed","size","verticalAlign","props","attributes","isDragging","listeners","setNodeRef","mergedStyles","opacity","draggableProps","data-slug","data-width","DroppableItem","ref","height","children","isOver","data","data-testid","left","right","top","bottom","borderRadius","backgroundColor","marginBottom","marginTop","pointerEvents","zIndex"],"mappings":"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"}

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

@@ -1,87 +1,84 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent';
 import React from 'react';
 import { getPreferences } from '../../../../utilities/getPreferences.js';
 import { ModularDashboardClient } from './index.client.js';
+import './index.scss';
 export async function ModularDashboard(props) {
-  const {
-    defaultLayout = [],
-    widgets = []
-  } = props.payload.config.admin.dashboard || {};
-  const {
-    importMap
-  } = props.payload;
-  const {
-    user
-  } = props;
-  const {
-    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('-'));
-    return {
-      component: RenderServerComponent({
-        Component: widgets.find(widget => widget.slug === widgetSlug)?.ComponentPath,
-        importMap,
-        serverProps: {
-          req,
-          widgetSlug
-        }
-      }),
-      item: layoutItem
-    };
-  });
-  // Resolve function labels to static labels for client components
-  const clientWidgets = widgets.map(widget => {
-    const {
-      ComponentPath: _,
-      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
-    })
-  });
+    const { defaultLayout = [], widgets = [] } = props.payload.config.admin.dashboard || {};
+    const { importMap } = props.payload;
+    const { user } = props;
+    const { 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('-'));
+        return {
+            component: RenderServerComponent({
+                Component: widgets.find((widget)=>widget.slug === widgetSlug)?.ComponentPath,
+                importMap,
+                serverProps: {
+                    req,
+                    widgetSlug
+                }
+            }),
+            // TODO: widgets will support state in the future
+            // widgetData: layoutItem.data,
+            item: layoutItem
+        };
+    });
+    // Resolve function labels to static labels for client components
+    const clientWidgets = widgets.map((widget)=>{
+        const { ComponentPath: _, label, ...rest } = widget;
+        return {
+            ...rest,
+            label: typeof label === 'function' ? label({
+                i18n,
+                t: i18n.t
+            }) : label
+        };
+    });
+    return /*#__PURE__*/ _jsxDEV("div", {
+        children: /*#__PURE__*/ _jsxDEV(ModularDashboardClient, {
+            clientLayout: serverLayout,
+            widgets: clientWidgets
+        }, void 0, false, {
+            fileName: "src/views/Dashboard/Default/ModularDashboard/index.tsx",
+            lineNumber: 64,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/views/Dashboard/Default/ModularDashboard/index.tsx",
+        lineNumber: 63,
+        columnNumber: 5
+    }, this);
 }
 async function getItemsFromPreferences(payload, user) {
-  const savedPreferences = await getPreferences('dashboard-layout', payload, user.id, user.collection);
-  if (!savedPreferences?.value || typeof savedPreferences.value !== 'object' || !('layouts' in savedPreferences.value)) {
-    return null;
-  }
-  return savedPreferences.value.layouts;
+    const savedPreferences = await getPreferences('dashboard-layout', payload, user.id, user.collection);
+    if (!savedPreferences?.value || typeof savedPreferences.value !== 'object' || !('layouts' in savedPreferences.value)) {
+        return null;
+    }
+    return savedPreferences.value.layouts;
 }
 async function getItemsFromConfig(defaultLayout, req, widgets) {
-  // Handle function format
-  let widgetInstances;
-  if (typeof defaultLayout === 'function') {
-    widgetInstances = await defaultLayout({
-      req
+    // Handle function format
+    let widgetInstances;
+    if (typeof defaultLayout === 'function') {
+        widgetInstances = await defaultLayout({
+            req
+        });
+    } else {
+        widgetInstances = defaultLayout;
+    }
+    return widgetInstances.map((widgetInstance, index)=>{
+        const widget = widgets.find((widget)=>widget.slug === widgetInstance.widgetSlug);
+        return {
+            id: `${widgetInstance.widgetSlug}-${index}`,
+            maxWidth: widget?.maxWidth ?? 'full',
+            minWidth: widget?.minWidth ?? 'x-small',
+            width: widgetInstance.width || 'x-small'
+        };
     });
-  } else {
-    widgetInstances = defaultLayout;
-  }
-  return widgetInstances.map((widgetInstance, index) => {
-    const widget = widgets.find(widget => widget.slug === widgetInstance.widgetSlug);
-    return {
-      id: `${widgetInstance.widgetSlug}-${index}`,
-      maxWidth: widget?.maxWidth ?? 'full',
-      minWidth: widget?.minWidth ?? 'x-small',
-      width: widgetInstance.width || 'x-small'
-    };
-  });
 }
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["RenderServerComponent","React","getPreferences","ModularDashboardClient","ModularDashboard","props","defaultLayout","widgets","payload","config","admin","dashboard","importMap","user","req","initPageResult","i18n","layout","getItemsFromPreferences","getItemsFromConfig","serverLayout","map","layoutItem","widgetSlug","id","slice","lastIndexOf","component","Component","find","widget","slug","ComponentPath","serverProps","item","clientWidgets","_","label","rest","t","_jsx","clientLayout","savedPreferences","collection","value","layouts","widgetInstances","widgetInstance","index","maxWidth","minWidth","width"],"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/index.tsx"],"sourcesContent":["import type { TFunction } from '@payloadcms/translations'\nimport type {\n  BasePayload,\n  ClientWidget,\n  DashboardConfig,\n  PayloadRequest,\n  TypedUser,\n  Widget,\n  WidgetInstance,\n  WidgetServerProps,\n} from 'payload'\n\nimport { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'\nimport React from 'react'\n\nimport type { DashboardViewServerProps } from '../index.js'\nimport type { WidgetInstanceClient, WidgetItem } from './index.client.js'\n\nimport { getPreferences } from '../../../../utilities/getPreferences.js'\nimport { ModularDashboardClient } from './index.client.js'\nimport './index.scss'\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 { 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    return {\n      component: RenderServerComponent({\n        Component: widgets.find((widget) => widget.slug === widgetSlug)?.ComponentPath,\n        importMap,\n        serverProps: {\n          req,\n          widgetSlug,\n          // TODO: widgets will support state in the future\n          // widgetData: layoutItem.data,\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 { ComponentPath: _, 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\nasync function getItemsFromPreferences(\n  payload: BasePayload,\n  user: TypedUser,\n): Promise<null | WidgetItem[]> {\n  const savedPreferences = await getPreferences(\n    'dashboard-layout',\n    payload,\n    user.id,\n    user.collection,\n  )\n  if (\n    !savedPreferences?.value ||\n    typeof savedPreferences.value !== 'object' ||\n    !('layouts' in savedPreferences.value)\n  ) {\n    return null\n  }\n  return savedPreferences.value.layouts as null | WidgetItem[]\n}\n\nasync function getItemsFromConfig(\n  defaultLayout: NonNullable<DashboardConfig['defaultLayout']>,\n  req: PayloadRequest,\n  widgets: Widget[],\n): Promise<WidgetItem[]> {\n  // Handle function format\n  let widgetInstances: WidgetInstance[]\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((widget) => widget.slug === widgetInstance.widgetSlug)\n    return {\n      id: `${widgetInstance.widgetSlug}-${index}`,\n      maxWidth: widget?.maxWidth ?? 'full',\n      minWidth: widget?.minWidth ?? 'x-small',\n      width: widgetInstance.width || 'x-small',\n    }\n  })\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/index.tsx"],"sourcesContent":["import type { TFunction } from '@payloadcms/translations'\nimport type {\n  BasePayload,\n  ClientWidget,\n  DashboardConfig,\n  PayloadRequest,\n  TypedUser,\n  Widget,\n  WidgetInstance,\n  WidgetServerProps,\n} from 'payload'\n\nimport { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'\nimport React from 'react'\n\nimport type { DashboardViewServerProps } from '../index.js'\nimport type { WidgetInstanceClient, WidgetItem } from './index.client.js'\n\nimport { getPreferences } from '../../../../utilities/getPreferences.js'\nimport { ModularDashboardClient } from './index.client.js'\nimport './index.scss'\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 { 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    return {\n      component: RenderServerComponent({\n        Component: widgets.find((widget) => widget.slug === widgetSlug)?.ComponentPath,\n        importMap,\n        serverProps: {\n          req,\n          widgetSlug,\n          // TODO: widgets will support state in the future\n          // widgetData: layoutItem.data,\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 { ComponentPath: _, 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\nasync function getItemsFromPreferences(\n  payload: BasePayload,\n  user: TypedUser,\n): Promise<null | WidgetItem[]> {\n  const savedPreferences = await getPreferences(\n    'dashboard-layout',\n    payload,\n    user.id,\n    user.collection,\n  )\n  if (\n    !savedPreferences?.value ||\n    typeof savedPreferences.value !== 'object' ||\n    !('layouts' in savedPreferences.value)\n  ) {\n    return null\n  }\n  return savedPreferences.value.layouts as null | WidgetItem[]\n}\n\nasync function getItemsFromConfig(\n  defaultLayout: NonNullable<DashboardConfig['defaultLayout']>,\n  req: PayloadRequest,\n  widgets: Widget[],\n): Promise<WidgetItem[]> {\n  // Handle function format\n  let widgetInstances: WidgetInstance[]\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((widget) => widget.slug === widgetInstance.widgetSlug)\n    return {\n      id: `${widgetInstance.widgetSlug}-${index}`,\n      maxWidth: widget?.maxWidth ?? 'full',\n      minWidth: widget?.minWidth ?? 'x-small',\n      width: widgetInstance.width || 'x-small',\n    }\n  })\n}\n"],"names":["RenderServerComponent","React","getPreferences","ModularDashboardClient","ModularDashboard","props","defaultLayout","widgets","payload","config","admin","dashboard","importMap","user","req","initPageResult","i18n","layout","getItemsFromPreferences","getItemsFromConfig","serverLayout","map","layoutItem","widgetSlug","id","slice","lastIndexOf","component","Component","find","widget","slug","ComponentPath","serverProps","item","clientWidgets","_","label","rest","t","div","clientLayout","savedPreferences","collection","value","layouts","widgetInstances","widgetInstance","index","maxWidth","minWidth","width"],"mappings":";AAYA,SAASA,qBAAqB,QAAQ,gDAA+C;AACrF,OAAOC,WAAW,QAAO;AAKzB,SAASC,cAAc,QAAQ,0CAAyC;AACxE,SAASC,sBAAsB,QAAQ,oBAAmB;AAC1D,OAAO,eAAc;AAIrB,OAAO,eAAeC,iBAAiBC,KAA+B;IACpE,MAAM,EAAEC,gBAAgB,EAAE,EAAEC,UAAU,EAAE,EAAE,GAAGF,MAAMG,OAAO,CAACC,MAAM,CAACC,KAAK,CAACC,SAAS,IAAI,CAAC;IACtF,MAAM,EAAEC,SAAS,EAAE,GAAGP,MAAMG,OAAO;IACnC,MAAM,EAAEK,IAAI,EAAE,GAAGR;IACjB,MAAM,EAAES,GAAG,EAAE,GAAGT,MAAMU,cAAc;IACpC,MAAM,EAAEC,IAAI,EAAE,GAAGF;IAEjB,MAAMG,SACJ,AAAC,MAAMC,wBAAwBb,MAAMG,OAAO,EAAEK,SAC7C,MAAMM,mBAAmBb,eAAeQ,KAAKP;IAEhD,MAAMa,eAA6BH,OAAOI,GAAG,CAAC,CAACC;QAC7C,MAAMC,aAAaD,WAAWE,EAAE,CAACC,KAAK,CAAC,GAAGH,WAAWE,EAAE,CAACE,WAAW,CAAC;QACpE,OAAO;YACLC,WAAW3B,sBAAsB;gBAC/B4B,WAAWrB,QAAQsB,IAAI,CAAC,CAACC,SAAWA,OAAOC,IAAI,KAAKR,aAAaS;gBACjEpB;gBACAqB,aAAa;oBACXnB;oBACAS;gBAGF;YACF;YAHI,iDAAiD;YACjD,+BAA+B;YAGnCW,MAAMZ;QACR;IACF;IAEA,iEAAiE;IACjE,MAAMa,gBAAgC5B,QAAQc,GAAG,CAAC,CAACS;QACjD,MAAM,EAAEE,eAAeI,CAAC,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGR;QAC7C,OAAO;YACL,GAAGQ,IAAI;YACPD,OAAO,OAAOA,UAAU,aAAaA,MAAM;gBAAErB;gBAAMuB,GAAGvB,KAAKuB,CAAC;YAAc,KAAKF;QACjF;IACF;IAEA,qBACE,QAACG;kBACC,cAAA,QAACrC;YAAuBsC,cAAcrB;YAAcb,SAAS4B;;;;;;;;;;;AAGnE;AAEA,eAAejB,wBACbV,OAAoB,EACpBK,IAAe;IAEf,MAAM6B,mBAAmB,MAAMxC,eAC7B,oBACAM,SACAK,KAAKW,EAAE,EACPX,KAAK8B,UAAU;IAEjB,IACE,CAACD,kBAAkBE,SACnB,OAAOF,iBAAiBE,KAAK,KAAK,YAClC,CAAE,CAAA,aAAaF,iBAAiBE,KAAK,AAAD,GACpC;QACA,OAAO;IACT;IACA,OAAOF,iBAAiBE,KAAK,CAACC,OAAO;AACvC;AAEA,eAAe1B,mBACbb,aAA4D,EAC5DQ,GAAmB,EACnBP,OAAiB;IAEjB,yBAAyB;IACzB,IAAIuC;IACJ,IAAI,OAAOxC,kBAAkB,YAAY;QACvCwC,kBAAkB,MAAMxC,cAAc;YAAEQ;QAAI;IAC9C,OAAO;QACLgC,kBAAkBxC;IACpB;IAEA,OAAOwC,gBAAgBzB,GAAG,CAAC,CAAC0B,gBAAgBC;QAC1C,MAAMlB,SAASvB,QAAQsB,IAAI,CAAC,CAACC,SAAWA,OAAOC,IAAI,KAAKgB,eAAexB,UAAU;QACjF,OAAO;YACLC,IAAI,GAAGuB,eAAexB,UAAU,CAAC,CAAC,EAAEyB,OAAO;YAC3CC,UAAUnB,QAAQmB,YAAY;YAC9BC,UAAUpB,QAAQoB,YAAY;YAC9BC,OAAOJ,eAAeI,KAAK,IAAI;QACjC;IACF;AACF"}

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

@@ -0,0 +1,316 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .modular-dashboard {
+    .widget-content {
+      height: 100%;
+    }
+
+    // In mobile, make the widget full width and hide the size button.
+    @media (max-width: 768px) {
+      .widget {
+        width: 100% !important;
+      }
+
+      .widget-wrapper__size-btn {
+        display: none;
+      }
+    }
+
+    &.editing {
+      .widget-content {
+        user-select: none;
+        -webkit-user-select: none;
+        pointer-events: none;
+      }
+
+      .draggable {
+        cursor: grab;
+      }
+    }
+
+    .drag-overlay {
+      pointer-events: none;
+      user-select: none;
+    }
+
+    &__empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      width: 100%;
+      padding: 24px;
+    }
+  }
+
+  // Apply grabbing cursor to body when drag-overlay is present
+  body:has(.drag-overlay) * {
+    cursor: grabbing;
+  }
+
+  .widget-wrapper__controls {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  .widget:focus,
+  .widget:focus-within {
+    .widget-wrapper__controls {
+      opacity: 1;
+    }
+  }
+
+  // This is used to highlight a newly added widget.
+  @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: 8px;
+    }
+  }
+
+  .widget-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+
+    &--editing {
+      .widget-wrapper__controls {
+        // opacity: 0;
+        transition: opacity 0.2s ease;
+      }
+
+      &:hover {
+        .widget-wrapper__controls {
+          opacity: 1;
+        }
+      }
+    }
+
+    &__controls {
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      z-index: 10;
+
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    &__delete-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 28px;
+      height: 28px;
+
+      background: var(--theme-text);
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+
+      transition: all 0.2s ease;
+
+      .icon {
+        width: 16px;
+        height: 16px;
+
+        .stroke {
+          stroke: var(--theme-elevation-0);
+          stroke-width: 2;
+        }
+      }
+
+      &:hover {
+        background: var(--theme-elevation-800);
+      }
+
+      &:active {
+        background: var(--theme-elevation-900);
+      }
+
+      svg {
+        pointer-events: none;
+      }
+    }
+
+    &__size-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 10px;
+      min-width: auto;
+      height: 28px;
+
+      background: var(--theme-text);
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+
+      transition: all 0.2s ease;
+
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--theme-elevation-0);
+      white-space: nowrap;
+
+      .icon {
+        width: 12px;
+        height: 12px;
+        flex-shrink: 0;
+
+        .stroke {
+          stroke: var(--theme-elevation-0);
+          stroke-width: 2;
+        }
+      }
+
+      &:hover {
+        background: var(--theme-elevation-800);
+      }
+
+      &:active {
+        background: var(--theme-elevation-900);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+
+        &:hover {
+          background: var(--theme-text);
+        }
+      }
+
+      svg {
+        pointer-events: none;
+      }
+    }
+
+    &__size-btn-percentage {
+      font-size: 12px;
+      margin-left: auto;
+      color: var(--theme-elevation-500);
+    }
+  }
+
+  // Since popup uses portal and renders to body, we need global styles
+  // for the size selection buttons in widget wrappers
+  .popup-button-list:has(.widget-wrapper__size-btn-label) {
+    .popup__scroll-container {
+      padding: 0;
+    }
+  }
+
+  .popup__content:has(.widget-wrapper__size-btn-label) {
+    padding: 5px;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  }
+
+  .popup-button-list__button:has(.widget-wrapper__size-btn-label) {
+    display: flex !important;
+    align-items: center !important;
+    gap: 20px;
+
+    .widget-wrapper__size-btn-label {
+      flex: 0 0 auto;
+    }
+
+    .widget-wrapper__size-btn-percentage {
+      margin-left: auto !important;
+    }
+  }
+
+  .step-nav {
+    .dashboard-breadcrumb-dropdown {
+      &__editing {
+        align-items: center;
+        display: flex !important;
+        gap: 12px;
+      }
+
+      &__actions {
+        display: flex !important;
+        gap: 8px;
+      }
+    }
+
+    .dashboard-breadcrumb-select {
+      position: relative;
+      z-index: 10;
+
+      .rs__control {
+        background: transparent;
+        border: none;
+        box-shadow: none;
+        padding: 0;
+        cursor: pointer;
+
+        &:hover {
+          background: transparent;
+        }
+      }
+
+      .rs__indicator-separator {
+        display: none;
+      }
+
+      .rs__dropdown-indicator {
+        padding: 0 4px;
+      }
+
+      .rs__menu {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        min-width: 150px;
+        z-index: 9999;
+        border-radius: 4px;
+        padding: 5px;
+        box-shadow:
+          0 4px 6px -1px rgba(0, 0, 0, 0.1),
+          0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      }
+
+      .rs__menu-list {
+        padding: 0;
+      }
+
+      .rs__option {
+        padding: 4px 8px;
+        border-radius: 3px;
+        margin: 0;
+      }
+    }
+
+    .rs__control {
+      box-shadow: none !important;
+      cursor: pointer !important;
+    }
+
+    .drawer-toggler--unstyled {
+      background: transparent;
+      border: none;
+      margin: 0;
+      padding: 0;
+      outline: none;
+      box-shadow: none;
+
+      &:hover,
+      &:focus {
+        background: transparent;
+      }
+    }
+  }
+}