[#285] strictFunctionTypes:true, fix 9 errors

src/common/event-utils/index.ts

@@ -87,7 +87,7 @@ export function preventDefaultIfHijax(e: React.KeyboardEvent, hijax: boolean): v
     }
 }
 
-type Handler = (e: KeyboardEvent) => void
+type Handler = (e: UIEvent) => void
 
 const handlers: Handler[] = []
 
@@ -103,7 +103,7 @@ export function removeEventListener(_: unknown, handler: Handler): void {
     }
     handlers.splice(handlers.indexOf(handler), 1)
 }
-export function handleResize(e: KeyboardEvent): void {
+export function handleResize(e: UIEvent): void {
     window.removeEventListener('resize', handleResize)
     const callback = () => {
         if (handlers.length) {

src/common/event-utils/use-roving-index.ts

@@ -1,4 +1,4 @@
-import { Children, Dispatch, FC, ReactElement, ReactNode, SetStateAction, useEffect, useState } from 'react'
+import { Children, Dispatch, FC, isValidElement, ReactElement, ReactNode, SetStateAction, useEffect, useState } from 'react'
 import useKeyPress from './use-key-press'
 
 const useRovingIndex = (
@@ -11,8 +11,8 @@ const useRovingIndex = (
 
     const rovingIndexArray = Children
         .toArray(children)
-        .reduce<number[]>((focusables, child: ReactElement, i) =>
-            child.type === FocusableType ? [...focusables, i] : focusables, [])
+        .reduce<number[]>((focusables, child, i) =>
+            isValidElement(child) && child.type === FocusableType ? [...focusables, i] : focusables, [])
 
     const currentIndex = rovingIndexArray.indexOf(rovingIndex)
 

src/ebay-breadcrumbs/breadcrumbs.tsx

@@ -1,4 +1,4 @@
-import React, { Children, cloneElement, ComponentProps, FC, ReactElement, ReactNode } from 'react'
+import React, { Children, cloneElement, ComponentProps, FC, isValidElement, ReactElement, ReactNode } from 'react'
 import classNames from 'classnames'
 import { EbayEventHandler } from '../common/event-utils/types'
 
@@ -28,7 +28,7 @@ const Breadcrumbs: FC<BreadcrumbProps> = ({
     const headingId = `${id}-breadcrumbs-heading`
     const lastItemIndex = Children.count(breadcrumbItems) - 1
     const A11yHeadingTag = a11yHeadingTag
-    const anyLink = Children.toArray(breadcrumbItems).some((item: ReactElement) => item.props.href)
+    const anyLink = Children.toArray(breadcrumbItems).some(item => isValidElement(item) && item.props.href)
     const tag = anyLink ? 'a' : 'button'
 
     return (
@@ -40,9 +40,9 @@ const Breadcrumbs: FC<BreadcrumbProps> = ({
         >
             <A11yHeadingTag id={headingId} className="clipped">{a11yHeadingText}</A11yHeadingTag>
             <ul>
-                {Children.map(breadcrumbItems, (item: ReactElement, index) => {
+                {Children.map(breadcrumbItems, (item, index) => {
                     const isLastItem = index === lastItemIndex
-                    const { href, children } = item.props
+                    const { href, children } = isValidElement(item) && item.props
                     const itemProps = {
                         tag,
                         isLastItem,
@@ -51,7 +51,7 @@ const Breadcrumbs: FC<BreadcrumbProps> = ({
                         onClick: event => onSelect(event)
                     }
 
-                    return cloneElement(item, itemProps)
+                    return isValidElement(item) && cloneElement(item, itemProps)
                 })}
             </ul>
         </nav>

src/ebay-carousel/helpers.ts

@@ -1,4 +1,4 @@
-import { Children, cloneElement, ReactElement, ReactNode, RefObject } from 'react'
+import { Children, cloneElement, isValidElement, ReactElement, ReactNode, RefObject } from 'react'
 import { ListItemRef, MovementDirection, RelativeRect } from './types'
 
 export function getRelativeRects(el: Element): RelativeRect {
@@ -39,8 +39,10 @@ export const alterChildren = (
     itemsPerSlide?: number,
     slideWidth?: number,
     offset?: number,
-    gap?: number): ReactElement[] => Children.map(children, (item: ReactElement, index) => {
-    const { style = {} } = item.props
+    gap?: number
+): ReactElement[] => Children.map(children, (item, index) => {
+    const childProps = isValidElement(item) ? item.props : {}
+    const { style = {} } = childProps
     let itemWidth
 
     if (itemsPerSlide) {
@@ -49,14 +51,14 @@ export const alterChildren = (
     }
     const isStartOfSlide = itemsPerSlide ? index % itemsPerSlide === 0 : true
 
-    return cloneElement(item, {
-        ...item.props,
+    return isValidElement(item) && cloneElement(item, {
+        ...childProps,
         slideWidth,
         offset,
         ref: el => {
             itemsRef.current[index] = el
         },
-        className: isStartOfSlide ? 'carousel__snap-point' : item.props.className,
+        className: isStartOfSlide ? 'carousel__snap-point' : childProps.className,
         style: {
             ...style,
             width: itemWidth || style.width,

tsconfig.json

@@ -16,7 +16,7 @@
         "declarationMap": true,
         "strict": true,
         "strictBindCallApply": true,
-        "strictFunctionTypes": false, // 21 errors
+        "strictFunctionTypes": true,
         "strictNullChecks": false, // 150+ errors
         "strictPropertyInitialization": false,
         "useUnknownInCatchVariables": true,