Dropdown position improvements (#27)

Author: lumburovskalina

components/KernDropdown.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef, useState } from 'react'
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react'
 import { Menu, Transition } from '@headlessui/react'
 import { KernDropdownProps } from '../types/dropdown';
 import { combineClassNames } from '../../javascript-functions/general';
@@ -63,6 +63,16 @@ export default function KernDropdown(props: KernDropdownProps) {
         setBackgroundColors(props.backgroundColors.map((x) => "bg-" + reduceColorProperty(x, '100')));
     }, [props.backgroundColors]);
 
+    const positionDropdown = useMemo(() => {
+        if (!props.positionDropdown) return "";
+        switch (props.positionDropdown) {
+            case "top": return "-translate-x-1/2 left-1/2 bottom-full";
+            case "bottom": return "-translate-x-1/2 left-1/2 top-full";
+            case "left": return "-translate-y-1/2 top-1/2 right-full";
+            case "right": return "-translate-y-1/2 top-1/2 left-full";
+        }
+    }, [props.positionDropdown]);
+
     function setOptionsWithCheckboxes(options: any[]) {
         if (selectedCheckboxes.length > 0) return;
         const newSelectedCheckboxes = options.map((option: any, index: number) => {
@@ -203,7 +213,7 @@ export default function KernDropdown(props: KernDropdownProps) {
                 leaveTo="transform opacity-0 scale-95"
                 show={isOpen}
             >
-                <Menu.Items className={`absolute z-10 mt-2 origin-top-right rounded-md bg-white shadow-sm ring-1 ring-black ring-opacity-5 focus:outline-none ${props.dropdownItemsWidth ?? 'w-full'} ${props.dropdownItemsClasses ?? ''}`}>
+                <Menu.Items className={`absolute z-10 mt-2 origin-top-right rounded-md bg-white shadow-sm ring-1 ring-black ring-opacity-5 focus:outline-none ${props.dropdownItemsWidth ?? 'w-full'} ${props.dropdownItemsClasses ?? ''} ${positionDropdown}`}>
                     <div className="py-1">
                         {dropdownCaptions.map((option: any, index: number) => (
                             <div key={option + "-" + index} className='relative'>

types/dropdown.ts

@@ -38,6 +38,7 @@
  * @searchTextTyped {function} - returns the text typed in the search bar
  * @fontSizeClass {string} - The font size of the dropdown items
  * @ignoreDisabledForSearch {boolean} - If the search bar should ignore the disabled options
+ * @positionDropdown {string} - The position of the dropdown
 */
 export type KernDropdownProps = {
     buttonName?: string;
@@ -81,6 +82,7 @@ export type KernDropdownProps = {
     fontSizeClass?: string;
     filteredOptions?: (option: string) => void;
     ignoreDisabledForSearch?: boolean;
+    positionDropdown?: "top" | "bottom" | "left" | "right";
 }
 
 export type AppSelectionDropdownProps = {