@orangelogic/design-system 2.19.0-pr77233.3 → 2.19.0-pr77234.3

package/library/components/popup.js

@@ -1,11 +1,11 @@
-import { a as _e, i as Vt, r as ze, x as j, n as v, C as Be, c as Ie } from "../chunks/custom-element.fmLrnDZr.js";
-import { r as Me } from "../chunks/state.Dt9F_SuS.js";
+import { a as ze, i as Vt, r as Be, x as j, n as v, C as Ie, c as Me } from "../chunks/custom-element.fmLrnDZr.js";
+import { r as ye } from "../chunks/state.Dt9F_SuS.js";
 import { e as ut } from "../chunks/query.BBf1UFkC.js";
 import { e as He } from "../chunks/base.D76d76ww.js";
 import { o as Tt } from "../chunks/if-defined.CKupVaWs.js";
 import { o as se } from "../chunks/style-map.lEJHEwk3.js";
 import { i as Lt, p as ne, f as We, a as qe } from "../chunks/browser.Va59Ix3P.js";
-import { c as ye } from "../chunks/component.styles.DtouHn2g.js";
+import { c as ve } from "../chunks/component.styles.DtouHn2g.js";
 import { L as Ve } from "../chunks/i18n.C6c6_pqI.js";
 import { e as Dt } from "../chunks/class-map.DqNfBvJI.js";
 import { n as Ue } from "../chunks/when.Dr1es41R.js";
@@ -77,7 +77,7 @@ function Ke(e) {
   }
   return t;
 }
-class Xe extends Ke(_e) {
+class Xe extends Ke(ze) {
 }
 function Ge(e, t, o) {
   const i = e.getAttribute(t);
@@ -305,7 +305,7 @@ class ht extends Xe {
     document.dispatchEvent(t);
   }
   static async open(t, o, i, s) {
-    await Promise.resolve().then(() => Ne);
+    await Promise.resolve().then(() => $e);
     const r = arguments.length === 2, n = i || t, a = new this();
     let l = !1;
     a.dispose = () => {
@@ -345,7 +345,7 @@ class ht extends Xe {
     t.delayed = !!o.delayed, t.receivesFocus = o.receivesFocus ?? "auto", t.triggerElement = o.trigger || null, t.type = o.type || "modal", t.offset = o.offset ?? 0, t.placement = o.placement, t.willPreventClose = !!o.notImmediatelyClosable;
   }
 }
-const ve = Symbol("element resolver updated");
+const be = Symbol("element resolver updated");
 class hi {
   constructor(t, { selector: o } = { selector: "" }) {
     this._element = null, this._selector = "", this.mutationCallback = (i) => {
@@ -373,7 +373,7 @@ class hi {
     if (t === this.element)
       return;
     const o = this.element;
-    this._element = t, this.host.requestUpdate(ve, o);
+    this._element = t, this.host.requestUpdate(be, o);
   }
   get selector() {
     return this._selector;
@@ -877,7 +877,7 @@ function Z(e) {
 function at(e) {
   return e.split("-")[1];
 }
-function be(e) {
+function we(e) {
   return e === "x" ? "y" : "x";
 }
 function Jt(e) {
@@ -888,7 +888,7 @@ function Y(e) {
   return wi.has(Z(e)) ? "y" : "x";
 }
 function Zt(e) {
-  return be(Y(e));
+  return we(Y(e));
 }
 function xi(e, t, o) {
   o === void 0 && (o = !1);
@@ -933,7 +933,7 @@ function Si(e) {
     ...e
   };
 }
-function we(e) {
+function xe(e) {
   return typeof e != "number" ? Si(e) : {
     top: e,
     right: e,
@@ -1084,7 +1084,7 @@ async function dt(e, t) {
     elementContext: d = "floating",
     altBoundary: u = !1,
     padding: p = 0
-  } = st(t, e), f = we(p), m = a[u ? d === "floating" ? "reference" : "floating" : d], y = Et(await r.getClippingRect({
+  } = st(t, e), f = xe(p), m = a[u ? d === "floating" ? "reference" : "floating" : d], y = Et(await r.getClippingRect({
     element: (o = await (r.isElement == null ? void 0 : r.isElement(m))) == null || o ? m : m.contextElement || await (r.getDocumentElement == null ? void 0 : r.getDocumentElement(a.floating)),
     boundary: c,
     rootBoundary: h,
@@ -1131,7 +1131,7 @@ const Ti = (e) => ({
     } = st(e, t) || {};
     if (c == null)
       return {};
-    const d = we(h), u = {
+    const d = xe(h), u = {
       x: o,
       y: i
     }, p = Zt(s), f = Jt(p), g = await n.getDimensions(c), m = p === "y", y = m ? "top" : "left", x = m ? "bottom" : "right", E = m ? "clientHeight" : "clientWidth", C = r.reference[f] + r.reference[p] - u[p] - r.floating[f], P = u[p] - r.reference[p], F = await (n.getOffsetParent == null ? void 0 : n.getOffsetParent(c));
@@ -1213,7 +1213,7 @@ const Ti = (e) => ({
                   Q === "y";
                 }
                 return !0;
-              }).map(($) => [$.placement, $.overflows.filter((Q) => Q > 0).reduce((Q, $e) => Q + $e, 0)]).sort(($, Q) => $[1] - Q[1])[0]) == null ? void 0 : G[0];
+              }).map(($) => [$.placement, $.overflows.filter((Q) => Q > 0).reduce((Q, _e) => Q + _e, 0)]).sort(($, Q) => $[1] - Q[1])[0]) == null ? void 0 : G[0];
               N && (U = N);
               break;
             }
@@ -1362,7 +1362,7 @@ const Ni = function(e) {
       } = st(e, t), c = {
         x: o,
         y: i
-      }, h = await dt(t, l), d = Y(Z(s)), u = be(d);
+      }, h = await dt(t, l), d = Y(Z(s)), u = we(d);
       let p = c[u], f = c[d];
       if (r) {
         const m = u === "y" ? "top" : "left", y = u === "y" ? "bottom" : "right", x = p + h[m], E = p - h[y];
@@ -1435,7 +1435,7 @@ function Ct() {
   return typeof window < "u";
 }
 function lt(e) {
-  return xe(e) ? (e.nodeName || "").toLowerCase() : "#document";
+  return Ee(e) ? (e.nodeName || "").toLowerCase() : "#document";
 }
 function L(e) {
   var t;
@@ -1443,9 +1443,9 @@ function L(e) {
 }
 function q(e) {
   var t;
-  return (t = (xe(e) ? e.ownerDocument : e.document) || window.document) == null ? void 0 : t.documentElement;
+  return (t = (Ee(e) ? e.ownerDocument : e.document) || window.document) == null ? void 0 : t.documentElement;
 }
-function xe(e) {
+function Ee(e) {
   return Ct() ? e instanceof Node || e instanceof L(e).Node : !1;
 }
 function z(e) {
@@ -1528,14 +1528,14 @@ function tt(e) {
   );
   return fe(t) ? t.host : t;
 }
-function Ee(e) {
+function Pe(e) {
   const t = tt(e);
-  return rt(t) ? e.ownerDocument ? e.ownerDocument.body : e.body : W(t) && gt(t) ? t : Ee(t);
+  return rt(t) ? e.ownerDocument ? e.ownerDocument.body : e.body : W(t) && gt(t) ? t : Pe(t);
 }
 function pt(e, t, o) {
   var i;
   t === void 0 && (t = []), o === void 0 && (o = !0);
-  const s = Ee(e), r = s === ((i = e.ownerDocument) == null ? void 0 : i.body), n = L(s);
+  const s = Pe(e), r = s === ((i = e.ownerDocument) == null ? void 0 : i.body), n = L(s);
   if (r) {
     const a = Bt(n);
     return t.concat(n, n.visualViewport || [], gt(s) ? s : [], a && o ? pt(a) : []);
@@ -1545,7 +1545,7 @@ function pt(e, t, o) {
 function Bt(e) {
   return e.parent && Object.getPrototypeOf(e.parent) ? e.frameElement : null;
 }
-function Pe(e) {
+function Ce(e) {
   const t = B(e);
   let o = parseFloat(t.width) || 0, i = parseFloat(t.height) || 0;
   const s = W(e), r = s ? e.offsetWidth : o, n = s ? e.offsetHeight : i, a = wt(o) !== r || wt(i) !== n;
@@ -1566,7 +1566,7 @@ function nt(e) {
     width: i,
     height: s,
     $: r
-  } = Pe(t);
+  } = Ce(t);
   let n = (r ? wt(o.width) : o.width) / i, a = (r ? wt(o.height) : o.height) / s;
   return (!n || !Number.isFinite(n)) && (n = 1), (!a || !Number.isFinite(a)) && (a = 1), {
     x: n,
@@ -1574,7 +1574,7 @@ function nt(e) {
   };
 }
 const ji = /* @__PURE__ */ H(0);
-function Ce(e) {
+function Oe(e) {
   const t = L(e);
   return !te() || !t.visualViewport ? ji : {
     x: t.visualViewport.offsetLeft,
@@ -1589,7 +1589,7 @@ function ot(e, t, o, i) {
   const s = e.getBoundingClientRect(), r = ee(e);
   let n = H(1);
   t && (i ? z(i) && (n = nt(i)) : n = nt(e));
-  const a = Yi(r, o, i) ? Ce(r) : H(0);
+  const a = Yi(r, o, i) ? Oe(r) : H(0);
   let l = (s.left + a.x) / n.x, c = (s.top + a.y) / n.y, h = s.width / n.x, d = s.height / n.y;
   if (r) {
     const u = L(r), p = i && z(i) ? L(i) : i;
@@ -1610,7 +1610,7 @@ function ie(e, t) {
   const o = St(e).scrollLeft;
   return t ? t.left + o : ot(q(e)).left + o;
 }
-function Oe(e, t, o) {
+function Ae(e, t, o) {
   o === void 0 && (o = !1);
   const i = e.getBoundingClientRect(), s = i.left + t.scrollLeft - (o ? 0 : (
     // RTL <body> scrollbar.
@@ -1640,7 +1640,7 @@ function Ki(e) {
     const p = ot(i);
     c = nt(i), h.x = p.x + i.clientLeft, h.y = p.y + i.clientTop;
   }
-  const u = n && !d && !r ? Oe(n, l, !0) : H(0);
+  const u = n && !d && !r ? Ae(n, l, !0) : H(0);
   return {
     width: o.width * c.x,
     height: o.height * c.y,
@@ -1696,7 +1696,7 @@ function ge(e, t, o) {
   else if (z(t))
     i = Zi(t, o);
   else {
-    const s = Ce(e);
+    const s = Oe(e);
     i = {
       x: t.x - s.x,
       y: t.y - s.y,
@@ -1706,9 +1706,9 @@ function ge(e, t, o) {
   }
   return Et(i);
 }
-function Ae(e, t) {
+function Se(e, t) {
   const o = tt(e);
-  return o === t || !z(o) || rt(o) ? !1 : B(o).position === "fixed" || Ae(o, t);
+  return o === t || !z(o) || rt(o) ? !1 : B(o).position === "fixed" || Se(o, t);
 }
 function to(e, t) {
   const o = t.get(e);
@@ -1719,7 +1719,7 @@ function to(e, t) {
   let n = r ? tt(e) : e;
   for (; z(n) && !rt(n); ) {
     const a = B(n), l = At(n);
-    !l && a.position === "fixed" && (s = null), (r ? !l && !s : !l && a.position === "static" && !!s && Ji.has(s.position) || gt(n) && !l && Ae(e, n)) ? i = i.filter((h) => h !== n) : s = a, n = tt(n);
+    !l && a.position === "fixed" && (s = null), (r ? !l && !s : !l && a.position === "static" && !!s && Ji.has(s.position) || gt(n) && !l && Se(e, n)) ? i = i.filter((h) => h !== n) : s = a, n = tt(n);
   }
   return t.set(e, i), i;
 }
@@ -1745,7 +1745,7 @@ function io(e) {
   const {
     width: t,
     height: o
-  } = Pe(e);
+  } = Ce(e);
   return {
     width: t,
     height: o
@@ -1767,7 +1767,7 @@ function oo(e, t, o) {
       l.x = p.x + t.clientLeft, l.y = p.y + t.clientTop;
     } else s && c();
   r && !i && s && c();
-  const h = s && !i && !r ? Oe(s, a) : H(0), d = n.left + a.scrollLeft - l.x - h.x, u = n.top + a.scrollTop - l.y - h.y;
+  const h = s && !i && !r ? Ae(s, a) : H(0), d = n.left + a.scrollLeft - l.x - h.x, u = n.top + a.scrollTop - l.y - h.y;
   return {
     x: d,
     y: u,
@@ -1786,7 +1786,7 @@ function me(e, t) {
   let o = e.offsetParent;
   return q(e) === o && (o = o.ownerDocument.body), o;
 }
-function Se(e, t) {
+function Re(e, t) {
   const o = L(e);
   if (Ot(e))
     return o;
@@ -1805,7 +1805,7 @@ function Se(e, t) {
   return i && rt(i) && Ft(i) && !At(i) ? o : i || Vi(e) || o;
 }
 const so = async function(e) {
-  const t = this.getOffsetParent || Se, o = this.getDimensions, i = await o(e.floating);
+  const t = this.getOffsetParent || Re, o = this.getDimensions, i = await o(e.floating);
   return {
     reference: oo(e.reference, await t(e.floating), e.strategy),
     floating: {
@@ -1823,7 +1823,7 @@ const It = {
   convertOffsetParentRelativeRectToViewportRelativeRect: Ki,
   getDocumentElement: q,
   getClippingRect: eo,
-  getOffsetParent: Se,
+  getOffsetParent: Re,
   getElementRects: so,
   getClientRects: Xi,
   getDimensions: io,
@@ -1831,7 +1831,7 @@ const It = {
   isElement: z,
   isRTL: no
 };
-function Re(e, t) {
+function Te(e, t) {
   return e.x === t.x && e.y === t.y && e.width === t.width && e.height === t.height;
 }
 function ro(e, t) {
@@ -1865,7 +1865,7 @@ function ro(e, t) {
           n(!1, 1e-7);
         }, 1e3);
       }
-      O === 1 && !Re(c, e.getBoundingClientRect()) && n(), C = !1;
+      O === 1 && !Te(c, e.getBoundingClientRect()) && n(), C = !1;
     }
     try {
       o = new IntersectionObserver(P, {
@@ -1907,7 +1907,7 @@ function Mt(e, t, o, i) {
   l && m();
   function m() {
     const y = ot(e);
-    g && !Re(g, y) && o(), g = y, f = requestAnimationFrame(m);
+    g && !Te(g, y) && o(), g = y, f = requestAnimationFrame(m);
   }
   return o(), () => {
     var y;
@@ -1916,7 +1916,7 @@ function Mt(e, t, o, i) {
     }), d?.(), (y = p) == null || y.disconnect(), p = null, l && cancelAnimationFrame(f);
   };
 }
-const Ht = Ni, Te = $i, Wt = Li, qt = _i, ao = Di, Le = Ti, De = (e, t, o) => {
+const Ht = Ni, Le = $i, Wt = Li, qt = _i, ao = Di, De = Ti, ke = (e, t, o) => {
   const i = /* @__PURE__ */ new Map(), s = {
     platform: It,
     ...o
@@ -2005,7 +2005,7 @@ class ho {
         crossAxis: r,
         mainAxis: s
       }),
-      Te({ padding: vt }),
+      Le({ padding: vt }),
       i,
       qt({
         apply: ({ availableHeight: u, availableWidth: p, rects: { floating: f } }) => {
@@ -2023,12 +2023,12 @@ class ho {
         padding: vt
       }),
       ...n ? [
-        Le({
+        De({
           element: n,
           padding: t.tipPadding || vt
         })
       ] : []
-    ], { middlewareData: l, placement: c, x: h, y: d } = await De(
+    ], { middlewareData: l, placement: c, x: h, y: d } = await ke(
       t.trigger,
       o,
       {
@@ -2094,7 +2094,7 @@ class oe {
       t && (customElements.whenDefined("cx-overlay").then(async () => {
         const { Overlay: o } = await Promise.resolve().then(() => Co);
         this.overlay = new o(), this.overlay.open = !0;
-      }), Promise.resolve().then(() => Ne));
+      }), Promise.resolve().then(() => $e));
     }
   }
   get overlay() {
@@ -2126,7 +2126,7 @@ class oe {
     this.isPersistent || this.abort();
   }
 }
-const po = 300, ke = {
+const po = 300, Fe = {
   keyboard: "Press Space or Alt+Down Arrow for additional options",
   mouse: "Click and hold for additional options",
   touch: "Double tap and long press for additional options"
@@ -2188,7 +2188,7 @@ class uo extends oe {
     const o = document.createElement("div");
     o.id = `longpress-describedby-descriptor-${Ut()}`;
     const i = ni() || ri() ? "touch" : "keyboard";
-    o.textContent = ke[i], o.slot = "longpress-describedby-descriptor";
+    o.textContent = Fe[i], o.slot = "longpress-describedby-descriptor";
     const s = t.getRootNode(), r = this.overlay.getRootNode();
     s === r ? this.overlay.append(o) : (o.hidden = !("host" in s), t.insertAdjacentElement("afterend", o));
     const n = $t(
@@ -2719,7 +2719,7 @@ const A = (K = class extends ct {
       this.elementResolver.selector = i ? `#${i}` : "", this.triggerInteraction = s;
     }
     let o = !1;
-    t.has(ve) && (o = this.triggerElement, this.triggerElement = this.elementResolver.element), t.has("triggerElement") && (o = t.get("triggerElement")), o !== !1 && this.bindEvents();
+    t.has(be) && (o = this.triggerElement, this.triggerElement = this.elementResolver.element), t.has("triggerElement") && (o = t.get("triggerElement")), o !== !1 && this.bindEvents();
   }
   updated(t) {
     super.updated(t), t.has("placement") && (this.placement ? this.dialogEl.setAttribute("actual-placement", this.placement) : this.dialogEl.removeAttribute("actual-placement"), this.open && typeof t.get("placement") < "u" && this.placementController.resetOverlayPosition()), t.has("state") && this.state === "closed" && typeof t.get("state") < "u" && this.placementController.clearOverlayPosition();
@@ -2785,9 +2785,9 @@ const A = (K = class extends ct {
     super.disconnectedCallback(), this.removeEventListener("close", this.handleClose), this.strategy?.releaseDescription(), this.open = !1;
   }
 }, K.styles = [
-  ye,
+  ve,
   Vt`
-      ${ze(fo)}
+      ${Be(fo)}
     `
 ], K.openCount = 1, K);
 R([
@@ -2822,7 +2822,7 @@ R([
   ut("slot")
 ], A.prototype, "slotEl", 2);
 R([
-  Me()
+  ye()
 ], A.prototype, "state", 1);
 R([
   v({ attribute: "tip-padding", type: Number })
@@ -2839,14 +2839,14 @@ R([
 R([
   v()
 ], A.prototype, "type", 2);
-let Fe = A;
+let Ne = A;
 const Co = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  LONGPRESS_INSTRUCTIONS: ke,
-  Overlay: Fe
+  LONGPRESS_INSTRUCTIONS: Fe,
+  Overlay: Ne
 }, Symbol.toStringTag, { value: "Module" }));
-Qe("cx-overlay", Fe);
-const Ne = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+Qe("cx-overlay", Ne);
+const $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null
 }, Symbol.toStringTag, { value: "Module" }));
 function Oo(e) {
@@ -2902,7 +2902,7 @@ const So = Vt`
     width: max-content;
   }
 
-  .popup--fixed {
+  .popup--fixed, .popup--overlay {
     position: fixed;
     z-index: var(--cx-z-index-dialog);
   }
@@ -2911,6 +2911,12 @@ const So = Vt`
     display: none;
   }
 
+  .popup--overlay.popup:not(.popup--active) {
+    display: unset;
+    visibility: hidden;
+    opacity: 0;
+  }
+
   .popup__arrow {
     position: absolute;
     width: calc(var(--arrow-size-diagonal) * 2);
@@ -2952,9 +2958,9 @@ function Lo(e) {
   const t = "contextElement" in e ? e.contextElement.ownerDocument.defaultView : null;
   return "getBoundingClientRect" in e && ("contextElement" in e ? e.contextElement instanceof (t?.Element ?? Element) : !0);
 }
-let b = class extends Be {
+let b = class extends Ie {
   constructor() {
-    super(...arguments), this.localize = new Ve(this), this.active = !1, this.placement = "top", this.strategy = "absolute", this.distance = 0, this.skidding = 0, this.arrow = !1, this.arrowPlacement = "anchor", this.arrowPadding = 10, this.flip = !1, this.hide = !1, this.hideBoundaryStrategy = "escaped", this.flipFallbackPlacements = "", this.flipFallbackStrategy = "best-fit", this.flipPadding = 0, this.shift = !1, this.shiftPadding = 0, this.autoSizePadding = 0, this.hoverBridge = !1, this.autoWidthFactor = 1, this.updateHoverBridge = () => {
+    super(...arguments), this.localize = new Ve(this), this.active = !1, this.placement = "top", this.strategy = "absolute", this.distance = 0, this.skidding = 0, this.arrow = !1, this.arrowPlacement = "anchor", this.arrowPadding = 10, this.flip = !1, this.hide = !1, this.hideBoundaryStrategy = "escaped", this.flipFallbackPlacements = "", this.flipFallbackStrategy = "best-fit", this.flipPadding = 0, this.shift = !1, this.shiftPadding = 0, this.autoSizePadding = 0, this.hoverBridge = !1, this.autoWidthFactor = 1, this.overlayOpened = !1, this.updateHoverBridge = () => {
       if (this.hoverBridge && this.anchorEl) {
         const e = this.anchorEl.getBoundingClientRect(), t = this.popup.getBoundingClientRect(), o = this.placement.includes("top") || this.placement.includes("bottom") || this.placement === "center";
         let i = 0, s = 0, r = 0, n = 0, a = 0, l = 0, c = 0, h = 0;
@@ -2984,14 +2990,18 @@ let b = class extends Be {
   disconnectedCallback() {
     super.disconnectedCallback(), this.stop();
   }
-  async runFirstUpdated() {
-    if (this.start(), this.strategy === "overlay" && !ne) {
+  runFirstUpdated() {
+    if (this.strategy !== "overlay") {
+      this.start();
+      return;
+    }
+    if (this.overlayOpened && this.start(), !ne) {
       const e = We(this);
       e && (this.autoSizeBoundary = e, this.flipBoundary = e, this.shiftBoundary = e);
     }
   }
   async updated(e) {
-    super.updated(e), e.has("active") && (this.active ? (this.start(), this.emit("cx-opened")) : this.stop()), e.has("anchor") && this.handleAnchorChange(), this.active && (await this.updateComplete, this.reposition());
+    super.updated(e), e.has("active") && (this.active ? this.strategy !== "overlay" && (this.start(), this.emit("cx-opened"), this.overlayOpened = !0) : this.stop()), e.has("anchor") && this.handleAnchorChange(), this.active && this.overlayOpened && (await this.updateComplete, this.reposition());
   }
   async handleAnchorChange() {
     if (await this.stop(), this.anchor && typeof this.anchor == "string") {
@@ -3002,10 +3012,10 @@ let b = class extends Be {
       flatten: !0
     })[0]), this.anchorEl instanceof Element && this.anchorEl.tagName.toLowerCase() === "cx-dialog" && (this.anchorEl = this.anchorEl?.shadowRoot?.querySelector(
       '[part="panel"]'
-    )), this.anchorEl && this.start();
+    )), this.anchorEl && this.strategy !== "overlay" && this.start();
   }
   async handleOverlayOpened(e) {
-    e.target === this.overlay && (this.style.removeProperty("--auto-size-available-width"), this.style.removeProperty("--auto-size-available-height"), this.reposition(), await this.updateComplete, this.emit("cx-opened"));
+    e.target === this.overlay && (this.start(), await this.updateComplete, this.emit("cx-opened"), this.overlayOpened = !0);
   }
   start() {
     this.anchorEl && (this.cleanup = Mt(this.anchorEl, this.popup, () => {
@@ -3013,7 +3023,7 @@ let b = class extends Be {
     }));
   }
   async stop() {
-    return new Promise((e) => {
+    return this.active || (this.overlayOpened = !1), new Promise((e) => {
       this.cleanup ? (this.cleanup(), this.cleanup = void 0, this.removeAttribute("data-current-placement"), this.style.removeProperty("--auto-size-available-width"), this.style.removeProperty("--auto-size-available-height"), requestAnimationFrame(() => e())) : e();
     });
   }
@@ -3049,7 +3059,7 @@ let b = class extends Be {
     if (this.shift) {
       let t = this.shiftBoundary;
       !t && ["fixed", "overlay"].includes(this.strategy) && (t = document.body), e.push(
-        Te({
+        Le({
           boundary: t,
           padding: this.shiftPadding
         })
@@ -3075,7 +3085,7 @@ let b = class extends Be {
     } else
       this.style.removeProperty("--auto-size-available-width"), this.style.removeProperty("--auto-size-available-height");
     this.arrow && e.push(
-      Le({
+      De({
         element: this.arrowEl,
         padding: this.arrowPadding
       })
@@ -3084,7 +3094,7 @@ let b = class extends Be {
         boundary: this.hideBoundary,
         strategy: this.hideBoundaryStrategy
       })
-    ), De(this.anchorEl, this.popup, {
+    ), ke(this.anchorEl, this.popup, {
       middleware: e,
       placement: this.placement === "center" ? "bottom" : this.placement,
       platform: {
@@ -3136,7 +3146,7 @@ let b = class extends Be {
   }
   render() {
     const e = j`<cx-overlay
-      open
+      ?open=${this.active}
       placement="bottom"
       type="manual"
       @cx-opened=${this.handleOverlayOpened}
@@ -3145,9 +3155,9 @@ let b = class extends Be {
         part="popup"
         class=${Dt({
       popup: !0,
-      "popup--active": this.active,
-      "popup--fixed": !0,
+      "popup--active": this.overlayOpened,
       "popup--has-arrow": this.arrow,
+      "popup--overlay": !0,
       "popup--use-size-middleware": this.isSizeMiddleWareUsed
     })}
       >
@@ -3194,7 +3204,7 @@ let b = class extends Be {
     `;
   }
 };
-b.styles = [ye, So];
+b.styles = [ve, So];
 w([
   ut(".popup")
 ], b.prototype, "popup", 2);
@@ -3291,8 +3301,11 @@ w([
 w([
   v({ attribute: "auto-width-factor" })
 ], b.prototype, "autoWidthFactor", 2);
+w([
+  ye()
+], b.prototype, "overlayOpened", 2);
 b = w([
-  Ie("cx-popup")
+  Me("cx-popup")
 ], b);
 export {
   b as default

package/library/components/types.js

@@ -142036,7 +142036,7 @@ var zVt = Object.defineProperty, FVt = Object.getOwnPropertyDescriptor, Ur = (n,
 };
 let Ar = class extends Fn {
   constructor() {
-    super(), this.localize = new nr(this), this.configsController = new ca(this.localize), this.initialData = "", this.device = "desktop", this.devices = HQ, this.autoInit = !1, this.pageId = "", this.allowDuplicateBlocks = !1, this.mode = qd.Template, this.contentBuilder = null, this.ready = !1, this.editingComponent = null, this.isGalleryConfigOpen = !1, this.hoveredComponent = void 0, this.hoveredComponentPlacement = "top", this.defaultRowGap = 0, this.containerDropdowns = [], this.containerDropdownStateMap = {}, this.distance = void 0, this.toolbar = [], this.toolbarActive = !1, this.childSelected = void 0, this.mousePosition = { x: 0, y: 0 }, this._teamSpaceRoles = [], this.canvasDocument = null, this._dsm = null, this.hasBoundUpdate = !1, this.newlyAddedComponentTimeout = null, this.initializeCustomFrame = eLt(), this.containerDropdownObservers = [], this.nextMapHoveredBadgeState = null, this.deselectAll = this.deselectAll.bind(this), this.handleCanvasClick = this.handleCanvasClick.bind(this), this.handleRootToolbarRightClick = this.handleRootToolbarRightClick.bind(this), this.handleCanvasKeydown = this.handleCanvasKeydown.bind(this), this.handleDataSourceChange = this.handleDataSourceChange.bind(this), this.handleCanvasMouseMove = this.handleCanvasMouseMove.bind(this), this.handleTemplateManagerUpdated = this.handleTemplateManagerUpdated.bind(this), this.handleCanvasScroll = this.handleCanvasScroll.bind(this);
+    super(), this.localize = new nr(this), this.configsController = new ca(this.localize), this.initialData = "", this.device = "desktop", this.devices = HQ, this.autoInit = !1, this.pageId = "", this.allowDuplicateBlocks = !1, this.mode = qd.Template, this.contentBuilder = null, this.ready = !1, this.editingComponent = null, this.isGalleryConfigOpen = !1, this.hoveredComponent = void 0, this.hoveredComponentPlacement = "top", this.defaultRowGap = 0, this.containerDropdowns = [], this.containerDropdownStateMap = {}, this.distance = void 0, this.toolbar = [], this.toolbarActive = !1, this.childSelected = void 0, this.mousePosition = { x: 0, y: 0 }, this._teamSpaceRoles = [], this.canvasDocument = null, this._dsm = null, this.hasBoundUpdate = !1, this.newlyAddedComponentTimeout = null, this.initializeCustomFrame = eLt(), this.containerDropdownObservers = [], this.nextMapHoveredBadgeState = null, this.deselectAll = this.deselectAll.bind(this), this.handleCanvasClick = this.handleCanvasClick.bind(this), this.handleCanvasKeydown = this.handleCanvasKeydown.bind(this), this.handleDataSourceChange = this.handleDataSourceChange.bind(this), this.handleCanvasMouseMove = this.handleCanvasMouseMove.bind(this), this.handleTemplateManagerUpdated = this.handleTemplateManagerUpdated.bind(this), this.handleCanvasScroll = this.handleCanvasScroll.bind(this);
   }
   get teamSpaceRoles() {
     return this._teamSpaceRoles;
@@ -142340,10 +142340,6 @@ let Ar = class extends Fn {
     const n = this.contentBuilder?.getSelected(), e = this.childSelected;
     n && !e && this.contentBuilder?.trigger("component:selected", n), this.toggleToolbarAndBadge();
   }
-  handleRootToolbarRightClick(n) {
-    const e = n.target;
-    n.button === 2 && e instanceof Element && e.closest(".gjs-toolbar") && (n.preventDefault(), n.stopImmediatePropagation());
-  }
   handleCanvasClick(n) {
     n.target.closest("[data-cms5-page-viewer__page-content]") || this.deselectAll();
   }
@@ -142508,31 +142504,27 @@ let Ar = class extends Fn {
         return;
       this.contentBuilder.Canvas.getFrameEl().setAttribute("title", "content-builder-frame"), this.updateFrameSize(), this._teamSpaceRoles = await this.fetchTeamSpaceRoles();
     }), this.contentBuilder?.on("load", async (t) => {
-      this.contentBuilder?.getEl()?.addEventListener(
-        "mousedown",
-        this.handleRootToolbarRightClick,
-        !0
-      ), t.UndoManager.stop();
-      const i = this.canvasDocument?.getElementById("Form1");
-      i && i.addEventListener("scroll", this.handleCanvasScroll);
+      t.UndoManager.stop();
+      const r = this.canvasDocument?.getElementById("Form1");
+      r && r.addEventListener("scroll", this.handleCanvasScroll);
       try {
         t.getWrapper()?.set({
           highlightable: !1,
           hoverable: !1,
           selectable: !1
         });
-        const o = t.getWrapper(), a = t.Canvas.getBody().querySelector(
+        const i = t.getWrapper(), o = t.Canvas.getBody().querySelector(
           "[data-cms5-page-viewer]"
         );
-        if (!o)
+        if (!i)
           return;
-        let s = "12px";
-        if (a) {
-          const c = getComputedStyle(a).getPropertyValue("--row-gap").trim();
-          c && (s = c);
+        let a = "12px";
+        if (o) {
+          const l = getComputedStyle(o).getPropertyValue("--row-gap").trim();
+          l && (a = l);
         }
-        const l = Number.parseFloat(s || "12px");
-        this.defaultRowGap = Number.isFinite(l) ? l : 12, o.findType(ot.Column).length === 0 ? t.addComponents({
+        const s = Number.parseFloat(a || "12px");
+        this.defaultRowGap = Number.isFinite(s) ? s : 12, i.findType(ot.Column).length === 0 ? t.addComponents({
           copyable: !1,
           editable: !1,
           highlightable: !1,
@@ -142542,12 +142534,12 @@ let Ar = class extends Fn {
           style: {
             "--flex-content": "none",
             "--padding": "4px",
-            "--row-gap": s
+            "--row-gap": a
           },
           toolbar: [],
           type: ot.Column
-        }) : o.findType(ot.Column)?.forEach((c, d) => {
-          d === 0 && c.set({
+        }) : i.findType(ot.Column)?.forEach((l, c) => {
+          c === 0 && l.set({
             copyable: !1,
             editable: !1,
             highlightable: !1,
@@ -142557,14 +142549,14 @@ let Ar = class extends Fn {
             style: {
               "--flex-content": "none",
               "--padding": "4px",
-              "--row-gap": s
+              "--row-gap": a
             }
-          }), c.set({
+          }), l.set({
             draggable: '[data-gjs-type="BlockColumns"]',
             droppable: '[data-gjs-type="BlockButton"], [data-gjs-type="BlockColumns"], [data-gjs-type="BlockDivider"], [data-gjs-type="BlockHeader"], [data-gjs-type="BlockImage"], [data-gjs-type="BlockText"], [data-gjs-type="BlockVideo"], [data-gjs-type="BlockFontKit"], [data-gjs-type="BlockCarousel"], [data-gjs-type="BlockGallery"], [data-gjs-type="BlockTabs"], [data-gjs-type="BlockAccordion"], [data-gjs-type="BlockSearchBox"], [data-gjs-type="BlockColorSwatches"]'
           });
-        }), this.dsm?.getAll().forEach((c) => {
-          c.records.on("add", this.handleDataSourceChange);
+        }), this.dsm?.getAll().forEach((l) => {
+          l.records.on("add", this.handleDataSourceChange);
         }), this.updateDataSourceEntries(), this.resetDirtyCount();
       } finally {
         t.UndoManager.start();
@@ -142739,17 +142731,12 @@ let Ar = class extends Fn {
         "cx-template-manager-updated",
         this.handleTemplateManagerUpdated
       );
-      const e = this.canvasDocument?.getElementById("Form1");
-      e && e.removeEventListener("scroll", this.handleCanvasScroll);
+      const n = this.canvasDocument?.getElementById("Form1");
+      n && n.removeEventListener("scroll", this.handleCanvasScroll);
     }
-    const n = this.contentBuilder?.getEl();
-    n && n.removeEventListener(
-      "mousedown",
-      this.handleRootToolbarRightClick,
-      !0
-    ), this.contentBuilder?.destroy(), this.hasBoundUpdate = !1, this.newlyAddedComponentTimeout && clearTimeout(this.newlyAddedComponentTimeout);
-    for (const e of this.containerDropdownObservers)
-      e.disconnect?.();
+    this.contentBuilder?.destroy(), this.hasBoundUpdate = !1, this.newlyAddedComponentTimeout && clearTimeout(this.newlyAddedComponentTimeout);
+    for (const n of this.containerDropdownObservers)
+      n.disconnect?.();
     this.containerDropdownObservers = [];
   }
   handleBuilderPropsChange() {

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.19.0-pr77233.3",
+  "version": "2.19.0-pr77234.3",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/atoms/src/components/popup/popup.d.ts

@@ -164,9 +164,16 @@ export default class CxPopup extends CortexElement {
      * make the popup half the width of the available space.
      */
     autoWidthFactor: number;
+    /**
+     * After `active` changes, cx-overlay takes some time to open.
+     * Until then, the positioning is not accurate, so we use this
+     * state to hide the popup until the overlay is opened.
+     * (Only for fixed strategy)
+     */
+    overlayOpened: boolean;
     private get isSizeMiddleWareUsed();
     disconnectedCallback(): void;
-    protected runFirstUpdated(): Promise<void>;
+    protected runFirstUpdated(): void;
     updated(changedProps: Map<string, unknown>): Promise<void>;
     private handleAnchorChange;
     private handleOverlayOpened;

package/library/packages/organisms/src/content-builder/content-builder.d.ts

@@ -210,7 +210,6 @@ export default class CxContentBuilder extends CortexElement {
     private handleCanvasMouseMove;
     private handleCanvasScroll;
     private handleHorizontalScroll;
-    private handleRootToolbarRightClick;
     private handleCanvasClick;
     private handleCanvasKeydown;
     private handleTemplateManagerUpdated;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.19.0-pr77233.3",
+  "version": "2.19.0-pr77234.3",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {