@monolith-forensics/monolith-ui 1.1.60 → 1.1.64

package/dist/Calendar/CalendarStyles.js

@@ -51,7 +51,7 @@ export const CalendarDate = styled(CalendarCell) `
   grid-row: ${({ index }) => Math.floor((index || 0) / 7) + 2} / span 1;
   transition: all 0.2s ease-out;
   border-radius: 5px;
-  :hover {
+  &:hover {
     background: ${({ theme }) => theme.palette.action.hover};
   }
 

package/dist/DateInput/DateInput.d.ts

@@ -1,9 +1,10 @@
+import moment from "moment";
 import React from "react";
 import { Size, Variant } from "../core";
 interface DateInputProps {
     className?: string;
     defaultValue?: string | null | undefined;
-    format?: string;
+    format?: FormatOptions;
     label?: string;
     description?: string;
     arrow?: boolean;
@@ -20,5 +21,17 @@ interface DateInputProps {
     utc?: boolean;
     closeOnSelect?: boolean;
 }
+type DateFormatOptions = "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY-MM-DD";
+type TimeFormatOptions = "HH:mm:ss" | "h:mm:ss A" | "HH:mm:ss.SSS";
+type FormatOptions = DateFormatOptions | `${DateFormatOptions} ${TimeFormatOptions}`;
+export type Segment = {
+    value: string;
+    text: string;
+    placeholder: string;
+    type: moment.unitOfTime.DurationConstructor | "separator";
+    index: number;
+    momentType?: moment.unitOfTime.All | moment.unitOfTime.DurationConstructor;
+    pattern?: string;
+};
 declare const DateInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<DateInputProps, never>> & string & Omit<({ className, defaultValue, format, label, description, arrow, size, variant, clearable, required, onChange, min, max, error, enableCalendar, utc, closeOnSelect, }: DateInputProps) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
 export default DateInput;

package/dist/DateInput/DateInput.js

@@ -14,6 +14,7 @@ import { useEffect, useMemo, useRef, useState, } from "react";
 import styled from "styled-components";
 import { FieldLabel, Calendar } from "..";
 import { StyledContent, StyledFloatContainer, ArrowButton, ClearButton, } from "../core";
+import parseTimestamp from "../Utilities/parseTimestamp";
 const StyledInputContainer = styled.div `
   position: relative;
 
@@ -172,71 +173,6 @@ const InputSegment = styled.div `
                     : "10px"};
   }
 `;
-function parseTimestamp(timestamp, format, utc = false) {
-    // Define patterns to identify datetime components and their placeholders
-    const patterns = [
-        { pattern: "YYYY", placeholder: "YYYY", type: "year", momentType: "year" },
-        { pattern: "MM", placeholder: "MM", type: "month", momentType: "month" },
-        { pattern: "DD", placeholder: "DD", type: "day", momentType: "date" },
-        { pattern: "HH", placeholder: "HH", type: "hour", momentType: "hour" },
-        { pattern: "h", placeholder: "h", type: "hour", momentType: "hour" },
-        { pattern: "mm", placeholder: "mm", type: "minute", momentType: "minute" },
-        { pattern: "ss", placeholder: "ss", type: "second", momentType: "second" },
-        {
-            pattern: "SSS",
-            placeholder: "SSS",
-            type: "millisecond",
-            momentType: "millisecond",
-        },
-        {
-            pattern: "A",
-            placeholder: "AM/PM",
-            type: "meridiem",
-            momentType: "meridiem",
-        },
-        {
-            pattern: "Z",
-            placeholder: "Z",
-            type: "timezone",
-            momentType: "timezone",
-        },
-    ];
-    // Helper function to split format into datetime components and separators
-    function splitFormat(format) {
-        return format.split(/(YYYY|MM|DD|HH|h|mm|ss|SSS|Z)/).filter((s) => s);
-    }
-    // Helper function to match segments to their placeholders and types
-    function matchSegment(segment) {
-        const pattern = patterns.find((p) => p.pattern === segment);
-        return pattern
-            ? pattern
-            : {
-                pattern: segment,
-                placeholder: segment,
-                type: "separator",
-                value: "",
-                text: "",
-                index: -1,
-            };
-    }
-    const segments = splitFormat(format).map((segment, i) => {
-        const { pattern, placeholder, type, momentType } = matchSegment(segment);
-        const value = timestamp
-            ? utc === true
-                ? moment.utc(timestamp).format(pattern)
-                : moment(timestamp).format(pattern)
-            : placeholder;
-        return {
-            value,
-            text: value,
-            placeholder,
-            type,
-            momentType,
-            index: i,
-        };
-    });
-    return segments;
-}
 const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:ss", label, description, arrow = true, size = "sm", variant = "outlined", clearable = false, required = false, onChange = () => { }, min, max, error, enableCalendar = false, utc = false, closeOnSelect = true, }) => {
     const [value, setValue] = useState(defaultValue);
     const [selectedSegment, setSelectedSegment] = useState();
@@ -411,32 +347,20 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
     const handleWheelEvent = (e) => {
         if (!selectedSegment)
             return;
-        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;
-            });
-        }
+        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;
+        });
     };
     const handlePaste = (e) => __awaiter(void 0, void 0, void 0, function* () {
         const pastedText = yield window.navigator.clipboard.readText();

package/dist/SelectBox/SelectBox.d.ts

@@ -1,6 +1,6 @@
-import { SelectBoxProps } from "./types";
+import { SelectBoxProps } from "..";
 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>>;
+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, OptionTooltip, DropDownProps, debounceTime, sort, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default SelectBox;

package/dist/SelectBox/SelectBox.js

@@ -15,7 +15,6 @@ 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};
@@ -136,6 +135,7 @@ const StyledItem = styled.div `
                     ? "6px 16px"
                     : "2px 8px"};
 
+  // Mantine-Dev syntax, styles if the item is disabled
   &[data-disabled] {
     color: ${(props) => props.theme.palette.text.secondary};
     pointer-events: "none";
@@ -146,20 +146,19 @@ const StyledItem = styled.div `
     color: ${(props) => props.theme.palette.text.primary};
   }
 
+  // Custom prop, checks if item is selected and returns true
   &[data-selected="true"] {
     background-color: ${(props) => props.theme.palette.divider};
     color: ${(props) => props.theme.palette.text.primary};
   }
 `;
-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 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, OptionTooltip, // Custom tooltip component for search menu items
+DropDownProps = {}, debounceTime = 300, sort = false, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     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 [inputValue, setInputValue] = useState("");
     const [isOpen, setIsOpen] = useState(false);
+    const [selected, setSelected] = useState(null);
     const [searchValue, setSearchValue] = useState("");
     const [customItems, setCustomItems] = useState([]);
     const [placement, setPlacement] = useState("bottom-start");
@@ -167,10 +166,12 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
     const inputRef = useRef(null);
     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());
+    // search filter for dropdown items
     const filteredItems = uniqueItems
         .filter((item) => {
         const itemValue = (isObjectArray ? item.label : item);
@@ -182,6 +183,8 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
             const bValue = b.group;
             return aValue.localeCompare(bValue);
         }
+        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;
@@ -228,11 +231,40 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
             return !prev;
         });
     };
+    const handleInputChange = (e) => {
+        const value = e.target.value;
+        setInputValue(value);
+        setIsOpen(true);
+    };
+    const debouncedHandleChange = useDebouncedCallback((value) => {
+        if (searchFn) {
+            searchFn(value);
+        }
+        else {
+            setSearchValue(value);
+        }
+        if (allowCustomValue && value) {
+            const existingItem = data.find((item) => isObjectArray
+                ? item.label.toLowerCase() === value.toLowerCase()
+                : item.toLowerCase() === value.toLowerCase());
+            if (existingItem)
+                handleChangeSelection(existingItem);
+        }
+        update();
+    }, debounceTime);
+    const handleBlur = () => {
+        var _a, _b;
+        if (((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) && allowCustomValue) {
+            handleAddItem((_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.value);
+        }
+    };
     const handleClear = (e) => {
         e.preventDefault();
-        e.stopPropagation();
+        if (inputRef.current)
+            inputRef.current.value = "";
         setIsOpen(false);
-        handleChange(undefined);
+        handleChangeSelection(null);
+        setSelected(null);
         setSearchValue("");
         searchFn === null || searchFn === void 0 ? void 0 : searchFn("");
         update();
@@ -240,32 +272,21 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
     const handleItemClick = (event, item) => {
         event.preventDefault();
         event.stopPropagation();
-        handleChange(item);
+        handleChangeSelection(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());
-        if (isNewItem) {
-            const newValue = isObjectArray
-                ? { label: newItem, value: newItem }
-                : newItem;
-            setCustomItems((prev) => {
-                prev.push(newValue);
-                return prev;
-            });
-            handleChange(newValue);
-            onItemAdded === null || onItemAdded === void 0 ? void 0 : onItemAdded(newValue);
-        }
-        else {
-            const item = data.find((item) => {
-                return isObjectArray
-                    ? item.label.toLowerCase() === newItem.toLowerCase()
-                    : item.toLowerCase() === newItem.toLowerCase();
-            });
-            handleChange(item);
-        }
-    }, [onItemAdded, isObjectArray, data, handleChange]);
+        const newValue = isObjectArray
+            ? { label: newItem, value: newItem }
+            : 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;
@@ -292,26 +313,32 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
         // Arrow down
         if (e.key === "ArrowDown") {
             e.preventDefault();
-            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);
+            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;
+            });
         }
         // Arrow up
         if (e.key === "ArrowUp") {
             e.preventDefault();
-            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);
+            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;
+            });
         }
         // Tab key
         if (e.key === "Tab") {
@@ -319,7 +346,7 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
                 handleAddItem(currentInputValue);
                 setSearchValue("");
             }
-            else if (!_value) {
+            else if (!selected) {
                 // clear input
                 if (inputRef.current) {
                     inputRef.current.value = "";
@@ -329,33 +356,22 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
             setIsOpen(false);
         }
     };
-    const handleOnChange = (e) => {
-        // Simulate clear event when the input is changed to an empty string
-        if (e.target.value === "") {
-            handleClear(e);
-            return;
-        }
-        if (searchFn !== undefined) {
-            searchFn === null || searchFn === void 0 ? void 0 : searchFn(e.target.value);
-        }
-        else {
-            setSearchValue(e.target.value);
-            update();
-        }
-    };
-    const debouncedHandleOnChange = useDebouncedCallback(handleOnChange, 300);
     const handleFocus = () => {
         if (openOnFocus) {
             setIsOpen(true);
         }
     };
-    const handleBlur = () => {
-        var _a;
-        if (allowCustomValue && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
-            handleAddItem(inputRef.current.value);
-            setSearchValue("");
-        }
-    };
+    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;
+    const scrollActive = scrollEl
+        ? (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.scrollHeight) > (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.clientHeight)
+        : false;
+    // get height between bottom of the floating container and the bottom of the viewport
+    const bottomHeight = window.innerHeight - ((_f = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getBoundingClientRect()) === null || _f === void 0 ? void 0 : _f.bottom) - 10;
+    // get height between top of the floating container and the top of the viewport
+    const topHeight = (((_g = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.top) -
+        10);
     // Close on outside click
     useEffect(() => {
         const close = (e) => {
@@ -374,6 +390,31 @@ 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;
@@ -381,7 +422,7 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
         if (item) {
             item.scrollIntoView({ block: "nearest" });
         }
-    }, [_value]);
+    }, [selected]);
     // make calls to onSearch callback
     useEffect(() => {
         if (searchable) {
@@ -389,17 +430,6 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
             onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchValue);
         }
     }, [searchValue]);
-    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;
-    const scrollActive = scrollEl
-        ? (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.scrollHeight) > (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.clientHeight)
-        : false;
-    // get height between bottom of the floating container and the bottom of the viewport
-    const bottomHeight = window.innerHeight - ((_f = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getBoundingClientRect()) === null || _f === void 0 ? void 0 : _f.bottom) - 10;
-    // get height between top of the floating container and the top of the viewport
-    const topHeight = (((_g = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.top) -
-        10);
     useEffect(() => {
         if (bottomHeight < 250) {
             setPlacement("top-start");
@@ -414,12 +444,14 @@ 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, 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) => {
+    useEffect(() => {
+        debouncedHandleChange(inputValue);
+    }, [inputValue, debouncedHandleChange]);
+    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, onBlur: handleBlur }), 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) => {
                             e.preventDefault();
                             e.stopPropagation();
                         } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
                             e.preventDefault();
-                            // e.stopPropagation();
                         }, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -435,15 +467,16 @@ 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
-                                                                ? (_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));
+                                                    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));
                                                 })] }, 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
-                                                        ? (_value === null || _value === void 0 ? void 0 : _value.value) ===
+                                            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)
-                                                        : _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));
+                                                        : 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));
                                         })] })] })) }) }))] }));
 }) `
   position: relative;

package/dist/SelectBox/types.d.ts

@@ -8,7 +8,6 @@ export type Option = {
 export interface SelectBoxProps {
     className?: string;
     defaultValue?: Option | string;
-    value?: Option | string;
     data?: Option[] | string[];
     placeholder?: string;
     arrow?: boolean;
@@ -33,8 +32,10 @@ export interface SelectBoxProps {
     actionComponent?: JSX.Element;
     focused?: boolean;
     grouped?: boolean;
-    TooltipContent?: React.FC<{
+    OptionTooltip?: React.FC<{
         data: any;
     }>;
     DropDownProps?: any;
+    debounceTime?: number;
+    sort?: boolean;
 }

package/dist/Utilities/parseTimestamp.d.ts

@@ -0,0 +1,2 @@
+import { Segment } from "../DateInput/DateInput";
+export default function parseTimestamp(timestamp: string, format: string, utc?: boolean): Segment[];

package/dist/Utilities/parseTimestamp.js

@@ -0,0 +1,66 @@
+import moment from "moment";
+export default function parseTimestamp(timestamp, format, utc = false) {
+    // Define patterns to identify datetime components and their placeholders
+    const patterns = [
+        { pattern: "YYYY", placeholder: "YYYY", type: "year", momentType: "year" },
+        { pattern: "MM", placeholder: "MM", type: "month", momentType: "month" },
+        { pattern: "DD", placeholder: "DD", type: "day", momentType: "date" },
+        { pattern: "HH", placeholder: "HH", type: "hour", momentType: "hour" },
+        { pattern: "h", placeholder: "h", type: "hour", momentType: "hour" },
+        { pattern: "mm", placeholder: "mm", type: "minute", momentType: "minute" },
+        { pattern: "ss", placeholder: "ss", type: "second", momentType: "second" },
+        {
+            pattern: "SSS",
+            placeholder: "SSS",
+            type: "millisecond",
+            momentType: "millisecond",
+        },
+        {
+            pattern: "A",
+            placeholder: "AM/PM",
+            type: "meridiem",
+            momentType: "meridiem",
+        },
+        {
+            pattern: "Z",
+            placeholder: "Z",
+            type: "timezone",
+            momentType: "timezone",
+        },
+    ];
+    // Helper function to split format into datetime components and separators
+    function splitFormat(format) {
+        return format.split(/(YYYY|MM|DD|HH|h|mm|ss|SSS|Z)/).filter((s) => s);
+    }
+    // Helper function to match segments to their placeholders and types
+    function matchSegment(segment) {
+        const pattern = patterns.find((p) => p.pattern === segment);
+        return pattern
+            ? pattern
+            : {
+                pattern: segment,
+                placeholder: segment,
+                type: "separator",
+                value: "",
+                text: "",
+                index: -1,
+            };
+    }
+    const segments = splitFormat(format).map((segment, i) => {
+        const { pattern, placeholder, type, momentType } = matchSegment(segment);
+        const value = timestamp
+            ? utc === true
+                ? moment.utc(timestamp).format(pattern)
+                : moment(timestamp).format(pattern)
+            : placeholder;
+        return {
+            value,
+            text: value,
+            placeholder,
+            type,
+            momentType,
+            index: i,
+        };
+    });
+    return segments;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.1.60",
+  "version": "1.1.64",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -12,13 +12,15 @@
   "files": [
     "dist/"
   ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
   "scripts": {
     "clean": "rm -r ./dist",
     "build": "tsc",
-    "patch": "yarn version --patch",
-    "minor": "yarn version --minor",
-    "major": "yarn version --major",
-    "release": "yarn version --patch --deferred && yarn build && npm publish && yarn clean"
+    "release-patch": "yarn version --patch --deferred && yarn build && npm publish && yarn clean",
+    "release-minor": "yarn version --minor --deferred && yarn build && npm publish && yarn clean",
+    "release-major": "yarn version --major --deferred && yarn build && npm publish && yarn clean"
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.16",