@monolith-forensics/monolith-ui 2.0.0 → 2.1.1

package/dist/FileViewer/FileViewer.d.ts

@@ -10,4 +10,5 @@ export declare const FileViewer: React.FC<{
     open?: boolean;
     isPending?: boolean;
     onClose: () => void;
+    onDownload?: (file: File) => void;
 }>;

package/dist/FileViewer/FileViewer.js

@@ -171,7 +171,7 @@ const resolveViewerType = (file) => {
     }
     return ViewerTypes.Code;
 };
-export const FileViewer = ({ file, open, isPending, onClose }) => {
+export const FileViewer = ({ file, open, isPending, onClose, onDownload }) => {
     const [zoomFactor, setZoomFactor] = useState(1);
     const [rotation, setRotation] = useState(0);
     useEffect(() => {
@@ -194,7 +194,7 @@ export const FileViewer = ({ file, open, isPending, onClose }) => {
     return (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsxs(StyledContainer, { className: "mfui-FileViewer", children: [_jsxs(StyledMenu, { className: "FileViewer-menu", children: [_jsx(Button, { variant: "text", onClick: () => {
                                 onClose === null || onClose === void 0 ? void 0 : onClose();
                                 resetViewerState();
-                            }, children: _jsx(XIcon, { size: 18 }) }), _jsx("div", { children: file.name }), _jsxs(StyledActionsMenu, { children: [ZoomableViewerTypes.includes(viewerType) && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "text", disabled: !file.url, "aria-label": "Zoom in", title: "Zoom in", onClick: () => setZoomFactor((prev) => prev * 1.1), children: _jsx(ZoomInIcon, { size: 18 }) }), _jsx(Button, { variant: "text", disabled: !file.url, "aria-label": "Zoom out", title: "Zoom out", onClick: () => setZoomFactor((prev) => prev * 0.9), children: _jsx(ZoomOutIcon, { size: 18 }) })] })), RotatableViewerTypes.includes(viewerType) && (_jsx(Button, { variant: "text", disabled: !file.url, "aria-label": "Rotate image", title: "Rotate image", onClick: () => setRotation((prev) => (prev + 90) % 360), children: _jsx(RotateCwIcon, { size: 18 }) })), _jsx("a", { href: file.url, download: file.name, style: { pointerEvents: !file.url ? "none" : "auto" }, children: _jsx(Button, { variant: "text", disabled: !file.url, children: _jsx(DownloadIcon, { size: 18 }) }) })] })] }), file.url ? (_jsxs(StyledInnerContainer, { onClick: handleBackgroundClick, "data-type": viewerType, children: [viewerType === ViewerTypes.PDF && (_jsx(PdfViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Image && (_jsx(ImageViewer, { file: file, zoomFactor: zoomFactor, rotation: rotation, isPending: isPending })), viewerType === ViewerTypes.Video && (_jsx(VideoViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Audio && (_jsx(VideoViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Office && (_jsx(OfficeViewer, { file: file, isPending: isPending })), viewerType === ViewerTypes.Text && (_jsx(CodeViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Code && (_jsx(CodeViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending }))] })) : (_jsx(StyledInnerContainer, { children: _jsxs("div", { style: {
+                            }, children: _jsx(XIcon, { size: 18 }) }), _jsx("div", { children: file.name }), _jsxs(StyledActionsMenu, { children: [ZoomableViewerTypes.includes(viewerType) && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "text", disabled: !file.url, "aria-label": "Zoom in", title: "Zoom in", onClick: () => setZoomFactor((prev) => prev * 1.1), children: _jsx(ZoomInIcon, { size: 18 }) }), _jsx(Button, { variant: "text", disabled: !file.url, "aria-label": "Zoom out", title: "Zoom out", onClick: () => setZoomFactor((prev) => prev * 0.9), children: _jsx(ZoomOutIcon, { size: 18 }) })] })), RotatableViewerTypes.includes(viewerType) && (_jsx(Button, { variant: "text", disabled: !file.url, "aria-label": "Rotate image", title: "Rotate image", onClick: () => setRotation((prev) => (prev + 90) % 360), children: _jsx(RotateCwIcon, { size: 18 }) })), _jsx("a", { href: file.url, download: file.name, style: { pointerEvents: !file.url ? "none" : "auto" }, onClick: () => onDownload === null || onDownload === void 0 ? void 0 : onDownload(file), children: _jsx(Button, { variant: "text", disabled: !file.url, children: _jsx(DownloadIcon, { size: 18 }) }) })] })] }), file.url ? (_jsxs(StyledInnerContainer, { onClick: handleBackgroundClick, "data-type": viewerType, children: [viewerType === ViewerTypes.PDF && (_jsx(PdfViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Image && (_jsx(ImageViewer, { file: file, zoomFactor: zoomFactor, rotation: rotation, isPending: isPending })), viewerType === ViewerTypes.Video && (_jsx(VideoViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Audio && (_jsx(VideoViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Office && (_jsx(OfficeViewer, { file: file, isPending: isPending })), viewerType === ViewerTypes.Text && (_jsx(CodeViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Code && (_jsx(CodeViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending }))] })) : (_jsx(StyledInnerContainer, { children: _jsxs("div", { style: {
                             margin: "auto",
                             display: "flex",
                             gap: "10px",

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

@@ -5,6 +5,7 @@ declare enum Fonts {
     TIMES_NEW_ROMAN = "Times New Roman",
     SEGOE_UI = "Segoe UI",
     ROBOTO = "Roboto",
-    VERANDA = "Veranda"
+    VERDANA = "Verdana",
+    CAMBRIA = "Cambria"
 }
 export default Fonts;

package/dist/RichTextEditor/Enums/Fonts.js

@@ -6,6 +6,7 @@ var Fonts;
     Fonts["TIMES_NEW_ROMAN"] = "Times New Roman";
     Fonts["SEGOE_UI"] = "Segoe UI";
     Fonts["ROBOTO"] = "Roboto";
-    Fonts["VERANDA"] = "Veranda";
+    Fonts["VERDANA"] = "Verdana";
+    Fonts["CAMBRIA"] = "Cambria";
 })(Fonts || (Fonts = {}));
 export default Fonts;

package/dist/RichTextEditor/RichTextEditor.js

@@ -324,6 +324,10 @@ const StyledContent = styled.div `
     font-family: Roboto, sans-serif;
   }
 
+  .editor-content[data-font="Cambria"] {
+    font-family: Cambria, Georgia, "Times New Roman", serif;
+  }
+
   .ProseMirror {
     font-size: 14px;
     font-weight: 400;

package/package.json

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

package/dist/QueryFilter/DefaultOperators.d.ts

@@ -1,76 +0,0 @@
-import { Operator } from "./types";
-export declare const Operators: {
-    Equals: {
-        value: string;
-        label: string;
-    };
-    NotEquals: {
-        value: string;
-        label: string;
-    };
-    LessThan: {
-        value: string;
-        label: string;
-    };
-    GreaterThan: {
-        value: string;
-        label: string;
-    };
-    LessThanOrEqual: {
-        value: string;
-        label: string;
-    };
-    GreaterThanOrEqual: {
-        value: string;
-        label: string;
-    };
-    Contains: {
-        value: string;
-        label: string;
-    };
-    BeginsWith: {
-        value: string;
-        label: string;
-    };
-    EndsWith: {
-        value: string;
-        label: string;
-    };
-    DoesNotContain: {
-        value: string;
-        label: string;
-    };
-    DoesNotBeginWith: {
-        value: string;
-        label: string;
-    };
-    DoesNotEndWith: {
-        value: string;
-        label: string;
-    };
-    IsEmpty: {
-        value: string;
-        label: string;
-    };
-    IsNotEmpty: {
-        value: string;
-        label: string;
-    };
-    In: {
-        value: string;
-        label: string;
-    };
-    NIn: {
-        value: string;
-        label: string;
-    };
-    Between: {
-        value: string;
-        label: string;
-    };
-    NotBetween: {
-        value: string;
-        label: string;
-    };
-};
-export declare const DefaultOperators: Operator[];

package/dist/QueryFilter/DefaultOperators.js

@@ -1,21 +0,0 @@
-export const Operators = {
-    Equals: { value: "=", label: "is" },
-    NotEquals: { value: "!=", label: "is not" },
-    LessThan: { value: "<", label: "less than" },
-    GreaterThan: { value: ">", label: "greater than" },
-    LessThanOrEqual: { value: "<=", label: "less than or equal" },
-    GreaterThanOrEqual: { value: ">=", label: "greater than or equal" },
-    Contains: { value: "contains", label: "contains" },
-    BeginsWith: { value: "beginsWith", label: "begins with" },
-    EndsWith: { value: "endsWith", label: "ends with" },
-    DoesNotContain: { value: "doesNotContain", label: "does not contain" },
-    DoesNotBeginWith: { value: "doesNotBeginWith", label: "does not begin with" },
-    DoesNotEndWith: { value: "doesNotEndWith", label: "does not end with" },
-    IsEmpty: { value: "isEmpty", label: "is empty" },
-    IsNotEmpty: { value: "isNotEmpty", label: "is not empty" },
-    In: { value: "in", label: "is any of" },
-    NIn: { value: "nin", label: "is none of" },
-    Between: { value: "between", label: "between" },
-    NotBetween: { value: "notBetween", label: "not between" },
-};
-export const DefaultOperators = Object.values(Operators);

package/dist/QueryFilter/types.d.ts

@@ -1,66 +0,0 @@
-import { DropDownItem, DropDownMenuProps } from "../DropDownMenu";
-export interface UseQueryFilterProps {
-    defaultFilter?: Query | null;
-    /**
-     * Filter definitions for the available fields. Pass `undefined` while the
-     * definitions are still loading (e.g. async fetch in flight) — any rules
-     * already in state will render nothing until definitions resolve. An empty
-     * array means "loaded, no definitions": every rule will render as an
-     * orphan chip and `onUnknownField` will fire for each.
-     */
-    filterDefinitions: FilterDefinition[] | undefined;
-    showCombinator?: boolean;
-    onFilterChange?: (filter: any) => void;
-    onUnknownField?: (rule: Rule) => void;
-}
-export type QueryFilterType = {
-    filter: Query;
-    filterDefinitions: FilterDefinition[] | undefined;
-    showCombinator?: boolean;
-    addRule: (rule: Rule) => void;
-    /**
-     * Remove a rule by `id` (preferred) or by passing the `Rule` object. The
-     * object form falls back to reference equality when `rule.id` is missing,
-     * so chips for un-normalized orphan rules can still delete themselves.
-     */
-    removeRule: (target: string | Rule) => void;
-    updateRule: (rule: Rule) => void;
-    updateRootCombinator: (combinator: Combinator) => void;
-    onUnknownField?: (rule: Rule) => void;
-};
-export type UseQueryFilter = (args: UseQueryFilterProps) => QueryFilterType;
-export type Combinator = "and" | "or";
-export type Operator = {
-    label: string;
-    value: string;
-};
-export type InputType = "text" | "number" | "date" | "datetime" | "multiselect";
-export interface FilterDefinition {
-    dataField: string;
-    label: string;
-    pluralLabel?: string;
-    operators?: Operator[];
-    inputType?: InputType;
-    resolution?: "day" | "second" | "millisecond";
-    isoString?: boolean;
-    placeholder?: string;
-    selectOptions?: DropDownItem[];
-    dropDownOptions?: {
-        style?: React.CSSProperties;
-    };
-    query?: DropDownMenuProps["query"];
-}
-export interface Rule {
-    id?: string;
-    dataField: string;
-    value?: string[];
-    options?: DropDownItem[];
-    operator: Operator;
-    label: string;
-}
-export interface RuleGroup {
-    rules: Rule[];
-    combinator: Combinator;
-}
-export interface Query extends RuleGroup {
-}

package/dist/QueryFilter/types.js

@@ -1 +0,0 @@
-export {};

package/dist/RichTextEditor/Extensions/BubbleMenuExtension.d.ts

@@ -1,7 +0,0 @@
-import { Extension } from "@tiptap/core";
-import { BubbleItem } from "../Components/BubbleMenu";
-export type BubbleMenuOptions = {
-    customMenuItems?: BubbleItem[];
-};
-declare const BubbleMenu: Extension<any, any>;
-export default BubbleMenu;

package/dist/RichTextEditor/Extensions/BubbleMenuExtension.js

@@ -1,157 +0,0 @@
-import { Extension, isNodeSelection, isTextSelection, posToDOMRect, } from "@tiptap/core";
-import { Plugin, PluginKey } from "@tiptap/pm/state";
-import { ReactRenderer } from "@tiptap/react";
-import BubbleMenuComponent from "../Components/BubbleMenu";
-class Menu {
-    constructor({ view, editor, customMenuItems, }) {
-        this.mousedownHandler = (event) => {
-            this.preventShow = true;
-        };
-        this.mouseUpHandler = (event) => {
-            this.preventShow = false;
-            this.update(this.editor.view);
-        };
-        this.focusHandler = () => {
-            // this.editor.commands.setTextSelection({ from: 0, to: 0 });
-            // we use `setTimeout` to make sure `selection` is already updated
-            setTimeout(() => this.update(this.editor.view));
-        };
-        this.blurHandler = ({ event }) => {
-            var _a;
-            if (this.preventShow) {
-                this.preventShow = false;
-                return;
-            }
-            if ((event === null || event === void 0 ? void 0 : event.relatedTarget) &&
-                ((_a = this.floating) === null || _a === void 0 ? void 0 : _a.contains(event === null || event === void 0 ? void 0 : event.relatedTarget))) {
-                return;
-            }
-            // clear text selection
-            // this.editor.commands.setTextSelection({ from: 0, to: 0 });
-            this.hide();
-        };
-        this.editor = editor;
-        this.view = view;
-        this.rect = null;
-        this.preventShow = false;
-        this.floating = null;
-        this.isOpen = false;
-        // create and mount react component
-        if (!this.component) {
-            this.component = new ReactRenderer(BubbleMenuComponent, {
-                props: {
-                    editor: this.editor,
-                    open: false,
-                    onOpen: (ref) => {
-                        this.floating = ref;
-                    },
-                    customMenuItems,
-                },
-                editor: this.editor,
-            });
-            document.body.appendChild(this.component.element);
-        }
-        // don't show the bubble during selection of text
-        this.view.dom.addEventListener("mousedown", this.mousedownHandler, {
-            capture: true,
-        });
-        this.view.dom.addEventListener("mouseup", this.mouseUpHandler);
-        this.editor.on("blur", this.blurHandler);
-        this.editor.on("focus", this.focusHandler);
-    }
-    update(view, oldState) {
-        var _a;
-        const { state, composing } = view;
-        const { doc, selection } = state;
-        const { empty, ranges } = selection;
-        const from = Math.min(...ranges.map((range) => range.$from.pos));
-        const to = Math.max(...ranges.map((range) => range.$to.pos));
-        const selectionChanged = !(oldState === null || oldState === void 0 ? void 0 : oldState.selection.eq(view.state.selection));
-        const docChanged = !(oldState === null || oldState === void 0 ? void 0 : oldState.doc.eq(view.state.doc));
-        const isSame = !selectionChanged && !docChanged;
-        if (composing || isSame) {
-            return;
-        }
-        // Sometime check for `empty` is not enough.
-        // Doubleclick an empty paragraph returns a node size of 2.
-        // So we check also for an empty text size.
-        const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection);
-        // When clicking on a element inside the bubble menu the editor "blur" event
-        // is called and the bubble menu item is focussed. In this case we should
-        // consider the menu as part of the editor and keep showing the menu
-        const isChildOfMenu = (_a = this === null || this === void 0 ? void 0 : this.floating) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);
-        const hasEditorFocus = view.hasFocus() || isChildOfMenu;
-        if (!hasEditorFocus ||
-            empty ||
-            isEmptyTextBlock ||
-            !this.editor.isEditable ||
-            this.preventShow) {
-            this.hide();
-        }
-        else {
-            // only set position when it is not already open
-            // otherwise the menu will jump around when the selection changes or text formatting is applied
-            if (!this.isOpen) {
-                if (isNodeSelection(state.selection)) {
-                    let node = view.nodeDOM(from);
-                    const nodeViewWrapper = node.dataset.nodeViewWrapper
-                        ? node
-                        : node.querySelector("[data-node-view-wrapper]");
-                    if (nodeViewWrapper) {
-                        node = nodeViewWrapper.firstChild;
-                    }
-                    if (node) {
-                        this.rect = node.getBoundingClientRect();
-                    }
-                }
-                else {
-                    this.rect = posToDOMRect(view, from, to);
-                }
-            }
-            this.show();
-        }
-    }
-    show() {
-        if (this.component) {
-            this.component.updateProps({ open: true, rect: this.rect });
-            this.isOpen = true;
-        }
-    }
-    hide() {
-        if (this.component) {
-            this.component.updateProps({ open: false, rect: null });
-            this.isOpen = false;
-        }
-    }
-    destroy() {
-        if (this.component) {
-            this.view.dom.removeEventListener("mousedown", this.mousedownHandler);
-            this.view.dom.removeEventListener("mouseup", this.mouseUpHandler);
-            this.component.destroy();
-        }
-    }
-}
-const BubbleMenu = Extension.create({
-    name: "bubbleMenu",
-    addOptions() {
-        return {
-            bubbleMenuOptions: {},
-        };
-    },
-    addProseMirrorPlugins() {
-        return [
-            new Plugin({
-                key: new PluginKey("bubbleMenu"),
-                view: (view) => {
-                    var _a;
-                    return new Menu({
-                        view,
-                        editor: this.editor,
-                        customMenuItems: ((_a = this === null || this === void 0 ? void 0 : this.options) === null || _a === void 0 ? void 0 : _a.customMenuItems) || [],
-                    });
-                },
-            }),
-        ];
-    },
-});
-export default BubbleMenu;

package/dist/Table/Utils/resizeHandler.d.ts

@@ -1,3 +0,0 @@
-import { ResizeHandlerProps } from "../types";
-declare const resizeHandler: ({ event, columnId, columnProps, onResize, onResizeFinished, }: ResizeHandlerProps) => void;
-export default resizeHandler;

package/dist/Table/Utils/resizeHandler.js

@@ -1,84 +0,0 @@
-import TableDefaults from "../TableDefaults";
-const enableResizeClass = (dataField) => {
-    if (dataField === undefined) {
-        return;
-    }
-    document.querySelectorAll(`.resizer.col-${dataField}`).forEach((resizer) => {
-        resizer.classList.add("isResizing");
-    });
-};
-const disableResizeClass = (dataField) => {
-    if (dataField === undefined) {
-        return;
-    }
-    document.querySelectorAll(`.resizer.col-${dataField}`).forEach((resizer) => {
-        resizer.classList.remove("isResizing");
-    });
-};
-const resizeHandler = ({ event, columnId, columnProps, onResize, onResizeFinished, }) => {
-    let col = event.target
-        .parentElement;
-    let newColumns = [];
-    let x = 0;
-    let w = 0;
-    const mouseMoveHandler = function (e) {
-        const selectedColumn = document.querySelectorAll(`.column-${columnId}`);
-        const columnHeaders = document.querySelectorAll(`.mfui-th.column-${columnId}`);
-        const dx = e.clientX - x;
-        let newWidth = w + dx;
-        // Calculate what the minimum width should be
-        // min width should be the defined column width or the default min width
-        if (columnProps.minWidth === undefined) {
-            if (newWidth < TableDefaults.td.minWidth)
-                newWidth = TableDefaults.td.minWidth;
-        }
-        else {
-            if (newWidth < columnProps.minWidth)
-                newWidth = columnProps.minWidth;
-        }
-        selectedColumn.forEach((col) => {
-            var _a;
-            col.style.width = `${newWidth}px`;
-            col.style.flex = "0 0 auto";
-            // col.style.maxWidth = `${newWidth}px`;
-            // col.style.minWidth = `${newWidth}px`;
-            newColumns.push({
-                dataField: ((_a = col === null || col === void 0 ? void 0 : col.dataset) === null || _a === void 0 ? void 0 : _a.field) || "",
-                width: newWidth,
-            });
-        });
-        newColumns = Array.from(columnHeaders).map((col) => {
-            var _a;
-            return {
-                dataField: ((_a = col === null || col === void 0 ? void 0 : col.dataset) === null || _a === void 0 ? void 0 : _a.field) || "",
-                width: newWidth,
-            };
-        });
-        onResize({
-            columns: newColumns,
-        });
-    };
-    const mouseUpHandler = function () {
-        var _a, _b, _c;
-        let newWidth = ((_c = (_b = (_a = document === null || document === void 0 ? void 0 : document.querySelector) === null || _a === void 0 ? void 0 : _a.call(document, `.column-${columnId}`)) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.width) || null;
-        if (newWidth) {
-            newWidth = newWidth.replace("px", "");
-        }
-        disableResizeClass(columnId);
-        document.removeEventListener("mousemove", mouseMoveHandler);
-        document.removeEventListener("mouseup", mouseUpHandler);
-        onResizeFinished === null || onResizeFinished === void 0 ? void 0 : onResizeFinished({
-            column: columnProps,
-            columnId: columnId,
-            targetColumn: document.querySelector(`.column-${columnId}`),
-            newWidth,
-        });
-    };
-    x = event.clientX;
-    const styles = window.getComputedStyle(col);
-    w = parseInt(styles.width, 10);
-    document.addEventListener("mousemove", mouseMoveHandler);
-    document.addEventListener("mouseup", mouseUpHandler);
-    enableResizeClass(columnId);
-};
-export default resizeHandler;