@monolith-forensics/monolith-ui 1.2.91 → 1.2.93

package/dist/DropDownMenu/DropDownMenu.js

@@ -1,284 +1,12 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, FloatingTree, autoUpdate, flip, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTypeahead, } from "@floating-ui/react";
-import React, { forwardRef, useRef, useState, } from "react";
-import styled from "styled-components";
-import { Button, Tooltip, CheckBox, Input } from "..";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
-import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
-const StyledFloatContainer = styled.div `
-  z-index: 1500;
-  outline: none;
-`;
-const StyledInnerItemContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  overflow: hidden;
-`;
-const MenuScrollContainer = styled.div `
-  overflow-y: auto;
-
-  &[data-scroll-active="true"] {
-    padding-right: 5px;
-  }
-`;
-const SearchInput = forwardRef((props, ref) => _jsx(Input, Object.assign({ ref: ref, style: { marginBottom: 8 } }, props)));
-const MenuItem = styled(React.forwardRef((_a, forwardedRef) => {
-    var { label, children, disabled, multiselect } = _a, props = __rest(_a, ["label", "children", "disabled", "multiselect"]);
-    const menu = React.useContext(MenuContext);
-    const item = useListItem({ label: disabled ? null : label });
-    const tree = useFloatingTree();
-    const isActive = item.index === menu.activeIndex;
-    return (_jsx(Button, Object.assign({}, props, { ref: useMergeRefs([item.ref, forwardedRef]), type: "button", role: "menuitem", tabIndex: isActive ? 0 : -1, disabled: disabled }, menu.getItemProps({
-        onClick(event) {
-            var _a;
-            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
-            tree === null || tree === void 0 ? void 0 : tree.events.emit("click");
-        },
-        onFocus(event) {
-            var _a;
-            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
-            menu.setHasFocusInside(true);
-        },
-    }), { children: label || children })));
-})) `
-  &.MenuItem {
-    color: ${(props) => props.theme.palette.text.primary};
-    border-radius: 3px;
-    display: flex;
-    flex-direction: row;
-    gap: 5px;
-    align-items: center;
-    min-height: 25px;
-    width: 100%;
-    min-width: fit-content;
-    height: auto;
-    position: relative;
-    user-select: none;
-    outline: none;
-
-    border: none;
-
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    cursor: pointer;
-    text-decoration: none;
-
-    font-weight: normal;
-    letter-spacing: normal;
-
-    font-size: ${({ size }) => size === "xs"
-    ? "11px"
-    : size === "sm"
-        ? "13px"
-        : size === "md"
-            ? "15px"
-            : size === "lg"
-                ? "17px"
-                : size === "xl"
-                    ? "19px"
-                    : "11px"};
-
-    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] {
-      color: ${(props) => props.theme.palette.text.secondary};
-      pointer-events: "none";
-    }
-
-    &:hover {
-      background-color: ${(props) => props.theme.palette.action.hover};
-      color: ${(props) => props.theme.palette.text.primary};
-    }
-
-    &:active {
-      translate: none;
-    }
-
-    .button-label {
-      display: flex;
-      flex-direction: row;
-      gap: 5px;
-      align-items: center;
-    }
-  }
-`;
-const StyledContent = styled.div `
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  overflow-y: hidden;
-  overflow-x: hidden;
-
-  min-width: 150px;
-  max-width: 400px;
-  max-height: ${({ maxDropdownHeight }) => Number.isInteger(maxDropdownHeight)
-    ? `${maxDropdownHeight}px`
-    : maxDropdownHeight || "250px"};
-
-  background-color: ${(props) => props.theme.palette.background.default};
-  background-color: ${({ theme, variant }) => {
-    switch (variant) {
-        case "filled":
-            return theme.palette.input.background;
-        case "outlined":
-            return theme.palette.input.background;
-        case "text":
-            return "transparent";
-        default:
-            return theme.palette.input.background;
-    }
-}};
-
-  border-radius: 5px;
-  border: 1px solid ${(props) => props.theme.palette.divider};
-  outline: none;
-  padding: 5px;
-  animation-duration: 400ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  will-change: transform, opacity;
-
-  &[data-empty="true"] {
-    display: none;
-  }
-`;
-const MenuContext = React.createContext({
-    getItemProps: () => ({}),
-    activeIndex: null,
-    setActiveIndex: () => { },
-    setHasFocusInside: () => { },
-    isOpen: false,
-});
-const MenuComponent = React.forwardRef((_a, forwardedRef) => {
-    var { children, label, arrow, size, buttonSize, variant, buttonProps, buttonRender, multiselect } = _a, props = __rest(_a, ["children", "label", "arrow", "size", "buttonSize", "variant", "buttonProps", "buttonRender", "multiselect"]);
-    const [isOpen, setIsOpen] = React.useState(false);
-    const [hasFocusInside, setHasFocusInside] = React.useState(false);
-    const [activeIndex, setActiveIndex] = React.useState(null);
-    const elementsRef = React.useRef([]);
-    const labelsRef = React.useRef([]);
-    const parent = React.useContext(MenuContext);
-    const tree = useFloatingTree();
-    const nodeId = useFloatingNodeId();
-    const parentId = useFloatingParentNodeId();
-    const item = useListItem();
-    const isNested = parentId != null;
-    const { floatingStyles, refs, context } = useFloating({
-        nodeId,
-        open: isOpen,
-        onOpenChange: setIsOpen,
-        placement: isNested ? "right-start" : "bottom-start",
-        middleware: [
-            offset({
-                mainAxis: isNested ? 0 : 2,
-                alignmentAxis: isNested ? -4 : 0,
-            }),
-            flip(),
-            shift(),
-        ],
-        whileElementsMounted: autoUpdate,
-    });
-    const hover = useHover(context, {
-        enabled: isNested,
-        delay: { open: 75 },
-        handleClose: safePolygon({ blockPointerEvents: true }),
-    });
-    const click = useClick(context, {
-        event: "click",
-        toggle: !isNested,
-        ignoreMouse: isNested,
-    });
-    const role = useRole(context, { role: "menu" });
-    const dismiss = useDismiss(context, { bubbles: true });
-    const listNavigation = useListNavigation(context, {
-        listRef: elementsRef,
-        activeIndex,
-        nested: isNested,
-        onNavigate: setActiveIndex,
-    });
-    const typeahead = useTypeahead(context, {
-        listRef: labelsRef,
-        onMatch: isOpen ? setActiveIndex : undefined,
-        activeIndex,
-    });
-    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([hover, click, role, dismiss]);
-    // Event emitter allows you to communicate across tree components.
-    // This effect closes all menus when an item gets clicked anywhere
-    // in the tree.
-    React.useEffect(() => {
-        if (!tree)
-            return;
-        function handleTreeClick() {
-            if (!multiselect) {
-                setIsOpen(false);
-            }
-        }
-        function onSubMenuOpen(event) {
-            if (event.nodeId !== nodeId && event.parentId === parentId) {
-                setIsOpen(false);
-            }
-        }
-        tree.events.on("click", handleTreeClick);
-        tree.events.on("menuopen", onSubMenuOpen);
-        return () => {
-            tree.events.off("click", handleTreeClick);
-            tree.events.off("menuopen", onSubMenuOpen);
-        };
-    }, [tree, nodeId, parentId]);
-    React.useEffect(() => {
-        if (isOpen && tree) {
-            tree.events.emit("menuopen", { parentId, nodeId });
-        }
-    }, [tree, isOpen, nodeId, parentId]);
-    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) {
-                    var _a;
-                    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
-                    setHasFocusInside(false);
-                    parent.setHasFocusInside(true);
-                } }))), { rightSection: arrow ? (_jsx(ChevronDownIcon, { size: 12 })) : isNested ? (_jsx(ChevronRightIcon, { size: 12 })) : null, size: buttonSize, variant: variant, selected: isOpen }, buttonProps, { children: label })), _jsx(MenuContext.Provider, { value: {
-                    activeIndex,
-                    setActiveIndex,
-                    getItemProps,
-                    setHasFocusInside,
-                    isOpen,
-                }, children: _jsx(FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: isOpen && (_jsx(FloatingPortal, { children: _jsx(FloatingFocusManager, { context: context, modal: false, initialFocus: isNested ? -1 : 0, returnFocus: !isNested, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, className: "Menu", style: floatingStyles }, getFloatingProps(), { children: _jsx(StyledContent, { className: "mfFloatingContent", children: children }) })) }) })) }) })] }));
-});
-export const Menu = React.forwardRef((props, ref) => {
-    const parentId = useFloatingParentNodeId();
-    if (parentId === null) {
-        return (_jsx(FloatingTree, { children: _jsx(MenuComponent, Object.assign({}, props, { ref: ref })) }));
-    }
-    return _jsx(MenuComponent, Object.assign({}, props, { ref: ref }));
-});
-const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, searchable, loading, onScroll, multiselect, renderOption, onItemSelect, onChange, buttonProps, TooltipContent, }) => {
-    var _a, _b, _c;
+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, }) => {
+    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 scrollContainerRef = useRef(null);
     const searchInputRef = useRef(null);
     const handleSearch = useDebouncedCallback((e) => {
         setSearchValue(e.target.value);
@@ -299,43 +27,9 @@ const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, sear
             return newSelected;
         });
     };
-    const scrollActive = (((_b = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) || 0) >
-        (((_c = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0);
-    return (_jsx(Menu, { label: children, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, children: _jsxs(StyledInnerItemContainer, { children: [loading && _jsx("div", { children: "Loading..." }), searchable && (_jsx(SearchInput, { ref: searchInputRef, variant: "outlined", size: size, placeholder: "Search", onChange: handleSearch })), _jsx(MenuScrollContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: !loading &&
-                        data
-                            .filter((item) => {
-                            var _a, _b, _c;
-                            if (!searchable)
-                                return true;
-                            if (isObjectArray) {
-                                return (((_a = item === null || item === void 0 ? void 0 : item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchValue.toLowerCase())) ||
-                                    ((_b = item === null || item === void 0 ? void 0 : item.value) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchValue.toLowerCase())));
-                            }
-                            return (_c = item.toLowerCase) === null || _c === void 0 ? void 0 : _c.call(item).includes(searchValue.toLowerCase());
-                        })
-                            .map((item, index) => {
-                            const isSelected = !!(selected === null || selected === void 0 ? void 0 : selected.find((s) => 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, children: item.label }));
-                            }
-                            return (_jsx(Tooltip, { content: TooltipContent ? (_jsx(TooltipContent, { data: item.data })) : null, side: "left", children: _jsxs(MenuItem, { className: "MenuItem", "data-selected": isSelected, leftSection: multiselect && (_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);
-                                        } })), multiselect: multiselect, size: size, onClick: (e) => {
-                                        var _a;
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        if (multiselect) {
-                                            isSelected
-                                                ? handleRemoveItem(item)
-                                                : 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);
-                                    }, children: [(item === null || item === void 0 ? void 0 : item.leftSection) || null, _jsx(_Fragment, { children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (item === null || item === void 0 ? void 0 : item.label) || item }), (item === null || item === void 0 ? void 0 : item.rightSection) || null] }, index) }, index));
-                        }) })] }) }));
+    const handleMenuClose = () => {
+        setSearchValue("");
+    };
+    return (_jsx(Menu, { label: children, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, onMenuClose: handleMenuClose, dropDownProps: dropDownProps, children: _jsxs(StyledInnerItemContainer, { children: [loading && _jsx("div", { children: "Loading..." }), searchable && (_jsx(SearchInput, { ref: searchInputRef, variant: "outlined", size: size, placeholder: "Search", defaultValue: searchValue, onChange: handleSearch })), !loading && (_jsx(MenuItemList, { menuItems: data, searchable: searchable, searchValue: searchValue, isObjectArray: isObjectArray, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll }))] }) }));
 };
 export default DropDownMenu;

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

@@ -0,0 +1,2 @@
+import { MenuProps } from "../types";
+export declare const Menu: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLProps<HTMLButtonElement> & MenuProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/DropDownMenu/components/Menu.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { FloatingTree, useFloatingParentNodeId } from "@floating-ui/react";
+import { MenuComponent } from "./MenuComponent";
+export const Menu = forwardRef((props, ref) => {
+    const parentId = useFloatingParentNodeId();
+    if (parentId === null) {
+        return (_jsx(FloatingTree, { children: _jsx(MenuComponent, Object.assign({}, props, { ref: ref })) }));
+    }
+    return _jsx(MenuComponent, Object.assign({}, props, { ref: ref }));
+});

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

@@ -0,0 +1,2 @@
+import { MenuProps } from "../types";
+export declare const MenuComponent: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLProps<HTMLButtonElement> & MenuProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/DropDownMenu/components/MenuComponent.js

@@ -0,0 +1,117 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTypeahead, } from "@floating-ui/react";
+import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
+import { MenuContext } from "./MenuContext";
+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"]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [hasFocusInside, setHasFocusInside] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(null);
+    const elementsRef = useRef([]);
+    const labelsRef = useRef([]);
+    const parent = useContext(MenuContext);
+    const tree = useFloatingTree();
+    const nodeId = useFloatingNodeId();
+    const parentId = useFloatingParentNodeId();
+    const item = useListItem();
+    const isNested = parentId != null;
+    const { floatingStyles, refs, context } = useFloating({
+        nodeId,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        placement: isNested ? "right-start" : "bottom-start",
+        middleware: [
+            offset({
+                mainAxis: isNested ? 0 : 2,
+                alignmentAxis: isNested ? -4 : 0,
+            }),
+            flip(),
+            shift(),
+        ],
+        whileElementsMounted: autoUpdate,
+    });
+    const hover = useHover(context, {
+        enabled: isNested,
+        delay: { open: 75 },
+        handleClose: safePolygon({ blockPointerEvents: true }),
+    });
+    const click = useClick(context, {
+        event: "click",
+        toggle: true,
+        ignoreMouse: false,
+    });
+    const role = useRole(context, { role: "menu" });
+    const dismiss = useDismiss(context, { bubbles: true });
+    const listNavigation = useListNavigation(context, {
+        listRef: elementsRef,
+        activeIndex,
+        nested: isNested,
+        onNavigate: setActiveIndex,
+    });
+    const typeahead = useTypeahead(context, {
+        listRef: labelsRef,
+        onMatch: isOpen ? setActiveIndex : undefined,
+        activeIndex,
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([hover, click, role, dismiss]);
+    // Event emitter allows you to communicate across tree components.
+    // This effect closes all menus when an item gets clicked anywhere
+    // in the tree.
+    useEffect(() => {
+        if (!tree)
+            return;
+        function handleTreeClick(event) {
+            if (!multiselect && !event.nested) {
+                setIsOpen(false);
+            }
+        }
+        function onSubMenuOpen(event) {
+            if (event.nodeId !== nodeId && event.parentId === parentId) {
+                setIsOpen(false);
+            }
+        }
+        tree.events.on("click", handleTreeClick);
+        tree.events.on("menuopen", onSubMenuOpen);
+        return () => {
+            tree.events.off("click", handleTreeClick);
+            tree.events.off("menuopen", onSubMenuOpen);
+        };
+    }, [tree, nodeId, parentId]);
+    useEffect(() => {
+        if (isOpen && tree) {
+            tree.events.emit("menuopen", { parentId, nodeId });
+        }
+    }, [tree, isOpen, nodeId, parentId]);
+    useEffect(() => {
+        if (!isOpen) {
+            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) {
+                    var _a;
+                    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                    setHasFocusInside(false);
+                    parent.setHasFocusInside(true);
+                } }))), { 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,
+                    setHasFocusInside,
+                    isOpen,
+                }, children: _jsx(FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: isOpen && (_jsx(FloatingPortal, { children: _jsx(FloatingFocusManager, { context: context, modal: false, initialFocus: isNested ? -1 : 0, returnFocus: !isNested, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, className: "Menu", style: floatingStyles }, getFloatingProps(), { children: _jsx(StyledContent, Object.assign({ className: "mfFloatingContent" }, dropDownProps, { children: children })) })) }) })) }) })] }));
+});

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

@@ -0,0 +1,7 @@
+export declare const MenuContext: import("react").Context<{
+    getItemProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    activeIndex: number | null;
+    setActiveIndex: React.Dispatch<React.SetStateAction<number | null>>;
+    setHasFocusInside: React.Dispatch<React.SetStateAction<boolean>>;
+    isOpen: boolean;
+}>;

package/dist/DropDownMenu/components/MenuContext.js

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+export const MenuContext = createContext({
+    getItemProps: () => ({}),
+    activeIndex: null,
+    setActiveIndex: () => { },
+    setHasFocusInside: () => { },
+    isOpen: false,
+});

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

@@ -0,0 +1,7 @@
+import { MenuProps } from "../types";
+import { ButtonProps } from "../../Button";
+export declare const MenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<MenuProps & ButtonProps & {
+    multiselect?: boolean;
+} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<unknown>, never>> & string & Omit<import("react").ForwardRefExoticComponent<MenuProps & ButtonProps & {
+    multiselect?: boolean;
+} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<unknown>>, keyof import("react").Component<any, {}, any>>;

package/dist/DropDownMenu/components/MenuItem.js

@@ -0,0 +1,99 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useContext } from "react";
+import styled from "styled-components";
+import Button from "../../Button";
+import { useFloatingTree, useListItem, useMergeRefs } from "@floating-ui/react";
+import { MenuContext } from "./MenuContext";
+import Tooltip from "../../Tooltip";
+export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
+    var { label, children, disabled, multiselect, TooltipContent, itemData, nested } = _a, props = __rest(_a, ["label", "children", "disabled", "multiselect", "TooltipContent", "itemData", "nested"]);
+    const menu = useContext(MenuContext);
+    const item = useListItem({ label: disabled ? null : label });
+    const tree = useFloatingTree();
+    const isActive = item.index === menu.activeIndex;
+    return (_jsx(Tooltip, { content: TooltipContent ? _jsx(TooltipContent, { data: itemData }) : null, side: "left", children: _jsx(Button, Object.assign({}, props, { ref: useMergeRefs([item.ref, forwardedRef]), type: "button", role: "menuitem", tabIndex: isActive ? 0 : -1, disabled: disabled, justify: "start" }, menu.getItemProps({
+            onClick(event) {
+                var _a;
+                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                tree === null || tree === void 0 ? void 0 : tree.events.emit("click", { nested });
+            },
+            onFocus(event) {
+                var _a;
+                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                menu.setHasFocusInside(true);
+            },
+        }), { children: label || children })) }));
+})) `
+  &.MenuItem {
+    color: ${(props) => props.theme.palette.text.primary};
+    border-radius: 3px;
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    align-items: center;
+    min-height: 25px;
+    width: 100%;
+    min-width: 100%;
+    height: auto;
+    position: relative;
+    user-select: none;
+    outline: none;
+
+    border: none;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    cursor: pointer;
+    text-decoration: none;
+
+    font-weight: normal;
+    letter-spacing: normal;
+
+    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;
+      color: ${(props) => props.theme.palette.text.secondary};
+      pointer-events: "none";
+    }
+
+    &:hover {
+      background-color: ${(props) => props.theme.palette.action.hover};
+      color: ${(props) => props.theme.palette.text.primary};
+    }
+
+    &:active {
+      translate: none;
+    }
+
+    .button-label {
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+`;

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

@@ -0,0 +1,18 @@
+import { ComponentType } from "react";
+import { Size } from "../../core";
+import { DropDownItem } from "../types";
+export declare const MenuItemList: React.FC<{
+    menuItems: DropDownItem[];
+    searchable?: boolean;
+    searchValue?: string;
+    isObjectArray?: boolean;
+    selected?: DropDownItem[];
+    TooltipContent?: ComponentType<any>;
+    multiselect?: boolean;
+    size?: Size;
+    handleAddItem: (item: DropDownItem) => void;
+    handleRemoveItem: (item: DropDownItem) => void;
+    onItemSelect?: (item: DropDownItem) => void;
+    renderOption?: (item: DropDownItem) => React.ReactNode;
+    onScroll?: (e: Event) => void;
+}>;