@monolith-forensics/monolith-ui 1.9.1-dev.9 → 1.9.3-dev.0

package/dist/DropDownMenu/components/MenuItemList.js

@@ -56,11 +56,18 @@ const buildGroupedDisplayList = (items) => {
 const ListViewPort = styled.div.attrs({ className: "ListViewPort" }) `
   display: flex;
   flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
   width: 100%;
 `;
+const MenuItemListRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+`;
 const ListScroller = styled.div `
   scrollbar-color: ${({ theme }) => `${theme.scrollbar.thumb} ${theme.scrollbar.track}`};
-  scrollbar-gutter: stable;
   scrollbar-width: thin;
 
   &::-webkit-scrollbar {
@@ -234,16 +241,6 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
         list.addEventListener("scroll", handleOnScroll);
         return () => list.removeEventListener("scroll", handleOnScroll);
     }, [dynamicOptionHeight, handleOnScroll, isLoading, renderOption]);
-    useLayoutEffect(() => {
-        var _a;
-        if (targetElm.current) {
-            const viewPortDimensions = (_a = targetElm.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            setViewPortDimensions({
-                width: viewPortDimensions.width,
-                height: viewPortDimensions.height,
-            });
-        }
-    }, [targetElm.current, isLoading]);
     const overscanCount = 10;
     const sizeTokens = getControlSizeTokens(size || "sm");
     const itemHeight = sizeTokens.menuRowHeight;
@@ -267,6 +264,29 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
             ? estimatedHeight
             : 200;
     const width = "100%";
+    useLayoutEffect(() => {
+        const target = targetElm.current;
+        if (!target)
+            return;
+        const updateDimensions = () => {
+            const nextDimensions = target.getBoundingClientRect();
+            setViewPortDimensions((currentDimensions) => {
+                const width = Math.ceil(nextDimensions.width);
+                const height = Math.floor(nextDimensions.height);
+                if (currentDimensions.width === width &&
+                    currentDimensions.height === height) {
+                    return currentDimensions;
+                }
+                return { width, height };
+            });
+        };
+        updateDimensions();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(updateDimensions);
+        observer.observe(target);
+        return () => observer.disconnect();
+    }, [displayItemsKey, isLoading]);
     const setItemSize = useCallback((index, measuredSize) => {
         var _a;
         if (itemSizeMap.current[index] === measuredSize)
@@ -335,7 +355,7 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
                 (item === null || item === void 0 ? void 0 : item.label) ||
                 (typeof item === "string" || typeof item === "number" ? item : null) }, index));
     };
-    return (_jsxs("div", { children: [searchable && (_jsx(SearchInput, { variant: "outlined", size: size, placeholder: "Search", defaultValue: searchValue, onChange: (e) => {
+    return (_jsxs(MenuItemListRoot, { children: [searchable && (_jsx(SearchInput, { variant: "outlined", size: size, placeholder: "Search", defaultValue: searchValue, onChange: (e) => {
                     if (!manualSearch) {
                         handleSearch(e);
                     }

package/dist/DropDownMenu/components/StyledContent.js

@@ -7,7 +7,7 @@ export const StyledContent = styled.div `
   overflow-y: hidden;
   overflow-x: hidden;
 
-  width: var(--mfui-dropdown-reference-width, 150px);
+  width: max(var(--mfui-dropdown-reference-width, 0px), 180px);
   max-width: 400px;
   max-height: ${({ maxDropdownHeight }) => Number.isInteger(maxDropdownHeight)
     ? `${maxDropdownHeight}px`

package/dist/DropDownMenu/components/StyledInnerItemContainer.js

@@ -5,5 +5,6 @@ export const StyledInnerItemContainer = styled.div.attrs({
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
+  min-height: 0;
   overflow: hidden;
 `;

package/dist/FileViewer/FileViewer.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import styled from "styled-components";
 import { CodeViewer, ImageViewer, OfficeViewer, PdfViewer, VideoViewer, } from "./viewers";
 import { FloatingPortal } from "@floating-ui/react";
-import { DownloadIcon, XIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
+import { DownloadIcon, RotateCwIcon, XIcon, ZoomInIcon, ZoomOutIcon, } from "lucide-react";
 import { Button } from "../Button";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Loader from "../Loader";
 var ViewerTypes;
 (function (ViewerTypes) {
@@ -24,7 +24,18 @@ const ZoomableViewerTypes = [
 ];
 const RotatableViewerTypes = [ViewerTypes.Image];
 const OfficeExtensions = ["doc", "docx", "xls", "xlsx", "ppt", "pptx"];
-const ImageExtensions = ["jpg", "jpeg", "png", "gif"];
+const ImageExtensions = [
+    "jpg",
+    "jpeg",
+    "png",
+    "gif",
+    "webp",
+    "bmp",
+    "svg",
+    "avif",
+    "tif",
+    "tiff",
+];
 const VideoExtensions = ["mp4", "webm", "mov"];
 const AudioExtensions = ["mp3", "wav"];
 const PDFExtensions = ["pdf"];
@@ -125,10 +136,14 @@ const StyledInnerContainer = styled.div.attrs({
   }
 `;
 const resolveViewerType = (file) => {
-    var _a, _b;
+    var _a, _b, _c;
     let ext = (_a = file === null || file === void 0 ? void 0 : file.ext) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    const type = (_b = file === null || file === void 0 ? void 0 : file.type) === null || _b === void 0 ? void 0 : _b.toLowerCase();
     if (!ext) {
-        ext = (_b = file.name.split(".").pop()) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+        ext = (_c = file.name.split(".").pop()) === null || _c === void 0 ? void 0 : _c.toLowerCase();
+    }
+    if (type === null || type === void 0 ? void 0 : type.startsWith("image/")) {
+        return ViewerTypes.Image;
     }
     if (!ext) {
         return ViewerTypes.Code;
@@ -158,19 +173,28 @@ const resolveViewerType = (file) => {
 };
 export const FileViewer = ({ file, open, isPending, onClose }) => {
     const [zoomFactor, setZoomFactor] = useState(1);
+    const [rotation, setRotation] = useState(0);
+    useEffect(() => {
+        setZoomFactor(1);
+        setRotation(0);
+    }, [file === null || file === void 0 ? void 0 : file.url, file === null || file === void 0 ? void 0 : file.name, open]);
     if (!open)
         return null;
     if (!file)
         return null;
     const viewerType = resolveViewerType(file);
+    const resetViewerState = () => {
+        setZoomFactor(1);
+        setRotation(0);
+    };
     const handleBackgroundClick = (e) => {
         onClose === null || onClose === void 0 ? void 0 : onClose();
-        setZoomFactor(1);
+        resetViewerState();
     };
     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();
-                                setZoomFactor(1);
-                            }, 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, children: _jsx(ZoomInIcon, { size: 18, onClick: () => setZoomFactor((prev) => prev * 1.1) }) }), _jsx(Button, { variant: "text", disabled: !file.url, children: _jsx(ZoomOutIcon, { size: 18, onClick: () => setZoomFactor((prev) => prev * 0.9) }) })] })), _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, 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: {
+                                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: {
                             margin: "auto",
                             display: "flex",
                             gap: "10px",

package/dist/FileViewer/viewers/ImageViewer.d.ts

@@ -2,5 +2,6 @@ import { File } from "../FileViewer";
 export declare const ImageViewer: React.FC<{
     file: File;
     zoomFactor?: number;
+    rotation?: number;
     isPending?: boolean;
 }>;

package/dist/FileViewer/viewers/ImageViewer.js

@@ -10,9 +10,7 @@ const ImageViewerContainer = styled.div `
   overflow: auto;
 `;
 const ImageCanvas = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  position: relative;
   flex: 0 0 auto;
   min-width: 100%;
   min-height: 100%;
@@ -20,8 +18,11 @@ const ImageCanvas = styled.div `
 const Image = styled.img `
   box-sizing: border-box;
   display: block;
-  flex: 0 0 auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
   object-fit: contain;
+  transform-origin: center;
 
   // set orientation
   image-orientation: from-image;
@@ -36,7 +37,7 @@ const StyledLoader = styled.div `
   gap: 10px;
   height: 100%;
 `;
-export const ImageViewer = ({ file, zoomFactor = 1, isPending }) => {
+export const ImageViewer = ({ file, zoomFactor = 1, rotation = 0, isPending }) => {
     const containerRef = useRef(null);
     const [imageLoaded, setImageLoaded] = useState(false);
     const [containerSize, setContainerSize] = useState({
@@ -47,6 +48,8 @@ export const ImageViewer = ({ file, zoomFactor = 1, isPending }) => {
         naturalWidth: 0,
         naturalHeight: 0,
     });
+    const normalizedRotation = ((rotation % 360) + 360) % 360;
+    const isRotatedSideways = normalizedRotation % 180 !== 0;
     const fittedDimensions = useMemo(() => {
         const { naturalWidth, naturalHeight } = originalDimensions;
         if (naturalWidth === 0 ||
@@ -54,16 +57,33 @@ export const ImageViewer = ({ file, zoomFactor = 1, isPending }) => {
             containerSize.width === 0 ||
             containerSize.height === 0) {
             return {
-                width: naturalWidth,
-                height: naturalHeight,
+                canvasWidth: isRotatedSideways ? naturalHeight : naturalWidth,
+                canvasHeight: isRotatedSideways ? naturalWidth : naturalHeight,
+                imageWidth: naturalWidth,
+                imageHeight: naturalHeight,
             };
         }
-        const fitScale = Math.min(containerSize.width / naturalWidth, containerSize.height / naturalHeight);
+        const rotatedNaturalWidth = isRotatedSideways
+            ? naturalHeight
+            : naturalWidth;
+        const rotatedNaturalHeight = isRotatedSideways
+            ? naturalWidth
+            : naturalHeight;
+        const fitScale = Math.min(containerSize.width / rotatedNaturalWidth, containerSize.height / rotatedNaturalHeight);
+        const imageWidth = naturalWidth * fitScale * zoomFactor;
+        const imageHeight = naturalHeight * fitScale * zoomFactor;
         return {
-            width: naturalWidth * fitScale * zoomFactor,
-            height: naturalHeight * fitScale * zoomFactor,
+            canvasWidth: isRotatedSideways ? imageHeight : imageWidth,
+            canvasHeight: isRotatedSideways ? imageWidth : imageHeight,
+            imageWidth,
+            imageHeight,
         };
-    }, [containerSize, originalDimensions, zoomFactor]);
+    }, [
+        containerSize,
+        isRotatedSideways,
+        originalDimensions,
+        zoomFactor,
+    ]);
     useEffect(() => {
         if (!file.url)
             return;
@@ -104,11 +124,12 @@ export const ImageViewer = ({ file, zoomFactor = 1, isPending }) => {
         return (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] }));
     }
     return (_jsxs(ImageViewerContainer, { ref: containerRef, className: "mfui-ImageViewer", children: [!showImage && (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] })), showImage && (_jsx(ImageCanvas, { style: {
-                    width: fittedDimensions.width,
-                    height: fittedDimensions.height,
+                    width: fittedDimensions.canvasWidth,
+                    height: fittedDimensions.canvasHeight,
                 }, children: _jsx(Image, { src: file.url, alt: file.name ? file.name : "Image", style: {
-                        width: fittedDimensions.width,
-                        height: fittedDimensions.height,
+                        width: fittedDimensions.imageWidth,
+                        height: fittedDimensions.imageHeight,
+                        transform: `translate(-50%, -50%) rotate(${normalizedRotation}deg)`,
                     }, onClick: (e) => {
                         e.stopPropagation();
                     } }) }))] }));

package/dist/MonolithUIProvider/MonolithUIProvider.d.ts

@@ -81,6 +81,29 @@ export interface MonolithDefaultTheme {
         action: {
             hover: string;
         };
+        codeBlock?: {
+            background: string;
+            text: string;
+            border: string;
+            selection: string;
+            syntax: {
+                comment: string;
+                punctuation: string;
+                property: string;
+                selector: string;
+                operator: string;
+                keyword: string;
+                string: string;
+                number: string;
+                function: string;
+                variable: string;
+                tag: string;
+                attribute: string;
+                literal: string;
+                deleted: string;
+                inserted: string;
+            };
+        };
         divider: string;
     };
     header: {

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

@@ -1,6 +1,6 @@
 import { Extensions } from "../Enums";
 import { DropDownItem, DropDownMenuProps } from "../../DropDownMenu";
-import { ReactElement } from "react";
+import { ReactElement, ReactNode } from "react";
 import { ButtonProps } from "../../Button";
 import { Editor } from "@tiptap/react";
 export interface BubbleMenuContentProps {
@@ -17,7 +17,7 @@ export type BubbleItem = {
     name: Extensions | string;
     icon?: React.FC<any>;
     type: "menu";
-    label?: string | Element;
+    label?: ReactNode;
     items: BubbleMenuDropDownItem[];
     arrow?: boolean;
     isActive?: (editor: Editor) => boolean;
@@ -29,7 +29,7 @@ export type BubbleItem = {
     name: Extensions | string;
     icon?: React.FC<any>;
     type: "button";
-    label?: string | Element;
+    label?: ReactNode;
     arrow?: boolean;
     isActive?: (editor: Editor) => boolean;
     buttonRender?: (props: any) => ReactElement;