@xqmsg/ui-core 0.24.2 → 0.24.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.24.2",
+  "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/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/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>
   );

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

@@ -2,18 +2,15 @@ import React, {
   KeyboardEventHandler,
   useEffect,
   useRef,
-  useMemo,
   useState,
 } from 'react';
 import { Box, Input, InputGroup, InputRightElement } from '@chakra-ui/react';
 import { FieldOptions } from '../InputTypes';
 import { StackedInputProps } from '../StackedInput/StackedInput';
-import colors from '../../../theme/foundations/colors';
 import { UseFormSetValue, FieldValues, Control } from 'react-hook-form';
 import { Dropdown } from '../components/dropdown';
 import { useOnClickOutside } from '../../../hooks/useOnOutsideClick';
 import { Dropdown as DropdownIcon } from '../../icons/dropdown';
-import { debounce } from 'lodash';
 
 export interface StackedSelectProps extends StackedInputProps {
   options: FieldOptions;
@@ -51,7 +48,9 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
     const [optionIndex, setOptionIndex] = useState<number | null>(null);
     const [position, setPosition] = useState<'top' | 'bottom'>('top');
     const [searchValue, setSearchValue] = useState('');
-    const [debouncedSearchValue, setDebouncedSearchValue] = useState('');
+    const [filteredOptions, setFilteredOptions] = useState<FieldOptions>(
+      options
+    );
 
     const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
 
@@ -70,9 +69,12 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
         (fullOptions || options).find(option => option.value === value)
           ?.label ?? ''
       );
-    }, [fullOptions, value]);
+    }, [fullOptions, options, value]);
 
-    useOnClickOutside(dropdownRef, () => setIsFocussed(false));
+    useOnClickOutside(dropdownRef, () => {
+      setIsFocussed(false);
+      setSearchValue('');
+    });
 
     const handleOnSelectItem = (option: {
       label: string;
@@ -85,6 +87,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
       setValue(name as string, option.value);
       setSelectedOption(option.label);
       setIsFocussed(false);
+      setSearchValue('');
     };
 
     const handleOnKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {
@@ -173,22 +176,27 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
           top: idx * 24,
           behavior: 'smooth',
         });
-
-        setSearchValue('');
-        setDebouncedSearchValue('');
       }
     }, [options, searchValue]);
 
-    const updateSearchValue = useMemo(() => {
-      return debounce(val => {
-        setSearchValue(val);
-      }, 1000);
-    }, []);
+    useEffect(() => {
+      setFilteredOptions(
+        options.filter(element => {
+          return element.label
+            .toLowerCase()
+            .includes(searchValue.toLowerCase());
+        })
+      );
+    }, [options, searchValue]);
 
-    const update = (value: string) => {
-      updateSearchValue(value);
-      setDebouncedSearchValue(value);
+    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const initialOptionIndex =
+        filteredOptions[0]?.value === 'section_header' ? 1 : 0;
+      setOptionIndex(initialOptionIndex);
+      const { value } = e.target;
+      setSearchValue(value);
     };
+    console.log(searchValue);
 
     return (
       <Box ref={dropdownRef} position="relative">
@@ -198,21 +206,18 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             {...props}
             ref={_ref}
             onClick={() => setIsFocussed(!isFocussed)}
-            cursor="pointer"
-            color="transparent"
+            cursor={isFocussed ? 'select' : 'pointer'}
             fontSize="13px"
-            textShadow={`0 0 0 ${colors.label.primary.light}`}
-            value={selectedOption}
-            disabled={disabled}
+            value={isFocussed ? searchValue : selectedOption}
             autoComplete="off"
-            onChange={e => update(debouncedSearchValue.concat(e.target.value))}
+            onChange={handleInput}
             onKeyDown={handleOnKeyDown}
           />
           <InputRightElement
             cursor={disabled ? 'not-allowed' : 'pointer'}
             onClick={() => !disabled && setIsFocussed(!isFocussed)}
           >
-            <DropdownIcon boxSize="16px" disabled={disabled} />
+            <DropdownIcon boxSize="12px" disabled={disabled} />
           </InputRightElement>
         </InputGroup>
         {isFocussed && (
@@ -220,7 +225,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             position={position}
             dropdownRef={dropdownMenuRef}
             onSelectItem={handleOnSelectItem}
-            options={options}
+            options={filteredOptions}
             optionIndex={optionIndex}
           />
         )}

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

@@ -9,6 +9,7 @@ export interface DropdownProps {
   dropdownRef: RefObject<HTMLDivElement>;
   position: 'top' | 'bottom';
   optionIndex?: number | null;
+  children?: React.ReactNode;
 }
 
 /**
@@ -20,8 +21,25 @@ export const Dropdown: React.FC<DropdownProps> = ({
   dropdownRef,
   position,
   optionIndex,
+  children,
 }) => {
   const DropdownContent = useMemo(() => {
+    if (!options || options.length === 0) {
+      return (
+        <Box
+          borderRadius="inherit"
+          fontSize="13px"
+          px="8px"
+          py="4px"
+          width="100%"
+          color={colors.label.primary.light}
+          bg="inherit"
+          whiteSpace="nowrap"
+        >
+          No options
+        </Box>
+      );
+    }
     return options.map((option, idx) => (
       <Box key={idx} width="100%" role="combobox">
         {option.value === 'section_header' &&
@@ -79,13 +97,8 @@ export const Dropdown: React.FC<DropdownProps> = ({
     ));
   }, [onSelectItem, optionIndex, options]);
 
-  if (!options) return null;
-
   return (
     <Flex
-      flexDirection="column"
-      ref={dropdownRef}
-      scrollMargin="15px"
       bg={colors.fill.light.quaternary}
       backdropFilter="auto"
       backdropBlur="64px"
@@ -94,18 +107,33 @@ export const Dropdown: React.FC<DropdownProps> = ({
       borderColor={colors.fill.light.tertiary}
       mt="3px"
       maxH="240px"
-      overflowY="auto"
+      position="absolute"
       px="8px"
       py="4px"
-      position="absolute"
-      top={position === 'top' ? 26 : undefined}
-      bottom={position === 'bottom' ? 30 : undefined}
-      width="fit-content"
+      overflow="hidden"
       minWidth="100%"
       zIndex={100}
       tabIndex={-2000}
+      alignItems="flex-start"
+      flexDirection="column"
+      top={position === 'top' ? 26 : undefined}
+      bottom={position === 'bottom' ? 30 : undefined}
     >
-      {DropdownContent}
+      {children && (
+        <Box width="100%" mb={2} mt={1}>
+          {children}
+        </Box>
+      )}
+      <Flex
+        width="fit-content"
+        overflowY="auto"
+        flexDirection="column"
+        ref={dropdownRef}
+        minWidth="100%"
+        scrollMargin="15px"
+      >
+        {DropdownContent}
+      </Flex>
     </Flex>
   );
 };