@spscommerce/ds-react 5.10.0 → 5.10.1

package/lib/index.es.js

@@ -21878,6 +21878,7 @@ function SpsTooltip({
   const [shown, setShown] = React.useState(false);
   const rootElement = React.useRef(null);
   const forElementRef = typeof forProp === "string" ? React.useRef(document.getElementById(forProp)) : forProp;
+  const caretRef = React.useRef(null);
   const clearHideDelay = React.useCallback(() => {
     if (iref.current.hideTimer) {
       window.clearTimeout(iref.current.hideTimer);
@@ -21927,6 +21928,35 @@ function SpsTooltip({
     clearHideDelay();
     iref.current.hideTimer = window.setTimeout(hide2, hideDelay);
   }, []);
+  const getSecondaryOffset = React.useCallback((pos) => {
+    var _a, _b, _c, _d, _e, _f;
+    const [primaryPosition, secondaryPosition] = pos.split(" ");
+    const forElementBounds = (_a = forElementRef == null ? void 0 : forElementRef.current) == null ? void 0 : _a.getBoundingClientRect();
+    const caretWidth = caretRef.current ? parseInt(((_b = getComputedStyle(caretRef.current)) == null ? void 0 : _b.width) || "0", 10) : 0;
+    const caretDiagonal = caretWidth * Math.sqrt(2);
+    const caretTransformationMargin = (caretDiagonal - caretWidth) / 2;
+    if (["top", "bottom"].includes(primaryPosition) && secondaryPosition !== "middle") {
+      if (!(forElementBounds == null ? void 0 : forElementBounds.width) || forElementBounds.width > 50) {
+        return 0;
+      }
+      const caretLeft = caretRef.current ? parseInt(((_c = getComputedStyle(caretRef.current)) == null ? void 0 : _c.left) || "0", 10) : 0;
+      const caretRight = caretRef.current ? parseInt(((_d = getComputedStyle(caretRef.current)) == null ? void 0 : _d.right) || "0", 10) : 0;
+      const caretOffsetStart = caretLeft < caretRight ? caretLeft : caretRight;
+      const caretOffsetToMiddle = caretOffsetStart - caretTransformationMargin + caretDiagonal / 2;
+      return forElementBounds.width / 2 - caretOffsetToMiddle;
+    } else if (["left", "right"].includes(primaryPosition) && secondaryPosition !== "middle") {
+      if ((forElementBounds == null ? void 0 : forElementBounds.height) && forElementBounds.height > 50) {
+        return 0;
+      }
+      const caretTop = caretRef.current ? parseInt(((_e = getComputedStyle(caretRef.current)) == null ? void 0 : _e.top) || "0", 10) : 0;
+      const caretBottom = caretRef.current ? parseInt(((_f = getComputedStyle(caretRef.current)) == null ? void 0 : _f.bottom) || "0", 10) : 0;
+      const caretOffsetStart = caretTop < caretBottom ? caretTop : caretBottom;
+      const caretOffsetToMiddle = caretOffsetStart - caretTransformationMargin + caretDiagonal / 2;
+      return forElementBounds.height / 2 - caretOffsetToMiddle;
+    } else {
+      return 0;
+    }
+  }, []);
   React.useEffect(() => {
     if (typeof forProp === "string") {
       forElementRef.current = document.getElementById(forProp);
@@ -21997,7 +22027,7 @@ function SpsTooltip({
   const [posStyle, altPositionUsed] = shown ? getPosition(rootElement, forElementRef, position3, __spreadValues({
     altPosition,
     setMinWidth: false,
-    offsets: [offsets[0] - CARET_SPACING_PX, offsets[1]]
+    offsets: [offsets[0] - CARET_SPACING_PX, offsets[1] + getSecondaryOffset(position3)]
   }, portalContext)) : [{}, false];
   const classes = clsx(unsafelyReplaceClassName || "sps-tooltip", "z-stratum-tip", `sps-tooltip--${kind}`, `sps-tooltip--pos-${(altPositionUsed ? altPosition : position3).replace(" ", "-")}`, shown && "sps-tooltip--shown", className);
   return portal(/* @__PURE__ */ React.createElement("div", {
@@ -22013,6 +22043,7 @@ function SpsTooltip({
   }, title) : title), /* @__PURE__ */ React.createElement("span", {
     className: "sps-tooltip__body d-block"
   }, children), /* @__PURE__ */ React.createElement("span", {
+    ref: caretRef,
     className: "sps-tooltip__caret"
   })));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.10.0",
+  "version": "5.10.1",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -28,10 +28,10 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.10.0",
-    "@spscommerce/ds-shared": "5.10.0",
-    "@spscommerce/positioning": "5.10.0",
-    "@spscommerce/utils": "5.10.0",
+    "@spscommerce/ds-colors": "5.10.1",
+    "@spscommerce/ds-shared": "5.10.1",
+    "@spscommerce/positioning": "5.10.1",
+    "@spscommerce/utils": "5.10.1",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
@@ -39,10 +39,10 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.10.0",
-    "@spscommerce/ds-shared": "5.10.0",
-    "@spscommerce/positioning": "5.10.0",
-    "@spscommerce/utils": "5.10.0",
+    "@spscommerce/ds-colors": "5.10.1",
+    "@spscommerce/ds-shared": "5.10.1",
+    "@spscommerce/positioning": "5.10.1",
+    "@spscommerce/utils": "5.10.1",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.9.0",