@monolith-forensics/monolith-ui 1.8.1-dev.1 → 1.8.1-dev.3

package/dist/DropDownMenu/components/MenuItemList.js

@@ -10,9 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import styled from "styled-components";
-import { FixedSizeList } from "react-window";
+import { FixedSizeList, VariableSizeList } from "react-window";
 import { Plus } from "lucide-react";
 import CheckBox from "../../CheckBox";
 import { getControlSizeTokens } from "../../core";
@@ -22,6 +22,7 @@ import { useInfiniteQuery } from "@tanstack/react-query";
 import { useDebouncedCallback } from "use-debounce";
 import { SearchInput } from "./SearchInput";
 import Loader from "../../Loader";
+const getItemKey = (item) => item && typeof item === "object" && "value" in item ? item.value : item;
 const filterMenuItems = (menuItems, searchValue) => {
     return menuItems.filter((item) => {
         var _a, _b, _c;
@@ -55,6 +56,28 @@ const buildGroupedDisplayList = (items) => {
 const ListViewPort = styled.div.attrs({ className: "ListViewPort" }) `
   display: flex;
   flex-direction: column;
+  width: 100%;
+`;
+const ListScroller = styled.div `
+  scrollbar-color: ${({ theme }) => `${theme.scrollbar.thumb} ${theme.scrollbar.track}`};
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${(props) => props.theme.scrollbar.track};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${(props) => props.theme.scrollbar.thumb};
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: ${(props) => props.theme.scrollbar.thumbHover};
+  }
 `;
 const GroupHeader = styled.div `
   display: flex;
@@ -77,17 +100,41 @@ const GroupHeader = styled.div `
     min-width: fit-content;
   }
 `;
-export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, selected, TooltipContent, multiselect, grouped, onAddNew, size, handleAddItem, handleRemoveItem, onItemSelect, renderOption, onScroll, onScrollToTop, onScrollToBottom, query, }) => {
-    var _a;
+const MeasuredRow = ({ children, index, setItemSize, style }) => {
+    const rowRef = useRef(null);
+    useLayoutEffect(() => {
+        const row = rowRef.current;
+        if (!row)
+            return;
+        const updateSize = () => {
+            const measuredHeight = Math.ceil(row.getBoundingClientRect().height);
+            if (measuredHeight > 0) {
+                setItemSize(index, measuredHeight);
+            }
+        };
+        updateSize();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(updateSize);
+        observer.observe(row);
+        return () => observer.disconnect();
+    }, [children, index, setItemSize]);
+    return (_jsx("div", { style: Object.assign(Object.assign({}, style), { overflow: "visible" }), children: _jsx("div", { ref: rowRef, children: children }) }));
+};
+export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dynamicOptionHeight, selected, TooltipContent, multiselect, enableSelectAll, grouped, onAddNew, size, handleAddItem, handleRemoveItem, handleSetSelected, onItemSelect, renderOption, onScroll, onScrollToTop, onScrollToBottom, query, }) => {
     const [searchValue, setSearchValue] = useState("");
-    const _b = query !== null && query !== void 0 ? query : {}, { queryKey, queryFn, getNextPageParam, initialPageParam } = _b, rest = __rest(_b, ["queryKey", "queryFn", "getNextPageParam", "initialPageParam"]);
-    const abortController = new AbortController();
+    const _a = query !== null && query !== void 0 ? query : {}, { queryKey, queryFn, getNextPageParam, initialPageParam } = _a, rest = __rest(_a, ["queryKey", "queryFn", "getNextPageParam", "initialPageParam"]);
     const targetElm = useRef(null);
     const listElm = useRef(null);
+    const fixedListRef = useRef(null);
+    const variableListRef = useRef(null);
+    const hasHandledInitialSelectedScroll = useRef(false);
+    const itemSizeMap = useRef({});
     const [viewPortDimensions, setViewPortDimensions] = useState({
         width: 0,
         height: 0,
     });
+    const [, setMeasurementRevision] = useState(0);
     const { data: infiniteQueryResult, isLoading: isLoadingInfiniteQuery, fetchNextPage, } = useInfiniteQuery(Object.assign({ queryKey: (queryKey === null || queryKey === void 0 ? void 0 : queryKey({ search: searchValue })) || [], queryFn: queryFn, getNextPageParam: (query === null || query === void 0 ? void 0 : query.getNextPageParam) || (() => undefined), initialPageParam: (query === null || query === void 0 ? void 0 : query.initialPageParam) || 1, enabled: !!query }, rest));
     const infinteOptionsData = infiniteQueryResult;
     const infiniteSelectOptions = infinteOptionsData || [];
@@ -105,6 +152,9 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, se
         if (multiselect) {
             isSelected ? handleRemoveItem(item) : handleAddItem(item);
         }
+        else {
+            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);
     };
@@ -135,39 +185,55 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, se
         }
         return items;
     })();
-    const isObjectArray = (_a = Object.keys((visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
+    const selectedKeys = useMemo(() => new Set((selected || []).map(getItemKey)), [selected]);
+    const isItemSelected = (item) => selectedKeys.has(getItemKey(item));
+    const selectableItems = useMemo(() => displayItems.filter((item) => !item._isGroupHeader &&
+        !item._isAddNew &&
+        !item.disabled &&
+        !item.items), [displayItems]);
+    const selectableKeys = useMemo(() => new Set(selectableItems.map(getItemKey)), [selectableItems]);
+    const selectedSelectableItems = useMemo(() => selectableItems.filter((item) => selectedKeys.has(getItemKey(item))), [selectableItems, selectedKeys]);
+    const allSelectableItemsSelected = selectableItems.length > 0 &&
+        selectedSelectableItems.length === selectableItems.length;
+    const someSelectableItemsSelected = selectedSelectableItems.length > 0 && !allSelectableItemsSelected;
+    const selectedDisplayIndex = displayItems.findIndex((item) => {
+        if (item._isGroupHeader || item._isAddNew)
+            return false;
+        return isItemSelected(item);
+    });
+    const selectedDisplayKey = selected === null || selected === void 0 ? void 0 : selected.map(getItemKey).join("|");
     const isLoading = isLoadingInfiniteQuery;
-    const handleOnScroll = (event) => {
+    const handleOnScroll = useCallback((event) => {
         const scrollTolerance = 15;
         onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
         const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
-        // scroll to top
         if (scrollTop <= scrollTolerance) {
             onScrollToTop === null || onScrollToTop === void 0 ? void 0 : onScrollToTop(event);
         }
-        // Scroll to bottom
         if (scrollHeight - scrollTop <= clientHeight + scrollTolerance) {
             onScrollToBottom === null || onScrollToBottom === void 0 ? void 0 : onScrollToBottom(event);
             debouncedFetchNextPage();
         }
+    }, [debouncedFetchNextPage, onScroll, onScrollToBottom, onScrollToTop]);
+    const handleToggleSelectAll = () => {
+        if (selectableItems.length === 0)
+            return;
+        const currentSelected = selected || [];
+        if (allSelectableItemsSelected) {
+            const nextSelected = currentSelected.filter((selectedItem) => !selectableKeys.has(getItemKey(selectedItem)));
+            handleSetSelected(nextSelected, selectedSelectableItems);
+            return;
+        }
+        const itemsToAdd = selectableItems.filter((item) => !isItemSelected(item));
+        handleSetSelected([...currentSelected, ...itemsToAdd], itemsToAdd);
     };
     useLayoutEffect(() => {
-        if (listElm.current) {
-            listElm.current.addEventListener("scroll", (e) => handleOnScroll(e));
-        }
-        // Event cleanup
-        return () => {
-            abortController.abort();
-        };
-    }, [
-        filteredItems,
-        listElm.current,
-        isLoading,
-        onScroll,
-        onScrollToTop,
-        onScrollToBottom,
-        handleOnScroll,
-    ]);
+        const list = listElm.current;
+        if (!list)
+            return;
+        list.addEventListener("scroll", handleOnScroll);
+        return () => list.removeEventListener("scroll", handleOnScroll);
+    }, [dynamicOptionHeight, handleOnScroll, isLoading, renderOption]);
     useLayoutEffect(() => {
         var _a;
         if (targetElm.current) {
@@ -181,19 +247,101 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, se
     const overscanCount = 10;
     const sizeTokens = getControlSizeTokens(size || "sm");
     const itemHeight = sizeTokens.menuRowHeight;
+    const dynamicListEnabled = dynamicOptionHeight !== null && dynamicOptionHeight !== void 0 ? dynamicOptionHeight : Boolean(renderOption);
+    const estimatedDynamicItemHeight = itemHeight + 16;
     const itemCount = (displayItems === null || displayItems === void 0 ? void 0 : displayItems.length) || 0;
+    const displayItemsKey = displayItems
+        .map((item) => `${item.value}:${item.label}:${item._isGroupHeader ? "g" : "i"}`)
+        .join("|");
+    const getDynamicItemSize = (index) => {
+        var _a;
+        return itemSizeMap.current[index] ||
+            (((_a = displayItems[index]) === null || _a === void 0 ? void 0 : _a._isGroupHeader) ? itemHeight : estimatedDynamicItemHeight);
+    };
+    const estimatedHeight = dynamicListEnabled
+        ? displayItems.reduce((total, _, index) => total + getDynamicItemSize(index), 0)
+        : itemCount * itemHeight;
     const height = viewPortDimensions.height
         ? viewPortDimensions.height
-        : itemCount * itemHeight < 200
-            ? itemCount * itemHeight
+        : estimatedHeight < 200
+            ? estimatedHeight
             : 200;
-    const width = viewPortDimensions.width || 188;
+    const width = "100%";
+    const setItemSize = useCallback((index, measuredSize) => {
+        var _a;
+        if (itemSizeMap.current[index] === measuredSize)
+            return;
+        itemSizeMap.current = Object.assign(Object.assign({}, itemSizeMap.current), { [index]: measuredSize });
+        (_a = variableListRef.current) === null || _a === void 0 ? void 0 : _a.resetAfterIndex(index);
+        setMeasurementRevision((revision) => revision + 1);
+    }, []);
+    useLayoutEffect(() => {
+        var _a;
+        itemSizeMap.current = {};
+        (_a = variableListRef.current) === null || _a === void 0 ? void 0 : _a.resetAfterIndex(0, true);
+        setMeasurementRevision((revision) => revision + 1);
+    }, [displayItemsKey, dynamicListEnabled]);
+    useLayoutEffect(() => {
+        var _a, _b, _c, _d;
+        if (multiselect) {
+            if (hasHandledInitialSelectedScroll.current || itemCount === 0) {
+                return;
+            }
+            hasHandledInitialSelectedScroll.current = true;
+            if (selectedDisplayIndex < 0)
+                return;
+            (_a = fixedListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(selectedDisplayIndex, "smart");
+            (_b = variableListRef.current) === null || _b === void 0 ? void 0 : _b.scrollToItem(selectedDisplayIndex, "smart");
+            return;
+        }
+        if (selectedDisplayIndex < 0)
+            return;
+        (_c = fixedListRef.current) === null || _c === void 0 ? void 0 : _c.scrollToItem(selectedDisplayIndex, "smart");
+        (_d = variableListRef.current) === null || _d === void 0 ? void 0 : _d.scrollToItem(selectedDisplayIndex, "smart");
+    }, [
+        displayItemsKey,
+        itemCount,
+        multiselect,
+        selectedDisplayIndex,
+        selectedDisplayKey,
+    ]);
+    const renderDisplayItem = (item, index, style) => {
+        if (item._isGroupHeader) {
+            return (_jsxs(GroupHeader, { "$size": size, style: style, children: [_jsx("span", { className: "group-line" }), _jsx("span", { className: "group-label", children: item.label }), _jsx("span", { className: "group-line" })] }, item.value));
+        }
+        if (item._isAddNew) {
+            return (_jsx(MenuItem, { className: "MenuItem", size: size, leftSection: _jsx(Plus, { size: 14 }), onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onAddNew === null || onAddNew === void 0 ? void 0 : onAddNew(item.value);
+                }, style: style, children: item.label }, "__add_new__"));
+        }
+        const isSelected = isItemSelected(item);
+        if (item.items) {
+            return (_jsx(DropDownMenu, { data: item.items, size: size, buttonProps: style ? Object.assign({ style }, item) : Object.assign({}, item), disabled: item.disabled, dynamicOptionHeight: dynamicListEnabled, children: item.label }));
+        }
+        return (_jsx(MenuItem, { className: "MenuItem", itemData: item, TooltipContent: TooltipContent, "data-selected": !multiselect && 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, "$dynamicHeight": dynamicListEnabled, 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));
+    };
     return (_jsxs("div", { children: [searchable && (_jsx(SearchInput, { variant: "outlined", size: size, placeholder: "Search", defaultValue: searchValue, onChange: (e) => {
                     if (!manualSearch) {
                         handleSearch(e);
                     }
                     onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.target.value);
-                } })), isLoading && (_jsxs("div", { style: {
+                } })), multiselect && enableSelectAll && selectableItems.length > 0 && (_jsx(MenuItem, { className: "MenuItem", size: size, leftSection: _jsx(CheckBox, { value: allSelectableItemsSelected, partialCheck: someSelectableItemsSelected, size: size, onChange: handleToggleSelectAll }), onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleToggleSelectAll();
+                }, children: "Select all" })), isLoading && (_jsxs("div", { style: {
                     display: "flex",
                     flexDirection: "column",
                     gap: "10px",
@@ -201,40 +349,15 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, se
                     alignItems: "center",
                     height: "100%",
                     padding: "10px 0",
-                }, children: [_jsx("div", { style: { fontSize: `${sizeTokens.supportingFontSize}px` }, children: "Loading..." }), _jsx(Loader, {})] })), !isLoading && (_jsx(ListViewPort, { ref: targetElm, children: _jsx(FixedSizeList, { itemData: displayItems, overscanCount: overscanCount, height: height, width: width, itemCount: itemCount, itemSize: itemHeight, outerRef: listElm, children: ({ data, index, style }) => {
+                }, children: [_jsx("div", { style: { fontSize: `${sizeTokens.supportingFontSize}px` }, children: "Loading..." }), _jsx(Loader, {})] })), !isLoading && (_jsx(ListViewPort, { ref: targetElm, children: dynamicListEnabled ? (_jsx(VariableSizeList, { ref: variableListRef, itemData: displayItems, overscanCount: overscanCount, height: height, width: width, itemCount: itemCount, itemSize: getDynamicItemSize, outerElementType: ListScroller, outerRef: listElm, children: ({ data, index, style }) => {
+                        const item = data === null || data === void 0 ? void 0 : data[index];
+                        if (!item)
+                            return null;
+                        return (_jsx(MeasuredRow, { index: index, setItemSize: setItemSize, style: style, children: renderDisplayItem(item, index) }));
+                    } })) : (_jsx(FixedSizeList, { ref: fixedListRef, itemData: displayItems, overscanCount: overscanCount, height: height, width: width, itemCount: itemCount, itemSize: itemHeight, outerElementType: ListScroller, outerRef: listElm, children: ({ data, index, style }) => {
                         const item = data === null || data === void 0 ? void 0 : data[index];
                         if (!item)
                             return null;
-                        if (item._isGroupHeader) {
-                            return (_jsxs(GroupHeader, { "$size": size, style: style, children: [_jsx("span", { className: "group-line" }), _jsx("span", { className: "group-label", children: item.label }), _jsx("span", { className: "group-line" })] }, item.value));
-                        }
-                        if (item._isAddNew) {
-                            return (_jsx(MenuItem, { className: "MenuItem", size: size, leftSection: _jsx(Plus, { size: 14 }), onClick: (e) => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    onAddNew === null || onAddNew === void 0 ? void 0 : onAddNew(item.value);
-                                }, style: style, children: item.label }, "__add_new__"));
-                        }
-                        const isSelected = !!(selected === null || selected === void 0 ? void 0 : selected.find((s) => {
-                            return 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: Object.assign({ style }, item), 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));
-                    } }) }))] }));
+                        return renderDisplayItem(item, index, style);
+                    } })) }))] }));
 };

package/dist/DropDownMenu/components/StyledContent.js

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

package/dist/DropDownMenu/types.d.ts

@@ -31,6 +31,7 @@ export type DropDownMenuProps = {
     defaultValue?: DropDownItem[];
     value?: DropDownItem[];
     multiselect?: boolean;
+    enableSelectAll?: boolean;
     size?: Size;
     title?: string;
     TooltipContent?: ComponentType<any>;
@@ -44,6 +45,7 @@ export type DropDownMenuProps = {
     searchable?: boolean;
     manualSearch?: boolean;
     grouped?: boolean;
+    dynamicOptionHeight?: boolean;
     onAddNew?: (value: string) => void;
     loading?: boolean;
     arrow?: boolean;
@@ -77,4 +79,5 @@ export type MenuProps = {
     TooltipContent?: ComponentType<any>;
     dropDownProps?: ComponentPropsWithoutRef<typeof StyledContent>;
     disabled?: boolean;
+    dynamicOptionHeight?: boolean;
 };

package/dist/FileViewer/viewers/ImageViewer.js

@@ -1,15 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 import Loader from "../../Loader";
+const IMAGE_VIEWER_PADDING = 10;
 const ImageViewerContainer = styled.div `
+  box-sizing: border-box;
   height: 100%;
-
-  text-align: center;
-  padding: 10px;
+  padding: ${IMAGE_VIEWER_PADDING}px;
+  overflow: auto;
+`;
+const ImageCanvas = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  min-width: 100%;
+  min-height: 100%;
 `;
-// Updated Image styled-component to remove max-width and max-height
 const Image = styled.img `
+  box-sizing: border-box;
+  display: block;
+  flex: 0 0 auto;
   object-fit: contain;
 
   // set orientation
@@ -26,33 +37,79 @@ const StyledLoader = styled.div `
   height: 100%;
 `;
 export const ImageViewer = ({ file, zoomFactor = 1, isPending }) => {
+    const containerRef = useRef(null);
     const [imageLoaded, setImageLoaded] = useState(false);
+    const [containerSize, setContainerSize] = useState({
+        width: 0,
+        height: 0,
+    });
     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 = () => {
+    const fittedDimensions = useMemo(() => {
+        const { naturalWidth, naturalHeight } = originalDimensions;
+        if (naturalWidth === 0 ||
+            naturalHeight === 0 ||
+            containerSize.width === 0 ||
+            containerSize.height === 0) {
+            return {
+                width: naturalWidth,
+                height: naturalHeight,
+            };
+        }
+        const fitScale = Math.min(containerSize.width / naturalWidth, containerSize.height / naturalHeight);
+        return {
+            width: naturalWidth * fitScale * zoomFactor,
+            height: naturalHeight * fitScale * zoomFactor,
+        };
+    }, [containerSize, originalDimensions, zoomFactor]);
+    useEffect(() => {
         if (!file.url)
             return;
+        let loading = true;
+        setImageLoaded(false);
         const img = document.createElement("img");
         img.src = file.url;
         img.onload = () => {
-            setOriginalDimensions((prev) => (Object.assign(Object.assign({}, prev), { naturalWidth: img.naturalWidth, naturalHeight: img.naturalHeight })));
+            if (!loading)
+                return;
+            setOriginalDimensions({
+                naturalWidth: img.naturalWidth,
+                naturalHeight: img.naturalHeight,
+            });
             setImageLoaded(true);
         };
-    };
-    useEffect(() => {
-        loadImage();
+        return () => {
+            loading = false;
+        };
     }, [file.url]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const updateContainerSize = () => {
+            setContainerSize({
+                width: Math.max(0, container.clientWidth - IMAGE_VIEWER_PADDING * 2),
+                height: Math.max(0, container.clientHeight - IMAGE_VIEWER_PADDING * 2),
+            });
+        };
+        updateContainerSize();
+        const resizeObserver = new ResizeObserver(updateContainerSize);
+        resizeObserver.observe(container);
+        return () => resizeObserver.disconnect();
+    }, []);
+    const showImage = imageLoaded && containerSize.width > 0 && containerSize.height > 0;
     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();
-                } }))] }));
+    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,
+                }, children: _jsx(Image, { src: file.url, alt: file.name ? file.name : "Image", style: {
+                        width: fittedDimensions.width,
+                        height: fittedDimensions.height,
+                    }, onClick: (e) => {
+                        e.stopPropagation();
+                    } }) }))] }));
 };

package/dist/MonolithUIProvider/MonolithUIProvider.d.ts

@@ -38,6 +38,7 @@ export interface MonolithDefaultTheme {
             alt: string;
             secondary: string;
             gradient: string;
+            subtle: string;
         };
         menu: {
             background: string;

package/dist/QueryFilter/DefaultOperators.d.ts

@@ -1,76 +1 @@
-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[];
+export { DefaultOperators, Operators, DEFAULT_QUERY_FILTER_OPERATORS, QUERY_FILTER_OPERATORS, } from "./QueryFilter.constants";

package/dist/QueryFilter/DefaultOperators.js

@@ -1,21 +1 @@
-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);
+export { DefaultOperators, Operators, DEFAULT_QUERY_FILTER_OPERATORS, QUERY_FILTER_OPERATORS, } from "./QueryFilter.constants";