@veracity/vui 1.1.2 → 1.2.0-beta.0

package/src/modal/modalStyle.ts

@@ -2,7 +2,7 @@ import { createGlobalStyle } from '../core'
 
 export default createGlobalStyle`
 
-body.no-scroll {
+body.vui-no-scroll {
 	overflow: hidden !important;
 	overscroll-behavior: contain;
 }

package/src/popover/popoverContent.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import Box from '../box'
-import { useStyleConfig, vui } from '../core'
+import { useStyleConfig, v, vui } from '../core'
 import { cs, mergeRefs } from '../utils'
 import { usePopoverContext } from './context'
 import { PopoverContentProps } from './popover.types'
@@ -17,7 +17,7 @@ export const PopoverContent = vui<'div', PopoverContentProps>((props, ref) => {
 
   return (
     // Wrapping div prevents an error thrown when conditionally unmounting this component
-    <div data-popover-workaround>
+    <v.div ring={0}>
       <Box
         bg="white"
         borderRadius="md"
@@ -25,12 +25,13 @@ export const PopoverContent = vui<'div', PopoverContentProps>((props, ref) => {
         className={cs('vui-popoverContent', className)}
         overflowY="auto"
         ref={mergeRefs(setPopper, ref)}
+        ring={0}
         {...styles.content}
         {...rest}
       >
         {shouldRenderChildren ? children : null}
       </Box>
-    </div>
+    </v.div>
   )
 })
 

package/src/portal/portal.tsx

@@ -1,10 +1,11 @@
 import React, { FC, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 
+import { ChildrenProp } from '../core'
 import { PortalProps } from './portal.types'
 
 /** Provided children are portaled to document.body or custom container. */
-export const Portal: FC<PortalProps> = props => {
+export const Portal: FC<PortalProps & ChildrenProp> = props => {
   const { children, containerRef, disablePortal } = props
   const [mountNode, setMountNode] = useState<HTMLElement>()
 

package/src/table/tbody.tsx

@@ -35,9 +35,7 @@ export const Tbody = vui<'tbody', TbodyProps>((props, ref) => {
         rows?.map((row, index) => (
           <Tr key={index}>
             {columns?.map(column => (
-              <Td key={column.field} {...column}>
-                {row[column.field]}
-              </Td>
+              <Td key={column.field}>{row[column.field]}</Td>
             ))}
           </Tr>
         ))}

package/src/tabs/tabs.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect } from 'react'
+import React, { Children, ReactElement, useEffect } from 'react'
 
 import { styled, useStyleConfig, vui } from '../core'
 import { P } from '../p'
@@ -16,7 +16,7 @@ export const TabsBase = styled.divBox<TabsProps>`
  * Implements Tabs navigation to switch between views.
  */
 export const Tabs = vui<'div', TabsProps>((props, ref) => {
-  const { activeTabId, children, className, size, onTabClick, ...rest } = props
+  const { activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props
   const styles = useStyleConfig('Tabs', props)
   const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState(
     'fadeIn',
@@ -26,16 +26,16 @@ export const Tabs = vui<'div', TabsProps>((props, ref) => {
   useEffect(() => {
     const t: TabProps[] = []
     if (children) {
-      ;(children as ReactElement[]).forEach((child: ReactElement<TabProps>, index: number) => {
-        if (child?.props?.title) {
+      ;(Children.toArray(children) as ReactElement[]).forEach((child: ReactElement<TabProps>, index: number) => {
+        if (child?.props?.title)
           t.push({
             id: index,
             title: child.props.title,
+            icon: child.props.icon,
             children: child.props.children,
             disabled: child.props.disabled,
             onClick: child.props.onClick
           })
-        }
       })
     }
     setTabs(t)
@@ -60,6 +60,7 @@ export const Tabs = vui<'div', TabsProps>((props, ref) => {
           activeNavItem={activeTabIndex}
           animationDirection={animationDirection}
           onNavItemClick={onNavItemClick}
+          showBorder={showBorder}
           size={size}
           tabs={tabs}
         />

package/src/tabs/tabs.types.ts

@@ -1,31 +1,37 @@
 import { ReactNode } from 'react'
 
+import { ChildrenProp } from '../core'
+import { IconProp } from '../icon'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn'
 
 export type TabsSize = 'md' | 'sm' | 'lg' | 'xl'
+export type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | undefined
 
 export type TabsProps = SystemProps &
-  ThemingProps<'Tabs'> & {
+  ThemingProps<'Tabs'> &
+  ChildrenProp & {
     activeTabId?: number
-    children?: ReactNode | ReactNode[]
+    showBorder?: boolean
     onTabClick?: (id: number) => void
   }
 
-export type TabProps = SystemProps & {
-  id?: number
-  title: ReactNode
-  children?: ReactNode
-  disabled?: boolean
-  onClick?: () => void
-}
+export type TabProps = SystemProps &
+  ChildrenProp & {
+    icon?: IconProp
+    id?: number
+    title: ReactNode
+    disabled?: boolean
+    onClick?: () => void
+  }
 
 export type TabNavBarProps = {
   tabs: TabProps[]
   onNavItemClick: (id: number) => void
   activeNavItem?: number
   animationDirection?: AnimationDirection
+  showBorder?: boolean
   size?: TabsSize
 }

package/src/tabs/tabsNavBar.tsx

@@ -2,16 +2,25 @@ import React from 'react'
 
 import Box from '../box'
 import { vui } from '../core'
+import { Icon } from '../icon'
 import { List, ListItem } from '../list'
-import { cs } from '../utils'
-import { TabNavBarProps } from './tabs.types'
+import { cs, Dict } from '../utils'
+import { NavBarIconSize, TabNavBarProps } from './tabs.types'
+
+const iconSizeMapper: Dict = {
+  sm: 'xs',
+  md: 'sm',
+  lg: 'md',
+  xl: 'lg'
+}
 
 export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
-  const { tabs, onNavItemClick, activeNavItem, animationDirection, size } = props
+  const { tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props
+  const iconSize: NavBarIconSize = iconSizeMapper?.[size as string] || 'md'
 
   return (
     <List
-      borderBottom="1px solid grey.40"
+      borderBottom={showBorder ? '1px solid grey.40' : 'none'}
       className={cs('vui-tabsNavBar')}
       display="flex"
       isInteractive
@@ -25,10 +34,13 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
           disabled={tab.disabled}
           display="inline-flex"
           key={tab.id}
-          onClick={() => tab?.id !== undefined && onNavItemClick(tab.id)}
+          onClick={() => onNavItemClick?.(tab.id || 0)}
           position="relative"
         >
-          {tab.title}
+          <Box alignItems="center">
+            {!!tab.icon && <Icon mr={1} name={tab.icon} size={iconSize} />}
+            {tab.title}
+          </Box>
           {!tab.disabled && tab.id === activeNavItem && (
             <Box
               animation={animationDirection}

package/src/toast/Toast.tsx

@@ -1,11 +1,10 @@
 import React, { ReactNode } from 'react'
-import ReactDOM from 'react-dom'
 
 import { Box } from '../box'
 import { VuiProvider } from '../core'
 import { Notification, NotificationStatus } from '../notification'
 import { zIndices } from '../theme'
-import { addContainer, uid } from '../utils'
+import { addContainer, reactDomRender, uid } from '../utils'
 import { ToastOptions, ToastSetup } from './toast.types'
 
 const wrapperId = 'toastsWrapper'
@@ -18,9 +17,9 @@ const setup: ToastSetup = {
   componentList: []
 }
 
-const render = (): void =>
-  // eslint-disable-next-line react/no-render-return-value
-  ReactDOM.render(
+const render = (): void => {
+  const wrapper = document.getElementById(wrapperId)
+  const content = (
     <VuiProvider>
       <Box
         bottom="1rem"
@@ -36,10 +35,12 @@ const render = (): void =>
           <div key={item.id}>{item.component}</div>
         ))}
       </Box>
-    </VuiProvider>,
-    document.getElementById(wrapperId)
+    </VuiProvider>
   )
 
+  reactDomRender(wrapper, content)
+}
+
 const hide = (id: string): void => {
   setup.componentList = setup.componentList.filter(i => i.id !== id)
   render()

package/src/tooltip/tooltip.setup.ts

@@ -1,11 +1,4 @@
-export const animation = {
-  top: 'fadeDown',
-  right: 'fadeLeft',
-  bottom: 'fadeUp',
-  left: 'fadeRight'
-}
-
-export const pointerSize = 8
+export const pointerSize = 12
 
 export const color = 'prussian.80'
 
@@ -28,13 +21,13 @@ export const pointerPlacement = {
     top: `50%`,
     bottom: 'auto',
     left: 'auto',
-    right: '0',
+    right: '-4px',
     translate: '-50%, -50%'
   },
   right: {
     top: `50%`,
     bottom: 'auto',
-    left: `${pointerSize / 2}px`,
+    left: '2px',
     right: 'auto',
     translate: '0, -50%'
   }

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)
+  }
+}