@veracity/vui 1.1.3 → 1.2.0-beta.0

package/src/tooltip/tooltip.tsx

@@ -1,8 +1,10 @@
 import React from 'react'
 
 import Box from '../box'
+import { useUp } from '../core'
+import { Link } from '../link'
 import Popover from '../popover'
-import { animation, color, pointerPlacement, pointerSize } from './tooltip.setup'
+import { color, pointerPlacement, pointerSize } from './tooltip.setup'
 import { TooltipProps } from './tooltip.types'
 
 /**
@@ -12,24 +14,23 @@ import { TooltipProps } from './tooltip.types'
  *
  * */
 export const Tooltip = (props: TooltipProps) => {
-  const { children, maxWidth = '400px', text = 'demo', placement = 'top', isAnimated = false } = props
-
+  const {
+    children,
+    fontSize = '16px',
+    linkText,
+    linkProps,
+    maxWidth = '400px',
+    text = 'demo',
+    placement = 'top'
+  } = props
+  const isDesktop = useUp('md')
   return (
     <Popover placement={placement} trigger="mouseenter">
       <Popover.Trigger as={Box} display="inline-block">
         <Box display="inline-block">{children}</Box>
       </Popover.Trigger>
-      <Popover.Content
-        animation={isAnimated ? animation[placement] : undefined}
-        bg={color}
-        color="white"
-        m={1}
-        maxW={maxWidth}
-        p={1}
-        pl={2}
-        pr={2}
-      >
-        {!isAnimated && (
+      <Popover.Content bg={color} color="white" fontSize={fontSize} m={1} maxW={maxWidth} p={1} pl={2} pr={2}>
+        {isDesktop && (
           <Box
             bg={color}
             bottom={pointerPlacement[placement].bottom}
@@ -43,6 +44,14 @@ export const Tooltip = (props: TooltipProps) => {
           />
         )}
         {text}
+        {!!linkText && (
+          <>
+            &nbsp;
+            <Link variant="light" {...linkProps}>
+              {linkText}
+            </Link>
+          </>
+        )}
       </Popover.Content>
     </Popover>
   )

package/src/tooltip/tooltip.types.ts

@@ -1,13 +1,17 @@
-import { ReactNode } from 'react'
+import { ChildrenProp } from '../core'
+import { LinkProps } from '../link'
 
-export type TooltipProps = {
+export interface TooltipProps extends ChildrenProp {
+  /** Font size. */
+  fontSize?: '16px' | '14px'
   /** Displays given text at the tooltip. */
   text?: string
   /** Tooltip position. */
   placement?: 'top' | 'left' | 'bottom' | 'right'
-  /** Displays the tooltip with animation, without the arrow pointer. */
-  isAnimated?: boolean
   /** Sets maximum width to the tooltip body. */
   maxWidth?: string
-  children?: ReactNode
+  /** Link text that will be concatenated to the end of the tooltip text. */
+  linkText?: string
+  /** The <Link /> props.  */
+  linkProps?: LinkProps
 }

package/src/utils/dom.ts

@@ -6,22 +6,29 @@ export const addElement = (id: string): HTMLElement => {
 
 export const removeElement = (id: string): void => {
   const element = document.getElementById(id)
-  if (element) element.remove()
+  element?.remove?.()
+}
+
+export const addBodyClass = (className: string): void => document.body.classList.add(className)
+
+export const removeBodyClass = (className: string): void => document.body.classList.remove(className)
+
+export const removeElements = (className: string): void => {
+  const elements = document.getElementsByClassName(className)
+  for (let i = 0, len = elements.length; i < len; i++) elements[i]?.remove?.()
 }
 
 export const addElementClass = (id: string, className: string): void => {
   const element = document.getElementById(id)
-  if (element) element.classList.add(className)
+  element?.classList?.add?.(className)
 }
 
 export const removeElementClass = (id: string, className: string): void => {
   const element = document.getElementById(id)
-  if (element) element.classList.remove(className)
+  element?.classList?.remove?.(className)
 }
 
-export const appendToBody = (rootElem: HTMLElement) => {
-  document.body.appendChild(rootElem)
-}
+export const appendToBody = (rootElem: HTMLElement) => document.body.appendChild(rootElem)
 
 export const addContainer = (id: string): void => {
   const toastContainer = document.getElementById(id)

package/src/utils/react.ts

@@ -3,6 +3,7 @@
 import React, {
   DependencyList,
   Dispatch,
+  ReactNode,
   RefObject,
   SetStateAction,
   useCallback,
@@ -10,6 +11,7 @@ import React, {
   useRef,
   useState
 } from 'react'
+import ReactDOM from 'react-dom'
 
 import { isArray, isFunction } from './assertion'
 import { runIfFn } from './function'
@@ -170,3 +172,16 @@ export function useIsMounted() {
 
   return useCallback(() => isMounted.current, [])
 }
+
+/** A resolver to render a DOM node depending on React major version. */
+export function reactDomRender(wrapper: HTMLElement | null, content: ReactNode) {
+  if (!wrapper) return
+  if ((ReactDOM as any)?.createRoot) {
+    // Rendering for React 18
+    const root = (ReactDOM as any)?.createRoot?.(wrapper)
+    root?.render?.(content)
+  } else {
+    // Rendering for legacy React 17
+    ;(ReactDOM as any)?.render?.(content, wrapper)
+  }
+}