@payloadcms/ui 4.0.0-internal.e55ccef → 4.0.0-internal.f05c47f

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

@@ -66,7 +66,6 @@
 
   .widget-wrapper__controls {
     opacity: 0;
-    transition: opacity 0.2s ease;
   }
 
   .widget:focus-visible .widget-wrapper__controls,
@@ -98,7 +97,29 @@
     transition: opacity 0.2s ease;
   }
 
-  .widget-wrapper--editing:hover .widget-wrapper__controls {
+  .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;
+    pointer-events: none;
+    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;
   }
 
@@ -112,162 +133,26 @@
     gap: var(--spacer-2);
   }
 
-  .widget-wrapper__delete-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--spacer-4);
-    height: var(--spacer-4);
-    background: var(--color-bg-danger);
-    border: none;
-    border-radius: var(--radius-small);
-    cursor: pointer;
-    color: var(--color-text-ondanger);
-    transition: all 0.2s ease;
-
-    &:hover {
-      background: var(--color-bg-danger-hover);
-    }
-
-    &:active {
-      background: var(--color-bg-danger-pressed);
-    }
-
-    &:focus-visible {
-      outline: var(--accessibility-outline);
-      outline-offset: var(--accessibility-outline-offset);
-    }
-
-    & svg {
-      pointer-events: none;
-    }
-  }
-
-  .widget-wrapper__edit-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--spacer-4);
-    height: var(--spacer-4);
-    background: var(--color-text);
-    border: none;
-    border-radius: var(--radius-small);
-    cursor: pointer;
-    color: var(--color-bg);
-    transition: all 0.2s ease;
-
-    & .icon {
-      width: var(--spacer-3);
-      height: var(--spacer-3);
-    }
-
-    &:hover {
-      background: var(--color-text-secondary);
-    }
-
-    &:active {
-      background: var(--color-text-tertiary);
-    }
-
-    & svg {
-      pointer-events: none;
-    }
-  }
-
   .widget-wrapper__size-btn {
-    display: flex;
-    align-items: center;
-    gap: var(--spacer-1);
-    padding: var(--spacer-1) var(--spacer-2);
     min-width: auto;
-    height: var(--spacer-4);
-    background: var(--color-bg-inverse);
-    border: none;
-    border-radius: var(--radius-small);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-family: var(--text-body-small-font-family);
-    font-size: var(--text-body-small-font-size);
-    font-weight: var(--text-body-small-font-weight);
-    line-height: var(--text-body-small-line-height);
-    letter-spacing: var(--text-body-small-letter-spacing);
-    color: var(--color-text-oninverse);
-    white-space: nowrap;
-
-    & .icon .stroke {
-      stroke: var(--color-icon-oninverse);
-      stroke-width: var(--stroke-width-medium);
-    }
-
-    &:hover {
-      background: var(--color-bg-inverse-hover);
-    }
-
-    &:active {
-      background: var(--color-bg-inverse-pressed);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    &:disabled:hover {
-      background: var(--color-bg-inverse);
-    }
-
-    &:focus-visible {
-      outline: var(--accessibility-outline);
-      outline-offset: var(--accessibility-outline-offset);
-    }
 
-    & svg {
-      pointer-events: none;
+    & .btn__content {
+      gap: var(--spacer-1);
     }
   }
 
   .widget-wrapper__size-btn-percentage {
-    font-family: var(--text-body-small-font-family);
-    font-size: var(--text-body-small-font-size);
-    margin-left: auto;
+    margin-left: var(--spacer-1);
     color: var(--color-text-tertiary);
   }
 
-  .popup-button-list:has(.widget-wrapper__size-btn-label) .popup__scroll-container {
-    padding: 0;
-  }
-
-  .popup__content:has(.widget-wrapper__size-btn-label) {
-    padding: var(--spacer-1);
-    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: var(--spacer-3);
-  }
-
-  .popup-button-list__button:has(.widget-wrapper__size-btn-label) .widget-wrapper__size-btn-label {
-    flex: 0 0 auto;
-  }
-
-  .popup-button-list__button:has(.widget-wrapper__size-btn-label)
-    .widget-wrapper__size-btn-percentage {
-    margin-left: auto !important;
-  }
-
   .step-nav .dashboard-breadcrumb-dropdown .btn {
     padding-right: var(--spacer-1);
   }
 
-  /* .step-nav .dashboard-breadcrumb-dropdown {
-    margin-left: calc(var(--spacer-2) * -1);
-  } */
-
   .step-nav .dashboard-breadcrumb-dropdown__editing {
     align-items: center;
-    display: flex !important;
+    display: flex;
     gap: var(--spacer-2-5);
 
     > span:first-child {
@@ -276,8 +161,8 @@
   }
 
   .step-nav .dashboard-breadcrumb-dropdown__actions {
-    display: flex !important;
-    gap: var(--spacer-2-5);
+    display: flex;
+    gap: var(--spacer-2);
   }
 
   .step-nav .dashboard-breadcrumb-dropdown__label {

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

@@ -45,11 +45,11 @@ export const RenderWidget = t0 => {
           }
           setComponent(React.createElement("div", {
             style: {
-              background: "var(--theme-error-50)",
-              border: "var(--stroke-width-small) solid var(--theme-error-200)",
-              borderRadius: "4px",
+              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: "20px",
+              padding: "var(--spacer-3)",
               textAlign: "center"
             }
           }, "Failed to load widget. Please try again later."));

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

@@ -1 +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(--theme-error-50)',\n                border: 'var(--stroke-width-small) solid var(--theme-error-200)',\n                borderRadius: '4px',\n                color: 'var(--color-text-danger)',\n                padding: '20px',\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":[]}
+{"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/renderWidgetServerFn.js

@@ -28,11 +28,11 @@ export const renderWidgetHandler = ({
     return {
       component: React.createElement('div', {
         style: {
-          background: 'var(--theme-elevation-50)',
-          border: 'var(--stroke-width-small) solid var(--theme-elevation-200)',
-          borderRadius: '4px',
-          color: 'var(--theme-text)',
-          padding: '20px',
+          background: 'var(--color-bg-secondary)',
+          border: 'var(--stroke-width-small) solid var(--color-border)',
+          borderRadius: 'var(--radius-medium)',
+          color: 'var(--color-text)',
+          padding: 'var(--spacer-3)',
           textAlign: 'center'
         }
       }, `Widget "${widgetSlug}" not found`)
@@ -66,11 +66,11 @@ export const renderWidgetHandler = ({
     return {
       component: React.createElement('div', {
         style: {
-          background: 'var(--theme-error-50)',
-          border: 'var(--stroke-width-small) solid var(--theme-error-200)',
-          borderRadius: '4px',
-          color: 'var(--theme-error-text)',
-          padding: '20px',
+          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'
         }
       }, 'Error loading widget')

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

@@ -1 +1 @@
-{"version":3,"file":"renderWidgetServerFn.js","names":["React","RenderServerComponent","extractLocaleData","renderWidgetHandler","cookies","locale","permissions","req","widgetData","widgetSlug","user","Error","widgets","payload","config","admin","dashboard","importMap","widgetConfig","find","widget","slug","component","createElement","style","background","border","borderRadius","color","padding","textAlign","localeFilteredData","fields","length","serverProps","Component","error","errorMessage","message","String","logger","err","msg"],"sources":["../../../../../../src/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.ts"],"sourcesContent":["import type { Field, ServerFunction, WidgetServerProps } from 'payload'\n\nimport React from 'react'\n\nimport { RenderServerComponent } from '../../../../../elements/RenderServerComponent/index.js'\nimport { extractLocaleData } from '../utils/localeUtils.js'\n\nexport type RenderWidgetServerFnArgs = {\n  /**\n   * Instance-specific data for this widget\n   */\n  widgetData?: Record<string, unknown>\n  /**\n   * The slug of the widget to render\n   */\n  widgetSlug: string\n}\n\nexport type RenderWidgetServerFnReturnType = {\n  component: React.ReactNode\n}\n\n/**\n * Server function to render a widget on-demand.\n * Similar to render-field but specifically for dashboard widgets.\n */\nexport const renderWidgetHandler: ServerFunction<\n  RenderWidgetServerFnArgs,\n  RenderWidgetServerFnReturnType\n> = ({ cookies, locale, permissions, req, widgetData, widgetSlug }) => {\n  if (!req.user) {\n    throw new Error('Unauthorized')\n  }\n\n  const { widgets } = req.payload.config.admin.dashboard\n  const { importMap } = req.payload\n\n  // Find the widget configuration\n  const widgetConfig = widgets.find((widget) => widget.slug === widgetSlug)\n\n  if (!widgetConfig) {\n    return {\n      component: React.createElement(\n        'div',\n        {\n          style: {\n            background: 'var(--theme-elevation-50)',\n            border: 'var(--stroke-width-small) solid var(--theme-elevation-200)',\n            borderRadius: '4px',\n            color: 'var(--theme-text)',\n            padding: '20px',\n            textAlign: 'center',\n          },\n        },\n        `Widget \"${widgetSlug}\" not found`,\n      ),\n    }\n  }\n\n  try {\n    const localeFilteredData = widgetConfig.fields?.length\n      ? extractLocaleData(widgetData || {}, req.locale || 'en', widgetConfig.fields)\n      : widgetData || {}\n\n    const serverProps: WidgetServerProps = {\n      cookies,\n      locale,\n      permissions,\n      req,\n      widgetData: localeFilteredData,\n      widgetSlug,\n    }\n\n    // Render the widget server component\n    const component = RenderServerComponent({\n      Component: widgetConfig.Component,\n      importMap,\n      serverProps,\n    })\n\n    return { component }\n  } catch (error) {\n    const errorMessage = error instanceof Error ? error.message : String(error)\n\n    req.payload.logger.error({\n      err: error,\n      msg: `Error rendering widget \"${widgetSlug}\": ${errorMessage}`,\n    })\n\n    return {\n      component: React.createElement(\n        'div',\n        {\n          style: {\n            background: 'var(--theme-error-50)',\n            border: 'var(--stroke-width-small) solid var(--theme-error-200)',\n            borderRadius: '4px',\n            color: 'var(--theme-error-text)',\n            padding: '20px',\n            textAlign: 'center',\n          },\n        },\n        'Error loading widget',\n      ),\n    }\n  }\n}\n"],"mappings":"AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,iBAAiB,QAAQ;AAiBlC;;;;AAIA,OAAO,MAAMC,mBAAA,GAGTA,CAAC;EAAEC,OAAO;EAAEC,MAAM;EAAEC,WAAW;EAAEC,GAAG;EAAEC,UAAU;EAAEC;AAAU,CAAE;EAChE,IAAI,CAACF,GAAA,CAAIG,IAAI,EAAE;IACb,MAAM,IAAIC,KAAA,CAAM;EAClB;EAEA,MAAM;IAAEC;EAAO,CAAE,GAAGL,GAAA,CAAIM,OAAO,CAACC,MAAM,CAACC,KAAK,CAACC,SAAS;EACtD,MAAM;IAAEC;EAAS,CAAE,GAAGV,GAAA,CAAIM,OAAO;EAEjC;EACA,MAAMK,YAAA,GAAeN,OAAA,CAAQO,IAAI,CAAEC,MAAA,IAAWA,MAAA,CAAOC,IAAI,KAAKZ,UAAA;EAE9D,IAAI,CAACS,YAAA,EAAc;IACjB,OAAO;MACLI,SAAA,EAAWtB,KAAA,CAAMuB,aAAa,CAC5B,OACA;QACEC,KAAA,EAAO;UACLC,UAAA,EAAY;UACZC,MAAA,EAAQ;UACRC,YAAA,EAAc;UACdC,KAAA,EAAO;UACPC,OAAA,EAAS;UACTC,SAAA,EAAW;QACb;MACF,GACA,WAAWrB,UAAA,aAAuB;IAEtC;EACF;EAEA,IAAI;IACF,MAAMsB,kBAAA,GAAqBb,YAAA,CAAac,MAAM,EAAEC,MAAA,GAC5C/B,iBAAA,CAAkBM,UAAA,IAAc,CAAC,GAAGD,GAAA,CAAIF,MAAM,IAAI,MAAMa,YAAA,CAAac,MAAM,IAC3ExB,UAAA,IAAc,CAAC;IAEnB,MAAM0B,WAAA,GAAiC;MACrC9B,OAAA;MACAC,MAAA;MACAC,WAAA;MACAC,GAAA;MACAC,UAAA,EAAYuB,kBAAA;MACZtB;IACF;IAEA;IACA,MAAMa,SAAA,GAAYrB,qBAAA,CAAsB;MACtCkC,SAAA,EAAWjB,YAAA,CAAaiB,SAAS;MACjClB,SAAA;MACAiB;IACF;IAEA,OAAO;MAAEZ;IAAU;EACrB,EAAE,OAAOc,KAAA,EAAO;IACd,MAAMC,YAAA,GAAeD,KAAA,YAAiBzB,KAAA,GAAQyB,KAAA,CAAME,OAAO,GAAGC,MAAA,CAAOH,KAAA;IAErE7B,GAAA,CAAIM,OAAO,CAAC2B,MAAM,CAACJ,KAAK,CAAC;MACvBK,GAAA,EAAKL,KAAA;MACLM,GAAA,EAAK,2BAA2BjC,UAAA,MAAgB4B,YAAA;IAClD;IAEA,OAAO;MACLf,SAAA,EAAWtB,KAAA,CAAMuB,aAAa,CAC5B,OACA;QACEC,KAAA,EAAO;UACLC,UAAA,EAAY;UACZC,MAAA,EAAQ;UACRC,YAAA,EAAc;UACdC,KAAA,EAAO;UACPC,OAAA,EAAS;UACTC,SAAA,EAAW;QACb;MACF,GACA;IAEJ;EACF;AACF","ignoreList":[]}
+{"version":3,"file":"renderWidgetServerFn.js","names":["React","RenderServerComponent","extractLocaleData","renderWidgetHandler","cookies","locale","permissions","req","widgetData","widgetSlug","user","Error","widgets","payload","config","admin","dashboard","importMap","widgetConfig","find","widget","slug","component","createElement","style","background","border","borderRadius","color","padding","textAlign","localeFilteredData","fields","length","serverProps","Component","error","errorMessage","message","String","logger","err","msg"],"sources":["../../../../../../src/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.ts"],"sourcesContent":["import type { Field, ServerFunction, WidgetServerProps } from 'payload'\n\nimport React from 'react'\n\nimport { RenderServerComponent } from '../../../../../elements/RenderServerComponent/index.js'\nimport { extractLocaleData } from '../utils/localeUtils.js'\n\nexport type RenderWidgetServerFnArgs = {\n  /**\n   * Instance-specific data for this widget\n   */\n  widgetData?: Record<string, unknown>\n  /**\n   * The slug of the widget to render\n   */\n  widgetSlug: string\n}\n\nexport type RenderWidgetServerFnReturnType = {\n  component: React.ReactNode\n}\n\n/**\n * Server function to render a widget on-demand.\n * Similar to render-field but specifically for dashboard widgets.\n */\nexport const renderWidgetHandler: ServerFunction<\n  RenderWidgetServerFnArgs,\n  RenderWidgetServerFnReturnType\n> = ({ cookies, locale, permissions, req, widgetData, widgetSlug }) => {\n  if (!req.user) {\n    throw new Error('Unauthorized')\n  }\n\n  const { widgets } = req.payload.config.admin.dashboard\n  const { importMap } = req.payload\n\n  // Find the widget configuration\n  const widgetConfig = widgets.find((widget) => widget.slug === widgetSlug)\n\n  if (!widgetConfig) {\n    return {\n      component: React.createElement(\n        'div',\n        {\n          style: {\n            background: 'var(--color-bg-secondary)',\n            border: 'var(--stroke-width-small) solid var(--color-border)',\n            borderRadius: 'var(--radius-medium)',\n            color: 'var(--color-text)',\n            padding: 'var(--spacer-3)',\n            textAlign: 'center',\n          },\n        },\n        `Widget \"${widgetSlug}\" not found`,\n      ),\n    }\n  }\n\n  try {\n    const localeFilteredData = widgetConfig.fields?.length\n      ? extractLocaleData(widgetData || {}, req.locale || 'en', widgetConfig.fields)\n      : widgetData || {}\n\n    const serverProps: WidgetServerProps = {\n      cookies,\n      locale,\n      permissions,\n      req,\n      widgetData: localeFilteredData,\n      widgetSlug,\n    }\n\n    // Render the widget server component\n    const component = RenderServerComponent({\n      Component: widgetConfig.Component,\n      importMap,\n      serverProps,\n    })\n\n    return { component }\n  } catch (error) {\n    const errorMessage = error instanceof Error ? error.message : String(error)\n\n    req.payload.logger.error({\n      err: error,\n      msg: `Error rendering widget \"${widgetSlug}\": ${errorMessage}`,\n    })\n\n    return {\n      component: React.createElement(\n        'div',\n        {\n          style: {\n            background: 'var(--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        'Error loading widget',\n      ),\n    }\n  }\n}\n"],"mappings":"AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,iBAAiB,QAAQ;AAiBlC;;;;AAIA,OAAO,MAAMC,mBAAA,GAGTA,CAAC;EAAEC,OAAO;EAAEC,MAAM;EAAEC,WAAW;EAAEC,GAAG;EAAEC,UAAU;EAAEC;AAAU,CAAE;EAChE,IAAI,CAACF,GAAA,CAAIG,IAAI,EAAE;IACb,MAAM,IAAIC,KAAA,CAAM;EAClB;EAEA,MAAM;IAAEC;EAAO,CAAE,GAAGL,GAAA,CAAIM,OAAO,CAACC,MAAM,CAACC,KAAK,CAACC,SAAS;EACtD,MAAM;IAAEC;EAAS,CAAE,GAAGV,GAAA,CAAIM,OAAO;EAEjC;EACA,MAAMK,YAAA,GAAeN,OAAA,CAAQO,IAAI,CAAEC,MAAA,IAAWA,MAAA,CAAOC,IAAI,KAAKZ,UAAA;EAE9D,IAAI,CAACS,YAAA,EAAc;IACjB,OAAO;MACLI,SAAA,EAAWtB,KAAA,CAAMuB,aAAa,CAC5B,OACA;QACEC,KAAA,EAAO;UACLC,UAAA,EAAY;UACZC,MAAA,EAAQ;UACRC,YAAA,EAAc;UACdC,KAAA,EAAO;UACPC,OAAA,EAAS;UACTC,SAAA,EAAW;QACb;MACF,GACA,WAAWrB,UAAA,aAAuB;IAEtC;EACF;EAEA,IAAI;IACF,MAAMsB,kBAAA,GAAqBb,YAAA,CAAac,MAAM,EAAEC,MAAA,GAC5C/B,iBAAA,CAAkBM,UAAA,IAAc,CAAC,GAAGD,GAAA,CAAIF,MAAM,IAAI,MAAMa,YAAA,CAAac,MAAM,IAC3ExB,UAAA,IAAc,CAAC;IAEnB,MAAM0B,WAAA,GAAiC;MACrC9B,OAAA;MACAC,MAAA;MACAC,WAAA;MACAC,GAAA;MACAC,UAAA,EAAYuB,kBAAA;MACZtB;IACF;IAEA;IACA,MAAMa,SAAA,GAAYrB,qBAAA,CAAsB;MACtCkC,SAAA,EAAWjB,YAAA,CAAaiB,SAAS;MACjClB,SAAA;MACAiB;IACF;IAEA,OAAO;MAAEZ;IAAU;EACrB,EAAE,OAAOc,KAAA,EAAO;IACd,MAAMC,YAAA,GAAeD,KAAA,YAAiBzB,KAAA,GAAQyB,KAAA,CAAME,OAAO,GAAGC,MAAA,CAAOH,KAAA;IAErE7B,GAAA,CAAIM,OAAO,CAAC2B,MAAM,CAACJ,KAAK,CAAC;MACvBK,GAAA,EAAKL,KAAA;MACLM,GAAA,EAAK,2BAA2BjC,UAAA,MAAgB4B,YAAA;IAClD;IAEA,OAAO;MACLf,SAAA,EAAWtB,KAAA,CAAMuB,aAAa,CAC5B,OACA;QACEC,KAAA,EAAO;UACLC,UAAA,EAAY;UACZC,MAAA,EAAQ;UACRC,YAAA,EAAc;UACdC,KAAA,EAAO;UACPC,OAAA,EAAS;UACTC,SAAA,EAAW;QACb;MACF,GACA;IAEJ;EACF;AACF","ignoreList":[]}

package/dist/views/Edit/index.css

@@ -12,35 +12,32 @@
   }
 
   .collection-edit__main-wrapper--scroll-fields-only {
-    height: calc(
-      100dvh - var(--app-header-height, 0px) - var(--doc-controls-height, 0px) -
-        var(--doc-header-height, 0px)
-    );
-    overflow: hidden;
+    height: auto;
+    overflow: visible;
 
     .collection-edit__main {
-      min-height: 0;
-      overflow: hidden;
+      min-height: initial;
+      overflow: visible;
     }
 
     .document-fields {
-      height: 100%;
-      min-height: 0;
+      height: auto;
+      min-height: initial;
     }
 
     .document-fields--force-sidebar-wrap {
-      overflow-y: auto;
-      overscroll-behavior: contain;
-      scrollbar-width: thin;
-      scrollbar-color: var(--scrollbar-color) transparent;
+      overflow-y: visible;
+      overscroll-behavior: auto;
+      scrollbar-width: auto;
+      scrollbar-color: auto;
     }
 
     .document-fields:not(.document-fields--force-sidebar-wrap) .document-fields__main {
-      min-height: 0;
-      overflow-y: auto;
-      overscroll-behavior: contain;
-      scrollbar-width: thin;
-      scrollbar-color: var(--scrollbar-color) transparent;
+      min-height: initial;
+      overflow-y: visible;
+      overscroll-behavior: auto;
+      scrollbar-width: auto;
+      scrollbar-color: auto;
     }
 
     .document-fields--force-sidebar-wrap .document-fields__main {
@@ -51,9 +48,9 @@
     }
 
     .document-fields__sidebar {
-      overscroll-behavior: contain;
-      scrollbar-width: thin;
-      scrollbar-color: var(--scrollbar-color) transparent;
+      overscroll-behavior: auto;
+      scrollbar-width: auto;
+      scrollbar-color: auto;
     }
 
     .document-fields__sidebar-wrap {
@@ -63,8 +60,8 @@
   }
 
   .template-default__wrap:has(.collection-edit__main-wrapper--scroll-fields-only) {
-    height: 100dvh;
-    overflow: hidden;
+    height: auto;
+    overflow: visible;
   }
 
   .collection-edit__main {
@@ -76,12 +73,22 @@
   }
 
   .collection-edit__main-wrapper--has-upload-panel {
+    flex-direction: column-reverse;
+    gap: var(--spacer-5);
+
     .collection-edit__main {
       flex: 1;
     }
+
     .file-manager {
-      flex: 2;
-      border-inline-start: var(--stroke-width-small) solid var(--color-border);
+      order: 0;
+      /* Stacked — no vertical divider; the file manager's own bottom border separates it. */
+      border-inline-start: 0;
+    }
+
+    .document-fields {
+      flex: 0 0 auto;
+      width: 100%;
     }
 
     .collection-edit__main:not(:has(.field-type)) {
@@ -95,61 +102,62 @@
 
   /* Container query (not viewport) so the layout stacks based on the space actually available
      to the edit view — e.g. inside a narrow document drawer it uses the stacked mobile layout. */
-  @container edit-main (max-width: 1024px) {
+  @container edit-main (min-width: 1024px) {
     .collection-edit__main-wrapper--scroll-fields-only {
-      height: auto;
-      overflow: visible;
+      height: calc(
+        100dvh - var(--app-header-height, 0px) - var(--doc-controls-height, 0px) -
+          var(--doc-header-height, 0px)
+      );
+      overflow: hidden;
 
       .collection-edit__main {
-        min-height: initial;
-        overflow: visible;
+        min-height: 0;
+        overflow: hidden;
       }
 
       .document-fields {
-        height: auto;
-        min-height: initial;
+        height: 100%;
+        min-height: 0;
       }
 
       .document-fields--force-sidebar-wrap {
-        overflow-y: visible;
-        overscroll-behavior: auto;
-        scrollbar-width: auto;
-        scrollbar-color: auto;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: var(--scrollbar-color) transparent;
       }
 
       .document-fields:not(.document-fields--force-sidebar-wrap) .document-fields__main {
-        min-height: initial;
-        overflow-y: visible;
-        overscroll-behavior: auto;
-        scrollbar-width: auto;
-        scrollbar-color: auto;
+        min-height: 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: var(--scrollbar-color) transparent;
       }
 
       .document-fields__sidebar {
-        overscroll-behavior: auto;
-        scrollbar-width: auto;
-        scrollbar-color: auto;
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: var(--scrollbar-color) transparent;
       }
     }
 
     .template-default__wrap:has(.collection-edit__main-wrapper--scroll-fields-only) {
-      height: auto;
-      overflow: visible;
+      height: 100dvh;
+      overflow: hidden;
     }
 
     .collection-edit__main-wrapper--has-upload-panel {
-      flex-direction: column-reverse;
-      gap: var(--spacer-5);
+      flex-direction: row;
+      gap: 0;
 
       .file-manager {
-        order: 0;
-        flex: 1 0 0;
-        /* Stacked — no vertical divider; the file manager's own bottom border separates it. */
-        border-inline-start: 0;
+        flex: 2;
+        border-inline-start: var(--stroke-width-small) solid var(--color-border);
       }
 
       .document-fields {
-        flex: 0 0 auto;
+        flex: initial;
         width: 100%;
       }
     }

package/dist/views/HierarchyList/HierarchyTable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/HierarchyList/HierarchyTable/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AASnD,OAAO,KAAyC,MAAM,OAAO,CAAA;AAE7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iDAAiD,CAAA;AACvF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAA;AAElF,OAAO,KAAK,EAAE,YAAY,EAAY,MAAM,YAAY,CAAA;AAexD,OAAO,aAAa,CAAA;AAcpB,MAAM,MAAM,mBAAmB,GAAG;IAChC,gFAAgF;IAChF,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,YAAY,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAC/C,2DAA2D;IAC3D,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAChC,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,wCAAwC;IACxC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,cAAc,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;IAC1C,aAAa,EAAE,YAAY,EAAE,CAAA;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,eAAe,EACf,QAAQ,EACR,kBAAkB,EAClB,aAAa,EACb,MAAM,EACN,UAAU,GACX,EAAE,mBAAmB,qBAydrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/HierarchyList/HierarchyTable/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AASnD,OAAO,KAAyC,MAAM,OAAO,CAAA;AAE7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iDAAiD,CAAA;AACvF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAA;AAElF,OAAO,KAAK,EAAE,YAAY,EAAY,MAAM,YAAY,CAAA;AAgBxD,OAAO,aAAa,CAAA;AAcpB,MAAM,MAAM,mBAAmB,GAAG;IAChC,gFAAgF;IAChF,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,YAAY,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAC/C,2DAA2D;IAC3D,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAChC,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,wCAAwC;IACxC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,cAAc,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;IAC1C,aAAa,EAAE,YAAY,EAAE,CAAA;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,eAAe,EACf,QAAQ,EACR,kBAAkB,EAClB,aAAa,EACb,MAAM,EACN,UAAU,GACX,EAAE,mBAAmB,qBA6drB"}

package/dist/views/HierarchyList/HierarchyTable/index.js

@@ -9,6 +9,7 @@ import { CreateDocumentButton } from '../../../elements/CreateDocumentButton/ind
 import { NoListResults } from '../../../elements/NoListResults/index.js';
 import { SimplePagination } from '../../../elements/Pagination/SimplePagination/index.js';
 import { TableSection } from '../../../elements/TableSection/index.js';
+import { useBranchParam } from '../../../providers/Branch/index.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useDocumentSelection } from '../../../providers/DocumentSelection/index.js';
 import { useRouteCache } from '../../../providers/RouteCache/index.js';
@@ -61,6 +62,7 @@ export function HierarchyTable({
     },
     getEntityConfig
   } = useConfig();
+  const branch = useBranchParam();
   // Children pagination state
   const [childDocs, setChildDocs] = useState(childrenData?.docs || []);
   const [childPaginationData, setChildPaginationData] = useState({
@@ -135,6 +137,7 @@ export function HierarchyTable({
       } : undefined;
       const where = combineWhereConstraints([parentCondition, searchCondition, baseFilter]);
       const queryString = qs.stringify({
+        branch,
         limit: DEFAULT_HIERARCHY_LIST_LIMIT,
         page,
         where
@@ -168,7 +171,7 @@ export function HierarchyTable({
     } finally {
       setChildLoading(false);
     }
-  }, [apiRoute, baseFilter, childLoading, collectionSlug, parentFieldName, parentId, search, serverURL, useAsTitle]);
+  }, [branch, apiRoute, baseFilter, childLoading, collectionSlug, parentFieldName, parentId, search, serverURL, useAsTitle]);
   // Page change for a related collection
   const handlePageChangeRelated = useCallback(async (relatedSlug, page_0) => {
     const state = relatedState[relatedSlug];
@@ -233,6 +236,7 @@ export function HierarchyTable({
       const relatedBaseFilter = relatedBaseFilters?.[relatedSlug];
       const where_0 = combineWhereConstraints([relationshipCondition, searchCondition_0, relatedBaseFilter]);
       const queryString_0 = qs.stringify({
+        branch,
         limit: DEFAULT_HIERARCHY_LIST_LIMIT,
         page: page_0,
         where: where_0
@@ -274,7 +278,7 @@ export function HierarchyTable({
         }
       }));
     }
-  }, [apiRoute, getEntityConfig, parentFieldName, parentId, relatedBaseFilters, relatedGroups, relatedState, search, serverURL]);
+  }, [branch, apiRoute, getEntityConfig, parentFieldName, parentId, relatedBaseFilters, relatedGroups, relatedState, search, serverURL]);
   // Get allowedCollections field name from hierarchy config
   const allowedCollectionsFieldName = useMemo(() => {
     const config = getEntityConfig({