@monolith-forensics/monolith-ui 1.8.1-dev.0 → 1.8.1-dev.2

package/dist/Calendar/CalendarStyles.js

@@ -5,7 +5,7 @@ export const MainContainer = styled.div `
   gap: 8px;
 `;
 export const CalendarContainer = styled.div `
-  width: 264px;
+  width: 268px;
   border-radius: 4px;
   overflow: hidden;
   box-sizing: border-box;
@@ -48,8 +48,8 @@ export const CalendarNavButton = styled.button `
 `;
 export const CalendarGrid = styled.div `
   display: grid;
-  grid-template: repeat(7, auto) / repeat(7, auto);
-  gap: 3px;
+  grid-template: repeat(7, auto) / repeat(7, 1fr);
+  justify-items: center;
 `;
 export const CalendarMonth = styled.div `
   font-weight: 500;
@@ -74,7 +74,9 @@ export const CalendarCell = styled.div `
   align-self: center;
   letter-spacing: 0.1rem;
   min-width: 32px;
+  width: 32px;
   min-height: 32px;
+  height: 32px;
   padding: 6px 4px;
   user-select: none;
   border-radius: 5px;
@@ -126,7 +128,8 @@ export const HighlightedCalendarDate = styled(CalendarDate) `
   font-weight: 700;
   opacity: 1;
   position: relative;
-  box-shadow: inset 0 0 0 1px ${(props) => props.theme.palette.primary.main},
+  box-shadow:
+    inset 0 0 0 1px ${(props) => props.theme.palette.primary.main},
     0 4px 10px ${(props) => `${props.theme.palette.primary.main}33`};
   ::before {
     content: "";

package/dist/DropDownMenu/DropDownMenu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Menu, MenuItemList, StyledInnerItemContainer } from "./components";
-export const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, searchable, grouped, onAddNew, loading, onScroll, onScrollToTop, onScrollToBottom, onSearch, manualSearch, multiselect, renderOption, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, query, disabled, }) => {
+export const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, searchable, grouped, onAddNew, loading, onScroll, onScrollToTop, onScrollToBottom, onSearch, manualSearch, multiselect, renderOption, dynamicOptionHeight, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, query, disabled, }) => {
     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 || []);
@@ -25,5 +25,5 @@ export const DropDownMenu = ({ data, children, defaultValue, variant, arrow, siz
     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, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, 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: _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, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll, onScrollToTop: onScrollToTop, onScrollToBottom: handleScrollToBottom, query: query }))] }) }));
 };

package/dist/DropDownMenu/components/MenuItem.d.ts

@@ -19,6 +19,7 @@ export declare const MenuItem: import("styled-components/dist/types").IStyledCom
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 } & {
     multiselect?: boolean;
+    $dynamicHeight?: boolean;
 }, "ref"> & import("react").RefAttributes<unknown>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<MenuProps & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
     ref?: RefObject<HTMLButtonElement>;
     children?: import("react").ReactNode | string;
@@ -38,4 +39,5 @@ export declare const MenuItem: import("styled-components/dist/types").IStyledCom
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 } & {
     multiselect?: boolean;
+    $dynamicHeight?: boolean;
 }, "ref"> & import("react").RefAttributes<unknown>>, keyof import("react").Component<any, {}, any>>;

package/dist/DropDownMenu/components/MenuItem.js

@@ -49,16 +49,18 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
     min-height: ${({ size = "sm" }) => `${getControlSizeTokens(size).menuRowHeight}px`};
     width: 100%;
     min-width: 100%;
-    height: ${({ size = "sm" }) => `${getControlSizeTokens(size).menuRowHeight}px`};
+    height: ${({ size = "sm", $dynamicHeight }) => $dynamicHeight ? "auto" : `${getControlSizeTokens(size).menuRowHeight}px`};
+    box-sizing: border-box;
     position: relative;
     user-select: none;
     outline: none;
 
     border: none;
+    text-align: left;
 
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: ${({ $dynamicHeight }) => $dynamicHeight ? "normal" : "nowrap"};
+    overflow: ${({ $dynamicHeight }) => $dynamicHeight ? "visible" : "hidden"};
+    text-overflow: ${({ $dynamicHeight }) => $dynamicHeight ? "clip" : "ellipsis"};
 
     cursor: pointer;
     text-decoration: none;
@@ -66,7 +68,7 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
     font-weight: normal;
     letter-spacing: normal;
 
-    padding: ${({ size = "sm" }) => `0px ${getControlSizeTokens(size).menuItemPaddingX}px`};
+    padding: ${({ size = "sm", $dynamicHeight }) => `${$dynamicHeight ? 6 : 0}px ${getControlSizeTokens(size).menuItemPaddingX}px`};
 
     &[data-disabled="true"] {
       opacity: 0.5;
@@ -84,10 +86,15 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
     }
 
     .button-label {
-      display: inline-block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      display: ${({ $dynamicHeight }) => $dynamicHeight ? "flex" : "inline-block"};
+      align-items: center;
+      justify-content: flex-start;
+      min-width: 0;
+      width: 100%;
+      text-align: left;
+      overflow: ${({ $dynamicHeight }) => $dynamicHeight ? "visible" : "hidden"};
+      white-space: ${({ $dynamicHeight }) => $dynamicHeight ? "normal" : "nowrap"};
+      text-overflow: ${({ $dynamicHeight }) => $dynamicHeight ? "clip" : "ellipsis"};
     }
   }
 `;

package/dist/DropDownMenu/components/MenuItemList.d.ts

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

package/dist/DropDownMenu/components/MenuItemList.js

@@ -10,9 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useRef, useState, } from "react";
 import styled from "styled-components";
-import { FixedSizeList } from "react-window";
+import { FixedSizeList, VariableSizeList } from "react-window";
 import { Plus } from "lucide-react";
 import CheckBox from "../../CheckBox";
 import { getControlSizeTokens } from "../../core";
@@ -77,17 +77,40 @@ const GroupHeader = styled.div `
     min-width: fit-content;
   }
 `;
-export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, selected, TooltipContent, multiselect, grouped, onAddNew, size, handleAddItem, handleRemoveItem, onItemSelect, renderOption, onScroll, onScrollToTop, onScrollToBottom, query, }) => {
+const MeasuredRow = ({ children, index, setItemSize, style }) => {
+    const rowRef = useRef(null);
+    useLayoutEffect(() => {
+        const row = rowRef.current;
+        if (!row)
+            return;
+        const updateSize = () => {
+            const measuredHeight = Math.ceil(row.getBoundingClientRect().height);
+            if (measuredHeight > 0) {
+                setItemSize(index, measuredHeight);
+            }
+        };
+        updateSize();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(updateSize);
+        observer.observe(row);
+        return () => observer.disconnect();
+    }, [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, grouped, onAddNew, size, handleAddItem, handleRemoveItem, onItemSelect, renderOption, onScroll, onScrollToTop, onScrollToBottom, query, }) => {
     var _a;
     const [searchValue, setSearchValue] = useState("");
     const _b = query !== null && query !== void 0 ? query : {}, { queryKey, queryFn, getNextPageParam, initialPageParam } = _b, rest = __rest(_b, ["queryKey", "queryFn", "getNextPageParam", "initialPageParam"]);
-    const abortController = new AbortController();
     const targetElm = useRef(null);
     const listElm = useRef(null);
+    const variableListRef = useRef(null);
+    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 || [];
@@ -137,37 +160,25 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, se
     })();
     const isObjectArray = (_a = Object.keys((visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
     const isLoading = isLoadingInfiniteQuery;
-    const handleOnScroll = (event) => {
+    const handleOnScroll = useCallback((event) => {
         const scrollTolerance = 15;
         onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
         const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
-        // scroll to top
         if (scrollTop <= scrollTolerance) {
             onScrollToTop === null || onScrollToTop === void 0 ? void 0 : onScrollToTop(event);
         }
-        // Scroll to bottom
         if (scrollHeight - scrollTop <= clientHeight + scrollTolerance) {
             onScrollToBottom === null || onScrollToBottom === void 0 ? void 0 : onScrollToBottom(event);
             debouncedFetchNextPage();
         }
-    };
+    }, [debouncedFetchNextPage, onScroll, onScrollToBottom, onScrollToTop]);
     useLayoutEffect(() => {
-        if (listElm.current) {
-            listElm.current.addEventListener("scroll", (e) => handleOnScroll(e));
-        }
-        // Event cleanup
-        return () => {
-            abortController.abort();
-        };
-    }, [
-        filteredItems,
-        listElm.current,
-        isLoading,
-        onScroll,
-        onScrollToTop,
-        onScrollToBottom,
-        handleOnScroll,
-    ]);
+        const list = listElm.current;
+        if (!list)
+            return;
+        list.addEventListener("scroll", handleOnScroll);
+        return () => list.removeEventListener("scroll", handleOnScroll);
+    }, [dynamicOptionHeight, handleOnScroll, isLoading, renderOption]);
     useLayoutEffect(() => {
         var _a;
         if (targetElm.current) {
@@ -181,13 +192,69 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, se
     const overscanCount = 10;
     const sizeTokens = getControlSizeTokens(size || "sm");
     const itemHeight = sizeTokens.menuRowHeight;
+    const dynamicListEnabled = dynamicOptionHeight !== null && dynamicOptionHeight !== void 0 ? dynamicOptionHeight : Boolean(renderOption);
+    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"}`)
+        .join("|");
+    const getDynamicItemSize = (index) => {
+        var _a;
+        return itemSizeMap.current[index] ||
+            (((_a = displayItems[index]) === null || _a === void 0 ? void 0 : _a._isGroupHeader) ? itemHeight : estimatedDynamicItemHeight);
+    };
+    const estimatedHeight = dynamicListEnabled
+        ? displayItems.reduce((total, _, index) => total + getDynamicItemSize(index), 0)
+        : itemCount * itemHeight;
     const height = viewPortDimensions.height
         ? viewPortDimensions.height
-        : itemCount * itemHeight < 200
-            ? itemCount * itemHeight
+        : estimatedHeight < 200
+            ? estimatedHeight
             : 200;
     const width = viewPortDimensions.width || 188;
+    const setItemSize = useCallback((index, measuredSize) => {
+        var _a;
+        if (itemSizeMap.current[index] === measuredSize)
+            return;
+        itemSizeMap.current = Object.assign(Object.assign({}, itemSizeMap.current), { [index]: measuredSize });
+        (_a = variableListRef.current) === null || _a === void 0 ? void 0 : _a.resetAfterIndex(index);
+        setMeasurementRevision((revision) => revision + 1);
+    }, []);
+    useLayoutEffect(() => {
+        var _a;
+        itemSizeMap.current = {};
+        (_a = variableListRef.current) === null || _a === void 0 ? void 0 : _a.resetAfterIndex(0, true);
+        setMeasurementRevision((revision) => revision + 1);
+    }, [displayItemsKey, dynamicListEnabled]);
+    const renderDisplayItem = (item, index, style) => {
+        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._isAddNew) {
+            return (_jsx(MenuItem, { className: "MenuItem", size: size, leftSection: _jsx(Plus, { size: 14 }), onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onAddNew === null || onAddNew === void 0 ? void 0 : onAddNew(item.value);
+                }, style: style, children: item.label }, "__add_new__"));
+        }
+        const isSelected = !!(selected === null || selected === void 0 ? void 0 : selected.find((s) => {
+            return isObjectArray ? (s === null || s === void 0 ? void 0 : s.value) === (item === null || item === void 0 ? void 0 : item.value) : s === item;
+        }));
+        if (item.items) {
+            return (_jsx(DropDownMenu, { data: item.items, size: size, buttonProps: style ? Object.assign({ style }, item) : Object.assign({}, item), disabled: item.disabled, dynamicOptionHeight: dynamicListEnabled, children: item.label }));
+        }
+        return (_jsx(MenuItem, { className: "MenuItem", itemData: item, TooltipContent: TooltipContent, "data-selected": isSelected, "data-disabled": item.disabled, disabled: item.disabled, leftSection: multiselect ? (_jsxs(_Fragment, { children: [_jsx(CheckBox, { value: isSelected, size: size, onChange: (newValue) => {
+                            var _a;
+                            newValue ? handleAddItem(item) : handleRemoveItem(item);
+                            (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
+                        } }), (item === null || item === void 0 ? void 0 : item.leftSection) || null] })) : ((item === null || item === void 0 ? void 0 : item.leftSection) || null), rightSection: item === null || item === void 0 ? void 0 : item.rightSection, multiselect: multiselect, size: size, title: !TooltipContent ? item === null || item === void 0 ? void 0 : item.label : undefined, onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleItemClick(item, isSelected);
+            }, style: style, "$dynamicHeight": dynamicListEnabled, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) ||
+                (item === null || item === void 0 ? void 0 : item.label) ||
+                (typeof item === "string" || typeof item === "number" ? item : null) }, index));
+    };
     return (_jsxs("div", { children: [searchable && (_jsx(SearchInput, { variant: "outlined", size: size, placeholder: "Search", defaultValue: searchValue, onChange: (e) => {
                     if (!manualSearch) {
                         handleSearch(e);
@@ -201,40 +268,15 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, se
                     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: _jsx(FixedSizeList, { itemData: displayItems, overscanCount: overscanCount, height: height, width: width, itemCount: itemCount, itemSize: itemHeight, outerRef: listElm, children: ({ data, index, style }) => {
+                }, 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, outerRef: listElm, children: ({ data, index, style }) => {
+                        const item = data === null || data === void 0 ? void 0 : data[index];
+                        if (!item)
+                            return null;
+                        return (_jsx(MeasuredRow, { index: index, setItemSize: setItemSize, style: style, children: renderDisplayItem(item, index) }));
+                    } })) : (_jsx(FixedSizeList, { itemData: displayItems, 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];
                         if (!item)
                             return null;
-                        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._isAddNew) {
-                            return (_jsx(MenuItem, { className: "MenuItem", size: size, leftSection: _jsx(Plus, { size: 14 }), onClick: (e) => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    onAddNew === null || onAddNew === void 0 ? void 0 : onAddNew(item.value);
-                                }, style: style, children: item.label }, "__add_new__"));
-                        }
-                        const isSelected = !!(selected === null || selected === void 0 ? void 0 : selected.find((s) => {
-                            return isObjectArray ? (s === null || s === void 0 ? void 0 : s.value) === (item === null || item === void 0 ? void 0 : item.value) : s === item;
-                        }));
-                        if (item.items) {
-                            return (_jsx(DropDownMenu, { data: item.items, size: size, buttonProps: Object.assign({ style }, item), disabled: item.disabled, children: item.label }));
-                        }
-                        return (_jsx(MenuItem, { className: "MenuItem", itemData: item, TooltipContent: TooltipContent, "data-selected": isSelected, "data-disabled": item.disabled, disabled: item.disabled, leftSection: multiselect ? (_jsxs(_Fragment, { children: [_jsx(CheckBox, { value: isSelected, size: size, onChange: (newValue) => {
-                                            var _a;
-                                            newValue
-                                                ? handleAddItem(item)
-                                                : handleRemoveItem(item);
-                                            (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
-                                        } }), (item === null || item === void 0 ? void 0 : item.leftSection) || null] })) : ((item === null || item === void 0 ? void 0 : item.leftSection) || null), rightSection: item === null || item === void 0 ? void 0 : item.rightSection, multiselect: multiselect, size: size, title: !TooltipContent ? item === null || item === void 0 ? void 0 : item.label : undefined, onClick: (e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                handleItemClick(item, isSelected);
-                            }, style: style, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) ||
-                                (item === null || item === void 0 ? void 0 : item.label) ||
-                                (typeof item === "string" || typeof item === "number"
-                                    ? item
-                                    : null) }, index));
-                    } }) }))] }));
+                        return renderDisplayItem(item, index, style);
+                    } })) }))] }));
 };

package/dist/DropDownMenu/types.d.ts

@@ -44,6 +44,7 @@ export type DropDownMenuProps = {
     searchable?: boolean;
     manualSearch?: boolean;
     grouped?: boolean;
+    dynamicOptionHeight?: boolean;
     onAddNew?: (value: string) => void;
     loading?: boolean;
     arrow?: boolean;
@@ -77,4 +78,5 @@ export type MenuProps = {
     TooltipContent?: ComponentType<any>;
     dropDownProps?: ComponentPropsWithoutRef<typeof StyledContent>;
     disabled?: boolean;
+    dynamicOptionHeight?: boolean;
 };

package/dist/SelectBox/SelectBox.js

@@ -10,7 +10,7 @@ import { StyledInputContainer, StyledInnerItemContainer, EmptyComponent, GroupTi
 // Re-export for backward compatibility
 export { StyledInputContainer };
 export const SelectBox = ({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, label, description, required = false, error, openOnFocus = true, renderOption, actionComponent, focused, grouped, OptionTooltip, // Custom tooltip component for search menu items
-DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, 
+DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, dynamicOptionHeight, 
 // Enhanced focus control props
 triggerFocus = false, triggerOpen = false, onFocused, onOpened, }) => {
     var _a, _b, _c, _d, _e, _f;
@@ -276,7 +276,7 @@ triggerFocus = false, triggerOpen = false, onFocused, onOpened, }) => {
     // ============================================================================
     // Render Helper Functions
     // ============================================================================
-    const renderOptionItem = (item, index) => (_jsx(Tooltip, { content: OptionTooltip ? _jsx(OptionTooltip, { data: item.data }) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (_value === null || _value === void 0 ? void 0 : _value.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
+    const renderOptionItem = (item, index) => (_jsx(Tooltip, { content: OptionTooltip ? _jsx(OptionTooltip, { data: item.data }) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (_value === null || _value === void 0 ? void 0 : _value.value) === item.value, "data-disabled": item.disabled, "$dynamicHeight": dynamicOptionHeight !== null && dynamicOptionHeight !== void 0 ? dynamicOptionHeight : Boolean(renderOption), size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
     const renderActionButton = () => {
         if (clearable && (_value || !!inputValue)) {
             return (_jsx(ClearButton, { size: size, className: "input-btn", onClick: handleClear, onMouseDown: (e) => {

package/dist/SelectBox/select-box.styled-components.d.ts

@@ -16,6 +16,7 @@ export declare const GroupTitle: import("styled-components/dist/types").IStyledC
 export declare const ActionMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     size: Size;
+    $dynamicHeight?: boolean;
 }>> & string;
 export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

package/dist/SelectBox/select-box.styled-components.js

@@ -99,10 +99,11 @@ export const ActionMenu = styled.div ``;
 export const StyledItem = styled.div `
   color: ${(props) => props.theme.palette.text.primary};
   border-radius: 3px;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   min-height: ${({ size }) => `${getControlSizeTokens(size).menuRowHeight}px`};
-  height: ${({ size }) => `${getControlSizeTokens(size).menuRowHeight}px`};
+  height: ${({ size, $dynamicHeight }) => $dynamicHeight ? "auto" : `${getControlSizeTokens(size).menuRowHeight}px`};
   position: relative;
   user-select: none;
   outline: none;
@@ -113,7 +114,7 @@ export const StyledItem = styled.div `
 
   font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
 
-  padding: ${({ size }) => `0px ${getControlSizeTokens(size).menuItemPaddingX}px`};
+  padding: ${({ size, $dynamicHeight }) => `${$dynamicHeight ? 6 : 0}px ${getControlSizeTokens(size).menuItemPaddingX}px`};
 
   &:hover {
     background-color: ${(props) => props.theme.palette.action.hover};

package/dist/SelectBox/types.d.ts

@@ -34,6 +34,7 @@ export type SelectBoxProps = {
     debounceTime?: number;
     sort?: boolean;
     disabled?: boolean;
+    dynamicOptionHeight?: boolean;
     renderOption?: (item: Option | string) => React.ReactNode;
     OptionTooltip?: (props: {
         data: any;

package/dist/TagBox/TagBox.d.ts

@@ -1,3 +1,3 @@
 import { TagBoxProps } from "./types";
-declare const TagBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TagBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, defaultValue, value, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, openOnFocus, label, description, required, error, loading, sort, disabled, renderOption, renderTag, OptionTooltip, DropDownProps, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const TagBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TagBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, defaultValue, value, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, openOnFocus, label, description, required, error, loading, sort, disabled, dynamicOptionHeight, renderOption, renderTag, OptionTooltip, DropDownProps, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default TagBox;

package/dist/TagBox/TagBox.js

@@ -213,10 +213,11 @@ const StyledItem = styled.div `
   line-height: 1;
   color: ${(props) => props.theme.palette.text.primary};
   border-radius: 3px;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   min-height: ${({ size }) => `${getControlSizeTokens(size).menuRowHeight}px`};
-  height: ${({ size }) => `${getControlSizeTokens(size).menuRowHeight}px`};
+  height: ${({ size, $dynamicHeight }) => $dynamicHeight ? "auto" : `${getControlSizeTokens(size).menuRowHeight}px`};
   position: relative;
   user-select: none;
   outline: none;
@@ -225,7 +226,7 @@ const StyledItem = styled.div `
 
   font-family: ${({ theme }) => theme.typography.fontFamily};
   font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
-  padding: ${({ size }) => `0px ${getControlSizeTokens(size).menuItemPaddingX}px`};
+  padding: ${({ size, $dynamicHeight }) => `${$dynamicHeight ? 6 : 0}px ${getControlSizeTokens(size).menuItemPaddingX}px`};
 
   &:hover {
     background-color: ${(props) => props.theme.palette.action.hover};
@@ -283,7 +284,7 @@ const resolveValues = (value, data) => {
     }
     return resolvedValues;
 };
-const TagBox = styled(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue, value, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, openOnFocus = true, label, description, required = false, error, loading = false, sort = false, disabled = false, renderOption, renderTag, OptionTooltip, DropDownProps = {}, }) => {
+const TagBox = styled(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue, value, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, openOnFocus = true, label, description, required = false, error, loading = false, sort = false, disabled = false, dynamicOptionHeight, renderOption, renderTag, OptionTooltip, DropDownProps = {}, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const isObjectArray = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.hasOwnProperty("label");
     const isControlled = value !== undefined;
@@ -617,17 +618,16 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
                                                             e.preventDefault();
                                                             e.stopPropagation();
                                                             handleItemClick(item);
-                                                        }, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: typeof item === "string"
+                                                        }, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) === item.value, "data-disabled": item.disabled, "$dynamicHeight": dynamicOptionHeight !== null && dynamicOptionHeight !== void 0 ? dynamicOptionHeight : Boolean(renderOption), size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: typeof item === "string"
                                                                 ? item
                                                                 : item === null || item === void 0 ? void 0 : item.label })) }, index) }, index));
                                             })] }, group.label)))
                                     : filteredItems.map((item, index) => {
                                         return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
-                                                    console.log("clicked");
                                                     e.preventDefault();
                                                     e.stopPropagation();
                                                     handleItemClick(item);
-                                                }, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
+                                                }, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) === item.value, "data-disabled": item.disabled, "$dynamicHeight": dynamicOptionHeight !== null && dynamicOptionHeight !== void 0 ? dynamicOptionHeight : Boolean(renderOption), size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
                                     }) }))] })) }) }))] }));
 }) `
   position: relative;

package/dist/TagBox/types.d.ts

@@ -32,6 +32,7 @@ export interface TagBoxProps {
     debounceTime?: number;
     sort?: boolean;
     disabled?: boolean;
+    dynamicOptionHeight?: boolean;
     renderOption?: (item: Option | string) => React.ReactNode;
     renderTag?: (item: Option | string) => React.ReactNode;
     OptionTooltip?: (props: {

package/dist/TextArea/TextArea.js

@@ -50,6 +50,11 @@ const TextArea = styled(TextareaAutosize) `
     border: 1px solid ${(props) => props.theme.palette.primary.main};
   }
 
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
   ::placeholder {
     font-size: ${({ size }) => `${getControlSizeTokens(size).placeholderFontSize}px`};
   }

package/package.json

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

package/dist/BarChart/BarChart.d.ts

@@ -1,3 +0,0 @@
-import { BarChartProps } from "./BarChart.types";
-export declare const BarChart: <TData>({ data, series, width, height, orientation, seriesLayout, margin, barGap, groupBarGap, maxBarThickness, barRadius, colors, colorGradient, barOpacity, barBorderColor, barBorderWidth, barBorderOpacity, minValue, maxValue, valueTickCount, showGridLines, showAxisLines, showCategoryAxisLabels, showValueAxisLabels, showLegend, showLegendSwatches, showLegendLabels, showLegendValues, showLabels, emptyLabel, ariaLabel, animateOnRender, animationDuration, animationStagger, showTooltips, valueFormatter, categoryLabelFormatter, tickFormatter, labelFormatter, tooltipFormatter, onBarClick, onLegendItemClick, onSeriesLegendItemClick, className, ...props }: BarChartProps<TData>) => import("react/jsx-runtime").JSX.Element;
-export default BarChart;