@xqmsg/ui-core 0.24.1 → 0.24.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.24.1",
+  "version": "0.24.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -37,7 +37,11 @@
     "trailingComma": "es5"
   },
   "name": "@xqmsg/ui-core",
-  "author": "josh@xqmsg.com",
+  "author": {
+    "name": "XQ",
+    "email": "ike@xqmsg.com",
+    "url": "https://xqmsg.co"
+  },
   "module": "dist/ui-core.esm.js",
   "size-limit": [
     {

package/src/components/{table/Table.stories.tsx → SimpleTable/SimpleTable.stories.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { Text } from '../text';
-import { Table, TableProps } from '.';
+import { SimpleTable, SimpleTableProps } from './SimpleTable';
 import { TableBody, TableHeaders } from './TableTypes';
 import { useArgs } from '@storybook/addons';
 
@@ -21,9 +21,9 @@ const tableBody: TableBody<typeof tableColumns> = [
   { AppliesToTypes: 'hi', bar: 'hey' },
 ];
 
-const meta: Meta<TableProps<typeof tableColumns>> = {
+const meta: Meta<SimpleTableProps<typeof tableColumns>> = {
   title: 'Table example',
-  component: Table,
+  component: SimpleTable,
   argTypes: {
     body: {
       description:
@@ -45,11 +45,14 @@ const meta: Meta<TableProps<typeof tableColumns>> = {
   },
 };
 export default meta;
-const Template: Story<TableProps<typeof tableColumns>> = args => {
+const Template: Story<SimpleTableProps<typeof tableColumns>> = args => {
   const [, updateArgs] = useArgs();
 
   return (
-    <Table {...args} loadMore={() => updateArgs({ ...args, loading: true })} />
+    <SimpleTable
+      {...args}
+      loadMore={() => updateArgs({ ...args, loading: true })}
+    />
   );
 };
 

package/src/components/{table/index.tsx → SimpleTable/SimpleTable.tsx}

@@ -20,7 +20,7 @@ import { TableLoadingRows } from './components/loading';
 import colors from '../../theme/foundations/colors';
 import { EmptyTable } from './empty';
 
-export interface TableProps<T extends ReadonlyTableColumns> {
+export interface SimpleTableProps<T extends ReadonlyTableColumns> {
   columns: TableColumns;
   headers?: TableHeaders<T>;
   body: TableBody<T>;
@@ -32,13 +32,13 @@ export interface TableProps<T extends ReadonlyTableColumns> {
 /**
  * A React component utilized to render the `Table` component
  */
-export function Table<T extends ReadonlyTableColumns>({
+export function SimpleTable<T extends ReadonlyTableColumns>({
   columns,
   headers,
   body,
   loading,
   loadMore,
-}: TableProps<T>) {
+}: SimpleTableProps<T>) {
   const columnsAsConst = generateTableColumnsAsConst(columns);
 
   return (

package/src/components/{table → SimpleTable}/components/text/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Text } from '@chakra-ui/react';
-import colors from '../../../../../src/theme/foundations/colors';
+import colors from '../../../../theme/foundations/colors';
 
 export interface TableTextProps {
   primaryText: string;

package/src/components/icons/checkmark/index.tsx

@@ -9,5 +9,5 @@ export interface CheckmarkProps {
  * A functional React component utilized to render the `Checkmark` icon component
  */
 export const Checkmark: React.FC<CheckmarkProps> = ({ boxSize }) => {
-  return <CheckmarkIcon boxSize={boxSize} />;
+  return <CheckmarkIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/chevron/down/index.tsx

@@ -10,5 +10,11 @@ export interface ChevronDownProps {
  * A functional React component utilized to render the `ChevronDown` icon component
  */
 export const ChevronDown: React.FC<ChevronDownProps> = ({ boxSize }) => {
-  return <ChevronDownIcon boxSize={boxSize} fill={colors.fill.action} />;
+  return (
+    <ChevronDownIcon
+      width={boxSize}
+      height={boxSize}
+      fill={colors.fill.action}
+    />
+  );
 };

package/src/components/icons/chevron/right/index.tsx

@@ -9,5 +9,5 @@ export interface ChevronRightProps {
  * A functional React component utilized to render the `ChevronRight` icon component
  */
 export const ChevronRight: React.FC<ChevronRightProps> = ({ boxSize }) => {
-  return <ChevronRightIcon boxSize={boxSize} />;
+  return <ChevronRightIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/clock/index.tsx

@@ -9,5 +9,5 @@ export interface ClockProps {
  * A functional React component utilized to render the `Clock` icon component
  */
 export const Clock: React.FC<ClockProps> = ({ boxSize }) => {
-  return <ClockIcon boxSize={boxSize} />;
+  return <ClockIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/dropdown/index.tsx

@@ -11,6 +11,10 @@ export interface DropdownProps {
  */
 export const Dropdown: React.FC<DropdownProps> = ({ boxSize, disabled }) => {
   return (
-    <DropdownIcon boxSize={boxSize} fill={disabled ? '#3C3C4399' : '#0082FF'} />
+    <DropdownIcon
+      width={boxSize}
+      height={boxSize}
+      fill={disabled ? '#3C3C4399' : '#0082FF'}
+    />
   );
 };

package/src/components/icons/error/index.tsx

@@ -9,5 +9,5 @@ export interface ErrorProps {
  * A functional React component utilized to render the `Error` icon component
  */
 export const Error: React.FC<ErrorProps> = ({ boxSize }) => {
-  return <ErrorIcon boxSize={boxSize} />;
+  return <ErrorIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/file/fill/index.tsx

@@ -9,5 +9,5 @@ export interface FileFillProps {
  * A functional React component utilized to render the `FileFill` icon component
  */
 export const FileFill: React.FC<FileFillProps> = ({ boxSize }) => {
-  return <FileFillIcon boxSize={boxSize} />;
+  return <FileFillIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/file/outline/index.tsx

@@ -9,5 +9,5 @@ export interface FileOutlineProps {
  * A functional React component utilized to render the `FileOutline` icon component
  */
 export const FileOutline: React.FC<FileOutlineProps> = ({ boxSize }) => {
-  return <FileOutlineIcon boxSize={boxSize} />;
+  return <FileOutlineIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/folder/add/fill/index.tsx

@@ -9,5 +9,5 @@ export interface FolderAddFillProps {
  * A functional React component utilized to render the `FolderAddFill` icon component
  */
 export const FolderAddFill: React.FC<FolderAddFillProps> = ({ boxSize }) => {
-  return <FolderAddFillIcon boxSize={boxSize} />;
+  return <FolderAddFillIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/folder/add/outline/index.tsx

@@ -11,5 +11,5 @@ export interface FolderAddOutlineProps {
 export const FolderAddOutline: React.FC<FolderAddOutlineProps> = ({
   boxSize,
 }) => {
-  return <FolderAddOutlineIcon boxSize={boxSize} />;
+  return <FolderAddOutlineIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/folder/outline/index.tsx

@@ -9,5 +9,5 @@ export interface FolderOutlineProps {
  * A functional React component utilized to render the `FolderOutline` icon component
  */
 export const FolderOutline: React.FC<FolderOutlineProps> = ({ boxSize }) => {
-  return <FolderOutlineIcon boxSize={boxSize} />;
+  return <FolderOutlineIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/group/index.tsx

@@ -9,5 +9,5 @@ export interface GroupProps {
  * A functional React component utilized to render the `Group` icon component
  */
 export const Group: React.FC<GroupProps> = ({ boxSize }) => {
-  return <GroupIcon boxSize={boxSize} />;
+  return <GroupIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/home/index.tsx

@@ -9,5 +9,5 @@ export interface HomeProps {
  * A functional React component utilized to render the `Home` icon component
  */
 export const Home: React.FC<HomeProps> = ({ boxSize }) => {
-  return <HomeIcon boxSize={boxSize} />;
+  return <HomeIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/image/index.tsx

@@ -9,5 +9,5 @@ export interface ImageProps {
  * A functional React component utilized to render the `Image` icon component
  */
 export const Image: React.FC<ImageProps> = ({ boxSize }) => {
-  return <ImageIcon boxSize={boxSize} />;
+  return <ImageIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/link/index.tsx

@@ -9,5 +9,5 @@ export interface LinkProps {
  * A functional React component utilized to render the `Link` icon component
  */
 export const Link: React.FC<LinkProps> = ({ boxSize }) => {
-  return <LinkIcon boxSize={boxSize} />;
+  return <LinkIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/menu/index.tsx

@@ -9,5 +9,5 @@ export interface MenuProps {
  * A functional React component utilized to render the `Menu` icon component
  */
 export const Menu: React.FC<MenuProps> = ({ boxSize }) => {
-  return <MenuIcon boxSize={boxSize} />;
+  return <MenuIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/microsoft/index.tsx

@@ -9,5 +9,5 @@ export interface MicrosoftProps {
  * A functional React component utilized to render the `Microsoft` icon component
  */
 export const Microsoft: React.FC<MicrosoftProps> = ({ boxSize }) => {
-  return <MicrosoftLogo boxSize={boxSize} />;
+  return <MicrosoftLogo width={boxSize} height={boxSize} />;
 };

package/src/components/icons/neutral/index.tsx

@@ -10,5 +10,7 @@ export interface NeutralProps {
  * A functional React component utilized to render the `Neutral` icon component
  */
 export const Neutral: React.FC<NeutralProps> = ({ color, boxSize }) => {
-  return <NeutralIcon boxSize={boxSize} fill={color || '#3C3C43'} />;
+  return (
+    <NeutralIcon width={boxSize} height={boxSize} fill={color || '#3C3C43'} />
+  );
 };

package/src/components/icons/page/index.tsx

@@ -9,5 +9,5 @@ export interface PageProps {
  * A functional React component utilized to render the `Page` icon component
  */
 export const Page: React.FC<PageProps> = ({ boxSize }) => {
-  return <PageIcon boxSize={boxSize} />;
+  return <PageIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/positive/index.tsx

@@ -9,5 +9,5 @@ export interface PositiveProps {
  * A functional React component utilized to render the `Positive` icon component
  */
 export const Positive: React.FC<PositiveProps> = ({ boxSize }) => {
-  return <PositiveIcon boxSize={boxSize} />;
+  return <PositiveIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/question/index.tsx

@@ -9,5 +9,5 @@ export interface QuestionProps {
  * A functional React component utilized to render the `Question` icon component
  */
 export const Question: React.FC<QuestionProps> = ({ boxSize }) => {
-  return <QuestionIcon boxSize={boxSize} />;
+  return <QuestionIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/search/index.tsx

@@ -9,5 +9,5 @@ export interface SearchProps {
  * A functional React component utilized to render the `Search` icon component
  */
 export const Search: React.FC<SearchProps> = ({ boxSize }) => {
-  return <SearchIcon boxSize={boxSize} />;
+  return <SearchIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/services/index.tsx

@@ -9,5 +9,5 @@ export interface ServicesProps {
  * A functional React component utilized to render the `Services` icon component
  */
 export const Services: React.FC<ServicesProps> = ({ boxSize }) => {
-  return <ServicesIcon boxSize={boxSize} />;
+  return <ServicesIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/settings/index.tsx

@@ -10,5 +10,7 @@ export interface SettingsProps {
  * A functional React component utilized to render the `Settings` icon component
  */
 export const Settings: React.FC<SettingsProps> = ({ boxSize }) => {
-  return <SettingsIcon boxSize={boxSize} fill={colors.fill.action} />;
+  return (
+    <SettingsIcon width={boxSize} height={boxSize} fill={colors.fill.action} />
+  );
 };

package/src/components/icons/table/fill/index.tsx

@@ -9,5 +9,5 @@ export interface TableFillProps {
  * A functional React component utilized to render the `TableFill` icon component
  */
 export const TableFill: React.FC<TableFillProps> = ({ boxSize }) => {
-  return <TableFillIcon boxSize={boxSize} />;
+  return <TableFillIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/table/outline/index.tsx

@@ -9,5 +9,5 @@ export interface TableOutlineProps {
  * A functional React component utilized to render the `TableOutline` icon component
  */
 export const TableOutline: React.FC<TableOutlineProps> = ({ boxSize }) => {
-  return <TableOutlineIcon boxSize={boxSize} />;
+  return <TableOutlineIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/task/index.tsx

@@ -6,5 +6,5 @@ import { IconProps } from '..';
  * A functional React component utilized to render the `Task` icon component
  */
 export const Task: React.FC<IconProps> = ({ boxSize }) => {
-  return <TaskIcon boxSize={boxSize} />;
+  return <TaskIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/trash/index.tsx

@@ -9,5 +9,5 @@ export interface TrashProps {
  * A functional React component utilized to render the `Trash` icon component
  */
 export const Trash: React.FC<TrashProps> = ({ boxSize }) => {
-  return <TrashIcon boxSize={boxSize} />;
+  return <TrashIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/video/index.tsx

@@ -9,5 +9,5 @@ export interface VideoProps {
  * A functional React component utilized to render the `Video` icon component
  */
 export const Video: React.FC<VideoProps> = ({ boxSize }) => {
-  return <VideoIcon boxSize={boxSize} />;
+  return <VideoIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/warning/index.tsx

@@ -9,5 +9,5 @@ export interface WarningProps {
  * A functional React component utilized to render the `Warning` icon component
  */
 export const Warning: React.FC<WarningProps> = ({ boxSize }) => {
-  return <WarningIcon boxSize={boxSize} />;
+  return <WarningIcon width={boxSize} height={boxSize} />;
 };

package/src/components/icons/workspace/index.tsx

@@ -1,14 +1,22 @@
 import React from 'react';
 import { Image } from '@chakra-ui/react';
 import path from './workspace.png';
+import { ReactComponent as WorkspaceIcon } from './workspace.svg';
 
 export interface WorkspaceProps {
   boxSize: number | string;
+  filled?: boolean;
 }
 
 /**
  * A functional React component utilized to render the `Workspace` icon component
  */
-export const Workspace: React.FC<WorkspaceProps> = ({ boxSize }) => {
+export const Workspace: React.FC<WorkspaceProps> = ({
+  boxSize,
+  filled = false,
+}) => {
+  if (filled) {
+    return <WorkspaceIcon boxSize={boxSize} />;
+  }
   return <Image src={path} boxSize={boxSize} />;
 };

package/src/components/icons/workspace/workspace.svg

@@ -0,0 +1,8 @@
+<svg width="56" height="51" viewBox="0 0 56 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 10.75C18 5.22715 22.4772 0.75 28 0.75C33.5228 0.75 38 5.22715 38 10.75C38 16.2728 33.5228 20.75 28 20.75C22.4772 20.75 18 16.2728 18 10.75Z" fill="#0082FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38 18.75C38 14.3317 41.5817 10.75 46 10.75C50.4183 10.75 54 14.3317 54 18.75C54 23.1683 50.4183 26.75 46 26.75C41.5817 26.75 38 23.1683 38 18.75Z" fill="#0082FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 18.75C2 14.3317 5.58172 10.75 10 10.75C14.4183 10.75 18 14.3317 18 18.75C18 23.1683 14.4183 26.75 10 26.75C5.58172 26.75 2 23.1683 2 18.75Z" fill="#0082FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8263 33.0634C16.0209 28.0684 21.6223 24.75 28 24.75C34.3785 24.75 39.9805 28.0692 43.1749 33.0652C45.3833 36.5191 46.3387 40.6838 45.8906 44.7445C45.8205 45.379 45.4517 45.942 44.898 46.2598C39.9184 49.117 34.1469 50.75 28 50.75C21.8531 50.75 16.0816 49.117 11.102 46.2598C10.5482 45.942 10.1795 45.379 10.1094 44.7445C9.66116 40.6831 10.6171 36.5176 12.8263 33.0634Z" fill="#0082FF"/>
+<path d="M9.55275 30.7598C9.52064 30.8092 9.48872 30.8586 9.457 30.9082C6.88244 34.9337 5.70421 39.7278 6.0659 44.454C4.44445 44.2077 2.87119 43.8116 1.36114 43.2798L1.05459 43.1718C0.495356 42.9749 0.104606 42.467 0.0575759 41.876L0.031795 41.552C0.0107124 41.2871 0 41.0196 0 40.75C0 35.377 4.23745 30.9938 9.55275 30.7598Z" fill="#0082FF"/>
+<path d="M49.935 44.4539C50.2966 39.7287 49.119 34.9355 46.5454 30.9105C46.5132 30.8601 46.4808 30.8099 46.4482 30.7599C51.7631 30.9943 56 35.3774 56 40.75C56 41.0196 55.9893 41.2871 55.9682 41.552L55.9424 41.876C55.8954 42.467 55.5046 42.9749 54.9454 43.1718L54.6389 43.2798C53.1291 43.8115 51.5561 44.2076 49.935 44.4539Z" fill="#0082FF"/>
+</svg>

package/src/components/input/Input.stories.tsx

@@ -6,6 +6,19 @@ import { useFormHandler } from '../form/hooks/useFormHandler';
 import * as Yup from 'yup';
 import { Form } from '../form';
 import { SelectNative } from '../select';
+import {
+  Box,
+  Flex,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+  Tooltip,
+  Text,
+} from '@chakra-ui/react';
+import { Question } from '../icons';
 
 const meta: Meta<InputProps<StoryFormSchema>> = {
   title: 'Input example',
@@ -133,6 +146,25 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         name="prop3"
         onChange={e => form.setValue('prop3', e.target.value)}
       />
+      <Input
+        {...args}
+        inputType="text"
+        name="prop3"
+        onChange={e => form.setValue('prop3', e.target.value)}
+        tooltipText={
+          <Box>
+            <Text fontSize={13}>Explanation!</Text>
+            <Text>Are you sure you want to have that milkshake?</Text>
+          </Box>
+        }
+      />
+      <Input
+        {...args}
+        inputType="text"
+        name="prop3"
+        onChange={e => form.setValue('prop3', e.target.value)}
+        tooltipText="test text"
+      />
       <Input
         {...args}
         inputType="textarea"
@@ -174,6 +206,19 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         name="prop4"
         defaultValue={'value1'}
       />
+      <Input
+        {...args}
+        inputType="select"
+        setValue={form.setValue}
+        name="prop4"
+        defaultValue={'value1'}
+        tooltipText={
+          <Box>
+            <Text fontSize={13}>Explanation!</Text>
+            <Text>Are you sure you want to have that milkshake?</Text>
+          </Box>
+        }
+      />
       <SelectNative
         {...args}
         setValue={form.setValue}

package/src/components/input/StackedMultiSelect/index.tsx

@@ -1,12 +1,10 @@
 import React, {
   KeyboardEventHandler,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from 'react';
 import { Box, Flex, Text, Input } from '@chakra-ui/react';
-import { debounce } from 'lodash';
 import {
   FieldOption,
   FieldOptions,
@@ -50,13 +48,16 @@ const StackedMultiSelect = React.forwardRef<
   const [isInit, setIsInit] = useState(false);
   const [localValues, setLocalValues] = useState<FieldOptions>([]);
   const [localOptions, setLocalOptions] = useState<FieldOptions>(options);
+  const [filteredOptions, setFilteredOptions] = useState<FieldOptions>(
+    localOptions
+  );
   const [isFocussed, setIsFocussed] = useState(false);
   const [shouldSideScroll, setShouldSideScroll] = useState(false);
   const [optionIndex, setOptionIndex] = useState<number | null>(null);
 
   const [position, setPosition] = useState<'top' | 'bottom'>('top');
   const [searchValue, setSearchValue] = useState('');
-  const [debouncedSearchValue, setDebouncedSearchValue] = useState('');
+  // const [debouncedSearchValue, setDebouncedSearchValue] = useState('');
 
   const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
 
@@ -137,6 +138,9 @@ const StackedMultiSelect = React.forwardRef<
     );
 
     setLocalValues(prevLocalValues => [...prevLocalValues, option]);
+
+    // reset search on value select
+    setSearchValue('');
   };
 
   const handleDelete = (option: FieldOption) => {
@@ -180,8 +184,8 @@ const StackedMultiSelect = React.forwardRef<
 
       if (e.key === 'ArrowUp' && optionIndex !== null && optionIndex > 0) {
         const incrementValue =
-          localOptions[optionIndex - 1] &&
-          localOptions[optionIndex - 1].value === 'section_header'
+          filteredOptions[optionIndex - 1] &&
+          filteredOptions[optionIndex - 1].value === 'section_header'
             ? 2
             : 1;
         setOptionIndex(optionIndex - incrementValue);
@@ -195,11 +199,11 @@ const StackedMultiSelect = React.forwardRef<
       if (
         e.key === 'ArrowDown' &&
         optionIndex !== null &&
-        optionIndex < localOptions.length
+        optionIndex < filteredOptions.length
       ) {
         const incrementValue =
-          localOptions[optionIndex + 1] &&
-          localOptions[optionIndex + 1].value === 'section_header'
+          filteredOptions[optionIndex + 1] &&
+          filteredOptions[optionIndex + 1].value === 'section_header'
             ? 2
             : 1;
         setOptionIndex(optionIndex + incrementValue);
@@ -211,7 +215,7 @@ const StackedMultiSelect = React.forwardRef<
       }
 
       if (e.key === 'Enter' && optionIndex !== null) {
-        const option = localOptions.find((_, idx) => optionIndex === idx);
+        const option = filteredOptions.find((_, idx) => optionIndex === idx);
         if (!option) return;
 
         handleChange(option);
@@ -222,8 +226,6 @@ const StackedMultiSelect = React.forwardRef<
       if (e.key === 'Tab') {
         return setIsFocussed(false);
       }
-
-      return update(debouncedSearchValue.concat(e.key));
     }
   };
 
@@ -236,24 +238,27 @@ const StackedMultiSelect = React.forwardRef<
       );
 
       dropdownMenuRef.current?.scrollTo({
-        top: idx * 24,
+        top: idx * 27,
         behavior: 'smooth',
       });
-
-      setSearchValue('');
-      setDebouncedSearchValue('');
     }
   }, [options, searchValue]);
 
-  const updateSearchValue = useMemo(() => {
-    return debounce(val => {
-      setSearchValue(val);
-    }, 1000);
-  }, []);
-
-  const update = (value: string) => {
-    updateSearchValue(value);
-    setDebouncedSearchValue(value);
+  useEffect(() => {
+    setFilteredOptions(
+      localOptions.filter(element => {
+        return element.label.toLowerCase().includes(searchValue.toLowerCase());
+      })
+    );
+  }, [localOptions, searchValue]);
+
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    console.log(e);
+    const initialOptionIndex =
+      filteredOptions[0]?.value === 'section_header' ? 1 : 0;
+    setOptionIndex(initialOptionIndex);
+    const { value } = e.target;
+    setSearchValue(value);
   };
 
   return (
@@ -330,17 +335,19 @@ const StackedMultiSelect = React.forwardRef<
           _focus={{ boxShadow: 'none !important' }}
         />
         <Flex mr="4px" justifyContent="center" alignItems="center">
-          <DropdownIcon boxSize="16px" disabled={disabled} />
+          <DropdownIcon boxSize="12px" disabled={disabled} />
         </Flex>
       </Flex>
       {isFocussed && (
         <Dropdown
           dropdownRef={dropdownMenuRef}
           onSelectItem={option => handleChange(option)}
-          options={localOptions}
+          options={filteredOptions}
           position={position}
           optionIndex={optionIndex}
-        />
+        >
+          <Input value={searchValue} onChange={handleInput} />
+        </Dropdown>
       )}
     </Box>
   );