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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.9.0-alpha.1",
+  "version": "4.9.0-beta.1",
   "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/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

@@ -51,7 +51,6 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
 }
 
 const getPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
-  console.log(element)
   switch (placement) {
     case 'right': {
       return isRTL(element) ? 'left' : 'right'

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

@@ -47,7 +47,6 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
 }
 
 const getPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
-  console.log(element)
   switch (placement) {
     case 'right': {
       return isRTL(element) ? 'left' : 'right'

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,57 @@
+import { useEffect, useState } from 'react'
+
+interface UseColorModesOutput {
+  getColorMode: () => string
+  isColorModeSet: () => boolean
+  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,
+    isColorModeSet: () => Boolean(getStoredTheme(localStorageItemName)),
+    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/isRTL.ts

@@ -1,5 +1,5 @@
 const isRTL = (element?: HTMLElement | HTMLDivElement | null) => {
-  if (document.documentElement.dir === 'rtl') {
+  if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
     return true
   }
 

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>
-`;