replace ReactElement with ReactElement<any> in some places, part 2

Author: balzss

packages/ui-calendar/src/Calendar/index.tsx

@@ -261,7 +261,7 @@ class Calendar extends Component<CalendarProps, CalendarState> {
     const { prevButton, nextButton } = this.renderMonthNavigationButtons()
 
     const cloneButton = (
-      button: ReactElement,
+      button: ReactElement<any>,
       onClick?: (e: React.MouseEvent) => void
     ) =>
       safeCloneElement(button, {
@@ -425,7 +425,7 @@ class Calendar extends Component<CalendarProps, CalendarState> {
     )
 
     return childrenArr
-      .reduce((days: ReactElement[][], day, i) => {
+      .reduce((days: ReactElement<any>[][], day, i) => {
         const index = Math.floor(i / 7)
         if (!days[index]) days.push([])
         days[index].push(day)

packages/ui-drilldown/src/Drilldown/index.tsx

@@ -1556,9 +1556,9 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
           },
           'aria-haspopup': this.props.role,
           id: this._triggerId,
-          disabled: !!((trigger as ReactElement).props.disabled || disabled),
+          disabled: !!((trigger as ReactElement<any>).props.disabled || disabled),
           'aria-disabled':
-            (trigger as ReactElement).props.disabled || disabled
+            (trigger as ReactElement<any>).props.disabled || disabled
               ? 'true'
               : undefined
         })}

packages/ui-table/src/Table/Head/index.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { Component, Children, ContextType } from 'react'
+import { Component, Children, ContextType, type ReactElement } from 'react'
 
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
 import { SimpleSelect } from '@instructure/ui-simple-select'
@@ -65,7 +65,7 @@ static defaultProps = {
     const [firstRow] = Children.toArray(this.props.children) as RowChild[]
     let sortable = false
     if (firstRow && firstRow.props && firstRow.props.children) {
-      Children.forEach(firstRow.props.children, (grandchild) => {
+      Children.forEach(firstRow.props.children, (grandchild: ReactElement<any>) => {
         if (grandchild?.props?.onRequestSort) {
           sortable = true
           return
@@ -114,7 +114,7 @@ static defaultProps = {
     > = {}
     let selectedOption: TableColHeaderProps['id'] | undefined
     let count = 0
-    Children.forEach(firstRow.props.children, (grandchild) => {
+    Children.forEach(firstRow.props.children, (grandchild: ReactElement<any>) => {
       count += 1
       if (!grandchild?.props) return // grandchild can be false
       const { id, stackedSortByLabel, sortDirection, onRequestSort } =

packages/ui-table/src/Table/Row/index.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { Component, Children, ContextType, isValidElement } from 'react'
+import { Component, Children, ContextType, isValidElement, type ReactElement } from 'react'
 
 import { omitProps, safeCloneElement } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
@@ -84,7 +84,7 @@ class Row extends Component<TableRowProps> {
           .map((child, index) => {
             if (isValidElement(child)) {
               return safeCloneElement(child, {
-                key: child.props.name,
+                key: (child as ReactElement<any>).props.name,
                 // Sent down for compatibility with custom components
                 // TODO DEPRECATED, remove in v11
                 isStacked,

packages/ui-table/src/Table/Row/props.ts

@@ -36,7 +36,7 @@ type TableRowOwnProps = {
    *
    * By default `Table.ColHeader` or `Table.RowHeader` or `Table.Cell`
    */
-  children?: React.ReactElement | React.ReactElement[]
+  children?: React.ReactElement<any> | React.ReactElement<any>[]
 
   /**
    * Controls the hover state of the row.

packages/ui-table/src/Table/index.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { Component, Children, isValidElement } from 'react'
+import { Component, Children, isValidElement, ReactElement } from 'react'
 
 import { safeCloneElement, omitProps } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
@@ -92,9 +92,9 @@ class Table extends Component<TableProps> {
   getHeaders() {
     const [headChild] = Children.toArray(this.props.children)
     if (!headChild || !isValidElement(headChild)) return undefined
-    const [firstRow] = Children.toArray(headChild.props.children)
+    const [firstRow] = Children.toArray((headChild as ReactElement<any>).props.children)
     if (!firstRow || !isValidElement(firstRow)) return undefined
-    return Children.map(firstRow.props.children, (colHeader) => {
+    return Children.map((firstRow as ReactElement<any>).props.children, (colHeader) => {
       if (!isValidElement<{ children?: any }>(colHeader)) return undefined
       return colHeader.props.children
     })
@@ -132,7 +132,7 @@ class Table extends Component<TableProps> {
           )}
           {Children.map(children, (child) => {
             if (isValidElement(child)) {
-              return safeCloneElement(child, { key: child.props.name })
+              return safeCloneElement(child, { key: (child as ReactElement<any>).props.name })
             }
             return child
           })}

packages/ui-tabs/src/Tabs/index.tsx

@@ -390,7 +390,7 @@ class Tabs extends Component<TabsProps, TabsState> {
     if (activePanel !== undefined) {
       // cloning active panel with a proper custom key as a workaround because
       // safeCloneElement overwrites it with the key from the original element
-      activePanelClone = cloneElement(activePanel as ReactElement, {
+      activePanelClone = cloneElement(activePanel as ReactElement<any>, {
         key: `panel-${index}`
       })