Type error with ListBox component

[zackhamin]

Hi.

Forgive me for a naive question. I have used the example and implemented a ListBox which works great and has my styling.

I am having a type issue with this part:

`export function Option({ item, state }) {
	const ref = useRef(null);
	const { optionProps, isSelected, isDisabled } = useOption(
		{ key: item.key },
		state,
		ref
	);`

On the ({item, state)}

Binding element 'item' implicitly has an 'any' type.
Binding element 'state' implicitly has an 'any' type.

I am not sure what type they should be? item is from state.collection and state is from useListState pretty much how the example is - https://react-spectrum.adobe.com/react-aria/useListBox.html#sections

[snowystinger]

Might be helpful to look at our source for how we typed these https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/listbox/src/ListBoxOption.tsx#L28

[zackhamin]

Thanks, Robert.

That was a huge help!

[zackhamin]

@snowystinger Apologies I am hoping to pick your brains again. In the ListBox component in the example props is supplier as props: any I am trying to break this down into a typescript friendly way.

I have the below error:

Argument of type 'ListBoxComponentProps' is not assignable to parameter of type 'ListProps<object>'.
  Types of property 'children' are incompatible.
    Type 'ReactNode' is not assignable to type 'CollectionChildren<object>'.
      Type 'undefined' is not assignable to type 'CollectionChildren<object>'.

I have looked through the Repo you supplied the link to above, which helped a little. However I am a bit stuck with the children and CollectionChildren issues.

Do you have any advice?

Component so far:

export interface ListBoxComponentProps {
	listBoxProps?: DOMAttributes<FocusableElement>;
	labelProps?: DOMAttributes<FocusableElement>;
	label?: string;
	children?: ReactNode;
	selectionMode: string;
}

export function ListBox(props: ListBoxComponentProps) {
	// Create state based on the incoming props
	const state = useListState(props);

	// Get props for the listbox element
	const ref = useRef(null);
	const { listBoxProps, labelProps } = useListBox(props, state, ref);

	return (
		<StyledDiv>
			<div className="heading-div" {...labelProps}>
				<Heading level={2}>{props.label}</Heading>
			</div>
			<StyledList {...listBoxProps} ref={ref}>
				{[...Array.from(state.collection)].map((item) => (
					<Option key={item.key} item={item} state={state} />
				))}
			</StyledList>
		</StyledDiv>
	);
}`

[snowystinger]

Sure, CollectionChildren are defined as

react-spectrum/packages/@react-types/shared/src/collections.d.ts

Line 55 in a563c03

export type CollectionChildren<T> = CollectionElement<T> | CollectionElement<T>[] | ((item: T) => CollectionElement<T>);

For more info on collections, you can check out our docs https://react-spectrum.adobe.com/react-stately/Collection.html

As for how it's used, here's how useListState uses it, where T extends object, which is part of where your issue is coming from. I think you should just be able to define it the same way we do in this hook though.
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/list/src/useListState.ts#L49