feat(mention-list): Add useRef hook and scroll selected item into vie…

…w in MentionList component

src/stories/chat/parts/mentionList.tsx

@@ -1,11 +1,19 @@
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import type { SuggestionOptions, SuggestionProps } from "@tiptap/suggestion";
 import { Card } from "../../cards";
 import { Button } from "../../buttons/button";
 import { styled } from "styled-components";
 import { SuggestedUser } from "../_types";
 import { MD } from "../../typography/typescale";
 import { theme } from "../../theme";
+import { ButtonArgs } from "../../buttons/button/_types";
+import { getColor } from "../../theme/utils";
 
 export type MentionListRef = {
   onKeyDown: NonNullable<
@@ -31,20 +39,30 @@ const List = styled.div`
   overflow-y: auto;
 `;
 
-const Item = styled(Button)`
+const Item = styled(Button)<ButtonArgs & { isActive?: boolean }>`
   display: flex;
   align-items: flex-start;
   justify-content: center;
   flex-direction: column;
-`;
 
+  ${({ isActive }) =>
+    isActive &&
+    `
+    background-color: ${getColor(
+      theme.colors.primaryHue,
+      600,
+      undefined,
+      0.08
+    )};
+  `}
+`;
 
 type MentionListProps = SuggestionProps<SuggestedUser>;
 
 export const MentionList = forwardRef<MentionListRef, MentionListProps>(
   (props, ref) => {
     const [selectedIndex, setSelectedIndex] = useState<number>(0);
-
+    const selectedRef = useRef<HTMLButtonElement>(null);
     const selectItem = (index: number) => {
       const item = props.items[index];
 
@@ -68,6 +86,11 @@ export const MentionList = forwardRef<MentionListRef, MentionListProps>(
     };
 
     useEffect(() => setSelectedIndex(0), [props.items]);
+    useEffect(() => {
+      if (selectedRef.current) {
+        selectedRef.current.scrollIntoView({ behavior: "smooth" });
+      }
+    }, [selectedIndex]);
 
     useImperativeHandle(ref, () => ({
       onKeyDown: ({ event }) => {
@@ -96,12 +119,14 @@ export const MentionList = forwardRef<MentionListRef, MentionListProps>(
           <List>
             {props.items.length ? (
               props.items.map((item, index) => (
-                <div className={index === selectedIndex ? 'selected' : ''}>
+                <div>
                   <Item
+                    ref={index === selectedIndex ? selectedRef : undefined}
                     isBasic
                     isStretched
                     isAccent
                     isPill={false}
+                    isActive={index === selectedIndex}
                     key={index}
                     onClick={() => selectItem(index)}
                   >