finalize shortcut with different scroll areas

apps/web/src/components/features/input/Mentions/ShortcutsSuggestions/ShortcutsSuggestions.tsx

@@ -8,6 +8,7 @@ import PenWriting from '@/components/ui/icons/NucleoIconOutlined/pen-writing';
 import Plus from '@/components/ui/icons/NucleoIconOutlined/plus';
 import {
   createMentionSuggestionExtension,
+  type MentionInputTriggerItem,
   MentionSecondaryContentDropdown,
   type MentionTriggerItem,
 } from '@/components/ui/inputs/MentionInput';
@@ -38,8 +39,13 @@ export const useCreateShortcutsMentionsSuggestions = (
         trigger: SHORTCUT_MENTION_TRIGGER,
         items: ({ defaultQueryMentionsFilter, editor, query }) => {
           const shortcuts = currentItemsRef.current;
-          const allItems = [
-            ...shortcuts.map((s) => createShortcutForMention(s, editor)),
+          const allItems: MentionInputTriggerItem[] = [
+            {
+              type: 'group',
+              items: shortcuts.map((s) => createShortcutForMention(s, editor)),
+
+              className: 'max-h-[300px] overflow-y-auto',
+            },
             { type: 'separator' as const },
             {
               value: 'manageShortcuts',
@@ -65,6 +71,7 @@ export const useCreateShortcutsMentionsSuggestions = (
           return defaultQueryMentionsFilter(query, allItems);
         },
         popoverContent: ShortcutPopoverContent,
+        popoverClassName: '',
         onChangeTransform: (v) => {
           const foundShortcut = shortcuts.find((shortcut) => shortcut.name === v.label);
           if (foundShortcut) {

apps/web/src/components/ui/inputs/MentionInput/MentionInput.stories.tsx

@@ -298,6 +298,7 @@ const spongebobSuggestions = createMentionSuggestionExtension({
   popoverContent: (props) => {
     return <div className="p-5 bg-red-100">This is a custom popover content for {props.value}</div>;
   },
+  popoverClassName: 'bg-green-100 max-h-auto',
 });
 
 export const Default: Story = {

apps/web/src/components/ui/inputs/MentionInput/MentionInput.types.ts

@@ -42,7 +42,7 @@ export type MentionTriggerItem<T = string> =
 
 export type MentionInputTriggerGroup<T = string> = {
   items: MentionTriggerItem<T>[];
-  label: string | React.ReactNode;
+  label?: string | React.ReactNode | null;
   icon?: React.ReactNode;
   type: 'group';
   disabled?: boolean;

apps/web/src/components/ui/inputs/MentionInput/MentionList/MentionList.tsx

@@ -30,7 +30,15 @@ export type MentionListProps<T = string> = SuggestionProps<
 > & { trigger: string; emptyState?: React.ReactNode; className?: string };
 
 function MentionListInner<T = string>(
-  { trigger, emptyState, items, command, className }: MentionListProps<T>,
+  {
+    trigger,
+    emptyState,
+    items,
+    command,
+    className,
+    query: _query,
+    editor: _editor,
+  }: MentionListProps<T>,
   ref: React.ForwardedRef<MentionListImperativeHandle>
 ) {
   const listRef = useRef<HTMLDivElement>(null);

apps/web/src/components/ui/inputs/MentionInput/MentionList/MentionListGroup.tsx

@@ -12,16 +12,19 @@ export function MentionListGroup<T = string>({
   className,
   disabled, //this is consumed by the children items, we can stylized this if we want
 }: MentionListGroupExtended<T>) {
+  const hasLabelContent = !!label || !!icon;
   return (
     <div
       className={cn('mention-list-group', className)}
       aria-disabled={disabled}
       data-testid={type}
     >
-      <div className="flex items-center pb-1 px-2 pt-2 h-7 text-sm text-gray-dark">
-        {icon && <span className="mr-2 text-icon-color">{icon}</span>}
-        {label}
-      </div>
+      {hasLabelContent && (
+        <div className="flex items-center pb-1 px-2 pt-2 h-7 text-sm text-gray-dark">
+          {icon && <span className="mr-2 text-icon-color">{icon}</span>}
+          {label}
+        </div>
+      )}
 
       {items.map((item, index) => (
         <MentionListSelector

apps/web/src/components/ui/inputs/MentionInput/MentionList/MentionListSeperator.tsx

@@ -2,5 +2,5 @@ import type React from 'react';
 import type { MentionInputTriggerSeparator } from '../MentionInput.types';
 
 export const MentionListSeperator: React.FC<MentionInputTriggerSeparator> = () => {
-  return <hr className="border-border border-t w-full -mx-1 my-1" />;
+  return <hr className="border-border border-t w-full my-1" />;
 };

apps/web/src/components/ui/inputs/MentionInput/createMentionSuggestionOption.tsx

@@ -18,6 +18,7 @@ export const createMentionSuggestionExtension = ({
   popoverContent,
   onChangeTransform,
   pillStyling,
+  popoverClassName,
 }: {
   trigger: string;
   items:
@@ -29,6 +30,7 @@ export const createMentionSuggestionExtension = ({
       }) => MentionInputTriggerItem[]); //if no function is provided we will use a literal string match
   popoverContent?: MentionPopoverContentCallback;
   pillStyling?: MentionStylePillProps;
+  popoverClassName?: string;
   onChangeTransform?: MentionSuggestionExtension['onChangeTransform'];
 }): MentionSuggestionExtension => ({
   char: trigger,
@@ -51,8 +53,9 @@ export const createMentionSuggestionExtension = ({
         const { editor } = props;
         component = new ReactRenderer(
           MentionList as React.ComponentType<MentionListProps<string>>,
-          { props: { ...props, trigger }, editor: props.editor }
+          { props: { ...props, trigger, className: popoverClassName }, editor: props.editor }
         );
+        console.log(popoverClassName);
 
         if (!props.clientRect) {
           console.warn('No client rect for mention suggestion');