minor typing improvement

Author: onderonur

apps/demo/src/components/infinite-list-with-reverse-horizontal-scroll.tsx

@@ -14,7 +14,7 @@ export function InfiniteListWithReverseHozirontalScroll() {
     rootMargin: '0px 0px 0px 400px',
   });
 
-  const scrollableRootRef = useRef<React.ElementRef<'div'> | null>(null);
+  const scrollableRootRef = useRef<React.ComponentRef<'div'> | null>(null);
   const lastScrollDistanceToRightRef = useRef<number>();
 
   const reversedItems = useMemo(() => [...items].reverse(), [items]);

apps/demo/src/components/infinite-list-with-reverse-vertical-scroll.tsx

@@ -14,7 +14,7 @@ export function InfiniteListWithReverseVerticalScroll() {
     rootMargin: '400px 0px 0px 0px',
   });
 
-  const scrollableRootRef = useRef<React.ElementRef<'div'> | null>(null);
+  const scrollableRootRef = useRef<React.ComponentRef<'div'> | null>(null);
   const lastScrollDistanceToBottomRef = useRef<number>();
 
   const reversedItems = useMemo(() => [...items].reverse(), [items]);

apps/demo/src/components/list.tsx

@@ -1,7 +1,8 @@
 import { forwardRef } from 'react';
 
-type ListProps = React.PropsWithChildren & {
+type ListProps = {
   direction?: 'vertical' | 'horizontal';
+  children: React.ReactNode;
 };
 
 export function List({ direction, ...rest }: ListProps) {
@@ -13,9 +14,11 @@ export function List({ direction, ...rest }: ListProps) {
   );
 }
 
-type ListItemProps = React.PropsWithChildren;
+type ListItemProps = {
+  children: React.ReactNode;
+};
 
-export const ListItem = forwardRef<React.ElementRef<'li'>, ListItemProps>(
+export const ListItem = forwardRef<React.ComponentRef<'li'>, ListItemProps>(
   function ListItem(props, ref) {
     return <li ref={ref} className="m-1 border bg-slate-200 p-2" {...props} />;
   },