@monolith-forensics/monolith-ui 1.2.41 → 1.2.44

package/dist/Calendar/calendarHelpers.d.ts

@@ -35,7 +35,7 @@ export declare const CALENDAR_MONTHS: {
 };
 export declare const CALENDAR_WEEKS = 6;
 export declare const zeroPad: (value: number, length: number) => string;
-export declare const getMonthDays: (month?: number, year?: number) => 29 | 28 | 30 | 31;
+export declare const getMonthDays: (month?: number, year?: number) => 28 | 29 | 30 | 31;
 export declare const getMonthFirstDay: (month?: number, year?: number) => number;
 export declare const isDate: (date: Date) => boolean;
 export declare const isSameMonth: (date: Date, basedate?: Date) => boolean;

package/dist/FileViewer/FileViewer.js

@@ -62,7 +62,7 @@ const StyledActionsMenu = styled.div `
   gap: 10px;
   align-items: center;
 `;
-const StyledContainer = styled.div `
+const StyledContainer = styled.div.attrs({ className: "FileViewer-container" }) `
   position: fixed;
   top: 0;
   left: 0;
@@ -81,6 +81,7 @@ const StyledContainer = styled.div `
   // scroll bar
   ::-webkit-scrollbar {
     width: 14px;
+    height: 14px;
   }
 
   ::-webkit-scrollbar-track {
@@ -93,9 +94,19 @@ const StyledContainer = styled.div `
     border-radius: 10px;
     border: 4px solid rgba(0, 0, 0, 0);
     background-clip: padding-box;
+
+    &:hover {
+      background-color: ${(props) => props.theme.palette.primary.main};
+    }
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: rgba(0, 0, 0, 0.5);
   }
 `;
-const StyledInnerContainer = styled.div `
+const StyledInnerContainer = styled.div.attrs({
+    className: "FileViewer-inner-container",
+}) `
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;

package/dist/FileViewer/viewers/ImageViewer.js

@@ -3,11 +3,10 @@ import { useEffect, useState } from "react";
 import styled from "styled-components";
 import Loader from "../../Loader";
 const ImageViewerContainer = styled.div `
-  display: flex;
-  justify-content: center;
+  height: 100%;
 
-  flex: 1 1 auto;
-  height: 0px;
+  text-align: center;
+  padding: 10px;
 `;
 // Updated Image styled-component to remove max-width and max-height
 const Image = styled.img `

package/dist/FileViewer/viewers/PdfViewer.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Document, Page, pdfjs } from "react-pdf";
@@ -6,29 +17,15 @@ import "react-pdf/dist/esm/Page/TextLayer.css";
 import styled from "styled-components";
 import Loader from "../../Loader";
 pdfjs.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url).toString();
-const StyledContainer = styled.div `
-  display: flex;
-  justify-content: center;
-
-  flex: 1 1 auto;
-  height: 0px;
-
-  &[data-loading="true"] > * {
-    justify-content: center;
-  }
-`;
-const StyledDocument = styled(Document) `
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  background-color: transparent;
-
-  // width: 100%;
-`;
+const StyledContainer = styled.div ``;
+const StyledDocument = styled(Document).attrs({
+    className: "PdfViewer-document",
+}) ``;
 const StyledPage = styled(Page) `
   width: fit-content;
   background-color: transparent;
+  margin: 0 auto;
+  margin-bottom: 10px;
 `;
 const StyledLoader = styled.div `
   display: flex;
@@ -36,18 +33,25 @@ const StyledLoader = styled.div `
   justify-content: center;
   align-items: center;
   gap: 10px;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 `;
 export const PdfViewer = ({ file, zoomFactor = 1, }) => {
     const [loading, setLoading] = useState(true);
     const [numPages, setNumPages] = useState();
     const [pageNumber, setPageNumber] = useState(1);
-    function onDocumentLoadSuccess({ numPages }) {
+    function onDocumentLoadSuccess(_a) {
+        var { numPages } = _a, rest = __rest(_a, ["numPages"]);
+        console.log(rest);
         setLoading(false);
         setNumPages(numPages);
     }
     // viewport width
-    const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) - 20;
-    return (_jsx(StyledContainer, { className: "PdfViewer", "data-loading": loading, children: _jsx(StyledDocument, { file: file.url, onLoadSuccess: onDocumentLoadSuccess, loading: _jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading PDF..." })] }), onClick: (e) => {
+    const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) / 1.15;
+    return (_jsx(StyledContainer, { className: "PdfViewer", children: _jsx(StyledDocument, { file: file.url, onLoadSuccess: onDocumentLoadSuccess, loading: _jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading PDF..." })] }), onClick: (e) => {
                 e.stopPropagation();
             }, children: Array.from(new Array(numPages), (el, index) => (_jsx(StyledPage, { pageNumber: index + 1, scale: zoomFactor, width: vw }, `page_${index + 1}`))) }) }));
 };

package/dist/FormSection/FormSection.d.ts

@@ -1,15 +1,18 @@
+import { LucideIcon } from "lucide-react";
 import { ReactNode } from "react";
 import { Size } from "../core";
 interface FormSectionProps {
     children?: ReactNode;
     className?: string;
+    style?: React.CSSProperties;
     title?: string | ReactNode;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     allowCollapse?: boolean;
     size?: Size;
-    style?: React.CSSProperties;
+    icon?: LucideIcon;
+    iconColor?: string;
 }
-declare const FormSection: ({ title, children, open, defaultOpen, onOpenChange, allowCollapse, size, style, }: FormSectionProps) => import("react/jsx-runtime").JSX.Element;
+declare const FormSection: ({ title, children, open, defaultOpen, onOpenChange, allowCollapse, size, style, icon: Icon, iconColor, }: FormSectionProps) => import("react/jsx-runtime").JSX.Element;
 export default FormSection;

package/dist/FormSection/FormSection.js

@@ -56,7 +56,23 @@ const StyledContainer = styled.div `
     }
   }
 `;
-const FormSection = ({ title, children, open, defaultOpen = true, onOpenChange, allowCollapse = true, size, style, }) => {
+const resolveIconSize = (size) => {
+    switch (size) {
+        case "xs":
+            return 12;
+        case "sm":
+            return 14;
+        case "md":
+            return 18;
+        case "lg":
+            return 24;
+        case "xl":
+            return 28;
+        default:
+            return 18;
+    }
+};
+const FormSection = ({ title, children, open, defaultOpen = true, onOpenChange, allowCollapse = true, size, style, icon: Icon, iconColor, }) => {
     const [_open, setOpen] = useState(defaultOpen);
     const openState = open !== null && open !== void 0 ? open : _open;
     return (_jsxs(StyledContainer, { className: "mfui-FormSection", size: size, style: style, children: [_jsxs("div", { className: "section-header", onClick: (e) => {
@@ -64,6 +80,6 @@ const FormSection = ({ title, children, open, defaultOpen = true, onOpenChange,
                         setOpen(!openState);
                         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!openState);
                     }
-                }, children: [_jsx("h3", { children: title }), _jsx("div", { className: "section-line" }), !!allowCollapse ? (_jsx(ChevronDownIcon, { size: 18, className: openState ? "open" : "" })) : ("")] }), _jsx("div", { className: "section-content", "data-open": openState, children: children })] }));
+                }, children: [Icon && _jsx(Icon, { size: resolveIconSize(size), color: iconColor }), _jsx("h3", { children: title }), _jsx("div", { className: "section-line" }), !!allowCollapse ? (_jsx(ChevronDownIcon, { size: 18, className: openState ? "open" : "" })) : ("")] }), _jsx("div", { className: "section-content", "data-open": openState, children: children })] }));
 };
 export default FormSection;

package/dist/SelectBox/SelectBox.js

@@ -160,14 +160,62 @@ const StyledItem = styled.div `
     color: ${(props) => props.theme.palette.text.primary};
   }
 `;
+/**
+ *
+ * Attempts to resolve the value to an Option object
+ * if the value is a string, it will attempt to find the corresponding Option object
+ * if the value is an Option object, it will attempt to find the corresponding Option object
+ * if the value is not found, it will return the value as is so that custom values can be displayed without a lookup
+ */
+const resolveValue = (value, data) => {
+    if (value === undefined)
+        return undefined;
+    let foundOption = null;
+    if (typeof value === "string") {
+        foundOption = data.find((item) => item.value === value);
+    }
+    else {
+        foundOption = data.find((item) => item.value === value.value);
+    }
+    if (foundOption)
+        return foundOption;
+    if (typeof value === "string") {
+        return { value, label: value };
+    }
+    return value;
+};
 const SelectBox = styled(({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, label, description, required = false, error, openOnFocus = true, renderOption, actionComponent, focused, grouped, OptionTooltip, // Custom tooltip component for search menu items
 DropDownProps = {}, debounceTime = 150, sort = false, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g;
     const theme = useTheme();
     const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
-    const [inputValue, setInputValue] = useState("");
+    const isControlled = value !== undefined;
+    const resolvedOptions = data.map((item) => ({
+        value: isObjectArray ? item.value : item,
+        label: isObjectArray ? item.label : item,
+        group: isObjectArray ? item.group : undefined,
+        data: isObjectArray ? item.data : undefined,
+    }));
+    /**
+     * Get the correct option if the default value is a string
+     * otherwise, use the default value as is
+     * this allows setting the value with a string or Option object
+     */
+    const resolvedDefaultValue = resolveValue(defaultValue, resolvedOptions);
+    /**
+     * Get the correct option if the value is a string
+     * otherwise, use the value as is
+     * this allows setting the value with a string or Option object
+     */
+    const resolvedValue = resolveValue(value, resolvedOptions);
+    const [valueState, setValueState] = useState(resolvedDefaultValue);
+    /**
+     * Get the correct value based on whether the component is controlled or not
+     * if controlled, use the controlled value, otherwise use the resolved value
+     */
+    const _value = isControlled ? resolvedValue : valueState;
+    const [inputValue, setInputValue] = useState((_value === null || _value === void 0 ? void 0 : _value.label) || "");
     const [isOpen, setIsOpen] = useState(false);
-    const [selected, setSelected] = useState(null);
     const [searchValue, setSearchValue] = useState("");
     const [customItems, setCustomItems] = useState([]);
     const [placement, setPlacement] = useState("bottom-start");
@@ -176,18 +224,17 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
     const containerRef = useRef(null);
     const scrollContainerRef = useRef(null);
     // Remove duplicates from search dropdown data
-    const uniqueItems = Array.from(new Map([...data, ...customItems].map((item) => [
-        isObjectArray ? item.value : item,
-        item,
-    ])).values());
+    const uniqueItems = Array.from(new Map([...resolvedOptions, ...customItems].map((item) => [item.value, item])).values());
     // search filter for dropdown items
     const filteredItems = uniqueItems
         .filter((item) => {
-        const itemValue = (isObjectArray ? item.label : item);
-        return itemValue === null || itemValue === void 0 ? void 0 : itemValue.toLowerCase().includes(searchValue.toLowerCase());
+        var _a;
+        return (_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchValue.toLowerCase());
     })
         .sort((a, b) => {
         if (grouped) {
+            if (!a.group || !b.group)
+                return 0;
             const aValue = a.group;
             const bValue = b.group;
             return aValue.localeCompare(bValue);
@@ -195,8 +242,8 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
         if (!sort)
             return 0;
         // Secondary sort by label/value to ensure consistent ordering
-        const aLabel = isObjectArray ? a.label : a;
-        const bLabel = isObjectArray ? b.label : b;
+        const aLabel = a.label;
+        const bLabel = b.label;
         return aLabel.localeCompare(bLabel);
     });
     const groupedItems = grouped
@@ -242,8 +289,8 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
     };
     const handleInputChange = (e) => {
         const value = e.target.value;
+        setInputValue(value || "");
         debouncedHandleChange(value);
-        setInputValue(value);
         setIsOpen(true);
     };
     const debouncedHandleChange = useDebouncedCallback((value) => {
@@ -254,9 +301,7 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
             setSearchValue(value);
         }
         if (allowCustomValue && value) {
-            const existingItem = data.find((item) => isObjectArray
-                ? item.label.toLowerCase() === value.toLowerCase()
-                : item.toLowerCase() === value.toLowerCase());
+            const existingItem = resolvedOptions.find((item) => item.value.toLowerCase() === value.toLowerCase());
             if (existingItem)
                 handleChangeSelection(existingItem);
             else
@@ -265,23 +310,21 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
         update();
     }, debounceTime);
     const handleBlur = () => {
-        var _a, _b;
         // add custom value if prop is set
         // and input value is not empty
         // and no item is selected
-        if (allowCustomValue && !selected && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
-            handleAddItem((_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.value);
+        if (allowCustomValue && !_value && !!inputValue) {
+            handleAddItem(inputValue);
         }
         setIsOpen(false);
         setSearchValue("");
     };
     const handleClear = (e) => {
         e.preventDefault();
-        if (inputRef.current)
-            inputRef.current.value = "";
+        setInputValue("");
         setIsOpen(false);
         handleChangeSelection(null);
-        setSelected(null);
+        !isControlled && setValueState(null);
         setSearchValue("");
         searchFn === null || searchFn === void 0 ? void 0 : searchFn("");
         update();
@@ -295,23 +338,21 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
         setIsOpen(false);
     };
     const handleChangeSelection = useCallback((option) => {
-        setSelected(option);
-        onChange === null || onChange === void 0 ? void 0 : onChange((option === null || option === void 0 ? void 0 : option.value) || option, option);
+        !isControlled && setValueState(option);
+        onChange === null || onChange === void 0 ? void 0 : onChange((option === null || option === void 0 ? void 0 : option.value) || null, option);
     }, [onChange]);
     const handleAddItem = useCallback((newItem) => {
-        const newValue = isObjectArray
-            ? { label: newItem, value: newItem }
-            : newItem;
+        const newValue = { label: newItem, value: newItem };
         setCustomItems((prev) => [...prev, newValue]);
         handleChangeSelection(newValue);
         onItemAdded === null || onItemAdded === void 0 ? void 0 : onItemAdded(newValue);
     }, [onItemAdded, isObjectArray, handleChangeSelection]);
     const handleKeyDown = (e) => {
-        var _a, _b;
-        const currentInputValue = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+        var _a;
+        const currentInputValue = inputValue;
         // Escape key
         if (e.key === "Escape") {
-            const reference = (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current;
+            const reference = (_a = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _a === void 0 ? void 0 : _a.current;
             reference === null || reference === void 0 ? void 0 : reference.blur();
             setSearchValue("");
             update();
@@ -326,52 +367,41 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
         // Arrow down
         if (e.key === "ArrowDown") {
             e.preventDefault();
-            setSelected((prev) => {
-                let newItem = filteredItems[0]; // Loop back to the first item
-                const index = filteredItems.findIndex((item) => isObjectArray
-                    ? item.value === (prev === null || prev === void 0 ? void 0 : prev.value)
-                    : item === prev);
-                if (index < filteredItems.length - 1) {
-                    newItem = filteredItems[index + 1];
-                }
-                onChange === null || onChange === void 0 ? void 0 : onChange((newItem === null || newItem === void 0 ? void 0 : newItem.value) || newItem, newItem);
-                return newItem;
-            });
+            let newItem = filteredItems[0]; // Loop back to the first item
+            const index = filteredItems.findIndex((item) => item.value === (_value === null || _value === void 0 ? void 0 : _value.value));
+            if (index < filteredItems.length - 1) {
+                newItem = filteredItems[index + 1];
+            }
+            !isControlled && setValueState(newItem);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newItem.value, newItem);
             return;
         }
         // Arrow up
         if (e.key === "ArrowUp") {
             e.preventDefault();
-            setSelected((prev) => {
-                let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
-                const index = filteredItems.findIndex((item) => isObjectArray
-                    ? item.value === (prev === null || prev === void 0 ? void 0 : prev.value)
-                    : item === prev);
-                if (index > 0) {
-                    newItem = filteredItems[index - 1];
-                }
-                onChange === null || onChange === void 0 ? void 0 : onChange((newItem === null || newItem === void 0 ? void 0 : newItem.value) || newItem, newItem);
-                return newItem;
-            });
+            let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
+            const index = filteredItems.findIndex((item) => item.value === (_value === null || _value === void 0 ? void 0 : _value.value));
+            if (index > 0) {
+                newItem = filteredItems[index - 1];
+            }
+            !isControlled && setValueState(newItem);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newItem.value, newItem);
             return;
         }
         // Tab key
         if (e.key === "Tab") {
-            if (allowCustomValue && !selected && !!currentInputValue) {
+            if (allowCustomValue && !_value && !!currentInputValue) {
                 handleAddItem(currentInputValue);
                 setSearchValue("");
             }
-            else if (!selected) {
+            else if (!_value) {
                 // clear input
-                if (inputRef.current) {
-                    inputRef.current.value = "";
-                }
+                setInputValue("");
             }
             setSearchValue("");
             setIsOpen(false);
             return;
         }
-        // setSelected(null); // Reset selected value when input value changes
     };
     const handleFocus = () => {
         if (openOnFocus) {
@@ -407,26 +437,13 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
         document.addEventListener("click", close);
         return () => document.removeEventListener("click", close);
     }, [refs.floating, refs.reference, handleBlur]);
-    // Handle default value
-    useEffect(() => {
-        if (defaultValue) {
-            const isOption = defaultValue.value !== undefined;
-            const searchPattern = isOption
-                ? defaultValue.value
-                : defaultValue;
-            setSelected(data.find((item) => isObjectArray
-                ? item.value === searchPattern
-                : item === searchPattern) || null);
-        }
-    }, [data, defaultValue, isObjectArray]);
     // handle input value change
     useEffect(() => {
-        if (inputRef.current && selected) {
-            inputRef.current.value = isObjectArray
-                ? selected.label
-                : selected;
+        if (_value) {
+            const newValue = _value.label;
+            setInputValue(newValue || "");
         }
-    }, [selected]);
+    }, [_value]);
     // handle scroll item into view
     useEffect(() => {
         var _a, _b;
@@ -434,7 +451,7 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
         if (item) {
             item.scrollIntoView({ block: "nearest" });
         }
-    }, [selected]);
+    }, [_value]);
     // make calls to onSearch callback
     useEffect(() => {
         if (searchable) {
@@ -456,7 +473,7 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
             setDropDownHeight(bottomHeight);
         };
     }, [topHeight, bottomHeight, isOpen]);
-    return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, children: [_jsx(Input, { ref: inputRef, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable, "data-button-right": arrow || clearable, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), clearable && (selected || !!((_h = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _h === void 0 ? void 0 : _h.value)) ? (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
+    return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, children: [_jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable && !allowCustomValue, "data-button-right": arrow || clearable, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), clearable && (_value || !!inputValue) ? (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
                         } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
@@ -476,16 +493,10 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
                                 : "",
                         }, variant: variant, "data-empty": filteredItems.length === 0 }, DropDownProps, { children: [loading && _jsx(Loader, {}), !loading && actionComponent && (_jsx(ActionMenu, { children: actionComponent })), !loading && filteredItems.length === 0 && (_jsx(EmptyComponent, { children: "No Items" })), !loading && (_jsx(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: grouped
                                     ? groups.map((group, index) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
-                                                return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": isObjectArray
-                                                            ? (selected === null || selected === void 0 ? void 0 : selected.value) ===
-                                                                item.value
-                                                            : selected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
+                                                return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (_value === null || _value === void 0 ? void 0 : _value.value) === item.value, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
                                             })] }, group.label)))
                                     : filteredItems.map((item, index) => {
-                                        return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": isObjectArray
-                                                    ? (selected === null || selected === void 0 ? void 0 : selected.value) ===
-                                                        (item === null || item === void 0 ? void 0 : item.value)
-                                                    : selected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
+                                        return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (_value === null || _value === void 0 ? void 0 : _value.value) === item.value, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
                                     }) }))] })) }) }))] }));
 }) `
   position: relative;

package/dist/SelectBox/types.d.ts

@@ -34,9 +34,9 @@ export interface SelectBoxProps {
     OptionTooltip?: (props: {
         data: any;
     }) => JSX.Element | React.ReactNode;
-    onChange?: (value: any, item: any) => void;
+    onChange?: (value: string | null, item: Option | string | null) => void;
     onScroll?: (e: any) => void;
     onSearch?: (value: string) => void;
     searchFn?: (value: string) => void;
-    onItemAdded?: (item: any) => void;
+    onItemAdded?: (item: Option | string) => void;
 }

package/dist/TagBox/TagBox.d.ts

@@ -1,3 +1,3 @@
 import { TagBoxProps } from "./types";
-declare const TagBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TagBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, defaultValue, value, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, openOnFocus, label, description, required, error, loading, sort, renderOption, OptionTooltip, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const TagBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TagBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, defaultValue, value, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, openOnFocus, label, description, required, error, loading, sort, renderOption, OptionTooltip, DropDownProps, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default TagBox;

package/dist/TagBox/TagBox.js

@@ -11,8 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled from "styled-components";
-import { useFloating, flip, offset, autoUpdate } from "@floating-ui/react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useFloating, flip, offset, autoUpdate, FloatingPortal, } from "@floating-ui/react";
+import { useCallback, useEffect, useRef, useState, } from "react";
 import { Input, Tooltip, FieldLabel, Pill, Loader } from "..";
 import { ArrowButton, ClearButton, StyledFloatContainer, StyledContent, } from "../core";
 const StyledInputContainer = styled.div `
@@ -138,6 +138,13 @@ const StyledInputContainer = styled.div `
     border: 1px solid ${(props) => props.theme.palette.primary.main};
   }
 `;
+const StyledInnerItemContainer = styled.div `
+  overflow-y: auto;
+
+  &[data-scroll-active="true"] {
+    padding-right: 5px;
+  }
+`;
 // styled input with forwardRef
 const StyledInput = styled((_a) => {
     var { className, inputRef } = _a, props = __rest(_a, ["className", "inputRef"]);
@@ -234,9 +241,6 @@ const StyledInnerContainer = styled.div `
     padding-right: 30px;
   }
 `;
-const ExtendedStyledContent = styled(StyledContent) `
-  overflow-y: auto;
-`;
 const StyledItem = styled.div `
   line-height: 1;
   color: ${(props) => props.theme.palette.text.primary};
@@ -292,30 +296,85 @@ const EmptyComponent = styled.div `
   font-size: 1 rem;
   color: ${(props) => props.theme.palette.text.secondary};
 `;
-const TagBox = styled(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue = [], value = [], grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, openOnFocus = true, label, description, required = false, error, loading = false, sort = false, renderOption, OptionTooltip, }) => {
+/**
+ *
+ * Attempts to resolve the value to an Option object
+ * if the value is a string, it will attempt to find the corresponding Option object
+ * if the value is an Option object, it will attempt to find the corresponding Option object
+ * if the value is not found, it will return the value as is so that custom values can be displayed without a lookup
+ */
+const resolveValues = (value, data) => {
+    if (value === undefined)
+        return undefined;
+    const resolvedValues = [];
+    for (const item of value) {
+        if (typeof item === "string") {
+            const found = data.find((option) => option.value === item);
+            resolvedValues.push(found || { value: item, label: item });
+        }
+        else if (typeof item === "object") {
+            const found = data.find((option) => option.value === item.value);
+            resolvedValues.push(found || item);
+        }
+    }
+    return resolvedValues;
+};
+const TagBox = styled(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue, value, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, openOnFocus = true, label, description, required = false, error, loading = false, sort = false, renderOption, OptionTooltip, DropDownProps = {}, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const isObjectArray = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.hasOwnProperty("label");
+    const isControlled = value !== undefined;
+    /**
+     * Resolve the options to a consistent format
+     * also remove duplicates
+     */
+    const resolvedOptions = Array.from(new Map(data
+        .map((item) => ({
+        value: isObjectArray ? item.value : item,
+        label: isObjectArray ? item.label : item,
+        group: isObjectArray ? item.group : undefined,
+        data: isObjectArray ? item.data : undefined,
+    }))
+        .map((item) => [item.value, item])).values());
+    /**
+     * Get the correct option if the default value is a string
+     * otherwise, use the default value as is
+     * this allows setting the value with a string or Option object
+     */
+    const resolvedDefaultValue = resolveValues(defaultValue, resolvedOptions);
+    /**
+     * Get the correct option if the value is a string
+     * otherwise, use the value as is
+     * this allows setting the value with a string or Option object
+     */
+    const resolvedValue = resolveValues(value, resolvedOptions);
+    const [valueState, setValueState] = useState(resolvedDefaultValue || []);
+    /**
+     * Get the correct value based on whether the component is controlled or not
+     * if controlled, use the controlled value, otherwise use the resolved value
+     */
+    const _value = (isControlled ? resolvedValue : valueState) || [];
     const [isOpen, setIsOpen] = useState(false);
-    const [selectedItems, setSelectedItems] = useState(defaultValue);
-    const [preSelected, setPreSelected] = useState(null);
+    const [preSelected, setPreSelected] = useState();
     const [customItems, setCustomItems] = useState([]);
     const [searchValue, setSearchValue] = useState("");
+    const [placement, setPlacement] = useState("bottom-start");
+    const [dropDownHeight, setDropDownHeight] = useState(null);
     const inputRef = useRef(null);
+    const containerRef = useRef(null);
     const scrollContainerRef = useRef(null);
-    const filteredItems = data
+    const filteredItems = resolvedOptions
         .concat(customItems) // Add custom items to the list
         .filter((item) => {
-        const isSelected = !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find((selectedItem) => isObjectArray
-            ? selectedItem.value === item.value
-            : selectedItem === item));
+        const isSelected = !!(_value === null || _value === void 0 ? void 0 : _value.find((selectedItem) => selectedItem.value === item.value));
         return !isSelected;
     })
         .filter((item) => {
-        const itemValue = (isObjectArray ? item.label : item);
-        return itemValue.toLowerCase().includes(searchValue.toLowerCase());
+        return item.value.toLowerCase().includes(searchValue.toLowerCase());
     })
         .sort((a, b) => {
         if (grouped) {
+            if (!a.group || !b.group)
+                return 0;
             const aValue = a.group;
             const bValue = b.group;
             return aValue.localeCompare(bValue);
@@ -323,8 +382,8 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
         if (!sort)
             return 0;
         // Secondary sort by label/value to ensure consistent ordering
-        const aLabel = isObjectArray ? a.label : a;
-        const bLabel = isObjectArray ? b.label : b;
+        const aLabel = a.label;
+        const bLabel = b.label;
         return aLabel.localeCompare(bLabel);
     });
     const groupedItems = grouped
@@ -375,17 +434,16 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
         if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)
             inputRef.current.value = "";
         onChange === null || onChange === void 0 ? void 0 : onChange([]);
-        setSelectedItems([]);
+        !isControlled && setValueState([]);
         setSearchValue("");
         searchFn === null || searchFn === void 0 ? void 0 : searchFn("");
         setIsOpen(false);
     };
     const handleChangeSelection = useCallback((option) => {
-        setSelectedItems((prev) => {
-            onChange === null || onChange === void 0 ? void 0 : onChange([...prev, option]);
-            return [...prev, option];
-        });
-    }, [onChange]);
+        const newValue = [..._value, option];
+        !isControlled && setValueState(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    }, [onChange, _value]);
     const handleFocus = () => {
         var _a, _b;
         if (openOnFocus) {
@@ -405,35 +463,26 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
         setSearchValue("");
         handleChangeSelection(item);
     };
-    const handleRemoveItem = (item, index) => {
-        setSelectedItems((prev) => {
-            const newItems = prev.filter((prevItem, idx) => isObjectArray
-                ? prevItem.value !== item.value
-                : idx !== index);
-            onChange === null || onChange === void 0 ? void 0 : onChange(newItems);
-            return newItems;
-        });
+    const handleRemoveItem = (item) => {
+        const newItems = _value.filter((prevItem, idx) => prevItem.value !== item.value);
+        !isControlled && setValueState(newItems);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newItems);
     };
     const handleAddItem = useCallback((newItem) => {
-        const existingItem = data.concat(customItems).find((item) => {
-            return isObjectArray
-                ? item.label.toLowerCase() === newItem.toLowerCase()
-                : item.toLowerCase() === newItem.toLowerCase();
+        const existingItem = resolvedOptions
+            .concat(customItems)
+            .find((item) => {
+            return item.label.toLowerCase() === newItem.toLowerCase();
         });
         if (!existingItem) {
-            const newValue = isObjectArray
-                ? { label: newItem, value: newItem }
-                : newItem;
+            const newValue = { label: newItem, value: newItem }; // Create a new option object
             setCustomItems([...customItems, newValue]);
             handleChangeSelection(newValue);
             onItemAdded === null || onItemAdded === void 0 ? void 0 : onItemAdded(newValue);
         }
         else {
             // check if the item is already selected
-            const isSelected = !!selectedItems.find((selectedItem) => isObjectArray
-                ? selectedItem.value ===
-                    existingItem.value
-                : selectedItem === existingItem);
+            const isSelected = !!_value.find((selectedItem) => selectedItem.value === existingItem.value);
             if (!isSelected) {
                 handleChangeSelection(existingItem);
             }
@@ -441,9 +490,9 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
     }, [
         onItemAdded,
         isObjectArray,
-        data,
+        resolvedOptions,
         handleChangeSelection,
-        selectedItems,
+        _value,
         customItems,
     ]);
     const handleKeyDown = (e) => {
@@ -461,7 +510,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
         if (e.key === "Enter") {
             if (preSelected) {
                 handleItemClick(preSelected);
-                setPreSelected(null);
+                setPreSelected(undefined);
                 setSearchValue("");
                 update();
                 return;
@@ -482,20 +531,16 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
         }
         // Backspace key
         if (e.key === "Backspace" && currentInputValue === "") {
-            setSelectedItems((prev) => {
-                const newItems = prev === null || prev === void 0 ? void 0 : prev.slice(0, prev.length - 1);
-                onChange === null || onChange === void 0 ? void 0 : onChange(newItems);
-                return newItems;
-            });
+            const newItems = _value === null || _value === void 0 ? void 0 : _value.slice(0, _value.length - 1);
+            !isControlled && setValueState(newItems);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newItems);
         }
         // Arrow down
         if (e.key === "ArrowDown") {
             e.preventDefault();
             setPreSelected((prev) => {
                 let newItem = filteredItems[0]; // Loop back to the first item
-                const index = filteredItems.findIndex((item) => isObjectArray
-                    ? item.value === (prev === null || prev === void 0 ? void 0 : prev.value)
-                    : item === prev);
+                const index = filteredItems.findIndex((item) => item.value === (prev === null || prev === void 0 ? void 0 : prev.value));
                 if (index < filteredItems.length - 1) {
                     newItem = filteredItems[index + 1];
                 }
@@ -507,9 +552,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
             e.preventDefault();
             setPreSelected((prev) => {
                 let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
-                const index = filteredItems.findIndex((item) => isObjectArray
-                    ? item.value === (prev === null || prev === void 0 ? void 0 : prev.value)
-                    : item === prev);
+                const index = filteredItems.findIndex((item) => item.value === (prev === null || prev === void 0 ? void 0 : prev.value));
                 if (index > 0) {
                     newItem = filteredItems[index - 1];
                 }
@@ -521,6 +564,14 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
             setIsOpen(false);
         }
     };
+    // handle scroll item into view
+    useEffect(() => {
+        var _a, _b;
+        const item = (_b = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector) === null || _b === void 0 ? void 0 : _b.call(_a, ".mfFloatingItem[data-highlighted=true]");
+        if (item) {
+            item.scrollIntoView({ block: "nearest" });
+        }
+    }, [preSelected]);
     // Close on outside click
     useEffect(() => {
         const close = (e) => {
@@ -542,7 +593,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
     // update when selection changes
     useEffect(() => {
         update();
-    }, [selectedItems]);
+    }, [_value]);
     const referenceEl = (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current;
     const contentWidth = ((_e = (_d = (_c = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getClientRects) === null || _c === void 0 ? void 0 : _c.call(referenceEl)) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.width) || "100%";
     const scrollEl = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
@@ -552,9 +603,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
     return (_jsxs("div", { className: className + " mfTagBox", children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { className: "styledInputContainer", ref: refs.setReference, onMouseDown: () => {
                     setIsOpen(true);
                     handleFocus();
-                }, onFocus: handleFocus, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, children: [_jsx(StyledInnerContainer, { size: size, "data-button-right": arrow || clearable, children: _jsxs(PillContainer, { size: size, children: [selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => (_jsx(Pill, { size: "xs", onRemove: () => handleRemoveItem(item, index), children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index))), (searchable ||
-                                    allowCustomValue ||
-                                    (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0) && (_jsx(StyledInput, { inputRef: inputRef, onChange: (e) => {
+                }, onFocus: handleFocus, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, tabIndex: 0, children: [_jsx(StyledInnerContainer, { size: size, "data-button-right": arrow || clearable, children: _jsxs(PillContainer, { size: size, children: [_value === null || _value === void 0 ? void 0 : _value.map((item, index) => (_jsx(Pill, { size: "xs", onRemove: () => handleRemoveItem(item), children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index))), (searchable || allowCustomValue || (_value === null || _value === void 0 ? void 0 : _value.length) === 0) && (_jsx(StyledInput, { inputRef: inputRef, onChange: (e) => {
                                         if (searchFn !== undefined) {
                                             searchFn === null || searchFn === void 0 ? void 0 : searchFn(e.target.value);
                                         }
@@ -563,7 +612,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
                                         }
                                         update();
                                     }, placeholder: placeholder, size: size, readOnly: !(searchable || allowCustomValue) }))] }) }), clearable &&
-                        (((_f = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) !== null && _f !== void 0 ? _f : 0) > 0 || !!((_g = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _g === void 0 ? void 0 : _g.value)) ? (_jsx(ClearButton, { onClick: handleClear, onMouseDown: (e) => {
+                        (((_f = _value === null || _value === void 0 ? void 0 : _value.length) !== null && _f !== void 0 ? _f : 0) > 0 || !!((_g = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _g === void 0 ? void 0 : _g.value)) ? (_jsx(ClearButton, { onClick: handleClear, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
                         } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
@@ -572,27 +621,32 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
                             e.preventDefault();
                             e.stopPropagation();
                             toggleOpen();
-                        } })) : null] }), isOpen && (_jsx(StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, className: "mfFloating", children: _jsxs(ExtendedStyledContent, { className: "mfFloatingContent", style: { width: contentWidth, maxWidth: contentWidth }, variant: variant, onScroll: onScroll, "data-scroll-active": scrollActive, "data-empty": filteredItems.length === 0, children: [loading && _jsx(Loader, {}), !loading && filteredItems.length === 0 && (_jsx(EmptyComponent, { children: "No Items" })), !loading && grouped
-                            ? groups.map((group) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
+                        } })) : null] }), isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, { ref: (ref) => {
+                        containerRef.current = ref;
+                        refs.setFloating(ref);
+                    }, style: floatingStyles, className: "mfFloating", children: _jsxs(StyledContent, Object.assign({ className: "mfFloatingContent", style: {
+                            width: contentWidth,
+                            maxWidth: contentWidth,
+                            maxHeight: DropDownProps.autoHeight
+                                ? (dropDownHeight || 250) - 10
+                                : "",
+                        }, variant: variant, "data-empty": filteredItems.length === 0 }, DropDownProps, { children: [loading && _jsx(Loader, {}), !loading && filteredItems.length === 0 && (_jsx(EmptyComponent, { children: "No Items" })), !loading && (_jsx(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: grouped
+                                    ? groups.map((group) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
+                                                return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
+                                                            e.preventDefault();
+                                                            e.stopPropagation();
+                                                            handleItemClick(item);
+                                                        }, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) === item.value, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: typeof item === "string"
+                                                                ? item
+                                                                : item === null || item === void 0 ? void 0 : item.label })) }, index) }, index));
+                                            })] }, group.label)))
+                                    : filteredItems.map((item, index) => {
                                         return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
                                                     e.preventDefault();
                                                     e.stopPropagation();
                                                     handleItemClick(item);
-                                                }, "data-highlighted": isObjectArray
-                                                    ? (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) ===
-                                                        item.value
-                                                    : preSelected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
-                                    })] }, group.label)))
-                            : filteredItems.map((item, index) => {
-                                return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
-                                            e.preventDefault();
-                                            e.stopPropagation();
-                                            handleItemClick(item);
-                                        }, "data-highlighted": isObjectArray
-                                            ? (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) ===
-                                                item.value
-                                            : preSelected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
-                            })] }) }))] }));
+                                                }, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) === item.value, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
+                                    }) }))] })) }) }))] }));
 }) `
   position: relative;
   cursor: pointer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.2.41",
+  "version": "1.2.44",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -50,7 +50,7 @@
     "@uiw/codemirror-theme-vscode": "^4.23.6",
     "@uiw/react-codemirror": "^4.23.6",
     "deepmerge": "^4.3.1",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.469.0",
     "moment": "^2.29.1",
     "overlayscrollbars": "^2.6.0",
     "overlayscrollbars-react": "^0.5.6",