@coreui/react-pro 4.12.0-beta.1 → 4.12.0-beta.3

package/src/components/tooltip/CTooltip.tsx

@@ -3,13 +3,19 @@ import { createPortal } from 'react-dom'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { Transition } from 'react-transition-group'
-import { createPopper, Instance, Placement } from '@popperjs/core'
 
-import { triggerPropType } from '../../props'
-import type { Triggers } from '../../types'
-import { isRTL } from '../../utils'
+import { usePopper } from '../../hooks'
+import { fallbackPlacementsPropType, triggerPropType } from '../../props'
+import type { Placements, Triggers } from '../../types'
+import { getRTLPlacement } from '../../utils'
 
 export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
+  /**
+   * Apply a CSS fade transition to the tooltip.
+   *
+   * @since 4.9.0-beta.1
+   */
+  animation?: boolean
   /**
    * A string of all className you want applied to the component.
    */
@@ -18,6 +24,18 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
    * Content node for your component.
    */
   content: ReactNode | string
+  /**
+   * The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
+   *
+   * @since 4.9.0-beta.1
+   */
+  delay?: number | { show: number; hide: number }
+  /**
+   * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
+   *
+   * @since 4.9.0-beta.1
+   */
+  fallbackPlacements?: Placements | Placements[]
   /**
    * Offset of the tooltip relative to its target.
    */
@@ -46,44 +64,59 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
   visible?: boolean
 }
 
-const getPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
-  switch (placement) {
-    case 'right': {
-      return isRTL(element) ? 'left' : 'right'
-    }
-    case 'left': {
-      return isRTL(element) ? 'right' : 'left'
-    }
-    default: {
-      return placement as Placement
-    }
-  }
-}
-
 export const CTooltip: FC<CTooltipProps> = ({
   children,
+  animation = true,
   className,
   content,
+  delay = 0,
+  fallbackPlacements = ['top', 'right', 'bottom', 'left'],
   offset = [0, 6],
   onHide,
   onShow,
   placement = 'top',
-  trigger = 'hover',
+  trigger = ['hover', 'focus'],
   visible,
   ...rest
 }) => {
   const tooltipRef = useRef(null)
   const togglerRef = useRef(null)
-  const popper = useRef<Instance>()
+  const { initPopper, destroyPopper } = usePopper()
   const [_visible, setVisible] = useState(visible)
 
+  const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
+
+  const popperConfig = {
+    modifiers: [
+      {
+        name: 'arrow',
+        options: {
+          element: '.tooltip-arrow',
+        },
+      },
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: fallbackPlacements,
+        },
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: offset,
+        },
+      },
+    ],
+    placement: getRTLPlacement(placement, togglerRef.current),
+  }
+
   useEffect(() => {
     setVisible(visible)
   }, [visible])
 
   useEffect(() => {
-    if (_visible) {
-      initPopper()
+    if (_visible && togglerRef.current && tooltipRef.current) {
+      initPopper(togglerRef.current, tooltipRef.current, popperConfig)
     }
 
     return () => {
@@ -91,28 +124,13 @@ export const CTooltip: FC<CTooltipProps> = ({
     }
   }, [_visible])
 
-  const initPopper = () => {
-    if (togglerRef.current && tooltipRef.current) {
-      popper.current = createPopper(togglerRef.current, tooltipRef.current, {
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: offset,
-            },
-          },
-        ],
-        placement: getPlacement(placement, togglerRef.current),
-      })
-    }
-  }
-
-  const destroyPopper = () => {
-    if (popper.current) {
-      popper.current.destroy()
+  const toggleVisible = (visible: boolean) => {
+    if (visible) {
+      setTimeout(() => setVisible(true), _delay.show)
+      return
     }
 
-    popper.current = undefined
+    setTimeout(() => setVisible(false), _delay.hide)
   }
 
   return (
@@ -120,15 +138,15 @@ export const CTooltip: FC<CTooltipProps> = ({
       {React.cloneElement(children as React.ReactElement<any>, {
         ref: togglerRef,
         ...((trigger === 'click' || trigger.includes('click')) && {
-          onClick: () => setVisible(!_visible),
+          onClick: () => toggleVisible(!_visible),
         }),
         ...((trigger === 'focus' || trigger.includes('focus')) && {
-          onFocus: () => setVisible(true),
-          onBlur: () => setVisible(false),
+          onFocus: () => toggleVisible(true),
+          onBlur: () => toggleVisible(false),
         }),
         ...((trigger === 'hover' || trigger.includes('hover')) && {
-          onMouseEnter: () => setVisible(true),
-          onMouseLeave: () => setVisible(false),
+          onMouseEnter: () => toggleVisible(true),
+          onMouseLeave: () => toggleVisible(false),
         }),
       })}
       {typeof window !== 'undefined' &&
@@ -148,11 +166,9 @@ export const CTooltip: FC<CTooltipProps> = ({
               <div
                 className={classNames(
                   'tooltip',
-                  `bs-tooltip-${getPlacement(placement, togglerRef.current)
-                    .replace('left', 'start')
-                    .replace('right', 'end')}`,
-                  'fade',
+                  'bs-tooltip-auto',
                   {
+                    fade: animation,
                     show: state === 'entered',
                   },
                   className,
@@ -161,7 +177,7 @@ export const CTooltip: FC<CTooltipProps> = ({
                 role="tooltip"
                 {...rest}
               >
-                <div data-popper-arrow className="tooltip-arrow"></div>
+                <div className="tooltip-arrow"></div>
                 <div className="tooltip-inner">{content}</div>
               </div>
             )}
@@ -173,8 +189,17 @@ export const CTooltip: FC<CTooltipProps> = ({
 }
 
 CTooltip.propTypes = {
+  animation: PropTypes.bool,
   children: PropTypes.node,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  delay: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.shape({
+      show: PropTypes.number.isRequired,
+      hide: PropTypes.number.isRequired,
+    }),
+  ]),
+  fallbackPlacements: fallbackPlacementsPropType,
   offset: PropTypes.any, // TODO: find good proptype
   onHide: PropTypes.func,
   onShow: PropTypes.func,

package/src/hooks/index.ts

@@ -1,5 +1,6 @@
 import { useColorModes } from './useColorModes'
 import { useForkedRef } from './useForkedRef'
+import { usePopper } from './usePopper'
 import { useStateWithCallback } from './useStateWithCallback'
 
-export { useColorModes, useForkedRef, useStateWithCallback }
+export { useColorModes, useForkedRef, usePopper, useStateWithCallback }

package/src/hooks/useColorModes.ts

@@ -1,16 +1,22 @@
-import { useEffect, useState } from 'react'
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 
 interface UseColorModesOutput {
-  getColorMode: () => string
+  colorMode: string | undefined
   isColorModeSet: () => boolean
-  setColorMode: (mode: string) => void
+  setColorMode: Dispatch<SetStateAction<string>>
 }
 
-const getStoredTheme = (localStorageItemName: string) => localStorage.getItem(localStorageItemName)
+const getStoredTheme = (localStorageItemName: string) =>
+  typeof window !== 'undefined' && localStorage.getItem(localStorageItemName)
+
 const setStoredTheme = (localStorageItemName: string, colorMode: string) =>
   localStorage.setItem(localStorageItemName, colorMode)
 
 const getPreferredColorScheme = (localStorageItemName: string) => {
+  if (typeof window === 'undefined') {
+    return 'light'
+  }
+
   const storedTheme = getStoredTheme(localStorageItemName)
 
   if (storedTheme) {
@@ -33,25 +39,29 @@ const setTheme = (colorMode: string) => {
 export const useColorModes = (
   localStorageItemName = 'coreui-react-color-scheme',
 ): UseColorModesOutput => {
-  const [colorMode, setColorMode] = useState<string>(getPreferredColorScheme(localStorageItemName))
+  const [colorMode, setColorMode] = useState<string | undefined>(
+    getPreferredColorScheme(localStorageItemName),
+  )
 
   useEffect(() => {
-    setStoredTheme(localStorageItemName, colorMode)
-    setTheme(colorMode)
+    if (colorMode) {
+      setStoredTheme(localStorageItemName, colorMode)
+      setTheme(colorMode)
+    }
   }, [colorMode])
 
   useEffect(() => {
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
       const storedTheme = getStoredTheme(localStorageItemName)
-      if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      if (storedTheme !== 'light' && storedTheme !== 'dark' && colorMode) {
         setTheme(colorMode)
       }
     })
-  }, [])
+  })
 
   return {
-    getColorMode: () => colorMode,
+    colorMode,
     isColorModeSet: () => Boolean(getStoredTheme(localStorageItemName)),
-    setColorMode: (mode: string) => setColorMode(mode),
+    setColorMode,
   }
 }

package/src/hooks/usePopper.ts

@@ -0,0 +1,31 @@
+import { useRef } from 'react'
+import { createPopper } from '@popperjs/core'
+import type { Instance, Options } from '@popperjs/core'
+
+interface UsePopperOutput {
+  popper: Instance | undefined
+  initPopper: (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => void
+  destroyPopper: () => void
+}
+
+export const usePopper = (): UsePopperOutput => {
+  const _popper = useRef<Instance>()
+
+  const initPopper = (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => {
+    _popper.current = createPopper(reference, popper, options)
+  }
+
+  const destroyPopper = () => {
+    if (_popper.current) {
+      _popper.current.destroy()
+    }
+
+    _popper.current = undefined
+  }
+
+  return {
+    popper: _popper.current,
+    initPopper,
+    destroyPopper,
+  }
+}

package/src/props.ts

@@ -16,6 +16,11 @@ export const colorPropType = PropTypes.oneOfType([
   PropTypes.string,
 ])
 
+export const fallbackPlacementsPropType = PropTypes.oneOfType([
+  PropTypes.arrayOf(PropTypes.oneOf<Placements>(['top', 'bottom', 'right', 'left']).isRequired),
+  PropTypes.oneOf<Placements>(['top', 'bottom', 'right', 'left']),
+])
+
 export const gradientsPropType = PropTypes.oneOf([
   'primary-gradient',
   'secondary-gradient',

package/src/utils/getRTLPlacement.ts

@@ -0,0 +1,18 @@
+import { Placement } from '@popperjs/core'
+import { isRTL } from '../utils'
+
+const getRTLPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
+  switch (placement) {
+    case 'right': {
+      return isRTL(element) ? 'left' : 'right'
+    }
+    case 'left': {
+      return isRTL(element) ? 'right' : 'left'
+    }
+    default: {
+      return placement as Placement
+    }
+  }
+}
+
+export default getRTLPlacement

package/src/utils/index.ts

@@ -1,5 +1,6 @@
+import getRTLPlacement from './getRTLPlacement'
 import isInViewport from './isInViewport'
 import isObjectInArray from './isObjectInArray'
 import isRTL from './isRTL'
 
-export { isInViewport, isObjectInArray, isRTL }
+export { getRTLPlacement, isInViewport, isObjectInArray, isRTL }