@monolith-forensics/monolith-ui 1.4.3 → 1.5.1

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, 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, 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, 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, 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/MenuItemList.d.ts

@@ -10,6 +10,8 @@ export declare const MenuItemList: React.FC<{
     selected?: DropDownItem[];
     TooltipContent?: ComponentType<any>;
     multiselect?: boolean;
+    grouped?: boolean;
+    onAddNew?: (value: string) => void;
     size?: Size;
     handleAddItem: (item: DropDownItem) => void;
     handleRemoveItem: (item: DropDownItem) => void;

package/dist/DropDownMenu/components/MenuItemList.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useLayoutEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import { FixedSizeList } from "react-window";
+import { Plus } from "lucide-react";
 import CheckBox from "../../CheckBox";
 import { DropDownMenu } from "../DropDownMenu";
 import { MenuItem } from "./MenuItem";
@@ -30,11 +31,71 @@ const filterMenuItems = (menuItems, searchValue) => {
         return (_c = item.toLowerCase) === null || _c === void 0 ? void 0 : _c.call(item).includes(searchValue.toLowerCase());
     });
 };
+const buildGroupedDisplayList = (items) => {
+    const groups = {};
+    for (const item of items) {
+        const key = item.group || "Other";
+        if (!groups[key])
+            groups[key] = [];
+        groups[key].push(item);
+    }
+    const sortedKeys = Object.keys(groups).sort((a, b) => a.localeCompare(b));
+    const result = [];
+    for (const key of sortedKeys) {
+        result.push({
+            _isGroupHeader: true,
+            label: key,
+            value: `__group__${key}`,
+        });
+        result.push(...groups[key]);
+    }
+    return result;
+};
 const ListViewPort = styled.div.attrs({ className: "ListViewPort" }) `
   display: flex;
   flex-direction: column;
 `;
-export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, selected, TooltipContent, multiselect, size, handleAddItem, handleRemoveItem, onItemSelect, renderOption, onScroll, onScrollToTop, onScrollToBottom, query, }) => {
+const GroupHeader = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: ${(props) => props.theme.palette.text.secondary};
+  font-weight: 500;
+  user-select: none;
+  padding: ${({ $size }) => $size === "xs"
+    ? "2px 8px"
+    : $size === "sm"
+        ? "4px 10px"
+        : $size === "md"
+            ? "4px 12px"
+            : $size === "lg"
+                ? "5px 14px"
+                : $size === "xl"
+                    ? "6px 16px"
+                    : "2px 8px"};
+  font-size: ${({ $size }) => $size === "xs"
+    ? "10px"
+    : $size === "sm"
+        ? "11px"
+        : $size === "md"
+            ? "13px"
+            : $size === "lg"
+                ? "15px"
+                : $size === "xl"
+                    ? "17px"
+                    : "10px"};
+
+  .group-line {
+    border-top: 1px solid ${(props) => props.theme.palette.divider};
+    flex: 1;
+  }
+
+  .group-label {
+    white-space: nowrap;
+    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, }) => {
     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"]);
@@ -69,6 +130,29 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, se
     const filteredItems = searchable
         ? filterMenuItems(visibleItems, searchValue)
         : visibleItems;
+    const hasExactMatch = searchValue.trim() !== "" &&
+        filteredItems.some((item) => {
+            var _a, _b;
+            return ((_a = item === null || item === void 0 ? void 0 : item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === searchValue.trim().toLowerCase() ||
+                ((_b = item === null || item === void 0 ? void 0 : item.value) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase()) ===
+                    searchValue.trim().toLowerCase();
+        });
+    const displayItems = (() => {
+        let items = grouped
+            ? buildGroupedDisplayList(filteredItems)
+            : filteredItems;
+        if (onAddNew && searchValue.trim() && !hasExactMatch) {
+            items = [
+                ...items,
+                {
+                    _isAddNew: true,
+                    label: `Add "${searchValue.trim()}"`,
+                    value: searchValue.trim(),
+                },
+            ];
+        }
+        return items;
+    })();
     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) => {
@@ -114,7 +198,7 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, se
     }, [targetElm.current, isLoading]);
     const overscanCount = 10;
     const itemHeight = 25;
-    const itemCount = (filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.length) || 0;
+    const itemCount = (displayItems === null || displayItems === void 0 ? void 0 : displayItems.length) || 0;
     const height = viewPortDimensions.height
         ? viewPortDimensions.height
         : itemCount * itemHeight < 200
@@ -134,8 +218,20 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, se
                     alignItems: "center",
                     height: "100%",
                     padding: "10px 0",
-                }, children: [_jsx("div", { style: { fontSize: "12px" }, children: "Loading..." }), _jsx(Loader, {})] })), !isLoading && (_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]) || {};
+                }, children: [_jsx("div", { style: { fontSize: "12px" }, 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 }) => {
+                        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;
                         }));

package/dist/DropDownMenu/types.d.ts

@@ -15,6 +15,7 @@ export type DropDownItem = {
     rightSection?: React.ReactNode;
     disabled?: boolean;
     visible?: boolean;
+    group?: string;
 };
 export type SearchInputProps = React.ComponentPropsWithoutRef<typeof Input>;
 export type StyledContentProps = {
@@ -42,6 +43,8 @@ export type DropDownMenuProps = {
     onSearch?: (value: string) => void;
     searchable?: boolean;
     manualSearch?: boolean;
+    grouped?: boolean;
+    onAddNew?: (value: string) => void;
     loading?: boolean;
     arrow?: boolean;
     dropDownProps?: ComponentPropsWithoutRef<typeof StyledContent>;

package/dist/SelectBox/SelectBox.js

@@ -381,7 +381,7 @@ triggerFocus = false, triggerOpen = false, onFocused, onOpened, }) => {
     // ============================================================================
     // 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, tabIndex: -1, children: [_jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, disabled: disabled, tabIndex: disabled ? -1 : 0, 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) => {
+    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: () => !disabled && setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, tabIndex: -1, children: [_jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, disabled: disabled, tabIndex: disabled ? -1 : 0, 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: {

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

@@ -34,7 +34,7 @@ export const StyledInputContainer = styled.div `
 
   &[data-disabled="true"] {
     opacity: 0.5;
-    pointer-events: none;
+    cursor: not-allowed;
 
     > * {
       pointer-events: none;

package/dist/Table/TableMenu/TableMenu.js

@@ -30,7 +30,7 @@ const FlexedRow = styled.div `
 `;
 const TableMenu = () => {
     var _a, _b, _c, _d, _e;
-    const { data, columnState, searchState, toggleColumnVisibility, tableMenuOptions, runSearch, enableSelection, compactState, toggleCompact, totalRecords, getCalculatedSelectionTotal, filterState, handleFilterChange, clearSearch, } = useTable();
+    const { data, columnState, searchState, toggleColumnVisibility, tableMenuOptions, runSearch, enableSelection, compactState, toggleCompact, totalRecords, getCalculatedSelectionTotal, handleTableExport, filterState, handleFilterChange, clearSearch, } = useTable();
     const inputRef = useRef(null);
     if ((tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.enabled) !== true)
         return null;
@@ -111,10 +111,7 @@ const TableMenu = () => {
                                     title: "Export List to XLSX",
                                     size: "xxs",
                                     style: { padding: "0px 4px" },
-                                }, onItemSelect: (item) => {
-                                    var _a, _b;
-                                    return (_b = (_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.exportOptions) === null || _a === void 0 ? void 0 : _a.onExport) === null || _b === void 0 ? void 0 : _b.call(_a, item.value);
-                                }, dropDownProps: {
+                                }, onItemSelect: (item) => void handleTableExport(item.value), dropDownProps: {
                                     style: { width: 175, maxWidth: 400 },
                                 }, children: _jsx(DownloadIcon, { size: 14 }) })), (compactOptions === null || compactOptions === void 0 ? void 0 : compactOptions.enabled) === true && (_jsx(Button, { variant: "outlined", title: "Toggle Compact", size: "xxs", style: { padding: "0px 4px" }, onClick: () => toggleCompact(), children: compactState ? _jsx(Rows4Icon, { size: 14 }) : _jsx(Rows3Icon, { size: 14 }) })), (columnSelectorOptions === null || columnSelectorOptions === void 0 ? void 0 : columnSelectorOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: columnState.map((col) => ({
                                     label: (col === null || col === void 0 ? void 0 : col.caption) || col.dataField,

package/dist/Table/TableProvider.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 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)
@@ -18,6 +27,7 @@ import shortUUID from "short-uuid";
 import { SelectionStatus } from "./enums";
 import moment from "moment";
 import { useControlled } from "../Utilities";
+import { exportTableToExcel } from "./Utils";
 const calculateSelectionTotal = (selectionState, totalRecords, dataLength = 0) => {
     if (!selectionState) {
         return 0;
@@ -37,7 +47,7 @@ const calculateSelectionTotal = (selectionState, totalRecords, dataLength = 0) =
 };
 export const TableContext = createContext(null);
 const TableProvider = (_a) => {
-    var { children, columns, data, keyField, tableInstanceRef, stateStorage, tableMenuOptions, manualSorting, manualFiltering, manualSearch, height, maxHeight, minHeight, focusedRowId, enableColumnResize, enableSorting, compact, totalRecords, onColumnStateChange, onColumnReorder, onColumnHeaderClick, onSort, onRowUpdated, tableElement, headerRowElm, tableDimensions, targetElm, listElm, defaultSelectionState, selectionState, onSelectionChange, defaultFilterState, filterState, onFilterChange } = _a, props = __rest(_a, ["children", "columns", "data", "keyField", "tableInstanceRef", "stateStorage", "tableMenuOptions", "manualSorting", "manualFiltering", "manualSearch", "height", "maxHeight", "minHeight", "focusedRowId", "enableColumnResize", "enableSorting", "compact", "totalRecords", "onColumnStateChange", "onColumnReorder", "onColumnHeaderClick", "onSort", "onRowUpdated", "tableElement", "headerRowElm", "tableDimensions", "targetElm", "listElm", "defaultSelectionState", "selectionState", "onSelectionChange", "defaultFilterState", "filterState", "onFilterChange"]);
+    var { children, columns, data, keyField, tableInstanceRef, stateStorage, tableMenuOptions, manualSorting, manualFiltering, manualSearch, manualExport, height, maxHeight, minHeight, focusedRowId, enableColumnResize, enableSorting, compact, totalRecords, onColumnStateChange, onColumnReorder, onColumnHeaderClick, onSort, onRowUpdated, tableElement, headerRowElm, tableDimensions, targetElm, listElm, defaultSelectionState, selectionState, onSelectionChange, defaultFilterState, filterState, onFilterChange } = _a, props = __rest(_a, ["children", "columns", "data", "keyField", "tableInstanceRef", "stateStorage", "tableMenuOptions", "manualSorting", "manualFiltering", "manualSearch", "manualExport", "height", "maxHeight", "minHeight", "focusedRowId", "enableColumnResize", "enableSorting", "compact", "totalRecords", "onColumnStateChange", "onColumnReorder", "onColumnHeaderClick", "onSort", "onRowUpdated", "tableElement", "headerRowElm", "tableDimensions", "targetElm", "listElm", "defaultSelectionState", "selectionState", "onSelectionChange", "defaultFilterState", "filterState", "onFilterChange"]);
     const _columns = useMemo(() => columns
         .map((child, index) => {
         if (child.dataField === "__key") {
@@ -192,6 +202,18 @@ const TableProvider = (_a) => {
     const clearSearch = () => {
         updateSearchState("");
     };
+    const handleTableExport = (exportType) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        if (manualExport === true) {
+            (_b = (_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.exportOptions) === null || _a === void 0 ? void 0 : _a.onExport) === null || _b === void 0 ? void 0 : _b.call(_a, exportType);
+            return;
+        }
+        yield exportTableToExcel({
+            columns: columnState,
+            data: _data,
+            exportMode: exportType,
+        });
+    });
     const updateSortState = (sortState) => {
         var _a;
         setSortState(sortState);
@@ -209,20 +231,36 @@ const TableProvider = (_a) => {
         // sort data
         return data.sort((a, b) => {
             if (sortState) {
+                const aValue = a[sortState.dataField];
+                const bValue = b[sortState.dataField];
+                const aIsEmpty = aValue === null || aValue === undefined;
+                const bIsEmpty = bValue === null || bValue === undefined;
+                // Treat empty values as the smallest values.
+                if (aIsEmpty && bIsEmpty) {
+                    return 0;
+                }
+                if (aIsEmpty || bIsEmpty) {
+                    if (sortState.dir === "asc") {
+                        return aIsEmpty ? -1 : 1;
+                    }
+                    if (sortState.dir === "desc") {
+                        return aIsEmpty ? 1 : -1;
+                    }
+                }
                 if (sortState.dir === "asc") {
-                    if (a[sortState.dataField] < b[sortState.dataField]) {
+                    if (aValue < bValue) {
                         return -1;
                     }
-                    if (a[sortState.dataField] > b[sortState.dataField]) {
+                    if (aValue > bValue) {
                         return 1;
                     }
                     return 0;
                 }
                 else if (sortState.dir === "desc") {
-                    if (a[sortState.dataField] > b[sortState.dataField]) {
+                    if (aValue > bValue) {
                         return -1;
                     }
-                    if (a[sortState.dataField] < b[sortState.dataField]) {
+                    if (aValue < bValue) {
                         return 1;
                     }
                     return 0;
@@ -583,6 +621,7 @@ const TableProvider = (_a) => {
             toggleColumnVisibility,
             runSearch,
             clearSearch,
+            handleTableExport,
             handleFilterChange, filterState: _filterState, compactState,
             toggleCompact,
             getCalculatedSelectionTotal,

package/dist/Table/Utils/index.d.ts

@@ -1,3 +1,4 @@
 export { default as resolveColumnResize } from "./resolveColumnResize";
 export { default as syncColumnState } from "./syncColumnState";
 export { default as resizeHandler } from "./resizeHandler";
+export { exportTableToExcel } from "./tableExport";

package/dist/Table/Utils/index.js

@@ -1,3 +1,4 @@
 export { default as resolveColumnResize } from "./resolveColumnResize";
 export { default as syncColumnState } from "./syncColumnState";
 export { default as resizeHandler } from "./resizeHandler";
+export { exportTableToExcel } from "./tableExport";

package/dist/Table/Utils/tableExport.d.ts

@@ -0,0 +1,9 @@
+import { TableExportOptions } from "../enums";
+import { ColumnState } from "../types";
+type TableExportParams = {
+    columns: ColumnState[];
+    data: any[];
+    exportMode: TableExportOptions;
+};
+export declare const exportTableToExcel: ({ columns, data, exportMode, }: TableExportParams) => Promise<void>;
+export {};

package/dist/Table/Utils/tableExport.js

@@ -0,0 +1,102 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { isValidElement } from "react";
+import { TableExportOptions } from "../enums";
+const getColumnHeader = (column) => {
+    return column.caption || column.dataField;
+};
+const toExportablePrimitive = (value) => {
+    if (value === undefined || value === null)
+        return null;
+    if (typeof value === "string" ||
+        typeof value === "number" ||
+        typeof value === "boolean" ||
+        value instanceof Date) {
+        return value;
+    }
+    if (value instanceof RegExp) {
+        return value.toString();
+    }
+    if (Array.isArray(value)) {
+        return value.map((item) => toExportablePrimitive(item)).join(", ");
+    }
+    if (typeof value === "object") {
+        try {
+            return JSON.stringify(value);
+        }
+        catch (_a) {
+            return String(value);
+        }
+    }
+    return String(value);
+};
+const extractTextFromNode = (node) => {
+    if (node === null || node === undefined || typeof node === "boolean") {
+        return "";
+    }
+    if (typeof node === "string" || typeof node === "number") {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map((child) => extractTextFromNode(child)).join("");
+    }
+    if (isValidElement(node)) {
+        return extractTextFromNode(node.props.children);
+    }
+    return "";
+};
+const getExportCellValue = (row, column) => {
+    const rawValue = row[column.dataField];
+    if (!column.render) {
+        return toExportablePrimitive(rawValue);
+    }
+    const renderedText = extractTextFromNode(column.render({ rowData: row }));
+    if (renderedText.trim().length > 0) {
+        return renderedText;
+    }
+    return toExportablePrimitive(rawValue);
+};
+const getColumnsForExport = (columns, exportMode) => {
+    return columns
+        .filter((column) => {
+        if (exportMode === TableExportOptions.ExportVisible) {
+            return column.visible !== false;
+        }
+        return true;
+    })
+        .sort((a, b) => a.orderValue - b.orderValue);
+};
+const getFileName = () => {
+    const timestamp = new Date().toISOString().replaceAll(":", "-");
+    return `table-export-${timestamp}.xlsx`;
+};
+const downloadBuffer = (buffer) => {
+    const blob = new Blob([buffer], {
+        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    });
+    const url = window.URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = getFileName();
+    anchor.click();
+    window.URL.revokeObjectURL(url);
+};
+export const exportTableToExcel = (_a) => __awaiter(void 0, [_a], void 0, function* ({ columns, data, exportMode, }) {
+    const { default: ExcelJS } = yield import("exceljs");
+    const exportColumns = getColumnsForExport(columns, exportMode);
+    const workbook = new ExcelJS.Workbook();
+    const worksheet = workbook.addWorksheet("Table Export");
+    worksheet.addRow(exportColumns.map((column) => getColumnHeader(column)));
+    data.forEach((row) => {
+        worksheet.addRow(exportColumns.map((column) => getExportCellValue(row, column)));
+    });
+    const buffer = yield workbook.xlsx.writeBuffer();
+    downloadBuffer(buffer);
+});

package/dist/Table/types.d.ts

@@ -134,6 +134,7 @@ export type TableContextType = {
     toggleColumnVisibility: (dataField: string) => void;
     runSearch: (query: string) => void;
     clearSearch: () => void;
+    handleTableExport: (e: TableExportOptions) => Promise<void> | void;
     handleFilterChange: (query: Query) => void;
     selectAllRows: () => void;
     clearSelections: () => void;

package/dist/TextAreaInput/TextAreaInput.d.ts

@@ -1,9 +1,17 @@
 import React, { ReactNode } from "react";
 import { Size } from "../core";
-import { DropDownItem } from "..";
-export type InsertableItem = {
-    label: string;
-    value: string;
+import { DropDownMenuProps } from "../DropDownMenu/types";
+export type ActionMenuOptions = {
+    /**
+     * Visual style of the action menu trigger.
+     * - `"ellipsis"` renders a minimal `...` icon button.
+     * - `"dropdown"` renders an outlined button with a label and arrow (default).
+     */
+    variant?: "ellipsis" | "dropdown";
+    /** Label for the trigger button. Only used when `variant` is `"dropdown"`. Defaults to `"Insert"`. */
+    label?: ReactNode;
+    /** Props forwarded to the underlying DropDownMenu component. `data` carries the menu items. */
+    menuOptions: DropDownMenuProps;
 };
 export interface TextAreaInputProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     variant?: "contained" | "filled" | "outlined" | "text";
@@ -19,14 +27,7 @@ export interface TextAreaInputProps extends React.TextareaHTMLAttributes<HTMLTex
     onHeightChange?: (height: number, meta: {
         rowHeight: number;
     }) => void;
-    showActionMenu?: boolean;
-    actionMenuOptions?: Array<{
-        value: string;
-        label: string;
-    }>;
-    onActionMenuSelect?: (item: DropDownItem) => void;
-    insertableItems?: InsertableItem[];
-    onInsertItem?: (item: InsertableItem) => void;
+    actionMenuOptions?: ActionMenuOptions;
 }
 declare const TextAreaInput: React.ForwardRefExoticComponent<TextAreaInputProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default TextAreaInput;

package/dist/TextAreaInput/TextAreaInput.js

@@ -11,34 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-import { forwardRef, useState, useRef, useEffect } from "react";
-import { TextArea, FieldLabel, DropDownMenu, SelectBox, } from "..";
+import { forwardRef, useRef } from "react";
+import { TextArea, FieldLabel, DropDownMenu } from "..";
 import { MoreHorizontal } from "lucide-react";
-const DEFAULT_ACTIONS = [
-    { value: "clear", label: "Clear Text" },
-    { value: "insert", label: "Insert Item" },
-];
-const TextAreaWrapper = styled.div `
-  position: relative;
-`;
-const InsertMenuOverlay = styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10;
-  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
-  pointer-events: ${({ $visible }) => ($visible ? "auto" : "none")};
-  transform: ${({ $visible }) => $visible ? "translateY(0)" : "translateY(-4px)"};
-  transition:
-    opacity 0.2s ease,
-    transform 0.2s ease;
-`;
-const StyledInsertSelectBox = styled(SelectBox) `
-  width: 100%;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  border: 1px solid ${({ theme }) => theme.palette.primary.main};
-`;
 const StyledMoreHorizontal = styled(MoreHorizontal) `
   color: ${({ theme }) => theme.palette.text.secondary};
   &:hover {
@@ -46,21 +21,10 @@ const StyledMoreHorizontal = styled(MoreHorizontal) `
   }
 `;
 const TextAreaInput = forwardRef((props, ref) => {
-    const { 
-    // UI
-    label, error, required, colSpan = 1, size = "sm", description, maxRows = 6, minRows = 3, onHeightChange, cacheMeasurements, 
-    // Action menu
-    showActionMenu = false, actionMenuOptions = DEFAULT_ACTIONS, onActionMenuSelect, 
-    // Insertable items
-    insertableItems, onInsertItem } = props, 
-    // Rest of props for TextArea
-    rest = __rest(props, ["label", "error", "required", "colSpan", "size", "description", "maxRows", "minRows", "onHeightChange", "cacheMeasurements", "showActionMenu", "actionMenuOptions", "onActionMenuSelect", "insertableItems", "onInsertItem"]);
-    // State for insert menu visibility
-    const [showInsertMenu, setShowInsertMenu] = useState(false);
-    const [triggerSelectBoxOpen, setTriggerSelectBoxOpen] = useState(false);
+    const { label, error, required, colSpan = 1, size = "sm", description, maxRows = 6, minRows = 3, onHeightChange, cacheMeasurements, actionMenuOptions } = props, rest = __rest(props, ["label", "error", "required", "colSpan", "size", "description", "maxRows", "minRows", "onHeightChange", "cacheMeasurements", "actionMenuOptions"]);
+    const { variant: menuVariant = "dropdown", label: menuLabel = "Insert", menuOptions = { data: [] }, } = actionMenuOptions !== null && actionMenuOptions !== void 0 ? actionMenuOptions : {};
+    const { data: menuData = [], onItemSelect: consumerOnItemSelect, onAddNew: consumerOnAddNew } = menuOptions, restMenuOptions = __rest(menuOptions, ["data", "onItemSelect", "onAddNew"]);
     const textareaRef = useRef(null);
-    const insertMenuRef = useRef(null);
-    // Merge refs
     const mergedRef = (node) => {
         textareaRef.current = node;
         if (typeof ref === "function") {
@@ -70,79 +34,40 @@ const TextAreaInput = forwardRef((props, ref) => {
             ref.current = node;
         }
     };
-    // Handle click outside to close insert menu
-    useEffect(() => {
-        if (!showInsertMenu)
+    const insertAtCursor = (text) => {
+        var _a;
+        const textarea = textareaRef.current;
+        if (!textarea)
             return;
-        const handleClickOutside = (event) => {
-            if (insertMenuRef.current &&
-                !insertMenuRef.current.contains(event.target)) {
-                setShowInsertMenu(false);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [showInsertMenu]);
-    const handleActionSelect = (item) => {
-        if (item.value === "insert" && (insertableItems === null || insertableItems === void 0 ? void 0 : insertableItems.length)) {
-            setShowInsertMenu(true);
-            // Trigger SelectBox to open using the new enhanced props
-            setTriggerSelectBoxOpen(true);
-        }
-        else if (item.value === "clear") {
-            // Built-in clear functionality
-            const textarea = textareaRef.current;
-            if (textarea) {
-                textarea.value = "";
-                textarea.focus();
-                // Trigger change event so controlled components update
-                const event = new Event("input", { bubbles: true });
-                textarea.dispatchEvent(event);
-            }
-            onActionMenuSelect === null || onActionMenuSelect === void 0 ? void 0 : onActionMenuSelect(item);
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const currentValue = textarea.value;
+        const newValue = currentValue.slice(0, start) + text + currentValue.slice(end);
+        const nativeSet = (_a = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value")) === null || _a === void 0 ? void 0 : _a.set;
+        nativeSet === null || nativeSet === void 0 ? void 0 : nativeSet.call(textarea, newValue);
+        textarea.dispatchEvent(new Event("input", { bubbles: true }));
+        textarea.focus();
+        textarea.setSelectionRange(start + text.length, start + text.length);
+    };
+    const handleItemSelect = (item) => {
+        if (consumerOnItemSelect) {
+            consumerOnItemSelect(item);
         }
         else {
-            onActionMenuSelect === null || onActionMenuSelect === void 0 ? void 0 : onActionMenuSelect(item);
+            insertAtCursor(String(item.value));
         }
     };
-    const handleSelectBoxOpened = () => {
-        // Reset the trigger after SelectBox has opened
-        setTriggerSelectBoxOpen(false);
-    };
-    const handleInsertSelect = (value, option) => {
-        console.log("Selected value:", value, "Selected option:", option); // Debug log
-        // SelectBox passes (value, option) - we want the full option object
-        const item = option;
-        if (!item || !item.value) {
-            console.warn("Invalid item selected:", item);
-            setShowInsertMenu(false);
-            return;
-        }
-        if (onInsertItem) {
-            onInsertItem(item);
+    const handleAddNew = (value) => {
+        if (consumerOnAddNew) {
+            consumerOnAddNew(value);
         }
         else {
-            // Default behavior: insert at current cursor position
-            const textarea = textareaRef.current;
-            if (textarea) {
-                const start = textarea.selectionStart;
-                const end = textarea.selectionEnd;
-                const currentValue = textarea.value;
-                const newValue = currentValue.slice(0, start) + item.value + currentValue.slice(end);
-                textarea.value = newValue;
-                textarea.focus();
-                textarea.setSelectionRange(start + item.value.length, start + item.value.length);
-                // Trigger change event
-                const event = new Event("input", { bubbles: true });
-                textarea.dispatchEvent(event);
-            }
+            insertAtCursor(value);
         }
-        setShowInsertMenu(false);
     };
-    return (_jsxs("div", { style: { gridColumn: `span ${colSpan}`, height: "fit-content" }, children: [label && (_jsx(FieldLabel, { asterisk: required, error: error, description: description, size: size, actionComponent: showActionMenu ? (_jsx(DropDownMenu, { data: actionMenuOptions, variant: "text", size: "xs", arrow: false, onItemSelect: handleActionSelect, buttonProps: {
-                        "aria-label": "Open actions",
+    const hasMenuItems = menuData.length > 0;
+    return (_jsxs("div", { style: { gridColumn: `span ${colSpan}`, height: "fit-content" }, children: [label && (_jsx(FieldLabel, { asterisk: required, error: error, description: description, size: size, actionComponent: hasMenuItems ? (menuVariant === "ellipsis" ? (_jsx(DropDownMenu, Object.assign({ data: menuData, variant: "text", size: "xs", arrow: false, searchable: true, onAddNew: handleAddNew, onItemSelect: handleItemSelect, buttonProps: {
+                        "aria-label": "Insert item",
                         style: {
                             minWidth: "auto",
                             border: "none",
@@ -152,7 +77,14 @@ const TextAreaInput = forwardRef((props, ref) => {
                             height: 16,
                             width: 16,
                         },
-                    }, children: _jsx(StyledMoreHorizontal, { size: 16 }) })) : null, children: label })), _jsxs(TextAreaWrapper, { children: [_jsx(TextArea, Object.assign({ ref: mergedRef, size: size, maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange, cacheMeasurements: cacheMeasurements }, rest)), showInsertMenu && (insertableItems === null || insertableItems === void 0 ? void 0 : insertableItems.length) && (_jsx(InsertMenuOverlay, { ref: insertMenuRef, "$visible": showInsertMenu, children: _jsx(StyledInsertSelectBox, { data: insertableItems, placeholder: "Select item to insert...", searchable: true, clearable: false, arrow: false, focused: showInsertMenu, openOnFocus: true, triggerOpen: triggerSelectBoxOpen, onOpened: handleSelectBoxOpened, onChange: handleInsertSelect, size: size }) }))] })] }));
+                    }, dropDownProps: {
+                        style: { width: 200, maxWidth: 400 },
+                    } }, restMenuOptions, { children: _jsx(StyledMoreHorizontal, { size: 16 }) }))) : (_jsx(DropDownMenu, Object.assign({ data: menuData, variant: "outlined", size: "xs", arrow: true, searchable: true, onAddNew: handleAddNew, onItemSelect: handleItemSelect, buttonProps: {
+                        title: typeof menuLabel === "string" ? menuLabel : undefined,
+                        size: "xxs",
+                    }, dropDownProps: {
+                        style: { width: 200, maxWidth: 400 },
+                    } }, restMenuOptions, { children: menuLabel })))) : null, children: label })), _jsx(TextArea, Object.assign({ ref: mergedRef, size: size, maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange, cacheMeasurements: cacheMeasurements }, rest))] }));
 });
 TextAreaInput.displayName = "TextAreaInput";
 export default TextAreaInput;

package/dist/TextAreaInput/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./TextAreaInput";
+export type { ActionMenuOptions, TextAreaInputProps } from "./TextAreaInput";

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export { default as IconButton } from "./IconButton";
 export { default as DateInput } from "./DateInput";
 export { default as TextArea } from "./TextArea";
 export { default as TextAreaInput } from "./TextAreaInput";
+export type { ActionMenuOptions, TextAreaInputProps } from "./TextAreaInput";
 export { default as TagBox } from "./TagBox";
 export type { TagBoxProps, TagboxOption } from "./TagBox";
 export { default as FieldLabel } from "./FieldLabel";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.4.3",
+  "version": "1.5.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -59,6 +59,7 @@
     "@uiw/codemirror-theme-vscode": "^4.23.6",
     "@uiw/react-codemirror": "^4.23.6",
     "deepmerge": "^4.3.1",
+    "exceljs": "^4.4.0",
     "lucide-react": "^0.469.0",
     "moment": "^2.29.1",
     "overlayscrollbars": "^2.6.0",