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

package/dist/packages/attention/index.js

@@ -1392,7 +1392,7 @@ function setupI18n(params = {}) {
 }
 var i18n = setupI18n();
 
-// node_modules/.pnpm/@floating-ui+utils@0.2.1/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+// node_modules/.pnpm/@floating-ui+utils@0.2.2/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var sides = ["top", "right", "bottom", "left"];
 var min = Math.min;
 var max = Math.max;
@@ -1504,15 +1504,25 @@ function getPaddingObject(padding) {
   };
 }
 function rectToClientRect(rect) {
-  return __spreadProps(__spreadValues({}, rect), {
-    top: rect.y,
-    left: rect.x,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height
-  });
+  const {
+    x,
+    y,
+    width,
+    height
+  } = rect;
+  return {
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y
+  };
 }
 
-// node_modules/.pnpm/@floating-ui+core@1.6.0/node_modules/@floating-ui/core/dist/floating-ui.core.mjs
+// node_modules/.pnpm/@floating-ui+core@1.6.2/node_modules/@floating-ui/core/dist/floating-ui.core.mjs
 function computeCoordsFromPlacement(_ref, placement, rtl) {
   let {
     reference,
@@ -1676,10 +1686,12 @@ async function detectOverflow(state, options) {
     rootBoundary,
     strategy
   }));
-  const rect = elementContext === "floating" ? __spreadProps(__spreadValues({}, rects.floating), {
+  const rect = elementContext === "floating" ? {
     x,
-    y
-  }) : rects.reference;
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
+  } : rects.reference;
   const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
   const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
     x: 1,
@@ -1988,7 +2000,7 @@ var offset = function(options) {
   };
 };
 
-// node_modules/.pnpm/@floating-ui+utils@0.2.1/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
+// node_modules/.pnpm/@floating-ui+utils@0.2.2/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
 function getNodeName(node) {
   if (isNode(node)) {
     return (node.nodeName || "").toLowerCase();
@@ -2040,9 +2052,8 @@ function getContainingBlock(element) {
   while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
     if (isContainingBlock(currentNode)) {
       return currentNode;
-    } else {
-      currentNode = getParentNode(currentNode);
     }
+    currentNode = getParentNode(currentNode);
   }
   return null;
 }
@@ -2520,7 +2531,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 +2586,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 +2608,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 +2615,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 +2650,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 +2681,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.10.1/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 +3040,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"}');