@coreui/react-pro 4.11.2 → 4.12.0-alpha.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,31 @@ 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 => {
+  console.log(element)
+  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 +73,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 +137,6 @@ export const CTooltip: FC<CTooltipProps> = ({
           <Transition
             in={_visible}
             mountOnEnter
-            nodeRef={tooltipRef}
             onEnter={onShow}
             onExit={onHide}
             timeout={{
@@ -114,20 +149,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/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/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 (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>
-`;