@payloadcms/ui 4.0.0-internal.f11981a → 4.0.0-internal.f2a04f7

package/dist/elements/Popup/SubmenuScope.d.ts

@@ -0,0 +1,21 @@
+export type SubmenuNode = {
+    closeBranch: () => void;
+    id: string;
+    open: (viaKeyboard: boolean) => void;
+};
+export type SubmenuScope = {
+    activeChildId: null | string;
+    cancelPending: (id?: string) => void;
+    closeActiveBranch: () => void;
+    register: (node: SubmenuNode) => () => void;
+    release: (id: string) => void;
+    requestOpen: (args: {
+        delay: boolean;
+        id: string;
+        viaKeyboard?: boolean;
+    }) => void;
+};
+export declare const createSubmenuScope: ({ hoverDelay, }?: {
+    hoverDelay?: number;
+}) => SubmenuScope;
+//# sourceMappingURL=SubmenuScope.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubmenuScope.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/SubmenuScope.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,aAAa,EAAE,IAAI,GAAG,MAAM,CAAA;IAC5B,aAAa,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,MAAM,IAAI,CAAA;IAC3C,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,WAAW,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;CACnF,CAAA;AAID,eAAO,MAAM,kBAAkB,qBAE5B;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,KAAQ,YA8EjC,CAAA"}

package/dist/elements/Popup/SubmenuScope.js

@@ -0,0 +1,89 @@
+const DEFAULT_HOVER_DELAY = 150;
+export const createSubmenuScope = ({
+  hoverDelay = DEFAULT_HOVER_DELAY
+} = {}) => {
+  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;
+        }
+        nodes.delete(node.id);
+      };
+    },
+    release: id => {
+      cancelPending(id);
+      if (activeChildId === id) {
+        activeChildId = null;
+      }
+    },
+    requestOpen: ({
+      id,
+      delay,
+      viaKeyboard = false
+    }) => {
+      if (!delay) {
+        activate({
+          id,
+          viaKeyboard
+        });
+        return;
+      }
+      if (activeChildId === id) {
+        cancelPending();
+        return;
+      }
+      cancelPending();
+      pendingChildId = id;
+      pendingTimer = setTimeout(() => {
+        pendingTimer = undefined;
+        pendingChildId = null;
+        activate({
+          id,
+          viaKeyboard
+        });
+      }, hoverDelay);
+    }
+  };
+};
+//# sourceMappingURL=SubmenuScope.js.map

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

@@ -0,0 +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":[]}

package/dist/elements/Popup/index.css

@@ -14,6 +14,11 @@
     display: contents;
   }
 
+  .popup__submenu-hover-watch {
+    flex: 1;
+    min-width: 0;
+  }
+
   .popup__hidden-content {
     position: absolute;
     top: -9999px;
@@ -33,8 +38,10 @@
     color: var(--popup-text, var(--color-text));
     border-radius: var(--popup-radius);
     min-width: 80px;
-    max-width: 400px;
+    max-width: min(calc(var(--spacer-6) * 10), calc(100vw - var(--spacer-3)));
     box-shadow: var(--elevation-400-menu-panel);
+    border: 0;
+    margin: 0;
   }
 
   .popup__content[data-theme='dark'] {
@@ -57,7 +64,7 @@
   .popup__scroll-container {
     overflow-x: hidden;
     overflow-y: auto;
-    max-height: calc(var(--spacer-5) * 10);
+    max-height: min(calc(var(--spacer-5) * 10), calc(100vh - var(--spacer-3)));
     padding: var(--spacer-2) 0;
   }
 

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

@@ -1,49 +1,37 @@
-import type { CSSProperties } from 'react';
+import type { AriaAttributes, CSSProperties } from 'react';
 export * as PopupList from './PopupButtonList/index.js';
 import React from 'react';
 import './index.css';
+import { type PopupButtonRenderProps } from './PopupTrigger/index.js';
 export type PopupProps = {
     backgroundColor?: CSSProperties['backgroundColor'];
     boundingRef?: React.RefObject<HTMLElement>;
     button?: React.ReactNode;
-    /**
-     * Accessible label for the trigger button.
-     * Necessary when the button has an icon-only content,
-     * so the button has an accessible name for screen readers.
-     */
     buttonAriaLabel?: string;
-    /**
-     * The class name to apply to the button that triggers the popup.
-     */
     buttonClassName?: string;
     buttonSize?: 'large' | 'medium';
     buttonType?: 'custom' | 'default';
     caret?: boolean;
     children?: React.ReactNode;
-    /**
-     * The class name to apply to the popup container containing the trigger.
-     * This does not wrap the actual popup content, which is rendered in a portal.
-     */
     className?: string;
     disabled?: boolean;
-    /**
-     * Force control the open state of the popup, regardless of the trigger.
-     */
     forceOpen?: boolean;
     /**
      * Preferred horizontal alignment of the popup, if there is enough space available.
+     * Nested menu popups use 'left' and 'right' as their preferred side instead.
+     * When omitted, nested menu popups prefer the right side.
      *
      * @default 'left'
      */
     horizontalAlign?: 'center' | 'left' | 'right';
+    hoverSubmenu?: boolean;
     id?: string;
     initActive?: boolean;
     noBackground?: boolean;
     onToggleClose?: () => void;
     onToggleOpen?: (active: boolean) => void;
-    /**
-     * Class name to apply to the portal container.
-     */
+    popupAriaLabel?: string;
+    popupType?: AriaAttributes['aria-haspopup'];
     portalClassName?: string;
     render?: (args: {
         close: () => void;
@@ -52,13 +40,7 @@ export type PopupProps = {
      * Render prop for custom trigger button. Receives onClick/onKeyDown/aria props.
      * When provided, `button` and `buttonType` are ignored.
      */
-    renderButton?: (props: {
-        active: boolean;
-        'aria-expanded': boolean;
-        'aria-haspopup': true;
-        onClick: React.MouseEventHandler;
-        onKeyDown: React.KeyboardEventHandler;
-    }) => React.ReactNode;
+    renderButton?: (props: PopupButtonRenderProps) => React.ReactNode;
     showOnHover?: boolean;
     /**
      * By default, the scrollbar is hidden. If you want to show it, set this to true.
@@ -96,7 +78,7 @@ export type PopupProps = {
 /**
  * Component that renders a popup, as well as a button that triggers the popup.
  *
- * The popup is rendered in a portal, and is automatically positioned above / below the trigger,
+ * The popup is rendered next to its trigger in the DOM and positioned above / below it,
  * depending on the verticalAlign prop and the space available.
  */
 export declare const Popup: React.FC<PopupProps>;

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,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KAAuE,MAAM,OAAO,CAAA;AAK3F,OAAO,aAAa,CAAA;AA4CpB,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;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,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;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,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;;OAEG;IACH,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;QACrB,MAAM,EAAE,OAAO,CAAA;QACf,eAAe,EAAE,OAAO,CAAA;QACxB,eAAe,EAAE,IAAI,CAAA;QACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;QAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;KACtC,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,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,CAsftC,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,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"}