@monolith-forensics/monolith-ui 1.2.71 → 1.2.72

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/package.json

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