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

package/src/hooks/useColorModes.ts

@@ -1,16 +1,22 @@
-import { useEffect, useState } from 'react'
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 
 interface UseColorModesOutput {
-  getColorMode: () => string
+  colorMode: string | undefined
   isColorModeSet: () => boolean
-  setColorMode: (mode: string) => void
+  setColorMode: Dispatch<SetStateAction<string>>
 }
 
-const getStoredTheme = (localStorageItemName: string) => localStorage.getItem(localStorageItemName)
+const getStoredTheme = (localStorageItemName: string) =>
+  typeof window !== 'undefined' && localStorage.getItem(localStorageItemName)
+
 const setStoredTheme = (localStorageItemName: string, colorMode: string) =>
   localStorage.setItem(localStorageItemName, colorMode)
 
 const getPreferredColorScheme = (localStorageItemName: string) => {
+  if (typeof window === 'undefined') {
+    return 'light'
+  }
+
   const storedTheme = getStoredTheme(localStorageItemName)
 
   if (storedTheme) {
@@ -33,25 +39,29 @@ const setTheme = (colorMode: string) => {
 export const useColorModes = (
   localStorageItemName = 'coreui-react-color-scheme',
 ): UseColorModesOutput => {
-  const [colorMode, setColorMode] = useState<string>(getPreferredColorScheme(localStorageItemName))
+  const [colorMode, setColorMode] = useState<string | undefined>(
+    getPreferredColorScheme(localStorageItemName),
+  )
 
   useEffect(() => {
-    setStoredTheme(localStorageItemName, colorMode)
-    setTheme(colorMode)
+    if (colorMode) {
+      setStoredTheme(localStorageItemName, colorMode)
+      setTheme(colorMode)
+    }
   }, [colorMode])
 
   useEffect(() => {
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
       const storedTheme = getStoredTheme(localStorageItemName)
-      if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      if (storedTheme !== 'light' && storedTheme !== 'dark' && colorMode) {
         setTheme(colorMode)
       }
     })
-  }, [])
+  })
 
   return {
-    getColorMode: () => colorMode,
+    colorMode,
     isColorModeSet: () => Boolean(getStoredTheme(localStorageItemName)),
-    setColorMode: (mode: string) => setColorMode(mode),
+    setColorMode,
   }
 }

package/src/hooks/usePopper.ts

@@ -0,0 +1,31 @@
+import { useRef } from 'react'
+import { createPopper } from '@popperjs/core'
+import type { Instance, Options } from '@popperjs/core'
+
+interface UsePopperOutput {
+  popper: Instance | undefined
+  initPopper: (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => void
+  destroyPopper: () => void
+}
+
+export const usePopper = (): UsePopperOutput => {
+  const _popper = useRef<Instance>()
+
+  const initPopper = (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => {
+    _popper.current = createPopper(reference, popper, options)
+  }
+
+  const destroyPopper = () => {
+    if (_popper.current) {
+      _popper.current.destroy()
+    }
+
+    _popper.current = undefined
+  }
+
+  return {
+    popper: _popper.current,
+    initPopper,
+    destroyPopper,
+  }
+}

package/src/props.ts

@@ -16,6 +16,11 @@ export const colorPropType = PropTypes.oneOfType([
   PropTypes.string,
 ])
 
+export const fallbackPlacementsPropType = PropTypes.oneOfType([
+  PropTypes.arrayOf(PropTypes.oneOf<Placements>(['top', 'bottom', 'right', 'left']).isRequired),
+  PropTypes.oneOf<Placements>(['top', 'bottom', 'right', 'left']),
+])
+
 export const placementPropType = PropTypes.oneOf<Placements>([
   'auto',
   'auto-start',

package/src/utils/getRTLPlacement.ts

@@ -0,0 +1,18 @@
+import { Placement } from '@popperjs/core'
+import { isRTL } from '../utils'
+
+const getRTLPlacement = (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 default getRTLPlacement

package/src/utils/index.ts

@@ -1,4 +1,5 @@
+import getRTLPlacement from './getRTLPlacement'
 import isInViewport from './isInViewport'
 import isRTL from './isRTL'
 
-export { isInViewport, isRTL }
+export { getRTLPlacement, isInViewport, isRTL }