@monolith-forensics/monolith-ui 2.1.1-dev.3 → 2.1.1-dev.5

package/dist/DropDownMenu/DropDownMenu.js

@@ -10,7 +10,7 @@ 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, loadingMore, onScroll, onScrollToTop, onScrollToBottom, onSearch, manualSearch, multiselect, enableSelectAll, enableSelectedOptionStyling, renderOption, dynamicOptionHeight, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, disabled, }) => {
+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 || []),
@@ -48,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: _jsx(StyledInnerItemContainer, { children: _jsx(MenuItemList, { menuItems: data, searchable: searchable, grouped: grouped, onAddNew: onAddNew, onSearch: onSearch, manualSearch: manualSearch, dynamicOptionHeight: dynamicOptionHeight, maxDropdownHeight: maxDropdownHeight, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, enableSelectAll: enableSelectAll, enableSelectedOptionStyling: enableSelectedOptionStyling, size: size, loading: loading, loadingMore: loadingMore, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, handleSetSelected: handleSetSelected, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll, onScrollToTop: onScrollToTop, onScrollToBottom: handleScrollToBottom }) }) }));
+    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/MenuItemList.d.ts

@@ -6,6 +6,7 @@ export declare const MenuItemList: React.FC<{
     searchable?: boolean;
     searchValue?: string;
     onSearch?: (value: string) => void;
+    searchDebounceMs?: number;
     manualSearch?: boolean;
     dynamicOptionHeight?: boolean;
     selected?: DropDownItem[];

package/dist/DropDownMenu/components/MenuItemList.js

@@ -128,22 +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, loading, loadingMore, }) => {
+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 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 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) {
@@ -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)
@@ -369,10 +343,11 @@ 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);
+                    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();
@@ -385,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

@@ -43,6 +43,7 @@ export type DropDownMenuProps = {
     onScrollToBottom?: (e: Event) => void;
     onSearch?: (value: string) => void;
     searchable?: boolean;
+    searchDebounceMs?: number;
     manualSearch?: boolean;
     grouped?: boolean;
     dynamicOptionHeight?: boolean;

package/dist/QueryFilter/QueryFilter.types.d.ts

@@ -55,6 +55,7 @@ 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;

package/dist/QueryFilter/components/MultiSelectEditor.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTheme } from "styled-components";
-import { useDebouncedCallback } from "use-debounce";
 import { DropDownMenu } from "../../DropDownMenu";
 import { QUERY_FILTER_SELECT_VALUE_LABEL } from "../QueryFilter.constants";
 const DEFAULT_FILTER_OPTIONS_STALE_TIME = 5 * 60 * 1000;
@@ -156,12 +155,9 @@ const useFilterOptionsQuery = (query) => {
     };
 };
 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 handleAsyncSearch = useDebouncedCallback((value) => {
-        optionsQuery.setSearch(value);
-    }, 150);
     const handleChange = (selected, diff) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(selected, diff);
     };
@@ -175,6 +171,7 @@ export const MultiSelectEditor = ({ rule, filterDef, onChange }) => {
     if (Array.isArray(rule.value) && rule.value.length > 1) {
         display = `${rule.value.length} ${(filterDef === null || filterDef === void 0 ? void 0 : filterDef.pluralLabel) || "Values"}`;
     }
+    const manualSearch = (_b = filterDef === null || filterDef === void 0 ? void 0 : filterDef.manualSearch) !== null && _b !== void 0 ? _b : !!(filterDef === null || filterDef === void 0 ? void 0 : filterDef.query);
     return (_jsx(DropDownMenu, { data: dropDownOptions, variant: "outlined", multiselect: true, searchable: true, size: "xs", buttonProps: {
             title: QUERY_FILTER_SELECT_VALUE_LABEL,
             variant: "contained",
@@ -194,8 +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),
-        }, loading: optionsQuery.isLoading && dropDownOptions.length === 0, loadingMore: optionsQuery.isFetchingNextPage, value: selected, onChange: handleChange, manualSearch: !!(filterDef === null || filterDef === void 0 ? void 0 : filterDef.query), onSearch: (filterDef === null || filterDef === void 0 ? void 0 : filterDef.query)
-            ? (value) => handleAsyncSearch(value)
+            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/package.json

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