@monolith-forensics/monolith-ui 2.1.1 → 2.1.3

package/dist/DateInput/DateInput.js

@@ -191,6 +191,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
     const [unControlledValue, setUncontrolledValue] = useState(defaultValue);
     const _value = isControlled.current ? value : unControlledValue;
     const [selectedSegment, setSelectedSegment] = useState();
+    const [draftSegment, setDraftSegment] = useState(null);
     const [isOpen, setIsOpen] = useState(false);
     // Check if format is date only and does not include time
     const isDateOnly = format.match(/(HH|h|mm|ss|SSS|A|Z)/) === null;
@@ -281,6 +282,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
     const handleClear = (e) => {
         e.preventDefault();
         e.stopPropagation();
+        clearTypedSegment();
         commitValue(null);
         setIsOpen(false);
     };
@@ -289,6 +291,8 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         e.preventDefault();
         if (segment.type === "separator")
             return;
+        commitSelectedDraftSegment();
+        clearTypedSegment();
         if (mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) {
             const input = mainRef.current.querySelector("div[data-type='input']");
             if (input) {
@@ -300,6 +304,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
     const handleContainerClick = (e) => {
         e.stopPropagation();
         e.preventDefault();
+        commitSelectedDraftSegment();
         if (mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) {
             const input = mainRef.current.querySelector("div[data-type='input']");
             if (input) {
@@ -307,11 +312,13 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
             }
         }
         setIsOpen(true);
+        clearTypedSegment();
         setSelectedSegment(segments[0]);
     };
     const handleCalendarTriggerClick = (e) => {
         e.stopPropagation();
         e.preventDefault();
+        commitSelectedDraftSegment();
         if (mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) {
             const input = mainRef.current.querySelector("div[data-type='input']");
             if (input) {
@@ -319,6 +326,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
             }
         }
         setIsOpen((prev) => !prev);
+        clearTypedSegment();
         setSelectedSegment(segments[0]);
     };
     const nextSegment = () => {
@@ -329,6 +337,145 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
             return next || prev;
         });
     };
+    const clearTypedSegment = useCallback(() => {
+        typedKeys.current = "";
+        setDraftSegment(null);
+    }, []);
+    const getSegmentInputLength = useCallback((segment) => {
+        switch (segment.pattern) {
+            case "YYYY":
+                return 4;
+            case "SSS":
+                return 3;
+            case "MM":
+            case "DD":
+            case "HH":
+            case "mm":
+            case "ss":
+            case "h":
+                return 2;
+            default:
+                return segment.text.length;
+        }
+    }, []);
+    const getMomentWithSegmentValue = useCallback((segment, rawValue, currentMoment) => {
+        if (!segment.momentType)
+            return null;
+        const parsedValue = parseInt(rawValue, 10);
+        if (!Number.isFinite(parsedValue))
+            return null;
+        const nextMoment = currentMoment.clone();
+        switch (segment.momentType) {
+            case "year": {
+                if (parsedValue < 0 || parsedValue > 9999)
+                    return null;
+                const daysInTargetMonth = currentMoment
+                    .clone()
+                    .year(parsedValue)
+                    .month(currentMoment.month())
+                    .daysInMonth();
+                if (currentMoment.date() > daysInTargetMonth)
+                    return null;
+                nextMoment.year(parsedValue);
+                break;
+            }
+            case "month": {
+                if (parsedValue < 1 || parsedValue > 12)
+                    return null;
+                const targetMonth = parsedValue - 1;
+                const daysInTargetMonth = currentMoment
+                    .clone()
+                    .month(targetMonth)
+                    .daysInMonth();
+                if (currentMoment.date() > daysInTargetMonth)
+                    return null;
+                nextMoment.month(targetMonth);
+                break;
+            }
+            case "date": {
+                if (parsedValue < 1 || parsedValue > currentMoment.daysInMonth()) {
+                    return null;
+                }
+                nextMoment.date(parsedValue);
+                break;
+            }
+            case "hour": {
+                const isTwelveHourSegment = segment.pattern === "h";
+                if (isTwelveHourSegment) {
+                    if (parsedValue < 1 || parsedValue > 12)
+                        return null;
+                    const isPm = currentMoment.hour() >= 12;
+                    const nextHour = parsedValue === 12
+                        ? isPm
+                            ? 12
+                            : 0
+                        : parsedValue + (isPm ? 12 : 0);
+                    nextMoment.hour(nextHour);
+                }
+                else {
+                    if (parsedValue < 0 || parsedValue > 23)
+                        return null;
+                    nextMoment.hour(parsedValue);
+                }
+                break;
+            }
+            case "minute": {
+                if (parsedValue < 0 || parsedValue > 59)
+                    return null;
+                nextMoment.minute(parsedValue);
+                break;
+            }
+            case "second": {
+                if (parsedValue < 0 || parsedValue > 59)
+                    return null;
+                nextMoment.second(parsedValue);
+                break;
+            }
+            case "millisecond": {
+                if (parsedValue < 0 || parsedValue > 999)
+                    return null;
+                nextMoment.millisecond(parsedValue);
+                break;
+            }
+            default:
+                return null;
+        }
+        if (!nextMoment.isValid())
+            return null;
+        return nextMoment;
+    }, []);
+    const commitTypedSegment = useCallback((segment, rawValue) => {
+        if (!segment.momentType || !rawValue)
+            return false;
+        const normalizedValue = ["month", "day"].includes(segment.type) &&
+            Array.from(rawValue).every((c) => c === "0")
+            ? "01"
+            : rawValue;
+        const nextMoment = getMomentWithSegmentValue(segment, normalizedValue, getEditableMoment(_value));
+        if (!nextMoment)
+            return false;
+        const nextValue = serializeMoment(nextMoment);
+        if (!checkValidRange(nextValue))
+            return false;
+        commitValue(nextValue);
+        return true;
+    }, [
+        _value,
+        getEditableMoment,
+        getMomentWithSegmentValue,
+        serializeMoment,
+        checkValidRange,
+        commitValue,
+    ]);
+    const commitSelectedDraftSegment = useCallback(() => {
+        if (!selectedSegment || !typedKeys.current)
+            return false;
+        if (selectedSegment.pattern === "YYYY" &&
+            typedKeys.current.length < getSegmentInputLength(selectedSegment)) {
+            return false;
+        }
+        return commitTypedSegment(selectedSegment, typedKeys.current);
+    }, [commitTypedSegment, getSegmentInputLength, selectedSegment]);
     // prevent click and drag selection
     const handleMouseDown = (e) => {
         e.preventDefault();
@@ -338,6 +485,8 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
             return;
         // tab
         if (e.key === "Tab") {
+            commitSelectedDraftSegment();
+            clearTypedSegment();
             setSelectedSegment(null);
             setIsOpen(false);
             return;
@@ -345,28 +494,35 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         // Right Arrow
         if (e.key === "ArrowRight") {
             e.preventDefault();
+            commitSelectedDraftSegment();
+            clearTypedSegment();
             setSelectedSegment((prev) => {
                 if (!prev)
                     return segments[0];
                 const next = segments[prev.index + 2];
                 return next || prev;
             });
-            typedKeys.current = ""; // clear typed keys when moving to next segment
         }
         // Left Arrow
         if (e.key === "ArrowLeft") {
             e.preventDefault();
+            commitSelectedDraftSegment();
+            clearTypedSegment();
             setSelectedSegment((prev) => {
                 if (!prev)
                     return segments[0];
                 const next = segments[prev.index - 2];
                 return next || prev;
             });
-            typedKeys.current = ""; // clear typed keys when moving to next segment
         }
         // Up Arrow
         if (e.key === "ArrowUp") {
             e.preventDefault();
+            const hadDraftSegment = !!typedKeys.current;
+            commitSelectedDraftSegment();
+            clearTypedSegment();
+            if (hadDraftSegment)
+                return;
             const segmentType = selectedSegment.type;
             if (segmentType === "separator")
                 return;
@@ -375,6 +531,11 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         // Down Arrow
         if (e.key === "ArrowDown") {
             e.preventDefault();
+            const hadDraftSegment = !!typedKeys.current;
+            commitSelectedDraftSegment();
+            clearTypedSegment();
+            if (hadDraftSegment)
+                return;
             const segmentType = selectedSegment.type;
             if (segmentType === "separator")
                 return;
@@ -382,43 +543,29 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         }
         // handle paste
         if (e.key === "v" && (e.metaKey || e.ctrlKey)) {
+            clearTypedSegment();
             handlePaste();
         }
         // only allow numbers
-        if (e.key.match(/[0-9]/)) {
+        if (e.key.match(/^[0-9]$/)) {
             e.preventDefault();
-            const segmentLength = selectedSegment.text.length;
-            typedKeys.current += e.key;
-            let tempValue = typedKeys.current;
-            if (["month", "day"].includes(selectedSegment.type) &&
-                Array.from(tempValue).every((c) => c === "0")) {
-                tempValue = "01";
-            }
-            setUncontrolledValue((prev) => {
-                if (!(selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.momentType))
-                    return prev;
-                const momentValue = getEditableMoment(prev);
-                let newValue = moment(momentValue)
-                    .set(selectedSegment.momentType, parseInt(tempValue, 10) -
-                    (selectedSegment.type === "month" ? 1 : 0))
-                    .toISOString();
-                if (!checkValidRange(newValue))
-                    return prev;
-                if (isDateOnly) {
-                    newValue = utc
-                        ? moment.utc(newValue).format("YYYY-MM-DD")
-                        : moment(newValue).format("YYYY-MM-DD");
-                }
-                if (isControlled.current) {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-                    return prev;
-                }
-                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-                return newValue;
+            if (!selectedSegment.momentType)
+                return;
+            const segmentLength = getSegmentInputLength(selectedSegment);
+            const nextTypedKeys = typedKeys.current.length >= segmentLength
+                ? e.key
+                : `${typedKeys.current}${e.key}`;
+            typedKeys.current = nextTypedKeys;
+            setDraftSegment({
+                index: selectedSegment.index,
+                text: nextTypedKeys,
             });
-            if (typedKeys.current.length === segmentLength) {
-                nextSegment();
-                typedKeys.current = "";
+            if (nextTypedKeys.length === segmentLength) {
+                const didCommit = commitTypedSegment(selectedSegment, nextTypedKeys);
+                clearTypedSegment();
+                if (didCommit) {
+                    nextSegment();
+                }
             }
         }
     };
@@ -492,11 +639,12 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
             ) {
                 setIsOpen(false);
             }
+            clearTypedSegment();
             setSelectedSegment(null); // clear selected segment when clicked outside component
         };
         document.addEventListener("click", close);
         return () => document.removeEventListener("click", close);
-    }, [refs.floating]);
+    }, [clearTypedSegment, refs.floating]);
     return (_jsxs(StyledContainer, Object.assign({ ref: (ref) => {
             if (typeof _ref === "function") {
                 _ref(ref);
@@ -507,15 +655,22 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
                     e.preventDefault();
                     setSelectedSegment(segments[0]);
                 }, onBlur: () => {
+                    commitSelectedDraftSegment();
+                    clearTypedSegment();
                     setSelectedSegment(null);
                 }, "data-empty": !_value, "data-disabled": disabled, role: "textbox", size: size, variant: variant, "data-button-left": enableCalendar, "data-button-right": arrow || clearable, style: style, children: [enableCalendar && (_jsx(CalendarTriggerButton, { size: size, type: "button", "aria-label": "Toggle calendar", onClick: handleCalendarTriggerClick, "data-default-btn": true, children: _jsx(CalendarDaysIcon, {}) })), segments.map((segment, i) => {
+                        const segmentText = (draftSegment === null || draftSegment === void 0 ? void 0 : draftSegment.index) === segment.index
+                            ? draftSegment.text
+                            : segment.text;
                         if (segment.type === "separator") {
                             return (_jsx("div", { className: "separator", tabIndex: -1, onClick: (e) => {
                                     e.preventDefault();
                                     e.stopPropagation();
-                                }, onFocus: (e) => e.preventDefault(), onPointerDown: (e) => e.preventDefault(), "data-type": "separator", "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, children: segment.text }, i));
+                                }, onFocus: (e) => e.preventDefault(), onPointerDown: (e) => e.preventDefault(), "data-type": "separator", "data-identifier": segment.type, "data-has-space": segmentText.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, children: segmentText }, i));
                         }
-                        return (_jsx(InputSegment, { className: "input", tabIndex: i === 0 ? 0 : -1, onClick: (e) => handleSegmentClick(e, segment), "data-type": "input", size: size, "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, "data-selected": (selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.index) === segment.index, children: _value ? segment.text : segment.placeholder }, i));
+                        return (_jsx(InputSegment, { className: "input", tabIndex: i === 0 ? 0 : -1, onClick: (e) => handleSegmentClick(e, segment), "data-type": "input", size: size, "data-identifier": segment.type, "data-has-space": segmentText.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, "data-selected": (selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.index) === segment.index, children: _value || (draftSegment === null || draftSegment === void 0 ? void 0 : draftSegment.index) === segment.index
+                                ? segmentText
+                                : segment.placeholder }, i));
                     }), utc && _jsx("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && _value ? (_jsx(ClearButton, { size: size, onClick: handleClear })) : arrow ? (_jsx(ArrowButton, { size: size })) : null] }), !disabled && enableCalendar && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, style: floatingStyles }, getFloatingProps(), { children: _jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsx("div", { children: _jsx(Calendar, { value: getCalendarValue(), clearable: false, min: min, max: max, onChange: (date, meta) => {
                                     if (!date) {
                                         commitValue(null);

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, searchDebounceMs, 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, searchDebounceMs: searchDebounceMs, 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,11 +1,12 @@
 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;
     searchValue?: string;
     onSearch?: (value: string) => void;
+    searchDebounceMs?: number;
     manualSearch?: boolean;
     dynamicOptionHeight?: boolean;
     selected?: DropDownItem[];
@@ -25,5 +26,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,32 +128,20 @@ 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, searchDebounceMs = 150, 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);
+    const handleSearch = useDebouncedCallback((value) => {
+        setSearchValue(value);
+    }, searchDebounceMs);
+    const handleExternalSearch = useDebouncedCallback((value) => {
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
+    }, searchDebounceMs);
     const handleItemClick = (item, isSelected) => {
         var _a;
         if (multiselect) {
@@ -166,7 +153,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 +178,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 +203,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 +219,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 +247,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 +269,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 +316,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();
@@ -366,11 +343,12 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
                 (typeof item === "string" || typeof item === "number" ? item : null) }, index));
     };
     return (_jsxs(MenuItemListRoot, { children: [searchable && (_jsx(SearchInput, { variant: "outlined", size: size, placeholder: "Search", defaultValue: searchValue, onChange: (e) => {
+                    const nextValue = e.target.value;
                     if (!manualSearch) {
-                        handleSearch(e);
+                        handleSearch(nextValue);
                     }
-                    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) => {
+                    handleExternalSearch(nextValue);
+                } })), 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 +360,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;
@@ -44,25 +43,18 @@ export type DropDownMenuProps = {
     onScrollToBottom?: (e: Event) => void;
     onSearch?: (value: string) => void;
     searchable?: boolean;
+    searchDebounceMs?: number;
     manualSearch?: boolean;
     grouped?: boolean;
     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/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;
@@ -39,11 +55,12 @@ export interface FilterDefinition {
     isoString?: boolean;
     placeholder?: string;
     selectOptions?: DropDownItem[];
+    manualSearch?: boolean;
     superDatePickerProps?: Omit<SuperDatePickerProps, "defaultValue" | "format" | "onChange" | "size" | "value" | "variant" | "width">;
     dropDownOptions?: {
         style?: React.CSSProperties;
     };
-    query?: DropDownMenuProps["query"];
+    query?: FilterOptionsQuery;
 }
 export interface Rule {
     id?: string;

package/dist/QueryFilter/components/MultiSelectEditor.js

@@ -1,17 +1,168 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTheme } from "styled-components";
 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;
+    var _a, _b, _c;
     const theme = useTheme();
+    const optionsQuery = useFilterOptionsQuery(filterDef === null || filterDef === void 0 ? void 0 : filterDef.query);
     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 +171,8 @@ 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: {
+    const manualSearch = (_b = filterDef === null || filterDef === void 0 ? void 0 : filterDef.manualSearch) !== null && _b !== void 0 ? _b : false;
+    return (_jsx(DropDownMenu, { data: dropDownOptions, variant: "outlined", multiselect: true, searchable: true, size: "xs", buttonProps: {
             title: QUERY_FILTER_SELECT_VALUE_LABEL,
             variant: "contained",
             size: "xxs",
@@ -39,6 +191,8 @@ export const MultiSelectEditor = ({ rule, filterDef, onChange }) => {
                     : theme.palette.text.secondary,
             },
         }, 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 }));
+            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),
+        }, loading: optionsQuery.isLoading && dropDownOptions.length === 0, loadingMore: optionsQuery.isFetchingNextPage, value: selected, onChange: handleChange, manualSearch: manualSearch, onSearch: (filterDef === null || filterDef === void 0 ? void 0 : filterDef.query) && manualSearch
+            ? (value) => optionsQuery.setSearch(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.1",
+  "version": "2.1.3",
   "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",