@payloadcms/ui 4.0.0-internal.add4c47 → 4.0.0-internal.af6aad0

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

@@ -8,6 +8,7 @@ import { GearIcon } from '../../../icons/Gear/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { MenuSeparator } from '../../MenuSeparator/index.js';
 import { Popup, PopupList } from '../../Popup/index.js';
+import { useHoverSubmenu } from '../useHoverSubmenu.js';
 export const SettingsMenuContent = ({
   groups
 }) => /*#__PURE__*/_jsx(_Fragment, {
@@ -20,7 +21,7 @@ export const SettingsMenuContent = ({
   }, `settings-group-${group.group}-${groupIndex}`))
 });
 export const SettingsMenu = t0 => {
-  const $ = _c(8);
+  const $ = _c(16);
   const {
     groups,
     onMobileOpen
@@ -28,6 +29,14 @@ export const SettingsMenu = t0 => {
   const {
     t
   } = useTranslation();
+  const {
+    close,
+    contentRef,
+    isOpen,
+    keepOpen,
+    open,
+    triggerRef
+  } = useHoverSubmenu("settings");
   if (onMobileOpen) {
     let t1;
     if ($[0] !== onMobileOpen || $[1] !== t) {
@@ -37,7 +46,7 @@ export const SettingsMenu = t0 => {
         onClick: onMobileOpen,
         type: "button",
         children: [_jsx("span", {
-          className: "popup-button-list__submenu-icon",
+          className: "popup-button-list__icon",
           children: _jsx(GearIcon, {
             size: 24
           })
@@ -61,22 +70,36 @@ export const SettingsMenu = t0 => {
     return t1;
   }
   let t1;
-  if ($[3] !== t) {
-    t1 = t2 => {
+  if ($[3] !== close) {
+    t1 = nextOpen => {
+      if (!nextOpen) {
+        close();
+      }
+    };
+    $[3] = close;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== open || $[6] !== t || $[7] !== triggerRef) {
+    t2 = t3 => {
       const {
         active,
         onClick,
         onKeyDown,
         ...aria
-      } = t2;
+      } = t3;
       return _jsxs("button", {
         ...aria,
-        className: ["popup-button-list__button", "popup-button-list__button--submenu-trigger", active && "popup-button-list__button--selected"].filter(Boolean).join(" "),
+        className: "popup-button-list__button popup-button-list__button--submenu-trigger popup-button-list__button--submenu-trigger-settings",
         onClick,
         onKeyDown,
+        onMouseEnter: open,
+        ref: triggerRef,
         type: "button",
         children: [_jsx("span", {
-          className: "popup-button-list__submenu-icon",
+          className: "popup-button-list__icon",
           children: _jsx(GearIcon, {
             size: 24
           })
@@ -92,28 +115,41 @@ export const SettingsMenu = t0 => {
         })]
       });
     };
-    $[3] = t;
-    $[4] = t1;
+    $[5] = open;
+    $[6] = t;
+    $[7] = triggerRef;
+    $[8] = t2;
   } else {
-    t1 = $[4];
+    t2 = $[8];
   }
-  let t2;
-  if ($[5] !== groups || $[6] !== t1) {
-    t2 = _jsx(Popup, {
-      renderButton: t1,
+  let t3;
+  if ($[9] !== contentRef || $[10] !== groups || $[11] !== isOpen || $[12] !== keepOpen || $[13] !== t1 || $[14] !== t2) {
+    t3 = _jsx(Popup, {
+      forceOpen: isOpen,
+      onToggleOpen: t1,
+      renderButton: t2,
       side: "left",
       size: "large",
       theme: "dark",
-      children: _jsx(SettingsMenuContent, {
-        groups
+      children: _jsx("div", {
+        className: "popup-button-list__submenu-content-settings",
+        onMouseEnter: keepOpen,
+        ref: contentRef,
+        children: _jsx(SettingsMenuContent, {
+          groups
+        })
       })
     });
-    $[5] = groups;
-    $[6] = t1;
-    $[7] = t2;
+    $[9] = contentRef;
+    $[10] = groups;
+    $[11] = isOpen;
+    $[12] = keepOpen;
+    $[13] = t1;
+    $[14] = t2;
+    $[15] = t3;
   } else {
-    t2 = $[7];
+    t3 = $[15];
   }
-  return t2;
+  return t3;
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","Fragment","ChevronIcon","GearIcon","useTranslation","MenuSeparator","Popup","PopupList","SettingsMenuContent","groups","_jsx","_Fragment","map","group","groupIndex","_jsxs","GroupLabel","label","items","item","itemIndex","SettingsMenu","t0","$","onMobileOpen","t","t1","className","onClick","type","children","size","direction","t2","active","onKeyDown","aria","filter","Boolean","join","renderButton","theme"],"sources":["../../../../src/elements/UserMenu/SettingsMenu/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { GearIcon } from '../../../icons/Gear/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { MenuSeparator } from '../../MenuSeparator/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\n\nexport type UserMenuSettingsGroup = {\n  group?: string\n  items: React.ReactNode[]\n}\n\ntype SettingsMenuProps = {\n  groups: UserMenuSettingsGroup[]\n  onMobileOpen?: () => void\n}\n\nexport const SettingsMenuContent: React.FC<{ groups: UserMenuSettingsGroup[] }> = ({ groups }) => (\n  <>\n    {groups.map((group, groupIndex) => (\n      <Fragment key={`settings-group-${group.group}-${groupIndex}`}>\n        {groupIndex > 0 && <MenuSeparator />}\n        {group.group && <PopupList.GroupLabel label={group.group} />}\n        {group.items.map((item, itemIndex) => (\n          <Fragment key={`settings-item-${groupIndex}-${itemIndex}`}>{item}</Fragment>\n        ))}\n      </Fragment>\n    ))}\n  </>\n)\n\nexport const SettingsMenu: React.FC<SettingsMenuProps> = ({ groups, 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          <GearIcon size={24} />\n        </span>\n        <span className=\"popup-button-list__label\">{t('general:settings')}</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            <GearIcon size={24} />\n          </span>\n          <span className=\"popup-button-list__label\">{t('general:settings')}</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      <SettingsMenuContent groups={groups} />\n    </Popup>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,WAAW,QAAQ;AAC5B,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,aAAa,QAAQ;AAC9B,SAASC,KAAK,EAAEC,SAAS,QAAQ;AAYjC,OAAO,MAAMC,mBAAA,GAAqEA,CAAC;EAAEC;AAAM,CAAE,kBAC3FC,IAAA,CAAAC,SAAA;YACGF,MAAA,CAAOG,GAAG,CAAC,CAACC,KAAA,EAAOC,UAAA,kBAClBC,KAAA,CAACd,QAAA;eACEa,UAAA,GAAa,kBAAKJ,IAAA,CAACL,aAAA,OACnBQ,KAAA,CAAMA,KAAK,iBAAIH,IAAA,CAACH,SAAA,CAAUS,UAAU;MAACC,KAAA,EAAOJ,KAAA,CAAMA;QAClDA,KAAA,CAAMK,KAAK,CAACN,GAAG,CAAC,CAACO,IAAA,EAAMC,SAAA,kBACtBV,IAAA,CAACT,QAAA;gBAA2DkB;OAA7C,iBAAiBL,UAAA,IAAcM,SAAA,EAAW;KAJ9C,kBAAkBP,KAAA,CAAMA,KAAK,IAAIC,UAAA,EAAY;;AAWlE,OAAO,MAAMO,YAAA,GAA4CC,EAAA;EAAA,MAAAC,CAAA,GAAAxB,EAAA;EAAC;IAAAU,MAAA;IAAAe;EAAA,IAAAF,EAAwB;EAChF;IAAAG;EAAA,IAAcrB,cAAA;EAAA,IAEVoB,YAAA;IAAA,IAAAE,EAAA;IAAA,IAAAH,CAAA,QAAAC,YAAA,IAAAD,CAAA,QAAAE,CAAA;MAEAC,EAAA,GAAAX,KAAA,CAAC;QAAAY,SAAA,EACW;QAAA;QAAAC,OAAA,EAEDJ,YAAA;QAAAK,IAAA,EACJ;QAAAC,QAAA,GAELpB,IAAA,CAAC;UAAAiB,SAAA,EAAe;UAAAG,QAAA,EACdpB,IAAA,CAAAP,QAAA;YAAA4B,IAAA;UAAA,C;YAEFrB,IAAA,CAAC;UAAAiB,SAAA,EAAe;UAAAG,QAAA,EAA4BL,CAAA,CAAE;QAAA,C,GAC9Cf,IAAA,CAAC;UAAAiB,SAAA,EAAe;UAAAG,QAAA,EACdpB,IAAA,CAAAR,WAAA;YAAA8B,SAAA,EAAuB;YAAAD,IAAA;UAAA,C;;;;;;;;;WAX3BL,E;;;;IAmBcA,EAAA,GAAAO,EAAA;MAAC;QAAAC,MAAA;QAAAN,OAAA;QAAAO,SAAA;QAAA,GAAAC;MAAA,IAAAH,EAAuC;MAAA,OACpDlB,KAAA,CAAC;QAAA,GACKqB,IAAI;QAAAT,SAAA,EACG,CACT,6BACA,8CACAO,MAAA,IAAU,uCAAAG,MAAA,CAAAC,OAEF,EAAAC,IAAA,CACF;QAAAX,OAAA;QAAAO,SAAA;QAAAN,IAAA,EAGH;QAAAC,QAAA,GAELpB,IAAA,CAAC;UAAAiB,SAAA,EAAe;UAAAG,QAAA,EACdpB,IAAA,CAAAP,QAAA;YAAA4B,IAAA;UAAA,C;YAEFrB,IAAA,CAAC;UAAAiB,SAAA,EAAe;UAAAG,QAAA,EAA4BL,CAAA,CAAE;QAAA,C,GAC9Cf,IAAA,CAAC;UAAAiB,SAAA,EAAe;UAAAG,QAAA,EACdpB,IAAA,CAAAR,WAAA;YAAA8B,SAAA,EAAuB;YAAAD,IAAA;UAAA,C;;;;;;;;;;;IApB/BE,EAAA,GAAAvB,IAAA,CAAAJ,KAAA;MAAAkC,YAAA,EACgBd,E;YAuBT;MAAAK,IAAA,EACA;MAAAU,KAAA,EACC;MAAAX,QAAA,EAENpB,IAAA,CAAAF,mBAAA;QAAAC;MAAA,C;;;;;;;;SA5BFwB,E;CA+BJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","Fragment","ChevronIcon","GearIcon","useTranslation","MenuSeparator","Popup","PopupList","useHoverSubmenu","SettingsMenuContent","groups","_jsx","_Fragment","map","group","groupIndex","_jsxs","GroupLabel","label","items","item","itemIndex","SettingsMenu","t0","$","onMobileOpen","t","close","contentRef","isOpen","keepOpen","open","triggerRef","t1","className","onClick","type","children","size","direction","nextOpen","t2","t3","active","onKeyDown","aria","onMouseEnter","ref","forceOpen","onToggleOpen","renderButton","theme"],"sources":["../../../../src/elements/UserMenu/SettingsMenu/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { GearIcon } from '../../../icons/Gear/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { MenuSeparator } from '../../MenuSeparator/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\nimport { useHoverSubmenu } from '../useHoverSubmenu.js'\n\nexport type UserMenuSettingsGroup = {\n  group?: string\n  items: React.ReactNode[]\n}\n\ntype SettingsMenuProps = {\n  groups: UserMenuSettingsGroup[]\n  onMobileOpen?: () => void\n}\n\nexport const SettingsMenuContent: React.FC<{ groups: UserMenuSettingsGroup[] }> = ({ groups }) => (\n  <>\n    {groups.map((group, groupIndex) => (\n      <Fragment key={`settings-group-${group.group}-${groupIndex}`}>\n        {groupIndex > 0 && <MenuSeparator />}\n        {group.group && <PopupList.GroupLabel label={group.group} />}\n        {group.items.map((item, itemIndex) => (\n          <Fragment key={`settings-item-${groupIndex}-${itemIndex}`}>{item}</Fragment>\n        ))}\n      </Fragment>\n    ))}\n  </>\n)\n\nexport const SettingsMenu: React.FC<SettingsMenuProps> = ({ groups, onMobileOpen }) => {\n  const { t } = useTranslation()\n  const { close, contentRef, isOpen, keepOpen, open, triggerRef } = useHoverSubmenu('settings')\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__icon\">\n          <GearIcon size={24} />\n        </span>\n        <span className=\"popup-button-list__label\">{t('general:settings')}</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      forceOpen={isOpen}\n      onToggleOpen={(nextOpen) => {\n        if (!nextOpen) {\n          close()\n        }\n      }}\n      renderButton={({ active, onClick, onKeyDown, ...aria }) => (\n        <button\n          {...aria}\n          className=\"popup-button-list__button popup-button-list__button--submenu-trigger popup-button-list__button--submenu-trigger-settings\"\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          onMouseEnter={open}\n          ref={triggerRef as React.Ref<HTMLButtonElement>}\n          type=\"button\"\n        >\n          <span className=\"popup-button-list__icon\">\n            <GearIcon size={24} />\n          </span>\n          <span className=\"popup-button-list__label\">{t('general:settings')}</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      <div\n        className=\"popup-button-list__submenu-content-settings\"\n        onMouseEnter={keepOpen}\n        ref={contentRef as React.Ref<HTMLDivElement>}\n      >\n        <SettingsMenuContent groups={groups} />\n      </div>\n    </Popup>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/UserMenu/ThemeMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EA2BpC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CACnC,CAsDA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/UserMenu/ThemeMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EA2BpC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CACnC,CA+DA,CAAA"}

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

@@ -8,6 +8,7 @@ import { VariableColorIcon } from '../../../icons/VariableColor/index.js';
 import { useTheme } from '../../../providers/Theme/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { Popup, PopupList } from '../../Popup/index.js';
+import { useHoverSubmenu } from '../useHoverSubmenu.js';
 export const ThemeMenuContent = () => {
   const $ = _c(5);
   const {
@@ -58,13 +59,21 @@ export const ThemeMenuContent = () => {
   return t0;
 };
 export const ThemeMenu = t0 => {
-  const $ = _c(5);
+  const $ = _c(15);
   const {
     onMobileOpen
   } = t0;
   const {
     t
   } = useTranslation();
+  const {
+    close,
+    contentRef,
+    isOpen,
+    keepOpen,
+    open,
+    triggerRef
+  } = useHoverSubmenu("theme");
   if (onMobileOpen) {
     let t1;
     if ($[0] !== onMobileOpen || $[1] !== t) {
@@ -74,7 +83,7 @@ export const ThemeMenu = t0 => {
         onClick: onMobileOpen,
         type: "button",
         children: [_jsx("span", {
-          className: "popup-button-list__submenu-icon",
+          className: "popup-button-list__icon",
           children: _jsx(VariableColorIcon, {
             size: 24
           })
@@ -98,48 +107,83 @@ export const ThemeMenu = t0 => {
     return t1;
   }
   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
-            })
-          })]
-        });
-      },
+  if ($[3] !== close) {
+    t1 = nextOpen => {
+      if (!nextOpen) {
+        close();
+      }
+    };
+    $[3] = close;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== open || $[6] !== t || $[7] !== triggerRef) {
+    t2 = t3 => {
+      const {
+        active,
+        onClick,
+        onKeyDown,
+        ...aria
+      } = t3;
+      return _jsxs("button", {
+        ...aria,
+        className: "popup-button-list__button popup-button-list__button--submenu-trigger popup-button-list__button--submenu-trigger-theme",
+        onClick,
+        onKeyDown,
+        onMouseEnter: open,
+        ref: triggerRef,
+        type: "button",
+        children: [_jsx("span", {
+          className: "popup-button-list__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
+          })
+        })]
+      });
+    };
+    $[5] = open;
+    $[6] = t;
+    $[7] = triggerRef;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  let t3;
+  if ($[9] !== contentRef || $[10] !== isOpen || $[11] !== keepOpen || $[12] !== t1 || $[13] !== t2) {
+    t3 = _jsx(Popup, {
+      forceOpen: isOpen,
+      onToggleOpen: t1,
+      renderButton: t2,
       side: "left",
       size: "large",
       theme: "dark",
-      children: _jsx(ThemeMenuContent, {})
+      children: _jsx("div", {
+        className: "popup-button-list__submenu-content-theme",
+        onMouseEnter: keepOpen,
+        ref: contentRef,
+        children: _jsx(ThemeMenuContent, {})
+      })
     });
-    $[3] = t;
-    $[4] = t1;
+    $[9] = contentRef;
+    $[10] = isOpen;
+    $[11] = keepOpen;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
   } else {
-    t1 = $[4];
+    t3 = $[14];
   }
-  return t1;
+  return t3;
 };
 //# sourceMappingURL=index.js.map

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","useHoverSubmenu","ThemeMenuContent","$","autoMode","setTheme","theme","t","t0","options","label","value","activeValue","_jsx","children","RadioGroup","map","t1","RadioGroupItem","active","onClick","ThemeMenu","onMobileOpen","close","contentRef","isOpen","keepOpen","open","triggerRef","_jsxs","className","type","size","direction","nextOpen","t2","t3","onKeyDown","aria","onMouseEnter","ref","forceOpen","onToggleOpen","renderButton"],"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'\nimport { useHoverSubmenu } from '../useHoverSubmenu.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  const { close, contentRef, isOpen, keepOpen, open, triggerRef } = useHoverSubmenu('theme')\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__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      forceOpen={isOpen}\n      onToggleOpen={(nextOpen) => {\n        if (!nextOpen) {\n          close()\n        }\n      }}\n      renderButton={({ active, onClick, onKeyDown, ...aria }) => (\n        <button\n          {...aria}\n          className=\"popup-button-list__button popup-button-list__button--submenu-trigger popup-button-list__button--submenu-trigger-theme\"\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          onMouseEnter={open}\n          ref={triggerRef as React.Ref<HTMLButtonElement>}\n          type=\"button\"\n        >\n          <span className=\"popup-button-list__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      <div\n        className=\"popup-button-list__submenu-content-theme\"\n        onMouseEnter={keepOpen}\n        ref={contentRef as React.Ref<HTMLDivElement>}\n      >\n        <ThemeMenuContent />\n      </div>\n    </Popup>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/UserMenu/index.css

@@ -10,10 +10,40 @@
   border: none;
   cursor: pointer;
   padding: 0;
+  border-radius: var(--radius-medium);
+
+  &:hover {
+    background-color: var(--color-bg-transparent-hover);
+  }
+}
+
+.user-menu__trigger--active,
+.user-menu__trigger--active:hover {
+  background-color: var(--color-bg-transparent-pressed);
 }
 
-.user-menu__trigger--active {
-  opacity: 0.8;
+.user-menu__trigger--with-title {
+  gap: var(--spacer-1);
+}
+
+.user-menu__trigger-content {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-1);
+  padding-block: var(--spacer-1);
+  padding-inline: var(--spacer-2) var(--spacer-1);
+}
+
+.user-menu__trigger-label {
+  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);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-text);
 }
 
 .user-menu__profile {

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,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAepE,OAAO,aAAa,CAAA;AAKpB,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,CA2L5C,CAAA"}

package/dist/elements/UserMenu/index.js

@@ -6,6 +6,7 @@ import { useWindowInfo } from '@faceless-ui/window-info';
 import { formatAdminURL } from 'payload/shared';
 import React, { 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';
@@ -13,20 +14,23 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import { MenuSeparator } from '../MenuSeparator/index.js';
 import { Popup, PopupList } from '../Popup/index.js';
 import { RenderCustomComponent } from '../RenderCustomComponent/index.js';
+import { HoverSubmenuGroupProvider } from './HoverSubmenuGroup.js';
 import { LanguageMenu, LanguageMenuContent } from './LanguageMenu/index.js';
 import { SettingsMenu, SettingsMenuContent } from './SettingsMenu/index.js';
 import { SubMenuHeader } from './SubMenuHeader/index.js';
-import { ThemeMenu, ThemeMenuContent } from './ThemeMenu/index.js';
 import './index.css';
+import { ThemeMenu, ThemeMenuContent } from './ThemeMenu/index.js';
 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 [menuInstanceKey, setMenuInstanceKey] = useState(0);
   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
   });
@@ -98,43 +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);
+      setMenuInstanceKey(_temp2);
+    };
+    $[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;
+      } = t12;
       return _jsx("button", {
         ...ariaProps,
         "aria-label": t("authentication:account"),
-        className: [`${baseClass}__trigger`, active && `${baseClass}__trigger--active`].filter(Boolean).join(" "),
+        className: [`${baseClass}__trigger`, active && `${baseClass}__trigger--active`, showTitle && `${baseClass}__trigger--with-title`].filter(Boolean).join(" "),
         type: "button",
-        children: _jsx(RenderCustomComponent, {
-          CustomComponent: CustomAvatar,
-          Fallback: _jsx(Account, {})
+        children: _jsxs("div", {
+          className: `${baseClass}__trigger-content`,
+          children: [showTitle && (titleString || identifier) && _jsx("p", {
+            className: `${baseClass}__trigger-label`,
+            children: titleString || identifier
+          }), _jsx(ChevronIcon, {
+            direction: "down",
+            size: 16
+          })]
         })
       });
     };
-    $[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,
+    renderButton: t11,
+    showScrim: true,
     size: "large",
     theme: "dark",
     verticalAlign: "bottom",
@@ -176,19 +193,25 @@ 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
+      }), _jsxs(HoverSubmenuGroupProvider, {
+        children: [showPreferencesGroup && _jsxs(_Fragment, {
+          children: [showThemeMenu && _jsx(PopupList.MenuItem, {
+            children: _jsx(ThemeMenu, {
+              onMobileOpen: isMobile ? () => setActiveMobileSubmenu("theme") : undefined
+            }, menuInstanceKey)
+          }), hasMultipleLanguages && _jsx(PopupList.MenuItem, {
+            children: _jsx(LanguageMenu, {
+              onMobileOpen: isMobile ? () => setActiveMobileSubmenu("language") : undefined
+            }, menuInstanceKey)
+          })]
+        }), _jsx(MenuSeparator, {}), hasSettingsItems && _jsxs(_Fragment, {
+          children: [_jsx(PopupList.MenuItem, {
+            children: _jsx(SettingsMenu, {
+              groups: settingsItemGroups,
+              onMobileOpen: isMobile ? () => setActiveMobileSubmenu("settings") : undefined
+            }, menuInstanceKey)
+          }), _jsx(MenuSeparator, {})]
         })]
-      }), _jsx(MenuSeparator, {}), hasSettingsItems && _jsxs(_Fragment, {
-        children: [_jsx(PopupList.ButtonGroup, {
-          children: _jsx(SettingsMenu, {
-            groups: settingsItemGroups,
-            onMobileOpen: isMobile ? () => setActiveMobileSubmenu("settings") : undefined
-          })
-        }), _jsx(MenuSeparator, {})]
       }), _jsx(PopupList.MenuItem, {
         children: CustomLogoutButton ?? _jsx(PopupList.Button, {
           href: logoutHref,
@@ -202,4 +225,7 @@ export const UserMenu = t0 => {
 function _temp(group) {
   return group.items.length > 0;
 }
+function _temp2(key) {
+  return key + 1;
+}
 //# sourceMappingURL=index.js.map