v1.18.0 (#33)

* Fixes option return for search in dropdown

* Lookup lists unsupported dropdown icon error with existing list

---------

Co-authored-by: Lina <lina.lumburovska@kern.ai>

Author: JWittmeyer

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);
         }

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' : ''}`} />
     }
 

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) {