@monolith-forensics/monolith-ui 1.3.96 → 1.3.103

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,16 +1,31 @@
-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 { 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;
         if (item === null || item === void 0 ? void 0 : item.label) {
             return (((_a = item === null || item === void 0 ? void 0 : item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchValue.toLowerCase())) ||
-                ((_b = item === null || item === void 0 ? void 0 : item.value) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchValue.toLowerCase())));
+                ((_b = item === null || item === void 0 ? void 0 : item.value) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase().includes(searchValue.toLowerCase())));
         }
         return (_c = item.toLowerCase) === null || _c === void 0 ? void 0 : _c.call(item).includes(searchValue.toLowerCase());
     });
@@ -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: Object.assign({ style }, item), disabled: item.disabled, children: item.label }));
+                        }
+                        return (_jsx(MenuItem, { className: "MenuItem", itemData: item, TooltipContent: TooltipContent, "data-selected": isSelected, "data-disabled": item.disabled, disabled: item.disabled, leftSection: multiselect ? (_jsxs(_Fragment, { children: [_jsx(CheckBox, { value: isSelected, size: size, onChange: (newValue) => {
+                                            var _a;
+                                            newValue
+                                                ? handleAddItem(item)
+                                                : handleRemoveItem(item);
+                                            (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
+                                        } }), (item === null || item === void 0 ? void 0 : item.leftSection) || null] })) : ((item === null || item === void 0 ? void 0 : item.leftSection) || null), rightSection: item === null || item === void 0 ? void 0 : item.rightSection, multiselect: multiselect, size: size, title: !TooltipContent ? item === null || item === void 0 ? void 0 : item.label : undefined, onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                handleItemClick(item, isSelected);
+                            }, style: style, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) ||
+                                (item === null || item === void 0 ? void 0 : item.label) ||
+                                (typeof item === "string" || typeof item === "number"
+                                    ? item
+                                    : null) }, index));
+                    } }) }))] }));
 };

package/dist/DropDownMenu/index.d.ts

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

package/dist/DropDownMenu/index.js

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

package/dist/DropDownMenu/types.d.ts

@@ -3,10 +3,11 @@ 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;
-    value: string;
+    value: string | number;
     onClick?: (args: any) => void;
     data?: any;
     items?: DropDownItem[];
@@ -16,17 +17,18 @@ export type DropDownItem = {
     visible?: boolean;
 };
 export type SearchInputProps = React.ComponentPropsWithoutRef<typeof Input>;
-export interface StyledContentProps {
+export type StyledContentProps = {
     maxDropdownHeight?: number | string;
     variant?: Variant;
-}
-export interface DropDownMenuProps {
+};
+export type DropDownMenuProps = {
     className?: string;
     children?: ReactNode | string;
     label?: string;
     data: DropDownItem[];
     variant?: Variant;
     defaultValue?: DropDownItem[];
+    value?: DropDownItem[];
     multiselect?: boolean;
     size?: Size;
     title?: string;
@@ -35,15 +37,28 @@ export interface 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;
-}
-export interface MenuProps {
+    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;
     itemData?: any;
     nested?: boolean;
@@ -59,4 +74,4 @@ export interface MenuProps {
     TooltipContent?: ComponentType<any>;
     dropDownProps?: ComponentPropsWithoutRef<typeof StyledContent>;
     disabled?: boolean;
-}
+};

package/dist/MonolithUIProvider/MonolithUIProvider.d.ts

@@ -132,8 +132,43 @@ export interface MonolithDefaultTheme {
             default: string;
             primary: string;
             secondary: string;
+            alternate: string;
             error: string;
         };
+        text: {
+            default: string;
+            primary: string;
+            secondary: string;
+            alternate: string;
+            error: string;
+        };
+    };
+    alert: {
+        info: {
+            background: string;
+            border: string;
+            color: string;
+        };
+        success: {
+            background: string;
+            border: string;
+            color: string;
+        };
+        warning: {
+            background: string;
+            border: string;
+            color: string;
+        };
+        error: {
+            background: string;
+            border: string;
+            color: string;
+        };
+        default: {
+            background: string;
+            border: string;
+            color: string;
+        };
     };
 }
 export interface MonolithUIContextType {

package/dist/QueryFilter/QueryFilter.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { useTheme } from "styled-components";
 import { XIcon } from "lucide-react";
-import DropDownMenu from "../DropDownMenu";
+import { DropDownMenu } from "../DropDownMenu";
 import { Button } from "../Button";
 import { DefaultOperators } from "./DefaultOperators";
 import Input from "../Input";
@@ -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);
     };
@@ -245,28 +249,30 @@ const Rules = ({ rules = [], combinator, showCombinator, filterDefinitions, onDe
         const prevValue = rule.value;
         let newValue;
         const isBetween = operator.value.toLowerCase().includes("between");
-        if (!isBetween) {
-            newValue = !!(prevValue === null || prevValue === void 0 ? void 0 : prevValue[0]) ? [prevValue[0]] : undefined;
+        if (isBetween) {
+            newValue = [(prevValue === null || prevValue === void 0 ? void 0 : prevValue[0]) || "", (prevValue === null || prevValue === void 0 ? void 0 : prevValue[1]) || ""];
         }
         else {
-            newValue = [(prevValue === null || prevValue === void 0 ? void 0 : prevValue[0]) || "", (prevValue === null || prevValue === void 0 ? void 0 : prevValue[1]) || ""];
+            newValue =
+                (prevValue === null || prevValue === void 0 ? void 0 : prevValue.length) && prevValue.length > 0 ? prevValue : undefined; // keep existing value if it exists, return undefined if array is empty
         }
         onUpdate(Object.assign(Object.assign({}, rule), { operator, value: newValue }));
     };
     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 +282,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/RichTextEditor/Components/BubbleMenu.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { useTheme } from "styled-components";
 import { Extensions } from "../Enums";
 import { BoldIcon, ItalicIcon, UnderlineIcon, CaseSensitiveIcon, ListIcon, ListOrderedIcon, StrikethroughIcon, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, RemoveFormattingIcon, SquircleIcon, } from "lucide-react";
-import DropDownMenu from "../../DropDownMenu";
+import { DropDownMenu, } from "../../DropDownMenu";
 import { FloatingPortal, useFloating } from "@floating-ui/react";
 import { useEffect, useRef } from "react";
 import { Button } from "../../Button";

package/dist/RichTextEditor/Components/ColorPicker.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import DropDownMenu from "../../DropDownMenu";
+import { DropDownMenu } from "../../DropDownMenu";
 import TextColors from "../Enums/TextColors";
 import { SquircleIcon } from "lucide-react";
 import { useTheme } from "styled-components";
@@ -23,7 +23,9 @@ export const ColorPicker = ({ editor }) => {
                     },
                 };
             }),
-        ], renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(SquircleIcon, { size: 12, color: item.value === "default" ? theme.palette.text.primary : item.value, style: {
+        ], renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(SquircleIcon, { size: 12, color: item.value === "default"
+                        ? theme.palette.text.primary
+                        : item.value, style: {
                         backgroundColor: item.value === "default"
                             ? theme.palette.text.primary
                             : item.value,

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -3,7 +3,7 @@ import styled, { useTheme } from "styled-components";
 import ControlsGroup from "./ControlsGroup";
 import { UndoControl, RedoControl, BoldControl, ItalicControl, UnderlineControl, StrikeThroughControl, Heading1Control, Heading2Control, Heading3Control, Heading4Control, BulletListControl, OrderedListControl, AlignLeftControl, AlignCenterControl, AlignRightControl, AlignJustifiedControl, } from "./Controls";
 import { Controls } from "../Enums";
-import DropDownMenu from "../../DropDownMenu";
+import { DropDownMenu } from "../../DropDownMenu";
 import Fonts from "../Enums/Fonts";
 import { useContext } from "react";
 import RichTextEditorContext from "../Contexts/RichTextEditorContext";