@cypress-design/react-tooltip 0.8.0 → 0.9.0

package/.turbo/turbo-build.log

@@ -2,5 +2,5 @@ $ yarn build:module && yarn build:types
 $ rollup -c ./rollup.config.mjs
 
 ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
-created ./dist/index.umd.js, ./dist/index.es.mjs in 47.5s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 21.5s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @cypress-design/react-tooltip
 
+## 0.9.0
+
+### Minor Changes
+
+- [#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'
+
+## 0.8.1
+
+### Patch Changes
+
+- [#344](https://github.com/cypress-io/cypress-design/pull/344) [`4fcb9f6`](https://github.com/cypress-io/cypress-design/commit/4fcb9f6510557436cb49abbd9542a18d49cb6306) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: accessible-tooltips
+
 ## 0.8.0
 
 ### Minor Changes

package/ReadMe.md

@@ -22,8 +22,10 @@ import Tooltip from '@cypress-design/react-tooltip'
 
 ```jsx live
 export const comp = () => (
-  <Tooltip tabIndex="0" popper={<b>popper</b>}>
-    <span>Focus me</span>
-  </Tooltip>
+  <div>
+    <Tooltip className="inline-block" tabIndex="0" popper={<b>popper</b>}>
+      <span>Focus me</span>
+    </Tooltip>
+  </div>
 )
 ```

package/Tooltip.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import * as React from 'react'
+import { createPortal } from 'react-dom'
 import {
   Placement,
   offset,
@@ -14,8 +15,7 @@ import {
   useRole,
   useDismiss,
   safePolygon,
-  FloatingPortal,
-} from '@floating-ui/react-dom-interactions'
+} from '@floating-ui/react'
 
 export interface TooltipProps {
   /**
@@ -83,11 +83,8 @@ export const Tooltip: React.FC<
   }, [forceOpen])
 
   const {
-    x,
-    y,
-    reference,
-    floating,
-    strategy,
+    floatingStyles,
+    refs,
     placement: calculatedPlacement,
     context,
     middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
@@ -109,7 +106,7 @@ export const Tooltip: React.FC<
     whileElementsMounted: autoUpdate,
   })
 
-  const contextHook = useDismiss(context)
+  const dismissHook = useDismiss(context)
 
   const { getReferenceProps, getFloatingProps } = useInteractions([
     useHover(context, {
@@ -120,7 +117,7 @@ export const Tooltip: React.FC<
       enabled: !disabled && !forceOpen,
     }),
     useRole(context, { role: 'tooltip' }),
-    ...(!forceOpen ? [contextHook] : []),
+    ...(!forceOpen ? [dismissHook] : []),
   ])
 
   const placementSide = calculatedPlacement.split(
@@ -166,72 +163,71 @@ export const Tooltip: React.FC<
   return (
     <>
       <div
-        {...getReferenceProps()}
-        ref={reference}
+        ref={refs.setReference}
         className={className}
         {...rest}
+        {...getReferenceProps()}
       >
         {children}
       </div>
-      {disabled ? null : (
-        <FloatingPortal>
-          {open && (
-            <div
-              {...getFloatingProps({
-                ref: floating,
-                style: {
-                  position: strategy,
-                  top: y ?? '',
-                  left: x ?? '',
-                  ...(interactive ? { padding: '16px' } : {}),
-                },
-              })}
-            >
+      {disabled
+        ? null
+        : open
+          ? // NOTE: we could have used the "FloatingPortal" component
+            // but it fails miserably and the native portal from react 18 is great...
+            createPortal(
               <div
-                className={clsx('rounded shadow-tooltip border', [
-                  colors.background,
-                  colors.block,
-                  (!x || !y) && 'invisible',
-                ])}
+                ref={refs.setFloating}
+                style={{ ...floatingStyles, zIndex: 100 }}
+                role="tooltip"
+                {...getFloatingProps()}
               >
-                <svg
-                  ref={arrowRef}
-                  viewBox="0 0 48 24"
-                  width="24"
-                  height="12"
-                  className={clsx('absolute z-10', colors.svg)}
-                  style={{
-                    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))',
-                    [arrowXRule]: `${arrowX ?? (interactive ? 0 : -16)}px`,
-                    [arrowYRule]: `${
-                      arrowY ? arrowY + 6 : interactive ? 6 : -10
-                    }px`,
-                  }}
-                  fill="none"
-                >
-                  <rect x="0" y="0" width="48" height="4" strokeWidth="0" />
-                  <path
-                    d="M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3"
-                    strokeWidth="2"
-                  />
-                </svg>
                 <div
-                  className={clsx(
-                    'rounded text-[16px] leading-[24px] min-w-[160px] text-center p-[8px] relative z-20',
+                  className={clsx('rounded shadow-tooltip border', [
                     colors.background,
-                  )}
+                    colors.block,
+                  ])}
                 >
-                  {popper}
+                  <svg
+                    ref={arrowRef}
+                    viewBox="0 0 48 24"
+                    width="24"
+                    height="12"
+                    className={clsx('absolute z-10', colors.svg)}
+                    style={{
+                      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))',
+                      [arrowXRule]: `${arrowX ?? (interactive ? 0 : -16)}px`,
+                      [arrowYRule]: `${
+                        arrowY ? arrowY + 6 : interactive ? 6 : -10
+                      }px`,
+                    }}
+                    fill="none"
+                  >
+                    <rect x="0" y="0" width="48" height="4" strokeWidth="0" />
+                    <path
+                      d="M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3"
+                      strokeWidth="2"
+                    />
+                  </svg>
+                  <div
+                    className={clsx(
+                      'rounded text-[16px] leading-[24px] min-w-[160px] text-center p-[8px] relative z-20',
+                      colors.background,
+                    )}
+                  >
+                    <span className="sr-only">Tooltip: </span>
+                    {popper}
+                  </div>
                 </div>
-              </div>
-            </div>
-          )}
-        </FloatingPortal>
-      )}
+              </div>,
+              document.body,
+              'cy-tooltip-portal',
+            )
+          : null}
     </>
   )
 }

package/TooltipReact.cy.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import { mount } from 'cypress/react18'
-import { Placement } from '@floating-ui/react-dom-interactions'
+import type { Placement } from '@floating-ui/react'
 import assertions from '../assertions'
 import Tooltip from './Tooltip'
 
@@ -65,14 +65,16 @@ const TooltipStoryMulti = ({
         >
           <div>Hover Me ({placement})</div>
         </Tooltip>
-      )
+      ),
     )}
   </div>
 )
 
 describe('Tooltip', { viewportHeight: 800, viewportWidth: 800 }, () => {
   function mountStory(
-    options: { single?: boolean } & Parameters<typeof TooltipStoryMulti>[0] = {}
+    options: { single?: boolean } & Parameters<
+      typeof TooltipStoryMulti
+    >[0] = {},
   ) {
     const { single, tabindex = 1, ...rest } = options
     if (single) {
@@ -90,7 +92,7 @@ describe('Tooltip', { viewportHeight: 800, viewportWidth: 800 }, () => {
         >
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
           voluptatum.
-        </Tooltip>
+        </Tooltip>,
       )
     } else {
       mount(<TooltipStoryMulti {...rest} tabindex={tabindex} />)
@@ -109,7 +111,7 @@ describe('Tooltip', { viewportHeight: 800, viewportWidth: 800 }, () => {
         >
           make sure its open
         </Tooltip>
-      </div>
+      </div>,
     )
     cy.findByText('should be visible').should('be.visible')
   })

package/dist/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Placement } from '@floating-ui/react-dom-interactions';
+import { Placement } from '@floating-ui/react';
 export interface TooltipProps {
     /**
      * Where the tooltip should be placed relative to the target.

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,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,CA8K/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;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"}