fix: react aria upgrade (#537)

* fix: try react aria upgrade

* fix: type casting

Author: AlanFnz

package-lock.json

@@ -166,8 +166,8 @@
         "@types/react-select": "^4.0.18",
         "@types/styled-system": "^5.1.9",
         "date-fns": "^2.11.1",
-        "react-aria": "3.38.1",
-        "react-aria-components": "1.7.1",
+        "react-aria": "3.39.0",
+        "react-aria-components": "1.8.0",
         "react-popper": "^2.3.0",
         "react-transition-group": "^4.3.0",
         "styled-system": "^5.1.5",

package.json

@@ -5,7 +5,7 @@ import { get } from '../../../utils/experimental/themeGet';
 import { Text, TextProps } from '../Text/Text';
 import { getSemanticValue } from '../../../essentials/experimental';
 
-const StyledListBoxItem = styled(BaseListBoxItem)`
+const StyledListBoxItem = styled(BaseListBoxItem as React.ComponentType<ListBoxItemProps>)`
     position: relative;
     display: block;
     padding: ${get('space.3')} ${get('space.4')};

src/components/experimental/ListBox/ListBox.tsx

@@ -5,14 +5,17 @@ import {
     Column as BaseColumn,
     Row as BaseRow,
     TableBody,
-    TableHeader
+    TableHeader,
+    CellProps,
+    ColumnProps,
+    RowProps
 } from 'react-aria-components';
 import styled from 'styled-components';
 import { get } from '../../../utils/experimental/themeGet';
 import { textStyles } from '../Text/Text';
 import { getSemanticValue } from '../../../essentials/experimental';
 
-const Table = styled(BaseTable)`
+const Table = styled(BaseTable as React.ComponentType<TableProps>)`
     border-collapse: collapse;
     border-spacing: 0;
     position: relative;
@@ -22,7 +25,7 @@ const Table = styled(BaseTable)`
     color: ${getSemanticValue('on-surface')};
 ` as typeof BaseTable;
 
-const Cell = styled(BaseCell)`
+const Cell = styled(BaseCell as React.ComponentType<CellProps>)`
     box-sizing: border-box;
     padding: 0 ${get('space.3')};
     position: relative;
@@ -57,7 +60,7 @@ const Cell = styled(BaseCell)`
 ` as typeof BaseCell;
 
 /* Z-Index is needed for sticky header cells to be on top of other cells */
-const Column = styled(BaseColumn)`
+const Column = styled(BaseColumn as React.ComponentType<ColumnProps>)`
     position: sticky;
     top: 0;
     z-index: 1;
@@ -72,7 +75,7 @@ const Column = styled(BaseColumn)`
     ${textStyles.variants.title2}
 ` as typeof BaseColumn;
 
-const Row = styled(BaseRow)`
+const Row = styled(BaseRow as React.ComponentType<RowProps<Record<string, unknown>>>)`
     height: 3rem;
     border-bottom: 1px solid ${getSemanticValue('divider')};
     border-radius: ${get('radii.4')};

src/components/experimental/Table/Table.tsx

@@ -1,10 +1,17 @@
 import React from 'react';
 import { createGlobalStyle } from 'styled-components';
 
-import { OverlayArrow, Tooltip as AriaTooltip, TooltipTrigger, Focusable } from 'react-aria-components';
+import {
+    OverlayArrow,
+    Tooltip as AriaTooltip,
+    TooltipTrigger as BaseTooltipTrigger,
+    Focusable
+} from 'react-aria-components';
 
 import type { TooltipProps as AriaTooltipProps, TooltipTriggerComponentProps } from 'react-aria-components';
 
+const TooltipTrigger = BaseTooltipTrigger as React.ComponentType<TooltipTriggerComponentProps>;
+
 interface TooltipProps {
     children: any;
     content: string;
@@ -83,7 +90,7 @@ const Tooltip = ({
     tooltipProps,
     hideArrow = false,
     customTrigger = false
-}: TooltipProps) => (
+}: TooltipProps): JSX.Element => (
     <>
         <TooltipStyles />
         <TooltipTrigger {...triggerProps}>