Replace reakit/Composite with react-roving-tabindex (#6985)

* fix: replace reakit composite with react-roving-tabindex

* fix: touch points

* fix: focus stuck at first list item

* fix: document history navigation

* fix: remove ununsed ListItem components

* fix: keyboard navigation in recent search list

* fix: updated lib

app/components/List/CompositeItem.tsx

@@ -1,17 +0,0 @@
-import * as React from "react";
-import {
-  CompositeStateReturn,
-  CompositeItem as BaseCompositeItem,
-} from "reakit/Composite";
-import Item, { Props as ItemProps } from "./Item";
-
-export type Props = ItemProps & CompositeStateReturn;
-
-function CompositeItem(
-  { to, ...rest }: Props,
-  ref?: React.Ref<HTMLAnchorElement>
-) {
-  return <BaseCompositeItem as={Item} to={to} {...rest} ref={ref} />;
-}
-
-export default React.forwardRef(CompositeItem);

app/components/List/Item.tsx

@@ -1,3 +1,7 @@
+import {
+  useFocusEffect,
+  useRovingTabIndex,
+} from "@getoutline/react-roving-tabindex";
 import { LocationDescriptor } from "history";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
@@ -33,6 +37,18 @@ const ListItem = (
   const theme = useTheme();
   const compact = !subtitle;
 
+  let itemRef: React.Ref<HTMLAnchorElement> =
+    React.useRef<HTMLAnchorElement>(null);
+  if (ref) {
+    itemRef = ref;
+  }
+
+  const { focused, ...rovingTabIndex } = useRovingTabIndex(
+    itemRef as React.RefObject<HTMLAnchorElement>,
+    to ? false : true
+  );
+  useFocusEffect(focused, itemRef as React.RefObject<HTMLAnchorElement>);
+
   const content = (selected: boolean) => (
     <>
       {image && <Image>{image}</Image>}
@@ -59,13 +75,20 @@ const ListItem = (
   if (to) {
     return (
       <Wrapper
-        ref={ref}
+        ref={itemRef}
         $border={border}
         $small={small}
         activeStyle={{
           background: theme.accent,
         }}
         {...rest}
+        {...rovingTabIndex}
+        onClick={(ev) => {
+          if (rest.onClick) {
+            rest.onClick(ev);
+          }
+          rovingTabIndex.onClick(ev);
+        }}
         as={NavLink}
         to={to}
       >
@@ -75,7 +98,7 @@ const ListItem = (
   }
 
   return (
-    <Wrapper ref={ref} $border={border} $small={small} {...rest}>
+    <Wrapper ref={itemRef} $border={border} $small={small} {...rest}>
       {content(false)}
     </Wrapper>
   );