@monolith-forensics/monolith-ui 2.1.1-dev.4 → 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,7 +128,7 @@ 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 listElm = useRef(null);
     const fixedListRef = useRef(null);
@@ -136,9 +136,12 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
     const hasHandledInitialSelectedScroll = useRef(false);
     const itemSizeMap = useRef({});
     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) {
@@ -340,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();

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.4",
+  "version": "2.1.1-dev.5",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",