@cypress-design/react-tooltip 0.3.2 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cypress-design/react-tooltip
 
+## 0.3.3
+
+### Patch Changes
+
+- [#91](https://github.com/cypress-io/cypress-design/pull/91) [`d716000`](https://github.com/cypress-io/cypress-design/commit/d7160002406e8801fb1a77e57c39b61a1215c18a) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: avoid blinky tooltips [for website](https://github.com/cypress-io/cypress.io/issues/247)
+
 ## 0.3.2
 
 ### Patch Changes

package/Tooltip.tsx

@@ -103,7 +103,7 @@ export const Tooltip: React.FC<
             fn: (obj) => obj,
           }
         : flip(),
-      offset(0),
+      offset(interactive ? 0 : 16),
       arrow({ element: arrowRef, padding: 24 }),
     ],
     whileElementsMounted: autoUpdate,
@@ -180,7 +180,7 @@ export const Tooltip: React.FC<
                 position: strategy,
                 top: y ?? '',
                 left: x ?? '',
-                padding: '16px',
+                ...(interactive ? { padding: '16px' } : {}),
               },
             })}
           >
@@ -193,9 +193,9 @@ export const Tooltip: React.FC<
             >
               <svg
                 ref={arrowRef}
-                viewBox="0 0 48 48"
+                viewBox="0 0 48 24"
                 width="24"
-                height="24"
+                height="12"
                 className={clsx('absolute z-10', colors.svg)}
                 style={{
                   transform: `rotate(${arrowRotate}deg)`,
@@ -203,8 +203,10 @@ export const Tooltip: React.FC<
                     placementSide === 'bottom' || color === 'dark'
                       ? 'drop-shadow(0 1px 1px rgba(225, 227, 237, .3))'
                       : 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))',
-                  [arrowXRule]: `${arrowX ?? -6}px`,
-                  [arrowYRule]: `${arrowY ?? -6}px`,
+                  [arrowXRule]: `${arrowX ?? (interactive ? 0 : -16)}px`,
+                  [arrowYRule]: `${
+                    arrowY ? arrowY + 6 : interactive ? 6 : -10
+                  }px`,
                 }}
                 fill="none"
               >

package/dist/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAaV,MAAM,qCAAqC,CAAA;AAE5C,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AASD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAC5B,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CA6K/C,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAaV,MAAM,qCAAqC,CAAA;AAE5C,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AASD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAC5B,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CA+K/C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/index.es.mjs

@@ -30341,7 +30341,7 @@ var Tooltip = function (_a) {
                     fn: function (obj) { return obj; }
                 }
                 : flip(),
-            offset(0),
+            offset(interactive ? 0 : 16),
             arrow({ element: arrowRef, padding: 24 }),
         ],
         whileElementsMounted: autoUpdate
@@ -30395,26 +30395,21 @@ var Tooltip = function (_a) {
         React.createElement("div", __assign({}, getReferenceProps(), { ref: reference, className: className }, rest), children),
         React.createElement(FloatingPortal, null, open && !disabled && (React.createElement("div", __assign({}, getFloatingProps({
             ref: floating,
-            style: {
-                position: strategy,
-                top: y !== null && y !== void 0 ? y : '',
-                left: x !== null && x !== void 0 ? x : '',
-                padding: '16px'
-            }
+            style: __assign({ position: strategy, top: y !== null && y !== void 0 ? y : '', left: x !== null && x !== void 0 ? x : '' }, (interactive ? { padding: '16px' } : {}))
         })),
             React.createElement("div", { className: clsx('rounded shadow border', [
                     colors.background,
                     colors.block,
                     (!x || !y) && 'invisible',
                 ]) },
-                React.createElement("svg", { ref: arrowRef, viewBox: "0 0 48 48", width: "24", height: "24", className: clsx('absolute z-10', colors.svg), style: (_b = {
+                React.createElement("svg", { ref: arrowRef, viewBox: "0 0 48 24", width: "24", height: "12", className: clsx('absolute z-10', colors.svg), style: (_b = {
                             transform: "rotate(" + arrowRotate + "deg)",
                             filter: placementSide === 'bottom' || color === 'dark'
                                 ? 'drop-shadow(0 1px 1px rgba(225, 227, 237, .3))'
                                 : 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))'
                         },
-                        _b[arrowXRule] = (arrowX !== null && arrowX !== void 0 ? arrowX : -6) + "px",
-                        _b[arrowYRule] = (arrowY !== null && arrowY !== void 0 ? arrowY : -6) + "px",
+                        _b[arrowXRule] = (arrowX !== null && arrowX !== void 0 ? arrowX : (interactive ? 0 : -16)) + "px",
+                        _b[arrowYRule] = (arrowY ? arrowY + 6 : interactive ? 6 : -10) + "px",
                         _b), fill: "none" },
                     React.createElement("rect", { x: "0", y: "0", width: "48", height: "4", strokeWidth: "0" }),
                     React.createElement("path", { d: "M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3", strokeWidth: "2" })),