@monolith-forensics/monolith-ui 1.2.69 → 1.2.71

package/dist/Button/Button.js

@@ -326,7 +326,7 @@ const StyledLoader = styled.span `
 `;
 const Button = forwardRef((props, ref) => {
     const { children, loading = false, leftSection = null, rightSection = null, href = null, download = null, justify = "center" } = props, other = __rest(props, ["children", "loading", "leftSection", "rightSection", "href", "download", "justify"]);
-    const buttonContent = (_jsx("span", { className: "inner-span", style: { height: "100%", width: "100%", justifyContent: justify }, children: loading ? (_jsx(StyledLoader, { children: _jsx(Loader2Icon, {}) })) : (_jsxs(_Fragment, { children: [leftSection && _jsx("span", { "data-position": "left", children: leftSection }), _jsx("span", { className: "button-label", children: children }), rightSection && _jsx("span", { "data-position": "right", children: rightSection })] })) }));
+    const buttonContent = (_jsx("div", { className: "inner-span", style: { height: "100%", width: "100%", justifyContent: justify }, children: loading ? (_jsx(StyledLoader, { children: _jsx(Loader2Icon, {}) })) : (_jsxs(_Fragment, { children: [leftSection && _jsx("div", { "data-position": "left", children: leftSection }), _jsx("div", { className: "button-label", children: children }), rightSection && _jsx("div", { "data-position": "right", children: rightSection })] })) }));
     return (_jsx(StyledButton, Object.assign({ ref: ref }, other, { children: href ? (_jsx(StyledAnchor, { href: href, download: download, children: buttonContent })) : (buttonContent) })));
 });
 export default Button;

package/dist/DropDownMenu/DropDownMenu.d.ts

@@ -1,46 +1,3 @@
-import React, { ComponentPropsWithoutRef, ComponentType, ReactElement, ReactNode, UIEvent } from "react";
-import { ButtonProps } from "../Button";
-import { Size, Variant } from "../core";
-import { DropDownItem } from "./types";
-interface StyledContentProps {
-    maxDropdownHeight?: number | string;
-    variant?: Variant;
-}
-declare const StyledContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContentProps>> & string;
-export interface DropDownMenuProps {
-    className?: string;
-    children?: ReactNode | string;
-    label?: string;
-    data: DropDownItem[];
-    variant?: Variant;
-    defaultValue?: DropDownItem[];
-    multiselect?: boolean;
-    size?: Size;
-    title?: string;
-    TooltipContent?: ComponentType<any>;
-    renderOption?: (item: DropDownItem) => ReactNode;
-    onChange?: (selected: DropDownItem[], diff: DropDownItem[]) => void;
-    onItemSelect?: (item: DropDownItem) => void;
-    onScroll?: (e: UIEvent<HTMLDivElement>) => void;
-    loading?: boolean;
-    arrow?: boolean;
-    searchable?: boolean;
-    dropDownProps?: ComponentPropsWithoutRef<typeof StyledContent>;
-    buttonRender?: (props: any) => ReactElement;
-    buttonProps?: ButtonProps;
-}
-interface MenuProps {
-    label?: any;
-    nested?: boolean;
-    children?: React.ReactNode;
-    buttonRender?: (props: any) => ReactElement;
-    arrow?: boolean;
-    variant?: Variant;
-    buttonProps?: ButtonProps;
-    size?: Size;
-    buttonSize?: Size;
-    multiselect?: boolean;
-}
-export declare const Menu: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLButtonElement> & MenuProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+import { DropDownMenuProps } from "./types";
 declare const DropDownMenu: ({ data, children, defaultValue, variant, arrow, size, searchable, loading, onScroll, multiselect, renderOption, onItemSelect, onChange, buttonProps, TooltipContent, }: DropDownMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default DropDownMenu;

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, 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");
-        },
-        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 }));
-});
+import { Menu, MenuItemList, SearchInput, StyledInnerItemContainer, } from "./components";
 const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, searchable, loading, onScroll, multiselect, renderOption, onItemSelect, onChange, buttonProps, TooltipContent, }) => {
-    var _a, _b, _c;
+    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, 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 { MenuItem } from "./MenuItem";
+import { StyledFloatContainer } from "./StyledFloatContainer";
+import { StyledContent } from "./StyledContent";
+export const MenuComponent = forwardRef((_a, forwardedRef) => {
+    var { children, label, arrow, size, buttonSize, variant, buttonProps, buttonRender, multiselect, onMenuClose } = _a, props = __rest(_a, ["children", "label", "arrow", "size", "buttonSize", "variant", "buttonProps", "buttonRender", "multiselect", "onMenuClose"]);
+    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: !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.
+    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]);
+    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 }, 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 }) })) }) })) }) })] }));
+});

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,9 @@
+import { MenuProps } from "../types";
+import { ButtonProps } from "../../Button";
+export declare const MenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<MenuProps & ButtonProps & {
+    multiselect?: boolean;
+} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<unknown>, "ref"> & {
+    ref?: ((instance: unknown) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<unknown> | null | undefined;
+}, 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,110 @@
+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 } = _a, props = __rest(_a, ["label", "children", "disabled", "multiselect", "TooltipContent", "itemData"]);
+    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");
+            },
+            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;
+
+    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: 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;
+}>;

package/dist/DropDownMenu/components/MenuItemList.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+import CheckBox from "../../CheckBox";
+import DropDownMenu from "../DropDownMenu";
+import { MenuItem } from "./MenuItem";
+import styled from "styled-components";
+import { FixedSizeList } from "react-window";
+const filterMenuItems = (menuItems, searchValue) => {
+    return menuItems.filter((item) => {
+        var _a, _b, _c;
+        if (item === null || item === void 0 ? void 0 : item.label) {
+            return (((_a = item === null || item === void 0 ? void 0 : item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchValue.toLowerCase())) ||
+                ((_b = item === null || item === void 0 ? void 0 : item.value) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchValue.toLowerCase())));
+        }
+        return (_c = item.toLowerCase) === null || _c === void 0 ? void 0 : _c.call(item).includes(searchValue.toLowerCase());
+    });
+};
+const ListViewPort = styled.div.attrs({ className: "ListViewPort" }) `
+  display: flex;
+  flex-direction: column;
+`;
+export const MenuItemList = ({ menuItems, searchable, searchValue = "", isObjectArray, selected, TooltipContent, multiselect, size, handleAddItem, handleRemoveItem, onItemSelect, renderOption, onScroll, }) => {
+    const abortController = new AbortController();
+    const targetElm = useRef(null);
+    const listElm = useRef(null);
+    const handleItemClick = (item, isSelected) => {
+        var _a;
+        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);
+    };
+    const filteredItems = searchable
+        ? filterMenuItems(menuItems, searchValue)
+        : menuItems;
+    useLayoutEffect(() => {
+        if (listElm.current) {
+            if (onScroll) {
+                listElm.current.addEventListener("scroll", (e) => onScroll === null || onScroll === void 0 ? void 0 : onScroll(e));
+            }
+        }
+        // Event cleanup
+        return () => {
+            abortController.abort();
+        };
+    }, [filteredItems, listElm.current, onScroll]);
+    const overscanCount = 10;
+    const itemHeight = 25;
+    const itemCount = (filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.length) || 0;
+    const height = itemCount * 25 < 200 ? itemCount * 25 : 200;
+    const width = 188;
+    return (_jsx(ListViewPort, { ref: targetElm, children: _jsx(FixedSizeList, { itemData: filteredItems, 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]) || {};
+                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 (_jsxs(MenuItem, { className: "MenuItem", itemData: item, TooltipContent: TooltipContent, "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, title: !TooltipContent ? item === null || item === void 0 ? void 0 : item.label : undefined, onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleItemClick(item, isSelected);
+                    }, style: style, 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) ||
+                                (typeof item === "string" || typeof item === "number"
+                                    ? item
+                                    : null) }), (item === null || item === void 0 ? void 0 : item.rightSection) || null] }, index));
+            } }) }));
+};

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

@@ -0,0 +1 @@
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("../../Input/Input").InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref">, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/DropDownMenu/components/SearchInput.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Input from "../../Input";
+export const SearchInput = forwardRef((props, ref) => _jsx(Input, Object.assign({ ref: ref, style: { marginBottom: 8 } }, props)));

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

@@ -0,0 +1,2 @@
+import { StyledContentProps } from "../types";
+export declare const StyledContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContentProps>> & string;

package/dist/DropDownMenu/components/StyledContent.js

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+export const StyledContent = styled.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow-y: hidden;
+  overflow-x: hidden;
+
+  width: 200px;
+  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;
+  }
+`;

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

@@ -0,0 +1 @@
+export declare const StyledFloatContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/DropDownMenu/components/StyledFloatContainer.js

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

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

@@ -0,0 +1,3 @@
+export declare const StyledInnerItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;

package/dist/DropDownMenu/components/StyledInnerItemContainer.js

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+export const StyledInnerItemContainer = styled.div.attrs({
+    className: "inner-item-container",
+}) `
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  overflow: hidden;
+`;

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

@@ -0,0 +1,9 @@
+export * from "./SearchInput";
+export * from "./StyledContent";
+export * from "./StyledFloatContainer";
+export * from "./StyledInnerItemContainer";
+export * from "./MenuItem";
+export * from "./MenuContext";
+export * from "./MenuComponent";
+export * from "./Menu";
+export * from "./MenuItemList";

package/dist/DropDownMenu/components/index.js

@@ -0,0 +1,9 @@
+export * from "./SearchInput";
+export * from "./StyledContent";
+export * from "./StyledFloatContainer";
+export * from "./StyledInnerItemContainer";
+export * from "./MenuItem";
+export * from "./MenuContext";
+export * from "./MenuComponent";
+export * from "./Menu";
+export * from "./MenuItemList";

package/dist/DropDownMenu/index.d.ts

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

package/dist/DropDownMenu/index.js

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

package/dist/DropDownMenu/types.d.ts

@@ -1,3 +1,8 @@
+import { ComponentPropsWithoutRef, ComponentType, ReactElement, ReactNode } from "react";
+import { Size, Variant } from "../core";
+import Input from "../Input";
+import { ButtonProps } from "../Button";
+import { StyledContent } from "./components";
 export type DropDownItem = {
     toLowerCase?: () => string;
     label: string;
@@ -8,3 +13,45 @@ export type DropDownItem = {
     leftSection?: React.ReactNode;
     rightSection?: React.ReactNode;
 };
+export type SearchInputProps = React.ComponentPropsWithoutRef<typeof Input>;
+export interface StyledContentProps {
+    maxDropdownHeight?: number | string;
+    variant?: Variant;
+}
+export interface DropDownMenuProps {
+    className?: string;
+    children?: ReactNode | string;
+    label?: string;
+    data: DropDownItem[];
+    variant?: Variant;
+    defaultValue?: DropDownItem[];
+    multiselect?: boolean;
+    size?: Size;
+    title?: string;
+    TooltipContent?: ComponentType<any>;
+    renderOption?: (item: DropDownItem) => ReactNode;
+    onChange?: (selected: DropDownItem[], diff: DropDownItem[]) => void;
+    onItemSelect?: (item: DropDownItem) => void;
+    onScroll?: (e: Event) => void;
+    loading?: boolean;
+    arrow?: boolean;
+    searchable?: boolean;
+    dropDownProps?: ComponentPropsWithoutRef<typeof StyledContent>;
+    buttonRender?: (props: any) => ReactElement;
+    buttonProps?: ButtonProps;
+}
+export interface MenuProps {
+    label?: any;
+    itemData?: any;
+    nested?: boolean;
+    children?: React.ReactNode;
+    buttonRender?: (props: any) => ReactElement;
+    arrow?: boolean;
+    variant?: Variant;
+    buttonProps?: ButtonProps;
+    size?: Size;
+    buttonSize?: Size;
+    multiselect?: boolean;
+    onMenuClose?: () => void;
+    TooltipContent?: ComponentType<any>;
+}

package/dist/RichTextEditor/Components/BubbleMenu.d.ts

@@ -1,9 +1,8 @@
 import Extensions from "../Enums/Extensions";
-import { DropDownItem } from "../../DropDownMenu";
+import { DropDownItem, DropDownMenuProps } from "../../DropDownMenu";
 import { ReactElement } from "react";
 import { ButtonProps } from "../../Button";
 import { Editor } from "@tiptap/react";
-import { DropDownMenuProps } from "../../DropDownMenu/DropDownMenu";
 export interface BubbleMenuProps {
     className?: string;
     editor: Editor;

package/dist/RichTextEditor/Toolbar/Toolbar.d.ts

@@ -1,7 +1,7 @@
 import { Editor } from "@tiptap/react";
 import Controls from "../Enums/Controls";
+import { DropDownMenuProps } from "../../DropDownMenu";
 import { ReactNode } from "react";
-import { DropDownMenuProps } from "../../DropDownMenu/DropDownMenu";
 import { ButtonProps } from "../../Button";
 export type CustomItem = {
     type: "button";

package/dist/Table/TableHeader.js

@@ -8,6 +8,12 @@ import CheckBox from "../CheckBox";
 import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
 import resolveColumnReorder from "./Utils/resolveColumnReorder";
 import TableDefaults from "./TableDefaults";
+import styled from "styled-components";
+const StyledCaption = styled.span `
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
 const TableHeader = ({ headerRowElm }) => {
     var _a;
     const { columnState, sortState, setColumnState, onColumnResize, handleColumnReorder, enableColumnReorder, handleColumnHeaderClick, enableColumnResize, headerRowHeight, enableActionButton, enableSelection, selectionState, disableSelectAll, selectAllRows, clearSelections, compactState, } = useTable();
@@ -86,8 +92,8 @@ const TableHeader = ({ headerRowElm }) => {
                                     // console.log("onResize", e);
                                 }, onResizeFinished: (e) => {
                                     handleResize(e);
-                                } })), _jsxs(InnerCellContent, { className: "mfui inner-cell-content", children: [column.caption, (sortState === null || sortState === void 0 ? void 0 : sortState.dataField) === column.dataField &&
-                                        (sortState.dir === "asc" ? (_jsx(ArrowUpIcon, { size: 14 })) : (_jsx(ArrowDownIcon, { size: 14 })))] })] }), column.columnId));
+                                } })), _jsxs(InnerCellContent, { className: "mfui inner-cell-content", children: [_jsx(StyledCaption, { style: { flex: 1 }, children: column.caption }), _jsx(StyledCaption, { children: (sortState === null || sortState === void 0 ? void 0 : sortState.dataField) === column.dataField &&
+                                            (sortState.dir === "asc" ? (_jsx(ArrowUpIcon, { size: 14 })) : (_jsx(ArrowDownIcon, { size: 14 }))) })] })] }), column.columnId));
                 })] }) }));
 };
 export default TableHeader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.2.69",
+  "version": "1.2.71",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",