@editora/ui-core 0.1.12 → 0.1.14

package/dist/floating-toolbar.esm.js

@@ -1,5 +1,6 @@
-import { E as g } from "./ElementBase-909688f3.mjs";
-const p = `
+import { E as c } from "./ElementBase-909688f3.mjs";
+import { l as b } from "./positioner-e9770c66.mjs";
+const f = `
   :host {
     position: fixed;
     inset: 0;
@@ -21,8 +22,6 @@ const p = `
     --ui-floating-toolbar-focus-ring: var(--ui-color-focus-ring, #2563eb);
     --ui-floating-toolbar-accent: var(--ui-color-primary, #2563eb);
     --ui-floating-toolbar-backdrop: none;
-    --ui-floating-toolbar-x: 0px;
-    --ui-floating-toolbar-y: 0px;
     --ui-floating-toolbar-enter-y: -4px;
     --ui-floating-toolbar-duration: 170ms;
     --ui-floating-toolbar-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -50,13 +49,7 @@ const p = `
     display: grid;
     gap: var(--ui-floating-toolbar-gap);
     outline: none;
-    transform:
-      translate3d(
-        var(--ui-floating-toolbar-x, 0px),
-        calc(var(--ui-floating-toolbar-y, 0px) + var(--ui-floating-toolbar-enter-y, -4px)),
-        0
-      )
-      scale(0.985);
+    transform: translate3d(0, var(--ui-floating-toolbar-enter-y, -4px), 0) scale(0.985);
     opacity: 0;
     transition:
       transform var(--ui-floating-toolbar-duration) var(--ui-floating-toolbar-easing),
@@ -69,9 +62,7 @@ const p = `
 
   :host([open]) .panel {
     opacity: 1;
-    transform:
-      translate3d(var(--ui-floating-toolbar-x, 0px), var(--ui-floating-toolbar-y, 0px), 0)
-      scale(1);
+    transform: translate3d(0, 0, 0) scale(1);
   }
 
   .panel[data-side="bottom"] {
@@ -212,42 +203,43 @@ const p = `
     }
   }
 `;
-function _(i, t) {
+function p(i, t) {
   if (i == null || i === "")
     return t;
   const e = Number(i);
   return Number.isFinite(e) ? e : t;
 }
-function b(i, t) {
+function h(i, t) {
   if (i == null)
     return t;
   const e = i.trim().toLowerCase();
   return e !== "false" && e !== "0" && e !== "off";
 }
-function c(i, t, e) {
-  return Math.min(e, Math.max(t, i));
-}
-function m(i) {
+function g(i) {
   if (!document.body.contains(i))
     return !1;
   const t = window.getComputedStyle(i);
   return !(t.display === "none" || t.visibility === "hidden" || Number.parseFloat(t.opacity || "1") <= 0);
 }
-function v(i) {
+function _(i) {
   return i === "top" || i === "bottom" ? i : "auto";
 }
-function y(i) {
+function m(i) {
   return i === "start" || i === "end" ? i : "center";
 }
-function w(i) {
+function v(i, t) {
+  const e = i === "top" ? "top" : "bottom";
+  return t === "start" ? `${e}-start` : t === "end" ? `${e}-end` : e;
+}
+function y(i) {
   const t = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', e = [];
   return i.forEach((o) => {
     o instanceof HTMLElement && (o.matches(t) && e.push(o), e.push(...Array.from(o.querySelectorAll(t))));
   }), Array.from(new Set(e));
 }
-class x extends g {
+class w extends c {
   constructor() {
-    super(...arguments), this._anchor = null, this._panel = null, this._toolbarSlot = null, this._defaultSlot = null, this._raf = null, this._resizeObserver = null, this._mutationObserver = null, this._globalListenersBound = !1, this._isOpen = !1, this._closeReason = "programmatic", this._onWindowChangeBound = this._onWindowChange.bind(this), this._onDocumentPointerDownBound = this._onDocumentPointerDown.bind(this), this._onDocumentKeyDownBound = this._onDocumentKeyDown.bind(this), this._onPanelKeyDownBound = this._onPanelKeyDown.bind(this), this._onSlotChangeBound = this._onSlotChange.bind(this);
+    super(...arguments), this._anchor = null, this._panel = null, this._toolbarSlot = null, this._defaultSlot = null, this._raf = null, this._resizeObserver = null, this._mutationObserver = null, this._positioner = null, this._positionerPlacement = null, this._positionerOffset = 0, this._globalListenersBound = !1, this._isOpen = !1, this._closeReason = "programmatic", this._onWindowChangeBound = this._onWindowChange.bind(this), this._onDocumentPointerDownBound = this._onDocumentPointerDown.bind(this), this._onDocumentKeyDownBound = this._onDocumentKeyDown.bind(this), this._onPanelKeyDownBound = this._onPanelKeyDown.bind(this), this._onSlotChangeBound = this._onSlotChange.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -273,7 +265,8 @@ class x extends g {
     super.connectedCallback(), this._syncAnchorFromAttribute(), this._syncOpenState(), this._schedulePosition();
   }
   disconnectedCallback() {
-    this._unbindGlobalListeners(), this._teardownObservers(), this._raf != null && (cancelAnimationFrame(this._raf), this._raf = null), super.disconnectedCallback();
+    var t;
+    this._unbindGlobalListeners(), this._teardownObservers(), (t = this._positioner) == null || t.destroy(), this._positioner = null, this._raf != null && (cancelAnimationFrame(this._raf), this._raf = null), super.disconnectedCallback();
   }
   attributeChangedCallback(t, e, o) {
     if (e !== o) {
@@ -320,6 +313,7 @@ class x extends g {
     this.hasAttribute("open") && (this._closeReason = t, this.removeAttribute("open"));
   }
   _syncOpenState() {
+    var e;
     const t = this.hasAttribute("open") && !this.hasAttribute("headless") && !this.hasAttribute("disabled");
     if (t === this._isOpen) {
       t && this._schedulePosition();
@@ -329,7 +323,7 @@ class x extends g {
       this._bindGlobalListeners(), this._ensureObservers(), this._dispatchOpenEvents(), this._schedulePosition();
       return;
     }
-    this._unbindGlobalListeners(), this._teardownObservers(), this._raf != null && (cancelAnimationFrame(this._raf), this._raf = null), this._dispatchCloseEvents(this._closeReason), this._closeReason = "programmatic";
+    this._unbindGlobalListeners(), this._teardownObservers(), (e = this._positioner) == null || e.destroy(), this._positioner = null, this._positionerPlacement = null, this._positionerOffset = 0, this._raf != null && (cancelAnimationFrame(this._raf), this._raf = null), this._dispatchCloseEvents(this._closeReason), this._closeReason = "programmatic";
   }
   _dispatchOpenEvents() {
     this.dispatchEvent(new CustomEvent("open", { bubbles: !0, composed: !0 })), this.dispatchEvent(
@@ -416,41 +410,64 @@ class x extends g {
     this._isOpen && (this._teardownObservers(), this._ensureObservers());
   }
   _bindGlobalListeners() {
-    this._globalListenersBound || (window.addEventListener("scroll", this._onWindowChangeBound, !0), window.addEventListener("resize", this._onWindowChangeBound), document.addEventListener("pointerdown", this._onDocumentPointerDownBound, !0), document.addEventListener("keydown", this._onDocumentKeyDownBound, !0), this._globalListenersBound = !0);
+    this._globalListenersBound || (window.addEventListener("scroll", this._onWindowChangeBound, { passive: !0, capture: !0 }), window.addEventListener("resize", this._onWindowChangeBound), document.addEventListener("pointerdown", this._onDocumentPointerDownBound, !0), document.addEventListener("keydown", this._onDocumentKeyDownBound, !0), this._globalListenersBound = !0);
   }
   _unbindGlobalListeners() {
     this._globalListenersBound && (window.removeEventListener("scroll", this._onWindowChangeBound, !0), window.removeEventListener("resize", this._onWindowChangeBound), document.removeEventListener("pointerdown", this._onDocumentPointerDownBound, !0), document.removeEventListener("keydown", this._onDocumentKeyDownBound, !0), this._globalListenersBound = !1);
   }
   _position() {
+    var s, a;
     if (!this.hasAttribute("open") || this.hasAttribute("headless") || this.hasAttribute("disabled"))
       return;
     if (!this._anchor) {
       this._requestClose("anchor-missing");
       return;
     }
-    if (!m(this._anchor)) {
+    if (!g(this._anchor)) {
       this._requestClose("anchor-hidden");
       return;
     }
     if (!this._panel)
       return;
-    const t = this._anchor.getBoundingClientRect(), e = this._panel.getBoundingClientRect(), o = 8, n = Math.max(0, _(this.getAttribute("offset"), 8)), r = v(this.getAttribute("placement")), s = y(this.getAttribute("align")), a = t.top - o, l = window.innerHeight - t.bottom - o, d = r === "bottom" || r === "auto" && l > a && a < e.height + n, f = d ? "bottom" : "top";
-    let h = d ? t.bottom + n : t.top - e.height - n;
-    h = c(h, o, window.innerHeight - e.height - o);
-    let u = t.left + t.width / 2 - e.width / 2;
-    s === "start" && (u = t.left), s === "end" && (u = t.right - e.width), u = c(u, o, window.innerWidth - e.width - o), this.style.setProperty("--ui-floating-toolbar-x", `${Math.round(u)}px`), this.style.setProperty("--ui-floating-toolbar-y", `${Math.round(h)}px`), this.style.setProperty("--ui-floating-toolbar-origin-x", s === "start" ? "0%" : s === "end" ? "100%" : "50%"), this._panel.setAttribute("data-side", f);
+    const t = Math.max(0, p(this.getAttribute("offset"), 8)), e = _(this.getAttribute("placement")), o = m(this.getAttribute("align")), n = v(e, o);
+    if (!this._positioner || this._positionerPlacement !== n || this._positionerOffset !== t) {
+      (s = this._positioner) == null || s.destroy(), this._positioner = b({
+        anchor: this._anchor,
+        floating: this._panel,
+        placement: n,
+        strategy: "fixed",
+        offset: t,
+        flip: !0,
+        shift: !0,
+        boundaryPadding: 8,
+        observeWindowResize: !1,
+        observeScroll: !1,
+        observeAncestorScroll: !1,
+        observeAncestorResize: !1,
+        observeLayoutShift: !1,
+        observeAnchorResize: !1,
+        observeFloatingResize: !1,
+        onUpdate: (l) => {
+          var u;
+          const d = l.placement.startsWith("top") ? "top" : "bottom";
+          this.style.setProperty("--ui-floating-toolbar-origin-x", o === "start" ? "0%" : o === "end" ? "100%" : "50%"), (u = this._panel) == null || u.setAttribute("data-side", d);
+        }
+      }), this._positionerPlacement = n, this._positionerOffset = t;
+      return;
+    }
+    (a = this._positioner) == null || a.update();
   }
   _onWindowChange() {
     this.hasAttribute("open") && this._schedulePosition();
   }
   _onDocumentPointerDown(t) {
-    if (!this.hasAttribute("open") || !b(this.getAttribute("close-on-outside"), !0))
+    if (!this.hasAttribute("open") || !h(this.getAttribute("close-on-outside"), !0))
       return;
     const e = t.composedPath();
     e.includes(this) || this._anchor && e.includes(this._anchor) || this._requestClose("outside");
   }
   _onDocumentKeyDown(t) {
-    this.hasAttribute("open") && t.key === "Escape" && b(this.getAttribute("close-on-escape"), !0) && (t.preventDefault(), this._requestClose("escape"));
+    this.hasAttribute("open") && t.key === "Escape" && h(this.getAttribute("close-on-escape"), !0) && (t.preventDefault(), this._requestClose("escape"));
   }
   _onPanelKeyDown(t) {
     if (!this._panel || !["ArrowRight", "ArrowLeft", "Home", "End"].includes(t.key))
@@ -467,7 +484,7 @@ class x extends g {
   _getFocusableItems() {
     var o, n;
     const t = ((o = this._toolbarSlot) == null ? void 0 : o.assignedElements({ flatten: !0 })) || [], e = ((n = this._defaultSlot) == null ? void 0 : n.assignedElements({ flatten: !0 })) || [];
-    return w([...t, ...e]);
+    return y([...t, ...e]);
   }
   _onSlotChange() {
     this._syncRowVisibility(), this._schedulePosition();
@@ -495,7 +512,7 @@ class x extends g {
   render() {
     var t, e, o, n, r, s;
     this.setContent(`
-      <style>${p}</style>
+      <style>${f}</style>
       <section class="panel" part="panel" role="toolbar" aria-orientation="horizontal" tabindex="-1">
         <div class="row row-toolbar" part="row-toolbar">
           <slot name="toolbar"></slot>
@@ -507,7 +524,7 @@ class x extends g {
     `), this._panel = this.root.querySelector(".panel"), this._toolbarSlot = this.root.querySelector('slot[name="toolbar"]'), this._defaultSlot = this.root.querySelector("slot:not([name])"), (t = this._panel) == null || t.removeEventListener("keydown", this._onPanelKeyDownBound), (e = this._panel) == null || e.addEventListener("keydown", this._onPanelKeyDownBound), (o = this._toolbarSlot) == null || o.removeEventListener("slotchange", this._onSlotChangeBound), (n = this._defaultSlot) == null || n.removeEventListener("slotchange", this._onSlotChangeBound), (r = this._toolbarSlot) == null || r.addEventListener("slotchange", this._onSlotChangeBound), (s = this._defaultSlot) == null || s.addEventListener("slotchange", this._onSlotChangeBound), this._syncPanelA11y(), this._syncRowVisibility(), this._refreshObservers(), this._schedulePosition();
   }
 }
-typeof customElements < "u" && !customElements.get("ui-floating-toolbar") && customElements.define("ui-floating-toolbar", x);
+typeof customElements < "u" && !customElements.get("ui-floating-toolbar") && customElements.define("ui-floating-toolbar", w);
 export {
-  x as UIFloatingToolbar
+  w as UIFloatingToolbar
 };