refactor: improve typings

Author: mrholek

packages/coreui-react/src/components/carousel/CCarouselItem.tsx

@@ -29,7 +29,7 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
     const carouselItemRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, carouselItemRef)
 
-    const prevActive = useRef<boolean>()
+    const prevActive = useRef<boolean>(undefined)
     const [directionClassName, setDirectionClassName] = useState<string>()
     const [orderClassName, setOrderClassName] = useState<string>()
     const [activeClassName, setActiveClassName] = useState(active && 'active')
@@ -101,15 +101,15 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
           activeClassName,
           directionClassName,
           orderClassName,
-          className,
+          className
         )}
         ref={forkedRef}
         {...rest}
       >
         {children}
       </div>
     )
-  },
+  }
 )
 
 CCarouselItem.propTypes = {

packages/coreui-react/src/components/dropdown/CDropdown.tsx

@@ -171,8 +171,8 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
 
 interface ContextProps extends CDropdownProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  dropdownToggleRef: RefObject<any | undefined>
-  dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | undefined>
+  dropdownToggleRef: RefObject<any | null>
+  dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | null>
   setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
   portal: boolean
 }

packages/coreui-react/src/components/sidebar/CSidebarNav.tsx

@@ -10,6 +10,9 @@ import React, {
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import type { CNavGroupProps } from '../nav/CNavGroup'
+import type { CNavLinkProps } from '../nav/CNavLink'
+import type { CNavItemProps } from '../nav/CNavItem'
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
 export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
@@ -32,35 +35,37 @@ interface ContextProps {
 
 export const CNavContext = createContext({} as ContextProps)
 
+const isNavElement = (
+  child: ReactNode
+): child is ReactElement<CNavGroupProps | CNavLinkProps | CNavItemProps> => {
+  if (!React.isValidElement(child)) return false
+  const type = child.type as { displayName?: string }
+  return (
+    type.displayName === 'CNavGroup' ||
+    type.displayName === 'CNavLink' ||
+    type.displayName === 'CNavItem'
+  )
+}
+
 const recursiveClone = (children: ReactNode, id?: string, updateId?: boolean): ReactNode => {
-  return React.Children.map(children, (child: ReactNode, index: number) => {
-    if (
-      !React.isValidElement(child) ||
-      // @ts-expect-error the `children` exist in each component. TODO: resolve
-      (child.type.displayName !== 'CNavGroup' &&
-        // @ts-expect-error the `children` exist in each component. TODO: resolve
-        child.type.displayName !== 'CNavLink' &&
-        // @ts-expect-error the `children` exist in each component. TODO: resolve
-        child.type.displayName !== 'CNavItem')
-    ) {
+  return React.Children.map(children, (child, index) => {
+    if (!isNavElement(child)) {
       return child
     }
 
     const _id = id ? (updateId ? `${id}.${index}` : `${id}`) : `${index}`
 
-    if (child.props && child.props.children) {
-      return React.cloneElement(child as ReactElement<any>, {
+    if (child.props.children) {
+      const type = child.type as { displayName?: string }
+      const shouldUpdateId = type.displayName !== 'CNavItem'
+
+      return React.cloneElement(child, {
         idx: _id,
-        children: recursiveClone(
-          child.props.children,
-          _id,
-          // @ts-expect-error the `displayName` exist in each component. TODO: resolve
-          child.type.displayName === 'CNavItem' ? false : true,
-        ),
+        children: recursiveClone(child.props.children, _id, shouldUpdateId),
       })
     }
 
-    return React.cloneElement(child as ReactElement<any>, {
+    return React.cloneElement(child, {
       idx: _id,
     })
   })

packages/coreui-react/src/components/tabs/CTabPane.tsx

@@ -32,7 +32,7 @@ export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
   ({ children, className, onHide, onShow, transition = true, visible, ...rest }, ref) => {
-    const tabPaneRef = useRef()
+    const tabPaneRef = useRef(null)
     const forkedRef = useForkedRef(ref, tabPaneRef)
 
     return (

packages/coreui-react/src/components/tabs/CTabPanel.tsx

@@ -38,7 +38,7 @@ export const CTabPanel = forwardRef<HTMLDivElement, CTabPanelProps>(
   ({ children, className, itemKey, onHide, onShow, transition = true, visible, ...rest }, ref) => {
     const { _activeItemKey, id } = useContext(TabsContext)
 
-    const tabPaneRef = useRef()
+    const tabPaneRef = useRef(null)
     const forkedRef = useForkedRef(ref, tabPaneRef)
 
     const [_visible, setVisible] = useState(visible || _activeItemKey === itemKey)

packages/coreui-react/src/components/toast/CToast.tsx

@@ -82,12 +82,12 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
       onShow,
       ...rest
     },
-    ref,
+    ref
   ) => {
-    const toastRef = useRef()
+    const toastRef = useRef(null)
     const forkedRef = useForkedRef(ref, toastRef)
     const [_visible, setVisible] = useState(false)
-    const timeout = useRef<number>()
+    const timeout = useRef<number>(undefined)
 
     useEffect(() => {
       setVisible(visible)
@@ -135,7 +135,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
                   'show showing': state === 'entering' || state === 'exiting',
                   show: state === 'entered',
                 },
-                className,
+                className
               )}
               aria-live="assertive"
               aria-atomic="true"
@@ -152,7 +152,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
         )}
       </Transition>
     )
-  },
+  }
 )
 
 CToast.propTypes = {
@@ -163,10 +163,7 @@ CToast.propTypes = {
   color: colorPropType,
   delay: PropTypes.number,
   index: PropTypes.number,
-  innerKey: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string
-  ]),
+  innerKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   onClose: PropTypes.func,
   onShow: PropTypes.func,
   visible: PropTypes.bool,

packages/coreui-react/src/components/toast/CToaster.tsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { CConditionalPortal } from '../conditional-portal'
 
+import type { CToastProps } from './CToast'
+
 export interface CToasterProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -27,20 +29,22 @@ export interface CToasterProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Adds new `CToast` to `CToaster`.
    */
-  push?: ReactElement
+  push?: ReactElement<CToastProps>
 }
 
 export const CToaster = forwardRef<HTMLDivElement, CToasterProps>(
   ({ children, className, placement, push, ...rest }, ref) => {
-    const [toasts, setToasts] = useState<ReactElement[]>([])
+    const [toasts, setToasts] = useState<ReactElement<CToastProps>[]>([])
     const index = useRef<number>(0)
 
     useEffect(() => {
       index.current++
-      push && addToast(push)
+      if (push) {
+        addToast(push)
+      }
     }, [push])
 
-    const addToast = (push: ReactElement) => {
+    const addToast = (push: ReactElement<CToastProps>) => {
       setToasts((state) => [
         ...state,
         React.cloneElement(push, {
@@ -67,18 +71,18 @@ export const CToaster = forwardRef<HTMLDivElement, CToasterProps>(
                 'start-50 translate-middle-x': placement && placement.includes('center'),
                 'end-0': placement && placement.includes('end'),
               },
-              className,
+              className
             )}
             {...rest}
             ref={ref}
           >
             {children}
-            {toasts.map((toast) => React.cloneElement(toast, { visible: true }))}
+            {toasts.map((toast, index) => React.cloneElement(toast, { visible: true, key: index }))}
           </div>
         ) : null}
       </CConditionalPortal>
     )
-  },
+  }
 )
 
 CToaster.propTypes = {

packages/coreui-react/src/hooks/usePopper.ts

@@ -10,8 +10,8 @@ interface UsePopperOutput {
 }
 
 export const usePopper = (): UsePopperOutput => {
-  const _popper = useRef<Instance>()
-  const el = useRef<HTMLElement>()
+  const _popper = useRef<Instance>(undefined)
+  const el = useRef<HTMLElement>(null)
 
   const initPopper = (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => {
     _popper.current = createPopper(reference, popper, options)