@tonconnect/ui 2.3.0-beta.0 → 2.3.0-beta.1

package/lib/index.mjs

@@ -90,7 +90,7 @@ function createRoot(fn, detachedOwner) {
     owned: null,
     cleanups: null,
     context: null,
-    owner: detachedOwner === void 0 ? owner : detachedOwner
+    owner: detachedOwner || owner
   }, updateFn = unowned ? fn : () => fn(() => untrack(() => cleanNode(root)));
   Owner = root;
   Listener = null;
@@ -180,9 +180,9 @@ function createResource(pSource, pFetcher, pOptions) {
   }
   function completeLoad(v, err) {
     runUpdates(() => {
-      if (err === void 0)
+      if (!err)
         setValue(() => v);
-      setState(err !== void 0 ? "errored" : "ready");
+      setState(err ? "errored" : "ready");
       setError(err);
       for (const c2 of contexts.keys())
         c2.decrement();
@@ -191,7 +191,7 @@ function createResource(pSource, pFetcher, pOptions) {
   }
   function read() {
     const c2 = SuspenseContext, v = value(), err = error();
-    if (err !== void 0 && !pr)
+    if (err && !pr)
       throw err;
     if (Listener && !Listener.user && c2) {
       createComputed(() => {
@@ -271,8 +271,6 @@ function batch(fn) {
   return runUpdates(fn, false);
 }
 function untrack(fn) {
-  if (Listener === null)
-    return fn();
   const listener = Listener;
   Listener = null;
   try {
@@ -507,9 +505,8 @@ function runUpdates(fn, init) {
     completeUpdates(wait);
     return res;
   } catch (err) {
-    if (!wait)
+    if (!Updates)
       Effects = null;
-    Updates = null;
     handleError(err);
   }
 }
@@ -7308,18 +7305,18 @@ const NotificationsStyled = styled(Notifications)`
         margin-top: 20px;
     }
 `;
-function getSide(placement) {
-  return placement.split("-")[0];
-}
 function getAlignment(placement) {
   return placement.split("-")[1];
 }
-function getMainAxisFromPlacement(placement) {
-  return ["top", "bottom"].includes(getSide(placement)) ? "x" : "y";
-}
 function getLengthFromAxis(axis) {
   return axis === "y" ? "height" : "width";
 }
+function getSide(placement) {
+  return placement.split("-")[0];
+}
+function getMainAxisFromPlacement(placement) {
+  return ["top", "bottom"].includes(getSide(placement)) ? "x" : "y";
+}
 function computeCoordsFromPlacement(_ref, placement, rtl) {
   let {
     reference,
@@ -7559,14 +7556,14 @@ const max$1 = Math.max;
 function within(min$1$1, value, max$1$1) {
   return max$1(min$1$1, min$1(value, max$1$1));
 }
-const hash$1 = {
+const oppositeSideMap = {
   left: "right",
   right: "left",
   bottom: "top",
   top: "bottom"
 };
 function getOppositePlacement(placement) {
-  return placement.replace(/left|right|bottom|top/g, (matched) => hash$1[matched]);
+  return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
 }
 function getAlignmentSides(placement, rects, rtl) {
   if (rtl === void 0) {
@@ -7584,17 +7581,46 @@ function getAlignmentSides(placement, rects, rtl) {
     cross: getOppositePlacement(mainAlignmentSide)
   };
 }
-const hash = {
+const oppositeAlignmentMap = {
   start: "end",
   end: "start"
 };
 function getOppositeAlignmentPlacement(placement) {
-  return placement.replace(/start|end/g, (matched) => hash[matched]);
+  return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
 }
 function getExpandedPlacements(placement) {
   const oppositePlacement = getOppositePlacement(placement);
   return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
 }
+function getSideList(side, isStart, rtl) {
+  const lr = ["left", "right"];
+  const rl = ["right", "left"];
+  const tb = ["top", "bottom"];
+  const bt = ["bottom", "top"];
+  switch (side) {
+    case "top":
+    case "bottom":
+      if (rtl)
+        return isStart ? rl : lr;
+      return isStart ? lr : rl;
+    case "left":
+    case "right":
+      return isStart ? tb : bt;
+    default:
+      return [];
+  }
+}
+function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+  const alignment = getAlignment(placement);
+  let list = getSideList(getSide(placement), direction === "start", rtl);
+  if (alignment) {
+    list = list.map((side) => side + "-" + alignment);
+    if (flipAlignment) {
+      list = list.concat(list.map(getOppositeAlignmentPlacement));
+    }
+  }
+  return list;
+}
 const flip = function(options) {
   if (options === void 0) {
     options = {};
@@ -7618,17 +7644,23 @@ const flip = function(options) {
           crossAxis: checkCrossAxis = true,
           fallbackPlacements: specifiedFallbackPlacements,
           fallbackStrategy = "bestFit",
+          fallbackAxisSideDirection = "none",
           flipAlignment = true
         } = _a3, detectOverflowOptions = __objRest(_a3, [
           "mainAxis",
           "crossAxis",
           "fallbackPlacements",
           "fallbackStrategy",
+          "fallbackAxisSideDirection",
           "flipAlignment"
         ]);
         const side = getSide(placement);
-        const isBasePlacement = side === initialPlacement;
+        const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+        const rtl = yield platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating);
         const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+        if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== "none") {
+          fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
+        }
         const placements = [initialPlacement, ...fallbackPlacements];
         const overflow = yield detectOverflow(middlewareArguments, detectOverflowOptions);
         const overflows = [];
@@ -7640,7 +7672,7 @@ const flip = function(options) {
           const {
             main,
             cross
-          } = getAlignmentSides(placement, rects, yield platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
+          } = getAlignmentSides(placement, rects, rtl);
           overflows.push(overflow[main], overflow[cross]);
         }
         overflowsData = [...overflowsData, {
@@ -7648,8 +7680,8 @@ const flip = function(options) {
           overflows
         }];
         if (!overflows.every((side2) => side2 <= 0)) {
-          var _middlewareData$flip$, _middlewareData$flip2;
-          const nextIndex = ((_middlewareData$flip$ = (_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) != null ? _middlewareData$flip$ : 0) + 1;
+          var _middlewareData$flip2;
+          const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
           const nextPlacement = placements[nextIndex];
           if (nextPlacement) {
             return {
@@ -7808,7 +7840,7 @@ function isOverflowElement(element) {
     overflowY,
     display
   } = getComputedStyle$1(element);
-  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display);
 }
 function isTableElement(element) {
   return ["table", "td", "th"].includes(getNodeName(element));
@@ -7833,28 +7865,43 @@ function isLastTraversableNode(node) {
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
+function getCssDimensions(element) {
+  const css = getComputedStyle$1(element);
+  let width = parseFloat(css.width);
+  let height = parseFloat(css.height);
+  const offsetWidth = element.offsetWidth;
+  const offsetHeight = element.offsetHeight;
+  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+  if (shouldFallback) {
+    width = offsetWidth;
+    height = offsetHeight;
+  }
+  return {
+    width,
+    height,
+    fallback: shouldFallback
+  };
+}
+function unwrapElement(element) {
+  return !isElement(element) ? element.contextElement : element;
+}
 const FALLBACK_SCALE = {
   x: 1,
   y: 1
 };
 function getScale(element) {
-  const domElement = !isElement(element) && element.contextElement ? element.contextElement : isElement(element) ? element : null;
-  if (!domElement) {
+  const domElement = unwrapElement(element);
+  if (!isHTMLElement(domElement)) {
     return FALLBACK_SCALE;
   }
   const rect = domElement.getBoundingClientRect();
-  const css = getComputedStyle$1(domElement);
-  if (css.boxSizing !== "border-box") {
-    if (!isHTMLElement(domElement)) {
-      return FALLBACK_SCALE;
-    }
-    return {
-      x: domElement.offsetWidth > 0 ? round(rect.width) / domElement.offsetWidth || 1 : 1,
-      y: domElement.offsetHeight > 0 ? round(rect.height) / domElement.offsetHeight || 1 : 1
-    };
-  }
-  let x = rect.width / parseFloat(css.width);
-  let y = rect.height / parseFloat(css.height);
+  const {
+    width,
+    height,
+    fallback
+  } = getCssDimensions(domElement);
+  let x = (fallback ? round(rect.width) : rect.width) / width;
+  let y = (fallback ? round(rect.height) : rect.height) / height;
   if (!x || !Number.isFinite(x)) {
     x = 1;
   }
@@ -7867,7 +7914,7 @@ function getScale(element) {
   };
 }
 function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
-  var _win$visualViewport$o, _win$visualViewport, _win$visualViewport$o2, _win$visualViewport2;
+  var _win$visualViewport, _win$visualViewport2;
   if (includeScale === void 0) {
     includeScale = false;
   }
@@ -7875,6 +7922,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     isFixedStrategy = false;
   }
   const clientRect = element.getBoundingClientRect();
+  const domElement = unwrapElement(element);
   let scale = FALLBACK_SCALE;
   if (includeScale) {
     if (offsetParent) {
@@ -7885,12 +7933,31 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       scale = getScale(element);
     }
   }
-  const win = isElement(element) ? getWindow(element) : window;
+  const win = domElement ? getWindow(domElement) : window;
   const addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
-  const x = (clientRect.left + (addVisualOffsets ? (_win$visualViewport$o = (_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) != null ? _win$visualViewport$o : 0 : 0)) / scale.x;
-  const y = (clientRect.top + (addVisualOffsets ? (_win$visualViewport$o2 = (_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) != null ? _win$visualViewport$o2 : 0 : 0)) / scale.y;
-  const width = clientRect.width / scale.x;
-  const height = clientRect.height / scale.y;
+  let x = (clientRect.left + (addVisualOffsets ? ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0 : 0)) / scale.x;
+  let y = (clientRect.top + (addVisualOffsets ? ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0 : 0)) / scale.y;
+  let width = clientRect.width / scale.x;
+  let height = clientRect.height / scale.y;
+  if (domElement) {
+    const win2 = getWindow(domElement);
+    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+    let currentIFrame = win2.frameElement;
+    while (currentIFrame && offsetParent && offsetWin !== win2) {
+      const iframeScale = getScale(currentIFrame);
+      const iframeRect = currentIFrame.getBoundingClientRect();
+      const css = getComputedStyle(currentIFrame);
+      iframeRect.x += (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+      iframeRect.y += (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+      x *= iframeScale.x;
+      y *= iframeScale.y;
+      width *= iframeScale.x;
+      height *= iframeScale.y;
+      x += iframeRect.x;
+      y += iframeRect.y;
+      currentIFrame = getWindow(currentIFrame).frameElement;
+    }
+  }
   return {
     width,
     height,
@@ -7987,17 +8054,7 @@ function getOffsetParent(element) {
   return offsetParent || getContainingBlock(element) || window2;
 }
 function getDimensions(element) {
-  if (isHTMLElement(element)) {
-    return {
-      width: element.offsetWidth,
-      height: element.offsetHeight
-    };
-  }
-  const rect = getBoundingClientRect(element);
-  return {
-    width: rect.width,
-    height: rect.height
-  };
+  return getCssDimensions(element);
 }
 function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   let {
@@ -12448,7 +12505,7 @@ class TonConnectUITracker {
     }
   }
 }
-const tonConnectUiVersion = "2.3.0-beta.0";
+const tonConnectUiVersion = "2.3.0-beta.1";
 class TonConnectUI {
   constructor(options) {
     __publicField(this, "walletInfoStorage", new WalletInfoStorage());