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

package/dist/elements/Popup/SubmenuScope.js

@@ -1,50 +1,17 @@
-const DEFAULT_HOVER_DELAY = 150;
-export const createSubmenuScope = ({
-  hoverDelay = DEFAULT_HOVER_DELAY
-} = {}) => {
+export const createSubmenuScope = () => {
   const nodes = new Map();
   let activeChildId = null;
-  let pendingChildId = null;
-  let pendingTimer;
-  const cancelPending = id => {
-    if (id && pendingChildId !== id) {
-      return;
-    }
-    if (pendingTimer) {
-      clearTimeout(pendingTimer);
-    }
-    pendingTimer = undefined;
-    pendingChildId = null;
-  };
-  const activate = ({
-    id,
-    viaKeyboard = false
-  }) => {
-    cancelPending();
-    const node = nodes.get(id);
-    if (!node) {
-      return;
-    }
-    if (activeChildId !== id) {
-      nodes.get(activeChildId ?? '')?.closeBranch();
-      activeChildId = id;
-    }
-    node.open(viaKeyboard);
-  };
   return {
     get activeChildId() {
       return activeChildId;
     },
-    cancelPending,
     closeActiveBranch: () => {
-      cancelPending();
       nodes.get(activeChildId ?? '')?.closeBranch();
       activeChildId = null;
     },
     register: node => {
       nodes.set(node.id, node);
       return () => {
-        cancelPending(node.id);
         if (activeChildId === node.id) {
           activeChildId = null;
         }
@@ -52,37 +19,26 @@ export const createSubmenuScope = ({
       };
     },
     release: id => {
-      cancelPending(id);
       if (activeChildId === id) {
         activeChildId = null;
       }
     },
     requestOpen: ({
       id,
-      delay,
-      viaKeyboard = false
+      viaKeyboard = false,
+      viaPointer = false
     }) => {
-      if (!delay) {
-        activate({
-          id,
-          viaKeyboard
-        });
+      if (activeChildId === id) {
         return;
       }
-      if (activeChildId === id) {
-        cancelPending();
+      const node = nodes.get(id);
+      const activeNode = nodes.get(activeChildId ?? '');
+      if (!node || viaPointer && activeNode?.isPointerProtected?.()) {
         return;
       }
-      cancelPending();
-      pendingChildId = id;
-      pendingTimer = setTimeout(() => {
-        pendingTimer = undefined;
-        pendingChildId = null;
-        activate({
-          id,
-          viaKeyboard
-        });
-      }, hoverDelay);
+      activeNode?.closeBranch();
+      activeChildId = id;
+      node.open(viaKeyboard);
     }
   };
 };

package/dist/elements/Popup/SubmenuScope.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubmenuScope.js","names":["DEFAULT_HOVER_DELAY","createSubmenuScope","hoverDelay","nodes","Map","activeChildId","pendingChildId","pendingTimer","cancelPending","id","clearTimeout","undefined","activate","viaKeyboard","node","get","closeBranch","open","closeActiveBranch","register","set","delete","release","requestOpen","delay","setTimeout"],"sources":["../../../src/elements/Popup/SubmenuScope.ts"],"sourcesContent":["export type SubmenuNode = {\n  closeBranch: () => void\n  id: string\n  open: (viaKeyboard: boolean) => void\n}\n\nexport type SubmenuScope = {\n  activeChildId: null | string\n  cancelPending: (id?: string) => void\n  closeActiveBranch: () => void\n  register: (node: SubmenuNode) => () => void\n  release: (id: string) => void\n  requestOpen: (args: { delay: boolean; id: string; viaKeyboard?: boolean }) => void\n}\n\nconst DEFAULT_HOVER_DELAY = 150\n\nexport const createSubmenuScope = ({\n  hoverDelay = DEFAULT_HOVER_DELAY,\n}: { hoverDelay?: number } = {}): SubmenuScope => {\n  const nodes = new Map<string, SubmenuNode>()\n  let activeChildId: null | string = null\n  let pendingChildId: null | string = null\n  let pendingTimer: ReturnType<typeof setTimeout> | undefined\n\n  const cancelPending = (id?: string) => {\n    if (id && pendingChildId !== id) {\n      return\n    }\n\n    if (pendingTimer) {\n      clearTimeout(pendingTimer)\n    }\n    pendingTimer = undefined\n    pendingChildId = null\n  }\n\n  const activate = ({ id, viaKeyboard = false }: { id: string; viaKeyboard?: boolean }) => {\n    cancelPending()\n    const node = nodes.get(id)\n    if (!node) {\n      return\n    }\n\n    if (activeChildId !== id) {\n      nodes.get(activeChildId ?? '')?.closeBranch()\n      activeChildId = id\n    }\n    node.open(viaKeyboard)\n  }\n\n  return {\n    get activeChildId() {\n      return activeChildId\n    },\n    cancelPending,\n    closeActiveBranch: () => {\n      cancelPending()\n      nodes.get(activeChildId ?? '')?.closeBranch()\n      activeChildId = null\n    },\n    register: (node) => {\n      nodes.set(node.id, node)\n      return () => {\n        cancelPending(node.id)\n        if (activeChildId === node.id) {\n          activeChildId = null\n        }\n        nodes.delete(node.id)\n      }\n    },\n    release: (id) => {\n      cancelPending(id)\n      if (activeChildId === id) {\n        activeChildId = null\n      }\n    },\n    requestOpen: ({ id, delay, viaKeyboard = false }) => {\n      if (!delay) {\n        activate({ id, viaKeyboard })\n        return\n      }\n\n      if (activeChildId === id) {\n        cancelPending()\n        return\n      }\n\n      cancelPending()\n      pendingChildId = id\n      pendingTimer = setTimeout(() => {\n        pendingTimer = undefined\n        pendingChildId = null\n        activate({ id, viaKeyboard })\n      }, hoverDelay)\n    },\n  }\n}\n"],"mappings":"AAeA,MAAMA,mBAAA,GAAsB;AAE5B,OAAO,MAAMC,kBAAA,GAAqBA,CAAC;EACjCC,UAAA,GAAaF;AAAmB,CACR,GAAG,CAAC,CAAC;EAC7B,MAAMG,KAAA,GAAQ,IAAIC,GAAA;EAClB,IAAIC,aAAA,GAA+B;EACnC,IAAIC,cAAA,GAAgC;EACpC,IAAIC,YAAA;EAEJ,MAAMC,aAAA,GAAiBC,EAAA;IACrB,IAAIA,EAAA,IAAMH,cAAA,KAAmBG,EAAA,EAAI;MAC/B;IACF;IAEA,IAAIF,YAAA,EAAc;MAChBG,YAAA,CAAaH,YAAA;IACf;IACAA,YAAA,GAAeI,SAAA;IACfL,cAAA,GAAiB;EACnB;EAEA,MAAMM,QAAA,GAAWA,CAAC;IAAEH,EAAE;IAAEI,WAAA,GAAc;EAAK,CAAyC;IAClFL,aAAA;IACA,MAAMM,IAAA,GAAOX,KAAA,CAAMY,GAAG,CAACN,EAAA;IACvB,IAAI,CAACK,IAAA,EAAM;MACT;IACF;IAEA,IAAIT,aAAA,KAAkBI,EAAA,EAAI;MACxBN,KAAA,CAAMY,GAAG,CAACV,aAAA,IAAiB,KAAKW,WAAA;MAChCX,aAAA,GAAgBI,EAAA;IAClB;IACAK,IAAA,CAAKG,IAAI,CAACJ,WAAA;EACZ;EAEA,OAAO;IACL,IAAIR,cAAA,EAAgB;MAClB,OAAOA,aAAA;IACT;IACAG,aAAA;IACAU,iBAAA,EAAmBA,CAAA;MACjBV,aAAA;MACAL,KAAA,CAAMY,GAAG,CAACV,aAAA,IAAiB,KAAKW,WAAA;MAChCX,aAAA,GAAgB;IAClB;IACAc,QAAA,EAAWL,IAAA;MACTX,KAAA,CAAMiB,GAAG,CAACN,IAAA,CAAKL,EAAE,EAAEK,IAAA;MACnB,OAAO;QACLN,aAAA,CAAcM,IAAA,CAAKL,EAAE;QACrB,IAAIJ,aAAA,KAAkBS,IAAA,CAAKL,EAAE,EAAE;UAC7BJ,aAAA,GAAgB;QAClB;QACAF,KAAA,CAAMkB,MAAM,CAACP,IAAA,CAAKL,EAAE;MACtB;IACF;IACAa,OAAA,EAAUb,EAAA;MACRD,aAAA,CAAcC,EAAA;MACd,IAAIJ,aAAA,KAAkBI,EAAA,EAAI;QACxBJ,aAAA,GAAgB;MAClB;IACF;IACAkB,WAAA,EAAaA,CAAC;MAAEd,EAAE;MAAEe,KAAK;MAAEX,WAAA,GAAc;IAAK,CAAE;MAC9C,IAAI,CAACW,KAAA,EAAO;QACVZ,QAAA,CAAS;UAAEH,EAAA;UAAII;QAAY;QAC3B;MACF;MAEA,IAAIR,aAAA,KAAkBI,EAAA,EAAI;QACxBD,aAAA;QACA;MACF;MAEAA,aAAA;MACAF,cAAA,GAAiBG,EAAA;MACjBF,YAAA,GAAekB,UAAA,CAAW;QACxBlB,YAAA,GAAeI,SAAA;QACfL,cAAA,GAAiB;QACjBM,QAAA,CAAS;UAAEH,EAAA;UAAII;QAAY;MAC7B,GAAGX,UAAA;IACL;EACF;AACF","ignoreList":[]}
+{"version":3,"file":"SubmenuScope.js","names":["createSubmenuScope","nodes","Map","activeChildId","closeActiveBranch","get","closeBranch","register","node","set","id","delete","release","requestOpen","viaKeyboard","viaPointer","activeNode","isPointerProtected","open"],"sources":["../../../src/elements/Popup/SubmenuScope.ts"],"sourcesContent":["export type SubmenuNode = {\n  closeBranch: () => void\n  id: string\n  isPointerProtected?: () => boolean\n  open: (viaKeyboard: boolean) => void\n}\n\nexport type SubmenuScope = {\n  activeChildId: null | string\n  closeActiveBranch: () => void\n  register: (node: SubmenuNode) => () => void\n  release: (id: string) => void\n  requestOpen: (args: { id: string; viaKeyboard?: boolean; viaPointer?: boolean }) => void\n}\n\nexport const createSubmenuScope = (): SubmenuScope => {\n  const nodes = new Map<string, SubmenuNode>()\n  let activeChildId: null | string = null\n\n  return {\n    get activeChildId() {\n      return activeChildId\n    },\n    closeActiveBranch: () => {\n      nodes.get(activeChildId ?? '')?.closeBranch()\n      activeChildId = null\n    },\n    register: (node) => {\n      nodes.set(node.id, node)\n      return () => {\n        if (activeChildId === node.id) {\n          activeChildId = null\n        }\n        nodes.delete(node.id)\n      }\n    },\n    release: (id) => {\n      if (activeChildId === id) {\n        activeChildId = null\n      }\n    },\n    requestOpen: ({ id, viaKeyboard = false, viaPointer = false }) => {\n      if (activeChildId === id) {\n        return\n      }\n      const node = nodes.get(id)\n      const activeNode = nodes.get(activeChildId ?? '')\n\n      if (!node || (viaPointer && activeNode?.isPointerProtected?.())) {\n        return\n      }\n      activeNode?.closeBranch()\n      activeChildId = id\n      node.open(viaKeyboard)\n    },\n  }\n}\n"],"mappings":"AAeA,OAAO,MAAMA,kBAAA,GAAqBA,CAAA;EAChC,MAAMC,KAAA,GAAQ,IAAIC,GAAA;EAClB,IAAIC,aAAA,GAA+B;EAEnC,OAAO;IACL,IAAIA,cAAA,EAAgB;MAClB,OAAOA,aAAA;IACT;IACAC,iBAAA,EAAmBA,CAAA;MACjBH,KAAA,CAAMI,GAAG,CAACF,aAAA,IAAiB,KAAKG,WAAA;MAChCH,aAAA,GAAgB;IAClB;IACAI,QAAA,EAAWC,IAAA;MACTP,KAAA,CAAMQ,GAAG,CAACD,IAAA,CAAKE,EAAE,EAAEF,IAAA;MACnB,OAAO;QACL,IAAIL,aAAA,KAAkBK,IAAA,CAAKE,EAAE,EAAE;UAC7BP,aAAA,GAAgB;QAClB;QACAF,KAAA,CAAMU,MAAM,CAACH,IAAA,CAAKE,EAAE;MACtB;IACF;IACAE,OAAA,EAAUF,EAAA;MACR,IAAIP,aAAA,KAAkBO,EAAA,EAAI;QACxBP,aAAA,GAAgB;MAClB;IACF;IACAU,WAAA,EAAaA,CAAC;MAAEH,EAAE;MAAEI,WAAA,GAAc,KAAK;MAAEC,UAAA,GAAa;IAAK,CAAE;MAC3D,IAAIZ,aAAA,KAAkBO,EAAA,EAAI;QACxB;MACF;MACA,MAAMF,IAAA,GAAOP,KAAA,CAAMI,GAAG,CAACK,EAAA;MACvB,MAAMM,UAAA,GAAaf,KAAA,CAAMI,GAAG,CAACF,aAAA,IAAiB;MAE9C,IAAI,CAACK,IAAA,IAASO,UAAA,IAAcC,UAAA,EAAYC,kBAAA,MAAyB;QAC/D;MACF;MACAD,UAAA,EAAYV,WAAA;MACZH,aAAA,GAAgBO,EAAA;MAChBF,IAAA,CAAKU,IAAI,CAACJ,WAAA;IACZ;EACF;AACF","ignoreList":[]}

package/dist/elements/Popup/index.css

@@ -49,6 +49,21 @@
     color: var(--popup-text, var(--color-text-ontooltip));
   }
 
+  .popup__content[data-submenu-safe-area] {
+    overflow: visible;
+  }
+
+  .popup__content[data-submenu-safe-area]::before {
+    /* Debug safe area: uncomment to show the protected path.
+    background-color: color-mix(in srgb, var(--color-bg-assistive) 35%, transparent);
+    */
+    content: '';
+    position: fixed;
+    inset: 0;
+    clip-path: var(--popup-safe-area);
+    pointer-events: none;
+  }
+
   .popup__content.popup--size-small {
     min-width: 80px;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAY,aAAa,EAAE,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KAA8E,MAAM,OAAO,CAAA;AAIlG,OAAO,aAAa,CAAA;AACpB,OAAO,EAAE,KAAK,sBAAsB,EAAgB,MAAM,yBAAyB,CAAA;AAyCnF,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAA;IACjE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;IACxC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACjC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAyoBtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAY,aAAa,EAAE,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KASN,MAAM,OAAO,CAAA;AAKd,OAAO,aAAa,CAAA;AACpB,OAAO,EAAE,KAAK,sBAAsB,EAAgB,MAAM,yBAAyB,CAAA;AAyCnF,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAA;IACjE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;IACxC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACjC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA0rBtC,CAAA"}

package/dist/elements/Popup/index.js

@@ -2,8 +2,9 @@
 
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export * as PopupList from './PopupButtonList/index.js';
-import React, { createContext, use, useCallback, useEffect, useId, useRef, useState } from 'react';
+import React, { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import { useEffectEvent } from '../../hooks/useEffectEvent.js';
+import { useModalFocus } from '../../providers/ModalFocus/index.js';
 import { ThemeProvider } from '../../providers/Theme/index.js';
 import './index.css';
 import { PopupTrigger } from './PopupTrigger/index.js';
@@ -56,7 +57,21 @@ export const Popup = props => {
     verticalAlign = 'bottom'
   } = props;
   const popupRef = useRef(null);
+  const containerRef = useRef(null);
   const triggerRef = useRef(null);
+  const {
+    registerPopup
+  } = useModalFocus();
+  const getTrigger = useCallback(() => triggerRef.current?.querySelector('button, [tabindex="0"]') ?? null, []);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (container) {
+      return registerPopup({
+        container,
+        getTrigger
+      });
+    }
+  }, [getTrigger, registerPopup]);
   const generatedContentId = useId();
   const contentId = `${id || generatedContentId}-content`;
   /**
@@ -79,7 +94,6 @@ export const Popup = props => {
       if (coordinateParent && isSubmenu) {
         parentPopup.submenuScope.requestOpen({
           id: contentId,
-          delay: false,
           viaKeyboard
         });
         return;
@@ -95,12 +109,12 @@ export const Popup = props => {
   const closePopup = useCallback(({
     restoreFocus = true
   } = {}) => {
-    const trigger = triggerRef.current?.querySelector('button, [tabindex="0"]');
+    const trigger = getTrigger();
     setActive(false);
     if (restoreFocus) {
       requestAnimationFrame(() => trigger?.focus());
     }
-  }, [setActive]);
+  }, [getTrigger, setActive]);
   const close = useCallback(() => closePopup(), [closePopup]);
   const closePopupChain = useCallback((options = {}) => {
     if (parentPopup) {
@@ -113,27 +127,67 @@ export const Popup = props => {
     closePopup(options);
   }, [closePopup, parentPopup]);
   const openFromParent = useCallback(viaKeyboard_0 => setActive(true, viaKeyboard_0, false), [setActive]);
-  useEffect(() => {
-    if (!isSubmenu) {
-      return;
-    }
-    return parentPopup.submenuScope.register({
-      id: contentId,
-      closeBranch: () => closePopup({
-        restoreFocus: false
-      }),
-      open: openFromParent
+  const closeFromPointer = useCallback(() => {
+    const hasFocus = popupRef.current?.contains(document.activeElement);
+    const trigger_0 = triggerRef.current?.querySelector('[aria-haspopup="menu"]');
+    closePopup({
+      restoreFocus: false
     });
-  }, [closePopup, contentId, isSubmenu, openFromParent, parentPopup]);
+    if (hasFocus) {
+      trigger_0?.focus();
+    }
+  }, [closePopup]);
   const pointerIntent = useSubmenuPointerIntent({
+    active,
     contentRef: popupRef,
     enabled: isSubmenu && hoverSubmenu,
-    onClose: () => setActive(false),
+    onClose: closeFromPointer,
     onOpen: () => parentPopup?.submenuScope.requestOpen({
       id: contentId,
-      delay: Boolean(parentPopup.submenuScope.activeChildId)
-    })
+      viaPointer: true
+    }),
+    onSafeAreaExpire: ({
+      x,
+      y
+    }) => {
+      const target = document.elementFromPoint(x, y);
+      const parentContent = parentPopup?.popupRef.current;
+      if (parentContent && target?.closest(POPUP_CONTENT_SELECTOR) === parentContent) {
+        const trigger_1 = target.closest('.popup__submenu-hover-watch')?.querySelector('[aria-haspopup="menu"][aria-controls]');
+        const siblingId = trigger_1?.getAttribute('aria-controls');
+        if (siblingId && trigger_1?.getAttribute('aria-disabled') !== 'true') {
+          parentPopup?.submenuScope.requestOpen({
+            id: siblingId
+          });
+          return;
+        }
+      }
+      closeFromPointer();
+    },
+    triggerRef
+  });
+  const submenuCallbacks = useRef({
+    closeFromPointer,
+    openFromParent
   });
+  const parentSubmenuScope = parentPopup?.submenuScope;
+  useEffect(() => {
+    submenuCallbacks.current = {
+      closeFromPointer,
+      openFromParent
+    };
+  }, [closeFromPointer, openFromParent]);
+  useEffect(() => {
+    if (!isSubmenu || !parentSubmenuScope) {
+      return;
+    }
+    return parentSubmenuScope.register({
+      id: contentId,
+      closeBranch: () => submenuCallbacks.current.closeFromPointer(),
+      isPointerProtected: pointerIntent.isProtected,
+      open: viaKeyboard_1 => submenuCallbacks.current.openFromParent(viaKeyboard_1)
+    });
+  }, [contentId, isSubmenu, parentSubmenuScope, pointerIntent.isProtected]);
   // /////////////////////////////////////
   // Position Calculation
   //
@@ -142,12 +196,12 @@ export const Popup = props => {
   // styles if the calculated position differs from current position.
   // /////////////////////////////////////
   const updatePosition = useEffectEvent(() => {
-    const trigger_0 = triggerRef.current;
+    const trigger_2 = triggerRef.current;
     const popup = popupRef.current;
-    if (!trigger_0 || !popup) {
+    if (!trigger_2 || !popup) {
       return;
     }
-    const triggerRect = trigger_0.getBoundingClientRect();
+    const triggerRect = trigger_2.getBoundingClientRect();
     const popupRect = popup.getBoundingClientRect();
     // Gap between the popup and the trigger/viewport edges (in pixels)
     const offset = 8;
@@ -260,6 +314,7 @@ export const Popup = props => {
     if (popup.style.getPropertyValue('--caret-left') !== newCaretLeft) {
       popup.style.setProperty('--caret-left', newCaretLeft);
     }
+    pointerIntent.updateSafeArea();
   });
   // /////////////////////////////////////
   // Click Outside Handler
@@ -269,11 +324,11 @@ export const Popup = props => {
   // - Click in parent popup: child closes
   // /////////////////////////////////////
   const handleClickOutside = useEffectEvent(e => {
-    const target = e.target;
-    const isOutsidePopup = !popupRef.current?.contains(target);
-    const isOutsideTrigger = !triggerRef.current?.contains(target);
+    const target_0 = e.target;
+    const isOutsidePopup = !popupRef.current?.contains(target_0);
+    const isOutsideTrigger = !triggerRef.current?.contains(target_0);
     // Check if click is inside a popup portal
-    const clickedPopupContent = target.closest?.('.popup__content');
+    const clickedPopupContent = target_0.closest?.('.popup__content');
     // If the clicked popup contains this popup's trigger, it's a parent popup
     // and we should close. If it doesn't contain our trigger, it's a child popup
     // and we should stay open to avoid closing parent when interacting with child.
@@ -306,8 +361,8 @@ export const Popup = props => {
       return;
     }
     if (e_0.key === 'ArrowRight' && popupRole === 'menu') {
-      const trigger_1 = document.activeElement?.closest(`.${baseClass}__trigger-wrap`);
-      const nestedTrigger = trigger_1?.querySelector('button, [role="menuitem"]');
+      const trigger_3 = document.activeElement?.closest(`.${baseClass}__trigger-wrap`);
+      const nestedTrigger = trigger_3?.querySelector('button, [role="menuitem"]');
       if (nestedTrigger) {
         e_0.preventDefault();
         nestedTrigger.dispatchEvent(new KeyboardEvent('keydown', {
@@ -368,13 +423,13 @@ export const Popup = props => {
   // Closes popup when buttons/links inside are clicked (includes Enter/Space activation).
   // /////////////////////////////////////
   const handleActionableClick = useEffectEvent(e_1 => {
-    const target_0 = e_1.target;
+    const target_1 = e_1.target;
     // Allow opting out with data-popup-prevent-close attribute on element or ancestor
-    if (target_0.closest('[data-popup-prevent-close]')) {
+    if (target_1.closest('[data-popup-prevent-close]')) {
       return;
     }
     // Check if the clicked element or any ancestor is an actionable element
-    const actionable = target_0.closest('button, a[href], [role="button"], [role="menuitem"]');
+    const actionable = target_1.closest('button, a[href], [role="button"], [role="menuitem"]');
     if (actionable && popupRef.current?.contains(actionable)) {
       if (actionable.closest(`.${baseClass}__content`) !== popupRef.current) {
         return;
@@ -493,6 +548,7 @@ export const Popup = props => {
   return /*#__PURE__*/_jsxs("div", {
     className: [baseClass, className].filter(Boolean).join(' '),
     id: id,
+    ref: containerRef,
     children: [/*#__PURE__*/_jsx("div", {
       className: `${baseClass}__trigger-wrap`,
       ref: triggerRef,
@@ -504,7 +560,7 @@ export const Popup = props => {
         tabIndex: 0,
         children: Trigger
       }) : hoverSubmenu && isSubmenu ? /*#__PURE__*/_jsx("div", {
-        ...pointerIntent,
+        ...pointerIntent.triggerProps,
         className: `${baseClass}__submenu-hover-watch`,
         children: Trigger
       }) : Trigger
@@ -516,6 +572,7 @@ export const Popup = props => {
         submenuScope
       },
       children: /*#__PURE__*/_jsxs("div", {
+        ...pointerIntent.contentProps,
         "aria-label": popupAriaLabel,
         className: active ? [`${baseClass}__content`, `${baseClass}--size-${size}`, resolvedSide ? `${baseClass}--side-${resolvedSide}` : isOnTop ? `${baseClass}--v-top` : `${baseClass}--v-bottom`, portalClassName].filter(Boolean).join(' ') :
         // tests do not accidentally target inactive popups.
@@ -523,8 +580,6 @@ export const Popup = props => {
         "data-popup-id": id || undefined,
         "data-theme": theme === 'auto' ? undefined : theme,
         id: contentId,
-        onMouseEnter: pointerIntent.onMouseEnter,
-        onMouseLeave: pointerIntent.onMouseLeave,
         popover: "manual",
         ref: popupRef,
         role: popupRole,