@cypress-design/react-tooltip 0.8.1 → 0.9.0

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 (12) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +6 -0
  3. package/ReadMe.md +5 -3
  4. package/Tooltip.tsx +60 -66
  5. package/TooltipReact.cy.tsx +7 -5
  6. package/dist/Tooltip.d.ts +1 -1
  7. package/dist/Tooltip.d.ts.map +1 -1
  8. package/dist/index.es.mjs +6380 -5786
  9. package/dist/index.es.mjs.map +1 -1
  10. package/dist/index.umd.js +6380 -5786
  11. package/dist/index.umd.js.map +1 -1
  12. package/package.json +3 -3
package/.turbo/turbo-build.log CHANGED
@@ -2,5 +2,5 @@ $ yarn build:module && yarn build:types
2
2
  $ rollup -c ./rollup.config.mjs
3
3
  
4
4
  ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
5
- created ./dist/index.umd.js, ./dist/index.es.mjs in 20.9s
5
+ created ./dist/index.umd.js, ./dist/index.es.mjs in 21.5s
6
6
  $ tsc --project ./tsconfig.build.json
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @cypress-design/react-tooltip
2
2
 
3
+ ## 0.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#371](https://github.com/cypress-io/cypress-design/pull/371) [`c7851b7`](https://github.com/cypress-io/cypress-design/commit/c7851b7ff4915d1d19e05136723e5939dca9b97b) Thanks [@elevatebart](https://github.com/elevatebart)! - update dependency from '@floating-ui/react-dom-interactions' to '@floating-ui/react'
8
+
3
9
  ## 0.8.1
4
10
 
5
11
  ### Patch Changes
package/ReadMe.md CHANGED
@@ -22,8 +22,10 @@ import Tooltip from '@cypress-design/react-tooltip'
22
22
 
23
23
  ```jsx live
24
24
  export const comp = () => (
25
- <Tooltip tabIndex="0" popper={<b>popper</b>}>
26
- <span>Focus me</span>
27
- </Tooltip>
25
+ <div>
26
+ <Tooltip className="inline-block" tabIndex="0" popper={<b>popper</b>}>
27
+ <span>Focus me</span>
28
+ </Tooltip>
29
+ </div>
28
30
  )
29
31
  ```
package/Tooltip.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import clsx from 'clsx'
2
2
  import * as React from 'react'
3
+ import { createPortal } from 'react-dom'
3
4
  import {
4
5
  Placement,
5
6
  offset,
@@ -14,8 +15,7 @@ import {
14
15
  useRole,
15
16
  useDismiss,
16
17
  safePolygon,
17
- FloatingPortal,
18
- } from '@floating-ui/react-dom-interactions'
18
+ } from '@floating-ui/react'
19
19
 
20
20
  export interface TooltipProps {
21
21
  /**
@@ -83,11 +83,8 @@ export const Tooltip: React.FC<
83
83
  }, [forceOpen])
84
84
 
85
85
  const {
86
- x,
87
- y,
88
- reference,
89
- floating,
90
- strategy,
86
+ floatingStyles,
87
+ refs,
91
88
  placement: calculatedPlacement,
92
89
  context,
93
90
  middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
@@ -109,7 +106,7 @@ export const Tooltip: React.FC<
109
106
  whileElementsMounted: autoUpdate,
110
107
  })
111
108
 
112
- const contextHook = useDismiss(context)
109
+ const dismissHook = useDismiss(context)
113
110
 
114
111
  const { getReferenceProps, getFloatingProps } = useInteractions([
115
112
  useHover(context, {
@@ -120,7 +117,7 @@ export const Tooltip: React.FC<
120
117
  enabled: !disabled && !forceOpen,
121
118
  }),
122
119
  useRole(context, { role: 'tooltip' }),
123
- ...(!forceOpen ? [contextHook] : []),
120
+ ...(!forceOpen ? [dismissHook] : []),
124
121
  ])
125
122
 
126
123
  const placementSide = calculatedPlacement.split(
@@ -166,74 +163,71 @@ export const Tooltip: React.FC<
166
163
  return (
167
164
  <>
168
165
  <div
169
- {...getReferenceProps()}
170
- ref={reference}
166
+ ref={refs.setReference}
171
167
  className={className}
172
168
  {...rest}
169
+ {...getReferenceProps()}
173
170
  >
174
171
  {children}
175
172
  </div>
176
- {disabled ? null : (
177
- <FloatingPortal>
178
- {open && (
179
- <div
180
- {...getFloatingProps({
181
- ref: floating,
182
- style: {
183
- position: strategy,
184
- top: y ?? '',
185
- left: x ?? '',
186
- ...(interactive ? { padding: '16px' } : {}),
187
- },
188
- })}
189
- role="tooltip"
190
- >
173
+ {disabled
174
+ ? null
175
+ : open
176
+ ? // NOTE: we could have used the "FloatingPortal" component
177
+ // but it fails miserably and the native portal from react 18 is great...
178
+ createPortal(
191
179
  <div
192
- className={clsx('rounded shadow-tooltip border', [
193
- colors.background,
194
- colors.block,
195
- (!x || !y) && 'invisible',
196
- ])}
180
+ ref={refs.setFloating}
181
+ style={{ ...floatingStyles, zIndex: 100 }}
182
+ role="tooltip"
183
+ {...getFloatingProps()}
197
184
  >
198
- <svg
199
- ref={arrowRef}
200
- viewBox="0 0 48 24"
201
- width="24"
202
- height="12"
203
- className={clsx('absolute z-10', colors.svg)}
204
- style={{
205
- transform: `rotate(${arrowRotate}deg)`,
206
- filter:
207
- placementSide === 'bottom' || color === 'dark'
208
- ? 'drop-shadow(0 1px 1px rgba(225, 227, 237, .3))'
209
- : 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))',
210
- [arrowXRule]: `${arrowX ?? (interactive ? 0 : -16)}px`,
211
- [arrowYRule]: `${
212
- arrowY ? arrowY + 6 : interactive ? 6 : -10
213
- }px`,
214
- }}
215
- fill="none"
216
- >
217
- <rect x="0" y="0" width="48" height="4" strokeWidth="0" />
218
- <path
219
- d="M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3"
220
- strokeWidth="2"
221
- />
222
- </svg>
223
185
  <div
224
- className={clsx(
225
- 'rounded text-[16px] leading-[24px] min-w-[160px] text-center p-[8px] relative z-20',
186
+ className={clsx('rounded shadow-tooltip border', [
226
187
  colors.background,
227
- )}
188
+ colors.block,
189
+ ])}
228
190
  >
229
- <span className="sr-only">Tooltip: </span>
230
- {popper}
191
+ <svg
192
+ ref={arrowRef}
193
+ viewBox="0 0 48 24"
194
+ width="24"
195
+ height="12"
196
+ className={clsx('absolute z-10', colors.svg)}
197
+ style={{
198
+ transform: `rotate(${arrowRotate}deg)`,
199
+ filter:
200
+ placementSide === 'bottom' || color === 'dark'
201
+ ? 'drop-shadow(0 1px 1px rgba(225, 227, 237, .3))'
202
+ : 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))',
203
+ [arrowXRule]: `${arrowX ?? (interactive ? 0 : -16)}px`,
204
+ [arrowYRule]: `${
205
+ arrowY ? arrowY + 6 : interactive ? 6 : -10
206
+ }px`,
207
+ }}
208
+ fill="none"
209
+ >
210
+ <rect x="0" y="0" width="48" height="4" strokeWidth="0" />
211
+ <path
212
+ d="M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3"
213
+ strokeWidth="2"
214
+ />
215
+ </svg>
216
+ <div
217
+ className={clsx(
218
+ 'rounded text-[16px] leading-[24px] min-w-[160px] text-center p-[8px] relative z-20',
219
+ colors.background,
220
+ )}
221
+ >
222
+ <span className="sr-only">Tooltip: </span>
223
+ {popper}
224
+ </div>
231
225
  </div>
232
- </div>
233
- </div>
234
- )}
235
- </FloatingPortal>
236
- )}
226
+ </div>,
227
+ document.body,
228
+ 'cy-tooltip-portal',
229
+ )
230
+ : null}
237
231
  </>
238
232
  )
239
233
  }
package/TooltipReact.cy.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import * as React from 'react'
4
4
  import { mount } from 'cypress/react18'
5
- import { Placement } from '@floating-ui/react-dom-interactions'
5
+ import type { Placement } from '@floating-ui/react'
6
6
  import assertions from '../assertions'
7
7
  import Tooltip from './Tooltip'
8
8
 
@@ -65,14 +65,16 @@ const TooltipStoryMulti = ({
65
65
  >
66
66
  <div>Hover Me ({placement})</div>
67
67
  </Tooltip>
68
- )
68
+ ),
69
69
  )}
70
70
  </div>
71
71
  )
72
72
 
73
73
  describe('Tooltip', { viewportHeight: 800, viewportWidth: 800 }, () => {
74
74
  function mountStory(
75
- options: { single?: boolean } & Parameters<typeof TooltipStoryMulti>[0] = {}
75
+ options: { single?: boolean } & Parameters<
76
+ typeof TooltipStoryMulti
77
+ >[0] = {},
76
78
  ) {
77
79
  const { single, tabindex = 1, ...rest } = options
78
80
  if (single) {
@@ -90,7 +92,7 @@ describe('Tooltip', { viewportHeight: 800, viewportWidth: 800 }, () => {
90
92
  >
91
93
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
92
94
  voluptatum.
93
- </Tooltip>
95
+ </Tooltip>,
94
96
  )
95
97
  } else {
96
98
  mount(<TooltipStoryMulti {...rest} tabindex={tabindex} />)
@@ -109,7 +111,7 @@ describe('Tooltip', { viewportHeight: 800, viewportWidth: 800 }, () => {
109
111
  >
110
112
  make sure its open
111
113
  </Tooltip>
112
- </div>
114
+ </div>,
113
115
  )
114
116
  cy.findByText('should be visible').should('be.visible')
115
117
  })
package/dist/Tooltip.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { Placement } from '@floating-ui/react-dom-interactions';
2
+ import { Placement } from '@floating-ui/react';
3
3
  export interface TooltipProps {
4
4
  /**
5
5
  * Where the tooltip should be placed relative to the target.
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,EAcV,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,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;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AASD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAC5B,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAgL/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;AAE9B,OAAO,EACL,SAAS,EAaV,MAAM,oBAAoB,CAAA;AAE3B,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,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;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AASD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAC5B,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CA0K/C,CAAA;AAED,eAAe,OAAO,CAAA"}