@monolith-forensics/monolith-ui 1.8.1-dev.4 → 1.9.0

package/dist/DateInput/DateInput.js

@@ -10,11 +10,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import moment from "moment";
 import { useFloating, flip, offset, FloatingPortal, useDismiss, useInteractions, autoUpdate, } from "@floating-ui/react";
-import { CalendarDaysIcon } from "lucide-react";
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { forwardRef, useEffect, useMemo, useRef, useState, } from "react";
 import styled from "styled-components";
 import { FieldLabel, Calendar } from "..";
-import { StyledContent, StyledFloatContainer, ArrowButton, ClearButton, getControlSizeTokens, } from "../core";
+import { StyledContent, StyledFloatContainer, ArrowButton, ClearButton, } from "../core";
 import parseTimestamp from "../Utilities/parseTimestamp";
 const StyledContainer = styled.div.attrs({
     className: "mfui-DateInput",
@@ -54,19 +53,45 @@ const StyledInputContainer = styled.div `
   font-family: ${({ theme }) => theme.typography.fontFamily};
 
   color: ${(props) => props.theme.palette.text.primary};
-  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
+  font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
 
   width: 100%;
-  height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
+  height: ${({ size }) => size === "xs"
+    ? "26px"
+    : size === "sm"
+        ? "30px"
+        : size === "md"
+            ? "36px"
+            : size === "lg"
+                ? "42px"
+                : size === "xl"
+                    ? "50px"
+                    : "26px"};
 
-  padding: ${({ size }) => `0px ${getControlSizeTokens(size).inputPaddingX}px`};
-
-  &[data-button-left="true"] {
-    padding-left: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
-  }
+  padding: ${({ size }) => size === "xs"
+    ? "0px 8px"
+    : size === "sm"
+        ? "0px 10px"
+        : size === "md"
+            ? "0px 12px"
+            : size === "lg"
+                ? "0px 14px"
+                : size === "xl"
+                    ? "0px 16px"
+                    : "0px 8px"};
 
   &[data-button-right="true"] {
-    padding-right: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
+    padding-right: 36px;
   }
 
   background-color: ${({ theme, variant }) => {
@@ -126,44 +151,6 @@ const StyledInputContainer = styled.div `
     }
   }
 `;
-const CalendarTriggerButton = styled.button `
-  position: absolute;
-  left: 0;
-  height: 100%;
-  width: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
-  background: none;
-  border: none;
-  cursor: pointer;
-  margin: 0;
-  outline: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${(props) => props.theme.palette.text.secondary};
-  transition:
-    color 0.15s ease-in-out,
-    background-color 0.15s ease-in-out,
-    transform 0.1s ease-in-out;
-
-  &:hover {
-    color: ${(props) => props.theme.palette.text.primary};
-    background: ${(props) => props.theme.palette.action.hover};
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-
-  &:focus-visible {
-    color: ${(props) => props.theme.palette.primary.main};
-    background: ${(props) => props.theme.palette.action.hover};
-  }
-
-  svg {
-    width: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
-    height: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
-  }
-`;
 const InputSegment = styled.div `
   user-select: none;
   display: flex;
@@ -174,7 +161,17 @@ const InputSegment = styled.div `
   border: none;
   padding: 0;
 
-  height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
+  height: ${({ size }) => size === "xs"
+    ? "22px"
+    : size === "sm"
+        ? "26px"
+        : size === "md"
+            ? "32px"
+            : size === "lg"
+                ? "38px"
+                : size === "xl"
+                    ? "46px"
+                    : "22px"};
 
   height: 100%;
 
@@ -182,7 +179,17 @@ const InputSegment = styled.div `
   color: ${(props) => props.theme.palette.text.primary};
 
   ::placeholder {
-    font-size: ${({ size }) => `${getControlSizeTokens(size).placeholderFontSize}px`};
+    font-size: ${({ size }) => size === "xs"
+    ? "10px"
+    : size === "sm"
+        ? "12px"
+        : size === "md"
+            ? "14px"
+            : size === "lg"
+                ? "16px"
+                : size === "xl"
+                    ? "18px"
+                    : "10px"};
   }
 `;
 const DateInput = forwardRef(({ className, style = {}, defaultValue, value, 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, disabled = false, }, _ref) => {
@@ -205,83 +212,23 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         middleware: [flip(), offset(5)],
         whileElementsMounted: autoUpdate,
     });
-    const dismiss = useDismiss(context, {
-        outsidePress: (event) => {
-            var _a, _b;
-            const target = event.target;
-            if (((_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, ".mfui-DropDownMenu")) ||
-                ((_b = target === null || target === void 0 ? void 0 : target.closest) === null || _b === void 0 ? void 0 : _b.call(target, ".Menu"))) {
-                return false;
-            }
-            return true;
-        },
-    });
-    const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
-    const parseValue = useCallback((input) => {
-        if (!input)
-            return null;
-        const parsed = utc ? moment.utc(input) : moment(input);
-        return parsed.isValid() ? parsed : null;
-    }, [utc]);
-    const getEditableMoment = useCallback((input) => {
-        var _a;
-        return (_a = parseValue(input)) !== null && _a !== void 0 ? _a : (utc ? moment.utc() : moment());
-    }, [parseValue, utc]);
-    const serializeMoment = useCallback((nextMoment) => {
-        return isDateOnly
-            ? nextMoment.format("YYYY-MM-DD")
-            : nextMoment.toISOString();
-    }, [isDateOnly]);
-    const commitValue = useCallback((nextValue) => {
-        if (!isControlled.current) {
-            setUncontrolledValue(nextValue);
-        }
-        onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
-    }, [onChange]);
-    const segments = useMemo(() => parseTimestamp(_value || "", format, utc), [_value, format, utc]);
-    const checkValidRange = useCallback((value) => {
+    const dismiss = useDismiss(context);
+    const { getReferenceProps } = useInteractions([dismiss]);
+    const segments = useMemo(() => parseTimestamp(moment(_value).toISOString(), format, utc), [_value, format, utc]);
+    const checkValidRange = (value) => {
         if (!value)
             return false;
-        const parsed = parseValue(value);
-        if (!parsed)
-            return false;
-        if (min && parsed.isBefore(min))
+        if (min && moment(value).isBefore(min))
             return false;
-        if (max && parsed.isAfter(max))
+        if (max && moment(value).isAfter(max))
             return false;
         return true;
-    }, [parseValue, min, max]);
-    const getCalendarValue = useCallback(() => {
-        const parsed = parseValue(_value);
-        if (!parsed)
-            return undefined;
-        if (!utc) {
-            return parsed.toDate();
-        }
-        // Convert UTC date parts into a local Date so the Calendar highlights
-        // the same wall-clock day the input is displaying.
-        return new Date(parsed.year(), parsed.month(), parsed.date(), parsed.hour(), parsed.minute(), parsed.second(), parsed.millisecond());
-    }, [_value, parseValue, utc]);
-    const updateValue = useCallback((updater) => {
-        const currentMoment = getEditableMoment(_value);
-        const nextMoment = updater(_value, currentMoment.clone());
-        if (!nextMoment || !nextMoment.isValid())
-            return;
-        const nextValue = serializeMoment(nextMoment);
-        if (!checkValidRange(nextValue))
-            return;
-        commitValue(nextValue);
-    }, [
-        _value,
-        getEditableMoment,
-        serializeMoment,
-        checkValidRange,
-        commitValue,
-    ]);
+    };
     const handleClear = (e) => {
         e.preventDefault();
         e.stopPropagation();
-        commitValue(null);
+        setUncontrolledValue(null);
+        onChange === null || onChange === void 0 ? void 0 : onChange(null);
         setIsOpen(false);
     };
     const handleSegmentClick = (e, segment) => {
@@ -309,18 +256,6 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         setIsOpen(true);
         setSelectedSegment(segments[0]);
     };
-    const handleCalendarTriggerClick = (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        if (mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) {
-            const input = mainRef.current.querySelector("div[data-type='input']");
-            if (input) {
-                input.focus();
-            }
-        }
-        setIsOpen((prev) => !prev);
-        setSelectedSegment(segments[0]);
-    };
     const nextSegment = () => {
         setSelectedSegment((prev) => {
             if (!prev)
@@ -367,18 +302,34 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         // Up Arrow
         if (e.key === "ArrowUp") {
             e.preventDefault();
-            const segmentType = selectedSegment.type;
-            if (segmentType === "separator")
-                return;
-            updateValue((_, currentMoment) => currentMoment.add(1, segmentType));
+            if (selectedSegment.type !== "separator") {
+                let newValue = _value
+                    ? moment(_value).add(1, selectedSegment.type).toISOString()
+                    : moment().toISOString();
+                if (!checkValidRange(newValue))
+                    return;
+                if (isDateOnly) {
+                    newValue = moment(newValue).format("YYYY-MM-DD");
+                }
+                setUncontrolledValue(newValue);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+            }
         }
         // Down Arrow
         if (e.key === "ArrowDown") {
             e.preventDefault();
-            const segmentType = selectedSegment.type;
-            if (segmentType === "separator")
-                return;
-            updateValue((_, currentMoment) => currentMoment.subtract(1, segmentType));
+            if (selectedSegment.type !== "separator") {
+                let newValue = _value
+                    ? moment(_value).subtract(1, selectedSegment.type).toISOString()
+                    : moment().toISOString();
+                if (!checkValidRange(newValue))
+                    return;
+                if (isDateOnly) {
+                    newValue = moment(newValue).format("YYYY-MM-DD");
+                }
+                setUncontrolledValue(newValue);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+            }
         }
         // handle paste
         if (e.key === "v" && (e.metaKey || e.ctrlKey)) {
@@ -397,7 +348,10 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
             setUncontrolledValue((prev) => {
                 if (!(selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.momentType))
                     return prev;
-                const momentValue = getEditableMoment(prev);
+                // if prev is null, use undefined - passing null to moment returns a null moment value
+                const momentValue = utc
+                    ? moment.utc(prev || undefined)
+                    : moment(prev || undefined);
                 let newValue = moment(momentValue)
                     .set(selectedSegment.momentType, parseInt(tempValue, 10) -
                     (selectedSegment.type === "month" ? 1 : 0))
@@ -405,13 +359,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
                 if (!checkValidRange(newValue))
                     return prev;
                 if (isDateOnly) {
-                    newValue = utc
-                        ? moment.utc(newValue).format("YYYY-MM-DD")
-                        : moment(newValue).format("YYYY-MM-DD");
-                }
-                if (isControlled.current) {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-                    return prev;
+                    newValue = moment(newValue).format("YYYY-MM-DD");
                 }
                 onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
                 return newValue;
@@ -426,65 +374,66 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         if (!selectedSegment) {
             return;
         }
-        const segmentType = selectedSegment.type;
-        if (segmentType === "separator")
-            return;
-        updateValue((_, currentMoment) => e.deltaY > 0
-            ? currentMoment.subtract(1, segmentType)
-            : currentMoment.add(1, segmentType));
+        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");
+            }
+            setUncontrolledValue(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }
     };
     const handlePaste = (e) => __awaiter(void 0, void 0, void 0, function* () {
         const pastedText = yield window.navigator.clipboard.readText();
-        let parsedMoment = null;
+        let parsedTimestamp = null;
         if (!pastedText)
             return; // do nothing if clipboard is empty
         // check for unix timestamp in seconds
         else if (pastedText.match(/^\d{10}$/)) {
-            parsedMoment = moment.unix(parseInt(pastedText, 10));
+            parsedTimestamp = moment.unix(parseInt(pastedText, 10)).toISOString();
         }
         // check for unix timestamp in seconds with fractional seconds
         else if (pastedText.match(/^\d{10}\.\d{1,6}$/)) {
-            parsedMoment = moment.unix(parseFloat(pastedText));
+            parsedTimestamp = moment.unix(parseFloat(pastedText)).toISOString();
         }
         // check for unix timestamp in milliseconds
         else if (pastedText.match(/^\d{13}$/)) {
-            parsedMoment = moment.unix(parseInt(pastedText, 10) / 1000);
+            parsedTimestamp = moment
+                .unix(parseInt(pastedText, 10) / 1000)
+                .toISOString();
         }
         // check for windows ldap or filetime timestamp
         else if (pastedText.match(/^\d{18}$/)) {
-            parsedMoment = moment.unix((parseInt(pastedText, 10) - 116444736000000000) / 10000000);
+            parsedTimestamp = moment
+                .unix((parseInt(pastedText, 10) - 116444736000000000) / 10000000)
+                .toISOString();
         }
         // check for YMD ldap timestamp in format YYYYMMDDHHMMSSZ
         else if (pastedText.match(/^\d{14}Z$/)) {
-            parsedMoment = moment.utc(pastedText, "YYYYMMDDHHmmssZ");
+            parsedTimestamp = moment
+                .utc(pastedText, "YYYYMMDDHHmmssZ")
+                .toISOString();
         }
         // check if pasted text is any other valid timestamp
         else if (!moment(pastedText).isValid())
             return;
         else {
-            parsedMoment = utc ? moment.utc(pastedText) : moment(pastedText);
-        }
-        if (!(parsedMoment === null || parsedMoment === void 0 ? void 0 : parsedMoment.isValid()))
-            return;
-        if (utc) {
-            parsedMoment = parsedMoment.clone().utc();
+            parsedTimestamp = moment.utc(pastedText).toISOString();
         }
-        const parsedTimestamp = serializeMoment(parsedMoment);
-        if (!checkValidRange(parsedTimestamp))
-            return;
-        commitValue(parsedTimestamp);
+        setUncontrolledValue(parsedTimestamp);
+        onChange === null || onChange === void 0 ? void 0 : onChange(parsedTimestamp);
     });
     // Close on outside click
     useEffect(() => {
         const close = (e) => {
-            var _a, _b, _c, _d;
+            var _a, _b;
             const target = e.target;
             const referenceElement = (_a = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _a === void 0 ? void 0 : _a.current;
             const floatingElement = (_b = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _b === void 0 ? void 0 : _b.current;
-            if (((_c = target === null || target === void 0 ? void 0 : target.closest) === null || _c === void 0 ? void 0 : _c.call(target, ".mfui-DropDownMenu")) ||
-                ((_d = target === null || target === void 0 ? void 0 : target.closest) === null || _d === void 0 ? void 0 : _d.call(target, ".Menu"))) {
-                return;
-            }
             if (floatingElement && // Check if the floating element exists
                 e.target !== referenceElement && // Check if the target is not the reference (input)
                 !referenceElement.contains(target) && // Check if the target is not inside the reference (input)
@@ -497,18 +446,18 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         document.addEventListener("click", close);
         return () => document.removeEventListener("click", close);
     }, [refs.floating]);
-    return (_jsxs(StyledContainer, Object.assign({ ref: (ref) => {
+    return (_jsxs(StyledContainer, { ref: (ref) => {
             if (typeof _ref === "function") {
                 _ref(ref);
             }
             mainRef.current = ref;
             refs.setReference(ref);
-        }, onWheel: (e) => handleWheelEvent(e), className: className }, getReferenceProps(), { 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: () => {
                     setSelectedSegment(null);
-                }, "data-empty": !_value, "data-disabled": disabled, role: "textbox", size: size, variant: variant, "data-button-left": enableCalendar, "data-button-right": arrow || clearable, style: style, children: [enableCalendar && (_jsx(CalendarTriggerButton, { size: size, type: "button", "aria-label": "Toggle calendar", onClick: handleCalendarTriggerClick, "data-default-btn": true, children: _jsx(CalendarDaysIcon, {}) })), segments.map((segment, i) => {
+                }, "data-empty": !_value, "data-disabled": disabled, role: "textbox", size: size, variant: variant, "data-button-right": arrow || clearable, style: style, children: [segments.map((segment, i) => {
                         if (segment.type === "separator") {
                             return (_jsx("div", { className: "separator", tabIndex: -1, onClick: (e) => {
                                     e.preventDefault();
@@ -516,25 +465,21 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
                                 }, onFocus: (e) => e.preventDefault(), onPointerDown: (e) => e.preventDefault(), "data-type": "separator", "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, children: segment.text }, i));
                         }
                         return (_jsx(InputSegment, { className: "input", tabIndex: i === 0 ? 0 : -1, onClick: (e) => handleSegmentClick(e, segment), "data-type": "input", size: size, "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, "data-selected": (selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.index) === segment.index, children: _value ? segment.text : segment.placeholder }, i));
-                    }), utc && _jsx("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && _value ? (_jsx(ClearButton, { size: size, onClick: handleClear })) : arrow ? (_jsx(ArrowButton, { size: size })) : null] }), !disabled && enableCalendar && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, style: floatingStyles }, getFloatingProps(), { children: _jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsx("div", { children: _jsx(Calendar, { value: getCalendarValue(), clearable: false, min: min, max: max, onChange: (date, meta) => {
-                                    if (!date) {
-                                        commitValue(null);
-                                        setIsOpen((meta === null || meta === void 0 ? void 0 : meta.source) === "month" || (meta === null || meta === void 0 ? void 0 : meta.source) === "year"
-                                            ? true
-                                            : closeOnSelect
-                                                ? false
-                                                : true);
-                                        return;
-                                    }
-                                    updateValue((_, currentMoment) => currentMoment
-                                        .year(date.getFullYear())
-                                        .month(date.getMonth())
-                                        .date(date.getDate()));
-                                    setIsOpen((meta === null || meta === void 0 ? void 0 : meta.source) === "month" || (meta === null || meta === void 0 ? void 0 : meta.source) === "year"
-                                        ? true
-                                        : closeOnSelect
-                                            ? false
-                                            : true);
-                                }, includeTime: false }, 1) }) }) })) }))] })));
+                    }), utc && _jsx("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && _value ? (_jsx(ClearButton, { onClick: handleClear })) : arrow ? (_jsx(ArrowButton, {})) : null] }), !disabled && enableCalendar && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, style: floatingStyles }, getReferenceProps(), { children: _jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsx("div", { children: _jsx(Calendar, { value: _value ? moment(_value).toDate() : undefined, clearable: false, min: min, max: max, onChange: (date) => {
+                                    setUncontrolledValue((prev) => {
+                                        // make copy of prev variable
+                                        const oldValue = moment(prev).toISOString();
+                                        const result = `${moment(date).format("YYYY-MM-DD")}T${moment(prev || undefined).format("HH:mm:ss")}`;
+                                        let isoResult = moment(result).toISOString();
+                                        if (!checkValidRange(result))
+                                            return oldValue;
+                                        if (isDateOnly) {
+                                            isoResult = moment(result).format("YYYY-MM-DD");
+                                        }
+                                        onChange === null || onChange === void 0 ? void 0 : onChange(isoResult);
+                                        setIsOpen(closeOnSelect ? false : true);
+                                        return isoResult;
+                                    });
+                                }, includeTime: false }, 1) }) }) })) }))] }));
 });
 export default DateInput;

package/dist/DropDownMenu/DropDownMenu.js

@@ -1,39 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Menu, MenuItemList, StyledInnerItemContainer } from "./components";
-export const DropDownMenu = ({ data, children, defaultValue, value, variant, arrow, size, searchable, grouped, onAddNew, loading, onScroll, onScrollToTop, onScrollToBottom, onSearch, manualSearch, multiselect, enableSelectAll, renderOption, dynamicOptionHeight, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, query, disabled, }) => {
+export const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, searchable, grouped, onAddNew, 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 [internalSelected, setInternalSelected] = useState(defaultValue || []);
-    const isControlled = value !== undefined;
-    const selected = isControlled ? value || [] : internalSelected;
-    const updateSelected = (newSelected, diff) => {
-        if (!isControlled) {
-            setInternalSelected(newSelected);
-        }
-        onChange === null || onChange === void 0 ? void 0 : onChange(newSelected, diff);
-    };
-    const isSameItem = (a, b) => isObjectArray ? (a === null || a === void 0 ? void 0 : a.value) === (b === null || b === void 0 ? void 0 : b.value) : a === b;
+    const [selected, setSelected] = useState(defaultValue || []);
     const handleAddItem = (item) => {
-        if (!multiselect) {
-            updateSelected([item], [item]);
-            return;
-        }
-        const nextSelected = selected.some((selectedItem) => isSameItem(selectedItem, item))
-            ? selected
-            : [...selected, item];
-        updateSelected(nextSelected, [item]);
+        setSelected((prev) => {
+            let newSelected = [...prev, item];
+            const diff = [item];
+            onChange === null || onChange === void 0 ? void 0 : onChange(newSelected, diff);
+            return newSelected;
+        });
     };
     const handleRemoveItem = (item) => {
-        const newSelected = selected.filter((i) => !isSameItem(i, item));
-        updateSelected(newSelected, [item]);
-    };
-    const handleSetSelected = (newSelected, diff) => {
-        updateSelected(newSelected, diff);
+        setSelected((prev) => {
+            let newSelected = prev.filter((i) => isObjectArray ? (i === null || i === void 0 ? void 0 : i.value) !== (item === null || item === void 0 ? void 0 : item.value) : i !== item);
+            const diff = [item];
+            onChange === null || onChange === void 0 ? void 0 : onChange(newSelected, diff);
+            return newSelected;
+        });
     };
     const handleMenuClose = () => { };
     const handleScrollToBottom = (e) => {
         onScrollToBottom === null || onScrollToBottom === void 0 ? void 0 : onScrollToBottom(e);
     };
-    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, grouped: grouped, onAddNew: onAddNew, onSearch: onSearch, manualSearch: manualSearch, dynamicOptionHeight: dynamicOptionHeight, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, enableSelectAll: enableSelectAll, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, handleSetSelected: handleSetSelected, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll, onScrollToTop: onScrollToTop, onScrollToBottom: handleScrollToBottom, query: query }))] }) }));
+    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, grouped: grouped, onAddNew: onAddNew, 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 }))] }) }));
 };

package/dist/DropDownMenu/components/MenuComponent.js

@@ -11,9 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useEffect, useRef, useState } from "react";
-import { autoUpdate, flip, FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, offset, safePolygon, shift, size as floatingSize, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTypeahead, } from "@floating-ui/react";
+import { autoUpdate, flip, FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTypeahead, } from "@floating-ui/react";
 import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
-import { getControlSizeTokens } from "../../core";
 import { MenuContext } from "./MenuContext";
 import { StyledFloatContainer } from "./StyledFloatContainer";
 import { StyledContent } from "./StyledContent";
@@ -43,11 +42,6 @@ export const MenuComponent = forwardRef((_a, forwardedRef) => {
             }),
             flip(),
             shift(),
-            floatingSize({
-                apply({ rects, elements }) {
-                    elements.floating.style.setProperty("--mfui-dropdown-reference-width", `${rects.reference.width}px`);
-                },
-            }),
         ],
         whileElementsMounted: autoUpdate,
     });
@@ -113,7 +107,7 @@ export const MenuComponent = forwardRef((_a, forwardedRef) => {
                     (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
                     setHasFocusInside(false);
                     parent.setHasFocusInside(true);
-                } }))), { rightSection: arrow ? (_jsx(ChevronDownIcon, { size: getControlSizeTokens(buttonSize).iconSize })) : isNested ? (_jsx(ChevronRightIcon, { size: getControlSizeTokens(buttonSize).iconSize })) : null, size: buttonSize, variant: variant, selected: isOpen, nested: isNested }, buttonProps, { children: label })), _jsx(MenuContext.Provider, { value: {
+                } }))), { rightSection: arrow ? (_jsx(ChevronDownIcon, { size: 12 })) : isNested ? (_jsx(ChevronRightIcon, { size: 12 })) : null, size: buttonSize, variant: variant, selected: isOpen, nested: isNested }, buttonProps, { children: label })), _jsx(MenuContext.Provider, { value: {
                     activeIndex,
                     setActiveIndex,
                     getItemProps,

package/dist/DropDownMenu/components/MenuItem.d.ts

@@ -19,7 +19,6 @@ export declare const MenuItem: import("styled-components/dist/types").IStyledCom
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 } & {
     multiselect?: boolean;
-    $dynamicHeight?: boolean;
 }, "ref"> & import("react").RefAttributes<unknown>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<MenuProps & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
     ref?: RefObject<HTMLButtonElement>;
     children?: import("react").ReactNode | string;
@@ -39,5 +38,4 @@ export declare const MenuItem: import("styled-components/dist/types").IStyledCom
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 } & {
     multiselect?: boolean;
-    $dynamicHeight?: boolean;
 }, "ref"> & import("react").RefAttributes<unknown>>, keyof import("react").Component<any, {}, any>>;