@coreui/react-pro 4.12.0-alpha.0 → 4.12.0-beta.0

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,4 +1,5 @@
+import { useColorModes } from './useColorModes'
 import { useForkedRef } from './useForkedRef'
 import { useStateWithCallback } from './useStateWithCallback'
 
-export { useForkedRef, useStateWithCallback }
+export { useColorModes, useForkedRef, useStateWithCallback }

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

@@ -68,4 +68,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/smart-table/CSmartTableCleaner.tsx

@@ -1,37 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
-
-import { cilFilterX } from '@coreui/icons'
-
-import CIcon from '@coreui/icons-react'
-
-interface CSmartTableCleanerProps extends HTMLAttributes<HTMLButtonElement> {
-  content?: string | ReactNode
-  isFiltered?: string
-}
-
-export const CSmartTableCleaner = forwardRef<HTMLButtonElement, CSmartTableCleanerProps>(
-  ({ content = <CIcon width={18} icon={cilFilterX} />, isFiltered, ...rest }, ref) => {
-    return (
-      <button
-        type="button"
-        className="btn btn-transparent"
-        {...(!isFiltered && {
-          disabled: true,
-          tabIndex: -1,
-        })}
-        {...rest}
-        ref={ref}
-      >
-        {content}
-      </button>
-    )
-  },
-)
-
-CSmartTableCleaner.propTypes = {
-  content: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  isFiltered: PropTypes.string,
-}
-
-CSmartTableCleaner.displayName = 'CSmartTableCleaner'