@m3e/web 2.1.3 → 2.2.0

package/dist/core-anchoring.js

@@ -6,7 +6,7 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from 'tslib';
 import { LitElement, html, unsafeCSS, css } from 'lit';
 import { property } from 'lit/decorators.js';
-import { SuppressInitialAnimation, AttachInternals, ScrollController, DesignToken, customElement, setCustomState } from '@m3e/web/core';
+import { SuppressInitialAnimation, AttachInternals, ScrollController, ResizeController, DesignToken, customElement, setCustomState } from '@m3e/web/core';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
 
 /**
@@ -787,6 +787,74 @@ const shift$1 = function (options) {
     }
   };
 };
+/**
+ * Built-in `limiter` that will stop `shift()` at a certain point.
+ */
+const limitShift$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    options,
+    fn(state) {
+      const {
+        x,
+        y,
+        placement,
+        rects,
+        middlewareData
+      } = state;
+      const {
+        offset = 0,
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = true
+      } = evaluate(options, state);
+      const coords = {
+        x,
+        y
+      };
+      const crossAxis = getSideAxis(placement);
+      const mainAxis = getOppositeAxis(crossAxis);
+      let mainAxisCoord = coords[mainAxis];
+      let crossAxisCoord = coords[crossAxis];
+      const rawOffset = evaluate(offset, state);
+      const computedOffset = typeof rawOffset === 'number' ? {
+        mainAxis: rawOffset,
+        crossAxis: 0
+      } : {
+        mainAxis: 0,
+        crossAxis: 0,
+        ...rawOffset
+      };
+      if (checkMainAxis) {
+        const len = mainAxis === 'y' ? 'height' : 'width';
+        const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
+        const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
+        if (mainAxisCoord < limitMin) {
+          mainAxisCoord = limitMin;
+        } else if (mainAxisCoord > limitMax) {
+          mainAxisCoord = limitMax;
+        }
+      }
+      if (checkCrossAxis) {
+        var _middlewareData$offse, _middlewareData$offse2;
+        const len = mainAxis === 'y' ? 'width' : 'height';
+        const isOriginSide = originSides.has(getSide(placement));
+        const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
+        const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
+        if (crossAxisCoord < limitMin) {
+          crossAxisCoord = limitMin;
+        } else if (crossAxisCoord > limitMax) {
+          crossAxisCoord = limitMax;
+        }
+      }
+      return {
+        [mainAxis]: mainAxisCoord,
+        [crossAxis]: crossAxisCoord
+      };
+    }
+  };
+};
 
 function hasWindow() {
   return typeof window !== 'undefined';
@@ -1659,6 +1727,11 @@ const flip = flip$1;
  */
 const inline = inline$1;
 
+/**
+ * Built-in `limiter` that will stop `shift()` at a certain point.
+ */
+const limitShift = limitShift$1;
+
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
  * next to a given reference element.
@@ -1743,7 +1816,11 @@ async function positionAnchor(target, anchor, options, update) {
       }));
     }
     if (options.shift) {
-      middleware.push(shift());
+      middleware.push(shift({
+        mainAxis: options.shift === "main" || options.shift === "both",
+        crossAxis: options.shift === "cross" || options.shift === "both",
+        limiter: limitShift()
+      }));
     }
     if (options.offset && !isNaN(options.offset)) {
       middleware.push(offset(options.offset));
@@ -1762,13 +1839,15 @@ async function positionAnchor(target, anchor, options, update) {
   return autoUpdate(anchor, target, async () => await computeAnchorPosition());
 }
 
-var _M3eFloatingPanelElement_instances, _M3eFloatingPanelElement_trigger, _M3eFloatingPanelElement_anchor, _M3eFloatingPanelElement_anchorCleanup, _M3eFloatingPanelElement_documentClickHandler, _M3eFloatingPanelElement_toggleHandler, _M3eFloatingPanelElement_scrollController, _M3eFloatingPanelElement_handleDocumentClick;
+var _M3eFloatingPanelElement_instances, _M3eFloatingPanelElement_trigger, _M3eFloatingPanelElement_anchor, _M3eFloatingPanelElement_anchorCleanup, _M3eFloatingPanelElement_documentClickHandler, _M3eFloatingPanelElement_toggleHandler, _M3eFloatingPanelElement_scrollController, _M3eFloatingPanelElement_anchorResizeController, _M3eFloatingPanelElement_handleDocumentClick;
 /**
  * A lightweight, generic floating surface used to present content above the page.
  *
  * @tag m3e-floating-panel
  *
  * @attr scroll-strategy - The strategy that controls how the panel behaves when its trigger scrolls.
+ * @attr fit-anchor-width - Whether the panel's width should match its anchor's width.
+ * @attr anchor-offset - The logical margin, in pixels, between the panel and its anchor.
  *
  * @slot - Renders the contents of the panel.
  *
@@ -1808,8 +1887,30 @@ let M3eFloatingPanelElement = class M3eFloatingPanelElement extends SuppressInit
       target: null,
       callback: () => this.hide(false)
     }));
-    /** The strategy that controls how the panel behaves when its trigger scrolls. */
+    /** @private */
+    _M3eFloatingPanelElement_anchorResizeController.set(this, new ResizeController(this, {
+      target: null,
+      callback: () => {
+        if (__classPrivateFieldGet(this, _M3eFloatingPanelElement_anchor, "f") && this.fitAnchorWidth) {
+          this.style.minWidth = `${__classPrivateFieldGet(this, _M3eFloatingPanelElement_anchor, "f").clientWidth}px`;
+        }
+      }
+    }));
+    /**
+     * The strategy that controls how the panel behaves when its trigger scrolls.
+     * @default "hide"
+     */
     this.scrollStrategy = "hide";
+    /**
+     * Whether the panel's width should match its anchor's width.
+     * @default false
+     */
+    this.fitAnchorWidth = false;
+    /**
+     * The logical margin, in pixels, between the panel and its anchor.
+     * @default 0
+     */
+    this.anchorOffset = 0;
   }
   /** Whether the panel is open. */
   get isOpen() {
@@ -1835,17 +1936,28 @@ let M3eFloatingPanelElement = class M3eFloatingPanelElement extends SuppressInit
   /**
    * Opens the panel.
    * @param {HTMLElement} trigger The element that triggered the panel.
-   * @param {HTMLElement | undefined} anchor The element used to position the panel.
+   * @param {HTMLElement | null | undefined} anchor The element used to position the panel.
    * @returns {Promise<void>} A `Promise` that resolves when the panel is opened.
    */
   async show(trigger, anchor) {
     if (__classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f") && __classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f") !== trigger) {
       this.hide();
     }
-    __classPrivateFieldSet(this, _M3eFloatingPanelElement_anchorCleanup, await positionAnchor(this, anchor ?? trigger, {
+    __classPrivateFieldSet(this, _M3eFloatingPanelElement_trigger, trigger, "f");
+    __classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f").ariaExpanded = "true";
+    __classPrivateFieldSet(this, _M3eFloatingPanelElement_anchor, anchor ?? trigger, "f");
+    if (this.scrollStrategy === "hide") {
+      __classPrivateFieldGet(this, _M3eFloatingPanelElement_scrollController, "f").observe(__classPrivateFieldGet(this, _M3eFloatingPanelElement_anchor, "f"));
+    }
+    if (this.fitAnchorWidth) {
+      __classPrivateFieldGet(this, _M3eFloatingPanelElement_anchorResizeController, "f").observe(__classPrivateFieldGet(this, _M3eFloatingPanelElement_anchor, "f"));
+      this.style.minWidth = `${__classPrivateFieldGet(this, _M3eFloatingPanelElement_anchor, "f").clientWidth}px`;
+    }
+    __classPrivateFieldSet(this, _M3eFloatingPanelElement_anchorCleanup, await positionAnchor(this, __classPrivateFieldGet(this, _M3eFloatingPanelElement_anchor, "f"), {
       position: "bottom-start",
       inline: true,
-      flip: true
+      flip: true,
+      offset: this.anchorOffset > 0 ? this.anchorOffset : undefined
     }, (x, y, position) => {
       setCustomState(this, "-top", position.includes("top"));
       setCustomState(this, "-bottom", position.includes("bottom"));
@@ -1859,12 +1971,6 @@ let M3eFloatingPanelElement = class M3eFloatingPanelElement extends SuppressInit
       this.style.top = `${y}px`;
     }), "f");
     this.showPopover();
-    __classPrivateFieldSet(this, _M3eFloatingPanelElement_trigger, trigger, "f");
-    __classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f").ariaExpanded = "true";
-    __classPrivateFieldSet(this, _M3eFloatingPanelElement_anchor, anchor, "f");
-    if (this.scrollStrategy === "hide") {
-      __classPrivateFieldGet(this, _M3eFloatingPanelElement_scrollController, "f").observe(__classPrivateFieldGet(this, _M3eFloatingPanelElement_anchor, "f") ?? __classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f"));
-    }
   }
   /**
    * Hides the panel.
@@ -1877,7 +1983,12 @@ let M3eFloatingPanelElement = class M3eFloatingPanelElement extends SuppressInit
       if (restoreFocus) {
         __classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f").focus();
       }
-      __classPrivateFieldGet(this, _M3eFloatingPanelElement_scrollController, "f").unobserve(__classPrivateFieldGet(this, _M3eFloatingPanelElement_anchor, "f") ?? __classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f"));
+      if (__classPrivateFieldGet(this, _M3eFloatingPanelElement_anchor, "f")) {
+        __classPrivateFieldGet(this, _M3eFloatingPanelElement_scrollController, "f").unobserve(__classPrivateFieldGet(this, _M3eFloatingPanelElement_anchor, "f"));
+        if (this.fitAnchorWidth) {
+          __classPrivateFieldGet(this, _M3eFloatingPanelElement_anchorResizeController, "f").unobserve(__classPrivateFieldGet(this, _M3eFloatingPanelElement_anchor, "f"));
+        }
+      }
       __classPrivateFieldSet(this, _M3eFloatingPanelElement_trigger, undefined, "f");
       __classPrivateFieldSet(this, _M3eFloatingPanelElement_anchor, undefined, "f");
     }
@@ -1906,9 +2017,10 @@ _M3eFloatingPanelElement_anchorCleanup = new WeakMap();
 _M3eFloatingPanelElement_documentClickHandler = new WeakMap();
 _M3eFloatingPanelElement_toggleHandler = new WeakMap();
 _M3eFloatingPanelElement_scrollController = new WeakMap();
+_M3eFloatingPanelElement_anchorResizeController = new WeakMap();
 _M3eFloatingPanelElement_instances = new WeakSet();
 _M3eFloatingPanelElement_handleDocumentClick = function _M3eFloatingPanelElement_handleDocumentClick(e) {
-  if (this.isOpen && !e.composedPath().some(x => x === this || x === __classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f") || x === __classPrivateFieldGet(this, _M3eFloatingPanelElement_anchor, "f"))) {
+  if (this.isOpen && !e.composedPath().some(x => x === this || x === __classPrivateFieldGet(this, _M3eFloatingPanelElement_anchor, "f"))) {
     this.hide();
   }
 };
@@ -1920,6 +2032,14 @@ M3eFloatingPanelElement.styles = css`:host { position: absolute; flex-direction:
 __decorate([property({
   attribute: "scroll-strategy"
 })], M3eFloatingPanelElement.prototype, "scrollStrategy", void 0);
+__decorate([property({
+  attribute: "fit-anchor-width",
+  type: Boolean
+})], M3eFloatingPanelElement.prototype, "fitAnchorWidth", void 0);
+__decorate([property({
+  attribute: "anchor-offset",
+  type: Number
+})], M3eFloatingPanelElement.prototype, "anchorOffset", void 0);
 M3eFloatingPanelElement = __decorate([customElement("m3e-floating-panel")], M3eFloatingPanelElement);
 
 export { M3eFloatingPanelElement, positionAnchor };