@coreui/react 4.9.0-alpha.0 → 4.9.0-beta.0

package/dist/props.d.ts

@@ -4,4 +4,4 @@ export declare const colorPropType: PropTypes.Requireable<string>;
 export declare const placementPropType: PropTypes.Requireable<Placements>;
 export declare const shapePropType: PropTypes.Requireable<string>;
 export declare const textColorsPropType: PropTypes.Requireable<string>;
-export declare const triggerPropType: PropTypes.Requireable<Triggers>;
+export declare const triggerPropType: PropTypes.Requireable<NonNullable<Triggers | NonNullable<Triggers>[] | null | undefined>>;

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.9.0-alpha.0",
+  "version": "4.9.0-beta.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -37,13 +37,13 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.11.7",
-    "@rollup/plugin-commonjs": "^24.1.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-typescript": "^11.1.0",
+    "@popperjs/core": "^2.11.8",
+    "@rollup/plugin-commonjs": "^25.0.1",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-typescript": "^11.1.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
-    "@types/react": "18.2.6",
+    "@types/react": "18.2.11",
     "@types/react-dom": "^18.2.4",
     "@types/react-transition-group": "^4.4.6",
     "classnames": "^2.3.2",
@@ -54,13 +54,13 @@
     "react-dom": "^18.2.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "rollup": "^3.21.6",
-    "tslib": "^2.5.0",
+    "rollup": "^3.25.0",
+    "tslib": "^2.5.3",
     "ts-jest": "^29.1.0",
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@coreui/coreui": "4.3.0-alpha.0",
+    "@coreui/coreui": "4.3.0-beta.0",
     "react": ">=17",
     "react-dom": ">=17"
   }

package/src/components/accordion/index.ts

@@ -4,10 +4,4 @@ import { CAccordionButton } from './CAccordionButton'
 import { CAccordionHeader } from './CAccordionHeader'
 import { CAccordionItem } from './CAccordionItem'
 
-export {
-  CAccordion,
-  CAccordionBody,
-  CAccordionButton,
-  CAccordionHeader,
-  CAccordionItem,
-}
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem }

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/CFormSelect.tsx

@@ -9,6 +9,7 @@ type Option = {
   label?: string
   value?: string
 }
+
 export interface CFormSelectProps
   extends CFormControlWrapperProps,
     Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
@@ -102,7 +103,8 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
                   <option
                     {...(typeof option === 'object' &&
                       option.disabled && { disabled: option.disabled })}
-                    {...(typeof option === 'object' && option.value && { value: option.value })}
+                    {...(typeof option === 'object' &&
+                      option.value !== undefined && { value: option.value })}
                     key={index}
                   >
                     {typeof option === 'string' ? option : option.label}

package/src/components/modal/CModal.tsx

@@ -142,6 +142,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
         return setStaticBackdrop(true)
       }
 
+      setVisible(false)
       return onClose && onClose()
     }
 
@@ -174,6 +175,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
           document.body.style.removeProperty('padding-right')
         }
       }
+
       return () => {
         document.body.classList.remove('modal-open')
         if (backdrop) {

package/src/components/popover/CPopover.tsx

@@ -1,12 +1,13 @@
 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' | 'content'> {
   /**
@@ -49,6 +50,20 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
   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 CPopover: FC<CPopoverProps> = ({
   children,
   className,
@@ -62,33 +77,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 +154,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/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap

@@ -11,10 +11,11 @@ exports[`CPopover customize 1`] = `
   <div
     class="popover bs-popover-end fade"
     role="tooltip"
-    style="position: absolute; left: 0px; top: 0px;"
+    style="position: absolute; left: 0px; top: 0px; margin: 0px;"
   >
     <div
       class="popover-arrow"
+      data-popper-arrow="true"
       style="position: absolute;"
     />
     <div

package/src/components/progress/CProgress.tsx

@@ -29,6 +29,7 @@ export interface CProgressProps
   white?: boolean
 }
 
+// TODO: update markup and add '.progress-stacked' in v5
 export const CProgress = forwardRef<HTMLDivElement, CProgressProps>(
   ({ children, className, height, thin, value = 0, white, ...rest }, ref) => {
     return (

package/src/components/sidebar/CSidebar.tsx

@@ -98,7 +98,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
       sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
       sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
 
-      window.addEventListener('resize', () => handleResize())
+      window.addEventListener('resize', handleResize)
       window.addEventListener('mouseup', handleClickOutside)
       window.addEventListener('keyup', handleKeyup)
 
@@ -108,7 +108,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
       })
 
       return () => {
-        window.removeEventListener('resize', () => handleResize())
+        window.removeEventListener('resize', handleResize)
         window.removeEventListener('mouseup', handleClickOutside)
         window.removeEventListener('keyup', handleKeyup)
 

package/src/components/spinner/CSpinner.tsx

@@ -51,8 +51,10 @@ export const CSpinner = forwardRef<HTMLDivElement | HTMLSpanElement, CSpinnerPro
       <Component
         className={classNames(
           `spinner-${variant}`,
-          `text-${color}`,
-          size && `spinner-${variant}-${size}`,
+          {
+            [`spinner-${variant}-${size}`]: size,
+            [`text-${color}`]: color,
+          },
           className,
         )}
         role="status"

package/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CSpinner customize 1`] = `
 <div>
   <h3
-    class="spinner-grow text-warning spinner-grow-sm bazinga"
+    class="spinner-grow spinner-grow-sm text-warning bazinga"
     role="status"
   >
     <span
@@ -18,7 +18,7 @@ exports[`CSpinner customize 1`] = `
 exports[`loads and displays CSpinner component 1`] = `
 <div>
   <div
-    class="spinner-border text-undefined"
+    class="spinner-border"
     role="status"
   >
     <span

package/src/components/table/CTable.tsx

@@ -201,7 +201,8 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
                 <CTableRow {...(item._props && { ...item._props })} key={index}>
                   {columnNames &&
                     columnNames.map((colName: string, index: number) => {
-                      return item[colName] ? (
+                      // eslint-disable-next-line unicorn/no-negated-condition
+                      return item[colName] !== undefined ? (
                         <CTableDataCell
                           {...(item._cellProps && {
                             ...(item._cellProps['all'] && { ...item._cellProps['all'] }),

package/src/components/tooltip/CTooltip.tsx

@@ -1,12 +1,13 @@
-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 Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
   /**
@@ -18,7 +19,7 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
    */
   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 Omit<HTMLAttributes<HTMLDivElement>, 'con
    */
   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/hooks/index.ts

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

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

@@ -57,4 +57,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,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 (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/accordion/__tests__/__snapshots__/CAccordionCollapse.spec.tsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`loads and displays CAccordionCollapse component 1`] = `
-<div>
-  <div
-    class="accordion-collapse collapse"
-  >
-    Test
-  </div>
-</div>
-`;