@warp-ds/elements 1.4.0-next.1 → 1.4.0-next.3

package/dist/packages/attention/index.d.ts

@@ -51,6 +51,10 @@ export class WarpAttention extends WarpAttention_base {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        crossAxis: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         fallbackPlacements: {
             type: ArrayConstructor;
             reflect: boolean;
@@ -69,6 +73,7 @@ export class WarpAttention extends WarpAttention_base {
     distance: number;
     skidding: number;
     flip: boolean;
+    crossAxis: boolean;
     _initialPlacement: string;
     set _actualDirection(v: string);
     get _actualDirection(): string;
@@ -101,6 +106,7 @@ export class WarpAttention extends WarpAttention_base {
         distance: number;
         skidding: number;
         flip: boolean;
+        crossAxis: boolean;
         fallbackPlacements: any;
     };
     pointingAtDirection(): string;

package/dist/packages/attention/index.js

@@ -1060,7 +1060,7 @@ function generateRandomId() {
   return `m${Math.random().toString(36).slice(2)}`;
 }
 
-// node_modules/.pnpm/@warp-ds+css@1.9.3/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@1.9.6/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
@@ -1345,8 +1345,6 @@ var attention = {
 
 // node_modules/.pnpm/@floating-ui+utils@0.2.1/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var sides = ["top", "right", "bottom", "left"];
-var alignments = ["start", "end"];
-var placements = /* @__PURE__ */ sides.reduce((acc, side2) => acc.concat(side2, side2 + "-" + alignments[0], side2 + "-" + alignments[1]), []);
 var min = Math.min;
 var max = Math.max;
 var round = Math.round;
@@ -1715,106 +1713,6 @@ var arrow = (options) => ({
     };
   }
 });
-function getPlacementList(alignment, autoAlignment, allowedPlacements) {
-  const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter((placement) => getAlignment(placement) === alignment), ...allowedPlacements.filter((placement) => getAlignment(placement) !== alignment)] : allowedPlacements.filter((placement) => getSide(placement) === placement);
-  return allowedPlacementsSortedByAlignment.filter((placement) => {
-    if (alignment) {
-      return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
-    }
-    return true;
-  });
-}
-var autoPlacement = function(options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    name: "autoPlacement",
-    options,
-    async fn(state) {
-      var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
-      const {
-        rects,
-        middlewareData,
-        placement,
-        platform: platform2,
-        elements
-      } = state;
-      const _a = evaluate(options, state), {
-        crossAxis = false,
-        alignment,
-        allowedPlacements = placements,
-        autoAlignment = true
-      } = _a, detectOverflowOptions = __objRest(_a, [
-        "crossAxis",
-        "alignment",
-        "allowedPlacements",
-        "autoAlignment"
-      ]);
-      const placements$1 = alignment !== void 0 || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
-      const overflow = await detectOverflow(state, detectOverflowOptions);
-      const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
-      const currentPlacement = placements$1[currentIndex];
-      if (currentPlacement == null) {
-        return {};
-      }
-      const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating)));
-      if (placement !== currentPlacement) {
-        return {
-          reset: {
-            placement: placements$1[0]
-          }
-        };
-      }
-      const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
-      const allOverflows = [...((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || [], {
-        placement: currentPlacement,
-        overflows: currentOverflows
-      }];
-      const nextPlacement = placements$1[currentIndex + 1];
-      if (nextPlacement) {
-        return {
-          data: {
-            index: currentIndex + 1,
-            overflows: allOverflows
-          },
-          reset: {
-            placement: nextPlacement
-          }
-        };
-      }
-      const placementsSortedByMostSpace = allOverflows.map((d) => {
-        const alignment2 = getAlignment(d.placement);
-        return [d.placement, alignment2 && crossAxis ? (
-          // Check along the mainAxis and main crossAxis side.
-          d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0)
-        ) : (
-          // Check only the mainAxis.
-          d.overflows[0]
-        ), d.overflows];
-      }).sort((a, b) => a[1] - b[1]);
-      const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter((d) => d[2].slice(
-        0,
-        // Aligned placements should not check their opposite crossAxis
-        // side.
-        getAlignment(d[0]) ? 2 : 3
-      ).every((v) => v <= 0));
-      const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
-      if (resetPlacement !== placement) {
-        return {
-          data: {
-            index: currentIndex + 1,
-            overflows: allOverflows
-          },
-          reset: {
-            placement: resetPlacement
-          }
-        };
-      }
-      return {};
-    }
-  };
-};
 var flip = function(options) {
   if (options === void 0) {
     options = {};
@@ -1915,6 +1813,65 @@ var flip = function(options) {
     }
   };
 };
+function getSideOffsets(overflow, rect) {
+  return {
+    top: overflow.top - rect.height,
+    right: overflow.right - rect.width,
+    bottom: overflow.bottom - rect.height,
+    left: overflow.left - rect.width
+  };
+}
+function isAnySideFullyClipped(overflow) {
+  return sides.some((side2) => overflow[side2] >= 0);
+}
+var hide = function(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: "hide",
+    options,
+    async fn(state) {
+      const {
+        rects
+      } = state;
+      const _a = evaluate(options, state), {
+        strategy = "referenceHidden"
+      } = _a, detectOverflowOptions = __objRest(_a, [
+        "strategy"
+      ]);
+      switch (strategy) {
+        case "referenceHidden": {
+          const overflow = await detectOverflow(state, __spreadProps(__spreadValues({}, detectOverflowOptions), {
+            elementContext: "reference"
+          }));
+          const offsets = getSideOffsets(overflow, rects.reference);
+          return {
+            data: {
+              referenceHiddenOffsets: offsets,
+              referenceHidden: isAnySideFullyClipped(offsets)
+            }
+          };
+        }
+        case "escaped": {
+          const overflow = await detectOverflow(state, __spreadProps(__spreadValues({}, detectOverflowOptions), {
+            altBoundary: true
+          }));
+          const offsets = getSideOffsets(overflow, rects.floating);
+          return {
+            data: {
+              escapedOffsets: offsets,
+              escaped: isAnySideFullyClipped(offsets)
+            }
+          };
+        }
+        default: {
+          return {};
+        }
+      }
+    }
+  };
+};
 async function convertValueToCoords(state, options) {
   const {
     placement,
@@ -1981,75 +1938,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
-        }
-      });
-    }
-  };
-};
 
 // node_modules/.pnpm/@floating-ui+utils@0.2.1/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
 function getNodeName(node) {
@@ -2567,9 +2455,8 @@ var platform = {
   isElement,
   isRTL
 };
-var autoPlacement2 = autoPlacement;
-var shift2 = shift;
 var flip2 = flip;
+var hide2 = hide;
 var arrow2 = arrow;
 var computePosition2 = (reference, floating, options) => {
   const cache2 = /* @__PURE__ */ new Map();
@@ -2584,7 +2471,7 @@ var computePosition2 = (reference, floating, options) => {
   }));
 };
 
-// node_modules/.pnpm/@warp-ds+core@1.1.0_@floating-ui+dom@1.6.3/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
+// 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
 var TOP_START = "top-start";
 var TOP = "top";
 var TOP_END = "top-end";
@@ -2692,12 +2579,12 @@ async function useRecompute(state) {
     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({
-        fallbackAxisSideDirection: "start",
+        crossAxis: state == null ? void 0 : state.crossAxis,
         fallbackPlacements: state == null ? void 0 : state.fallbackPlacements
       }),
-      !(state == null ? void 0 : state.flip) && autoPlacement2(),
-      shift2({ padding: 16 }),
-      !(state == null ? void 0 : state.noArrow) && (state == null ? void 0 : state.arrowEl) && arrow2({ element: state == null ? void 0 : state.arrowEl })
+      !(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'.
     ]
   }).then(({ x, y, middlewareData, placement }) => {
     state.actualDirection = placement;
@@ -2705,6 +2592,12 @@ async function useRecompute(state) {
       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, {
+        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)) {
@@ -3254,6 +3147,7 @@ var WarpAttention = class extends kebabCaseAttributes(WarpElement) {
     this.distance = 8;
     this.skidding = 0;
     this.flip = false;
+    this.crossAxis = false;
     this._initialPlacement = this.placement;
     this._actualDirection = this.placement;
   }
@@ -3338,7 +3232,8 @@ ${JSON.stringify(directions)}`);
     return this.renderRoot.querySelector("#attention");
   }
   get _targetEl() {
-    const targetSlot = this.renderRoot.querySelector("slot[name='target']");
+    var _a;
+    const targetSlot = (_a = this.renderRoot) == null ? void 0 : _a.querySelector("slot[name='target']");
     return targetSlot ? targetSlot.assignedNodes()[0] : null;
   }
   get _messageEl() {
@@ -3384,6 +3279,7 @@ ${JSON.stringify(directions)}`);
       distance: this.distance,
       skidding: this.skidding,
       flip: this.flip,
+      crossAxis: this.crossAxis,
       fallbackPlacements: this.fallbackPlacements
     };
     useRecompute(this.attentionState);
@@ -3488,6 +3384,8 @@ ${JSON.stringify(directions)}`);
     }
   }
   render() {
+    if (!this.callout && this._targetEl === void 0)
+      return html2``;
     return html2`
       <div class=${ifDefined(this.className ? this.className : void 0)}>
         ${this.placement === "right-start" || this.placement === "right" || this.placement === "right-end" || this.placement === "bottom-start" || this.placement === "bottom" || this.placement === "bottom-end" ? html2`
@@ -3533,6 +3431,8 @@ __publicField(WarpAttention, "properties", {
   skidding: { type: Number, reflect: true },
   // Whether Attention element should flip its placement in order to keep it in view
   flip: { type: Boolean, reflect: true },
+  // Whether Attention element should ignore cross axis overflow when flip is enabled
+  crossAxis: { type: Boolean, reflect: true },
   // Choose which preferred placements the Attention element should flip to
   fallbackPlacements: { type: Array, reflect: true }
 });