@monolith-forensics/monolith-ui 1.2.75 → 1.2.76

package/dist/CheckBox/CheckBox.js

@@ -24,16 +24,18 @@ const CheckBox = styled(({ className, defaultValue = false, value, partialCheck
     color: ${(props) => props.theme.palette.primary.main};
     font-size: ${({ size }) => {
     switch (size) {
-        case "xs":
+        case "xxs":
             return "12px";
+        case "xs":
+            return "14px";
         case "sm":
             return "16px";
         case "md":
-            return "24px";
+            return "18px";
         case "lg":
-            return "32px";
+            return "20px";
         default:
-            return "16px";
+            return "14px";
     }
 }};
   }

package/dist/DropDownMenu/components/MenuItem.js

@@ -62,18 +62,6 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
     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"

package/dist/DropDownMenu/components/MenuItemList.js

@@ -72,7 +72,7 @@ export const MenuItemList = ({ menuItems, searchable, searchValue = "", isObject
                 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 (_jsx(DropDownMenu, { data: item.items, size: size, 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;

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

@@ -26,7 +26,7 @@ export type BubbleItem = {
     isActive?: (editor: Editor) => boolean;
     buttonRender?: (props: any) => ReactElement;
     buttonProps?: ButtonProps;
-    dropDownProps?: DropDownMenuProps;
+    dropDownProps?: Partial<DropDownMenuProps>;
     onClick?: (editor: Editor) => void;
 } | {
     name: Extensions | string;
@@ -36,7 +36,7 @@ export type BubbleItem = {
     arrow?: boolean;
     isActive?: (editor: Editor) => boolean;
     buttonRender?: (props: any) => ReactElement;
-    buttonProps?: ButtonProps;
+    buttonProps?: Partial<ButtonProps>;
     onClick?: (editor: Editor) => void;
 };
 declare const BubbleMenu: React.FC<BubbleMenuProps>;

package/dist/RichTextEditor/Components/BubbleMenu.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from "styled-components";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { useTheme } from "styled-components";
 import Extensions from "../Enums/Extensions";
 import { BoldIcon, ItalicIcon, UnderlineIcon, CaseSensitiveIcon, ListIcon, ListOrderedIcon, StrikethroughIcon, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, RemoveFormattingIcon, SquircleIcon, } from "lucide-react";
 import DropDownMenu from "../../DropDownMenu";
@@ -7,8 +7,7 @@ import { FloatingPortal, useFloating } from "@floating-ui/react";
 import { useEffect, useRef } from "react";
 import Button from "../../Button";
 import TextColors from "../Enums/TextColors";
-import DefaultColorIcon from "./DefaultColorIcon";
-const getMenuItems = (editor, customMenuItems) => {
+const getMenuItems = (editor, customMenuItems, theme) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const node = (_c = (_b = (_a = editor === null || editor === void 0 ? void 0 : editor.state) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.$from) === null || _c === void 0 ? void 0 : _c.parent;
     const pos = (_e = (_d = editor === null || editor === void 0 ? void 0 : editor.state) === null || _d === void 0 ? void 0 : _d.selection) === null || _e === void 0 ? void 0 : _e.$from;
@@ -60,8 +59,8 @@ const getMenuItems = (editor, customMenuItems) => {
                 {
                     label: "Text",
                     value: "text",
-                    leftSection: _jsx(CaseSensitiveIcon, { size: 16 }),
                     data: {
+                        Icon: CaseSensitiveIcon,
                         command: (editor) => {
                             // remove ordered list
                             editor
@@ -76,8 +75,8 @@ const getMenuItems = (editor, customMenuItems) => {
                 {
                     label: "Heading 1",
                     value: "heading_1",
-                    leftSection: _jsx(Heading1Icon, { size: 16 }),
                     data: {
+                        Icon: Heading1Icon,
                         command: (editor) => {
                             editor.chain().focus().setHeading({ level: 1 }).run();
                         },
@@ -86,8 +85,8 @@ const getMenuItems = (editor, customMenuItems) => {
                 {
                     label: "Heading 2",
                     value: "heading_2",
-                    leftSection: _jsx(Heading2Icon, { size: 16 }),
                     data: {
+                        Icon: Heading2Icon,
                         command: (editor) => {
                             editor.chain().focus().setHeading({ level: 2 }).run();
                         },
@@ -96,8 +95,8 @@ const getMenuItems = (editor, customMenuItems) => {
                 {
                     label: "Heading 3",
                     value: "heading_3",
-                    leftSection: _jsx(Heading3Icon, { size: 16 }),
                     data: {
+                        Icon: Heading3Icon,
                         command: (editor) => {
                             editor.chain().focus().setHeading({ level: 3 }).run();
                         },
@@ -106,8 +105,8 @@ const getMenuItems = (editor, customMenuItems) => {
                 {
                     label: "Heading 4",
                     value: "heading_4",
-                    leftSection: _jsx(Heading4Icon, { size: 16 }),
                     data: {
+                        Icon: Heading4Icon,
                         command: (editor) => {
                             editor.chain().focus().setHeading({ level: 4 }).run();
                         },
@@ -116,8 +115,8 @@ const getMenuItems = (editor, customMenuItems) => {
                 {
                     label: "Bullet List",
                     value: "bullet_list",
-                    leftSection: _jsx(ListIcon, { size: 16 }),
                     data: {
+                        Icon: ListIcon,
                         command: (editor) => {
                             editor.chain().focus().toggleBulletList().run();
                         },
@@ -126,14 +125,17 @@ const getMenuItems = (editor, customMenuItems) => {
                 {
                     label: "Ordered List",
                     value: "ordered_list",
-                    leftSection: _jsx(ListOrderedIcon, { size: 16 }),
                     data: {
+                        Icon: ListOrderedIcon,
                         command: (editor) => {
                             editor.chain().focus().toggleOrderedList().run();
                         },
                     },
                 },
             ],
+            dropDownProps: {
+                renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(item.data.Icon, { size: 16 }), item.label] })),
+            },
         },
         {
             name: "color",
@@ -145,15 +147,11 @@ const getMenuItems = (editor, customMenuItems) => {
                 style: { fontSize: 11, padding: "4px" },
             },
             items: [
-                // remove Color Style
                 {
                     label: "Default",
                     value: "default",
-                    leftSection: _jsx(DefaultColorIcon, { size: 12 }),
-                    data: {
-                        command: (editor) => {
-                            editor.chain().focus().unsetColor().run();
-                        },
+                    onClick: () => {
+                        editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetColor().run();
                     },
                 },
                 ...Object.keys(TextColors).map((color) => {
@@ -161,18 +159,22 @@ const getMenuItems = (editor, customMenuItems) => {
                     return {
                         label: color,
                         value: TextColors[colorKey],
-                        leftSection: (_jsx(SquircleIcon, { size: 12, color: TextColors[colorKey], style: {
-                                backgroundColor: TextColors[colorKey],
-                                borderRadius: "3px",
-                            } })),
-                        data: {
-                            command: (editor) => {
-                                editor.chain().focus().setColor(TextColors[colorKey]).run();
-                            },
+                        onClick: () => {
+                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(TextColors[colorKey]).run();
                         },
                     };
                 }),
             ],
+            dropDownProps: {
+                renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(SquircleIcon, { size: 12, color: item.value === "default"
+                                ? theme.palette.text.primary
+                                : item.value, style: {
+                                backgroundColor: item.value === "default"
+                                    ? theme.palette.text.primary
+                                    : item.value,
+                                borderRadius: "3px",
+                            } }), item.label] })),
+            },
         },
         {
             name: Extensions.Bold,
@@ -274,6 +276,7 @@ const BubbleMenu = ({ editor, rect, open, onOpen, customMenuItems = [], }) => {
     var _a;
     const menuRef = useRef(null);
     const { refs, elements } = useFloating();
+    const theme = useTheme();
     useEffect(() => {
         if (open && onOpen) {
             onOpen(elements.floating);
@@ -301,7 +304,7 @@ const BubbleMenu = ({ editor, rect, open, onOpen, customMenuItems = [], }) => {
             }, style: {
                 top,
                 left,
-            }, children: getMenuItems(editor, customMenuItems).map((item) => {
+            }, children: getMenuItems(editor, customMenuItems, theme).map((item) => {
                 var _a;
                 if (item.type === "button") {
                     const isActive = (_a = item.isActive) === null || _a === void 0 ? void 0 : _a.call(item, editor);

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

@@ -0,0 +1,4 @@
+import { Editor } from "@tiptap/react";
+export declare const ColorPicker: React.FC<{
+    editor: Editor;
+}>;

package/dist/RichTextEditor/Components/ColorPicker.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DropDownMenu from "../../DropDownMenu";
+import TextColors from "../Enums/TextColors";
+import { SquircleIcon } from "lucide-react";
+import { useTheme } from "styled-components";
+export const ColorPicker = ({ editor }) => {
+    const theme = useTheme();
+    return (_jsx(DropDownMenu, { data: [
+            {
+                label: "Default",
+                value: "default",
+                onClick: () => {
+                    editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetColor().run();
+                },
+            },
+            ...Object.keys(TextColors).map((color) => {
+                const colorKey = color;
+                return {
+                    label: color,
+                    value: TextColors[colorKey],
+                    onClick: () => {
+                        editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(TextColors[colorKey]).run();
+                    },
+                };
+            }),
+        ], renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(SquircleIcon, { size: 12, color: item.value === "default" ? theme.palette.text.primary : item.value, style: {
+                        backgroundColor: item.value === "default"
+                            ? theme.palette.text.primary
+                            : item.value,
+                        borderRadius: "3px",
+                    } }), item.label] })), size: "xxs", variant: "outlined", arrow: true, buttonProps: {
+            style: {
+                fontWeight: "normal",
+            },
+            title: "Select Color",
+        }, children: "Color" }));
+};

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

@@ -0,0 +1 @@
+export * from "./ColorPicker";

package/dist/RichTextEditor/Components/index.js

@@ -0,0 +1 @@
+export * from "./ColorPicker";

package/dist/RichTextEditor/RichTextEditor.js

@@ -18,10 +18,6 @@ const StyledContent = styled.div `
   justify-content: flex-start;
   align-items: center;
 
-  ::selection {
-    background-color: #705324;
-  }
-
   .editor-content {
     height: ${({ height }) => height || "100%"};
     width: 100%;

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from "styled-components";
+import styled, { useTheme } 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";
 import Controls from "../Enums/Controls";
@@ -9,10 +9,10 @@ import { useContext } from "react";
 import RichTextEditorContext from "../Contexts/RichTextEditorContext";
 import Button from "../../Button";
 import TextColors from "../Enums/TextColors";
-import DefaultColorIcon from "../Components/DefaultColorIcon";
 import { SquircleIcon } from "lucide-react";
 const Toolbar = styled(({ className, editor, toolbarOptions }) => {
     var _a;
+    const theme = useTheme();
     const { controls } = toolbarOptions || {};
     const customItems = controls === null || controls === void 0 ? void 0 : controls.filter((control) => typeof control !== "string" &&
         (control.type === "menu" || control.type === "button"));
@@ -32,15 +32,11 @@ const Toolbar = styled(({ className, editor, toolbarOptions }) => {
                         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 })] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.COLOR)) && (_jsx(DropDownMenu, { data: [
                     {
                         label: "Default",
                         value: "default",
-                        leftSection: _jsx(DefaultColorIcon, { size: 12 }),
                         onClick: () => {
                             editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetColor().run();
                         },
@@ -50,19 +46,19 @@ const Toolbar = styled(({ className, editor, toolbarOptions }) => {
                         return {
                             label: color,
                             value: TextColors[colorKey],
-                            leftSection: (_jsx(SquircleIcon, { size: 12, color: TextColors[colorKey], style: {
-                                    backgroundColor: TextColors[colorKey],
-                                    borderRadius: "3px",
-                                } })),
                             onClick: () => {
                                 editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(TextColors[colorKey]).run();
                             },
                         };
                     }),
-                ], size: "xxs", variant: "outlined", arrow: true, buttonProps: {
-                    style: {
-                        fontWeight: "normal",
-                    },
+                ], renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(SquircleIcon, { size: 12, color: item.value === "default"
+                                ? theme.palette.text.primary
+                                : item.value, style: {
+                                backgroundColor: item.value === "default"
+                                    ? theme.palette.text.primary
+                                    : item.value,
+                                borderRadius: "3px",
+                            } }), item.label] })), size: "xxs", variant: "outlined", arrow: true, buttonProps: {
                     title: "Select Color",
                 }, children: "Color" })), _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 }))] })] }));
 }) `

package/dist/Table/TableMenu/TableMenu.js

@@ -59,7 +59,7 @@ const TableMenu = () => {
             label: item.label,
         });
     };
-    return (_jsxs(StyledContainer, { children: [_jsxs(FlexedRow, { className: "justify-sb", children: [_jsxs(FlexedRow, { children: [(addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.enabled) === true && (_jsx(Button, { color: "primary", variant: "contained", size: "xxs", onClick: () => { var _a, _b; return (_b = (_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a); }, children: ((_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _a === void 0 ? void 0 : _a.label) || "+ Add Record" })), (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "sm", data: ((_b = filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.filterDefinitions) === null || _b === void 0 ? void 0 : _b.map((filter) => ({
+    return (_jsxs(StyledContainer, { children: [_jsxs(FlexedRow, { className: "justify-sb", children: [_jsxs(FlexedRow, { children: [(addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.enabled) === true && (_jsx(Button, { color: "primary", variant: "contained", size: "xxs", onClick: () => { var _a, _b; return (_b = (_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a); }, children: ((_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _a === void 0 ? void 0 : _a.label) || "+ Add Record" })), (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: ((_b = filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.filterDefinitions) === null || _b === void 0 ? void 0 : _b.map((filter) => ({
                                     label: filter.label,
                                     value: filter.dataField,
                                     data: filter,
@@ -99,7 +99,7 @@ const TableMenu = () => {
                                     value: col.dataField,
                                 })), multiselect: true, searchable: true, buttonProps: {
                                     title: "Show/Hide Columns",
-                                    size: "xxs",
+                                    size: "xs",
                                     style: { padding: "0px 4px" },
                                 }, dropDownProps: {
                                     style: { width: 175, maxWidth: 400 },

package/package.json

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

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

@@ -1,4 +0,0 @@
-declare const DefaultColorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | 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<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;
-export default DefaultColorIcon;

package/dist/RichTextEditor/Components/DefaultColorIcon.js

@@ -1,7 +0,0 @@
-import { SquircleIcon } from "lucide-react";
-import styled from "styled-components";
-const DefaultColorIcon = styled(SquircleIcon) `
-  background-color: ${({ theme }) => theme.palette.text.primary};
-  border-radius: 3px;
-`;
-export default DefaultColorIcon;