npm - bromcom-ui-next - Versions diffs - 0.1.5 → 0.1.7 - Mend

bromcom-ui-next 0.1.5 → 0.1.7

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 (396) hide show

package/dist/components/{p-613ee92d.js → p-9594cebb.js} RENAMED Viewed

@@ -1,5 +1,3 @@
-import { p as proxyCustomElement, H, h } from './p-13582168.js';
 /**
  * Custom positioning reference element.
  * @see https://floating-ui.com/docs/virtual-elements
@@ -11,6 +9,7 @@ const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, sid
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
+const floor = Math.floor;
 const createCoords = v => ({
   x: v,
   y: v
@@ -353,7 +352,7 @@ async function detectOverflow(state, options) {
  * appears centered to the reference element.
  * @see https://floating-ui.com/docs/arrow
  */
-const arrow = options => ({
+const arrow$1 = options => ({
   name: 'arrow',
   options,
   async fn(state) {
@@ -604,16 +603,21 @@ const flip$1 = function (options) {
         const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
         const nextPlacement = placements[nextIndex];
         if (nextPlacement) {
-          // Try next placement and re-run the lifecycle.
-          return {
-            data: {
-              index: nextIndex,
-              overflows: overflowsData
-            },
-            reset: {
-              placement: nextPlacement
-            }
-          };
+          var _overflowsData$;
+          const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
+          const hasInitialMainAxisOverflow = ((_overflowsData$ = overflowsData[0]) == null ? void 0 : _overflowsData$.overflows[0]) > 0;
+          if (!ignoreCrossAxisOverflow || hasInitialMainAxisOverflow) {
+            // Try next placement and re-run the lifecycle.
+            return {
+              data: {
+                index: nextIndex,
+                overflows: overflowsData
+              },
+              reset: {
+                placement: nextPlacement
+              }
+            };
+          }
         }
         // First, find the candidates that fit on the mainAxis side of overflow,
@@ -1695,6 +1699,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     scrollTop: 0
   };
   const offsets = createCoords(0);
+  // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
+  // Firefox with layout.scrollbar.side = 3 in about:config to test this.
+  function setLeftRTLScrollbarOffset() {
+    offsets.x = getWindowScrollBarX(documentElement);
+  }
   if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
@@ -1704,11 +1714,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
       offsets.x = offsetRect.x + offsetParent.clientLeft;
       offsets.y = offsetRect.y + offsetParent.clientTop;
     } else if (documentElement) {
-      // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
-      // Firefox with layout.scrollbar.side = 3 in about:config to test this.
-      offsets.x = getWindowScrollBarX(documentElement);
+      setLeftRTLScrollbarOffset();
     }
   }
+  if (isFixed && !isOffsetParentAnElement && documentElement) {
+    setLeftRTLScrollbarOffset();
+  }
   const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
   const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
@@ -1802,6 +1813,177 @@ const platform = {
   isRTL
 };
+function rectsAreEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+// https://samthor.au/2021/observing-dom/
+function observeMove(element, onMove) {
+  let io = null;
+  let timeoutId;
+  const root = getDocumentElement(element);
+  function cleanup() {
+    var _io;
+    clearTimeout(timeoutId);
+    (_io = io) == null || _io.disconnect();
+    io = null;
+  }
+  function refresh(skip, threshold) {
+    if (skip === void 0) {
+      skip = false;
+    }
+    if (threshold === void 0) {
+      threshold = 1;
+    }
+    cleanup();
+    const elementRectForRootMargin = element.getBoundingClientRect();
+    const {
+      left,
+      top,
+      width,
+      height
+    } = elementRectForRootMargin;
+    if (!skip) {
+      onMove();
+    }
+    if (!width || !height) {
+      return;
+    }
+    const insetTop = floor(top);
+    const insetRight = floor(root.clientWidth - (left + width));
+    const insetBottom = floor(root.clientHeight - (top + height));
+    const insetLeft = floor(left);
+    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+    const options = {
+      rootMargin,
+      threshold: max(0, min(1, threshold)) || 1
+    };
+    let isFirstUpdate = true;
+    function handleObserve(entries) {
+      const ratio = entries[0].intersectionRatio;
+      if (ratio !== threshold) {
+        if (!isFirstUpdate) {
+          return refresh();
+        }
+        if (!ratio) {
+          // If the reference is clipped, the ratio is 0. Throttle the refresh
+          // to prevent an infinite loop of updates.
+          timeoutId = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 1000);
+        } else {
+          refresh(false, ratio);
+        }
+      }
+      if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+        // It's possible that even though the ratio is reported as 1, the
+        // element is not actually fully within the IntersectionObserver's root
+        // area anymore. This can happen under performance constraints. This may
+        // be a bug in the browser's IntersectionObserver implementation. To
+        // work around this, we compare the element's bounding rect now with
+        // what it was at the time we created the IntersectionObserver. If they
+        // are not equal then the element moved, so we refresh.
+        refresh();
+      }
+      isFirstUpdate = false;
+    }
+    // Older browsers don't support a `document` as the root and will throw an
+    // error.
+    try {
+      io = new IntersectionObserver(handleObserve, {
+        ...options,
+        // Handle <iframe>s
+        root: root.ownerDocument
+      });
+    } catch (_e) {
+      io = new IntersectionObserver(handleObserve, options);
+    }
+    io.observe(element);
+  }
+  refresh(true);
+  return cleanup;
+}
+/**
+ * Automatically updates the position of the floating element when necessary.
+ * Should only be called when the floating element is mounted on the DOM or
+ * visible on the screen.
+ * @returns cleanup function that should be invoked when the floating element is
+ * removed from the DOM or hidden from the screen.
+ * @see https://floating-ui.com/docs/autoUpdate
+ */
+function autoUpdate(reference, floating, update, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    ancestorScroll = true,
+    ancestorResize = true,
+    elementResize = typeof ResizeObserver === 'function',
+    layoutShift = typeof IntersectionObserver === 'function',
+    animationFrame = false
+  } = options;
+  const referenceEl = unwrapElement(reference);
+  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
+  ancestors.forEach(ancestor => {
+    ancestorScroll && ancestor.addEventListener('scroll', update, {
+      passive: true
+    });
+    ancestorResize && ancestor.addEventListener('resize', update);
+  });
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  let reobserveFrame = -1;
+  let resizeObserver = null;
+  if (elementResize) {
+    resizeObserver = new ResizeObserver(_ref => {
+      let [firstEntry] = _ref;
+      if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+        // Prevent update loops when using the `size` middleware.
+        // https://github.com/floating-ui/floating-ui/issues/1740
+        resizeObserver.unobserve(floating);
+        cancelAnimationFrame(reobserveFrame);
+        reobserveFrame = requestAnimationFrame(() => {
+          var _resizeObserver;
+          (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
+        });
+      }
+      update();
+    });
+    if (referenceEl && !animationFrame) {
+      resizeObserver.observe(referenceEl);
+    }
+    resizeObserver.observe(floating);
+  }
+  let frameId;
+  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+  if (animationFrame) {
+    frameLoop();
+  }
+  function frameLoop() {
+    const nextRefRect = getBoundingClientRect(reference);
+    if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
+      update();
+    }
+    prevRefRect = nextRefRect;
+    frameId = requestAnimationFrame(frameLoop);
+  }
+  update();
+  return () => {
+    var _resizeObserver2;
+    ancestors.forEach(ancestor => {
+      ancestorScroll && ancestor.removeEventListener('scroll', update);
+      ancestorResize && ancestor.removeEventListener('resize', update);
+    });
+    cleanupIo == null || cleanupIo();
+    (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
+    resizeObserver = null;
+    if (animationFrame) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
 /**
  * Modifies the placement by translating the floating element along the
  * specified axes.
@@ -1854,7 +2036,7 @@ hide;
  * appears centered to the reference element.
  * @see https://floating-ui.com/docs/arrow
  */
-arrow;
+const arrow = arrow$1;
 /**
  * Provides improved positioning for inline reference elements that can span
@@ -1891,107 +2073,6 @@ const computePosition = (reference, floating, options) => {
   });
 };
-const linkedCss = ".contents{display:contents}:host{display:contents;width:100%}.static{position:static}.flex{display:flex}.max-h-\\[--dropdown-box-max-height\\]{max-height:var(--dropdown-box-max-height)}.w-full{width:100%}.min-w-\\[--dropdown-box-min-weight\\]{min-width:var(--dropdown-box-min-weight)}.max-w-\\[--dropdown-box-max-weight\\]{max-width:var(--dropdown-box-max-weight)}.flex-col{flex-direction:column}.items-center{align-items:center}.rounded-lg{border-radius:.5rem}.bg-\\[--dropdown-box-background-color\\]{background-color:var(--dropdown-box-background-color)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}.absolute{position:absolute}.z-\\[1000\\]{z-index:1000}.block{display:block}.min-w-max{min-width:max-content}";
-const BcmLinkedStyle0 = linkedCss;
-const BcmLinked = /*@__PURE__*/ proxyCustomElement(class BcmLinked extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.isVisible = false;
-    }
-    componentDidLoad() {
-        requestAnimationFrame(() => {
-            this.targetEl = this.targetElement || (this.targetId ? document.getElementById(this.targetId) : null);
-            this.floatingEl = this.host.shadowRoot.querySelector('.floating-content');
-            if (this.targetEl) {
-                this.targetEl.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    this.toggle();
-                });
-                const handleClickOutside = (e) => {
-                    var _a, _b;
-                    const target = e.target;
-                    if (!((_a = this.floatingEl) === null || _a === void 0 ? void 0 : _a.contains(target)) &&
-                        !((_b = this.targetEl) === null || _b === void 0 ? void 0 : _b.contains(target)) &&
-                        !this.host.contains(target)) {
-                        this.hide();
-                    }
-                };
-                document.addEventListener('click', handleClickOutside);
-                this.host['_handleClickOutside'] = handleClickOutside;
-            }
-        });
-    }
-    async updatePosition() {
-        if (!this.targetEl || !this.floatingEl)
-            return;
-        const { x, y } = await computePosition(this.targetEl, this.floatingEl, {
-            placement: 'bottom-start',
-            middleware: [
-                offset(2),
-                flip({
-                    fallbackPlacements: ['top-start'],
-                }),
-                shift({ padding: 8 }),
-            ],
-        });
-        Object.assign(this.floatingEl.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-        });
-    }
-    show() {
-        this.isVisible = true;
-        this.updatePosition();
-    }
-    hide() {
-        this.isVisible = false;
-    }
-    toggle() {
-        this.isVisible = !this.isVisible;
-        if (this.isVisible) {
-            this.updatePosition();
-        }
-    }
-    render() {
-        return (h("div", { key: 'e720bc0f9d7ed637a8c8150474dd30f1926dbe91', class: "floating-content z-[1000] flex min-w-max", style: {
-                display: this.isVisible ? 'block' : 'none',
-                position: 'absolute',
-                top: "0px",
-                left: "0px",
-            } }, h("slot", { key: '5d01d04876f4f09e9977e3b1f3d02394fc57163f' })));
-    }
-    disconnectedCallback() {
-        if (this.targetEl) {
-            this.targetEl.removeEventListener('mouseenter', () => this.show());
-            this.targetEl.removeEventListener('mouseleave', () => this.hide());
-            this.targetEl.removeEventListener('click', () => this.toggle());
-        }
-    }
-    get host() { return this; }
-    static get style() { return BcmLinkedStyle0; }
-}, [1, "bcm-linked", {
-        "targetId": [513, "target-id"],
-        "targetElement": [16],
-        "isVisible": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bcm-linked"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bcm-linked":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, BcmLinked);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-export { BcmLinked as B, defineCustomElement as d };
+export { arrow as a, autoUpdate as b, computePosition as c, flip as f, offset as o, shift as s };
-//# sourceMappingURL=p-613ee92d.js.map
+//# sourceMappingURL=p-9594cebb.js.map