@monolith-forensics/monolith-ui 1.4.0 → 1.4.1

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/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;