@monolith-forensics/monolith-ui 1.3.97 → 1.3.103

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,8 @@
+export type AlertVariant = "info" | "success" | "warning" | "error" | "default";
+export type AlertProps = {
+    children: React.ReactNode;
+    variant?: AlertVariant;
+    title?: string;
+    onClose?: () => void;
+};
+export declare const Alert: React.FC<AlertProps>;

package/dist/Alert/Alert.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircleIcon, AlertTriangleIcon, CheckIcon, InfoIcon, } from "lucide-react";
+import styled from "styled-components";
+const Icons = {
+    info: _jsx(InfoIcon, { size: 20 }),
+    success: _jsx(CheckIcon, { size: 20 }),
+    warning: _jsx(AlertCircleIcon, { size: 20 }),
+    error: _jsx(AlertTriangleIcon, { size: 20 }),
+    default: _jsx(InfoIcon, { size: 20 }),
+};
+const StyledContainer = styled.div `
+  display: flex;
+  gap: 10px;
+  padding: 15px;
+  border-radius: 4px;
+
+  border: 1px solid ${({ theme, variant }) => theme.alert[variant].border};
+  background-color: ${({ theme, variant }) => theme.alert[variant].background};
+  color: ${({ theme, variant }) => theme.alert[variant].color};
+`;
+const StyledTitle = styled.div `
+  height: 25px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: bold;
+  margin: 0px;
+
+  color: ${({ theme, variant }) => { var _a; return (_a = theme.alert[variant]) === null || _a === void 0 ? void 0 : _a.color; }};
+`;
+const StyledContent = styled.div `
+  display: flex;
+  font-size: 13px;
+  font-weight: 400;
+  margin: 0px;
+
+  color: ${({ theme, variant }) => theme.palette.text.primary};
+`;
+const StyledContentContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+const StyledHeader = styled.div `
+  display: flex;
+  justify-content: flex-start;
+  height: 28px;
+  align-items: center;
+`;
+export const Alert = ({ children, variant = "info", title, onClose, }) => {
+    return (_jsxs(StyledContainer, { variant: variant, children: [_jsx(StyledHeader, { children: Icons[variant] }), _jsxs(StyledContentContainer, { children: [title && _jsx(StyledTitle, { variant: variant, children: title }), _jsx(StyledContent, { variant: variant, children: children })] })] }));
+};

package/dist/Alert/index.d.ts

@@ -0,0 +1 @@
+export * from "./Alert";

package/dist/Alert/index.js

@@ -0,0 +1 @@
+export * from "./Alert";

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":
@@ -103,7 +103,7 @@ const StyledButton = styled.button `
     if (variant === "filled")
         return "white";
     if (color) {
-        return (((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.button) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b[color]) ||
+        return (((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.button) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[color]) ||
             colors[color] ||
             theme.palette.text.primary);
     }
@@ -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

@@ -1,16 +1,10 @@
 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, }) => {
+import { useState } from "react";
+import { Menu, MenuItemList, StyledInnerItemContainer } from "./components";
+export const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, searchable, loading, onScroll, onScrollToTop, onScrollToBottom, onSearch, manualSearch, multiselect, renderOption, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, query, disabled, }) => {
     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 || []);
-    const [searchValue, setSearchValue] = useState("");
-    const searchInputRef = useRef(null);
-    const handleSearch = useDebouncedCallback((e) => {
-        setSearchValue(e.target.value);
-    }, 150);
     const handleAddItem = (item) => {
         setSelected((prev) => {
             let newSelected = [...prev, item];
@@ -27,9 +21,9 @@ const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, sear
             return newSelected;
         });
     };
-    const handleMenuClose = () => {
-        setSearchValue("");
+    const handleMenuClose = () => { };
+    const handleScrollToBottom = (e) => {
+        onScrollToBottom === null || onScrollToBottom === void 0 ? void 0 : onScrollToBottom(e);
     };
-    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 }))] }) }));
+    return (_jsx(Menu, { label: children, disabled: disabled, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, onMenuClose: handleMenuClose, dropDownProps: dropDownProps, children: _jsxs(StyledInnerItemContainer, { children: [loading && _jsx("div", { children: "Loading..." }), !loading && (_jsx(MenuItemList, { menuItems: data, searchable: searchable, onSearch: onSearch, manualSearch: manualSearch, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll, onScrollToTop: onScrollToTop, onScrollToBottom: handleScrollToBottom, query: query }))] }) }));
 };
-export default DropDownMenu;

package/dist/DropDownMenu/components/MenuComponent.js

@@ -18,7 +18,7 @@ import { StyledFloatContainer } from "./StyledFloatContainer";
 import { StyledContent } from "./StyledContent";
 import { MenuItem } from "./MenuItem";
 export const MenuComponent = forwardRef((_a, forwardedRef) => {
-    var { children, label, arrow, size, buttonSize, variant, buttonProps, buttonRender, multiselect, onMenuClose, dropDownProps } = _a, props = __rest(_a, ["children", "label", "arrow", "size", "buttonSize", "variant", "buttonProps", "buttonRender", "multiselect", "onMenuClose", "dropDownProps"]);
+    var { children, label, arrow, size, buttonSize, variant, buttonProps, buttonRender, multiselect, onMenuClose, dropDownProps, disabled } = _a, props = __rest(_a, ["children", "label", "arrow", "size", "buttonSize", "variant", "buttonProps", "buttonRender", "multiselect", "onMenuClose", "dropDownProps", "disabled"]);
     const [isOpen, setIsOpen] = useState(false);
     const [hasFocusInside, setHasFocusInside] = useState(false);
     const [activeIndex, setActiveIndex] = useState(null);
@@ -102,7 +102,7 @@ export const MenuComponent = forwardRef((_a, forwardedRef) => {
             onMenuClose === null || onMenuClose === void 0 ? void 0 : onMenuClose();
         }
     }, [isOpen]);
-    return (_jsxs(FloatingNode, { id: nodeId, children: [_jsx(MenuItem, Object.assign({ ref: useMergeRefs([refs.setReference, item.ref, forwardedRef]), tabIndex: !isNested ? undefined : parent.activeIndex === item.index ? 0 : -1, role: isNested ? "menuitem" : undefined, className: isNested ? `MenuItem` : "mfui-DropDownMenu RootMenu", "data-open": isOpen ? "" : undefined, "data-nested": isNested ? "" : undefined, "data-focus-inside": hasFocusInside ? "" : undefined }, getReferenceProps(parent.getItemProps(Object.assign(Object.assign({}, props), { onFocus(event) {
+    return (_jsxs(FloatingNode, { id: nodeId, children: [_jsx(MenuItem, Object.assign({ ref: useMergeRefs([refs.setReference, item.ref, forwardedRef]), tabIndex: !isNested ? undefined : parent.activeIndex === item.index ? 0 : -1, role: isNested ? "menuitem" : undefined, className: isNested ? `MenuItem` : "mfui-DropDownMenu RootMenu", disabled: disabled, "data-open": isOpen ? "" : undefined, "data-nested": isNested ? "" : undefined, "data-focus-inside": hasFocusInside ? "" : undefined }, getReferenceProps(parent.getItemProps(Object.assign(Object.assign({}, props), { onFocus(event) {
                     var _a;
                     (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
                     setHasFocusInside(false);