@monolith-forensics/monolith-ui 1.1.49 → 1.1.51

package/dist/Button/Button.js

@@ -203,6 +203,8 @@ const StyledButton = styled.button `
 
   [data-position="right"] {
     margin-inline-start: 6px;
+    padding-inline-start: 6px;
+    margin-left: auto;
     display: flex;
     align-items: center;
   }
@@ -323,7 +325,7 @@ const StyledLoader = styled.span `
 `;
 const Button = forwardRef((props, ref) => {
     const { children, loading = false, leftSection = null, rightSection = null, href = null, download = null } = props, other = __rest(props, ["children", "loading", "leftSection", "rightSection", "href", "download"]);
-    const buttonContent = (_jsx("span", { className: "inner-span", style: { height: "100%" }, 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("span", { className: "inner-span", style: { height: "100%", width: "100%" }, 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 })] })) }));
     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,4 +1,4 @@
-import { ComponentPropsWithoutRef, ComponentType, ReactElement, ReactNode, UIEvent } from "react";
+import React, { ComponentPropsWithoutRef, ComponentType, ReactElement, ReactNode, UIEvent } from "react";
 import { ButtonProps } from "../Button";
 import { Size, Variant } from "../core";
 import { DropDownItem } from "./types";
@@ -6,11 +6,12 @@ interface StyledContentProps {
     maxDropdownHeight?: number | string;
     variant?: Variant;
 }
-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;
+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;
-    data?: DropDownItem[];
+    label?: string;
+    data: DropDownItem[];
     variant?: Variant;
     defaultValue?: DropDownItem[];
     multiselect?: boolean;
@@ -28,5 +29,18 @@ export interface DropDownMenuProps {
     buttonRender?: (props: any) => ReactElement;
     buttonProps?: ButtonProps;
 }
-declare const DropDownMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<DropDownMenuProps, never>> & string & Omit<({ className, children, data, variant, defaultValue, multiselect, size, TooltipContent, renderOption, onChange, onItemSelect, onScroll, loading, arrow, searchable, dropDownProps, buttonRender, buttonProps, }: DropDownMenuProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+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>>;
+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,12 +1,24 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { FloatingFocusManager, FloatingPortal, flip, offset, useFloating, } from "@floating-ui/react";
-import { forwardRef, useEffect, useRef, useState, } from "react";
+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 { useDebouncedCallback } from "use-debounce";
-import { ChevronDownIcon } from "lucide-react";
+import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 const StyledFloatContainer = styled.div `
   z-index: 1500;
+  outline: none;
 `;
 const StyledInnerItemContainer = styled.div `
   overflow-y: auto;
@@ -16,28 +28,53 @@ const StyledInnerItemContainer = styled.div `
   }
 `;
 const SearchInput = forwardRef((props, ref) => _jsx(Input, Object.assign({ ref: ref, style: { marginBottom: 8 } }, props)));
-const StyledItem = styled.div `
-  color: ${(props) => props.theme.palette.text.primary};
-  border-radius: 3px;
-  display: flex;
-  flex-direction: row;
-  gap: 5px;
-  align-items: center;
-  min-height: 25px;
-  padding: 7px 10px;
-  position: relative;
-  user-select: none;
-  outline: none;
+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;
 
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+    border: none;
 
-  cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
-  font-family: ${({ theme }) => theme.typography.fontFamily};
+    cursor: pointer;
+    text-decoration: none;
 
-  font-size: ${({ size }) => size === "xs"
+    font-weight: normal;
+    letter-spacing: normal;
+
+    font-size: ${({ size }) => size === "xs"
     ? "11px"
     : size === "sm"
         ? "13px"
@@ -49,7 +86,7 @@ const StyledItem = styled.div `
                     ? "19px"
                     : "11px"};
 
-  padding: ${({ size }) => size === "xs"
+    padding: ${({ size }) => size === "xs"
     ? "2px 8px"
     : size === "sm"
         ? "4px 10px"
@@ -61,14 +98,26 @@ const StyledItem = styled.div `
                     ? "6px 16px"
                     : "2px 8px"};
 
-  &[data-disabled] {
-    color: ${(props) => props.theme.palette.text.secondary};
-    pointer-events: "none";
-  }
+    &[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};
+    &: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 `
@@ -79,6 +128,8 @@ const StyledContent = styled.div `
   overflow-y: hidden;
   overflow-x: hidden;
 
+  min-width: 150px;
+  max-width: 400px;
   max-height: ${({ maxDropdownHeight }) => Number.isInteger(maxDropdownHeight)
     ? `${maxDropdownHeight}px`
     : maxDropdownHeight || "250px"};
@@ -99,6 +150,7 @@ const StyledContent = styled.div `
 
   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);
@@ -108,22 +160,123 @@ const StyledContent = styled.div `
     display: none;
   }
 `;
-const DropDownMenu = styled(({ className, children, data = [], variant = "outlined", defaultValue, multiselect = false, size = "xs", TooltipContent, renderOption, onChange, onItemSelect, onScroll, loading, arrow, searchable, dropDownProps, buttonRender, buttonProps, }) => {
+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" : "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;
     const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
-    const [isOpen, setIsOpen] = useState(false);
     const [selected, setSelected] = useState(defaultValue || []);
     const [searchValue, setSearchValue] = useState("");
     const scrollContainerRef = useRef(null);
     const searchInputRef = useRef(null);
-    const { refs, floatingStyles, context } = useFloating({
-        open: isOpen,
-        onOpenChange: setIsOpen,
-        placement: "bottom-start",
-        strategy: "absolute",
-        // Handle collisions with the viewport
-        middleware: [flip(), offset(3)],
-    });
+    const handleSearch = useDebouncedCallback((e) => {
+        setSearchValue(e.target.value);
+    }, 150);
     const handleAddItem = (item) => {
         setSelected((prev) => {
             let newSelected = [...prev, item];
@@ -140,76 +293,37 @@ const DropDownMenu = styled(({ className, children, data = [], variant = "outlin
             return newSelected;
         });
     };
-    const handleSearch = useDebouncedCallback((e) => {
-        setSearchValue(e.target.value);
-    }, 150);
-    // Close on outside click
-    useEffect(() => {
-        const close = (e) => {
-            var _a, _b, _c, _d;
-            const target = e.target;
-            const referenceElement = (_a = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _a === void 0 ? void 0 : _a.current;
-            const floatingElement = (_b = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _b === void 0 ? void 0 : _b.current;
-            if (floatingElement && // Check if the floating element exists
-                e.target !== referenceElement && // Check if the target is not the reference (input)
-                !((_c = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.contains) === null || _c === void 0 ? void 0 : _c.call(referenceElement, target)) && // Check if the target is not inside the reference (input)
-                !((_d = floatingElement === null || floatingElement === void 0 ? void 0 : floatingElement.contains) === null || _d === void 0 ? void 0 : _d.call(floatingElement, target)) // Check if the target is not inside the floating element (content)
-            ) {
-                setIsOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", close);
-        return () => document.removeEventListener("mousdown", close);
-    }, [refs.floating, refs.reference]);
-    useEffect(() => {
-        var _a, _b;
-        if (isOpen && searchable) {
-            (_b = (_a = searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-        }
-        if (!isOpen) {
-            setSearchValue("");
-        }
-    }, [isOpen, searchable]);
     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 (_jsxs("div", { className: className + " mfDropDownMenu", children: [buttonRender ? (buttonRender({
-                onClick: () => setIsOpen(!isOpen),
-                buttonRef: refs.setReference,
-                isOpen,
-            })) : (_jsx(Button, Object.assign({ ref: (ref) => {
-                    refs.setReference(ref);
-                }, onClick: () => setIsOpen(!isOpen), rightSection: arrow ? _jsx(ChevronDownIcon, { size: 12 }) : null, size: size, variant: variant, selected: isOpen }, buttonProps, { children: children }))), isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(FloatingFocusManager, { context: context, modal: false, children: _jsx(StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, className: "mfFloating", children: _jsx(StyledContent, Object.assign({ className: "mfFloatingContent", style: { width: 150, maxWidth: 400 } }, dropDownProps, { children: _jsxs(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: [loading && _jsx("div", { children: "Loading..." }), searchable && (_jsx(SearchInput, { ref: searchInputRef, variant: "outlined", size: size, placeholder: "Search", onChange: handleSearch })), !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));
-                                            return (_jsx(Tooltip, { content: TooltipContent ? (_jsx(TooltipContent, { data: item.data })) : null, side: "left", children: _jsxs(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
-                                                        var _a;
-                                                        e.preventDefault();
-                                                        e.stopPropagation();
-                                                        if (multiselect) {
-                                                            isSelected
-                                                                ? handleRemoveItem(item)
-                                                                : handleAddItem(item);
-                                                        }
-                                                        else {
-                                                            setIsOpen(false);
-                                                        }
-                                                        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);
-                                                    }, "data-selected": isSelected, size: size, children: [multiselect && _jsx(CheckBox, { value: isSelected }), (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));
-                                        })] }) })) }) }) }))] }));
-}) ``;
+    return (_jsx(Menu, { label: children, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, children: _jsxs(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: [loading && _jsx("div", { children: "Loading..." }), searchable && (_jsx(SearchInput, { ref: searchInputRef, variant: "outlined", size: size, placeholder: "Search", onChange: handleSearch })), !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 }), 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));
+                    })] }) }));
+};
 export default DropDownMenu;

package/dist/DropDownMenu/types.d.ts

@@ -4,6 +4,7 @@ export type DropDownItem = {
     value: string;
     onClick?: (args: any) => void;
     data?: any;
+    items?: DropDownItem[];
     leftSection?: React.ReactNode;
     rightSection?: React.ReactNode;
 };

package/dist/MonolithUIProvider/GlobalStyle.js

@@ -1,7 +1,9 @@
 import { createGlobalStyle } from "styled-components";
 const GlobalStyle = createGlobalStyle `
+
     * {
         box-sizing: border-box;
+        -webkit-font-smoothing: antialiased;
     }
     
     body {

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

@@ -20,15 +20,25 @@ interface BubbleMenuDropDownItem extends DropDownItem {
 export type BubbleItem = {
     name: Extensions | string;
     icon?: React.FC<any>;
-    type?: "button" | "menu";
+    type: "menu";
     label?: string | Element;
-    items?: BubbleMenuDropDownItem[];
+    items: BubbleMenuDropDownItem[];
     arrow?: boolean;
     isActive?: (editor: Editor) => boolean;
     buttonRender?: (props: any) => ReactElement;
     buttonProps?: ButtonProps;
     dropDownProps?: DropDownMenuProps;
     onClick?: (editor: Editor) => void;
+} | {
+    name: Extensions | string;
+    icon?: React.FC<any>;
+    type: "button";
+    label?: string | Element;
+    arrow?: boolean;
+    isActive?: (editor: Editor) => boolean;
+    buttonRender?: (props: any) => ReactElement;
+    buttonProps?: ButtonProps;
+    onClick?: (editor: Editor) => void;
 };
 declare const BubbleMenu: React.FC<BubbleMenuProps>;
 export default BubbleMenu;

package/dist/RichTextEditor/Contexts/RichTextEditorContext.d.ts

@@ -0,0 +1,5 @@
+declare const RichTextEditorContext: import("react").Context<{
+    font: string;
+    setFont: (font: string) => void;
+}>;
+export default RichTextEditorContext;

package/dist/RichTextEditor/Contexts/RichTextEditorContext.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+import Fonts from "../Enums/Fonts";
+const RichTextEditorContext = createContext({
+    font: Fonts.DEFAULT,
+    setFont: (font) => { },
+});
+export default RichTextEditorContext;

package/dist/RichTextEditor/Enums/Controls.d.ts

@@ -0,0 +1,20 @@
+declare enum Controls {
+    UNDO = "undo",
+    REDO = "redo",
+    BOLD = "bold",
+    ITALIC = "italic",
+    UNDERLINE = "underline",
+    STRIKE = "strike",
+    HEADING_1 = "heading_1",
+    HEADING_2 = "heading_2",
+    HEADING_3 = "heading_3",
+    HEADING_4 = "heading_4",
+    BULLET_LIST = "bulletList",
+    ORDERED_LIST = "orderedList",
+    TEXT_ALIGN_LEFT = "textAlignLeft",
+    TEXT_ALIGN_CENTER = "textAlignCenter",
+    TEXT_ALIGN_RIGHT = "textAlignRight",
+    TEXT_ALIGN_JUSTIFIED = "textAlignJustified",
+    FONT = "font"
+}
+export default Controls;

package/dist/RichTextEditor/Enums/Controls.js

@@ -0,0 +1,21 @@
+var Controls;
+(function (Controls) {
+    Controls["UNDO"] = "undo";
+    Controls["REDO"] = "redo";
+    Controls["BOLD"] = "bold";
+    Controls["ITALIC"] = "italic";
+    Controls["UNDERLINE"] = "underline";
+    Controls["STRIKE"] = "strike";
+    Controls["HEADING_1"] = "heading_1";
+    Controls["HEADING_2"] = "heading_2";
+    Controls["HEADING_3"] = "heading_3";
+    Controls["HEADING_4"] = "heading_4";
+    Controls["BULLET_LIST"] = "bulletList";
+    Controls["ORDERED_LIST"] = "orderedList";
+    Controls["TEXT_ALIGN_LEFT"] = "textAlignLeft";
+    Controls["TEXT_ALIGN_CENTER"] = "textAlignCenter";
+    Controls["TEXT_ALIGN_RIGHT"] = "textAlignRight";
+    Controls["TEXT_ALIGN_JUSTIFIED"] = "textAlignJustified";
+    Controls["FONT"] = "font";
+})(Controls || (Controls = {}));
+export default Controls;

package/dist/RichTextEditor/Enums/Fonts.d.ts

@@ -0,0 +1,10 @@
+declare enum Fonts {
+    DEFAULT = "Default",
+    ARIAL = "Arial",
+    COURIER_NEW = "Courier New",
+    TIMES_NEW_ROMAN = "Times New Roman",
+    SEGOE_UI = "Segoe UI",
+    ROBOTO = "Roboto",
+    VERANDA = "Veranda"
+}
+export default Fonts;

package/dist/RichTextEditor/Enums/Fonts.js

@@ -0,0 +1,11 @@
+var Fonts;
+(function (Fonts) {
+    Fonts["DEFAULT"] = "Default";
+    Fonts["ARIAL"] = "Arial";
+    Fonts["COURIER_NEW"] = "Courier New";
+    Fonts["TIMES_NEW_ROMAN"] = "Times New Roman";
+    Fonts["SEGOE_UI"] = "Segoe UI";
+    Fonts["ROBOTO"] = "Roboto";
+    Fonts["VERANDA"] = "Veranda";
+})(Fonts || (Fonts = {}));
+export default Fonts;

package/dist/RichTextEditor/RichTextEditor.d.ts

@@ -2,6 +2,7 @@ import { Editor } from "@tiptap/react";
 import { ExtensionType } from "./Extensions/getTiptapExtensions";
 import { HandleImageUpload } from "./Plugins/UploadImagesPlugin";
 import { BubbleMenuOptions } from "./Extensions/BubbleMenuExtension";
+import { ToolbarOptions } from "./Toolbar/Toolbar";
 interface RichTextEditorProps {
     className?: string;
     editorInstanceRef?: React.RefObject<Editor>;
@@ -16,6 +17,7 @@ interface RichTextEditorProps {
     onChange?: (value: string) => void;
     handleImageUpload?: HandleImageUpload;
     bubbleMenuOptions?: BubbleMenuOptions;
+    toolbarOptions?: ToolbarOptions;
     style?: React.CSSProperties;
 }
 declare const RichTextEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<RichTextEditorProps & import("react").RefAttributes<unknown>, "ref"> & {

package/dist/RichTextEditor/RichTextEditor.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import styled from "styled-components";
 import { EditorContent, useEditor } from "@tiptap/react";
 import Toolbar from "./Toolbar";
 import getTipTapExtensions from "./Extensions/getTiptapExtensions";
 import Extensions from "./Enums/Extensions";
+import { startImageUpload, } from "./Plugins/UploadImagesPlugin";
 import SaveBadge from "./Components/SaveBadge";
-const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaultValue = "", readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, onChange, handleImageUpload, style, }, ref) => {
+import Fonts from "./Enums/Fonts";
+import RichTextEditorContext from "./Contexts/RichTextEditorContext";
+const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaultValue = "", readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, onChange, handleImageUpload, style, }, ref) => {
+    const [fontState, setFontState] = useState(font || Fonts.DEFAULT);
     // check if image extension is included
     if (extensions === null || extensions === void 0 ? void 0 : extensions.includes(Extensions.Image)) {
         // Ensure that handleImageUpload is provided
@@ -23,6 +27,49 @@ const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaul
             bubbleMenuOptions,
             handleImageUpload,
         }),
+        editorProps: {
+            handlePaste: (view, event) => {
+                if (!handleImageUpload)
+                    return false;
+                if (!(event === null || event === void 0 ? void 0 : event.clipboardData))
+                    return false;
+                if (event.clipboardData.types.includes("text/html") ||
+                    event.clipboardData.types.includes("text/plain") ||
+                    event.clipboardData.types.includes("text/rtf"))
+                    return false;
+                if (event.clipboardData &&
+                    event.clipboardData.files &&
+                    event.clipboardData.files[0]) {
+                    event.preventDefault();
+                    const file = event.clipboardData.files[0];
+                    const pos = view.state.selection.from;
+                    startImageUpload(file, view, pos, handleImageUpload);
+                    return true;
+                }
+                return false;
+            },
+            handleDrop: (view, event, _slice, moved) => {
+                if (!handleImageUpload)
+                    return false;
+                if (!moved &&
+                    event.dataTransfer &&
+                    event.dataTransfer.files &&
+                    event.dataTransfer.files[0]) {
+                    event.preventDefault();
+                    const file = event.dataTransfer.files[0];
+                    const coordinates = view.posAtCoords({
+                        left: event.clientX,
+                        top: event.clientY,
+                    });
+                    if (!coordinates)
+                        return false;
+                    // here we deduct 1 from the pos or else the image will create an extra node
+                    startImageUpload(file, view, coordinates.pos - 1, handleImageUpload);
+                    return true;
+                }
+                return false;
+            },
+        },
         onUpdate: ({ editor }) => {
             onChange === null || onChange === void 0 ? void 0 : onChange(editor.getHTML());
         },
@@ -33,7 +80,10 @@ const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaul
             _ref.current = editor;
         }
     }, [editor]);
-    return (_jsxs("div", { className: className, children: [showToolbar && _jsx(Toolbar, { editor: editor }), saving && _jsx(SaveBadge, {}), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": font || null, style: style })] }));
+    return (_jsx("div", { className: className, children: _jsxs(RichTextEditorContext.Provider, { value: {
+                font: fontState,
+                setFont: setFontState,
+            }, children: [showToolbar && (_jsx(Toolbar, { editor: editor, toolbarOptions: toolbarOptions })), saving && _jsx(SaveBadge, {}), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": fontState || null, style: style })] }) }));
 })) `
   position: relative;
   display: flex;
@@ -136,9 +186,11 @@ const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaul
     }
     ul {
       margin: 0;
+      font-size: 0.8rem;
     }
     ol {
       margin: 0;
+      font-size: 0.8rem;
     }
     .editor-link {
       color: ${({ theme }) => theme.palette.primary.main};

package/dist/RichTextEditor/Toolbar/ControlsGroup.js

@@ -2,6 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
 const ControlsGroup = styled(forwardRef(({ className, children }, ref) => {
+    if (!children) {
+        return null;
+    }
     return (_jsx("div", { className: className + " controls-group", ref: ref, children: children }));
 })) `
   & {

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

@@ -1,7 +1,25 @@
 import { Editor } from "@tiptap/react";
+import Controls from "../Enums/Controls";
+import { ReactNode } from "react";
+import { DropDownMenuProps } from "../../DropDownMenu/DropDownMenu";
+import { ButtonProps } from "../../Button";
+export type CustomItem = {
+    type: "button";
+    options: ButtonProps & {
+        label: ReactNode;
+    };
+} | {
+    type: "menu";
+    options: DropDownMenuProps;
+};
+export interface ToolbarOptions {
+    controls?: Array<Controls | CustomItem>;
+    customItems?: CustomItem[];
+}
 interface ToolbarProps {
     className?: string;
     editor: Editor | null;
+    toolbarOptions?: ToolbarOptions;
 }
-declare const Toolbar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ToolbarProps, never>> & string & Omit<({ className, editor }: ToolbarProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const Toolbar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ToolbarProps, never>> & string & Omit<({ className, editor, toolbarOptions }: ToolbarProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default Toolbar;

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -2,8 +2,37 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import ControlsGroup from "./ControlsGroup";
 import { UndoControl, RedoControl, BoldControl, ItalicControl, UnderlineControl, StrikeThroughControl, Heading1Control, Heading2Control, Heading3Control, Heading4Control, BulletListControl, OrderedListControl, AlignLeftControl, AlignCenterControl, AlignRightControl, AlignJustifiedControl, } from "./Controls";
-const Toolbar = styled(({ className, editor }) => {
-    return (_jsxs("div", { className: className, children: [_jsxs(ControlsGroup, { children: [_jsx(UndoControl, { editor: editor }), _jsx(RedoControl, { editor: editor })] }), _jsxs(ControlsGroup, { children: [_jsx(BoldControl, { editor: editor }), _jsx(ItalicControl, { editor: editor }), _jsx(UnderlineControl, { editor: editor }), _jsx(StrikeThroughControl, { editor: editor })] }), _jsxs(ControlsGroup, { children: [_jsx(Heading1Control, { editor: editor }), _jsx(Heading2Control, { editor: editor }), _jsx(Heading3Control, { editor: editor }), _jsx(Heading4Control, { editor: editor })] }), _jsxs(ControlsGroup, { children: [_jsx(BulletListControl, { editor: editor }), _jsx(OrderedListControl, { editor: editor })] }), _jsxs(ControlsGroup, { children: [_jsx(AlignLeftControl, { editor: editor }), _jsx(AlignCenterControl, { editor: editor }), _jsx(AlignRightControl, { editor: editor }), _jsx(AlignJustifiedControl, { editor: editor })] })] }));
+import Controls from "../Enums/Controls";
+import DropDownMenu from "../../DropDownMenu";
+import Fonts from "../Enums/Fonts";
+import { useContext } from "react";
+import RichTextEditorContext from "../Contexts/RichTextEditorContext";
+import Button from "../../Button";
+const Toolbar = styled(({ className, editor, toolbarOptions }) => {
+    var _a;
+    const { controls } = toolbarOptions || {};
+    const customItems = controls === null || controls === void 0 ? void 0 : controls.filter((control) => typeof control !== "string" && control.type === ("menu" || "button"));
+    const { font, setFont } = useContext(RichTextEditorContext);
+    return (_jsxs("div", { className: className, children: [(_a = customItems === null || customItems === void 0 ? void 0 : customItems.map) === null || _a === void 0 ? void 0 : _a.call(customItems, (item, index) => {
+                var _a, _b;
+                if (item.type === "button") {
+                    return (_jsx(Button, Object.assign({}, item.options, { children: (_a = item === null || item === void 0 ? void 0 : item.options) === null || _a === void 0 ? void 0 : _a.label }), index));
+                }
+                else if (item.type === "menu") {
+                    return (_jsx(DropDownMenu, Object.assign({}, item.options, { children: (_b = item === null || item === void 0 ? void 0 : item.options) === null || _b === void 0 ? void 0 : _b.label }), index));
+                }
+            }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.FONT)) && (_jsx(DropDownMenu, { data: Object.values(Fonts).map((font) => ({
+                    label: font,
+                    value: font,
+                    onClick: () => {
+                        setFont(font);
+                    },
+                })), size: "xxs", variant: "outlined", arrow: true, buttonProps: {
+                    style: {
+                        fontWeight: "normal",
+                    },
+                    title: "Select Font",
+                }, children: (font || Fonts.DEFAULT) })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDO)) && _jsx(UndoControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.REDO)) && _jsx(RedoControl, { editor: editor })] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BOLD)) && _jsx(BoldControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ITALIC)) && (_jsx(ItalicControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDERLINE)) && (_jsx(UnderlineControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.STRIKE)) && (_jsx(StrikeThroughControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_1)) && (_jsx(Heading1Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_2)) && (_jsx(Heading2Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_3)) && (_jsx(Heading3Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_4)) && (_jsx(Heading4Control, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BULLET_LIST)) && (_jsx(BulletListControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ORDERED_LIST)) && (_jsx(OrderedListControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_LEFT)) && (_jsx(AlignLeftControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_CENTER)) && (_jsx(AlignCenterControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_RIGHT)) && (_jsx(AlignRightControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_JUSTIFIED)) && (_jsx(AlignJustifiedControl, { editor: editor }))] })] }));
 }) `
   display: flex;
   flex-direction: row;

package/dist/RichTextEditor/index.d.ts

@@ -1,3 +1,6 @@
 export { default } from "./RichTextEditor";
 export { default as Extensions } from "./Enums/Extensions";
 export { default as SlashCommands } from "./Enums/SlashCommands";
+export { default as Controls } from "./Enums/Controls";
+export type { CustomItem } from "./Toolbar/Toolbar";
+export type { ToolbarOptions } from "./Toolbar/Toolbar";

package/dist/RichTextEditor/index.js

@@ -1,3 +1,4 @@
 export { default } from "./RichTextEditor";
 export { default as Extensions } from "./Enums/Extensions";
 export { default as SlashCommands } from "./Enums/SlashCommands";
+export { default as Controls } from "./Enums/Controls";

package/dist/index.d.ts

@@ -26,4 +26,5 @@ export { default as Table } from "./Table";
 export { Column } from "./Table";
 export { default as MonolithUIProvider } from "./MonolithUIProvider";
 export { useMonolithUITheme } from "./MonolithUIProvider";
-export { default as RichTextEditor, Extensions, SlashCommands, } from "./RichTextEditor";
+export { default as RichTextEditor, Extensions, SlashCommands, Controls, } from "./RichTextEditor";
+export type { CustomItem, ToolbarOptions } from "./RichTextEditor";

package/dist/index.js

@@ -24,4 +24,4 @@ export { default as Table } from "./Table";
 export { Column } from "./Table";
 export { default as MonolithUIProvider } from "./MonolithUIProvider";
 export { useMonolithUITheme } from "./MonolithUIProvider";
-export { default as RichTextEditor, Extensions, SlashCommands, } from "./RichTextEditor";
+export { default as RichTextEditor, Extensions, SlashCommands, Controls, } from "./RichTextEditor";

package/package.json

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