From a9415ad8aa7b8ff4c464360ea6d20e26835cc34f Mon Sep 17 00:00:00 2001
From: JWittmeyer <jens.wittmeyer@kern.ai>
Date: Tue, 3 Dec 2024 14:22:31 +0100
Subject: [PATCH 1/2] Fixes option return for search in dropdown

---
 components/KernDropdown.tsx | 11 +++++++++--
 helpers/dropdown-helper.ts  |  8 +++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/KernDropdown.tsx b/components/KernDropdown.tsx
index d9b5a47..64159d5 100644
--- a/components/KernDropdown.tsx
+++ b/components/KernDropdown.tsx
@@ -21,6 +21,7 @@ export default function KernDropdown(props: KernDropdownProps) {
     const [disabledOptions, setDisabledOptions] = useState<boolean[]>([]);
     const [backgroundColors, setBackgroundColors] = useState<string[]>([]);
     const [searchText, setSearchText] = useState('');
+    const [searchIndexes, setSearchIndexes] = useState<number[]>();
     const [isOpen, setIsOpen_] = useState(false);
     const [selectedCheckboxes, setSelectedCheckboxes] = useState<any[]>([]);
     const [position, setPosition] = useState(null);
@@ -51,11 +52,15 @@ export default function KernDropdown(props: KernDropdownProps) {
     useEffect(() => {
         const prepareOptions = prepareDropdownOptionsToArray(props.options, props.hasSearchBar, props.valuePropertyPath);
         if (props.hasSearchBar) {
-            setDropdownCaptions(setOptionsWithSearchBar(prepareOptions, searchText));
+            const [remaining, indexes] = setOptionsWithSearchBar(prepareOptions, searchText)
+            setDropdownCaptions(remaining);
+            setSearchIndexes(indexes);
         } else if (props.hasCheckboxes) {
             setOptionsWithCheckboxes(prepareOptions);
+            setSearchIndexes(null);
         } else {
             setDropdownCaptions(prepareOptions);
+            setSearchIndexes(null);
         }
     }, [props.options, searchText, selectedCheckboxes, props.hasSearchBar, props.hasCheckboxes, props.selectedCheckboxes, props.hasSelectAll, props.valuePropertyPath]);
 
@@ -167,10 +172,12 @@ export default function KernDropdown(props: KernDropdownProps) {
             return;
         }
         if (props.selectedOption) {
-            props.selectedOption(props.options[index]);
             if (props.hoverBoxList) setHoverBoxPosition(null);
             if (props.hasSearchBar) {
                 setSearchText(option);
+                props.selectedOption(props.options[searchIndexes[index]]);
+            } else {
+                props.selectedOption(props.options[index]);
             }
             setIsOpen(false);
         }
diff --git a/helpers/dropdown-helper.ts b/helpers/dropdown-helper.ts
index 41a73e0..32b0ec4 100644
--- a/helpers/dropdown-helper.ts
+++ b/helpers/dropdown-helper.ts
@@ -33,9 +33,11 @@ export function prepareDropdownOptionsToArray(options: string[] | any[], hasSear
     else return getTextArray(options);
 }
 
-export function setOptionsWithSearchBar(options: string[], searchText: string) {
-    if (!searchText) return options;
-    return options.filter(option => option.toLowerCase().includes(searchText.toLowerCase()));
+export function setOptionsWithSearchBar(options: string[], searchText: string): [string[], number[]] {
+    if (!searchText) return [options, options.map((_, i) => i)];
+    const withIdx = options.map((o, i) => ({ origIdx: i, text: o }));
+    const filtered = withIdx.filter(option => option.text.toLowerCase().includes(searchText.toLowerCase()));
+    return [filtered.map(f => f.text), filtered.map(f => f.origIdx)];
 }
 
 export function checkDropdownProps(props: KernDropdownProps) {

From e0da1870283bfa0fd0b7a3d50239848e6cbf0fd1 Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Tue, 3 Dec 2024 15:07:59 +0100
Subject: [PATCH 2/2] Lookup lists unsupported dropdown icon error with
 existing list

---
 components/SVGIcon.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/SVGIcon.tsx b/components/SVGIcon.tsx
index 5d51a2d..11b437c 100644
--- a/components/SVGIcon.tsx
+++ b/components/SVGIcon.tsx
@@ -1,7 +1,7 @@
-import { IconBolt, IconChevronDown, IconCode, IconDotsVertical, IconExternalLink, IconFileInfo, IconFilePencil, IconLoader, IconPlayerPlayFilled, IconSquare, IconSquareCheck, IconTrash } from '@tabler/icons-react';
+import { IconBolt, IconChevronDown, IconCode, IconDotsVertical, IconEdit, IconExternalLink, IconFileInfo, IconFilePencil, IconLoader, IconPlayerPlayFilled, IconShieldCheckFilled, IconShieldFilled, IconSquare, IconSquareCheck, IconTrash } from '@tabler/icons-react';
 
 export const SUPPORTED_ICONS = ['IconCode', 'IconBolt', 'IconSquareCheck', 'IconSquare', 'IconPlayerPlayFilled', 'IconTrash', 'IconExternalLink',
-    'IconLoader', 'IconFilePencil', 'IconFileInfo'
+    'IconLoader', 'IconFilePencil', 'IconFileInfo', 'IconEdit', 'IconShieldFilled', 'IconShieldCheckFilled'
 ]
 
 type SVGIconProps = {
@@ -37,6 +37,12 @@ export default function SVGIcon(props: SVGIconProps) {
             return <IconFilePencil size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconFileInfo':
             return <IconFileInfo size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconEdit':
+            return <IconEdit size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconShieldFilled':
+            return <IconShieldFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconShieldCheckFilled':
+            return <IconShieldCheckFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         default: return <IconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
     }