@coreui/react 4.1.2 → 4.2.0

package/src/components/tooltip/CTooltip.tsx

@@ -1,19 +1,24 @@
-import React, { FC, ReactElement, ReactNode, useState } from 'react'
+import React, { FC, ReactNode, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import PropTypes from 'prop-types'
+
 import classNames from 'classnames'
-import { Manager, Popper, Reference } from 'react-popper'
+import PropTypes from 'prop-types'
+import { usePopper } from 'react-popper'
 import { Transition } from 'react-transition-group'
 
-// import { CTooltipContent } from './CTooltipContent'
 import { Triggers, triggerPropType } from '../Types'
 
 export interface CTooltipProps {
-  children: ReactElement
+  // TODO: find solution to not use any
+  children: any
   /**
    * Content node for your component.
    */
   content: ReactNode | string
+  /**
+   * Offset of the popover relative to its target.
+   */
+  offset?: [number, number]
   /**
    * Callback fired when the component requests to be hidden.
    */
@@ -41,15 +46,33 @@ export interface CTooltipProps {
 export const CTooltip: FC<CTooltipProps> = ({
   children,
   content,
-  placement = 'top',
+  offset = [0, 0],
   onHide,
   onShow,
+  placement = 'top',
   trigger = 'hover',
   visible,
   ...rest
 }) => {
+  const tooltipRef = useRef()
   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,
+  })
+
   const getTransitionClass = (state: string) => {
     return state === 'entering'
       ? 'fade'
@@ -61,30 +84,27 @@ export const CTooltip: FC<CTooltipProps> = ({
   }
 
   return (
-    <Manager>
-      <Reference>
-        {({ ref }) =>
-          React.cloneElement(children, {
-            ref: ref,
-            ...((trigger === 'click' || trigger.includes('click')) && {
-              onClick: () => setVisible(!_visible),
-            }),
-            ...((trigger === 'focus' || trigger.includes('focus')) && {
-              onFocus: () => setVisible(true),
-              onBlur: () => setVisible(false),
-            }),
-            ...((trigger === 'hover' || trigger.includes('hover')) && {
-              onMouseEnter: () => setVisible(true),
-              onMouseLeave: () => setVisible(false),
-            }),
-          })
-        }
-      </Reference>
+    <>
+      {React.cloneElement(children, {
+        ref: setReferenceElement,
+        ...((trigger === 'click' || trigger.includes('click')) && {
+          onClick: () => setVisible(!_visible),
+        }),
+        ...((trigger === 'focus' || trigger.includes('focus')) && {
+          onFocus: () => setVisible(true),
+          onBlur: () => setVisible(false),
+        }),
+        ...((trigger === 'hover' || trigger.includes('hover')) && {
+          onMouseEnter: () => setVisible(true),
+          onMouseLeave: () => setVisible(false),
+        }),
+      })}
       {typeof window !== 'undefined' &&
         createPortal(
           <Transition
             in={_visible}
             mountOnEnter
+            nodeRef={tooltipRef}
             onEnter={onShow}
             onExit={onHide}
             timeout={{
@@ -96,40 +116,38 @@ export const CTooltip: FC<CTooltipProps> = ({
             {(state) => {
               const transitionClass = getTransitionClass(state)
               return (
-                <Popper placement={placement}>
-                  {({ arrowProps, style, ref }) => (
-                    <div
-                      className={classNames(
-                        `tooltip bs-tooltip-${
-                          placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
-                        }`,
-                        transitionClass,
-                      )}
-                      ref={ref}
-                      role="tooltip"
-                      style={style}
-                      {...rest}
-                    >
-                      <div className="tooltip-arrow" {...arrowProps}></div>
-                      <div className="tooltip-inner">{content}</div>
-                    </div>
+                <div
+                  className={classNames(
+                    `tooltip bs-tooltip-${
+                      placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
+                    }`,
+                    transitionClass,
                   )}
-                </Popper>
+                  ref={setPopperElement}
+                  role="tooltip"
+                  style={styles.popper}
+                  {...attributes.popper}
+                  {...rest}
+                >
+                  <div className="tooltip-arrow" style={styles.arrow} ref={setArrowElement}></div>
+                  <div className="tooltip-inner">{content}</div>
+                </div>
               )
             }}
           </Transition>,
           document.body,
         )}
-    </Manager>
+    </>
   )
 }
 
 CTooltip.propTypes = {
   children: PropTypes.any,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
+  offset: PropTypes.any, // TODO: find good proptype
   onHide: PropTypes.func,
   onShow: PropTypes.func,
+  placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
   trigger: triggerPropType,
   visible: PropTypes.bool,
 }

package/src/components/tooltip/index.ts

@@ -0,0 +1,3 @@
+import { CTooltip } from './CTooltip'
+
+export { CTooltip }

package/src/index.ts

@@ -1,243 +1 @@
-import { CAccordion } from './components/accordion/CAccordion'
-import { CAccordionBody } from './components/accordion/CAccordionBody'
-import { CAccordionButton } from './components/accordion/CAccordionButton'
-import { CAccordionCollapse } from './components/accordion/CAccordionCollapse'
-import { CAccordionHeader } from './components/accordion/CAccordionHeader'
-import { CAccordionItem } from './components/accordion/CAccordionItem'
-import { CAlert } from './components/alert/CAlert'
-import { CAlertHeading } from './components/alert/CAlertHeading'
-import { CAlertLink } from './components/alert/CAlertLink'
-import { CAvatar } from './components/avatar/CAvatar'
-import { CBadge } from './components/badge/CBadge'
-import { CBackdrop } from './components/backdrop/CBackdrop'
-import { CBreadcrumb } from './components/breadcrumb/CBreadcrumb'
-import { CBreadcrumbItem } from './components/breadcrumb/CBreadcrumbItem'
-import { CButton } from './components/button/CButton'
-import { CButtonGroup } from './components/button-group/CButtonGroup'
-import { CButtonToolbar } from './components/button-group/CButtonToolbar'
-import { CCallout } from './components/callout/CCallout'
-import { CCard } from './components/card/CCard'
-import { CCardBody } from './components/card/CCardBody'
-import { CCardFooter } from './components/card/CCardFooter'
-import { CCardGroup } from './components/card/CCardGroup'
-import { CCardHeader } from './components/card/CCardHeader'
-import { CCardImage } from './components/card/CCardImage'
-import { CCardImageOverlay } from './components/card/CCardImageOverlay'
-import { CCardLink } from './components/card/CCardLink'
-import { CCardSubtitle } from './components/card/CCardSubtitle'
-import { CCardText } from './components/card/CCardText'
-import { CCardTitle } from './components/card/CCardTitle'
-import { CCarousel } from './components/carousel/CCarousel'
-import { CCarouselCaption } from './components/carousel/CCarouselCaption'
-import { CCarouselItem } from './components/carousel/CCarouselItem'
-import { CCollapse } from './components/collapse/CCollapse'
-import { CCloseButton } from './components/close-button/CCloseButton'
-import { CDropdown } from './components/dropdown/CDropdown'
-import { CDropdownDivider } from './components/dropdown/CDropdownDivider'
-import { CDropdownHeader } from './components/dropdown/CDropdownHeader'
-import { CDropdownItem } from './components/dropdown/CDropdownItem'
-import { CDropdownItemPlain } from './components/dropdown/CDropdownItemPlain'
-import { CDropdownMenu } from './components/dropdown/CDropdownMenu'
-import { CDropdownToggle } from './components/dropdown/CDropdownToggle'
-import { CCol } from './components/grid/CCol'
-import { CContainer } from './components/grid/CContainer'
-import { CRow } from './components/grid/CRow'
-import { CFooter } from './components/footer/CFooter'
-import { CForm } from './components/form/CForm'
-import { CFormCheck } from './components/form/CFormCheck'
-import { CFormFeedback } from './components/form/CFormFeedback'
-import { CFormFloating } from './components/form/CFormFloating'
-import { CFormInput } from './components/form/CFormInput'
-import { CFormLabel } from './components/form/CFormLabel'
-import { CFormRange } from './components/form/CFormRange'
-import { CFormSelect } from './components/form/CFormSelect'
-import { CFormSwitch } from './components/form/CFormSwitch'
-import { CFormText } from './components/form/CFormText'
-import { CFormTextarea } from './components/form/CFormTextarea'
-import { CInputGroup } from './components/form/CInputGroup'
-import { CInputGroupText } from './components/form/CInputGroupText'
-import { CHeader } from './components/header/CHeader'
-import { CHeaderBrand } from './components/header/CHeaderBrand'
-import { CHeaderDivider } from './components/header/CHeaderDivider'
-import { CHeaderNav } from './components/header/CHeaderNav'
-import { CHeaderText } from './components/header/CHeaderText'
-import { CHeaderToggler } from './components/header/CHeaderToggler'
-import { CImage } from './components/image/CImage'
-import { CLink } from './components/link/CLink'
-import { CListGroup } from './components/list-group/CListGroup'
-import { CListGroupItem } from './components/list-group/CListGroupItem'
-import { CModal } from './components/modal/CModal'
-import { CModalBody } from './components/modal/CModalBody'
-import { CModalContent } from './components/modal/CModalContent'
-import { CModalDialog } from './components/modal/CModalDialog'
-import { CModalFooter } from './components/modal/CModalFooter'
-import { CModalHeader } from './components/modal/CModalHeader'
-import { CModalTitle } from './components/modal/CModalTitle'
-import { CNav } from './components/nav/CNav'
-import { CNavGroupItems } from './components/nav/CNavGroupItems'
-import { CNavGroup } from './components/nav/CNavGroup'
-import { CNavItem } from './components/nav/CNavItem'
-import { CNavLink } from './components/nav/CNavLink'
-import { CNavTitle } from './components/nav/CNavTitle'
-import { CNavbar } from './components/navbar/CNavbar'
-import { CNavbarBrand } from './components/navbar/CNavbarBrand'
-import { CNavbarNav } from './components/navbar/CNavbarNav'
-import { CNavbarText } from './components/navbar/CNavbarText'
-import { CNavbarToggler } from './components/navbar/CNavbarToggler'
-import { CPagination } from './components/pagination/CPagination'
-import { CPaginationItem } from './components/pagination/CPaginationItem'
-import { CPlaceholder } from './components/placeholder/CPlaceholder'
-import { CPopover } from './components/popover/CPopover'
-import { CProgress } from './components/progress/CProgress'
-import { CProgressBar } from './components/progress/CProgressBar'
-import { CSidebar } from './components/sidebar/CSidebar'
-import { COffcanvas } from './components/offcanvas/COffcanvas'
-import { COffcanvasBody } from './components/offcanvas/COffcanvasBody'
-import { COffcanvasHeader } from './components/offcanvas/COffcanvasHeader'
-import { COffcanvasTitle } from './components/offcanvas/COffcanvasTitle'
-import { CSidebarBrand } from './components/sidebar/CSidebarBrand'
-import { CSidebarFooter } from './components/sidebar/CSidebarFooter'
-import { CSidebarToggler } from './components/sidebar/CSidebarToggler'
-import { CSidebarHeader } from './components/sidebar/CSidebarHeader'
-import { CSidebarNav } from './components/sidebar/CSidebarNav'
-import { CSpinner } from './components/spinner/CSpinner'
-import { CTable } from './components/table/CTable'
-import { CTableBody } from './components/table/CTableBody'
-import { CTableCaption } from './components/table/CTableCaption'
-import { CTableDataCell } from './components/table/CTableDataCell'
-import { CTableFoot } from './components/table/CTableFoot'
-import { CTableHead } from './components/table/CTableHead'
-import { CTableHeaderCell } from './components/table/CTableHeaderCell'
-import { CTableRow } from './components/table/CTableRow'
-import { CTabContent } from './components/tabs/CTabContent'
-import { CTabPane } from './components/tabs/CTabPane'
-import { CToast } from './components/toast/CToast'
-import { CToastBody } from './components/toast/CToastBody'
-import { CToastClose } from './components/toast/CToastClose'
-import { CToastHeader } from './components/toast/CToastHeader'
-import { CToaster } from './components/toast/CToaster'
-import { CTooltip } from './components/tooltip/CTooltip'
-
-export {
-  CAccordion,
-  CAccordionBody,
-  CAccordionButton,
-  CAccordionCollapse,
-  CAccordionHeader,
-  CAccordionItem,
-  CAlert,
-  CAlertHeading,
-  CAlertLink,
-  CAvatar,
-  CBadge,
-  CBackdrop,
-  CBreadcrumb,
-  CBreadcrumbItem,
-  CButton,
-  CButtonGroup,
-  CButtonToolbar,
-  CCallout,
-  CCard,
-  CCardBody,
-  CCardFooter,
-  CCardHeader,
-  CCardImage,
-  CCardImageOverlay,
-  CCardLink,
-  CCardSubtitle,
-  CCardText,
-  CCardTitle,
-  CCarousel,
-  CCarouselCaption,
-  CCarouselItem,
-  CCloseButton,
-  CCollapse,
-  CDropdown,
-  CDropdownDivider,
-  CDropdownHeader,
-  CDropdownItem,
-  CDropdownItemPlain,
-  CDropdownMenu,
-  CDropdownToggle,
-  CCol,
-  CContainer,
-  CRow,
-  CFooter,
-  CCardGroup,
-  CForm,
-  CFormCheck,
-  CFormFeedback,
-  CFormFloating,
-  CFormInput,
-  CFormLabel,
-  CFormRange,
-  CFormSelect,
-  CFormSwitch,
-  CFormText,
-  CFormTextarea,
-  CImage,
-  CInputGroup,
-  CInputGroupText,
-  CHeader,
-  CHeaderBrand,
-  CHeaderDivider,
-  CHeaderNav,
-  CHeaderText,
-  CHeaderToggler,
-  CLink,
-  CListGroup,
-  CListGroupItem,
-  CModal,
-  CModalBody,
-  CModalContent,
-  CModalDialog,
-  CModalFooter,
-  CModalHeader,
-  CModalTitle,
-  CNav,
-  CNavGroup,
-  CNavGroupItems,
-  CNavItem,
-  CNavLink,
-  CNavTitle,
-  CNavbar,
-  CNavbarBrand,
-  CNavbarNav,
-  CNavbarText,
-  CNavbarToggler,
-  CPagination,
-  CPaginationItem,
-  CPlaceholder,
-  CPopover,
-  CProgress,
-  CProgressBar,
-  COffcanvas,
-  COffcanvasBody,
-  COffcanvasHeader,
-  COffcanvasTitle,
-  CSidebar,
-  CSidebarBrand,
-  CSidebarFooter,
-  CSidebarToggler,
-  CSidebarHeader,
-  CSidebarNav,
-  CSpinner,
-  CTable,
-  CTableBody,
-  CTableCaption,
-  CTableDataCell,
-  CTableFoot,
-  CTableHead,
-  CTableHeaderCell,
-  CTableRow,
-  CTabContent,
-  CTabPane,
-  CToast,
-  CToastBody,
-  CToastClose,
-  CToastHeader,
-  CToaster,
-  CTooltip,
-}
-
 export * from './components/'