@warp-ds/elements 2.0.2-next.6 → 2.0.2

package/dist/packages/attention/index.js

@@ -645,13 +645,13 @@ var require_moo = __commonJS({
           line: this.line,
           col: this.col
         };
-        var size3 = text.length;
-        this.index += size3;
+        var size2 = text.length;
+        this.index += size2;
         this.line += lineBreaks;
         if (lineBreaks !== 0) {
-          this.col = size3 - nl + 1;
+          this.col = size2 - nl + 1;
         } else {
-          this.col += size3;
+          this.col += size2;
         }
         if (group.shouldThrow) {
           var err = new Error(this.formatError(token, "invalid syntax"));
@@ -2004,151 +2004,6 @@ var offset = function(options) {
     }
   };
 };
-var shift = function(options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    name: "shift",
-    options,
-    async fn(state) {
-      const {
-        x,
-        y,
-        placement
-      } = state;
-      const _a = evaluate(options, state), {
-        mainAxis: checkMainAxis = true,
-        crossAxis: checkCrossAxis = false,
-        limiter = {
-          fn: (_ref) => {
-            let {
-              x: x2,
-              y: y2
-            } = _ref;
-            return {
-              x: x2,
-              y: y2
-            };
-          }
-        }
-      } = _a, detectOverflowOptions = __objRest(_a, [
-        "mainAxis",
-        "crossAxis",
-        "limiter"
-      ]);
-      const coords = {
-        x,
-        y
-      };
-      const overflow = await detectOverflow(state, detectOverflowOptions);
-      const crossAxis = getSideAxis(getSide(placement));
-      const mainAxis = getOppositeAxis(crossAxis);
-      let mainAxisCoord = coords[mainAxis];
-      let crossAxisCoord = coords[crossAxis];
-      if (checkMainAxis) {
-        const minSide = mainAxis === "y" ? "top" : "left";
-        const maxSide = mainAxis === "y" ? "bottom" : "right";
-        const min2 = mainAxisCoord + overflow[minSide];
-        const max2 = mainAxisCoord - overflow[maxSide];
-        mainAxisCoord = clamp(min2, mainAxisCoord, max2);
-      }
-      if (checkCrossAxis) {
-        const minSide = crossAxis === "y" ? "top" : "left";
-        const maxSide = crossAxis === "y" ? "bottom" : "right";
-        const min2 = crossAxisCoord + overflow[minSide];
-        const max2 = crossAxisCoord - overflow[maxSide];
-        crossAxisCoord = clamp(min2, crossAxisCoord, max2);
-      }
-      const limitedCoords = limiter.fn(__spreadProps(__spreadValues({}, state), {
-        [mainAxis]: mainAxisCoord,
-        [crossAxis]: crossAxisCoord
-      }));
-      return __spreadProps(__spreadValues({}, limitedCoords), {
-        data: {
-          x: limitedCoords.x - x,
-          y: limitedCoords.y - y
-        }
-      });
-    }
-  };
-};
-var size = function(options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    name: "size",
-    options,
-    async fn(state) {
-      const {
-        placement,
-        rects,
-        platform: platform2,
-        elements
-      } = state;
-      const _a = evaluate(options, state), {
-        apply = () => {
-        }
-      } = _a, detectOverflowOptions = __objRest(_a, [
-        "apply"
-      ]);
-      const overflow = await detectOverflow(state, detectOverflowOptions);
-      const side2 = getSide(placement);
-      const alignment = getAlignment(placement);
-      const isYAxis = getSideAxis(placement) === "y";
-      const {
-        width,
-        height
-      } = rects.floating;
-      let heightSide;
-      let widthSide;
-      if (side2 === "top" || side2 === "bottom") {
-        heightSide = side2;
-        widthSide = alignment === (await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating)) ? "start" : "end") ? "left" : "right";
-      } else {
-        widthSide = side2;
-        heightSide = alignment === "end" ? "top" : "bottom";
-      }
-      const maximumClippingHeight = height - overflow.top - overflow.bottom;
-      const maximumClippingWidth = width - overflow.left - overflow.right;
-      const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
-      const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
-      const noShift = !state.middlewareData.shift;
-      let availableHeight = overflowAvailableHeight;
-      let availableWidth = overflowAvailableWidth;
-      if (isYAxis) {
-        availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
-      } else {
-        availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
-      }
-      if (noShift && !alignment) {
-        const xMin = max(overflow.left, 0);
-        const xMax = max(overflow.right, 0);
-        const yMin = max(overflow.top, 0);
-        const yMax = max(overflow.bottom, 0);
-        if (isYAxis) {
-          availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
-        } else {
-          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
-        }
-      }
-      await apply(__spreadProps(__spreadValues({}, state), {
-        availableWidth,
-        availableHeight
-      }));
-      const nextDimensions = await platform2.getDimensions(elements.floating);
-      if (width !== nextDimensions.width || height !== nextDimensions.height) {
-        return {
-          reset: {
-            rects: true
-          }
-        };
-      }
-      return {};
-    }
-  };
-};
 
 // node_modules/.pnpm/@floating-ui+utils@0.2.7/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
 function getNodeName(node) {
@@ -2686,9 +2541,7 @@ var platform = {
   isRTL
 };
 var offset2 = offset;
-var shift2 = shift;
 var flip2 = flip;
-var size2 = size;
 var hide2 = hide;
 var arrow2 = arrow;
 var computePosition2 = (reference, floating, options) => {
@@ -2704,7 +2557,7 @@ var computePosition2 = (reference, floating, options) => {
   }));
 };
 
-// node_modules/.pnpm/@warp-ds+core@1.1.8_@floating-ui+dom@1.6.10/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
+// node_modules/.pnpm/@warp-ds+core@1.1.5_@floating-ui+dom@1.6.10/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
 var TOP_START = "top-start";
 var TOP = "top";
 var TOP_END = "top-end";
@@ -2781,8 +2634,6 @@ var applyArrowStyles = (arrowEl, arrowRotation2, dir) => {
     transform: `rotate(${arrowRotation2}deg)`
   });
 };
-var ELEMENT_PADDING = 8;
-var ARROW_OFFSET = 24;
 async function useRecompute(state) {
   var _a, _b, _c;
   if (!(state == null ? void 0 : state.isShowing))
@@ -2805,19 +2656,9 @@ async function useRecompute(state) {
         // checks overflow to trigger a flip. When disabled, it will ignore overflow
         fallbackPlacements: state == null ? void 0 : state.fallbackPlacements
       }),
-      (state == null ? void 0 : state.flip) && shift2({ crossAxis: true }),
-      // shifts the attentionEl to make sure that it stays in view
       !(state == null ? void 0 : state.noArrow) && (state == null ? void 0 : state.arrowEl) && arrow2({ element: state == null ? void 0 : state.arrowEl }),
-      hide2(),
+      hide2()
       // will hide the attentionEl when it appears detached from the targetEl. Can be called multiple times in the middleware-array if you want to use several strategies. Default strategy is 'referenceHidden'.
-      size2({
-        apply() {
-          Object.assign(attentionEl.style, {
-            paddingRight: `${ELEMENT_PADDING}px`,
-            paddingLeft: `${ELEMENT_PADDING}px`
-          });
-        }
-      })
     ]
   }).then(({ x, y, middlewareData, placement }) => {
     state.actualDirection = placement;
@@ -2833,22 +2674,25 @@ async function useRecompute(state) {
         visibility: referenceHidden ? "hidden" : ""
       });
     }
+    const isRtl = window.getComputedStyle(attentionEl).direction === "rtl";
+    const arrowPlacement = arrowDirection(placement).split("-")[1];
     if ((middlewareData == null ? void 0 : middlewareData.arrow) && (state == null ? void 0 : state.arrowEl)) {
       const arrowEl = state == null ? void 0 : state.arrowEl;
       const { x: arrowX, y: arrowY } = middlewareData.arrow;
-      const isRtl = window.getComputedStyle(attentionEl).direction === "rtl";
-      const arrowPlacement = arrowDirection(placement).split("-")[1];
-      let top = "", right = "", bottom = "", left = "";
+      let top = "";
+      let right = "";
+      let bottom = "";
+      let left = "";
       if (arrowPlacement === "start") {
-        const value = typeof arrowX === "number" ? `calc(${ARROW_OFFSET}px - ${arrowEl.offsetWidth / 2}px)` : "";
-        top = typeof arrowY === "number" ? `calc(${ARROW_OFFSET}px - ${arrowEl.offsetWidth / 2}px)` : "";
+        const value = typeof arrowX === "number" ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : "";
+        top = typeof arrowY === "number" ? `calc(24px -  ${arrowEl.offsetWidth / 2}px)` : "";
         right = isRtl ? value : "";
         left = isRtl ? "" : value;
       } else if (arrowPlacement === "end") {
-        const value = typeof arrowX === "number" ? `calc(${ARROW_OFFSET}px - ${arrowEl.offsetWidth / 2}px)` : "";
+        const value = typeof arrowX === "number" ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : "";
         right = isRtl ? "" : value;
         left = isRtl ? value : "";
-        bottom = typeof arrowY === "number" ? `calc(${ARROW_OFFSET}px - ${arrowEl.offsetWidth / 2}px)` : "";
+        bottom = typeof arrowY === "number" ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : "";
       } else {
         left = typeof arrowX === "number" ? `${arrowX}px` : "";
         top = typeof arrowY === "number" ? `${arrowY}px` : "";
@@ -3289,10 +3133,7 @@ ${JSON.stringify(Object.keys(opposites))}`);
 ${JSON.stringify(directions)}`
       );
     }
-    setTimeout(() => {
-      this.requestUpdate();
-      this.handleDone();
-    }, 0);
+    setTimeout(() => this.requestUpdate(), 0);
     if (!this.callout) {
       window.addEventListener("click", this.handleDone);
       window.addEventListener("scroll", this.handleDone);
@@ -3344,7 +3185,7 @@ ${JSON.stringify(directions)}`
     ]);
   }
   get _arrowHtml() {
-    return this.noArrow ? "" : html2`<div id="arrow" class="${this._arrowClasses}"></div>`;
+    return this.noArrow ? "" : html2`<div id="arrow" role="img" class="${this._arrowClasses}"></div>`;
   }
   get _activeVariantClasses() {
     const variantProps = {
@@ -3517,16 +3358,19 @@ ${JSON.stringify(directions)}`
         ${this.placement === "right-start" || this.placement === "right" || this.placement === "right-end" || this.placement === "bottom-start" || this.placement === "bottom" || this.placement === "bottom-end" ? html2`
               <slot name="target"></slot>
 
-              <div id="attention" class="${this._wrapperClasses}">
-                <div role="${this.tooltip ? "tooltip" : "img"}" aria-label="${this.defaultAriaLabel()}">${this._arrowHtml}</div>
+              <div
+                id="attention"
+                role="${this.tooltip ? "tooltip" : "img"}"
+                aria-label="${this.defaultAriaLabel()}"
+                class="${this._wrapperClasses}">
+                ${this._arrowHtml}
                 <slot name="message"></slot>
                 ${this.canClose ? this._closeBtnHtml : nothing}
               </div>
             ` : html2`
               <div id="attention" class="${this._wrapperClasses}">
                 <slot name="message"></slot>
-                <div role="${this.tooltip ? "tooltip" : "img"}" aria-label="${this.defaultAriaLabel()}">${this._arrowHtml}</div>
-                ${this.canClose ? this._closeBtnHtml : nothing}
+                ${this._arrowHtml} ${this.canClose ? this._closeBtnHtml : nothing}
               </div>
               <slot name="target"></slot>
             `}