@monolith-forensics/monolith-ui 1.4.0 → 1.4.2

package/dist/Alert/Alert.d.ts

@@ -3,6 +3,9 @@ export type AlertProps = {
     children: React.ReactNode;
     variant?: AlertVariant;
     title?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    showCloseButton?: boolean;
     onClose?: () => void;
 };
 export declare const Alert: React.FC<AlertProps>;

package/dist/Alert/Alert.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertCircleIcon, AlertTriangleIcon, CheckIcon, InfoIcon, } from "lucide-react";
+import { AlertCircleIcon, AlertTriangleIcon, CheckIcon, InfoIcon, XIcon, } from "lucide-react";
 import styled from "styled-components";
+import { useControlled } from "../Utilities";
 const Icons = {
     info: _jsx(InfoIcon, { size: 20 }),
     success: _jsx(CheckIcon, { size: 20 }),
@@ -9,14 +10,15 @@ const Icons = {
     default: _jsx(InfoIcon, { size: 20 }),
 };
 const StyledContainer = styled.div `
+  position: relative;
   display: flex;
   gap: 10px;
-  padding: 15px;
+  padding: 15px 40px 15px 15px;
   border-radius: 4px;
 
-  border: 1px solid ${({ theme, variant }) => theme.alert[variant].border};
-  background-color: ${({ theme, variant }) => theme.alert[variant].background};
-  color: ${({ theme, variant }) => theme.alert[variant].color};
+  border: 1px solid ${({ theme, $variant }) => theme.alert[$variant].border};
+  background-color: ${({ theme, $variant }) => theme.alert[$variant].background};
+  color: ${({ theme, $variant }) => theme.alert[$variant].color};
 `;
 const StyledTitle = styled.div `
   height: 25px;
@@ -26,7 +28,7 @@ const StyledTitle = styled.div `
   font-weight: bold;
   margin: 0px;
 
-  color: ${({ theme, variant }) => { var _a; return (_a = theme.alert[variant]) === null || _a === void 0 ? void 0 : _a.color; }};
+  color: ${({ theme, $variant }) => { var _a; return (_a = theme.alert[$variant]) === null || _a === void 0 ? void 0 : _a.color; }};
 `;
 const StyledContent = styled.div `
   display: flex;
@@ -34,10 +36,11 @@ const StyledContent = styled.div `
   font-weight: 400;
   margin: 0px;
 
-  color: ${({ theme, variant }) => theme.palette.text.primary};
+  color: ${({ theme }) => theme.palette.text.primary};
 `;
 const StyledContentContainer = styled.div `
   display: flex;
+  flex: 1;
   flex-direction: column;
   gap: 5px;
 `;
@@ -47,6 +50,44 @@ const StyledHeader = styled.div `
   height: 28px;
   align-items: center;
 `;
-export const Alert = ({ children, variant = "info", title, onClose, }) => {
-    return (_jsxs(StyledContainer, { variant: variant, children: [_jsx(StyledHeader, { children: Icons[variant] }), _jsxs(StyledContentContainer, { children: [title && _jsx(StyledTitle, { variant: variant, children: title }), _jsx(StyledContent, { variant: variant, children: children })] })] }));
+const StyledCloseButton = styled.button `
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  border: none;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  cursor: pointer;
+  color: ${({ theme, $variant }) => theme.alert[$variant].color};
+`;
+const StyledCloseIconWrapper = styled.div `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border-radius: 8px;
+  background-color: transparent;
+  transition:
+    background-color 0.15s ease,
+    opacity 0.15s ease;
+
+  ${StyledCloseButton}:hover & {
+    ${({ $variant, theme }) => $variant === "default"
+    ? `background-color: ${theme.palette.action.hover};`
+    : `background-color: ${theme.alert[$variant].background};`}
+  }
+`;
+export const Alert = ({ children, variant = "info", title, open, defaultOpen = true, showCloseButton = false, onClose, }) => {
+    const [isVisible, setIsVisible] = useControlled(open, defaultOpen);
+    if (!isVisible) {
+        return null;
+    }
+    const handleClose = () => {
+        setIsVisible(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    return (_jsxs(StyledContainer, { "$variant": variant, children: [_jsx(StyledHeader, { children: Icons[variant] }), _jsxs(StyledContentContainer, { children: [title && _jsx(StyledTitle, { "$variant": variant, children: title }), _jsx(StyledContent, { "$variant": variant, children: children })] }), showCloseButton && (_jsx(StyledCloseButton, { type: "button", "$variant": variant, "aria-label": "Close alert", onClick: handleClose, children: _jsx(StyledCloseIconWrapper, { "$variant": variant, children: _jsx(XIcon, { size: 16 }) }) }))] }));
 };

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/Modal/Modal.js

@@ -58,6 +58,7 @@ const StyledContent = styled.div `
 const StyledInnerContent = styled.div `
   display: flex;
   flex-direction: column;
+  flex: 1 1 auto;
 
   overflow-y: auto;
   padding: 25px;

package/dist/QueryFilter/types.d.ts

@@ -20,13 +20,13 @@ export type Operator = {
     label: string;
     value: string;
 };
-export type EditorType = "text" | "select" | "checkbox" | "radio" | "multiselect" | "date" | "time" | null;
+export type InputType = "text" | "number" | "date" | "datetime" | "multiselect";
 export interface FilterDefinition {
     dataField: string;
     label: string;
     pluralLabel?: string;
     operators?: Operator[];
-    inputType?: HTMLInputElement["type"];
+    inputType?: InputType;
     resolution?: "day" | "second" | "millisecond";
     isoString?: boolean;
     placeholder?: string;
@@ -34,7 +34,6 @@ export interface FilterDefinition {
     dropDownOptions?: {
         style?: React.CSSProperties;
     };
-    editorType?: EditorType;
     query?: DropDownMenuProps["query"];
 }
 export interface Rule {

package/dist/Table/StaticRows.js

@@ -5,6 +5,6 @@ import useTable from "./useTable";
 const StaticRows = ({ targetElm, listElm }) => {
     var _a;
     const { data, loadingRowIds, keyField } = useTable();
-    return (_jsx(TBody, { className: "mfui-tbody", children: _jsx(TableViewPort, { className: "mfui-tbody-viewport", ref: targetElm, children: _jsx(TableListElement, { className: "mfui-tbody-list", ref: listElm, children: (_a = data === null || data === void 0 ? void 0 : data.map) === null || _a === void 0 ? void 0 : _a.call(data, (row, index) => (_jsx(TableRow, { rowData: row, loading: !!keyField ? loadingRowIds === null || loadingRowIds === void 0 ? void 0 : loadingRowIds.includes(row[keyField]) : false }, index))) }) }) }));
+    return (_jsx(TBody, { className: "mfui-tbody", children: _jsx(TableViewPort, { className: "mfui-tbody-viewport", ref: targetElm, children: _jsx(TableListElement, { className: "mfui-tbody-list", ref: listElm, children: (_a = data === null || data === void 0 ? void 0 : data.map) === null || _a === void 0 ? void 0 : _a.call(data, (row) => (_jsx(TableRow, { rowData: row, loading: !!keyField ? loadingRowIds === null || loadingRowIds === void 0 ? void 0 : loadingRowIds.includes(row[keyField]) : false }, keyField ? row[keyField] : row.__key))) }) }) }));
 };
 export default StaticRows;

package/dist/Table/Table.js

@@ -9,14 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useOverlayScrollbars } from "overlayscrollbars-react";
 import { StyledTable } from "./TableComponents";
 import TableHeader from "./TableHeader";
 import TableProvider from "./TableProvider";
 import shortUUID from "short-uuid";
-import VirtualizedRows from "./VirtualIzedRows";
+import VirtualizedRows from "./VirtualizedRows";
 import StaticRows from "./StaticRows";
 import TableMenu from "./TableMenu";
 import useTable from "./useTable";
@@ -37,7 +37,7 @@ const TableContent = ({ children, }) => {
                     height: tableHeight || "100%",
                     maxHeight: tableMaxHeight,
                     minHeight: tableMinHeight,
-                }, ref: tableElement, "data-compact": compactState, children: [_jsx(LoadingIndicator, { visible: loading }), _jsx(TableHeader, { headerRowElm: headerRowElm }), visibleColumnCount === 0 && _jsx(_Fragment, {}), virtualized === true ? (_jsx(VirtualizedRows, { tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm, rowHeight: rowHeight, headerRowHeight: headerRowHeight })) : (_jsx(StaticRows, { targetElm: targetElm, listElm: listElm }))] })] }));
+                }, ref: tableElement, "data-compact": compactState, children: [_jsx(LoadingIndicator, { visible: loading }), _jsx(TableHeader, { headerRowElm: headerRowElm }), visibleColumnCount === 0 && _jsx("div", { children: "No columns visible" }), virtualized === true ? (_jsx(VirtualizedRows, { tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm, rowHeight: rowHeight, headerRowHeight: headerRowHeight })) : (_jsx(StaticRows, { targetElm: targetElm, listElm: listElm }))] })] }));
 };
 export const Table = (_a) => {
     var { data, columnProps, children } = _a, props = __rest(_a, ["data", "columnProps", "children"]) // pass through props straight to table context
@@ -109,6 +109,22 @@ export const Table = (_a) => {
             resizeObserver.unobserve(element);
         };
     }, []);
-    const __data = useMemo(() => data === null || data === void 0 ? void 0 : data.map((d, i) => (Object.assign(Object.assign({}, d), { __key: shortUUID.generate(), __index: i }))), [data]);
+    // Persistent cache mapping each row object to a stable UUID.
+    // Uses a WeakMap so entries are automatically garbage collected
+    // when their corresponding row objects are no longer referenced.
+    const uuidCache = useRef(new WeakMap());
+    // Augment each row with a stable __key (UUID) and __index.
+    // The WeakMap ensures that the same row object always receives
+    // the same UUID across re-renders, preventing unnecessary DOM
+    // reconciliation. useMemo preserves referential stability of
+    // the output array when the data reference hasn't changed.
+    const __data = useMemo(() => data === null || data === void 0 ? void 0 : data.map((d, i) => {
+        let key = uuidCache.current.get(d);
+        if (!key) {
+            key = shortUUID.uuid();
+            uuidCache.current.set(d, key);
+        }
+        return Object.assign(Object.assign({}, d), { __key: key, __index: i });
+    }), [data]);
     return (_jsx(TableProvider, Object.assign({ columns: columnProps, data: __data, tableElement: tableElement, headerRowElm: headerRowElm, tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm }, props, { children: _jsx(TableContent, { children: children }) })));
 };

package/dist/Table/TableMenu/TableMenu.js

@@ -29,7 +29,7 @@ const FlexedRow = styled.div `
   }
 `;
 const TableMenu = () => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { data, columnState, searchState, toggleColumnVisibility, tableMenuOptions, runSearch, enableSelection, compactState, toggleCompact, totalRecords, getCalculatedSelectionTotal, filterState, handleFilterChange, clearSearch, } = useTable();
     const inputRef = useRef(null);
     if ((tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.enabled) !== true)
@@ -38,7 +38,7 @@ const TableMenu = () => {
     const queryFilter = useQueryFilter({
         defaultFilter: filterState,
         filterDefinitions: (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.filterDefinitions) || [],
-        showCombinator: true,
+        showCombinator: (_a = filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.showCombinator) !== null && _a !== void 0 ? _a : true,
         onFilterChange: (q) => {
             var _a;
             handleFilterChange(q);
@@ -81,13 +81,13 @@ const TableMenu = () => {
             inputRef.current.value = "";
         }
     }, [searchState]);
-    return (_jsxs(StyledContainer, { children: [_jsxs(FlexedRow, { className: "justify-sb", children: [_jsxs(FlexedRow, { children: [(addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.enabled) === true &&
+    return (_jsxs(StyledContainer, { className: "mfui-table-menu", children: [_jsxs(FlexedRow, { className: "justify-sb", children: [_jsxs(FlexedRow, { children: [(addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.enabled) === true &&
                                 ((addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.type) === "button" ||
-                                    (addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.type) === undefined) && (_jsx(Button, Object.assign({ color: "primary", variant: "contained", size: "xxs", onClick: () => { var _a; return (_a = addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.onClick) === null || _a === void 0 ? void 0 : _a.call(addButtonOptions); } }, addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.buttonOptions, { children: ((_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _a === void 0 ? void 0 : _a.label) || "+ Add Record" }))), (addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.enabled) === true &&
+                                    (addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.type) === undefined) && (_jsx(Button, Object.assign({ color: "primary", variant: "contained", size: "xxs", onClick: () => { var _a; return (_a = addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.onClick) === null || _a === void 0 ? void 0 : _a.call(addButtonOptions); } }, addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.buttonOptions, { children: ((_b = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _b === void 0 ? void 0 : _b.label) || "+ Add Record" }))), (addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.enabled) === true &&
                                 (addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.type) === "menu" && (_jsx(DropDownMenu, Object.assign({ data: [], variant: "contained", arrow: true, size: "xxs", buttonProps: {
                                     color: "primary",
                                     size: "xxs",
-                                } }, addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.menuOptions, { children: ((_b = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _b === void 0 ? void 0 : _b.label) || "Options" }))), (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: ((_c = filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.filterDefinitions) === null || _c === void 0 ? void 0 : _c.map((filter) => ({
+                                } }, addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.menuOptions, { children: ((_c = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _c === void 0 ? void 0 : _c.label) || "Options" }))), (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: ((_d = filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.filterDefinitions) === null || _d === void 0 ? void 0 : _d.map((filter) => ({
                                     label: filter.label,
                                     value: filter.dataField,
                                     data: filter,
@@ -131,6 +131,6 @@ const TableMenu = () => {
                                     style: { padding: "0px 4px", height: 24 },
                                 }, dropDownProps: {
                                     style: { width: 175, maxWidth: 400 },
-                                }, children: _jsx(Columns3Icon, { size: 14 }) })), (searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.enabled) === true && (_jsx(TextInput, { ref: inputRef, size: "xs", placeholder: ((_d = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.searchOptions) === null || _d === void 0 ? void 0 : _d.placeholder) || "Search", defaultValue: searchState, onChange: handleSearch }))] })] }), _jsx(QueryFilter, { queryFilter: queryFilter })] }));
+                                }, children: _jsx(Columns3Icon, { size: 14 }) })), (searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.enabled) === true && (_jsx(TextInput, { ref: inputRef, size: "xs", placeholder: ((_e = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.searchOptions) === null || _e === void 0 ? void 0 : _e.placeholder) || "Search", defaultValue: searchState, onChange: handleSearch }))] })] }), _jsx(QueryFilter, { queryFilter: queryFilter })] }));
 };
 export default TableMenu;