chore: update types for react

jest.config.js

@@ -165,13 +165,13 @@ module.exports = {
 		},
 		'./packages/clay-pagination/src/': {
 			branches: 86,
-			functions: 76,
+			functions: 70,
 			lines: 92,
 			statements: 98,
 		},
 		'./packages/clay-pagination-bar/src/': {
 			branches: 92,
-			functions: 69,
+			functions: 65,
 			lines: 94,
 			statements: 95,
 		},

package.json

@@ -63,10 +63,10 @@
 		"@types/d3": "^5.7.2",
 		"@types/geojson": "^7946.0.7",
 		"@types/jest": "^26.0.0",
-		"@types/react": "16.9.9",
-		"@types/react-dom": "16.9.9",
+		"@types/react": "18.3.26",
+		"@types/react-dom": "18.3.7",
 		"@types/react-test-renderer": "^16.8.0",
-		"@types/react-transition-group": "^4.4.0",
+		"@types/react-transition-group": "^4.4.12",
 		"@types/storybook__addon-a11y": "5.1.2",
 		"@types/storybook__addon-knobs": "^5.2.1",
 		"@types/storybook__react": "^5.2.1",
@@ -120,8 +120,6 @@
 	},
 	"resolutions": {
 		"@pmmmwh/react-refresh-webpack-plugin": "0.5.1",
-		"@types/react": "16.9.9",
-		"@types/react-dom": "16.9.9",
 		"js-beautify": "1.7.5",
 		"event-stream": "3.3.4",
 		"graceful-fs": "^4.2.4"

packages/clay-autocomplete/src/LegacyAutocomplete.tsx

@@ -31,12 +31,12 @@ AutocompleteMarkup.displayName = 'ClayAutocompleteMarkup';
  * Temporary helper function to determine which version of autocomplete
  * is being used.
  */
-const hasItems = (children?: React.ReactNode) => {
-	if (!children) {
+const hasItems = (children?: React.ReactNode | Function) => {
+	if (!children || typeof children === 'function') {
 		return [];
 	}
 
-	return React.Children.map(children, (child) => {
+	const mappedChildren = React.Children.map(children, (child) => {
 		if (
 			React.isValidElement(child) &&
 			// @ts-ignore
@@ -46,7 +46,9 @@ const hasItems = (children?: React.ReactNode) => {
 		}
 
 		return false;
-	}).filter(Boolean);
+	});
+
+	return (mappedChildren || []).filter(Boolean);
 };
 
 export interface IProps<T> extends IAutocompleteProps<T> {

packages/clay-button/src/Button.tsx

@@ -89,16 +89,7 @@ export interface IProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	translucent?: boolean;
 }
 
-export interface IForwardRef<T, P = {}>
-	extends React.ForwardRefExoticComponent<P & React.RefAttributes<T>> {
-	Group: typeof Group;
-}
-
-function forwardRef<T, P = {}>(component: React.RefForwardingComponent<T, P>) {
-	return React.forwardRef<T, P>(component) as IForwardRef<T, P>;
-}
-
-const Button = forwardRef(
+const ButtonComponent = React.forwardRef<HTMLButtonElement, IProps>(
 	(
 		{
 			alert,
@@ -117,8 +108,8 @@ const Button = forwardRef(
 			translucent,
 			type = 'button',
 			...otherProps
-		}: IProps,
-		ref: React.Ref<HTMLButtonElement>
+		},
+		ref
 	) => {
 		const childArray = React.Children.toArray(children);
 
@@ -174,7 +165,10 @@ const Button = forwardRef(
 	}
 );
 
-Button.Group = Group;
-Button.displayName = 'ClayButton';
+ButtonComponent.displayName = 'ClayButton';
+
+const Button = Object.assign(ButtonComponent, {
+	Group,
+});
 
 export default Button;

packages/clay-button/src/ButtonWithIcon.tsx

@@ -8,27 +8,14 @@ import React from 'react';
 
 import ClayButton from './Button';
 
-type ButtonAria =
-	| {
-			/**
-			 * Define a value that labels the button.
-			 */
-			'aria-label': string;
-			'aria-labelledby'?: never;
-	  }
-	| {
-			/**
-			 * Define a value that labels the button.
-			 */
-			'aria-label'?: never;
-			'aria-labelledby': string;
-	  };
-
 interface ICommonProps
 	extends Omit<
 		React.ComponentProps<typeof ClayButton>,
 		'aria-label' | 'aria-labelledby'
 	> {
+	'aria-label'?: string;
+
+	'aria-labelledby'?: string;
 	/**
 	 * Path to the location of the spritemap resource.
 	 */
@@ -40,7 +27,7 @@ interface ICommonProps
 	symbol: string;
 }
 
-export type Props = ICommonProps & ButtonAria;
+export type Props = ICommonProps;
 
 const ClayButtonWithIcon = React.forwardRef<HTMLButtonElement, Props>(
 	({monospaced = true, spritemap, symbol, ...otherProps}: Props, ref) => (

packages/clay-charts/src/Predictive.tsx

@@ -18,7 +18,7 @@ interface IProps {
  * Predictive Chart component.
  */
 const PredictiveChart = React.forwardRef<HTMLDivElement, IProps>(
-	({data, predictionDate, ...otherProps}: IProps, ref) => {
+	({data, predictionDate, ...otherProps}, ref) => {
 		let columns = data.columns;
 
 		if (columns) {

packages/clay-core/src/collection/useCollection.tsx

@@ -5,6 +5,7 @@
 
 import {useId} from '@clayui/shared';
 import React, {
+	ReactNode,
 	useCallback,
 	useContext,
 	useEffect,
@@ -241,7 +242,7 @@ export function useCollection<
 
 					registerItem(key, child, index);
 				}
-			} else {
+			} else if (typeof children !== 'function') {
 				React.Children.forEach(children, (child, index) => {
 					if (!React.isValidElement(child)) {
 						return;
@@ -351,27 +352,30 @@ export function useCollection<
 				});
 			}
 
-			return React.Children.map(children, (child, index) => {
-				if (!React.isValidElement(child)) {
-					return null;
-				}
+			return React.Children.map(
+				children as Iterable<ReactNode>,
+				(child, index) => {
+					if (!React.isValidElement(child)) {
+						return null;
+					}
 
-				const key = getKey(index, child.key, parentKey);
+					const key = getKey(index, child.key, parentKey);
 
-				if (
-					visibleKeys &&
-					((Array.isArray(visibleKeys) &&
-						visibleKeys.length > 0 &&
-						!visibleKeys.includes(index)) ||
-						(visibleKeys instanceof Set &&
-							visibleKeys.size > 0 &&
-							!visibleKeys.has(key)))
-				) {
-					return null;
-				}
+					if (
+						visibleKeys &&
+						((Array.isArray(visibleKeys) &&
+							visibleKeys.length > 0 &&
+							!visibleKeys.includes(index)) ||
+							(visibleKeys instanceof Set &&
+								visibleKeys.size > 0 &&
+								!visibleKeys.has(key)))
+					) {
+						return null;
+					}
 
-				return performItemRender(child as ChildElement, key, index);
-			});
+					return performItemRender(child as ChildElement, key, index);
+				}
+			);
 		},
 		[
 			performItemRender,
@@ -391,7 +395,7 @@ export function useCollection<
 	}, []);
 
 	const getFirstItem = useCallback(() => {
-		const key = layout.current.keys().next().value;
+		const key = layout.current.keys().next().value!;
 
 		return {
 			key,
@@ -443,7 +447,7 @@ export function useCollection<
 	// - Data: We get the data of the item to consume later
 	// - Rendering: We render each element in memory
 	const rendered = useMemo(() => {
-		const list = performCollectionRender({children, items});
+		const list = performCollectionRender({children, items})!;
 
 		if (list.length === 0 && notFound) {
 			return notFound;

packages/clay-core/src/nav/Link.tsx

@@ -8,7 +8,8 @@ import {LinkOrButton} from '@clayui/shared';
 import classNames from 'classnames';
 import React from 'react';
 
-interface IProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface IPropsLink
+	extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
 	/**
 	 * Flag to indicate if `active` class should be applied.
 	 */
@@ -35,9 +36,9 @@ interface IProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
 	spritemap?: string;
 }
 
-export const Link = React.forwardRef<
+const Link = React.forwardRef<
 	HTMLButtonElement | HTMLAnchorElement | HTMLDivElement,
-	IProps
+	IPropsLink
 >(
 	(
 		{
@@ -94,3 +95,5 @@ export const Link = React.forwardRef<
 );
 
 Link.displayName = 'NavLink';
+
+export {Link};

packages/clay-core/src/nav/Nav.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import {Item} from './Item';
 import {Link} from './Link';
 
-interface IProps extends React.HTMLAttributes<HTMLUListElement> {
+export interface IPropsNav extends React.HTMLAttributes<HTMLUListElement> {
 	/**
 	 * Flag to indicate if `nav-nested` class should be applied. Adds padding to indent each nested navigation.
 	 */
@@ -26,17 +26,7 @@ interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	stacked?: boolean;
 }
 
-interface IForwardRef<T, P = {}>
-	extends React.ForwardRefExoticComponent<P & React.RefAttributes<T>> {
-	Item: typeof Item;
-	Link: typeof Link;
-}
-
-function forwardRef<T, P = {}>(component: React.RefForwardingComponent<T, P>) {
-	return React.forwardRef<T, P>(component) as IForwardRef<T, P>;
-}
-
-export const Nav = forwardRef<HTMLUListElement, IProps>(function Nav(
+const NavComponent = React.forwardRef<HTMLUListElement, IPropsNav>(function Nav(
 	{children, className, nestMargins, nested, stacked, ...otherProps},
 	ref
 ) {
@@ -55,5 +45,9 @@ export const Nav = forwardRef<HTMLUListElement, IProps>(function Nav(
 	);
 });
 
-Nav.Item = Item;
-Nav.Link = Link;
+NavComponent.displayName = 'Nav';
+
+export const Nav = Object.assign(NavComponent, {
+	Item,
+	Link,
+});

packages/clay-core/src/overlay-mask/OverlayMask.tsx

@@ -154,7 +154,7 @@ type Props<T> = {
 	onBoundsChange?: InternalDispatch<Bounds>;
 };
 
-export function OverlayMask<T>({
+export function OverlayMask<T extends HTMLElement>({
 	defaultBounds = initialBounds,
 	bounds,
 	children,
@@ -172,7 +172,7 @@ export function OverlayMask<T>({
 		value: bounds,
 	});
 
-	const childrenRef = useRef<HTMLElement | null>(null);
+	const childrenRef = useRef<T | null>(null);
 
 	useIsomorphicLayoutEffect(() => {
 		if (childrenRef.current) {
@@ -181,13 +181,14 @@ export function OverlayMask<T>({
 					return;
 				}
 
-				const {height, width, x, y} =
-					childrenRef.current.getBoundingClientRect();
+				const {height, width, x, y} = (
+					childrenRef.current as HTMLElement
+				).getBoundingClientRect();
 
 				setBounds({height, width, x, y});
 			};
 
-			return observeRect(childrenRef.current, updater);
+			return observeRect(childrenRef.current as HTMLElement, updater);
 		}
 	}, [setBounds]);
 
@@ -196,7 +197,7 @@ export function OverlayMask<T>({
 			{children &&
 				typeof children !== 'function' &&
 				React.cloneElement(children as React.ReactElement, {
-					ref: (node: HTMLElement) => {
+					ref: (node: T) => {
 						childrenRef.current = node;
 
 						// @ts-ignore

packages/clay-core/src/picker/Option.tsx

@@ -112,7 +112,7 @@ export function Option({
 				{...otherProps}
 				aria-describedby={ariaDescribedby}
 				disabled={disabled}
-				value={keyValue}
+				value={keyValue ? String(keyValue) : undefined}
 			>
 				{typeof children === 'string' ? children : textValue}
 			</option>

packages/clay-core/src/picker/Picker.tsx

@@ -390,7 +390,7 @@ export function Picker<T extends Record<string, any> | string | number>({
 					className
 				)}
 				onChange={(event) => setSelectedKey(event.target.value)}
-				value={selectedKey}
+				value={selectedKey ? String(selectedKey) : undefined}
 			>
 				<PickerContext.Provider value={context}>
 					<Collection<T> collection={collection} />

packages/clay-core/src/side-panel/SidePanelWithDrilldown.tsx

@@ -39,7 +39,7 @@ type Panel = {
 };
 
 type Panels = {
-	[key: React.Key]: Panel;
+	[key: string | number | symbol]: Panel;
 };
 
 export function SidePanelWithDrilldown({

packages/clay-core/src/side-panel/__tests__/SidePanelWithDrillDown.tsx

@@ -13,8 +13,8 @@ import {SidePanelWithDrilldown} from '../SidePanelWithDrilldown';
 
 function Component({
 	selectedPanelKey = 'x1',
-}: {selectedPanelKey?: React.Key} = {}) {
-	const [panelKey, setPanelKey] = useState<React.Key>(selectedPanelKey);
+}: {selectedPanelKey?: string} = {}) {
+	const [panelKey, setPanelKey] = useState(selectedPanelKey);
 
 	const ref = useRef<HTMLDivElement | null>(null);