@cypress-design/react-tooltip 0.3.3 → 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.
Files changed (8) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/Tooltip.tsx +53 -51
  3. package/dist/Tooltip.d.ts.map +1 -1
  4. package/dist/index.es.mjs +2 -2
  5. package/dist/index.es.mjs.map +1 -1
  6. package/dist/index.umd.js +2 -2
  7. package/dist/index.umd.js.map +1 -1
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
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
+
3
9
  ## 0.3.3
4
10
 
5
11
  ### Patch Changes
package/Tooltip.tsx CHANGED
@@ -171,63 +171,65 @@ export const Tooltip: React.FC<
171
171
  >
172
172
  {children}
173
173
  </div>
174
- <FloatingPortal>
175
- {open && !disabled && (
176
- <div
177
- {...getFloatingProps({
178
- ref: floating,
179
- style: {
180
- position: strategy,
181
- top: y ?? '',
182
- left: x ?? '',
183
- ...(interactive ? { padding: '16px' } : {}),
184
- },
185
- })}
186
- >
174
+ {disabled ? null : (
175
+ <FloatingPortal>
176
+ {open && (
187
177
  <div
188
- className={clsx('rounded shadow border', [
189
- colors.background,
190
- colors.block,
191
- (!x || !y) && 'invisible',
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 24"
197
- width="24"
198
- height="12"
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 ?? (interactive ? 0 : -16)}px`,
207
- [arrowYRule]: `${
208
- arrowY ? arrowY + 6 : interactive ? 6 : -10
209
- }px`,
210
- }}
211
- fill="none"
212
- >
213
- <rect x="0" y="0" width="48" height="4" strokeWidth="0" />
214
- <path
215
- d="M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3"
216
- strokeWidth="2"
217
- />
218
- </svg>
219
188
  <div
220
- className={clsx(
221
- 'rounded text-16px leading-24px min-w-160px text-center p-8px relative z-20',
222
- colors.background
223
- )}
189
+ className={clsx('rounded shadow border', [
190
+ colors.background,
191
+ colors.block,
192
+ (!x || !y) && 'invisible',
193
+ ])}
224
194
  >
225
- {popper}
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>
226
228
  </div>
227
229
  </div>
228
- </div>
229
- )}
230
- </FloatingPortal>
230
+ )}
231
+ </FloatingPortal>
232
+ )}
231
233
  </>
232
234
  )
233
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,CA+K/C,CAAA;AAED,eAAe,OAAO,CAAA"}
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
@@ -30393,7 +30393,7 @@ 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 && !disabled && (React.createElement("div", __assign({}, getFloatingProps({
30396
+ disabled ? null : (React.createElement(FloatingPortal, null, open && (React.createElement("div", __assign({}, getFloatingProps({
30397
30397
  ref: floating,
30398
30398
  style: __assign({ position: strategy, top: y !== null && y !== void 0 ? y : '', left: x !== null && x !== void 0 ? x : '' }, (interactive ? { padding: '16px' } : {}))
30399
30399
  })),
@@ -30413,7 +30413,7 @@ var Tooltip = function (_a) {
30413
30413
  _b), fill: "none" },
30414
30414
  React.createElement("rect", { x: "0", y: "0", width: "48", height: "4", strokeWidth: "0" }),
30415
30415
  React.createElement("path", { d: "M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3", strokeWidth: "2" })),
30416
- 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))))))));
30417
30417
  };
30418
30418
 
30419
30419
  export { Tooltip as default };