@coreui/react 4.8.0 → 4.9.0-alpha.1

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 import isInViewport from './isInViewport';
-export { isInViewport };
+import isRTL from './isRTL';
+export { isInViewport, isRTL };

package/dist/utils/isRTL.d.ts

@@ -0,0 +1,2 @@
+declare const isRTL: (element?: HTMLElement | HTMLDivElement | null) => boolean;
+export default isRTL;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.8.0",
+  "version": "4.9.0-alpha.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -37,15 +37,15 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.11.6",
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-typescript": "^11.0.0",
+    "@popperjs/core": "^2.11.7",
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-typescript": "^11.1.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@types/react-transition-group": "^4.4.5",
+    "@types/react": "18.2.6",
+    "@types/react-dom": "^18.2.4",
+    "@types/react-transition-group": "^4.4.6",
     "classnames": "^2.3.2",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
@@ -54,12 +54,13 @@
     "react-dom": "^18.2.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "rollup": "^3.19.1",
+    "rollup": "^3.21.6",
     "tslib": "^2.5.0",
-    "ts-jest": "^29.0.5",
+    "ts-jest": "^29.1.0",
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
+    "@coreui/coreui": "4.3.0-alpha.0",
     "react": ">=17",
     "react-dom": ">=17"
   }

package/src/components/dropdown/CDropdownMenu.tsx

@@ -7,6 +7,7 @@ import { Alignments, CDropdownContext } from './CDropdown'
 import { CConditionalPortal } from '../conditional-portal'
 
 import type { Placements } from '../../types'
+import { isRTL } from '../../utils'
 
 export interface CDropdownMenuProps
   extends HTMLAttributes<HTMLDivElement | HTMLUListElement>,
@@ -109,7 +110,7 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   }
 
   if (direction === 'dropup') {
-    _placement = 'top-start'
+    _placement = isRTL(dropdownMenuRef.current) ? 'top-end' : 'top-start'
   }
 
   if (direction === 'dropup-center') {
@@ -117,15 +118,15 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   }
 
   if (direction === 'dropend') {
-    _placement = 'right-start'
+    _placement = isRTL(dropdownMenuRef.current) ? 'left-start' : 'right-start'
   }
 
   if (direction === 'dropstart') {
-    _placement = 'left-start'
+    _placement = isRTL(dropdownMenuRef.current) ? 'right-start' : 'left-start'
   }
 
   if (alignment === 'end') {
-    _placement = 'bottom-end'
+    _placement = isRTL(dropdownMenuRef.current) ? 'bottom-start' : 'bottom-end'
   }
 
   const dropdownMenuComponent = (style?: React.CSSProperties, ref?: React.Ref<HTMLDivElement>) => (

package/src/components/form/CFormCheck.tsx

@@ -112,7 +112,7 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
       if (inputRef.current && indeterminate) {
         inputRef.current.indeterminate = indeterminate
       }
-    }, [indeterminate])
+    }, [indeterminate, inputRef.current])
 
     const FormControl = () => (
       <input

package/src/components/popover/CPopover.tsx

@@ -1,14 +1,15 @@
 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 CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
   /**
    * A string of all className you want applied to the component.
    */
@@ -49,6 +50,21 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
   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 CPopover: FC<CPopoverProps> = ({
   children,
   className,
@@ -62,33 +78,53 @@ export const CPopover: FC<CPopoverProps> = ({
   visible,
   ...rest
 }) => {
+  const popoverRef = useRef(null)
+  const togglerRef = useRef(null)
+  const popper = useRef<Instance>()
   const [_visible, setVisible] = useState(visible)
-  const popoverRef = useRef()
-
-  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 && popoverRef.current) {
+      popper.current = createPopper(togglerRef.current, popoverRef.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),
         }),
@@ -119,20 +155,20 @@ export const CPopover: FC<CPopoverProps> = ({
               <div
                 className={classNames(
                   'popover',
-                  `bs-popover-${placement.replace('left', 'start').replace('right', 'end')}`,
+                  `bs-popover-${getPlacement(placement, togglerRef.current)
+                    .replace('left', 'start')
+                    .replace('right', 'end')}`,
                   'fade',
                   {
                     show: state === 'entered',
                   },
                   className,
                 )}
-                ref={setPopperElement}
+                ref={popoverRef}
                 role="tooltip"
-                style={styles.popper}
-                {...attributes.popper}
                 {...rest}
               >
-                <div className="popover-arrow" style={styles.arrow} ref={setArrowElement}></div>
+                <div data-popper-arrow className="popover-arrow"></div>
                 <div className="popover-header">{title}</div>
                 <div className="popover-body">{content}</div>
               </div>

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/utils/index.ts

@@ -1,3 +1,4 @@
 import isInViewport from './isInViewport'
+import isRTL from './isRTL'
 
-export { isInViewport }
+export { isInViewport, 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