@monolith-forensics/monolith-ui 1.1.56 → 1.1.58

package/dist/DateInput/DateInput.js

@@ -1,6 +1,15 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import moment from "moment";
-import { useFloating, flip, offset, FloatingPortal, useDismiss, useInteractions, autoUpdate } from "@floating-ui/react";
+import { useFloating, flip, offset, FloatingPortal, useDismiss, useInteractions, autoUpdate, } from "@floating-ui/react";
 import { useEffect, useMemo, useRef, useState, } from "react";
 import styled from "styled-components";
 import { FieldLabel, Calendar } from "..";
@@ -246,9 +255,7 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
         whileElementsMounted: autoUpdate,
     });
     const dismiss = useDismiss(context);
-    const { getReferenceProps } = useInteractions([
-        dismiss,
-    ]);
+    const { getReferenceProps } = useInteractions([dismiss]);
     const segments = useMemo(() => parseTimestamp(moment(value).toISOString(), format, utc), [value, format, utc]);
     const checkValidRange = (value) => {
         if (min && moment(value).isBefore(min))
@@ -319,6 +326,7 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
                 const next = segments[prev.index + 2];
                 return next || prev;
             });
+            typedKeys.current = ""; // clear typed keys when moving to next segment
         }
         // Left Arrow
         if (e.key === "ArrowLeft") {
@@ -329,6 +337,7 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
                 const next = segments[prev.index - 2];
                 return next || prev;
             });
+            typedKeys.current = ""; // clear typed keys when moving to next segment
         }
         // Up Arrow
         if (e.key === "ArrowUp") {
@@ -368,7 +377,7 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
         }
         // handle paste
         if (e.key === "v" && (e.metaKey || e.ctrlKey)) {
-            return;
+            handlePaste();
         }
         // only allow numbers
         if (e.key.match(/[0-9]/)) {
@@ -383,7 +392,8 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
             setValue((prev) => {
                 if (!(selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.momentType))
                     return prev;
-                const newValue = moment(prev)
+                const momentValue = utc ? moment.utc(prev) : moment(prev);
+                const newValue = moment(momentValue)
                     .set(selectedSegment.momentType, parseInt(tempValue, 10) -
                     (selectedSegment.type === "month" ? 1 : 0))
                     .toISOString();
@@ -397,36 +407,87 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
                 typedKeys.current = "";
             }
         }
-        e.preventDefault();
     };
     const handleWheelEvent = (e) => {
         if (!selectedSegment)
             return;
-        setValue((prev) => {
-            if (selectedSegment.type === "separator")
-                return prev;
-            if (!prev)
-                return isDateOnly ? moment().format(format) : moment().toISOString();
-            let newValue = e.deltaY > 0 ? moment(prev).subtract(1, selectedSegment.type).toISOString() : moment(prev).add(1, selectedSegment.type).toISOString();
-            if (!checkValidRange(newValue))
-                return prev;
-            newValue = isDateOnly ? moment(newValue).format(format) : newValue;
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-            return newValue;
-        });
+        if (e.deltaY > 0) {
+            setValue((prev) => {
+                if (selectedSegment.type === "separator")
+                    return prev;
+                const newValue = prev
+                    ? moment(prev).subtract(1, selectedSegment.type).toISOString()
+                    : moment().toISOString();
+                if (!checkValidRange(newValue))
+                    return prev;
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                return newValue;
+            });
+        }
+        else {
+            setValue((prev) => {
+                if (selectedSegment.type === "separator")
+                    return prev;
+                const newValue = prev
+                    ? moment(prev).add(1, selectedSegment.type).toISOString()
+                    : moment().toISOString();
+                if (!checkValidRange(newValue))
+                    return prev;
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                return newValue;
+            });
+        }
     };
-    const handlePaste = (e) => {
-        var _a, _b;
-        e.preventDefault();
-        const pastedText = (_b = (_a = e === null || e === void 0 ? void 0 : e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData) === null || _b === void 0 ? void 0 : _b.call(_a, "text");
+    const handlePaste = (e) => __awaiter(void 0, void 0, void 0, function* () {
+        const pastedText = yield window.navigator.clipboard.readText();
         if (!pastedText)
+            return; // do nothing if clipboard is empty
+        // check for unix timestamp in seconds
+        if (pastedText.match(/^\d{10}$/)) {
+            const parsedTimestamp = moment
+                .unix(parseInt(pastedText, 10))
+                .toISOString();
+            setValue(parsedTimestamp);
+            return;
+        }
+        // check for unix timestamp in seconds with fractional seconds
+        if (pastedText.match(/^\d{10}\.\d{1,6}$/)) {
+            const parsedTimestamp = moment
+                .unix(parseFloat(pastedText))
+                .toISOString();
+            setValue(parsedTimestamp);
             return;
-        // check if pasted text is a valid timestamp
+        }
+        // check for unix timestamp in milliseconds
+        if (pastedText.match(/^\d{13}$/)) {
+            const parsedTimestamp = moment
+                .unix(parseInt(pastedText, 10) / 1000)
+                .toISOString();
+            setValue(parsedTimestamp);
+            return;
+        }
+        // check for windows ldap or filetime timestamp
+        if (pastedText.match(/^\d{18}$/)) {
+            const parsedTimestamp = moment
+                .unix((parseInt(pastedText, 10) - 116444736000000000) / 10000000)
+                .toISOString();
+            setValue(parsedTimestamp);
+            return;
+        }
+        // check for YMD ldap timestamp in format YYYYMMDDHHMMSSZ
+        if (pastedText.match(/^\d{14}Z$/)) {
+            const parsedTimestamp = moment
+                .utc(pastedText, "YYYYMMDDHHmmssZ")
+                .toISOString();
+            setValue(parsedTimestamp);
+            return;
+        }
+        // check if pasted text is any other valid timestamp
         if (!moment(pastedText).isValid())
             return;
         const parsedTimestamp = moment.utc(pastedText).toISOString();
         setValue(parsedTimestamp);
-    };
+    });
     // Close on outside click
     useEffect(() => {
         const close = (e) => {
@@ -458,7 +519,7 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
     return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: (ref) => {
                     mainRef.current = ref;
                     refs.setReference(ref);
-                }, onClick: handleContainerClick, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onPaste: handlePaste, onFocus: (e) => {
+                }, onClick: handleContainerClick, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onFocus: (e) => {
                     e.preventDefault();
                     setSelectedSegment(segments[0]);
                 }, onBlur: () => {
@@ -471,7 +532,7 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
                                 }, onFocus: (e) => e.preventDefault(), onPointerDown: (e) => e.preventDefault(), "data-type": "separator", "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, children: segment.text }, i));
                         }
                         return (_jsx(InputSegment, { className: "input", tabIndex: i === 0 ? 0 : -1, onClick: (e) => handleSegmentClick(e, segment), "data-type": "input", size: size, "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, "data-selected": (selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.index) === segment.index, children: value ? segment.text : segment.placeholder }, i));
-                    }), utc && _jsx("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && value ? (_jsx(ClearButton, { onClick: handleClear })) : arrow ? (_jsx(ArrowButton, {})) : null] }), enableCalendar && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, style: floatingStyles }, getReferenceProps(), { children: _jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsx("div", { children: _jsx(Calendar, { defaultValue: value ? moment(value).toDate() : undefined, clearable: false, min: min, max: max, onChange: (date) => {
+                    }), utc && _jsx("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && value ? (_jsx(ClearButton, { onClick: handleClear })) : arrow ? (_jsx(ArrowButton, {})) : null] }), enableCalendar && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, style: floatingStyles }, getReferenceProps(), { children: _jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsx("div", { children: _jsx(Calendar, { value: value ? moment(value).toDate() : undefined, clearable: false, min: min, max: max, onChange: (date) => {
                                     setValue((prev) => {
                                         // make copy of prev variable
                                         const oldValue = moment(prev).toISOString();

package/dist/SelectBox/SelectBox.d.ts

@@ -1,17 +1,9 @@
 import { ReactNode } from "react";
 import { Size, Variant } from "../core";
-export declare const StyledInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    width?: string | number | null;
-}>> & string;
-type Option = {
-    label: string;
-    value: any;
-    group?: string;
-    data?: any;
-};
 interface SelectBoxProps {
     className?: string;
     defaultValue?: Option | string;
+    value?: Option | string;
     data?: Option[] | string[];
     placeholder?: string;
     arrow?: boolean;
@@ -41,5 +33,14 @@ interface SelectBoxProps {
     }>;
     DropDownProps?: any;
 }
-declare const SelectBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<SelectBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, onChange, onSearch, searchFn, onScroll, loading, defaultValue, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, label, description, required, error, openOnFocus, renderOption, actionComponent, focused, grouped, TooltipContent, DropDownProps, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+type Option = {
+    label: string;
+    value: any;
+    group?: string;
+    data?: any;
+};
+export declare const StyledInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    width?: string | number | null;
+}>> & string;
+declare const SelectBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<SelectBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, label, description, required, error, openOnFocus, renderOption, actionComponent, focused, grouped, TooltipContent, DropDownProps, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default SelectBox;

package/dist/SelectBox/SelectBox.js

@@ -15,6 +15,7 @@ import { useFloating, flip, offset, FloatingPortal, autoUpdate, } from "@floatin
 import { useCallback, useEffect, useRef, useState, } from "react";
 import { Input, FieldLabel, Tooltip } from "..";
 import { useDebouncedCallback } from "use-debounce";
+import { useUncontrolled } from "@mantine/hooks";
 import { StyledContent, StyledFloatContainer, ArrowButton, ClearButton, } from "../core";
 export const StyledInputContainer = styled.div `
   font-family: ${({ theme }) => theme.typography.fontFamily};
@@ -150,11 +151,15 @@ const StyledItem = styled.div `
     color: ${(props) => props.theme.palette.text.primary};
   }
 `;
-const SelectBox = styled(({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, label, description, required = false, error, openOnFocus = true, renderOption, actionComponent, focused, grouped, TooltipContent, DropDownProps = {}, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+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, TooltipContent, DropDownProps = {}, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
+    const [_value, handleChange] = useUncontrolled({
+        value,
+        defaultValue,
+        onChange,
+    });
     const [isOpen, setIsOpen] = useState(false);
-    const [selected, setSelected] = useState(null);
     const [searchValue, setSearchValue] = useState("");
     const [customItems, setCustomItems] = useState([]);
     const [placement, setPlacement] = useState("bottom-start");
@@ -162,8 +167,11 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const scrollContainerRef = useRef(null);
-    const filteredItems = data
-        .concat(customItems) // Add custom items to the list
+    const uniqueItems = Array.from(new Map([...data, ...customItems].map((item) => [
+        isObjectArray ? item.value : item,
+        item,
+    ])).values());
+    const filteredItems = uniqueItems
         .filter((item) => {
         const itemValue = (isObjectArray ? item.label : item);
         return itemValue === null || itemValue === void 0 ? void 0 : itemValue.toLowerCase().includes(searchValue.toLowerCase());
@@ -174,8 +182,10 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
             const bValue = b.group;
             return aValue.localeCompare(bValue);
         }
-        // return current sort order
-        return 0;
+        // Secondary sort by label/value to ensure consistent ordering
+        const aLabel = isObjectArray ? a.label : a;
+        const bLabel = isObjectArray ? b.label : b;
+        return aLabel.localeCompare(bLabel);
     });
     const groupedItems = grouped
         ? filteredItems.reduce((acc, item) => {
@@ -220,11 +230,9 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
     };
     const handleClear = (e) => {
         e.preventDefault();
-        if (inputRef.current)
-            inputRef.current.value = "";
+        e.stopPropagation();
         setIsOpen(false);
-        handleChangeSelection(null);
-        setSelected(null);
+        handleChange(undefined);
         setSearchValue("");
         searchFn === null || searchFn === void 0 ? void 0 : searchFn("");
         update();
@@ -232,13 +240,9 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
     const handleItemClick = (event, item) => {
         event.preventDefault();
         event.stopPropagation();
-        handleChangeSelection(item);
+        handleChange(item);
         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);
-    }, [onChange]);
     const handleAddItem = useCallback((newItem) => {
         const isNewItem = data.every((item) => item.label.toLowerCase() !==
             newItem.toLowerCase());
@@ -250,7 +254,7 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
                 prev.push(newValue);
                 return prev;
             });
-            handleChangeSelection(newValue);
+            handleChange(newValue);
             onItemAdded === null || onItemAdded === void 0 ? void 0 : onItemAdded(newValue);
         }
         else {
@@ -259,9 +263,9 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
                     ? item.label.toLowerCase() === newItem.toLowerCase()
                     : item.toLowerCase() === newItem.toLowerCase();
             });
-            handleChangeSelection(item);
+            handleChange(item);
         }
-    }, [onItemAdded, isObjectArray, data, handleChangeSelection]);
+    }, [onItemAdded, isObjectArray, data, handleChange]);
     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;
@@ -284,37 +288,30 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
                 // TODO: decide what to do when user presses enter after typing a search value
             }
             toggleOpen();
-            // setIsOpen(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) => isObjectArray
+                ? item.value === (_value === null || _value === void 0 ? void 0 : _value.value)
+                : item === _value);
+            if (index < filteredItems.length - 1) {
+                newItem = filteredItems[index + 1];
+            }
+            handleChange === null || handleChange === void 0 ? void 0 : handleChange(newItem, newItem);
         }
         // 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) => isObjectArray
+                ? item.value === (_value === null || _value === void 0 ? void 0 : _value.value)
+                : item === _value);
+            if (index > 0) {
+                newItem = filteredItems[index - 1];
+            }
+            handleChange === null || handleChange === void 0 ? void 0 : handleChange(newItem, newItem);
         }
         // Tab key
         if (e.key === "Tab") {
@@ -322,7 +319,7 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
                 handleAddItem(currentInputValue);
                 setSearchValue("");
             }
-            else if (!selected) {
+            else if (!_value) {
                 // clear input
                 if (inputRef.current) {
                     inputRef.current.value = "";
@@ -352,6 +349,13 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
             setIsOpen(true);
         }
     };
+    const handleBlur = () => {
+        var _a;
+        if (allowCustomValue && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
+            handleAddItem(inputRef.current.value);
+            setSearchValue("");
+        }
+    };
     // Close on outside click
     useEffect(() => {
         const close = (e) => {
@@ -370,31 +374,6 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
         document.addEventListener("click", close);
         return () => document.removeEventListener("click", close);
     }, [refs.floating, refs.reference]);
-    // 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) {
-            if (!selected) {
-                inputRef.current.value = "";
-            }
-            else {
-                inputRef.current.value = isObjectArray
-                    ? selected.label
-                    : selected;
-            }
-        }
-    }, [selected]);
     // handle scroll item into view
     useEffect(() => {
         var _a, _b;
@@ -402,7 +381,7 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
         if (item) {
             item.scrollIntoView({ block: "nearest" });
         }
-    }, [selected]);
+    }, [_value]);
     // make calls to onSearch callback
     useEffect(() => {
         if (searchable) {
@@ -435,7 +414,7 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
             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: debouncedHandleOnChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable, "data-button-right": arrow || clearable }), 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: isObjectArray ? (_value === null || _value === void 0 ? void 0 : _value.label) || "" : _value || "", onChange: debouncedHandleOnChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable, "data-button-right": arrow || clearable }), clearable && _value ? (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
                         } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
@@ -457,15 +436,14 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
                         }, variant: variant, "data-empty": filteredItems.length === 0 }, DropDownProps, { children: [actionComponent && _jsx(ActionMenu, { children: actionComponent }), _jsxs(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: [loading && _jsx("div", { children: "Loading..." }), !loading && grouped
                                         ? groups.map((group, index) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
                                                     return (_jsx(Tooltip, { content: TooltipContent ? (_jsx(TooltipContent, { 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));
+                                                                ? (_value === null || _value === void 0 ? void 0 : _value.value) === item.value
+                                                                : _value === 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: TooltipContent ? (_jsx(TooltipContent, { 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) ===
+                                                        ? (_value === null || _value === void 0 ? void 0 : _value.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));
+                                                        : _value === 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));
                                         })] })] })) }) }))] }));
 }) `
   position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.1.56",
+  "version": "1.1.58",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.16",
+    "@mantine/hooks": "^7.13.0",
     "@radix-ui/react-switch": "^1.0.7",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tabler/icons-react": "^3.11.0",