Add storybook suggestions

.storybook/stories/search-editor.stories.tsx

@@ -13,7 +13,7 @@ import {
 
 import { Story } from './utils/doc';
 import { TAGS, USERS, useEditorMention } from './utils/hooks/useEditorMention';
-import { promiseAction } from './utils/promiseAction';
+import { GetSuggestions } from '../../src/types';
 
 export default {
 	title: 'Editors / Search Editor',
@@ -39,6 +39,24 @@ const Template: Story<SearchEditorStoryArgs> = (
 		userOptions,
 	} = useEditorMention();
 
+	const getSuggestions: GetSuggestions = async props => {
+		action('getSuggestions')(props);
+		const { input } = props;
+		const suggestedItems = [...dateOptions, ...tagOptions, ...userOptions];
+
+		if (!input) {
+			return [];
+		}
+
+		const lowerCaseInput = input.toLowerCase();
+
+		const filteredSuggestedItem = suggestedItems.filter(item => {
+			const lowerCaseItem = item.label.toLowerCase();
+			return lowerCaseItem.includes(lowerCaseInput);
+		});
+
+		return filteredSuggestedItem;
+	};
 	const editorRef = useRef<SearchImperativeRef>(null);
 
 	const defaultGetExtraAttrs =
@@ -83,7 +101,7 @@ const Template: Story<SearchEditorStoryArgs> = (
 				fields={fields}
 				innerRef={editorRef}
 				onSubmit={action('onSubmit')}
-				getSuggestions={promiseAction('getSuggestions')}
+				getSuggestions={getSuggestions}
 				{...props}
 			/>
 

src/search-editor/MentionSuggester.tsx

@@ -12,9 +12,6 @@ import { SuggesterSkeleton } from './SuggesterSkeleton';
 import { Fields } from './types';
 
 const useStyles = makeStyles()(theme => ({
-	fullWidth: {
-		width: '100%',
-	},
 	highlighted: {
 		backgroundColor: theme.palette.action.selected,
 	},
@@ -56,7 +53,6 @@ const useStyles = makeStyles()(theme => ({
 	},
 	suggester: {
 		position: 'relative',
-		width: '100%',
 		maxHeight: theme.spacing(40),
 		borderTop: `${theme.spacing(0.125)} solid ${theme.palette.divider}`,
 		overflow: 'auto',

src/search-editor/SearchEditor.tsx

@@ -38,7 +38,6 @@ const useStyles = makeStyles()(theme => ({
 	},
 	searchBox: {
 		padding: theme.spacing(1),
-		width: '100%',
 	},
 	footer: {
 		padding: theme.spacing(2),