@warp-ds/elements 1.4.1-next.1 → 1.4.1-next.2

package/dist/packages/attention/index.js

@@ -2520,7 +2520,7 @@ var computePosition2 = (reference, floating, options) => {
   }));
 };
 
-// node_modules/.pnpm/@warp-ds+core@1.1.1_@floating-ui+dom@1.6.3/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
+// node_modules/.pnpm/@warp-ds+core@1.1.2_@floating-ui+dom@1.6.3/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
 var TOP_START = "top-start";
 var TOP = "top";
 var TOP_END = "top-end";
@@ -2575,8 +2575,6 @@ var rotation = {
   [BOTTOM]: -135,
   [BOTTOM_END]: -135
 };
-var middlePosition = "calc(50% - 7px)";
-var isDirectionVertical = (name) => [TOP_START, TOP, TOP_END, BOTTOM_START, BOTTOM, BOTTOM_END].includes(name);
 var arrowDirectionClassname = (dir) => {
   let direction;
   if (/-/.test(dir)) {
@@ -2599,17 +2597,6 @@ var applyArrowStyles = (arrowEl, arrowRotation2, dir) => {
     transform: `rotate(${arrowRotation2}deg)`
   });
 };
-function computeCalloutArrow({ actualDirection, directionName = BOTTOM, arrowEl }) {
-  if (!arrowEl)
-    return;
-  actualDirection = directionName;
-  const directionIsVertical = isDirectionVertical(directionName);
-  Object.assign((arrowEl == null ? void 0 : arrowEl.style) || {}, {
-    left: directionIsVertical ? middlePosition : "",
-    top: !directionIsVertical ? middlePosition : ""
-  });
-  applyArrowStyles(arrowEl, arrowRotation(actualDirection), actualDirection);
-}
 async function useRecompute(state) {
   var _a, _b, _c;
   if (!(state == null ? void 0 : state.isShowing))
@@ -2617,33 +2604,34 @@ async function useRecompute(state) {
   if (state == null ? void 0 : state.waitForDOM) {
     await (state == null ? void 0 : state.waitForDOM());
   }
-  if (state == null ? void 0 : state.isCallout)
-    return computeCalloutArrow(state);
   if (!(state == null ? void 0 : state.targetEl) || !(state == null ? void 0 : state.attentionEl))
     return;
-  const targetEl = state == null ? void 0 : state.targetEl;
-  const attentionEl = state == null ? void 0 : state.attentionEl;
+  let targetEl = state == null ? void 0 : state.targetEl;
+  const attentionEl = state.attentionEl;
   computePosition2(targetEl, attentionEl, {
     placement: (_a = state == null ? void 0 : state.directionName) != null ? _a : BOTTOM,
     middleware: [
       offset({ mainAxis: (_b = state == null ? void 0 : state.distance) != null ? _b : 8, crossAxis: (_c = state == null ? void 0 : state.skidding) != null ? _c : 0 }),
       (state == null ? void 0 : state.flip) && flip2({
+        // when flip is set to true it will move the attentionEl's placement to its opposite side or to the preferred placements if fallbackPlacements has a value
         crossAxis: state == null ? void 0 : state.crossAxis,
         fallbackPlacements: state == null ? void 0 : state.fallbackPlacements
       }),
       !(state == null ? void 0 : state.noArrow) && (state == null ? void 0 : state.arrowEl) && arrow2({ element: state == null ? void 0 : state.arrowEl }),
       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'.
+      // 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'.
     ]
   }).then(({ x, y, middlewareData, placement }) => {
     state.actualDirection = placement;
-    Object.assign(attentionEl == null ? void 0 : attentionEl.style, {
-      left: `${x}px`,
-      top: `${y}px`
-    });
+    if (!(state == null ? void 0 : state.isCallout)) {
+      Object.assign(attentionEl.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+    }
     if ((middlewareData == null ? void 0 : middlewareData.hide) && !(state == null ? void 0 : state.isCallout)) {
-      const { referenceHidden } = middlewareData == null ? void 0 : middlewareData.hide;
-      Object.assign(attentionEl == null ? void 0 : attentionEl.style, {
+      const { referenceHidden } = middlewareData.hide;
+      Object.assign(attentionEl.style, {
         visibility: referenceHidden ? "hidden" : ""
       });
     }
@@ -2651,26 +2639,26 @@ async function useRecompute(state) {
     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: x2, y: y2 } = middlewareData == null ? void 0 : middlewareData.arrow;
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
       let top = "";
       let right = "";
       let bottom = "";
       let left = "";
       if (arrowPlacement === "start") {
-        const value = typeof x2 === "number" ? `calc(33px - ${(arrowEl == null ? void 0 : arrowEl.offsetWidth) / 2}px)` : "";
-        top = typeof y2 === "number" ? `calc(33px -  ${(arrowEl == null ? void 0 : 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 x2 === "number" ? `calc(33px - ${(arrowEl == null ? void 0 : arrowEl.offsetWidth) / 2}px)` : "";
+        const value = typeof arrowX === "number" ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : "";
         right = isRtl ? "" : value;
         left = isRtl ? value : "";
-        bottom = typeof y2 === "number" ? `calc(33px - ${(arrowEl == null ? void 0 : arrowEl.offsetWidth) / 2}px)` : "";
+        bottom = typeof arrowY === "number" ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : "";
       } else {
-        left = typeof x2 === "number" ? `${x2}px` : "";
-        top = typeof y2 === "number" ? `${y2}px` : "";
+        left = typeof arrowX === "number" ? `${arrowX}px` : "";
+        top = typeof arrowY === "number" ? `${arrowY}px` : "";
       }
-      Object.assign((arrowEl == null ? void 0 : arrowEl.style) || {}, {
+      Object.assign(arrowEl.style, {
         top,
         right,
         bottom,
@@ -2682,7 +2670,7 @@ async function useRecompute(state) {
   return state;
 }
 
-// node_modules/.pnpm/@warp-ds+css@1.9.6/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@1.9.7/node_modules/@warp-ds/css/component-classes/index.js
 var box = {
   box: "group block relative break-words last-child:mb-0 p-16 rounded-8",
   // Relative here enables w-clickable
@@ -3041,7 +3029,7 @@ var messages2 = JSON.parse('{"attention.aria.callout":"callout speech bubble","a
 // packages/attention/locales/nb/messages.mjs
 var messages3 = JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.close":"Lukk","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}');
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/close-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/close-16.js
 import { LitElement } from "lit";
 import { unsafeStatic, html } from "lit/static-html.js";
 var messages4 = JSON.parse('{"icon.title.close":"Kryss"}');