@coreui/react-pro 5.10.0 → 5.11.0

package/src/hooks/useClipboard.ts

@@ -0,0 +1,38 @@
+import { useState, useCallback } from 'react'
+
+/**
+ * useClipboard Hook
+ *
+ * Provides functionality to copy text to the clipboard and track the copy status.
+ *
+ * @returns An object containing the copy function, copy status, and any error encountered.
+ */
+export const useClipboard = () => {
+  const [isCopied, setIsCopied] = useState<boolean>(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  /**
+   * Copies the provided text to the clipboard.
+   *
+   * @param text - The text to be copied to the clipboard.
+   */
+  const copy = useCallback(async (text: string) => {
+    if (!navigator?.clipboard) {
+      setError(new Error('Clipboard API is not available'))
+      return
+    }
+
+    try {
+      await navigator.clipboard.writeText(text)
+      setIsCopied(true)
+      setError(null)
+      // Reset the isCopied state after 2 seconds
+      setTimeout(() => setIsCopied(false), 2000)
+    } catch (_error) {
+      setError(_error as Error)
+      setIsCopied(false)
+    }
+  }, [])
+
+  return { copy, isCopied, error }
+}

package/src/hooks/useColorModes.ts

@@ -7,13 +7,13 @@ interface UseColorModesOutput {
 }
 
 const getStoredTheme = (localStorageItemName: string) =>
-  typeof window !== 'undefined' && localStorage.getItem(localStorageItemName)
+  typeof globalThis !== 'undefined' && localStorage.getItem(localStorageItemName)
 
 const setStoredTheme = (localStorageItemName: string, colorMode: string) =>
   localStorage.setItem(localStorageItemName, colorMode)
 
 const getPreferredColorScheme = (localStorageItemName: string) => {
-  if (typeof window === 'undefined') {
+  if (typeof globalThis === 'undefined') {
     return 'light'
   }
 
@@ -23,12 +23,12 @@ const getPreferredColorScheme = (localStorageItemName: string) => {
     return storedTheme
   }
 
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  return globalThis.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
+    colorMode === 'auto' && globalThis.matchMedia('(prefers-color-scheme: dark)').matches
       ? 'dark'
       : colorMode
 
@@ -51,7 +51,7 @@ export const useColorModes = (
   }, [colorMode])
 
   useEffect(() => {
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
       const storedTheme = getStoredTheme(localStorageItemName)
       if (storedTheme !== 'light' && storedTheme !== 'dark' && colorMode) {
         setTheme(colorMode)

package/src/utils/index.ts

@@ -6,6 +6,7 @@ import isEqual from './isEqual'
 import isInViewport from './isInViewport'
 import isObjectInArray from './isObjectInArray'
 import isRTL from './isRTL'
+import mergeClassNames from './mergeClassNames'
 
 export {
   executeAfterTransition,
@@ -16,4 +17,5 @@ export {
   isInViewport,
   isObjectInArray,
   isRTL,
+  mergeClassNames,
 }

package/src/utils/mergeClassNames.ts

@@ -0,0 +1,25 @@
+const mergeClassNames = <T extends object>(
+  defaultClassNames: T,
+  customClassNames?: Partial<T>,
+): T => {
+  if (customClassNames === undefined || typeof customClassNames !== 'object') {
+    return defaultClassNames
+  }
+
+  const classNames: T = { ...defaultClassNames }
+
+  for (const key in customClassNames) {
+    if (customClassNames.hasOwnProperty(key)) {
+      const typedKey = key as keyof T
+      const customClassName = customClassNames[typedKey]?.toString()
+
+      classNames[typedKey] = customClassName?.startsWith('!')
+        ? (customClassName.slice(1).trim() as T[keyof T])
+        : (`${classNames[typedKey]} ${customClassName}`.trim() as T[keyof T])
+    }
+  }
+
+  return classNames
+}
+
+export default mergeClassNames