@monolith-forensics/monolith-ui 1.8.1-dev.3 → 1.8.1

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>>;

package/dist/DropDownMenu/components/MenuItem.js

@@ -13,7 +13,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useContext } from "react";
 import styled from "styled-components";
 import { Button } from "../../Button";
-import { getControlSizeTokens } from "../../core";
 import { useFloatingTree, useListItem, useMergeRefs } from "@floating-ui/react";
 import { MenuContext } from "./MenuContext";
 import Tooltip from "../../Tooltip";
@@ -44,23 +43,21 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
     border-radius: 3px;
     display: flex;
     flex-direction: row;
-    gap: ${({ size = "sm" }) => `${getControlSizeTokens(size).iconGap}px`};
+    gap: 5px;
     align-items: center;
-    min-height: ${({ size = "sm" }) => `${getControlSizeTokens(size).menuRowHeight}px`};
+    min-height: 25px;
     width: 100%;
     min-width: 100%;
-    height: ${({ size = "sm", $dynamicHeight }) => $dynamicHeight ? "auto" : `${getControlSizeTokens(size).menuRowHeight}px`};
-    box-sizing: border-box;
+    height: auto;
     position: relative;
     user-select: none;
     outline: none;
 
     border: none;
-    text-align: left;
 
-    white-space: ${({ $dynamicHeight }) => $dynamicHeight ? "normal" : "nowrap"};
-    overflow: ${({ $dynamicHeight }) => $dynamicHeight ? "visible" : "hidden"};
-    text-overflow: ${({ $dynamicHeight }) => $dynamicHeight ? "clip" : "ellipsis"};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     cursor: pointer;
     text-decoration: none;
@@ -68,7 +65,17 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
     font-weight: normal;
     letter-spacing: normal;
 
-    padding: ${({ size = "sm", $dynamicHeight }) => `${$dynamicHeight ? 6 : 0}px ${getControlSizeTokens(size).menuItemPaddingX}px`};
+    padding: ${({ size }) => size === "xs"
+    ? "2px 8px"
+    : size === "sm"
+        ? "4px 10px"
+        : size === "md"
+            ? "4px 12px"
+            : size === "lg"
+                ? "5px 14px"
+                : size === "xl"
+                    ? "6px 16px"
+                    : "2px 8px"};
 
     &[data-disabled="true"] {
       opacity: 0.5;
@@ -76,12 +83,6 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
       pointer-events: "none";
     }
 
-    &[data-selected="true"] {
-      background-color: ${(props) => props.theme.palette.primary.main}20;
-      color: ${(props) => props.theme.palette.primary.main};
-      font-weight: 600;
-    }
-
     &:hover {
       background-color: ${(props) => props.theme.palette.action.hover};
       color: ${(props) => props.theme.palette.text.primary};
@@ -92,15 +93,10 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
     }
 
     .button-label {
-      display: ${({ $dynamicHeight }) => $dynamicHeight ? "flex" : "inline-block"};
-      align-items: center;
-      justify-content: flex-start;
-      min-width: 0;
-      width: 100%;
-      text-align: left;
-      overflow: ${({ $dynamicHeight }) => $dynamicHeight ? "visible" : "hidden"};
-      white-space: ${({ $dynamicHeight }) => $dynamicHeight ? "normal" : "nowrap"};
-      text-overflow: ${({ $dynamicHeight }) => $dynamicHeight ? "clip" : "ellipsis"};
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
   }
 `;

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

@@ -7,17 +7,14 @@ export declare const MenuItemList: React.FC<{
     searchValue?: string;
     onSearch?: (value: string) => void;
     manualSearch?: boolean;
-    dynamicOptionHeight?: boolean;
     selected?: DropDownItem[];
     TooltipContent?: ComponentType<any>;
     multiselect?: boolean;
-    enableSelectAll?: boolean;
     grouped?: boolean;
     onAddNew?: (value: string) => void;
     size?: Size;
     handleAddItem: (item: DropDownItem) => void;
     handleRemoveItem: (item: DropDownItem) => void;
-    handleSetSelected: (selected: DropDownItem[], diff: DropDownItem[]) => void;
     onItemSelect?: (item: DropDownItem) => void;
     renderOption?: (item: DropDownItem) => React.ReactNode;
     onScroll?: (e: Event) => void;

package/dist/DropDownMenu/components/MenuItemList.js

@@ -10,19 +10,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import styled from "styled-components";
-import { FixedSizeList, VariableSizeList } from "react-window";
+import { FixedSizeList } from "react-window";
 import { Plus } from "lucide-react";
 import CheckBox from "../../CheckBox";
-import { getControlSizeTokens } from "../../core";
 import { DropDownMenu } from "../DropDownMenu";
 import { MenuItem } from "./MenuItem";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useDebouncedCallback } from "use-debounce";
 import { SearchInput } from "./SearchInput";
 import Loader from "../../Loader";
-const getItemKey = (item) => item && typeof item === "object" && "value" in item ? item.value : item;
 const filterMenuItems = (menuItems, searchValue) => {
     return menuItems.filter((item) => {
         var _a, _b, _c;
@@ -56,28 +54,6 @@ const buildGroupedDisplayList = (items) => {
 const ListViewPort = styled.div.attrs({ className: "ListViewPort" }) `
   display: flex;
   flex-direction: column;
-  width: 100%;
-`;
-const ListScroller = styled.div `
-  scrollbar-color: ${({ theme }) => `${theme.scrollbar.thumb} ${theme.scrollbar.track}`};
-  scrollbar-gutter: stable;
-  scrollbar-width: thin;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: ${(props) => props.theme.scrollbar.track};
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: ${(props) => props.theme.scrollbar.thumb};
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: ${(props) => props.theme.scrollbar.thumbHover};
-  }
 `;
 const GroupHeader = styled.div `
   display: flex;
@@ -86,9 +62,28 @@ const GroupHeader = styled.div `
   color: ${(props) => props.theme.palette.text.secondary};
   font-weight: 500;
   user-select: none;
-  min-height: ${({ $size = "sm" }) => `${getControlSizeTokens($size).menuRowHeight}px`};
-  padding: ${({ $size = "sm" }) => `0px ${getControlSizeTokens($size).menuItemPaddingX}px`};
-  font-size: ${({ $size = "sm" }) => `${getControlSizeTokens($size).menuGroupFontSize}px`};
+  padding: ${({ $size }) => $size === "xs"
+    ? "2px 8px"
+    : $size === "sm"
+        ? "4px 10px"
+        : $size === "md"
+            ? "4px 12px"
+            : $size === "lg"
+                ? "5px 14px"
+                : $size === "xl"
+                    ? "6px 16px"
+                    : "2px 8px"};
+  font-size: ${({ $size }) => $size === "xs"
+    ? "10px"
+    : $size === "sm"
+        ? "11px"
+        : $size === "md"
+            ? "13px"
+            : $size === "lg"
+                ? "15px"
+                : $size === "xl"
+                    ? "17px"
+                    : "10px"};
 
   .group-line {
     border-top: 1px solid ${(props) => props.theme.palette.divider};
@@ -100,41 +95,17 @@ const GroupHeader = styled.div `
     min-width: fit-content;
   }
 `;
-const MeasuredRow = ({ children, index, setItemSize, style }) => {
-    const rowRef = useRef(null);
-    useLayoutEffect(() => {
-        const row = rowRef.current;
-        if (!row)
-            return;
-        const updateSize = () => {
-            const measuredHeight = Math.ceil(row.getBoundingClientRect().height);
-            if (measuredHeight > 0) {
-                setItemSize(index, measuredHeight);
-            }
-        };
-        updateSize();
-        if (typeof ResizeObserver === "undefined")
-            return;
-        const observer = new ResizeObserver(updateSize);
-        observer.observe(row);
-        return () => observer.disconnect();
-    }, [children, index, setItemSize]);
-    return (_jsx("div", { style: Object.assign(Object.assign({}, style), { overflow: "visible" }), children: _jsx("div", { ref: rowRef, children: children }) }));
-};
-export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dynamicOptionHeight, selected, TooltipContent, multiselect, enableSelectAll, grouped, onAddNew, size, handleAddItem, handleRemoveItem, handleSetSelected, onItemSelect, renderOption, onScroll, onScrollToTop, onScrollToBottom, query, }) => {
+export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, selected, TooltipContent, multiselect, grouped, onAddNew, size, handleAddItem, handleRemoveItem, onItemSelect, renderOption, onScroll, onScrollToTop, onScrollToBottom, query, }) => {
+    var _a;
     const [searchValue, setSearchValue] = useState("");
-    const _a = query !== null && query !== void 0 ? query : {}, { queryKey, queryFn, getNextPageParam, initialPageParam } = _a, rest = __rest(_a, ["queryKey", "queryFn", "getNextPageParam", "initialPageParam"]);
+    const _b = query !== null && query !== void 0 ? query : {}, { queryKey, queryFn, getNextPageParam, initialPageParam } = _b, rest = __rest(_b, ["queryKey", "queryFn", "getNextPageParam", "initialPageParam"]);
+    const abortController = new AbortController();
     const targetElm = useRef(null);
     const listElm = useRef(null);
-    const fixedListRef = useRef(null);
-    const variableListRef = useRef(null);
-    const hasHandledInitialSelectedScroll = useRef(false);
-    const itemSizeMap = useRef({});
     const [viewPortDimensions, setViewPortDimensions] = useState({
         width: 0,
         height: 0,
     });
-    const [, setMeasurementRevision] = useState(0);
     const { data: infiniteQueryResult, isLoading: isLoadingInfiniteQuery, fetchNextPage, } = useInfiniteQuery(Object.assign({ queryKey: (queryKey === null || queryKey === void 0 ? void 0 : queryKey({ search: searchValue })) || [], queryFn: queryFn, getNextPageParam: (query === null || query === void 0 ? void 0 : query.getNextPageParam) || (() => undefined), initialPageParam: (query === null || query === void 0 ? void 0 : query.initialPageParam) || 1, enabled: !!query }, rest));
     const infinteOptionsData = infiniteQueryResult;
     const infiniteSelectOptions = infinteOptionsData || [];
@@ -152,9 +123,6 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
         if (multiselect) {
             isSelected ? handleRemoveItem(item) : handleAddItem(item);
         }
-        else {
-            handleAddItem(item);
-        }
         onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(item);
         (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
     };
@@ -185,55 +153,39 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
         }
         return items;
     })();
-    const selectedKeys = useMemo(() => new Set((selected || []).map(getItemKey)), [selected]);
-    const isItemSelected = (item) => selectedKeys.has(getItemKey(item));
-    const selectableItems = useMemo(() => displayItems.filter((item) => !item._isGroupHeader &&
-        !item._isAddNew &&
-        !item.disabled &&
-        !item.items), [displayItems]);
-    const selectableKeys = useMemo(() => new Set(selectableItems.map(getItemKey)), [selectableItems]);
-    const selectedSelectableItems = useMemo(() => selectableItems.filter((item) => selectedKeys.has(getItemKey(item))), [selectableItems, selectedKeys]);
-    const allSelectableItemsSelected = selectableItems.length > 0 &&
-        selectedSelectableItems.length === selectableItems.length;
-    const someSelectableItemsSelected = selectedSelectableItems.length > 0 && !allSelectableItemsSelected;
-    const selectedDisplayIndex = displayItems.findIndex((item) => {
-        if (item._isGroupHeader || item._isAddNew)
-            return false;
-        return isItemSelected(item);
-    });
-    const selectedDisplayKey = selected === null || selected === void 0 ? void 0 : selected.map(getItemKey).join("|");
+    const isObjectArray = (_a = Object.keys((visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
     const isLoading = isLoadingInfiniteQuery;
-    const handleOnScroll = useCallback((event) => {
+    const handleOnScroll = (event) => {
         const scrollTolerance = 15;
         onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
         const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+        // scroll to top
         if (scrollTop <= scrollTolerance) {
             onScrollToTop === null || onScrollToTop === void 0 ? void 0 : onScrollToTop(event);
         }
+        // Scroll to bottom
         if (scrollHeight - scrollTop <= clientHeight + scrollTolerance) {
             onScrollToBottom === null || onScrollToBottom === void 0 ? void 0 : onScrollToBottom(event);
             debouncedFetchNextPage();
         }
-    }, [debouncedFetchNextPage, onScroll, onScrollToBottom, onScrollToTop]);
-    const handleToggleSelectAll = () => {
-        if (selectableItems.length === 0)
-            return;
-        const currentSelected = selected || [];
-        if (allSelectableItemsSelected) {
-            const nextSelected = currentSelected.filter((selectedItem) => !selectableKeys.has(getItemKey(selectedItem)));
-            handleSetSelected(nextSelected, selectedSelectableItems);
-            return;
-        }
-        const itemsToAdd = selectableItems.filter((item) => !isItemSelected(item));
-        handleSetSelected([...currentSelected, ...itemsToAdd], itemsToAdd);
     };
     useLayoutEffect(() => {
-        const list = listElm.current;
-        if (!list)
-            return;
-        list.addEventListener("scroll", handleOnScroll);
-        return () => list.removeEventListener("scroll", handleOnScroll);
-    }, [dynamicOptionHeight, handleOnScroll, isLoading, renderOption]);
+        if (listElm.current) {
+            listElm.current.addEventListener("scroll", (e) => handleOnScroll(e));
+        }
+        // Event cleanup
+        return () => {
+            abortController.abort();
+        };
+    }, [
+        filteredItems,
+        listElm.current,
+        isLoading,
+        onScroll,
+        onScrollToTop,
+        onScrollToBottom,
+        handleOnScroll,
+    ]);
     useLayoutEffect(() => {
         var _a;
         if (targetElm.current) {
@@ -245,103 +197,20 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
         }
     }, [targetElm.current, isLoading]);
     const overscanCount = 10;
-    const sizeTokens = getControlSizeTokens(size || "sm");
-    const itemHeight = sizeTokens.menuRowHeight;
-    const dynamicListEnabled = dynamicOptionHeight !== null && dynamicOptionHeight !== void 0 ? dynamicOptionHeight : Boolean(renderOption);
-    const estimatedDynamicItemHeight = itemHeight + 16;
+    const itemHeight = 25;
     const itemCount = (displayItems === null || displayItems === void 0 ? void 0 : displayItems.length) || 0;
-    const displayItemsKey = displayItems
-        .map((item) => `${item.value}:${item.label}:${item._isGroupHeader ? "g" : "i"}`)
-        .join("|");
-    const getDynamicItemSize = (index) => {
-        var _a;
-        return itemSizeMap.current[index] ||
-            (((_a = displayItems[index]) === null || _a === void 0 ? void 0 : _a._isGroupHeader) ? itemHeight : estimatedDynamicItemHeight);
-    };
-    const estimatedHeight = dynamicListEnabled
-        ? displayItems.reduce((total, _, index) => total + getDynamicItemSize(index), 0)
-        : itemCount * itemHeight;
     const height = viewPortDimensions.height
         ? viewPortDimensions.height
-        : estimatedHeight < 200
-            ? estimatedHeight
+        : itemCount * itemHeight < 200
+            ? itemCount * itemHeight
             : 200;
-    const width = "100%";
-    const setItemSize = useCallback((index, measuredSize) => {
-        var _a;
-        if (itemSizeMap.current[index] === measuredSize)
-            return;
-        itemSizeMap.current = Object.assign(Object.assign({}, itemSizeMap.current), { [index]: measuredSize });
-        (_a = variableListRef.current) === null || _a === void 0 ? void 0 : _a.resetAfterIndex(index);
-        setMeasurementRevision((revision) => revision + 1);
-    }, []);
-    useLayoutEffect(() => {
-        var _a;
-        itemSizeMap.current = {};
-        (_a = variableListRef.current) === null || _a === void 0 ? void 0 : _a.resetAfterIndex(0, true);
-        setMeasurementRevision((revision) => revision + 1);
-    }, [displayItemsKey, dynamicListEnabled]);
-    useLayoutEffect(() => {
-        var _a, _b, _c, _d;
-        if (multiselect) {
-            if (hasHandledInitialSelectedScroll.current || itemCount === 0) {
-                return;
-            }
-            hasHandledInitialSelectedScroll.current = true;
-            if (selectedDisplayIndex < 0)
-                return;
-            (_a = fixedListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(selectedDisplayIndex, "smart");
-            (_b = variableListRef.current) === null || _b === void 0 ? void 0 : _b.scrollToItem(selectedDisplayIndex, "smart");
-            return;
-        }
-        if (selectedDisplayIndex < 0)
-            return;
-        (_c = fixedListRef.current) === null || _c === void 0 ? void 0 : _c.scrollToItem(selectedDisplayIndex, "smart");
-        (_d = variableListRef.current) === null || _d === void 0 ? void 0 : _d.scrollToItem(selectedDisplayIndex, "smart");
-    }, [
-        displayItemsKey,
-        itemCount,
-        multiselect,
-        selectedDisplayIndex,
-        selectedDisplayKey,
-    ]);
-    const renderDisplayItem = (item, index, style) => {
-        if (item._isGroupHeader) {
-            return (_jsxs(GroupHeader, { "$size": size, style: style, children: [_jsx("span", { className: "group-line" }), _jsx("span", { className: "group-label", children: item.label }), _jsx("span", { className: "group-line" })] }, item.value));
-        }
-        if (item._isAddNew) {
-            return (_jsx(MenuItem, { className: "MenuItem", size: size, leftSection: _jsx(Plus, { size: 14 }), onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    onAddNew === null || onAddNew === void 0 ? void 0 : onAddNew(item.value);
-                }, style: style, children: item.label }, "__add_new__"));
-        }
-        const isSelected = isItemSelected(item);
-        if (item.items) {
-            return (_jsx(DropDownMenu, { data: item.items, size: size, buttonProps: style ? Object.assign({ style }, item) : Object.assign({}, item), disabled: item.disabled, dynamicOptionHeight: dynamicListEnabled, children: item.label }));
-        }
-        return (_jsx(MenuItem, { className: "MenuItem", itemData: item, TooltipContent: TooltipContent, "data-selected": !multiselect && isSelected, "data-disabled": item.disabled, disabled: item.disabled, leftSection: multiselect ? (_jsxs(_Fragment, { children: [_jsx(CheckBox, { value: isSelected, size: size, onChange: (newValue) => {
-                            var _a;
-                            newValue ? handleAddItem(item) : handleRemoveItem(item);
-                            (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
-                        } }), (item === null || item === void 0 ? void 0 : item.leftSection) || null] })) : ((item === null || item === void 0 ? void 0 : item.leftSection) || null), rightSection: item === null || item === void 0 ? void 0 : item.rightSection, multiselect: multiselect, size: size, title: !TooltipContent ? item === null || item === void 0 ? void 0 : item.label : undefined, onClick: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                handleItemClick(item, isSelected);
-            }, style: style, "$dynamicHeight": dynamicListEnabled, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) ||
-                (item === null || item === void 0 ? void 0 : item.label) ||
-                (typeof item === "string" || typeof item === "number" ? item : null) }, index));
-    };
+    const width = viewPortDimensions.width || 188;
     return (_jsxs("div", { children: [searchable && (_jsx(SearchInput, { variant: "outlined", size: size, placeholder: "Search", defaultValue: searchValue, onChange: (e) => {
                     if (!manualSearch) {
                         handleSearch(e);
                     }
                     onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.target.value);
-                } })), multiselect && enableSelectAll && selectableItems.length > 0 && (_jsx(MenuItem, { className: "MenuItem", size: size, leftSection: _jsx(CheckBox, { value: allSelectableItemsSelected, partialCheck: someSelectableItemsSelected, size: size, onChange: handleToggleSelectAll }), onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    handleToggleSelectAll();
-                }, children: "Select all" })), isLoading && (_jsxs("div", { style: {
+                } })), isLoading && (_jsxs("div", { style: {
                     display: "flex",
                     flexDirection: "column",
                     gap: "10px",
@@ -349,15 +218,40 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
                     alignItems: "center",
                     height: "100%",
                     padding: "10px 0",
-                }, children: [_jsx("div", { style: { fontSize: `${sizeTokens.supportingFontSize}px` }, children: "Loading..." }), _jsx(Loader, {})] })), !isLoading && (_jsx(ListViewPort, { ref: targetElm, children: dynamicListEnabled ? (_jsx(VariableSizeList, { ref: variableListRef, itemData: displayItems, overscanCount: overscanCount, height: height, width: width, itemCount: itemCount, itemSize: getDynamicItemSize, outerElementType: ListScroller, outerRef: listElm, children: ({ data, index, style }) => {
-                        const item = data === null || data === void 0 ? void 0 : data[index];
-                        if (!item)
-                            return null;
-                        return (_jsx(MeasuredRow, { index: index, setItemSize: setItemSize, style: style, children: renderDisplayItem(item, index) }));
-                    } })) : (_jsx(FixedSizeList, { ref: fixedListRef, itemData: displayItems, overscanCount: overscanCount, height: height, width: width, itemCount: itemCount, itemSize: itemHeight, outerElementType: ListScroller, outerRef: listElm, children: ({ data, index, style }) => {
+                }, children: [_jsx("div", { style: { fontSize: "12px" }, children: "Loading..." }), _jsx(Loader, {})] })), !isLoading && (_jsx(ListViewPort, { ref: targetElm, children: _jsx(FixedSizeList, { itemData: displayItems, overscanCount: overscanCount, height: height, width: width, itemCount: itemCount, itemSize: itemHeight, outerRef: listElm, children: ({ data, index, style }) => {
                         const item = data === null || data === void 0 ? void 0 : data[index];
                         if (!item)
                             return null;
-                        return renderDisplayItem(item, index, style);
-                    } })) }))] }));
+                        if (item._isGroupHeader) {
+                            return (_jsxs(GroupHeader, { "$size": size, style: style, children: [_jsx("span", { className: "group-line" }), _jsx("span", { className: "group-label", children: item.label }), _jsx("span", { className: "group-line" })] }, item.value));
+                        }
+                        if (item._isAddNew) {
+                            return (_jsx(MenuItem, { className: "MenuItem", size: size, leftSection: _jsx(Plus, { size: 14 }), onClick: (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    onAddNew === null || onAddNew === void 0 ? void 0 : onAddNew(item.value);
+                                }, style: style, children: item.label }, "__add_new__"));
+                        }
+                        const isSelected = !!(selected === null || selected === void 0 ? void 0 : selected.find((s) => {
+                            return isObjectArray ? (s === null || s === void 0 ? void 0 : s.value) === (item === null || item === void 0 ? void 0 : item.value) : s === item;
+                        }));
+                        if (item.items) {
+                            return (_jsx(DropDownMenu, { data: item.items, size: size, buttonProps: Object.assign({ style }, item), disabled: item.disabled, children: item.label }));
+                        }
+                        return (_jsx(MenuItem, { className: "MenuItem", itemData: item, TooltipContent: TooltipContent, "data-selected": isSelected, "data-disabled": item.disabled, disabled: item.disabled, leftSection: multiselect ? (_jsxs(_Fragment, { children: [_jsx(CheckBox, { value: isSelected, size: size, onChange: (newValue) => {
+                                            var _a;
+                                            newValue
+                                                ? handleAddItem(item)
+                                                : handleRemoveItem(item);
+                                            (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
+                                        } }), (item === null || item === void 0 ? void 0 : item.leftSection) || null] })) : ((item === null || item === void 0 ? void 0 : item.leftSection) || null), rightSection: item === null || item === void 0 ? void 0 : item.rightSection, multiselect: multiselect, size: size, title: !TooltipContent ? item === null || item === void 0 ? void 0 : item.label : undefined, onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                handleItemClick(item, isSelected);
+                            }, style: style, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) ||
+                                (item === null || item === void 0 ? void 0 : item.label) ||
+                                (typeof item === "string" || typeof item === "number"
+                                    ? item
+                                    : null) }, index));
+                    } }) }))] }));
 };

package/dist/DropDownMenu/components/StyledContent.js

@@ -7,7 +7,8 @@ export const StyledContent = styled.div `
   overflow-y: hidden;
   overflow-x: hidden;
 
-  width: var(--mfui-dropdown-reference-width, 150px);
+  width: 200px;
+  min-width: 150px;
   max-width: 400px;
   max-height: ${({ maxDropdownHeight }) => Number.isInteger(maxDropdownHeight)
     ? `${maxDropdownHeight}px`

package/dist/DropDownMenu/components/StyledFloatContainer.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
 export const StyledFloatContainer = styled.div `
-  z-index: 100002;
+  z-index: 1500;
   outline: none;
 `;

package/dist/DropDownMenu/types.d.ts

@@ -31,7 +31,6 @@ export type DropDownMenuProps = {
     defaultValue?: DropDownItem[];
     value?: DropDownItem[];
     multiselect?: boolean;
-    enableSelectAll?: boolean;
     size?: Size;
     title?: string;
     TooltipContent?: ComponentType<any>;
@@ -45,7 +44,6 @@ export type DropDownMenuProps = {
     searchable?: boolean;
     manualSearch?: boolean;
     grouped?: boolean;
-    dynamicOptionHeight?: boolean;
     onAddNew?: (value: string) => void;
     loading?: boolean;
     arrow?: boolean;
@@ -79,5 +77,4 @@ export type MenuProps = {
     TooltipContent?: ComponentType<any>;
     dropDownProps?: ComponentPropsWithoutRef<typeof StyledContent>;
     disabled?: boolean;
-    dynamicOptionHeight?: boolean;
 };