@monolith-forensics/monolith-ui 2.1.0 → 2.1.1-dev.4

package/dist/DropDownMenu/DropDownMenu.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { Menu, MenuItemList, StyledInnerItemContainer } from "./components";
 import { DEFAULT_DROPDOWN_MAX_HEIGHT } from "./constants";
@@ -10,10 +10,13 @@ const getNumericCssLength = (value) => {
     const pixelMatch = value.trim().match(/^(\d+(?:\.\d+)?)px$/);
     return pixelMatch ? Number(pixelMatch[1]) : undefined;
 };
-export const DropDownMenu = ({ data, children, defaultValue, value, variant, arrow, size, searchable, grouped, onAddNew, loading, onScroll, onScrollToTop, onScrollToBottom, onSearch, manualSearch, multiselect, enableSelectAll, enableSelectedOptionStyling, renderOption, dynamicOptionHeight, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, query, disabled, }) => {
-    var _a, _b, _c, _d, _e, _f;
-    const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
-    const maxDropdownHeight = (_f = (_e = (_c = getNumericCssLength((_b = dropDownProps === null || dropDownProps === void 0 ? void 0 : dropDownProps.style) === null || _b === void 0 ? void 0 : _b.height)) !== null && _c !== void 0 ? _c : getNumericCssLength((_d = dropDownProps === null || dropDownProps === void 0 ? void 0 : dropDownProps.style) === null || _d === void 0 ? void 0 : _d.maxHeight)) !== null && _e !== void 0 ? _e : getNumericCssLength(dropDownProps === null || dropDownProps === void 0 ? void 0 : dropDownProps.maxDropdownHeight)) !== null && _f !== void 0 ? _f : DEFAULT_DROPDOWN_MAX_HEIGHT;
+export const DropDownMenu = ({ data, children, defaultValue, value, variant, arrow, size, searchable, grouped, onAddNew, loading, loadingMore, onScroll, onScrollToTop, onScrollToBottom, onSearch, manualSearch, multiselect, enableSelectAll, enableSelectedOptionStyling, renderOption, dynamicOptionHeight, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, disabled, }) => {
+    var _a, _b, _c, _d, _e;
+    const isObjectArray = [
+        ...(data || []),
+        ...(value || defaultValue || []),
+    ].some((item) => { var _a; return (_a = Object.keys(item || {})) === null || _a === void 0 ? void 0 : _a.includes("label"); });
+    const maxDropdownHeight = (_e = (_d = (_b = getNumericCssLength((_a = dropDownProps === null || dropDownProps === void 0 ? void 0 : dropDownProps.style) === null || _a === void 0 ? void 0 : _a.height)) !== null && _b !== void 0 ? _b : getNumericCssLength((_c = dropDownProps === null || dropDownProps === void 0 ? void 0 : dropDownProps.style) === null || _c === void 0 ? void 0 : _c.maxHeight)) !== null && _d !== void 0 ? _d : getNumericCssLength(dropDownProps === null || dropDownProps === void 0 ? void 0 : dropDownProps.maxDropdownHeight)) !== null && _e !== void 0 ? _e : DEFAULT_DROPDOWN_MAX_HEIGHT;
     const [internalSelected, setInternalSelected] = useState(defaultValue || []);
     const isControlled = value !== undefined;
     const selected = isControlled ? value || [] : internalSelected;
@@ -45,5 +48,5 @@ export const DropDownMenu = ({ data, children, defaultValue, value, variant, arr
     const handleScrollToBottom = (e) => {
         onScrollToBottom === null || onScrollToBottom === void 0 ? void 0 : onScrollToBottom(e);
     };
-    return (_jsx(Menu, { label: children, disabled: disabled, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, onMenuClose: handleMenuClose, dropDownProps: dropDownProps, children: _jsxs(StyledInnerItemContainer, { children: [loading && _jsx("div", { children: "Loading..." }), !loading && (_jsx(MenuItemList, { menuItems: data, searchable: searchable, grouped: grouped, onAddNew: onAddNew, onSearch: onSearch, manualSearch: manualSearch, dynamicOptionHeight: dynamicOptionHeight, maxDropdownHeight: maxDropdownHeight, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, enableSelectAll: enableSelectAll, enableSelectedOptionStyling: enableSelectedOptionStyling, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, handleSetSelected: handleSetSelected, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll, onScrollToTop: onScrollToTop, onScrollToBottom: handleScrollToBottom, query: query }))] }) }));
+    return (_jsx(Menu, { label: children, disabled: disabled, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, onMenuClose: handleMenuClose, dropDownProps: dropDownProps, children: _jsx(StyledInnerItemContainer, { children: _jsx(MenuItemList, { menuItems: data, searchable: searchable, grouped: grouped, onAddNew: onAddNew, onSearch: onSearch, manualSearch: manualSearch, dynamicOptionHeight: dynamicOptionHeight, maxDropdownHeight: maxDropdownHeight, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, enableSelectAll: enableSelectAll, enableSelectedOptionStyling: enableSelectedOptionStyling, size: size, loading: loading, loadingMore: loadingMore, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, handleSetSelected: handleSetSelected, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll, onScrollToTop: onScrollToTop, onScrollToBottom: handleScrollToBottom }) }) }));
 };

package/dist/DropDownMenu/components/MenuItem.js

@@ -26,7 +26,7 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
     return (_jsx(Tooltip, { content: TooltipContent ? _jsx(TooltipContent, { data: itemData }) : null, side: "left", children: _jsx(Button, Object.assign({}, props, { ref: useMergeRefs([
                 item.ref,
                 forwardedRef,
-            ]), type: "button", role: "menuitem", tabIndex: isActive ? 0 : -1, disabled: disabled, justify: "start", color: props.color, selected: false }, menu.getItemProps({
+            ]), type: "button", role: "menuitem", tabIndex: isActive ? 0 : -1, "data-multiselect": multiselect, disabled: disabled, justify: "start", color: props.color, selected: false }, menu.getItemProps({
             onClick(event) {
                 var _a;
                 (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
@@ -104,5 +104,9 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
       white-space: ${({ $dynamicHeight }) => $dynamicHeight ? "normal" : "nowrap"};
       text-overflow: ${({ $dynamicHeight }) => $dynamicHeight ? "clip" : "ellipsis"};
     }
+
+    &[data-multiselect="true"] [data-position="left"] {
+      padding-inline-end: ${({ size = "sm" }) => `${getControlSizeTokens(size).iconGap}px`};
+    }
   }
 `;

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

@@ -1,6 +1,6 @@
 import { ComponentType } from "react";
 import { Size } from "../../core";
-import { DropDownItem, DropDownMenuProps } from "../types";
+import { DropDownItem } from "../types";
 export declare const MenuItemList: React.FC<{
     menuItems: DropDownItem[];
     searchable?: boolean;
@@ -25,5 +25,6 @@ export declare const MenuItemList: React.FC<{
     onScrollToTop?: (e: Event) => void;
     onScrollToBottom?: (e: Event) => void;
     maxDropdownHeight?: number;
-    query?: DropDownMenuProps["query"];
+    loading?: boolean;
+    loadingMore?: boolean;
 }>;

package/dist/DropDownMenu/components/MenuItemList.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import styled from "styled-components";
@@ -18,7 +7,6 @@ import CheckBox from "../../CheckBox";
 import { getControlSizeTokens } from "../../core";
 import { DropDownMenu } from "../DropDownMenu";
 import { MenuItem } from "./MenuItem";
-import { useInfiniteQuery } from "@tanstack/react-query";
 import { useDebouncedCallback } from "use-debounce";
 import { SearchInput } from "./SearchInput";
 import Loader from "../../Loader";
@@ -108,6 +96,17 @@ const GroupHeader = styled.div `
     min-width: fit-content;
   }
 `;
+const LoadingMoreRow = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: ${(props) => props.theme.palette.text.secondary};
+  min-height: ${({ $size = "sm" }) => `${getControlSizeTokens($size).menuRowHeight}px`};
+  padding: ${({ $size = "sm" }) => `0px ${getControlSizeTokens($size).menuItemPaddingX}px`};
+  font-size: ${({ $size = "sm" }) => `${getControlSizeTokens($size).supportingFontSize}px`};
+  box-sizing: border-box;
+`;
 const MeasuredRow = ({ children, index, setItemSize, style }) => {
     const rowRef = useRef(null);
     useLayoutEffect(() => {
@@ -129,29 +128,14 @@ const MeasuredRow = ({ children, index, setItemSize, style }) => {
     }, [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, enableSelectedOptionStyling, grouped, onAddNew, size, handleAddItem, handleRemoveItem, handleSetSelected, onItemSelect, renderOption, onScroll, onScrollToTop, onScrollToBottom, maxDropdownHeight = DEFAULT_DROPDOWN_MAX_HEIGHT, query, }) => {
+export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dynamicOptionHeight, selected, TooltipContent, multiselect, enableSelectAll, enableSelectedOptionStyling, grouped, onAddNew, size, handleAddItem, handleRemoveItem, handleSetSelected, onItemSelect, renderOption, onScroll, onScrollToTop, onScrollToBottom, maxDropdownHeight = DEFAULT_DROPDOWN_MAX_HEIGHT, loading, loadingMore, }) => {
     const [searchValue, setSearchValue] = useState("");
-    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 || [];
-    const _options = !!query ? infiniteSelectOptions : menuItems;
-    const debouncedFetchNextPage = useDebouncedCallback(() => {
-        if (!isLoading && !!query) {
-            fetchNextPage();
-        }
-    }, 50);
     const handleSearch = useDebouncedCallback((e) => {
         setSearchValue(e.target.value);
     }, 150);
@@ -166,7 +150,7 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
         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 = _options.filter((item) => item.visible !== false);
+    const visibleItems = menuItems.filter((item) => item.visible !== false);
     const filteredItems = searchable
         ? filterMenuItems(visibleItems, searchValue)
         : visibleItems;
@@ -191,12 +175,23 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
                 },
             ];
         }
+        if (loadingMore) {
+            items = [
+                ...items,
+                {
+                    _isLoadingMore: true,
+                    label: "Loading more...",
+                    value: "__loading_more__",
+                },
+            ];
+        }
         return items;
     })();
     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._isLoadingMore &&
         !item.disabled &&
         !item.items), [displayItems]);
     const selectableKeys = useMemo(() => new Set(selectableItems.map(getItemKey)), [selectableItems]);
@@ -205,12 +200,13 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
         selectedSelectableItems.length === selectableItems.length;
     const someSelectableItemsSelected = selectedSelectableItems.length > 0 && !allSelectableItemsSelected;
     const selectedDisplayIndex = displayItems.findIndex((item) => {
-        if (item._isGroupHeader || item._isAddNew)
+        if (item._isGroupHeader || item._isAddNew || item._isLoadingMore) {
             return false;
+        }
         return isItemSelected(item);
     });
     const selectedDisplayKey = selected === null || selected === void 0 ? void 0 : selected.map(getItemKey).join("|");
-    const isLoading = isLoadingInfiniteQuery;
+    const isLoading = loading;
     const handleOnScroll = useCallback((event) => {
         const scrollTolerance = 15;
         onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
@@ -220,9 +216,8 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
         }
         if (scrollHeight - scrollTop <= clientHeight + scrollTolerance) {
             onScrollToBottom === null || onScrollToBottom === void 0 ? void 0 : onScrollToBottom(event);
-            debouncedFetchNextPage();
         }
-    }, [debouncedFetchNextPage, onScroll, onScrollToBottom, onScrollToTop]);
+    }, [onScroll, onScrollToBottom, onScrollToTop]);
     const handleToggleSelectAll = () => {
         if (selectableItems.length === 0)
             return;
@@ -249,12 +244,12 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
     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"}`)
+        .map((item) => `${item.value}:${item.label}:${item._isGroupHeader ? "g" : item._isLoadingMore ? "l" : "i"}`)
         .join("|");
     const getDynamicItemSize = (index) => {
-        var _a;
+        var _a, _b;
         return itemSizeMap.current[index] ||
-            (((_a = displayItems[index]) === null || _a === void 0 ? void 0 : _a._isGroupHeader)
+            (((_a = displayItems[index]) === null || _a === void 0 ? void 0 : _a._isGroupHeader) || ((_b = displayItems[index]) === null || _b === void 0 ? void 0 : _b._isLoadingMore)
                 ? itemHeight
                 : estimatedDynamicItemHeight);
     };
@@ -271,32 +266,8 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
         DROPDOWN_CONTENT_VERTICAL_PADDING -
         searchHeight -
         selectAllHeight);
-    const availableHeight = viewPortDimensions.height || maxListHeight;
-    const height = Math.min(estimatedHeight, availableHeight, maxListHeight);
+    const height = Math.min(estimatedHeight, maxListHeight);
     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)
@@ -342,6 +313,9 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
         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._isLoadingMore) {
+            return (_jsxs(LoadingMoreRow, { "$size": size, style: style, children: [_jsx(Loader, { size: 14 }), _jsx("span", { children: "Loading more..." })] }, "__loading_more__"));
+        }
         if (item._isAddNew) {
             return (_jsx(MenuItem, { className: "MenuItem", size: size, leftSection: _jsx(Plus, { size: 14 }), onClick: (e) => {
                     e.preventDefault();
@@ -370,7 +344,7 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
                         handleSearch(e);
                     }
                     onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.target.value);
-                } })), multiselect && enableSelectAll && selectableItems.length > 0 && (_jsx(MenuItem, { className: "MenuItem", size: size, leftSection: _jsx(CheckBox, { value: allSelectableItemsSelected, partialCheck: someSelectableItemsSelected, size: size, onChange: handleToggleSelectAll }), onClick: (e) => {
+                } })), multiselect && enableSelectAll && selectableItems.length > 0 && (_jsx(MenuItem, { className: "MenuItem", size: size, multiselect: true, leftSection: _jsx(CheckBox, { value: allSelectableItemsSelected, partialCheck: someSelectableItemsSelected, size: size, onChange: handleToggleSelectAll }), onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     handleToggleSelectAll();
@@ -382,7 +356,7 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
                     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: 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 }) => {
+                }, children: [_jsx("div", { style: { fontSize: `${sizeTokens.supportingFontSize}px` }, children: "Loading..." }), _jsx(Loader, {})] })), !isLoading && (_jsx(ListViewPort, { 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;

package/dist/DropDownMenu/types.d.ts

@@ -3,7 +3,6 @@ import { Size, Variant } from "../core";
 import Input from "../Input";
 import { ButtonProps } from "../Button";
 import { StyledContent } from "./components";
-import { InfiniteData, UseInfiniteQueryOptions } from "@tanstack/react-query";
 export type DropDownItem = {
     toLowerCase?: () => string;
     label: string;
@@ -49,20 +48,12 @@ export type DropDownMenuProps = {
     dynamicOptionHeight?: boolean;
     onAddNew?: (value: string) => void;
     loading?: boolean;
+    loadingMore?: boolean;
     arrow?: boolean;
     dropDownProps?: ComponentPropsWithoutRef<typeof StyledContent>;
     buttonRender?: (props: any) => ReactElement;
     buttonProps?: ButtonProps;
     disabled?: boolean;
-    query?: Omit<UseInfiniteQueryOptions, "select" | "queryKey" | "queryFn" | "getNextPageParam" | "initialPageParam"> & {
-        select: (data: InfiniteData<unknown>) => DropDownItem[];
-        queryKey: (args: {
-            search?: string;
-        }) => UseInfiniteQueryOptions["queryKey"];
-        queryFn: UseInfiniteQueryOptions["queryFn"];
-        getNextPageParam: UseInfiniteQueryOptions["getNextPageParam"];
-        initialPageParam: UseInfiniteQueryOptions["initialPageParam"];
-    };
 };
 export type MenuProps = {
     label?: any;

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/QueryFilter/QueryFilter.types.d.ts

@@ -1,4 +1,4 @@
-import type { DropDownItem, DropDownMenuProps } from "../DropDownMenu";
+import type { DropDownItem } from "../DropDownMenu";
 import type { SuperDatePickerProps } from "../SuperDatePicker";
 export interface UseQueryFilterProps {
     value?: Query | null;
@@ -28,6 +28,22 @@ export type Operator = {
 };
 export type InputType = "text" | "number" | "date" | "datetime" | "multiselect";
 export type BetweenEditor = "inputs" | "superDatePicker";
+export type FilterOptionsQueryResult = {
+    items: DropDownItem[];
+    nextPageParam?: unknown;
+};
+export type FilterOptionsQuery = {
+    cacheKey: string | ((args: {
+        search?: string;
+    }) => string);
+    initialPageParam?: unknown;
+    staleTime?: number;
+    loadPage: (args: {
+        search?: string;
+        pageParam: unknown;
+        signal: AbortSignal;
+    }) => Promise<FilterOptionsQueryResult>;
+};
 export interface FilterDefinition {
     dataField: string;
     label: string;
@@ -43,7 +59,7 @@ export interface FilterDefinition {
     dropDownOptions?: {
         style?: React.CSSProperties;
     };
-    query?: DropDownMenuProps["query"];
+    query?: FilterOptionsQuery;
 }
 export interface Rule {
     id?: string;

package/dist/QueryFilter/components/MultiSelectEditor.js

@@ -1,17 +1,172 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTheme } from "styled-components";
+import { useDebouncedCallback } from "use-debounce";
 import { DropDownMenu } from "../../DropDownMenu";
-import { QUERY_FILTER_SELECT_VALUE_LABEL, } from "../QueryFilter.constants";
+import { QUERY_FILTER_SELECT_VALUE_LABEL } from "../QueryFilter.constants";
+const DEFAULT_FILTER_OPTIONS_STALE_TIME = 5 * 60 * 1000;
+const DEFAULT_INITIAL_PAGE_PARAM = 1;
+const filterOptionsCache = new Map();
+const filterOptionsRequestCache = new Map();
+const getItemKey = (item) => item && typeof item === "object" && "value" in item ? item.value : item;
+const mergeDropDownItems = (...itemLists) => {
+    const seen = new Set();
+    const merged = [];
+    for (const item of itemLists.flat()) {
+        const key = getItemKey(item);
+        if (seen.has(key))
+            continue;
+        seen.add(key);
+        merged.push(item);
+    }
+    return merged;
+};
+const getCacheKey = (query, search) => {
+    if (typeof query.cacheKey === "function") {
+        return query.cacheKey({ search });
+    }
+    return `${query.cacheKey}:${search || ""}`;
+};
+const hasNextPageParam = (pageParam) => pageParam !== undefined && pageParam !== null;
+const getPageRequestKey = (cacheKey, pageParam) => {
+    try {
+        return `${cacheKey}:${JSON.stringify(pageParam)}`;
+    }
+    catch (_a) {
+        return `${cacheKey}:${String(pageParam)}`;
+    }
+};
+const loadFilterOptionsPage = (query, search, pageParam) => {
+    const cacheKey = getCacheKey(query, search);
+    const requestKey = getPageRequestKey(cacheKey, pageParam);
+    const pendingRequest = filterOptionsRequestCache.get(requestKey);
+    if (pendingRequest) {
+        return pendingRequest;
+    }
+    const abortController = new AbortController();
+    const request = query
+        .loadPage({
+        search,
+        pageParam,
+        signal: abortController.signal,
+    })
+        .finally(() => {
+        filterOptionsRequestCache.delete(requestKey);
+    });
+    filterOptionsRequestCache.set(requestKey, request);
+    return request;
+};
+const useFilterOptionsQuery = (query) => {
+    const [search, setSearch] = useState("");
+    const [items, setItems] = useState([]);
+    const [nextPageParam, setNextPageParam] = useState();
+    const [isLoading, setIsLoading] = useState(false);
+    const [isFetchingNextPage, setIsFetchingNextPage] = useState(false);
+    const initialRequestRef = useRef(0);
+    const nextPageRequestRef = useRef(0);
+    useEffect(() => {
+        var _a, _b;
+        if (!query) {
+            setItems([]);
+            setNextPageParam(undefined);
+            setIsLoading(false);
+            setIsFetchingNextPage(false);
+            return;
+        }
+        let isCurrent = true;
+        const requestId = initialRequestRef.current + 1;
+        initialRequestRef.current = requestId;
+        const cacheKey = getCacheKey(query, search);
+        const staleTime = (_a = query.staleTime) !== null && _a !== void 0 ? _a : DEFAULT_FILTER_OPTIONS_STALE_TIME;
+        const cached = filterOptionsCache.get(cacheKey);
+        if (cached && Date.now() - cached.timestamp < staleTime) {
+            setItems(cached.items);
+            setNextPageParam(cached.nextPageParam);
+            setIsLoading(false);
+            setIsFetchingNextPage(false);
+            return;
+        }
+        setIsLoading(true);
+        setIsFetchingNextPage(false);
+        setItems([]);
+        setNextPageParam(undefined);
+        loadFilterOptionsPage(query, search, (_b = query.initialPageParam) !== null && _b !== void 0 ? _b : DEFAULT_INITIAL_PAGE_PARAM)
+            .then((result) => {
+            if (!isCurrent || initialRequestRef.current !== requestId)
+                return;
+            setItems(result.items);
+            setNextPageParam(result.nextPageParam);
+            filterOptionsCache.set(cacheKey, Object.assign(Object.assign({}, result), { timestamp: Date.now() }));
+        })
+            .catch((error) => {
+            if (!isCurrent || initialRequestRef.current !== requestId)
+                return;
+            console.error("Failed to load filter options", error);
+        })
+            .finally(() => {
+            if (!isCurrent || initialRequestRef.current !== requestId)
+                return;
+            setIsLoading(false);
+        });
+        return () => {
+            isCurrent = false;
+        };
+    }, [query, search]);
+    const loadNextPage = useCallback(() => {
+        if (!query || isLoading || isFetchingNextPage)
+            return;
+        if (!hasNextPageParam(nextPageParam))
+            return;
+        const requestId = nextPageRequestRef.current + 1;
+        nextPageRequestRef.current = requestId;
+        const cacheKey = getCacheKey(query, search);
+        setIsFetchingNextPage(true);
+        loadFilterOptionsPage(query, search, nextPageParam)
+            .then((result) => {
+            if (nextPageRequestRef.current !== requestId)
+                return;
+            setItems((currentItems) => {
+                const nextItems = mergeDropDownItems(currentItems, result.items);
+                filterOptionsCache.set(cacheKey, {
+                    items: nextItems,
+                    nextPageParam: result.nextPageParam,
+                    timestamp: Date.now(),
+                });
+                return nextItems;
+            });
+            setNextPageParam(result.nextPageParam);
+        })
+            .catch((error) => {
+            if (nextPageRequestRef.current !== requestId)
+                return;
+            console.error("Failed to load more filter options", error);
+        })
+            .finally(() => {
+            if (nextPageRequestRef.current !== requestId)
+                return;
+            setIsFetchingNextPage(false);
+        });
+    }, [isFetchingNextPage, isLoading, nextPageParam, query, search]);
+    return {
+        items,
+        isLoading,
+        isFetchingNextPage,
+        loadNextPage,
+        setSearch,
+    };
+};
 export const MultiSelectEditor = ({ rule, filterDef, onChange }) => {
     var _a, _b;
     const theme = useTheme();
+    const optionsQuery = useFilterOptionsQuery(filterDef === null || filterDef === void 0 ? void 0 : filterDef.query);
+    const handleAsyncSearch = useDebouncedCallback((value) => {
+        optionsQuery.setSearch(value);
+    }, 150);
     const handleChange = (selected, diff) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(selected, diff);
     };
-    const options = [
-        ...((filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions) || []),
-        ...(rule.options || []),
-    ];
+    const dropDownOptions = useMemo(() => mergeDropDownItems((filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions) || [], optionsQuery.items || []), [filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions, optionsQuery.items]);
+    const options = useMemo(() => mergeDropDownItems(dropDownOptions, rule.options || []), [dropDownOptions, rule.options]);
     const selected = ((_a = rule.value) === null || _a === void 0 ? void 0 : _a.map((value) => {
         const option = options.find((o) => o.value == value);
         return option || { label: value, value };
@@ -20,7 +175,7 @@ export const MultiSelectEditor = ({ rule, filterDef, onChange }) => {
     if (Array.isArray(rule.value) && rule.value.length > 1) {
         display = `${rule.value.length} ${(filterDef === null || filterDef === void 0 ? void 0 : filterDef.pluralLabel) || "Values"}`;
     }
-    return (_jsx(DropDownMenu, { data: (filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions) || [], variant: "outlined", multiselect: true, searchable: true, size: "xs", buttonProps: {
+    return (_jsx(DropDownMenu, { data: dropDownOptions, variant: "outlined", multiselect: true, searchable: true, size: "xs", buttonProps: {
             title: QUERY_FILTER_SELECT_VALUE_LABEL,
             variant: "contained",
             size: "xxs",
@@ -40,5 +195,7 @@ export const MultiSelectEditor = ({ rule, filterDef, onChange }) => {
             },
         }, dropDownProps: {
             style: Object.assign({ width: 200, maxWidth: 400 }, (_b = filterDef === null || filterDef === void 0 ? void 0 : filterDef.dropDownOptions) === null || _b === void 0 ? void 0 : _b.style),
-        }, value: selected, onChange: handleChange, query: filterDef === null || filterDef === void 0 ? void 0 : filterDef.query, children: display }));
+        }, loading: optionsQuery.isLoading && dropDownOptions.length === 0, loadingMore: optionsQuery.isFetchingNextPage, value: selected, onChange: handleChange, manualSearch: !!(filterDef === null || filterDef === void 0 ? void 0 : filterDef.query), onSearch: (filterDef === null || filterDef === void 0 ? void 0 : filterDef.query)
+            ? (value) => handleAsyncSearch(value)
+            : undefined, onScrollToBottom: (filterDef === null || filterDef === void 0 ? void 0 : filterDef.query) ? optionsQuery.loadNextPage : undefined, children: display }));
 };

package/dist/core/controlSizes.js

@@ -40,7 +40,7 @@ const CONTROL_SIZE_TOKENS = {
         inputPaddingX: 10,
         buttonPaddingX: 12,
         iconSize: 14,
-        iconGap: 6,
+        iconGap: 4,
         adornmentWidth: 28,
         menuRowHeight: 28,
         menuItemPaddingX: 10,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "2.1.0",
+  "version": "2.1.1-dev.4",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -85,12 +85,10 @@
     "use-debounce": "^10.0.0"
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^5.59.16",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@tanstack/react-query": "5.59.16",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",
     "@types/overlayscrollbars": "^1.12.5",

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;