@monolith-forensics/monolith-ui 1.3.71 → 1.3.91

package/dist/ItemTotal/ItemTotal.d.ts

@@ -1,11 +1,9 @@
 import React from "react";
-interface ItemTotalProps {
+export type ItemTotalProps = {
     className?: string;
     total: number;
     Icon: React.ComponentType<any>;
     style?: React.CSSProperties;
     title?: string;
-}
-declare const ItemTotal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ItemTotalProps, never>> & string & Omit<({ className, total, Icon, style, title, }: ItemTotalProps) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
-export default ItemTotal;
-export type { ItemTotalProps };
+};
+export declare const ItemTotal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ItemTotalProps, never>> & string & Omit<({ className, total, Icon, style, title, }: ItemTotalProps) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;

package/dist/ItemTotal/ItemTotal.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-const ItemTotal = styled(({ className, total, Icon, style = {}, title = "Total Items", }) => {
+export const ItemTotal = styled(({ className, total, Icon, style = {}, title = "Total Items", }) => {
     return (_jsxs("div", { className: className, title: title, style: style, children: [_jsx(Icon, { size: 14, style: {
                     fontSize: 14,
                     marginRight: 5,
@@ -19,4 +19,3 @@ const ItemTotal = styled(({ className, total, Icon, style = {}, title = "Total I
     color: ${({ theme }) => theme.palette.text.primary};
   }
 `;
-export default ItemTotal;

package/dist/ItemTotal/index.d.ts

@@ -1,2 +1 @@
-export { default } from "./ItemTotal";
-export type { ItemTotalProps } from "./ItemTotal";
+export * from "./ItemTotal";

package/dist/ItemTotal/index.js

@@ -1 +1 @@
-export { default } from "./ItemTotal";
+export * from "./ItemTotal";

package/dist/SelectBox/SelectBox.d.ts

@@ -1,5 +1,4 @@
 import { SelectBoxProps } from "..";
-export declare const StyledInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    width?: string | number | null;
-}>> & string;
+import { StyledInputContainer } from "./select-box.styled-components";
+export { StyledInputContainer };
 export declare const SelectBox: React.FC<SelectBoxProps>;

package/dist/SelectBox/SelectBox.js

@@ -1,253 +1,69 @@
-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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import styled, { useTheme } from "styled-components";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "styled-components";
 import { useFloating, flip, offset, FloatingPortal, autoUpdate, } from "@floating-ui/react";
-import { useCallback, useEffect, useRef, useState, } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Input, FieldLabel, Tooltip, Loader } from "..";
 import { useDebouncedCallback } from "use-debounce";
 import { StyledContent, StyledFloatContainer, ArrowButton, ClearButton, } from "../core";
-export const StyledInputContainer = styled.div `
-  font-family: ${({ theme }) => theme.typography.fontFamily};
-
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  border: none;
-  outline: none;
-  height: fit-content;
-
-  width: ${({ width }) => {
-    if (typeof width === "undefined")
-        return "100%";
-    if (width === null)
-        return "100%";
-    if (typeof width === "string")
-        return width;
-    if (typeof width === "number")
-        return `${width}px`;
-}};
-
-  &[data-disabled="true"] {
-    opacity: 0.5;
-    pointer-events: none;
-
-    > * {
-      pointer-events: none;
-    }
-  }
-`;
-const StyledInnerItemContainer = styled.div `
-  overflow-y: auto;
-
-  &[data-scroll-active="true"] {
-    padding-right: 5px;
-  }
-`;
-const EmptyComponent = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 5px;
-  font-size: 12px;
-  font-weight: 500;
-  color: ${(props) => props.theme.palette.text.secondary};
-`;
-const GroupTitle = styled((_a) => {
-    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (_jsxs("div", Object.assign({ className: className }, props, { children: [_jsx("div", { className: "group-line" }), _jsx("div", { className: "group-label", children: children }), _jsx("div", { className: "group-line" })] })));
-}) `
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-
-  color: ${(props) => props.theme.palette.text.secondary};
-
-  padding: ${({ size }) => size === "xs"
-    ? "2px 8px"
-    : size === "sm"
-        ? "4px 10px"
-        : size === "md"
-            ? "4px 12px"
-            : size === "lg"
-                ? "5px 14px"
-                : size === "xl"
-                    ? "6px 16px"
-                    : "2px 8px"};
-
-  .group-label {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: fit-content;
-    min-width: fit-content;
-
-    font-weight: 500;
-
-    font-size: ${({ size }) => size === "xs"
-    ? "11px"
-    : size === "sm"
-        ? "13px"
-        : size === "md"
-            ? "15px"
-            : size === "lg"
-                ? "17px"
-                : size === "xl"
-                    ? "19px"
-                    : "11px"};
-  }
-
-  .group-line {
-    border-top: 1px solid ${(props) => props.theme.palette.divider};
-    width: 100%;
-  }
-`;
-const ActionMenu = styled.div ``;
-const StyledItem = styled.div `
-  color: ${(props) => props.theme.palette.text.primary};
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  min-height: 25px;
-  padding: 7px 10px;
-  position: relative;
-  user-select: none;
-  outline: none;
-
-  cursor: pointer;
-
-  font-family: ${({ theme }) => theme.typography.fontFamily};
-
-  font-size: ${({ size }) => size === "xs"
-    ? "11px"
-    : size === "sm"
-        ? "13px"
-        : size === "md"
-            ? "15px"
-            : size === "lg"
-                ? "17px"
-                : size === "xl"
-                    ? "19px"
-                    : "11px"};
-
-  padding: ${({ size }) => size === "xs"
-    ? "2px 8px"
-    : size === "sm"
-        ? "4px 10px"
-        : size === "md"
-            ? "4px 12px"
-            : size === "lg"
-                ? "5px 14px"
-                : size === "xl"
-                    ? "6px 16px"
-                    : "2px 8px"};
-
-  &:hover {
-    background-color: ${(props) => props.theme.palette.action.hover};
-    color: ${(props) => props.theme.palette.text.primary};
-  }
-
-  // Custom prop, checks if item is selected and returns true
-  &[data-selected="true"] {
-    background-color: ${(props) => props.theme.palette.divider};
-    color: ${(props) => props.theme.palette.text.primary};
-  }
-
-  &[data-disabled] {
-    color: ${(props) => props.theme.palette.text.secondary};
-    opacity: 0.5;
-    pointer-events: none;
-  }
-`;
-/**
- *
- * Attempts to resolve the value to an Option object
- * if the value is a string, it will attempt to find the corresponding Option object
- * if the value is an Option object, it will attempt to find the corresponding Option object
- * if the value is not found, it will return the value as is so that custom values can be displayed without a lookup
- */
-const resolveValue = (value, data) => {
-    let foundOption;
-    if (value === undefined)
-        return undefined;
-    if (value === null)
-        return null;
-    if (typeof value === "string") {
-        foundOption = data.find((item) => item.value === value);
-    }
-    else if (typeof value === "number") {
-        foundOption = data.find((item) => item.value === value);
-    }
-    else if (typeof value === "object") {
-        foundOption = data.find((item) => item.value == value.value);
-    }
-    if (foundOption)
-        return foundOption;
-    if (typeof value === "string") {
-        return { value, label: value };
-    }
-    if (typeof value === "number") {
-        return { value, label: value.toString() };
-    }
-    return value;
-};
-const StyledContainer = styled.div `
-  position: relative;
-  cursor: pointer;
-  width: 100%;
-`;
-export const SelectBox = ({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, onItemAdded, 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
+import { DEFAULT_DROPDOWN_HEIGHT, DROPDOWN_OFFSET, getEmptyMessage, KEYBOARD_KEYS, resolveValue, } from "./select-box.utils";
+import { StyledInputContainer, StyledInnerItemContainer, EmptyComponent, GroupTitle, ActionMenu, StyledItem, StyledContainer, } from "./select-box.styled-components";
+// 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, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
+    // Component setup and data processing
     const theme = useTheme();
-    const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
-    // Determine controlled status only once at mount
+    // Type guard to check if an item is an Option object
+    const isOption = (item) => {
+        return (typeof item === "object" &&
+            item !== null &&
+            typeof item.label === "string" &&
+            item.value !== undefined);
+    };
     const isControlled = useRef(value !== undefined);
-    const resolvedOptions = data.map((item) => ({
-        value: isObjectArray ? item.value : item,
-        label: isObjectArray ? item.label : item,
-        group: isObjectArray ? item.group : undefined,
-        disabled: isObjectArray ? item.disabled : undefined,
-        data: isObjectArray ? item.data : undefined,
-    }));
-    /**
-     * Get the correct option if the default value is a string
-     * otherwise, use the default value as is
-     * this allows setting the value with a string or Option object
-     */
+    const resolvedOptions = data.map((item) => {
+        if (isOption(item)) {
+            return {
+                value: item.value,
+                label: item.label,
+                group: item.group,
+                disabled: item.disabled,
+                data: item.data,
+            };
+        }
+        else {
+            // Treat as string
+            const stringValue = item;
+            return {
+                value: stringValue,
+                label: stringValue,
+                group: undefined,
+                disabled: undefined,
+                data: undefined,
+            };
+        }
+    });
     const resolvedDefaultValue = resolveValue(defaultValue, resolvedOptions);
-    /**
-     * Get the correct option if the value is a string
-     * otherwise, use the value as is
-     * this allows setting the value with a string or Option object
-     */
     const resolvedValue = resolveValue(value, resolvedOptions);
+    // Value and input state
     const [valueState, setValueState] = useState(resolvedDefaultValue);
-    /**
-     * Get the correct value based on whether the component is controlled or not
-     * if controlled, use the controlled value, otherwise use the resolved value
-     */
     const _value = isControlled.current ? resolvedValue : valueState;
     const [inputValue, setInputValue] = useState(typeof _value === "object" ? (_value === null || _value === void 0 ? void 0 : _value.label) || "" : _value || "");
+    // Dropdown state
     const [isOpen, setIsOpen] = useState(false);
-    const [searchValue, setSearchValue] = useState("");
-    const [customItems, setCustomItems] = useState([]);
     const [placement, setPlacement] = useState("bottom-start");
     const [dropDownHeight, setDropDownHeight] = useState(null);
+    // Search and custom items state
+    const [searchValue, setSearchValue] = useState("");
+    const [customItems, setCustomItems] = useState([]);
+    // Refs
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const scrollContainerRef = useRef(null);
+    // ============================================================================
+    // Data Processing and Filtering
+    // ============================================================================
     // Remove duplicates from search dropdown data
     const uniqueItems = Array.from(new Map([...resolvedOptions, ...customItems].map((item) => [item.value, item])).values());
     // search filter for dropdown items
@@ -293,6 +109,9 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
         }))
             .sort((a, b) => a.label.localeCompare(b.label))
         : [];
+    // ============================================================================
+    // Floating UI Setup
+    // ============================================================================
     const { refs, floatingStyles, update } = useFloating({
         open: isOpen,
         onOpenChange: setIsOpen,
@@ -302,6 +121,9 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
         middleware: [flip(), offset(5)],
         whileElementsMounted: autoUpdate,
     });
+    // ============================================================================
+    // Event Handlers
+    // ============================================================================
     const toggleOpen = () => {
         setIsOpen((prev) => {
             if (!prev) {
@@ -369,15 +191,10 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
         setInputValue((option === null || option === void 0 ? void 0 : option.label) || "");
         onChange === null || onChange === void 0 ? void 0 : onChange(option === null || option === void 0 ? void 0 : option.value, option);
     }, [onChange]);
-    const handleAddItem = useCallback((newItem) => {
-        setCustomItems((prev) => [...prev, newItem]);
-        onItemAdded === null || onItemAdded === void 0 ? void 0 : onItemAdded(newItem);
-    }, [onItemAdded, isObjectArray, handleChangeSelection]);
     const handleKeyDown = (e) => {
         var _a;
-        const currentInputValue = inputValue;
         // Escape key
-        if (e.key === "Escape") {
+        if (e.key === KEYBOARD_KEYS.ESCAPE) {
             const reference = (_a = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _a === void 0 ? void 0 : _a.current;
             reference === null || reference === void 0 ? void 0 : reference.blur();
             setSearchValue("");
@@ -386,12 +203,12 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
             return;
         }
         // Enter key
-        if (e.key === "Enter") {
+        if (e.key === KEYBOARD_KEYS.ENTER) {
             toggleOpen();
             return;
         }
         // Arrow down
-        if (e.key === "ArrowDown") {
+        if (e.key === KEYBOARD_KEYS.ARROW_DOWN) {
             e.preventDefault();
             let newItem = filteredItems[0]; // Loop back to the first item
             // Find the index of the currently selected item
@@ -410,7 +227,7 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
             return;
         }
         // Arrow up
-        if (e.key === "ArrowUp") {
+        if (e.key === KEYBOARD_KEYS.ARROW_UP) {
             e.preventDefault();
             let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
             // Find the index of the currently selected item
@@ -432,7 +249,7 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
             return;
         }
         // Tab key
-        if (e.key === "Tab") {
+        if (e.key === KEYBOARD_KEYS.TAB) {
             if (!_value)
                 setInputValue("");
             setSearchValue("");
@@ -449,19 +266,50 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
         if (searchable) {
             setSearchValue(value);
             update();
-            onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchValue);
+            onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
         }
     };
-    const referenceEl = (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current;
-    const contentWidth = ((_e = (_d = (_c = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getClientRects) === null || _c === void 0 ? void 0 : _c.call(referenceEl)) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.width) || "100%";
+    // ============================================================================
+    // 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 renderActionButton = () => {
+        if (clearable && (_value || !!inputValue)) {
+            return (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                } }));
+        }
+        if (arrow) {
+            return (_jsx(ArrowButton, { onClick: (e) => {
+                    e.preventDefault();
+                }, onMouseDown: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    toggleOpen();
+                } }));
+        }
+        return null;
+    };
+    // ============================================================================
+    // Computed Values
+    // ============================================================================
+    const referenceEl = (_a = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _a === void 0 ? void 0 : _a.current;
+    const contentWidth = ((_d = (_c = (_b = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getClientRects) === null || _b === void 0 ? void 0 : _b.call(referenceEl)) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.width) || "100%";
     const scrollEl = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
     const scrollActive = scrollEl
         ? (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.scrollHeight) > (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.clientHeight)
         : false;
     // get height between bottom of the floating container and the bottom of the viewport
-    const bottomHeight = window.innerHeight - ((_f = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getBoundingClientRect()) === null || _f === void 0 ? void 0 : _f.bottom) - 10;
+    const bottomHeight = window.innerHeight -
+        ((_e = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.bottom) -
+        DROPDOWN_OFFSET;
     // get height between top of the floating container and the top of the viewport
-    const topHeight = (((_g = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.top) - 10);
+    const topHeight = (((_f = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getBoundingClientRect()) === null || _f === void 0 ? void 0 : _f.top) -
+        DROPDOWN_OFFSET);
+    // ============================================================================
+    // Effects
+    // ============================================================================
     // Close on outside click
     useEffect(() => {
         const close = (e) => {
@@ -480,15 +328,6 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
         document.addEventListener("click", close);
         return () => document.removeEventListener("click", close);
     }, [refs.floating, refs.reference, handleBlur]);
-    // Sync inputValue with controlled value changes
-    useEffect(() => {
-        if (isControlled.current && resolvedValue !== undefined) {
-            const newLabel = typeof resolvedValue === "object"
-                ? (resolvedValue === null || resolvedValue === void 0 ? void 0 : resolvedValue.label) || ""
-                : resolvedValue || "";
-            setInputValue(newLabel);
-        }
-    }, [resolvedValue, isControlled]);
     // handle scroll item into view
     useEffect(() => {
         var _a, _b;
@@ -498,7 +337,7 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
         }
     }, [_value]);
     useEffect(() => {
-        if (bottomHeight < 250) {
+        if (bottomHeight < DEFAULT_DROPDOWN_HEIGHT) {
             setPlacement("top-start");
             setDropDownHeight(topHeight);
         }
@@ -511,35 +350,22 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
             setDropDownHeight(bottomHeight);
         };
     }, [topHeight, bottomHeight, isOpen]);
-    return (_jsxs(StyledContainer, { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, children: [_jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable && !allowCustomValue, "data-button-right": arrow || clearable, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), clearable && (_value || !!inputValue) ? (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                        } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
-                            e.preventDefault();
-                        }, onMouseDown: (e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            toggleOpen();
-                        } })) : null] }), isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, { ref: (ref) => {
+    // ============================================================================
+    // Render
+    // ============================================================================
+    return (_jsxs(StyledContainer, { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, children: [_jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable && !allowCustomValue, "data-button-right": arrow || clearable, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), renderActionButton()] }), isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, { ref: (ref) => {
                         containerRef.current = ref;
                         refs.setFloating(ref);
                     }, style: floatingStyles, className: "mfFloating", children: _jsxs(StyledContent, Object.assign({ className: "mfFloatingContent", style: {
                             width: contentWidth,
                             maxWidth: contentWidth,
                             maxHeight: DropDownProps.autoHeight
-                                ? (dropDownHeight || 250) - 10
+                                ? (dropDownHeight || DEFAULT_DROPDOWN_HEIGHT) -
+                                    DROPDOWN_OFFSET
                                 : "",
                         }, variant: variant, "data-empty": filteredItems.length === 0 }, DropDownProps, { children: [loading && _jsx(Loader, {}), !loading && actionComponent && (_jsx(ActionMenu, { onClick: () => {
                                     setIsOpen(false);
-                                }, children: actionComponent })), !loading && filteredItems.length === 0 && (_jsx(EmptyComponent, { children: allowCustomValue && searchValue
-                                    ? `Add "${searchValue}" as a new item`
-                                    : !!searchValue
-                                        ? `No items found`
-                                        : "No items" })), !loading && (_jsx(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: grouped
-                                    ? groups.map((group, index) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
-                                                return (_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));
-                                            })] }, 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) => 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));
-                                    }) }))] })) }) }))] }));
+                                }, children: actionComponent })), !loading && filteredItems.length === 0 && (_jsx(EmptyComponent, { children: getEmptyMessage(allowCustomValue, searchValue) })), !loading && (_jsx(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: grouped
+                                    ? groups.map((group, index) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => renderOptionItem(item, index))] }, group.label)))
+                                    : filteredItems.map((item, index) => renderOptionItem(item, index)) }))] })) }) }))] }));
 };

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

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { Size } from "../core";
+export declare const StyledInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    width?: string | number | null;
+}>> & string;
+export declare const StyledInnerItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const EmptyComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+interface GroupTitleProps {
+    className?: string;
+    children?: ReactNode;
+    size?: Size;
+}
+export declare const GroupTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<GroupTitleProps, never>> & string & Omit<({ className, children, ...props }: GroupTitleProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+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;
+}>> & 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

@@ -0,0 +1,172 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+export const StyledInputContainer = styled.div `
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  border: none;
+  outline: none;
+  height: fit-content;
+
+  width: ${({ width }) => {
+    if (typeof width === "undefined")
+        return "100%";
+    if (width === null)
+        return "100%";
+    if (typeof width === "string")
+        return width;
+    if (typeof width === "number")
+        return `${width}px`;
+}};
+
+  &[data-disabled="true"] {
+    opacity: 0.5;
+    pointer-events: none;
+
+    > * {
+      pointer-events: none;
+    }
+  }
+`;
+export const StyledInnerItemContainer = styled.div `
+  overflow-y: auto;
+
+  &[data-scroll-active="true"] {
+    padding-right: 5px;
+  }
+`;
+export const EmptyComponent = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  color: ${(props) => props.theme.palette.text.secondary};
+`;
+export const GroupTitle = styled((_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (_jsxs("div", Object.assign({ className: className }, props, { children: [_jsx("div", { className: "group-line" }), _jsx("div", { className: "group-label", children: children }), _jsx("div", { className: "group-line" })] })));
+}) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+
+  color: ${(props) => props.theme.palette.text.secondary};
+
+  padding: ${({ size }) => size === "xs"
+    ? "2px 8px"
+    : size === "sm"
+        ? "4px 10px"
+        : size === "md"
+            ? "4px 12px"
+            : size === "lg"
+                ? "5px 14px"
+                : size === "xl"
+                    ? "6px 16px"
+                    : "2px 8px"};
+
+  .group-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: fit-content;
+    min-width: fit-content;
+
+    font-weight: 500;
+
+    font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
+  }
+
+  .group-line {
+    border-top: 1px solid ${(props) => props.theme.palette.divider};
+    width: 100%;
+  }
+`;
+export const ActionMenu = styled.div ``;
+export const StyledItem = styled.div `
+  color: ${(props) => props.theme.palette.text.primary};
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  min-height: 25px;
+  padding: 7px 10px;
+  position: relative;
+  user-select: none;
+  outline: none;
+
+  cursor: pointer;
+
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+
+  font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
+
+  padding: ${({ size }) => size === "xs"
+    ? "2px 8px"
+    : size === "sm"
+        ? "4px 10px"
+        : size === "md"
+            ? "4px 12px"
+            : size === "lg"
+                ? "5px 14px"
+                : size === "xl"
+                    ? "6px 16px"
+                    : "2px 8px"};
+
+  &:hover {
+    background-color: ${(props) => props.theme.palette.action.hover};
+    color: ${(props) => props.theme.palette.text.primary};
+  }
+
+  // Custom prop, checks if item is selected and returns true
+  &[data-selected="true"] {
+    background-color: ${(props) => props.theme.palette.divider};
+    color: ${(props) => props.theme.palette.text.primary};
+  }
+
+  &[data-disabled] {
+    color: ${(props) => props.theme.palette.text.secondary};
+    opacity: 0.5;
+    pointer-events: none;
+  }
+`;
+export const StyledContainer = styled.div `
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+`;

package/dist/SelectBox/select-box.utils.d.ts

@@ -0,0 +1,19 @@
+import { Option } from "./types";
+/**
+ *
+ * Attempts to resolve the value to an Option object
+ * if the value is a string, it will attempt to find the corresponding Option object
+ * if the value is an Option object, it will attempt to find the corresponding Option object
+ * if the value is not found, it will return the value as is so that custom values can be displayed without a lookup
+ */
+export declare const KEYBOARD_KEYS: {
+    readonly ESCAPE: "Escape";
+    readonly ENTER: "Enter";
+    readonly ARROW_DOWN: "ArrowDown";
+    readonly ARROW_UP: "ArrowUp";
+    readonly TAB: "Tab";
+};
+export declare const DEFAULT_DROPDOWN_HEIGHT = 250;
+export declare const DROPDOWN_OFFSET = 10;
+export declare const getEmptyMessage: (allowCustomValue: boolean, searchValue: string) => string;
+export declare const resolveValue: (value: number | string | Option | undefined, data: Option[]) => Option | null | undefined;

package/dist/SelectBox/select-box.utils.js

@@ -0,0 +1,46 @@
+/**
+ *
+ * Attempts to resolve the value to an Option object
+ * if the value is a string, it will attempt to find the corresponding Option object
+ * if the value is an Option object, it will attempt to find the corresponding Option object
+ * if the value is not found, it will return the value as is so that custom values can be displayed without a lookup
+ */
+// Constants
+export const KEYBOARD_KEYS = {
+    ESCAPE: "Escape",
+    ENTER: "Enter",
+    ARROW_DOWN: "ArrowDown",
+    ARROW_UP: "ArrowUp",
+    TAB: "Tab",
+};
+export const DEFAULT_DROPDOWN_HEIGHT = 250;
+export const DROPDOWN_OFFSET = 10;
+// Helper functions
+export const getEmptyMessage = (allowCustomValue, searchValue) => {
+    if (allowCustomValue && searchValue) {
+        return `Add "${searchValue}" as a new item`;
+    }
+    return searchValue ? "No items found" : "No items";
+};
+export const resolveValue = (value, data) => {
+    let foundOption;
+    if (value === undefined)
+        return undefined;
+    if (value === null)
+        return null;
+    if (typeof value === "object") {
+        foundOption = data.find((item) => item.value == value.value);
+    }
+    else {
+        foundOption = data.find((item) => item.value === value);
+    }
+    if (foundOption)
+        return foundOption;
+    if (typeof value === "string") {
+        return { value, label: value };
+    }
+    if (typeof value === "number") {
+        return { value, label: value.toString() };
+    }
+    return value;
+};

package/dist/Table/TableMenu/TableMenu.js

@@ -33,7 +33,7 @@ const TableMenu = () => {
     const inputRef = useRef(null);
     if ((tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.enabled) !== true)
         return null;
-    const { addButtonOptions, filterOptions, tableCountOptions, exportOptions, compactOptions, columnSelectorOptions, searchOptions, children, } = tableMenuOptions;
+    const { addButtonOptions, filterOptions, tableCountOptions, exportOptions, compactOptions, columnSelectorOptions, actionOptions, searchOptions, children, } = tableMenuOptions;
     const queryFilter = useQueryFilter({
         defaultFilter: filterState,
         filterDefinitions: (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.filterDefinitions) || [],
@@ -84,7 +84,7 @@ const TableMenu = () => {
                                 }, onItemSelect: handleSelectFilter, dropDownProps: {
                                     style: { width: 175, maxWidth: 400 },
                                 }, searchable: true, children: "Filter" })), (tableCountOptions === null || tableCountOptions === void 0 ? void 0 : tableCountOptions.recordsTotalEnabled) === true && (_jsx(InfoBadge, { total: totalRecords || data.length })), enableSelection === true &&
-                                (tableCountOptions === null || tableCountOptions === void 0 ? void 0 : tableCountOptions.selectionTotalEnabled) === true && (_jsx(InfoBadge, { total: getCalculatedSelectionTotal(), hint: "Selected Items", icon: CheckSquareIcon })), children] }), _jsxs(FlexedRow, { children: [(exportOptions === null || exportOptions === void 0 ? void 0 : exportOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: [
+                                (tableCountOptions === null || tableCountOptions === void 0 ? void 0 : tableCountOptions.selectionTotalEnabled) === true && (_jsx(InfoBadge, { total: getCalculatedSelectionTotal(), hint: "Selected Items", icon: CheckSquareIcon })), children] }), _jsxs(FlexedRow, { children: [(actionOptions === null || actionOptions === void 0 ? void 0 : actionOptions.enabled) === true && actionOptions.menu, (exportOptions === null || exportOptions === void 0 ? void 0 : exportOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: [
                                     {
                                         label: "Export Visible Columns",
                                         value: TableExportOptions.ExportVisible,

package/dist/Table/types.d.ts

@@ -227,6 +227,10 @@ export type TableMenuOptions = {
         recordsTotalEnabled?: boolean;
         selectionTotalEnabled?: boolean;
     };
+    actionOptions?: {
+        enabled?: boolean;
+        menu?: React.ReactNode;
+    };
     searchOptions?: {
         enabled?: boolean;
         placeholder?: string;

package/dist/index.d.ts

@@ -28,8 +28,7 @@ export { default as Tooltip } from "./Tooltip";
 export { default as Pill } from "./Pill";
 export { default as Calendar } from "./Calendar";
 export { default as Typography } from "./Typography";
-export { default as ItemTotal } from "./ItemTotal";
-export type { ItemTotalProps } from "./ItemTotal";
+export * from "./ItemTotal";
 export * from "./RichTextEditor";
 export { default as Loader } from "./Loader";
 export type { LoaderProps } from "./Loader";

package/dist/index.js

@@ -21,7 +21,7 @@ export { default as Tooltip } from "./Tooltip";
 export { default as Pill } from "./Pill";
 export { default as Calendar } from "./Calendar";
 export { default as Typography } from "./Typography";
-export { default as ItemTotal } from "./ItemTotal";
+export * from "./ItemTotal";
 export * from "./RichTextEditor";
 export { default as Loader } from "./Loader";
 export * from "./QueryFilter";

package/package.json

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