@cypress-design/react-tooltip 0.3.2 → 0.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/Tooltip.tsx +54 -50
- package/dist/Tooltip.d.ts.map +1 -1
- package/dist/index.es.mjs +7 -12
- package/dist/index.es.mjs.map +1 -1
- package/dist/index.umd.js +7 -12
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @cypress-design/react-tooltip
|
|
2
2
|
|
|
3
|
+
## 0.3.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#141](https://github.com/cypress-io/cypress-design/pull/141) [`3dd9145`](https://github.com/cypress-io/cypress-design/commit/3dd9145cfe74a9a24a13bbd5d15edb95391aa4d0) Thanks [@elevatebart](https://github.com/elevatebart)! - avoid ssr mismatches by not rendering the portal when disabled
|
|
8
|
+
|
|
9
|
+
## 0.3.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#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)
|
|
14
|
+
|
|
3
15
|
## 0.3.2
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/Tooltip.tsx
CHANGED
|
@@ -103,7 +103,7 @@ export const Tooltip: React.FC<
|
|
|
103
103
|
fn: (obj) => obj,
|
|
104
104
|
}
|
|
105
105
|
: flip(),
|
|
106
|
-
offset(0),
|
|
106
|
+
offset(interactive ? 0 : 16),
|
|
107
107
|
arrow({ element: arrowRef, padding: 24 }),
|
|
108
108
|
],
|
|
109
109
|
whileElementsMounted: autoUpdate,
|
|
@@ -171,61 +171,65 @@ export const Tooltip: React.FC<
|
|
|
171
171
|
>
|
|
172
172
|
{children}
|
|
173
173
|
</div>
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
{...getFloatingProps({
|
|
178
|
-
ref: floating,
|
|
179
|
-
style: {
|
|
180
|
-
position: strategy,
|
|
181
|
-
top: y ?? '',
|
|
182
|
-
left: x ?? '',
|
|
183
|
-
padding: '16px',
|
|
184
|
-
},
|
|
185
|
-
})}
|
|
186
|
-
>
|
|
174
|
+
{disabled ? null : (
|
|
175
|
+
<FloatingPortal>
|
|
176
|
+
{open && (
|
|
187
177
|
<div
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
178
|
+
{...getFloatingProps({
|
|
179
|
+
ref: floating,
|
|
180
|
+
style: {
|
|
181
|
+
position: strategy,
|
|
182
|
+
top: y ?? '',
|
|
183
|
+
left: x ?? '',
|
|
184
|
+
...(interactive ? { padding: '16px' } : {}),
|
|
185
|
+
},
|
|
186
|
+
})}
|
|
193
187
|
>
|
|
194
|
-
<svg
|
|
195
|
-
ref={arrowRef}
|
|
196
|
-
viewBox="0 0 48 48"
|
|
197
|
-
width="24"
|
|
198
|
-
height="24"
|
|
199
|
-
className={clsx('absolute z-10', colors.svg)}
|
|
200
|
-
style={{
|
|
201
|
-
transform: `rotate(${arrowRotate}deg)`,
|
|
202
|
-
filter:
|
|
203
|
-
placementSide === 'bottom' || color === 'dark'
|
|
204
|
-
? 'drop-shadow(0 1px 1px rgba(225, 227, 237, .3))'
|
|
205
|
-
: 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))',
|
|
206
|
-
[arrowXRule]: `${arrowX ?? -6}px`,
|
|
207
|
-
[arrowYRule]: `${arrowY ?? -6}px`,
|
|
208
|
-
}}
|
|
209
|
-
fill="none"
|
|
210
|
-
>
|
|
211
|
-
<rect x="0" y="0" width="48" height="4" strokeWidth="0" />
|
|
212
|
-
<path
|
|
213
|
-
d="M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3"
|
|
214
|
-
strokeWidth="2"
|
|
215
|
-
/>
|
|
216
|
-
</svg>
|
|
217
188
|
<div
|
|
218
|
-
className={clsx(
|
|
219
|
-
|
|
220
|
-
colors.
|
|
221
|
-
|
|
189
|
+
className={clsx('rounded shadow border', [
|
|
190
|
+
colors.background,
|
|
191
|
+
colors.block,
|
|
192
|
+
(!x || !y) && 'invisible',
|
|
193
|
+
])}
|
|
222
194
|
>
|
|
223
|
-
|
|
195
|
+
<svg
|
|
196
|
+
ref={arrowRef}
|
|
197
|
+
viewBox="0 0 48 24"
|
|
198
|
+
width="24"
|
|
199
|
+
height="12"
|
|
200
|
+
className={clsx('absolute z-10', colors.svg)}
|
|
201
|
+
style={{
|
|
202
|
+
transform: `rotate(${arrowRotate}deg)`,
|
|
203
|
+
filter:
|
|
204
|
+
placementSide === 'bottom' || color === 'dark'
|
|
205
|
+
? 'drop-shadow(0 1px 1px rgba(225, 227, 237, .3))'
|
|
206
|
+
: 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))',
|
|
207
|
+
[arrowXRule]: `${arrowX ?? (interactive ? 0 : -16)}px`,
|
|
208
|
+
[arrowYRule]: `${
|
|
209
|
+
arrowY ? arrowY + 6 : interactive ? 6 : -10
|
|
210
|
+
}px`,
|
|
211
|
+
}}
|
|
212
|
+
fill="none"
|
|
213
|
+
>
|
|
214
|
+
<rect x="0" y="0" width="48" height="4" strokeWidth="0" />
|
|
215
|
+
<path
|
|
216
|
+
d="M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3"
|
|
217
|
+
strokeWidth="2"
|
|
218
|
+
/>
|
|
219
|
+
</svg>
|
|
220
|
+
<div
|
|
221
|
+
className={clsx(
|
|
222
|
+
'rounded text-16px leading-24px min-w-160px text-center p-8px relative z-20',
|
|
223
|
+
colors.background
|
|
224
|
+
)}
|
|
225
|
+
>
|
|
226
|
+
{popper}
|
|
227
|
+
</div>
|
|
224
228
|
</div>
|
|
225
229
|
</div>
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
230
|
+
)}
|
|
231
|
+
</FloatingPortal>
|
|
232
|
+
)}
|
|
229
233
|
</>
|
|
230
234
|
)
|
|
231
235
|
}
|
package/dist/Tooltip.d.ts.map
CHANGED
|
@@ -1 +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,
|
|
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,CAiL/C,CAAA;AAED,eAAe,OAAO,CAAA"}
|
package/dist/index.es.mjs
CHANGED
|
@@ -30341,7 +30341,7 @@ var Tooltip = function (_a) {
|
|
|
30341
30341
|
fn: function (obj) { return obj; }
|
|
30342
30342
|
}
|
|
30343
30343
|
: flip(),
|
|
30344
|
-
offset(0),
|
|
30344
|
+
offset(interactive ? 0 : 16),
|
|
30345
30345
|
arrow({ element: arrowRef, padding: 24 }),
|
|
30346
30346
|
],
|
|
30347
30347
|
whileElementsMounted: autoUpdate
|
|
@@ -30393,32 +30393,27 @@ var Tooltip = function (_a) {
|
|
|
30393
30393
|
var colors = getColors();
|
|
30394
30394
|
return (React.createElement(React.Fragment, null,
|
|
30395
30395
|
React.createElement("div", __assign({}, getReferenceProps(), { ref: reference, className: className }, rest), children),
|
|
30396
|
-
React.createElement(FloatingPortal, null, open &&
|
|
30396
|
+
disabled ? null : (React.createElement(FloatingPortal, null, open && (React.createElement("div", __assign({}, getFloatingProps({
|
|
30397
30397
|
ref: floating,
|
|
30398
|
-
style: {
|
|
30399
|
-
position: strategy,
|
|
30400
|
-
top: y !== null && y !== void 0 ? y : '',
|
|
30401
|
-
left: x !== null && x !== void 0 ? x : '',
|
|
30402
|
-
padding: '16px'
|
|
30403
|
-
}
|
|
30398
|
+
style: __assign({ position: strategy, top: y !== null && y !== void 0 ? y : '', left: x !== null && x !== void 0 ? x : '' }, (interactive ? { padding: '16px' } : {}))
|
|
30404
30399
|
})),
|
|
30405
30400
|
React.createElement("div", { className: clsx('rounded shadow border', [
|
|
30406
30401
|
colors.background,
|
|
30407
30402
|
colors.block,
|
|
30408
30403
|
(!x || !y) && 'invisible',
|
|
30409
30404
|
]) },
|
|
30410
|
-
React.createElement("svg", { ref: arrowRef, viewBox: "0 0 48
|
|
30405
|
+
React.createElement("svg", { ref: arrowRef, viewBox: "0 0 48 24", width: "24", height: "12", className: clsx('absolute z-10', colors.svg), style: (_b = {
|
|
30411
30406
|
transform: "rotate(" + arrowRotate + "deg)",
|
|
30412
30407
|
filter: placementSide === 'bottom' || color === 'dark'
|
|
30413
30408
|
? 'drop-shadow(0 1px 1px rgba(225, 227, 237, .3))'
|
|
30414
30409
|
: 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))'
|
|
30415
30410
|
},
|
|
30416
|
-
_b[arrowXRule] = (arrowX !== null && arrowX !== void 0 ? arrowX : -
|
|
30417
|
-
_b[arrowYRule] = (arrowY
|
|
30411
|
+
_b[arrowXRule] = (arrowX !== null && arrowX !== void 0 ? arrowX : (interactive ? 0 : -16)) + "px",
|
|
30412
|
+
_b[arrowYRule] = (arrowY ? arrowY + 6 : interactive ? 6 : -10) + "px",
|
|
30418
30413
|
_b), fill: "none" },
|
|
30419
30414
|
React.createElement("rect", { x: "0", y: "0", width: "48", height: "4", strokeWidth: "0" }),
|
|
30420
30415
|
React.createElement("path", { d: "M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3", strokeWidth: "2" })),
|
|
30421
|
-
React.createElement("div", { className: clsx('rounded text-16px leading-24px min-w-160px text-center p-8px relative z-20', colors.background) }, popper)))))));
|
|
30416
|
+
React.createElement("div", { className: clsx('rounded text-16px leading-24px min-w-160px text-center p-8px relative z-20', colors.background) }, popper))))))));
|
|
30422
30417
|
};
|
|
30423
30418
|
|
|
30424
30419
|
export { Tooltip as default };
|