npm - @spscommerce/positioning - Versions diffs - 0.0.0-20260319-8230915ce - Mend

@spscommerce/positioning 0.0.0-20260319-8230915ce

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md +48 -0
package/lib/index.d.ts +4 -0
package/lib/index.js +691 -0
package/lib/index.umd.cjs +1 -0
package/lib/position-anchor.enum.d.ts +7 -0
package/lib/position.enum.d.ts +18 -0
package/lib/positioning-options.interface.d.ts +37 -0
package/lib/positioning.service.d.ts +55 -0
package/package.json +41 -0
package/tsconfig.json +13 -0
package/vite.config.mjs +20 -0

package/README.md ADDED Viewed

@@ -0,0 +1,48 @@
+[//]: # "START_AUTOGENERATED"
+## [@spscommerce/positioning](https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/positioning#readme)
+![release: 1.1.0](https://img.shields.io/badge/release-1.1.0-blue.svg?style=flat-square)
+![build: passing](https://img.shields.io/badge/build-passing-green.svg?style=flat-square)
+![tests: failing](https://img.shields.io/badge/tests-failing-red.svg?style=flat-square)
+Service for positioning dropdown/popup elements.
+ ### Installation
+ ```shell
+npm install --save @spscommerce/positioning
+```
+#### Peer Dependencies
+<div class="row">
+    <div class="col-5">
+    <table class="sps-table">
+        <thead class="sps-table__head">
+            <tr class="sps-table__row">
+                <th class="sps-table__header">
+                    <span class="sps-table__header-cell-body">
+                        Package
+                    </span>
+                </th>
+                <th class="sps-table__header text-right">
+                    <span class="sps-table__header-cell-body">
+                        Version
+                    </span>
+                </th>
+            </tr>
+        </thead>
+        <tbody class="sps-table__body">
+            <tr class="sps-table__row"><td class="sps-table__cell"><a href="https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/utils#readme">@spscommerce/utils</a></td><td class="sps-table__cell text-right">^1.1.0</td></tr>
+<tr class="sps-table__row"><td class="sps-table__cell"><a href="git://github.com/primus/eventemitter3.git">eventemitter3</a></td><td class="sps-table__cell text-right">^3.1.0</td></tr>
+<tr class="sps-table__row"><td class="sps-table__cell"><a href="git@github.com:w3c/IntersectionObserver.git">intersection-observer</a></td><td class="sps-table__cell text-right">^0.5.1</td></tr>
+        </tbody>
+    </table>
+    </div>
+    <div class="col-7">
+        &nbsp;
+    </div>
+</div>
+[//]: # "END_AUTOGENERATED"

package/lib/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export * from "./position.enum";
+export * from "./position-anchor.enum";
+export * from "./positioning-options.interface";
+export * from "./positioning.service";

package/lib/index.js ADDED Viewed

@@ -0,0 +1,691 @@
+import { onNextTick as U, lockedToAnimationFrames as j } from "@spscommerce/utils";
+var S = /* @__PURE__ */ ((g) => (g.TOP_LEFT = "top left", g.TOP_MIDDLE = "top middle", g.TOP_RIGHT = "top right", g.RIGHT_TOP = "right top", g.RIGHT_MIDDLE = "right middle", g.RIGHT_BOTTOM = "right bottom", g.BOTTOM_RIGHT = "bottom right", g.BOTTOM_MIDDLE = "bottom middle", g.BOTTOM_LEFT = "bottom left", g.LEFT_BOTTOM = "left bottom", g.LEFT_MIDDLE = "left middle", g.LEFT_TOP = "left top", g))(S || {}), M = /* @__PURE__ */ ((g) => (g.TOP_LEFT = "top left", g.TOP_RIGHT = "top right", g.BOTTOM_LEFT = "bottom left", g.BOTTOM_RIGHT = "bottom right", g))(M || {});
+const V = {
+  anchor: M.TOP_LEFT,
+  offsets: [],
+  position: S.TOP_LEFT
+};
+var A = {}, F;
+function q() {
+  return F || (F = 1, function() {
+    if (typeof window != "object")
+      return;
+    if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {
+      "isIntersecting" in window.IntersectionObserverEntry.prototype || Object.defineProperty(
+        window.IntersectionObserverEntry.prototype,
+        "isIntersecting",
+        {
+          get: function() {
+            return this.intersectionRatio > 0;
+          }
+        }
+      );
+      return;
+    }
+    function g(t) {
+      try {
+        return t.defaultView && t.defaultView.frameElement || null;
+      } catch {
+        return null;
+      }
+    }
+    var n = function(t) {
+      for (var e = t, o = g(e); o; )
+        e = o.ownerDocument, o = g(e);
+      return e;
+    }(window.document), i = [], p = null, f = null;
+    function w(t) {
+      this.time = t.time, this.target = t.target, this.rootBounds = b(t.rootBounds), this.boundingClientRect = b(t.boundingClientRect), this.intersectionRect = b(t.intersectionRect || y()), this.isIntersecting = !!t.intersectionRect;
+      var e = this.boundingClientRect, o = e.width * e.height, s = this.intersectionRect, u = s.width * s.height;
+      o ? this.intersectionRatio = Number((u / o).toFixed(4)) : this.intersectionRatio = this.isIntersecting ? 1 : 0;
+    }
+    function a(t, e) {
+      var o = e || {};
+      if (typeof t != "function")
+        throw new Error("callback must be a function");
+      if (o.root && o.root.nodeType != 1 && o.root.nodeType != 9)
+        throw new Error("root must be a Document or Element");
+      this._checkForIntersections = d(
+        this._checkForIntersections.bind(this),
+        this.THROTTLE_TIMEOUT
+      ), this._callback = t, this._observationTargets = [], this._queuedEntries = [], this._rootMarginValues = this._parseRootMargin(o.rootMargin), this.thresholds = this._initThresholds(o.threshold), this.root = o.root || null, this.rootMargin = this._rootMarginValues.map(function(s) {
+        return s.value + s.unit;
+      }).join(" "), this._monitoringDocuments = [], this._monitoringUnsubscribes = [];
+    }
+    a.prototype.THROTTLE_TIMEOUT = 100, a.prototype.POLL_INTERVAL = null, a.prototype.USE_MUTATION_OBSERVER = !0, a._setupCrossOriginUpdater = function() {
+      return p || (p = function(t, e) {
+        !t || !e ? f = y() : f = x(t, e), i.forEach(function(o) {
+          o._checkForIntersections();
+        });
+      }), p;
+    }, a._resetCrossOriginUpdater = function() {
+      p = null, f = null;
+    }, a.prototype.observe = function(t) {
+      var e = this._observationTargets.some(function(o) {
+        return o.element == t;
+      });
+      if (!e) {
+        if (!(t && t.nodeType == 1))
+          throw new Error("target must be an Element");
+        this._registerInstance(), this._observationTargets.push({ element: t, entry: null }), this._monitorIntersections(t.ownerDocument), this._checkForIntersections();
+      }
+    }, a.prototype.unobserve = function(t) {
+      this._observationTargets = this._observationTargets.filter(function(e) {
+        return e.element != t;
+      }), this._unmonitorIntersections(t.ownerDocument), this._observationTargets.length == 0 && this._unregisterInstance();
+    }, a.prototype.disconnect = function() {
+      this._observationTargets = [], this._unmonitorAllIntersections(), this._unregisterInstance();
+    }, a.prototype.takeRecords = function() {
+      var t = this._queuedEntries.slice();
+      return this._queuedEntries = [], t;
+    }, a.prototype._initThresholds = function(t) {
+      var e = t || [0];
+      return Array.isArray(e) || (e = [e]), e.sort().filter(function(o, s, u) {
+        if (typeof o != "number" || isNaN(o) || o < 0 || o > 1)
+          throw new Error("threshold must be a number between 0 and 1 inclusively");
+        return o !== u[s - 1];
+      });
+    }, a.prototype._parseRootMargin = function(t) {
+      var e = t || "0px", o = e.split(/\s+/).map(function(s) {
+        var u = /^(-?\d*\.?\d+)(px|%)$/.exec(s);
+        if (!u)
+          throw new Error("rootMargin must be specified in pixels or percent");
+        return { value: parseFloat(u[1]), unit: u[2] };
+      });
+      return o[1] = o[1] || o[0], o[2] = o[2] || o[0], o[3] = o[3] || o[1], o;
+    }, a.prototype._monitorIntersections = function(t) {
+      var e = t.defaultView;
+      if (e && this._monitoringDocuments.indexOf(t) == -1) {
+        var o = this._checkForIntersections, s = null, u = null;
+        this.POLL_INTERVAL ? s = e.setInterval(o, this.POLL_INTERVAL) : (c(e, "resize", o, !0), c(t, "scroll", o, !0), this.USE_MUTATION_OBSERVER && "MutationObserver" in e && (u = new e.MutationObserver(o), u.observe(t, {
+          attributes: !0,
+          childList: !0,
+          characterData: !0,
+          subtree: !0
+        }))), this._monitoringDocuments.push(t), this._monitoringUnsubscribes.push(function() {
+          var I = t.defaultView;
+          I && (s && I.clearInterval(s), l(I, "resize", o, !0)), l(t, "scroll", o, !0), u && u.disconnect();
+        });
+        var O = this.root && (this.root.ownerDocument || this.root) || n;
+        if (t != O) {
+          var E = g(t);
+          E && this._monitorIntersections(E.ownerDocument);
+        }
+      }
+    }, a.prototype._unmonitorIntersections = function(t) {
+      var e = this._monitoringDocuments.indexOf(t);
+      if (e != -1) {
+        var o = this.root && (this.root.ownerDocument || this.root) || n, s = this._observationTargets.some(function(E) {
+          var I = E.element.ownerDocument;
+          if (I == t)
+            return !0;
+          for (; I && I != o; ) {
+            var L = g(I);
+            if (I = L && L.ownerDocument, I == t)
+              return !0;
+          }
+          return !1;
+        });
+        if (!s) {
+          var u = this._monitoringUnsubscribes[e];
+          if (this._monitoringDocuments.splice(e, 1), this._monitoringUnsubscribes.splice(e, 1), u(), t != o) {
+            var O = g(t);
+            O && this._unmonitorIntersections(O.ownerDocument);
+          }
+        }
+      }
+    }, a.prototype._unmonitorAllIntersections = function() {
+      var t = this._monitoringUnsubscribes.slice(0);
+      this._monitoringDocuments.length = 0, this._monitoringUnsubscribes.length = 0;
+      for (var e = 0; e < t.length; e++)
+        t[e]();
+    }, a.prototype._checkForIntersections = function() {
+      if (!(!this.root && p && !f)) {
+        var t = this._rootIsInDom(), e = t ? this._getRootRect() : y();
+        this._observationTargets.forEach(function(o) {
+          var s = o.element, u = T(s), O = this._rootContainsTarget(s), E = o.entry, I = t && O && this._computeTargetAndRootIntersection(s, u, e), L = null;
+          this._rootContainsTarget(s) ? (!p || this.root) && (L = e) : L = y();
+          var D = o.entry = new w({
+            time: m(),
+            target: s,
+            boundingClientRect: u,
+            rootBounds: L,
+            intersectionRect: I
+          });
+          E ? t && O ? this._hasCrossedThreshold(E, D) && this._queuedEntries.push(D) : E && E.isIntersecting && this._queuedEntries.push(D) : this._queuedEntries.push(D);
+        }, this), this._queuedEntries.length && this._callback(this.takeRecords(), this);
+      }
+    }, a.prototype._computeTargetAndRootIntersection = function(t, e, o) {
+      if (window.getComputedStyle(t).display != "none") {
+        for (var s = e, u = _(t), O = !1; !O && u; ) {
+          var E = null, I = u.nodeType == 1 ? window.getComputedStyle(u) : {};
+          if (I.display == "none") return null;
+          if (u == this.root || u.nodeType == /* DOCUMENT */
+          9)
+            if (O = !0, u == this.root || u == n)
+              p && !this.root ? !f || f.width == 0 && f.height == 0 ? (u = null, E = null, s = null) : E = f : E = o;
+            else {
+              var L = _(u), D = L && T(L), B = L && this._computeTargetAndRootIntersection(L, D, o);
+              D && B ? (u = L, E = x(D, B)) : (u = null, s = null);
+            }
+          else {
+            var C = u.ownerDocument;
+            u != C.body && u != C.documentElement && I.overflow != "visible" && (E = T(u));
+          }
+          if (E && (s = v(E, s)), !s) break;
+          u = u && _(u);
+        }
+        return s;
+      }
+    }, a.prototype._getRootRect = function() {
+      var t;
+      if (this.root && !R(this.root))
+        t = T(this.root);
+      else {
+        var e = R(this.root) ? this.root : n, o = e.documentElement, s = e.body;
+        t = {
+          top: 0,
+          left: 0,
+          right: o.clientWidth || s.clientWidth,
+          width: o.clientWidth || s.clientWidth,
+          bottom: o.clientHeight || s.clientHeight,
+          height: o.clientHeight || s.clientHeight
+        };
+      }
+      return this._expandRectByRootMargin(t);
+    }, a.prototype._expandRectByRootMargin = function(t) {
+      var e = this._rootMarginValues.map(function(s, u) {
+        return s.unit == "px" ? s.value : s.value * (u % 2 ? t.width : t.height) / 100;
+      }), o = {
+        top: t.top - e[0],
+        right: t.right + e[1],
+        bottom: t.bottom + e[2],
+        left: t.left - e[3]
+      };
+      return o.width = o.right - o.left, o.height = o.bottom - o.top, o;
+    }, a.prototype._hasCrossedThreshold = function(t, e) {
+      var o = t && t.isIntersecting ? t.intersectionRatio || 0 : -1, s = e.isIntersecting ? e.intersectionRatio || 0 : -1;
+      if (o !== s)
+        for (var u = 0; u < this.thresholds.length; u++) {
+          var O = this.thresholds[u];
+          if (O == o || O == s || O < o != O < s)
+            return !0;
+        }
+    }, a.prototype._rootIsInDom = function() {
+      return !this.root || h(n, this.root);
+    }, a.prototype._rootContainsTarget = function(t) {
+      var e = this.root && (this.root.ownerDocument || this.root) || n;
+      return h(e, t) && (!this.root || e == t.ownerDocument);
+    }, a.prototype._registerInstance = function() {
+      i.indexOf(this) < 0 && i.push(this);
+    }, a.prototype._unregisterInstance = function() {
+      var t = i.indexOf(this);
+      t != -1 && i.splice(t, 1);
+    };
+    function m() {
+      return window.performance && performance.now && performance.now();
+    }
+    function d(t, e) {
+      var o = null;
+      return function() {
+        o || (o = setTimeout(function() {
+          t(), o = null;
+        }, e));
+      };
+    }
+    function c(t, e, o, s) {
+      typeof t.addEventListener == "function" ? t.addEventListener(e, o, s) : typeof t.attachEvent == "function" && t.attachEvent("on" + e, o);
+    }
+    function l(t, e, o, s) {
+      typeof t.removeEventListener == "function" ? t.removeEventListener(e, o, s) : typeof t.detatchEvent == "function" && t.detatchEvent("on" + e, o);
+    }
+    function v(t, e) {
+      var o = Math.max(t.top, e.top), s = Math.min(t.bottom, e.bottom), u = Math.max(t.left, e.left), O = Math.min(t.right, e.right), E = O - u, I = s - o;
+      return E >= 0 && I >= 0 && {
+        top: o,
+        bottom: s,
+        left: u,
+        right: O,
+        width: E,
+        height: I
+      } || null;
+    }
+    function T(t) {
+      var e;
+      try {
+        e = t.getBoundingClientRect();
+      } catch {
+      }
+      return e ? (e.width && e.height || (e = {
+        top: e.top,
+        right: e.right,
+        bottom: e.bottom,
+        left: e.left,
+        width: e.right - e.left,
+        height: e.bottom - e.top
+      }), e) : y();
+    }
+    function y() {
+      return {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        width: 0,
+        height: 0
+      };
+    }
+    function b(t) {
+      return !t || "x" in t ? t : {
+        top: t.top,
+        y: t.top,
+        bottom: t.bottom,
+        left: t.left,
+        x: t.left,
+        right: t.right,
+        width: t.width,
+        height: t.height
+      };
+    }
+    function x(t, e) {
+      var o = e.top - t.top, s = e.left - t.left;
+      return {
+        top: o,
+        left: s,
+        height: e.height,
+        width: e.width,
+        bottom: o + e.height,
+        right: s + e.width
+      };
+    }
+    function h(t, e) {
+      for (var o = e; o; ) {
+        if (o == t) return !0;
+        o = _(o);
+      }
+      return !1;
+    }
+    function _(t) {
+      var e = t.parentNode;
+      return t.nodeType == /* DOCUMENT */
+      9 && t != n ? g(t) : (e && e.assignedSlot && (e = e.assignedSlot.parentNode), e && e.nodeType == 11 && e.host ? e.host : e);
+    }
+    function R(t) {
+      return t && t.nodeType === 9;
+    }
+    window.IntersectionObserver = a, window.IntersectionObserverEntry = w;
+  }()), A;
+}
+q();
+var P = { exports: {} }, H;
+function G() {
+  return H || (H = 1, function(g) {
+    var n = Object.prototype.hasOwnProperty, i = "~";
+    function p() {
+    }
+    Object.create && (p.prototype = /* @__PURE__ */ Object.create(null), new p().__proto__ || (i = !1));
+    function f(d, c, l) {
+      this.fn = d, this.context = c, this.once = l || !1;
+    }
+    function w(d, c, l, v, T) {
+      if (typeof l != "function")
+        throw new TypeError("The listener must be a function");
+      var y = new f(l, v || d, T), b = i ? i + c : c;
+      return d._events[b] ? d._events[b].fn ? d._events[b] = [d._events[b], y] : d._events[b].push(y) : (d._events[b] = y, d._eventsCount++), d;
+    }
+    function a(d, c) {
+      --d._eventsCount === 0 ? d._events = new p() : delete d._events[c];
+    }
+    function m() {
+      this._events = new p(), this._eventsCount = 0;
+    }
+    m.prototype.eventNames = function() {
+      var c = [], l, v;
+      if (this._eventsCount === 0) return c;
+      for (v in l = this._events)
+        n.call(l, v) && c.push(i ? v.slice(1) : v);
+      return Object.getOwnPropertySymbols ? c.concat(Object.getOwnPropertySymbols(l)) : c;
+    }, m.prototype.listeners = function(c) {
+      var l = i ? i + c : c, v = this._events[l];
+      if (!v) return [];
+      if (v.fn) return [v.fn];
+      for (var T = 0, y = v.length, b = new Array(y); T < y; T++)
+        b[T] = v[T].fn;
+      return b;
+    }, m.prototype.listenerCount = function(c) {
+      var l = i ? i + c : c, v = this._events[l];
+      return v ? v.fn ? 1 : v.length : 0;
+    }, m.prototype.emit = function(c, l, v, T, y, b) {
+      var x = i ? i + c : c;
+      if (!this._events[x]) return !1;
+      var h = this._events[x], _ = arguments.length, R, t;
+      if (h.fn) {
+        switch (h.once && this.removeListener(c, h.fn, void 0, !0), _) {
+          case 1:
+            return h.fn.call(h.context), !0;
+          case 2:
+            return h.fn.call(h.context, l), !0;
+          case 3:
+            return h.fn.call(h.context, l, v), !0;
+          case 4:
+            return h.fn.call(h.context, l, v, T), !0;
+          case 5:
+            return h.fn.call(h.context, l, v, T, y), !0;
+          case 6:
+            return h.fn.call(h.context, l, v, T, y, b), !0;
+        }
+        for (t = 1, R = new Array(_ - 1); t < _; t++)
+          R[t - 1] = arguments[t];
+        h.fn.apply(h.context, R);
+      } else {
+        var e = h.length, o;
+        for (t = 0; t < e; t++)
+          switch (h[t].once && this.removeListener(c, h[t].fn, void 0, !0), _) {
+            case 1:
+              h[t].fn.call(h[t].context);
+              break;
+            case 2:
+              h[t].fn.call(h[t].context, l);
+              break;
+            case 3:
+              h[t].fn.call(h[t].context, l, v);
+              break;
+            case 4:
+              h[t].fn.call(h[t].context, l, v, T);
+              break;
+            default:
+              if (!R) for (o = 1, R = new Array(_ - 1); o < _; o++)
+                R[o - 1] = arguments[o];
+              h[t].fn.apply(h[t].context, R);
+          }
+      }
+      return !0;
+    }, m.prototype.on = function(c, l, v) {
+      return w(this, c, l, v, !1);
+    }, m.prototype.once = function(c, l, v) {
+      return w(this, c, l, v, !0);
+    }, m.prototype.removeListener = function(c, l, v, T) {
+      var y = i ? i + c : c;
+      if (!this._events[y]) return this;
+      if (!l)
+        return a(this, y), this;
+      var b = this._events[y];
+      if (b.fn)
+        b.fn === l && (!T || b.once) && (!v || b.context === v) && a(this, y);
+      else {
+        for (var x = 0, h = [], _ = b.length; x < _; x++)
+          (b[x].fn !== l || T && !b[x].once || v && b[x].context !== v) && h.push(b[x]);
+        h.length ? this._events[y] = h.length === 1 ? h[0] : h : a(this, y);
+      }
+      return this;
+    }, m.prototype.removeAllListeners = function(c) {
+      var l;
+      return c ? (l = i ? i + c : c, this._events[l] && a(this, l)) : (this._events = new p(), this._eventsCount = 0), this;
+    }, m.prototype.off = m.prototype.removeListener, m.prototype.addListener = m.prototype.on, m.prefixed = i, m.EventEmitter = m, g.exports = m;
+  }(P)), P.exports;
+}
+var z = G(), W = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, Y = (g, n, i, p) => {
+  for (var f = $(n, i), w = g.length - 1, a; w >= 0; w--)
+    (a = g[w]) && (f = a(n, i, f) || f);
+  return f && W(n, i, f), f;
+};
+const k = 60;
+var r;
+const N = (r = class {
+  static on(n, i) {
+    r.events.on(n, i);
+  }
+  static off(n, i) {
+    r.events.off(n, i);
+  }
+  static once(n, i) {
+    r.events.once(n, i);
+  }
+  static checkCollisions(n, i) {
+    const p = i || Array.from(r.elements.keys()), f = n.getBoundingClientRect(), w = [];
+    for (const a of p)
+      if (a !== n) {
+        const m = a.getBoundingClientRect();
+        m.left <= f.right && m.right >= f.left && m.top <= f.bottom && m.bottom >= f.top && w.push(a);
+      }
+    w.length && r.onElementIntersection(n, w);
+  }
+  /**
+   * Returns `true` if the element is currently being positioned by the service
+   * and `false` otherwise.
+   */
+  static isPositioned(n) {
+    return r.elements.has(n);
+  }
+  /**
+   * Returns the options currently beinng used for positioning the element,
+   * if it is indeed being positioned by the service.
+   */
+  static getPositioningOptions(n) {
+    return r.elements.has(n) ? r.elements.get(n) : null;
+  }
+  /** PositioningService will start controlling the position of the given element. */
+  static position(n, i = {}) {
+    const p = {
+      ...V,
+      ...i
+    };
+    let f = n;
+    for (; f !== document.body; )
+      if (f = f.parentElement, f.classList.contains("sps-focused-task")) {
+        p.scrollParent = f, r.registeredScrollParents.has(f) || (r.registeredScrollParents.add(f), f.addEventListener("scroll", r.update));
+        break;
+      }
+    if (n.style.visibility = "hidden", r.elements.size === 0 && (window.addEventListener("resize", r.update), window.addEventListener("scroll", r.update)), !p.relativeTo)
+      throw new Error(
+        "You must provide an element for the relativeTo option to position an element."
+      );
+    r.elements.set(n, p), U(() => {
+      r.fixElementPosition(n), r.viewportObserver.observe(n), n.style.visibility = "", r.checkCollisions(n);
+    });
+  }
+  /** PositioningService will stop controlling the position of the given element. */
+  static release(n) {
+    if (r.elements.has(n)) {
+      r.clearStyles(n);
+      const i = r.elements.get(n);
+      i.scrollParent && (i.scrollParent.removeEventListener("scroll", r.update), r.registeredScrollParents.delete(i.scrollParent)), r.elements.delete(n), r.elements.size === 0 && (window.removeEventListener("resize", r.update), window.removeEventListener("scroll", r.update)), r.viewportObserver.unobserve(n);
+    }
+  }
+  static releaseAll() {
+    for (const n of r.elements.keys())
+      r.release(n);
+  }
+  /** PositioningService will refresh the positioning of the given element */
+  static refresh(n) {
+    r.elements.has(n) && (r.clearStyles(n), r.fixElementPosition(n), r.checkCollisions(n));
+  }
+  static refreshAll() {
+    for (const n of r.elements.keys())
+      r.refresh(n);
+  }
+  /** Update the positioning options of a currently positioned element */
+  static reposition(n, i) {
+    if (r.elements.has(n)) {
+      const p = r.elements.get(n);
+      r.elements.set(n, Object.assign(p, i)), r.refresh(n);
+    }
+  }
+  static onViewportIntersection(n) {
+    for (const i of n) {
+      const p = Object.keys(IntersectionObserverEntry.prototype).reduce(
+        (f, w) => ({
+          ...f,
+          [w]: i[w]
+        }),
+        {}
+      );
+      p.rootBounds = p.rootBounds || r.getRootBounds(), r.events.emit("viewportIntersection", Object.freeze(p));
+    }
+  }
+  static onElementIntersection(n, i) {
+    r.events.emit("elementIntersection", { target: n, intersectingWith: i });
+  }
+  static getRootBounds() {
+    const n = Math.max(document.documentElement.clientWidth, window.innerWidth || 0), i = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+    return {
+      x: 0,
+      y: k,
+      left: 0,
+      top: k,
+      right: n,
+      bottom: i,
+      height: i - k,
+      width: n
+    };
+  }
+  static clearStyles(n) {
+    Object.assign(n.style, {
+      position: "",
+      width: "",
+      top: "",
+      left: "",
+      right: "",
+      bottom: "",
+      visibility: "",
+      zIndex: ""
+    });
+  }
+  static fixElementPosition(n, i) {
+    if (!this.elements.has(n))
+      return;
+    const p = i || this.elements.get(n), f = this.getRootBounds(), w = n.getBoundingClientRect(), a = p.relativeTo.getBoundingClientRect(), { width: m } = p.useRelativeTargetWidth ? a : w;
+    Object.assign(n.style, {
+      minWidth: `${m}px`,
+      position: "fixed",
+      zIndex: p.zIndex || ""
+    });
+    let d, c;
+    const l = p.position.split(" "), v = p.offsets[0] || 0, T = p.offsets[1] || 0;
+    switch (d = 0, c = 0, l[0]) {
+      case "top":
+        d = a.top - w.height - v;
+        break;
+      case "left":
+        c = a.left - m - v;
+        break;
+      case "right":
+        c = a.right + v;
+        break;
+      case "bottom":
+        d = a.bottom + v;
+        break;
+      default:
+        throw new Error(`${p.position} is not a valid position`);
+    }
+    switch (l[1]) {
+      case "left":
+        c = a.left - T;
+        break;
+      case "top":
+        d = a.top - T;
+        break;
+      case "middle":
+        l[0] === "top" || l[0] === "bottom" ? c = a.left + a.width / 2 - m / 2 + T : (l[0] === "left" || l[0] === "right") && (d = a.top + a.height / 2 - w.height / 2 + T);
+        break;
+      case "bottom":
+        d = a.bottom - w.height + T;
+        break;
+      case "right":
+        c = a.right - m + T;
+        break;
+      default:
+        throw new Error(`${p.position} is not a valid position`);
+    }
+    const y = d + w.height, b = c + w.width, x = `${Math.round(d)}px`, h = `${Math.round(f.bottom - y)}px`, _ = `${Math.round(c)}px`, R = `${Math.round(f.right - b)}px`;
+    switch (p.anchor) {
+      case M.TOP_LEFT:
+        Object.assign(n.style, {
+          top: x,
+          bottom: "auto",
+          left: _,
+          right: "auto"
+        });
+        break;
+      case M.TOP_RIGHT:
+        Object.assign(n.style, {
+          top: x,
+          bottom: "auto",
+          left: "auto",
+          right: R
+        });
+        break;
+      case M.BOTTOM_LEFT:
+        Object.assign(n.style, {
+          top: "auto",
+          bottom: h,
+          left: _,
+          right: "auto"
+        });
+        break;
+      case M.BOTTOM_RIGHT:
+        Object.assign(n.style, {
+          top: "auto",
+          bottom: h,
+          left: "auto",
+          right: R
+        });
+        break;
+    }
+  }
+  static update(n) {
+    const i = r.elements.entries(), p = [];
+    for (const [f, w] of i)
+      (!n || n.target === document || n.target === w.scrollParent || n.target === window) && (r.fixElementPosition(f, w), r.checkCollisions(f, p), p.push(f));
+  }
+  /* eslint class-methods-use-this: "off" */
+  on(n, i) {
+    r.on(n, i);
+  }
+  off(n, i) {
+    r.off(n, i);
+  }
+  once(n, i) {
+    r.once(n, i);
+  }
+  isPositioned(n) {
+    return r.isPositioned(n);
+  }
+  getPositioningOptions(n) {
+    return r.getPositioningOptions(n);
+  }
+  position(n, i = {}) {
+    r.position(n, i);
+  }
+  release(n) {
+    r.release(n);
+  }
+  releaseAll() {
+    r.releaseAll();
+  }
+  refresh(n) {
+    r.refresh(n);
+  }
+  refreshAll() {
+    r.refreshAll();
+  }
+  reposition(n, i) {
+    r.reposition(n, i);
+  }
+}, r.elements = /* @__PURE__ */ new Map(), r.registeredScrollParents = /* @__PURE__ */ new Set(), r.events = new z.EventEmitter(), r.viewportObserver = new IntersectionObserver(
+  r.onViewportIntersection,
+  {
+    rootMargin: `-${k}px 0px 0px`,
+    threshold: 1
+  }
+), r);
+Y([
+  j
+], N, "update");
+let K = N;
+export {
+  V as DEFAULT_POSITIONING_OPTIONS,
+  S as Position,
+  M as PositionAnchor,
+  K as PositioningService
+};

package/lib/index.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/lib/position-anchor.enum.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/** Indicates which point on a positioned element it should be positioned by. */
+export declare enum PositionAnchor {
+    TOP_LEFT = "top left",
+    TOP_RIGHT = "top right",
+    BOTTOM_LEFT = "bottom left",
+    BOTTOM_RIGHT = "bottom right"
+}

package/lib/position.enum.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+/**
+ * These are the possibilities for the `position` option of
+ * `PositioningOptions` when using `relativeTo`.
+ */
+export declare enum Position {
+    TOP_LEFT = "top left",
+    TOP_MIDDLE = "top middle",
+    TOP_RIGHT = "top right",
+    RIGHT_TOP = "right top",
+    RIGHT_MIDDLE = "right middle",
+    RIGHT_BOTTOM = "right bottom",
+    BOTTOM_RIGHT = "bottom right",
+    BOTTOM_MIDDLE = "bottom middle",
+    BOTTOM_LEFT = "bottom left",
+    LEFT_BOTTOM = "left bottom",
+    LEFT_MIDDLE = "left middle",
+    LEFT_TOP = "left top"
+}

package/lib/positioning-options.interface.d.ts ADDED Viewed

@@ -0,0 +1,37 @@
+import { Position } from "./position.enum";
+import { PositionAnchor } from "./position-anchor.enum";
+/** Options that can be passed to `position()` method. */
+export interface PositioningOptions {
+    /** Indicates which point on the positioned element it should be positioned by. */
+    anchor?: PositionAnchor;
+    /**
+     * An array of pixel offsets. Each offset is applied
+     * to the corresponding term in `position`. So to continue the above example of
+     * `"bottom left"`, if the offsets are `[-7, 9]`, the element will be placed at
+     * the bottom of the `relativeTo` element minus 7 pixels, and at the left of it
+     * plus 9 pixels. (NB: The values will be converted to rem.)
+     */
+    offsets?: number[];
+    /**
+     * When using `relativeTo`, this describes the positioning relationship between
+     * the two elements. For example, if it's `"bottom left"`, the positioned element
+     * will be placed at the bottom left of the `relativeTo` element.
+     */
+    position?: Position;
+    /**
+     * Normally, an element positioned by the service will simply have its current
+     * position on the page locked in place. Instead you can have it positioned
+     * relative to another element.
+     */
+    relativeTo?: HTMLElement;
+    /**
+     * The width of the positioned element will be set to the width of the element
+     * provided to the relativeTo option, rather than its own natural width.
+     */
+    useRelativeTargetWidth?: boolean;
+    /** Specify a z-index override for the positioned element. */
+    zIndex?: number;
+    /** The element's ancestor that scrolls, if it's not the window itself */
+    scrollParent?: HTMLElement;
+}
+export declare const DEFAULT_POSITIONING_OPTIONS: PositioningOptions;

package/lib/positioning.service.d.ts ADDED Viewed

@@ -0,0 +1,55 @@
+import "intersection-observer";
+import type { PositioningOptions } from "./positioning-options.interface";
+/**
+ * This class follows a singleton pattern where you can create an instance by calling
+ * `new PositioningService()` if you wish, but all instance methods pass through to
+ * static methods, so there's really only one set of elements being positioned that's
+ * shared between all instances and static usages of PositioningService.
+ */
+export declare class PositioningService {
+    static elements: Map<HTMLElement, PositioningOptions>;
+    private static registeredScrollParents;
+    private static events;
+    private static viewportObserver;
+    static on(eventName: any, handler: any): void;
+    static off(eventName: any, handler: any): void;
+    static once(eventName: any, handler: any): void;
+    static checkCollisions(element: HTMLElement, otherElements?: HTMLElement[]): void;
+    /**
+     * Returns `true` if the element is currently being positioned by the service
+     * and `false` otherwise.
+     */
+    static isPositioned(element: HTMLElement): boolean;
+    /**
+     * Returns the options currently beinng used for positioning the element,
+     * if it is indeed being positioned by the service.
+     */
+    static getPositioningOptions(element: HTMLElement): PositioningOptions | null;
+    /** PositioningService will start controlling the position of the given element. */
+    static position(element: HTMLElement, options?: PositioningOptions): void;
+    /** PositioningService will stop controlling the position of the given element. */
+    static release(element: HTMLElement): void;
+    static releaseAll(): void;
+    /** PositioningService will refresh the positioning of the given element */
+    static refresh(element: HTMLElement): void;
+    static refreshAll(): void;
+    /** Update the positioning options of a currently positioned element */
+    static reposition(element: HTMLElement, newOptions: PositioningOptions): void;
+    private static onViewportIntersection;
+    private static onElementIntersection;
+    private static getRootBounds;
+    private static clearStyles;
+    private static fixElementPosition;
+    private static update;
+    on(eventName: any, handler: any): void;
+    off(eventName: any, handler: any): void;
+    once(eventName: any, handler: any): void;
+    isPositioned(element: HTMLElement): boolean;
+    getPositioningOptions(element: HTMLElement): PositioningOptions | null;
+    position(element: HTMLElement, options?: PositioningOptions): void;
+    release(element: HTMLElement): void;
+    releaseAll(): void;
+    refresh(element: HTMLElement): void;
+    refreshAll(): void;
+    reposition(element: HTMLElement, newOptions: PositioningOptions): void;
+}

package/package.json ADDED Viewed

@@ -0,0 +1,41 @@
+{
+  "name": "@spscommerce/positioning",
+  "description": "Service for positioning dropdown/popup elements.",
+  "version": "0.0.0-20260319-8230915ce",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/positioning",
+  "homepage": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/positioning#readme",
+  "type": "module",
+  "module": "./lib/index.js",
+  "main": "./lib/index.umd.cjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    "types": "./lib/index.d.ts",
+    "require": "./lib/index.umd.cjs",
+    "import": "./lib/index.js",
+    "default": "./lib/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@spscommerce/utils": "^7.0.0 || ^8.0.0"
+  },
+  "devDependencies": {
+    "@spscommerce/utils": "^7.0.0",
+    "raf-stub": "^3.0.0"
+  },
+  "dependencies": {
+    "eventemitter3": "^3.1.0",
+    "intersection-observer": "0.12.0"
+  },
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:types",
+    "build:js": "vite build",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
+    "watch": "vite build --watch",
+    "clean": "git clean -fdX",
+    "pub": "node ../../scripts/publish-package.mjs"
+  }
+}

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,13 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "baseUrl": "tsconfig",
+        "rootDir": "src/",
+        "outDir": "./dist/out-tsc",
+        "target": "es5",
+        "esModuleInterop": true,
+        "declaration": true
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "lib"]
+}

package/vite.config.mjs ADDED Viewed

@@ -0,0 +1,20 @@
+import path from "node:path";
+import { defineConfig } from "vite";
+import pkg from "./package.json";
+export default defineConfig({
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      name: "Positioning",
+      fileName: "index",
+    },
+    outDir: path.resolve(__dirname, "./lib"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+    },
+  },
+});