feat: web components | shadow dom - tooltip support

src/App.tsx

@@ -8,7 +8,7 @@ import styles from './styles.module.css'
 
 function App() {
   const [anchorId, setAnchorId] = useState('button')
-  const [isDarkOpen, setIsDarkOpen] = useState(false)
+  const [isDarkOpen, setIsDarkOpen] = useState(true)
   const [position, setPosition] = useState<IPosition>({ x: 0, y: 0 })
   const [toggle, setToggle] = useState(false)
 

src/components/Tooltip/Tooltip.tsx

@@ -5,6 +5,7 @@ import { useTooltip } from 'components/TooltipProvider'
 import useIsomorphicLayoutEffect from 'utils/use-isomorphic-layout-effect'
 import { computeTooltipPosition } from '../../utils/compute-positions'
 import styles from './styles.module.css'
+import normalStyles from './styles'
 import type { IPosition, ITooltip, PlacesType } from './TooltipTypes'
 
 const Tooltip = ({
@@ -62,6 +63,12 @@ const Tooltip = ({
 
   const shouldOpenOnClick = openOnClick || events.includes('click')
 
+  /**
+   * web components support
+   */
+  const root = tooltipRef.current && tooltipRef.current.getRootNode()
+  const isOnShadowDOM = root instanceof ShadowRoot
+
   /**
    * useLayoutEffect runs before useEffect,
    * but should be used carefully because of caveats
@@ -74,6 +81,18 @@ const Tooltip = ({
     }
   }, [])
 
+  useEffect(() => {
+    if (typeof window !== 'undefined' && tooltipRef.current) {
+      if (isOnShadowDOM && !root.getElementById('react-tooltip-styles')) {
+        const style = document.createElement('style')
+        style.id = 'react-tooltip-styles'
+        style.textContent = normalStyles
+
+        root.appendChild(style)
+      }
+    }
+  })
+
   useEffect(() => {
     if (!show) {
       /**
@@ -339,7 +358,11 @@ const Tooltip = ({
 
     enabledEvents.forEach(({ event, listener }) => {
       elementRefs.forEach((ref) => {
-        ref.current?.addEventListener(event, listener)
+        if (isOnShadowDOM) {
+          root.addEventListener(event, listener)
+        } else {
+          ref.current?.addEventListener(event, listener)
+        }
       })
     })
 
@@ -547,6 +570,7 @@ const Tooltip = ({
       role="tooltip"
       className={classNames(
         'react-tooltip',
+        'rt-tooltip',
         styles['tooltip'],
         styles[variant],
         className,
@@ -555,19 +579,23 @@ const Tooltip = ({
           [styles['show']]: canShow,
           [styles['fixed']]: positionStrategy === 'fixed',
           [styles['clickable']]: clickable,
+          'rt-show': canShow,
+          'rt-fixed': positionStrategy === 'fixed',
+          'rt-clickable': clickable,
         },
       )}
       style={{ ...externalStyles, ...inlineStyles }}
       ref={tooltipRef}
     >
       {content}
       <WrapperElement
-        className={classNames('react-tooltip-arrow', styles['arrow'], classNameArrow, {
+        className={classNames('react-tooltip-arrow', 'rt-arrow', styles['arrow'], classNameArrow, {
           /**
            * changed from dash `no-arrow` to camelcase because of:
            * https://github.com/indooorsman/esbuild-css-modules-plugin/issues/42
            */
           [styles['noArrow']]: noArrow,
+          'rt-noArrow': noArrow,
         })}
         style={inlineArrowStyles}
         ref={tooltipArrowRef}

src/components/Tooltip/styles.js

@@ -0,0 +1,72 @@
+export default `
+.rt-tooltip {
+  visibility: hidden;
+  width: max-content;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 8px 16px;
+  border-radius: 3px;
+  font-size: 90%;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease-out;
+  will-change: opacity, visibility;
+}
+
+.rt-fixed {
+  position: fixed;
+}
+
+.rt-arrow {
+  position: absolute;
+  background: inherit;
+  width: 8px;
+  height: 8px;
+  transform: rotate(45deg);
+}
+
+.rt-noArrow {
+  display: none;
+}
+
+.rt-clickable {
+  pointer-events: auto;
+}
+
+.rt-show {
+  visibility: visible;
+  opacity: var(--rt-opacity);
+}
+
+/** Types variant **/
+.rt-dark {
+  background: var(--rt-color-dark);
+  color: var(--rt-color-white);
+}
+
+.rt-light {
+  background-color: var(--rt-color-white);
+  color: var(--rt-color-dark);
+}
+
+.rt-success {
+  background-color: var(--rt-color-success);
+  color: var(--rt-color-white);
+}
+
+.rt-warning {
+  background-color: var(--rt-color-warning);
+  color: var(--rt-color-white);
+}
+
+.rt-error {
+  background-color: var(--rt-color-error);
+  color: var(--rt-color-white);
+}
+
+.rt-info {
+  background-color: var(--rt-color-info);
+  color: var(--rt-color-white);
+}
+`

src/index-dev.tsx

@@ -6,4 +6,4 @@ import './tokens.css'
 // eslint-disable-next-line no-console
 console.log('Parent folder loaded react version: ', version)
 
-ReactDOM.render(<App />, document.getElementById('app'))
+ReactDOM.render(<App />, document.getElementById('app')?.attachShadow({ mode: 'open' }))