@payloadcms/ui 4.0.0-internal.e7d4ebc → 4.0.0-internal.ec73d44

package/dist/elements/UserMenu/ThemeMenu/index.js

@@ -72,6 +72,8 @@ export const ThemeMenu = t0 => {
         className: "popup-button-list__button popup-button-list__button--submenu-trigger",
         "data-popup-prevent-close": true,
         onClick: onMobileOpen,
+        role: "menuitem",
+        tabIndex: -1,
         type: "button",
         children: [_jsx("span", {
           className: "popup-button-list__submenu-icon",
@@ -100,36 +102,19 @@ export const ThemeMenu = t0 => {
   let t1;
   if ($[3] !== t) {
     t1 = _jsx(Popup, {
-      renderButton: t2 => {
-        const {
-          active,
-          onClick,
-          onKeyDown,
-          ...aria
-        } = t2;
-        return _jsxs("button", {
-          ...aria,
-          className: ["popup-button-list__button", "popup-button-list__button--submenu-trigger", active && "popup-button-list__button--selected"].filter(Boolean).join(" "),
-          onClick,
-          onKeyDown,
-          type: "button",
-          children: [_jsx("span", {
-            className: "popup-button-list__submenu-icon",
-            children: _jsx(VariableColorIcon, {
-              size: 24
-            })
-          }), _jsx("span", {
-            className: "popup-button-list__label",
-            children: t("general:theme")
-          }), _jsx("span", {
-            className: "popup-button-list__chevron",
-            children: _jsx(ChevronIcon, {
-              direction: "right",
-              size: 16
-            })
-          })]
-        });
-      },
+      hoverSubmenu: true,
+      popupType: "menu",
+      renderButton: buttonProps => _jsx(PopupList.SubmenuTrigger, {
+        buttonProps,
+        icon: _jsx(VariableColorIcon, {
+          size: 24
+        }),
+        trailingIcon: _jsx(ChevronIcon, {
+          direction: "right",
+          size: 16
+        }),
+        children: t("general:theme")
+      }),
       side: "left",
       size: "large",
       theme: "dark",

package/dist/elements/UserMenu/ThemeMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","VariableColorIcon","useTheme","useTranslation","Popup","PopupList","ThemeMenuContent","$","autoMode","setTheme","theme","t","t0","options","label","value","activeValue","_jsx","children","RadioGroup","map","t1","RadioGroupItem","active","onClick","ThemeMenu","onMobileOpen","_jsxs","className","type","size","direction","renderButton","t2","onKeyDown","aria","filter","Boolean","join"],"sources":["../../../../src/elements/UserMenu/ThemeMenu/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { VariableColorIcon } from '../../../icons/VariableColor/index.js'\nimport { useTheme } from '../../../providers/Theme/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\n\nexport const ThemeMenuContent: React.FC = () => {\n  const { autoMode, setTheme, theme } = useTheme()\n  const { t } = useTranslation()\n\n  const options: { label: string; value: 'auto' | 'dark' | 'light' }[] = [\n    { label: t('general:auto'), value: 'auto' },\n    { label: t('general:light'), value: 'light' },\n    { label: t('general:dark'), value: 'dark' },\n  ]\n\n  const activeValue: 'auto' | 'dark' | 'light' = autoMode ? 'auto' : theme\n\n  return (\n    <div data-popup-prevent-close>\n      <PopupList.RadioGroup>\n        {options.map(({ label, value }) => (\n          <PopupList.RadioGroupItem\n            active={activeValue === value}\n            key={value}\n            onClick={() => setTheme(value)}\n          >\n            {label}\n          </PopupList.RadioGroupItem>\n        ))}\n      </PopupList.RadioGroup>\n    </div>\n  )\n}\n\nexport const ThemeMenu: React.FC<{\n  readonly onMobileOpen?: () => void\n}> = ({ onMobileOpen }) => {\n  const { t } = useTranslation()\n\n  if (onMobileOpen) {\n    return (\n      <button\n        className=\"popup-button-list__button popup-button-list__button--submenu-trigger\"\n        data-popup-prevent-close\n        onClick={onMobileOpen}\n        type=\"button\"\n      >\n        <span className=\"popup-button-list__submenu-icon\">\n          <VariableColorIcon size={24} />\n        </span>\n        <span className=\"popup-button-list__label\">{t('general:theme')}</span>\n        <span className=\"popup-button-list__chevron\">\n          <ChevronIcon direction=\"right\" size={24} />\n        </span>\n      </button>\n    )\n  }\n\n  return (\n    <Popup\n      renderButton={({ active, onClick, onKeyDown, ...aria }) => (\n        <button\n          {...aria}\n          className={[\n            'popup-button-list__button',\n            'popup-button-list__button--submenu-trigger',\n            active && 'popup-button-list__button--selected',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          type=\"button\"\n        >\n          <span className=\"popup-button-list__submenu-icon\">\n            <VariableColorIcon size={24} />\n          </span>\n          <span className=\"popup-button-list__label\">{t('general:theme')}</span>\n          <span className=\"popup-button-list__chevron\">\n            <ChevronIcon direction=\"right\" size={16} />\n          </span>\n        </button>\n      )}\n      side=\"left\"\n      size=\"large\"\n      theme=\"dark\"\n    >\n      <ThemeMenuContent />\n    </Popup>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","VariableColorIcon","useTheme","useTranslation","Popup","PopupList","ThemeMenuContent","$","autoMode","setTheme","theme","t","t0","options","label","value","activeValue","_jsx","children","RadioGroup","map","t1","RadioGroupItem","active","onClick","ThemeMenu","onMobileOpen","_jsxs","className","role","tabIndex","type","size","direction","hoverSubmenu","popupType","renderButton","buttonProps","SubmenuTrigger","icon"],"sources":["../../../../src/elements/UserMenu/ThemeMenu/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { VariableColorIcon } from '../../../icons/VariableColor/index.js'\nimport { useTheme } from '../../../providers/Theme/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\n\nexport const ThemeMenuContent: React.FC = () => {\n  const { autoMode, setTheme, theme } = useTheme()\n  const { t } = useTranslation()\n\n  const options: { label: string; value: 'auto' | 'dark' | 'light' }[] = [\n    { label: t('general:auto'), value: 'auto' },\n    { label: t('general:light'), value: 'light' },\n    { label: t('general:dark'), value: 'dark' },\n  ]\n\n  const activeValue: 'auto' | 'dark' | 'light' = autoMode ? 'auto' : theme\n\n  return (\n    <div data-popup-prevent-close>\n      <PopupList.RadioGroup>\n        {options.map(({ label, value }) => (\n          <PopupList.RadioGroupItem\n            active={activeValue === value}\n            key={value}\n            onClick={() => setTheme(value)}\n          >\n            {label}\n          </PopupList.RadioGroupItem>\n        ))}\n      </PopupList.RadioGroup>\n    </div>\n  )\n}\n\nexport const ThemeMenu: React.FC<{\n  readonly onMobileOpen?: () => void\n}> = ({ onMobileOpen }) => {\n  const { t } = useTranslation()\n\n  if (onMobileOpen) {\n    return (\n      <button\n        className=\"popup-button-list__button popup-button-list__button--submenu-trigger\"\n        data-popup-prevent-close\n        onClick={onMobileOpen}\n        role=\"menuitem\"\n        tabIndex={-1}\n        type=\"button\"\n      >\n        <span className=\"popup-button-list__submenu-icon\">\n          <VariableColorIcon size={24} />\n        </span>\n        <span className=\"popup-button-list__label\">{t('general:theme')}</span>\n        <span className=\"popup-button-list__chevron\">\n          <ChevronIcon direction=\"right\" size={24} />\n        </span>\n      </button>\n    )\n  }\n\n  return (\n    <Popup\n      hoverSubmenu\n      popupType=\"menu\"\n      renderButton={(buttonProps) => (\n        <PopupList.SubmenuTrigger\n          buttonProps={buttonProps}\n          icon={<VariableColorIcon size={24} />}\n          trailingIcon={<ChevronIcon direction=\"right\" size={16} />}\n        >\n          {t('general:theme')}\n        </PopupList.SubmenuTrigger>\n      )}\n      side=\"left\"\n      size=\"large\"\n      theme=\"dark\"\n    >\n      <ThemeMenuContent />\n    </Popup>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/UserMenu/index.css

@@ -1,19 +1,35 @@
 .user-menu {
   display: inline-flex;
   align-items: center;
+  min-width: 0;
+
+  > .popup__trigger-wrap {
+    max-width: 100%;
+    min-width: 0;
+  }
 }
 
 .user-menu__trigger {
-  display: flex;
-  align-items: center;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-}
+  max-width: 100%;
+  min-width: 0;
+  font-size: var(--text-body-medium-bold-font-size);
+  font-weight: var(--text-body-medium-bold-font-weight);
+  line-height: var(--text-body-medium-bold-line-height);
+  white-space: nowrap;
 
-.user-menu__trigger--active {
-  opacity: 0.8;
+  .btn__content,
+  .btn__label {
+    min-width: 0;
+  }
+
+  .btn__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .btn__icon {
+    flex-shrink: 0;
+  }
 }
 
 .user-menu__profile {
@@ -46,11 +62,10 @@
 
 .user-menu__name,
 .user-menu__identifier {
-  font-family: var(--text-body-medium-strong-font-family);
-  font-size: var(--text-body-medium-strong-font-size);
-  font-weight: var(--text-body-medium-strong-font-weight);
-  line-height: var(--text-body-medium-strong-line-height);
-  letter-spacing: var(--text-body-medium-strong-letter-spacing);
+  font-size: var(--text-body-medium-bold-font-size);
+  font-weight: var(--text-body-medium-bold-font-weight);
+  line-height: var(--text-body-medium-bold-line-height);
+  letter-spacing: var(--text-body-medium-bold-letter-spacing);
   margin: 0;
   text-align: center;
 }
@@ -97,7 +112,6 @@
 .user-menu__submenu-title {
   margin: 0;
   color: inherit;
-  font-family: var(--text-body-medium-font-family);
   font-size: var(--text-body-medium-font-size);
   font-weight: var(--text-body-medium-font-weight);
   line-height: var(--text-body-medium-line-height);

package/dist/elements/UserMenu/index.d.ts

@@ -5,6 +5,7 @@ type UserMenuProps = {
     CustomAvatar?: React.ReactNode;
     CustomLogoutButton?: React.ReactNode;
     settingsItemGroups?: UserMenuSettingsGroup[];
+    showTitle?: boolean;
 };
 export declare const UserMenu: React.FC<UserMenuProps>;
 export {};

package/dist/elements/UserMenu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/UserMenu/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAcpE,OAAO,aAAa,CAAA;AAIpB,KAAK,aAAa,GAAG;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACpC,kBAAkB,CAAC,EAAE,qBAAqB,EAAE,CAAA;CAC7C,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+J5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/UserMenu/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAgBpE,OAAO,aAAa,CAAA;AAIpB,KAAK,aAAa,GAAG;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACpC,kBAAkB,CAAC,EAAE,qBAAqB,EAAE,CAAA;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmM5C,CAAA"}

package/dist/elements/UserMenu/index.js

@@ -4,12 +4,14 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useWindowInfo } from '@faceless-ui/window-info';
 import { formatAdminURL } from 'payload/shared';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Account } from '../../graphics/Account/index.js';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { LogOutIcon } from '../../icons/LogOut/index.js';
 import { useAuth } from '../../providers/Auth/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { Button } from '../Button/index.js';
 import { MenuSeparator } from '../MenuSeparator/index.js';
 import { Popup, PopupList } from '../Popup/index.js';
 import { RenderCustomComponent } from '../RenderCustomComponent/index.js';
@@ -20,13 +22,15 @@ import { ThemeMenu, ThemeMenuContent } from './ThemeMenu/index.js';
 import './index.css';
 const baseClass = 'user-menu';
 export const UserMenu = t0 => {
-  const $ = _c(7);
+  const $ = _c(9);
   const {
     CustomAvatar,
     CustomLogoutButton,
-    settingsItemGroups: t1
+    settingsItemGroups: t1,
+    showTitle: t2
   } = t0;
   const settingsItemGroups = t1 === undefined ? [] : t1;
+  const showTitle = t2 === undefined ? false : t2;
   const {
     user
   } = useAuth();
@@ -35,50 +39,51 @@ export const UserMenu = t0 => {
     t
   } = useTranslation();
   const {
-    config: t2,
+    config: t3,
     getEntityConfig
   } = useConfig();
   const {
-    admin: t3,
-    routes: t4
-  } = t2;
+    admin: t4,
+    routes: t5
+  } = t3;
   const {
-    routes: t5,
+    routes: t6,
     theme: adminTheme,
     user: userSlug
-  } = t3;
+  } = t4;
   const {
     account: accountRoute,
     logout: logoutRoute
-  } = t5;
+  } = t6;
   const {
     admin: adminRoute
-  } = t4;
+  } = t5;
   const {
-    breakpoints: t6
+    breakpoints: t7
   } = useWindowInfo();
   const {
     s: smallBreak
-  } = t6;
+  } = t7;
   const isMobile = Boolean(smallBreak);
   const [activeMobileSubmenu, setActiveMobileSubmenu] = useState(null);
-  let t7;
+  const setMobileSubmenuRef = _temp;
   let t8;
+  let t9;
   if ($[0] !== isMobile) {
-    t7 = () => {
+    t8 = () => {
       if (!isMobile) {
         setActiveMobileSubmenu(null);
       }
     };
-    t8 = [isMobile];
+    t9 = [isMobile];
     $[0] = isMobile;
-    $[1] = t7;
-    $[2] = t8;
+    $[1] = t8;
+    $[2] = t9;
   } else {
-    t7 = $[1];
-    t8 = $[2];
+    t8 = $[1];
+    t9 = $[2];
   }
-  useEffect(t7, t8);
+  useEffect(t8, t9);
   const userCollectionConfig = getEntityConfig({
     collectionSlug: userSlug
   });
@@ -88,7 +93,7 @@ export const UserMenu = t0 => {
   const identifier = user?.username ?? user?.email ?? "";
   const hasMultipleLanguages = Array.isArray(languageOptions) && languageOptions.length > 1;
   const showThemeMenu = adminTheme === "all";
-  const hasSettingsItems = settingsItemGroups.some(_temp);
+  const hasSettingsItems = settingsItemGroups.some(_temp2);
   const showPreferencesGroup = showThemeMenu || hasMultipleLanguages;
   const logoutHref = formatAdminURL({
     adminRoute,
@@ -98,47 +103,55 @@ export const UserMenu = t0 => {
     adminRoute,
     path: accountRoute
   });
-  let t9;
+  let t10;
   if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-    t9 = () => setActiveMobileSubmenu(null);
-    $[3] = t9;
+    t10 = () => setActiveMobileSubmenu(null);
+    $[3] = t10;
   } else {
-    t9 = $[3];
+    t10 = $[3];
   }
-  let t10;
-  if ($[4] !== CustomAvatar || $[5] !== t) {
-    t10 = t11 => {
+  let t11;
+  if ($[4] !== identifier || $[5] !== showTitle || $[6] !== t || $[7] !== titleString) {
+    t11 = t12 => {
       const {
         active,
         ...ariaProps
-      } = t11;
-      return _jsx("button", {
+      } = t12;
+      return _jsx(Button, {
         ...ariaProps,
-        "aria-label": t("authentication:account"),
-        className: [`${baseClass}__trigger`, active && `${baseClass}__trigger--active`].filter(Boolean).join(" "),
+        "aria-label": [t("authentication:account"), showTitle ? titleString || identifier : undefined].filter(Boolean).join(": "),
+        buttonStyle: "ghost",
+        className: `${baseClass}__trigger${showTitle ? ` ${baseClass}__trigger--with-title` : ""}`,
+        icon: _jsx(ChevronIcon, {
+          direction: "down",
+          size: 16
+        }),
+        margin: false,
+        selected: active,
         type: "button",
-        children: _jsx(RenderCustomComponent, {
-          CustomComponent: CustomAvatar,
-          Fallback: _jsx(Account, {})
-        })
+        children: showTitle && (titleString || identifier) ? titleString || identifier : undefined
       });
     };
-    $[4] = CustomAvatar;
-    $[5] = t;
-    $[6] = t10;
+    $[4] = identifier;
+    $[5] = showTitle;
+    $[6] = t;
+    $[7] = titleString;
+    $[8] = t11;
   } else {
-    t10 = $[6];
+    t11 = $[8];
   }
   return _jsx(Popup, {
     caret: false,
     className: baseClass,
     horizontalAlign: "right",
-    onToggleClose: t9,
-    renderButton: t10,
+    onToggleClose: t10,
+    popupType: "menu",
+    renderButton: t11,
     size: "large",
     theme: "dark",
     verticalAlign: "bottom",
-    children: isMobile && activeMobileSubmenu ? _jsxs(_Fragment, {
+    children: isMobile && activeMobileSubmenu ? _jsxs("div", {
+      ref: setMobileSubmenuRef,
       children: [activeMobileSubmenu === "theme" && _jsxs(_Fragment, {
         children: [_jsx(SubMenuHeader, {
           onBack: () => setActiveMobileSubmenu(null),
@@ -159,8 +172,11 @@ export const UserMenu = t0 => {
       })]
     }) : _jsxs(_Fragment, {
       children: [_jsxs("a", {
+        "aria-label": [t("authentication:account"), titleString, identifier].filter(Boolean).join(": "),
         className: `${baseClass}__profile`,
         href: accountHref,
+        role: "menuitem",
+        tabIndex: -1,
         children: [_jsx("div", {
           className: `${baseClass}__avatar`,
           children: _jsx(RenderCustomComponent, {
@@ -176,14 +192,18 @@ export const UserMenu = t0 => {
             children: identifier
           })]
         })]
-      }), showPreferencesGroup && _jsxs(PopupList.ButtonGroup, {
-        children: [showThemeMenu && _jsx(ThemeMenu, {
-          onMobileOpen: isMobile ? () => setActiveMobileSubmenu("theme") : undefined
-        }), hasMultipleLanguages && _jsx(LanguageMenu, {
-          onMobileOpen: isMobile ? () => setActiveMobileSubmenu("language") : undefined
+      }), showPreferencesGroup && _jsxs(_Fragment, {
+        children: [showThemeMenu && _jsx(PopupList.MenuItem, {
+          children: _jsx(ThemeMenu, {
+            onMobileOpen: isMobile ? () => setActiveMobileSubmenu("theme") : undefined
+          })
+        }), hasMultipleLanguages && _jsx(PopupList.MenuItem, {
+          children: _jsx(LanguageMenu, {
+            onMobileOpen: isMobile ? () => setActiveMobileSubmenu("language") : undefined
+          })
         })]
       }), _jsx(MenuSeparator, {}), hasSettingsItems && _jsxs(_Fragment, {
-        children: [_jsx(PopupList.ButtonGroup, {
+        children: [_jsx(PopupList.MenuItem, {
           children: _jsx(SettingsMenu, {
             groups: settingsItemGroups,
             onMobileOpen: isMobile ? () => setActiveMobileSubmenu("settings") : undefined
@@ -199,7 +219,19 @@ export const UserMenu = t0 => {
     })
   });
 };
-function _temp(group) {
+function _temp(element) {
+  if (!element) {
+    return;
+  }
+  setTimeout(() => {
+    const firstMenuItem = element.querySelector("[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]");
+    if (firstMenuItem) {
+      firstMenuItem.tabIndex = 0;
+      firstMenuItem.focus();
+    }
+  });
+}
+function _temp2(group) {
   return group.items.length > 0;
 }
 //# sourceMappingURL=index.js.map

package/dist/elements/UserMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useWindowInfo","formatAdminURL","React","useEffect","useState","Account","LogOutIcon","useAuth","useConfig","useTranslation","MenuSeparator","Popup","PopupList","RenderCustomComponent","LanguageMenu","LanguageMenuContent","SettingsMenu","SettingsMenuContent","SubMenuHeader","ThemeMenu","ThemeMenuContent","baseClass","UserMenu","t0","$","CustomAvatar","CustomLogoutButton","settingsItemGroups","t1","undefined","user","languageOptions","t","config","t2","getEntityConfig","admin","t3","routes","t4","t5","theme","adminTheme","userSlug","account","accountRoute","logout","logoutRoute","adminRoute","breakpoints","t6","s","smallBreak","isMobile","Boolean","activeMobileSubmenu","setActiveMobileSubmenu","t7","t8","userCollectionConfig","collectionSlug","useAsTitle","titleValue","titleString","identifier","username","email","hasMultipleLanguages","Array","isArray","length","showThemeMenu","hasSettingsItems","some","_temp","showPreferencesGroup","logoutHref","path","accountHref","t9","Symbol","for","t10","t11","active","ariaProps","_jsx","className","filter","join","type","children","CustomComponent","Fallback","caret","horizontalAlign","onToggleClose","renderButton","verticalAlign","_jsxs","_Fragment","onBack","title","groups","href","ButtonGroup","onMobileOpen","MenuItem","Button","icon","group","items"],"sources":["../../../src/elements/UserMenu/index.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect, useState } from 'react'\n\nimport type { UserMenuSettingsGroup } from './SettingsMenu/index.js'\n\nimport { Account } from '../../graphics/Account/index.js'\nimport { LogOutIcon } from '../../icons/LogOut/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { MenuSeparator } from '../MenuSeparator/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport { RenderCustomComponent } from '../RenderCustomComponent/index.js'\nimport { LanguageMenu, LanguageMenuContent } from './LanguageMenu/index.js'\nimport { SettingsMenu, SettingsMenuContent } from './SettingsMenu/index.js'\nimport { SubMenuHeader } from './SubMenuHeader/index.js'\nimport { ThemeMenu, ThemeMenuContent } from './ThemeMenu/index.js'\nimport './index.css'\n\nconst baseClass = 'user-menu'\n\ntype UserMenuProps = {\n  CustomAvatar?: React.ReactNode\n  CustomLogoutButton?: React.ReactNode\n  settingsItemGroups?: UserMenuSettingsGroup[]\n}\n\nexport const UserMenu: React.FC<UserMenuProps> = ({\n  CustomAvatar,\n  CustomLogoutButton,\n  settingsItemGroups = [],\n}) => {\n  const { user } = useAuth()\n  const { languageOptions, t } = useTranslation()\n  const {\n    config: {\n      admin: {\n        routes: { account: accountRoute, logout: logoutRoute },\n        theme: adminTheme,\n        user: userSlug,\n      },\n      routes: { admin: adminRoute },\n    },\n    getEntityConfig,\n  } = useConfig()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  const isMobile = Boolean(smallBreak)\n\n  const [activeMobileSubmenu, setActiveMobileSubmenu] = useState<\n    'language' | 'settings' | 'theme' | null\n  >(null)\n\n  useEffect(() => {\n    if (!isMobile) {\n      setActiveMobileSubmenu(null)\n    }\n  }, [isMobile])\n\n  const userCollectionConfig = getEntityConfig({ collectionSlug: userSlug })\n  const useAsTitle = userCollectionConfig?.admin?.useAsTitle ?? 'email'\n  const titleValue =\n    useAsTitle !== 'email' && user ? (user as Record<string, unknown>)[useAsTitle] : undefined\n  const titleString = typeof titleValue === 'string' ? titleValue : undefined\n\n  const identifier = user?.username ?? user?.email ?? ''\n  const hasMultipleLanguages = Array.isArray(languageOptions) && languageOptions.length > 1\n  const showThemeMenu = adminTheme === 'all'\n  const hasSettingsItems = settingsItemGroups.some((group) => group.items.length > 0)\n  const showPreferencesGroup = showThemeMenu || hasMultipleLanguages\n\n  const logoutHref = formatAdminURL({ adminRoute, path: logoutRoute })\n  const accountHref = formatAdminURL({ adminRoute, path: accountRoute })\n\n  return (\n    <Popup\n      caret={false}\n      className={baseClass}\n      horizontalAlign=\"right\"\n      onToggleClose={() => setActiveMobileSubmenu(null)}\n      renderButton={({ active, ...ariaProps }) => (\n        <button\n          {...ariaProps}\n          aria-label={t('authentication:account')}\n          className={[`${baseClass}__trigger`, active && `${baseClass}__trigger--active`]\n            .filter(Boolean)\n            .join(' ')}\n          type=\"button\"\n        >\n          <RenderCustomComponent CustomComponent={CustomAvatar} Fallback={<Account />} />\n        </button>\n      )}\n      size=\"large\"\n      theme=\"dark\"\n      verticalAlign=\"bottom\"\n    >\n      {isMobile && activeMobileSubmenu ? (\n        // Mobile submenu panel\n        <>\n          {activeMobileSubmenu === 'theme' && (\n            <>\n              <SubMenuHeader\n                onBack={() => setActiveMobileSubmenu(null)}\n                title={t('general:theme')}\n              />\n              <ThemeMenuContent />\n            </>\n          )}\n          {activeMobileSubmenu === 'language' && (\n            <>\n              <SubMenuHeader\n                onBack={() => setActiveMobileSubmenu(null)}\n                title={t('general:language')}\n              />\n              <LanguageMenuContent />\n            </>\n          )}\n          {activeMobileSubmenu === 'settings' && (\n            <>\n              <SubMenuHeader\n                onBack={() => setActiveMobileSubmenu(null)}\n                title={t('general:settings')}\n              />\n              <SettingsMenuContent groups={settingsItemGroups} />\n            </>\n          )}\n        </>\n      ) : (\n        // Normal menu content (desktop always; mobile when no active submenu)\n        <>\n          {/* Profile header */}\n          <a className={`${baseClass}__profile`} href={accountHref}>\n            <div className={`${baseClass}__avatar`}>\n              <RenderCustomComponent CustomComponent={CustomAvatar} Fallback={<Account />} />\n            </div>\n            <div>\n              {titleString && <p className={`${baseClass}__name`}>{titleString}</p>}\n              {identifier && <p className={`${baseClass}__identifier`}>{identifier}</p>}\n            </div>\n          </a>\n\n          {/* Preferences group: Theme + Language */}\n          {showPreferencesGroup && (\n            <PopupList.ButtonGroup>\n              {showThemeMenu && (\n                <ThemeMenu\n                  onMobileOpen={isMobile ? () => setActiveMobileSubmenu('theme') : undefined}\n                />\n              )}\n              {hasMultipleLanguages && (\n                <LanguageMenu\n                  onMobileOpen={isMobile ? () => setActiveMobileSubmenu('language') : undefined}\n                />\n              )}\n            </PopupList.ButtonGroup>\n          )}\n\n          <MenuSeparator />\n\n          {/* Settings group */}\n          {hasSettingsItems && (\n            <>\n              <PopupList.ButtonGroup>\n                <SettingsMenu\n                  groups={settingsItemGroups}\n                  onMobileOpen={isMobile ? () => setActiveMobileSubmenu('settings') : undefined}\n                />\n              </PopupList.ButtonGroup>\n              <MenuSeparator />\n            </>\n          )}\n\n          {/* Account actions */}\n          <PopupList.MenuItem>\n            {CustomLogoutButton ?? (\n              <PopupList.Button href={logoutHref} icon={<LogOutIcon />}>\n                {t('authentication:logOut')}\n              </PopupList.Button>\n            )}\n          </PopupList.MenuItem>\n        </>\n      )}\n    </Popup>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,aAAa,QAAQ;AAC9B,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,SAAS,EAAEC,QAAQ,QAAQ;AAI3C,SAASC,OAAO,QAAQ;AACxB,SAASC,UAAU,QAAQ;AAC3B,SAASC,OAAO,QAAQ;AACxB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,aAAa,QAAQ;AAC9B,SAASC,KAAK,EAAEC,SAAS,QAAQ;AACjC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,YAAY,EAAEC,mBAAmB,QAAQ;AAClD,SAASC,YAAY,EAAEC,mBAAmB,QAAQ;AAClD,SAASC,aAAa,QAAQ;AAC9B,SAASC,SAAS,EAAEC,gBAAgB,QAAQ;AAC5C,OAAO;AAEP,MAAMC,SAAA,GAAY;AAQlB,OAAO,MAAMC,QAAA,GAAoCC,EAAA;EAAA,MAAAC,CAAA,GAAAzB,EAAA;EAAC;IAAA0B,YAAA;IAAAC,kBAAA;IAAAC,kBAAA,EAAAC;EAAA,IAAAL,EAIjD;EADC,MAAAI,kBAAA,GAAAC,EAAuB,KAAAC,SAAA,QAAvBD,EAAuB;EAEvB;IAAAE;EAAA,IAAiBvB,OAAA;EACjB;IAAAwB,eAAA;IAAAC;EAAA,IAA+BvB,cAAA;EAC/B;IAAAwB,MAAA,EAAAC,EAAA;IAAAC;EAAA,IAUI3B,SAAA;EATM;IAAA4B,KAAA,EAAAC,EAAA;IAAAC,MAAA,EAAAC;EAAA,IAAAL,EAOP;EANQ;IAAAI,MAAA,EAAAE,EAAA;IAAAC,KAAA,EAAAC,UAAA;IAAAZ,IAAA,EAAAa;EAAA,IAAAN,EAIN;EAHS;IAAAO,OAAA,EAAAC,YAAA;IAAAC,MAAA,EAAAC;EAAA,IAAAP,EAA8C;EAIhD;IAAAJ,KAAA,EAAAY;EAAA,IAAAT,EAAqB;EAIjC;IAAAU,WAAA,EAAAC;EAAA,IAEIlD,aAAA;EADW;IAAAmD,CAAA,EAAAC;EAAA,IAAAF,EAAiB;EAGhC,MAAAG,QAAA,GAAiBC,OAAA,CAAQF,UAAA;EAEzB,OAAAG,mBAAA,EAAAC,sBAAA,IAAsDpD,QAAA,KAEpD;EAAA,IAAAqD,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAlC,CAAA,QAAA6B,QAAA;IAEQI,EAAA,GAAAA,CAAA;MAAA,KACHJ,QAAA;QACHG,sBAAA,KAAuB;MAAA;IAAA;IAExBE,EAAA,IAACL,QAAA;IAAS7B,CAAA,MAAA6B,QAAA;IAAA7B,CAAA,MAAAiC,EAAA;IAAAjC,CAAA,MAAAkC,EAAA;EAAA;IAAAD,EAAA,GAAAjC,CAAA;IAAAkC,EAAA,GAAAlC,CAAA;EAAA;EAJbrB,SAAA,CAAUsD,EAIV,EAAGC,EAAU;EAEb,MAAAC,oBAAA,GAA6BxB,eAAA;IAAAyB,cAAA,EAAkCjB;EAAA,CAAS;EACxE,MAAAkB,UAAA,GAAmBF,oBAAA,EAAAvB,KAAA,EAAAyB,UAAA,IAA2C;EAC9D,MAAAC,UAAA,GACED,UAAA,KAAe,WAAW/B,IAAA,GAAOA,IAAiC,CAAC+B,UAAA,IAAAA,SAAc;EACnF,MAAAE,WAAA,GAAoB,OAAOD,UAAA,KAAe,WAAWA,UAAA,GAAAjC,SAAa;EAElE,MAAAmC,UAAA,GAAmBlC,IAAA,EAAAmC,QAAA,IAAkBnC,IAAA,EAAAoC,KAAM,IAAS;EACpD,MAAAC,oBAAA,GAA6BC,KAAA,CAAAC,OAAA,CAActC,eAAA,KAAoBA,eAAA,CAAAuC,MAAA,IAAyB;EACxF,MAAAC,aAAA,GAAsB7B,UAAA,KAAe;EACrC,MAAA8B,gBAAA,GAAyB7C,kBAAA,CAAA8C,IAAA,CAAAC,KAAwD;EACjF,MAAAC,oBAAA,GAA6BJ,aAAA,IAAiBJ,oBAAA;EAE9C,MAAAS,UAAA,GAAmB3E,cAAA;IAAA+C,UAAA;IAAA6B,IAAA,EAAmC9B;EAAA,CAAY;EAClE,MAAA+B,WAAA,GAAoB7E,cAAA;IAAA+C,UAAA;IAAA6B,IAAA,EAAmChC;EAAA,CAAa;EAAA,IAAAkC,EAAA;EAAA,IAAAvD,CAAA,QAAAwD,MAAA,CAAAC,GAAA;IAOjDF,EAAA,GAAAA,CAAA,KAAMvB,sBAAA,KAAuB;IAAAhC,CAAA,MAAAuD,EAAA;EAAA;IAAAA,EAAA,GAAAvD,CAAA;EAAA;EAAA,IAAA0D,GAAA;EAAA,IAAA1D,CAAA,QAAAC,YAAA,IAAAD,CAAA,QAAAQ,CAAA;IAC9BkD,GAAA,GAAAC,GAAA;MAAC;QAAAC,MAAA;QAAA,GAAAC;MAAA,IAAAF,GAAwB;MAAA,OACrCG,IAAA,CAAC;QAAA,GACKD,SAAS;QAAA,cACDrD,CAAA,CAAE;QAAAuD,SAAA,EACH,CAAC,GAAAlE,SAAA,WAAuB,EAAE+D,MAAA,IAAU,GAAA/D,SAAA,mBAA+B,EAAAmE,MAAA,CAAAlC,OACpE,EAAAmC,IAAA,CACF;QAAAC,IAAA,EACH;QAAAC,QAAA,EAELL,IAAA,CAAAzE,qBAAA;UAAA+E,eAAA,EAAwCnE,YAAA;UAAAoE,QAAA,EAAwBP,IAAA,CAAAjF,OAAA,IAAC;QAAA,C;;;;;;;;;SAdvEiF,IAAA,CAAA3E,KAAA;IAAAmF,KAAA;IAAAP,SAAA,EAAAlE,SAAA;IAAA0E,eAAA,EAGkB;IAAAC,aAAA,EACDjB,EAA6B;IAAAkB,YAAA,EAC9Bf,G;UAYT;IAAAzC,KAAA,EACC;IAAAyD,aAAA,EACQ;IAAAP,QAAA,EAEbtC,QAAA,IAAYE,mBAAA,GAEX4C,KAAA,CAAAC,SAAA;MAAAT,QAAA,GACGpC,mBAAA,KAAwB,WACvB4C,KAAA,CAAAC,SAAA;QAAAT,QAAA,GACEL,IAAA,CAAApE,aAAA;UAAAmF,MAAA,EAAAA,CAAA,KACgB7C,sBAAA,KAAuB;UAAA8C,KAAA,EAC9BtE,CAAA,CAAE;QAAA,C,GAEXsD,IAAA,CAAAlE,gBAAA,IAAC;MAAA,C,GAGJmC,mBAAA,KAAwB,cACvB4C,KAAA,CAAAC,SAAA;QAAAT,QAAA,GACEL,IAAA,CAAApE,aAAA;UAAAmF,MAAA,EAAAA,CAAA,KACgB7C,sBAAA,KAAuB;UAAA8C,KAAA,EAC9BtE,CAAA,CAAE;QAAA,C,GAEXsD,IAAA,CAAAvE,mBAAA,IAAC;MAAA,C,GAGJwC,mBAAA,KAAwB,cACvB4C,KAAA,CAAAC,SAAA;QAAAT,QAAA,GACEL,IAAA,CAAApE,aAAA;UAAAmF,MAAA,EAAAA,CAAA,KACgB7C,sBAAA,KAAuB;UAAA8C,KAAA,EAC9BtE,CAAA,CAAE;QAAA,C,GAEXsD,IAAA,CAAArE,mBAAA;UAAAsF,MAAA,EAA6B5E;QAAA,C;;SAMnCwE,KAAA,CAAAC,SAAA;MAAAT,QAAA,GAEEQ,KAAA,CAAC;QAAAZ,SAAA,EAAa,GAAAlE,SAAA,WAAuB;QAAAmF,IAAA,EAAQ1B,WAAA;QAAAa,QAAA,GAC3CL,IAAA,CAAC;UAAAC,SAAA,EAAe,GAAAlE,SAAA,UAAsB;UAAAsE,QAAA,EACpCL,IAAA,CAAAzE,qBAAA;YAAA+E,eAAA,EAAwCnE,YAAA;YAAAoE,QAAA,EAAwBP,IAAA,CAAAjF,OAAA,IAAC;UAAA,C;YAEnE8F,KAAA,CAAC;UAAAR,QAAA,GACE5B,WAAA,IAAeuB,IAAA,CAAC;YAAAC,SAAA,EAAa,GAAAlE,SAAA,QAAoB;YAAAsE,QAAA,EAAG5B;UAAA,C,GACpDC,UAAA,IAAcsB,IAAA,CAAC;YAAAC,SAAA,EAAa,GAAAlE,SAAA,cAA0B;YAAAsE,QAAA,EAAG3B;UAAA,C;;UAK7DW,oBAAA,IACCwB,KAAA,CAAAvF,SAAA,CAAA6F,WAAA;QAAAd,QAAA,GACGpB,aAAA,IACCe,IAAA,CAAAnE,SAAA;UAAAuF,YAAA,EACgBrD,QAAA,SAAiBG,sBAAA,CAAuB,WAAA3B;QAAW,C,GAGpEsC,oBAAA,IACCmB,IAAA,CAAAxE,YAAA;UAAA4F,YAAA,EACgBrD,QAAA,SAAiBG,sBAAA,CAAuB,cAAA3B;QAAc,C;UAM5EyD,IAAA,CAAA5E,aAAA,IAAC,GAGA8D,gBAAA,IACC2B,KAAA,CAAAC,SAAA;QAAAT,QAAA,GACEL,IAAA,CAAA1E,SAAA,CAAA6F,WAAA;UAAAd,QAAA,EACEL,IAAA,CAAAtE,YAAA;YAAAuF,MAAA,EACU5E,kBAAA;YAAA+E,YAAA,EACMrD,QAAA,SAAiBG,sBAAA,CAAuB,cAAA3B;UAAc,C;YAGxEyD,IAAA,CAAA5E,aAAA,IAAC;MAAA,C,GAKL4E,IAAA,CAAA1E,SAAA,CAAA+F,QAAA;QAAAhB,QAAA,EACGjE,kBAAA,IACC4D,IAAA,CAAA1E,SAAA,CAAAgG,MAAA;UAAAJ,IAAA,EAAwB5B,UAAA;UAAAiC,IAAA,EAAkBvB,IAAA,CAAAhF,UAAA,IAAC;UAAAqF,QAAA,EACxC3D,CAAA,CAAE;QAAA,C;;;;CAQnB;AA/JiD,SAAA0C,MAAAoC,KAAA;EAAA,OA2CaA,KAAA,CAAAC,KAAA,CAAAzC,MAAA,IAAqB;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useWindowInfo","formatAdminURL","React","useCallback","useEffect","useState","Account","ChevronIcon","LogOutIcon","useAuth","useConfig","useTranslation","Button","MenuSeparator","Popup","PopupList","RenderCustomComponent","LanguageMenu","LanguageMenuContent","SettingsMenu","SettingsMenuContent","SubMenuHeader","ThemeMenu","ThemeMenuContent","baseClass","UserMenu","t0","$","CustomAvatar","CustomLogoutButton","settingsItemGroups","t1","showTitle","t2","undefined","user","languageOptions","t","config","t3","getEntityConfig","admin","t4","routes","t5","t6","theme","adminTheme","userSlug","account","accountRoute","logout","logoutRoute","adminRoute","breakpoints","t7","s","smallBreak","isMobile","Boolean","activeMobileSubmenu","setActiveMobileSubmenu","setMobileSubmenuRef","_temp","t8","t9","userCollectionConfig","collectionSlug","useAsTitle","titleValue","titleString","identifier","username","email","hasMultipleLanguages","Array","isArray","length","showThemeMenu","hasSettingsItems","some","_temp2","showPreferencesGroup","logoutHref","path","accountHref","t10","Symbol","for","t11","t12","active","ariaProps","_jsx","filter","join","buttonStyle","className","icon","direction","size","selected","type","children","caret","horizontalAlign","onToggleClose","popupType","renderButton","verticalAlign","_jsxs","ref","_Fragment","onBack","title","groups","href","role","tabIndex","CustomComponent","Fallback","MenuItem","onMobileOpen","element","setTimeout","firstMenuItem","querySelector","focus","group","items"],"sources":["../../../src/elements/UserMenu/index.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { UserMenuSettingsGroup } from './SettingsMenu/index.js'\n\nimport { Account } from '../../graphics/Account/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { LogOutIcon } from '../../icons/LogOut/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { MenuSeparator } from '../MenuSeparator/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport { RenderCustomComponent } from '../RenderCustomComponent/index.js'\nimport { LanguageMenu, LanguageMenuContent } from './LanguageMenu/index.js'\nimport { SettingsMenu, SettingsMenuContent } from './SettingsMenu/index.js'\nimport { SubMenuHeader } from './SubMenuHeader/index.js'\nimport { ThemeMenu, ThemeMenuContent } from './ThemeMenu/index.js'\nimport './index.css'\n\nconst baseClass = 'user-menu'\n\ntype UserMenuProps = {\n  CustomAvatar?: React.ReactNode\n  CustomLogoutButton?: React.ReactNode\n  settingsItemGroups?: UserMenuSettingsGroup[]\n  showTitle?: boolean\n}\n\nexport const UserMenu: React.FC<UserMenuProps> = ({\n  CustomAvatar,\n  CustomLogoutButton,\n  settingsItemGroups = [],\n  showTitle = false,\n}) => {\n  const { user } = useAuth()\n  const { languageOptions, t } = useTranslation()\n  const {\n    config: {\n      admin: {\n        routes: { account: accountRoute, logout: logoutRoute },\n        theme: adminTheme,\n        user: userSlug,\n      },\n      routes: { admin: adminRoute },\n    },\n    getEntityConfig,\n  } = useConfig()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  const isMobile = Boolean(smallBreak)\n\n  const [activeMobileSubmenu, setActiveMobileSubmenu] = useState<\n    'language' | 'settings' | 'theme' | null\n  >(null)\n\n  const setMobileSubmenuRef = useCallback((element: HTMLDivElement | null) => {\n    if (!element) {\n      return\n    }\n\n    setTimeout(() => {\n      const firstMenuItem = element.querySelector<HTMLElement>(\n        '[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]',\n      )\n      if (firstMenuItem) {\n        firstMenuItem.tabIndex = 0\n        firstMenuItem.focus()\n      }\n    })\n  }, [])\n\n  useEffect(() => {\n    if (!isMobile) {\n      setActiveMobileSubmenu(null)\n    }\n  }, [isMobile])\n\n  const userCollectionConfig = getEntityConfig({ collectionSlug: userSlug })\n  const useAsTitle = userCollectionConfig?.admin?.useAsTitle ?? 'email'\n  const titleValue =\n    useAsTitle !== 'email' && user ? (user as Record<string, unknown>)[useAsTitle] : undefined\n  const titleString = typeof titleValue === 'string' ? titleValue : undefined\n\n  const identifier = user?.username ?? user?.email ?? ''\n  const hasMultipleLanguages = Array.isArray(languageOptions) && languageOptions.length > 1\n  const showThemeMenu = adminTheme === 'all'\n  const hasSettingsItems = settingsItemGroups.some((group) => group.items.length > 0)\n  const showPreferencesGroup = showThemeMenu || hasMultipleLanguages\n\n  const logoutHref = formatAdminURL({ adminRoute, path: logoutRoute })\n  const accountHref = formatAdminURL({ adminRoute, path: accountRoute })\n\n  return (\n    <Popup\n      caret={false}\n      className={baseClass}\n      horizontalAlign=\"right\"\n      onToggleClose={() => setActiveMobileSubmenu(null)}\n      popupType=\"menu\"\n      renderButton={({ active, ...ariaProps }) => (\n        <Button\n          {...ariaProps}\n          aria-label={[\n            t('authentication:account'),\n            showTitle ? titleString || identifier : undefined,\n          ]\n            .filter(Boolean)\n            .join(': ')}\n          buttonStyle=\"ghost\"\n          className={`${baseClass}__trigger${showTitle ? ` ${baseClass}__trigger--with-title` : ''}`}\n          icon={<ChevronIcon direction=\"down\" size={16} />}\n          margin={false}\n          selected={active}\n          type=\"button\"\n        >\n          {showTitle && (titleString || identifier) ? titleString || identifier : undefined}\n        </Button>\n      )}\n      size=\"large\"\n      theme=\"dark\"\n      verticalAlign=\"bottom\"\n    >\n      {isMobile && activeMobileSubmenu ? (\n        // Mobile submenu panel\n        <div ref={setMobileSubmenuRef}>\n          {activeMobileSubmenu === 'theme' && (\n            <>\n              <SubMenuHeader\n                onBack={() => setActiveMobileSubmenu(null)}\n                title={t('general:theme')}\n              />\n              <ThemeMenuContent />\n            </>\n          )}\n          {activeMobileSubmenu === 'language' && (\n            <>\n              <SubMenuHeader\n                onBack={() => setActiveMobileSubmenu(null)}\n                title={t('general:language')}\n              />\n              <LanguageMenuContent />\n            </>\n          )}\n          {activeMobileSubmenu === 'settings' && (\n            <>\n              <SubMenuHeader\n                onBack={() => setActiveMobileSubmenu(null)}\n                title={t('general:settings')}\n              />\n              <SettingsMenuContent groups={settingsItemGroups} />\n            </>\n          )}\n        </div>\n      ) : (\n        // Normal menu content (desktop always; mobile when no active submenu)\n        <>\n          {/* Profile header */}\n          <a\n            aria-label={[t('authentication:account'), titleString, identifier]\n              .filter(Boolean)\n              .join(': ')}\n            className={`${baseClass}__profile`}\n            href={accountHref}\n            role=\"menuitem\"\n            tabIndex={-1}\n          >\n            <div className={`${baseClass}__avatar`}>\n              <RenderCustomComponent CustomComponent={CustomAvatar} Fallback={<Account />} />\n            </div>\n            <div>\n              {titleString && <p className={`${baseClass}__name`}>{titleString}</p>}\n              {identifier && <p className={`${baseClass}__identifier`}>{identifier}</p>}\n            </div>\n          </a>\n\n          {/* Preferences group: Theme + Language */}\n          {showPreferencesGroup && (\n            <>\n              {showThemeMenu && (\n                <PopupList.MenuItem>\n                  <ThemeMenu\n                    onMobileOpen={isMobile ? () => setActiveMobileSubmenu('theme') : undefined}\n                  />\n                </PopupList.MenuItem>\n              )}\n              {hasMultipleLanguages && (\n                <PopupList.MenuItem>\n                  <LanguageMenu\n                    onMobileOpen={isMobile ? () => setActiveMobileSubmenu('language') : undefined}\n                  />\n                </PopupList.MenuItem>\n              )}\n            </>\n          )}\n\n          <MenuSeparator />\n\n          {/* Settings group */}\n          {hasSettingsItems && (\n            <>\n              <PopupList.MenuItem>\n                <SettingsMenu\n                  groups={settingsItemGroups}\n                  onMobileOpen={isMobile ? () => setActiveMobileSubmenu('settings') : undefined}\n                />\n              </PopupList.MenuItem>\n              <MenuSeparator />\n            </>\n          )}\n          {/* Account actions */}\n          <PopupList.MenuItem>\n            {CustomLogoutButton ?? (\n              <PopupList.Button href={logoutHref} icon={<LogOutIcon />}>\n                {t('authentication:logOut')}\n              </PopupList.Button>\n            )}\n          </PopupList.MenuItem>\n        </>\n      )}\n    </Popup>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ViewDescription/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","isComponent","description","isValidElement","ViewDescription","props","$","i18n","t0","_jsx","className","children"],"sources":["../../../src/elements/ViewDescription/index.tsx"],"sourcesContent":["'use client'\nimport type { DescriptionFunction, StaticDescription, ViewDescriptionClientProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport type ViewDescriptionComponent = React.ComponentType<any>\n\ntype Description = DescriptionFunction | StaticDescription | string | ViewDescriptionComponent\n\nexport function isComponent(description: Description): description is ViewDescriptionComponent {\n  return React.isValidElement(description)\n}\n\nexport function ViewDescription(props: ViewDescriptionClientProps) {\n  const { i18n } = useTranslation()\n  const { description } = props\n\n  if (description) {\n    return <div className=\"custom-view-description\">{getTranslation(description, i18n)}</div>\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAM/B,OAAO,SAASC,YAAYC,WAAwB;EAClD,oBAAOH,KAAA,CAAMI,cAAc,CAACD,WAAA;AAC9B;AAEA,OAAO,SAAAE,gBAAAC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACL;IAAAU;EAAA,IAAiBP,cAAA;EACjB;IAAAE;EAAA,IAAwBG,KAAA;EAAA,IAEpBH,WAAA;IAAA,IAAAM,EAAA;IAAA,IAAAF,CAAA,QAAAJ,WAAA,IAAAI,CAAA,QAAAC,IAAA;MACKC,EAAA,GAAAC,IAAA,CAAC;QAAAC,SAAA,EAAc;QAAAC,QAAA,EAA2Bb,cAAA,CAAeI,WAAA,EAAaK,IAAA;MAAA,C;;;;;;;WAAtEC,E","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","isComponent","description","isValidElement","ViewDescription","props","$","i18n","t0","_jsx","className","children"],"sources":["../../../src/elements/ViewDescription/index.tsx"],"sourcesContent":["'use client'\nimport type { DescriptionFunction, StaticDescription, ViewDescriptionClientProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport type ViewDescriptionComponent = React.ComponentType<any>\n\ntype Description = DescriptionFunction | StaticDescription | string | ViewDescriptionComponent\n\nexport function isComponent(description: Description): description is ViewDescriptionComponent {\n  return React.isValidElement(description)\n}\n\nexport function ViewDescription(props: ViewDescriptionClientProps) {\n  const { i18n } = useTranslation()\n  const { description } = props\n\n  if (description) {\n    return <div className=\"custom-view-description\">{getTranslation(description, i18n)}</div>\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAM/B,OAAO,SAASC,YAAYC,WAAwB;EAClD,oBAAOH,KAAA,CAAMI,cAAc,CAACD,WAAA;AAC9B;AAEA,OAAO,SAAAE,gBAAAC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACL;IAAAU;EAAA,IAAiBP,cAAA;EACjB;IAAAE;EAAA,IAAwBG,KAAA;EAExB,IAAIH,WAAA;IAAA,IAAAM,EAAA;IAAA,IAAAF,CAAA,QAAAJ,WAAA,IAAAI,CAAA,QAAAC,IAAA;MACKC,EAAA,GAAAC,IAAA,CAAC;QAAAC,SAAA,EAAc;QAAAC,QAAA,EAA2Bb,cAAA,CAAeI,WAAA,EAAaK,IAAA;;;;;;;;WAAtEC,E;;EACT,OAEO;AAAA","ignoreList":[]}

package/dist/elements/WhereBuilder/Condition/Date/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","React","useConfig","useTranslation","DatePickerField","baseClass","DateFilter","t0","disabled","field","t1","onChange","value","admin","date","config","t2","t3","dateFormat","dateFormatFromConfig","i18n","t","displayFormat","_jsx","className","children","placeholder","readOnly"],"sources":["../../../../../src/elements/WhereBuilder/Condition/Date/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { DateFilterProps as Props } from './types.js'\n\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { DatePickerField } from '../../../DatePicker/index.js'\n\nconst baseClass = 'condition-value-date'\n\nexport const DateFilter: React.FC<Props> = ({ disabled, field: { admin }, onChange, value }) => {\n  const { date } = admin || {}\n  const {\n    config: {\n      admin: { dateFormat: dateFormatFromConfig },\n    },\n  } = useConfig()\n  const { i18n, t } = useTranslation()\n\n  const displayFormat = date?.displayFormat || dateFormatFromConfig\n\n  return (\n    <div className={baseClass}>\n      <DatePickerField\n        {...date}\n        displayFormat={displayFormat}\n        onChange={onChange}\n        placeholder={getTranslation(admin.placeholder, i18n) || t('general:enterAValue')}\n        readOnly={disabled}\n        value={value as Date}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAIlB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,eAAe,QAAQ;AAEhC,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,UAAA,GAA8BC,EAAA;EAAC;IAAAC,QAAA;IAAAC,KAAA,EAAAC,EAAA;IAAAC,QAAA;IAAAC;EAAA,IAAAL,EAA+C;EAA5B;IAAAM;EAAA,IAAAH,EAAS;EACtE;IAAAI;EAAA,IAAiBD,KAAA,MAAU;EAC3B;IAAAE,MAAA,EAAAC;EAAA,IAIId,SAAA;EAHM;IAAAW,KAAA,EAAAI;EAAA,IAAAD,EAEP;EADQ;IAAAE,UAAA,EAAAC;EAAA,IAAAF,EAAoC;EAG/C;IAAAG,IAAA;IAAAC;EAAA,IAAoBlB,cAAA;EAEpB,MAAAmB,aAAA,GAAsBR,IAAA,EAAAQ,aAAA,IAAuBH,oBAAA;EAAA,OAG3CI,IAAA,CAAC;IAAAC,SAAA,EAAAnB,SAAA;IAAAoB,QAAA,EACCF,IAAA,CAAAnB,eAAA;MAAA,GACMU,IAAI;MAAAQ,aAAA;MAAAX,QAAA;MAAAe,WAAA,EAGK1B,cAAA,CAAea,KAAA,CAAAa,WAAA,EAAmBN,IAAA,KAASC,CAAA,CAAE;MAAAM,QAAA,EAChDnB,QAAA;MAAAI;IAAA,C;;CAKlB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","React","useConfig","useTranslation","DatePickerField","baseClass","DateFilter","t0","disabled","field","t1","onChange","value","admin","date","config","t2","t3","dateFormat","dateFormatFromConfig","i18n","t","displayFormat","_jsx","className","children","placeholder","readOnly"],"sources":["../../../../../src/elements/WhereBuilder/Condition/Date/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { DateFilterProps as Props } from './types.js'\n\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { DatePickerField } from '../../../DatePicker/index.js'\n\nconst baseClass = 'condition-value-date'\n\nexport const DateFilter: React.FC<Props> = ({ disabled, field: { admin }, onChange, value }) => {\n  const { date } = admin || {}\n  const {\n    config: {\n      admin: { dateFormat: dateFormatFromConfig },\n    },\n  } = useConfig()\n  const { i18n, t } = useTranslation()\n\n  const displayFormat = date?.displayFormat || dateFormatFromConfig\n\n  return (\n    <div className={baseClass}>\n      <DatePickerField\n        {...date}\n        displayFormat={displayFormat}\n        onChange={onChange}\n        placeholder={getTranslation(admin.placeholder, i18n) || t('general:enterAValue')}\n        readOnly={disabled}\n        value={value}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAIlB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,eAAe,QAAQ;AAEhC,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,UAAA,GAA8BC,EAAA;EAAC;IAAAC,QAAA;IAAAC,KAAA,EAAAC,EAAA;IAAAC,QAAA;IAAAC;EAAA,IAAAL,EAA+C;EAA5B;IAAAM;EAAA,IAAAH,EAAS;EACtE;IAAAI;EAAA,IAAiBD,KAAU,IAAV,CAAU;EAC3B;IAAAE,MAAA,EAAAC;EAAA,IAIId,SAAA;EAHM;IAAAW,KAAA,EAAAI;EAAA,IAAAD,EAEP;EADQ;IAAAE,UAAA,EAAAC;EAAA,IAAAF,EAAoC;EAG/C;IAAAG,IAAA;IAAAC;EAAA,IAAoBlB,cAAA;EAEpB,MAAAmB,aAAA,GAAsBR,IAAA,EAAAQ,aAAuB,IAAvBH,oBAAuB;EAAA,OAG3CI,IAAA,CAAC;IAAAC,SAAA,EAAenB,SAAA;IAAAoB,QAAA,EACdF,IAAA,CAACnB,eAAA;MAAA,GACKU,IAAI;MAAAQ,aAAA;MAAAX,QAAA;MAAAe,WAAA,EAGK1B,cAAA,CAAea,KAAA,CAAAa,WAAiB,EAAEN,IAAW,KAAFC,CAAA,CAAE;MAAAM,QAAA,EAChDnB,QAAA;MAAAI;;;CAKlB","ignoreList":[]}

package/dist/elements/WhereBuilder/Condition/Number/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","ReactSelect","NumberFilter","props","$","disabled","field","t0","onChange","operator","value","admin","hasMany","label","i18n","t","ariaLabel","t1","includes","isMulti","t2","Symbol","for","valueToRender","setValueToRender","useState","t3","selectedOption","newValue","Array","isArray","map","_temp","onSelect","t4","t5","_temp2","useEffect","placeholder","_jsx","isClearable","isCreatable","isSortable","numberOnly","options","className","e","target","type","option","Number","val","index","id","toString"],"sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { NumberFilterProps as Props } from './types.js'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { ReactSelect } from '../../../ReactSelect/index.js'\n\nexport const NumberFilter: React.FC<Props> = (props) => {\n  const {\n    disabled,\n    field: { admin, hasMany, label },\n    onChange,\n    operator,\n    value,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  const ariaLabel = label ? getTranslation(label, i18n) : t('general:enterAValue')\n\n  const isMulti = ['in', 'not_in'].includes(operator) || hasMany\n\n  const [valueToRender, setValueToRender] = React.useState<\n    { id: string; label: string; value: { value: number } }[]\n  >([])\n\n  const onSelect = React.useCallback(\n    (selectedOption) => {\n      let newValue\n      if (!selectedOption) {\n        newValue = []\n      } else if (isMulti) {\n        if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => Number(option.value?.value || option.value))\n        } else {\n          newValue = [Number(selectedOption.value?.value || selectedOption.value)]\n        }\n      }\n\n      onChange(newValue)\n    },\n    [isMulti, onChange],\n  )\n\n  React.useEffect(() => {\n    if (Array.isArray(value)) {\n      setValueToRender(\n        value.map((val, index) => {\n          return {\n            id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers\n            label: `${val}`,\n            value: {\n              toString: () => `${val}${index}`,\n              value: (val as any)?.value || val,\n            },\n          }\n        }),\n      )\n    } else {\n      setValueToRender([])\n    }\n  }, [value])\n\n  const placeholder = getTranslation(admin?.placeholder, i18n) || t('general:enterAValue')\n\n  return isMulti ? (\n    <ReactSelect\n      aria-label={ariaLabel}\n      disabled={disabled}\n      isClearable\n      isCreatable\n      isMulti={isMulti}\n      isSortable\n      numberOnly\n      onChange={onSelect}\n      options={[]}\n      placeholder={placeholder}\n      value={valueToRender || []}\n    />\n  ) : (\n    <input\n      aria-label={ariaLabel}\n      className=\"form-input\"\n      disabled={disabled}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={placeholder}\n      type=\"number\"\n      value={value as number}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","ReactSelect","NumberFilter","props","$","disabled","field","t0","onChange","operator","value","admin","hasMany","label","i18n","t","ariaLabel","t1","includes","isMulti","t2","Symbol","for","valueToRender","setValueToRender","useState","t3","selectedOption","newValue","Array","isArray","map","_temp","Number","onSelect","t4","t5","_temp2","useEffect","placeholder","_jsx","isClearable","isCreatable","isSortable","numberOnly","options","className","e","target","type","option","val","index","id","toString"],"sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { NumberFilterProps as Props } from './types.js'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { ReactSelect } from '../../../ReactSelect/index.js'\n\nexport const NumberFilter: React.FC<Props> = (props) => {\n  const {\n    disabled,\n    field: { admin, hasMany, label },\n    onChange,\n    operator,\n    value,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  const ariaLabel = label ? getTranslation(label, i18n) : t('general:enterAValue')\n\n  const isMulti = ['in', 'not_in'].includes(operator) || hasMany\n\n  const [valueToRender, setValueToRender] = React.useState<\n    { id: string; label: string; value: { value: number } }[]\n  >([])\n\n  const onSelect = React.useCallback(\n    (selectedOption) => {\n      let newValue\n      if (!selectedOption) {\n        newValue = []\n      } else if (isMulti) {\n        if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => Number(option.value?.value || option.value))\n        } else {\n          newValue = [Number(selectedOption.value?.value || selectedOption.value)]\n        }\n      }\n\n      onChange(newValue)\n    },\n    [isMulti, onChange],\n  )\n\n  React.useEffect(() => {\n    if (Array.isArray(value)) {\n      setValueToRender(\n        value.map((val, index) => {\n          return {\n            id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers\n            label: `${val}`,\n            value: {\n              toString: () => `${val}${index}`,\n              value: (val as any)?.value || val,\n            },\n          }\n        }),\n      )\n    } else {\n      setValueToRender([])\n    }\n  }, [value])\n\n  const placeholder = getTranslation(admin?.placeholder, i18n) || t('general:enterAValue')\n\n  return isMulti ? (\n    <ReactSelect\n      aria-label={ariaLabel}\n      disabled={disabled}\n      isClearable\n      isCreatable\n      isMulti={isMulti}\n      isSortable\n      numberOnly\n      onChange={onSelect}\n      options={[]}\n      placeholder={placeholder}\n      value={valueToRender || []}\n    />\n  ) : (\n    <input\n      aria-label={ariaLabel}\n      className=\"form-input\"\n      disabled={disabled}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={placeholder}\n      type=\"number\"\n      value={value as number}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/WhereBuilder/Condition/Relationship/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Relationship/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAG3E,OAAO,KAAK,EAAE,uBAAuB,IAAI,KAAK,EAAqB,MAAM,YAAY,CAAA;AAQrF,OAAO,aAAa,CAAA;AAOpB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2Z9C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Relationship/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAG3E,OAAO,KAAK,EAAE,uBAAuB,IAAI,KAAK,EAAqB,MAAM,YAAY,CAAA;AASrF,OAAO,aAAa,CAAA;AAOpB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8Z9C,CAAA"}

package/dist/elements/WhereBuilder/Condition/Relationship/index.js

@@ -6,6 +6,7 @@ import * as qs from 'qs-esm';
 import React, { useCallback, useEffect, useReducer, useState } from 'react';
 import { useDebounce } from '../../../../hooks/useDebounce.js';
 import { useEffectEvent } from '../../../../hooks/useEffectEvent.js';
+import { useBranchParam } from '../../../../providers/Branch/index.js';
 import { useConfig } from '../../../../providers/Config/index.js';
 import { useLocale } from '../../../../providers/Locale/index.js';
 import { useTranslation } from '../../../../providers/Translation/index.js';
@@ -49,6 +50,7 @@ export const RelationshipFilter = props => {
     t
   } = useTranslation();
   const locale = useLocale();
+  const branch = useBranchParam();
   const relationSlugs = hasMultipleRelations ? relationTo : [relationTo];
   const loadedRelationships = React.useRef(new Map(relationSlugs.map(relation => [relation, {
     hasLoadedAll: false,
@@ -81,9 +83,10 @@ export const RelationshipFilter = props => {
         and: []
       };
       const query = {
+        branch,
         depth: 0,
         limit: maxResultsPerRequest,
-        locale: locale.code,
+        locale: locale?.code,
         page: loadedRelationship.nextPage,
         select: {
           [fieldToSearch]: true
@@ -212,9 +215,15 @@ export const RelationshipFilter = props => {
   }, [i18n, relationTo, search]);
   const addOptionByID = useCallback(async (id, relation_2) => {
     if (!errorLoading && id !== 'null' && id && relation_2) {
+      const queryString = qs.stringify({
+        branch,
+        depth: 0
+      }, {
+        addQueryPrefix: true
+      });
       const response_0 = await fetch(formatAdminURL({
         apiRoute: api,
-        path: `/${relation_2}/${id}?depth=0`
+        path: `/${relation_2}/${id}${queryString}`
       }), {
         credentials: 'include',
         headers: {
@@ -233,7 +242,7 @@ export const RelationshipFilter = props => {
         }));
       }
     }
-  }, [i18n, addOptions, api, errorLoading, t]);
+  }, [addOptions, api, branch, errorLoading, i18n, t]);
   /**
   * When `relationTo` changes externally, reset the options and reload them from scratch
   * The `loadOptions` dependency is a useEffectEvent which has no dependencies of its own