@monolith-forensics/monolith-ui 1.2.91 → 1.2.92

package/dist/DropDownMenu/components/MenuItemList.js

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

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

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

package/dist/DropDownMenu/components/SearchInput.js

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

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

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

package/dist/DropDownMenu/components/StyledContent.js

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+export const StyledContent = styled.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow-y: hidden;
+  overflow-x: hidden;
+
+  width: 200px;
+  min-width: 150px;
+  max-width: 400px;
+  max-height: ${({ maxDropdownHeight }) => Number.isInteger(maxDropdownHeight)
+    ? `${maxDropdownHeight}px`
+    : maxDropdownHeight || "250px"};
+
+  background-color: ${(props) => props.theme.palette.background.default};
+  background-color: ${({ theme, variant }) => {
+    switch (variant) {
+        case "filled":
+            return theme.palette.input.background;
+        case "outlined":
+            return theme.palette.input.background;
+        case "text":
+            return "transparent";
+        default:
+            return theme.palette.input.background;
+    }
+}};
+
+  border-radius: 5px;
+  border: 1px solid ${(props) => props.theme.palette.divider};
+  outline: none;
+  padding: 5px;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+
+  &[data-empty="true"] {
+    display: none;
+  }
+`;

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

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

package/dist/DropDownMenu/components/StyledFloatContainer.js

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

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

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

package/dist/DropDownMenu/components/StyledInnerItemContainer.js

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

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

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

package/dist/DropDownMenu/components/index.js

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

package/dist/DropDownMenu/index.d.ts

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

package/dist/DropDownMenu/index.js

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

package/dist/DropDownMenu/types.d.ts

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

package/dist/FieldLabel/FieldLabel.d.ts

@@ -6,7 +6,7 @@ interface InfoComponentProps {
     description?: string;
     label?: string | ReactNode;
 }
-export declare const InfoComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<InfoComponentProps, never>> & string & Omit<({ className, children, description, label }: InfoComponentProps) => string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined, keyof import("react").Component<any, {}, any>>;
+export declare const InfoComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<InfoComponentProps, never>> & string & Omit<({ className, children, description, label }: InfoComponentProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined, keyof import("react").Component<any, {}, any>>;
 interface FieldLabelProps {
     className?: string;
     children?: ReactNode;

package/dist/FileViewer/FileViewer.d.ts

@@ -0,0 +1,13 @@
+export type File = {
+    name: string;
+    ext?: string;
+    size?: number;
+    type?: string;
+    url?: string;
+};
+export declare const FileViewer: React.FC<{
+    file?: File;
+    open?: boolean;
+    isPending?: boolean;
+    onClose: () => void;
+}>;

package/dist/FileViewer/FileViewer.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 Button from "../Button";
+import { useState } from "react";
+import Loader from "../Loader";
+var ViewerTypes;
+(function (ViewerTypes) {
+    ViewerTypes["Office"] = "office";
+    ViewerTypes["Image"] = "image";
+    ViewerTypes["Video"] = "video";
+    ViewerTypes["Audio"] = "audio";
+    ViewerTypes["PDF"] = "pdf";
+    ViewerTypes["Text"] = "text";
+    ViewerTypes["Code"] = "code";
+})(ViewerTypes || (ViewerTypes = {}));
+const ZoomableViewerTypes = [
+    ViewerTypes.Image,
+    ViewerTypes.PDF,
+    ViewerTypes.Code,
+    ViewerTypes.Text,
+];
+const RotatableViewerTypes = [ViewerTypes.Image];
+const OfficeExtensions = ["doc", "docx", "xls", "xlsx", "ppt", "pptx"];
+const ImageExtensions = ["jpg", "jpeg", "png", "gif"];
+const VideoExtensions = ["mp4", "webm", "mov"];
+const AudioExtensions = ["mp3", "wav"];
+const PDFExtensions = ["pdf"];
+const PlainTextExtensions = ["txt", "log", "csv"];
+const CodeExtensions = [
+    "js",
+    "ts",
+    "jsx",
+    "tsx",
+    "json",
+    "html",
+    "css",
+    "xml",
+    "py",
+    "py3",
+    "dymo",
+];
+const StyledMenu = styled.div `
+  height: 50px;
+  min-height: 50px;
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  font-size: 14px;
+
+  padding: 0 10px;
+
+  background-color: ${(props) => props.theme.palette.background.alt};
+`;
+const StyledActionsMenu = styled.div `
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+`;
+const StyledContainer = styled.div.attrs({ className: "FileViewer-container" }) `
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  width: 100%;
+
+  background-color: rgba(0, 0, 0, 0.5);
+
+  // blur
+  backdrop-filter: blur(3px);
+
+  // scroll bar
+  ::-webkit-scrollbar {
+    width: 14px;
+    height: 14px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.075);
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
+    border: 4px solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+
+    &:hover {
+      background-color: ${(props) => props.theme.palette.primary.main};
+      border-radius: 10px;
+      border: 4px solid rgba(0, 0, 0, 0);
+      background-clip: padding-box;
+    }
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: rgba(0, 0, 0, 0.5);
+  }
+`;
+const StyledInnerContainer = styled.div.attrs({
+    className: "FileViewer-inner-container",
+}) `
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+
+  height: 0px;
+  width: 100%;
+
+  overflow-y: auto;
+
+  &[data-type="office"] {
+    margin-bottom: 10px;
+  }
+`;
+const resolveViewerType = (file) => {
+    var _a, _b;
+    let ext = (_a = file === null || file === void 0 ? void 0 : file.ext) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    if (!ext) {
+        ext = (_b = file.name.split(".").pop()) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+    }
+    if (!ext) {
+        return ViewerTypes.Code;
+    }
+    if (OfficeExtensions.includes(ext)) {
+        return ViewerTypes.Office;
+    }
+    if (ImageExtensions.includes(ext)) {
+        return ViewerTypes.Image;
+    }
+    if (VideoExtensions.includes(ext)) {
+        return ViewerTypes.Video;
+    }
+    if (AudioExtensions.includes(ext)) {
+        return ViewerTypes.Audio;
+    }
+    if (PDFExtensions.includes(ext)) {
+        return ViewerTypes.PDF;
+    }
+    if (PlainTextExtensions.includes(ext)) {
+        return ViewerTypes.Text;
+    }
+    if (CodeExtensions.includes(ext)) {
+        return ViewerTypes.Code;
+    }
+    return ViewerTypes.Code;
+};
+export const FileViewer = ({ file, open, isPending, onClose }) => {
+    const [zoomFactor, setZoomFactor] = useState(1);
+    if (!open)
+        return null;
+    if (!file)
+        return null;
+    const viewerType = resolveViewerType(file);
+    const handleBackgroundClick = (e) => {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        setZoomFactor(1);
+    };
+    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: {
+                            margin: "auto",
+                            display: "flex",
+                            gap: "10px",
+                            flexDirection: "column",
+                            alignItems: "center",
+                        }, children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading File..." })] }) }))] }) }));
+};

package/dist/FileViewer/index.d.ts

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

package/dist/FileViewer/index.js

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

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

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

package/dist/FileViewer/viewers/CodeViewer.js

@@ -0,0 +1,106 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import styled from "styled-components";
+import Loader from "../../Loader";
+const resolveLanguage = (file) => __awaiter(void 0, void 0, void 0, function* () {
+    const { languages } = yield import("@codemirror/language-data");
+    let ext = file.ext;
+    if (!ext) {
+        ext = file.name.split(".").pop();
+    }
+    if (!ext) {
+        return null;
+    }
+    const l = languages.find((lang) => lang.extensions.includes(ext));
+    if (l) {
+        return yield l.load();
+    }
+    return null;
+});
+const getFileData = (file) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!file.url)
+        return "";
+    const response = yield fetch(file.url);
+    const text = yield response.text();
+    return text;
+});
+const loadCodemirror = (file) => __awaiter(void 0, void 0, void 0, function* () {
+    const language = yield resolveLanguage(file);
+    const CodeMirror = yield import("@uiw/react-codemirror");
+    const { vscodeDark } = yield import("@uiw/codemirror-theme-vscode");
+    return { language, CodeMirror, theme: vscodeDark };
+});
+const StyledContainer = styled.div `
+  display: flex;
+  justify-content: center;
+
+  flex: 1 1 auto;
+  height: 0px;
+  width: 100%;
+
+  .cm-theme {
+    font-size: ${(props) => props.zoomFactor ? `${props.zoomFactor * 12}px` : "12px"};
+    width: 100%;
+  }
+
+  .cm-editor {
+    border: 1px solid ${(props) => props.theme.palette.divider};
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+  }
+`;
+const StyledLoader = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
+export const CodeViewer = ({ file, zoomFactor, isPending }) => {
+    const [CodeMirror, setCodeMirror] = useState(null);
+    const [language, setLanguage] = useState(null);
+    const [theme, setTheme] = useState(null);
+    const [query, setQuery] = useState({
+        data: null,
+        isLoading: false,
+    });
+    if (!query.data) {
+        if (!query.isLoading) {
+            setQuery({ data: null, isLoading: true });
+            getFileData(file).then((text) => {
+                setQuery({ data: text, isLoading: false });
+            });
+        }
+    }
+    if (!CodeMirror) {
+        loadCodemirror(file).then((cm) => {
+            setCodeMirror(cm.CodeMirror);
+            setLanguage(cm.language);
+            setTheme(cm.theme);
+        });
+    }
+    const loading = query.isLoading || !CodeMirror;
+    const extensions = [];
+    if (language) {
+        extensions.push(language);
+    }
+    if (CodeMirror) {
+        extensions.push(CodeMirror.EditorView.lineWrapping);
+    }
+    if (isPending) {
+        return (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading File..." })] }));
+    }
+    return (_jsxs(StyledContainer, { zoomFactor: zoomFactor, children: [loading && (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading File..." })] })), !loading && (_jsx(CodeMirror.default, { value: query.data || "", theme: theme, extensions: extensions, readOnly: true, editable: false, onClick: (event) => {
+                    event.stopPropagation();
+                } }))] }));
+};

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

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

package/dist/FileViewer/viewers/ImageViewer.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+import Loader from "../../Loader";
+const ImageViewerContainer = styled.div `
+  height: 100%;
+
+  text-align: center;
+  padding: 10px;
+`;
+// Updated Image styled-component to remove max-width and max-height
+const Image = styled.img `
+  object-fit: contain;
+
+  // set orientation
+  image-orientation: from-image;
+
+  border: 1px solid ${(props) => props.theme.palette.divider};
+`;
+const StyledLoader = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  height: 100%;
+`;
+export const ImageViewer = ({ file, zoomFactor = 1, isPending }) => {
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [originalDimensions, setOriginalDimensions] = useState({
+        naturalWidth: 0,
+        naturalHeight: 0,
+        width: 0,
+        height: 0,
+    });
+    const handleImageLoad = (e) => {
+        setOriginalDimensions((prev) => (Object.assign(Object.assign({}, prev), { width: e.target.clientWidth, height: e.target.offsetHeight })));
+    };
+    const loadImage = () => {
+        if (!file.url)
+            return;
+        const img = document.createElement("img");
+        img.src = file.url;
+        img.onload = () => {
+            setOriginalDimensions((prev) => (Object.assign(Object.assign({}, prev), { naturalWidth: img.naturalWidth, naturalHeight: img.naturalHeight })));
+            setImageLoaded(true);
+        };
+    };
+    useEffect(() => {
+        loadImage();
+    }, [file.url]);
+    if (isPending) {
+        return (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] }));
+    }
+    return (_jsxs(ImageViewerContainer, { className: "mfui-ImageViewer", children: [!imageLoaded && (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] })), imageLoaded && (_jsx(Image, { src: file.url, alt: file.name ? file.name : "Image", zoomFactor: zoomFactor, onLoad: handleImageLoad, height: zoomFactor === 1 ? "100%" : originalDimensions.height * zoomFactor, onClick: (e) => {
+                    e.stopPropagation();
+                } }))] }));
+};

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

@@ -0,0 +1,5 @@
+import { File } from "../FileViewer";
+export declare const OfficeViewer: React.FC<{
+    file: File;
+    isPending?: boolean;
+}>;