@monolith-forensics/monolith-ui 1.3.10 → 1.3.16

package/dist/Button/Button.d.ts

@@ -3,6 +3,7 @@ import { Size, Variant } from "../core";
 import { MonolithDefaultTheme } from "../MonolithUIProvider";
 declare const colors: {
     gray: string;
+    lightGray: string;
     red: string;
     pink: string;
     grape: string;

package/dist/Button/Button.js

@@ -15,6 +15,7 @@ import styled from "styled-components";
 import { Loader2Icon } from "lucide-react";
 const colors = {
     gray: "#888888",
+    lightGray: "#f0f0f0",
     red: "#e03131",
     pink: "#c2255c",
     grape: "#9c36b5",
@@ -53,7 +54,6 @@ const StyledButton = styled.button `
     }
 }};
 
-  font-weight: 525;
   font-size: ${({ theme, size }) => {
     switch (size) {
         case "xxs":
@@ -206,9 +206,9 @@ const StyledButton = styled.button `
     }
     switch (variant) {
         case "contained":
-            return (resolvedColor || theme.palette.background.secondary) + "90";
+            return (resolvedColor || theme.button.background.secondary) + "90";
         case "filled":
-            return (resolvedColor || theme.palette.background.secondary) + "90";
+            return (resolvedColor || theme.button.background.secondary) + "90";
         case "light":
             return resolvedColor
                 ? resolvedColor + "70"

package/dist/Calendar/Calendar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { CalendarContainer, CalendarHeader, CalendarGrid, CalendarMonth, CalendarDay, CalendarDate, HighlightedCalendarDate, TodayCalendarDate, TimeContainer, MainContainer, TimePickerContainer, TimeHourSelect, TimeHeader, TimeMinuteSelect, TimeItem, TimeItemActive, NoValueButton, } from "./CalendarStyles";
 import calendar, { isDate, isSameDay, isSameMonth, getDateISO, getNextMonth, getPreviousMonth, WEEK_DAYS, CALENDAR_MONTHS, HOURS24, HOURS12, MINUTES, } from "./calendarHelpers";
@@ -11,16 +11,23 @@ const checkValidRange = (value, min, max) => {
         return false;
     return true;
 };
+const resolveValue = (value) => {
+    const safeValue = value || new Date();
+    return {
+        month: safeValue.getMonth() + 1,
+        year: safeValue.getFullYear(),
+        hours: safeValue.getHours(),
+        minutes: safeValue.getMinutes(),
+    };
+};
 const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hourFormat = "24", includeTime = true, clearable = true, min, max, }) => {
-    const [dateState, setDateState] = useState(() => {
-        const safeDefaultValue = defaultValue || new Date();
-        return {
-            current: defaultValue,
-            month: safeDefaultValue.getMonth() + 1,
-            year: safeDefaultValue.getFullYear(),
-            hours: 0,
-            minutes: 0,
-        };
+    const isControlled = useRef(value !== undefined);
+    const [valueState, setValueState] = useState(defaultValue);
+    const _value = isControlled.current
+        ? value
+        : valueState;
+    const [calendarState, setCalendarState] = useState(() => {
+        return resolveValue(_value);
     });
     const [today, setToday] = useState(new Date());
     let pressureTimer;
@@ -29,8 +36,8 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
     const addDateToState = (date) => {
         const isDateObject = isDate(date);
         const _date = isDateObject ? date : new Date();
-        setDateState({
-            current: isDateObject ? date : null,
+        setValueState(_date);
+        setCalendarState({
             month: +_date.getMonth() + 1,
             year: _date.getFullYear(),
             hours: _date.getHours(),
@@ -38,14 +45,14 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
         });
     };
     const getCalendarDates = () => {
-        const { current, month, year } = dateState;
-        const calendarMonth = month || +((current === null || current === void 0 ? void 0 : current.getMonth()) || 0) + 1;
-        const calendarYear = year || (current === null || current === void 0 ? void 0 : current.getFullYear()) || new Date().getFullYear();
+        const { month, year } = calendarState;
+        const calendarMonth = month || +((_value === null || _value === void 0 ? void 0 : _value.getMonth()) || 0) + 1;
+        const calendarYear = year || (_value === null || _value === void 0 ? void 0 : _value.getFullYear()) || new Date().getFullYear();
         return calendar(calendarMonth, calendarYear);
     };
     //new start
     const renderMonthAndYear = () => {
-        const { month, year } = dateState;
+        const { month, year } = calendarState;
         // Resolve the month name from the CALENDAR_MONTHS object map
         const monthname = Object.keys(CALENDAR_MONTHS)[Math.max(0, Math.min(month - 1, 11))];
         return (_jsxs(CalendarHeader, { children: [_jsx(ChevronLeftIcon, { onMouseDown: handlePrevious, onMouseUp: clearPressureTimer }), _jsxs(CalendarMonth, { children: [monthname, " ", year] }), _jsx(ChevronRightIcon, { onMouseDown: handleNext, onMouseUp: clearPressureTimer })] }));
@@ -60,12 +67,12 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
     // Render a calendar date as returned from the calendar builder function
     // This method is used as a map callback as seen in render()
     const renderCalendarDate = (date, index) => {
-        const { current, month, year } = dateState;
+        const { month, year } = calendarState;
         const _date = new Date(date.join("-"));
         // Check if calendar date is same day as today
         const isToday = isSameDay(_date, today);
         // Check if calendar date is same day as currently selected date
-        const isCurrent = current && isSameDay(_date, current);
+        const isCurrent = _value && isSameDay(_date, _value);
         // Check if calendar date is in the same month as the state month and year
         const inMonth = month && year && isSameMonth(_date, new Date([year, month, 1].join("-")));
         // The click handler
@@ -81,88 +88,81 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
         return isCurrent ? (_jsx(HighlightedCalendarDate, Object.assign({}, props, { children: _date.getDate() }))) : isToday ? (_jsx(TodayCalendarDate, Object.assign({}, props, { children: _date.getDate() }))) : (_jsx(CalendarDate, Object.assign({}, props, { children: _date.getDate() })));
     };
     const renderHours = () => {
-        const { hours } = dateState;
+        const { hours } = calendarState;
         const hoursArray = hourFormat === "24" ? HOURS24 : HOURS12;
         return hoursArray.map((hour, index) => {
             const HourComponent = hour.value === hours ? TimeItemActive : TimeItem;
             return (_jsx(HourComponent, { 
                 // value={hour.value}
                 onClick: (e) => {
-                    const newTime = moment(dateState.current)
-                        .hours(hour.value)
-                        .toDate();
-                    setDateState(Object.assign(Object.assign({}, dateState), { hours: hour.value, current: newTime }));
-                    onChange(newTime);
+                    const newTime = moment(_value).hours(hour.value).toDate();
+                    setCalendarState(Object.assign(Object.assign({}, calendarState), { hours: hour.value }));
+                    setValueState(newTime);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(newTime);
                 }, children: hour.label }, hour.value));
         });
     };
     const renderMinutes = () => {
-        const { minutes } = dateState;
+        const { minutes } = calendarState;
         return MINUTES.map((minute) => {
             const MinuteComponent = minute === minutes ? TimeItemActive : TimeItem;
             return (_jsx(MinuteComponent, { 
                 // value={minute}
                 onClick: (e) => {
-                    const newTime = moment(dateState.current)
-                        .minutes(Number(minute))
-                        .toDate();
-                    setDateState(Object.assign(Object.assign({}, dateState), { minutes: Number(minute), current: newTime }));
-                    onChange(newTime);
+                    const newTime = moment(_value).minutes(Number(minute)).toDate();
+                    setCalendarState(Object.assign(Object.assign({}, calendarState), { minutes: Number(minute) }));
+                    setValueState(newTime);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(newTime);
                 }, children: minute }, minute));
         });
     };
     // new 2
     const gotoDate = (date) => (evt) => {
         evt && evt.preventDefault();
-        const { current } = dateState;
         // Set Hours and Minutes
         const newTime = moment(date)
-            .hours(includeTime ? dateState.hours : 0)
-            .minutes(includeTime ? dateState.minutes : 0)
+            .hours(includeTime ? calendarState.hours : 0)
+            .minutes(includeTime ? calendarState.minutes : 0)
             .toDate();
-        !(current && isSameDay(newTime, current)) && addDateToState(newTime);
+        !(_value && isSameDay(newTime, _value)) && addDateToState(newTime);
         onChange(newTime);
     };
     const gotoPreviousMonth = () => {
-        const { month, year } = dateState;
+        const { month, year } = calendarState;
         const previousMonth = getPreviousMonth(month, year);
-        setDateState({
+        setCalendarState({
             month: previousMonth.month,
             year: previousMonth.year,
-            current: dateState.current,
-            hours: dateState.hours,
-            minutes: dateState.minutes,
+            hours: calendarState.hours,
+            minutes: calendarState.minutes,
         });
     };
     const gotoNextMonth = () => {
-        const { month, year } = dateState;
+        const { month, year } = calendarState;
         const nextMonth = getNextMonth(month, year);
-        setDateState({
+        setCalendarState({
             month: nextMonth.month,
             year: nextMonth.year,
-            current: dateState.current,
-            hours: dateState.hours,
-            minutes: dateState.minutes,
+            hours: calendarState.hours,
+            minutes: calendarState.minutes,
         });
     };
     const gotoPreviousYear = () => {
-        const { year } = dateState;
-        setDateState({
-            month: dateState.month,
+        const { year } = calendarState;
+        setCalendarState({
+            month: calendarState.month,
             year: year - 1,
-            current: dateState.current,
-            hours: dateState.hours,
-            minutes: dateState.minutes,
+            hours: calendarState.hours,
+            minutes: calendarState.minutes,
         });
     };
     const gotoNextYear = () => {
-        const { year } = dateState;
-        setDateState({
-            month: dateState.month,
+        const { year } = calendarState;
+        setCalendarState({
+            month: calendarState.month,
             year: year + 1,
-            current: dateState.current,
-            hours: dateState.hours,
-            minutes: dateState.minutes,
+            hours: calendarState.hours,
+            minutes: calendarState.minutes,
         });
     };
     const clearPressureTimer = () => {
@@ -179,28 +179,29 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
         const fn = evt.shiftKey ? gotoNextYear : gotoNextMonth;
         fn();
     };
+    // update calendar state when value changes
     useEffect(() => {
-        if (value) {
-            addDateToState(value);
+        if (_value) {
+            addDateToState(_value);
         }
-    }, [value]);
-    // lifecycle methods
-    useEffect(() => {
-        const now = new Date().valueOf();
-        const tomorrow = new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000;
-        const ms = tomorrow - now;
-        dayTimeout = setTimeout(() => {
-            setToday(new Date());
-            clearDayTimeout();
-        }, ms);
-        return () => {
-            clearPressureTimer();
-            clearDayTimeout();
-        };
-    }, []);
-    const clearDayTimeout = () => {
-        dayTimeout && clearTimeout(dayTimeout);
-    };
+    }, [_value === null || _value === void 0 ? void 0 : _value.toString()]); // checking for real change in date value, not just object reference change
+    // // lifecycle methods
+    // useEffect(() => {
+    //   const now = new Date().valueOf();
+    //   const tomorrow = new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000;
+    //   const ms = tomorrow - now;
+    //   dayTimeout = setTimeout(() => {
+    //     setToday(new Date());
+    //     clearDayTimeout();
+    //   }, ms);
+    //   return () => {
+    //     clearPressureTimer();
+    //     clearDayTimeout();
+    //   };
+    // }, []);
+    // const clearDayTimeout = () => {
+    //   dayTimeout && clearTimeout(dayTimeout);
+    // };
     return (_jsxs(MainContainer, { children: [_jsxs(CalendarContainer, { children: [renderMonthAndYear(), _jsxs(CalendarGrid, { children: [_jsx(Fragment, { children: Object.keys(WEEK_DAYS).map(renderDayLabel) }), _jsx(Fragment, { children: getCalendarDates().map(renderCalendarDate) })] }), clearable && (_jsx("div", { style: { textAlign: "center", marginTop: 3 }, children: _jsx(NoValueButton, { onClick: () => onChange(null), children: "Clear Date" }) }))] }), includeTime && (_jsxs(TimeContainer, { children: [_jsx(TimeHeader, { children: "Select Time" }), _jsxs(TimePickerContainer, { children: [_jsx(TimeHourSelect, { children: renderHours() }), _jsx(TimeMinuteSelect, { children: renderMinutes() })] })] }))] }));
 };
 Calendar.displayName = "Calendar";

package/dist/DateInput/DateInput.d.ts

@@ -1,7 +1,6 @@
 import moment from "moment";
-import React from "react";
 import { Size, Variant } from "../core";
-interface DateInputProps {
+type DateInputProps = {
     className?: string;
     style?: React.CSSProperties;
     defaultValue?: string | null | undefined;
@@ -23,7 +22,7 @@ interface DateInputProps {
     utc?: boolean;
     closeOnSelect?: boolean;
     disabled?: boolean;
-}
+};
 export type DateFormatOptions = "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY-MM-DD";
 export type TimeFormatOptions = "HH:mm:ss" | "h:mm:ss A" | "HH:mm:ss.SSS";
 export type FormatOptions = DateFormatOptions | `${DateFormatOptions} ${TimeFormatOptions}`;
@@ -36,5 +35,5 @@ export type Segment = {
     momentType?: moment.unitOfTime.All | moment.unitOfTime.DurationConstructor;
     pattern?: string;
 };
-declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLElement>>;
+declare const DateInput: React.FC<DateInputProps>;
 export default DateInput;

package/dist/DateInput/DateInput.js

@@ -302,38 +302,34 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         // Up Arrow
         if (e.key === "ArrowUp") {
             e.preventDefault();
-            setUncontrolledValue((prev) => {
-                if (selectedSegment.type === "separator")
-                    return prev;
-                let newValue = prev
-                    ? moment(prev).add(1, selectedSegment.type).toISOString()
+            if (selectedSegment.type !== "separator") {
+                let newValue = _value
+                    ? moment(_value).add(1, selectedSegment.type).toISOString()
                     : moment().toISOString();
                 if (!checkValidRange(newValue))
-                    return prev;
+                    return;
                 if (isDateOnly) {
                     newValue = moment(newValue).format("YYYY-MM-DD");
                 }
+                setUncontrolledValue(newValue);
                 onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-                return newValue;
-            });
+            }
         }
         // Down Arrow
         if (e.key === "ArrowDown") {
             e.preventDefault();
-            setUncontrolledValue((prev) => {
-                if (selectedSegment.type === "separator")
-                    return prev;
-                let newValue = prev
-                    ? moment(prev).subtract(1, selectedSegment.type).toISOString()
+            if (selectedSegment.type !== "separator") {
+                let newValue = _value
+                    ? moment(_value).subtract(1, selectedSegment.type).toISOString()
                     : moment().toISOString();
                 if (!checkValidRange(newValue))
-                    return prev;
+                    return;
                 if (isDateOnly) {
                     newValue = moment(newValue).format("YYYY-MM-DD");
                 }
+                setUncontrolledValue(newValue);
                 onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-                return newValue;
-            });
+            }
         }
         // handle paste
         if (e.key === "v" && (e.metaKey || e.ctrlKey)) {
@@ -378,79 +374,58 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         if (!selectedSegment) {
             return;
         }
-        setUncontrolledValue((prev) => {
-            let newValue = prev;
-            if (selectedSegment.type === "separator") {
-                newValue = prev; // skip all logic if separator
-            }
-            else if (!prev) {
-                newValue = isDateOnly
-                    ? moment().format(format)
-                    : moment().toISOString();
-            }
-            else {
-                newValue =
-                    e.deltaY > 0
-                        ? moment(newValue).subtract(1, selectedSegment.type).toISOString()
-                        : moment(newValue).add(1, selectedSegment.type).toISOString();
+        if (selectedSegment.type !== "separator") {
+            let newValue = e.deltaY > 0
+                ? moment(_value).subtract(1, selectedSegment.type).toISOString()
+                : moment(_value).add(1, selectedSegment.type).toISOString();
+            if (!checkValidRange(newValue))
+                return;
+            if (isDateOnly) {
+                newValue = moment(newValue).format("YYYY-MM-DD");
             }
-            if (!checkValidRange(newValue)) {
-                return prev;
-            }
-            newValue = isDateOnly ? moment(newValue).format(format) : newValue;
+            setUncontrolledValue(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();
+        let parsedTimestamp = null;
         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();
-            setUncontrolledValue(parsedTimestamp);
-            return;
+        else if (pastedText.match(/^\d{10}$/)) {
+            parsedTimestamp = moment.unix(parseInt(pastedText, 10)).toISOString();
         }
         // check for unix timestamp in seconds with fractional seconds
-        if (pastedText.match(/^\d{10}\.\d{1,6}$/)) {
-            const parsedTimestamp = moment
-                .unix(parseFloat(pastedText))
-                .toISOString();
-            setUncontrolledValue(parsedTimestamp);
-            return;
+        else if (pastedText.match(/^\d{10}\.\d{1,6}$/)) {
+            parsedTimestamp = moment.unix(parseFloat(pastedText)).toISOString();
         }
         // check for unix timestamp in milliseconds
-        if (pastedText.match(/^\d{13}$/)) {
-            const parsedTimestamp = moment
+        else if (pastedText.match(/^\d{13}$/)) {
+            parsedTimestamp = moment
                 .unix(parseInt(pastedText, 10) / 1000)
                 .toISOString();
-            setUncontrolledValue(parsedTimestamp);
-            return;
         }
         // check for windows ldap or filetime timestamp
-        if (pastedText.match(/^\d{18}$/)) {
-            const parsedTimestamp = moment
+        else if (pastedText.match(/^\d{18}$/)) {
+            parsedTimestamp = moment
                 .unix((parseInt(pastedText, 10) - 116444736000000000) / 10000000)
                 .toISOString();
-            setUncontrolledValue(parsedTimestamp);
-            return;
         }
         // check for YMD ldap timestamp in format YYYYMMDDHHMMSSZ
-        if (pastedText.match(/^\d{14}Z$/)) {
-            const parsedTimestamp = moment
+        else if (pastedText.match(/^\d{14}Z$/)) {
+            parsedTimestamp = moment
                 .utc(pastedText, "YYYYMMDDHHmmssZ")
                 .toISOString();
-            setUncontrolledValue(parsedTimestamp);
-            return;
         }
         // check if pasted text is any other valid timestamp
-        if (!moment(pastedText).isValid())
+        else if (!moment(pastedText).isValid())
             return;
-        const parsedTimestamp = moment.utc(pastedText).toISOString();
+        else {
+            parsedTimestamp = moment.utc(pastedText).toISOString();
+        }
         setUncontrolledValue(parsedTimestamp);
+        onChange === null || onChange === void 0 ? void 0 : onChange(parsedTimestamp);
     });
     // Close on outside click
     useEffect(() => {
@@ -471,22 +446,13 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         document.addEventListener("click", close);
         return () => document.removeEventListener("click", close);
     }, [refs.floating]);
-    // Global Wheel Event when segement selected
-    useEffect(() => {
-        if (selectedSegment) {
-            document.addEventListener("wheel", handleWheelEvent);
-        }
-        return () => {
-            document.removeEventListener("wheel", handleWheelEvent);
-        };
-    }, [selectedSegment]);
     return (_jsxs(StyledContainer, { ref: (ref) => {
             if (typeof _ref === "function") {
                 _ref(ref);
             }
             mainRef.current = ref;
             refs.setReference(ref);
-        }, className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { className: "input-container", onClick: handleContainerClick, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onFocus: (e) => {
+        }, onWheel: (e) => handleWheelEvent(e), className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { className: "input-container", onClick: handleContainerClick, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onFocus: (e) => {
                     e.preventDefault();
                     setSelectedSegment(segments[0]);
                 }, onBlur: () => {

package/dist/DropDownMenu/DropDownMenu.d.ts

@@ -1,3 +1,2 @@
 import { DropDownMenuProps } from "./types";
-declare const DropDownMenu: ({ data, children, defaultValue, variant, arrow, size, searchable, loading, onScroll, multiselect, renderOption, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, }: DropDownMenuProps) => import("react/jsx-runtime").JSX.Element;
-export default DropDownMenu;
+export declare const DropDownMenu: React.FC<DropDownMenuProps>;

package/dist/DropDownMenu/DropDownMenu.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { Menu, MenuItemList, SearchInput, StyledInnerItemContainer, } from "./components";
-const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, searchable, loading, onScroll, multiselect, renderOption, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, }) => {
+export const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, searchable, loading, onScroll, multiselect, renderOption, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, }) => {
     var _a;
     const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
     const [selected, setSelected] = useState(defaultValue || []);
@@ -32,4 +32,3 @@ const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, sear
     };
     return (_jsx(Menu, { label: children, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, onMenuClose: handleMenuClose, dropDownProps: dropDownProps, children: _jsxs(StyledInnerItemContainer, { children: [loading && _jsx("div", { children: "Loading..." }), searchable && (_jsx(SearchInput, { ref: searchInputRef, variant: "outlined", size: size, placeholder: "Search", defaultValue: searchValue, onChange: handleSearch })), !loading && (_jsx(MenuItemList, { menuItems: data, searchable: searchable, searchValue: searchValue, isObjectArray: isObjectArray, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll }))] }) }));
 };
-export default DropDownMenu;

package/dist/DropDownMenu/components/MenuItemList.js

@@ -3,14 +3,14 @@ import { useLayoutEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import { FixedSizeList } from "react-window";
 import CheckBox from "../../CheckBox";
-import DropDownMenu from "../DropDownMenu";
+import { DropDownMenu } from "../DropDownMenu";
 import { MenuItem } from "./MenuItem";
 const filterMenuItems = (menuItems, searchValue) => {
     return menuItems.filter((item) => {
         var _a, _b, _c;
         if (item === null || item === void 0 ? void 0 : item.label) {
             return (((_a = item === null || item === void 0 ? void 0 : item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchValue.toLowerCase())) ||
-                ((_b = item === null || item === void 0 ? void 0 : item.value) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchValue.toLowerCase())));
+                ((_b = item === null || item === void 0 ? void 0 : item.value) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase().includes(searchValue.toLowerCase())));
         }
         return (_c = item.toLowerCase) === null || _c === void 0 ? void 0 : _c.call(item).includes(searchValue.toLowerCase());
     });

package/dist/DropDownMenu/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./DropDownMenu";
+export * from "./DropDownMenu";
 export * from "./types";

package/dist/DropDownMenu/index.js

@@ -1,2 +1,2 @@
-export { default } from "./DropDownMenu";
+export * from "./DropDownMenu";
 export * from "./types";

package/dist/DropDownMenu/types.d.ts

@@ -6,7 +6,7 @@ import { StyledContent } from "./components";
 export type DropDownItem = {
     toLowerCase?: () => string;
     label: string;
-    value: string;
+    value: string | number;
     onClick?: (args: any) => void;
     data?: any;
     items?: DropDownItem[];
@@ -16,11 +16,11 @@ export type DropDownItem = {
     visible?: boolean;
 };
 export type SearchInputProps = React.ComponentPropsWithoutRef<typeof Input>;
-export interface StyledContentProps {
+export type StyledContentProps = {
     maxDropdownHeight?: number | string;
     variant?: Variant;
-}
-export interface DropDownMenuProps {
+};
+export type DropDownMenuProps = {
     className?: string;
     children?: ReactNode | string;
     label?: string;
@@ -42,8 +42,8 @@ export interface DropDownMenuProps {
     buttonRender?: (props: any) => ReactElement;
     buttonProps?: ButtonProps;
     disabled?: boolean;
-}
-export interface MenuProps {
+};
+export type MenuProps = {
     label?: any;
     itemData?: any;
     nested?: boolean;
@@ -59,4 +59,4 @@ export interface MenuProps {
     TooltipContent?: ComponentType<any>;
     dropDownProps?: ComponentPropsWithoutRef<typeof StyledContent>;
     disabled?: boolean;
-}
+};

package/dist/QueryFilter/QueryFilter.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { useTheme } from "styled-components";
 import { XIcon } from "lucide-react";
-import DropDownMenu from "../DropDownMenu";
+import { DropDownMenu } from "../DropDownMenu";
 import { Button } from "../Button";
 import { DefaultOperators } from "./DefaultOperators";
 import Input from "../Input";

package/dist/RichTextEditor/Components/BubbleMenu.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { useTheme } from "styled-components";
 import { Extensions } from "../Enums";
 import { BoldIcon, ItalicIcon, UnderlineIcon, CaseSensitiveIcon, ListIcon, ListOrderedIcon, StrikethroughIcon, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, RemoveFormattingIcon, SquircleIcon, } from "lucide-react";
-import DropDownMenu from "../../DropDownMenu";
+import { DropDownMenu, } from "../../DropDownMenu";
 import { FloatingPortal, useFloating } from "@floating-ui/react";
 import { useEffect, useRef } from "react";
 import { Button } from "../../Button";

package/dist/RichTextEditor/Components/ColorPicker.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import DropDownMenu from "../../DropDownMenu";
+import { DropDownMenu } from "../../DropDownMenu";
 import TextColors from "../Enums/TextColors";
 import { SquircleIcon } from "lucide-react";
 import { useTheme } from "styled-components";
@@ -23,7 +23,9 @@ export const ColorPicker = ({ editor }) => {
                     },
                 };
             }),
-        ], renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(SquircleIcon, { size: 12, color: item.value === "default" ? theme.palette.text.primary : item.value, style: {
+        ], renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(SquircleIcon, { size: 12, color: item.value === "default"
+                        ? theme.palette.text.primary
+                        : item.value, style: {
                         backgroundColor: item.value === "default"
                             ? theme.palette.text.primary
                             : item.value,

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -3,7 +3,7 @@ import styled, { useTheme } from "styled-components";
 import ControlsGroup from "./ControlsGroup";
 import { UndoControl, RedoControl, BoldControl, ItalicControl, UnderlineControl, StrikeThroughControl, Heading1Control, Heading2Control, Heading3Control, Heading4Control, BulletListControl, OrderedListControl, AlignLeftControl, AlignCenterControl, AlignRightControl, AlignJustifiedControl, } from "./Controls";
 import { Controls } from "../Enums";
-import DropDownMenu from "../../DropDownMenu";
+import { DropDownMenu } from "../../DropDownMenu";
 import Fonts from "../Enums/Fonts";
 import { useContext } from "react";
 import RichTextEditorContext from "../Contexts/RichTextEditorContext";

package/dist/Table/TableMenu/TableMenu.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { Button } from "../../Button";
 import { TextInput } from "../../TextInput";
 import { CheckSquareIcon, Columns3Icon, DownloadIcon, FilterIcon, Rows3Icon, Rows4Icon, } from "lucide-react";
-import DropDownMenu from "../../DropDownMenu";
+import { DropDownMenu } from "../../DropDownMenu";
 import useTable from "../useTable";
 import { TableExportOptions } from "../enums";
 import { useDebouncedCallback } from "use-debounce";

package/dist/index.d.ts

@@ -8,9 +8,8 @@ export * from "./Grid";
 export * from "./TextInput";
 export * from "./SelectBox";
 export * from "./Button";
+export * from "./DropDownMenu";
 export { default as IconButton } from "./IconButton";
-export { default as DropDownMenu } from "./DropDownMenu";
-export type { DropDownItem } from "./DropDownMenu";
 export { default as DateInput } from "./DateInput";
 export { default as TextArea } from "./TextArea";
 export { default as TextAreaInput } from "./TextAreaInput";

package/dist/index.js

@@ -3,8 +3,8 @@ export * from "./Grid";
 export * from "./TextInput";
 export * from "./SelectBox";
 export * from "./Button";
+export * from "./DropDownMenu";
 export { default as IconButton } from "./IconButton";
-export { default as DropDownMenu } from "./DropDownMenu";
 export { default as DateInput } from "./DateInput";
 export { default as TextArea } from "./TextArea";
 export { default as TextAreaInput } from "./TextAreaInput";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.3.10",
+  "version": "1.3.16",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -56,7 +56,6 @@
     "moment": "^2.29.1",
     "overlayscrollbars": "^2.6.0",
     "overlayscrollbars-react": "^0.5.6",
-    "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-icons": "^5.2.1",
     "react-pdf": "^9.1.1",
@@ -71,7 +70,8 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.59.16",
-    "react": "18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@tanstack/react-query": "5.59.16",