@coreui/react-pro 4.11.3 → 4.12.0-beta.0

package/src/components/tooltip/CTooltip.tsx

@@ -1,14 +1,15 @@
-import React, { FC, HTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react'
+import React, { FC, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
-import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { usePopper } from 'react-popper'
+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'
 
-export interface CTooltipProps extends HTMLAttributes<HTMLDivElement> {
+export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
   /**
    * A string of all className you want applied to the component.
    */
@@ -18,7 +19,7 @@ export interface CTooltipProps extends HTMLAttributes<HTMLDivElement> {
    */
   content: ReactNode | string
   /**
-   * Offset of the popover relative to its target.
+   * Offset of the tooltip relative to its target.
    */
   offset?: [number, number]
   /**
@@ -40,16 +41,30 @@ export interface CTooltipProps extends HTMLAttributes<HTMLDivElement> {
    */
   placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left'
   /**
-   * Toggle the visibility of popover component.
+   * Toggle the visibility of tooltip component.
    */
   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,
   className,
   content,
-  offset = [0, 0],
+  offset = [0, 6],
   onHide,
   onShow,
   placement = 'top',
@@ -57,33 +72,53 @@ export const CTooltip: FC<CTooltipProps> = ({
   visible,
   ...rest
 }) => {
-  const tooltipRef = useRef()
+  const tooltipRef = useRef(null)
+  const togglerRef = useRef(null)
+  const popper = useRef<Instance>()
   const [_visible, setVisible] = useState(visible)
 
-  const [referenceElement, setReferenceElement] = useState(null)
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
-  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    modifiers: [
-      { name: 'arrow', options: { element: arrowElement } },
-      {
-        name: 'offset',
-        options: {
-          offset: offset,
-        },
-      },
-    ],
-    placement: placement,
-  })
-
   useEffect(() => {
     setVisible(visible)
   }, [visible])
 
+  useEffect(() => {
+    if (_visible) {
+      initPopper()
+    }
+
+    return () => {
+      destroyPopper()
+    }
+  }, [_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()
+    }
+
+    popper.current = undefined
+  }
+
   return (
     <>
       {React.cloneElement(children as React.ReactElement<any>, {
-        ref: setReferenceElement,
+        ref: togglerRef,
         ...((trigger === 'click' || trigger.includes('click')) && {
           onClick: () => setVisible(!_visible),
         }),
@@ -101,7 +136,6 @@ export const CTooltip: FC<CTooltipProps> = ({
           <Transition
             in={_visible}
             mountOnEnter
-            nodeRef={tooltipRef}
             onEnter={onShow}
             onExit={onHide}
             timeout={{
@@ -114,20 +148,20 @@ export const CTooltip: FC<CTooltipProps> = ({
               <div
                 className={classNames(
                   'tooltip',
-                  `bs-popover-${placement.replace('left', 'start').replace('right', 'end')}`,
+                  `bs-tooltip-${getPlacement(placement, togglerRef.current)
+                    .replace('left', 'start')
+                    .replace('right', 'end')}`,
                   'fade',
                   {
                     show: state === 'entered',
                   },
                   className,
                 )}
-                ref={setPopperElement}
+                ref={tooltipRef}
                 role="tooltip"
-                style={styles.popper}
-                {...attributes.popper}
                 {...rest}
               >
-                <div className="tooltip-arrow" style={styles.arrow} ref={setArrowElement}></div>
+                <div data-popper-arrow className="tooltip-arrow"></div>
                 <div className="tooltip-inner">{content}</div>
               </div>
             )}

package/src/components/tooltip/__tests__/CTooltip.spec.tsx

@@ -13,7 +13,7 @@ beforeEach(() => {
 })
 
 afterEach(() => {
-  container && document.body.removeChild(container)
+  container && container.remove()
   container = null
 })
 

package/src/components/virtual-scroller/CVirtualScroller.tsx

@@ -73,7 +73,6 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
         }
         ref={forkedRef}
         style={{
-          // height: maxHeight > viewportHeight ? viewportHeight : maxHeight,
           height: viewportHeight,
           overflowY: 'auto',
         }}

package/src/hooks/index.ts

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

package/src/hooks/useColorModes.ts

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react'
+
+interface UseColorModesOutput {
+  getColorMode: () => string
+  setColorMode: (mode: string) => void
+}
+
+const getStoredTheme = (localStorageItemName: string) => localStorage.getItem(localStorageItemName)
+const setStoredTheme = (localStorageItemName: string, colorMode: string) =>
+  localStorage.setItem(localStorageItemName, colorMode)
+
+const getPreferredColorScheme = (localStorageItemName: string) => {
+  const storedTheme = getStoredTheme(localStorageItemName)
+
+  if (storedTheme) {
+    return storedTheme
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+const setTheme = (colorMode: string) => {
+  document.documentElement.dataset.coreuiTheme =
+    colorMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : colorMode
+
+  const event = new Event('ColorSchemeChange')
+  document.documentElement.dispatchEvent(event)
+}
+
+export const useColorModes = (
+  localStorageItemName = 'coreui-react-color-scheme',
+): UseColorModesOutput => {
+  const [colorMode, setColorMode] = useState<string>(getPreferredColorScheme(localStorageItemName))
+
+  useEffect(() => {
+    setStoredTheme(localStorageItemName, colorMode)
+    setTheme(colorMode)
+  }, [colorMode])
+
+  useEffect(() => {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      const storedTheme = getStoredTheme(localStorageItemName)
+      if (storedTheme !== 'light' && storedTheme !== 'dark') {
+        setTheme(colorMode)
+      }
+    })
+  }, [])
+
+  return {
+    getColorMode: () => colorMode,
+    setColorMode: (mode: string) => setColorMode(mode),
+  }
+}

package/src/hooks/useForkedRef.ts

@@ -38,7 +38,7 @@ export function assignRef<RefValueType = any>(
   } else {
     try {
       ref.current = value
-    } catch (error) {
+    } catch {
       throw new Error(`Cannot assign value "${value}" to ref "${ref}"`)
     }
   }

package/src/index.ts

@@ -1 +1,2 @@
 export * from './components/'
+export * from './hooks/'

package/src/props.ts

@@ -68,4 +68,7 @@ export const textColorsPropType = PropTypes.oneOfType([
   PropTypes.string,
 ])
 
-export const triggerPropType = PropTypes.oneOf<Triggers>(['hover', 'focus', 'click'])
+export const triggerPropType = PropTypes.oneOfType([
+  PropTypes.arrayOf(PropTypes.oneOf<Triggers>(['hover', 'focus', 'click']).isRequired),
+  PropTypes.oneOf<Triggers>(['hover', 'focus', 'click']),
+])

package/src/utils/index.ts

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

package/src/utils/isRTL.ts

@@ -0,0 +1,13 @@
+const isRTL = (element?: HTMLElement | HTMLDivElement | null) => {
+  if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
+    return true
+  }
+
+  if (element) {
+    return element.closest('[dir="rtl"]') !== null
+  }
+
+  return false
+}
+
+export default isRTL

package/src/components/multi-select/__tests__/CMultiSelectCleaner.spec.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CMultiSelectCleaner } from '../CMultiSelectCleaner'
-
-test('loads and displays CMultiSelectCleaner component', async () => {
-  const { container } = render(<CMultiSelectCleaner />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CMultiSelectCleaner customize', async () => {
-  const { container } = render(<CMultiSelectCleaner />)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('form-multi-select-selection-cleaner')
-})

package/src/components/multi-select/__tests__/CMultiSelectSearchInput.spec.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CMultiSelectSearchInput } from '../CMultiSelectSearchInput'
-
-test('loads and displays CMultiSelectSearchInput component', async () => {
-  const { container } = render(<CMultiSelectSearchInput />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CMultiSelectSearchInput customize', async () => {
-  const { container } = render(<CMultiSelectSearchInput placeholder="some placeholder" />)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('form-multi-select-search')
-  expect(container.firstChild).toHaveAttribute('type', 'text')
-  expect(container.firstChild).toHaveAttribute('placeholder', 'some placeholder')
-})

package/src/components/multi-select/__tests__/CMultiSelectSelectAllButton.spec.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CMultiSelectSelectAllButton } from '../CMultiSelectSelectAllButton'
-
-test('loads and displays CMultiSelectSelectAllButton component', async () => {
-  const { container } = render(<CMultiSelectSelectAllButton>text</CMultiSelectSelectAllButton>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CMultiSelectSelectAllButton customize', async () => {
-  const { container } = render(
-    <CMultiSelectSelectAllButton placeholder="some placeholder">
-      bazinga
-    </CMultiSelectSelectAllButton>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('form-multi-select-all')
-  expect(container.firstChild).toHaveAttribute('type', 'button')
-  expect(container.firstChild).toHaveTextContent('bazinga')
-})

package/src/components/multi-select/__tests__/__snapshots__/CMultiSelectCleaner.spec.tsx.snap

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CMultiSelectCleaner customize 1`] = `
-<div>
-  <button
-    class="form-multi-select-selection-cleaner"
-    type="button"
-  />
-</div>
-`;
-
-exports[`loads and displays CMultiSelectCleaner component 1`] = `
-<div>
-  <button
-    class="form-multi-select-selection-cleaner"
-    type="button"
-  />
-</div>
-`;

package/src/components/multi-select/__tests__/__snapshots__/CMultiSelectSearchInput.spec.tsx.snap

@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CMultiSelectSearchInput customize 1`] = `
-<div>
-  <input
-    class="form-multi-select-search"
-    placeholder="some placeholder"
-    type="text"
-  />
-</div>
-`;
-
-exports[`loads and displays CMultiSelectSearchInput component 1`] = `
-<div>
-  <input
-    class="form-multi-select-search"
-    type="text"
-  />
-</div>
-`;

package/src/components/multi-select/__tests__/__snapshots__/CMultiSelectSelectAllButton.spec.tsx.snap

@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CMultiSelectSelectAllButton customize 1`] = `
-<div>
-  <button
-    class="form-multi-select-all"
-    placeholder="some placeholder"
-    type="button"
-  >
-    bazinga
-  </button>
-</div>
-`;
-
-exports[`loads and displays CMultiSelectSelectAllButton component 1`] = `
-<div>
-  <button
-    class="form-multi-select-all"
-    type="button"
-  >
-    text
-  </button>
-</div>
-`;

package/src/components/smart-table/CSmartTableCleaner.tsx

@@ -1,37 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
-
-import { cilFilterX } from '@coreui/icons'
-
-import CIcon from '@coreui/icons-react'
-
-interface CSmartTableCleanerProps extends HTMLAttributes<HTMLButtonElement> {
-  content?: string | ReactNode
-  isFiltered?: string
-}
-
-export const CSmartTableCleaner = forwardRef<HTMLButtonElement, CSmartTableCleanerProps>(
-  ({ content = <CIcon width={18} icon={cilFilterX} />, isFiltered, ...rest }, ref) => {
-    return (
-      <button
-        type="button"
-        className="btn btn-transparent"
-        {...(!isFiltered && {
-          disabled: true,
-          tabIndex: -1,
-        })}
-        {...rest}
-        ref={ref}
-      >
-        {content}
-      </button>
-    )
-  },
-)
-
-CSmartTableCleaner.propTypes = {
-  content: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  isFiltered: PropTypes.string,
-}
-
-CSmartTableCleaner.displayName = 'CSmartTableCleaner'