@monolith-forensics/monolith-ui 1.3.16 → 1.3.17

package/dist/Button/Button.js

@@ -103,7 +103,7 @@ const StyledButton = styled.button `
     if (variant === "filled")
         return "white";
     if (color) {
-        return (((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.button) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b[color]) ||
+        return (((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.button) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[color]) ||
             colors[color] ||
             theme.palette.text.primary);
     }

package/dist/DropDownMenu/DropDownMenu.js

@@ -1,16 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
-import { useDebouncedCallback } from "use-debounce";
-import { Menu, MenuItemList, SearchInput, StyledInnerItemContainer, } from "./components";
-export const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, searchable, loading, onScroll, multiselect, renderOption, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, }) => {
+import { useState } from "react";
+import { Menu, MenuItemList, StyledInnerItemContainer } from "./components";
+export const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, searchable, loading, onScroll, onScrollToTop, onScrollToBottom, onSearch, manualSearch, multiselect, renderOption, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, query, }) => {
     var _a;
     const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
     const [selected, setSelected] = useState(defaultValue || []);
-    const [searchValue, setSearchValue] = useState("");
-    const searchInputRef = useRef(null);
-    const handleSearch = useDebouncedCallback((e) => {
-        setSearchValue(e.target.value);
-    }, 150);
     const handleAddItem = (item) => {
         setSelected((prev) => {
             let newSelected = [...prev, item];
@@ -27,8 +21,9 @@ export const DropDownMenu = ({ data, children, defaultValue, variant, arrow, siz
             return newSelected;
         });
     };
-    const handleMenuClose = () => {
-        setSearchValue("");
+    const handleMenuClose = () => { };
+    const handleScrollToBottom = (e) => {
+        onScrollToBottom === null || onScrollToBottom === void 0 ? void 0 : onScrollToBottom(e);
     };
-    return (_jsx(Menu, { label: children, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, onMenuClose: handleMenuClose, dropDownProps: dropDownProps, children: _jsxs(StyledInnerItemContainer, { children: [loading && _jsx("div", { children: "Loading..." }), searchable && (_jsx(SearchInput, { ref: searchInputRef, variant: "outlined", size: size, placeholder: "Search", defaultValue: searchValue, onChange: handleSearch })), !loading && (_jsx(MenuItemList, { menuItems: data, searchable: searchable, searchValue: searchValue, isObjectArray: isObjectArray, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll }))] }) }));
+    return (_jsx(Menu, { label: children, 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, onSearch: onSearch, manualSearch: manualSearch, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll, onScrollToTop: onScrollToTop, onScrollToBottom: handleScrollToBottom, query: query }))] }) }));
 };

package/dist/DropDownMenu/components/MenuItem.js

@@ -25,7 +25,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" }, menu.getItemProps({
+            ]), type: "button", role: "menuitem", tabIndex: isActive ? 0 : -1, disabled: disabled, justify: "start", color: props.color }, menu.getItemProps({
             onClick(event) {
                 var _a;
                 (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);

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

@@ -1,11 +1,12 @@
 import { ComponentType } from "react";
 import { Size } from "../../core";
-import { DropDownItem } from "../types";
+import { DropDownItem, DropDownMenuProps } from "../types";
 export declare const MenuItemList: React.FC<{
     menuItems: DropDownItem[];
     searchable?: boolean;
     searchValue?: string;
-    isObjectArray?: boolean;
+    onSearch?: (value: string) => void;
+    manualSearch?: boolean;
     selected?: DropDownItem[];
     TooltipContent?: ComponentType<any>;
     multiselect?: boolean;
@@ -15,4 +16,7 @@ export declare const MenuItemList: React.FC<{
     onItemSelect?: (item: DropDownItem) => void;
     renderOption?: (item: DropDownItem) => React.ReactNode;
     onScroll?: (e: Event) => void;
+    onScrollToTop?: (e: Event) => void;
+    onScrollToBottom?: (e: Event) => void;
+    query?: DropDownMenuProps["query"];
 }>;

package/dist/DropDownMenu/components/MenuItemList.js

@@ -1,10 +1,25 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 { 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";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useDebouncedCallback } from "use-debounce";
+import { SearchInput } from "./SearchInput";
+import Loader from "../../Loader";
 const filterMenuItems = (menuItems, searchValue) => {
     return menuItems.filter((item) => {
         var _a, _b, _c;
@@ -19,7 +34,10 @@ 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, }) => {
+export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, selected, TooltipContent, multiselect, size, handleAddItem, handleRemoveItem, onItemSelect, renderOption, onScroll, onScrollToTop, onScrollToBottom, query, }) => {
+    var _a;
+    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 targetElm = useRef(null);
     const listElm = useRef(null);
@@ -27,6 +45,18 @@ export const MenuItemList = ({ menuItems, searchable, searchValue = "", isObject
         width: 0,
         height: 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);
     const handleItemClick = (item, isSelected) => {
         var _a;
         if (multiselect) {
@@ -35,21 +65,43 @@ export const MenuItemList = ({ menuItems, searchable, searchValue = "", isObject
         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 visibleItems = _options.filter((item) => item.visible !== false);
     const filteredItems = searchable
         ? filterMenuItems(visibleItems, searchValue)
         : visibleItems;
+    const isObjectArray = (_a = Object.keys((visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
+    const isLoading = isLoadingInfiniteQuery;
+    const handleOnScroll = (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();
+        }
+    };
     useLayoutEffect(() => {
         if (listElm.current) {
-            if (onScroll) {
-                listElm.current.addEventListener("scroll", (e) => onScroll === null || onScroll === void 0 ? void 0 : onScroll(e));
-            }
+            listElm.current.addEventListener("scroll", (e) => handleOnScroll(e));
         }
         // Event cleanup
         return () => {
             abortController.abort();
         };
-    }, [filteredItems, listElm.current, onScroll]);
+    }, [
+        filteredItems,
+        listElm.current,
+        isLoading,
+        onScroll,
+        onScrollToTop,
+        onScrollToBottom,
+        handleOnScroll,
+    ]);
     useLayoutEffect(() => {
         var _a;
         if (targetElm.current) {
@@ -59,7 +111,7 @@ export const MenuItemList = ({ menuItems, searchable, searchValue = "", isObject
                 height: viewPortDimensions.height,
             });
         }
-    }, [targetElm.current]);
+    }, [targetElm.current, isLoading]);
     const overscanCount = 10;
     const itemHeight = 25;
     const itemCount = (filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.length) || 0;
@@ -69,24 +121,41 @@ export const MenuItemList = ({ menuItems, searchable, searchValue = "", isObject
             ? 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));
-            } }) }));
+    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: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "10px",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    height: "100%",
+                    padding: "10px 0",
+                }, children: [_jsx("div", { style: { fontSize: "12px" }, children: "Loading..." }), _jsx(Loader, {})] })), !isLoading && (_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) => {
+                            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: { 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/types.d.ts

@@ -3,6 +3,7 @@ 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;
@@ -27,6 +28,7 @@ export type DropDownMenuProps = {
     data: DropDownItem[];
     variant?: Variant;
     defaultValue?: DropDownItem[];
+    value?: DropDownItem[];
     multiselect?: boolean;
     size?: Size;
     title?: string;
@@ -35,13 +37,26 @@ export type DropDownMenuProps = {
     onChange?: (selected: DropDownItem[], diff: DropDownItem[]) => void;
     onItemSelect?: (item: DropDownItem) => void;
     onScroll?: (e: Event) => void;
+    onScrollToTop?: (e: Event) => void;
+    onScrollToBottom?: (e: Event) => void;
+    onSearch?: (value: string) => void;
+    searchable?: boolean;
+    manualSearch?: boolean;
     loading?: boolean;
     arrow?: boolean;
-    searchable?: 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/MonolithUIProvider/MonolithUIProvider.d.ts

@@ -132,6 +132,14 @@ export interface MonolithDefaultTheme {
             default: string;
             primary: string;
             secondary: string;
+            alternate: string;
+            error: string;
+        };
+        text: {
+            default: string;
+            primary: string;
+            secondary: string;
+            alternate: string;
             error: string;
         };
     };

package/dist/QueryFilter/QueryFilter.js

@@ -61,7 +61,7 @@ const BaseLabel = styled.div `
 
   border: 1px solid transparent;
 
-  background-color: ${({ theme }) => theme.palette.background.secondary};
+  background-color: ${({ theme }) => theme.button.background.alternate};
 
   font-size: 12px;
 
@@ -133,15 +133,44 @@ const dateFormatResolver = (resolution) => {
             return "YYYY-MM-DD HH:mm:ss";
     }
 };
-const ValueEditor = ({ rule, inputType, filterDef, onChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+const MultiSelectEditor = ({ rule, filterDef, onChange }) => {
+    var _a, _b, _c;
     const theme = useTheme();
+    const handleChange = (selected, diff) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(selected, diff);
+    };
+    const selected = (_a = rule.options) === null || _a === void 0 ? void 0 : _a.filter((o) => { var _a; return (_a = rule.value) === null || _a === void 0 ? void 0 : _a.includes(o.value); });
+    let display = ((_b = rule.options) === null || _b === void 0 ? void 0 : _b.map((o) => o.label).join(", ")) || "Select Value";
+    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: {
+            title: "Select Value",
+            variant: "contained",
+            size: "xxs",
+            style: {
+                padding: "0px 4px",
+                height: 20,
+                borderRadius: 0,
+                backgroundColor: theme.button.background.alternate,
+                fontSize: 11,
+                fontWeight: "normal",
+                color: !!rule.value && Array.isArray(rule.value) && rule.value.length > 0
+                    ? theme.palette.text.primary
+                    : theme.palette.text.secondary,
+            },
+        }, dropDownProps: {
+            style: Object.assign({ width: 200, maxWidth: 400 }, (_c = filterDef === null || filterDef === void 0 ? void 0 : filterDef.dropDownOptions) === null || _c === void 0 ? void 0 : _c.style),
+        }, defaultValue: selected || [], onChange: handleChange, query: filterDef === null || filterDef === void 0 ? void 0 : filterDef.query, children: display }));
+};
+const ValueEditor = ({ rule, inputType, filterDef, onChange }) => {
+    var _a, _b, _c, _d, _e, _f;
     const handleInputChange = useDebouncedCallback((e) => {
         const value = e.target.value;
         onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: value ? [value] : undefined }));
     }, 250);
     const handleMultiSelectChange = useDebouncedCallback((selected) => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: selected.map((s) => s.value) }));
+        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: selected.map((s) => s.value), options: selected }));
     }, 100);
     const handleTimestampChange = useDebouncedCallback((timestamp) => {
         let formattedValue = timestamp;
@@ -175,34 +204,7 @@ const ValueEditor = ({ rule, inputType, filterDef, onChange }) => {
         case "datetime":
             return (_jsx(StyledDateInput, { arrow: false, enableCalendar: true, format: dateFormatResolver(filterDef === null || filterDef === void 0 ? void 0 : filterDef.resolution), defaultValue: ((_e = rule.value) === null || _e === void 0 ? void 0 : _e[0]) === "" ? undefined : (_f = rule.value) === null || _f === void 0 ? void 0 : _f[0], onChange: handleTimestampChange }));
         case "multiselect":
-            let display = Array.isArray(rule.value) && rule.value.length > 0
-                ? ((_h = (_g = filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions) === null || _g === void 0 ? void 0 : _g.filter((o) => rule.value.includes(o.value))) === null || _h === void 0 ? void 0 : _h.map((o) => o.label).join(", ")) || "Select Value"
-                : "Select Value";
-            if (Array.isArray(rule.value) && rule.value.length > 1) {
-                display = `${rule.value.length} ${(filterDef === null || filterDef === void 0 ? void 0 : filterDef.pluralLabel) || "Values"}`;
-            }
-            if (!(filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions)) {
-                return _jsx(FieldLabel, { children: "Loading..." });
-            }
-            return (_jsx(DropDownMenu, { data: (filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions) || [], variant: "outlined", multiselect: true, searchable: true, buttonProps: {
-                    size: "xxs",
-                    style: {
-                        padding: "0px 4px",
-                        height: 20,
-                        borderRadius: 0,
-                        backgroundColor: theme.palette.background.secondary,
-                        fontSize: 11,
-                        fontWeight: "normal",
-                        color: !!rule.value &&
-                            Array.isArray(rule.value) &&
-                            rule.value.length > 0
-                            ? theme.palette.text.primary
-                            : theme.palette.text.secondary,
-                    },
-                }, dropDownProps: {
-                    style: Object.assign({ width: 200, maxWidth: 400 }, (_j = filterDef === null || filterDef === void 0 ? void 0 : filterDef.dropDownOptions) === null || _j === void 0 ? void 0 : _j.style),
-                }, defaultValue: (_k = filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions) === null || _k === void 0 ? void 0 : _k.filter((o) => Array.isArray(rule.value) &&
-                    !!rule.value.find((v) => v == o.value)), onChange: handleMultiSelectChange, children: display }));
+            return (_jsx(MultiSelectEditor, { rule: rule, filterDef: filterDef, onChange: handleMultiSelectChange }));
         default:
             return (_jsx(StyledInput, { placeholder: "Enter Value...", onChange: handleInputChange }));
     }
@@ -220,24 +222,26 @@ const ValueSelector = ({ rule, inputType, filterDef, onChange }) => {
             onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: newValue }));
             return;
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: e.value }));
+        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: e.value, options: e.options }));
     };
     const handleSecondaryValueChange = (e) => {
         var _a, _b;
-        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: [((_a = rule === null || rule === void 0 ? void 0 : rule.value) === null || _a === void 0 ? void 0 : _a[0]) || "", ((_b = e.value) === null || _b === void 0 ? void 0 : _b[0]) || ""] }));
+        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: [((_a = rule === null || rule === void 0 ? void 0 : rule.value) === null || _a === void 0 ? void 0 : _a[0]) || "", ((_b = e.value) === null || _b === void 0 ? void 0 : _b[0]) || ""], options: e.options }));
     };
     return (_jsxs(_Fragment, { children: [_jsx(ValueEditor, { rule: rule, inputType: inputType, filterDef: filterDef, onChange: handleValueChange }), isBetween && (_jsxs(_Fragment, { children: [_jsx(FieldLabel, { children: "and" }), _jsx(ValueEditor, { rule: Object.assign(Object.assign({}, rule), { value: [((_a = rule === null || rule === void 0 ? void 0 : rule.value) === null || _a === void 0 ? void 0 : _a[1]) || ""] }), inputType: inputType, filterDef: filterDef, onChange: handleSecondaryValueChange })] }))] }));
 };
 const CloseLabel = styled(StyledButton) `
   padding: 2px;
 
-  color: ${({ theme }) => theme.palette.text.secondary};
+  background-color: ${({ theme }) => theme.button.background.alternate};
+  color: ${({ theme }) => theme.button.text.alternate};
 
   &:hover {
     border-color: ${({ theme }) => theme.palette.primary.main};
   }
 `;
 const Rules = ({ rules = [], combinator, showCombinator, filterDefinitions, onDelete, onUpdate, onUpdateRootCombinator, }) => {
+    const theme = useTheme();
     const handleCombinatorChange = (e) => {
         onUpdateRootCombinator(e);
     };
@@ -256,17 +260,18 @@ const Rules = ({ rules = [], combinator, showCombinator, filterDefinitions, onDe
     return (_jsxs(_Fragment, { children: [showCombinator === true && (_jsx(DropDownMenu, { variant: "outlined", data: [
                     { label: "AND", value: "and" },
                     { label: "OR", value: "or" },
-                ], 
-                //   arrow={true}
-                size: "sm", buttonProps: {
+                ], size: "xs", buttonProps: {
                     title: "Chain these query filters together using AND | OR logic",
                     variant: "contained",
+                    color: "secondary",
                     style: {
                         fontWeight: "normal",
                         fontSize: 12,
                         padding: "3px 5px",
                         height: 20,
                         borderRadius: 4,
+                        backgroundColor: theme.button.background.alternate,
+                        color: theme.button.text.alternate,
                     },
                 }, onItemSelect: (e) => handleCombinatorChange(e.value), dropDownProps: {
                     style: { width: 175, maxWidth: 400 },
@@ -276,15 +281,18 @@ const Rules = ({ rules = [], combinator, showCombinator, filterDefinitions, onDe
                     throw new Error(`Filter Definition not found for dataField: ${rule.dataField}`);
                 const operatorOptions = (filterDef === null || filterDef === void 0 ? void 0 : filterDef.operators) || DefaultOperators;
                 const inputType = (filterDef === null || filterDef === void 0 ? void 0 : filterDef.inputType) || "text";
-                return (_jsxs(RuleContainer, { "data-rule-id": rule.id, children: [_jsx(FieldLabel, { children: rule.label }), _jsx(DropDownMenu, { variant: "outlined", data: operatorOptions, size: "sm", buttonProps: {
+                return (_jsxs(RuleContainer, { "data-rule-id": rule.id, children: [_jsx(FieldLabel, { children: rule.label }), _jsx(DropDownMenu, { variant: "outlined", data: operatorOptions, size: "xs", buttonProps: {
                                 title: "Select Operator",
                                 variant: "contained",
+                                color: "secondary",
                                 style: {
                                     fontWeight: "normal",
                                     fontSize: 12,
                                     padding: "3px 5px",
                                     height: 20,
                                     borderRadius: 0,
+                                    backgroundColor: theme.button.background.alternate,
+                                    color: theme.button.text.alternate,
                                 },
                             }, onItemSelect: (e) => handleOperatorChange(rule, e), dropDownProps: {
                                 style: { width: 175, maxWidth: 400 },

package/dist/QueryFilter/index.d.ts

@@ -2,4 +2,3 @@ export * from "./useQueryFilter";
 export * from "./QueryFilter";
 export * from "./types";
 export * from "./DefaultOperators";
-export * from "./useFilterHelper";

package/dist/QueryFilter/index.js

@@ -2,4 +2,3 @@ export * from "./useQueryFilter";
 export * from "./QueryFilter";
 export * from "./types";
 export * from "./DefaultOperators";
-export * from "./useFilterHelper";

package/dist/QueryFilter/types.d.ts

@@ -1,5 +1,4 @@
-import { UseQueryOptions } from "@tanstack/react-query";
-import { DropDownItem } from "../DropDownMenu";
+import { DropDownItem, DropDownMenuProps } from "../DropDownMenu";
 export interface UseQueryFilterProps {
     defaultFilter?: Query | null;
     filterDefinitions: FilterDefinition[];
@@ -36,14 +35,13 @@ export interface FilterDefinition {
         style?: React.CSSProperties;
     };
     editorType?: EditorType;
-    query?: Omit<UseQueryOptions, "select"> & {
-        select: (data: unknown) => DropDownItem[];
-    };
+    query?: DropDownMenuProps["query"];
 }
 export interface Rule {
     id?: string;
     dataField: string;
     value?: string[];
+    options?: DropDownItem[];
     operator: Operator;
     label: string;
 }

package/dist/theme/variants.js

@@ -173,8 +173,16 @@ const lightVariant = {
             default: "transparent",
             primary: customBlue[500],
             secondary: "#a1a1a1",
+            alternate: "#f0f0f0",
             error: "#f44336",
         },
+        text: {
+            default: "#FFF",
+            primary: "#FFF",
+            secondary: "#000",
+            alternate: "#000",
+            error: "#FFF",
+        },
     },
 };
 const darkVariant = merge(lightVariant, {
@@ -282,11 +290,13 @@ const darkVariant = merge(lightVariant, {
             default: "transparent",
             primary: customBlue[500],
             secondary: "#3f3f3f",
+            alternate: "#3f3f3f",
             error: "#f44336",
         },
         text: {
             primary: "rgba(255, 255, 255, 0.95)",
             secondary: "rgba(255, 255, 255, 0.6)",
+            alternate: "rgba(255, 255, 255, 0.6)",
         },
     },
 });

package/package.json

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

package/dist/QueryFilter/useFilterHelper.d.ts

@@ -1,20 +0,0 @@
-import { UseQueryOptions } from "@tanstack/react-query";
-import { FilterDefinition } from "./types";
-import { DropDownItem } from "../DropDownMenu";
-/** Override Filters Type
- * some properties have been overridden to allow for partial overrides
- */
-type FilterDefinitionOverride = Partial<Omit<FilterDefinition, "query" | "dataField">> & {
-    dataField: string;
-    query?: Omit<Partial<UseQueryOptions>, "select" | "queryKey"> & {
-        select?: (data: unknown) => DropDownItem[];
-        queryKey?: UseQueryOptions["queryKey"];
-    };
-};
-export interface UseFilterHelperParams {
-    filterDef: FilterDefinition[];
-    overrides?: FilterDefinitionOverride[];
-}
-export type UseFilterHelperType = (p: UseFilterHelperParams) => FilterDefinition[];
-export declare const useFilterHelper: UseFilterHelperType;
-export {};

package/dist/QueryFilter/useFilterHelper.js

@@ -1,61 +0,0 @@
-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 { useQueries } from "@tanstack/react-query";
-const mergeOverrides = (filterDef, overrides) => {
-    return filterDef.map((f) => {
-        var _a, _b, _c;
-        const override = overrides.find((o) => o.dataField === f.dataField);
-        if (!override) {
-            return f;
-        }
-        const { query, dropDownOptions } = override, rest = __rest(override, ["query", "dropDownOptions"]);
-        // Handle merge directly on query and dropDownOptions
-        // prevents overriding the entire query object
-        // allows user to override specific properties
-        if (query) {
-            f.query = Object.assign(Object.assign(Object.assign({}, f.query), query), { queryFn: query.queryFn || ((_a = f === null || f === void 0 ? void 0 : f.query) === null || _a === void 0 ? void 0 : _a.queryFn) || (() => { }), queryKey: query.queryKey || ((_b = f === null || f === void 0 ? void 0 : f.query) === null || _b === void 0 ? void 0 : _b.queryKey) || [], select: query.select || ((_c = f === null || f === void 0 ? void 0 : f.query) === null || _c === void 0 ? void 0 : _c.select) || (() => []) });
-        }
-        if (dropDownOptions) {
-            f.dropDownOptions = Object.assign(Object.assign({}, f.dropDownOptions), dropDownOptions);
-        }
-        // Merge override with original filter def
-        return Object.assign(Object.assign({}, f), rest);
-    });
-};
-export const useFilterHelper = ({ filterDef, overrides, }) => {
-    let _filterDef = filterDef;
-    if (!!overrides) {
-        _filterDef = mergeOverrides(filterDef, overrides);
-    }
-    // Keeps track of filters that have queries
-    const queryIndex = [];
-    // Get query options from filter defs
-    const queries = filterDef
-        .filter((f, i) => {
-        // Track array index of filter def that has a query
-        const hasQuery = f.query !== undefined;
-        hasQuery && queryIndex.push(i);
-        return hasQuery;
-    })
-        .map((filter) => filter.query);
-    // run queries from filter defs
-    const result = useQueries({
-        queries,
-    });
-    // Add useQueries result data to filter def as options
-    queryIndex.forEach((index, i) => {
-        var _a;
-        // User query index to add useQueries result data to filter def as options
-        filterDef[index].selectOptions = (_a = result[i]) === null || _a === void 0 ? void 0 : _a.data;
-    });
-    return filterDef;
-};