@monolith-forensics/monolith-ui 1.2.71 → 1.2.73

package/dist/DropDownMenu/DropDownMenu.d.ts

@@ -1,3 +1,3 @@
 import { DropDownMenuProps } from "./types";
-declare const DropDownMenu: ({ data, children, defaultValue, variant, arrow, size, searchable, loading, onScroll, multiselect, renderOption, onItemSelect, onChange, buttonProps, TooltipContent, }: DropDownMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const DropDownMenu: ({ data, children, defaultValue, variant, arrow, size, searchable, loading, onScroll, multiselect, renderOption, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, }: DropDownMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default DropDownMenu;

package/dist/DropDownMenu/DropDownMenu.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { Menu, MenuItemList, SearchInput, StyledInnerItemContainer, } from "./components";
-const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, searchable, loading, onScroll, multiselect, renderOption, onItemSelect, onChange, buttonProps, TooltipContent, }) => {
+const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, searchable, loading, onScroll, multiselect, renderOption, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, }) => {
     var _a;
     const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
     const [selected, setSelected] = useState(defaultValue || []);
@@ -30,6 +30,6 @@ const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, sear
     const handleMenuClose = () => {
         setSearchValue("");
     };
-    return (_jsx(Menu, { label: children, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, onMenuClose: handleMenuClose, children: _jsxs(StyledInnerItemContainer, { children: [loading && _jsx("div", { children: "Loading..." }), searchable && (_jsx(SearchInput, { ref: searchInputRef, variant: "outlined", size: size, placeholder: "Search", defaultValue: searchValue, onChange: handleSearch })), !loading && (_jsx(MenuItemList, { menuItems: data, searchable: searchable, searchValue: searchValue, isObjectArray: isObjectArray, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll }))] }) }));
+    return (_jsx(Menu, { label: children, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, onMenuClose: handleMenuClose, dropDownProps: dropDownProps, children: _jsxs(StyledInnerItemContainer, { children: [loading && _jsx("div", { children: "Loading..." }), searchable && (_jsx(SearchInput, { ref: searchInputRef, variant: "outlined", size: size, placeholder: "Search", defaultValue: searchValue, onChange: handleSearch })), !loading && (_jsx(MenuItemList, { menuItems: data, searchable: searchable, searchValue: searchValue, isObjectArray: isObjectArray, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll }))] }) }));
 };
 export default DropDownMenu;

package/dist/DropDownMenu/components/MenuComponent.js

@@ -14,11 +14,11 @@ import { forwardRef, useContext, useEffect, useRef, useState } from "react";
 import { autoUpdate, flip, FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTypeahead, } from "@floating-ui/react";
 import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 import { MenuContext } from "./MenuContext";
-import { MenuItem } from "./MenuItem";
 import { StyledFloatContainer } from "./StyledFloatContainer";
 import { StyledContent } from "./StyledContent";
+import { MenuItem } from "./MenuItem";
 export const MenuComponent = forwardRef((_a, forwardedRef) => {
-    var { children, label, arrow, size, buttonSize, variant, buttonProps, buttonRender, multiselect, onMenuClose } = _a, props = __rest(_a, ["children", "label", "arrow", "size", "buttonSize", "variant", "buttonProps", "buttonRender", "multiselect", "onMenuClose"]);
+    var { children, label, arrow, size, buttonSize, variant, buttonProps, buttonRender, multiselect, onMenuClose, dropDownProps } = _a, props = __rest(_a, ["children", "label", "arrow", "size", "buttonSize", "variant", "buttonProps", "buttonRender", "multiselect", "onMenuClose", "dropDownProps"]);
     const [isOpen, setIsOpen] = useState(false);
     const [hasFocusInside, setHasFocusInside] = useState(false);
     const [activeIndex, setActiveIndex] = useState(null);
@@ -113,5 +113,5 @@ export const MenuComponent = forwardRef((_a, forwardedRef) => {
                     getItemProps,
                     setHasFocusInside,
                     isOpen,
-                }, children: _jsx(FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: isOpen && (_jsx(FloatingPortal, { children: _jsx(FloatingFocusManager, { context: context, modal: false, initialFocus: isNested ? -1 : 0, returnFocus: !isNested, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, className: "Menu", style: floatingStyles }, getFloatingProps(), { children: _jsx(StyledContent, { className: "mfFloatingContent", children: children }) })) }) })) }) })] }));
+                }, children: _jsx(FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: isOpen && (_jsx(FloatingPortal, { children: _jsx(FloatingFocusManager, { context: context, modal: false, initialFocus: isNested ? -1 : 0, returnFocus: !isNested, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, className: "Menu", style: floatingStyles }, getFloatingProps(), { children: _jsx(StyledContent, Object.assign({ className: "mfFloatingContent" }, dropDownProps, { children: children })) })) }) })) }) })] }));
 });

package/dist/DropDownMenu/components/MenuItemList.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
+import styled from "styled-components";
+import { FixedSizeList } from "react-window";
 import CheckBox from "../../CheckBox";
 import DropDownMenu from "../DropDownMenu";
 import { MenuItem } from "./MenuItem";
-import styled from "styled-components";
-import { FixedSizeList } from "react-window";
 const filterMenuItems = (menuItems, searchValue) => {
     return menuItems.filter((item) => {
         var _a, _b, _c;
@@ -23,6 +23,10 @@ export const MenuItemList = ({ menuItems, searchable, searchValue = "", isObject
     const abortController = new AbortController();
     const targetElm = useRef(null);
     const listElm = useRef(null);
+    const [viewPortDimensions, setViewPortDimensions] = useState({
+        width: 0,
+        height: 0,
+    });
     const handleItemClick = (item, isSelected) => {
         var _a;
         if (multiselect) {
@@ -45,11 +49,25 @@ export const MenuItemList = ({ menuItems, searchable, searchValue = "", isObject
             abortController.abort();
         };
     }, [filteredItems, listElm.current, onScroll]);
+    useLayoutEffect(() => {
+        var _a;
+        if (targetElm.current) {
+            const viewPortDimensions = (_a = targetElm.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            setViewPortDimensions({
+                width: viewPortDimensions.width,
+                height: viewPortDimensions.height,
+            });
+        }
+    }, [targetElm.current]);
     const overscanCount = 10;
     const itemHeight = 25;
     const itemCount = (filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.length) || 0;
-    const height = itemCount * 25 < 200 ? itemCount * 25 : 200;
-    const width = 188;
+    const height = viewPortDimensions.height
+        ? viewPortDimensions.height
+        : itemCount * itemHeight < 200
+            ? 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));

package/dist/DropDownMenu/types.d.ts

@@ -54,4 +54,5 @@ export interface MenuProps {
     multiselect?: boolean;
     onMenuClose?: () => void;
     TooltipContent?: ComponentType<any>;
+    dropDownProps?: ComponentPropsWithoutRef<typeof StyledContent>;
 }

package/dist/QueryFilter/QueryFilter.js

@@ -130,7 +130,7 @@ const dateFormatResolver = (resolution) => {
     }
 };
 const ValueEditor = ({ rule, inputType, filterDef, onChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const theme = useTheme();
     const handleInputChange = useDebouncedCallback((e) => {
         const value = e.target.value;
@@ -196,8 +196,8 @@ const ValueEditor = ({ rule, inputType, filterDef, onChange }) => {
                             : theme.palette.text.secondary,
                     },
                 }, dropDownProps: {
-                    style: { width: 175, maxWidth: 400 },
-                }, defaultValue: (_j = filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions) === null || _j === void 0 ? void 0 : _j.filter((o) => Array.isArray(rule.value) &&
+                    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 }));
         default:
             return (_jsx(StyledInput, { placeholder: "Enter Value...", onChange: handleInputChange }));

package/dist/QueryFilter/types.d.ts

@@ -32,6 +32,9 @@ export interface FilterDefinition {
     isoString?: boolean;
     placeholder?: string;
     selectOptions?: DropDownItem[];
+    dropDownOptions?: {
+        style?: React.CSSProperties;
+    };
     editorType?: EditorType;
     query?: UseQueryOptions & {
         select: (data: unknown) => DropDownItem[];

package/dist/QueryFilter/useFilterDefinitions.d.ts

@@ -1,6 +1,7 @@
 import { FilterDefinition } from "./types";
 export interface UserFilterDefinitionsParams {
     filterDef: FilterDefinition[];
+    overrides?: Partial<FilterDefinition>[];
 }
 export type UseFilterDefinitionsType = (p: UserFilterDefinitionsParams) => FilterDefinition[];
-export declare function useFilterDefinitions({ filterDef, }: UserFilterDefinitionsParams): FilterDefinition[];
+export declare function useFilterDefinitions({ filterDef, overrides, }: UserFilterDefinitionsParams): FilterDefinition[];

package/dist/QueryFilter/useFilterDefinitions.js

@@ -1,7 +1,43 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { useQueries } from "@tanstack/react-query";
-export function useFilterDefinitions({ filterDef, }) {
+const mergeOverrides = (filterDef, overrides) => {
+    return filterDef.map((f) => {
+        const override = overrides.find((o) => o.dataField === f.dataField);
+        if (!override) {
+            return f;
+        }
+        const { query, dropDownOptions } = override, rest = __rest(override, ["query", "dropDownOptions"]);
+        // Handle merge directly on query and dropDownOptions
+        // prevents overriding the entire query object
+        // allows user to override specific properties
+        if (query) {
+            f.query = Object.assign(Object.assign({}, query), override.query);
+        }
+        if (dropDownOptions) {
+            f.dropDownOptions = Object.assign(Object.assign({}, dropDownOptions), override.dropDownOptions);
+        }
+        // Merge override with original filter def
+        return Object.assign(Object.assign({}, f), rest);
+    });
+};
+export function useFilterDefinitions({ filterDef, overrides, }) {
+    let _filterDef = filterDef;
+    if (!!overrides) {
+        _filterDef = mergeOverrides(filterDef, overrides);
+    }
     // Keeps track of filters that have queries
     const queryIndex = [];
+    // Get query options from filter defs
     const queries = filterDef
         .filter((f, i) => {
         // Track array index of filter def that has a query
@@ -10,9 +46,11 @@ export function useFilterDefinitions({ filterDef, }) {
         return hasQuery;
     })
         .map((filter) => filter.query);
+    // run queries from filter defs
     const result = useQueries({
         queries,
     });
+    // Add useQueries result data to filter def as options
     queryIndex.forEach((index, i) => {
         var _a;
         // User query index to add useQueries result data to filter def as options

package/package.json

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